/* 隔壁老莊工具箱 — 品牌暗色版（由紙墨風轉換） */
@font-face{ font-family:"BrandHand"; src:url("fonts/brand.woff2") format("woff2"); font-display:swap; }
:root{
  --paper:#0a0a0b; --card:#131315; --ink:#f2efe8;
  --ink60:rgba(242,239,232,.62); --ink40:rgba(242,239,232,.4);
  --line:rgba(242,239,232,.14); --line2:rgba(242,239,232,.32); --seal:#b8503e;
  --serif:"Noto Serif TC","Noto Serif CJK TC","Songti TC","Source Han Serif TC",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);line-height:1.9;-webkit-font-smoothing:antialiased}
main{max-width:640px;margin:0 auto;padding:20px 18px 80px}
header.site{position:sticky;top:0;z-index:9;background:var(--paper);border-bottom:1px solid var(--line);
  text-align:center;padding:10px 14px 8px}
header.site .brand{font-family:"BrandHand",var(--serif);font-size:24px;letter-spacing:2px}
header.site .sub{font-size:11px;letter-spacing:4px;color:var(--ink60)}
nav{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px auto 4px;max-width:640px;padding:0 10px}
nav a{font-size:13px;color:var(--ink60);text-decoration:none;border:1px solid var(--line2);
  border-radius:999px;padding:5px 12px;letter-spacing:1px}
nav a.on{background:var(--ink);color:#111;border-color:var(--ink)}
nav a.ok::after{content:" ✓";color:var(--seal)}
nav a.ok.on::after{color:#111}
h1{font-size:26px;letter-spacing:2px;margin:18px 0 4px;font-weight:700}
h2{font-size:17px;letter-spacing:3px;margin:30px 0 10px;color:var(--ink);font-weight:700}
h2::before{content:"◆ ";color:var(--seal);font-size:12px;vertical-align:2px}
p.lead{color:var(--ink60);font-size:14.5px}
.hero{text-align:center;margin:12px 0 8px}
.hero img{width:200px;max-width:60%;border-radius:6px;background:#f6f2ea;
  box-shadow:0 0 0 1px var(--line), 0 14px 40px rgba(0,0,0,.5)}
.steptag{display:inline-block;font-size:11px;letter-spacing:3px;color:var(--seal);
  border:1px solid var(--seal);border-radius:999px;padding:2px 12px;margin-bottom:8px}
.box{background:var(--card);border:1px solid var(--line2);border-radius:6px;padding:16px;margin:12px 0}
.box .hint{font-size:12.5px;color:var(--ink60);margin-bottom:8px}
textarea,input[type=text]{width:100%;font-family:var(--serif);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:4px;padding:10px 12px;outline:none;line-height:1.8}
textarea:focus,input:focus{border-color:var(--ink)}
textarea{min-height:84px;resize:vertical}
button,.btn{font-family:var(--serif);font-size:15px;letter-spacing:2px;cursor:pointer;
  background:var(--ink);color:#111;border:none;border-radius:999px;padding:11px 22px}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
button.done{background:var(--seal);color:var(--ink)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
/* 選擇籤 */
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{background:transparent;color:var(--ink);border:1px solid var(--line2);font-size:14px;padding:8px 14px}
.pick button.sel{background:var(--ink);color:#111}
.pick button.sel .rank{color:var(--seal);font-weight:700}
/* 金句日籤 */
.daily{border:1px solid var(--line2);border-left:3px solid var(--seal);background:var(--card);
  padding:14px 16px;margin:16px 0;border-radius:0 6px 6px 0}
.q-src{font-size:11px;letter-spacing:3px;color:var(--ink60)}
.q-orig{font-size:17px;font-weight:700;letter-spacing:1px;margin:6px 0;line-height:1.9}
.q-plain{font-size:13px;color:var(--ink60)}
/* 生命線畫布 */
#lifeCanvas{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:6px;touch-action:none}
/* 打卡牆 */
.member{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 4px}
.member .nm{font-weight:700;min-width:72px}
.member .decl{flex:1;font-size:12.5px;color:var(--ink60);line-height:1.6}
.dots{display:flex;gap:5px}
.dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);font-size:0}
.dot.on{background:var(--ink);border-color:var(--ink)}
.dot.now{border-color:var(--seal)}
/* 實驗卡 */
.expcard{border:1px solid var(--line2);border-radius:6px;background:var(--card);padding:12px 14px;margin:10px 0;cursor:pointer}
.expcard.sel{border-color:var(--seal);border-width:2px}
.expcard .src{font-size:11px;letter-spacing:2px;color:var(--ink60)}
.expcard .tx{font-size:14px;margin-top:4px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#111;
  padding:10px 20px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;max-width:86%;text-align:center}
#toast.show{opacity:1}
footer{max-width:640px;margin:30px auto 0;padding:14px;border-top:1px solid var(--line);
  text-align:center;font-size:11px;color:var(--ink40);letter-spacing:1px}
.progress{font-size:12.5px;color:var(--ink60);letter-spacing:1px;margin-top:4px}