/* 502 装修方案网站：手机优先，字号可调（--fs），不禁用系统缩放 */
:root{
  --fs:1;
  --ink:#2b2a27; --muted:#6b675f; --line:#e2dccf; --bg:#f6f3ee; --card:#fff;
  --wood:#7a4a22; --wood-soft:#f2ede4; --accent:#9a5a2a;
  --bar:52px;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--fs)); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  line-height:1.65}
a{color:var(--wood)}
img{max-width:100%}

/* 顶栏 */
.bar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:8px;
  height:var(--bar); padding:0 12px; background:rgba(246,243,238,.96);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(6px)}
.bar .home{font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap; font-size:16px}
.bar .title{flex:1; min-width:0; font-size:15px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar button, .btn{font:inherit; font-size:15px; min-height:38px; min-width:38px; padding:0 10px;
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; cursor:pointer}
.bar button:active, .btn:active{background:var(--wood-soft)}
.fsctl{display:flex; align-items:center; gap:4px}
.fsctl .lab{font-size:13px; color:var(--muted)}
.fsctl .val{font-size:13px; min-width:3em; text-align:center; color:var(--muted)}

/* 目录抽屉 */
.toc{position:fixed; z-index:60; top:var(--bar); right:0; width:min(86vw,360px); max-height:calc(100vh - var(--bar));
  overflow:auto; background:#fff; border-left:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:-8px 8px 24px #0002; padding:8px 0; transform:translateX(105%); transition:transform .2s}
.toc.open{transform:none}
.toc a{display:block; padding:10px 16px; text-decoration:none; color:var(--ink); font-size:1rem; border-bottom:1px solid #f0ece4}
.toc a.h3{padding-left:30px; font-size:.92rem; color:var(--muted)}

/* 通用页面 */
.wrap{max-width:1100px; margin:0 auto; padding:16px}
h1.page{font-size:1.6rem; margin:8px 0 4px}
.lead{color:var(--muted); margin:0 0 16px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px;
  text-decoration:none; color:var(--ink)}
.card:active{background:var(--wood-soft)}
.card .t{font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:8px}
.card .d{color:var(--muted); font-size:.92rem; margin-top:4px}
.card .ico{font-size:1.4rem}
.facts{display:flex; flex-wrap:wrap; gap:4px 18px; margin:4px 0 18px; font-size:.95rem}
.fact span{color:var(--muted); margin-right:6px}
.dl{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 24px}
.dl a{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 14px; text-decoration:none; font-size:.95rem}
h2.sec{font-size:1.25rem; margin:24px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--wood)}
h3.sec{font-size:1.05rem; margin:18px 0 8px; color:var(--wood)}
.foot{color:var(--muted); font-size:.85rem; text-align:center; padding:24px 16px 40px}

/* 图库 */
.tabs{position:sticky; top:var(--bar); z-index:40; display:flex; gap:6px; overflow-x:auto; padding:10px 16px;
  background:var(--bg); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch}
.tabs a{flex:none; padding:8px 14px; border-radius:20px; background:#fff; border:1px solid var(--line);
  text-decoration:none; color:var(--ink); font-size:.95rem; white-space:nowrap}
.tabs a.on{background:var(--wood); color:#fff; border-color:var(--wood)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px}
.chips a{font-size:.85rem; padding:4px 10px; border-radius:14px; background:#fff; border:1px solid var(--line); text-decoration:none}
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px}
@media (min-width:700px){ .gal{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px} }
.gal figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:zoom-in}
.gal img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:#ece7de}
.gal img.tall{aspect-ratio:2/3}
.gal img.svg{object-fit:contain; background:#fff}
.gal figcaption{padding:6px 8px; font-size:.82rem; color:var(--muted); line-height:1.35}

/* 文档页（由打印版 HTML 套壳生成） */
.doc{width:min(900px, calc(100vw / var(--fs))); margin:0 auto; padding:16px 16px 40px; background:#fff; zoom:var(--fs)}
@media (min-width:940px){ .doc{width:min(900px, calc((100vw - 40px) / var(--fs))); margin:16px auto; border:1px solid var(--line); border-radius:12px; padding:28px 36px} }
.doc img{max-width:100%; height:auto; cursor:zoom-in}
.doc svg{max-width:100%; height:auto; cursor:zoom-in}
.doc .tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 10px}
.doc .tw table{margin:0; min-width:600px}
.doc .tw th,.doc .tw td{min-width:4.5em}
.doc.wide .tw table{min-width:820px}
.doc h2{scroll-margin-top:calc(var(--bar) + 8px)}
.doc h3{scroll-margin-top:calc(var(--bar) + 8px)}
.doc div{min-width:0}
@media (max-width:700px){
  .doc .grid2,.doc .grid3,.doc .g2{grid-template-columns:1fr !important}
  .doc{padding:12px 12px 32px}
  .doc .sw{display:flex; flex-wrap:wrap}
}
.hint{font-size:.85rem; color:var(--muted); background:#fff8ec; border:1px solid #efd9b4; border-radius:10px; padding:8px 12px; margin:10px 0}

/* 看图器 */
.lb{position:fixed; inset:0; z-index:100; background:#111; display:none; touch-action:none; user-select:none; -webkit-user-select:none}
.lb.open{display:block}
.lb .stage{position:absolute; inset:0; overflow:hidden}
.lb img{position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; will-change:transform; -webkit-user-drag:none; background:#fff}
.lb .ui{position:absolute; left:0; right:0; display:flex; align-items:center; gap:8px; padding:10px 12px;
  color:#fff; background:linear-gradient(#000a,#0000)}
.lb .top{top:0}
.lb .bot{bottom:0; justify-content:center; background:linear-gradient(#0000,#000a); padding-bottom:max(12px, env(safe-area-inset-bottom))}
.lb .cap{flex:1; min-width:0; font-size:15px; line-height:1.35; text-shadow:0 1px 2px #000}
.lb .cnt{font-size:13px; opacity:.8; white-space:nowrap}
.lb button{font:inherit; font-size:18px; min-width:46px; min-height:46px; border-radius:23px; border:0;
  background:#ffffff26; color:#fff; cursor:pointer}
.lb button:active{background:#ffffff4d}
.lb .nav{position:absolute; top:50%; transform:translateY(-50%); font-size:26px}
.lb .prev{left:8px} .lb .next{right:8px}
.lb .stage, .lb img{touch-action:none}
@media (hover:none){ .lb .nav{top:auto; bottom:max(12px, env(safe-area-inset-bottom)); transform:none; background:#ffffff26} }
.lb .tip{position:absolute; left:50%; bottom:84px; transform:translateX(-50%); color:#fffc; font-size:13px; background:#0008;
  padding:6px 12px; border-radius:14px; pointer-events:none; transition:opacity .6s}