/* ===========================================================
   明燈閣 · 設計系統
   墨 / 宣紙 / 朱砂 / 鎏金
   =========================================================== */
:root{
  --ink:#171310;        --ink-2:#2A2320;     --ink-3:#4A4038;
  --paper:#F7F2E8;      --paper-2:#EFE7D8;   --paper-3:#E4D9C4;
  --vermilion:#A62B1F;  --vermilion-2:#C4442F;
  --gold:#C8A253;       --gold-2:#E0C078;    --gold-dim:#8E7132;
  --jade:#3E5C50;
  --serif:"Noto Serif TC","Source Han Serif TC","Songti TC","STSong",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --r:2px;
  --sh:0 1px 2px rgba(23,19,16,.06),0 8px 24px -12px rgba(23,19,16,.18);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);background:var(--paper);color:var(--ink);
  line-height:1.85;font-size:17px;letter-spacing:.02em;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
body::before{ /* 宣紙纖維 */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--vermilion);color:#fff}

/* ---------- 版心 ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}

/* ---------- 頂欄 ---------- */
.topbar{
  position:sticky;top:0;z-index:800;background:rgba(247,242,232,.86);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(23,19,16,.08);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px}
.brand .seal{
  width:38px;height:38px;border:1.5px solid var(--vermilion);border-radius:2px;
  display:grid;place-items:center;color:var(--vermilion);
  font-size:19px;font-weight:700;letter-spacing:0;line-height:1;
  background:rgba(166,43,31,.04);
}
.brand b{font-size:21px;letter-spacing:.22em;font-weight:600}
.brand span{font-family:var(--sans);font-size:11px;letter-spacing:.28em;color:var(--ink-3);display:block;margin-top:-4px}
.nav{display:flex;gap:30px;font-size:15px;letter-spacing:.08em}
.nav a{position:relative;color:var(--ink-2);padding:6px 0;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--vermilion);transition:width .3s}
.nav a:hover{color:var(--vermilion)}
.nav a:hover::after{width:100%}
.burger{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;min-height:auto;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#241D19 0%,#171310 55%,#0E0B09 100%);
  color:var(--paper);overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 40% at 50% 62%,rgba(200,162,83,.16),transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:3;text-align:center;padding:96px 24px 104px;max-width:880px}
