/* All published 저메추 surfaces share tokens.css. Loaded after page styles. */
html { background: var(--bg-base); color-scheme: light; }
body { background: var(--bg-base); color: var(--text); }
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
input, select, textarea { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:is(.header,.ref-header,.jm-header,.jm-header-mini,.jm-tabbar,.cat-header,.store-header) { background: var(--bar); border-color: var(--line-warm); }
:is(.card,.modal,.modal-box,.modal-content,.ref-ranking-box,.result-card,.input-card,.trust-section,.timer-section) { border-color: var(--line-warm); box-shadow: var(--shadow-2); }
:is(.blog-header,.article-divider,.trust-section,.jm-footer) { border-color: var(--line-warm); }
:is(.article-body,.seo-content,.legal-content) a { color: var(--accent); text-underline-offset: 3px; }
:is(.res-btn-primary,.cat-float-btn,.store-float-btn,.fv-pick,.fv-input-row button,.submit-btn) { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-accent); }
:is(.res-btn-primary,.cat-float-btn,.submit-btn):active:not(:disabled) { transform: scale(.96); }
:is(.rc-chips button.on,.cat-pill.active,.store-toggle.active,.fv-card.selected) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
:is(.res-budget-row,.rc-chips,.cat-pills) { border-color: var(--line-warm); }
:is(.res-title,.rc-title,.cat-title,.store-title) { color: var(--text); }
/* Game canvases, tier ranks and yes/no states keep their meaningful colors. */
body[data-page="anagram"]::before, body[data-page="anagram"]::after { display: none; }
body[data-page="anagram"] :is(.header,.card,.input-card) { background: var(--card); }
body[data-page="anagram"] :is(.headline .grad,.share-btn,.retry-btn) { background: none; color: var(--accent); -webkit-text-fill-color: var(--accent); }
body[data-page="anagram"] :is(.loader,.corner) { border-color: var(--line-warm); }
body[data-page="anagram"] .loader { border-top-color: var(--accent); }
body[data-page="anagram"] .input-card input::placeholder { color: var(--muted); }
body[data-page="anagram"] :is(.share-btn,.retry-btn,.copy-btn) { border: 1px solid var(--line-warm); background: var(--card); }
body[data-page="anagram"] :is(.submit-btn,.submit-btn:hover) { background: var(--accent-fill); box-shadow: var(--shadow-accent); }
body[data-page="anagram"] .code-display .word { background: none; color: var(--text); -webkit-text-fill-color: var(--text); text-shadow: none; }
body[data-page="anagram"] :is(.formula .matched,.tagline) { color: var(--text); }
body[data-page="anagram"] .coverage-bar { background: var(--line-warm); }
body[data-page="anagram"] .btn-share { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-accent); }
body[data-page="anagram"] .btn-reset { background: var(--card); }
body[data-page="timing-game"] {
 --primary: var(--accent); --primary-dark: var(--accent-hover); --secondary: var(--accent-fill);
 --background: var(--bg-base); --surface: var(--card); --surface-light: var(--accent-soft);
 --text-muted: var(--muted); --success: var(--success-text); --danger: var(--danger-text);
}
body[data-page="timing-game"] :is(.header h2,.result-title) { background: none; color: var(--text); -webkit-text-fill-color: var(--text); }
body[data-page="timing-game"] .back-btn { background: var(--card); border-color: var(--line-warm); }
body[data-page="chimp-game"] {
 --fg: var(--text); --muted-fg: var(--muted); --secondary: var(--accent-soft);
 --destructive: var(--danger-text); --tile-active: var(--accent-soft); --tile-hidden: var(--card2);
 --tile-correct: var(--success-soft); --tile-wrong: var(--danger-soft);
}
body[data-page="chimp-game"] :is(.back-btn,.tile,.action-btn,.modal-box,.modal-btn,.mode-card,.stat-card) { border: 1px solid var(--line-warm); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
body[data-page="chimp-game"] :is(.action-btn.primary,.modal-btn) { background: var(--accent-fill); color: var(--on-accent); }
body[data-page="chimp-game"] :is(.tile,.action-btn,.back-btn):active { box-shadow: none; transform: scale(.96); }
body[data-page="chimp-game"] :is(.mode-btn-primary,.mode-btn-secondary,.practice-card,.brain-icon,.icon-btn,.pick-btn,.level-value-box) { border: 1px solid var(--line-warm); box-shadow: var(--shadow-1); border-radius: var(--radius-lg); }
body[data-page="chimp-game"] .mode-btn-primary { background: var(--accent-fill); color: var(--on-accent); }
body[data-page="chimp-game"] :is(.mode-btn-secondary,.pick-btn) { background: var(--card); color: var(--text); }
body[data-page="chimp-game"] :is(.pick-btn-sm,.percentile-badge) { background: var(--card); color: var(--text); border: 1px solid var(--line-warm); box-shadow: var(--shadow-1); }
body[data-page="chimp-game"] .rs-badge.playing { background: var(--accent-soft); color: var(--accent); }
.gb-banner,.gb-tip { background: var(--card); border-color: var(--line-warm); box-shadow: var(--shadow-1); }
.gb-banner .gb-t,.gb-tip-n,.gb-stats li,.gb-p i { color: var(--text); }
.gb-banner .gb-d,.gb-banner .gb-ar,.gb-p b { color: var(--accent); }
.gb-tip-sub,.gb-p,.gb-flavor { color: var(--muted); }
.gb-up { color: var(--success-text); } .gb-dn { color: var(--danger-text); }
.gb-hr { background: var(--line-warm); }
.store-opt input { accent-color: var(--accent); }
.store-slider::-webkit-slider-thumb { background: var(--accent-fill); }
.store-slider::-moz-range-thumb { background: var(--accent-fill); }
.store-range .sr-fill { background: var(--accent-fill); }
.store-main { background: var(--bg-base); }
.store-filter-top { background: var(--bar); border-color: var(--line-warm); gap: 6px; }
.store-acc,.store-sort,.store-toggle { background: var(--card); border-color: var(--line-warm); border-radius: var(--radius-md); color: var(--text); }
.store-acc-h { color: var(--text); min-height: 44px; }
.store-acc.open { border-color: var(--accent); }
.store-acc { overflow: hidden; }
.store-acc-h:hover { background: var(--card2); }
@media (hover: none) { .store-acc-h:hover { background: transparent; } }
.store-card { border-color: var(--line-warm); border-radius: 18px; box-shadow: var(--shadow-1); }
.store-card:hover { border-color: var(--accent); box-shadow: var(--shadow-coral); }
.store-card-thumb { background: var(--accent-soft); }
.store-card-body { padding: 12px 14px; }
.store-card-name,.store-card-price { color: var(--text); }
.store-count,.store-card-cat,.store-empty { color: var(--muted); }
body[data-page="methodology"] :is(.wrap,main) { color: var(--text); }
/* Recipe sheet, shared by results. Content is loaded only on request. */
.recipe-dialog { width: min(100% - 24px,640px); max-height: 90dvh; margin: auto; padding: 0; border: 1px solid var(--line-warm); border-radius: var(--radius-2xl); background: var(--bg-base); color: var(--text); box-shadow: var(--shadow-3); }
.recipe-dialog::backdrop { background: rgb(28 28 30 / .5); }
.recipe-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--bar); border-bottom: 1px solid var(--line-warm); }
.recipe-head h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.recipe-close { flex: none; width: 44px; height: 44px; border: 1px solid var(--line-warm); border-radius: 50%; background: var(--card); color: var(--text); font-size: 23px; cursor: pointer; }
.recipe-content { padding: 20px; line-height: 1.8; font-size: 16px; overflow-wrap: anywhere; }
.recipe-content h3 { margin: 22px 0 10px; font-size: 18px; }
.recipe-content ul,.recipe-content ol { padding-left: 24px; }
.recipe-content li { margin: 8px 0; padding-left: 3px; }
.recipe-content p { margin: 10px 0; }
.recipe-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.recipe-meta { color: var(--muted); font-size: 14px; }
.recipe-note { padding: 12px 14px; background: var(--card); border: 1px solid var(--line-warm); border-radius: var(--radius-md); font-size: 14px; }
.recipe-options { display: grid; gap: 8px; margin-top: 16px; }
.recipe-options button,.recipe-retry { min-height: 44px; padding: 12px 16px; text-align: left; border: 1px solid var(--line-warm); border-radius: var(--radius-md); background: var(--card); color: var(--accent); font-weight: 700; cursor: pointer; }
@media (max-width:480px) { .recipe-dialog { width: 100%; max-width: none; box-sizing: border-box; max-height: 94dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; } }