:root {
  /* ==========================
     0) 基本寸法（色と別管理）
     ========================== */
  --H1_HEIGHT: 54px;
  --H2_HEIGHT: 48px;
  --CONTENT_MAX_WIDTH: 640px;
  --CARD_WIDTH_KEY: var(--CONTENT_MAX_WIDTH);

  --CARD_RADIUS: 12px;
  --CARD_GAP: 10px;
  --CARD_PADDING_Y: 8px;
  --CARD_PADDING_X: 10px;

  --AVATAR_SIZE: 44px;
  --ACTION_TAP_MIN: 32px;
  --CARD_ICON_SIZE: 18px;

  /* ==========================
     1) パレット（固定色：名前付き）
     ========================== */
  --P_TWITTER_BLUE: #1da1f2;

  --P_NAVY_DARK: #121b24; /* 暗いネイビー */
  --P_NAVY_BASE: #1b2936; /* 基本のネイビー */
  --P_WHITE_BASE: #fafafa; /* 基本のホワイト */

  --P_TEXT_BLACK: #0f1419; /* 基本の黒いテキストカラー */
  --P_TEXT_WHITE: #e6eaee; /* 基本の白いテキストカラー */
  --P_TEXT_DIM: #8c8c8c; /* 薄い黒（ライト用） */

  --P_LIKE_RED: #f62e36;
  --P_BOOKMARK_BLUE: #2a7bff;

  --P_LIGHT_H2_GRAY: #f1f1f1; /* ライトH2グレー */
  --P_LIGHT_BG_GRAY: #eaecf0; /* ライト背景グレー */
  --P_CARD_SHADOW: rgba(0, 0, 0, 0.12); /* カードの影の色 */

  /* ダーク用リンク（指定：やや明るい・彩度控えめ） */
  --P_LINK_DARK: #78aee8;

  /* ==========================
     2) セマンティック（用途別トークン）
     ここだけを見れば配色が分かる、がゴール
     ========================== */

  /* --- 全体 --- */
  --COLOR_BG: var(--I);
  --COLOR_CARD_BG: var(--M);
  --COLOR_TEXT: var(--N);
  --COLOR_TEXT_SUB: var(--K);
  --COLOR_MUTED: rgba(0, 0, 0, 0.45);

  /* --- H1 --- */
  --COLOR_HEADER_BG: var(--A);
  --COLOR_HEADER_TEXT: var(--N);

  /* --- H2/H3（帯） --- */
  --COLOR_STRIP_BG: var(--D);
  --COLOR_STRIP_TEXT: var(--E);
  --COLOR_STRIP_BORDER: var(--F);

  /* --- カード境界（方針：ライト=影、ダーク=影なし/枠なし） --- */
  --CARD_SHADOW: 0 1px 3px var(--P_CARD_SHADOW);
  --COLOR_CARD_BORDER: transparent;

  /* --- リンク（本文中URL/ハッシュタグ/メンション） --- */
  --COLOR_LINK: var(--P_TWITTER_BLUE);

  /* --- いいね/ブクマ（点灯） --- */
  --LIKE_ACTIVE_COLOR: var(--P);
  --BOOKMARK_ACTIVE_COLOR: var(--Q);

  /* --- サイコロ --- */
  --COLOR_DICE_FACE: var(--G); /* サイコロ本体 */
  --COLOR_DICE_LINE: var(--H); /* 枠線＋目 */
  /* （注）H2/H3ボタン類の色は既存どおり color: inherit でOK */

  /* --- オーバーレイ共通（メニュー/検索/日付ジャンプ/設定） --- */
  --OVERLAY_BACKDROP: rgba(0, 0, 0, 0.55);
  --MODAL_BG: var(--A);
  --MODAL_TEXT: var(--P_TEXT_WHITE);
  --MODAL_BORDER: var(--F);

  --FIELD_BG: var(--M);
  --FIELD_TEXT: var(--N);
  --FIELD_PLACEHOLDER: rgba(0, 0, 0, 0.45);

  --BTN_GHOST_BG: var(--O);
  --BTN_GHOST_TEXT: var(--M);
  --BTN_GHOST_BORDER: var(--F);
  --BTN_PRIMARY_BG: var(--M);
  --BTN_PRIMARY_TEXT: var(--N);
  --BTN_PRIMARY_BORDER: var(--F);
  --BTN_NEUTRAL_BG: var(--M);
  --BTN_NEUTRAL_TEXT: var(--N);
  --BTN_NEUTRAL_BORDER: var(--F);

  --SETTINGS_BG: rgba(0, 0, 0, 0.82);

  --MENU_HEADER_BG: var(--A);
  --MENU_BODY_BG: var(--I);
  --MENU_FOOTER_BG: var(--A);

  --MENU_TEXT: var(--R);
  --MENU_BAR_TEXT: var(--N); /* ヘッダ/フッタ（帯）の文字 */
  --MENU_BODY_TEXT: var(--N); /* メニュー項目（本文）の文字 */
  --MENU_BORDER: var(--F);

  /* --- Share dialog (root) --- */
  --SHARE_BG: var(--A); /* 共有ウィンドウの色 */
  --SHARE_BORDER: var(--F); /* 枠線 */
  --SHARE_LABEL: var(--R); /* 左肩ラベル / × */
  --SHARE_ACTION_BG: var(--M); /* アクションピル背景 */
  --SHARE_ACTION_TEXT: var(--N); /* アクションピル文字 */
  --SHARE_ACTION_BORDER: var(--F);

  /* Settings dialog colors (default) */
  --SETTINGS_HEADER_BG: var(--A);
  --SETTINGS_BODY_BG: var(--I);
  --SETTINGS_FOOTER_BG: var(--A);

  /* Settings dialog text (default) */
  --SETTINGS_BODY_TEXT: var(--N);

  /* Settings section label (e.g. カードの並び順) */
  --SETTINGS_SECTION_LABEL_TEXT: var(--SETTINGS_BODY_TEXT);

  /* Settings option row */
  --SETTINGS_OPTION_BG: var(--M);
  --SETTINGS_OPTION_BORDER: var(--F);
  --SETTINGS_OPTION_BORDER_WIDTH: 1px;

  /* Settings radio control */
  --SETTINGS_RADIO_BORDER: var(--O);
  --SETTINGS_RADIO_BG: transparent;
  --SETTINGS_RADIO_DOT: var(--S);

  /* ==========================
     Master colors A–Z (proposal)
     ※ A〜Z は「上流」：パレット(P_*)だけを見る
    ========================== */
  --A: var(--P_NAVY_DARK); /* H1帯 */
  --B: var(--P_TEXT_WHITE); /* サイトロゴ文字 */
  --C: var(--P_TEXT_WHITE); /* H1系操作ボタン */

  --D: var(--P_LIGHT_H2_GRAY); /* H2/H3帯 */
  --E: var(--P_TEXT_BLACK); /* H2/H3操作ボタン（帯上の文字/アイコン） */
  --F: var(--P_CARD_SHADOW); /* H2/H3下端線/枠線 */

  --G: var(--P_WHITE_BASE); /* サイコロ塗り */
  --H: var(--P_NAVY_DARK); /* サイコロ線/目 */

  --I: var(--P_LIGHT_BG_GRAY); /* カードが並ぶ背景 */
  --J: var(--P_TEXT_DIM); /* 背景上部ラベル */
  --K: var(--P_TEXT_BLACK); /* 年次ラベル */
  --L: var(--P_TEXT_BLACK); /* ありません系 */

  --M: var(--P_WHITE_BASE); /* カード/入力クエリ面 */
  --N: var(--P_TEXT_BLACK); /* 本文/名前など */
  --O: var(--P_TEXT_DIM); /* ID/操作ボタン群/ghost系 */

  --P: var(--P_LIKE_RED); /* いいね点灯 */
  --Q: var(--P_BOOKMARK_BLUE); /* ブクマ点灯 */

  --R: var(--P_TEXT_WHITE); /* 左肩ラベル（メニュー/日付/設定） */
  --S: var(--P_NAVY_DARK); /* ラジオボタンの● */

  /* 未定（将来用）：とりあえず上流として“パレット固定”にして逆流を防ぐ */
  --T: var(--P_TEXT_BLACK);
  --U: var(--P_TEXT_BLACK);
  --V: var(--P_TEXT_BLACK);
  --W: var(--P_TEXT_BLACK);
  --X: var(--P_TEXT_BLACK);
  --Y: var(--P_TEXT_BLACK);
  --Z: var(--P_TEXT_BLACK);

  /* 初期：メニュー表示 / ×非表示 */
  #menu-toggle-btn .h1-icon--close {
    display: none;
  }

  /* 開いているとき：×表示 / メニュー非表示 */
  #menu-toggle-btn.is-open .h1-icon--menu {
    display: none;
  }
  #menu-toggle-btn.is-open .h1-icon--close {
    display: block;
  }
}

