/* ============================================================
   Wine Sommelier — Mobile UI  v20260526b
   完全書き直し版：touch-action・zindex・スクロール確実化
   ============================================================ */

/* ── CSS変数 ─────────────────────────────────────────── */
:root {
  --mob-bg:         #120208;
  --mob-surface:    #1e0810;
  --mob-surface2:   #2a0e18;
  --mob-border:     rgba(160,48,80,0.35);
  --mob-accent:     #d4b84a;
  --mob-accent-dim: rgba(212,184,74,0.55);
  --mob-text:       #f0e0c0;
  --mob-text-muted: rgba(220,190,160,0.55);
  --mob-red:        #c8503a;
  --mob-nav-h:      64px;
  --mob-header-h:   54px;
  --font-sans:      'Noto Sans JP', sans-serif;
  --font-serif:     'Noto Serif JP', serif;
}

/* ── data-view-mode 属性：DOM構築直後から制御 ───────── */
html[data-view-mode="mobile"] #pcBody        { display: none !important; }
html[data-view-mode="mobile"] #mobInviteBanner { display: none !important; }
html[data-view-mode="pc"]     #mobileApp     { display: none !important; }

/* ── モバイルルート ────────────────────────────────────
   position:fixed で画面全体を覆う
   overflow:hidden はここではセットしない
   → mob-active で flex にしてから子で制御
──────────────────────────────────────────────────────── */
#mobileApp {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--mob-bg);
  color: var(--mob-text);
  font-family: var(--font-sans);
  font-size: 14px;
  z-index: 100;
  -webkit-font-smoothing: antialiased;
}
#mobileApp.mob-active {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 子のスクロールを #mobileApp 内に閉じ込める */
}

/* ── ヘッダー ─────────────────────────────────────────── */
.mob-header {
  flex-shrink: 0;
  height: var(--mob-header-h);
  background: rgba(18,2,8,0.97);
  border-bottom: 1px solid var(--mob-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 10px;
  z-index: 10;
  position: relative;
}
.mob-header-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mob-accent);
  flex: 1;
}
.mob-header-brand .brand-icon { font-size: 1.2rem; }
.mob-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mob-pc-link {
  color: var(--mob-text-muted);
  font-size: 0.7rem;
  border: 1px solid var(--mob-border);
  border-radius: 6px;
  padding: 4px 9px;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-header-user {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-logout-btn {
  background: none;
  border: 1px solid var(--mob-border);
  border-radius: 6px;
  color: var(--mob-text-muted);
  padding: 4px 9px;
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-sans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── メインスクロールエリア ────────────────────────────
   flex:1 で残り高さを埋め、overflow-y:auto でスクロール
──────────────────────────────────────────────────────── */
.mob-main {
  flex: 1;
  min-height: 0;              /* flex子要素がオーバーフローする問題を防ぐ */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.mob-main::-webkit-scrollbar { display: none; }

/* ── タブパネル ──────────────────────────────────────── */
.mob-tab-panel { display: none; }
.mob-tab-panel.mob-active { display: block; }

/* ── ボトムナビゲーション ────────────────────────────── */
.mob-bottom-nav {
  flex-shrink: 0;
  height: var(--mob-nav-h);
  background: rgba(12,2,6,0.98);
  border-top: 1px solid var(--mob-border);
  display: flex;
  z-index: 10;
  position: relative;
}
.mob-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--mob-text-muted);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 10px;
  touch-action: manipulation;         /* ダブルタップズーム無効 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-nav-btn i { font-size: 1.15rem; }
.mob-nav-btn.mob-nav-active { color: var(--mob-accent); }
.mob-nav-btn.mob-nav-active i { transform: translateY(-1px); }
.mob-nav-btn.mob-nav-active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--mob-accent);
  border-radius: 0 0 3px 3px;
}

/* ── セクションヘッダー ──────────────────────────────── */
.mob-section-header {
  padding: 16px 16px 10px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--mob-accent);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--mob-border);
}
.mob-section-count {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  font-family: var(--font-sans);
  margin-left: auto;
}

/* ─────────────────────────────────────────────────────
   🍷 ワインタブ
───────────────────────────────────────────────────── */
.mob-search-bar {
  padding: 10px 14px;
  background: var(--mob-surface);
  border-bottom: 1px solid var(--mob-border);
  display: flex;
  gap: 8px;
  align-items: center;
}
.mob-search-input-wrap {
  flex: 1;
  position: relative;
}
.mob-search-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mob-border);
  border-radius: 20px;
  color: var(--mob-text);
  font-size: 0.88rem;
  padding: 9px 14px 9px 36px;
  outline: none;
  font-family: var(--font-sans);
  -webkit-appearance: none;
}
.mob-search-input::placeholder { color: rgba(212,184,74,0.25); }
.mob-search-icon {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--mob-accent-dim); font-size: 0.82rem;
  pointer-events: none;
}
.mob-filter-btn {
  background: rgba(212,184,74,0.1);
  border: 1px solid rgba(212,184,74,0.3);
  border-radius: 20px;
  color: var(--mob-accent);
  padding: 8px 14px;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-filter-btn.active {
  background: rgba(212,184,74,0.22);
  border-color: var(--mob-accent);
}

/* 種類クイックフィルタ */
.mob-type-chips {
  display: flex;
  gap: 7px;
  padding: 10px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--mob-border);
  background: var(--mob-surface);
}
.mob-type-chips::-webkit-scrollbar { display: none; }
.mob-type-chip {
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mob-border);
  border-radius: 16px;
  color: var(--mob-text-muted);
  padding: 6px 13px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-type-chip.active {
  background: rgba(212,184,74,0.15);
  border-color: var(--mob-accent);
  color: var(--mob-accent);
}

