/*
| ツールのページ（public/tools/*.html）の見た目を、サイト本体と同じ案G「深夜と金・エンジ」にそろえる。
| 各ページの中の <style> のあとに読み込んで、色と角だけ上書きする。並びや大きさ（固定表示の高さなど）は変えない。
| 色は public/articles/ctl-article.css とそろえる。
*/

:root {
  --bg: #0a0e1a;
  --line: #232b45;
  --text: #efe9db;
  --muted: #a9a8a0;
  --gold: #c9a862;
  --gold-hi: #e2c788;
  --wine: #7d1f30;
  --paper: #f6f2e8;
  --paper-2: #efe6d2;
  --card: #fbf8f1;
  --ink: #1c1f2a;
  --sub: #3b3e48;
  --paper-line: #ddd5c3;
  --paper-gold-ink: #7a6230;
  --serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

body { font-family: var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* サイトのロゴと解説の記事へのリンク（スクロールすると上に流れる） */
.site-bar {
  background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line);
  padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px;
}
.site-bar .logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.3em; }
.site-bar .logo::before { content: ''; width: 22px; height: 22px; border: 1px solid var(--gold); background: radial-gradient(var(--wine) 0 3px, transparent 4px) center / 100% 100% no-repeat; flex: 0 0 auto; }
.site-bar .tagline { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }
.site-bar .tagline a { color: var(--gold-hi); text-decoration: none; }
.site-bar .tagline a:hover { text-decoration: underline; }

/* ページの見出し。スクロールすると上に流れ、検索と絞り込みだけを上に固定する
   （見出しの高さは字の大きさやスマホでの折り返しで変わるため、2段で固定すると重なる） */
header { position: static; background: var(--bg); color: var(--text); box-shadow: none; border-bottom: 1px solid var(--gold); }
header h1 { font-family: var(--serif); letter-spacing: 0.02em; }
header p { color: var(--muted); opacity: 1; }

/* 検索と絞り込み */
.controls { top: 0; background: var(--card); border-bottom-color: var(--paper-line); box-shadow: 0 2px 4px rgba(28, 31, 42, 0.06); }
.ctrl-row2 label { color: var(--sub); }
.search-wrap input { border-color: var(--paper-line); border-radius: 0; background: #fff; color: var(--ink); }
.search-wrap input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.chip { border-radius: 0; border-color: var(--paper-line); background: #fff; color: var(--sub); }
.chip:hover { border-color: var(--wine); color: var(--wine); }
.chip.active { background: var(--bg); border-color: var(--bg); color: var(--text); }
.chip.k12.active { background: var(--wine); border-color: var(--wine); color: #f6efe0; }
.chip.k1.active { background: #5d5a52; border-color: #5d5a52; color: #f6efe0; }

.count-bar { background: var(--paper-2); color: var(--sub); border-bottom-color: var(--paper-line); }
.count-bar span { color: var(--wine); }

/* 薬効ごとの表（見出しの色は薬効ごとに分けず、紺黒に金の線でそろえる） */
.section { border-radius: 0; box-shadow: none; border: 1px solid var(--paper-line); background: var(--card); }
.section-header { background: var(--bg) !important; color: var(--text); border-left: 3px solid var(--gold); font-family: var(--serif); letter-spacing: 0.04em; }
th { background: var(--paper-2); color: var(--sub); border-bottom-color: var(--paper-line); }
td { border-bottom-color: #ebe3d0; }
tr:hover td { background: #f3ecdc; }
.subcat-row td { background: var(--paper); }
.subcat-label { color: var(--paper-gold-ink); font-family: var(--mono); }
.code { font-family: var(--mono); color: #8a8578; }
.brand { color: #5e1a2a; }
.no-brand { color: #a9a395; }

/* 加算1・2 はエンジ、加算1 は灰 */
.kasan-badge { border-radius: 0; }
.badge-12 { background: #f3e1e4; color: var(--wine); border-color: #c98b97; }
.badge-1 { background: #ece9e1; color: #5d5a52; border-color: #c9c3b4; }

.notice { background: #f8efd9; border-left-color: var(--gold); color: #5a4a20; border-radius: 0; }
.no-result { color: #8a8578; }
footer { color: var(--sub); }

/* スマホ幅で横にはみ出さないように（もとの作りからのはみ出し）。加算の絞り込みは折り返し、表は表の中だけで横に動かす */
.ctrl-row1 { flex-wrap: wrap; }
.section { overflow-x: auto; }