/* 醫日：淺色道林紙＝廣場，深色＝門後的房間。字級最小 13px。 */
:root{
  --bg:#f5f2ec; --fg:#0a1830; --mute:#6b6d76; --line:#e3ded3; --card:#fff; --gold:#7d6b47; --soft:#ece7dc;
  --navy:#0a1830; --paper:#f5f2ec; --brass:#ad986e;
  --serif:"Noto Serif TC","Songti TC",serif; --sans:Inter,"Noto Sans TC","PingFang TC",system-ui,sans-serif; --lat:"Cormorant Garamond",Georgia,serif;
}
.dark{--bg:#0a1830; --fg:#f5f2ec; --mute:#a3a5ae; --line:rgba(245,242,236,.12); --card:#122142; --gold:#ad986e; --soft:#16264a}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--fg); font:15px/1.75 var(--sans); -webkit-font-smoothing:antialiased}
a{color:var(--gold); text-decoration:none}
.wrap{max-width:440px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
  padding:max(48px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left))}
.grow{flex:1}
.brand{font:500 32px/1 var(--lat)} .brand small{display:block; font:15px/1.6 var(--serif); margin-top:6px}
.eb{font-size:12px; letter-spacing:.18em; color:var(--gold)}
h1{font:600 28px/1.38 var(--serif); margin:10px 0 0; text-wrap:balance}
h2{font:600 20px/1.5 var(--serif); margin:0}
p{margin:10px 0 0}
.sm{font-size:13px; line-height:1.7; color:var(--mute)}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.stack{display:flex; flex-direction:column; gap:10px}
.row{display:flex; align-items:center; gap:10px}
.between{display:flex; align-items:center; justify-content:space-between; gap:10px}
label.f{display:block; font-size:13px; color:var(--mute)}
input[type=text],input[type=tel],input[type=number],select{width:100%; height:50px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--fg);
  padding:0 14px; font:15px var(--sans); margin-top:4px}
input:focus,select:focus{outline:2px solid var(--brass); outline-offset:1px}
.code{letter-spacing:.4em; font-size:22px; text-align:center}
.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--mute)}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--navy)}
.btn{display:flex; align-items:center; justify-content:center; width:100%; height:50px; border-radius:25px; border:none; background:var(--fg); color:var(--bg);
  font:500 15px var(--sans); letter-spacing:.04em; cursor:pointer; white-space:nowrap}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
.btn.sm{height:40px; width:auto; padding:0 16px; font-size:14px}
.err{background:#f6e3df; color:#7a2b1f; border-radius:12px; padding:10px 14px; font-size:14px}
.ok{background:var(--soft); border-radius:12px; padding:10px 14px; font-size:14px}
.no{font:15px var(--lat); color:var(--gold); letter-spacing:.06em}
.steps>div{display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line)}
.steps>div:last-child{border:none}
.dot{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0}
.dot.on{border-color:var(--gold)} .dot.done{background:var(--gold); border-color:var(--gold)}
.room{display:block; color:var(--fg)}
.room.locked{background:var(--navy); color:var(--paper); border:none}
.room.locked .sm{color:#a3a5ae}
table{width:100%; border-collapse:collapse; font-size:14px}
td,th{padding:10px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.scroll{overflow-x:auto}
.inline{display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap}
.inline select,.inline input{height:40px; width:auto; margin:0}
.btn.line{background:#06C755; color:#fff} /* LINE 官方按鈕色，依 LINE 品牌規範不可改 */
.or{display:flex; align-items:center; gap:10px; margin:18px 0 0; font-size:13px; color:var(--mute)}
.or::before,.or::after{content:""; flex:1; border-top:1px solid var(--line)}

/* --- 廣場、文章、Life Desk（W2） --- */
.wrap{padding-bottom:max(96px, calc(env(safe-area-inset-bottom) + 84px))}
.hello{font:600 24px/1.4 var(--serif)}
.sec{font:600 17px/1.5 var(--serif); padding:20px 0 6px; margin:0}
section{margin-top:6px}
.topic{margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:10px}
.topic-q{display:block; color:var(--fg); font:600 21px/1.5 var(--serif); text-wrap:balance}
.quote{margin:0; font-size:15px}
.write{display:block; border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--mute); font-size:14px; background:var(--bg)}
.art,.item{display:flex; flex-direction:column; gap:3px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--fg)}
.art-t,.item-t{font:600 16px/1.55 var(--serif)}
.item-t{font-family:var(--sans); font-weight:500; font-size:15px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px}
.chips>a,.chips>span,.chips label span{display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:17px; border:1px solid var(--line); color:var(--fg); font-size:14px; background:var(--card)}
.chips>a[aria-current]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.chips.pick label{cursor:pointer} .chips.pick input{position:absolute; opacity:0; pointer-events:none}
.chips.pick input:checked+span{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.chips.pick input:focus-visible+span{outline:2px solid var(--brass); outline-offset:2px}
.art-h{font-size:26px}
.prose{margin-top:18px}
.prose p{margin:0 0 14px; font-size:16px; line-height:1.9}
.prose h3{font:600 17px/1.6 var(--serif); margin:24px 0 8px}
.cheer{height:44px; padding:0 18px; border-radius:22px; border:1px solid var(--line); background:transparent; color:var(--fg); font:14px var(--sans); cursor:pointer}
.cheer.on{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.link{background:none; border:none; padding:0; cursor:pointer; color:var(--mute); font-family:inherit}
.cmt{padding:14px 0; border-bottom:1px solid var(--line)}
.cmt p{margin:8px 0 6px}
.who{display:flex; align-items:center; gap:10px; font-size:14px}
.who b{font-weight:500}
.av{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--soft); color:var(--fg); font:500 14px var(--serif); flex-shrink:0}
.av.lg{width:56px; height:56px; font-size:22px}
.sm-no{font-size:12px}
textarea{width:100%; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:12px 14px; font:15px/1.7 var(--sans); margin-top:4px; resize:vertical}
textarea:focus{outline:2px solid var(--brass); outline-offset:1px}
.fab{position:fixed; right:max(20px, calc(50% - 200px)); bottom:calc(env(safe-area-inset-bottom) + 80px); width:52px; height:52px; border-radius:50%; background:var(--fg); color:var(--bg); display:flex; align-items:center; justify-content:center; font:500 15px var(--serif); box-shadow:0 10px 24px -10px rgba(10,24,48,.5)}
.tabbar{position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:0; background:var(--bg); border-top:1px solid var(--line);
  padding:0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left)); z-index:10}
