:root{
  /* 色彩 */
  --calc-bg: #f0f6ff;
  --calc-text: #333333;
  --calc-muted: #667085;
  --calc-brand: #005daa; /* 主藍 */
  --calc-brand-dark: #003366;
  --calc-accent: #0077cc; /* 次要按鈕 */
  --calc-accent-hover: #005fa3;
  --calc-panel: #ffffff;
  --calc-panel-alt: #f0f6ff;
  --calc-border: #e2e8f0;
  --calc-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* 二聯式色系（沿用主藍） */
  --inv-two-frame: var(--calc-brand);
  --inv-two-stamp-bg: var(--calc-brand);

  /* 圓角 / 間距 / 字級 */
  --calc-radius-sm: 6px;
  --calc-radius-md: 10px;
  --calc-radius-lg: 12px;
  --calc-space-1: 4px;
  --calc-space-2: 8px;
  --calc-space-3: 12px;
  --calc-space-4: 16px;
  --calc-space-5: 20px;
  --calc-space-6: 24px;
  --calc-space-7: 32px;
  --calc-h1: 2rem;
  --calc-h2: 1.5rem;
  --calc-h3: 1.15rem;
  --calc-p: 1rem;
}
.calc-wrap{
  background: var(--calc-bg);
  color: var(--calc-text);
  padding: var(--calc-space-6) var(--calc-space-4);
}
.calc-container{
  max-width: 1080px;
  margin: 0 auto;
}
.calc-wrap, .calc-container{
  height: auto !important;
  overflow: visible !important;
}
/* ---------- 標題／錨點 ---------- */
.calc-header{ margin-bottom: var(--calc-space-6); }
.calc-header h1, .calc-header h2{
  margin: 0 0 var(--calc-space-3);
  line-height: 1.25;
  color: var(--calc-brand);
}
.calc-header h1{ font-size: var(--calc-h1); }
.calc-header h2{ font-size: var(--calc-h2); }

.calc-anchor{
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc-space-3);
  margin: var(--calc-space-3) 0;
}
.calc-anchor a{
  display: inline-flex;
  align-items: center;
  gap: var(--calc-space-2);
  padding: 8px 12px;
  border-radius: var(--calc-radius-md);
  border: 1px solid var(--calc-border);
  background: #ffffff;
  color: var(--calc-brand);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 180ms ease;
}
.calc-anchor a:hover{
  border-color: var(--calc-brand);
  color: #ffffff;
  background: var(--calc-brand);
}
.calc-anchor a.active{
  border-color: var(--calc-brand);
  background: var(--calc-panel-alt);
  color: var(--calc-brand-dark);
}

/* ---------- 卡片 ---------- */
.calc-card{
  background: var(--calc-panel);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-lg);
  box-shadow: var(--calc-shadow);
  padding: var(--calc-space-6);
  margin-bottom: var(--calc-space-6);
  display: none;
}
.calc-card.active{ display: block; }
.calc-card .calc-title{
  font-size: var(--calc-h2);
  color: var(--calc-brand);
  margin-bottom: var(--calc-space-4);
  line-height: 1.35;
}
/* ---------- 表單 ---------- */
.calc-form{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--calc-space-3);
  margin-bottom: var(--calc-space-5);
}

.calc-form > .calc-form {
  display: contents;
}

.calc-col-12{ grid-column: span 12; }
.calc-col-6 { grid-column: span 6; }
.calc-col-4 { grid-column: span 4; }
.calc-col-3 { grid-column: span 3; }

.calc-label{
  display: block;
  font-size: 0.9rem;
  color: var(--calc-muted);
  margin-bottom: var(--calc-space-2);
}
.calc-select,
.calc-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--calc-radius-md);
  border: 1px solid var(--calc-border);
  background: #ffffff;
  color: var(--calc-text);
  outline: none;
  font-size: 1rem;
}

