/* LB26_L_V2 토대 (S00). 토큰 = 지시서 13 §3(세트 A · B) · §2(이징 2 · 시간 4). 세트 밖 값은 쓰지 않는다 */
@font-face{font-family:Montreal;src:url('fonts/PPNeueMontreal-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montreal;src:url('fonts/PPNeueMontreal-Semibold.woff2') format('woff2');font-weight:600 900;font-display:swap}
/* 한글 = Pretendard(주영 10/21, 10/20 Apple SD Gothic Neo에서 되돌림) */
@font-face{font-family:Pretendard;src:url('fonts/Pretendard-Regular.subset.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('fonts/Pretendard-Medium.subset.woff2') format('woff2');font-weight:500 900;font-display:swap}

/* 공통(세트 무관): 12칸 · 8px · 종이 · 먹 · 파랑 1색 · 서체 2종 · 다크 없음 */
:root{
 --paper:#f3f2ed;--ink:#20221f;--muted:#666963;--line:#c8cac1;--blue:#315aca;
 --role-ink:#20201e; /* S24: JY 상세 Role의 실제 먹색과 통일 */
 --line-soft:color-mix(in srgb,var(--line) 55%,var(--paper));  /* 선 색을 종이에 섞은 연한 선(새 색 아님) */
 --f:Montreal,Pretendard,sans-serif;--u:8px;
 /* 자간 4단계(Y4): 영문 큰 제목(40px 이상) · 한글 제목 · 본문 0 · 대문자 라벨. 예외 = 손글씨 .008em · 쿠키런 FIELD 제목 .01em(실측값) */
 --ls-en-d:-.02em;--ls-ko-d:-.03em;--ls-cap:.06em;
 --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.87,0,.13,1);
 --t-1:140ms;--t-2:300ms;--t-3:600ms;--t-4:950ms;
 /* Application 투영값 · S40 제작 과정 판의 거리/중간 기울기 */
 --route-tilt:46deg;--route-turn:-24deg;
 --route-stack-back:.58;--route-stack-mid:.62;--route-stack-near:.66;
 --route-stage-gap:8vh;--route-caption:clamp(20px,2.1vw,30px);--route-caption-ink:var(--ink);
 --route-process-back:.6;--route-process-mid:.8;
 --route-bg-brightness:.8;--route-bg-saturation:.45;--route-bg-blur:4px;--route-bg-bleed:12px;
 --route-back-scale:.84;--route-mid-scale:.9;--route-near-scale:.96;
 --route-back-paper:color-mix(in srgb,var(--paper) 78%,var(--ink));
 --route-mid-paper:color-mix(in srgb,var(--paper) 90%,var(--ink));
 --route-near-paper:color-mix(in srgb,var(--paper) 97%,var(--ink));
 --route-shadow:0 -12px 36px color-mix(in srgb,var(--ink) 18%,transparent);
 --plane-skew:-50;--plane-compression:.42;
 /* 세트 A (LB26 · 도면, 주영 10/20 선택) — 1920에서 margin 96 */
 --margin:clamp(24px,5vw,96px);--gutter:24px;--gap-l:224px;--gap-s:80px;
 --home-break:112px;--layer-gap:8px;--info-gap:48px;--row-thumb:192px;
 --r-media:0px;--r-tag:4px;--r-card:0px;
 --body:20px;--body-lh:1.6;--label:13px;--h2:56px;--thumb-ratio:16/9;
 --copy-start:1;--copy-span:7;
 /* 상세 역할표: --fr은 도판 기준 16/20/24. S26 제목·리드·챕터·본문·담당은 별도 역할 토큰, 캡션 최소 13px. */
 --fr:16px;--r-title:calc(var(--fr) * 2);--r-lead:24px;--r-ch:22px;--r-body:17px;--r-role:16px;--r-cap:clamp(13px,calc(var(--fr) * .7),16px);--r-lab:max(13px,calc(var(--fr) * .6));
 /* S26: 제목·본문·보조 정보의 역할별 위계. 문안·배색·구조 유지. */
 --hero-wordmark:clamp(48px,10.2vw,160px);--hero-statement:clamp(26px,2.4vw,40px);
 --hero-support:20px;--identity-size:17px;--reading-lh:1.65;--heading-lh:1.3;
 --list-title:clamp(24px,2.5vw,48px);--card-title:clamp(22px,1.6vw,30px);--card-copy:18px;
 --section-intro:20px;--support-size:15px;--subhead-size:24px;--hero-line-width:24em;--support-line-width:46em
}
@media(min-width:768px){:root{--fr:20px;--r-title:calc(var(--fr) * 3);--r-lead:30px;--r-ch:26px;--r-body:18px;--r-role:17px}}
@media(min-width:1200px){:root{--fr:24px;--r-lead:32px;--r-ch:28px;--r-body:20px;--r-role:18px}}
@media(max-width:700px){:root{--route-tilt:40deg;--route-turn:-12deg;--hero-support:17px;--identity-size:15px;--card-copy:17px;--section-intro:18px;--subhead-size:20px}}
/* 세트 B (Plus X 밀도) — 1920에서 margin 144 */
[data-set=B]{
 --margin:clamp(24px,7.5vw,144px);--gutter:16px;--gap-l:160px;--gap-s:64px;
 --r-media:8px;--r-tag:999px;--r-card:16px;
 --body:22px;--body-lh:1.64;--label:15px;--h2:72px;--thumb-ratio:4/5;
 --copy-start:4;--copy-span:5;
}
/* shortcut: 390 값은 세트 표에 없음 → 두 세트 같은 모바일 값. 주영이 정하면 세트별로 나눔 */
@media(max-width:700px){:root,[data-set=B]{--margin:20px;--gutter:16px;--gap-l:120px;--gap-s:56px;--body:18px;--body-lh:1.56;--h2:40px;--copy-start:1;--copy-span:12}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;background:var(--paper)}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:var(--body)/var(--body-lh) var(--f);-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
a,button,[tabindex]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img,video{display:block;max-width:100%;height:auto;border-radius:var(--r-media)}
h1,h2,h3,p,figure,ul,ol{margin:0}
h1,h2,h3{font-weight:400;line-height:1.15;letter-spacing:var(--ls-en-d);text-wrap:balance}h1{line-height:1.05}
p{text-wrap:pretty}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
::selection{background:var(--blue);color:var(--paper)}

/* 12칸 · 본문 폭(A 7/12 왼쪽 · B 5/12 가운데) · 라벨 · 태그 · 카드 */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.copy{grid-column:var(--copy-start)/span var(--copy-span)}
.label{font-size:var(--label);line-height:1.4;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--muted)}
[data-set=B] .label{letter-spacing:0;text-transform:none}
.tag{display:inline-block;border:1px solid var(--ink);border-radius:var(--r-tag);padding:3px 12px;font-size:var(--label);line-height:1.4}
.card{border:1px solid var(--line);border-radius:var(--r-card)}

.skip{position:fixed;left:16px;top:-100px;background:var(--paper);padding:12px;z-index:100}.skip:focus-visible{top:12px}
.site-header{margin:0 var(--margin);height:80px;display:flex;align-items:center;justify-content:space-between;font-size:18px}
.brand{font-weight:600;letter-spacing:var(--ls-en-d)}
.site-header nav{display:flex;gap:40px;align-items:center}
.site-header [aria-current=page]{text-decoration:underline;text-underline-offset:6px}
main{min-height:70dvh;margin:0 var(--margin)}
footer{margin:0 var(--margin);padding:26px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--muted)}
@media(max-width:700px){.site-header{height:72px;font-size:15px;white-space:nowrap}.site-header nav{gap:16px}.brand{font-size:14px}}

/* 히어로 (S00: 글만. D1 B+C 두 줄 · D6 직함). 제목 밑줄 = DRAW · 강조색 */
.hero{padding:calc(var(--gap-s) / 2) 0 var(--gap-l)}
.hero h1{font-size:clamp(64px,11vw,184px);letter-spacing:var(--ls-en-d);line-height:1.05}  /* -.062는 L · a가 붙어 보임(주영 10/20) */
.hero-rule{height:1px;margin:32px 0 40px}
.hero-rule.draw::before{background:var(--blue)}
.hero-lead{font-size:calc(var(--body) * 1.3);line-height:1.45;letter-spacing:var(--ls-ko-d)}
.hero-lead+.hero-lead{margin-top:16px}
.identity{margin-top:40px}

/* ── 3원칙 유틸 ───────────────────────────────────────── */
/* 그리다 DRAW: 구간 머리 선(::before). 스크롤 등장 애니메이션은 뺌(주영 10/20 "스크롤 내리고 나올 때 애매함") → 처음부터 그어진 상태.
   히어로 밑줄만 인트로(첫 방문) 때 왼 → 오로 그어짐 */
.draw{position:relative}
/* 선 = 3px 상자 안 1px 띠(clip-path). 그어지는 동안도 굵기 1px 그대로, 앞 끝 14px만 뾰족(주영 10/21 '두꺼워지지 말고 유지') */
.draw::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--ink);--line:polygon(0 33.3%,20% 33.3%,55% 33.3%,80% 33.3%,calc(100% - 14px) 33.3%,100% 33.3%,100% 66.7%,calc(100% - 14px) 66.7%,80% 66.7%,55% 66.7%,20% 66.7%,0 66.7%);--stroke:polygon(0 33.3%,20% 33.3%,55% 33.3%,80% 33.3%,calc(100% - 14px) 33.3%,100% 50%,100% 50%,calc(100% - 14px) 66.7%,80% 66.7%,55% 66.7%,20% 66.7%,0 66.7%);clip-path:var(--line)}
@keyframes draw-x{0%{width:0;clip-path:var(--stroke)}78%{width:100%;clip-path:var(--stroke)}100%{width:100%;clip-path:var(--line)}}  /* 획으로 그어진 뒤 1px로 정리 */

/* 쌓다 STACK: sticky + view() (Bramus Stacking Cards CSS only). 부모 = 이름 붙인 view-timeline, 자식 --i(0부터) · 부모 --n(≥2).
   부모가 화면 위로 빠져나가는 구간(exit-crossing)을 n등분해 앞 판부터 scale만(.9 ~ 1). view() 없으면 sticky 겹침만, 높이 ≤640은 static */
.stack{list-style:none;padding:0;display:grid;row-gap:var(--gap-s);view-timeline-name:--stack}
.stack>*{position:sticky;top:calc(var(--stack-top,96px) + var(--i,0) * 24px);transform-origin:top center}
@keyframes stack-shrink{to{transform:scale(calc(1 - .1 * (var(--n) - 1 - var(--i)) / (var(--n) - 1)))}}  /* 맨 앞 .9 → 마지막 판 1 */
@supports(animation-timeline:view()){
 .stack>*{animation:stack-shrink linear both;animation-timeline:--stack;animation-range:exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%)}
}
@media(max-height:640px){.stack>*{position:static;animation:none}}

/* 맞추다 ALIGN 1단(고르기): 형제가 물러남, JS 0. 2단(클릭 · 전환 = VT · FLIP)은 S01 · S03 */
.align>*{transition:opacity var(--t-2) var(--ease-out)}
.align:has(>:focus-within)>:not(:focus-within){opacity:.45}
@media(hover:hover){.align:has(>:hover)>:not(:hover){opacity:.45}}  /* 터치 = 탭 뒤 흐림이 남지 않게 */

/* Grid 토글: 실제 변수(--margin · --gutter)로 그린 12칸. 켤 때 위 → 아래 scaleY */

/* reduced-motion · JS 끔: 다 그어진 · 다 쌓인 최종 상태 */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .align>*{transition:none}
 .stack>*{animation:none}
}

