/* Layout: an app-style column (max 760px) floating over the diffused aura; glass tiles, glass list rows and a floating pill tab bar. */
:root {
  --lavender: #9698E7;
  --blush: #EEC1DD;
  --mist: #D1D0EF;
  --milk: #FCF8F8;
  --glow: #F4CB92;
  --ink: #362F52;
  --ink-soft: #625A80;
  --line: rgba(54, 47, 82, .14);
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(252, 248, 248, .78);
  --glass-edge: rgba(255, 255, 255, .8);
  --button: #4A3F78;
  --button-ink: #FCF8F8;
  --tint: rgba(74, 63, 120, .1);

  --display: "LXGW WenKai TC", "Noto Serif TC", "Kaiti TC", "DFKai-SB", serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --latin: "Cormorant Garamond", "Times New Roman", serif;

  --step--2: .75rem;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.8rem, 6vw, 2.4rem);

  --r-lg: 26px;
  --r-md: 20px;
  --r-sm: 14px;
  --shadow: 0 18px 40px -26px rgba(74, 63, 120, .55);

  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.75;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; }

/* ---------- atmosphere ---------- */
.aura {
  position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40vmax 34vmax at 22% 30%, var(--lavender) 0%, transparent 70%),
    radial-gradient(38vmax 32vmax at 78% 22%, var(--blush) 0%, transparent 70%),
    radial-gradient(46vmax 40vmax at 60% 78%, var(--mist) 0%, transparent 72%),
    radial-gradient(22vmax 20vmax at 30% 85%, var(--glow) 0%, transparent 70%),
    var(--milk);
  filter: blur(30px) saturate(1.05);
  opacity: .85;
  animation: drift 38s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) rotate(6deg) scale(1.04); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) rotate(-4deg) scale(1.02); }
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .18; 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='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
#holoA { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.holoB {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%;
  background: conic-gradient(from var(--a, 0deg), #ffd3ef, #c7f1ff, #d6ffe8, #fff2c2, #e3d3ff, #ffd3ef);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 30%, transparent 62%);
          mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 30%, transparent 62%);
  filter: blur(22px); opacity: .62;
  transform: translate3d(var(--x, 50vw), var(--y, 40vh), 0);
}

/* ---------- app shell ---------- */
.app {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 1rem calc(120px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 2.4rem;
}

.appbar { display: grid; gap: .5rem; padding-top: .6rem; }
.appbar .back {
  display: inline-flex; align-items: center; gap: .2rem; width: fit-content;
  color: var(--ink-soft); text-decoration: none; font-size: var(--step--1);
  min-height: 36px;
}
.appbar .back svg { width: 18px; height: 18px; }
.appbar .back:hover { color: var(--button); }
.appbar h1 { font-size: var(--step-3); line-height: 1.3; letter-spacing: .08em; }
.appbar .sub { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.8; max-width: 34em; }
.appbar .sub .sent { display: inline-block; } /* 整句一起換行 */
.appbar.centered { justify-items: center; text-align: center; }
.appbar .brand { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.appbar .brand .en { font-family: var(--latin); font-size: var(--step-2); letter-spacing: .3em; color: var(--ink-soft); }

.block { display: grid; gap: 1rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.block-head h2 { font-size: var(--step-1); letter-spacing: .08em; }
.block-head a { font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; }
.block-head a:hover { color: var(--button); }

/* ---------- glass surfaces ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* ---------- featured panel ---------- */
.feature { display: grid; justify-items: center; text-align: center; gap: 1.1rem; padding: 2rem 1.4rem 1.6rem; }
.feature h2 { font-size: var(--step-2); letter-spacing: .12em; line-height: 1.5; }
.feature p { color: var(--ink-soft); font-size: var(--step--1); max-width: 26em; }
.orb {
  width: 132px; aspect-ratio: 1; max-width: 100%; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 70% 75%, rgba(150,152,231,.55), transparent 55%),
    conic-gradient(from var(--spin, 0deg), #e9d6ff, #ffd9ef, #d4f3ff, #e0ffef, #fff1cf, #e9d6ff);
  box-shadow: inset -10px -14px 30px rgba(74, 63, 120, .22), inset 8px 10px 24px rgba(255,255,255,.7), 0 30px 50px -24px rgba(74, 63, 120, .55);
  animation: float 7s ease-in-out infinite;
}
.orb svg { position: absolute; inset: 22%; width: 56%; height: 56%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding: .6rem 1.4rem; border-radius: 999px;
  font-size: var(--step--1); letter-spacing: .12em; text-decoration: none; cursor: pointer;
  border: 1px solid var(--button); transition: background .25s, color .25s;
}
.btn-primary { background: var(--button); color: var(--button-ink); }
.btn-primary:hover { background: #3a3163; }
.btn-ghost { background: rgba(252, 248, 248, .5); color: var(--button); }
.btn-ghost:hover { background: rgba(252, 248, 248, .9); }

/* ---------- art (generated thumbnails) ---------- */
.art { position: relative; overflow: hidden; display: grid; place-items: center; }
.art svg { width: 58%; height: 58%; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 45%);
}
.g1 { background: radial-gradient(circle at 70% 80%, var(--blush), transparent 60%), linear-gradient(160deg, #a7a8ee, #cfc3f3); }
.g2 { background: radial-gradient(circle at 25% 75%, var(--glow), transparent 55%), linear-gradient(160deg, #bfb4f1, #f0c9e2); }
.g3 { background: radial-gradient(circle at 75% 25%, #ffffff, transparent 45%), linear-gradient(160deg, #8f91e2, #c9c7f0); }
.g4 { background: radial-gradient(circle at 30% 80%, #c9f0ff, transparent 55%), linear-gradient(160deg, #d7c8f6, #eec1dd); }
.g5 { background: radial-gradient(circle at 70% 70%, var(--glow), transparent 55%), linear-gradient(160deg, #e9c4e0, #b9b6ee); }
.g6 { background: radial-gradient(circle at 30% 30%, #e3fff1, transparent 55%), linear-gradient(160deg, #a5a6ec, #e1c7ef); }

/* ---------- tiles grid ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: grid; gap: .5rem; padding: 6px 6px .7rem; text-decoration: none; color: var(--ink);
  border-radius: var(--r-md); transition: transform .25s;
}
.tile .art { aspect-ratio: 1; border-radius: 16px; max-width: 100%; }
.tile .label { text-align: center; font-size: var(--step--1); line-height: 1.45; letter-spacing: .04em; }
.tile:hover { transform: translateY(-2px); }
@media (max-width: 360px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- segmented control & chips ---------- */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge);
}
.seg button {
  border: 0; border-radius: 999px; padding: .55rem .8rem; background: transparent; cursor: pointer;
  font-size: var(--step--1); letter-spacing: .06em; color: var(--ink-soft); min-height: 40px;
}
.seg button[aria-selected="true"] { background: var(--button); color: var(--button-ink); }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--line); background: var(--glass); border-radius: 999px;
  padding: .4rem 1rem; font-size: var(--step--1); color: var(--ink); cursor: pointer; min-height: 38px;
}
.chip[aria-pressed="true"] { background: var(--tint); border-color: var(--button); color: var(--button); }

/* ---------- list rows ---------- */
.rows { display: grid; gap: 10px; }
.row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: var(--r-md); text-decoration: none; color: var(--ink);
}
.row .art { width: 64px; height: 64px; border-radius: 14px; }
.row .text { display: grid; gap: .1rem; min-width: 0; }
.row h3 { font-size: var(--step-0); letter-spacing: .06em; line-height: 1.5; font-weight: 600; }
.row .en { font-family: var(--latin); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.3; }
.row .desc { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
.row .meta { font-size: var(--step--2); color: var(--ink-soft); letter-spacing: .06em; }
.go {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--button); color: var(--button-ink); flex: none;
}
.go svg { width: 18px; height: 18px; }
a.row:hover .go { background: #3a3163; }

/* ---------- notice ---------- */
.notice { padding: 1.2rem 1.3rem; display: grid; gap: .5rem; font-size: var(--step--1); color: var(--ink-soft); }
.notice h2 { font-size: var(--step-0); color: var(--ink); letter-spacing: .08em; }
.notice ul { margin: 0; padding-left: 1.2em; display: grid; gap: .2rem; }

/* ---------- price table ---------- */
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.prices th, .prices td { text-align: left; padding: .7rem .2rem; border-bottom: 1px solid var(--line); font-weight: 400; }
.prices tr:last-child td { border-bottom: 0; }
.prices th { color: var(--ink-soft); font-size: var(--step--2); letter-spacing: .08em; }
.prices td:not(:first-child), .prices th:not(:first-child) { text-align: right; }
.panel { display: grid; gap: 1.2rem; }
.panel .card-block { padding: 1.2rem 1.3rem; display: grid; gap: .8rem; }
.panel .card-block h2 { font-size: var(--step-1); letter-spacing: .08em; }
.panel .en { font-family: var(--latin); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.3; }
.topics { display: flex; flex-wrap: wrap; gap: .5rem; }
.topics span { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .8rem; font-size: var(--step--1); background: rgba(255,255,255,.35); }
.facts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- profile ---------- */
.profile { display: grid; justify-items: center; text-align: center; gap: .9rem; padding: 2rem 1.4rem; }
.avatar {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 2.4rem; color: var(--ink);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 10%, rgba(255,255,255,0) 34%),
    conic-gradient(from var(--spin, 0deg), #e9d6ff, #ffd9ef, #d4f3ff, #e0ffef, #fff1cf, #e9d6ff);
  box-shadow: inset -8px -10px 24px rgba(74, 63, 120, .2), 0 24px 40px -22px rgba(74, 63, 120, .6);
}
.profile h1 { font-size: var(--step-2); letter-spacing: .14em; }
.profile p { color: var(--ink-soft); font-size: var(--step--1); max-width: 28em; }

/* ---------- oracle card ---------- */
.deck { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.card { position: relative; width: min(100%, 320px); aspect-ratio: 5 / 7; max-width: 100%; perspective: 1400px; cursor: pointer; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 30px 60px -30px rgba(74, 63, 120, .45);
  display: grid; place-items: center; text-align: center; padding: 2rem 1.6rem;
}
.face-front {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .85), transparent 45%),
    conic-gradient(from var(--spin, 0deg) at 50% 55%, #e9d6ff, #ffd9ef, #d4f3ff, #e0ffef, #fff1cf, #e9d6ff);
}
.face-front .sigil { width: 58%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(54, 47, 82, .35); display: grid; place-items: center; position: relative; }
.face-front .sigil::before, .face-front .sigil::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(54, 47, 82, .25); }
.face-front .sigil::after { inset: 30%; }
.face-front .label { font-family: var(--display); font-size: var(--step-2); letter-spacing: .3em; padding-left: .3em; position: relative; z-index: 1; }
.face-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .9), transparent 55%),
    linear-gradient(160deg, #F6F1FB 0%, #FBF3F7 50%, #F2F2FB 100%);
  align-content: center; gap: 1.2rem;
}
.face-back h3 { font-size: var(--step-2); letter-spacing: .12em; }
.face-back p { font-size: var(--step-0); line-height: 1.9; }
.face-back .count { font-family: var(--latin); font-size: var(--step--1); color: var(--ink-soft); letter-spacing: .1em; }
/* iPhone Safari 翻牌時背面會透出正面文字：翻到一半再隱藏看不到的那一面 */
.face-front { visibility: visible; transition: visibility 0s linear .45s; }
.face-back { visibility: hidden; transition: visibility 0s linear .45s; }
.card.flipped .face-front { visibility: hidden; }
.card.flipped .face-back { visibility: visible; }
.deck-hint { font-size: var(--step--1); color: var(--ink-soft); }
/* ---------- 愛我（/love）---------- */
/* 翻開的卡片：白色紙張紋理（跟收據同一張），印章當淡淡的水印放在下方中央 */
.love-deck .face-back { gap: 1rem; padding: 2rem 1.6rem 30%; background: #fff url(/assets/receipt-paper.jpg) center / cover; }
.love-deck .face-front { background: #fff url(/assets/receipt-paper.jpg) center / cover; } /* 卡片背面也用白紙紋理 */
.love-seal { width: 68%; height: auto; filter: drop-shadow(0 14px 22px rgba(74, 40, 110, .32)); pointer-events: none; }
/* 直書：由右往左，每個逗號換一行 */
.love-text { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 2.1; letter-spacing: .16em; color: var(--ink); writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; margin: 0; width: max-content; height: max-content; justify-self: center; align-self: center; }
.love-sign { font-size: var(--step--2); letter-spacing: .25em; color: var(--ink-soft); }
.love-stamp { position: absolute; left: 50%; bottom: 6%; width: 22%; transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(74, 40, 110, .28)); pointer-events: none; }
.love-acts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.love-acts [hidden] { display: none; }
.love-acts .btn[disabled] { opacity: .55; }
.love-sheet { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(40, 32, 74, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.love-sheet[hidden] { display: none; }
.love-sheet-panel { display: grid; justify-items: center; gap: .9rem; width: min(100%, 380px); max-height: 100%; padding: 1.2rem; border-radius: 22px; background: var(--milk, #FCF8F8); }
.love-img { width: auto; max-width: 100%; max-height: 62vh; aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: var(--shadow); -webkit-touch-callout: default; }
.love-tip { font-size: var(--step--1); color: var(--ink-soft); text-align: center; line-height: 1.8; }

/* ---------- footer ---------- */
.foot { display: grid; gap: .8rem; font-size: var(--step--2); color: var(--ink-soft); text-align: center; }
.foot .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; font-size: var(--step--1); }
.foot .links a { color: var(--button); text-underline-offset: 4px; }
.foot p { max-width: 40em; margin-inline: auto; line-height: 1.7; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px;
  border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 40px -18px rgba(54, 47, 82, .5);
}
.tabbar a {
  display: grid; justify-items: center; gap: 1px; padding: .45rem .2rem .35rem; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; line-height: 1.3;
}
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { background: var(--tint); color: var(--button); }
.tabbar a:hover { color: var(--button); }

@media (min-width: 761px) {
  .app { gap: 3rem; padding-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .aura, .orb { animation: none; }
  .card-inner { transition: none; }
  .face-front, .face-back { transition: none; }
  .tile { transition: none; }
}

/* ---------- shop ---------- */
.tiles.shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile.product { padding: 8px 8px 1rem; gap: .35rem; }
.tile.product .label { font-weight: 600; font-size: var(--step-0); margin-top: .3rem; }
.tile.product .price { text-align: center; font-variant-numeric: tabular-nums; color: var(--button); font-size: var(--step--1); letter-spacing: .06em; }
.tile.product .pdesc { text-align: center; color: var(--ink-soft); font-size: var(--step--2); line-height: 1.6; padding-inline: .3rem; }
.tile.product.sold-out { opacity: .6; }
.tile.product.sold-out .price { color: var(--ink-soft); }
@media (min-width: 640px) { .tiles.shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 資歷：純文字清單（不可點，所以不用卡片） ---------- */
.creds { display: grid; gap: 1.6rem; }
.cred-group { display: grid; gap: .4rem; }
.cred-group h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  font-size: var(--step--1); color: var(--ink-soft); letter-spacing: .1em; font-family: var(--body); font-weight: 500;
}
.cred-group h3 .en { font-family: var(--latin); font-size: var(--step--1); letter-spacing: .04em; }
.cred-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cred-list li { display: grid; gap: .05rem; padding: .75rem 0 .75rem 1.1rem; border-bottom: 1px solid var(--line); position: relative; }
.cred-list li::before {
  content: ""; position: absolute; left: 0; top: 1.35rem; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lavender); box-shadow: 0 0 8px var(--lavender);
}
.cred-list .zh { font-family: var(--display); font-size: var(--step-0); letter-spacing: .04em; line-height: 1.6; }
.cred-list .en { font-family: var(--latin); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.4; }

/* ---------- 首頁抽牌 ---------- */
.hint-text { color: var(--ink-soft); font-size: var(--step--1); margin-top: -.4rem; }
/* 只給讀螢幕軟體看的元素；用 !important 免得被 .field input 的寬度蓋掉、把頁面撐出橫向捲動 */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 只有 3 張牌，限制寬度避免在電腦上撐得太大 */
.spread { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 540px; margin-inline: auto; width: 100%; }
.mini-card {
  position: relative; aspect-ratio: 5 / 7; max-width: 100%; padding: 0; border: 0; background: transparent;
  perspective: 900px; cursor: pointer; border-radius: 16px;
  transition: transform .35s ease, opacity .45s ease;
}
.mini-card:hover:not(:disabled) { transform: translateY(-4px); }
.mini-card:disabled { cursor: default; }
.mini-card.dim { opacity: .32; transform: scale(.95); }
.mini-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.mini-card.flipped .mini-inner { transform: rotateY(180deg); }
.mini-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 18px 34px -22px rgba(74, 63, 120, .55);
}
.mini-front {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .8), transparent 45%),
    conic-gradient(from var(--spin, 0deg) at 50% 55%, #e9d6ff, #ffd9ef, #d4f3ff, #e0ffef, #fff1cf, #e9d6ff);
}
.mini-sigil { width: 56%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(54, 47, 82, .3); position: relative; }
.mini-sigil::before, .mini-sigil::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(54, 47, 82, .22); inset: 18%; }
.mini-sigil::after { inset: 38%; background: rgba(255, 255, 255, .7); border-color: transparent; box-shadow: 0 0 12px #fff; }
.mini-back {
  transform: rotateY(180deg); padding: .6rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .9), transparent 55%),
    linear-gradient(160deg, #F6F1FB 0%, #FBF3F7 50%, #F2F2FB 100%);
}
.mini-title { font-family: var(--display); font-size: clamp(.9rem, 3.6vw, 1.15rem); letter-spacing: .12em; line-height: 1.5; color: var(--ink); text-align: center; }
/* iPhone：翻到一半再隱藏背對的那一面 */
.mini-front { visibility: visible; transition: visibility 0s linear .4s; }
.mini-back { visibility: hidden; transition: visibility 0s linear .4s; }
.mini-card.flipped .mini-front { visibility: hidden; }
.mini-card.flipped .mini-back { visibility: visible; }
.mini-card:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; }

.spread.shuffling .mini-card { animation: shuffle .7s ease; }
.spread.shuffling .mini-card:nth-child(odd) { animation-direction: reverse; }
@keyframes shuffle {
  0%, 100% { transform: none; }
  30% { transform: translateX(10px) rotate(4deg); }
  60% { transform: translateX(-8px) rotate(-3deg); }
}

.reading { padding: 1.4rem 1.3rem; display: grid; gap: .8rem; text-align: center; justify-items: center; }
.reading h3 { font-size: var(--step-2); letter-spacing: .12em; }
.reading p { max-width: 28em; line-height: 1.9; }

@media (prefers-reduced-motion: reduce) {
  .mini-card, .mini-inner, .mini-front, .mini-back { transition: none; }
  .spread.shuffling .mini-card { animation: none; }
}

/* ---------- 預約頁 ---------- */
.booking { display: grid; gap: 1.2rem; }
.step { padding: 1.3rem 1.2rem 1.4rem; display: grid; gap: 1rem; border: 0; margin: 0; }
.step h2 { display: flex; align-items: center; gap: .7rem; font-size: var(--step-1); letter-spacing: .08em; }
/* 預約頁：提醒一次只能預約一個項目 */
.one-note { display: block; margin: -.2rem 0 0; padding: .7rem .95rem; border-radius: var(--r-sm); background: var(--tint); color: var(--ink); font-size: var(--step--1); line-height: 1.7; }
/* 商品照片縮圖：照片完整顯示在漸層底色上（直式聖照也不會被切掉） */
.art.has-photo { position: relative; overflow: hidden; }
.art.has-photo img { position: absolute; inset: 7%; width: 86%; height: 86%; margin: 0; padding: 0; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(54, 47, 82, .28)); }
/* 聖照選物：尺寸分區標題（橫跨整排） */
.shop-size { grid-column: 1 / -1; font-size: var(--step-0); letter-spacing: .1em; color: var(--ink); margin: .8rem 0 -.2rem; display: flex; align-items: center; gap: .8rem; }
.shop-size:first-child { margin-top: 0; }
.shop-size::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* 療癒項目照片：縮圖填滿；介紹視窗裡顯示完整大圖 */
.art.has-photo.photo-cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.detail-photo { margin: 0 0 1rem; }
.detail-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.one-note > span { color: var(--button); margin-right: .45rem; }
.one-note strong { color: var(--button); font-weight: 600; background: linear-gradient(transparent 58%, rgba(238, 193, 221, .85) 58%); padding: 0 .15em; }
.step .num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--button); color: var(--button-ink); font-family: var(--latin); font-size: 1.05rem; letter-spacing: 0;
}
.muted { color: var(--ink-soft); font-size: var(--step--1); }

.choices { display: grid; gap: 8px; }
.choice {
  display: grid; grid-template-columns: auto 48px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 8px 12px 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .45); cursor: pointer;
}
.choice input { width: 18px; height: 18px; accent-color: var(--button); margin: 0; }
.choice .art { width: 48px; height: 48px; border-radius: 12px; }
.choice .text { display: grid; min-width: 0; }
.choice strong { font-weight: 600; letter-spacing: .04em; }
.choice .meta { font-size: var(--step--2); color: var(--ink-soft); }
.choice:has(input:checked) { border-color: var(--button); background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px var(--button) inset; }

.date-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.date-chips::-webkit-scrollbar { display: none; }
.date-chip {
  flex: none; display: grid; justify-items: center; gap: 0; min-width: 64px; padding: .5rem .7rem;
  border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); cursor: pointer; color: var(--ink);
}
.date-chip .d { font-family: var(--latin); font-size: var(--step-1); line-height: 1.2; font-variant-numeric: tabular-nums; }
.date-chip .w { font-size: var(--step--2); color: var(--ink-soft); }
.date-chip[aria-selected="true"] { background: var(--button); color: var(--button-ink); border-color: var(--button); }
.date-chip[aria-selected="true"] .w { color: var(--button-ink); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.time {
  min-height: 46px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums; cursor: pointer; color: var(--ink); font-size: var(--step-0);
}
.time[aria-checked="true"] { background: var(--button); color: var(--button-ink); border-color: var(--button); }

fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: .35rem; }
.pills-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills-choice label { position: relative; cursor: pointer; }
.pills-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pills-choice span {
  display: inline-flex; align-items: center; min-height: 40px; padding: .35rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .55); color: var(--ink); font-size: var(--step--1);
}
.pills-choice input:checked + span { background: var(--tint); border-color: var(--button); color: var(--button); }
.pills-choice input:focus-visible + span { outline: 2px solid var(--button); outline-offset: 2px; }
.other { margin-top: .6rem; }
.extra { padding: 1rem; border-radius: var(--r-md); background: var(--tint); display: grid; gap: .8rem; }
.extra-title { font-weight: 600; color: var(--ink); font-size: var(--step--1); letter-spacing: .06em; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.summary { margin: 0; display: grid; gap: 0; }
.summary > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary dt { color: var(--ink-soft); font-size: var(--step--1); }
.summary dd { margin: 0; }
.done .summary { padding: .6rem 1.2rem; }
.rules { font-size: var(--step--1); color: var(--ink-soft); display: grid; gap: .4rem; }
.rules strong { color: var(--ink); }
.rules ul { margin: 0; padding-left: 1.2em; display: grid; gap: .2rem; }
.agree { display: flex; align-items: center; gap: .6rem; cursor: pointer; min-height: 44px; }
.agree input { width: 20px; height: 20px; accent-color: var(--button); margin: 0; }

.done { display: grid; gap: 1.2rem; }
.done .ref { display: grid; gap: .1rem; font-size: var(--step--1); color: var(--ink-soft); }
.done .ref strong { font-family: var(--latin); font-size: 1.8rem; letter-spacing: .18em; color: var(--ink); font-weight: 500; }
.pay { padding: 1.3rem 1.2rem; display: grid; gap: .8rem; }
.pay h2 { font-size: var(--step-1); letter-spacing: .08em; }
.pay .amount { font-family: var(--display); font-size: var(--step-2); color: var(--button); }
.pay-lines { margin: 0; display: grid; }
.pay-lines > div { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.pay-lines dt { color: var(--ink-soft); font-size: var(--step--1); }
.pay-lines dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mini-copy { border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: .2rem .8rem; font-size: var(--step--2); cursor: pointer; min-height: 32px; color: var(--button); }
.reported { padding: 1rem 1.2rem; font-size: var(--step--1); }
.keep { padding: 1.3rem 1.2rem; display: grid; gap: .7rem; font-size: var(--step--1); color: var(--ink-soft); }
.keep h2 { font-size: var(--step-1); color: var(--ink); letter-spacing: .08em; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input {
  flex: 1; min-width: 0; min-height: 44px; padding: .5rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .7); color: var(--ink); font: inherit; font-size: var(--step--1);
}
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: wait; }
.form-msg { font-size: var(--step--1); color: #9B2C4A; }
.form-msg:empty { display: none; }

/* ---------- 表單欄位（前台與後台共用） ---------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.field { display: grid; gap: .35rem; font-size: var(--step--1); color: var(--ink-soft); min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea, .other {
  width: 100%; min-height: 48px; padding: .6rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .7); color: var(--ink);
  font: inherit; font-size: var(--step-0);
}
.field textarea { line-height: 1.7; resize: vertical; }
/* iPhone／iPad 的 Safari：日期、時間、月份框預設照內容撐寬、文字置中，會跑出框外蓋到旁邊 */
input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block;
}
input::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
/* 下拉選單：iPhone／iPad 預設是灰色漸層的系統樣式，跟其他輸入框對不齊；統一成自己的箭頭 */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1.5l5 5 5-5%27 fill=%27none%27 stroke=%27%236B6491%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus, .other:focus { outline: 2px solid var(--button); outline-offset: 1px; border-color: transparent; }

/* ---------- 擺攤 ---------- */
.dot { width: 10px; height: 10px; border-radius: 50%; background: #E0567A; box-shadow: 0 0 0 0 rgba(224, 86, 122, .6); animation: pulse 1.8s ease-out infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 86, 122, .55); } 70% { box-shadow: 0 0 0 10px rgba(224, 86, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 86, 122, 0); } }

.market-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  border: 1px solid rgba(224, 86, 122, .35);
}
.mb-text { display: grid; min-width: 0; font-size: var(--step--1); line-height: 1.5; }
.mb-text strong { font-size: var(--step-0); letter-spacing: .06em; }
.mb-text span { color: var(--ink-soft); overflow-wrap: anywhere; }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 30; display: grid; align-items: end; justify-items: center;
  background: rgba(54, 47, 82, .28);
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.sheet { width: min(100%, 460px); padding: 1.8rem 1.4rem 1.4rem; display: grid; justify-items: center; gap: .9rem; text-align: center; background: var(--glass-strong); }
.sheet h2 { font-size: var(--step-2); letter-spacing: .12em; }
.sheet p { color: var(--ink-soft); font-size: var(--step--1); }
.orb.small { width: 84px; }
@media (min-width: 640px) { .sheet-backdrop { align-items: center; } }

.market { display: grid; gap: 1.2rem; }
.m-info { padding: 1.3rem 1.2rem; display: grid; gap: .3rem; }
.m-live { display: flex; align-items: center; gap: .55rem; color: #B23A5C; font-size: var(--step--1); letter-spacing: .12em; }
.m-info h2 { font-size: var(--step-2); letter-spacing: .08em; }
.m-sub { color: var(--ink-soft); font-size: var(--step--1); }
.m-note { margin-top: .4rem; font-size: var(--step--1); background: var(--tint); padding: .6rem .9rem; border-radius: var(--r-sm); }
.m-services { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; }
.m-services li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); }
.m-services li span { color: var(--button); font-variant-numeric: tabular-nums; white-space: nowrap; }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: .4rem; }
.board .cell { display: grid; justify-items: center; gap: .1rem; padding: 1rem .6rem; text-align: center; }
.board .cell + .cell { border-left: 1px solid var(--line); }
.board .cell.wide { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: .8rem; }
.board .label { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: .08em; }
.board strong { font-family: var(--latin); font-weight: 500; font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.board strong.small { font-family: var(--display); font-size: var(--step-1); }
.board .unit { font-size: var(--step--1); color: var(--ink-soft); }

.ticket { padding: 1.6rem 1.3rem; display: grid; justify-items: center; text-align: center; gap: .4rem; }
.ticket .label { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: .12em; }
.t-number { font-family: var(--latin); font-weight: 500; font-size: clamp(4rem, 22vw, 6rem); line-height: 1; color: var(--button); font-variant-numeric: tabular-nums; }
.t-name { color: var(--ink-soft); font-size: var(--step--1); }
.t-status { max-width: 26em; line-height: 1.8; }
.ticket.is-called { border: 2px solid #E0567A; animation: called 1.6s ease-in-out infinite; }
.ticket.is-called .t-status { font-weight: 600; color: #B23A5C; font-size: var(--step-1); }
@keyframes called { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 86, 122, .45); } 50% { box-shadow: 0 0 0 12px rgba(224, 86, 122, 0); } }
.take { padding: 1.3rem 1.2rem; display: grid; gap: 1rem; }
.take h2 { font-size: var(--step-1); letter-spacing: .08em; }

@media (prefers-reduced-motion: reduce) { .dot, .ticket.is-called { animation: none; } }

/* 價格即將公布、尚未開放預約的項目 */
.row.not-bookable { grid-template-columns: 64px minmax(0, 1fr); }
.row.not-bookable .art { opacity: .75; }
.choice.is-disabled { cursor: not-allowed; opacity: .55; }
.m-services .ms-name { display: grid; gap: .1rem; min-width: 0; }
.m-services .ms-name strong { font-weight: 500; color: var(--ink); }
.m-services .ms-name small { color: var(--ink-soft); font-size: var(--step--2); line-height: 1.5; }
.m-services .ms-desc { white-space: pre-line; overflow-wrap: anywhere; }
.m-shop { padding: 1.3rem 1.2rem; display: grid; gap: .8rem; }
.m-shop h2 { font-size: var(--step-1); letter-spacing: .08em; }
.m-shop .tile:hover { transform: none; } /* 只能看，不能點 */

/* ---------- 療癒項目詳細介紹彈窗 ---------- */
html.no-scroll, html.no-scroll body { overflow: hidden; }
.detail-backdrop { z-index: 40; }
.detail-sheet {
  position: relative; width: min(100%, 560px); max-height: min(88dvh, 820px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0;
  padding: 0; text-align: left; justify-items: stretch; overflow: hidden;
}
.detail-x {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(252, 248, 248, .7); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; z-index: 1;
}
.detail-x svg { width: 18px; height: 18px; }
.detail-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 1.3rem 3.6rem 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.detail-head .art { width: 64px; height: 64px; border-radius: 14px; }
.detail-title { display: grid; gap: .1rem; min-width: 0; }
.detail-title h2 { font-size: var(--step-1); letter-spacing: .08em; line-height: 1.4; }
.detail-title .en { font-family: var(--latin); color: var(--ink-soft); font-size: var(--step--1); }
.detail-title .meta { font-size: var(--step--2); color: var(--ink-soft); letter-spacing: .06em; }
.detail-body { overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.3rem 1.3rem; -webkit-overflow-scrolling: touch; }
.rich { display: grid; gap: .7rem; font-size: var(--step--1); line-height: 1.85; color: var(--ink); }
.rich p { margin: 0; color: var(--ink); font-size: inherit; }
.rich h3 { margin: .5rem 0 -.3rem; font-size: var(--step-0); letter-spacing: .06em; display: flex; align-items: baseline; gap: .5rem; }
.rich h3 .num { flex: none; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--tint); color: var(--button); font-size: var(--step--1); }
.rich ul { margin: 0; padding-left: 1.2em; display: grid; gap: .35rem; }
.rich li::marker { color: var(--button); }
.rich strong { font-weight: 600; }
.detail-foot { padding: .9rem 1.2rem 1.2rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; justify-items: center; text-align: center; background: rgba(252, 248, 248, .35); }
.detail-ask { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.detail-foot .actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.row.not-bookable { grid-template-columns: 64px minmax(0, 1fr) auto; }
.row.not-bookable .go { background: rgba(70, 60, 120, .35); }
.detail-backdrop { background: rgba(54, 47, 82, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.detail-sheet { background: rgba(251, 248, 251, .97); }

/* ---------- 線上簽到 ---------- */
.checkin { padding: 1.6rem 1.3rem; display: grid; gap: 1rem; }
.checkin .c-session { font-size: var(--step--1); color: var(--button); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.checkin h2 { font-family: var(--display); font-size: var(--step-2); letter-spacing: .1em; line-height: 1.4; }
.checkin .c-en { font-family: var(--latin); color: var(--ink-soft); margin-top: -.6rem; }
.checkin form { display: grid; gap: 1rem; }
.c-done { display: grid; justify-items: center; text-align: center; gap: .5rem; padding: .6rem 0; }
.c-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--button-ink); background: var(--button); box-shadow: 0 16px 30px -18px rgba(74, 63, 120, .8); }
.c-check svg { width: 32px; height: 32px; }
.c-done h3 { font-size: var(--step-1); letter-spacing: .08em; }

/* ---------- 工作坊頁：近期開課與報名 ---------- */
.ws-live { display: grid; gap: .8rem; }
.ws-live > h2 { font-size: var(--step-1); letter-spacing: .1em; }
.ws-live-list { display: grid; gap: 1rem; }
.ws-card { padding: 1.2rem 1.3rem; display: grid; gap: .5rem; }
.ws-card h3 { font-size: var(--step-1); letter-spacing: .08em; line-height: 1.45; }
.ws-card .en { font-family: var(--latin); color: var(--ink-soft); font-size: var(--step--1); margin-top: -.3rem; }
.ws-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.ws-when { font-size: var(--step--1); color: var(--button); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ws-state { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--2); letter-spacing: .08em; padding: .15rem .65rem; border-radius: 999px; border: 1px solid currentColor; }
.ws-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ws-state.is-open { color: #2F7A5B; }
.ws-state.is-full { color: #B23A5C; }
.ws-state.is-started, .ws-state.is-closed { color: var(--ink-soft); }
.ws-intro, .ws-where { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.75; }
.ws-price { font-weight: 500; font-variant-numeric: tabular-nums; }
.ws-sheet-head { grid-template-columns: minmax(0, 1fr); }
.ws-form { display: grid; gap: 1rem; }

/* 同一排的欄位對齊：每一格分成「說明文字／輸入框／提示」三層，三層各自對齊。
   上面的說明比較長、或下面多一行提示時，同一排的輸入框都還是在同一條線上 */
@supports (grid-template-rows: subgrid) {
  .field-grid > label.field { grid-row: span 3; grid-template-rows: subgrid; row-gap: .35rem; align-content: start; }
  .field-grid > label.field > span:first-child { align-self: end; }
}
.ws-fee { display: grid; gap: .4rem; }
.rich + .ws-fee, .ws-fee + .ws-fee { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ws-fee h3 { font-size: var(--step-0); letter-spacing: .08em; }
.ws-card.is-clickable { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .ws-card.is-clickable:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ws-card.is-clickable { transition: none; } .ws-card.is-clickable:hover { transform: none; } }
.ws-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .2rem; }
.ws-bottom .facts { flex: 1 1 14em; }
.ws-bottom .btn { margin-left: auto; }
.ws-bottom .btn:disabled { opacity: .6; cursor: not-allowed; }
.ws-title { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; color: inherit; }
.ws-title:focus-visible { outline: 2px solid var(--button); outline-offset: 3px; border-radius: 4px; }
.ws-sessions ol { list-style: none; margin: 0; padding: 0; display: grid; }
.ws-sessions li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .2rem .9rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.ws-sessions li:last-child { border-bottom: 0; }
.ws-sessions .ws-no { color: var(--ink-soft); min-width: 3.6em; }
.ws-sessions .ws-dt { display: flex; flex-wrap: wrap; column-gap: .8rem; row-gap: .1rem; }
.ws-sessions .ws-day { color: var(--ink); white-space: nowrap; }
.ws-sessions .ws-time { color: var(--button); white-space: nowrap; }

/* ---------- 匯款方式（預約療癒、工作坊報名） ---------- */
.pay-methods { display: grid; gap: 1rem; }
.pay-method { display: grid; gap: .3rem; padding: .9rem 1rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .45); border: 1px solid var(--line); }
.pay-method h3 { font-size: var(--step-0); letter-spacing: .06em; }
.pay-method .pay-lines > div { grid-template-columns: 4.5em minmax(0, 1fr); }
.pay-method .pay-lines > div:last-child { border-bottom: 0; }
.pay-method .pay-lines > div.plain { grid-template-columns: minmax(0, 1fr); }
.pay-method .pay-lines dd span { overflow-wrap: anywhere; }
.pay-link { justify-self: start; margin-top: .3rem; }
.pay-pick-q { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.pay-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: .6rem; margin-top: -.4rem; }
.pay-pick-group { grid-column: 1 / -1; margin: .3rem 0 -.2rem; font-size: var(--step--2); letter-spacing: .12em; color: var(--ink-soft); }
.pay-pick-btn { min-height: 48px; padding: .6rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255, 255, 255, .55); color: var(--ink); font: inherit; letter-spacing: .06em; cursor: pointer; }
.pay-pick-btn[aria-pressed="true"] { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.ws-pay { padding: 1rem 0 0; margin-top: 1rem; border-top: 1px solid var(--line); }
.ws-done-acts { justify-content: center; margin-top: 1rem; }
.ws-keep { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ws-keep h3 { font-size: var(--step-0); letter-spacing: .06em; }
.ws-keep .copy-row input { min-width: 0; flex: 1; }
.copy-row > input { width: 0; flex: 1 1 auto; min-width: 0; } /* 窄手機上不撐寬頁面 */
.ws-time-nb { white-space: nowrap; }

/* 商品特價：原價劃掉＋特價、左上角粉紅標籤 */
.tile.product.on-sale { position: relative; }
.tile.product .price .was { color: var(--ink-soft); opacity: .75; margin-right: .35em; font-size: var(--step--2); }
.tile.product .price .now { color: #C24E7A; font-weight: 600; }
.tile.product .price.has-sale .pc { display: block; white-space: nowrap; }
.tile.product .sale-tag {
  position: absolute; top: 16px; left: 16px; max-width: calc(100% - 32px); padding: .15rem .65rem; border-radius: 999px;
  background: #D2608A; color: #fff; font-size: var(--step--2); font-weight: 600; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 10px -4px rgba(176, 70, 106, .6);
}

/* 匯款方式的收款碼（例如 TNG） */
.pay-qr { margin: .6rem 0 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pay-qr img { width: 100%; height: auto; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.pay-qr figcaption { display: grid; gap: .6rem; justify-items: start; font-size: var(--step--1); color: var(--ink); }
.pay-qr .pay-link { margin: 0; }
.pay-qr-steps { margin: 0; padding-left: 1.2em; display: grid; gap: .25rem; line-height: 1.6; }
.pay-qr-tip { margin: 0; color: var(--ink-soft); font-size: var(--step--2); }
@media (max-width: 520px) {
  .pay-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pay-qr img { max-width: 240px; }
  .pay-qr figcaption { justify-items: stretch; }
  .pay-qr .pay-link { justify-content: center; }
}