:root {
    --bg: #eef0f4;
    --surface: #ffffff;
    --sunken: #e4e7ee;
    --ink: #1b1f2a;
    --ink-soft: #4a5162;
    --muted: #7d8494;
    --line: #d3d8e2;
    --line-soft: #e6e9f0;
    --accent: #3d3fa6;
    --accent-ink: #2b2d80;
    --accent-wash: #e7e7f8;
    --top: #0c7a5b;
    --top-ink: #075a43;
    --top-wash: #dcf0e8;
    --warn: #8a5a06;
    --warn-wash: #fbeed2;
    --none: #9aa1b1;
    --shadow: 0 1px 1px rgba(20, 24, 35, .04), 0 10px 26px -20px rgba(20, 24, 35, .5);
    --radius: 10px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #121419;
      --surface: #1a1d24;
      --sunken: #21252e;
      --ink: #e7eaf1;
      --ink-soft: #b0b7c6;
      --muted: #838b9c;
      --line: #333846;
      --line-soft: #272b35;
      --accent: #9b9cf0;
      --accent-ink: #c3c4fb;
      --accent-wash: #262a4a;
      --top: #4cc79b;
      --top-ink: #7fdcb8;
      --top-wash: #16352c;
      --warn: #e0ab52;
      --warn-wash: #362a15;
      --none: #6b7383;
      --shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 10px 26px -20px rgba(0, 0, 0, .9);
    }
  }

  :root[data-theme="dark"] {
    --bg: #121419;
    --surface: #1a1d24;
    --sunken: #21252e;
    --ink: #e7eaf1;
    --ink-soft: #b0b7c6;
    --muted: #838b9c;
    --line: #333846;
    --line-soft: #272b35;
    --accent: #9b9cf0;
    --accent-ink: #c3c4fb;
    --accent-wash: #262a4a;
    --top: #4cc79b;
    --top-ink: #7fdcb8;
    --top-wash: #16352c;
    --warn: #e0ab52;
    --warn-wash: #362a15;
    --none: #6b7383;
    --shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 10px 26px -20px rgba(0, 0, 0, .9);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
  }

  .yen {
    font-family: "Oswald", "Zen Kaku Gothic New", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: .01em;
  }

  .mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
    font-variant-numeric: tabular-nums;
  }

  .page {
    max-width: 1040px;
    margin: 0 auto;
    padding: 28px 16px 72px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ---------- masthead ---------- */

  .masthead { display: flex; flex-direction: column; gap: 6px; }

  .eyebrow {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--muted);
    font-weight: 700;
  }

  h1 {
    margin: 0;
    font-size: clamp(22px, 5.4vw, 30px);
    font-weight: 900;
    letter-spacing: .005em;
    text-wrap: balance;
  }

  .lede { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 62ch; }

  .stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 8px;
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
  }

  .stat-strip b { color: var(--ink); font-weight: 700; }

  .caveat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--warn-wash);
    border: 1px solid var(--line);
    border-left: 3px solid var(--warn);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--ink-soft);
  }

  .caveat .k { color: var(--warn); font-weight: 700; white-space: nowrap; }
  .caveat p { margin: 0; }

  /* ---------- controls ---------- */

  .controls {
    background: var(--bg);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--line);
  }

  .seg {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    width: 100%;
  }

  .seg button {
    flex: 1 1 0;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    padding: 9px 6px;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
  }

  .seg button + button { border-left: 1px solid var(--line); }
  .seg button .n { font-size: 11px; color: var(--muted); font-family: "JetBrains Mono", monospace; }
  .seg button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 700; }
  .seg button[aria-pressed="true"] .n { color: var(--accent-ink); }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* 状態のチェックボックス群(複数同時表示) */
  .checks { display: flex; flex-wrap: wrap; gap: 6px; }

  .checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }

  .checks label.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .checks label .n { font-size: 11px; color: var(--muted); font-family: "JetBrains Mono", monospace; }
  .checks label.on .n { color: var(--accent-ink); }
  .checks input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
  .checks label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* 日付・取得状況 */
  .daybar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--muted);
  }

  .daybar .st {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 9px;
    background: var(--surface);
  }

  .daybar .st.ok { color: var(--top-ink); border-color: var(--top); background: var(--top-wash); }
  .daybar .st.ng { color: var(--warn); border-color: var(--warn); background: var(--warn-wash); font-weight: 700; }

  .lbl {
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 700;
  }

  .chip {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 12.5px;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
  }

  .chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .chip:focus-visible, .seg button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .sort-group { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }

  .search {
    flex: 1 1 200px;
    min-width: 160px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    padding: 7px 12px;
    border-radius: 8px;
  }

  select {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 8px;
  }

  /* ---------- comparison list ---------- */

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .section-head h2 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: .02em; }
  .section-head .hint { font-size: 12px; color: var(--muted); }

  .col-head {
    display: grid;
    gap: 8px;
    padding: 0 12px 6px;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
  }

  .cards { display: flex; flex-direction: column; gap: 8px; }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 8px;
    padding: 12px;
    align-items: center;
  }

  .card.solo { box-shadow: none; background: var(--sunken); }

  .box-name { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 0; }
  .box-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .box-name .nm { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
  .box-name .official { font-size: 11.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
  .box-name .sub { font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .box-name .rel { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-soft); }
  .box-name .rel.unk { color: var(--muted); font-style: italic; }

  /* 商品画像サムネイル(データURI埋め込み)。比較セルを狭めないよう固定幅 */
  .thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: var(--surface);
    padding: 2px;
  }

  .thumb.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 9px;
    line-height: 1.2;
    color: var(--none);
    background: var(--sunken);
    border-style: dashed;
  }

  .cell {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 7px 10px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .cell .shop-tag { display: none; font-size: 11px; color: var(--muted); font-weight: 700; }
  .cell .price { font-size: 19px; line-height: 1.2; color: var(--ink); }
  .cell .delta { font-size: 11px; color: var(--muted); font-family: "JetBrains Mono", monospace; }

  .cell.best {
    background: var(--top-wash);
    border-color: var(--top);
    box-shadow: inset 3px 0 0 var(--top);
  }

  .cell.best .price { color: var(--top-ink); font-weight: 600; }
  .cell.best .delta { color: var(--top-ink); font-weight: 700; }

  .cell.empty { background: transparent; border-style: dashed; }
  .cell.empty .price { color: var(--none); font-size: 16px; }
  .cell.empty .delta { color: var(--none); }

  .flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.5;
    white-space: nowrap;
  }

  /* 価格の食い違い(店舗表示の不一致)を示す印。商品同定の「未確認」とは別物 */
  .price-line { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; min-width: 0; }

  .confirm-tag {
    appearance: none;
    border: 1px solid var(--warn);
    background: var(--warn-wash);
    color: var(--warn);
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 4px;
    cursor: help;
    white-space: nowrap;
  }

  .confirm-note {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--warn);
    background: var(--warn-wash);
    border: 1px solid var(--warn);
    border-radius: 4px;
    padding: 5px 7px;
    margin-top: 4px;
    overflow-wrap: anywhere;
  }

  .flag.top { background: var(--top); color: #fff; }
  .flag.confirm { background: var(--warn); color: #fff; }
  .flag.review { background: var(--warn-wash); color: var(--warn); border: 1px solid currentColor; }
  .flag.solo { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
  .flag.tie { background: var(--accent-wash); color: var(--accent-ink); }

  a.src { color: var(--muted); text-decoration: none; border-bottom: 1px dotted currentColor; font-size: 10.5px; white-space: nowrap; }
  a.src:hover { color: var(--accent-ink); }

  /* 店舗名からその店のXプロフィールへ。周囲の文字色を継いだまま、
     下線でリンクだと分かるようにする(列見出し・バッジ内でも浮かないように) */
  a.shop-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
  }
  a.shop-link:hover { color: var(--accent-ink); border-bottom-style: solid; }
  a.shop-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- shop view ---------- */

  .shop-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .shop-panel + .shop-panel { margin-top: 12px; }

  .shop-head {
    padding: 12px 14px;
    background: var(--sunken);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
  }

  .shop-head h3 { margin: 0; font-size: 14px; font-weight: 900; }
  .shop-head .meta { font-size: 11.5px; color: var(--muted); }
  .shop-head .meta b { color: var(--ink-soft); font-weight: 700; }

  .scroll { overflow-x: auto; }

  table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
  thead th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  tbody td { padding: 8px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); vertical-align: top; }
  tbody tr:last-child td { border-bottom: 0; }
  td.n { text-align: right; white-space: nowrap; }
  td.n .yen { font-size: 15px; color: var(--ink); }
  td.n .price-line { justify-content: flex-end; }
  td.n .confirm-note { text-align: left; white-space: normal; max-width: 320px; margin-left: auto; }

  .note-line { font-size: 11.5px; color: var(--muted); padding: 0 2px; }

  .empty-state {
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 44px 20px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 14px;
  }

  .empty-state .sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

  details.fold { margin-top: 4px; }
  details.fold > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    padding: 8px 0;
    list-style-position: inside;
  }

  footer {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  footer a { color: var(--accent-ink); }

  [hidden] { display: none !important; }

  /* ---------- 状態(シュリンク)ごとの行 ---------- */

  /* 1商品カードの中に「状態」ごとの行が縦に積まれる。
     デスクトップでは .crow / .cells を display:contents にして
     カード全体の1つのグリッド(商品 | 状態 | 店舗…)に流し込む。 */
  .cond-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .cond-label .cl-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--accent-wash);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 9px;
    align-self: flex-start;
    white-space: nowrap;
  }

  .cond-label .cl-diff {
    font-size: 10.5px;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    overflow-wrap: anywhere;
  }

  .cond-label .cl-diff.top { color: var(--top-ink); font-weight: 700; }

  /* grid templates: name + cond + shop columns */
  .col-head, .card { grid-template-columns: minmax(0, 1fr); }

  @media (min-width: 760px) {
    .page { padding: 32px 24px 88px; }
    .controls { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .seg { width: auto; flex: 0 0 auto; }
    .col-head, .card { grid-template-columns: minmax(0, 1fr) 118px repeat(var(--shopcols, 3), 168px); }
    /* 列見出しをスクロール中も画面上部に固定(下の内容が透けないよう背景色を明示) */
    .col-head {
      position: sticky;
      top: 0;
      z-index: 5;
      background: var(--bg);
      padding-top: 10px;
      border-bottom: 1px solid var(--line);
    }
    .card { align-items: stretch; }
    .box-name { align-self: center; }
    .cond-label { justify-content: center; }
    .crow, .cells { display: contents; }
  }

  @media (max-width: 759px) {
    .card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    /* 1列積み上げになるので、デスクトップ用の行スパン指定(インライン)は打ち消す */
    .card > .box-name { grid-row: auto !important; }
    .crow {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-top: 8px;
      border-top: 1px solid var(--line-soft);
    }
    .crow .cond-label { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; }
    .cell { padding: 6px 8px; }
    .cell .shop-tag { display: block; }
    .cell .price { font-size: 17px; }
    .col-head { display: none; }
  }

/* ---------- 静的サイト版の追加スタイル ---------- */
.f-off { display: none !important; }

/* ---------- ブランドヘッダー(ロゴ) ---------- */
/* ロゴは透過PNG。濃い輪郭と明るい面の両方を持つのでライト/ダークどちらでも視認できる。
   念のためダーク時だけ極薄の下地を敷いて、暗部が背景に沈まないようにする。 */
.brandbar { display: block; margin: 0 0 2px; text-align: center; }
.brandlink {
  display: block; width: fit-content; margin-left: auto; margin-right: auto;
  line-height: 0; max-width: 100%;
  text-decoration: none; border-radius: 10px;
}
.brandlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img.brandlogo {
  display: block;
  margin-left: auto; margin-right: auto;
  width: 100%;
  max-width: 300px;      /* スマホ390px幅でも左右の余白に収まる */
  height: auto;
}
@media (min-width: 760px) {
  img.brandlogo { max-width: 400px; }
}
:root[data-theme="dark"] img.brandlogo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.brandlogo {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55));
  }
}
/* ロゴ画像が出力できなかった場合のテキスト退避 */
.brandtext { display: block; line-height: 1.25; font-weight: 900; font-size: 22px; color: var(--ink); }
.brandtext small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; }

