/* ============================================================
   css/components.css — カード / 見出し / 席次表 / プロフィール /
                        メニュー表の各パーツ
   色とフォントは theme.css のトークン経由でのみ参照します。
   ============================================================ */

/* ---------- 共通パーツ -------------------------------------- */

.card {
  background: var(--card);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  margin: 0 var(--page-gutter) var(--card-gap);
  padding: var(--card-pad-y) var(--card-pad-x);
}

.card--tight {
  padding: 26px var(--card-pad-x);
}

/* 席次・進行タブの上部専用。開いた直後に会場図の全卓が見えるよう詰める */
.card--compact {
  padding: var(--card-pad-compact) var(--card-pad-x);
}

.card--head {
  margin-bottom: var(--card-gap-compact);
}

.card--map {
  padding: var(--map-pad) var(--card-pad-x);
}

.sec-title {
  text-align: center;
  margin-bottom: 32px;
}

.sec-title .en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--title-en-size);
  letter-spacing: 0.16em;
  color: var(--title-en-color);
  line-height: 1.2;
}

.sec-title .ja {
  display: block;
  font-size: var(--title-ja-size);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--title-ja-color);
  margin-top: 6px;
}

/* 欧文と和文を1行に組む縦詰め版(席次・進行タブの見出し) */
.sec-title--inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sec-title--inline .en {
  font-size: 1.2rem;
}

.sec-title--inline .ja {
  margin-top: 0;
}

.msg {
  font-size: 0.98rem;
  text-align: center;
  line-height: 2.3;
}

.note {
  font-size: 0.86rem;
  line-height: 2.1;
  text-align: center;
  color: var(--ink);
}

.foot {
  padding: 4px 0 34px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--accent);
}

/* ---------- モーション(SPEC §4.4)---------------------------
   静止時の見た目は変えず、動きだけを足す。
   ・.motion-ready は js/reveal.js が付ける。JSが動かないときは
     何も隠れないので、白紙になることがない
   ・prefers-reduced-motion: reduce では、この節はまるごと効かない
   ・動かすのは transform と opacity だけ(方眼紙の背景は動かさない) */

@media (prefers-reduced-motion: no-preference) {
  /* 初回表示のリブール */
  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(var(--motion-rise));
    transition:
      opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
      transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
  }

  .motion-ready .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* 検索などでプログラム的にスクロールする直前は、動かさず即座に出す */
  .motion-ready .reveal.is-revealed-instant,
  .motion-ready .reveal.is-revealed-instant .reveal-photo {
    transition: none;
  }

  /* 写真はリブールに scale(1.04)→1 を重ねる(ゆっくり寄る質感) */
  .motion-ready .reveal .reveal-photo {
    transform: scale(var(--motion-photo-scale));
    transition: transform calc(var(--motion-duration) * 1.4) var(--motion-ease)
      var(--reveal-delay, 0ms);
  }

  .motion-ready .reveal.is-revealed .reveal-photo {
    transform: none;
  }

  /* タブ切替: 出る側フェード → 入る側フェード+ライズ */
  .motion-ready .panel {
    transition:
      opacity var(--motion-tab-in) var(--motion-ease),
      transform var(--motion-tab-in) var(--motion-ease);
  }

  .motion-ready .panel.is-leaving {
    opacity: 0;
    transition-duration: var(--motion-tab-out);
  }

  .motion-ready .panel.is-entering {
    opacity: 0;
    transform: translateY(var(--motion-rise));
    transition: none;
  }

  /* 卓の一覧: 開くと段ごとに少し遅れて立ち上がる */
  .motion-ready .table-list__item {
    opacity: 0;
    transform: translateY(var(--motion-rise));
    transition:
      opacity var(--motion-list-in) var(--motion-ease) var(--list-delay, 0ms),
      transform var(--motion-list-in) var(--motion-ease) var(--list-delay, 0ms);
  }

  .motion-ready .table-list.is-open .table-list__item {
    opacity: 1;
    transform: none;
  }

  /* 畳むときは待たせず、遅延なしで短く消す */
  .motion-ready .table-list.is-closing .table-list__item {
    transition-duration: var(--motion-duration-fast);
    transition-delay: 0ms;
  }

  .motion-ready .list-toggle__caret {
    transition: transform var(--motion-duration-fast) var(--motion-ease);
  }

  /* 卓詳細のボトムシート: 下からスライドイン */
  .motion-ready .sheet {
    transition: transform var(--motion-sheet-in) var(--motion-ease);
  }

  .motion-ready .sheet.is-closing {
    transition-duration: var(--motion-sheet-out);
  }

  /* 指で引いている間は追従させる(トランジションを切る) */
  .motion-ready .sheet.is-dragging {
    transition: none;
  }

  .motion-ready .sheet-overlay {
    transition: opacity var(--motion-sheet-in) var(--motion-ease);
  }

  .motion-ready .sheet-overlay.is-open {
    transition-duration: var(--motion-sheet-out);
  }

  /* 写真の拡大表示: 暗幕がすっと出て、写真がわずかに寄る */
  .motion-ready .lightbox {
    transition: opacity var(--motion-lightbox-out) var(--motion-ease);
  }

  .motion-ready .lightbox.is-open {
    transition-duration: var(--motion-lightbox-in);
  }

  .motion-ready .lightbox__image {
    transition:
      transform var(--motion-lightbox-in) var(--motion-ease),
      opacity var(--motion-lightbox-in) var(--motion-ease);
  }

  /* パスコードゲートのフェードアウト */
  .gate.is-closing {
    opacity: 0;
    transition: opacity var(--motion-gate-out) var(--motion-ease);
    pointer-events: none;
  }
}

/* ---------- おまけ: 画面の底からにょきっと出てくるふたり -------
   プロフィールを最後までスクロールすると、タブバーの上から
   ふたりの上半身と吹き出しが現れる。装飾なので pointer-events は切る */

.peek-sentinel {
  height: 1px;
}

/* にょきっと出るふたりが、本文やフッターに重ならないようにする余白。
   ここが空いているので、最下部まで読んでも文字が隠れない */
.peek-clearance {
  height: var(--peek-clearance);
}

.peek {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  overflow: hidden;
  pointer-events: none;
  z-index: 25; /* コンテンツの上、タブバー(30)の下 */
}

/* セリフの吹き出し。日本語の組みを整える:
   palt(約物のツメ)・line-break: strict(禁則を厳しく)・わずかな字間 */
.peek__bubble {
  position: relative;
  background: var(--card);
  border: var(--border-width) solid var(--ink);
  border-radius: var(--peek-bubble-radius);
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.7;
  text-align: center;
  letter-spacing: var(--peek-bubble-tracking);
  font-feature-settings: 'palt' 1;
  line-break: strict;
  padding: 9px 20px;
  margin-bottom: calc(var(--peek-tail-h) + 4px);
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 50% 100%;
}

/* セリフを入れ替える一瞬だけ、いったん消す(出し直しの演出) */
.peek__bubble.is-swapping {
  opacity: 0;
  transform: scale(0.55);
  transition: none;
}

/* 吹き出しのしっぽ。clip-path の三角を2枚重ねて、
   外側(紺)を1pxだけ見せる=縁取りを残したまま先端をとがらせる */
.peek__bubble::before,
.peek__bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 外側(縁取り) */
.peek__bubble::before {
  width: var(--peek-tail-w);
  height: var(--peek-tail-h);
  margin-left: calc(var(--peek-tail-w) / -2);
  bottom: calc(var(--peek-tail-h) * -1);
  background: var(--ink);
}

/* 内側。左右を 1.4px ずつ・先端を 1.5px 詰め、上は本体の罫線を隠すため 2px 伸ばす */
.peek__bubble::after {
  width: calc(var(--peek-tail-w) - 2.8px);
  height: calc(var(--peek-tail-h) + 0.5px);
  margin-left: calc((var(--peek-tail-w) - 2.8px) / -2);
  bottom: calc(1.5px - var(--peek-tail-h));
  background: var(--card);
}

.peek__duo {
  position: relative; /* 手の名前のバーストの基準 */
  display: flex;
  align-items: flex-end;
}

/* バーストを出す側の切り替えは、--peek-hand-side(1=新婦側/向かって右、
   -1=新郎側/向かって左)ひとつで完結する(位置も傾きもこの値で決まる)。
   既定値は theme.css / theme-plain.css のトークンなので、あちらの1行で反転できる。
   JS はタップのたびに、この2つのクラスを .peek に付け替えて上書きする */
.peek--hand-right {
  --peek-hand-side: 1;
}

.peek--hand-left {
  --peek-hand-side: -1;
}

/* じゃんけんで出した手の名前。漫画の効果音のようなギザギザのバースト。
   position: absolute なので、出ても .peek の高さ(=余白の計算)は変わらない */
.peek__hand {
  position: absolute;
  /* 置きどころは「ビューポートの中央から何%」ではなく「ふたりの絵の外縁」基準。
     .peek__duo の中央(50%)から絵1枚ぶん(--peek-char-w)で外縁に届き、
     そこからさらに --peek-hand-out だけ外へ出したところが箱の中心になる。
     肩に少し重なりつつ外へ張り出す形。真ん中は吹き出しのしっぽのために空ける */
  left: calc(50% + var(--peek-hand-side) * (var(--peek-char-w) + var(--peek-hand-out)));
  /* 頭〜肩のあたり。上げすぎるとしっぽや画面外に近づくので注意 */
  bottom: var(--peek-hand-bottom);
  /* 傾きは反対側では鏡像にする(左右どちらでも外へ跳ねて見えるように) */
  --peek-hand-rot: calc(var(--peek-hand-tilt) * var(--peek-hand-side));
  z-index: 1;
  padding: 11px 15px;
  color: var(--peek-hand-fg); /* 地色は ::after が持つ(下の重ね順の注記) */
  font-family: var(--font-ja);
  /* 11.8px では小さすぎて何を出したか読み取れないので 12.5px に上げる。
     位置(ふたりの外側・左右ランダム)は施主承認済みなので変えないこと */
  font-size: 0.78rem;
  font-weight: var(--weight-mid);
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(var(--peek-hand-rot)) scale(0.4);
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
}

/* 地(白)と輪郭線(紺)は、同じ多角形を2枚重ねて作る。
   ・::before = 輪郭。--peek-hand-edge-w ぶん外に広げた一回り大きい多角形
   ・::after  = 地。要素の箱ぴったりの多角形。あとから描かれるので上に載る
   本文(手の名前)は、そのさらに上に描かれる。
   ※ border は clip-path に一緒に切られるので使えない。
     filter: drop-shadow も、clip-path が filter の結果ごと切ってしまうため
     このブラウザでは輪郭にならない(実測で確認済み)。
   ※ 輪郭は箱の外側にはみ出すだけで、要素の箱の大きさは変わらない
     (= .peek の高さに影響しない) */
.peek__hand::before,
.peek__hand::after {
  content: '';
  position: absolute;
  z-index: -1; /* 本文より下、要素の(透明な)背景より上 */
  /* 16方向のトゲ。外半径50%・内半径44%で、漫画の効果音と分かる範囲の
     浅いギザギザにしている(内半径を下げるほど尖る) */
  clip-path: polygon(
    50% 0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%,
    100% 50%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%,
    50% 100%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%,
    0% 50%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%
  );
}

.peek__hand::before {
  inset: calc(var(--peek-hand-edge-w) * -1);
  background: var(--peek-hand-edge);
}

.peek__hand::after {
  inset: 0;
  background: var(--peek-hand-bg);
}

.peek__hand.is-on {
  opacity: 1;
  transform: translateX(-50%) rotate(var(--peek-hand-rot)) scale(1);
}

/* ふたりが引っ込んでいる間は、バーストだけ空に浮かせない */
.peek:not(.is-up) .peek__hand.is-on {
  opacity: 0;
  transform: translateX(-50%) rotate(var(--peek-hand-rot)) scale(0.4);
}

/* タップできるのは、ふたりの絵だけ。まわりは下のページに素通しする */
.peek__talk {
  padding: 0;
  background: none;
  border: 0;
  pointer-events: none;
}

.peek__talk .peek__char {
  pointer-events: auto;
}

/* 出入りの位置(--peek-y)と、タップの反応(--peek-scale)を
   ひとつの transform に合成する。片方だけ書き換えても崩れない */
