/* PARTNER GATE — Luxury layer（お客様サイト専用・app.css の後に読み込む）
   コンセプト: 「漆黒とシャンパンゴールド」。明朝 × Cormorant で品格。余白と控えめな光。 */

:root {
  --font: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif: "Cormorant Garamond", "Shippori Mincho", serif;

  --paper: #090A10; --surface: #15171F; --surface-2: #0A0B11;
  --ink: #F2EDE1; --ink-2: #B7B0A0; --ink-3: #7C7566;
  --line: rgba(206,178,124,.18); --line-2: rgba(255,255,255,.055);
  --accent: #CBA45E; --accent-ink: #EAD5A2; --accent-weak: rgba(203,164,94,.12);
  --online: #77C3AB; --online-weak: rgba(119,195,171,.12);
  --phone: #D7A659; --phone-weak: rgba(215,166,89,.13);
  --danger: #DC8181; --danger-weak: rgba(220,129,129,.12); --ok: #86C09B;

  --grad-cta: linear-gradient(135deg, #E7CE92 0%, #CBA45E 52%, #A67B33 100%);
  --grad-progress: linear-gradient(90deg, #A67B33, #CBA45E 55%, #F1E1B2);
  --grad-mk: linear-gradient(140deg, #EED89E, #CBA45E 58%, #A67B33);

  --shadow: 0 3px 8px rgba(0,0,0,.5), 0 34px 80px -22px rgba(0,0,0,.72);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 14px 34px -20px rgba(0,0,0,.62);
  --shadow-cta: 0 16px 40px -12px rgba(200,155,70,.5);
  --radius: 18px;
}

body { background: var(--paper); color: var(--ink); }
a { color: var(--accent-ink); }
::selection { background: rgba(203,164,94,.28); }

/* ---- ヒーロー: 漆黒 + 金の微光 ---- */
.hero {
  color: #EFEADC;
  background:
    radial-gradient(78% 58% at 14% 8%, rgba(203,164,94,.18), transparent 60%),
    radial-gradient(66% 58% at 92% 18%, rgba(124,123,240,.10), transparent 55%),
    radial-gradient(94% 82% at 84% 102%, rgba(203,164,94,.12), transparent 60%),
    linear-gradient(165deg, #12131B 0%, #060710 76%);
}
.hero::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:4;
  background: linear-gradient(90deg, transparent, rgba(233,213,162,.6), transparent); }
.wordmark .mk { border-radius: 12px; background: var(--grad-mk); color:#2b2109; font-family: var(--serif);
  font-weight:600; box-shadow: 0 8px 22px -6px rgba(203,164,94,.6); }
.wordmark .wm-text { font-family: var(--serif); font-weight:600; letter-spacing:.32em; font-size:18px;
  background: linear-gradient(90deg,#F3E4B8,#CBA45E); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-title { font-family: var(--display); font-weight:600; letter-spacing:.03em; line-height:1.78;
  font-size: clamp(22px, 2.2vw, 28px); }
.hero-sub { color:#C7BFAD; line-height:1.95; }
.hero-points li { color:#D9D0BC; }
.hero-points .hp-ic { background: rgba(203,164,94,.10); border:1px solid rgba(203,164,94,.30); color:#EAD5A2; border-radius:9px; }
.hero-foot { color:#8B8365; font-family: var(--display); letter-spacing:.10em; }
.hero-orbs .orb { filter: blur(46px); }
.orb.o1 { background: rgba(203,164,94,.36); } .orb.o2 { background: rgba(119,195,171,.16); }
.orb.o3 { background: rgba(124,123,240,.22); } .orb.o4 { background: rgba(233,213,162,.22); }

/* ---- フロー本体 ---- */
.booking-shell { background: var(--surface-2); }
.topbar { background: color-mix(in srgb, #0A0B11 76%, transparent); border-bottom: 1px solid var(--line-2); }
.topbar .back { color: var(--ink-3); }
.topbar .back:hover { color: var(--accent-ink); background: rgba(203,164,94,.10); }
.topbar .title { font-family: var(--display); font-weight:600; letter-spacing:.06em; }
.progress { background: rgba(255,255,255,.05); }

/* ---- 見出し ---- */
.page-head h2, .stage h2, .auth-lead h2 { font-family: var(--display); font-weight:600; letter-spacing:.05em; line-height:1.62; }
.step-eyebrow { font-family: var(--serif); font-weight:600; letter-spacing:.4em; font-size:12.5px; color: var(--accent); }
.step-eyebrow .of { color: var(--ink-3); }
.step-eyebrow .bar { background: linear-gradient(90deg, rgba(203,164,94,.42), transparent); }
.hint, .ph-sub, .muted, .foot-note { color: var(--ink-3); }

/* ---- カード = ダークグラス + 金のヘアライン ---- */
.opt, .sum, .resv-card, .meet-card, .portal-head, .empty-note {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.014));
  border-color: var(--line); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.field input, .field textarea, .field select, .otp-boxes input {
  background: rgba(255,255,255,.03); border-color: var(--line); color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.opt:hover, .resv-card:hover { border-color: rgba(203,164,94,.5);
  box-shadow: 0 0 0 1px rgba(203,164,94,.22), var(--shadow); }
.opt.sel { border-color: var(--accent); background: rgba(203,164,94,.07);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -8px rgba(203,164,94,.5); }
.opt .ic { border:1px solid rgba(203,164,94,.22); }
.opt .tx .t { font-weight:700; }
.opt .dur { font-family: var(--serif); font-weight:600; font-size:15px; color: var(--accent-ink);
  background: rgba(203,164,94,.12); border:1px solid rgba(203,164,94,.26); }
.opt .chev, .opt .check { color: var(--accent-ink); }
.avatar { border:1px solid rgba(203,164,94,.24); color: var(--accent-ink); }

/* ---- ボタン = ゴールド ---- */
.btn { background: var(--grad-cta); color:#241B06; font-weight:700; letter-spacing:.08em; box-shadow: var(--shadow-cta); }
.btn:hover { filter: brightness(1.06); box-shadow: 0 20px 44px -12px rgba(200,155,70,.6); }
.btn.ghost { background: transparent; color: var(--accent-ink); border:1px solid rgba(203,164,94,.42); }
.btn.ghost:hover { background: rgba(203,164,94,.08); border-color: var(--accent); }
.btn.danger { background: linear-gradient(135deg,#C86B6B,#9B4141); color:#fff; box-shadow:0 14px 34px -12px rgba(155,65,65,.5); }
.sticky-cta { background: linear-gradient(to top, var(--surface-2) 74%, transparent); }

/* ---- カレンダー・時間枠 ---- */
.cal-nav button { background: rgba(255,255,255,.04); border-color: var(--line); color: var(--ink); }
.cal-nav button:hover { border-color: var(--accent); color: var(--accent-ink); }
.cal-nav .label { font-family: var(--display); }
.cal-days .d { background: rgba(255,255,255,.03); border-color: var(--line-2); color: var(--ink); font-family: var(--serif); font-size:16px; }
.cal-days .d.mut, .cal-days .d.none { color: var(--ink-3); background: transparent; }
.cal-days .d.has::after { background: var(--accent); }
.cal-days .d.sel, .slots .sl.sel { background: var(--grad-cta); color:#241B06; box-shadow: var(--shadow-cta); }
.cal-days .d.sel::after { background:#241B06; }
.slots .sl { background: rgba(255,255,255,.03); border-color: var(--line); color: var(--accent-ink); font-family: var(--serif); font-size:18px; }
.slots .sl:hover { border-color: var(--accent); }

/* ---- サマリー（金の帯） ---- */
.sum::before { background: var(--grad-cta); }
.sum .row { border-bottom: 1px dashed var(--line); }
.sum .row .v { color: var(--ink); }
.badge-on { color: var(--online); background: var(--online-weak); }
.badge-ph { color: var(--phone); background: var(--phone-weak); }

/* ---- SMS OTP ---- */
.otp-boxes input { font-family: var(--serif); font-size:27px; color: var(--accent-ink); }
.otp-boxes input.filled, .otp-boxes input:focus { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 20px -6px rgba(203,164,94,.55); }

/* ---- マイページ ---- */
.portal-head { background: linear-gradient(150deg, rgba(203,164,94,.13), rgba(255,255,255,.02)); }
.portal-head::after { background: radial-gradient(circle, rgba(203,164,94,.22), transparent 70%); }
.portal-head .pt-hello { font-family: var(--display); font-weight:600; letter-spacing:.04em; }
.portal-head .pt-sub { color: var(--ink-2); }
.sec-label { color: var(--ink-2); letter-spacing:.16em; font-family: var(--display); }
.resv-card .rc-date { border-right:1px solid var(--line); }
.resv-card .rc-date .rc-d { font-family: var(--serif); font-weight:700; font-size:23px; color: var(--accent-ink); }
.resv-card .rc-body .rc-t { font-weight:700; }

/* ---- 完了 ---- */
.done-ic { background: var(--grad-cta); color:#241B06; box-shadow: 0 18px 44px -10px rgba(203,164,94,.55); }
.meet-card { border-color: rgba(119,195,171,.42); }
.meet-card a { color: var(--online); }

.err { background: var(--danger-weak); color: var(--danger); border:1px solid rgba(220,129,129,.3); }
.pill.confirmed { color: var(--ok); background: var(--online-weak); }
.pill.cancelled { color: var(--danger); background: var(--danger-weak); }

/* ============================================================
   Luxury Polish — 細部の作り込み（光・質感・装飾）
   ============================================================ */

/* ロゴのゴールド・シマー */
.wordmark .wm-text {
  background: linear-gradient(100deg, #B98E48 0%, #F6E7BB 42%, #EAD59A 52%, #B98E48 78%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .wordmark .wm-text { animation: gate-shimmer 7s linear infinite; }
  @keyframes gate-shimmer { to { background-position: 220% 0; } }
}
.wordmark .mk { position: relative; overflow: hidden; }
.wordmark .mk::after { content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); }
@media (prefers-reduced-motion: no-preference) {
  .wordmark .mk::after { animation: mk-sheen 7s ease-in-out infinite; }
  @keyframes mk-sheen { 0%,70%{ transform: translateX(-120%); } 85%{ transform: translateX(120%);} 100%{ transform: translateX(120%);} }
}

/* エディトリアルな金の見出しラベル */
.hero-eyebrow { font-family: var(--serif); font-weight: 600; letter-spacing: .34em; font-size: 12px;
  color: var(--accent); display: flex; align-items: center; gap: 13px; }
.hero-eyebrow::before { content:""; width: 30px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--accent), transparent); }

/* ヒーロー: 金の枠取り（コーナー）＋大きな透かしモノグラム */
.hero-inner::before {
  content: "P"; position: absolute; right: -6px; top: -74px; z-index: -1;
  font-family: var(--serif); font-weight: 600; font-size: 260px; line-height: 1; color: rgba(203,164,94,.05);
  pointer-events: none; user-select: none;
}
@media (max-width: 1023px) { .hero-inner::before { right: 4px; top: -40px; font-size: 210px; } }

/* カード: 上端の光（マテリアル） + 選択/ホバーの金グロー */
.opt, .sum, .resv-card, .portal-head, .meet-card, .empty-note, .field input, .field textarea, .field select, .otp-boxes input {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-sm);
}
.opt.sel { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--accent), 0 0 34px -8px rgba(203,164,94,.55); }
.resv-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(203,164,94,.35), var(--shadow); }

/* ボタン: ホバーの光沢スイープ */
.btn { position: relative; overflow: hidden; }
.btn:not(.ghost)::after { content:""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.ghost):hover::after { animation: btn-sheen .85s ease; }
  @keyframes btn-sheen { 0%{ left:-70%; opacity:0 } 25%{ opacity:.85 } 100%{ left:130%; opacity:0 } }
}

/* セクション見出し: 金の罫線あしらい */
.sec-label { display: flex; align-items: center; gap: 11px; }
.sec-label::before { content:""; width: 18px; height: 1px; flex: none; background: var(--accent); }
.step-eyebrow .bar { background: linear-gradient(90deg, rgba(203,164,94,.5), rgba(203,164,94,.05)); }

/* サマリー(チケット)の端に切り込み風の点 */
.sum { position: relative; }
.sum::after { content:""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  transform: translateY(-50%); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }

/* マイページ: 挨拶カードに金のモノグラム */
.portal-head { position: relative; overflow: hidden; }
.portal-head .pt-hello::before { content:"❖"; color: var(--accent); font-size: 13px; margin-right: 9px; opacity: .8; vertical-align: 2px; }

/* 上品な金のローディングリング */
.spinner { position: relative; padding-top: 56px; }
.spinner::before { content:""; position: absolute; top: 14px; left: 50%; margin-left: -14px; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid rgba(203,164,94,.22); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .spinner::before { animation: lux-spin .8s linear infinite; }
  @keyframes lux-spin { to { transform: rotate(360deg); } } }

/* 完了アイコンの微光リング */
.done-ic { position: relative; }
.done-ic::after { content:""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(203,164,94,.35); }

/* 見出しに少しの字送りで格を上げる */
.page-head h2, .auth-lead h2 { line-height: 1.66; }
.foot-note { letter-spacing: .06em; }

/* 進捗ドット */
.step-dots { display: flex; align-items: center; gap: 8px; }
.step-dots .sd { width: 7px; height: 7px; border-radius: 50%; background: rgba(203,164,94,.22); transition: all .35s ease; }
.step-dots .sd.done { background: rgba(203,164,94,.55); }
.step-dots .sd.on { background: var(--accent); transform: scale(1.35); box-shadow: 0 0 12px -1px rgba(203,164,94,.85); }
.step-dots .step-label { font-family: var(--serif); font-weight: 600; letter-spacing: .3em; font-size: 11px; color: var(--ink-3); margin-left: 8px; }

/* メニューの金インデックス番号 */
.opt-index { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--accent);
  min-width: 26px; text-align: center; letter-spacing: .02em; opacity: .9; margin-right: 2px; }
.opt.opt-lg { gap: 12px; }

/* カレンダー凡例 */
.cal-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3);
  font-family: var(--font); margin: 2px 2px 0; }
.cal-legend .cl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--online); flex: none; }

/* ============================================================
   LP埋め込みモード（?embed=1）: 大きなブランド画面を隠し、
   予約フォームだけをLPページ内に馴染ませて表示する
   ============================================================ */
html.embed, html.embed body { background: transparent !important; min-height: 0; }
html.embed .layout { display: block !important; min-height: 0; }
html.embed .hero { display: none !important; }
html.embed .booking-shell {
  max-width: 620px; margin: 0 auto; min-height: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line-2, rgba(0,0,0,.08));
  border-radius: 16px; overflow: hidden;
}
html.embed .topbar .brand { display: none; }