/* C / BOLD TYPE — Design.md の赤・クリーム・金を使うライトモード。
   操作・固定ボタン・診断演出は既存のまま。サイトは白地と赤い選択状態、OGPはPillowの文字・図形で描画する。 */
:root[data-theme="light"] {
  color-scheme: light;
  --red: #d1203c;
  --primary-hover: var(--red);
  --accent-text: var(--red);
  --red-header: var(--red);
  --red-dark: var(--red);
  --red-deep: var(--red);
  --red-light: var(--red);
  --red-lighter: #edb7c0;
  --red-tint: #fff0f2;
  --gold: #fcb900;
  --gold-soft: #fff0c3;
  --cream: #fde8de;
  --white: #fffdfa;
  --text: #302826;
  --text-2: #4d3d39;
  --muted: #67564e;
  --line: #e4cbc0;
  --control: #b17968;
  --gray: #665b55;
  --accent-rule: #d5a22f;
  --shadow: 0 9px 26px #d1203c12;
  --shadow-s: 0 4px 14px #d1203c0d;
}
:root[data-theme="light"] body { background: var(--cream); color: var(--text); }
:root[data-theme="light"] .card { background: var(--white); border: 1px solid var(--line); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
:root[data-theme="light"] .overlay { background: #482725ce; }
:root[data-theme="light"] .share-age-gate::backdrop { background: #482725e8; }
:root[data-theme="light"] .gate-logo { background: var(--red); color: #fff; }
:root[data-theme="light"] .gate-title, :root[data-theme="light"] .intro-title, :root[data-theme="light"] .q-title, :root[data-theme="light"] .nickname { color: var(--text); }
:root[data-theme="light"] .gate .muted, :root[data-theme="light"] .footer, :root[data-theme="light"] .footer .muted { color: var(--muted); }
:root[data-theme="light"] .eyebrow { background: #fff; color: var(--red-dark); border-color: var(--red); }
:root[data-theme="light"] .marker { color: var(--red-dark); text-shadow: none; }

/* 文字と赤い色面を主役にし、装飾は細い罫線に絞る。 */
:root[data-theme="light"] #screen-intro .intro { border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
:root[data-theme="light"] #screen-intro .intro-heading-voice { color: var(--red); }
:root[data-theme="light"] #screen-intro .intro-heading-title { color: var(--text); }
:root[data-theme="light"] #screen-intro .intro-heading-tag { color: var(--red-dark); }
:root[data-theme="light"] .intro-preview a { background: #fffdfa; color: var(--text-2); }
:root[data-theme="light"] .intro-preview a[aria-current="page"] { color: var(--red-dark); border-color: var(--red); background: var(--red-tint); }
:root[data-theme="light"] .intro-short, :root[data-theme="light"] .intro-lead, :root[data-theme="light"] .intro-list { color: var(--text-2); }
:root[data-theme="light"] .intro-list { background: #fff8ed; border-color: var(--line); }
:root[data-theme="light"] .intro-list li::before { color: var(--red); }
:root[data-theme="light"] .flow { background: #fff; border: 1px solid #e8b4bc; }
:root[data-theme="light"] .flow-num, :root[data-theme="light"] .flow-label { color: var(--text-2); }
:root[data-theme="light"] .flow-num b, :root[data-theme="light"] .q-count b { color: var(--red-dark); }
:root[data-theme="light"] .q-count b { color: var(--text); }
:root[data-theme="light"] .flow-icon svg { stroke: var(--red); }
:root[data-theme="light"] .flow-arrow { border-color: #9b7020; }

:root[data-theme="light"] .btn.primary { background: var(--red); color: #fff; box-shadow: 0 4px 12px #d1203c1a; }
:root[data-theme="light"] .btn.primary:hover:not(:disabled) { background: var(--primary-hover); }
:root[data-theme="light"] .btn.primary:disabled { background: #e5d7ce; color: #68564d; }
:root[data-theme="light"] .btn.ghost { background: #fffdfa; color: var(--red-dark); border-color: var(--red); }
:root[data-theme="light"] .btn.ghost:hover:not(:disabled) { background: var(--red-tint); }
:root[data-theme="light"] .btn.ghost:disabled { color: #74635a; border-color: #bfa396; background: #f5e9df; }
:root[data-theme="light"] :focus-visible { outline-color: var(--red-dark); }
:root[data-theme="light"] .question { background: var(--white); }
:root[data-theme="light"] .q-hint, :root[data-theme="light"] .q-note, :root[data-theme="light"] .pick-count { color: var(--muted); }
:root[data-theme="light"] .q-note { background: #fff5df; color: #56442d; border-color: var(--accent-rule); }
:root[data-theme="light"] .q-kind.avoid { color: #4c433d; background: #eee6df; }
:root[data-theme="light"] .q-axis, :root[data-theme="light"] .pick-count.muted { background: #fff4eb; color: var(--red); border-color: #c89d8b; }
:root[data-theme="light"] .warn { background: var(--red-tint); color: var(--red-dark); }
:root[data-theme="light"] .option { background: #fff; color: var(--text); border-color: var(--control); }
:root[data-theme="light"] .option .desc { color: var(--muted); }
:root[data-theme="light"] .option .mark { background: #fff; border-color: #9a7668; }
:root[data-theme="light"] .option.on { background: var(--red-tint); color: var(--text); border-color: var(--red); box-shadow: none; }
:root[data-theme="light"] .option.on .desc { color: var(--muted); }
:root[data-theme="light"] .option.on .mark { background: var(--red); border-color: var(--red); }
:root[data-theme="light"] .option.skip { color: #5e514b; background: #faf4ed; border-color: #a88b7f; }
:root[data-theme="light"] .option.skip.on { color: #51453f; background: #eee4d9; border-color: #8c7467; }
:root[data-theme="light"] .option.skip.on .desc { color: #5e514b; }
:root[data-theme="light"] .option.skip.on .mark { background: #6c5c52; border-color: #6c5c52; }
:root[data-theme="light"] .option:disabled, :root[data-theme="light"] .options .option[aria-disabled="true"] { opacity: 1; color: #61534b; background: #f0e9e2; border-color: #a28d80; }
:root[data-theme="light"] .option:disabled .desc, :root[data-theme="light"] .options .option[aria-disabled="true"] .desc { color: #61534b; }
:root[data-theme="light"] .option .option-conflict { color: var(--red-dark); }
:root[data-theme="light"] .q-conflict-help { background: #fff5df; border-color: #b98c36; }
:root[data-theme="light"] .q-conflict-help p { color: var(--text); }
:root[data-theme="light"] .options.avoid .option { background: #faf7f2; color: #403a35; border-color: #9d8e80; }
:root[data-theme="light"] .options.avoid .option .desc { color: #65564d; }
:root[data-theme="light"] .options.avoid .option.on { background: #eee5dc; color: #403a35; border-color: #7e6e60; box-shadow: inset 4px 0 0 #7e6e60; }
:root[data-theme="light"] .options.avoid .option.on .desc { color: #574b42; }
:root[data-theme="light"] .options.avoid .option.on .mark { background: #665b55; border-color: #665b55; }
@media (hover:hover) {
  :root[data-theme="light"] .option:hover:not(:disabled):not(.on):not([aria-disabled="true"]) { background: #fff5f2; border-color: var(--red); }
  :root[data-theme="light"] .option.on:hover { background: var(--red-tint); color: var(--text); }
  :root[data-theme="light"] .option.skip:hover:not(:disabled) { background: #f1e7dc; color: var(--text); }
  :root[data-theme="light"] .options.avoid .option:hover:not(:disabled):not(.on) { background: #f0e8df; border-color: #7e6e60; }
  :root[data-theme="light"] .options.avoid .option.on:hover { background: #e6dbce; color: #403a35; }
}
:root[data-theme="light"] .nav-row { background: var(--cream); }
:root[data-theme="light"] .steps li { background: #dcc4b9; }
:root[data-theme="light"] .steps li.done { background: var(--red); }
:root[data-theme="light"] .steps li.now { background: var(--red-lighter); box-shadow: none; }
:root[data-theme="light"] .main-option { background: #fff; color: var(--text-2); border-color: var(--control); }
:root[data-theme="light"] .main-option[aria-pressed="true"] { background: var(--red-tint); color: var(--text); border-color: var(--red); }

:root[data-theme="light"] .diag { background: var(--white); }
:root[data-theme="light"] .ripple { border-color: #d59289; }
:root[data-theme="light"] .ring-track { stroke: #eedacf; }
:root[data-theme="light"] .ring-fill { stroke: var(--red); }
:root[data-theme="light"] .diag-core { background: #fff4e6; border-color: #d7ad55; box-shadow: none; }
:root[data-theme="light"] .eq i { background: var(--red); }
:root[data-theme="light"] .diag-pct { color: var(--red-dark); }
:root[data-theme="light"] .diag.done .diag-pct, :root[data-theme="light"] .diag.done .diag-pct b { color: var(--text); }
:root[data-theme="light"] .diag.done .eq i { background: var(--red); }
:root[data-theme="light"] .diag-title, :root[data-theme="light"] .diag-log .log-text { color: var(--text); }
:root[data-theme="light"] .diag-log li { background: #fff8ed; border-color: #dac3ae; }
:root[data-theme="light"] .diag-log li.old { background: #f8eee3; }
:root[data-theme="light"] .log-q { background: var(--red-tint); color: var(--red); }
:root[data-theme="light"] .log-q.avoid { background: #665b55; color: #fff; }
:root[data-theme="light"] .log-q.final { background: var(--red); color: #fff; }
:root[data-theme="light"] .log-n { color: var(--muted); }
:root[data-theme="light"] .log-ok { background: #eed2ca; }
:root[data-theme="light"] .diag-log li.ok .log-ok { background: var(--red); }
:root[data-theme="light"] .diag-skip { color: var(--muted); }
:root[data-theme="light"] .diag-skip:hover { color: var(--red-dark); }

:root[data-theme="light"] .work { background: #fff; border-color: #cf919c; box-shadow: none; }
:root[data-theme="light"] .nick-lead { color: var(--text); }
:root[data-theme="light"] .work .title a { color: var(--text); }
:root[data-theme="light"] .work .title a:hover { color: var(--red-dark); }
:root[data-theme="light"] .work .maker, :root[data-theme="light"] .work .meta { color: var(--muted); }
:root[data-theme="light"] .thumb, :root[data-theme="light"] .thumb-fallback { background: #f6eadd; }
:root[data-theme="light"] .thumb-fallback { color: #5c4c44; }
:root[data-theme="light"] .match-badge { background: #ffe3a0; color: #5e3017; }
:root[data-theme="light"] .rate-bar { background: #ead9ce; }
:root[data-theme="light"] .rate-fill { background: var(--red); }
:root[data-theme="light"] .rate-label, :root[data-theme="light"] .rate-num { color: var(--red-dark); }
:root[data-theme="light"] .chip { background: var(--red-tint); color: var(--red-dark); border-color: #ce919b; }
:root[data-theme="light"] .chip.hit { background: var(--red); border-color: var(--red); color: #fff; }
:root[data-theme="light"] .face.back { background: var(--red-dark); color: #fff; border-color: #d7a840; box-shadow: var(--shadow); }
:root[data-theme="light"] .back-q { background: var(--gold); color: var(--text); text-shadow: none; }
:root[data-theme="light"] .back-label { color: #fff; }
:root[data-theme="light"] .back-tap { background: #fff; color: var(--red-dark); }
:root[data-theme="light"] .result-cta { background: var(--white); }
:root[data-theme="light"] .x-btn { background: #111 !important; color: #fff !important; border-color: #111; }
:root[data-theme="light"] .x-btn:hover:not(:disabled) { background: #333 !important; }
:root[data-theme="light"] .x-btn:disabled { background: #dfd6cf !important; color: #685a51 !important; border-color: #bca69a; }
:root[data-theme="light"] .share-editor { color: var(--text-2); }
:root[data-theme="light"] .share-editor textarea { background: #fff; color: var(--text); border-color: #a97564; }
:root[data-theme="light"] .share-editor textarea:focus-visible { outline-color: var(--red-dark); }
:root[data-theme="light"] .share-editor textarea[aria-invalid="true"] { border-color: var(--red); }
:root[data-theme="light"] #share-draft { background: #fff6e9; color: var(--text); border-color: #c9a46a; }
:root[data-theme="light"] .compact-accordion > summary { color: var(--text-2); }
:root[data-theme="light"] .compact-accordion > summary:focus-visible { outline-color: var(--red-dark); }
:root[data-theme="light"] .share-error { color: var(--red-dark); }
:root[data-theme="light"] .bottom-cta { background: #fffdfa; border-top-color: #cfad65; box-shadow: 0 -4px 18px #d1203c14; }
:root[data-theme="light"] .toast { background: #45312b; color: #fff; }