/* ==========================
   ダイアログ共通（外殻/オーバーレイ）
   ※HTMLは変えず、既存クラスを束ねて統一する
   ========================== */

/* overlay共通：メニュー/検索/日付/設定 */
.menu-overlay,
.search-overlay,
.date-overlay,
.settings-overlay,
.share-overlay,
.adv-search-overlay {
  position: fixed;
  inset: 0;
  background: var(--OVERLAY_BACKDROP);
  display: none;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  height: 100svh;
}

.menu-overlay.is-open,
.search-overlay.is-open,
.date-overlay.is-open,
.settings-overlay.is-open,
.share-overlay.is-open,
.adv-search-overlay.is-open {
  display: flex;
}

/* modal系（検索/日付/設定）は共通トークン */
.search-dialog,
.date-dialog,
.settings-dialog,
.adv-search-dialog {
  color: var(--MODAL_TEXT);
}

/* ===== Settings: text size ===== */
html.text-sm {
  font-size: 14px;
}
html.text-md {
  font-size: 16px;
}
html.text-lg {
  font-size: 18px;
}

/* ===== Settings: theme ===== */
/* 方針：bodyを直に塗らず、トークン（CSS変数）だけを切り替える */

/* ライト（デフォルト）：:root の値を使う */

/* ブルー */
html.theme-blue {
  --A: var(--P_TWITTER_BLUE); /* H1帯 */
  --D: var(--P_WHITE_BASE); /* H2/H3帯 */
  --S: var(--P_TWITTER_BLUE); /* ラジオボタンの● */
}

