/* pages.css — ドパメニュー（/menu/）と印刷（/menu/print/）だけが読む見た目
 *
 * 🚨 style.css へ戻さない。全ページが読むファイルなので、この分がそのまま
 *    体験ページの初期転送に乗る（設計 §0-6：初回操作まで 1.0 秒・転送 60KB 以内）。
 */

/* ---------- S3: ドパメニュー ---------- */
.wrap--top { padding-bottom: 0; }

/* ライブプレビュー（親指で隠れない高さ・設計 §8-3） */
.mpv {
  height: 38vh; min-height: 240px; margin: 8px 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}
.mpv__c { width: 100%; height: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.chips li { display: flex; gap: 4px; align-items: stretch; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.94rem; line-height: 44px;
  color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
/* 追加済みは薄くする。0.5 まで落とすと夜の背景でコントラスト比 4.4 になり AA を割る */
.chip[data-on="1"] { opacity: 0.66; }
.chip--go {
  text-decoration: none; color: var(--neon); border-color: rgba(255, 198, 61, 0.5);
  background: transparent;
}
.chip:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.chip:active { transform: translateY(1px); }

/* 5 分類のタブ（設計 §8-3：横スクロール）。
   🚨 折り返さない。折り返すと下の内容の位置が画面幅で変わり、
   「いま何番目のタブを見ているか」が分かりにくくなる。
   スクロールはこの帯の中だけで起きる＝ページ全体は横に動かない。 */
.tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; margin: 8px 0 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__b { flex: 0 0 auto; white-space: nowrap; }
.tabs__b {
  min-height: 44px; padding: 0 12px; border-radius: 10px 10px 0 0; cursor: pointer;
  font: inherit; color: var(--cream); background: rgba(255, 243, 214, 0.06);
  border: 1px solid rgba(255, 243, 214, 0.2); border-bottom: none;
}
.tabs__b[aria-selected="true"] { background: var(--neon); color: var(--night); font-weight: 700; }
.tabs__b:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.tabs__n { margin-left: 6px; font-size: 0.82rem; opacity: 0.85; }
.pane[hidden] { display: none; }
.pane__h { margin: 16px 0 4px; font-size: 0.98rem; color: var(--neon); }

.flds { display: flex; flex-wrap: wrap; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; }
.fld__l { font-size: 0.86rem; color: var(--cream-dim); }
.fld__i {
  min-height: 44px; padding: 0 12px; border-radius: 10px; font: inherit; font-size: 1rem;
  color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
.fld__i:focus-visible { outline: 3px solid var(--neon); outline-offset: 1px; }
.free { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 10px 0 0; }
.free .fld { flex: 1 1 180px; }
.free__n { font-size: 0.82rem; color: var(--cream-dim); padding-bottom: 12px; }

.items { margin: 6px 0 0; padding: 0; list-style: none; }
.mit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255, 243, 214, 0.14);
}
.mit__e {
  width: 44px; min-height: 44px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 1.2rem; color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
.mit__t { flex: 1 1 140px; }
.mit__s {
  min-height: 44px; border-radius: 10px; font: inherit; font-size: 0.92rem;
  color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
.mit__b { display: flex; gap: 4px; }
.mit__x {
  width: 44px; min-height: 44px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 1.05rem; color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
/* 端の項目のボタン。押せなくはしないので、薄くしすぎず AA を保つ */
.mit__x[data-edge="1"] { opacity: 0.66; }
.mit__e:focus-visible, .mit__x:focus-visible, .mit__s:focus-visible {
  outline: 3px solid var(--neon); outline-offset: 2px;
}
.mit__p { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.mit__p[hidden] { display: none; }
.mit__ec {
  width: 44px; min-height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.2rem;
  color: var(--cream); background: rgba(255, 243, 214, 0.08);
  border: 1px solid rgba(255, 243, 214, 0.28);
}
.mit__ec:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }

.seg--wrap { flex-wrap: wrap; border-radius: 14px; }
/* 🚨 4 つを 1 行に詰めると 360px で「カードを保存」が 2 行に折れる。
   flex だと flex-basis:0 のせいで全部を 1 行へ押し込もうとするので、2 列に置く。 */
.bar--menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: auto;
  padding: 8px 10px;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.bar--menu .btn { width: 100%; white-space: nowrap; }
@media (min-width: 560px) {
  .bar--menu { grid-template-columns: repeat(4, 1fr); }
}
.emoji-src[hidden] { display: none; }

/* ---------- S3: 印刷ページ ---------- */
.prt {
  max-width: 720px; margin: 0 auto 32px; padding: 20px 22px;
  background: #ffffff; color: #1a1a1a; border-radius: 8px;
  /* 画面では最初から A4 の形で場所を取っておく。中身は最初の描画のあとに入るので、
     ここで高さを確保しないと入った瞬間に下（フッター）が動く（実測 CLS 0.22）。
     印刷の時はこの指定を外す＝本物の用紙の流し込みに任せる。 */
  aspect-ratio: 210 / 297;
  overflow: hidden;
  /* 用紙の下端（できた日の欄）を底に固定し、中身だけが伸び縮みするようにする。
     こうしないと中身が入った瞬間に下端が押し出されて動く（実測 CLS 0.031）。
     画面では中身の側がスクロールし、印刷では下の @media print が全部を解除する。 */
  display: flex;
  flex-direction: column;
}
.prt__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* 切り替えで高さが変わらないように、2 つの状態を同じマスへ重ねる。
   [hidden] は display:none なのでマスから消えてしまう＝ここだけ visibility へ差し替える。 */
.prt__state { display: grid; }
.prt__state > * { grid-area: 1 / 1; margin: 0; }
.prt__state > [hidden] { display: block; visibility: hidden; pointer-events: none; }
/* 「印刷する」と空状態の注記だけを同じマスに重ねる（行ごと重ねない）。
   マスの高さは常に両方の大きいほうなので、切り替えても下は動かない＝CLS 0。 */
.prt__swap { display: grid; align-items: center; flex: 1 1 auto; min-width: 0; }
.prt__swap > * { grid-area: 1 / 1; margin: 0; }
.prt__swap > [hidden] { display: block; visibility: hidden; pointer-events: none; }
.prt__swap > .note { pointer-events: none; }
.prt__hd { border-bottom: 2px solid #1a1a1a; padding-bottom: 8px; margin-bottom: 12px; }
.prt__n { margin: 0; font-size: 1.5rem; }
.prt__d { margin: 2px 0 0; font-size: 0.9rem; color: #5a5a5a; }
.prt__s { margin: 0 0 12px; break-inside: avoid; }
.prt__h {
  margin: 0 0 4px; font-size: 1rem; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px;
}
.prt__l { margin: 0; padding: 0; list-style: none; }
.prt__i { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.96rem; }
.prt__box {
  width: 13px; height: 13px; border: 1.5px solid #1a1a1a; border-radius: 3px; flex: none;
}
.prt__e { flex: none; }
.prt__t { flex: 1 1 auto; }
.prt__g { flex: none; font-size: 0.8rem; color: #5a5a5a; }
.prt__ft {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  border-top: 1px solid #1a1a1a; padding-top: 6px; font-size: 0.82rem; color: #5a5a5a;
}
.prt__rule { flex: 1 1 auto; border-bottom: 1px solid #bbbbbb; height: 1px; }
.prt__acts { display: flex; flex-wrap: wrap; gap: 8px; }

@media print {
  /* A4 縦 1 枚（設計 §8-4）。白黒でも読める＝色に意味を持たせない。
     🚨 本文の行間は 1.75 なので、そのまま刷ると 5 分類を上限まで入れた人が 2 枚になる。
     印刷の時だけ行間を詰める（実測：28 項目で 2 枚 → 1 枚）。 */
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #ffffff; color: #1a1a1a; }
  .hd, .ft, .skip, .prt__ui, .ad, .note { display: none !important; }
  .prt { max-width: none; margin: 0; padding: 0; border-radius: 0; line-height: 1.3;
         aspect-ratio: auto; overflow: visible; display: block; }
  .prt__body { overflow: visible; }
  .prt__hd { padding-bottom: 4px; margin-bottom: 6px; }
  .prt__s { margin-bottom: 5px; }
  .prt__l { line-height: 1.3; }
  .prt__i { padding: 0.6px 0; font-size: 10.5pt; line-height: 1.3; }
  .prt__n { font-size: 16pt; }
  .prt__d { font-size: 9pt; }
  .prt__h { font-size: 11pt; margin-bottom: 2px; }
  .prt__ft { margin-top: 8px; padding-top: 4px; font-size: 8pt; }
}

/* 広告はアクションバーから 24px 以上離す（設計 §8-6・誤クリックを誘わない） */
.ad[data-ad="menu_below"] { margin-top: 28px; }

/* 取り消しなど、文章の中に置く小さめのボタン。
   小さめでも押せる大きさ（44px）は崩さない。 */
.btn--small { min-height: 44px; padding: 0 14px; font-size: 0.9rem; margin-left: 6px; }


/* ---------- S4: 読みもの本体（/guide/ ・/about/ ・/privacy/ ・/terms/） ---------- */

/* 記事は体験ページより行間を広く取る（読む時間が長いため）。 */
.doc { color: var(--cream); line-height: 1.85; }
.doc h3 {
  font-size: 1.02rem; margin: 26px 0 8px; color: var(--neon);
  border-left: 4px solid var(--neon); padding-left: 10px;
}
.doc h3:first-child { margin-top: 0; }
.doc p { margin: 0 0 14px; }
.doc > :last-child { margin-bottom: 0; }

/* 表は横に溢れさせずに、その枠の中だけスクロールさせる
   （360px でページ全体が横スクロールすると体験が壊れる）。 */
.tblw { overflow-x: auto; margin: 0 0 14px; -webkit-overflow-scrolling: touch; }
.tbl { border-collapse: collapse; width: 100%; min-width: 320px; font-size: 0.9rem; }
.tbl th, .tbl td {
  border: 1px solid var(--night-3); padding: 8px 10px; text-align: left; vertical-align: top;
}
.tbl th { background: var(--night-2); color: var(--neon); white-space: nowrap; }
.tbl .lnk { min-height: 0; display: inline; }