/* =========================================================
   小掌櫃首頁・帳本版
   設計語言：報紙版面 × 老店帳本 × 掌櫃的紅筆批註
   ========================================================= */
:root{
  --paper:#F4EEE2; --paper-2:#ECE3D1; --paper-3:#E4D8C1; --card:#FBF8F1;
  --ink:#1A2430; --ink-2:#48525C; --ink-3:#877F70;
  --rule:#CDBFA5; --rule-soft:#DDD2BD;
  --navy:#16395C; --navy-deep:#0E2740; --night:#0B1B2D;
  --seal:#B3302A; --seal-soft:rgba(179,48,42,.10);
  --orange:#E8833A; --orange-deep:#C4661F;
  --gold:#D9A441;
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --hand:"LXGW WenKai TC","Kaiti TC","BiauKai","DFKai-SB",serif;
  --num:"Fraunces","Noto Serif TC",Georgia,serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
.nb{white-space:nowrap;}
body{
  font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.8;letter-spacing:.02em;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.num{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;font-optical-sizing:auto;}
.hand{font-family:var(--hand);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
::selection{background:var(--seal);color:#fff;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:3px;}

/* ---------- 報頭 ---------- */
.dateline{border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink-3);letter-spacing:.12em;}
.dateline .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:9px;padding-bottom:9px;}
.dateline b{color:var(--ink);font-weight:700;}
.dateline .open{display:inline-flex;align-items:center;gap:7px;}
.dateline .open i{width:7px;height:7px;border-radius:50%;background:#2EA05A;box-shadow:0 0 0 3px rgba(46,160,90,.18);}

.mast{position:sticky;top:0;z-index:50;background:rgba(244,238,226,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px double var(--ink);}
.mast .wrap{display:flex;align-items:center;gap:28px;height:74px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none;}
/* logo 照原圖的圓角方形，不裁圓、不加框 */
.logo img{width:48px;height:48px;border-radius:12%;}
.logo .lg{font-size:20px;font-weight:900;color:var(--navy);line-height:1.05;letter-spacing:0;}
.logo .lg span{color:var(--orange);}
.logo .lg small{display:block;font-size:11px;letter-spacing:.42em;color:var(--ink-2);font-weight:700;margin-top:3px;}
.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{text-decoration:none;font-size:15px;font-weight:700;color:var(--ink-2);padding:8px 12px;border-radius:6px;position:relative;}
.nav a:hover{color:var(--ink);}
.nav a.on{color:var(--ink);}
.nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--seal);}
.btn-line-s{flex:none;text-decoration:none;background:var(--ink);color:var(--paper);font-weight:800;font-size:14.5px;padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;}
.btn-line-s i{width:8px;height:8px;border-radius:50%;background:#06C755;}
.btn-line-s:hover{background:var(--navy);}
.menu-btn{display:none;}

/* ---------- 通用：版面格線與頁標 ---------- */
.sec{padding:110px 0;position:relative;}
.sec-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 48px;}
.mark{position:relative;border-right:1px solid var(--rule);padding-right:28px;}
.mark-in{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.mark .no{font-family:var(--serif);font-weight:900;font-size:15px;color:#fff;background:var(--seal);width:34px;height:34px;display:grid;place-items:center;border-radius:4px;}
.mark .nm{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.5em;color:var(--ink);}
.kick{font-size:13px;letter-spacing:.3em;color:var(--seal);font-weight:900;margin-bottom:16px;display:block;}
.h2{font-family:var(--serif);font-weight:900;font-size:clamp(30px,4.1vw,50px);line-height:1.28;letter-spacing:.02em;color:var(--ink);text-wrap:balance;}
.lede{font-size:18px;color:var(--ink-2);max-width:40em;margin-top:18px;}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;font-size:16px;}
.more:hover{color:var(--seal);border-color:var(--seal);}
.more svg{transition:transform .2s;}
.more:hover svg{transform:translateX(4px);}

/* 手寫批註 */
.note{font-family:var(--hand);color:var(--seal);font-size:21px;line-height:1.45;font-weight:700;}
.draw path{stroke-dasharray:var(--len,600);stroke-dashoffset:0;}
.js .draw path{stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1) .2s;}
.js .draw.in path{stroke-dashoffset:0;}

/* ---------- 01 首屏 ---------- */
.hero{padding:70px 0 96px;position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:40px;align-items:center;}
.hero-eyebrow{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700;color:var(--ink-2);letter-spacing:.24em;}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";height:1px;background:var(--ink);flex:0 0 36px;}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(54px,7.2vw,100px);line-height:1.08;letter-spacing:.01em;margin:26px 0 30px;color:var(--ink);}
.hero h1 .l2{display:block;padding-left:.7em;white-space:nowrap;}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap;}
.hero h1 em svg{position:absolute;left:-4%;bottom:-.06em;width:108%;height:.34em;overflow:visible;}
.hero .sub{font-size:19px;line-height:1.9;color:var(--ink-2);max-width:31em;}
.hero .sub b{color:var(--ink);font-weight:700;}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px;}
.btn-p{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;text-decoration:none;font-weight:900;font-size:17.5px;padding:17px 28px;border-radius:12px;box-shadow:0 1px 0 var(--orange-deep),0 12px 26px -10px rgba(196,102,31,.7);transition:transform .15s,box-shadow .15s;}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 1px 0 var(--orange-deep),0 18px 30px -10px rgba(196,102,31,.75);}
.btn-p i{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);}
.live{margin-top:38px;display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--rule);padding-top:18px;max-width:34em;}
.live .clock{font-family:var(--num);font-weight:600;font-size:30px;line-height:1;color:var(--ink);flex:none;letter-spacing:0;}
.live p{font-size:15px;color:var(--ink-2);line-height:1.7;}
.live p b{color:var(--ink);}
.perks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:14px;color:var(--ink-2);font-weight:700;}
.perks span{display:inline-flex;align-items:center;gap:8px;}
.perks span::before{content:"";width:9px;height:9px;background:var(--seal);transform:rotate(45deg);}

