/*
 * デザインの変更案 v2(2026-10-04「AIっぽさを抑えたい。現状の版を残しつつ変更版も見たい」)。
 * 現行(先方のモック v26 のまま)は git のタグ design-v1-2026-10-04。この案は **html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) のときだけ効く上書き**で、
 * 消せば現行に戻る。切り替えは URL に ?design=v2 / ?design=v1(ui/site/live.js の applyDesign)。
 *
 * 10-05: A は色も変えた(見本の色「ローズ × 黒」)。B(design-v3.css)は同じ作りで色だけ「ゴールド × ワイン」。
 *   店舗ごとに色が変わるのを先方に見せるため(人間「AとBをカラーパターンを変えたものに」)
 *
 * 方針: 「暗い緑と金・どこも丸いカード・英語の大文字見出し・半透明の丸ボタン」という、生成した画面にありがちな組み合わせを崩す。
 *   - 見出しは日本語を主に(英語の飾り見出しは外す)。明朝は見出しだけ、字間を詰める
 *   - 角丸をほぼやめる(写真 2px・ボタン 4px)。枠で囲まず、細い線と余白で区切る
 *   - 写真の上の札(状態・No.1)は小さく、色の塊にしない
 *   - 色は店舗のテーマ(--bg --accent 等)をそのまま使う。新しい色は足さない(店舗ごとの色が効かなくなるため)
 * ⚠️ 文字の大きさは rem で書く(build の文字の読み替え = px の +1.5〜2 はこのファイルには掛からない)
 */

/* 色: 見本の色「ローズ × 黒」(src/theme.ts の見本と同じ値。運営が店舗ごとに選べる色そのもの) */
html[data-design="v2"] {
  --bg: #181316; --bg-panel: #241B20; --bg-deep: #1C1519; --shade: #0E0A0C;
  --ink: #F2E7EB; --ink-dim: #A9959D; --accent: #D68CA0; --ok: #8DB89A; --soon: #E0B070;
  --bg-rgb: 24, 19, 22; --shade-rgb: 14, 10, 12; --ink-rgb: 242, 231, 235; --accent-rgb: 214, 140, 160;
  --accent-soft: rgba(214, 140, 160, 0.16); --line: rgba(242, 231, 235, 0.10); --v2-rule: rgba(242, 231, 235, 0.14);
}
html[data-design="v2"] body { background: var(--bg) !important; }

html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) {
  --v2-radius: 2px;
  --v2-rule: rgba(var(--ink-rgb), 0.14);
}

