/* Base layout and shared components. Colours come from tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;   /* Korean lines break on word boundaries, not mid-word */
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { left: var(--space-4); }

/* --- layout primitives ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }

.section__head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.section__title { font-size: var(--step-4); }
.section__sub { color: var(--muted); font-size: var(--step-0); }

/* Vertical rhythm primitive.
 *
 * .text-center must also centre the *items*, not only the text inside them:
 * a flex column defaults to align-items: stretch, so any child with a
 * max-width (a lead paragraph, say) becomes a narrow box pinned to the left
 * with its text centred inside it — which reads as very slightly off-centre
 * and is hard to spot. */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-3); }
.stack--loose { gap: var(--space-5); }
.stack.text-center { align-items: center; }

/* --- chips ---------------------------------------------------------------- */
.chip {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 0.15em 0.7em;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}
.chip--plain {
  background: transparent;
  color: var(--muted);
  border-color: var(--line-strong);
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.btn--on-dark { background: var(--surface); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent-soft); color: var(--accent); }
.btn--sm { padding: 0.45rem 1rem; font-size: var(--step--1); }

.btn__ext { font-size: 0.85em; opacity: .75; }

/* --- header --------------------------------------------------------------- */
/* Figma TopNav/public: solid surface/raised, not a tinted blur. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  position: relative;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
/* Figma: 22px Medium in brand/primary, not bold ink. */
.brand {
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-decoration: none;
  font-size: var(--step-3);
  white-space: nowrap;
  /* Figma clusters nav + actions as one right-aligned group after the logo
     — the auto margin belongs on the logo, pushing everything after it
     together, not on .nav, which was splitting nav from the actions with
     its own gap and leaving nav sitting left of centre instead. */
  margin-right: auto;
}
.nav { display: flex; align-items: center; gap: var(--space-2); }
.site-menu { display: contents; }
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--step-0);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.nav a:hover { background: var(--accent-soft); color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: var(--weight-medium); }

.header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* --- mobile menu ---------------------------------------------------------- */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.menu-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform .18s ease, opacity .18s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-header__inner { min-height: 60px; gap: var(--space-3); }
  .brand { font-size: var(--step-1); color: var(--accent); }
  .menu-toggle { display: flex; }

  /* Without JS the panel simply stays visible, so the site still navigates. */
  .has-js .site-menu {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .has-js .site-menu--open { display: flex; }

  .site-menu .nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .site-menu .nav a { padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); }

  .header__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .header__actions .btn { width: 100%; }
}

/* --- footer --------------------------------------------------------------- */
/* Figma Footer: surface/raised. */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--space-7);
  font-size: var(--step-0);
  color: var(--muted);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--step--1);
}
.site-footer__legal { color: var(--muted); margin: 0; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-links a { color: var(--ink-2); }
.footer-note { font-size: var(--step--1); margin-top: var(--space-4); width: 100%; }

@media (max-width: 700px) {
  .site-footer { padding-block: var(--space-6); text-align: center; }
  .site-footer__inner { flex-direction: column; align-items: center; gap: var(--space-4); }
  .footer-links { justify-content: center; gap: var(--space-3) var(--space-4); }
  .site-footer__legal { text-align: center; }
}

/* --- cards ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* --- utility -------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.push-top { margin-top: var(--space-7); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- cookie consent banner -------------------------------------------------
 * display: flex lives on :not([hidden]), not the bare .cookie-consent
 * selector — the library.css .empty[hidden] bug (fixed earlier the same
 * day this was written) was exactly a same-specificity author rule beating
 * the browser's own `[hidden] { display: none }`. Not repeating it here. */
.cookie-consent:not([hidden]) {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 40;
  max-width: 640px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cookie-consent__text { color: var(--ink-2); font-size: var(--step--1); margin: 0; }
.cookie-consent__text a { white-space: nowrap; }
.cookie-consent__actions { display: flex; justify-content: flex-end; gap: var(--space-3); }