/* v10 · S3 이미지 우선 카탈로그 · H1 img4-21 점등(제목은 렌더의 빈 상단 여백 가운데) · M1 포인트 클라우드 간주 3
   본문 = 4:5 카드(캡션은 카드 아래). 834+ = 지그재그(이미지 min(52vw,540px) 좌우 교대, 캡션 블록은 반대편 아래 끝). 끝 = 인덱스 카드 패널. */

/* ---------- 헤더: 히어로를 지나면 단색 띠(main.js가 .solid 토글, v05 방식). 카드 캡션·패널 글이 브랜드와 KO|EN 밑으로 비치지 않게 ---------- */
.v10 .site-head{transition:background-color .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
.v10 .site-head.solid{background:var(--bg);border-bottom-color:var(--rule)}

/* ---------- 히어로: 가운데 정렬 제목 블록(상단 여백) + 아래 가운데 캡션 ---------- */
.v10 .hero{grid-template-rows:auto 1fr auto;align-content:stretch;justify-items:center;text-align:center;padding-top:calc(var(--head-h) + var(--safe-t));padding-bottom:calc(clamp(18px,3.4svh,40px) + var(--safe-b))}
.v10 .hero .bg img{object-position:50% 50%}
/* 캡션이 짧아 아래 어둠은 바닥 반사 부분만(큐브 하단을 덜 가린다) */
.v10 .hero .scrim{background:linear-gradient(to top,rgba(14,12,9,.88) 0%,rgba(14,12,9,.5) 11%,rgba(14,12,9,.12) 24%,rgba(14,12,9,0) 34%)}
.v10 .hero .scrim-top{background:linear-gradient(to bottom,rgba(14,12,9,.72) 0%,rgba(14,12,9,.3) 20%,rgba(14,12,9,0) 34%)}
.v10 .hero .tb{grid-row:1;max-width:none;width:100%;min-height:calc(30svh - var(--head-h) - var(--safe-t));display:flex;flex-direction:column;align-items:center;justify-content:center}
.v10 .hero .tb .kicker{color:var(--accent);margin:0 0 clamp(6px,1.1svh,14px);letter-spacing:.14em;padding-left:.14em}
.v10 .hero h1.title{font-size:clamp(44px,min(16vw,8svh),132px);line-height:1;letter-spacing:.02em;padding-left:.02em}
.v10 .hero .tb .title-en{margin-top:clamp(4px,.9svh,12px);font-size:clamp(14px,min(3.9vw,2.3svh),24px);line-height:1.3;letter-spacing:.42em;padding-left:.42em}
.v10 .hero .hair{display:block;width:48px;height:1px;background:var(--accent);margin:clamp(9px,1.6svh,18px) 0}
.v10 .hero .meta{font-size:var(--fs-small);line-height:1.4;letter-spacing:.14em;padding-left:.14em;color:rgba(255,255,255,.82)}
.v10 .hero .hero-cap{grid-row:3;margin:0;max-width:22rem;color:rgba(255,255,255,.76);text-shadow:0 1px 12px rgba(14,12,9,.8)}
@media (max-width:600px){.v10 .hero .bg img{object-position:50% 0%}}
/* 넓은 가로 화면: 세로 렌더를 높이 100%·제 비율로 가운데 세우고 좌우 가장자리를 마스크로 풀어 어둡게 한 LQIP 배경과 잇는다(큐브가 잘리지 않음) */
@media (orientation:landscape) and (min-width:834px){
  .v10 .hero .bg img{position:absolute;top:0;left:0;right:0;margin:0 auto;width:auto;max-width:none;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%)}
  .v10 .hero .bg{box-shadow:inset 0 0 0 100vmax rgba(14,12,9,.86)}
}
/* 낮은 가로 화면(폰 가로 보기): 가운데 제목이 큐브와 겹치므로 렌더는 오른쪽에 제 비율로, 제목 블록은 왼쪽 */
@media (orientation:landscape) and (max-height:600px){
  .v10 .hero{grid-template-rows:1fr auto;justify-items:start;text-align:left}
  .v10 .hero .tb{grid-row:1;min-height:0;align-items:flex-start;justify-content:center;max-width:min(54%,30rem)}
  .v10 .hero .tb .kicker,.v10 .hero h1.title,.v10 .hero .tb .title-en,.v10 .hero .meta{padding-left:0}
  .v10 .hero .hero-cap{grid-row:2;justify-self:start;text-align:left;max-width:min(54%,22rem)}
  .v10 .hero .bg img{position:absolute;top:0;left:auto;right:6%;margin:0;width:auto;max-width:none;height:100%;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 17%,#000 83%,transparent 100%)}
  .v10 .hero .bg{box-shadow:inset 0 0 0 100vmax rgba(14,12,9,.86)}
}

/* ---------- 묶음 머리: 가는 금색 괘선 + 금색 kicker ---------- */
.v10 .grp{display:block;padding-top:clamp(84px,14vh,160px)}
.v10 .ghead{border-top:1px solid var(--rule-gold);padding-top:14px;margin-bottom:clamp(28px,5vh,52px)}
.v10 .ghead .kicker{color:var(--accent)}

/* ---------- 4:5 카드 ---------- */
.v10 .card{position:relative;margin:0}
.v10 .card+.card{margin-top:clamp(56px,10vh,104px)}
.v10 .card .ib{aspect-ratio:4/5;width:min(100%,calc((100svh - 72px) * .8));position:relative;overflow:hidden}
.v10 .card .ib img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--op,50% 50%)}
/* 4:5로 자르면 캡션이 말하는 주제가 잘리는 렌더(검수 01:11): 가로 렌더 둘(img1-05 관람자 세 명 · img4-16 네 재료)은 제 비율 그대로(.wide, --ar),
   세로로 긴 img2-02(전체 높이 면)는 4:5 틀 안에 통째로(.fit · contain). 틀의 남는 좌우는 패널색, 렌더 가장자리는 마스크로 풀어 잇는다(LQIP 대신) */
