/* ============================================================
   랜딩 다크 테마 레이어 — index.html · pricing.html 전용
   설계: docs/Implementation-Plan/landing_ai_experience.md

   ★★ styles.css 원본은 고치지 않는다(가역성).
      <link> 한 줄과 body 의 theme-dark 클래스만 빼면 전부 밝은 원본으로 돌아간다.

   ★★ :root 에 토큰을 넣지 않는다 — styles.css 는 index/pricing 만 쓰는 파일이 아니다.
      app.html · workspace.html · account.html · terms.html · privacy.html 이 같이 로드하므로
      :root 를 뒤집으면 앱 콘솔과 약관 화면 5개가 함께 어두워진다.
      반드시 body.theme-dark 스코프로만 건다. (partner.html 은 styles.css 를 링크하지 않아 자동 제외)

   ★ --teal(#00b088)은 #0f0f11 위에서 약 4.0:1 로 S7 기준(4.5:1) 미달이라 밝게 올렸다.
   ★ --blue 는 그대로 둔다 — 버튼은 AI 의 목소리가 아니라 그 표면의 '행동'이므로 시각계를 따른다.
   ============================================================ */

body.theme-dark {
  /* 앱의 AI 표면 토큰(--aiop-*, src/ui/server.ts)과 같은 값 — 블랙 & 차콜.
     캔버스 #0f0f11 / 카드·말풍선 #1a1a1e / 입력·칩 #151518 / 보더 #2a2a30 */
  --bg: #0f0f11;
  --bg-alt: #1a1a1e;
  --ink: #ececf1;
  --muted: #a8a8b3;
  /* #74747e 는 #0f0f11 위에서 3.75:1 로 S7(4.5:1) 미달이라 올렸다. */
  --muted-2: #8b8b95;
  --border: #2a2a30;
  --line-strong: #3a3a42;
  --accent-blue: rgba(23, 92, 255, 0.16);
  --accent-green: rgba(92, 224, 176, 0.12);
  --teal: #5ce0b0;
  /* 링크·라벨용 파랑. --blue(#175cff)는 이 바탕에서 3.31:1 로 미달이라 텍스트에는 못 쓴다.
     면(버튼 배경)에는 --blue 를 그대로 쓴다 — 흰 글자와의 대비는 충분하다. */
  --blue-text: #7aa9ff;
  --shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.35);
  background: var(--bg);
  color: var(--ink);
}

/* ── 헤더 ── */
.theme-dark .nav { background: rgba(15, 15, 17, 0.82); }
.theme-dark .nav.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.theme-dark .nav__toggle span { background: var(--ink); }

