/* XGOLF24 매뉴얼 — 공통 매뉴얼 틀(회원앱 매뉴얼과 같은 머리글·목차·장·절·단계 구조), 색과 글꼴은 XGOLF24 브랜드 토큰(다크).
   web/styles/xgolf24-brand.css 의 보라·라벤더 강조, Pretendard KR 본문, Outfit 영문·숫자.
   모션 규칙: transform·opacity 만, 감속 곡선 하나(--ease), prefers-reduced-motion 이면 끈다.
   글자 크기(Aa): html[data-size] 가 rem 기준을 바꾼다 — 본문·목차는 rem, 머리글 조작부는 px. */
@font-face { font-family: "Pretendard KR"; font-weight: 45 930; font-display: swap; src: url("../fonts/pretendard-kr.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --brand-bg: #100e19;
  --brand-surface: #17131f;
  --brand-surface-raised: #1e192b;
  --brand-border: #b8afff26;
  --brand-border-strong: #b8afff47;
  --brand-text: #f1edf9;
  --brand-text-secondary: #b8afc9;
  --brand-text-muted: #a294b3;
  --brand-accent: #b8afff;
  --brand-accent-hover: #d1c4ff;
  --brand-accent-border: #b8afff66;
  --brand-accent-wash: #7a7bff24;
  --brand-on-accent: #181225;
  --brand-ui-gradient: linear-gradient(105deg, #9d91ff, #ba98ef 60%, #e0a7de);
  --brand-warning: #e2a24a;
  --brand-danger: #ff6f8b;
  --brand-info: #9fa0ff;
  --brand-font-body: "Pretendard KR", "Outfit", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --brand-font-display: "Outfit", "Pretendard KR", sans-serif;
  --brand-radius-card: 12px;
  --brand-radius-control: 8px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);   /* 모든 모션의 단 하나의 감속 곡선 */
  --gutter: 16px;
  --max: 1240px;
  --top: 64px;      /* 머리글 */
  --bar: 0px;       /* 휴대폰·태블릿: 지금 읽는 곳 막대 */
  --rail: 220px;    /* 왼쪽 목차 폭 */
}
html { font-size: 100%; }
html[data-size="1"] { font-size: 112.5%; }
html[data-size="2"] { font-size: 125%; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + var(--bar) + 18px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-top: var(--top); background: var(--brand-bg); color: var(--brand-text);
  font-family: var(--brand-font-body); font-size: 1rem; line-height: 1.7;
  letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[lang="ja"] body { font-family: "Pretendard KR", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; letter-spacing: 0; word-break: normal; line-break: strict; }
html[lang="en"] body, html[lang="id"] body { word-break: normal; overflow-wrap: break-word; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--brand-accent); color: var(--brand-on-accent); padding: 8px 14px; border-radius: var(--brand-radius-control); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, .faq summary { text-wrap: balance; }
.num, .count { font-family: var(--brand-font-display); font-variant-numeric: tabular-nums; }

/* ── 읽기 진행 막대 (scaleX) ─────────────────────────────── */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: var(--brand-accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ── 머리글: 로고·매뉴얼명 / 검색·글자 크기·언어 ─────────────── */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(16, 14, 25, .88); border-bottom: 1px solid var(--brand-border); -webkit-backdrop-filter: saturate(1.2) blur(16px); backdrop-filter: saturate(1.2) blur(16px); }
.top-row { height: var(--top); display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand img { width: 120px; height: auto; flex: none; }
.brand-sub { display: none; font-size: 13px; color: var(--brand-text-secondary); padding-left: 10px; border-left: 1px solid var(--brand-border-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { white-space: nowrap; height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--brand-border); background: var(--brand-surface); cursor: pointer; font-size: 14px; }
.icon-btn:hover { border-color: var(--brand-border-strong); }
.icon-btn svg { width: 18px; height: 18px; flex: none; }
.icon-btn .chev { width: 14px; height: 14px; color: var(--brand-text-muted); }
.aa { font-family: var(--brand-font-display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }

/* 언어 — PC: 바로 누르는 버튼 줄 / 휴대폰: 🌐 메뉴 */
.lang-seg { display: none; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); }
.lang-seg a { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--brand-text-muted); text-decoration: none; white-space: nowrap; transition: color .2s var(--ease), background .2s var(--ease); }
.lang-seg a[data-lang="en"], .lang-seg a[data-lang="id"] { font-family: var(--brand-font-display); letter-spacing: .04em; }
.lang-seg a:hover { color: var(--brand-text); }
.lang-seg a[aria-current="page"] { color: var(--brand-on-accent); background: var(--brand-accent); }

/* 펼침 메뉴(글자 크기·언어) */
.dd { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 200px; background: var(--brand-surface-raised); border: 1px solid var(--brand-border-strong); border-radius: var(--brand-radius-card); padding: 6px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; }
.dd.open .pop-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.pop-title { margin: 4px 10px 6px; font-size: 12px; color: var(--brand-text-muted); }
.pop-menu a, .pop-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--brand-radius-control); background: none; text-decoration: none; font-size: 15px; text-align: left; cursor: pointer; }
.pop-menu a:hover, .pop-menu button:hover { background: var(--brand-accent-wash); }
.pop-menu .tick { width: 16px; height: 16px; flex: none; color: var(--brand-accent); opacity: 0; }
.pop-menu [aria-checked="true"] { color: var(--brand-accent); }
.pop-menu [aria-checked="true"] .tick { opacity: 1; }
.pop-menu .sample { margin-left: auto; color: var(--brand-text-muted); font-weight: 600; line-height: 1; }
.sample.s0 { font-size: 14px; } .sample.s1 { font-size: 16px; } .sample.s2 { font-size: 18px; }

/* 지금 읽는 곳(휴대폰·태블릿) — 누르면 목차 */
.here { display: none; position: absolute; left: 0; right: 0; top: 100%; height: 40px; align-items: center; gap: 10px; padding: 0 var(--gutter); border: 0; border-bottom: 1px solid var(--brand-border); background: rgba(16, 14, 25, .94); text-align: left; cursor: pointer; font-size: 13px; }
.has-here .here { display: flex; }
.here-ch { display: flex; align-items: center; gap: 6px; flex: none; font-weight: 650; color: var(--brand-text); }
.here-ch b { font-family: var(--brand-font-display); font-weight: 600; color: var(--brand-accent); }
.here-sec { min-width: 0; flex: 1; color: var(--brand-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.here-sec:not(:empty)::before { content: "›"; margin-right: 8px; color: var(--brand-text-muted); }
.here .chev { width: 16px; height: 16px; color: var(--brand-text-muted); flex: none; }

/* ── 첫 화면 ───────────────────────────────────────────── */
.hero { position: relative; padding: 40px 0 56px; overflow: hidden; }
.hero-grid { display: grid; gap: 8px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--brand-accent); letter-spacing: .02em; margin: 0 0 14px; }
.hero h1 { font-size: clamp(36px, 9vw, 76px); line-height: 1.12; letter-spacing: -0.04em; font-weight: 800; margin: 0; }
html[lang="en"] .hero h1, html[lang="id"] .hero h1 { font-family: var(--brand-font-display); letter-spacing: -0.035em; }
html[lang="ja"] .hero h1 { letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; background: var(--brand-ui-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--brand-text-secondary); max-width: 34em; margin: 20px 0 0; }
.shot-art { margin: 4px 0 0; }
.shot-art .art { position: relative; width: 100%; aspect-ratio: 600 / 340; }
.shot-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shot-art .ground { stroke: var(--brand-border-strong); stroke-width: 1; }
.shot-art .pole { stroke: var(--brand-text-secondary); stroke-width: 2; stroke-linecap: round; }
.shot-art .tee { fill: var(--brand-text-muted); }
.shot-art .hole { fill: #07060c; stroke: var(--brand-border-strong); }
.shot-art .trail, .shot-art .ball, .shot-art .land-ring, .shot-art .pin-flag { position: absolute; }
.shot-art .trail { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--brand-accent); opacity: 0; transition: opacity .5s var(--ease); }
.shot-art .trail.on { opacity: .6; }
.shot-art .ball { left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e7e2f3 55%, #a99fc2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); will-change: transform; }
.shot-art .land-ring { left: 86.67%; top: 82.94%; width: 64px; height: 22px; margin: -11px 0 0 -32px; border-radius: 50%; border: 1.5px solid var(--brand-accent); opacity: 0; transform: scale(.3); }
.shot-art .land-ring.go { animation: ring 1s var(--ease) both; }
@keyframes ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
.shot-art .pin-flag { left: calc(90% + 1px); top: 51%; width: 34px; height: 22px; background: var(--brand-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 100%; transform: scaleY(.1); opacity: 0; transition: transform .7s var(--ease), opacity .4s var(--ease); }
.shot-art .pin-flag.up { transform: none; opacity: 1; }
.shot-art figcaption { margin-top: 6px; font-size: 13px; color: var(--brand-text-muted); text-align: right; line-height: 1.45; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 40px; background: var(--brand-border); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); overflow: hidden; }
.stat { background: var(--brand-bg); padding: 18px 16px; }
.stat b { display: block; font-family: var(--brand-font-display); font-size: clamp(30px, 6vw, 44px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat > span { display: block; font-size: 14px; color: var(--brand-text-secondary); margin-top: 8px; }

.audiences { display: grid; gap: 12px; margin-top: 28px; }
.aud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border-radius: var(--brand-radius-card); border: 1px solid var(--brand-border); background: var(--brand-surface); text-decoration: none; transition: transform .35s var(--ease); }
.aud:hover { border-color: var(--brand-accent-border); transform: translateY(-2px); }
.aud .no { font-family: var(--brand-font-display); color: var(--brand-accent); font-weight: 600; font-size: 15px; }
.aud h2 { font-size: 17px; margin: 0; line-height: 1.35; }
.aud p { margin: 2px 0 0; font-size: 14px; color: var(--brand-text-secondary); line-height: 1.5; }
.aud .arrow { color: var(--brand-text-muted); transition: transform .35s var(--ease); }
.aud:hover .arrow { transform: translateX(3px); }
.note { margin-top: 28px; font-size: 13px; color: var(--brand-text-muted); border-left: 2px solid var(--brand-border-strong); padding: 2px 0 2px 12px; }

/* ── 본문 틀: 왼쪽 목차 + 장 ─────────────────────────────── */
.layout { position: relative; }
.rail { display: none; }
.content { min-width: 0; }

.rail ol { list-style: none; margin: 0; padding: 0; }
.rail .r-ch { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; font-size: .875rem; font-weight: 600; color: var(--brand-text-secondary); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); }
.rail .r-ch i { font-style: normal; font-family: var(--brand-font-display); font-size: .75rem; font-weight: 500; color: var(--brand-text-muted); width: 18px; font-variant-numeric: tabular-nums; }
.rail .r-ch:hover { color: var(--brand-text); }
.rail li.on > .r-ch { color: var(--brand-text); background: rgba(184, 175, 255, .07); }
.rail li.on > .r-ch i { color: var(--brand-accent); }
.rail .r-secs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.rail li.on .r-secs { grid-template-rows: 1fr; }
.rail .r-secs > div { overflow: hidden; }
.rail .r-sec { display: block; position: relative; font-size: .8125rem; line-height: 1.45; color: var(--brand-text-muted); padding: 5px 10px 5px 38px; text-decoration: none; transition: color .2s var(--ease); }
.rail .r-sec::before { content: ""; position: absolute; left: 19px; top: calc(5px + .59em); width: 6px; height: 6px; border-radius: 50%; background: var(--brand-border-strong); transition: background .25s var(--ease), transform .25s var(--ease); }
.rail .r-sec:hover { color: var(--brand-text); }
.rail .r-sec.on { color: var(--brand-accent); }
.rail .r-sec.on::before { background: var(--brand-accent); transform: scale(1.3); box-shadow: 0 0 10px rgba(184, 175, 255, .45); }
.rail li + li { margin-top: 2px; }

/* ── 장: 큰 번호 → CHAPTER → 제목 → 소개 (큰 번호는 장 시작에만) ── */
.chapter { padding: 40px 0 24px; }
.ch-head { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; align-items: end; padding: 30px 0 26px; border-bottom: 1px solid var(--brand-border); }
.ch-num { position: relative; display: inline-block; font-family: var(--brand-font-display); font-size: clamp(92px, 15vw, 180px); line-height: .76; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px rgba(241, 237, 249, .18); }
.ch-num .fill { position: absolute; inset: 0; color: var(--brand-accent); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease) .15s; }
.chapter.in .ch-num .fill { clip-path: inset(0 0 0 0); }
.ch-label { margin: 20px 0 6px; font-family: var(--brand-font-display); font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--brand-accent); }
.ch-head h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
html[lang="ja"] .ch-head h2 { letter-spacing: -.01em; }
.ch-lead { margin: 12px 0 0; font-size: 1.0625rem; color: var(--brand-text-secondary); max-width: 34em; }
.motif { justify-self: end; width: 100%; max-width: 210px; aspect-ratio: 360 / 220; border-radius: 14px; border: 1px solid var(--brand-border); background: var(--brand-surface); padding: 8px; }
.motif svg { width: 100%; height: 100%; display: block; }
/* 이 장에서 하는 일 — 왼쪽 목차가 없는 폭에서만 */
.ch-toc { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 2px; }
.ch-toc a { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; text-decoration: none; color: var(--brand-text-secondary); font-size: .9375rem; }
.ch-toc a:hover { color: var(--brand-text); }
.ch-toc .n { font-family: var(--brand-font-display); font-size: .8125rem; color: var(--brand-accent); min-width: 2.2em; font-variant-numeric: tabular-nums; }

/* ── 절: 번호·제목 → 실제 화면 + 번호 단계 ───────────────────── */
.sec { position: relative; padding: 34px 0 40px; }
.sec + .sec { border-top: 1px dashed var(--brand-border); }
.sec-num { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--brand-font-display); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.sec-num::after { content: ""; width: 40px; height: 1px; background: linear-gradient(90deg, var(--brand-accent), transparent); }
.sec-title { margin: 8px 0 0; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); line-height: 1.22; letter-spacing: -.03em; font-weight: 800; }
.sec-meta { margin: 6px 0 0; font-size: .8125rem; color: var(--brand-text-muted); }
.sec-media { display: none; }
.grp { margin-top: 22px; }
.grp-fig { margin: 0 0 18px; perspective: 1200px; }

