:root {
  /* ブランド色（ロゴ準拠） */
  --brand: #6E4A2B;        /* 深い茶＝構造 */
  --brand-warm: #C47A3C;   /* テラコッタ＝温かさ */
  --ink: #2b2622;          /* 本文 */
  --ink-2: #3c352e;        /* 二次本文（リード・解説・補足） */
  --muted: #7a6f63;        /* 補助 */
  --line: #e7ded2;         /* 罫線（温かいグレー） */
  --bg: #faf7f2;           /* 紙のような暖色背景 */
  --surface: #ffffff;      /* カード */
  --surface-2: #f4ece0;    /* 副次サーフェス */
  /* 確度2軸の色: A緑 / B青 / C黄 / D赤（意味は保持しつつ、暖色紙に馴染むよう少し落ち着かせる） */
  --A: #3f7a4a; --A-bg: #e9f0e4;
  --B: #3a6ea3; --B-bg: #e9eef4;
  --C: #a5780f; --C-bg: #f6eccd;
  --D: #b8442f; --D-bg: #f6e3dc;
  --serif: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--sans); line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 880px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
a { color: var(--brand); }
a:hover { color: var(--brand-warm); }

/* ヘッダ */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 880px; margin: 0 auto; padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 20px; color: var(--ink); letter-spacing: 0.01em; }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; margin-top: 2px; }
.site-header nav a { margin-left: 1.1rem; text-decoration: none; color: var(--muted); font-size: 0.95rem; }
.site-header nav a:hover { color: var(--brand-warm); }
.site-header nav a.active { color: var(--brand); font-weight: 500; border-bottom: 2px solid var(--brand-warm); padding-bottom: 2px; }
.site-header nav a.nav-gear { display: inline-flex; align-items: center; vertical-align: middle; border-bottom: 0; }
.site-header nav a.nav-gear.active { color: var(--brand); border-bottom: 0; }
.site-header nav a.nav-gear svg { display: block; }

/* 用語集 */
.glossary-index { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem 0 1.5rem; font-size: .88rem; }
.glossary-index a { color: var(--brand); text-decoration: none; }
.glossary-index a:hover { color: var(--brand-warm); }
.glossary-list { margin: 0; }
.g-term { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.g-term dt { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.g-reading { color: var(--muted); font-size: .8rem; margin-left: .5rem; font-family: var(--sans); font-weight: 400; }
.g-term dd { margin: .25rem 0 0; }
.g-def { margin: .1rem 0; color: var(--ink-2); }
.g-related { margin: .3rem 0 0; font-size: .83rem; color: var(--muted); }
.g-related a { color: var(--brand); text-decoration: none; }
.g-related a:hover { color: var(--brand-warm); }

/* 設定 */
.theme-options { display: flex; flex-direction: column; gap: .55rem; margin: .7rem 0; }
.theme-options label { display: flex; align-items: center; gap: .55rem; font-size: .98rem; cursor: pointer; }
.settings-note { color: var(--muted); font-size: .85rem; }

/* フッタ */
.site-footer {
  max-width: 880px; margin: 2.5rem auto 0; padding: 1.25rem 1.25rem 2rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem;
}
.site-footer .tagline { font-family: var(--serif); color: var(--ink); font-size: 0.98rem; margin: 0 0 .3rem; }
.site-footer .moat { margin: 0; }
.site-footer .disclaimer { margin: .55rem 0 0; font-size: .8rem; }
.site-footer a { color: var(--brand); }
.site-footer a:hover { color: var(--brand-warm); }

.foot-links { margin: .55rem 0 0; font-size: .8rem; }

/* 免責・このサイトについて・報告 */
.legal { max-width: 42rem; }
.legal p { margin: .75rem 0; }
.legal ul { margin: .5rem 0; padding-left: 1.3rem; }
.legal li { margin: .25rem 0; }
.legal h2 { font-size: 1.12rem; }
.legal-back { margin-top: 1.5rem; }

/* 報告フォーム（準備中＝disabled） */
.report-form { display: flex; flex-direction: column; gap: .7rem; max-width: 30rem; margin: .8rem 0 1rem; }
.report-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); }
.report-form input, .report-form select, .report-form textarea {
  font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface-2); color: var(--ink);
}
.report-form button {
  align-self: flex-start; font: inherit; padding: .5rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); cursor: not-allowed;
}
.report-form .form-note { font-size: .82rem; color: var(--muted); margin: 0; }
.dish-report { margin-top: 1.5rem; font-size: .85rem; }
.dish-report a { color: var(--muted); }
.dish-report a:hover { color: var(--brand-warm); }

