/* components.css — 卡片、市場情緒、便宜訊號、等待清單、配息頁、張數試算、行事曆、頁尾
   從 index.html 行 102–317 原樣搬出（2026-10-03 拆檔，未改內容）*/
  /* ── Cards / layout helpers ── */
  .section-hdr {
    display:flex; align-items:center; gap:8px;
    font-size:16px; font-weight:700; margin-bottom:10px;
    padding-bottom:7px; border-bottom:1px solid var(--border);
  }
  .section-hdr.buy  { color:var(--bright); border-color:rgba(var(--rgb-cheap),.2); }
  .section-hdr.wait { color:var(--bright); }
  /* CP7 Visual Gate：首頁兩個區塊標題（價格合理區／今日成交量 TOP 10）字級 16 → 19，只動 typography */
  #pzTitle, #tvTitle { font-size:19px; }
  .badge-count {
    font-family:var(--sans); font-size:16px; font-weight:700;
    background:rgba(var(--rgb-veil),.07); border-radius:10px; padding:2px 10px;
    color:var(--bright);
  }

  /* ── Market mood ── */
  .mood-card {
    background:var(--card2); border:1px solid var(--border);
    border-radius:12px; padding:13px 14px; margin-bottom:22px;
    display:flex; align-items:center; gap:13px;
  }
  .mood-emoji { font-size:36px; line-height:1; flex-shrink:0; }
  .mood-main  { font-size:16px; font-weight:700; }
  .mood-sub   { font-size:14px; color:var(--bright); margin-top:3px; line-height:1.5; }
  .mood-cta   { font-size:16px; color:var(--mood-cta); margin-top:5px; font-weight:600; }
  .mood-idx   { font-family:var(--mono); font-size:15px; margin-top:4px; color:var(--dim); }
  /* CP7 Visual Gate：加權漲跌幅＝方向性資料，台股紅漲綠跌（>0 紅、<0 綠、=0 neutral）；label 維持次要字，數值加粗 */
  .mood-idx .mi-val { font-weight:600; }
  .mood-idx.up .mi-val{ color:var(--up); } .mood-idx.dn .mi-val{ color:var(--dn); } .mood-idx.flat .mi-val{ color:var(--bright); }

  /* ── 價格狀態標籤（首頁、Detail 等共用） ── */
  /* 狀態標籤：五色為 PO 鎖定原始色（--sig-*），兩主題相同；底襯 --sig-backing 取代原本 12% 淡底以確保對比 */
  .sig-cheap {
    background:var(--sig-backing); color:var(--sig-cheap);
    border:1px solid var(--sig-cheap); border-radius:6px;
    padding:3px 10px; font-size:16px; font-weight:700; white-space:nowrap;
  }
  .sig-fair {
    background:var(--sig-backing); color:var(--sig-fair);
    border:1px solid var(--sig-fair); border-radius:6px;
    padding:3px 10px; font-size:16px; font-weight:700; white-space:nowrap;
  }
  .sig-dear {
    background:var(--sig-backing); color:var(--sig-dear);
    border:1px solid var(--sig-dear); border-radius:6px;
    padding:3px 10px; font-size:16px; font-weight:700; white-space:nowrap;
  }
  /* 債券 ETF 不套股價訊號，用中性灰藍——刻意不借用四態任何一色，
     免得被當成買賣判斷。只是在說「這是債券型」。 */
  .sig-bond {
    background:var(--sig-backing); color:var(--sig-bond);
    border:1px solid var(--sig-bond); border-radius:6px;
    padding:3px 10px; font-size:16px; font-weight:700; white-space:nowrap;
  }
  .sig-hot {
    background:var(--sig-backing); color:var(--sig-hot);
    border:1px solid var(--sig-hot); border-radius:6px;
    padding:3px 10px; font-size:16px; font-weight:700; white-space:nowrap;
  }
  .empty-state {
    background:var(--card2); border:1px solid var(--border);
    border-radius:12px; padding:18px 16px; text-align:center;
    color:var(--dim); font-size:16px; line-height:1.7; margin-bottom:10px;
  }
  .hot-item {
    display:flex; align-items:center; gap:10px;
    background:var(--card2); border:1px solid var(--border);
    border-radius:10px; padding:10px 13px; margin-bottom:7px;
  }
  .hot-rank { font-family:var(--sans); font-size:16px; font-weight:700; color:var(--dim); width:22px; flex-shrink:0; }
  .hot-rank.gold { color:var(--gold); }
  .hot-rank.silver { color:var(--silver); }
  .hot-rank.bronze { color:var(--bronze); }
  /* CP7 Visual Gate（PO 方案 B／C／A 參考圖取樣）——LIGHT ONLY：TOP10 前三名底色牌、現價琥珀橘、年殖利率字灰、新上市紫字；dark 不套用 */
  :root[data-theme="light"] .hot-rank.gold,
  :root[data-theme="light"] .hot-rank.silver,
  :root[data-theme="light"] .hot-rank.bronze { width:24px; height:24px; line-height:24px; text-align:center; border-radius:6px; }
  :root[data-theme="light"] .hot-rank.gold   { background:var(--rank1-bg); color:var(--rank1-fg); }
  :root[data-theme="light"] .hot-rank.silver { background:var(--rank2-bg); color:var(--rank2-fg); }
  :root[data-theme="light"] .hot-rank.bronze { background:var(--rank3-bg); color:var(--rank3-fg); }
  :root[data-theme="light"] .hr-px  { color:#F05B02 !important; }
  :root[data-theme="light"] .hr-ylbl { color:#54657F !important; }
  :root[data-theme="light"] .hr-new { color:#8B55EE; }
  .range-track { height:5px; background:rgba(var(--rgb-veil),.08); border-radius:3px; position:relative; margin-bottom:4px; }
  .range-fill  { height:100%; border-radius:3px; background:linear-gradient(90deg,rgba(var(--rgb-link),.15),rgba(var(--rgb-link),.6)); }
  .range-dot   { position:absolute; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:var(--link); border:2px solid var(--bg); }
  .range-lbl   { display:flex; justify-content:space-between; font-family:var(--mono); font-size:16px; color:var(--dim); }

  /* ── 首頁入口大廳（PHASE5_PLAN §2）：入口、精簡列表。字級不小於 14px、整列可點 ≥ 44px ── */
  .home-entries { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
  .home-entry {
    display:flex; align-items:center; gap:12px; width:100%; min-height:72px; padding:14px 16px;
    background:var(--card); color:var(--bright); border:1px solid var(--border); border-radius:12px;
    font:inherit; text-align:left; cursor:pointer;
  }
  .home-entry:active { background:var(--card2); }
  .he-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .he-text b { font-size:18px; }
  .he-text span { font-size:15px; color:var(--dim); line-height:1.4; }
  .he-arrow { font-size:26px; color:var(--dim); line-height:1; flex-shrink:0; }
  /* CP7 Visual Gate：Homepage Entry Card Identity（PO 四張 reference；藍＝探索、綠＝已持有）。
     只用在這兩張入口卡，不擴散成全站 card palette；尺寸／結構不變，左側 accent 用 inset shadow 不佔寬 */
  .he-ico { display:inline-flex; flex-shrink:0; color:var(--he-accent); }
  .home-entry.he-explore, .home-entry.he-owned {
    background:var(--he-surface); border-color:var(--he-border); box-shadow:inset 4px 0 0 var(--he-accent);
  }
  .home-entry.he-explore:active, .home-entry.he-owned:active { background:var(--he-press); }
  .home-entry.he-explore .he-arrow, .home-entry.he-owned .he-arrow { color:var(--he-accent); }
  .he-explore { --he-surface:#0B1B2E; --he-press:#102640; --he-border:rgba(47,123,245,.45); --he-accent:#3B82F6; }
  .he-owned   { --he-surface:#0A2724; --he-press:#0E3530; --he-border:rgba(51,186,145,.45); --he-accent:#34C79A; }
  :root[data-theme="light"] .he-explore { --he-surface:#E6F2FF; --he-press:#D6E8FD; --he-border:#BED8F8; --he-accent:#2563EB; }
  :root[data-theme="light"] .he-owned   { --he-surface:#E2F7F0; --he-press:#CFF0E4; --he-border:#B5E6D3; --he-accent:#079A72; }
  .home-sub  { font-size:16px; color:var(--bright); margin:-2px 0 6px 2px; }
  .home-note { font-size:14px; color:var(--dim); line-height:1.6; margin:0 0 10px 2px; }
  .home-row {
    display:flex; align-items:center; gap:10px; width:100%; min-height:48px;
    background:var(--card2); color:var(--bright); border:1px solid var(--border); border-radius:10px;
    padding:10px 13px; margin-bottom:7px; font:inherit; text-align:left; cursor:pointer;
  }
  .home-row:active { border-color:var(--dim); }
  .home-row .wait-code { width:auto; min-width:64px; }
  .home-row .wait-name { min-width:0; }
  .hr-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .hr-line { display:flex; align-items:center; gap:6px; min-width:0; }
  .hr-sub  { font-size:15px; }
  .home-more {
    display:block; width:100%; min-height:44px; margin:2px 0 6px;
    background:none; color:var(--bright); border:1px dashed var(--border); border-radius:10px;
    font:inherit; font-size:16px; cursor:pointer;
  }
  .home-more[hidden] { display:none; }
  .home-empty {
    background:var(--card2); border:1px solid var(--border); border-radius:10px;
    padding:16px; text-align:center; color:var(--bright); font-size:16px; margin-bottom:7px;
  }

  /* ── Wait list ── */
  .wait-item {
    display:flex; align-items:center; gap:9px;
    background:rgba(var(--rgb-veil),.03); border:1px solid var(--border);
    border-radius:8px; padding:10px 12px; margin-bottom:7px;
  }
  .wait-code  { width:68px; flex-shrink:0; }   /* 字型／字級／字重／顏色：base.css 全站 ETF typography */
  .wait-name  { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wait-sig   { border-radius:6px; padding:4px 12px; font-size:16px; font-weight:700; flex-shrink:0; white-space:nowrap; }
  .wait-sig.dear { background:rgba(var(--rgb-up),.1); color:var(--dear); border:1px solid rgba(var(--rgb-up),.3); }
  .wait-sig.fair { background:rgba(var(--rgb-fair),.1); color:var(--fair); border:1px solid rgba(var(--rgb-fair),.3); }

  /* ── Dividend page ── */
  .panel { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:15px; margin-bottom:22px; }
  .panel-title { font-size:16px; font-weight:700; margin-bottom:12px; color:var(--brand); }
  .panel-title .ic { margin-right:6px; }

  /* 張數試算（Detail 配息分頁 #dtCalcOut 使用；舊配息頁 B-1 計算機已於 Phase 5 退役） */
  .input-row {
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
  }
  .input-lbl { font-size:16px; color:var(--bright); }
  .num-input {
    background:var(--card2); border:1px solid var(--border); border-radius:8px;
    padding:8px 12px; font-family:var(--mono); font-size:16px; font-weight:700;
    color:var(--bright); width:90px; text-align:center; outline:none;
    transition:border-color .15s;
  }
  .num-input:focus { border-color:var(--link); }
  .calc-out {
    background:rgba(var(--rgb-cheap),.06); border:1px solid rgba(var(--rgb-cheap),.18);
    border-radius:9px; padding:13px 14px;
  }
  .calc-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .calc-row:last-child { margin:0; padding-top:9px; border-top:1px solid rgba(var(--rgb-up),.15); }
  .calc-lbl  { font-size:16px; color:var(--bright); }
  .calc-val  { font-family:var(--mono); font-size:16px; font-weight:700; color:var(--dear); }
  .calc-val.sm { font-size:16px; color:var(--dear); }

  /* Calendar */
  .cal-item {
    display:flex; align-items:center; gap:11px;
    border-radius:9px; padding:10px 12px; margin-bottom:8px;
    background:var(--card2); border:1px solid var(--border);   /* PO Visual Polish：一般卡＝首頁 TOP10 .hot-item 底牌；.soon（快配息囉）與 .today 維持原特殊底 */
  }
  .cal-item.soon  { background:rgba(var(--rgb-gold),.05); border-color:rgba(var(--rgb-gold),.25); }
  .cal-item.today { background:rgba(var(--rgb-cheap),.06); border-color:rgba(var(--rgb-cheap),.35); }
  .cal-item:last-child { margin:0; }
  /* CP6c：日曆列 → Detail。覆蓋整列的 .cal-hit 按鈕；列內容不攔截點擊 */
  .cal-item { position:relative; cursor:pointer; }
  .cal-item > :not(.cal-hit) { position:relative; pointer-events:none; }
  .cal-hit  { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
              background:none; border:0; border-radius:9px; cursor:pointer; }
  .cal-hit:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
  .cal-date { text-align:center; width:38px; flex-shrink:0; }
  .cal-day   { font-family:var(--mono); font-size:16px; font-weight:700; display:block; line-height:1; }
  .cal-mon   { font-size:14px; color:var(--bright); }
  .cal-line  { width:1px; height:30px; background:var(--border); flex-shrink:0; }
  .cal-info  { flex:1; }
  .cal-code2 { font-family:var(--sans); font-size:16px; font-weight:700; color:var(--bright); }
  .cal-name2 { font-size:16px; color:var(--link); margin-top:2px; }
  .cal-r     { text-align:right; }
  .cal-amt   { font-family:var(--mono); font-size:16px; font-weight:700; color:var(--num-accent); }
  .cal-ulbl  { font-size:14px; color:var(--bright); }
  .soon-pill {
    display:inline-block; background:#FCDF7A; color:#542B0A; border:1px solid #FCDF7A;   /* CP7 Visual Gate（PO 方案 C「新上市」金黃 badge 取樣，兩主題相同） */
    border-radius:4px; padding:1px 6px; font-size:16px; font-family:var(--mono);
    margin-top:3px;
  }
  .today-pill {
    background:rgba(var(--rgb-cheap),.18); color:var(--cheap);
    border:1px solid rgba(var(--rgb-cheap),.4);
  }

  /* Source badges */
  .src-lbl         { font-size:11px; margin-top:3px; }
  .src-official    { color:var(--src-official); }
  .src-estimate    { color:var(--dim); }
  .yld-badge       { font-size:12px; margin-left:2px; opacity:.8; }

  /* Footer */
  .site-footer {
    margin:28px 12px 16px; padding:14px 16px;
    border-top:1px solid var(--border); border-radius:8px;
    font-size:12px; color:var(--dim); line-height:1.8;
  }
  .site-footer a { color:var(--link); text-decoration:none; }
  .site-footer a:hover { text-decoration:underline; }

  /* ── ETF 詳細頁（js/detail.js）── */
  .dt-headrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
  .dt-px { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--bright); }
  .dt-tabs { display:flex; gap:4px; margin:8px 0 12px; border-bottom:1px solid var(--border); }
  .dt-tab { flex:1 1 0; min-width:0; padding:10px 2px; background:none; border:none;
            border-bottom:2px solid transparent; color:var(--dim); font-size:16px; cursor:pointer; }
  .dt-tab.on { color:var(--bright); font-weight:700; border-bottom-color:var(--link); }
  .dt-tab[hidden], .dt-pane[hidden] { display:none; }
  .dt-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
            padding:9px 0; border-bottom:1px solid var(--border); font-size:15px; }
  .dt-lbl { color:var(--dim); flex:0 0 auto; font-size:16px; }   /* CP7 Visual Gate：Detail 中文標籤 15 → 16（數值 .dt-val 維持 15） */
  .dt-val { text-align:right; color:var(--bright); font-family:var(--mono); min-width:0; overflow-wrap:anywhere; }
  .dt-sub { font-family:var(--sans); font-size:14px; color:var(--dim); margin-top:2px; }
  .dt-tag { display:inline-block; font-family:var(--sans); font-size:13px; color:var(--dim);
            border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-left:4px; }
  .dt-note { font-size:14px; color:var(--dim); line-height:1.6; margin:10px 0; }
  .dt-sec  { font-size:16px; color:var(--bright); font-weight:700; margin:16px 0 6px; }
  .dt-up { color:var(--up); }
  .dt-dn { color:var(--dn); }
  .dt-calc { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
  .dt-bars { padding-left:0; }
  .dt-foot { font-size:13px; color:var(--dim); line-height:1.6; margin-top:16px; }