/* cards 首頁「美國信用卡全地圖」（2026-10-28）。只有首頁載入（/cards-hub.css）。
   沿用站上的米色紙、墨色髮絲線、DM Mono 數字；顏色變數在 assets/style.css 的 :root。 */

.ch-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ch-hero ~ * a:focus-visible,.ch-hero a:focus-visible,.ch-hero button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.mono,.ch-count b,.ch-loan b,.ch-rate b,.ch-line-name b,.ch-dline summary b,.ch-jump b{font-family:"DM Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── hero：左邊文字，右邊分數儀表 ─────────────────────────── */
.ch-hero{padding:64px 0 44px}
.ch-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:44px;align-items:start}
.ch-hero h1{font-size:clamp(34px,4.6vw,60px);max-width:none}
.ch-hero .lede-zh{white-space:normal}
.ch-hero .lede-sub{max-width:52ch}
.ch-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.ch-jump>span{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);margin-right:4px}
.ch-jump a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;padding:5px 10px 5px 5px;border:1px solid var(--hair);background:var(--card-bg)}
.ch-jump a:hover{border-color:var(--ink)}
.ch-jump b{display:inline-grid;place-items:center;min-width:24px;height:20px;background:var(--c);color:#fff;font-size:11px;font-weight:500}
.ch-jump .ch-jump-all{padding:5px 10px;border-color:var(--ink)}

.ch-dial{background:var(--card-bg);border:1px solid var(--ink);padding:18px 18px 16px;box-shadow:7px 7px 0 rgba(21,25,30,.12)}
.ch-dial-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ch-dial-top img{width:52px;height:auto;flex:none}
.ch-dial-label{font-weight:800;font-size:16px;line-height:1.3}
.ch-dial-label span{display:block;font-family:"DM Mono",ui-monospace,monospace;font-weight:400;font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);margin-top:3px}
.ch-scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border:1px solid var(--ink);position:relative}
.ch-scale::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background:linear-gradient(90deg,#9aa3ab 0 16.66%,#c4452f 16.66% 33.33%,#d9822b 33.33% 50%,#c9a227 50% 66.66%,#5e9b52 66.66% 83.33%,#2f7d4f 83.33%)}
.ch-seg{padding:9px 4px 12px;text-align:center;border-left:1px solid var(--hair);color:var(--ink-2);background:transparent;min-width:0}
.ch-seg:first-child{border-left:0}
.ch-seg b{display:block;font-size:12.5px;font-weight:800;color:var(--ink);font-family:"DM Mono",ui-monospace,monospace;letter-spacing:-.02em;white-space:nowrap}
.ch-seg span{display:block;font-size:10px;line-height:1.3;margin-top:2px;overflow-wrap:anywhere}
.ch-seg:hover{background:rgba(21,25,30,.05)}
.ch-seg[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.ch-seg[aria-checked="true"] b{color:var(--signal)}
.ch-bands{margin-top:16px}
.ch-band-head{font-family:"Noto Sans TC","PingFang TC",sans-serif;font-size:19px;font-weight:800;line-height:1.4;letter-spacing:-.01em}
.ch-band-body{margin-top:6px;font-size:14px;line-height:1.75;color:var(--ink-2)}
.ch-band-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.ch-count{display:flex;align-items:baseline;gap:8px;min-width:0}
.ch-count b{font-size:46px;line-height:1;font-weight:500;letter-spacing:-.04em}
.ch-count span{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ch-quiz{flex:none;padding:11px 16px;font-size:13.5px}
.ch-band-note{margin-top:8px;font-size:11.5px;color:var(--ink-3);line-height:1.6}
.ch-band-note a{color:inherit}
.ch-band-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.ch-band-cols h3{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;color:var(--ink-3);margin-bottom:6px}
.ch-bonus{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ch-bonus a{display:block;text-decoration:none;color:var(--ink);font-size:12.5px;line-height:1.45;border-left:3px solid var(--accent);padding:2px 0 2px 8px}
.ch-bonus a:hover b{text-decoration:underline}
.ch-bonus b{display:block;font-size:13px}
.ch-bonus span{color:var(--ink-2)}
.ch-loan{display:flex;flex-direction:column;gap:2px}
.ch-loan b{font-size:30px;font-weight:500;line-height:1.05;letter-spacing:-.03em}
.ch-loan span,.ch-loan-text{font-size:12px;color:var(--ink-2);line-height:1.55}
.ch-more{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--ink)}
.ch-next{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.ch-next span{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-right:2px}
.ch-next a{font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none;padding:4px 9px;border:1px solid var(--hair);border-left:4px solid var(--c);background:#fff}
.ch-next a:hover{border-color:var(--ink);border-left-color:var(--c)}

/* ── 路線圖 ─────────────────────────────────────────────── */
.ch-map{padding:56px 0 46px;border-top:1px solid var(--ink)}
.ch-map-head{max-width:760px}
.ch-map-head .kicker{margin-bottom:12px}
.ch-map-head h2,.ch-quiz-head h2,.ch-money h2{text-wrap:balance}
.ch-map-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.25;letter-spacing:-.02em}
.ch-map-sub{margin-top:10px;font-size:15px;line-height:1.8;color:var(--ink-2)}
.ch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:24px 0 8px}
.ch-sit{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ch-sit>span{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-3);margin-right:4px}
.ch-sit button{font-size:13px;font-weight:600;padding:6px 11px;border:1px solid var(--hair);background:var(--card-bg);color:var(--ink-2)}
.ch-sit button:hover{border-color:var(--ink);color:var(--ink)}
.ch-sit button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ch-sit .ch-sit-clear{border-style:dashed}
.ch-search{flex:1 1 220px;max-width:340px;margin-left:auto}
.ch-search input{width:100%;font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--ink);background:#fff;border-radius:0;color:var(--ink)}
.ch-hits{flex-basis:100%;min-height:1.4em;font-size:12.5px;color:var(--ink-3);font-family:"DM Mono",ui-monospace,monospace}
.ch-lines{list-style:none;padding:0;margin:8px 0 0}
.ch-line{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--hair)}
.ch-line:last-child{border-bottom:1px solid var(--hair)}
.ch-line-name{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;padding-top:2px}
.ch-line-name b{grid-row:span 2;display:inline-grid;place-items:center;width:34px;height:34px;background:var(--c);color:#fff;font-size:15px;font-weight:500}
.ch-line-name span{font-weight:800;font-size:15.5px}
.ch-line-name em{font-style:normal;font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:var(--c)}
.ch-line-name small{grid-column:2;font-size:12px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.ch-stops{list-style:none;padding:0 0 6px;margin:0;display:flex;position:relative;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ch-stops li{flex:1 0 86px;position:relative;display:flex;justify-content:center}
.ch-stops li::before{content:"";position:absolute;top:9px;left:0;right:0;height:5px;background:var(--c)}
.ch-stops li:first-child::before{left:50%}
.ch-stops li:last-child::before{right:50%}
.ch-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--ink);padding:0 4px;min-width:0;transition:opacity .15s}
.ch-stop i{width:23px;height:23px;border-radius:50%;background:#fff;border:5px solid var(--c);box-sizing:border-box;transition:transform .15s}
.ch-stop span{font-size:12.5px;font-weight:700;line-height:1.35;text-align:center;max-width:7.5em}
.ch-stop:hover i,.ch-stop:focus-visible i{transform:scale(1.25)}
.ch-stop:hover span{text-decoration:underline;text-underline-offset:3px}
.ch-stop.is-current i{background:var(--c)}
.ch-map.is-filtering .ch-stop{opacity:.22}
.ch-map.is-filtering .ch-stop.is-on{opacity:1}
.ch-map.is-filtering .ch-stop.is-on i{background:var(--c);transform:scale(1.15)}

/* ── 篩選器前的小標題 ─────────────────────────────────── */
.ch-quiz-head{padding-top:56px;padding-bottom:22px}
.ch-quiz-head .kicker{margin-bottom:12px}
.ch-quiz-head h2{font-size:clamp(24px,2.8vw,34px);line-height:1.3;letter-spacing:-.02em}

/* ── money 站聯動區 ───────────────────────────────────────── */
.ch-money{background:var(--ink);color:var(--bg);padding:48px 0}
.ch-money-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:36px;align-items:start}
.ch-money .kicker{color:#a9b4bf;margin-bottom:12px}
.ch-money h2{font-size:clamp(22px,2.4vw,30px);line-height:1.35;color:var(--bg)}
.ch-money-sub{margin-top:10px;font-size:14.5px;line-height:1.8;color:#cfd6dc}
.ch-rate{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 16px;margin-top:20px;padding:16px 18px;border:1px solid #f6f1e8;text-decoration:none;color:var(--bg)}
.ch-rate span{font-size:13px;font-weight:700}
.ch-rate b{grid-row:span 2;font-size:44px;font-weight:500;color:var(--signal);line-height:1;letter-spacing:-.03em}
.ch-rate small{font-size:11.5px;color:#a9b4bf;font-family:"DM Mono",ui-monospace,monospace}
.ch-rate em{grid-column:1/-1;font-style:normal;font-size:13px;font-weight:700;margin-top:10px;color:var(--signal)}
.ch-rate:hover{background:rgba(246,241,232,.06)}
.ch-money-tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ch-money-tiles a{display:block;height:100%;padding:13px 14px;border:1px solid rgba(246,241,232,.28);text-decoration:none;color:var(--bg)}
.ch-money-tiles a:hover{border-color:var(--signal)}
.ch-money-tiles b{display:block;font-size:15px}
.ch-money-tiles span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:#cfd6dc}
.ch-money-more a{display:grid;place-items:center;border-style:dashed}
.ch-money-more b{color:var(--signal)}

/* ── 完整說明、生活、名錄、姊妹站 ───────────────────────────── */
.ch-details{padding:60px 0 40px;border-top:1px solid var(--ink)}
.ch-dlines{margin-top:22px;border-top:1px solid var(--ink)}
.ch-dline{border-bottom:1px solid var(--hair)}
.ch-dline summary{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:16px 0;cursor:pointer;list-style:none}
.ch-dline summary::-webkit-details-marker{display:none}
.ch-dline summary::after{content:"＋";font-weight:700;color:var(--ink-3)}
.ch-dline[open] summary::after{content:"－"}
.ch-dline summary b{display:inline-grid;place-items:center;width:30px;height:26px;background:var(--c);color:#fff;font-size:13px;font-weight:500}
.ch-dline summary span{font-weight:800;font-size:16px}
.ch-dline summary small{font-size:13px;color:var(--ink-2)}
.ch-dline summary em{grid-column:2/4;grid-row:2;font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.6}
.ch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:4px 0 22px}
.ch-st{background:var(--card-bg);border:1px solid var(--hair);border-top:4px solid var(--c);padding:14px 16px 16px;scroll-margin-top:96px}
.ch-st:target{border-color:var(--ink);border-top-color:var(--c)}
.ch-st-line{display:flex;align-items:center;gap:7px;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.ch-st-line i{width:11px;height:11px;border-radius:50%;border:3px solid var(--c);background:#fff;flex:none}
.ch-st-title{margin-top:6px;font-size:16.5px;font-weight:800;line-height:1.45;letter-spacing:-.01em}
.ch-st-body{margin-top:6px;font-size:14px;line-height:1.75;color:var(--ink-2)}
.ch-facts{margin:10px 0 0;display:grid;gap:0;border-top:1px solid var(--hair)}
.ch-facts div{display:grid;grid-template-columns:minmax(84px,38%) 1fr;gap:8px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:12.5px;line-height:1.5}
.ch-facts dt{color:var(--ink-3)}
.ch-facts dd{margin:0;font-weight:600;color:var(--ink)}
.ch-links{margin-top:10px;display:grid;gap:8px}
.ch-links-h{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:3px}
.ch-links ul,.ch-fresh ul,.ch-life-links{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.ch-links a,.ch-fresh a,.ch-life-links a{font-size:13px;line-height:1.5;color:var(--ink);text-underline-offset:3px}
.ch-links small,.ch-life-links small{color:var(--ink-3);font-size:11px}
.ch-lg-colls ul{display:flex;flex-wrap:wrap;gap:5px}
.ch-lg-colls a{display:inline-flex;gap:4px;padding:3px 8px;border:1px solid var(--hair);text-decoration:none;font-weight:600;background:#fff}
.ch-lg-colls a:hover{border-color:var(--ink)}
.ch-site{display:inline-block;margin-right:6px;padding:0 5px;font-size:10.5px;font-weight:700;color:#fff;background:#3b4a57;border-radius:2px;vertical-align:1px;white-space:nowrap}
.ch-fresh{margin-top:18px;padding:14px 16px;border:1px dashed var(--ink-3)}

.ch-life,.ch-dir,.ch-sister{margin-top:54px}
.ch-life-grid{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ch-life-item{background:var(--card-bg);border:1px solid var(--hair);padding:14px 16px}
.ch-life-t{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.ch-life-b{margin:6px 0 8px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.ch-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px 18px;margin-top:20px}
.ch-dir-group{border-top:2px solid var(--ink);padding-top:10px}
.ch-dir-group h4{font-size:14px;font-weight:800;margin-bottom:6px}
.ch-dir-group ul{list-style:none;padding:0;margin:0}
.ch-dir-group li+li{border-top:1px solid var(--hair)}
.ch-dir-group a{display:flex;flex-direction:column;padding:7px 0;text-decoration:none;color:var(--ink)}
.ch-dir-group a b{font-size:13.5px}
.ch-dir-group a:hover b{text-decoration:underline;text-underline-offset:3px}
.ch-dir-group a span{font-size:12px;color:var(--ink-3)}
.ch-sister-grid{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ch-sister-grid a{display:block;height:100%;padding:14px 16px;border:1px solid var(--hair);background:var(--card-bg);text-decoration:none;color:var(--ink)}
.ch-sister-grid a:hover{border-color:var(--ink)}
.ch-sister-grid em{display:block;font-style:normal;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.ch-sister-grid b{display:block;margin-top:4px;font-size:15.5px}
.ch-sister-grid span{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.ch-sister-grid .ch-sis-money a{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ch-sister-grid .ch-sis-money em,.ch-sister-grid .ch-sis-money span{color:#cfd6dc}

/* ── 側欄：點一站打開 ───────────────────────────────────── */
.ch-drawer{position:fixed;inset:0;z-index:80;background:rgba(21,25,30,.38);display:flex;justify-content:flex-end}
.ch-drawer[hidden]{display:none}
.ch-drawer-card{width:min(460px,100%);height:100%;background:var(--bg);border-left:1px solid var(--ink);display:flex;flex-direction:column;outline:none;animation:chIn .18s ease-out}
@keyframes chIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.ch-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--ink)}
.ch-drawer-line{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.ch-drawer-line i{width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}
.ch-x{width:34px;height:34px;border:1px solid var(--ink);font-size:15px;line-height:1}
.ch-x:hover{background:var(--ink);color:var(--bg)}
.ch-drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 18px}
.ch-drawer-body .ch-st{border:0;padding:12px 0 0;background:transparent}
.ch-drawer-body .ch-st-line{display:none}
.ch-drawer-body .ch-st-title{font-size:19px}
.ch-drawer-body .ch-st-body{font-size:14.5px}
.ch-drawer-nav{display:flex;justify-content:space-between;gap:8px;padding:12px 18px;border-top:1px solid var(--hair)}
.ch-drawer-nav button{font-size:13px;font-weight:700;padding:8px 12px;border:1px solid var(--hair);background:var(--card-bg)}
.ch-drawer-nav button:hover:not(:disabled){border-color:var(--ink)}
.ch-drawer-nav button:disabled{opacity:.35;cursor:default}
body.ch-lock{overflow:hidden}
@media(prefers-reduced-motion:reduce){.ch-drawer-card{animation:none}.ch-stop,.ch-stop i{transition:none}}

/* ── 韓文、日文（2026-10-30）─────────────────────────────────
   儀表標題上面寫死了繁中字型；韓文、日文改用頁面本身的字型（style.css 的 :lang(ko|ja) body），日文漢字才不會是繁中字形。
   韓文照詞換行：瀏覽器預設會在音節中間斷行（「가｜입 보너스」）。 */
:lang(ko) .ch-band-head,:lang(ja) .ch-band-head{font-family:inherit}
:lang(ko) .ch-hero,:lang(ko) .ch-map,:lang(ko) .ch-quiz-head,:lang(ko) .ch-money,:lang(ko) .ch-details{word-break:keep-all;overflow-wrap:break-word}
/* 日文標題照詞組換行（Chrome 119 起支援；不支援的瀏覽器照舊逐字換行） */
:lang(ja) .ch-hero .lede-zh,:lang(ja) .ch-band-head,:lang(ja) .ch-map-head h2,:lang(ja) .ch-quiz-head h2,:lang(ja) .ch-money h2,:lang(ja) .ch-st-title{word-break:auto-phrase}

/* ── 窄螢幕 ─────────────────────────────────────────────── */
@media(max-width:980px){
  .ch-hero-grid{grid-template-columns:1fr;gap:30px}
  .ch-dial{max-width:620px}
  .ch-money-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .ch-hero{padding:40px 0 34px}
  .ch-line{grid-template-columns:1fr;gap:10px}
  .ch-line-name{grid-template-columns:auto auto 1fr}
  .ch-line-name b{grid-row:auto;width:28px;height:26px;font-size:13px}
  .ch-line-name small{grid-column:1/-1}
  .ch-stops li{flex-basis:78px}
  .ch-search{max-width:none;margin-left:0}
  .ch-drawer{align-items:flex-end}
  .ch-drawer-card{height:auto;max-height:88vh;max-height:88dvh;width:100%;border-left:0;border-top:1px solid var(--ink);animation-name:chUp}
  @keyframes chUp{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
}
@media(max-width:520px){
  .ch-jump{display:none}
  .ch-scale{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-scale::after{display:none}
  .ch-seg:nth-child(4){border-left:0}
  .ch-seg:nth-child(n+4){border-top:1px solid var(--hair)}
  .ch-band-stat{flex-wrap:wrap}
  .ch-quiz{width:100%;justify-content:center}
  .ch-band-cols{grid-template-columns:1fr}
  .ch-money-tiles{grid-template-columns:1fr 1fr}
  .ch-dline summary{grid-template-columns:auto minmax(0,1fr) auto}
  .ch-dline summary small{grid-column:2;grid-row:2}
  .ch-dline summary em{grid-column:1/-1;grid-row:3}
}