/* 다크 모드(2026-08-21, 운영자: "페이지 다크모드 전환버튼 만들어서 적용, 색 대비 고려해서 합리적으로").
   축 = html[data-theme="dark"](공개 페이지 공통 규칙) · 저장 키 = fs_theme(앱·구 페이지와 공유 → 데모 iframe은 storage
   이벤트로 따라온다). 페이지마다 섹션 색이 다르므로(about 짙은 숲·design 연두·wiki 청록·blog 베이지·pricing 주황)
   **색상(hue)은 지키고 명도만 내린다** — 페이지 정체성이 다크에서도 유지된다. 토큰은 html[data-page]로 가른다.
   대비(WCAG): 본문 ≥ 12:1 · muted ≥ 8:1 · 강조색 ≥ 6:1 실측(라이트 원본은 그대로).
   🔴 브랜드 초록(#47a66c 계열)·형광펜 노랑은 반전하지 않는다 — 밝기만 올린다(앱 다크 규칙과 동일). */

/* ── 토글 버튼(nav의 globe 옆, 같은 문법). 🔴 .nav-globe 클래스를 **공유하지 않는다** — 랜딩·lang-swap.js가
   `querySelector('.nav-globe')`로 첫 요소를 언어 버튼으로 잡기 때문에, 같은 클래스를 주면 토글이 언어 전환을 가로챈다
   (08-21 실측: href 없는 버튼이 fetch(null)→404→location.href=null). ── */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; font: inherit; line-height: 0; }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: inline; }