.calc-radio-group{
  display: flex;
  flex-wrap: wrap;
  gap: var(--calc-space-2);
}
.calc-radio{
  display: inline-flex;
  align-items: center;
  gap: var(--calc-space-2);
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--calc-border);
  cursor: pointer;
}
.calc-radio input{ accent-color: var(--calc-brand); }

.calc-help{
  color: var(--calc-muted);
  font-size: 0.85rem;
  margin-top: var(--calc-space-2);
}
/* 統編檢核狀態色（與 JS 對齊） */
.calc-help.status-ok{ color:#0a7a31; }
.calc-help.status-bad{ color:#b42318; }

/* ---------- 結果面板 ---------- */
.calc-panel{
  background: var(--calc-panel-alt);
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius-md);
  padding: var(--calc-space-5);
}
.calc-section-title{
  font-size: var(--calc-h3);
  color: var(--calc-brand);
  margin: 0 0 var(--calc-space-3);
  font-weight: 700;
}

#personResult, #companyResult{ margin-top: var(--calc-space-3); }
#personResult, #companyResult{
  position: static !important;
  transform: none !important;
}

.calc-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--calc-space-3) 0;
  border-bottom: 1px dashed #d0d7e2;
}
.calc-row:last-child{ border-bottom: 0; }
.calc-row .k{ color: var(--calc-muted); font-size: 0.95rem; }
.calc-row .v{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1.05rem;
}