/* ── S01 홈 골격 ─────────────────────────────────────── */
/* 히어로 + 인라인 인트로(D5): 판 4장이 아래(L01) → 위로 쌓임 → 제목 밑줄 → 스크롤 가이드. ≤2초, 입력 즉시 양보(site.js) */
.hero{min-height:calc(100svh - 80px);display:flex;flex-direction:column;padding-bottom:32px}
.hero-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
.hero-top h1{grid-column:1/-1}
.hero-foot{margin-top:auto;padding-top:var(--gap-s);display:flex;justify-content:space-between;align-items:baseline;font-size:var(--body)}
.hero-about:hover{text-decoration:underline;text-underline-offset:6px}
.identity{margin-top:40px}
/* 경력 3단(Y1): 위 1px 선 + 같은 폭 3칸. 연도 · 회사 = 라벨 크기, 둘째 줄 = 본문 보조색 */
.hero-xp{margin:var(--gap-s) 0 0;padding-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.hero-xp dt{font-size:var(--label);line-height:1.4;letter-spacing:var(--ls-cap);color:var(--ink)}
.hero-xp dd{margin:2px 0 0;font-size:max(15px,var(--label));line-height:1.5;color:var(--muted)}
@media(max-width:700px){.hero-xp{grid-template-columns:1fr;row-gap:12px}}
.scroll-guide{color:var(--blue)}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}}
[data-intro=play] .hero-rule.draw::before{animation:draw-x var(--t-3) var(--ease-io) both;animation-delay:calc(var(--t-3) + var(--t-2))}  /* 제목 쓰는 중 .9초에(W6-4) */
[data-intro=play] .hero-foot{animation:fade-up var(--t-3) var(--ease-out) both;animation-delay:var(--t-4)}  /* .95초에(W6-4) */
[data-intro=done] .hero-foot{animation:none}
[data-intro=done] .hero-rule.draw::before{animation:none}

/* 구간 = 12칸 머리(왼 6 라벨 · 오른 6 제목) + 아래 내용. 머리 위 선 = DRAW */
.sec{margin-top:var(--gap-l)}
.sec-head{padding-top:24px;margin-bottom:var(--gap-s)}
.sec-head .draw-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:16px}
.sec-head .label{grid-column:1/span 6}
.sec-head h2,.sec-lead{grid-column:7/span 6}
.sec-head h2{font-size:var(--h2)}
.sec-lead{color:var(--muted)}
.label[data-n]::before{content:"[" attr(data-n) "] "}
[data-set=B] .label[data-n]::before{content:attr(data-n) " "}

/* Featured Gallery 2열: 카드 테두리 → 내용(DRAW). 고르기 = 형제 후퇴(.align) + 번호 · ↗ 강조색 */
.fe-gallery{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gap-s)}
.fe-card{transition:border-color var(--t-2) var(--ease-out),opacity var(--t-2) var(--ease-out)}
.fe-a{display:block;padding:16px}
.fe-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-media);background:rgb(32 34 31 / .06)}
.fe-media img,.fe-media video,.mw-media img,.mw-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.fe-media video,.mw-media video{opacity:0;transition:opacity var(--t-2) var(--ease-out)}
.is-playing video{opacity:1}
.fe-media .fe-hv,.wk-media .fe-hv{opacity:0;transition:opacity var(--t-2) var(--ease-out)}  /* 영상 없는 카드(NOW): 호버 · 포커스 때 같은 자리에서 목업 이미지로 교차 */
:is(.fe-a,.wk-a):is(:hover,:focus-visible) .fe-hv{opacity:1}
@media(prefers-reduced-motion:reduce){.fe-media .fe-hv,.wk-media .fe-hv{transition:none}}
.fe-media.is-blank{display:grid;place-items:center;border:1px dashed var(--line);background:none}
.fe-blank{font-size:15px;color:var(--muted)}
.fe-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:baseline;column-gap:12px;margin-top:16px}
.fe-n,.fe-y{font-size:var(--label);color:var(--muted)}
.fe-t{font-size:clamp(22px,1.6vw,30px);letter-spacing:var(--ls-en-d);line-height:1.25}
.fe-tags{display:flex;gap:6px}
.fe-go{min-width:1em;text-align:right}
.fe-principle{margin-top:12px}
.fe-role{margin-top:4px;font-size:max(15px,var(--label));line-height:1.5;color:var(--muted)}
.fe-a.is-soon{color:var(--muted)}

/* Motion 5 + 이미지 3: 5열 썸네일. 맞추다 = 진입 1회 어긋난 자리(--dx · --dy) → 격자 */
.mw{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;row-gap:40px}
.mw figure{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--u);height:100%}
.mw figure:focus-visible{border-color:var(--ink)}
@media(hover:hover){.mw figure:hover{border-color:var(--ink)}}
.mw.is-still{align-items:end}
.mw.is-still figure{height:auto}
.mw.is-still .mw-media{aspect-ratio:auto}
.mw.is-still .mw-media img{position:static;height:auto}
.mw-media{position:relative;aspect-ratio:var(--thumb-ratio);overflow:hidden;border-radius:var(--r-media);background:rgb(32 34 31 / .06)}
.mw figcaption{display:flex;flex-direction:column;margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted)}
.mw-t{font-size:15px;color:var(--ink)}

/* About 링크 · Contact */
.sec .copy p+p{margin-top:16px}
.text-link{display:inline-block;margin-top:32px;text-decoration:underline;text-underline-offset:6px}
.contact-t{font-size:var(--h2)}
.contact-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:16px 40px;margin-bottom:var(--gap-s)}
.contact-list a:hover{text-decoration:underline;text-underline-offset:6px}

@media(max-width:900px){.fe-gallery{grid-template-columns:1fr}.mw{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .hero-top h1{grid-column:1/-1}
 .hero{min-height:calc(100svh - 72px)}
 .sec-head .label,.sec-head h2,.sec-lead{grid-column:1/-1}
 .mw{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fe-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}.fe-tags{grid-column:2/-1;grid-row:2}.fe-go{display:none}
}
@media(prefers-reduced-motion:reduce){.fe-media video,.mw-media video{display:none}}

/* ── S02 케이스 페이지 (about.html) ─────────────────── */
.cover{min-height:70svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 var(--gap-s)}
.cover h1{margin-top:24px;font-size:var(--h2)}
.cover-sub{margin-top:24px;color:var(--muted)}
/* 챕터 = 한 화면 이상(보드 §9 화면 수). 짧은 뷰포트는 내용 높이만 */
.ch{padding-top:var(--gap-l);min-height:100svh}
@media(max-height:640px),(max-width:700px){.ch{min-height:0}}
.todo{display:inline-block;border:1px dashed var(--muted);border-radius:var(--r-tag);padding:0 8px;font-size:var(--label);color:var(--muted)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.pair .card{padding:24px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.pair p{font-size:calc(var(--body) * 1.3);line-height:1.45;letter-spacing:var(--ls-ko-d)}
.locked{font-size:calc(var(--h2) * .75);line-height:1.2;letter-spacing:var(--ls-ko-d)}
.values{list-style:none;padding:0;margin-top:var(--gap-s);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
.values li{border-top:1px solid currentColor;padding-top:16px}
.values b{display:block;font-weight:400;font-size:calc(var(--body) * 1.6);line-height:1.25}
.values p{margin-top:8px;opacity:.7}
/* 세트 B: 챕터 03 · 05 검정 반전(지시서 13 §3). 바깥 여백까지 칠함 */
.gb{margin:0 0 var(--gap-s)}
.gb svg{display:block;width:100%;height:auto;max-height:520px}
.gb polygon{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.gb figcaption{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);margin-top:16px;text-align:center;color:var(--muted)}
.gb figcaption b{font-weight:400;color:var(--ink);margin-right:8px}
.layer{min-height:360px;padding:24px;background:var(--paper);display:flex;flex-direction:column;gap:16px}
.layer h3{font-size:calc(var(--h2) * .6)}
.layer p{margin-top:auto;font-size:calc(var(--body) * 1.3)}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.spec .card{padding:24px}
.aa{font-size:clamp(96px,12vw,220px);line-height:1;letter-spacing:var(--ls-en-d);margin:24px 0}
.credits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gutter);margin:0}
.credits dt{font-size:var(--label);color:var(--muted)}
.credits dd{margin:8px 0 0}
@media(max-width:700px){
 .pair,.values,.spec,.credits{grid-template-columns:1fr;row-gap:16px}
 .gb figcaption{font-size:15px}
 .layer{min-height:280px}
}

/* ── 책 읽기 흐름 (주영 10/20): 구간마다 제목 · 본문이 좌우로 번갈아 놓임 ──
   .is-r = 오른쪽(라벨 왼 4칸 · 제목 오른 8칸 오른끝 정렬 · 본문 오른 7칸) / .is-l = 왼쪽(제목 왼 8칸 · 라벨 오른 4칸 · 본문 왼 7칸)
   주영 10/20 최종: 홈 Featured · Image = 기본 머리 · Motion · About = .is-l · Contact = .is-r / About 페이지 챕터 = .is-l */
.is-r .sec-head .label{grid-column:1/span 4}
.is-r .sec-head :is(h2,.sec-lead){grid-column:5/-1;text-align:right}
.is-r{--copy-start:6}
.is-l .sec-head .label{grid-column:9/-1;grid-row:1;text-align:right}
.is-l .sec-head :is(h2,.sec-lead){grid-column:1/span 8;grid-row:1}
.is-l .sec-head .sec-lead{grid-row:2}
.is-l{--copy-start:1}
.is-r .contact-list{justify-content:flex-end}
.is-r .locked{text-align:right}
@media(max-width:700px){
 .is-r .sec-head .label,.is-l .sec-head .label{grid-column:1/-1;grid-row:1;text-align:inherit}
 .is-r .sec-head :is(h2,.sec-lead),.is-l .sec-head :is(h2,.sec-lead){grid-column:1/-1;grid-row:auto}
 .is-r{--copy-start:1}
}

/* ── S03 Motion 상세 ──────────────────────────────── */
.mw-a{display:block;height:100%}
.md-head{padding:var(--body) 0 var(--gap-s)}  /* 라벨 · 목록 링크가 빠져 헤더와 제목 사이 한 줄만(X3) */
.md-head h1{font-size:var(--h2)}
.md-sub{margin-top:16px;color:var(--muted)}
.md-head .md-role{margin-top:24px;max-width:40em;font-size:var(--r-role);line-height:1.45;color:var(--role-ink)}
.yt{position:relative;aspect-ratio:16/9;background:rgb(32 34 31 / .06);margin-bottom:var(--gap-s)}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;border-radius:var(--r-media)}
.md-ov h2{margin-top:16px;font-size:calc(var(--h2) * .6)}
#about-title,.contact-t,.md-ov h2,.abx h1{letter-spacing:var(--ls-ko-d)}  /* 한글이 주인 큰 제목(Y4) */
.md-ov .copy p{margin-top:24px}
.md-meta{grid-column:9/-1;margin:0;display:grid;row-gap:16px;align-content:start}
.md-meta dt{font-size:var(--label);color:var(--muted)}
.md-meta dd{margin:4px 0 0;font-size:15px;line-height:1.5}
.md-sec.ch{min-height:0}
.md-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--gap-s)}
.md-grid.is-one{grid-template-columns:1fr}
.md-grid figure img,.md-grid figure video{width:100%;height:auto;background:rgb(32 34 31 / .06)}
.md-grid figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.md-note{grid-column:1/-1;margin-top:16px}
.md-next{margin-top:var(--gap-l);padding:24px 0 var(--gap-s);border-top:1px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.md-next a{font-size:calc(var(--h2) * .6);letter-spacing:var(--ls-en-d)}
.md-next a:hover{text-decoration:underline;text-underline-offset:8px}
@media(max-width:700px){.md-meta{grid-column:1/-1;margin-top:var(--gap-s)}.md-grid{grid-template-columns:1fr}}

/* ── 인터랙션 2차 (2026-10-21, 주영: 텍스트 등장 · 호버 · "쌓다" · "쌓인 게 펼쳐진다") ──
   리서치: Codrops Hub · async-page-transitions(쌓다 = 페이지 전환) · MotionPathTransition(쌓인 더미 → 펼침). 코드는 옮기지 않고 기법만 */

/* 1. 구간 머리 등장(진입 1회, site.js .is-in): 선이 왼 → 오로 그어짐 → 제목이 마스크 안에서 올라옴 → 라벨 · 리드 */
html.js .sec-head.is-in::before{animation:draw-x var(--t-4) var(--ease-io) both}  /* 진입 1회, 굵게 → 얇게 */
.sec-head h2{transition:clip-path var(--t-3) var(--ease-out) var(--t-2),transform var(--t-3) var(--ease-out) var(--t-2)}
.sec-head :is(.label,.sec-lead){transition:opacity var(--t-2) var(--ease-out) var(--t-3)}
html.js .sec-head:not(.is-in)::before{width:0}
html.js .sec-head:not(.is-in) h2{clip-path:inset(100% 0 0 0);transform:translateY(.35em)}
html.js .sec-head:not(.is-in) :is(.label,.sec-lead){opacity:0}
/* 히어로 제목: 인트로(첫 방문) 때 같은 마스크로 올라옴 */
@keyframes rise{from{clip-path:inset(100% 0 0 0);transform:translateY(.35em)}}
[data-intro=play] .hero h1{animation:rise var(--t-3) var(--ease-out) both}
[data-intro=done] .hero h1{animation:none}

/* 2. Featured 호버 애니메이션 없음(주영 10/21). 호버 = 번호 파랑 · 형제 흐려짐 · 영상만 */
.fe-a{position:relative}
.fe-media{z-index:1}

/* 3. Image works = 7번째 칸부터 같은 크기 4:5 (쌓였다 펼쳐지는 움직임은 10/21 롤백) */
.mw.is-still{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.mw.is-still>li{grid-column:span 2}
.mw.is-still>li:first-child{grid-column:7/span 2}
.mw.is-still .mw-media{aspect-ratio:4/5}
@media(max-width:900px){.mw.is-still{grid-template-columns:repeat(3,minmax(0,1fr))}.mw.is-still>li,.mw.is-still>li:first-child{grid-column:auto}}

/* 4. 페이지 전환 → 아래 '페이지 전환 2' (site.js .lt)로 바꿈(2026-10-21) */

@media(prefers-reduced-motion:reduce){
 html.js .sec-head:not(.is-in)::before{width:100%}
 html.js .sec-head:not(.is-in) h2{clip-path:none;transform:none}
 html.js .sec-head:not(.is-in) :is(.label,.sec-lead){opacity:1}
 .fe-a::before,.fe-a::after{transition:none}
}

/* GSAP 있을 때(html.gs, site.js): 제목은 SplitText 줄 마스크 · 히어로 글자 · Image 더미는 MotionPath가 맡음 → CSS 대체 끔 */
html.gs .sec-head h2{transition:none}
html.gs .sec-head:not(.is-in) h2{clip-path:none;transform:none;visibility:hidden}
html.gs[data-intro=play] .hero h1{animation:none}

/* 페이지 전환 2 (2026-10-21): 판 3장 = 선 · 먹 · 고른 작업 이미지(없으면 종이). 평소엔 화면 아래(101%) */

.pg{will-change:auto}

/* ── 인터랙션 이식 묶음 (fx.js, 2026-10-21) ── */
/* ① 히어로 인트로(wonjyou): 줄은 GSAP가 하나씩 보이게 함. GSAP 없으면 2초 뒤(intro=done) 보임 */
[data-intro=play] .hero :is(h1,.hero-lead,.identity,.hero-xp){opacity:0}

/* EaseReverse Clip Menu: Index 버튼 → 먹 바탕 전체 목록이 가운데서 clip으로 열림. 항목 호버 = [ ] 괄호가 벌어짐 */
.site-header{position:relative;z-index:950}

/* ② Sticky Grid(About 07): 425vh 동안 sticky 한 화면. JS 없으면 일반 격자 */

/* ── About 케이스 2판(지시서 14, 2026-10-21): 표지 메타 · issue/goal 목록 · 키워드 · 진화 4칸 · 벤토 6칸 · 흐름 그림 · 원칙 3 · 역할 표 ── */
.cover h1{font-size:clamp(48px,6vw,112px);line-height:1.05}
.cover-meta{display:flex;flex-wrap:wrap;gap:16px 48px;margin:32px 0 0;font-size:15px}
.cover-meta dt{font-size:var(--label);color:var(--muted)}
.cover-meta dd{margin:4px 0 0}
.ch-body{font-size:calc(var(--body) * 1.2);line-height:1.6;margin-bottom:var(--gap-s)}
.ch-heading{font-size:calc(var(--h2) * .75);line-height:1.2;letter-spacing:var(--ls-ko-d);margin-bottom:var(--gap-s)}
.ig{margin:24px 0 0;padding-left:1.2em;display:grid;row-gap:12px;font-size:calc(var(--body) * 1.2)}
.pair .card{justify-content:flex-start}
.locked-sub{margin-top:24px;max-width:36em;opacity:.75}
.values li .label{display:block;margin-top:4px}
.principles{list-style:none;padding:0;margin:0;display:grid;column-gap:var(--gutter);row-gap:var(--gutter)}
.principles{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--gap-s)}.principles .card{padding:24px;display:grid;row-gap:12px;align-content:start}.principles b{font-weight:400;font-size:calc(var(--body) * 1.2);letter-spacing:var(--ls-ko-d)}.principles p{color:var(--muted);font-size:15px;line-height:1.6}
.flow{margin:var(--gap-s) 0 0}
.flow svg{display:block;width:100%;height:auto;max-height:300px}
.flow :is(rect,line,polygon,path){fill:var(--paper);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.flow .fl-a line{stroke:var(--line)}
.flow .fl-arrow{fill:none}
.flow figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);margin-top:12px;font-size:15px;color:var(--muted);text-align:center}
.flow figcaption b{font-weight:400;color:var(--ink);margin-right:6px}

