/* 인트로 AB — 시안 B(도면 렌즈)의 페이지 위에 시안 A(선의 장)의 표지. 바탕은 B 의 시트. 글꼴: Pretendard(한글 부분집합 두 벌, 프로젝트 style.css 와 같은 선언) + IBM Plex Sans/Mono(Google Fonts)
   (R4b) 통합 페이지 — studio.html 은 시연(library.css)을 함께 싣는다. 이 파일은 인트로 덩어리(.studio-intro) 안으로만 닿는다:
   토큰은 :root 가 아니라 .studio-intro 에(값이 다른 같은 이름 — --gutter · --fs-h2 · --halo … — 이 시연을 바꾸지 않게), 요소 선택자(h2 · main)와 겹치는 이름(.ko · .nw · :focus-visible)은 덩어리 안으로,
   시연과 같은 클래스 이름은 인트로 쪽을 바꿨다(.i-copy → .i-copy · .i-btn → .i-btn · .i-skip → .i-skip · .i-top → .i-top · 캔버스 #igl → #igl). 전역 초기화(* · body)는 library.css 의 같은 규칙을 쓴다 */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/pretendard-ext.woff2') format('woff2');
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF;
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/pretendard-core.woff2') format('woff2');
  unicode-range: U+AC00, U+AC04, U+AC15, U+AC19, U+AC1C-AC1D, U+AC70, U+AC74, U+AC80, U+AC83, U+ACAA, U+ACB0, U+ACB9, U+ACBD, U+ACC4, U+ACE0, U+ACF5, U+ACFC, U+AD00, U+AD11, U+AD50, U+AD6C, U+ADF8, U+ADFC, U+AE08-AE09, U+AE30, U+AE4C, U+AED8, U+B00C, U+B098, U+B0B4, U+B0C5, U+B108, U+B17C, U+B193, U+B204, U+B208, U+B274, U+B294, U+B298, U+B2A5, U+B2C8, U+B2CC, U+B2E4, U+B2E8, U+B2EB, U+B2F4-B2F5, U+B2F9, U+B300, U+B358, U+B370, U+B3C4-B3C5, U+B3D9, U+B410, U+B418, U+B41C, U+B429, U+B450, U+B461, U+B4DC, U+B4E0, U+B4E4, U+B4ED, U+B4F1, U+B514, U+B5A4, U+B6F0, U+B77C-B77D, U+B78C, U+B798, U+B7B5, U+B7C9, U+B824-B825, U+B82C, U+B85C-B85D, U+B8B0, U+B958, U+B974, U+B97C, U+B984, U+B9AC, U+B9B0, U+B9BD, U+B9BF, U+B9C1, U+B9C8, U+B9CC, U+B9DE, U+B9E4-B9E5, U+BA3C, U+BA54, U+BA70, U+BA74, U+BA85, U+BAA8-BAA9, U+BB34, U+BB38, U+BBF8, U+BC00, U+BC0D, U+BC14, U+BC16, U+BC18, U+BC1C, U+BC29, U+BC84, U+BC88, U+BC94, U+BCA0, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BD80, U+BD84, U+BE44, U+C0AC-C0AD, U+C0B0, U+C0B4, U+C0C1, U+C0DD, U+C0F7, U+C11C-C11D, U+C120, U+C124, U+C131, U+C138, U+C13C, U+C18C-C18D, U+C218, U+C21C, U+C220, U+C2A4, U+C2B5, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C4F0, U+C544, U+C548, U+C54A, U+C54C, U+C558-C559, U+C571, U+C57D, U+C591, U+C5B4, U+C5BC, U+C5C5, U+C5C7-C5C8, U+C5D0, U+C5D4, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C601, U+C624, U+C62C, U+C640, U+C694, U+C6A9, U+C6B0, U+C6B4, U+C6CC, U+C6D0, U+C6E8, U+C704, U+C720, U+C728, U+C73C, U+C740, U+C744, U+C758, U+C774, U+C778, U+C77C, U+C785, U+C788, U+C790-C791, U+C794, U+C7A5, U+C7AC, U+C800-C801, U+C804, U+C810-C811, U+C815, U+C81C-C81D, U+C84C, U+C870, U+C874, U+C878, U+C88C, U+C8FC, U+C900, U+C904, U+C911, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9DD, U+CC28, U+CC3E, U+CC44, U+CC98, U+CCAD, U+CCB4, U+CCD0, U+CD94-CD95, U+CD9C, U+CDB0, U+CE21, U+CE35, U+CE59, U+CE68, U+CE6D, U+CE94, U+CEA0, U+D06C, U+D0D5, U+D0DC-D0DD, U+D130, U+D138, U+D15C, U+D1B5, U+D29C, U+D2B8-D2B9, U+D300, U+D30C, U+D310, U+D37C, U+D3B4, U+D3B8, U+D3C9, U+D3EC, U+D45C, U+D488, U+D504, U+D50C, U+D53C, U+D544, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D574, U+D589, U+D5D8, U+D604, U+D611, U+D615, U+D638, U+D654-D655, U+D658, U+D65C, U+D68C, U+D6A8, U+D6D1, U+D750;
}