/* ダーク */
html.theme-dark {
  --A: var(--P_NAVY_DARK); /* H1帯 */
  --D: var(--P_NAVY_BASE); /* H2/H3帯 */
  --E: var(--P_TEXT_WHITE); /* H2/H3操作ボタン（帯上の文字/アイコン） */
  --I: var(--P_NAVY_DARK); /* カードが並ぶ背景 */
  --J: var(--P_TEXT_WHITE); /* 背景上部ラベル */
  --K: var(--P_TEXT_WHITE); /* 年次ラベル */
  --L: var(--P_TEXT_WHITE); /* ありません系 */
  --M: var(--P_NAVY_BASE); /* カード/入力クエリ面 */
  --N: var(--P_TEXT_WHITE); /* 本文/名前など */
  --S: var(--P_TEXT_WHITE); /* ラジオボタンの● */
}

/* 将来：カスタム（未実装） */
html.theme-custom {
  /* ここに custom 用の上書きを集約する */
}

/* iOS Safari 等の “タップしました” ハイライトをサイト全体で無効化 */
html {
  -webkit-tap-highlight-color: transparent;
}

/* PC: サイコロボタンの押下ハイライトを抑制 */
.h2-dice:active {
  background: transparent;
}

.h2-dice:focus,
.h2-dice:focus-visible {
  outline: none;
  box-shadow: none;
}

/* PC: カード内操作ボタン群の押下/フォーカスの光りを抑制 */
.action-btn:active {
  background: transparent;
}

.action-btn:focus,
.action-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans JP", sans-serif;
  background: var(--COLOR_BG);
  color: var(--COLOR_TEXT);
}

/* ==========================
   画像ビューワ
   ========================== */

.imgv-overlay {
  position: fixed;
  inset: 0;
  height: 100dvh;
  height: 100svh;
  display: none;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.75);
  touch-action: none;
}

.imgv-overlay.is-open {
  display: block;
}

/* 画面全体を「確実に」基準にする（max%の参照先を安定させる） */
.imgv-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* 縦位置の違和感を減らす：常に中心 */
  justify-content: center; /* 常に中心 */
  padding: 16px;
  box-sizing: border-box;
}

/* 画像/動画：常に viewport 内に収める */
.imgv-image,
.imgv-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  will-change: transform, opacity;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 画像ビューワ：読み込み失敗理由 */
.imgv-error {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: min(520px, calc(100% - 32px));
  margin: 0 auto;

  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);

  color: #fff;
  z-index: 4; /* close/nav より下でも、メディアより上 */
}

.imgv-error-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.imgv-error-body {
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0.95;
  white-space: pre-wrap; /* 改行を保つ */
}

/* video特有：controls のため width:auto を維持 */
/* 何もしない（imgと同じ挙動） */

/* スマホ：余白0、ただし “dvh基準”で縦に収める */
@media (max-width: 640px) {
  .imgv-inner {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .imgv-image,
  .imgv-video {
    max-width: 100vw;
    max-height: 100dvh;
  }
}

.imgv-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  z-index: 3; /* ←必須 */
}

.imgv-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.imgv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  z-index: 3; /* ←必須（画像の下に潜らない） */
}
.imgv-prev {
  left: 14px;
}
.imgv-next {
  right: 14px;
}

/* 複数枚サムネ（最大4） */
.media-grid {
  display: grid;
  gap: 2px; /* 白い分割線 */
  margin-top: 8px;
  overflow: hidden; /* 外枠だけ角丸 */
  border-radius: 14px;
  background: #fff; /* gap を白に見せる */
}

/* 2〜4枚は “横長の集合体” */
.media-grid.n-2,
.media-grid.n-3,
.media-grid.n-4 {
  aspect-ratio: 16 / 9;
}

/* 1枚：元メディア比率を尊重（比率はJSが --single-ar で渡す）
   極端比率はJS側でクランプして “Xっぽい”範囲に収める */
.media-grid.n-1 {
  aspect-ratio: var(--single-ar, 1 / 1);
}

.media-grid.n-1 .media-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* 単体 video/gif も “元サムネ比率”にある程度追従（--single-ar があれば優先）
   取れない/未設定のときだけ 16:9 にフォールバック */
.media-grid.has-video.n-1 {
  aspect-ratio: var(--single-ar, 16 / 9);
}

.media-grid.has-video.n-1 .media-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  cursor: zoom-in; /* 画像と揃える */
}

/* セル：箱にぴったり（※ここでは正方形固定しない） */
.media-cell {
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* 2〜4枚は img をセルにフィット */
.media-grid.n-2 .media-thumb,
.media-grid.n-3 .media-thumb,
.media-grid.n-4 .media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* --- 2枚：左右 --- */
.media-grid.n-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* --- 3枚：左でか + 右上下 --- */
.media-grid.n-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "a b"
    "a c";
}
.media-grid.n-3 .media-cell:nth-child(1) {
  grid-area: a;
}
.media-grid.n-3 .media-cell:nth-child(2) {
  grid-area: b;
}
.media-grid.n-3 .media-cell:nth-child(3) {
  grid-area: c;
}

