/* ============================================================
   單位換算器頁面樣式（unit-converter.html 專用）
   全部選擇器限定在 .uc 底下，避免影響共用 header／footer／麵包屑。
   ============================================================ */
.uc{
  --navy:#0d1b35;
  --uc-text:#1e293b;
  --uc-muted:#64748b;
  --uc-line:#e7ebf2;
  --uc-yellow:#ffbd28;
  --uc-shadow:0 18px 50px rgba(15,23,42,.08);
  --uc-radius:20px;
  color:var(--uc-text);
  line-height:1.65;
}

/* ---- 主版面：換算器 + 側欄 ---- */
.uc .layout{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:18px;align-items:start}
.uc .card{background:rgba(255,255,255,.97);border:1px solid var(--uc-line);border-radius:var(--uc-radius);box-shadow:var(--uc-shadow)}
.uc .converter{padding:28px}
.uc .uc-hero{display:flex;justify-content:space-between;gap:26px;align-items:center;margin-bottom:18px}
.uc h1{font-size:34px;line-height:1.2;margin:14px 0 8px;color:var(--navy);letter-spacing:-1px}
.uc .lead{margin:0;color:var(--uc-muted)}
.uc .hero-art{
  flex:0 0 330px;height:132px;border-radius:24px;overflow:hidden;position:relative;
  background:linear-gradient(145deg,#fff7dc,#fffdf5);border:1px solid #faedc4
}
.uc .hero-art:before,.uc .hero-art:after{content:"";position:absolute;border-radius:50%;background:#ffe79d}
.uc .hero-art:before{width:170px;height:170px;right:-48px;top:30px}
.uc .hero-art:after{width:90px;height:90px;left:22px;bottom:-48px}
.uc .art-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:28px;font-size:54px;z-index:2}

/* ---- 分類列 ---- */
.uc .category-strip{display:flex;gap:8px;overflow:auto;padding-bottom:7px;margin:8px 0 18px;scrollbar-width:thin}
.uc .cat-btn{
  border:1px solid var(--uc-line);background:#fff;border-radius:12px;padding:9px 12px;
  white-space:nowrap;font-weight:750;color:#475569;transition:.2s
}
.uc .cat-btn:hover,.uc .cat-btn.active{border-color:#ffcf53;background:#fff7da;color:#7b5300;transform:translateY(-1px)}

/* ---- 換算表單 ---- */
.uc .toolbox{border:1px solid var(--uc-line);border-radius:18px;padding:18px;background:linear-gradient(#fff,#fbfcff)}
.uc .tool-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.uc .tool-title strong{font-size:18px;color:var(--navy)}
.uc .status{font-size:12px;background:#eefbf3;color:#18864b;padding:5px 9px;border-radius:999px;font-weight:800}
.uc .form-grid{display:grid;grid-template-columns:1fr 54px 1fr;gap:14px;align-items:end}
.uc label{display:block;font-weight:800;color:#334155;font-size:13px;margin:0 0 7px}
.uc select,.uc input{
  width:100%;height:52px;border:1px solid #dfe5ee;border-radius:12px;background:#fff;
  padding:0 14px;color:var(--navy);font-weight:700;outline:none;transition:.18s
}
.uc select:focus,.uc input:focus{border-color:#f5bd2d;box-shadow:0 0 0 4px rgba(255,189,40,.14)}
.uc .swap{
  width:46px;height:46px;border-radius:50%;border:1px solid #f3d26b;background:#fff8dd;
  color:#9a6800;font-size:20px;margin-bottom:3px;transition:.2s
}
.uc .swap:hover{transform:rotate(180deg);background:#ffe699}
.uc .value-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.uc .result-box{
  min-height:52px;border:1px solid #aee8c3;background:linear-gradient(135deg,#effdf4,#e8fff0);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px
}
.uc .result-box .number{font-size:24px;font-weight:900;color:#0e2b1a;overflow-wrap:anywhere}
.uc .result-box .unit{color:#2f6d48;font-size:13px;font-weight:800}
.uc .copy-mini{border:0;background:#fff;border-radius:9px;padding:7px 9px;color:#516070}
.uc .actions{display:grid;grid-template-columns:1.2fr .85fr .95fr;gap:12px;margin-top:15px}
.uc .primary,.uc .secondary{height:45px;border-radius:11px;font-weight:900}
.uc .primary{border:0;background:linear-gradient(135deg,#ffb811,#ffc83d);color:#2d2100;box-shadow:0 8px 18px rgba(255,184,17,.22)}
.uc .secondary{border:1px solid var(--uc-line);background:#fff;color:#38445a}

/* ---- 常用換算結果 ---- */
.uc .quick-results{margin-top:18px}
.uc .section-head{gap:12px;margin-bottom:10px}
.uc .section-head h3{margin:0;color:var(--navy);font-size:16px}
.uc .section-head span{font-size:12px;color:var(--uc-muted)}
.uc .result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.uc .mini-result{border:1px solid var(--uc-line);border-radius:10px;padding:10px 11px;background:#fbfcfe}
.uc .mini-result b{display:block;color:var(--navy);font-size:14px}
.uc .mini-result small{color:var(--uc-muted)}
.uc .bottom-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.uc .bottom-actions button{border:1px solid var(--uc-line);background:#fff;border-radius:10px;padding:9px 13px;font-weight:750;color:#526176}
.uc .notice{font-size:12px;color:#8b5e00;background:#fff7d9;border:1px solid #f1d474;border-radius:10px;padding:9px 11px;margin-top:10px}

/* ---- 側欄 ---- */
.uc .side{display:grid;gap:16px}
.uc .side-card{padding:18px}
.uc .side-card h3{margin:0 0 13px;color:var(--navy);font-size:17px}
.uc .quick-link{
  display:flex;align-items:center;justify-content:space-between;border:1px solid var(--uc-line);
  border-radius:11px;padding:11px 12px;margin-top:8px;background:#fff;font-weight:750
}
.uc .quick-link.active{border-color:#b8d5ff;background:#edf6ff;color:#1763b6}
.uc .quick-link span:first-child{display:flex;align-items:center;gap:10px}
.uc .guide{padding-left:20px;margin:0;color:#526176;font-size:14px}
.uc .guide li{margin:9px 0}
.uc .tip{margin-top:13px;border-left:4px solid var(--uc-yellow);background:#fff8e1;padding:12px;border-radius:9px;color:#69501e;font-size:13px}

/* ---- SEO 導言區 ---- */
.uc .seo-hero{
  margin-top:18px;padding:28px;background:
  linear-gradient(135deg,rgba(255,247,218,.95),rgba(255,255,255,.98) 48%,rgba(237,246,255,.85));
  border:1px solid #f0e1ad;border-radius:20px;box-shadow:var(--uc-shadow)
}
.uc .seo-hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:25px;align-items:center}
.uc .seo-hero h2{font-size:27px;line-height:1.35;color:var(--navy);margin:9px 0}
.uc .seo-hero p{margin:0;color:#566379}
.uc .seo-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.uc .seo-stat{background:rgba(255,255,255,.9);border:1px solid var(--uc-line);border-radius:14px;padding:15px}
.uc .seo-stat b{display:block;color:var(--navy);font-size:22px}
.uc .seo-stat span{color:var(--uc-muted);font-size:12px}

/* ---- SEO 內容區 ---- */
.uc .seo-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;margin-top:18px;align-items:start}
.uc .seo-main{display:grid;gap:18px}
.uc .seo-side{display:grid;gap:16px;position:sticky;top:90px}
.uc .seo-section{padding:25px}
.uc .seo-section h2{font-size:24px;color:var(--navy);margin:0 0 9px}
.uc .seo-section h3{font-size:17px;color:var(--navy);margin:0 0 6px}
.uc .seo-section p{color:#566379;margin:7px 0}
.uc .scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:15px}
.uc .scenario-card{border:1px solid var(--uc-line);border-radius:15px;padding:16px;background:linear-gradient(180deg,#fff,#fbfcff)}
.uc .scenario-icon{font-size:28px;margin-bottom:6px}
.uc .scenario-card small{color:var(--uc-muted);display:block}
.uc .example-list{display:grid;gap:10px;margin-top:14px}
.uc .example-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;border:1px solid var(--uc-line);border-radius:13px;padding:13px;background:#fff}
.uc .example-row span:nth-child(2){color:#b37700;font-weight:900}
.uc .formula-box{margin-top:13px;background:#101c34;color:#fff;border-radius:16px;padding:18px;overflow:auto}
.uc .formula-box code{font-family:"SFMono-Regular",Consolas,monospace;font-size:15px;white-space:pre-wrap}
.uc .note-box{margin-top:14px;background:#fff8df;border:1px solid #f3d36c;border-left:5px solid var(--uc-yellow);border-radius:12px;padding:14px;color:#6e5312}
.uc .mistake-list{display:grid;gap:9px;margin-top:13px}
.uc .mistake{display:flex;gap:11px;border:1px solid var(--uc-line);border-radius:12px;padding:12px;background:#fff}
.uc .mistake i{font-style:normal}
.uc .keyword-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.uc .keyword-cloud span{padding:7px 10px;background:#f5f7fa;border:1px solid var(--uc-line);border-radius:999px;font-size:12px;color:#556275}
.uc .toc a{display:block;padding:8px 10px;border-radius:9px;color:#536175;font-size:13px}
.uc .toc a:hover{background:#fff5cd;color:#815800}
.uc .related-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.uc .related-mini button{border:1px solid var(--uc-line);background:#fff;border-radius:10px;padding:10px;text-align:left;font-weight:750;color:#4c5a70}
.uc .related-mini button:hover{border-color:#f0c342;background:#fff8df}
.uc .feature-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.uc .feature-chips>span{padding:7px 11px;border-radius:999px;background:#f3f6fa;border:1px solid var(--uc-line);font-size:13px;font-weight:750;color:#506075}
.uc details{border:1px solid var(--uc-line);border-radius:12px;padding:13px 15px;background:#fff;margin-top:9px}
.uc summary{cursor:pointer;font-weight:850;color:var(--navy)}
.uc details p{margin:9px 0 0;color:#5a677b}
.uc .dynamic-faq details{margin-top:10px}

/* ---- 16 大類卡片 ---- */
.uc .uc-all-tools{margin-top:18px;padding:24px}
.uc .uc-all-tools .section-head{display:flex;align-items:center;justify-content:space-between}
.uc .uc-tool-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:15px}
.uc .uc-tool-card{display:block;border:1px solid var(--uc-line);border-radius:14px;padding:14px;background:#fff;transition:.2s}
.uc .uc-tool-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,23,42,.07);border-color:#f3cb55}
.uc .uc-tool-card .icon{font-size:25px}
.uc .uc-tool-card b{display:block;color:var(--navy);margin-top:5px}
.uc .uc-tool-card small{color:var(--uc-muted)}

/* ---- 熱門關鍵字 ---- */
.uc .seo-tags{margin-top:18px;padding:22px}
.uc .tags{display:flex;flex-wrap:wrap;gap:8px}
.uc .tags a{border:1px solid var(--uc-line);border-radius:999px;padding:7px 11px;color:#556275;background:#fff;font-size:13px}

/* ---- 全部單位表格 Modal ---- */
.uc .modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:80;padding:28px;align-items:center;justify-content:center}
.uc .modal.open{display:flex}
.uc .modal-panel{background:#fff;width:min(860px,100%);max-height:85vh;overflow:auto;border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.24)}
.uc .modal-head{display:flex;justify-content:space-between;align-items:center}
.uc .modal-head button{border:0;background:#f1f5f9;width:36px;height:36px;border-radius:10px}
.uc table{width:100%;border-collapse:collapse;margin-top:14px}
.uc th,.uc td{text-align:left;padding:10px;border-bottom:1px solid var(--uc-line)}
.uc th{color:var(--navy);background:#f8fafc;position:sticky;top:0}

/* ---- RWD ---- */
@media(max-width:980px){
  .uc .layout{grid-template-columns:1fr}
  .uc .side{grid-template-columns:1fr 1fr}
  .uc .hero-art{flex-basis:260px}
  .uc .result-grid{grid-template-columns:repeat(2,1fr)}
  .uc .uc-tool-cards{grid-template-columns:repeat(3,1fr)}
  .uc .seo-layout{grid-template-columns:1fr}
  .uc .seo-side{position:static}
  .uc .seo-hero-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .uc .converter{padding:18px}
  .uc .uc-hero{display:block}
  .uc .hero-art{width:100%;height:110px;margin-top:18px}
  .uc h1{font-size:28px}
  .uc .form-grid{grid-template-columns:1fr}
  .uc .swap{margin:auto;transform:rotate(90deg)}
  .uc .swap:hover{transform:rotate(270deg)}
  .uc .value-row,.uc .actions{grid-template-columns:1fr}
  .uc .result-grid{grid-template-columns:1fr 1fr}
  .uc .side{grid-template-columns:1fr}
  .uc .uc-tool-cards{grid-template-columns:1fr 1fr}
  .uc .scenario-grid{grid-template-columns:1fr}
  .uc .example-row{grid-template-columns:1fr}
  .uc .example-row span:nth-child(2){display:none}
  .uc .hero-art .art-icons{font-size:43px}
}
@media(max-width:440px){
  .uc .result-grid,.uc .uc-tool-cards{grid-template-columns:1fr}
}