/* TCM·STUDY v4 — calm, Apple-like layer on top of site.css.
   Larger type for 40–60s readers, fewer sizes, even Korean line breaks.
   Loaded after site.css and chrome.css on every page except the question
   player (exam.html). Colours, header and footer are in chrome.css. */
/* raised cards in dark mode (the question player keeps cards on the page colour) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #1c1e21; } }
:root[data-theme="dark"] { --surface: #1c1e21; }

/* text size: 가− / 가 / 가+ (six steps) */
html { font-size: 100%; }
html[data-fs="xs"] { font-size: 81.25%; }
html[data-fs="sm"] { font-size: 90%; }
html[data-fs="lg"] { font-size: 112.5%; }
html[data-fs="xl"] { font-size: 125%; }
html[data-fs="xxl"] { font-size: 140%; }
/* wide screens: the one-row header keeps the default size at every text size, so it stays on one row in English too */
@media (min-width: 1241px) {
  html[data-fs] .brand { font-size: 20px; }
  html[data-fs] .nav a, html[data-fs] .acct { font-size: 17px; }
  html[data-fs] .lang-switch button { font-size: 16px; }
}
@media (max-width: 640px) {
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .brand { font-size: 21px; }
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .acct,
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .site-head .wrap > .lang-switch button { font-size: 17px; }
}
@media (max-width: 400px) {
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .brand { font-size: 20px; }
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .acct { font-size: 16px; }
  html:is([data-fs="lg"], [data-fs="xl"], [data-fs="xxl"]) .site-head .wrap > .lang-switch button { font-size: 15px; }
}

body {
  font-size: var(--fs-body); line-height: 1.75; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: break-word; line-break: strict;
}
/* no one-word last lines; headings even */
p, li, summary, small, .d, .lead { text-wrap: pretty; }
h1, h2, h3, .center p { text-wrap: balance; }
.nw { white-space: nowrap; }

h1 { font-size: var(--fs-h1); line-height: 1.22; letter-spacing: -0.035em; font-weight: 750; }
h2 { font-size: var(--fs-h2); line-height: 1.3; letter-spacing: -0.03em; font-weight: 720; }
h3 { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -0.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.7; color: var(--ink-2); }
.meta, .src, .muted { font-size: var(--fs-small); color: var(--muted); }

.wrap { max-width: 1080px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }


/* buttons: pills, big targets */
.btn { min-height: 56px; padding: 0 28px; border-radius: 999px; font-size: 1.125rem; }
.btn-ghost { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { background: var(--accent-soft); }
/* two button sizes only: default (56px) and small (44px) */
.btn.sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-small); }

/* closing card */
.next { border-radius: 16px; }
.next strong { font-size: var(--fs-h3); }
.next small { font-size: var(--fs-small); }

@media (max-width: 640px) {
  :root { --fs-body: 1.1875rem; --fs-lead: 1.25rem; --fs-h3: 1.375rem; }
  body { font-size: var(--fs-body); }
  .lead { font-size: var(--fs-lead); }
  h2 { font-size: var(--fs-h2); }
}


/* site.css components, in rem so 가+ scales them */
.crumbs { font-size: var(--fs-small); }
.callout { font-size: 1.125rem; border-radius: 16px; padding: 18px 20px; }
.panel { border-radius: 16px; }
table { font-size: 1.125rem; }
th { font-size: var(--fs-small); }
.md { font-size: 1.1875rem; }
.md table { font-size: 1.0625rem; }
.field label { font-size: var(--fs-small); }
.field input { font-size: 1.1875rem; min-height: 56px; border-radius: 16px; }
.field .hint, .field .err { font-size: var(--fs-small); }
.chooser .opt span { font-size: var(--fs-small); }
.read { max-width: 760px; }
.fs-switch.in-menu { display: none; }
.fs-switch.in-menu button { font-size: 1.0625rem; padding: 8px 18px; }
.fs-switch.in-menu button[data-d="-1"] { font-size: 0.9375rem; }
.fs-switch.in-menu button[data-d="1"] { font-size: 1.25rem; }
@media (min-width: 1241px) { .site-head .wrap { gap: 18px; } .nav { gap: 18px; } }

/* page sections in the home style */
.band { padding-block: clamp(80px, 11vw, 136px); }
.band.soft { background: var(--band-soft); }

/* sub-pages split into bands (main.v4page); cards on a grey band turn white */
main.v4page { padding: 0; }
main.v4page > .band { display: block; margin: 0; padding-block: clamp(64px, 9vw, 112px); scroll-margin-top: 64px; }
main.v4page > .band.soft { --soft: var(--surface); --soft-2: var(--band-soft-2); }
main.v4page > .band > .wrap > :first-child { margin-top: 0; }
main.v4page > .band > .wrap > h2:first-child { margin-bottom: 14px; }
main.v4page > .band.opener { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
main.v4page > .band.opener h1 { font-size: var(--fs-h1); max-width: 18em; }
main.v4page > .band.opener .lead { margin-top: 20px; max-width: var(--measure); }
main.v4page > .band.closer { padding-top: 0; }
main.v4page > .band.closer .next { max-width: 860px; margin: 0 auto; padding: 32px 36px; }
main.about.v4page > section.band > .wrap { display: flex; flex-direction: column; gap: 16px; }
main.about.v4page > .band > .wrap { max-width: 960px; }

/* reading pages: one centred column, roomier opener */
main.wrap.doc, main.wrap.trap { max-width: 920px; }
main.wrap#app:not(.page) { max-width: 980px; }
main.wrap.doc, main.wrap.trap, main.wrap.fb, main.wrap.read, main.wrap#app { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(80px, 10vw, 128px); }
main.wrap.doc h1, main.wrap.trap h1, main.wrap.fb h1, main.wrap.read h1 { font-size: var(--fs-h1); }
main.wrap.doc .lead, main.wrap.trap .lead, main.wrap.fb .lead, main.wrap.read .lead { margin-top: 20px; }
main.wrap.notfound { max-width: 760px; text-align: center; align-items: center; }
main.wrap.notfound .actions { justify-content: center; }

/* one content width and one heading style on every page, so edges line up */
main > .band > .wrap, main.about.v4page > .band > .wrap,
main.wrap.doc, main.wrap.trap, main.wrap#app:not(.page) { max-width: 1000px; }
main h1 { font-weight: 750; letter-spacing: -0.035em; }
main.wrap#app h1 { font-size: var(--fs-h1); }
main.wrap#app .lead { margin-top: 20px; max-width: var(--measure); }

/* narrow pages (sign-in, policies, feedback, account) keep their short line
   length but start at the same left edge as every other page */
main.wrap.read, main.wrap.fb, main.wrap.page#app { max-width: 1000px; }
main.wrap.read > *, main.wrap.fb > * { max-width: 760px; }