/* --- 4枚：2×2（1,2 / 3,4） --- */
.media-grid.n-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* ▶ オーバーレイ */
.media-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  pointer-events: none;
}

/* ==========================
   H1 / H2 ヘッダー
   ========================== */

/* H1右上（メニュー / ×）操作ボタン：Cクラスタ */
#menu-toggle-btn {
  color: var(--C);
}

.h1 {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--H1_HEIGHT);
  background: var(--COLOR_HEADER_BG);
  color: var(--B);
  z-index: 20;
}

.h1-inner {
  max-width: var(--CARD_WIDTH_KEY);
  height: 100%;
  margin: 0 auto;
  padding-inline: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.h1-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em; /* 任意：9月っぽい締まり */
}

.h1-icon-btn {
  border: none;
  background: transparent;
  color: var(--C);
  font-size: 1.35rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* H1 のSVGアイコン（img） */
.h1-icon-svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* H2: H1 のすぐ下に固定 */
.h2 {
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--H1_HEIGHT);
  height: var(--H2_HEIGHT);
  background: var(--COLOR_STRIP_BG);
  color: var(--COLOR_STRIP_TEXT);
  z-index: 19;
  border-bottom: 1px solid var(--COLOR_STRIP_BORDER);
}

/* CF中だけ：H2は隠して、H3(CFヘッダ)をH2と同じ見た目で表示 */
body.cf-open .h2 {
  display: none;
}

body.cf-open .h3-cf {
  display: block;
  position: fixed;
  inset-inline: 0;
  inset-block-start: var(--H1_HEIGHT);
  height: var(--H2_HEIGHT);
  background: var(--COLOR_STRIP_BG);
  color: var(--COLOR_STRIP_TEXT);
  z-index: 19;
  border-bottom: 1px solid var(--COLOR_STRIP_BORDER);
}

.h2-inner {
  max-width: var(--CARD_WIDTH_KEY);
  height: 100%;
  margin: 0 auto;
  padding-inline: 10px;

  display: flex;
  align-items: center;
}

.h2-side {
  flex: 1;
  display: flex;
  align-items: center;
}

.h2-side-left {
  justify-content: flex-start;
}

.h2-side-right {
  justify-content: flex-end;
}

.h2-center {
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h2-text-btn {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 999px;
}

/* H3（CFヘッダー）は通常は出さない */
.h3-cf {
  display: none;
}

/* CF中でも含めて：サイコロの点/枠はテーマトークンで統一 */
body.cf-open .h2-dice {
  color: var(--COLOR_DICE_LINE);
}

.h2 .dice-svg .dice-face {
  fill: var(--COLOR_DICE_FACE);
  stroke: currentColor; /* 枠線＝COLOR_DICE_LINE */
}

/* 追加：サイコロ回転（タップ時だけ付与するクラスで回す） */
@keyframes dice-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dice-svg.is-spinning {
  transform-origin: 50% 50%;
  animation: dice-spin 250ms linear;
  will-change: transform;
}

/* H2中央サイコロ：背景や押下反応を完全に消す */
.h2-dice {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent; /* 円を消す */
  border: 0;
  padding: 0;
  margin: 0;

  border-radius: 0; /* 円形の当たり判定見えを消す（見た目優先） */
  color: var(--COLOR_DICE_LINE);

  /* iOSのタップ強調を消す */
  -webkit-tap-highlight-color: transparent;
}

/* 押したときも何も起こさない */
.h2-dice:active {
  background: transparent;
}

/* フォーカス枠も出さない（必要なら） */
.h2-dice:focus {
  outline: none;
}
.h2-dice:focus-visible {
  outline: none;
}

.dice-svg {
  color: inherit;
}

.dice-svg {
  width: 32px;
  height: 32px;
  display: block;
}

.year-header {
  margin-top: 24px; /* A: 上 24px */
  margin-bottom: 12px; /* A: 下 12px */
  text-align: center; /* A: 中央寄せ */
  font-size: 1rem; /* 本文より少し大きめ */
  font-weight: 700; /* A: 太字 */
  color: var(--COLOR_TEXT_SUB);
}

/* ==========================
   メイン / カード
   ========================== */

.site-main {
  max-width: var(--CARD_WIDTH_KEY);
  margin: 0 auto;
  padding-inline: 10px;
  /* H1 + H2 の分だけ上に余白を空ける */
  padding-top: calc(var(--H1_HEIGHT) + var(--H2_HEIGHT) + 12px);
  padding-bottom: 40px;
}

.view-caption {
  max-width: var(--CARD_WIDTH_KEY);
  margin: 0 auto;
  padding-inline: 10px;
  padding-top: 8px;
  padding-bottom: 4px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--J);
}

.tweet-list {
  display: flex;
  flex-direction: column;
  gap: var(--CARD_GAP);
}

/* カード本体 */

