:root {
    /* ===== Core palette (7 roles) ===== */
    --navy:    #0B1B3D;   /* primary: text, structure, borders */
    --cream:   #F5F1E8;   /* paper: main background */
    --paper:   #FAF7EE;   /* paper-elevated: card background */
    --line:    #D4C9B0;   /* borders, separators, mute surfaces */
    --mute:    #8A7E6B;   /* secondary text */
    --red:     #CC2936;   /* accent: LIVE / TONIGHT / starter */
    --jp:      #D4A017;   /* accent: Japanese-specific signals */
    --ink:     #1A1A1A;   /* body text (slightly warmer than navy) */

    /* ===== Legacy aliases (to keep old class refs working) ===== */
    --navy-dark:  var(--navy);
    --navy-soft:  #1a2d5a;
    --cream-soft: var(--paper);
    --cream-dark: var(--line);
    --red-dark:   var(--red);
    --red-soft:   #F9EBEC;   /* softened: nearly neutral pink */
    --yellow:     var(--jp);
    --yellow-soft:#F5ECCC;   /* softened cream-yellow */
    --mute-light: var(--line);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { overflow-x: hidden; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { color: var(--red); }
  button { font-family: inherit; }
  .serif {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", Georgia, serif;
    font-feature-settings: "palt" 1;
  }
  .mono, .num {
    font-family: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
    font-variant-numeric: tabular-nums;
  }

  /* ===== MASTHEAD ===== */
  .masthead {
    background: var(--navy);
    color: var(--cream);
    position: relative;
    padding: 28px 20px 20px;
  }
  .masthead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--red);
  }
  .masthead .inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
  }
  .masthead h1 {
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .masthead h1 .dot { color: var(--red); }
  .masthead .issue-line {
    margin-top: 8px;
    font-family: "SF Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,241,232,0.55);
  }
  .masthead .subtitle {
    margin-top: 12px;
    font-size: 13px;
    opacity: 0.82;
    max-width: 560px;
  }
  .masthead-actions { display: flex; gap: 8px; align-items: center; }
  .nav-link {
    color: var(--cream);
    text-decoration: none;
    font-size: 12px;
    padding: 8px 14px;
    border: 1px solid rgba(245,241,232,0.3);
    letter-spacing: 0.05em;
    cursor: pointer;
    background: none;
    font-family: inherit;
    font-weight: 500;
  }
  .nav-link:hover { background: rgba(245,241,232,0.12); color: var(--cream); }
  .nav-link.accent { border-color: var(--cream); color: var(--cream); background: rgba(245,241,232,0.08); }
  .nav-link.accent:hover { background: var(--cream); color: var(--navy); }

  /* ===== MODE TABS ===== */
  .mode-tabs {
    background: var(--cream-soft);
    border-bottom: 1px solid var(--navy);
  }
  .mode-tabs .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
  }
  .mode-tab {
    padding: 14px 26px;
    border: none;
    background: none;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--mute);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
  }
  .mode-tab.active {
    color: var(--navy);
    border-bottom-color: var(--red);
  }

  /* ===== MAIN ===== */
  main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 60px;
  }

  /* ===== HERO TODAY ===== */
  /* 特集: 下の一覧と明確に分離。カード化+余白強化+左赤ストライプ */
  .hero {
    margin: 24px 0 36px;
    padding: 24px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--red);
    box-shadow: 0 1px 3px rgba(11,27,61,0.04), 0 8px 24px rgba(11,27,61,0.03);
    position: relative;
  }
  .hero::after {
    /* 下部セパレータ(下の一覧が始まる前の物理的な区切り) */
    content: '';
    display: block;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--line);
  }
  .hero-kicker {
    color: var(--red);
    font-size: 10px;
    letter-spacing: 0.28em;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .hero-kicker::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  .hero-title {
    font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.12;
    color: var(--navy);
    letter-spacing: -0.015em;
    margin-bottom: 6px;
  }
  .hero-deck {
    font-size: 15px;
    color: var(--mute);
    margin-bottom: 16px;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
  }
  .hero-times {
    display: flex;
    gap: 32px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 14px 0;
    flex-wrap: wrap;
  }
  .hero-tb .label {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--mute);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .hero-tb .val {
    font-family: "SF Mono", monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
  }
  .hero-tb .val small { font-size: 13px; color: var(--mute); font-weight: 500; margin-left: 4px; }
  .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ===== QUICK CHIPS ===== */
  .quick-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 16px 0 20px;
  }
  .chip {
    padding: 7px 13px;
    border: 1px solid var(--navy);
    background: var(--cream);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
  }
  .chip.accent-red {
    border-color: var(--red);
    color: var(--red);
  }
  .chip:hover { background: var(--navy); color: var(--cream); }
  .chip.accent-red:hover { background: var(--red); color: var(--cream); }
  .chip.on { background: var(--navy); color: var(--cream); }
  .chip.accent-red.on { background: var(--red); color: var(--cream); }
  .chip-sep {
    display: inline-block;
    width: 1px;
    background: var(--line);
    margin: 4px 2px;
  }

  /* ===== VIEW CONTROLS ===== */
  .view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 10px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 10px;
  }
  .summary {
    font-size: 13px;
    color: var(--mute);
  }
  .summary .count { color: var(--navy); font-weight: 700; font-family: "SF Mono", monospace; }
  .view-toggle {
    display: inline-flex;
    border: 1px solid var(--navy);
  }
  .view-toggle button {
    padding: 7px 13px;
    border: none;
    background: var(--cream);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
  }
  .view-toggle button.active { background: var(--navy); color: var(--cream); }

  /* ===== SEARCH / FILTER ===== */
  .filter-block {
    background: var(--cream-soft);
    border: 1px solid var(--line);
    padding: 16px 18px;
    margin-bottom: 18px;
  }
  .filter-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 130px;
  }
  .field label {
    font-size: 10px;
    color: var(--mute);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .field select {
    padding: 8px 10px;
    border: 1px solid var(--navy);
    font-size: 13px;
    font-family: inherit;
    background: var(--cream);
    color: var(--navy);
    font-weight: 500;
  }
  .adv-toggle {
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--red);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 0;
  }
  .adv-filters {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    display: none;
  }
  .adv-filters.open { display: block; }

  /* ===== ENTRY (game) — 2カラムレイアウト(左=日時 / 右=試合情報) ===== */
  .entry {
    padding: 10px 0 8px;
    border-top: 1px solid var(--navy);
    position: relative;
  }

  .entry-2col {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    align-items: start;
    padding-right: 36px; /* fav-btn 分 */
  }

  /* 3カラム版: 左=日時 / 中=試合情報 / 右=チケット+バー(2段積み) */
  .entry-3col {
    display: grid;
    grid-template-columns: 160px 1fr 280px;
    gap: 18px;
    align-items: start;
    padding-right: 36px;
  }
  .entry-3col .entry-right-panel {
    border-left: 1px solid var(--line);
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  /* 右上: チケットブロック */
  .entry-3col .entry-ticket-block {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
  }
  .entry-3col .etb-label {
    font-family: "SF Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--navy);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1px;
  }
  .entry-3col .etb-price {
    font-family: "SF Mono", monospace;
    font-size: 12px;
    color: var(--mute);
    margin-bottom: 3px;
  }
  .entry-3col .etb-price strong { color: var(--navy); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
  .entry-3col .etb-price small { color: var(--mute); margin: 0 2px; font-weight: 500; }
  .entry-3col .etb-price em { font-style: normal; font-size: 10px; color: var(--mute); margin-left: 2px; }
  .entry-3col .etb-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .entry-3col .etb-cta .btn-sm { padding: 5px 10px; font-size: 11px; }
  .entry-3col .entry-left {
    border-right: 1px solid var(--line);
    padding-right: 12px;
  }
  .entry-3col .el-kicker {
    font-family: "SF Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 2px;
  }
  .entry-3col .el-kicker.weekend { color: var(--navy); }
  .entry-3col .el-kicker.regular { color: var(--navy); opacity: 0.5; }
  .entry-3col .el-date {
    font-family: "SF Mono", monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
  }
  .entry-3col .el-tline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "SF Mono", monospace;
    margin-bottom: 2px;
  }
  .entry-3col .el-tlabel { font-size: 11px; color: var(--mute); font-weight: 600; min-width: 24px; }
  .entry-3col .el-tval { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
  .entry-3col .el-tz { font-size: 11px; color: var(--mute); }
  .entry-3col .el-jst-date { font-size: 11px; color: var(--mute); padding-left: 30px; margin-top: 3px; }

  .entry-3col .entry-middle { min-width: 0; }
  .entry-3col .entry-title {
    font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
    font-size: 28px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.2;
    margin: 0 0 2px;
  }
  /* 英字タイトル直下のカタカナ副題(日本人ファン向け) */
  .entry-3col .entry-title-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--mute);
    letter-spacing: 0.02em;
    margin: 0 0 8px;
  }
  .entry-3col .entry-byline {
    font-size: 14px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
    margin-bottom: 10px;
  }
  .entry-3col .entry-jp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 0;
  }
  .entry-3col .entry-jp-row .jp-player { padding: 5px 12px; font-size: 13px; margin: 0; }
  .entry-3col .entry-price-line {
    font-size: 12px;
    color: var(--mute);
    margin-bottom: 8px;
    font-family: "SF Mono", monospace;
  }
  .entry-3col .entry-price-line strong { color: var(--navy); font-weight: 700; font-size: 14px; }
  .entry-3col .entry-price-line em { font-style: normal; font-size: 10px; color: var(--mute); }
  .entry-3col .entry-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .entry-3col .entry-cta-row .btn-sm { padding: 5px 10px; font-size: 11px; }

  /* バー情報(右パネル内の下段) */
  .entry-3col .entry-bar-col {
    font-size: 12px;
    color: var(--mute);
  }
  .entry-3col .ebc-label {
    font-family: "SF Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--navy);
    font-weight: 700;
    margin-bottom: 2px;
    text-transform: uppercase;
  }
  .entry-3col .ebc-name,
  .entry-3col .ebc-name-link {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin: 0 0 2px;
    text-decoration: none;
  }
  /* リンクは文字幅だけに下線(inline-block で content-width) */
  .entry-3col .ebc-name-link {
    display: inline-block;
    max-width: 100%;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
  }
  .entry-3col .ebc-name-link:hover {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  .entry-3col .ebc-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .entry-3col .ebc-more {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px dashed var(--red);
    padding-bottom: 1px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .entry-3col .ebc-more:hover { color: var(--navy); border-bottom-color: var(--navy); }
  .entry-3col .ebc-jp {
    display: inline-block;
    background: var(--red);
    color: var(--cream);
    font-size: 9px;
    padding: 1px 5px;
    margin-left: 5px;
    font-family: "SF Mono", monospace;
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
  }
  .entry-3col .ebc-meta {
    font-size: 11px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
    margin-bottom: 4px;
  }
  .entry-3col .ebc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .entry-3col .ebc-link {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px dashed var(--red);
    padding-bottom: 1px;
    font-size: 11px;
    font-weight: 600;
  }
  .entry-3col .ebc-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

  /* 左カラム: 日時 */
  .entry-2col .entry-left {
    border-right: 1px solid var(--line);
    padding-right: 16px;
  }
  .entry-2col .el-kicker {
    font-family: "SF Mono", monospace;
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 4px;
  }
  .entry-2col .el-kicker.weekend { color: var(--navy); }
  .entry-2col .el-kicker.regular { color: var(--navy); opacity: 0.5; }
  .entry-2col .el-date {
    font-family: "SF Mono", monospace;
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .entry-2col .el-times {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .entry-2col .el-tline {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: "SF Mono", monospace;
  }
  .entry-2col .el-tlabel {
    font-size: 10px;
    color: var(--mute);
    font-weight: 600;
    min-width: 22px;
  }
  .entry-2col .el-tval {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .entry-2col .el-tz { font-size: 10px; color: var(--mute); }
  .entry-2col .el-jst-date { font-size: 10px; color: var(--mute); margin-top: 2px; padding-left: 27px; }

  /* 右カラム: タイトル + 選手 + 価格 + CTA + バー */
  .entry-2col .entry-right { min-width: 0; }
  .entry-2col .entry-title {
    font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
    font-size: 20px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.2;
    margin: 0 0 3px;
    padding: 0;
  }
  .entry-2col .entry-byline {
    font-size: 11px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
    margin-bottom: 8px;
  }
  .entry-2col .entry-jp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }
  .entry-2col .entry-jp-row .jp-player {
    padding: 3px 8px;
    font-size: 11px;
    margin: 0;
  }
  .entry-2col .entry-price-line {
    font-size: 12px;
    color: var(--mute);
    margin-bottom: 8px;
    font-family: "SF Mono", monospace;
  }
  .entry-2col .entry-price-line strong {
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
  }
  .entry-2col .entry-price-line em { font-style: normal; font-size: 10px; color: var(--mute); }
  .entry-2col .entry-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
  }
  .entry-2col .entry-cta-row .btn-sm {
    padding: 5px 10px;
    font-size: 11px;
  }
  /* バー情報: 右寄せ控えめ(補助情報と明示) */
  .entry-2col .entry-bar-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;       /* 右寄せ */
    gap: 4px 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--mute);
    text-align: right;
  }
  .entry-2col .ebs-label { color: var(--navy); font-weight: 600; }
  .entry-2col .ebs-name { color: var(--navy); font-weight: 500; }
  .entry-2col .ebs-meta { color: var(--mute); font-family: "SF Mono", monospace; font-size: 11px; }
  .entry-2col .ebs-link {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px dashed var(--red);
    padding-bottom: 1px;
    font-size: 11px;
  }
  .entry-2col .ebs-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

  /* === レスポンシブ === */
  /* 右カラム(240px)が十分に効くのは1200px以上。
     それ未満は3カラムで押し込むより、右パネルを下段に横並びさせた方が視認性◎。
     -> 旧900→1100に繰り上げて「中途半端な狭い3カラム」を廃止 */
  @media (max-width: 1100px) {
    .entry-3col {
      grid-template-columns: 150px 1fr;
      gap: 14px;
      padding-right: 30px;
    }
    .entry-3col .entry-right-panel {
      grid-column: 1 / -1;
      border-left: none;
      border-top: 1px dashed var(--line);
      padding-left: 0;
      padding-top: 10px;
      margin-top: 4px;
      flex-direction: row;
      gap: 18px;
      align-items: stretch;
    }
    .entry-3col .entry-ticket-block {
      flex: 1 1 0;
      min-width: 0;
      border-bottom: none;
      border-right: 1px dashed var(--line);
      padding-right: 14px;
      padding-bottom: 0;
    }
    .entry-3col .entry-bar-col {
      flex: 1 1 0;
      min-width: 0;
    }
    .entry-3col .el-date { font-size: 20px; }
    .entry-3col .el-tval { font-size: 16px; }
    .entry-3col .entry-title { font-size: 24px; }
    .entry-3col .entry-byline { font-size: 13px; }
  }

  /* Phone (700px以下): 1カラム完全縦積み */
  @media (max-width: 700px) {
    .entry-3col { grid-template-columns: 1fr; gap: 10px; padding-right: 28px; }
    .entry-3col .entry-left {
      border-right: none;
      border-bottom: 1px solid var(--line);
      padding-right: 0;
      padding-bottom: 8px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 14px;
      align-items: baseline;
    }
    .entry-3col .el-kicker { grid-column: 1 / -1; margin-bottom: 0; }
    .entry-3col .el-date { margin: 0; font-size: 17px; }
    .entry-3col .el-times { grid-column: 2; display: flex; gap: 14px; flex-wrap: wrap; }
    .entry-3col .el-tline { margin: 0; }
    .entry-3col .el-jst-date { grid-column: 1 / -1; padding-left: 0; font-size: 10px; }

    .entry-3col .entry-right-panel { flex-direction: column; gap: 10px; }
    .entry-3col .entry-ticket-block {
      border-right: none;
      border-bottom: 1px dashed var(--line);
      padding-right: 0;
      padding-bottom: 10px;
    }
    .entry-3col .entry-title { font-size: 17px; }
  }

  /* Small phone (420px以下): フォント微調整 */
  @media (max-width: 420px) {
    .entry-3col .el-date { font-size: 15px; }
    .entry-3col .el-tval { font-size: 14px; }
    .entry-3col .entry-title { font-size: 16px; }
    .entry-3col .etb-price strong { font-size: 14px; }
    .entry-3col .ebc-name { font-size: 12px; }
  }

  /* 旧 2col の残置モバイル対応 */
  @media (max-width: 700px) {
    .entry-2col .entry-bar-summary { justify-content: flex-start; text-align: left; }
    .entry-2col { grid-template-columns: 1fr; gap: 8px; padding-right: 30px; }
    .entry-2col .entry-left {
      border-right: none;
      border-bottom: 1px solid var(--line);
      padding-right: 0;
      padding-bottom: 8px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 4px 14px;
      align-items: baseline;
    }
    .entry-2col .el-kicker { grid-column: 1 / -1; }
    .entry-2col .el-date { margin: 0; }
    .entry-2col .el-times { grid-column: 2; flex-direction: row; gap: 12px; }
    .entry-2col .el-jst-date { grid-column: 1 / -1; padding-left: 0; }
  }

  /* 旧 entry-compact スタイルは残しておくがもう使わない */
  .entry-compact .entry-time-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    font-family: "SF Mono", monospace;
    padding-right: 36px;
  }
  .entry-compact .et-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .entry-compact .et-sep { color: var(--line); font-size: 14px; }
  .entry-compact .et-local {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .entry-compact .et-local small,
  .entry-compact .et-jst small { font-size: 11px; color: var(--mute); font-weight: 500; margin-left: 3px; }
  .entry-compact .et-arrow { color: var(--mute); font-size: 13px; font-family: sans-serif; }
  .entry-compact .et-jst {
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
  }
  .entry-compact .et-jst-date { font-size: 11px; color: var(--mute); }
  .entry-compact .et-kicker {
    margin-left: auto;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--red);
    font-family: "SF Mono", monospace;
  }
  .entry-compact .et-kicker.weekend { color: var(--navy); }
  .entry-compact .et-kicker.regular { color: var(--navy); opacity: 0.5; }

  /* 2段目: タイトル+会場 1行 */
  .entry-compact .entry-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
  }
  .entry-compact .entry-title {
    font-size: 19px;
    font-weight: 900;
    color: var(--navy);
    font-family: "Noto Serif JP", "Yu Mincho", Georgia, serif;
    line-height: 1.2;
    margin: 0;
    padding: 0;
  }
  .entry-compact .entry-venue {
    font-size: 12px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
  }

  /* 3段目: JP選手 + 価格 インライン */
  .entry-compact .entry-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 8px;
  }
  .entry-compact .entry-jp-inline { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .entry-compact .entry-jp-inline .jp-player {
    padding: 3px 8px;
    font-size: 11px;
    margin: 0;
  }
  .entry-compact .entry-price {
    font-family: "SF Mono", monospace;
    font-size: 13px;
    color: var(--navy);
    font-weight: 700;
  }
  .entry-compact .entry-price small { color: var(--mute); margin: 0 2px; font-weight: 500; }
  .entry-compact .entry-price em { font-style: normal; font-size: 10px; color: var(--mute); margin-left: 4px; }

  /* 4段目: CTAボタン横並び、小型 */
  .entry-compact .entry-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
  }
  .entry-compact .entry-cta-row .btn-sm {
    padding: 5px 10px;
    font-size: 11px;
  }
  .entry-compact .entry-cta-row .bars-compact-link {
    margin-top: 0;
    margin-left: auto;
    font-size: 11px;
    padding: 4px 0;
  }

  /* モバイル */
  @media (max-width: 700px) {
    .entry-compact .et-date { font-size: 15px; }
    .entry-compact .et-local { font-size: 17px; }
    .entry-compact .et-jst { font-size: 14px; }
    .entry-compact .entry-title { font-size: 17px; }
    .entry-compact .et-kicker { margin-left: 0; width: 100%; margin-top: 2px; }
    .entry-compact .entry-cta-row .bars-compact-link { margin-left: 0; width: 100%; }
  }
  .entry:first-of-type { border-top: 2px double var(--navy); }
  .entry.today {
    border-left: 4px solid var(--red);
    padding-left: 16px;
    margin-left: -16px;
  }
  .entry-kicker {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 6px;
    display: inline-block;
  }
  .entry-kicker.weekend { color: var(--navy); }          /* WCAG AA: cream上で高コントラスト */
  .entry-kicker.regular { color: var(--navy); opacity: 0.6; } /* 通常日は弱めnavy、十分読める */
  .entry-title {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 3px;
    padding-right: 32px;
  }
  .entry-byline {
    font-size: 12px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
    margin-bottom: 14px;
  }
  .entry-byline .stadium-link {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px dashed var(--mute);
    padding-bottom: 1px;
    font-weight: 600;
  }
  .entry-byline .stadium-link:hover { color: var(--red); border-bottom-color: var(--red); }

  /* バー住所 → Google Maps */
  .bar-addr-link {
    color: var(--mute);
    text-decoration: none;
    border-bottom: 1px dashed var(--mute);
    padding-bottom: 1px;
  }
  .bar-addr-link:hover { color: var(--red); border-bottom-color: var(--red); }
  .fav-btn {
    position: absolute;
    top: 22px; right: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--mute-light);
  }
  .fav-btn.on { color: var(--navy); }

  /* Data row — default: outline only. TONIGHT: navy fill. */
  .scorebox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    background: var(--paper);
    color: var(--navy);
    margin: 14px 0;
    border: 1px solid var(--line);
  }
  .scorebox-cell {
    padding: 10px 14px;
    border-right: 1px solid var(--line);
  }
  .scorebox-cell:last-child { border-right: none; }
  .scorebox-cell .label {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--mute);
    text-transform: uppercase;
    font-weight: 700;
  }
  .scorebox-cell .val {
    font-family: "SF Mono", monospace;
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    color: var(--navy);
    letter-spacing: -0.01em;
  }
  .scorebox-cell .val small { font-size: 12px; color: var(--mute); font-weight: 500; }
  .scorebox-cell.price-cell .val { font-size: 17px; }
  .scorebox-cell.price-cell .val small { margin: 0 3px; color: var(--mute); }
  .scorebox-cell .sub {
    font-size: 10px;
    color: var(--mute);
    margin-top: 1px;
  }
  .scorebox-cell.red { background: transparent; border-top: 2px solid var(--red); }
  .scorebox-cell.red .label { color: var(--red); }
  .scorebox-cell.red .val { color: var(--red); }

  /* TONIGHT 試合のみ scorebox を濃navy に昇格して差別化 */
  .entry.today .scorebox {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
  }
  .entry.today .scorebox-cell { border-right-color: rgba(245,241,232,0.15); }
  .entry.today .scorebox-cell .label { color: rgba(245,241,232,0.6); }
  .entry.today .scorebox-cell .val { color: var(--cream); }
  .entry.today .scorebox-cell .val small { color: rgba(245,241,232,0.7); }
  .entry.today .scorebox-cell .sub { color: rgba(245,241,232,0.55); }
  .entry.today .scorebox-cell.red { background: transparent; border-top: 2px solid var(--red); }
  .entry.today .scorebox-cell.red .label { color: rgba(245,241,232,0.6); }
  .entry.today .scorebox-cell.red .val { color: var(--cream); }

  /* JP players — starter gets red emphasis, non-starter is neutral */
  .jp-players { margin: 10px 0 14px; }
  .jp-player {
    display: inline-block;
    padding: 4px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: 13px;
    margin-right: 6px;
    margin-bottom: 4px;
    font-weight: 500;
    color: var(--navy);
  }
  .jp-player.starter {
    background: var(--red);
    border-color: var(--red);
    color: var(--cream);
    font-weight: 700;
  }
  .jp-player .role {
    font-size: 10px;
    color: var(--mute);
    margin-left: 5px;
    font-weight: 500;
  }
  .jp-player.starter .role { color: rgba(245,241,232,0.85); font-weight: 600; }

  /* CTA group */
  .cta-row {
    display: flex;
    gap: 8px;
    margin: 14px 0;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn {
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.02em;
  }
  .btn-primary {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
  }
  .btn-primary:hover { background: var(--red); border-color: var(--red); color: var(--cream); }
  .btn-secondary {
    background: var(--cream);
    color: var(--navy);
    border-color: var(--navy);
  }
  .btn-secondary:hover { background: var(--navy); color: var(--cream); }
  .btn-ghost {
    background: none;
    color: var(--navy);
    border-color: var(--line);
  }
  .btn-ghost:hover { border-color: var(--navy); }
  .btn-sm { padding: 6px 10px; font-size: 11px; }

  /* ===== BARS in game entry (余白タイト化) ===== */
  .bars-head {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    margin: 10px 0 6px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bars-head small { font-family: sans-serif; font-size: 11px; color: var(--mute); font-weight: 400; letter-spacing: 0.05em; }
  .bars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 6px;
    margin-bottom: 4px;
  }
  /* 単一ピックは全幅で使い切る(縦方向もコンパクトに) */
  .bars-grid.single {
    grid-template-columns: 1fr;
  }

  /* MLB放映確度 = 最優先情報としてカード先頭に */
  .bar-item {
    padding: 0;
    background: var(--cream-soft);
    border: 1px solid var(--line);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .bar-tv-lead {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: "SF Mono", monospace;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .bar-tv-lead.high { background: var(--red); color: var(--cream); }
  .bar-tv-lead.medium {
    background: var(--paper);
    color: var(--navy);
    border-bottom: 1px solid var(--line);
    border-left: 3px solid var(--navy);
  }
  .bar-tv-lead.low {
    background: var(--paper);
    color: var(--mute);
    border-bottom: 1px solid var(--line);
  }
  .bar-tv-lead .tv-icon { font-size: 13px; }

  .bar-item-body { padding: 10px 12px 12px; flex: 1; }
  .bar-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
  }
  .bar-item-name {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy);
    line-height: 1.3;
  }
  .bar-item-name .type-label {
    font-family: "SF Mono", monospace;
    font-size: 9px;
    color: var(--mute);
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-right: 4px;
    vertical-align: middle;
  }
  .bar-item-name .type-label.jp { color: var(--navy); font-weight: 700; }
  .bar-item-dist {
    font-family: "SF Mono", monospace;
    font-size: 11px;
    color: var(--mute);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .bar-item-meta {
    font-size: 11px;
    color: var(--mute);
    line-height: 1.5;
  }
  .bar-item-meta .jp-audio { color: var(--red); font-weight: 600; }
  .bar-item:hover { border-color: var(--navy); }
  .bar-item:hover .bar-item-name { color: var(--red); }

  /* 2回目以降の同じ都市の試合では、バー一覧を繰り返さずに1行リンクに圧縮 */
  .bars-compact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--mute);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px dashed var(--mute);
  }
  .bars-compact-link:hover { color: var(--navy); border-bottom-color: var(--navy); }

  /* 全店表示CTA */
  .bars-more-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--cream);
    border: 1px solid var(--line);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 4px;
    transition: background 0.15s, border-color 0.15s;
  }
  .bars-more-cta:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }

  /* 既存 .feature-chip はモーダルやバー詳細モード用に残す */
  .feature-chip {
    font-size: 10px;
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 2px 5px;
    color: var(--mute);
  }
  .feature-chip.hot { background: var(--red); color: var(--cream); border-color: var(--red); }
  .feature-chip.jp-audio { background: var(--cream); color: var(--red); border-color: var(--red); }

  /* チケットCTAの整理 */
  .ticket-cta-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
  }
  .ticket-cta-primary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .ticket-cta-secondary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
  }
  .ticket-cta-secondary a {
    color: var(--mute);
    text-decoration: none;
    border-bottom: 1px dashed var(--mute);
    padding-bottom: 1px;
  }
  .ticket-cta-secondary a:hover { color: var(--navy); border-bottom-color: var(--navy); }
  .ticket-cta-secondary .sep { color: var(--line); }

  /* Bar mode: Leaflet 地図(APIキー不要、OpenStreetMap+CARTO) */
  .bar-map-wrap {
    margin: 0 0 20px;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  .bar-map {
    height: 320px;
    width: 100%;
    background: var(--paper);
  }
  .bar-map-legend {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(245,241,232,0.92);
    padding: 4px 10px;
    font-size: 11px;
    color: var(--navy);
    border: 1px solid var(--line);
    font-family: "SF Mono", monospace;
    z-index: 500;
    pointer-events: none;
  }
  @media (max-width: 700px) {
    .bar-map { height: 240px; }
    .bar-map-legend { font-size: 10px; padding: 3px 8px; }
  }
  /* Leaflet popup の書体統一 */
  .leaflet-container { font-family: "Noto Sans JP", -apple-system, sans-serif !important; }
  .leaflet-popup-content a { color: var(--red); font-weight: 600; }
  /* カスタムピン */
  .bar-pin-inner {
    width: 28px; height: 28px;
    background: var(--cream);
    border: 2px solid var(--navy);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  .bar-pin-inner.jp { background: var(--red); border-color: var(--navy); }
  .bar-pin-inner > * { transform: rotate(45deg); font-size: 12px; }

  /* Standalone bar (bar mode) */
  .bar-editorial {
    padding: 20px 0;
    border-top: 1px solid var(--navy);
    cursor: pointer;
    position: relative;
  }
  .bar-editorial:first-of-type { border-top: 2px double var(--navy); }
  .bar-editorial:hover .bar-editorial-name { color: var(--red); }
  .bar-editorial-kicker {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 700;
    margin-bottom: 5px;
  }
  .bar-editorial-kicker.jp { color: var(--yellow); }
  .bar-editorial-name {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 22px;
    font-weight: 900;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 4px;
    padding-right: 40px;
  }
  .bar-editorial-meta {
    font-size: 12px;
    color: var(--mute);
    font-family: "SF Mono", monospace;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .bar-editorial-meta span { display: inline-flex; gap: 4px; }
  /* Design A: ドット区切りインライン(四角を廃止、エディトリアル一貫) */
  .bar-editorial .features {
    margin-top: 10px;
    font-size: 12px;
    color: var(--mute);
    line-height: 1.6;
  }
  .bar-editorial .features::before {
    content: '— ';
    color: var(--line);
    margin-right: 2px;
  }
  .bar-editorial .features .feature-chip {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    color: var(--mute);
    font-size: 12px;
  }
  .bar-editorial .features .feature-chip:not(:last-child)::after {
    content: ' · ';
    color: var(--line);
    margin: 0 2px;
  }
  .bar-editorial .features .feature-chip.hot { color: var(--red); font-weight: 600; background: none; border: none; }
  .bar-editorial .features .feature-chip.jp-audio { color: var(--red); font-weight: 600; background: none; border: none; }
  .bar-editorial .tonight {
    background: var(--red);
    color: var(--cream);
    padding: 8px 12px;
    margin-top: 10px;
    font-size: 12px;
    border-left: 3px solid var(--navy);
  }
  .bar-editorial .tonight .label {
    font-size: 9px;
    letter-spacing: 0.2em;
    opacity: 0.85;
    margin-bottom: 2px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* ===== CALENDAR VIEW ===== */
  .cal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-top: 2px double var(--navy);
    border-bottom: 1px solid var(--navy);
    margin-bottom: 0;
    background: var(--cream-soft);
  }
  .cal-label {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
  }
  .cal-label small {
    font-family: "SF Mono", monospace;
    font-size: 11px;
    color: var(--mute);
    font-weight: 500;
    margin-left: 10px;
    letter-spacing: 0.05em;
  }
  .cal-nav button {
    padding: 6px 12px;
    border: 1px solid var(--navy);
    background: var(--cream);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--navy);
    font-weight: 600;
  }
  .cal-nav button:hover { background: var(--navy); color: var(--cream); }
  .cal-nav-group { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

  /* カレンダーTZ切替 */
  .cal-tz-group {
    display: inline-flex;
    border: 1px solid var(--navy);
    margin-right: 8px;
  }
  .cal-tz-btn {
    padding: 5px 10px;
    border: none;
    border-right: 1px solid var(--navy);
    background: var(--cream);
    cursor: pointer;
    font-family: "SF Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.05em;
  }
  .cal-tz-btn:last-child { border-right: none; }
  .cal-tz-btn:hover { background: var(--paper); }
  .cal-tz-btn.active { background: var(--navy); color: var(--cream); }
  .cal-tz-note {
    font-family: "SF Mono", monospace;
    font-size: 11px;
    color: var(--mute);
    margin-left: 10px;
    letter-spacing: 0.05em;
  }

  /* === 月カレンダー === */
  .cal-month-grid { border-bottom: 1px solid var(--navy); }
  .cal-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--navy);
    background: var(--navy);
  }
  .cal-dow-header {
    padding: 8px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cream);
    border-right: 1px solid rgba(245,241,232,0.15);
  }
  .cal-dow-header:last-child { border-right: none; }
  .cal-dow-header.sat { color: #a8c8ff; }
  .cal-dow-header.sun { color: #ffb3a8; }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .cal-grid.cal-month .cal-day {
    min-height: 96px;
    padding: 6px 6px 4px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .cal-day {
    background: var(--cream-soft);
    position: relative;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    flex-direction: column;
  }
  .cal-day:last-child { border-right: none; }
  .cal-day:hover { background: var(--cream-dark); }
  .cal-day.today { background: var(--red-soft); }
  .cal-day.today .cal-date { color: var(--red); font-weight: 900; }
  .cal-day.weekend { background: var(--cream-dark); }
  .cal-day.past { opacity: 0.4; cursor: default; }
  .cal-day.other-month { background: var(--cream); opacity: 0.4; }
  .cal-day.other-month .cal-date { color: var(--mute); }

  .cal-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
  }
  .cal-date {
    font-family: "SF Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1;
  }
  .cal-date.sat { color: var(--navy); }
  .cal-date.sun { color: var(--red); }

  .cal-game {
    background: var(--navy);
    color: var(--cream);
    padding: 2px 4px;
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.25;
    letter-spacing: 0;
    font-family: "SF Mono", monospace;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 1px;
  }
  .cal-game.starter { background: var(--red); }
  .cal-game .jp-name { font-weight: 700; color: var(--cream); }
  .cal-game.starter .jp-name { color: var(--cream); }

  .cal-more {
    font-size: 10px;
    color: var(--mute);
    margin-top: 2px;
    font-weight: 600;
  }

  .cal-count {
    font-size: 10px;
    color: var(--red);
    font-weight: 700;
    font-family: "SF Mono", monospace;
    background: var(--cream);
    padding: 1px 5px;
    border-radius: 8px;
  }

  /* ===== MODAL ===== */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11,27,61,0.7);
    z-index: 9999;  /* Leaflet popup(950)より上に出す */
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--cream);
    max-width: 740px;
    width: 100%;
    padding: 32px 28px;
    position: relative;
    border-top: 4px solid var(--red);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  }
  .modal::after {
    content: none;
  }
  .modal h2 {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 8px;
    padding-right: 40px;
    font-weight: 900;
  }
  .modal .modal-kicker {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .modal .modal-deck {
    font-size: 14px;
    color: var(--mute);
    margin-bottom: 18px;
    font-family: "Noto Serif JP", "Yu Mincho", serif;
  }
  .modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--cream);
    border: 1px solid var(--navy);
    font-size: 18px;
    cursor: pointer;
    color: var(--navy);
    width: 30px;
    height: 30px;
    padding: 0;
    font-family: inherit;
  }
  .modal-close:hover { background: var(--navy); color: var(--cream); }

  /* Guide tabs */
  .guide-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin: 14px 0 16px;
  }
  .guide-tab {
    padding: 10px 18px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--mute);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
  }
  .guide-tab.active {
    color: var(--navy);
    border-bottom-color: var(--red);
  }
  .guide-section { display: none; }
  .guide-section.active { display: block; }
  .guide-section h3 {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .guide-section .tagline {
    font-size: 13px;
    color: var(--mute);
    margin-bottom: 14px;
  }
  .step-list { counter-reset: step; margin: 12px 0; }
  .step-list li {
    list-style: none;
    padding: 10px 0 10px 48px;
    position: relative;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
  }
  .step-list li:last-child { border-bottom: none; }
  .step-list li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0; top: 8px;
    width: 32px; height: 32px;
    background: var(--navy);
    color: var(--cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "SF Mono", monospace;
    font-weight: 700;
    font-size: 13px;
  }

  .guide-tips {
    background: var(--paper);
    border-left: 3px solid var(--navy);
    padding: 14px 16px;
    margin: 16px 0;
  }
  .guide-tips h4 {
    font-size: 12px;
    color: var(--navy);
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .guide-tips ul { padding-left: 18px; font-size: 13px; }
  .guide-tips li { margin-bottom: 4px; }

  .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin: 14px 0;
  }
  .compare-table th {
    background: var(--navy);
    color: var(--cream);
    font-weight: 600;
    font-size: 11px;
    padding: 8px 10px;
    text-align: left;
    letter-spacing: 0.05em;
  }
  .compare-table td {
    border: 1px solid var(--line);
    padding: 8px 10px;
  }
  .compare-table tbody td:first-child {
    background: var(--cream-soft);
    font-weight: 600;
    font-size: 12px;
  }

  /* Bar modal specific */
  .bar-modal-section { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
  .bar-modal-section h4 {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--mute);
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 700;
  }
  .menu-items { display: flex; gap: 6px; flex-wrap: wrap; }
  .menu-item {
    background: var(--cream-soft);
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--line);
  }

  .sns-text {
    background: var(--cream-soft);
    border: 1px solid var(--line);
    padding: 12px;
    font-size: 13px;
    line-height: 1.7;
    width: 100%;
    min-height: 200px;
    font-family: inherit;
    resize: vertical;
  }

  /* ===== TOAST ===== */
  .toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--navy);
    color: var(--cream);
    padding: 10px 20px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: transform 0.3s;
    z-index: 10001;  /* モーダルより上 */
  }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ===== FAVORITES ===== */
  .fav-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--mute);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
  }
  .fav-box:hover {
    background: var(--cream-dark, #f0ece3);
    border-left-color: var(--red);
  }
  .fav-box.on {
    background: var(--navy);
    border-color: var(--navy);
    border-left-color: var(--red);
    color: var(--cream);
  }
  .fav-box.on .label { color: var(--cream); }
  .fav-box .label {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--navy);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
  }

  /* ===== FOOTER ===== */
  footer.site {
    border-top: 2px double var(--navy);
    padding: 24px 20px;
    margin-top: 60px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    color: var(--mute);
    font-size: 11px;
    text-align: center;
    font-family: "SF Mono", monospace;
    letter-spacing: 0.05em;
  }

  .empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--mute);
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 16px;
  }

  .demo-banner {
    background: var(--paper);
    color: var(--mute);
    padding: 5px 20px;
    font-size: 11px;
    text-align: center;
    font-family: "SF Mono", monospace;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--line);
  }

  /* ===== ABOUT MODAL / FAQ ===== */
  .about-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .about-section:first-of-type { border-top: none; padding-top: 0; }
  .about-section h3 {
    font-family: "Noto Serif JP", "Yu Mincho", serif;
    font-size: 17px;
    color: var(--navy);
    margin-bottom: 10px;
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
  }
  .about-section h3::before {
    content: '';
    width: 4px; height: 18px;
    background: var(--red);
    display: inline-block;
  }
  .about-section p { font-size: 14px; line-height: 1.75; margin-bottom: 10px; color: var(--ink); }
  .about-section ul { padding-left: 20px; font-size: 14px; line-height: 1.8; }
  .about-section li { margin-bottom: 4px; }
  .faq-q {
    font-weight: 700;
    color: var(--navy);
    font-size: 14px;
    margin-top: 14px;
    margin-bottom: 4px;
    position: relative;
    padding-left: 24px;
  }
  .faq-q::before {
    content: 'Q';
    position: absolute;
    left: 0; top: 0;
    font-family: "SF Mono", monospace;
    color: var(--red);
    font-weight: 900;
    background: var(--red-soft);
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
  }
  .faq-a {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
  }
  .faq-a::before {
    content: 'A';
    position: absolute;
    left: 0; top: 0;
    font-family: "SF Mono", monospace;
    color: var(--cream);
    font-weight: 900;
    background: var(--navy);
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
  }
  .disclaimer-box {
    background: var(--paper);
    border-left: 3px solid var(--navy);
    padding: 12px 14px;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.7;
  }
  .update-stamp {
    font-family: "SF Mono", monospace;
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0.05em;
    margin-top: 6px;
  }

  /* ===== SCROLL-TO-TOP FAB ===== */
  .fab-top {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 44px; height: 44px;
    background: var(--navy);
    color: var(--cream);
    border: 2px solid var(--cream);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
    z-index: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-family: inherit;
    pointer-events: none;
  }
  .fab-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .fab-top:hover { background: var(--red); }
  .fab-top:active { transform: translateY(0) scale(0.95); }

  /* ===== LOADING / INITIAL FADE-IN ===== */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  main { animation: fadeInUp 0.4s ease-out; }
  .entry, .bar-editorial { animation: fadeInUp 0.3s ease-out; }

  /* ===== FOCUS STATES (accessibility) ===== */
  button:focus-visible, a:focus-visible, select:focus-visible, .chip:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }
  button, a { -webkit-tap-highlight-color: transparent; }

  /* ===== MICROINTERACTIONS ===== */
  .entry, .bar-editorial {
    transition: background 0.15s ease;
  }
  .bar-editorial:hover { background: rgba(245,241,232,0.5); }
  .btn { transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }
  .btn:active { transform: translateY(1px); }
  .chip { transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; }
  .chip:active { transform: translateY(1px); }
  .bar-item { transition: background 0.15s, box-shadow 0.15s, transform 0.15s; }
  .bar-item:hover { box-shadow: inset 0 0 0 1px var(--yellow); z-index: 1; transform: translateY(-1px); }
  .fav-btn { transition: color 0.15s, transform 0.2s; }
  .fav-btn:hover { color: var(--yellow); transform: scale(1.15); }
  .fav-btn.on:hover { color: var(--red); }
  .cal-day { transition: background 0.12s; }
  .cal-game { transition: opacity 0.15s, transform 0.1s; }
  .cal-game:hover { opacity: 0.88; }

  /* ===== STICKY NAV (masthead stays compact on scroll) ===== */
  .mode-tabs { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(250,247,238,0.96); }

  /* Leaflet z-index 抑制(modal 9999より下) */
  .leaflet-pane { z-index: 400 !important; }
  .leaflet-popup-pane { z-index: 700 !important; }
  .leaflet-top, .leaflet-bottom { z-index: 800 !important; }

  /* ===== RESPONSIVE — TABLET (≤900px) ===== */
  @media (max-width: 900px) {
    .hero-title { font-size: 30px; }
    .masthead h1 { font-size: 26px; }
    .masthead { padding: 24px 18px 18px; }
    main { padding: 0 18px 50px; }
  }

  /* ===== RESPONSIVE — PHONE (≤700px) ===== */
  @media (max-width: 700px) {
    body { font-size: 14px; }
    .hero-title { font-size: 24px; }
    .hero-deck { font-size: 13px; }
    .hero-times { gap: 18px; padding: 10px 0; }
    .hero-tb .val { font-size: 18px; }
    .entry-title { font-size: 19px; }
    .entry { padding: 20px 0; }
    .bar-editorial-name { font-size: 19px; }
    .cal-day { min-height: 92px; padding: 6px 4px; }
    .cal-game { font-size: 9px; padding: 2px 3px; }
    .cal-count { font-size: 9px; top: 6px; right: 4px; }
    .cal-date { font-size: 14px; }
    .scorebox { grid-template-columns: 1fr 1fr; }
    .masthead .inner { flex-direction: column; align-items: flex-start; }
    .masthead-actions { width: 100%; display: flex; gap: 6px; }
    .nav-link { flex: 1; text-align: center; justify-content: center; padding: 7px 10px; font-size: 11px; }
    .filter-row { flex-direction: column; align-items: stretch; }
    .field { min-width: 0; }
    .mode-tab { padding: 12px 18px; font-size: 15px; }
    .modal { padding: 24px 18px; }
    .modal h2 { font-size: 22px; }
    .cta-row .btn { flex: 1 1 45%; justify-content: center; }
    .guide-tab { padding: 10px 12px; font-size: 12px; }
    .view-controls { padding: 14px 0 8px; }
    .demo-banner { font-size: 10px; padding: 6px 14px; }
  }

  /* ===== RESPONSIVE — SMALL PHONE (≤420px) ===== */
  @media (max-width: 420px) {
    .hero-title { font-size: 21px; }
    .entry-title { font-size: 17px; }
    .masthead h1 { font-size: 22px; }
    .scorebox { grid-template-columns: 1fr 1fr; }
    .scorebox-cell { padding: 8px 10px; }
    .scorebox-cell .val { font-size: 15px; }
    .bars-grid { grid-template-columns: 1fr; }
    .cta-row .btn { flex: 1 1 100%; }
    .guide-tabs { gap: 0; }
    .guide-tab { padding: 9px 10px; font-size: 11px; }
    main { padding: 0 14px 40px; }
    .fab-top { width: 40px; height: 40px; bottom: 16px; right: 16px; font-size: 16px; }
  }

  /* ===== PRINT ===== */
  @media print {
    .fab-top, .demo-banner, .cta-row, .fav-btn, .mode-tabs { display: none; }
    .masthead, .entry, .bar-editorial { break-inside: avoid; }
  }