.peek__char {
  width: var(--peek-char-w);
  height: auto;
  transform: translateY(var(--peek-y, 105%)) scale(var(--peek-scale, 1));
}

.peek.is-up .peek__char {
  --peek-y: 0%;
}

/* タップされた瞬間だけ、少し縮む(離すとぽよんと戻る) */
.peek__talk.is-reacting .peek__char {
  --peek-scale: var(--peek-pop-scale);
}

.peek.is-up .peek__bubble {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .peek__char {
    transition: transform var(--motion-pop) var(--motion-pop-ease);
  }

  .peek__char--bride {
    transition-delay: 90ms;
  }

  .peek__bubble {
    transition:
      opacity var(--motion-duration-fast) var(--motion-ease)
        var(--peek-bubble-delay, 300ms),
      transform var(--motion-pop) var(--motion-pop-ease)
        var(--peek-bubble-delay, 300ms);
  }

  /* 手の名前は、出る瞬間だけ弾む(--motion-pop-ease が少し行きすぎて戻る) */
  .peek__hand {
    transition:
      opacity var(--motion-poke) var(--motion-ease),
      transform var(--peek-hand-pop) var(--motion-pop-ease);
  }

  /* 縮むときは速く。戻りは既定の弾む動きに任せて「ぽよん」にする */
  .peek__talk.is-reacting .peek__char {
    transition-duration: var(--motion-poke);
    transition-delay: 0ms;
  }

  /* 引っ込むときは、さっと */
  .peek:not(.is-up) .peek__char,
  .peek:not(.is-up) .peek__hand,
  .peek:not(.is-up) .peek__bubble {
    transition-duration: var(--motion-duration-fast);
    transition-delay: 0ms;
  }
}

/* ---------- 席次表 ------------------------------------------ */

/* 見出し・検索・会場図は1枚のカード(.card--finder)。
   上は詰めて、下は会場図の余白(以前の会場図カードと同じ)。
   検索欄がこのカードの中でだけ貼り付くよう、1枚にしている */
.card--finder {
  padding: var(--card-pad-compact) var(--card-pad-x) var(--map-pad);
  margin-bottom: var(--card-gap);
}

.card--finder > .map {
  margin-top: var(--card-pad-compact);
}

.search__label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

/* 検索欄。カードの中でだけヘッダーの下に貼り付く(会場図に着地したあとも探し直せる)。
   貼り付いている間だけ、上下に紙の地(::before)と下の細い罫を出す。
   地は z-index:-1 で検索欄の後ろ(会場図の上)に敷く。ふだんは見えないので、
   貼り付く前と後で検索欄の位置もカードの高さも変わらない。
   z-index はヘッダー(20)・タブバー(30)・卓のシート(55/60)より下 */
.search__bar {
  position: sticky;
  top: calc(var(--header-h) + var(--search-stuck-pad));
  z-index: 6;
}

.search__bar::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--search-stuck-pad));
  bottom: calc(-1 * var(--search-stuck-pad));
  left: calc(-1 * var(--card-pad-x));
  right: calc(-1 * var(--card-pad-x));
  z-index: -1;
  background: var(--card);
  border-bottom: var(--border-width) solid var(--divider);
  opacity: 0;
  pointer-events: none;
}

.search__bar.is-stuck::before {
  opacity: 1;
}

.search__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 1rem;
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-input);
}

.search__input::placeholder {
  color: var(--field-placeholder);
}

/* 検索結果。箱に入れず、細い罫で区切った行(1行 64px 以上)を並べる */
.search__results {
  margin-top: 4px;
}

.search__results:empty {
  display: none;
}

.hit {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  min-height: var(--hit-row-h);
  padding: 10px 2px 10px 4px;
  background: none;
  border: 0;
  border-bottom: var(--border-width) solid var(--divider);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hit:active {
  background: var(--press-tint);
}

.hit__main {
  min-width: 0;
}

.hit__name {
  display: block;
  font-size: 1.05rem;
  line-height: 1.5;
}

.hit__tag {
  display: block;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--tag-fg);
  letter-spacing: 0.08em;
}

/* 卓は「大きな数字(赤の欧文・背丈のそろった数字)+ 小さな番テーブル」 */
.hit__table {
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  color: var(--accent);
  line-height: 1;
}

.hit__table-no {
  font-family: var(--font-en);
  font-size: var(--hit-no-size);
  font-weight: var(--weight-mid);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
}

.hit__table-suffix {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.hit__table.is-ja .hit__table-no {
  font-family: var(--font-ja);
  font-size: 1.05rem;
  letter-spacing: 0.14em;
}

.hit__go {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search__empty {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.9;
}

/* 会場図 */

.map {
  position: relative;
  width: 100%;
  aspect-ratio: var(--map-aspect);
  background: var(--map-bg);
  border: var(--border-width) solid var(--map-border);
  border-radius: var(--radius-card);
}

.map__caption {
  font-size: 0.76rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 9px;
  line-height: 1.7;
}

/* 検索結果をタップしたとき、会場図のすぐ下に残る確認行。
   会場図に着地すると検索結果は画面外へ出るので、氏名と卓はここで確認する。
   赤い卓・椅子と同じ色でつなげ、細い枠だけの控えめな帯にする */
.map__found-wrap {
  margin: 10px 0 0;
}

/* 行そのものがボタン。タップでその卓の詳細シートが開く */
.map__found {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--card);
  border: var(--border-width) solid var(--table-hit-border);
  border-radius: var(--radius-card);
  color: var(--accent);
  font-family: var(--font-ja);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
}

.map__found-line {
  display: block;
}

.map__found-hint {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

/* 名簿(お名前)が届くまでの一言。会場図の卓だけ先に描き、その下に出す。
   届いたら hidden になるので、ふだんの見た目(キャプションの位置)は変わらない */
.map__status {
  margin-top: 9px;
  text-align: center;
}

.map__status-text {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.9;
}

/* 読みこめなかったときの「もう一度読みこむ」。赤(エラー・ヒット)は使わず紺の細い枠 */
.map__retry {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--card);
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.map__retry:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 卓の詳細(シート・一覧)で、名簿が届く前に出す一言 */
.table-detail__status {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.9;
}

/* 卓の当たり判定になる四角い枠。見た目は中の .map__disc が担う */
.map__table {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  background: none;
  border: 0;
  line-height: 1.2;
}

.map__table--circle {
  aspect-ratio: 1 / 1;
}

.map__table--rect {
  aspect-ratio: 4 / 1.5;
}

.map__disc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--table-fill);
  border: var(--border-width) solid var(--table-border);
  color: var(--table-fg);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.map__table--circle .map__disc {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  font-family: var(--font-en);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.map__table--rect .map__disc {
  left: 0;
  right: 0;
  top: 0;
  height: 64%;
  border-radius: var(--radius-card);
  font-family: var(--font-ja);
  /* 小さな枠の中の和文なので、13px を下限にしつつ字間で収める */
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

/* 椅子ドット(人数分。並び順はシート図と同じ) */
.map__seat {
  position: absolute;
  width: var(--map-seat-size);
  height: var(--map-seat-size);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  /* 紙の白で抜いた細い線の丸 */
  background: var(--map-seat-fill);
  border: var(--map-seat-stroke-w) solid var(--map-seat-color);
  transition: background-color 0.2s, border-color 0.2s;
}

.map__table.is-active .map__disc {
  background: var(--table-hit-fill);
  border-color: var(--table-hit-border);
  color: var(--table-hit-fg);
  border-width: 2px;
}

/* 検索でヒットした椅子。赤にするだけでなく、ひと回り(+2px)大きくして
   図の上で見つけやすくする。中心は translate(-50%, -50%) で固定されるので
   卓に対する位置はずれない */
.map__seat.is-hit {
  width: calc(var(--map-seat-size) + 2px);
  height: calc(var(--map-seat-size) + 2px);
  background: var(--map-seat-hit-color);
  border-color: var(--map-seat-hit-color);
}

/* 卓別名簿 */

.card--map {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.table-card__head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: var(--border-width) solid var(--divider);
}

.table-card__label {
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  line-height: 1.1;
}

.table-card__label.en {
  font-family: var(--font-en);
}

.table-card__label.is-ja {
  font-family: var(--font-ja);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 卓別シート図 ------------------------------------------------
   丸卓: 会場の配席システムと同じく、円卓の左右に名札を縦一列ずつ。
         3列×10段のグリッドで、まん中の列に卓の円、左の列に席1〜5、
         右の列に席6〜10(どちらも上=高砂側から下へ)。名札は1人2段ぶん。
         空席の隙間は詰めて、列の人数ぶんを卓の中心の高さに揃えて
         上下対称に並べる。どの段に入るかは JS が決める(layoutRound)
   高砂: 長卓の上に2席を横並び                                  */

.seat-chart {
  position: relative;
  width: 100%;
}

/* 左右の列は同じ幅(1fr)、卓の円は図の幅の --seat-chart-disc(26%)。
   名前は「山田 太郎 様」と1行で組むので、円を小さくして左右の列を広げる。
   375px幅(図の幅 325px)で左右の列は 112px あり、いちばん長い
   「山田 健一郎 様」(姓2字+名3字)(名札 約107px)まで1行に収まる(円 28% だと列 109px で余白 2px しかない)。
   320px幅(図の幅 270px)では列が 92px になり、入りきらない名前だけが
   姓と名の間で2行に折れる(.seat__part。名前の途中では割れない)。
   段は 10段を 1fr にそろえ、名札は2段ぶん(間の row-gap 1つを含む)を使う。
   名札の中心どうしの間隔は「名札の高さ + row-gap」で、1行の名札なら 375px幅で 36.3px
   (2行だった頃は 54.6px)。1行になったぶん図の高さも詰まり、間延びしない。
   2行に折れる名札が1人でもいる卓は、1fr で全段がその高さにそろう(間隔は均等のまま)。
   半段ずつずらせるので、2人・4人の列も卓の中心に揃い、人数が少なくても間隔は広げない。
   名札は列の中で卓の側に寄せ(左の列は右寄せ・右の列は左寄せ)、
   椅子が卓を囲んでいる形に見せる */
.seat-chart--round {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--seat-chart-disc) minmax(0, 1fr);
  grid-template-rows: repeat(10, 1fr);
  column-gap: var(--seat-chart-col-gap);
  row-gap: var(--seat-chart-row-gap);
  align-items: center;
}

/* 丸卓図の向きの説明(「図の上が高砂側です」)。
   図そのものより先に読めるよう、図のすぐ上に小さく置く */
.seat-chart__caption {
  margin-bottom: 6px;
  font-size: 0.76rem;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.7;
}

.seat-chart__table {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--table-fill);
  border: var(--border-width) solid var(--table-border);
  border-radius: var(--radius-pill);
  color: var(--table-fg);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.seat {
  width: 22%;
  padding: 3px 1px;
  text-align: center;
  line-height: 1.45;
  /* サイトの中核の情報なので、ご年配の方でも読める 14px を下限にしています */
  font-size: 0.875rem;
  color: var(--ink);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-card);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.seat-chart--round .seat {
  width: auto;
  padding: var(--seat-pad-y) var(--seat-pad-x);
  min-width: min(100%, 5em);
  max-width: 100%;
}

.seat-chart--round .seat--left {
  justify-self: end;
}

.seat-chart--round .seat--right {
  justify-self: start;
}

/* 姓・「名+様」のそれぞれのかたまり。中では折り返さないので、
   折れるのは間の空白(姓と名の間)だけになる */
.seat__part {
  white-space: nowrap;
}

/* 「様」は名前に添う小さい字。名札の幅をふくらませないよう 11px 前後に抑える */
.seat__hon {
  margin-left: 0.18em;
  font-size: 0.79em;
}

/* 長いお名前は自動で少し縮める(名札どうしがぶつからない範囲で) */
.seat.is-long {
  font-size: 0.76rem;
}

.seat.is-xlong {
  font-size: 0.68rem;
}

.seat.is-hit {
  background: var(--table-hit-fill);
  border-color: var(--table-hit-border);
  color: var(--table-hit-fg);
}

/* 着地時に席へ視線を誘導するパルス(会場図の椅子ドットの位置決めの transform には触れない) */
@media (prefers-reduced-motion: no-preference) {
  .seat.is-hit,
  .map__seat.is-hit {
    animation: seat-hit-pulse 0.9s ease-in-out 2;
  }
}

@keyframes seat-hit-pulse {
  50% {
    box-shadow: 0 0 0 6px var(--table-hit-fill);
  }
}

.seat-chart--head {
  padding-top: 4px;
}

.seat-chart__row {
  display: flex;
  justify-content: center;
  gap: 16%;
  margin-bottom: 14px;
}

.seat-chart__row .seat {
  width: 34%;
}

.seat-chart__bar {
  height: 46px;
  margin: 0 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--table-fill);
  border: var(--border-width) solid var(--table-border);
  border-radius: var(--radius-card);
  color: var(--table-fg);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.table-card__count {
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}

.roster {
  list-style: none;
  margin-top: 24px;
  padding-top: 18px;
  border-top: var(--border-width) solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  line-height: 1.7;
  padding: 2px 4px;
  border-radius: var(--radius-card);
}

.roster__item.is-hit {
  background: var(--table-hit-fill);
}

.roster__item.is-hit .roster__name {
  color: var(--accent);
}

.roster__name {
  font-size: 0.95rem;
}

.roster__tag {
  flex: 0 0 auto;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--tag-fg);
}

/* ---------- 卓の一覧(展開式・SPEC §3.1-5)-------------------- */

/* 会場図の下に置く全幅ボタン。シートの「閉じる」と同じ作法だが、
   任意の操作なので枠線だけの軽い見た目にしている */
.list-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - var(--page-gutter) * 2);
  margin: 0 var(--page-gutter) var(--card-gap);
  min-height: var(--list-toggle-h);
  padding: 0 18px;
  background: var(--list-toggle-bg);
  color: var(--list-toggle-fg);
  border: var(--border-width) solid var(--list-toggle-border);
  border-radius: var(--radius-card);
  font-family: var(--font-ja);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.list-toggle__caret {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--list-toggle-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.list-toggle[aria-expanded="true"] .list-toggle__caret {
  transform: rotate(180deg);
}

/* 一覧の末尾にも置く「閉じる」。上の開閉ボタンと見た目はそろえるが、
   こちらは閉じる専用なので、開閉の向きを示す矢印は付けない */

.table-list {
  display: block;
}

.table-list__item.is-active {
  border-color: var(--table-hit-border);
}

/* ---------- 卓詳細のボトムシート(SPEC §3.1-4)---------------- */

/* 背景の半透明オーバーレイ。タップでも閉じられる(閉じ方②) */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--sheet-overlay-bg);
  opacity: 0;
}

