/* 非首屏樣式（946：首屏 CSS 從 146KB 降到 80KB 以下）
 * ------------------------------------------------------------------
 * 這裡是「首屏用不到」的規則：訂單／時間軸、詳情預約面板、主人邀請函、
 * 會員中心、動效層。它們仍以 <link> 載入（同樣是 media="print" onload 的
 * 非阻塞寫法），只是不再跟首屏樣式綁在同一支檔案裡排隊下載。
 * 新增規則請照這條線走：只有 / 、/girls 、/login 第一屏會用到的才放 index.css。
 */
/* --- 狀態時間軸 --- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  position: relative;
  padding-left: var(--gap-card-x-lg);
  padding-bottom: var(--space-5);
}

.step:last-child {
  padding-bottom: 2px;
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: var(--control-radius);
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.step::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}

.step:last-child::after {
  display: none;
}

.step[data-state="done"]::before {
  border-color: var(--gold);
  background: var(--gold);
}

.step[data-state="done"]::after {
  background: var(--line-strong);
}

.step[data-state="current"]::before {
  border-color: var(--gold);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgb(229 181 143 / 0.16);
}

.step[data-state="cancelled"]::before {
  border-color: var(--rose);
  background: var(--rose);
}

/* --- 下單確認面板 --- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-3) var(--space-3) 0;
  padding-bottom: 0;
  background: rgb(8 3 6 / 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* 抽屜開著時，滑到底不要把手勢傳給底下那頁 */
  overscroll-behavior: contain;
  /* 軟鍵盤彈出時 visualViewport 會變矮；貼齊可視區上緣，抽屜才不會被鍵盤蓋住 */
  height: var(--sg-vvh, 100dvh);
  max-height: var(--sg-vvh, 100dvh);
}

.sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  max-height: calc(100vh - 12px);
  max-height: calc(var(--sg-vvh, 100dvh) - 12px);
  border: 1px solid var(--line-strong);
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}

@media (min-width: 768px) {
  .sheet-backdrop {
    align-items: center;
    padding: var(--space-4);
  }

  .sheet {
    max-height: calc(100vh - 32px);
    max-height: calc(var(--sg-vvh, 100dvh) - 32px);
    border-radius: 18px;
  }
}


@media (min-width: 768px) {
  .sheet-backdrop {
    align-items: center;
  }
}


.note-ok {
  border: 1px solid rgb(229 181 143 / 0.4);
  background: rgb(229 181 143 / 0.1);
  color: var(--gold);
  border-radius: 12px;
  padding: 10px var(--space-3);
  font-size: 13px;
}

/* --- 訂單詳情：平板起兩欄 --- */
@media (min-width: 768px) {
  .order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}


/* --- 公關資料：分組 chips（詳情頁），空分組不出現 --- */
.profile-facts {
  display: grid;
  gap: var(--gap-card-x);
  margin-top: 18px;
}

.fact-group {
  min-width: 0;
}

.fact-label {
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--dim);
}

.fact-chips,
.card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 1px 10px;
  background: transparent;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

.card-chips .chip {
  min-height: 22px;
  padding: 0 var(--space-2);
  font-size: 12px;
  color: var(--muted);
}

/* --- 詳情頁：預約面板 --- */
.sheet {
  max-height: calc(100vh - 12px);
  max-height: calc(var(--sg-vvh, 100dvh) - 12px);
  overflow: hidden;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-row .chip {
  min-height: 34px;
  padding: 0 var(--space-3);
  font-size: 13px;
  cursor: pointer;
}

.chip.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--btn-primary-fg);
  font-weight: 600;
}

.chip:disabled,
.chip[aria-disabled="true"] {
  border-style: dashed;
  color: var(--dim);
  opacity: 0.42;
  cursor: not-allowed;
}

.chip:focus-visible,
.step-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 品牌字標：字形翻轉（千精洨姐 ↔ 千金小姐）
 * 用 inline-block 而非 inline-flex：flex 會把每個子 span 變成 flex item，
 * 繼承來的 letter-spacing 在每個 item 尾端各多算一次（金/小 那兩格多 0.2em），
 * 字距就會忽寬忽窄。inline-block 讓整串字走同一條 text run，字距才等距。 */
.brand-mark {
  display: inline-block;
  white-space: nowrap;
  perspective: 320px;
}
.brand-flip.is-static {
  animation: none;
}
@keyframes brand-flip {
  0%, 42% { transform: rotateX(0deg); }
  50%, 92% { transform: rotateX(-180deg); }
  100% { transform: rotateX(-360deg); }
}

/* ── 登入前品牌門面（BrandGate） ───────────────────────────── */
.gate {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.gate-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* <picture> 只是載體，不要多一層盒模型（與 index.html 的 #sg-lcp-poster 對齊） */
.gate-poster-pic {
  display: contents;
}

.gate-poster,
.gate-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate-poster {
  filter: saturate(0.86) contrast(1.05) brightness(0.7);
  animation: hero-drift 84s ease-in-out infinite alternate;
  will-change: transform;
}

/*
 * 影片是「接續」不是「換場」：poster 先當 LCP 與第一眼畫面，
 * 影片第一帧解碼好才淡入（opacity 0 → 1），所以使用者不會看到黑閃或硬切。
 */
.gate-video {
  position: absolute;
  inset: 0;
  filter: saturate(0.92) brightness(0.72);
  opacity: 0;
  transition: opacity 640ms var(--ease-out);
}

.gate-video.is-live {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gate-video {
    transition: none;
  }
}


.gate-media--video .gate-poster {
  animation: none;
  transform: scale(1.04);
}

/*
 * 手機：素材是 541×230 的橫式影片，硬拉成 390×844 等於放大 3.67 倍、只剩中間一條。
 * 這裡改成「上半帶狀 + 等比 cover」：寬高各自裁切、比例不變，下半留給字與主鍵。
 */
@media (max-width: 767px) {
  .gate-media {
    inset: 0 0 auto;
    /* 帶狀高度貼近素材 2.35:1 的原始比例，只做小幅裁切，不把主體放大失真 */
    height: min(36vh, 320px);
    height: min(36svh, 320px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }

  .gate-poster,
  .gate-video {
    /* 主體（香檳杯）在畫面左中 30–35%，置中一點才不會整片亮部偏左 */
  }

  /* 兩層一起收尾：影像本身淡出，底下再壓一層近黑，杜絕硬邊 */
  .gate-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 90%;
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0) 0%,
      rgb(11 4 7 / 0.42) 52%,
      var(--bg) 92%
    );
    pointer-events: none;
  }
}

.gate-glow,
.gate-warm,
.gate-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gate-glow {
  background: var(--gate-glow-bg);
}

.gate-warm {
  background: var(--gate-warm-bg);
}

.gate-grain {
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 160px 160px;
}

.gate-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--space-5) 0;
}

