:root {
  /* Phase 152: 水彩・海・草原・城の背景に合う「くすみ系パステル」。
     鮮やかな原色は使わず、落ち着いた大人向けのトーンで統一。本文文字は淡くしすぎない */
  --bg: #f4f7f6;                 /* ページ背景: 少し青緑みのオフホワイト */
  --panel: #ffffff;
  --panel-soft: #eef4f2;
  --card: rgba(255, 255, 255, 0.84); /* カード背景 (乳白色) */
  --text: #34475a;              /* 主要テキスト (十分読める濃さは維持) */
  --muted: #71808d;             /* 補助テキスト */
  --border: #cddbda;            /* 淡いブルーグレーの境界線 */
  --border-strong: #b1c6c4;
  --primary: #6fa9a6;           /* メインアクセント: くすみティール */
  --primary-hover: #5e9491;
  --blue: #7c9bb0;              /* お知らせ等: 淡いブルーグレー (原色青にしない) */
  --green: #7fae91;             /* 当選: くすみセージグリーン */
  --amber: #c88a5e;             /* 締切・注意: くすみテラコッタ */
  --red: #c98787;              /* 落選: くすみローズ */
  --teal: #6fa9a6;
  --coral: #cf8f8f;
  --sun: #dcc07c;
  --lagoon: #7fa8a4;           /* アイコン等の彩度を落としたティール */
  --deep: #526b7a;            /* 濃いアクセント: ブルーグレー (黒に近い紺をやめる) */
  --navy: #3e5568;            /* ヒーロー等の暗色: 少し青緑を含むブルーグレー */
  --gold: #b8923c;            /* 文字にも使える読めるゴールド */
  --gold-bright: #d8b96f;     /* アイコン背景など小アクセント用の控えめゴールド */
  --ink: #34475a;
  --hairline: rgba(120, 152, 150, 0.20);
  --shadow: 0 1px 2px rgba(62, 85, 96, 0.05), 0 8px 24px rgba(62, 85, 96, 0.08);
  --shadow-sm: 0 4px 14px rgba(62, 85, 96, 0.07);

  /* ===================================================================
     Phase 255-A: UI 刷新用のデザイントークン (prototype A-v2 準拠)
     既存トークンは 1 つも書き換えていない。ここで追加した --ad-* だけを
     Phase 255-A で触るコンポーネントに使う (全アプリ一括置換はしない)。
     =================================================================== */

  /* 面: page / card / sunken / quiet + 状態強調 3 色 */
  --ad-bg: #f2f6f5;
  --ad-surface: #ffffff;
  --ad-sunken: #e7eeec;
  --ad-quiet: #f7fbfa;
  --ad-em-gold: #fbf5e6;   /* 当選 */
  --ad-em-sage: #eef4f0;   /* 結果待ち */
  --ad-em-warm: #fcf1e9;   /* 購入・受取 */

  /* 文字: コントラストを実測して WCAG AA (4.5:1) を満たす濃さに調整
     --muted(#71808d) は白地 3.9:1 で AA 未達のため、255-A の範囲では --ad-muted を使う */
  --ad-text: #2f4254;
  --ad-muted: #5f6f7d;     /* 白地 5.25:1 / --ad-sunken 上 4.50:1 */
  --ad-urgent: #9a5c2f;    /* 白地 5.37:1 */
  --ad-gold-ink: #8a6a1f;  /* --ad-em-gold 上 4.69:1 */
  --ad-gold-fill: #8a6a1f; /* 白文字を乗せて 5.10:1 */
  --ad-primary-ink: #0d3e42;
  --ad-navy: #3e5568;
  --ad-on-navy-sub: rgba(255, 255, 255, 0.74);

  /* spacing は 4 / 8 / 12 / 16 / 24 / 32 だけ */
  --ad-s1: 4px; --ad-s2: 8px; --ad-s3: 12px; --ad-s4: 16px; --ad-s6: 24px; --ad-s8: 32px;

  /* radius は 3 種類だけ */
  --ad-r-sm: 8px; --ad-r-md: 12px; --ad-r-pill: 999px;

  /* shadow は 3 種類だけ */
  --ad-sh-sm: 0 1px 2px rgba(62, 85, 96, 0.06);
  --ad-sh-md: 0 2px 6px rgba(62, 85, 96, 0.07), 0 10px 24px rgba(62, 85, 96, 0.06);
  --ad-sh-lg: 0 10px 30px rgba(62, 85, 96, 0.13);

  /* font-size は 6 段階だけ。半端値 (12.5 / 11.5) と 10px 未満は作らない */
  --ad-fs-title: 22px;  /* 画面見出し / 状態数字   700 */
  --ad-fs-lead: 16px;   /* グループ親の商品名      700 */
  --ad-fs-name: 15px;   /* 商品名                  700 */
  --ad-fs-body: 13px;   /* 本文 / CTA              400 / 700 */
  --ad-fs-meta: 12px;   /* 店舗名 / 日付 / badge   400 / 700 */

  --ad-shell: 960px;    /* デスクトップで 1200px に伸ばさない */
  --ad-slot: 32px;      /* retailer visual slot。将来ここにロゴが入る */
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, #fbfdfd, rgba(242, 246, 245, 0.85) 42%, #f3f6f5),
    var(--bg);
  color: var(--text);
  font-family:
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo,
    system-ui, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: inherit;
  text-decoration: none;
}

.app {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  gap: 20px;
  min-height: 210px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(135deg, #ffffff, #f8fbfa 52%, #ecf3f2),
    linear-gradient(120deg, rgba(11, 127, 128, 0.06), rgba(23, 105, 224, 0.03));
  box-shadow: var(--shadow);
  padding: 24px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 54%),
    repeating-linear-gradient(168deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 44px);
  pointer-events: none;
}

.hero-copy,
.hero-card-strip {
  position: relative;
  z-index: 1;
}

/* Phase 290: ポータル系リンクを 1 行に並べる。折り返すと hero が伸びて
   Phase 283 の action-first (最初の actionable の位置) を押し下げるため、
   狭い幅ではリンク側を詰めて 1 行を保つ */
.portal-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
}
.portal-links .portal-link { margin-top: 8px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .portal-links { gap: 4px; }
  .portal-links .portal-link { padding: 5px 8px; font-size: 11px; letter-spacing: -0.01em; }
}

/* Phase 117: アプリポータルへの常設リンク (タイトル直下) */
.portal-link {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #46402c;
  background: linear-gradient(135deg, #1f2430, #12151d);
  color: #f0c94a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(16, 22, 31, 0.2);
}

.portal-link:hover {
  color: #ffe28a;
  border-color: #6b6142;
}

.hero-card-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 168px;
}

.hero-card-strip img {
  width: clamp(92px, 9vw, 126px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(4, 62, 84, 0.22);
  transform: rotate(-7deg);
}

.hero-card-strip img + img {
  margin-left: -22px;
}

.hero-card-strip img:nth-child(2) {
  transform: translateY(-10px) rotate(4deg);
}

.hero-card-strip img:nth-child(3) {
  transform: translateY(8px) rotate(9deg);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: 0.015em;
}

.subhead {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.hero-note {
  max-width: 720px;
  margin: 12px 0 0;
  color: #315865;
  font-size: 12px;
  line-height: 1.7;
}

.hero-note a {
  color: #0f766e;
  font-weight: 900;
  border-bottom: 1px solid rgba(15, 118, 110, 0.36);
}

.hero-note a:hover {
  color: #0b5e59;
  border-bottom-color: currentColor;
}

.panel-heading,
.form-footer,
.card-actions,
.quick-actions,
.backup-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(62, 85, 96, 0.08), 0 4px 12px rgba(111, 169, 166, 0.22);
}

.button.primary:hover {
  background: var(--primary-hover);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.82);
  border-color: #c9d8da;
  color: #445c68;
}

.button.ghost {
  background: rgba(255, 255, 255, 0.82);
  border-color: #c9d8da;
  color: #445c68;
}

.file-button,
.photo-upload {
  position: relative;
  overflow: hidden;
}

.file-button input,
.photo-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  margin: 14px 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(9, 42, 52, 0.04), 0 10px 28px rgba(9, 42, 52, 0.06);
  padding: 10px;
}

/* Phase 188A: 広告リンクであることを押す前に示す PR バッジ。
   共通の開示文だけに依存せず、リンク単体で広告と分かるようにする */
.pr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-right: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--muted);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}

.affiliate-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  border: 1px solid rgba(13, 62, 66, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #64748b;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.6;
}

.affiliate-disclosure strong {
  flex: 0 0 auto;
  color: #31555d;
  font-weight: 950;
}

.affiliate-disclosure span {
  min-width: 0;
}

.tab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #33505c;
  padding: 8px 12px 8px 9px;
  font-size: 13px;
  font-weight: 900;
  transition: background 140ms ease, color 140ms ease;
}

.tab-button:hover:not(.active) {
  background: rgba(9, 42, 52, 0.05);
}

.tab-button::before {
  content: attr(data-icon);
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--lagoon), var(--primary));
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.tab-button[data-help]::after {
  content: attr(data-help);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 260px;
  transform: translateX(-50%) translateY(-3px);
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #111827;
  color: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.tab-button[data-help]:hover::after,
.tab-button[data-help]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tab-button.active {
  background: linear-gradient(135deg, #5e7a86, #526b7a);
  border-color: #4a626f;
  color: #fff;
  box-shadow: 0 1px 2px rgba(62, 85, 96, 0.12), 0 8px 20px rgba(62, 85, 96, 0.18);
}

.tab-button.active::before {
  background: linear-gradient(135deg, var(--gold-bright), #c6a45c);
  color: #4a3c15;
}

.flow-guide {
  display: grid;
  gap: 12px;
  border-color: var(--hairline);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(226, 255, 249, 0.82)),
    repeating-linear-gradient(135deg, rgba(9, 42, 52, 0.03) 0 1px, transparent 1px 20px);
  padding: 14px;
}

/* Phase 65: クイックアクセスバー (Amazon メッセージセンター 等) */
.quick-access-bar {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
/* Phase 269: HOME でサブタブより上の共通位置に置く。hero (下端は画像+fade の呼吸領域) と
   subnav の間で自然な間隔にする。バナー化はしない (見た目は従来の細い導線のまま) */
#tab-dashboard > .quick-access-bar {
  margin: 0 0 var(--ad-s3);
}

.quick-access-link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e2b883;
  background: linear-gradient(135deg, #f9efe2, #f3e3cf);
  color: #8b5a32;
  font-weight: 800;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.quick-access-link:hover {
  background: linear-gradient(135deg, #fed7aa, #fdba74);
  border-color: #d8a86a;
  transform: translateY(-1px);
}

.quick-access-link.amazon {
  /* Amazon オレンジ強調 */
}

.quick-access-link .qa-icon {
  font-size: 22px;
  text-align: center;
}

.quick-access-link .qa-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.quick-access-link .qa-label strong {
  font-size: 14px;
  color: #8b5a32;
}

.quick-access-link .qa-label small {
  font-size: 11px;
  color: #8a6a3a;
  font-weight: 700;
}

.quick-access-link .qa-arrow {
  font-size: 18px;
  color: #8a6a3a;
  text-align: center;
}

/* Phase 88/92: 期間限定キャンペーンバナー (カルーセル方式) */
.campaign-banner {
  background: linear-gradient(135deg, #f9efe2, #f3e3cf);
  border: 1px solid #e2b883;
  border-radius: 10px;
  padding: 12px 40px; /* Phase 98: 左右に矢印分の padding */
  margin-bottom: 12px;
  position: relative; /* Phase 98: 矢印を絶対配置 */
  overflow: hidden; /* Phase 98: スライド時にはみ出しを隠す */
  transition: background 300ms ease, border-color 300ms ease;
  /* Phase 98: バナー間の高さ差による下要素のガタつき防止 */
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

/* Phase 98: 上部 (head/lede) は上寄せのまま、リンクだけ残り領域の中央に配置 */
.campaign-banner .cb-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* justify-content はデフォルト flex-start (head/lede が上寄せ) */
}
.campaign-banner .cb-content .cb-links {
  /* margin: auto 0 で残余スペースの上下を均等に取り、リンクが中央 */
  margin-top: auto;
  margin-bottom: auto;
}

@media (max-width: 600px) {
  .campaign-banner {
    /* スマホは 3リンクが1カラム折り返しになるので少し大きめ */
    min-height: 260px;
  }
}

/* Phase 98: バナー切替時の「横に流れる」アニメーション (cb-content が対象、矢印/ドットは動かない) */
.campaign-banner .cb-content {
  transition: transform 220ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 220ms ease;
  will-change: transform, opacity;
}
.campaign-banner.cb-anim-out-left .cb-content {
  transform: translateX(-25%);
  opacity: 0;
}
.campaign-banner.cb-anim-out-right .cb-content {
  transform: translateX(25%);
  opacity: 0;
}
.campaign-banner.cb-anim-in-from-right .cb-content {
  transform: translateX(25%);
  opacity: 0;
  /* transitionしない初期状態 */
  transition: none;
}
.campaign-banner.cb-anim-in-from-left .cb-content {
  transform: translateX(-25%);
  opacity: 0;
  transition: none;
}

/* Phase 98: 左右矢印 (手動切替ボタン) */
.campaign-banner .cb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
  color: #334155;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 150ms, border-color 150ms;
}
.campaign-banner .cb-arrow:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.35);
}
.campaign-banner .cb-arrow-prev { left: 6px; }
.campaign-banner .cb-arrow-next { right: 6px; }

@media (max-width: 600px) {
  .campaign-banner {
    padding: 12px 34px;
  }
  .campaign-banner .cb-arrow {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .campaign-banner .cb-arrow-prev { left: 4px; }
  .campaign-banner .cb-arrow-next { right: 4px; }
}

/* Phase 92: tone 別の色 (Amazon = オレンジ系 / セブンネット = 緑系) */
.campaign-banner.cb-tone-amazon {
  background: linear-gradient(135deg, #f9efe2, #f3e3cf);
  border-color: #e2b883;
}
.campaign-banner.cb-tone-sevennet {
  background: linear-gradient(135deg, #eef5f0, #e8f2eb);
  border-color: rgba(16, 185, 129, 0.42);
}
/* Phase 94: イオン系用の紫トーン */
.campaign-banner.cb-tone-aeon {
  background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
  border-color: rgba(124, 58, 237, 0.42);
}
.campaign-banner.cb-tone-aeon .cb-badge {
  background: #6d28d9;
}
.campaign-banner.cb-tone-aeon .cb-period {
  color: #5b21b6;
}
.campaign-banner.cb-tone-aeon .cb-lede {
  color: #4c1d95;
}
.campaign-banner.cb-tone-aeon .cb-link {
  border-color: rgba(124, 58, 237, 0.55);
  color: #5b21b6;
}
.campaign-banner.cb-tone-aeon .cb-link:hover {
  background: #f5f3ff;
  border-color: rgba(124, 58, 237, 0.85);
}
.campaign-banner.cb-tone-aeon .cb-link .qa-arrow {
  color: #6d28d9;
}
.campaign-banner.cb-tone-aeon .cb-dot.active {
  background: #6d28d9;
}
/* Phase 97: お知らせ系 (青トーン) */
.campaign-banner.cb-tone-info {
  background: linear-gradient(135deg, #eef3f7, #e5eef3);
  border-color: rgba(59, 130, 246, 0.42);
}
.campaign-banner.cb-tone-info .cb-badge {
  background: #49687a;
}
.campaign-banner.cb-tone-info .cb-period {
  color: #1e40af;
}
.campaign-banner.cb-tone-info .cb-lede {
  color: #1e3a8a;
}
.campaign-banner.cb-tone-info .cb-link {
  border-color: rgba(59, 130, 246, 0.55);
  color: #1e40af;
}
.campaign-banner.cb-tone-info .cb-link:hover {
  background: #eef3f7;
  border-color: rgba(59, 130, 246, 0.85);
}
.campaign-banner.cb-tone-info .cb-link .qa-arrow {
  color: #49687a;
}
.campaign-banner.cb-tone-info .cb-dot.active {
  background: #49687a;
}
.campaign-banner.cb-tone-sevennet .cb-badge {
  background: #047857;
}
.campaign-banner.cb-tone-sevennet .cb-period {
  color: #065f46;
}
.campaign-banner.cb-tone-sevennet .cb-lede {
  color: #064e3b;
}
.campaign-banner.cb-tone-sevennet .cb-link {
  border-color: rgba(16, 185, 129, 0.55);
  color: #065f46;
}
.campaign-banner.cb-tone-sevennet .cb-link:hover {
  background: #eef5f0;
  border-color: rgba(16, 185, 129, 0.85);
}
.campaign-banner.cb-tone-sevennet .cb-link .qa-arrow {
  color: #047857;
}

/* Phase 92: スライドドット */
.campaign-banner .cb-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.campaign-banner .cb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  transition: background 150ms;
}
.campaign-banner .cb-dot.active {
  background: rgba(0, 0, 0, 0.55);
}
.campaign-banner.cb-tone-sevennet .cb-dot.active {
  background: #047857;
}
.campaign-banner.cb-tone-amazon .cb-dot.active {
  background: #8a6a3a;
}

/* Phase 92: 2件のみのとき cb-links は 2カラム */
.campaign-banner .cb-links-2 {
  grid-template-columns: repeat(2, 1fr);
}

.campaign-banner .cb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.campaign-banner .cb-badge {
  background: #8a6a3a;
  color: #fff;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
}

.campaign-banner .cb-period {
  font-size: 11px;
  color: #8b5a32;
  font-weight: 700;
}

.campaign-banner .cb-lede {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #7c2d12;
  line-height: 1.5;
}

.campaign-banner .cb-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.campaign-banner .cb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(200, 138, 94, 0.55);
  border-radius: 8px;
  color: #8b5a32;
  transition: background 120ms, border-color 120ms;
  min-width: 0;
}

.campaign-banner .cb-link:hover {
  background: #f9efe2;
  border-color: rgba(200, 138, 94, 0.85);
}

.campaign-banner .cb-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

.campaign-banner .cb-thumb.empty {
  background: #fed7aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8a6a3a;
}

.campaign-banner .cb-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.campaign-banner .cb-link .qa-arrow {
  font-size: 14px;
  color: #8a6a3a;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .campaign-banner .cb-links {
    grid-template-columns: 1fr;
  }
}

/* Phase 65: ダッシュボード内サブタブ */
.sub-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(13, 62, 66, 0.1);
  background: rgba(255, 255, 255, 0.86);
}

.sub-tab-button {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #4b5563;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.sub-tab-button:hover {
  background: rgba(0, 167, 150, 0.08);
  color: #0c5b53;
}

.sub-tab-button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 140, 140, 0.22);
}

.sub-tab-panel[hidden] {
  display: none;
}

/* Phase 71: モバイルで sub-tabs が4つでも1段に収まるよう調整 */
@media (max-width: 720px) {
  .sub-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 2px;
    padding: 3px;
  }
  .sub-tab-button {
    flex: 1 1 0;
    padding: 7px 4px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
  }
  /* Phase 233: やること別は件数付き6タブ — 1段圧縮だと「購入・受取 2」等が切れるため2段に折り返す */
  #entriesTaskTabs {
    flex-wrap: wrap;
  }
  #entriesTaskTabs .sub-tab-button {
    flex: 1 1 31%;
  }
}

.sub-tab-panel {
  display: grid;
  gap: 14px;
}

/* Phase 69: プライバシーポリシーページ用 */
.privacy-page .privacy-layout {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}

.privacy-page .panel h2 {
  margin: 0 0 10px;
  color: var(--deep);
  font-size: 17px;
}

.privacy-page .panel p,
.privacy-page .panel ul {
  margin: 0 0 8px;
  color: #374151;
  font-size: 13px;
  line-height: 1.75;
}

.privacy-page .panel ul {
  padding-left: 24px;
}

.privacy-page .panel a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
}

.privacy-page .privacy-back {
  text-align: center;
  margin: 14px 0;
  font-size: 13px;
  font-weight: 800;
}

/* Phase 68: 検索/絞り込み toolbar 折りたたみトグル */
.toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: #4b5563;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.toolbar-toggle:hover {
  background: rgba(0, 167, 150, 0.08);
  border-color: rgba(0, 167, 150, 0.42);
}

.toolbar-toggle.open {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.toolbar-toggle .tt-icon {
  font-size: 14px;
}

.toolbar-toggle .tt-arrow {
  font-size: 12px;
  transition: transform 120ms ease;
}

.toolbar-toggle.open .tt-arrow {
  transform: rotate(180deg);
}

/* toolbar が hidden 属性で隠れているとき */
.toolbar[hidden] {
  display: none;
}

/* Phase 67: 抽選を探す/応募を管理のサブタブ + フラットリスト */
.published-flat-hint {
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: rgba(0, 167, 150, 0.06);
  border: 1px solid rgba(0, 167, 150, 0.22);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.published-flat-list {
  display: grid;
  gap: 12px;
}

/* Phase 291: 予定がある日だけを出す構造にしたため「+N 件」展開は廃止 */

/* Phase 60: 新着の抽選パネル */
.new-lotteries-panel[hidden] {
  display: none;
}

.new-lotteries-panel {
  border-color: rgba(200, 138, 94, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 244, 214, 0.66));
}

.new-lotteries-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.new-lottery-item {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(200, 138, 94, 0.32);
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: #1f2937;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.new-lottery-item:hover {
  background: #f9efe2;
  border-color: rgba(200, 138, 94, 0.55);
  transform: translateY(-1px);
}

.new-lottery-item .nl-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
}

.new-lottery-item .nl-badge {
  font-size: 13px;
}

.new-lottery-item .nl-date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.new-lottery-item .nl-status {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
}

.new-lottery-item .nl-status.fresh {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #8a6a3a;
}

.new-lottery-item .nl-status.managed {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #155e75;
}

.new-lottery-item .nl-deadline {
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}

/* Phase 98 GPT #2: 新着一覧の状態バッジ (🟢本日開始 / 🟠締切間近 / 🔴今日締切) */
.new-lottery-item .nl-state-badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.new-lottery-item .nl-state-badge.state-urgent {
  background: #f5e8e8;
  color: #b91c1c;
}
.new-lottery-item .nl-state-badge.state-warning {
  background: #ffedd5;
  color: #9a3412;
}
.new-lottery-item .nl-state-badge.state-fresh {
  background: #dcfce7;
  color: #166534;
}

.new-lottery-item .nl-product {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--deep);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.new-lottery-item .nl-retailer {
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}

.flow-head h2 {
  margin: 0;
  font-size: 18px;
}

.flow-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.flow-step {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(9, 42, 52, 0.06);
  padding: 12px;
}

.flow-step-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.flow-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), #f97316);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.flow-step-main strong {
  font-size: 14px;
}

.flow-step-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.flow-count {
  text-align: right;
}

.flow-count b {
  display: block;
  color: var(--primary);
  font-size: 24px;
  line-height: 1;
}

.flow-count small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.flow-list {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.flow-details summary {
  cursor: pointer;
  color: #334155;
  font-size: 11px;
  font-weight: 900;
  list-style-position: inside;
}

.flow-item {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 7px;
  background: linear-gradient(135deg, #ffffff, #f0fffb);
  padding: 6px 7px;
  text-align: left;
}

.flow-item span {
  overflow: hidden;
  color: #111827;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-item small,
.flow-empty {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.flow-empty {
  border: 1px dashed var(--border-strong);
  border-radius: 7px;
  padding: 9px;
}

.flow-link {
  min-height: 32px;
  border: 1px solid #8ee7e0;
  border-radius: 7px;
  background: #e7fffb;
  color: #007f86;
  font-size: 12px;
  font-weight: 900;
}

.layout {
  display: grid;
  gap: 16px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  gap: 16px;
}

.panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.rich-panel,
.form-panel {
  padding: 18px;
}

.panel-heading {
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-heading h2,
.rich-panel h2 {
  margin-bottom: 3px;
  font-size: 16px;
}

.panel-heading p,
.rich-panel p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.dashboard-status {
  display: block;
}

.status-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-lane {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(23, 31, 43, 0.05);
  padding: 10px;
}

.status-lane.amber {
  border-top: 3px solid #c88a5e;
}

.status-lane.blue {
  border-top: 3px solid var(--blue);
}

.status-lane.green {
  border-top: 3px solid var(--green);
}

.status-lane.teal {
  border-top: 3px solid var(--teal);
}

.status-lane-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.status-lane h3 {
  margin: 0;
  font-size: 13px;
}

.status-lane p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.lane-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  border-radius: 999px;
  background: #eef2f7;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.status-row-list {
  display: grid;
  gap: 7px;
}

.status-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 56px;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  padding: 6px;
}

.status-row.clickable {
  cursor: pointer;
}

.status-row.clickable:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.status-row-image {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2f7;
}

.status-row-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.status-row-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.status-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.status-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: 92px;
}

.status-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 16px 8px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.feature-panel {
  border-color: #c7d2fe;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98)),
    #fff;
}

.entry-form {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.photo-field {
  display: grid;
  gap: 10px;
  align-content: start;
}

.photo-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 118, 110, 0.08)),
    #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.photo-preview img,
.entry-image img,
.next-item img,
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.microcopy {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.field,
.check-field {
  display: grid;
  gap: 6px;
}

.field span,
.check-field span {
  color: #3f4652;
  font-size: 12px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
  outline: none;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--lagoon);
  box-shadow: 0 0 0 3px rgba(0, 184, 200, 0.16);
}

.check-field {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px;
  background: #f0fffb;
}

.check-field input {
  width: 18px;
  min-height: 18px;
}

.custom-retailer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f0fffb;
  padding: 12px;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.form-footer {
  justify-content: space-between;
  gap: 16px;
}

/* Phase 404: 小さい画面で応募先の説明 (#retailerHint) が幅を取り、保存ボタン「更新」が縦書き (更/新) に潰れていた。
   ボタンは縮めず 1 行のまま、説明文の方を折り返す。両方が並ばない幅では行を折り返す (ボタンは右寄せのまま) */
.form-footer {
  flex-wrap: wrap;
}

.form-footer > .hint {
  flex: 1 1 12em;
  min-width: 0;
}

.form-footer > .button {
  flex: 0 0 auto;
  min-width: 6em;
  margin-left: auto;
  align-self: center; /* 説明文が複数行でもボタンを縦に引き伸ばさない */
  white-space: nowrap;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 150px) minmax(140px, 180px) auto auto;
  gap: 8px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(9, 42, 52, 0.05);
  padding: 10px;
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 8px;
  background: #fff;
}

/* Phase 56: シミュレーションガイドパネル */
.demo-guide[hidden] {
  display: none;
}

.demo-guide {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 80;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px); /* Phase 147.2 追補4: アドレスバー可変環境の実表示高さ (非対応環境は上の 100vh) */
  /* Phase 147.2 追補4: パネル全体スクロールをやめ、縦 flex で「ヘッダー固定 +
     本文のみスクロール + 操作ボタン sticky」にする (低い画面でもボタンが切れない) */
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 167, 150, 0.32);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 22px rgba(9, 42, 52, 0.1);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #111827;
}

.demo-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0; /* ステップ数・折りたたみ・閉じるは常に表示 (スクロールで消さない) */
}

/* 本文 (タイトル・説明・ヒント・操作ボタン) だけを縦スクロール対象にする */
.demo-guide-body-wrap {
  min-height: 0;
  overflow-y: auto;
}

.demo-guide-head-actions {
  display: inline-flex;
  gap: 6px;
}

.demo-guide-toggle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #6b7280;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.demo-guide.collapsed .demo-guide-body-wrap {
  display: none;
}

.demo-guide.collapsed {
  padding: 6px 12px;
}

.demo-guide.collapsed .demo-guide-head {
  margin-bottom: 0;
}

.demo-guide-step-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.demo-guide-exit {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.demo-guide-exit:hover {
  color: #b91c1c;
  border-color: rgba(177, 106, 68, 0.45);
}

.demo-guide-title {
  margin: 0 0 8px;
  color: var(--deep);
  font-size: 16px;
}

.demo-guide-body {
  margin: 0 0 8px;
  color: #374151;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}

.demo-guide-hint {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1fffb;
  border: 1px solid rgba(0, 167, 150, 0.26);
  color: #0c5b53;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.demo-guide-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  /* Phase 147.2 追補4: 本文が長くても進行ボタンは常に見える位置に固定
     (overflow で隠すのではなく、スクロール領域の下端に貼り付ける) */
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  padding-top: 8px;
  margin-top: 0;
}

.demo-guide-actions .button {
  flex: 1;
  min-height: 38px;
  padding: 0 12px;
  font-size: 12px;
}

.demo-guide-actions .button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 820px) {
  .demo-guide {
    /* モバイルでも画面上部に全幅で配置、透過で背後のカードが透ける */
    top: calc(env(safe-area-inset-top) + 6px);
    left: 6px;
    right: 6px;
    max-height: 50vh;
    max-height: 50dvh; /* Phase 147.2 追補4: モバイルの実表示高さ基準 */
    padding: 8px 12px;
    font-size: 12.5px;
  }

  .demo-guide.collapsed {
    padding: 6px 10px;
  }
}

/* Phase 50: 確認ダイアログ */
.confirm-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(9, 42, 52, 0.24);
  background: #ffffff;
  color: #111827;
}

.confirm-dialog::backdrop {
  background: rgba(8, 47, 56, 0.42);
}

.confirm-dialog form {
  padding: 20px 22px;
  margin: 0;
}

.confirm-title {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--deep);
}

.confirm-message {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

.confirm-actions {
  display: flex;
  flex-wrap: nowrap; /* Phase 93: モバイル幅でボタンが縦並びになって「キャンセル」が縦長に見える問題回避 */
  gap: 8px;
  justify-content: flex-end;
}

.confirm-actions .button {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Phase 93: 狭幅でもボタンは横並び、padding をやや縮めて収める */
  .confirm-actions .button {
    padding: 0 10px;
    font-size: 12px;
  }
}

/* Phase 98: 3ボタン (alt あり) はモバイルで飛び出るので縦並びに折り返し */
.confirm-actions.many-buttons {
  flex-wrap: wrap;
}
.confirm-actions.many-buttons .button {
  flex: 1 1 auto;
}
@media (max-width: 600px) {
  .confirm-actions.many-buttons {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .confirm-actions.many-buttons .button {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    white-space: normal;
    height: auto;
    min-height: 42px;
    overflow-wrap: anywhere;
  }
}

.confirm-actions .button.danger-ghost {
  background: #ffffff;
  border: 1px solid rgba(177, 106, 68, 0.36);
  color: #b91c1c;
  font-weight: 800;
}

/* Phase 56i: デモ中は推奨ボタン (primary = 管理画面で見る) を脈打たせて注意を引く */
body.demo-active .confirm-dialog #confirmYes {
  position: relative;
  animation: demo-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0, 167, 150, 0.55);
}

body.demo-active .confirm-dialog #confirmYes::before {
  content: "デモではこれ ";
  font-size: 11px;
  opacity: 0.95;
}

@keyframes demo-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 167, 150, 0.55);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 167, 150, 0);
    transform: translateY(-1px);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 167, 150, 0);
    transform: translateY(0);
  }
}

.confirm-actions .button.danger-ghost:hover {
  background: #f5e8e8;
}

/* Phase 135: 当選率セクションの破壊的操作ボタン (confirm-actions 外でも同じ赤系表示) */
#winRateSection .button.danger-ghost {
  background: #ffffff;
  border: 1px solid rgba(177, 106, 68, 0.36);
  color: #b91c1c;
  font-weight: 800;
}

#winRateSection .button.danger-ghost:hover {
  background: #f5e8e8;
}

/* Phase 49: toolbar 内のチェックボックス型フィルタ */
.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: #164352;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.filter-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
  cursor: pointer;
}

.win-rate-consent-check {
  width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  margin: 3px 0 0;
  padding: 0;
  border: none;
  accent-color: var(--primary);
  cursor: pointer;
}

.filter-check:has(input:checked) {
  border-color: rgba(0, 167, 150, 0.45);
  background: rgba(0, 167, 150, 0.08);
  color: #0c5b53;
}

/* Phase 184c.1: フィルターの補足 (「期限切れの抽選も表示」の使いどころ)。
   toolbar の flex 行を折り返して 1 行占有し、既存コントロールの並びを崩さない */
.filter-hint {
  flex: 1 0 100%;
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #6b8a94;
}

.view-toggle-button {
  min-height: 36px;
  border: 0;
  border-right: 1px solid rgba(13, 62, 66, 0.16);
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.view-toggle-button:last-child {
  border-right: 0;
}

.view-toggle-button.active {
  background: var(--primary);
  color: #fff;
}

/* Phase 24: 商品アコーディオン (公開DB / 応募管理 共通) */
.product-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 14px rgba(23, 31, 43, 0.04);
  margin-bottom: 10px;
  overflow: hidden;
}

.product-accordion[open] {
  box-shadow: 0 10px 26px rgba(23, 31, 43, 0.08);
}

.product-accordion > summary {
  list-style: none;
  cursor: pointer;
}

.product-accordion > summary::-webkit-details-marker {
  display: none;
}

.product-accordion-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  transition: background-color 0.12s ease;
}

.product-accordion-head:hover {
  background: #f7f9fc;
}

.product-accordion-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 7px;
  background: #f1f5f9;
  border: 1px solid var(--border);
}

.product-accordion-thumb.empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.product-accordion-title h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-accordion-meta {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.acc-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f6;
  font-weight: 800;
  font-size: 11px;
}

.acc-tag-managed { background: #e8f2eb; color: #496f57; }
.acc-tag-new { background: #f9ece5; color: #9b5f43; }
.acc-tag-missing { background: #f6efe0; color: #8a6a3a; }
.acc-tag-unapplied { background: #f6efe0; color: #8a6a3a; }
.acc-tag-applied { background: #e5eef3; color: #49687a; }
.acc-tag-won { background: #e8f2eb; color: #496f57; }
.acc-tag-lost { background: #f5e8e8; color: #865858; }
.acc-tag-paid { background: #e7ebf2; color: #4f5f86; }
.acc-tag-pickedup { background: #e2efee; color: #3f6d6a; }
.win-rate-tag { background: rgba(0, 167, 150, 0.12); color: #0c5b53; }

.win-rate-title-tag {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap;
}

.win-rate-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #0c5b53;
}

.product-accordion-arrow {
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.18s ease;
  justify-self: end;
}

.product-accordion[open] .product-accordion-arrow {
  transform: rotate(180deg);
}

.product-accordion-body {
  padding: 6px 10px 10px;
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
}

.product-accordion-body > * {
  margin-top: 0;
}

@media (max-width: 640px) {
  .product-accordion-head {
    grid-template-columns: 44px minmax(0, 1fr) 22px;
    gap: 9px;
    padding: 9px 11px;
  }
  .product-accordion-thumb {
    width: 44px;
    height: 44px;
  }
  .product-accordion-title h3 {
    font-size: 13px;
  }
}

.entry-list {
  display: grid;
  gap: 12px;
}

.entry-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(9, 42, 52, 0.04), 0 10px 28px rgba(9, 42, 52, 0.06);
  padding: 14px;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.entry-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(9, 42, 52, 0.05), 0 16px 36px rgba(9, 42, 52, 0.1);
}

.entry-card.product-child-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 9px 11px;
  border-radius: 8px;
  box-shadow: none;
}

.published-card.is-new {
  border-color: rgba(0, 167, 150, 0.95);
  background:
    linear-gradient(135deg, rgba(225, 255, 249, 0.98), rgba(255, 255, 255, 0.98) 46%, rgba(255, 244, 214, 0.88));
  box-shadow: 0 18px 42px rgba(0, 150, 136, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.published-card.is-new .entry-image {
  border: 2px solid rgba(0, 167, 150, 0.35);
}

.published-card.product-child-card.is-new {
  box-shadow: inset 3px 0 0 rgba(0, 167, 150, 0.7);
}

.entry-card.deadline-today-card {
  border-color: rgba(177, 106, 68, 0.62);
  box-shadow: 0 18px 42px rgba(177, 106, 68, 0.16), inset 4px 0 0 rgba(177, 106, 68, 0.72);
}

.entry-image {
  min-height: 188px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f6f5, #f8fafc);
}

.entry-image img {
  transition: transform 180ms ease;
}

.entry-card:hover .entry-image img {
  transform: scale(1.03);
}

.empty-image {
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

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

.badge-row,
.meta-row,
.date-grid,
.channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}

.badge.neutral {
  background: #e8f6f4;
  color: #31555d;
}

.badge.blue {
  background: #d9ebff;
  color: #1557c0;
}

.badge.indigo {
  background: #e7ebf2;
  color: #4338ca;
}

.badge.green {
  background: #d7fae9;
  color: #007a57;
}

.badge.amber {
  background: #fff1bd;
  color: #996100;
}

.badge.red {
  background: #ffe3e5;
  color: #bf1f31;
}

.badge.teal {
  background: #c9fbf3;
  color: #007f86;
}

.badge.hot {
  background: #f9ece5;
  color: #9b5f43;
  box-shadow: 0 0 0 2px rgba(255, 126, 87, 0.16);
}

.badge.urgent {
  background: #b16a44;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(177, 106, 68, 0.16);
}

/* Phase 82: 派生タスク状態バッジ用の muted トーン (priority=low/none/unknown) */
.badge.muted {
  background: #eef2f6;
  color: #5a6072;
}

.entry-title {
  margin: 9px 0 4px;
  font-size: 18px;
  line-height: 1.35;
}

.product-child-card .entry-title {
  margin: 4px 0 2px;
  font-size: 15px;
  line-height: 1.25;
}

.meta-row {
  color: var(--muted);
  font-size: 12px;
}

.retailer-name {
  color: #111827;
  font-size: 13px;
  font-weight: 950;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
}

.date-pill {
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f1fffb);
  padding: 9px;
}

.date-pill.urgent {
  border-color: #f3c36a;
  background: #fff7e6;
}

.date-pill.overdue {
  border-color: #fecaca;
  background: #fff1f2;
}

.date-pill.today-deadline {
  border-color: #b16a44;
  background: #f5e8e8;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px rgba(177, 106, 68, 0.12);
}

.date-pill.open-ended {
  border-color: #8ee7e0;
  background: #e7fffb;
}

.date-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.date-value {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 900;
}

.product-child-card .date-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 7px;
}

.product-child-card .date-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.product-child-card .date-label,
.product-child-card .date-value {
  margin-top: 0;
  font-size: 10px;
  line-height: 1;
}

.product-child-card .date-value {
  font-size: 11px;
}

.next-line {
  margin-top: 10px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 900;
}

.pull-line {
  margin-top: 10px;
}

.rarity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rarity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border: 1px solid #8ee7e0;
  border-radius: 999px;
  background: #e7fffb;
  color: #007f86;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}

.rarity-chip strong {
  color: #111827;
}

.memo {
  margin: 10px 0 0;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.action-steps {
  margin: 8px 0 0;
  padding: 8px 10px 8px 28px;
  border: 1px solid rgba(0, 167, 150, 0.26);
  border-radius: 8px;
  background: #f0fffb;
  color: #1f4f58;
  font-size: 12px;
  line-height: 1.45;
}

.action-steps li + li {
  margin-top: 3px;
}

.product-child-card .memo {
  margin-top: 7px;
  line-height: 1.45;
}

.product-child-card .action-steps {
  margin-top: 7px;
  padding: 7px 9px 7px 26px;
  font-size: 11px;
  line-height: 1.4;
}

.card-actions {
  align-items: flex-start;
}

.icon-link,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 34px;
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 7px;
  background: #fff;
  color: #164352;
  font-size: 12px;
  font-weight: 900;
}

.icon-link.compact,
.icon-button.compact {
  min-width: 42px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
}

.icon-button.danger {
  color: var(--red);
}

/* Phase 62: 結果確認リンク */
.icon-link.result-link {
  border-color: rgba(200, 138, 94, 0.5);
  background: #fff8e6;
  color: #8a6a3a;
  font-weight: 900;
}

.icon-link.result-link:hover {
  background: #fde68a;
  color: #8b5a32;
}

/* Phase 160 (データ系): 情報元X リンク (ぽけげと等の速報投稿へ)。icon-link とは別クラスにして
   委譲計測の open_application 誤発火を避ける。タップ領域は他アクションと揃える (min-height 34px)。 */
.source-x-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(29, 78, 137, 0.28);
  border-radius: 7px;
  background: #eef4fb;
  color: #1d4e89;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.source-x-link:hover {
  background: #dbe8f7;
  color: #163a66;
}

/* Phase 160 (データ系): 結果確認方法の注記 (例: ふるいち = LINEアプリ) */
.result-method-note {
  color: #2f6b4f;
}

.icon-button.primary-action {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 127, 134, 0.24);
}

.icon-button.primary-action:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.icon-button.compact {
  min-width: 42px;
  min-height: 30px;
}

.quick-actions {
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-actions button {
  min-height: 34px;
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 7px;
  background: #fff;
  padding: 0 12px;
  color: #164352;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.quick-actions button:hover {
  transform: translateY(-1px);
}

.quick-actions .action-forward {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.quick-actions .action-forward:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.quick-actions .action-revert {
  background: #fff;
  border-color: var(--border);
  color: #475569;
}

.quick-actions .action-revert:hover {
  background: #f1f5f9;
  border-color: var(--border-strong);
}

.quick-actions .action-cancel {
  background: #fff;
  border-color: #fecaca;
  color: var(--red);
}

.quick-actions .action-cancel:hover {
  background: #fef2f2;
}

.quick-actions .action-pulls {
  background: #eef5f0;
  border-color: #86efac;
  color: var(--green);
}

.quick-actions .action-pulls:hover {
  background: #e8f2eb;
}

/* Phase 101: 戻す/取消系は「その他の操作」に折りたたみ */
.quick-actions .more-actions {
  display: inline-block;
}

.quick-actions .more-actions summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
}

.quick-actions .more-actions summary::-webkit-details-marker {
  display: none;
}

.quick-actions .more-actions summary::after {
  content: " ▾";
  margin-left: 4px;
}

.quick-actions .more-actions[open] summary::after {
  content: " ▴";
}

.quick-actions .more-actions summary:hover {
  background: #f1f5f9;
}

.quick-actions .more-actions-body {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Phase 20: toast 通知 */
#toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 1000;
  border-radius: 10px;
  padding: 8px 14px;
  width: max-content;
  max-width: min(440px, calc(100vw - 28px));
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  color: #fff;
  background: rgba(0, 167, 150, 0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
  cursor: pointer;
  touch-action: pan-y;
  transition: opacity 180ms ease, transform 180ms ease;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

#toast.good {
  background: rgba(0, 167, 150, 0.70);
}

#toast.bad {
  background: rgba(217, 70, 70, 0.70);
}

#toast.neutral {
  background: rgba(71, 85, 105, 0.70);
}

/* Phase 75: アクション付きトースト (Undo / 続けて編集) */
#actionToast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  z-index: 1001;
  border-radius: 12px;
  padding: 10px 12px 10px 16px;
  width: max-content;
  max-width: min(520px, calc(100vw - 28px));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: rgba(17, 25, 40, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 180ms ease, transform 180ms ease;
}

#actionToast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

#actionToast.good {
  background: rgba(0, 130, 110, 0.95);
}

#actionToast.bad {
  background: rgba(180, 50, 50, 0.95);
}

#actionToast .at-message {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#actionToast .at-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

#actionToast .at-btn {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

#actionToast .at-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}

#actionToast .at-close {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  font-family: inherit;
}

#actionToast .at-close:hover {
  color: #fff;
}

@media (max-width: 720px) {
  #actionToast {
    bottom: 70px;
    width: calc(100vw - 28px);
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  #actionToast .at-message {
    flex: 1 1 100%;
    white-space: normal;
    font-size: 12px;
  }
  #actionToast .at-actions {
    flex: 1 1 auto;
  }
  #actionToast .at-btn {
    flex: 1 1 auto;
    padding: 6px 10px;
  }
}

/* Phase 56j: デモ中はトーストを右下に小さく出して、ガイドにもデモカードにも被らない */
body.demo-active #toast {
  top: auto;
  bottom: 18px;
  left: auto;
  right: 18px;
  transform: translate(0, 12px);
  text-align: left;
  max-width: min(320px, calc(100vw - 36px));
  font-size: 12px;
  padding: 7px 12px;
}

body.demo-active #toast.show {
  transform: translate(0, 0);
}

@media (max-width: 720px) {
  #toast {
    top: 12px;
    width: calc(100vw - 28px);
    padding: 9px 12px;
  }

  body.demo-active #toast {
    /* スマホでデモ中: トーストはボトムタブのすぐ上に小さく出す */
    top: auto;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    transform: translate(0, 8px);
    padding: 7px 12px;
    font-size: 12px;
  }

  body.demo-active #toast.show {
    transform: translate(0, 0);
  }
}

.evidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.evidence-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eef3f7;
  color: #49687a;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
}

.next-list,
.retailer-list,
.photo-gallery,
.product-strip,
.prep-preview,
.prep-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.product-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-mini {
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 31, 43, 0.06);
  transition:
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.product-mini:hover {
  border-color: #93c5fd;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.product-mini-image {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(219, 234, 254, 0.75), rgba(204, 251, 241, 0.56)),
    #eef2f7;
}

.product-mini-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.product-mini-body {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.product-mini-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

.product-mini-meta,
.product-mini-price,
.prep-mini-meta,
.prep-timing {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.product-mini-price {
  color: var(--green);
}

.prep-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prep-mini,
.prep-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(23, 31, 43, 0.05);
}

.prep-mini {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 11px;
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.prep-mini:hover,
.prep-card:hover {
  border-color: #99f6e4;
}

.prep-card.spotlight {
  border-color: #6fa9a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16), 0 12px 32px rgba(23, 31, 43, 0.08);
}

.entry-card.spotlight {
  border-color: #526b7a;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 12px 32px rgba(23, 31, 43, 0.08);
}

.prep-mini-title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.prep-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prep-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
}

.prep-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.prep-card h3 {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.prep-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.prep-priority.high {
  background: #f5e8e8;
  color: #b91c1c;
}

.prep-priority.medium {
  background: #f6efe0;
  color: #8b5a32;
}

.prep-priority.low {
  background: #e0f2fe;
  color: #0369a1;
}

.prep-requirements {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #374151;
  font-size: 12px;
  line-height: 1.55;
}

.next-item,
.retailer-item {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-soft);
  padding: 11px;
}

.next-item.with-image {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.next-item img {
  aspect-ratio: 1;
  border-radius: 7px;
}

.next-item-title,
.retailer-name {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.next-item-meta,
.retailer-meta,
.retailer-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.photo-gallery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.photo-tile {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  padding: 8px;
  text-align: left;
}

.photo-tile img {
  aspect-ratio: 4 / 5;
  border-radius: 7px;
}

.photo-tile span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.retailer-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.retailer-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.platform-pill,
.channel {
  border-radius: 999px;
  background: #e8f6f4;
  padding: 2px 8px;
  color: #31555d;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.channel-row {
  margin-top: 7px;
}

.backup-panel {
  display: grid;
  gap: 16px;
}

.backup-actions {
  flex-wrap: wrap;
}

.backup-note {
  border: 1px solid #8ee7e0;
  border-radius: 9px;
  background: #eef2ff;
  color: #3730a3;
  padding: 12px;
  font-size: 13px;
  line-height: 1.7;
}

/* ============== Phase 8: 今日のタスクヒーロー + 縦スクロールカレンダー ============== */

.today-hero {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(180deg, rgba(243, 248, 252, 0.9), rgba(255, 255, 255, 0.99) 56%),
    #fff;
  box-shadow: var(--shadow);
}

.today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.today-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.today-date-num {
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
}

.today-date-wd {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

.today-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.today-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

/* Phase 100: 戦績ミニカード (黒×金のワンポイント。ライト基調は維持) */
.record-mini-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: linear-gradient(135deg, #5e7a86 0%, #526b7a 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(52, 71, 90, 0.14);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.record-mini-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(52, 71, 90, 0.22);
}

.record-mini-card .rm-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.record-mini-card .rm-item small {
  font-size: 10px;
  font-weight: 800;
  color: #d8b96f;
}

.record-mini-card .rm-item strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}

.record-mini-card .rm-rate strong {
  color: #ffffff;
}

.record-mini-card .rm-arrow {
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
  color: #d8b96f;
  white-space: nowrap;
}

/* Phase 103: 初回オンボーディング */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.onboarding-card {
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 24px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  animation: onboarding-pop 200ms ease;
}

@keyframes onboarding-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.onboarding-kicker {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #b08d2f;
}

.onboarding-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.onboarding-lede {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.onboarding-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.onboarding-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.onboarding-steps .ob-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #1f2430, #12151d);
  color: #f0c94a;
  font-size: 13px;
  font-weight: 900;
}

.onboarding-steps .ob-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.onboarding-steps .ob-text strong {
  font-size: 14px;
}

.onboarding-steps .ob-text small {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.onboarding-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.onboarding-actions .button {
  width: 100%;
  justify-content: center;
  min-height: 42px;
}

.onboarding-note {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

/* Phase 114: 管理者用リンク検証オーバーレイ (#admin) */
.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}

.admin-panel {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.admin-head h2 {
  margin: 0;
  font-size: 18px;
}

.admin-sub {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #1f2430, #12151d);
  color: #f0c94a;
  vertical-align: 3px;
}

.admin-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}

.admin-summary {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.admin-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-empty {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.admin-row-ng {
  border-color: #fca5a5;
  background: #fef2f2;
}

.admin-row-ok {
  opacity: 0.75;
}

.admin-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.admin-row-main strong {
  font-size: 13px;
}

.admin-status {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-status-unverified,
.admin-status-stale {
  background: #f6efe0;
  color: #8b5a32;
}

.admin-status-ok {
  background: #dcfce7;
  color: #166534;
}

.admin-status-ng {
  background: #f5e8e8;
  color: #b91c1c;
}

.admin-retailer {
  font-size: 12px;
  color: #475569;
}

.admin-dates {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.admin-ng-memo {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 11px;
  color: #b91c1c;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.admin-open {
  font-size: 12px;
  font-weight: 700;
  color: #49687a;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eef3f7;
}

.admin-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-btn-ok {
  border-color: #86efac;
  color: #166534;
}

.admin-btn-ng {
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Phase 115: 「必要なもの」チップ (応募に必要なアカウント/アプリ/会員ランク/身分証) */
.req-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
}

.req-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  color: #8b5a32;
  white-space: nowrap;
}

.req-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #8b5a32;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* Phase 102: 戦績タブ先頭の概況カード列 (黒×金ワンポイント) */
.results-hero {
  display: grid;
  /* Phase 147.2 追補: 1fr の暗黙 min (auto) がセルの min-content で下げ止まり、
     320px 幅でページを押し広げていたため minmax(0, 1fr) で縮小可能にする */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.results-hero:empty {
  display: none;
}

.results-hero-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #46402c;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f2430, #12151d);
  box-shadow: inset 0 1px 0 rgba(240, 201, 74, 0.22), 0 8px 20px rgba(16, 22, 31, 0.16);
}

.results-hero-cell .rh-label {
  font-size: 10px;
  font-weight: 800;
  color: #c9b46c;
  white-space: nowrap;
}

.results-hero-cell .rh-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}

.results-hero-cell:nth-child(3) .rh-value,
.results-hero-cell:nth-child(4) .rh-value {
  color: #f0c94a;
}

@media (max-width: 480px) {
  .results-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phase 100: 今日やること件数チップ */
.today-chips {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: 1px;
}

.today-chip {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.today-chip.chip-apply {
  background: rgba(0, 167, 150, 0.15);
  color: var(--primary, #00a796);
}

.today-chip.chip-result {
  background: rgba(99, 102, 241, 0.18);
  color: #4f5f86;
}

.today-chip.chip-postwin {
  background: rgba(217, 119, 6, 0.18);
  color: #8a6a3a;
}

/* Phase 160 (todayHero 改善): 「今日やること」上部の押せる件数サマリー。
   水彩・くすみパステル基調。スマホ2列〜広い画面で自動増、320px でも横はみ出ししない。 */
.home-action-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 10px 0 2px;
}

.home-action-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 2px 6px rgba(52, 71, 90, 0.08);
  cursor: pointer;
  text-align: left;
}

.home-action-tile:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(52, 71, 90, 0.14);
}

.home-action-tile:focus-visible {
  outline: 2px solid var(--primary, #00a796);
  outline-offset: 2px;
}

.home-action-tile .hat-label {
  font-size: 12px;
  font-weight: 800;
  color: #34475a;
  white-space: nowrap;
}

.home-action-tile .hat-count {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: #1f6b53;
}

.home-action-tile .hat-unit {
  font-size: 11px;
  font-weight: 800;
  margin-left: 1px;
  color: #6b7b88;
}

/* 今日締切だけ控えめに強調 (色だけに依存せず、左に縦バーの形状差も付ける) */
.home-action-tile.is-urgent {
  border-color: rgba(200, 90, 70, 0.42);
  background: #fff6f3;
  border-left-width: 4px;
}

.home-action-tile.is-urgent .hat-count {
  color: #b0503c;
}

.home-action-empty {
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: #5a6b78;
}

@media (max-width: 360px) {
  .home-action-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phase 79: タスク派生ステータスのバッジ */
.task-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: 1px;
  letter-spacing: 0.04em;
}
.task-badge.urgent {
  background: #f5e8e8;
  color: #b91c1c;
}
.task-state {
  font-size: 11px;
  color: var(--muted, #5a6072);
}

.today-list {
  display: grid;
  gap: 6px;
}

.today-single-list {
  gap: 8px;
}

/* Phase 100: 0件時の空状態 */
.today-all-done {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
}

.today-all-done-mark {
  font-size: 28px;
  line-height: 1;
}

.today-all-done p {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.month-calendar {
  display: grid;
  gap: 10px;
}

.month-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.month-title {
  font-size: 14px;
  font-weight: 900;
}

.month-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.month-dot {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.month-dot.start {
  background: #e5eef3;
  color: #49687a;
}

.month-dot.deadline {
  background: #f5e8e8;
  color: #b91c1c;
}

.month-dot.result {
  background: #dcfce7;
  color: #047857;
}

.month-dot.pickup {
  background: #e2efee;
  color: #0f766e;
}

/* ============================================================
   Phase 291: カレンダーを「日付 → その日の応募先」リストへ再設計。
   - 7列×30日の月グリッドをやめる (30日中21日が空で縦を圧迫していた)
   - 1 件は「応募先バッジ + 応募先名 + 種別 + 時刻」だけ。商品名と条件は tap 先の詳細へ
   - モバイル最優先。768px 以上では同じ日の応募先を 2〜3 列に流す
   ============================================================ */
.month-days {
  display: grid;
  gap: 10px;
}

.month-day {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.month-day.today {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(200, 138, 94, 0.12);
}

.month-day.tomorrow { border-color: var(--border-strong); }

.month-day-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-weight: 900;
  min-width: 0;
}

.month-day-number {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  line-height: 1.1;
  color: var(--navy);
}

.month-day-weekday {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.month-day.weekend .month-day-weekday { color: var(--red); }
.month-day.weekend .month-day-number { color: var(--red); }

.month-today,
.month-tomorrow {
  border-radius: var(--ad-r-pill);
  padding: 2px 9px;
  font-size: var(--ad-fs-meta);
  font-weight: 900;
}

.month-today { background: var(--amber); color: #fff; }
.month-tomorrow { background: var(--panel-soft); color: var(--muted); }

.month-day-count {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  color: var(--muted);
}

.month-events {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.month-event {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 9px;
  background: #fff;
  color: var(--text);
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
}

.month-event:hover { border-color: var(--border-strong); }
.month-event:focus-visible { outline: 2px solid var(--accent, #6fa9a6); outline-offset: 2px; }

/* Phase 292: カレンダーのロゴは 32〜40px。ここが店舗識別の主役なので小さくしない。
   .rt-badge の既定 18px を上書きし、頭文字 fallback の字も比率に合わせて大きくする */
.month-event .rt-badge {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-right: 0;
  font-size: 15px;
  vertical-align: 0;
  background: var(--rt-color, var(--primary));
}
/* 後方の `.rt-badge.has-image { width: 22px }` と同詳細度で負けるため、
   ロゴありも明示的に同じサイズへ揃える (Phase 292) */
.month-event .rt-badge.has-image {
  background: #fff;
  width: 36px;
  height: 36px;
}
.month-event .rt-badge img { padding: 2px; }

.month-event .me-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.month-event .me-retailer {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  /* Phase 292: 正式店舗名を ellipsis で途中消去しない。狭い幅では折り返す */
  overflow-wrap: anywhere;
  word-break: normal;
}

.month-event .me-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}

.month-event .me-label {
  border-radius: var(--ad-r-pill);
  padding: 1px 5px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.month-event .me-time {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--text);
}

.month-event .me-time.is-unknown { color: var(--muted); font-weight: 700; }
.month-event .me-method { color: var(--muted); font-weight: 700; }
.month-event .me-count { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 種別の色は既存トークンのまま。バッジだけに色を乗せ、行そのものは静かに保つ */
.month-event.start .me-label { background: #eef3f7; color: #49687a; }
.month-event.deadline .me-label { background: #fff1f2; color: #b91c1c; }
.month-event.result .me-label { background: #eef5f0; color: #047857; }
.month-event.pickup .me-label { background: #f0fdfa; color: #0f766e; }

.month-event.today-deadline {
  border-color: var(--amber);
  background: rgba(200, 138, 94, 0.06);
}
.month-event.today-deadline .me-label { background: var(--amber); color: #fff; }

.month-event.published-source { border-color: var(--hairline); }

.month-empty-all {
  margin: 0;
  padding: 18px 4px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* 768px 以上: 同じ日の応募先を複数列に流す (行の高さを揃えるため情報は削らない) */
@media (min-width: 768px) {
  .month-day { grid-template-columns: 96px minmax(0, 1fr); }
  .month-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .month-events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 狭い端末では日付ブロックを細く、余白を詰める (1 件の高さを抑える) */
@media (max-width: 360px) {
  .month-day { grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 10px 8px; }
  .month-day-number { font-size: 19px; }
  .month-event { gap: 7px; padding: 6px 8px; font-size: 12px; }
  .month-event .me-retailer { font-size: 13px; }
  .month-event .rt-badge,
  .month-event .rt-badge.has-image { width: 32px; height: 32px; font-size: 13px; }
}

.win-rate-summary {
  display: grid;
  gap: 14px;
}

.win-rate-empty {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 16px;
  font-size: 13px;
  font-weight: 800;
}

.win-rate-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, #f8fafc, #ecfeff);
  padding: 14px;
}

.win-rate-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.win-rate-number {
  margin-top: 2px;
  font-size: 32px;
  line-height: 1;
  font-weight: 950;
}

.win-rate-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.win-rate-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.win-rate-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.win-rate-group h3 {
  margin: 0 0 10px;
  font-size: 13px;
}

.win-rate-bars {
  display: grid;
  gap: 9px;
}

.win-rate-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
}

.win-rate-row-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-rate-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
  margin-top: 5px;
}

.win-rate-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.win-rate-count {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.result-summary {
  display: grid;
  gap: 14px;
}

.result-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.result-overview > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.result-count {
  margin: 2px 0 8px;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}

.result-group-list {
  display: grid;
  gap: 10px;
}

.result-group-row {
  border-top: 1px solid var(--border);
  padding-top: 9px;
}

.result-group-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.walk-in-form {
  padding: 16px;
}

.walk-in-recent {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}

.walk-in-recent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
}

.walk-in-recent-item strong,
.walk-in-recent-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.walk-in-recent-item strong {
  color: #111827;
  font-size: 13px;
}

.walk-in-recent-item span,
.walk-in-recent-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.walk-in-recent-item .rarity-chips {
  grid-column: 1 / -1;
}

.rarity-field {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.rarity-field h3 {
  margin: 0;
  font-size: 14px;
}

.rarity-field p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.rarity-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(54px, 1fr));
  gap: 8px;
}

.rarity-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.rarity-grid input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 8px;
  font: inherit;
}

@media (max-width: 820px) {
  /* Phase 291: 日付リスト構造になったので、ここでは見出しの縦積みだけを残す
     (旧 .month-grid / .month-day.blank / .month-weekdays は構造ごと廃止) */
  .month-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.status-wrap,
.calendar-wrap {
  margin-top: 10px;
}

.calendar-scroll {
  max-height: 540px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.calendar-scroll .work-table {
  margin-top: 0;
}

.calendar-scroll .work-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ============== Phase 6: 作業リスト(14日カレンダー) ============== */

.work-overdue {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.work-overdue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.work-overdue-head h3 {
  margin: 0;
  font-size: 13px;
  color: var(--red);
}

.work-overdue-count {
  font-size: 11px;
  font-weight: 900;
  color: var(--red);
}

.work-overdue-rows {
  display: grid;
  gap: 6px;
}

.work-upcoming {
  border: 1px solid #bfdbfe;
  background: #eef3f7;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.work-upcoming-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.work-upcoming-head h3 {
  margin: 0;
  font-size: 13px;
  color: #49687a;
}

.work-upcoming-note {
  font-size: 11px;
  color: #1e40af;
  font-weight: 800;
}

.work-upcoming-rows {
  display: grid;
  gap: 6px;
}

.work-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}

.work-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 2px solid var(--border);
  background: #f8fafc;
}

.work-th-date { width: 110px; }

.work-table tbody td {
  border-bottom: 1px solid #edf1f6;
  padding: 8px;
  vertical-align: top;
}

.work-row.today td {
  background: #eef3f7;
}

.work-cell-date {
  font-weight: 900;
  white-space: nowrap;
}

.work-date-main {
  font-size: 14px;
  line-height: 1.1;
}

.work-date-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

.work-cell-date.weekend .work-date-main {
  color: var(--red);
}

.work-cell-date.today .work-date-main {
  color: var(--blue);
}

.work-today-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.work-cell-empty {
  color: #cbd5e1;
  font-size: 12px;
  text-align: center;
  padding: 4px 0;
}

.work-cell-apply,
.work-cell-result {
  min-width: 0;
}

.work-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #edf1f6;
  border-radius: 7px;
  background: #fff;
  padding: 6px 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin-bottom: 4px;
}

.work-item-img {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2f7;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 900;
}

.work-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  display: block;
}

.work-item:last-child {
  margin-bottom: 0;
}

.work-item:hover {
  background: #f8fbff;
  border-color: #bfdbfe;
}

.work-item.deadline-today {
  border-color: #fca5a5;
  background: #fff7f7;
  box-shadow: inset 3px 0 0 #b16a44;
}

.work-item-body {
  min-width: 0;
}

.work-item-title {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mini-deadline {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-right: 6px;
  border-radius: 999px;
  background: #b16a44;
  color: #fff;
  padding: 0 6px;
  font-size: 9px;
  font-weight: 950;
  vertical-align: text-bottom;
}

.work-item-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
}

.work-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .work-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .work-item-actions {
    grid-column: 1 / -1;
  }

  .work-table thead { display: none; }
  .work-table, .work-table tbody, .work-table tr, .work-table td {
    display: block;
    width: 100%;
  }
  .work-table tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px;
  }
  .work-cell-date { width: auto; padding: 0 0 6px; }
  .work-cell-apply::before { content: "未申込"; display: block; font-size: 10px; color: var(--muted); font-weight: 900; padding: 6px 0 2px; }
  .work-cell-result::before { content: "結果発表"; display: block; font-size: 10px; color: var(--muted); font-weight: 900; padding: 6px 0 2px; }
}

/* ============== Phase 4: 追跡対象セットアップ ============== */

.my-setup {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
  font-size: 12px;
}

.my-setup-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.my-setup-title {
  font-size: 13px;
  font-weight: 900;
}

.my-setup-summary {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.my-setup-alert {
  display: grid;
  gap: 8px;
  border: 1px solid #cfe7e4;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.my-setup-alert strong,
.my-setup-alert span {
  display: block;
}

.my-setup-alert strong {
  color: var(--deep);
  font-size: 12px;
  font-weight: 950;
}

.my-setup-alert span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.my-setup-alert.danger {
  border-color: #fca5a5;
  background: #fff7f7;
  box-shadow: inset 4px 0 0 #b16a44;
}

.my-setup-alert.danger strong {
  color: #991b1b;
}

.my-setup-alert.ok {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.my-setup-alert.neutral {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.my-setup-alert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.track-missing-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  /* Phase 202: 幅が親を超えないよう縮小可能にし、長い商品名は折り返す (横スクロール防止) */
  max-width: 100%;
  min-width: 0;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff;
  color: #991b1b;
  padding: 4px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.track-missing-item:hover {
  background: #f5e8e8;
}

.track-missing-item span {
  /* Phase 202: ellipsis で隠さず自然に折り返す。日本語は任意位置・長い英数字 token も分割 */
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.track-missing-item small {
  flex-shrink: 0;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 950;
}

.my-setup-intro {
  color: #49687a;
  font-weight: 800;
  font-size: 12px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #c7d2fe;
  margin-bottom: 4px;
}

.my-setup-hint {
  margin-top: 4px;
  color: #8a6a3a;
  font-weight: 800;
  font-size: 11px;
}

.my-setup-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.my-setup-label {
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
}

.my-setup-count {
  color: var(--text);
  font-size: 10px;
  margin-left: 4px;
}

.my-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

/* Phase 70: my-setup を「応募先」「商品」で折りたたみ */
.my-setup-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  margin-top: 8px;
  overflow: hidden;
}

.my-setup-section[open] {
  border-color: rgba(0, 167, 150, 0.42);
  box-shadow: 0 6px 14px rgba(9, 42, 52, 0.05);
}

.my-setup-section-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
  color: #164352;
}

.my-setup-section-head::-webkit-details-marker {
  display: none;
}

.my-setup-section-head:hover {
  background: rgba(0, 167, 150, 0.04);
}

.my-setup-section .ms-section-icon {
  font-size: 14px;
  text-align: center;
}

.my-setup-section .ms-section-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 167, 150, 0.1);
  color: #0c5b53;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.my-setup-section .ms-section-arrow {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  transition: transform 120ms ease;
}

.my-setup-section[open] .ms-section-arrow {
  transform: rotate(180deg);
}

.my-setup-section > .my-chip-bar {
  padding: 0 12px 12px;
}

.my-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Phase 202: 長い商品名でも親幅を超えないよう縮小可能に (横スクロール防止) */
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  line-height: 1.4;
  text-align: left;
}

.my-chip:hover {
  background: #eef3fb;
  border-color: #93c5fd;
}

.my-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.my-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 10px;
  font-weight: 900;
}

.my-chip:not(.active) .my-chip-mark {
  background: #eef3fb;
  color: var(--muted);
}

.my-chip.active .my-chip-mark {
  background: rgba(255, 255, 255, 0.22);
}

.my-chip-label {
  /* Phase 202: ellipsis で隠さず自然に折り返す。日本語は任意位置・長い英数字 token も分割 */
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.my-setup-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 820px) {
  .my-setup-head {
    align-items: stretch;
    flex-direction: column;
  }

  .my-setup-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============== Phase 2: 商品サマリー + スケジュール ============== */

.product-summary {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.product-summary-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(23, 31, 43, 0.05);
  padding: 12px;
}

.ps-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.ps-image {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f7;
}

.ps-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ps-image.empty-image {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.ps-info {
  min-width: 0;
}

.ps-name {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ps-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

.ps-stat strong {
  color: var(--text);
  font-weight: 900;
  margin-left: 2px;
}

.ps-stat.warn strong {
  color: #8a6a3a;
}

.ps-stat.good strong {
  color: var(--green);
}

.ps-stat.muted strong {
  color: var(--muted);
}

.ps-next {
  margin-top: 4px;
  color: #49687a;
  font-size: 11px;
  font-weight: 800;
}

.ps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Phase 338: 終了 / 日程要確認 は件数だけのリンク (チップと並べるが、チップより控えめに) */
.ps-more {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px dashed #c9d3db;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.ps-more:hover,
.ps-more:focus-visible {
  color: #49687a;
  border-color: #49687a;
}

.retailer-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 5px 9px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  min-width: 110px;
}

.retailer-chip:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
}

.chip-retailer {
  font-size: 11px;
  color: var(--text);
  line-height: 1.2;
}

.chip-status {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.2;
}

.retailer-chip.not-added {
  border-style: dashed;
  background: #f8fafc;
}

.retailer-chip.amber {
  border-color: #fcd34d;
  background: #fffbeb;
}
.retailer-chip.amber .chip-status { color: #8a6a3a; }

.retailer-chip.blue {
  border-color: #93c5fd;
  background: #eef3f7;
}
.retailer-chip.blue .chip-status { color: #49687a; }

.retailer-chip.green {
  border-color: #86efac;
  background: #eef5f0;
}
.retailer-chip.green .chip-status { color: var(--green); }

.retailer-chip.muted {
  background: #f3f4f6;
  color: var(--muted);
}
.retailer-chip.muted .chip-retailer { color: var(--muted); }

.quiet-panel {
  opacity: 0.92;
}

/* スケジュール */

.schedule-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.schedule-bucket {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.schedule-bucket.red { border-left: 4px solid var(--red); }
.schedule-bucket.amber { border-left: 4px solid #c88a5e; }
.schedule-bucket.blue { border-left: 4px solid var(--blue); }
.schedule-bucket.neutral { border-left: 4px solid var(--border-strong); }

.schedule-bucket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.schedule-bucket-head h3 {
  margin: 0;
  font-size: 13px;
}

.schedule-count {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.schedule-rows {
  display: grid;
  gap: 6px;
}

.schedule-row {
  display: grid;
  grid-template-columns: 60px 84px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #edf1f6;
  border-radius: 8px;
  background: #fbfdff;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.row-action {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.row-action:hover {
  background: #f1f5f9;
}

.row-action.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.row-action.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.row-action.good {
  border-color: #86efac;
  background: #eef5f0;
  color: var(--green);
}

.row-action.good:hover {
  background: #e8f2eb;
}

.row-action.bad {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--red);
}

.row-action.bad:hover {
  background: #f5e8e8;
}

.row-action.ghost {
  background: #fff;
  color: var(--text);
}

.schedule-status-inline {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.schedule-status-inline.not-added { background: #f1f5f9; color: var(--muted); }
.schedule-status-inline.amber { background: #f6efe0; color: #8a6a3a; }
.schedule-status-inline.blue { background: #e5eef3; color: #49687a; }
.schedule-status-inline.green { background: #e8f2eb; color: var(--green); }
.schedule-status-inline.muted { background: #f3f4f6; color: var(--muted); }
.schedule-status-inline.neutral { background: #f1f5f9; color: var(--text); }

.schedule-row:hover {
  background: #f8fbff;
  border-color: #bfdbfe;
}

.schedule-date-main {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
}

.schedule-date-sub {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
}

.schedule-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: var(--blue);
  white-space: nowrap;
}

.schedule-kind.indigo { background: #4f5f86; }
.schedule-kind.amber { background: #d97706; }
.schedule-kind.teal { background: var(--teal); }

.schedule-title {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.schedule-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.schedule-status {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
}

.schedule-status.not-added { background: #f1f5f9; color: var(--muted); }
.schedule-status.amber { background: #f6efe0; color: #8a6a3a; }
.schedule-status.blue { background: #e5eef3; color: #49687a; }
.schedule-status.green { background: #e8f2eb; color: var(--green); }
.schedule-status.muted { background: #f3f4f6; color: var(--muted); }
.schedule-status.neutral { background: #f1f5f9; color: var(--text); }

.button.compact {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

@media (max-width: 820px) {
  .ps-header {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .ps-header > button {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .schedule-row {
    grid-template-columns: 56px 76px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .schedule-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
  padding: 34px 16px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* Phase 243: 「結果を見る」の残件数 (compact 1行・sticky にしない・header を肥大させない) */
.result-remaining {
  margin: 0 0 10px;
  padding: 6px 12px;
  border: 1px solid rgba(184, 146, 60, 0.35);
  border-radius: 999px;
  background: rgba(212, 165, 55, 0.08);
  color: #0d3e42;
  font-size: 12.5px;
  font-weight: 700;
  width: max-content;
  max-width: 100%;
}

.result-remaining strong {
  font-size: 14px;
  color: #8a6410;
}

/* Phase 243: 全件入力済みの完了表現 (既存 .empty の改善のみ・自動遷移/モーダルなし) */
.empty.result-all-done {
  border-style: solid;
  border-color: rgba(184, 146, 60, 0.4);
  background: rgba(212, 165, 55, 0.07);
  color: #445;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

@media (max-width: 1180px) {
  .dashboard-grid,
  .dashboard-status,
  .entry-form {
    grid-template-columns: 1fr;
  }

  .status-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-field {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: start;
  }

  .photo-preview {
    grid-row: span 3;
  }

  .retailer-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-strip,
  .prep-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    grid-template-columns: minmax(0, 1fr) 150px 180px;
  }
}

@media (max-width: 820px) {
  .app {
    padding: 16px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .hero-card-strip {
    justify-content: flex-start;
    min-height: 92px;
  }

  .hero-card-strip img {
    width: 72px;
    border-width: 2px;
  }

  h1 {
    font-size: 28px;
  }

  .affiliate-disclosure {
    display: block;
  }

  .affiliate-disclosure strong {
    display: block;
    margin-bottom: 3px;
  }

  .form-grid,
  .status-lanes,
  .toolbar,
  .date-grid,
  .custom-retailer,
  .retailer-list,
  .photo-gallery,
  .product-strip,
  .prep-preview,
  .prep-list,
  .entry-card,
  .photo-field {
    grid-template-columns: 1fr;
  }

  .span-2,
  .span-3,
  .span-4 {
    grid-column: span 1;
  }

  .entry-image {
    min-height: 220px;
  }

  .card-top,
  .form-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.entry-list.list-view {
  gap: 8px;
}

.entry-list.list-view .entry-card {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-radius: 8px;
  box-shadow: none;
  padding: 10px;
}

.entry-list.list-view .entry-card.product-child-card {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 10px;
}

.entry-list.list-view .entry-image {
  width: 68px;
  min-height: 68px;
  height: 68px;
  border-radius: 7px;
}

.entry-list.list-view .card-top {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.entry-list.list-view .entry-title {
  margin: 5px 0 3px;
  font-size: 14px;
  line-height: 1.35;
}

.entry-list.list-view .badge {
  min-height: 19px;
  padding: 0 6px;
  font-size: 10px;
}

.entry-list.list-view .meta-row {
  gap: 5px;
  font-size: 11px;
}

.entry-list.list-view .retailer-name {
  font-size: 12px;
}

.entry-list.list-view .date-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 7px;
  overflow: visible;
  padding-bottom: 0;
}

.entry-list.list-view .date-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 0 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.entry-list.list-view .date-label {
  font-size: 10px;
  line-height: 1;
}

.entry-list.list-view .date-value {
  font-size: 11px;
  line-height: 1;
  margin-top: 0;
}

.entry-list.list-view .memo,
.entry-list.list-view .evidence-row {
  display: none;
}

.entry-list.list-view .action-steps {
  padding: 7px 9px 7px 26px;
  font-size: 11px;
}

.entry-list.list-view .quick-actions {
  margin-top: 8px;
}

.entry-list.list-view .quick-actions button,
.entry-list.list-view .quick-actions .more-actions summary,
.entry-list.list-view .icon-button,
.entry-list.list-view .icon-link {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

@media (max-width: 820px) {
  .win-rate-cols {
    /* Phase 147.2 追補2: 素の 1fr は暗黙 min=auto で子の min-content まで
       しか縮まず、320px で横はみ出しの原因になっていた */
    grid-template-columns: minmax(0, 1fr);
  }

  .win-rate-total {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow-guide,
  .flow-grid,
  .result-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .rarity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .entry-list.list-view .entry-card {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: 9px;
  }

  .entry-list.list-view .entry-card.product-child-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 9px;
  }

  .entry-list.list-view .entry-image {
    width: 58px;
    height: 58px;
    min-height: 58px;
  }

  .entry-list.list-view .card-top {
    grid-template-columns: 1fr;
  }

  .entry-list.list-view .card-actions {
    display: flex;
    gap: 6px;
  }
}

/* Phase 45: opening summary + pie chart */
.opening-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}

.opening-count-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #374151;
}

.opening-count-grid input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
}

.opening-view-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  padding: 4px;
}

.opening-view-button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #4b5563;
  cursor: pointer;
}

.opening-view-button.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 140, 140, 0.18);
}

.opening-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.opening-summary-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 14px;
}

.opening-summary-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--deep);
}

.opening-summary-card .os-meta {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.os-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

.os-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff, #e8f6f4);
  border: 1px solid var(--border);
  font-size: 12px;
  color: #374151;
  font-weight: 800;
}

.os-stat strong {
  color: var(--deep);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.os-stat-unit {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.os-stat-caption {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.os-stat-empty {
  margin: 4px 0 10px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
}

.opening-summary-sub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.opening-summary-sub .opening-summary-card {
  padding: 12px;
}

.pie-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.pie-svg {
  flex-shrink: 0;
}

/* ============ Phase 187.2: 商品画像なし用の独自プレースホルダー ============ */
/* 外部画像を保存せず HTML+CSS だけで商品を識別できるようにする。
   公式パッケージ・ロゴ・キャラクター・カード裏面は模倣せず、円と線だけで構成する。
   方針は docs/image-asset-policy.md を参照。 */
.img-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  overflow: hidden;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  text-align: center;
  min-width: 0;
}

.img-ph-name {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--deep);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.img-ph-type {
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* 装飾図形。単純な円/線のみ */
.img-ph-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ホワイトフレア: 明るい無彩色ベース + 単純な放射状 */
.img-ph-white-flare {
  background: #f5f6f7;
  border-color: #d8dcdf;
}

.img-ph-white-flare .img-ph-mark {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.95) 0 18%, rgba(0, 0, 0, 0) 19%),
    repeating-conic-gradient(from 0deg at 50% 42%,
      rgba(120, 130, 140, 0.16) 0deg 8deg, rgba(0, 0, 0, 0) 8deg 24deg);
}

.img-ph-white-flare .img-ph-name { color: #46525c; }

/* ブラックボルト: 暗い無彩色ベース + 単純な斜線 */
.img-ph-black-bolt {
  background: #3a4046;
  border-color: #2b3035;
}

.img-ph-black-bolt .img-ph-mark {
  background:
    linear-gradient(115deg, rgba(0, 0, 0, 0) 46%, rgba(255, 255, 255, 0.5) 46%, rgba(255, 255, 255, 0.5) 50%, rgba(0, 0, 0, 0) 50%),
    linear-gradient(115deg, rgba(0, 0, 0, 0) 56%, rgba(255, 255, 255, 0.22) 56%, rgba(255, 255, 255, 0.22) 58%, rgba(0, 0, 0, 0) 58%);
}

.img-ph-black-bolt .img-ph-name { color: #f2f4f5; }
.img-ph-black-bolt .img-ph-type { color: #c2c8cd; }

/* 汎用 (商品は特定できる) */
.img-ph-generic .img-ph-mark {
  background: radial-gradient(circle at 50% 34%, rgba(111, 169, 166, 0.20) 0 22%, rgba(0, 0, 0, 0) 23%);
}

/* 対象商品を特定できない抽選 */
.img-ph-unknown {
  background: repeating-linear-gradient(135deg, #f2f4f4 0 7px, #eaeeee 7px 14px);
}

.img-ph-unknown .img-ph-type { color: var(--muted); }

/* 画像の読込に失敗したときの差し替え先 (JS が outerHTML を入れ替える) */
.img-with-fallback {
  min-width: 0;
}

@media (max-width: 480px) {
  .img-ph { padding: 6px 4px; }
  .img-ph-name { font-size: 10px; }
  .img-ph-type { font-size: 8px; }
}

/* ============ Phase 187: 応募先の識別バッジ ============ */
/* retailer.imageUrl があれば画像、無ければ頭文字 + 安定色の丸バッジ。
   ロゴ画像を同梱しなくても応募先を見分けられるようにする */
.rt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--rt-color, var(--primary));
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: -3px;
  margin-right: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  user-select: none;
}

/* 画像ありの場合も下地の色と頭文字は残しておく。
   画像が読めなければ onerror で <img> が外れ、下の頭文字がそのまま見える */
.rt-badge.has-image {
  position: relative;
}

.rt-badge .rt-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rt-badge img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}

/* 「応募先」一覧カードの見出し行 */
.retailer-head-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.retailer-head-main .rt-badge {
  width: 26px;
  height: 26px;
  font-size: 12px;
  margin-right: 0;
  vertical-align: 0;
  margin-top: 1px;
}

/* ============ Phase 184d-2a: SAR / MUR のカード名 (任意) ============ */

/* 入力フォーム側 */
.hit-cards {
  display: grid;
  gap: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.hit-card-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hit-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hit-card-head h4 {
  margin: 0;
  font-size: 13px;
  color: var(--deep);
}

.hit-card-rows {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5em auto auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.hit-row input[type="text"],
.hit-row input[type="number"] {
  min-width: 0;
  width: 100%;
}

.hit-row-featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.hit-row-featured input {
  margin: 0;
}

.hit-row-remove {
  white-space: nowrap;
}

.hit-cards-note {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* 表示側 (記録カード・集計サマリ共通) */
.hit-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}

.hit-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.hit-rarity {
  font-size: 11px;
  font-weight: 900;
  color: var(--hit-color, var(--deep));
  white-space: nowrap;
  padding-top: 1px;
}

.hit-items {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hit-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
}

.hit-name {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.hit-qty {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 「注目カード」= 利用者が自分で付けた目印。価値や順位の断定はしない控えめな見た目 */
.hit-featured {
  font-size: 10px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(216, 185, 111, 0.16);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  padding: 0 6px;
  white-space: nowrap;
}

.hit-list-compact .hit-item {
  font-size: 11px;
}

@media (max-width: 480px) {
  .hit-row {
    grid-template-columns: minmax(0, 1fr) 4.5em;
    grid-template-areas:
      "name qty"
      "featured remove";
  }

  .hit-row input[type="text"] { grid-area: name; }
  .hit-row input[type="number"] { grid-area: qty; }
  .hit-row .hit-row-featured { grid-area: featured; }
  .hit-row .hit-row-remove { grid-area: remove; justify-self: end; }

  .hit-group {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Phase 184d-1.3: 主要レアリティ (SAR / MUR / AR) の 1BOX 当たり枚数。
   既存の円グラフ・構成比の下に置き、開封サマリの流れの中で読ませる */
.key-rarity {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.kr-title {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--deep);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.kr-highest {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.kr-highest strong {
  color: var(--deep);
}

.kr-highest-none {
  background: transparent;
  border-style: dashed;
}

.kr-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.kr-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.kr-name {
  font-size: 12px;
  font-weight: 900;
  color: var(--kr-color, var(--deep));
  letter-spacing: 0.02em;
}

.kr-total {
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kr-rate {
  font-size: 12px;
  color: var(--deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kr-rate-num {
  font-size: 15px;
  font-weight: 900;
}

.kr-rate-none {
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

.kr-basis {
  font-size: 10px;
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* SAR を最初に置いたうえで、控えめなゴールドの縁取りだけで見つけやすくする
   (点滅・強い警告色・極端な拡大はしない) */
.kr-item-sar {
  border-color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(216, 185, 111, 0.1), rgba(255, 255, 255, 0.95));
}

.kr-item-sar .kr-name {
  color: var(--gold);
}

/* 狭い画面は縦並び 1 列。1 項目あたり 2 行に畳み、数字と単位を折り返さない
   (320px / 375px でも横スクロールが出ないこと) */
@media (max-width: 480px) {
  .kr-grid {
    grid-template-columns: 1fr;
  }

  .kr-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 1px;
  }

  .kr-item .kr-name {
    grid-column: 1;
    grid-row: 1;
  }

  .kr-item .kr-total {
    grid-column: 1;
    grid-row: 2;
  }

  .kr-item .kr-rate {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .kr-item .kr-basis {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

/* Phase 184d-1.2: 円グラフ中央の BOX 換算値に添える「◯パック相当」 */
.pie-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pie-basis {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.pie-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.pie-legend .pie-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.pie-legend .pie-label {
  color: #374151;
  font-weight: 800;
}

.pie-legend strong {
  color: #111827;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pie-legend small {
  color: var(--muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pie-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
}

/* Phase 48: donut center text + per-pack rate */
.pie-center-num {
  fill: var(--deep);
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pie-center-sub {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.pie-rate {
  font-style: normal;
  color: #0f766e;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pie-legend li {
  grid-template-columns: 12px minmax(0, 1fr) auto auto auto;
}

.os-stat.os-stat-derived {
  background: linear-gradient(135deg, #f9efe2, #ffedd5);
  border-color: rgba(234, 88, 12, 0.36);
}

.os-stat-rate {
  margin: 6px 0 10px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
}

.os-stat-rate strong {
  color: #0f766e;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* Phase 184d-1: 排出率の分母についての小さな注記 (何を分母にしたか・何を除外したか) */
.os-stat-basis {
  display: block;
  margin: 2px 0 0;
  color: #6b8a94;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

p.os-stat-basis {
  margin: 4px 0 8px;
}

/* Phase 44: hero info toggle (mobile-first compact header) */
.hero-info-toggle {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(15, 118, 110, 0.55);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.hero-info-toggle:hover,
.hero-info-toggle:focus-visible {
  color: var(--primary);
}

.hero-info-toggle[aria-expanded="true"] {
  background: rgba(0, 167, 150, 0.14);
  color: var(--primary);
}

.hero-details {
  display: block;
}

/* Phase 44: bottom tab bar + more sheet (mobile only) */
.bottom-tabs {
  display: none;
}

.more-sheet[hidden] {
  display: none;
}

.more-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
}

.more-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(8, 47, 56, 0.42);
  cursor: pointer;
}

.more-content {
  position: relative;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -18px 40px rgba(9, 42, 52, 0.14);
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  animation: more-slide-up 180ms ease;
}

@keyframes more-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.more-header h2 {
  margin: 0;
  color: var(--deep);
  font-size: 16px;
}

.more-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: #164352;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  padding: 12px 14px;
  margin-top: 8px;
  color: #164352;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.more-item.active {
  border-color: var(--primary);
  background: #e8fbf6;
  color: #0c5b53;
}

.more-item .mi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e8f6f4;
  color: #0f766e;
  font-size: 15px;
  font-weight: 900;
}

.more-item .mi-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.more-item .mi-text strong {
  font-size: 14px;
  font-weight: 900;
}

.more-item .mi-text small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* Phase 99: デスクトップではボトムシートではなく中央モーダルとして表示 */
@media (min-width: 821px) {
  .more-sheet {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .more-content {
    width: min(460px, 100%);
    border-radius: 14px;
    padding: 18px 18px 20px;
    box-shadow: 0 24px 60px rgba(9, 42, 52, 0.24);
    animation: more-pop 160ms ease;
  }
}

@keyframes more-pop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 820px) {
  /* Hide desktop tab nav, show bottom nav */
  .tabs {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr 92px;
    gap: 12px;
    padding: 14px;
  }

  .hero-copy {
    position: relative;
  }

  .hero-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .portal-link {
    margin-top: 6px;
    padding: 4px 9px;
    font-size: 10px;
  }

  .eyebrow {
    font-size: 10px;
    margin-bottom: 2px;
  }

  h1 {
    font-size: 22px;
    margin-bottom: 0;
    padding-right: 38px;
  }

  .hero-details {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--border);
  }

  .hero-details.open {
    display: block;
  }

  .hero-details .subhead,
  .hero-details .hero-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
  }

  .hero-details .hero-note {
    margin-top: 8px;
  }

  .hero-card-strip {
    justify-content: flex-end;
    min-height: 0;
  }

  .hero-card-strip img {
    width: 48px;
    border-width: 2px;
    box-shadow: 0 8px 18px rgba(4, 62, 84, 0.18);
  }

  .hero-card-strip img + img {
    margin-left: -16px;
  }

  /* Leave space for fixed bottom bar */
  .app {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .bottom-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(13, 62, 66, 0.12);
    box-shadow: 0 -8px 20px rgba(9, 42, 52, 0.09);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
  }

  .bottom-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: none;
    background: transparent;
    color: #4b5563;
    padding: 6px 2px;
    font-family: inherit;
    cursor: pointer;
    min-height: 52px;
    border-radius: 8px;
  }

  .bottom-tab.active {
    color: #10161f;
    background: linear-gradient(180deg, rgba(240, 201, 74, 0.3), rgba(240, 201, 74, 0.16));
    box-shadow: inset 0 0 0 1px rgba(168, 132, 44, 0.28);
  }

  .bottom-tab .bt-icon {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
  }

  .bottom-tab .bt-label {
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
  }
}

/* Phase 76: hidden 属性を確実に隠す (button 要素は display:flex/inline-flex で上書きされがちなので !important) */
[hidden] {
  display: none !important;
}

/* Phase 87: 分析タブ */
.analytics-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.analytics-card {
  background: #fff;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 10px;
  padding: 12px 14px;
}

.analytics-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text);
}

.analytics-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted, #5a6072);
  line-height: 1.5;
}

.analytics-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.al-cell {
  display: flex;
  flex-direction: column;
  background: #f9fbfd;
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid #ebeef3;
}

.al-cell-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.al-cell-lbl {
  font-size: 11px;
  color: var(--muted, #5a6072);
  margin-top: 2px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.al-cell-lbl small {
  font-size: 10px;
  opacity: 0.85;
}

.analytics-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.analytics-table th {
  background: #f5f7fa;
  padding: 7px 10px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  border-bottom: 2px solid var(--border, #d0d4dc);
}

.analytics-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, #ebeef3);
  vertical-align: middle;
}

.analytics-table tr:last-child td {
  border-bottom: none;
}

.analytics-table .al-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.analytics-table .al-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.analytics-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

.al-good { color: #5a8a6c; font-weight: 700; }
.al-bad { color: #b91c1c; font-weight: 700; }
.al-rate { color: var(--primary, #00a796); font-weight: 800; }
.al-rate-base { color: var(--muted, #5a6072); font-weight: 400; font-size: 11px; }
.al-rate-num { color: var(--primary, #00a796); font-weight: 800; }
/* Phase 98: 少サンプル数の「参考値」警告バッジ */
.al-rate-warn {
  display: inline-block;
  margin: 0 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f6efe0;
  color: #8b5a32;
  font-size: 10px;
  font-weight: 700;
}
.al-rate-warn::before { content: "⚠️ "; }

.analytics-more {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted, #5a6072);
  text-align: right;
}

.analytics-disclaimer {
  margin: 0;
  font-size: 11px;
  color: var(--muted, #5a6072);
  line-height: 1.55;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .analytics-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .al-cell-num {
    font-size: 17px;
  }
}

/* Phase 77: カレンダー絞り込みサブタブ */
.month-filter-tabs {
  margin: 8px 0 12px;
}

/* Phase 74→76: アコーディオン見出しの「未追加 N件追加」ボタン (見切れ防止のため shrink許容・最小幅確保) */
.acc-add-all {
  background: rgba(0, 167, 150, 0.08);
  color: var(--primary, #00a796);
  border: 1px solid rgba(0, 167, 150, 0.35);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}

.acc-add-all:hover {
  background: var(--primary, #00a796);
  color: #fff;
}

/* Phase 76: summary 内で acc-add-all を確実に右端に置く + arrow とのスペース確保 */
.product-accordion-head {
  flex-wrap: wrap;
}
.product-accordion-head .product-accordion-title {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 480px) {
  .acc-add-all {
    padding: 4px 8px;
    font-size: 10.5px;
    margin-right: 4px;
  }
}

/* Phase 74: todayHero 説明文 */
.today-hero .today-lede {
  margin: 6px 0 10px;
  font-size: 12px;
  color: var(--muted, #5a6072);
  line-height: 1.5;
}

/* Phase 74: Tips パネル (Top にランダム表示) */
.tip-panel {
  background: linear-gradient(120deg, rgba(0, 167, 150, 0.06), rgba(116, 200, 192, 0.10));
  border: 1px solid rgba(0, 167, 150, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
}

.tip-panel .tip-icon {
  font-size: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.tip-panel .tip-body {
  flex: 1 1 auto;
  color: #1f2330;
}

.tip-panel .tip-body strong {
  display: block;
  font-size: 12px;
  color: var(--primary, #00a796);
  margin-bottom: 2px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tip-panel .tip-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.tip-panel button {
  background: transparent;
  border: 1px solid rgba(0, 167, 150, 0.4);
  color: var(--primary, #00a796);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 700;
}

.tip-panel button:hover {
  background: rgba(0, 167, 150, 0.12);
}

/* Phase 98 GPT #3: 管理画面 状況サマリ */
.entries-summary-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12px;
}
.entries-summary-bar .es-total {
  font-weight: 800;
  color: var(--text);
  margin-right: 4px;
}
.entries-summary-bar .es-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--muted, #5a6072);
}
.entries-summary-bar .es-num {
  font-size: 15px;
  font-weight: 900;
}
.entries-summary-bar .es-cell-unapplied .es-num { color: #8a6a3a; }
.entries-summary-bar .es-cell-applied .es-num { color: #49687a; }
.entries-summary-bar .es-cell-decided .es-num { color: var(--primary, #00a796); }
.entries-summary-bar .es-cell-done .es-num { color: #5a6072; }

@media (max-width: 480px) {
  .entries-summary-bar {
    font-size: 11px;
    padding: 6px 10px;
    gap: 8px;
  }
  .entries-summary-bar .es-num {
    font-size: 14px;
  }
}

/* Phase 83: 応募管理 分け方モード (status / task) セレクタ */
.entries-mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted, #5a6072);
}

.entries-mode-bar label {
  font-weight: 700;
  white-space: nowrap;
}

.entries-mode-bar select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
}

/* Phase 73: 応募管理 並び替えセレクタ */
.entries-sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted, #5a6072);
}

.entries-sort-bar label {
  font-weight: 700;
  white-space: nowrap;
}

.entries-sort-bar select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
}

/* Phase 71: 一覧表 (Excel風) — ダッシュボード4つ目のサブタブ */
.all-list-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.all-list-filters input,
.all-list-filters select {
  padding: 8px 10px;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}

.all-list-filters input {
  flex: 1 1 200px;
  min-width: 0;
}

.all-list-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted, #5a6072);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.all-list-meta .al-hint {
  opacity: 0.75;
}

.all-list-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border, #d0d4dc);
  border-radius: 8px;
  background: #fff;
}

.all-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.all-list-table .al-th {
  position: sticky;
  top: 0;
  background: #f5f7fa;
  color: #1f2330;
  font-weight: 700;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border, #d0d4dc);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}

.all-list-table .al-th:hover {
  background: #e8edf3;
}

.all-list-table .al-th.active {
  background: #e0f4f0;
  color: var(--primary, #00a796);
}

.all-list-table .al-arrow {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
}

.all-list-table .al-td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light, #ebeef3);
  vertical-align: middle;
}

.all-list-table .al-row {
  cursor: pointer;
  transition: background 0.12s;
}

.all-list-table .al-row:hover {
  background: #f9fbfd;
}

.all-list-table .al-col-product {
  position: sticky;
  left: 0;
  background: #fff;
  font-weight: 600;
  max-width: 220px;
  white-space: normal;
  z-index: 1;
}

.all-list-table .al-row:hover .al-col-product {
  background: #f9fbfd;
}

.all-list-table .al-col-date {
  font-variant-numeric: tabular-nums;
  color: #444;
}

@media (max-width: 720px) {
  .all-list-table {
    font-size: 12px;
  }
  .all-list-table .al-td,
  .all-list-table .al-th {
    padding: 6px 8px;
  }
  .all-list-table .al-col-product {
    max-width: 140px;
  }
}

/* ============ Phase 147: 初回協力案内カード + 通知スタック ============ */
/* #noticeStack はカード表示時にだけ生成される。存在しない間 (winRate:false の本番を含む)
   は #actionToast の従来の固定位置がそのまま生きる */
#noticeStack {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(520px, calc(100vw - 28px));
  pointer-events: none; /* すき間は背景操作を透過。子要素側で個別に有効化 */
}

/* スタック配下に移った Undo トーストは固定位置をやめて縦積みに参加する
   (中央寄せ・出現アニメーションの translate は縦方向のみ維持) */
#noticeStack #actionToast {
  position: static;
  left: auto;
  bottom: auto;
  transform: translateY(12px);
}

#noticeStack #actionToast.show {
  transform: translateY(0);
}

.win-rate-prompt-card {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #1f2937;
  animation: wrp-slide-in 200ms ease;
}

@keyframes wrp-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.win-rate-prompt-card .wrp-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.win-rate-prompt-card .wrp-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #12323d;
}

.win-rate-prompt-card .wrp-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

.win-rate-prompt-card .wrp-close:hover {
  color: #1f2937;
}

.win-rate-prompt-card .wrp-desc {
  margin: 0;
}

.win-rate-prompt-card .wrp-detail-toggle {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.win-rate-prompt-card .wrp-detail {
  background: #f5f8fa;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

.win-rate-prompt-card .wrp-detail p {
  margin: 0 0 6px;
}

.win-rate-prompt-card .wrp-detail p:last-child {
  margin-bottom: 0;
}

.win-rate-prompt-card .wrp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.win-rate-prompt-card .wrp-actions .button {
  flex: 1 1 auto;
}

/* 320px などの狭幅ではボタンを縦積みにして文字の重なりを防ぐ */
@media (max-width: 380px) {
  .win-rate-prompt-card .wrp-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Phase 147.1: 閲覧ロック導線 (探す/管理のリスト直前) */
.win-rate-gate-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #f5f8fa;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 12px;
  color: #2c4954;
}

.win-rate-gate-note .wrg-button {
  background: #ffffff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
}

.win-rate-gate-note .wrg-button:hover {
  border-color: var(--primary);
}

/* ============ Phase 147.2 追補: 320px 幅の横はみ出し修正 (既存問題) ============ */
/* 原因: .layout / .tab-panel.active / .sub-tab-panel のグリッドが列定義なし (auto 列) の
   ため、子孫の min-content が大きいとトラックごとページを押し広げていた (320px 実測で
   scrollWidth 377px)。列を minmax(0, 1fr) にし、直下の子へ min-width: 0 を与えて
   「ページを広げる」のではなく「子がコンテナ幅に合わせて折返す」挙動へ変える。
   overflow-x: hidden で隠す修正はしない (中身は折返しで収める)。 */
.layout,
.tab-panel.active,
.sub-tab-panel {
  grid-template-columns: minmax(0, 1fr);
}

.layout > *,
.tab-panel.active > *,
.sub-tab-panel > * {
  min-width: 0;
}

/* 320px 級では「高レア率 (SR以上)」等のラベルを折返し可能にし、
   セル幅 (約140px) 内に自然に収める (切り詰めない) */
@media (max-width: 360px) {
  .results-hero-cell .rh-label {
    white-space: normal;
  }
}

/* ============ Phase 147.2 追補2: 当選率集計まわりの 320px はみ出し修正 ============ */
/* 残り 38px の原因: ①≤820px メディアが .win-rate-cols / .result-overview を素の 1fr
   (暗黙 min=auto) で上書きし、前回の .layout 系修正より深い階層で min-content の床が
   復活していた (上のメディア内で minmax(0,1fr) へ修正済み) ②入れ子グリッド
   (.result-summary / .win-rate-bars / .result-group-list) の auto 列と、グリッド
   アイテムの automatic minimum ③.win-rate-row-head の <strong>(数値) が縮小・
   折返し不可のままラベル span と合算されて行の min-content を押し上げていた。
   ラベル側だけ縮む (既存の ellipsis を活かす)・数値側は縮めない、で解決する。 */
.result-summary,
.win-rate-bars,
.result-group-list {
  grid-template-columns: minmax(0, 1fr);
}

.result-summary > *,
.result-overview > *,
.win-rate-cols > *,
.win-rate-bars > *,
.result-group-list > * {
  min-width: 0;
}

.win-rate-row-head span {
  flex: 1 1 auto;
  min-width: 0; /* ラベル側は縮んで ellipsis (既存指定) で省略 */
}

.win-rate-row-head strong {
  flex: 0 0 auto;
  white-space: nowrap; /* 当選率の数値は縮めない・折り返さない */
}

/* ============ Phase 147.2 追補3: 管理タブ「やること別」5ボタンの 320px 文字重なり修正 ============ */
/* 原因: ≤720px の共通 .sub-tab-button が white-space:nowrap + min-width:0 のため、
   320px では各ボタン約55px まで縮むのに文字は折り返せず、overflow visible のまま
   隣のボタンへはみ出して重なっていた (ページ幅は増えないため A-3 数値確認では検出されない)。
   #entriesTaskTabs に限定し、狭い幅だけ自然な 2 行折返しを許可する。
   省略記号や overflow:hidden で隠す方式は使わない。他の .sub-tabs は変更しない */
@media (max-width: 400px) {
  #entriesTaskTabs .sub-tab-button {
    white-space: normal;
    line-height: 1.3;
    padding: 6px 2px;
    min-height: 40px; /* 2行折返し時もタップ領域を確保 (flex の stretch で5個の高さは揃う) */
  }
}

/* ============================================================
   Phase 153: 未ログイン向け「クラウド保存」案内カード (ホーム上部・コンパクト)
   ネイビー/ティール基調・控えめ。Amazon バナーより主張を強くしない。
   ============================================================ */
.cloud-backup-promo {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 var(--space, 16px);
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--panel-soft, #eef4f2) 0%, var(--card, rgba(255, 255, 255, 0.9)) 100%);
  border: 1px solid var(--border, #cddbda);
  border-left: 4px solid var(--primary, #6fa9a6);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(16, 36, 58, 0.07));
}
.cloud-backup-promo[hidden] { display: none; }
.cloud-backup-promo .cbp-body { flex: 1 1 320px; min-width: 0; }
.cloud-backup-promo .cbp-title {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--navy, #12314f);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cloud-backup-promo .cbp-icon { color: var(--teal, #0f766e); font-size: 16px; }
.cloud-backup-promo .cbp-lead {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ink, #10243a);
  line-height: 1.6;
}
.cloud-backup-promo .cbp-note {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted, #5b7085);
  line-height: 1.6;
}
.cloud-backup-promo .cbp-assure {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.cloud-backup-promo .cbp-assure li {
  font-size: 12px;
  color: var(--teal, #0f766e);
  font-weight: 700;
}
.cloud-backup-promo .cbp-assure li::before { content: "✓ "; }
.cloud-backup-promo .cbp-price {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #5b7085);
}
.cloud-backup-promo .cbp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.cloud-backup-promo .cbp-main { background: var(--primary, #6fa9a6); border-color: var(--primary, #6fa9a6); }
.cloud-backup-promo .cbp-main:hover { background: var(--primary-hover, #5e9491); }
.cloud-backup-promo .button:focus-visible {
  outline: 2px solid var(--teal, #0f766e);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .cloud-backup-promo { flex-direction: column; align-items: stretch; }
  .cloud-backup-promo .cbp-actions { justify-content: stretch; }
  .cloud-backup-promo .cbp-actions .button { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 360px) {
  .cloud-backup-promo { padding: 12px; }
  .cloud-backup-promo .cbp-actions { flex-direction: column; }
  .cloud-backup-promo .cbp-actions .button { width: 100%; }
}

/* ============================================================
   Phase 152: タブ連動の大型ヒーロー (最上部に常に1つ。activeTab に応じて
   背景画像・見出し・説明を切り替える。見出し等はすべて HTML テキストで、
   画像へ文字を焼き込まない。ページごとの追加画像ヘッダーは持たない)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-height: 240px;
  background-color: var(--navy, #12314f);
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
  transition: background-image 0.2s ease;
}
/* タブ別の背景 (非アクティブタブの画像は選択されるまで読み込まれない) */
.hero[data-hero-tab="dashboard"] { background-image: url("../assets/hero-home.jpg"); }
.hero[data-hero-tab="published"] { background-image: url("../assets/hero-search.jpg"); }
.hero[data-hero-tab="entries"]   { background-image: url("../assets/hero-manage.jpg"); }
.hero[data-hero-tab="results"]   { background-image: url("../assets/hero-results.jpg"); }
.hero[data-hero-tab="more"]      { background-image: url("../assets/hero-more.jpg"); }

/* 可読性オーバーレイ (暗くしすぎず、それぞれの背景が判別できる程度) */
.hero::before {
  background: linear-gradient(160deg, rgba(49, 72, 86, 0.40) 0%, rgba(73, 106, 119, 0.66) 100%);
  opacity: 1;
}

/* 文字はすべて白系 + 影で可読性確保 */
.hero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero h1 { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.hero .hero-desc {
  margin: 6px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 14px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero .hero-note { color: rgba(255, 255, 255, 0.9); }
.hero .hero-note a { color: #ffe6a3; border-bottom-color: rgba(255, 230, 163, 0.5); }
.hero .portal-link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
}
.hero .portal-link:hover { background: rgba(255, 255, 255, 0.24); }
.hero .hero-info-toggle { background: rgba(255, 255, 255, 0.85); color: var(--navy, #12314f); }

/* ホーム専用要素 (ポータル / 情報トグル+ノート) はホーム以外では非表示にして
   背景を広く見せる。商品3点の切り抜き (hero-card-strip) は削除済み */
.hero:not([data-hero-tab="dashboard"]) .portal-link,
.hero:not([data-hero-tab="dashboard"]) .hero-info-toggle,
.hero:not([data-hero-tab="dashboard"]) .hero-details {
  display: none;
}

/* 高さ: 控えめな帯状ヘッダー。デスクトップ 240 / タブレット 200 / スマホ 168 目安 */
@media (max-width: 820px) { .hero { min-height: 200px; } }
@media (max-width: 480px) { .hero { min-height: 168px; } .hero .hero-desc { font-size: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .hero { transition: none; }
}

/* Phase 152: ヒーロー直下の世界観の連続性。画像は足さず、ページ上部だけ淡いネイビー味を
   敷いて背景 (オフホワイト) と自然につなげる。下方向へすぐフェードして本文は従来どおり */
body {
  background:
    linear-gradient(180deg, rgba(111, 169, 166, 0.05), rgba(111, 169, 166, 0) 220px) no-repeat,
    var(--bg, #f4f7f6);
}

/* ============================================================
   Phase 152-153: ホーム各セクションの個別折り畳み (disclosure)。
   水彩・くすみ配色に合わせた共通見出し。ヒーロー画像・メインナビ・
   サブタブ・案内カード本体・カレンダー/一覧表には影響しない
   (各 render 関数が対象セクション内でのみラップする)。
   ============================================================ */
.home-disclosure { margin: 10px 0 0; }
.home-disclosure-toggle {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(62, 85, 96, 0.07));
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.home-disclosure-toggle:hover { background: rgba(255, 255, 255, 0.94); }
.home-disclosure-toggle:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}
.home-disclosure-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--text, #34475a);
  min-width: 0;
}
.home-disclosure-count {
  background: rgba(111, 169, 166, 0.18);
  color: #45726f;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.home-disclosure-action {
  margin-left: auto;
  color: var(--primary, #6fa9a6);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.home-disclosure-content { margin-top: 10px; }
.home-disclosure-content[hidden] { display: none; }
@media (max-width: 360px) {
  .home-disclosure-action { margin-left: 0; }
}

/* ============================================================
   Phase 157: データ変更後の「クラウド保存」案内カード (cloud-backup-nudge-card)。
   #noticeStack (画面下部固定) を win-rate-prompt-card と共有し、非モーダル。
   ホーム常設の .cloud-backup-promo (Phase 153) とは別コンポーネント。
   水彩・くすみパステル配色のトークン (--card / --text / --border / --primary / --muted) を使用。
   ============================================================ */
.cloud-backup-nudge-card {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(62, 85, 96, 0.07));
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #34475a);
  animation: cbn-slide-in 200ms ease;
}

@keyframes cbn-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-backup-nudge-card { animation: none; }
}

.cloud-backup-nudge-card .cbn-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cloud-backup-nudge-card .cbn-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #34475a);
  overflow-wrap: break-word;
}

.cloud-backup-nudge-card .cbn-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted, #71808d);
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px; /* 十分なタップ領域 */
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
}

.cloud-backup-nudge-card .cbn-close:hover { color: var(--text, #34475a); }

.cloud-backup-nudge-card .cbn-close:focus-visible,
.cloud-backup-nudge-card .cbn-actions .button:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}

.cloud-backup-nudge-card .cbn-desc {
  margin: 0;
  overflow-wrap: break-word;
}

.cloud-backup-nudge-card .cbn-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #71808d);
}

.cloud-backup-nudge-card .cbn-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cloud-backup-nudge-card .cbn-actions .button { flex: 1 1 auto; }

.cloud-backup-nudge-card .cbn-actions .primary {
  background: var(--primary, #6fa9a6);
  border-color: var(--primary, #6fa9a6);
}

.cloud-backup-nudge-card .cbn-actions .primary:hover { background: var(--primary-hover, #5e9491); }

/* 320px などの狭幅ではボタンを縦積みにして文字の重なりを防ぐ (win-rate-prompt-card と同基準) */
@media (max-width: 380px) {
  .cloud-backup-nudge-card .cbn-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   Phase 158: クラウド接続後のオンボーディング。
   #noticeStack (画面下部固定) を win-rate-prompt-card / cloud-backup-nudge-card と共有。
   接続中 (--connecting) / 成功メッセージ (--success) / 不一致時の選択画面 (--choice) の3種類。
   水彩・くすみパステル配色のトークンを使用 (Phase 157 の cloud-backup-nudge-card と同基準)。
   ============================================================ */
.cloud-onboarding-card {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(62, 85, 96, 0.07));
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text, #34475a);
  animation: cob-slide-in 200ms ease;
}

/* Phase 158 追補3: #cloudLoginOutcomeCard (クラウドバックアップ・復元セクション内の常設カード) は
   #noticeStack (画面下部固定) ではなく通常のパネル内フローに置くため、後続要素との間隔を確保する */
#cloudLoginOutcomeCard.cloud-onboarding-card,
#cloudLoginOutcomeCardHome.cloud-onboarding-card {
  margin-bottom: 12px;
}

/* ============================================================
   Phase 158 追補6: 共通クイックログインパネル (.cloud-quick-login)。
   ホーム案内カード / Phase 157 案内カード内にその場で開くメール入力フォーム。
   水彩・くすみパステル配色のトークンを使用。画面の大部分は覆わない。
   ============================================================ */
.cloud-quick-login {
  margin-top: 10px;
  padding: 12px;
  box-sizing: border-box;
  background: var(--card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(62, 85, 96, 0.07));
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #34475a);
}

.cloud-quick-login .cql-label {
  font-weight: 800;
  color: var(--text, #34475a);
}

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

.cloud-quick-login .cql-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
  color: var(--text, #34475a);
}

.cloud-quick-login .cql-input:focus-visible,
.cloud-quick-login .button:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}

.cloud-quick-login .cql-send {
  flex: 0 0 auto;
  background: var(--primary, #6fa9a6);
  border-color: var(--primary, #6fa9a6);
}

.cloud-quick-login .cql-send:hover { background: var(--primary-hover, #5e9491); }

.cloud-quick-login .cql-cancel { flex: 0 0 auto; }

.cloud-quick-login .cql-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #71808d);
}

.cloud-quick-login .cql-status {
  margin: 0;
  font-size: 12px;
  min-height: 1em;
}

.cloud-quick-login .cql-status[data-tone="bad"] { color: var(--amber, #c88a5e); }
.cloud-quick-login .cql-status[data-tone="good"] { color: var(--primary-hover, #5e9491); }
.cloud-quick-login .cql-status[data-tone="neutral"] { color: var(--muted, #71808d); }

/* 320px などの狭幅では入力欄とボタンを縦積みにして横はみ出しを防ぐ */
@media (max-width: 480px) {
  .cloud-quick-login .cql-row {
    flex-direction: column;
    align-items: stretch;
  }
  /* Phase 174a: 縦積み (column) では flex-basis: 200px が「高さ」に作用してメール入力欄が
     異常に縦長になるため、狭幅時だけ basis を解除して通常の1行入力欄に戻す (44px はタップ領域確保) */
  .cloud-quick-login .cql-input {
    flex: 0 0 auto;
    min-height: 44px;
  }
  .cloud-quick-login .cql-send,
  .cloud-quick-login .cql-cancel { width: 100%; }
}

/* ============================================================
   Phase 174b: 6桁コードログイン (.cloud-otp-entry)。
   メール送信成功後にだけ生成される。クイックログインパネル / 保存・復元画面の両方で共用。
   font-size 16px は iOS Safari のフォーカス時自動ズーム防止 (16px 未満だとズームする)
   ============================================================ */
.cloud-otp-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: var(--card, rgba(255, 255, 255, 0.9));
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
}

.cloud-otp-entry .otp-lead {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #34475a);
}

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

.cloud-otp-entry .otp-input {
  flex: 0 1 auto;
  width: 10em; /* Phase 174d: 8桁コードでも letter-spacing 込みで切れない幅 */
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 16px;
  letter-spacing: 0.3em;
  text-align: center;
  border: 1px solid var(--border, #cddbda);
  border-radius: var(--radius-sm, 10px);
  background: #fff;
  color: var(--text, #34475a);
}

.cloud-otp-entry .otp-verify { flex: 0 0 auto; min-height: 44px; }

.cloud-otp-entry .otp-status { margin: 0; font-size: 12px; min-height: 1em; }
.cloud-otp-entry .otp-status[data-tone="bad"] { color: var(--amber, #c88a5e); }
.cloud-otp-entry .otp-status[data-tone="good"] { color: var(--primary-hover, #5e9491); }

.cloud-otp-entry .otp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cloud-otp-entry .otp-actions .button { min-height: 44px; }

/* 狭幅では縦積み。column では flex-basis が高さに作用するため必ず basis を解除する (Phase 174a の教訓) */
@media (max-width: 480px) {
  .cloud-otp-entry .otp-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cloud-otp-entry .otp-input {
    flex: 0 0 auto;
    width: 100%;
  }
  .cloud-otp-entry .otp-verify { width: 100%; }
  .cloud-otp-entry .otp-actions .button { flex: 1 1 auto; }
}

@keyframes cob-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-onboarding-card { animation: none; }
}

.cloud-onboarding-card .cob-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cloud-onboarding-card .cob-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #34475a);
  overflow-wrap: break-word;
}

.cloud-onboarding-card .cob-desc {
  margin: 0;
  overflow-wrap: break-word;
}

/* Phase 158 追補: 別ブラウザ不一致メッセージ等の補足文 (cbn-note と同基準の控えめな配色) */
.cloud-onboarding-card .cob-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #71808d);
  overflow-wrap: break-word;
}

.cloud-onboarding-card .cob-close {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted, #71808d);
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px; /* 十分なタップ領域 */
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
}

.cloud-onboarding-card .cob-close:hover { color: var(--text, #34475a); }

.cloud-onboarding-card .cob-close:focus-visible,
.cloud-onboarding-card .cob-actions .button:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}

/* 接続中: 控えめなスピナー (prefers-reduced-motion では静止した点に) */
.cloud-onboarding-card .cob-spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border, #cddbda);
  border-top-color: var(--primary, #6fa9a6);
  animation: cob-spin 800ms linear infinite;
}

@keyframes cob-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-onboarding-card .cob-spinner { animation: none; }
}

/* 不一致時の選択画面: クラウド/端末の比較表示 */
.cloud-onboarding-card .cob-compare {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cloud-onboarding-card .cob-compare-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 8px;
  background: var(--panel-soft, #eef4f2);
  border-radius: var(--radius-sm, 10px);
}

.cloud-onboarding-card .cob-compare-row dt {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--text, #34475a);
}

.cloud-onboarding-card .cob-compare-row dd {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  color: var(--muted, #71808d);
  overflow-wrap: break-word;
}

.cloud-onboarding-card .cob-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cloud-onboarding-card .cob-actions .button { flex: 1 1 auto; }

.cloud-onboarding-card .cob-actions .primary {
  background: var(--primary, #6fa9a6);
  border-color: var(--primary, #6fa9a6);
}

.cloud-onboarding-card .cob-actions .primary:hover { background: var(--primary-hover, #5e9491); }

/* 選択画面は3択のため縦積みを基本にする (誤タップ防止・320pxでも横はみ出しなし) */
.cloud-onboarding-card .cob-actions--stack {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 380px) {
  .cloud-onboarding-card .cob-actions:not(.cob-actions--stack) {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- クラウド状態のコンパクトな表示 (全タブ、右上固定・控えめ) ---- */
.cloud-status-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  right: 8px;
  z-index: 900; /* hero/nav より前面、#noticeStack (1001) やモーダルより背面 */
  box-sizing: border-box;
  max-width: min(220px, calc(100vw - 16px));
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #cddbda);
  background: var(--card, rgba(255, 255, 255, 0.9));
  color: var(--text, #34475a);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(62, 85, 96, 0.07));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-status-pill:hover { background: var(--panel-soft, #eef4f2); }

.cloud-status-pill:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}

.cloud-status-pill[hidden] { display: none; }

.cloud-status-pill[data-tone="neutral"] { color: var(--muted, #71808d); }
.cloud-status-pill[data-tone="on"],
.cloud-status-pill[data-tone="good"] {
  color: var(--primary-hover, #5e9491);
  border-color: var(--primary, #6fa9a6);
}
.cloud-status-pill[data-tone="busy"] { color: var(--muted, #71808d); font-style: italic; }
.cloud-status-pill[data-tone="alert"] {
  color: var(--amber, #c88a5e);
  border-color: var(--amber, #c88a5e);
  background: var(--panel-soft, #eef4f2);
}

@media (max-width: 480px) {
  .cloud-status-pill {
    max-width: min(150px, calc(100vw - 16px));
    font-size: 10.5px;
    padding: 4px 8px;
  }
}

/* Phase 167: 旧 Phase 158 追補9 データ選択ダイアログ (.cloud-decision-dialog) のスタイルは選択UIの廃止に伴い削除 */

/* ============================================================
   Phase 161.1: 結果確認方法の案内 (今日やること行 / applied カード)
   自分で確認が必要なものは文言 + くすみアンバーで示す (強い危険色は使わない)。
   長文でも 320px で折り返して横にはみ出さない。
   ============================================================ */
.result-check-guidance {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.work-item-meta.result-check-guidance.needs-self-check,
.next-line.result-check-guidance.needs-self-check {
  color: var(--amber, #c88a5e);
  font-weight: 600;
}

/* ============================================================
   Phase 163: 地域フィルター (「抽選を探す」専用)
   水彩・くすみパステルに合わせた乳白カード + くすみティール。
   タップ領域 44px 以上、選択状態は色 + ✓ 文言の併用、320px で縦積み。
   ============================================================ */
.region-filter-bar {
  margin: 10px 0 12px;
}
.region-filter-bar:empty { display: none; }
.region-onboarding,
.region-summary-row,
.region-panel {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(82, 107, 122, 0.22);
  border-radius: 12px;
}
.region-onboarding { padding: 12px 14px; }
.region-onboarding-lede {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text, #2b3947);
}
.region-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.region-btn { min-height: 44px; }
.region-skip { color: var(--muted, #71808d); }
.region-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
}
.region-summary-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--deep, #526b7a);
  overflow-wrap: anywhere;
}
.link-button {
  border: none;
  background: transparent;
  color: var(--primary, #6fa9a6);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 10px 4px; /* タップ領域確保 */
  min-height: 44px;
}
.link-button:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
  border-radius: 6px;
}
.region-hidden-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(200, 138, 94, 0.10);
  border: 1px solid rgba(200, 138, 94, 0.35);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text, #2b3947);
}
.region-panel {
  margin-top: 8px;
  padding: 12px 14px;
}
.region-fieldset {
  border: none;
  margin: 0 0 12px;
  padding: 0;
}
.region-fieldset legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #71808d);
  margin-bottom: 6px;
  padding: 0;
}
.region-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}
.region-area-btn {
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid rgba(82, 107, 122, 0.28);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text, #2b3947);
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.region-area-btn.selected {
  background: rgba(111, 169, 166, 0.16);
  border-color: var(--primary, #6fa9a6);
  color: var(--deep, #526b7a);
  font-weight: 700;
}
.region-area-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.region-area-btn:focus-visible {
  outline: 2px solid var(--primary, #6fa9a6);
  outline-offset: 2px;
}
.region-enable-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #2b3947);
  min-height: 44px;
  cursor: pointer;
}
.region-enable-check input { width: 18px; height: 18px; }
.region-panel-actions {
  display: flex;
  justify-content: flex-end;
}
.badge.region-chip {
  background: rgba(111, 169, 166, 0.14);
  color: var(--deep, #526b7a);
  border: 1px solid rgba(111, 169, 166, 0.45);
}
@media (max-width: 360px) {
  .region-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-summary-row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Phase 164: 応募手続きの自動移行
   復帰確認カード (非モーダル・下部固定) / トップの応募手続き中 / 管理カードの派生表示。
   水彩・くすみパステルに合わせ、タップ領域 44px 以上・320px で縦積み。
   ============================================================ */
.application-return-card {
  position: fixed;
  left: 50%;
  bottom: 76px; /* ボトムナビ・トーストと重なりにくい位置 */
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(111, 169, 166, 0.5);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(43, 57, 71, 0.18);
  padding: 12px 14px;
  z-index: 60;
}
.application-return-card[hidden] { display: none; }
.arc-title {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--deep, #526b7a);
}
.arc-target {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text, #2b3947);
  overflow-wrap: anywhere;
}
.arc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.arc-btn { min-height: 44px; flex: 1 1 auto; }
.arc-later { color: var(--muted, #71808d); }
.arc-more {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted, #71808d);
}
.apply-pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.apply-pending-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  background: rgba(111, 169, 166, 0.10);
  border: 1px solid rgba(111, 169, 166, 0.4);
  border-radius: 12px;
}
.apply-pending-item.is-urgent {
  border-left: 4px solid var(--amber, #c88a5e);
  background: rgba(200, 138, 94, 0.10);
}
.apply-pending-item .api-body { flex: 1 1 200px; min-width: 0; }
.apply-pending-item .api-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--deep, #526b7a);
}
.apply-pending-item .api-meta {
  font-size: 12px;
  color: var(--muted, #71808d);
  overflow-wrap: anywhere;
}
.apply-pending-item .api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apply-pending-item .row-action { min-height: 44px; }
.badge.apply-pending-badge {
  background: rgba(111, 169, 166, 0.16);
  color: var(--deep, #526b7a);
  border: 1px solid rgba(111, 169, 166, 0.5);
}
.apply-pending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
}
.apply-pending-actions .apa-lede {
  font-size: 12px;
  font-weight: 700;
  color: var(--deep, #526b7a);
}
.apply-pending-actions .icon-button { min-height: 44px; }
@media (max-width: 360px) {
  .apply-pending-item .api-actions { width: 100%; }
  .arc-actions { flex-direction: column; }
}

/* ============================================================
   Phase 168: 店頭販売 (Store Sales MVP)
   storeSales フラグ OFF では該当 DOM が生成されないため、このブロックは不活性。
   探すタブの上位切替 + 4サブタブ + 投稿フォーム + 一覧/集計カード。
   水彩・くすみパステル / タップ領域 44px / 320px で縦積み。
   ============================================================ */
/* store モード中は探すタブ内の既存要素 (フィルタ・一覧・地域バー等) をまとめて隠す */
#tab-published.store-mode > :not(#publishedSectionSwitch):not(#storeSalesRoot) {
  display: none !important;
}
.published-section-switch {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 4px;
}
.published-section-switch .pss-btn {
  flex: 1 1 0;
  min-height: 44px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #34475a);
  cursor: pointer;
}
.published-section-switch .pss-btn.active {
  background: var(--primary, #6ba5a1);
  color: #fff;
}
.store-sales-root { display: flex; flex-direction: column; gap: 10px; }
.ss-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ss-tab {
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid rgba(107, 165, 161, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  cursor: pointer;
}
.ss-tab.active { background: var(--primary, #6ba5a1); border-color: var(--primary, #6ba5a1); color: #fff; font-weight: 600; }
.ss-login-gate {
  background: rgba(255, 255, 255, 0.84);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.ss-hint { margin: 0; font-size: 12px; color: #7a8a99; }
.ss-section-title { margin: 4px 0; font-size: 15px; }
.ss-back { border: none; background: transparent; color: var(--primary-hover, #5e9491); cursor: pointer; padding: 6px 0; font-size: 13px; text-align: left; }
.ss-agg { background: rgba(255, 255, 255, 0.78); border-radius: 14px; padding: 10px 12px; }
.ss-agg-title { margin: 0 0 6px; font-size: 13px; color: #5c6f80; }
.ss-agg-row { padding: 8px 4px; border-top: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; }
.ss-agg-row:first-of-type { border-top: none; }
.ss-agg-line1 { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ss-agg-time { color: #7a8a99; font-size: 12px; white-space: nowrap; }
.ss-agg-line2 { font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.ss-agg-line3 { font-size: 12px; color: #5c6f80; margin-top: 2px; overflow-wrap: anywhere; }
.ss-agg-warn, .ss-soldout-warn {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber, #c88a5e);
}
.ss-list { display: flex; flex-direction: column; gap: 8px; }
.ss-card { background: rgba(255, 255, 255, 0.86); border-radius: 14px; padding: 10px 12px; }
.ss-card-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #7a8a99; }
.ss-card-main { margin-top: 4px; font-size: 13.5px; }
.ss-store-name { margin-left: 6px; font-size: 12.5px; color: #5c6f80; }
.ss-product { margin-top: 2px; overflow-wrap: anywhere; }
.ss-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; }
.ss-stock { padding: 2px 8px; border-radius: 999px; background: rgba(107, 165, 161, 0.15); }
.ss-stock-sold_out { background: rgba(200, 138, 94, 0.18); color: #a06a44; }
.ss-stock-low { background: rgba(200, 138, 94, 0.12); }
.ss-limit, .ss-count { padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); }
.ss-note { margin: 6px 0 0; font-size: 12.5px; color: #4c5c6b; overflow-wrap: anywhere; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.ss-react {
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(107, 165, 161, 0.4);
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.ss-react.is-on { background: var(--primary, #6ba5a1); border-color: var(--primary, #6ba5a1); color: #fff; }
.ss-react-incorrect { border-color: rgba(0, 0, 0, 0.15); color: #7a8a99; }
.ss-react-incorrect.is-on { background: #8b98a5; border-color: #8b98a5; color: #fff; }
.ss-mine-badge { font-size: 11px; color: #7a8a99; margin-left: auto; }
.ss-edit, .ss-delete { border: none; background: transparent; color: var(--primary-hover, #5e9491); cursor: pointer; font-size: 12px; padding: 6px; }
.ss-delete { color: #a06a44; }
.ss-pref-list { display: flex; flex-direction: column; gap: 4px; }
.ss-pref-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  align-items: center;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 6px 12px;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}
.ss-pref-meta { font-size: 12px; color: #7a8a99; white-space: nowrap; }
.ss-form { background: rgba(255, 255, 255, 0.86); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ss-form-lead { margin: 0; font-size: 13px; }
.ss-form fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-form legend { font-size: 12.5px; font-weight: 600; color: #5c6f80; padding: 0; }
.ss-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip {
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(107, 165, 161, 0.4);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.ss-chip.is-on { background: var(--primary, #6ba5a1); border-color: var(--primary, #6ba5a1); color: #fff; font-weight: 600; }
.ss-form input[type="text"], .ss-form input[type="number"], .ss-form input[type="datetime-local"],
.ss-form select, .ss-form textarea {
  font-size: 14px;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  max-width: 100%;
}
.ss-qty-label { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.ss-qty-label input { width: 76px; }
.ss-optional summary { cursor: pointer; font-size: 13px; color: #5c6f80; min-height: 36px; display: flex; align-items: center; }
.ss-optional { display: flex; flex-direction: column; gap: 8px; }
.ss-form-actions { display: flex; gap: 8px; }
@media (max-width: 360px) {
  .published-section-switch .pss-btn { font-size: 13px; }
  .ss-chip { font-size: 12px; padding: 6px 9px; }
}

/* ============================================================
   Phase 188B: サプライ商品 (PR) — 検索後フッター / 当選後推薦 / 専用画面
   ライト基調を維持。画像なし (文字 + CSSアイコンのみ)。価格・在庫は出さない
   ============================================================ */

.supply-footer {
  margin: 22px 0 8px;
  padding: 14px 14px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}

.supply-heading {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.supply-heading-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
}

.supply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 720px) {
  .supply-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .supply-grid.supply-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
}

.supply-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 10px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.supply-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.supply-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 17px;
  background: rgba(111, 169, 166, 0.14);
}

.supply-cat-inner-sleeve { background: rgba(124, 155, 176, 0.16); }
.supply-cat-side-loader { background: rgba(184, 146, 60, 0.14); }
.supply-cat-storage-case { background: rgba(127, 174, 145, 0.16); }

.supply-name {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}

.supply-desc {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.supply-more {
  margin: 10px 0 0;
  font-size: 12px;
  text-align: right;
}

.supply-more a { color: var(--primary-hover); font-weight: 700; text-decoration: none; }
.supply-more a:hover { text-decoration: underline; }

/* 当選記録直後の非モーダル推薦 (entry カード末尾) */
.supply-win-recommend {
  margin-top: 10px;
  padding: 10px 10px 9px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--panel-soft);
}

.supply-win-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.supply-dismiss {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.supply-dismiss:hover { color: var(--text); border-color: var(--border-strong); }

/* サプライ専用画面 */
.supply-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 20px;
}

.supply-back { align-self: flex-start; }

.supply-lede {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

.supply-disclosure {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* ============================================================
   Phase 188B: アコーディオン見出しの小型プレースホルダー (「—」の置き換え)
   種別 (パック / デッキ / BOX など) を小さく表示し、white-flare / black-bolt /
   generic / unknown を配色で見分けられるようにする
   ============================================================ */

.product-accordion-thumb.ph-mini {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.ph-mini .ph-mini-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ph-mini .ph-mini-label {
  position: relative;
  padding: 2px 0 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* 汎用: カード/パック風の小さなシルエット */
.ph-mini-generic .ph-mini-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 63 / 88;
  border: 2px solid rgba(111, 169, 166, 0.55);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(111, 169, 166, 0.18), rgba(111, 169, 166, 0.03));
}

/* ホワイトフレア: 明るい放射 */
.ph-mini-white-flare { background: #f5f6f7; }
.ph-mini-white-flare .ph-mini-mark {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.95) 0 22%, rgba(0, 0, 0, 0) 23%),
    repeating-conic-gradient(from 0deg at 50% 40%,
      rgba(120, 130, 140, 0.18) 0deg 9deg, rgba(0, 0, 0, 0) 9deg 27deg);
}
.ph-mini-white-flare .ph-mini-label { color: #46525c; }

/* ブラックボルト: 暗色 + 斜線 */
.ph-mini-black-bolt { background: #3a4046; border-color: #2b3035; }
.ph-mini-black-bolt .ph-mini-mark {
  background:
    linear-gradient(115deg, rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.5) 51%, rgba(0, 0, 0, 0) 51%);
}
.ph-mini-black-bolt .ph-mini-label { color: #f2f4f5; }

/* unknown: 「?」で区別 (推測で商品を断定しない) */
.ph-mini-unknown { background: #eef0f2; }
.ph-mini-unknown .ph-mini-mark::before {
  content: "?";
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 800;
  color: rgba(113, 128, 141, 0.6);
}

/* 応募先別アコーディオンのバッジサムネ (retailer.imageUrl があればロゴ、無ければ頭文字) */
.product-accordion-thumb.thumb-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--panel);
}

.thumb-badge .rt-badge {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

/* ============================================================
   Phase 188B: 大型プレースホルダー (img-ph) の見分け改善
   generic はカード風シルエット、unknown は「?」を追加
   ============================================================ */

.img-ph-generic .img-ph-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 26%;
  aspect-ratio: 63 / 88;
  border: 2px solid rgba(111, 169, 166, 0.5);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(111, 169, 166, 0.16), rgba(111, 169, 166, 0.02));
}

.img-ph-unknown .img-ph-mark::before {
  content: "?";
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 800;
  color: rgba(113, 128, 141, 0.55);
}

@media (max-width: 380px) {
  .supply-footer { padding: 12px 10px 10px; }
  .supply-card { padding: 9px 8px 8px; }
  .supply-name { font-size: 12px; }
  .supply-desc { font-size: 10.5px; }
}

/* Phase 188B 追補2: ユーザー提供の実物写真 (evidence/product-*.jpg) は縦長のため
   切り抜き (cover) だと商品が欠ける。全体が見えるよう contain + 白背景で表示する。
   既存の商品画像 (cover のまま) には影響させない */
.entry-image img[src*="evidence/product-"] {
  object-fit: contain;
  background: #fff;
}

/* Phase 188B 追補3: 応募先ロゴは円形に無理やり切り抜かない。
   縦横比は object-fit: contain で維持し、白背景ロゴでも境界が分かるよう
   白地 + 細枠の角丸ボックスで表示する (読込失敗時は頭文字バッジへ自動復帰) */
.rt-badge.has-image {
  width: 22px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
}

.thumb-badge .rt-badge.has-image {
  width: 48px;
  height: 40px;
  border-radius: 6px;
}

/* ============================================================
   Phase 188B 追補6: PR枠の確定デザイン — 検索結果と一目で区別できる独立セクション
   (異なる背景 / 上部境界線 / 十分な余白 / 独立枠 / 遷移はボタンのみ)
   ============================================================ */

.supply-separator {
  margin-top: 28px;
  border-top: 2px solid var(--border-strong);
}

.supply-footer {
  margin-top: 16px;
  /* 検索結果カード (白) と違う、わずかに黄みのある下地で「別セクション」を示す */
  background: #f6f3e9;
  border: 1px solid #ddd3b8;
  border-radius: 12px;
}

.supply-open-note {
  margin: -4px 0 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.supply-revenue-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--muted);
}

/* カードは押せない (リンクは「Amazonで見る」ボタンだけ) */
.supply-card {
  cursor: default;
}

.supply-card:hover {
  border-color: var(--border);
  box-shadow: none;
}

.supply-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  line-height: 1.2;
}

.supply-buy-btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Phase 188B 追補7: 管理 / 戦績の常設 PR 枠は既存 .supply-footer を共用。
   狭い幅では2列→1列可 (manage-footer の supply-grid-two)。
   API 画像の土台 (imageMode:"api" 時のみ描画。失敗時は下の CSS アイコンが見える) */
.supply-icon { position: relative; overflow: hidden; }

.supply-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

@media (max-width: 340px) {
  .supply-grid.supply-grid-two { grid-template-columns: 1fr; }
}
/* Phase 190: 共通応募URLが無い抽選 (店頭QR応募など) の非リンク表示。
   押せる見た目にしない (リンクと誤認させない) */
.apply-note {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}

/* Phase 191: 受取方法による日程分岐の補助表示 (同一フォーム内の選択であることを明示) */
.schedule-variants {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 12px;
}

.schedule-variants .sv-head {
  font-weight: 800;
  color: var(--text);
}

.schedule-variants .sv-row {
  color: var(--muted);
}

.schedule-variants .sv-row strong {
  color: var(--text);
}

/* ============================================================
   Phase 193: 当選報告成功後の小型ポップアップ PR (非モーダル)
   - backdrop なし・フォーカスを奪わない・画面を覆いすぎない
   - PC: 右下 fixed の小型カード (最大 320px)
   - スマホ: 下部 (bottom-tabs の上) に左右余白つきの小型カード。
     bottom sheet にしない・ナビを覆わない・高さ最小限
   - z-index はモーダル (1000+) / トースト類より背面、通常コンテンツより前面
   ============================================================ */
#supplyWinPopup {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 890;
  max-width: 320px;
  width: calc(100vw - 32px);
}

#supplyWinPopup[hidden] { display: none; }

.supply-win-popup {
  background: var(--surface, #fff);
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(9, 42, 52, 0.18);
  padding: 10px 12px 12px;
  animation: supply-win-popup-in 0.22s ease-out 1; /* 1回だけ。連打・点滅しない */
}

@keyframes supply-win-popup-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .supply-win-popup { animation: none; }
}

.supply-win-popup .supply-card {
  border: none;
  box-shadow: none;
  padding: 4px 0 0;
}

@media (max-width: 640px) {
  #supplyWinPopup {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    /* .bottom-tabs (高さ約72px + safe-area) を覆わない */
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Phase 193B: 30th CELEBRATION 商品のフォールバック表示 (公式ロゴは使わない)。
   一般の保護用品と区別できる金系の下地。派手な点滅・アニメーションはしない */
.supply-cat-celebration-box { background: rgba(191, 155, 48, 0.20); }
.supply-cat-celebration-deck { background: rgba(191, 155, 48, 0.14); }

/* おすすめ専用画面のカテゴリ見出し */
.supply-group-heading {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-strong, #0d3e42);
  border-left: 3px solid rgba(191, 155, 48, 0.7);
  padding-left: 8px;
}

/* 専用画面の副導線 (汎用ストアフロント)。ボタンではなく控えめなテキストリンク */
.supply-storefront {
  margin-top: 14px;
  font-size: 12.5px;
}

/* ============================================================
   Phase 194: 起動ブランド演出 (スプラッシュ)
   - html.show-splash が付いたときだけ表示 (判定は index.html 冒頭の inline script)
   - タイムライン: 表示 0〜600ms (ロゴは 300ms のフェード+ごく小さな拡大) →
     600〜850ms でフェードアウト → inline script が 1100ms で DOM から除去。
     合計 約850ms (基準 500〜900ms・最大1秒以内)
   - データロード・認証と無関係に CSS だけで終わる。裏で初期化は通常どおり進む
   - pointer-events: none — 表示中も下の画面をタップできる (操作を一切邪魔しない)
   - ライト基調 (manifest の background_color と同系) + 金のワンポイント
   ============================================================ */
#brandSplash { display: none; }

html.show-splash #brandSplash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  background: #f7f2e8;
  pointer-events: none;
  animation: bs-hide 0.25s ease-in 0.6s forwards;
}

html.show-splash #brandSplash .bs-inner {
  text-align: center;
  padding: 0 24px;
  animation: bs-in 0.3s ease-out;
}

#brandSplash .bs-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(9, 42, 52, 0.14);
}

#brandSplash .bs-title {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #0d3e42;
}

#brandSplash .bs-rule {
  width: 44px;
  height: 2px;
  margin: 8px auto 6px;
  border-radius: 1px;
  background: linear-gradient(90deg, #b8923c, #d9b45a);
}

#brandSplash .bs-sub {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #5b7a80;
}

@keyframes bs-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bs-hide {
  to { opacity: 0; visibility: hidden; }
}

/* reduced-motion: 拡大なし・短い表示 (約350ms) + 200ms フェードのみ */
@media (prefers-reduced-motion: reduce) {
  html.show-splash #brandSplash {
    animation: bs-hide 0.2s linear 0.35s forwards;
  }
  html.show-splash #brandSplash .bs-inner {
    animation: none;
  }
}

/* ============================================================
   Phase 390: 起動スプラッシュのアイコン演出 (Phase 384 の研究室から本番へ)
   - どの案を出すかは index.html 冒頭の inline script が html[data-bs-fx="<id>"] に付ける
     (案と重みの表 SPLASH_FX もそこ。表を空にすると Phase 194 の静かなフェードだけに戻る)
   - CSS だけ。JS bundle を待たない・request を増やさない (アイコン画像は既存の 1 枚)
   - 既存の 850ms のタイムラインの中で動く (待ち時間を 1ms も足さない)。演出は 760ms までに終わる
   - 演出はアイコンの上下に重ねる絶対配置のレイヤーだけ = スプラッシュの文字も、裏のアプリも動かない
   - 時間は calc(var(--bs-k, 1) * Xms)。研究室の「ゆっくり」だけが --bs-k を 4 にする (本番は未定義 = 1)
   - prefers-reduced-motion: 演出レイヤーを出さず、アイコンは静止 (Phase 194 の短いフェードだけ)
   ============================================================ */
#brandSplash {
  /* アイコンの絵の八芒星 (長い 4 本 + 短い 4 本) */
  --bs-star: polygon(50% 2%, 54.6% 38.9%, 71.2% 28.8%, 61.1% 45.4%, 98% 50%, 61.1% 54.6%, 71.2% 71.2%, 54.6% 61.1%, 50% 98%, 45.4% 61.1%, 28.8% 71.2%, 38.9% 54.6%, 2% 50%, 38.9% 45.4%, 28.8% 28.8%, 45.4% 38.9%);
}
#brandSplash .bs-mark { position: relative; display: inline-block; width: 76px; height: 76px; }
#brandSplash .bs-mark .bs-icon { display: block; }
#brandSplash .bsx-fx { display: none; position: absolute; pointer-events: none; }
/* アイコンの絵の八芒星の位置 (icon-512 で実測: 横 52%・縦 47%) */
#brandSplash .bsx-star, #brandSplash .bsx-glow { left: 52%; top: 47%; transform: translate(-50%, -50%); }
#brandSplash .bsx-star i, #brandSplash .bsx-back i {
  position: absolute; inset: 0; clip-path: var(--bs-star);
  background: radial-gradient(circle, #fffdf4 0, #f6dc8f 45%, #c99a3b 100%);
}
#brandSplash .bsx-clip { inset: 0; overflow: hidden; border-radius: 18px; }
#brandSplash .bsx-spark { font-size: 13px; line-height: 1; color: #f6d77e; text-shadow: 0 0 6px rgba(255, 230, 160, 0.95); }
#brandSplash .bsx-s1 { left: -10px; top: 6px; }
#brandSplash .bsx-s2 { right: -9px; bottom: 4px; font-size: 10px; }

/* ---- A. Star Ignite: 星の中心が灯る → 八芒星が一瞬ふくらむ → 静かに戻る ---- */
[data-bs-fx="ignite"] #brandSplash .bsx-glow, [data-bs-fx="ignite"] #brandSplash .bsx-star { display: block; }
[data-bs-fx="ignite"] #brandSplash .bsx-glow {
  width: 96px; height: 96px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 250, 226, 0.98) 0, rgba(255, 222, 140, 0.62) 32%, rgba(255, 214, 120, 0) 70%);
  animation: bsx-glow calc(var(--bs-k, 1) * 520ms) cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--bs-k, 1) * 110ms) both;
}
[data-bs-fx="ignite"] #brandSplash .bsx-star {
  width: 46px; height: 46px; filter: drop-shadow(0 0 6px rgba(255, 214, 120, 0.9));
  animation: bsx-ignite calc(var(--bs-k, 1) * 470ms) cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--bs-k, 1) * 160ms) both;
}
[data-bs-fx="ignite"] #brandSplash .bs-mark { animation: bsx-breath calc(var(--bs-k, 1) * 420ms) ease-out calc(var(--bs-k, 1) * 170ms) both; }
@keyframes bsx-glow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); } 38% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
@keyframes bsx-ignite { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-12deg); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.55) rotate(6deg); } 70% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.92) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(0); } }
@keyframes bsx-breath { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }

/* ---- B. Aster Spin: 八芒星が 1/8 回転してピタッと止まる → 光がアイコンを横切る ---- */
[data-bs-fx="spin"] #brandSplash .bsx-star, [data-bs-fx="spin"] #brandSplash .bsx-clip, [data-bs-fx="spin"] #brandSplash .bsx-glow { display: block; }
[data-bs-fx="spin"] #brandSplash .bsx-glow {
  width: 84px; height: 84px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 250, 226, 0.95) 0, rgba(255, 222, 140, 0.55) 34%, rgba(255, 214, 120, 0) 70%);
  animation: bsx-glow calc(var(--bs-k, 1) * 360ms) ease-out calc(var(--bs-k, 1) * 330ms) both;
}
[data-bs-fx="spin"] #brandSplash .bsx-star {
  width: 44px; height: 44px; filter: drop-shadow(0 0 7px rgba(255, 214, 120, 0.95));
  animation: bsx-spin calc(var(--bs-k, 1) * 470ms) cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--bs-k, 1) * 90ms) both;
}
[data-bs-fx="spin"] #brandSplash .bsx-band {
  position: absolute; top: -10%; bottom: -10%; width: 70%; left: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, rgba(255, 246, 214, 0) 0, rgba(255, 246, 214, 0.95) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 246, 214, 0.95) 55%, rgba(255, 246, 214, 0) 100%);
  animation: bsx-sweep calc(var(--bs-k, 1) * 260ms) ease-in-out calc(var(--bs-k, 1) * 380ms) both;
}
@keyframes bsx-spin { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-60deg) scale(0.6); } 55% { opacity: 1; transform: translate(-50%, -50%) rotate(4deg) scale(1.1); } 72% { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(1); } }
@keyframes bsx-sweep { 0% { transform: translateX(-120%) skewX(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(190%) skewX(-12deg); opacity: 0; } }

/* ---- C. Comic Burst: 背後に短い集中線 → アイコンが POP ---- */
[data-bs-fx="burst"] #brandSplash .bsx-lines, [data-bs-fx="burst"] #brandSplash .bsx-pop { display: block; }
[data-bs-fx="burst"] #brandSplash .bs-mark { isolation: isolate; animation: bsx-pop calc(var(--bs-k, 1) * 380ms) cubic-bezier(0.2, 0.9, 0.3, 1.3) calc(var(--bs-k, 1) * 110ms) both; }
[data-bs-fx="burst"] #brandSplash .bsx-lines {
  left: 50%; top: 50%; width: 176px; height: 176px; z-index: -1;
  background: repeating-conic-gradient(from 4deg, rgba(13, 62, 66, 0.62) 0 2.6deg, rgba(13, 62, 66, 0) 2.6deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 40% 60%, transparent 63%);
          mask: radial-gradient(circle, transparent 0 38%, #000 40% 60%, transparent 63%);
  animation: bsx-lines calc(var(--bs-k, 1) * 320ms) ease-out calc(var(--bs-k, 1) * 110ms) both;
}
[data-bs-fx="burst"] #brandSplash .bsx-pop {
  right: -26px; top: -14px; font: italic 900 15px/1 system-ui, sans-serif; letter-spacing: 0.02em; color: #f2c14e;
  text-shadow: -1.5px 0 #0d3e42, 1.5px 0 #0d3e42, 0 -1.5px #0d3e42, 0 1.5px #0d3e42, 2px 2px 0 #0d3e42;
  animation: bsx-poptext calc(var(--bs-k, 1) * 420ms) cubic-bezier(0.2, 0.9, 0.3, 1.4) calc(var(--bs-k, 1) * 170ms) both;
}
@keyframes bsx-pop { 0% { transform: scale(0.86) rotate(-4deg); } 45% { transform: scale(1.14) rotate(2deg); } 75% { transform: scale(0.98) rotate(0); } 100% { transform: scale(1) rotate(0); } }
@keyframes bsx-lines { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-6deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(0); } }
@keyframes bsx-poptext { 0% { opacity: 0; transform: scale(0.2) rotate(-18deg); } 50% { opacity: 1; transform: scale(1.18) rotate(-8deg); } 80% { opacity: 1; transform: scale(1) rotate(-10deg); } 100% { opacity: 0; transform: scale(1.05) rotate(-10deg); } }

/* ---- D. Foil Flash: ホロの虹色がアイコン表面を横切る → 一瞬輝く ---- */
[data-bs-fx="foil"] #brandSplash .bsx-clip, [data-bs-fx="foil"] #brandSplash .bsx-spark { display: block; }
[data-bs-fx="foil"] #brandSplash .bsx-band {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 230%; mix-blend-mode: overlay;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 64, 160, 0.75) 30%, rgba(255, 220, 60, 0.75) 38%, rgba(60, 255, 180, 0.75) 46%, rgba(40, 170, 255, 0.75) 54%, rgba(190, 80, 255, 0.7) 62%, rgba(255, 255, 255, 0) 74%);
  animation: bsx-foil calc(var(--bs-k, 1) * 460ms) cubic-bezier(0.4, 0, 0.2, 1) calc(var(--bs-k, 1) * 130ms) both;
}
[data-bs-fx="foil"] #brandSplash .bsx-clip::after {
  content: ""; position: absolute; inset: 0; background: #fffbe9; mix-blend-mode: soft-light; opacity: 0;
  animation: bsx-flash calc(var(--bs-k, 1) * 200ms) ease-out calc(var(--bs-k, 1) * 470ms) both;
}
[data-bs-fx="foil"] #brandSplash .bsx-s1 { animation: bsx-twinkle calc(var(--bs-k, 1) * 320ms) ease-out calc(var(--bs-k, 1) * 380ms) both; }
[data-bs-fx="foil"] #brandSplash .bsx-s2 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 450ms) both; }
@keyframes bsx-foil { 0% { transform: translateX(-75%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } }
@keyframes bsx-flash { 0% { opacity: 0; } 35% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes bsx-twinkle { 0% { opacity: 0; transform: scale(0.2) rotate(-30deg); } 45% { opacity: 1; transform: scale(1.25) rotate(10deg); } 100% { opacity: 0; transform: scale(0.7) rotate(25deg); } }

/* ---- E. Paper Reveal: 裏向きのカードがくるりと返ってアイコンになる ---- */
[data-bs-fx="paper"] #brandSplash .bs-inner { perspective: 420px; }
[data-bs-fx="paper"] #brandSplash .bs-mark { transform-style: preserve-3d; animation: bsx-flip calc(var(--bs-k, 1) * 560ms) cubic-bezier(0.25, 0.9, 0.3, 1.08) calc(var(--bs-k, 1) * 40ms) both; }
[data-bs-fx="paper"] #brandSplash .bs-mark .bs-icon { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
[data-bs-fx="paper"] #brandSplash .bsx-back {
  display: block; inset: 0; border-radius: 18px; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fbf6ea; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #d9b45a, 0 6px 18px rgba(9, 42, 52, 0.14);
}
[data-bs-fx="paper"] #brandSplash .bsx-back i { inset: auto; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background: #c99a3b; }
@keyframes bsx-flip { 0% { transform: rotateY(-180deg) translateY(4px); } 34% { transform: rotateY(-180deg) translateY(0); } 78% { transform: rotateY(8deg); } 100% { transform: rotateY(0); } }

/* ---- F. Rare Rays (Phase 390 新作): 背後に金の後光が開いて回る → アイコンがふわっと持ち上がる ---- */
[data-bs-fx="rays"] #brandSplash .bsx-lines, [data-bs-fx="rays"] #brandSplash .bsx-glow, [data-bs-fx="rays"] #brandSplash .bsx-spark { display: block; }
[data-bs-fx="rays"] #brandSplash .bs-mark { isolation: isolate; animation: bsx-lift calc(var(--bs-k, 1) * 520ms) cubic-bezier(0.2, 0.8, 0.3, 1.2) calc(var(--bs-k, 1) * 80ms) both; }
[data-bs-fx="rays"] #brandSplash .bsx-lines {
  left: 50%; top: 50%; width: 200px; height: 200px; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(232, 186, 80, 0.85) 0 7deg, rgba(232, 186, 80, 0) 7deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0 26%, rgba(0, 0, 0, 0.55) 44%, transparent 68%);
          mask: radial-gradient(circle, #000 0 26%, rgba(0, 0, 0, 0.55) 44%, transparent 68%);
  animation: bsx-rays calc(var(--bs-k, 1) * 640ms) cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--bs-k, 1) * 60ms) both;
}
[data-bs-fx="rays"] #brandSplash .bsx-glow {
  width: 90px; height: 90px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 250, 226, 0.9) 0, rgba(255, 222, 140, 0.5) 34%, rgba(255, 214, 120, 0) 70%);
  animation: bsx-glow calc(var(--bs-k, 1) * 420ms) ease-out calc(var(--bs-k, 1) * 300ms) both;
}
[data-bs-fx="rays"] #brandSplash .bsx-s1 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 320ms) both; }
[data-bs-fx="rays"] #brandSplash .bsx-s2 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 420ms) both; }
@keyframes bsx-rays { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-30deg); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(18deg); } }
@keyframes bsx-lift { 0% { transform: translateY(6px) scale(0.94); } 50% { transform: translateY(-4px) scale(1.06); } 100% { transform: translateY(0) scale(1); } }

/* ---- G. Shooting Star (Phase 390 新作): 流れ星がアイコンの八芒星に飛び込み、星が灯る ---- */
[data-bs-fx="comet"] #brandSplash .bsx-comet, [data-bs-fx="comet"] #brandSplash .bsx-star, [data-bs-fx="comet"] #brandSplash .bsx-glow, [data-bs-fx="comet"] #brandSplash .bsx-spark { display: block; }
[data-bs-fx="comet"] #brandSplash .bsx-comet {
  /* 頭 (右端) が八芒星の位置に来たところで止まる。向きは飛んでくる方向 (左上 → 右下 ≒ 35°) */
  left: calc(52% - 80px); top: calc(47% - 2px); width: 80px; height: 4px; border-radius: 2px;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(233, 181, 68, 0), rgba(233, 181, 68, 0.75) 55%, #ffe9a8 85%, #fff);
  filter: drop-shadow(0 0 3px rgba(233, 181, 68, 0.95));
  animation: bsx-comet calc(var(--bs-k, 1) * 320ms) cubic-bezier(0.5, 0, 0.9, 0.6) calc(var(--bs-k, 1) * 70ms) both;
}
[data-bs-fx="comet"] #brandSplash .bsx-comet::after {
  /* 流れ星の頭 (光る点) */
  content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #fff4cf 35%, rgba(246, 205, 110, 0) 70%);
}
[data-bs-fx="comet"] #brandSplash .bsx-star {
  width: 40px; height: 40px; filter: drop-shadow(0 0 7px rgba(255, 214, 120, 0.95));
  animation: bsx-ignite calc(var(--bs-k, 1) * 380ms) cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--bs-k, 1) * 370ms) both;
}
[data-bs-fx="comet"] #brandSplash .bsx-glow {
  width: 92px; height: 92px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 250, 226, 0.98) 0, rgba(255, 222, 140, 0.6) 32%, rgba(255, 214, 120, 0) 70%);
  animation: bsx-glow calc(var(--bs-k, 1) * 380ms) ease-out calc(var(--bs-k, 1) * 370ms) both;
}
[data-bs-fx="comet"] #brandSplash .bsx-s1 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 420ms) both; }
[data-bs-fx="comet"] #brandSplash .bsx-s2 { animation: bsx-twinkle calc(var(--bs-k, 1) * 280ms) ease-out calc(var(--bs-k, 1) * 470ms) both; }
@keyframes bsx-comet { 0% { opacity: 0; transform: translate(-90px, -63px) rotate(35deg) scaleX(0.4); } 25% { opacity: 1; } 85% { opacity: 1; transform: translate(-4px, -3px) rotate(35deg) scaleX(1); } 100% { opacity: 0; transform: translate(0, 0) rotate(35deg) scaleX(0.2); } }

/* ---- H. Gold Stamp (Phase 390 新作): アイコンが判子のようにトンと押され、金の輪が 2 重に広がる ---- */
[data-bs-fx="stamp"] #brandSplash .bsx-ring, [data-bs-fx="stamp"] #brandSplash .bsx-spark { display: block; }
[data-bs-fx="stamp"] #brandSplash .bs-mark { animation: bsx-stamp calc(var(--bs-k, 1) * 380ms) cubic-bezier(0.5, 0, 0.3, 1) calc(var(--bs-k, 1) * 0ms) both; }
[data-bs-fx="stamp"] #brandSplash .bsx-ring { inset: -3px; border-radius: 21px; }
[data-bs-fx="stamp"] #brandSplash .bsx-ring::before, [data-bs-fx="stamp"] #brandSplash .bsx-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2.5px solid #d9b45a; opacity: 0;
  animation: bsx-ring calc(var(--bs-k, 1) * 420ms) cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--bs-k, 1) * 230ms) both;
}
[data-bs-fx="stamp"] #brandSplash .bsx-ring::after { border-width: 1.5px; animation-delay: calc(var(--bs-k, 1) * 330ms); }
[data-bs-fx="stamp"] #brandSplash .bsx-s1 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 260ms) both; }
[data-bs-fx="stamp"] #brandSplash .bsx-s2 { animation: bsx-twinkle calc(var(--bs-k, 1) * 300ms) ease-out calc(var(--bs-k, 1) * 330ms) both; }
@keyframes bsx-stamp { 0% { opacity: 0; transform: scale(1.4) rotate(-6deg); } 55% { opacity: 1; transform: scale(0.93) rotate(0); } 75% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bsx-ring { 0% { opacity: 0.95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

@media (prefers-reduced-motion: reduce) {
  [data-bs-fx] #brandSplash .bsx-fx { display: none !important; }
  [data-bs-fx] #brandSplash .bs-mark { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ============================================================
   Phase 287: 管理画面のセクション整理
   - 「静かな手帳」の方向を維持。派手な admin dashboard にしない
   - 390px 最優先。投稿一覧は横 table にせずカード化する
   ============================================================ */
.admin-head-title { min-width: 0; }
.admin-head-note {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.admin-nav-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  min-height: 36px;
}
.admin-nav-btn.is-active {
  background: #1f2430;
  border-color: #1f2430;
  color: #ffffff;
}
.admin-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-sec-title { margin: 0 0 8px; font-size: 15px; }
.admin-sec-sub { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.admin-tools-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.admin-tools-head .admin-filter { flex: 0 0 auto; white-space: nowrap; }
.admin-filter input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.admin-overview { margin: 4px 0 10px; }
.ao-total { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.ao-total strong { font-size: 26px; font-weight: 800; color: var(--text); }
.ao-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0 0 8px;
}
.ao-list-sub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ao-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--panel-soft);
  min-width: 0;
}
.ao-item dt { font-size: 12px; color: var(--muted); }
.ao-item dd { margin: 0; font-size: 14px; font-weight: 800; }
.ao-item-alert { border-color: rgba(184, 146, 60, 0.55); }
.ao-item-alert dd { color: #8a6d1f; }
.ao-note { margin: 0; font-size: 12px; color: var(--muted); }
/* 概要カードと同じ数字の1行版。コピーして貼れるように残すが、主役はカード側 */
#adminCloudStats { margin-top: 10px; font-size: 11px; font-weight: 500; color: var(--muted); }

/* Phase 192: クラウド投稿管理 (#admin 内・管理者のみ表示) */
.admin-cloud { margin-top: 0; padding-top: 0; border-top: 0; }
.admin-cloud-title { margin: 0 0 8px; font-size: 15px; }
.admin-cloud-axes { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; }
.ac-axis summary { cursor: pointer; font-weight: 700; }
.ac-axis-row { padding: 2px 0 2px 12px; color: var(--muted); }
.ac-unpub { color: var(--amber); font-weight: 700; }
.admin-cloud-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.admin-cloud-filters input, .admin-cloud-filters select { font-size: 12px; padding: 4px 6px; }
.ac-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--hairline); font-size: 12px; }
.ac-row-hidden { opacity: 0.6; background: var(--panel-soft); }
.ac-cell { min-width: 0; }
.ac-key, .ac-uid { color: var(--muted); font-family: monospace; font-size: 11px; }
.ac-status-won { color: var(--green); font-weight: 800; }
.ac-status-lost { color: var(--red); font-weight: 800; }
.ac-hidden-mark { color: var(--amber); font-weight: 700; }
.admin-cloud-filters input, .admin-cloud-filters select { max-width: 100%; min-width: 0; }
/* Phase 287: 「非表示を含む」のチェックが grid で引き伸ばされないように明示する */
.admin-cloud-filters label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.admin-cloud-filters label input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; }
.ac-key { word-break: break-all; }

/* Phase 287: スマホでは横 table にせずカード化する (横 scroll を主要操作にしない) */
@media (max-width: 430px) {
  .admin-panel { padding: 14px 12px 16px; }
  .admin-nav { gap: 4px; }
  .admin-nav-btn { flex: 1 1 auto; padding: 7px 8px; font-size: 12px; }
  .ao-list, .ao-list-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-cloud-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-cloud-filters label,
  .admin-cloud-filters #acReasonMemo,
  .admin-cloud-filters #acApply { grid-column: 1 / -1; }
  .ac-row { display: block; padding: 8px 2px; }
  .ac-row .ac-cell { display: inline-block; margin: 0 8px 2px 0; }
  .ac-row .ac-date { display: block; font-weight: 700; margin-bottom: 2px; }
  .ac-row .ac-key { display: block; margin: 2px 0; }
  .ac-row .icon-button { margin: 6px 6px 0 0; min-height: 36px; }
}

/* ============================================================
   Phase 197: みんなの当選率の段階公開 (5〜9人 = 参考値)
   - 通常表示との区別は控えめな琥珀系ワンポイント (過剰な警告にしない)
   ============================================================ */
.win-rate-tag.win-rate-ref {
  border-color: rgba(184, 146, 60, 0.55);
  color: #8a6d1f;
  background: rgba(184, 146, 60, 0.08);
}

.win-rate-ref-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(184, 146, 60, 0.5);
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 700;
  color: #8a6d1f;
  background: rgba(184, 146, 60, 0.08);
  vertical-align: middle;
}

/* #admin 集計一覧の公開状態ラベル */
.ac-pub-full { color: var(--green, #2e7d54); font-weight: 700; }
.ac-pub-ref { color: #8a6d1f; font-weight: 700; }

/* ============================================================
   Phase 200: 初見 (管理中0件) 向けの導線案内 (探すタブ上部)
   - モーダルではない・ライト基調・控えめな金アクセント
   - 320/375px で崩れない。CTA は44px以上
   ============================================================ */
#firstUseIntro[hidden] { display: none; }

.first-use-intro {
  position: relative;
  margin: 4px 0 12px;
  padding: 12px 40px 12px 14px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-left: 3px solid rgba(184, 146, 60, 0.7);
  border-radius: 10px;
  background: #fbf7ee;
}

.first-use-intro .fui-lead {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #0d3e42;
}

.first-use-intro .fui-steps {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #5b7a80;
}

.first-use-intro .fui-step {
  display: inline-block;
  white-space: nowrap;
}

.first-use-intro .fui-cta {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 800;
}

.first-use-intro .fui-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #7a8f93;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.first-use-intro .fui-dismiss:hover { background: rgba(13, 62, 66, 0.06); }

@media (max-width: 360px) {
  .first-use-intro .fui-steps { font-size: 11.5px; }
  .first-use-intro { padding-right: 36px; }
}

/* ============================================================
   Phase 204: ホーム画面追加 (A2HS) 案内カード
   - first-use-intro と同じ控えめトーン (ライト基調・左に金のアクセント)
   - standalone 起動・×後は JS 側で hidden
   - 320/375px で崩れない。ボタンは44px以上
   ============================================================ */
#a2hsGuide[hidden] { display: none; }

.a2hs-guide {
  position: relative;
  margin: 4px 0 12px;
  padding: 12px 40px 12px 14px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-left: 3px solid rgba(184, 146, 60, 0.7);
  border-radius: 10px;
  background: #fbf7ee;
}

.a2hs-guide .a2hs-lead {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  color: #0d3e42;
}

.a2hs-guide .a2hs-steps {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #5b7a80;
  overflow-wrap: anywhere;
}

.a2hs-guide .a2hs-cta {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 800;
}

.a2hs-guide .a2hs-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #7a8f93;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.a2hs-guide .a2hs-dismiss:hover { background: rgba(13, 62, 66, 0.06); }

@media (max-width: 360px) {
  .a2hs-guide { padding-right: 36px; }
  .a2hs-guide .a2hs-steps { font-size: 11.5px; }
}

/* ============================================================
   Phase 214C: 当選おめでとう演出 (非モーダル下部シート)
   - backdrop なし・操作を塞がない・約1秒の軽量 confetti/glow のみ
   - prefers-reduced-motion では動きを省く (.wc-reduced)
   - 320/375px で崩れない。ボタンは 44px 以上
   ============================================================ */
#winCelebration[hidden] { display: none; }

.win-celebration {
  position: fixed;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 24px));
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px 40px 14px 16px;
  border: 1px solid rgba(184, 146, 60, 0.55);
  border-radius: 14px;
  background: #fffdf7;
  box-shadow: 0 8px 28px rgba(13, 62, 66, 0.22), 0 0 0 4px rgba(212, 165, 55, 0.12);
  z-index: 60;
  animation: wc-lift 0.9s ease-out;
}

@keyframes wc-lift {
  0% { transform: translateX(-50%) translateY(16px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.win-celebration.wc-reduced { animation: none; }

.wc-confetti-box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
}

.wc-confetti {
  position: absolute;
  top: -10px;
  width: 7px;
  height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: wc-fall 1.1s ease-in forwards;
}

@keyframes wc-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(150px) rotate(260deg); opacity: 0; }
}

.wc-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 950;
  color: #0d3e42;
}

.wc-product {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #5b7a80;
  overflow-wrap: anywhere;
}

.wc-question {
  margin: 0 0 6px;
  font-size: 12px;
  color: #5b7a80;
}

.wc-qty-row, .wc-unit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.wc-qty, .wc-unit {
  min-width: 44px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}

.wc-qty.active, .wc-unit.active {
  border-color: rgba(184, 146, 60, 0.9);
  background: #fbf3df;
  color: #0d3e42;
}

.wc-qty-input {
  width: 76px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
}

.wc-actions {
  display: flex;
  gap: 8px;
}

.wc-actions .wc-save { min-height: 44px; font-weight: 900; }
.wc-actions .wc-skip { min-height: 44px; }

.wc-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #7a8f93;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.wc-dismiss:hover { background: rgba(13, 62, 66, 0.06); }

@media (max-width: 360px) {
  .win-celebration { padding: 14px 36px 12px 12px; }
  .wc-title { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .win-celebration { animation: none; }
  .wc-confetti { animation: none; opacity: 0; }
}

/* ============================================================
   Phase 214D: トップ「獲得状況」カード
   - 当選/確保/購入待ちの商品別サマリ。対象0件なら JS が hidden
   - 320/375px 最優先: チップは折返し・横 overflow 禁止
   ============================================================ */
#acquisitionStatus[hidden] { display: none; }

.acq-card {
  margin: 4px 0 12px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(184, 146, 60, 0.45);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7 0%, #fbf5e6 100%);
  box-shadow: 0 1px 6px rgba(13, 62, 66, 0.06);
}

.acq-heading {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 950;
  color: #0d3e42;
}

.acq-group {
  padding: 8px 0 6px;
  border-top: 1px dashed rgba(13, 62, 66, 0.14);
}

.acq-group:first-of-type { border-top: none; padding-top: 2px; }

.acq-product {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #445c60;
  overflow-wrap: anywhere;
}

.acq-unit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
}

.acq-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  background: #fff;
}

.acq-label { font-size: 10.5px; font-weight: 800; color: #7a8f93; }
.acq-num { font-size: 16px; font-weight: 950; color: #0d3e42; }
.acq-unit { font-size: 10.5px; font-weight: 800; color: #7a8f93; }

.acq-cell.acq-win { border-color: rgba(184, 146, 60, 0.6); background: #fdf8ec; }
.acq-cell.acq-win .acq-num { color: #8a6414; }
.acq-cell.acq-secured { border-color: rgba(74, 124, 89, 0.5); background: #f1f7f2; }
.acq-cell.acq-secured .acq-num { color: #2f6b45; }
.acq-cell.acq-pending .acq-num { color: #8a3b36; }

.acq-noqty {
  font-size: 11px;
  color: #7a8f93;
  overflow-wrap: anywhere;
}

/* Phase 216: 4商品目以降の折り畳み + 導出表示の脚注 */
.acq-more > summary {
  padding: 6px 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b7a80;
  cursor: pointer;
  list-style-position: inside;
}

.acq-more > summary:hover { color: #0d3e42; }

.acq-derived-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: #9a8a5c;
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  .acq-card { padding: 12px 10px 8px; }
  .acq-num { font-size: 15px; }
}

/* ============================================================
   Phase 215: 確保数量の入力 (確認シート / 編集シート / 小演出)
   ============================================================ */
#securedPrompt[hidden], #quantityEditor[hidden] { display: none; }

.secured-prompt, .quantity-editor {
  position: fixed;
  left: 50%;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 24px));
  max-height: 72vh;
  overflow-y: auto;
  padding: 14px 40px 12px 14px;
  border: 1px solid rgba(74, 124, 89, 0.5);
  border-radius: 14px;
  background: #f8fcf8;
  box-shadow: 0 8px 24px rgba(13, 62, 66, 0.2);
  z-index: 60;
}

.quantity-editor { border-color: rgba(13, 62, 66, 0.25); background: #fbfdfd; }

.sq-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 950;
  color: #0d3e42;
}

.sq-win {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #8a6414;
}

.sq-unit-label {
  align-self: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #445c60;
}

.sq-over {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #8a3b36;
  overflow-wrap: anywhere;
}

.acq-edit {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(13, 62, 66, 0.18);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  color: #5b7a80;
  cursor: pointer;
  vertical-align: middle;
}

.acq-edit:hover { background: rgba(13, 62, 66, 0.05); }

.qe-note {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.6;
  color: #7a8f93;
}

.qe-row {
  padding: 8px 0;
  border-top: 1px dashed rgba(13, 62, 66, 0.14);
}

.qe-name {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #445c60;
  overflow-wrap: anywhere;
}

.qe-meta {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #7a8f93;
}

.qe-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qe-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 800;
  color: #7a8f93;
}

.qe-field input, .qe-field select {
  width: 84px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
}

.secured-flash {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(47, 107, 69, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 0 0 6px rgba(107, 163, 104, 0.25), 0 6px 20px rgba(13, 62, 66, 0.3);
  pointer-events: none;
  z-index: 70;
  animation: sq-flash 0.7s ease-out forwards;
}

@keyframes sq-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 360px) {
  .secured-prompt, .quantity-editor { padding: 12px 36px 10px 12px; }
  .qe-field input, .qe-field select { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .secured-flash { display: none; }
}

/* ============================================================
   Phase 218: 当選後「次のアクション」センター (トップ最上部)
   獲得状況カード (.acq-card) と同じゴールド基調で統一。ライト基調維持
   ============================================================ */
.next-action-center {
  margin: 4px 0 12px;
}

.nac-primary {
  padding: 14px 14px 12px;
  border: 1px solid rgba(184, 146, 60, 0.55);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7 0%, #fbf3df 100%);
  box-shadow: 0 1px 6px rgba(13, 62, 66, 0.08);
}

.nac-primary.is-urgent {
  border-color: rgba(194, 85, 79, 0.6);
  background: linear-gradient(180deg, #fffdf7 0%, #fdeeea 100%);
}

.nac-primary.is-overdue {
  border-color: rgba(120, 120, 120, 0.5);
  background: linear-gradient(180deg, #fcfcfc 0%, #f3f1ee 100%);
}

.nac-head {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #8a6a1f;
  letter-spacing: 0.02em;
}

.nac-primary.is-urgent .nac-head { color: #a4433d; }
.nac-primary.is-overdue .nac-head { color: #5a5a5a; }

.nac-product {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #0d3e42;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.nac-retailer {
  font-size: 12px;
  font-weight: 500;
  color: #5a6b6d;
}

.nac-qty {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.nac-qty-cell {
  font-size: 13px;
  font-weight: 600;
  color: #0d3e42;
  white-space: nowrap;
}

.nac-qty-pending { color: #8a6a1f; }

.nac-deadline {
  margin: 0 0 10px;
  font-size: 13px;
  color: #33484a;
}

.nac-deadline.nac-today,
.nac-deadline.nac-soon {
  font-weight: 700;
  color: #a4433d;
}

.nac-deadline.nac-overdue {
  font-weight: 700;
  color: #5a5a5a;
}

.nac-deadline.nac-none { color: #6b7a7c; }

.nac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nac-actions .row-action {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}

.nac-more {
  margin-top: 6px;
}

.nac-more > summary {
  cursor: pointer;
  padding: 6px 4px;
  font-size: 12.5px;
  color: #0d3e42;
  list-style-position: inside;
}

.nac-more > summary:hover { text-decoration: underline; }

.today-all-done-lite {
  padding: 10px 12px;
}

.today-all-done-lite p {
  margin: 0;
  font-size: 13px;
  color: #6b7a7c;
}

@media (max-width: 374px) {
  .nac-primary { padding: 12px 10px 10px; }
  .nac-product { font-size: 14px; }
  .nac-qty-cell { font-size: 12.5px; }
}

/* ============================================================
   Phase 219: 獲得実績 (戦績タブ「当落・記録」上部)
   ============================================================ */
.ach-total {
  margin: 0 0 10px;
  font-size: 14px;
  color: #0d3e42;
}

.ach-total strong {
  font-size: 20px;
  color: #8a6a1f;
}

.ach-products {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}

.ach-product {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid rgba(184, 146, 60, 0.35);
  border-radius: 10px;
  background: linear-gradient(180deg, #fffdf7 0%, #fbf5e6 100%);
}

.ach-product-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0d3e42;
  overflow-wrap: anywhere;
}

.ach-product-qty {
  font-size: 13px;
  font-weight: 600;
  color: #33484a;
}

.ach-history-heading {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: #0d3e42;
}

.ach-history-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(13, 62, 66, 0.08);
  font-size: 13px;
}

.ach-history-row:last-child { border-bottom: none; }

.ach-h-date {
  flex: 0 0 auto;
  min-width: 52px;
  color: #6b7a7c;
  font-variant-numeric: tabular-nums;
}

.ach-h-body {
  flex: 1 1 180px;
  min-width: 0;
}

.ach-h-product {
  font-weight: 600;
  color: #0d3e42;
  overflow-wrap: anywhere;
}

.ach-h-retailer {
  margin-left: 6px;
  font-size: 12px;
  color: #5a6b6d;
}

.ach-h-qty {
  flex: 0 0 auto;
  font-weight: 600;
  color: #33484a;
  white-space: nowrap;
}

.ach-h-status {
  flex: 0 0 auto;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(184, 146, 60, 0.14);
  color: #8a6a1f;
}

.ach-history-more { margin-top: 4px; }

.ach-history-more > summary {
  cursor: pointer;
  padding: 6px 4px;
  font-size: 12.5px;
  color: #0d3e42;
}

.ach-history-more > summary:hover { text-decoration: underline; }

.ach-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #6b7a7c;
  line-height: 1.5;
}

@media (max-width: 374px) {
  .ach-product { padding: 7px 8px; }
  .ach-h-date { min-width: 44px; }
}

/* ============================================================
   Phase 220: 当選シェア (祝福内ボタン / 履歴シェア / fallback シート)
   ============================================================ */
.wc-share-row {
  margin-top: 8px;
  text-align: center;
}

.wc-share {
  border: none;
  background: none;
  padding: 6px 10px;
  font-size: 12.5px;
  color: #8a6a1f;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wc-share:hover { color: #6d5316; }

.ach-h-share {
  flex: 0 0 auto;
  border: 1px solid rgba(184, 146, 60, 0.5);
  border-radius: 999px;
  background: #fffdf7;
  padding: 2px 10px;
  font-size: 11.5px;
  color: #8a6a1f;
  cursor: pointer;
}

.ach-h-share:hover { background: #fbf3df; }

#winShareSheet[hidden] { display: none; }

.win-share-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 62, 66, 0.35);
  z-index: 1200;
}

.win-share-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(480px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: #fffdf7;
  border: 1px solid rgba(184, 146, 60, 0.5);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  padding: 16px 16px 18px;
  z-index: 1201;
  box-shadow: 0 -4px 20px rgba(13, 62, 66, 0.18);
}

.ws-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0d3e42;
}

.ws-preview {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: #33484a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

.ws-note {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: #6b7a7c;
}

.ws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-actions .button {
  min-height: 42px;
  flex: 1 1 auto;
}

@media (max-width: 374px) {
  .win-share-sheet { padding: 12px 10px 14px; }
  .ws-preview { font-size: 12.5px; }
}

/* ============================================================
   Phase 221: 獲得状況の walk-in (出会い買い) 分離表示
   ============================================================ */
.acq-walkin {
  margin: 2px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3e5c7b;
}

.acq-walkin-note {
  font-size: 11px;
  font-weight: 500;
  color: #6b7a7c;
}

/* ============================================================
   Phase 222: トップ情報設計 — 今日やることの折り畳み
   ============================================================ */
.today-more {
  margin-top: 4px;
}

.today-more > summary {
  cursor: pointer;
  padding: 8px 4px;
  font-size: 12.5px;
  color: #0d3e42;
  list-style-position: inside;
}

.today-more > summary:hover { text-decoration: underline; }

/* ============================================================
   Phase 224: 30th抽選準備セクション (#prep30th) + バナー内部遷移リンク
   ============================================================ */
.prep-30th {
  border: 1px solid rgba(184, 146, 60, 0.55);
  background: linear-gradient(180deg, #fffdf7 0%, #fbf3df 100%);
}

.p30-title {
  margin: 0 0 4px;
  font-size: 17px;
  color: #0d3e42;
}

.p30-countdown {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: #33484a;
}

.p30-countdown strong {
  font-size: 18px;
  color: #8a6a1f;
}

.p30-lede {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #5a6b6d;
}

.p30-h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #0d3e42;
}

.p30-note {
  margin: 4px 0 8px;
  font-size: 11.5px;
  color: #6b7a7c;
  line-height: 1.5;
}

.p30-lot {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  margin: 0 0 6px;
  cursor: pointer;
  font: inherit;
}

.p30-lot:hover { border-color: rgba(184, 146, 60, 0.7); }

.p30-lot.is-closed { opacity: 0.6; }

/* Phase 229: 応募期間未確認 (随時型など) — 終了扱いの薄さにはせず、受付中よりは控えめに */
.p30-lot-wrap.is-undated .p30-lot { opacity: 0.85; }

/* Phase 239: 今日・明日の抽選ダイジェスト (HOME・compact。ライト基調+金のワンポイント) */
.today-digest {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 146, 60, 0.35);
  border-radius: 12px;
  background: rgba(184, 146, 60, 0.05);
}
.td-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}
.td-cat + .td-cat {
  margin-top: 8px;
}
.td-cat-head {
  font-size: 12px;
  font-weight: 600;
  color: #6b5b28;
  margin-bottom: 3px;
}
.td-count {
  font-weight: 700;
}
.td-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  margin: 2px 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
.td-row:hover {
  border-color: rgba(184, 146, 60, 0.6);
}
.td-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-retailer {
  flex: 0 0 auto;
  color: #666;
  font-size: 11px;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-tag {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(184, 146, 60, 0.5);
  color: #8a6d1f;
  background: rgba(184, 146, 60, 0.08);
}
.td-tag.td-done {
  border-color: rgba(0, 128, 96, 0.4);
  color: #0c5b53;
  background: rgba(0, 167, 150, 0.08);
}
.td-more {
  display: block;
  margin-top: 3px;
  padding: 4px 6px;
  border: none;
  background: none;
  color: #6b5b28;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* ============ Phase 246: HOME 3ステップ入口 (探す → 結果待ち → 購入・受取) ============
   fresh user には 0件の説明文がオンボーディングを兼ねる。ライト基調+金ワンポイント */
.step-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  margin: 10px 0 4px;
}

.step-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 62px;
  padding: 8px 9px;
  border: 1px solid rgba(184, 146, 60, 0.35);
  border-radius: 12px;
  background: #fffdf7;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.step-tile:hover {
  box-shadow: 0 4px 12px rgba(13, 62, 66, 0.12);
  transform: translateY(-1px);
}

.step-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.step-no {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0d3e42;
  color: #f4e5b8;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.step-label {
  font-size: 12.5px;
  font-weight: 800;
  color: #0d3e42;
}

.step-sub {
  font-size: 10.5px;
  line-height: 1.35;
  color: #8a8264;
}

.step-count {
  font-size: 15px;
  font-weight: 800;
  color: #8a6410;
}

.step-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(212, 165, 55, 0.18);
  color: #6b5b28;
}

.step-arrow {
  align-self: center;
  color: rgba(184, 146, 60, 0.7);
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 359px) {
  .step-tile { padding: 7px 6px; min-height: 58px; }
  .step-label { font-size: 11.5px; }
  .step-sub { font-size: 10px; }
}

/* ============ Phase 246: 抽選カードの CTA 再編 ============ */
/* 「応募する」を圧倒的 primary に */
a.icon-link.apply-primary {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0d3e42;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: none;
  box-shadow: 0 3px 8px rgba(13, 62, 66, 0.22);
}

a.icon-link.apply-primary:hover { background: #12545a; }

/* URLなし抽選: 応募方法 (applyLabel) を最も分かりやすく提示 (リンクではない) */
.apply-note-primary {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(13, 62, 66, 0.45);
  background: rgba(13, 62, 66, 0.05);
  color: #0d3e42;
  font-size: 12.5px;
  font-weight: 700;
}

/* 「すでに応募済み？」= 低重量 text action */
.text-action {
  border: none;
  background: none;
  padding: 4px 6px;
  color: #6b5b28;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* 「☆ 気になる」= 低重量 */
.star-action {
  border: 1px solid rgba(184, 146, 60, 0.4);
  background: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  color: #8a6410;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.star-action:hover { background: rgba(212, 165, 55, 0.1); }

.added-note {
  font-size: 12px;
  font-weight: 700;
  color: #2e7d5b;
  padding: 4px 6px;
}

/* ============ Phase 247: 抽選カード UI v2 (探す) ============
   商品画像を主役にしたショッピングカード。既存画像は全て縦長 (0.67〜0.95)・白背景の実測結果から
   cover ではなく contain + 固定高ヒーロー帯を採用 (箱絵/BOX文字が切れない・寸法予約で CLS 0) */
.published-card.card-v2 {
  display: block;
  padding: 0;
  overflow: hidden;
}

.card-v2 .pcard-hero {
  position: relative;
  height: 158px;
  background: linear-gradient(180deg, #fbfaf5, #f3f0e6);
  border-bottom: 1px solid rgba(184, 146, 60, 0.18);
}

.card-v2 .pcard-hero .entry-image,
.card-v2 .pcard-hero .img-ph,
.card-v2 .pcard-hero .img-ph-fallback {
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}

.card-v2 .pcard-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px 0;
  box-sizing: border-box;
}

/* 締切オーバーレイ = カードで最も強い時間情報 (右上) */
.pcard-deadline {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(13, 62, 66, 0.88);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
  pointer-events: none;
}

.pcard-deadline.dl-urgent { background: #c2554f; }
.pcard-deadline.dl-soon { background: #b97d1f; }
.pcard-deadline.dl-upcoming { background: #2e6f8e; }
.pcard-deadline.dl-open { background: #3f7d5d; }
.pcard-deadline.dl-closed { background: rgba(100, 106, 116, 0.85); }
.pcard-deadline.dl-unknown { background: rgba(100, 106, 116, 0.7); }

.pcard-new {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #d4783c;
  pointer-events: none;
}

.card-v2 .entry-content { padding: 10px 12px 12px; }

/* 「どこで応募するか」行 — 画像直下で最初に読む行 */
.pcard-retailer-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.pcard-retailer-row .retailer-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pcard-retailer-name {
  font-size: 13px;
  font-weight: 800;
  color: #0d3e42;
  overflow-wrap: anywhere;
}

/* 商品別グループの子カード (ヒーローなし・応募先と締切が主役) はインラインチップ表示 */
.product-child-card .pcard-deadline {
  position: static;
  pointer-events: auto;
  box-shadow: none;
  font-size: 11px;
  padding: 3px 9px;
}

.card-v2 .entry-title {
  margin: 2px 0 4px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pcard-brief { min-height: 0; }
.pcard-brief:empty { display: none; }

/* 長い offer-note / applyLabel が右端で切れないように折返しを保証 */
.card-v2 .offer-note,
.card-v2 .apply-note-primary {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pcard-price {
  font-size: 12.5px;
  font-weight: 800;
  color: #8a6410;
}

/* 詳細折りたたみ — 既存情報は全部ここ (削除しない) */
.pcard-details { margin-top: 8px; }

.pcard-details summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #6b5b28;
  padding: 6px 0 2px;
  border-top: 1px dashed rgba(184, 146, 60, 0.3);
}

.pcard-details summary::-webkit-details-marker { display: none; }
.pcard-details summary::before { content: "▾ "; }
.pcard-details[open] summary::before { content: "▴ "; }
.pcard-details .pd-close-label { display: none; }
.pcard-details[open] .pd-open-label { display: none; }
.pcard-details[open] .pd-close-label { display: inline; }
.pcard-details > .date-grid { margin-top: 8px; }

.pd-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pd-close {
  display: block;
  margin: 10px auto 0;
  border: 1px solid rgba(184, 146, 60, 0.35);
  background: #fff;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #6b5b28;
  cursor: pointer;
}

@media (max-width: 359px) {
  .card-v2 .pcard-hero { height: 138px; }
}

/* Phase 234: entry カードのカレンダー導線 (primary より弱い secondary。カードを大きくしない) */
.cal-line {
  margin-top: 6px;
}
.cal-line .cal-action {
  font-size: 12px;
  padding: 4px 8px;
}

.p30-lot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.p30-badge-now {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0d3e42;
  color: #f7e8c0;
}

.p30-badge-past {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13, 62, 66, 0.08);
  color: #5a6b6d;
}

.p30-lot-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0d3e42;
}

.p30-lot-period {
  font-size: 12px;
  color: #5a6b6d;
}

.p30-lot-req {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #33484a;
  overflow-wrap: anywhere;
}

.p30-sec {
  margin: 10px 0 0;
  border-top: 1px solid rgba(13, 62, 66, 0.1);
  padding-top: 8px;
}

.p30-sec > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  color: #0d3e42;
  padding: 4px 0;
  list-style-position: inside;
}

.p30-sec > summary:hover { text-decoration: underline; }

.p30-prep {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(13, 62, 66, 0.07);
}

.p30-prep:last-child { border-bottom: none; }

.p30-prep-name {
  font-size: 13px;
  font-weight: 600;
  color: #0d3e42;
  text-decoration: none;
}

.p30-prep-name:hover { text-decoration: underline; }

.p30-prep-req {
  flex-basis: 100%;
  font-size: 11.5px;
  color: #6b7a7c;
  overflow-wrap: anywhere;
}

.p30-aeon {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p30-aeon-link {
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #0d3e42;
  text-decoration: none;
}

.p30-aeon-link:hover { border-color: rgba(184, 146, 60, 0.7); }

.cb-link-internal {
  border: none;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 374px) {
  .p30-title { font-size: 15.5px; }
  .p30-aeon-link { font-size: 11.5px; padding: 5px 8px; }
}

/* ============================================================
   Phase 225: 30th準備チェック (準備できた記録・進捗)
   ============================================================ */
.p30-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 10px;
  background: #fff;
}

.p30-progress-label {
  font-size: 12px;
  font-weight: 700;
  color: #0d3e42;
}

.p30-progress-num {
  font-size: 13px;
  color: #33484a;
}

.p30-progress-num strong {
  font-size: 17px;
  color: #8a6a1f;
}

.p30-progress-bar {
  flex: 1 1 120px;
  height: 8px;
  border-radius: 999px;
  background: rgba(13, 62, 66, 0.1);
  overflow: hidden;
  min-width: 80px;
}

.p30-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8923c, #d4a537);
}

.p30-progress-note {
  flex-basis: 100%;
  font-size: 10.5px;
  color: #6b7a7c;
}

.p30-check {
  flex: 0 0 auto;
  border: 1px solid rgba(184, 146, 60, 0.55);
  border-radius: 999px;
  background: #fffdf7;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a6a1f;
  cursor: pointer;
  font-family: inherit;
}

.p30-check:hover { background: #fbf3df; }

.p30-check.on {
  background: #0d3e42;
  border-color: #0d3e42;
  color: #f7e8c0;
}

.p30-prep.is-checked .p30-prep-name,
.p30-prep.is-checked .p30-prep-req,
.p30-prep.is-checked .p30-badge-past {
  opacity: 0.55;
}

.cb-prep-chip {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0d3e42;
  color: #f7e8c0;
  white-space: nowrap;
}

/* ============================================================
   Phase 226: 30th作戦ボード (上部サマリ・受付中/まもなく/終了・黒金ヘッダ)
   ============================================================ */
.p30-board-head {
  padding: 10px 12px;
  margin: -14px -14px 12px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #10262b 0%, #0d3e42 70%, #1c4b50 100%);
}

.p30-board-head .p30-title { color: #f7e8c0; }

.p30-board-head .p30-countdown { color: #e8dcc0; }

.p30-board-head .p30-countdown strong { color: #ffd968; }

.p30-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}

.p30-sum-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #f2ead2;
  border: 1px solid rgba(212, 165, 55, 0.35);
  white-space: nowrap;
}

.p30-sum-chip strong { color: #ffd968; }

.p30-sum-glow {
  border-color: rgba(255, 217, 104, 0.85);
  box-shadow: 0 0 8px rgba(255, 217, 104, 0.35);
}

.p30-mystate {
  margin: 2px 0 6px;
  font-size: 12px;
  color: #e8dcc0;
}

.p30-board-head .p30-progress { background: rgba(255, 255, 255, 0.94); }

.p30-lot-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 6px;
}

.p30-lot-wrap .p30-lot { flex: 1 1 auto; margin: 0; }

.p30-lot-apply {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(184, 146, 60, 0.6);
  border-radius: 10px;
  background: #fffdf7;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a6a1f;
  text-decoration: none;
  white-space: nowrap;
}

.p30-lot-apply:hover { background: #fbf3df; }

.p30-lot-applylabel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  color: #5a6b6d;
  max-width: 96px;
  text-align: center;
}

@media (max-width: 374px) {
  .p30-sum-chip { font-size: 11px; padding: 3px 8px; }
  .p30-lot-apply { padding: 0 8px; font-size: 11.5px; }
  .p30-lot-applylabel { max-width: 76px; font-size: 10px; }
}

/* ============================================================
   Phase 227: 商品別グループ内の販売単位 subline (D)
   ============================================================ */
.offer-note {
  font-size: 11.5px;
  color: #3e5c7b;
  background: rgba(62, 92, 123, 0.08);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Phase 248: マイ抽選 = 3ステップ + 履歴 / entry カード v2
   Phase 247 (published カード v2) と同じ視覚言語。chip/details は
   既存 .pcard-* を再利用し、別系統のカードデザインを複製しない
   ============================================================ */

/* 「結果待ち」タブ内の要入力 badge (§3) */
.tab-input-badge {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #7a4f12;
  background: #fdecc8;
  border: 1px solid rgba(185, 125, 31, 0.45);
}

/* 「履歴」は 3 ステップの外の棚 (§6): 右へ離して一段弱く。
   flex-grow を切らないと折返し時に全幅へ伸びて壊れて見える (375px 実測) */
.sub-tab-button.tab-archive {
  flex: 0 1 auto;
  margin-left: auto;
  border-style: dashed;
  background: transparent;
  color: #64748b;
  font-weight: 700;
}

/* モバイルの #entriesTaskTabs .sub-tab-button { flex: 1 1 31% } (Phase 233・ID指定) より強くする */
#entriesTaskTabs .sub-tab-button.tab-archive {
  flex: 0 1 auto;
  border: 1px dashed rgba(100, 116, 139, 0.55);
  border-radius: 999px;
  padding-left: 14px;
  padding-right: 14px;
}

.sub-tab-button.tab-archive.active {
  color: #0d3e42;
  border-style: solid;
  background: rgba(13, 62, 66, 0.08);
}

/* 「ステータス別」切替は secondary control へ降格 (§7) — 並び替え行の右端に小さく */
.entries-sort-bar .mode-detail-label {
  margin-left: auto;
  font-size: 11px;
  color: #64748b;
}

.entries-sort-bar #entriesViewModeSelect {
  font-size: 12px;
  color: #475569;
}

/* entry カード v2: chip はインライン (画像オーバーレイにしない — 左サムネ構成のため) */
.ecard-v2 .pcard-deadline {
  position: static;
  pointer-events: auto;
  box-shadow: none;
}

.ecard-v2 .pcard-retailer-row {
  margin-bottom: 2px;
}

.ecard-v2 .entry-title {
  margin: 2px 0 6px;
  font-size: 15px;
}

.ecard-v2 .quick-actions {
  margin-top: 6px;
}

.ecard-v2 .quick-actions .apply-primary {
  margin-right: 4px;
}

.ecard-v2 .quick-actions .text-action {
  border: none;
  background: none;
  color: #2e6f8e;
  text-decoration: underline;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 4px;
}

.ecard-v2 .pcard-details {
  margin-top: 8px;
}

.ecard-v2 .pcard-details .badge-row {
  margin-top: 8px;
}

.ecard-v2 .pd-links {
  align-items: center;
}

/* §10 実測方針: マイ抽選は連続処理の頻度が高いため、published の 158px ヒーローではなく
   コンパクトな左サムネイル+本文。デスクトップは既存 150px 列、モバイルは 64px 列で
   1画面に複数カードが入る (320/375 で複数応募を連続処理しやすいことを優先) */
@media (max-width: 640px) {
  .entry-card.ecard-v2 {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .entry-card.ecard-v2.product-child-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ecard-v2 .entry-image {
    width: 64px;
    height: 64px;
    min-height: 64px;
    border-radius: 8px;
  }

  .ecard-v2 .entry-title {
    font-size: 14px;
  }
}

/* ============================================================
   Phase 249: HOME スリム化
   目的は「要素を減らす」ことではなく、fresh user が数秒で
   1) 何のアプリか 2) 最初に何をするか 3) 今やることがあるか
   を理解できる並びにすること。機能は消さず視覚重量と位置で整理する
   ============================================================ */

/* 重複ブロック (応募フロー・追跡設定) はホーム下部で既定折りたたみ */
.home-fold {
  margin: 0 0 12px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.home-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #4b5563;
}

.home-fold > summary::-webkit-details-marker { display: none; }
.home-fold > summary::before { content: "▾ "; }
.home-fold[open] > summary::before { content: "▴ "; }
.home-fold > summary:hover { color: #0c5b53; }
.home-fold > .panel,
.home-fold > .my-setup { margin: 0; border: none; box-shadow: none; }

/* 今日やること: 当選後センターが出ていないときだけ先頭1件を強調 (§4 最重要1件) */
.today-list.has-top > .work-item:first-child {
  border-color: rgba(0, 140, 140, 0.5);
  box-shadow: 0 2px 4px rgba(9, 42, 52, 0.06), inset 3px 0 0 var(--primary, #00a796);
  background: linear-gradient(180deg, rgba(232, 251, 247, 0.72), #ffffff 62%);
}

/* 明日のカテゴリは今日より一段弱く (件数・分類・GA4 key は不変) */
.td-cat.is-tomorrow { opacity: 0.82; }
.td-cat.is-tomorrow .td-cat-head { font-weight: 500; color: #8a7b52; }

/* 戦績ミニカードは todayHero の最下部へ移動したので上に余白を取る */
#todayHero .record-mini-card {
  margin-top: 12px;
  margin-bottom: 0;
}

/* 今日・明日の抽選は今日やることの後ろ */
#todayHero .today-digest { margin-top: 12px; }

/* Phase 249: 3ステップ入口は HOME の核になったため、狭幅でのラベル折返しを整える。
   grid 構造・件数表示 (Phase 246/248) は不変で、番号バッジと文字サイズだけ詰める */
@media (max-width: 400px) {
  .step-nav { gap: 3px; }
  .step-tile { padding: 8px 7px; }
  .step-head { gap: 4px; }
  .step-no { width: 15px; height: 15px; font-size: 10px; }
  .step-label { font-size: 11.5px; letter-spacing: -0.01em; }
  .step-arrow { font-size: 12px; }
}

/* ============================================================
   Phase 250: 監査で見つかった a11y (タップ領域) の最小修正
   WCAG 2.5.8 (Target Size Minimum) の 24x24 CSS px を下回っていた要素だけを
   「見た目を変えずに当たり判定だけ広げる」方針で補正する
   ============================================================ */

/* バナーのドット: 見た目は 8px のまま、擬似要素で 24x24 の当たり判定を作る */
.campaign-banner .cb-dot {
  position: relative;
}

.campaign-banner .cb-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* PR枠の「おすすめをすべて見る →」: 行の高さが 17px しかなかった */
.supply-more a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  padding: 0 2px;
}

/* Tips パネルの「次へ」「閉じる」: 23px だったので 24px 以上に */
.tip-panel button,
.tip-actions button {
  min-height: 26px;
}

/* 獲得実績のシェアボタン: 22px だったので 24px 以上に */
.ach-h-share {
  min-height: 26px;
}

/* ============================================================
   Phase 252: HOME 初期表示の CLS 対策
   実測 (Production b9f8acc・375px):
     JS 前  todayHero = 30px / 通知 417 / 応募フロー 450 / 追跡設定 521 /
            商品サマリー 673 / 今やる準備 806 / クイックアクセス 841 (すべて1画面目に見えている)
     JS 後  todayHero = 約1,390px → 下のブロックが 2,300〜2,900px 押し下げられる
     → 単一の巨大 shift (fresh 0.625 / existing 0.719)
   対策: JS がホームの中身を作り終えるまで、中身が JS 依存のブロックを場所ごと出さない。
   「高さを見積もって予約する」方式は、次のアクション等の実高さと数十px ずれた分がそのまま
   shift として残るため採らない (実測で確認済み)。出さなければ 1画面目に動く要素が存在しない。
   ブランドスプラッシュ (約1.1秒) がこの間の画面を覆うため、待ち時間の空白は実質見えない。
   ============================================================ */

/* JS 描画が終わるまで、中身が JS 依存のブロックは場所を取らない
   (.home-booting は JS 有効時にだけ付く → JS 無効環境では従来どおり全ブロックが表示される。
    renderAll が失敗しても index.html 側の 3 秒タイマーで必ず解除される) */
.home-booting .home-defer,
.home-booting #todayHero {
  display: none !important;
}

/* ============================================================
   2026-08-24: 抽選カードの商品リンク (PR)
   応募 primary (.apply-primary) より明確に弱い secondary。
   カードの本文と応募導線の間に細い1行で置き、応募の邪魔をしない。
   ============================================================ */
.card-v2 .pcard-pr {
  margin: 0 14px 10px;
}

.card-v2 .pcard-pr-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  min-height: 24px;
}

.card-v2 .pcard-pr-link:hover,
.card-v2 .pcard-pr-link:focus-visible {
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   Phase 255-A — UI 刷新 (prototype A-v2 準拠)

   方針:
   ・既存セレクタを書き換えず、新しいクラス (.ad-*) と、今回対象の
     コンポーネントに限定した上書きだけをここに置く
   ・枠線で仕切るのをやめ、面 (surface) と余白でグループを作る
   ・アイコンは SVG (.ad-icon)。Unicode 記号は今回対象の画面から外す
   ・画像は必ず寸法を予約する (aspect-ratio / 固定 px) = CLS 0 を維持
   ========================================================================= */

/* ---- SVG アイコン: 16 / 20 / 24 の3サイズだけ ---- */
.ad-icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ad-icon-16 { width: 16px; height: 16px; }
.ad-icon-24 { width: 24px; height: 24px; }
.ad-star { flex: none; }

/* ---- branded placeholder ---- */
.ad-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ad-s2);
  padding: var(--ad-s3);
  background: linear-gradient(160deg, #f7faf8 0%, #eef4f1 100%);
  color: #b9cec7;
  border: 0;
}
.ad-ph .ad-ph-art { line-height: 0; }
.ad-ph .ad-ph-art svg { width: 44px; height: 44px; }
.ad-ph .ad-ph-name {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  text-align: center;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 対象商品が特定できない抽選。別商品の画像は絶対に出さない */
.ad-ph-unknown {
  background: linear-gradient(160deg, #f8f7f3 0%, #f1eee5 100%);
  color: #cfc4a6;
}
/* 92〜104px の小枠では文字が入りきらないので絵柄だけにする
   (商品名はカード側に必ず出ているので情報は失われない) */
.ad-thumb .ad-ph .ad-ph-name,
.ecard-v3-img .ad-ph .ad-ph-name,
.ad-group-img .ad-ph .ad-ph-name,
.ad-next-img .ad-ph .ad-ph-name { display: none; }
.ad-thumb .ad-ph .ad-ph-art svg { width: 26px; height: 26px; }
.ecard-v3-img .ad-ph .ad-ph-art svg,
.ad-group-img .ad-ph .ad-ph-art svg,
.ad-next-img .ad-ph .ad-ph-art svg { width: 40px; height: 40px; }

/* ---- retailer visual slot: 今は store SVG。将来ロゴ画像へ差し替えても
       寸法が固定なので行の高さが動かない ---- */
.ad-rslot {
  width: var(--ad-slot);
  height: var(--ad-slot);
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-sunken);
  display: grid;
  place-items: center;
  color: var(--ad-muted);
  overflow: hidden;
}
.ad-rslot .ad-icon { width: 16px; height: 16px; }
.ad-rslot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ad-rslot.is-sm { width: 24px; height: 24px; }
.ad-rslot.is-sm .ad-icon { width: 13px; height: 13px; }
.ad-retailer {
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  min-width: 0;
}
.ad-retailer > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 日付は太字にしない。緊急さは色とアイコンで出す ---- */
.ad-when {
  display: flex;
  align-items: center;
  gap: var(--ad-s1);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  font-variant-numeric: tabular-nums;
}
.ad-when.is-urgent { color: var(--ad-urgent); }

/* ---- ボタン ---- */
.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ad-s1);
  min-height: 40px;
  padding: 0 var(--ad-s4);
  border: 0;
  border-radius: var(--ad-r-pill);
  font-size: var(--ad-fs-body);
  font-weight: 700;
  text-decoration: none;
  transition: transform .08s, box-shadow .12s, background .12s;
}
.ad-btn:active { transform: translateY(1px); }
.ad-btn-primary { background: var(--ad-primary-ink); color: #fff; box-shadow: var(--ad-sh-sm); }
.ad-btn-primary:hover { background: #10535a; color: #fff; }
.ad-btn-gold { background: var(--ad-gold-fill); color: #fff; box-shadow: var(--ad-sh-sm); }
.ad-btn-gold:hover { background: #75591a; color: #fff; }
.ad-btn-sm { min-height: 34px; padding: 0 var(--ad-s3); font-size: var(--ad-fs-meta); }
.ad-btn-block { width: 100%; }

/* ---- compact header (巨大ヒーローを HOME 最上部から外す) ---- */
.ad-hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--ad-s4);
  background: #f2f6f5;
  box-shadow: var(--ad-sh-sm);
}
.ad-hdr-wrap {
  max-width: var(--ad-shell);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ad-s3);
}
.ad-hdr-mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-navy);
  display: grid;
  place-items: center;
  color: var(--gold-bright);
}
.ad-hdr-name { font-size: var(--ad-fs-lead); font-weight: 700; letter-spacing: .02em; color: var(--ad-text); }
.ad-hdr-sp { flex: 1; }
.ad-hdr-actions { display: flex; align-items: center; gap: 2px; }
.ad-hdr-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  border-radius: var(--ad-r-pill);
  display: grid;
  place-items: center;
  color: var(--ad-muted);
  position: relative;
  cursor: pointer;
}
.ad-hdr-btn:hover { background: var(--ad-sunken); }
.ad-hdr-btn:focus-visible { outline: 2px solid var(--ad-primary-ink); outline-offset: 2px; }
.ad-hdr-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--ad-r-pill);
  background: var(--ad-urgent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.ad-hdr-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--ad-r-pill);
  background: var(--ad-muted);
}
.ad-hdr-dot.is-on { background: var(--green); }
.ad-hdr-dot.is-warn { background: var(--ad-urgent); }

/* ---- HOME: 今日のひとこと ---- */
.ad-today { padding: var(--ad-s6) 0 0; }
.ad-today .ad-today-date {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  letter-spacing: .04em;
}
.ad-today .ad-today-line {
  margin: var(--ad-s1) 0 0;
  font-size: var(--ad-fs-title);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ad-text);
}

/* ---- HOME: 横スクロールの抽選カード ---- */
.ad-rail {
  display: flex;
  gap: var(--ad-s3);
  overflow-x: auto;
  /* ⚠️ Phase 257-B: 以前は margin: 0 -16px + padding 16px の bleed 構造で、
     snap の吸着位置を scroll-padding-inline で内側へ寄せていた (Phase 256-E)。
     Chromium では揃うが、**ユーザー実機 (WebKit) では mandatory snap が
     scroll-padding を無視して先頭カードを scrollport 左端へ吸着させる**ため
     「新着の先頭だけ 16px 左へ飛び出す」が再発した。
     ブラウザの snap 実装に依存しないよう bleed 自体をやめる:
     scrollport 左端 = コンテンツ基準線 になるので、どのエンジンでも幾何学的に
     先頭カードが基準線に揃う (snap がどこへ吸着しても座標は同じ) */
  padding: 2px 0 var(--ad-s3);
  margin: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ad-rail::-webkit-scrollbar { height: 0; }
/* =========================================================================
   Phase 255-B: rail カード = 「画像の中に情報を重ねる」(案A)

   旧構造は「画像 194px の下に本文 185px を積む」258x378 で、
   390px で横に **1.44 枚** しか入らなかった (実測)。画像は高さの 51%。
   画像を大きくすると必ずカードが伸びるのが問題だったので、
   **画像の面積 = カードの面積** にする。140x187 で横 **2.57 枚**。
   カードは現状より **小さい** (高さ -51%) = 肥大化させない。
   ========================================================================= */
.ad-lcard {
  scroll-snap-align: start;
  flex: none;
  position: relative;
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: var(--ad-r-md);
  background: var(--ad-quiet);
  box-shadow: var(--ad-sh-md);
  overflow: hidden;
  display: block;
  isolation: isolate;
}
/* 画像はカード全面。contain は維持 (商品を切らない)。
   ⬆ min-height: 0 は必須 — .entry-image の min-height: 188px を打ち消す。
   これが無いと枠より高い箱になり、320px で文字に覆いかぶさる (Phase 255-A の実バグ) */
.ad-lcard-media {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: var(--ad-quiet);
}
.ad-lcard-media > img,
.ad-lcard-media > .entry-image {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.ad-lcard-media > .img-with-fallback { background: none; }
.ad-lcard-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ad-s2);
}
/* 文字の下地。**下 3 割をベタ白で覆わない** —
   透明 → 半透明 → 下端だけ白、のなだらかなグラデーションにする。
   文字は不透明度の高い下端側に寄せてコントラストを確保する */
.ad-lcard-veil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--ad-s2) var(--ad-s2) var(--ad-s2);
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* 文字の真下だけ semi → 下端で白。
     ここを薄くしすぎると暗い商品画像の上で読めなくなる
     (実測: alpha 0.29 だとコントラスト 2.63 = AA 未達) */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 0.93) 52%,
    #ffffff 100%
  );
}
/* 文字帯の **上** に長いフェードを置く。
   これで「透明 → 半透明 → 下端だけ白」の自然な繋がりになり、
   帯の上端に硬い境目が出ない。画像の上半分は素のまま見える */
.ad-lcard-veil::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 46%,
    rgba(255, 255, 255, 0.70) 100%
  );
}
.ad-lcard-name {
  margin: 0;
  font-size: var(--ad-fs-body);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ad-text);
  /* 一覧では 2 行まで。正式名称の全文は「詳細」で読む */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-lcard .ad-retailer {
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
  font-weight: 600;
  gap: var(--ad-s1);
  min-width: 0;
}
.ad-lcard .ad-retailer > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-lcard .ad-rslot {
  width: 16px;
  height: 16px;
  flex: none;
  background: none;
  box-shadow: none;
  opacity: .75;
}
/* 締切チップは 1 枚につき 1 つだけ。画像の左上に小さく置く */
.ad-chip {
  position: absolute;
  left: var(--ad-s2);
  top: var(--ad-s2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--ad-r-pill);
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--ad-sh-sm);
  color: var(--ad-urgent);
}
.ad-chip.is-soon { color: var(--ad-primary-ink); }
.ad-chip .ad-icon { width: 12px; height: 12px; }

/* 自分の状態 (応募済み / 気になる) は右上。締切チップは左上。
   同じ場所で競合させない */
.ad-lcard-state {
  position: absolute;
  right: var(--ad-s2);
  top: var(--ad-s2);
  z-index: 2;
  display: inline-flex;
  gap: var(--ad-s1);
}
.ad-applyvia {
  display: flex;
  align-items: flex-start;
  gap: var(--ad-s1);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  line-height: 1.5;
}
.ad-applyvia .ad-icon { margin-top: 2px; }

/* ---- セクション見出し ---- */
.ad-sec { margin-top: var(--ad-s8); }
.ad-sec-head { display: flex; align-items: baseline; gap: var(--ad-s2); margin-bottom: var(--ad-s3); }
.ad-sec-head h2 { margin: 0; font-size: var(--ad-fs-name); font-weight: 700; color: var(--ad-text); }
.ad-sec-head .ad-count { font-size: var(--ad-fs-meta); font-weight: 400; color: var(--ad-muted); }
.ad-sec-head .ad-more {
  margin-left: auto;
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--ad-s1);
  cursor: pointer;
  padding: 4px 0;
}

/* ---- 次のアクション: 状態ごとのごく薄い surface。border で囲わない ---- */
#nextActionHost .ad-next {
  display: flex;
  gap: var(--ad-s4);
  padding: var(--ad-s4);
  border: 0;
  border-radius: var(--ad-r-md);
  box-shadow: var(--ad-sh-sm);
  background: var(--ad-em-gold);
}
#nextActionHost .ad-next.is-waiting { background: var(--ad-em-sage); }
#nextActionHost .ad-next.is-pickup { background: var(--ad-em-warm); }
.ad-next-img {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-surface);
  overflow: hidden;
  position: relative;
}
.ad-next-img img,
.ad-next-img .img-with-fallback img { width: 100%; height: 100%; object-fit: contain; padding: var(--ad-s2); }
.ad-next-img .entry-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.ad-next-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ad-next-text { min-width: 0; }
.ad-next-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-s1);
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  color: var(--ad-gold-ink);
}
.ad-next.is-waiting .ad-next-kicker,
.ad-next.is-pickup .ad-next-kicker { color: var(--ad-muted); }
.ad-next-name {
  margin: var(--ad-s1) 0 0;
  font-size: var(--ad-fs-name);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ad-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-next-when { margin-top: var(--ad-s1); }
.ad-next-cta { margin-top: auto; padding-top: var(--ad-s3); display: flex; flex-wrap: wrap; gap: var(--ad-s2); }

/* ---- 3ステップ: SVG + 大きい件数 + 小さいラベル ---- */
#todayHero .step-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ad-s2); }
#todayHero .step-nav .step-arrow { display: none; }
#todayHero .step-tile {
  padding: var(--ad-s4) var(--ad-s3);
  border: 0;
  text-align: left;
  border-radius: var(--ad-r-md);
  background: var(--ad-surface);
  box-shadow: var(--ad-sh-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ad-s3);
  transition: transform .08s, box-shadow .12s;
}
#todayHero .step-tile:hover { box-shadow: var(--ad-sh-md); }
#todayHero .step-tile:active { transform: translateY(1px); box-shadow: var(--ad-sh-sm); }
.ad-step-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--ad-r-sm);
  display: grid;
  place-items: center;
  background: var(--ad-sunken);
  color: var(--ad-primary-ink);
}
.ad-step-txt { display: flex; flex-direction: column; gap: 2px; }
.ad-step-n {
  font-size: var(--ad-fs-title);
  font-weight: 700;
  line-height: 1;
  color: var(--ad-text);
  font-variant-numeric: tabular-nums;
}
.ad-step-n small { font-size: var(--ad-fs-meta); font-weight: 400; color: var(--ad-muted); margin-left: 2px; }
.ad-step-l { font-size: var(--ad-fs-meta); font-weight: 400; color: var(--ad-muted); }
.ad-step-badge {
  display: inline-block;
  margin-top: var(--ad-s1);
  padding: 2px 8px;
  border-radius: var(--ad-r-pill);
  background: var(--ad-em-warm);
  color: var(--ad-urgent);
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}

/* ---- 戦績サマリー: 濃紺 × 金。応募 / 当選 / 当選率 だけ ---- */
.ad-record {
  margin-top: var(--ad-s8);
  border: 0;
  border-radius: var(--ad-r-md);
  background: var(--ad-navy);
  color: #fff;
  box-shadow: var(--ad-sh-md);
  padding: var(--ad-s4);
  width: 100%;
  text-align: left;
  display: block;
  cursor: pointer;
}
.ad-record h2 {
  margin: 0 0 var(--ad-s3);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-on-navy-sub);
  letter-spacing: .06em;
}
.ad-record-row { display: flex; align-items: flex-end; gap: var(--ad-s6); }
.ad-record-i { display: flex; flex-direction: column; gap: 2px; }
.ad-record-i b { font-size: var(--ad-fs-title); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ad-record-i span { font-size: var(--ad-fs-meta); font-weight: 400; color: var(--ad-on-navy-sub); }
.ad-record-i.is-key b { color: var(--gold-bright); }
.ad-record-sp { flex: 1; }
.ad-record-link { font-size: var(--ad-fs-meta); font-weight: 400; color: var(--ad-on-navy-sub); display: flex; align-items: center; gap: var(--ad-s1); }

/* ---- その他 (空の箱を並べない。畳んで1つに) ---- */
.ad-misc { margin-top: var(--ad-s6); border-radius: var(--ad-r-md); background: var(--ad-surface); box-shadow: var(--ad-sh-sm); }
.ad-misc > summary {
  list-style: none;
  padding: var(--ad-s4);
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  font-size: var(--ad-fs-body);
  font-weight: 400;
  color: var(--ad-muted);
  cursor: pointer;
}
.ad-misc > summary::-webkit-details-marker { display: none; }
.ad-misc > summary::marker { content: ""; }
.ad-misc > summary .ad-icon { margin-left: auto; transition: transform .15s; }
.ad-misc[open] > summary .ad-icon { transform: rotate(90deg); }
.ad-misc-body { padding: 0 var(--ad-s3) var(--ad-s3); }

/* =========================================================================
   Phase 255-A: 「探す」カード v3 — 左画像 / 右テキスト
   Phase 247 (§50) の「閉じたカードに常時出すのは5つだけ」は維持し、
   縦積みヒーローを横並びに変えて 1 画面 3 件 + 次カード頭の密度にする
   ========================================================================= */
.published-card.card-v2.card-v3 {
  border: 0;
  border-radius: var(--ad-r-md);
  background: var(--ad-surface);
  box-shadow: var(--ad-sh-sm);
  padding: var(--ad-s3);
  display: flex;
  gap: var(--ad-s3);
  align-items: flex-start;
}
.card-v3 > .pcard-hero.ecard-v3-img {
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-quiet);
  overflow: hidden;
  position: relative;
}
.card-v3 > .ecard-v3-img .entry-image,
.card-v3 > .ecard-v3-img .img-with-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-v3 > .ecard-v3-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--ad-s1); }
.card-v3 > .ecard-v3-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--ad-s1); }
.card-v3 .entry-title {
  font-size: var(--ad-fs-name);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ad-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 応募先行: 32px スロット + 社名テキスト (§50 の「必ず社名テキスト」を維持) */
.card-v3 .pcard-retailer-row {
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
  flex-wrap: wrap;
}
.card-v3 .pcard-retailer-row .pcard-retailer-name {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
.card-v3 .card-actions {
  margin-top: auto;
  padding-top: var(--ad-s2);
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  flex-wrap: wrap;
}
.card-v3 .card-actions .apply-primary { order: 0; }
.card-v3 .card-actions .star-action { order: 1; }
.card-v3 .card-actions .text-action { order: 2; }
/* Primary 以外を同じ強さで並べない (§21) */
.card-v3 .star-action {
  background: var(--ad-sunken);
  border: 0;
  color: var(--ad-text);
  font-weight: 400;
  font-size: var(--ad-fs-meta);
  min-height: 34px;
  border-radius: var(--ad-r-pill);
  padding: 0 var(--ad-s3);
}
.card-v3 .text-action {
  color: var(--ad-muted);
  font-weight: 400;
  font-size: var(--ad-fs-meta);
  min-height: 34px;
}
.card-v3 .apply-primary {
  background: var(--ad-primary-ink);
  color: #fff;
  border: 0;
  border-radius: var(--ad-r-pill);
  min-height: 34px;
  padding: 0 var(--ad-s3);
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}
/* 長い applyLabel で CTA が横に伸び切る問題 (実測: しまむらパークの 48 字で幅 512px)。
   ⚠️ 原因は文字数ではなく **flex item の既定 min-width: auto**。
   .card-actions は flex なので、CTA は内容幅まで広がり、親からも viewport からも溢れる。
   文字が切れているのではなく **箱が伸びている** (scrollWidth == clientWidth を実測で確認)。

   ⚠️ 文言は縮めない。情報量を落とさない。**2 行を許して意味を保つ**。
   ⚠️ CTA を巨大化させない — 横は親に収め、縦だけ内容に合わせる。 */
.card-v3 .card-actions .apply-primary {
  min-width: 0;              /* ← これが本体。flex item が縮めるようになる */
  max-width: 100%;
  white-space: normal;       /* 折り返しを許可 */
  overflow-wrap: anywhere;   /* URL 等の長い連続文字でも溢れさせない */
  height: auto;              /* 2 行になったら縦に伸びる */
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.4;
  text-align: center;
}
.card-v3 .pcard-details { margin-top: var(--ad-s2); }
.card-v3 .pcard-details > summary {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
.card-v3 .pcard-details > summary::before { content: ""; }
/* PR は必ず primary より弱く (§22 / design.md §54) */
.card-v3 .pcard-pr { margin-top: var(--ad-s2); }

/* ---- 商品別グループ: 親で商品を見せきる ---- */
#publishedList > .product-accordion {
  border: 0;
  border-radius: var(--ad-r-md);
  background: var(--ad-surface);
  box-shadow: var(--ad-sh-md);
  overflow: hidden;
  margin-top: var(--ad-s3);
}
#publishedList > .product-accordion > summary { padding: 0; }
#publishedList > .product-accordion .product-accordion-head {
  display: flex;
  gap: var(--ad-s4);
  align-items: center;
  padding: var(--ad-s4);
  border: 0;
  background: transparent;
}
#publishedList > .product-accordion .ad-group-img {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-quiet);
  overflow: hidden;
  position: relative;
}
#publishedList > .product-accordion .ad-group-img .entry-image,
#publishedList > .product-accordion .ad-group-img .img-with-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
#publishedList > .product-accordion .ad-group-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--ad-s2); }
#publishedList > .product-accordion .product-accordion-title h3 {
  font-size: var(--ad-fs-lead);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ad-text);
  margin: 0;
}
#publishedList > .product-accordion .product-accordion-meta {
  margin-top: var(--ad-s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ad-s1) var(--ad-s3);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
#publishedList > .product-accordion .product-accordion-body { background: var(--ad-sunken); padding: var(--ad-s1) var(--ad-s2) var(--ad-s2); }

/* ---- 子カード A1: 商品画像を繰り返さず、応募先を主役にする ----
   (design.md §50 の「子カードはヒーローを出さない」= Phase 73 規則を踏襲し、
    見せ方だけ retailer 主役の 1 行 120px 前後に整える) */
#publishedList > .product-accordion .product-child-card.card-v3 {
  align-items: center;
  gap: var(--ad-s3);
  padding: var(--ad-s3);
  margin-top: var(--ad-s1);
  border-radius: var(--ad-r-sm);
  background: var(--ad-surface);
  box-shadow: var(--ad-sh-sm);
}
#publishedList > .product-accordion .product-child-card.card-v3 > .pcard-hero.ecard-v3-img { display: none; }
#publishedList > .product-accordion .product-child-card.card-v3 .entry-title { display: none; }
/* ---- Phase 261: 応募先別グループの子カードは **商品名が主役** ----
   上の display:none は「商品別グループ = 親見出しが商品名なので子で繰り返さない」(Phase 73/§50) の
   ためのルールだが、応募先別グループでは子のタイトル = 商品名 (JS 側 Phase 73 の仕様) が唯一の
   商品識別情報なのに巻き添えで消えていた → 「何の商品の抽選か分からない」。
   応募先別の子 (.kid-of-retailer) だけ表示へ戻し、店舗名主役 (ad-kid-name) と同じ
   15px/700/2行 clamp の見せ方にそろえる。密度は変えない (ヒーロー非表示は共通のまま) */
#publishedList > .product-accordion .product-child-card.card-v3.kid-of-retailer .entry-title {
  display: -webkit-box;
  font-size: var(--ad-fs-name);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ad-text);
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 0;
}
/* 親見出しが応募先名を出しているため、子カード内の応募先バッジ+応募先名は重複 → 出さない
   (締切チップ・速報/確定バッジ・地域チップは残す) */
#publishedList > .product-accordion .product-child-card.kid-of-retailer .pcard-retailer-row .retailer-name { display: none; }
/* Phase 255-B: 子カードの主役 = 店舗名 (15px / 700)。
   Phase 255-A ではここが装飾アイコンだけになっており、
   商品名も display:none だったため「閉じた子カードに識別情報が無い」状態だった */
#publishedList > .product-accordion .product-child-card .ad-kid-store {
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  min-width: 0;
  /* 店舗名は **1 行丸々使う**。バッジと同じ行で幅を奪い合うと、
     店舗名がすぐに … になり、バッジ側は中で折り返して丸く膨らむ */
  flex: 1 1 100%;
  order: -1;
}
/* ⚠️ Phase 256-D: 以前は white-space: nowrap + ellipsis だったため、
   320px で「ヤマシロヤ Web フォーム抽選」等が 173px で切れていた (実測 scrollW 200)。
   店舗名は子カードで**唯一の識別情報**なので切らない。2 行まで折り返す */
#publishedList > .product-accordion .product-child-card .ad-kid-name {
  font-size: var(--ad-fs-name);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ad-text);
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#publishedList > .product-accordion .product-child-card .ad-kid-slot {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-sunken);
  display: grid;
  place-items: center;
  color: var(--ad-muted);
  overflow: hidden;
}
#publishedList > .product-accordion .product-child-card .ad-kid-slot .ad-icon { width: 18px; height: 18px; }
#publishedList > .product-accordion .product-child-card .ad-kid-slot img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .pcard-retailer-name {
  font-size: var(--ad-fs-body);
  color: var(--ad-text);
}
/* Phase 255-B: 速報 / 地域 / 新着 は **補助情報**。
   店舗名と同じ強さで横に並べない (10px/900 が 3 つ並んでいた) */
#publishedList > .product-accordion .product-child-card .pcard-retailer-row {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ad-s1) var(--ad-s2);
}
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .badge,
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .source-status {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: var(--ad-r-pill);
  background: transparent;
  color: var(--ad-muted);
  box-shadow: none;
  border: 1px solid var(--ad-sunken);
  /* 折り返させない。折り返すと小さな丸になってむしろ目立つ */
  white-space: nowrap;
  flex: none;
}
/* 締切チップだけは期間情報なので 2 番目の強さを保つ */
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .pcard-deadline {
  order: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 9px;
  border-radius: var(--ad-r-pill);
  white-space: nowrap;
  flex: none;
}

/* =========================================================================
   Phase 255-A: デスクトップ
   1280px でも中身を 960px で止める。幅だけ広い「間延びした 1 行」を作らない
   ========================================================================= */
@media (min-width: 900px) {
  .ad-shell-wrap { max-width: var(--ad-shell); margin-left: auto; margin-right: auto; }
  .ad-today .ad-today-line { font-size: 28px; }

  /* 横スクロール → 3 列グリッド */
  .ad-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ad-s4);
    overflow: visible;
    margin: 0;
    padding: 2px 0 var(--ad-s1);
  }
  .ad-lcard { width: auto; aspect-ratio: 3 / 4; }

  /* タイルは横並びにして幅を使い切る (アイコン | 数字 + ラベル) */
  #todayHero .step-nav { gap: var(--ad-s3); }
  #todayHero .step-tile { flex-direction: row; align-items: center; gap: var(--ad-s3); padding: var(--ad-s4) var(--ad-s6); }
  .ad-step-ico { width: 44px; height: 44px; }
  .ad-step-ico .ad-icon { width: 22px; height: 22px; }

  /* 次のアクションは CTA を右端へ */
  #nextActionHost .ad-next { padding: var(--ad-s6); gap: var(--ad-s6); align-items: center; }
  .ad-next-img { width: 128px; height: 128px; }
  .ad-next-body { flex-direction: row; align-items: center; gap: var(--ad-s6); }
  .ad-next-text { flex: 1; }
  .ad-next-name { font-size: 17px; }
  .ad-next-cta { margin-top: 0; padding-top: 0; flex: none; }

  /* 探す: 2 列 */
  #publishedList { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ad-s4); align-items: start; }
  #publishedList > .product-accordion,
  #publishedList > .published-card { margin-top: 0; }
  .card-v3 > .pcard-hero.ecard-v3-img { width: 104px; height: 104px; }
}

/* 320px でも横に溢れさせない */
@media (max-width: 360px) {
  .ad-lcard { width: 232px; }
  .card-v3 > .pcard-hero.ecard-v3-img { width: 80px; height: 80px; }
  .ad-next-img { width: 88px; height: 88px; }
  .ad-record-row { gap: var(--ad-s4); }

  /* 320px でも 2.5 枚前後を保つ (120px x 2 + gap で 2.6 枚)。
     店舗名と状態バッジは縮めない */
  .ad-lcard { width: 120px; }
  .ad-lcard-veil { padding: var(--ad-s1) var(--ad-s2) var(--ad-s2); }
}

/* 起動時のちらつき防止は Phase 252 の既存機構 (.home-defer / #todayHero の shell) に任せる。
   ここで新しく visibility:hidden を足すと二重管理になるため追加しない */

/* 対象商品不明 variant の補助文言 (Phase 187 の文言を維持) */
.ad-ph .ad-ph-type {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  text-align: center;
}
.ad-thumb .ad-ph .ad-ph-type,
.ecard-v3-img .ad-ph .ad-ph-type,
.ad-group-img .ad-ph .ad-ph-type,
.ad-next-img .ad-ph .ad-ph-type { display: none; }

/* =========================================================================
   Phase 255-A: ヒーローをスリム化
   Phase 152 の背景画像・大きな余白を HOME から外し、
   「画面名 + 説明」だけを残す帯にする。既存の id / 機能は保持している
   ========================================================================= */
.hero.hero-slim {
  min-height: 0;
  padding: var(--ad-s4) var(--ad-s4) var(--ad-s2);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--ad-text);
  overflow: visible;
}
.hero.hero-slim::before { display: none; }
.hero.hero-slim .hero-copy { max-width: var(--ad-shell); margin: 0 auto; padding: 0; position: relative; }
.hero.hero-slim .eyebrow { display: none; }
.hero.hero-slim h1 {
  margin: 0;
  font-size: var(--ad-fs-title);
  font-weight: 700;
  color: var(--ad-text);
  text-shadow: none;
  letter-spacing: .01em;
}
.hero.hero-slim .hero-desc {
  margin: var(--ad-s1) 0 0;
  font-size: var(--ad-fs-body);
  font-weight: 400;
  color: var(--ad-muted);
  text-shadow: none;
  max-width: 46em;
}
.hero.hero-slim .portal-link {
  margin-top: var(--ad-s2);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.hero.hero-slim .hero-info-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: var(--ad-sunken);
  color: var(--ad-muted);
  border: 0;
  box-shadow: none;
}
.hero.hero-slim .hero-note { color: var(--ad-muted); font-size: var(--ad-fs-meta); text-shadow: none; }
.hero.hero-slim .hero-note a { color: var(--ad-primary-ink); }

/* ホームだけ: 画面名 (Aster Draw) を出さず、日付 + 今日のひとことを主役にする。
   「何のアプリか」は heroDesc が引き続き 1 画面目で説明する (Phase 249 の不変条件) */
.hero.hero-slim[data-hero-tab="dashboard"] h1 { display: none; }
.ad-lead .ad-today-date {
  display: block;
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  letter-spacing: .04em;
}
.ad-lead .ad-today-line {
  display: block;
  margin-top: var(--ad-s1);
  font-size: var(--ad-fs-title);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ad-text);
}
@media (min-width: 900px) {
  .ad-lead .ad-today-line { font-size: 28px; }
  .hero.hero-slim { padding-top: var(--ad-s6); }
}

/* Phase 255-A: 56px の sticky header と重ならない位置へトーストを下げる */
#toast { top: 68px; }
@media (max-width: 600px) { #toast { top: 64px; } }

/* 3ステップ: 0 件のオンボーディング文はタイル内で 1 行に収める */
#todayHero .step-tile .ad-step-empty {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
  line-height: 1.4;
  margin-top: 2px;
}
#todayHero .step-tile .step-no {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#todayHero .step-tile .step-head { position: relative; }

/* 件数を出さないタイル (①抽選を探す) はラベルを主役にする */
#todayHero .step-tile .ad-step-l.is-lead {
  font-size: var(--ad-fs-name);
  font-weight: 700;
  color: var(--ad-text);
}

/* Phase 255-A: 「クラウド未接続」の浮遊チップは出さない。
   保存/接続状態はヘッダーのアカウントアイコン (状態ドット + title) が担う。
   機能は失っていない — 同じ導線 (openCloudBackupSectionForLogin) へ繋いである */
#cloudStatusPill { display: none !important; }

/* 次のアクション: 既存の nac-* を Phase 255-A の面と階層に合わせる。
   期限の緊急さは色で出し、太字は「見出し」と「商品名」の 2 箇所までにする */
#nextActionHost .nac-primary.ad-next {
  border: 0;
  background: var(--ad-em-gold);
}
#nextActionHost .nac-primary.ad-next.is-pickup { background: var(--ad-em-warm); }
#nextActionHost .ad-next .nac-head {
  margin: 0;
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}
#nextActionHost .ad-next .nac-product {
  margin: var(--ad-s1) 0 0;
  font-size: var(--ad-fs-name);
  font-weight: 700;
  color: var(--ad-text);
}
#nextActionHost .ad-next .nac-retailer {
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  margin-top: var(--ad-s1);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
#nextActionHost .ad-next .ad-next-when { margin-top: var(--ad-s1); }
#nextActionHost .ad-next .nac-deadline,
#nextActionHost .ad-next .nac-quantity {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-urgent);
  margin: 0;
}
#nextActionHost .ad-next .nac-quantity { color: var(--ad-muted); }
#nextActionHost .ad-next .nac-actions { margin-top: auto; padding-top: var(--ad-s3); }

/* 次のアクション: 画像枠を確実に埋める (内側ラッパも含めて 100%) */
#nextActionHost .ad-next-img > .entry-image,
#nextActionHost .ad-next-img > .img-with-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  min-height: 0;
}
#nextActionHost .ad-next-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ad-s2);
  display: block;
}
/* 期限行はアイコン + テキストの横並び */
#nextActionHost .ad-next .nac-deadline {
  display: flex;
  align-items: center;
  gap: var(--ad-s1);
}

/* card v3: 左画像は既存の .pcard-hero をそのまま使う (マークアップを増やさない)。
   Phase 247 の縦積みヒーロー指定を、この画面に限って上書きする */
.card-v2.card-v3 > .pcard-hero {
  width: 92px;
  height: 92px;
  min-height: 0;
  aspect-ratio: auto;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-quiet);
  overflow: hidden;
  position: relative;
  margin: 0;
}
.card-v2.card-v3 > .pcard-hero .entry-image,
.card-v2.card-v3 > .pcard-hero .img-with-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
.card-v2.card-v3 > .pcard-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ad-s1);
}
.card-v2.card-v3 > .pcard-hero .pcard-new {
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 10px;
  padding: 1px 5px;
}
/* 締切チップはテキスト列の先頭へ (画像への重ねをやめた) */
.card-v3 .pcard-retailer-row .pcard-deadline {
  position: static;
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  border-radius: var(--ad-r-pill);
  padding: 3px 9px;
}
/* retailer visual slot: 既存の retailerBadge (ロゴ or モノグラム) を 32px 枠に収める。
   ロゴ資産を持つ 6 応募先は今までどおりロゴが出る (今回ロゴを増やしてはいない) */
.card-v3 .pcard-retailer-row .retailer-badge,
.card-v3 .pcard-retailer-row .retailer-badge img {
  width: var(--ad-slot);
  height: var(--ad-slot);
  border-radius: var(--ad-r-sm);
}
.card-v3 .pcard-retailer-row .retailer-name {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-s2);
  min-width: 0;
}
.card-v3 .card-top { display: block; }
.card-v3 .card-top > div:first-child { min-width: 0; }

/* グループ親: 商品画像を大きめに、右端の操作を溢れさせない */
#publishedList > .product-accordion .product-accordion-head {
  display: flex;
  align-items: center;
  gap: var(--ad-s3);
  padding: var(--ad-s3);
  min-width: 0;
}
#publishedList > .product-accordion .product-accordion-thumb,
#publishedList > .product-accordion .accordion-thumb {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-quiet);
  overflow: hidden;
  position: relative;
}
#publishedList > .product-accordion .product-accordion-thumb img,
#publishedList > .product-accordion .accordion-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--ad-s1); }
#publishedList > .product-accordion .product-accordion-title { min-width: 0; flex: 1; }
#publishedList > .product-accordion .product-accordion-title h3 {
  font-size: var(--ad-fs-lead);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ad-text);
  margin: 0;
}
#publishedList > .product-accordion .product-accordion-meta {
  margin: var(--ad-s2) 0 0;
  gap: var(--ad-s1) var(--ad-s2);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
#publishedList > .product-accordion .product-accordion-arrow {
  flex: none;
  color: var(--ad-muted);
  transition: transform .15s;
  display: grid;
  place-items: center;
}
#publishedList > .product-accordion[open] .product-accordion-arrow { transform: rotate(90deg); }
/* 「未追加 N を追加」はテキスト列の下へ回して右端で切れないようにする */
#publishedList > .product-accordion .product-accordion-head .group-add-all,
#publishedList > .product-accordion .product-accordion-head [data-group-add-all] {
  flex: none;
  max-width: 40%;
  font-size: var(--ad-fs-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  #publishedList > .product-accordion .product-accordion-head { flex-wrap: wrap; }
  #publishedList > .product-accordion .product-accordion-head [data-group-add-all] { order: 3; max-width: 100%; margin-left: 108px; }
  #publishedList > .product-accordion .product-accordion-arrow { order: 2; margin-left: auto; }
}

/* Phase 255-A: デスクトップで本文を 960px に収める。
   ⚠️ 今回のスコープ (HOME と「探す」) だけに限定する。
   マイ抽選・戦績・その他は Phase 255-B の判断まで従来どおりの幅にする */
@media (min-width: 900px) {
  /* width: 100% は必須。max-width だけだと、ブートゲート中で中身がほぼ空のあいだ
     パネルが内容幅 (実測 305px) に縮み、描画完了で 945px に広がって **横方向の** CLS
     (960px で 0.25 / 1280px で 0.17) になる。幅を内容に依存させない */
  #tab-dashboard,
  #tab-published { width: 100%; max-width: var(--ad-shell); margin-left: auto; margin-right: auto; }
}

/* Phase 255-A: ホームの「何のアプリか」1 行は初見だけ。13px / 400 / muted */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc {
  margin-top: var(--ad-s2);
  font-size: var(--ad-fs-body);
  font-weight: 400;
  color: var(--ad-muted);
}
.hero.hero-slim .hero-desc[hidden] { display: none; }

/* 新着の抽選も「今日の抽選」と同じ rail レイアウトにする。
   ⚠️ Phase 257-B: ここが「新着の先頭タイルだけ左へ飛び出す」の真因だった。
   Phase 256-E の scroll-padding 修正は `.ad-rail` にだけ当たり、
   この **別セレクタの rail には bleed (margin -16px) + snap が残っていた**。
   本番実測 (390px): 先頭タイル x=1 / 基準線 x=16 = **-15px**、snap が scrollLeft を
   16 に押し込む。全幅 (320/375/390/430)・初回/scroll往復後/HOME復帰後/resize後 すべてで再現。
   `.ad-rail` と同じく bleed 自体を廃止し、scrollport 左端 = 基準線 にする
   (どのエンジンの snap 実装でも幾何学的に揃う) */
#newLotteriesList {
  display: flex;
  gap: var(--ad-s3);
  overflow-x: auto;
  padding: 2px 0 var(--ad-s3);
  margin: 0;
  scroll-snap-type: x mandatory;
}
#newLotteriesList::-webkit-scrollbar { height: 0; }
#newLotteriesList > .ad-lcard { scroll-snap-align: start; }
@media (min-width: 900px) {
  #newLotteriesList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ad-s4);
    overflow: visible;
    margin: 0;
    padding: 2px 0 var(--ad-s1);
  }
  #newLotteriesList > .ad-lcard { width: auto; aspect-ratio: 3 / 4; }
}

/* 今日の抽選 rail (digest 由来) は panel の枠を持たない */
#todayHero .today-digest .ad-sec { margin-top: var(--ad-s6); }
#todayHero .today-digest .ad-sec:first-child { margin-top: var(--ad-s4); }
#todayHero .today-digest .td-title { display: none; }

/* =========================================================================
   Phase 255-A: 商品別グループの子カード (A1) を 1 行に詰める
   ・常時出すのは retailer slot / 店舗名 / 締切チップ / 状態 / Primary CTA
   ・販売単位 (offer-note) と価格は消さず 1 行に省略表示 (情報は残す)
   ・Secondary (気になる / 詳細) は視覚 weight を落とす
   ・CTA の意味 (Phase 246) は変えない
   ========================================================================= */
#publishedList > .product-accordion .product-child-card.card-v3 {
  align-items: center;
  padding: var(--ad-s3);
  gap: var(--ad-s3);
}
#publishedList > .product-accordion .product-child-card .card-top {
  display: flex;
  align-items: center;
  gap: var(--ad-s3);
  min-width: 0;
}
#publishedList > .product-accordion .product-child-card .card-top > div:first-child {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Phase 255-B: 応募先行は **店名を 1 行まるごと** 使い、チップ・バッジはその下へ折り返す。
   Phase 255-A はここを nowrap + overflow:hidden にしていたため、バッジが多い抽選では
   店名が幅ゼロまで潰れて **表示されなかった** (実測 w=0)。
   店舗名は子カードの主語なので、絶対に潰さない */
#publishedList > .product-accordion .product-child-card .pcard-retailer-row {
  flex-wrap: wrap;
  gap: var(--ad-s1) var(--ad-s2);
  overflow: visible;
}
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .pcard-retailer-name {
  font-size: var(--ad-fs-body);
  color: var(--ad-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 販売単位・価格は消さず 1 行に省略 (情報は残す) */
#publishedList > .product-accordion .product-child-card .pcard-brief {
  margin: 0;
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#publishedList > .product-accordion .product-child-card .pcard-brief .offer-note { font-weight: 400; }
/* CTA は右端にまとめる。
   ⚠️ Phase 256-D: ここは以前 flex-wrap: nowrap だった。子は flex: 0 1 auto なので
   幅が足りないと**縮んでしまい**、390px で「すでに応募済み？」が 58px、
   320px で「☆気になる」が 36px まで潰れて 1〜2 文字ずつ改行されていた
   (実測 36x85 = 5 行)。これが「探すが崩れている」の主因。
   折り返しを許可し、子を縮ませない (flex: 0 0 auto) のが正しい直し方。 */
#publishedList > .product-accordion .product-child-card .card-actions {
  margin-top: 0;
  padding-top: 0;
  flex: none;
  flex-wrap: wrap;
  gap: var(--ad-s2);
}
#publishedList > .product-accordion .product-child-card .card-actions > * { flex: 0 0 auto; }
#publishedList > .product-accordion .product-child-card .card-actions .star-action,
#publishedList > .product-accordion .product-child-card .card-actions .text-action { white-space: nowrap; }
#publishedList > .product-accordion .product-child-card .card-actions .star-action,
#publishedList > .product-accordion .product-child-card .card-actions .text-action {
  padding: 0 var(--ad-s2);
  min-height: 30px;
  font-size: var(--ad-fs-meta);
}
#publishedList > .product-accordion .product-child-card .pcard-details { margin-top: var(--ad-s1); }
#publishedList > .product-accordion .product-child-card .pcard-details > summary { padding: 2px 0; }

/* 狭い幅では CTA を 2 段目へ回す (押し出しで溢れさせない) */
@media (max-width: 430px) {
  #publishedList > .product-accordion .product-child-card .card-top { flex-wrap: wrap; }
  #publishedList > .product-accordion .product-child-card .card-actions { width: 100%; margin-top: var(--ad-s2); }
}


/* Phase 255-A (CLS): ホームではヘッダー帯の説明文を出さない。
   ここを JS で出し入れするとタブと本文を押し下げて layout shift になるため、
   「何のアプリか」は下の .ad-lead 内 (boot ゲートの中) で初見だけに出す */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc { display: none; }
.ad-lead .ad-lead-desc {
  display: block;
  margin-top: var(--ad-s2);
  font-size: var(--ad-fs-body);
  font-weight: 400;
  color: var(--ad-muted);
}
.ad-lead { padding-top: var(--ad-s6); }

/* 子カードの高さを詰める。文言は消さず、行数と余白を締める */
#publishedList > .product-accordion .product-child-card.card-v3 { padding: var(--ad-s2) var(--ad-s3); }
#publishedList > .product-accordion .product-child-card .ad-kid-slot,
#publishedList > .product-accordion .product-child-card .pcard-retailer-row .retailer-badge {
  width: 28px;
  height: 28px;
}
#publishedList > .product-accordion .product-child-card .pcard-retailer-row { line-height: 1.3; }
/* 応募方法 (URL の無い抽選) は 2 行までに収める。内容は詳細にも残っている */
#publishedList > .product-accordion .product-child-card .apply-note-primary {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
}
#publishedList > .product-accordion .product-child-card .pcard-details > summary {
  font-size: var(--ad-fs-meta);
  padding: 0;
  min-height: 22px;
}
#publishedList > .product-accordion .product-child-card .card-actions { margin-top: var(--ad-s1); }

/* =========================================================================
   Phase 255-A: sticky header (56px) の下に隠れないようにする
   scrollIntoView で運ばれる要素が header の裏へ入ると、
   タップできない / 見えない が起きるため、スクロール時の余白を確保する
   ========================================================================= */
html { scroll-padding-top: 64px; }
.entry-card,
.published-card,
.product-accordion,
.panel,
.ad-misc,
#calendarTable,
#nextActionHost,
#todayHero,
[data-published-card],
[data-entry-card] { scroll-margin-top: 64px; }

/* Phase 255-B: 一覧の商品名は **常に 2 行まで**。
   長い正式名称を全部見せるためにカードを大きくしない (全文は「詳細」で) */


/* 戦績サマリー: DOM はラベル先 (読み上げ順を「応募 12」にする) / 見た目は数字が上 */
.ad-record-i { flex-direction: column-reverse; }
/* 今日の rail の見出しは section 見出しとして扱う (td-cat-head は互換のため残す) */
#todayHero .today-digest .ad-sec-head.td-cat-head {
  display: flex;
  align-items: baseline;
  gap: var(--ad-s2);
  background: transparent;
  padding: 0;
  margin-bottom: var(--ad-s3);
}


/* rail カードの速報 / 応募済みタグ (右上の状態バッジ) */
.ad-lcard-state .td-tag {
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--ad-r-pill);
  padding: 2px 7px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--ad-sh-sm);
}
.ad-lcard-state .td-done { background: var(--ad-primary-ink); color: #fff; }
#todayHero .today-digest .ad-more.td-more {
  background: transparent;
  border: 0;
  color: var(--ad-muted);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
}

/* rail カードをボタンにしたときの見た目 (article と同じに保つ) */
button.ad-lcard { text-align: left; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.ad-lcard:focus-visible { outline: 2px solid var(--ad-primary-ink); outline-offset: 2px; }

/* Phase 255-A (CLS): デスクトップで本文を中央寄せしたため、
   起動後にスクロールバーが出ると viewport 幅が変わって中央位置が横にずれる。
   スクロールバー分の幅を最初から確保して layout shift を防ぐ */
html { scrollbar-gutter: stable; }

/* =========================================================================
   Phase 255-A (最終構造): ホームではヒーロー帯そのものを出さない。
   ブランド名は 56px の compact header が担い、日付と今日の一文は
   タブの下の .ad-lead が担うため、この帯は空になる。
   ⚠️ 他タブ (探す / マイ抽選 / 戦績 / その他) では画面名と説明として使い続けるので消していない。
      アプリ説明 (?) とポータルリンクはそれらのタブから到達できる。
   ⚠️ 初期 HTML の時点で data-hero-tab="dashboard" なので、
      最初のペイントから非表示 = JS による出し入れが起きず layout shift もない。
   ========================================================================= */
.hero.hero-slim[data-hero-tab="dashboard"] { display: none; }

/* 3ステップ: 件数を出さないタイルのラベルが 390px で折り返さないようにする */
#todayHero .step-tile .ad-step-l.is-lead { font-size: var(--ad-fs-body); }

/* =========================================================================
   Phase 255-B: 「探す」と「管理」のデザイン言語を揃える

   実測 (390px) では 管理 の entry カードは 136px / テキスト 28 個 / **画像 0 枚** で、
   探す (画像主体) と別物の見た目だった。役割は違う (探す=発見 / 管理=処理) ので
   レイアウトまで同じにはしないが、**文字・余白・角丸・色・影は同じ --ad-* を使う**。

   ⚠️ スコープは #entryList (マイ抽選) だけ。戦績・準備・その他へは広げない
   ========================================================================= */
#entryList .entry-card.ecard-v2 {
  border-radius: var(--ad-r-md);
  background: var(--ad-surface);
  box-shadow: var(--ad-sh-sm);
  border: 0;
  padding: var(--ad-s3);
  gap: var(--ad-s3);
  align-items: start;
}
/* 左 56px の商品サムネ。探すの rail カードと同じ contain / 淡色の地 */
#entryList .entry-card.ecard-v2 > .entry-image,
#entryList .entry-card.ecard-v2 > .img-ph {
  width: 56px;
  height: 56px;
  min-height: 0;
  flex: none;
  border-radius: var(--ad-r-sm);
  background: var(--ad-quiet);
  overflow: hidden;
  display: grid;
  place-items: center;
}
#entryList .entry-card.ecard-v2 > .entry-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--ad-s1);
}
/* 商品名 = その行の主語。探すの .ad-lcard-name と同じ 15px/700 */
#entryList .ecard-v2 .entry-title {
  font-size: var(--ad-fs-name);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ad-text);
  margin: 0 0 2px;
}
#entryList .ecard-v2 .pcard-retailer-row {
  gap: var(--ad-s1) var(--ad-s2);
  align-items: center;
}
#entryList .ecard-v2 .pcard-retailer-name,
#entryList .ecard-v2 .retailer-name {
  font-size: var(--ad-fs-meta);
  font-weight: 600;
  color: var(--ad-muted);
}
/* 「次にすること」チップは探すの締切チップと同じ形にする */
#entryList .ecard-v2 .pcard-deadline {
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--ad-r-pill);
  padding: 3px 9px;
}
#entryList .ecard-v2 .quick-actions {
  margin-top: var(--ad-s2);
  gap: var(--ad-s2);
}
#entryList .ecard-v2 .pcard-details > summary {
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
}
@media (max-width: 640px) {
  #entryList .entry-card.ecard-v2 {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--ad-s3);
    padding: var(--ad-s3);
  }
  #entryList .ecard-v2 .entry-title { font-size: var(--ad-fs-name); }
}
/* ⚠️ 商品別グループの子カードは **画像を描画しない** (見出しが出している)。
   ここを 2 列のままにすると、本文が 56px のサムネ列に入って潰れる
   (実測: カレンダーボタンが 231px → 56px になり、タップ領域不足で失敗した)。
   既存の 1 列指定を ID 付きセレクタで上書きしてしまっていたので、同じ強さで戻す */
#entryList .entry-card.ecard-v2.product-child-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* =========================================================================
   Phase 255-C: 残っている旧UI感を潰す (デザイン言語の統一のみ・機能は無変更)

   Production 実機監査 (320/375/390/430/768/1280 × 11 画面) の実測から着手した。
   「旧UI感」を体感でなく数値で定義:
     ・--ad-* の font-size スケール (11/13/15/17/20/28) 外の値
     ・font-weight 800/900 (Phase 255 系は 700 まで)
     ・10px 未満の文字
     ・枠線の本数 = 「何でも箱にする」度合い

   最大の発生源は **全画面に出る共通クロム** だった:
     サブタブ / やること別タブ / 検索・絞り込み / 並び替え が
     いずれも 12px・weight 800 で、11 画面すべてに効いていた。
     ここを直すと 1 箇所で全画面が揃う。

   ⚠️ 新しい design system は作らない。既存の --ad-* だけを使う。
   ⚠️ 情報の削除・機能変更・navigation 変更はしない。
   ========================================================================= */

/* ---- 共通: サブタブ / やること別タブ ---- */
.sub-tab-button {
  font-size: var(--ad-fs-body);
  font-weight: 700;
  color: var(--ad-muted);
  border-radius: var(--ad-r-sm);
  padding: var(--ad-s2) var(--ad-s4);
}
.sub-tab-button.active {
  background: var(--ad-primary-ink);
  color: #fff;
  box-shadow: var(--ad-sh-sm);
}
.sub-tab-button:hover { background: rgba(13, 62, 66, .06); color: var(--ad-primary-ink); }
.sub-tab-button.active:hover { background: var(--ad-primary-ink); color: #fff; }
@media (max-width: 720px) {
  /* 12px まで落とさない。タブは指で押す要素なので本文サイズを保つ */
  .sub-tab-button { font-size: var(--ad-fs-body); padding: var(--ad-s2) var(--ad-s2); }
}
/* やること別タブ: 「履歴」だけ点線枠で別扱いに見えていたのを他タブと同じ形にする
   (Phase 248 の「履歴 = 棚」の意味は残し、見た目の断絶だけ解消) */
#entriesTaskTabs .sub-tab-button {
  border: 0;
  border-radius: var(--ad-r-sm);
}
#entriesTaskTabs .sub-tab-button.is-archive,
#entriesTaskTabs .sub-tab-button[data-entries-task-tab="completed_task"] {
  border: 0;
  background: var(--ad-sunken);
  color: var(--ad-muted);
}
#entriesTaskTabs .sub-tab-button[data-entries-task-tab="completed_task"].active {
  background: var(--ad-primary-ink);
  color: #fff;
}

/* ---- 共通: 並び替え / 詳細表示 のセレクト ---- */
.entries-sort-bar,
.all-list-filters {
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
  gap: var(--ad-s2);
}
.entries-sort-bar label,
.all-list-filters label {
  font-weight: 700;
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
}
.entries-sort-bar select,
.all-list-filters select,
.all-list-filters input {
  font-size: var(--ad-fs-meta);
  padding: var(--ad-s2) var(--ad-s3);
  border: 1px solid var(--ad-sunken);
  border-radius: var(--ad-r-sm);
  background: var(--ad-surface);
  color: var(--ad-text);
  min-height: 32px;
}

/* ---- 共通: セクション見出し (16px が散在していた → --ad-fs-title 17px) ---- */
.panel-heading h2,
.rich-panel .panel-heading h2 {
  font-size: var(--ad-fs-title);
  font-weight: 700;
  color: var(--ad-text);
}
.panel-heading p {
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
}

/* ---- 戦績: 10px のラベルを 11px (最小サイズ) へ ---- */
#tab-results .stat-label,
#tab-results .kpi-label,
.results-stat .label {
  font-size: var(--ad-fs-meta);
}

/* ---- カレンダー: 9px の応募先名などを 11px へ / weight を 700 までに ---- */
#monthCalendar .cal-retailer,
#monthCalendar .cal-sub,
#monthCalendar .cal-meta,
.month-event .cal-retailer {
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
}
#monthCalendar .month-event,
#monthCalendar .cal-event {
  font-weight: 700;
}
/* ---- tap area: 24px 未満だった操作要素 (Phase 250 の基準を再適用) ---- */
.acq-edit,
.cb-dot,
.p30-prep-name {
  min-height: 24px;
  min-width: 24px;
}
.cb-dot { display: inline-flex; align-items: center; justify-content: center; }

/* ---- 準備 / その他: 箱の連続をやめる ----
   section title / surface / row / details の 4 種類に寄せる。
   情報は 1 つも消さず、枠線と背景の重なりだけを減らす */
#tab-preparations .prep-card,
#tab-preparations .prep-item,
#tab-preparations .rich-panel {
  border: 0;
  border-radius: var(--ad-r-md);
  box-shadow: var(--ad-sh-sm);
  background: var(--ad-surface);
}
#tab-preparations .prep-card .prep-card,
#tab-preparations .rich-panel .rich-panel {
  box-shadow: none;
  background: transparent;
}

/* ---- 実バグ: panel-heading の右ボタンが縦 1 文字ずつに潰れる ----
   .panel-heading は space-between の flex で、左側の <div> が長い説明文を持つと
   右のボタンが 1 文字幅まで縮んでいた (カレンダーの「管理一覧」で実測)。
   ボタンは縮ませず折り返さない */
.panel-heading > button,
.panel-heading > .button {
  flex: none;
  white-space: nowrap;
  align-self: flex-start;
}

/* =========================================================================
   Phase 255-C: 文字サイズ・太さを --ad-* スケールへ寄せる

   ⚠️ セレクタは推測ではなく **実機で計測して特定** した実在クラスだけ。
   スケール = 11 / 13 / 15 / 17 / 20 / 28、weight は 700 まで、10px 未満は禁止。
   文字は 1 つも消していない (サイズと太さだけ)。
   ========================================================================= */

/* ---- 10px 未満だったもの (可読性・PR 表記の視認性の両面で必須) ---- */
.pr-badge,
.rt-badge,
.me-retailer,
.month-today {
  font-size: var(--ad-fs-meta);
}
.pr-badge,
.rt-badge,
.month-today { font-weight: 700; }
.me-retailer { font-weight: 400; color: var(--ad-muted); }

/* ---- 日付ピル: 探すだけで 450 箇所あり weight 900 の最大発生源だった ---- */
.date-label {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  color: var(--ad-muted);
}
.date-value {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  color: var(--ad-text);
}

/* ---- カード内の補助ラベル / バッジ ---- */
.req-label,
.acc-tag,
.offer-note,
.rh-label,
.win-rate-kicker,
.win-rate-count {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}
.offer-note { font-weight: 400; }
.win-rate-meta { font-size: var(--ad-fs-meta); font-weight: 400; }
.rh-value { font-size: var(--ad-fs-lead); font-weight: 700; }

/* ---- 行内アクション / リンク ---- */
.text-action,
.star-action,
.pd-open-label,
.pd-close,
.next-line,
.source-x-link,
.result-link,
.supply-buy-btn,
.pcard-price,
.icon-link,
.icon-button {
  font-size: var(--ad-fs-body);
  font-weight: 700;
}
.text-action,
.star-action,
.pd-open-label,
.offer-note { font-weight: 400; }
.pcard-price { font-weight: 700; }

/* ---- ツールチップ / 補助チップ ---- */
.tt-icon,
.tt-label,
.tt-arrow {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}

/* ---- カレンダー: 日付・イベント ---- */
.month-day-number {
  font-size: var(--ad-fs-name);
  font-weight: 700;
}
.month-day-weekday,
.month-empty,
.month-sub {
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--ad-muted);
}
.month-title {
  font-size: var(--ad-fs-name);
  font-weight: 700;
}
.me-label {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}
.me-product {
  font-size: var(--ad-fs-body);
  font-weight: 700;
}
.month-dot {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}

/* ---- Phase 255-C: 残っていた weight 800/900 の名前付きクラス ---- */
.flow-num,
.flow-link,
.step-no,
.home-disclosure-title,
.home-disclosure-count,
.button.ghost,
.rh-label,
.month-day-weekday {
  font-weight: 700;
}
.flow-num,
.step-no,
.home-disclosure-count { font-size: var(--ad-fs-meta); }
.flow-link { font-size: var(--ad-fs-body); }
.home-disclosure-title { font-size: var(--ad-fs-body); }
/* details の summary が 11px/900 で残っていた */
.app summary { font-weight: 700; }
/* <small> は 10px/800〜950 が散在していた。最小サイズと 700 に揃える */
.app small {
  font-size: var(--ad-fs-meta);
  font-weight: 700;
}

/* ---- Phase 255-C: 管理 4 状態の細部を仕様どおりに ----
   実測すると 4 状態 (応募する/結果待ち/購入・受取/履歴) はすでに
   高さ 163px・15/700 の商品名・12/700 のチップ・同じグリッドで揃っていた。
   差分は 2 点だけだったので、そこだけ合わせる。
   ・サムネが 56x64 の非正方だった → 56x56
   ・店舗名が weight 600 だった → 400 (仕様: 11〜12px / 400 / muted) */
#entryList .entry-card.ecard-v2 > .entry-image,
#entryList .entry-card.ecard-v2 > .img-ph {
  height: 56px;
  align-self: start;
}
#entryList .ecard-v2 .pcard-retailer-name,
#entryList .ecard-v2 .retailer-name {
  font-weight: 400;
}
/* 直下セレクタだと旧 @media の .ecard-v2 .entry-image { height:64px } に届かない箇所があったので、
   同じ形 (子孫セレクタ) で 56px に揃える */
#entryList .ecard-v2 .entry-image,
#entryList .ecard-v2 .img-ph {
  width: 56px;
  height: 56px;
  min-height: 0;
}

/* ---- Phase 255-C: やること別タブの折返し ----
   4 タブ (応募する / 結果待ち / 購入・受取 / 履歴) が flex: 1 1 31% のため
   3 + 1 に割れて「履歴」だけが 2 段目の右端に浮いていた。
   1 行に 4 つ入れる。狭い幅では 2 x 2 の均等割りにして、
   1 つだけ浮くレイアウトを作らない (Phase 248 のタブの意味・順序は不変) */
@media (max-width: 720px) {
  #entriesTaskTabs { flex-wrap: wrap; gap: var(--ad-s1); }
  #entriesTaskTabs .sub-tab-button {
    flex: 1 1 calc(25% - var(--ad-s1));
    min-width: 0;
    padding: var(--ad-s2) var(--ad-s1);
  }
}
@media (max-width: 400px) {
  #entriesTaskTabs .sub-tab-button {
    flex: 1 1 calc(50% - var(--ad-s1));
  }
}

/* ---- Phase 255-C: 商品別グループの子カードの高さについて ----
   Phase 255-B で店舗名を復活させた結果 172 → 193px になったので、
   padding / 行間 / ボタン余白だけで 160〜180px へ縮められるか実測したが、
   **193 → 197px と逆に増えた**。高さを支配しているのは余白ではなく
   店舗名・応募方法の折り返しなので、余白を削っても効かない。
   情報 (店舗名 / 応募方法 / 期限 / primary / 状態) を消すのは禁止なので、
   **193px のまま維持する** (一覧性より「何の抽選か分かる」を優先)。
   効かなかった CSS は残さない */

/* ---- Phase 255-C: 広告表記内のリンクのタップ領域 ----
   フッターの「プライバシーポリシー」が 110x16px で Phase 250 の 24px 基準に届いていなかった。
   文字サイズと位置は変えず、上下の当たり判定だけ広げる */
.affiliate-disclosure a {
  display: inline-block;
  padding-block: 4px;
}

/* =========================================================================
   Phase 256-A: 応募期間の段階フィルタ (受付中 / 開始前 / 終了 / すべて)
   実機報告「探すで開始前と受付中が混ざっていて不便」への対応。
   既存の検索/絞り込み (折りたたみ) とは別に、常時見える位置に置く。
   ========================================================================= */
.phase-filter {
  display: flex;
  gap: var(--ad-s2);
  margin: 0 0 var(--ad-s3);
  flex-wrap: wrap;
}
.phase-chip {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--ad-fs-body);
  font-weight: 700;
  padding: var(--ad-s2) var(--ad-s4);
  min-height: 36px;
  border-radius: var(--ad-r-pill);
  background: var(--ad-surface);
  color: var(--ad-muted);
  box-shadow: var(--ad-sh-sm);
}
.phase-chip:hover { color: var(--ad-primary-ink); }
.phase-chip.active {
  background: var(--ad-primary-ink);
  color: #fff;
}
.phase-chip.phase-chip-all {
  background: transparent;
  box-shadow: none;
  color: var(--ad-muted);
  font-weight: 400;
}
.phase-chip.phase-chip-all.active {
  background: var(--ad-primary-ink);
  color: #fff;
  font-weight: 700;
}
.phase-chip:focus-visible { outline: 2px solid var(--ad-primary-ink); outline-offset: 2px; }

/* =========================================================================
   Phase 256-B: 「公開情報が更新されています」の差分通知

   ⚠️ 大きな警告ボックスにしない (§4)。閉じた状態は 1 行。
   ⚠️ 「あなたの入力が間違い」と読ませない (§6)。色は警告色ではなく情報色。
   ========================================================================= */
.canonical-notice {
  margin: var(--ad-s2) 0 0;
  border-radius: var(--ad-r-sm);
  background: var(--ad-sunken);
}
.canonical-notice > summary {
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  padding: var(--ad-s2) var(--ad-s3);
  cursor: pointer;
  list-style: none;
  font-size: var(--ad-fs-meta);
  font-weight: 700;
  color: var(--ad-primary-ink);
  min-height: 32px;
}
.canonical-notice > summary::-webkit-details-marker { display: none; }
.cn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ad-primary-ink);
  flex: none;
}
.cn-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--ad-muted);
  background: var(--ad-surface);
  border-radius: var(--ad-r-pill);
  padding: 1px 7px;
}
.cn-body { padding: 0 var(--ad-s3) var(--ad-s3); }
.cn-note {
  margin: 0 0 var(--ad-s2);
  font-size: var(--ad-fs-meta);
  color: var(--ad-muted);
  line-height: 1.5;
}
.cn-row {
  display: flex;
  align-items: baseline;
  gap: var(--ad-s2);
  padding: var(--ad-s1) 0;
  font-size: var(--ad-fs-meta);
  flex-wrap: wrap;
}
.cn-field { font-weight: 700; color: var(--ad-text); min-width: 5em; }
.cn-before { color: var(--ad-muted); text-decoration: line-through; }
.cn-arrow { color: var(--ad-muted); }
.cn-after { font-weight: 700; color: var(--ad-primary-ink); }
.cn-actions {
  display: flex;
  align-items: center;
  gap: var(--ad-s3);
  margin-top: var(--ad-s3);
  flex-wrap: wrap;
}
.cn-actions .cn-apply { font-size: var(--ad-fs-meta); padding: var(--ad-s2) var(--ad-s4); min-height: 32px; }
.cn-actions .cn-skip { font-size: var(--ad-fs-meta); min-height: 32px; }

/* ============================================================
   Phase 256-C: 楽天モーションウィジェットの枠
   ------------------------------------------------------------
   高さは読み込み前から予約する (mobile 48px / desktop 90px)。
   遅延読み込みしても後から高さが増えないので CLS は 0 のまま。
   iframe は 320x48 / 728x90 の固定サイズで、
   枠がそれより狭いときだけ JS が --rk-scale を入れて縮める
   (transform なのでレイアウト高さは動かない = CLS を作らない)。
   ============================================================ */
.ad-pr-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ad-s1);
  margin-top: var(--ad-s4);
}
.ad-pr-slot[hidden] { display: none; }
.ad-pr-slot-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-s1);
  font-size: var(--ad-fs-meta);
  font-weight: 400;
  color: var(--muted);
}
.ad-pr-slot-frame {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-pr-slot-frame iframe {
  width: 320px;
  height: 48px;
  border: 0;
  display: block;
  transform: scale(var(--rk-scale, 1));
}
@media (min-width: 768px) {
  .ad-pr-slot-frame { height: 90px; }
  .ad-pr-slot-frame iframe { width: 728px; height: 90px; }
}
/* 広告が読めなかったが枠が画面内にある場合: 高さは保ったまま PR ラベルだけ伏せる
   (枠ごと消すと下がせり上がって CLS になる) */
.ad-pr-slot[data-rk-empty] .ad-pr-slot-label { visibility: hidden; }

/* =========================================================================
   Phase 256-D — Production UI regression hotfix
   実機フィードバック 5 点への対応。原因は実 DOM で測って特定してある
   (計測ログ = scratchpad/p256d/audit.log / probe.log)。
   ========================================================================= */

/* ---- 1. HOME 最上部のイメージ画像を戻す --------------------------------
   Phase 255-A (ccfe039) が .hero-slim で背景を transparent にし、
   その後 df26f50 が HOME の帯ごと display:none にしたため画像が消えていた。
   **ユーザーの承認なしに消えた visual asset** なので、同じ asset・同じ位置・
   同じサイズ感 (min-height 240px) で戻す。
   タイトル (h1) だけは 56px の compact header と二重になるため出さない
   (これは Phase 255-A 時点で既に非表示。今回新たに消したものではない)。
   背景画像なので高さは最初のペイントから確定 = CLS は増えない。 */
.hero.hero-slim[data-hero-tab="dashboard"] {
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  padding: var(--ad-s4);
  overflow: hidden;
  background-color: var(--navy, #12314f);
  background-image: url("../assets/hero-home.jpg");
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}
.hero.hero-slim[data-hero-tab="dashboard"]::before {
  display: block;
  background: linear-gradient(160deg, rgba(49, 72, 86, 0.40) 0%, rgba(73, 106, 119, 0.66) 100%);
  opacity: 1;
}
/* 画像の上に載る文字は白系へ戻す (slim は本文色 = 濃紺のため読めない) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc {
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--ad-fs-body);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-note { color: rgba(255, 255, 255, 0.9); text-shadow: none; }
.hero.hero-slim[data-hero-tab="dashboard"] .hero-note a { color: #ffe6a3; }
.hero.hero-slim[data-hero-tab="dashboard"] .portal-link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-info-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
}

/* ---- 2. マイ抽選のタスクタブが隣へ飛び出す ------------------------------
   原因: .sub-tabs は inline-flex + wrap で、4 つのタブが**中身の幅**で並ぶ。
   「結果待ち」だけ「結果入力 n」バッジを持つので広くなり、
   390px 実測で 応募する166 / 結果待ち166 / 購入・受取266 / 履歴65 と
   段をまたいで列が揃わず、バッジが隣のタブへはみ出して見えていた。
   直し方は overflow:hidden で隠すことではなく、**4 つを同じ列で並べる**こと。 */
@media (max-width: 560px) {
  #entriesTaskTabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  #entriesTaskTabs .sub-tab-button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ad-s1);
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
  #entriesTaskTabs .sub-tab-button[hidden] { display: none; }
}
/* バッジは 800 を使わない (Phase 255-C のスケール)。タブ幅も押し広げない */
.tab-input-badge { font-weight: 700; max-width: 100%; }

/* ---- 3. 探すの商品グループ見出し --------------------------------------
   原因: flex + @media(max-width:480) の flex-wrap で「＋未追加N件」が
   独立した行に回り、430px 実測で見出しが 316px まで伸びていた。
   [サムネ][商品名 / 件数・最短締切][矢印] の 3 列グリッドに固定して、
   ＋未追加はテキスト列の 2 行目に置く (要素は消さない)。 */
#publishedList > .product-accordion .product-accordion-head {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 20px;
  align-items: center;
  gap: var(--ad-s1) var(--ad-s3);
  padding: var(--ad-s2) var(--ad-s3);
}
#publishedList > .product-accordion .product-accordion-thumb,
#publishedList > .product-accordion .accordion-thumb {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 80px;
  height: 80px;
}
#publishedList > .product-accordion .product-accordion-title { grid-column: 2; grid-row: 1; }
#publishedList > .product-accordion .product-accordion-title h3 {
  font-size: var(--ad-fs-name);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#publishedList > .product-accordion .product-accordion-meta { margin-top: var(--ad-s1); }
#publishedList > .product-accordion .product-accordion-head [data-group-add-all] {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  max-width: 100%;
  margin: 0;
}
#publishedList > .product-accordion .product-accordion-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
}
/* 旧 flex 前提の折返し指定を打ち消す (grid では不要かつ列がずれる) */
@media (max-width: 480px) {
  #publishedList > .product-accordion .product-accordion-head { flex-wrap: nowrap; }
  #publishedList > .product-accordion .product-accordion-head [data-group-add-all] { margin-left: 0; }
  #publishedList > .product-accordion .product-accordion-arrow { margin-left: 0; }
}

/* ---- 4. 期間チップ「すべて」だけ見た目が違う ---------------------------
   実測で background が transparent、他の 4 つは白。同じ列に並ぶ同種の
   コントロールなので同じ形にする (色と太さは弱いままにして序列は保つ)。 */
.phase-chip.phase-chip-all {
  background: #fff;
  box-shadow: var(--ad-sh-sm);
}

/* ---- 5. 探すの子カードを詰める ----------------------------------------
   ボタンが潰れなくなったぶんの余白を整理して、目標の 110〜150px に寄せる。
   情報は 1 つも消さない (店舗名 / 期間 / 応募方法 / CTA / 詳細)。 */
#publishedList > .product-accordion .product-child-card { padding: var(--ad-s3); }
#publishedList > .product-accordion .product-child-card .card-top { gap: var(--ad-s2); }
#publishedList > .product-accordion .product-child-card .pcard-retailer-row { gap: var(--ad-s1) var(--ad-s2); }

/* 最短締切は同じ acc-tag の形のまま、締切だと分かる色にする (新しい形は作らない) */
.acc-tag.acc-tag-deadline {
  background: rgba(185, 125, 31, 0.12);
  color: #7a4f12;
}

/* ---- 6. 密度 (Phase 256-D §5 の目標 110〜150px) --------------------------
   既定の「商品別」表示でスクロールするのはグループ見出しなので、
   まずここを詰める。情報 (画像/商品名/件数/最短締切/新着/未追加) は 1 つも消さない。 */
#publishedList > .product-accordion { margin-bottom: var(--ad-s2); }
#publishedList > .product-accordion .product-accordion-head {
  padding: var(--ad-s2) var(--ad-s3);
  gap: 2px var(--ad-s3);
}
#publishedList > .product-accordion .product-accordion-title h3 { line-height: 1.3; }
#publishedList > .product-accordion .product-accordion-meta {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--ad-s1);
  line-height: 1.5;
}
#publishedList > .product-accordion .product-accordion-head [data-group-add-all] {
  margin-top: 2px;
  min-height: 28px;
}

/* 子カード: 応募方法の注記は 1 行に省略する (全文は「詳細を見る」の中に残っている)。
   ここを 2 行にすると 1 枚あたり +18px で、3 枚見えるかどうかに効く */
#publishedList > .product-accordion .product-child-card .apply-note-primary { -webkit-line-clamp: 1; }
#publishedList > .product-accordion .product-child-card .entry-content { padding: var(--ad-s2) var(--ad-s3); }
#publishedList > .product-accordion .product-child-card .card-top { gap: var(--ad-s1); }

/* 幅を中身に依存させない (文言が変わっても横にずれない)。Phase 255-A の
   「max-width だけだと内容幅に縮んで横 CLS になる」と同じ話 */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-copy { width: 100%; }

/* =========================================================================
   Phase 256-E ■1: HOME トップ画像 (hero-home.jpg) を現在のデザイン言語へなじませる。
   **画像そのものは不変** (差し替え/トリミング変更/加工なし・min-height 240px 維持)。
   直すのは境界だけ:
   - 上端: sticky header (#f2f6f5) と画像が硬い直線で接していたので、
     ヘッダー色から画像へ 48px かけて溶ける帯を足す (既存 overlay に 1 层追加)
   - 下端: サブタブが画像に密着していたので 12px の呼吸を入れる
   ========================================================================= */
.hero.hero-slim[data-hero-tab="dashboard"] { margin-bottom: var(--ad-s3); }
.hero.hero-slim[data-hero-tab="dashboard"]::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.55) 0, rgba(242, 246, 245, 0) 48px),
    linear-gradient(160deg, rgba(49, 72, 86, 0.40) 0%, rgba(73, 106, 119, 0.66) 100%);
}

/* =========================================================================
   Phase 256-G: 探す / マイ抽選 / 戦績 / その他 の hero 画像を復活させる
   ------------------------------------------------------------------------
   4 枚 (hero-search / hero-manage / hero-results / hero-more.jpg) は
   Phase 152 から使われていた既存 asset で、Phase 255-A の
   `.hero-slim { background: transparent }` が画面から消していた
   (asset と参照は残ったまま = design.md §57 の D 分類)。

   復活の方針 (ユーザー指定):
   - **高さは増やさない** — 現在の compact 帯 (実測 96〜117px) のまま、
     背景に画像 + overlay + 白文字を重ねるだけ。240px の大型 hero へは戻さない
   - 画像そのものの crop 変更・加工・差し替えはしない。
     background-size: cover / position: center 34% は Phase 152 の既存設定を踏襲
   - 境界は HOME (Phase 256-E A案) と同じ言語:
     上端に header 色 48px フェード / 下端に 12px の呼吸 / 同じ overlay 基調
   - 高さは帯のテキストが決める (背景は高さに影響しない) ので CLS は増えない
   ========================================================================= */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--ad-s3);
  background-color: var(--navy, #12314f);
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
}
.hero.hero-slim[data-hero-tab="published"] { background-image: url("../assets/hero-search.jpg"); }
.hero.hero-slim[data-hero-tab="entries"]   { background-image: url("../assets/hero-manage.jpg"); }
.hero.hero-slim[data-hero-tab="results"]   { background-image: url("../assets/hero-results.jpg"); }
.hero.hero-slim[data-hero-tab="more"]      { background-image: url("../assets/hero-more.jpg"); }

/* overlay: HOME と同じ 2 層 (header 色フェード + Phase 152 のグラデーション)。
   帯が低いぶん文字と画像が近いので、可読性はこの overlay + 白文字 + 影で確保する */
.hero.hero-slim[data-hero-tab="published"]::before,
.hero.hero-slim[data-hero-tab="entries"]::before,
.hero.hero-slim[data-hero-tab="results"]::before,
.hero.hero-slim[data-hero-tab="more"]::before {
  display: block;
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.55) 0, rgba(242, 246, 245, 0) 48px),
    linear-gradient(160deg, rgba(49, 72, 86, 0.46) 0%, rgba(73, 106, 119, 0.72) 100%);
  opacity: 1;
}

/* 画像の上に載る文字は白系へ (HOME と同じ調子)。サイズ・weight は hero-slim のまま */
.hero.hero-slim[data-hero-tab="published"] h1,
.hero.hero-slim[data-hero-tab="entries"] h1,
.hero.hero-slim[data-hero-tab="results"] h1,
.hero.hero-slim[data-hero-tab="more"] h1 {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero.hero-slim[data-hero-tab="published"] .hero-desc,
.hero.hero-slim[data-hero-tab="entries"] .hero-desc,
.hero.hero-slim[data-hero-tab="results"] .hero-desc,
.hero.hero-slim[data-hero-tab="more"] .hero-desc {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero.hero-slim[data-hero-tab="published"] .portal-link,
.hero.hero-slim[data-hero-tab="entries"] .portal-link,
.hero.hero-slim[data-hero-tab="results"] .portal-link,
.hero.hero-slim[data-hero-tab="more"] .portal-link { color: rgba(255, 255, 255, 0.9); }
.hero.hero-slim[data-hero-tab="published"] .hero-note,
.hero.hero-slim[data-hero-tab="entries"] .hero-note,
.hero.hero-slim[data-hero-tab="results"] .hero-note,
.hero.hero-slim[data-hero-tab="more"] .hero-note { color: rgba(255, 255, 255, 0.9); }
.hero.hero-slim[data-hero-tab="published"] .hero-note a,
.hero.hero-slim[data-hero-tab="entries"] .hero-note a,
.hero.hero-slim[data-hero-tab="results"] .hero-note a,
.hero.hero-slim[data-hero-tab="more"] .hero-note a { color: #ffe6a3; }
.hero.hero-slim[data-hero-tab="published"] .hero-info-toggle,
.hero.hero-slim[data-hero-tab="entries"] .hero-info-toggle,
.hero.hero-slim[data-hero-tab="results"] .hero-info-toggle,
.hero.hero-slim[data-hero-tab="more"] .hero-info-toggle {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* =========================================================================
   Phase 257-B: hero 画像とページ UI の融合
   ------------------------------------------------------------------------
   実機の違和感 = 「画像だけ貼り付けた感じ」の正体は**下端の処理が無いこと**。
   上端は 256-E で header 色 (#f2f6f5) への 48px フェードを入れたが、
   下端は硬い直線のままページ背景 (#f2f6f5〜#f4f7f6) に接していた。
   画像 asset・高さ・overlay 基調はすべて不変。境界だけを繋ぐ。
   ========================================================================= */

/* 1) 下端フェード: 画像の裾をページ背景色へ溶かす (全 5 画面共通の言語)。
      HOME (240px) は 56px かけて、compact 帯 (96px) は 24px で軽く。
      ::after は未使用だったのでフェード専用レイヤーとして使う */
.hero.hero-slim[data-hero-tab]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(242, 246, 245, 0) 0%, rgba(242, 246, 245, 0.85) 100%);
}
.hero.hero-slim[data-hero-tab="dashboard"]::after { height: 56px; }

/* 文字がフェードより手前に来るように (hero-copy は既に position:relative) */
.hero.hero-slim .hero-copy { z-index: 1; }

/* 2) HOME の 3 層 (hero → subnav → 今日の情報) をひと続きに:
      サブナビの白い帯を画像の裾に 20px かぶせる。
      画像は 240px のまま隠れず (下端 20px はフェード帯の中)、
      「画像の上に UI が載っている」構造に見える。
      static な CSS 配置なので CLS は発生しない */
.hero.hero-slim[data-hero-tab="dashboard"] { margin-bottom: 0; }
#tab-dashboard .sub-tabs {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  box-shadow: var(--ad-sh-sm);
}

/* =========================================================================
   Phase 258-A (bug): 「?」で開く説明パネルが白地に白文字で読めない
   ------------------------------------------------------------------------
   真因: 256-D/G で hero 画像上の .hero-note を白文字にしたセレクタ
   (.hero.hero-slim[data-hero-tab=…] .hero-note) が、
   **白背景 rgba(255,255,255,.86) の .hero-details パネルの中の .hero-note にも**
   そのまま当たっていた (リンクも #ffe6a3 の薄黄で 1.3:1)。
   パネルの中はパネルの背景を基準に配色する。
   ========================================================================= */
.hero.hero-slim .hero-details {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: var(--ad-r-sm);
  padding: var(--ad-s3);
  margin-top: var(--ad-s2);
}
.hero.hero-slim[data-hero-tab] .hero-details .subhead,
.hero.hero-slim[data-hero-tab] .hero-details .hero-note {
  color: var(--ad-text);
  text-shadow: none;
}
.hero.hero-slim[data-hero-tab] .hero-details .hero-note a {
  color: var(--ad-primary-ink);
}

/* =========================================================================
   Phase 259-A: A2 + B ハイブリッド (ユーザー採用方針)
   ------------------------------------------------------------------------
   A2 = HOME hero 内に ✦ + Aster Draw を置き、hero がブランドビジュアルになる。
        HOME では header 側の重複ブランド表示を出さず、最上部にいる間は header を
        透過して hero と一体化 (スクロールで solid に戻る = 可読性維持)。
   B  = hero-home.jpg の世界観をページ背景へ薄く継続。
        ⚠️ background-attachment: fixed は iOS Safari で効かないため使わず、
        **position: fixed の疑似レイヤー** (body::before) で実装する。
        画像は cover (縦引き伸ばしなし)・白 veil で本文可読性を確保。
   画像 asset は 5 枚とも不変。CLS 0 (すべて静的配置 / class toggle のみ)。
   ========================================================================= */

/* ---- B: 全画面共通の固定背景レイヤー (iOS 対応の fixed 疑似レイヤー) ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.88) 0%, rgba(242, 246, 245, 0.94) 42%, rgba(244, 247, 246, 0.975) 100%),
    url("../assets/hero-home.jpg") center / cover no-repeat;
  pointer-events: none;
}
/* body 自身の不透明グラデーションは fixed レイヤーを隠すため透明へ
   (基調色は fixed レイヤー側の veil が担う) */
body { background: transparent; }

/* ---- A2: hero 内ブランド ---- */
.hero-brand {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--ad-s2);
  pointer-events: none;
}
.hero-brand-mark {
  display: grid;
  place-items: center;
  background: rgba(18, 49, 79, 0.88);
  color: var(--gold-bright);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
/* HOME: 大きく左上 (画像の中にブランドが載る) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand { top: 14px; left: var(--ad-s4); }
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-name {
  font-size: 24px; font-weight: 700; letter-spacing: .03em; color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
/* 他 4 タブ: 小さく右下 (題字と重ならない位置。prototype の重なりを解消) */
.hero.hero-slim[data-hero-tab="published"] .hero-brand,
.hero.hero-slim[data-hero-tab="entries"] .hero-brand,
.hero.hero-slim[data-hero-tab="results"] .hero-brand,
.hero.hero-slim[data-hero-tab="more"] .hero-brand {
  right: var(--ad-s3); bottom: 8px; left: auto; top: auto; opacity: .92;
}
.hero.hero-slim[data-hero-tab="published"] .hero-brand-mark,
.hero.hero-slim[data-hero-tab="entries"] .hero-brand-mark,
.hero.hero-slim[data-hero-tab="results"] .hero-brand-mark,
.hero.hero-slim[data-hero-tab="more"] .hero-brand-mark {
  width: 20px; height: 20px; border-radius: 6px;
}
.hero.hero-slim[data-hero-tab="published"] .hero-brand-mark svg,
.hero.hero-slim[data-hero-tab="entries"] .hero-brand-mark svg,
.hero.hero-slim[data-hero-tab="results"] .hero-brand-mark svg,
.hero.hero-slim[data-hero-tab="more"] .hero-brand-mark svg { width: 12px; height: 12px; }
.hero.hero-slim[data-hero-tab="published"] .hero-brand-name,
.hero.hero-slim[data-hero-tab="entries"] .hero-brand-name,
.hero.hero-slim[data-hero-tab="results"] .hero-brand-name,
.hero.hero-slim[data-hero-tab="more"] .hero-brand-name {
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---- A2: HOME の header 一体化 ---- */
/* HOME では header 側の重複ブランドを出さない (hero 側が唯一のブランド表示) */
body[data-hero-tab="dashboard"] .ad-hdr-mark,
body[data-hero-tab="dashboard"] .ad-hdr-name { display: none; }
/* 最上部にいる間だけ透過 = 白帯とヒーローの分離を解消。
   hero を header の背後まで引き上げて画像を header 領域まで届かせる */
body[data-hero-tab="dashboard"]:not(.hdr-solid) .ad-hdr {
  background: transparent;
  box-shadow: none;
}
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"] {
  margin-top: -56px;
  padding-top: calc(56px + var(--ad-s3));
  min-height: 296px; /* 240px の見え高 + 背後に回った 56px。画像の見える量は不変 */
}
/* 透過中は header 上端のフェード (256-E の 48px) が不要になるので、
   hero 上端は素の画像 → 通知/account アイコンの視認性は下の overlay が確保する */
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before {
  background:
    linear-gradient(180deg, rgba(18, 40, 60, 0.34) 0, rgba(18, 40, 60, 0.04) 110px),
    linear-gradient(160deg, rgba(49, 72, 86, 0.40) 0%, rgba(73, 106, 119, 0.66) 100%);
}
/* 透過中のアイコンは白 (画像上に載るため)。solid に戻ったら通常色 */
body[data-hero-tab="dashboard"]:not(.hdr-solid) .ad-hdr-btn { color: #fff; }

/* ---- 4 タブの compact hero: 124px + 下寄せ題字はやめて従来位置のまま ---- */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] { min-height: 124px; }

/* =========================================================================
   Phase 263: hero ブランドブロック統合 + 世界観のページ背景継続 + deep-link
   ------------------------------------------------------------------------
   ユーザー実機評価 (2026-09-01):
   - HOME で「✦ Aster Draw」(上) とキャッチコピー (hero 下端) が分離し、
     コピーが画像の裾に張り付いて見える → 1 ブロックへ統合する
   - hero 画像を「上のおまけ」でなく、ページ全体の世界観の源にする
   - 他 4 画面の 124px 帯は存在感が弱い
   画像 asset 5 枚は不変 (差し替え/加工なし)。すべて静的 CSS = CLS 0。
   ========================================================================= */

/* ---- 1. HOME: ブランド + コピーを 1 ブロックに (§2/§3) ----
   copy を flex-end (下端) から上へ移し、✦ Aster Draw の直下で左揃えにする。
   これで hero 下端は「画像 + 下端フェード」だけの呼吸領域になる (§4)。 */
.hero.hero-slim[data-hero-tab="dashboard"] { align-items: flex-start; }
/* brand (top:14px + 38px = 下端 52px) の直下から copy が始まるように詰める。
   padding-top は初期 CSS から効くので描画後のシフトは起きない */
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"] {
  padding-top: calc(56px + 4px);
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc {
  max-width: 10.5em; /* 「ポケカの抽選・締切を / まとめて管理」の語区切りで折る (13.5em だと「まとめ/て管理」で割れた) */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .01em;
}
/* ? トグルは copy ブロックの右上のまま (下端に置かない)。位置指定は既存を踏襲 */

/* ---- 2. hero 下端の呼吸 (§4): subnav の negative margin をやめる ----
   Phase 257-B の「サブタブを画像の裾に -20px かぶせる」一体感づくりを廃止。
   世界観の継続はページ背景 (下の 3) が担う。 */
.hero.hero-slim[data-hero-tab="dashboard"] { margin-bottom: var(--ad-s3); }
#tab-dashboard .sub-tabs { margin-top: 0; }

/* ---- 3. 世界観のページ背景: タブごとに hero 画像を背景ソースへ (§5) ----
   Phase 259-A の B (body::before の position:fixed 疑似レイヤー・iOS 安定) を
   タブ連動へ拡張。veil は本文可読性を守りつつ、以前 (0.88/0.94/0.975) より
   ひと呼吸だけ画像を見せる。画像は cover (縦引き伸ばしなし)。 */
body::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.855) 0%, rgba(242, 246, 245, 0.925) 42%, rgba(244, 247, 246, 0.965) 100%),
    url("../assets/hero-home.jpg") center / cover no-repeat;
}
body[data-hero-tab="published"]::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.855) 0%, rgba(242, 246, 245, 0.925) 42%, rgba(244, 247, 246, 0.965) 100%),
    url("../assets/hero-search.jpg") center / cover no-repeat;
}
body[data-hero-tab="entries"]::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.855) 0%, rgba(242, 246, 245, 0.925) 42%, rgba(244, 247, 246, 0.965) 100%),
    url("../assets/hero-manage.jpg") center / cover no-repeat;
}
body[data-hero-tab="results"]::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.855) 0%, rgba(242, 246, 245, 0.925) 42%, rgba(244, 247, 246, 0.965) 100%),
    url("../assets/hero-results.jpg") center / cover no-repeat;
}
body[data-hero-tab="more"]::before {
  background:
    linear-gradient(180deg, rgba(242, 246, 245, 0.855) 0%, rgba(242, 246, 245, 0.925) 42%, rgba(244, 247, 246, 0.965) 100%),
    url("../assets/hero-more.jpg") center / cover no-repeat;
}

/* ---- 4. 他 4 画面の hero の存在感 (§6): 124px → 160px ----
   240px の大型へは戻さず、入った瞬間に画像と世界観を認識できる高さへ。
   overlay / 文字色 / 境界フェードは 256-G / 257-B の言語のまま。 */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] { min-height: 160px; }

/* ---- 5. deep-link highlight (§13) ----
   HOME 新着 → 探す で対象カードに 2.5 秒の subtle highlight。
   激しい animation は使わない (色 + 枠 + 影の静的強調 + ゆるい transition)。 */
#publishedList .published-card,
.published-flat-list .published-card {
  transition: box-shadow .4s ease, border-color .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  #publishedList .published-card,
  .published-flat-list .published-card { transition: none; }
}
.published-card.spotlight {
  border-color: var(--gold, #b8923c);
  box-shadow: 0 0 0 4px rgba(184, 146, 60, 0.45), 0 12px 32px rgba(23, 31, 43, 0.10);
  background: linear-gradient(0deg, rgba(184, 146, 60, 0.07), rgba(184, 146, 60, 0.07)), #fff;
  outline: none;
}
/* 応募先別 (kid-of-retailer) の子カードにも同じ highlight が乗る (border 共有のため追加指定不要)。
   長い説明文が brand と重ならないよう、4 タブの hero-desc は brand ぶんの右余白を確保 */
.hero.hero-slim[data-hero-tab="published"] .hero-desc,
.hero.hero-slim[data-hero-tab="entries"] .hero-desc,
.hero.hero-slim[data-hero-tab="results"] .hero-desc,
.hero.hero-slim[data-hero-tab="more"] .hero-desc { padding-right: 96px; }

/* Phase 281: 「探す」0件時の絞り込み解除ボタン (empty 内。タップ標的 44px 級) */
.published-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 18px;
}

/* =========================================================================
   Phase 271: Aster Draw 読み物 — HOME editorial card + 記事画面
   ------------------------------------------------------------------------
   カードは楽天広告の代替バナーではなく Aster Draw 自身のコンテンツ入口。
   - 配色は hero の世界観 (navy × gold トークン) を再利用。EC 的な CTA は置かない
   - 目標高さ 70-90px @390px (Amazon 確認〜subnav の間を圧迫しない)
   - 静的 HTML 配置 (boot ゲート外) なので高さが後から変わらない = CLS 0
   ========================================================================= */
.editorial-card {
  /* Phase 275 (B案): 左に完成形写真のサムネ + 右にテキストの flex 2 カラム。
     目標高さは A 案と同じ 80px 台 (サムネ 48x60 + padding 10/11 = 81px 前後) */
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--ad-s3);
  padding: 10px 14px 11px;
  border-radius: 14px;
  border: 1px solid rgba(216, 185, 111, 0.45);
  background: linear-gradient(135deg, #31485c 0%, #24374b 100%);
  color: #f4efe3;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.editorial-thumb {
  flex: none;
  width: 48px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(216, 185, 111, 0.4);
  background: #22354b;
}
.editorial-text { flex: 1; min-width: 0; }
/* 320px はサムネを一段小さくし、補足行を畳んで高さ増を抑える
   (タイトルは自然折返し2行を許容 — 従来テキスト版も 320px では2行だった) */
@media (max-width: 340px) {
  .editorial-thumb { width: 44px; height: 55px; }
  /* 後方の基底 .editorial-sub { display:block } に負けないよう親付きで詳細度を上げる */
  .editorial-card .editorial-sub { display: none; }
}
.editorial-card:hover { border-color: rgba(216, 185, 111, 0.75); }
.editorial-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.editorial-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-bright);
}
.editorial-title {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.35;
  color: #fff;
}
.editorial-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(244, 239, 227, 0.82);
}

/* 記事画面 (?tab=guide-card-storage)。article semantic + 見出し階層 h2 > h3 */
.guide-article {
  max-width: 640px;
  margin: 0 auto;
  padding: 4px 2px 24px;
  overflow-wrap: anywhere; /* 長い商品名でも横スクロールを出さない */
}
.guide-article .guide-back { margin-bottom: 10px; }
.guide-kicker {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.guide-article h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.4;
}
.guide-lede { margin: 0 0 14px; line-height: 1.8; }
.guide-points {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
/* Phase 276: 冒頭の簡易 affiliate 開示。読める大きさ・読める色で、ただしバナーのようには目立たせない */
.guide-affiliate-note {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(52, 71, 90, 0.8);
}
.guide-point {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  color: var(--ink);
}
.guide-step,
.guide-summary {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}
.guide-step h3,
.guide-summary h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
}
.guide-step-no {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 2px;
  white-space: nowrap;
}
.guide-step p,
.guide-summary p { margin: 0 0 8px; line-height: 1.75; }
.guide-step p:last-child,
.guide-summary p:last-child { margin-bottom: 0; }
/* 本文中の控えめな PR 行 (大きな広告バナーにしない)。pr-badge は既存部品 */
.guide-pr { font-size: 13px; }
.guide-pr a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Phase 273: 本人撮影写真。縦横比は attr (width/height) のまま保ち crop しない
   (object-fit で用品が切れないように)。portrait が巨大化しないよう幅で制御する */
.guide-photo {
  margin: 0 0 10px;
  border-radius: 10px;
  overflow: hidden;
}
.guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #eee;
}
.guide-photo figcaption {
  padding: 5px 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(52, 71, 90, 0.72);
}
/* 商品写真 + 装着写真 の 2枚並び (portrait でも各半幅なので高さが出すぎない) */
.guide-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}
.guide-photo-row .guide-photo { margin: 0; }
/* 単独の portrait 写真は幅を絞って高さを常識的に保つ */
.guide-photo--solo { max-width: 300px; }
/* 完成形 (記事の中心写真) は少し大きめ・中央寄せ */
.guide-photo--hero {
  max-width: 400px;
  margin: 0 auto 12px;
}
.guide-disclosure {
  margin-top: 20px;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(52, 71, 90, 0.75);
}

/* ===========================================================================
   Phase 293-A — hero-home.jpg の世界へ UI を寄せる (A + B hybrid)
   ---------------------------------------------------------------------------
   土台は Direction A (Quiet Collector)。hero の解法だけ Direction B の
   「文字を絵の地面へ降ろし、overlay は下端から立ち上がる 1 層だけ」を移植した。
   色は A の生成り (--a-scrim) と墨 (--a-ink) のまま。B の白 + text-shadow は採らない。

   ⚠️ これは最終ビジュアルではない。UX・情報構造・アクセシビリティの土台として
      採用したもので、別途 Visual Mastering round を行う (ユーザー指示 2026-09-07)。

   B から取り込まなかったもの (意図的):
     - 遠景テキストを薄くして重要度を表す手法 (--b-ink-far #6b8195 = 4.04:1 で AA 未達)
     - desktop で店名と時刻を大きく離すレイアウト (1024px で 675px 離れて破綻)
     - hero 下端の草原を漂白する濃い地面 (下端帯 meanS 0.067)
     - hero の全幅化 (S-1 の範囲外。framing は Mastering round の判断に回す)

   検証: node tools/measure-hero.js  /  node tools/shoot-ui.js
   =========================================================================== */

/* ============================================================================
   Phase 293-A / Direction A — "Quiet Collector"
   ----------------------------------------------------------------------------
   src/styles.css の**後ろ**に追加読み込みされる上書き層。
   リポジトリのファイルは 1 つも編集していない。CSS のみ (JS / DOM 変更なし)。

   絵から翻訳するのは **光 / 空気 / 色温度 / 静けさ / 余白 / 柔らかい縁 / 高明度** だけ。
   竜・城・花・中世・羊皮紙・金装飾といったモチーフは 1 つも UI へ持ち込まない。
   目指すのは「この絵の光の中に置かれた、現代的で読みやすい情報ツール」。

   実測 (canvas でピクセル走査。数値の根拠は dirA-notes.md):
     輝度中央値 194/255・p10=128・p1=70    → 暗部がほぼ無い high-key
     彩度中央値 0.207 / p90 0.434          → 色は彩度でなく色相で語られる
     水平10バンドの平均輝度 173→226→137    → 面は水平の帯で積まれ、隣接差は 7〜20
     左列 #bec6b5(L195) → 右列 #84a0a6(L154) → 左が暖・右が寒。左が空いている
     白は紙白でなく生成り (#f2ebd9 / #eee4cc / #e1d7bf)
   奥行き・空間演出はしない (Direction B の担当)。平面のまま、明度差と罫 1 本で階層を作る。
   ========================================================================== */

:root {
  /* --- 面: 絵の白が生成りなので、面もわずかに暖かい高明度へ --------------- */
  --a-paper:  #fcfbf7;   /* カード・行の面 */
  --a-ground: #f3f3ee;   /* ページの地 */
  --a-plate:  #f7f6f0;   /* 一段だけ沈む面 (日付帯など) */
  --a-sunken: #ebebe4;

  /* --- 墨: 絵の最暗部は黒ではなく青緑 (実測 minPx = rgb(10,23,24)) ------- */
  --a-ink:    #1f3239;   /* 本文 (--a-paper 上 12.5:1) */
  --a-ink-2:  #4a5f63;   /* 補助 (--a-paper 上  6.4:1) */
  /* Phase 293-B R2 (提案 2.1): 「補助」と「探していないときは読まなくてよい情報」が
     どちらも #4a5f63 になっていたので第 3 のインクを 1 色だけ足す。
     実測: paper 5.53 / plate 5.29 / today帯 5.18 / hover 5.10 / ground 5.15 / sunken 4.78
     → 全 6 面で AA (4.5:1) 通過。#5c7176 は sunken で 4.30 に落ちるので不採用 */
  --a-ink-3:  #59696d;

  /* --- 縁: 絵に輪郭線は無い。線は「面が変わった痕跡」の強さまで ---------- */
  --a-rule:      rgba(31, 50, 57, 0.14);
  --a-rule-soft: rgba(31, 50, 57, 0.075);
  --a-hover:     rgba(31, 50, 57, 0.045);

  /* --- 色相 4 種。彩度は絵の中央値 (0.21) 付近まで。意味は色相が運ぶ ----- */
  --a-sky-bg:  #e6eef4;  --a-sky-ink:  #3d5f75;   /* 開始 ← 空 #a0c7df    5.9:1 */
  --a-rose-bg: #f6e6e0;  --a-rose-ink: #9c4238;   /* 締切 ← 唯一の警告色  5.2:1 */
  --a-leaf-bg: #e9eede;  --a-leaf-ink: #4a6438;   /* 発表 ← 草原 #a4ad66  5.6:1 */
  --a-sea-bg:  #e3edf0;  --a-sea-ink:  #2f6169;   /* 受取 ← 海            5.8:1 */

  /* --- 逆光の一点。絵で L245 超は全体の 1% しかない = 面積予算も同じ ----- */
  --a-glow-bg:   #f8ecd4;   /* 水平線の暖色 #fbecc4 を薄めた面 */
  --a-glow-fill: #a06a30;   /* 白文字を乗せて 4.6:1 */
  --a-glow-ink:  #8a5c28;

  /* --- 間の階段は 3 段だけ (絵の隣接バンド差が 7〜20 しか無いのと同じ) --- */
  --a-gap-s: 8px;
  --a-gap-m: 16px;
  --a-gap-l: 28px;

  --a-r: 10px;      /* 面の角 */
  --a-r-tag: 3px;   /* 索引タグの角 */

  /* scrim (文字の下にだけ敷く生成りの光) */
  --a-scrim: 252, 251, 247;

  /* Phase 293-B R2: sticky ヘッダ高。sticky 日付見出し (.month-day-head) の top が
     これに依存するので、.ad-hdr の height と 1 箇所で共有する */
  --a-hdr-h: 56px;

  /* Phase 293-B R2 (提案 M-1): duration をトークンにする。
     従来の @media (prefers-reduced-motion) は**セレクタ列挙**だったので、
     部品を足すたびに漏れていた。以後すべての transition は var(--a-dur) var(--a-ease) */
  --a-dur:  180ms;
  --a-ease: cubic-bezier(.2, .7, .2, 1);
}
/* これで新しい部品を足しても reduced-motion から漏れない */
@media (prefers-reduced-motion: reduce) {
  :root { --a-dur: 0.01ms; }
}

/* ============================================================================
   1. ページの地 — 「絵が続く空間」ではなく「絵の光で染まった面」
   絵の水平バンドと 左暖→右寒 だけを地に写す。奥行きは作らない。
   ========================================================================== */
html { background: var(--a-ground); }

body::before {
  background:
    /* (a) 左暖 → 右寒。実測 #bec6b5 → #84a0a6 を alpha で再現 */
    linear-gradient(100deg,
      rgba(251, 236, 196, 0.28) 0%,
      rgba(251, 236, 196, 0.00) 46%,
      rgba(132, 160, 166, 0.15) 100%),
    /* (b) veil。上が薄く下が濃い = 絵の輝度バンドと同じ向き。色は白でなく生成り */
    linear-gradient(180deg,
      rgba(246, 245, 239, 0.870) 0%,
      rgba(246, 245, 239, 0.930) 42%,
      rgba(248, 247, 242, 0.962) 100%),
    url("../assets/hero-home.jpg") center bottom / cover no-repeat;
}

/* ============================================================================
   2. sticky header — 影の壁をやめ、罫 1 本で面の切れ目を示す
   ========================================================================== */
.ad-hdr {
  height: var(--a-hdr-h);   /* R2: sticky 日付見出しの top と 1 箇所で共有する */
  background: var(--a-ground);
  box-shadow: none;
  border-bottom: 1px solid var(--a-rule-soft);
}
body[data-hero-tab="dashboard"]:not(.hdr-solid) .ad-hdr {
  background: transparent;
  border-bottom-color: transparent;
}
/* HOME 最上部では header は hero の明るい上帯の上に乗る。
   現行は白アイコンだが、上帯を暗幕から生成りへ変えたので墨へ反転する */
body[data-hero-tab="dashboard"]:not(.hdr-solid) .ad-hdr-btn { color: var(--a-ink-2); }
.ad-hdr-btn:hover { background: var(--a-hover); color: var(--a-ink); }
.ad-hdr-btn:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.ad-hdr-name { color: var(--a-ink); }

/* ============================================================================
   3. hero — navy 全面 overlay の廃止
   ----------------------------------------------------------------------------
   現行 ::before は rgba(49,72,86,.40) → rgba(73,106,119,.66) の斜め暗幕。
   絵の p10 が 128 なのに、この暗幕は絵自身の最暗部よりさらに暗い面を全面に敷き、
   空の水色・逆光の暖色・竜を消していた。

   直し方: 「暗くして白文字を読ませる」構造そのものをやめる。
     (1) 全面 overlay を廃止し、**文字が乗る帯にだけ**生成りの scrim を敷く
     (2) 文字は白 → 墨 (絵が high-key なので暗色文字のほうが素直。text-shadow 不要)
     (3) 竜 (画像 x≈75% / y≈36%)・城 (x≈68%)・山 (x≈86%) が乗る右側には
         scrim を一切かけない。絵は構図上、左側が空いている (実測 col0 L195 / col5 L154)
   ========================================================================== */

/* ============================================================================
   S-1 (Phase 293-A hybrid): 文字を「絵の地面」へ降ろす
   ----------------------------------------------------------------------------
   dirA は全面暗幕をやめた点は正しかったが、文字の下に不透明な生成りのプレート
   (左 44% を alpha 0.90〜0.93) を敷いていた。これは「暗幕を明るい幕に替えた」
   だけで「文字にはプレートが要る」構造は残っており、実測で hero の彩度が
   絵の 0.207 → 0.140 (1024px では 0.073) まで落ちていた。しかも絵の逆光の暖色は
   左の水平線にあるため、回復すべき当の要素がプレートの下に隠れていた。

   dirB の構造 (文字を下端へ降ろし、overlay を下端から立ち上がる 1 層だけにする)
   を採り、色は dirA の生成り (--a-scrim) と墨 (--a-ink) のまま使う。
   dirB の白 + text-shadow のエンボス調は採らない。
   また dirB は下端 alpha 0.92 で草原を漂白していた (下端帯 meanS 0.067) ので、
   そこまで濃くしない。墨は十分に暗い (--a-paper 上 12.5:1) ので薄い地面で足りる。

   受け入れ基準: hero 矩形の meanS ≥ 0.19 / 下端 70px 帯の meanS ≥ 0.11 (390・1024 とも)
   ========================================================================== */
.hero.hero-slim[data-hero-tab="dashboard"] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* 絵の上部には何も置かない */
  align-items: stretch;
  padding-bottom: 16px;
  background-color: var(--a-plate);
  box-shadow: inset 0 0 0 1px rgba(31, 50, 57, 0.10);  /* 影で浮かせず、縁を 1 本で閉じる */
  margin-bottom: 0;
}

/* ブランドを絶対配置から通常フローへ戻し、コピーと 1 ブロックで地面に載せる。
   (Phase 263 の「ブランドとコピーを 1 かたまりで見せる」意図は保つ。置く高さだけ変える) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  margin: 0 0 var(--a-gap-s);
}

/* overlay は下端から立ち上がる生成りの地面 1 層だけ。
   空・雲・竜・城・海・山には alpha 0 で一切触れない。
   224px で完全に消えるので、hero 見え高 240px のうち上部はほぼ素の絵になる。 */
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
.hero.hero-slim[data-hero-tab="dashboard"]::before {
  display: block;
  opacity: 1;
  background: linear-gradient(to top,
    rgba(var(--a-scrim), 0.48)   0px,
    rgba(var(--a-scrim), 0.38)  40px,
    rgba(var(--a-scrim), 0.20) 108px,
    rgba(var(--a-scrim), 0.06) 168px,
    rgba(var(--a-scrim), 0.00) 224px);
}
/* 下端フェード (::after) は上の 1 層が兼ねるので二重に敷かない */
.hero.hero-slim[data-hero-tab="dashboard"]::after { display: none; }

/* 地面の濃さは幅で変える。同じ alpha でも「絵に対して文字が占める割合」が違うため。
   - 320px: hero が狭く、コピーが 2 行になって上へ伸びる → 少し厚く
   - 1024px: cover のクロップが空中心になり、文字の背後は明るい空 → 薄くできる
     (実測コントラストが 7.8〜10.3:1 と余裕があるので、その余裕を絵に返す) */
@media (max-width: 380px) {
  body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
  .hero.hero-slim[data-hero-tab="dashboard"]::before {
    background: linear-gradient(to top,
      rgba(var(--a-scrim), 0.62)   0px,
      rgba(var(--a-scrim), 0.50)  40px,
      rgba(var(--a-scrim), 0.26) 108px,
      rgba(var(--a-scrim), 0.08) 168px,
      rgba(var(--a-scrim), 0.00) 224px);
  }
}
@media (min-width: 821px) {
  body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
  .hero.hero-slim[data-hero-tab="dashboard"]::before {
    background: linear-gradient(to top,
      rgba(var(--a-scrim), 0.34)   0px,
      rgba(var(--a-scrim), 0.26)  40px,
      rgba(var(--a-scrim), 0.13) 108px,
      rgba(var(--a-scrim), 0.04) 168px,
      rgba(var(--a-scrim), 0.00) 224px);
  }
}

/* S-2: .hero-info-toggle は position:absolute で右上に固定されている。
   :not() で除外しないと relative に上書きされ、「?」が本文の先頭へ流れ込む
   (dirA が実際に踏んだ事故。構造を変えた今回も同じ轍を踏まないよう明示的に残す) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-copy { position: relative; }
.hero.hero-slim[data-hero-tab="dashboard"] .hero-copy > *:not(.hero-info-toggle) {
  position: relative;
  z-index: 1;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-info-toggle { z-index: 3; }

/* (2) 文字を墨へ */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-name {
  color: var(--a-ink);
  text-shadow: none;
  font-weight: 700;
  letter-spacing: .02em;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-mark {
  background: #23383f;   /* 38px は不変。絵の最暗部 rgb(10,23,24) と同じ青緑寄りの暗色 */
  box-shadow: none;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc {
  color: var(--a-ink);
  text-shadow: none;
  font-weight: 700;
  line-height: 1.5;
}
/* リンクは自分で下地を持つチップにする (scrim の外へ出ても読める) */
.hero.hero-slim[data-hero-tab="dashboard"] .portal-link {
  color: var(--a-ink);
  /* 地面を薄く保つ代わりに、チップ自身が下地を持って AA を満たす。
     hero 全体に占める面積が小さいので、絵の彩度・空気感はほとんど損なわない */
  background: rgba(var(--a-scrim), 0.96);
  border: 1px solid var(--a-rule);
  border-radius: var(--a-r-tag);
  padding: 4px 8px;
  font-weight: 700;
}
.hero.hero-slim[data-hero-tab="dashboard"] .portal-link:hover {
  background: var(--a-paper);
  color: var(--a-ink);
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-info-toggle {
  color: var(--a-ink);
  background: rgba(var(--a-scrim), 0.96);
  border: 1px solid var(--a-rule);
}

/* (3) 1024px で画像を覆っていた白い通知カード (.hero-details) を、
       枠も影も持たない **キャプション行** に変える。文言は 1 文字も減らさない */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 8px;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details .hero-note {
  color: var(--a-ink-2);
  font-size: 12px;
  line-height: 1.65;
  max-width: 46ch;      /* scrim が濃い左 44% の内側に収める */
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details .hero-note a {
  color: var(--a-sea-ink);
  border-bottom-color: rgba(47, 97, 105, 0.4);
}

/* 320px: ブランド名 (24px / 実測 197px) の右端が、header の通知バッジ (x≈227〜243) と
   重なる。白抜き時代は目立たなかったが墨にすると読めるので、この幅だけ 20px に落とす */
@media (max-width: 360px) {
  .hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-name { font-size: 20px; }
  .hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-mark { width: 32px; height: 32px; border-radius: 9px; }
}

/* ============================================================================
   4. サブタブ — 浮いた白いピルをやめ、罫に沿った索引にする
   (#dashboardSubTabs / #monthFilterTabs のみ。他タブの sub-tabs は構造が違うので触らない)
   ========================================================================== */
/* 機能タブ (デスクトップ) — 浮いた白いパネルをやめ、地の上に置いた索引にする。
   階層は 2 段: 機能タブ = 面を持つチップ / サブタブ = 罫 1 本。形が違うので迷わない */
.tabs {
  gap: 4px;
  margin: var(--a-gap-m) 0 var(--a-gap-s);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tab-button {
  border: 1px solid transparent;
  border-radius: var(--a-r-tag);
  color: var(--a-ink-2);
  /* R2/D-1: 機能タブ (desktop) も非アクティブは 400。直下のサブタブが 400 なのに
     ここだけ 700 だと、2 段のナビが「同じ声の大きさ」で並んで階層が読めない */
  font-weight: 400;
  padding: 9px 12px 9px 9px;
  transition: background-color var(--a-dur) var(--a-ease), color var(--a-dur) var(--a-ease), box-shadow var(--a-dur) var(--a-ease);
}
.tab-button::before {
  background: var(--a-sunken);
  color: var(--a-ink-2);
  border-radius: 6px;
  font-weight: 700;
}
.tab-button:hover:not(.active) { background: var(--a-hover); color: var(--a-ink); }
.tab-button.active {
  /* 下部タブの active と同じ言語 (逆光の暖色 + 内側 1 本) にして、幅が変わっても迷わせない */
  font-weight: 700;
  background: var(--a-glow-bg);
  border-color: transparent;
  color: var(--a-ink);
  box-shadow: inset 0 0 0 1px rgba(160, 106, 48, 0.30);
}
.tab-button.active::before { background: var(--a-glow-fill); color: #fff; }
.tab-button:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }
.tab-button[data-help]::after {
  background: var(--a-ink);
  border-color: transparent;
  border-radius: var(--a-r-tag);
  box-shadow: 0 8px 22px rgba(31, 50, 57, 0.18);
  font-weight: 700;
}

#dashboardSubTabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  margin: var(--a-gap-s) 0 20px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a-rule);
  border-radius: 0;
  box-shadow: none;
}
#dashboardSubTabs .sub-tab-button {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--a-gap-m);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a-ink-2);
  font-size: 14px;
  font-weight: 400;   /* R2/D-1: 非アクティブは 400。現在地は下線 + 墨 + 700 で言う */
  letter-spacing: .01em;
  box-shadow: inset 0 -2px 0 rgba(31, 50, 57, 0);
  transition: color var(--a-dur) var(--a-ease), box-shadow var(--a-dur) var(--a-ease), background-color var(--a-dur) var(--a-ease);
}
#dashboardSubTabs .sub-tab-button:first-child { padding-left: 2px; }
#dashboardSubTabs .sub-tab-button:hover { background: var(--a-hover); color: var(--a-ink); }
#dashboardSubTabs .sub-tab-button.active { font-weight: 700; }
#dashboardSubTabs .sub-tab-button.active,
#dashboardSubTabs .sub-tab-button.active:hover {
  background: transparent;
  color: var(--a-ink);
  box-shadow: inset 0 -2px 0 var(--a-ink);
}
#dashboardSubTabs .sub-tab-button:focus-visible {
  outline: 2px solid var(--a-ink);
  outline-offset: -2px;
}

/* ============================================================================
   5. HOME 本文 — 空白は削らず、罫の下の余白として意味を与える
   ========================================================================== */
.ad-lead { padding-top: 0; }
.ad-lead .ad-today-date {
  color: var(--a-ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.ad-lead .ad-today-line { color: var(--a-ink); letter-spacing: .01em; }
.ad-lead .ad-lead-desc { color: var(--a-ink-2); }

/* ============================================================================
   6. HOME のカード — 箱を積むのをやめ、面 + 罫 1 本に揃える
   ========================================================================== */
.panel,
.rich-panel {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  border-radius: var(--a-r);
  box-shadow: none;
}
.panel-heading h2 { color: var(--a-ink); }
.panel-heading p { color: var(--a-ink-2); }

/* 次のアクション = 画面で唯一「逆光」を許す面 (絵で L245 超が 1% なのと同じ面積予算) */
#nextActionHost .ad-next,
#nextActionHost .nac-primary.ad-next {
  background: var(--a-glow-bg);
  border: 1px solid rgba(160, 106, 48, 0.22);
  border-radius: var(--a-r);
  box-shadow: none;
}
#nextActionHost .ad-next.is-waiting { background: var(--a-leaf-bg); border-color: rgba(74, 100, 56, 0.20); }
#nextActionHost .ad-next.is-pickup  { background: var(--a-sea-bg);  border-color: rgba(47, 97, 105, 0.20); }
.ad-next-kicker { color: var(--a-glow-ink); }
.ad-next-name,
#nextActionHost .ad-next .nac-product { color: var(--a-ink); }
#nextActionHost .ad-next .nac-retailer,
#nextActionHost .ad-next .nac-quantity { color: var(--a-ink-2); }
#nextActionHost .ad-next .nac-deadline { color: var(--a-glow-ink); }

.ad-btn-primary { box-shadow: none; }
.ad-btn-gold { background: var(--a-glow-fill); box-shadow: none; }

/* 行内の副ボタン。#86efac のミントだけが彩度で浮いていたので、
   カレンダーの「発表」と同じ色相・同じ彩度帯へ揃える (意味は不変) */
.row-action {
  border-radius: var(--a-r-tag);
  border-color: var(--a-rule);
  background: var(--a-paper);
  color: var(--a-ink);
  font-weight: 700;
}
.row-action:hover { background: var(--a-hover); }
.row-action.good {
  border-color: rgba(74, 100, 56, 0.34);
  background: var(--a-leaf-bg);
  color: var(--a-leaf-ink);
}
.row-action.good:hover { background: #e2e9d5; }
.row-action:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px; }

/* Amazon 確認 / 読み物 — 濃紺のベタ面をやめ、同じ面の上の 1 枚にする。
   機能・文言・リンク・写真は不変。色価だけを絵の高明度側へ寄せる */
.quick-access-bar,
.quick-access-link {
  background: var(--a-paper);
  border-color: var(--a-rule);
  box-shadow: none;
}
.editorial-card {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  border-radius: var(--a-r);
  color: var(--a-ink);
  box-shadow: none;
}
.editorial-card:hover { border-color: rgba(31, 50, 57, 0.3); background: #fffefa; }
.editorial-kicker { color: var(--a-glow-ink); }
.editorial-title  { color: var(--a-ink); }
.editorial-sub    { color: var(--a-ink-2); }
.editorial-thumb  { border-color: var(--a-rule); background: var(--a-sunken); }

/* 戦績サマリー — HOME で唯一残っていた濃紺のベタ面。絵は p10=128 で暗部を持たないので、
   ここも面を明るくし、階層は「数字の大きさ + 1 色の強調」だけで作る */
.ad-record {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink);
  box-shadow: none;
}
.ad-record h2 { color: var(--a-ink-2); }
.ad-record-i span,
.ad-record-link { color: var(--a-ink-2); }
.ad-record-i b { color: var(--a-ink); }
.ad-record-i.is-key b { color: var(--a-glow-ink); }   /* 当選率だけが逆光の色を持つ */

/* トースト — 画面上部で hero を横切る帯。彩度を落として同じ面の言語に入れる */
#toast {
  background: var(--a-paper);
  color: var(--a-ink);
  border: 1px solid var(--a-rule);
  border-left: 3px solid var(--a-sea-ink);
  border-radius: var(--a-r);
  box-shadow: 0 6px 20px rgba(31, 50, 57, 0.10);
}
#toast.good    { background: var(--a-paper); color: var(--a-ink); border-left-color: var(--a-leaf-ink); }
#toast.bad     { background: var(--a-paper); color: var(--a-ink); border-left-color: var(--a-rose-ink); }
#toast.neutral { background: var(--a-paper); color: var(--a-ink); border-left-color: var(--a-ink-2); }

/* ============================================================================
   7. カレンダー — 「左の日付列 + 右のカード列」という構造そのものを作り直す
   ----------------------------------------------------------------------------
   実測の問題 (320px):
     日付列 56px + gap 8px が本文幅 235px の 27% を占め、店名は 96px しか使えない。
     結果「WonderGOO店/舗」が 2 行に割れ、その 1 件だけ 114px。9/7 の 1 日で 571px。
   作り直し:
     - 日付列を廃止。日付は **その日のグループの見出し行** として上に 1 本置く
       (視線は 日付 → 店舗 → 種別 → 時刻 と、常に左上から右下への 1 方向だけで済む)
     - 1 件ごとの枠 + 角丸 + 影をやめ、罫 1 本で仕切る (絵に輪郭線は無い)
     - Phase 292 のロゴは弱めない。320px でも 32px → **36px へ大きくする**
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Phase 293-B / Round 2 (typography + calendar) — 2026-09-07
   UI Craft Director (scratch/p293b/proposal-B.md) の D-1 / 2.1 / 2.3 /
   C-1・C-2・C-3・C-4・C-6・C-7・C-8 / 4-1 を 293-A のカレンダー節へ適用する。

   一番効いているのは装飾ではなく **weight を 700 一択から 400/700 の 2 段へ戻したこと**。
   和文で確実に出せるウェイトは 2 段しかない (webfont 無し) ので、
   階層は「weight 2 段 + size + color + 位置」で作る。
   ⚠️ 情報は 1 件も減らしていない (「時刻未定」「×2」「店頭QR」「N件」すべて残す)。
   --------------------------------------------------------------------------- */

/* C-2: 罫と日付見出しを面の端まで通すため、左右 padding を親から子へ移す。
   --mp-padx は子 (.month-day-head / .month-event / .month-head) が参照する */
.month-panel.rich-panel {
  --mp-padx: var(--a-gap-m);
  padding: var(--a-gap-m) 0;
}
.month-panel > .panel-heading,
.month-panel .month-head,
.month-panel .month-empty-all {
  padding-left: var(--mp-padx);
  padding-right: var(--mp-padx);
}
.month-title { color: var(--a-ink); font-size: 15px; }
.month-sub { color: var(--a-ink-2); }

/* C-6: legend は押せない凡例。293-A で .me-label と同じ角丸チップ・同じ 11px/700 に
   なったせいで「フィルタバー」に見えていた (押せそうに見えて押せない)。
   8px の色点 + 400 のラベルへ降格し、チップの形は種別バッジだけの言語に戻す */
.month-legend { gap: 14px; }
.month-dot {
  min-height: 0;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 400;
  color: var(--a-ink-3);
  letter-spacing: .02em;
}
.month-dot::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.month-dot.start,
.month-dot.deadline,
.month-dot.result,
.month-dot.pickup { background: none; color: var(--a-ink-3); }
.month-dot.start::before    { background: var(--a-sky-ink); }
.month-dot.deadline::before { background: var(--a-rose-ink); }
.month-dot.result::before   { background: var(--a-leaf-ink); }
.month-dot.pickup::before   { background: var(--a-sea-ink); }

/* --- 日グループ ---------------------------------------------------------
   C-2: 「1 日 = 1 枚のカード」をやめる。293-A は 1 件ごとの枠は消したが
   日ごとの枠 (border + radius + overflow:hidden) を 14 個積んでいたため、
   1 枚のリストではなく「14 枚のウィジェット」に見えていた。
   枠を外すと overflow:hidden も外れ、**日付見出しを sticky にできる**ようになる。 */
.month-days { gap: 0; }
.month-day {
  display: block;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;   /* ⚠️ sticky の必須条件。祖先に overflow:hidden があると効かない */
  box-shadow: none;
}
/* 日の切れ目は「面と面の境界」= --a-rule 1 本 + 見出し帯 + sticky の 3 点で担保する */
.month-day + .month-day { border-top: 1px solid var(--a-rule); }
.month-day.tomorrow { border-color: var(--a-rule); }

.month-day-head {
  position: sticky;
  /* ⚠️ .ad-hdr (height: var(--a-hdr-h) / position: sticky / top: 0) の直下に貼り付く。
     ヘッダ高を変えるときは --a-hdr-h を変えれば両方が追従する */
  top: var(--a-hdr-h);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--a-gap-s);
  padding: 9px var(--mp-padx);
  background: var(--a-plate);
  border-bottom: 1px solid var(--a-rule);
  font-weight: 400;
}
/* C-4: 「今日」の印は 4 重 → 2 重。
   (1) 日見出し帯を逆光の色に染める  (2) 本日締切の行 (ベタ塗り chip + 左 3px)
   カードの茶枠・カード左端の茶バー・今日 chip のベタ塗りは廃止する */
.month-day.today .month-day-head { background: var(--a-glow-bg); }

.month-day-number {
  /* R6: 今日/明日の階調を比率で出すため基準をトークン化。
     ⚠️ この値は breakpoint ごとに --a-dnum を上書きする。font-size を直接書かないこと */
  --a-dnum: 21px;
  font-size: var(--a-dnum);
  font-weight: 700;
  line-height: 1.15;
  color: var(--a-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;  /* 負の字送りで 9/7 のスラッシュ前後が締まり 1 語になる */
}
.month-day-weekday {
  font-size: 12px;
  font-weight: 400;         /* 曜日は補助。太字である理由が無い */
  color: var(--a-ink-3);
  letter-spacing: .10em;    /* 1 字の CJK が「点」でなく「ラベル」に見える */
}
/* C-7: --a-rose-ink は「締切 = 唯一の警告色」。土日という警告でないものに使わない。
   週末は色ではなく曜日ラベルの濃さ (ink-3 → ink-2) だけで示す */
.month-day.weekend .month-day-weekday { color: var(--a-ink-2); }
.month-day-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;         /* 右端の太字の数字は「表のヘッダ行」の signature */
  color: var(--a-ink-3);
  font-variant-numeric: tabular-nums;
}
/* 見出し帯そのものが「今日」を語るので、chip はベタ塗りをやめて語だけ残す
   (--a-glow-ink / --a-glow-bg = 4.93:1)。文言は 1 文字も変えない */
.month-today,
.month-tomorrow {
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: .08em;
  background: transparent;
}
.month-today    { color: var(--a-glow-ink); font-weight: 700; }
.month-tomorrow { color: var(--a-ink-3);    font-weight: 400; }

/* --- 1 件 = 枠を持たない行 ---------------------------------------------- */
.month-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.month-event {
  position: relative;       /* C-3 の ::before 罫のため */
  gap: 10px;
  min-height: 52px;         /* C-8: 36px のロゴ + 上下 8px。タップ target は維持 */
  padding: 7px var(--mp-padx);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a-ink);
  font-size: 13px;
  font-weight: 400;         /* D-1: 行の地は 400。太字は「主語」だけが持つ */
  transition: background-color var(--a-dur) var(--a-ease);
}
/* C-3: 罫を全幅で引くと 36px のロゴタイル列を毎行ぶった切り、「セルの積み重ね」= 表に見える。
   罫をテキスト列の左端から始めると、ロゴ列が 1 本の連続した縦の帯になる */
.month-event::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--mp-padx) + 36px + 10px);   /* padding + ロゴ + gap */
  right: 0;
  height: 1px;
  background: var(--a-rule-soft);
}
.month-events > .month-event:first-child::before { content: none; }
.month-event:hover { background: var(--a-hover); }
.month-event:active { background: rgba(31, 50, 57, .07); }
.month-event:focus-visible { outline: 2px solid var(--a-ink); outline-offset: -2px; }
.month-event.published-source { border: 0; }

/* 本日締切 = この画面で唯一のベタ塗り (バッジ)。行はベタ面にせず左端の印だけ */
.month-event.today-deadline {
  background: rgba(160, 106, 48, 0.055);
  border: 0;
  box-shadow: inset 3px 0 0 var(--a-glow-fill);
}
.month-event.today-deadline:hover { background: rgba(160, 106, 48, 0.095); }

/* --- 応募先アイコン: 白地ロゴと色地ロゴの光学差を「同じ台座」で揃える ---
   ⚠️ Phase 292: ロゴは縮めない・弱めない・generic 化しない。36px は不変 */
.month-event .rt-badge,
.month-event .rt-badge.has-image {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-right: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
}
/* C-5(b): has-image と頭文字 fallback で枠の濃さが違う (0.14 と 0.16) と
   「タイルは同じ台座に載っている」ことを線が言えない。1 本の値に統一する */
.month-event .rt-badge.has-image {
  background: var(--a-paper);
  box-shadow: inset 0 0 0 1px rgba(31, 50, 57, 0.12);
}
.month-event .rt-badge:not(.has-image) {
  background-image: linear-gradient(rgba(252, 251, 247, 0.10), rgba(252, 251, 247, 0.10));
  box-shadow: inset 0 0 0 1px rgba(31, 50, 57, 0.12);
  color: #fff;
}
.month-event .rt-badge img { padding: 3px; object-fit: contain; }

/* --- 行の文字組 --------------------------------------------------------- */
.month-event .me-main { gap: 2px; }
.month-event .me-retailer {
  font-size: 15px;          /* 行の主語。C-1 で幅は 1px も減らないので上げてよい */
  font-weight: 700;
  line-height: 1.35;
  color: var(--a-ink);
  letter-spacing: .005em;
}
.month-event .me-meta { gap: 6px; font-size: 11px; }
/* C-1: 種別 chip を固定トラックにして「時刻の列」を作る。
   293-A は `締切` (2字) と `本日締切` (4字) でバッジ幅が違い、時刻の x 座標が
   1 日の中で 26px ジグザグしていた = 毎行探し直しになっていた。
   ⚠️ 左揃えにすると尻すぼみに見える。必ず center */
.month-event .me-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--a-r-tag);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;    /* CJK 2 字が 1 つの塊に潰れるのを防ぐ */
}
.month-event.start    .me-label { background: var(--a-sky-bg);  color: var(--a-sky-ink); }
.month-event.deadline .me-label { background: var(--a-rose-bg); color: var(--a-rose-ink); }
.month-event.result   .me-label { background: var(--a-leaf-bg); color: var(--a-leaf-ink); }
.month-event.pickup   .me-label { background: var(--a-sea-bg);  color: var(--a-sea-ink); }
.month-event.today-deadline .me-label { background: var(--a-glow-fill); color: #fff; }

/* 2.3: 時刻はこの画面の最優先情報なのに 293-A では店名より小さい 12px だった。
   (a) 数字だけ Latin を指名する — 和文フォントの従属欧文は数字のボディが平たく
       コロンが上下に間延びして 2 つの点に割れて見える。system-ui は iOS=SF Pro /
       Android=Roboto の数字になり、コロンが視覚中心に乗る
   (c) 店名と同格 (15px) にする — この画面の目的は「いつ・どこ」(Phase 291) */
.month-event .me-time {
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--a-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .01em;
}
/* ⚠️ 必須: 「時刻未定」は和文。family を戻さないとこの行だけ書体が変わる (2.3 の明記事故) */
.month-event .me-time.is-unknown {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--a-ink-3);
  letter-spacing: normal;
}
/* D-3 メタ・スープの解体。「探していないときは読まなくてよい」情報は 400 / ink-3 へ。
   ⚠️ 消さない・省略しない。声の大きさだけを下げる */
.month-event .me-method,
.month-event .me-count { font-weight: 400; color: var(--a-ink-3); }
#monthCalendar .cal-retailer,
#monthCalendar .cal-sub,
#monthCalendar .cal-meta,
.month-event .cal-retailer { color: var(--a-ink-2); }

.month-empty-all { color: var(--a-ink-2); }

/* 561px 以上: 構造は同じまま、日付と時刻だけ一段上げる */
@media (min-width: 561px) {
  .month-day-head { padding-top: 11px; padding-bottom: 11px; }
  .month-day-number { --a-dnum: 24px; }
  .month-event { padding-top: 8px; padding-bottom: 8px; min-height: 56px; }
  .month-event .me-time { font-size: 16px; }
}

/* 768px 以上: 同じ日の応募先を 2 列に流す。列間は gap でなく罫 1 本で仕切る */
@media (min-width: 768px) {
  .month-events { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .month-events > .month-event:nth-child(even) { border-left: 1px solid var(--a-rule-soft); }
  /* D-12: 奇数件の日は最終行に右セルが無く、縦罫が最後の 1 行ぶんだけ消えていた。
     最後が奇数番目 (= 左セル単独) のときだけ右辺に罫を足すと、縦罫が下まで通る */
  .month-events > .month-event:nth-child(odd):last-child { border-right: 1px solid var(--a-rule-soft); }
  /* 2 列時は「1 件目と 2 件目」が視覚的な最初の行 */
  .month-events > .month-event:nth-child(2)::before { content: none; }
}

/* 1024px 以上 (4-1): 行に右のアンカーを作る。
   293-A の 1024px は行の中身が列幅の 45% しか使わず、右 55% が死に空間だった。
   ⚠️ 293-A が不採用にした dirB (店名と時刻を 675px 離す) とは別物。
      2 列に割ったあとの ~460px の中で離すので、実距離は ~230px しかない。
   DOM は変えない (order + margin-left: auto だけ) */
@media (min-width: 1024px) {
  .month-day-number { --a-dnum: 26px; }
  .month-event .me-meta  { width: 100%; flex-wrap: nowrap; }
  .month-event .me-label { order: 1; }
  .month-event .me-count { order: 2; }
  .month-event .me-method{ order: 3; }
  .month-event .me-time  { order: 4; margin-left: auto; padding-left: 12px; }
}
/* 3 列にはしない (1 行の情報量に対して列が細くなりすぎる) */
@media (min-width: 1100px) {
  .month-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 狭い端末: 外側の余白だけ詰める。行の高さと 36px のロゴは削らない */
@media (max-width: 480px) {
  .month-panel.rich-panel { --mp-padx: 12px; padding: 12px 0; }
}
@media (max-width: 360px) {
  .month-day { grid-template-columns: none; gap: 0; padding: 0; }
  .month-day-number { --a-dnum: 20px; }
  .month-event { font-size: 12px; }
  .month-event .me-retailer { font-size: 14px; }
  .month-event .rt-badge,
  .month-event .rt-badge.has-image { width: 36px; height: 36px; font-size: 15px; }
}

/* カレンダー上部の絞り込みもサブタブと同じ索引に揃える */
#monthFilterTabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a-rule);
  border-radius: 0;
  box-shadow: none;
  gap: 0;
  padding: 0;
  margin-bottom: var(--a-gap-m);
}
/* R2/C-2: 罫を面の端まで通したので、タブの文字も見出しと同じ --mp-padx に揃える */
#monthFilterTabs { padding-left: var(--mp-padx); padding-right: var(--mp-padx); }
#monthFilterTabs .sub-tab-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--a-ink-2);
  font-size: 13px;
  font-weight: 400;   /* R2/D-1: 現在地は「下線 + 墨 + 700」の 3 つで言う */
  box-shadow: inset 0 -2px 0 rgba(31, 50, 57, 0);
  transition: color var(--a-dur) var(--a-ease), box-shadow var(--a-dur) var(--a-ease), background-color var(--a-dur) var(--a-ease);
}
#monthFilterTabs .sub-tab-button:first-child { padding-left: 0; }
#monthFilterTabs .sub-tab-button:hover { background: var(--a-hover); color: var(--a-ink); }
#monthFilterTabs .sub-tab-button.active,
#monthFilterTabs .sub-tab-button.active:hover {
  background: transparent;
  color: var(--a-ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--a-ink);
}
#monthFilterTabs .sub-tab-button:focus-visible { outline: 2px solid var(--a-ink); outline-offset: -2px; }

/* ============================================================================
   8. 下部タブ — 影の壁ではなく罫 1 本で面を閉じる
   ========================================================================== */
@media (max-width: 820px) {
  .bottom-tabs {
    background: rgba(var(--a-scrim), 0.96);
    border-top: 1px solid var(--a-rule);
    box-shadow: none;
  }
  .bottom-tab { color: var(--a-ink-2); border-radius: var(--a-r-tag); }
  .bottom-tab .bt-icon { font-weight: 700; }
  /* R2/D-1: 非アクティブのラベルは 400。現在地は 塗り + 墨 + 700 の 3 つで言う */
  .bottom-tab .bt-label { font-weight: 400; }
  .bottom-tab.active .bt-label { font-weight: 700; }
  .bottom-tab.active {
    color: var(--a-ink);
    background: var(--a-glow-bg);
    box-shadow: inset 0 0 0 1px rgba(160, 106, 48, 0.30);
  }
  .bottom-tab:focus-visible { outline: 2px solid var(--a-ink); outline-offset: -2px; }
}

/* ============================================================================
   9. 動き — 平面のまま。transform / scale は使わず、色と罫だけが 180ms で動く
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #dashboardSubTabs .sub-tab-button,
  #monthFilterTabs .sub-tab-button,
  .month-event { transition: none; }
}

/* ===========================================================================
   Phase 293-B / Round 1 — Visual Mastering (hero / 地の光 / 面 / a11y)
   ---------------------------------------------------------------------------
   293-A は「暗幕を外して AA を通した」修復で、絵画世界の翻訳は始まっていなかった。
   Art Director (proposal-A.md) の実測診断を受けて P1〜P7 を実装する。

   採用した診断 (再測定不要・Manager 確定):
     - hero は油彩調の絵画。輝度中央値 194 / 彩度中央値 0.207 / 純白 0 画素
     - `background-position: center 34%` の **y はモバイルで 1px も効いていない**
       (hero 高 296px 固定なので、hero 幅が 526px を超えるまで縦の余りが 0)
     - 293-A は絵で最も彩度の高い帯 (草原 S 0.336) の上に文字を置き、
       scrim 0.48〜0.62 を必要としていた。水平線の光の帯 (L221.9 / S0.108) なら
       scrim 0.20 で同等のコントラストが出る = **置き場所の問題**
     - `body::before` は hero 直下がページ中で最も暗く最も寒い (#e2ecef / L233.7)。
       veil が寒色でカードが暖色 (#fcfbf7) = **光源が 2 つある**
     - ヘッダーの通知/アカウントアイコン (--a-ink-2) は空の上で約 3.0:1 (最悪 2.25:1)
       = WCAG 1.4.11 (非テキスト 3:1) 未達

   ⚠️ Round 1 の担当外 (触っていない):
     - カレンダー (`.month-*`) と type scale = Round 2 の別担当
     - desktop の列リズム (P8)
   ⚠️ 不変: hero-home.jpg / min-height 296px / Phase 283 action-first /
            Phase 292 retailer icon / Phase 249 heroDesc の文言と表示
   ========================================================================= */

/* ---------------------------------------------------------------------------
   P7. ヘッダーアイコンのコントラスト (実測不良・1 行)
   293-A が白 → --a-ink-2 に反転したが、アイコンが乗る空は L169.5 (p5 137.6) で
   約 3.0:1 (最悪 2.25:1) しか出ない。--a-ink なら 5.6:1 (最悪 4.9:1)。
   --------------------------------------------------------------------------- */
body[data-hero-tab="dashboard"]:not(.hdr-solid) .ad-hdr-btn { color: var(--a-ink); }

/* ---------------------------------------------------------------------------
   P1. クロップの是正 + 文字を「水平線の光」へ上げ、草原を素の前景として残す
   --------------------------------------------------------------------------- */

/* (a) クロップ。y はモバイルで効かないので、x とデスクトップの y を別々に決める。
       320〜360: 見える範囲が狭く、50% だと竜 (src x≈78%) が画面外に落ちる。
                 わずかに右へ寄せて竜と城を確実に入れる
       ≥700 / ≥900: 縦クロップ領域。34% は「絵で最も彩度の低い霞んだ空」(S 0.098〜0.132)
                 を選んで拡大していた。72% まで下げると草原と花が初めて desktop に入り、
                 竜は上端にぎりぎり残る (80% だと竜が消えるので 72% を上限とする) */
.hero.hero-slim[data-hero-tab="dashboard"] { background-position: 50% 34%; }
@media (max-width: 360px) {
  .hero.hero-slim[data-hero-tab="dashboard"] { background-position: 58% 34%; }
}
@media (min-width: 700px) {
  .hero.hero-slim[data-hero-tab="dashboard"] { background-position: center 60%; }
}
@media (min-width: 900px) {
  .hero.hero-slim[data-hero-tab="dashboard"] { background-position: center 72%; }
}

/* (b) 文字ブロックを「絵の地面 (草原)」から「水平線の光の帯」へ上げる。
       ⚠️ min-height: 296px は変えない = Phase 283 の action-first も CLS も動かない。
       下端に残る 84px は overlay の alpha 0 の領域 = **素の草原**になる。
       293-A の justify-content: flex-end / padding-bottom: 16px を置き換える。 */
.hero.hero-slim[data-hero-tab="dashboard"] {
  justify-content: flex-start;
  /* 72px = 上端まで抜いた padding-top (76px) とコピー実測 (148px @390) の残り。
     ここを 84px にすると hero が 296px を超えて伸びる (min-height 固定の意味が消える) */
  padding-bottom: 72px;
}

/* (c) overlay を「下から立ち上がる地面」から「文字のまわりの霞 (aerial haze)」へ。
       絵は左が空いている (実測 col0 L195 / col5 L154) ので左に寄せた楕円にする。
       これは絵自身が奥のものを霞で白く飛ばしているのと同じ操作 = 空気遠近法なので、
       UI 側の異物にならない。草原 (下端) には alpha 0 で一切触れない。
       + P2(b) の裾の溶解を同じ ::before の上層に重ねる (::after は 293-A で display:none)。 */
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
.hero.hero-slim[data-hero-tab="dashboard"]::before {
  background:
    /* 裾: 硬い水平線で切らず、下の残光と同じ暖色へ溶かす (P2b)。
       ⚠️ --a-ground (寒色寄りの地) ではなく水平線の暖色 #f6f0e0 へ溶かす。
          hero 直下には P2(c) の残光が同じ色で続くので、そこで色が変わらない */
    linear-gradient(to top,
      rgba(246, 240, 224, 0.92)  0px,
      rgba(246, 240, 224, 0.50) 12px,
      rgba(246, 240, 224, 0.18) 28px,
      rgba(246, 240, 224, 0.00) 46px),
    /* 霞: 文字が乗る左上の楕円だけ。74% で完全に消える */
    radial-gradient(115% 78% at 6% 44%,
      rgba(var(--a-scrim), 0.16)  0%,
      rgba(var(--a-scrim), 0.09) 46%,
      rgba(var(--a-scrim), 0.00) 74%);
}
/* 320〜380: hero が狭くコピーが 2 行になるので霞を厚くする。
   それでも 293-A の 0.62 の 6 割で済む (置き場所を変えたぶんの利得) */
@media (max-width: 380px) {
  body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
  .hero.hero-slim[data-hero-tab="dashboard"]::before {
    background:
      linear-gradient(to top,
        rgba(246, 240, 224, 0.92)  0px,
        rgba(246, 240, 224, 0.50) 12px,
        rgba(246, 240, 224, 0.18) 28px,
        rgba(246, 240, 224, 0.00) 46px),
      radial-gradient(115% 78% at 6% 44%,
        rgba(var(--a-scrim), 0.21)  0%,
        rgba(var(--a-scrim), 0.11) 46%,
        rgba(var(--a-scrim), 0.00) 74%);
  }
}
/* ≥821: 文字の背後が水平線の帯 (L228.6 / p5 198.4) になるので霞は薄くてよい */
@media (min-width: 821px) {
  body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"]::before,
  .hero.hero-slim[data-hero-tab="dashboard"]::before {
    background:
      linear-gradient(to top,
        rgba(246, 240, 224, 0.92)  0px,
        rgba(246, 240, 224, 0.50) 12px,
        rgba(246, 240, 224, 0.18) 28px,
        rgba(246, 240, 224, 0.00) 46px),
      radial-gradient(115% 78% at 6% 44%,
        rgba(var(--a-scrim), 0.12)  0%,
        rgba(var(--a-scrim), 0.07) 46%,
        rgba(var(--a-scrim), 0.00) 74%);
  }
}

/* ---------------------------------------------------------------------------
   P2. hero を全幅化し、裾を「切る」のをやめて「溶かす」
   四辺の地色の縁 (16/24px) と輪郭線が、絵を「窓」ではなく「貼り込まれた図版」に
   していた。100vw は使わない (スクロールバー幅ぶん横溢れ = Phase 202 が落ちる)。
   --------------------------------------------------------------------------- */
.hero.hero-slim[data-hero-tab="dashboard"] {
  margin-inline: -16px;    /* = .app の padding (≤820px) */
  padding-inline: 16px;    /* 同量を内側に戻す → テキストの左端は動かない */
  box-shadow: none;        /* 額縁の輪郭線 (293-A の inset 1px) を捨てる */
  border: 0;               /* .hero の 1px 罫。desktop で額縁の 4 辺目になっていた */
}
@media (min-width: 821px) {
  .hero.hero-slim[data-hero-tab="dashboard"] { margin-inline: -24px; padding-inline: 24px; }
  /* desktop は .hero-details (保存はこのブラウザ内です…) が常時出るぶん中身が高い。
     84px のままだと hero が 296px を超えて 379px まで伸び、min-height 固定の意味
     (CLS と action-first の位置) が消えるので、素の草原の量をここだけ 56px にする */
  .hero.hero-slim[data-hero-tab="dashboard"] { padding-bottom: 46px; }
}
/* 額縁の最後の 1 辺 = **上端の 16/24px**。HOME 最上部では header が透過しているので、
   hero を .app の padding 上端まで引き上げると絵が画面の天まで届き、絵が「板」ではなく
   「窓」になる。margin-top と padding-top を同量ずらすので **コピーの位置は 1px も動かない**。
   min-height: 296px は不変 (hero の見え高は変わらず、位置だけが 16/24px 上がる = Phase 283 の
   action-first は後退ではなく前進する) */
body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"] {
  margin-top: calc(-56px - 16px);
  padding-top: calc(56px + 16px + 4px);
}
@media (min-width: 821px) {
  body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"] {
    margin-top: calc(-56px - 24px);
    padding-top: calc(56px + 24px + 4px);
  }
}

/* .hero-copy は max-width: var(--ad-shell) で中央寄せされているため、全幅化すると
   hero の中で 8px 内側にずれ、本文カラムと左端が揃わなくなる (1024 で実測)。
   HOME の hero だけ shell の中央寄せを外し、hero の content box = .app の content box
   に一致させる (hero-desc は 10.5em、hero-note は max-width で行長を持つので長行にならない) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-copy { max-width: none; margin: 0; }

/* hero 直下 180px を「絵の残光」にする。サブタブがこの光の中に入る。
   ⚠️ 幾何的な結論: モバイルでは hero が絵の縦 100% を使い切っており「絵の続きの画素」は
      存在しない。世界の継続は画素ではなく **光** でしか作れない。色は水平線の実測 #f5e9d1 由来。
   ⚠️ .tab-panel.active は display:grid だが、position:absolute の擬似要素は grid item に
      ならないのでレイアウトは動かない。z-index:-1 は body::before (同じ -1・先行) の上に乗る */
#tab-dashboard { position: relative; }
#tab-dashboard::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -16px;
  right: -16px;
  height: 180px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(246, 240, 224, 0.85) 0%,
    rgba(246, 240, 224, 0.34) 46%,
    rgba(246, 240, 224, 0.00) 100%);
}
@media (min-width: 821px) {
  /* desktop は hero と #tab-dashboard の間に機能タブ (.tabs 約 67px) が挟まるので、
     そのぶん上へ伸ばして「hero の裾からサブタブまで」を 1 続きの光にする */
  #tab-dashboard::before { top: -72px; left: -24px; right: -24px; height: 240px; }
}

/* ---------------------------------------------------------------------------
   P3. ページの地を「14% しか見えない写真」から「絵の光」へ
   実測で hero 直下がページ中で最も暗く (L233.7) 最も寒い (青緑) 帯になっていた。
   絵の光は左上の暖色 (#f5e9d1) なので、**完全に逆向き**だった。
   4.5〜14.5% しか出ない画像は絵として認識されず JPEG の低周波ノイズにしか見えない。
   絵の情報を捨てるのではなく、絵から **光だけを蒸留** する。
   色はすべて実測サンプル: 水平線 #f5e9d1 / 海 #a9c8d9 / 草原 #a6af79。
   ⚠️ 特異度の罠: body[data-hero-tab="published"]::before 等 (0-1-1) は素の body::before
      (0-0-1) より強い。HOME だけ変わる中途半端を避けるため dashboard も 0-1-1 で書く。
   --------------------------------------------------------------------------- */
body[data-hero-tab="dashboard"]::before {
  background:
    radial-gradient(120% 62% at 12% -8%,  rgba(245, 233, 209, 0.55) 0%, rgba(245, 233, 209, 0) 62%),
    radial-gradient( 90% 55% at 96%  2%,  rgba(169, 200, 217, 0.30) 0%, rgba(169, 200, 217, 0) 60%),
    radial-gradient(120% 60% at 50% 108%, rgba(166, 175, 121, 0.18) 0%, rgba(166, 175, 121, 0) 70%),
    linear-gradient(180deg, #fbf9f2 0%, #f5f4ec 52%, #f1f1e8 100%);
}
/* 他 4 タブは画像を残したまま veil の色温度だけ揃える (寒い緑グレー #f2f6f5 →
   293-A の生成り #f6f5ef)。地が寒色 / カードが暖色 という光源の二重化はここで解消する。
   4 タブの地を光へ蒸留するかどうかは Round 2 以降の判断 (画面を見ていないので広げない) */
body[data-hero-tab="published"]::before {
  background:
    linear-gradient(180deg, rgba(246, 245, 239, 0.870) 0%, rgba(246, 245, 239, 0.930) 42%, rgba(248, 247, 242, 0.962) 100%),
    url("../assets/hero-search.jpg") center / cover no-repeat;
}
body[data-hero-tab="entries"]::before {
  background:
    linear-gradient(180deg, rgba(246, 245, 239, 0.870) 0%, rgba(246, 245, 239, 0.930) 42%, rgba(248, 247, 242, 0.962) 100%),
    url("../assets/hero-manage.jpg") center / cover no-repeat;
}
body[data-hero-tab="results"]::before {
  background:
    linear-gradient(180deg, rgba(246, 245, 239, 0.870) 0%, rgba(246, 245, 239, 0.930) 42%, rgba(248, 247, 242, 0.962) 100%),
    url("../assets/hero-results.jpg") center / cover no-repeat;
}
body[data-hero-tab="more"]::before {
  background:
    linear-gradient(180deg, rgba(246, 245, 239, 0.870) 0%, rgba(246, 245, 239, 0.930) 42%, rgba(248, 247, 242, 0.962) 100%),
    url("../assets/hero-more.jpg") center / cover no-repeat;
}

/* ---------------------------------------------------------------------------
   P5. 見出し階層 — ブランドは「ロゴ」に、今日のリードを唯一の headline に
   絵は「主役 1 つ (城)・脇役 (竜)・広い静けさ」で成り立っていて、同じ強さのものが
   3 つ並ぶ構図ではない。700 の塊 (ブランド / タグライン / 今日のリード) を 1 つにする。
   ⚠️ Phase 249 の不変条件 (heroDesc が 1 画面目で「何のアプリか」を説明する) は不変。
      文言・表示有無は変えず、太さと大きさだけ変える。
   --------------------------------------------------------------------------- */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-brand-name {
  font-size: 21px;
  letter-spacing: .04em;
}
.hero.hero-slim[data-hero-tab="dashboard"] .hero-desc {
  font-weight: 400;
  font-size: 14px;
  color: var(--a-ink);
}
/* 1024 で絵の左半分を 3 行の掲示板にしていた注記を、行長と大きさで奥へ下げる。
   ⚠️ 色は提案の --a-ink-2 ではなく --a-ink のままにした。霞を 0.48 → 0.18 まで薄めたので、
      6.4:1 前提の補助色を絵の上に置くと最悪ケースで AA を割りうる。
      「奥へ下げる」役は font-size と max-width が担う (情報は 1 文字も減らしていない) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details .hero-note {
  font-size: 11px;
  /* ⚠️ 行長は「短いほど奥へ下がる」ではない。46ch → 34ch と詰めるほど行数が増え、
     desktop で hero が 296px → 379px まで伸びて min-height 固定の意味 (CLS /
     action-first の位置) が消えた。**2 行に収まる行長**が最も静かで、かつ高さも守れる */
  max-width: 88ch;
  color: var(--a-ink);
}
/* hero と今日のリードの距離を詰め、浮いた分は P2(c) の残光の中に入れる */
#dashboardSubTabs { margin: var(--a-gap-s) 0 12px; }

/* ---------------------------------------------------------------------------
   P4. 面の階層を 3 段に固定し、「枠の中の枠」を全廃する
     plane 0 地: 背景そのもの。セクションは「見出し + 罫 1 本」で仕切る
     plane 1 面: 実体のある 1 件 (カード / 行)
     plane 2 浮: 画面の外側にあるもの (bottom-tabs / toast / モーダル) だけ
   絵に輪郭線は 1 本も無く、奥行きは明度差と霞だけで作られている。
   面の数だけ枠を増やすのは翻訳の失敗であり、「普通の管理アプリ」に見せる最大の原因。
   ⚠️ 情報は 1 件も減らしていない (枠と背景だけを外している)。
   ⚠️ .month-panel は Round 2 (カレンダー担当) の領域なので除外する。
   --------------------------------------------------------------------------- */
#tab-dashboard .panel:not(.month-panel),
#tab-dashboard .rich-panel:not(.month-panel) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: 0;
}
#tab-dashboard .panel:not(.month-panel) > .panel-heading {
  border-bottom: 1px solid var(--a-rule);
  padding-bottom: var(--a-gap-s);
  margin-bottom: var(--a-gap-m);
}
/* 「今日・明日の抽選」(.today-digest) は金枠 + 淡い金地の箱で、その中に枠付きの
   レールカードが並ぶ = HOME に残っていた最後の「枠の中の枠」。#todayHero の外枠を
   外したことで、これが画面で一番目立つ額縁になった。中身 (今日締切 / 今日開始 /
   明日締切 / ほかN件) は 1 つも減らさず、箱だけを外して見出し + レールにする */
#tab-dashboard .today-digest {
  border: 0;
  background: transparent;
  padding-inline: 0;
  padding-block: 0;
}

/* 外枠を外したぶん、セクションどうしの間は余白で確実に分ける
   (「区切りが分からなくなった」と言われたら失敗なので、見出しの罫と gap の 2 本立て) */
/* ⚠️ #homeTodayLeadPanel (今日のリード + 次のアクション + 今日やること) は除外する。
   ここの gap を 14px → 28px にすると最初の actionable が約 14px 下がり、
   Phase 283 の action-first を後退させる (提案には無い実装上の制約) */
#tab-dashboard .sub-tab-panel:not(#homeTodayLeadPanel) { gap: var(--a-gap-l); }

/* ---------------------------------------------------------------------------
   P6. 旧パレットの島を畳む — 1 枚のカードの中の色言語を 1 つにする
   「次のアクション」カードは タン (絵の逆光) の地に、絵のどこにも無いティール
   #6fa9a6 の CTA が乗っていた。しかも **白文字 on #6fa9a6 = 2.63:1 で AA 未達**
   (実測: base-293a/p293a-home-fold-390.png の CTA 画素は rgb(111,169,166))。
   絵の唯一の暖色アクセント --a-glow-fill (#a06a30 / 白文字 4.6:1) へ寄せる。
   意味・順序・文言・大きさは不変 = Phase 283 の action-first は壊れない。
   ⚠️ .row-action.good / .bad は畳まない。293-A の 4 色相 (空/薔薇/草/海) の内側にあり、
      当選/落選・応募した/できなかった の **区別を色で運んでいる**ため、
      紙 + 罫 1 本に潰すと情報が減る (提案 P6 からの意図的な逸脱)。
   --------------------------------------------------------------------------- */
.row-action.primary {
  background: var(--a-glow-fill);
  border-color: var(--a-glow-fill);
  color: #fff;
}
.row-action.primary:hover {
  background: var(--a-glow-ink);
  border-color: var(--a-glow-ink);
  color: #fff;
}
/* 機能タブ (desktop) の灰色アイコン枡 5 個をやめ、文字色を継ぐ。active だけ暖色の枡 */
.tab-button::before { background: transparent; color: inherit; }
.tab-button.active::before { background: var(--a-glow-fill); color: #fff; }

/* ---------------------------------------------------------------------------
   Phase 293-B ラウンド1 追補 (Manager): .hero-note の可読性
   実測で AA 未達だった: 1024px で本文 2.76:1 / リンク 1.70:1、390px でもリンク 3.91:1。
   原因は「裾は scrim がほぼ 0 の帯」であること。88ch の行長で絵の明暗を横断するため、
   最悪画素に対しては暗色文字でもコントラストが取れない。

   直し方は hero 全体の scrim を濃くすることではない (それは絵を潰す方向で、
   ラウンド1 でせっかく上げた彩度を戻してしまう)。
   portal-link と同じく **小さな面が自分でコントラストを持つ** 方式に揃える。
   幅は内容に合わせる (fit-content) ので、絵を横切る帯にはならない。
   --------------------------------------------------------------------------- */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details .hero-note {
  width: fit-content;
  max-width: min(88ch, 100%);
  background: rgba(var(--a-scrim), 0.90);
  border-radius: var(--a-r-tag);
  padding: 5px 10px;
  /* 縁は描かない (チップの列と違い面が大きいので、線を足すと札に見える) */
}
/* リンクは面の上でも AA を満たす濃さへ (--a-ink-2 は生成り面で 4.4:1 と僅かに足りない) */
.hero.hero-slim[data-hero-tab="dashboard"] .hero-details .hero-note a {
  color: var(--a-glow-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Phase 293-B ラウンド3: retailer ロゴの光学バランス

   ⚠️ このブロックは手書きしない。node tools/audit-logo-optics.js --emit-css の出力を貼る。

   ラウンド2 で行の罫をロゴ列の外へ出し、36px のロゴ列が 1 本の帯として読めるように
   なった。その副作用で「ロゴごとの光学質量のばらつき」が最大の視覚的欠点になった。
   原因は各アセットが内部に持つ余白量の差 — 一律 padding では、元から余白の少ない
   ロゴだけが大きく見える。アセットは加工せず (Phase 292: 変形も色変更も禁止)、
   **余白の多いものだけを拡大** して光学質量を揃える (大きいものは 1 px も縮めない)。

   実測は tools/audit-logo-optics.js。tile 36px / padding 3px を前提に、
   内容 bbox の長辺がタイルの 0.94、面 sqrt(w*h) が 0.85 を超えない範囲で拡大。
   面の目標はインク濃度で減衰させる (塗りつぶしのマークが列で最も重くなるのを防ぐ)。
   当て方は 2 通り。どちらも transform を使わない — .rt-badge は overflow: hidden +
   border-radius なので、Safari が角丸クリップの中で transform した子を取りこぼすと
   img の白地が角で四角く出る事故になる。純粋なレイアウトのはみ出しなら安全。
     inset > 0 … padding を 3px (8.33%) から縮めるだけ。箱は 100% のまま
                 (img の background:#fff がタイル全面を覆う状態を崩さない)
     inset < 0 … 箱を 100% 超へ広げて負の margin で戻す。はみ出した「余白」は角丸で切れる
   % はタイル幅基準なので、36px でも将来サイズを変えても比率は変わらない。
   ⚠️ index.html / src/app.js は一切変更していない (属性セレクタだけで当てている)。
   --------------------------------------------------------------------------- */
/* aeon-kyushu.png (paper): 内容は長辺の 70.0% / 面 46.7% → inset -17.14% (fill 15.1% → 39.3%) */
.month-event .rt-badge img[src$="aeon-kyushu.png"] { flex: 0 0 auto; padding: 0; width: 134.29%; height: 134.29%; margin: -17.14%; }
/* amazon-japan.png (paper): 内容は長辺の 89.6% / 面 49.3% → inset -2.44% (fill 16.9% → 26.7%) */
.month-event .rt-badge img[src$="amazon-japan.png"] { flex: 0 0 auto; padding: 0; width: 104.87%; height: 104.87%; margin: -2.44%; }
/* heiwado.png (paper): 内容は長辺の 91.7% / 面 37.1% → inset -1.27% (fill 9.5% → 14.5%) */
.month-event .rt-badge img[src$="heiwado.png"] { flex: 0 0 auto; padding: 0; width: 102.55%; height: 102.55%; margin: -1.27%; }
/* hmv.png (paper): 内容は長辺の 80.7% / 面 76.9% → inset 2.38% (fill 41.0% → 53.6%) */
.month-event .rt-badge img[src$="hmv.png"] { padding: 2.38%; }
/* kiddy-land.png (paper): 内容は長辺の 82.2% / 面 82.2% → inset -1.69% (fill 46.9% → 72.2%) */
.month-event .rt-badge img[src$="kiddy-land.png"] { flex: 0 0 auto; padding: 0; width: 103.38%; height: 103.38%; margin: -1.69%; }
/* kids-republic.ico (paper): 内容は長辺の 79.3% / 面 74.0% → inset -4.52% (fill 38.1% → 65.2%) */
.month-event .rt-badge img[src$="kids-republic.ico"] { flex: 0 0 auto; padding: 0; width: 109.05%; height: 109.05%; margin: -4.52%; }
/* otakarasouko.ico (paper): 内容は長辺の 100.0% / 面 84.8% → inset 3% (fill 49.9% → 63.5%) */
.month-event .rt-badge img[src$="otakarasouko.ico"] { padding: 3%; }
/* pelican-toy.png (paper): 内容は長辺の 85.9% / 面 81.5% → inset -2.13% (fill 46.2% → 72.3%) */
.month-event .rt-badge img[src$="pelican-toy.png"] { flex: 0 0 auto; padding: 0; width: 104.26%; height: 104.26%; margin: -2.13%; }
/* pokemon-card-store.png (paper): 内容は長辺の 99.3% / 面 49.1% → inset 2.67% (fill 16.8% → 21.6%) */
.month-event .rt-badge img[src$="pokemon-card-store.png"] { padding: 2.67%; }
/* rakuten-books.png (paper): 内容は長辺の 92.5% / 面 66.1% → inset -0.83% (fill 30.3% → 45.1%) */
.month-event .rt-badge img[src$="rakuten-books.png"] { flex: 0 0 auto; padding: 0; width: 101.67%; height: 101.67%; margin: -0.84%; }
/* sevennet-shopping.png (paper): 内容は長辺の 80.9% / 面 70.1% → inset -8.13% (fill 34.2% → 66.5%) */
.month-event .rt-badge img[src$="sevennet-shopping.png"] { flex: 0 0 auto; padding: 0; width: 116.26%; height: 116.26%; margin: -8.13%; }
/* shibuya-tsutaya.ico (paper): 内容は長辺の 79.2% / 面 73.8% → inset -0.26% (fill 37.8% → 55.0%) */
.month-event .rt-badge img[src$="shibuya-tsutaya.ico"] { flex: 0 0 auto; padding: 0; width: 100.52%; height: 100.52%; margin: -0.26%; }
/* surugaya.png (paper): 内容は長辺の 92.2% / 面 49.6% → inset -0.96% (fill 17.1% → 25.5%) */
.month-event .rt-badge img[src$="surugaya.png"] { flex: 0 0 auto; padding: 0; width: 101.93%; height: 101.93%; margin: -0.97%; }
/* tokyo-otaku-mode.png (paper): 内容は長辺の 100.0% / 面 86.2% → inset 3.55% (fill 51.5% → 64.0%) */
.month-event .rt-badge img[src$="tokyo-otaku-mode.png"] { padding: 3.56%; }
/* tsutaya.png (paper): 内容は長辺の 78.3% / 面 73.9% → inset -3.57% (fill 37.9% → 62.7%) */
.month-event .rt-badge img[src$="tsutaya.png"] { flex: 0 0 auto; padding: 0; width: 107.15%; height: 107.15%; margin: -3.58%; }
/* uny.png (paper): 内容は長辺の 100.0% / 面 82.4% → inset 5% (fill 47.2% → 55.1%) */
.month-event .rt-badge img[src$="uny.png"] { padding: 4.99%; }
/* yellow-submarine.png (paper): 内容は長辺の 91.1% / 面 82.4% → inset -0.49% (fill 47.1% → 69.2%) */
.month-event .rt-badge img[src$="yellow-submarine.png"] { flex: 0 0 auto; padding: 0; width: 100.97%; height: 100.97%; margin: -0.48%; }

/* ===========================================================================
   Phase 293-B ラウンド4 — 面 (surface) の言語を決める
   ---------------------------------------------------------------------------
   ラウンド2 のレビュー判定:「展開できる世界観の実体がまだ hero + 地色 + 文字階層の
   3 つで、残り 4 画面の中身であるカードの言語が未定義」。
   `r2-home-full-1024.png` は上 15% だけが Visual Mastering を通り、下 85% は
   「白い角丸カード + 同じ影」が 4 種類のまったく違う役割に無差別に使われていた
   (戦績 = 押せる 1 件 / 通知 = セクション / クラウド案内 = 案内 / その他 = 折りたたみ)。

   ここで面を 4 種類に決める。**役割が違うものは面も違う**。
   以後この 4 つ以外の面を作らない。新しい部品はどれかに必ず当てはめる。

   ┌──────────────────────────────────────────────────────────────────────┐
   │ 1. 地 (ground)  塗らない。--a-ground の上に直接置く                     │
   │    いつ使うか: **セクション**。中に複数の実体を束ねる入れ物。            │
   │      例) 通知パネル / 新着の抽選 / 今日締切 / 商品サマリー               │
   │    作り: background なし・border なし・影なし。                         │
   │          切れ目は「見出し + --a-rule 1 本 + --a-gap-l の余白」だけ。     │
   │    禁止: 入れ物に枠を描いて、中の実体にも枠を描く (= 枠の中の枠)。       │
   │                                                                        │
   │ 2. 紙 (paper)  --a-paper + 罫 1 本 + --a-lift-1                        │
   │    いつ使うか: **実体が 1 つあるもの**。押せる / 開ける / 1 件を表す。   │
   │      例) 抽選カード 1 枚 / 戦績サマリー (押すと戦績へ) / Amazon 確認 /   │
   │          読み物カード / 3 ステップのタイル / カレンダーの用紙そのもの    │
   │    作り: 面は生成り、縁は --a-rule-soft 1 本、影は --a-lift-1 だけ。     │
   │    ⚠️ 「紙が 1 枚」なのか「紙が N 枚」なのかを見た目で嘘をつかない。      │
   │       カレンダーは **1 枚の長い紙** なので、日ごとにカードを積まない     │
   │       (ラウンド2 の C-2 と同じ結論。ここで言語として固定する)。          │
   │                                                                        │
   │ 3. 窪 (plate)  --a-plate。縁も影も持たない                              │
   │    いつ使うか: **受け皿**。それ自体は情報ではなく、情報を載せる帯や、    │
   │    読まなくても進める案内・折りたたみ。地や紙より一段「奥」にある。      │
   │      例) 日付の帯 (sticky) / 凡例と範囲の帯 / その他 (details) /        │
   │          クラウド保存の案内 / Tips / 入力欄・検索欄 / 絞り込みの帯      │
   │    作り: 面の値だけで奥行きを出す。**線を引かない・影を落とさない**。    │
   │    ⚠️ 紙と窪の分かれ目は「押せるかどうか」ではなく **行き先** (R5-A3):  │
   │       押すと **その場で中身が開く** もの      → 窪 (その他 / 検索欄)     │
   │       押すと **別の場所へ移動する** もの      → 紙 (戦績サマリー / 1 件) │
   │       窪が運ぶ意味は「押すな」ではなく「**ここは器で、主役は中身**」。   │
   │                                                                        │
   │ 4. 灯 (glow)  --a-glow-bg + rgba(160,106,48,.22) の縁                   │
   │    いつ使うか: **今このユーザーがやること 1 つ**。1 画面に 1 つまで。    │
   │      例) 次のアクション (購入手続き) / 今日の日付帯 / 本日締切の行       │
   │    予算は **面積ではなく個数**: 灯の面 = 1 画面 1 つ (大きさは中身次第。 │
   │    fold の 3 割を占めてよい)。**塗り (--a-glow-fill) だけが 1% 制限**で、 │
   │    これは絵で L245 超の逆光が全画素の 1% しかないことに対応する          │
   │    = 主 CTA 1 個ぶん。R4 の「1% は面の話」は誤りだったので訂正 (R5-A3)。 │
   │    ⚠️ 2 つ目を作りたくなったら、それは灯ではなく紙。                    │
   │    ⚠️ フィルタ / タブ / 件数バッジ / 空状態を灯にしない。               │
   └──────────────────────────────────────────────────────────────────────┘

   面ではないもの: **浮 (float)** = 画面の外側にある部品 (toast / モーダル /
   bottom-tabs)。本文の上に本当に浮いているものだけが --a-lift-2 を持てる。
   sticky ヘッダと sticky 日付帯は「ページの枠」であって浮いてはいないので、
   影ではなく罫 1 本で閉じる (ラウンド1 の判断を踏襲)。

   影の単一光源:
     絵の光は **左の水平線** から来る (実測 col0 L195 暖 → col5 L154 寒)。
     よって影は「真下 + わずかに右」へ落ちる = x が +1〜2px。
     色は黒ではなく海の翳り (--a-ink = #1f3239) の低 alpha。
     --ad-sh-* (rgba(62,85,96)) は 293-A 以前の寒色の影なので HOME からは外す。
   =========================================================================== */

:root {
  /* 紙 1 枚が地から離れている量。これ以上の影は作らない */
  --a-lift-1: 1px 1px 2px rgba(31, 50, 57, .035), 1px 3px 8px rgba(31, 50, 57, .045);
  /* 浮 = 本文の上に本当に重なっているものだけ */
  --a-lift-2: 2px 2px 6px rgba(31, 50, 57, .06), 2px 12px 30px rgba(31, 50, 57, .11);
}

/* ---------------------------------------------------------------------------
   R4-1 (a) 紙 — 実体が 1 つあるもの
   ラウンド1 で外枠を外した結果、HOME に残った「箱」はこの 5 つだけになっていた。
   同じ役割なので同じ作りに揃える (今までは 3 通りの影と 2 通りの縁が混在)。
   --------------------------------------------------------------------------- */
/* ⚠️ R5-A3 でこの 6 セレクタは **ファイル末尾の「面の適用表」へ移設** した。
   面のレシピはアプリ全体で 1 箇所にしかない。新しい画面はそこへセレクタを足す。
   ここに書き戻すと、同じレシピが 2 箇所に増えて必ずずれる。 */
/* 押せる紙は hover で縁だけが濃くなる。影は動かさない (平面のまま) */
.ad-lcard:hover,
.quick-access-bar .quick-access-link:hover,
.editorial-card:hover,
.ad-record:hover,
#todayHero .step-tile:hover {
  border-color: var(--a-rule);
  background: var(--a-paper);
  box-shadow: var(--a-lift-1);
}
#todayHero .step-tile:active { transform: none; box-shadow: var(--a-lift-1); }
/* 3 ステップのアイコン枡は寒色の --ad-sunken だった。地と同じ光の色へ */
.ad-step-ico { background: var(--a-glow-bg); color: var(--a-glow-ink); }
.ad-step-n { color: var(--a-ink); }
.ad-step-n small,
.ad-step-l { color: var(--a-ink-2); }
#todayHero .step-tile .ad-step-l.is-lead { color: var(--a-ink); }
#todayHero .step-tile .ad-step-empty { color: var(--a-ink-3); }
.ad-step-badge { background: var(--a-glow-bg); color: var(--a-glow-ink); }

/* ---------------------------------------------------------------------------
   R4-1 (b) 窪 — 受け皿。線も影も持たず、面の値だけで一段奥へ下がる
   「その他」「クラウド保存の案内」「Tips」「応募フロー」は押して開くものだが
   **中身が主役** なので、紙 (1 件) ではなく受け皿として扱う。
   ここが r2 で「白いカード群」に見えていた最後の 3 枚。
   --------------------------------------------------------------------------- */
/* ⚠️ R5-A3 でこの 5 セレクタも「面の適用表」へ移設 (上と同じ理由)。 */
/* 広告表記は #64748b (生成り面で約 4.3:1 = AA 未達) だった。窪の上で 5.29:1 の
   --a-ink-3 へ。声の大きさは変えず、読める濃さにだけ直す */
.affiliate-disclosure { color: var(--a-ink-3); }
.affiliate-disclosure strong { color: var(--a-ink-2); font-weight: 700; }
.ad-misc > summary { color: var(--a-ink-2); }
.ad-misc > summary:hover { color: var(--a-ink); }
/* クラウド案内: 左端 4px のティール帯と teal の主 CTA が、r1 で茶へ寄せた
   fold の CTA と 1 スクロールの中で衝突していた (レビュー P7)。
   1 画面 1 primary へ。文言・機能・順序は不変で色価だけを揃える */
.cloud-backup-promo { border-left: 0; padding: var(--a-gap-m); }
.cloud-backup-promo .cbp-title { color: var(--a-ink); }
.cloud-backup-promo .cbp-icon { color: var(--a-sea-ink); }
.cloud-backup-promo .cbp-lead,
.cloud-backup-promo .cbp-note,
.cloud-backup-promo .cbp-assure li,
.cloud-backup-promo .cbp-price { color: var(--a-ink-2); }
.cloud-backup-promo .cbp-main,
.cloud-backup-promo .cbp-main:hover {
  background: var(--a-glow-fill);
  border-color: var(--a-glow-fill);
  color: #fff;
}
.cloud-backup-promo .cbp-main:hover { background: var(--a-glow-ink); border-color: var(--a-glow-ink); }
.cloud-backup-promo .cbp-more {
  background: transparent;
  border-color: var(--a-rule);
  color: var(--a-ink);
}

/* ---------------------------------------------------------------------------
   R4-1 (c) 浮 — 本文の上に本当に重なっているものだけが影を持つ
   --------------------------------------------------------------------------- */
#toast { box-shadow: var(--a-lift-2); }

/* ---------------------------------------------------------------------------
   R4-2 カレンダーの入口 (レビュー P3: fold にカレンダーの行が 0 行)
   ---------------------------------------------------------------------------
   Amazon 確認 (#quickAccessBar) と読み物 (#editorialCardGuide) は Phase 269/283 で
   **サブパネルの外**に置かれた 3 サブタブ共通の導線。今日・新着では「今日やること」の
   直後という Phase 283 の位置が正しいが、カレンダーを開いているときは、この 2 枚 +
   見出し + 説明 + 絞り込み + 凡例 の 6 層でファーストビューが終わっていた。

   直し方: **消さず・畳まず、順序だけをカレンダー表示中に限って入れ替える。**
   DOM は 1 ノードも動かさない (order のみ)。今日・新着 / 一覧表では従来のまま。
   ⚠️ :has() 非対応ブラウザではこのルールごと無効 = 現行の並びに素直に戻る
      (機能・到達性は同じ)。Phase 283 のテスト 8 (3 サブタブで両方が見える) も満たす。
   --------------------------------------------------------------------------- */
#tab-dashboard:has(> [data-sub-panel="calendar"].active) > #quickAccessBar    { order: 2; }
#tab-dashboard:has(> [data-sub-panel="calendar"].active) > #editorialCardGuide { order: 3; }
#tab-dashboard:has(> [data-sub-panel="calendar"].active) > .affiliate-disclosure { order: 4; }

/* 説明文は消さない。声を小さくして 3 行 → 2 行にする (D-3 と同じ扱い) */
.month-panel > .panel-heading { margin-bottom: var(--a-gap-s); }
.month-panel > .panel-heading h2 { font-size: 17px; line-height: 1.3; }
.month-panel > .panel-heading p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--a-ink-3);
}
/* 範囲 + 件数 + 凡例は「表のヘッダ」= 窪。行の直前に 1 本の帯として置く。
   ここも情報は 1 つも減らしていない (位置と密度だけ) */
.month-panel .month-head {
  margin: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--a-plate);
  gap: 6px;
}
.month-panel .month-title { font-size: 15px; line-height: 1.25; font-weight: 700; }
.month-panel .month-sub { margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--a-ink-3); }
.month-panel .month-legend { margin-top: 2px; }
#monthFilterTabs { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   R4-3 desktop の空セル (レビュー P1)
   ---------------------------------------------------------------------------
   ≥900px で rail を `repeat(3, 1fr)` の固定グリッドにしていたため、4 件は 3+1 に
   なり **最終行の右 2 枠が白紙のまま残る**。空セルは毎回「データが足りない」と
   言ってしまう。列数を件数に合わせる = 1 行に流し込み、トラック幅の上限だけ決める。
     件数 1〜4 … 216px 上限のトラックが件数ぶん並ぶ (余りは右の余白で、枠ではない)
     件数 5〜6 … 幅が足りないぶんトラックが自動で縮む (5 件 166px / 6 件 138px)
   どの件数でも **空のトラックが生まれない**。rail の最大は 6 件 (RAIL_MAX /
   新着の slice(0,6)) なので 1 行に必ず収まる。
   副産物として 288px のポスターが 216px 以下になり、P2 の「箱絵の壁」も半分になる。
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .ad-rail,
  #newLotteriesList {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 216px);
    justify-content: start;
  }
}

/* ---------------------------------------------------------------------------
   R4-4 スクロール時のヘッダー (レビュー P4)
   ---------------------------------------------------------------------------
   HOME では hero がブランドを持つので header 側のワードマークを隠していた
   (Phase 259-A)。hero が流れ去ったあと、ベルと人だけが乗った無地の帯が残り
   「作り忘れ」に見えていた。**hero が画面から出た後だけ**ワードマークを戻す。
   帯の色は 9/7 の日付帯と同じ光源 (水平線の暖色) へ。DOM 変更なし・CLS なし
   (header の高さは 56px 固定で、中身の有無で伸縮しない)。
   --------------------------------------------------------------------------- */
.ad-hdr {
  background: linear-gradient(180deg, #faf7ee 0%, #f6f3e8 100%);
  border-bottom: 1px solid var(--a-rule-soft);
}
body[data-hero-tab="dashboard"].hdr-solid .ad-hdr-mark { display: grid; }
body[data-hero-tab="dashboard"].hdr-solid .ad-hdr-name { display: inline; }
.ad-hdr-name { font-size: 15px; }

/* ---------------------------------------------------------------------------
   R4-5 商品画像の彩度の壁 (レビュー P2) — 額装で馴染ませる
   ---------------------------------------------------------------------------
   hero は淡い水彩、地は蒸留した暖色クリーム。そこへ量販店チラシの彩度の箱絵が
   10 枚以上、カード全面に敷き詰められると、作った「同じ光」が本文の途中で切れる。
   ⚠️ 画像そのものは 1px も加工しない (データであり、加工は禁止)。
   やるのは **額装** だけ:
     (1) 絵をカードの全面に敷くのをやめ、上部の窓に収める = マット (余白) を与える
     (2) 文字の下地を「白のベール」から **生成りの札** へ。罫 1 本で絵と札を分ける
         (白は絵の中に 1 画素も存在しない色なので、白の帯があるだけで別世界になる)
     (3) 縁と影を紙の言語に揃える (上の R4-1(a) で適用済み)
   窓の下端 = 札の最大高 (2 行の商品名 + 応募先 + padding = 実測 68px) に合わせる。
   ここを % にすると desktop で札より深く空くので **px 固定** にする。
   --------------------------------------------------------------------------- */
.ad-lcard { --adl-plate: 71px; }   /* 札の高さ = 商品名 2 行 + 応募先 + padding の実測 */
.ad-lcard-media {
  inset: 0 0 var(--adl-plate) 0;  /* 札の上までが「窓」。絵は札に潜り込まない */
  background: var(--a-plate);     /* マット。紙より一段奥 */
  border-radius: 0;
}
/* マットは px ではなく比率で持つ (desktop で 216px になったとき、
   額に対して余白が痩せない)。下は札との罫があるので薄くてよい */
.ad-lcard-media img { padding: 7% 8.5% 4%; }
/* 札 = 生成りの面。ベールのグラデーションをやめ、窓との境は罫 1 本で受ける。
   min-height を実測値に固定すると、商品名が 1 行の札と 2 行の札で窓の高さが揃う */
.ad-lcard-veil {
  background: var(--a-paper);
  border-top: 1px solid var(--a-rule-soft);
  min-height: var(--adl-plate);
  justify-content: center;
}
.ad-lcard-veil::before { content: none; }
.ad-lcard-name { color: var(--a-ink); }
.ad-lcard .ad-retailer { color: var(--a-ink-2); font-weight: 400; }
.ad-lcard .ad-rslot { opacity: .6; }
/* 締切チップは窓の中に乗るので、白ではなく生成りの札にして罫で締める */
.ad-chip {
  background: rgba(var(--a-scrim), .94);
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
  color: var(--a-glow-ink);
}
.ad-chip.is-soon { color: var(--a-ink-2); }
@media (max-width: 360px) {
  /* 320px は札の padding が 4/8 なので札が 4px 低い (実測 67px) */
  .ad-lcard { --adl-plate: 67px; }
}

/* 締切チップ (左上) と 速報/応募済み (右上) は同じ帯にいて、140px のカードでは
   実測で 18px (320px では 38px) 重なり、後から描かれる状態タグがチップの尻を
   隠していた (「今日 23:59締」で切れて見える)。**どちらも消さず**、状態タグを
   窓の対角 = 左上に対する右下へ移す。窓の中なので札の文字とも競合しない。
   ⚠️ これは Phase 293-B 以前からの既存不具合で、R4 の額装で初めて可視化された */
.ad-lcard-state { top: auto; bottom: calc(var(--adl-plate) + 6px); }

/* R4-2 追補: `.month-calendar { gap: 10px }` が「範囲 + 凡例の帯」と 9/7 の帯の間に
   10px の白い隙間を作っていた (撮影 r4-cal-fold-320 で確認)。帯は行の直前に接する */
.month-calendar { gap: 0; }
.month-panel .month-head { border-bottom: 1px solid var(--a-rule); }

/* ===========================================================================
   Phase 293-B ラウンド5 — A. 展開前に片付けるもの
   =========================================================================== */

/* ---------------------------------------------------------------------------
   R5-A1 応募先ロゴが「空の白い四角」になる (レビュー §6-(1))
   ---------------------------------------------------------------------------
   カレンダー下部で 13 行中 6〜7 行のロゴが中身の無い白い四角になっていた
   (ホビステ LivePocket / 楽天ブックス / イオン九州iAEON / イオン北海道iAEON /
    エディオンWeb / キッズリパブリック / 平和堂HOP / コジマアプリ …)。
   資産の欠損ではない。原因は 2 つが重なっていた:
     (1) src/app.js の retailer バッジが loading="lazy" で、まだ読み込まれていない
         <img> が下の頭文字ごとタイルを覆う  → app.js 側で lazy だけを外した
     (2) `.rt-badge img { background: #fff }` が **不透明** なので、未読込・復号中の
         img が白一色で塗られる → ここで外す
   img に面を持たせる必要はない。白地は既に **タイル側** が持っている
   (`.rt-badge.has-image { background:#fff }` / カレンダーでは `--a-paper`)。
   img の面を外すと、読み込みの隙間に見えるのは「隣と同じ色の空きタイル」になり、
   白い穴が開かない。ロゴの見た目 (合成結果) は読込後まったく同じ。
   --------------------------------------------------------------------------- */
.rt-badge img { background: none; }

/* ---------------------------------------------------------------------------
   R5-A2 1024 の「新着の抽選」で商品名が … に切れる (レビュー §3・§7-4)
   ---------------------------------------------------------------------------
   R4-3 で ≥900px の rail を `grid-auto-flow: column` の 1 行に変えた結果、
   6 件のとき 1 トラックが (960 - 5×16) / 6 = 146px まで縮み、2 行 clamp の
   商品名が `30th CELEBRATION プ…` で切れた。**truncate で密度を稼がない**。
   密度は列数と余白で解く: 5 件以上のときだけ 4 列で折り返す。
     4 件まで … R4-3 のまま (件数ぶんのトラックが 1 行。空セルは生まれない)
     5 件以上 … 216px の 4 列へ折り返す (6 件 = 4 + 2)。トラック幅が 216px に
                戻るので商品名は 2 行に収まり、切り捨てが消える
   ⚠️ :has() 非対応ブラウザでは R4-3 の 1 行のまま = 現行と同じ (退行しない)。
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .ad-rail:has(> .ad-lcard:nth-child(5)),
  #newLotteriesList:has(> .ad-lcard:nth-child(5)) {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 216px));
    grid-auto-columns: auto;
    row-gap: var(--a-gap-m);
  }
}

/* ===========================================================================
   R5-A3 面の言語 その2 — 色価の役割表 と 面の適用表 (アプリ全体で 1 箇所)
   ---------------------------------------------------------------------------
   ラウンド4 のレビュー §4-(c)(d):
     「4 種を当てる先が全部 HOME/カレンダー固有セレクタで、再利用の受け皿が無い」
     「色価 (accent color) の役割が言語に入っていない。戦績タブを色の定義なしで
       展開すると必ず散らかる」

   ここで 2 つの表を置く。以後、**画面を足すときに書くのはセレクタ 1 行だけ**。

   ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
   ┃ 表 1. 色価の役割 — この 5 色相 + 墨 以外の色を新しく作らない            ┃
   ┣━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ トークン    ┃ 意味 (1 語)          ┃ 当てるもの / 当ててはいけないもの   ┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-glow-*  ┃ **いま**            ┃ ○ 主 CTA / 今日の帯 / 本日締切の行 / ┃
   ┃ (茶・水平線)┃ 今このユーザーが     ┃   その画面で今いる工程              ┃
   ┃             ┃ やること 1 つ        ┃ × 状態表示・件数・フィルタ・空状態   ┃
   ┃             ┃                      ┃ × 塗り (--a-glow-fill) は 1 画面 1 個┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-rose-*  ┃ **締切**            ┃ ○ 締切チップ / 残り時間 / 期限切れ   ┃
   ┃ (唯一の警告)┃ 期限が迫る           ┃ × 落選・エラー・削除 (赤は期限だけ)  ┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-sky-*   ┃ **これから**        ┃ ○ 応募開始 / 受付中 / 応募済 (待ち)  ┃
   ┃ (空)        ┃ 始まる・待っている   ┃ × 完了したこと                      ┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-leaf-*  ┃ **決まった**        ┃ ○ 発表 / 当選 / 支払完了 / 管理中     ┃
   ┃ (草原)      ┃ 確定した良い結果     ┃ × 進行中のもの                      ┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-sea-*   ┃ **手元にある**      ┃ ○ 受取済 / 開封 / 保管 / クラウド保存 ┃
   ┃ (海)        ┃ 完了して所有している ┃ × これからやること                  ┃
   ┣━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
   ┃ --a-ink /   ┃ **中立**            ┃ ○ 数・件数・並べ替え・フィルタ・PR・  ┃
   ┃ -2 / -3     ┃ 色を持たない         ┃   落選・履歴・終了・選択中の器        ┃
   ┗━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

   色価の作り (これ以外の作り方をしない):
     状態チップ = --a-*-bg の面 + --a-*-ink の字。縁も影も持たない (窪の一種)
     塗りつぶし (白文字) が許されるのは --a-glow-fill だけ
     **落選には色を割り当てない**。負の出来事を赤で殴らない (--a-ink-3 の中立)
     1 画面に出てよい色相は最大 3 + 灯 1。4 色目が要るなら役割の設計が間違っている
     --ad-* 系の teal / mint / 濃緑 / グレー青 は 293-A 以前の色。**新規に使わない**

   ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
   ┃ 表 2. 面の適用表 — レシピはこの下の 4 ブロックにしか存在しない          ┃
   ┃ 新しい画面を足すとき: 部品を 地/紙/窪/灯 のどれかに決め、**その          ┃
   ┃ ブロックのセレクタ列に 1 行足すだけ**。レシピを別の場所へ書き写さない。 ┃
   ┃ .a-paper / .a-plate / .a-glow / .a-ground は将来 DOM 側から当てるための  ┃
   ┃ 受け皿 (今は index.html / app.js を触らないので参照者ゼロ。予約席)。     ┃
   ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
   =========================================================================== */

/* --- 面 1: 地 (ground) -------------------------------------------------------
   塗らない。セクションの入れ物は面を持たず、見出し + 罫 + 余白だけで切れる。
   ⚠️ ここに列挙されたものは「background/border/box-shadow を持たない」ことが仕様。 */
.a-ground,
#tab-published > .region-filter-bar,
#tab-results > .sub-tab-panel > .panel.rich-panel,
#tab-results #achievementsPanel,
/* Phase 295 P4 — その他シートの遷移先。いずれも「中に複数の実体を束ねる入れ物」で、
   これが紙のままだと中の実体 (応募先 / 準備 / 案内) と二重の枠になる (R4 の禁止事項) */
#tab-retailers > .panel.rich-panel,
#tab-preparations > #prep30th.panel.rich-panel,
#tab-backup > .panel.rich-panel,
/* Phase 295 P2 — 探すのアコーディオンを開いた中身。紙 1 枚の内訳なので面を持たない。
   ⚠️ 2 id で書いてあるのは、Phase 256-D の
   `#publishedList > .product-accordion .product-accordion-body { background: var(--ad-sunken) }`
   (1-2-0) が 293-B の指定 (1-1-0) に勝ってしまい、**293-B の面の言語が
   この画面にだけ届いていなかった**ため (r7state-base の実測で発覚)。
   左右の padding は行の内側余白として要るので Phase 295 のブロックで戻す */
#tab-published #publishedList > .product-accordion .product-accordion-body {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- 面 2: 紙 (paper) --------------------------------------------------------
   実体が 1 つあるもの。押すと **別の場所へ移動する** もの。 */
.a-paper,
/* HOME / カレンダー (R4-1(a) から移設) */
.ad-lcard,
.quick-access-bar .quick-access-link,
.editorial-card,
.ad-record,
#todayHero .step-tile,
#tab-dashboard .month-panel.rich-panel,
/* 探す — 商品 1 つ = 紙 1 枚 (中の抽選はこの紙の「行」であって別の紙ではない) */
#tab-published .product-accordion,
/* マイ抽選 — 商品 1 つ = 紙 1 枚 */
#tab-entries .product-accordion,
/* 戦績 — サマリーの帯 1 枚 / 当落の一覧 1 枚 */
#tab-results .results-hero,
#tab-results #resultList.entry-list,
/* その他 — シートそのものが 1 枚の紙。項目はその上の「行」(下の紙の行を見よ) */
.more-content,
/* Phase 295 P4 — その他シートの遷移先 */
/* 応募先マスタ: 応募先 1 件 = 紙 1 枚 (押すと **外部サイトへ移動する** = 紙の定義そのもの) */
#tab-retailers .retailer-item,
/* 準備する: 準備 1 件 = 紙 1 枚 / 受付中の 30th 抽選は **1 枚の長い紙** (行は下の 2') */
#tab-preparations .prep-card,
#tab-preparations .p30-current,
/* 自分で追加: 応募 1 件を書き込む用紙。中の入力欄はこの紙の「窪」(下の 面 3) */
#tab-new-entry > .panel.form-panel,
/* 読み物: STEP 1 つ = 紙 1 枚 (寒色の影 --shadow-sm を持っていた) */
#tab-guide-card-storage .guide-step,
#tab-guide-card-storage .guide-summary {
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  border-radius: var(--a-r);
  box-shadow: var(--a-lift-1);
}

/* --- 面 2': 紙の行 (paper row) ------------------------------------------------
   5 つ目の面ではない。**1 枚の紙の内訳** であって、それ自身は面を持たない。
   「紙が 1 枚なのか N 枚なのかを見た目で嘘をつかない」(定義表) の実装がこれ。
   N 件のリストは 紙 N 枚ではなく、紙 1 枚 + 罫 N-1 本で書く。 */
.a-paper-row,
.more-content .more-item,
#tab-published .product-accordion .product-child-card,
/* Phase 295 P2 — 上の 1 行 (1-2-0) は Phase 256-D の
   `#publishedList > .product-accordion .product-child-card.card-v3` (1-3-0) に
   負けていて、**探すだけ「紙の中に白いカードが N 枚」= 枠の中の枠**のままだった
   (マイ抽選・戦績は同じ表のとおり行になっている)。2 id で書き直す */
#tab-published #publishedList > .product-accordion .product-child-card,
#tab-entries .product-accordion .product-child-card,
#tab-results #resultList > .entry-card,
/* Phase 295 P4 — 受付中の 30th 抽選 N 件。**紙 N 枚ではなく 1 枚 + 罫 N-1 本**
   (r6base 実測: 19 件がそれぞれ白いカード + 金の輪郭ボタンで 38 個の枠になっていた) */
#tab-preparations .p30-current .p30-lot-wrap {
  background: none;
  border: 0;
  border-top: 1px solid var(--a-rule-soft);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.a-paper-row:first-child,
.more-content .more-header + .more-item,
#tab-published .product-accordion .product-child-card:first-child,
#tab-published #publishedList > .product-accordion .product-child-card:first-child,
#tab-entries .product-accordion .product-child-card:first-child,
#tab-results #resultList > .entry-card:first-child { border-top: 0; }

/* --- 面 3: 窪 (plate) --------------------------------------------------------
   受け皿。押すと **その場で中身が開く / 器の中身が切り替わる** もの。
   線も影も持たない。面の値だけで一段奥へ下がる。 */
.a-plate,
/* HOME (R4-1(b) から移設) */
.ad-misc,
.cloud-backup-promo,
.tip-panel,
.affiliate-disclosure,
#tab-dashboard .home-fold,
/* 探す — 器と絞り込みの帯 */
#tab-published .published-section-switch,
#tab-published .toolbar-toggle,
#tab-published #publishedSubTabs.sub-tabs,
/* マイ抽選 — 工程の帯 と 並べ替えの帯 */
#tab-entries .toolbar-toggle,
#tab-entries #entriesTaskTabs.sub-tabs,
#tab-entries .entries-sort-bar,
/* 戦績 — サブタブの器 */
#tab-results #resultsSubTabs.sub-tabs,
/* PR 枠は「読まなくても進める案内」= 窪 (全画面共通) */
.supply-footer,
/* Phase 295 P4 — その他シートの遷移先 */
/* 準備する: 絞り込みの帯 (探す・マイ抽選の帯と同じ役割) */
#tab-preparations > .toolbar.prep-toolbar,
/* 保存・復元: 「保存されるデータについて」= 読まなくても進める案内 */
#tab-backup .backup-note,
/* 自分で追加: 入力欄・画像枠・補助欄 (定義表の「入力欄・検索欄」がここ) */
#tab-new-entry .photo-preview,
#tab-new-entry .check-field,
#tab-new-entry .custom-retailer,
#tab-new-entry .rarity-field {
  background: var(--a-plate);
  border: 0;
  border-radius: var(--a-r);
  box-shadow: none;
}

/* --- 面 4: 灯 (glow) ---------------------------------------------------------
   今このユーザーがやること 1 つ。**1 画面 1 つ**。
   面の大きさは中身次第 (fold の 3 割でもよい)。制限があるのは塗り (fill) の数。 */
.a-glow,
#nextActionHost .ad-next,
#tab-entries #entriesTaskTabs .sub-tab-button.active,
/* 戦績の灯 = 当選率のセル (4 セル中 3 番目)。この画面で目が最初に行くべき 1 つ */
#tab-results .results-hero-cell:nth-child(3),
/* Phase 295 P4 — 準備するの灯 = 30th 作戦ボードの頭。
   「発売まであと N 日 / 次の締切」を持つ、この画面で今いる工程そのもの。
   黒金の板 (linear-gradient(#10262b→#1c4b50) + #ffd968) を置き換える */
#tab-preparations .p30-board-head {
  background: var(--a-glow-bg);
  border: 1px solid rgba(160, 106, 48, .22);
  border-radius: var(--a-r);
  box-shadow: none;
}

/* --- 状態チップの唯一の作り (表 1 の実装) ---------------------------------- */
.acc-tag { background: var(--a-plate); color: var(--a-ink-2); font-weight: 700; }
.acc-tag-applied  { background: var(--a-sky-bg);  color: var(--a-sky-ink); }
.acc-tag-won,
.acc-tag-managed  { background: var(--a-leaf-bg); color: var(--a-leaf-ink); }
.acc-tag-paid     { background: var(--a-leaf-bg); color: var(--a-leaf-ink); }
.acc-tag-pickedup { background: var(--a-sea-bg);  color: var(--a-sea-ink); }
.acc-tag-deadline { background: var(--a-rose-bg); color: var(--a-rose-ink); }
/* ⚠️ 最短締切は .acc-tag.acc-tag-deadline (0-2-0) で先に塗られているので同じ強さで書く */
.acc-tag.acc-tag-deadline { background: var(--a-rose-bg); color: var(--a-rose-ink); }
/* 落選は色を持たない (表 1: 負の出来事に赤を割り当てない) */
.acc-tag-lost     { background: var(--a-plate);   color: var(--a-ink-3); }
/* 未応募 / 未追加 / 新着 は「これからやること」だが **件数** なので灯にしない。
   声を落として中立に置き、行動の指名は灯 (1 つ) がやる */
.acc-tag-unapplied,
.acc-tag-missing,
.acc-tag-new      { background: var(--a-plate);   color: var(--a-ink-2); }
/* 当選率タグの teal は 293-A 以前の色。所有 = 海へ */
.win-rate-tag { background: var(--a-sea-bg); color: var(--a-sea-ink); }
/* 「＋未追加N件」は本物の操作だが、商品ごとに何度も出るので灯にはしない。
   中立の輪郭ボタン (色価の表: 中立)。押せることは形で伝える */
.acc-add-all {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink-2);
}
.acc-add-all:hover { background: var(--a-ink); border-color: var(--a-ink); color: #fff; }
/* PR は中立 (広告であることは伝える。ただし色で主張しない) */
.pr-badge { background: var(--a-ink-3); color: #fff; }

/* ===========================================================================
   R5-B 残り 4 画面へ展開 (探す / マイ抽選 / 戦績 / その他)
   ---------------------------------------------------------------------------
   ⚠️ index.html / src/app.js は 1 ノードも触っていない (A-1 の 1 属性を除く)。
   ⚠️ 情報は 1 つも減らしていない。表示件数・行数・文言・順序はすべて不変。
   ⚠️ 全画面を同じカードテンプレートで塗っていない。画面ごとの目的が違うため、
      当てる面の組み合わせを変えている (下の画面別の表を参照)。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   R5-B0 地をアプリ全体で 1 つにする
   ---------------------------------------------------------------------------
   ラウンド4 は HOME の地だけを「絵から蒸留した光」へ替え、残り 4 タブは
   `body[data-hero-tab]::before` に写真を 3〜13% で敷いたままだった (P3 の保留)。
   4 画面が HOME と別のアプリに見える最大の原因がこれ。地はページの根なので、
   ここが違うと上に何を載せても揃わない。
   写真は **hero (画面上部の絵) が持つ**。地は絵ではなく **絵の光** を持つ。
   4.5〜14.5% でしか出ない写真は絵として読めず JPEG の低周波ノイズにしかならない
   ——という P3 の判断を、そのまま 4 タブへ適用する。
   ⚠️ hero そのもの (.hero[data-hero-tab=...] の背景画像) は 5 タブとも不変。
   --------------------------------------------------------------------------- */
body[data-hero-tab="published"]::before,
body[data-hero-tab="entries"]::before,
body[data-hero-tab="results"]::before,
body[data-hero-tab="more"]::before {
  background:
    radial-gradient(120% 62% at 12% -8%,  rgba(245, 233, 209, 0.55) 0%, rgba(245, 233, 209, 0) 62%),
    radial-gradient( 90% 55% at 96%  2%,  rgba(169, 200, 217, 0.30) 0%, rgba(169, 200, 217, 0) 60%),
    radial-gradient(120% 60% at 50% 108%, rgba(166, 175, 121, 0.18) 0%, rgba(166, 175, 121, 0) 70%),
    linear-gradient(180deg, #fbf9f2 0%, #f5f4ec 52%, #f1f1e8 100%);
}

/* 4 タブの本文の墨と罫も HOME と同じ値へ。ここを揃えないと、面だけ揃えても
   「文字の色が違うアプリ」に見える (293-A で HOME だけ済んでいた) */
#tab-published, #tab-entries, #tab-results, .more-content {
  color: var(--a-ink);
}
#tab-published .panel-heading h2,
#tab-entries .panel-heading h2,
#tab-results .panel-heading h2 { color: var(--a-ink); }
#tab-published .panel-heading p,
#tab-entries .panel-heading p,
#tab-results .panel-heading p { color: var(--a-ink-2); }

/* ---------------------------------------------------------------------------
   R5-B1 探す (published) — 目的: **検索が速いこと** と **結果が読めること**
   ---------------------------------------------------------------------------
   部品 → 面
     器の切替 (抽選情報 / 店頭販売)          … 窪  (中身が入れ替わる器)
     状態フィルタ (受付中 / 開始前 / …)      … 窪の上のチップ (選択中は紙)
     検索 / 絞り込み (押すとその場で開く)     … 窪
     並べ替え (商品別 / 応募先別 / …)        … 窪
     地域の案内                              … 地 (セクション。囲まない)
     商品 1 つ                                … 紙 1 枚
     その商品の抽選 N 件                      … その紙の **行** (別の紙にしない)
     灯                                       … **使わない**
   灯を使わない理由: この画面でアプリが「今やること」を 1 つ指名できない。
   探す行為そのものがユーザーの仕事なので、指名すると必ず嘘になる。
   代わりに選択中の状態は中立の墨で示す (色価の表: 中立)。
   ⚠️ 一覧の密度は落としていない。減らしたのは **結果に着くまでの縦** だけ。
      ラウンド4 のカレンダー入口 (R4-2) と同じ問題・同じ直し方。
   --------------------------------------------------------------------------- */
/* 器の切替: 白いカードの中の teal 塗り → 窪の中で選択中だけが紙として持ち上がる */
#tab-published .published-section-switch { padding: 3px; gap: 2px; margin-bottom: var(--a-gap-s); }
#tab-published .published-section-switch .pss-btn {
  min-height: 38px;
  font-weight: 700;
  color: var(--a-ink-2);
  border-radius: 8px;
}
#tab-published .published-section-switch .pss-btn.active {
  background: var(--a-paper);
  color: var(--a-ink);
  box-shadow: var(--a-lift-1);
}
/* 状態フィルタ: 濃緑の塗り → 紙のチップ。選択中は墨の縁で立てる (色は使わない) */
/* 5 つのチップを 390px で **1 行に収める** (実測: 12px padding では 361px で 343px の
   器からあふれ、「すべて」だけが 2 行目に取り残されていた)。
   ⚠️ 減らしたのは padding だけ。チップは 1 つも消していない */
#tab-published .phase-filter { gap: 4px; margin-bottom: var(--a-gap-s); flex-wrap: wrap; }
#tab-published .phase-chip {
  min-height: 32px;
  padding: 5px 8px;
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  box-shadow: none;
  color: var(--a-ink-2);
  font-size: 13px;
}
#tab-published .phase-chip.active,
#tab-published .phase-chip.phase-chip-all.active {
  background: var(--a-paper);
  border-color: var(--a-ink);
  box-shadow: inset 0 0 0 1px var(--a-ink);
  color: var(--a-ink);
  font-weight: 700;
}
#tab-published .phase-chip.phase-chip-all {
  background: transparent;
  border-color: transparent;
  color: var(--a-ink-3);
}
/* 検索 / 絞り込み・並べ替え: 帯として詰める (情報は 1 文字も減らしていない) */
#tab-published .toolbar-toggle {
  min-height: 40px;
  margin: 0 0 var(--a-gap-s);
  color: var(--a-ink);
  border: 0;
}
#tab-published #publishedSubTabs.sub-tabs { margin: 0 0 var(--a-gap-s); padding: 3px; }
#tab-published .sub-tab-button { color: var(--a-ink-2); font-weight: 700; }
#tab-published .sub-tab-button:hover { background: var(--a-hover); color: var(--a-ink); }
#tab-published .sub-tab-button.active {
  background: var(--a-paper);
  color: var(--a-ink);
  box-shadow: var(--a-lift-1);
}
/* 地域の案内: 白いカード → 地の上の 2 行。文言・ボタン・機能は不変 */
#tab-published .region-filter-bar { margin: 0 0 var(--a-gap-s); }
#tab-published .region-filter-bar .region-onboarding { padding: 0; background: none; border: 0; }
#tab-published .region-onboarding-lede { color: var(--a-ink-2); font-size: 13px; }
#tab-published .region-btn { min-height: 38px; }
#tab-published .region-btn.primary {
  background: var(--a-paper);
  border: 1px solid var(--a-ink);
  color: var(--a-ink);
  box-shadow: none;
}
#tab-published .region-btn.region-skip {
  background: transparent;
  border: 1px solid var(--a-rule);
  color: var(--a-ink-2);
}
/* 商品 = 紙 1 枚。その中の抽選は行 (枠の中の枠を作らない) */
#tab-published .product-accordion { margin-bottom: var(--a-gap-s); overflow: hidden; }
#tab-published .product-accordion[open] { box-shadow: var(--a-lift-1); }
#tab-published .product-accordion-head { padding: 10px 12px; }
#tab-published .product-accordion-head:hover { background: var(--a-hover); }
#tab-published .product-accordion-body {
  padding: 0 12px 6px;
  gap: 0;
  border-top: 1px solid var(--a-rule);
}
#tab-published .product-child-card { padding: 10px 0; }
/* 「新着」の teal のグラデーション帯 → 空の細い縦罫 1 本 (これから始まる = 空) */
#tab-published .published-card.is-new,
#tab-published .published-card.product-child-card.is-new {
  background: none;
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--a-sky-ink);
  padding-left: 10px;
}
#tab-published .published-card.is-new .entry-image { border: 0; }
/* 本日締切の行だけは灯と同じ意味を運ぶ (カレンダーの本日締切と同一概念)。
   ⚠️ 灯は「意味 1 つにつき 1 つ」。同じ意味の行が複数出るのは 1 灯と数える */
#tab-published .entry-card.deadline-today-card {
  border-color: transparent;
  background: var(--a-glow-bg);
  box-shadow: inset 2px 0 0 var(--a-glow-fill);
}

/* ---------------------------------------------------------------------------
   R5-B2 マイ抽選 (entries) — 目的: **応募 → 結果待ち → 購入・受取** が流れに見えること
   ---------------------------------------------------------------------------
   部品 → 面
     3 つの工程 (応募する / 結果待ち / 購入・受取) … 窪の帯 + 選択中は **灯**
     履歴                                           … 同じ帯の外。中立で 1 段静か
     並べ替え / 詳細表示                             … 窪
     商品 1 つ                                       … 紙 1 枚
     その抽選 N 件                                   … その紙の行
     PR 枠                                           … 窪
   ⚠️ ラウンド4 まで、この 4 つは 2 段の等価なボタンで、**工程なのか絞り込みなのか
      見た目で区別できなかった**。DOM を触らずに区別を作る手は 2 つしかない:
        (1) 3 工程を 1 行に固定し、履歴だけを段落とす (order/flex-basis)
        (2) 現在地を「灯」にする (フィルタではなく **今いる工程** の意味を運ぶ)
      両方やる。`.tab-archive` が既に付いているので DOM 追加は要らない。
   ⚠️ 件数・ラベル・タブ数は 1 つも減らしていない。
   --------------------------------------------------------------------------- */
#tab-entries #entriesTaskTabs.sub-tabs {
  display: flex;
  flex-wrap: wrap;
  /* 工程の間に「›」を置くので、隙間は区切りが入るぶんだけ要る (2px だと重なる) */
  gap: 4px 10px;
  padding: 3px;
  margin-bottom: var(--a-gap-s);
}
#tab-entries #entriesTaskTabs .sub-tab-button {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--a-ink-2);
  background: none;
  box-shadow: none;
  white-space: nowrap;
}
/* 工程の間に「›」を置いて、3 つが並列ではなく順番であることを面の外で言う。
   ⚠️ 文字ではなく装飾 (aria-hidden 相当) なので読み上げ順は変わらない */
#tab-entries #entriesTaskTabs .sub-tab-button:not(.tab-archive) + .sub-tab-button:not(.tab-archive) {
  position: relative;
}
#tab-entries #entriesTaskTabs .sub-tab-button:not(.tab-archive) + .sub-tab-button:not(.tab-archive)::before {
  content: "›";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--a-ink-3);
  font-weight: 400;
  pointer-events: none;
}
/* 履歴は工程ではない。帯の下へ落とし、右寄せで静かに置く */
#tab-entries #entriesTaskTabs .sub-tab-button.tab-archive {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--a-ink-3);
  font-weight: 400;
}
#tab-entries #entriesTaskTabs .sub-tab-button.tab-archive.active {
  background: var(--a-paper);
  color: var(--a-ink);
  box-shadow: var(--a-lift-1);
}
/* いま居る工程 = 灯 (面のレシピは R5-A3 の灯ブロック。ここでは字だけ) */
#tab-entries #entriesTaskTabs .sub-tab-button.active { color: var(--a-glow-ink); }
#tab-entries #entriesTaskTabs .sub-tab-button:hover:not(.active) {
  background: var(--a-hover);
  color: var(--a-ink);
}
/* 並べ替えの帯 */
#tab-entries .entries-sort-bar {
  padding: 6px 10px;
  margin-bottom: var(--a-gap-s);
  color: var(--a-ink-2);
  /* Phase 427: WebKit 320px で select の中身 (「3ステップ (標準)」) が箱の外まで layout overflow を出し、
     ページが横に 5px スクロールした (scrollWidth 325)。帯の中で切る (各 select の箱は帯に収まっていて見た目は不変・
     focus の輪は padding 10px の内側に収まる) */
  overflow: hidden;
}
#tab-entries .entries-sort-bar select {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink);
  border-radius: 8px;
}
#tab-entries .toolbar-toggle { min-height: 40px; margin: 0 0 var(--a-gap-s); border: 0; color: var(--a-ink); }
/* 商品 = 紙 1 枚 / 抽選 = 行 */
#tab-entries .product-accordion { margin-bottom: var(--a-gap-s); overflow: hidden; }
#tab-entries .product-accordion[open] { box-shadow: var(--a-lift-1); }
#tab-entries .product-accordion-head:hover { background: var(--a-hover); }
#tab-entries .product-accordion-body {
  padding: 0 12px 6px;
  gap: 0;
  border-top: 1px solid var(--a-rule);
}
#tab-entries .product-child-card { padding: 10px 0; }

/* ---------------------------------------------------------------------------
   R5-B3 戦績 (results) — 目的: **数字を美しく扱う**
   ---------------------------------------------------------------------------
   ラウンド4 まで、ここだけが「黒地 + 金文字の 4 枚のタイル」で、アプリの中に
   1 画面だけ別のプロダクトが挟まっていた。KPI ダッシュボードの語彙 (暗い面・
   発光・ゴールド) は、水彩の絵から作った世界と両立しない。
   部品 → 面
     サマリーの 4 数値      … **紙 1 枚の帯**。4 枚のカードではない (罫で仕切る)
     当選率                 … その帯の中の **灯** (この画面で最初に読む 1 つ)
     獲得実績 / 当落サマリー … 地 (セクション。白い箱で囲まない)
     当落の一覧             … 紙 1 枚 + 行
     PR 枠                  … 窪
   数字の作り: 色で騒がずに **大きさと字面** で見せる。
     tabular-nums で桁を揃える / ラベルは 11px の中立 / 単位は数字より 1 段小さく。
   ⚠️ 当選率・高レア率・分析・開封サマリの計算と表示項目は 1 つも変えていない。
   --------------------------------------------------------------------------- */
#tab-results .results-hero {
  gap: 0;
  margin-bottom: var(--a-gap-m);
  overflow: hidden;
}
#tab-results .results-hero-cell {
  background: none;
  border: 0;
  border-left: 1px solid var(--a-rule-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 14px;
  gap: 3px;
}
#tab-results .results-hero-cell:first-child { border-left: 0; }
#tab-results .results-hero-cell .rh-label {
  color: var(--a-ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
#tab-results .results-hero-cell .rh-value,
#tab-results .results-hero-cell:nth-child(3) .rh-value,
#tab-results .results-hero-cell:nth-child(4) .rh-value {
  color: var(--a-ink);
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* 灯 = 当選率。面のレシピは R5-A3。帯の中のセルなので縁と角だけ落とす */
#tab-results .results-hero-cell:nth-child(3) {
  border: 0;
  border-radius: 0;
}
#tab-results .results-hero-cell:nth-child(3) .rh-label,
#tab-results .results-hero-cell:nth-child(3) .rh-value { color: var(--a-glow-ink); }
/* 2 列に折り返す幅では、灯のセルが帯の下段左に来る。罫の向きを合わせる */
@media (max-width: 480px) {
  #tab-results .results-hero-cell:nth-child(n + 3) { border-top: 1px solid var(--a-rule-soft); }
  #tab-results .results-hero-cell:nth-child(3) { border-left: 0; }
}
/* セクションは地。白い箱の中に白い箱を作らない */
#tab-results .panel.rich-panel { padding: 0; margin-bottom: var(--a-gap-l); }
#tab-results .panel.rich-panel > .panel-heading {
  padding-bottom: 6px;
  margin-bottom: var(--a-gap-s);
  border-bottom: 1px solid var(--a-rule);
}
#tab-results .ach-total { color: var(--a-ink-2); }
#tab-results .ach-total strong,
#tab-results .ach-total b { color: var(--a-ink); font-variant-numeric: tabular-nums; }
#tab-results .ach-history-heading { color: var(--a-ink); }
#tab-results .ach-note { color: var(--a-ink-3); }
/* 当落の一覧 = 紙 1 枚 + 行 (面のレシピは R5-A3)。行の padding だけここで持つ */
#tab-results #resultList.entry-list { gap: 0; padding: 0 12px; overflow: hidden; }
#tab-results #resultList > .entry-card { padding: 12px 0; }
#tab-results #resultList > .entry-card:hover { transform: none; box-shadow: none; background: var(--a-hover); }

/* ---------------------------------------------------------------------------
   R5-B4 その他 / アカウント (more sheet) — 目的: **設定画面として静かに**
   ---------------------------------------------------------------------------
   部品 → 面
     シート本体      … 浮 (--a-lift-2)。本文の上に本当に重なっている唯一の部類
     メニュー項目    … シート = 1 枚の紙 の上の **行** (8 枚のカードではない)
     アイコン枡      … 窪 (受け皿。ミントの色地をやめる)
     灯              … **無い**。設定画面はユーザーの「今やること」を持たない
   ⚠️ 項目・文言・並び・遷移先は 1 つも変えていない。
   --------------------------------------------------------------------------- */
.more-content { box-shadow: var(--a-lift-2); }
.more-header h2 { color: var(--a-ink); }
.more-close { background: var(--a-paper); border-color: var(--a-rule); color: var(--a-ink-2); }
.more-content .more-item {
  padding: 12px 4px;
  color: var(--a-ink);
  gap: 12px;
}
.more-content .more-item:hover { background: var(--a-hover); }
.more-content .more-item.active {
  background: var(--a-glow-bg);
  border-color: transparent;
  color: var(--a-ink);
}
.more-content .more-item .mi-icon {
  background: var(--a-plate);
  color: var(--a-ink-2);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
}
.more-content .more-item .mi-text strong { font-weight: 700; color: var(--a-ink); }
.more-content .more-item .mi-text small { color: var(--a-ink-2); font-weight: 400; }
/* 設定ペイン内の「追跡対象の設定」は開閉する受け皿 = 窪 */
#accountSheetSettingsPane .home-fold {
  background: var(--a-plate);
  border: 0;
  border-radius: var(--a-r);
  box-shadow: none;
  margin: var(--a-gap-s) 0;
}

/* ---------------------------------------------------------------------------
   R5-B5 全画面共通の後片付け — 色価の表からはみ出していたもの
   --------------------------------------------------------------------------- */
/* PR 枠 (マイ抽選 / 戦績 の下部) は窪。中の商品は窪の上の紙 */
.supply-footer { padding: var(--a-gap-m); }
.supply-heading { color: var(--a-ink); }
.supply-open-note { color: var(--a-ink-2); }
.supply-separator { background: var(--a-rule); }
.supply-card {
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  border-radius: var(--a-r);
  box-shadow: none;
  color: var(--a-ink);
}
.supply-card:hover { border-color: var(--a-rule); box-shadow: var(--a-lift-1); }
/* 通知セクションに残っていた寒色 (レビュー §4-d)。件数は中立、面は窪 */
.home-disclosure-toggle { background: var(--a-plate); border: 0; box-shadow: none; color: var(--a-ink); }
.home-disclosure-title { color: var(--a-ink); }
.home-disclosure-count { background: var(--a-paper); color: var(--a-ink-2); box-shadow: inset 0 0 0 1px var(--a-rule-soft); }
.home-disclosure-action { color: var(--a-ink-2); }
/* 通知の中身: 寒い青灰の面と #1e40af の注記 → 地の上の 1 枚の紙 + 中立の墨 */
.work-upcoming { background: none; border: 0; box-shadow: none; }
.work-upcoming-head h3 { color: var(--a-ink); }
.work-upcoming-note { color: var(--a-ink-2); }
.work-item { background: var(--a-paper); border: 1px solid var(--a-rule-soft); box-shadow: none; }
.work-item:hover { border-color: var(--a-rule); box-shadow: var(--a-lift-1); }
.work-item-img { background: var(--a-plate); }

/* ---------------------------------------------------------------------------
   R5-B6 撮影して見つけた破綻の手当て (r5c の 390/1024 を目視して特定)
   --------------------------------------------------------------------------- */
/* (1) 戦績のサブタブが濃緑の塗りのまま = 探す/マイ抽選と別の言語だった。
   3 画面の器を 1 つの作りへ揃える (選択中 = 紙が持ち上がる。色は使わない) */
#tab-results #resultsSubTabs.sub-tabs { padding: 3px; margin-bottom: var(--a-gap-m); }
#tab-results .sub-tab-button { color: var(--a-ink-2); font-weight: 700; }
#tab-results .sub-tab-button:hover:not(.active) { background: var(--a-hover); color: var(--a-ink); }
#tab-results .sub-tab-button.active {
  background: var(--a-paper);
  color: var(--a-ink);
  box-shadow: var(--a-lift-1);
}

/* (2) 戦績に灯が 2 つあった。「これまでの当選」の金枠は灯ではなく **実績の行**。
   灯は当選率のセル 1 つだけに残す (1 画面 1 灯) */
#tab-results .ach-product {
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  border-radius: var(--a-r);
  box-shadow: none;
}
#tab-results .ach-products { display: grid; gap: var(--a-gap-s); }

/* (3) 当落サマリー / 当選率の内訳が「地の上の白い箱」のままだった。
   セクションは地・中の数値の塊は紙、という B3 の割り当てを最後まで通す */
#tab-results .result-overview > *,
#tab-results .win-rate-group {
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  border-radius: var(--a-r);
  box-shadow: none;
}
#tab-results .result-overview,
#tab-results .win-rate-cols { gap: var(--a-gap-s); }
/* 数字は桁で揃える (B3 の「数字を美しく扱う」をサマリー側にも適用) */
#tab-results .result-overview strong,
#tab-results .win-rate-line,
#tab-results .rh-value { font-variant-numeric: tabular-nums; }

/* (4) マイ抽選の「履歴」が折返し行で全幅に伸びていた
   (どこかの .sub-tab-button { width: 100% } が flex-basis:auto と噛み合う)。
   3 工程の外の棚として右へ寄せる — 幅は中身ぶんだけ */
#tab-entries #entriesTaskTabs .sub-tab-button.tab-archive {
  width: auto;
  border: 0;
  padding-left: 12px;
  padding-right: 12px;
}

/* (5) PR の「Amazonで見る」が teal の塗りで、画面の中でいちばん強い塗りになっていた。
   広告は灯ではない (色価の表: PR は中立)。押せることは輪郭で伝える */
.supply-buy-btn {
  background: var(--a-paper);
  border: 1px solid var(--a-ink);
  color: var(--a-ink);
}
.supply-buy-btn:hover { background: var(--a-ink); border-color: var(--a-ink); color: #fff; }

/* (6) シートの背後の幕が寒色 (rgba(8,47,56)) だった。墨 (--a-ink) の低 alpha へ */
.more-backdrop { background: rgba(31, 50, 57, 0.42); }

/* ---------------------------------------------------------------------------
   R5-B7 共有部品 (entry-card / badge / button) を色価の表へ寄せる
   ---------------------------------------------------------------------------
   4 画面を回して数えたら、1 枚の抽選カードの中だけで **9 色相** が出ていた:
     teal (主ボタン) / mint (開封入力) / 緑 (当選) / 青 (追加元) / 水色 (締切随時) /
     グレー青 (証跡) / 金 (詳細を閉じる) / 灰 (落選) / 濃緑 (受取済み)。
   これは画面の問題ではなく **部品の問題** なので、画面ごとではなく部品で直す。
   ⚠️ ラベル・条件・並び・機能はすべて不変。色価だけを表 1 の 5 色相 + 墨へ写す。
   ⚠️ Phase 283 の action-first は壊さない。**行動の塗りは残す** (色だけ茶へ)。
      灯の数え方: 面としての灯は 1 画面 1 つ。塗り (--a-glow-fill) は
      **1 つの意味につき 1 つ** で、同じ意味の行が N 件並ぶのは 1 つと数える
      (カレンダーの「本日締切」が N 行あっても 1 灯なのと同じ)。
   --------------------------------------------------------------------------- */
/* 行動 = 茶の塗り (アプリで唯一の塗り) */
.button.primary,
.action-forward,
.pcard-deadline.dl-soon {
  background: var(--a-glow-fill);
  border-color: var(--a-glow-fill);
  color: #fff;
}
.button.primary:hover,
.action-forward:hover,
.cn-apply:hover { background: var(--a-glow-ink); border-color: var(--a-glow-ink); }
/* 副次の操作 = 輪郭だけ */
.button.ghost,
.action-revert,
.action-pulls,
.icon-link,
.icon-button,
.pd-close {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink);
}
.button.ghost:hover,
.action-revert:hover,
.action-pulls:hover,
.icon-link:hover,
.icon-button:hover { background: var(--a-hover); border-color: var(--a-ink); }
.icon-button.danger { color: var(--a-rose-ink); }
/* 状態 = 表 1 の 5 色相。塗りつぶさない (塗りは行動だけの権利) */
.badge.green,
.pcard-deadline.dl-won { background: var(--a-leaf-bg); color: var(--a-leaf-ink); }
.badge.teal,
.pcard-deadline.dl-open { background: var(--a-sea-bg); color: var(--a-sea-ink); }
.badge.blue { background: var(--a-sky-bg); color: var(--a-sky-ink); }
.badge.neutral { background: var(--a-plate); color: var(--a-ink-2); }
/* 落選は色を持たない (表 1) */
.badge.muted,
.pcard-deadline.dl-closed { background: var(--a-plate); color: var(--a-ink-3); }
/* 公式情報の更新通知 = 受け皿 (窪) の帯 */
.canonical-notice { background: var(--a-plate); border-color: transparent; color: var(--a-ink); }
.cn-dot { background: var(--a-glow-fill); }
.cn-count { background: var(--a-paper); color: var(--a-ink-2); box-shadow: inset 0 0 0 1px var(--a-rule-soft); }
/* 日付ピル・証跡リンクの寒色 */
.date-pill.open-ended { background: var(--a-plate); border-color: var(--a-rule-soft); }
.evidence-link { background: var(--a-plate); border-color: var(--a-rule-soft); color: var(--a-ink-2); }

/* (7) 獲得実績の履歴が金色のまま = 戦績に灯が 3 つ見えていた。
   ここは全件「当選・確保できたもの」なので **決まった (草原)**。
   シェアは副次の操作なので輪郭だけ (色価の表) */
#tab-results .ach-h-status { background: var(--a-leaf-bg); color: var(--a-leaf-ink); }
#tab-results .ach-h-share {
  background: var(--a-paper);
  border-color: var(--a-rule);
  color: var(--a-ink-2);
}
#tab-results .ach-h-share:hover { background: var(--a-hover); border-color: var(--a-ink); color: var(--a-ink); }

/* (8) デスクトップで探すの操作帯が画面幅いっぱいに伸び、960px の帯の中で
   「抽選情報 / 店頭販売」の 2 択が 460px ずつになっていた (R4-3 と同じ、
   幅が余っているのに器だけが伸びる問題)。器は中身の量に合わせる。
   ⚠️ モバイルは全幅のまま (タップ目標を狭めない) */
@media (min-width: 900px) {
  #tab-published .published-section-switch { max-width: 420px; }
  #tab-published .toolbar-toggle { width: fit-content; min-width: 300px; }
  #tab-published #publishedSubTabs.sub-tabs { width: fit-content; }
  #tab-entries .toolbar-toggle { width: fit-content; min-width: 300px; }
  #tab-entries #entriesTaskTabs.sub-tabs { width: fit-content; }
  #tab-results #resultsSubTabs.sub-tabs { width: fit-content; }
}

/* (9) 320px では 3 工程 + 履歴 が 1 行に入りきらず、区切りの「›」がラベルに
   食い込んでいた (r5f-entries-fold-320 で確認)。履歴だけを次の行の右端へ落とす。
   ⚠️ タブは 1 つも消していない (位置だけ) */
@media (max-width: 360px) {
  #tab-entries #entriesTaskTabs .sub-tab-button { font-size: 12px; }
  #tab-entries #entriesTaskTabs .sub-tab-button.tab-archive {
    flex: 0 0 100%;
    /* .sub-tab-button は display:flex なので text-align では寄らない */
    justify-content: flex-end;
    margin-left: 0;
  }
}

/* ===========================================================================
   Phase 293-B R6 — 「今日」を一目で見つかるアンカーにする
   ---------------------------------------------------------------------------
   ユーザー確認 (Preview): Direction A の構造・密度・店舗アイコン・時刻配置は良い。
   ただし **今日の日付グループの視覚的アンカーは Direction B のほうが良かった**。

   B の何が効いていたかを読み直すと、本質は色ではなく **日付の数字そのものの
   サイズ階調** (今日 24px / 明日 21px / それ以外 19px) だった。色に依存しない信号なので
   色覚特性にも依存せず、AA とも競合しない。ここを取り込む。
   ただし **B の色 (--ad-urgent) はコピーしない。** Final は絵から抽出した
   --a-glow-* (水平線の逆光) を「いま」の色価に割り当て済みなので、そこから導く。

   ラウンド4 で「今日の印は 4 重 → 2 重」に減らしたが、その過程で B が持っていた
   サイズ階調とピルの塗りの **両方** を失い、今日が帯の色だけで語られる状態になっていた。
   印の「数」は増やさず、既にある 2 つ (帯 / ラベル) を強くする方向で直す。

   識別は 3 つの組み合わせで行い、色だけに依存させない:
     (1) 日付の数字のサイズ    26 / 23 / 21px  ← 色を使わない
     (2)「今日」ラベル          ベタ塗りのピル   ← 面の言語の「塗りは --a-glow-fill だけ」に一致
     (3) 帯の左端のアクセント   3px             ← 本日締切の行と同じ言語で、群の始まりを示す

   コントラスト実測: 白 on --a-glow-fill = 4.57:1 (AA) /
                     --a-ink on --a-glow-bg = 11.40:1 / --a-ink-2 on --a-glow-bg = 5.77:1
   =========================================================================== */

/* (1) 日付の数字にサイズ階調を持たせる。
   21px は「見出しに見える最低限」として R2 で決めた値なので、それを地として
   今日・明日だけを上へ伸ばす (他の日を小さくして相対的に見せる方法は取らない —
   情報の読みやすさを下げるため)。 */
/* ⚠️ 絶対値で書かないこと。基準 --a-dnum は 20/21/24/26px と breakpoint で変わるので、
   絶対値にすると desktop (基準 26px) で「明日 23px < 通常 26px」の逆転が起きる (R6 初版の不具合)。
   比率で書けば全 breakpoint で 今日 > 明日 > 通常 の順序が保たれる */
.month-day.today .month-day-number    { font-size: calc(var(--a-dnum) * 1.24); letter-spacing: -.02em; }
.month-day.tomorrow .month-day-number { font-size: calc(var(--a-dnum) * 1.10); }

/* 今日の帯の中は曜日も一段濃く (--a-ink-3 → --a-ink-2 = 5.77:1)。
   帯全体が「濃い」のではなく、帯の中の文字が揃って一段立つ */
.month-day.today .month-day-weekday { color: var(--a-ink-2); }
.month-day.today .month-day-count   { color: var(--a-ink-2); }

/* (2)「今日」だけベタ塗りのピルへ戻す。
   R4 で塗りをやめたのは --a-glow-bg の帯に --a-glow-bg の chip を置いて
   同色が同色に沈んだため。塗りを --a-glow-fill にすれば帯から分離して立つ。
   面の言語の「ベタ塗りが許されるのは --a-glow-fill だけ・1 画面 1 つの意味」に一致する。
   「明日」は塗らない (灯は今日だけ) */
.month-today {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--a-r-tag);
  background: var(--a-glow-fill);
  color: #fff;                    /* 4.57:1 */
  font-weight: 700;
  letter-spacing: .08em;
}

/* (3) 帯の左端に 3px のアクセント。
   本日締切の行が既に同じ 3px の左バーを持つので、今日の帯から本日締切の行まで
   左端が 1 本に繋がり、「今日の群」がひとかたまりに見える。
   下端の罫も今日だけ逆光色へ (他の日は --a-rule のまま) */
.month-day.today .month-day-head {
  box-shadow: inset 3px 0 0 var(--a-glow-fill);
  border-bottom-color: rgba(160, 106, 48, 0.28);
}

/* 320px では 26px の日付 + ピル + 件数が 1 行に収まるかが問題になるので、
   日付だけ 1px 落として余白を作る (階調は保つ) */
@media (max-width: 360px) {
  /* 日付サイズは --a-dnum (20px) から比率で出るので上書き不要。ピルだけ詰める */
  .month-today { letter-spacing: .04em; padding: 0 6px; }
}

/* 左のアクセントを「今日の群」全体へ伸ばす。
   R6 の初回実装では帯だけに付けたため、左端が本日締切の行で切れて
   「途中で終わる縁」に見えていた (実測: 今日 5 件のうち 2 行までしか届かない)。

   群の container に薄い 3px を敷き、本日締切の行が持つ濃い 3px
   (.month-event.today-deadline の inset) が同じ x の上に重なる構造にする。
   結果として左端は 1 本に繋がり、締切の行だけ濃くなる = 2 段の意味を持つ。
   `isTodayDeadline` は定義上「今日」にしか出ないので、この 2 つは衝突しない。 */
.month-day.today { box-shadow: inset 3px 0 0 rgba(160, 106, 48, 0.30); }

/* ===========================================================================
   Phase 295 / Priority 1 — World Continuity: 他 4 タブの hero
   ---------------------------------------------------------------------------
   Phase 293-B で HOME の hero は「光の扱い」になったが、探す / マイ抽選 / 戦績 /
   その他 の 4 枚は Phase 256-G のまま
   `linear-gradient(160deg, rgba(49,72,86,.46), rgba(73,106,119,.72))` +
   白文字 + 1px の額縁 + inset された箱 だった。**HOME の旧値 (0.40→0.66) より濃い
   暗幕**で、タブを移ると別のアプリに見える最大の原因。

   ⚠️ HOME の CSS はコピーしていない。4 枚は明度・彩度・構図が HOME と違うため、
      同じ数値では成立しない。実測してから当てている。

   ※ = 本 Phase 限りの一時計測スクリプト (scratch/ 配下)。**数値は docs/dev-log.md の
        Phase 295 に転記済み**なので、スクリプトが無くても根拠は追える。
        繰り返し回す受け入れ検査は tools/measure-tab-heroes.js のほう。

   ── 5 枚の実測 (scratch/p295/measure-images.js ※ / HSV彩度・0.299R+0.587G+0.114B) ──
     hero-home    1672x941 meanL 185.0 / meanS 0.229 / p5 100.9  ← 別格に明るい
     hero-search  1672x941 meanL 176.4 / meanS 0.182 / p5  81.3
     hero-manage  1672x941 meanL 148.2 / meanS 0.149 / p5  70.1  ← 最も暗く最も低彩度
     hero-results 1536x1024 meanL 161.9 / meanS 0.228 / p5  71.0
     hero-more    1536x1024 meanL 158.2 / meanS 0.233 / p5  69.9

     ⚠️ HOME だけが「左中央に L234.5 の光の帯」を持つ (293-B P1 はそこへ文字を置いた)。
        他 4 枚にその帯は無い。**代わりに 4 枚とも下端 20% が画面で最も暗い**:
          search 143.6 / manage 130.3 / results 132.5 / more 127.2
        しかも 4 枚とも下端は「手前の雑然とした前景」(石段・机の手前・鎧・床タイル) で、
        主題 (空・城・窓の光・闘技場・夕日) は上半分にある。
        そして文字は帯の下 2/3 (390px 実測 y 37%〜94%) に乗る。

   ── したがって 4 タブの翻訳は HOME と同じ「置き場所」ではなく「光の向き」で解く ──
     HOME  = 絵の中の明るい帯へ文字を上げ、霞は 0.16 の小さな楕円で足りた
     4 タブ = **文字の塊のまわりから暖色の光を立ち上げる** (§3b)。題字の 26px 上より
              上は alpha 0 で素の絵のまま。文字が 2 行でも 4 行でも光が追従するので、
              幅ごとの微調整が要らない (320〜1440 の全幅で AA が成立する)。
     これは絵自身が遠景を霞で白く飛ばしているのと同じ操作 (空気遠近法) を
     近景へ適用しただけなので、UI 側の異物にならない。
     暗幕との決定的な違い: 主題の彩度を 1 つも落とさず、裾がページの地へ溶ける。

   ── 共通で HOME から翻訳したもの ──
     全幅 (額縁と 1px 罫の廃止) / 暖色の裾の溶解 (#f6f0e0 の 1 色) / hero 直下の残光 /
     白文字+影 → 墨 (--a-ink) / 上端は header 色から溶ける

   ⚠️ 高さ 160px は不変 (Phase 283 action-first / CLS / Priority 3 の密度)。
   ⚠️ 画像アセットは 5 枚とも不変 (生成・加工・トリミング画像の追加なし)。
      変えたのは background-position / overlay / 文字色 / 額縁の有無だけ。
   =========================================================================== */

/* --- 1. 箱をやめて窓にする ------------------------------------------------
   実測 390px: hero は x=16 / w=343 / border 1px rgba(120,152,150,.2) の
   「ページの上に貼られた図版」だった。HOME (x=0 / w=375 / border 0) と揃える。
   margin と padding を同量ずらすのでテキストの左端は 1px も動かない = CLS 0。 */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] {
  margin-inline: -16px;
  padding-inline: 16px;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  /* 背景色は navy ではなく地の光。画像が来る前の 1 フレームも世界の中にする */
  background-color: var(--a-ground);
}
@media (min-width: 821px) {
  .hero.hero-slim[data-hero-tab="published"],
  .hero.hero-slim[data-hero-tab="entries"],
  .hero.hero-slim[data-hero-tab="results"],
  .hero.hero-slim[data-hero-tab="more"] { margin-inline: -24px; padding-inline: 24px; }
}
/* 全幅にすると .hero-copy の shell 中央寄せが効いて文字だけ内側へ寄る
   (1024px 実測: 題字が x=243 = 本文カラム x=24 と 219px ずれていた)。
   HOME と同じく hero の content box に一致させる */
.hero.hero-slim[data-hero-tab="published"] .hero-copy,
.hero.hero-slim[data-hero-tab="entries"] .hero-copy,
.hero.hero-slim[data-hero-tab="results"] .hero-copy,
.hero.hero-slim[data-hero-tab="more"] .hero-copy { max-width: none; margin: 0; }

/* --- 2. クロップ: 主題を帯の中に残し、暗い前景を切り落とす ------------------
   帯は 160px 固定なので、cover は常に幅で決まり **y だけがクロップできる**。
   390px は画像の 73% (16:9) / 61% (3:2) が見え、1024px では 28% / 23% しか見えない。
   幅ごとに「その帯に何が写るか」が別物なので、幅ごとに y を決める。
   ⚠️ 竜・城・空・闘技場・夕日・窓の光を切り落とさないことを目視で確認済み。 */
.hero.hero-slim[data-hero-tab="published"] { background-position: 50% 26%; }  /* 空〜港〜聖堂の街。下の石段を落とす */
.hero.hero-slim[data-hero-tab="entries"]   { background-position: 50% 30%; }  /* 窓の光とカードの列。手前の床を落とす */
.hero.hero-slim[data-hero-tab="results"]   { background-position: 50% 20%; }  /* 空と闘技場の弧。手前の鎧と旗竿を落とす */
.hero.hero-slim[data-hero-tab="more"]      { background-position: 50% 22%; }  /* 窓・海・夕日。手前の椅子を落とす */
@media (min-width: 821px) {
  /* desktop は画像の 1/4 しか見えない = 完全な横長のスリット。
     「空だけ」「机だけ」にならないよう、水平線 (= どの絵にもある光の帯) を通す */
  .hero.hero-slim[data-hero-tab="published"] { background-position: 50% 32%; }
  .hero.hero-slim[data-hero-tab="entries"]   { background-position: 50% 40%; }
  .hero.hero-slim[data-hero-tab="results"]   { background-position: 50% 26%; }
  .hero.hero-slim[data-hero-tab="more"]      { background-position: 50% 20%; }
}

/* --- 3. overlay: 暗幕 → 文字のまわりに立ち上がる暖色の光 -------------------
   帯 (::before) が持つのは **境界の 2 層だけ**。
     (a) 上端 12px: header (--a-ground) から絵が現れる。硬い直線で始めない
     (b) 裾 46px: HOME (293-B P2b) と同じ #f6f0e0 へ溶かす。
         hero 直下の残光 (下の §6) が同じ色で続くので、境目そのものが消える
   ⚠️ 最初の実装ではここに「下から 70% まで立ち上がる霞」も足したが、それは
      **帯を基準にした霞**なので幅が変わると文字とずれた (320px 実測: 説明文が
      4 行になり題字が帯の上から 25% まで上がって霞の外に出る → 1.25:1)。
      文字の霞は帯ではなく **文字の塊 (.hero-copy) を基準に**敷く (下の §3b)。 */
.hero.hero-slim[data-hero-tab="published"]::before,
.hero.hero-slim[data-hero-tab="entries"]::before,
.hero.hero-slim[data-hero-tab="results"]::before,
.hero.hero-slim[data-hero-tab="more"]::before {
  display: block;
  opacity: 1;
  background:
    /* (a) header から絵へ。
       ⚠️ ここは 40px x 0.92 で始めたが、帯が 160px しかないので **上 1/4 の空を
          消していた** (実測 上34%帯 meanS が素の 0.19 → 0.075 まで落ちた)。
          継ぎ目をぼかすのに要るのは「1 本の罫を溶かす」程度で十分 */
    linear-gradient(180deg, rgba(243, 243, 238, 0.50) 0, rgba(243, 243, 238, 0) 12px),
    /* (b) 裾をページの地へ溶かす (HOME P2b と同じ色・同じ距離)。
       最下行だけ 0.92 → 1 にする: 0.92 だと絵が 8% 残ったまま次の行で
       ページの地に変わり、1024px の明るい右半分で段差が見えた
       (実測 scratch/p295/probe-edge.js ※: 最終行 243.7 → 直下 240.6 = 3.1)。
       1 にすると帯の最終行そのものが残光と同じ #f6f0e0 になり、継ぎ目が消える */
    linear-gradient(to top,
      rgba(246, 240, 224, 1)     0px,
      rgba(246, 240, 224, 0.50) 12px,
      rgba(246, 240, 224, 0.18) 28px,
      rgba(246, 240, 224, 0.00) 46px);
}

/* --- 3b. 文字の光は「文字の塊」に付く ---------------------------------------
   .hero-copy 自身の背後に、**題字の 26px 上から始まって帯の下端まで濃くなる**
   暖色の光を敷く。文字が 2 行でも 4 行でも光が自動で追従するので、
   幅ごとの微調整が要らない (320〜1440 の全幅で AA が成立する)。
   絵の残る量も自動で決まる: 768px は帯の 48%、320px は 6% が素の絵。
   ⚠️ .hero-copy は Phase 257-B から position:relative + z-index:1。
      その中の z-index:-1 は「文字の下・hero の ::before より上」に入る。
   ⚠️ 左右へ 40px はみ出させて帯の端まで届かせる (overflow:hidden で切れる)。
      端で光が縦に切れると「板を貼った」ように見える。
   ⚠️ 色は --a-scrim (252,251,247 = 中性) ではなく暖色。裾の溶解 (#f6f0e0) と
      hero 直下の残光と同じ色温度に揃える (光源を 2 つ作らない)。 */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] {
  /* 裾の溶解・hero 直下の残光と **同じ 1 色** (#f6f0e0)。
     ⚠️ 別の暖色 (249,243,229) にしていたとき、帯の最終行 244 に対して直下の
        ページが 240.6 と 3.4 ずれて 1 本の横線に見えた
        (実測 scratch/p295/probe-edge.js ※)。光を 1 つにすれば継ぎ目は消える */
  --hero-haze-rgb: 246, 240, 224;
  --hero-haze-top: 0.52;   /* 題字の高さでの濃さ */
  --hero-haze-bot: 0.78;   /* 帯の下端での濃さ */
}
/* 絵ごとの濃さ。**文字が乗る側がどれだけ暗いか**で決めた (grid 実測 / 左 1/4 列):
     search  左列 L154/151/122 (木立と日陰の建物)     → 標準
     manage  左列 L177/168/106 (開いた扉と鉢植え)     → やや濃く
     results 左列 L147/163/106 (紺の軍旗と鎧)         → やや濃く
     more    左列 L115/132/116 (逆光の書棚。最も暗い) → 最も濃く */
.hero.hero-slim[data-hero-tab="published"] { --hero-haze-top: 0.50; --hero-haze-bot: 0.76; }
.hero.hero-slim[data-hero-tab="entries"]   { --hero-haze-top: 0.56; --hero-haze-bot: 0.80; }
.hero.hero-slim[data-hero-tab="results"]   { --hero-haze-top: 0.54; --hero-haze-bot: 0.78; }
.hero.hero-slim[data-hero-tab="more"]      { --hero-haze-top: 0.62; --hero-haze-bot: 0.84; }

.hero.hero-slim[data-hero-tab="published"] .hero-copy::before,
.hero.hero-slim[data-hero-tab="entries"] .hero-copy::before,
.hero.hero-slim[data-hero-tab="results"] .hero-copy::before,
.hero.hero-slim[data-hero-tab="more"] .hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -26px;
  bottom: -14px;
  left: -40px;
  right: -40px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--hero-haze-rgb), 0) 0,
    rgba(var(--hero-haze-rgb), var(--hero-haze-top)) 26px,
    rgba(var(--hero-haze-rgb), var(--hero-haze-bot)) 100%);
}

/* --- 3c. Phase 257-B の寒色の裾 (::after) を外す ---------------------------
   実測 (scratch/p295/probe-edge.js ※): 帯の最終行が 244 で、直下のページ 240.6 と
   3.4 ずれて 1 本の横線に見えていた。原因は暖色の裾ではなく、Phase 257-B が
   全 hero に敷いていた ::after —— `rgba(242,246,245,0.85)` は **寒い緑グレー**
   (293-A で地から追放した旧 --ad 系の色) で、暖色の裾の上に別の光源として
   重なっていた。合成 (243.4, 245.1, 243.4) = L244.7 が実測値と一致する。
   HOME は 293-A で同じ理由から ::after を display:none にしている。4 タブも揃える。
   裾の役目は §3 の (b) 層が引き継いでいるので、消しても境界は硬くならない。 */
.hero.hero-slim[data-hero-tab="published"]::after,
.hero.hero-slim[data-hero-tab="entries"]::after,
.hero.hero-slim[data-hero-tab="results"]::after,
.hero.hero-slim[data-hero-tab="more"]::after { display: none; }

/* --- 4. 文字: 白 + 影 → 墨 -------------------------------------------------
   暗幕を外したので白文字は成立しない。HOME と同じ墨へ。text-shadow は捨てる
   (絵の中に影付きの文字は無い。影は「文字が絵の上に浮いている」ことを示す記号) */
.hero.hero-slim[data-hero-tab="published"] h1,
.hero.hero-slim[data-hero-tab="entries"] h1,
.hero.hero-slim[data-hero-tab="results"] h1,
.hero.hero-slim[data-hero-tab="more"] h1 {
  color: var(--a-ink);
  text-shadow: none;
  letter-spacing: .02em;
}
.hero.hero-slim[data-hero-tab="published"] .hero-desc,
.hero.hero-slim[data-hero-tab="entries"] .hero-desc,
.hero.hero-slim[data-hero-tab="results"] .hero-desc,
.hero.hero-slim[data-hero-tab="more"] .hero-desc {
  color: var(--a-ink);
  text-shadow: none;
  font-weight: 400;
}
/* ⚠️ .portal-link / .hero-info-toggle / .hero-details は Phase 256-G の
   `.hero:not([data-hero-tab="dashboard"]) { display: none }` でこの 4 タブには
   出ない。Phase 256-G はそれらにも白文字を指定していたが到達しないので、
   ここでは色を書き足さない (届かない CSS を増やさない)。 */

/* --- 5. ブランドの二重表示をやめる -----------------------------------------
   HOME は header 側のブランドを隠し、hero がただ 1 つのブランド表示になっている。
   4 タブでは header に「✦ Aster Draw」が出たまま、hero の右下にも同じロゴ + 同じ
   文字列が 60px 下に出ていた (390px 実測では説明文の 3 行目と重なる)。
   ⚠️ これは aria-hidden="true" の装飾で、**情報は 1 文字も減らない**
      (可視のブランド表示は header 側にそのまま残る)。 */
.hero.hero-slim[data-hero-tab="published"] .hero-brand,
.hero.hero-slim[data-hero-tab="entries"] .hero-brand,
.hero.hero-slim[data-hero-tab="results"] .hero-brand,
.hero.hero-slim[data-hero-tab="more"] .hero-brand { display: none; }

/* --- 6. 裾から本文へ: hero 直下 140px を「絵の残光」にする -------------------
   HOME の #tab-dashboard::before と同じ言語。硬い境界で絵が終わらず、
   最初のコントロール (サブタブ / 絞り込み) がその光の中に入る。
   ⚠️ position:absolute の擬似要素は grid item にならないのでレイアウトは動かない。
      z-index:-1 は body::before (同じ -1・先行) の上に乗る = CLS 0 */
#tab-published, #tab-entries, #tab-results,
#tab-preparations, #tab-retailers, #tab-backup, #tab-new-entry,
#tab-guide-card-storage { position: relative; }
#tab-published::before, #tab-entries::before, #tab-results::before,
#tab-preparations::before, #tab-retailers::before, #tab-backup::before,
#tab-new-entry::before, #tab-guide-card-storage::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -16px;
  right: -16px;
  height: 140px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(246, 240, 224, 0.78) 0%,
    rgba(246, 240, 224, 0.30) 46%,
    rgba(246, 240, 224, 0.00) 100%);
}
@media (min-width: 821px) {
  /* desktop は hero と panel の間に機能タブ (.tabs 約 67px) が挟まる */
  #tab-published::before, #tab-entries::before, #tab-results::before,
  #tab-preparations::before, #tab-retailers::before, #tab-backup::before,
  #tab-new-entry::before, #tab-guide-card-storage::before {
    top: -72px; left: -24px; right: -24px; height: 200px;
  }
}

/* --- 7. hero と最初のコントロールの距離 -------------------------------------
   裾が溶けるようになったぶん、下の 12px の余白が「切れ目」ではなく「呼吸」になる。
   HOME (margin-bottom: 0 + サブタブを 20px かぶせる) までは寄せない —
   4 タブは直下がフィルタ帯やサブタブで、かぶせると押せる領域が絵に潜る */
.hero.hero-slim[data-hero-tab="published"],
.hero.hero-slim[data-hero-tab="entries"],
.hero.hero-slim[data-hero-tab="results"],
.hero.hero-slim[data-hero-tab="more"] { margin-bottom: var(--a-gap-s); }

/* ===========================================================================
   Phase 295 / Priority 4 — World Continuity: その他シートの遷移先
   ---------------------------------------------------------------------------
   Reviewer 判定 (r5-retailers-fold-1024.png):
     「hero は新しい世界にいるのに、下がティール枠のカードが白いカードに入れ子。
       Phase 293-B R4 が禁じた『枠の中の枠』そのもの」

   実態監査 (scratch/p295/r6base/ を 390 / 1024 で目視):
     応募先マスタ   白い rich-panel の中に .retailer-item (#eef4f2 + #cddbda の枠) が N 枚
     準備する       #10262b→#1c4b50 の黒金ボード + 白カード 19 枚 + 金の輪郭ボタン 19 個
     保存・復元     生成りの紙の中に #eef2ff / #8ee7e0 / #3730a3 の藍色の箱 (完全に別palette)
     自分で追加     用紙の中に #f0fffb のミント枠・青紫の破線枠・白い fieldset
     読み物         ほぼ世界の中。--navy の STEP ピルと --gold の柱書きだけが外
   → 5 画面に共通していたのは **「入れ物にも枠、中身にも枠」** と
     **293-A 以前の teal / mint / 藍 / 黒金** の 2 つだけ。面の言語で全部説明がつく。

   ⚠️ 全画面を同じカードテンプレートで塗っていない。**画面の目的で面が変わる**:
     ┌──────────────┬────────────────────────────────────────────────────────┐
     │ 応募先マスタ  │ 参照する一覧 → 地 (入れ物) + 紙 N 枚 (1 件ずつ外部へ出る)│
     │ 準備する      │ チェックリスト → 灯 1 (作戦ボードの頭) + 紙 1 枚 (受付中)│
     │               │  + 地のセクション (バケット) + 紙 N 枚 (準備 1 件)      │
     │ 保存・復元    │ 設定 → 地 3 セクション + 窪 1 (読まなくてよい案内)      │
     │ 自分で追加    │ 入力フォーム → 紙 1 枚 (用紙) + 窪 (欄)。灯は「追加」だけ│
     │ 読み物        │ 記事 → 地 (本文) + 紙 N 枚 (STEP)。灯を持たない          │
     └──────────────┴────────────────────────────────────────────────────────┘
   面のレシピ本体は表 2 (面の適用表) にセレクタを 1 行足しただけ。
   このブロックにあるのは **色価 (表 1) と間の取り方** だけで、レシピの写しは無い。

   ⚠️ 触っていないもの: HOME (#tab-dashboard) / カレンダー / 探す / マイ抽選 / 戦績 /
      hero 5 枚 / index.html / src/app.js / .rt-badge の寸法 / 表示件数と文言。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   P4-1 応募先マスタ (retailers) — 目的: **参照できること**
   ---------------------------------------------------------------------------
   部品 → 面
     「応募先マスタ」の見出しと説明   … 地 (セクション。囲まない)
     応募先 1 件                      … 紙 1 枚 (押すと外部の応募先サイトへ移動)
     プラットフォーム / チャネル      … 窪のチップ (色価の表: **中立**)
     灯                               … 使わない (この画面に「今やること」は無い)
   ⚠️ 3 列 → 2 列 → 1 列のグリッドも 36 件の表示件数も 1 つも変えていない。
   --------------------------------------------------------------------------- */
#tab-retailers > .panel.rich-panel { padding: 0; }
#tab-retailers .panel-heading { margin-bottom: var(--a-gap-s); }
/* 紙になったので、寒色の枠 (#cddbda) と #eef4f2 の面はレシピ側で消えている。
   ここで直すのは中の色価だけ */
#tab-retailers .retailer-item { padding: 12px; }
#tab-retailers .retailer-item:hover {
  border-color: var(--a-rule);
  background: var(--a-paper);
}
#tab-retailers .retailer-name { color: var(--a-ink); }
#tab-retailers .retailer-meta,
#tab-retailers .retailer-note { color: var(--a-ink-2); }
/* teal (#e8f6f4 / #31555d) の 2 種類のピル → 窪のチップ。
   プラットフォーム = その応募先の主軸、チャネル = 併用手段。**声の大きさだけ**で分ける */
#tab-retailers .platform-pill {
  background: var(--a-plate);
  color: var(--a-ink-2);
  border-radius: var(--a-r-tag);
}
#tab-retailers .channel {
  background: var(--a-plate);
  color: var(--a-ink-3);
  border-radius: var(--a-r-tag);
}
#tab-retailers .channel-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------------------------------------------------------------------------
   P4-2 準備する (preparations) — 目的: **やったか / やっていないかが分かること**
   ---------------------------------------------------------------------------
   部品 → 面
     30th 作戦ボードの頭 (残り日数・次の締切)  … **灯** (この画面の 1 つ)
     受付中の 30th 抽選 N 件                    … 紙 1 枚 + 罫 N-1 本
     ②③ / イオン直リンクの折りたたみ           … 地 (見出し + 罫。囲まない)
     準備 1 件 (条件の一覧)                     … 紙 1 枚
     絞り込みの帯                               … 窪
     優先度 高/中/低                            … 高だけ締切 (--a-rose)、他は中立
   ⚠️ 優先度に 3 色を割り当てない。「抽選告知前に対応必須」= 間に合わなくなるもの
      だけが表 1 の **締切** に該当する。中・低は件数と同じ中立に落とす
      (表 1: 1 画面に出てよい色相は最大 3 + 灯 1)。
   ⚠️ .prep-priority / .prep-mini は HOME の「今やる準備」でも描かれるため、
      すべて #tab-preparations 配下に限定する (HOME は Phase 295 で確定・不変)。
   --------------------------------------------------------------------------- */
/* 作戦ボード全体は「入れ物」。金の枠と生成りのグラデを外し、中身に面を持たせる */
#tab-preparations > #prep30th.panel.rich-panel { padding: 0; }
/* 灯になった頭。負のマージンで紙の縁まで伸びていたが、入れ物が地になったので不要 */
#tab-preparations .p30-board-head {
  margin: 0 0 var(--a-gap-m);
  padding: var(--a-gap-m);
  border-radius: var(--a-r);
}
#tab-preparations .p30-board-head .p30-title { color: var(--a-ink); }
#tab-preparations .p30-board-head .p30-countdown { color: var(--a-ink-2); }
#tab-preparations .p30-board-head .p30-countdown strong { color: var(--a-glow-ink); }
#tab-preparations .p30-mystate { color: var(--a-ink-2); }
/* サマリーチップ: 灯の上のチップは **縁を持たない** (灯 → 枠 → 文字で 2 重になる)。
   「次の締切」だけが表 1 の締切 = 唯一の警告色。他は中立 */
#tab-preparations .p30-sum-chip {
  background: var(--a-paper);
  border: 0;
  border-radius: var(--a-r-tag);
  color: var(--a-ink-2);
  font-weight: 700;
}
#tab-preparations .p30-sum-chip strong { color: var(--a-ink); }
#tab-preparations .p30-sum-chip.p30-sum-glow {
  background: var(--a-rose-bg);
  color: var(--a-rose-ink);
  box-shadow: none;
}
#tab-preparations .p30-sum-chip.p30-sum-glow strong { color: var(--a-rose-ink); }
/* 進捗バー: 灯の上に置く受け皿。白い箱 + 枠 をやめ、面の値だけで一段沈める */
#tab-preparations .p30-board-head .p30-progress {
  background: rgba(255, 255, 255, .62);
  border: 0;
  border-radius: var(--a-r);
}
#tab-preparations .p30-progress-label { color: var(--a-ink); }
#tab-preparations .p30-progress-num { color: var(--a-ink-2); }
#tab-preparations .p30-progress-num strong { color: var(--a-glow-ink); }
#tab-preparations .p30-progress-bar { background: rgba(31, 50, 57, .10); }
#tab-preparations .p30-progress-fill { background: var(--a-glow-fill); }
#tab-preparations .p30-progress-note { color: var(--a-ink-2); }

/* 受付中の 30th 抽選 = 1 枚の長い紙。行の中身は面を持たない */
#tab-preparations .p30-current { padding: 12px; }
#tab-preparations .p30-current .p30-h3 { color: var(--a-ink); }
#tab-preparations .p30-note { color: var(--a-ink-2); }
#tab-preparations .p30-current .p30-lot-wrap { padding: 8px 0; gap: 8px; }
#tab-preparations .p30-lot {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#tab-preparations .p30-lot:hover { background: none; }
#tab-preparations .p30-lot:hover .p30-lot-name { text-decoration: underline; }
#tab-preparations .p30-lot-name { color: var(--a-ink); }
#tab-preparations .p30-lot-period,
#tab-preparations .p30-lot-applylabel { color: var(--a-ink-2); }
#tab-preparations .p30-lot-req { color: var(--a-ink-2); }
/* 「今回確認済み」= 確認が取れている = 表 1 の **決まった**。黒金のピルをやめる */
#tab-preparations .p30-badge-now {
  background: var(--a-leaf-bg);
  color: var(--a-leaf-ink);
  border-radius: var(--a-r-tag);
}
#tab-preparations .p30-badge-past {
  background: var(--a-plate);
  color: var(--a-ink-3);
  border-radius: var(--a-r-tag);
}
/* 「応募へ ↗」は本物の操作だが **19 行ぶん並ぶ** ので灯にしない。
   .acc-add-all と同じ中立の輪郭 (色価の表: 中立)。押せることは形で伝える */
#tab-preparations .p30-lot-apply {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  border-radius: 8px;
  color: var(--a-ink-2);
  font-weight: 700;
}
#tab-preparations .p30-lot-apply:hover {
  background: var(--a-ink);
  border-color: var(--a-ink);
  color: #fff;
}

/* 折りたたみのセクション = 地。見出し + 罫 1 本で切れる (窪の面を足すと、
   ① が開いているときに 20 件ぶんの灰色の面が出て「囲われた」印象になる) */
#tab-preparations .p30-sec { border-top-color: var(--a-rule); }
#tab-preparations .p30-sec > summary { color: var(--a-ink); }
#tab-preparations .p30-prep { border-bottom-color: var(--a-rule-soft); }
#tab-preparations .p30-prep-name { color: var(--a-ink); }
#tab-preparations .p30-prep-req { color: var(--a-ink-2); }
/* チェックは「やった / まだ」の 2 値。済み = 表 1 の **決まった** (草原) */
#tab-preparations .p30-check {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink-2);
}
#tab-preparations .p30-check:hover { background: var(--a-hover); border-color: var(--a-ink); }
#tab-preparations .p30-check.on {
  background: var(--a-leaf-bg);
  border-color: rgba(74, 100, 56, .28);
  color: var(--a-leaf-ink);
}
#tab-preparations .p30-aeon-link {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink);
}
#tab-preparations .p30-aeon-link:hover { background: var(--a-hover); border-color: var(--a-ink); }

/* 絞り込みの帯 = 窪 (探す・マイ抽選の帯と同じ) */
#tab-preparations > .toolbar.prep-toolbar { padding: var(--a-gap-s); }

/* 準備 1 件 = 紙 1 枚 */
#tab-preparations .prep-card { padding: 12px; }
#tab-preparations .prep-card:hover { border-color: var(--a-rule); }
#tab-preparations .prep-card h3 { color: var(--a-ink); }
#tab-preparations .prep-timing { color: var(--a-ink-2); }
#tab-preparations .prep-requirements { color: var(--a-ink-2); }
#tab-preparations .prep-card .memo { color: var(--a-ink-2); }
/* 高 = 表 1 の締切 (告知前に間に合わなくなるもの) / 中・低 = 中立 */
#tab-preparations .prep-priority { border-radius: var(--a-r-tag); }
#tab-preparations .prep-priority.high { background: var(--a-rose-bg); color: var(--a-rose-ink); }
#tab-preparations .prep-priority.medium { background: var(--a-plate); color: var(--a-ink-2); }
#tab-preparations .prep-priority.low { background: var(--a-plate); color: var(--a-ink-3); }
/* focusPreparation の spotlight は teal のリングだった。今いる場所 = 灯 */
#tab-preparations .prep-card.spotlight {
  border-color: rgba(160, 106, 48, .40);
  box-shadow: 0 0 0 3px rgba(160, 106, 48, .18), var(--a-lift-1);
}

/* ---------------------------------------------------------------------------
   P4-3 保存・復元 (backup) — 目的: **設定であること**
   ---------------------------------------------------------------------------
   部品 → 面
     3 つの見出し (バックアップと通知 / メールで保存 / みんなの当選率) … 地
     「保存されるデータについて」                                      … 窪
     JSON バックアップ                                                  … 灯 (塗り)
     Excel CSV / 通知カレンダー / JSON読込                              … 中立の輪郭
   ⚠️ 塗りが 2 つ (「JSONバックアップ」と「JSONバックアップをダウンロードして
      ログインへ進む」) 見えるが、R5-B7 の数え方どおり **同じ意味の塗りは 1 つ**
      なので分割しない (どちらも同じ JSON を書き出す操作)。
   ⚠️ 3 セクションを地にすると境目が消えるので、定義表どおり「見出し + --a-rule
      1 本 + --a-gap-l の余白」で切る。**箱を積み直さない**。
   --------------------------------------------------------------------------- */
#tab-backup > .panel.rich-panel { padding: 0; }
#tab-backup > .panel.rich-panel + .panel.rich-panel {
  border-top: 1px solid var(--a-rule);
  padding-top: var(--a-gap-m);
  margin-top: var(--a-gap-s);
}
#tab-backup h2 { color: var(--a-ink); }
#tab-backup > .panel.rich-panel > div > p { color: var(--a-ink-2); }
#tab-backup .backup-actions { gap: 8px; margin-top: 2px; }
/* 藍 (#eef2ff / #3730a3) + teal の枠 (#8ee7e0) = このアプリのどの表にも無い色だった */
#tab-backup .backup-note {
  padding: var(--a-gap-m);
  color: var(--a-ink-2);
}
#tab-backup .backup-note strong { color: var(--a-ink); }
/* .button.secondary は index.html 全体でこの 2 個 (Excel CSV / 通知カレンダー) だけ。
   R5-B7 が .ghost に当てた「副次の操作 = 輪郭だけ」をそのまま延長する */
.button.secondary {
  background: var(--a-paper);
  border: 1px solid var(--a-rule);
  color: var(--a-ink);
}
.button.secondary:hover { background: var(--a-hover); border-color: var(--a-ink); }
/* 動的生成セクション (cloud / winRate) は inline style で #777 / #555 を持つ。
   生成りの面で #777 は 4.35:1 = AA 未達なので、そこだけ読める濃さへ寄せる。
   ⚠️ inline style が相手なので !important 以外に手段が無い。対象は
      「#tab-backup の中の、色を inline で持っている段落」に限定する */
#tab-backup #cloudBackupSection p[style*="color"],
#tab-backup #winRateSection p[style*="color"],
#tab-backup #winRateSection span[style*="color"] { color: var(--a-ink-2) !important; }

/* ---------------------------------------------------------------------------
   P4-4 自分で追加 (new-entry) — 目的: **書けること**
   ---------------------------------------------------------------------------
   部品 → 面
     フォーム全体                    … 紙 1 枚 (応募 1 件を書き込む用紙)
     入力欄 / 画像枠 / 開封結果      … 窪 (定義表の「入力欄・検索欄」)
     「追加」                        … 灯 (この画面で唯一の塗り)
   ⚠️ 紙の上の窪は「枠の中の枠」ではない。窪は **線も影も持たない** ので枠が増えない。
      逆に今までは 紙 → 白い fieldset (枠) → 白い input (枠) で 3 重だった。
   ⚠️ ただし入力欄だけは面の差 (252 → 247) では境界が読めないので、
      **--a-rule-soft の 1 本だけ**は残す。押せる/書ける場所は形で伝える必要がある。
      これは窪の例外ではなく「窪 + フォームコントロールの輪郭」として明示する。
   ⚠️ 欄は 1 つも減らしていない (4 列グリッド・全 22 欄・レアリティ 9 枠すべて不変)。
   --------------------------------------------------------------------------- */
#tab-new-entry > .panel.form-panel { padding: var(--a-gap-m); }
#tab-new-entry .panel-heading { margin-bottom: var(--a-gap-m); }
#tab-new-entry .field span,
#tab-new-entry .check-field span { color: var(--a-ink); }
#tab-new-entry .field span small { color: var(--a-ink-2); font-weight: 700; }
#tab-new-entry .microcopy,
#tab-new-entry .hint { color: var(--a-ink-2); }
#tab-new-entry input,
#tab-new-entry select,
#tab-new-entry textarea {
  background: var(--a-plate);
  border: 1px solid var(--a-rule-soft);
  border-radius: 8px;
  color: var(--a-ink);
}
#tab-new-entry input::placeholder,
#tab-new-entry textarea::placeholder { color: var(--a-ink-3); }
/* 寒色のリング (--lagoon #7fa8a4) → 「いま書いている欄」= その画面で今いる工程 (表 1) */
#tab-new-entry input:focus,
#tab-new-entry select:focus,
#tab-new-entry textarea:focus {
  background: var(--a-paper);
  border-color: var(--a-glow-fill);
  box-shadow: 0 0 0 3px rgba(160, 106, 48, .18);
}
/* 画像枠: 青 (37,99,235) + teal (15,118,110) のグラデ + 破線 → 窪 + 破線 1 本 */
#tab-new-entry .photo-preview {
  border: 1px dashed var(--a-rule);
  color: var(--a-ink-2);
}
/* こちらから確認 / 応募先の自由入力 / 開封結果: ミント (#f0fffb) と白い箱 → 窪 */
#tab-new-entry .check-field { padding: 10px 12px; }
#tab-new-entry .check-field input { background: var(--a-paper); }
#tab-new-entry .rarity-field h3 { color: var(--a-ink); }
#tab-new-entry .rarity-field p { color: var(--a-ink-2); }
#tab-new-entry .rarity-grid label span,
#tab-new-entry .opening-count-grid label span { color: var(--a-ink-2); }
#tab-new-entry .hit-cards { border-top-color: var(--a-rule); }
#tab-new-entry .hit-cards-note { color: var(--a-ink-2); }
#tab-new-entry .hit-card-head h4 { color: var(--a-ink); }

/* ---------------------------------------------------------------------------
   P4-5 読み物 (guide) — 目的: **読めること**
   ---------------------------------------------------------------------------
   部品 → 面
     記事本文            … 地 (もともと囲われていない。維持)
     STEP / まとめ       … 紙 1 枚ずつ (寒色の影 --shadow-sm を持っていた)
     ポイントのチップ    … 窪のチップ
     灯                  … 持たない (読み物に「今やること」は無い)
   ⚠️ 写真・図版・文言・アフィリエイト開示は 1 文字も変えていない。
   ⚠️ AA: --gold (#b8923c) の柱書きは地の上で 2.58:1、
      rgba(52,71,90,.72) のキャプションは 4.09:1 で **どちらも AA 未達**だった。
      色価の表の中で読める値 (--a-glow-ink 5.13:1 / --a-ink-2 6.4:1) へ移す。
   --------------------------------------------------------------------------- */
#tab-guide-card-storage .guide-kicker { color: var(--a-glow-ink); }
#tab-guide-card-storage .guide-article h2 { color: var(--a-ink); }
#tab-guide-card-storage .guide-lede { color: var(--a-ink); }
#tab-guide-card-storage .guide-point {
  background: var(--a-plate);
  border: 0;
  color: var(--a-ink-2);
}
#tab-guide-card-storage .guide-affiliate-note,
#tab-guide-card-storage .guide-photo figcaption,
#tab-guide-card-storage .guide-disclosure { color: var(--a-ink-2); }
#tab-guide-card-storage .guide-step h3,
#tab-guide-card-storage .guide-summary h3 { color: var(--a-ink); }
/* STEP ピルは --navy (#3e5568) の塗り。塗りが許されるのは --a-glow-fill だけ (表 1)。
   番号は「数」なので中立のチップへ落とす */
#tab-guide-card-storage .guide-step-no {
  background: var(--a-plate);
  color: var(--a-ink-2);
  border-radius: var(--a-r-tag);
}
#tab-guide-card-storage .guide-pr a { color: var(--a-ink); }
#tab-guide-card-storage .guide-photo img { background: var(--a-plate); }

/* 窪の上に窪を置くと欄が消える (plate 247 の上に plate 247)。
   受け皿の中の入力欄だけは紙の面に戻す — 「書ける場所」は必ず読めること */
#tab-new-entry .rarity-field input,
#tab-new-entry .opening-count-grid input,
#tab-new-entry .custom-retailer input,
#tab-new-entry .hit-card-rows input {
  background: var(--a-paper);
  border-color: var(--a-rule);
}

/* ---------------------------------------------------------------------------
   P4-6 撮影して直したもの (r6 → r6b)
   --------------------------------------------------------------------------- */
/* (a) 応募先マスタ: .retailer-head は space-between の flex で align-items が既定の
   stretch。teal のときは薄すぎて気付かなかったが、窪の面にした途端
   プラットフォームのピルがカード高いっぱいの灰色の板になった (r6 実測 1024/390 両方)。
   チップは行の先頭に揃える */
#tab-retailers .retailer-head { align-items: flex-start; }
/* (b) 準備する: 「応募へ ↗」も同じ stretch で 90px の縦長の箱になっていた。
   行の中央に置き、代わりにタップ目標は min-height で確保する (Phase 250 の基準) */
#tab-preparations .p30-current .p30-lot-wrap { align-items: center; }
#tab-preparations .p30-lot-apply { min-height: 44px; }  /* R1: 40px はタップ目標の下限割れ。.fui-cta と同じ 44px へ */
/* (c) 準備する: 絞り込みの帯が窪になったので、その中の入力欄を窪にすると
   面が同値 (247) で欄が消える。帯の中だけ紙の面に戻す (新規追加の欄と同じ扱い) */
#tab-preparations > .toolbar.prep-toolbar input,
#tab-preparations > .toolbar.prep-toolbar select {
  background: var(--a-paper);
  border: 1px solid var(--a-rule-soft);
  border-radius: 8px;
  color: var(--a-ink);
}
#tab-preparations > .toolbar.prep-toolbar input::placeholder { color: var(--a-ink-3); }
#tab-preparations > .toolbar.prep-toolbar input:focus,
#tab-preparations > .toolbar.prep-toolbar select:focus {
  border-color: var(--a-glow-fill);
  box-shadow: 0 0 0 3px rgba(160, 106, 48, .18);
}
/* (d) 自分で追加: 390px では .photo-field が 1 列になるため、**まだ画像を選んで
   いない**空の枠が幅いっぱい × 4:5 = 390px を占め、ファーストビューが
   「空の四角形」だけで終わっていた (r6 実測: 商品名の入力欄が fold の外)。
   ⚠️ 画像を選んだ後は 4:5 のまま (商品を切り取らない)。空のときの高さだけ詰める。
   ⚠️ 欄・機能・順序は不変。:has 非対応環境では従来どおり 4:5 で表示される */
@media (max-width: 820px) {
  #tab-new-entry .photo-preview:not(:has(img)) { aspect-ratio: 16 / 9; }
}
/* (e) 保存・復元: 見出し直下でない素の <p> は `.rich-panel p { color: var(--muted) }`
   (#71808d) を拾い、地の上で 3.61:1 = AA 未達だった (scratch/p295/check-p4.js ※)。
   「万一の上書きや復元操作の間違いに備え…」など、**読み飛ばしてはいけない注意書き**が
   ここに該当する。この画面の補助文はすべて --a-ink-2 (6.4:1) へ */
#tab-backup .rich-panel p { color: var(--a-ink-2); }

/* ===========================================================================
   Phase 295 / Priority 2 + 3 — 探す (published): 額装と密度
   ---------------------------------------------------------------------------
   Reviewer:
     (P3)「探すの 1 画面目に結果が 1 件しか入らない」
     (P2)「中盤の商品画像グリッドがどの EC にもある造り」
          「美しさを担っているのが依然 hero 1 枚」

   実測 (scratch/p295/measure-search.js・390x844):
     header 56 + hero 160 + .app の余白 16 …… 232
     抽選情報/店頭販売 (44) + 24 の海
     受付中/開始前/…    (32) + 24 の海
     検索/絞り込み      (40) + 24 の海
     商品別/応募先別/…  (42) + 24 の海
     地域の案内         (90) + 24 の海
     → 1 件目の商品が y=620 に始まり、**完全に入るのは 1 件**。

   原因は 2 つ:
     (1) **同じ 8px を 2 回払っている。** Phase 293-B R5-B1 は帯を詰めるつもりで
         `margin-bottom: var(--a-gap-s)` を 5 つの操作に付けたが、器の
         `.tab-panel.active { gap: 16px }` はそのまま残っていたので、
         意図した 8px の帯が実測 24px の海になっていた (16 + 8)。
     (2) **操作が 5 つの独立した島**で、結果は 6 番目の島として画面の外にいた。
         「どう見るか」は 1 つの意思なので、島ではなく 1 本の帯であるべき。

   ここで直すのは **結果に着くまでの縦** と **カードの中の組み方** だけで、
   チップ・ラベル・件数・並べ替え・地域の案内・結果の件数は 1 つも減らしていない。
   truncate も増やしていない (むしろ商品名の幅は広がる)。
   --------------------------------------------------------------------------- */

/* --- P3-1. 操作は 5 つの島ではなく 1 本の帯 -------------------------------- */
/* 器の gap を帯の刻み (8px) に合わせ、二重払いをやめる。
   ⚠️ `.tab-panel.active` (0-2-0) より強い #tab-published.tab-panel.active (1-2-0) で
   **この画面だけ**変える。他タブの 16px は不変 */
#tab-published.tab-panel.active { gap: var(--a-gap-s); }
/* 帯の中の 4 つは自前の margin を持たない (間は器の gap 1 本が持つ) */
#tab-published .published-section-switch,
#tab-published .phase-filter,
#tab-published .toolbar-toggle,
#tab-published #publishedSubTabs.sub-tabs { margin-bottom: 0; }
/* 帯 → 一覧 のあいだだけ 1 段広く取り、「操作はここまで」を余白で言う。
   地域の案内は帯ではなく一覧側の前置きなので、その上に段差を置く */
#tab-published .region-filter-bar { margin: 0 0 var(--a-gap-s); }

/* --- P3-2. 地域の案内は 2 行の文と 2 つのボタン。器を詰める ---------------- */
/* ⚠️ 文言・ボタン・機能・順序は不変。行間と余白だけを帯の刻みへ合わせる */
#tab-published .region-onboarding-lede { margin-bottom: 6px; line-height: 1.5; }
#tab-published .region-onboarding-actions { gap: 8px; }
/* ⚠️ 38px は Phase 293-B の実装値。タップ目標をこれ以上小さくしない */
#tab-published .region-btn { min-height: 38px; }
/* Phase 293-B R5-B1 は「地域の案内 = 地 (囲まない)」と決めたが、実装は
   `.region-onboarding` (初回の案内) にしか当たっておらず、**設定済み / 「今は設定
   しない」を押したあとの `.region-summary-row` は白いカードのまま**だった
   (rgba(255,255,255,.84) + rgba(82,107,122,.22) の枠)。
   常用状態のほうが 293-B 以前の言語で残っていた = 直す。実測 62px → 38px */
#tab-published .region-filter-bar .region-summary-row {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* 器の内側の余白も帯の刻みへ (3px は 293-B の暫定値。中のボタンの高さは不変) */
#tab-published .published-section-switch,
#tab-published #publishedSubTabs.sub-tabs { padding: 2px; }

/* --- P3-3. 一覧は「紙の重なり」。海を挟まない ------------------------------ */
/* 実測 28px (gap 12 + margin-top 12 + margin-bottom 8 の三重払い) → 10px 1 本へ。
   紙が 1 枚ずつ独立していることは面 (--a-paper) と罫が既に言っているので、
   間に海は要らない */
#tab-published #publishedList.entry-list { gap: 10px; }
#tab-published #publishedList > .product-accordion { margin-top: 0; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   P2. 商品画像を「EC のサムネ」から「台紙に貼った 1 枚」へ (額装)
   ---------------------------------------------------------------------------
   Phase 293-B R4-5 が HOME の抽選カードに当てた額装 (窓 = 一段沈む台紙 / 絵は
   全面に敷かず余白を持つ / 境は罫 1 本) を、探すの一覧へ**翻訳**する。
   新しいレシピは作らない: 窓は表 2 の 窪、カードは表 2 の 紙 のまま。

   EC のサムネとの違いを作っているのは 3 つ:
     (1) 画像がカードの面に直に浮いているのをやめ、**台紙 (窪) の中に収める**。
         罫 1 本が「これは陳列ではなく記録である」と言う
     (2) 窓の寸法を **どのカードでも同じ** (96x88) にし、上端をカードの上端から
         同じ 8px に揃える。一覧の左端に窓の上端・下端が一直線に通り、
         **帳面の見出し列**になる。EC のサムネは行の中央に浮くので、この直線が出ない
     (3) 絵は窓に対して余白 (マット) を持つ。箱絵の彩度がカードの縁まで
         届かなくなり、地の暖色が絵のまわりを回る
   ⚠️ 画像そのものは 1px も加工しない (filter / 彩度 / 差し替え いずれも無し)。
   ⚠️ 画像は**小さくしていない**: 窓 80x80 (マット 0・絵の描画 68.6x80) →
      96x88 (マット 4/6px・描画 68.6x80。横に使える幅は 72 → 84)。
      desktop (>=900px) は 104x96 で **描画 75.5x88 = 面積 1.21 倍**。
   --------------------------------------------------------------------------- */
/* 見出しの組み直し。旧: flex 1 行 + 折返しで `＋未追加N件` だけが 2 行目へ落ち、
   サムネの横に 57px の死んだ空間が残っていた (実測 thumb 80 / 行 137)。
   新: grid で「窓 | 文字 | 矢印」の 3 列にし、窓を 1〜2 行目に立て、
       ＋未追加N件 をその**窓の下 (= 死んでいた空間)** へ移す。
   ⚠️ `.product-accordion-title` は display: contents にして h3 と meta を
      grid item へ上げる (DOM は変えられないため)。読み上げ順・要素・属性は不変 */
#tab-published #publishedList > .product-accordion .product-accordion-head {
  display: grid;
  grid-template-columns: minmax(96px, min-content) minmax(0, 1fr) 18px;
  grid-template-areas:
    "thumb title arrow"
    "thumb meta  meta"
    "add   meta  meta";
  align-items: start;
  /* ⚠️ 列の間を 12 → 8、矢印の列を 20 → 18 にして、窓を 80 → 96 に広げても
     **商品名の幅が旧実装より狭くならない**ようにしてある
     (実測 h3: 320px 123 → 125 / 390px 193 → 195 / 1024px 322 → 319)。
     truncate で密度を稼がないため、ここは必ず等幅以上を保つこと */
  column-gap: 8px;
  row-gap: 4px;
  padding: 8px;
}
/* ＋未追加N件 が無い商品 (= 未追加 1 件以下) では 3 行目が空になるが、
   meta が 2 行ぶんにまたがっているせいで **空の 3 行目に meta の取り分が
   配られ、カードの下に 20px の空白の帯**ができていた (応募先別で顕著・実測 130px)。
   ボタンが無いときは行を 2 つにする。:has 非対応なら従来どおり (退行しない) */
#tab-published #publishedList > .product-accordion .product-accordion-head:not(:has(.acc-add-all)) {
  grid-template-areas:
    "thumb title arrow"
    "thumb meta  meta";
}
#tab-published #publishedList > .product-accordion .product-accordion-title { display: contents; }
#tab-published #publishedList > .product-accordion .product-accordion-thumb,
#tab-published #publishedList > .product-accordion .accordion-thumb {
  grid-area: thumb;
  width: 100%;
  height: 88px;
  background: var(--a-plate);
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
  border-radius: var(--a-r);
  overflow: hidden;
}
/* ⚠️ サムネは 2 形態ある: <img class="product-accordion-thumb"> (商品画像) と
   <span class="product-accordion-thumb"> の中に img (応募先ロゴ)。
   img 自身が窓のときに width/height:100% を当てると、**行が auto なので
   height:100% が intrinsic へ落ちて画像の縦横比がそのまま行の高さになる**
   (実測: 窓が 96 や 112px になり、カードが商品ごとに高さの違う箱になっていた)。
   img が窓のときはマットだけを当て、寸法は窓の指定に任せる */
#tab-published #publishedList > .product-accordion img.product-accordion-thumb {
  object-fit: contain;
  padding: 4px 6px;
}
#tab-published #publishedList > .product-accordion .product-accordion-thumb img,
#tab-published #publishedList > .product-accordion .accordion-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px 6px;
}
#tab-published #publishedList > .product-accordion .product-accordion-title h3 {
  grid-area: title;
  align-self: center;
}
#tab-published #publishedList > .product-accordion .product-accordion-meta { grid-area: meta; margin-top: 0; }
/* ＋未追加N件 は窓の下 (= 旧レイアウトで死んでいた空間) に置く。
   ⚠️ 左列は minmax(96px, min-content) なので、件数が 2 桁になってボタンが 96px を
      超えても列が広がる = **文字が切れない** (実測 sw93/cw86 の切れを潰した)。
      margin-right: 8px は横並び前提の旧指定で、列の中では幅を食うだけなので外す */
#tab-published #publishedList > .product-accordion .acc-add-all {
  grid-area: add;
  justify-self: start;
  margin-right: 0;
}
#tab-published #publishedList > .product-accordion .product-accordion-arrow {
  grid-area: arrow;
  align-self: center;
}
/* チップの間は帯の刻み (8px。既定は 12px)。
   ⚠️ これで「最短締切 09/08」+「応募開始 08-17〜」が 1 行に収まるかを実測したが、
      390px では meta 幅 221 に対し 2 つで 231 必要で **収まらない (3 行のまま)**。
      収めるにはチップの padding を 6px 未満にするか窓を狭めるしかなく、
      どちらも「文字か絵を削って詰める」ことになるので取らなかった。
      3 行のままでもカードが縮んだのは、行数ではなく **＋未追加N件 を窓の下へ
      移した**ぶん (実測 155 → 140px) */
#tab-published #publishedList > .product-accordion .product-accordion-meta {
  gap: 4px 8px;
}
#tab-published #publishedList > .product-accordion .acc-tag { padding-inline: 7px; }

/* 触ったときに動くのは「紙」であって画像ではない (画像は資料なので動かさない) */
#tab-published #publishedList > .product-accordion .product-accordion-head:hover .product-accordion-thumb {
  box-shadow: inset 0 0 0 1px rgba(160, 106, 48, .28);
}
#tab-published #publishedList > .product-accordion > summary:focus-visible {
  outline: 2px solid var(--a-glow-fill);
  outline-offset: -2px;
  border-radius: var(--a-r);
}

/* --- P3-4. desktop: 帯を 2 列にする ---------------------------------------
   1024x768 の実測は **完全に入る結果 0 件** で、mobile より悪かった。
   原因は「幅 950px の列に、全幅の操作バーを 5 段積んでいる」こと。
   操作は 4 つとも器 (どう見るか) なので、900px 以上では 2 列 x 2 段の
   ツールバーに畳む。**DOM 順 (器の切替 → 期間 → 検索 → 並べ方) は不変**なので
   読み上げ順もタブ順も変わらない。
   ⚠️ 絞り込みを開いた状態 / 初見案内が出ている状態では 1 列へ戻す
      (全幅の要素が挟まると空セルができるため)。:has 非対応の環境では
      このブロックごと落ちて従来の 1 列 = 退行しない
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    column-gap: var(--a-gap-m);
  }
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) > * { grid-column: 1 / -1; }
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) > .published-section-switch { grid-column: 1; }
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) > .phase-filter { grid-column: 2; align-self: center; }
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) > .toolbar-toggle { grid-column: 1; }
  #tab-published.tab-panel.active:not(:has(> #publishedToolbar:not([hidden]))):not(:has(> #firstUseIntro:not([hidden]))) > #publishedSubTabs.sub-tabs { grid-column: 2; justify-self: start; }
  /* desktop は横が余っているので窓を大きくする (mobile は文字の幅と競合するので不変)。
     ⚠️ 「小さくして問題を隠す」の逆。実測の描画サイズ 68.6x80 → 75.5x88 (面積 1.21 倍) */
  #tab-published #publishedList > .product-accordion .product-accordion-head {
    grid-template-columns: minmax(104px, min-content) minmax(0, 1fr) 18px;
  }
  #tab-published #publishedList > .product-accordion .product-accordion-thumb,
  #tab-published #publishedList > .product-accordion .accordion-thumb { height: 96px; }
}

/* --- P2-2. 開いた中身も「紙 1 枚の行」にする ------------------------------
   r7state-base (変更前) の実測: 探すのアコーディオンを開くと
   `--ad-sunken` の窪の上に `--ad-surface` + 影の**白いカードが N 枚**並び、
   紙 (商品) の中に紙 (抽選) が入れ子になっていた = R4 の「枠の中の枠」。
   面のレシピは表 2 の 地 / 紙の行 に 1 行ずつ足しただけで、ここには無い。
   ここにあるのは **表 2 が消した余白と、状態の色 (表 1) の付け直し** だけ。
   ⚠️ 表示している抽選の件数・文言・ボタン・順序は 1 つも変えていない
   --------------------------------------------------------------------------- */
/* 地 は padding-left/right を 0 にするが、行の左右の余白は紙の内側余白として要る */
#tab-published #publishedList > .product-accordion .product-accordion-body {
  padding: 0 12px 6px;
  gap: 0;
  border-top: 1px solid var(--a-rule);
}
/* 行そのものの内側余白 (Phase 293-B の `padding: 10px 0` が 1-3-0 に負けていた) */
#tab-published #publishedList > .product-accordion .product-child-card {
  padding: 10px 0;
  margin-top: 0;
  align-items: center;
  gap: var(--ad-s3);
}
/* ⚠️ 表 2 の 紙の行 を 2 id にしたので、状態の縦罫 (表 1 の 空 / 灯) も同じ強さで
   書き直さないと消える。**色も太さも 293-B のまま**で、セレクタだけを揃える */
#tab-published #publishedList > .product-accordion .product-child-card.is-new {
  background: none;
  border-color: transparent;
  box-shadow: inset 2px 0 0 var(--a-sky-ink);
  padding-left: 10px;
}
/* ⚠️ 293-B の「本日締切の行 = 灯」は **面 (--a-glow-bg) の塗り**だったが、
   256-D の白いカードに負けていて一度も描かれていなかった。枠を外して初めて
   描かれるようになった結果、9 行中 9 行が本日締切の日には
   **本文がまるごと 1 枚のタンの板**になった (r7state で確認)。
   表 1「塗りは 1 画面 1 個」に従い、行では塗りをやめて縁だけを灯にする。
   意味 (本日締切) も色 (--a-glow-fill) も 293-B のまま。新着の空の縦罫と同じ作り */
#tab-published #publishedList > .product-accordion .product-child-card.deadline-today-card {
  border-color: transparent;
  background: none;
  box-shadow: inset 2px 0 0 var(--a-glow-fill);
  padding-left: 10px;
}
/* 応募先別 / 画像が無い商品では窓の中身がロゴ or 種別プレースホルダーになる。
   40px のロゴが 96x88 の台紙の中央に浮くと「額が大きすぎる絵」に見えたので、
   この画面の窓の中でだけロゴを 48px (ロゴ画像ありは 60px) にする。
   ⚠️ Phase 292 の 36px はカレンダー (.month-event .rt-badge) の規定で、ここではない。
      弱めるのではなく **強める**方向なので 292 の趣旨とも矛盾しない */
#tab-published #publishedList > .product-accordion .thumb-badge .rt-badge {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
/* ロゴ画像があるときだけもう一段大きく。頭文字 fallback は色の付いた円なので、
   大きくすると世界の中で一番強い色になってしまう (実測: 紫の「フ」が 56px で最大の彩度) */
#tab-published #publishedList > .product-accordion .thumb-badge .rt-badge.has-image {
  width: 60px;
  height: 60px;
}

/* ===========================================================================
   Phase 295 追補 R1 — AA 未達の取りこぼし (夜間検証の実測に基づく)
   ---------------------------------------------------------------------------
   夜間の DOM 計測 (scratch/p295/audit-quality.js) で、変更前後ともに WCAG AA
   (4.5:1) を割っている文字が 探す / 戦績 に残っていた。**Phase 295 の regression
   ではなく元からの取りこぼし**だが、コントラストは直してよい範囲なので直す。
   新しい色は作らず、表 1 の既存トークンへ寄せる (色相の意味は変えない)。

   ⚠️ 計測ツールの既知の弱点: 背景の alpha が 0.95 未満の要素は「祖先の背景」で
   判定してしまうため、`.dl-normal` (基底 rgba(13,62,66,.88)) を 1.04:1 と誤報した。
   実効値は 8.27:1 で問題なし。下記は alpha を合成し直して実測を取り直したものだけ。

   | 対象                        | 変更前              | 実測  | 変更後            | 実測  |
   |-----------------------------|---------------------|-------|-------------------|-------|
   | .pcard-deadline.dl-urgent   | #c2554f + 白        | 4.46  | --a-rose-ink      | 6.46  |
   | .pcard-deadline.dl-unknown  | rgba(100,106,116,.7)| 2.98  | --a-ink-3         | 5.73  |
   | .next-line                  | --amber (#c88a5e)   | 2.80  | --a-glow-ink      | 5.57  |
   | .first-use-intro .fui-steps | #5b7a80             | 4.33  | --a-ink-3         | 5.36  |
   | .supply-desc                | --muted (#71808d)   | 3.92  | --a-ink-3         | 5.53  |

   dl-urgent が #c2554f だったのは 293-B の色価表 (表 1) より前の残り。締切の色は
   --a-rose-* に決めてあるので、そこへ戻すだけでコントラストも同時に解決する。
   dl-unknown は「不明」であって「終了」ではないので、dl-closed の窪 (--a-plate)
   とは分ける。基底の濃い青緑 (8.27) より明るい --a-ink-3 の塗りにして、
   「既知の締切より静か・終了より生きている」という並びを保つ。

   触らないもの:
   - **`--muted` トークン自体 (#71808d / 3.92:1) は変更していない。** 106 箇所で
     使われており、凍結中の HOME (`#tab-dashboard`) とカレンダーにも及ぶ。
     トークン単位の入れ替えは仕様判断なので scratch/NEXT-UX-AUDIT.md へ提案として送る
   - `--amber` トークン自体。カレンダーの `.month-today` / `.month-event.today-deadline`
     が使っているため、`.next-line` の color だけを差し替える
   - HOME / カレンダー。上記 5 セレクタはいずれも `#tab-dashboard` と
     カレンダーには出現しない (夜間計測で確認済み: dashboard@390 / calendar@390 の
     AA 未達一覧に 1 件も含まれない)
   =========================================================================== */
.pcard-deadline.dl-urgent { background: var(--a-rose-ink); }
.pcard-deadline.dl-unknown { background: var(--a-ink-3); }
.next-line { color: var(--a-glow-ink); }
/* 0,3,0 の派生も同じ旧トークンを持っているので一緒に寄せる (結果の自己確認案内) */
.next-line.result-check-guidance.needs-self-check { color: var(--a-glow-ink); }
.first-use-intro .fui-steps { color: var(--a-ink-3); }
.supply-desc { color: var(--a-ink-3); }

/* ===========================================================================
   Phase 295 追補 R1 — Reviewer 指摘の実測反映
   ---------------------------------------------------------------------------
   夜間の read-only Reviewer 2 名 (UX / Art) の指摘を、目視ではなく
   scratch/p295/probe-r1.js の実測で確かめてから、regression と
   optical sizing に当たるものだけを直す。

   ⚠️ 採用しなかった指摘は scratch/p295/FINAL-REVIEW.md に理由付きで残す
      (「別案の方が好き」だけでは動かさない、という夜間指示に従う)。
   =========================================================================== */

/* --- R1-a. hero の霞が帯の途中で縦に切れる (Art F1 / BUG) -------------------
   §3b は「文字の塊 (.hero-copy) を基準に霞を敷く」方針で、左右へ 40px だけ
   はみ出させていた。phone では .hero-copy が帯とほぼ同幅なのでこれで端まで
   届くが、desktop では届かない。**実測 (probe-r1.js)**:

     幅     hero 帯          .hero-copy      霞の右端   帯の右端  霞の無い幅
     320px  [0..305]         [16..289]       329        305       0 (届く)
     390px  [0..375]         [16..359]       399        375       0 (届く)
     768px  [0..753]         [16..538]       578        753       175px
     1024px [0..1009]        [24..546]       586        1009      423px

   1024px では帯の **42% に霞が無く、そこで光が縦にすとんと切れていた**。
   Before は同じ形だったが暗幕が全面を覆っていたので見えず、絵を出した
   Phase 295 で初めて見えるようになった (= この Phase が作った見え方の欠陥)。

   直し方: 端まで伸ばして「切る」のではなく、**横方向にも 0 へ落とす**。
   幅は自分の箱に対する相対値で書けるので、幅ごとの数値調整が要らない:
     width = .hero-copy + 40px(左) + 40px(右) + 320px(逃げ)
     mask  = 100% - 320px までは不透明 → そこから 100% で 0
   つまり **従来と同じ位置まで従来と同じ濃さ**で、その先だけが 320px かけて
   消える。文字の下の濃さは 1 も変わらないので AA の実測値は不変
   (§3b の実測表・measure-tab-heroes.js の判定はそのまま有効)。 */
@media (min-width: 768px) {
  .hero.hero-slim[data-hero-tab="published"] .hero-copy::before,
  .hero.hero-slim[data-hero-tab="entries"] .hero-copy::before,
  .hero.hero-slim[data-hero-tab="results"] .hero-copy::before,
  .hero.hero-slim[data-hero-tab="more"] .hero-copy::before {
    right: auto;
    width: calc(100% + 80px + 320px);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 320px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 320px), transparent 100%);
  }
}

/* --- R1-b. 探すのカードが 768px 以上で高くなる (UX #3 / Art F2 / REGRESSION) -
   3 行 grid ("add" を窓の下へ置く) は phone では狙いどおり縮むが、
   meta が 1 行に収まる幅では **3 行目の右側が丸ごと空く**。
   **実測 (probe-r1.js・.product-accordion 先頭 3 件の高さ)**:

     幅      Before   After(R1前)   差
     320px   177px    140px         -37  ← 改善
     390px   155px    140px         -15  ← 改善
     768px    98px    140px         +42  ← 退行
     1024px  133px    148px         +15  ← 退行

   768px 以上では meta が 1 行なので、`add` を **meta の右隣へ戻す**。
   列を 1 つ足して arrow を 2 行にまたがせる。DOM は変えない (Phase 295 の
   「index.html / app.js を触らない」条件を維持)。
   phone (〜767px) は縮んでいるので触らない。 */
@media (min-width: 768px) {
  #tab-published #publishedList > .product-accordion .product-accordion-head {
    grid-template-columns: minmax(96px, min-content) minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "thumb title title arrow"
      "thumb meta  add   arrow";
  }
  /* ボタンが無い商品は add 列を meta に返す (列数を揃えないと areas が無効になる) */
  #tab-published #publishedList > .product-accordion .product-accordion-head:not(:has(.acc-add-all)) {
    grid-template-areas:
      "thumb title title arrow"
      "thumb meta  meta  arrow";
  }
  /* 窓の下ではなく行の中に戻るので、行の中で縦中央・左に 8px の間を取る */
  #tab-published #publishedList > .product-accordion .acc-add-all {
    align-self: center;
    margin-left: 8px;
  }
}

/* --- R1-c. その他シートの遷移先で本文の行長が伸びきる (Art F7) ---------------
   Priority 4 で外側のカードを外したぶん、本文が panel の幅いっぱいまで
   伸びるようになった。**実測 (probe-r1.js @1024)**:

     画面        Before   After(R1前)   1 行あたり
     準備する     —        927〜961px    77〜80 字
     保存・復元   923px    961px         77 → 80 字

   Before から既に長かったので **Phase 295 の退行ではない**が、日本語の
   快適な行長は 40〜45 字で、80 字は倍近い。Priority 4 で触った画面なので
   ここで揃える (夜間指示の「optical sizing」に当たる)。

   ⚠️ px ではなく em で持つ。12px の注記も 14.4px のリード文も
      **同じ「44 字」** になる (px で書くと文字サイズごとに行長が変わる)。
   ⚠️ max-width は縮める方向にしか効かないので、狭い幅では何も起きない。
      幅の指定・中央寄せ・text-align は足していない (寄せ方は変えない)。 */
#tab-preparations .p30-note,
#tab-preparations .p30-countdown,
#tab-backup p {
  max-width: 44em;
}

/* --- R1-d. 探すの子カードで CTA と本文が同時に壊れる (overflow) ------------
   **実測 (1024px)**: `.card-actions` が left 549 / right 1057〜1269 に対し
   親カードは right 960。カードは `overflow-x: hidden` なので、はみ出した
   **「すでに応募済み？」が切れて押せない** (可視判定 false)。
   同時に、文字側の `.meta-row.pcard-brief` が幅 0 まで潰れ、その中の
   `.offer-note` が **16px 幅 x 562px 高** になって
   「(販売単位は案内メールで要確認)」が読めなくなっていた。
   **Before / After で同数の既存バグ**で Phase 295 の退行ではないが、
   操作できない要素と読めない文字があるので直す。

   原因: `.card-top` は `flex-wrap: nowrap`、文字側の列は `flex: 1 1 0%`
   (basis 0)、CTA 側は Phase 256-D が「子を縮ませない」ために付けた
   `flex: none` (= max-content 固定)。**行はそもそも溢れないので wrap は
   発動せず、代わりに文字側が 0px まで潰れる**。CTA は max-content のまま
   親を突き抜け、カードの overflow:hidden に切られる。

   ⚠️ 最初は CTA 側へ `flex: 0 1 auto; min-width: 0` を当てて wrap を
      効かせようとしたが **足りなかった** (basis 0 の列がある限り行は溢れない)。

   正しい直し方は 430px 以下で既に動いている方式をそのまま広げること:
   **CTA を独立した 1 行にする**。行が 2 段になるので文字側は幅を取り戻し、
   CTA も自然な幅のまま並ぶ。幅の条件を外すだけで新しい仕組みは増えない。 */
#publishedList > .product-accordion .product-child-card .card-top { flex-wrap: wrap; }
#publishedList > .product-accordion .product-child-card .card-actions {
  width: 100%;
  margin-top: var(--ad-s2);
}

/* --- R1-e. 窓とカードが同じ角丸で「枠の中の枠」になっている (Art F3) --------
   窓 (窪) がカード (紙) と同じ `--a-r: 10px` で、間隔は 8px しかない。
   **同じ半径の角丸長方形が 8px 差で二重になる**ので、窓が「マット (額装の
   切り抜き)」ではなく「小さいカード」に見える = 表 1 が禁じた枠の中の枠。

   額装のマットは切り抜きなので角が立っている。窓だけ索引タグの角
   (`--a-r-tag: 3px`) にして、丸みの階層を「紙 10px > 窓 3px」に分ける。
   これで同心の二重長方形が消え、窓が紙に空いた穴として読める。

   ⚠️ 半径以外 (面・内側の罫・寸法・padding) は変えていないので、
      Priority 2 の実測 (窓 96x88 / 描画 68.6x80、desktop 104x96) は不変。
   ⚠️ 気に入らなければ 1 行戻すだけで済む (可逆)。 */
#tab-published #publishedList > .product-accordion .product-accordion-thumb,
#tab-published #publishedList > .product-accordion .accordion-thumb {
  border-radius: var(--a-r-tag);
}

/* ===========================================================================
   Phase 299 — 公式ロゴが無い応募先のマーク (C 案: 紙に空いた穴 + 頭文字 + 方式)
   ---------------------------------------------------------------------------
   ⚠️ **偽ロゴを作らない。** ブランドを推測した図形は一切合成せず、
      頭文字と、データが既に持っている方式の語 (オンライン / 店頭 / アプリ) だけを出す。

   浮いて見えていた本当の原因は色だけではなかった。**ロゴ有無で幾何が違った**:

     箇所                       ロゴ無し (旧)        ロゴ有り
     カード内の応募先名          18x18 の丸・彩色塗り   22x18 の角丸長方形・白地
     探すの応募先サムネ          40x40 の丸           48x40 の長方形
     カレンダーの予定行          36x36 角丸 8px       36x36 角丸 8px  ← 293-B で統一済み

   カレンダーだけが既に揃っていたので、**その前例に全箇所を合わせる**。
   箱が同じなら、あとは面の違い (紙に画像 / 窪に文字) だけになり、行が乱れない。
   =========================================================================== */

/* --- 1. ロゴ無しの見た目: 窪 + 罫 1 本。色相を持たない ---------------------- */
.rt-badge.rt-fallback-mark {
  flex-direction: column;
  gap: 0;
  background: var(--a-plate);
  color: var(--a-ink-2);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
  border-radius: var(--a-r-tag);   /* 丸をやめる = 「これはロゴではない」 */
  overflow: hidden;
}
.rt-badge.rt-fallback-mark .rt-ini {
  font-weight: 700;
  line-height: 1;
  color: var(--a-ink);
  letter-spacing: .01em;
}
/* 方式の語は既定で隠す。**大きい箱でだけ**出す (下の 2/3 で解禁) */
.rt-badge.rt-fallback-mark .rt-kind { display: none; }

/* --- 2. ロゴ有無で箱を揃える ------------------------------------------------
   ⚠️ `.rt-badge.has-image { width: 22px; height: 18px }` (8882 行) が
      後方にあるため、ここで両者を同じ値へ揃え直す。 */
.rt-badge,
.rt-badge.has-image,
.rt-badge.rt-fallback-mark {
  width: 20px;
  height: 20px;
  border-radius: var(--a-r-tag);
}
.rt-badge.rt-fallback-mark .rt-ini { font-size: 10px; }
/* 画像側も同じ箱・同じ面へ。白の塗りではなく紙 (未読込のときに白い四角が出ない) */
.rt-badge.has-image {
  background: var(--a-paper);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
  overflow: hidden;
}
.rt-badge.has-image img { background: none; padding: 1px; }

/* --- 3. 探すの応募先サムネ (40px 相当) — ここで方式の語を出す ---------------- */
.thumb-badge .rt-badge,
.thumb-badge .rt-badge.has-image,
.thumb-badge .rt-badge.rt-fallback-mark {
  width: 48px;
  height: 44px;
  border-radius: var(--a-r-tag);
}
.thumb-badge .rt-badge.rt-fallback-mark { gap: 2px; }
.thumb-badge .rt-badge.rt-fallback-mark .rt-ini { font-size: 16px; }
.thumb-badge .rt-badge.rt-fallback-mark .rt-kind {
  display: block;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--a-ink-3);
}
.thumb-badge .rt-badge.has-image img { padding: 3px; }

/* --- 4. 応募先一覧の見出し -------------------------------------------------- */
.retailer-head-main .rt-badge,
.retailer-head-main .rt-badge.has-image,
.retailer-head-main .rt-badge.rt-fallback-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--a-r-tag);
}
.retailer-head-main .rt-badge.rt-fallback-mark .rt-ini { font-size: 15px; }
.retailer-head-main .rt-badge.rt-fallback-mark .rt-kind {
  display: block; font-size: 7.5px; font-weight: 500; line-height: 1;
  margin-top: 2px; color: var(--a-ink-3);
}

/* --- 5. カレンダーの予定行 (293-B が 36x36 に揃えた箱をそのまま使う) --------- */
.month-event .rt-badge.rt-fallback-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--a-plate);
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(31, 50, 57, 0.12);
  color: var(--a-ink);
}
.month-event .rt-badge.rt-fallback-mark .rt-ini { font-size: 14px; }
.month-event .rt-badge.rt-fallback-mark .rt-kind {
  display: block; font-size: 7px; font-weight: 500; line-height: 1;
  margin-top: 1px; color: var(--a-ink-3);
}
@media (max-width: 380px) {
  /* 320px は箱が小さいので語を落とし、頭文字だけにする (潰れた語を出さない) */
  .month-event .rt-badge.rt-fallback-mark .rt-kind { display: none; }
  .month-event .rt-badge.rt-fallback-mark .rt-ini { font-size: 15px; }
}

/* --- Phase 299 追補: 探すのサムネで fallback もロゴと同寸にする ---------------
   Phase 295 は `.thumb-badge .rt-badge.has-image` だけを 60x60 にし、fallback は
   小さいままにしていた。理由はコメントに残っている ——
   **「頭文字 fallback は色の付いた円なので、大きくすると世界の中で一番強い色になる」**。
   C 案で **fallback から色相を外した**ので、この前提はもう成り立たない。
   小さいままにしておくと逆に「ロゴがある店だけ大きい」という格差が残り、
   行の中で箱が揃わない (実測: fallback 48x48 / logo 60x60)。同じ体系へ揃える。
   ⚠️ ID 詳細度で書かれた 295 のルールに勝つため、同じ詳細度で書く。 */
#tab-published #publishedList > .product-accordion .thumb-badge .rt-badge.rt-fallback-mark {
  width: 60px;
  height: 60px;
}
#tab-published #publishedList > .product-accordion .thumb-badge .rt-badge.rt-fallback-mark .rt-ini { font-size: 20px; }
#tab-published #publishedList > .product-accordion .thumb-badge .rt-badge.rt-fallback-mark .rt-kind { font-size: 9px; }

/* ===========================================================================
   Phase 298 — sourceEvent: 1 応募イベントの中の排他的な選択肢
   ---------------------------------------------------------------------------
   Phase 295 で決めた面の言語に合わせる。**3 枚の大型カードへは戻さない。**
     群       … 紙 1 枚 (--a-paper)。実体は「1 つの応募イベント」なので紙は 1 枚
     選択肢   … 紙の中の **行**。行を紙にしない (= 枠の中の枠を作らない)
     区切り   … 罫 1 本 (--a-rule-soft)。面を足さない
     「1つだけ」… 灯 (--a-glow-*) を **画面に 1 つだけ**。他の警告色を増やさない
     購入期間 … ②③ の唯一の違いなので、位置を揃えて 1 段濃くする

   ⚠️ 応募 CTA は群に 1 つ。行には置かない (3 つ並べない)。
   ⚠️ sourceEvent を持たないレコードにはこのブロックは一切当たらない。
   =========================================================================== */
.se-group {
  background: var(--a-paper);
  border-radius: var(--a-r);
  box-shadow: inset 0 0 0 1px var(--a-rule-soft);
  padding: var(--a-gap-m);
  margin: 0 0 var(--a-gap-s);
}
.se-head { display: grid; gap: 4px; }
.se-retailer {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--a-ink-3);
}
.se-name {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--a-ink);
  text-wrap: pretty;
}
/* 灯 = このイベントで唯一強調したい事実。塗りではなく面 + インクで持つ
   (塗りは「行動」だけの権利。ここは状態なので --a-glow-bg / --a-glow-ink) */
.se-badge {
  margin: 6px 0 0;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--a-glow-bg);
  color: var(--a-glow-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.se-note-full {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--a-ink-2);
  max-width: 44em;
}
.se-rows { list-style: none; margin: var(--a-gap-s) 0 0; padding: 0; }
/* 行は紙にしない。罫 1 本だけで切る */
.se-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label act" "facts act";
  align-items: center;
  column-gap: var(--a-gap-s);
  row-gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--a-rule-soft);
}
.se-row-label {
  grid-area: label;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--a-ink);
  line-height: 1.45;
}
.se-row-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 12px;
  color: var(--a-ink-3);
}
.se-row-price { font-weight: 700; color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
/* ②③ の違いはここだけなので、メタの中で 1 段濃くして拾いやすくする */
.se-row-buy { color: var(--a-ink); font-variant-numeric: tabular-nums; }
.se-row-buy-key { color: var(--a-ink-3); margin-right: 4px; font-weight: 400; }
.se-row-act { grid-area: act; justify-self: end; }
.se-row-act .star-action { white-space: nowrap; }
.se-cta {
  margin-top: var(--a-gap-m);
  padding-top: var(--a-gap-s);
  border-top: 1px solid var(--a-rule-soft);
  display: flex;
  justify-content: flex-end;
}
/* 群にできないとき (商品別モード等) にカードへ出す注記。
   ⚠️ 警告色を増やさないため、灯ではなく中立のインクで持つ。
      「1 画面 1 灯」は群の badge が使っている */
.se-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--a-glow-ink);
}
.se-note-mark { font-size: 11px; }

/* 320px: 操作を行の下へ回す (横に並べると選択肢名が潰れる) */
@media (max-width: 360px) {
  .se-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "facts" "act";
    row-gap: 6px;
  }
  .se-row-act { justify-self: start; }
}

/* 折りたたみ状態の「◯つから1つ」印。展開後の灯バッジと同じ色価にして
   **同じことを言っている**と分かるようにする (別の色を増やさない) */
.acc-tag.acc-tag-choice {
  background: var(--a-glow-bg);
  color: var(--a-glow-ink);
  font-weight: 700;
}

/* ===========================================================================
   Phase 298 R2 — sourceEvent の視覚調整 (機能・データ構造は変えない)
   ---------------------------------------------------------------------------
   実測 (scratch/p298/probe-visual.js @390px) で 3 つの問題が出た:

   1. **枠の中の枠**: `.se-group` の面が rgb(252,251,247) で、親 `.product-accordion`
      と **完全に同色**。面が変わらないのに輪郭 (inset 1px) だけがある =
      「紙の上に、同じ紙の輪郭だけを描いた」状態。表 1 が禁じた形そのもの
   2. **CTA が rgb(13,62,66)** = 293-B の色価表の外に取り残されていた旧「濃緑」。
      高さ 28px でタップ目標も下回る
   3. **行のボタンが rgb(255,255,255) の 999px ピル ×3** = トークンに無い白。
      これが「白カード乱立」に見える正体 (紙は #fcfbf7 で白ではない)

   方針: **群を「カード」から「紙の上の一節」へ落とす。**
     群       … 面を持たない。罫と余白だけで区切る (親の紙をそのまま使う)
     排他の告知 … 窪 + 灯のインク + 灯の罫 1 本 (面は増やすが色は増やさない)
     選択肢   … 紙の上の行。①②③ をぶら下げインデントで数字の列にする
     行動     … 群の足に **灯の塗り 1 つだけ** (アプリで唯一の塗り = 293-B の規則)
   =========================================================================== */

/* --- R2-a. 群はカードをやめる (枠の中の枠を消す) --------------------------- */
.se-group {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 2px 0 6px;
}

/* --- R2-b. 見出しの階層: 索引 → 題 → 灯の告知 ------------------------------ */
.se-head { display: block; }
/* 応募先名は親のアコーディオン見出しと重複するので、索引 (eyebrow) まで落とす */
.se-retailer {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  color: var(--a-ink-3);
  margin: 0 0 3px;
}
.se-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--a-ink);
  margin: 0;
  text-wrap: pretty;
}

/* 排他の告知は 2 要素 (.se-badge / .se-note-full) が同じことを言っていたので、
   **1 つの窪の帯**として繋げる。塗りは使わず、灯は罫とインクで持つ
   (塗りは行動の権利。ここは状態なので面は窪) */
.se-badge,
.se-note-full {
  background: var(--a-plate);
  border-left: 2px solid var(--a-glow-fill);
  border-radius: 0;
  margin: 0;
  width: 100%;
}
.se-badge {
  margin-top: 10px;
  padding: 9px 12px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-glow-ink);
  display: block;
}
.se-note-full {
  padding: 0 12px 9px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--a-ink-2);
  max-width: none;
}

/* --- R2-c. 選択肢は「紙の上の行」------------------------------------------ */
.se-rows { margin-top: 2px; }
.se-row {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--a-gap-s);
  row-gap: 3px;
  padding: 11px 0 12px;
  border-top: 1px solid var(--a-rule-soft);
}
/* ①②③ をぶら下げて **数字の列**にする。折り返した 2 行目は文字に揃う
   (DOM は変えられないので、字下げで列を作る) */
.se-row-label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--a-ink);
  text-indent: -1.45em;
  padding-left: 1.45em;
}
/* 事実は 2 列に固定して、**購入期間の位置を行ごとに完全に揃える**。
   ②③ の違いはここだけなので、視線が縦に落ちるようにする */
.se-row-facts {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  align-items: baseline;
  gap: 0 10px;
  padding-left: 1.45em;
  font-size: 12px;
}
/* 価格は ②③ で同一 = 区別に使えないので静かに。購入期間を 1 段強くする */
.se-row-price { font-weight: 400; color: var(--a-ink-3); }
.se-row-buy { font-weight: 700; color: var(--a-ink); letter-spacing: .01em; }
.se-row-buy-key { font-weight: 400; color: var(--a-ink-3); margin-right: 5px; }

/* 行の操作は「輪郭だけ」(293-B: 副次の操作)。白い塗りをやめ、幅を揃えて
   3 つが乱立ではなく 1 本の列に見えるようにする */
.se-row-act .star-action {
  background: none;
  border: 1px solid var(--a-rule);
  border-radius: var(--a-r-tag);
  color: var(--a-ink-2);
  font-size: 12px;
  font-weight: 500;
  min-height: 36px;
  min-width: 92px;
  padding: 0 10px;
  justify-content: center;
}
.se-row-act .star-action:hover,
.se-row-act .star-action:focus-visible {
  background: var(--a-hover);
  border-color: var(--a-ink);
  color: var(--a-ink);
}
.se-row-act .added-note { font-size: 12px; color: var(--a-ink-3); }

/* --- R2-d. 行動は群の足に 1 つだけ。アプリで唯一の塗り (灯) ----------------- */
.se-cta {
  margin-top: var(--a-gap-s);
  padding-top: 0;
  border-top: 0;
}
/* ⚠️ `a.icon-link.apply-primary` (0,2,1) が濃緑 #0d3e42 と 999px を持っているので、
   同等以上の詳細度で書かないと勝てない (最初 .se-cta .apply-primary = 0,2,0 で書いて
   background/radius/padding が一切効かなかった)。 */
.se-cta a.icon-link.apply-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  background: var(--a-glow-fill);
  border: 1px solid var(--a-glow-fill);
  border-radius: var(--a-r-tag);
  box-shadow: none;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.se-cta a.icon-link.apply-primary:hover,
.se-cta a.icon-link.apply-primary:focus-visible {
  background: var(--a-glow-ink);
  border-color: var(--a-glow-ink);
}

/* 320px: 操作を行の下へ回す指定は既存のまま。事実の 2 列だけ 1 列へ落とす */
@media (max-width: 360px) {
  /* ⚠️ 事実は 320px でも **2 列のまま**にする。1 列に落とすと行が 20px 高くなるうえ、
     ②③ の唯一の違いである購入期間の縦の揃いが崩れる (実測: 内容幅 247px に対し
     4.6em + 10 + 134 = 199px なので 2 列で収まる)。折り返すのは操作だけ。 */
  .se-row-facts { grid-template-columns: 4.4em minmax(0, 1fr); gap: 0 8px; }
  .se-row-act { justify-self: start; padding-left: 1.45em; }
  .se-row-act .star-action { min-width: 0; padding-left: 0; }
}

/* --- R2-e. 行の操作を「輪郭のチップ」から「行内の操作」へ -------------------
   同じ輪郭の箱が右に 3 つ縦に並ぶと、それだけで設定画面の見た目になる
   (ユーザー指摘の「SaaS 表っぽさ」)。探すの他の行が既に使っている
   `.text-action` (「すでに応募済み？」) と同じ **輪郭を持たない行内操作**へ寄せる。
   ⚠️ 押せることは形ではなく位置と hover で伝える。タップ目標は 36px を維持。 */
.se-row-act .star-action {
  border: 0;
  background: none;
  color: var(--a-ink-3);
  font-weight: 700;
  min-width: 0;
  padding: 0 4px;
}
.se-row-act .star-action:hover,
.se-row-act .star-action:focus-visible {
  background: var(--a-hover);
  border: 0;
  color: var(--a-ink);
}

/* --- R2-f. CTA の面積を落とす ----------------------------------------------
   全幅の塗りは、静かな紙と罫の中で画面いちばん強い塊になってしまう。
   **塗り自体は 293-B の規則どおり残す** (行動はアプリで唯一の塗り) が、
   幅を内容ぶんにして右へ寄せ、質量だけを下げる。 */
.se-cta { justify-content: flex-end; }
.se-cta a.icon-link.apply-primary {
  width: auto;
  min-width: 0;
  padding: 0 22px;
}

/* ===========================================================================
   Phase 301 — 受取の「ネット / 店舗」2 トグル
   ---------------------------------------------------------------------------
   ユーザーが覚える概念は **2 つだけ**。「すべて」は作らない (両方 ON がそれ)。

   期間フィルタ (.phase-chip) は **単一選択**、こちらは **複数選択**。
   同じ見た目にすると「1 つしか選べない」と誤解されるので、
   **チェックの有無**で複数選択だと伝える (色相は増やさない)。

     ON  … 窪 (--a-plate) + 墨 + ✓        = 「これは今 見えている」
     OFF … 面なし + 罫 1 本 + --a-ink-3   = 「これは今 隠している」
   =========================================================================== */
.channel-filter {
  display: flex;
  gap: 6px;
  align-items: center;
}
.channel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--a-rule);
  border-radius: var(--a-r-tag);
  background: none;
  color: var(--a-ink-3);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--a-dur, .15s) var(--a-ease, ease), color var(--a-dur, .15s) var(--a-ease, ease);
}
.channel-toggle .ch-check {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  opacity: 0;              /* OFF でも幅を保ち、切り替えで文字が動かない */
}
/* ON。⚠️ 塗りで主張しない — 選択は「墨の罫」で表す (受付中チップと同じ語彙)。
   以前は面を --a-plate (247) にしていたが、地 (243) と 4 しか離れず、
   しかも未選択の期間チップの面 (252) より暗いため「選ばれていない側」に見えていた。
   面は紙 (252) へ一段上げ、罫を墨の実線にして、✓ と合わせて 3 つの手がかりにする。
   新しい色相は足していない。 */
.channel-toggle.is-on {
  background: var(--a-paper);
  border-color: var(--a-ink);
  box-shadow: inset 0 0 0 1px var(--a-ink);
  color: var(--a-ink);
  font-weight: 700;
}
.channel-toggle.is-on .ch-check { opacity: 1; }
.channel-toggle:hover { background: var(--a-hover); color: var(--a-ink); }
.channel-toggle:focus-visible { outline: 2px solid var(--a-sky-ink); outline-offset: 2px; }

/* トグルの下の補足。⚠️ 主役はトグルなので、これは補助情報として弱く置く —
   面も罫も持たせず、文字を一段小さく・一段淡くするだけ。
   ⚠️ 「応募方法」ではなく「最後に来店が要るか」で分けている、と読ませる文言。 */
.channel-note {
  /* ⚠️ 親が gap 8px を持っているので margin-top を足すと、補足文が「上のトグル」より
     「下の検索」に近くなる (実測 上 13px / 下 8px = 近接が逆)。上は親の gap に任せ、
     下だけ足して「この文はトグルの説明」と近接で読ませる。 */
  margin: 0 0 6px;
  padding: 0;
  color: var(--a-ink-3);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 44em;
}
/* ⚠️ 日本語は語中どこでも折れるので、素のままだと「受 / 取に来店が必要」と割れる。
   意味のかたまりごとに inline-block にして、かたまりの内側で折れないようにする。 */
.channel-note > span { display: inline-block; }
.channel-note .cn-sep { white-space: pre; }

/* 320px: 期間フィルタと同じ行に入らないので折り返す */
@media (max-width: 380px) {
  .channel-toggle { padding: 0 10px; font-size: 12px; }
  .channel-note { font-size: 11px; }
}

/* ===========================================================================
   Phase 335: 探す — 範囲 (未応募のみ / 追跡対象だけ) で隠れている抽選の理由と件数
   見た目は地域の .region-hidden-note をそのまま使う (同じクラスを併記)。ここは一覧との間隔と
   狭い幅での折り返しだけを足す。色・面は増やさない
   =========================================================================== */
.scope-hidden-note {
  margin: 8px 0 10px;
  padding: 6px 10px 6px 12px;
  gap: 2px 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.scope-hidden-note .scope-hidden-text { min-width: 0; }
.scope-hidden-note .scope-hidden-chunk { display: inline-block; }
/* 行内の小さなリンクにする (既存 .link-button の 44px タップ領域は高さだけ 32px へ。1 行に収めてうるさくしない) */
.scope-hidden-note .link-button {
  min-height: 32px;
  padding: 4px 2px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ==========================================================================
   Phase 346: 時間中心の表示 — 残り時間 / 時刻未確認 / HOME の「今日」パルス
   煽らない: 赤の点滅・大きな警告色は使わず、本日締切だけ既存の強調色で一段上げる
   ========================================================================== */
.pcard-remain {
  display: inline-block;
  margin-left: 6px;
  color: #49687a;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pcard-remain.is-unknown { color: var(--muted); font-weight: 600; }
.deadline-today-card .pcard-remain:not(.is-unknown) { color: #a14a2a; }
.ad-remain { font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }

.today-pulse {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 14px;
}
.tp-cell {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e3e8ec;
  border-radius: 14px;
  background: #fffdf8;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tp-cell:focus-visible { outline: 2px solid #0d3e42; outline-offset: 2px; }
.tp-label { font-size: 11px; font-weight: 800; color: #49687a; }
.tp-num { font-size: 22px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tp-num small { margin-left: 2px; font-size: 11px; font-weight: 700; }
.tp-sub { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.tp-main.is-hot { border-color: #e7c9a4; background: #fff6ea; }
.tp-main.is-hot .tp-num { color: #a14a2a; }
.tp-next { font-weight: 700; color: #a14a2a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-warn { margin-top: 2px; font-size: 11px; font-weight: 700; color: #8a5a10; }
@media (max-width: 480px) {
  .today-pulse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tp-main { grid-column: 1 / -1; }
}
.pcard-dupwarn { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #8a5a10; line-height: 1.4; }

/* Phase 351: 継続受付 (締切が無いのが正常な招待リクエスト型)。警告色にしない */
.pcard-deadline.dl-ongoing { background: #5b7f8a; }
.ps-more.ps-ongoing { border-style: solid; color: #49687a; }

/* ==========================================================================
   Phase 354: 速報・確認中 (一次未確認)。通常のカードと見分けがつくよう破線・淡い琥珀、
   ただし警告色で煽らない。応募・管理ボタンは置かない
   ========================================================================== */
.tp-alerts {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 4px 10px;
  border: 1px dashed #d9b77a;
  border-radius: 999px;
  background: transparent;
  color: #8a5a10;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.alerts-host { margin: 8px 0 12px; }
.alerts-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed #d9b77a;
  border-radius: 12px;
  background: #fffaf0;
  color: #6b4a12;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}
.alerts-toggle small { color: var(--muted); font-size: 11px; }
.alerts-caret { margin-left: auto; font-size: 11px; font-weight: 700; }
.alerts-note { margin: 8px 2px; font-size: 11px; color: var(--muted); }
.alerts-list { display: grid; gap: 8px; }
.alert-card {
  padding: 10px 12px;
  border: 1px dashed #d9b77a;
  border-radius: 12px;
  background: #fffdf7;
  min-width: 0;
}
.alert-card.is-notice { border-color: #b9c9d4; background: #f8fbfd; }
.alert-tag { margin: 0 0 4px; font-size: 11px; font-weight: 800; color: #8a5a10; }
.alert-card.is-notice .alert-tag { color: #3e6a82; }
.alert-store { margin: 0; font-size: 12px; font-weight: 700; color: #49687a; }
.alert-products { margin: 2px 0 6px; font-size: 14px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.alert-dates { margin: 0; display: grid; gap: 2px; font-size: 12px; }
.alert-dates div { display: flex; gap: 8px; }
.alert-dates dt { flex: 0 0 5.5em; color: var(--muted); }
.alert-dates dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.alert-conds, .alert-meta, .alert-src { margin: 6px 0 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.alert-src a { color: #3e6a82; }
.alert-apply { margin-left: 6px; font-weight: 700; }

/* ==========================================================================
   Phase 356: 速報を通常の一覧に混ぜたときのカード。canonical のカードと同じ幅・同じ締切チップで並べ、
   破線の琥珀枠と上端のバッジで「一次情報確認中」だと一目で分かるようにする (煽らない)
   ========================================================================== */
.alerts-count-note { margin: 4px 2px 10px; font-size: 12px; color: var(--muted); }
.alerts-count-badge { display: inline-block; padding: 1px 8px; border: 1px dashed #d9b77a; border-radius: 999px; color: #8a5a10; background: #fffaf0; }
.acc-tag.acc-tag-alert { border: 1px dashed #d9b77a; background: #fffaf0; color: #8a5a10; }
.alert-timeline-card {
  position: relative;
  border: 1.5px dashed #d9b77a !important;
  background: #fffdf6 !important;
  padding: 10px 12px 12px;
}
.alert-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fbefd6;
  color: #7a4e0c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.alert-tl-body { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.alert-tl-img { flex: 0 0 76px; width: 76px; height: 88px; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.alert-tl-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: saturate(.92); }
.alert-tl-main { flex: 1; min-width: 0; }
.alert-tl-store { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #49687a; }
.alert-tl-name { margin: 2px 0 6px; font-size: 15px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.alert-tl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.alert-cta { font-size: 13px; }
.alert-cta-note { flex-basis: 100%; font-size: 11px; color: #8a5a10; }
.alert-cta-pending {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px dashed #c9b28a; border-radius: 999px; color: #7a6a52; font-size: 12px; font-weight: 700; background: #fff;
}
.star-action.is-on { color: #8a6a1f; border-color: #d8b96f; background: #fbf5e6; }
.tp-alert-today { margin-top: 2px; font-size: 11px; font-weight: 700; color: #8a5a10; }
.alerts-toggle.is-notice { border-color: #b9c9d4; background: #f8fbfd; color: #3e6a82; }
/* Phase 356 追補: 既存カードのグリッド / 絶対配置を継がない (バッジが縦に潰れ、締切チップが残り時間と重なっていた) */
.published-card.alert-timeline-card { display: block !important; grid-template-columns: none !important; }
.alert-timeline-card > .alert-badge { position: static; width: auto; writing-mode: horizontal-tb; }
.alert-timeline-card .alert-tl-main .pcard-deadline { position: static !important; display: inline-block; margin: 0 6px 0 0; transform: none; }
.alert-timeline-card .alert-tl-main .pcard-remain { margin-left: 0; }
.alert-timeline-card .alert-cta {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border-radius: 999px; background: #0d3e42; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.alert-timeline-card .alert-cta:focus-visible { outline: 2px solid #d8b96f; outline-offset: 2px; }
/* 長い CTA 文言が一覧の幅を押し広げない (320px で 3px はみ出していた) */
.alert-timeline-card .alert-cta { white-space: normal; max-width: 100%; text-align: left; line-height: 1.3; padding-block: 8px; }
.alert-timeline-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* ============================================================
   Phase 359: 次のアクション (当選・受取) を 1 枠で入れ替え + あとで / × + 期限間近のリマインダー
   ============================================================ */
/* .ad-next は横並び flex (画像 | 本文)。ツール行だけ 1 行目を全幅で使い、画像と本文は 2 行目に従来どおり並ぶ */
#nextActionHost .nac-primary.ad-next { flex-wrap: wrap; row-gap: 8px; }
.nac-tools { position: relative; flex: 0 0 100%; display: flex; align-items: center; gap: 6px; margin: -6px -6px 0; min-width: 0; }
#nextActionHost .nac-primary.ad-next > .ad-next-body { flex: 1 1 0; min-width: 0; }
.nac-tools-sp { flex: 1; }
.nac-pager { display: inline-flex; align-items: center; gap: 2px; }
.nac-nav-btn, .nac-later, .nac-close {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px;
  border: 1px solid rgba(62, 85, 104, .18); background: rgba(255, 255, 255, .7);
  color: #3e5568; font-size: 13px; font-weight: 700; cursor: pointer;
}
.nac-nav-btn { font-size: 17px; line-height: 1; padding: 0; }
.nac-close { font-size: 15px; padding: 0; }
.nac-nav-btn:focus-visible, .nac-later:focus-visible, .nac-close:focus-visible { outline: 2px solid #3e5568; outline-offset: 2px; }
.nac-pos { min-width: 38px; text-align: center; font-size: 12px; color: #5f6d79; font-variant-numeric: tabular-nums; }
.nac-snooze-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; gap: 4px;
  min-width: 190px; padding: 6px; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 24px rgba(31, 51, 64, .18); border: 1px solid rgba(62, 85, 104, .14);
}
.nac-snooze-menu[hidden] { display: none; }
.nac-snooze-menu button { padding: 9px 10px; border: 0; border-radius: 8px; background: #f3f6f5; color: #34475a; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.nac-snooze-menu button:hover { background: #e7eeec; }
.nac-snooze-note { padding: 4px 8px 2px; font-size: 11.5px; color: #a4433d; }
.nac-reminder {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 12px;
  background: #fff6ee; color: #7a3e1c; font-size: 12.5px; font-weight: 600;
}
.nac-reminder span { flex: 1; min-width: 0; }
.nac-reminder-btn { flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid #d8a47a; background: #fff; color: #7a3e1c; font-size: 12px; font-weight: 700; cursor: pointer; }

/* ============================================================
   Phase 359: Motion Promo Card (PR カードの中だけ・0.6〜1.0 秒・1 回)
   - 動かすのは transform / opacity / background-position だけ (レイアウトは変えない = CLS 0)
   - .is-promo-play は JS (bindPromoMotion) が「画面に 6 割以上・250ms」で 1 回だけ付ける
   ============================================================ */
.supply-card[data-promo-motion] { position: relative; overflow: hidden; isolation: isolate; }
.supply-card[data-promo-motion] > * { position: relative; z-index: 1; }
.supply-card[data-promo-motion] > .promo-fx { position: absolute; z-index: 2; pointer-events: none; opacity: 0; }
/* foil: カード全体をホロの帯が一度横切り、商品がわずかに傾く */
.supply-card[data-promo-motion="foil"] > .promo-fx {
  inset: 0; z-index: 0; /* 文字の後ろを走らせる (本文は読めたまま・カードの地だけが光る) */
  /* 明るいカード地でも見えるよう、白い芯 + 金・水色・桃のホロ帯 (合成モードは使わない) */
  background: linear-gradient(112deg, transparent 36%, rgba(255, 214, 120, .32) 42%, rgba(255, 255, 255, .9) 48%,
    rgba(150, 215, 255, .38) 53%, rgba(255, 160, 215, .32) 57%, transparent 63%);
  background-size: 260% 100%;
  background-position: 130% 0;
}
.supply-card[data-promo-motion="foil"].is-promo-play > .promo-fx { animation: promo-foil 1s cubic-bezier(.45, 0, .25, 1) 1 both; }
.supply-card[data-promo-motion="foil"].is-promo-play > .supply-icon { animation: promo-tilt 1s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes promo-foil { 0% { opacity: 0; background-position: 130% 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes promo-tilt { 0% { transform: perspective(300px) rotateY(0); } 40% { transform: perspective(300px) rotateY(-16deg) translateY(-2px); } 75% { transform: perspective(300px) rotateY(6deg); } 100% { transform: none; } }
/* spark: アイコンの右上で八芒星が光り、商品が浮く */
.supply-card[data-promo-motion="spark"] > .promo-fx { left: 32px; top: 4px; width: 18px; height: 18px; color: #d8b96f; }
.supply-card[data-promo-motion="spark"] > .promo-fx svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 4px rgba(232, 200, 116, .9)); }
.supply-card[data-promo-motion="spark"].is-promo-play > .promo-fx { animation: promo-spark .8s cubic-bezier(.2, .8, .2, 1) 1 both; }
.supply-card[data-promo-motion="spark"].is-promo-play > .supply-icon { animation: promo-float .8s cubic-bezier(.3, .7, .3, 1) 1; }
@keyframes promo-spark { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 35% { opacity: 1; transform: scale(1.25) rotate(15deg); } 70% { opacity: 1; transform: scale(.9) rotate(35deg); } 100% { opacity: 0; transform: scale(.6) rotate(45deg); } }
@keyframes promo-float { 0% { transform: none; } 45% { transform: translateY(-4px); } 100% { transform: none; } }
/* comic: アイコンの後ろに小さな網点のバースト (カードの中だけ) */
.supply-card[data-promo-motion="comic"] > .promo-fx {
  left: 3px; top: 3px; width: 48px; height: 48px; z-index: 0;
  background: radial-gradient(circle, rgba(31, 51, 64, .22) 1.1px, transparent 1.5px) 0 0 / 5px 5px, #ffedb8;
  clip-path: polygon(50% 0%, 61% 22%, 86% 10%, 78% 36%, 100% 44%, 79% 58%, 90% 86%, 63% 76%, 50% 100%, 37% 76%, 10% 86%, 21% 58%, 0% 44%, 22% 36%, 14% 10%, 39% 22%);
}
.supply-card[data-promo-motion="comic"].is-promo-play > .promo-fx { animation: promo-burst .9s cubic-bezier(.2, 1.4, .3, 1) 1 both; }
.supply-card[data-promo-motion="comic"].is-promo-play > .supply-icon { animation: promo-pop .9s cubic-bezier(.2, 1.4, .3, 1) 1; }
@keyframes promo-burst { 0% { opacity: 0; transform: scale(.2) rotate(-20deg); } 30% { opacity: 1; transform: scale(1.08) rotate(4deg); } 75% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(.96); } }
@keyframes promo-pop { 0% { transform: scale(1); } 28% { transform: scale(1.18) rotate(-4deg); } 55% { transform: scale(.96); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .supply-card[data-promo-motion] > .promo-fx, .supply-card[data-promo-motion] > .supply-icon { animation: none !important; }
}
/* 「あとで再表示 ▾」は折り返さない。320px 幅ではツール行を少し詰める */
.nac-later { white-space: nowrap; }
@media (max-width: 374px) {
  .nac-tools { gap: 4px; }
  .nac-nav-btn { min-width: 28px; height: 30px; }
  .nac-pos { min-width: 30px; font-size: 11.5px; }
  .nac-later { padding: 0 7px; font-size: 12px; height: 30px; }
  .nac-close { min-width: 30px; height: 30px; }
}

/* Phase 362: HOME の件数・CTA から着地した見出しを 0.55 秒だけ金の輪で示す (レイアウトは変えない = box-shadow だけ) */
.nav-land { animation: nav-land .55s ease-out 1; border-radius: 12px; }
@keyframes nav-land {
  0% { box-shadow: 0 0 0 0 rgba(216, 185, 111, 0); }
  30% { box-shadow: 0 0 0 3px rgba(216, 185, 111, .75); }
  100% { box-shadow: 0 0 0 6px rgba(216, 185, 111, 0); }
}
@media (prefers-reduced-motion: reduce) { .nav-land { animation: none; } }

/* ============================================================
   Phase 396: 30th CELEBRATION カードセットの世代ラベル
   - 個別の箱絵が無い世代は共通の代表画像 (9 種の一覧) を使うので、画像の上と一覧の行に「文字で」世代を出す
   - 色は補助 (色だけに頼らない・白文字で読める濃さ)
   ============================================================ */
.entry-image, .ps-image, .alert-tl-img { position: relative; }
.cs-edition {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #0d3e42;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cs-edition-overlay {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(9, 42, 52, 0.35);
  pointer-events: none;
}
.ps-image .cs-edition-overlay,
.alert-tl-img .cs-edition-overlay { left: 2px; bottom: 2px; padding: 2px 5px; font-size: 10px; }
.cs-edition-chip { margin-left: 4px; vertical-align: middle; font-size: 10.5px; padding: 2px 7px; }
.cs-ed-kanto { background: #b23b2e; }
.cs-ed-johto { background: #8a6a12; }
.cs-ed-hoenn { background: #1f6f63; }
.cs-ed-sinnoh { background: #3a4aa5; }
.cs-ed-unova { background: #37474f; }
.cs-ed-kalos { background: #1559a8; }
.cs-ed-alola { background: #a8501a; }
.cs-ed-galar { background: #6c3a96; }
.cs-ed-paldea { background: #a42c62; }
.cs-ed-all { background: #0d3e42; }

/* ============================================================
   Phase 401: Retention PoC (記録0件の新規ユーザーだけ・非本番 host だけ)。
   要素は JS が対象端末でだけ生成する (#retentionPocHome / .rpoc-added / .fui-hint) ので、
   既存ユーザー・本番ではこのブロックは何にもマッチしない。見た目は Phase 200 の初見案内に揃える
   ============================================================ */
.rpoc-home {
  position: relative;
  margin: 4px 0 14px;
  padding: 12px 40px 12px 14px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-left: 3px solid rgba(184, 146, 60, 0.75);
  border-radius: 12px;
  background: #fbf7ee;
  color: #0d3e42;
}
.rpoc-home .rpoc-kicker {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8a6a1f;
}
.rpoc-home .rpoc-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}
.rpoc-home .rpoc-benefits {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.rpoc-home .rpoc-benefits li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
}
.rpoc-home .rpoc-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f7d57;
  font-weight: 900;
}
.rpoc-home .rpoc-benefits strong { font-size: 13px; font-weight: 800; margin-right: 6px; }
.rpoc-home .rpoc-benefits span { color: #4c6a70; }
.rpoc-home .rpoc-note { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: #5b7a80; }
.rpoc-added .rpoc-added-note {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #5b7a80;
}
.rpoc-home .rpoc-lead { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: #4c6a70; }
.rpoc-home .rpoc-cta + .rpoc-benefits { margin-top: 12px; }
.rpoc-home .rpoc-cta {
  min-height: 44px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 800;
}
.rpoc-home .rpoc-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 6px 0 0;
}
.rpoc-link {
  padding: 6px 0;
  min-height: 32px;
  border: none;
  background: none;
  color: #1f5f66;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rpoc-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #7a8f93;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rpoc-dismiss:hover { background: rgba(13, 62, 66, 0.06); }

/* マイ抽選の先頭: 「1件目を登録しました」 */
.rpoc-added {
  position: relative;
  margin: 0 0 12px;
  padding: 12px 44px 4px 14px;
  border: 1px solid rgba(47, 125, 87, 0.28);
  border-left: 3px solid #2f7d57;
  border-radius: 12px;
  background: #f1f8f3;
  color: #0d3e42;
}
.rpoc-added .rpoc-added-lead { margin: 0 0 2px; font-size: 14px; font-weight: 900; color: #2f7d57; }
.rpoc-added .rpoc-added-body { margin: 0 0 8px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.rpoc-added .rpoc-added-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.rpoc-added .rpoc-added-dates li {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(13, 62, 66, 0.12);
  font-size: 12px;
}
.rpoc-added .rpoc-added-dates b { font-size: 13.5px; font-weight: 900; }
.entry-card.rpoc-first-card { border-color: #2f7d57; box-shadow: 0 0 0 3px rgba(47, 125, 87, 0.18), 0 12px 32px rgba(23, 31, 43, 0.08); }
.first-use-intro .fui-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: #0d3e42; font-weight: 700; }

/* Phase 401: Quick Manual (19 秒の使い方動画)。poster + タイトルの facade → 押したら <video> を作る。
   動き (アニメーション・トランジション) は持たない = prefers-reduced-motion でも見た目は同じ */
.qm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}
.qm-facade { flex: 1 1 220px; min-width: 0; }
.qm-facade.is-open { flex-basis: 100%; }
.qm-play {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(13, 62, 66, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #0d3e42;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.qm-play:focus-visible { outline: 2px solid #1f5f66; outline-offset: 2px; }
.qm-poster {
  flex: 0 0 auto;
  width: 54px;
  height: 96px;
  border-radius: 6px;
  object-fit: cover;
  background: #e7efe9;
}
.qm-meta { display: grid; gap: 2px; min-width: 0; }
.qm-kicker { font-size: 12px; font-weight: 800; color: #1f5f66; }
.qm-title { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: #0d3e42; }
.qm-player { display: grid; justify-items: center; gap: 4px; }
.qm-video {
  display: block;
  width: min(100%, 300px);
  max-height: 70vh;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: #0d3e42;
}
#entryList > .qm-row { margin: 0 0 12px; }
/* Phase 401 (QA 2026-10-03): 背の低い画面 (320×568 など) でも主ボタンが下部ナビより上に入るよう、
   キッカーと一行説明を省く (利点はボタンの下のリストで読める) */
@media (max-height: 640px) {
  .rpoc-home { padding-top: 10px; }
  .rpoc-home .rpoc-kicker { display: none; } /* Phase 408: 理由の 1 行 (rpoc-lead) は小さい画面でも残す */
  .rpoc-home .rpoc-title { margin-bottom: 8px; }
}

/* Phase 405: 「使い方」ハブ (候補・HOWTO_HUB_ENABLED のときだけ JS が DOM を作る)。
   動き (アニメーション・トランジション) は持たない = prefers-reduced-motion でも同じ。動画は押したときだけ (.qm-* を流用) */
.howto-hub {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.howto-hub[hidden] { display: none; }
.howto-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(9, 42, 52, 0.42);
  cursor: pointer;
}
.howto-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border-radius: 14px 14px 0 0;
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px rgba(9, 42, 52, 0.14);
  color: #0d3e42;
}
.howto-head {
  position: sticky;
  top: -12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -14px 0;
  padding: 12px 14px 6px;
  background: #ffffff;
}
.howto-head h2 { margin: 0; font-size: 17px; font-weight: 900; }
.howto-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.howto-jump {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(13, 62, 66, 0.18);
  border-radius: 999px;
  background: #f4f8f6;
  color: #0d3e42;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.howto-note { margin: 0 0 6px; font-size: 12px; line-height: 1.55; color: #4c6a70; }
.howto-section { padding-top: 6px; scroll-margin-top: 52px; }
.howto-section h3 { margin: 10px 0 6px; font-size: 15px; font-weight: 900; }
.howto-group { margin: 8px 0 4px; font-size: 12.5px; font-weight: 800; color: #5b7a80; }
.howto-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.howto-item { min-width: 0; }
.howto-question { font-size: 13.5px; font-weight: 800; line-height: 1.4; color: #0d3e42; }
.howto-steps { margin: 4px 2px 0; font-size: 12px; line-height: 1.55; color: #4c6a70; }
.howto-related { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 0 2px; }
.howto-item .qm-player { margin-top: 6px; }
.howto-player-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin: 0; }
.howto-open-title { justify-self: stretch; margin: 0 2px 2px; font-size: 13.5px; font-weight: 800; line-height: 1.4; color: #0d3e42; }
body.howto-hub-open { overflow: hidden; }
@media (min-width: 720px) {
  .howto-hub { align-items: center; padding: 24px; }
  .howto-panel { border-radius: 14px; max-height: 86vh; box-shadow: 0 24px 60px rgba(9, 42, 52, 0.24); }
}

/* Phase 408: Retention の単純化 — 主ボタン 1 つ・動画は副ボタン (▶ + 動画 + 秒)・その場の動画モーダル・探すの 1 行案内。
   動きの指定は持たない = prefers-reduced-motion でも同じ */
.rpoc-home .rpoc-cta { display: block; width: 100%; min-height: 48px; font-size: 15px; }
.rpoc-video-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  margin: 8px 0 0;
  padding: 6px 14px;
  border: 1px solid rgba(31, 95, 102, 0.45);
  border-radius: 999px;
  background: #ffffff;
  color: #1f5f66;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rpoc-home .rpoc-video-btn { display: flex; width: 100%; }
.rpoc-video-btn:focus-visible { outline: 2px solid #1f5f66; outline-offset: 2px; }
.rpoc-home .rpoc-secondary { gap: 0 12px; margin: 6px 0 0; }
.rpoc-textlink {
  padding: 4px 0;
  border: none;
  background: none;
  color: #5b7a80;
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rpoc-added .rpoc-added-dates { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 6px; font-size: 12px; color: #34475a; }
.rpoc-added .rpoc-added-dates b { font-size: 13px; font-weight: 900; }
.rpoc-added .rpoc-video-btn { margin: 0; min-height: 36px; font-size: 12.5px; }
.rpoc-tap-hint {
  margin: 0 0 4px;
  padding: 6px 10px;
  border-left: 3px solid #b8923c;
  border-radius: 8px;
  background: #fbf7ee;
  color: #0d3e42;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.45;
}
/* 案内が「締切が近い順」を言うので、すぐ下の同じ趣旨の説明は案内が出ている間だけ省く (1 画面目に押せるカードを入れる) */
.rpoc-tap-hint + #publishedList .published-flat-hint { display: none; }
.rpoc-tap-hint-head { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 800; color: #8a6a1f; }
/* Phase 408 QA: 説明カードが出ている間 (記録0件の対象者だけ) — HOME の hero を詰め、カード下の大見出しを控えめに。
   見出し・理由・主ボタンが 1 画面目にそろって入る (320×568 でも) */
@media (max-height: 700px) {
  html.rpoc-firstrun body[data-hero-tab="dashboard"] .hero.hero-slim[data-hero-tab="dashboard"] { min-height: 0; padding-bottom: 12px; }
  html.rpoc-firstrun .hero.hero-slim[data-hero-tab="dashboard"] .portal-links,
  html.rpoc-firstrun .hero.hero-slim[data-hero-tab="dashboard"] .hero-desc { display: none; }
}
@media (max-width: 360px) {
  /* 1件目のバナーを詰めて、すぐ下のカードの「当選 / 落選」まで 1 画面に入れる */
  .rpoc-added { padding: 8px 28px 2px 12px; margin-bottom: 6px; }
  .rpoc-added .rpoc-dismiss { top: 2px; right: 0; width: 28px; height: 28px; font-size: 16px; }
  .rpoc-added .rpoc-added-lead { font-size: 12.5px; }
  .rpoc-added .rpoc-added-body { font-size: 12px; margin-bottom: 4px; }
  .rpoc-added .rpoc-added-dates { font-size: 11px; gap: 0 10px; margin-bottom: 4px; }
  .rpoc-added .rpoc-added-dates b { font-size: 12px; }
  .rpoc-added .rpoc-added-actions { margin-bottom: 6px; gap: 4px 8px; }
  .rpoc-added .rpoc-video-btn { min-height: 32px; padding: 4px 8px; font-size: 12px; }
  .rpoc-added .rpoc-added-actions .rpoc-textlink { font-size: 11px; }
}
html.rpoc-firstrun .ad-lead .ad-today-line,
html.rpoc-firstrun .ad-today .ad-today-line { font-size: 18px; line-height: 1.45; }
.rpoc-home .rpoc-title { text-wrap: balance; }
.rpoc-tap-hint.rpoc-hint-on { outline: 3px solid #b8923c; outline-offset: 2px; }
.rpoc-added .rpoc-added-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.rpoc-added .rpoc-video-btn { white-space: nowrap; }
#entryList.rpoc-has-added { padding-bottom: 60vh; }
html.rpoc-vmodal-open, html.rpoc-vmodal-open body { overflow: hidden; }
.rpoc-vmodal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.rpoc-vmodal[hidden] { display: none; }
.rpoc-vmodal-backdrop { position: absolute; inset: 0; border: none; background: rgba(9, 42, 52, 0.55); cursor: pointer; touch-action: none; }
.rpoc-vmodal-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(420px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: #ffffff;
  color: #0d3e42;
  box-shadow: 0 24px 60px rgba(9, 42, 52, 0.3);
}
.rpoc-vmodal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.rpoc-vmodal-head h2 { margin: 0; font-size: 15px; font-weight: 900; line-height: 1.4; }
.rpoc-vmodal-sub { margin: 0; width: 100%; font-size: 12px; color: #4c6a70; }
.rpoc-vmodal .qm-video { width: auto; max-width: 100%; height: min(62vh, 520px); height: min(62dvh, 520px); }

/* Phase 409/411: 動画キック (本番以外で Retention と同じ判定のときだけ JS が DOM を作る。既定 HOME/探す = A・マイ抽選 = B)。主な操作より目立たせない・動きの指定なし */
.vk-host.vk-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.vk-host.vk-cards { display: grid; gap: 6px; margin: 0 0 10px; }
.vk-chip { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid rgba(31, 95, 102, 0.4); border-radius: 999px; background: #ffffff; color: #1f5f66; font-size: 12.5px; font-weight: 800; }
.vk-chip.vk-weak { border-color: rgba(31, 95, 102, 0.22); color: #4c6a70; font-weight: 700; font-size: 12px; }
.vk-chip-btn { min-height: 32px; padding: 4px 4px 4px 12px; border: none; background: none; color: inherit; font: inherit; cursor: pointer; }
.vk-chip .vk-x { min-width: 28px; min-height: 32px; padding: 0 8px 0 4px; border: none; background: none; color: #7a8f93; font-size: 14px; cursor: pointer; }
.vk-chip-btn:only-child { padding-right: 12px; }
.vk-card { padding: 8px 10px; border: 1px solid rgba(31, 95, 102, 0.18); border-radius: 10px; background: #f6faf8; }
.vk-card-text { margin: 0 0 6px; font-size: 12px; color: #4c6a70; line-height: 1.5; }
.vk-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.vk-card .rpoc-video-btn { margin: 0; min-height: 34px; font-size: 12.5px; }
.vk-card-later { display: inline-flex; gap: 12px; }
.ad-lead .ad-today-date.vk-date-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vk-host.vk-in-date { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; letter-spacing: normal; }
.vk-in-date .vk-chip, .vk-in-date .vk-chip-btn { min-height: 28px; }
.vk-host.vk-cards > .vk-row { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-host.vk-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.vk-mini { white-space: nowrap; display: inline-flex; align-items: center; min-height: 28px; margin-left: 6px; padding: 2px 8px; border: 1px solid rgba(31, 95, 102, 0.3); border-radius: 999px; background: #ffffff; color: #1f5f66; font: inherit; font-size: 11.5px; font-weight: 700; vertical-align: middle; cursor: pointer; }
.vk-mini.vk-weak { color: #5b7a80; border-color: rgba(31, 95, 102, 0.18); }
.vk-host.vk-under { margin: -4px 0 10px 12px; }
/* Phase 412: 探すのキックはヘルプの行 (☆ 違い / ？ ヘルプ) のすぐ下 = 補助の入口を 1 か所に (間を詰める) */
#helpEntryPublished + .vk-host.vk-row, #helpEntryPublished + .vk-host.vk-cards { margin-top: -10px; }

/* Phase 410: ヘルプセンター (候補・HELP_CENTER_ENABLED のときだけ JS が DOM を作る)。docs/help-center.md
   見た目は使い方ハブ (.howto-*) と同じ型 (下からのシート / 720px 以上は中央)。アプリはライト表示のみ (color-scheme: light) なので
   ダーク用の色は持たない。動き (animation / transition) は持たない = prefers-reduced-motion でも同じ。押せるものは 44px 以上 */
.help-center { position: fixed; inset: 0; z-index: 74; display: flex; align-items: flex-end; justify-content: center; }
.help-center[hidden] { display: none; }
.hc-backdrop { position: absolute; inset: 0; border: none; background: rgba(9, 42, 52, 0.42); cursor: pointer; }
.hc-panel {
  position: relative;
  width: min(560px, 100%);
  height: 92vh;
  height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  border-radius: 14px 14px 0 0;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px rgba(9, 42, 52, 0.14);
  color: #0d3e42;
}
.hc-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto);
  align-items: center;
  gap: 4px;
  margin: 0 -16px;
  padding: 6px 12px;
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 62, 66, 0.08);
}
.hc-head h2 { grid-column: 2; margin: 0; text-align: center; font-size: 16px; font-weight: 900; outline: none; }
.hc-head .more-close { grid-column: 3; justify-self: end; min-width: 44px; min-height: 44px; }
.hc-back {
  grid-column: 1;
  justify-self: start;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: none;
  color: #1f5f66;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.hc-back[hidden] { display: none; }
.hc-body { padding-top: 10px; }
.hc-body p { margin: 0; }
.hc-loading, .hc-empty { padding: 16px 2px; font-size: 13px; line-height: 1.6; color: #4c6a70; }
.hc-lead { margin: 4px 2px 10px !important; font-size: 12.5px; line-height: 1.6; color: #4c6a70; }
.hc-section { margin: 4px 0 18px; }
.hc-section h3 { margin: 6px 0 8px; font-size: 15px; font-weight: 900; }
.hc-section h3 small { margin-left: 4px; font-size: 11.5px; font-weight: 700; color: #5b7a80; }
.hc-more { margin: 4px 0 0 !important; }
/* 何をしたい？ (動画は使い方ハブで再生) */
.hc-purpose { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Phase 414: 7 本 (奇数) のとき最後の 1 本 (購入期限・受取) は 2 列ぶんに広げて空きマスを作らない */
.hc-purpose > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hc-purpose-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 62, 66, 0.14);
  border-radius: 12px;
  background: #f4f8f6;
  color: #0d3e42;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hc-purpose-btn span { font-size: 13px; font-weight: 800; line-height: 1.4; }
.hc-purpose-btn small { font-size: 11.5px; font-weight: 700; color: #1f5f66; }
/* 検索 */
.hc-search { margin: 0 0 16px; }
.hc-search-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 900; }
.hc-search-row { display: flex; gap: 6px; }
.hc-search-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(13, 62, 66, 0.28);
  border-radius: 10px;
  background: #ffffff;
  color: #0d3e42;
  font: inherit;
  font-size: 16px; /* iOS がズームしない大きさ */
}
.hc-search-btn {
  min-width: 64px;
  min-height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: #1f5f66;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.hc-search-row input:focus-visible, .hc-search-btn:focus-visible, .hc-row:focus-visible, .hc-purpose-btn:focus-visible,
.hc-tip-card:focus-visible, .hc-cat:focus-visible, .hc-acc summary:focus-visible, .hc-link:focus-visible, .hc-q:focus-visible,
.hc-video-btn:focus-visible, .hc-back:focus-visible { outline: 2px solid #1f5f66; outline-offset: 2px; }
.hc-results { margin: -6px 0 16px; }
.hc-results[hidden] { display: none; }
.hc-result-count { margin: 0 2px 6px !important; font-size: 12px; font-weight: 700; color: #5b7a80; }
.hc-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 10px;
  background: #ffffff;
  color: #0d3e42;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hc-row-title { flex: 1 1 60%; min-width: 0; font-size: 13.5px; font-weight: 800; line-height: 1.45; }
.hc-row-sub { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: #4c6a70; }
.hc-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  background: #e8f1ef;
  color: #31555d;
}
.hc-kind-faq { background: #e7ebf2; color: #3b3f9a; }
.hc-kind-trouble { background: #fcefe6; color: #8a4b20; }
.hc-kind-tip { background: #eef4e6; color: #3f6420; }
.hc-kind-term { background: #f1ecf6; color: #5b3d7a; }
.hc-kind-video { background: #e3f1f1; color: #1f5f66; }
/* おすすめ Tips */
.hc-tip-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hc-tip-card {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-left: 4px solid #6fa9a6;
  border-radius: 10px;
  background: #ffffff;
  color: #0d3e42;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hc-tip-card strong { font-size: 13.5px; font-weight: 800; line-height: 1.45; }
.hc-tip-card span { font-size: 12px; line-height: 1.55; color: #4c6a70; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* よくある質問 / 困ったとき (アコーディオン) */
.hc-acc-list { display: grid; gap: 6px; }
.hc-acc { border: 1px solid rgba(13, 62, 66, 0.12); border-radius: 10px; background: #ffffff; }
.hc-acc summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}
.hc-acc summary::-webkit-details-marker { display: none; }
.hc-acc summary::after { content: "＋"; margin-left: auto; flex: none; color: #1f5f66; font-weight: 900; }
.hc-acc[open] summary::after { content: "－"; }
.hc-acc-body { display: grid; gap: 6px; padding: 0 12px 12px; font-size: 13px; line-height: 1.65; color: #34475a; }
/* Tips の一覧 */
.hc-cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hc-card { padding: 12px; border: 1px solid rgba(13, 62, 66, 0.12); border-radius: 12px; background: #ffffff; font-size: 13px; line-height: 1.65; color: #34475a; }
.hc-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 900; color: #0d3e42; line-height: 1.45; }
.hc-card p + p { margin-top: 4px; }
.hc-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px !important; }
/* カテゴリ */
.hc-cats { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hc-cat {
  position: relative;
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 34px 8px 12px;
  border: 1px solid rgba(13, 62, 66, 0.12);
  border-radius: 10px;
  background: #ffffff;
  color: #0d3e42;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hc-cat::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: #1f5f66; }
.hc-cat strong { font-size: 14px; font-weight: 800; }
.hc-cat small { font-size: 11.5px; color: #5b7a80; }
/* 用語 */
.hc-terms { display: grid; gap: 8px; margin: 0; }
.hc-term { padding: 10px 12px; border: 1px solid rgba(13, 62, 66, 0.10); border-radius: 10px; background: #ffffff; }
.hc-term dt { margin: 0 0 4px; }
.hc-term dd { display: grid; gap: 4px; margin: 0; font-size: 13px; line-height: 1.6; color: #34475a; }
.hc-term dd .hc-video-btn { min-height: 40px; }
.hc-term-chip.badge { min-height: 24px; padding: 0 10px; font-size: 12px; }
.hc-term-alert { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fbefd6; color: #7a4e0c; font-size: 12px; font-weight: 800; }
/* 1 項目の画面 (文脈ヘルプもここ) */
.hc-item { display: grid; gap: 8px; padding: 4px 2px 8px; }
.hc-item-title { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.45; }
.hc-item-body { display: grid; gap: 6px; font-size: 14px; line-height: 1.7; color: #34475a; }
.hc-video-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid rgba(31, 95, 102, 0.45);
  border-radius: 999px;
  background: #ffffff;
  color: #1f5f66;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.hc-related { display: grid; justify-items: start; padding-top: 6px; border-top: 1px dashed rgba(13, 62, 66, 0.14); }
.hc-related-label { font-size: 11.5px; font-weight: 800; color: #5b7a80; }
.hc-foot { margin: 8px 0 0 !important; padding-top: 8px; border-top: 1px solid rgba(13, 62, 66, 0.08); }
.hc-report { display: grid; gap: 4px; margin: 14px 0 0; padding: 12px; border-radius: 12px; background: #f4f8f6; font-size: 12.5px; line-height: 1.6; color: #34475a; }
.hc-report h3 { margin: 0; font-size: 14px; font-weight: 900; color: #0d3e42; }
/* テキストリンク (入口・関連・すべて見る) */
.hc-link, .hc-q {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border: none;
  background: none;
  color: #1f5f66;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hc-q { font-size: 12px; padding: 0 4px; }
.hc-q::before { content: "?"; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; background: #e3f1f1; color: #1f5f66; font-size: 10.5px; font-weight: 900; }
/* アプリ側の入口と文脈ヘルプ (目立たせない) */
.hc-entry-row { display: flex; align-items: center; justify-content: flex-end; margin: -6px 0 -4px; }
.hc-entry-row .hc-link { font-size: 12.5px; color: #3c6c72; white-space: nowrap; }
.hc-entry-split { justify-content: space-between; flex-wrap: wrap; gap: 0 8px; margin: 2px 2px 4px; }
#helpEntryEntries { margin: -8px 2px -2px; }
.hc-ctx-line { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 2px 0 0; }
.hc-entry-ctx { display: inline-flex; min-width: 0; }
.alerts-count-note .hc-q { vertical-align: middle; }
body.help-center-open { overflow: hidden; }
@media (min-width: 720px) {
  .help-center { align-items: center; padding: 24px; }
  .hc-panel { height: auto; max-height: 86vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(9, 42, 52, 0.24); }
}

/* Phase 414: ヘルプ ON のときの「?」=「Aster Drawとは？」の中のヘルプ入口 (リンクと同じ見た目のボタン・色は親 .hero-note a に合わせて継承) */
.hero-about-help {
  display: inline;
  padding: 0;
  border: none;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.hero-about-help:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Phase 435: 継続受付の注記 / 整理バー / 速報の応募済み */
.entries-ongoing-note { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(120, 130, 150, 0.12); font-size: 0.85rem; line-height: 1.5; }
.entries-tidy-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(120, 130, 150, 0.12); font-size: 0.85rem; }
.entries-tidy-bar[hidden], .entries-ongoing-note[hidden] { display: none; }
.entries-ongoing-link { margin: 6px 0; }
.entries-ongoing-link[hidden] { display: none; }
.entries-ongoing-link .button { width: 100%; justify-content: space-between; text-align: left; }
.alert-applied-mark { font-weight: 800; font-size: 0.85rem; }

/* Phase 439 追補: 「情報元を見る」ボタン (応募リンクではない・data-apply-start / data-alert-open なし)。二次情報は点線で公式と区別 */
.source-btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; gap: 4px;
  border: 1px solid #b9c9d4; border-radius: 999px; background: #f8fbfd; color: #3e6a82;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.source-btn.is-secondary { border-style: dashed; color: #5d6f7d; background: #fff; }
.source-btn:hover { background: #eef5f9; }
.pcard-source-row, .alert-src-row { margin: 8px 0 0; }
.alert-src-row .source-btn { min-height: 32px; }

/* Phase 465 (P0): 締切後の記録 / 判定できない状態の記録の「結果はどうでしたか？」 (quick-actions の 1 行目に全幅で置く) */
.quick-actions .result-ask-lede {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-ink, #2b2b2b);
}
/* Phase 465 (P0): 「✓ 追加済み」は押せる (マイ抽選のその記録へ移動)。見た目は従来の緑の文字のまま、下線で押せることを示す */
button.added-note-link {
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 34px;
  font-family: inherit;
}

/* Phase 486 (1-B): カレンダーの発表の行に商品名を 1 行で (日付 → 応募先 の構造は変えない)。
   1 行に収まらなければ商品名だけを … で切り、「ほか N」は必ず残す。行の高さを増やさない (320px)。全商品名は title */
.month-event .me-products {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ad-muted, #5b6b78);
  white-space: nowrap;
}
.month-event .me-products-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.month-event .me-products-more { flex: none; font-weight: 700; }
/* ==========================================================================
   Phase 450: 📩 Amazon招待販売 (抽選とは別管理)。落ち着いた藍で抽選の締切色と区別する。
   アニメーション・3D・装飾は追加しない (P0 RESET)
   ========================================================================== */
.pcard-deadline.dl-invite { background: #4a5f8c; }
.badge.invite-sale-badge { background: #eef1f8; color: #34466e; border: 1px solid #c9d2e6; white-space: nowrap; }
#tab-published .phase-chip.phase-chip-invite { border-color: #c9d2e6; color: #34466e; }
.phase-chip-count { font-variant-numeric: tabular-nums; }
.invite-sale-note { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: #eef1f8; color: #2c3a5c; font-size: 0.85rem; line-height: 1.5; overflow-wrap: anywhere; }
.invite-sale-note[hidden] { display: none; }
.tp-invite {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid #c9d2e6;
  border-radius: 999px;
  background: transparent;
  color: #34466e;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.tp-invite.is-invited { background: #eef1f8; border-color: #4a5f8c; }
.ps-more.ps-invite { border-style: solid; color: #34466e; }
.acc-tag.acc-tag-invite { background: #eef1f8; color: #34466e; }
.entries-invite-open { margin-top: 6px; }
.invite-received-line { color: #34466e; }

/* ==========================================================================
   Phase 452: Amazon 招待の専用フロー (質問 1 つ + 選択ボタン) / Amazon招待率 / GIRAFULL 等の店舗別応募リンク。
   装飾・アニメーションなし (P0 RESET)。390px で横スクロールを出さない (折り返し)
   ========================================================================== */
.invite-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #c9d2e6; border-radius: 10px; background: #f6f8fc; }
.invite-ask-q { font-weight: 700; color: #2c3a5c; font-size: 0.9rem; overflow-wrap: anywhere; }
.invite-ask-note { flex-basis: 100%; color: #4a5672; font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; }
.invite-ask-btns { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.invite-ask-btns button { min-height: 36px; }
.card-v3 .invite-ask-btns .text-action { order: 0; }
.invite-ask .invite-yes { padding: 0 14px; border: 1px solid #4a5f8c; border-radius: 999px; background: #fff; color: #2c3a5c; font-weight: 700; text-decoration: none; }
.invite-ask-published { padding: 4px 6px; }
.invite-rate-line { display: inline-block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.invite-reconfirm-note { display: inline-block; margin-top: 4px; color: #7a4b00; }
.win-rate-invite { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #eef1f8; color: #2c3a5c; overflow-wrap: anywhere; }
.win-rate-invite-community { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #eef1f8; color: #2c3a5c; font-size: 0.9em; overflow-wrap: anywhere; }
.apply-targets { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #d8dde6; border-radius: 10px; min-width: 0; }
.apply-targets-title { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; }
.apply-targets-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.apply-targets-list a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 10px; border: 1px solid #b9c3d6; border-radius: 999px; text-decoration: none; overflow-wrap: anywhere; }
.apply-targets-note { margin: 6px 0 0; font-size: 0.78rem; color: #5a6475; }
.card-v3 .date-pill.open-ended { max-width: 100%; }
.card-v3 .date-pill.open-ended .date-value { white-space: normal; overflow-wrap: anywhere; }