.card {
  background: var(--COLOR_CARD_BG);
  border-radius: var(--CARD_RADIUS);
  box-shadow: var(--CARD_SHADOW);
  padding: var(--CARD_PADDING_Y) var(--CARD_PADDING_X);
  border: 1px solid var(--COLOR_CARD_BORDER);
}

/* 左にアバター、右に本文一式 */

.card-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
}

/* アバター（今はプレースホルダの丸） */

.card-avatar {
  width: var(--AVATAR_SIZE);
  height: var(--AVATAR_SIZE);
  border-radius: 999px;
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 4px;
  overflow: hidden;
}

.card-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 右側（メインカラム） */

.card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* メタ情報（名前 / @id / 時刻） */

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-meta-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-name-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  font-size: 0.8rem;
}

/* ===== collection manifest warning badge ===== */
.card-collection-warn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 14px;
  height: 14px;
  padding: 0 4px;

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;

  border-radius: 999px;

  /* 目立たせすぎない注意色 */
  background: var(--COLOR_MUTED);
  color: var(--M);

  margin-left: 2px;
  flex: none; /* 折り返し・伸縮事故防止 */
}
/* ===== /collection manifest warning badge ===== */

.card-display-name {
  font-weight: 600;
}

.card-handle {
  color: var(--O);
  font-size: 0.75rem;
}

.card-dot {
  color: var(--O);
}

.card-time {
  color: var(--O);
  font-size: 0.75rem;
}

/* ケバブ（まだ動作なし） */

.card-kebab-btn {
  border: none;
  background: transparent;
  color: var(--O);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 本文 */

.card-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere; /* ←追加（最重要） */
  word-break: break-word; /* ←追加（保険） */
}

/* ツイートなしのメッセージ */

.empty-day-message {
  margin-top: 16px; /* 上に少しだけ余白 */
  text-align: center; /* 横方向センター */
  font-size: 0.9rem; /* .card-text と同じ */
  line-height: 1.6; /* .card-text と同じ */
  color: var(--L);
}

/* メディア */

.card-media-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 6px;
}

.card-media-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 6px;
  font-size: 0.7rem;
  border-radius: 999px;
  background: #eeeeee;
  color: #555555;
}

/* YouTube サムネカード */
.yt-card {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.yt-thumb {
  position: relative;
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.yt-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yt-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--COLOR_MUTED);
}

.yt-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.yt-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 4px;
}

.yt-title {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}

.yt-sub {
  font-size: 0.75rem;
  color: var(--COLOR_MUTED);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* アクション（まだ動作なし） */

.card-actions {
  margin-top: 6px;
  display: flex;
  gap: 8px; /* ボタン間のすき間 */
}

.card-action-btn {
  min-width: var(--ACTION_TAP_MIN);
  height: var(--ACTION_TAP_MIN);
  border-radius: 999px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--O);
}

/* もしあとで SVG を使うとき用のスタイルも先に用意しておく */
.card-action-btn svg {
  width: var(--CARD_ICON_SIZE);
  height: var(--CARD_ICON_SIZE);
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* いいね ON */
.card-action-like[aria-pressed="true"] svg,
.card-action-like[aria-pressed="true"] svg * {
  fill: var(--LIKE_ACTIVE_COLOR);
  stroke: var(--LIKE_ACTIVE_COLOR);
}

/* ブックマーク ON */
.card-action-bookmark[aria-pressed="true"] svg,
.card-action-bookmark[aria-pressed="true"] svg * {
  fill: var(--BOOKMARK_ACTIVE_COLOR);
  stroke: var(--BOOKMARK_ACTIVE_COLOR);
}

/* スクロール用の軽い余白 */

body {
  overscroll-behavior-y: contain;
}

/* ==========================
   CFビュー（カードフォーカス用）
   ========================== */

.cf-view.is-active {
  transform: translateX(0); /* 画面内にスライドイン */
  visibility: visible;
  pointer-events: auto;
}

/* CFビューの外枠：幅100%（スクロールバーを画面右端に寄せる） */
/* CFビュー：H1+H3の下から出る（全画面では覆わない） */
.cf-view {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--H1_HEIGHT) + var(--H2_HEIGHT));
  bottom: 0;
  background: var(--COLOR_BG);
  transform: translateX(100%);
  transition: transform 0.2s ease-out;
  overflow: hidden;
  z-index: 18; /* H1(20)/H2(19)/H3(19) の下 */

  display: none; /* 初期状態では存在させない（初回フラッシュ根治） */
}

.cf-view-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* CF中身の横幅制限（旧 cf-view-inner 相当） */
.cf-center {
  max-width: var(--CARD_WIDTH_KEY);
  margin: 0 auto;
  padding-inline: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* CFヘッダー行（◀︎ / 状態テキスト / ▶︎） */
.cf-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;

  flex: 0 0 auto;
}

/* ヘッダーのボタン：とりあえず C案（アイコンのみ・無装飾） */
.cf-nav-btn {
  border: none;
  background: transparent;
  color: var(--COLOR_TEXT);
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 進むボタンは当面使わないので、デフォルト非表示にしておく */
.cf-nav-btn-forward {
  visibility: hidden; /* 将来 redo 実装時に visible にする */
}

/* 状態テキスト（このツイート / 関連するツイート / 検索結果） */
.cf-caption-text {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  color: var(--J);
}

/* CFビュー内のメイン領域（ここだけスクロール） */
.cf-main {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  padding-top: 8px;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
}

/* カードコンテナ：縦並びだが、今は1枚だけ */
.cf-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--CARD_GAP);
}