@media(max-width:700px){.principles{grid-template-columns:1fr}.flow figcaption{font-size:13px}}

/* About 이미지 자리(더미, 10/21): 점선 판 · 캡션 · 원본 위치 */
.ph-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--gutter);margin:var(--gap-s) 0}
.ph-row.is-ba{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.ph-row:has(> :only-child){grid-template-columns:1fr;margin:0 0 12px}
.ph-row:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.ph{margin:0}
.ph-box{display:grid;place-items:center;border:1px dashed var(--muted);border-radius:var(--r-media);background:rgb(32 34 31 / .04)}
.ph-box span{font-size:var(--label);letter-spacing:var(--ls-cap);color:var(--muted)}
.ph figcaption{margin-top:8px;font-size:15px;line-height:1.5}
.ph small{display:block;margin-top:2px;font-size:12px;color:var(--muted);word-break:break-all}
@media(max-width:700px){.ph-row,.ph-row.is-ba{grid-template-columns:1fr}}

/* About 06 Design Language(10/21): 6칸 · 항목 = 라벨 · 무엇 · 왜(도면처럼 읽히게) */
.lang{list-style:none;padding:0;margin:0 0 var(--gap-s);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.lang .card{padding:24px;display:grid;row-gap:12px;align-content:start}
.lang b{font-weight:400;font-size:calc(var(--body) * 1.2);letter-spacing:var(--ls-ko-d)}
.lang p{font-size:15px;line-height:1.6;opacity:.75}
@media(max-width:900px){.lang{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.lang{grid-template-columns:1fr}}

/* About 실제 이미지(10/21): 점선 대신 1px 선 · 칸 안 contain(원본 비율 · 잘리지 않음) */
.ph.is-img .ph-box{border:1px solid var(--line);background:var(--paper);overflow:hidden}
.ph.is-img img{width:100%;height:100%;object-fit:contain;border-radius:0}

/* About 표지 이미지(2021 발표 7쪽) */

/* 04 Dom-Ino 블록(10/21, Y3): 2021 8쪽 사진 왼쪽 | 이유 3줄 · 범례 오른쪽. 옆 층 도식은 삭제(K5) */
.dom{margin-top:var(--gap-s);padding-top:24px;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.dom-t{grid-column:1/-1;font-size:calc(var(--h2) * .5);letter-spacing:var(--ls-ko-d);margin-bottom:24px}
.dom-row{grid-column:1/span 7}
.dom-row .ph-row{margin:0}
.dom-txt{grid-column:8/-1}
.dom-txt p+p{margin-top:12px}
.dom-lg{margin:24px 0 0;display:grid;row-gap:12px;align-content:start}
.dom-lg div{border-top:1px solid var(--line);padding-top:8px}
.dom-lg dt{font-size:var(--label);color:var(--muted)}
.dom-lg dd{margin:2px 0 0}
/* 04 재료 보드 2장(서체 · 색) */
/* 05 Brand Story 2장 묶음 = 모두 같은 틀(Y3): 글 위(1칸 · 2칸) + 같은 크기 그림 2칸 */
.sb-col{display:grid;row-gap:8px;align-content:start}
.sb-im .ph-row{margin:0}
@media(max-width:900px){.dom-row,.dom-txt{grid-column:1/-1}.dom-txt{margin-top:24px}}

/* 05 Concept 머리 = 주영 10/21 "강조할 것" — 두 문장을 머리 크기로 · 둘째 줄은 먹색 그대로 크기만 한 단계 아래 */
.ch-heading.is-key{display:grid;row-gap:.35em;max-width:20em}
.ch-heading.is-key span+span{font-size:calc(var(--body) * 1.6);line-height:1.35;letter-spacing:var(--ls-ko-d)}
/* 07 Application(10/21): 무대 = 제목 · 설명 → 16:9 영상 격자(4 · 2 · 1열) → Work · Home. html.as-on(데스크톱 · fx.js) = 한 화면 고정, 판 적층 → 격자 펼침 */
.as-stage{position:relative;display:grid;row-gap:40px}
.as-head .ch-heading{margin-bottom:16px}
.as-head .ch-body{max-width:40em;color:var(--muted)}
.as-l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);width:100%}
.as-i{position:relative;z-index:calc(var(--n) - var(--i))}
.as-i a{display:block}
.as-i a:focus-visible{outline:none}
.as-i a:focus-visible .as-p{outline:2px solid var(--blue);outline-offset:4px}
.as-p{display:block;position:relative;aspect-ratio:16/9;border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.as-p :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.as-p video{opacity:0;transition:opacity var(--t-2) var(--ease-out)}
.as-i.is-playing .as-p video{opacity:1}
.as-cta{display:flex;flex-wrap:wrap;gap:12px 32px}
.as-cta a{font-size:calc(var(--body) * 1.2);letter-spacing:var(--ls-ko-d);padding-bottom:4px;border-bottom:1px solid var(--ink)}
.as-cta a+a{border-bottom-color:var(--line);color:var(--muted)}
.as-cta a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.as-lab,.as-axis{display:none}
html.as-on .as{height:320vh}
html.as-on .as-stage{position:sticky;top:0;height:100dvh;align-content:center;row-gap:32px}
/* 적층 이름표: 판 오른쪽 끝(◆)에서 점선 → 번호 · 분야 · 연도. 줄 = 판 하나 */
html.as-on .as-lab{display:block;position:absolute;left:var(--s-x);right:0;top:calc(var(--s-top) - var(--s-step) / 2);list-style:none;margin:0;padding:0;pointer-events:none}
.as-lab li{height:var(--s-step);display:grid;grid-template-columns:minmax(0,3fr) 32px minmax(0,4fr);column-gap:var(--gutter);align-items:center}
.as-lab .as-n{font-size:var(--label);color:var(--muted);font-variant-numeric:tabular-nums}
.as-lab .as-k{font-size:15px;color:var(--ink)}
.as-ln{position:relative;height:0;border-top:1px dotted var(--ink)}
.as-ln::before{content:"";position:absolute;left:-3px;top:-4px;width:6px;height:6px;background:var(--ink);transform:rotate(45deg)}
html.as-on .as-axis{display:flex;position:absolute;left:0;width:40px;top:calc(var(--s-top) - 48px);height:calc(var(--s-bot) - var(--s-top) + 96px);flex-direction:column;justify-content:space-between;align-items:center;font-size:var(--label);color:var(--muted)}
.as-axis::before{content:"";position:absolute;top:24px;bottom:24px;left:50%;border-left:1px solid var(--line)}
@media(max-width:900px){.as-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.as-l{grid-template-columns:1fr}}

/* 숫자 열 = 고정폭 숫자(10/21 web-design-guidelines) */
.label,.fe-n,.fe-y,.as-n,.mw-i figcaption span:last-child{font-variant-numeric:tabular-nums}

/* About = SAEROK(BX Design Lab) 흐름(10/21): 머리 띠 · 표지 크레딧 · Pain → Needs · Essence · Core Value · 색 면적 */
.is-band .sec-head .draw-body{align-items:end}
.is-band .sec-head .label{grid-column:1/span 8;grid-row:1}
.is-band .sec-head h2{grid-column:1/span 8;grid-row:1}
.cover-credits{margin-top:var(--gap-s);padding-top:24px;border-top:1px solid var(--ink)}
.pn-h{display:grid;grid-template-columns:40px minmax(0,1fr) 48px minmax(0,1fr);column-gap:var(--gutter);margin:0 0 12px}
.pn-h .label:first-child{grid-column:2}.pn-h .label:last-child{grid-column:4}
.pn ol{list-style:none;padding:0;margin:0}
.pn li{display:grid;grid-template-columns:40px minmax(0,1fr) 48px minmax(0,1fr);column-gap:var(--gutter);align-items:baseline;padding:24px 0;border-top:1px solid var(--line)}
.pn li:last-child{border-bottom:1px solid var(--line)}
.pn p{font-size:calc(var(--body) * 1.2);line-height:1.45;letter-spacing:var(--ls-ko-d)}
.pn li p:first-of-type{color:var(--muted)}
.pn-n{font-size:var(--label);color:var(--muted);font-variant-numeric:tabular-nums}
.pn-ar{text-align:center}
@media(max-width:900px){.is-band .sec-head .label,.is-band .sec-head h2{grid-column:1/-1;grid-row:auto}}
@media(max-width:700px){.pn-h{display:none}.pn li{grid-template-columns:32px minmax(0,1fr)}.pn li p:last-child{grid-column:2}.pn-ar{grid-column:2;text-align:left}}
.dom+.ph-row{margin-top:var(--gap-s)}
@media(max-width:700px){.cover-credits{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 칸(Heron 캡처, 주영 10/21): 칸끼리 실선을 나눠 씀 · 칸 머리 = 왼 라벨 + 오른 [01] · 그 아래 점선. 홈 Motion · About Core Value · Interaction 원칙 */
.cells{list-style:none;padding:0;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);counter-reset:cell}
.cells>li{position:relative;counter-increment:cell;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:68px 24px 24px;border-radius:0}
.cells>li::before{content:"[" counter(cell,decimal-leading-zero) "]";position:absolute;top:16px;right:24px;font-size:var(--label);line-height:1.4;letter-spacing:var(--ls-cap);color:var(--muted);font-variant-numeric:tabular-nums}
.cells>li::after{content:"";position:absolute;left:0;right:0;top:48px;border-top:1px dashed var(--line);pointer-events:none}
.cells .cell-k{position:absolute;top:16px;left:24px;right:72px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw.cells>li{padding:68px 16px 16px}.mw.cells .cell-k{left:16px}.mw.cells>li::before{right:16px}
.mw.cells figure{border:0;border-radius:0;padding:0}
.principles.cells li{display:grid;row-gap:12px;align-content:start}
@media(max-width:700px){.mw.cells>li::before{display:none}.mw.cells .cell-k{top:6px;right:16px;white-space:normal;line-height:1.35;display:flex;align-items:center;height:36px;overflow:visible}}  /* 2열 칸이 좁아 번호 빼고 라벨 두 줄 */
/* Featured 칸 = 한 줄 선(주영 10/21 Heron처럼): 카드 간격 0, 카드끼리 1px 선을 나눠 씀. 카드 위 그리기 선(.draw::before)은 겹쳐서 숨김 */
.fe-gallery{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.fe-gallery>.fe-card{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.fe-gallery>.fe-card.draw::before{display:none}
/* Motion 칸 = Featured 카드 문법(주영 10/21): 칸 머리(라벨 · [01] · 점선) 없음, 번호 · 제목 한 줄 */
.mw.cells>li{padding:16px}
.mw.cells>li::before,.mw.cells>li::after{content:none}
.mw.cells figcaption{margin-top:16px}
.mw.cells>li:focus-within .fe-n{color:var(--blue)}
@media(hover:hover){.mw.cells>li:hover .fe-n{color:var(--blue)}}
/* 도면 칸 선 이어짐(주영 10/21 Featured에서 확정 → 전체): 칸 묶음(Featured · Motion · Core Value · 원칙)의 세로선이 위아래로 gap-s만큼, 위 · 아래 가로선이 좌우 여백까지 이어지고 끝은 흐려짐. --c = 열 수 */
.fe-gallery{--c:2}.mw.cells{--c:5}.principles.cells{--c:3}
@media(max-width:900px){.fe-gallery{--c:1}.mw.cells{--c:3}}
@media(max-width:700px){.mw.cells{--c:2}.principles.cells{--c:1}}
:is(.fe-gallery,.cells,.ph-row){position:relative}
:is(.fe-gallery,.cells,.ph-row)::before,:is(.fe-gallery,.cells,.ph-row)::after{content:"";position:absolute;pointer-events:none}
:is(.fe-gallery,.cells,.ph-row)::before{top:calc(var(--gap-s) * -1);bottom:calc(var(--gap-s) * -1);left:-1px;right:0;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / var(--c))),linear-gradient(var(--line),var(--line)) 100% 0/1px 100% no-repeat;-webkit-mask:linear-gradient(transparent,#000 var(--gap-s),#000 calc(100% - var(--gap-s)),transparent);mask:linear-gradient(transparent,#000 var(--gap-s),#000 calc(100% - var(--gap-s)),transparent)}
:is(.fe-gallery,.cells,.ph-row)::after{top:-1px;bottom:0;left:calc(var(--margin) * -1);right:calc(var(--margin) * -1);background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent)}
/* Image works · About 이미지 줄도 칸(주영 10/21): Image works = 7 ~ 12칸에 3칸 같은 폭 · About .ph-row = 사진 수만큼 칸, 간격 0 · 칸 선 나눠 씀 */
.mw.is-still.cells{--c:3;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));margin-left:calc(50% + var(--gutter) / 2)}
.mw.is-still.cells>li,.mw.is-still.cells>li:first-child{grid-column:auto}
@media(max-width:900px){.mw.is-still.cells{margin-left:0}}
.ph-row{--c:3;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ph-row.is-ba,.ph-row:has(> :nth-child(2):last-child){--c:2}.ph-row:has(> :only-child){--c:1}
@media(max-width:700px){.ph-row{--c:1}}
.ph-row>.ph{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){html.js .sec-head.is-in::before{animation:none}}
html.js section:nth-of-type(3n+2) .sec-head.is-in::before{animation-duration:var(--t-3)}  /* 구간마다 획 속도 · 모양 변주 */
/* 스케치처럼 선이 다 이어짐(주영 10/21, 홈 · About): ① 구간 머리 선이 좌우 여백 끝까지 연하게 이어짐 ② 구간 맨 끝 칸 묶음의 세로선은 다음 구간 머리 선까지 내려감.
   구간 사이 간격을 위 margin → 아래 padding으로 옮기고 구간마다 overflow-y:clip(세로선은 구간 바닥 = 다음 머리 선에서 잘림, 가로는 안 잘림) */
.sec+.sec{margin-top:0}.sec:has(+ .sec){padding-bottom:var(--gap-l)}
.ch{padding-top:0;padding-bottom:var(--gap-l)}.cover+.ch{margin-top:var(--gap-l)}
:is(.sec,.ch){overflow-y:clip}
:is(.sec,.ch)>:is(.fe-gallery,.cells,.ph-row):last-child::before{bottom:-100vh;-webkit-mask:linear-gradient(transparent,#000 var(--gap-s));mask:linear-gradient(transparent,#000 var(--gap-s))}
/* 제목 글씨 쓰기(fx.js, V1 S6-M 이식): 쓰는 동안 실제 글자는 숨기고 SVG 글자 외곽선 → 채움. ic-m = 기준선 표시(0px) */
.hero h1{position:relative}.hero h1 .ic-m{display:inline-block;width:0;height:0}
.hero h1.is-writing .ic{opacity:0}
.hw{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.hw text{fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-width:1.2px;stroke-linejoin:round}
/* 인트로 작도선 · 진행(fx.js): 회색 1px, 가로선은 화면 끝까지 넘침 · 세로선은 글자 위아래로 넘침. 진행 숫자는 파랑 밑줄 오른 끝 위 */
.hero-top{position:relative}
.hg{position:absolute;inset:0;pointer-events:none}
.hg-h{position:absolute;left:calc(var(--margin) * -1);right:calc(var(--margin) * -1);height:1px;background:var(--muted);opacity:.45;transform-origin:left}
.hg-v{position:absolute;width:1px;background:var(--muted);opacity:.45;transform-origin:top}
/* 도미노 은유(주영 10/21 '전체 라인이 실제 같고, 도미노 시스템을 그렸다는 은유'): 페이지 = Dom-Ino 단면
   · 구간 머리 선 = 바닥판(slab): 먹 선 + 5px 아래 연한 선(판 두께), 아래 선은 좌우 여백 끝까지 넘침
   · 칸 세로선 = 기둥(column): 다음 바닥판까지 내려가 판 두께를 8px 뚫고 넘침(overflow-clip-margin)
   · 모든 작도선에 연필 떨림(#pencil). 칸 테두리(실제 박스)는 또렷이 두고 겹친 작도선만 떨려 연필 두 번 그은 느낌 */
.pencil-defs{position:absolute;width:0;height:0}
:is(.sec,.ch){overflow-clip-margin:8px}
:is(.cells,.ph-row)::before,:is(.cells,.ph-row)::after{filter:url(#pencil)}  /* Featured 칸 선은 일직선(주영 10/21) */
/* 움직임 없음(주영 10/21 홈 · About → 전체, '인트로 · 호버 · 페이지 전환 · Index만 남기고 끄기'): 구간 머리 선 · 제목 · 라벨은 처음부터 그대로(site.js STILL), 카드 형제 흐려짐 없음. 인트로 · 호버 영상 · 페이지 전환 · Index 메뉴는 그대로 */
html.js :is(.sec-head,.sec-head.is-in)::before{animation:none;width:100%}
html.js .sec-head :is(h2,.label,.sec-lead){transition:none;clip-path:none;transform:none;opacity:1;visibility:visible}
:is([data-page=home],[data-page=about],[data-page=blueprint]) .align:is(:has(>:hover),:has(>:focus-within))>*{opacity:1}
/* 선 위계(주영 10/21 '단락이 다른 부분은 두껍게, 나머지는 그림에 방해 안 되게 연하게'): 구간 경계(바닥판 먹 선) 2px · 칸 · 이미지 줄 선은 --line-soft */
:is([data-page=home],[data-page=about],[data-page=blueprint]) :is(.sec,.ch)>.sec-head.draw::before{clip-path:none;height:2px;top:-1px}
:is(.fe-gallery,.cells,.ph-row){--line:var(--line-soft)}

/* ── 28 통합 D1 ~ D5 (2026-10-21) ──
   Work 페이지: 3열(1920 · 1366) · 700 이하 2열 · 480 이하 1열. 카드 높이 = 미디어 자연 비율(엇갈리게 안 함). 필터 활성 = 먹색 + 밑줄(파랑 금지) */
.wk-bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px 24px;flex-wrap:wrap;margin-bottom:24px}
.wk-f{display:flex;gap:8px;flex-wrap:wrap}
.wk-chip{padding:4px 14px;border:1px solid var(--line);border-radius:var(--r-tag);font-size:15px;line-height:1.5;color:var(--muted);transition:color var(--t-2) var(--ease-out),border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-out)}
.wk-chip span{margin-left:6px;font-variant-numeric:tabular-nums}
.wk-chip[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
@media(hover:hover){.wk-chip:hover{color:var(--ink);border-color:var(--ink)}}
.wk-chip[aria-pressed=true]{text-decoration:underline;text-underline-offset:6px}
.wk-n{font-size:15px;color:var(--muted)}.wk-n b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.wk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)}
.wk-i{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.wk-a{display:block;height:100%;padding:16px}
.wk-i.is-brk{grid-column-start:1}
.wk-media{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/9);background:rgb(32 34 31 / .06)}
.wk-media img,.wk-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.wk-media video{opacity:0;transition:opacity var(--t-2) var(--ease-out)}
.wk-a.is-playing video{opacity:1}
.wk-row{display:flex;gap:8px;align-items:baseline;margin-top:16px}
.wk-t{font-size:clamp(18px,1.3vw,24px);font-weight:400;letter-spacing:var(--ls-en-d);line-height:1.25}
.wk-role,.wk-pr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.wk-pr{color:var(--ink)}
.wk-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:12px;font-size:var(--label);line-height:1.4;color:var(--muted)}
.wk-i:focus-within .fe-n{color:var(--blue)}
@media(hover:hover){.wk-i:hover .fe-n{color:var(--blue)}}  /* 강조색 5곳 중 '활성 번호'와 같은 자리 */
@media(max-width:700px){.wk{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-a{padding:12px}.wk-i.is-brk{grid-column-start:auto}}
@media(max-width:480px){.wk{grid-template-columns:1fr}}
/* 홈 Featured 아래 전체 작업 링크 · Index 메뉴 구분선(작품 목록 ↔ About · Contact) */
.fe-all{margin-top:var(--gap-s)}
.wk-sec{margin-top:var(--gap-s)}

/* 손글씨 장식(KIN 블루프린트 웹에셋, assets/marks · fonts/kin-notes.woff2 · 주영 10/22 "직접 그린 블루프린트처럼 빈 여백에"). 마스크 = 색은 파랑 1색(주석 층). 글은 기존 카피의 말만 · 전부 aria-hidden */
@font-face{font-family:'KIN Hand';src:url('fonts/kin-notes.woff2') format('woff2');font-weight:400;font-display:swap}
.deco{position:absolute;display:block;width:var(--w);aspect-ratio:var(--r);background:var(--blue);opacity:.9;pointer-events:none;-webkit-mask:var(--u) center/100% 100% no-repeat;mask:var(--u) center/100% 100% no-repeat}
.deco--l-layer{--w:120px;--r:250/112;--u:url(assets/marks/label-layer.svg)}
.hero,.hero-foot,.cover,.ch{position:relative}
/* 히어로 빈 곳 = 조건 → 규칙 → 제작 → 검토(기존 글의 작업 순서) + 손메모 */
.bp-flow{position:absolute;right:0;bottom:104px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none}
.bp-flow .deco{position:static;flex:none}
/* 구간 머리 · 표지 장식 = 의사요소(HTML 0, Featured 파일 안 건드림). 제목 오른쪽 빈 곳 */
:is(#ch01,#ch06)>.sec-head::after{content:"";position:absolute;width:var(--w);aspect-ratio:var(--r);background:var(--blue);opacity:.9;pointer-events:none;-webkit-mask:var(--u) center/100% 100% no-repeat;mask:var(--u) center/100% 100% no-repeat;left:36%;top:36px}
/* Motion 화살표(Y1): 제목 'works'의 s 바로 오른쪽. h2를 글자 폭에 맞추고 그 ::after로 붙임. 세로 가운데 정렬(주영 10/22) */
#motion-title{position:relative;width:fit-content}
#motion-title::after{content:"";position:absolute;left:calc(100% + 8px);top:50%;translate:0 -50%;width:64px;aspect-ratio:220/150;background:var(--blue);opacity:.9;pointer-events:none;-webkit-mask:url(assets/marks/arrow-curve.svg) center/100% 100% no-repeat;mask:url(assets/marks/arrow-curve.svg) center/100% 100% no-repeat}
.ct-w{position:relative;display:inline-block}  /* 페이지의 별표 하나(X2-2): 채용 왼쪽 위(주영 10/22) */
.ct-w::after{content:"";position:absolute;right:calc(100% + .08em);top:-.28em;width:.5em;aspect-ratio:1;background:var(--blue);opacity:.9;pointer-events:none;-webkit-mask:url(assets/marks/asterisk.svg) center/100% 100% no-repeat;mask:url(assets/marks/asterisk.svg) center/100% 100% no-repeat}
@media(max-width:900px){.ct-w::after{right:auto;left:0;top:-.62em}}  /* Contact 왼쪽 시작(1026 지시서) = 좁은 화면 여백 밖으로 안 나가게 채용 위로 */
:is(#ch01,#ch06)>.sec-head::after{--w:44px;--r:1;--u:url(assets/marks/asterisk.svg)}
#ch06>.sec-head::after{left:-40px;top:6px}  /* 별표 = Interaction의 I 좌상단(주영 10/22) */
/* Issue / Definition / Concept 머리의 화살표 · 치수선 삭제(주영 10/22) */
.sec-head>.deco{left:calc(36% + 240px);top:18px;rotate:-3deg}
@media(max-width:900px){.deco,.sec-head::after,#motion-title::after,.bp-flow{display:none}}

/* ══ 10/22 업무지시서 W1 ~ W6 ══ */
:root{--blue-on-dark:#6f8fe8;--hs:clamp(18px,1.4vw,24px);--hm:clamp(28px,2.2vw,40px)}  /* 어두운 바탕 대비 6.2:1 */

/* ── W5 손글씨 = 도면 위 설계자의 메모(KIN Hand). A 안내 · B 담당 표시 · C 판단 메모 · D 서명 ──
   크기 M(홈 히어로 1곳) · S(나머지) · 서명 S × 1.3 / 파랑(어두운 상세는 --blue-on-dark) / 회전 −2° ~ −5° / 한 화면 개수 제한 없음(주영 10/22 밤 해금) · 한 페이지 6개 / 한글 14자 이내
   선(화살표 · 동그라미 · X)은 stroke 그리기 1회 .6s(site.js가 화면에 들어올 때 .is-in), 동작 줄이기 = 처음부터 다 그려짐 / 전부 aria-hidden / 항상 보임(Notes 토글 삭제, X5) */
.hand{display:inline-flex;align-items:center;gap:8px;font-family:'KIN Hand',var(--f);font-weight:400;font-synthesis:none;font-size:var(--hs);line-height:1.25;letter-spacing:.008em;white-space:nowrap;word-break:keep-all;color:var(--blue);rotate:var(--rot,-3deg);pointer-events:none;user-select:none}
.hand--m{font-size:var(--hm)}
/* Blueprint 도면 여백 메모(Y3 K4): 크기 XS = S × .75, 14자 이내 고민형, 장면마다 1 ~ 2개 · 한 페이지 10개 이하(Blueprint만 예외). 900px 아래 숨김(C 역할) */
.hand--xs{font-size:calc(var(--hs) * .75)}
.pn{position:relative}
.dom-hn{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:14px}
.hand--sign{font-size:calc(var(--hs) * 1.3)}
.h-svg{flex:none;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-svg path{stroke-dasharray:1.02;stroke-dashoffset:0;transition:stroke-dashoffset var(--t-3) var(--ease-io)}
.h-arrow,.h-larr{width:2.2em;height:.8em}
.h-darr{width:1.3em;height:1.1em}
.h-under{width:4em;height:.4em}
.h-ring{position:relative;display:inline-block}
.h-ring>.h-svg{position:absolute;left:-14px;top:-10px;width:calc(100% + 28px);height:calc(100% + 20px);stroke:var(--blue);stroke-width:2;rotate:-2deg;pointer-events:none}
.h-xm{position:absolute;left:50%;top:50%;width:min(46%,260px);aspect-ratio:1;translate:-50% -50%;display:block;rotate:-3deg;pointer-events:none}
.h-xm .h-svg{width:100%;height:100%;stroke-width:.8}
/* 모바일 ≤900px: 지금처럼 숨기되 B · D만 표시 */
@media(max-width:900px){.hand:not([data-role=B]):not([data-role=D]){display:none}.hand .h-svg{height:.8em}}
/* 어두운 상세 */
.fe-dark .hand{color:var(--ink)}  /* 어두운 상세 손글씨 = 흰색(주영 10/22) */
.fe-dark .h-ring>.h-svg{stroke:var(--ink)}
/* 자리별 */
.hero-foot .hf-l{display:flex;align-items:center;gap:20px}
.bp-flow.hand{position:absolute;right:0;bottom:104px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;rotate:-2deg}
[data-intro=play] .hero .bp-flow{opacity:0}
#motion,#lab{position:relative;padding-bottom:calc(var(--hs) * 3.2)}
.h-mot,.h-lab{position:absolute;right:0;bottom:0}  /* 카드 줄 끝 아래 빈 곳, 화살표는 왼쪽 위(카드)를 가리킴 */
.h-ularr{width:1.3em;height:1.1em}
.mw-i{position:relative}
:is([data-page=home]) .sec>.sec-head.draw::before{display:none}  /* 홈 구간 머리 위 2px 먹 선 삭제(Y1 K1). 히어로 파란 선 · 칸 선은 그대로 */
.fe-k{position:absolute;left:8px;top:8px;padding:2px 8px;font-size:12px;line-height:1.5;color:var(--ink);background:var(--paper);border-radius:var(--r-media)}
.wk-i{position:relative}
.wk-i>.h-fc{position:absolute;right:16px;bottom:14px}
.sec-head>.h-md{position:absolute;left:calc(50% + 24px);top:44px}
.text-links{display:grid;gap:8px;justify-items:start;margin-top:32px}
.text-links .text-link{margin-top:0}
.sb-im{position:relative}
.sb-im .h-oct{position:absolute;right:12px;bottom:56px;background:var(--paper);padding:0 6px}
.resume[hidden]{display:none}

/* ── Y2 About = 이력서 한 장. 1101px 이상 3칸(왼 = 이름 · 소개 · Contact / 가운데 = 경력 · 학력 / 오른 = 수상 · 선정), 1920 · 1280에서 스크롤 없이 한 화면(K3). 1100px 이하 · 390은 세로 한 칸씩 ── */
.abx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);column-gap:var(--gutter);border-top:2px solid var(--ink)}
.abx-c,.ab-c{position:relative;display:flex;flex-direction:column;padding:16px 0 4px}
.abx-c>.label,.ab-c>.label,.ab-sub>.label{display:block}
.abx h1{margin-top:8px;font-size:clamp(40px,4.2vw,var(--h2));line-height:1.05}
.ab-role{margin-top:12px;font-size:calc(var(--body) * 1.2);letter-spacing:var(--ls-ko-d);line-height:1.3}
.abx .cover-sub{margin-top:16px;font-size:max(16px,calc(var(--body) * .85));line-height:1.55}
.ab-link{margin-top:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ab-link .text-link{margin-top:0}
.abx-ct{margin-top:auto;padding-top:24px}
.abx-ct .contact-list{margin:8px 0 0;gap:6px 20px;font-size:17px}
.ab-sub>h2,.ab-c>h2{margin-top:4px;font-size:calc(var(--body) * 1.2);font-weight:400;letter-spacing:var(--ls-ko-d);line-height:1.25}
.ab-sub+.ab-sub{margin-top:16px}
.ab-rows{margin:8px 0 0}
.ab-rows>div{display:grid;grid-template-columns:1fr;row-gap:2px;padding:8px 0;position:relative}
.ab-rows dt{color:var(--muted);font-size:var(--label);font-variant-numeric:tabular-nums}
.ab-rows dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
.ab-rows b{font-weight:400;font-size:calc(var(--body) * .95)}
.ab-rows small{flex-basis:100%;font-size:15px;color:var(--muted)}
.ab-note{margin-top:12px;color:var(--muted);font-size:var(--label);line-height:1.5}
.ab-aw{list-style:none;margin:8px 0 0;padding:0}
.ab-aw>li{padding:8px 0;position:relative}
.aw-1{font-size:16px;line-height:1.4}
.aw-1 b{font-weight:400}
.aw-1 .ab-y{color:var(--muted);font-variant-numeric:tabular-nums}
.aw-1 small{font-size:var(--label);color:var(--muted)}
.aw-1 a:hover{text-decoration:underline;text-underline-offset:4px}
.aw-2{margin-top:2px;font-size:15px;line-height:1.45;color:var(--muted)}
.aw-2 i{font-style:normal}
.award-link{border-bottom:1px dotted var(--line)}
.award-link sup{margin-left:2px;font-size:.7em;line-height:0}
.award-link:hover{border-bottom-color:var(--ink);color:var(--ink)}
@media(min-width:1101px){.abx-c+.abx-c,.abx-c+.ab-c{border-left:1px solid var(--line-soft);padding-left:var(--gutter);margin-left:calc(var(--gutter) / -2)}
 /* 경력 · 학력 칸과 수상 칸을 같은 높이까지 펴서 바닥 여백을 씀(주영 10/22 '너무 뭉쳐보임') */
 .ab-rows>div,.ab-aw>li{padding-block:22px}
 .ab-sub+.ab-sub{margin-top:56px}
 .ab-note{margin-top:22px}}
@media(max-width:1100px){.abx{grid-template-columns:1fr;padding-top:16px}.abx-me{display:contents}.abx>.abx-c:not(.abx-me){order:1}.abx>.ab-c{order:2}.abx-ct{order:3;padding:var(--gap-s) 0}.abx-c,.ab-c{padding-bottom:var(--gap-s)}}
@media(max-width:700px){
 .site-header{height:auto;min-height:72px;padding:14px 0;flex-wrap:wrap;gap:8px 12px}
 .site-header nav{flex-wrap:wrap;gap:6px 14px}
}
.yt video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0e0e0d;border-radius:var(--r-media)}

/* S32: View Transitions 미지원 브라우저는 짧은 페이드 후 정상 이동. */
html.fd-out .pg{opacity:0;transition:opacity var(--t-2) var(--ease-out)}
/* S37: 현재 페이지 + 화면 크기의 독립 판3장 + 다음 페이지. 도착은 고정된 자리에서 clip reveal. */
@view-transition{navigation:auto}
html:not(.fe-zooming)::view-transition{background:var(--paper)}
html:not(.fe-zooming)::view-transition-group(root){animation-duration:var(--t-4)}
html:not(.fe-zooming)::view-transition-image-pair(root){isolation:isolate}
html:not(.fe-zooming)::view-transition-old(root){animation:page-recede var(--t-4) var(--ease-io) both;mix-blend-mode:normal;transform-origin:50% 0}
html.route-arriving::view-transition-new(root){display:none}
/* S47: history/목록 복귀는 원래의 짧은 페이드만. */
html.route-quick{--t-4:var(--t-3)}  /* 같은 세션 두 번째 작업 전환부터: 연달아 볼 때 기다림 줄임 */
html.route-fade::view-transition-group(root){animation-duration:var(--t-2)}
html.route-fade::view-transition-old(root){animation:route-fade-out var(--t-2) linear both;transform:none}
html.route-fade::view-transition-new(root){animation:route-fade-in var(--t-2) linear both;mix-blend-mode:normal}
/* S71·S72: About · Blueprint 도착 = 이전 페이지는 판 전환과 같은 page-recede로 뒤로 물러나고, 새 페이지가 아래부터 clip으로 덮음(Codrops async page transitions 모양). */
/* S73: 데모처럼 먹색 바탕 위에서 물러나야 깊이가 보임(종이 바탕이면 줄어든 페이지가 묻힘). */
html.route-rise::view-transition{background:var(--ink)}
html.route-rise::view-transition-old(root){animation:route-sink var(--t-4) var(--ease-io) both;transform-origin:50% 50%}
html.route-rise::view-transition-new(root){animation:route-rise var(--t-4) var(--ease-io) both;mix-blend-mode:normal}
@keyframes route-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes route-sink{to{transform:translateY(-30vh) scale(.8);opacity:.4}}
@keyframes route-fade-out{to{opacity:0}}
@keyframes route-fade-in{from{opacity:0}to{opacity:1}}
@keyframes page-recede{to{transform:translateY(-30vh) scale(.8);opacity:.6}}
/* S51: 배경 썸네일만 톤/채도/초점을 낮춤. 앞쪽 판/실제 카드에는 영향 없음. */
.route-backdrop{position:fixed;inset:calc(var(--route-bg-bleed) * -1);z-index:0;background:var(--paper) var(--route-bg,none) center/cover no-repeat;filter:brightness(var(--route-bg-brightness)) saturate(var(--route-bg-saturation)) blur(var(--route-bg-blur));pointer-events:none;view-transition-name:route-backdrop}
::view-transition-group(route-backdrop){z-index:-1;animation:none}
::view-transition-new(route-backdrop){animation:none;mix-blend-mode:normal}
.route-plane,.route-front{position:fixed;inset:0;pointer-events:none}
.route-plane{z-index:1}
.route-plane img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:80px 40px 24px}
.route-plane--1{filter:brightness(var(--route-process-back))}
.route-plane--2{filter:brightness(var(--route-process-mid))}
.route-plane-name{position:absolute;top:24px;left:40px;right:40px;font-size:var(--route-caption);line-height:1.3;color:var(--route-caption-ink)}
.route-plane--1{view-transition-name:route-layer-1;background:var(--route-back-paper)}
.route-plane--2{view-transition-name:route-layer-2;background:var(--route-mid-paper)}
.route-plane--3{view-transition-name:route-layer-3;background:var(--route-near-paper)}
.route-front{z-index:2;overflow:clip;view-transition-name:route-front}
.route-front>.pg{transform:translateY(var(--route-shift))}
::view-transition-group(route-layer-1),::view-transition-group(route-layer-2),::view-transition-group(route-layer-3),::view-transition-group(route-front){animation:none}
::view-transition-group(root){z-index:0}
::view-transition-group(route-layer-1){z-index:1}
::view-transition-group(route-layer-2){z-index:2}
::view-transition-group(route-layer-3){z-index:3}
::view-transition-group(route-front){z-index:4}
::view-transition-new(route-layer-1),::view-transition-new(route-layer-2),::view-transition-new(route-layer-3),::view-transition-new(route-front){mix-blend-mode:normal;transform-origin:50% 50%;box-shadow:var(--route-shadow)}
::view-transition-new(route-layer-1){animation:route-back var(--t-4) var(--ease-io) both}
::view-transition-new(route-layer-2){animation:route-mid var(--t-4) var(--ease-io) both}
::view-transition-new(route-layer-3){animation:route-near var(--t-4) var(--ease-io) both}
::view-transition-new(route-front){animation:route-reveal var(--t-4) var(--ease-io) both}
@keyframes route-back{
 from{transform:translateY(100vh) scale(var(--route-back-scale)) rotateX(0deg) rotateZ(0deg)}
 50%{transform:translateY(calc(var(--route-stage-gap) * -1)) scale(var(--route-stack-back)) rotateX(var(--route-tilt)) rotateZ(var(--route-turn))}
 to{transform:translateY(-12vh) scale(var(--route-back-scale)) rotateX(0deg) rotateZ(0deg)}
}
@keyframes route-mid{
 from,8%{transform:translateY(108vh) scale(var(--route-mid-scale)) rotateX(0deg) rotateZ(0deg)}
 50%{transform:translateY(0) scale(var(--route-stack-mid)) rotateX(var(--route-tilt)) rotateZ(var(--route-turn))}
 to{transform:translateY(-6vh) scale(var(--route-mid-scale)) rotateX(0deg) rotateZ(0deg)}
}
@keyframes route-near{
 from,16%{transform:translateY(116vh) scale(var(--route-near-scale)) rotateX(0deg) rotateZ(0deg)}
 50%{transform:translateY(var(--route-stage-gap)) scale(var(--route-stack-near)) rotateX(var(--route-tilt)) rotateZ(var(--route-turn))}
 to{transform:translateY(0) scale(var(--route-near-scale)) rotateX(0deg) rotateZ(0deg)}
}
@keyframes route-reveal{
 from{clip-path:inset(100% 0 0);transform:translateY(8vh)}
 45%{clip-path:inset(95% 0 0);transform:translateY(6vh)}
 to{clip-path:inset(0);transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* 손글씨 내용은 남기되 인트로에서도 획을 쓰지 않음. */
html[data-intro=play] .hero .hand{opacity:1;visibility:visible}
html:has(.fe-dark){background:#0e0e0d}  /* 어두운 상세에서 페이지가 올라올 때 종이색이 비치지 않게(W6-3) */
@media(prefers-reduced-motion:reduce){html.fd-out .pg{animation:none;transition:none}}
/* ── W3 홈 히어로: 직함 줄은 소개 문단 이상 · 굵기 500, 1280×720에서도 Scroll이 첫 화면에 보이게 간격을 줄임 ── */
.identity{margin-top:24px;font-size:calc(var(--body) * 1.4);font-weight:500;line-height:1.3;letter-spacing:var(--ls-ko-d)}
.hero{padding-top:calc(var(--gap-s) / 4)}
.hero .copy{grid-column:1/span 8}
.hero-foot{padding-top:clamp(24px,5vh,var(--gap-s))}
@media(max-width:700px){.hero .copy{grid-column:1/-1}}
/* 10/22 web-design-guidelines 점검: Archive 카드 역할 줄(★ 문구)이 2줄에서 잘리지 않게 · 터치 기기 헤더 버튼 44px */
.wk-i[data-cat=brand] .wk-role{-webkit-line-clamp:4}

/* ── X4 Blueprint: About ← 링크 · 2021 칸 그림 · 2026 칸 아래 비교 표 ── */
.bp-back{display:inline-block;margin-bottom:var(--gap-s);font-size:15px;color:var(--muted)}
.bp-back:hover{color:var(--ink)}
.bp-diff{width:100%;margin-top:var(--gap-s);border-collapse:collapse;font-size:15px;line-height:1.5}
.bp-diff :is(th,td){padding:14px 16px 14px 0;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-weight:400}
.bp-diff tr:last-child :is(th,td){border-bottom:1px solid var(--line)}
.bp-diff thead :is(th,td){border-top:0;color:var(--muted);font-size:var(--label)}
.bp-diff tbody th{width:12%;color:var(--muted);font-size:var(--label)}
@media(max-width:700px){.bp-diff :is(th,td){display:block;padding:4px 0;border:0}.bp-diff thead{display:none}.bp-diff tr{display:block;padding:12px 0;border-top:1px solid var(--line)}}

/* ── X6 전환 레이어(OCT002 Round 7 문법): 판 = 고른 작업의 층 이미지(전체 화면 크기, 아이소로 눕혀 쌓음). 이름표는 판 오른쪽 끝 ── */
/* ── Y 추가(주영 10/22 밤) ── */
/* 상장 호버: 상장 링크에 올리거나 포커스하면 상장 그림이 왼쪽에 뜸(누르면 원본 새 탭). 터치 = 누르면 원본 */
.ab-aw>li{position:relative}
.award-link.has-pv{cursor:zoom-in}
.aw-pv{position:absolute;right:calc(100% + 24px);top:50%;z-index:5;width:min(300px,28vw);max-height:78vh;display:block;padding:8px;background:var(--paper);border:1px solid var(--ink);opacity:0;visibility:hidden;translate:0 -50%;transition:opacity var(--t-2) var(--ease-out),visibility 0s var(--t-2);pointer-events:none}
.aw-pv img{display:block;width:100%;height:auto;max-height:calc(78vh - 16px);object-fit:contain;border-radius:0}
.award-link.has-pv:focus-visible .aw-pv{opacity:1;visibility:visible;transition-delay:0s}
@media(hover:hover){.award-link.has-pv:hover .aw-pv{opacity:1;visibility:visible;transition-delay:0s}}
@media(max-width:1100px){.aw-pv{display:none}}
@media(prefers-reduced-motion:reduce){.aw-pv{transition:none}}
/* Story 연도(제목 뒤) · 투명 흰 메모(어두운 시안 위) · 개요 손글씨 */
.sb-y{margin-left:6px;font-size:var(--label);color:var(--muted);font-variant-numeric:tabular-nums}
.sb-im .h-oct{background:transparent;color:#fff;padding:0}
.sec-head>.h-ov{position:absolute;right:0;top:72px}
/* 서체 · 색 보드(Y 재정리): 선 하나 위에 두 칸. 서체 = 견본 + 역할 3줄 / 색 = 쓰는 양 비율 막대 + 이름표 4칸 */
.sign{margin-top:var(--gap-s);display:flex;align-items:center;gap:32px}
.is-r .sign{justify-content:flex-end}
@media(min-width:1101px){.abx{min-height:calc(100svh - 160px)}}  /* 16:9 한 화면: 머리 80 + 바닥글 79 빼고 세로로 채움, Contact는 맨 아래 */
/* ── 지시서 14 (2026-10-23) ── */
/* 히어로 = 화면 높이 전체(10/23): 첫 화면에 Featured가 안 보임. 머리 80(모바일 72)을 뺀 높이, 푸터 줄은 맨 아래 */
.hero{min-height:calc(100svh - 80px);padding-bottom:32px}
@media(max-width:700px){.hero{min-height:calc(100svh - 72px)}}
.hero-foot{margin-top:auto;padding-top:var(--gap-s)}
.hero-xp{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.hero-xp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}}
@media(max-width:700px){.hero-xp{grid-template-columns:1fr}}
.bp-flow.hand{bottom:56px}
.hero-rule{margin:24px 0 28px}
[data-page=home] .hero-xp{margin-top:28px}
[data-page=home] #featured{margin-top:24px}
[data-page=home] #featured .sec-head{padding-top:12px;margin-bottom:24px}
.fe-gallery>.fe-empty{list-style:none;position:relative;min-height:120px;padding:20px 24px}
.fe-empty .hand{position:static}
@media(max-width:900px){.fe-gallery>.fe-empty{display:none}}
/* 주영 입력 대기 [TODO-주영] = 손글씨 */
.todo-h{font-family:'KIN Hand',var(--f);font-weight:400;font-size:1.12em;line-height:1.35;letter-spacing:.008em;color:var(--blue);border:1px dashed currentColor;white-space:normal;padding:0 10px}
.fe-dark .todo-h{color:var(--ui,var(--blue))}
/* 접기(<details>): Blueprint 길이 · 쿠키런 테스트 기록 · 웨더 기록 */
.bp-more,.fe-more{grid-column:1/-1}
.bp-more>summary,.fe-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--ink);font-size:var(--body);color:var(--ink)}
.fe-more>summary{border-top-color:var(--line);color:var(--muted);font-size:max(15px,var(--label))}
.bp-more>summary::-webkit-details-marker,.fe-more>summary::-webkit-details-marker{display:none}
.bp-more>summary::before,.fe-more>summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:15px;line-height:1}
.bp-more[open]>summary::before,.fe-more[open]>summary::before{content:"\2212"}
.bp-more>summary:hover,.fe-more>summary:hover{color:var(--blue)}
.bp-more[open]>summary{margin-bottom:var(--gap-s)}
.fe-more[open]>summary{margin-bottom:var(--gap-s)}
/* S34: Blueprint 세로 안내선과 칸 경계 제거. 가로 구분선/그림 자체 윤곽은 유지. */
[data-page=blueprint] :is(.fe-gallery,.cells,.ph-row)::before{content:none}
[data-page=blueprint] :is(.fe-gallery,.cells,.ph-row){border-left:0}
[data-page=blueprint] :is(.fe-gallery>.fe-card,.cells>li,.ph-row>.ph){border-right:0}
/* Blueprint 프로젝트 색 한 행 */
/* About: 맡길 수 있는 일 · 교육 · 다음 계획 */
/* 상세: ← Work · Work 목록 → */
.fe-dark .bp-back{color:var(--muted)}
.md-next .md-all{font-size:var(--body);letter-spacing:0;color:var(--muted)}
.md-next .md-all:hover{color:var(--ink)}
.md-nx{display:flex;align-items:baseline;gap:16px;min-width:0}
@media(max-width:700px){.md-next{flex-direction:column;gap:16px}.md-nx{flex-direction:column;gap:4px}}
.wk-chip span{margin-left:0}
.bp-flow.hand{right:0;bottom:88px} /* S25: 다시 보기·About 링크 위로 분리 */
@media(min-width:1101px){.abx-c .ab-sub+.ab-sub{margin-top:20px}.abx-c .ab-rows>div{padding-block:12px}}
.is-band .sec-head .label.is-keep{grid-row:1;align-self:end}
.is-band .sec-head .label.is-keep+h2{grid-row:2}
.sbt{list-style:none;margin:var(--gap-s) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);row-gap:40px}
.sbt>li{display:grid;grid-template-rows:auto auto;row-gap:20px;align-content:start;min-width:0}
.sbt .sb-col b{font-weight:400;font-size:calc(var(--body) * 1.2);letter-spacing:var(--ls-en-d)}
.sbt .sb-col p{font-size:15px;line-height:1.6;color:var(--muted)}
.sbt .sb-im .ph-row{margin:0}
@media(max-width:700px){.sbt{grid-template-columns:1fr}}
#ch01>.sec-head>.h-ov{left:calc(36% + 56px);right:auto;top:30px}
#ch02>.sec-head>.deco{left:calc(24% + 8px)}
.as-head{text-align:center}.as-head .ch-body{margin-inline:auto}
.as-cta{justify-content:center}
/* About 그리드 맞춤(주영 10/23): 세 칸의 가는 선이 같은 줄 간격(--R)에 걸리게. 칸 머리 = R/2, 줄 = R, 이름 칸 = 3R */
@media(min-width:1101px){
.abx{--R:clamp(92px,calc((100svh - 260px) / 6.5),124px)}
.abx-c,.ab-c{padding-top:0}
.ab-id{min-height:calc(var(--R) * 3);padding-top:16px;box-sizing:border-box}
.abx-c .ab-sub+.ab-sub{margin-top:0}
.abx-c .ab-sub>h2,.ab-c>h2{margin:0;height:calc(var(--R) / 2);display:flex;align-items:center}
.ab-aw{margin-top:0}
.abx-c .ab-rows{margin:0}
.abx-c .ab-rows>div,.ab-aw>li{box-sizing:border-box;min-height:var(--R);padding-block:8px;align-content:center}
.ab-aw>li{display:grid;align-content:center}
.ab-aw>li .aw-2{line-height:1.35}
.abx-c .ab-rows>div:last-child{border-bottom:0}
.abx-c .ab-rows{border-bottom:0}
.abx-c .ab-sub+.ab-sub>h2{height:var(--R)}  /* 학력 · 교육 머리 = R: 줄이 .5R 격자에 걸림 */
.ab-aw>li{padding-block:4px}
}
.locked-sub+.ch-heading{margin-top:var(--gap-s)}
/* S16: Architectural Editorial. Tokens above control section and information spacing. */
[data-page=home] #featured{margin-top:var(--home-break);padding-top:0}
[data-page=home] #featured .sec-head{padding-top:0;margin-bottom:32px}
/* S25: 사용자 지정 히어로 손글씨를 데스크톱에서 다시 표시 */
@media(max-width:900px){.hero .bp-flow{display:none}}
.fe-a,.wk-a{position:relative;isolation:isolate}
.fe-media,.wk-media{position:relative;z-index:1;transition:transform var(--t-2) var(--ease-out);background:var(--paper)}
.wk-a:not([data-featured]):focus-visible .wk-media{transform:translateY(calc(var(--layer-gap) * -.5))}  /* Featured 카드는 호버 없음(10/23) */
@media(hover:hover){.wk-a:not([data-featured]):hover .wk-media{transform:translateY(calc(var(--layer-gap) * -.5))}}
/* 누름 = 그림이 반 층 내려감(고르다의 시작). 누를 땐 t-1로 바로 */
:is(.fe-a,.wk-a):active :is(.fe-media,.wk-media){transform:translateY(calc(var(--layer-gap) * .5));transition-duration:var(--t-1)}
.site-header nav a{transition:transform var(--t-1) var(--ease-out)}
:is(.site-header nav a,.wk-chip,.hero-replay):active{transform:scale(.97)}
.fe-gallery,.wk{overflow:visible}
/* About: identity 4 columns, information 8 columns; dates share one start. */
.abx{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;gap:32px var(--info-gap);min-height:0;padding-block:32px var(--gap-s)}
.abx-me{display:flex;padding:0;min-width:0}
.abx .ab-id{height:auto;min-height:0;padding:0}
.abx>.abx-ct{grid-column:1;grid-row:2;margin-top:0;padding-top:0;align-self:start}
.abx-info{min-width:0;grid-column:2;grid-row:1/span 2}
.abx-info .ab-sub,.abx-info .ab-c{display:block;padding:0;margin:0 0 var(--info-gap);border:0}
.abx-info :is(.ab-sub>h2,.ab-c>h2){height:auto;margin:0 0 16px;display:block;font-size:24px}
.abx-info .ab-rows{margin:0}
.abx-info .ab-rows>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--gutter);min-height:0;padding:20px 0}
.abx-info .ab-rows dd{font-size:18px;line-height:1.5}
.abx-info .ab-rows dt{font-size:15px}
.abx-info .ab-aw{margin:0}
.abx-info .ab-aw>li{min-height:0;padding:20px 0}
.abx-info .aw-1{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px var(--gutter);font-size:18px;line-height:1.5}
.abx-info .aw-1 small{grid-column:2}
.abx-info .aw-2{margin:8px 0 0;padding-left:calc(150px + var(--gutter));font-size:15px}
.as{height:auto}.as-stage{position:relative;height:auto}
.as-head,.as-cta{text-align:left;justify-content:flex-start}
.dom-evidence{position:relative;grid-column:1/span 7}.dom-evidence .dom-row{margin:0}.dom-evidence figure{margin:0}
.dom-lines{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;fill:var(--blue);stroke:var(--blue);stroke-width:2}
.dom-lines path{fill:none}.dom-label{position:absolute;left:65%;font-size:clamp(13px,1.3vw,22px);background:var(--paper);padding:2px 8px}
.dom-pillar{top:30%}.dom-floor{top:42%}
@media(max-width:900px){
 :root,[data-set=B]{--home-break:80px;--row-thumb:128px;--info-gap:32px}
 .abx{grid-template-columns:1fr;grid-template-rows:auto}
 .dom-evidence{grid-column:1/-1}
 .abx .abx-me{display:block}.abx-info,.abx>.abx-ct{grid-column:1;grid-row:auto;order:0}
}
@media(max-width:600px){
 :root,[data-set=B]{--row-thumb:96px}
 .abx-info .ab-rows>div,.abx-info .aw-1{grid-template-columns:1fr;gap:6px}
 .abx-info .aw-1 small{grid-column:1}.abx-info .aw-2{padding-left:0}
}
@media(prefers-reduced-motion:reduce){.fe-media,.wk-media{transition:none}:is(.fe-a,.wk-a):is(:hover,:focus-visible,:active) :is(.fe-media,.wk-media),:is(.site-header nav a,.wk-chip,.hero-replay):active{transform:none}}
#motion .sec-head .draw-body{grid-column:1/-1;text-align:center}
/* S17 Blueprint: four existing history steps; old Application animation restored. */
.sbt.is-history{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
.sbt.is-history>li{grid-row:span 2;grid-template-rows:subgrid;margin-bottom:40px}  /* 글 높이가 달라도 네 칸의 그림 윗선이 같음 */
.sbt .ph[data-slot=st-oct002] img{filter:saturate(.2)}
.as-head{text-align:center}.as-head .ch-body{margin-inline:auto}.as-cta{justify-content:center}
@media(max-width:900px){.sbt.is-history{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sbt.is-history{grid-template-columns:1fr}}

/* S17-6 Motion 상세: 합성 전후 A/B 슬라이더 · 셋업 → 반영 결과 화살표 · 바뀐 곳 표시 */
.md-cmp{margin:var(--gap-s) 0 0}
.md-cmp figcaption{margin-top:10px;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.md-compare{position:relative;overflow:hidden;--p:50%}
.md-compare img{display:block;width:100%;height:auto;background:rgb(32 34 31 / .06)}
.md-compare .md-cb{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.md-compare .md-ch{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px rgb(32 34 31 / .35);pointer-events:none}
.md-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.md-compare:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.md-cl,.md-cr{position:absolute;bottom:12px;padding:2px 8px;font-size:var(--label);line-height:1.5;background:var(--paper);color:var(--ink);pointer-events:none}
.md-cl{left:12px}.md-cr{right:12px}
.md-flow{display:flex;align-items:center;gap:var(--gutter);margin-top:var(--gap-s)}
.md-flow>figure{flex:1 1 0;min-width:0;margin:0}
.md-flow figure img{width:100%;height:auto;background:rgb(32 34 31 / .06)}
.md-flow figcaption{margin-top:10px;font-size:var(--r-cap);line-height:1.45;color:var(--muted)}
.md-arrow{flex:none;font-size:calc(var(--fr) * 2);line-height:1;color:var(--muted)}
.md-mk{position:relative;display:block}
.md-mk img{display:block}
.md-mk i{position:absolute;border:2px solid var(--blue);pointer-events:none}
@media(max-width:700px){.md-flow{flex-direction:column;align-items:stretch}.md-flow>figure{flex:none}.md-arrow{align-self:center;transform:rotate(90deg)}}
.md-flow-h{margin-top:var(--gap-s);padding-bottom:12px;border-bottom:1px solid var(--ink);font-size:var(--r-cap);letter-spacing:var(--ls-cap);color:var(--muted)}
.md-flow-h>span:not(.md-arrow){flex:1 1 0}.md-flow-h .md-arrow{visibility:hidden}
.md-flow-h+.md-flow{margin-top:24px}
@media(max-width:700px){.md-flow-h{display:none}}

.hf-r{display:flex;align-items:baseline;gap:32px}
.hero-replay{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 2px;cursor:pointer;touch-action:manipulation;transition:border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-out)}
.hero-replay:hover{border-bottom-color:var(--ink)}
.hero-replay:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.hero-replay{display:none}}

/* S19 Motion · Lab 행 목록(10/23): 평소 제목만(세로선 없음 · 가운데 · 한 줄). 호버 · 포커스 = 썸네일 + 영상이 행마다 좌 → 우 → 좌 → 우로 나옴.
   터치 · 좁은 화면 = 탭하면 그 행이 펼쳐져 미디어 + 상세 링크가 보임(site.js .is-open) */
.rl{list-style:none;padding:0}
.rl-a{position:relative;display:grid;justify-items:center;align-content:center;min-height:150px;padding:24px 0}
.rl-t{font-size:var(--list-title);line-height:1.15;letter-spacing:var(--ls-en-d);text-align:center;overflow-wrap:anywhere}
.rl .rl-m{position:absolute;top:50%;translate:0 -50%;width:clamp(180px,17vw,320px);aspect-ratio:16/9;opacity:0;pointer-events:none;z-index:1;transition:opacity var(--t-1) var(--ease-out)}  /* 나갈 땐 빠르게(t-1), 들어올 땐 t-2 */
.rl-i[data-side=l] .rl-m{left:0}.rl-i[data-side=r] .rl-m{right:0}
.rl-go{display:none;font-size:15px;color:var(--muted)}
@media(hover:hover) and (min-width:701px){
 .rl-a:is(:hover,:focus-visible) .rl-m{opacity:1;transition-duration:var(--t-2)}
 .rl-t{transition:opacity var(--t-2) var(--ease-out)}
 .rl:has(.rl-a:is(:hover,:focus-visible)) .rl-i:not(:hover,:focus-within) .rl-t{opacity:.45}  /* 맞추다 1단: 고른 행만 남고 형제는 물러남(.align과 같은 문법) */
}
@media(hover:none),(max-width:700px){
 .rl-a{min-height:0;padding:20px 0}
 .rl .rl-m{position:relative;top:auto;left:auto;right:auto;translate:none;opacity:1;display:none;width:min(100%,360px);margin-top:16px}
 .rl-i[data-side=l] .rl-m{justify-self:start}.rl-i[data-side=r] .rl-m{justify-self:end}
 }

/* S19 KartRider 개요: 티저 + 완성영상 좌우 2칸, 티저 중앙 버튼 = 일시정지 · 재생 */
.md-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-bottom:var(--gap-s)}
.md-duo .yt{margin-bottom:0}
.md-duo figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.vc{position:relative}
.vc video{width:100%;display:block;border-radius:var(--r-media)}

/* S26: 첫 문장은 요지, 다음은 설명, 이름/직함과 메타는 보조. */
[data-page=home] .hero h1{font-size:var(--hero-wordmark)}
[data-page=home] .hero .hero-lead:first-of-type{font-size:var(--hero-statement);font-weight:500;line-height:var(--heading-lh);max-width:var(--hero-line-width)}
[data-page=home] .hero .hero-lead+.hero-lead{font-size:var(--hero-support);line-height:var(--reading-lh);max-width:var(--support-line-width);color:var(--muted)}
[data-page=home] .hero .identity{font-size:var(--identity-size);font-weight:400;line-height:var(--reading-lh)}
[data-page=home] .fe-t{font-size:var(--card-title);font-weight:500}
[data-page=home] :is(.fe-copy,.fe-principle){font-size:var(--card-copy);line-height:var(--reading-lh)}
[data-page=home] .fe-role{font-size:var(--support-size)}
.sec-head .sec-lead{font-size:var(--section-intro);line-height:var(--reading-lh);color:var(--muted)}
.wk-t{font-size:var(--card-title);font-weight:500}
.ab-role{font-size:var(--r-role);line-height:var(--reading-lh);color:var(--muted)}
.abx-info :is(.ab-sub>h2,.ab-c>h2){font-size:var(--subhead-size);font-weight:500}
.abx-info .ab-rows b{font-weight:500}
@media(max-width:700px){.md-duo{grid-template-columns:1fr}}
/* S19 홈 나머지 선도 행 목록 문법으로(10/23): 가는 가로선(--line)만, 세로선 · 칸 눈금 · 가장자리까지 뻗는 선 없음. 한 줄 = 위선 하나 + 항목마다 아래선 */
[data-page=home] .fe-gallery{border:0}
[data-page=home] .fe-gallery::before,[data-page=home] .fe-gallery::after{content:none}
[data-page=home] .fe-gallery>.fe-card{border:0}
[data-page=home] .contact-list{display:block;margin-bottom:0}
[data-page=home] .contact-list a{display:block;padding:20px 0;font-size:clamp(20px,2vw,32px);letter-spacing:var(--ls-en-d);line-height:1.2}
[data-page=home] .is-r .contact-list a{text-align:right}
[data-page=home] .text-links{display:block;gap:0;margin-top:32px}
[data-page=home] .text-links .text-link{display:block;width:100%;padding:20px 0;text-decoration:none}
[data-page=home] .text-links .text-link:hover{text-decoration:underline;text-underline-offset:6px}

/* S19-3 작도선(10/23, 컨셉 "그린 선"): 가는 가로선은 전부 같은 그림 = 박스 border 대신 의사요소로 그은 선 + 연필 떨림(#pencil).
   선 2px(떨림에 1px 선이 끊겨 보여서) · --ov > 0 이면 선 양끝이 페이지 여백으로 번지며 옅어짐(바닥판), 0이면 칸 안에서 끊김. 위선 = ::before, 아래선 = ::after. 움직임 없음(10/21 결정) */
:is(.rl,.rl-i,[data-page=home] .contact-list,[data-page=home] .contact-list li,[data-page=home] .fe-gallery,[data-page=home] .fe-card,[data-page=home] .text-links,[data-page=home] .text-link,footer,.hero-xp,.ab-rows>div,.ab-aw>li){position:relative;--ov:0px}
:is(.rl,.rl-i,[data-page=home] .contact-list,[data-page=home] .contact-list li,[data-page=home] .fe-gallery,footer,.hero-xp){--ov:var(--margin)}
:is(.rl,[data-page=home] .contact-list,[data-page=home] .text-links,footer,.hero-xp,.ab-rows>div,.ab-aw>li)::before,
:is(.rl-i,[data-page=home] .contact-list li,[data-page=home] .fe-gallery,[data-page=home] .fe-card,[data-page=home] .text-link,.ab-rows>div:last-child,.ab-aw>li:last-child)::after{content:"";position:absolute;left:calc(var(--ov) * -1);right:calc(var(--ov) * -1);height:9px;pointer-events:none;background:linear-gradient(var(--dl-c,var(--line)),var(--dl-c,var(--line))) center/100% 2px no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--ov),#000 calc(100% - var(--ov)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--ov),#000 calc(100% - var(--ov)),transparent);filter:url(#pencil-line)}
:is(.rl,[data-page=home] .contact-list,[data-page=home] .text-links,footer,.hero-xp,.ab-rows>div,.ab-aw>li)::before,[data-page=home] .fe-gallery::after{top:-4px}
:is(.rl-i,[data-page=home] .contact-list li,[data-page=home] .fe-card,[data-page=home] .text-link,.ab-rows>div:last-child,.ab-aw>li:last-child)::after{bottom:-4px;top:auto}
:is(.rl,.rl-i,[data-page=home] .contact-list,[data-page=home] .contact-list li,[data-page=home] .fe-gallery,[data-page=home] .fe-card,[data-page=home] .text-links,[data-page=home] .text-link,footer,.hero-xp,.ab-rows>div,.ab-aw>li){--dl-c:color-mix(in srgb,var(--line) 50%,transparent)}
[data-page=detail] footer::before{content:none}[data-page=detail] footer{border-top:1px solid var(--line)}  /* Featured · Motion 상세는 제외(10/23) */

/* S19-4 Blueprint · About 구간선 · 히어로 파란 선도 그린 선으로, 더 연하게, 블루프린트에는 세로 안내선도(10/23). Featured · Motion 상세는 제외 */
:is([data-page=blueprint],[data-page=about]) :is(.sec,.ch)>.sec-head.draw::before{left:calc(var(--margin) * -1);width:calc(100% + var(--margin) * 2);background:color-mix(in srgb,var(--ink) 55%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent);filter:url(#pencil-line)}
[data-page=home] .hero-rule.draw::before{left:calc(var(--margin) * -1);width:calc(100% + var(--margin) * 2);clip-path:none;height:2px;top:-1px;background:color-mix(in srgb,var(--blue) 75%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--margin),#000 calc(100% - var(--margin)),transparent);filter:url(#pencil-line)}
[data-page=blueprint] :is(.pn li,.cover-credits,.values li,.dom,.dom-lg div,.bp-diff tr,.bp-more>summary){border-top:0;position:relative;--ov:0px;--dl-c:color-mix(in srgb,var(--line) 50%,transparent)}
[data-page=blueprint] :is(.cover-credits,.dom,.bp-more>summary){--dl-c:color-mix(in srgb,var(--ink) 38%,transparent)}
[data-page=blueprint] :is(.pn li,.cover-credits,.dom){--ov:var(--margin)}
[data-page=blueprint] :is(.pn li:last-child,.bp-diff tr:last-child){border-bottom:0;position:relative}
[data-page=blueprint] .bp-diff :is(th,td){border-top:0;border-bottom:0}
[data-page=blueprint] :is(.pn li,.cover-credits,.values li,.dom,.dom-lg div,.bp-diff tr)::before,
[data-page=blueprint] :is(.pn li:last-child,.bp-diff tr:last-child)::after,
[data-page=blueprint] .bp-more>summary::after{content:"";position:absolute;left:calc(var(--ov) * -1);right:calc(var(--ov) * -1);height:9px;pointer-events:none;background:linear-gradient(var(--dl-c),var(--dl-c)) center/100% 2px no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 var(--ov),#000 calc(100% - var(--ov)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--ov),#000 calc(100% - var(--ov)),transparent);filter:url(#pencil-line)}
[data-page=blueprint] :is(.pn li,.cover-credits,.values li,.dom,.dom-lg div,.bp-diff tr)::before,[data-page=blueprint] .bp-more>summary::after{top:-4px}
[data-page=blueprint] :is(.pn li:last-child,.bp-diff tr:last-child)::after{bottom:-4px;top:auto}
[data-page=blueprint] main{position:relative;isolation:isolate}
/* S23: Motion works · AI works 간격은 atelier-meridian-site.webflow.io 리듬 참고: 구간 상하 6vw, 목록 행 약 5.2vw(행 사이 간격 없이 촘촘히). 호버 미리보기는 행 밖으로 겹쳐 뜸 */
/* S77: 홈 구간 사이 간격 통일(주영 10/25) = Featured 아래 ~ Contact 위 모두 6vw + 6vw(모바일 48 + 48). 구간마다 다르던 --gap-l · margin-top을 덮음 */
[data-page=home] #featured{padding-bottom:6vw}
[data-page=home] :is(#lab,#motion,#blueprint-row,#about){padding-block:6vw;margin-top:0}
[data-page=home] #contact{padding-top:6vw;margin-top:0}
[data-page=home] :is(#motion,#lab) .rl-a{min-height:max(72px,5.2vw);padding:12px 0}
@media(max-width:700px){[data-page=home] #featured{padding-bottom:48px}[data-page=home] :is(#lab,#motion,#blueprint-row,#about){padding-block:48px}[data-page=home] #contact{padding-top:48px}[data-page=home] :is(#motion,#lab) .rl-a{min-height:64px}}