/* 視覚的に隠すが、スクリーンリーダー・検索エンジンには残す(h1 のSEO維持用) */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.crumbs { font-size: 11.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--muted); }
.crumbs .sep { color: var(--line); }

.seg .segbtn {
  flex: 1 1 0; padding: 9px 6px; font-size: 13px; color: var(--ink-soft);
  text-decoration: none; text-align: center; white-space: nowrap;
}
.seg .segbtn + .segbtn { border-left: 1px solid var(--line); }
.seg .segbtn[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 700; }

.box-name .nm { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.box-name .nm:hover { color: var(--accent-ink); border-bottom-color: currentColor; }
.card-links { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; margin-top: 2px; }
.card-links a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px dotted currentColor; }
.card-links .sgy { color: var(--muted); }

/* 駿河屋の画像はホットリンク。サイズ調整はCSSのみで行う(画像自体は改変しない) */
img.thumb { width: 52px; height: 52px; object-fit: contain; }

/* ---------- 商品ページ ---------- */
.page.product h1, .page.doc h1 { font-size: 22px; margin: 0; }
.hero { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; }
.hero-media { display: flex; flex-direction: column; gap: 8px; align-items: center; flex: 0 0 auto; }
img.hero-img, .hero-img.ph {
  width: 210px; height: 210px; object-fit: contain; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: 8px; padding: 4px;
}
.hero-img.ph { display: flex; align-items: center; justify-content: center; color: var(--none);
  background: var(--sunken); border-style: dashed; font-size: 12px; text-align: center; }