/* ---------- 小標籤 ---------- */
.calc-pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid var(--calc-border);
  margin-left: var(--calc-space-2);
  color: var(--calc-muted);
}
.calc-pill.warn{ color:#f59e0b; border-color:#f59e0b; background:#fff7ed; }
.calc-pill.note{ color:var(--calc-brand); border-color:var(--calc-brand); background:#eff6ff; }

/* ---------- 按鈕群 ---------- */
.calc-actions{
  display: flex;
  gap: var(--calc-space-2);
  flex-wrap: wrap;
  margin-top: var(--calc-space-3);
}
.calc-btn{
  background: #ffffff;
  color: var(--calc-brand);
  border: 1px solid var(--calc-brand);
  border-radius: var(--calc-radius-md);
  padding: 10px 14px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 160ms ease;
}
.calc-btn:hover{ background: var(--calc-brand); color:#ffffff; }

.calc-btn.primary{
  background: var(--calc-accent);
  border-color: var(--calc-accent);
  color:#ffffff;
}
.calc-btn.primary:hover{
  background: var(--calc-accent-hover);
  border-color: var(--calc-accent-hover);
}

/* ---------- 備註 ---------- */
.calc-foot{
  margin-top: var(--calc-space-4);
  font-size: 0.85rem;
  color: var(--calc-muted);
  line-height: 1.6;
}

/* ---------- 二、三式聯切換 ---------- */
.hidden{ display:none; }
.inv-preview{ margin-top: var(--calc-space-3); }
/* === 三聯式預覽的原始 <table>：把每一列固定高度 === */
.inv-preview table {
  border-collapse: collapse; /* 以免高度被邊框/間距影響 */
  table-layout: fixed;       /* 讓欄寬/列高更可控 */
}
/* 固定所有列的高度（您可改成 44px / 56px） */
.inv-preview table tr {
  height: 25px;
}
/* 同步給儲存格高度，避免部分瀏覽器只套到 tr 不套到 td/th 的情況 */
.inv-preview table th,
.inv-preview table td {
  height: 25px;
  vertical-align: middle; /* 單行文字垂直置中；不靠 padding */
}

/* === 標題列基礎樣式（三聯式） === */
.inv-preview table tr:first-child th#invThreeHeaderTitle {
  font-weight: 800;
  text-align: center; /* 第二行（月份）維持置中 */
  letter-spacing: .15em;
  padding: 8px 12px;
  vertical-align: middle;
  border: 1px solid var(--calc-brand);
}

/* === 上排容器：三欄 Grid（左/中/右），讓「TP 代碼」靠左、「標題」置中 === */
.inv-preview #invThreeHeaderTitle .inv-head-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左 / 中 / 右 */
  align-items: center;
  width: 100%;
}
/* 左側代碼靠左、字距和粗細可微調 */
.inv-preview #invThreeHeaderTitle .left {
  justify-self: start;
  letter-spacing: .05em; /* 比標題窄的字距，更像編碼 */
  font-weight: 700;
}
/* 中間標題置中、維持較寬字距 */
.inv-preview #invThreeHeaderTitle .center {
  justify-self: center;
  letter-spacing: .15em;
  font-weight: 800;
}
/* 右側留白（或未來放其他欄位用） */
.inv-preview #invThreeHeaderTitle .right {
  justify-self: end; /* 如需放字，預設靠右 */
}
/* 若您改成 <div class="month">…</div> 而不用 <br>，可加這段（選用） */
.inv-preview #invThreeHeaderTitle .month {
  display: block;
  text-align: center;
}
/* ===== 原始表格：簡易樣式（不影響既有 inv-grid / duplicate） ===== */
.inv-table-simple { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 12px 0; background: #fff; }
.inv-table-simple th,
.inv-table-simple td { border: 1px solid #d0d7e2; padding: 6px 8px; vertical-align: top; }
.inv-table-simple th { background: var(--calc-panel-alt); color: var(--calc-brand); font-weight: 700; text-align: center; }

/* 數值對齊與等寬數字（金額欄位） */
.inv-table-simple td span#previewNet,
.inv-table-simple td span#previewTax,
.inv-table-simple td span#previewGross,
.inv-table-simple td span#twoTotal {
  text-align: right; display: inline-block; width: 100%;
  font-variant-numeric: tabular-nums;
}


/* 保險型：在章位格的左側補一條垂直線（只在 inv-table-simple 表格內作用） */
.inv-table-simple td.stamp-cell {
  position: relative;
}
.inv-table-simple td.stamp-cell::before {
  content: "";
  position: absolute;
  left: -1px; /* 線貼齊左邊 */
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d0d7e2; /* 與現有邊框顏色一致 */
}
/* 統編列：文字與分格緊貼排列、靠左 */
.inv-taxid-row{
  display: inline-flex;
  align-items: center;
  gap: 4px; /* label 與外框距離 */
}
/* 外框：一條長方框（上/下/左右皆有線、無圓角） */
.inv-taxid-row .taxid-boxes{
  display: inline-flex; /* 横向排 */
  align-items: center;
  height: 32px; /* 外框高度 */
  border: 1.5px solid #222; /* 細線外框 */
  border-radius: 0; /* 無圓角 */
  background: #fff;
}
/* 單格：只畫左邊細線，形成 8 格分隔；文本置中 */
.taxid-box{
  width: 30px; /* 單格寬度（可微調 28~32） */
  height: 100%;
  line-height: 30px; /* 垂直置中 */
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #111;
  border-left: 1.5px solid #222; /* 內部分隔線（只畫左邊） */
  box-sizing: border-box;
}
/* 第一格避免與外框左線重疊 */
.taxid-box:first-child{ border-left: none; }
/* 新增：日期區塊，緊貼在外框後、保留小間距 */
.inv-taxid-date{
  display: inline-flex;
  align-items: center;
  margin-left: 8px; /* 格子與日期之間的距離（可調 6~12） */
  color: var(--calc-text);
}
.inv-taxid-date .muted{ color: var(--calc-muted); } /* 若未來要淡色處理 */

/* ===== 二聯式補丁（與三聯式一致） ===== */
.inv-preview table tr:first-child th#invTwoHeaderTitle,
.inv-preview #invTwoHeaderTitle {
  font-weight: 800;
  text-align: center;
  letter-spacing: .15em;
  padding: 8px 12px;
  vertical-align: middle;
  border: 1px solid var(--calc-brand);
  background: var(--calc-panel-alt);
  color: var(--calc-brand);
}
.inv-preview #invTwoHeaderTitle .inv-head-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.inv-preview #invTwoHeaderTitle .left {
  justify-self: start;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--calc-brand);
}
.inv-preview #invTwoHeaderTitle .center {
  justify-self: center;
  letter-spacing: .15em;
  font-weight: 800;
  color: var(--calc-brand);
}
.inv-preview #invTwoHeaderTitle .right {
  justify-self: end;
}
/* 統一編號／稅率 */
.calc-form #buyerTaxId,
.calc-form #taxRate,
.calc-form #buyerName,
.calc-form #netAmount,
.calc-form #grossInput,
.calc-form #twoIssueDate,
.calc-form #twoTaxRate,
.calc-form #twoGross,
.calc-form input[type="date"].calc-input {
  max-width: none;
  width: 100%;
  box-sizing: border-box;

}