/* CF用ダミーカードにだけ少し余白を足す（好み次第で後調整） */
.cf-card-dummy {
  margin-top: 8px;
}

/* ==========================
   ハンバーガーメニュー
   ========================== */

.menu-overlay {
  z-index: 1000;
}

.menu-overlay.is-open {
  display: flex;
}

.menu-panel {
  display: flex;
  flex-direction: column;
  max-height: min(82svh, 720px);
  padding: 0;
}

.menu-bar {
  padding: 14px;
}

.menu-bar-top {
  background: var(--MENU_HEADER_BG);
}

.menu-bar-bottom {
  background: var(--MENU_FOOTER_BG);
}

.side-menu-header {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--MENU_TEXT);
}

.menu-body {
  padding: 10px 14px;
  background: var(--MENU_BODY_BG);
  color: var(--MENU_BODY_TEXT);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.side-menu-item {
  border: none;
  background: transparent;
  color: inherit;

  padding: 10px 8px;
  border-radius: 8px;
  font-size: 1rem;

  position: relative;
  padding-left: 24px;
  padding-right: 24px;

  box-sizing: border-box;
  width: 100%;

  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.menu-actions {
  display: flex;
  justify-content: flex-end;
  align-self: stretch;
}

.menu-btn-ghost {
  background: var(--BTN_GHOST_BG); /* = O */
  color: var(--BTN_GHOST_TEXT); /* = M */
  border: 1px solid var(--BTN_GHOST_BORDER); /* = F */
}

/* ==========================
   日付ジャンプダイアログ
   ========================== */

.date-overlay {
  z-index: 1100;
}

.share-overlay {
  z-index: 1250;
}

.date-overlay.is-open {
  display: flex;
}

.date-dialog-title {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--R);
}

.date-dialog-body {
  margin-bottom: 12px;
}

.date-input {
  /* field styling is handled by "fields (shared)" */
  text-align: center;
}

.date-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.date-btn-secondary {
  background: var(--BTN_GHOST_BG);
  color: var(--BTN_GHOST_TEXT);
  border: 1px solid var(--BTN_GHOST_BORDER);
  opacity: 1;
}

.date-btn-primary {
  background: var(--BTN_PRIMARY_BG);
  color: var(--BTN_PRIMARY_TEXT);
  border: 1px solid var(--BTN_PRIMARY_BORDER);
  font-weight: 600;
  padding: 10px 14px;
}

.date-btn-primary:active {
  opacity: 0.85;
}

/* 日付ジャンプ：ボタンを必ずピル化（date-btn付け忘れ対策）
   ※サイズは "pill buttons (shared)" が唯一の定義 */
.date-dialog-actions button,
.date-btn,
.date-btn-secondary,
.date-btn-primary {
  border-radius: 999px;
  /* border は各ボタン定義に任せる（ここでは潰さない） */
  font-weight: 600;
}

/* 実行（primary） */
.date-dialog .date-btn-primary {
  background: var(--BTN_PRIMARY_BG);
  color: var(--BTN_PRIMARY_TEXT);
}

/* ===== Share / 共有 ===== */
.share-dialog-title {
  font-size: 1rem;
  margin-bottom: 0;
  color: var(--R);
}

.share-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px; /* 旧 title の margin をここへ移動 */
}

.share-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.25rem;
  height: 1.25rem;

  padding: 0;
  border: none;
  background: transparent;
  color: var(--R); /* タイトルと同色 */
}

.share-close-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.share-dialog-body {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.share-item-btn {
  width: 100%;
  text-align: center;
  background: var(--SHARE_ACTION_BG);
  color: var(--SHARE_ACTION_TEXT);
  border: 1px solid var(--SHARE_ACTION_BORDER);
}

.share-btn-secondary {
  background: var(--SHARE_ACTION_BG);
  color: var(--SHARE_ACTION_TEXT);
  border: 1px solid var(--SHARE_ACTION_BORDER);
}

/* ===== 検索ダイアログ ===== */
.search-overlay {
  z-index: 1200;
}

.search-overlay.is-open {
  display: flex;
}

.search-dialog-title {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--R);
}

