.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
/* 시작 화면(1.2초) */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:28px 40px}
.loader .lc{font-family:var(--mono);font-size:min(22vw,260px);line-height:.8;letter-spacing:-.06em;color:var(--white);font-weight:500}
.loader .lt{display:flex;justify-content:space-between}

/* 1. 첫 화면 */
.s-hero{position:relative;height:100vh;overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.78) contrast(1.06)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,16,.35),rgba(11,12,16,0) 30%,rgba(11,12,16,.15) 60%,rgba(11,12,16,.75))}
.hero-title{position:absolute;left:40px;bottom:120px;font-size:clamp(40px,5.6vw,92px);font-weight:700;line-height:1.04;letter-spacing:-.045em}
.hero-meta{position:absolute;left:40px;right:40px;bottom:32px;display:grid;grid-template-columns:repeat(4,1fr);color:var(--mute)}
.hero-meta b{color:var(--white);font-weight:500}
.hero-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:clamp(40px,7.4vw,132px);opacity:0;pointer-events:none;text-shadow:0 2px 30px rgba(0,0,0,.35);will-change:transform,opacity,filter}
/* 영상이 줄어들기 시작하면 가운데에서 다가오는 글자(2026-11-05 대표: 영문을 크게, 한글은 작게) */ .hero-mid .ko{font-size:.3em;font-weight:600;letter-spacing:-.02em;margin-bottom:.3em}
.hero-mid .en{font-weight:800;letter-spacing:-.045em;line-height:.95;white-space:nowrap}

/* 2. 문장이 차오름 */
.s-statement{padding:22vh 0 26vh}
.s-statement .mono{color:var(--mute);margin-bottom:40px;display:block}
.stmt{font-size:clamp(30px,3.9vw,64px);font-weight:600;line-height:1.28;letter-spacing:-.035em;max-width:1280px}
.stmt .w{opacity:.14;display:inline}
@media (max-width:860px){.stmt br.lb{display:none}}

/* 3. 숫자 격자 */
/* 3. 클라이언트의 말 */
.s-voices{position:relative;height:100vh;overflow:hidden}
.vc-stage{position:absolute;inset:0;overflow:hidden}
.vc-head{position:absolute;left:0;right:0;top:15vh;text-align:center;z-index:3;pointer-events:none}
.vc-head .mono{display:block;opacity:.6;margin-bottom:18px}
.vc-head h2{font-size:clamp(34px,4.6vw,76px);font-weight:700;letter-spacing:-.05em;line-height:1.08}
.vc-cards{position:absolute;left:50%;top:62%;z-index:2}
.vc-card{position:absolute;left:0;top:0;width:200px;margin:-130px 0 0 -100px;background:#fff;box-shadow:0 24px 50px -22px rgba(11,12,16,.45);padding:8px 8px 12px;will-change:transform}
.vc-card .ph{aspect-ratio:4/5;overflow:hidden;background:#e9e7e1}
.vc-card img{width:100%;height:100%;object-fit:cover;display:block}
.vc-card span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;margin-top:9px;opacity:.7}
.vc-chat{position:absolute;left:50%;top:50%;width:1500px;height:200vh;margin:-100vh 0 0 -750px;display:flex;justify-content:center;align-items:center;gap:44px;transform:rotate(-12deg);z-index:1;opacity:0}
.vc-col{display:flex;flex-direction:column;gap:44px;will-change:transform}
.vc-col .kk{width:300px}

/* A12 일하는 방식 — 회사소개 1안에서 옮겨 옴. 스크롤에 맞춰 선이 그어지고, 선이 지나간 단계가 켜짐(화면을 붙잡지 않음) */
.s-how{padding-block:18vh;--hw-ln:rgba(255,255,255,.14);--hw-sub:rgba(245,244,240,.62)}
.hw-top{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
.hw-top .mono{display:block;color:var(--mute);margin-bottom:34px}
.hw-top h2{font-size:clamp(36px,4.6vw,78px);font-weight:700;letter-spacing:-.05em;line-height:1.06}
.hw-top p{font-size:17px;line-height:1.7;color:var(--hw-sub);max-width:560px}
.hw-flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:14vh;padding-top:46px}
.hw-line{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--hw-ln)}
.hw-line i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left}
.hw-step{position:relative;opacity:.28;transition:opacity .6s}
.hw-step::before{content:"";position:absolute;left:0;top:-42px;width:10px;height:10px;border:1px solid currentColor;background:var(--ink);transition:background .4s}
.hw-step.on{opacity:1}
.hw-step.on::before{background:currentColor}
.hw-step .mono{opacity:.7}
.hw-step b{display:block;font-size:clamp(24px,2.1vw,34px);letter-spacing:-.045em;margin:16px 0 14px}
.hw-step p{font-size:15px;line-height:1.65;color:var(--hw-sub)}