.studio-intro {
  --bg: #05070c;
  --text-primary: #e8eaef;
  --text-secondary: #aab2c0;
  --text-tertiary: #8e97a6;
  --text-quaternary: #7a8494;
  --accent: #5b8cff;
  --accent-solid: #3563d6;
  --accent-solid-hover: #3f6fe8;
  --accent-rgb: 91, 140, 255;
  --moved: #ffb454;
  --added: #5ee0ff;
  --deleted: #ff6b8b;
  --plate: rgba(8, 11, 18, 0.8);
  --plate-edge: rgba(150, 180, 230, 0.14);
  --shadow-accent: 0 10px 30px -8px rgba(53, 99, 214, 0.55);
  --font-sans: 'IBM Plex Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ko: 'Pretendard', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Pretendard', 'SF Mono', Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(20px, 4.2vw, 72px);
  --fs-h2: clamp(30px, 1.45vw + 1.5vh, 58px);
  --fs-st: clamp(26px, 1.3vw + 1.35vh, 50px);
  --fs-p: clamp(15px, 0.25vw + 0.3vh + 11px, 19px);
  --halo: 0 0 1px rgba(5, 7, 12, 0.9), 0 0 14px rgba(5, 7, 12, 0.75);
}

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
.studio-intro { color: var(--text-primary); font-family: var(--font-sans); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.studio-intro ::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }
.studio-intro .ko { font-family: var(--font-ko); letter-spacing: 0.03em; }
.studio-intro :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip-a11y { position: fixed; left: 50%; top: 12px; z-index: 60; transform: translate(-50%, calc(-100% - 24px)); padding: 0.7rem 1.3rem;
  font: 600 12.5px/1.2 'Pretendard', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.04em; color: #fff; background: var(--accent-solid); border-radius: 3px; text-decoration: none; transition: transform 0.2s var(--ease-out); }
.skip-a11y:focus { transform: translate(-50%, 0); }
.studio-intro main:focus { outline: none; }

/* ── 캔버스 · 가림막 ── */
/* (R4b) z 1 — 시연 무대(.stage — contain: layout 이라 z auto 의 쌓임 맥락, 문서 순서상 뒤)보다 위. M2 에서 불투명도(--io, stage.js 가 스크롤의 함수로 준다)로 걷혀 아래의 장면이 드러난다 */
#igl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 1; opacity: 0; transition: opacity 0.3s var(--ease-out); }
html.gl-on #igl { opacity: 1; }
html.rm #igl { transition: opacity 0.26s linear; }
html.rm.rm-out #igl { opacity: 0; }
html.still #igl, html.still .studio-intro * { transition: none !important; animation: none !important; }
html.no-gl #igl { display: none; }

.scrim { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.scrim i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.sc-l { background: linear-gradient(90deg, rgba(5, 7, 12, 0.9) 0%, rgba(5, 7, 12, 0.74) 24%, rgba(5, 7, 12, 0.28) 44%, rgba(5, 7, 12, 0) 58%); }
.sc-r { background: linear-gradient(270deg, rgba(5, 7, 12, 0.9) 0%, rgba(5, 7, 12, 0.74) 24%, rgba(5, 7, 12, 0.28) 44%, rgba(5, 7, 12, 0) 58%); }
.sc-c { background: radial-gradient(ellipse 46% 40% at 50% 72%, rgba(5, 7, 12, 0.86) 0%, rgba(5, 7, 12, 0.6) 48%, rgba(5, 7, 12, 0) 100%); }
html[data-sec="0"] .sc-l, html[data-sec="1"] .sc-l, html[data-sec="2"] .sc-l, html[data-sec="4"] .sc-l { opacity: 1; }
html[data-sec="3"] .sc-r { opacity: 1; }
html[data-sec="5"] .sc-c { opacity: 1; }
/* 표지(펜이 긋는 동안)에는 어둠막이 없다 — 글이 도면 표지 자리로 옮겨 가는 만큼 짙어진다(main.js 가 --sc0 을 스크롤의 함수로 준다) */
html[data-sec="0"] .scrim .sc-l { opacity: var(--sc0, 0); transition: none; }
.scrim .sc-t { inset: 0 0 auto 0; height: 120px; opacity: 1; background: linear-gradient(180deg, rgba(5, 7, 12, 0.82) 0%, rgba(5, 7, 12, 0.5) 45%, rgba(5, 7, 12, 0) 100%); }

/* ── 렌즈 꼬리표 ── (R6d) 상자 없는 제도 주석 — 렌즈 테(45°)에서 나온 가는 인출선 + 글 밑(아래 자리는 글 위) 어깨선. intro.js 가 data-q(렌즈 네 모서리)를 준다 */
.lens-tag { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.35s var(--ease-out);
  padding: 3px 1px 5px; font: 500 10.5px/1.5 var(--font-mono); letter-spacing: 0.08em; color: #d6dce6;
  text-shadow: 0 0 3px rgba(5, 7, 12, 0.95), 0 0 9px rgba(5, 7, 12, 0.8); will-change: transform; }
.lens-tag.on { opacity: 1; }
.lens-tag span { display: block; }
.lens-tag .lt-b { color: var(--text-tertiary); letter-spacing: 0.06em; }
.lens-tag::before, .lens-tag::after { content: ''; position: absolute; height: 1px; background: rgba(214, 220, 230, 0.5); }
.lens-tag::after { left: 0; right: 0; bottom: 0; }
.lens-tag::before { width: 20px; transform-origin: 0 50%; left: 0; bottom: 0; transform: rotate(135deg); }
.lens-tag[data-q="1"], .lens-tag[data-q="3"] { text-align: right; }
.lens-tag[data-q="1"]::before { left: 100%; transform: rotate(45deg); }
.lens-tag[data-q="2"]::after, .lens-tag[data-q="3"]::after { top: 0; bottom: auto; }
.lens-tag[data-q="2"] { padding: 5px 1px 3px; }
.lens-tag[data-q="3"] { padding: 5px 1px 3px; }
.lens-tag[data-q="2"]::before { bottom: auto; top: 0; transform: rotate(-135deg); }
.lens-tag[data-q="3"]::before { bottom: auto; top: 0; left: 100%; transform: rotate(-45deg); }
html.rm .lens-tag { transition: opacity 0.26s linear; }
html.rm.rm-out .lens-tag { opacity: 0; }

/* ── 머리 ── */
.i-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px; pointer-events: none; }
.i-top > * { pointer-events: auto; }
.mark { display: block; padding: 6px 0; }
.mark svg { display: block; height: 13px; width: auto; fill: var(--text-primary); opacity: 0; transform: translateY(-4px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.past-hero .mark svg { opacity: 0.94; transform: none; }
.sheetno { display: none; }
.i-skip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; padding: 9px 13px 9px 15px; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; line-height: 1; color: var(--text-secondary); background: rgba(8, 11, 18, 0.62); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity 0.7s 0.2s var(--ease-out), color 0.25s, border-color 0.25s, background 0.25s; }
/* 표지의 등장 순서(시안 A) — 건너뛰기는 첫 획과 함께, 표제란·안내는 워드마크가 앉은 뒤. 키보드 초점은 언제나 보인다 */
html.gl-run:not(.gl-on):not(.skipin) .i-top .i-skip { opacity: 0; }
html.gl-run .i-top .i-skip:focus-visible { opacity: 1; }
.i-skip .ko { font-weight: 500; }
.i-skip svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease-out); }
.i-skip:hover { color: #fff; border-color: rgba(var(--accent-rgb), 0.6); background: rgba(20, 30, 58, 0.7); }
.i-skip:hover svg { transform: translateX(2px); }

/* ── 표제란(도면 서식 — 절 번호) ── */
.tb { position: fixed; right: var(--gutter); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 12; width: 264px; pointer-events: none;
  border: 1px solid rgba(200, 215, 240, 0.16); background: rgba(6, 8, 13, 0.8); transition: opacity 0.9s var(--ease-out);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; color: var(--text-tertiary); }
.tb-r1 { display: flex; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid rgba(200, 215, 240, 0.12); color: var(--text-secondary); }
.tb-k { color: var(--text-quaternary); }
.tb-r2 { display: grid; grid-template-columns: 0.9fr 1.6fr 0.8fr; }
.tb-r2 > div { padding: 8px 11px 9px; border-right: 1px solid rgba(200, 215, 240, 0.12); }
.tb-r2 > div:last-child { border-right: 0; }
.tb-r2 i { display: block; font-style: normal; font-size: 8.5px; color: var(--text-quaternary); margin-bottom: 7px; }
.tb-r2 b { font-weight: 500; font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-primary); white-space: nowrap; }
.tb-track { height: 2px; background: rgba(200, 215, 240, 0.08); }
.tb-bar { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
html.gl-run:not(.chrome) .tb { opacity: 0; }

/* ── 절 ── */
.studio-intro main { position: relative; z-index: 10; }
.sec { position: relative; height: calc(var(--h, 1) * 100vh); height: calc(var(--h, 1) * 100svh); }
.i-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0 var(--gutter); pointer-events: none; }
.i-copy { position: relative; max-width: min(34rem, 44vw); pointer-events: auto; text-shadow: var(--halo); }
.s-verit .i-pin { justify-content: flex-end; }
.s-verit .i-copy { max-width: min(30rem, 38vw); }

