/* Shared chrome for the static pages (about, catalog).
   The search app is the reference: this file reproduces its appbar, tokens and
   footer so the bar does not change when you cross from the app to a static page.
   Keep it in sync with src/index.css @theme and src/components/Chrome.tsx. */

:root {
  --paper: #eeeff1;
  --surface: #ffffff;
  --ink: #0b0d10;
  --ink-2: #33383f;
  --ink-3: #5e656e;
  --ink-4: #82888f;
  --line: #d6d9de;
  --line-2: #e4e6ea;
  --signal: #c2007b;
  --signal-mark: #ff2d8a;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Instrument Sans", "Pretendard Variable", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.022em; }
a { color: var(--ink); }

/* Hangul cannot take uppercase or wide tracking — match ink via size and weight. */
.micro {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 550;
  letter-spacing: 0.055em; text-transform: uppercase; line-height: 1.2;
}
html[lang="ko"] .micro {
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
}
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums lining-nums; }

/* ── Appbar. Same geometry as the app's <Header>. ── */
.appbar {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
}
.appbar-in {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 16px; padding: 12px 16px;
}
@media (min-width: 640px) { .appbar-in { gap: 8px 24px; padding: 14px 24px; } }
.brand { display: flex; align-items: baseline; gap: 6px; text-decoration: none; }
.brand span:first-child {
  font-size: 20px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
}
.brand i { width: 7px; height: 7px; background: var(--signal); transform: translateY(-1px); display: block; }
.appbar nav { display: flex; align-items: baseline; gap: 12px; }
@media (min-width: 640px) { .appbar nav { gap: 16px; } }
.appbar nav a {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 3px;
  transition: color .15s, border-color .15s;
}
.appbar nav a:hover { color: var(--ink); border-bottom-color: var(--ink-4); }
.appbar nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.langbtn {
  margin-left: auto; align-self: center;
  font: inherit; background: transparent; color: var(--ink);
  border: 1px solid var(--ink); padding: 4px 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.langbtn:hover { background: var(--ink); color: var(--paper); }

/* ── Both languages ship in the HTML; one is hidden at read time.
      Default English so the page reads with JavaScript off. ── */
[data-lang="ko"] { display: none; }
html[lang="ko"] [data-lang="ko"] { display: revert; }
html[lang="ko"] [data-lang="en"] { display: none; }

/* ── Footer. Carries the line that used to sit in the appbar. ── */
.sitefoot { border-top: 1px solid var(--line); padding: 20px 16px; margin-top: 48px; }
@media (min-width: 640px) { .sitefoot { padding: 20px 24px; } }
.sitefoot-in { max-width: 48rem; margin: 0 auto; }
.sitefoot .tagline { font-size: 13px; color: var(--ink-2); margin: 0; }
.sitefoot .rights { font-size: 11.5px; line-height: 1.6; color: var(--ink-4); margin: 8px 0 0; }
.sitefoot .machines { margin: 12px 0 0; color: var(--ink-4); }
.sitefoot a { color: var(--ink-4); text-decoration: none; }
.sitefoot a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }