@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap');
/*
 * 新案E(v6): メンズエステのサイトの「お決まり」に寄せる案(2026-10-05)。人間が出した参考(実在の店舗のサイト)を見て、
 * 「人が作ったサイトに見える理由」を言葉にしたものを当てはめた。⚠️ **よその店のサイトなので、色・ロゴ・言い回しはまねしない**。
 * 借りたのは業界のお決まりだけ:
 *   - 写真を隙間なく端まで並べた2列(角丸・枠なし)、名前と時間は写真の下に小さく中央
 *   - 状態に「何時時点か」を付ける(◎すぐ案内可能 (24:42時点))、出勤時間に時計の印
 *   - 斜めの「NEW FACE」の帯(登録30日)、縦書きの「PICK UP」(live.js の decoratePhotos)
 *   - 見出しは大きく細い英字 + 小さな日本語
 *   - 区切りごとに地の色を切り替える(濃い紺 ↔ 砂色)
 *   - 上の帯と予約のボタンの帯は白、ボタンは枠線だけ
 * 色は「紺と砂」(参考は茶とカーキ。色はまねしない)。⚠️ 店舗ごとの色より、この配色が勝つ。文字の大きさは rem
 */

/* 飾りは新案E のときだけ見せる(live.js はどの案でも付ける) */
.deco-new, .deco-pickup { display: none; }

html[data-design="v6"] {
  --bg: #141A26; --bg-panel: #1D2433; --bg-deep: #0F141E; --shade: #141A26;
  --ink: #EEE8DE; --ink-dim: #A9A39A; --accent: #CDBB98; --accent-soft: rgba(205, 187, 152, 0.14);
  --ok: #EEE8DE; --soon: #A9A39A; --line: rgba(238, 232, 222, 0.16); --jade: #CDBB98;
  --bg-rgb: 20, 26, 38; --shade-rgb: 20, 26, 38; --ink-rgb: 238, 232, 222; --accent-rgb: 205, 187, 152;
  --v2-rule: rgba(238, 232, 222, 0.18); --v2-radius: 0;
  --e-en: 'Cormorant Garamond', 'Shippori Mincho', serif;
  --e-sand: #CDBB98;
}
html[data-design="v6"] body { background: var(--bg) !important; }
html[data-design="v6"] .pickup-name, html[data-design="v6"] .cast-name, html[data-design="v6"] .today-name { font-family: 'Shippori Mincho', serif !important; }

/* ── 上の帯: 白 ── */
html[data-design="v6"] .top-header { background: #FFFFFF !important; border-bottom: 0 !important; }
html[data-design="v6"] .header-title-jp { color: #141A26 !important; font-size: 1rem !important; }
html[data-design="v6"] .back-btn { border: 0 !important; background: transparent !important; }
html[data-design="v6"] .back-btn svg { stroke: #141A26 !important; }
html[data-design="v6"] .icon-btn, html[data-design="v6"] .global-menu-btn, html[data-design="v6"] .home-menu-btn {
  background: #141A26 !important; border: 0 !important; border-radius: 0 !important; width: 44px !important; height: 44px !important;
}

/* ── ホームの頭: 大きな店名、その下に営業時間 ── */
html[data-design="v6"] .home-logo-header { background-image: none !important; padding: 34px 16px 26px !important; }
html[data-design="v6"] .home-logo-header .store-name { font-family: var(--e-en) !important; font-weight: 300 !important; font-size: 2.75rem !important; letter-spacing: 0.08em !important; line-height: 1.05; }
html[data-design="v6"] .home-logo-header .store-name .sub { font-family: 'Shippori Mincho', serif; font-size: 0.8125rem !important; letter-spacing: 0.3em !important; color: var(--e-sand) !important; margin-top: 10px !important; }
html[data-design="v6"] .hours-badge { background: #FFFFFF !important; color: #555 !important; border: 0 !important; flex-wrap: wrap; gap: 2px 14px !important; }
html[data-design="v6"] .hours-badge b { color: #141A26 !important; }

/* ── 見出し: 大きく細い英字 + 小さな日本語(中央) ── */
html[data-design="v6"] .section-title { display: block !important; text-align: center; margin: 8px 0 18px !important; }
html[data-design="v6"] .section-title::after { display: none; }
html[data-design="v6"] .section-title .t-en { display: block; font-family: var(--e-en); font-weight: 300; font-size: 2.5rem; line-height: 1; letter-spacing: 0.04em; }
html[data-design="v6"] .section-title .t-jp { display: block; font-size: 0.75rem; letter-spacing: 0.3em; margin-top: 6px; color: inherit; opacity: 0.8; }
html[data-design="v6"] .video-section-title { font-family: var(--e-en) !important; font-weight: 300 !important; font-size: 2.5rem !important; text-align: center; letter-spacing: 0.04em; }

/* ── 区切りごとに地の色を切り替える: PICKUP は砂色 ── */
html[data-design="v6"] .pickup-section, html[data-design="v6"] .screen > div:has(> .pickup-row) {
  background: var(--e-sand) !important; color: #1B1B1B; padding-top: 26px !important; padding-bottom: 24px !important;
  --ink: #1B1B1B; --ink-dim: #4A4436; --ink-rgb: 27, 27, 27; --ok: #1B1B1B; --soon: #4A4436;
}
html[data-design="v6"] .screen > div:has(> .pickup-row) { margin-top: 0 !important; }
html[data-design="v6"] .video-section { background: var(--bg-deep); padding-top: 24px; }

/* ── 写真: 隙間なく端まで2列、角丸なし ── */
html[data-design="v6"] .cast-grid, html[data-design="v6"] .today-grid {
  grid-template-columns: 1fr 1fr !important; gap: 0 !important; margin-left: -16px !important; margin-right: -16px !important;
}
html[data-design="v6"] .cast-card, html[data-design="v6"] .today-card { padding-bottom: 16px; text-align: center; }
html[data-design="v6"] .cast-photo, html[data-design="v6"] .today-photo, html[data-design="v6"] .pickup-photo, html[data-design="v6"] .gallery-photo {
  border-radius: 0 !important; margin-bottom: 10px !important;
}
html[data-design="v6"] .cast-photo, html[data-design="v6"] .today-photo { aspect-ratio: 3 / 4 !important; }
html[data-design="v6"] .cast-name, html[data-design="v6"] .today-name { text-align: center !important; font-size: 0.9375rem !important; letter-spacing: 0.08em; }
html[data-design="v6"] .cast-meta { text-align: center; font-size: 0.6875rem !important; letter-spacing: 0.06em; }
html[data-design="v6"] .today-time { text-align: center !important; font-size: 0.8125rem !important; color: var(--ink) !important; }
html[data-design="v6"] .area-group-title { text-align: center; color: var(--e-sand) !important; letter-spacing: 0.2em; margin: 22px 0 12px !important; }
html[data-design="v6"] .mini-progress { display: none !important; }

/* 状態: 写真の下の端に、白い字で「◎すぐ案内可能 (24:42時点)」 */
html[data-design="v6"] .cast-status-badge, html[data-design="v6"] .today-status {
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; text-align: center; justify-content: center !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)) !important; color: #fff !important; padding: 18px 4px 6px !important;
  font-size: 0.6875rem !important; text-shadow: none !important; border-radius: 0 !important;
}
html[data-design="v6"] .cast-status-badge .status-dot, html[data-design="v6"] .today-status .status-dot { display: none; }
html[data-design="v6"] .cast-status-badge.status-ok::before, html[data-design="v6"] .today-status.status-ok::before { content: '◎'; margin-right: 2px; }
html[data-design="v6"] .cast-status-badge::after, html[data-design="v6"] .today-status::after { content: var(--live-now, ''); font-size: 0.625rem; opacity: 0.85; }
html[data-design="v6"] .cast-badge { border-radius: 0 !important; background: #FFFFFF !important; color: #141A26 !important; font-family: var(--e-en); font-size: 0.75rem !important; top: 8px !important; bottom: auto !important; left: auto !important; right: 8px !important; }

/* 出勤時間に時計の印 */
html[data-design="v6"] .today-time::before {
  content: ''; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 4px; vertical-align: -0.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEE8DE' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 斜めの NEW FACE(左上の三角) */
html[data-design="v6"] .deco-new {
  display: block; position: absolute; top: 0; left: 0; z-index: 3; width: 58px; height: 58px; pointer-events: none;
  background: linear-gradient(135deg, var(--e-sand) 50%, transparent 50%);
}
html[data-design="v6"] .deco-new span {
  position: absolute; top: 9px; left: 3px; transform: rotate(-45deg); font-family: var(--e-en); font-size: 0.625rem; line-height: 1;
  color: #141A26; text-align: center; letter-spacing: 0.06em; font-weight: 600;
}
/* 縦書きの PICK UP(右上) */
html[data-design="v6"] .deco-pickup {
  display: block; position: absolute; top: 0; right: 0; z-index: 3; writing-mode: vertical-rl; background: #FFFFFF; color: #141A26;
  font-family: var(--e-en); font-size: 0.75rem; letter-spacing: 0.18em; padding: 8px 4px; pointer-events: none;
}
html[data-design="v6"] :is(.cast-photo, .today-photo):has(.deco-pickup) .cast-badge { right: 30px !important; }

/* ── 料金: 細い線、金額は英字の書体 ── */
html[data-design="v6"] .price-quick { border: 0 !important; border-top: 1px solid var(--v2-rule) !important; }
html[data-design="v6"] .price-amt { color: var(--ink) !important; font-family: var(--e-en); font-size: 1.125rem !important; }

/* ── 予約のボタンの帯: 白、ボタンは枠線だけ ── */
html[data-design="v6"] .reserve-fixed-bar { background: #FFFFFF !important; border-top: 0 !important; }
html[data-design="v6"] .reserve-fixed-btn, html[data-design="v6"] .reserve-fixed-btn.tel, html[data-design="v6"] .reserve-fixed-btn.web {
  background: #FFFFFF !important; color: #141A26 !important; border: 1px solid #141A26 !important; border-radius: 0 !important;
  font-family: 'Shippori Mincho', serif; font-weight: 500 !important; letter-spacing: 0.1em; box-shadow: 3px 3px 0 rgba(20, 26, 38, 0.15);
}
html[data-design="v6"] .reserve-fixed-btn.line { background: #FFFFFF !important; color: #06C755 !important; border: 1px solid #06C755 !important; border-radius: 0 !important; box-shadow: 3px 3px 0 rgba(6, 199, 85, 0.15); }
html[data-design="v6"] .reserve-fixed-btn svg { stroke: currentColor !important; }
html[data-design="v6"] .sheet-cta, html[data-design="v6"] .gate-cta { border-radius: 0 !important; background: var(--e-sand) !important; color: #141A26 !important; }

/* ── 下のナビ: 紺、選んでいる所は砂色 ── */
html[data-design="v6"] .bottom-nav { background: #0F141E !important; border-top: 0 !important; }
html[data-design="v6"] .nav-item.active { color: var(--e-sand) !important; }
html[data-design="v6"] .nav-item.active::before { background: var(--e-sand) !important; }
html[data-design="v6"] .nav-item.active .nav-icon svg { stroke: var(--e-sand) !important; }