/* デザインの方向の見比べ（画面の構成・機能は同じ。書体・文字の大きさ・行間・太さ・色だけを変える）
   切り替え：URLに ?design=k / p / u / m / s（a はいまの表示）。色の意味（緑＝もらう・赤＝払う/危ない期限・黄＝確認が必要・青＝リンク）はすべて同じ */

/* 見比べ用の切り替え */
.dz { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: 10px; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(20, 24, 22, .88); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); overflow-x: auto; scrollbar-width: none; max-width: 760px; margin: 0 auto; }
.dz button { flex: 0 0 auto; font: 700 12.5px/1 system-ui, sans-serif; padding: 9px 11px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; }
.dz button.on { background: #fff; color: #111; }
@media print { .dz { display: none; } }

/* 共通：数字は等幅・数字の書体の太さを方向ごとに変えられるように */
html[data-design] { --num-w: 800; --head-w: 800; --body-lh: 1.7; }
html[data-design] .h-v, html[data-design] .get b, html[data-design] .mm-n, html[data-design] .cv-n, html[data-design] .tl-money { font-weight: var(--num-w); }
html[data-design] .sec, html[data-design] .h-ft, html[data-design] .tl-h, html[data-design] .r2-h { font-weight: var(--head-w); }
html[data-design] body { line-height: var(--body-lh); }

/* ============ k：白黒くっきり（みんなの銀行のように、白と黒の強い対比。色は意味のある所だけ） ============ */
html[data-design="k"][data-design] { color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --text: #0b0b0b; --muted: #555; --line: #0b0b0b;
  --brand: #0b0b0b; --brand-soft: #f1f1f1; --link: #0a58ca;
  --get: #00875a; --get-soft: #e3f6ee; --pay: #d92d20; --pay-soft: #fdecea; --chk: #b54708; --chk-soft: #fef4e6;
  --r: 14px; --num-w: 900; --head-w: 900; --body-lh: 1.6;
}
html[data-design="k"] body { font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; font-size: 16px; letter-spacing: 0; }
html[data-design="k"] .topbar { background: #0b0b0b; border: 0; }
html[data-design="k"] .topbar .brand, html[data-design="k"] .topbar .toplink { color: #fff; }
html[data-design="k"] .topbar .brand span { color: #bbb; }
html[data-design="k"] .hero { border: 2px solid #0b0b0b; box-shadow: 6px 6px 0 #0b0b0b; border-radius: 18px; }
html[data-design="k"] .h-v { font-size: 52px; letter-spacing: -.03em; }
html[data-design="k"] .h-first { background: #0b0b0b; color: #fff; }
html[data-design="k"] .h-first .h-fl, html[data-design="k"] .h-first .h-due { color: #fff; }
html[data-design="k"] .h-first .h-due.warn { color: #ffb4ab; }
html[data-design="k"] .seg { background: #fff; border: 2px solid #0b0b0b; }
html[data-design="k"] .seg button.on { background: #0b0b0b; color: #fff; box-shadow: none; }
html[data-design="k"] .get, html[data-design="k"] .tl-ev, html[data-design="k"] .sys-list, html[data-design="k"] .better, html[data-design="k"] .mm, html[data-design="k"] .cv,
html[data-design="k"] .hk2, html[data-design="k"] .lk-g, html[data-design="k"] .ix, html[data-design="k"] details.fold { border: 2px solid #0b0b0b; }
html[data-design="k"] .get li, html[data-design="k"] .tl-ev > li { border-bottom-color: #e5e5e5; }
html[data-design="k"] .more-btn { border: 2px solid #0b0b0b; background: #fff; }
html[data-design="k"] .chip-c { border-color: #0b0b0b; color: #0b0b0b; }
html[data-design="k"] .sec { font-size: 21px; letter-spacing: -.01em; }
html[data-design="k"] .tl { border-left: 3px solid #0b0b0b; }
html[data-design="k"] .tl-m::before { border-color: #0b0b0b; }
html[data-design="k"] .chk-bar i { background: #0b0b0b; }
html[data-design="k"] .qform .choices span { border: 2px solid #0b0b0b !important; }
html[data-design="k"] body[data-mode="wizard"] .qform .step.touched .choices input:checked + span, html[data-design="k"] body:not([data-mode="wizard"]) .qform .choices input:checked + span { background: #0b0b0b !important; color: #fff !important; }

/* ============ p：深い紫（自分の色を1つ決めて大胆に。結論カードを紫で塗る） ============ */
html[data-design="p"][data-design] { color-scheme: light;
  --bg: #f5f2fd; --surface: #ffffff; --text: #1e1633; --muted: #5f5876; --line: #e5def7;
  --brand: #5b2bd6; --brand-soft: #ece4ff; --link: #2f5fd0;
  --get: #0f8a5f; --get-soft: #e1f5ec; --pay: #d1342f; --pay-soft: #fdeceb; --chk: #a46200; --chk-soft: #fff1d6;
  --r: 18px; --num-w: 800; --head-w: 800; --body-lh: 1.7;
}
html[data-design="p"] body { font-family: "M PLUS 2", "Hiragino Sans", sans-serif; font-size: 16px; }
html[data-design="p"] .topbar { background: var(--bg); border: 0; }
html[data-design="p"] .hero { background: linear-gradient(150deg, #5b2bd6 0%, #3a179c 100%); color: #fff; box-shadow: 0 14px 30px rgba(91, 43, 214, .28); border-radius: 26px; }
html[data-design="p"] .hero .h-k, html[data-design="p"] .hero .h-l, html[data-design="p"] .hero .h-worst, html[data-design="p"] .hero .h-legend, html[data-design="p"] .hero .h-acc { color: rgba(255, 255, 255, .78); }
html[data-design="p"] .hero .h-v { color: #7dffc0; font-size: 50px; }
html[data-design="p"] .hero .h-items b { color: #7dffc0; }
html[data-design="p"] .hero .h-worst b { color: #ffb3ae; }
html[data-design="p"] .hero .h-first { background: rgba(255, 255, 255, .12); }
html[data-design="p"] .hero .h-first .h-fl { color: rgba(255, 255, 255, .7); }
html[data-design="p"] .hero .h-due.warn { color: #ffd0cc; }
html[data-design="p"] .hero a { color: #d9ccff; }
html[data-design="p"] .seg { background: var(--brand-soft); }
html[data-design="p"] .seg button.on { color: var(--brand); }
html[data-design="p"] .today, html[data-design="p"] .tl-m.now::before { background: var(--brand); border-color: var(--brand); }
html[data-design="p"] .sec { font-size: 20px; }
html[data-design="p"] .get, html[data-design="p"] .tl-ev, html[data-design="p"] .sys-list, html[data-design="p"] .better, html[data-design="p"] .mm, html[data-design="p"] .cv { box-shadow: 0 2px 10px rgba(60, 30, 140, .06); }
html[data-design="p"] .wz-track i, html[data-design="p"] .wz-next { background: var(--brand); }

/* ============ u：公的UD・紺（デジタル庁のように、読みやすさ最優先。大きめの文字・広い行間） ============ */
html[data-design="u"][data-design] { color-scheme: light;
  --bg: #f1f4f9; --surface: #ffffff; --text: #1a1a1c; --muted: #4d5561; --line: #d6dce6;
  --brand: #0b3a75; --brand-soft: #e3ebf7; --link: #0050c8;
  --get: #0a7a3d; --get-soft: #e2f3e8; --pay: #c8261f; --pay-soft: #fbe7e5; --chk: #8f5b00; --chk-soft: #fbf0d7;
  --r: 8px; --num-w: 700; --head-w: 700; --body-lh: 1.9;
}
html[data-design="u"] body { font-family: "BIZ UDPGothic", "Hiragino Sans", sans-serif; font-size: 17px; letter-spacing: .02em; }
html[data-design="u"] .topbar { background: #0b3a75; border: 0; }
html[data-design="u"] .topbar .brand, html[data-design="u"] .topbar .toplink { color: #fff; }
html[data-design="u"] .topbar .brand span { color: #c5d3ea; }
html[data-design="u"] .hero { border-radius: 8px; border: 1px solid var(--line); border-top: 6px solid var(--brand); box-shadow: none; }
html[data-design="u"] .h-v { font-size: 46px; }
html[data-design="u"] .h-items, html[data-design="u"] .a-body, html[data-design="u"] .tl-ev .ev { font-size: 15.5px; }
html[data-design="u"] .h-first { background: var(--brand-soft); border-radius: 6px; }
html[data-design="u"] .seg { background: var(--bg); border-radius: 0; padding: 0; gap: 0; border-bottom: 2px solid var(--line); }
html[data-design="u"] .seg button { border-radius: 0; border-bottom: 4px solid transparent; padding: 11px 12px; }
html[data-design="u"] .seg button.on { background: transparent; box-shadow: none; color: var(--brand); border-bottom-color: var(--brand); }
html[data-design="u"] .sec { font-size: 19px; padding-left: 12px; border-left: 6px solid var(--brand); }
html[data-design="u"] .get, html[data-design="u"] .tl-ev, html[data-design="u"] .sys-list, html[data-design="u"] .better, html[data-design="u"] .mm, html[data-design="u"] .cv,
html[data-design="u"] .hk2, html[data-design="u"] .lk-g, html[data-design="u"] .ix, html[data-design="u"] details.fold { border: 1px solid var(--line); border-radius: 8px; }
html[data-design="u"] .chip-c, html[data-design="u"] .more-btn, html[data-design="u"] .wz-next, html[data-design="u"] .wz-back, html[data-design="u"] .h-btn { border-radius: 6px; }
html[data-design="u"] a { text-underline-offset: 3px; }

/* ============ m：丸ゴシック・生成り（やわらかく、話しかけるように。焦げ茶と生成り） ============ */
html[data-design="m"][data-design] { color-scheme: light;
  --bg: #faf5ec; --surface: #fffdf8; --text: #3a2e26; --muted: #7b6b5f; --line: #ece2d3;
  --brand: #6b4226; --brand-soft: #f3e7d8; --link: #2c68a8;
  --get: #2e7d4f; --get-soft: #e4f2e7; --pay: #c0392b; --pay-soft: #fbe6e1; --chk: #a8711b; --chk-soft: #fbf0d8;
  --r: 22px; --num-w: 900; --head-w: 700; --body-lh: 1.85;
}
html[data-design="m"] body { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-size: 16px; font-weight: 500; }
html[data-design="m"] .topbar { background: var(--bg); border: 0; }
html[data-design="m"] .hero { border-radius: 30px; box-shadow: 0 12px 30px rgba(107, 66, 38, .10); }
html[data-design="m"] .h-v { font-size: 48px; }
html[data-design="m"] .h-first { background: var(--brand-soft); border-radius: 20px; }
html[data-design="m"] .seg { background: var(--brand-soft); }
html[data-design="m"] .seg button.on { color: var(--brand); }
html[data-design="m"] .today, html[data-design="m"] .tl-m.now::before { background: var(--brand); border-color: var(--brand); }
html[data-design="m"] .tl { border-left-style: dashed; }
html[data-design="m"] .get, html[data-design="m"] .tl-ev, html[data-design="m"] .sys-list, html[data-design="m"] .better, html[data-design="m"] .mm, html[data-design="m"] .cv { box-shadow: 0 3px 12px rgba(107, 66, 38, .06); }
html[data-design="m"] .sec { font-size: 20px; }
html[data-design="m"] .wz-track i, html[data-design="m"] .wz-next { background: var(--brand); }

/* ============ s：明朝見出し・上質（雑誌のように。見出しと数字に明朝、本文はゴシック） ============ */
html[data-design="s"][data-design] { color-scheme: light;
  --bg: #f6f3ec; --surface: #fffefb; --text: #23201b; --muted: #6b655b; --line: #e3ddd0;
  --brand: #23324a; --brand-soft: #e9ecf1; --link: #2b5aa8;
  --get: #1d6b45; --get-soft: #e3efe7; --pay: #b0322a; --pay-soft: #f8e5e2; --chk: #8c6416; --chk-soft: #f6ecd6;
  --r: 4px; --num-w: 800; --head-w: 700; --body-lh: 1.85;
}
html[data-design="s"] body { font-family: "Noto Sans JP", "Hiragino Sans", sans-serif; font-size: 15.5px; letter-spacing: .03em; }
html[data-design="s"] .sec, html[data-design="s"] .h-ft, html[data-design="s"] .tl-h, html[data-design="s"] .h-v, html[data-design="s"] .h-k, html[data-design="s"] .r2-h,
html[data-design="s"] .get b, html[data-design="s"] .topbar .brand, html[data-design="s"] .qform .step h2 { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", serif; }
html[data-design="s"] .topbar { background: var(--bg); border-bottom: 1px solid var(--text); }
html[data-design="s"] .hero { border-radius: 2px; box-shadow: none; border: 1px solid var(--text); }
html[data-design="s"] .h-k { font-size: 15px; letter-spacing: .2em; color: var(--text); }
html[data-design="s"] .h-v { font-size: 50px; letter-spacing: 0; }
html[data-design="s"] .h-first { background: var(--brand); color: #fff; border-radius: 2px; }
html[data-design="s"] .h-first .h-fl, html[data-design="s"] .h-first .h-due { color: #dfe3ea; }
html[data-design="s"] .seg { background: transparent; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); border-radius: 0; padding: 0; }
html[data-design="s"] .seg button { border-radius: 0; }
html[data-design="s"] .seg button.on { background: var(--text); color: var(--bg); box-shadow: none; }
html[data-design="s"] .sec { font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
html[data-design="s"] .get, html[data-design="s"] .tl-ev, html[data-design="s"] .sys-list, html[data-design="s"] .better, html[data-design="s"] .mm, html[data-design="s"] .cv,
html[data-design="s"] .hk2, html[data-design="s"] .lk-g, html[data-design="s"] .ix, html[data-design="s"] details.fold { border-radius: 2px; border: 1px solid var(--line); }
html[data-design="s"] .chip-c, html[data-design="s"] .more-btn, html[data-design="s"] .wz-next, html[data-design="s"] .wz-back, html[data-design="s"] .h-btn { border-radius: 2px; }
html[data-design="s"] .today { border-radius: 2px; background: var(--brand); }
html[data-design="k"] .mk.s-no { background: #e8e8e8; color: #555; }
html[data-design="k"] .wz-track, html[data-design="k"] .chk-bar { background: #e2e2e2; }
html[data-design="k"] .wz-track i { background: #0b0b0b; }
html[data-design="k"] .chk-bar i { background: var(--get); }
/* A5：白黒くっきりの線を整理。外枠（結論カード・タブ）は太く、一覧の枠は少し細く、入れ子の枠は淡く */
html[data-design="k"] .get, html[data-design="k"] .tl-ev, html[data-design="k"] .sys-list, html[data-design="k"] .better, html[data-design="k"] .mm, html[data-design="k"] .cv,
html[data-design="k"] .hk2, html[data-design="k"] .lk-g, html[data-design="k"] .ix, html[data-design="k"] details.fold { border-width: 1.5px; }
html[data-design="k"] .hk2-v > div { border: 1px solid #cfcfcf; }
html[data-design="k"] .hk2-v > div.best { border: 2px solid var(--get); }
html[data-design="k"] .better li { border-bottom-color: #e5e5e5; }
html[data-design="k"] .sys-list details.sys { border-bottom-color: #e5e5e5; }
html[data-design="k"] .lk li { border-bottom-color: #e5e5e5; }
html[data-design="k"] .seg { border-width: 2px; }
@media (max-width: 959px) { html[data-design="k"] .seg { padding: 3px; gap: 2px; } }