/* ワインカード */
.mob-wine-list { padding: 0; }
.mob-wine-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(160,48,80,0.2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-wine-card:active { background: rgba(212,184,74,0.06); }
.mob-wine-thumb {
  width: 48px; height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--mob-surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  overflow: hidden;
}
.mob-wine-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.mob-wine-info { flex: 1; min-width: 0; }
.mob-wine-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mob-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mob-wine-meta {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  margin-bottom: 4px;
}
.mob-wine-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.mob-type-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
}
.mob-type-badge.sparkling { background: rgba(180,220,255,0.15); color: #a0d8ff; }
.mob-type-badge.white     { background: rgba(220,200,100,0.15); color: #e8d870; }
.mob-type-badge.red       { background: rgba(200,60,80,0.18);   color: #ff8890; }
.mob-type-badge.rose      { background: rgba(240,130,160,0.15); color: #f0a0c0; }
.mob-type-badge.orange    { background: rgba(220,140,50,0.18);  color: #e8a850; }
.mob-wine-price {
  text-align: right;
  flex-shrink: 0;
}
.mob-price-glass {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mob-accent);
}
.mob-price-label {
  font-size: 0.62rem;
  color: var(--mob-text-muted);
  margin-top: 1px;
}

/* 国グループヘッダー */
.mob-country-header {
  padding: 10px 16px 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mob-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--mob-surface);
  border-bottom: 1px solid var(--mob-border);
  position: sticky; top: 0;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────
   フィルタードロワー
   ★ body直下に配置 → #mobileApp の外なので z-index が正しく機能
───────────────────────────────────────────────────── */
.mob-drawer-backdrop {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1190;
  touch-action: none;
}
.mob-drawer-backdrop.open { display: block; }

.mob-filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: var(--mob-surface);
  border-top: 1px solid var(--mob-border);
  border-radius: 20px 20px 0 0;
  z-index: 1200;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  will-change: transform;
}
.mob-filter-drawer.open { transform: translateY(0); }
.mob-filter-drawer::-webkit-scrollbar { display: none; }
.mob-filter-drawer-handle {
  width: 36px; height: 4px;
  background: var(--mob-border);
  border-radius: 2px;
  margin: 12px auto 16px;
}
.mob-filter-drawer-title {
  padding: 0 16px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mob-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--mob-border);
}
.mob-filter-clear {
  background: none;
  border: 1px solid var(--mob-border);
  border-radius: 6px;
  color: var(--mob-text-muted);
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-filter-section { padding: 14px 16px 0; }
/* 階層インデント：子セクション（州/地方・村/地区） */
.mob-filter-section--child {
  padding-left: 28px;
  position: relative;
}
.mob-filter-section--child::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--mob-accent-dim), transparent);
  border-radius: 1px;
}
.mob-filter-section--grandchild {
  padding-left: 44px;
}
.mob-filter-label {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: block;
}
.mob-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
}
.mob-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mob-border);
  border-radius: 14px;
  color: var(--mob-text-muted);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-chip.active {
  background: rgba(212,184,74,0.15);
  border-color: var(--mob-accent);
  color: var(--mob-accent);
}