.sheet-overlay.is-open {
  opacity: 1;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  max-width: var(--content-max);
  margin: 0 auto;
  height: var(--sheet-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sheet-bg);
  border: var(--border-width) solid var(--sheet-border);
  border-bottom: 0;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: var(--sheet-shadow);
  transform: translateY(100%);
  padding-bottom: env(safe-area-inset-bottom);
}

.sheet.is-open {
  transform: translateY(0);
}

/* 下スワイプで閉じられることを示すつまみ(閉じ方③) */
.sheet__grip {
  flex: 0 0 auto;
  width: 44px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: var(--radius-pill);
  background: var(--sheet-grip);
}

.sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px var(--card-pad-x) 22px;
}

.sheet__footer {
  flex: 0 0 auto;
  padding: 12px var(--card-pad-x) 14px;
  border-top: var(--border-width) solid var(--divider);
  background: var(--sheet-bg);
}

/* 閉じ方①: 全幅・文字入りの大きなボタン(年配のゲスト対策) */
.sheet__close {
  width: 100%;
  min-height: var(--sheet-close-h);
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: var(--radius-input);
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

/* シートの中身。カードの枠は付けない(シート自体が紙になる) */
.table-detail {
  display: block;
}

/* --- 横向き(高さの足りない画面)---------------------------------
   667×375 では、シート本体の表示領域が 208px しかないのに中身は 876px あり、
   丸卓の上3人ぶんしか映らない。相対位置で自分の席を読む図なので、
   円の全体像が見えないと図として成立しない。
   そこで横向きのときだけ
     ・シートを画面いっぱいの高さにし、上下の余白と閉じるボタンを詰める
     ・丸卓は「左に図・右に見出しと名簿」の2段組にして、図は縦に貼り付ける
   ようにする(縦向きのレイアウトには一切影響しません)。 */
@media (orientation: landscape) and (max-height: 480px) {
  .sheet {
    height: 100vh;
    height: 100svh;
    border-radius: 0;
  }

  /* 図の高さを確保するため、上下の余白はぎりぎりまで詰める。
     閉じるボタンだけは指で押せる 44px を下限に残す(縦向きは 54px のまま) */
  .sheet__grip {
    margin: 4px auto 2px;
  }

  .sheet__body {
    padding: 4px var(--card-pad-x);
  }

  .sheet__footer {
    padding: 6px var(--card-pad-x);
  }

  .sheet__close {
    min-height: 44px;
  }

  /* 左列の幅は 300px。卓の円(図の幅の --seat-chart-disc 26% = 78px)の左右に、
     名札の列が 103px ずつ取れる(円との間 8px)。縦向きの 375px幅(列 112px)より
     少し狭いので、いちばん長い「山田 健一郎 様」(姓2字+名3字)(約103.1px)だけは姓と名の間で
     2行に折れ、その卓(1〜3番)は図の高さが 175px → 277px になる。
     それでも 667×375 / 812×375 で図の下端 292px < 閉じるボタンの上端 325px と、
     円の全体像は1画面に収まる(2026-09-26 実測)。
     ここを詰めると名札が列からはみ出し、広げるとそのぶん右列の名簿(112px。
     いちばん長いお名前で約104px)が狭くなる。
     名札は14pxがご年配の方の下限なので、字を小さくして逃げないこと */
  .sheet .table-detail--round {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .sheet .table-detail--round .table-card__head {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .sheet .table-detail--round .seat-chart__caption {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }

  /* 図は左列に置いたまま。名簿が長くて本体がスクロールしても、
     円の全体像が画面から消えないよう縦に貼り付ける */
  .sheet .table-detail--round .seat-chart--round {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
  }

  .sheet .table-detail--round .roster {
    grid-column: 2;
    grid-row: 3;
    margin-top: 14px;
    padding-top: 12px;
  }

  /* 右列は 160px ほどしかないので、名前と肩書きを横並びにすると
     お名前が1文字ずつ折り返してしまう。縦に積んで1行に収める */
  .sheet .table-detail--round .roster__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.5;
  }

  .sheet .table-detail--round .roster__name {
    white-space: nowrap;
  }

  /* 見出しと向きの説明も、狭い右列で折り返さないように詰める */
  .sheet .table-detail--round .seat-chart__caption {
    font-size: 0.72rem;
    line-height: 1.5;
  }
}

/* ---------- 写真の拡大表示(ライトボックス)-------------------
   ギャラリーと掲示板の投稿写真から、共通で1つだけ開く。
   #app の外に置いてあるので(index.html 参照)、シートの上にも重なる。
   閉じ方は「閉じる」ボタン / 背景タップ / Esc / ブラウザの戻る。 */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80; /* ボトムシート(60)の上、パスコードゲート(100)の下 */
  display: flex;
  flex-direction: column;
  background: var(--lightbox-bg);
  opacity: 0;
  padding: max(12px, env(safe-area-inset-top)) 12px
    max(12px, env(safe-area-inset-bottom));
}

.lightbox.is-open {
  opacity: 1;
}

/* 写真を置く場所。余ったところは「背景」なのでタップで閉じられる */
.lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画面に収まるように出す(切り抜かない)。ピンチズームは実装しない */
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  opacity: 0;
  transform: scale(var(--lightbox-image-from, 0.98));
}

.lightbox.is-open .lightbox__image {
  opacity: 1;
  transform: scale(1);
}

.lightbox__footer {
  flex: 0 0 auto;
  padding-top: 14px;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
}

/* シートと同じ思想の、全幅・文字入りの大きな「閉じる」 */
.lightbox__close {
  width: 100%;
  min-height: var(--lightbox-close-h);
  background: var(--lightbox-close-bg);
  color: var(--lightbox-close-fg);
  border-radius: var(--radius-input);
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

/* 横向き(高さの足りない画面)では、写真の高さを最優先に詰める */
@media (orientation: landscape) and (max-height: 480px) {
  .lightbox {
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }

  .lightbox__footer {
    padding-top: 8px;
  }

  .lightbox__close {
    min-height: 44px;
  }
}

/* ---------- 本日の流れ(縦タイムライン)---------------------- */

.timeline {
  list-style: none;
}

.timeline__item {
  display: grid;
  grid-template-columns: var(--timeline-time-w) var(--timeline-rail-w) 1fr;
  column-gap: 12px;
  padding-bottom: var(--timeline-gap);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__time {
  font-family: var(--font-en);
  /* 欧文書体の既定はオールドスタイル数字で、1がI・0が小さいoに見える
     (「12:15」が「I2:I5」に読める)。時刻は進行タブで最も機能的な情報なので、
     高さのそろったライニング数字を明示して指定する */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--timeline-time-fg);
  white-space: nowrap;
  text-align: right;
  line-height: 1.5;
}

/* 縦罫(::before)と丸印(::after) */
.timeline__rail {
  position: relative;
}

.timeline__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.75em;
  bottom: calc(var(--timeline-gap) * -1);
  width: var(--border-width);
  transform: translateX(-50%);
  background: var(--timeline-rail-color);
}

.timeline__item:last-child .timeline__rail::before {
  display: none;
}

.timeline__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.75em;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background: var(--timeline-dot-color);
}

.timeline__body {
  min-width: 0;
  padding-bottom: 2px;
}

.timeline__title {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--timeline-title-fg);
}

.timeline__note {
  display: block;
  font-size: 0.79rem;
  line-height: 1.8;
  margin-top: 2px;
  color: var(--timeline-note-fg);
}

.timeline__foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: var(--border-width) solid var(--divider);
}

/* ---------- プロフィールブック ------------------------------
   並べ方の規則(SPEC §4.1.3): 同じ情報は決まった位置・決まった揃え方に置き、
   大小の対比(扉・ギャラリー1枚目だけ大きい)で見せ場をつくる。装飾は足さない */

/* 扉: タブを開いてすぐの1枚。カードの罫線で囲まず、写真そのものを置く。
   左右はカードの外縁にそろえる(下に続くカードと位置を一致させるため)。
   写真がまだ無い間は data/profile.js の hero.placeholder(淡いダミー)が出る */
.hero {
  margin: 0 var(--page-gutter) var(--card-gap);
}

/* タップで拡大できるようボタンにしてあるが、地色も枠も持たせず見た目は写真そのまま */
.hero__photo {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-card);
}

/* height: auto は必須。<img> の height 属性がそのまま高さになると aspect-ratio が効かない */
.hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* 縦にはみ出す分は下側から切る(顔は上寄りに写っていることが多いため) */
  object-position: 50% 30%;
  background: var(--photo-bg);
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

/* 写真の下に小さく添えるふたりの名前(欧文は赤・和文は紺。見出しと同じ配色) */
.hero__caption {
  margin-top: 12px;
  text-align: center;
}

.hero__caption .en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  color: var(--title-en-color);
  line-height: 1.3;
}

.hero__caption .ja {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--title-ja-color);
  margin-top: 4px;
}

/* ふたりのプロフィール。文章は左揃え(段落として読ませるため。SPEC §4.1.3)。
   上から「写真+役割+名前」→ 基本情報の表 → 自己紹介の順 */
.person {
  text-align: left;
}

.person + .person {
  margin-top: 40px;
  padding-top: 40px;
  border-top: var(--border-width) solid var(--divider);
}

/* 写真と名前の段。新郎は写真が左、新婦(.person--flip)は写真が右で、
   同じ構造の鏡写しにする(ふたりが向かい合う印象に)。
   反転するのは写真の位置だけで、文字の揃え方(左)は変えない */
.person__head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.person--flip .person__head {
  flex-direction: row-reverse;
}

.person__photo {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--line);
  background: var(--photo-bg);
  margin: 0;
}

.person__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* 役割(Groom 新郎)。sectionTitle と同じ .en / .ja の組みを、
   写真の横に収まる寸法で組む(1行・欧文のあとに和文) */
.person__role {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--accent);
}

.person__role .en {
  font-family: var(--font-en);
}

.person__role .ja {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
}