.gate-wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.36em;
  color: var(--gold);
  text-transform: none;
}

.gate-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 40rem;
  /* 26px 是設計留白；再加上瀏海機的底部安全區，主鍵才不會貼到指示條。 */
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

.gate-eyebrow {
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold);
  text-transform: none;
  opacity: 0.92;
}

.gate-line {
  margin-top: var(--space-4);
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.03em;
  color: var(--fg);
  text-wrap: balance;
}

.gate-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: var(--space-7) 0 var(--space-5);
  background: linear-gradient(90deg, var(--gold), transparent);
}

.gate-sub {
  max-width: 26rem;
  font-size: var(--fs-body);
  line-height: 1.8;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-soft);
  opacity: 0.84;
  text-wrap: pretty;
}

.gate-actions {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.gate-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-h);
  padding: 0 var(--gap-card-y);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--control-radius);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: var(--btn-primary-fg);
  font-family: var(--sans, inherit);
  font-size: var(--fs-cta);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease-out,
    background var(--dur-fast) ease-out;
}

.gate-cta:hover,
.gate-cta:focus-visible {
  transform: translateY(-1px);
  background: var(--btn-primary-hover-bg);
  border-color: var(--btn-primary-hover-border);
  box-shadow: var(--btn-primary-shadow-hover);
}

.gate-cta-dot {
  display: none;
}

@media (min-width: 768px) {
  .gate-top { padding: var(--gap-card-y) var(--space-8) 0; }
  .gate-copy { padding: 0 var(--space-8) var(--space-8); }
  .gate-actions { max-width: 24rem; }
}


/* 桌機：把文字塊從螢幕最左邊拉進來，並給標題一個更大的版面比例 */
@media (min-width: 1024px) {
  .gate-top { padding: var(--space-8) 64px 0; }
  .gate-copy {
    max-width: 46rem;
    padding: 0 64px 64px;
  }
  .gate-sub { max-width: 36rem; }
  .gate-line { letter-spacing: 0.025em; }
  .gate-actions { max-width: none; }
  .gate-cta {
    width: auto;
    min-width: 17rem;
    justify-self: start;
    padding: 0 36px;
  }
}

/* 開場：夜幕由上方降下再退開，只演一次；不循環、不搶互動 */
.gate-dusk {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, #0b0407 0%, #0b0407 46%, rgb(11 4 7 / 0) 100%);
  animation: gate-dusk-lift 1200ms var(--ease-out) forwards;
}

@keyframes gate-dusk-lift {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-dusk { animation: none; opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .gate-poster { animation: none; }
  .gate-cta { transition: none; }
}


/* ── 迎賓取名（WelcomeGate） ──────────────────────────────── */
/* 會所迎賓：暗色玫瑰金、緩慢流動的光柱、三個詞依序上浮。 */

.welcome {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 64px var(--space-6) 44px;
  background: var(--bg);
  isolation: isolate;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translateY(0.55em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcome-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes welcome-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcome-rule-grow {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

@keyframes welcome-sweep-a {
  0%, 100% {
    transform: rotate(8deg) translate3d(-8%, 0, 0);
    opacity: 0.26;
  }
  50% {
    transform: rotate(12deg) translate3d(10%, 1.5%, 0);
    opacity: 0.52;
  }
}

@keyframes welcome-sweep-b {
  0%, 100% {
    transform: rotate(-10deg) translate3d(9%, 0, 0);
    opacity: 0.2;
  }
  55% {
    transform: rotate(-6deg) translate3d(-11%, 2%, 0);
    opacity: 0.42;
  }
}

@keyframes welcome-halo-breathe {
  0%, 100% {
    opacity: 0.72;
    scale: 1;
  }
  50% {
    opacity: 1;
    scale: 1.06;
  }
}

@media (min-width: 768px) {
  .welcome {
    padding: 88px var(--space-8) 56px;
  }
}


/* 尊重系統設定：不動畫，直接給終態 */
@media (prefers-reduced-motion: reduce) {
  .welcome-step,
  .welcome-greet > span,
  .welcome--ask .welcome-ask {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .welcome-rule {
    animation: none;
    opacity: 1;
    width: 100%;
  }
  .welcome-beam,
  .welcome-halo {
    animation: none;
  }
  .welcome-ask {
    opacity: 1;
    transform: none;
  }
  .welcome-cta,
  .welcome-underline::after,
  .welcome-greet {
    transition: none;
  }
}

.guest {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: var(--space-6);
}

.guest-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--bg) 140%);
  padding: var(--space-5) 18px;
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, 0.9);
}

.guest-input {
  width: 100%;
  padding: var(--space-3) var(--gap-card-x);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--fg);
  font-size: var(--fs-cta);
  letter-spacing: 0.04em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.guest-input::placeholder {
  color: var(--dim);
}

.guest-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.guest-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- 主人邀請函：會員中心裡的一封短信，不做彈窗 --- */
.invite-letter {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--gold-soft), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg) 150%);
}

.invite-letter::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0.45;
}

.invite-letter-mark {
  margin: 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  color: var(--dim);
  text-indent: 0.5em;
}

.invite-letter-title {
  margin: var(--space-3) 0 var(--space-4);
  text-align: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: var(--tracking-hero);
  color: var(--fg);
}

.invite-letter-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.invite-letter-body {
  margin: 0 0 var(--space-3);
  font-size: 0.86rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.invite-letter-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.invite-letter-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--gold);
  border-radius: var(--control-radius);
  background: var(--gold-grad);
  color: var(--btn-primary-fg);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.15s ease;
}

.invite-letter-cta:hover {
  filter: brightness(1.06);
}

.invite-letter-cta:active {
  transform: translateY(1px);
}

.invite-letter-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.invite-letter-later {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.invite-letter-later:hover {
  color: var(--muted);
}

.invite-letter-later:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
  border-radius: 8px;
}

.invite-letter-sign {
  margin: 18px 0 0;
  text-align: right;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
}

@media (min-width: 420px) {
  .invite-letter-actions {
    flex-direction: row-reverse;
    align-items: center;
  }

  .invite-letter-cta {
    flex: 1;
  }
}


@media (min-width: 640px) {
  .guest {
    max-width: 30rem;
    margin-inline: auto;
    gap: 22px;
  }

  .guest-card {
    padding: var(--space-6) 22px;
  }
}


/* --- 換頁與載入：殼層（底色、頂部列）不動，只讓內容淡入 --- */
/* 內容區至少撐滿一個視窗，短頁與載入中不會讓頁面高度忽長忽短、捲軸忽有忽無。 */
.stage-main {
  min-height: calc(100vh - 9rem);
  min-height: calc(100svh - 9rem);
}

/* 只動 opacity：頁面內有 position: fixed 的底部列，transform 會讓它暫時位移。 */
.page-swap {
  animation: page-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes page-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-swap {
    animation: none;
  }

  .sk {
    animation: none;
  }
}


/* ==========================================================================
   動效層（motion）
   --------------------------------------------------------------------------
   規則：
   1. 只動 transform／opacity／filter。沒有任何 width/height/top/left 動畫，
      也沒有 JS 計時器在跑動畫；唯一的 JS 是「進場觸發」與「寫 CSS 變數」。
   2. 所有初始隱藏都掛在 html[data-motion="on"] 底下。這個屬性由 React 掛載後
      才設定，所以：JS 沒載入、不支援 IntersectionObserver、使用者選了減少動效
      → 完全沒有隱藏規則，內容第一帧就可讀（LCP 不受影響）。
   3. 起始 opacity 一律 0.001（不是 0）：文字在任何一刻都不算「消失」，
      而且非 0 的圖層才會被 LCP 認列。時長全部 ≤ 600ms。
   4. 數值全部來自 token：上浮 9px／520ms，卡片帶 1px 金屬邊光掃過。
   ========================================================================== */

:root {
  --m-rise: 9px;
  --m-dur: 520ms;
  --m-ease: cubic-bezier(0.16, 0.84, 0.28, 1);
  --m-stagger: 80ms;
  --m-glow: rgb(255 214 170 / 0.2);
  --m-eyebrow-dur: 600ms;
  --m-fog-c: rgb(255 206 158 / 0.26);
  --fog-opacity: 0.55;
}

/* --- 滾動揭露：整塊上浮淡入，只播一次 ------------------------------------ */

:root[data-motion="on"] [data-m-reveal] {
  opacity: 0.001;
  transform: translate3d(0, var(--m-rise), 0);
  transition:
    opacity var(--m-dur) linear,
    transform var(--m-dur) var(--m-ease);
  transition-delay: calc(min(var(--m-i, 0), 8) * var(--m-stagger));
}

:root[data-motion="on"] [data-m-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- 逐行進場：一行一個 block，不拆字 ------------------------------------ */

.m-lines,
.m-line {
  display: block;
}

:root[data-motion="on"] .m-line {
  opacity: 0.001;
  transform: translate3d(0, calc(var(--m-rise) * 1.4), 0);
  transition:
    opacity 320ms linear,
    transform var(--m-dur) var(--m-ease);
  transition-delay: calc(min(var(--m-i, 0), 6) * 60ms + 70ms);
}

:root[data-motion="on"] .m-line.is-in {
  opacity: 1;
  transform: none;
}

:root[data-motion="on"] .m-eyebrow.is-in {
  letter-spacing: var(--m-ls, 0.2em);
  opacity: 1;
  transform: none;
}

/* --- 數字 count-up：等寬數字，動畫中不推擠版面 ---------------------------- */

.m-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- 卡片：游標光暈＋夜曲金屬邊光 ---------------------------------------- */

[data-m-glow] {
  position: relative;
}

/* 卡片：1px 金屬邊框，光帶由左掃到右（mask 只留邊框，位移交給 transform） */
[data-m-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-130%, 0, 0);
  background: linear-gradient(104deg, transparent 37%, var(--gold-hi) 50%, transparent 63%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@media (hover: hover) and (pointer: fine) {
  [data-m-glow]:hover::before,
  [data-m-glow]:focus-visible::before {
    opacity: 1;
    animation: m-sweep 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}


@keyframes m-sweep {
  0% {
    transform: translate3d(-130%, 0, 0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    transform: translate3d(130%, 0, 0);
    opacity: 0;
  }
}

/*
 * 卡片原本的 style-enter 動畫與揭露層重複：有 data-motion 時交給揭露，
 * 避免兩個動畫同時改 opacity／transform 而互相蓋掉。
 */
:root[data-motion="on"] .girl-card {
  animation: none;
}

/* --- 首屏：霧光（游標 ±8px）＋ 景深視差（scale 1.05 → 1） ---------------- */

.m-fog {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: 4%;
  height: 58%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--fog-opacity);
  background: radial-gradient(56% 58% at 46% 62%, var(--m-fog-c), transparent 72%);
  filter: blur(22px);
  transform: translate3d(calc(var(--fog-x, 0) * 1px), calc(var(--fog-y, 0) * 1px), 0);
  transition: transform 260ms ease-out;
}

/* --- 圖片曝光：載入完成後 400ms 由過亮收到正常（只動 opacity） ---------- */

.m-exposure {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--gold-hi);
  mix-blend-mode: soft-light;
  opacity: 0.38;
  transition: opacity 400ms ease-out;
}

.m-exposure[data-loaded="true"] {
  opacity: 0;
}

/* --- 按鈕：按下 0.98 回彈（140ms 內有回饋） ------------------------------ */

:root[data-motion="on"] button,
:root[data-motion="on"] .tap,
:root[data-motion="on"] a.girl-card {
  transition:
    transform 140ms var(--m-ease),
    opacity 140ms linear;
}

:root[data-motion="on"] button:active,
:root[data-motion="on"] .tap:active,
:root[data-motion="on"] a.girl-card:active {
  transform: scale(0.98);
}

/* --- 路由切換 ------------------------------------------------------------ */

/* 支援 View Transitions 時由原生轉場接手，關掉這層淡入避免雙重。 */
:root[data-vt="on"] .page-swap {
  animation: none;
}

/* 詳情頁封面：與列表卡片被標記的同名元素對接（觀感呼應，不做完整 shared element） */
:root[data-vt="on"] .detail-media .portrait-hero {
  view-transition-name: m-cover;
}

::view-transition-old(root) {
  animation: m-vt-out 180ms ease both;
}

::view-transition-new(root) {
  animation: m-vt-in 260ms ease both;
}

::view-transition-group(m-cover) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 0.84, 0.28, 1);
}

@keyframes m-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes m-vt-in {
  from {
    opacity: 0;
  }
}

/* 分頁程式碼還沒到手時的等待殼：同底色、無白閃，佔位高度固定不跳版 */
.m-route-fallback {
  display: grid;
  gap: var(--gap-card-x);
  padding: 22px 0;
}

.m-route-fallback-bar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--surface-2);
  animation: m-pulse 1.4s ease-in-out infinite;
}

.m-route-fallback-bar:first-child {
  height: 22px;
  width: 46%;
}

.m-route-fallback-bar:nth-child(2) {
  width: 82%;
}

.m-route-fallback-bar:nth-child(3) {
  width: 64%;
}

@keyframes m-pulse {
  50% {
    opacity: 0.45;
  }
}

/* --- 全關：減少動效 ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  [data-m-reveal],
  .m-line,
  .m-eyebrow,
  .m-glow-layer,
  .m-exposure {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    letter-spacing: var(--m-ls, inherit) !important;
  }

  .m-fog {
    display: none;
  }

  .m-hero-scale {
    transform: none !important;
    will-change: auto;
  }

  [data-m-glow]::before {
    animation: none !important;
    opacity: 0 !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── 相容性降級（舊版 Android WebView、Safari 16 以前） ────────────────── */

/* 不支援 aspect-ratio 時：用 padding-top 百分比撐比例，圖層改絕對定位，
   卡片不會塌成 0 高，grid 也不會跑版。 */
@supports not (aspect-ratio: 1 / 1) {
  .portrait,
  .portrait-hero,
  .sk {
    height: 0;
    padding-top: 133.333%;
  }

  .sk-hero {
    padding-top: 125%;
  }

  .sk-line {
    height: 4.5rem;
    padding-top: 0;
  }

  .girl-card-featured .portrait {
    padding-top: 130%;
  }

  .portrait img {
    position: absolute;
    inset: 0;
  }
}

/* 手機版：把巢狀／滿版 backdrop-filter 換成純漸層。
   iOS Safari 的 backdrop-filter 每層都要即時取樣底圖，首頁幾十張卡片各掛一層
   .portrait::before（上緣柔焦）＋抽屜滿版模糊，是中階 iPhone 掉格的主因；
   視覺上以同樣方向的暗漸層取代，差異在暗底照片上幾乎看不出來。 */
@media (max-width: 767px) {
  .portrait::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(
      180deg,
      rgb(18 7 12 / 0.55) 0%,
      rgb(18 7 12 / 0.28) 55%,
      rgb(18 7 12 / 0) 100%
    );
  }

  .sheet-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(8 3 6 / 0.86);
  }
}

/* 沒有 backdrop-filter（Firefox < 103、舊 WebView）時，玻璃層改為不透明底，
   避免頂部列／底部列的文字壓在照片上讀不清。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stage-hdr,
  .stage-bar {
    background: var(--surface);
  }

  .sheet-backdrop {
    background: rgb(8 3 6 / 0.92);
  }
}

/* mix-blend-mode 不支援時（極舊 WebView）：顆粒層不參與混合，改為直接淡疊，
   不會出現整塊灰白。 */
@supports not (mix-blend-mode: soft-light) {
  .hero-grain {
    mix-blend-mode: normal;
    opacity: 0.03;
  }
}

/* 頂部列：中文可在任何字之間斷行，320px 級小螢幕會被擠成兩三排。
   明確 nowrap，並在窄螢幕縮小選單字級、截斷貴賓名稱。 */
.stage-hdr a,
.stage-hdr button {
  white-space: nowrap;
}

@media (max-width: 380px) {
  .stage-hdr .stage-col-wide,
  .stage-hdr .stage-col-wide > div {
    gap: var(--space-2);
    min-width: 0;
  }

  .stage-hdr .m-link,
  .stage-hdr .btn-quiet {
    font-size: 13px;
  }

  .stage-hdr .guest-link {
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 320px 真的塞不下「貴賓 · 」時只留名字，不截斷人名。 */
  .stage-hdr .guest-prefix {
    display: none;
  }
}


/*
 * ---------------------------------------------------------------------------
 * 工藝回補層（2026-10）：把 61ae0dc 回退時一起被拿掉的「手路」加回來，
 * 配色仍是近黑 #12070c + 暖金 #e5b58f。全部純 CSS，不加圖片、不用大面積 blur，
 * 不影響 LCP：只有漸層邊、1px 高光、低透明度多層陰影與色彩疊層。
 * ---------------------------------------------------------------------------
 */

/* 非 .surface 的頁面卡片（貴賓中心）也吃同一套金線與層次 */
.guest-card {
  border: 1px solid transparent;
  background-image:
    linear-gradient(180deg, var(--surface), var(--bg)),
    var(--card-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--card-shadow);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    background-image var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .guest-card:hover {
    background-image:
      linear-gradient(180deg, var(--surface), var(--bg)),
      var(--card-edge-hover);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(calc(var(--hover-lift) * -1));
  }
}


/* 標題疊層只作用在標題上，表格與內文不受影響 */
.guest-title,
.my-title,
.gate-title,
.invite-letter-title {
  text-shadow: var(--heading-shadow);
}

/* 內文小標的字距收斂成 0.24em，讓 eyebrow 一排像刻出來的 */
.guest-eyebrow,
.my-eyebrow,
.gate-eyebrow,
.join-eyebrow {
  font-feature-settings: "tnum" 1;
  opacity: 0.94;
}

/* 主鍵 hover 掃光：尊重減少動效偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after {
    display: none;
  }
}

/* ==========================================================================
   首頁 2026 質感提升
   1. 首屏：兩張直式大圖錯位、品牌／一句話／主鍵三層，一屏講完
   2. 名單：手機是可掃讀的橫式卡列，桌機維持三欄但節奏統一
   3. 空狀態：給下一步，不給空白
   4. 動效：進場只演一次，hover／點按有回饋，減少動效全關
   ========================================================================== */

.home {
  overflow-x: clip;
}

/* --- 首屏 hero：全寬出血，圖是主角，字只佔左下角 --- */
.hero {
  position: relative;
  overflow: hidden;
  height: 54vh;
  height: 54svh;
  max-height: 420px;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) 0;
  border-bottom: var(--hairline) solid var(--line);
  background: var(--hero-bg);
}

.hero-poster,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-poster {
  filter: saturate(0.84) contrast(1.04) brightness(0.72);
  animation: hero-drift 72s ease-in-out infinite alternate;
  will-change: transform;
}

/* 影片蓋上去後就不必再推 poster，省一點合成成本 */
.hero-media--video .hero-poster {
  animation: none;
  transform: scale(1.04);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  max-width: 34rem;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) var(--space-5);
}

@keyframes hero-drift {
  from {
    transform: scale(1.05) translate3d(-1.2%, -0.8%, 0);
  }
  to {
    transform: scale(1.12) translate3d(1.4%, 1.2%, 0);
  }
}

@media (min-width: 768px) {
  .hero {
    height: 64vh;
    max-height: 520px;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter-md)) 0;
  }

  .hero-copy {
    padding: 0 var(--gutter-md) var(--space-6);
  }
}


@media (min-width: 1024px) {
  .hero {
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter-lg)) 0;
  }

  .hero-copy {
    padding: 0 var(--gutter-lg) var(--space-7);
  }
}


@media (prefers-reduced-motion: reduce) {
  .hero-poster {
    animation: none;
    transform: scale(1.06);
  }
}


.rail {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) -16px 0;
  padding: 0 var(--space-4) var(--space-1);
  overflow-x: auto;
  /* 橫滑到盡頭不要順勢拖動整頁（iOS 會把頁面左右彈） */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

/* --- 可約卡片：照片是主角，文字只留四行 --- */
.girl-grid > li {
  display: flex;
  min-width: 0;
}

.girl-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition:
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-slow) ease;
  animation: style-enter var(--dur-enter) var(--ease-out) both;
}

.girl-grid > li:nth-child(2) .girl-card {
  animation-delay: calc(var(--dur-fast) / 4);
}

.girl-grid > li:nth-child(3) .girl-card {
  animation-delay: calc(var(--dur-fast) / 2);
}

.girl-grid > li:nth-child(n + 4) .girl-card {
  animation-delay: calc(var(--dur-fast) * 0.75);
}

a:hover .girl-card,
a:focus-visible .girl-card {
  transform: translateY(calc(-1 * var(--hover-lift)));
}

.girl-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: var(--space-3);
}

.girl-card .cap-name {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.girl-card .cap-price {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.card-status {
  flex: none;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(229, 181, 143, 0.66);
}

/* 暫停接單：整體降一點對比，仍可點進詳情 */
.girl-card[data-paused="true"] {
  opacity: 0.68;
}

.girl-card[data-paused="true"]:hover,
.girl-card[data-paused="true"]:focus-visible {
  opacity: 0.86;
}

.girl-card[data-paused="true"] .card-status {
  color: var(--dim);
}

.girl-card[data-paused="true"] .portrait img {
  filter: saturate(0.6) brightness(0.8) contrast(1.04) sepia(0.08);
}

.pill {
  display: inline-block;
  margin: 0 var(--space-1) var(--space-1) 0;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 2px var(--space-2);
  font-size: 11px;
  color: var(--muted);
}

.note-err,
.note-empty {
  border-radius: 12px;
  padding: 10px var(--space-3);
  font-size: 13px;
}

.note-err {
  border: 1px solid rgb(217 105 138 / 0.35);
  background: rgb(217 105 138 / 0.08);
  color: var(--note-err-fg);
}

.sk {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--shimmer);
  animation: stage-sk 1.4s ease-in-out infinite;
}

.sk-line {
  height: 4.5rem;
  aspect-ratio: auto;
}

@keyframes stage-sk {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk {
    animation: none;
  }
}


/* --- 可約列表：手機 1 欄、平板 2 欄、桌機 3 欄，卡片固定 3:4 --- */
.girl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-card-y) var(--gap-card-x);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .girl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-card-y-md) var(--gap-card-x-md);
  }
}


@media (min-width: 1024px) {
  .girl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-card-y-lg) var(--gap-card-x-lg);
  }
}


/*
 * 時間語域過渡：白天 ↔ 深夜只換變數值，顏色類屬性走 1.2s；位移／透明度動效不動。
 * html.is-temp-shift 只在切換後 1.3s 內存在（由 useNightMode 的掛載層加減），
 * 不在狀態裡常駐，才不會把 hover 的 0.24s 全部拖慢。
 */
html,
body {
  transition:
    background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    color 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html.is-temp-shift *,
html.is-temp-shift *::before,
html.is-temp-shift *::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  html.is-temp-shift *,
  html.is-temp-shift *::before,
  html.is-temp-shift *::after {
    transition-duration: 1ms;
  }
}


.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--card-strong-bg);
  color: var(--fg);
  font-size: 13.5px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
}

@media (min-width: 1024px) {
  .toast {
    bottom: 32px;
  }
}


/* 沒有封面照：深色底＋名字／會館的安靜佔位，不出現白框或破圖 */
.portrait-empty::after {
  opacity: 0.4;
}

.portrait-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-5);
  text-align: center;
  background:
    radial-gradient(ellipse 72% 60% at 50% 34%, rgb(229 181 143 / 0.09), transparent 70%),
    var(--detail-bg);
}

.portrait-fallback-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: var(--tracking-hero);
  text-indent: 0.2em;
  color: rgba(247, 235, 230, 0.52);
}

.portrait-fallback-venue {
  font-size: 10.5px;
  letter-spacing: var(--tracking-hero);
  text-indent: 0.2em;
  color: var(--dim);
}

/* --- 少量女孩（< 4）：第一張 featured，其餘照原比例 --- */
.girl-grid[data-layout="few"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px var(--space-4);
}

.girl-grid[data-layout="few"] > li {
  flex: 1 0 100%;
}

/* 與一般卡片同框，滿寬時仍是照片主導 */
.girl-card-featured .portrait {
  aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
  .girl-grid[data-layout="few"] > li:not(.is-featured) {
    flex: 0 1 clamp(220px, 32%, 340px);
  }

  .girl-card-featured .portrait {
    flex: none;
    width: min(46%, 420px);
  }
}


/* --- 女孩專區 /my：暗色玫瑰金、手機優先 --- */
.my-page {
  max-width: 960px;
  margin-inline: auto;
}

.my-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.my-eyebrow {
  font-size: 0.68rem;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--dim);
  text-transform: uppercase;
}

.my-title {
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--fg);
}

.my-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.my-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.my-badge--published,
.my-badge--review-approved {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: var(--gold-soft);
}

.my-badge--review-pending {
  border-color: var(--line-strong);
  color: var(--fg);
}

.my-badge--review-rejected {
  border-color: rgb(217 105 138 / 0.5);
  color: var(--rose);
}

.my-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.my-tabs::-webkit-scrollbar {
  display: none;
}

.my-tab {
  flex: 1 0 auto;
  min-height: 44px;
  padding: 0 var(--gap-card-x);
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.my-tab.is-on {
  background: var(--surface-2);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}

.my-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.my-card {
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .my-card {
    padding: var(--space-5);
  }
}


.my-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 10px;
}

.my-flag {
  font-size: 0.7rem;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 2px 9px;
}

.my-flag.is-live {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: var(--gold-soft);
}

.my-preview {
  display: grid;
  gap: var(--gap-card-x);
}

.my-preview-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

@media (min-width: 768px) {
  .my-preview {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .my-preview .my-cover {
    max-height: none;
  }

  .my-preview .my-nickname {
    margin-top: 0;
  }
}


.my-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 320px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.my-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-cover-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 160px;
  color: var(--dim);
  font-size: 0.85rem;
}

.my-nickname {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--fg);
}

.my-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.my-field-label {
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.06em;
}

.my-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}

.my-save {
  width: 100%;
  min-height: 48px;
}

@media (min-width: 640px) {
  .my-save {
    width: auto;
    min-width: 180px;
  }
}


.my-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 18px;
}

.my-orders {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .my-orders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.my-order {
  padding: var(--gap-card-x);
}

.my-order-action {
  margin-top: 10px;
  width: 100%;
}

@media (min-width: 480px) {
  .my-order-action {
    width: auto;
  }
}


.my-confirm {
  margin-top: 10px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-review-note {
  padding: 10px var(--space-3);
  border: 1px dashed var(--gold-dim);
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.85rem;
}

.my-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.my-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  max-width: 460px;
  min-height: 112px;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: center;
  cursor: pointer;
}

.my-upload:hover,
.my-upload:focus-visible {
  border-color: var(--gold-dim);
  background: var(--gold-soft);
  outline: none;
}

.my-upload-plus {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
}

.my-upload-title {
  font-size: 0.95rem;
}

.my-upload-hint {
  font-size: var(--fs-label);
  color: var(--dim);
}

.my-upload--picked {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: 0;
  padding: 10px;
  border-style: solid;
  text-align: left;
}

.my-upload--picked img {
  width: 56px;
  height: 74px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
}

.my-upload-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.my-upload-meta strong {
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-upload-meta span {
  font-size: 0.72rem;
  color: var(--dim);
}

.my-upload--picked .btn-quiet {
  flex: none;
}

.my-quota {
  font-size: var(--fs-label);
  color: var(--dim);
}

.my-quota-left {
  margin-left: var(--space-1);
  color: var(--gold);
}

.my-quota.is-out,
.my-quota.is-out .my-quota-left {
  color: var(--note-err-fg);
}

.my-hint {
  font-size: var(--fs-label);
  color: var(--dim);
}

.my-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .my-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


.my-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.my-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-photo-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px var(--space-2);
  border-radius: var(--control-radius);
  background: rgb(18 7 12 / 0.78);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-size: 0.7rem;
}

.my-photo-tag.is-done {
  border-color: var(--line-strong);
  color: var(--fg);
}

.my-photo--candidate {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
}

.my-photo--candidate img {
  aspect-ratio: 3 / 4;
}

.my-photo-actions {
  display: flex;
  gap: 6px;
  padding: var(--space-2);
}

.my-photo-actions .btn-hair {
  flex: 1;
}

.my-discard {
  min-height: 40px;
  padding: 0 var(--space-2);
  font-size: 0.8rem;
  color: var(--muted);
}


/* --- 首屏 ------------------------------------------------------------- */
/* 舊 .hero 是 54vh 香檳影片；這裡整個換成照片主導的舞台，故一併覆寫高度。 */
.hero.hero--stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: auto;
  min-height: min(660px, calc(100vh - 72px));
  min-height: min(660px, calc(100svh - 72px));
  max-height: none;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) 0;
  padding: 0;
  overflow: hidden;
  border-bottom: var(--hairline) solid var(--line);
  background:
    radial-gradient(120% 58% at 80% 0%, #2b121b 0%, rgb(18 7 12 / 0) 62%),
    var(--bg);
}

.hero-portraits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.5),
    0 18px 44px rgb(0 0 0 / 0.46);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}

/* 主圖：右上出血，只留左下圓角，像一張貼在版面上的相片 */
.hero-shot--lead {
  top: 0;
  right: -6%;
  width: 88%;
  height: 52%;
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 20px;
}

/* 副圖：左下錯位壓邊，斜一點點，做出層次而非第二張大圖 */
.hero-shot--trail {
  top: 29%;
  left: -8%;
  width: 42%;
  height: 23%;
  border-radius: 14px;
  transform: rotate(-2deg);
}

.hero-shot--empty {
  background:
    radial-gradient(80% 70% at 70% 20%, rgb(229 181 143 / 0.14), rgb(18 7 12 / 0) 70%),
    var(--surface);
}

/* 相片上緣的受光，不循環、不呼吸 */
.hero-shot-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 226 200 / 0.08) 0%, rgb(0 0 0 / 0) 42%);
}

/* 文字區的底：讓下半段回到近黑，字不會壓在照片細節上 */
.hero-stage-wash {
  position: absolute;
  inset: auto 0 0;
  height: 52%;
  background: linear-gradient(
    180deg,
    rgb(18 7 12 / 0) 0%,
    rgb(18 7 12 / 0.72) 46%,
    var(--bg) 82%
  );
}

.hero--stage .hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: auto;
  max-width: none;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: auto;
  padding: 0 var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
}

.hero--stage .hero-brand {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-indent: 0;
  color: var(--fg);
  text-shadow: 0 1px 18px rgb(0 0 0 / 0.6);
}

/* 兩級標題：金色的「今晚，」當引子，襯線大字才是主張 */
.hero--stage .hero-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  font-family: var(--serif);
}

.hero--stage .hero-title-lead {
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: var(--tracking-hero);
  color: var(--gold);
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.55);
}

.hero--stage .hero-title-main {
  font-size: var(--fs-display);
  font-weight: var(--serif-weight, 600);
  line-height: 1.22;
  letter-spacing: 0.015em;
  color: var(--fg);
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.5),
    0 2px 28px rgb(0 0 0 / 0.55);
}

.hero--stage .hero-sub {
  margin: var(--space-3) 0 0;
  max-width: 30ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: var(--tracking-tight);
  color: var(--muted);
  text-wrap: pretty;
}

.hero--stage .hero-sub strong {
  font-weight: 600;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* 主鍵：手機滿寬、拇指高度，落在畫面下緣 */
.hero-cta {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--control-radius);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
  color: var(--btn-primary-fg);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease-out,
    box-shadow var(--dur-fast) ease-out;
}

.hero-cta-arrow {
  font-size: 0.9rem;
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .hero-cta:hover {
    background: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
  }

  .hero-cta:hover .hero-cta-arrow {
    transform: translateY(2px);
  }
}


.hero-cta:active {
  transform: translateY(1px) scale(0.995);
  box-shadow: var(--btn-primary-shadow-press, 0 1px 2px rgb(0 0 0 / 0.45));
}

.hero-cta:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
}

.hero-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--dim);
  text-align: center;
}

/* 次級入口：邀請碼與客服。刻意做小，主鍵仍然只有一顆。 */
.hero-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 6px;
}

.hero-help-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 var(--space-1);
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.hero-help-link:hover,
.hero-help-link:focus-visible {
  color: var(--gold-hi);
  border-bottom-color: var(--gold-dim);
}

.hero-help-dot {
  color: var(--dim);
  font-size: 13px;
}

.hero-fine {
  margin: 2px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--dim);
}

