/* ============================================================
   heritage-common.css — fix-up #7a (2026-05-13)
   ------------------------------------------------------------
   全 Heritage page (brand / brand-menu / brand-news /
   brand-stores / signin / mypage) で共通する Header / Footer /
   FAB / Nav active / Pill button CSS (R-W12 汎用化徹底)。

   - tokens (HR_TOKENS) は :root に定義し、各 page が継承
   - brand.html は inline で同等定義済 (fix-up #5)、その上に
     重複 link しても CSS variable は最後勝ちで影響なし
   - 値の動的反映 (brand colors の override) は Phase 2-B の
     --brand-* fallback chain で実現
   ============================================================ */

:root {
  /* Heritage color tokens (HR_TOKENS) — brand.html inline と同期 */
  --hr-red: #B8472D;
  --hr-red-dark: #8E3220;
  --hr-beige: #E8DDC8;
  --hr-beige-light: #F1E9D7;
  --hr-sumi: #2A1F1A;
  --hr-bg: #FAF7F2;
  --hr-paper: #FAF7F2;
  --hr-ink: #2A1F1A;
  --hr-ink-dark: #2A1F1A;
  --hr-white: #FFFFFF;
  --hr-rule: rgba(42, 31, 26, 0.12);
  --hr-hairline: rgba(0, 0, 0, 0.12);
  --hr-muted: rgba(42, 31, 26, 0.62);
  --hr-gold: #B89762;
  /* CC-ξ Phase 2 追加: product_flags badge 4 色 (Heritage spec)。
     --hr-gold は おすすめ recommend で再利用 (既存値と Heritage spec 値一致) */
  --hr-ember:      #B5462E;  /* 人気 popular */
  --hr-ember-dark: #7B2F1F;  /* 期間限定 limited */
  --hr-ink-soft:   #5F5E5A;  /* 新商品 new */

  /* Fonts */
  --hr-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --hr-font-serif: "Noto Serif JP", "Yu Mincho", serif;
  --hr-font-brush: "Yuji Syuku", "Noto Serif JP", serif;
}

/* §2-2-4 fix-up #5 #A-3 / fix-up #7a #2 / 4 回目 #H / fix-up #9 #S-3 + #S-4 / fix-up #10 #S10-1:
   Footer 下余白撲滅 + header sticky 復活 + iOS Safari dynamic viewport 完全対応。
   - fix-up #9 #S-4 root cause: `overflow-x: hidden` on html/body breaks
     `position: sticky` in descendants (well-known browser gotcha).
     `overflow-x: clip` does not create a new scroll container so sticky
     still works. Safari 16+ / Chromium / Firefox support clip.
   - fix-up #9 #S-3 root cause: `min-height: 100vh` uses LARGE viewport
     (no chrome) on iOS Safari so body can be taller than visible area,
     leaving creamy bg below the dark footer. `100dvh` tracks the
     dynamic viewport, eliminating the gap.
   - fix-up #10 #S10-1 root cause: html 自体に bg 設定なし、かつ各 page の inline
     <style> が html,body の bg を paper 色に設定。dynamic viewport で body が
     viewport より短い瞬間 (アドレスバー出現時など)、html 露出部分が paper
     色のまま = 「dark footer 下に creamy 帯」として観察される。html bg を
     footer 同色 (--hr-ink-dark) に固定し、!important で各 page inline override
     を打ち消す。下記 `min-height` も !important で各 page inline `100vh` を超越。 */