/* ===== Dialog Shell (unified) =====
   全ダイアログ/ウィンドウの外殻をここに集約する
   - 背景/文字/境界/角丸/影/余白/overflow を一元管理
   - 個別は「変数（S/M/L）」だけ持つ
*/
.search-dialog,
.date-dialog,
.settings-dialog,
.adv-search-dialog,
.share-dialog,
.side-menu {
  /* ----- size presets (S/M/L) ----- */
  --DIALOG_W_S: min(320px, 90vw);
  --DIALOG_W_M: min(92vw, var(--CARD_WIDTH_KEY));
  --DIALOG_W_L: min(92vw, var(--CARD_WIDTH_KEY));

  --DIALOG_MAXH_S: min(78svh, 560px);
  --DIALOG_MAXH_M: min(82svh, 680px);
  --DIALOG_MAXH_L: min(86svh, 760px);

  /* active size (defaults = M) */
  --SHELL_W: var(--DIALOG_W_M);
  --SHELL_MAXH: none;

  /* ----- shell tokens (defaults) ----- */
  --SHELL_BG: var(--MODAL_BG);
  --SHELL_TEXT: var(--MODAL_TEXT);
  --SHELL_BORDER: var(--MODAL_BORDER);

  --SHELL_RADIUS: 14px;
  --SHELL_PAD: 14px;
  --SHELL_SHADOW: 0 10px 30px rgba(0, 0, 0, 0.5);
  --SHELL_OVERFLOW: hidden;

  box-sizing: border-box;

  /* size (from presets) */
  width: var(--SHELL_W);
  max-height: var(--SHELL_MAXH);

  /* appearance (from tokens) */
  background: var(--SHELL_BG);
  color: var(--SHELL_TEXT);
  border: 1px solid var(--SHELL_BORDER);
  border-radius: var(--SHELL_RADIUS);
  padding: var(--SHELL_PAD);
  box-shadow: var(--SHELL_SHADOW);
  overflow: var(--SHELL_OVERFLOW);
}

/* ===== Share / 共有（Shell tokens override） ===== */
.share-dialog {
  --SHELL_BG: var(--SHARE_BG);
  --SHELL_TEXT: var(--SHARE_LABEL);
  --SHELL_BORDER: var(--SHARE_BORDER);
}

/* ===== Dialog Shell sizes (S/M/L) per dialog ===== */
/* 既定は Shell 内で M だが、ここで“個別”にサイズを確定させる */

.search-dialog {
  --SHELL_W: var(--DIALOG_W_M);
  --SHELL_MAXH: var(--DIALOG_MAXH_M);
}

.share-dialog {
  --SHELL_W: var(--DIALOG_W_S);
  --SHELL_MAXH: var(--DIALOG_MAXH_S);
}

.date-dialog {
  --SHELL_W: var(--DIALOG_W_S);
  --SHELL_MAXH: var(--DIALOG_MAXH_S);
}

/* 設定は項目が多く縦に伸びやすいので、横を広げて“押しつぶし”を避ける */
.settings-dialog {
  --SHELL_W: var(--DIALOG_W_L);
  --SHELL_MAXH: var(--DIALOG_MAXH_L);
  --SHELL_PAD: 0px; /* ← 設定だけ外殻の左右柱を消す */
  display: flex;
  flex-direction: column;
}

/* メニューは“ウィンドウ”扱いなので L。縦は既存の menu-panel 側でも制限してるが、
   Shell 側でも上限を持たせて暴れを抑える */
.side-menu {
  --SHELL_W: var(--DIALOG_W_L);
  --SHELL_MAXH: var(--DIALOG_MAXH_M);
  --SHELL_PAD: 0px; /* ← メニューだけ外殻の左右柱を消す */
}

.search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-row input {
  /* 見た目は fields(shared) が担当。ここは“伸縮”だけ担当 */
  flex: 1 1 auto;
  min-width: 0;
}

.search-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap; /* 幅が厳しい端末でもボタンが破綻しない */
}

/* ===== field/pill size tokens ===== */
:root {
  --FIELD_H: 40px;
  --FIELD_PAD_X: 12px;
  --FIELD_RADIUS: 10px;

  --PILL_H: 40px;
  --PILL_PAD_X: 14px;
  --PILL_RADIUS: 999px;
}

/* ===== fields (shared) ===== */
/* 入力フィールドの外形・色・余白をここに集約（HTMLは変えない） */
.search-row input,
.date-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--FIELD_H);
  padding: 0 var(--FIELD_PAD_X);
  border-radius: var(--FIELD_RADIUS);
  border: none; /* ←これを入れる（削除ではなく） */
  box-shadow: none; /* 念のため（UAが影を入れる場合潰す） */
  background: var(--FIELD_BG);
  color: var(--FIELD_TEXT);
  font-size: 16px; /* iOSで勝手に拡大させない定番 */
  line-height: 1;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* placeholder（共通） */
.search-row input::placeholder,
.date-input::placeholder {
  color: var(--O);
}

/* date入力の “暗色寄り” は「黒ダイアログ内」だけに限定（共通化の副作用防止） */
.date-dialog .date-input {
  color-scheme: light;
}

/* ===== pill buttons (shared) ===== */
/* “外形の高さ”をここで固定。全ピルはこの定義だけが高さ決定権を持つ */
.search-btn,
.menu-btn,
.settings-btn,
.date-dialog-actions button,
.date-btn,
.date-btn-secondary,
.share-item-btn,
.date-btn-primary {
  box-sizing: border-box;
  height: var(--PILL_H);
  padding: 0 var(--PILL_PAD_X);
  border-radius: var(--PILL_RADIUS);
  /* border は各ボタン定義側で決める */
  font-weight: 600;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  -webkit-appearance: none;
  appearance: none;
}