.v10 .card.wide .ib{aspect-ratio:var(--ar);width:100%}
.v10 .card.fit .ib{background:var(--panel-alt)!important}
.v10 .card.fit .ib img{object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 18.75%,#000 22.5%,#000 77.5%,transparent 81.25%);mask-image:linear-gradient(90deg,transparent 18.75%,#000 22.5%,#000 77.5%,transparent 81.25%)}
.v10 .card .ct{display:block;margin-top:16px;max-width:34rem}
.v10 .card .ct::before{content:"";display:block;width:24px;height:1px;background:var(--accent);margin-bottom:12px}
.v10 .card .ct .k{color:var(--accent);margin-bottom:6px}
.v10 .card .ct .cap{font-family:var(--font-body);font-weight:500;font-size:15px;line-height:1.55;color:rgba(251,246,238,.9)}

/* 834+: 지그재그 · 이미지 좌우 교대, 캡션 블록은 반대편에서 이미지 아래 끝에 맞춘다(서랍을 열면 main.js가 제자리에 고정 → 아래로 펼침) */
@media (min-width:834px){
  .v10 .card{--cw:min(52vw,540px,calc((100svh - 72px) * .8));display:grid;column-gap:clamp(28px,4vw,64px)}
  .v10 .card.c-l{grid-template-columns:var(--cw) minmax(0,1fr)}
  .v10 .card.c-r{grid-template-columns:minmax(0,1fr) var(--cw)}
  .v10 .card .ib{grid-row:1;align-self:start}
  .v10 .card .ct{grid-row:1;align-self:end;margin-top:0;width:100%;max-width:26rem}
  .v10 .card.c-l .ib{grid-column:1}.v10 .card.c-l .ct{grid-column:2;justify-self:start}
  .v10 .card.c-r .ib{grid-column:2}.v10 .card.c-r .ct{grid-column:1;justify-self:end}
  .v10 .card .ct.pin{align-self:start}
  .v10 .card .ct .cap{font-size:clamp(15px,.9rem + .15vw,17px)}
  /* 가로 렌더 카드: 높이가 낮아 화면 높이 상한이 필요 없다(가로 폰에서도 4:5 카드보다 작아지지 않게) */
  .v10 .card.wide{--cw:min(52vw,540px)}
}
@media (min-width:1200px){.v10 .card.wide{--cw:min(64vw,720px)}}


/* ---------- 끝: 인덱스 카드 패널 ---------- */
.v10 .endblk{margin-top:clamp(96px,16vh,180px)}
.v10 .panels{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px)}
.v10 .panel{background:var(--panel-alt);border-top:1px solid var(--rule-gold);padding:clamp(20px,4vw,40px);min-width:0}
.v10 .panel>.kicker{color:var(--accent);margin-bottom:1.1rem}
.v10 .p-abs .absp{font-size:clamp(18px,1.06rem + .4vw,23px);line-height:1.9;color:var(--fg-strong);max-width:46rem}
.v10 .p-num .numbers .value{font-size:clamp(24px,2rem,38px)}
.v10 .p-num .numbers .value.sm{font-size:clamp(17px,1.2rem,23px)}
.v10 .p-stp .steps{grid-template-columns:minmax(0,1fr);gap:0}
.v10 .p-stp .steps .step{padding:.85rem 0}
.v10 .p-stp .steps .k{margin-bottom:.1rem}
@media (min-width:600px){.v10 .p-stp .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.6rem}}
/* 수치·단위가 줄에서 갈리지 않게: 폰은 긴 값 넷(면·큐브·아크릴 판·조각)을 한 줄 전폭, 나머지 넷은 2×2. 834~1199는 2열. 1200+ 반폭 과정 패널은 1열 */
@media (max-width:599px){.v10 .p-num .numbers .item:nth-child(-n+4){grid-column:1/-1}}
@media (min-width:834px) and (max-width:1199px){.v10 .p-num .numbers{--ncols:2}}
@media (min-width:1200px){.v10 .p-stp .steps{grid-template-columns:minmax(0,1fr)}}
@media (min-width:834px) and (max-width:1199px){.v10 .p-trm .terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}}
@media (min-width:1200px){
  .v10 .panels{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"abs abs" "num num" "stp trm" "crd crd";align-items:stretch}
  .v10 .p-abs{grid-area:abs}.v10 .p-num{grid-area:num}.v10 .p-stp{grid-area:stp}.v10 .p-trm{grid-area:trm}.v10 .p-crd{grid-area:crd}
}
.v10 .totop{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-top:2.4rem;color:var(--accent);font-size:var(--fs-small);letter-spacing:.08em}
.v10 .endblk .site-foot{margin-top:2rem}

/* ======================================================================
   root (https://qns.hyeokjinchoi.com/) · v10 기반 + 사용자 결정 2026-10-16 (13:30 · 14:10)
   1) 첫 장 게이트: html.gated 동안 배경 렌더는 보이지 않고(검정) 제목 블록만 세로 가운데, 아래 가운데 KOR | ENG. 스크롤 잠금. 글꼴이 준비되기 전(html.fonts-in 없음)엔 글자를 숨겨 폴백 글꼴이 먼저 보이지 않게 한다.
   2) 선택하면 main.js가 .gated를 떼고 .hero-h1 + .lit(점등 2.5 s). 배경 1.4 s 페이드인, 제목은 FLIP으로 상단 여백까지 이동, 괘선·연도는 뒤따라 페이드인.
   3) 헤더는 처음엔 보이지 않고, 히어로를 지나면(main.js .solid) 나타난다.
   4) 히어로 뒤: 작품 요약 원문 → 테마 4(설치 · 데이터 · 조각 · 전시, 큰 금색 머리) → 이름·이메일. 수치·용어·크레딧·처음으로·푸터 없음. 카드 이미지 스크롤 줌 없음(main.js).
   ====================================================================== */
