/* ============================================================
   問問貓 x 美股開戶選哪家｜真實總成本試算器樣式
   SUB-WO-20260910-001-04 美編｜站色 #556B2F 深橄欖（Howard 2026-09-08 定）
   規則：黃底/金底不放白字；一個框就好不疊框；最便宜列＝淺橄欖底＋深字。
   掛載：<link rel="stylesheet" href="/css/calculator.css">，區塊根節點 id="cost-calc"。
   ------------------------------------------------------------
   建議 HTML 結構（class 可省，選擇器已盡量寬容）：
   <section id="cost-calc" class="card">
     <h2>真實總成本試算</h2>
     <form class="calc-form">
       <label class="calc-field"><span>投入金額（US$）</span><input type="number"></label>
       <label class="calc-field"><span>頻率</span><select>單筆/每月/每季</select></label>
       <label class="calc-field"><span>身份</span><select>…</select></label>
       <button type="button" class="calc-run">試算</button>
     </form>
     <div class="calc-groups">
       <div class="calc-group" data-kind="sub"><h3>複委託</h3><table>…</table></div>
       <div class="calc-group" data-kind="ovs"><h3>海外券商</h3><table>…</table></div>
     </div>
   </section>
   表格列：<tr class="is-best">（最便宜）；欄位 td 加 data-label="手續費" 供手機卡片化；
   徽章：<span class="calc-badge sub">複委託</span> / <span class="calc-badge ovs">海外</span>
   ============================================================ */

#cost-calc {
  --cc-c1: var(--c1, #556B2F);
  --cc-deep: var(--c1-deep, #3B4B20);
  --cc-light: var(--c1-light, #EEF2E3);
  --cc-soft: var(--c1-soft, #E7EBDE);
  --cc-c2: var(--c2, #8A9A5B);
  --cc-ovs: var(--ovs, #6B4F2A);
  --cc-ink: var(--ink, #1E1B18);
  --cc-muted: var(--muted, #5A5148);
  --cc-line: var(--line, #E4DFD4);
  --cc-white: #FFFFFF;
  color: var(--cc-ink);
  line-height: 1.6;
}

/* ---------- 標題 ---------- */
#cost-calc > h2, #cost-calc .calc-title {
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  font-size: 23px;
  margin: 0 0 6px;
  border-left: 6px solid var(--cc-c1);
  padding-left: 12px;
  color: var(--cc-ink);
}
#cost-calc .calc-lead { margin: 0 0 18px; color: var(--cc-muted); font-size: 14.5px; }

/* ---------- 輸入區 ---------- */
#cost-calc .calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
  align-items: end;
  background: var(--cc-light);
  border: 1.5px solid var(--cc-c2);
  border-radius: 12px;
  padding: 18px 18px 16px;
  margin: 0 0 22px;
}
#cost-calc .calc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#cost-calc .calc-field > span, #cost-calc label > span {
  font-size: 13px; font-weight: 800; color: var(--cc-deep); letter-spacing: .02em;
}
#cost-calc input[type="number"], #cost-calc input[type="text"], #cost-calc select {
  font: inherit; font-size: 16px; font-weight: 700;
  color: var(--cc-ink); background: var(--cc-white);
  border: 1.5px solid var(--cc-c1); border-radius: 10px;
  padding: 10px 12px; min-height: 44px; width: 100%; box-sizing: border-box;
  outline: none;
}
#cost-calc input:focus, #cost-calc select:focus {
  border-color: var(--cc-deep);
  box-shadow: 0 0 0 3px var(--cc-soft);
}
#cost-calc .calc-unit { position: relative; }
#cost-calc .calc-unit::before {
  content: attr(data-unit); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 800; color: var(--cc-muted); pointer-events: none;
}
#cost-calc .calc-unit input { padding-left: 44px; }
#cost-calc .calc-run, #cost-calc button[type="submit"] {
  font: inherit; font-size: 16px; font-weight: 900; cursor: pointer;
  color: var(--cc-white); background: var(--cc-c1);
  border: 2px solid var(--cc-deep); border-radius: 10px;
  padding: 11px 26px; min-height: 44px; white-space: nowrap;
  box-shadow: 0 3px 0 var(--cc-deep);
  transition: transform .08s ease, background .15s ease;
}
#cost-calc .calc-run:hover { background: var(--cc-deep); }
#cost-calc .calc-run:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cc-deep); }
#cost-calc .calc-note { font-size: 12.5px; color: var(--cc-muted); margin: 6px 0 0; }

/* ---------- 結果總結列（可選） ---------- */
#cost-calc .calc-summary {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline;
  margin: 0 0 14px; font-size: 14.5px;
}
#cost-calc .calc-summary b { color: var(--cc-deep); font-size: 18px; }

/* ---------- 兩群並排 ---------- */
#cost-calc .calc-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(620px, 1fr)); /* 容器 ≥1260px 才並排，否則上下分群、表格不必橫捲 */
  gap: 20px;
  align-items: start;
}
#cost-calc .calc-group { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#cost-calc .calc-group > table { min-width: 600px; }
#cost-calc .calc-group > h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 900; margin: 0 0 8px; color: var(--cc-ink);
}
#cost-calc .calc-group > h3::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-c1); flex: none;
}
#cost-calc .calc-group[data-kind="ovs"] > h3::before { background: var(--cc-ovs); }
#cost-calc .calc-group > h3 small { font-weight: 600; color: var(--cc-muted); font-size: 12.5px; }