/* 見出し */
h1 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.35; font-weight: 600; letter-spacing: 0.01em; }
h2 {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-top: 1.9rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.summary { color: var(--muted); font-size: 0.9rem; }

/* バッジ（確度・ステータス） */
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .1em .55em;
  border-radius: .8em; vertical-align: middle; white-space: nowrap; letter-spacing: .02em;
}
.conf-A { color: var(--A); background: var(--A-bg); }
.conf-B { color: var(--B); background: var(--B-bg); }
.conf-C { color: var(--C); background: var(--C-bg); }
.conf-D { color: var(--D); background: var(--D-bg); }
/* 検証済＝印（ロゴの「検証＝記章」に呼応） */
.badge.verified { color: #f4ece0; background: var(--brand); }
.badge.todo { color: var(--muted); background: var(--surface-2); }

/* 一覧 */
.cluster h2 .count { color: var(--muted); font-size: .82rem; font-weight: 400; font-family: var(--sans); margin-left: .3rem; }
.dish-list { list-style: none; padding: 0; }
.dish-list li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.dish-link { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; text-decoration: none; color: var(--ink); }
.dish-link:hover { color: var(--brand-warm); }
.dish-list .cc, .dish-list .years { color: var(--muted); font-size: .84rem; margin-left: .5rem; }
.dish-list .lead { margin: .35rem 0 0; color: var(--ink-2); font-size: .9rem; }

/* 年表 */
.timeline { margin-top: 1rem; position: relative; }
.tl-axis { display: grid; grid-template-columns: 230px 1fr; gap: .5rem; margin-bottom: 5px; }
.tl-axis-track { grid-column: 2; position: relative; height: 15px; }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.tl-grid { position: absolute; left: 238px; right: 0; top: 21px; bottom: 4px; pointer-events: none; }
.tl-grid .gl { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); }
.tl-row { display: grid; grid-template-columns: 230px 1fr; align-items: center; gap: .5rem; padding: .18rem 0; position: relative; }
.tl-label { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-label a { text-decoration: none; color: var(--ink); }
.tl-label a:hover { color: var(--brand-warm); }
.tl-year { color: var(--muted); font-size: .75rem; margin-left: .3rem; }
.tl-track { position: relative; height: 16px; background: var(--surface-2); border-radius: 8px; }
.tl-bar { position: absolute; top: 0; height: 16px; border-radius: 8px; min-width: 3px; opacity: .78; }
.tl-bar.conf-A { background: var(--A); }
.tl-bar.conf-B { background: var(--B); }
.tl-bar.conf-C { background: var(--C); }
.tl-bar.conf-D { background: var(--D); }
.swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: middle; }

/* 1料理ページ */
.crumbs { color: var(--muted); font-size: .85rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand-warm); }
.dish .meta { color: var(--muted); }
.dish h1 .badge { font-size: .68rem; vertical-align: middle; margin-left: .15rem; }
.gates dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0; }
.gates dt { color: var(--brand); font-weight: 700; white-space: nowrap; }
.gates dd { margin: 0; }
.memo { background: var(--surface-2); border-left: 3px solid var(--brand-warm); border-radius: 0; padding: .55rem .85rem; font-size: .92rem; }
.lead { font-family: var(--serif); font-size: 1.08rem; color: var(--ink-2); max-width: 40rem; }
.gate-chart { width: 100%; max-width: 620px; height: auto; display: block; margin-top: .3rem; }