/* ── 버튼 ── */
.theme-dark .btn--ghost { background: transparent; color: #9dbaff; border-color: #33405e; }
.theme-dark .btn--ghost:hover { background: rgba(23, 92, 255, 0.14); }
.theme-dark .btn--on-grad { background: #fff; color: var(--blue); }

/* ── 흰 판을 쓰는 컴포넌트(단일 규칙 하드코딩분) ──
   styles.css 에서 background:#fff 를 직접 쓰는 규칙만 골라 덮는다. */
.theme-dark .tiers-card,
.theme-dark .pricing-new,
.theme-dark .faq__item,
.theme-dark .cap,
.theme-dark .usecase,
.theme-dark .why-ic,
.theme-dark .cap-index span,
.theme-dark .uc,
.theme-dark .uc-tab,
.theme-dark .roadmap-strip span { background: var(--bg-alt); border-color: var(--border); color: var(--ink); }
.theme-dark .uc-tab { color: var(--muted); }
.theme-dark .uc-tab:hover { color: var(--ink); border-color: #3a4a6b; }
.theme-dark .uc-tab.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── 히어로·섹션 ── */
.theme-dark .hero { background: var(--bg); }
.theme-dark .hero__kicker { color: var(--teal); }
.theme-dark .hero__sub, .theme-dark .section-head p { color: var(--muted); }
.theme-dark .chip { background: var(--accent-blue); color: #9dbaff; }
.theme-dark .chip--green { background: var(--accent-green); color: var(--teal); }
.theme-dark .hero__badges li { color: var(--muted); }
/* 그라디언트 제목 — 다크에서 인디고가 가라앉아 밝은 쪽으로 올린다. */
.theme-dark .grad { background: linear-gradient(90deg, #6f9bff 0%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; }

/* ── 이미 어두운 구역과의 경계 ──
   릴(.reel-win)·모닝데모(.activity-screen)는 원래 어두운 표면이었다. 전역 다크가 되면
   배경과 뭉개지므로 한 단계 밝은 면 + 경계선으로 띄운다. */
.theme-dark .morning { background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.theme-dark .activity-screen { background: var(--bg-alt); border: 1px solid var(--border); }
.theme-dark .reel-win { border: 1px solid var(--border); }
.theme-dark .reel-nv, .theme-dark .reel-pc__addr, .theme-dark .reel-nv__tool--drop,
.theme-dark .reel-ai-card { background: #1b1b20; color: var(--ink); }
.theme-dark .cm-doc, .theme-dark .cm-pub__row, .theme-dark .cm-cite { background: var(--bg-alt); border-color: var(--border); }

/* ── 통증·기능 카드 ── */
.theme-dark .pain__ic, .theme-dark .pain__time { background: rgba(232, 96, 76, 0.16); color: #ff9d8a; }
.theme-dark .feature--operator { background: linear-gradient(180deg, var(--bg-alt), #1a1725); }

/* ── FAQ ── */
.theme-dark .faq__item summary { color: var(--ink); }
.theme-dark .faq__item p { color: var(--muted); }

/* ── 푸터 ── */
.theme-dark .footer { background: var(--bg-alt); border-top: 1px solid var(--border); color: var(--muted); }
.theme-dark .footer a { color: var(--muted); }
.theme-dark .footer a:hover { color: var(--ink); }

/* #plan 섹션 */
.theme-dark .plan { background: var(--bg-alt); }
.theme-dark .plan-card { background: #0f0f11; border-color: var(--border); }
/* ★.plan-card 안의 .try-plan 은 카드가 아니라 내용이다. 흰 배경을 지우지 않으면
   다크용으로 칠한 글자색(near-white)이 흰 바탕과 만나 제목 대비가 1.18:1 이 된다 —
   실측으로 6개 항목 전부 WCAG AA 미달이었다. 카드 계층은 한 겹이면 충분하다(S12). */
.theme-dark .plan-card .try-plan {
  max-width: none; margin: 18px 0 0; padding: 0;
  background: none; border: none; box-shadow: none;
}
.theme-dark .plan-card__title { color: var(--ink); }
.theme-dark .plan-card .try-plan__sub { color: var(--muted); }
.theme-dark .plan-card .try-badge { background: rgba(255, 255, 255, .06); border-color: var(--border); color: var(--muted); }
.theme-dark .plan-card .try-chip { background: transparent; border-color: var(--border); color: var(--muted); }
.theme-dark .plan-card .try-chip:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.theme-dark .plan-card .try-chip.is-on { background: rgba(23, 92, 255, .18); border-color: #3f6dff; color: #b9ccff; }
.theme-dark .plan-card .try-row { border-top-color: var(--border); }
.theme-dark .plan-card .try-row__when b, .theme-dark .plan-card .try-row__title { color: var(--ink); }
.theme-dark .plan-card .try-row__when span, .theme-dark .plan-card .try-row__why { color: var(--muted-2); }
.theme-dark .plan-card .try-row__ch { color: var(--blue-text); }
.theme-dark .plan-card .try-more { color: var(--muted); border-color: var(--border); }
.theme-dark .plan-card .try-more:hover { color: var(--blue-text); border-color: var(--blue-text); }
.theme-dark .plan-card .try-row__why-tag { color: var(--muted-2); background: rgba(255, 255, 255, .05); border-color: var(--border); }

/* 히어로 체험 입력 */
.theme-dark .hero__try-row input { background: #16161a; border-color: var(--border); color: var(--ink); }
.theme-dark .hero__try-row input::placeholder { color: var(--muted-2); }
.theme-dark .hero__try-label { color: var(--muted); }
.theme-dark .hero__try-note { color: var(--muted-2); }

/* ── 좌측 레일 ──
   ★여기서 .shell-side 배경을 덮지 않는다. 레일은 본문(#0f0f11)보다 한 단계 더 어두운
     프레임(#08080a)이어야 하고, 그 값은 shell.css 의 --shell-frame 이 정본이다.
     선택 상태도 shell.css 의 무채색 면을 쓴다 — 파랑 예산은 행동(상단 CTA)이 갖는다(S11). */

/* ── 다운로드·모달·토스트 ── */
.theme-dark .dl-card { background: var(--bg-alt); border-color: var(--border); }
.theme-dark .dl-modal__panel { background: var(--bg-alt); color: var(--ink); }
.theme-dark .promo-chat__bubble { background: var(--bg-alt); border: 1px solid var(--border); color: var(--ink); }
.theme-dark .promo-chat__text { color: var(--muted); }

/* ── 이미지 자산 ── */
/* 로고 마크는 currentColor 라 자동으로 따라온다. 흰 배경 스크린샷류만 살짝 눌러 눈부심을 막는다. */
.theme-dark .uc-panel img, .theme-dark .dl-card img { filter: brightness(.92); }

/* ── 요금제(pricing.html) ── */
.theme-dark .pricing-hero { background: var(--bg); }
.theme-dark .pricing-hero__meta span { background: var(--bg-alt); border-color: var(--border); color: var(--muted); }
.theme-dark table, .theme-dark th, .theme-dark td { border-color: var(--border); color: var(--ink); }
.theme-dark thead th { background: var(--bg-alt); }

/* ============================================================
   대비 교정 — 다크 전환 후 실측(브라우저 계산)으로 잡은 것만.
   ① 밝은 면이 남아 있던 컴포넌트  ② 파랑을 '글자색'으로 쓰던 자리
   ============================================================ */

/* ① 밝은 면이 남은 컴포넌트 (index) */
.theme-dark .pain { background: var(--bg-alt); border-color: var(--border); }
.theme-dark .pain h3 { color: var(--ink); }
.theme-dark .pain p { color: var(--muted); }
.theme-dark .activity-post { background: #16161a; border-color: var(--border); }
.theme-dark .activity-post b { color: var(--ink); }
.theme-dark .activity-post small { color: var(--muted); }
.theme-dark .activity-action { background: rgba(92, 224, 176, 0.14); color: var(--teal); }
.theme-dark .activity-action--heart.is-active { background: rgba(255, 122, 158, 0.16); color: #ff9db8; }
.theme-dark .activity-live { background: rgba(92, 224, 176, 0.14); color: var(--teal); }
.theme-dark .activity-comment p { color: var(--muted); }
/* 콘텐츠 머신 목업의 스켈레톤 선·점 */
.theme-dark .cm-dot { background: #3a3a42; }
.theme-dark .cm-line { background: #2f2f36; }
.theme-dark .cm-h { background: #43434c; }
.theme-dark .cm-sch { background: var(--bg-alt); color: var(--muted); }

/* ① 밝은 면이 남은 컴포넌트 (pricing) */
.theme-dark .plan,
.theme-dark .onetime,
.theme-dark .pfaq__item { background: var(--bg-alt); border-color: var(--border); color: var(--ink); }
.theme-dark .plan h3, .theme-dark .onetime h3, .theme-dark .pfaq__item summary { color: var(--ink); }
.theme-dark .plan li, .theme-dark .onetime li, .theme-dark .pfaq__item p { color: var(--muted); }
.theme-dark .value-strip { background: var(--bg-alt); color: var(--ink); border-color: var(--border); }

/* ② 파랑을 글자색으로 쓰던 자리 — 면이 아니라 글자다. */
.theme-dark a:not(.btn):not(.shell-item):not(.skip-link) { color: var(--blue-text); }
.theme-dark .cap-index i,
.theme-dark .cap-cmd,
.theme-dark .cm-cite__chip,
.theme-dark .uc-panel__tag,
.theme-dark .reel-nv__tags span,
.theme-dark .reel-igc__tags span,
.theme-dark .reel-nv__doc .reel-nv__tags span,
.theme-dark [class*="tags"] span { color: var(--blue-text); }
.theme-dark .cap-cmd { background: var(--accent-blue); }
.theme-dark .uc-panel__chips span { color: var(--blue-text); }
/* .cm-cite__srcs 는 흰 면(#f4f7fc)이 남아 있던 마지막 자리 — 면을 어둡게 하고 글자를 올린다. */
/* 칩 자체가 흰 면(#f4f7fc)을 갖고 있다 — 컨테이너가 아니라 span 을 덮어야 한다. */
.theme-dark .cm-cite__srcs { background: none; border-color: var(--border); }
.theme-dark .cm-cite__srcs span { background: var(--bg-alt); color: var(--muted); }
.theme-dark .footer h4 { color: var(--muted); }
.theme-dark .footer .footer__bottom span { color: var(--muted-2); }