*{box-sizing:border-box}body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-jp)}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}
input::placeholder{color:rgba(255,255,255,.6)}
@keyframes yomikan-shimmer{0%{background-position:-320px 0}100%{background-position:320px 0}}

/* --- yomijapan font override -----------------------------------------------
   design-system/ is left byte-identical to yomikan004 (external artifact, not
   ours to edit). Its bundled components read two font variables internally:
     --font-jp  -> used for the components' own chrome text (nav, labels, buttons)
     --font-kr  -> used for the components' own "content" text (WordPopover word,
                   book/article titles inside reused ranking components)
   yomikan004 was JP-chrome / KR-content. yomijapan is EN-chrome / JP-content —
   the exact mirror image. Repointing these two variables (rather than editing
   the bundle) gets every reused component rendering in the right script without
   touching design-system/. The variable *names* now read backwards for this
   project; that mismatch is intentional, see CLAUDE.md. */
:root{
  --font-jp:"Inter","Helvetica Neue","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-kr:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Noto Sans JP",system-ui,sans-serif;
}