/* 呈現現有設計 — extra views + A3 production-drawing sheets */
.page-view{position:absolute;inset:0;overflow:auto}
.page-wrap{padding:16px;display:grid;place-items:center;min-height:100%}
.page-wrap canvas,.page-wrap img{max-width:100%;height:auto;background:#fff;border-radius:3px;box-shadow:var(--shadow)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.thumbs canvas{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:3px;cursor:pointer}
.thumbs canvas:hover{border-color:var(--accent)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.zone-table{display:grid;gap:6px}
.zone-row{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr)) auto;gap:4px;align-items:center}
.zone-row select,.zone-row input{border:1px solid var(--line);border-radius:4px;padding:5px 6px;background:var(--card);width:100%;min-width:0;font-size:13px}
.elev-prev{background:#fff;border-radius:4px;padding:6px}
.elev-prev svg{width:100%;height:auto;max-height:340px}
.renders{display:grid;gap:10px}
.renders img{width:100%;border-radius:4px}
.renders figcaption{font-size:12px;color:var(--mut);margin-top:4px}
.sheet-scroll{padding:16px;display:grid;gap:16px;justify-items:center}
.sheet-scroll .sheet{width:min(100%,1180px);aspect-ratio:420/297;height:auto;box-shadow:var(--shadow)}

/* ── A3 sheet ── */
.sheets{position:absolute;left:-99999px;top:0}
.sheet{width:420mm;height:297mm;background:#fff;color:#16191c;display:grid;grid-template-columns:1fr 92mm;border:1.2mm solid #16191c;box-sizing:border-box;font:400 9pt/1.35 'Noto Sans TC','Microsoft JhengHei',sans-serif;overflow:hidden}
.sh-field{padding:6mm 7mm;display:grid;grid-template-rows:auto 1fr;min-height:0}
.sh-title{font:700 14pt 'Noto Sans TC',sans-serif;margin:0 0 3mm}
.sh-title small{font:400 9pt 'IBM Plex Mono',monospace;color:#555;margin-left:3mm}
.sh-views{display:grid;grid-template-columns:1fr 1fr;gap:6mm;min-height:0}
.sh-views figure{margin:0;display:grid;grid-template-rows:1fr auto;min-height:0}
.sh-views img,.sh-views svg{width:100%;height:100%;object-fit:contain;min-height:0}
.sh-views figcaption,.sh-field>svg+figcaption{font:500 11pt 'Noto Sans TC',sans-serif;text-align:center;margin-top:2mm}
.sh-field>svg{width:100%;height:100%;min-height:0}
.tb{border-left:0.8mm solid #16191c;display:grid;grid-template-rows:auto auto 1fr auto auto auto;font-size:8pt}
.tb>*{border-bottom:0.3mm solid #16191c;padding:2.5mm 3mm}
.tb-brand{display:grid;gap:1mm}
.tb-mark{height:8mm;width:auto;color:#16191c}
.tb-brand span{font-size:7.5pt}
.tb-meta{display:grid;grid-template-columns:auto 1fr;gap:1mm 3mm;margin:0}
.tb-meta dt{color:#555}.tb-meta dd{margin:0;font-weight:600}
.tb-sec h4{margin:0 0 1.2mm;font-size:8.5pt}
.tb-sec dl{display:grid;grid-template-columns:auto 1fr;gap:0.8mm 3mm;margin:0 0 2mm}
.tb-sec dt{color:#555}.tb-sec dd{margin:0}
.tb-hw{margin:0;padding-left:4mm}.tb-hw li{margin:0.4mm 0}
.tb-notes ol{margin:0;padding-left:4mm;font-size:7pt;color:#333}
.tb-sign{display:grid;grid-template-columns:auto 1fr;gap:2mm;align-items:end}
.tb-sign i{border-bottom:0.3mm solid #16191c;height:6mm}
.tb-foot{font-size:6.5pt;color:#555;border-bottom:0}
/* elevation drawing */
.elev .e-out{fill:#fff;stroke:#16191c;stroke-width:8}
.elev .e-zone{fill:#fafaf8;stroke:#16191c;stroke-width:5}
.elev .e-glass{fill:#e3edf2;stroke:#16191c;stroke-width:5}
.elev .e-mirror{fill:#dde3e6;stroke:#16191c;stroke-width:5}
.elev .e-open{fill:#efe9df;stroke:#16191c;stroke-width:5}
.elev .e-void{fill:#fff;stroke:#16191c;stroke-width:5;stroke-dasharray:30 20}
.elev .e-wallhung{fill:none;stroke:#16191c;stroke-width:5;stroke-dasharray:40 25}
.elev .e-floor{fill:#f4efe6;stroke:#9a8f7e;stroke-width:4}
.elev .e-swing{fill:none;stroke:#c0392b;stroke-width:4}
.elev .e-handle{stroke:#16191c;stroke-width:8}
.elev .e-rail{stroke:#16191c;stroke-width:6;stroke-dasharray:24 14}
.elev .e-front{stroke:#a07a26;stroke-width:10}
.elev .e-dim{stroke:#b5651d;stroke-width:3}
.elev .e-gap{stroke:#fff;stroke-width:60}
.elev .e-wall{fill:#5d5a55;stroke:none}
.elev .e-outside{fill:#e6e3dd;stroke:none}
.elev .e-leaf{stroke:#16191c;stroke-width:12}
.elev .e-arc{fill:none;stroke:#16191c;stroke-width:5;stroke-dasharray:24 16}
.elev .e-num{font:500 44px 'IBM Plex Mono',monospace;fill:#b5651d}
.elev .e-note{font:500 52px 'Noto Sans TC',sans-serif;fill:#16191c}

@media print{
  @page{size:A3 landscape;margin:0}
  html,body{height:auto!important;overflow:visible!important}
  body{background:#fff;display:block}
  body>*:not(#sheets){display:none!important}
  .sheets{position:static;left:auto}
  .sheet{page-break-after:always;break-after:page;border-width:1mm}
}
@media (max-width:860px){ .zone-row{grid-template-columns:1fr 1fr 1fr} .grid3{grid-template-columns:1fr 1fr} }

.field input[type=color]{height:38px;padding:3px;cursor:pointer}