html.gated{overflow:hidden}
html.gated body{overflow:hidden;height:100dvh}
.root .hero{background:var(--bg)}
.root .hero .bg{transition:opacity 1.4s ease}
html.gated .hero .bg{opacity:0}
html.gated .hero{grid-template-rows:1fr auto 1fr}
html.gated .hero .tb{grid-row:2;min-height:0}
.root .hero .tb{will-change:transform;transition:opacity .7s ease}
html.gated:not(.fonts-in) .hero .tb{opacity:0}
.root .hero .hair,.root .hero .meta{transition:opacity 1s ease .7s}
html.gated .hero .hair,html.gated .hero .meta{opacity:0}
.root .hero .meta{letter-spacing:.2em;padding-left:.2em}
.root .gate{position:absolute;left:0;right:0;bottom:calc(11dvh + var(--safe-b));z-index:3;display:flex;justify-content:center;align-items:center;gap:4px;transition:opacity .7s ease,visibility .7s}
html.gated:not(.fonts-in) .gate{opacity:0}
.root .gate .gbtn{appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;min-width:64px;min-height:48px;padding:0 10px 0 calc(10px + .24em);font-family:var(--font-body);font-weight:500;font-size:15px;letter-spacing:.24em;color:rgba(255,255,255,.9);transition:color .3s ease}
.root .gate .gbtn:hover,.root .gate .gbtn:focus-visible{color:var(--accent)}
.root .gate .sep{color:rgba(255,255,255,.32);font-family:var(--font-body);font-size:15px}
html:not(.gated) .gate{opacity:0;visibility:hidden;pointer-events:none}
.root .site-head{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s,background-color .4s ease,border-color .4s ease}
.root .site-head.solid{opacity:1;visibility:visible}
@media (orientation:landscape) and (max-height:600px){html.gated .hero{grid-template-rows:1fr auto 1fr;justify-items:center;text-align:center}html.gated .hero .tb{grid-row:2;max-width:none;align-items:center}html.gated .hero h1.title,html.gated .hero .tb .title-en,html.gated .hero .meta{padding-left:.02em}}
/* 요약 원문: 히어로 다음 첫 화면 */
.root .summary{min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,12vh,140px);padding-bottom:clamp(48px,8vh,96px)}
.root .summary .kicker{color:var(--accent);margin-bottom:1.2rem}
.root .summary .stext{font-size:clamp(18px,1.05rem + .45vw,23px);line-height:1.95;color:var(--fg-strong);max-width:40rem;margin:0}
/* 테마 머리 */
.root .theme{padding-top:clamp(96px,16vh,180px)}
.root .thead{border-top:1px solid var(--rule-gold);padding-top:18px}
.root .thead .tname{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,6vw,52px);line-height:1.1;letter-spacing:.02em;color:var(--accent);margin:0}
.root .theme .grp{padding-top:clamp(40px,7vh,80px)}
/* 끝: 이름 + 이메일 */
.root .contacts{padding:clamp(120px,20vh,220px) 0 clamp(96px,16vh,180px)}
.root .contacts .wrap{border-top:1px solid var(--rule-gold);padding-top:clamp(40px,7vh,72px)}
.root .person+.person{margin-top:clamp(28px,5vh,48px)}
.root .person .name{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,1.3rem + .6vw,30px);line-height:1.3;color:var(--fg-strong)}
.root .person .mail{display:inline-block;margin-top:.2rem;font-family:var(--font-body);font-size:15px;letter-spacing:.02em;color:var(--accent);text-decoration:none;min-height:44px;line-height:44px}
@media (prefers-reduced-motion:reduce){.root .hero .bg,.root .hero .hair,.root .hero .meta,.root .gate,.root .site-head,.root .hero .tb{transition:none!important}}

/* ---------- 전체 가운데 정렬 (사용자 10/16 14:35): 요약 문단 · 테마 머리 · 카드(이미지와 캡션 한 열 가운데, 834+ 지그재그 해제) · 간주 글 · 서랍 · 연락처 ---------- */
.root .summary{align-items:center;text-align:center}
.root .summary .stext{margin:0 auto;text-align:center}
.root .summary .stext p{margin:0}
.root .summary .stext p+p{margin-top:1.25em}
.root .thead{text-align:center}
.root.v10 .card{display:block}
.root.v10 .card .ib{margin:0 auto}
.root.v10 .card.wide .ib{width:min(100%,900px)}
.root.v10 .card .ct{display:block;margin:16px auto 0;max-width:34rem;width:auto;text-align:center}
.root.v10 .card .ct::before{margin:0 auto 12px}
.root.v10 .card .ct.pin{align-self:auto}
.root .contacts .wrap{text-align:center}