/* お名前は段のいちばん大きな文字(写真とそろえて見せ場にする)。
   320px 幅では写真の横に5文字が入りきらないので、狭い画面だけ少し下げる
   (375px 以上で 1.35rem = 21.6px、320px で約 19px) */
.person__name {
  font-size: clamp(1.15rem, 6vw, 1.35rem);
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-top: 4px;
  font-weight: var(--weight-mid);
}

/* 基本情報(生まれ / 好きなもの / マイブーム)は、項目名の幅をそろえた2列の表。
   1列目は auto なので、いちばん長い項目名に列幅がそろう */
.person__facts {
  margin: 22px 0 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.8;
}

.person__facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-top: 0.25em;
}

.person__facts dd {
  margin: 0;
}
/* 項目1つ(「横浜F・マリノス」など)が1かたまり。入りきらないときは項目ごと次の行へ。
   項目そのものが欄より長いとき(マイブームの文や、320px幅の「秋晴れの湖畔で過ごすこと」)
   だけ中で折り返す */
.person__fact-item {
  display: inline-block;
}

/* 自己紹介は段落として読ませる文章なので左揃え。
   行間は定型文(.msg の 2.3)より詰めて、本文らしく 1.8 */
.person__body {
  font-size: 0.92rem;
  line-height: 1.9;
  text-align: left;
}

/* 文節で折り返す文(自己紹介・プロフィールの欄・Q&A の吹き出し)。
   句読点を使わない決まりなので、文の切れ目は data 側の <br>、文節の切れ目は
   <wbr>(と空白)で示してある。keep-all で「それ以外の場所では折らない」ことにして、
   「興味があり / ましたが」のような割れ方をなくす。
   1つの文節が欄より長いときだけ overflow-wrap で文字の途中でも折る(はみ出し防止)。
   ※以前の text-wrap: pretty は iPhone の Safari で全行が短くなり、右に大きな余白が
     残っていたので使わない(2026-09-26 施主の指摘)
   ご挨拶・注記・お品書き・掲示板の案内など、data/ に書いたほかの文も同じ組み方にする
   (「お申 / し付けください」「ござ / います」の割れ方をなくす)。
   word-break: auto-phrase が後ろで指定されている欄は、対応ブラウザ(Chrome)ではそちらが勝ち、
   未対応の Safari ではここの keep-all + <wbr> が効く。
   ゲストが書いた文(掲示板の投稿・ニックネーム)はここに入れない(<wbr> がないので折れなくなる) */
.person__body,
.person__fact-item,
.chat__bubble,
.qa__q,
.msg,
.note,
.map__caption,
.search__empty,
.gallery__hint,
.dish__name,
.dish__desc,
.dish__voice,
.locked__text,
.spot__lines li,
.board__lead,
.board-form__own-note,
.board-form__error,
.board__state,
.gate__lead,
.gate__error,
.gate__hint {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.qa {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.qa__item + .qa__item {
  padding-top: 26px;
  border-top: var(--border-width) solid var(--divider);
}

.qa__q {
  font-size: 1rem;
  font-weight: var(--weight-mid);
  text-align: center;
  margin-bottom: 14px;
}

/* チャット吹き出し(新郎=左・紺系 / 新婦=右・赤系) */

.chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 90%;
}

.chat__row--groom {
  align-self: flex-start;
}

.chat__row--bride {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat__avatar {
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--photo-bg);
}

.chat__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat__row--bride .chat__body {
  align-items: flex-end;
}

.chat__name {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--bubble-name-fg);
  line-height: 1.5;
}

.chat__bubble {
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--bubble-fg);
  border-radius: var(--bubble-radius);
  border: var(--border-width) solid transparent;
}

.chat__row--groom .chat__bubble {
  background: var(--bubble-groom-bg);
  border-color: var(--bubble-groom-border);
  border-top-left-radius: var(--bubble-tail-radius);
}

.chat__row--bride .chat__bubble {
  background: var(--bubble-bride-bg);
  border-color: var(--bubble-bride-border);
  border-top-right-radius: var(--bubble-tail-radius);
}

/* ふたりで声をそろえて答える問い(data の both)。
   新郎=左・新婦=右の振り分けをやめて行ごと中央に置き、
   似顔絵2つ(向かって左=新郎・右=新婦。ほかの吹き出しと同じ側)を
   少し重ねて上に並べる。その下に名前、吹き出しは1つだけ。
   吹き出しは紺(新郎)にも赤(新婦)にも寄せない白地+紺の細い線。
   しっぽ(角を小さくした角)は左上と右上の両方 = 上のふたりから出ている形。
   似顔絵の大きさ・名前の字は既存の吹き出しと同じ(--avatar-size / .chat__name) */
.chat__row--both {
  align-self: center;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.chat__avatars {
  display: flex;
  flex: 0 0 auto;
}

/* 重なった境目が見えるよう、似顔絵のまわりを地色で細くふちどる */
.chat__row--both .chat__avatar {
  box-shadow: 0 0 0 2px var(--bubble-both-ring);
}

.chat__avatars .chat__avatar + .chat__avatar {
  margin-left: calc(var(--bubble-both-overlap) * -1);
}

.chat__row--both .chat__body {
  align-items: center;
}

.chat__row--both .chat__bubble {
  background: var(--bubble-both-bg);
  border-color: var(--bubble-both-border);
  border-top-left-radius: var(--bubble-tail-radius);
  border-top-right-radius: var(--bubble-tail-radius);
  /* 長い答えが「キャッピ / ー」のように語の途中で割れないよう、文節の切れ目で折る
     (未対応のブラウザでは無視されるだけ)*/
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 1枚目だけ幅いっぱいに大きく。2枚目以降は下の横スワイプの帯。
   大小の対比で「見ていく」リズムをつくる(データの並びは先頭から順のまま)。
   枠は 4:5(縦位置の写真も横位置の写真も受けられる比率)。
   ボタンだが地色も枠も持たせず、見た目は写真そのまま */
.gallery-lead {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  border-radius: var(--radius-card);
}

.gallery-lead img {
  width: 100%;
  height: auto; /* height 属性より優先させて aspect-ratio を効かせる */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* 縦にはみ出す分は下側から切る(顔や空は上寄りに写っていることが多いため) */
  object-position: 50% 25%;
  background: var(--photo-bg);
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

/* 横スワイプのカルーセル(2枚目以降)。次の写真が少し覗くことでスワイプできると伝える */
.gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* カード余白の外まで広げて、画面端から端までスワイプできるように */
  margin-inline: calc(-1 * var(--card-pad-x));
  padding-inline: var(--card-pad-x);
}

.gallery::-webkit-scrollbar {
  display: none;
}

/* 1枚ぶんの枠。タップで拡大できるようボタンにしてあるが、
   地色も枠も持たせず、見た目は写真そのままにする */
.gallery__item {
  flex: 0 0 78%;
  width: 78%;
  scroll-snap-align: center;
  display: block;
  border-radius: var(--radius-card);
}

/* 帯に1枚しか残らないとき(写真が2枚だけ)は、右を空けずに幅いっぱいに置く。
   1枚目(4:5)→ 2枚目(1:1)の縦2段になり、大小の対比は保たれる */
.gallery__item:only-child {
  flex-basis: 100%;
  width: 100%;
}

.gallery img {
  width: 100%;
  height: auto; /* height 属性より優先させて aspect-ratio を効かせる */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--photo-bg);
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

/* 「タップで大きくなる」ことは見ただけでは伝わらないので、下に一言添える
   (文言は data/site.js の lightbox.hint。空にすれば出ない) */
.gallery__hint {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink-muted);
}

.closing__signature {
  margin-top: 22px;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-align: center;
}

/* ---------- 本日のBGM -------------------------------------- */

.tracks {
  list-style: none;
  margin-top: 30px;
}

.track {
  text-align: center;
  margin-bottom: 22px;
}

.track:last-child {
  margin-bottom: 0;
}

.track__scene {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--track-scene-fg);
  margin-bottom: 4px;
}

.track__title {
  display: block;
  font-size: 0.98rem;
  font-weight: var(--weight-mid);
  line-height: 1.7;
}

.track__artist {
  display: block;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--track-artist-fg);
}

/* 公開前のBGM(revealAt までの伏せ表示)。
   破線の枠はやめ、線画のレコード袋(袋から少しのぞくレコード・袋の中央に ♪)と、
   伏せておく旨の一言を、カードの上にそのまま置く。
   カードが画面に入ると、レコードが袋から少しだけ滑り出る(動きを減らす設定では止まったまま) */
.locked {
  margin-top: 8px;
  text-align: center;
}

.locked__art {
  position: relative;
  width: var(--record-w);
  margin: 0 auto 18px;
}

.locked__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.locked__svg circle,
.locked__svg rect {
  vector-effect: non-scaling-stroke;
  stroke-width: var(--border-width);
}

.locked__disc {
  fill: var(--card);
  stroke: var(--ink);
}

.locked__groove {
  fill: none;
  stroke: var(--line-soft);
}

.locked__label {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

.locked__hole {
  fill: var(--accent);
  stroke: none;
}

.locked__sleeve {
  fill: var(--card);
  stroke: var(--ink);
}

.locked__sleeve-inner {
  fill: none;
  stroke: var(--line-soft);
}

/* 袋の中央(袋は絵の幅の 4/168 〜 108/168)に ♪ */
.locked__mark {
  position: absolute;
  left: calc(56 / 168 * 100%);
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent);
}

.locked__text {
  font-size: 0.92rem;
  line-height: 2.1;
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .reveal .locked__record {
    transform: translateX(calc(-1 * var(--record-slide)));
    transition: transform var(--motion-record) var(--motion-ease)
      calc(var(--reveal-delay, 0ms) + var(--motion-duration-fast));
  }

  .motion-ready .reveal.is-revealed .locked__record {
    transform: none;
  }
}

.link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 30px;
  padding: 0 16px;
  background: var(--link-button-bg);
  color: var(--link-button-fg);
  border-radius: var(--radius-input);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.link-button__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracks__foot {
  margin-top: 14px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

/* ---------- 披露宴のあとに(進行タブの一番下)---------------
   新しい意匠は持ちこまず、お品書きの語彙で組む。
   分類=.dish__cat と同じ赤の小さな字、名前=.dish__name と同じ格、
   ふたりのひとこと=お品書きの「ふたりの一言」と同じ札(ラベルは付けない)。
   地図は会場図と同じ「淡い細い罫の額縁」、地図で開く等は細い罫で区切った文字の行 */
.spot {
  margin-top: var(--dish-gap);
  text-align: center;
}

.after__lead + .spot {
  margin-top: var(--spot-lead-gap);
}

.spot__tag {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--accent);
  margin-bottom: 8px;
}

.spot__name {
  font-size: 1rem;
  font-weight: var(--weight-mid);
  line-height: var(--dish-name-line);
}

.spot__name-en {
  font-size: var(--spot-name-en-size);
  letter-spacing: var(--tracking-en);
  line-height: 1.5;
  color: var(--spot-name-en-fg);
}

/* 場所・行き方・営業時間。拾い読みする補足なので小さく一段引いて、行間は詰める */
.spot__lines {
  list-style: none;
  margin-top: 10px;
  font-size: var(--dish-desc-size);
  line-height: var(--spot-lines-line);
  color: var(--dish-desc-fg);
}

/* 前置きの文と場所の行は、320px幅で「方 / へ」「のす / ぐ前)」のように
   語の途中で割れないよう文節の切れ目で折り、行の長さをそろえる */
.after__lead,
.spot__lines li {
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
}

/* ふたりのひとこと。お品書きの .dish__voice-card + .dish__voice と同じトークンで、
   「ふたりの声」の見た目をサイトの中でそろえる */
/* 入っているお店のジャンル(披露宴のあとに)。並べ方はお飲み物の .drink-list を使い、
   ここでは字を一段小さくして、場所の情報(.spot__lines)と同じ格にそろえる */
.spot__genres {
  margin-top: 14px;
  text-align: center;
}
.spot__genres-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.spot__genres .drink-list {
  font-size: 0.8rem;
  line-height: 1.9;
  gap: 0 12px;
}

