:root {
  --paper: #fbfafc;
  --mine: #7a4a00;
  --mine-soft: #fdf3e0;
  --benefit: #1f5f66;
  --benefit-soft: #e6f2f3;
  --warn: #8a2f2f;
  --warn-soft: #fbeaea;
  --panel: #ffffff;
  --ink: #1c1922;
  /* 補助テキスト。既定は地（ネビュラ）の上を想定し、白場では下で戻す。
     同じ --muted を両方で使うため、面ごとに値を差し替える。 */
  --muted-on-paper: #6a6577;
  --muted: rgba(255, 255, 255, 0.86);
  /* リンク。地の上は入口ページの --cyan-soft、白場では --accent に戻す */
  --link: #6fd6e8;
  --cyan-focus: #6fd6e8;
  --line: #ded9e6;
  --line-soft: #ece8f1;
  --accent: #a8248c;            /* 入口ページ --purple-lit */
  --accent-soft: #f8eaf4;
  --anchor: #7b0064;            /* 入口ページ --purple-base。試合と月の帯 */
  --ground: #2a0a2b;            /* 入口ページ --purple-deep */
  --ground-ink: #ffffff;
  /* 入口ページの --ink-dim は 0.72 だが、あちらは短いラベル用。
     こちらは地の上に本文が乗るため、ネビュラの最も明るい部分（実測 #a23c88）でも
     4.5:1 を満たす 0.86 にする（0.72 では 3.86:1 で不足）。 */
  --ground-ink-dim: rgba(255, 255, 255, 0.86);
  --ground-line: rgba(255, 255, 255, 0.28);
  /* 種別の色。**罫線と文字で値を分ける。**
     タグの文字は白場で4.5:1が要り、暗くせざるを得ない。1つの値を両方に使うと
     罫線までその暗さに揃い、3色が「同じ濃さの違う色」になって見分けが付かなくなる
     （2026-09-11 まで実際そうだった。罫線どうしのコントラストが1.08〜1.28）。
     罫線は文字ではないので3:1でよく、そのぶん明るさを散らせる。 */
  --action: #8a2f5f;
  --action-bar: #b3005c;        /* いちばん濃い。行動が要るものを強く */
  --action-soft: #fbeaf2;
  --info: #2f5f8a;
  --info-bar: #4a8fd4;          /* いちばん淡い。知らせは引く */
  --info-soft: #e9f1f8;
  --personal: #3f6b3f;
  --personal-bar: #1f7a4a;      /* 中 */
  --personal-soft: #ecf4ec;
  --tentative: #8a5a2f;
  --tentative-soft: #f8f0e6;
}

* { box-sizing: border-box; }

/* 白い面のなかでは補助テキストを濃いグレーに戻す */
.block,
.fold,
.sheet,
.tour,
.tabbar,
.my-form,
.benefit-summary,
.benefit-item {
  --muted: var(--muted-on-paper);
  --link: var(--accent);
}

a { color: var(--link); }

/* 背景。入口ページと同じ二層構成で、WebGLのネビュラが出たらCSSのぼかしは引っ込める。
   ぼかしは filter ではなく放射グラデーションで作る（端末によって描画コストが高いため）。 */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
}
.bg-blob-1 {
  width: 70vmax; height: 70vmax;
  top: -22vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(168, 36, 140, 0.55) 0%, rgba(168, 36, 140, 0) 68%);
  animation: drift-a 34s ease-in-out infinite;
}
.bg-blob-2 {
  width: 58vmax; height: 58vmax;
  bottom: -20vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(255, 143, 208, 0.34) 0%, rgba(255, 143, 208, 0) 68%);
  animation: drift-b 43s ease-in-out infinite;
}
.bg-blob-3 {
  width: 44vmax; height: 44vmax;
  top: 38%; left: 52%;
  background: radial-gradient(circle, rgba(111, 214, 232, 0.20) 0%, rgba(111, 214, 232, 0) 70%);
  animation: drift-c 51s ease-in-out infinite;
}
.bg-nebula {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 900ms ease-out;
}
.has-nebula .bg-nebula { display: block; opacity: 1; }
.has-nebula .bg-blob { opacity: 0; transition: opacity 900ms ease-out; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vmax, -3vmax, 0) scale(1.09); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vmax, -4vmax, 0) scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none; }
}
:root[data-motion="off"] .bg-blob { animation: none; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ground-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.notice {
  margin: 0;
  padding: 10px 16px;
  background: rgba(138, 90, 47, 0.22);
  border-bottom: 1px solid var(--ground-line);
  color: var(--ground-ink);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* 見出しは画面上部に固定する。スクロール中は帯に縮め、書き出しだけを連れて行く。
   背景が動いているため、固定中だけ地の色を敷いて文字を読めるようにする。 */
.head {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 24px 16px 18px;
  transition: padding 180ms ease, background-color 180ms ease;
}
.head.is-stuck {
  padding: 8px 16px;
  background: rgba(42, 10, 43, 0.92);
  box-shadow: 0 4px 16px rgba(20, 0, 18, 0.34);
}
.head.is-stuck h1 { font-size: 1.2rem; letter-spacing: 0.05em; }

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 端末の文字サイズを大きくすると題とボタンが入りきらない。
     削るのは題のほうで、押せるボタンは削らない。 */
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

/* 入口ページのキャラの円形・紫版。
   あちらは五角形（薄紫）と角丸四角（シアン）の2体で、目のまばたきが共通の作り。
   同じ目の作りをそのまま使い、形を円に、色を紫にして家族に揃える。 */
.mate-round {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18%;
  flex: none;
  width: clamp(26px, 7.5vw, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* 目が円のどこに来ても見え、円が地から浮くように選んだ。
     目/最も暗い部分 3.59、円/地 3.85（装飾の基準3:1を満たす）。 */
  background: linear-gradient(155deg, #efc4f7 0%, #c2409f 100%);
  box-shadow: 0 4px 10px rgba(20, 0, 18, 0.38);
  transition: width 180ms ease;
}
.mate-eye {
  width: 11%;
  height: 26%;
  border-radius: 999px;
  background: #241a2e;
  /* まばたき。周期の大半は開いたままで、一瞬だけ閉じる（入口ページと同じ） */
  animation: mate-blink 6.2s infinite;
}
@keyframes mate-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .mate-eye { animation: none; }
}
:root[data-motion="off"] .mate-eye { animation: none; }

/* 帯に縮んだときはキャラも小さくする */
.head.is-stuck .mate-round { width: 24px; }

/* 書き出し。見出しの横の余白に収まる大きさにする */
.head-action {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ground-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ground-ink);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.head-action:focus-visible {
  outline: 3px solid var(--cyan-focus);
  outline-offset: 2px;
}
.head-action-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 狭い端末では見出しと並べる余地がないので、書き出しは絵柄だけにする。
   読み上げ名は aria-label で保つ。 */
@media (max-width: 359px) {
  .head-action-label { display: none; }
  .head-action { min-width: 44px; justify-content: center; padding: 0; }
}
/* 題の書体。SIL Open Font License 1.1（assets/dm-serif-display-OFL.txt）。
   Google Fonts からラテン部分だけを取り込んで自前で配る。この repo は外部への
   リクエストを持たないため、fonts.googleapis.com は参照しない。
   読み込むまでは Georgia で出る。字幅が近いので入れ替わりが目立たない。 */
@font-face {
  font-family: "DM Serif Display";
  src: url(dm-serif-display-latin.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* 題の "me" だけ薄紫の小文字にする。TIMELINE のなかの me＝自分で、
   公式の販売スケジュールを自分の時間軸に読み替える、というこの道具の役目を題で言う。
   地の上で 10.3、星雲のいちばん明るい点でも 3.41 で、大きな太字（3:1）を満たす。
   帯に縮んだときは地が 0.92 で敷かれるため 9.64 に上がる。
   色と字形だけに意味を持たせていないので、読み上げは "TImeLINE" とそのまま読まれる。 */
.head-mark { color: #f3abff; text-transform: none; }
.head h1 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  /* 幅に応じて縮め、横のボタンの場所を作る。折り返すと帯が2行になるため折り返さない。
     セリフは同じ級数でも小さく見えるため、ゴシックのときより一回り上げている */
  font-size: clamp(1.5rem, 6.4vw, 1.9rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  /* 折り返すと帯が2行になるので折り返さず、入らない分は切る。
     切らないと題がボタンの下へ突き抜ける（端末の文字サイズを上げたときに起きる）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: font-size 180ms ease;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 64px;
}

body { padding-bottom: 108px; }

section { margin-top: 32px; }
section h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.5;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ground-line);
}
.section-note {
  margin: 0 0 12px;
  font-size: 0.84rem;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 常時出ている操作メニュー。白い錠剤を地の上に浮かせる。
   ネビュラの上に重なるため backdrop-filter は使わない（実機の描画負荷を避ける）。 */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--panel);
  color: var(--ink);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(20, 0, 18, 0.42);
  /* 端末幅に収める。ボタンは伸び縮みするので、狭い端末でもはみ出さない */
  width: max-content;
  max-width: calc(100vw - 16px);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 52px;
  padding: 4px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.64rem;
  line-height: 1.25;
  cursor: pointer;
  position: relative;
}
.tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.tab-icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 主役の操作。ここだけ塗る */
.tab-primary {
  background: var(--anchor);
  color: var(--ground-ink);
  padding: 4px 10px;
}
.tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}

/* 未設定の合図。色だけに頼らず、読み上げ用の語を併記する */
.tab-dot {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
}

/* シート。Esc・フォーカスの閉じ込め・閉じたあとのフォーカス復帰は <dialog> の挙動を使う */
.sheet {
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
}
/* display は [open] にだけ効かせる。.sheet へ直接書くと
   ブラウザ既定の dialog:not([open]) { display: none } を打ち消し、
   閉じていてもシートが出たままになる。 */
.sheet[open] {
  display: flex;
  flex-direction: column;
}
.sheet::backdrop { background: rgba(20, 0, 18, 0.55); }
.sheet[open] { animation: sheet-in 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.sheet[open]::backdrop { animation: sheet-fade 260ms ease-out; }
.sheet.is-closing { animation: sheet-out 190ms ease-in forwards; }
.sheet.is-closing::backdrop { animation: sheet-fade 190ms ease-in reverse forwards; }

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheet-out {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open],
  .sheet[open]::backdrop,
  .sheet.is-closing { animation: none; }
}
:root[data-motion="off"] .sheet[open],
:root[data-motion="off"] .sheet[open]::backdrop,
:root[data-motion="off"] .sheet.is-closing { animation: none; }

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
}
.sheet-head h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.02rem;
  line-height: 1.4;
}
.sheet-close {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  flex: none;
}
.sheet-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.sheet-body {
  overflow-y: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.sheet-body > *:first-child { margin-top: 0; }

/* 「次にやること」の要約。件数だけを言う平文で、急ぎのときだけ色が付く。
   いつも色が付いていると、本当に近いときに気づけない。 */
.next-lead {
  margin: 0 0 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.next-lead.is-soon {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--action-soft);
  color: var(--action);
  font-weight: 700;
  font-size: 0.92rem;
}

/* 使い方の説明。シートは下から出る操作盤、こちらは画面中央に出る読みもの。
   役割が違うので形も分ける。 */
.tour {
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: 86vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--panel);
  color: var(--ink);
  overflow: hidden;
}
.tour[open] {
  display: flex;
  flex-direction: column;
  animation: tour-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tour::backdrop { background: rgba(20, 0, 18, 0.62); }
.tour[open]::backdrop { animation: sheet-fade 240ms ease-out; }

@keyframes tour-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tour[open], .tour[open]::backdrop { animation: none; }
}
:root[data-motion="off"] .tour[open],
:root[data-motion="off"] .tour[open]::backdrop { animation: none; }

.tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
}
.tour-step {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tour-skip {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.tour-skip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.tour-body {
  overflow-y: auto;
  padding: 0 18px;
}
.tour-panel h2 {
  margin: 14px 0 6px;
  padding: 0;
  border: 0;
  font-size: 1.08rem;
  line-height: 1.5;
}
.tour-panel p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink);
}

/* 説明の図。公式由来の画像は使えないので、画面の要素をそのまま小さく作る */
.tour-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 10px;
  background: var(--ground);
}
.tour-band {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--anchor);
  color: var(--ground-ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tour-card {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  border-left: 4px solid var(--accent);
  font-size: 0.78rem;
}
.tour-card b { font-variant-numeric: tabular-nums; margin-right: 6px; }
.tour-card.is-target { border-left-color: var(--anchor); }
.tour-card.is-target b {
  margin: 0 0 0 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--anchor);
  color: var(--ground-ink);
  font-size: 0.72rem;
}
.tour-card.is-dim { opacity: 0.5; }

.tour-figure-bar {
  flex-direction: row;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
}
.tour-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted-on-paper);
  font-size: 0.54rem;
  line-height: 1.2;
  text-align: center;
}
.tour-tab svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tour-tab.is-primary {
  background: var(--anchor);
  color: var(--ground-ink);
}

.tour-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* シートが開いているあいだ背面を動かさない */
body.sheet-open { overflow: hidden; }

.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 予定を1枚の券に見立てる。半券にあたる右側は残り時間だけに使い、
   切り取り線の位置を全部の券でそろえる。目を動かさずに縦に読み比べられる。
   券らしさは切り欠きと破線で出す。傾けたり影を重ねたりはしない。 */
.ticket {
  display: flex;
  align-items: stretch;
  position: relative;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.ticket:last-child { margin-bottom: 0; }
.ticket-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
}
.ticket-when {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ticket-title {
  margin: 2px 0 0;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 半券。破線と、上下の切り欠きで切り取り線に見せる。
   切り欠きはシートの地（--panel）で塗って穴に見せている。 */
.ticket-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 78px;
  padding: 10px 6px;
  /* 切り取り線は白の破線。紫の上に置くので、地の線の色では見えない */
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 0 5px 5px 0;
  background: var(--anchor);
  color: #fff;
  text-align: center;
}
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  right: 72px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel);
  pointer-events: none;
}
.ticket::before { top: -6px; }
.ticket::after { bottom: -6px; }