/* 進場只演一次：不循環、不來回 */
@keyframes hero-rise {
  from {
    opacity: 0.001;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero--stage .hero-brand,
.hero--stage .hero-title-lead,
.hero--stage .hero-title-main,
.hero--stage .hero-sub,
.hero--stage .hero-actions,
.hero--stage .hero-help,
.hero--stage .hero-fine {
  animation: hero-rise 640ms var(--ease-out) both;
}

.hero--stage .hero-title-lead {
  animation-delay: 80ms;
}

.hero--stage .hero-title-main {
  animation-delay: 140ms;
}

.hero--stage .hero-sub {
  animation-delay: 220ms;
}

.hero--stage .hero-actions {
  animation-delay: 300ms;
}

/* --- 名單：手機＝可掃讀的橫式卡列 -------------------------------------- */
@media (max-width: 767px) {
  .girl-grid {
    gap: var(--space-3);
  }

  .girl-card {
    flex-direction: row;
    align-items: stretch;
    gap: var(--gap-card-x);
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(158deg, rgb(38 20 27 / 0.92) 0%, rgb(20 9 14 / 0.94) 100%);
    box-shadow: var(--card-shadow);
    transition:
      transform var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) ease-out,
      box-shadow var(--dur-fast) ease-out;
  }

  .girl-card .portrait {
    flex: none;
    width: 104px;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    box-shadow: none;
  }

  .girl-card .portrait img {
    transform: scale(1.04);
  }

  .girl-card .card-body {
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: 0;
    padding: 2px 2px 2px 0;
    min-width: 0;
  }

  .girl-card .cap-name {
    font-size: 1.08rem;
    letter-spacing: 0.05em;
  }

  .girl-card .cap-price {
    font-size: 0.86rem;
  }

  /* 一句話最多兩行；卡列高度才不會忽高忽低 */
  .girl-card .card-tagline {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .girl-card .card-chips {
    display: none;
  }

  .girl-card .card-foot {
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .girl-grid--sk .sk {
    height: 132px;
    aspect-ratio: auto;
    border-radius: 18px;
  }
}

/* 卡列高度一致：三行文字 + 底部狀態，不因內容長短跳動 */
.girl-card .card-body {
  gap: 6px;
}

.girl-card .card-foot {
  margin-top: auto;
}

.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: rgb(229 181 143 / 0.07);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.card-status[data-open="false"] {
  border-color: var(--line);
  background: transparent;
  color: var(--dim);
}

@media (hover: hover) {
  .girl-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--card-shadow-hover);
  }

  .girl-card:hover .portrait img {
    transform: scale(1.08);
  }
}


.girl-card:active {
  transform: scale(0.994);
}

.night-empty .btn-hair {
  margin-top: var(--space-4);
}

.night-empty-actions .btn-hair {
  margin-top: 0;
}

/* --- 桌機：左文右圖，圖仍是主角 --------------------------------------- */
@media (min-width: 768px) {
  .hero.hero--stage {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    min-height: min(600px, calc(100vh - 76px));
    min-height: min(600px, calc(100svh - 76px));
    max-height: 680px;
    margin-right: calc(-1 * var(--gutter-md));
    margin-left: calc(-1 * var(--gutter-md));
  }

  .hero--stage .hero-copy {
    justify-content: center;
    align-self: stretch;
    margin-top: 0;
    padding: 0 var(--space-2) 0 0;
  }

  .hero-portraits {
    position: relative;
    inset: auto;
    height: 100%;
  }

  /* 主圖貼齊右緣滿高，像一扇立起來的窗 */
  .hero-shot--lead {
    top: 0;
    right: 0;
    width: 62%;
    height: 100%;
    border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
  }

  .hero-shot--trail {
    top: auto;
    bottom: 9%;
    left: 2%;
    width: 27%;
    height: 40%;
    border-radius: 14px;
    transform: rotate(-2deg);
  }

  .hero-stage-wash {
    height: 100%;
    background: linear-gradient(
      90deg,
      var(--bg) 26%,
      rgb(18 7 12 / 0.82) 40%,
      rgb(18 7 12 / 0) 62%
    );
  }

  .hero--stage .hero-brand {
    font-size: 1.2rem;
  }

  .hero--stage .hero-title-lead {
    font-size: 1.2rem;
  }

  .hero--stage .hero-title-main {
    font-size: clamp(2.4rem, 3.2vw, 3.1rem);
  }

  .hero--stage .hero-sub {
    margin-top: var(--gap-card-x);
    font-size: var(--fs-cta);
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    margin-top: var(--gap-card-x-lg);
  }

  .hero-cta {
    min-width: 244px;
    padding: 0 var(--gap-card-x-lg);
  }

  .hero-note {
    text-align: left;
  }

  .night-head {
    margin: var(--space-8) 0 18px;
  }

  .night-title {
    font-size: 1.1rem;
  }

  .night-empty {
    padding: 44px var(--gap-card-y);
  }

  .girl-grid--sk .sk {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1024px) {
  .hero.hero--stage {
    margin-right: calc(-1 * var(--gutter-lg));
    margin-left: calc(-1 * var(--gutter-lg));
  }

  .hero--stage .hero-copy {
    padding-right: var(--space-7);
  }
}


/* 減少動效：不進場、不位移、不循環 */
@media (prefers-reduced-motion: reduce) {
  .hero--stage .hero-brand,
  .hero--stage .hero-title-lead,
  .hero--stage .hero-title-main,
  .hero--stage .hero-sub,
  .hero--stage .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-shot--trail {
    transform: none;
  }

  .hero-cta,
  .hero-cta-arrow,
  .girl-card,
  .girl-card .portrait img {
    transition: none;
  }

  .girl-card:active,
  .hero-cta:active {
    transform: none;
  }
}

/* ==========================================================================
   首頁視覺修正層（覆寫，不改上面既有規則）
   1) 首屏雙圖改吃格線：兩張同高、共用邊界、不出血、不旋轉、不負偏移
   3) 主鍵改成「深底 + 金漸層細邊 + 金字」，並縮成內容寬
   4) 導覽列：桌機列高 64、間距 24、字 14.5、hover 回饋；手機收成選單
   5) 斷行：標題與說明句都不再出現孤行
   ========================================================================== */

/* ---- 1. 首屏：格線雙圖 + 上下留白 ---- */
.hero.hero--stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "copy";
  align-content: start;
  min-height: 0;
  max-height: none;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--gutter)) 0;
  padding: 0;
  border-bottom: 0;
  overflow: visible;
  background: var(--bg);
}

.hero-portraits {
  grid-area: art;
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: 62fr 38fr;
  gap: 0;
  height: clamp(240px, 62vw, 360px);
  pointer-events: none;
}

.hero-shot {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  background: var(--surface-2);
}

.hero-shot--lead,
.hero-shot--trail {
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  height: 100%;
  border-radius: 0;
  transform: none;
}

.hero-shot--trail {
  border-left: 1px solid var(--line);
}

.hero-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-stage-wash {
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgb(18 7 12 / 0) 0%, rgb(18 7 12 / 0.34) 100%);
}

.hero--stage .hero-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  padding: 22px var(--gutter) 0;
  max-width: none;
}

.hero--stage .hero-eyebrow {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold-hi);
  text-wrap: pretty;
}

/* ---- 5. 標題與說明句的斷行 ---- */
/*
 * 標題刻意兩行：金色「今晚，」一行，白色主張一行。
 * 不能用 text-wrap: balance——它會按字數平均斷，把「最好的」切成「讓最／好的」。
 * 兩個 span 各佔一行，主句 nowrap；最窄 320 也放得下（8 字 × 32px = 256 < 288）。
 */
.hero--stage .hero-title {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.3rem);
  line-height: 1.24;
  letter-spacing: var(--tracking-tight);
  text-wrap: normal;
}

.hero--stage .hero-title-lead,
.hero--stage .hero-title-main {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.hero--stage .hero-title-main {
  white-space: nowrap;
}

.hero--stage .hero-title-lead {
  color: var(--gold);
}

.hero--stage .hero-title-main {
  color: var(--fg);
}

.hero--stage .hero-sub {
  max-width: 17em;
  margin: var(--space-3) 0 0;
  font-size: var(--fs-cta);
  line-height: 1.75;
  letter-spacing: var(--tracking-tight);
  color: var(--muted);
  text-wrap: pretty;
}

.hero--stage .hero-sub strong {
  color: var(--gold-hi);
}

.hero--stage .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---- 3. 主鍵：深底 + 金漸層細邊 + 金字，面積收斂 ---- */
.hero--stage .hero-cta {
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  min-height: 52px;
  padding: 0 22px;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background-color: var(--surface-2);
  background-image:
    linear-gradient(180deg, var(--surface-2), var(--surface)),
    linear-gradient(100deg, var(--gold-deep), var(--gold-hi) 52%, var(--gold-deep));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--gold-hi);
  font-size: var(--fs-cta);
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .hero--stage .hero-cta:hover {
    color: var(--gold-light);
    background-image:
      linear-gradient(180deg, var(--surface-2), var(--surface-2)),
      linear-gradient(100deg, var(--gold), var(--gold-light) 52%, var(--gold));
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.4),
      0 8px 22px rgb(169 122 78 / 0.28);
    transform: translateY(-1px);
  }
}


.hero--stage .hero-note {
  margin: 0;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-align: left;
}

/* 圖片與「今晚在班」之間的分明留白：手機 48、桌機 72 */
.home > .night-head {
  margin-top: 48px;
}

/* ---- 4. 導覽列 ---- */
.stage-hdr-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
  padding-block: var(--space-2);
}

.hdr-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  font-size: 1.15rem;
  text-decoration: none;
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-right: auto;
}

.hdr-account {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.stage-hdr .hdr-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .stage-hdr .hdr-link:hover {
    color: var(--gold-hi);
    border-bottom-color: var(--gold-dim);
  }
}


.stage-hdr .hdr-link--gold {
  color: var(--gold);
}

.stage-hdr .btn-quiet,
.stage-hdr .btn-compact {
  font-size: 15px;
  color: var(--muted);
}

.hdr-burger {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--gap-card-x);
  border: 1px solid transparent;
  border-radius: 12px;
  background-image:
    linear-gradient(180deg, var(--surface-2), var(--surface-2)),
    var(--hair-btn-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--fg);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
}

.hdr-burger-icon {
  font-size: 15px;
  line-height: 1;
  color: var(--gold-hi);
}

.hdr-menu {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.hdr-menu[hidden] {
  display: none;
}

.hdr-menu-list {
  display: flex;
  flex-direction: column;
  padding: 8px var(--gutter) 16px;
}

.hdr-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-1);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 15.5px;
  letter-spacing: 0.04em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hdr-menu-item--quiet {
  color: var(--dim);
}

.hdr-menu-sub {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

@media (max-width: 767px) {
  .stage-hdr-inner {
    gap: var(--space-3);
    padding-block: 6px;
  }

  .hdr-nav,
  .hdr-account {
    display: none;
  }

  .hdr-burger {
    display: inline-flex;
    margin-left: auto;
  }
}


@media (min-width: 768px) {
  .hdr-menu {
    display: none;
  }
}


/* ---- 桌機：雙圖在左、文字在右，兩欄都貼齊格線 ---- */
@media (min-width: 900px) {
  /* 雙圖與文字都在格線內：hero 不再負偏移，左右緣與卡片、區塊標頭同一條線 */
  .hero.hero--stage {
    grid-template-columns: 46fr 54fr;
    grid-template-areas: "art copy";
    align-items: stretch;
    margin-inline: 0;
  }

  .hero-portraits {
    height: 560px;
  }

  .hero--stage .hero-copy {
    justify-content: center;
    padding: 0 0 0 56px;
    max-width: 640px;
  }

  .hero--stage .hero-cta {
    padding: 0 var(--gap-card-x-lg);
  }

  .home > .night-head {
    margin-top: 72px;
  }
}

/* ── 女孩專區／骨架：分區、欄位提示、44px 觸控目標 ───────────── */
.my-card-head {
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
}

.my-card-head h2 {
  margin: 0;
}

.my-sec-sub {
  margin: 0.15rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.75;
}

.my-form {
  display: grid;
  gap: 1.05rem;
}

.my-field-label {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.my-req {
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  color: var(--gold);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.my-count {
  margin-left: auto;
  color: var(--dim);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.my-hint {
  margin: 0;
  color: var(--dim);
  font-size: 0.74rem;
  line-height: 1.7;
}

.my-save-hint {
  text-align: center;
}

.my-field.is-invalid .guest-input,
.my-field.is-invalid .my-upload {
  border-color: rgb(226 138 118 / 0.62);
  box-shadow: 0 0 0 1px rgb(226 138 118 / 0.18);
}

.field-err {
  display: block;
  margin-top: 0.15rem;
  color: #f2a894;
  font-size: 0.76rem;
  line-height: 1.65;
}

.my-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.my-generation {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 0 1rem;
  border-top: 1px solid var(--line);
}

/* 觸控目標一律 44px 起跳 */
.my-field .chip,
.my-photo-actions .btn-compact,
.my-photo-actions .my-discard,
.my-upload--picked .btn-quiet,
.my-order-action,
.my-save,
.my-form .btn-quiet {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 骨架 */
.sk-line--sm {
  height: 0.7rem;
  width: 5.5rem;
  border-radius: var(--control-radius);
}

.sk-line--lg {
  height: 1.6rem;
  width: 9.5rem;
  border-radius: 8px;
}

.sk-tab {
  display: block;
  width: 5.5rem;
  height: 44px;
  aspect-ratio: auto;
  border-radius: var(--control-radius);
}

.my-tabs--ghost {
  display: flex;
  gap: 0.5rem;
}

.sk-card {
  height: clamp(12rem, 38vh, 16rem);
  aspect-ratio: auto;
  border-radius: 18px;
}

.sk-card--short {
  height: 6rem;
}

.my-loading {
  display: grid;
  gap: 1rem;
}

.my-loading-head {
  display: grid;
  gap: 0.5rem;
}

.orders-skel {
  display: grid;
  gap: 0.85rem;
  padding: 0.5rem 0 1rem;
}

.sk-order-row {
  height: 6.6rem;
  aspect-ratio: auto;
  border-radius: 14px;
}

/* 桌機：對外預覽與編輯表單並排，避免單欄長條與大片留白 */
.my-profile-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .my-profile-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 1.25rem;
  }
}