/* SITE 84 — レスポンシブ
   調整順（MASTER §7）: カラム減少 → 縦積み → 余白 → 写真比率 → 折畳み → 表カード化 → 最後に見出し
   本文・料金・時刻・住所・フォームラベルは16px、注記は14pxを下回らせない。
   ドロワー切替と固定CTAの表示は同じ 1023px で切り替える（境界帯に空白を作らない）。 */

/* ============ 1440px 以上 ============ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--sp-6); }
}

/* ============ 1279px 以下: ヘッダーの項目整理・4列→3列 ============ */
@media (max-width: 1279px) {
  .global-nav__list { gap: 10px; }
  .global-nav__link { font-size: 14px; }
  /* この帯ではナビ8項目と操作群で幅を使い切るため、店名の副題は畳む
     （店名・エリアは上段の情報バーとフッターから読める）。 */
  .brand__sub { display: none; }

  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__fact:nth-child(2n) { border-right: 0; }
  .hero__fact:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .price-summary { grid-template-columns: minmax(0, 1fr); }
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ 1023px 以下: ドロワー・固定CTA ============ */
@media (max-width: 1023px) {
  :root { --h-header: 60px; }

  /* 固定CTAの実高 = 項目の min-height（--h-cta）+ 上辺の1pxボーダー。
     +1px しないと本文の末尾がCTAの下へ1pxもぐる。 */
  body { padding-bottom: calc(var(--h-cta) + 1px + env(safe-area-inset-bottom, 0px)); }

  .global-nav { display: none; }
  .drawer-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  /* 電話は固定CTA・店舗情報バー・ドロワー・フッターから到達できるため、
     ヘッダー内の重複リンクは外す（390pxでロゴ＋予約＋メニューを収める） */
  .header-actions .btn--tel { display: none; }
  .infobar__contact { display: none; }
  .infobar__inner { flex-wrap: nowrap; gap: var(--sp-3); min-height: 38px; overflow-x: auto; }
  .infobar__facts { flex-wrap: nowrap; }
  .mobile-cta { display: block; }
  .brand__sub { display: none; }

  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .split, .split--wide-left, .access-layout, .person-detail, .seat-panel,
  .recruit-hero, .reserve-band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .event-item { grid-template-columns: minmax(0, 1fr); }
  .event-item__body { padding: var(--sp-5); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section { padding-block: var(--sp-8); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { margin-bottom: 0; }
}

/* ============ 767px 以下: 完全1カラム / 表のカード化 ============ */
@media (max-width: 767px) {
  .container { padding-inline: var(--sp-4); }

  .hero { padding-block: var(--sp-6) 0; }
  .hero__media img { aspect-ratio: 4 / 3; }
  .hero__facts { grid-template-columns: minmax(0, 1fr); }
  .hero__fact { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .hero__fact:last-child { border-bottom: 0; }
  .hero__panel-actions .btn { width: 100%; }

  /* 人物カードは2列のまま。写真上・情報下で文字幅を確保する。 */
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .person-card__body { padding: var(--sp-3); gap: 5px; }

  /* VIP・料金はカード化して1列に積む（SITE 84 のモバイル方針） */
  .plan-grid, .example-grid { grid-template-columns: minmax(0, 1fr); }
  .seat-spec { grid-template-columns: minmax(0, 1fr); }
  .seat-spec__item { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .seat-spec__item:last-child { border-bottom: 0; }

  /* 定義リストの表をカード化 */
  .def-list__row { grid-template-columns: minmax(0, 1fr); }
  .def-list__key { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .confirm-list__row { grid-template-columns: minmax(0, 1fr); }
  .confirm-list__key { border-bottom: 1px solid var(--c-line); }

  /* お知らせ一覧を縦積みへ */
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .gallery-item--wide { grid-column: span 2; }

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

  .schedule-row { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb time"; gap: 4px var(--sp-3); }
  .schedule-row__thumb { grid-area: thumb; width: 52px; align-self: center; }
  .schedule-row__info { grid-area: name; }
  .schedule-row__time { grid-area: time; text-align: left; }

  .step-list__item { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .step-list__num { width: 36px; height: 36px; font-size: var(--fs-body); }

  .filter-bar { padding: var(--sp-3); }
  .sort-control { width: 100%; margin-left: 0; }
  .sort-control .select { flex: 1; min-width: 0; }

  .section { padding-block: var(--sp-7); }
  .section-head { margin-bottom: var(--sp-5); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

  .modal__foot { justify-content: stretch; }
  .modal__foot .btn { flex: 1 1 140px; }

  .reserve-band { padding: var(--sp-5); }

  /* 比較表は表そのものを横スクロールさせ、ページ全体は横スクロールさせない */
  .table-scroll-hint { display: block; }
  .data-table th, .data-table td { padding: 11px var(--sp-3); }
  .data-table tbody th { white-space: normal; }
}

/* ============ 479px 以下: 390px を正 ============ */
@media (max-width: 479px) {
  .container { padding-inline: 14px; }
  /* 390pxではタグを2件までに抑える（全件はキャスト詳細で表示） */
  .person-card__tags li:nth-child(n+3) { display: none; }
  .plan-card, .role-card, .example-card { padding: var(--sp-4); }
  .page-head { padding-block: var(--sp-6) var(--sp-5); }
  .price-lead__num { font-size: 36px; }
  /* 390pxでロゴ＋店名＋予約＋メニューが収まるようヘッダーの項目を整理する */
  .brand__mark { display: none; }
  .brand__name { font-size: 18px; }
  .site-header__inner { gap: var(--sp-2); }
  .header-actions .btn--reserve { padding-inline: 14px; }
  .lightbox__bar { flex-wrap: wrap; }
  .week-strip { gap: 6px; }
  .week-strip__cell { padding: 10px 2px; }
  .stepper__item { padding: 6px 10px; }
  /* 固定CTAの文字は14px（--fs-note）を下回らせない。狭い幅では余白だけを詰める。 */
  .mobile-cta__item { padding-inline: 2px; }
}

/* ============ 360px 以下の保険 ============ */
@media (max-width: 360px) {
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-item--wide { grid-column: span 1; }
  .stepper { gap: 6px; }
  .grid--4, .grid--3 { gap: var(--sp-2); }
}