/*
 見た目の選択: カラー・フレーム・フォントを別々に選ぶ。
   html[data-color="light"]  … カラーをライト（紙の地に墨の文字）にする。無ければダーク（styles.css）
   html[data-frame="line"]   … フレームを直線（角なし・塗りなしの線の囲い、線画のアイコン）にする。無ければ角丸の囲み
   html[data-font="serif"]   … 英単語と数字だけ欧文セリフにする。和文はどちらもゴシック（明朝は使わない）
 変えるのは見た目（色・線・角・書体・アイコンの描き方）だけ。配置・大きさ・余白・並び・表示する内容は
 どの組み合わせでも styles.css と同じにする。
 各ブロックは自分の軸だけを変える。色は変数（--ink など）を通して使い、どのカラーとも組み合わせられるようにする。
*/

/* ======================================================================
   カラー: ライト
   ====================================================================== */
html[data-color="light"] {
  color-scheme: light;
  --bg: #f5f2eb;
  --bg-card: #fbf9f4;
  --bg-elev: #efebe2;
  --fg: #1a1a1d;
  --fg-dim: #75726b;
  --accent: #b3361e;
  --ok: #2f7a4f;
  --ng: #b3361e;
  --warn: #9a6b12;
  --border: #cfc9bb;
  --hair: #e3dfd4;
  --ink: #1a1a1d;
  --shadow: 0 6px 18px rgba(60, 50, 30, .08);
}
html[data-color="light"] .topbar { background: rgba(245, 242, 235, .92); }
html[data-color="light"] .progress { background: var(--border); }
html[data-color="light"] .progress-fill { background: var(--ink); }
html[data-color="light"] .prompt-sub { color: #4a4740; }
html[data-color="light"] .choice .key, html[data-color="light"] .keyhint { background: rgba(0, 0, 0, .05); }
html[data-color="light"] .choice:hover:not(:disabled) { border-color: var(--ink); }
html[data-color="light"] .choice.correct { background: #edf4ee; }
html[data-color="light"] .choice.wrong { background: #f7ebe7; }
html[data-color="light"] .unsure input, html[data-color="light"] .ocr-item input, html[data-color="light"] .theme-row input { accent-color: var(--ink); }
html[data-color="light"] .detail .expl, html[data-color="light"] .link-line, html[data-color="light"] .why-line + .why-line,
html[data-color="light"] .doc p, html[data-color="light"] .doc li { color: var(--fg); }
html[data-color="light"] .badge.rank.review { color: var(--warn); border-color: var(--warn); }
html[data-color="light"] .badge.reason.once { color: var(--ok); border-color: var(--ok); }
html[data-color="light"] .coverage b, html[data-color="light"] .result-cell b, html[data-color="light"] .stats b { color: var(--fg); }
html[data-color="light"] .why b { color: var(--accent); }

/* ボタン: 墨のベタ */
html[data-color="light"] .next-btn, html[data-color="light"] .primary { background: var(--ink); color: var(--bg); }
html[data-color="light"] .next-btn:hover, html[data-color="light"] .primary:hover { filter: none; background: #34343a; }
html[data-color="light"] .ghost { border-color: var(--ink); color: var(--ink); }
@media (hover: hover) { html[data-color="light"] .ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } }
html[data-color="light"] .danger:hover { background: var(--ng); color: #fff; }
html[data-color="light"] .danger-ghost { color: var(--ng); border-color: var(--ng); }
html[data-color="light"] .ad-label { background: var(--ink); color: var(--bg); }

/* 設定・入力欄 */
html[data-color="light"] .modal-overlay { background: rgba(26, 26, 29, .28); }
html[data-color="light"] .modal { background: var(--bg); }
html[data-color="light"] .modal-actions { background: linear-gradient(to bottom, rgba(245, 242, 235, 0), var(--bg) 30%); }
html[data-color="light"] .seg button.active { color: var(--fg); background: var(--bg-elev); border-color: var(--ink); }
html[data-color="light"] .preset-range input, html[data-color="light"] .sheet-filters input[type="search"], html[data-color="light"] .custom-num input,
html[data-color="light"] #deckName, html[data-color="light"] #deckInput, html[data-color="light"] .deck-start input, html[data-color="light"] #deckPaste,
html[data-color="light"] .theme-search input, html[data-color="light"] .deck-mode input, html[data-color="light"] .deck-newword-row input {
  background: #fff; border-color: var(--border); color: var(--fg);
}
html[data-color="light"] #deckInput { border-color: var(--ink); }
html[data-color="light"] .preset-range input:focus, html[data-color="light"] .sheet-filters input[type="search"]:focus, html[data-color="light"] .custom-num input:focus,
html[data-color="light"] #deckName:focus, html[data-color="light"] #deckInput:focus, html[data-color="light"] #deckPaste:focus, html[data-color="light"] .deck-start input:focus,
html[data-color="light"] .theme-search input:focus { border-color: var(--accent); }
html[data-color="light"] .legal-links a, html[data-color="light"] .home-links a { color: var(--fg-dim); }

/* 一覧・記録・マイ単語帳・テーマ */
html[data-color="light"] .sheet { background: var(--bg); }
html[data-color="light"] .sheet-bar, html[data-color="light"] .sheet-filters, html[data-color="light"] .row,
html[data-color="light"] .deck-item, html[data-color="light"] .deck-row { border-color: var(--hair); }
html[data-color="light"] .tag.j { color: var(--ok); border-color: var(--ok); }
html[data-color="light"] .tag.e { color: #3b5a9a; border-color: #3b5a9a; }
html[data-color="light"] .tag.t { color: var(--warn); border-color: var(--warn); }
html[data-color="light"] .tag.rate { color: var(--fg); border-color: var(--border); }
html[data-color="light"] .tag.tries { color: var(--fg); }
html[data-color="light"] .row-status.o { color: var(--ok); border-color: var(--ok); }
html[data-color="light"] .row-status.m { color: var(--ok); background: transparent; border-color: var(--ok); }
html[data-color="light"] .row-status.M { color: #fff; background: var(--ok); border-color: var(--ok); }
html[data-color="light"] .cal-day { border-color: var(--hair); }
html[data-color="light"] .cal-day.cal-today { border-color: var(--accent); }
html[data-color="light"] .cal-day.cal-l1 { background: #cfd9cf; }
html[data-color="light"] .cal-day.cal-l2 { background: #9fbca5; }
html[data-color="light"] .cal-day.cal-l3 { background: #6a9c78; }
html[data-color="light"] .cal-day.cal-l4 { background: var(--ok); }
html[data-color="light"] .deck-suggest button.active { border-color: var(--ink); background: var(--bg-elev); }
html[data-color="light"] .deck-row button:hover { color: var(--accent); border-color: var(--accent); }
html[data-color="light"] .deck-row.moving { background: #ece6d8; outline-color: var(--ink); }
html[data-color="light"] .deck-mode { background: #ece6d8; }
html[data-color="light"] .deck-actions { background: linear-gradient(to bottom, rgba(245, 242, 235, 0), var(--bg) 30%); }
html[data-color="light"] .deck-item.active .name::after { color: var(--ok); }
html[data-color="light"] .theme-chips button.active { border-color: var(--ink); background: var(--bg-elev); }
html[data-color="light"] .theme-actions { border-top-color: var(--ink); }
html[data-color="light"] .kb-guide .kb-keys rect { stroke: var(--ink); }

/* はじめの画面・文章のページ */
html[data-color="light"] .home { background: var(--bg); }
html[data-color="light"] .home-lead { color: var(--fg); }
html[data-color="light"] .home-lead b { color: var(--accent); }
html[data-color="light"] .home-points, html[data-color="light"] .home-setup { border-top-color: var(--ink); }
html[data-color="light"] .home-points li { border-bottom-color: var(--hair); }
html[data-color="light"] .home-news time { opacity: 1; }
html[data-color="light"] .doc h2 { border-left-color: var(--ink); }
html[data-color="light"] .doc code { background: var(--bg-elev); }
html[data-color="light"] .doc-page .topbar .brand { color: var(--fg); }

/* ======================================================================
   フレーム: 直線（角なし・影なし・塗りのない線の囲い。アイコンと印も線や記号で描く）
   ====================================================================== */
html[data-frame="line"] { --radius: 0; --shadow: none; }
html[data-frame="line"] .topbar { backdrop-filter: none; }
html[data-frame="line"] .sync, html[data-frame="line"] .progress, html[data-frame="line"] .progress-fill { border-radius: 0; }
html[data-frame="line"] .card { box-shadow: none; }
html[data-frame="line"] .badge { background: transparent; border-radius: 0; }
html[data-frame="line"] .back-btn { background: transparent; border-radius: 0; }
html[data-frame="line"] .back-btn:hover { border-color: var(--ink); }
html[data-frame="line"] .choice { border-radius: 0; transition: border-color .12s; }
html[data-frame="line"] .choice .key { background: transparent; border: 1px solid var(--border); border-radius: 0; color: var(--fg-dim); }
html[data-frame="line"] .choice.correct .key { background: var(--ok); border-color: var(--ok); color: #fff; }
html[data-frame="line"] .choice.wrong .key { background: var(--ng); border-color: var(--ng); color: #fff; }
html[data-frame="line"] .keyhint { background: transparent; border-radius: 0; }
html[data-frame="line"] .detail { border-radius: 0; }
html[data-frame="line"] .detail .pos { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 0; }
html[data-frame="line"] .kind-tag { background: transparent; border-radius: 0; }
html[data-frame="line"] .link-label { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 0; }
html[data-frame="line"] .why { background: transparent; border-color: var(--accent); border-radius: 0; }
html[data-frame="line"] .other-row i { border-radius: 0; }
html[data-frame="line"] .next-btn, html[data-frame="line"] .primary, html[data-frame="line"] .ghost, html[data-frame="line"] .danger { border-radius: 0; }
html[data-frame="line"] .ghost { background: transparent; }
html[data-frame="line"] .google-btn { border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); }
html[data-frame="line"] .google-btn .g-mark { background: var(--ink); color: var(--bg); }
html[data-frame="line"] .banner { border-radius: 0; }
html[data-frame="line"] .result-cell { background: transparent; border-radius: 0; }
html[data-frame="line"] .ad-slot { background: transparent; border-radius: 0; }
html[data-frame="line"] .ad-label { border-radius: 0; }
html[data-frame="line"] .modal { box-shadow: none; }
/* 選択肢は「下線のタブ」の見た目。押せる範囲と並びは角丸と同じ */
html[data-frame="line"] .seg button { background: transparent; border-color: transparent; border-bottom-color: var(--border); border-radius: 0; color: var(--fg-dim); }
html[data-frame="line"] .seg button:hover { color: var(--fg); }
html[data-frame="line"] .seg button.active { color: var(--fg); background: transparent; border-color: transparent; border-bottom-color: var(--ink); font-weight: 600; }
html[data-frame="line"] .preset-range input, html[data-frame="line"] .sheet-filters input[type="search"], html[data-frame="line"] .custom-num input,
html[data-frame="line"] #deckName, html[data-frame="line"] #deckInput, html[data-frame="line"] .deck-start input, html[data-frame="line"] #deckPaste,
html[data-frame="line"] .theme-search input, html[data-frame="line"] .deck-mode input, html[data-frame="line"] .deck-newword-row input { border-radius: 0; }
html[data-frame="line"] .tag, html[data-frame="line"] .row-status, html[data-frame="line"] .deck-row .tag-custom { border-radius: 0; }
html[data-frame="line"] .cal-stat, html[data-frame="line"] .cal-month, html[data-frame="line"] .cal-day { border-radius: 0; }
html[data-frame="line"] .deck-paste, html[data-frame="line"] .deck-ocr, html[data-frame="line"] .deck-newword,
html[data-frame="line"] .deck-suggest button, html[data-frame="line"] .deck-row button { border-radius: 0; }
html[data-frame="line"] .deck-row button { background: transparent; }
html[data-frame="line"] .theme-chips button { background: transparent; border-radius: 0; }
html[data-frame="line"] .theme-chips button.active { border-color: var(--ink); }
html[data-frame="line"] .kb-guide .kb-keys rect { fill: transparent; stroke: var(--ink); stroke-width: 1; rx: 2; }
html[data-frame="line"] .kb-guide .kb-keys rect.kb-off { stroke: var(--border); }
html[data-frame="line"] .home-howto, html[data-frame="line"] .home-preset, html[data-frame="line"] .home-news { background: transparent; border-radius: 0; }
html[data-frame="line"] .doc code, html[data-frame="line"] .doc .contact { border-radius: 0; }
html[data-frame="line"] .doc .contact { background: transparent; }

/* アイコンは線画。同じボタンの中身（絵文字）を透明にして、線で描いた印を重ねる */
html[data-frame="line"] .icon-btn { position: relative; color: transparent; background: transparent; border-color: transparent; border-radius: 0; }
html[data-frame="line"] .icon-btn::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 21px; height: 21px; background: var(--ink);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
html[data-frame="line"] .icon-btn:hover::before { background: var(--accent); }
html[data-frame="line"] .icon-btn:disabled::before { background: var(--border); }
html[data-frame="line"] #speechBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 6a9 9 0 0 1 0 12'/%3E%3C/svg%3E"); }
html[data-frame="line"] #speechBtn.off { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9l5 5M21 9l-5 5'/%3E%3C/svg%3E"); opacity: 1; }
html[data-frame="line"] #speechBtn.off::before { background: var(--fg-dim); }
html[data-frame="line"] #calBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
html[data-frame="line"] #listBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
html[data-frame="line"] #settingsBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8M4 12h2M10 12h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3Ccircle cx='8' cy='12' r='2'/%3E%3C/svg%3E"); }
html[data-frame="line"] #listCloseBtn, html[data-frame="line"] #calCloseBtn, html[data-frame="line"] #deckCloseBtn, html[data-frame="line"] #themeCloseBtn {
  --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
html[data-frame="line"] #deckMicBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E"); border-color: var(--border); }
html[data-frame="line"] #deckMicBtn.on { border-color: var(--accent); background: transparent; }
html[data-frame="line"] #deckMicBtn.on::before { background: var(--accent); }
html[data-frame="line"] #deckPhotoBtn { --icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E"); border-color: var(--border); }

/* 印の描き方（内容は同じで、絵文字の代わりに記号で描く。角丸の囲みでは styles.css の絵文字） */
html[data-frame="line"] .verdict.ok::before { content: "○ "; }
html[data-frame="line"] .verdict.ng::before { content: "× "; }
html[data-frame="line"] .banner h2.clear::before { content: "✦ "; }

/* ======================================================================
   フォント: セリフ（英単語と数字だけ欧文セリフ。和文はゴシックに落とす。総称 serif は置かない）
   ====================================================================== */
html[data-font="serif"] {
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
}
html[data-font="serif"] .brand, html[data-font="serif"] .qno, html[data-font="serif"] .verdict, html[data-font="serif"] .banner h2,
html[data-font="serif"] .modal h2, html[data-font="serif"] .choice .key, html[data-font="serif"] #deckInput, html[data-font="serif"] .deck-row .no,
html[data-font="serif"] .home-intro h1, html[data-font="serif"] .home-points li::before, html[data-font="serif"] .home-news time {
  font-family: var(--font-display);
}
html[data-font="serif"] .stats b, html[data-font="serif"] .prompt, html[data-font="serif"] .detail .word-line, html[data-font="serif"] .coverage b,
html[data-font="serif"] .why b, html[data-font="serif"] .other-row b, html[data-font="serif"] .result-cell b, html[data-font="serif"] .sheet-count b,
html[data-font="serif"] .row-word, html[data-font="serif"] .cal-stat-value, html[data-font="serif"] .deck-row .w, html[data-font="serif"] .deck-suggest button b,
html[data-font="serif"] .ocr-item b, html[data-font="serif"] .deck-item .name, html[data-font="serif"] .kb-guide .kb-num text {
  font-family: var(--font-display); font-weight: 400;
}