/* 4. 서비스 — 왼쪽 줄 목록 + 오른쪽 세로 장면(목록 높이에 맞춰 늘어남, 화면을 붙잡지 않음). 마우스를 움직여 올린 줄이 검게 차오르고 오른쪽 장면 영상이 아래에서 열리며 바뀜 */
.s-svc{padding-block:16vh 18vh}
/* 제목은 아래 목록과 같은 왼쪽 선, 설명은 오른쪽 사진과 같은 시작선(2026-11-06 대표: 왼쪽 정렬) */
.svc-h{display:grid;grid-template-columns:7fr 5fr;gap:28px 56px;align-items:end;margin-bottom:64px}
.svc-h .mono{opacity:.6;grid-column:1/-1}
.svc-h p{max-width:420px}
.svc-h h2{font-size:clamp(40px,5.2vw,88px);font-weight:700;letter-spacing:-.055em;line-height:1.02}
.svc-h p{font-size:16px;line-height:1.65}
.svc-body{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:stretch}
.rows{border-top:1px solid currentColor}
.row{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:center;min-height:11vh;padding:18px 20px;border-bottom:1px solid var(--line-d);overflow:hidden;isolation:isolate;transition:color .45s}
.row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.7,0,.2,1);z-index:-1}
.row .i{opacity:.6}
.row .nm{font-size:clamp(28px,3.2vw,54px);font-weight:700;letter-spacing:-.05em;line-height:1.05;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.row .ln{display:none}
@media (hover:hover){
  .row.on{color:var(--white)}
  .row.on::before{transform:scaleY(1);transform-origin:bottom}
  .row.on .nm{transform:translateX(16px)}
}
.svc-view{display:flex;flex-direction:column}
.svc-pic{position:relative;flex:1;min-height:0;overflow:hidden;background:#cfcdc6}
.svc-pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0)}
.svc-pic video.on{z-index:2}
.svc-pic video.shown{clip-path:inset(0 0 0 0)}
.svc-cap{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:15px;line-height:1.55}
.svc-cap .mono{white-space:nowrap;opacity:.7}

/* 5. 연혁 — 한 화면에 8년이 책등처럼 서 있고, 스크롤하면 한 해씩 넓게 펼쳐짐(고정 구간 1.6화면) */
/* 2026-11-06 대표: 원래 높이(화면 가득)로 되돌리고, 화면을 붙잡은 동안 스크롤하면 2019~2026이 한 해씩 펼쳐짐(한 해 약 0.3화면) */
.s-hist{height:100vh;height:100svh}
.s-hist{background:var(--ink);color:var(--white)} /* 바탕색이 바뀌는 순간에도 연혁은 늘 어둡게 */
.hist-in{height:100%;display:flex;flex-direction:column;gap:22px;padding-top:104px;padding-bottom:5vh}
.hist-head{display:flex;align-items:flex-end;gap:24px}
.hist-head .mono{color:var(--mute);white-space:nowrap}
.hist-t{flex:1;font-size:clamp(28px,3vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1.1;margin-left:6vw}
.hist-cols{flex:1;min-height:0;display:flex;border-left:1px solid var(--line)}
.hc{flex:1 1 0;min-width:0;position:relative;overflow:hidden;border-right:1px solid var(--line);cursor:pointer;transition:background-color .6s}
.hc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--butter);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.hc.past::before,.hc.on::before{transform:scaleX(1)}
.hc.on{background:var(--ink2);cursor:default}
.hc .sp{position:absolute;inset:0;padding:22px 16px;display:flex;flex-direction:column;justify-content:space-between;transition:opacity .45s}
.hc .sp .mono{color:var(--mute)}
.hc .sp .lb{display:none}
.hc .sp b{font-size:clamp(56px,5.6vw,96px);font-weight:700;letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(245,244,240,.4);writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;transition:-webkit-text-stroke-color .5s}
.hc.past .sp b{-webkit-text-stroke-color:var(--butter)}
.hc.on .sp{opacity:0}
.hc .bd{position:absolute;top:0;bottom:0;left:0;width:38vw;padding:22px 28px 26px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .45s;pointer-events:none}
.hc.on .bd{opacity:1}
.bd .mono{color:var(--mute)}
.bd .yb{display:block;font-size:clamp(96px,10vw,176px);font-weight:700;letter-spacing:-.07em;line-height:.82;font-variant-numeric:tabular-nums}
.bd .mk{overflow:hidden;display:block}
.bd h3{font-size:clamp(24px,2.2vw,36px);font-weight:600;letter-spacing:-.04em;margin:20px 0 14px}
.bd li{list-style:none;font-size:17px;line-height:1.85;color:rgba(245,244,240,.78)}
.bd li::before{content:"— ";color:var(--butter)}
.hist-bar{height:1px;background:var(--line);position:relative}
/* 연혁 시안(2026-11-06 대표: 스크롤을 붙잡지 않고 다 보여 주기) — 주소 ?hmode=auto | flow
   auto = 화면에 들어오면 한 해씩 저절로 펼쳐짐 + 접힌 칸에도 그 해 한 줄 제목 / flow = 스크롤하는 동안 연도 카드 띠가 옆으로 흐르고 가운데 온 해가 켜짐 */
