/* ============================================================
   tsumugi-common.css — TSUMUGI Phase 2 (2026-05-15)
   ------------------------------------------------------------
   MO サイト (weir-order.html / weir-order-store.html /
   weir-order-checkout.html / weir-order-tracking.html) 共通の
   TSUMUGI tokens + base reset + 共通 component (Header / Footer /
   CartFAB / CartDrawer / MenuCard / StatusBadge etc.) を提供。

   - tokens (T_TOKENS = --t-*) は HR_TOKENS_B (Heritage) と
     namespace 分離。同色 (#FAF7F2 paper / #2A1F1A ink /
     #B5462E ember / #B89762 gold) は意図的に同値で、Brand →
     MO の Cx 体験連続性を確保 (D-83 namespace 分離原則)
   - Brand 個別色 (`--brand-primary` 等) は fallback chain で
     優先注入 (`var(--brand-primary, var(--t-ember))`)
   - hairline opacity 0.04 (Heritage の 0.12 比 1/3、TSUMUGI
     方言: 商品 grid card 多用、線の重なりで圧迫感を避ける)
   - Source of truth: ~/Desktop/tsumugi-design-system-v2-20260515.md
   ============================================================ */

:root {
  /* ── Colors (HR_TOKENS_B 継承、namespace 分離) ── */
  --t-paper:      #FAF7F2;
  --t-paper-soft: #F5F1EA;
  --t-ink:        #2A1F1A;
  --t-ink-soft:   rgba(42, 31, 26, 0.62);
  --t-ink-muted:  rgba(42, 31, 26, 0.45);
  --t-gold:       #B89762;
  --t-gold-soft:  #D4B888;
  --t-ember:      #B5462E;
  --t-ember-soft: rgba(181, 70, 46, 0.85);
  --t-white:      #FFFFFF;

  /* ── TSUMUGI hairline (Heritage 比 1/3 opacity) ── */
  --t-hairline:        rgba(42, 31, 26, 0.04);
  --t-hairline-mid:    rgba(42, 31, 26, 0.08);
  --t-hairline-strong: rgba(42, 31, 26, 0.12);
  --t-hairline-ember:  rgba(181, 70, 46, 0.16);
  --t-wash-warm:       rgba(184, 151, 98, 0.04);
  --t-wash-cool:       rgba(42, 31, 26, 0.02);

  /* ── States ── */
  --t-error-bg:    rgba(181, 70, 46, 0.06);
  --t-success-ink: #2E7D32;
  --t-notice-ink:  #E65100;

  /* ── Typography (Noto Sans JP + Red Hat Display 主体) ── */
  --t-font-ja:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --t-font-en:  "Red Hat Display", "Inter", system-ui, sans-serif;
  --t-font-num: var(--t-font-en);

  /* ── Effects ── */
  --t-shadow-modal: 0 12px 32px rgba(42, 31, 26, 0.08), 0 2px 6px rgba(42, 31, 26, 0.04);
  --t-shadow-fab:   0 8px 20px rgba(42, 31, 26, 0.12);
  --t-shadow-card:  0 1px 0 rgba(42, 31, 26, 0.04);
  --t-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --t-duration-fast: 0.15s;
  --t-duration-mid:  0.25s;
  --t-duration-slow: 0.4s;

  /* ── Radius ── */
  --t-radius-xs:   4px;
  --t-radius-sm:   6px;
  --t-radius-md:   8px;
  --t-radius-lg:   12px;
  --t-radius-pill: 24px;

  /* ── Layout ── */
  --t-space-unit:    4px;
  --t-container-max: 1060px;
  --t-panel-width:   400px;
  --t-header-h:      56px;
  --t-fab-size:      56px;

  /* ── CC-tracking-MO-integrated: I2 Mid Heritage 拡張 (weir-order.html VenueCard 用) ── */
  --t-paper-warm:    #F4EDE2;
  --t-hairline-half: rgba(42, 31, 26, 0.04);
  --t-font-serif-ja: "Noto Serif JP", "Yu Mincho", serif;
}

/* iOS Safari URL bar dynamic viewport 対策 (heritage-common.css L65-77 同 root cause、
   同 pattern 採用)。100lvh は URL bar 非表示時の最大値、`overflow-x: clip` は
   position:sticky を壊さず横スクロール抑制。MO サイトは商品 grid 主役のため、
   背景 露出領域は paper 色で塗る (Heritage の ink-dark とは別方針)。 */
