/**
 * 都市ページ（/city/{slug}/、現状 bangkok のみ）専用CSS。site.css との共存のため、
 * このファイル内で定義する全クラスに cp- 接頭辞を付ける（既存 .card/.btn/.grid/.hero/.toc/
 * .layout 等と衝突するため。scratchpad city-bangkok/design2 の Claude Design 承認済みデザイン
 * （bk_parts.py CSS）を移植し、クラス名のみ機械的に cp- を付与した。ヘッダー・フッターの
 * 再現用CSS（.hdr-系・.ftr-系クラス）は本番の _header.php/_footer.php + site.css を使うため含めない
 * （コメント内にCSSコメント終端 "*" + "/" と同じ並びの文字列を書くとコメントが途中で閉じてしまい、
 * 後続ルール（.cp-page の --accent-text 等）がパースされなくなるため、このdocblock内では避けること）。
 * layout.php の $extraCss 経由でこのページ（templates/city.php）だけが読み込む。
 * 目次のサイドバー/タブ切替幅はデザイン通り 999/1000px（site.css のメニュータブ切替 1089px とは別）。
 * タブの位置はメニュータブ直下（top: calc(22% + 67px)）に合わせてある。
 */

  /* カスタムプロパティは :root ではなく .cp-page に閉じる（site.css の :root トークンと
     同名だが値が違うもの（--accent-text 等）があり、:root に置くと site.css 側の値を
     このページ全体で上書きしてしまうため。.cp-page配下（このページの本文全体）だけに
     スコープすれば、position:fixedの目次タブ/パネルも含めDOM上の子孫は問題なく参照できる）。 */
  .cp-page {
    --bg: #fbfaf7; --surface: #ffffff; --sub: #f3efe7; --text: #1f2429;
    --line: #ebe7df; --line-strong: #d9d3c8;
    --accent: #e8801b; --accent-text: #9a5000; --btn: #f39436; --btn-hover: #f7aa5c;
    --strong: #b23a26; --hotel: #1c64d1; --unc: #fcecc4;
    --container: 78em;     /* 1440px表示で左右余白が約96px */
    --toc: 17.5em; --gap: 2em;
    --pad: clamp(20px, 4.5vw, 72px);  /* 既存サイトの .wrap と同じ左右パディング（ヘッダー・フッター用） */
    --sc-bg: #fdf1e0; --sc-ink: #a8570a;   /* セクション識別色（section要素でstyle変数を上書き） */
    background: var(--bg); color: var(--text); font-family: 'Noto Sans JP','Hiragino Sans',sans-serif; -webkit-font-smoothing: antialiased;
    font-size: 16px; line-height: normal;  /* デザイン(16px基準・line-height未指定)に合わせる。site.css の body は 15px/1.75 */
  }
  /* 通常の日本語折り返し（禁則は line-break: strict）。文節単位の改行指定は使わない */
  :where(.cp-page) main, .cp-pg { word-break: normal; overflow-wrap: break-word; line-break: strict; }
  :where(.cp-page) h1, :where(.cp-page) h2, :where(.cp-page) h3 { text-wrap: balance; margin: 0; }
  :where(.cp-page) img { max-width: 100%; }

  /* 1つのコンテナ。全ブロックはこの中で width:100% */
  .cp-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); box-sizing: border-box; }
  /* 目次と本文は同じ grid 行から始める。冒頭との間隔は列ごとではなく grid 自体に持たせ、
     先頭セクションの上パディングを外して両列の先頭を同じ y に揃える */
  .cp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: clamp(24px, 2.4vw, 40px); }
  .cp-main > .cp-sec:first-child { padding-top: 0; }
  @media (min-width: 1000px) { .cp-layout { grid-template-columns: var(--toc) minmax(0, 1fr); gap: var(--gap); align-items: start; } }
  .cp-main { min-width: 0; }
  /* 目次と本文カラムの先頭を揃える（先頭セクションの上余白を外す） */
  .cp-main > .cp-sec:first-child > .cp-h3:first-child { margin-top: 0; }

  /* 文字 */
  /* テキストには幅を指定しない。折り返し位置はカラム（gridの列）と余白だけで決まる */
  .cp-bp { margin: 0 0 1em; font-size: clamp(16px, 0.55vw + 13.6px, 17px); line-height: 1.8; color: var(--text); text-wrap: pretty; }
  .cp-bl { list-style: none; margin: 0 0 1em; padding: 0; }
  .cp-bli { position: relative; padding-left: 20px; margin: 0 0 .5em; font-size: clamp(16px, 0.55vw + 13.6px, 17px); line-height: 1.8; color: var(--text); }
  .cp-bli::before { content: ""; position: absolute; left: 3px; top: .82em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
  .cp-nb { padding-left: 0; }
  .cp-nb::before { display: none; }
  :where(.cp-page) h1 { font-size: clamp(30px, 3.4vw + 17px, 46px); line-height: 1.3; font-weight: 700; }
  :where(.cp-page) h2 { font-size: clamp(20px, 0.38vw + 18.5px, 24px); line-height: 1.45; font-weight: 700; }
  :where(.cp-page) h3 { font-size: clamp(17px, 0.25vw + 15.4px, 19px); line-height: 1.5; font-weight: 700; }
  .cp-sub-title { margin: 8px 0 0; font-size: clamp(18px, 1.1vw + 13.5px, 22px); line-height: 1.5; font-weight: 700; }
  .cp-lbl { font-size: 14px; font-weight: 700; }
  .cp-src { font-size: 15px; line-height: 1.7; color: var(--text); }
  :where(.cp-page) a { color: var(--accent-text); } :where(.cp-page) a:hover { color: var(--accent); }
  .cp-lk { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .cp-lk:hover { color: var(--accent); text-decoration-thickness: 2px; }
  .cp-st { color: var(--strong); font-weight: 700; }
  .cp-tm { color: var(--text); font-weight: 700; }
  .cp-mk { background: linear-gradient(transparent 72%, rgba(232,128,27,.30) 72%); padding: 0 1px; }
  .cp-st.cp-mk { color: var(--strong); }
  .cp-ln, .cp-nw { white-space: nowrap; }
  .cp-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: calc(0.42em - 5.5px); box-shadow: inset 0 0 0 1px rgba(31,36,41,.14); }
  .cp-unc { display: block; margin-top: 10px; background: var(--unc); color: var(--text); font-weight: 500; padding: 10px 14px; border-radius: 6px; }

  /* セクション */
  .cp-sec { padding-block: clamp(22px, 2vw, 32px); border-bottom: 1px solid var(--line); }
  /* 末尾要素の下マージンを打ち消し、どのセクションも区切り線までの余白を同じにする
     （インラインの margin-bottom も含めて打ち消すため !important） */
  .cp-sec > :last-child { margin-bottom: 0 !important; }
  .cp-sec-last { border-bottom: none; }
  .cp-h2row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; box-sizing: border-box;
    background: var(--sc-bg); border-radius: 6px; padding: clamp(8px, 0.8vw, 11px) clamp(10px, 1.1vw, 14px); }
  .cp-h2row h2 { color: var(--sc-ink); }
  .cp-h2ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .cp-h3 { margin: clamp(28px, 2.4vw, 40px) 0 14px; color: var(--sc-ink); }

  /* 注意=黄 / 補足=青 / ポイント=アンバー */
  .cp-note { border-radius: 6px; padding: clamp(14px, 1.4vw, 18px) clamp(16px, 1.8vw, 24px); margin-bottom: clamp(20px, 1.8vw, 24px); box-sizing: border-box; background: var(--n-bg); }
  .cp-note .cp-bp { margin: 0; }
  .cp-note-lbl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--n-ink); margin-bottom: 6px; }
  .cp-note-row { display: flex; gap: 10px; align-items: flex-start; }
  .cp-note-row > span:first-child { padding-top: 4px; flex: 0 0 auto; }

  /* 面・カード */
  .cp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box; }
  /* エリア/ランドマークカードの地色（CityConfig areaTint/landmarkTint。--lm-bg はカード要素に
     インラインstyleで設定される。指定が無いカード（.cp-card単体）は既定のvar(--surface)のまま） */
  .cp-card.cp-lm { background: var(--lm-bg, var(--surface)); }
  /* 空港カード（BKK/DMK）の地色。CityConfig legacyTint bkk/dmk を --ap-bg でインライン設定 */
  .cp-airport-block { background: var(--ap-bg, var(--sub)); }
  .cp-card-pad { padding: clamp(16px, 1.8vw, 30px); }
  .cp-hc { transition: background-color .2s, border-color .2s; }
  .cp-hc:hover { background: #fff7ec; border-color: #f0c48c; color: var(--text); }
  /* color-mix対応ブラウザではアンバー基調のホバー色を明暗トークンから導出する（ダークモード対応。
     --accent/--surfaceは.cp-pageのトークンなので、ダーク側の値を書いていた場合と同じ結果になる）。
     非対応ブラウザは直前の固定値（ライト配色）にフォールバックする。 */
  @supports (color: color-mix(in srgb, red, blue)) {
    .cp-hc:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
  }
  .cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 6px; background: var(--btn); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: background-color .2s; }
  .cp-btn:hover { background: var(--btn-hover); color: #fff; }
  .cp-btn-line { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--accent-text); font-size: 16px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
  .cp-badge { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--b-bg, var(--sub)); color: var(--b-ink, var(--text)); white-space: nowrap; }

  /* 段組み（数だけ切り替える。760px以上=タブレット以上、759px以下=モバイル1列） */
  .cp-grid { display: grid; gap: clamp(12px, 1.4vw, 24px); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 760px) {
    /* 季節カードは3枚が横1列 */
    .cp-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 空港BKK/DMK・写真付きカード（エリア・ランドマーク）・ガイドは2列 */
    .cp-g2, .cp-cards, .cp-g2-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* 画像 */
  .cp-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
  .cp-ar32 { aspect-ratio: 3 / 2; } .cp-ar43 { aspect-ratio: 4 / 3; } .cp-ar1610 { aspect-ratio: 16 / 10; } .cp-ar169 { aspect-ratio: 16 / 9; }
  .cp-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .cp-figcap { font-size: 14px; line-height: 1.6; color: var(--text); }
  .cp-svgfig { margin: 0 0 20px; }
  /* SVG図解（季節/エリア地図/空港ルート）は原稿画像側に暗色の線画・文字を前提に作られており、
     ダークモードでvar(--bg)を暗くすると視認できなくなる（線が背景に溶ける）。図はテーマに関わらず
     常時ライトな台紙の上に置く（意図的な「紙面」表現。SVG自体の色を反転できないため） */
  .cp-svgimg { display: block; width: 100%; height: auto; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: #fbfaf7; }

  /* 冒頭 */
  .cp-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .cp-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
  .cp-title-block { padding: 16px 0 22px; }
  .cp-title-head { padding: 6px 0 16px; border-bottom: 3px solid var(--accent); }
  .cp-title-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .12em; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
  .cp-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; }
  .cp-title-row h1 { font-weight: 900; }
  .cp-title-en { font-size: clamp(18px, 1.6vw + 10px, 28px); font-weight: 700; letter-spacing: .14em; color: var(--accent-text); text-transform: uppercase; }
  .cp-title-th { display: none; font-size: clamp(14px, .6vw + 10px, 17px); font-weight: 400; color: var(--accent-text); }
  @media (min-width: 760px) { .cp-title-th { display: inline; } }
  .cp-title-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-top: 14px; }
  .cp-title-foot .cp-sub-title { flex: 1 1 100%; margin: 0; }
  @media (min-width: 760px) { .cp-title-foot .cp-sub-title { flex: 1 1 0; min-width: 0; } }
  .cp-meta { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 14px; line-height: 1.6; color: var(--text); white-space: nowrap; }
  .cp-hero { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .cp-hero-side { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 3.2 / 1; }
  .cp-hero-side .cp-fig, .cp-hero > .cp-fig { min-width: 0; }
  /* 右側2枚は縦横比を固定せず、グリッドが決めた高さいっぱいに画像を広げる（キャプション行数差を吸収）。
     WebKitはflexでの置換要素(img)の伸長が不安定なため、grid-template-rows: 1fr auto で画像行の高さを直接確定させる */
  .cp-hero-side .cp-fig { display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 0; }
  .cp-hero-side .cp-fig .cp-img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; }
  @media (min-width: 760px) {
    .cp-hero { grid-template-columns: 2fr 1fr; aspect-ratio: 9 / 4; }
    .cp-hero > .cp-fig { display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 0; }
    .cp-hero > .cp-fig > .cp-img { width: 100%; height: 100%; min-height: 0; object-fit: cover; aspect-ratio: auto; }
    .cp-hero-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: auto; height: 100%; }
  }
  /* 概略図はカラム幅いっぱい（SVG内の文字が読める大きさになる）。リンク一覧はその下で自動的に折り返す */
  .cp-intro-box { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; align-items: start; }
  /* 図は広い列に、リンク一覧は右の細い列に。狭い幅では縦積み */
  @media (min-width: 1280px) { .cp-intro-box { grid-template-columns: minmax(0, 1fr) minmax(0, 15em); gap: 24px; } }
  .cp-arealinks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); min-width: 0; }
  .cp-arealinks > .cp-lbl { grid-column: 1 / -1; }
  .cp-figsrc { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
  .cp-arealink { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.5; box-sizing: border-box; }
  .cp-arealink span { flex: 1; min-width: 0; }

  /* 目次 */
  .cp-toc { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-sizing: border-box; overflow: hidden; }
  /* 目次見出し帯・モバイルタブの青(#2b73d9)×白文字はテーマ非依存の固定色(ダークでも同色で維持、2026-09-17) */
  .cp-toc-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 15px; font-weight: 700; background: #2b73d9; color: #fff; border-bottom: 2px solid #2b73d9; }
  .cp-toc ul { list-style: none; margin: 0; padding: 0; }
  .cp-toc a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 16px; font-weight: 700; }
  .cp-toc > ul > li:first-child > a { border-top: none; }
  .cp-toc a:hover { background: #fdf1e0; color: var(--text); }
  @supports (color: color-mix(in srgb, red, blue)) {
    .cp-toc a:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  }
  .cp-toc-num { font-size: 13px; font-weight: 700; color: var(--accent-text); letter-spacing: .06em; min-width: 1.6em; }
  .cp-toc-arrow { margin-left: auto; }
  .cp-toc-sub { display: none; }
  @media (min-width: 1000px) {
    .cp-toc { position: sticky; top: 24px; overflow: visible; padding-bottom: 6px; }
    .cp-toc a { align-items: baseline; min-height: 0; padding: 8px 12px; margin: 2px 6px 0; border-top: none; border-radius: 6px; font-size: 15px; line-height: 1.5; }
    .cp-toc-arrow { display: none; }
    .cp-toc .cp-toc-sub { display: block; margin: 0 6px 4px 30px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
    .cp-toc-sub a { font-size: 14px; font-weight: 400; padding: 4px 10px; margin: 0; }
  }

  /* 目次（モバイル版。1000px未満はインライン目次を隠し、右端タブ→スライドインパネルに置き換える。
     形・挙動は本番ヘッダーのモバイルメニュー（assets/css/site.css .mobile-menu-tab/.mobile-menu-panel）に合わせる） */
  .cp-toc-tab { display: none; }
  .cp-toc-panel { display: none; }
  @media (max-width: 999px) {
    .cp-toc { display: none; }
    .cp-toc-tab {
      display: flex; align-items: center; justify-content: center;
      position: fixed; right: 0; top: calc(22% + 67px); z-index: 70;
      writing-mode: vertical-rl; text-orientation: mixed;
      height: 118px; width: 31px; padding: 0 7px; border: none; border-radius: 6px 0 0 6px;
      background: #2b73d9; color: #fff; font-family: inherit; font-size: 12px; font-weight: 700;
      letter-spacing: .1em; cursor: pointer; box-shadow: 0 4px 14px rgba(20,24,30,.2);
    }
    .cp-toc-panel {
      display: block; position: fixed; inset: 0; z-index: 65; width: 100%;
      /* var(--surface)は.cp-pageのダークトークン上書きで自動的に暗色化される */
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      overflow-y: auto; transform: translateX(100%); transition: transform .28s ease; pointer-events: none;
    }
    .cp-toc-panel.cp-is-open { transform: translateX(0); pointer-events: auto; }
    .cp-toc-panel-inner { padding: 26px 22px 48px; }
    .cp-toc-panel .cp-toc-head { border-radius: 6px; margin-bottom: 4px; }
    .cp-toc-panel-list { list-style: none; margin: 0; padding: 0; }
    .cp-toc-panel-list > li > a { display: flex; align-items: center; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 16px; font-weight: 700; }
    .cp-toc-panel-list .cp-toc-sub { display: block; list-style: none; margin: 0 0 4px 14px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
    .cp-toc-panel-list .cp-toc-sub a { display: flex; align-items: center; padding: 10px 4px; border-bottom: none; font-size: 15px; font-weight: 400; color: var(--text); text-decoration: none; }
  }
  @media (max-width: 999px) and (prefers-reduced-motion: reduce) {
    .cp-toc-panel { transition: none; }
  }

  /* 今日の値 */
  /* 情報パネル（C案・要約バー型）。panels/PanelC.cp-dc.cp-html と同一の作り */
  .cp-pc-bar, .cp-pc-list { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; box-sizing: border-box; }
  .cp-pc-list { margin-top: clamp(14px, 1.6vw, 20px); }
  .cp-pc-cap { display: flex; align-items: center; gap: 8px; padding: clamp(10px, 1.1vw, 14px) clamp(14px, 1.5vw, 20px);
    font-size: clamp(15px, 0.4vw + 13.5px, 16px); font-weight: 700; background: var(--g-bg); color: var(--g-ink); }
  .cp-pc-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); }
  @media (min-width: 900px) { .cp-pc-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .cp-pc-item { background: var(--surface); padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.5vw, 20px);
    display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
  .cp-pc-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line-strong); }
  @media (min-width: 760px) { .cp-pc-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cp-pc-row { background: var(--surface); padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 20px);
    display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; min-width: 0; }
  /* タイル内の要素（PanelC の .cp-lbl / .cp-row / .cp-val / .cp-unit / .cp-note / .cp-badge と同値） */
  .cp-pc-lbl { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--pcl, var(--text)); }
  .cp-pc-vrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
  .cp-pc-val { font-weight: 800; line-height: 1.15; white-space: nowrap; }
  .cp-pc-item .cp-pc-val { font-size: clamp(24px, 3vw + 12px, 40px); white-space: normal; }
  .cp-pc-row .cp-pc-val { font-size: clamp(17px, 0.5vw + 15px, 19px); line-height: 1.4; white-space: normal; }
  /* 取得失敗の文言は数値の大きさで出さない（site.css の .stat-value-sm 相当） */
  .cp-pc-item .cp-pc-val.cp-pc-val-na { font-size: 18px; font-weight: 700; line-height: 1.4; }
  .cp-pc-unit { font-size: 14px; font-weight: 700; margin-left: 4px; white-space: nowrap; }
  .cp-pc-note { font-size: 14px; line-height: 1.5; color: var(--text); }
  @media (max-width: 559px) { .cp-pc-item .cp-pc-note { font-size: 13px; } }
  .cp-pc-row .cp-pc-note { grid-column: 2; }
  /* カード的なブロックの本文は一律14px（ラベル・注記は13px以上を維持）。
     本文カラムの通常の段落（17px/16px）は対象外 */
  .cp-card .cp-bp, .cp-card .cp-bli, .cp-lm .cp-bp, .cp-lm .cp-bli, .cp-gcard .cp-bli, .cp-subcard .cp-bp, .cp-subcard .cp-bli,
  .cp-klook .cp-bp, .cp-cta .cp-bp, .cp-airport-block .cp-bp, .cp-airport-block .cp-bli,
  .cp-mcard .cp-bp { font-size: 14px; line-height: 1.75; }
  /* 季節カード: 上部に幅いっぱいの色面ラベル、本文14px（ピル型は使わない） */
  .cp-season { list-style: none; border-radius: 6px; overflow: hidden; min-width: 0; background: var(--s-bg); }
  .cp-season-cap { padding: 8px clamp(10px, 1vw, 14px); font-size: 15px; font-weight: 700; color: #ffffff; background: var(--s-ink); }
  .cp-season-body { padding: clamp(10px, 1.1vw, 14px) clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 16px);
    font-size: 14px; line-height: 1.75; color: var(--text); }
  .cp-pc-badge { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
  .cp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px clamp(14px, 1.4vw, 20px); background: var(--sub); }

  /* エリア */
  .cp-fact-lbl { display: flex; align-items: center; gap: 6px; color: var(--ac-ink, var(--accent-text)); margin-bottom: 8px; }
  /* 最寄り駅: カード地色と同色相の一段明るい面。見出しも同色相の濃色（既定のベージュは使わない） */
  .cp-stations { background: var(--st-bg, var(--sub)); border-radius: 6px; padding: clamp(14px, 1.4vw, 20px); margin-top: 6px; }
  .cp-stations .cp-fact-lbl { color: var(--st-ink, var(--accent-text)); }
  .cp-st-plain { font-size: 14px; line-height: 1.7; color: var(--text); }
  .cp-st-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .cp-st-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }

  /* ランドマーク */
  .cp-lm { display: flex; flex-direction: column; min-width: 0; }
  .cp-lm-media { border-radius: 6px 6px 0 0; }
  .cp-lm-icon { aspect-ratio: 16 / 9; border-radius: 6px 6px 0 0; display: flex; align-items: center; justify-content: center; background: var(--l-bg); }
  .cp-lm-body { display: flex; flex-direction: column; flex: 1; padding: clamp(16px, 1.6vw, 22px); }
  .cp-lm-area { display: flex; gap: 8px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
  .cp-lm-btn { margin-top: 14px; }

  /* 空港 */
  .cp-ap-head { display: flex; align-items: center; gap: 10px; padding: 14px clamp(14px, 1.6vw, 22px); background: var(--sc-bg); border-radius: 6px 6px 0 0; }
  .cp-ap-head h3 { flex: 1; margin: 0; }
  .cp-ap-body { padding: clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 26px) 8px; }
  .cp-mode { padding: 16px 0 4px; border-top: 1px solid var(--line); }
  /* 市内の主な交通手段: 淡色地のカードを並べる（1列 → 2列760px〜 → 3列1200px〜） */
  .cp-mgrid { display: grid; gap: 20px; margin-bottom: 8px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1200px) { .cp-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .cp-mcard { background: var(--sub); border-radius: 6px; min-width: 0;
    padding: clamp(18px, 1.9vw, 28px) clamp(18px, 1.9vw, 28px) clamp(16px, 1.8vw, 26px); }
  /* 上端全幅の色帯や左ボーダーではなく、当時と同じ「短い四角」 */
  .cp-mbar { display: block; width: 44px; height: 6px; border-radius: 2px; margin-bottom: 14px; background: var(--m-bar); }
  .cp-mcard .cp-bp { margin: 0; }
  /* カード見出し（交通手段・空港カード）。16〜18px の太字 */
  /* 事務的な補足の注記（色地の枠にしない。本文より控えめだが4.5:1以上） */
  .cp-note-small { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-mute); }
  .cp-mtitle { font-size: clamp(16px, 0.25vw + 14.4px, 18px); line-height: 1.5; font-weight: 700; margin: 0 0 8px; color: var(--text); }
  /* 路線ごとの小見出し（本文14pxと区別できる15px太字。路線色の四角は inline() が付ける） */
  .cp-mline { font-size: 15px; line-height: 1.6; font-weight: 700; margin: 14px 0 3px; color: var(--text); }
  .cp-mcard .cp-bp + .cp-bp { margin-top: 12px; }
  .cp-dl { margin: 0 0 16px; padding: 0; border-bottom: 1px solid var(--line); }
  .cp-dl li { list-style: none; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line); }
  @media (min-width: 760px) { .cp-dl li { grid-template-columns: 13em minmax(0, 1fr); gap: 16px; } }
  .cp-dl-key { font-size: clamp(16px, 0.55vw + 13.6px, 17px); font-weight: 700; line-height: 1.7; }
  .cp-bus li { list-style: none; display: flex; align-items: center; gap: 10px; background: var(--sub); border-radius: 6px; padding: 10px 12px; min-width: 0; }
  .cp-bus { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin: 0 0 16px; padding: 0; }
  @media (min-width: 760px) { .cp-bus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* CTA・Klook */
  .cp-cta { display: flex; flex-direction: column; align-items: stretch; gap: 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--cta-bg, var(--surface)); padding: clamp(16px, 1.6vw, 24px); margin: 4px 0 12px; box-sizing: border-box; }
  .cp-cta-l { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
  .cp-cta-ico { width: 52px; height: 52px; border-radius: 6px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .cp-cta-name { font-size: 18px; font-weight: 700; }
  .cp-cta-dom { font-size: 14px; }
  @media (min-width: 760px) { .cp-cta { flex-direction: row; align-items: center; } .cp-cta .cp-btn { flex: 0 0 auto; } }
  .cp-klook { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--klook-bg, var(--surface)); margin-top: 12px; box-sizing: border-box; }
  .cp-klook-foot { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 14px; }
  @media (min-width: 760px) { .cp-klook-foot { flex-direction: row; align-items: center; } }
  .cp-pr { font-size: 14px; font-weight: 700; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); }

  /* ガイド */
  .cp-gcard { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: clamp(14px, 1.4vw, 20px); color: var(--text); text-decoration: none; }
  .cp-gtile { width: 40px; height: 40px; border-radius: 6px; background: var(--g-bg); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .cp-gttl { flex: 1; min-width: 0; font-size: clamp(16px, 0.55vw + 13.6px, 17px); font-weight: 700; line-height: 1.6; color: var(--g-ink); }
  .cp-gdesc { flex-basis: 100%; }
  .cp-back-row { display: flex; margin-top: 24px; }
  .cp-back-row .cp-btn-line { width: 100%; }

  @media (min-width: 760px) { .cp-back-row { justify-content: flex-end; } .cp-back-row .cp-btn-line { width: auto; } }

  /* ==============================================================
     ダークモード（<html data-theme="dark">。site.js initThemeToggle()参照）。
     1) 構造トークン（--bg/--surface/--text等）は.cp-pageで一括上書き（site.css :root[data-theme="dark"]の
        値に合わせる）。--sc-bg/--n-bg/--g-bg/--b-bg/--s-bg/--l-bg/--st-bg/--ac-bg/--ap-bg/--lm-bg/--cta-bg/
        --klook-bg/--pcl はCityContent.php側で要素へのインラインstyleとして値（CityConfig/PALETTE由来の
        固定色）が設定されるため、同じプロパティ名を.cp-pageで再定義しても対象要素のインラインが常に勝ち
        上書きできない。そのため2)ではプロパティ自体の再定義ではなく、それを実際に消費している
        background/colorの宣言側でcolor-mix()により都度ダーク値を導出する（PHP側にダーク用の色を
        二重管理させない）。
     ============================================================== */
  :root[data-theme="dark"] .cp-page {
    --bg: #14171a; --surface: #1b1f24; --sub: #1f242a; --text: #e9ecef;
    --line: #2c323a; --line-strong: #3b434d;
    --accent: #f5a13f; --accent-text: #f5a13f; --btn: #f39436; --btn-hover: #e07d17;
    --strong: #ff8a7a; --hotel: #1369e5; --unc: #3a2c14;
    --sc-bg: #172533; --sc-ink: #8fb4d9; /* 既定値（各sectionは実際にはinlineで上書きされる） */
  }
  /* 2) 消費箇所ごとのcolor-mix導出。非対応ブラウザは1)適用前のライト値のまま表示される
     （フォールバックとして許容。挙動が壊れるわけではなく色がライトのままになるだけ）。
     混合比はscratchpad contrast.pyで実測し、PALETTE 7色すべてで文字色×地色が4.5:1以上、
     地色×本文文字（var(--text)）は8:1以上になることを確認済み。 */
  @supports (color: color-mix(in srgb, red, blue)) {
    :root[data-theme="dark"] .cp-page .cp-h2row,
    :root[data-theme="dark"] .cp-page .cp-ap-head {
      background: color-mix(in srgb, var(--sc-bg) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-h2row h2,
    :root[data-theme="dark"] .cp-page .cp-h3 {
      color: color-mix(in srgb, var(--sc-ink) 48%, white);
    }
    /* 空港カードのコード表示（BKK/DMK）。CityContent.phpがcolor:var(--sc-ink)を直接インライン指定
       しているため、外側の.cp-airport-blockスコープに絞ったうえで!importantでのみ上書き可能 */
    :root[data-theme="dark"] .cp-page .cp-airport-block .cp-lbl {
      color: color-mix(in srgb, var(--sc-ink) 48%, white) !important;
    }
    :root[data-theme="dark"] .cp-page .cp-note {
      background: color-mix(in srgb, var(--n-bg) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-note-lbl {
      color: color-mix(in srgb, var(--n-ink) 48%, white);
    }
    :root[data-theme="dark"] .cp-page .cp-badge {
      background: color-mix(in srgb, var(--b-bg, var(--sub)) 18%, var(--surface));
      color: color-mix(in srgb, var(--b-ink, var(--text)) 48%, white);
    }
    :root[data-theme="dark"] .cp-page .cp-pc-cap,
    :root[data-theme="dark"] .cp-page .cp-gtile {
      background: color-mix(in srgb, var(--g-bg) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-pc-cap,
    :root[data-theme="dark"] .cp-page .cp-gttl {
      color: color-mix(in srgb, var(--g-ink) 48%, white);
    }
    :root[data-theme="dark"] .cp-page .cp-fact-lbl {
      color: color-mix(in srgb, var(--ac-ink, var(--accent-text)) 48%, white);
    }
    :root[data-theme="dark"] .cp-page .cp-stations {
      background: color-mix(in srgb, var(--st-bg, var(--sub)) 18%, var(--surface));
    }
    /* ライトと同じく最寄り駅ブロック内のラベルは駅色(--st-ink)。上の .cp-fact-lbl 一般形(0,3,0)が
       ライト側の .cp-stations .cp-fact-lbl(0,2,0)に勝ってエリア色に化けるため専用に上書きする */
    :root[data-theme="dark"] .cp-page .cp-stations .cp-fact-lbl {
      color: color-mix(in srgb, var(--st-ink, var(--accent-text)) 40%, white);  /* 40%: 駅色6件×地色で最小4.82:1(chinatown)。48%だと4.16 */
    }
    :root[data-theme="dark"] .cp-page .cp-lm-icon {
      background: color-mix(in srgb, var(--l-bg) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-season {
      background: color-mix(in srgb, var(--s-bg) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-card.cp-lm {
      background: color-mix(in srgb, var(--lm-bg, var(--surface)) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-airport-block {
      background: color-mix(in srgb, var(--ap-bg, var(--sub)) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-cta {
      background: color-mix(in srgb, var(--cta-bg, var(--surface)) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-klook {
      background: color-mix(in srgb, var(--klook-bg, var(--surface)) 18%, var(--surface));
    }
    :root[data-theme="dark"] .cp-page .cp-cta-ico {
      background: color-mix(in srgb, var(--c-bg) 20%, var(--surface));
    }
    /* 「現在の状況」「基本情報」タイルのラベル文字（両替=緑/天気=青/PM2.5=紫/紫外線=琥珀 等）。
       --pclはCityContent.phpが各タイルにインラインで設定するcustom property（PHP側にダーク値は持たない） */
    :root[data-theme="dark"] .cp-page .cp-pc-lbl {
      color: color-mix(in srgb, var(--pcl, var(--text)) 44%, white);
    }
  }