.s-hist.auto,.s-hist.flow{height:auto}
.s-hist.auto .hist-in,.s-hist.flow .hist-in{height:auto;padding-top:12vh;padding-bottom:12vh}
/* 2026-11-06 대표: 위아래 구역과 바탕 경계선이 보이지 않게 — A+B는 자기 바탕을 칠하지 않고 화면 전체 바탕이 한꺼번에 어두워졌다 밝아지는 전환을 따름.
   바탕이 아직 밝을 때 흰 글자가 비치지 않도록 내용은 바탕이 어두운 동안(.lit)에만 서서히 보임 */
.s-hist.auto{background:transparent}
.s-hist.auto .hist-in{opacity:0;transition:opacity .8s}
.s-hist.auto.lit .hist-in{opacity:1}
.s-hist.auto .hist-cols{flex:none;height:clamp(460px,62vh,660px)} /* 2026-11-06 대표: 더 높게(400px → 화면의 62%) */
.s-hist.auto .hc .sp .lb{display:block;order:1;writing-mode:vertical-rl;font-size:13px;letter-spacing:-.01em;color:rgba(245,244,240,.6);margin:12px 0 0 2px;white-space:nowrap}
.s-hist.auto .hc .sp b{order:2;margin-top:auto}
.s-hist.auto .hc.past .sp .lb{color:rgba(217,197,154,.85)}
.hist-auto{display:none;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.s-hist.auto .hist-auto{display:flex}
.hist-auto button{all:unset;cursor:pointer;color:var(--white);border-bottom:1px solid currentColor}
.hflow{display:none}
.s-hist.flow .hist-cols,.s-hist.flow .hist-bar{display:none}
.s-hist.flow .hflow{display:flex;gap:28px;padding:0 32vw;width:max-content;will-change:transform}
.s-hist.flow .hist-in{overflow:hidden}
.hfc{flex:none;width:36vw;min-height:380px;padding:26px 30px 32px;background:var(--ink2);border-top:2px solid rgba(217,197,154,.35);display:flex;flex-direction:column;justify-content:space-between;opacity:.3;transform:scale(.92);transform-origin:50% 60%;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),border-color .5s}
.hfc.on{opacity:1;transform:none;border-top-color:var(--butter)}
.hfc .mono{color:var(--mute)}
.hfc .yb{display:block;font-size:clamp(84px,8.6vw,150px);font-weight:700;letter-spacing:-.07em;line-height:.82;font-variant-numeric:tabular-nums;margin-top:28px}
.hfc h3{font-size:clamp(22px,2vw,32px);font-weight:600;letter-spacing:-.04em;margin:18px 0 12px}
.hfc li{list-style:none;font-size:16px;line-height:1.8;color:rgba(245,244,240,.78)}
.hfc li::before{content:"— ";color:var(--butter)}
.hist-bar i{position:absolute;left:0;top:0;height:1px;background:var(--white);width:0}