/* ======================================================================
   v2 GL · 컨셉 ③ 하이브리드 (W-web 2026-10-16, v2/web/GL-API.md) + S5 장면 문법 (10/19, v2/briefs/S5-SCENE.md)
   고정 캔버스 1장(#gl, gl/hub.js가 body 맨 앞에 넣는다)이 본문 아래·html 바탕 위에 깔리고, 창([data-gl])마다 실시간 장면을 그린다.
   폴백이 먼저: 창의 폴백 이미지는 그 창의 첫 프레임 뒤(.gl-on)에만 사라진다. html.gl-off(모션 감소 · WebGL2 없음 · 저fps · 오류)면 폴백 이미지 그대로.
   S5 블록 3종: T(읽는 글, 단색 바탕, 움직임 0, 키커 + 제목 + 본문 ≤ 34rem, 더보기 없음) · I(정지 이미지 = v10 카드 그대로) ·
   S(장면: 높이 = 100svh × (단계 N + 1), 무대 = sticky 100svh, 자막 슬롯 = 무대 아래 끝(안전 영역 + 16px)에 한 번에 하나). 단계 · 자막 교체 · 영상 재생은 gl/scene.js.
   S 높이는 모션 설정만 따른다(GL 유무와 같아 켜고 꺼도 스크롤이 튀지 않는다). 모션 감소 · JS 없음(noscript) = 정적: 무대는 제 높이, 자막은 목록으로 나열.
   ====================================================================== */
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
html.gl-live #gl{opacity:1}
.v2 main{position:relative;z-index:1}
/* 히어로 창 = 히어로만(S5: 요약은 창 밖 T). GL이면 히어로 렌더(img4-21) 대신 실시간 큐브 */
.v2 .glw-hero{position:relative}
.v2 .hero{min-height:100vh;min-height:100svh}   /* S5 v1.1: dvh는 iOS 툴바가 접고 펼 때마다 히어로 높이를 바꿔 아래 장면이 스크롤 없이 단계를 넘는다(내부 리뷰 PH-01) → svh(공용 base.css의 100dvh를 v2에서만 덮음) */
.v2 .glw-hero .hero .bg img{transition:filter 2.5s cubic-bezier(.2,.6,.2,1),transform 2.5s cubic-bezier(.2,.6,.2,1),opacity 1.2s ease}
.v2 .glw-hero.gl-on .hero{background:transparent}
.v2 .glw-hero.gl-on .hero .bg img{opacity:0}
.v2 .glw-hero.gl-on .hero .bg{background-image:none!important;box-shadow:none!important}   /* app.js가 .bg에 깐 LQIP가 투명해진 렌더 뒤로 비치지 않게(w1-3 계열) + v1 가로 화면 inset 그림자(.86)가 캔버스를 어둡게 덮지 않게 */
/* hidden 속성이 이긴다(10/18, Astra A02): .root.v10 .card{display:block} 같은 규칙이 브라우저 기본 [hidden]{display:none}을 덮지 않게(재료가 빠진 영상 무대는 자리째 숨는다) */
.v2 [hidden]{display:none!important}
/* ---------- T · 읽는 글 ---------- */
.v2 [data-blk=t]{position:relative;background:var(--bg)}
.v2 .theme>.blk-t{padding-top:clamp(36px,6vh,72px)}
.v2 .blk-t .kicker{color:var(--accent);max-width:34rem;margin:0 auto 1.1rem}
.v2 .blk-t .tbody{max-width:34rem;margin:0 auto}
.v2 .blk-t .tbody p{line-height:1.85}
.v2 .blk-t .tbody p+p{margin-top:1em}
.v2 .blk-t .tbody h3{margin:2.2rem 0 .7rem}
.v2 .blk-t .tbody h3:first-child{margin-top:0}
/* 용어(끝 한 곳): 작은 글, 834+ 2열 */
.v2 .terms-t{padding-top:clamp(96px,16vh,180px)}
.v2 .terms-t .kicker,.v2 .terms{max-width:34rem}
.v2 .terms{display:grid;grid-template-columns:minmax(0,1fr);gap:1.15rem 2.4rem;margin:0 auto}
.v2 .terms dt{font-family:var(--font-display);font-weight:500;color:var(--accent);line-height:1.4}
.v2 .terms dd{margin:.25rem 0 0;font-size:var(--fs-small);line-height:1.7;color:var(--fg-muted)}
@media (min-width:834px){.v2 .terms-t .kicker,.v2 .terms{max-width:58rem}.v2 .terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- S · 장면 ---------- */
.v2 .theme>.blk-s{margin-top:clamp(40px,7vh,80px)}
.v2 .blk-s{position:relative}
.v2 .blk-s .stage{position:relative;overflow:hidden}
.v2 .blk-s .pc-fallback{position:relative;inset:auto;display:block;width:100%;height:70vh;height:70svh;max-width:none;object-fit:cover;object-position:var(--op,50% 50%);transition:opacity 1.2s ease}
.v2 .blk-s .stage.gl-on{background-color:transparent}
.v2 .blk-s .stage.gl-on .pc-fallback{opacity:0}
.v2 .blk-s .scaps{position:relative;z-index:4;max-width:34rem;margin:0 auto;padding:14px var(--pad) 0}
.v2 .blk-s .scap{font-family:var(--font-body);font-weight:500;font-size:15px;line-height:1.55;color:var(--fg-strong);text-align:center}
.v2 .blk-s .scap+.scap{margin-top:.4rem}
/* 영상 무대(cine.js가 포스터를 .ib 배경으로 깐다: 재생 전 · 오류 · 모션 감소) */
.v2 .blk-v .stage{padding:0 var(--pad)}
.v2 .blk-v .ib.cv{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/9);width:min(100%,900px);margin:0 auto;background:var(--panel-alt) center/cover no-repeat}
.v2 .blk-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2 .blk-v.cine-err video{visibility:hidden}
@media (prefers-reduced-motion:reduce){.v2 .blk-v video{visibility:hidden}}   /* 모션 감소 = 포스터: 재생 중에 모션 감소를 켜도 멈춘 프레임 대신 cine.js가 깐 배경 포스터(Astra r6 S6-03) */
@media (prefers-reduced-motion:no-preference){
  html:not(.scene-static) .v2 .blk-s{height:calc(100vh * (var(--n,1) + 1));height:calc(100svh * (var(--n,1) + 1))}
  html:not(.scene-static) .v2 .blk-s .stage{position:sticky;top:0;height:100vh;height:100svh}
  html:not(.scene-static) .v2 .blk-s .pc-fallback{position:absolute;inset:0;height:100%}
  html:not(.scene-static) .v2 .blk-s .stage.glw::before,html:not(.scene-static) .v2 .blk-s .stage.glw::after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:2}
  html:not(.scene-static) .v2 .blk-s .stage.glw::before{top:0;height:min(14vh,120px);background:linear-gradient(to bottom,var(--bg),rgba(14,12,9,0))}   /* 앞 블록 바탕에서 무대로 이어지게 */
  html:not(.scene-static) .v2 .blk-s .stage.glw::after{bottom:0;height:min(32vh,260px);background:linear-gradient(to top,rgba(14,12,9,.92),rgba(14,12,9,0))}   /* 자막이 밝은 격자 위에서도 읽히게 */
  html:not(.scene-static) .v2 .blk-s .scaps{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 16px);max-width:none;margin:0;padding:0}
  html:not(.scene-static) .v2 .blk-s .scap{position:absolute;left:var(--pad);right:var(--pad);bottom:0;max-width:34rem;margin:0 auto;opacity:0;transition:opacity .18s ease;text-shadow:0 1px 12px rgba(14,12,9,.9)}
  html:not(.scene-static) .v2 .blk-s .scap+.scap{margin-top:0}
  html:not(.scene-static) .v2 .blk-s .scap.on,html:not(.scene-on):not(.scene-static) .v2 .blk-s .scap:first-child{opacity:1;transition-duration:.24s}   /* 교체 = 180 ms 페이드아웃 → 240 ms 페이드인(scene.js가 순서를 지킨다) */
  html:not(.scene-static) .v2 .blk-v .stage{display:flex;align-items:center;justify-content:center;background:var(--bg);padding:0 var(--pad) calc(env(safe-area-inset-bottom) + 88px)}
  html:not(.scene-static) .v2 .blk-v .ib.cv{width:min(100%,900px,calc((100vh - 200px) * 1.7778));width:min(100%,900px,calc((100svh - 200px) * 1.7778))}
}
/* S5 v1.1(내부 리뷰 · Astra r8 · r9): 정적 GL 장면(GL이 한 번도 못 켜짐 = html.gl-never: WebGL2 없음 · Save-Data · ?gl=0 · 빈 렌더 …) = 모션 감소와 같은 정적 배치(폴백 이미지 + 자막 목록). 영상 장면은 그대로 */
html.gl-never .v2 .blk-s:not(.blk-v){height:auto}
html.gl-never .v2 .blk-s:not(.blk-v) .stage{position:relative;top:auto;height:auto}
html.gl-never .v2 .blk-s:not(.blk-v) .pc-fallback{position:relative;inset:auto;height:70vh;height:70svh}
html.gl-never .v2 .blk-s:not(.blk-v) .stage.glw::before,html.gl-never .v2 .blk-s:not(.blk-v) .stage.glw::after{content:none}
html.gl-never .v2 .blk-s:not(.blk-v) .scaps{position:relative;left:auto;right:auto;bottom:auto;max-width:34rem;margin:0 auto;padding:14px var(--pad) 0}
html.gl-never .v2 .blk-s:not(.blk-v) .scap{position:relative;left:auto;right:auto;bottom:auto;opacity:1;text-shadow:none}
html.gl-never .v2 .blk-s:not(.blk-v) .scap+.scap{margin-top:.4rem}
/* 자막을 바로 바꿀 때(처음 · 점프) 전환을 끈다: 나가는 자막의 페이드가 들어오는 자막과 겹치지 않게(Astra r8 S8-02) */
.v2 .blk-s.cap-now .scap{transition:none!important}
/* 자동재생이 막히면(iOS 저전력 · NotAllowedError) 영상 대신 포스터만, iOS 기본 재생 단추를 띄우지 않는다(내부 리뷰 PH-04) */
.v2 .blk-v.cine-blocked video{visibility:hidden}
.v2 .blk-v video::-webkit-media-controls,.v2 .blk-v video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* 폰 가로(낮은 화면): 영상을 머리 아래 · 자막 한 줄 위만 비우고 크게(PH-02) */
@media (prefers-reduced-motion:no-preference) and (orientation:landscape) and (max-height:500px){
  html:not(.scene-static) .v2 .blk-v .stage{padding:calc(var(--head-h) + var(--safe-t)) var(--pad) calc(env(safe-area-inset-bottom) + 48px)}
  html:not(.scene-static) .v2 .blk-v .ib.cv{width:min(100%,900px,calc((100vh - var(--head-h) - 64px) * 1.7778));width:min(100%,900px,calc((100svh - var(--head-h) - 64px) * 1.7778))}
}
/* svh가 없는 브라우저(iOS 15.0~15.3 등): 100vh 무대가 펼쳐진 툴바 밑으로 내려가므로 자막을 툴바 위로(PH-05) */
@supports not (height:1svh){html:not(.scene-static) .v2 .blk-s .scaps{bottom:calc(env(safe-area-inset-bottom) + 96px)}}
/* 좁은 폰(< 360 px): 가장 긴 자막도 두 줄 안에(FA-05) */
@media (max-width:359px){.v2 .blk-s .scap{font-size:14px}}
/* T 안의 두 번째 키커(과정 → 쉬운 설명) · 용어 머리(h2.kicker, 화면 낭독기 제목 탐색) */
.v2 .blk-t .tbody .kicker{max-width:none;margin:2.4rem 0 .9rem}
.v2 .blk-t .tbody .kicker:first-child{margin-top:0}
.v2 h2.kicker{font-family:var(--font-body);font-weight:400;font-size:var(--fs-kicker);line-height:1.4;letter-spacing:var(--ls-kicker);text-transform:uppercase}

