/* 시안 A: 사실적인 숲(2026-10-15, 17:53 다시 짬). 공통 토큰과 머리글은 /shared/base.css, 갈래선과 번호 배지는 /shared/branch.css.
   흐름은 숲의 하루: 아침 숲 가장자리(첫 화면) → 종이 위 탐색 기록 → 밤 숲 → 땅. */

:root {
  --sky-top: #cfe2c8;
  --sky-low: #e6eedf;        /* 지평선 = 3D 안개 색과 같게(하늘과 먼 숲이 이음매 없이 만난다) */
  --night: #183525;          /* 밤 숲 = 라이브 글자색 */
  --night-ink: #eef5ef;
  --surface: #fdfcf9;        /* 종이 위 한 단 밝은 면(브랜드 '숲의 낮' 셋째 톤) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --indent: 64px;            /* 갈래 들여쓰기(실앱 14px 의 랜딩 배율) */
  --lab: 52px;               /* 배지 + 간격: 본문이 제목 글자와 같은 선에서 시작하게 */
  /* 땅과 땅속 띠(main.js buildGround 가 이 이름으로 칠한다. 테마를 바꾸면 그린 것도 따라 바뀐다) */
  --gr-base: #5c4030; --gr-t0: #533a2b; --gr-t1: #6a4a37; --gr-t2: #654634;
  --gr-f0: #2f6b46; --gr-f1: #3d8256; --gr-f2: #57b07c;
  --soil-a: #d9c4a8; --soil-b: #5c4030; --soil-stone: color-mix(in srgb, #4a4744 88%, #d9c4a8);
}

html { scroll-behavior: smooth; }
main { overflow-x: clip; }

