/* 다크 모드(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"] .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; }
/* ── 08-26 하단 5섹션(정진 시안 tk-*): 라이트 팔레트 = 연세이지·세이지·스카이·테라코타·아이보리 → 같은 hue의 다크 토큰
   (하위 페이지 design/about/wiki/pricing/blog와 동일 페어라 그 값을 그대로 쓴다). 악센트는 밝은 톤(대비 ≥ 6:1). ── */
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 { background: #3a1b12; color: #f6e4d8; --tk-accent: #ffd3a6; }
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(255, 226, 186, .08); color: #f6e4d8; border-color: rgba(255, 244, 230, .18); }
html[data-theme="dark"][data-page="index"] .tk-card:nth-child(1) { background: rgba(255, 226, 186, .18); }
html[data-theme="dark"][data-page="index"] .tk-card:nth-child(2) { background: rgba(255, 226, 186, .13); }
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; }   /* 그림자 없음(랜딩과 통일, 09-19) */
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; }
/* 하위 페이지 헤더 왼쪽 돌아가기 링크(운영자 09-23): nav 링크와 같은 다크 색 */
html[data-theme="dark"] .to-tree { color: #a9ada2; }
html[data-theme="dark"] .to-tree:hover { 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; }
/* 법적 문서(개인정보처리방침·이용약관, 운영자 09-23): 종이색 → 짙은 먹색 */
html[data-theme="dark"][data-page="legal"] { --bg: #151814; --text: #e6eae2; --muted: #b3b9ad; --accent: #8fd3a8; --card: rgba(255,255,255,.05); --line: rgba(230,234,226,.14); --rule: rgba(230,234,226,.45); background: #151814 !important; }
/* 기능들(운영자 09-24): 연초록의 색상은 지키고 명도만 내린다 */
html[data-theme="dark"][data-page="features"] { --bg: #14231a; --text: #dfeee3; --muted: #a9c2b1; --accent: #8fd3a8; --accent-strong: #57b07c; --card: rgba(255,255,255,.05); --line: rgba(223,238,227,.14); background: #14231a !important; }
html[data-theme="dark"][data-page="features"] .page-nav a.on { color: #8fd3a8; }
/* 다운로드(운영자 09-23): 노랑의 색상은 지키고 명도만 내린다 */
html[data-theme="dark"][data-page="download"] { --bg: #33290a; --text: #f5ecd0; --muted: #d6c89c; --accent: #f3c83a; --card: rgba(255,250,230,.07); --line: rgba(245,236,208,.2); background: #33290a !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; }
html[data-theme="dark"][data-page="download"] .page-nav a.on { color: #f3c83a; }
/* 섹션색 기반 반투명 글자(원본이 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 규칙, 09-19 반영) */
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; }

/* 헤더 로고(운영자 09-25): 아이콘 + Thinket. 을 한 장의 SVG 로(assets/logo/). 높이는 .brand 글자 크기의 .847배 → 글자는 예전과 같은 21px(09-25: 아이콘을 글자 높이에 맞춰 SVG 가 낮아짐, 예전 1.1배).
   라이트는 검정 글씨(thinket-logo-black.svg), 다크는 흰 글씨(thinket-logo-white.svg) */
.brand-logo { display: block; height: .847em; width: auto; }
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }

/* ── 로그인 상태 nav CTA와 계정 서랍(옛 랜딩 2026-09-08, 09-09 → 새 랜딩 이식 09-26, nav-account.js): 로그인했으면 '시작하기' 나무판이
   아바타 + '내 숲으로'가 되고, 올리면(터치는 탭) 서랍(내 프로필, 로그아웃)이 열린다. 나무판은 그대로 두고 안에 아바타만 들인다.
   판정 전 감춤 = 각 페이지 부트 한 줄이 붙이는 html[data-auth="1"](직전 방문에 로그인이었을 때만). 판정 후 스크립트가 뗀다.
   새 랜딩의 CTA 는 두 언어 이름을 겹쳐 두는 grid(.lang-fixed)라, 칩일 때는 가로로 늘어놓도록 flex 로 바꾼다.
   메인(index.html)은 이 파일을 읽지 않으므로 같은 블록이 그 인라인 스타일에도 있다. 고칠 때 두 곳을 함께 ── */
html[data-auth="1"] .nav-cta { visibility: hidden; }
.top .page-nav a.nav-cta.nav-me { display: inline-flex; align-items: center; gap: 7px; padding-left: 5px; }
@media (max-width: 560px) { .top .page-nav a.nav-cta.nav-me { justify-content: center; padding-left: 16px; } }
.nav-me-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: rgba(255, 255, 255, .92); color: #5a3c1e; font-size: 11px; 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; }
/* 계정 서랍: 칩 아래 고정 위치. 열려 있는 동안만 body 에 존재한다(언어 전환의 DOM 대조 불변식, nav-account.js 머리말) */
.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; }