/* search: primary / ghost は色だけ担当（サイズは上の共通のみ） */
.search-btn {
  background: var(--BTN_PRIMARY_BG);
  color: var(--BTN_PRIMARY_TEXT);
  border: 1px solid var(--BTN_PRIMARY_BORDER);
}

.search-btn.search-btn-ghost {
  background: var(--O);
  color: var(--M);
  border: 1px solid var(--F);
}

/* CFヘッダ領域の上余白（旧 cf-view-inner の padding-top 相当） */
/* 範囲外（最古/最新ジャンプ）のアクション並び */
.date-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 2ch; /* テキスト2文字ぶん */
}

/* 「最古の日付より前です」だけ、すぐ下に寄せる */
.empty-day-note {
  margin-top: 6px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--L);
}

.settings-overlay {
  z-index: 1300;
}

.settings-overlay.is-open {
  display: flex;
}

.adv-search-overlay {
  z-index: 1350;
}

.adv-search-overlay.is-open {
  display: flex;
}

/* settings accordion */
.settings-acc-head {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5em;

  padding: 10px 0; /* ★side-menu-item と同じ上下リズム */
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
}

.settings-acc-arrow {
  order: -1;
  display: inline-block;
  line-height: 1; /* ★ここ（下寄り防止） */
  transform: translateY(-0.05em); /* ★微調整（必要なら -0.03em〜-0.08em） */
  transition: transform 160ms ease;
  user-select: none;
}

.settings-acc-item.is-open .settings-acc-arrow {
  transform: translateY(-0.05em) rotate(180deg); /* ★回転時も同じY補正 */
}

.settings-acc-body[hidden] {
  display: none;
}

/* options の余白は必要なら調整（いったん最小） */
.settings-acc-body .settings-options {
  padding: 0 0 8px 0;
}

.settings-dialog-title {
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--MODAL_BORDER);
  background: var(--SETTINGS_HEADER_BG);
  color: var(--R);
}

.settings-dialog-body {
  padding: 10px 14px; /* ★menu-body と揃える */
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  background: var(--SETTINGS_BODY_BG);
  color: var(--SETTINGS_BODY_TEXT);
}

/* 設定：項目間隔をメニューと同じにする */
#settings-acc {
  display: flex;
  flex-direction: column;
  gap: 8px; /* ★menu-body と同じ */
}

.settings-dialog-body > p {
  color: var(--SETTINGS_SECTION_LABEL_TEXT);
}

.settings-acc-item {
  padding: 0; /* ★縦間隔は gap に一任 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-acc-item:last-child {
  border-bottom: none;
}

.settings-label {
  font-size: 0.95rem;
  font-weight: 500; /* ★見出しの主張を下げる */
  margin: 0; /* ★縦間隔を増やさない */
  color: var(--SETTINGS_SECTION_LABEL_TEXT);
}

.settings-options {
  display: grid;
  gap: 8px;
}

.settings-options .opt {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;

  border: var(--SETTINGS_OPTION_BORDER_WIDTH) solid
    var(--SETTINGS_OPTION_BORDER);
  background: var(--SETTINGS_OPTION_BG);

  cursor: pointer;
  user-select: none;
}

/* ===== Settings: radio (custom) =====
   目的：未選択＝空円／選択中＝中点 を必ず出す
   方針：accent-color依存をやめて、CSSで描画する
*/
.settings-options input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;

  /* ブラウザ標準のラジオ描画を切る */
  -webkit-appearance: none;
  appearance: none;

  /* 外枠（空円） */
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-color: var(--SETTINGS_RADIO_BORDER);
  background: var(--SETTINGS_RADIO_BG);

  /* 中点を疑似要素で描くための基準 */
  position: relative;
  display: inline-block;
}

/* 選択中：中点を表示 */
.settings-options input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translate(-50%, -50%);

  background: var(--SETTINGS_RADIO_DOT);
  opacity: 0;
}

/* checkedで中点ON */
.settings-options input[type="radio"]:checked::after {
  opacity: 1;
}

/* フォーカス可視（キーボード操作時だけ） */
.settings-options input[type="radio"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

.settings-options .opt span {
  font-size: 0.95rem;
  color: var(--SETTINGS_BODY_TEXT);
}

.settings-dialog-actions {
  position: sticky;
  bottom: 0;
  padding: 10px 14px;
  background: var(--SETTINGS_FOOTER_BG);
  border-top: 1px solid var(--MODAL_BORDER);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px; /* ← search-actions と同じ間隔 */
  flex-wrap: wrap; /* ←狭い端末でも破綻しにくい */
}

.settings-btn.settings-btn-ghost {
  background: var(--BTN_GHOST_BG); /* = O */
  color: var(--BTN_GHOST_TEXT); /* = M */
  border: 1px solid var(--BTN_GHOST_BORDER); /* = F */
}

/* CF本文内のラベル（スクロールで流れる） */
.cf-caption-block {
  padding-top: 16px;
  padding-bottom: 8px;
}

body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* シャッフル中：H2の「前の日 / 次の日」は非表示 */
body.linear-shuffle #prev-day-btn,
body.linear-shuffle #next-day-btn {
  display: none;
}