/* ---------- 結果表 ---------- */
#cost-calc table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--cc-white);
  border: 1.5px solid var(--cc-line); border-radius: 12px; overflow: hidden;
  margin: 0; font-size: 14px;
}
#cost-calc thead th {
  background: var(--cc-c1); color: var(--cc-white);
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  padding: 10px 10px; text-align: left; border: none; white-space: nowrap;
}
#cost-calc tbody td {
  padding: 10px 10px; border: none; border-top: 1px solid var(--cc-line);
  vertical-align: middle;
}
#cost-calc tbody tr:first-child td { border-top: none; }
#cost-calc th.num, #cost-calc td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cost-calc td.calc-logo { width: 44px; padding-right: 0; }
#cost-calc td.calc-logo img, #cost-calc .calc-logo img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: contain;
  background: var(--cc-white); border: 1px solid var(--cc-line); display: block;
}
#cost-calc td.calc-name { font-weight: 800; min-width: 120px; }
#cost-calc td.calc-name a { color: var(--cc-c1); text-decoration: none; }
#cost-calc td.calc-name a:hover { color: var(--cc-deep); text-decoration: underline; }
#cost-calc td.calc-name small { display: block; font-weight: 500; color: var(--cc-muted); font-size: 12px; }
#cost-calc td.calc-total { font-weight: 900; color: var(--cc-deep); font-size: 15.5px; }
#cost-calc td.calc-rank { text-align: center; width: 48px; }
#cost-calc .calc-rank-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--cc-c1); color: var(--cc-c1); font-weight: 900; font-size: 13px;
}

/* 最便宜列：淺橄欖底＋深字（不用白字、不疊第二框） */
#cost-calc tr.is-best td, #cost-calc tr.best td, #cost-calc tr.calc-best td {
  background: var(--cc-light);
  color: var(--cc-deep);
}
#cost-calc tr.is-best td.calc-name a, #cost-calc tr.best td.calc-name a { color: var(--cc-deep); }
#cost-calc tr.is-best td:first-child, #cost-calc tr.best td:first-child, #cost-calc tr.calc-best td:first-child {
  box-shadow: inset 4px 0 0 var(--cc-c1);
}
#cost-calc tr.is-best .calc-rank-no, #cost-calc tr.best .calc-rank-no {
  background: var(--cc-c1); color: var(--cc-white);
}
#cost-calc .calc-best-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--cc-c1); color: var(--cc-white); font-size: 11px; font-weight: 800; vertical-align: middle;
}

/* 類型徽章 */
#cost-calc .calc-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; line-height: 1.5; white-space: nowrap;
  color: var(--cc-white); background: var(--cc-c1);
}
#cost-calc .calc-badge.ovs, #cost-calc .calc-badge[data-kind="ovs"] { background: var(--cc-ovs); }
#cost-calc .calc-badge.sub, #cost-calc .calc-badge[data-kind="sub"] { background: var(--cc-c1); }

/* 待查核 / 估算標記 */
#cost-calc .calc-est { color: var(--cc-muted); font-weight: 600; font-size: 12px; }
#cost-calc .calc-warn { color: var(--cc-deep); font-weight: 700; }

/* 空狀態 */
#cost-calc .calc-empty {
  padding: 22px; text-align: center; color: var(--cc-muted);
  border: 1.5px dashed var(--cc-c2); border-radius: 12px; background: var(--cc-white);
}

/* ---------- 響應式：手機單欄、表格卡片化 ---------- */
@media (max-width: 760px) {
  #cost-calc .calc-form { grid-template-columns: 1fr; padding: 14px; }
  #cost-calc .calc-groups { grid-template-columns: 1fr; }
  #cost-calc .calc-group { overflow-x: visible; }
  #cost-calc .calc-group > table { min-width: 0; }
  #cost-calc table, #cost-calc thead, #cost-calc tbody, #cost-calc tr, #cost-calc td { display: block; }
  #cost-calc thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  #cost-calc table { border: none; background: transparent; overflow: visible; }
  #cost-calc tbody tr {
    background: var(--cc-white); border: 1.5px solid var(--cc-line); border-radius: 12px;
    margin: 0 0 12px; padding: 10px 12px 8px;
    display: grid; grid-template-columns: 44px 1fr auto; column-gap: 10px; align-items: center;
  }
  #cost-calc tbody tr.is-best, #cost-calc tbody tr.best, #cost-calc tbody tr.calc-best {
    background: var(--cc-light); border-color: var(--cc-c1);
  }
  #cost-calc tbody td { border: none; padding: 4px 0; background: transparent !important; }
  #cost-calc tbody tr.is-best td:first-child, #cost-calc tbody tr.best td:first-child { box-shadow: none; }
  #cost-calc td.calc-logo { grid-column: 1; grid-row: 1 / span 2; }
  #cost-calc td.calc-name { grid-column: 2; grid-row: 1; }
  #cost-calc td.calc-type { grid-column: 2; grid-row: 2; }
  #cost-calc td.calc-rank { grid-column: 3; grid-row: 1 / span 2; width: auto; }
  #cost-calc td.num, #cost-calc td.calc-total {
    grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px dashed var(--cc-line); padding: 6px 0; text-align: left;
  }
  #cost-calc td.num::before, #cost-calc td.calc-total::before {
    content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--cc-muted);
  }
  #cost-calc td.calc-total { font-size: 17px; }
}

@media print {
  #cost-calc .calc-form, #cost-calc .calc-run { display: none !important; }
  #cost-calc table { border: 1px solid #999; }
}