html { background: var(--hr-ink-dark, #2A1F1A) !important; }
/* fix-up #11 #S10-1 (fix-up #12 で body padding-bottom env() を 0 に戻す):
   iOS Safari URL bar dynamic viewport + safe-area 対策。
   - `100dvh` は URL bar 表示 / 非表示の遷移で値が変動し、瞬間的に body が
     viewport より短くなる露出 frame が発生。`100lvh` (large viewport, URL bar
     非表示時の最大値) に切替え、body 高さを最大値に固定して html bg 露出を
     全状況で防止する。
   - footer padding-bottom: max(24px, env(safe-area-inset-bottom)) (L174 / desktop L248) で
     iPhone X+ home indicator 領域 (~34px) を dark footer bg で塗り潰す。
   - fix-up #11 で body padding-bottom: env() を追加していたが、これは footer 上の
     cream stripe (body bg 露出領域) を生成する真因だった。footer 内部 padding で
     home indicator は既に dark カバー済のため、fix-up #12 で body padding-bottom: 0 に戻す
     (Taisei 元発言「body の下限を footer の下限まで削る」と一致)。
   - 6 page (brand / menu / news / stores / mypage / signin) は <meta viewport>
     に `viewport-fit=cover` を明示し env() を有効化。 */
html, body { min-height: 100vh !important; min-height: 100lvh !important; overflow-x: clip !important; }
body {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
/* CC-ο Phase 4 Issue 11-D (2026-05-20): .heritage-footer sticky 機能は
   body.weir-has-footer > #weir-footer { margin-top: auto } (weir-common.css L83) に
   置換。Phase 3 で全 7 page の inline <footer class="heritage-footer"> は
   #weir-footer placeholder + renderFooter() SSoT に集約済。 */

/* ====== Heritage Header (Common spec §2-1, fix-up #5 + #7a + D-420 dual-fallback) ====== */
/* D-420 CC-η (2026-05-20): heritage-header / heritage-footer の color tokens を
   var(--brand-X, var(--hr-X, fallback)) dual-fallback 化。weir-common.js applyBrandCSS
   が brands.header_bg / header_text_color / primary_color / footer_bg / footer_text_color
   を root に setProperty すると --brand-X が解決され、未設定 brand では --hr-X
   fallback で従来通り heritage default 表示。Pilot Critical Issue 1 (xorder.co.jp/
   izakaya-ushio ヘッダー/フッターにブランド色未適用) 解消の中核。 */
.heritage-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--brand-header-bg, var(--hr-paper, #FAF7F2));
  border-bottom: 1px solid var(--hr-hairline, rgba(0,0,0,0.06));
}
.heritage-header__inner { display: flex; flex-direction: column; max-width: 1440px; margin-inline: auto; }
.heritage-header__brand-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
}
.heritage-header__brand-link {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: inherit; text-decoration: none;
}
.heritage-header__seal {
  flex: none; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--brand-primary, var(--hr-red, #B8472D));
  color: var(--brand-primary, var(--hr-red, #B8472D));
  font: 700 18px/1 var(--hr-font-serif, 'Noto Serif JP', serif);
  border-radius: 2px;
  background: transparent;
  overflow: hidden;
}
/* CC-σ logo-binding-hotfix-cont (2026-05-21): Taisei iPhone QA NG —
   xorder.co.jp/izakaya-ushio で logo image 周囲に --brand-primary box frame 視認。
   CC-ν Q-7-CSS-HAS 案 H1 の :has() rule (未実装) を本 hotfix で投入し、
   .heritage-header__logo-img が DOM 上に存在する 3 new-structure pages
   (brand / brand-menu / brand-stores) で seal の border + background 装飾を除去。
   4 old-structure pages (brand-news / membership / mypage / signin) は img 要素
   不在のため :has() 非マッチで従来 border 維持。
   iOS Safari 15.4+ (2022-03) / Chrome 105+ (2022-10) で :has() 対応、
   Pilot 5/29 顧客の iOS version で安全想定。互換性 issue 時の JS .is-logo
   class toggle fallback は brief 指示で本 hotfix では skip。
   footer 側 (.heritage-footer__seal) は CC-ο MR !103 (merged in fcbda92) で
   renderFooter SSoT 化 + .heritage-footer* rule 全 deprecate 済 (case 1)、
   本 hotfix で footer 側 rule 追加不要。
   既知の edge case: img に src 設定後 onerror 発火で seal-char fallback 表示
   される稀ケース、img DOM 上残存で :has() match 継続するため border 失われる
   trade-off あり。Pilot 潮 brand は logo_url 正常 load 想定で実害なし。 */
.heritage-header__seal:has(.heritage-header__logo-img:not([hidden])) {
  border: none;
  background: transparent;
}
/* CC-ν Phase 3 Issue 7: brand.logo_url 画像表示 + seal-char fallback */
.heritage-header__logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none; /* bindHeritageBrand が brand.logo_url 取得後に display:'' に切替、欠落/onerror で hidden 維持 */
}
.heritage-header__seal-char {
  /* seal-char は default 表示、img 表示時に JS で display:none に切替 */
}
.heritage-header__brand-name {
  font: 700 17px/1.4 var(--hr-font-serif, 'Noto Serif JP', serif);
  color: var(--brand-header-text, var(--hr-ink, #2A1F1A));
  letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.heritage-header__signin {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 14px; flex: none;
  color: var(--brand-header-text, var(--hr-ink, #2A1F1A));
  font: 500 12px/1 var(--hr-font-serif, 'Noto Serif JP', serif);
  letter-spacing: 0.06em;
  border: 1px solid var(--hr-hairline, rgba(0,0,0,0.12));
  border-radius: 4px;
  background: transparent; white-space: nowrap; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
}
.heritage-header__signin:hover { background: var(--hr-beige-light, #F1E9D7); }
.heritage-header__signin.is-avatar {
  width: 34px; padding: 0; border-radius: 50%;
  background: var(--brand-primary, var(--hr-red, #B8472D)); color: var(--brand-primary-on, var(--hr-paper, #FAF7F2));
  border: none; font: 700 13px/1 var(--hr-font-serif, 'Noto Serif JP', serif);
}
.heritage-header__nav {
  display: flex; justify-content: center; gap: 24px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 14px;
}
.heritage-header__nav a {
  color: var(--brand-header-text, var(--hr-ink, #2A1F1A));
  text-decoration: none;
  font: 500 13px/1 var(--hr-font-serif, 'Noto Serif JP', serif);
  letter-spacing: 0.06em;
  padding: 4px 2px;
  transition: color 0.2s;
}
.heritage-header__nav a:hover { color: var(--brand-primary, var(--hr-red, #B8472D)); }

/* §2-4 fix-up #7a: Nav active 共通仕様 (赤・太字・アンダーバー、brand-news 準拠) */
.heritage-header__nav a[data-active="true"] {
  color: var(--brand-primary, var(--hr-red, #B8472D));
  font-weight: 700;
  border-bottom: 2px solid var(--brand-primary, var(--hr-red, #B8472D));
  padding-bottom: 4px;
}

@media (min-width: 1024px) {
  .heritage-header__inner {
    flex-direction: row; align-items: center;
    padding: 0 56px;
  }
  .heritage-header__brand-row { flex: 0 0 auto; padding: 16px 0; }
  .heritage-header__brand-name { font-size: 20px; letter-spacing: 0.08em; }
  .heritage-header__seal { width: 36px; height: 36px; font-size: 20px; }
  .heritage-header__nav {
    flex: 1; border-top: none; padding: 0 0 0 32px;
    justify-content: flex-end; gap: 32px;
  }
  .heritage-header__nav a { font-size: 14px; padding: 0; }
  .heritage-header__nav a[data-active="true"] { padding-bottom: 4px; }
  .heritage-header__signin {
    margin-left: 24px; height: 40px; padding: 0 18px;
    font-size: 13px; letter-spacing: 0.08em;
  }
  .heritage-header__signin.is-avatar { width: 40px; padding: 0; font-size: 14px; }
}

/* ====== Heritage Footer — CC-ο Phase 4 Issue 11-D (2026-05-20) deprecated ======
   旧 .heritage-footer / .heritage-footer__brand / .heritage-footer__brand-row /
   .heritage-footer__seal / .heritage-footer__brand-name / .heritage-footer__brand-en /
   .heritage-footer__tagline / .heritage-footer__cols / .heritage-footer__col /
   .heritage-footer__col-title / .heritage-footer__col-list* / .heritage-footer__col > a* /
   .heritage-footer__bottom / .heritage-footer__powered / .heritage-footer__copyright /
   @media (min-width: 1024px) footer rules — を全削除。
   代替: Phase 3 c390cd3 で全 7 heritage page の inline <footer class="heritage-footer">
   は <div id="weir-footer"></div> placeholder + renderFooter() SSoT (weir-common.js
   L1455-1590) に置換、Heritage デザイン言語 (sumi 黒 / paper / gold col-title /
   Noto Serif JP / safe-area-inset-bottom / seal beige border) は weir-common.css に
   hoist 済 (Phase 2 e10f8a6、L86-122 + @media min-width:1024px L155-165)。
   D-420 CC-η の --brand-footer-bg / --brand-footer-text fallback chain も継承。
   Pilot 後 P1: 旧 .heritage-footer__* selector を caller 0 化後、本 comment block も
   削除して file 縮減。 */

/* ====== Floating FAB (Common spec §2-3, fix-up #5 + #7a) ======
   §2-3: mobile only と書かれているが fix-up #6 副-X2 で
   全 device 表示に変更済。本 fix-up #7a でも踏襲。
   2026-05-31: クリアスペース半減 (bottom 24→12px / padding-bottom env→env/2)。
   iOS Safari の env(safe-area-inset-bottom) 分 (~34px) でボタンが浮き上がる分を半減し fab を下げる。
   SSoT: brand.html の inline 重複を削除し本定義に一本化。 */
.heritage-fab {
  position: fixed; bottom: 12px; right: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 2);
}
.heritage-fab__primary,
.heritage-fab__secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px;
  text-decoration: none;
  font: 500 14px/1 var(--hr-font-sans, 'Noto Sans JP', sans-serif);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: none; cursor: pointer;
}
.heritage-fab__primary {
  background: var(--hr-gold, #B89762);
  color: var(--hr-paper, #FAF7F2);
}
.heritage-fab__secondary {
  background: var(--hr-red, #B8472D);
  color: var(--hr-paper, #FAF7F2);
}

/* ====== Common Phone CTA button (§2-4 fix-up #5, R-W12 厳守) ====== */
.heritage-cta-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px;
  border: 1px solid var(--hr-red, #B8472D);
  border-radius: 999px;
  color: var(--hr-red, #B8472D);
  text-decoration: none; background: transparent;
  font: 500 15px/1 var(--hr-font-serif, 'Noto Serif JP', serif);
  letter-spacing: 0.04em;
}
.heritage-cta-phone:hover { background: rgba(184,71,45,0.06); }

/* ====== §3-1 / §3-4 fix-up #7a: ピルボタン縦幅 150% =====
   brand / brand-stores の「お席をご予約 →」「この店舗で注文する →」
   等の pill CTA を 150% 縦幅へ拡張する modifier。
   既存 padding 12-16px / height 48-50px 系を 1.5x。
   `.heritage-pill-cta--lg` 修飾を付与 (HTML 側) で適用。 */
.heritage-pill-cta--lg {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  min-height: 72px;
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .heritage-pill-cta--lg {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* ====== §2-5 fix-up #7a / 4 回目 #F / fix-up #10 #S10-3 / fix-up #11 N3: キャッチコピー 1 行表記 ======
   「ご来店をお待ちしています」(12 文字) を mobile / desktop 共に 1 行で表示。
   fix-up #10 #S10-3: brand.html inline `.heritage-cta__title { font: 400 30px }` が
   cascade order で勝つため、`.heritage-cta__title.heritage-cta__title--single-line`
   (specificity 0,0,2,0) + !important で確実に override。
   fix-up #11 N3 / S10-3 調整: 18px → 27px (150% UP)。
   - 12 文字 × 27px ≒ 324px、letter-spacing 0.02em で +6.5px ≈ 330.5px
   - mobile 390px viewport, .heritage-cta padding 24px*2 = 342px content width
   - 余裕 ~11.5px、`text-overflow: clip` 安全網あり */
.heritage-closing__catchcopy,
.heritage-cta__title.heritage-cta__title--single-line,
.heritage-cta__title--single-line {
  white-space: nowrap !important;
  font-size: 27px !important;
  letter-spacing: 0.02em !important;
  overflow: hidden;
  text-overflow: clip;
}
@media (min-width: 768px) {
  .heritage-closing__catchcopy,
  .heritage-cta__title.heritage-cta__title--single-line,
  .heritage-cta__title--single-line {
    font-size: clamp(22px, 3.5vw, 32px) !important;
    letter-spacing: 0.04em !important;
  }
}

/* ====== fix-up #10 #S10-5: heritage-cta__btn-primary / btn-secondary 高さ統一 (R-W12) ======
   brand.html L1088-1110 inline で primary height:56px (mobile) / secondary height:52px。
   primary に `.heritage-pill-cta--lg` が付くと padding 18*2 + min-height:72px が
   追加され実効 ~92px に。一方 secondary は --lg なしで 52px のまま = 40px 差。
   desktop は heritage-common.css L347-358 で primary --lg を null 化して 60px 一致するが
   mobile が放置されていた。本 fix で mobile も両 button を 72px min-height に統一。 */
@media (max-width: 1023px) {
  .heritage-cta .heritage-cta__btn-primary,
  .heritage-cta .heritage-cta__btn-secondary {
    height: auto !important;
    min-height: 72px !important;
    padding: 18px 24px !important;
    line-height: 1.3 !important;
  }
}

/* ====== fix-up #10 #S10-2: footer legal links — CC-ο Phase 4 Issue 11-D deprecated ======
   .heritage-footer__bottom .footer-links rules を全削除。Phase 3 で全 7 page の
   inline footer は #weir-footer placeholder に置換、renderFooter() が
   <div class="footer-bottom-links"> に 4 link (privacy / terms / tokushoho / sitemap)
   を生成、weir-common.css L127-129 (.footer-bottom-links / a / a:hover) で
   heritage tonality 適用。 */

/* ============================================================
   fix-up #7a-fixup (2026-05-13、3 回目訂正)
   ------------------------------------------------------------
   Visual QA で発見した 3 件の desktop-only 修正。
   mobile @media (= 既定値、< 1024px) は touch しない徹底。

   (1) heritage-header login button を 4 nav links の右端 (最右端) に配置。
       6 brand-context page (brand / weir-brand-menu / weir-brand-news /
       weir-brand-stores / weir-signin / weir-mypage) 共通。
       CSS-only (HTML 構造不変)、position: absolute で実現。
       mobile では既存 .heritage-header__brand-row の space-between が
       維持され、logo 左 + signin 右の 2-column のままレイアウト変わらず。

   (2) brand top hero pill CTA を desktop で同サイズ化。
       .heritage-hero__cta-primary.heritage-pill-cta--lg の lg modifier
       による 150% 拡大を nullify、secondary (56px height, padding 0 28px)
       と完全一致させる。venue section (.heritage-venue__cta-primary) は
       維持、mypage 等の他 page で適用箇所があれば維持。

   (4) closer section pill CTA を desktop で同サイズ化。
       .heritage-cta__btn-primary.heritage-pill-cta--lg の lg modifier
       を nullify、secondary (60px height, padding 0 36px) と一致。
   ============================================================ */
@media (min-width: 1024px) {
  /* (1) login button position — desktop only */
  .heritage-header__inner { position: relative; }
  .heritage-header__nav { padding-right: 130px; }
  .heritage-header__signin {
    position: absolute;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    margin-left: 0;
  }

  /* (2) brand top hero pill CTA size 統一 — desktop only */
  .heritage-hero__cta-primary.heritage-pill-cta--lg {
    padding: 0 28px !important;
    min-height: 0;
    line-height: 1;
  }

  /* (4) closer section pill CTA size 統一 — desktop only */
  .heritage-cta__btn-primary.heritage-pill-cta--lg {
    padding: 0 36px !important;
    min-height: 0;
    line-height: 1;
  }
}