/* 스튜디오 — metic /studio 실측(이야기 · 고정 장면 · 원칙 4 · 등각 스택 · 연혁) */
:root{--ss-step:100vh;--ss-line:#12121459;--st-plate:#f4f4f2e6}

/* 이야기 — 사진 + 세 문단 */
.sy{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;padding-bottom:var(--sub-gap)}
.sy__img img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.sy__sig{margin-top:28px!important;color:var(--steel)!important}

/* 고정 장면 — 스크롤하는 동안 한 화면에 붙어 단계별로 선이 그려진다 */
.ss{position:relative;height:calc(var(--n) * var(--ss-step))}
.ss__pin{position:sticky;top:0;height:100vh;overflow:hidden;border-block:1px solid var(--line)}
.ss__svg{position:absolute;inset:var(--nav) 0 0;width:100%;height:calc(100% - var(--nav));fill:none;stroke:var(--ss-line);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ss__g{opacity:0;transition:opacity .5s var(--ease)}
.ss__g.on{opacity:1}
.ss__g>*{stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 1.8s var(--ease),opacity .6s var(--ease)}
.ss__g text{stroke:none;fill:var(--steel);font:12px var(--mono);opacity:0}
.ss__g .ss__big{fill:var(--ink);font:700 26px var(--kr);letter-spacing:-.04em}
.ss__g.on>*{stroke-dashoffset:0}
.ss__g.on text{opacity:1}
.ss__f{stroke:var(--line2)}
.ss__vp,.ss__dot{fill:var(--pt);stroke:none!important}
.ss__btn{stroke:var(--ink);stroke-width:1.6}
.ss__ray{stroke:var(--pt)}
.ss__g.now>*:not(text):not(.ss__vp):not(.ss__dot):not(.ss__f){stroke:var(--pt)}
.ss__lab{position:absolute;left:var(--shell);top:calc(var(--nav) + 20px);color:var(--steel)}
.ss__cnt{position:absolute;right:calc(var(--shell) + 20px);top:calc(var(--nav) + 20px);text-align:right;color:var(--steel)}
.ss__cnt b{display:block;font:500 clamp(2.5rem,4vw,3.5rem)/1 var(--en);letter-spacing:-.04em;color:#12121433}
.ss__caps{position:absolute;left:var(--shell);bottom:clamp(84px,12vh,120px);width:min(380px,calc(100% - var(--shell) * 2))}
.ss__caps li{position:absolute;left:0;bottom:0;padding:12px 16px 12px 0;background:var(--paper);opacity:0;translate:0 12px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.ss__caps li.on{opacity:1;translate:0 0}
.ss__caps .mono{color:var(--pt)}
.ss__caps b{display:block;margin-top:8px;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.04em}
.ss__caps p{margin-top:6px;font-size:15px;color:var(--ink2);line-height:var(--lh-b)}

/* 지키는 것 — 넷, 작은 선 그림 */
.rl{padding-top:var(--sub-gap)}
.rl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(32px,5vw,80px);margin-top:clamp(2.5rem,5vw,4rem)}
.rl__grid svg{width:80px;height:64px;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rl__grid svg .r{stroke:var(--pt);fill:none}
.rl__grid circle.r{fill:var(--pt);stroke:none}
.rl__grid h3{margin-top:18px;font-size:19px;letter-spacing:-.03em;line-height:var(--lh-h)}
.rl__grid p{margin-top:8px;font-size:15px;color:var(--ink2);line-height:var(--lh-b);max-width:28em}

/* 일하는 층 — 등각으로 누운 판 넷, 화면에 들어오면 벌어진다 */
.st{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;padding-top:var(--sub-gap)}
.st__t p{margin-top:18px;color:var(--ink2)}
.st__idx{display:grid;gap:4px;margin-top:26px;color:var(--steel)}
.st__stack{position:relative;height:var(--st-h,640px)}
.st__stack li{position:absolute;left:0;right:0;height:0;top:calc(40% + var(--k) * 5%);transition:top 1.1s var(--ease)}
.st__stack.open li{top:calc(17% + var(--k) * 22%)}
.st__plate{position:absolute;left:12%;top:calc(var(--st-w,300px) / -2);display:grid;place-items:center;width:var(--st-w,300px);aspect-ratio:1;border:1.2px solid var(--pt);background:var(--st-plate);transform:rotateX(60deg) rotateZ(-45deg)}
.st__plate b{font-size:clamp(14px,1.4vw,20px);color:var(--pt);letter-spacing:-.02em}
.st__lab{position:absolute;right:0;top:-1.6em;width:34%;font-size:12px;line-height:1.5}
.st__lab .mono{display:block;color:var(--steel);font-size:10.5px}
.st__lab b{display:block;font-size:14px}
.st__lab em{display:block;font-style:normal;color:var(--ink2)}

/* 지금까지 — 왼쪽 세로선 위 빨간 점 */
.rd{padding-top:var(--sub-gap)}
.rd__list{position:relative;margin-top:clamp(2.5rem,5vw,4rem);padding-left:32px;border-left:1px solid var(--pt)}
.rd__list li{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:0 0 clamp(28px,4vw,44px)}
.rd__list li::before{content:"";position:absolute;left:-37px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--pt)}
.rd__y{font:500 20px var(--en);letter-spacing:-.02em}
.rd__list b{font-size:17px;letter-spacing:-.02em}
.rd__list p{margin-top:4px;font-size:14.5px;color:var(--ink2)}
.rd__next{padding-bottom:0!important}
.rd__next::before{background:var(--paper)!important;border:1.5px solid var(--pt)}
.rd__next .rd__y{color:var(--pt)}

/* 하는 일 */
.dd{padding-top:var(--sub-gap)}
.dd>.mono{color:var(--steel);margin-bottom:16px}
.dd__chips{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px}
.dd__chips a{border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.dd__chips a:hover{color:var(--pt);border-color:var(--pt)}

@media (max-width:900px){
  .sy,.st{grid-template-columns:1fr}
  .rl__grid{grid-template-columns:1fr}
  .st__stack{--st-h:440px;--st-w:150px}
  .st__plate{left:36px}
  .st__lab{width:38%}
  .rd__list li{grid-template-columns:1fr;gap:4px}
  .ss__svg{inset:calc(var(--nav) + 40px) -40% 30%;width:180%;height:auto}
}
@media (prefers-reduced-motion:reduce){.ss__g>*{transition:none}}