/* TCM·STUDY site chrome: colours, type tokens, header and footer.
   Shared by every page, including the question player (exam.html), so the
   header and footer look the same everywhere. Page layout lives in v4.css,
   which the question player does not load. */
:root {
  --bg: #ffffff; --surface: #ffffff;
  --soft: #f5f5f7; --soft-2: #e8e8ed;
  --ink: #1d1d1f; --ink-2: #3a3f44; --muted: #555d66; --line: #d9dde1;
  --accent: #0f7a5c; --accent-ink: #0b6249; --accent-soft: #e6f2ed;
  --band-soft: #f5f5f7; --band-soft-2: #ececf0;

  /* five sizes only */
  --fs-small: 1.0625rem;   /* 17 */
  --fs-body: 1.25rem;      /* 20 */
  --fs-lead: 1.375rem;     /* 22 */
  --fs-h3: 1.5rem;         /* 24 */
  --fs-h2: clamp(1.875rem, 3.4vw, 2.375rem);  /* 30–38 */
  --fs-h1: clamp(2.25rem, 5.6vw, 3.5rem);     /* 36–56 */
  --measure: 34em;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101214; --soft: #17191c; --soft-2: #26292d;
    --ink: #f2f4f5; --ink-2: #cdd2d6; --muted: #a3abb3; --line: #2e3237;
    --accent: #4cc39b; --accent-ink: #6fd3b0; --accent-soft: #15302a;
    --band-soft: #17191c; --band-soft-2: #1f2226;
  }
}
:root[data-theme="dark"] {
  --bg: #101214; --soft: #17191c; --soft-2: #26292d;
  --ink: #f2f4f5; --ink-2: #cdd2d6; --muted: #a3abb3; --line: #2e3237;
  --accent: #4cc39b; --accent-ink: #6fd3b0; --accent-soft: #15302a;
  --band-soft: #17191c; --band-soft-2: #1f2226;
}

.site-head .wrap, .site-foot .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* header: quiet, translucent */
.site-head { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--line); }
body::before { background: var(--bg); }
.site-head .wrap { padding-block: 10px; }
.brand { font-size: 1.25rem; }
.nav a, .acct { font-size: var(--fs-small); color: var(--ink-2); }
.nav a.help { font-size: var(--fs-small); }
.lang-switch button { font-size: 1rem; padding: 6px 12px; }
.fs-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
/* 가− / 가 / 가+ in px, so the header doesn't grow with the page text */
.fs-switch button { border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 16px; padding: 6px 12px; cursor: pointer; line-height: 1.2; }
.fs-switch button[data-d="-1"] { font-size: 14px; }
.fs-switch button[data-d="1"] { font-size: 18px; font-weight: 650; }
.fs-switch button + button { border-left: 1px solid var(--line); }
.fs-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.fs-switch button:disabled { opacity: .35; cursor: default; }

/* footer */
.site-foot { font-size: var(--fs-small); margin-top: 0; padding-block: 48px; }
.site-foot a { color: var(--ink-2); }
@media (max-width: 400px) {
  .lang-switch button { font-size: 0.9375rem; padding: 4px 8px; }
}

/* header: one row on wide screens, menu button below 1240px (room for the English menu and the five text-size buttons) */
.site-head .wrap { max-width: 1240px; }
@media (max-width: 1240px) {
  .site-head { position: sticky; }
  .site-head .wrap { gap: 10px 12px; flex-wrap: wrap; }
  .site-head .menu-btn { display: inline-flex; }
  .acct { margin-left: auto; }
  .nav { order: 3; width: 100%; display: none; flex-direction: column; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--line); }
  .site-head.open .nav { display: flex; }
  .nav a { font-size: 1.1875rem; color: var(--ink-2); padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a.help, .nav a:not(.help) + a.help { font-size: var(--fs-small); margin-left: 0; padding-left: 4px; border-left: 0; color: var(--muted); }
  .nav a:not(.help) + a.help { border-top: 6px solid var(--soft); }
  .site-head .wrap > .fs-switch { display: none; }
  .site-head .fs-switch.in-menu { display: inline-flex; align-self: flex-start; margin: 16px 4px 8px; }
}
/* phones: keep brand · Sign in · EN/한국어 · menu on one row in English too */
@media (max-width: 400px) {
  .site-head .wrap { column-gap: 6px; }
  .site-head .menu-btn { width: 40px; height: 40px; }
}