.theory-status { font-family: var(--serif); font-size: .98rem; margin: 1.15rem 0 .35rem; }
.status-反証 { color: var(--D); }
.status-定説 { color: var(--A); }
.theory { border: 1px solid var(--line); border-radius: 8px; padding: .65rem .85rem; margin: .45rem 0; background: var(--surface); }
.theory-head { margin: 0 0 .25rem; font-weight: 600; }
.theory-desc { margin: .2rem 0; }
.star { color: var(--brand-warm); font-size: .8rem; }
.sources { list-style: none; padding: 0; margin: .35rem 0 0; font-size: .85rem; }
.sources li { padding: .14rem 0; }
.rel { font-size: .72rem; font-weight: 700; padding: .06em .5em; border-radius: .8em; margin-right: .3rem; }
.rel-支持 { color: var(--A); background: var(--A-bg); }
.rel-反証 { color: var(--D); background: var(--D-bg); }
.rel-言及, .rel-不明 { color: var(--muted); background: var(--surface-2); }
.weight { color: var(--muted); font-size: .75rem; margin-left: .35rem; }

/* 検証ログ */
.vlog .hint { color: var(--muted); font-size: .75rem; font-weight: 400; font-family: var(--sans); }
.vlog table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.vlog th, .vlog td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.vlog th { color: var(--muted); font-weight: 700; }
.vlog .src { color: var(--ink-2); font-size: .82rem; margin-top: .2rem; }
.vlog .note { color: var(--muted); font-size: .8rem; margin-top: .15rem; }
.nowrap { white-space: nowrap; }

/* DoD */
.dod-ok { color: var(--A); font-weight: 700; }
.dod-ng { color: var(--D); font-weight: 700; }

/* 本文・研磨ストーリー（markdown描画） */
.prose { font-size: 1rem; color: var(--ink-2); max-width: 40rem; }
.prose p { margin: .7rem 0; }
.prose ul, .prose ol { margin: .6rem 0; padding-left: 1.4rem; }
.prose li { margin: .2rem 0; }
.prose h3 { font-family: var(--serif); font-size: 1.05rem; margin: 1.15rem 0 .3rem; border: 0; }
.prose blockquote { margin: .7rem 0; padding: .3rem .9rem; border-left: 3px solid var(--brand-warm); color: var(--ink-2); }
.prose a { word-break: break-word; }
.byline { color: var(--muted); font-size: .8rem; }
.empty { color: var(--muted); }

/* 用語ツールチップ（本文中の語：見た目は変えず、hover/focus時だけ定義を出す） */
.gloss { cursor: help; }
.gloss:focus { outline: 2px solid var(--brand-warm); outline-offset: 1px; border-radius: 2px; }
.gloss:focus-visible { outline: 2px solid var(--brand-warm); }
.gloss-tip {
  position: fixed; display: none; z-index: 50; max-width: 280px;
  background: var(--ink); color: var(--bg);
  font-size: .82rem; line-height: 1.55; padding: .5rem .7rem; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); pointer-events: none;
}

/* つなぐ層: 関連する料理 */
.relations h3 { font-family: var(--serif); font-size: .98rem; margin: 1rem 0 .3rem; border: 0; color: var(--ink); }
.relations .hint { font-size: .75rem; font-weight: 400; color: var(--muted); font-family: var(--sans); }
.rel-list { list-style: none; padding: 0; margin: 0; }
.rel-list li { padding: .32rem 0; border-bottom: 1px solid var(--line); }
.rel-list a { font-weight: 600; text-decoration: none; color: var(--ink); }
.rel-list a:hover { color: var(--brand-warm); }
.rel-list .cc, .rel-list .years { color: var(--muted); font-size: .82rem; margin-left: .5rem; }
.rel-tag {
  display: inline-block; font-size: .72rem; font-weight: 700; color: var(--brand);
  background: var(--surface-2); padding: .06em .5em; border-radius: .8em; margin-right: .4rem;
}