html[data-theme="dark"] { color-scheme: dark; }
/* 버튼은 globe(a)와 같은 자리·같은 색 규칙을 탄다(랜딩 .landing-nav-links a / 하위 .page-nav a는 a 전용 선택자라 여기서 맞춘다) */
.landing-nav-links .theme-toggle, .page-nav .theme-toggle { color: #686a63; transition: color .15s ease; }
.landing-nav-links .theme-toggle:hover, .page-nav .theme-toggle:hover { color: #151613; }
html[data-theme="dark"] .landing-nav-links .theme-toggle, html[data-theme="dark"] .page-nav .theme-toggle { color: #a9ada2; }
html[data-theme="dark"] .landing-nav-links .theme-toggle:hover, html[data-theme="dark"] .page-nav .theme-toggle:hover { color: #eceee6; }
html[data-theme="dark"] .landing-nav-links a:not(.nav-cta) { color: #a9ada2; }
html[data-theme="dark"] .landing-nav-links a:not(.nav-cta):hover { color: #eceee6; }

/* ── 랜딩(index) ── */
html[data-theme="dark"][data-page="index"] {
  --bg: #121411; --panel: #1a1d19; --panel-2: #20241f; --hero: #1c211c; --border: #2e332c; --line: rgba(236, 238, 230, .13);
  --text: #eceee6; --muted: #a9ada2; --faint: #858a80; --accent: #57b07c; --accent-dark: #8fd3a8; --accent-soft: #1f3a2a;
  --highlight: #4a3f14; --brown: #8a6440; background: #121411 !important; }
html[data-theme="dark"][data-page="index"] .landing-nav { background: #161916; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
html[data-theme="dark"][data-page="index"] .nav-menu { background: #161916; border-color: #2e332c; box-shadow: 0 18px 44px rgba(0,0,0,.45); }   /* 09-11 햄버거 팝업 */
html[data-theme="dark"][data-page="index"] .nav-menu a { color: #eceee6; }
html[data-theme="dark"][data-page="index"] .nav-menu a:hover { background: #1f3a2a; }
html[data-theme="dark"][data-page="index"] .nav-menu a.nav-menu-cta { background: #57b07c; color: #0f2119; }
html[data-theme="dark"] .nav-menu-btn { color: #a9ada2; }
html[data-theme="dark"] .nav-menu-btn:hover, html[data-theme="dark"] .nav-menu-btn[aria-expanded="true"] { color: #eceee6; background: #1f3a2a; }
html[data-theme="dark"][data-page="index"] .question-shell { background: rgba(26, 29, 25, .96); border-color: rgba(87, 176, 124, .6);
  box-shadow: 0 20px 70px rgba(0,0,0,.45), 0 0 0 4px rgba(87, 176, 124, .12); }
html[data-theme="dark"][data-page="index"] #root-question { color: var(--text); }
html[data-theme="dark"][data-page="index"] #root-question::placeholder { color: #8a8e85; }
/* 섹션 강조색(--section-accent)은 라이트의 짙은 초록/갈색이라 다크 지면에서 2.7:1로 가라앉는다 → 밝은 톤으로 */
html[data-theme="dark"][data-page="index"] .design-section { --section-accent: #bfe7ca; }
html[data-theme="dark"][data-page="index"] .about-section { --section-accent: #9fd9b4; }
html[data-theme="dark"][data-page="index"] .wiki-section { --section-accent: #7fc6d2; }
html[data-theme="dark"][data-page="index"] .blog-section { --section-accent: #d9b088; }
html[data-theme="dark"][data-page="index"] .pricing-section { --section-accent: #ffd3a6; }
html[data-theme="dark"][data-page="index"] .product-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"][data-page="index"] .product-card p { color: #c2d2c6; }
html[data-theme="dark"][data-page="index"] .about-section { background: #0f2119; color: #eef5ef; }
html[data-theme="dark"][data-page="index"] .design-section { background: #14231a; color: #dfeee3; }
html[data-theme="dark"][data-page="index"] .wiki-section { background: #11252a; color: #dfeef0; }
html[data-theme="dark"][data-page="index"] .blog-section { background: #241b12; color: #f1e6d6; }
html[data-theme="dark"][data-page="index"] .pricing-section { background: #3a1b12; color: #f6e4d8; }
html[data-theme="dark"][data-page="index"] .landing-footer { background: #0d110e !important; }
html[data-theme="dark"][data-page="index"] .pcard { border-color: rgba(255,255,255,.12); }   /* 09-11 하단 카드 5장 — 색은 종전 다크 타일 값 그대로 */
html[data-theme="dark"][data-page="index"] .pcard:hover, html[data-theme="dark"][data-page="index"] .pcard:focus-visible { box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
html[data-theme="dark"][data-page="index"] .pcard-about   { --pcard-bg: #0f2119; --pcard-ink: #eef5ef; --pcard-accent: #9fd9b4; }
html[data-theme="dark"][data-page="index"] .pcard-design  { --pcard-bg: #14231a; --pcard-ink: #dfeee3; --pcard-accent: #8fd3a8; }
html[data-theme="dark"][data-page="index"] .pcard-wiki    { --pcard-bg: #11252a; --pcard-ink: #dfeef0; --pcard-accent: #7fc6d2; }
html[data-theme="dark"][data-page="index"] .pcard-blog    { --pcard-bg: #241b12; --pcard-ink: #f1e6d6; --pcard-accent: #d9b088; }
html[data-theme="dark"][data-page="index"] .pcard-pricing { --pcard-bg: #3a1b12; --pcard-ink: #f6e4d8; --pcard-accent: #ffd3a6; }
/* ── 08-26 하단 5섹션(정진 시안 tk-*): 라이트 팔레트 = 연세이지·세이지·스카이·테라코타·아이보리 → 같은 hue의 다크 토큰
   (하위 페이지 design/about/wiki/pricing/blog와 동일 페어라 그 값을 그대로 쓴다). 악센트는 밝은 톤(대비 ≥ 6:1). ── */
html[data-theme="dark"][data-page="index"] .row[data-key="explorer"] { --row-tint: #182219; }   /* 09-11 롱폼 행 판(라이트 index.html .row[data-key]) */
html[data-theme="dark"][data-page="index"] .row[data-key="reader"]   { --row-tint: #182219; }   /* 09-11 세 행 통일(Explorer 값) */
html[data-theme="dark"][data-page="index"] .row[data-key="memo"]     { --row-tint: #182219; }
html[data-theme="dark"][data-page="index"] .flow-section { --fl-bg: #172019; --fl-bg2: #1f2c22; --fl-ink: #f0f2ec; --fl-accent: #86c69b; --fl-line: rgba(255,255,255,.38); --fl-fill: rgba(255,255,255,.08); --fl-off-fill: rgba(255,255,255,.06); --fl-off-line: rgba(255,255,255,.35); --fl-off-ink: rgba(255,255,255,.6); --fl-hl: #c9b255;
  --fl-replay-bd: rgba(255,255,255,.28); --fl-replay-bg: rgba(255,255,255,.06); --fl-replay-ink: #cfe0d2; --fl-replay-bg-h: rgba(255,255,255,.14); --fl-replay-ink-h: #fff; }   /* 09-11 사용 흐름 띠 — 종전 검은 띠 값 그대로(라이트 토큰은 index.html .flow-section) */
html[data-theme="dark"][data-page="index"] .hv-section { --hv-bg: #172019; --hv-bg2: #1f2c22; --hv-ink: #f0f2ec; --hv-accent: #9fe3b6; --hv-glow: rgba(159,227,182,.6);
  --hv-card: #1d2a20; --hv-card-line: rgba(255,255,255,.16); --hv-bar: rgba(255,255,255,.28); --hv-bar2: rgba(255,255,255,.5); --hv-hl: #c9b255;
  --hv-chip: #d9c25a; --hv-chip-ink: #4a3a00; --hv-btn: #9fe3b6; --hv-btn-ink: #0f2119; --hv-menu: #22302a; --hv-menu-hl: #2f4a38; }   /* 09-11 갈무리 띠(라이트 토큰은 index.html .hv-section) — 카드뉴스 002 #08 다크 값 */
html[data-theme="dark"][data-page="index"] .hv-section .flow-replay { background: rgba(255,255,255,.06); color: #cfe0d2; border-color: rgba(255,255,255,.28); }
html[data-theme="dark"][data-page="index"] .hv-section .flow-replay:hover { background: rgba(255,255,255,.14); color: #fff; }
html[data-theme="dark"][data-page="index"] .tk-sections { --tk-bg: #121411; background: #121411; }
html[data-theme="dark"][data-page="index"] .tk-s1 { background: #14231a; color: #dfeee3; --tk-accent: #8fd3a8; }
html[data-theme="dark"][data-page="index"] .tk-s2 { background: #224a33; color: #eef5ef; --tk-accent: #bfe7ca; }
html[data-theme="dark"][data-page="index"] .tk-s3 { background: #11252a; color: #dfeef0; --tk-accent: #7fc6d2; }
html[data-theme="dark"][data-page="index"] .tk-s4 { --tk-s4-bg: #26201a; --tk-s4-ink: #f1e6d6; --tk-s4-card: 200, 165, 123; --tk-s4-card-ink: #f1e6d6; --tk-s4-card-line: rgba(241, 230, 214, .16); --tk-accent: #d9b88e; --tk-s4-title1: #e8896b; }   /* 09-11 베이지/연갈색의 다크 상응: 짙은 타우프 바탕 · 갈색 틴트 카드 · 제목 = 밝힌 연갈색 */
html[data-theme="dark"][data-page="index"] .tk-s5 { background: #241b12; color: #f1e6d6; --tk-accent: #d9b088; }
html[data-theme="dark"][data-page="index"] .tk-card { background: rgba(var(--tk-s4-card), .12); }
html[data-theme="dark"][data-page="index"] .tk-card:nth-child(1) { background: rgba(var(--tk-s4-card), .26); }
html[data-theme="dark"][data-page="index"] .tk-card:nth-child(2) { background: rgba(var(--tk-s4-card), .19); }
html[data-theme="dark"][data-page="index"] .tk-card i { opacity: .7; }
html[data-theme="dark"][data-page="index"] .tk-title .tk-term .tk-tip { background: #0d110e; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
html[data-theme="dark"][data-page="index"] .tk-scroll { color: #f1e6d6; }
html[data-theme="dark"][data-page="index"] .howto-modal__card { background: var(--panel); }

/* ── 하위 페이지 공통(상단 nav·선택 영역) ── */
html[data-theme="dark"]:not([data-page="index"]) .top { background: #161916; color: #eceee6; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
html[data-theme="dark"] .page-nav a:not(.nav-cta) { color: #a9ada2; }
html[data-theme="dark"] .page-nav a:not(.nav-cta):hover { color: #eceee6; }
html[data-theme="dark"] .nav-cta, html[data-theme="dark"] .nav-cta:hover { color: #fff; }   /* 나무판 CTA 글자는 다크에서도 흰색(대비 실측 3.5→흰 글자로 복귀) */
html[data-theme="dark"] .brand { color: #eceee6; }
html[data-theme="dark"] ::selection { background: #5b4f1c; color: #fff7d6; }

/* ── 페이지별 토큰(hue 유지) ── */
html[data-theme="dark"][data-page="about"]  { --bg: #0f2119; --text: #eef5ef; --muted: #b9c9bd; --accent: #9fd9b4; --accent-strong: #57b07c; --card: rgba(255,255,255,.06); --line: rgba(238,245,239,.16); background: #0f2119 !important; }
html[data-theme="dark"][data-page="design"] { --bg: #14231a; --text: #dfeee3; --muted: #a9bfb0; --accent: #8fd3a8; --accent-strong: #57b07c; --card: rgba(255,255,255,.06); --line: rgba(223,238,227,.16); background: #14231a !important; }
html[data-theme="dark"][data-page="wiki"]   { --bg: #11252a; --text: #dfeef0; --muted: #a6bfc3; --accent: #7fc6d2; --accent-strong: #57b07c; --card: rgba(255,255,255,.06); --line: rgba(223,238,240,.16); background: #11252a !important; }
html[data-theme="dark"][data-page="blog"], html[data-theme="dark"][data-page="post"] { --bg: #241b12; --text: #f1e6d6; --muted: #c4b39e; --accent: #d9b088; --card: rgba(255,250,240,.06); --line: rgba(241,230,214,.16); background: #241b12 !important; }
html[data-theme="dark"][data-page="pricing"] { --bg: #3a1b12; --text: #f6e4d8; --muted: #d9bfae; --accent: #ffd3a6; --card: rgba(255,244,230,.07); --line: rgba(246,228,216,.22); --surf-1: rgba(255,226,186,.08); --surf-2: rgba(255,226,186,.12); --surf-3: rgba(255,226,186,.16); --surf-4: rgba(255,226,186,.2); --terra: #ffb98a; background: #3a1b12 !important; }
html[data-theme="dark"][data-page="about"] .page-nav a.on { color: #9fd9b4; }
html[data-theme="dark"][data-page="design"] .page-nav a.on { color: #8fd3a8; }
html[data-theme="dark"][data-page="wiki"] .page-nav a.on { color: #7fc6d2; }
html[data-theme="dark"][data-page="blog"] .page-nav a.on, html[data-theme="dark"][data-page="post"] .page-nav a.on { color: #d9b088; }
html[data-theme="dark"][data-page="pricing"] .page-nav a.on { color: #ffb98a; }
/* 섹션색 기반 반투명 글자(원본이 rgba(텍스트색,.45~.74))는 토큰 텍스트로 */
html[data-theme="dark"] .motto, html[data-theme="dark"] .refs, html[data-theme="dark"] .maker, html[data-theme="dark"] .note,
html[data-theme="dark"] .toc-title, html[data-theme="dark"] .equation .op, html[data-theme="dark"] .trees .arrow,
html[data-theme="dark"] .fact-card .row.head { color: var(--muted); }
html[data-theme="dark"] .toc a.on { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .toc a:hover { background: rgba(255,255,255,.06); }
/* 요금제 크림 면(.tier 3장·베타 카드)은 페이지의 --surf-1~4 토큰이 그린다 — 위 pricing 토큰 블록이 알파만 낮춘다(09-06,
   선택자별 덧칠 3줄을 토큰으로 대체: 베타 카드처럼 새로 붙는 면이 덧칠 목록에서 빠지는 부류를 막는다). */
html[data-theme="dark"][data-page="pricing"] .tier .price { color: #ffb98a; }
html[data-theme="dark"] .fig img { box-shadow: 0 8px 28px rgba(0,0,0,.4); }
html[data-theme="dark"] img.fig-light { display: none; }

/* ── 로그인 상태 nav CTA(2026-09-08, nav-account.js): 아바타 + '내 숲으로'. 알약(나무판)은 그대로 두고 안에 아바타만 들인다.
   판정 전 감춤 = 각 페이지 부트 한 줄이 붙이는 html[data-auth="1"](직전 방문에 로그인이었을 때만). 판정 후 스크립트가 뗀다. ── */
html[data-auth="1"] .nav-cta { visibility: hidden; }
.nav-cta.nav-me { gap: 8px; padding-left: 6px; }
.nav-me-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(255, 255, 255, .92); color: #5a3c1e; font-size: 12px; font-weight: 720; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(90, 60, 30, .35); }
.nav-me-av.has-img { background: #fff; }
.nav-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 계정 서랍(09-09, nav-account.js): 칩 아래 고정 위치. 열려 있는 동안만 body에 존재한다(언어 전환 DOM 대조 불변식). 종이 면·매트 문법. */
.nav-me-menu { position: fixed; z-index: 120; min-width: 168px; padding: 6px; background: #fdfcf9; border: 1px solid #e1ddd5; border-radius: 12px 12px 6px 12px;
  box-shadow: 0 14px 36px rgba(28, 35, 30, .14); font-size: 13.5px; }
html[data-theme="dark"] .nav-me-menu { background: #222523; border-color: #33382f; box-shadow: 0 14px 36px rgba(0, 0, 0, .45); }
.nav-me-item { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #151613; text-decoration: none; cursor: pointer; }
.nav-me-item:hover, .nav-me-item:focus-visible { background: #f0ece5; outline: none; }
.nav-me-item.out { color: #8a5a3c; } .nav-me-item.out:disabled { opacity: .5; cursor: default; }
html[data-theme="dark"] .nav-me-item { color: #eceee6; } html[data-theme="dark"] .nav-me-item:hover, html[data-theme="dark"] .nav-me-item:focus-visible { background: #2c302b; }
html[data-theme="dark"] .nav-me-item.out { color: #e0b8a4; }
.nav-me-wait { padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid #e1ddd5; font-size: 12px; font-weight: 600; color: #686a63; }
html[data-theme="dark"] .nav-me-wait { border-bottom-color: #33382f; color: #a9ada2; }