html{scroll-behavior:auto}
/* 메인 상단바: 반투명 (다른 페이지는 흰색) */
/* 첫 화면 위: 어두운 반투명 + 흰 글씨 (네이버랩스 방식) / 밝은 구간 위: 밝은 반투명 + 짙은 글씨 */
.home .top{background:rgba(8,12,18,.16);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);box-shadow:none;transition:background .4s ease,box-shadow .4s ease}
.home .top .nav,.home .top .lang,.home .top .menu,.home .top .cta{color:#fff;transition:color .4s ease}
.home .top .lang span{color:rgba(255,255,255,.55)}
.home .top .nl:hover{color:#9fe3d2}
.home .top.light{background:rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(15,23,42,.06)}
.home .top.light .nav,.home .top.light .lang,.home .top.light .menu,.home .top.light .cta{color:var(--ink)}
.home .top.light .lang span{color:#94a3b8}
.home .top.light .nl:hover{color:var(--blue)}

/* 한 구간 = 한 화면 (상단바는 그 위에 겹친다) */
.screen{position:relative;min-height:calc(var(--vh,1vh)*100)}
.screen > .wrap{width:100%}

/* 1. 첫 화면: 한 줄 문구 + TAREM 트레일러 */
.hero{height:calc(var(--vh,1vh)*100);min-height:600px;color:#fff;overflow:hidden;background:#000}
.film{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.film .shot{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0;will-change:transform,opacity}
.film .g-dark{filter:brightness(.4) contrast(1.45) saturate(.5)}
.film .g-dim{filter:brightness(.5) contrast(1.22) saturate(.55)}
.film .g-studio{filter:brightness(.8) contrast(1.06) saturate(.85)}
.film .g-field{filter:brightness(.8) saturate(.95)}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 65% at 58% 45%,rgba(0,0,0,0) 35%,rgba(0,0,0,.7) 100%);opacity:.55;transition:opacity 1.2s ease}
.hero.is-dark .vig{opacity:1}
/* 지나가는 빛줄기: 칸마다 로고의 민트→블루 계열로 색이 바뀐다(--sw-rgb는 tarem-film.js가 칸마다 넣는다) */
.hero{--sw-rgb:99,187,162}
.sweep{position:absolute;top:-20%;left:0;width:2px;height:140%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(var(--sw-rgb),.95) 50%,transparent);box-shadow:0 0 22px 2px rgba(var(--sw-rgb),.6);transition:background .6s,box-shadow .6s;transform:translateX(-10vw) rotate(16deg);opacity:0}
.sweep.go{animation:sweep 2.9s cubic-bezier(.45,0,.25,1) forwards}
.hero.paused .sweep.go{animation-play-state:paused}
@keyframes sweep{0%{transform:translateX(-10vw) rotate(16deg);opacity:0}15%{opacity:.9}80%{opacity:.9}100%{transform:translateX(calc(var(--vw,1vw)*110)) rotate(16deg);opacity:0}}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(3,8,14,.88) 0%,rgba(3,8,14,.45) 38%,rgba(3,8,14,0) 70%),linear-gradient(90deg,rgba(3,8,14,.6) 0%,rgba(3,8,14,0) 55%)}
.hero-main{position:absolute;left:0;right:0;bottom:clamp(118px,calc(var(--vh,1vh)*18 - 2px),178px);z-index:1}
.hero-main .wrap > *{position:relative;left:-2px}   /* 글자 묶음을 왼쪽·아래로 2px */
.hero h1 .line-up{padding-bottom:.16em;margin-bottom:-.16em}   /* g·y 아래가 잘리지 않게 */
.hero h1{font-family:var(--en);font-size:clamp(32px,calc(var(--vw,1vw)*3.1),50px);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:#fff}
.hero-ko{margin-top:16px;max-width:760px;font-size:15.5px;font-weight:500;line-height:1.6;color:#8d9cab;text-wrap:balance}   /* 위에서 아래로: 흰색 → 밝은 회색 → 회색 */
.hero .line-up > span{transition-duration:1.2s}
.hero-ko strong{display:block;margin-bottom:6px;font-size:20px;font-weight:600;line-height:1.45;color:#cdd7e0}
.hero-ko{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .35s,transform 1s var(--ease) .35s}
.hero.ready .hero-ko{opacity:1;transform:none}
/* 아래 가운데 진행 줄 (이름 없이) */
.lines{position:absolute;left:50%;bottom:42px;z-index:2;display:flex;gap:10px;transform:translateX(-50%)}
.chap{position:relative;width:76px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.chap::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.3);transition:background .3s}
.chap:hover::before{background:rgba(255,255,255,.55)}
.chap i{position:absolute;left:0;top:11px;height:2px;width:0;background:rgb(var(--sw-rgb));box-shadow:0 0 8px rgba(var(--sw-rgb),.7)}
.hero.paused .chap i{animation-play-state:paused !important}
@keyframes fill{from{width:0}to{width:100%}}
.pause{position:absolute;right:var(--gut);bottom:34px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;cursor:pointer;display:grid;place-items:center}
.pause svg{width:12px;height:12px;fill:#fff}
.hero-note{position:absolute;left:var(--gut);bottom:44px;z-index:2;font-size:12px;color:#8fa1b2}

/* 2. About: 따뜻한 흰 바탕 */
.about{display:flex;flex-direction:column;background:var(--warm);text-align:center;overflow:hidden;padding-top:calc(var(--head) + clamp(36px,calc(var(--vh,1vh)*7),96px))}
.about h2{margin-top:14px;font-family:var(--en);font-size:clamp(40px,min(calc(var(--vw,1vw)*7),calc(var(--vh,1vh)*11)),108px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
.about .lead{margin:clamp(18px,calc(var(--vh,1vh)*3),32px) auto 0;max-width:760px;font-size:clamp(18px,calc(var(--vw,1vw)*1.7),24px);font-weight:600;line-height:1.55;color:#3a4655}
.about .text{margin:12px auto 0;max-width:660px;font-size:16px;color:#8a96a3}
.about .go{margin-top:clamp(18px,calc(var(--vh,1vh)*3),30px)}
.planet-wrap{position:relative;flex:1;min-height:clamp(140px,calc(var(--vh,1vh)*24),300px);margin-top:clamp(24px,calc(var(--vh,1vh)*4),48px)}
.planet{position:absolute;left:50%;top:0;width:min(1180px,calc(var(--vw,1vw)*130));aspect-ratio:1;margin-left:calc(min(1180px,calc(var(--vw,1vw)*130)) / -2);border-radius:50%;overflow:hidden;box-shadow:0 -24px 80px rgba(60,90,70,.16);transform:translateY(90px);transition:transform 1.6s var(--ease)}
.planet.in{transform:none}
.planet img{height:100%;object-fit:cover;object-position:50% 38%}
.about .cap{position:absolute;right:var(--gut);bottom:14px;color:#e9efe9;text-shadow:0 1px 4px rgba(0,0,0,.5);z-index:1}

/* 공통: 가운데 제목 */
.c-head{text-align:center}
.c-head h2{margin-top:8px;font-size:clamp(30px,calc(var(--vw,1vw)*3),44px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}

/* 4. 소식 + 문의를 한 화면에 */
.final{display:flex;flex-direction:column;height:calc(var(--vh,1vh)*100)}
.news{flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(var(--head) + clamp(36px,calc(var(--vh,1vh)*7),96px)) 0 clamp(36px,calc(var(--vh,1vh)*6),72px)}
.news .wrap{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:flex-start}   /* 제목 높이를 위 비전 구역과 같게: 위에서부터 놓는다 */
.n-head{position:relative;text-align:center;margin-bottom:clamp(48px,calc(var(--vh,1vh)*7.5),88px)}
.n-head h2{margin-top:6px;font-size:clamp(30px,calc(var(--vw,1vw)*3),44px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.n-head .go{position:absolute;right:0;bottom:8px}
.cards{flex:0 1 clamp(240px,calc(var(--vh,1vh)*42),440px);min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(28px,calc(var(--vw,1vw)*2.6),44px)}
.card{display:flex;flex-direction:column;min-height:0}
.card .ph{position:relative;display:block;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:var(--soft)}
.card .ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card .meta{margin-top:18px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.card .meta b{font-weight:700;color:var(--ink)}
.card .meta i{width:1px;height:11px;background:#c5cedb}
.card .meta time{font-family:var(--en);font-weight:600}
.card h3{margin-top:6px;font-size:clamp(17px,calc(var(--vw,1vw)*1.35),20px);font-weight:600;line-height:1.45;color:var(--ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
html[lang="en"] .card h3{-webkit-line-clamp:3}   /* 영어 기사 제목은 한글보다 길어 세 줄까지(두 줄에서 … 로 잘리지 않게) */
.card:hover h3{color:#1d5f8f}
/* 문의: 소식이 넓게 보이도록 한 줄짜리 얇은 띠 */
.ask{background:var(--dark);color:#fff;padding:clamp(22px,calc(var(--vh,1vh)*3.2),34px) 0}
.ask-grid{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.ask .eyebrow{color:#8597a8}
.ask h2{margin-top:6px;font-family:var(--en);font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.ask .cta{margin-top:16px;height:46px;padding:0 24px 0 26px;gap:10px;font-size:16px;letter-spacing:-.01em}
.ask dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:end;gap:0 44px}
.ask dl div{display:block;padding:0;border:0}
.ask dl div:last-child{border:0}
.ask dt{font-size:13px;color:#8597a8}
.ask dd{margin-top:4px;font-size:17px;font-weight:600}

@media (max-width:860px){
  .home .top .nav.open{color:var(--ink)}
  .screen,.biz-sec,.final{height:auto;min-height:0}
  .hero{height:calc(var(--vh,1vh)*100);max-height:780px;min-height:560px}
  .hero-main{bottom:120px}
  .film .water-product{height:60%;mask-image:linear-gradient(#000 83%,transparent)}
  .lines{bottom:40px}
  .chap{width:44px}
  .lines{gap:8px}
  .pause{bottom:32px;width:36px;height:36px}
  .hero-note{bottom:84px}
  .about{padding-top:calc(var(--head) + 56px)}
  .about .text{font-size:15px}
  .planet-wrap{flex:none;height:200px}
  .news{padding:72px 0}
  .n-head{align-items:flex-end}
  .cards{flex:none;grid-template-columns:1fr;grid-template-rows:none;gap:32px}
  .card .ph{flex:none;aspect-ratio:16/9}
  .ask{padding:48px 0}
  .ask-grid{grid-template-columns:1fr;gap:28px}
  .ask dl{grid-template-columns:1fr;justify-content:stretch;gap:14px}
}