/* 「近くのおすすめ」の前置き。空白と改行の位置でだけ折る(「顔を / 出しますね」のような割れ方を防ぐ) */
.after__lead {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.spot__body {
  /* お品書きの「ふたりの一言」の札と同じく、内側いっぱいの幅 */
  margin: var(--dish-voice-gap) var(--dish-voice-card-inset) 0;
  padding: var(--dish-voice-card-pad-y) var(--dish-voice-card-pad-x);
  background: var(--dish-voice-card-bg);
  border-radius: var(--dish-voice-card-radius);
  font-size: var(--dish-voice-size);
  line-height: var(--dish-voice-line);
  letter-spacing: var(--dish-voice-tracking);
  color: var(--dish-voice-fg);
  /* 折り返しの決まりはお品書きの .dish__voice と同じ(<br> と <wbr> の位置だけで折る) */
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 地図。カードの内側いっぱいの幅で、会場図と同じ淡い細い罫の額縁に入れる。
   読みこむまでの地は紙の白(色は敷かない) */
.spot__map {
  margin-top: 16px;
  height: var(--spot-map-h);
  border: var(--border-width) solid var(--spot-map-border);
  background: var(--spot-map-bg);
}

.spot__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 地図で開く / 公式サイト / 電話する。箱のボタンにせず、細い罫で区切った文字の行。
   文字は左、行の右端に小さな矢印(外のページは右上へ、電話は右へ)。1行 48px。
   最後の行の下は罫を引かない(次の場所との間に罫が二重にならないように) */
.spot__links {
  margin-top: var(--spot-link-gap);
  border-top: var(--border-width) solid var(--spot-link-border);
}

.spot__link {
  min-height: var(--spot-link-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 0 0;
  border-bottom: var(--border-width) solid var(--spot-link-border);
  color: var(--spot-link-fg);
  text-align: left;
  text-decoration: none;
  font-size: var(--spot-link-size);
  letter-spacing: var(--spot-link-tracking);
  -webkit-tap-highlight-color: transparent;
}

.spot__link:last-child {
  border-bottom: 0;
}

.spot__link:active {
  background: var(--press-tint);
}

.spot__link-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.after__note {
  margin-top: var(--dish-gap);
}

/* ---------- 掲示板(SPEC §3.2b)------------------------------ */

.board__notice {
  margin-top: 4px;
}

.board__lead {
  font-size: 0.86rem;
  line-height: 1.9;
  text-align: center;
  color: var(--ink-muted);
  margin-bottom: 22px;
}

.board-form {
  display: block;
}

.board-form__label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.board-form__input,
.board-form__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-ja);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--field-fg);
  background: var(--field-bg);
  /* 記入欄の作法: 上と左右は淡い細い線、下だけ紺の罫 */
  border: var(--border-width) solid var(--field-edge);
  border-bottom-color: var(--field-border);
  border-radius: var(--field-radius);
  margin-bottom: 18px;
}

.board-form__textarea {
  margin-bottom: 4px;
  resize: vertical;
  min-height: 110px;
}

.board-form__input::placeholder,
.board-form__textarea::placeholder {
  color: var(--field-placeholder);
}

.board-form__count {
  font-family: var(--font-en);
  font-size: 0.73rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  text-align: right;
  margin-bottom: 18px;
}

/* 写真を選ぶ行(input[type=file] は隠して、この行を押させる)。
   破線の箱はやめて、細い線の1行に。左にカメラのアイコン、右端に「+」
   (SVGは js/views/board.js の cameraIcon。「+」は ::after の飾り) */
.board-form__file {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--card);
  border: var(--border-width) solid var(--field-edge);
  border-radius: var(--field-radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.board-form__file::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-en);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-muted);
}

.board-form__file:active {
  background: var(--press-tint);
}

/* アイコンの作りはタブバーの .tab__icon(css/base.css)と同じ。
   線だけ・色は文字と同じ currentColor・線幅 1.4 でそろえる。
   classic と editorial のどちらでも、文字色に追従するので浮かない */
.board-form__file-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.board-form__preview {
  margin-top: 14px;
  text-align: center;
}

.board-form__thumb {
  /* 切り抜かず、縦横比そのままで縮小表示(投稿もこのまま載る) */
  width: auto;
  max-width: 100%;
  max-height: 240px;
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

.board-form__preview-note {
  margin-top: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.board-form__remove {
  margin-top: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-decoration: underline;
}

.board-form__error {
  min-height: 1.4em;
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.7;
  text-align: center;
  color: var(--error-fg);
  /* 文節の切れ目で折る(未対応のブラウザでは無視される) */
  word-break: auto-phrase;
}

/* 書きこむ・保存する。送っている間(.is-busy)は文字が「送信中…」「保存中…」に変わり、
   ボタンの下の端を細い光の線が左から右へ走る(transform だけ。動きを減らす設定では走らない) */
.board-form__submit,
.post-edit__save {
  position: relative;
  overflow: hidden;
}

.board-form__submit::after,
.post-edit__save::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: var(--busy-line-w);
  background: var(--busy-line);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .board-form__submit.is-busy::after,
  .post-edit__save.is-busy::after {
    opacity: 1;
    animation: busy-sweep var(--motion-busy) var(--motion-ease) infinite;
  }
}

@keyframes busy-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

.board-form__submit {
  width: 100%;
  min-height: var(--sheet-close-h);
  margin-top: 6px;
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: var(--field-radius);
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.board-form__submit[disabled] {
  opacity: 0.55;
}

/* 送れたことの合図(数秒だけ出る) */
.board-form__posted {
  margin-top: 12px;
  font-size: 0.82rem;
  line-height: 1.7;
  text-align: center;
  color: var(--ink);
  /* 文節の切れ目で折る(未対応のブラウザでは無視される) */
  word-break: auto-phrase;
}

/* 編集・削除がこの端末からしかできないことの断り書き */
.board-form__own-note {
  margin-top: 12px;
  /* 注記の下限 12.5px(SPEC §4.1.2)。ご年配の方も読む一文なので下げない */
  font-size: 0.79rem;
  line-height: 1.7;
  text-align: center;
  color: var(--ink-muted);
  /* 375幅でも変なところで折り返さないように。auto-phrase は
     文節の切れ目で折る指定で、対応していないブラウザでは無視される */
  text-wrap: pretty;
  word-break: auto-phrase;
}

/* --- 書きこみ一覧 --- */

.board__list-title {
  font-size: 0.95rem;
  font-weight: var(--weight-mid);
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-align: center;
  margin-bottom: 22px;
}

.board__state {
  font-size: 0.86rem;
  line-height: 2;
  text-align: center;
  color: var(--ink-muted);
  padding: 18px 0;
  /* 文節の切れ目で折る(未対応のブラウザでは無視される) */
  word-break: auto-phrase;
}

.post + .post {
  margin-top: 22px;
  padding-top: 22px;
  border-top: var(--border-width) solid var(--post-divider);
}

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

.post__name {
  font-size: 0.9rem;
  font-weight: var(--weight-mid);
  color: var(--post-name-fg);
  overflow-wrap: anywhere;
}

.post__time {
  flex: 0 0 auto;
  font-family: var(--font-en);
  /* 進行の時刻と同じ理由でライニング数字にそろえる(.timeline__time 参照) */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--post-time-fg);
}

.post__body {
  font-size: 0.92rem;
  line-height: 1.95;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ゲストの書きこみ(本文・ニックネーム)の折り返し。
   <wbr> は入れられないので keep-all にはしない(句読点のない長い文が折れなくなる)。
   禁則を厳しくして「ー」「ょ」などが行頭に来ないようにし、
   文節で折れるブラウザ(word-break: auto-phrase に対応した Chrome など)ではそちらを使う */
.post__body,
.post__name {
  line-break: strict;
}

@supports (word-break: auto-phrase) {
  .post__body,
  .post__name {
    word-break: auto-phrase;
  }
}

/* 投稿写真も、タップで拡大できるようボタンで包む(見た目は写真のまま) */
.post__photo-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: var(--radius-card);
}

.post__photo {
  width: 100%;
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

/* 編集された投稿の小さな印 */
.post__edited {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* 自分の投稿にだけ出る「編集」「削除」
   同じ投稿への操作なので、右下にひとかたまりで並べる(以前は左右の端に離して
   いたが「離れていて違和感がある」と指摘、2026-09-26)。並びは 編集 → 削除。
   削除の誤タップは確認ダイアログで防ぎ、間は指1本ぶん(16px)空ける。
   文字は小さいままで、当たり判定だけを 44×44px 以上に広げます
   (Apple 44 / Android 48 の推奨。ご年配の方の誤タップ対策) */
.post__tools {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  /* ボタンの余白ぶんだけ、見た目の間が空きすぎないよう詰める */
  margin-top: -2px;
  margin-right: -6px; /* ボタンの内側の余白ぶん、文字の右端を本文の右端にそろえる */
}

.post__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  /* 下線はやめ、色でボタンだと分かるようにする(編集は紺・削除は赤) */
  color: var(--ink);
}

.post__tool[data-action="delete"] {
  color: var(--accent);
}

.post__tool[disabled] {
  opacity: 0.5;
}

/* その場で書きかえる小さなフォーム(編集中の枠)。
   前後の書きこみと見分けられるよう、淡い地色(ふたりの一言の札と同じ系統)と
   紺の線で囲み、上下の間を広めにとる。枠はカードの余白へ少しはみ出させて、
   入力欄の幅を新規投稿のフォームと同じに保つ(320px幅で狭くならないように) */
.post-edit {
  margin: var(--post-edit-gap) calc(-1 * var(--post-edit-bleed));
  padding: var(--post-edit-pad-y) var(--post-edit-pad-x);
  background: var(--post-edit-bg);
  border: var(--border-width) solid var(--post-edit-border);
  border-radius: var(--radius-card);
}

.post-edit:first-child {
  margin-top: 0;
}

.post-edit:last-child {
  margin-bottom: 0;
}

/* 「編集」で枠へ寄せるとき・閉じて戻るときに、頭をヘッダーの下に出す位置 */
.post,
.post-edit {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* 枠のいちばん上の見出し「○○さん 9/2 01:46 の書きこみを編集中」。
   お名前と日時は、投稿の見出し(.post__name / .post__time)と同じ書体 */
.post-edit__heading {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: var(--border-width) solid var(--post-edit-border);
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* 地の文と日時はひとかたまりで折り返す(js/views/board.js の editHeading) */
.post-edit__phrase {
  display: inline-block;
}

.post-edit__who {
  font-weight: var(--weight-mid);
  color: var(--post-name-fg);
}

.post-edit__when {
  font-family: var(--font-en);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--post-name-fg);
  display: inline-block;
  white-space: nowrap;
}

/* 編集中の写真(いまの写真・外す・差し替える・足す) */
.post-edit__photo {
  margin: 12px 0 14px;
  text-align: center;
}

.post-edit__thumb {
  width: auto;
  max-width: 100%;
  max-height: 160px;
  margin-inline: auto;
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--radius-card);
}

/* 「写真を外します(保存すると反映)」などの一言。空のときは場所をとらない */
.post-edit__photo-state {
  margin-top: 8px;
  /* 注記の下限 12.5px(SPEC §4.1.2) */
  font-size: 0.79rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-wrap: pretty;
  word-break: auto-phrase;
}

.post-edit__photo-state:empty {
  display: none;
}

/* 外したとき: 写真のあった場所に破線の枠で一言を出す(消えたことが分かるように) */
.post-edit__photo-state.is-removed {
  margin-top: 0;
  padding: 12px;
  background: var(--card);
  border: var(--border-width) dashed var(--line-soft);
  border-radius: var(--field-radius);
}

/* 「写真を外す」「写真を差し替える」。2つ並ばない幅(320px)では縦に積む */
.post-edit__photo-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.post-edit__photo-tools:empty {
  display: none;
}

.post-edit__photo-btn {
  flex: 1 1 130px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--card);
  border: var(--border-width) solid var(--line-soft);
  border-radius: var(--field-radius);
  cursor: pointer;
}

/* 中の input は隠しているので、キーボードで選んだときは枠に輪を出す */
.post-edit__photo-btn:focus-within,
.post-edit .board-form__file:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* 「元に戻す」。小さな文字のまま、当たり判定だけ 44px にする(.post__tool と同じ) */
.post-edit__undo {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: underline;
}

.post-edit__error {
  min-height: 1.3em;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--error-fg);
  margin-bottom: 8px;
  /* 文節の切れ目で折る(未対応のブラウザでは無視される) */
  word-break: auto-phrase;
}