/* ── 文字 ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) body { letter-spacing: 0.01em; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) h1, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) h2, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) h3, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .serif { letter-spacing: 0.02em !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .section-title {
  font-size: 1.0625rem !important; font-weight: 600; letter-spacing: 0.04em !important;
  display: flex; align-items: center; gap: 12px;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .section-title::after { content: ''; flex: 1; height: 1px; background: var(--v2-rule); }

/* ── 画面の上の見出し: 英語の飾りを外し、日本語を主に ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .header-title-en { display: none !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .header-title-jp {
  font-family: 'Shippori Mincho', serif; font-size: 1.125rem !important; font-weight: 600;
  color: var(--ink) !important; letter-spacing: 0.06em !important; margin-top: 0 !important;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .top-header { background: rgba(var(--bg-rgb), 0.96) !important; border-bottom: 1px solid var(--v2-rule); }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .back-btn, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .icon-btn, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .home-menu-btn, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .global-menu-btn {
  background: transparent !important; border: 1px solid var(--v2-rule) !important; border-radius: 4px !important;
}

/* ── ホームの店名 ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .home-logo-header .store-name { font-size: 1.5rem !important; letter-spacing: 0.12em !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .home-logo-header .store-name .sub { font-size: 0.8125rem !important; letter-spacing: 0.2em !important; }

/* ── 写真のカード: 角丸をやめ、札を小さく ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .pickup-photo, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .today-photo, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .cast-photo,
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .gallery-photo, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .banner-slide, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .rvideo-photo,
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .profile-reel-tile, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .event-banner {
  border-radius: var(--v2-radius) !important;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .cast-badge {
  border-radius: 0 !important; padding: 2px 6px !important; font-size: 0.6875rem !important; letter-spacing: 0.06em;
  background: var(--accent) !important; color: var(--bg) !important;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .cast-status-badge, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .today-status {
  background: transparent !important; border-radius: 0 !important; padding: 0 !important; color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); font-size: 0.75rem !important; font-weight: 600 !important;
}
/* 状態の札(リール・個人ページ)も丸い塊にしない */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .fcard-status { border-radius: 2px !important; padding: 4px 9px !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .mini-tag, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .fcard-tag { background: transparent !important; border-radius: 0 !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .mini-progress { height: 1px !important; border-radius: 0 !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .pickup-name, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .cast-name, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .today-name {
  font-family: 'Shippori Mincho', serif; font-size: 0.9375rem !important; letter-spacing: 0.04em;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .pickup-meta, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .cast-meta, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .today-time { letter-spacing: 0.02em; }

/* ── 枠で囲った表 → 細い線だけ ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .price-quick, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .profile-stats-table {
  border: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--v2-rule) !important;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .price-row { padding: 14px 2px !important; border-bottom: 1px solid var(--v2-rule) !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .price-amt { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .comment-block { border-radius: 0 !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .notice { border-radius: 0 !important; background: transparent !important; border: 0 !important; border-left: 2px solid var(--v2-rule) !important; }

/* ── 丸い札(タグ)→ 文字だけ ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .profile-tag { border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--ink-dim) !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .profile-tag::before { content: '#'; opacity: 0.6; margin-right: 1px; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .profile-tags { gap: 4px 14px !important; }

/* ── 下のナビ: 日本語だけ・選んでいる所に短い線 ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .bottom-nav { background: rgba(var(--bg-rgb), 0.97) !important; border-top: 1px solid var(--v2-rule); padding-top: 8px !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .nav-label-en { display: none !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .nav-label-jp { font-size: 0.6875rem !important; opacity: 1 !important; letter-spacing: 0.04em; margin-top: 3px; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .nav-item { position: relative; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .nav-item.active::before {
  content: ''; position: absolute; top: -8px; left: 50%; width: 18px; height: 2px; margin-left: -9px; background: var(--accent);
}

/* ── メニュー: 英語の大きな見出しを外す ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .menu-row-en { display: none !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .menu-row-jp { font-family: 'Shippori Mincho', serif; font-size: 1.0625rem !important; color: var(--ink) !important; letter-spacing: 0.06em; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .menu-row-index { opacity: 0.45; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .menu-list-rule { background: var(--v2-rule) !important; opacity: 1 !important; }

/* ── ボタン: 丸い塊をやめる ── */
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .reserve-fixed-btn, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .contact-cta, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .sheet-cta, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .gate-cta,
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .contact-tab, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .rank-toggle-btn, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .fcard-reserve-icon {
  border-radius: 4px !important;
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .fcard-like-icon, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .fcard-msg-icon {
  background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.22);
}
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .bottom-sheet, html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .gate-card { border-radius: 6px 6px 0 0 !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .gate-card { border-radius: 6px !important; }
html:is([data-design="v2"],[data-design="v3"],[data-design="v4"],[data-design="v5"],[data-design="v6"]) .hours-badge { border-radius: 0 !important; }

/* ── 比べるための切り替え(?design= を使ったときだけ出る)── */
.design-switch {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 300; display: flex; flex-direction: column; opacity: 0.9;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.65); font-size: 0.75rem;
}
.design-switch button { background: none; border: 0; color: #ddd; padding: 8px 6px; cursor: pointer; writing-mode: vertical-rl; letter-spacing: 0.1em; }
.design-switch button.on { background: #ddd; color: #111; font-weight: 700; }

/* ── 体験用の店舗の「見た目を切り替え」(live.js の setupDemoLook。どの案でも同じ見た目。店舗の色に左右されないよう決まった色で書く)── */
.demo-look { position: fixed; left: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 300; max-width: calc(100vw - 20px); font-size: 0.8rem; font-family: system-ui, sans-serif; }
.demo-look-toggle { background: rgba(20, 20, 20, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 0.8rem; backdrop-filter: blur(6px); }
.demo-look-panel { margin-bottom: 8px; position: absolute; bottom: 100%; left: 0; width: min(340px, calc(100vw - 20px)); background: rgba(20, 20, 20, 0.94); color: #eee; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.demo-look-panel[hidden] { display: none; }
.demo-look-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.demo-look-row > b { flex: 0 0 6.4em; padding-top: 6px; font-weight: 600; color: #bbb; }
.demo-look-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-look-row button { background: rgba(255, 255, 255, 0.08); color: #eee; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 5px 11px; cursor: pointer; font-size: 0.78rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.demo-look-row button.on { background: #fff; color: #111; border-color: #fff; font-weight: 700; }
.demo-look-row button i { width: 0.9em; height: 0.9em; border-radius: 50%; border: 3px solid; display: inline-block; box-sizing: content-box; }
.demo-look-panel p { margin: 2px 0 0; color: #999; font-size: 0.72rem; }
.demo-look-panel p[hidden] { display: none; }
.demo-look-row button:disabled { opacity: 0.35; cursor: default; }

/* A・B は「店舗ごとの色」を見せる案。店舗の背景の写真(現行の緑のぼかし)は外し、その店の差し色をほんのり敷く(色の違いが見えるように) */
html:is([data-design="v2"],[data-design="v3"]) .home-logo-header {
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0) 70%) !important;
  background-color: var(--bg-deep) !important;
}
html:is([data-design="v2"],[data-design="v3"]) .home-logo-header .store-name { color: var(--accent) !important; }
html:is([data-design="v2"],[data-design="v3"]) .price-amt { color: var(--accent) !important; }