:root{
  --bg:#F5F1E8; --bg2:#EFE9DB; --card:#FFFDF8; --line:#E8E2D0;
  --ink:#2D4A3E; --ink2:#4A6B5F; --muted:#7A8A82; --accent:#C84B31;
  --ok:#3E7D5A; --warn:#B7791F; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans TC',system-ui,sans-serif;font-size:16px;line-height:1.7}
h1,h2,h3,.serif{font-family:'Noto Serif TC',serif;line-height:1.35}
a{color:var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:60px}
.logo{font-family:'Noto Serif TC',serif;font-weight:700;font-size:20px;text-decoration:none}
.logo small{font-family:'Noto Sans TC';font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
.nav .links{margin-left:auto;display:flex;gap:14px;font-size:14px}
.nav .links a{text-decoration:none;color:var(--ink2);white-space:nowrap}
@media(max-width:640px){.nav .links>a:not(.btn),.logo small{display:none}.nav .links{gap:8px}.nav .links .btn{white-space:nowrap}}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.red{background:var(--accent);border-color:var(--accent)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.tag{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--bg2);color:var(--ink2)}
.tag.red{background:#F6E1DB;color:var(--accent)}
.tag.ok{background:#DDEEE3;color:var(--ok)}
.tag.warn{background:#F7EBD3;color:var(--warn)}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
footer{border-top:1px solid var(--line);margin-top:64px;padding:28px 0;font-size:13px;color:var(--muted)}

/* ===== landing ===== */
.hero{padding-top:64px;padding-bottom:40px}
.hero h1{font-size:clamp(28px,5vw,44px);margin:12px 0}
.hero p.lead{font-size:18px;color:var(--ink2);max-width:640px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
section{padding-top:36px;padding-bottom:36px}
section h2{font-size:26px;margin:0 0 18px}
.step-n{font-family:'Noto Serif TC';font-size:30px;color:var(--accent);font-weight:700}
.price{font-family:'Noto Serif TC';font-size:40px;font-weight:700}
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding-left:26px;position:relative;margin:6px 0}
ul.check li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:500}

/* ===== app ===== */
.app{display:grid;gap:20px;padding-top:20px;padding-bottom:60px}
.app>*{min-width:0}
@media(min-width:960px){.app{grid-template-columns:230px 1fr}}
.side{align-self:start}
@media(min-width:960px){.side{position:sticky;top:76px}}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto}
@media(min-width:960px){.steps{flex-direction:column}}
.steps button{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;white-space:nowrap;padding:8px 12px;border-radius:10px;font-size:14px;color:var(--ink2)}
.steps button.on{background:var(--ink);color:#fff}
.steps .dot{width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:inline-grid;place-items:center;font-size:11px}
.steps button.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.panel h2{margin-top:0;font-size:24px}
.panel .hint{background:var(--bg2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink2);margin:0 0 16px}
label.f{display:block;font-size:14px;color:var(--ink2);margin-bottom:12px}
label.f span.req{color:var(--accent)}
input,select,textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-top:4px}
input:focus,select,textarea:focus{outline:2px solid #2D4A3E33;border-color:var(--ink2)}
textarea{min-height:70px}
.rows{display:grid;gap:10px}
.row{display:grid;gap:8px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.row label.f{margin:0}
.row .del{all:unset;cursor:pointer;color:var(--accent);font-size:13px;padding:6px}
.navbtns{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.checks{display:grid;gap:8px;margin:12px 0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding:8px 12px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.chk b{min-width:52px}
.up{border:1.5px dashed var(--line);border-radius:12px;padding:14px;background:#fff}
.up .files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.up .file{font-size:12px;background:var(--bg2);border-radius:8px;padding:4px 8px;display:flex;gap:6px;align-items:center}
.up .file button{all:unset;cursor:pointer;color:var(--accent)}
.tbl-sched{width:100%;border-collapse:collapse;font-size:13px}
.tbl-sched td,.tbl-sched th{border:1px solid var(--line);padding:2px}
.tbl-sched input{margin:0;padding:4px;font-size:13px;border:none}
.unlock{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.unlock input{max-width:280px;margin:0}
.progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;background:var(--ink);width:0;transition:width .2s}

/* ===== A4 preview sheets ===== */
.preview{display:grid;gap:18px;justify-items:center;background:#D9D3C4;border-radius:var(--radius);padding:18px;overflow-x:auto}
.sheet{width:794px;height:1123px;flex:none;background:#fff;color:#000;padding:64px 70px;font-family:'BiauKai','DFKai-SB','LXGW WenKai TC','Noto Serif TC',serif;font-size:16px;line-height:1.75;position:relative;overflow:hidden;box-shadow:0 2px 10px #0002}
.sheet.overflow{outline:3px solid var(--accent)}
.sheet h1{font-family:inherit;text-align:center;font-size:26px;margin:0 0 14px;letter-spacing:2px}
.sheet h2{font-family:inherit;text-align:center;font-size:20px;margin:0 0 12px}
.sheet .att{position:absolute;top:28px;right:40px;font-size:14px;border:1px solid #000;padding:0 8px}
.sheet table{width:100%;border-collapse:collapse}
.sheet td,.sheet th{border:1px solid #000;padding:4px 6px;vertical-align:middle;font-weight:400}
.sheet th{background:#f2f2f2}
.sheet .c{text-align:center}
.sheet .r{text-align:right}
.sheet .cover{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;text-align:center}
.sheet .cover h1{font-size:34px;line-height:1.6}
.sheet .cover .big{font-size:44px;letter-spacing:12px;margin-top:40px}
.sheet .photo{width:110px;height:140px;border:1px dashed #000;display:grid;place-items:center;font-size:12px;text-align:center}
.sheet .imgbox{border:1px solid #000;height:720px;display:grid;place-items:center;color:#666;text-align:center}
.sheet .sign{margin-top:36px;line-height:2.4}
.sheet ol,.sheet ul{margin:0;padding-left:2em}
.sheet .wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sheet .wm span{transform:rotate(-30deg);font-size:64px;color:#C84B3122;font-weight:700;white-space:nowrap}
.preview-wrap{transform-origin:top left}
@media(max-width:860px){.preview .sheet{zoom:.45}}

/* ===== rent checklist ===== */
.cl{list-style:none;padding:0;margin:0}
.cl li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.cl input[type=checkbox]{width:20px;height:20px;margin-top:4px;flex:none;accent-color:var(--ink)}
.cl .why{display:block;font-size:13px;color:var(--muted)}
.timeline{counter-reset:t;list-style:none;padding:0}
.timeline li{counter-increment:t;position:relative;padding:0 0 18px 46px;border-left:2px solid var(--line);margin-left:16px}
.timeline li::before{content:counter(t);position:absolute;left:-16px;top:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:14px}
.timeline li b{display:block}
@media print{
  .nav,footer,.noprint{display:none!important}
  body{background:#fff}
  .card{border:none;padding:0}
}