/* 編集・削除がうまくいかなかったときに、投稿カードの下へ出る赤字 */
.post__tool-error {
  margin-top: 6px;
  margin-bottom: 0;
  text-align: center;
}

.post-edit__actions {
  display: flex;
  gap: 10px;
}

.post-edit__cancel,
.post-edit__save {
  flex: 1 1 0;
  min-height: 46px;
  border-radius: var(--field-radius);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
}

.post-edit__cancel {
  background: var(--card);
  color: var(--ink);
  border: var(--border-width) solid var(--line);
}

.post-edit__save {
  background: var(--button-bg);
  color: var(--button-fg);
}

.post-edit__save[disabled] {
  opacity: 0.55;
}

/* 送っている間は、押せないままでも少し濃く残す(線が走っているのが見えるように) */
.board-form__submit.is-busy,
.post-edit__save.is-busy {
  opacity: 0.82;
  cursor: progress;
}

.board__refresh {
  width: 100%;
  min-height: 48px;
  /* 一覧の見出しのすぐ下、1件目の上(js/views/board.js の renderList) */
  margin: 4px 0 22px;
  background: var(--card);
  color: var(--ink);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

/* 「最新の書きこみを読む」を押したあとの結果の1行(ボタンのすぐ下) */
.board__refresh-status {
  margin: -12px 0 18px;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* 読み直して新しく増えた書きこみを、しばらく淡い地色で知らせる
   (地色はお品書きの「ふたりの一言」の札と同じ。動きを減らす設定なら色は付けない) */
.post.is-new {
  animation: post-new 3s ease-out;
}
@keyframes post-new {
  from { background: var(--dish-voice-card-bg); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .post.is-new { animation: none; }
}

/* ---------- 訪問カウンター(SPEC §3.2c)---------------------- */

/* 箱にせず、一言カードの直下に「添える」1行の小さな文字。
   帯や箱にするとシステム通知に見えるので、.foot と同じく地に直接置く
   (白カードに載せる原則の例外。短い1行で、色は補助テキストの --ink-muted)。
   上側はカード間の余白(--card-gap)を少し食って一言カードに寄せる */
.visitor {
  margin: calc(10px - var(--card-gap)) var(--page-gutter) 22px;
  text-align: center;
  color: var(--visitor-fg);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

/* 数字だけ赤の欧文で少し大きく。欧文書体の既定はオールドスタイル数字で
   1がI・0がoに見えるので、高さのそろったライニング数字にする */
.visitor__count {
  font-family: var(--font-en);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 1.15rem;
  font-weight: var(--weight-mid);
  letter-spacing: 0.08em;
  color: var(--visitor-count-fg);
  margin: 0 0.3em;
}

/* 卓番号の数字。Cormorant の既定の数字は背丈が上下にずれる古い様式で、
   会場図の「1」が「I」に見え、3・4・5・7 が沈んで読みにくかった。
   進行の時刻などと同じく、背丈の揃った数字(lining-nums)に切り替える。
   ヘッダーの日付などの飾りの数字は、招待状の風合いを残すため古い様式のまま */
.map,
.sheet__body {
  font-variant-numeric: lining-nums;
}

/* ---------- メニュー表 -------------------------------------- */

/* 表紙。以前は画面の高さの55%を取っていたが、ゲストがこのタブを開くのは
   料理を見るためで、その手前の余白は待たされるだけだった(PCや縦長の画面では
   さらに広がる)。高さは中身なりにして、「Menu」だけを置く(会場名も 2026-09-26 に外した)。
   お名前と日付は画面上部のヘッダーに常に出ているので、ここでは繰り返さない */
.menu-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 36px 30px 30px;
}

.menu-hero__word {
  font-family: var(--font-en);
  font-size: 3.4rem;
  font-weight: var(--weight-mid);
  letter-spacing: 0.1em;
  color: var(--accent);
  line-height: 1.1;
}


/* 皿と皿の間。各皿の最後にある「ふたりの一言」の札が終わりの目印に
   なるので、罫線は足さずに余白だけで区切る(皿の中の間 8〜14px の3倍強)*/
.dish {
  margin-bottom: var(--dish-gap);
  text-align: center;
}

.dish:last-child {
  margin-bottom: 0;
}

.dish__cat {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--accent);
  margin-bottom: 8px;
}

/* 料理名。<br> で2〜4行に折れる1皿の名前を、1かたまりに見せる。
   本文と同じ行間(2)だと行の間が皿の間と見分けにくく、1皿が3品に見えるので
   詰める(お飲み物のワイン名も同じクラス)*/
.dish__name {
  font-size: 1rem;
  font-weight: var(--weight-mid);
  line-height: var(--dish-name-line);
  text-wrap: balance;
  /* 320px幅で長い料理名が「オ / イル」のように語の途中で割れないよう、
     文節の切れ目で折る(未対応のブラウザでは無視されるだけ)*/
  line-break: strict;
  word-break: auto-phrase;
}

/* 料理の補足説明。料理名より二段小さく、色も一段引いて、
   あくまで料理名の下に添える文章にとどめる。
   text-wrap: pretty は最後の行に1文字だけ残るのを避けるため */
.dish__desc {
  margin-top: var(--dish-desc-gap);
  font-size: var(--dish-desc-size);
  line-height: var(--dish-desc-line);
  color: var(--dish-desc-fg);
  text-wrap: pretty;
  /* 小さな字で2〜3行に折れる文章なので、日本語の組みを整える。
     line-break: strict がないと「フィレ」が「フ / ィレ」に割れる。
     word-break: auto-phrase は文節の切れ目で折る(未対応なら無視される)*/
  line-break: strict;
  word-break: auto-phrase;
}

/* ふたりの一言の札。ラベルと本文を淡い地色の小さな箱に入れ、
   料理の情報(分類・料理名・説明)とは面で分ける。
   幅は中身なり(fit-content)で、カードの内側いっぱいにはしない。
   角は付けない(招待状の直線の語彙にそろえる)*/
/* 札はカードの内側いっぱいの幅にそろえる。以前は中身の幅に合わせて縮む作りで、
   iPhone の Safari が行を短めに折る癖と重なって札が細くなり、1文が3行に割れていた
   (2026-09-26 施主の指摘)。幅がそろうと、皿ごとに札の幅がばらつかず落ち着く */
.dish__voice-card {
  margin: var(--dish-voice-gap) var(--dish-voice-card-inset) 0;
  padding: var(--dish-voice-card-pad-y) var(--dish-voice-card-pad-x);
  background: var(--dish-voice-card-bg);
  border-radius: var(--dish-voice-card-radius);
}

/* ひとことの見出し(「ふたりが選んだ理由」)。札の上端に小さく名乗らせる。
   赤にするとカテゴリ名(前菜・魚料理)と同じ声になってしまうので、
   文字は --ink-muted にして、赤は頭の短い罫(—)だけに残す。
   classic はこれで、editorial では小さなタグに持ちかえる(末尾の editorial の節)*/
.dish__voice-label {
  font-size: var(--dish-voice-label-size);
  letter-spacing: var(--dish-voice-label-tracking);
  line-height: 1.6;
  color: var(--dish-voice-label-fg);
}

.dish__voice-label::before {
  content: '—';
  margin-right: 0.4em;
  color: var(--accent);
}

/* おふたりのひとこと。上のラベルが「誰の声か」を引き受けたので、
   本文は印を持たず、色を本文と同じ紺にするだけ。
   字間は親から 0.64px(16px の 0.04em)を引き継いで小さな字では広すぎるので、
   この字の大きさに合わせて明示する */
.dish__voice {
  font-size: var(--dish-voice-size);
  line-height: var(--dish-voice-line);
  letter-spacing: var(--dish-voice-tracking);
  color: var(--dish-voice-fg);
  /* 文の切れ目は data の <br>、文節の切れ目は <wbr> で示してあるので、それ以外では
     折らない(Safari は auto-phrase に未対応で「銀杏 / が」のように割れていた)。
     text-wrap: pretty は Safari で行が短くなるので使わない */
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ラベルと本文はひと組なので、間はぐっと詰める。
   ラベルを出さない設定(voiceLabel: '')のときは札の上の余白だけになる */
.dish__voice-label + .dish__voice {
  margin-top: var(--dish-voice-label-gap);
}

/* お飲み物の銘柄の並び。銘柄ごとに1かたまりにして、途中で折り返さない
   (「グレープフルーツ / ジュース」のように割れると読みにくい)。
   かたまりの間だけで折り返し、行ごとに中央へ寄せる */
.drink-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  font-size: 0.92rem;
  line-height: 2;
}
.drink-list > span {
  white-space: nowrap;
}

.drink-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  text-align: center;
  font-size: 0.92rem;
}

/* ---------- 節目の書きこみのお祝い(SPEC §3.2b)---------------- */

/* 全画面の紙吹雪。canvas は js/confetti.js が出し入れします。
   タブバー(30)の上・ボトムシート(55)の下に置き、
   タップは下のページへ素通しさせる(pointer-events: none) */
.confetti {
  position: fixed;
  inset: 0;
  z-index: var(--confetti-z, 40);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 一覧の上に出るお祝いの帯(5秒ほどで自分から消える) */
.board__cheer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 8px 12px 14px;
  background: var(--cheer-bg);
  border: var(--border-width) solid var(--cheer-border);
  border-radius: var(--field-radius);
  color: var(--cheer-fg);
}

.board__cheer-text {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.75;
  letter-spacing: var(--tracking-ja);
  /* 375幅でも変なところで折り返さない。auto-phrase は文節の切れ目で
     折る指定で、対応していないブラウザでは無視される */
  text-wrap: balance;
  word-break: auto-phrase;
}

.board__cheer-close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .board__cheer {
    animation: cheer-in var(--motion-duration-fast) var(--motion-ease) both;
  }
}

@keyframes cheer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ---------- 扉のカバー演出(SPEC §4.4)-------------------------
   プロフィールの扉写真をヘッダーの下に留め、その上を「ご挨拶」以降の
   カードが被さって流れていく(Apple の製品ページの動き)。
   ・.hero は js/cover.js が .cover > .cover__stage で包む(profile.js は触らない)。
     留めておく距離(= 扉の高さ)は cover.js が --cover-h で渡す
   ・.cover は ::after の余白ぶん背が高くなり、同じぶん負のマージンで引き戻すので、
     後続のカードの位置は包む前とまったく同じ(最下部の余白も変わらない)
   ・扉が完全に隠れたところで留めるのをやめ、あとはカードの下に隠れたまま流れる
     (カードの隙間から覗かない)
   ・スクロール連動で少し縮む・薄くなるのは CSS の animation-timeline だけで行い、
     非対応ブラウザは留まるだけ。JS はスクロールを一切監視しない
   ・prefers-reduced-motion: reduce では、この節はまるごと効かない(普通に流れる) */

@media (prefers-reduced-motion: no-preference) {
  .cover {
    display: flow-root; /* .hero の下マージンを中に閉じこめる(高さの計算をずらさない) */
    margin-bottom: calc(-1 * var(--cover-h, 0px));
  }

  /* 留めておく距離ぶんの余白。--cover-h が来るまでは 0(= 演出なし) */
  .cover::after {
    content: "";
    display: block;
    height: var(--cover-h, 0px);
  }

  .cover__stage {
    position: sticky;
    top: var(--header-h);
  }

  /* 後続のカードを扉の上に乗せる(位置指定のない要素は、留まった扉の下に描かれてしまう)。
     z-index は付けず、DOM順だけで上に来るようにして、カードの中の重なりは変えない */
  .cover ~ .card {
    position: relative;
  }

  /* 留まっている間、被さられるのに合わせてわずかに退く。
     進み具合は .cover の位置(扉の上端がヘッダーの下端を過ぎてから、
     扉の高さ+カードの間隔ぶん進むまで)から取る */
  @supports (animation-timeline: scroll()) {
    .cover {
      view-timeline: --cover block;
      view-timeline-inset: var(--header-h) 0;
    }

    .cover__stage {
      animation: cover-recede linear both;
      animation-timeline: --cover;
      animation-range: exit 0% exit calc(var(--cover-h, 0px) + var(--card-gap));
    }
  }
}

@keyframes cover-recede {
  to {
    transform: scale(var(--cover-scale));
    opacity: var(--cover-opacity);
  }
}