html.tsumugi-host,
html.tsumugi-host body { min-height: 100vh; min-height: 100lvh; overflow-x: clip; }
html.tsumugi-host { background: var(--t-paper, #FAF7F2); }
html.tsumugi-host body {
  font-family: var(--t-font-ja);
  color: var(--t-ink);
  background: var(--t-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ====== Tsumugi Header (Common spec §4-1, 共通 component) ====== */
.tsumugi-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--t-paper, #FAF7F2);
  border-bottom: 1px solid var(--t-hairline-mid, rgba(42, 31, 26, 0.08));
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.tsumugi-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--t-container-max);
  margin-inline: auto;
  padding: 12px 16px;
  min-height: var(--t-header-h);
}
.tsumugi-header__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
}
.tsumugi-header__brand-name {
  font: 700 16px/1.2 var(--t-font-ja);
  letter-spacing: 0.04em;
  color: var(--t-ink);
}
.tsumugi-header__nav {
  display: inline-flex; align-items: center; gap: 16px;
}
.tsumugi-header__nav-item {
  font: 500 13px/1 var(--t-font-ja);
  letter-spacing: 0.04em;
  color: var(--t-ink-soft);
  text-decoration: none;
  padding: 8px 4px;
  transition: color var(--t-duration-fast) var(--t-ease);
}
.tsumugi-header__nav-item:hover { color: var(--t-ink); }
.tsumugi-header__nav-item--active {
  color: var(--t-ink);
  border-bottom: 2px solid var(--brand-primary, var(--t-ember));
}

/* ====== Tsumugi Footer (Compact) ====== */
.tsumugi-footer {
  background: var(--t-paper-soft, #F5F1EA);
  border-top: 1px solid var(--t-hairline-mid, rgba(42, 31, 26, 0.08));
  padding: 24px 16px 32px;
  margin-top: auto;
  flex-shrink: 0;
}
.tsumugi-footer__inner {
  max-width: var(--t-container-max);
  margin-inline: auto;
  text-align: center;
}
.tsumugi-footer__copy {
  font: 400 11.5px/1.6 var(--t-font-ja);
  letter-spacing: 0.08em;
  color: var(--t-ink-muted);
}

/* ====== StatusBadge (delivery / takeout / dine_in / open / closed) ====== */
.tsumugi-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--t-radius-pill);
  font: 600 11.5px/1 var(--t-font-ja);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.tsumugi-badge--gold {
  background: rgba(184, 151, 98, 0.12);
  color: var(--t-gold);
  border: 1px solid var(--t-hairline-ember);
}
.tsumugi-badge--ember {
  background: rgba(181, 70, 46, 0.08);
  color: var(--t-ember);
  border: 1px solid var(--t-hairline-ember);
}
.tsumugi-badge--ink {
  background: var(--t-wash-cool);
  color: var(--t-ink);
  border: 1px solid var(--t-hairline-mid);
}
.tsumugi-badge--success {
  background: rgba(46, 125, 50, 0.08);
  color: var(--t-success-ink);
  border: 1px solid rgba(46, 125, 50, 0.16);
}

/* ====== WashDivider (hairline + center dot) ====== */
.tsumugi-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0;
}
.tsumugi-divider::before,
.tsumugi-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--t-hairline-mid);
}
.tsumugi-divider__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t-gold);
}

/* ====== PrimaryCTA (ember pill button、TSUMUGI 方言) ====== */
.tsumugi-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px;
  border-radius: var(--t-radius-pill);
  background: var(--brand-primary, var(--t-ember));
  color: var(--t-paper);
  font: 700 14px/1 var(--t-font-ja);
  letter-spacing: 0.12em;
  border: none; cursor: pointer;
  transition: transform var(--t-duration-fast) var(--t-ease),
              box-shadow var(--t-duration-fast) var(--t-ease),
              opacity var(--t-duration-fast) var(--t-ease);
  box-shadow: 0 6px 14px rgba(181, 70, 46, 0.16);
}
.tsumugi-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(181, 70, 46, 0.22);
}
.tsumugi-cta:active:not(:disabled) { transform: translateY(0); }
.tsumugi-cta:disabled {
  opacity: 0.4; cursor: not-allowed;
  box-shadow: none;
}
.tsumugi-cta--secondary {
  background: transparent;
  color: var(--brand-primary, var(--t-ember));
  border: 1.5px solid var(--brand-primary, var(--t-ember));
  box-shadow: none;
}
.tsumugi-cta--secondary:hover:not(:disabled) {
  background: rgba(181, 70, 46, 0.06);
  box-shadow: none;
}

/* ====== CartFAB (右下 floating cart button) ====== */
.tsumugi-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: var(--t-fab-size);
  height: var(--t-fab-size);
  border-radius: 50%;
  background: var(--brand-primary, var(--t-ember));
  color: var(--t-paper);
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--t-shadow-fab);
  cursor: pointer;
  z-index: 80;
  transition: transform var(--t-duration-fast) var(--t-ease),
              box-shadow var(--t-duration-fast) var(--t-ease);
}
.tsumugi-fab:hover { transform: translateY(-2px); }
.tsumugi-fab__badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--t-gold);
  color: var(--t-paper);
  font: 700 11px/20px var(--t-font-num);
  text-align: center;
  border: 2px solid var(--t-paper);
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .tsumugi-cta,
  .tsumugi-fab,
  .tsumugi-header__nav-item {
    transition: none !important;
  }
}