/* 번호 단계 — 세로 선 + 번호, 지금 단계는 강조 */
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: var(--brand-border); }
.step { position: relative; padding: 10px 12px 10px 50px; margin-bottom: 4px; border-radius: 12px; color: var(--brand-text-secondary); transition: background .35s var(--ease), color .35s var(--ease); }
.step .n { position: absolute; left: 2px; top: calc(10px + (1.75em - 28px) / 2); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--brand-font-display); font-variant-numeric: tabular-nums; color: var(--brand-text-muted); background: var(--brand-bg); border: 1px solid var(--brand-border-strong); transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.step p { margin: 0; font-size: 1rem; line-height: 1.75; }
.step.active { color: var(--brand-text); background: linear-gradient(90deg, rgba(122, 123, 255, .1), transparent 85%); }
.step.active .n { color: var(--brand-on-accent); background: var(--brand-accent); border-color: var(--brand-accent); box-shadow: 0 0 0 5px rgba(184, 175, 255, .14); }
.ui { display: inline; font-weight: 650; color: var(--brand-text); background: var(--brand-accent-wash); border: 1px solid var(--brand-accent-border); border-radius: 6px; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; white-space: normal; }
.ui-orig { color: var(--brand-text-muted); font-size: .9em; margin-left: 4px; }
.step code, .faq code { font-family: var(--mono); font-size: .88em; background: var(--brand-surface-raised); border: 1px solid var(--brand-border); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; color: var(--brand-text); }
.step strong, .faq strong { color: var(--brand-text); font-weight: 750; }

/* 화면 무대(옆에 붙는 휴대폰 화면) — 같은 칸에 겹쳐 두고 지금 단계 화면만 보인다 */
.stage { display: grid; }
.stage .fig { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.stage .fig.on { opacity: 1; pointer-events: auto; }

/* 기기 틀 */
.dev { position: relative; }
.dev img { width: 100%; height: auto; cursor: zoom-in; }
.dev-phone { width: min(280px, 74vw); margin: 0 auto; padding: 8px; border-radius: 40px; background: #0b0911; border: 1px solid var(--brand-border-strong); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85); }
.dev-phone img { border-radius: 32px; aspect-ratio: 640 / 1385; object-fit: cover; object-position: top; background: #070b0c; }
.dev-kiosk { width: min(250px, 66vw); margin: 0 auto; padding: 10px; border-radius: 18px; background: #0b0911; border: 1px solid var(--brand-border-strong); box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85); }
.dev-kiosk img { border-radius: 8px; aspect-ratio: 720 / 1280; object-fit: cover; }
.dev-tablet { padding: 10px; border-radius: 22px; background: #0b0911; border: 1px solid var(--brand-border-strong); }
.dev-tablet img { border-radius: 12px; }
.dev-window { border-radius: var(--brand-radius-card); border: 1px solid var(--brand-border-strong); background: var(--brand-surface); overflow: hidden; box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .85); margin: 0 auto; }
.win-bar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--brand-border); background: var(--brand-surface-raised); }
.win-url { font-family: var(--mono); font-size: 12px; color: var(--brand-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-url::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); margin-right: 8px; vertical-align: 1px; }
.dev-term { border-radius: var(--brand-radius-card); border: 1px solid var(--brand-border-strong); background: #0c0a14; overflow: hidden; width: 100%; }
.term-bar { height: 32px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: var(--brand-text-muted); border-bottom: 1px solid var(--brand-border); background: #15111f; font-family: var(--mono); }
.term-body { margin: 0; padding: 14px 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; color: #c9c4d6; overflow-x: auto; }
.term-body .l { display: block; }
.term-body .rule { white-space: pre; overflow: hidden; text-overflow: clip; }
.term-body .tr { display: block; color: var(--brand-text-muted); font-family: var(--brand-font-body); font-size: 12px; margin: -2px 0 4px 2ch; }
.term-body .tr::before { content: "# "; }
.c-Magenta { color: #c792ea; } .c-White { color: #f4f1fb; font-weight: 600; } .c-Cyan { color: #7fd7f0; } .c-Gray { color: #c9c4d6; }
.c-DarkGray { color: #8b849b; } .c-Green { color: #86e3a7; } .c-Yellow { color: #f2c46d; } .c-prompt { color: #c9c4d6; } .c-input { color: #c9c4d6; }
.term-body .v { color: var(--brand-accent-hover); }
.dev-term .term-note { font-size: 13px; line-height: 1.5; color: var(--brand-text-muted); padding: 0 14px 14px; margin: 0; }
.dev-none { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--brand-radius-card); border: 1px dashed var(--brand-border-strong); background: transparent; }
.dev-none svg { width: 44px; height: 44px; color: var(--brand-accent); }
.dev-none p { margin: 0; font-size: 14px; color: var(--brand-text-secondary); }
.badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--brand-warning); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fig-cap { text-align: center; }
.grp-fig .dev-phone, .grp-fig .dev-kiosk { transform-origin: 50% 100%; }
.js .grp-fig[data-reveal] .dev-phone, .js .grp-fig[data-reveal] .dev-kiosk { transform: rotateX(14deg) translate3d(0, 30px, 0) scale(.94); transition: transform 1.1s var(--ease); }
.js .grp-fig[data-reveal].in .dev-phone, .js .grp-fig[data-reveal].in .dev-kiosk { transform: none; }

/* ── 자주 막히는 곳 ─────────────────────────────────────── */
.faq-list { display: grid; gap: 12px; margin-top: 22px; }
.faq { border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); background: var(--brand-surface); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font-family: var(--brand-font-display); color: var(--brand-accent); font-weight: 600; font-size: .875rem; flex: none; }
.faq summary .chev { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--brand-text-muted); transition: transform .35s var(--ease); }
.faq[open] summary .chev { transform: rotate(180deg); }
.faq-body { display: grid; gap: 20px; padding: 0 18px 20px; }
.faq-body p { margin: 0 0 10px; font-size: 1rem; line-height: 1.75; color: var(--brand-text-secondary); }
.faq-body .where { font-size: .8125rem; color: var(--brand-text-muted); margin: 0 0 8px; }

/* ── 바닥 ──────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--brand-border); margin-top: 64px; padding: 40px 0 64px; color: var(--brand-text-muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot img { width: 200px; height: auto; }
.foot nav { display: flex; gap: 14px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; color: var(--brand-text-secondary); }
.foot nav a[aria-current="page"] { color: var(--brand-accent); }

/* ── 목차 시트(휴대폰·태블릿) ─────────────────────────────── */
.toc-sheet { position: fixed; inset: 0; z-index: 85; display: none; }
.toc-sheet.open { display: block; }
.ts-bg { position: absolute; inset: 0; background: rgba(9, 7, 15, .72); opacity: 0; transition: opacity .3s var(--ease); }
.toc-sheet.show .ts-bg { opacity: 1; }
.ts-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex; flex-direction: column; background: var(--brand-surface-raised); border: 1px solid var(--brand-border-strong); border-bottom: 0; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .4s var(--ease); }
.toc-sheet.show .ts-panel { transform: none; }
.ts-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 8px 20px; font-size: 15px; }
.ts-list { overflow-y: auto; padding: 0 10px 18px; }
.ts-list ol { list-style: none; margin: 0; padding: 0; }
.ts-list .r-ch { display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 1rem; font-weight: 700; text-decoration: none; }
.ts-list .r-ch i { font-style: normal; font-family: var(--brand-font-display); font-size: .8125rem; color: var(--brand-accent); }
.ts-list .r-sec { display: block; padding: 8px 10px 8px 38px; font-size: .9375rem; color: var(--brand-text-secondary); text-decoration: none; border-radius: 8px; }
.ts-list .r-sec.on { color: var(--brand-accent); background: var(--brand-accent-wash); }
.ts-list li + li { margin-top: 6px; border-top: 1px solid var(--brand-border); padding-top: 6px; }

/* ── 화면 확대(라이트박스) ─────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 90; display: none; }
.lb.open { display: block; }
.lb-bg { position: absolute; inset: 0; background: rgba(9, 7, 15, .94); opacity: 0; transition: opacity .42s var(--ease); }
.lb.show .lb-bg { opacity: 1; }
.lb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); cursor: zoom-out; transition: transform .46s var(--ease); max-width: none; }
.lb-ui { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); opacity: 0; transition: opacity .3s var(--ease); }
.lb.show .lb-ui { opacity: 1; }
.lb-cap { flex: 1; min-width: 0; font-size: 14px; color: var(--brand-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .icon-btn { background: var(--brand-surface-raised); }
.lb-close { position: absolute; top: 12px; right: 12px; opacity: 0; transition: opacity .3s var(--ease); }
.lb.show .lb-close { opacity: 1; }

/* ── 검색 ──────────────────────────────────────────────── */
.sd { position: fixed; inset: 0; z-index: 80; display: none; }
.sd.open { display: block; }
.sd-bg { position: absolute; inset: 0; background: rgba(9, 7, 15, .72); opacity: 0; transition: opacity .3s var(--ease); }
.sd.show .sd-bg { opacity: 1; }
.sd-panel { position: relative; margin: 10vh auto 0; width: min(640px, calc(100% - 24px)); max-height: 76vh; display: flex; flex-direction: column; background: var(--brand-surface-raised); border: 1px solid var(--brand-border-strong); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-10px) scale(.985); transition: opacity .3s var(--ease), transform .3s var(--ease); overflow: hidden; }
.sd.show .sd-panel { opacity: 1; transform: none; }
.sd-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--brand-border); }
.sd-input svg { width: 18px; height: 18px; color: var(--brand-text-muted); flex: none; }
.sd-input input { flex: 1; min-width: 0; height: 54px; background: transparent; border: 0; outline: none; color: var(--brand-text); font: inherit; font-size: 16px; }
.sd-input input::placeholder { color: var(--brand-text-muted); }
.sd-results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.sd-results li a { display: block; padding: 10px 12px; border-radius: var(--brand-radius-control); text-decoration: none; }
.sd-results li a[aria-selected="true"], .sd-results li a:hover { background: var(--brand-accent-wash); }
.sd-results .t { display: block; font-weight: 650; font-size: 15px; }
.sd-results .p { display: block; font-size: 12.5px; color: var(--brand-text-muted); }
.sd-results .s { display: block; font-size: 14px; color: var(--brand-text-secondary); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-results mark { background: transparent; color: var(--brand-accent); font-weight: 700; }
.sd-empty { padding: 18px 16px; color: var(--brand-text-muted); font-size: 14px; }
.sd-hint { padding: 8px 14px; border-top: 1px solid var(--brand-border); font-size: 12px; color: var(--brand-text-muted); }
.flash { position: relative; }
.flash::after { content: ""; position: absolute; inset: -6px -10px; border-radius: 10px; border: 1px solid var(--brand-accent); background: var(--brand-accent-wash); pointer-events: none; animation: flash 1.8s var(--ease) both; }
@keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ── 등장 모션 ─────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* 장 그림 — 보이면 한 번 재생(.play). 모두 transform·opacity */
.il * { transform-box: fill-box; }
.il .seq { opacity: 0; }
.il.play .seq { animation: il-in .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.il .pop { opacity: 0; transform: scale(.4); transform-origin: center; }
.il.play .pop { animation: il-pop .55s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-pop { to { opacity: 1; transform: none; } }
.il .door-leaf { transform-origin: 0 50%; }
.il.play .door-leaf { animation: il-door 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-door { to { transform: scaleX(.28); } }
.il .shackle { transform-origin: center; }
.il.play .shackle { animation: il-shackle .6s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-shackle { to { transform: translateY(-7px); } }
.il .pulse { opacity: 0; }
.il.play .pulse { animation: il-travel 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-travel { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--dx, 120px)); } }
.il .bar-fill { transform-origin: 0 50%; transform: scaleX(0); }
.il.play .bar-fill { animation: il-bar 2.2s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-bar { to { transform: scaleX(1); } }
.il .scan { opacity: 0; }
.il.play .scan { animation: il-scan 1.3s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-scan { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--dy, 90px)); } }
.il .out { opacity: 1; }
.il.play .out { animation: il-out .4s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes il-out { to { opacity: 0; transform: scale(.7); } }

/* ── 폭 ≥ 400 / 560 / 720 ─────────────────────────────── */
@media (min-width: 400px) { .brand img { width: 132px; } }
@media (min-width: 560px) { .brand-sub { display: block; } .brand img { width: 150px; } }
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .top-row { padding: 0 24px; gap: 12px; }
  .top-actions { gap: 10px; }
  .lang-seg { display: flex; }
  .lang-pop { display: none; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-head { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; padding: 44px 0 34px; }
  .faq-body { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: start; }
}
@media (max-width: 1099px) { :root { --bar: 0px; } .has-here { --bar: 40px; } }

/* ── 폭 ≥ 900: 휴대폰 화면은 옆에 붙고 스크롤로 바뀐다 · 넓은 화면은 위, 설명은 아래 ── */
@media (min-width: 900px) {
  .sec { padding: 46px 0 60px; }
  .js .sec[data-layout="side"] { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 60px; align-items: start; }
  .js .sec[data-layout="side"] .sec-media { display: block; position: sticky; top: calc(var(--top) + var(--bar) + 28px); }
  .js .sec[data-layout="side"] .grp-fig { display: none; }
  .js .sec[data-layout="side"] .grp { margin-top: 4px; }
  .js .sec[data-layout="side"] .sec-head + .grp { margin-top: 24px; }
  .stage .dev-phone { width: min(330px, calc((100vh - var(--top) - var(--bar) - 84px) * .4682)); }
  .stage .dev-kiosk { width: min(330px, calc((100vh - var(--top) - var(--bar) - 84px) * .5692)); }
  .stage .dev-window, .stage .dev-tablet { width: 100%; }
  .stage .badge { margin-top: 12px; }
  /* 화면이 처음 보일 때 한 번 세워진다 */
  .js .stage .dev { transform: perspective(1200px) rotateX(12deg) translate3d(0, 40px, 0) scale(.96); opacity: 0; transition: transform 1.1s var(--ease), opacity .8s var(--ease); }
  .js .stage.in .dev { transform: none; opacity: 1; }
  /* 넓은 화면(관제·PC): 화면을 크게 위에, 설명은 그 아래 */
  .sec[data-layout="wide"] .grp + .grp { margin-top: 44px; }
  .sec[data-layout="wide"] .grp-fig { max-width: 900px; margin: 0 auto 22px; }
  .sec[data-layout="wide"] .grp-fig .dev-term { max-width: 820px; margin: 0 auto; }
  .sec[data-layout="wide"] .steps { max-width: 820px; margin: 0 auto; }
  .faq-body { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
}

/* ── 폭 ≥ 1100: 왼쪽 목차 ─────────────────────────────── */
@media (min-width: 1100px) {
  .layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 56px; padding-top: 30px; }
  .rail { display: block; position: sticky; top: calc(var(--top) + 22px); align-self: start; max-height: calc(100vh - var(--top) - 40px); overflow-y: auto; padding: 6px 0 30px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .ch-toc { display: none; }
  .here, .has-here .here { display: none; }
  .hero { padding: 72px 0 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 40px; }
  .shot-art { margin: 0; }
  .audiences { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .aud { grid-template-columns: 1fr; align-content: start; gap: 8px; min-height: 150px; }
  .aud .arrow { display: none; }
}

/* ── 동작 줄이기 — 모든 모션을 끈다 ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .stage .dev, .js .grp-fig[data-reveal] .dev-phone, .js .grp-fig[data-reveal] .dev-kiosk { transform: none; opacity: 1; }
  .ch-num .fill { clip-path: inset(0 0 0 0); }
  .il .seq, .il .pop { opacity: 1; transform: none; }
  .il .pulse, .il .scan { opacity: 0; }
}