/* enhancements.css — Phase 2 + 2.1 */

/* 1. 隱藏跨商品累計 */
.type-total { display: none !important; }
#aggregateCheck { display: none !important; }
#needsInputCard { display: none !important; }

/* ── Phase 4 隱藏(改用公司按鈕當入口) ── */
#analysisCard { display: none !important; }
#benefitsModeSwitch .bms-btn[data-mode="detail"] { display: none !important; }

/* 2. 共用容器 */
.x-card { background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(13,42,58,0.06); margin-bottom:16px; overflow:hidden; border:1px solid var(--border); }
.x-card-header { background:linear-gradient(135deg,#0D2A3A 0%,#143847 100%); color:#fff; padding:12px 18px; font-size:14px; font-weight:700; letter-spacing:1px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.x-card-header .xh-icon { font-size:18px; margin-right:6px; }
.x-card-header.gold  { background:linear-gradient(135deg,#B8860B,#E8A020); }
.x-card-header.teal  { background:linear-gradient(135deg,#1A6B72,#258891); }
.x-card-header.coral { background:linear-gradient(135deg,#D04618,#F05A28); }
.x-card-body { padding:16px 18px; }

/* 3. 需求分析輸入 */
#needsInputCard .x-card-header .toggle-btn { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; padding:4px 12px; border-radius:6px; font-size:12px; cursor:pointer; }
#needsInputCard .x-card-header .toggle-btn:hover { background:rgba(255,255,255,0.25); }
.needs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 18px; }
.needs-field { display:flex; flex-direction:column; gap:4px; }
.needs-field label { font-size:12px; color:var(--gray); font-weight:600; }
.needs-field input, .needs-field select { padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; }
.needs-field input:focus, .needs-field select:focus { outline:2px solid var(--orange); outline-offset:-1px; }
.needs-hint { font-size:11px; color:var(--gray); margin-top:10px; padding:8px 10px; background:var(--orange-light); border-radius:6px; border-left:3px solid var(--orange); }

/* 4. 責任缺口 */
.gap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.gap-item { background:var(--gray-bg); border-radius:10px; padding:14px 14px 12px; border-left:4px solid var(--teal); position:relative; }
.gap-item.danger { border-left-color:var(--red); background:#fff5f5; }
.gap-item.warn   { border-left-color:var(--gold); background:#fffaf0; }
.gap-item.ok     { border-left-color:var(--green); background:#f0fdf4; }
.gap-icon { font-size:18px; margin-bottom:4px; }
.gap-title { font-size:12px; font-weight:700; color:var(--navy); margin-bottom:8px; letter-spacing:0.5px; }
.gap-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; padding:3px 0; }
.gap-row .gr-label { color:var(--gray); }
.gap-row .gr-val { font-weight:700; color:var(--navy); }
.gap-row.gap-result { margin-top:6px; padding-top:8px; border-top:1px dashed #ccc; font-size:13px; }
.gap-row.gap-result .gr-val.is-gap { color:var(--red); }
.gap-row.gap-result .gr-val.is-ok  { color:var(--green); }
.gap-bar-wrap { margin-top:8px; height:6px; background:#e5e5e5; border-radius:3px; overflow:hidden; }
.gap-bar { height:100%; border-radius:3px; transition:width .35s ease; }
.gap-bar.ok     { background:var(--green); }
.gap-bar.warn   { background:var(--gold); }
.gap-bar.danger { background:var(--red); }
.gap-tag { position:absolute; top:10px; right:12px; font-size:10px; padding:2px 8px; border-radius:10px; font-weight:700; letter-spacing:0.5px; }
.gap-tag.danger { background:var(--red); color:#fff; }
.gap-tag.warn   { background:var(--gold); color:#fff; }
.gap-tag.ok     { background:var(--green); color:#fff; }

/* 5. 保費佔比 */
.pir-wrap { background:linear-gradient(135deg,#fafafa,#f0f0f0); border-radius:12px; padding:14px 18px; margin-bottom:14px; border:1px solid var(--border); }
.pir-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.pir-title { font-size:13px; font-weight:700; color:var(--navy); }
.pir-value { font-size:18px; font-weight:900; font-family:"Bebas Neue",sans-serif; letter-spacing:1px; }
.pir-value.ok     { color:var(--green); }
.pir-value.warn   { color:var(--gold); }
.pir-value.danger { color:var(--red); }
.pir-bar-wrap { position:relative; height:14px; background:#e5e5e5; border-radius:7px; overflow:hidden; }
.pir-bar { position:absolute; top:0; left:0; height:100%; border-radius:7px; transition:width .4s ease; }
.pir-bar.ok     { background:linear-gradient(90deg,var(--green),#4ade80); }
.pir-bar.warn   { background:linear-gradient(90deg,var(--gold),#fbbf24); }
.pir-bar.danger { background:linear-gradient(90deg,var(--red),#f87171); }
.pir-marker { position:absolute; top:-3px; width:1px; height:20px; background:rgba(0,0,0,0.25); }
.pir-marker::after { content:attr(data-label); position:absolute; top:22px; left:50%; transform:translateX(-50%); font-size:9px; color:var(--gray); white-space:nowrap; }
.pir-msg { margin-top:14px; font-size:12px; color:var(--gray); line-height:1.6; }
.pir-msg.ok     { color:var(--green); }
.pir-msg.warn   { color:#a87000; }
.pir-msg.danger { color:var(--red); font-weight:600; }

/* 6. 理賠合計 */
.claims-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-top:12px; }
.claims-cell { background:#fff; border-radius:8px; padding:10px 12px; border:1px solid var(--border); text-align:center; }
.claims-cell .cc-icon { font-size:16px; }
.claims-cell .cc-label { font-size:11px; color:var(--gray); margin:4px 0; }
.claims-cell .cc-val { font-size:16px; font-weight:800; color:var(--navy); font-family:"Bebas Neue",sans-serif; letter-spacing:1px; }
.claims-cell .cc-unit { font-size:10px; color:var(--gray); margin-left:2px; }

/* 7. 提示條 */
.tip-row { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:linear-gradient(90deg,#fff8e1,#fff); border-left:4px solid var(--gold); border-radius:6px; margin-bottom:8px; font-size:12px; line-height:1.6; }
.tip-row.danger { background:linear-gradient(90deg,#fee,#fff); border-left-color:var(--red); }
.tip-row.info   { background:linear-gradient(90deg,var(--blue-soft),#fff); border-left-color:#3D8FCC; }
.tip-row .tip-icon { font-size:18px; flex-shrink:0; }
.tip-row .tip-body { flex:1; }
.tip-row .tip-title { font-weight:700; color:var(--navy); margin-bottom:2px; }
.tip-row .tip-text { color:#444; }
.tip-row .tip-text b { color:var(--orange-dark); }

/* 8. 險種小標籤 */
.x-rider-badges { display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle; }
.x-rider-badges .xrb { font-size:9px; padding:1px 6px; border-radius:8px; font-weight:700; letter-spacing:0.3px; }
.xrb.guaranteed     { background:#d4f1d4; color:#1d6b1d; border:1px solid #95d495; }
.xrb.non-guaranteed { background:#ffe4e1; color:#a02828; border:1px solid #f5a5a5; }
.xrb.natural        { background:#fff3cd; color:#856404; border:1px solid #ffe69c; }
.xrb.level          { background:#d1ecf1; color:#0c5460; border:1px solid #9fd5e2; }

/* 9. 美化建議保障內容 */
#benefitsCard .benefits-main-cat { margin-bottom:22px !important; padding-bottom:6px; }
#benefitsCard .benefits-main-cat .bmc-header { background:linear-gradient(135deg,#fafbfc 0%,#fff 100%); padding:10px 14px !important; border-radius:6px; margin-bottom:12px !important; border-bottom:2px solid rgba(0,0,0,0.04); }
#benefitsCard .benefits-main-cat .bmc-title { font-size:14px !important; letter-spacing:1.2px; font-weight:800 !important; }
#benefitsCard .benefits-main-cat .bmc-subtitle { background:rgba(0,0,0,0.025); padding:5px 10px; border-radius:4px; font-size:11px !important; margin:8px 0 6px !important; letter-spacing:1px; color:#6a7785 !important; font-weight:700 !important; }
#benefitsCard .benefits-simple-card { background:#fff !important; border:1px solid #ebeef1 !important; border-radius:10px !important; padding:14px 14px 12px !important; box-shadow:0 1px 3px rgba(13,42,58,0.04); transition:box-shadow .2s, transform .15s; }
#benefitsCard .benefits-simple-card:hover { box-shadow:0 4px 12px rgba(13,42,58,0.08); transform:translateY(-1px); }
#benefitsCard .benefits-simple-card .bsc-icon { font-size:20px !important; margin-bottom:4px; }
#benefitsCard .benefits-simple-card .bsc-title { font-size:12px !important; color:#5a6772 !important; letter-spacing:0.5px; font-weight:600 !important; margin-bottom:6px !important; }
#benefitsCard .benefits-simple-card .bsc-value { font-size:18px !important; font-weight:800 !important; color:var(--navy) !important; letter-spacing:0.5px; line-height:1.2; }
#benefitsCard .benefits-simple-card .bsc-unit-inline { font-size:11px; color:var(--gray); margin-left:2px; font-weight:600; }
#benefitsCard .benefits-simple-card .bsc-rule-text { font-size:13px; color:#8a99a6; font-weight:600; }
#benefitsCard .benefits-simple-card .bsc-comps { margin-top:6px; padding-top:6px; border-top:1px dashed rgba(0,0,0,0.06); }
#benefitsCard .benefits-simple-card .bsc-comp-chip { font-size:10px !important; padding:1px 7px !important; margin-right:3px; letter-spacing:0.3px; }
#benefitsCard .benefit-card { background:#fff; border:1px solid #e8ecef !important; border-radius:12px !important; margin-bottom:14px !important; overflow:hidden; box-shadow:0 1px 4px rgba(13,42,58,0.04); }
#benefitsCard .benefit-card-header { background:linear-gradient(135deg,#f8fafc 0%,#fff 100%); padding:12px 16px !important; border-bottom:2px solid #f0f3f5; }
#benefitsCard .benefit-card-icon { font-size:22px !important; }
#benefitsCard .benefit-card-title { font-size:14px !important; font-weight:800 !important; color:var(--navy); letter-spacing:0.5px; }
#benefitsCard .bc-typect { background:var(--orange-light); color:var(--orange-dark); font-size:10px; padding:1px 8px; border-radius:8px; margin-left:8px; letter-spacing:0.3px; font-weight:700; }
#benefitsCard .benefit-card-meta { font-size:11px; color:#8a99a6; margin-top:2px; letter-spacing:0.3px; }
#benefitsCard .benefit-card-body { padding:12px 16px !important; }
#benefitsCard .bi-comp-band { background:linear-gradient(90deg,rgba(0,0,0,0.025),transparent); padding:7px 12px !important; border-radius:6px !important; margin:10px 0 6px !important; border-left:3px solid var(--comp-color,var(--teal)); display:flex; align-items:center; gap:8px; font-size:12px; }
#benefitsCard .bi-comp-name { font-weight:700; color:var(--navy); letter-spacing:0.5px; }
#benefitsCard .bi-comp-sub { font-size:10px; color:var(--gray); letter-spacing:0.3px; margin-left:auto; }
#benefitsCard .bi-comp-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#benefitsCard [title]:hover { cursor:help; }

/* 10. 走勢圖滑桿 */
.chart-range-slider-wrap { display:inline-flex; align-items:center; gap:10px; padding:4px 12px 4px 8px; background:rgba(111,66,193,0.06); border:1px solid rgba(111,66,193,0.18); border-radius:16px; }
.chart-range-slider-wrap input[type="range"] { -webkit-appearance:none; appearance:none; width:160px; height:4px; border-radius:2px; background:linear-gradient(90deg,#c9b8e6,#8b5cf6); outline:none; cursor:pointer; margin:0; }
.chart-range-slider-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #6f42c1; cursor:pointer; box-shadow:0 2px 6px rgba(111,66,193,0.35); }
.chart-range-slider-wrap input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); }
.chart-range-slider-wrap input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #6f42c1; cursor:pointer; box-shadow:0 2px 6px rgba(111,66,193,0.35); }
.chart-range-slider-wrap .crs-value { font-size:13px; font-weight:800; color:#6f42c1; font-family:"Bebas Neue","Noto Sans TC",sans-serif; min-width:64px; text-align:right; letter-spacing:0.5px; }
.chart-range-slider-wrap .crs-ticks { display:flex; justify-content:space-between; width:160px; margin-top:2px; font-size:9px; color:var(--gray); pointer-events:none; }
.crs-stops { position:relative; width:160px; display:flex; flex-direction:column; gap:2px; }

/* 11. 列印 */
@media print {
  #needsInputCard { display:none !important; }
  .chart-range-slider-wrap { display:none !important; }
  .x-card { box-shadow:none; border:1px solid #999; page-break-inside:avoid; }
  .x-card-header { background:#0D2A3A !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .pir-bar, .gap-bar { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .tip-row { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* 12. 手機 */
@media (max-width:720px) {
  .needs-grid { grid-template-columns:1fr 1fr; }
  .gap-grid { grid-template-columns:1fr; }
  .claims-summary { grid-template-columns:repeat(2,1fr); }
  .x-card-header { font-size:13px; padding:10px 14px; }
  .x-card-body { padding:12px 14px; }
  .pir-value { font-size:16px; }
  .chart-range-slider-wrap input[type="range"] { width:120px; }
  .chart-range-slider-wrap .crs-stops { width:120px; }
  #benefitsCard .benefits-main-cat .bmc-title { font-size:13px !important; }
  #benefitsCard .benefits-simple-card { padding:10px 12px !important; }
  #benefitsCard .benefits-simple-card .bsc-value { font-size:15px !important; }
  #benefitsCard .benefit-card-title { font-size:13px !important; }
}
@media (max-width:480px) { .needs-grid { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════
 * Phase 3:詳細模式 (PDF 風格) + 公司篩選 chips
 * ═══════════════════════════════════════════════════════════ */

/* 公司篩選 chips */
.bcc-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 0;
  margin-top: 0;
}
.bcc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1.5px solid #d6dde3;
  background: #fff;
  color: #4a5560;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.bcc-btn:hover {
  border-color: var(--orange);
  color: var(--orange-dark);
}
.bcc-btn.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(240, 90, 40, 0.3);
}
.bcc-btn .bcc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.bcc-btn.active .bcc-dot {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}

/* 詳細模式 — PDF 風格卡片 */
.pd-co-section {
  margin-bottom: 28px;
}
.pd-co-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent);
  border-left: 5px solid var(--teal);
  border-radius: 6px;
}
.pd-logo {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
}
.pd-logo-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.pd-co-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 1.5px;
}
.pd-co-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--gray);
  background: rgba(255,255,255,0.6);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.5px;
}

/* 商品卡片 */
.pd-product {
  background: #fff;
  border: 1px solid #e5ebef;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(13,42,58,0.04);
}
.pd-product-head {
  background: linear-gradient(135deg, #fafbfc, #fff);
  padding: 12px 16px;
  border-bottom: 1px dashed #e5ebef;
}
.pd-product-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pd-product-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.pd-product-code {
  font-size: 11px;
  color: var(--gray);
  font-family: 'Courier New', monospace;
  background: #f0f3f5;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.pd-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.pd-pill-main {
  background: var(--orange-light);
  color: var(--orange-dark);
  border: 1px solid var(--orange);
}
.pd-pill-rider {
  background: #e7f3fb;
  color: #2c5b80;
  border: 1px solid #b8d4ea;
}
.pd-product-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #5a6772;
  flex-wrap: wrap;
}
.pd-product-meta b {
  color: var(--navy);
}

/* 給付項目區 */
.pd-items {
  padding: 8px 16px 14px;
}
.pd-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 18px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f3f5;
  align-items: baseline;
}
.pd-item:last-child {
  border-bottom: none;
}
.pd-item-name {
  font-size: 13px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
}
.pd-star {
  font-size: 12px;
}
.pd-item-val {
  text-align: right;
  white-space: nowrap;
}
.pd-val-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--orange-dark);
  font-family: 'Bebas Neue', 'Noto Sans TC', sans-serif;
  letter-spacing: 0.8px;
}
.pd-val-unit {
  font-size: 11px;
  color: var(--gray);
  margin-left: 3px;
  font-weight: 600;
}
/* #8 ── 數值同行單位:不換行,小字 */
.pd-val-unit-inline {
  font-size: 12px;
  color: #6a7785;
  margin-left: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.pd-item-val { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0; justify-content: flex-end; }

/* #10/#11 ── 公版風強化:商品間星號分隔線、疾病定義段、頁尾 ── */
.pd-sep {
  text-align: center;
  color: #c5cdd6;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 14px 0 6px;
  user-select: none;
  font-family: 'Microsoft JhengHei', sans-serif;
  overflow: hidden;
  white-space: nowrap;
}
.pd-disease-def {
  background: #f7fafc;
  border-left: 3px solid #c8d4dd;
  padding: 10px 14px;
  margin: 12px 18px 8px;
  font-size: 11.5px;
  line-height: 1.7;
  color: #4a5763;
  border-radius: 0 6px 6px 0;
  letter-spacing: 0.2px;
}
.pd-disease-def b { color: var(--navy); font-weight: 700; }
.pd-footer {
  margin-top: 22px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #f5f8fb 0%, #eaf1f7 100%);
  border-top: 2px solid #d3dde6;
  border-radius: 0 0 10px 10px;
  font-size: 11px;
  color: #5a6776;
}
.pd-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.pd-footer-row b { color: var(--navy); }
@media (max-width: 720px) {
  .pd-sep { font-size: 8px; letter-spacing: 1px; padding: 10px 0 4px; }
  .pd-disease-def { margin: 10px 8px 6px; padding: 8px 10px; font-size: 11px; }
  .pd-footer { padding: 10px 12px; font-size: 10px; gap: 8px; }
  .pd-footer-row { gap: 8px 14px; }
}
@media print {
  .pd-sep { color: #888; }
  .pd-disease-def { background: white; border-left-color: #888; }
  .pd-footer { background: white; border-top: 1pt solid #888; }
}
.pd-val-text {
  font-size: 13px;
  color: #6a7785;
  font-style: italic;
  font-weight: 600;
}
.pd-item-note {
  grid-column: 1 / 2;   /* #4-2 條款內文只佔左欄,不延伸到數值欄下方 */
  font-size: 11px;
  color: #8a99a6;
  margin-top: 4px;
  padding-left: 18px;
  padding-right: 20px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  max-width: 100%;
  white-space: normal;  /* 允許自動換行 */
  word-break: break-all;
}

/* 手機 */
@media (max-width: 720px) {
  .pd-co-banner { padding: 10px 12px; gap: 8px; }
  .pd-co-name { font-size: 14px; }
  .pd-product-meta { gap: 10px; font-size: 11px; }
  .pd-val-num { font-size: 15px; }
  .pd-item { grid-template-columns: 1fr; gap: 4px; }
  .pd-item-val { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════
 * Phase 3.1:每家公司專屬樣式(詳細模式內,模仿各家建議書配色)
 * ═══════════════════════════════════════════════════════════ */

/* 全球人壽 - 青綠色系(teal),模仿全球建議書藍綠主題 */
.pd-style-quanqiu .pd-co-banner {
  background: linear-gradient(90deg, #1A6B7215, #fff) !important;
  border-left-color: #1A6B72 !important;
}
.pd-style-quanqiu .pd-product-head {
  background: linear-gradient(135deg, #f0f7f8, #fff) !important;
  border-bottom-color: #1A6B72 !important;
}
.pd-style-quanqiu .pd-product-name { color: #0D4347; }
.pd-style-quanqiu .pd-val-num { color: #1A6B72 !important; }
.pd-style-quanqiu .pd-pill-main {
  background: #D0EAEC !important;
  color: #0D4347 !important;
  border-color: #1A6B72 !important;
}

/* 新光人壽 - 紅色系,模仿新光官方建議書紅色標頭 */
.pd-style-xinguang .pd-co-banner {
  background: linear-gradient(90deg, #E6001215, #fff) !important;
  border-left-color: #E60012 !important;
}
.pd-style-xinguang .pd-product-head {
  background: linear-gradient(135deg, #fff5f5, #fff) !important;
  border-bottom-color: #E60012 !important;
}
.pd-style-xinguang .pd-product-name { color: #8B0010; }
.pd-style-xinguang .pd-val-num { color: #C40010 !important; }
.pd-style-xinguang .pd-pill-main {
  background: #ffe4e7 !important;
  color: #8B0010 !important;
  border-color: #E60012 !important;
}

/* 宏泰人壽 - 紫色系 */
.pd-style-hongtai .pd-co-banner {
  background: linear-gradient(90deg, #6F4FB815, #fff) !important;
  border-left-color: #6F4FB8 !important;
}
.pd-style-hongtai .pd-product-head {
  background: linear-gradient(135deg, #f5f0ff, #fff) !important;
  border-bottom-color: #6F4FB8 !important;
}
.pd-style-hongtai .pd-product-name { color: #3D2880; }
.pd-style-hongtai .pd-val-num { color: #6F4FB8 !important; }
.pd-style-hongtai .pd-pill-main {
  background: #e8e0f7 !important;
  color: #3D2880 !important;
  border-color: #6F4FB8 !important;
}

/* 遠雄人壽 - 藍色系 */
.pd-style-farglory .pd-co-banner {
  background: linear-gradient(90deg, #2B7DC415, #fff) !important;
  border-left-color: #2B7DC4 !important;
}
.pd-style-farglory .pd-product-head {
  background: linear-gradient(135deg, #f0f6fc, #fff) !important;
  border-bottom-color: #2B7DC4 !important;
}
.pd-style-farglory .pd-product-name { color: #144B7A; }
.pd-style-farglory .pd-val-num { color: #2B7DC4 !important; }
.pd-style-farglory .pd-pill-main {
  background: #d6e8f7 !important;
  color: #144B7A !important;
  border-color: #2B7DC4 !important;
}

/* 富邦人壽 - 綠色系 */
.pd-style-fubon .pd-co-banner {
  background: linear-gradient(90deg, #0D6E3F15, #fff) !important;
  border-left-color: #0D6E3F !important;
}
.pd-style-fubon .pd-product-head {
  background: linear-gradient(135deg, #f0faf4, #fff) !important;
  border-bottom-color: #0D6E3F !important;
}
.pd-style-fubon .pd-product-name { color: #08401E; }
.pd-style-fubon .pd-val-num { color: #0D6E3F !important; }
.pd-style-fubon .pd-pill-main {
  background: #d4ecdb !important;
  color: #08401E !important;
  border-color: #0D6E3F !important;
}

/* 保誠人壽 - 深藍色系 */
.pd-style-prudential .pd-co-banner {
  background: linear-gradient(90deg, #003F8715, #fff) !important;
  border-left-color: #003F87 !important;
}
.pd-style-prudential .pd-product-head {
  background: linear-gradient(135deg, #f0f4fa, #fff) !important;
  border-bottom-color: #003F87 !important;
}
.pd-style-prudential .pd-product-name { color: #002550; }
.pd-style-prudential .pd-val-num { color: #003F87 !important; }
.pd-style-prudential .pd-pill-main {
  background: #d0dceb !important;
  color: #002550 !important;
  border-color: #003F87 !important;
}

/* ── 公司分隔加大空間 ── */
.pd-co-section + .pd-co-section {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px dashed #ddd;
}

/* ── Phase 7:詳細模式強制單欄(模仿 PDF 直式排版,不分兩欄) ── */
#benefitsSection {
  column-count: 1 !important;
  -moz-column-count: 1 !important;
  -webkit-column-count: 1 !important;
  display: block !important;
}
#benefitsSection > .pd-co-section,
#benefitsSection > .pd-product {
  break-inside: avoid;
  page-break-inside: avoid;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.pd-product {
  width: 100% !important;
  display: block !important;
}
.pd-items {
  display: block !important;
}
.pd-item {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
}

/* ── Phase 8:修 NLA 排版 — 名稱欄至少 180px,金額欄不要吃掉所有空間 ── */
.pd-item {
  grid-template-columns: minmax(180px, 1fr) minmax(80px, auto) !important;
  align-items: start !important;
}
.pd-item-name {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  min-width: 0;
}
.pd-item-val {
  text-align: right !important;
  white-space: normal !important;
  word-break: keep-all !important;
  max-width: 60% !important;
}
.pd-val-text {
  display: inline-block;
  text-align: right;
  white-space: normal !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.4;
  font-size: 12px !important;
  color: #5a6772 !important;
}

/* ═══════════════════════════════════════════════════════════
 * Phase 9:RWD 響應式 + 列印優化
 * ═══════════════════════════════════════════════════════════ */

/* ── iPad 橫向 (1024px 以下) ── */
@media (max-width: 1024px) {
  .pd-co-banner { padding: 10px 14px; }
  .pd-co-name { font-size: 15px; }
  .pd-product-name { font-size: 13px; }
  .pd-product-meta { font-size: 11px; gap: 12px; }
  .pd-val-num { font-size: 16px; }
  .pd-item { gap: 6px 14px; padding: 8px 0; }
  .pd-item-name { font-size: 12px; }
  .bcc-btn { font-size: 11px; padding: 4px 10px; }
}

/* ── iPad 直向 / 大手機橫向 (820px 以下) ── */
@media (max-width: 820px) {
  /* chip 排成兩列 */
  #benefitsCompanyChips { gap: 4px; padding: 8px 12px; }
  .bcc-btn { font-size: 11px; padding: 5px 10px; }
  
  /* 商品卡頭壓縮 */
  .pd-product-head { padding: 10px 12px; }
  .pd-product-meta { gap: 8px; line-height: 1.7; }
  .pd-items { padding: 6px 12px 10px; }
  
  /* 給付項目仍維持 grid 兩欄,但給名稱欄更彈性 */
  .pd-item {
    grid-template-columns: minmax(140px, 1fr) minmax(70px, auto) !important;
  }
  
  /* analysisCard 不顯示也沒差(已 hide 了) */
}

/* ── 手機直向 (640px 以下) ── */
@media (max-width: 640px) {
  /* toolbar logo 與字縮小 */
  .toolbar { padding: 8px 12px !important; }
  .brand-logo { width: 32px !important; height: 32px !important; }
  .brand-text .b-name { font-size: 13px !important; }
  .brand-text .b-sub { font-size: 9px !important; }
  .tb-btn { padding: 5px 9px !important; font-size: 11px !important; }
  
  /* chip 改成上下排,每顆全寬 */
  #benefitsCompanyChips {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .bcc-btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 8px 14px;
  }
  
  /* 商品卡片給付項目改成上下排(名稱上+金額下) */
  .pd-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  .pd-item-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
  }
  .pd-item-val {
    text-align: left !important;
    max-width: none !important;
    padding-left: 0;
  }
  .pd-val-num { font-size: 17px; }
  .pd-val-text { font-size: 12px; line-height: 1.5; display: block; text-align: left; }
  .pd-item-note { padding-left: 0; }
  
  /* 商品卡頭縮小 */
  .pd-product-name { font-size: 13px; }
  .pd-product-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .pd-co-banner { padding: 8px 10px; gap: 8px; }
  .pd-co-name { font-size: 14px; letter-spacing: 0.5px; }
  .pd-logo { width: 30px; height: 30px; }
  
  /* 投保人員表單 grid 改單欄 */
  .person-flow { grid-template-columns: 1fr !important; }
  .relation-arrow { display: none !important; }
  
  /* 結果表格字級縮小 */
  #resultTable { font-size: 11px !important; }
  #resultTable th, #resultTable td { padding: 6px 4px !important; }
}

/* ── 超小螢幕 (380px 以下) ── */
@media (max-width: 380px) {
  .pd-product-meta { font-size: 10px; }
  .pd-val-num { font-size: 15px; }
  .toolbar { padding: 6px 10px !important; }
  .brand-text { display: none !important; }   /* 只留 logo */
}

/* ═══════════════════════════════════════════════════════════
 * 列印 (A4 直向) 優化
 * ═══════════════════════════════════════════════════════════ */
@media print {
  /* 整體顏色保留 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* 隱藏不需要列印的元素 */
  .toolbar,
  .no-print,
  #benefitsCompanyChips,
  #benefitsModeSwitch,
  #chartCard .chart-controls,
  #chartCard .inflation-controls,
  .chart-tooltip,
  #curveCard,
  #productCard,
  #aggregateCheck,
  #analysisCard,
  #needsInputCard,
  .picker-collapse-btn,
  button {
    display: none !important;
  }
  
  /* 主內容區放寬 */
  .container, .app {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* 卡片邊框淡化 */
  .card, .x-card {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    page-break-inside: avoid;
    margin-bottom: 8mm !important;
  }
  
  /* 標頭顏色保留 */
  .card-header, .x-card-header {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* === 詳細模式列印優化 === */
  #benefitsSection {
    column-count: 1 !important;
  }
  
  /* 公司分節:每家獨立一頁 */
  .pd-co-section {
    page-break-before: auto;
    page-break-inside: auto;   /* ★修:整段>1頁時 avoid 會把首張商品推到下一頁→區段標題孤立成近空白頁(PDF第4頁);改 auto 讓內容自然接續 */
    margin-bottom: 10mm !important;
    border-top: none !important;
    padding-top: 0 !important;
  }
  .pd-co-section:not(:first-child) {
    page-break-before: always;   /* 每家公司獨立一頁 */
  }
  /* 公司 banner(「全球人壽 N 項商品」)黏住其後第一張商品,避免標題單獨落在頁尾 */
  .pd-co-banner { page-break-after: avoid; break-after: avoid; }
  
  /* 公司 banner 列印漂亮 */
  .pd-co-banner {
    border-bottom: 2px solid #333 !important;
    background: #f8f8f8 !important;
    padding: 6mm 4mm !important;
    border-radius: 0 !important;
  }
  
  /* 商品卡片:含完整條文的長卡常高於一整頁,整卡 avoid 會被推到下一頁製造空白頁;
     改 auto 允許自然跨頁,但標題列與每一給付項目不被切成兩半,斷點只落在項目之間 */
  .pd-product {
    page-break-inside: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    margin-bottom: 4mm !important;
  }
  .pd-product-head { page-break-inside: avoid; page-break-after: avoid; break-after: avoid; }
  .pd-item { page-break-inside: avoid; break-inside: avoid; }
  
  /* 給付項目字級縮小適合 A4 */
  .pd-item-name { font-size: 11pt !important; }
  .pd-val-num { font-size: 13pt !important; }
  .pd-val-text { font-size: 10pt !important; }
  .pd-item-note { font-size: 9pt !important; }
  
  /* 走勢圖 SVG 縮小高度 */
  .chart-svg { max-height: 80mm !important; }
  
  /* 列印頁面設定 */
  @page {
    size: A4 portrait;
    margin: 12mm 10mm;
  }
  @page :first {
    margin-top: 8mm;
  }
  
  /* 加列印頁尾(每家公司底部) */
  .pd-co-section::after {
    content: "鼎綸保經 ‧ " attr(data-cname) " ‧ 本建議書內容僅供參考,實際保障內容請以正式契約條款為準";
    display: block;
    text-align: center;
    font-size: 8pt;
    color: #888;
    margin-top: 5mm;
    padding-top: 3mm;
    border-top: 1px dashed #999;
    page-break-after: always;
  }
  /* ★修:最後一家公司後不再強制換頁,否則理賠段與規劃說明之間會夾出一整張空白頁(PDF第17頁) */
  .pd-co-section:last-of-type::after { page-break-after: auto; }
  
  /* 走勢圖列印標題 */
  .chart-print-title {
    display: block !important;
    font-size: 11pt;
    font-weight: 700;
    margin: 4mm 0 2mm;
    color: var(--navy);
  }
}

/* ── Phase 10:隱藏險種規劃內的「保證/非保證/自然/平準」小標籤 ── */
.x-rider-badges { display: none !important; }

/* ── Phase 11:給付項目 note 條款顯示優化(整段條款好閱讀) ── */
.pd-item-note {
  font-size: 12px !important;
  color: #4a5560 !important;
  line-height: 1.7 !important;
  padding: 8px 12px !important;
  margin-top: 6px !important;
  background: #f8f9fa;
  border-left: 3px solid #e0e0e0;
  border-radius: 4px;
  text-align: justify;
  letter-spacing: 0.2px;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
}
.pd-item-note:empty { display: none; }
/* 公司專屬色系 - note 左邊條改用該公司色 */
.pd-style-quanqiu    .pd-item-note { border-left-color: #1A6B72; }
.pd-style-xinguang   .pd-item-note { border-left-color: #E60012; }
.pd-style-hongtai    .pd-item-note { border-left-color: #6F4FB8; }
.pd-style-farglory   .pd-item-note { border-left-color: #2B7DC4; }
.pd-style-fubon      .pd-item-note { border-left-color: #0D6E3F; }
.pd-style-prudential .pd-item-note { border-left-color: #003F87; }

/* 商品卡片間留更大空間,模仿 PDF 一段一段 */
.pd-product {
  margin-bottom: 18px !important;
}
.pd-items {
  padding: 10px 16px 14px !important;
}
.pd-item {
  padding: 12px 0 !important;
  border-bottom: 1px dashed #e8ecef !important;
}
.pd-item:last-child { border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════════
 * Phase 12:重做給付項目佈局,模仿 PDF 條款說明書式
 *   - 名稱左 + 金額右 (彈性 flex,自動填空白)
 *   - 條款內文滿寬置左,密集大字方便閱讀
 *   - 商品間留白拉大,結構清晰
 * ═══════════════════════════════════════════════════════════ */

/* 商品卡片整體留白 */
.pd-product {
  margin-bottom: 20px !important;
  background: #fff !important;
  border: 1px solid #d8dde2 !important;
}
.pd-product-head {
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #fafbfc, #fff) !important;
  border-bottom: 1px solid #e0e6eb !important;
}
.pd-product-name {
  font-size: 15px !important;
  letter-spacing: 0.5px;
  color: var(--navy);
}
.pd-product-meta {
  margin-top: 8px;
  font-size: 12px;
  color: #5a6772;
}
.pd-product-meta b {
  color: var(--navy);
  font-weight: 700;
}

/* 給付項目區留白 */
.pd-items {
  padding: 0 !important;
}

/* 單筆給付項目:整段框,內含「標題行 + 條款段」 */
.pd-item {
  display: block !important;       /* 改成 block,不用 grid */
  padding: 0 !important;
  border-bottom: 1px solid #eef0f2 !important;
}
.pd-item:last-child { border-bottom: none !important; }

/* 標題行(名稱 ............... 金額) — 用 flex 自動填空白 */
.pd-item-name {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  padding: 14px 18px 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  background: rgba(0,0,0,0.012);
}
/* 在 name 後面自動加 dot leader (虛線填補空白) */
.pd-item-name::after {
  content: '';
  flex: 1;
  border-bottom: 1px dotted #c5cdd4;
  position: relative;
  top: -3px;
  margin: 0 6px;
}
.pd-star { font-size: 13px; }

/* 金額右側對齊在同一行(透過 absolute 定位拉到 name 行右側) */
.pd-item-val {
  display: inline-block !important;
  text-align: right !important;
  white-space: nowrap !important;
  max-width: none !important;
  margin-left: auto;
  padding: 14px 18px 10px 12px !important;   /* ★ 左側留白 12px,數字不貼虛線 */
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;   /* ★ 不透明底遮住底下 dot leader → 虛線收在數字前,不再插進數字 */
}
.pd-item { position: relative; }   /* 給 .pd-item-val 用 absolute 的 anchor */

.pd-val-num {
  font-size: 17px !important;
  font-weight: 800 !important;
  font-family: "Bebas Neue","Noto Sans TC",sans-serif;
  letter-spacing: 0.8px;
}
.pd-val-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #6a7785 !important;
}

/* 條款內文段:大字密集,一段一段易讀 */
.pd-item-note {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: #2c3e50 !important;
  padding: 0 18px 16px !important;
  margin: 0 !important;
  background: transparent !important;
  border-left: none !important;
  border-radius: 0 !important;
  text-align: justify;
  letter-spacing: 0.3px;
  text-indent: 2em;             /* 段首縮排 */
  font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}

/* 移除 Phase 11 加的灰底淡邊框 */
.pd-style-quanqiu    .pd-item-note,
.pd-style-xinguang   .pd-item-note,
.pd-style-hongtai    .pd-item-note,
.pd-style-farglory   .pd-item-note,
.pd-style-fubon      .pd-item-note,
.pd-style-prudential .pd-item-note {
  border-left: none !important;
}

/* 手機:取消 absolute,改成 grid 兩行 */
@media (max-width: 640px) {
  .pd-item-val {
    position: static !important;
    display: block !important;
    text-align: right !important;
    padding: 0 18px 4px !important;
    font-size: 16px;
  }
  .pd-item-name {
    padding: 12px 18px 4px !important;
    font-size: 13px !important;
  }
  .pd-item-name::after { display: none; }
  .pd-item-note { padding-bottom: 12px !important; font-size: 12.5px !important; }
}

/* ── 建議內容彙整:保額(amt-num)與保費(fee)兩欄數字統一字體字級,消除「字體大小不一致」──
   原本 .amt-num 13px Noto、.fee 16px Bebas(Bebas cap-height 高,即使同 px 也顯得更大)。
   統一為 Noto 16px;保費保留主色(accent)強調價格。footer 總計(tfoot)不受影響,維持 Bebas 大字。 */
.result-table td.amt-num { font-size: 16px !important; }
.result-table tbody td.fee { font-family: 'Noto Sans TC', "PingFang TC", "Microsoft JhengHei", sans-serif !important; letter-spacing: normal !important; }