/* 我家網房貸試算元件（桌機/手機共用，搭配 assets/js/mortgage_calc.js） */
.mc-host{container-type:inline-size;display:block}
.mc{
  --mc-surface:#fff; --mc-surface-2:#f3f5f7; --mc-ink:#1b2430; --mc-muted:#5f6a76;
  --mc-line:#dde2e6; --mc-line-strong:#b9c2c9;
  --mc-accent:#1f5fbf; --mc-accent-soft:#e3ecfa; --mc-price:#c2352c;
  --mc-principal:#2f6fd1; --mc-interest:#e0912f; --mc-good:#2e8b57;
  font-size:14px; line-height:1.6; color:var(--mc-ink); text-align:left;
  -webkit-text-size-adjust:100%;
}
.mc *{box-sizing:border-box;min-width:0}
.mc button,.mc input{font:inherit;color:inherit}
.mc button{cursor:pointer}
.mc button:focus-visible,.mc input:focus-visible{outline:2px solid var(--mc-accent);outline-offset:2px}
.mc-num{font-variant-numeric:tabular-nums}
.mc .mc-seg{display:inline-flex;border:1px solid var(--mc-line-strong);border-radius:8px;overflow:hidden;background:var(--mc-surface);vertical-align:middle}
.mc .mc-seg button{border:0;background:transparent;padding:6px 12px;color:var(--mc-muted);border-right:1px solid var(--mc-line);line-height:1.4;margin:0;border-radius:0}
.mc .mc-seg button:last-child{border-right:0}
.mc .mc-seg button[aria-pressed="true"]{background:var(--mc-accent);color:#fff;font-weight:700}
.mc .mc-field{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--mc-line)}
.mc .mc-field:last-child{border-bottom:0}
.mc .mc-field>label{font-weight:500;margin:0}
.mc .mc-hint{grid-column:2;font-size:12.5px;color:var(--mc-muted);margin-top:-2px}
.mc .mc-stages{grid-column:2;display:grid;gap:8px}
.mc .mc-stages:empty{display:none}
.mc .mc-stages .mc-row{font-size:13px;color:var(--mc-muted)}
.mc .mc-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.mc .mc-in{display:inline-flex;align-items:center;border:1px solid var(--mc-line-strong);border-radius:8px;background:var(--mc-surface);padding:0 10px;height:36px;vertical-align:middle}
.mc .mc-in input{border:0;background:transparent;width:6.5em;text-align:right;height:100%;padding:0 4px;margin:0;box-shadow:none;font-size:14px}
.mc .mc-in input.mc-w4{width:4.5em}
.mc .mc-in u{text-decoration:none;color:var(--mc-muted);font-size:13px}
.mc input[type=range]{width:100%;accent-color:var(--mc-accent);margin:4px 0;height:auto}
.mc .mc-range{display:grid;grid-template-columns:1fr 64px;gap:12px;align-items:center}
.mc .mc-range output{font-weight:700;font-size:18px;text-align:right}
.mc .mc-range output small{font-size:12px;font-weight:400;color:var(--mc-muted);margin-left:2px}
.mc .mc-ticks{display:flex;justify-content:space-between;font-size:11px;margin-top:-6px;padding-right:76px}