.hero .eyebrow{
  font-family:var(--sans);font-size:12px;letter-spacing:.5em;color:var(--gold);
  margin-bottom:34px;text-indent:.5em;
}
.hero h1{
  font-size:clamp(38px,7vw,76px);line-height:1.22;font-weight:500;letter-spacing:.14em;
  margin-bottom:26px;text-indent:.14em;
}
.hero h1 em{font-style:normal;color:var(--gold-2)}
.hero p.lead{
  font-size:clamp(15px,1.6vw,18px);color:rgba(247,242,232,.72);
  line-height:2.1;max-width:600px;margin:0 auto 44px;letter-spacing:.06em;
}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* 燈籠 */
.lanterns{position:absolute;inset:0;pointer-events:none;z-index:2}
.lantern{
  position:absolute;width:54px;height:68px;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 9px),
    radial-gradient(circle at 42% 30%,#F07A55,#C4442F 46%,#8C2016 78%,#5E1409);
  box-shadow:0 0 46px 14px rgba(226,96,63,.30),inset -6px -8px 18px rgba(0,0,0,.45),inset 4px 4px 12px rgba(255,190,150,.22);
  animation:sway 7s ease-in-out infinite;
}
.lantern::before{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:20px;height:7px;border-radius:2px 2px 1px 1px;
  background:linear-gradient(#C8A253,#8E7132);box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.lantern::after{
  content:"";position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
  width:3px;height:26px;border-radius:0 0 2px 2px;
  background:linear-gradient(var(--gold-dim),rgba(142,113,50,.15));
}
.lantern i{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#F0D18A,#B08A3A);
  box-shadow:0 0 10px 2px rgba(200,162,83,.4);
}
@keyframes sway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-9px)}}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;border:1px solid var(--gold);color:var(--gold-2);
  font-family:var(--sans);font-size:14px;letter-spacing:.22em;text-indent:.22em;
  background:transparent;cursor:pointer;transition:all .35s cubic-bezier(.2,.7,.3,1);
  border-radius:var(--r);position:relative;overflow:hidden;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);z-index:-1;
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn.solid{background:var(--vermilion);border-color:var(--vermilion);color:#fff}
.btn.solid::before{background:#8C2016}
.btn.solid:hover{color:#fff}
.btn.ghost{border-color:rgba(247,242,232,.35);color:rgba(247,242,232,.9)}
.btn.ghost::before{background:rgba(247,242,232,.12)}
.btn.ghost:hover{color:#fff}
.btn.ink{border-color:var(--ink);color:var(--ink)}
.btn.ink::before{background:var(--ink)}
.btn.ink:hover{color:var(--paper)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sm{padding:10px 22px;font-size:13px;letter-spacing:.16em}

/* ---------- 章節 ---------- */
section{padding:104px 0}
.sec-head{text-align:center;margin-bottom:66px}
.sec-head .no{
  font-family:var(--sans);font-size:11px;letter-spacing:.5em;color:var(--gold-dim);
  display:block;margin-bottom:18px;text-indent:.5em;
}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:.18em;text-indent:.18em}
.sec-head .sub{
  font-family:var(--sans);font-size:14px;color:var(--ink-3);margin-top:16px;letter-spacing:.1em;
}
.rule{width:44px;height:1px;background:var(--gold);margin:26px auto 0;position:relative}
.rule::before,.rule::after{content:"";position:absolute;top:-2px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.rule::before{left:-14px}.rule::after{right:-14px}

/* ---------- 儀式卡 ---------- */
.grid{display:grid;gap:1px;background:rgba(23,19,16,.1);border:1px solid rgba(23,19,16,.1)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--paper);padding:52px 40px;position:relative;overflow:hidden;
  transition:background .4s;display:block;
}
.card:hover{background:var(--paper-2)}
.card .idx{
  font-family:var(--sans);font-size:11px;letter-spacing:.4em;color:var(--gold-dim);
  margin-bottom:22px;display:block;
}
.card h3{font-size:23px;font-weight:500;letter-spacing:.2em;margin-bottom:14px}
.card p{font-size:14.5px;color:var(--ink-3);line-height:2;letter-spacing:.04em}
.card .go{
  margin-top:28px;font-family:var(--sans);font-size:12px;letter-spacing:.24em;
  color:var(--vermilion);display:inline-flex;align-items:center;gap:8px;
  transition:gap .3s;
}
.card:hover .go{gap:16px}
.card::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;
  border:1px solid rgba(200,162,83,.35);border-radius:50%;opacity:0;transition:all .6s;
}
.card:hover::after{opacity:1;right:-24px;bottom:-24px}

/* ---------- 內頁標頭 ---------- */
.page-head{
  padding:88px 0 62px;text-align:center;background:var(--ink);color:var(--paper);
  position:relative;overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 50% 0%,rgba(200,162,83,.14),transparent 65%);
}
.page-head .wrap{position:relative;z-index:2}
.page-head .crumb{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:rgba(247,242,232,.66);margin-bottom:22px}
.page-head .crumb a:hover{color:var(--gold)}
.page-head h1{font-size:clamp(28px,4.4vw,46px);font-weight:500;letter-spacing:.24em;text-indent:.24em}
.page-head .desc{font-size:15px;color:rgba(247,242,232,.66);margin-top:20px;letter-spacing:.06em}

/* ---------- 表單 ---------- */
.panel{
  background:#fff;border:1px solid rgba(23,19,16,.1);padding:56px 52px;box-shadow:var(--sh);
  position:relative;
}
.panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--vermilion),var(--gold),var(--vermilion));
}
.field{margin-bottom:26px}
.field label{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--ink-3);margin-bottom:10px}
.field label .req{color:var(--vermilion)}
.input,select,textarea{
  width:100%;padding:14px 16px;font-family:var(--serif);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid rgba(23,19,16,.16);border-radius:var(--r);
  transition:border-color .25s,background .25s;outline:none;letter-spacing:.05em;
}
.input:focus,select:focus,textarea:focus{border-color:var(--vermilion);background:#fff}
.hint{font-family:var(--sans);font-size:12px;color:var(--ink-3);opacity:.75;margin-top:8px;letter-spacing:.04em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* 燈位選擇 */
.lamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;margin-top:14px}
.lamp{
  aspect-ratio:1/1.28;border:1px solid rgba(23,19,16,.14);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:all .3s;background:var(--paper);position:relative;
}
.lamp .flame{
  width:14px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 65%,#FFD98A,#E8A03F 45%,#B7331F);
  box-shadow:0 0 16px 5px rgba(232,160,63,.4);transition:all .3s;
}
.lamp small{font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.lamp:hover{border-color:var(--gold);background:#fff}
.lamp.on{border-color:var(--vermilion);background:#fff;box-shadow:0 0 0 1px var(--vermilion) inset}
.lamp.on .flame{animation:flicker 1.6s ease-in-out infinite}
.lamp.taken{opacity:.42;cursor:not-allowed}
@keyframes flicker{
  0%,100%{transform:scaleY(1) translateY(0);opacity:1}
  35%{transform:scaleY(1.14) translateY(-2px);opacity:.88}
  70%{transform:scaleY(.94) translateY(1px);opacity:.96}
}

/* ---------- 香爐 / 香煙 ---------- */
.censer{position:relative;height:230px;display:grid;place-items:center;margin:20px 0}
.censer .body{
  width:170px;height:96px;border-radius:8px 8px 50% 50%/8px 8px 40% 40%;
  background:linear-gradient(#5C3A22,#3A2314);box-shadow:inset 0 6px 18px rgba(0,0,0,.5),0 14px 26px -14px rgba(0,0,0,.6);
  position:relative;
}
.censer .body::before{
  content:"";position:absolute;top:-9px;left:-9px;right:-9px;height:16px;border-radius:50%;
  background:linear-gradient(#7A5232,#4A2E1A);
}
.incense{position:absolute;bottom:64px;width:3px;height:120px;background:linear-gradient(#8C6A45,#C8A253);border-radius:2px}
.incense i{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#E85C3A;box-shadow:0 0 12px 4px rgba(232,92,58,.7)}
.smoke{position:absolute;bottom:110px;left:50%;width:2px;height:90px;pointer-events:none}
.smoke span{
  position:absolute;bottom:0;left:0;width:8px;height:8px;border-radius:50%;
  background:rgba(200,180,150,.34);filter:blur(4px);
  animation:rise 4.4s linear infinite;
}
@keyframes rise{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  18%{opacity:.75}
  100%{transform:translate(var(--dx,10px),-190px) scale(2.6);opacity:0}
}

/* ---------- 籤筒 ---------- */
.tube{position:relative;height:320px;display:grid;place-items:center;margin:10px 0 30px}
.tube .cup{
  width:146px;height:196px;position:relative;
  background:
    linear-gradient(100deg,#6E170F 0%,#A62B1F 22%,#C4442F 46%,#A62B1F 72%,#6E170F 100%);
  border-radius:4px 4px 14px 14px;
  box-shadow:
    inset -16px 0 30px rgba(0,0,0,.38),inset 16px 0 22px rgba(255,150,110,.10),
    0 22px 40px -20px rgba(0,0,0,.6);
  transition:transform .12s;
}
.tube .cup::before{ /* 筒口 */
  content:"";position:absolute;top:-11px;left:-8px;right:-8px;height:22px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#D9583F,#8C2016 70%);
  box-shadow:inset 0 4px 8px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
}
.tube .cup::after{
  content:"籤";position:absolute;top:26%;left:0;right:0;text-align:center;
  color:rgba(255,240,200,.46);font-size:32px;letter-spacing:.1em;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.tube .cup i{
  position:absolute;left:0;right:0;bottom:26px;height:6px;
  background:linear-gradient(90deg,transparent,rgba(200,162,83,.75),transparent);
}
.tube .stick{
  position:absolute;bottom:70px;left:50%;width:8px;height:240px;border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,#F4E9CE,#DCC79A 52%,#B08A3A);
  transform-origin:bottom center;
  box-shadow:0 2px 5px rgba(0,0,0,.22),inset -2px 0 3px rgba(0,0,0,.12);
}
.tube .stick:nth-of-type(1){left:calc(50% - 30px);height:216px;transform:rotate(-10deg)}
.tube .stick:nth-of-type(2){left:calc(50% - 20px);height:246px;transform:rotate(-6deg)}
.tube .stick:nth-of-type(3){left:calc(50% - 10px);height:228px;transform:rotate(-2deg)}
.tube .stick:nth-of-type(4){left:50%;height:256px}
.tube .stick:nth-of-type(5){left:calc(50% + 10px);height:232px;transform:rotate(3deg)}
.tube .stick:nth-of-type(6){left:calc(50% + 20px);height:242px;transform:rotate(6deg)}
.tube .stick:nth-of-type(7){left:calc(50% + 30px);height:214px;transform:rotate(10deg)}
.tube.shaking .cup{animation:shake .16s linear infinite}
@keyframes shake{0%,100%{transform:translateX(-3px) rotate(-1.6deg)}50%{transform:translateX(3px) rotate(1.6deg)}}

/* ---------- 結果卡 ---------- */
.result{
  background:#fff;border:1px solid rgba(200,162,83,.5);padding:0;overflow:hidden;
  opacity:0;transform:translateY(18px);transition:all .7s cubic-bezier(.2,.7,.3,1);
}
.result.show{opacity:1;transform:none}
.result .top{
  background:var(--ink);color:var(--paper);padding:34px 40px;display:flex;
  align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.result .top .grade{
  font-size:13px;letter-spacing:.3em;color:var(--gold-2);border:1px solid rgba(200,162,83,.5);
  padding:6px 14px;border-radius:2px;
}
.result .top h3{font-size:26px;font-weight:500;letter-spacing:.18em}
.result .body{padding:40px}
.poem{
  font-size:19px;line-height:2.6;letter-spacing:.12em;text-align:center;
  padding:26px 0 30px;border-bottom:1px solid rgba(23,19,16,.1);margin-bottom:28px;
}
.poem br{line-height:2.6}
.plain{font-size:15.5px;color:var(--ink-2);line-height:2.15;letter-spacing:.04em}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.tag{
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;padding:6px 13px;
  border:1px solid rgba(23,19,16,.16);border-radius:2px;color:var(--ink-3);
}

/* ---------- 金紙焚化 ---------- */
.fire-stage{position:relative;height:350px;overflow:hidden;margin:0 0 10px}
.brazier{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:210px;height:96px;border-radius:6px 6px 46% 46%/6px 6px 34% 34%;
  background:linear-gradient(180deg,#4A4038,#241D19 60%,#171310);
  box-shadow:inset 0 8px 22px rgba(0,0,0,.7),0 18px 34px -18px rgba(0,0,0,.6);
}
.brazier::before{
  content:"";position:absolute;top:-12px;left:-14px;right:-14px;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 30%,#5C5048,#241D19 72%);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.8);
}
.brazier::after{
  content:"";position:absolute;left:16px;right:16px;bottom:10px;height:6px;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(200,162,83,.28),transparent);
}
.paper-joss{
  position:absolute;left:calc(50% - 44px);bottom:112px;width:88px;height:116px;background:linear-gradient(#F2E3BC,#E0C078);
  border:1px solid rgba(140,113,50,.5);border-radius:1px;
  box-shadow:inset 0 0 0 6px rgba(200,162,83,.35);
  display:grid;place-items:center;color:var(--gold-dim);font-size:15px;letter-spacing:.1em;
}
.flame-wrap{position:absolute;bottom:96px;width:100%;height:150px;pointer-events:none}
.flame{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:80px;height:130px;border-radius:50% 50% 45% 45%/70% 70% 30% 30%;
  background:radial-gradient(circle at 50% 78%,#FFF3C4,#FFC24A 32%,#F2661F 62%,#B7331F 88%);
  filter:blur(1px);opacity:0;transition:opacity .5s;
  animation:flick2 1.1s ease-in-out infinite;
}
@keyframes flick2{0%,100%{transform:translateX(-50%) scaleY(1) scaleX(1)}50%{transform:translateX(-50%) scaleY(1.12) scaleX(.94)}}
.ash{position:absolute;bottom:120px;width:5px;height:5px;background:rgba(90,70,50,.5);border-radius:50%;pointer-events:none}

/* ---------- 步驟 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(23,19,16,.12)}
.step{padding:38px 30px;border-right:1px solid rgba(23,19,16,.12);position:relative}
.step:last-child{border-right:0}
.step .n{
  font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--gold-dim);margin-bottom:16px;
}
.step h4{font-size:18px;font-weight:500;letter-spacing:.12em;margin-bottom:10px}
.step p{font-size:14px;color:var(--ink-3);line-height:1.95}

/* ---------- 頁尾 ---------- */
footer{background:var(--ink);color:rgba(247,242,232,.6);padding:76px 0 40px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:56px}
footer h5{color:var(--paper);font-size:15px;letter-spacing:.2em;margin-bottom:20px;font-weight:500}
footer li{list-style:none;margin-bottom:11px;font-size:13.5px;letter-spacing:.05em}
footer a:hover{color:var(--gold)}
footer .about p{line-height:2.1;font-size:13.5px;max-width:340px}
footer .base{
  border-top:1px solid rgba(247,242,232,.12);padding-top:28px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.06em;
  color:rgba(247,242,232,.62);
}
.disclaimer{
  background:rgba(166,43,31,.05);border-left:2px solid var(--vermilion);
  padding:18px 22px;font-size:13px;color:var(--ink-3);line-height:1.95;margin-top:34px;
  font-family:var(--sans);letter-spacing:.03em;
}

/* ---------- 響應式 ---------- */
@media(max-width:900px){
  .grid.c3{grid-template-columns:1fr}
  .grid.c2{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
  .nav.open{
    display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:12px 28px;border-bottom:1px solid rgba(23,19,16,.1);
  }
  .nav.open a{padding:14px 0;border-bottom:1px solid rgba(23,19,16,.06)}
  footer .cols{grid-template-columns:1fr 1fr}
  .row2,.row3{grid-template-columns:1fr}
  .panel{padding:38px 26px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid rgba(23,19,16,.12)}
  section{padding:72px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- 文章 ---------- */
.article{max-width:720px;margin:0 auto;padding:0 28px}
.article .meta{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);letter-spacing:.14em;margin-bottom:30px}
.article .lead{font-size:18px;line-height:2.1;color:var(--ink-2);padding-bottom:30px;border-bottom:1px solid rgba(23,19,16,.1);margin-bottom:44px}
.article h2{font-size:26px;letter-spacing:.1em;margin:60px 0 20px;font-weight:500}
.article h2::before{content:"";display:block;width:30px;height:2px;background:var(--vermilion);margin-bottom:18px}
.article h3{font-size:19px;letter-spacing:.08em;margin:38px 0 14px;font-weight:500}
.article p{margin-bottom:20px;font-size:16.5px;line-height:2.05;letter-spacing:.02em}
.article ul,.article ol{margin:0 0 22px 24px}
.article li{margin-bottom:10px;font-size:16px;line-height:1.95}
.article blockquote{border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:32px 0;color:var(--ink-2);font-size:17px;line-height:2}
.article table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.article th,.article td{border-bottom:1px solid rgba(23,19,16,.12);padding:13px 10px;text-align:left;line-height:1.8}
.article th{background:var(--paper-2);font-weight:500;letter-spacing:.08em;font-size:14px}
.article a{color:var(--vermilion);border-bottom:1px solid rgba(166,43,31,.3)}
.article a:hover{border-bottom-color:var(--vermilion)}
.relbox{margin:48px 0 0;padding:24px 26px;background:var(--paper-2);border-left:2px solid var(--gold)}
.relbox b{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:8px;font-weight:400}
.relbox a{display:block;padding:9px 0;font-size:15.5px;color:var(--ink-2);border-bottom:1px dashed rgba(23,19,16,.12)}
.relbox a:last-child{border-bottom:0}
.relbox a::after{content:" →";color:var(--vermilion);font-size:13px}
.toc{background:var(--paper-2);padding:28px 32px;margin:0 0 20px;font-size:14.5px;border-left:2px solid var(--gold)}
.toc b{display:block;margin-bottom:12px;letter-spacing:.24em;font-size:12px;color:var(--ink-3);font-family:var(--sans)}
.toc a{display:block;padding:7px 0;color:var(--ink-2);border-bottom:1px dashed rgba(23,19,16,.12)}
.toc a:last-child{border-bottom:0}
.cardlist{display:grid;gap:0;border-top:1px solid rgba(23,19,16,.12)}
.cardlist a{display:block;padding:34px 0;border-bottom:1px solid rgba(23,19,16,.12);transition:padding-left .3s}
.cardlist a:hover{padding-left:12px}
.cardlist h3{font-size:21px;font-weight:500;letter-spacing:.1em;margin-bottom:10px}
.cardlist p{font-size:14.5px;color:var(--ink-3);line-height:1.9}
.cardlist .d{font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--gold-dim);margin-bottom:10px}

/* ---------- 方案 / 結帳 ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(23,19,16,.12);border:1px solid rgba(23,19,16,.12)}
.plan{background:#fff;padding:34px 26px;cursor:pointer;position:relative;transition:background .3s}
.plan:hover{background:var(--paper)}
.plan.on{background:var(--paper);box-shadow:inset 0 0 0 2px var(--vermilion)}
.plan .tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;color:var(--gold-dim);margin-bottom:14px;display:block;border:0;padding:0;border-radius:0;background:none}
.plan h4{font-size:19px;letter-spacing:.14em;font-weight:500;margin-bottom:8px}
.plan .price{font-size:30px;letter-spacing:.02em;color:var(--vermilion);margin:14px 0 4px}
.plan .price small{font-size:13px;color:var(--ink-3);letter-spacing:.06em}
.plan ul{list-style:none;margin:18px 0 0;padding:0}
.plan li{font-size:13.5px;color:var(--ink-3);line-height:1.9;padding-left:14px;position:relative}
.plan li::before{content:"·";position:absolute;left:2px;color:var(--gold)}
.plan .rec{position:absolute;top:0;right:0;background:var(--vermilion);color:#fff;font-family:var(--sans);font-size:10px;letter-spacing:.16em;padding:5px 10px}

.summary{background:var(--ink);color:var(--paper);padding:44px 40px;position:sticky;top:96px}
.summary h4{font-size:13px;letter-spacing:.3em;color:var(--gold);font-family:var(--sans);margin-bottom:26px}
.srow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(247,242,232,.12);font-size:14.5px}
.srow span:first-child{color:rgba(247,242,232,.55);letter-spacing:.06em}
.srow span:last-child{color:var(--paper);text-align:right}
.srow.total{border-bottom:0;padding-top:22px;margin-top:8px;border-top:1px solid rgba(200,162,83,.4)}
.srow.total span:last-child{font-size:26px;color:var(--gold-2)}
.paybar{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.payopt{flex:1;min-width:96px;border:1px solid rgba(23,19,16,.18);padding:13px 8px;text-align:center;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;cursor:pointer;transition:all .25s;color:var(--ink-3);background:var(--paper)}
.payopt:hover{border-color:var(--gold);color:var(--ink)}
.payopt.on{border-color:var(--vermilion);background:#fff;color:var(--vermilion);box-shadow:inset 0 0 0 1px var(--vermilion)}
.demo-note{margin-top:22px;padding:14px 16px;background:rgba(200,162,83,.1);border-left:2px solid var(--gold);font-family:var(--sans);font-size:12px;line-height:1.85;color:rgba(247,242,232,.7);letter-spacing:.03em}
.receipt{max-width:560px;margin:0 auto;background:#fff;border:1px solid rgba(200,162,83,.5);position:relative}
.receipt .hd{background:var(--ink);color:var(--paper);padding:40px;text-align:center}
.receipt .bd{padding:44px 44px 52px}
.rrow{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px dashed rgba(23,19,16,.15);font-size:15px}
.rrow:last-of-type{border-bottom:0}
.rno{font-family:var(--sans);font-size:22px;letter-spacing:.2em;color:var(--vermilion);margin:8px 0 22px}
.stamp{position:absolute;right:26px;bottom:26px;width:88px;height:88px;border:2px solid rgba(166,43,31,.45);border-radius:50%;display:grid;place-items:center;color:rgba(166,43,31,.55);font-size:13px;letter-spacing:.14em;transform:rotate(-12deg);line-height:1.5;text-align:center}
@media(max-width:900px){
  .plans{grid-template-columns:1fr}
  .summary{position:static;margin-top:30px}
}

/* ---------- 帳號 ---------- */
.auth-wrap{max-width:460px;margin:0 auto;padding:0 28px}
.auth-card{background:#fff;border:1px solid rgba(23,19,16,.1);padding:52px 46px;box-shadow:var(--sh);position:relative}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--vermilion),var(--gold),var(--vermilion))}
.auth-card h2{font-size:24px;letter-spacing:.18em;font-weight:500;margin-bottom:8px;text-align:center}
.auth-card .sub{font-family:var(--sans);font-size:13px;color:var(--ink-3);text-align:center;margin-bottom:36px;letter-spacing:.06em}
.auth-alt{text-align:center;margin-top:28px;font-family:var(--sans);font-size:13.5px;color:var(--ink-3)}
.auth-alt a{color:var(--vermilion);border-bottom:1px solid rgba(166,43,31,.35)}
.err{background:rgba(166,43,31,.07);border-left:2px solid var(--vermilion);padding:12px 16px;font-family:var(--sans);font-size:13px;color:#8C2016;margin-bottom:22px;display:none;line-height:1.8}
.err.on{display:block}
.nav a.member{color:var(--vermilion)}
.nav a.member::after{background:var(--vermilion)}

/* ---------- 會員中心 ---------- */
.mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:44px;padding-bottom:26px;border-bottom:1px solid rgba(23,19,16,.12)}
.mhead h1{font-size:30px;letter-spacing:.16em;font-weight:500}
.mhead .who{font-family:var(--sans);font-size:13px;color:var(--ink-3);letter-spacing:.08em;margin-top:10px}
.badge{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;padding:4px 10px;border:1px solid var(--gold);color:var(--gold-dim);border-radius:2px;margin-left:10px;vertical-align:middle}
.badge.admin{border-color:var(--vermilion);color:var(--vermilion)}
.stat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(23,19,16,.1);border:1px solid rgba(23,19,16,.1);margin-bottom:48px}
.stat div{background:#fff;padding:30px 26px}
.stat b{display:block;font-size:32px;color:var(--vermilion);font-weight:500;letter-spacing:.02em}
.stat span{font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:.14em}
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th{text-align:left;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;color:var(--ink-3);padding:12px 10px;border-bottom:1px solid rgba(23,19,16,.14);font-weight:400}
.dtable td{padding:14px 10px;border-bottom:1px solid rgba(23,19,16,.07);line-height:1.7}
.dtable tr:hover td{background:var(--paper-2)}
.empty{text-align:center;padding:70px 20px;color:var(--ink-3);font-family:var(--sans);font-size:14px;letter-spacing:.06em}
.empty a{color:var(--vermilion);border-bottom:1px solid currentColor}
.tabs{display:flex;gap:0;border-bottom:1px solid rgba(23,19,16,.12);margin-bottom:36px}
.tabs button{background:none;border:0;padding:14px 26px;font-family:var(--sans);font-size:13.5px;letter-spacing:.14em;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;transition:all .25s}
.tabs button.on{color:var(--ink);border-bottom-color:var(--vermilion)}
.tabs button:hover{color:var(--ink)}
.pane{display:none}.pane.on{display:block}
.adminbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.danger{border-color:rgba(166,43,31,.5)!important;color:var(--vermilion)!important}
@media(max-width:900px){.stat{grid-template-columns:1fr}.auth-card{padding:38px 26px}.dtable{font-size:13px}}

/* ---------- 燈海（浮空燈籠） ---------- */
.sky-sec{position:relative;background:radial-gradient(120% 90% at 50% 100%,#2A211C 0%,#171310 55%,#0D0A08 100%);color:var(--paper);padding:0;overflow:hidden}
.sky-sec::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 85%,rgba(200,162,83,.16),transparent 70%);pointer-events:none}
.sky-head{position:relative;z-index:2;text-align:center;padding:74px 24px 10px}
.sky-head .no{font-family:var(--sans);font-size:11px;letter-spacing:.5em;color:var(--gold);display:block;margin-bottom:16px;text-indent:.5em}
.sky-head h2{font-size:clamp(22px,3vw,32px);letter-spacing:.24em;font-weight:500;text-indent:.24em}
.sky-head .cnt{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:rgba(247,242,232,.5);margin-top:14px}
.sky-head .cnt b{color:var(--gold-2);font-size:19px;font-weight:400}
.sky-field{position:relative;height:560px;z-index:2}
.sky-field::after{content:"";position:absolute;left:0;right:0;bottom:-80px;height:260px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%,rgba(200,162,83,.18),transparent 70%)}
.sky-lamp{position:absolute;width:78px;text-align:center;animation:bob 7s ease-in-out infinite;will-change:transform}
.sky-inner{display:block}
.sky-lamp .body{
  position:relative;width:54px;height:70px;margin:0 auto;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 8px),
             radial-gradient(circle at 42% 30%,#F5855F,#C4442F 46%,#8C2016 78%,#5E1409);
  box-shadow:0 0 44px 16px rgba(226,96,63,.34),0 0 90px 30px rgba(226,96,63,.12),inset -5px -8px 16px rgba(0,0,0,.45);
}
.sky-lamp .body::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:20px;height:7px;border-radius:2px;background:linear-gradient(#C8A253,#8E7132)}
.sky-lamp .body::after{content:"";position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);width:2px;height:16px;background:linear-gradient(var(--gold-dim),transparent)}
.sky-lamp .n{display:block;margin-top:20px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:rgba(247,242,232,.58);white-space:nowrap}
.sky-lamp.new .sky-inner{animation:flyIn 1.5s cubic-bezier(.16,.84,.34,1) both}
.sky-lamp.new .body{animation:glowBurst 1.8s ease-out}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes flyIn{0%{opacity:0;transform:translateY(240px) scale(.25)}55%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glowBurst{0%{box-shadow:0 0 0 0 rgba(255,200,120,.9),0 0 26px 8px rgba(226,96,63,.3)}45%{box-shadow:0 0 0 26px rgba(255,200,120,0),0 0 40px 16px rgba(255,180,90,.55)}100%{box-shadow:0 0 26px 8px rgba(226,96,63,.28)}}
.sky-empty{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:13.5px;letter-spacing:.14em;color:rgba(247,242,232,.3)}

/* 燈位格 */
.lampgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px}
.lslot{aspect-ratio:1/1.15;min-height:66px;border:1px solid rgba(23,19,16,.14);background:var(--paper);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;
  transition:all .28s;border-radius:2px}
.lslot .fl{width:11px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 65%,#FFD98A,#E8A03F 45%,#B7331F);opacity:.22;transition:all .3s}
.lslot small{font-family:var(--sans);font-size:9.5px;letter-spacing:.04em;color:var(--ink-3);opacity:.65;margin-bottom:2px}
.lslot:hover{border-color:var(--gold);background:#fff}
.lslot.on{border-color:var(--vermilion);background:#fff;box-shadow:0 0 0 1px var(--vermilion) inset,0 6px 18px -10px rgba(166,43,31,.6)}
.lslot.on .fl{opacity:1;box-shadow:0 0 14px 5px rgba(232,160,63,.55);animation:flicker 1.5s ease-in-out infinite}
.lslot.taken{background:linear-gradient(#FFFBF0,#F6EAD0);cursor:not-allowed;border-color:rgba(200,162,83,.55)}
.lslot.taken .fl{opacity:1;background:radial-gradient(circle at 50% 65%,#FFF0C0,#F0A93F 45%,#C4442F);box-shadow:0 0 18px 7px rgba(240,169,63,.55);animation:flicker 2.2s ease-in-out infinite}
.lslot.taken small{color:var(--gold-dim)}
.lslot .who{position:absolute;bottom:5px;left:2px;right:2px;font-family:var(--sans);font-size:9px;color:var(--vermilion);
  letter-spacing:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 提示條 */
.toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);
  padding:16px 28px;font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;z-index:9000;
  opacity:0;transition:all .45s cubic-bezier(.2,.7,.3,1);pointer-events:none;border-left:3px solid var(--gold)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast a{color:var(--gold-2);border-bottom:1px solid currentColor}
.toast .t-sub{display:block;margin-top:7px;font-size:11.5px;letter-spacing:.08em;color:rgba(247,242,232,.5)}

@media(max-width:900px){
  .lampgrid{grid-template-columns:repeat(6,1fr)}
  .sky-field{height:420px}
}

/* ===========================================================
   大殿 · 首頁互動場景
   =========================================================== */
.runway{position:relative;height:200vh}
.temple{position:sticky;top:72px;height:calc(100vh - 72px);min-height:480px;
  overflow:hidden;background:#080605;color:var(--paper);isolation:isolate}
.hall{position:absolute;inset:0;transform-origin:50% 0;will-change:transform}
.hall.zoom{transition:transform 1.2s cubic-bezier(.16,.84,.34,1)}
.hall-art{display:block;width:100%;height:100%}

/* 香煙 · 燭火 · 香頭 */
.smk{transform-box:fill-box;transform-origin:50% 100%;animation:smk 7.4s ease-in-out infinite}
.smk.d2{animation-duration:8.8s;animation-delay:-2.6s}
.smk.d3{animation-duration:8.1s;animation-delay:-5.2s}
@keyframes smk{
  0%{opacity:0;transform:translateY(6px) scaleY(.82)}
  22%{opacity:1}
  68%{opacity:.5}
  100%{opacity:0;transform:translateY(-44px) scaleY(1.28)}
}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame 2.6s ease-in-out infinite}
.flame.f2{animation-duration:2.2s;animation-delay:-.6s}
.flame.f3{animation-duration:2.9s;animation-delay:-1.1s}
.flame.f4{animation-duration:2.4s;animation-delay:-1.7s}
@keyframes flame{
  0%,100%{transform:scale(1,1);opacity:1}
  28%{transform:scale(.9,1.1);opacity:.86}
  58%{transform:scale(1.07,.93);opacity:1}
}
.embers circle{animation:ember 2.9s ease-in-out infinite}
.embers circle:nth-child(2){animation-delay:-.9s}
.embers circle:nth-child(3){animation-delay:-1.8s}
@keyframes ember{0%,100%{opacity:.5}50%{opacity:1}}

/* 座位 */
.seats{position:absolute;left:50%;bottom:23%;transform:translateX(-50%);
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(2px,2.2vw,34px);width:min(96%,900px);z-index:4}
.seat{position:relative;background:none;border:0;padding:0;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  transition:transform .5s cubic-bezier(.16,.84,.34,1);-webkit-tap-highlight-color:transparent}
.seat:hover,.seat:focus-visible{transform:translateY(-6px);outline:none}
.seat:focus-visible .cushion{box-shadow:0 0 0 2px var(--gold-2),0 14px 26px -12px #000}

.seat .fig{display:block;width:clamp(70px,8.5vw,116px);height:auto;
  filter:blur(.45px) drop-shadow(0 12px 16px rgba(0,0,0,.7));
  transform-origin:50% 100%;animation:breathe 5.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2.5px) scaleY(1.018)}}

.seat .cushion{display:block;width:clamp(78px,9.4vw,124px);height:clamp(20px,2.6vw,34px);
  border-radius:50%;margin-top:-13px;
  background:
    radial-gradient(58% 90% at 50% -12%,rgba(255,196,150,.26),transparent 52%),
    radial-gradient(72% 120% at 50% 8%,#8E3A26 0%,#6B2318 34%,#40100A 70%,#1E0603 100%);
  box-shadow:0 16px 28px -14px #000,
             inset 0 2px 2px rgba(255,206,170,.30),
             inset 0 -7px 14px rgba(0,0,0,.62),
             0 0 0 1px rgba(200,162,83,.22),0 0 30px rgba(200,162,83,.07)}

.seat .mark{position:absolute;bottom:40%;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;color:rgba(200,162,83,.42);
  animation:markPulse 3.6s ease-in-out infinite;pointer-events:none}
@keyframes markPulse{0%,100%{opacity:.3}50%{opacity:.8}}
.seat.empty .cushion{opacity:.55}

.seat.me .fig{filter:drop-shadow(0 0 16px rgba(255,200,120,.30)) drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.seat.me::after{content:"";position:absolute;left:50%;bottom:-18%;width:170%;height:130%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 66%,rgba(255,206,128,.26),transparent 70%)}

.fig.yield{animation:yieldSeat .64s cubic-bezier(.4,0,.7,1) forwards}
@keyframes yieldSeat{0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-18px) scale(.9)}}
.fig.sit-in{animation:sitIn 1s cubic-bezier(.16,.84,.34,1) both}
@keyframes sitIn{0%{opacity:0;transform:translateY(38px) scale(.7)}
  62%{opacity:1;transform:translateY(-5px) scale(1.06)}
  100%{opacity:1;transform:translateY(0) scale(1)}}

/* 木魚 */
.muyu-wrap{position:absolute;left:50%;bottom:clamp(46px,6.4vh,70px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;z-index:6;
  transition:left .8s cubic-bezier(.16,.84,.34,1),bottom .8s cubic-bezier(.16,.84,.34,1)}
.muyu{position:relative;background:none;border:0;padding:0;
  width:clamp(70px,7.8vw,92px);display:grid;place-items:center;
  cursor:not-allowed;-webkit-tap-highlight-color:transparent}
.muyu-art{display:block;width:100%;height:auto;transition:filter .5s,transform .3s}
.muyu-ring{position:absolute;left:50%;top:52%;width:78%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.5);border-radius:50%;
  border:1.5px solid rgba(255,206,130,.85);opacity:0;pointer-events:none}
.muyu.hit .muyu-art{animation:knockBody .36s cubic-bezier(.3,0,.4,1)}
.muyu.hit .muyu-ring{animation:knockRing .66s ease-out}
@keyframes knockBody{0%{transform:scale(1)}26%{transform:scale(1.08,.88)}64%{transform:scale(.97,1.05)}100%{transform:scale(1)}}
@keyframes knockRing{0%{opacity:.85;transform:translate(-50%,-50%) scale(.45)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
.muyu-wrap:not(.on) .muyu-art{filter:grayscale(.5) brightness(.6)}
.muyu-wrap.on .muyu{cursor:pointer}

/* 木槌：擱在木魚右上角，敲下去再彈回來 */
.muyu-stick{position:absolute;right:-16%;top:-54%;width:88%;pointer-events:none;z-index:2;
  transform-origin:87% 8%;transform:rotate(-20deg);
  filter:drop-shadow(0 9px 12px rgba(0,0,0,.62))}
.muyu-stick svg{display:block;width:100%;height:auto;overflow:visible}
.muyu-wrap:not(.on) .muyu-stick{filter:grayscale(.55) brightness(.58) drop-shadow(0 9px 12px rgba(0,0,0,.62))}
.muyu-wrap.hit .muyu-stick{animation:stickHit .46s cubic-bezier(.25,.8,.35,1)}
@keyframes stickHit{
  0%{transform:rotate(-20deg)}
  15%{transform:rotate(13deg)}
  31%{transform:rotate(-5deg)}
  50%{transform:rotate(1.5deg)}
  100%{transform:rotate(-20deg)}
}
@media(prefers-reduced-motion:reduce){.muyu-wrap.hit .muyu-stick{animation:none}}

.muyu-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.26em;
  color:rgba(247,242,232,.56);transition:color .5s}
.muyu-wrap.on .muyu-label{color:rgba(224,192,120,.85)}

.merit{position:absolute;left:50%;bottom:74%;transform:translateX(-50%);
  font-family:var(--sans);font-size:15px;letter-spacing:.16em;color:#FFE2AC;white-space:nowrap;
  text-shadow:0 0 16px rgba(255,190,100,.85);pointer-events:none;
  animation:meritUp 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes meritUp{
  0%{opacity:0;transform:translate(-50%,12px) scale(.86)}
  20%{opacity:1;transform:translate(-50%,-8px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-78px) scale(1)}
}

/* 提示 / 按鈕 */
.temple-hint{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:rgba(247,242,232,.58);
  white-space:nowrap;transition:color .45s;z-index:7}
.temple-hint.flash{color:var(--gold-2)}
.leave-btn{position:absolute;right:clamp(14px,3vw,34px);bottom:clamp(14px,3vh,26px);z-index:7;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:rgba(247,242,232,.5);
  background:none;border:1px solid rgba(200,162,83,.28);padding:9px 18px;border-radius:999px;
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .55s,color .3s,border-color .3s}
.leave-btn.on{opacity:1;pointer-events:auto}
.leave-btn:hover{color:var(--gold-2);border-color:rgba(200,162,83,.65)}
.sound-btn{position:absolute;left:clamp(14px,3vw,34px);bottom:clamp(14px,3vh,26px);z-index:7;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;color:rgba(247,242,232,.42);
  background:none;border:1px solid rgba(200,162,83,.2);padding:9px 16px;border-radius:999px;
  cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .3s,border-color .3s}
.sound-btn:hover{color:var(--gold-2);border-color:rgba(200,162,83,.55)}
.sound-btn i{width:5px;height:5px;border-radius:50%;background:rgba(247,242,232,.3);transition:background .3s,box-shadow .3s}
.sound-btn.on i{background:#FFC46B;box-shadow:0 0 8px 2px rgba(255,170,80,.7)}

@media(max-width:760px){
  .runway{height:160vh}
  .temple{height:calc(100vh - 72px);min-height:520px}
  .seats{bottom:26%;gap:1px}
  .temple-hint{font-size:11px;letter-spacing:.1em;white-space:normal;width:88%;text-align:center}
  .sound-btn,.leave-btn{padding:7px 13px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .smk,.flame,.embers circle,.seat .fig,.seat .mark{animation:none!important}
  .hall{transition:none}
}

/* 底部與下一屏柔和接合 */
.temple::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:5;
  background:linear-gradient(transparent 0%,rgba(8,6,5,.40) 55%,rgba(8,6,5,.92) 100%);pointer-events:none}
/* 光柱 */
.shaft{position:absolute;top:-8%;height:118%;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(255,220,166,.30),rgba(255,206,140,.09) 48%,transparent 80%);
  filter:blur(16px);transform-origin:50% 0}
.shaft.s1{left:13%;width:16%;transform:rotate(8deg)}
.shaft.s2{right:13%;width:16%;transform:rotate(-8deg)}
/* 電影調色：只在佛前加一層暖，四周壓暗 */
.temple::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(64% 48% at 50% 32%,rgba(255,186,102,.08),transparent 64%),
    linear-gradient(180deg,transparent 58%,rgba(6,4,2,.30) 100%)}
/* 浮塵 */
.mote{position:absolute;width:3px;height:3px;border-radius:50%;pointer-events:none;z-index:3;
  background:rgba(255,220,160,.85);box-shadow:0 0 7px 1.5px rgba(255,190,110,.45);
  opacity:0;animation:moteFloat linear infinite}
@keyframes moteFloat{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.8)}
  14%{opacity:.9}
  78%{opacity:.45}
  100%{opacity:0;transform:translate3d(18px,-140px,0) scale(1.1)}
}

/* 往下滾的提示 */
.scroll-cue{position:absolute;right:clamp(16px,3.2vw,38px);bottom:clamp(16px,3vh,30px);z-index:7;
  display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11px;letter-spacing:.2em;
  color:rgba(247,242,232,.34);pointer-events:none;transition:opacity .55s}
.scroll-cue i{position:relative;display:block;width:1px;height:28px;overflow:hidden;
  background:linear-gradient(rgba(200,162,83,.08),rgba(200,162,83,.45))}
.scroll-cue i::after{content:"";position:absolute;left:-1.5px;top:-10px;width:4px;height:10px;border-radius:2px;
  background:#E0C078;box-shadow:0 0 8px 1px rgba(224,192,120,.6);animation:cueDrop 1.9s ease-in-out infinite}
@keyframes cueDrop{0%{top:-10px;opacity:0}25%{opacity:1}100%{top:30px;opacity:0}}
.temple.seated .scroll-cue{opacity:0}

/* ---------- 進場淡入 ---------- */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.16,.84,.34,1),transform .85s cubic-bezier(.16,.84,.34,1)}
.rv-in{opacity:1;transform:none}

/* ---------- 手機 ---------- */
@media(max-width:720px){
  .runway{height:160vh}
  .temple{height:calc(100vh - 72px);height:calc(100dvh - 72px);min-height:480px}
  .seats{bottom:25%;gap:clamp(10px,4vw,30px)}
  .seat .fig{width:clamp(64px,17.5vw,96px)}
  .seat .cushion{width:clamp(76px,20vw,116px);height:clamp(18px,4.6vw,26px)}
  .seat .mark{font-size:12px;bottom:44%}
  .muyu{width:clamp(76px,19vw,104px)}
  .temple-hint{font-size:11.5px;letter-spacing:.1em;white-space:normal;width:86%;text-align:center;line-height:1.7}
  .scroll-cue{bottom:clamp(12px,2.6vh,24px);right:clamp(12px,4vw,24px)}
  .sound-btn,.leave-btn{padding:10px 16px;font-size:11px}
  /* 手機省電：關掉大面積濾鏡與光柱 */
  .hall-art [filter]{filter:none!important}
  .hall-art .buddha{filter:none!important}
}
@media(max-width:420px){
  .seat .fig{width:clamp(58px,16.5vw,80px)}
  .seat .cushion{width:clamp(70px,19vw,96px)}
}

.niche-glow{animation:nichePulse 7.5s ease-in-out infinite}
@keyframes nichePulse{0%,100%{opacity:.62}50%{opacity:.92}}
@media(prefers-reduced-motion:reduce){.niche-glow{animation:none}}

/* ========== 氣氛層：佛前灑下來的光 ========== */
.godray{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,214,156,.16) 0%,rgba(255,200,130,.085) 34%,
             rgba(255,190,118,.03) 66%,transparent 96%);
  clip-path:polygon(36% 50%,64% 50%,90% 104%,10% 104%);
  filter:blur(56px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 46%,transparent 92%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 46%,transparent 92%)}
.godray.core{background:linear-gradient(180deg,rgba(255,232,190,.13) 0%,rgba(255,214,150,.05) 40%,transparent 84%);
  clip-path:polygon(43% 52%,57% 52%,70% 100%,30% 100%);filter:blur(42px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,transparent 88%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 20%,transparent 88%)}
/* 光落在地上的一攤 */
.floorpool{position:absolute;left:50%;top:72%;width:86%;height:34%;transform:translateX(-50%);
  z-index:3;pointer-events:none;mix-blend-mode:screen;filter:blur(30px);
  background:radial-gradient(48% 48% at 50% 44%,rgba(255,200,132,.34),rgba(255,170,92,.12) 52%,transparent 78%)}
/* 香爐上方一團暖霧 */
.censerhaze{position:absolute;left:50%;top:56%;width:26%;height:22%;transform:translateX(-50%);
  z-index:3;pointer-events:none;mix-blend-mode:screen;filter:blur(20px);
  background:radial-gradient(50% 50% at 50% 60%,rgba(255,205,140,.13),transparent 70%);
  animation:hazeBreathe 9s ease-in-out infinite}
@keyframes hazeBreathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
/* 暗角再壓一層，讓佛龕更亮 */
.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(68% 62% at 50% 42%,transparent 46%,rgba(4,3,2,.34) 82%,rgba(3,2,1,.54) 100%)}
@media(prefers-reduced-motion:reduce){.censerhaze{animation:none}}

/* 木魚腳下的光，讓它不至於浮在虛空裡 */
.muyu-wrap::before{content:"";position:absolute;left:50%;top:52%;width:190%;height:120%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(46% 46% at 50% 50%,rgba(255,196,124,.14),transparent 72%);
  filter:blur(18px);mix-blend-mode:screen}
/* 地板透視：讓下半部不是一片黑 */
.floorgrid{position:absolute;left:0;right:0;top:56%;height:44%;z-index:3;pointer-events:none;filter:blur(.6px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 16%,#000 46%,rgba(0,0,0,.72) 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 16%,#000 46%,rgba(0,0,0,.72) 100%)}
/* 貼地的暖霧，把下半部托起來 */
.floorhaze{position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;z-index:3;pointer-events:none;
  mix-blend-mode:screen;filter:blur(46px);
  background:radial-gradient(62% 62% at 50% 76%,rgba(224,158,92,.26),rgba(186,124,66,.10) 54%,transparent 78%);
  animation:floorDrift 14s ease-in-out infinite}
@keyframes floorDrift{0%,100%{transform:translateX(-1.2%) scaleY(1)}50%{transform:translateX(1.2%) scaleY(1.06)}}
@media(prefers-reduced-motion:reduce){.floorhaze{animation:none}}
@media(prefers-reduced-motion:reduce){.muyu-wrap::before{filter:none}}

/* ===========================================================
   部落格 / 專欄
   =========================================================== */
.blogwrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* 封面（不用圖，用漸層 + 大字，載入零成本） */
.cov{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 18% 12%,var(--c1),var(--c2) 58%,#0B0908 100%);
  isolation:isolate}
.cov::before{content:attr(data-g);position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  z-index:0;font-family:var(--serif);font-size:clamp(84px,11vw,148px);line-height:1;font-weight:500;
  color:rgba(255,246,232,.13);letter-spacing:.06em;text-indent:.06em;pointer-events:none;
  text-shadow:0 0 60px rgba(255,220,170,.10)}
.cov::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.50) 100%),
             radial-gradient(58% 48% at 34% 16%,rgba(255,224,176,.16),transparent 68%);
  box-shadow:inset 0 0 0 1px rgba(255,240,220,.09)}
.cov .tagline{position:absolute;left:clamp(18px,2.4vw,30px);bottom:clamp(16px,2.2vw,26px);z-index:2;
  font-family:var(--sans);font-size:11px;letter-spacing:.34em;color:rgba(255,246,232,.66)}

/* 精選 */
.feat{display:grid;grid-template-columns:1.1fr 1fr;background:#141110;color:var(--paper);
  border:1px solid rgba(23,19,16,.16);overflow:hidden;margin-bottom:clamp(48px,7vw,84px);
  transition:transform .5s cubic-bezier(.16,.84,.34,1),box-shadow .5s}
.feat:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(23,19,16,.7)}
.feat .cov{min-height:clamp(240px,32vw,380px)}
.feat .body{padding:clamp(26px,3.6vw,54px);display:flex;flex-direction:column;justify-content:center}
.feat .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.3em;color:var(--gold-2);margin-bottom:20px}
.feat h2{font-size:clamp(21px,2.5vw,31px);font-weight:500;line-height:1.65;letter-spacing:.05em;margin-bottom:18px}
.feat p{font-size:14.5px;line-height:2.05;color:rgba(247,242,232,.62);letter-spacing:.03em;margin-bottom:26px}
.feat .more{font-family:var(--sans);font-size:12px;letter-spacing:.24em;color:var(--gold);
  display:inline-flex;align-items:center;gap:10px;transition:gap .35s}
.feat:hover .more{gap:18px}

/* 篩選 */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px;
  padding-bottom:26px;border-bottom:1px solid rgba(23,19,16,.1)}
.filters button{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;color:var(--ink-3);
  background:none;border:1px solid rgba(23,19,16,.16);border-radius:999px;padding:8px 18px;
  cursor:pointer;transition:.3s;-webkit-tap-highlight-color:transparent}
.filters button:hover{border-color:rgba(166,43,31,.45);color:var(--vermilion)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* 文章卡 */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.post{display:flex;flex-direction:column;background:var(--paper-2);
  border:1px solid rgba(23,19,16,.10);overflow:hidden;
  transition:transform .45s cubic-bezier(.16,.84,.34,1),box-shadow .45s,border-color .45s}
.post:hover{transform:translateY(-4px);border-color:rgba(166,43,31,.3);
  box-shadow:0 22px 44px -30px rgba(23,19,16,.6)}
.post .cov{height:clamp(130px,13vw,168px)}
.post .txt{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.post .cat{font-family:var(--sans);font-size:10.5px;letter-spacing:.26em;color:var(--vermilion);margin-bottom:12px}
.post h3{font-size:16.5px;font-weight:500;line-height:1.7;letter-spacing:.04em;margin-bottom:12px}
.post p{font-size:13.5px;line-height:1.95;color:var(--ink-3);letter-spacing:.02em;flex:1}
.post .d{margin-top:18px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:rgba(74,64,56,.7)}
.post[hidden]{display:none}

/* 底部 CTA */
.blogcta{margin-top:clamp(60px,9vw,110px);padding:clamp(40px,6vw,72px) clamp(24px,4vw,60px);
  background:#141110;color:var(--paper);text-align:center;position:relative;overflow:hidden}
.blogcta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 0%,rgba(200,162,83,.14),transparent 68%)}
.blogcta h3{position:relative;font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:.16em;margin-bottom:14px}
.blogcta p{position:relative;font-size:14px;color:rgba(247,242,232,.6);margin-bottom:30px;letter-spacing:.06em}
.blogcta .btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.blogcta a{font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;padding:14px 30px;border-radius:2px;
  transition:.35s}
.blogcta a.p{background:var(--vermilion);color:#fff}
.blogcta a.p:hover{background:var(--vermilion-2)}
.blogcta a.s{border:1px solid rgba(200,162,83,.5);color:var(--gold-2)}
.blogcta a.s:hover{border-color:var(--gold);background:rgba(200,162,83,.1)}

@media(max-width:980px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1fr}
  .feat .cov{min-height:220px}
}
@media(max-width:620px){
  .posts{grid-template-columns:1fr}
  .blogwrap{padding:0 20px}
  .post .cov{height:150px}
}
@media(prefers-reduced-motion:reduce){
  .feat,.post{transition:none}
}

/* ---------- 燭火（兩支錯相，不規則抖動） ---------- */
.fl{transform-box:fill-box;transform-origin:50% 94%;
  animation:candleFlicker 3.6s ease-in-out infinite}
.fl.b{animation-duration:4.2s;animation-delay:-1.9s}
@keyframes candleFlicker{
  0%,100%{transform:scale(1,1) translateX(0);opacity:1}
  16%{transform:scale(.93,1.07) translateX(-.5px);opacity:.9}
  31%{transform:scale(1.06,.94) translateX(.6px);opacity:1}
  48%{transform:scale(.97,1.03) translateX(-.3px);opacity:.95}
  67%{transform:scale(1.04,.96) translateX(.8px);opacity:1}
  84%{transform:scale(.94,1.06) translateX(-.6px);opacity:.88}
}
@media(prefers-reduced-motion:reduce){.fl{animation:none}}

/* ---------- 燈籠輕晃 ---------- */
.lan{transform-box:fill-box;transform-origin:50% 0;
  animation:lanSway 7.2s ease-in-out infinite}
.lan:last-of-type{animation-duration:8.4s;animation-delay:-2.6s}
@keyframes lanSway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
@media(prefers-reduced-motion:reduce){.lan{animation:none}}

/* ---------- 膠片顆粒（消掉向量感的關鍵） ---------- */
.grain{position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
@media(max-width:720px){.grain{opacity:.055}}

/* 作者署名（E-E-A-T：讓 Google 與讀者知道是誰寫的） */
.article .meta .byline{color:var(--ink-2);border-bottom:1px solid rgba(166,43,31,.25);letter-spacing:.14em}
.article .meta .byline:hover{color:var(--vermilion);border-bottom-color:var(--vermilion)}
.article .meta time{color:var(--ink-3)}
/* 編輯原則區塊（about.html#editorial） */
.editorial{border-top:1px solid rgba(23,19,16,.12);margin-top:56px;padding-top:8px}
.editorial dl{margin:0}
.editorial dt{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--gold);margin-top:26px}
.editorial dd{margin:8px 0 0;font-size:16px;line-height:2;color:var(--ink-2)}