.stage{position:relative;display:flex;justify-content:center;padding:10px 0 20px;}
.ghost-time{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);font-family:var(--num);font-weight:800;font-size:clamp(150px,19vw,260px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(26,36,48,.13);letter-spacing:-.02em;pointer-events:none;white-space:nowrap;user-select:none;}
.phone{position:relative;z-index:2;width:318px;background:#0F1620;border-radius:46px;padding:11px;box-shadow:0 2px 0 #2a3441 inset,0 40px 70px -30px rgba(14,39,64,.55),0 18px 30px -18px rgba(0,0,0,.4);transform:rotate(2.2deg);}
.screen{border-radius:36px;overflow:hidden;background:#9FB6D3;height:600px;display:flex;flex-direction:column;}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:12px 26px 6px;font-size:13px;font-weight:700;color:#0F1620;background:#F4F6F9;}
.sbar .num{font-weight:600;font-size:14px;}
.sbar .isl{width:84px;height:24px;border-radius:14px;background:#0F1620;}
.chead{background:#F4F6F9;padding:6px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #dfe4ea;}
.chead .bk{font-size:22px;color:#333;line-height:1;}
.chead img{width:30px;height:30px;border-radius:12%;}
.chead b{font-size:14px;color:#1b1f24;line-height:1.2;display:block;}
.chead small{font-size:11px;color:#6b7380;letter-spacing:0;}
.chat{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;justify-content:flex-end;}
.msg{max-width:82%;font-size:13.5px;line-height:1.6;padding:9px 12px;border-radius:17px;letter-spacing:.01em;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;}
.msg.show{opacity:1;transform:none;}
.msg .who{display:block;font-size:10.5px;font-weight:700;margin-bottom:2px;opacity:.6;}
.msg.them{background:#fff;color:#1b1f24;align-self:flex-start;border-top-left-radius:5px;}
.msg.us{background:#8FDE69;color:#10240A;align-self:flex-end;border-top-right-radius:5px;}
.typing{align-self:flex-end;background:#8FDE69;border-radius:17px;border-top-right-radius:5px;padding:11px 14px;display:none;gap:4px;}
.typing.show{display:flex;}
.typing i{width:7px;height:7px;border-radius:50%;background:#2d5a18;opacity:.4;animation:tp 1s infinite;}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,100%{opacity:.25;transform:none}50%{opacity:.8;transform:translateY(-3px)}}
.ibar{background:#F4F6F9;padding:10px 14px 18px;display:flex;gap:8px;align-items:center;}
.ibar span{flex:1;background:#fff;border-radius:18px;height:34px;border:1px solid #dfe4ea;}
.ibar i{width:30px;height:30px;border-radius:50%;background:#dfe4ea;}
.anno{position:absolute;z-index:3;}
.anno.a1{left:calc(50% - 159px - 172px);top:-6px;display:flex;align-items:flex-start;gap:4px;white-space:nowrap;}
.anno.a2{left:calc(50% + 150px);bottom:40px;width:170px;}
.anno svg{display:block;overflow:visible;}

/* ---------- 02 本店告示 ---------- */
.board{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.board .wrap{display:grid;grid-template-columns:120px repeat(3,minmax(0,1fr));}
.board .bt{border-right:1px solid var(--rule);padding:26px 22px 26px 0;display:flex;align-items:center;justify-content:flex-end;}
.board .bt span{writing-mode:vertical-rl;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.4em;}
.post{padding:26px 26px;border-right:1px solid var(--rule-soft);}
.post:last-child{border-right:0;}
.post time{font-family:var(--num);font-size:14px;font-weight:600;color:var(--seal);letter-spacing:.06em;}
.post time.now{font-family:var(--sans);font-weight:900;letter-spacing:.2em;}
.post h3{font-family:var(--serif);font-size:19px;font-weight:900;margin:6px 0 6px;line-height:1.45;}
.post p{font-size:14.5px;color:var(--ink-2);line-height:1.75;}
.post a{display:inline-block;margin-top:8px;font-size:14px;font-weight:800;text-decoration:none;border-bottom:1px solid;}
.post a:hover{color:var(--seal);}

/* ---------- 03 帳本 ---------- */
.ledger-sec{background:var(--paper-2);}
.ledger-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;}
.ledger{margin-top:54px;background:var(--card);border:1px solid var(--rule);position:relative;
  background-image:repeating-linear-gradient(180deg,transparent 0 55px,rgba(179,48,42,.0) 55px);}
.ledger::before{content:"";position:absolute;top:0;bottom:0;left:132px;width:0;border-left:1px solid rgba(179,48,42,.35);border-right:1px solid rgba(179,48,42,.35);padding-left:3px;}
.lrow{display:grid;grid-template-columns:132px minmax(0,1fr) 270px;border-bottom:1px solid var(--rule-soft);align-items:stretch;}
.lrow>*{padding:22px 24px;}
.lrow.th{background:var(--paper-3);border-bottom:1px solid var(--rule);}
.lrow.th>*{padding:11px 24px;font-size:12.5px;font-weight:900;letter-spacing:.3em;color:var(--ink-2);}
.lrow .t{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);line-height:1.5;}
.lrow .t .num{display:block;font-size:22px;font-weight:600;}
.lrow .q{font-family:var(--serif);font-size:18.5px;font-weight:500;line-height:1.75;color:var(--ink);}
.lrow .loss{border-left:1px solid var(--rule-soft);font-family:var(--hand);font-weight:700;color:var(--seal);font-size:19px;line-height:1.5;display:flex;align-items:center;gap:10px;position:relative;}
.lrow .loss::before{content:"漏";font-family:var(--serif);font-size:13px;line-height:1.5;font-weight:900;color:#fff;background:var(--seal);border-radius:3px;padding:1px 6px;flex:none;}
.lrow.total{border-bottom:0;border-top:3px double var(--ink);background:var(--card);}
.lrow.total .t{font-weight:900;letter-spacing:.3em;}
.lrow.total .q{font-weight:900;font-size:20px;}
.lrow.total .loss{color:var(--ink);font-family:var(--serif);font-size:16px;}
.lrow.total .loss::before{content:"補";background:var(--navy);}
.circle{position:absolute;left:12px;right:6px;top:8px;bottom:8px;pointer-events:none;}
.circle svg{width:100%;height:100%;overflow:visible;}

/* ---------- 04 實測（夜） ---------- */
.night{background:var(--night);color:#E9E3D6;position:relative;overflow:hidden;overflow:clip;}
.night::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 78% 10%,rgba(232,131,58,.10),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(22,57,92,.6),transparent 60%);pointer-events:none;}
.night .mark{border-color:rgba(233,227,214,.18);}
.night .mark .nm,.night .h2{color:#F4EEE2;}
.night .kick{color:var(--gold);}
.night .lede{color:#B9B3A6;}
.nwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center;margin-top:56px;}
.dial{position:relative;max-width:420px;margin:0 auto;}
.dial svg{width:100%;height:auto;display:block;overflow:visible;}
.dial .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.dial .c .big{font-family:var(--num);font-weight:800;font-size:clamp(56px,7vw,84px);line-height:1;color:#fff;letter-spacing:-.02em;}
.dial .c .big small{font-size:.45em;font-weight:600;margin-left:2px;}
.dial .c p{font-size:14px;color:#B9B3A6;margin-top:8px;line-height:1.6;}
.dial .c p b{color:var(--orange);}
.stats{border-top:1px solid rgba(233,227,214,.25);}
.st{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid rgba(233,227,214,.14);}
.st .lab{font-size:16px;color:#CFC8BA;}
.st .lab small{display:block;font-size:12.5px;color:#8C8677;letter-spacing:.05em;}
.st .v{font-family:var(--num);font-weight:600;font-size:clamp(34px,4vw,48px);line-height:1;color:#fff;letter-spacing:-.01em;text-align:right;}
.st .v small{font-family:var(--sans);font-size:15px;font-weight:700;color:#B9B3A6;margin-left:6px;letter-spacing:0;}
.st.hl .v{color:var(--orange);}
.pull{margin-top:34px;font-family:var(--serif);font-weight:700;font-size:clamp(21px,2.3vw,27px);line-height:1.6;color:#F4EEE2;border-left:3px solid var(--orange);padding-left:22px;}
.pull span{display:block;font-family:var(--sans);font-weight:400;font-size:16px;color:#B9B3A6;margin-top:10px;line-height:1.8;}
.src{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:13.5px;color:#8C8677;}
.night .more{color:#F4EEE2;border-color:#F4EEE2;}
.night .more:hover{color:var(--orange);border-color:var(--orange);}

/* ---------- 05 來歷 ---------- */
.origin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:start;}
.vhead{writing-mode:vertical-rl;font-family:var(--serif);font-weight:900;font-size:clamp(38px,4vw,52px);line-height:1.55;letter-spacing:.12em;color:var(--ink);height:max-content;}
.vhead em{font-style:normal;color:var(--seal);}
.entries{border-top:1px solid var(--ink);}
.entry{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;padding:30px 0;border-bottom:1px solid var(--rule);}
.entry .n{font-family:var(--serif);font-weight:900;font-size:40px;line-height:1;color:var(--seal);}
.entry h3{font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.45;margin-bottom:10px;}
.entry p{color:var(--ink-2);font-size:16.5px;}
.sum{margin-top:30px;font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.7;}
.sum mark{background:linear-gradient(transparent 58%,rgba(232,131,58,.35) 58%);color:inherit;padding:0 2px;}

/* ---------- 06 兩條路 ---------- */
.fork{display:grid;grid-template-columns:1fr 1fr;border-top:3px double var(--ink);border-bottom:3px double var(--ink);}
.path{padding:64px 56px 58px;text-decoration:none;position:relative;display:flex;flex-direction:column;gap:12px;transition:background .25s;}
.path.a{background:var(--navy-deep);color:#F4EEE2;}
.path.b{background:var(--card);color:var(--ink);border-left:1px solid var(--ink);}
.path .tag{font-size:13px;font-weight:900;letter-spacing:.3em;color:var(--gold);}
.path.b .tag{color:var(--seal);}
.path h3{font-family:var(--serif);font-weight:900;font-size:clamp(34px,4vw,52px);line-height:1.2;}
.path p{font-size:17px;opacity:.85;max-width:24em;}
.path .pr{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;gap:10px;}
.path .pr .num{font-size:52px;font-weight:600;line-height:1;}
.path .pr small{font-size:15px;opacity:.8;font-weight:700;}
.path .go{position:absolute;right:48px;bottom:56px;width:58px;height:58px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .25s,background .25s,color .25s;}
.path.a:hover{background:#12304F;}
.path.b:hover{background:#fff;}
.path:hover .go{transform:rotate(-45deg);}
.path.a:hover .go{background:#F4EEE2;color:var(--navy-deep);}
.path.b:hover .go{background:var(--ink);color:var(--card);}

/* ---------- 07 價目牌 ---------- */
.menu{margin-top:54px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--ink);background:var(--card);position:relative;}
.tier{padding:34px 30px 30px;border-right:1px solid var(--rule);display:flex;flex-direction:column;position:relative;}
.tier:last-child{border-right:0;}
.tier.hot{background:#fff;box-shadow:inset 0 0 0 2px var(--navy);}
.tier .nm{font-family:var(--serif);font-size:25px;font-weight:900;}
.tier .for{font-size:14.5px;color:var(--ink-2);margin-top:2px;}
.tier .price{margin:22px 0 4px;display:flex;align-items:baseline;gap:6px;border-top:1px solid var(--rule);padding-top:20px;}
.tier .price .num{font-size:50px;font-weight:600;line-height:1;letter-spacing:-.01em;}
.tier .price small{font-size:15px;font-weight:700;color:var(--ink-2);}
.tier .setup{font-size:13px;color:var(--ink-3);}
.feat{list-style:none;margin-top:22px;border-top:1px dashed var(--rule);}
.feat li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px dashed var(--rule-soft);font-size:15px;line-height:1.55;}
.feat li::before{content:"●";color:var(--navy);font-size:11px;padding-top:4px;text-align:center;}
.feat li.off{color:#B3AA99;}
.feat li.off::before{content:"—";color:#C9BFAE;font-size:13px;padding-top:0;}
.feat li.add{font-weight:700;}
.feat li.add::before{content:"＋";color:var(--seal);font-size:14px;font-weight:900;padding-top:0;}
.stamp{position:absolute;top:-22px;right:22px;width:84px;height:84px;border:2.5px solid var(--seal);color:var(--seal);border-radius:50%;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.25;letter-spacing:.1em;transform:rotate(-14deg);background:rgba(251,248,241,.88);box-shadow:inset 0 0 0 4px rgba(251,248,241,.9),inset 0 0 0 5.5px var(--seal);}
.menu-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;margin-top:30px;}
.seed{position:relative;background:#FFFDF8;border:1px solid var(--rule);padding:22px 26px 20px 26px;transform:rotate(-.6deg);box-shadow:0 14px 26px -18px rgba(26,36,48,.45);max-width:640px;}
.seed::before{content:"";position:absolute;top:-10px;left:36px;width:92px;height:22px;background:rgba(217,164,65,.38);transform:rotate(-3deg);}
.seed .note{font-size:24px;}
.seed p{font-size:15px;color:var(--ink-2);margin-top:6px;}
.seed p b{color:var(--ink);}
.links-col{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}

/* ---------- 08 書架 ---------- */
.armory{background:var(--paper-2);}
.shelf-wrap{margin-top:60px;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:40px;align-items:end;}
.shelf{position:relative;display:flex;align-items:flex-end;gap:10px;padding:0 18px;min-height:360px;}
.shelf::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;background:linear-gradient(180deg,#8A6A45,#6E5235);border-radius:2px;box-shadow:0 14px 20px -10px rgba(60,40,20,.5);}
.spine{--c:#1D3D60;--h:320px;--w:86px;flex:1 1 var(--w);max-width:var(--w);height:var(--h);text-decoration:none;position:relative;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.07) 18%,rgba(0,0,0,0) 42%,rgba(0,0,0,.18)),var(--c);
  border-radius:3px 3px 1px 1px;color:#F4EEE2;transition:transform .3s cubic-bezier(.3,.7,.3,1.2),box-shadow .3s;box-shadow:0 2px 0 rgba(0,0,0,.25);}
.spine::before,.spine::after{content:"";position:absolute;left:10px;right:10px;height:0;border-top:1px dashed rgba(244,238,226,.4);}
.spine::before{top:14px}.spine::after{bottom:14px}
.spine .lbl{margin-top:30px;background:#F1E9D8;color:var(--ink);border:1px solid rgba(0,0,0,.2);padding:14px 7px;writing-mode:vertical-rl;font-family:var(--serif);font-weight:900;font-size:17px;letter-spacing:.24em;box-shadow:inset 0 0 0 3px #F1E9D8,inset 0 0 0 4px rgba(26,36,48,.35);}
.spine .sub{display:none;}
.spine .seal-s{margin-top:auto;}
.spine .bands{width:100%;height:18px;margin:0 0 16px;border-top:2px solid rgba(217,164,65,.7);border-bottom:2px solid rgba(217,164,65,.7);}
.spine .seal-s{width:22px;height:22px;background:var(--seal);color:#fff;font-family:var(--serif);font-weight:900;font-size:12px;display:grid;place-items:center;border-radius:2px;margin-bottom:28px;}
.spine .tagp{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);white-space:nowrap;background:var(--ink);color:var(--paper);font-size:13px;font-weight:800;padding:6px 10px;border-radius:6px;opacity:0;transition:.2s;pointer-events:none;}
.spine .tagp::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--ink);}
.spine:hover,.spine:focus-visible{transform:translateY(-22px);box-shadow:0 26px 30px -16px rgba(0,0,0,.5);}
.spine:hover .tagp,.spine:focus-visible .tagp{opacity:1;transform:translateX(-50%);}
.spine.new .lbl::after{content:"新";position:absolute;}
.newdot{position:absolute;top:-12px;right:-10px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:900;padding:3px 7px;border-radius:999px;writing-mode:horizontal-tb;letter-spacing:.1em;}
.swipe{display:none;}
.plist{margin-top:44px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;padding:0 18px;}
.plist div{text-align:center;font-size:13px;color:var(--ink-2);line-height:1.4;}
.plist .num{display:block;font-size:20px;font-weight:600;color:var(--ink);}
.plist s{color:var(--ink-3);font-size:12px;}
.bundle{background:var(--navy-deep);color:#F4EEE2;padding:30px 28px;position:relative;border-radius:4px;}
.bundle{border-top:6px solid var(--seal);}
.bundle-in{position:relative;z-index:2;background:var(--navy-deep);padding:6px 0;}
.bundle .t{font-size:13px;letter-spacing:.28em;color:var(--gold);font-weight:900;}
.bundle h3{font-family:var(--serif);font-size:34px;font-weight:900;margin:4px 0 8px;}
.bundle p{font-size:14px;color:#C5BFB2;line-height:1.7;}
.bundle .pr{margin-top:16px;display:flex;align-items:baseline;gap:10px;}
.bundle .pr .num{font-size:40px;font-weight:600;line-height:1;color:#fff;}
.bundle .pr s{color:#8C8677;font-size:16px;font-family:var(--num);}
.bundle .buy{margin-top:18px;display:block;text-align:center;background:var(--orange);color:#fff;font-weight:900;text-decoration:none;padding:13px;border-radius:10px;}
.bundle .buy:hover{background:var(--orange-deep);}
.promise{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--serif);font-weight:700;font-size:16px;align-items:center;}
.promise span{display:inline-flex;align-items:center;gap:10px;}
.promise i{font-style:normal;width:26px;height:26px;border:1.5px solid var(--seal);color:var(--seal);display:grid;place-items:center;font-size:13px;font-weight:900;border-radius:3px;}

/* ---------- 09 先講清楚 ---------- */
.dodont{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.dd{padding:30px 34px 26px 0;}
.dd+.dd{padding:30px 0 26px 34px;border-left:1px solid var(--rule);}
.dd h3{font-family:var(--serif);font-size:22px;font-weight:900;display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dd h3 .mk{font-family:var(--hand);font-size:34px;line-height:1;color:var(--seal);}
.dd ul{list-style:none;}
.dd li{padding:11px 0;border-bottom:1px dashed var(--rule);font-size:16.5px;display:grid;grid-template-columns:28px minmax(0,1fr);}
.dd li:last-child{border-bottom:0;}
.dd li::before{font-family:var(--hand);font-weight:700;color:var(--seal);font-size:20px;line-height:1.35;}
.dd.yes li::before{content:"○";}
.dd.no li::before{content:"✕";color:var(--ink-3);}
.dd li b{font-weight:700;}
.nope{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start;background:var(--card);border:1px solid var(--rule);padding:30px 34px;}
.nope h3{font-family:var(--serif);font-size:22px;font-weight:900;line-height:1.5;}
.nope p{color:var(--ink-2);font-size:15.5px;margin-top:10px;}
.nope p b{color:var(--seal);}
.nope ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;}
.nope li{padding:12px 0 12px 26px;border-bottom:1px solid var(--rule-soft);font-weight:700;font-size:16px;position:relative;}
.nope li::before{content:"✕";position:absolute;left:2px;top:11px;font-family:var(--hand);color:var(--seal);font-weight:700;}
.nope li.ask::before{content:none;}
.nope .ask{grid-column:1/-1;font-size:14.5px;color:var(--ink-2);font-weight:400;border:0;padding:14px 0 0;}

.deed{margin:70px auto 0;max-width:860px;background:#FFFDF7;border:1px solid var(--rule);padding:60px 64px 54px;position:relative;box-shadow:0 30px 50px -36px rgba(26,36,48,.45);
  background-image:linear-gradient(90deg,transparent 42px,rgba(179,48,42,.28) 42px,rgba(179,48,42,.28) 43px,transparent 43px),repeating-linear-gradient(180deg,transparent 0 37px,rgba(26,36,48,.07) 37px 38px);}
.deed h3{font-family:var(--serif);font-size:40px;font-weight:900;letter-spacing:.5em;text-align:center;padding-left:.5em;}
.deed .dsub{text-align:center;color:var(--ink-2);font-size:15px;margin:6px 0 30px;}
.deed ol{list-style:none;counter-reset:d;}
.deed li{counter-increment:d;display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:16px 0;border-top:1px solid var(--rule-soft);}
.deed li::before{content:counter(d,cjk-ideographic);font-family:var(--serif);font-weight:900;font-size:26px;color:var(--seal);line-height:1.3;}
.deed li b{font-family:var(--serif);font-size:19px;display:block;margin-bottom:2px;}
.deed li span{color:var(--ink-2);font-size:15.5px;}
.deed li span em{font-style:normal;color:var(--ink);font-weight:700;background:linear-gradient(transparent 60%,rgba(232,131,58,.28) 60%);}
.sign{display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:26px;}
.sign .by{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:.6em;}
.chop{width:88px;height:88px;background:var(--seal);color:#FBEDE6;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;font-family:var(--serif);font-weight:900;font-size:28px;line-height:1;place-items:center;padding:8px;border-radius:5px;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 3px var(--seal),inset 0 0 0 5px #FBEDE6;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='88' height='88' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='88' height='88' filter='url(%23r)'/%3E%3C/svg%3E");}
.chop span:nth-child(1){grid-area:1/2}.chop span:nth-child(2){grid-area:2/2}.chop span:nth-child(3){grid-area:1/1}.chop span:nth-child(4){grid-area:2/1}
.js .chop{opacity:0;transform:rotate(-4deg) scale(1.6);transition:opacity .15s,transform .35s cubic-bezier(.5,1.6,.5,1);}
.js .chop.in{opacity:.94;transform:rotate(-4deg) scale(1);}

/* ---------- 10 問答 ---------- */
.qa{margin-top:44px;border-top:1px solid var(--ink);}
.qa details{border-bottom:1px solid var(--rule);}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:12px;align-items:center;padding:24px 0;font-family:var(--serif);font-weight:900;font-size:20px;line-height:1.5;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .q{width:34px;height:34px;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:15px;border-radius:50%;}
.qa summary .pm{width:30px;height:30px;position:relative;}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;left:7px;right:7px;top:14px;height:2px;background:var(--ink);transition:transform .25s;}
.qa summary .pm::after{transform:rotate(90deg);}
.qa details[open] summary .pm::after{transform:rotate(0);}
.qa summary:hover{color:var(--seal);}
.qa .a{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:12px;padding:0 0 26px;}
.qa .a::before{content:"答";width:34px;height:34px;background:var(--seal);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:15px;border-radius:50%;}
.qa .a p{font-size:16.5px;color:var(--ink-2);line-height:1.85;}
.qa .a b{color:var(--ink);}

/* ---------- 11 收尾 ---------- */
.close{background:var(--navy-deep);color:#F4EEE2;position:relative;overflow:hidden;padding:100px 0 0;}
.close .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;align-items:end;}
.close .kick{color:var(--gold);}
.close h2{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6vw,78px);line-height:1.18;}
.close h2 em{font-style:normal;color:var(--orange);}
.close p{font-size:18.5px;color:#C5BFB2;max-width:28em;margin-top:22px;}
.close .ctas{margin-top:34px;padding-bottom:100px;}
.close .quiet{font-size:14px;color:#8C8677;}
.mascot{position:relative;align-self:end;justify-self:center;}
.mascot img{width:min(300px,100%);height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35));}
.mascot .bubble{position:absolute;top:8%;left:-30%;background:#F4EEE2;color:var(--ink);font-family:var(--hand);font-weight:700;font-size:20px;padding:12px 18px;border-radius:18px;border-bottom-right-radius:4px;white-space:nowrap;box-shadow:0 12px 20px -10px rgba(0,0,0,.4);}

/* ---------- 12 掌櫃報 ---------- */
.coupon-sec{padding:80px 0;}
.coupon{max-width:900px;margin:0 auto;border:2px dashed var(--ink-3);padding:40px 44px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:center;background:var(--card);}
.coupon .cut{position:absolute;top:-14px;left:40px;background:var(--paper);padding:0 8px;color:var(--ink-3);display:flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.2em;}
.coupon .vt{writing-mode:vertical-rl;font-family:var(--serif);font-weight:900;font-size:34px;letter-spacing:.3em;border-left:1px solid var(--rule);padding-left:26px;color:var(--navy);}
.coupon h3{font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.45;}
.coupon p{font-size:15.5px;color:var(--ink-2);margin-top:6px;}
.nl-form{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.nl-form input{flex:1;min-width:220px;border:0;border-bottom:2px solid var(--ink);background:transparent;font:inherit;font-size:17px;padding:10px 4px;color:var(--ink);}
.nl-form input:focus{outline:none;border-color:var(--orange);}
.nl-form button{background:var(--ink);color:var(--paper);border:0;font:inherit;font-weight:800;font-size:16px;padding:12px 26px;border-radius:999px;cursor:pointer;}
.nl-form button:hover{background:var(--navy);}
.nl-note{font-size:12.5px;color:var(--ink-3);margin-top:10px;}
.nl-ok{margin-top:16px;font-family:var(--hand);font-size:22px;color:var(--seal);font-weight:700;}

/* ---------- 頁尾 ---------- */
footer{border-top:3px double var(--ink);padding:34px 0 40px;font-size:14px;color:var(--ink-2);}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between;}
footer .fl{display:flex;align-items:center;gap:12px;}
footer .fl img{width:36px;height:36px;border-radius:12%;}
footer .fl b{color:var(--navy);font-weight:900;}
footer .fl b span{color:var(--orange);}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px;}
footer a{text-decoration:none;font-weight:700;}
footer a:hover{color:var(--seal);}
footer .copy{flex-basis:100%;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:16px;}


/* =========================================================
   內頁共用：頁首標題（phead）、內文欄（prose）
   ========================================================= */
.phead{padding:64px 0 60px;border-bottom:1px solid var(--rule);position:relative;}
.phead .mark{border-right-color:var(--rule);}
.crumb{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;letter-spacing:.18em;color:var(--ink-3);font-weight:700;}
.crumb a{text-decoration:none;color:var(--ink-2);}
.crumb a:hover{color:var(--seal);}
.crumb span[aria-current]{color:var(--ink);}
.phead h1{font-family:var(--serif);font-weight:900;font-size:clamp(40px,6.2vw,80px);line-height:1.14;letter-spacing:.01em;margin:18px 0 20px;color:var(--ink);text-wrap:balance;}
.phead h1 em{font-style:normal;color:var(--seal);}
.phead .lede{margin-top:0;}
.phead .ctas{margin-top:28px;}
.phead-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end;}
.prose{max-width:40em;}
.prose p{margin:0 0 1.2em;color:var(--ink-2);font-size:17.5px;line-height:1.95;}
.prose h2{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.6vw,30px);line-height:1.4;margin:2.2em 0 .7em;color:var(--ink);}
.prose h3{font-family:var(--serif);font-weight:900;font-size:21px;margin:1.8em 0 .5em;}
.prose ul,.prose ol{margin:0 0 1.3em 1.3em;color:var(--ink-2);}
.prose li{margin:.35em 0;}
.prose strong,.prose b{color:var(--ink);}
.prose a{color:var(--seal);text-underline-offset:3px;}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--seal);font-family:var(--serif);font-size:20px;line-height:1.7;color:var(--ink);}
@media (max-width:820px){
  .phead{padding:40px 0 44px;}
  .phead-split{grid-template-columns:minmax(0,1fr);gap:30px;}
}

/* ---------- 響應式 ---------- */
@media (max-width:1080px){
  .nav a{padding:8px 8px;font-size:14px;}
  .anno.a1,.anno.a2{display:none;}
}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;}
  .stage{margin-top:26px;}
  .nwrap{grid-template-columns:1fr;gap:40px;}
  .shelf-wrap{grid-template-columns:minmax(0,1fr);}
  .bundle{max-width:420px;}
  .menu{grid-template-columns:1fr;}
  .tier{border-right:0;border-bottom:1px solid var(--rule);}
  .tier:last-child{border-bottom:0;}
  .tier.hot{box-shadow:inset 0 0 0 2px var(--navy);}
  .menu-foot{grid-template-columns:1fr;}
  .close .wrap{grid-template-columns:1fr;}
  .mascot{justify-self:end;margin-top:-40px;}
  .mascot img{width:200px;height:auto;}
}
@media (max-width:820px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;border-bottom:3px double var(--ink);padding:8px 20px 16px;}
  .nav.open{display:flex;}
  .nav a{font-size:17px;padding:12px 4px;border-bottom:1px solid var(--rule-soft);}
  .nav a.on::after{display:none;}
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);background:transparent;border-radius:50%;cursor:pointer;margin-left:auto;}
  .menu-btn span{width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink);}
  .btn-line-s{margin-left:0;}
  .dateline .d2,.dateline .brand{display:none;}
  .dateline .wrap{white-space:nowrap;}
  .sec{padding:76px 0;}
  .sec-grid{grid-template-columns:minmax(0,1fr);}
  .mark{border-right:0;padding:0 0 18px;margin-bottom:22px;border-bottom:1px solid var(--rule);}
  .mark-in{position:static;flex-direction:row;align-items:center;justify-content:flex-start;}
  .mark .nm{writing-mode:horizontal-tb;letter-spacing:.3em;font-size:15px;}
  .night .mark{border-color:rgba(233,227,214,.18);}
  .board .wrap{grid-template-columns:1fr;padding:0;}
  .board .bt{border-right:0;border-bottom:1px solid var(--rule);justify-content:flex-start;padding:16px 28px;}
  .board .bt span{writing-mode:horizontal-tb;letter-spacing:.3em;font-size:17px;}
  .post{border-right:0;border-bottom:1px solid var(--rule-soft);padding:20px 28px;}
  .ledger-head{grid-template-columns:1fr;}
  .ledger::before{display:none;}
  .lrow{grid-template-columns:1fr;}
  .lrow.th{display:none;}
  .lrow>*{padding:0 20px;}
  .lrow .t{padding-top:20px;}
  .lrow .t .num{display:inline;font-size:18px;margin-right:6px;}
  .lrow .q{padding-top:6px;font-size:17px;}
  .lrow .loss{border-left:0;padding:10px 20px 20px;}
  .circle{display:none;}
  .origin{grid-template-columns:minmax(0,1fr);gap:28px;}
  .entry{grid-template-columns:44px minmax(0,1fr);gap:14px;}
  .entry .n{font-size:30px;}
  .vhead{writing-mode:horizontal-tb;font-size:34px;letter-spacing:.04em;}
  .fork{grid-template-columns:1fr;}
  .path{padding:44px 28px 40px;}
  .path.b{border-left:0;border-top:1px solid var(--ink);}
  .path .go{right:28px;bottom:40px;width:50px;height:50px;}
  .shelf{overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 18px 0;gap:10px;min-height:0;}
  .shelf::after{position:sticky;display:none;}
  .shelf{border-bottom:18px solid #7A5C3D;}
  .spine{flex:0 0 72px;max-width:none;scroll-snap-align:start;height:300px;}
  .spine .lbl{font-size:15px;letter-spacing:.16em;margin-top:24px;}
  .spine:hover,.spine:focus-visible{transform:translateY(-10px);}
  .spine .tagp{display:none;}
  .plist{display:none;}
  .swipe{display:block;margin-top:30px;font-size:13.5px;color:var(--ink-3);letter-spacing:.1em;}
  .dodont{grid-template-columns:1fr;}
  .dd,.dd+.dd{padding:26px 0;border-left:0;}
  .dd+.dd{border-top:1px solid var(--rule);}
  .nope{grid-template-columns:1fr;padding:26px 22px;gap:18px;}
  .deed{padding:40px 24px 36px 36px;background-image:linear-gradient(90deg,transparent 18px,rgba(179,48,42,.28) 18px,rgba(179,48,42,.28) 19px,transparent 19px),repeating-linear-gradient(180deg,transparent 0 37px,rgba(26,36,48,.07) 37px 38px);}
  .deed h3{font-size:30px;}
  .deed li{grid-template-columns:40px minmax(0,1fr);}
  .qa summary{font-size:17.5px;grid-template-columns:38px minmax(0,1fr) 26px;}
  .qa .a{grid-template-columns:38px minmax(0,1fr);}
  .coupon{grid-template-columns:1fr;padding:34px 24px 28px;gap:14px;}
  .coupon .vt{writing-mode:horizontal-tb;border-left:0;padding-left:0;font-size:24px;letter-spacing:.2em;}
  .mascot .bubble{left:-70%;font-size:17px;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .hero{padding:44px 0 70px;}
  .hero h1{font-size:clamp(50px,15vw,70px);}
  .hero .sub{font-size:17px;}
  .phone{width:292px;}
  .screen{height:560px;}
  .anno{display:none;}
  .ghost-time{font-size:44vw;}
  .btn-line-s{padding:9px 14px;font-size:13.5px;}
  .logo .lg{font-size:18px;}
  .nope ul{grid-template-columns:1fr;}
  .deed h3{letter-spacing:.3em;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .js .draw path{stroke-dashoffset:0;}
  .js .chop{opacity:.94;transform:rotate(-4deg);}
  .msg{opacity:1;transform:none;}
}