.tabbar a{flex:1; max-width:140px; text-align:center; padding:16px 0 14px; color:var(--mute); font-size:14px}
.tabbar a[aria-current]{color:var(--fg); font-weight:500}
.btn.gold{background:var(--fg); color:var(--bg)} /* 金色面積要在 5% 以內，主要按鈕不用金 */
.price{font-family:Inter, var(--sans); font-weight:500}
.axis{display:flex; align-items:baseline; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.axis-no{font:500 26px/1 var(--lat); color:var(--brass)}
.svc{padding:12px 0; border-bottom:1px solid var(--line)}
.svc b{font-weight:500}
.tag{font-size:12px; padding:2px 8px; border-radius:10px; border:1px solid var(--line); color:var(--mute); white-space:nowrap}
.cmp td,.cmp th{font-size:13.5px} .cmp th{color:var(--mute); font-weight:500} .cmp td:first-child{width:42%}
.ncard{background:#070f1c; color:#f5f2ec; border-radius:18px; padding:20px 22px; display:flex; flex-direction:column; gap:16px; border:1px solid rgba(173,152,110,.45)}
.ncard-no{font:500 34px/1 var(--lat); letter-spacing:.08em; font-variant-numeric:lining-nums}
.demo{margin-top:26px; padding-top:18px; border-top:1px solid var(--line)}
.lat{font-family:var(--lat)}
.no,.sm-no,.axis-no{font-variant-numeric:lining-nums}

/* --- 編輯台（D3）：同仁用電腦操作，版面放寬 --- */
.wrap.wide{max-width:1120px}
.ed td,.ed th{font-size:14px} .ed th{color:var(--mute); font-weight:500; white-space:nowrap}
.ed-t{color:var(--fg); font-weight:500}
.st{display:inline-block; font-size:12.5px; padding:2px 10px; border-radius:10px; border:1px solid var(--line); white-space:nowrap}
.st-published{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.st-scheduled{border-color:var(--brass); color:var(--gold)}
.st-withdrawn{color:var(--mute); text-decoration:line-through}
.ed-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:28px; margin-top:20px; align-items:start}
@media (max-width:820px){.ed-grid{grid-template-columns:minmax(0,1fr)}}
.mono{font:15px/1.75 var(--sans)}
.when{border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; margin:0}
.when legend{padding:0 4px}
.when input[type=datetime-local]{height:44px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); padding:0 12px; font:14px var(--sans); max-width:260px}
.pv{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px}
.mrow{display:flex; gap:12px; align-items:center; padding-top:10px; border-top:1px solid var(--line)}
.mrow img{width:72px; height:72px; object-fit:cover; border-radius:8px; flex-shrink:0}
.mrow code{font-size:13px; word-break:break-all; user-select:all}
.cover{display:block; width:100%; max-width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; margin:6px 0 14px; background:var(--soft)}
.pimg{display:block; width:100%; max-width:100%; border-radius:12px; margin:6px 0 16px}
.art.has-th{display:grid; grid-template-columns:minmax(0,1fr) 72px; grid-template-rows:auto auto; column-gap:12px}
.art.has-th .th{grid-column:2; grid-row:1 / span 2; width:72px; height:72px; object-fit:cover; border-radius:10px; align-self:center}
.art.has-th>span{grid-column:1}