/* ===== 必填驗證：紅框與錯誤訊息 ===== */
.must {
  color: #b42318;
}

/* ===== 紅色提示膠囊：外觀沿用左側按鈕，但用紅色 ===== */
.check.note {
  display: inline-flex;
  align-items: center;
  gap: var(--calc-space-2);
  padding: 8px 12px;
  border-radius: var(--calc-radius-md);
  border: 1px solid #b42318;           /* 紅框：沿用您 .status-bad 的紅色系 */
  background: #fff7f5;                  /* 淡紅底 */
  color: #b42318;                       /* 紅字 */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* 滑過可略深，與左側按鈕的互動一致 */
.check.note:hover {
  background: #ffecea;
  border-color: #912018;
  color: #912018;
}

/* 讓它也能被通用的 hidden 控制（您原本就有 .hidden） */
.check.note.hidden {
  display: none !important;
}

.calc-input.error,
.calc-select.error {
  border-color: #b42318;          /* 與 .status-bad 相同色系 */
  box-shadow: 0 0 0 3px rgba(180,35,24,.12);
}

.calc-help.inline-error {
  color: #b42318;                 /* 錯誤訊息顏色 */
  font-size: 0.85rem;
  margin-top: 6px;
}

/* 三聯式預覽整體顯示/隱藏（比 .hidden 更語意化） */
.inv-preview.hidden {
  display: none !important;
}
.calc-form.hidden { display: none !important; }


/* === 手機板（小螢幕）直排：一欄一列 === */
@media (max-width: 768px) {
  /* 表單容器：改為單欄直排 */
  .calc-form {
    grid-template-columns: 1fr; /* 取代原本 12 欄 */
    gap: var(--calc-space-3);
  }

  /* 任何「分欄」在手機上都改成全寬 */
  .calc-col-6,
  .calc-col-4,
  .calc-col-3,
  .calc-col-12 {
    grid-column: 1 / -1 !important;
  }

  /* 單一輸入元件最大寬度取消限制，改為佔滿螢幕寬度 */

@media (max-width: 768px) {
  .calc-form #buyerTaxId,
  .calc-form #taxRate,
  .calc-form #buyerName,
  .calc-form #netAmount,
  .calc-form #grossInput,
  .calc-form #twoIssueDate,
  .calc-form #twoTaxRate,
  .calc-form #twoGross,
  .calc-form input[type="date"].calc-input {
    max-width: 100% !important;
  }
}


  /* 單選群組：改直向堆疊、拉大觸控間距 */
  .calc-radio-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--calc-space-2);
  }
  .calc-radio {
    width: 95%;
    padding: 10px 12px;
  }

  /* 跳錨選單（頂部的「選擇計算機」按鈕群）：改為單列捲動或直排 */
  .calc-anchor {
    flex-direction: column;
    align-items: stretch;
  }
  .calc-anchor a {
    width: 95%;
    justify-content: center;
  }

  /* 結果面板：縮小內距以提升可視高度 */
  .calc-panel {
    padding: var(--calc-space-4);
  }

  /* 每列結果：改為上下兩行，避免數值被擠壓 */
  .calc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .calc-row .k { font-size: 0.95rem; }
  .calc-row .v { font-size: 1.05rem; }

  /* 按鈕群：直排＆全寬，方便拇指操作 */
  .calc-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .calc-btn {
    width: 100%;
  }

  /* 發票預覽表格：維持可讀性（小螢幕上加一點外距） */
  .inv-preview {
    margin-top: var(--calc-space-3);
  }
  .inv-table-simple {
    font-size: 0.95rem;
  }

  /* 統編格（手開發票示意）：避免超出螢幕，略微縮小單格寬度 */
  .taxid-box {
    width: 26px;
    line-height: 26px;
    font-size: 0.95rem;
  }
  .inv-taxid-row .taxid-boxes {
    height: 28px;
  }
}


