/* ===== 左サイドバーのメニューと「画面のデザイン」（nav.js・設定・入出力で選ぶ） =====
   共通の配置を先に書き、デザインごとの色や形は html[data-design="…"] で変える */

/* ---------- 共通：上部バー ---------- */
.topbar { background: var(--top-bg, #1f4e78); color: var(--top-text, #fff); gap: 12px; padding: 0 16px 0 10px; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 26px; height: 26px; flex: none; display: grid; place-items: center; color: var(--logo, #ffc000); }
.brand .logo svg { width: 24px; height: 24px; }
#userbox .who { color: var(--top-muted, #cfe0f1); } #userbox .who b { color: var(--top-text, #fff); }
#userbox button { border-color: var(--top-btn-border, rgba(255,255,255,.45)); color: var(--top-text, #fff); }
#userbox button:hover { background: var(--top-hover, rgba(255,255,255,.12)); }
.menu-btn { display: none; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 6px; background: none; color: var(--top-text, #fff); cursor: pointer; }
.menu-btn svg { width: 24px; height: 24px; } .menu-btn:hover { background: var(--top-hover, rgba(255,255,255,.12)); }

/* ---------- 共通：2カラムとサイドバー ---------- */
.layout { display: flex; align-items: flex-start; }
.main-col { flex: 1; min-width: 0; }
.side { position: sticky; top: 52px; height: calc(100vh - 52px); width: 232px; flex: none; display: flex; flex-direction: column; z-index: 20; transition: width .18s ease;
  background: var(--side-bg, #17324f); color: var(--side-text, #cfe0f1); border-right: var(--side-border, 3px solid #0b1a2a); }
.side #tabs { display: block; flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; scrollbar-width: thin; }
.side .cat { font-size: 11px; letter-spacing: .08em; color: var(--side-muted, #7f9bb8); padding: 12px 10px 3px; white-space: nowrap; }
.side .cat:first-child { padding-top: 4px; }
.side .cat::before { content: var(--cat-mark, "▶ "); color: var(--cat-mark-color, #ffc000); font-size: 10px; }
.side .sep { height: 0; border-top: var(--sep, 1px dashed rgba(207,224,241,.25)); margin: 6px 10px; }
.side #tabs a { position: relative; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; margin: 2px 0; border: 1px solid transparent;
  border-radius: var(--item-radius, 4px); color: var(--side-text, #cfe0f1); text-decoration: none; white-space: nowrap; font-weight: 400; }
.side #tabs a[hidden] { display: none; }
.side #tabs a:hover { background: var(--side-hover, rgba(255,255,255,.07)); color: var(--side-hover-text, #fff); }
.side #tabs a.active { background: var(--side-active-bg, #1f4e78); color: var(--side-active-text, #fff); border-color: var(--side-active-border, transparent);
  box-shadow: var(--side-active-shadow, inset 4px 0 0 #ffc000); font-weight: 700; }
.nav-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--ico, currentColor); }
.nav-ico > svg { width: 22px; height: 22px; }
.side #tabs a.active .nav-ico { color: var(--ico-active, #ffc000); }
.side .label { overflow: hidden; text-overflow: ellipsis; }
.side .nav-count { margin-left: auto; min-width: 20px; height: 18px; line-height: 18px; padding: 0 6px; border-radius: var(--count-radius, 3px); background: var(--count-bg, #e53935);
  color: var(--count-text, #fff); font-size: 11px; font-weight: 800; text-align: center; box-shadow: var(--count-shadow, none); }
.side .collapse { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 18px; border: 0; border-top: var(--sep2, 1px solid rgba(255,255,255,.1)); background: transparent;
  color: var(--side-muted, #7f9bb8); cursor: pointer; white-space: nowrap; font: inherit; font-size: 12px; }
.side .collapse .nav-ico > svg { width: 18px; height: 18px; transition: transform .18s ease; }
.side .collapse:hover { background: var(--side-hover, rgba(255,255,255,.07)); color: var(--side-hover-text, #fff); }
.side-tip { position: fixed; z-index: 50; padding: 4px 10px; background: var(--tip-bg, #0b1a2a); color: var(--tip-text, #fff); border-radius: 4px; font-size: 12px; pointer-events: none; white-space: nowrap; box-shadow: var(--tip-shadow, 2px 2px 0 rgba(0,0,0,.35)); }
.backdrop { display: none; }

/* 折りたたみ：アイコンだけの細い帯 */
body.side-collapsed .side { width: 62px; }
body.side-collapsed .side .label { display: none; }
body.side-collapsed .side .cat { font-size: 0; padding: 6px 0 2px; }
body.side-collapsed .side .cat::before { content: ""; display: block; margin: 4px 14px; border-top: 2px dotted var(--side-muted, #7f9bb8); opacity: .5; }
body.side-collapsed .side .cat:first-child::before { display: none; }
body.side-collapsed .side #tabs a { justify-content: center; padding: 0; }
body.side-collapsed .side .nav-count { position: absolute; top: 3px; right: 6px; min-width: 0; width: 10px; height: 10px; padding: 0; font-size: 0; border-radius: 50%; box-shadow: none; }
body.side-collapsed .side .collapse { justify-content: center; padding: 0; }
body.side-collapsed .side .collapse .nav-ico > svg { transform: scaleX(-1); }

/* ログイン画面では出さない */
body.auth-mode .side, body.auth-mode .menu-btn { display: none !important; }

/* 狭い画面：≡ で横から出るメニュー（折りたたみは使わない） */
@media (max-width: 860px) {
  .menu-btn { display: inline-grid; }
  .side { position: fixed; top: 52px; left: 0; bottom: 0; height: auto; width: 252px !important; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 6px 0 0 rgba(0,0,0,.2); }
  body.side-open .side { transform: none; }
  body.side-open .backdrop { display: block; position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.4); z-index: 15; }
  .side .collapse { display: none; }
  body.side-collapsed .side .label { display: inline; }
  body.side-collapsed .side .cat { font-size: 11px; padding: 12px 10px 3px; }
  body.side-collapsed .side .cat::before { content: var(--cat-mark, "▶ "); display: inline; margin: 0; border: 0; opacity: 1; }
  body.side-collapsed .side #tabs a { justify-content: flex-start; padding: 0 10px; }
  body.side-collapsed .side .nav-count { position: static; width: auto; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; border-radius: var(--count-radius, 3px); }
}
@media (max-width: 720px) { .brand { display: flex; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .side, .side .collapse .nav-ico > svg { transition: none; } }

/* ---------- 設定・入出力：デザインの選択 ---------- */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.design-card { display: grid; gap: 4px; text-align: left; padding: 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.design-card:hover { border-color: var(--brand-2); }
.design-card.on { border-color: var(--brand-2); box-shadow: 0 0 0 2px var(--brand-2) inset; }
.design-swatch { position: relative; display: block; height: 44px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); overflow: hidden; }
.design-swatch span { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; border-right: 1px solid rgba(0,0,0,.12); }
.design-swatch i { position: absolute; left: 7%; top: 30%; width: 20%; height: 7px; border-radius: 2px; }
.design-name { font-weight: 700; } .design-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ===================== レトロ（標準）：今までの配色＋ドット絵 ===================== */
html[data-design="retro"] .nav-ico > svg { width: 20px; height: 20px; }
html[data-design="retro"] .side .nav-count { box-shadow: 2px 2px 0 #7f1d1d; }

/* ===================== ミニマル ===================== */
html[data-design="minimal"] { --top-bg: #ffffff; --top-text: #111827; --top-muted: #6b7280; --top-btn-border: #d1d5db; --top-hover: #f3f4f6; --logo: #2563eb;
  --side-bg: #ffffff; --side-text: #374151; --side-muted: #9ca3af; --side-hover: #f3f4f6; --side-hover-text: #111827; --side-active-bg: #eef4ff; --side-active-text: #1d4ed8;
  --side-active-shadow: none; --ico: #6b7280; --ico-active: #1d4ed8; --side-border: 1px solid #e5e7eb; --cat-mark: ""; --sep: 1px solid #e5e7eb; --sep2: 1px solid #e5e7eb;
  --count-bg: #2563eb; --count-radius: 999px; --item-radius: 8px; --tip-bg: #111827; --tip-shadow: none; }
html[data-design="minimal"] .topbar { box-shadow: none; border-bottom: 1px solid #e5e7eb; }

/* ===================== かわいい ===================== */
html[data-design="cute"] { color-scheme: light;
  --bg: #fff7fa; --panel: #ffffff; --text: #4a3a42; --muted: #9b8590; --line: #f6dbe5; --brand: #d94f7c; --brand-2: #ff7aa2; --accent-bg: #ffeef4;
  --ok: #2f9e7a; --warn: #c27c00; --warn-bg: #fff3d6; --bad: #e5537a; --bad-bg: #ffe4ec; --hit: #fff6c9;
  --c1: #ff8fb1; --c2: #8ec5ff; --c3: #b7a4ff; --c4: #ffd36e; --c5: #7fd6b4; --c6: #ffab7a; --c7: #cbbcc4; --c8: #c79bff; --track: #fbe7ee;
  --top-bg: #f78fb3; --top-text: #ffffff; --top-muted: #ffe8f0; --top-btn-border: rgba(255,255,255,.75); --top-hover: rgba(255,255,255,.2); --logo: #ffffff;
  --side-bg: #fff7ef; --side-text: #5b4a52; --side-muted: #b08f9c; --side-hover: #ffeef3; --side-hover-text: #3d2f35; --side-active-bg: #ffe3ec; --side-active-text: #3d2f35;
  --side-active-shadow: inset 4px 0 0 #ff8fb1; --side-border: 1px solid #f6dfe6; --cat-mark: "♥ "; --cat-mark-color: #ff8fb1; --sep: 1px dashed #f2cfdb; --sep2: 1px solid #f6dfe6;
  --count-bg: #ff6b8b; --count-radius: 999px; --item-radius: 14px; --tip-bg: #5b4a52; --tip-shadow: none; }
html[data-design="cute"] .topbar { box-shadow: 0 2px 0 #ffd0df; }
html[data-design="cute"] .tile { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--tile); color: var(--ink); transition: transform .15s ease; }
html[data-design="cute"] .tile svg { width: 20px; height: 20px; }
html[data-design="cute"] .side #tabs a:hover .tile { transform: rotate(-6deg) scale(1.08); }
html[data-design="cute"] .side #tabs a.active .tile { box-shadow: 0 0 0 2px #fff; }
html[data-design="cute"] .panel { border-radius: 16px; border-color: #f6dbe5; box-shadow: 0 3px 10px rgba(255,143,177,.12); }
html[data-design="cute"] .btn { border-radius: 999px; }
html[data-design="cute"] input, html[data-design="cute"] select, html[data-design="cute"] textarea, html[data-design="cute"] .tag-input { border-radius: 10px; }
html[data-design="cute"] .badge { border-radius: 999px; }
html[data-design="cute"] h1::after { content: " ♡"; color: #ff8fb1; font-weight: 400; }
html[data-design="cute"] dialog { border-radius: 18px; }
html[data-design="cute"] #toast { background: #5b4a52; border-radius: 999px; }
html[data-design="cute"] .news-ico, html[data-design="cute"] .rank-head .ico { border-radius: 50%; }

/* ===================== ダーク・ネオン ===================== */
html[data-design="dark"] { color-scheme: dark;
  --bg: #0b0d12; --panel: #11151c; --text: #e5e9ee; --muted: #8b949e; --line: #222a35; --brand: #22d3ee; --brand-2: #0891b2; --accent-bg: #10242c;
  --ok: #4ade80; --warn: #fbbf24; --warn-bg: #2a2110; --bad: #f472b6; --bad-bg: #2a1220; --hit: #2a2a10;
  --c1: #22d3ee; --c2: #818cf8; --c3: #a78bfa; --c4: #fbbf24; --c5: #4ade80; --c6: #f472b6; --c7: #475569; --c8: #c084fc; --track: #1e2530;
  --top-bg: #0d0f14; --top-text: #e5e9ee; --top-muted: #8b949e; --top-btn-border: rgba(34,211,238,.5); --top-hover: #161b22; --logo: #22d3ee;
  --side-bg: #0d0f14; --side-text: #c9d1d9; --side-muted: #6e7681; --side-hover: #161b22; --side-hover-text: #ffffff; --side-active-bg: #161b22; --side-active-text: #ffffff;
  --side-active-shadow: inset 3px 0 0 #22d3ee; --ico: #8b949e; --ico-active: #22d3ee; --side-border: 1px solid #1f2937; --cat-mark: "// "; --cat-mark-color: #f472b6;
  --sep: 1px solid #21262d; --sep2: 1px solid #21262d; --count-bg: #f472b6; --count-text: #0d0f14; --count-radius: 4px; --tip-bg: #161b22; --tip-shadow: 0 0 8px rgba(34,211,238,.4); }
html[data-design="dark"] .topbar { box-shadow: none; border-bottom: 1px solid rgba(34,211,238,.35); }
html[data-design="dark"] .brand .logo { filter: drop-shadow(0 0 4px rgba(34,211,238,.8)); }
html[data-design="dark"] .side .cat { font-family: Consolas, "Courier New", monospace; }
html[data-design="dark"] .side #tabs a:hover .nav-ico { color: #f472b6; }
html[data-design="dark"] .side #tabs a.active .nav-ico { filter: drop-shadow(0 0 4px rgba(34,211,238,.9)); }
html[data-design="dark"] .side .nav-count { box-shadow: 0 0 8px rgba(244,114,182,.7); }
html[data-design="dark"] .side-tip { border: 1px solid #22d3ee; }
html[data-design="dark"] .badge.kind.unit { background: #1c3324; color: #8fd5a4; }
html[data-design="dark"] dialog::backdrop { background: rgba(0,0,0,.65); }

/* ===================== 和モダン ===================== */
html[data-design="wa"] { color-scheme: light;
  --bg: #f3eee2; --panel: #fbf8f0; --text: #2b3a55; --muted: #7b7466; --line: #ddd2b8; --brand: #2b3a55; --brand-2: #2b3a55; --accent-bg: #ece4d2;
  --ok: #4d7a3a; --warn: #a0661e; --warn-bg: #f4e6c8; --bad: #b7282e; --bad-bg: #f7dedb; --hit: #f6edc6;
  --c1: #2b3a55; --c2: #b7282e; --c3: #6a8d73; --c4: #c9a24a; --c5: #7a9a52; --c6: #d4704a; --c7: #a69f91; --c8: #745399; --track: #e6dcc6;
  --top-bg: #2b3a55; --top-text: #f5efe1; --top-muted: #c9c0ad; --top-btn-border: rgba(245,239,225,.6); --logo: #f0d9a8;
  --side-bg: #f5efe1; --side-text: #2b3a55; --side-muted: #8a7f6a; --side-hover: rgba(183,40,46,.06); --side-hover-text: #1b2740; --side-active-bg: #ebe1c8; --side-active-text: #1b2740;
  --side-active-shadow: inset 3px 0 0 #b7282e; --side-border: 1px solid #d9ccae; --cat-mark: "〓 "; --cat-mark-color: #b7282e; --sep: 1px solid #d9ccae; --sep2: 1px solid #d9ccae;
  --count-bg: #b7282e; --count-radius: 2px; --item-radius: 2px; --tip-bg: #2b3a55; --tip-shadow: none; }
html[data-design="wa"] .topbar { box-shadow: none; }
html[data-design="wa"] .side { background-image: radial-gradient(rgba(138,127,106,.08) 1px, transparent 1px); background-size: 6px 6px; }
html[data-design="wa"] h1, html[data-design="wa"] h2, html[data-design="wa"] .section-title, html[data-design="wa"] .brand, html[data-design="wa"] #tabs, html[data-design="wa"] .side-tip { font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif; }
html[data-design="wa"] .brand, html[data-design="wa"] .side .cat { letter-spacing: .15em; }
html[data-design="wa"] .seal { width: 24px; height: 24px; display: grid; place-items: center; border: 1.6px solid #b7282e; border-radius: 4px; color: #b7282e; font-size: 14px; font-weight: 700; line-height: 1;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; transform: rotate(-3deg); background: rgba(255,255,255,.45); }
html[data-design="wa"] .side #tabs a.active .seal { background: #b7282e; color: #fff; }
html[data-design="wa"] .brand .logo .seal { border-color: #f0d9a8; color: #f0d9a8; background: none; }
html[data-design="wa"] h1::before { content: ""; display: inline-block; width: 6px; height: 18px; margin-right: 10px; vertical-align: -2px; background: #b7282e; }
html[data-design="wa"] .panel { border-radius: 2px; border-color: #d9ccae; box-shadow: none; }
html[data-design="wa"] .btn, html[data-design="wa"] input, html[data-design="wa"] select, html[data-design="wa"] textarea, html[data-design="wa"] .tag-input { border-radius: 2px; }
html[data-design="wa"] .btn.danger { color: #b7282e; border-color: #b7282e; }
html[data-design="wa"] .news-ico, html[data-design="wa"] .rank-head .ico { border-radius: 4px; }
html[data-design="wa"] .news-ico { background: #2b3a55; }
html[data-design="wa"] #toast { background: #2b3a55; border-radius: 2px; }

/* ===================== 手書きノート ===================== */
html[data-design="note"] { color-scheme: light; --hand: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "UD Digi Kyokasho NK-R", "Yu Gothic UI", sans-serif;
  --bg: #fffdf6; --panel: #ffffff; --text: #333333; --muted: #7a7568; --line: #e3dccb; --brand: #2f6fb3; --brand-2: #2f6fb3; --accent-bg: #eef4fb;
  --ok: #2e7d32; --warn: #b26a00; --warn-bg: #fff6cc; --bad: #e53935; --bad-bg: #fde7e7; --hit: #fff27a;
  --c1: #2f6fb3; --c2: #e53935; --c3: #6aa84f; --c4: #f4c20d; --c5: #8e7cc3; --c6: #ff9f43; --c7: #b0aca0; --c8: #3b4a5a; --track: #f1ece0;
  --top-bg: #3b4a5a; --logo: #fff27a;
  --side-bg: #fffdf6; --side-text: #333333; --side-muted: #9a9384; --side-hover: rgba(255,242,122,.35); --side-hover-text: #111; --side-active-bg: transparent; --side-active-text: #111;
  --side-active-shadow: none; --ico: #333; --ico-active: #e53935; --side-border: 1px solid #e8e1cf; --cat-mark: "✎ "; --cat-mark-color: #e53935; --sep2: 1px solid #e8e1cf;
  --count-bg: transparent; --count-text: #e53935; --item-radius: 0; --tip-bg: #fffdf6; --tip-text: #333; --tip-shadow: 2px 2px 0 #333; }
html[data-design="note"] body { font-family: var(--hand); background-image: repeating-linear-gradient(transparent 0 31px, #edf2f9 31px 32px); }
/* メニュー：1行＝32px にそろえて、罫線の上に文字が乗るようにする */
html[data-design="note"] .side #tabs { padding: 0 8px 0 14px;
  background: linear-gradient(90deg, transparent 5px, rgba(229,57,53,.45) 5px 6px, transparent 6px 8px, rgba(229,57,53,.45) 8px 9px, transparent 9px),
    repeating-linear-gradient(transparent 0 31px, #cddcf0 31px 32px); background-attachment: local; }
html[data-design="note"] .side .cat { height: 32px; padding: 0 10px 6px; display: flex; align-items: flex-end; box-sizing: border-box; }
html[data-design="note"] .side .cat:first-child { padding-top: 0; }
html[data-design="note"] .side .sep { height: 32px; margin: 0; border: 0; }
html[data-design="note"] .side #tabs a { height: 32px; margin: 0; border: 0; align-items: flex-end; padding-bottom: 4px; box-sizing: border-box; }
html[data-design="note"] .side #tabs a .nav-ico { height: 24px; }
html[data-design="note"] .side #tabs a.active .label { background: linear-gradient(transparent 55%, #fff27a 55%); padding: 0 2px; }
html[data-design="note"] .side .nav-count { border: 2px solid #e53935; border-radius: 50% 45% 55% 50%; height: 22px; line-height: 18px; }
html[data-design="note"] body.side-collapsed .side .nav-count { background: #e53935; border: 0; }
html[data-design="note"] body.side-collapsed .side #tabs { background: repeating-linear-gradient(transparent 0 31px, #cddcf0 31px 32px); background-attachment: local; padding-left: 8px; }
html[data-design="note"] body.side-collapsed .side .cat { font-size: 0; }
html[data-design="note"] body.side-collapsed .side .cat::before { display: none; }
html[data-design="note"] .side-tip { border: 1.5px solid #333; border-radius: 6px 10px 7px 9px; }
/* 本文：白いカードに鉛筆の線、見出しは蛍光ペン */
html[data-design="note"] h1 { display: inline-block; background: linear-gradient(transparent 60%, #fff27a 60%); padding: 0 4px; }
html[data-design="note"] .panel { border: 1.5px solid #333; border-radius: 6px 12px 7px 10px; box-shadow: 2px 3px 0 rgba(0,0,0,.12); }
html[data-design="note"] .btn { border: 1.5px solid #333; border-radius: 10px 6px 11px 7px; }
html[data-design="note"] .btn.primary { background: #2f6fb3; border-color: #333; }
html[data-design="note"] input, html[data-design="note"] select, html[data-design="note"] textarea, html[data-design="note"] .tag-input { border-color: #b9b2a2; border-radius: 6px 9px 7px 8px; }
html[data-design="note"] th { color: #333; background: linear-gradient(transparent 62%, #fff6a6 62%), var(--panel); }
html[data-design="note"] .badge { border-radius: 8px 5px 9px 6px; }
html[data-design="note"] dialog { border: 1.5px solid #333; border-radius: 10px 14px 9px 12px; }
html[data-design="note"] #toast { background: #fffdf6; color: #333; border: 1.5px solid #333; box-shadow: 2px 2px 0 #333; }
html[data-design="note"] #toast.err { background: #fde7e7; color: #b71c1c; }
html[data-design="note"] .news-ico { background: #2f6fb3; border-radius: 40% 55% 45% 50%; }

/* ===================== ポップ ===================== */
html[data-design="pop"] { color-scheme: light;
  --bg: #fffbea; --panel: #ffffff; --text: #111111; --muted: #5c5a52; --line: #ece1b8; --brand: #c2185b; --brand-2: #ff5fa2; --accent-bg: #fff1a8;
  --ok: #15803d; --warn: #b45309; --warn-bg: #fff1a8; --bad: #e11d48; --bad-bg: #ffe4ea; --hit: #fff1a8;
  --c1: #3ec1ff; --c2: #ff7eb6; --c3: #a68bff; --c4: #ffd23f; --c5: #4fd18b; --c6: #ff8a3d; --c7: #9ca3af; --c8: #111111; --track: #f6edc8;
  --top-bg: #111111; --top-text: #ffffff; --top-muted: #ffd23f; --top-btn-border: #ffd23f; --logo: #ffd23f;
  --side-bg: #fff3c4; --side-text: #111111; --side-muted: #6b5a1e; --side-hover: #ffe08a; --side-hover-text: #111; --side-active-bg: #ff7eb6; --side-active-text: #111;
  --side-active-border: #111; --side-active-shadow: 3px 3px 0 #111; --ico: #111; --ico-active: #111; --side-border: 3px solid #111; --cat-mark: "★ "; --cat-mark-color: #111;
  --sep: 2px solid rgba(17,17,17,.25); --sep2: 2px solid #111; --count-bg: #111; --count-radius: 6px; --count-shadow: 2px 2px 0 #ff7eb6; --item-radius: 10px; --tip-bg: #111; --tip-shadow: 3px 3px 0 #ff7eb6; }
html[data-design="pop"] .topbar { box-shadow: 0 3px 0 #ffd23f; }
html[data-design="pop"] #userbox button { border-width: 2px; font-weight: 700; color: #ffd23f; }
html[data-design="pop"] .side #tabs a { border-width: 2px; font-weight: 700; margin: 3px 0; }
html[data-design="pop"] .side #tabs a:hover { border-color: #111; }
html[data-design="pop"] .nav-ico > svg { width: 24px; height: 24px; }
html[data-design="pop"] .side .cat { font-weight: 700; }
html[data-design="pop"] h1 { display: inline-block; background: #ffd23f; padding: 2px 10px; border: 2.5px solid #111; border-radius: 10px; box-shadow: 3px 3px 0 #111; }
html[data-design="pop"] .panel { border: 2.5px solid #111; border-radius: 14px; box-shadow: 4px 4px 0 #111; }
html[data-design="pop"] .btn { border: 2px solid #111; border-radius: 10px; font-weight: 700; box-shadow: 2px 2px 0 #111; }
html[data-design="pop"] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
html[data-design="pop"] .btn.primary { background: #ff5fa2; color: #111; border-color: #111; }
html[data-design="pop"] .btn.danger { background: #fff; color: #e11d48; border-color: #111; }
html[data-design="pop"] input, html[data-design="pop"] select, html[data-design="pop"] textarea, html[data-design="pop"] .tag-input { border: 2px solid #111; border-radius: 8px; }
html[data-design="pop"] th { color: #111; background: #fff1a8; border-bottom: 2px solid #111; }
html[data-design="pop"] .badge { border: 1.5px solid #111; border-radius: 6px; }
html[data-design="pop"] .tag { border: 1.5px solid #111; background: #e8f7ff; color: #111; }
html[data-design="pop"] dialog { border: 3px solid #111; border-radius: 16px; box-shadow: 6px 6px 0 #111; }
html[data-design="pop"] .cost-tile.est { background: #fff1a8; }
html[data-design="pop"] .news-ico, html[data-design="pop"] .rank-head .ico { border: 2px solid #111; box-shadow: 2px 2px 0 #111; }
html[data-design="pop"] #toast { background: #111; border: 2px solid #ffd23f; box-shadow: 3px 3px 0 #ff5fa2; }

/* ===================== 大正浪漫 ===================== */
html[data-design="taisho"] { color-scheme: light; --mincho: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --bg: #f6efe2; --panel: #fffaf0; --text: #3a2a24; --muted: #7d6a58; --line: #d8c7a6; --brand: #6c2c2f; --brand-2: #6c2c2f; --accent-bg: #f3e6d2;
  --ok: #2f5d50; --warn: #8a5a00; --warn-bg: #f7e7c4; --bad: #9e2a2b; --bad-bg: #f6dede; --hit: #fbeec1;
  --c1: #6c2c2f; --c2: #2b4b65; --c3: #7a4171; --c4: #c5a05a; --c5: #2f5d50; --c6: #b5562f; --c7: #a89f91; --c8: #7a4171; --track: #eadfca;
  --top-bg: #6c2c2f; --top-text: #fffaf0; --top-muted: #e8d3a2; --top-btn-border: #e8d3a2; --top-hover: rgba(232,211,162,.18); --logo: #e8d3a2;
  /* メニューは無地の生成りで、すっきりと */
  --side-bg: #f6efe2; --side-text: #3a2a24; --side-muted: #7a4171; --side-hover: #fffaf0; --side-hover-text: #3a2a24; --side-active-bg: #6c2c2f; --side-active-text: #fffaf0;
  --side-active-border: #c5a05a; --side-active-shadow: none; --side-border: 3px double #6c2c2f; --cat-mark: "❦ "; --cat-mark-color: #6c2c2f;
  --sep2: 3px double #c5a05a; --count-bg: #9e2a2b; --count-text: #fffaf0; --count-radius: 50%; --item-radius: 2px; --tip-bg: #fffaf0; --tip-text: #6c2c2f; --tip-shadow: none; }
html[data-design="taisho"] h1, html[data-design="taisho"] h2, html[data-design="taisho"] .section-title, html[data-design="taisho"] .brand, html[data-design="taisho"] #tabs,
html[data-design="taisho"] .side .collapse, html[data-design="taisho"] .side-tip { font-family: var(--mincho); }
html[data-design="taisho"] h1 { letter-spacing: .12em; color: #6c2c2f; }
html[data-design="taisho"] .topbar { box-shadow: none; border-bottom: 4px double #c5a05a; }
html[data-design="taisho"] .brand { letter-spacing: .25em; }
html[data-design="taisho"] #userbox button { border-radius: 2px; }
html[data-design="taisho"] .side .cat { letter-spacing: .3em; font-weight: 700; }
html[data-design="taisho"] .side .sep { border: 0; height: 6px; margin: 8px 14px; background: radial-gradient(circle, #c5a05a 1.2px, transparent 1.6px) center / 10px 6px repeat-x; }
html[data-design="taisho"] .side #tabs a { margin: 3px 0; letter-spacing: .05em; }
html[data-design="taisho"] .side #tabs a:hover { border-color: #c5a05a; }
html[data-design="taisho"] .side #tabs a.active { border: 3px double #c5a05a; }
html[data-design="taisho"] .medal { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #c5a05a; outline: 1px solid rgba(197,160,90,.55); outline-offset: 2px; background: #fffaf0; color: #6c2c2f; }
html[data-design="taisho"] .medal svg { width: 17px; height: 17px; }
html[data-design="taisho"] .side #tabs a.active .medal { background: #c5a05a; border-color: #fffaf0; color: #3a2a24; }
html[data-design="taisho"] .side .nav-count { border: 1px solid #c5a05a; }
html[data-design="taisho"] .side-tip { border: 3px double #6c2c2f; border-radius: 2px; letter-spacing: .1em; }
html[data-design="taisho"] .panel { border: 3px double #b49a6a; border-radius: 3px; box-shadow: none; }
html[data-design="taisho"] .btn, html[data-design="taisho"] input, html[data-design="taisho"] select, html[data-design="taisho"] textarea, html[data-design="taisho"] .tag-input { border-radius: 2px; }
html[data-design="taisho"] .news-ico { background: #6c2c2f; color: #e8d3a2; }
html[data-design="taisho"] dialog { border: 3px double #6c2c2f; border-radius: 4px; }
html[data-design="taisho"] #toast { background: #6c2c2f; color: #fffaf0; border-radius: 2px; }

/* ===================== AI INNOVATION（濃紺のヘッダーと見出しの帯、白い本文、紫のアクセント） ===================== */
html[data-design="ai"] { color-scheme: light;
  --bg: #ffffff; --panel: #ffffff; --text: #1f2533; --muted: #6b7280; --line: #e3e6ec; --brand: #1f2533; --brand-2: #1f2533; --accent-bg: #eef2ff;
  --ok: #2f9e44; --warn: #c2410c; --warn-bg: #fff4e5; --bad: #d93025; --bad-bg: #fdecec; --hit: #fff9db;
  --c1: #3b5bdb; --c2: #1f2533; --c3: #7c3aed; --c4: #f59f00; --c5: #2f9e44; --c6: #e03131; --c7: #adb5bd; --c8: #7c3aed; --track: #eef0f4;
  --top-bg: #1f2533; --top-text: #ffffff; --top-muted: #c3c9d6; --top-btn-border: transparent; --top-hover: rgba(255,255,255,.1); --logo: #ffffff;
  --side-bg: #1f2533; --side-text: #c3c9d6; --side-muted: #7f8899; --side-hover: rgba(255,255,255,.07); --side-hover-text: #ffffff; --side-active-bg: rgba(255,255,255,.1);
  --side-active-text: #ffffff; --side-active-shadow: inset 3px 0 0 #7c3aed; --ico: #9aa3b5; --ico-active: #ffffff; --side-border: 1px solid #151a24; --cat-mark: ""; --sep: 1px solid #2f3747;
  --sep2: 1px solid #2f3747; --count-bg: #d93025; --count-radius: 3px; --item-radius: 3px; --tip-bg: #1f2533; --tip-shadow: none; }
html[data-design="ai"] body { font-size: 12.5px; }
html[data-design="ai"] .topbar { box-shadow: none; }
html[data-design="ai"] .brand { font-size: 15px; letter-spacing: .02em; }
html[data-design="ai"] .brand { gap: 12px; }
html[data-design="ai"] .brand .logo { width: auto; height: 40px; }
html[data-design="ai"] .brand .logo img { display: block; height: 40px; width: auto; }
html[data-design="ai"] #userbox button { border: 0; padding: 3px 6px; }
html[data-design="ai"] .side .cat { letter-spacing: .1em; font-weight: 700; }
html[data-design="ai"] a { color: #2563eb; }
html[data-design="ai"] h1 { font-size: 18px; }
html[data-design="ai"] .panel { border: 1px solid var(--line); border-radius: 2px; box-shadow: none; }
html[data-design="ai"] .section-title { background: #1f2533; color: #ffffff; font-size: 13px; padding: 9px 12px; border-bottom: 0; }
html[data-design="ai"] .section-title .legend { color: #9aa3b5; }
html[data-design="ai"] .btn { border-radius: 3px; border-color: #cfd4dc; }
html[data-design="ai"] .btn.primary { background: #1f2533; border-color: #1f2533; }
html[data-design="ai"] .btn.small { font-size: 11px; }
html[data-design="ai"] input, html[data-design="ai"] select, html[data-design="ai"] textarea, html[data-design="ai"] .tag-input { border-radius: 3px; border-color: #d5d9e0; }
html[data-design="ai"] th { font-size: 11px; color: var(--muted); }
html[data-design="ai"] .tag { background: #eef2ff; color: #3b5bdb; }
html[data-design="ai"] .badge { border-radius: 3px; }
html[data-design="ai"] .news-ico { background: #7c3aed; border-radius: 4px; }
html[data-design="ai"] .notice { background: #fdf1f1; color: #d93025; border: 1px solid #f3c7c7; border-radius: 2px; }
html[data-design="ai"] .card .value.alert { color: #d93025; }
html[data-design="ai"] dialog { border-radius: 4px; }
html[data-design="ai"] .modal-head { background: #1f2533; color: #ffffff; border-radius: 4px 4px 0 0; }
html[data-design="ai"] .modal-head .icon-btn { color: #c3c9d6; }
html[data-design="ai"] #toast { background: #1f2533; border-radius: 3px; }

/* ===================== コルクボード（コルクの板に紙のメモと付箋を画びょうで留める。付箋の色はカテゴリごと） ===================== */
html[data-design="cork"] { color-scheme: light; --hand: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "Yu Gothic UI", sans-serif;
  --bg: #c8955a; --panel: #fffdf5; --text: #3b2a1a; --muted: #7a6650; --line: #e7dcc4; --brand: #8a4a1f; --brand-2: #b5462f; --accent-bg: #f6ecd6;
  --ok: #2e7d32; --warn: #9a5b00; --warn-bg: #fff3c4; --bad: #c62828; --bad-bg: #fde4e1; --hit: #fff59d;
  --c1: #b5462f; --c2: #1565c0; --c3: #2e7d32; --c4: #f9a825; --c5: #8e5a2b; --c6: #d81b60; --c7: #a1887f; --c8: #6a1b9a; --track: #efe4cc;
  --top-bg: #6b4423; --top-text: #fff3e0; --top-muted: #e9c99a; --top-btn-border: #e9c99a; --top-hover: rgba(255,255,255,.12); --logo: #ffd54f;
  --side-bg: #c8955a; --side-text: #3b2a1a; --side-muted: #3b2a1a; --side-hover: #ffffff; --side-hover-text: #3b2a1a; --side-active-text: #3b2a1a;
  --side-active-shadow: 2px 3px 5px rgba(0,0,0,.32); --ico: #6b4423; --ico-active: #b5462f; --side-border: 10px solid #7a4e2a; --cat-mark: ""; --sep: 2px dashed rgba(59,42,26,.35);
  --sep2: 0; --count-bg: #c62828; --count-radius: 50%; --item-radius: 1px; --tip-text: #3b2a1a; --tip-shadow: 2px 3px 5px rgba(0,0,0,.3);
  /* 付箋の色（のりの部分は少し濃い色）：1 ホーム＝黄、2 台帳＝水色、3 申請・お知らせ＝黄緑、4 管理＝ピンク（nav.js が html に data-cat を付ける） */
  --sticky: #fff59d; --glue: #f9e04b; }
html[data-design="cork"][data-cat="2"] { --sticky: #b3e5fc; --glue: #81d4fa; }
html[data-design="cork"][data-cat="3"] { --sticky: #dcedc8; --glue: #aed581; }
html[data-design="cork"][data-cat="4"] { --sticky: #f8bbd0; --glue: #f48fb1; }
html[data-design="cork"] { --side-active-bg: var(--sticky); --tip-bg: var(--sticky); }
html[data-design="cork"] body { font-family: var(--hand); }
html[data-design="cork"] body, html[data-design="cork"] .side { background-color: #c8955a;
  background-image: radial-gradient(rgba(90,55,25,.38) 1px, transparent 1.6px), radial-gradient(rgba(255,235,200,.28) 1px, transparent 1.6px), radial-gradient(rgba(120,75,35,.3) 1.6px, transparent 2.2px);
  background-size: 7px 7px, 11px 11px, 17px 17px; background-position: 0 0, 3px 5px, 8px 2px; }
html[data-design="cork"] .topbar { background: #6b4423 repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, transparent 3px 11px); box-shadow: 0 3px 0 #4a2e16, 0 6px 10px rgba(0,0,0,.25); }
html[data-design="cork"] #userbox button { border-radius: 4px; }
html[data-design="cork"] .side { box-shadow: inset -2px 0 4px rgba(0,0,0,.25); }
html[data-design="cork"] .side #tabs { padding: 12px 10px; }
/* カテゴリ名：クラフト紙のラベルを青い画びょうで留める */
html[data-design="cork"] .side .cat { position: relative; display: inline-block; margin: 14px 0 6px 4px; padding: 3px 12px 3px 20px; background: #d9b98b; color: #3b2a1a; font-weight: 700; letter-spacing: .1em;
  box-shadow: 1px 2px 3px rgba(0,0,0,.3); transform: rotate(-1.5deg); }
html[data-design="cork"] .side .cat:first-child { padding-top: 3px; margin-top: 4px; }
html[data-design="cork"] .side .cat::after { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #90caf9, #1565c0); box-shadow: 1px 1px 2px rgba(0,0,0,.4); }
/* 各項目：紙のメモ（少しずつ傾ける）。選んだ項目は、そのカテゴリの色の付箋を赤い画びょうで留める */
html[data-design="cork"] .side #tabs a { margin: 5px 2px; background: #fffdf5; box-shadow: 1px 2px 3px rgba(0,0,0,.28); }
html[data-design="cork"] .side #tabs a:nth-of-type(odd) { transform: rotate(-.6deg); } html[data-design="cork"] .side #tabs a:nth-of-type(even) { transform: rotate(.5deg); }
html[data-design="cork"] .side #tabs a:hover { transform: rotate(0) translateY(-1px); box-shadow: 2px 4px 6px rgba(0,0,0,.3); }
html[data-design="cork"] .side #tabs a.active { transform: rotate(-1.4deg); }
html[data-design="cork"] .side #tabs a.active::after { content: ""; position: absolute; top: -5px; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a80, #c62828); box-shadow: 1px 2px 2px rgba(0,0,0,.4); }
html[data-design="cork"] .side .sep { margin: 10px 8px; }
html[data-design="cork"] .side .nav-count { box-shadow: 1px 2px 2px rgba(0,0,0,.35); }
html[data-design="cork"] .side .collapse { background: #7a4e2a; color: #f5e1c0; } html[data-design="cork"] .side .collapse:hover { background: #8b5a2b; color: #fff; }
html[data-design="cork"] .side-tip { border-radius: 1px; transform: rotate(-1deg); }
@media (min-width: 861px) {
  html[data-design="cork"] body.side-collapsed .side .cat { display: block; margin: 0; padding: 6px 0 2px; background: none; box-shadow: none; transform: none; }
  html[data-design="cork"] body.side-collapsed .side .cat::after { display: none; }
  html[data-design="cork"] body.side-collapsed .side .cat::before { border-top-color: rgba(59,42,26,.5); }
}
/* 本文：見出しは今のカテゴリの色の付箋（上の端が少し濃い、のりの部分）。カードは白い紙を画びょうで留める */
html[data-design="cork"] main h1 { display: inline-block; min-width: 150px; margin: 4px 0 12px 4px; padding: 14px 22px 12px; background: linear-gradient(var(--glue) 0 9px, var(--sticky) 9px);
  box-shadow: 2px 4px 8px rgba(0,0,0,.3); transform: rotate(-2deg); }
html[data-design="cork"] main .sub { display: table; background: rgba(255,253,245,.9); color: var(--text); padding: 6px 10px; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); }
html[data-design="cork"] .panel { position: relative; border: 0; border-radius: 2px; box-shadow: 2px 3px 6px rgba(0,0,0,.3); }
html[data-design="cork"] .panel::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #a5d6a7, #2e7d32); box-shadow: 1px 2px 2px rgba(0,0,0,.4); pointer-events: none; }
html[data-design="cork"] .cards .panel:nth-child(odd) { transform: rotate(-.8deg); } html[data-design="cork"] .cards .panel:nth-child(even) { transform: rotate(.7deg); }
html[data-design="cork"] .cards .panel:nth-child(3n+2)::before { background: radial-gradient(circle at 35% 35%, #ffe082, #f9a825); }
html[data-design="cork"] .cards .panel:nth-child(3n)::before { background: radial-gradient(circle at 35% 35%, #ff8a80, #c62828); }
html[data-design="cork"] .btn, html[data-design="cork"] input, html[data-design="cork"] select, html[data-design="cork"] textarea, html[data-design="cork"] .tag-input { border-radius: 3px; }
html[data-design="cork"] th { background: #fffdf5; }
html[data-design="cork"] dialog { border-radius: 2px; box-shadow: 4px 6px 16px rgba(0,0,0,.4); }
html[data-design="cork"] .modal-head { background: linear-gradient(var(--glue) 0 6px, var(--sticky) 6px); }
html[data-design="cork"] #toast { background: var(--sticky); color: #3b2a1a; border-radius: 1px; box-shadow: 2px 3px 6px rgba(0,0,0,.35); }
html[data-design="cork"] #toast.err { background: #ffcdd2; color: #b71c1c; }
html[data-design="cork"] .news-ico { background: #b5462f; border-radius: 50%; }

/* ===================== 廃墟（コンクリートにひび割れと苔、錆びた鉄板、ツタと雑草、放置された資材） ===================== */
html[data-design="ruins"] { color-scheme: light;
  --bg: #8d8a83; --panel: #e6e2d8; --text: #2b2a27; --muted: #5f5b52; --line: #c4bdae; --brand: #6b3518; --brand-2: #8a3d14; --accent-bg: #d9d3c4;
  --ok: #4d6b2a; --warn: #8a5a00; --warn-bg: #eadcb5; --bad: #9c2b1c; --bad-bg: #ecd2cb; --hit: #efe2a8;
  --c1: #8a3d14; --c2: #4a5a6a; --c3: #6d8f3e; --c4: #c9a227; --c5: #5f5b52; --c6: #a4501f; --c7: #a8a395; --c8: #3b3a36; --track: #d4cdbd;
  --top-bg: #4a3a2e; --top-text: #e8dcc6; --top-muted: #c4b59c; --top-btn-border: rgba(232,220,198,.5); --top-hover: rgba(255,255,255,.08); --logo: #d9783c;
  --side-bg: #3b3a36; --side-text: #c9c6bd; --side-muted: #a29c8d; --side-hover: rgba(255,255,255,.05); --side-hover-text: #eee8da; --side-active-bg: #6b3518; --side-active-text: #f3e6d0;
  --side-active-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 2px 2px 0 rgba(0,0,0,.35); --ico: #a8a395; --ico-active: #f0a060; --side-border: 4px solid #2a2926;
  --cat-mark: "▲ "; --cat-mark-color: #2b2a27; --sep2: 1px solid rgba(255,255,255,.08); --count-bg: #9c2b1c; --count-radius: 40% 55% 45% 60%; --item-radius: 0;
  --tip-bg: #2a2926; --tip-text: #e8dcc6; --tip-shadow: none; --radius: 0; }
html[data-design="ruins"] body { font-family: "Bahnschrift", "Yu Gothic UI", "Meiryo UI", sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='none' stroke='rgba(20,18,15,.35)' stroke-width='1.1'%3E%3Cpath d='M0 46 L58 60 L96 34 L150 76 L214 64 L240 90'/%3E%3Cpath d='M96 34 L104 8'/%3E%3Cpath d='M318 0 L300 62 L326 112 L304 176 L318 230'/%3E%3Cpath d='M326 112 L366 128'/%3E%3Cpath d='M30 320 L52 268 L40 236 L76 204'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 20% 30%, rgba(60,55,45,.25), transparent 40%), radial-gradient(ellipse at 80% 70%, rgba(70,60,40,.22), transparent 45%),
    radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.4px), radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.4px);
  background-size: 420px 320px, 100% 100%, 100% 100%, 5px 5px, 9px 9px; background-position: 0 0, 0 0, 0 0, 0 0, 2px 3px; background-attachment: fixed; }
/* 上部：錆びた鉄板 */
html[data-design="ruins"] .topbar { background-image: radial-gradient(ellipse at 15% 40%, rgba(164,80,31,.55), transparent 30%), radial-gradient(ellipse at 70% 60%, rgba(140,70,25,.45), transparent 35%),
  repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 7px); box-shadow: 0 3px 0 #2b211a; }
html[data-design="ruins"] .brand { letter-spacing: .3em; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
html[data-design="ruins"] #userbox button { border-radius: 0; }
/* メニュー：暗いコンクリートの壁。右の端にツタ、足元に雑草と苔 */
html[data-design="ruins"] .side { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120'%3E%3Cpath d='M20 0 Q30 30 18 60 Q8 90 20 120' fill='none' stroke='%23465e2a' stroke-width='1.6'/%3E%3Cg fill='%23557a30'%3E%3Cpath d='M24 18 q10 -6 12 4 q-8 6 -12 -4z'/%3E%3Cpath d='M14 50 q-10 -6 -12 4 q8 6 12 -4z'/%3E%3Cpath d='M16 86 q10 -4 12 6 q-8 5 -12 -6z'/%3E%3Cpath d='M18 108 q-10 -4 -11 6 q8 4 11 -6z'/%3E%3C/g%3E%3Cg fill='%236d8f3e'%3E%3Cpath d='M26 34 q8 -2 8 6 q-6 2 -8 -6z'/%3E%3Cpath d='M12 70 q-8 -2 -8 6 q6 2 8 -6z'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M8 70 Q10 45 4 30 M14 70 Q16 40 24 22 M20 70 Q18 50 12 42 M30 70 Q34 48 30 34' stroke='%23597a34' stroke-width='2.2'/%3E%3Cpath d='M60 70 Q58 52 66 38 M66 70 Q70 50 78 44 M72 70 Q70 40 62 26' stroke='%236d8f3e' stroke-width='2'/%3E%3Cpath d='M100 70 Q104 30 98 14' stroke='%23597a34' stroke-width='1.6'/%3E%3Cpath d='M120 70 Q118 50 128 40 M128 70 Q132 52 142 50 M136 70 Q136 44 146 30 M150 70 Q148 56 156 48' stroke='%23708f3a' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='98' cy='12' r='5' fill='%23e4c234'/%3E%3Ccircle cx='98' cy='12' r='2' fill='%23b8901c'/%3E%3Cg fill='%234f6e2c'%3E%3Cellipse cx='44' cy='64' rx='9' ry='4' transform='rotate(-20 44 64)'/%3E%3Cellipse cx='52' cy='62' rx='8' ry='3.5' transform='rotate(25 52 62)'/%3E%3Cellipse cx='112' cy='65' rx='8' ry='3.5' transform='rotate(-30 112 65)'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Cg fill='none' stroke='rgba(20,18,15,.35)' stroke-width='1.1'%3E%3Cpath d='M0 46 L58 60 L96 34 L150 76 L214 64 L240 90'/%3E%3Cpath d='M96 34 L104 8'/%3E%3Cpath d='M318 0 L300 62 L326 112 L304 176 L318 230'/%3E%3Cpath d='M326 112 L366 128'/%3E%3Cpath d='M30 320 L52 268 L40 236 L76 204'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 105%, rgba(86,110,52,.75), transparent 38%), radial-gradient(ellipse at 10% 92%, rgba(70,95,40,.6), transparent 25%),
    radial-gradient(ellipse at 80% 20%, rgba(0,0,0,.25), transparent 40%), radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 40px 120px, 110px 48px, 420px 320px, 100% 100%, 100% 100%, 100% 100%, 6px 6px;
  background-position: right -8px top 0, left bottom 42px, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-y, repeat-x, repeat, no-repeat, no-repeat, no-repeat, repeat; }
/* カテゴリ名：合板の切れ端にスプレーした文字 */
html[data-design="ruins"] .side .cat { display: inline-block; margin: 12px 0 4px 6px; padding: 2px 12px 2px 8px; color: #2b2a27; font-weight: 700; letter-spacing: .3em;
  background: #b8925c repeating-linear-gradient(176deg, rgba(110,80,40,.25) 0 2px, transparent 2px 9px); box-shadow: 1px 2px 0 rgba(0,0,0,.4); transform: rotate(-1deg); }
html[data-design="ruins"] .side .cat:first-child { padding-top: 2px; margin-top: 4px; }
html[data-design="ruins"] .side .cat::before { font-size: 9px; }
/* 区切り：錆びた鉄筋 */
html[data-design="ruins"] .side .sep { border: 0; height: 4px; margin: 10px; border-radius: 2px; opacity: .8; background: repeating-linear-gradient(100deg, #6b3518 0 5px, #8f4c22 5px 7px); }
@media (min-width: 861px) {
  html[data-design="ruins"] body.side-collapsed .side .cat { display: block; margin: 0; padding: 6px 0 2px; background: none; box-shadow: none; transform: none; }
  html[data-design="ruins"] body.side-collapsed .side .cat::before { border-top-color: #a29c8d; }
}
/* 選んだ項目：錆びた鉄板にリベット。アイコンは切れかけの蛍光灯のように時々ちらつく */
html[data-design="ruins"] .side #tabs a.active { background-image: radial-gradient(ellipse at 25% 50%, rgba(217,120,60,.45), transparent 50%), radial-gradient(ellipse at 85% 30%, rgba(40,20,10,.4), transparent 40%); }
html[data-design="ruins"] .side #tabs a.active::before, html[data-design="ruins"] .side #tabs a.active::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9b8a0, #4a3a2e); }
html[data-design="ruins"] .side #tabs a.active::before { left: 3px; } html[data-design="ruins"] .side #tabs a.active::after { right: 3px; }
html[data-design="ruins"] .side #tabs a.active .nav-ico { animation: ruins-flicker 6s infinite; }
@keyframes ruins-flicker { 0%, 88%, 92%, 96%, 100% { opacity: 1; } 90%, 94% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { html[data-design="ruins"] .side #tabs a.active .nav-ico { animation: none; } }
html[data-design="ruins"] .side .nav-count { box-shadow: 1px 1px 0 rgba(0,0,0,.4); }
html[data-design="ruins"] .side-tip { border: 1px solid #6b3518; border-radius: 0; }
/* 本文：見出しの下に色あせた立入禁止テープ。カードはくすんだコンクリート板（角に錆と苔、草が生える）。一番下に放置された資材と雑草 */
html[data-design="ruins"] main h1 { position: relative; display: inline-block; letter-spacing: .2em; padding-bottom: 10px; margin-bottom: 10px; text-shadow: 0 0 2px rgba(31,30,27,.35); }
html[data-design="ruins"] main h1::after { content: ""; position: absolute; left: -6px; right: -30px; bottom: 0; height: 7px; transform: rotate(-1.2deg); opacity: .8;
  background: repeating-linear-gradient(-45deg, #c9a227 0 8px, #2b2a27 8px 16px); }
html[data-design="ruins"] main .sub { display: table; color: #2b2a27; background: rgba(230,226,216,.75); padding: 6px 10px; }
html[data-design="ruins"] .panel { border: 1px solid #6d675c; box-shadow: 3px 3px 0 rgba(0,0,0,.25);
  background-image: radial-gradient(ellipse at 100% 0%, rgba(164,80,31,.2), transparent 30%), radial-gradient(ellipse at 0% 100%, rgba(86,110,52,.14), transparent 30%), radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 5px 5px; }
html[data-design="ruins"] .cards .panel { position: relative; }
html[data-design="ruins"] .cards .panel::after { content: ""; position: absolute; left: 10px; bottom: -3px; width: 46px; height: 26px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='1.8'%3E%3Cpath d='M6 26 Q8 14 2 6 M12 26 Q14 12 22 4 M18 26 Q18 16 12 12' stroke='%23597a34'/%3E%3Cpath d='M28 26 Q30 18 38 14 M34 26 Q34 16 44 10' stroke='%236d8f3e'/%3E%3C/g%3E%3Cellipse cx='24' cy='23' rx='6' ry='2.5' fill='%234f6e2c' transform='rotate(-15 24 23)'/%3E%3C/svg%3E") no-repeat; }
html[data-design="ruins"] .cards .panel:nth-child(even)::after { left: auto; right: 12px; transform: scaleX(-1); }
html[data-design="ruins"] .card .value { font-family: Consolas, "Courier New", monospace; }
html[data-design="ruins"] main::after { content: ""; display: block; height: 160px; margin-top: 18px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cpolygon points='30,106 60,20 100,22 72,106' fill='%23c49a62' stroke='%237d5e36'/%3E%3Cpath d='M44 70 L86 72 M52 46 L92 48' stroke='%23a37c48'/%3E%3Cg stroke='%237a3a1c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M110 106 L150 30'/%3E%3Cpath d='M118 106 L164 40'/%3E%3Cpath d='M126 106 L172 54'/%3E%3C/g%3E%3Cg fill='%23a9824f' stroke='%235e4426'%3E%3Crect x='10' y='106' width='130' height='8'/%3E%3Crect x='10' y='124' width='130' height='8'/%3E%3Crect x='10' y='142' width='130' height='8'/%3E%3C/g%3E%3Cg fill='%238a6538' stroke='%235e4426'%3E%3Crect x='14' y='114' width='16' height='10'/%3E%3Crect x='67' y='114' width='16' height='10'/%3E%3Crect x='120' y='114' width='16' height='10'/%3E%3Crect x='14' y='132' width='16' height='10'/%3E%3Crect x='67' y='132' width='16' height='10'/%3E%3Crect x='120' y='132' width='16' height='10'/%3E%3C/g%3E%3Cg fill='%23b7a77f' stroke='%23807250'%3E%3Cellipse cx='172' cy='140' rx='20' ry='9'/%3E%3Cellipse cx='208' cy='141' rx='20' ry='9'/%3E%3Cellipse cx='190' cy='126' rx='20' ry='9'/%3E%3C/g%3E%3Cpolygon points='232,146 252,68 260,68 280,146' fill='%23d8692a'/%3E%3Cpolygon points='245,96 267,96 271,112 241,112' fill='%23ece4d4'/%3E%3Cpolygon points='238,124 274,124 277,134 235,134' fill='%23ece4d4'/%3E%3Crect x='220' y='143' width='72' height='7' fill='%23a94f1d'/%3E%3Cg fill='none' stroke-linecap='round' stroke-width='2'%3E%3Cpath d='M150 150 Q152 130 146 118 M156 150 Q160 132 168 124 M214 150 Q212 132 220 120 M222 150 Q226 136 232 132' stroke='%23597a34'/%3E%3Cpath d='M290 150 Q288 128 296 116 M284 150 Q282 136 276 128 M4 150 Q6 132 2 124' stroke='%236d8f3e'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 12px bottom / 300px 150px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M8 70 Q10 45 4 30 M14 70 Q16 40 24 22 M20 70 Q18 50 12 42 M30 70 Q34 48 30 34' stroke='%23597a34' stroke-width='2.2'/%3E%3Cpath d='M60 70 Q58 52 66 38 M66 70 Q70 50 78 44 M72 70 Q70 40 62 26' stroke='%236d8f3e' stroke-width='2'/%3E%3Cpath d='M100 70 Q104 30 98 14' stroke='%23597a34' stroke-width='1.6'/%3E%3Cpath d='M120 70 Q118 50 128 40 M128 70 Q132 52 142 50 M136 70 Q136 44 146 30 M150 70 Q148 56 156 48' stroke='%23708f3a' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='98' cy='12' r='5' fill='%23e4c234'/%3E%3Ccircle cx='98' cy='12' r='2' fill='%23b8901c'/%3E%3Cg fill='%234f6e2c'%3E%3Cellipse cx='44' cy='64' rx='9' ry='4' transform='rotate(-20 44 64)'/%3E%3Cellipse cx='52' cy='62' rx='8' ry='3.5' transform='rotate(25 52 62)'/%3E%3Cellipse cx='112' cy='65' rx='8' ry='3.5' transform='rotate(-30 112 65)'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 120px 52px; }
@media (max-width: 700px) { html[data-design="ruins"] main::after { height: 110px; background-size: 200px 100px, 100px 44px; } }
html[data-design="ruins"] .btn, html[data-design="ruins"] input, html[data-design="ruins"] select, html[data-design="ruins"] textarea, html[data-design="ruins"] .tag-input, html[data-design="ruins"] .badge, html[data-design="ruins"] .tag { border-radius: 0; }
html[data-design="ruins"] .btn.primary { background: #6b3518; border-color: #4a2410; }
html[data-design="ruins"] th { background: #e6e2d8; }
html[data-design="ruins"] dialog { border: 2px solid #6d675c; border-radius: 0; box-shadow: 6px 6px 0 rgba(0,0,0,.35); }
html[data-design="ruins"] .modal-head { background: #4a3a2e radial-gradient(ellipse at 15% 40%, rgba(164,80,31,.5), transparent 40%); color: #f3e6d0; border-bottom: 0; }
html[data-design="ruins"] .modal-head .icon-btn { color: #e8dcc6; }
html[data-design="ruins"] #toast { background: #2a2926; color: #e8dcc6; border: 1px solid #6b3518; border-radius: 0; }
html[data-design="ruins"] #toast.err { background: #9c2b1c; color: #fff; }
html[data-design="ruins"] .news-ico, html[data-design="ruins"] .rank-head .ico { border-radius: 0; }
html[data-design="ruins"] .news-ico { background: #6b3518; }

/* ===================== 黒板（深緑の黒板にチョーク。チョークの色はカテゴリごと、右の端に日付と日直、下に黒板消し） ===================== */
html[data-design="chalk"] { color-scheme: dark; --hand: "UD Digi Kyokasho N-R", "UD デジタル 教科書体 N-R", "Yu Gothic UI", sans-serif;
  --bg: #2f4a3a; --panel: #2c4636; --text: #f1efe4; --muted: #b9c4b5; --line: rgba(241,239,228,.24); --brand: #f4e07a; --brand-2: #3f6b52; --accent-bg: #375a46;
  --ok: #b8e08f; --warn: #f4c27a; --warn-bg: #4a4a2a; --bad: #f5a8bf; --bad-bg: #5a3340; --hit: #4d5a2c;
  --c1: #f4e07a; --c2: #9fd3f0; --c3: #f5a8bf; --c4: #b8e08f; --c5: #f4b27a; --c6: #c9b3f0; --c7: #a8b5a5; --c8: #f1efe4; --track: #3a5747;
  --top-bg: #7a5230; --top-text: #fdf6e6; --top-muted: #e8d3b0; --top-btn-border: rgba(253,246,230,.6); --top-hover: rgba(255,255,255,.1); --logo: #f4e07a;
  --side-bg: #28402f; --side-text: #e9e7dc; --side-muted: #a8b5a5; --side-hover: rgba(255,255,255,.05); --side-hover-text: #ffffff; --side-active-bg: transparent;
  --side-active-shadow: none; --ico: #d9dccf; --side-border: 12px solid #7a5230; --cat-mark: "＊ "; --sep2: 1px solid rgba(255,255,255,.12);
  --count-bg: transparent; --count-text: #f5a8bf; --count-radius: 50%; --item-radius: 0; --tip-bg: #22382b; --tip-text: #f1efe4; --tip-shadow: none; --shadow: none; }
html[data-design="chalk"] body { font-family: var(--hand);
  background-image: radial-gradient(ellipse at 25% 35%, rgba(255,255,255,.07), transparent 30%), radial-gradient(ellipse at 72% 58%, rgba(255,255,255,.05), transparent 35%), radial-gradient(ellipse at 50% 92%, rgba(255,255,255,.05), transparent 40%),
    repeating-linear-gradient(-8deg, rgba(255,255,255,.025) 0 3px, transparent 3px 46px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 4px 4px; background-attachment: fixed; }
html[data-design="chalk"] main, html[data-design="chalk"] #tabs { text-shadow: 0 0 1px rgba(255,255,255,.35); }
html[data-design="chalk"] main a:not(.btn) { color: #9fd3f0; }
/* 上部とメニューの右：黒板の木の枠 */
html[data-design="chalk"] .topbar { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 9px, rgba(255,255,255,.04) 9px 10px, transparent 10px 17px); box-shadow: 0 4px 0 #5a3a1f; }
html[data-design="chalk"] #userbox button { border-radius: 3px; }
html[data-design="chalk"] .side { box-shadow: inset -3px 0 0 #5a3a1f;
  background-image: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,.06), transparent 40%), radial-gradient(ellipse at 60% 80%, rgba(255,255,255,.05), transparent 40%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 100% 100%, 100% 100%, 4px 4px; }
/* チョークの色：1 ホーム＝黄、2 台帳＝水色、3 申請・お知らせ＝ピンク、4 管理＝黄緑（nav.js がカテゴリ名と項目に data-cat を付ける） */
html[data-design="chalk"] #tabs { --chalk: #f1efe4; }
html[data-design="chalk"] #tabs [data-cat="1"] { --chalk: #f4e07a; } html[data-design="chalk"] #tabs [data-cat="2"] { --chalk: #9fd3f0; } html[data-design="chalk"] #tabs [data-cat="3"] { --chalk: #f5a8bf; } html[data-design="chalk"] #tabs [data-cat="4"] { --chalk: #b8e08f; }
html[data-design="chalk"] .side .cat { color: var(--chalk); font-weight: 700; letter-spacing: .2em; }
html[data-design="chalk"] .side .cat::before { color: var(--chalk); }
html[data-design="chalk"] .side #tabs a.active { color: var(--chalk); }
html[data-design="chalk"] .side #tabs a.active .nav-ico { color: var(--chalk); }
/* 選んだ項目：その色のチョークで丸を付ける */
html[data-design="chalk"] .side #tabs a.active::before { content: ""; position: absolute; inset: 1px 3px; border: 2px solid var(--chalk); border-radius: 50% / 60%; transform: rotate(-1.5deg); filter: url(#nav-chalk); pointer-events: none; }
html[data-design="chalk"] .side .sep { border: 0; border-top: 2px dashed rgba(241,239,228,.35); margin: 10px 12px; filter: url(#nav-chalk); }
html[data-design="chalk"] .side .nav-count { border: 2px solid #f5a8bf; line-height: 14px; }
html[data-design="chalk"] body.side-collapsed .side .nav-count { background: #f5a8bf; border: 0; }
html[data-design="chalk"] .side-tip { border: 1px solid rgba(241,239,228,.5); border-radius: 0; }
/* 本文：見出しはチョークの字と黄色い下線。右の端に日付と日直（縦書き）。一番下に黒板消しとチョークの受け */
html[data-design="chalk"] main { padding-right: 76px; }
html[data-design="chalk"] main h1 { position: relative; display: inline-block; letter-spacing: .15em; padding: 0 6px 10px; margin-bottom: 10px; }
html[data-design="chalk"] main h1::after { content: ""; position: absolute; left: -4px; right: -18px; bottom: 0; height: 0; border-bottom: 3px solid #f4e07a; transform: rotate(-1deg); filter: url(#nav-chalk); }
html[data-design="chalk"] .main-col { position: relative; }
html[data-design="chalk"] .duty { display: flex; }
html[data-design="chalk"] main::after { content: ""; display: block; height: 58px; margin-top: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='270' height='34'%3E%3Crect x='10' y='6' width='72' height='18' rx='3' fill='%233b4f7a'/%3E%3Crect x='12' y='22' width='68' height='8' rx='1' fill='%23e6e0cf'/%3E%3Crect x='12' y='22' width='68' height='8' fill='none' stroke='%23c9c1aa'/%3E%3Cg opacity='.35' fill='%23fff'%3E%3Ccircle cx='92' cy='29' r='3'/%3E%3Ccircle cx='100' cy='30' r='2'/%3E%3Ccircle cx='88' cy='31' r='1.5'/%3E%3C/g%3E%3Crect x='112' y='22' width='36' height='7' rx='3' fill='%23f6f3ea'/%3E%3Crect x='156' y='22' width='26' height='7' rx='3' fill='%23f4e07a' transform='rotate(-5 169 25)'/%3E%3Crect x='192' y='22' width='30' height='7' rx='3' fill='%23f5a8bf'/%3E%3Crect x='230' y='23' width='18' height='6' rx='3' fill='%239fd3f0'/%3E%3C/svg%3E") no-repeat left 24px top 2px / 270px 34px, linear-gradient(transparent 32px, #946640 32px, #7a5230 46px, #5a3a1f 46px 54px, transparent 54px); }
@media (max-width: 700px) { html[data-design="chalk"] main { padding-right: 12px; } html[data-design="chalk"] .duty { display: none; } }
/* カード：チョークで描いた枠。ダッシュボードの数字のカードはマグネットで留める */
html[data-design="chalk"] .panel { position: relative; border: 0; border-radius: 4px; }
html[data-design="chalk"] .panel::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(241,239,228,.7); border-radius: 4px; filter: url(#nav-chalk); pointer-events: none; z-index: 3; }
html[data-design="chalk"] .cards .panel::after { content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 35%, #ff8a80, #c62828); box-shadow: 1px 2px 3px rgba(0,0,0,.45); }
html[data-design="chalk"] .cards .panel:nth-child(3n+2)::after { background: radial-gradient(circle at 35% 35%, #90caf9, #1565c0); }
html[data-design="chalk"] .cards .panel:nth-child(3n)::after { background: radial-gradient(circle at 35% 35%, #fff59d, #f9a825); }
html[data-design="chalk"] input, html[data-design="chalk"] select, html[data-design="chalk"] textarea, html[data-design="chalk"] .tag-input { background: #22382b; border-color: rgba(241,239,228,.35); border-radius: 3px; }
html[data-design="chalk"] .btn { background: transparent; border: 1.5px solid rgba(241,239,228,.6); }
html[data-design="chalk"] .btn:hover { background: rgba(255,255,255,.06); }
html[data-design="chalk"] .btn.primary { background: transparent; border: 2px solid #f4e07a; color: #f4e07a; }
html[data-design="chalk"] .btn.danger { color: #f5a8bf; border-color: #f5a8bf; }
html[data-design="chalk"] .badge.kind.unit { background: #3a5a32; color: #c8ecaa; }
html[data-design="chalk"] .tag { color: #f4e07a; }
html[data-design="chalk"] dialog { border: 10px solid #7a5230; border-radius: 2px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
html[data-design="chalk"] dialog::backdrop { background: rgba(0,0,0,.6); }
html[data-design="chalk"] #toast { background: #22382b; color: #f1efe4; border: 1.5px solid rgba(241,239,228,.6); border-radius: 2px; }
html[data-design="chalk"] #toast.err { background: #5a3340; color: #ffd6e0; }
html[data-design="chalk"] .news-ico { background: #3f6b52; color: #f4e07a; border-radius: 50%; }
/* 保有マトリクスの ● △ は黄色いチョーク（－ 停止中は薄い色のまま） */
html[data-design="chalk"] .matrix td.cell { color: #f4e07a; }
html[data-design="chalk"] .matrix td.cell.stopped { color: var(--muted); }
html[data-design="chalk"] .matrix td.cell:hover { outline-color: #f4e07a; }

/* 黒板の右の端：日付と日直（nav.js が .main-col に置く。黒板のデザインのときだけ出す） */
.duty { display: none; position: absolute; top: 22px; right: 22px; z-index: 1; flex-direction: column; align-items: center; gap: 22px; font-size: 15px; color: #f1efe4; pointer-events: none; }
.duty > span { writing-mode: vertical-rl; letter-spacing: .25em; line-height: 2; white-space: nowrap; }
.duty .tcy { text-combine-upright: all; }
body.auth-mode .duty { display: none !important; }