/* SITE-STATIC-PAGES-THEME-01 — the footer's pages follow the LOTBI theme.
 *
 * 대표: "LOTBI © 2026 / 회사 소개 / 개인정보처리방침 / 이용안내 / 계정 삭제 /
 *        문의하기 — 이부분 클릭하면 왜 다크모드인핵 화이트모드로 바뀌는지"
 *
 * Measured before this file existed, with the saved theme at 'dark':
 *
 *   index.html            body rgb(21, 25, 34)     data-site-theme-bootstrap="dark"
 *   about.html            body rgb(247, 248, 251)  (no attribute)
 *   privacy.html          body rgb(247, 248, 251)  (no attribute)
 *   terms.html            body rgb(247, 248, 251)  (no attribute)
 *   account-deletion.html body rgb(247, 248, 251)  (no attribute)
 *   contact.html          body rgb(247, 248, 251)  (no attribute)
 *   404.html              body rgb(247, 248, 251)  (no attribute)
 *
 * The same thing happened again while this branch was open: PR #256 added
 * subscribe.html and the 전자상거래법 pages refund/exchange/dispute, and the
 * Home footer gained subscribe.html and refund.html. Both painted
 * rgb(247, 248, 251) with no attribute — the identical defect, one hour old.
 * validate_static_pages_theme_01 derives its page list from the Home footer
 * precisely so a new link cannot land unthemed; it failed on subscribe.html
 * and that is how these four were found.
 *
 * Six of six, on a dark OS and on a light one alike. Not a theme that broke:
 * a theme that was only ever wired to index.html. These pages carry no theme
 * code at all, so they render styles.css as written — always light.
 *
 * No module runs here, so body[data-site-theme] never appears. Everything
 * keys on the attribute the pre-paint bootstrap sets, which is why that
 * bootstrap had to be added to each page in the same commit:
 *
 *   "dark"                      → dark
 *   "system", or absent         → dark only while the OS is dark
 *   "light"                     → matched by nothing here, stays light
 *
 * The current neutral palette is measured by validate_static_pages_theme_01.
 * Text, legal copy and separators use #f5f5f5 on #212121. --line uses the
 * app's #424242 so legal pages and the Home shell draw the same rule.
 */

/* The dark wordmark is opt-in, exactly as it is in site-theme-tokens.css. */
.lotbi-brand-logo-dark {
  display: none;
}

/* ── Explicit Dark ────────────────────────────────────────────────────── */
html[data-site-theme-bootstrap="dark"] {
  color-scheme: dark;
  --bg: #212121;
  --panel: #212121;
  --text: #f5f5f5;
  --muted: #f5f5f5;
  --line: #424242;
  --accent: #f5f5f5;
  --soft: #2f2f2f;
  --brand-navy: #f5f5f5;
  --brand-line: #424242;
  --brand-soft: #212121;
}

html[data-site-theme-bootstrap="dark"] body {
  background: var(--bg);
  color: var(--text);
}