/* ======================================================================
   S6 최종 수정 (10/20, v2/briefs/S6-FINAL.md · 사용자 폰 확인 07:5x): 헤더 = 섹션 내비 한 줄 + 오른쪽 언어 토글 · 섹션 제목 슬라이드 5(100svh, 스냅) ·
   게이트 KOR | ENG 숨쉬기 · 세로 화면 자막 = 시각물 아래 끝과 화면 아래 끝(안전 영역 제외)의 가운데 · 끝 = 제목 · 이름 · 처음으로 3행
   ====================================================================== */
/* 헤더: 브랜드 없음. 내비는 가운데 한 줄(줄바꿈 0), 구분점은 가상 요소. 토글은 오른쪽 끝 44 px */
.v2 .site-head{justify-content:center;padding:var(--safe-t) 46px 0 10px}
.v2 .snav{display:flex;align-items:center;min-width:0;white-space:nowrap;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.1em}
.v2 .snav .sn{--p:0;display:inline-flex;align-items:center;min-height:44px;color:var(--fg-muted);text-decoration:none}
.v2 .snav .sn+.sn::before{content:"\00B7";padding:0 .5em;color:rgba(184,173,156,.45);letter-spacing:0}
/* 채움: 지금 섹션 = 진행도(--p, main.js)만큼 왼쪽부터 금색 · 지난 섹션 = 채운 채 흐리게 · 다음 섹션 = 흐리게(40 %) */
.v2 .snav .sn span{background:linear-gradient(90deg,var(--accent) calc(var(--p) * 100%),rgba(184,173,156,.4) calc(var(--p) * 100%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.v2 .snav .sn.past span{background:none;color:var(--fg-muted);-webkit-text-fill-color:currentColor}
.v2 .snav .sn:focus-visible{outline-offset:-2px}
.v2 .ltog{position:absolute;top:var(--safe-t);right:max(2px,var(--safe-r));width:44px;height:var(--head-h);display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--fg-muted)}
.v2 .ltog:hover,.v2 .ltog:focus-visible{color:var(--accent)}
html[data-lang=en] .v2 .ltog .lk,html:not([data-lang=en]) .v2 .ltog .le{display:none}
html[data-lang=en] .v2 .snav{font-size:11px;letter-spacing:.04em;text-transform:lowercase}
html[data-lang=en] .v2 .snav .sn+.sn::before{padding:0 .42em}
html:not([data-lang=en]) .v2 .snav{font-size:14px;letter-spacing:.14em}
@media (max-width:374px){html[data-lang=en] .v2 .snav{font-size:10.5px;letter-spacing:.03em}}
@media (min-width:600px){html:not([data-lang=en]) .v2 .snav{font-size:15px;letter-spacing:.16em}html[data-lang=en] .v2 .snav{font-size:13px;letter-spacing:.08em}.v2 .snav .sn+.sn::before{padding:0 .8em}}
/* 섹션 제목 슬라이드: 100svh(dvh 금지 · 툴바 접힘에 흔들리지 않게), 제목 가운데, 검정 바탕, 위 괘선 없음. 스냅 정지점은 이것뿐 */
.v2 .theme{padding-top:0}
.v2 .thead{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;border-top:0;padding-top:0;padding-bottom:0;background:var(--bg);scroll-snap-align:start}
.v2 .thead .tname{font-size:clamp(34px,9vw,68px);letter-spacing:.04em}
html[data-lang=en] .v2 .thead .tname{letter-spacing:.06em}
html.snap-css:not(.scene-static):not(.gated){scroll-snap-type:y proximity}   /* 터치(Lenis 없음) = 브라우저 근접 스냅. 데스크톱(Lenis)은 gl/scene.js 휠 스냅 */
.v2 .summary{min-height:0;padding-top:clamp(36px,6vh,72px);padding-bottom:0}
/* 게이트 숨쉬기: 두 버튼 같은 위상, 모션 감소면 정지, 게이트가 끝나면(.gated 없음) 애니 없음. 버튼 안 글자(span)가 숨쉰다 = 버튼 상자는 그대로(누르는 자리 고정 · 자동화 클릭 안정) */
@keyframes gbreath{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.v2 .gate .gbtn>span{display:inline-block}
html.gated .v2 .gate .gbtn>span{animation:gbreath 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.gated .v2 .gate .gbtn>span{animation:none}}
/* EN 히어로: 제목은 KO와 같은 두 줄(곁맞음 + cohearence, 원제 = 이름과 같은 취급, 오케 D-59) */
/* 세로 화면(폰 · 태블릿 세로) 자막 띠: 영상은 화면 가운데, 자막 세로 중심 = 영상 아래 끝 ~ 화면 아래 끝(안전 영역 제외)의 가운데.
   GL 무대(전면 캔버스)는 시각물 = 가운데 정사각형(한 변 100vw)으로 보고 그 아래 띠의 가운데. 가로 · 데스크톱은 S5 규칙(아래 16 px) 그대로 */
@media (prefers-reduced-motion:no-preference) and (orientation:portrait){
  html:not(.scene-static) .v2 .blk-v .stage{padding:0 var(--pad) env(safe-area-inset-bottom)}
  html:not(.scene-static) .v2 .blk-v .ib.cv{width:min(100%,900px)}
  html:not(.scene-static) .v2 .blk-v .scaps{top:calc((100% - env(safe-area-inset-bottom)) / 2 + min(100vw - 2 * var(--pad), 900px) * 9 / 32);bottom:env(safe-area-inset-bottom)}
  html:not(.scene-static):not(.gl-never) .v2 .blk-s:not(.blk-v) .scaps{top:calc(50% + 50vw);bottom:env(safe-area-inset-bottom)}
  html:not(.scene-static) .v2 .blk-v .scap,html:not(.scene-static):not(.gl-never) .v2 .blk-s:not(.blk-v) .scap{top:50%;bottom:auto;transform:translateY(-50%)}
}
@supports not (height:1svh){@media (prefers-reduced-motion:no-preference) and (orientation:portrait){html:not(.scene-static) .v2 .blk-s .scaps{bottom:calc(env(safe-area-inset-bottom) + 80px)}}}
/* 끝: 가운데 3행 = 곁맞음, 2026(제목 서체) → 이름(1/2 크기) · 이메일 두 사람 → 처음으로 */
.v2 .contacts .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.v2 .contacts .cline{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,1.3rem + .6vw,30px);line-height:1.3;letter-spacing:.02em;color:var(--fg-strong)}
.v2 .contacts .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;margin-top:clamp(26px,4.6vh,44px);width:100%;max-width:34rem}   /* 2행 = 두 사람 한 줄(Astra r11 V11-02) */
@media (min-width:560px){.v2 .contacts .people{grid-template-columns:repeat(2,auto);justify-content:center;column-gap:clamp(32px,6vw,72px);width:auto}}
.v2 .contacts .person+.person{margin-top:0}
.v2 .contacts .person .name{font-size:clamp(11px,.65rem + .3vw,15px);letter-spacing:.08em;color:var(--fg)}
.v2 .contacts .person .mail{margin-top:0;font-size:14px;min-height:40px;line-height:40px;overflow-wrap:anywhere}
@media (max-width:559px){.v2 .contacts .person .mail{font-size:12px;letter-spacing:0}}
/* 캡션 줄바꿈 균형(마지막 줄에 한 글자만 남지 않게, Astra r11 V11-03) */
.v2 .card .cap,.v2 .blk-s .scap{text-wrap:balance}
.v2 .etop .totop{min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.16em;color:var(--accent)}
.v2 .etop .totop:hover{color:var(--fg-strong)}

/* ======================================================================
   S7A 마이너 수정 (10/20, v2/briefs/S7A-MINOR.md): A 게이트 위 Digital Brochure · C I 카드 캡션 없음(마크업에서 뺌, alt만) ·
   I 끝 = 한 화면 슬라이드 2(곁맞음, 2026 + 이름 · 이메일 → 처음으로), 첫 슬라이드는 들어올 때 1회 점등 연출(main.js §10)
   ====================================================================== */
/* A: KOR | ENG 바로 위, 작고 흐리게(숨쉬기 대상 아님), 게이트와 함께 사라진다 */
.v2 .brochure{position:absolute;left:0;right:0;bottom:calc(11dvh + var(--safe-b) + 50px);z-index:3;margin:0;text-align:center;font-family:var(--font-body);font-weight:400;font-size:11.5px;line-height:1.4;letter-spacing:.3em;padding-left:.3em;color:rgba(255,255,255,.45);pointer-events:none;transition:opacity .7s ease,visibility .7s}
html.gated:not(.fonts-in) .v2 .brochure{opacity:0}
html:not(.gated) .v2 .brochure{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.v2 .brochure{transition:none}}
/* C: 캡션이 없는 카드 = 이미지 자체가 블록. 카드 사이 · 묶음 위 여백을 이미지 기준으로 줄인다(390에서 카드 아래 큰 빈칸 없음) */
.v2 .card+.card{margin-top:clamp(40px,7vh,72px)}
.root.v2 .theme .grp{padding-top:clamp(36px,6vh,64px)}
/* I: 끝 슬라이드 2장(100svh, 가운데, 스냅). 첫 장 = 제목 · 괘선 · 두 사람, 둘째 장 = 처음으로 버튼만 */
.v2 .eslide{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:0;background:var(--bg);scroll-snap-align:start}
.root.v2 .contacts.eslide{padding:0}
.root.v2 .contacts.eslide .wrap{border-top:0;padding-top:0;width:100%}
.v2 .contacts .ehair{display:block;width:48px;height:1px;background:var(--accent);margin:clamp(14px,2.2svh,22px) auto 0}
.v2 .contacts.eslide .people{margin-top:clamp(18px,3svh,30px)}
.v2 .contacts.eslide::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 52%,rgba(233,169,58,.11),rgba(233,169,58,.03) 45%,rgba(14,12,9,0) 72%);opacity:0;transition:opacity 2.5s cubic-bezier(.2,.6,.2,1)}
.v2 .contacts.eslide>.wrap{position:relative}
/* 등장 연출(html.end-anim = JS가 있고 모션 감소가 아닐 때만 숨겨 두고, .lit에서 차례로): 제목 페이드업 1.2 s → 괘선 자라남 → 이름 · 이메일 .3 s 간격 · 배경 옅은 호박빛 */
html.end-anim .v2 .contacts.eslide .cline{opacity:0;transform:translateY(18px)}
html.end-anim .v2 .contacts.eslide .ehair{width:0}
html.end-anim .v2 .contacts.eslide .person .name,html.end-anim .v2 .contacts.eslide .person .mail{opacity:0}
html.end-anim .v2 .contacts.eslide.lit::before{opacity:1}
html.end-anim .v2 .contacts.eslide.lit .cline{opacity:1;transform:none;transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.6,.2,1)}
html.end-anim .v2 .contacts.eslide.lit .ehair{width:48px;transition:width .8s cubic-bezier(.2,.6,.2,1) .9s}
html.end-anim .v2 .contacts.eslide.lit .person .name,html.end-anim .v2 .contacts.eslide.lit .person .mail{opacity:1;transition:opacity .6s ease}
html.end-anim .v2 .contacts.eslide.lit .person:nth-child(1) .name{transition-delay:1.5s}
html.end-anim .v2 .contacts.eslide.lit .person:nth-child(1) .mail{transition-delay:1.8s}
html.end-anim .v2 .contacts.eslide.lit .person:nth-child(2) .name{transition-delay:2.1s}
html.end-anim .v2 .contacts.eslide.lit .person:nth-child(2) .mail{transition-delay:2.4s}
html:not(.end-anim) .v2 .contacts.eslide::before{opacity:1}
.v2 .etop .totop{margin:0}
/* 배포된 S6 루트 마크업 호환(루트 HTML은 스냅숏이지만 /v2/*.css · js는 같은 파일을 실시간으로 쓴다): 옛 끝 섹션의 처음으로 버튼 */
.v2 .contacts .totop{margin-top:clamp(30px,5.4vh,56px);min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:.16em;color:var(--accent)}
.v2 .contacts .totop:hover{color:var(--fg-strong)}