/* 完整頁 */
.mc-full{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:22px;align-items:start}
.mc-full .mc-inputs{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:10px;padding:6px 18px 10px}
.mc-full .mc-results{position:sticky;top:12px;display:grid;gap:14px}
.mc .mc-hero{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:10px;padding:18px 20px 16px;box-shadow:0 10px 30px rgba(27,36,48,.08)}
.mc .mc-lbl{font-size:13px;color:var(--mc-muted)}
.mc .mc-big{font-size:40px;font-weight:700;line-height:1.1;color:var(--mc-price);margin:2px 0 0}
.mc .mc-big small{font-size:15px;font-weight:500;color:var(--mc-muted);margin-left:6px}
.mc .mc-sub{margin-top:8px;font-size:13.5px}
.mc .mc-phase{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mc .mc-phase[hidden]{display:none}
.mc .mc-phase>div{border:1px solid var(--mc-line);border-radius:8px;padding:8px 12px;background:var(--mc-surface-2)}
.mc .mc-phase>div .l{font-size:12px;color:var(--mc-muted)}
.mc .mc-phase>div .v{font-size:20px;font-weight:700}
.mc .mc-phase>div.on{border-color:var(--mc-price)}
.mc .mc-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mc .mc-stats>div{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:8px;padding:10px 12px}
.mc .mc-stats .l{font-size:12px;color:var(--mc-muted)}
.mc .mc-stats .v{font-size:19px;font-weight:700}
.mc .mc-stats .v small{font-size:12px;color:var(--mc-muted);font-weight:400;margin-left:2px}
.mc .mc-stats .v.first{color:var(--mc-accent)}
.mc .mc-stats .v.interest{color:var(--mc-interest)}
.mc .mc-insight{background:var(--mc-surface);border:1px solid var(--mc-line);border-left:3px solid var(--mc-interest);border-radius:8px;padding:10px 14px;font-size:13.5px;display:grid;gap:6px}
.mc .mc-chart{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:8px;padding:12px 12px 6px}
.mc .mc-legend{display:flex;gap:14px;font-size:12px;color:var(--mc-muted);margin-bottom:4px;flex-wrap:wrap}
.mc .mc-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.mc .mc-legend i.p{background:var(--mc-principal)}
.mc .mc-legend i.i{background:var(--mc-interest)}
.mc .mc-legend i.b{background:var(--mc-price);height:3px;vertical-align:3px;width:14px}
.mc canvas{width:100%;height:150px;display:block}
.mc .mc-details{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:8px}
.mc .mc-details summary{padding:10px 14px;cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between}
.mc .mc-details summary::-webkit-details-marker{display:none}
.mc .mc-details summary::after{content:"展開";color:var(--mc-accent);font-weight:400;font-size:13px}
.mc .mc-details[open] summary::after{content:"收合"}
.mc .mc-tbl{max-height:280px;overflow:auto;border-top:1px solid var(--mc-line)}
.mc table{width:100%;border-collapse:collapse;font-size:13px;margin:0}
.mc th,.mc td{padding:5px 10px;text-align:right;border-bottom:1px solid var(--mc-line);white-space:nowrap;border-left:0;border-right:0}
.mc th{position:sticky;top:0;background:var(--mc-surface-2);font-weight:500;color:var(--mc-muted)}
.mc th:first-child,.mc td:first-child{text-align:left}
.mc tr.yr td{background:var(--mc-surface-2);font-weight:700}
.mc .mc-share{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mc .mc-share button,.mc .mc-share .mc-linebtn{border:1px solid var(--mc-line-strong);background:var(--mc-surface);border-radius:8px;padding:7px 12px;font-size:14px;line-height:1.4;text-decoration:none;color:var(--mc-ink)}
.mc .mc-share button.pri{background:var(--mc-accent);color:#fff;border-color:var(--mc-accent);font-weight:700}
.mc .mc-share .mc-linebtn{background:#06c755;border-color:#06c755;color:#fff;font-weight:700}
.mc .mc-toast{font-size:12.5px;color:var(--mc-good)}
.mc .mc-disclaimer{font-size:12px;color:var(--mc-muted)}
.mc .mc-stickybar{display:none}

/* 窄容器（手機） */
@container (max-width:560px){
  .mc-full{grid-template-columns:1fr;gap:14px}
  .mc-full .mc-results{position:static;order:-1}
  .mc .mc-field{grid-template-columns:1fr;gap:6px}
  .mc .mc-hint,.mc .mc-stages{grid-column:1}
  .mc .mc-big{font-size:34px}
  .mc .mc-stickybar{display:flex;position:sticky;bottom:0;grid-column:1;margin:0 -2px;background:var(--mc-surface);border-top:1px solid var(--mc-line);padding:10px 14px;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 -8px 20px rgba(0,0,0,.08);z-index:5}
  .mc .mc-stickybar .l{font-size:11px;color:var(--mc-muted)}
  .mc .mc-stickybar .v{font-size:20px;font-weight:700;color:var(--mc-price)}
  .mc .mc-stickybar .v2{font-size:16px;font-weight:700}
  .mc .mc-stickybar button{background:var(--mc-accent);color:#fff;border:0;border-radius:8px;padding:8px 12px;font-weight:700;white-space:nowrap}
}
/* 不支援 container query 的瀏覽器用視窗寬度備援 */
@supports not (container-type:inline-size){
  @media (max-width:600px){
    .mc-full{grid-template-columns:1fr}
    .mc-full .mc-results{position:static;order:-1}
    .mc .mc-field{grid-template-columns:1fr}
    .mc .mc-hint,.mc .mc-stages{grid-column:1}
  }
}

/* 物件頁卡片 */
.mc-card{background:var(--mc-surface);border:1px solid var(--mc-line);border-radius:10px;padding:14px 16px 12px;margin:12px 0;box-shadow:0 6px 18px rgba(27,36,48,.06)}
.mc-card .mc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mc-card .mc-head .t{font-weight:700;font-size:14px;color:var(--mc-muted)}
.mc-card .mc-head .mc-gofull{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--mc-accent);background:var(--mc-accent-soft);border:1px solid var(--mc-accent);border-radius:8px;padding:5px 12px;text-decoration:none;line-height:1.4;white-space:nowrap}
.mc-card .mc-head .mc-gofull:hover{background:var(--mc-accent);color:#fff;text-decoration:none}
.mc-card .mc-head .mc-gofull span{transition:transform .15s}
.mc-card .mc-head .mc-gofull:hover span{transform:translateX(2px)}
.mc-card .mc-headline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.mc-card .mc-headline .v{font-size:30px;font-weight:700;color:var(--mc-price);line-height:1.1}
.mc-card .mc-headline .u{font-size:13px;color:var(--mc-muted)}
.mc-card .mc-assump{font-size:13px;color:var(--mc-muted);margin-bottom:10px}
.mc-card .mc-assump b{color:var(--mc-ink);font-weight:500}
.mc-card .mc-ctl{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;font-size:13px;padding-top:10px;border-top:1px dashed var(--mc-line)}
.mc-card .mc-ctl .k{color:var(--mc-muted)}
.mc-card .mc-ctl .mc-seg button{padding:4px 10px;font-size:13px}
.mc-card .mc-ctl .mc-in{height:30px}
.mc-card .mc-ctl .mc-in input{width:4em}
.mc-card .mc-foot{display:flex;justify-content:space-between;gap:6px 10px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.mc-card .mc-foot .dp b{color:var(--mc-accent)}
.mc-card .mc-foot .ins{color:var(--mc-muted)}