.i-copy > * { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); }
.sec.on .i-copy > * { opacity: 1; transform: none; }
.sec.on .i-copy > :nth-child(2) { transition-delay: 0.07s; }
.sec.on .i-copy > :nth-child(3) { transition-delay: 0.14s; }
.sec.on .i-copy > :nth-child(4) { transition-delay: 0.21s; }
.sec.on .i-copy > :nth-child(5) { transition-delay: 0.28s; }
html.rm .i-copy > * { transform: none; }
html.still .i-copy > * { opacity: 1; transform: none; }

.eyebrow .nt { text-transform: none; }   /* (R7) 제품명은 "Verit" 표기 그대로 — Verit 규칙("VERIT" 금지) */
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: rgba(var(--accent-rgb), 0.9); margin-right: 4px; }
.eyebrow span:first-child { color: #9db8ff; }
.eyebrow .arr { color: var(--text-quaternary); letter-spacing: 0; }

.studio-intro h2 { font-family: var(--font-ko); font-weight: 600; font-size: var(--fs-h2); line-height: 1.3; letter-spacing: 0.02em; color: var(--text-primary); }
.statement { font-size: var(--fs-st); line-height: 1.42; font-weight: 500; letter-spacing: 0.02em; color: #dfe3ea; }
.statement em { white-space: nowrap; font-style: normal; color: #fff; background: linear-gradient(transparent 62%, rgba(255, 107, 139, 0.32) 62%, rgba(255, 107, 139, 0.32) 92%, transparent 92%); padding: 0 0.04em; }
.body { margin-top: 24px; max-width: 29em; font-family: var(--font-ko); font-size: var(--fs-p); line-height: 1.82; letter-spacing: 0.025em; color: var(--text-secondary); }

/* 표지(S-00 COVER) — 처음엔 가운데(시안 A: 펜이 긋는 워드마크 + 표어), 스크롤하면 도면 표지 자리(왼쪽 아래)로 옮겨 앉는다.
   옮겨 앉기는 main.js 가 두 배치(.lay-cover 를 잠깐 붙여 잰 값) 사이를 transform 으로 잇는다 — 스크롤의 함수(시간 연출 없음).
   3D 가 돌면(.gl-run) 워드마크 글자는 비워 두고 선이 긋는다. 3D 가 없으면 그대로 보인다 */
.s-hero .i-pin { justify-content: center; align-items: center; }
.s-hero .i-copy { max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateY(-2.5vh); }
.s-hero .i-pin.lay-cover { justify-content: flex-start; align-items: flex-end; padding-bottom: clamp(96px, 17vh, 190px); }
.s-hero .i-pin.lay-cover .i-copy { align-items: flex-start; text-align: left; transform: none; }
.wm { line-height: 0; }
.h-wm { display: block; width: min(62vw, 1000px); height: auto; fill: #eef1f6; transform-origin: 0 0; }
.lay-cover .h-wm { width: clamp(300px, 34vw, 620px); }
html.gl-run .h-wm { fill: rgba(238, 241, 246, var(--wmf, 0)); }
/* 안전판이 글을 먼저 보인 뒤(느린 망) 3D 가 늦게 뜨면, 속이 찬 글자가 선 글자로 캔버스와 함께 천천히 바뀐다 */
html.gl-late .h-wm { transition: fill 0.45s var(--ease-out); }
.h-wm { filter: drop-shadow(0 0 22px rgba(5, 7, 12, 0.8)); }
.h-eb, .h-ld { transform-origin: 0 0; }
.h-eb { margin-bottom: clamp(30px, 5vh, 52px); }
.lay-cover .h-eb { margin-bottom: 26px; }
.lede { font-family: var(--font-ko); font-weight: 500; font-size: clamp(19px, 0.7vw + 0.75vh + 4px, 27px); line-height: 1.5; letter-spacing: 0.03em; color: #dfe3ea; }
.h-ld { margin-top: clamp(32px, 5.4vh, 60px); }
.lay-cover .h-ld { margin-top: clamp(22px, 2.6vh, 34px); }
.studio-intro .nw { white-space: nowrap; }
html .sec.s-hero .i-copy > * { transform: none; transition: opacity 1.1s var(--ease-out); }
html .sec.s-hero .i-copy > .h-eb { transition-delay: 0.25s; }
html.gl-run:not(.shown) .s-hero .h-eb, html.gl-run:not(.shown) .s-hero .h-ld { opacity: 0; }
html.still .s-hero .i-copy > * { opacity: 1; }
html.rm .s-hero .i-copy { transition: opacity 0.26s linear; }
html.rm.rm-out .s-hero .i-copy { opacity: 0 !important; }
.cue { position: absolute; left: var(--gutter); bottom: clamp(30px, 5vh, 52px); display: flex; align-items: center; gap: 14px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.18em; color: var(--text-quaternary); opacity: var(--xo, 1); transition: opacity 1s var(--ease-out); }
html.gl-on .cue { transition-duration: 0.35s; }
html.gl-run:not(.chrome) .cue { opacity: 0; }
html.past-hero .cue { opacity: 0; }
.cue-l { width: 1px; height: 30px; background: linear-gradient(rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), 0.9)); }
.cue-h { font-family: var(--font-ko); letter-spacing: 0.04em; font-size: 12px; font-weight: 400; color: var(--text-tertiary); padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0; transition: opacity 0.8s var(--ease-out); }
html.cover .cue-h { opacity: 1; }
html.no-gl .cue-h { display: none; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* DACID */
.report { margin-top: 30px; max-width: 27rem; border: 1px solid var(--plate-edge); background: rgba(7, 10, 17, 0.78); border-radius: 6px; padding: 13px 15px 12px; text-shadow: none; }
.r-h { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--text-tertiary); }
.r-ex { color: var(--text-quaternary); letter-spacing: 0.06em; }
.report ol { list-style: none; }
.report li { display: grid; grid-template-columns: 12px 38px 1fr; align-items: baseline; gap: 8px; padding: 6px 0; font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.04em; color: var(--text-secondary);
  opacity: 0.16; transform: translateX(-4px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.report li.on { opacity: 1; transform: none; }
.report li b { font: 600 12.5px/1.5 var(--font-ko); letter-spacing: 0.03em; color: var(--text-primary); }
.dot { width: 8px; height: 8px; border-radius: 2px; align-self: center; }
.dot.del { background: var(--deleted); } .dot.mov { background: var(--moved); } .dot.add { background: var(--added); }
.r-ai { grid-template-columns: 30px 1fr !important; margin-top: 4px; padding-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.r-ai .ai { font: 600 9.5px/1 var(--font-mono); font-style: normal; letter-spacing: 0.08em; color: #0b1020; background: #9db8ff; border-radius: 3px; padding: 4px 0; text-align: center; align-self: start; margin-top: 2px; }
.r-ai .ko { font-size: 13px; line-height: 1.65; color: #d3d9e3; }
html.still .report li { opacity: 1; transform: none; }

/* Verit */
.feats { list-style: none; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.feats li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.feats b { font: 500 16.5px/1.4 var(--font-ko); letter-spacing: 0.03em; color: var(--text-primary); }
.feats em { font-style: normal; font-weight: 400; color: var(--text-secondary); margin-left: 8px; font-size: 14.5px; }
.feats span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--text-quaternary); }

/* 골조 */
.s-frame .i-pin { align-items: flex-start; padding-top: clamp(96px, 16vh, 170px); }
.big { font-family: var(--font-ko); font-weight: 500; font-size: var(--fs-st); line-height: 1.45; letter-spacing: 0.02em; color: #e3e7ee; }

/* 넘김 */
.s-hand .i-pin { justify-content: center; align-items: flex-end; padding-bottom: clamp(44px, 8vh, 110px); }
.s-hand .i-copy { text-align: center; max-width: none; display: flex; flex-direction: column; align-items: center; }
.s-hand .eyebrow { justify-content: center; }
.s-hand .eyebrow::before { display: none; }
.i-btn { margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px 16px 28px; border-radius: 4px; text-decoration: none; text-shadow: none;
  color: #fff; background: var(--accent-solid); box-shadow: var(--shadow-accent); font-size: 15.5px; line-height: 1;
  transition: background 0.25s, transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
.i-btn .ko { font-weight: 600; letter-spacing: 0.04em; }
.i-btn svg { width: 16px; height: 16px; transition: transform 0.45s var(--ease-out); }
.i-btn:hover { background: var(--accent-solid-hover); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(53, 99, 214, 0.7); }
.i-btn:hover svg { transform: translateX(3px); }
.meta { margin-top: 18px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.2em; color: var(--text-quaternary); }

/* ── 문서 모드(WebGL 없음) ── */
html.no-gl .sec { height: auto; min-height: 100svh; }
html.no-gl .i-pin { position: relative; height: auto; min-height: 100svh; }
html.no-gl .i-copy > * { opacity: 1; transform: none; }

/* ── 좁은 화면(세로) ── */
@media (max-aspect-ratio: 4/5), (max-width: 720px) {
  .tb { display: none; }
  .sheetno { display: block; white-space: nowrap; font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--text-tertiary); opacity: 0; transition: opacity 0.5s; }
  html.chrome .sheetno, html.past-hero .sheetno, html:not(.gl-run) .sheetno { opacity: 1; }
  .i-pin { align-items: flex-end; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .i-copy, .s-verit .i-copy { max-width: 100%; }
  .s-verit .i-pin { justify-content: flex-start; }
  .s-frame .i-pin { align-items: flex-end; padding-top: 0; }
  .scrim .sc-l, .scrim .sc-r, .scrim .sc-c { background: linear-gradient(0deg, rgba(5, 7, 12, 0.96) 0%, rgba(5, 7, 12, 0.86) 30%, rgba(5, 7, 12, 0.35) 50%, rgba(5, 7, 12, 0) 62%); }
  html[data-sec] .sc-l { opacity: 1; }
  html[data-sec] .sc-r, html[data-sec] .sc-c { opacity: 0; }
  .eyebrow { margin-bottom: 18px; }
  .body { margin-top: 16px; }
  .report { margin-top: 20px; padding: 11px 12px 10px; }
  /* 리포트는 두 칸 요약으로 접는다(위치는 도면이 보여 준다) */
  .report ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .report li { font-size: 11px; grid-template-columns: 8px auto 1fr; gap: 7px; padding: 3px 0; }
  .report li .loc { display: none; }
  .r-ai { grid-column: 1 / -1; margin-top: 6px; padding-top: 8px !important; }
  .r-ai .ko { font-size: 12px; line-height: 1.6; }
  /* 머리 뒤 띠 — 표지를 지나면 켜진다 */
  .i-top::before { content: ''; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease-out);
    background: linear-gradient(180deg, rgba(5, 7, 12, 0.94) 0%, rgba(5, 7, 12, 0.8) 64%, rgba(5, 7, 12, 0) 100%); }
  html.past-hero .i-top::before { opacity: 1; }
  .feats { margin-top: 22px; }
  .feats li { padding: 12px 0; }
  .s-hero .i-pin { align-items: center; justify-content: center; padding-bottom: 0; }
  .s-hero .i-pin.lay-cover { align-items: flex-end; justify-content: center; padding-bottom: 132px; }
  .s-hero .i-pin.lay-cover .i-copy { align-items: center; text-align: center; }
  .h-wm { width: 84vw; }
  .lay-cover .h-wm { width: min(78vw, 360px); }
  .h-ld { font-size: 18px; }
  .cue { bottom: calc(34px + env(safe-area-inset-bottom)); }
  .i-btn { margin-top: 26px; }
  .s-hand .i-pin { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) and (max-height: 900px) {
  .s-dacid .body { font-size: 14.5px; line-height: 1.72; }
}

/* ── (R4b) 통합 페이지 — 개정(M1) · 인계(M2) · 프렐류드(M3) · 공개(M4) 구역과 덧층(stage.js 가 클래스·변수를 준다) ── */
.zone { display: block; pointer-events: none; }
.demo > .lead { position: relative; display: block; pointer-events: none; }
.demo > .lead > i { display: none; }
/* 시연 시작(M4) 자리 — 레일 원점 = 덩어리 위치 + 이 구역 높이. 구역은 무대(100dvh) 뒤에 놓이므로 앵커는 구역 끝에서 무대 높이만큼 위 */
.z-anchor { position: absolute; left: 0; bottom: 100vh; bottom: 100dvh; width: 1px; height: 0; }
/* M2 교차 — 인트로 캔버스 불투명도는 스크롤의 함수(--io). 시간 전환 없음. 움직임 줄이기의 rm-out(아래 규칙)은 그대로 이긴다 */
html.studio.io-live #igl { opacity: var(--io, 1); transition: none; }
html.studio.io-off #igl { visibility: hidden; }
html.studio.rm.rm-out #igl { opacity: 0; transition: opacity 0.26s linear; }
/* 인트로 덧층 — 카피 받침 어둠막은 개정 앞 절반에, 표제란은 교차와 함께 걷힌다. 시연에서는 건너뛰기·시트 번호가 없다 */
html.studio .studio-intro .scrim { opacity: var(--isc, 1); }
html.studio.io-live .tb { opacity: var(--io, 1); transition: none; }
html.studio.io-off .tb, html.studio.st-demo .tb { visibility: hidden; }
html.studio.io-live .i-top .i-skip { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
html.studio.st-demo .sheetno { opacity: 0; }
/* 시연 머리띠 받침 — library.html 의 .top 띠(같은 기울기)를 인트로 머리(.i-top)가 시연에서 대신 진다. 접힌 색인(idx-fold)·머리 글자가 하늘 위에서 읽히게(대비 게이트 contrast@studio).
   좁은·세로 화면은 표지 뒤 띠(.i-top::before — 위 미디어 규칙)가 이미 있다. 시연 덧그림과 같이 --dov 로 드러난다(시간 전환 없음) */
@media not all and (max-aspect-ratio: 4/5) { @media (min-width: 721px) {
  html.studio .i-top::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(5, 7, 12, 0.8), rgba(5, 7, 12, 0.45) 55%, rgba(5, 7, 12, 0)); }
  html.studio.st-pre .i-top::before { opacity: var(--dov, 0); }
  html.studio.st-demo .i-top::before { opacity: 1; }
} }
/* 원점 앞(M2–M3) — 장면만. 시연 덧그림(카피 · 계기판 · 시트 · 힌트)은 M4 에서 스크롤로 드러난다(--dov) */
html.studio.st-pre .demo .copies { opacity: var(--dov, 0); }
/* 프렐류드 스크림 — 인계 자세에서 본 외곽 밖을 누른다(M2 다 → M3 앞 30 % 에 걷힘). 무대 위 · 인트로 캔버스 아래 */
.pre-scrim { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; opacity: 1;
  box-shadow: 0 0 56px 200vmax rgba(5, 7, 12, 0.8); }
html.studio.st-demo .pre-scrim { visibility: hidden; }
/* 어둠막 딥 — 건너뛰기 · 늦게 선 장면 · (움직임 줄이기 아님) */
.st-veil { position: fixed; inset: 0; z-index: 55; background: var(--bg, #05070c); opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease-io, ease); }
.st-veil.on { opacity: 1; }
html.still .st-veil { transition: none; }
/* (R5) 움직임 줄이기 — M1 · M3 가운데의 어둠막 교차(stage.js rmVeil — 스크롤의 함수)는 머리 아래에 깐다(시연 어둠막 .veil z 15 처럼 머리·건너뛰기는 그대로 읽힌다) */
html.rm .st-veil { z-index: 25; }
/* (R5) 인트로 문맥을 뜻밖에 잃은 동안(장치 초기화 등 — intro.js) 검게 빈 캔버스를 숨긴다. 글과 머리는 그대로, 되찾으면 다시 그린다 */
html.igl-lost #igl { visibility: hidden; }

/* ── (R5) 통합 페이지 문서 모드 — 3D 없음(html.st-doc — stage.js docMode: ?nogl · WebGL2 없음 · 소프트웨어 GL · 인트로/장면 실패) · JS 끔(html.no-js) ──
   한 문서로 읽는다: 인트로 절(글만 — 도면 캔버스 · 받침 · 렌즈 꼬리표 · 표제란 없음) → 색인 → 시연 카피와 정지 화면(library.css 의 html.fb · html.no-js 규칙) → 법정 푸터.
   구역(M1 · 원점 앞)은 접고, 시연 시작 앵커(#demo-start — 건너뛰기 · 시연 보기 · 색인 00 의 목적지)는 시연 덩어리 맨 위로 올린다(순서만 — 마크업은 그대로).
   JS 끔에서도 같은 모습이어야 해서 인트로의 no-gl 규칙(위)을 html.no-js 에도 건다 */
html.no-js #igl { display: none; }
html.no-js .sec { height: auto; min-height: 100svh; }
html.no-js .i-pin { position: relative; height: auto; min-height: 100svh; }
html.no-js .i-copy > * { opacity: 1; transform: none; }
html.no-js .cue-h { display: none; }
html.st-doc .scrim, html.no-js .scrim, html.st-doc .lens-tag, html.no-js .lens-tag, html.st-doc .tb, html.no-js .tb,
html.st-doc .zone, html.no-js .zone, html.st-doc .pre-scrim, html.st-doc .st-veil { display: none; }
/* 머리 — 문서 위에 고정된 띠(바탕을 깐다 — 글이 그 밑을 지나간다). 작은 워드마크는 처음부터 */
html.st-doc .i-top, html.no-js .i-top { background: rgba(5, 7, 12, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
html.st-doc .i-top::before, html.no-js .i-top::before { display: none; }
html.st-doc .mark svg, html.no-js .mark svg { opacity: 0.94; transform: none; }
/* 표지 다음 절은 글 높이만큼(한 화면씩 비우지 않는다) — 왼쪽 정렬 한 단 */
html.st-doc .sec:not(.s-hero), html.no-js .sec:not(.s-hero) { min-height: 0; }
html.st-doc .sec:not(.s-hero) .i-pin, html.no-js .sec:not(.s-hero) .i-pin { min-height: 0; align-items: flex-start; justify-content: flex-start;
  padding-top: clamp(48px, 9vh, 112px); padding-bottom: clamp(48px, 9vh, 112px); }
html.st-doc .s-hand .i-copy, html.no-js .s-hand .i-copy { text-align: left; align-items: flex-start; }
html.st-doc .s-hand .eyebrow, html.no-js .s-hand .eyebrow { justify-content: flex-start; }
html.st-doc .s-hand .eyebrow::before, html.no-js .s-hand .eyebrow::before { display: block; }
html.st-doc .i-copy, html.no-js .i-copy, html.st-doc .s-verit .i-copy, html.no-js .s-verit .i-copy { max-width: min(40rem, 100%); text-shadow: none; }
html.st-doc .report li, html.no-js .report li { opacity: 1; transform: none; }
html.st-doc .cue, html.no-js .cue { display: none; }
/* 시연 덩어리 — 시작 앵커를 맨 위로(원점 앞 구역은 높이 0). 카피 · 포스터 · 노트는 library.css 문서 모드 규칙이 문서 흐름으로 편다 */
html.st-doc .demo, html.no-js .demo { display: flex; flex-direction: column; }
html.st-doc .demo > .lead, html.no-js .demo > .lead { order: -1; height: 0 !important; }
html.st-doc .z-anchor, html.no-js .z-anchor { position: static; display: block; height: 0; scroll-margin-top: 72px; }
html.st-doc .copy, html.no-js .copy { scroll-margin-top: 88px; }
html.st-doc .sheetno, html.no-js .sheetno { display: none; }   /* 시트 번호(S-00 · COVER)는 도면이 넘어갈 때만 뜻이 있다 — 문서 모드에선 늘 S-00 에 멈춰 있었다 */
html.st-doc .i-copy > *, html.no-js .i-copy > * { transition: none; }   /* 문서 모드로 넘어가는 순간(소프트웨어 GL 등) 글이 0.9 초 동안 반투명으로 오르지 않게 — 곧바로 다 선다 */

/* (R5 수정 — 독립 검증 adversary) 문서 모드의 키커만 남은 장. 3D 에선 목업 · 장면이 키커 자리를 받치지만 문서 모드엔 받칠 그림이 없어, 본문 없는 라벨 줄이 하나씩
   50 px 간격으로 쌓이고(Verit 넷) 같은 머리말이 겹쳤다('02 — DACID — 도면 비교' 바로 아래 '02 · DACID — 변경 검출'). 새 글 없이 놓는 자리만 바꾼다(글자 · 순서 · 읽기 프로그램이 읽는 말은 그대로):
   · DACID — 브랜드 키커가 장 머리. 바로 아래 c-diff 키커는 같은 머리말 '02 · DACID —' 를 화면에서만 접고(글자 크기 0 — 읽기 프로그램은 그대로 읽는다) '변경 검출' 만 소제목으로 붙인다.
   · Verit — 브랜드 키커(03 Verit — AI 채팅)가 장 머리, 그 아래 졸업 진행도 · 시간표 · 단어장을 한 줄 목록(소제목 꼴)으로 붙인다(머리말 '03 · VERIT —' 는 같은 방식으로 접는다 — 390 폭에서도 한 줄).
   .copy--k 는 studio.html 에만 있다(library.html 의 JS 끔 문서 모드 · html.fb 는 그대로). 선택자는 id 를 넣어 library.css 의 'html.fb body .copy …' 보다 앞선다 */
html.st-doc body #c-dacid.copy--k, html.no-js body #c-dacid.copy--k { margin-bottom: 16px; }
html.st-doc body #c-dacid.copy--k > .k, html.no-js body #c-dacid.copy--k > .k { margin-bottom: 0; }
html.st-doc body .copy--k + #c-diff > .k, html.no-js body .copy--k + #c-diff > .k { font-size: 0; gap: 0; letter-spacing: 0; }
html.st-doc body .copy--k + #c-diff > .k::before, html.no-js body .copy--k + #c-diff > .k::before { margin-right: 12px; }
html.st-doc body .copy--k + #c-diff > .k .ko, html.no-js body .copy--k + #c-diff > .k .ko { font-size: var(--ui); }
html.st-doc body #c-verit.copy--k, html.no-js body #c-verit.copy--k { margin-bottom: 16px; }
html.st-doc body .copy--app.copy--k > .k, html.no-js body .copy--app.copy--k > .k { margin-bottom: 0; }
html.st-doc body .copy--app.copy--k:not(#c-verit), html.no-js body .copy--app.copy--k:not(#c-verit) { display: inline-flex; vertical-align: middle; max-width: none; margin: 0; }
html.st-doc body .copy--app.copy--k:not(#c-verit) > .k, html.no-js body .copy--app.copy--k:not(#c-verit) > .k { font-size: 0; gap: 0; letter-spacing: 0; }
html.st-doc body #c-grad.copy--k > .k::before, html.no-js body #c-grad.copy--k > .k::before { margin-right: 12px; }
html.st-doc body .copy--app.copy--k:not(#c-verit):not(#c-grad) > .k::before, html.no-js body .copy--app.copy--k:not(#c-verit):not(#c-grad) > .k::before {
  content: '·'; width: auto; height: auto; background: none; opacity: 0.55; font-size: var(--ui); margin: 0 0.85em; }
html.st-doc body .copy--app.copy--k:not(#c-verit) > .k .ko, html.no-js body .copy--app.copy--k:not(#c-verit) > .k .ko { font-size: var(--ui); }
html.st-doc body .copy--app.copy--k ~ .poster, html.no-js body .copy--app.copy--k ~ .poster { margin-top: clamp(52px, 9vh, 84px); }

/* ── (R7) 모바일 흐름 — html.intro-only(studio.html 머리 스크립트: 터치가 주 입력(pointer: coarse)이거나 폭 768 px 미만 — 로드 때 한 번). 개발자님 결정 2026-10-07 ──
   시연 · 인계 구역은 없다(문서에서 걷는다). 인트로 다섯 절(S-00 – S-04) 다음 마지막 절(S-05)이 마감 절(.s-end)이 되고 법정 푸터가 잇는다.
   마감 글(#m-end — studio.html 의 틀 #m-end-tpl, 글은 id 로 고친다)은 인트로 절의 문법(눈썹 · 제목 · 본문 · 단추)으로 놓는다.
   절 높이 1.5 화면 — 도면(골조 평면)이 선 채 마감 글을 반 화면 붙들었다가 푸터가 올라온다 */
.s-end .i-pin { align-items: flex-end; padding-bottom: clamp(56px, 11vh, 132px); }
.s-end .i-copy { max-width: min(34rem, 92vw); }
.m-end h2 em { font-style: normal; font-weight: 500; color: var(--text-secondary); }
.m-end-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.m-end-cta .i-btn { margin-top: 0; }
.i-btn--line { color: var(--text-primary); background: rgba(8, 11, 18, 0.62); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.18); padding: 15px 22px; }
.i-btn--line:hover { background: rgba(91, 140, 255, 0.08); border-color: rgba(122, 165, 255, 0.42); box-shadow: none; }
/* 하단 노트 — library.css .note(시연 무대 위 fixed)를 마감 글 아래 한 줄로 */
.s-end .end-note { position: static; left: auto; right: auto; bottom: auto; transform: none; margin-top: 26px; text-align: left; pointer-events: auto; opacity: 1;
  font: 400 11px/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--text-tertiary); }
/* 넓은 화면(가로 태블릿)의 마감 글은 왼쪽 아래 — 받침 어둠막도 가운데(.sc-c — 시연 안내 자리)가 아니라 왼쪽(.sc-l). 좁은 화면은 원래 모든 절이 아래 띠(.sc-l) */
html.intro-only[data-sec="5"] .sc-l { opacity: 1; }
html.intro-only[data-sec="5"] .sc-c { opacity: 0; }
/* 표제란 — 푸터가 올라오면 걷는다(넓은 화면 — 가로 태블릿. 좁은 화면은 원래 없다) */
html.intro-only.i-foot .tb { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s linear 0.3s; }
@media (max-aspect-ratio: 4/5), (max-width: 720px) {
  .s-end .i-pin { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .s-end .i-copy { max-width: 100%; }
  .m-end-cta { margin-top: 24px; gap: 10px; }
  .m-end-cta .i-btn { padding: 14px 20px 14px 22px; font-size: 14.5px; }
  .m-end-cta .i-btn--line { padding: 13px 18px; }
  .m-end .body br.d { display: none; }
}
html.st-doc .s-end .i-copy, html.no-js .s-end .i-copy { text-shadow: none; }
/* 마감 절의 핀이 풀리면(글이 위로 나간다) 도면이 옅어진다 — intro.js 가 스크롤의 함수로 --iend(0 → 1)를 준다. 움직임 줄이기의 rm-out 은 그대로 이긴다 */
html.intro-only.gl-on:not(.rm-out) #igl { opacity: calc(1 - 0.8 * var(--iend, 0)); }