/* tsumugi-phase2 v1: TSUMUGI tokens 適用 */

/* ============================================================
   MO Header / Footer — brand-color override  (cc-beta, 2026-05-18)
   ------------------------------------------------------------
   NG#1-3 統合修正 + brand-color (DB var 経由) 反映。
   - bg は weir-common.css (.header / .weir-footer) の var(--brand-header-bg)
     を継承 (DRY、再宣言しない)。
   - 文字/アイコン色 = var(--brand-header-fg) (applyBrandCSS が WCAG AA 算出)。
   - cart badge = var(--brand-primary) #ffee00 bg + var(--brand-primary-on) 文字。
   - フローティングボタン (.tsumugi-fab / .weir-fab / LINE widget) は
     .header--order / .weir-footer の子孫でないため scoped override の影響なし。
   - weir-common.css の後に load されるため同 specificity で override 成立
     (weir-order-store.html:11-13)。
   ============================================================ */

/* -- Type B ヘッダー: レイアウト (NG#1) -- */
.header--order .header-main { gap: 8px; }
.header--order .header-left {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex: 0 1 auto;
}
.header--order .header-left .header-logo { margin: 0; min-width: 0; }

/* -- Type B ヘッダー: 文字/アイコン色 (NG#3 brand 化) -- */
.header--order .header-back,
.header--order .header-cart,
.header--order .header-logo-text { color: var(--brand-header-fg, var(--t-gold)); }
.header--order .header-cart-ic { width: 22px; height: 22px; display: block; }

/* cart badge: bg=brand primary。header bg と同色になり得るため
   --brand-header-fg の輪郭 border でバッジ形状を視認可能にする。 */
.header--order .header-cart-badge {
  background: var(--brand-primary, var(--t-ember));
  color: var(--brand-primary-on, var(--t-ink));
  border: 1px solid var(--brand-header-fg, #2D2D2D);
}

/* signin -- text variant */
.header--order .header-signin {
  background: transparent;
  border: 1px solid var(--brand-header-fg, var(--t-gold));
  color: var(--brand-header-fg, var(--t-gold));
  font-family: var(--t-font-en);
}
.header--order .header-signin:hover { background: rgba(255, 255, 255, 0.1); }
/* signin -- signed-in avatar variant */
.header--order .header-signin.is-avatar {
  background: var(--brand-header-fg, var(--t-gold));
  color: var(--brand-header-bg, #2D2D2D);
  border-color: transparent;
}
.header--order .header-signin.is-avatar:hover {
  opacity: .85;
  background: var(--brand-header-fg, var(--t-gold));
}

/* -- 🌐 言語 globe + popover (NG#2) -- */
.header--order .lang-globe-wrap { position: relative; display: inline-flex; }
.header--order .lang-globe-btn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 8px;
  color: var(--brand-header-fg, var(--t-gold));
  -webkit-tap-highlight-color: transparent;
}
.header--order .lang-globe-ic { width: 24px; height: 24px; display: block; }
.lang-globe-pop {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 172px;
  background: var(--t-paper);
  border: 1px solid var(--t-hairline-strong);
  border-radius: var(--t-radius-md);
  box-shadow: var(--t-shadow-modal);
  padding: 6px;
  z-index: 210;
}
.lang-globe-pop.open { display: flex; flex-direction: column; }
.lang-globe-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 12px;
  background: none; border: none; cursor: pointer;
  font: 500 13px/1.3 var(--t-font-ja);
  color: var(--t-ink);
  border-radius: var(--t-radius-sm);
  text-align: left;
}
.lang-globe-item:hover { background: var(--t-wash-warm); }
.lang-globe-item[data-current] {
  color: var(--brand-secondary, var(--t-gold));
  font-weight: 700;
}
.lang-globe-check { opacity: 0; color: var(--brand-secondary, var(--t-gold)); font-size: 13px; }
.lang-globe-item[data-current] .lang-globe-check { opacity: 1; }

/* -- フッター: CC-σ Option D Issue 2 (2026-05-21) で weir-common.css へ移植済 --
   旧 .weir-footer / .weir-footer .footer-main / .footer-brand / .footer-logo /
   .footer-logo-img / .footer-logo-text / .footer-brand-desc / .footer-cols /
   .footer-sec / .footer-nav-title / .footer-nav-list / .footer-nav-list a /
   .footer-bottom-links / .footer-copyright / .powered + @media (max-width:600px)
   .footer-cols 1-col override を全削除。
   理由: 全 10 page (heritage 7 + MO 3) で footer 描画を完全統一する SSoT 化、
   weir-common.css L85-216 の .weir-footer rule block + @media (min-width:1024px)
   が brand 値 (footer_bg / footer_text_color / primary_color) を直接反映。
   旧 .footer-logo / .footer-logo-text は CC-ο Phase 1 で renderFooter rename
   (.footer-brand-row / .footer-brand-name) 済の dead CSS、本削除で完全 cleanup。 */