/* SITE 126 — ページ固有レイアウト（トップ1ページ / 最小限の下層5ページ）
   主役は「メニュー・営業時間・席・予約・アクセス」。人物は最後、出勤表・ランキングUIは持たない。
   隣接125（貸切・個室・法人予約中心のdark）とは対照的に、
   シリーズ最終・最も標準的な「普通の地域バー」の1ページ構成にする。 */

/* ============ HERO ============ */
.hero { background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding-block: var(--sp-6) var(--sp-7); }
.hero__eyebrow { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.16em; color: var(--c-accent-deep); }
.hero__title { font-size: var(--fs-display); letter-spacing: 0.01em; margin-top: var(--sp-3); }
.hero__title-sub { display: block; font-size: var(--fs-h3); font-weight: 700; color: var(--c-navy); letter-spacing: 0.01em; margin-top: 10px; }
.hero__lead { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--c-fg-2); max-width: 46em; }

.hero-facts { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.hero-facts dt, .hero-facts dd { padding: var(--sp-4); }
.hero-facts > * { border-right: 1px solid var(--c-line); }
.hero-facts dt {
  grid-row: 1; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; color: var(--c-muted);
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.hero-facts dd { grid-row: 2; font-size: var(--fs-body); font-weight: 700; line-height: 1.5; }
.hero-facts .sub { display: block; font-size: var(--fs-note); font-weight: 500; color: var(--c-fg-2); margin-top: 3px; }

.hero__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__note { margin-top: var(--sp-3); font-size: var(--fs-note); color: var(--c-muted); }

.hero__figure { margin-top: var(--sp-5); border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.hero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__figure figcaption { padding: 10px var(--sp-4); font-size: var(--fs-note); color: var(--c-muted); border-top: 1px solid var(--c-line); }

/* ============ CONCEPT ============ */
.concept-points { display: grid; gap: var(--sp-4); }
.concept-point { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); background: var(--c-surface); }
.concept-point__title { font-size: var(--fs-h4); display: flex; align-items: center; gap: 10px; }
.concept-point__title .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius); background: var(--c-navy); color: var(--c-on-ink); font-size: var(--fs-note); font-weight: 700; }
.concept-point__body { color: var(--c-fg-2); }

/* ============ MENU（タブ切替。カテゴリ・材料・アレルゲン・ノンアルをHTMLで扱う） ============ */
.menu-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.menu-count { font-size: var(--fs-note); color: var(--c-muted); font-weight: 700; }
.nonalc-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 700; color: var(--c-fg-2); }
.nonalc-toggle input { width: 20px; height: 20px; accent-color: var(--c-navy); }

.menu-list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); align-items: start; }
.menu-item__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.menu-item__name { font-size: var(--fs-body); font-weight: 700; }
.menu-item__en { font-size: var(--fs-note); color: var(--c-muted); }
.menu-item__desc { font-size: var(--fs-body); color: var(--c-fg-2); margin-top: 5px; line-height: 1.7; }
.menu-item__price { text-align: right; white-space: nowrap; }
.menu-item__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.drink-card__en { font-size: var(--fs-note); color: var(--c-muted); }
.drink-card__name { font-size: var(--fs-h4); margin-top: 2px; }
.drink-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: 4px; }
.drink-card__row .card__meta { display: flex; gap: 10px; }

/* ============ SEAT ============ */
.room-card__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--sp-3); font-size: var(--fs-note); color: var(--c-fg-2); margin-top: 4px; }
.room-card__dl dt { color: var(--c-muted); }

/* ============ NEWS / EVENT ============ */
.news-list { display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.news-item { border-bottom: 1px solid var(--c-line); }
.news-item summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0; min-height: var(--tap);
}
.news-item summary::-webkit-details-marker { display: none; }
.news-item__date { font-size: var(--fs-note); color: var(--c-muted); font-family: var(--font-num); white-space: nowrap; }
.news-item__cat { font-size: var(--fs-note); font-weight: 700; color: var(--c-accent-deep); background: var(--c-accent-soft); border-radius: var(--radius); padding: 2px 9px; white-space: nowrap; }
.news-item__title { font-size: var(--fs-body); font-weight: 700; flex: 1 1 220px; }
.news-item__body { padding-bottom: var(--sp-4); display: grid; gap: var(--sp-3); }
.news-item__body p { font-size: var(--fs-body); color: var(--c-fg-2); }
.event-note { border: 1px solid var(--c-navy-line); background: var(--c-navy-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-note); color: var(--c-navy); font-weight: 700; margin-top: 6px; }

/* ============ STAFF ============ */
.staff-card__role { font-size: var(--fs-note); color: var(--c-accent-deep); font-weight: 700; }
.staff-card__name { font-size: var(--fs-h4); margin-top: 2px; }
.staff-card__kana { font-size: var(--fs-note); color: var(--c-muted); font-weight: 500; margin-left: 8px; }
.staff-card__msg { border-top: 1px solid var(--c-line); padding-top: 8px; margin-top: 4px; font-style: normal; color: var(--c-fg); font-weight: 700; }

/* ============ ACCESS ============ */
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.map-frame { border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.map-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.map-frame__note { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-note); color: var(--c-muted); border-top: 1px solid var(--c-line); }
.route-steps { display: grid; gap: var(--sp-4); }
.route-steps__item, .steps li.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.route-steps__num, .step__no { width: 34px; height: 34px; border-radius: var(--radius); background: var(--c-navy); color: var(--c-on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-body); }
.route-steps__text { font-size: var(--fs-body); color: var(--c-fg-2); line-height: 1.7; padding-top: 4px; }
.route-meta { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--sp-4); }

.steps { display: grid; gap: var(--sp-4); }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.step__title { font-size: var(--fs-h4); }
.step__text { margin-top: 4px; font-size: var(--fs-body); color: var(--c-fg-2); line-height: 1.7; }

/* ============ RESERVE ============ */
.side-panel { border: 1px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-surface); padding: var(--sp-5); }
.side-panel__title { font-size: var(--fs-h4); }
.side-panel__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-3); font-size: var(--fs-body); color: var(--c-fg-2); }
.side-panel__dl dt { color: var(--c-muted); font-size: var(--fs-note); }
.side-panel + .side-panel { margin-top: var(--sp-4); }

/* ============ RECRUIT ============ */
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.role-card__pay { font-size: var(--fs-body); font-weight: 700; color: var(--c-accent-deep); }

/* ============ 下層ページ ↔ トップのアンカー を結ぶ導線 ============ */
.back-to-section { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-note); color: var(--c-fg-2); }
.back-to-section a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ============ 汎用 ============ */
.stack { display: grid; gap: var(--sp-5); }
.stack--sm { gap: var(--sp-3); }
.prose { font-size: var(--fs-body); color: var(--c-fg-2); line-height: var(--lh-long); }
.prose h2 { font-size: var(--fs-h3); color: var(--c-fg); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); color: var(--c-fg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prose p + p { margin-top: var(--sp-3); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.cta-band { border: 2px solid var(--c-fg); background: var(--c-surface); border-radius: var(--radius); padding: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.cta-band__title { font-size: var(--fs-h3); }
.cta-band__lead { margin-top: 8px; font-size: var(--fs-body); color: var(--c-fg-2); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.fallback-panel { border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-6); background: var(--c-surface); }
.fallback-panel h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.fallback-panel__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }