/* ============================================================
   一個不用預約的傍晚 — 2026.09.15 免費放鬆體驗（響應世界心理健康日）
   紀謙的自在空間 ji-cian.online
   配色：日落莓紫 × 珊瑚玫瑰 × 翡翠綠 × 琥珀金（與 260922_Bars 同一套系統）
   ============================================================ */

:root{
  --ground:      #FFF6F2;
  --surface:     #FFFFFF;
  --surface-2:   #FFEBE2;
  --surface-3:   #FDE6EE;

  --ink:         #2A1F2C;
  --ink-2:       #4E3B4C;
  --muted:       #7A6072;
  --line:        #F5D9CE;

  --rose:        #E0426F;
  --rose-btn:    #D22A5E;
  --rose-deep:   #A8194A;
  --rose-soft:   #FFE2EC;

  --teal:        #12A08A;
  --teal-deep:   #06705F;
  --teal-soft:   #DBF4EE;

  --amber:       #C9761A;
  --amber-soft:  #FFF0DA;

  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", Georgia, serif;
  --sans:  "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC",
           "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --num:   "Spectral", "Noto Serif TC", Georgia, serif;

  --shadow-sm: 0 1px 2px rgba(42,31,44,.05), 0 6px 18px -8px rgba(168,25,74,.16);
  --shadow-md: 0 2px 8px rgba(42,31,44,.06), 0 26px 54px -28px rgba(168,25,74,.34);

  --wrap: 780px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:19px; line-height:1.88; letter-spacing:.012em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--rose-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.42; margin:0; text-wrap:balance; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
b,strong{ font-weight:700; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

.eyebrow{ font-size:14px; letter-spacing:.26em; text-transform:uppercase; color:var(--rose); margin:0 0 16px; font-weight:700; }
.eyebrow.on-dark{ color:rgba(255,255,255,.82); }

.section{ padding:84px 0; }
.section--tint{ background:var(--surface-2); }

.h2{ font-size:clamp(30px,5.2vw,42px); letter-spacing:-.01em; }
.h2 + .lede{ margin-top:18px; }
.lede{ font-size:21px; color:var(--ink-2); line-height:1.82; }
.small{ font-size:16.5px; color:var(--muted); line-height:1.85; }

.rule{ width:54px; height:3px; background:var(--rose); margin:26px 0 30px; border-radius:2px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff; padding:92px 0 80px;
  background:
    radial-gradient(120% 90% at 82% 6%,  rgba(255,196,120,.46) 0%, rgba(255,196,120,0) 56%),
    radial-gradient(130% 100% at 8% 98%, rgba(224,66,111,.55)  0%, rgba(224,66,111,0)  62%),
    linear-gradient(163deg, #4A2350 0%, #8E2C63 40%, #D94B72 76%, #F0895D 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:110px;
  background:linear-gradient(to bottom, rgba(255,246,242,0), var(--ground)); pointer-events:none;
}
.hero__glow{
  position:absolute; width:640px; height:640px; border-radius:50%;
  left:50%; top:-270px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,232,190,.30) 0%, rgba(255,232,190,0) 68%);
  animation:breathe 11s ease-in-out infinite; pointer-events:none;
}
@keyframes breathe{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.08); }
}
.hero__inner{ position:relative; z-index:2; text-align:center; }
.hero__kicker{
  display:inline-block; font-size:15px; font-weight:500; letter-spacing:.16em;
  color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.42);
  border-radius:999px; padding:9px 22px; margin-bottom:14px;
}
.hero__kicker2{
  display:block; font-size:14px; font-weight:500; letter-spacing:.05em;
  color:rgba(255,255,255,.82); margin-bottom:28px;
}
.hero h1{ font-size:clamp(38px,8.4vw,64px); letter-spacing:-.015em; color:#fff; margin-bottom:20px; }
.hero__sub{ font-size:clamp(19px,2.8vw,23px); font-weight:500; color:#fff; max-width:30em; margin:0 auto 14px; line-height:1.8; }
.hero__whisper{
  font-family:var(--serif); font-size:clamp(17px,2.4vw,20px); color:rgba(255,255,255,.88);
  margin:0 auto; max-width:26em; line-height:1.95;
}
.hero__meta{ display:flex; flex-wrap:wrap; justify-content:center; margin:40px auto 36px; max-width:660px; }
.hero__meta div{ flex:1 1 160px; padding:10px 18px; text-align:center; border-left:1px solid rgba(255,255,255,.28); }
.hero__meta div:first-child{ border-left:0; }
.hero__meta .lbl{ display:block; font-size:13.5px; letter-spacing:.18em; color:rgba(255,255,255,.78); margin-bottom:7px; font-weight:500; }
.hero__meta .val{ display:block; font-family:var(--num); font-size:32px; font-weight:600; color:#fff; line-height:1.2; letter-spacing:.02em; }
.hero__meta .val small{ font-family:var(--sans); font-size:16px; font-weight:500; letter-spacing:.04em; }

/* ---------- 按鈕 ---------- */
.btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans);
  font-size:18px; font-weight:700; letter-spacing:.03em; padding:18px 38px; border-radius:999px;
  border:2px solid transparent; cursor:pointer; text-decoration:none; line-height:1.4;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn--primary{ background:#fff; color:var(--rose-deep); box-shadow:0 12px 32px -12px rgba(0,0,0,.5); }
.btn--primary:hover{ background:#FFF2F6; box-shadow:0 18px 40px -14px rgba(0,0,0,.55); }
.btn--ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.7); }
.btn--ghost:hover{ background:rgba(255,255,255,.24); }
.btn--rose{ background:var(--rose-btn); color:#fff; box-shadow:0 12px 30px -12px rgba(210,42,94,.8); }
.btn--rose:hover{ background:var(--rose-deep); }

/* ---------- 引子 ---------- */
.opening p{ font-size:20px; line-height:2; color:var(--ink-2); }
.opening .pull{
  font-family:var(--serif); font-size:clamp(24px,4vw,32px); font-weight:700;
  color:var(--rose-deep); line-height:1.7; margin:30px 0;
}

/* ---------- 時間流程 ---------- */
.rail{ margin:32px 0 0; border-left:2px solid var(--line); }
.slot{ display:grid; grid-template-columns:118px 1fr; gap:22px; padding:20px 0 20px 26px; position:relative; }
.slot + .slot{ border-top:1px dashed var(--line); }
.slot::before{
  content:""; position:absolute; left:-7px; top:29px; width:12px; height:12px; border-radius:50%;
  background:var(--surface-2); border:2px solid var(--line);
}
.slot--key::before{ background:var(--rose); border-color:var(--rose); }
.slot__time{ font-family:var(--num); font-size:23px; font-weight:600; color:var(--muted); letter-spacing:.02em; padding-top:2px; }
.slot--key .slot__time{ color:var(--rose-deep); }
.slot__body strong{ font-weight:700; display:block; font-size:19px; margin-bottom:5px; }
.slot__body span{ font-size:17px; color:var(--muted); line-height:1.75; display:block; }

/* ---------- 會做 / 不會做 ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; }
.panel{ background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow-sm); }
.panel--do{ border-color:var(--rose-soft); }
.panel--dont{ border-color:var(--teal-soft); }
.panel h3{ font-size:22px; margin-bottom:8px; }
.panel__tag{ display:inline-block; font-size:14px; font-weight:700; letter-spacing:.14em; padding:5px 14px; border-radius:6px; margin-bottom:14px; }
.panel--do .panel__tag{ background:var(--rose); color:#fff; }
.panel--dont .panel__tag{ background:var(--teal); color:#fff; }
.panel li{ position:relative; padding-left:24px; margin:12px 0; font-size:18px; line-height:1.8; color:var(--ink-2); }
.panel li::before{ content:""; position:absolute; left:2px; top:13px; width:9px; height:3px; border-radius:2px; background:var(--rose); }
.panel--dont li::before{ background:var(--teal); }

/* ---------- 條列（結果語言 / 適合誰）---------- */
.fit{ display:grid; gap:12px; margin-top:28px; }
.fit li{
  background:var(--surface); border-left:5px solid var(--rose); border-radius:0 12px 12px 0;
  padding:18px 24px; font-size:18.5px; color:var(--ink-2); line-height:1.75; box-shadow:var(--shadow-sm);
}
.fit li b{ color:var(--ink); font-weight:700; }
.fit--teal li{ border-left-color:var(--teal); }

/* ---------- 免費卡 ---------- */
.price{ background:var(--surface); border:3px solid var(--rose-soft); border-radius:20px; padding:44px 36px; text-align:center; box-shadow:var(--shadow-md); margin-top:32px; }
.price__amt{ font-family:var(--serif); font-size:56px; font-weight:700; color:var(--rose-deep); line-height:1; display:block; margin-bottom:10px; }
.price__unit{ font-size:17px; color:var(--muted); letter-spacing:.04em; display:block; margin-bottom:24px; }
.price__note{ font-size:18.5px; color:var(--ink-2); max-width:30em; margin:0 auto 10px; line-height:1.85; }
.price__seats{ display:inline-block; margin-top:22px; background:var(--amber-soft); color:var(--amber); font-weight:700; font-size:16.5px; letter-spacing:.05em; padding:11px 24px; border-radius:999px; }
.reserve{ margin-top:24px; background:var(--rose-soft); border-radius:14px; padding:24px 28px; font-size:18px; color:var(--rose-deep); line-height:1.85; }

/* ---------- 地點 ---------- */
.venue{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:34px; box-shadow:var(--shadow-sm); margin-top:32px; }
.venue__name{ font-family:var(--serif); font-size:26px; font-weight:700; margin-bottom:8px; color:var(--rose-deep); }
.venue__addr{ font-size:19px; color:var(--ink); line-height:1.8; margin-bottom:8px; }
.venue__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.venue__links a{
  font-size:16px; font-weight:500; padding:11px 20px; border-radius:999px; border:2px solid var(--rose-soft);
  color:var(--rose-deep); background:var(--ground); transition:border-color .18s ease, background .18s ease;
}
.venue__links a:hover{ border-color:var(--rose); background:var(--rose-soft); text-decoration:none; }

/* ---------- 帶領人 ---------- */
.host{ background:var(--surface); border:2px solid var(--line); border-radius:18px; padding:36px; box-shadow:var(--shadow-sm); margin-top:32px; }
.host__name{ font-family:var(--serif); font-size:27px; font-weight:700; margin-bottom:4px; }
.host__role{ font-size:16px; color:var(--rose); font-weight:500; letter-spacing:.03em; margin-bottom:20px; }
.host p{ font-size:18.5px; color:var(--ink-2); line-height:1.9; }

/* ---------- 說明 / FAQ ---------- */
.disclaim{ background:var(--surface-3); border-radius:16px; padding:32px 34px; margin-top:32px; font-size:18px; color:var(--ink-2); line-height:1.9; }
.disclaim p + p{ margin-top:.9em; }
.disclaim b{ color:var(--rose-deep); }

.faq{ margin-top:28px; }
.faq details{ border-bottom:2px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative; font-family:var(--serif); font-size:20px; font-weight:700; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--num); font-size:30px; color:var(--rose); font-weight:600; }
.faq details[open] summary{ color:var(--rose-deep); }
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ color:var(--rose-deep); }
.faq .ans{ padding:0 6px 24px 0; font-size:18px; color:var(--ink-2); line-height:1.9; }
.faq .ans a{ font-weight:700; }

/* ---------- 報名 CTA ---------- */
.cta{
  color:#fff; padding:82px 0; text-align:center;
  background:
    radial-gradient(110% 120% at 84% 10%, rgba(255,196,120,.44) 0%, rgba(255,196,120,0) 58%),
    linear-gradient(155deg, #6A1F55 0%, #B7326A 52%, #E96A6A 100%);
}
.cta h2{ font-size:clamp(28px,5.2vw,42px); color:#fff; margin-bottom:18px; }
.cta p{ color:#fff; font-size:19px; max-width:27em; margin:0 auto 12px; opacity:.94; }
.cta .steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:32px auto; max-width:660px; }
.cta .step{ flex:1 1 175px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32); border-radius:14px; padding:22px 16px; }
.cta .step em{ display:block; font-family:var(--num); font-size:28px; font-weight:600; color:#FFD9A8; font-style:normal; margin-bottom:8px; }
.cta .step span{ font-size:17px; color:#fff; line-height:1.65; font-weight:500; }
.cta .lineid{ font-family:var(--num); font-size:26px; letter-spacing:.1em; color:#FFD9A8; margin-top:22px; display:block; font-weight:600; }

/* ---------- footer ---------- */
.foot{ background:#3A1F35; color:rgba(255,255,255,.82); padding:52px 0 46px; font-size:16.5px; line-height:1.85; text-align:center; }
.foot a{ color:#FFC4D6; }
.foot__brand{ font-family:var(--serif); font-size:22px; color:#fff; margin-bottom:10px; font-weight:700; }
.foot__meta{ margin-top:16px; font-size:14.5px; color:rgba(255,255,255,.58); }

/* ---------- 手機浮動報名條 ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px); border-top:3px solid var(--rose); padding:11px 14px;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 -8px 26px -12px rgba(168,25,74,.4);
}
.sticky__txt{ font-size:14.5px; color:var(--ink-2); line-height:1.4; }
.sticky__txt b{ display:block; color:var(--rose-deep); font-size:17px; font-weight:700; }
.sticky .btn{ padding:13px 26px; font-size:17px; flex:none; }

/* ---------- 動畫 ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- RWD ---------- */
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
@media (max-width:640px){
  body{ font-size:18px; }
  .section{ padding:58px 0; }
  .hero{ padding:66px 0 60px; }
  .hero__meta{ margin:32px auto 28px; }
  .hero__meta div{ flex:1 1 46%; border-left:0; padding:12px 6px; }
  .hero__meta .val{ font-size:26px; }
  .lede{ font-size:19.5px; }
  .opening p{ font-size:19px; }
  .slot{ grid-template-columns:90px 1fr; gap:14px; padding-left:20px; }
  .slot__time{ font-size:19px; }
  .slot__body strong{ font-size:18px; }
  .price{ padding:34px 22px; }
  .price__amt{ font-size:46px; }
  .venue,.host,.disclaim,.panel{ padding:26px 22px; }
  .cta{ padding:62px 0; }
  .sticky{ display:flex; }
  body{ padding-bottom:78px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
@media print{
  .sticky,.hero__glow{ display:none !important; }
  body{ background:#fff; }
  .hero,.cta{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}