/* 案2「がくふ」：紙の白と 墨色・深い緑／明朝の見出し／角ばった形・細い線で区切る（影なし） */
html[data-design='2'] {
  --page: #d9d5cb;
  --bg: #fbf9f3;
  --surface: #fbf9f3;
  --ink: #1b2231;
  --muted: #5c6370;
  --line: #cfc9bb;
  --accent: #1f4d43;
  --on-accent: #fbf9f3;
  --accent-soft: #e2ebe5;
  --warn: #8c2b2b;
  --warn-soft: #f4e4df;
  --good: #1f4d43;
  --good-soft: #e2ebe5;
  --rest-soft: #ece8de;
  --radius: 2px;
  --radius-s: 2px;
  --radius-btn: 2px;
  --border: 1px;
  --shadow: none;
  --font: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif;
  --font-head: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --body-weight: 400;
  --head-weight: 700;
  --stroke: 1.300;
}
/* 見出しの帯：五線のような2本の線 */
html[data-design='2'] .apphead { margin: 0 16px; padding: 4px 0; border-bottom: 3px double var(--ink); }
html[data-design='2'] .apphead h1 { font-size: 20px; letter-spacing: .06em; }
html[data-design='2'] .body { padding-top: 16px; }
/* カードは箱にせず、上の太い線で区切る */
html[data-design='2'] .card { border: 0; border-top: 2px solid var(--ink); padding: 12px 0 4px; background: none; }
html[data-design='2'] .card-alert, html[data-design='2'] .card-point, html[data-design='2'] .card-locked { padding: 14px; border: 1px solid var(--ink); background: var(--bg); }
html[data-design='2'] .card-alert { border-color: var(--warn); background: var(--warn-soft); }
html[data-design='2'] .card-head { font-size: 16px; letter-spacing: .04em; }
html[data-design='2'] .list { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
html[data-design='2'] .row { padding-left: 2px; padding-right: 2px; }
html[data-design='2'] .btn { letter-spacing: .08em; }
html[data-design='2'] .btn-primary, html[data-design='2'] .btn-big { background: var(--ink); border-color: var(--ink); }
html[data-design='2'] .btn-ghost { background: none; border-color: var(--ink); }
html[data-design='2'] .btn-danger { background: none; }
html[data-design='2'] .btn:disabled { background: none; border-style: dashed; border-color: var(--muted); }
html[data-design='2'] .tabbar { border-top: 3px double var(--ink); }
html[data-design='2'] .tab.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
html[data-design='2'] .tag { border-radius: 0; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 2px; }
html[data-design='2'] .tag-good, html[data-design='2'] .tag-warn, html[data-design='2'] .tag-rest { background: none; }
html[data-design='2'] .choice, html[data-design='2'] .check, html[data-design='2'] .donecheck { background: none; border-color: var(--ink); }
html[data-design='2'] .choice.is-on { background: var(--accent-soft); }
html[data-design='2'] .check-mark { border-radius: 0; border-width: 1.500px; }
html[data-design='2'] .choice-mark { border-width: 1.500px; }
html[data-design='2'] .field input, html[data-design='2'] .field select { background: #fff; border-color: var(--ink); }
html[data-design='2'] .notice, html[data-design='2'] .alert { border-radius: 0; border: 0; border-left: 3px solid var(--accent); }
html[data-design='2'] .notice-warn, html[data-design='2'] .alert { border-left-color: var(--warn); }
html[data-design='2'] .alert-soft { border-left-color: var(--accent); }
html[data-design='2'] .staff-box { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: #fff; }
html[data-design='2'] .result-mark, html[data-design='2'] .handover-mark { background: none; border: 1px solid var(--ink); color: var(--ink); }
html[data-design='2'] .listening-mic { background: var(--ink); }
html[data-design='2'] .listening-ring { border-color: var(--ink); border-width: 1px; }
html[data-design='2'] .quiet i { background: var(--ink); }
html[data-design='2'] .kid-who { border-radius: 2px; border-color: var(--ink); background: none; }
html[data-design='2'] .kid-face { border-radius: 0; background: none; color: var(--ink); }
html[data-design='2'] .map-road { stroke: var(--ink); stroke-width: 1.500; stroke-dasharray: none; }
html[data-design='2'] .map-node circle { fill: var(--bg); stroke: var(--ink); stroke-width: 1.500; }
html[data-design='2'] .map-node.is-now circle { fill: var(--ink); stroke: var(--ink); }
html[data-design='2'] .map-node.is-done circle { fill: var(--accent-soft); stroke: var(--ink); }
html[data-design='2'] .map-check { stroke: var(--ink); stroke-width: 2; }
html[data-design='2'] .map-num { font-family: 'Shippori Mincho', serif; fill: var(--ink); }
html[data-design='2'] .dots i { border-radius: 0; border-width: 1.500px; border-color: var(--ink); transform: rotate(45deg); width: 12px; height: 12px; margin: 0 2px; }
html[data-design='2'] .dots i.is-on { background: var(--ink); }
html[data-design='2'] .point-num { color: var(--ink); }
html[data-design='2'] .top-title { letter-spacing: .06em; padding-bottom: 10px; border-bottom: 3px double var(--ink); }
html[data-design='2'] .step-dot { height: 2px; border-radius: 0; }
html[data-design='2'] .step-dot.is-on { background: var(--ink); height: 4px; }
html[data-design='2'] .steps-dots { align-items: center; }
html[data-design='2'] .seg-item.is-on, html[data-design='2'] .chip.is-on { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
html[data-design='2'] .seg, html[data-design='2'] .chip { border-color: var(--ink); background: none; }
html[data-design='2'] .chip { border-radius: 2px; }
html[data-design='2'] .mini { border-color: var(--ink); color: var(--ink); }
html[data-design='2'] .kari { border-radius: 0; }