/* styles.css writes these four literally rather than through a token. */
html[data-site-theme-bootstrap="dark"] :where(.eyebrow, .kicker) { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .legal p { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .company-legal { color: #f5f5f5; }
/* SITE-PRIVACY-OVERSEAS-TRANSFER-01 카운터파트 — 제6조 6.1 국외이전 고지표의
   셀도 styles.css 가 #343942 로 문자 지정한다. 측정: 다크에서 rgb(52,57,66) on
   rgb(21,25,34) = 1.52:1. 개인정보 보호법 제28조의8 이 요구하는 고지표이고
   검수자가 실제로 읽어야 하는 표이므로, 다크에서 안 보이는 것은 그냥 대비
   미달이 아니라 고지 자체가 닿지 않는 것이다. 현재 대비는 검증 스크립트로 측정한다. */
html[data-site-theme-bootstrap="dark"] :where(.legal-table th, .legal-table td) { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .footer-service { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .company-separator { color: #f5f5f5; }

/* about.css does the same. */
html[data-site-theme-bootstrap="dark"] .about-core-message {
  border-color: var(--line);
  background: var(--panel);
}
html[data-site-theme-bootstrap="dark"] :where(.about-core-message p, .about-section > p) { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .about-principle { background: var(--panel); }
html[data-site-theme-bootstrap="dark"] .about-principle p { color: #f5f5f5; }

/* subscribe.css writes four colours literally. .plan-buy is the one that
   cannot simply be re-pointed: it is a solid brand button, so in Dark the
   surface inverts (--brand-navy resolves light) and white-on-white would
   swallow the label. The current #212121 on #f5f5f5 pair is measured in the
   static theme gate, as is the Home shell's solid control. */
html[data-site-theme-bootstrap="dark"] .plan-picker > legend { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .plan-status { color: #f5f5f5; }
html[data-site-theme-bootstrap="dark"] .plan-buy { color: #212121; }
html[data-site-theme-bootstrap="dark"] :where(.plan-buy:hover, .plan-buy:focus-visible) { background: #ffffff; }

html[data-site-theme-bootstrap="dark"] .lotbi-brand-logo-light { display: none; }
html[data-site-theme-bootstrap="dark"] .lotbi-brand-logo-dark { display: block; }

/* ── Following the device, whether chosen or never chosen ─────────────── */
@media (prefers-color-scheme: dark) {
  html[data-site-theme-bootstrap="system"],
  html:not([data-site-theme-bootstrap]) {
    color-scheme: dark;
    --bg: #212121;
    --panel: #212121;
    --text: #f5f5f5;
    --muted: #f5f5f5;
    --line: #424242;
    --accent: #f5f5f5;
    --soft: #2f2f2f;
    --brand-navy: #f5f5f5;
    --brand-line: #424242;
    --brand-soft: #212121;
  }

  html[data-site-theme-bootstrap="system"] body,
  html:not([data-site-theme-bootstrap]) body {
    background: var(--bg);
    color: var(--text);
  }

  html[data-site-theme-bootstrap="system"] :where(.eyebrow, .kicker),
  html:not([data-site-theme-bootstrap]) :where(.eyebrow, .kicker) { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .legal p,
  html:not([data-site-theme-bootstrap]) .legal p { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .company-legal,
  html:not([data-site-theme-bootstrap]) .company-legal { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] :where(.legal-table th, .legal-table td),
  html:not([data-site-theme-bootstrap]) :where(.legal-table th, .legal-table td) { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .footer-service,
  html:not([data-site-theme-bootstrap]) .footer-service { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .company-separator,
  html:not([data-site-theme-bootstrap]) .company-separator { color: #f5f5f5; }

  html[data-site-theme-bootstrap="system"] .about-core-message,
  html:not([data-site-theme-bootstrap]) .about-core-message {
    border-color: var(--line);
    background: var(--panel);
  }
  html[data-site-theme-bootstrap="system"] :where(.about-core-message p, .about-section > p),
  html:not([data-site-theme-bootstrap]) :where(.about-core-message p, .about-section > p) { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .about-principle,
  html:not([data-site-theme-bootstrap]) .about-principle { background: var(--panel); }
  html[data-site-theme-bootstrap="system"] .about-principle p,
  html:not([data-site-theme-bootstrap]) .about-principle p { color: #f5f5f5; }

  html[data-site-theme-bootstrap="system"] .plan-picker > legend,
  html:not([data-site-theme-bootstrap]) .plan-picker > legend { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .plan-status,
  html:not([data-site-theme-bootstrap]) .plan-status { color: #f5f5f5; }
  html[data-site-theme-bootstrap="system"] .plan-buy,
  html:not([data-site-theme-bootstrap]) .plan-buy { color: #212121; }
  html[data-site-theme-bootstrap="system"] :where(.plan-buy:hover, .plan-buy:focus-visible),
  html:not([data-site-theme-bootstrap]) :where(.plan-buy:hover, .plan-buy:focus-visible) { background: #ffffff; }

  html[data-site-theme-bootstrap="system"] .lotbi-brand-logo-light,
  html:not([data-site-theme-bootstrap]) .lotbi-brand-logo-light { display: none; }
  html[data-site-theme-bootstrap="system"] .lotbi-brand-logo-dark,
  html:not([data-site-theme-bootstrap]) .lotbi-brand-logo-dark { display: block; }
}