.ticket-stub-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
}
.ticket-stub-value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* 48時間を切ったものは半券を明るい紫に上げ、券の枠も同じ色にする。
   半券はもともと紫なので、急ぎは色の濃さで示す。 */
.ticket.is-soon { border-color: var(--accent); }
.ticket.is-soon .ticket-stub { background: var(--accent); }
.drawer-item-title {
  margin: 2px 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
}
.drawer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 絞り込み */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
}
.chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.chip:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* 自分に関係するもの（プロフィール照合） */
.filter-mine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  min-height: 44px;
}
.filter-mine input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}
.filter-mine label { font-size: 0.88rem; }
.filter-mine input:disabled + label { color: var(--muted); }
.filter-note { margin: 4px 0 0; }

.form-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
/* 該当の強調。記号ではなく、読み上げて意味が通る言葉で示す。 */
.badge-mine {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid var(--mine);
  background: var(--mine-soft);
  color: var(--mine);
  font-size: 0.74rem;
  font-weight: 700;
  flex: none;
}
.event.is-mine {
  border-left-color: var(--mine);
  background: var(--mine-soft);
}
.next-mine {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mine);
}

/* 特典チケット */
.sub-head {
  margin: 20px 0 8px;
  font-size: 0.92rem;
}
.benefit-summary {
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--benefit);
  border-radius: 4px;
}
.benefit-count {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--benefit);
  font-variant-numeric: tabular-nums;
}
.benefit-detail {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.benefit-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--warn-soft);
  border-radius: 3px;
  color: var(--warn);
  font-size: 0.84rem;
  font-weight: 700;
}
.benefit-suggest {
  margin: 0 0 4px;
  padding: 8px 10px;
  background: var(--accent-soft);
  border-radius: 3px;
  color: var(--accent);
  font-size: 0.84rem;
}
.benefit-suggest:empty { display: none; }
.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.benefit-item {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
}
.benefit-item.is-planned { border-left-color: var(--benefit); }
.benefit-item.is-change { border-left-color: var(--accent); }
.benefit-item.is-used { border-left-color: var(--line); }
.benefit-item-title {
  margin: 0;
  font-size: 0.94rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.benefit-tag {
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid var(--benefit);
  background: var(--benefit-soft);
  color: var(--benefit);
  font-size: 0.74rem;
  font-weight: 700;
}
.benefit-item.is-used .benefit-tag {
  border-color: var(--muted);
  background: var(--line-soft);
  color: var(--muted);
}
.benefit-actions {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge-benefit {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid var(--benefit);
  background: var(--benefit-soft);
  color: var(--benefit);
  font-size: 0.74rem;
  font-weight: 700;
  flex: none;
}
.event.is-benefit { border-left-color: var(--benefit); }

/* 折りたたみ */
/* 中身の余白は器の padding で持つ。子に margin を置くと、`margin: 0 0 10px` のような
   一括指定に丸ごと消される（同じ強さなら後勝ち）。実際、中身が右端にくっつく不具合が
   これで出ていた。padding なら子が何を書いても消えない。 */
.fold {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  margin-top: 12px;
  padding: 0 14px 14px;
}
/* 閉じているときは中身が無いので、下の余白も要らない。 */
.fold:not([open]) { padding-bottom: 0; }
/* 見出しだけは器の端まで伸ばす。境界線を左右いっぱいに引くため。 */
.fold > summary {
  min-height: 44px;
  margin: 0 -14px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
}
.fold > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.fold[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.fold .my-form { border: 0; padding: 0; }

.past {
  margin-bottom: 12px;
  border: 1px dashed var(--ground-line);
  border-radius: 10px;
}
.past > summary {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 0.86rem;
  color: var(--ground-ink-dim);
  cursor: pointer;
  list-style-position: inside;
}
.past > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.past[open] > div { padding: 0 12px 12px; }
.past .event { opacity: 0.72; }

/* 種別のイラスト。文字ラベルと併記する装飾。 */
.type-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.event-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.event-also {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted);
}
.month-label {
  margin: 26px 0 14px;
  padding: 11px 16px;
  background: var(--anchor);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20, 0, 18, 0.30);
  color: var(--ground-ink);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.month {
  margin-top: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid var(--ground-line);
}
.month > summary {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
}
.month > summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}
.month[open] > div { padding: 0 12px 12px; }
.match-label {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: #f7f4f9;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--anchor);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}
/* ホーム / アウェイ。会場名だけでは読み取りにくいので、試合名の後ろに四角囲みで置く。
   文字が違うので色だけに頼っていないが、地の濃さも変えて一目で分かるようにする。 */
.match-side {
  display: inline-block;
  margin-left: 6px;
  min-width: 1.35em;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  vertical-align: 0.05em;
}
.match-side.is-home {
  color: var(--anchor);
  background: var(--accent-soft);
}
.match-side.is-away {
  color: var(--muted-on-paper);
  background: transparent;
}

/* アウェイ席の販売状態。予定ではないので札にせず、帯に添える。 */
.match-away {
  font-weight: 700;
  font-size: 0.74rem;
  padding: 1px 8px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
}
/* 試合日。上の日付見出し（予定が始まる日）と混同されないよう、
   書式・太さ・色をすべて変える。 */
.match-date {
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--muted-on-paper);
}

/* 試合ごとの公式の案内。帯の下に畳んで置く。
   既定は閉じる。件数と内訳だけで見に行くかは決められ、13件のリンクが常に開いていると
   時系列そのものが読みにくくなる。 */
.match-news {
  border-bottom: 1px solid var(--line-soft);
  background: #fbfafc;
  font-size: 0.78rem;
}

.match-news-head {
  padding: 8px 14px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--muted-on-paper);
  /* summary を flex にすると既定の三角が消えるので、自分で描く */
  list-style: none;
}

