/* 温泉マニア — モックアップ用スタイル（visual-system.md §3 の実装検証）
   本番実装ではこのファイルをトークン定義の出発点として流用する */

/* ── §3.1 カラー ───────────────────────────────── */
:root {
  --om-paper: #fbfcfd;
  --om-paper-2: #f2f5f8;
  --om-paper-sunk: #e9eef3;

  --om-ink: #16202b;
  --om-ink-strong: #0b1219;
  --om-ink-soft: #5b6b7a;
  --om-ink-faint: #93a2b0;

  --om-water: #1d5f8a;
  --om-water-soft: #dbe8f1;

  --om-rule: #d8e0e7;
  --om-rule-strong: #b6c3ce;

  --om-note: #7a5c1f;
  --om-note-bg: #f7f2e6;
  --om-closed: #6d6f72;

  /* §3.2 タイポ */
  --om-font-display: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --om-font-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;

  --om-measure: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--om-paper);
  color: var(--om-ink);
  font-family: var(--om-font-sans);
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: 'palt' 1;
}

a { color: var(--om-water); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-style: dotted; }

:focus-visible { outline: 2px solid var(--om-water); outline-offset: 2px; }

.om-wrap { max-width: var(--om-measure); margin: 0 auto; padding: 0 16px; }

/* ── ヘッダー / フッター ───────────────────────── */
.om-header {
  border-bottom: 1px solid var(--om-rule);
  background: var(--om-paper);
  position: sticky; top: 0; z-index: 20;
}
.om-header__inner {
  max-width: var(--om-measure); margin: 0 auto; padding: 0 16px;
  height: 56px; display: flex; align-items: center; gap: 20px;
}
.om-logo {
  font-family: var(--om-font-display);
  font-size: 16px; font-weight: 600; color: var(--om-ink-strong);
  text-decoration: none; letter-spacing: .04em; white-space: nowrap;
}
.om-nav { display: flex; gap: 16px; font-size: 13px; margin-left: auto; }
.om-nav a { color: var(--om-ink-soft); text-decoration: none; }
.om-nav a:hover { color: var(--om-water); text-decoration: underline; }

.om-footer {
  margin-top: 56px; border-top: 1px solid var(--om-rule);
  background: var(--om-paper-2); padding: 28px 0 48px;
  font-size: 13px; color: var(--om-ink-soft);
}
.om-footer h2 { font-size: 12px; letter-spacing: .08em; color: var(--om-ink); margin: 0 0 6px; }
.om-footer__cols { display: grid; gap: 20px; grid-template-columns: 1fr; }
.om-footer ul { list-style: none; margin: 0; padding: 0; }

/* ── パンくず ───────────────────────────────────── */
.om-breadcrumb { font-size: 12px; color: var(--om-ink-soft); padding: 12px 0 4px; }
.om-breadcrumb a { color: var(--om-ink-soft); }

/* ── 見出し ─────────────────────────────────────── */
.om-h1 {
  font-family: var(--om-font-display);
  font-size: 22px; font-weight: 600; line-height: 1.4;
  color: var(--om-ink-strong); margin: 8px 0 6px;
}
.om-h2 {
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
  color: var(--om-ink-strong);
  margin: 36px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--om-rule-strong);
}
.om-h2 .om-h2__note { font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--om-ink-soft); margin-left: 8px; }
.om-lede { color: var(--om-ink-soft); font-size: 14px; margin: 0 0 10px; }

/* ── 在庫の開示 ─────────────────────────────────── */
.om-stock {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12px; color: var(--om-ink-soft);
  border-top: 1px solid var(--om-rule); border-bottom: 1px solid var(--om-rule);
  padding: 8px 0; margin: 12px 0 0;
}
.om-stock b { font-variant-numeric: tabular-nums; color: var(--om-ink-strong); font-weight: 600; }

/* ── フィルタ（§4.1） ───────────────────────────── */
.om-filters { margin: 18px 0 0; }
.om-search {
  width: 100%; padding: 10px 12px; font: inherit;
  border: 1px solid var(--om-rule-strong); border-radius: 2px;
  background: #fff; color: var(--om-ink);
}
.om-fgroup { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.om-fgroup__label { font-size: 12px; color: var(--om-ink-soft); min-width: 68px; }
.om-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.om-chip {
  font: inherit; font-size: 13px; line-height: 1.4;
  padding: 5px 10px; border: 1px solid var(--om-rule-strong); border-radius: 2px;
  background: #fff; color: var(--om-ink); cursor: pointer;
}
.om-chip:hover { border-color: var(--om-water); }
.om-chip[aria-pressed='true'] {
  background: var(--om-water-soft); border-color: var(--om-water);
  color: var(--om-water); font-weight: 600;
}
.om-more { margin-top: 10px; font-size: 13px; }
.om-more > summary { cursor: pointer; color: var(--om-water); }

.om-resultbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 8px 0;
  border-top: 1px solid var(--om-rule-strong); border-bottom: 1px solid var(--om-rule-strong);
  font-size: 13px;
}
.om-resultbar__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.om-onlyconfirmed { color: var(--om-ink-soft); font-size: 12px; }
.om-info {
  font: inherit; font-size: 11px; cursor: help;
  border: 1px solid var(--om-rule-strong); background: #fff; color: var(--om-ink-soft);
  border-radius: 50%; width: 17px; height: 17px; line-height: 1; padding: 0;
}
.om-clear { margin-left: auto; font-size: 12px; background: none; border: 0; color: var(--om-water); cursor: pointer; font-family: inherit; }
.om-sort { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--om-rule-strong); background: #fff; color: var(--om-ink); }
.om-popover {
  margin: 8px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.7;
  background: var(--om-paper-2); border-left: 2px solid var(--om-water); color: var(--om-ink-soft);
}

/* ── 地図（従属ビュー · §3.6） ─────────────────── */
.om-mapbox { margin-top: 14px; font-size: 13px; }
.om-mapbox > summary { cursor: pointer; color: var(--om-water); }
.om-mapstub {
  margin-top: 10px; height: 220px; border: 1px solid var(--om-rule);
  background:
    linear-gradient(0deg, rgba(29,95,138,.05) 1px, transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg, rgba(29,95,138,.05) 1px, transparent 1px) 0 0/22px 100%,
    var(--om-paper-2);
  display: grid; place-items: center; color: var(--om-ink-faint); font-size: 12px;
}

/* ── 行リスト（§4.2） ───────────────────────────── */
.om-list { border-top: 1px solid var(--om-rule); }
.om-row {
  display: block; padding: 12px 0 13px; border-bottom: 1px solid var(--om-rule);
  text-decoration: none; color: inherit;
}
.om-row:hover { background: var(--om-paper-2); }
.om-row__top { display: flex; align-items: baseline; gap: 10px; }
.om-row__name {
  font-family: var(--om-font-display); font-size: 17px; font-weight: 600;
  color: var(--om-ink-strong); line-height: 1.4;
}
.om-row:hover .om-row__name { text-decoration: underline; }
.om-row__area { margin-left: auto; font-size: 12px; color: var(--om-ink-soft); white-space: nowrap; }
.om-row__mid { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 5px 0 4px; }
.om-row__spec { font-size: 13px; color: var(--om-ink-soft); font-variant-numeric: tabular-nums; }
.om-row__spec b { color: var(--om-ink); font-weight: 600; }
.om-row--closed { opacity: .6; }
.om-row__cta { font-size: 12px; color: var(--om-water); }
[hidden] { display: none !important; }
.om-more-btn {
  display: block; width: 100%; margin-top: 18px; padding: 11px;
  font: inherit; font-size: 14px; background: #fff; cursor: pointer;
  border: 1px solid var(--om-rule-strong); color: var(--om-water);
}
.om-empty { padding: 32px 0; color: var(--om-ink-soft); font-size: 14px; }

/* ── 湯の扱い（§3.3） ───────────────────────────── */
/* 一覧用インライン表示 */
.om-hmarks { display: flex; gap: 6px; flex-wrap: wrap; }
.om-hmark {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.om-hmark__sym { font-size: 10px; line-height: 1; }
.om-hmark--confirmed { border: 1px solid var(--om-rule-strong); color: var(--om-ink-strong); font-weight: 600; background: #fff; }
.om-hmark--inferred { border: 1px dashed var(--om-rule-strong); color: var(--om-ink-soft); }
.om-hmark--unknown { border: 1px dashed var(--om-rule); color: var(--om-ink-faint); }
.om-hmark--none { border: 0; color: var(--om-ink-faint); padding-left: 0; }

/* 詳細用パネル */
.om-panel { border: 1px solid var(--om-rule-strong); background: #fff; }
.om-panel__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--om-paper-2); border-bottom: 1px solid var(--om-rule);
  font-size: 12px; color: var(--om-ink-soft);
}
.om-panel__head strong { color: var(--om-ink-strong); font-size: 13px; }
.om-expandall { margin-left: auto; font: inherit; font-size: 12px; background: none; border: 0; color: var(--om-water); cursor: pointer; }
.om-htable { width: 100%; border-collapse: collapse; }
.om-htable caption { text-align: left; font-size: 12px; color: var(--om-ink-soft); padding: 8px 12px 0; }
.om-htable th, .om-htable td { border-bottom: 1px solid var(--om-rule); padding: 10px 12px; text-align: left; vertical-align: middle; }
.om-htable tr:last-child th, .om-htable tr:last-child td { border-bottom: 0; }
.om-htable th { font-weight: 400; font-size: 14px; color: var(--om-ink); width: 7.5em; }
.om-hvalue { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.om-hvalue--confirmed { color: var(--om-ink-strong); font-weight: 600; }
.om-hvalue--inferred { color: var(--om-ink-soft); }
.om-hvalue--unknown { color: var(--om-ink-faint); }
.om-hsym {
  display: inline-grid; place-items: center; width: 15px; height: 15px; font-size: 11px;
  border: 1px solid currentColor; border-radius: 50%;
}
.om-hsym--fill { background: currentColor; }
.om-hsym--dashed { border-style: dashed; border-radius: 2px; transform: rotate(45deg); }
.om-hsym--none { border: 0; border-radius: 0; }
.om-hcell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.om-hstack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.om-hstack > .om-evidence { width: 100%; }
.om-hsub {
  font-size: 12.5px; color: var(--om-ink-soft);
  padding: 9px 12px; background: var(--om-paper-2); border-top: 1px solid var(--om-rule);
}

/* ── ティアバッジ（§3.4） ───────────────────────── */
.om-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; line-height: 1.5; padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--om-rule-strong); color: var(--om-ink); background: transparent;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.om-badge--t1 { background: var(--om-water-soft); border-color: var(--om-water); color: var(--om-water); font-weight: 600; }
.om-badge--t4 { color: var(--om-ink-soft); }
.om-badge--t5 { border-style: dashed; color: var(--om-ink-soft); }
.om-badge--none { border: 0; color: var(--om-ink-faint); padding-left: 0; }
.om-badge--note { border-color: var(--om-note); color: var(--om-note); background: var(--om-note-bg); }

/* ── 根拠（§5.3） ───────────────────────────────── */
.om-evidence { font-size: 12.5px; }
.om-evidence > summary { cursor: pointer; color: var(--om-water); font-size: 12px; list-style: none; }
.om-evidence > summary::-webkit-details-marker { display: none; }
.om-evidence > summary::before { content: '▾ '; }
.om-evidence[open] > summary::before { content: '▴ '; }
.om-evidence__body { margin: 8px 0 2px; padding: 10px 12px; background: var(--om-paper-2); }
.om-evidence__item + .om-evidence__item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--om-rule); }
.om-evidence__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--om-ink-soft); }
.om-quote {
  font-family: var(--om-font-display); font-size: 13.5px; line-height: 1.8;
  margin: 6px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--om-rule-strong);
  color: var(--om-ink);
}
.om-evidence__old { color: var(--om-ink-soft); }
.om-evidence__old-label { font-size: 11px; letter-spacing: .06em; }

/* ── 注記 ───────────────────────────────────────── */
.om-note {
  background: var(--om-note-bg); border-left: 2px solid var(--om-note);
  color: var(--om-note); font-size: 12.5px; padding: 8px 10px; margin: 10px 0 0;
}
.om-callout {
  border: 1px dashed var(--om-rule-strong); background: var(--om-paper-2);
  padding: 12px 14px; margin: 12px 0 0; font-size: 13.5px; color: var(--om-ink);
}
.om-callout h3 { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; }
.om-callout p { margin: 0 0 8px; color: var(--om-ink-soft); font-size: 13px; }
.om-cta {
  display: inline-block; font-size: 13.5px; padding: 7px 12px;
  border: 1px solid var(--om-water); color: var(--om-water); background: #fff;
  text-decoration: none; border-radius: 2px;
}
.om-cta:hover { background: var(--om-water-soft); }
.om-cta__hint { font-size: 12px; color: var(--om-ink-soft); margin: 8px 0 0; }

/* ── 実用情報（§2.2 ❸） ────────────────────────── */
.om-dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; row-gap: 0; }
.om-dl dt {
  font-size: 13px; color: var(--om-ink-soft);
  padding: 9px 0; border-bottom: 1px solid var(--om-rule);
}
.om-dl dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid var(--om-rule);
  font-variant-numeric: tabular-nums;
}
.om-dl dd.om-unknown { color: var(--om-ink-faint); }

/* ── 源泉タブ（§2.3） ──────────────────────────── */
.om-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--om-rule-strong); overflow-x: auto; }
.om-tab {
  font: inherit; font-size: 13.5px; padding: 8px 14px; cursor: pointer;
  background: var(--om-paper-2); border: 1px solid var(--om-rule); border-bottom: 0;
  color: var(--om-ink-soft); white-space: nowrap; margin-right: 2px;
}
.om-tab[aria-selected='true'] {
  background: #fff; color: var(--om-ink-strong); font-weight: 600;
  border-color: var(--om-rule-strong); box-shadow: 0 1px 0 0 #fff;
  position: relative; top: 1px;
}
.om-tabmeta { font-size: 12px; color: var(--om-ink-soft); padding: 8px 0 0; }

/* ── スペック（§3.5） ──────────────────────────── */
.om-quality { font-family: var(--om-font-display); font-size: 18px; color: var(--om-ink-strong); margin: 10px 0 2px; line-height: 1.5; }
.om-specs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--om-rule); margin-top: 12px; }
.om-spec { padding: 10px 12px; border-right: 1px solid var(--om-rule); }
.om-spec:last-child { border-right: 0; }
.om-spec__num { font-size: 28px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--om-ink-strong); }
.om-spec__num--na { color: var(--om-ink-faint); }
.om-spec__unit { font-size: 12px; color: var(--om-ink-soft); }
.om-meter { margin-top: 12px; font-size: 12px; color: var(--om-ink-soft); }
.om-meter__bar { position: relative; height: 3px; background: var(--om-paper-sunk); margin: 8px 0 6px; }
.om-meter__median { position: absolute; top: -4px; width: 1px; height: 11px; background: var(--om-rule-strong); }
.om-meter__dot { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--om-water); transform: translateX(-50%); }

/* ── 成分表（§3.5） ────────────────────────────── */
.om-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
.om-table caption { text-align: left; font-size: 12px; color: var(--om-ink-soft); padding: 10px 0 4px; }
.om-table th, .om-table td { border-bottom: 1px solid var(--om-rule); padding: 6px 8px; }
.om-table thead th { background: var(--om-paper-sunk); font-size: 11.5px; font-weight: 600; color: var(--om-ink-soft); text-align: left; }
.om-table td.om-num, .om-table th.om-num { text-align: right; font-variant-numeric: tabular-nums; }
.om-table tfoot td { font-weight: 600; background: var(--om-paper-2); }
.om-formula { color: var(--om-ink-soft); font-size: 12px; }

/* ── 出典 ───────────────────────────────────────── */
.om-sources { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.om-sources li { padding: 9px 0; border-bottom: 1px solid var(--om-rule); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.om-lodging { margin: 20px 0 0; font-size: 13.5px; }
.om-lodging small { display: block; color: var(--om-ink-faint); font-size: 11.5px; }

/* ── 閉業帯 ─────────────────────────────────────── */
.om-closed-banner {
  background: var(--om-paper-sunk); color: var(--om-closed); border-left: 3px solid var(--om-closed);
  padding: 10px 12px; font-size: 13px; margin-top: 12px;
}

/* ── モック操作パネル（本番には存在しない） ─────── */
.om-mockbar {
  background: #1b2733; color: #cfd9e2; font-size: 12px;
  padding: 7px 0;
}
.om-mockbar__inner { max-width: var(--om-measure); margin: 0 auto; padding: 0 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.om-mockbar b { color: #fff; font-weight: 600; }
.om-mockbar select, .om-mockbar a { font: inherit; color: #cfd9e2; background: #26333f; border: 1px solid #3c4c5b; padding: 3px 6px; }
.om-mockbar a { text-decoration: none; }

/* ── §3.7 ブレークポイント ─────────────────────── */
@media (min-width: 600px) {
  body { font-size: 16px; }
  .om-h1 { font-size: 28px; }
  .om-h2 { font-size: 16px; }
  .om-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .om-spec__num { font-size: 34px; }
}
@media (min-width: 900px) {
  .om-row__mid { margin: 4px 0 3px; }
}

/* ── モーション ─────────────────────────────────── */
@keyframes om-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.om-rise { animation: om-rise .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .om-rise { animation: none; }
  * { transition: none !important; }
}