/* 鼎筑科技官網 site.css —「雜誌編輯風 × 左側欄」2026-09-17 */
:root{--bg:#fbf9f6;--panel:#fff;--ink:#1b1b1b;--muted:#6f6a63;--brand:#123f4a;--accent:#c05621;
  --line:#e3ded6;--shadow:0 12px 30px rgba(30,25,20,.07)}
[data-theme="dark"]{--bg:#14181a;--panel:#1b2022;--ink:#eef1f2;--muted:#9aa4a8;--brand:#7fc4cf;--accent:#e58a52;
  --line:#2a3235;--shadow:0 14px 32px rgba(0,0,0,.45)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.8;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  transition:background-color .25s ease,color .25s ease}
a{color:inherit;text-decoration:none}
/* ── 版面：上方導覽列（2026-09-22 小哥指示：原左側欄改到上方）── */
.topbar{position:sticky;top:0;z-index:60;background:var(--panel);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(30,25,20,.04)}
.tb-top{max-width:1400px;margin:0 auto;padding:11px 26px;display:flex;align-items:center;gap:16px}
.tb-top .logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.tb-top .logo img{height:42px;width:auto}
.tb-top .logo .nm{font-size:15.2px;font-weight:800;line-height:1.3}
.tb-top .logo .nm small{display:block;font-size:9.6px;letter-spacing:1.3px;color:var(--muted);font-weight:600}
/* 台電 DREMS 合格廠商標示（文字照小哥 2026-09-18 指定，改放 logo 右側） */
.sidequal{padding:6px 10px;border:1px solid var(--line);border-left:3px solid var(--accent);
  background:rgba(192,86,33,.05);font-size:11.2px;line-height:1.45;font-weight:800;color:var(--ink)}
.sidequal b{display:block;color:var(--accent)}
.sidequal span{display:block;color:var(--muted);font-weight:700}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.tb-tel{font-size:12.4px;color:var(--muted);white-space:nowrap}
.tb-tel b{color:var(--brand);font-size:13px;margin-right:4px}
.tb-tel .cs{color:var(--muted)}
@media(max-width:1440px){.tb-tel .cs{display:none}}
.tb-nav{max-width:1400px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line)}
.tb-nav a{padding:11px 14px;font-size:13.8px;color:#5b554d;white-space:nowrap;
  border-bottom:2px solid transparent}
.tb-nav a:hover{color:var(--brand);border-bottom-color:var(--line)}
.tb-nav a.on{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
.btn{display:inline-block;padding:11px 18px;border-radius:2px;font-weight:700;font-size:13.6px;white-space:nowrap;
  border:1px solid transparent;transition:.16s;cursor:pointer;font-family:inherit}
.btn-p{background:var(--brand);color:#fff}.btn-p:hover{background:var(--accent)}
.btn-o{border-color:var(--brand);color:var(--brand)}.btn-o:hover{background:rgba(18,63,74,.07)}
.btn-line{background:#06c755;color:#fff}.btn-line:hover{background:#05b34c}
.themebtn{width:100%;padding:9px;border:1px solid var(--line);background:transparent;color:var(--ink);
  font-size:13px;cursor:pointer;font-family:inherit;border-radius:2px}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}
main{min-width:0}
.wrap{max-width:1130px;margin:0 auto;padding:0 32px}
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:12.4px;letter-spacing:2.6px;font-weight:800;color:var(--accent)}
h1{font-size:52px;line-height:1.22;margin:16px 0 18px;font-weight:800;letter-spacing:-.5px}
.lede{font-size:16.4px;color:var(--muted);max-width:46em;margin:0 0 26px}
.heroimg{position:relative;margin:6px 0 0;border-radius:2px;overflow:hidden}
.heroimg img{width:100%;display:block;height:330px;object-fit:cover}
.heroimg .cap{position:absolute;left:0;bottom:0;right:0;padding:14px 18px;color:#fff;font-size:12.6px;
  background:linear-gradient(180deg,transparent,rgba(10,30,35,.78))}
.hero .hf{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
/* 內頁頁首 */
.pagehero{padding:56px 0 34px;border-bottom:1px solid var(--line)}
.crumb{font-size:12.6px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--accent)}
.pagehero .k{font-size:12.4px;letter-spacing:2.4px;font-weight:800;color:var(--accent)}
.pagehero h1{font-size:40px}
.pagehero p{font-size:16.2px;color:var(--muted);max-width:50em;margin:0}
section{padding:52px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.sec-head span.k{font-size:12.4px;letter-spacing:2.4px;font-weight:800;color:var(--accent);white-space:nowrap}
.sec-head h2{font-size:31px;margin:0;font-weight:800}
.sec-head h3{font-size:21px;margin:0;font-weight:800}
.blk{padding:26px 0 22px;border-top:1px solid var(--line)}
.blk-hd{display:flex;align-items:baseline;gap:16px}
.blk-hd .num{font-size:30px;font-weight:800;color:var(--line);line-height:1}
[data-theme="dark"] .blk-hd .num{color:#33403f}
[data-theme="dark"] .tb-nav a{color:#aeb9bd}
.blk-hd h3{font-size:23px;margin:0}
.blk-hd .en{font-size:12.4px;letter-spacing:1.2px;color:var(--muted)}
.blk .les{font-size:15.2px;margin:12px 0 12px;max-width:52em}
.blk ul,.plist ul{margin:0 0 14px;padding-left:20px;font-size:14.2px;color:var(--muted);columns:2;column-gap:34px}
.blk ul li,.plist ul li{break-inside:avoid;margin-bottom:4px}
.blk ul.single,.plist ul.single{columns:1}
.blk .more{font-size:13.4px;font-weight:700;color:var(--accent)}
.blk .more:hover{text-decoration:underline}
.hero-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:26px 0 0;border-top:1px solid var(--line)}
.fact{padding:16px 18px 16px 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{display:block;font-size:26px;color:var(--brand);line-height:1.2}
.fact span{font-size:12.6px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-size:11.8px;border:1px solid var(--line);color:var(--muted);padding:3px 10px;border-radius:999px}
.note{font-size:12.2px;color:var(--muted);margin:12px 0 0}
.draft{display:inline-block;font-size:11.6px;font-weight:700;color:var(--accent);border:1px dashed var(--accent);
  border-radius:999px;padding:2px 10px;margin-left:8px;vertical-align:middle}
.whys{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.why{padding:16px 0;border-top:1px solid var(--line)}
.why b{color:var(--accent);font-size:15.6px}
.why p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.cta-box{margin:34px 0 0;padding:30px 32px;background:var(--brand);color:#fff;border-radius:2px;
  display:flex;justify-content:space-between;gap:22px;align-items:center;flex-wrap:wrap}
[data-theme="dark"] .cta-box{background:#173b42}
.cta-box h3{margin:0;font-size:20px;color:#fff;max-width:34em}
.cta-box .btn-p{background:#fff;color:#123f4a}.cta-box .btn-p:hover{background:var(--accent);color:#fff}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:14.2px;margin:0}
.dl dt{color:var(--accent);font-weight:700}
.dl dd{margin:0;color:var(--muted)}
/* 服務流程（編號步驟） */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.steps .st{padding:16px 18px 16px 0;border-right:1px solid var(--line);font-size:13.4px;color:var(--muted)}
.steps .st:last-child{border-right:0}
.steps .st b{display:block;color:var(--accent);font-size:13.6px;margin-bottom:4px}
/* 型號卡片 */
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 10px}
.pcard{border:1px solid var(--line);border-top:3px solid var(--brand);padding:18px 20px;background:var(--panel)}
.pcard h4{margin:0 0 8px;font-size:17px}
.pcard .tag{display:inline-block;font-size:11.4px;letter-spacing:1.4px;font-weight:800;color:var(--accent);
  margin-bottom:6px}
.pcard p{margin:0;font-size:13.8px;color:var(--muted)}
/* 規格表 */
table.spec{width:100%;border-collapse:collapse;font-size:13.8px;margin:8px 0 6px}
table.spec th,table.spec td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
table.spec thead th{background:var(--panel);font-weight:800}
table.spec tbody th{background:var(--panel);white-space:nowrap;color:var(--brand)}
/* 銷售商品：分類快速索引 */
.catnav{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;border-top:1px solid var(--line)}
.catnav a{display:flex;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.catnav a b{color:var(--accent);font-size:13px;flex:0 0 auto}
.catnav a:hover{color:var(--accent)}
/* 銷售商品：商品格 */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:10px 0 0}
.pitem{margin:0;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-width:0}
.pimg{background:#fff;border-bottom:1px solid var(--line);aspect-ratio:4/3;display:flex;align-items:center;
  justify-content:center;overflow:hidden;min-width:0}
.pimg img{width:100%;height:100%;object-fit:contain;display:block}
.pimg.contain-pad img{padding:8px}
.pitem figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1 1 auto}
.pitem h4{margin:0;font-size:15.2px;line-height:1.5}
.pitem .psub{display:block;font-size:12.2px;color:var(--accent);font-weight:700;margin:4px 0 8px}
.pitem .brandnote{display:block;font-size:11.2px;font-weight:800;letter-spacing:.5px;color:var(--muted);margin:0 0 6px}
.pitem p{margin:0;font-size:13.2px;color:var(--muted)}
/* 卡片說明內的外部連結（台電 DREMS 官網等）：字體與內文相同，只加底線 */
.pitem p a.dlink{text-decoration:underline;text-underline-offset:2px}
.pitem p a.dlink:hover{color:var(--accent)}
.pitem .ask{display:inline-block;margin-top:auto;padding-top:10px;font-size:11.4px;color:var(--muted)}
.pwide{grid-column:1/-1}
.pwide .pimg{aspect-ratio:auto;background:var(--panel);padding:10px}
.pwide .pimg img{object-fit:contain;width:auto;height:auto;max-width:100%;max-height:620px}
/* 文件型圖片（台電合格廠商名冊等）：內文要看得清楚，縮小會整張糊掉 */
.pitem.docfig .pimg{aspect-ratio:auto;background:#fff;padding:6px;overflow-x:auto}
.pitem.docfig .pimg img{width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain}
.pitem.docfig .zoomhint{display:inline-block;margin-top:8px;font-size:11.6px;font-weight:700;
  color:var(--accent);border:1px dashed var(--accent);border-radius:999px;padding:2px 10px}
@media(max-width:900px){
  /* 手機：文件型大圖「整張縮到卡片寬度」（2026-09-18 小哥指定：名冊整張一次看到底，
     字會變小、要看清楚請點圖開原尺寸）。不再用 1080px + 卡片內滑動的舊做法。 */
  .pitem.docfig .pimg{min-width:0;max-width:100%}
  .pitem.docfig .pimg img{width:100%;max-width:100%;height:auto}
}
/* 多圖商品卡（同一產品兩張圖：外觀圖＋規格圖） */
.pitem.pgal .pimg{aspect-ratio:auto;background:var(--panel);padding:10px;display:grid;
  grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pitem.pgal .pimg a{display:block;background:#fff;border:1px solid var(--line)}
.pitem.pgal .pimg img{width:100%;height:auto;max-height:560px;object-fit:contain}
.pitem.pgal .zoomhint{display:inline-block;margin-top:8px;font-size:11.6px;font-weight:700;
  color:var(--accent);border:1px dashed var(--accent);border-radius:999px;padding:2px 10px}
@media(max-width:700px){
  .pitem.pgal .pimg{grid-template-columns:1fr}
  .pitem.pgal .pimg img{max-height:none}
}
@media(max-width:1080px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.pgrid{grid-template-columns:1fr}.catnav{grid-template-columns:1fr}}
.tiny{font-size:11.6px;color:var(--muted);margin:16px 0 0;line-height:1.7}
[data-theme="dark"] .pimg{background:#fafafa}
/* LINE 群組按鈕（標題旁） */
.h1row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.h1row h1{flex:0 1 auto;min-width:0}
@media(min-width:1081px){ .h1row h1{max-width:calc(100% - 236px)} }   /* 讓標題旁的 LINE 按鈕真的排在同一列 */
.linebtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;background:#06c755;color:#fff;
  border-radius:3px;padding:9px 14px;margin-bottom:16px;line-height:1.28;white-space:nowrap;
  box-shadow:0 6px 16px rgba(6,199,85,.22);transition:.16s}
.linebtn:hover{background:#05b34c}
.linebtn .lbi{font-size:16px;flex:0 0 auto}
.linebtn .lbtx{display:block;text-align:left}
.linebtn .lbtx b{display:block;font-size:14px;font-weight:800;letter-spacing:.2px}
.linebtn .lbtx i{display:block;font-style:normal;font-size:11px;opacity:.92;letter-spacing:.1px}
.linebtn.small .lbtx b{font-size:13px}
.linebtn.small .lbtx i{font-size:10.4px}
.linegrid{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 0}
#lineaccounts{scroll-margin-top:26px}
.linegrid .linebtn{margin-bottom:0}
@media(max-width:640px){
  .linebtn .lbtx i{font-size:10px}
  .linebtn{white-space:normal}
}
/* 聯絡表單 */
form.inquiry{display:grid;gap:12px;margin-top:6px;max-width:660px}
form.inquiry input,form.inquiry select,form.inquiry textarea{width:100%;padding:11px 13px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:14px;font-family:inherit}
form.inquiry textarea{min-height:116px;resize:vertical}
form.inquiry button{justify-self:start}
.formnote{font-size:12.4px;color:var(--muted);margin:6px 0 0}
#ok{display:none;font-size:14.4px;font-weight:700;color:#0f6b3f}
#err{display:none;font-size:14.4px;font-weight:700;color:#b4320e}
[data-theme="dark"] #ok{color:#7ee2a8}
[data-theme="dark"] #err{color:#ffb08a}
footer{padding:26px 0 40px;font-size:12.6px;color:var(--muted)}
.mobilebar{display:none}
.mobilebar-desk{display:block}
@media(max-width:1080px){
  /* 上方導覽列在手機／平板：logo＋☰＋🌙 一列；選單收成下拉；電話與 LINE 鈕（同原本側欄）不顯示 */
  .tb-top{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .tb-top .logo img{height:36px}
  .sidequal{order:9;flex:1 1 100%;padding:6px 10px;font-size:10.8px;border-left-width:2px}
  .tb-tel,.tb-actions .btn-line,.mobilebar-desk{display:none}
  .mobilebar{display:flex;align-items:center;gap:8px}
  .mobilebar .themebtn{width:38px;padding:8px}
  .tb-nav{display:none;border-top:0}
  .tb-nav.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:var(--panel);padding:6px 16px 14px;border-bottom:1px solid var(--line);z-index:55}
  .tb-nav.open a{padding:12px 2px;border-bottom:1px solid var(--line);border-top:0}
  h1{font-size:36px}
  .pagehero h1{font-size:30px}
  .wrap{padding:0 22px}
}
@media(max-width:760px){
  .steps{grid-template-columns:1fr 1fr}
  .steps .st{border-right:0;border-bottom:1px solid var(--line)}
  .pcards{grid-template-columns:1fr}
}
@media(max-width:640px){
  h1{font-size:28px}
  /* 區塊標題：左側小標籤（.k）是 nowrap，會把中文標題擠成一行一字的細長條
     → 標籤與標題改成上下兩行（2026-09-18 小哥指定） */
  .sec-head{flex-wrap:wrap;gap:4px 14px}
  .sec-head span.k{white-space:normal}
  .sec-head h2,.sec-head h3{flex:1 1 100%;font-size:25px}
  .blk ul,.plist ul{columns:1}
  .whys{grid-template-columns:1fr}
  .hero-facts{grid-template-columns:1fr 1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line)}
  .heroimg img{height:210px}
  table.spec{font-size:12.8px}
}