/* Static pages (/places/…, /about/, /privacy/). Uses tokens.css, loaded first; same header, brand, surfaces and buttons as the app. */
* { box-sizing:border-box }
body { margin:0;background:var(--bg-app);color:var(--ink);font:16px/1.8 var(--font-body);overflow-wrap:break-word }
html[lang=ko] body { word-break:keep-all }
a { color:var(--accent-text) }
:focus-visible { outline:3px solid var(--focus);outline-offset:3px }

/* Header — matches the app header */
.top { background:var(--ink);border-bottom:5px solid var(--ink-deep);color:var(--on-ink) }
.top :focus-visible { outline-color:var(--focus-on-ink) }
.top-inner { display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;max-width:820px;margin:0 auto;padding:14px 16px }
.brand { display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--on-ink);text-decoration:none;line-height:1.2 }
.brand-name { font:400 22px 'Jua',var(--font-body) }
.brand small { font-size:12px;color:var(--on-ink-muted) }
.langs { display:flex;gap:6px;flex-wrap:wrap }
.langs a { display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--on-ink-line);border-radius:var(--r-md);background:var(--ink-2);color:var(--on-ink);font-size:14px;font-weight:500;text-decoration:none }
.langs a[aria-current] { background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:700 }

/* Content */
main { max-width:820px;margin:0 auto;padding:24px 16px 48px }
h1,h2 { font-family:var(--font-display);font-weight:var(--display-weight);line-height:var(--lh-heading) }
h1 { font-size:var(--fs-h1);margin:8px 0 4px }
h2 { font-size:var(--fs-h2);margin:40px 0 12px }
h3 { font-size:var(--fs-lg);line-height:1.5;margin:0 0 6px }
.meta,.crumbs { color:var(--muted);font-size:var(--fs-sm);margin:0 }
.crumbs a,.meta a { display:inline-flex;align-items:center;min-height:44px;color:var(--muted) }
.lead { font-size:var(--fs-lg) }
.photo { margin:20px 0;border-radius:var(--r-lg);overflow:hidden;background:var(--model-bg) }
.photo img { display:block;width:100%;height:auto;max-height:460px;object-fit:cover }
.photo figcaption { font-size:var(--fs-xs);color:var(--muted);padding:8px 12px }
.photo figcaption a { color:var(--muted) }
.box { background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 20px 16px;margin-top:24px }
.box h2 { margin-top:16px }
.story .intro { font-size:var(--fs-body) }
.chapter { border-left:3px solid var(--line);padding:2px 0 2px 16px;margin:20px 0 }
.kind { font-size:var(--fs-xs);color:var(--accent-text);font-weight:700 }
.src-title { margin-top:24px }
.sources { font-size:var(--fs-sm);padding-left:20px }
.sources a { display:inline-block;padding:10px 0 }
.actions { display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center }
.actions a:not(.btn) { display:inline-flex;align-items:center;min-height:44px }

/* Buttons — app shape: 2px ink, radius 12, hard shadow */
.btn { display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:var(--r-md);border:2px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;font:var(--display-weight) 16px/1.3 var(--font-display);box-shadow:var(--shadow-press-sm) }
.btn:active { transform:translateY(3px);box-shadow:none }
.btn.primary { background:var(--yellow);min-height:48px;font-size:var(--fs-lg);box-shadow:var(--shadow-press) }
.cta { margin-top:40px;text-align:center }

/* Place lists — same card surface as the app */
.cards { list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px }
.cards a { display:flex;flex-direction:column;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700 }
.cards a:hover { border-color:var(--ink) }
.cards small { font-weight:400;color:var(--muted);font-size:var(--fs-sm) }
.doc ul { padding-left:20px }

.foot { max-width:820px;margin:0 auto;padding:16px 16px 40px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font-size:var(--fs-sm);color:var(--muted) }
.foot a { display:inline-flex;align-items:center;min-height:44px;color:var(--muted) }
@media (min-width:720px) {
  .brand-name { font-size:26px }
}