.img-credit { font-size: 10.5px; color: var(--muted); margin: 0; }
.sgy-btn {
  display: inline-block; font-size: 12px; font-weight: 700; text-decoration: none;
  color: var(--accent-ink); background: var(--accent-wash); border: 1px solid var(--accent);
  border-radius: 8px; padding: 6px 12px; text-align: center;
}
.sgy-btn:hover { background: var(--accent); color: #fff; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px;
  margin: 0; flex: 1 1 320px; min-width: 0; }
.facts > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.facts dt { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.facts dd { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.facts a { color: var(--accent-ink); }

.cond-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.cond-block h3 { margin: 0; padding: 12px 14px 4px; font-size: 14px; font-weight: 900; }
.cond-sum { margin: 0; padding: 0 14px 10px; font-size: 12px; color: var(--top-ink); font-weight: 700;
  font-family: "JetBrains Mono", monospace; }
.cond-block tbody tr.best-row { background: var(--top-wash); }
.cond-block tbody tr.best-row .price { color: var(--top-ink); font-weight: 700; }
.cond-block table { min-width: 420px; }

.related h2 { font-size: 15px; font-weight: 900; margin: 0 0 8px; }
ul.sibs { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 16px; }
ul.sibs li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
  border-bottom: 1px solid var(--line-soft); padding: 5px 0; }
ul.sibs a { color: var(--accent-ink); text-decoration: none; overflow-wrap: anywhere; }
ul.sibs a:hover { text-decoration: underline; }
ul.sibs .s-rel { font-size: 10.5px; color: var(--muted); font-family: "JetBrains Mono", monospace; white-space: nowrap; }

/* ---------- 固定ページ ---------- */
.doc-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; }
.doc-sec h2 { margin: 0 0 6px; font-size: 14px; font-weight: 900; }
.doc-sec p, .doc-sec li { font-size: 13px; color: var(--ink-soft); margin: 0 0 6px; }
.doc-sec ul { margin: 0; padding-left: 20px; }
.doc-sec a { color: var(--accent-ink); }