/* === 發票預覽：等比例縮放（手機保持電腦版比例） === */

/* 1) 外層：縮放框（佔位修正用） */
.inv-scale-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;    /* 手機上避免出現水平捲軸 */
}

/* 2) 內層：實際被 scale 的內容（整張預覽表格） */
.inv-scale-inner {
  transform-origin: top left;
}

/* 3) 手機版：依視窗寬度計算 scale，整體縮小 */
@media (max-width: 768px) {
  /* 設計寬度（依您桌面版設計而定） */
  :root { --inv-design-width: 1080px; }

  /* 取得視窗寬度：使用 100vw（您若要扣掉左右內距可改用 .calc-container 的實際寬度） */
  :root { --inv-vw: 80vw; }

  /* 計算縮放係數（0~1 之間）。可再加上最小值保護 clamp(0.6, …, 1) 以免太小 */
  :root { --inv-scale: calc(var(--inv-vw) / var(--inv-design-width)); }

  /* 讓內層縮小 */
  .inv-scale-inner {
    transform: scale(var(--inv-scale));
    /* 注意：縮小之後，內容的「視覺寬度」變成 inv-design-width * scale */
    width: var(--inv-design-width);       /* 內層維持設計寬度，便於等比縮放 */
  }

  /* 讓外層佔位回到手機寬：把縮小後的高度補回來 */
  .inv-scale-wrap {
    /* 用縮小後的內容高度當佔位。這裡由於高度不可直接用 calc，
       我們改用 block formatting 的常見技巧：讓外層高度 = 內層高度 * scale。
       最簡做法：把內層設為 inline-block，外層用 transform 不影響高度，所以改用以下方式： */
  }

  /* 讓縮小內容不影響外層高度：用 CSS 自動高度補償 */
  .inv-scale-inner {
    display: inline-block; /* 使其高度可被外層計算 */
  }

  /* 外層高度補償：用 scale 倒推（無法直接計算），採「視覺補償」方式： */
  /* ——方法 1：允許垂直捲動：*/
  .inv-scale-wrap {
    overflow-y: visible;
  }

  /* ——方法 2（更佳）：把表格縮小後置於一個等比框中 */
  .inv-fixed-ratio {
    /* 依設計高度生成一個等比盒（若您知道表格大致高度，可輸入） */
    /* 例如桌面約 1500px 高，則： */
    --inv-design-height: 750px;          /* 可依實測微調 */
    position: relative;
    height: calc(var(--inv-design-height) * var(--inv-scale));
  }
  .inv-fixed-ratio .inv-scale-inner {
    position: absolute;
    left: 0;
    top: 0;
  }
}

/* 補充：在極窄手機避免字太小，可在 360px 以下放大一點（選擇性） */
@media (max-width: 360px) {
  :root { --inv-scale: clamp(0.7, calc(var(--inv-vw) / var(--inv-design-width)), 1); }
}