/* ======================================================================
   S7A B2 (10/20, v2/briefs/S7A-MINOR.md §2): G 무대 · 히어로 아래끝 페이드가 상자 안에서 바탕색(--bg)까지 끝난다 = 경계 하드엣지 0
   (위로 · 아래로 스크롤 모두, iOS 툴바가 접혀 100svh 무대 아래가 드러날 때도). 사용자 스크린샷 v2/review/s7/IMG_2954.jpg: 큐브 무대 아래 스크림 끝 알파 .92 → 격자 8 % 비침 + 블룸 = 수평 경계
   ====================================================================== */
/* S7A B4 K(사용자: EN에서도 보임 · 기준 ≤ 0.6/255): 아래 끝에 바탕색만인 띠를 두고(무대 8 % ≈ 21 px · 히어로 4 % ≈ 34 px) 그 위에서 페이드 → 마지막 줄에 그림 · 블룸이 새지 않는다 */
html:not(.scene-static) .v2 .blk-s .stage.glw::after{background:linear-gradient(to top,var(--bg) 0,var(--bg) 8%,rgba(14,12,9,.92) 24%,rgba(14,12,9,0) 100%)}
.v2 .hero .scrim{background:linear-gradient(to top,var(--bg) 0,var(--bg) 4%,rgba(14,12,9,.88) 9%,rgba(14,12,9,.5) 17%,rgba(14,12,9,.12) 27%,rgba(14,12,9,0) 36%)}