/* 6. 큰 숫자 한 문장 */
.s-big{padding:24vh 0;text-align:center}
.big{font-size:clamp(48px,9.6vw,176px);font-weight:700;letter-spacing:-.06em;line-height:1.04}
/* 0에서 38,000까지 빠르게 차오르는 숫자 — 자리 폭을 고정해 줄이 흔들리지 않게 */ .big .bn{display:inline-block;text-align:right;font-variant-numeric:tabular-nums;transform-origin:50% 60%}
.big .g{background:linear-gradient(90deg,var(--ink) 0%,#8a6b2f 55%,var(--butter) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.s-big .mono{margin-top:34px;display:block;opacity:.6}

/* 7. 채널이 흐르는 구역(Moto) */
/* 구역 높이를 화면 높이와 같게 — 구역이 화면을 채웠을 때 문장이 정확히 화면 가운데(예전 1.2배라 10% 아래로 처졌음) */
.s-flow{position:relative;height:100vh;height:100svh;overflow:hidden}
.flow-cols{position:absolute;inset:-30% 0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:0 40px}
.flow-cols div{display:flex;flex-direction:column;gap:34px;font-size:clamp(20px,1.9vw,30px);font-weight:600;letter-spacing:-.03em;color:rgba(11,12,16,.32)}
.flow-cols div:nth-child(2),.flow-cols div:nth-child(4){filter:blur(3px);color:rgba(11,12,16,.22)}
.flow-cols div:nth-child(1),.flow-cols div:nth-child(5){filter:blur(1.2px)}
.flow-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:clamp(34px,4.4vw,72px);font-weight:700;letter-spacing:-.045em;line-height:1.12;z-index:2;width:90%}
.flow-c::before{content:"";position:absolute;inset:-14% -6%;background:radial-gradient(closest-side,var(--paper) 55%,rgba(233,232,228,0));z-index:-1}

/* 8. 파트너 */
.s-partner{padding:18vh 0}
.pt-grid{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
.pt-photo{position:relative;aspect-ratio:4/5;overflow:hidden;clip-path:inset(100% 0 0 0)}
.pt-photo img{width:100%;height:120%;object-fit:cover;position:absolute;top:-10%}
.pt h2{font-size:clamp(32px,3.4vw,56px);font-weight:700;letter-spacing:-.045em;line-height:1.14;margin:20px 0 60px}
.pt ol{list-style:none;border-top:1px solid var(--line)}
.pt li{display:grid;grid-template-columns:70px 1fr 1.3fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pt li b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.pt li p{font-size:15px;line-height:1.65;color:rgba(245,244,240,.7)}

/* 9. 비전 */
.s-vm{padding:20vh 0}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.vm p{font-size:clamp(26px,2.6vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1.3;margin-top:22px}


@media (max-width:860px){
  .hero-title{left:20px;bottom:110px}
  .hero-meta{left:20px;right:20px;grid-template-columns:1fr 1fr;row-gap:6px}
  .pt-grid,.vm{grid-template-columns:1fr}
  .vc-card{width:140px;margin:-92px 0 0 -70px}
  .vc-chat{width:760px;margin-left:-380px;gap:24px}
  .vc-col{gap:24px}
  .vc-col .kk{width:260px}
  .s-svc{padding-block:12vh}
  .s-how{padding-block:12vh}
  .hw-top{grid-template-columns:1fr;gap:12px}
  .hw-flow{grid-template-columns:1fr;gap:34px;padding-top:0;padding-left:34px}
  .hw-line{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .hw-line i{transform:scaleY(0);transform-origin:top}
  .hw-step::before{left:-34px;top:6px}
  .svc-h{grid-template-columns:1fr;gap:16px;margin-bottom:36px}
  .svc-body{grid-template-columns:1fr;gap:0}
  .svc-view{display:none}
  .rows{margin:0 -20px}
  .row{grid-template-columns:34px 1fr;gap:4px 12px;padding:20px;min-height:0}
  .row .nm{font-size:28px}
  .row .en{display:none}
  .row .ln{display:block;grid-column:2;opacity:.7;font-size:14px;line-height:1.5}
  .hist-in{padding-top:80px;gap:14px;padding-bottom:3vh}
  .hist-head{flex-direction:column;align-items:flex-start;gap:8px}
  .hist-t{margin-left:0;font-size:26px}
  .hist-cols{flex-direction:column;border-left:0;border-top:1px solid var(--line)}
  .hc{border-right:0;border-bottom:1px solid var(--line)}
  .hc .sp{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:0 6px}
  .s-hist.auto .hist-cols{height:max(470px,64vh)}
  .s-hist.auto .hc .sp .lb{writing-mode:horizontal-tb;margin:0;order:3}
  .s-hist.auto .hc .sp b{margin-top:0}
  .s-hist.flow .hflow{padding:0 11vw;gap:16px}
  .hfc{width:78vw;min-height:320px;padding:20px 20px 24px}
  .hfc .yb{font-size:72px}
  .hc .sp b{writing-mode:horizontal-tb;transform:none;align-self:center;font-size:20px;letter-spacing:-.02em;-webkit-text-stroke:0;color:rgba(245,244,240,.5)}
  .hc.past .sp b{color:var(--butter)}
  .hc .sp .lb{display:block;font-size:15px;color:rgba(245,244,240,.7)}
  .hc .bd{width:100%;padding:14px 6px 16px}
  .bd .yb{font-size:72px}
  .bd h3{font-size:22px;margin:12px 0 8px}
  .bd li{font-size:15px;line-height:1.7}
  .flow-cols{grid-template-columns:repeat(3,1fr)}
  .flow-cols div:nth-child(n+4){display:none}
  .pt li{grid-template-columns:44px 1fr}
  .pt li p{grid-column:2}
}