/* ---------- 更新日(見出しのすぐ上・赤字) ---------- */
/* 直下の .section-head h2 は 15px。それより少しだけ大きくする。 */
.updated-on {
  margin: 10px 0 2px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: #d32020;
}
.updated-on b { font-weight: 800; font-family: "JetBrains Mono", monospace; }
:root[data-theme="dark"] .updated-on,
html.dark .updated-on { color: #ff6b6b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .updated-on { color: #ff6b6b; }
}

/* ---------- 定休日 ---------- */
/* 取得できなかった理由が「定休日」と断定できる場合のみ、未取得と区別して表示する */
.cell.empty.closed { border-style: solid; background: var(--sunken); }
.cell.empty.closed .delta { color: var(--ink-soft); font-weight: 700; }
.daybar .st.closed {
  color: var(--ink-soft); border-color: var(--line); background: var(--sunken); font-weight: 700;
}

@media (max-width: 759px) {
  img.hero-img, .hero-img.ph { width: 150px; height: 150px; }
  .page.product h1, .page.doc h1 { font-size: 18px; }
  .hero { padding: 12px; gap: 12px; }
  .updated-on { font-size: 16px; }

  /* ---------- スマホ: 1商品・1状態の価格セルを必ず横1行に保つ ----------
     従来は grid の auto-fit で折り返して2行になっていた。
     nowrap の flex 行にし、収まらない場合だけ横スクロールさせる
     (店舗が3→5に増えても行が増えない)。 */
  .cells {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  /* flex-basis を固定し、内容(差額の文言)で幅が伸びないようにする。
     余白があるときだけ均等に広がる。 */
  .cells > .cell {
    flex: 1 0 98px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .cell .price { font-size: 16px; white-space: nowrap; }
  .cell .shop-tag {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .cell .delta { font-size: 10.5px; overflow-wrap: anywhere; }
  .cell .delta .src { white-space: nowrap; }
}

/* ---------- 買取価格の推移グラフ ---------- */
/* カテゴリカルカラー(dataviz 検証済みパレット、ライト/ダーク両対応)。
   店舗IDのアルファベット順で固定スロットに割り当てる(店舗が増減しても既存店舗の色は変わらない) */
:root {
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948;
}
:root[data-theme="dark"] {
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;
    --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
  }
}

.trend-wrap { padding: 0 14px 14px; }
/* 当日価格テーブルを廃止したため、推移グラフが cond-block 内で最初の要素になる。
   カード上端との余白が無いと詰まって見えるので、その場合だけ上パディングを足す。 */
.cond-block > .trend-wrap:first-child { padding-top: 14px; }
.trend-wrap h4 { margin: 4px 0 6px; font-size: 12.5px; font-weight: 900; color: var(--ink-soft); }
/* グラフは常にコンテナ幅にフィットさせ、スワイプしないと最新日が見えない状態を
   避ける(1ビューで全期間を表示)。横スクロールは行わない。 */
.trend-scroll { overflow: visible; }
.trend-svg { display: block; width: 100%; height: auto; }
.trend-svg .tg-grid { stroke: var(--line-soft); stroke-width: 1; }
.trend-svg .tg-ylab, .trend-svg .tg-xlab {
  font-family: "JetBrains Mono", monospace; font-size: 13px; fill: var(--muted);
}
@media (max-width: 759px) {
  .trend-wrap { padding: 0 12px 12px; }
}

/* ---------- 折れ線グラフ共通(店舗ごとの色スウォッチ凡例) ---------- */
.tg-legend { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tg-legend li { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--ink-soft); }
.tg-sw { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.tg-shop { flex: 0 0 auto; font-weight: 700; color: var(--ink); }

/* ---------- 買取価格の推移グラフ(状態ごとに個別グラフ・店舗ごとに表示切替) ---------- */
.tr-wrap { position: relative; }
.tr-cond-block { position: relative; margin-top: 18px; }
.tr-cond-block:first-of-type { margin-top: 0; }
.tr-cond-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 900; color: var(--ink-soft); }
.tr-shop-g.shop-off { display: none; }
.tr-shop-legend { align-items: center; }
.tr-shop-item { display: flex; align-items: center; gap: 5px; }
.tr-shop-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.tr-shop-toggle input { margin: 0; }
.tr-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-dot { stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.tr-dot:hover, .tr-dot:focus { outline: none; filter: brightness(0.85); }

/* ---------- 最高値の推移グラフ(状態横断・状態別トグル) ---------- */
.maxtrend-section { margin-bottom: 4px; }
.maxtrend-wrap { position: relative; }
.maxtrend-wrap h4 { color: var(--accent-ink); }
.tgmax-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tgmax-dot { stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.tgmax-dot:hover, .tgmax-dot:focus { outline: none; filter: brightness(0.85); }
.maxcond-legend { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.maxcond-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 700; color: var(--ink); cursor: pointer; }
.maxcond-toggle input { margin: 0; }
.maxcond-g.mc-off { display: none; }

/* ---------- 推移グラフ共通のツールチップ(ホバー/タップで表示) ---------- */
.tgmax-tip { position: absolute; transform: translate(-50%, -125%); background: var(--ink);
  color: var(--surface); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: var(--shadow); }