.match-news-head::-webkit-details-marker {
  display: none;
}

/* 開閉の目印。閉じているとき右向き、開くと下向き */
.match-news-head::before {
  content: "";
  flex: none;
  align-self: center;
  width: 0;
  height: 0;
  border-left: 5px solid var(--anchor);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform-origin: 30% 50%;
  transition: transform 0.12s ease-out;
}

.match-news[open] > .match-news-head::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .match-news-head::before { transition: none; }
}

.match-news-head:hover {
  background: #f5f2f7;
}

.match-news-head:focus-visible {
  outline: 2px solid var(--anchor);
  outline-offset: -2px;
}

.match-news-count {
  font-weight: 700;
  color: var(--anchor);
}

.match-news-kinds {
  font-size: 0.74rem;
}

.match-news-note {
  margin: 0;
  padding: 0 14px 6px 34px;
  font-size: 0.72rem;
  color: var(--muted-on-paper);
}

.match-news-list {
  list-style: none;
  margin: 0;
  padding: 0 14px 10px 34px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.match-news-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.match-news-date {
  color: var(--muted-on-paper);
  font-size: 0.72rem;
  flex: none;
  /* 日付の幅をそろえて、種類が縦に並んで読めるようにする */
  min-width: 5.4em;
}

.match-news-list a {
  color: var(--anchor);
}

/* タイムライン */
.day {
  margin-top: 22px;
}

/* 白場。日付×試合の単位で1枚。札と札のあいだで背景が見える */
.block {
  background: var(--panel);
  color: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 0, 18, 0.28);
}
.block + .block { margin-top: 10px; }
.day-label {
  margin: 0 4px 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ground-ink-dim);
  font-variant-numeric: tabular-nums;
}
.day-label .today {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.event {
  /* 4pxでは種別の違いが読み取れなかった（2026-09-11 実機で確認）。 */
  border-left: 6px solid var(--line);
  border-top: 1px solid var(--line-soft);
  padding: 11px 14px;
}
.events > .event:first-child { border-top: 0; }
.event-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.event-time {
  font-weight: 700;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.event-title {
  margin: 4px 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
}
.event-meta {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.event-meta a { color: var(--accent); }

/* 出典は信頼のために必ず出すが、読む順としては最後。
   常時下線＋強い色だと、題より先に目に入る。下線は hover / focus で出す。 */
.event-meta a.event-source {
  color: var(--muted);
  /* 下線は残す。リンクだと分かる手掛かりを色だけに頼らせないため。
     ただし薄くして、題より先に目に入らないようにする。 */
  text-decoration: underline;
  text-decoration-color: var(--line-soft);
  text-underline-offset: 2px;
}
.event-meta a.event-source:hover,
.event-meta a.event-source:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}
.event-source-date {
  margin-left: 2px;
  font-size: 0.92em;
  opacity: 0.8;
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid currentColor;
  flex: none;
}
.is-action { border-left-color: var(--action-bar); }
.is-action .tag { color: var(--action); background: var(--action-soft); }
.is-information { border-left-color: var(--info-bar); }
.is-information .tag { color: var(--info); background: var(--info-soft); }
.is-personal { border-left-color: var(--personal-bar); }
.is-personal .tag { color: var(--personal); background: var(--personal-soft); }

.note-tentative {
  color: var(--tentative);
  font-weight: 700;
}

/* 記事から読み取った日時。公式の販売スケジュール表から取ったものと見分けを付ける。
   目立たせるのではなく、確かさが一段違うことが読めればよい。 */
.note-derived {
  color: var(--muted-on-paper);
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 0.68rem;
}

/* 日程未定・取り込まなかった記事 */
.undated {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 記事の一覧も内容なので白場に載せる。地の上では紫のリンクが背景と同化する */
.skipped {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  color: var(--ink);
  --muted: var(--muted-on-paper);
  --link: var(--accent);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(20, 0, 18, 0.28);
}
.skipped li {
  border-left: 3px solid var(--line);
  padding-left: 12px;
  font-size: 0.86rem;
}
.skipped .reason {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.skipped a { color: var(--accent); word-break: break-all; }

/* フォーム */
.my-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-size: 0.82rem;
  font-weight: 700;
}
/* 数値欄も同じ組みにする。抜けていると UA 既定のまま出て、高さ21px・文字13.3pxになる。
   高さはタップ領域が足りず、16px未満の入力欄は iOS Safari がフォーカス時に画面を拡大する。 */
input[type="text"],
input[type="number"],
input[type="datetime-local"],
select {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}
.field-check {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.field-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}
.field-check label { font-weight: 400; font-size: 0.94rem; }

/* <button> と <a> の両方で使う。<a> は inline のままだと高さも中央ぞろえも効かず、
   下線が付いたまま潰れて見える。実際に「登録のしかたを見る」がそうなっていた。 */
/* ボタンを2つ以上並べる枠。
   .btn は inline-flex なので、そのまま並べると**折り返したときに上下がくっつく**。
   横に並ぶときも縦に折り返すときも、同じ隙間を空ける。 */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 0.94rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.btn-quiet {
  background: var(--panel);
  border-color: var(--line);
  color: var(--muted);
  font-weight: 400;
}

.btn-remove {
  min-height: 32px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  border-radius: 3px;
  cursor: pointer;
}
.my-status {
  margin: 10px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  min-height: 1.4em;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--line-soft);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.foot {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}
.foot p { margin: 0 0 6px; }

@media (min-width: 600px) {
  .drawer { left: 50%; right: auto; transform: translateX(-50%); width: 640px; border-radius: 8px 8px 0 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .head { padding: 32px 16px 22px; }
  .head h1 { font-size: 1.8rem; }
  .my-form { padding: 20px; }
}

/* ---------- 案内ページ（timeline-calendar.html） ----------
   購読の登録とやめ方を説明する読み物のページ。時系列の画面とは別ページにしている。
   シートは操作するところで、読ませるところではないため。
   色とトップバーは時系列と共有するので、このファイルに置く。 */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 16px 64px;
  color: var(--ground-ink);
}

/* 説明は白い紙の面に載せる。地の上に長文を置くと読みづらい。 */
.doc-sec {
  --muted: var(--muted-on-paper);
  --link: var(--accent);
  margin-top: 16px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
}

.doc-sec h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.doc-sec h3 {
  margin: 16px 0 8px;
  font-size: 0.92rem;
}
.doc-sec p { margin: 0 0 10px; line-height: 1.75; font-size: 0.9rem; }
.doc-sec ul,
.doc-sec ol { margin: 0 0 10px; padding-left: 1.3em; line-height: 1.75; font-size: 0.9rem; }
.doc-sec li { margin-bottom: 6px; }

/* 入るもの／入らないものは並べて見比べたい。狭い画面では縦に積む。 */
.doc-cols { display: grid; gap: 4px; }
@media (min-width: 640px) {
  .doc-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.doc-col h3 { margin-top: 8px; }

/* 登録用アドレス。**リンクにしない。** リンクだとスマートフォンでは押した瞬間に
   1回きりの取り込みが始まり、購読ではなく自分のカレンダーに混ざってしまう。 */
.doc-url-label { margin-bottom: 6px; font-weight: 700; }
.doc-url { display: flex; gap: 8px; align-items: stretch; }
.doc-url-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.82rem;
}

/* やめ方の2段階。1つめ（表示を消す）を先に、同じ重みで置く。 */
.doc-step { margin-top: 14px; }
.doc-step h3 { margin-top: 0; }

.doc-how { margin: 0; font-size: 0.9rem; line-height: 1.75; }
.doc-how dt {
  margin-top: 12px;
  font-weight: 700;
  color: var(--accent);
}
.doc-how dd { margin: 4px 0 0; }

.doc-warn {
  padding: 12px;
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  border-radius: 0 4px 4px 0;
}

/* 読み物のページの見出しは貼り付かせない。時系列の画面は縦に長く、いまどこを
   見ているか見失うので貼り付けているが、こちらは押す先が無く、白い文字が
   本文の上に残り続けるだけになる。 */
.head-static { position: static; }

/* 「カレンダーに入れる」シートの2つの道。どちらを選ぶかの画面なので、
   説明ではなく選択肢として並べる。詳しい手順は案内ページに送る。 */
/* シートの中の区切り。用が2つ以上あるとき、見出しと線で分ける。
   囲みにすると入れ子の枠が二重になるので、線だけにする。 */
.sheet-section + .sheet-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sheet-section-head {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.ics-way {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.ics-way + .ics-way { margin-top: 12px; }
.ics-way-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.ics-way-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ics-way-points {
  margin: 0 0 12px;
  padding-left: 1.2em;
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
}
.ics-way-points li { margin-bottom: 4px; }

/* 案内ページの題は日本語。DM Serif Display にはかなが無く、明朝へ落ちるため、
   時系列の画面と字面が食い違って見える。ここだけゴシックにそろえる。 */
.head-static h1 {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(1.4rem, 5.8vw, 1.7rem);
  letter-spacing: 0.01em;
}

/* 2つの入れ方の比べ物。同じ問いに対して両方の答えを並べる。
   別々の箇条書きにすると、対応する項目を目で探すことになる。 */
.cmp { margin: 0 0 4px; }
.cmp-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.cmp-row:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cmp-q {
  margin: 0 0 6px !important;
  font-weight: 700;
  font-size: 0.86rem !important;
  color: var(--muted);
}
.cmp-pair { display: grid; gap: 8px; }
@media (min-width: 560px) {
  .cmp-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.cmp-pair > p {
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--paper);
  font-size: 0.86rem !important;
  line-height: 1.7;
}
.cmp-pair > p.is-keep { border-left: 3px solid var(--accent); }
.cmp-pair > p.is-once { border-left: 3px solid var(--line); }
.cmp-side {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* 目次。このページは長く、比べたい項目を行き来する。
   時系列から来た人だけでなく、検索でここへ直接来る人もいる。 */
.doc-nav {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.doc-nav h2 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--muted-on-paper);
}
.doc-nav ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink);
}
.doc-nav a { color: var(--accent); }

/* 2つの入れ方の名札。比べ物の前に、まず何と何なのかを出す。 */
.way-cards { display: grid; gap: 10px; margin: 0 0 16px; }
@media (min-width: 560px) {
  .way-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.way-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
}
.way-card.is-keep { border-left: 3px solid var(--accent); }
.way-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px !important;
  font-size: 0.95rem;
}
.way-card p { margin: 0 0 8px !important; font-size: 0.86rem !important; }
.way-card a { font-size: 0.84rem; }