/* S7A B5 P(S7A-MINOR §8 · §9-Q5): I 블록 이미지 경계 블렌딩. ① .ib 4변 페더 = 가로 · 세로 그라디언트 2장의 교집합(폭 clamp(20px, 7%, 56px), 변당 ≤ 8 %;
   바깥 6 px는 완전 투명 + 그 안은 smoothstep 근사 4구간 — 경계 안 1~5 px 띠가 바탕과 같아야 경계 대비 ≤ 0.6, 도우미 --cards: 직선 페더는 밝은 이미지에서 17.8)
   ② 끝 색 후광 = .card::before(이미지 상자 + 사방 8 %, 가로는 .wrap 바깥 상자까지 = 화면 밖으로 안 나감(390에서 8 px 넘침 → 모바일 줌아웃, 도우미 qc_v2), --edge = images.js edge · main.js §11, 이미지 뒤, 불투명 .45 → .32(§9-Q5 ±30 % 안: 390 · 430에서 후광이 거터 20 px 안에서 끝나 기울기가 경계 대비로 잡혔다, 가장 밝은 img2-14 0.74)). .card.fit은 panel-alt 상자 대신 같은 페더 + 후광. blur 없음 */
.v2 .card{--fe:min(clamp(20px,7%,56px),8%);--ibw:min(100%,calc((100svh - 72px) * .8));
  --fs:transparent 0,transparent 6px,rgba(0,0,0,.16) calc(6px + (var(--fe) - 6px) * .25),rgba(0,0,0,.5) calc(6px + (var(--fe) - 6px) * .5),rgba(0,0,0,.84) calc(6px + (var(--fe) - 6px) * .75),#000 var(--fe),#000 calc(100% - var(--fe)),rgba(0,0,0,.84) calc(100% - 6px - (var(--fe) - 6px) * .75),rgba(0,0,0,.5) calc(100% - 6px - (var(--fe) - 6px) * .5),rgba(0,0,0,.16) calc(100% - 6px - (var(--fe) - 6px) * .25),transparent calc(100% - 6px),transparent 100%}
.v2 .card.wide{--ibw:min(100%,900px)}
.v2 .card::before{content:"";position:absolute;top:-8%;bottom:-8%;left:50%;width:min(calc(var(--ibw) * 1.16),calc(100% + 2 * var(--pad)));transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--edge,transparent) 0,transparent 70%);opacity:.32;pointer-events:none;z-index:1}
.v2 .card .ib{z-index:1}   /* 후광이 다음 블록(T · 제목 슬라이드 · 끝 슬라이드 = 위치 + 바탕색)에 아래쪽이 덮여 카드 아래끝에서 잘렸다(경계 2.2) → main 안에서 후광 1 · 이미지 1(뒤에 오니 위) */
.v2 .card .ib{-webkit-mask-image:linear-gradient(90deg,var(--fs)),linear-gradient(180deg,var(--fs));-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,var(--fs)),linear-gradient(180deg,var(--fs));mask-composite:intersect}
.v2 .card.fit .ib{background:none!important}