/* ── 1. 첫 화면 ── */
.hero {
  position: relative;
  height: max(700px, 100svh);
  max-height: 1200px;
  padding-top: var(--nav-h);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 62%);
  overflow: hidden;
  isolation: isolate;
}
/* 해와 달: .hero 안의 것만(머리글 테마 버튼 아이콘도 .sun, .moon 이라 범위를 좁힌다) */
.hero > .sun, .hero > .moon { position: absolute; z-index: 0; right: 7%; top: calc(var(--nav-h) + 5%); width: clamp(70px, 7vw, 120px); height: auto; }
.hero > .moon { display: none; width: clamp(56px, 5.6vw, 96px); }
.cloud { position: absolute; z-index: 0; height: auto; will-change: transform; }
.cloud .c1 { fill: #fff; } .cloud .c2 { fill: #eef4ea; } .cloud .c3 { fill: #e3ecdf; }
.cl1 { width: clamp(110px, 10vw, 180px); right: 20%; top: calc(var(--nav-h) + 9%); }
.cl2 { width: clamp(70px, 6vw, 110px); left: 46%; top: calc(var(--nav-h) + 22%); }
.cl3 { width: clamp(90px, 8vw, 140px); right: 3%; top: calc(var(--nav-h) + 30%); opacity: .8; }

.forest { position: absolute; z-index: 1; left: 0; top: var(--nav-h); width: 100%; height: calc(100% - var(--nav-h)); }
.forest[data-webgl="off"] { display: none; }
.toucan-perch {
  position: absolute; z-index: 2; left: 0; top: 0;
  width: clamp(40px, 3.6vw, 58px); height: auto;
  pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
}
.toucan-perch.on { opacity: 1; }

.hero-copy {
  position: absolute; z-index: 3;
  left: max(24px, calc((100vw - 1240px) / 2));
  top: calc(var(--nav-h) + clamp(48px, 9svh, 110px));
  max-width: 560px;
}
.hero-title { margin: 0; font-size: clamp(54px, 6.4vw, 96px); line-height: .98; letter-spacing: -.045em; color: var(--text); }
.hero-title .op-welcome { display: block; font-weight: 300; }
.hero-title .op-word { display: block; font-weight: 780; color: var(--leaf-word); }
.hero-sub { margin: clamp(20px, 2.2vw, 30px) 0 6px; font-size: clamp(21px, 1.8vw, 27px); font-weight: 680; letter-spacing: -.025em; color: var(--text); }
.hero-sub2 { margin: 0; font-size: clamp(16px, 1.2vw, 18px); font-weight: 500; color: var(--muted); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(24px, 2.6vw, 34px); }
.hero-cta { padding: 13px 26px; font-size: 16px; }
.cue { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13.5px; font-weight: 650; text-decoration: none; }
.cue:hover { color: var(--text); }
.cue svg { width: 16px; height: 16px; animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }

/* ── 2. 탐색 기록 ── */
.grove { background: var(--paper); padding: clamp(110px, 12vw, 180px) 0 clamp(120px, 13vw, 190px); }
.grove-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.br-head { display: flex; align-items: flex-start; gap: 16px; }
.br-head .addr-num { margin-top: var(--bm, 0px); }

.br-root { --rf: clamp(38px, 4.8vw, 70px); --bm: calc((var(--rf) * 1.1 - 38px) / 2); }
/* 뿌리 배지는 큰 제목 곁이라 한 치수 키운다(문법은 같고 크기만) */
.br-root .addr-num { min-width: 38px; height: 38px; font-size: 16px; }
.root-title { margin: 0; max-width: 13.5em; font-size: var(--rf); font-weight: 760; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.root-body { padding-left: calc(38px + 16px); margin-top: clamp(28px, 3vw, 40px); }
.ask-box {
  display: flex; align-items: center; gap: 10px; max-width: 620px; padding: 8px 8px 8px 20px;
  border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1.5px rgba(30, 110, 67, .45);
  transition: box-shadow .2s var(--ease-out);
}
.ask-box:focus-within { box-shadow: 0 0 0 2px #1e6e43, 0 0 0 6px rgba(30, 110, 67, .12); }
.ask-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text); padding: 10px 0; }
.ask-box input::placeholder { color: #8c9389; }
.ask-go { padding: 11px 16px; font-size: 14.5px; white-space: nowrap; }
.ask-go svg { width: 15px; height: 15px; }
.ask-hint { margin: 16px 0 4px; color: var(--text); font-size: 15px; font-weight: 600; }
.ask-note { margin: 0; color: var(--muted); font-size: 13px; }

.kid { margin-top: clamp(110px, 11vw, 170px); --bm: 2px; }
.kid > .br-head { padding-left: var(--indent); }
.kid-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-weight: 400; line-height: 1.2; }
.kid-title b { font-size: clamp(26px, 2.5vw, 34px); font-weight: 760; letter-spacing: -.035em; color: var(--text); }
.kid-title b i { font-style: normal; color: var(--leaf-word); }
.kid-title .mode { color: var(--muted); font-size: 16px; font-weight: 600; }
.kid-title .new { align-self: center; padding: 3px 6px 2px; border-radius: 4px; background: #d9e7d2; color: #1e6e43; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.kid-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(32px, 4vw, 64px); align-items: start;
  padding-left: calc(var(--indent) + var(--lab)); margin-top: 22px;
}
.desc { margin: 0; max-width: 34em; color: var(--text); font-size: 17px; line-height: 1.75; }
.desc b { font-weight: 720; }
.try { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #1e6e43; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(30, 110, 67, .35); transition: text-decoration-color .15s ease; }
.try span { transition: transform .2s var(--ease-out); }
.try:hover { text-decoration-color: currentColor; }
.try:hover span { transform: translateX(3px); }

/* 앱 화면: 실앱 캡처를 가운데 창 위주로 잘라 크게 */

/* 탐색 기록 조각: 실앱 #tree 문법(행 = 들여쓰기 4+깊이*14px, 글머리 ▼ ● ·, 번호 배지는 루트 = 전체 주소, 자식 = 마지막 자리,
   라벨 = 그은 구절(형광펜 밑칠) 또는 질문, 지금 보는 행 = 연초록 바탕). 랜딩에서 1.25배 */
.ui-panel { border-radius: 14px; background: var(--surface); padding: 16px 14px 18px; }
.ui-head { margin: 0 0 8px; padding: 0 8px; color: var(--text); font-size: 14px; font-weight: 700; }
.ui-tree { display: grid; gap: 1px; }
.t-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px 6px calc(5px + var(--d) * 17.5px);
  border-radius: 10px; font-size: 15px; white-space: nowrap; overflow: hidden; color: var(--text);
}
.t-row.root { font-weight: 600; }
.t-row.focus { background: #d9e7d2; color: #1e6e43; font-weight: 600; }
.t-row .tw { flex: none; width: 22px; text-align: center; color: rgba(24, 53, 37, .45); font-size: 11px; }
.t-row .num {
  flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 999px; background: #d9e7d2; color: #1e6e43; border: 1px solid #1e6e43; font-size: 11.5px; font-weight: 700; line-height: 1;
}
.t-row .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t-row .anc { background: linear-gradient(transparent 58%, #fff3c4 58%); border-radius: 3px; padding: 0 2px; }
.js .t-row { opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: calc(var(--i) * 70ms); }
.js .ui-tree.grow .t-row { opacity: 1; transform: none; }

.kid-soon .kid-media { display: flex; align-items: center; min-height: 160px; }
.shrub { width: min(260px, 100%); height: auto; }

/* 투칸: 마지막으로 닿은 배지 위에 앉는다. 자리 옮김은 shared/toucan.js 비행(안쪽 .tc-fly 의 transform)이 맡는다 */
.br-toucan { position: absolute; left: 0; top: 0; z-index: 2; width: 54px; pointer-events: none; }
.br-toucan .tc-fly { width: 100%; }

/* 들어올 때: 설명, 그다음 그림(스크립트가 있을 때만 숨김) */
.js .kid .kid-copy, .js .kid .kid-media, .js .root-body { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .kid .kid-media { transition-delay: .08s; }
.js .br-node.in .kid-copy, .js .br-node.in .kid-media, .js .br-node.in .root-body { opacity: 1; transform: none; }

/* ── 3. 밤 숲 ── */
.night {
  --tlh: clamp(120px, 14vw, 210px);
  position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--paper) 0, var(--paper) calc(var(--tlh) - 2px), var(--night) calc(var(--tlh) - 2px));
  color: var(--night-ink);
  padding: calc(var(--tlh) + clamp(80px, 9vw, 140px)) 0 clamp(90px, 10vw, 150px);
  overflow: hidden;
}
.treeline { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--tlh); pointer-events: none; }
.tl { position: absolute; left: 0; bottom: 0; width: 100%; will-change: transform; }
.tl1 { height: 100%; fill: #c6dcbd; }
.tl2 { height: 78%; fill: #6fa07c; }
.tl3 { height: 56%; fill: var(--night); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motes .m-leaf { fill: var(--leaf-4); opacity: .16; }
.motes .m-star { display: none; }
.motes .m-fly { fill: #fde07e; opacity: .7; filter: drop-shadow(0 0 4px rgba(253, 224, 126, .8)); }
.motes .drift { animation: drift var(--d, 14s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--dx, 10px), var(--dy, -18px)) rotate(var(--rot, 25deg)); } }
.motes .m-fly.drift { animation-name: fly; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: .85; } 100% { transform: translate(var(--dx, 10px), var(--dy, -18px)); opacity: .3; } }
.night-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.night figure { margin: 0; }
.night figcaption, .hl-label { margin: 0 0 14px; color: #9bcca9; font-size: 15px; font-weight: 700; }
.vision-line { margin: 0; max-width: 21em; font-size: clamp(32px, 4.1vw, 60px); font-weight: 720; line-height: 1.24; letter-spacing: -.035em; }
.night-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px clamp(40px, 6vw, 96px); margin-top: clamp(90px, 9vw, 140px); }
.mission blockquote { margin: 0; font-size: clamp(22px, 1.9vw, 28px); font-weight: 650; line-height: 1.45; letter-spacing: -.025em; color: var(--night-ink); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px 0; font-size: 16px; line-height: 1.5; color: rgba(238, 245, 239, .86); }
.timeline li + li { box-shadow: inset 0 1px 0 rgba(238, 245, 239, .1); }
.timeline time { color: var(--night-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 4. 땅(밤의 풀밭) ── */
.ground { position: relative; background: var(--night); }
.ground-top { position: relative; height: 230px; }
.grass { position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; }
.hole { position: absolute; left: 50%; bottom: 72px; width: 96px; height: 20px; margin-left: -48px; border-radius: 50%; background: #2a1a0f; z-index: 1; }
.mole {
  position: absolute; left: 50%; bottom: 80px; width: 108px; height: auto; margin-left: -54px; z-index: 0;
  transform: translateY(46px); transition: transform .9s cubic-bezier(.34, 1.45, .64, 1);
}
.ground.in .mole { transform: translateY(0); }
.signpost { position: absolute; right: clamp(16px, 9vw, 160px); bottom: 54px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.sign {
  position: relative; z-index: 1; padding: 10px 16px; border-radius: 6px; transform: rotate(-2deg);
  background: var(--wood) url("../cta-wood-plank-13.svg") center / 100% 100% no-repeat;
  color: #fbf3e4; font-size: 18px; font-weight: 800; letter-spacing: -.02em; text-decoration: none;
  transition: transform .2s var(--ease-out), filter .15s ease;
}
.sign:hover { filter: brightness(1.08); transform: rotate(-2deg) translateY(-2px); }
.sign:active { transform: rotate(-2deg) scale(.97); }
.post { display: block; width: 10px; height: 74px; margin-top: -4px; background: linear-gradient(to right, #7a5234 50%, #5a3b24 50%); }
.soil { display: block; width: 100%; height: 260px; background: var(--ground-fill); margin-top: -1px; }

.foot { background: var(--soil); color: #3b2a1c; padding: 34px 32px 70px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; justify-content: space-between; }
.foot-logo { height: 18px; width: auto; }
.foot-logo.logo-d { display: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; font-weight: 600; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-ig { display: inline-flex; align-items: center; gap: 5px; }
.foot-ig svg { width: 14px; height: 14px; flex: none; }
.copy { margin: 0; font-size: 13px; opacity: .8; }

/* ── 반응형 ── */
@media (max-width: 1000px) {
  .cl1 { right: 4%; top: calc(var(--nav-h) + 16%); }
  .cl2 { left: auto; right: 30%; top: calc(var(--nav-h) + 6%); }
  .kid-body { grid-template-columns: 1fr; }
  .kid-media { max-width: 640px; }
  .night-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --indent: 34px; --lab: 0px; }
  .hero-copy { left: 20px; right: 20px; top: calc(var(--nav-h) + 30px); }
  .hero-title { font-size: clamp(44px, 13vw, 58px); }
  .hero-sub { margin-top: 16px; font-size: 20px; }
  .hero-sub2 { font-size: 15.5px; }
  .hero-act { margin-top: 20px; gap: 10px 16px; }
  .hero > .sun, .hero > .moon { right: 5%; top: calc(var(--nav-h) + 2%); width: 58px; }
  .hero > .moon { width: 46px; }
  .cl1 { right: 6%; top: calc(var(--nav-h) + 40%); width: 80px; }
  .cl2, .cl3 { display: none; }
  .grove-in, .night-in { padding: 0 18px; }
  .root-body { padding-left: 0; }
  .br-head { gap: 12px; }
  .br-root { --rf: clamp(32px, 9vw, 40px); --bm: calc((var(--rf) * 1.1 - 32px) / 2); }
  .br-root .addr-num { min-width: 32px; height: 32px; font-size: 14px; }
  .kid-body { padding-left: var(--indent); margin-top: 16px; gap: 22px; }
  .kid-title b { font-size: 24px; }
  .kid-title .mode { font-size: 14.5px; }
  .desc { font-size: 16px; }
  .t-row { font-size: 14px; padding-left: calc(4px + var(--d) * 14px); }
  .ask-box { padding-left: 14px; }
  .ask-box input { font-size: 16px; }
  .br-toucan { width: 44px; }
  .timeline li { grid-template-columns: 92px 1fr; font-size: 15px; }
  .ground-top { height: 210px; }
  .signpost { right: 14px; }
  .sign { font-size: 15px; padding: 8px 12px; }
  .mole, .hole { left: 34%; }
  .foot { padding: 30px 18px 64px; }
}

/* ── 어두운 판(2026-10-15 20:08 Y "다크까지 반영해봐. 세 시안 전부") ──
   값은 라이브 랜딩 index.html html[data-theme="dark"] 문법: 짙은 초록 밤하늘, 해 대신 달, 구름은 흰빛 .08, 땅은 더 어두운 갈색,
   질문칸은 라이브 값 그대로. 페이지 전체가 밤이 되므로 '밤 숲' 띠는 한 단 더 깊은 색과 별빛으로 따로 읽히게 한다.
   대비(바탕 #121a15): 본문 #dfeee3 14.8:1, 흐린 글 #a9bfb0 9.1:1, 강조 #8fd3a8 10.2:1 */
html[data-theme="dark"] {
  --sky-top: #0c1611;
  --sky-low: #1b2b21;        /* = 3D 숲 fogColorDark(지평선 이음매 없이) */
  --night: #070d09;          /* 밤 숲 띠: 종이(#121a15)보다 한 단 깊게 */
  --night-ink: #eef5ef;
  --surface: #18211b;
  --gr-base: #1b100a; --gr-t0: #24160d; --gr-t1: #24160d; --gr-t2: #24160d;
  --gr-f0: #265638; --gr-f1: #316845; --gr-f2: #468d63;
  --soil-a: #2e2119; --soil-b: #1b100a; --soil-stone: #1f1915;
}
html[data-theme="dark"] .hero > .sun { display: none; }
html[data-theme="dark"] .hero > .moon { display: block; }
html[data-theme="dark"] .cloud .c1 { fill: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .cloud .c2 { fill: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .cloud .c3 { fill: rgba(255, 255, 255, .045); }
html[data-theme="dark"] .hero-title .op-word, html[data-theme="dark"] .kid-title b i { color: var(--accent); }   /* 라이브 다크 .m-title .op-word = --m-label #8fd3a8 */
html[data-theme="dark"] .toucan-perch, html[data-theme="dark"] .br-toucan { filter: brightness(.92); }
/* 질문칸: 라이브 다크 .ask-shell, .ask-ph, .ask-hint, .ask-note 그대로 */
html[data-theme="dark"] .ask-box { background: rgba(30, 31, 34, .96); box-shadow: 0 0 0 1.5px rgba(143, 211, 168, .4); }
html[data-theme="dark"] .ask-box:focus-within { box-shadow: 0 0 0 2px #8fd3a8, 0 0 0 6px rgba(143, 211, 168, .14); }
html[data-theme="dark"] .ask-box input { color: #eceee6; }
html[data-theme="dark"] .ask-box input::placeholder { color: rgba(236, 238, 230, .55); }
html[data-theme="dark"] .ask-hint { color: #e8d6c0; }
html[data-theme="dark"] .ask-note { color: rgba(232, 214, 192, .6); }
html[data-theme="dark"] .kid-title .new { background: #1f3a2a; color: #8fd3a8; }
html[data-theme="dark"] .try { color: #8fd3a8; text-decoration-color: rgba(143, 211, 168, .4); }
/* 탐색 기록 조각: 실앱 어두운 판 토큰(--accent #9bcca9, --accent-soft #1b2a20, --hl #453b17) */
html[data-theme="dark"] .t-row.focus { background: #1b2a20; color: #9bcca9; }
html[data-theme="dark"] .t-row .tw { color: rgba(223, 238, 227, .45); }
html[data-theme="dark"] .t-row .num { background: #1b2a20; color: #9bcca9; border-color: #9bcca9; }
html[data-theme="dark"] .t-row .anc { background: linear-gradient(transparent 58%, #453b17 58%); }
/* 밤 숲 띠: 종이에서 실루엣 셋이 겹겹이 깊어지며 한 단 어두운 밤으로. 별빛은 이 띠에만 */
html[data-theme="dark"] .tl1 { fill: #1a2a20; }
html[data-theme="dark"] .tl2 { fill: #0f1a13; }
html[data-theme="dark"] .motes .m-leaf { opacity: .1; }
html[data-theme="dark"] .motes .m-star { display: inline; fill: #f3efd6; opacity: .55; }
html[data-theme="dark"] .motes .m-star.tw { animation: twinkle var(--d, 5s) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .18; } to { opacity: .7; } }
/* 땅: 구멍 #0c0704, 두더지 밝기 .8(라이브 다크) */
html[data-theme="dark"] .hole { background: #0c0704; }
html[data-theme="dark"] .mole { filter: brightness(.8); }
html[data-theme="dark"] .foot { color: #eadfce; }
html[data-theme="dark"] .foot-logo.logo-l { display: none; }
html[data-theme="dark"] .foot-logo.logo-d { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .kid .kid-copy, .js .kid .kid-media, .js .root-body, .js .t-row { opacity: 1 !important; transform: none !important; }
  .mole { transform: none; }
  .motes .drift, .cue svg, .motes .m-star.tw { animation: none !important; }
}

/* ── A2 실험판 껍데기(2026-10-16, shell.js) ── */
/* 갈아 끼운 첫 화면 자리: 시안이 자기 hero.css 로 채운다. 기본은 화면 한 장 */
.hero-v { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero-err { padding: 120px 24px; text-align: center; color: var(--muted); }
/* 머리글이 첫 화면 위에 투명하게 겹칠 때(ctx.setNav("overlay-light" | "overlay-dark")) */
html.nav-ov .top { background: transparent; border-bottom-color: transparent; transition: background .3s ease, border-color .3s ease; }
html.nav-ov-light .top { color: #fff; }
html.nav-ov-light .top .page-nav a:not(.nav-cta), html.nav-ov-light .top .theme-toggle { color: rgba(255, 255, 255, .86); }
html.nav-ov-light .top .page-nav a:not(.nav-cta):hover, html.nav-ov-light .top .theme-toggle:hover { color: #fff; }
html.nav-ov-light .top .brand .logo-light { display: none; }
html.nav-ov-light .top .brand .logo-dark { display: block; }
html.nav-ov-dark .top .page-nav a:not(.nav-cta), html.nav-ov-dark .top .theme-toggle { color: rgba(21, 22, 19, .78); }
html[data-theme="dark"].nav-ov-dark .top .brand .logo-dark { display: none; }
html[data-theme="dark"].nav-ov-dark .top .brand .logo-light { display: block; }
.top { transition: background .3s ease, border-color .3s ease, color .3s ease; }

/* 시안 고르기(오른쪽 아래, 시안에만) */
.a2-pick { position: fixed; right: 12px; bottom: 12px; z-index: 70; display: flex; align-items: flex-end; gap: 8px;
  font: 600 12px/1.2 var(--font); color: #183525; }
.a2-pick-toggle { padding: 7px 11px; border: 0; border-radius: 9px; background: rgba(24, 53, 37, .86); color: #fff; font: inherit; cursor: pointer; }
.a2-pick-rows { display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.a2-pick.closed .a2-pick-rows { display: none; }
.a2-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.a2-lab { width: 46px; color: rgba(24, 53, 37, .6); }
.a2-row button { padding: 5px 9px; border: 1px solid rgba(24, 53, 37, .16); border-radius: 7px; background: #fff; color: #183525; font: inherit; cursor: pointer; }
.a2-row button:hover { border-color: #2f6b46; }
.a2-row button.on { background: #2f6b46; border-color: #2f6b46; color: #fff; }
html[data-theme="dark"] .a2-pick-rows { background: rgba(22, 25, 22, .94); }
html[data-theme="dark"] .a2-lab { color: rgba(223, 238, 227, .55); }
html[data-theme="dark"] .a2-row button { background: #1b211d; color: #dfeee3; border-color: rgba(223, 238, 227, .16); }
html[data-theme="dark"] .a2-row button.on { background: #57b07c; border-color: #57b07c; color: #0d100e; }
@media (max-width: 700px) { .a2-lab { width: auto; } .a2-pick-rows { max-width: calc(100vw - 90px); } }

/* ── 10-16: 질문칸 데모와 Explorer 강조 장면 자리 ── */
.root-body .as-host { margin-top: 8px; }
.kid-wide { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.kid-wide .kid-copy { max-width: 46em; }
.kid-spot { --spot-len: 280vh; }
@media (max-width: 700px) { .kid-spot { --spot-len: 240vh; } }
/* 줄기의 잔가지(투칸이 스크롤을 따라 내려오며 앉는 자리, 10-16) */
.br-twigs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.twig { position: absolute; width: 40px; height: 26px; margin: -13px 0 0 0; }
.twig.l { transform: scaleX(-1); transform-origin: 0 50%; }
.twig svg { display: block; width: 100%; height: 100%; }
.twig .tw-wood { fill: #6b4a2e; } .twig .tw-l1 { fill: #57b07c; } .twig .tw-l2 { fill: #3d8256; }
html[data-theme="dark"] .twig .tw-wood { fill: #5c3e27; } html[data-theme="dark"] .twig .tw-l1 { fill: #468d63; } html[data-theme="dark"] .twig .tw-l2 { fill: #316845; }

/* ── 10-20 04:06 Y "mac 전용 베젤 말고, 검정색 테두리만 있는게 좋겠어. 크게 바꿀 것 없이, 붉은색 황색 녹색 버튼 없애고 상하좌우의 테두리 모두 얇게 통일시켜줘." ──
   제품 화면(Reader, Memo, Explorer 강조 장면과 그 확대, 확대 속 실앱)의 창 제목 줄과 창 버튼 셋을 걷고, 검정 테두리를 네 변 같은 두께로 조금 얇게(8px → 6px).
   화면 그림 네 모서리 반지름 = 바깥 반지름 - 테두리(동심). 바탕 빛과 그림자, 확대 움직임은 그대로(shared/mac-shot.css).
   히어로 질문칸이 여는 실앱 창(.aw)은 제목 줄에 돌아가기 단추가 있어 그대로 둔다. 확대 속 실앱의 닫기 단추는 제목 줄이 없어져 창틀 오른쪽 위 모서리에 걸친다
   (창틀 위 바깥에 두면 확대 창이 화면을 거의 채워 어두운 막 아래 머리글의 '시작하기' 단추와 겹쳤다) */
.mac-shot:not(.aw) { --mb: clamp(3px, .42vw, 6px); --bar: var(--mb); }
.mac-shot:not(.aw) > .plights { display: none; }
.mac-shot:not(.aw) > img, .mac-shot:not(.aw) .spot-stage > img, .mac-shot:not(.aw) .spot-veil { border-radius: calc(var(--mr) - var(--mb)); }
.mac-shot:not(.aw) > .lz-x { top: -12px; right: -12px; width: 26px; height: 26px; background: #15181a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .32), 0 4px 12px rgba(0, 0, 0, .35); }
.mac-shot:not(.aw) > .lz-x:hover { background: #2b3236; }