/* 提供方法チェックボックス */
.mob-stock-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.mob-stock-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--mob-border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.mob-stock-check.active {
  background: rgba(212,184,74,0.12);
  border-color: var(--mob-accent);
}
.mob-stock-check__box {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--mob-border);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--mob-accent);
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.mob-stock-check.active .mob-stock-check__box {
  background: rgba(212,184,74,0.2);
  border-color: var(--mob-accent);
}
.mob-stock-check__label {
  font-size: 0.85rem;
  color: var(--mob-text);
  font-weight: 500;
}
.mob-stock-count {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  font-weight: 400;
}
.mob-filter-select {
  width: 100%; box-sizing: border-box;
  background: rgba(30,5,10,0.8);
  border: 1px solid var(--mob-border);
  border-radius: 8px;
  color: var(--mob-text);
  font-size: 0.85rem;
  padding: 9px 12px;
  outline: none;
  font-family: var(--font-sans);
  margin-bottom: 4px;
  -webkit-appearance: none;
  appearance: none;
}

/* ─────────────────────────────────────────────────────
   📅 イベントタブ
───────────────────────────────────────────────────── */
.mob-ev-toggle {
  display: flex;
  border-bottom: 1px solid var(--mob-border);
  background: var(--mob-surface);
}
.mob-ev-toggle-btn {
  flex: 1;
  padding: 11px;
  background: none;
  border: none;
  color: var(--mob-text-muted);
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-ev-toggle-btn.active {
  color: var(--mob-accent);
  border-bottom-color: var(--mob-accent);
}

/* イベントカード */
.mob-event-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.mob-event-card {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-event-card:active { border-color: var(--mob-accent-dim); }
.mob-event-card--ended { opacity: 0.6; filter: grayscale(30%); }
.mob-event-card-img {
  width: 100%; height: 140px;
  background: var(--mob-surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.mob-event-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mob-event-card-body { padding: 13px 14px; }
.mob-event-status-row { margin-bottom: 6px; }
.mob-ev-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
}
.mob-ev-badge.open   { background: rgba(50,200,100,0.18); color: #60e090; border: 1px solid rgba(50,200,100,0.3); }
.mob-ev-badge.full   { background: rgba(200,80,60,0.18);  color: #ff8878; border: 1px solid rgba(200,80,60,0.3); }
.mob-ev-badge.ended  { background: rgba(100,100,100,0.2); color: #aaa;    border: 1px solid rgba(120,120,120,0.3); }
.mob-event-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mob-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.mob-event-meta {
  font-size: 0.75rem;
  color: var(--mob-text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mob-event-desc {
  font-size: 0.78rem;
  color: rgba(220,190,160,0.7);
  margin-top: 8px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mob-event-wine-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: rgba(212,184,74,0.1);
  border: 1px solid rgba(212,184,74,0.3);
  border-radius: 8px;
  color: var(--mob-accent);
  padding: 7px 13px;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* カレンダー */
.mob-calendar { padding: 12px 14px; }
.mob-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mob-cal-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--mob-accent);
  font-weight: 700;
}
.mob-cal-nav {
  background: none;
  border: 1px solid var(--mob-border);
  border-radius: 7px;
  color: var(--mob-text-muted);
  padding: 5px 11px;
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.mob-cal-dow {
  text-align: center;
  font-size: 0.65rem;
  color: var(--mob-text-muted);
  font-weight: 700;
  padding: 4px 0;
}
.mob-cal-dow:first-child { color: #ff9090; }
.mob-cal-dow:last-child  { color: #88bbff; }
.mob-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.mob-cal-cell {
  min-height: 52px;
  background: var(--mob-surface);
  border-radius: 6px;
  padding: 4px 3px 3px;
  overflow: hidden;
}
.mob-cal-cell.other-month { opacity: 0.35; }
.mob-cal-cell.today { background: rgba(212,184,74,0.1); border: 1px solid rgba(212,184,74,0.3); }
.mob-cal-day-num {
  font-size: 0.7rem;
  color: var(--mob-text-muted);
  text-align: center;
  margin-bottom: 2px;
  font-weight: 600;
}
.mob-cal-cell.today .mob-cal-day-num { color: var(--mob-accent); }
.mob-cal-bar {
  font-size: 0.58rem;
  padding: 2px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-left: 3px solid;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-cal-bar.status-open   { background: rgba(50,180,100,0.18);  color: #80e0a0; border-left-color: #50c870; }
.mob-cal-bar.status-full   { background: rgba(200,80,60,0.18);   color: #ff9080; border-left-color: #e06050; }
.mob-cal-bar.status-ended  { background: rgba(100,100,100,0.15); color: #aaa;    border-left-color: #888; }

/* ─────────────────────────────────────────────────────
   🍽️ フードタブ
───────────────────────────────────────────────────── */
.mob-food-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.mob-food-card {
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.mob-food-card:active { border-color: var(--mob-accent-dim); }
.mob-food-thumb {
  width: 90px; min-width: 90px; height: 90px;
  object-fit: cover;
  background: var(--mob-surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.mob-food-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mob-food-info {
  flex: 1;
  padding: 12px 12px 12px 13px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.mob-food-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mob-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-food-category { font-size: 0.7rem; color: var(--mob-text-muted); }
.mob-food-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mob-accent);
}
.mob-food-desc {
  font-size: 0.72rem;
  color: rgba(220,190,160,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────
   🔍 検索タブ
───────────────────────────────────────────────────── */
.mob-search-hero {
  padding: 20px 16px 12px;
  background: var(--mob-surface);
  border-bottom: 1px solid var(--mob-border);
}
.mob-search-hero-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--mob-accent);
  margin-bottom: 12px;
}
.mob-search-full {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--mob-border);
  border-radius: 10px;
  color: var(--mob-text);
  font-size: 0.95rem;
  padding: 12px 16px;
  outline: none;
  font-family: var(--font-sans);
  -webkit-appearance: none;
}
.mob-search-full::placeholder { color: rgba(212,184,74,0.25); }
.mob-search-count {
  font-size: 0.72rem;
  color: var(--mob-text-muted);
  margin-top: 8px;
}
.mob-search-results { padding: 0; }

/* ─────────────────────────────────────────────────────
   モーダル（共通）
   ★ body直下に配置 → z-index 1300 で最前面
───────────────────────────────────────────────────── */
.mob-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.78);
  z-index: 1300;
  align-items: flex-end;
  justify-content: center;
}
.mob-modal-overlay.open { display: flex; }

/* シート：iOS Safari タッチスクロール完全対応
   ポイント：
   1. overflow-y: scroll （auto より确実）
   2. -webkit-overflow-scrolling: touch （iOS 13以前対応）
   3. height: 85vh を max-height でなく明示指定（flex親内でmax-heightが効かないケース対策）
   4. touch-action: pan-y
   5. overscroll-behavior: contain
*/ 
.mob-modal-sheet {
  /* flex item として扱われないよう block に固定 */
  display: block !important;
  flex-shrink: 0;
  align-self: auto;
  background: var(--mob-surface);
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--mob-border);
  border-bottom: none;
  width: 100%;
  /* height を固定して overflow-y:scroll が必ず有効になるようにする */
  height: 85vh;
  max-height: 85vh;
  min-height: 200px;
  box-sizing: border-box;
  /* iOS Safari スクロール完全対応 */
  overflow-y: scroll !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  /* inline style の height 上書きを防ぐ（JS側は上書きしない前提） */
  position: relative;
  animation: mob-slide-up 0.3s cubic-bezier(0.32,0.72,0,1);
}
.mob-modal-sheet::-webkit-scrollbar { display: none; }

@keyframes mob-slide-up {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.mob-modal-handle {
  width: 36px; height: 4px;
  background: var(--mob-border);
  border-radius: 2px;
  margin: 12px auto 0;
}
.mob-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  color: var(--mob-text-muted);
  font-size: 0.88rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.mob-modal-body { padding: 16px 18px 60px; position: relative; }
.mob-modal-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--mob-text);
  font-weight: 700;
  margin-bottom: 10px;
  padding-right: 36px;
  line-height: 1.4;
}
.mob-modal-meta {
  font-size: 0.78rem;
  color: var(--mob-text-muted);
  margin-bottom: 8px;
}
.mob-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mob-modal-tag {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(212,184,74,0.12);
  color: var(--mob-accent);
  border: 1px solid rgba(212,184,74,0.25);
}
.mob-modal-divider {
  height: 1px;
  background: var(--mob-border);
  margin: 14px 0;
}
.mob-modal-desc {
  font-size: 0.83rem;
  color: rgba(220,190,160,0.8);
  line-height: 1.75;
}
.mob-modal-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mob-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  margin-top: 14px;
}
.mob-modal-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: rgba(212,184,74,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.mob-modal-price-label { font-size: 0.78rem; color: var(--mob-text-muted); }
.mob-modal-price-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mob-accent);
}
.mob-modal-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 14px;
  background: var(--mob-surface2);
}
.mob-modal-aroma-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--mob-border);
  color: rgba(220,190,160,0.75);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── イベントフィルターバナー ────────────────────────── */
.mob-ev-filter-banner {
  display: none;
  background: rgba(212,184,74,0.1);
  border-bottom: 1px solid rgba(212,184,74,0.25);
  padding: 8px 16px;
  font-size: 0.78rem;
  color: var(--mob-accent);
  align-items: center;
  gap: 8px;
}
.mob-ev-filter-banner.show { display: flex; }
.mob-ev-filter-banner button {
  background: none;
  border: 1px solid rgba(212,184,74,0.4);
  border-radius: 6px;
  color: var(--mob-accent);
  padding: 2px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: auto;
  font-family: var(--font-sans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 空状態 ────────────────────────────────────────── */
.mob-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mob-text-muted);
  font-size: 0.85rem;
}
.mob-empty-icon { font-size: 2.2rem; margin-bottom: 10px; }

/* ── ローディング ────────────────────────────────────── */
.mob-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--mob-text-muted);
  font-size: 0.85rem;
}

/* ── PC版への誘導バナー ──────────────────────────────── */
.mob-invite-banner {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mob-surface);
  border: 1px solid var(--mob-border);
  border-radius: 40px;
  padding: 10px 20px;
  font-size: 0.8rem;
  color: var(--mob-text-muted);
  white-space: nowrap;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  cursor: pointer;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mob-invite-banner span { color: var(--mob-accent); font-weight: 700; }