/* ============================================================
   editorial レイアウト(雑誌の組み方 v2)

   v1 は「容れ物(裁ち落とし / 白い帯 / 額縁)」だけを差し替えたが、
   施主の評価は「ピンとこない」。原因は、容れ物だけ変えて
   文字の声(揃え・書体・写真との距離)を変えていなかったこと。
   v2 は、ポパイ・ブルータスの誌面から次の4点を持ってくる:

     ① 左揃えの軸が1本   見出しもタグも本文も表もQ&Aも投稿も、
                          --ed-gutter(20px)の1本の縦線から始める。
                          中央揃えを残すのは扉の名前とメニュー表紙だけ
     ② 見出しは「小さな四角いタグ + 欧文メタ」
                          和文タイトルを細い罫の箱に入れ(ポパイ)、
                          その横に Jost の小さな大文字を添える(ブルータス)
     ③ 太いゴシックと明朝の使い分け
                          見出し・料理名・質問文・お名前は Noto Sans JP 700、
                          読ませる本文は Noto Serif JP のまま。
                          欧文と数字は Jost(Futura の代替)。
                          Cormorant は招待状の声なので editorial では使わない
     ④ 隣り合うブロックの質を必ず変える
                          写真(裁ち落とし)/ 白い帯 / 額縁 / 紺の帯 の4種類を
                          交互に置き、同じ質を3つ以上続けない

   容れ物の使い分けは v1 から引き継ぐ(SPEC §4.1.5):
     ① 裁ち落とし .bleed        写真。画面の端まで
     ② 白い帯 .card--text       文章・写真の並び・書きこみの並び。罫線なし
     ③ 額縁 .card--object       現実世界で「もの」であるもの(罫線つきカード)
     ④ 紺の帯                   進行タブのタイムテーブルだけ(白抜き)

   この節は <html class="layout-editorial"> が付いたときだけ効きます
   (付け外しと書体の読みこみは js/layout.js、既定は data/site.js の layout.default)。
   classic の見た目は1pxも変えないので、セレクタは必ず .layout-editorial 配下に
   書くこと。マークアップ側は意味を表すクラスを足すだけで、classic では
   それらのクラスにスタイルが当たらない(=何も起きない)。
   ============================================================ */

/* ---------- トークンの上書き --------------------------------- */

:root.layout-editorial {
  /* 左の軸を1本にする。
     classic は「カードの外側 --page-gutter(22px)+ 内側 --card-pad-x(24px)」で
     文字が 46px から始まり、端まで敷いた帯(24px)と軸がずれていた。
     editorial では外側の余白を 0 にして、帯も額縁も内側の余白だけで
     文字位置を決める = どのブロックでも文字は --ed-gutter から始まる */
  --page-gutter: 0px;
  --card-pad-x: var(--ed-gutter);
  --card-pad-y: 30px;

  /* セクション間は --section-gap(56px)。--card-gap を置き換えるだけで、
     カード・扉・「卓の一覧」ボタン・訪問カウンターの上下余白がまとめてそろう */
  --card-gap: var(--section-gap);
  --card-gap-compact: 12px;

  /* 書体。webフォントの <link> は js/layout.js が editorial のときだけ足す。
     --font-en を Jost に差し替えると、.en の付いた要素(ヘッダー・時刻・
     卓ラベル A〜G・投稿時刻・訪問数・メニュー表紙)がまとめて Futura の声になる */
  --font-head-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-meta-en: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-en: var(--font-meta-en);

  /* 額縁の罫線は1段弱める。「卓の一覧」ボタンの枠も同じ濃さにそろえる */
  --list-toggle-border: var(--frame-line);

  /* 扉のカバー演出(SPEC §4.4)は、留まっている扉を縮めながら薄くする。
     裁ち落とした扉が縮むと画面の左右に方眼紙の帯が覗いてしまうので、
     editorial では退き方を「薄くなる」だけにする(--cover-opacity はそのまま) */
  --cover-scale: 1;

  /* 会場図は以前の見た目のまま(紺100%の額縁・塗りつぶしの椅子ドット)。
     classic だけ、額縁を淡い細い罫・椅子を白抜きの丸にしている */
  --map-border: var(--line);
  --map-seat-fill: var(--map-seat-color);
  /* 入力欄の線も以前のまま(四辺とも紺) */
  --field-edge: var(--field-border);
}

/* パスコードゲートだけは --page-gutter(= 0)ではなく軸の値で左右を空ける
   (カードが画面の端に貼りついてしまわないように) */
.layout-editorial .gate {
  padding-inline: var(--ed-gutter);
}

/* ---------- ① 裁ち落とし(写真) ----------------------------- */

/* 画面の端まで。.shell の最大幅(480px)の中では 480px いっぱいになる。
   リブールの寄り(scale 1.04)が画面の外へはみ出して横スクロールを
   生まないよう、包んでいる要素で切っておく */
.layout-editorial .bleed {
  margin-inline: 0;
  overflow: hidden;
}

/* 端まで出た写真に罫線は付けない(画面の縁がそのまま枠になる)。
   角丸も付けない(ブルータス side。ポパイの角丸とは混ぜず、どちらかに統一する) */
.layout-editorial .bleed img {
  border: 0;
  border-radius: 0;
}

/* ---------- ③ 額縁(「もの」だけ)---------------------------- */

/* 罫線は紺の58%(--frame-line)。.card--object(=「もの」)が額縁の目印だが、
   印を付け忘れたカードも額縁のままで困らないよう .card そのものに当てておく。
   会場図(--map-border)と卓詳細シート(--sheet-border)だけは
   「もの」として紺100%を残す(どちらも .card ではないので、この行は届かない) */
.layout-editorial .card,
.layout-editorial .card--object {
  border-color: var(--frame-line);
}

/* ---------- ② 白い帯(文章・写真の並び・書きこみの並び)-------- */

/* 罫線なし・端まで白・上下の余白たっぷり。
   方眼紙の上に直接文字を置かない原則(SPEC §4.1)は、帯が白いので守れる。
   マークアップ側は「中身が何か」だけを書き、どの容れ物に入れるかはここで決める */
.layout-editorial .card--text,
.layout-editorial .card--photos,
.layout-editorial .card--feed {
  border: 0;
  padding-block: var(--band-pad-y);
}

/* 帯の中に置いた写真は、帯の内側の余白ぶんだけ外に出すと画面の端に届く
   (vw を使うと縦スクロールバーのぶんで横スクロールが出るので使わない) */
.layout-editorial .card--photos > .bleed {
  width: auto;
  margin-inline: calc(-1 * var(--card-pad-x));
}

/* ---------- 左揃えの軸1本 ------------------------------------ */

/* classic で中央揃えにしている文字を、まとめて左へ寄せる。
   中央のまま残すのは「扉の上の名前ブロック」と「メニュー表紙」だけ
   (どちらも1画面ぶんの見せ場なので、雑誌でも中央に置く)。
   会場図・シート図・じゃんけんのふたりは図なので、この対象ではない */
.layout-editorial .msg,
.layout-editorial .note,
.layout-editorial .foot,
.layout-editorial .qa__q,
.layout-editorial .gallery__hint,
.layout-editorial .closing__signature,
.layout-editorial .track,
.layout-editorial .tracks__foot,
.layout-editorial .locked,
.layout-editorial .dish,
.layout-editorial .drink-grid,
.layout-editorial .search__label,
.layout-editorial .search__empty,
.layout-editorial .map__caption,
.layout-editorial .map__status,
.layout-editorial .map__found,
.layout-editorial .seat-chart__caption,
.layout-editorial .board__lead,
.layout-editorial .board__list-title,
.layout-editorial .board__state,
.layout-editorial .board-form__error,
.layout-editorial .board-form__posted,
.layout-editorial .board-form__own-note,
.layout-editorial .board-form__preview,
.layout-editorial .post-edit__photo,
.layout-editorial .post__tool-error,
.layout-editorial .visitor {
  text-align: left;
}

/* 卓名(A卓 6名)の並びも左から */
.layout-editorial .table-card__head {
  justify-content: flex-start;
}

/* 地に直接置く2つ(フッターの欧文・訪問カウンター)は、
   カードの内側ではないので自分で軸の位置まで下がる */
.layout-editorial .foot,
.layout-editorial .visitor {
  padding-inline: var(--ed-gutter);
}

/* ---------- 見出しの型(全タブ共通)--------------------------- */

/* 「小さな四角いタグ(和文)+ 欧文メタ」の1行。
   js/dom.js の sectionTitle() の出力(欧文 → 和文 の順)は触らず、
   order で和文を先頭に出す。--inline 版(席次・進行・掲示板)も同じ型になる */
.layout-editorial .sec-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 10px;
  text-align: left;
  margin-bottom: var(--block-gap);
}

/* 和文 = 細い罫の箱に入れた太いゴシック(ポパイの小さなタグ)。
   11.84px と小さいので色は --ink(白地で 10.85:1)。--ink-muted は使わない */
.layout-editorial .sec-title .ja {
  order: -1;
  display: inline-block;
  margin-top: 0;
  padding: 3px 8px;
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-card);
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-indent: 0;
  line-height: 1.45;
  color: var(--ink);
}

/* 欧文 = Jost の小さな大文字(ブルータスのメタ情報)。
   11.04px。色は --ink-muted(不透明度0.72 = 白カードで 4.82:1)で本文より一段引く */
.layout-editorial .sec-title .en {
  display: inline-block;
  font-family: var(--font-meta-en);
  font-weight: 500;
  font-size: var(--meta-size);
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* 各タブの最上部の文章(.card--lead)は、雑誌のリード文として少しだけ大きく。
   v1 のような巨大な欧文見出しは置かない。1画面に1つの大きな欧文は
   メニュー表紙の「MENU」だけにして、他のタブでは写真と時刻が見せ場になる */
.layout-editorial .card--lead .msg {
  font-size: 1.02rem;
  line-height: 2;
}

/* ============================================================
   プロフィールタブ
   ブロックの並び(質):
     裁ち落とし写真 → 白い帯(ご挨拶)→ 額縁(About Us)
     → 白い帯(Q&A の対談)→ 写真(ギャラリー)→ 白い帯(Thank You)
   ============================================================ */

/* ---------- 扉: 写真の上に白抜きの名前 ------------------------ */

/* 写真は端まで(.bleed)。その上に下から紺の帯(scrim)を敷き、
   名前を白抜きで重ねる(ブルータスの「ロゴ直下に写真、写真の上に白抜き」)。
   DOM は classic のまま(figcaption を absolute で写真の上へ運ぶだけ) */
.layout-editorial .hero {
  position: relative;
}

.layout-editorial .hero__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  /* 上端は透明なので、文字が乗るのは scrim の濃いところだけになる */
  padding: 76px var(--ed-gutter) 20px;
  text-align: left;
  background: var(--scrim);
  /* 写真のタップ(拡大表示)を邪魔しない */
  pointer-events: none;
}

.layout-editorial .hero__caption .en {
  font-family: var(--font-meta-en);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--scrim-fg);
}

.layout-editorial .hero__caption .ja {
  margin-top: 7px;
  font-family: var(--font-head-ja);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-indent: 0;
  line-height: 1.5;
  color: var(--scrim-fg);
}

/* ---------- About Us: 正方形の写真、全員同じ向き --------------- */

/* 雑誌は同じ形の紹介を一貫した向きで並べる(鏡写しにしない)。
   写真も丸ではなく正方形にして、印画紙をそのまま置いた見え方にする */
.layout-editorial .person + .person {
  margin-top: 30px;
  padding-top: 30px;
}

.layout-editorial .person__head {
  align-items: flex-start;
  gap: 14px;
}

.layout-editorial .person--flip .person__head {
  flex-direction: row;
}

.layout-editorial .person__photo {
  width: 96px;
  height: 96px;
  border: 0;
  border-radius: 0;
}

.layout-editorial .person__title {
  padding-top: 2px;
}

.layout-editorial .person__role {
  gap: 7px;
}

/* 「GROOM」= Jost の赤・大文字・字間広め */
.layout-editorial .person__role .en {
  font-family: var(--font-meta-en);
  font-weight: 600;
  font-size: var(--meta-size);
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

.layout-editorial .person__role .ja {
  font-family: var(--font-head-ja);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* お名前は太いゴシック 20px(段のいちばん大きな文字) */
.layout-editorial .person__name {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 6px;
}

/* 基本情報の表。項目名は小さめのゴシック、値は明朝のまま。
   2列にして文字を小さくはしない(ご年配のゲストがいるので本文は 14px 以上) */
.layout-editorial .person__facts {
  margin: 18px 0 14px;
  gap: 7px 14px;
}

.layout-editorial .person__facts dt {
  font-family: var(--font-head-ja);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* 自己紹介は明朝 14.72px・左揃え・行間1.8 */
.layout-editorial .person__body {
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ---------- Q&A: 吹き出しをやめて対談形式 --------------------- */

/* DOM(.chat__row > 似顔絵 + .chat__body > 名前 + 本文)は classic のまま。
   地色・枠・角丸・左右振り分けを外して、雑誌のインタビュー記事の組みにする */
.layout-editorial .qa {
  gap: 22px;
}

.layout-editorial .qa__item + .qa__item {
  padding-top: 22px;
}

/* 質問は「Q.」(Jost の赤)+ 太いゴシック 16px。
   「Q.」は文言ではなく対談であることを示す組みの記号なので CSS で置く */
.layout-editorial .qa__q {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-bottom: 12px;
}

.layout-editorial .qa__q::before {
  content: "Q.";
  flex: 0 0 auto;
  font-family: var(--font-meta-en);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.layout-editorial .chat {
  gap: 14px;
}

/* 新婦側の右寄せ・行の反転をやめ、ふたりとも同じ左揃えに */
.layout-editorial .chat__row,
.layout-editorial .chat__row--groom,
.layout-editorial .chat__row--bride {
  flex-direction: row;
  align-self: stretch;
  align-items: flex-start;
  gap: 9px;
  max-width: none;
}

.layout-editorial .chat__row--bride .chat__body,
.layout-editorial .chat__row--both .chat__body {
  align-items: flex-start;
}

/* ふたりで答える問い: 30px の似顔絵2つを少し重ねて、名前の左に置く */
.layout-editorial .chat__row--both .chat__avatar + .chat__avatar {
  margin-left: -8px;
}

.layout-editorial .chat__body {
  gap: 4px;
}

/* 似顔絵は 30px の正方形を、名前の左に置く */
.layout-editorial .chat__avatar {
  width: 30px;
  height: 30px;
  border-radius: 0;
  margin-top: 2px;
}

.layout-editorial .chat__name {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* 吹き出しをやめて、ただの本文(明朝 14.4px)にする */
.layout-editorial .chat__bubble,
.layout-editorial .chat__row--groom .chat__bubble,
.layout-editorial .chat__row--bride .chat__bubble {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.9;
}

/* ---------- ギャラリー: 1枚大 → 2列グリッド -------------------- */

/* 横スワイプの帯をやめる(スワイプできることが伝わらないため)。
   1枚目は端まで大きく、2枚目以降は2列。最後に1枚だけ余るときは幅いっぱい */
.layout-editorial .gallery-lead {
  margin-bottom: 8px;
}

.layout-editorial .gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow-x: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
}

.layout-editorial .gallery__item,
.layout-editorial .gallery__item:only-child {
  flex: none;
  width: auto;
  scroll-snap-align: none;
}

.layout-editorial .gallery__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 幅いっぱいに置くときだけ、正方形ではなく横長にする(段の高さが暴れないように) */
.layout-editorial .gallery__item:last-child:nth-child(odd) img {
  aspect-ratio: 3 / 2;
}

.layout-editorial .gallery img {
  border: 0;
  border-radius: 0;
}

.layout-editorial .gallery__hint {
  margin-top: 10px;
}

/* 署名は本文と同じ軸に置く(中央のままだと帯の中で浮く) */
.layout-editorial .closing__signature {
  margin-top: 18px;
  font-family: var(--font-head-ja);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ============================================================
   進行タブ
   ブロックの並び(質): 紺の帯(タイムテーブル)→ 白い額縁(本日のBGM)
   ============================================================ */

/* ---------- タイムテーブルを紺の帯にする ---------------------- */

/* ブルータスの黒いブロックにあたる、このサイトで唯一の反転ブロック。
   進行タブの最上部のセクション(.card--lead)がそれ。
   紺の上の赤は 1.7:1 で読めないので、この帯の中では赤を一切使わない
   (時刻の赤・丸印の赤・注記の紺は、すべて白と白の半透明に置き換える) */
.layout-editorial #panel-schedule > .card--lead {
  background: var(--ink-band-bg);
  color: var(--ink-band-fg);
  border: 0;
  padding: 30px var(--card-pad-x) 34px;
}

/* 帯の中の見出しタグも白抜きにする */
.layout-editorial #panel-schedule > .card--lead .sec-title .ja {
  border-color: var(--ink-band-fg);
  color: var(--ink-band-fg);
}

.layout-editorial #panel-schedule > .card--lead .sec-title .en {
  color: var(--ink-band-sub);
}

/* 時刻を主役に。縦罫と丸印(赤)はやめ、段は細い白罫で分ける */
.layout-editorial .timeline__rail {
  display: none;
}

.layout-editorial .timeline__item {
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: var(--border-width) solid var(--ink-band-line);
}

.layout-editorial .timeline__item:first-child {
  border-top: 0;
  padding-top: 2px;
}

.layout-editorial .timeline__item:last-child {
  padding-bottom: 2px;
}

/* 時刻は 27.2px のまま(editorial の見せ場なので小さくしない)。
   数字は高さのそろったライニング数字のまま */
.layout-editorial .timeline__time {
  font-family: var(--font-meta-en);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  text-align: left;
  line-height: 1.15;
  color: var(--ink-band-fg);
}

/* ゲストが知りたいのは「次に何があるか」。時刻だけが目に飛びこむと
   情報の優先順位が逆になるので、項目名を 16px → 18.7px に一段上げ、
   太さも 700 → 800 にして、時刻(27.2px)と対で読めるようにする。
   補足の一言(13.1px・--ink-band-sub)との差は一段ぶん広がる */
.layout-editorial .timeline__title {
  font-family: var(--font-head-ja);
  font-weight: 800;
  font-size: 1.17rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-band-fg);
}

.layout-editorial .timeline__note {
  font-size: 0.82rem;
  line-height: 1.7;
  margin-top: 3px;
  color: var(--ink-band-sub);
}

.layout-editorial .timeline__foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top-color: var(--ink-band-line);
  color: var(--ink-band-sub);
}

/* ---------- 本日のBGM(白いまま。紺の帯の次なので質が変わる)---- */

/* シーン名は箱に入れない。お品書きの分類名(タグ)と役割は同じだが、
   同じ形を2つの一覧で繰り返すと誌面が単調になるので、こちらは罫なしの小見出し */
.layout-editorial .track__scene {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-indent: 0;
  margin-bottom: 3px;
}

.layout-editorial .track__title {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.layout-editorial .track__artist {
  font-size: 0.8rem;
}

.layout-editorial .locked__mark {
  text-align: left;
}

/* ============================================================
   メニュータブ
   ブロックの並び(質):
     白い帯(表紙・巨大な MENU)→ 白い帯(ご挨拶のリード)
     → 額縁(アレルギー)→ 白い帯(お品書き)→ 額縁(お飲み物)
   ============================================================ */

/* 表紙。1画面に1つだけの巨大な欧文ディスプレイ。ここだけ中央揃えのまま */
.layout-editorial .menu-hero {
  background: var(--card);
  padding: 28px var(--card-pad-x) 36px;
  margin-bottom: var(--card-gap);
}

.layout-editorial .menu-hero__word {
  font-family: var(--font-meta-en);
  font-weight: 600;
  font-size: var(--display-size);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

/* お品書き。分類名は小さな四角いタグ、料理名は太いゴシック 17px の左揃え */
.layout-editorial .dish {
  margin-bottom: 22px;
}

.layout-editorial .dish__cat {
  display: inline-block;
  padding: 3px 8px;
  border: var(--border-width) solid var(--ink);
  border-radius: var(--radius-card);
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-indent: 0;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 9px;
}

.layout-editorial .dish__name {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.02em;
  line-height: 1.7;
  text-wrap: pretty;
}

/* 説明。料理名が太いゴシックになるぶん、説明は本文の明朝のまま細く置いて
   質を変える(大きさ・色は classic と同じトークン)*/
.layout-editorial .dish__desc {
  line-height: 1.85;
}

/* ひとことの札。editorial ではタグ+左の縦罫がすでに「ふたりの声」を
   面で分けているので、地色の箱は重ねない(左の軸にそろえて素に戻す)*/
.layout-editorial .dish__voice-card {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ひとことの見出し。セクション見出しと同じ「細い罫の箱」の語彙のまま、
   分類名のタグ(11.84px・700)より一回り小さく細くして、皿の中の
   主従を崩さない。左揃えの誌面に頭の「—」は馴染まないので消す */
.layout-editorial .dish__voice-label {
  display: inline-block;
  padding: 2px 6px;
  border: var(--border-width) solid var(--dish-voice-label-tag-line);
  border-radius: var(--radius-card);
  font-family: var(--font-head-ja);
  font-weight: 500;
  font-size: var(--dish-voice-label-tag-size);
  letter-spacing: var(--label-tracking);
  line-height: 1.45;
  color: var(--dish-voice-label-tag-fg);
}

.layout-editorial .dish__voice-label::before {
  content: none;
}

/* ひとこと本文。左揃えの誌面では、頭の「—」より左の細い罫のほうが馴染む。
   タグの下に続く縦線になるので、ラベルと本文がひと組だと目で分かる */
.layout-editorial .dish__voice {
  padding-left: 10px;
  border-left: var(--border-width) solid var(--frame-line);
}

.layout-editorial .drink-grid {
  gap: 12px 18px;
  font-size: 0.9rem;
}

/* ============================================================
   席次タブ
   ブロックの並び(質):
     白い帯(見出し+検索)→ 白い帯の上の紺の会場図 → 枠線のボタン
     →(開けば)額縁の卓カード → 白い帯(注記)

   ファーストビュー要件(SPEC §3.1-3)が最優先。見出しはタグ型のまま
   コンパクトに置き、上下の余白は帯にせず詰めておく
   ============================================================ */

/* 額縁は1枚まで。検索窓と会場図が自分で枠を持っているので、
   カード側の罫線は出さず、白い台紙として端まで敷くだけにする */
.layout-editorial .card--head,
.layout-editorial .card--map {
  border: 0;
}

.layout-editorial .card--compact {
  padding-block: var(--card-pad-compact);
}

/* 貼り付く検索欄は classic だけ。editorial では流れる(凍結中の組み方を変えない) */
.layout-editorial .search__bar {
  position: static;
}

.layout-editorial .search__bar::before {
  display: none;
}

.layout-editorial .card--head .sec-title {
  margin-bottom: 10px;
}

.layout-editorial .search__label {
  font-family: var(--font-head-ja);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

/* 卓の名札(A〜G)は --font-en 経由で Jost になる。字間だけ締める */
.layout-editorial .map__table--circle .map__disc {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.layout-editorial .map__table--rect .map__disc {
  font-family: var(--font-head-ja);
  font-weight: 500;
}

.layout-editorial .seat-chart__table .en {
  font-weight: 500;
}

.layout-editorial .table-card__label.is-ja {
  font-family: var(--font-head-ja);
  font-weight: 700;
}

/* ============================================================
   掲示板タブ
   ブロックの並び(質):
     白い帯(おふたりからの一言)→ 地に直接の1行(訪問カウンター)
     → 額縁(書きこみフォーム)→ 白い帯(書きこみの一覧・細い罫で区切る)
   ============================================================ */

.layout-editorial .board-form__label {
  font-family: var(--font-head-ja);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.layout-editorial .board__list-title {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-indent: 0;
  margin-bottom: 18px;
}

/* 書きこみは箱に入れず、細い罫で区切るだけ(雑誌の投稿欄)。
   名前(太いゴシック)と時刻(Jost)は、どちらも左の軸に並べる */
.layout-editorial .post + .post {
  margin-top: 20px;
  padding-top: 20px;
}

.layout-editorial .post__head {
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.layout-editorial .post__name {
  font-family: var(--font-head-ja);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.layout-editorial .post__time {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* 編集中の枠の写真まわりも左の軸にそろえる */
.layout-editorial .post-edit__photo-tools,
.layout-editorial .post-edit__undo {
  justify-content: flex-start;
}

.layout-editorial .post-edit__thumb {
  margin-inline: 0;
}