/* トップ（ランディング） */
.hero { padding: 1.25rem 0 .25rem; }
.hero-title { font-family: var(--serif); font-size: 2rem; line-height: 1.4; font-weight: 600; margin: 0 0 .6rem; }
.hero-sub { color: var(--ink-2); max-width: 42rem; font-size: 1.02rem; }
.hero-sub strong { color: var(--brand); font-weight: 600; }
.search { margin: 1.5rem 0 2rem; }
.search input {
  width: 100%; max-width: 30rem; font-size: 1rem; padding: .7rem .9rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
}
.search input:focus { outline: none; border-color: var(--brand-warm); box-shadow: 0 0 0 3px rgba(196,122,60,.15); }
.search-results { list-style: none; padding: 0; margin: .5rem 0 0; max-width: 30rem; }
.search-results li { padding: .42rem .2rem; border-bottom: 1px solid var(--line); }
.search-results a { font-weight: 600; text-decoration: none; color: var(--ink); }
.search-results a:hover { color: var(--brand-warm); }
.search-results .cc { color: var(--muted); font-size: .82rem; margin-left: .4rem; }
.search-results .empty { color: var(--muted); border: 0; }
.search-hint { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.metrics { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.metric { background: var(--surface-2); border-radius: 10px; padding: .7rem 1rem; min-width: 86px; text-align: center; }
.m-num { display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--brand); line-height: 1.15; }
.m-label { font-size: .76rem; color: var(--muted); }
.picks .pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-top: .8rem; }
.pick { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; text-decoration: none; color: var(--ink); }
.pick:hover { border-color: var(--brand-warm); }
.pick-tag { display: inline-block; font-size: .7rem; font-weight: 700; padding: .08em .5em; border-radius: .8em; }
.pick-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: .4rem 0 .1rem; }
.pick-cc { color: var(--muted); font-size: .82rem; }
.pick-lead { display: block; color: var(--ink-2); font-size: .88rem; margin-top: .45rem; line-height: 1.6; }

/* ダーク配色（暖色の闇／明るい茶＝暗背景で可読）。SVGもトークン参照で追従。
   手動指定 [data-theme=dark] と、未指定(=自動)時の OS ダークの両方で適用。
   [data-theme=light] は常にライト（自動の上書き）。 */
:root[data-theme="dark"] {
  --brand: #ca9a6b; --brand-warm: #df9356;
  --ink: #ece6dd; --ink-2: #cfc6ba; --muted: #ab9f90; --line: #3a352e;
  --bg: #1b1916; --surface: #232019; --surface-2: #2c2822;
  --A: #82c08f; --A-bg: #20302a; --B: #84acdb; --B-bg: #1f2a38;
  --C: #d6a652; --C-bg: #332a17; --D: #e2937f; --D-bg: #3a231d;
}
:root[data-theme="dark"] .badge.verified { background: #7a5230; color: #f4ece0; }
:root[data-theme="dark"] .search input:focus { box-shadow: 0 0 0 3px rgba(223,147,86,.22); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --brand: #ca9a6b; --brand-warm: #df9356;
    --ink: #ece6dd; --ink-2: #cfc6ba; --muted: #ab9f90; --line: #3a352e;
    --bg: #1b1916; --surface: #232019; --surface-2: #2c2822;
    --A: #82c08f; --A-bg: #20302a; --B: #84acdb; --B-bg: #1f2a38;
    --C: #d6a652; --C-bg: #332a17; --D: #e2937f; --D-bg: #3a231d;
  }
  :root:not([data-theme]) .badge.verified { background: #7a5230; color: #f4ece0; }
  :root:not([data-theme]) .search input:focus { box-shadow: 0 0 0 3px rgba(223,147,86,.22); }
}

@media (max-width: 600px) {
  .tl-row, .tl-axis { grid-template-columns: 130px 1fr; }
  .tl-grid { left: 138px; }
  main { padding: 1.25rem 1rem 2.5rem; }
  .hero-title { font-size: 1.6rem; }
}