/* ============================================================
   房貸清醒計算機 — 工具樣式
   全部規則收在 .mrc-root 之內，class 一律 mrc- 開頭，
   因此不會與 style.css（.hero / .field / .control / .card …）互相污染；
   深色底只畫在自己的圓角框裡，不會蓋掉站台頁首頁尾。
   ============================================================ */

/* 工具自己的容器：寬度對齊 snow-tunnel-turtle 的看板（min(1520px, 100% - 56px)） */
.mrc-wrap{width:min(1520px,calc(100% - 56px));margin:26px auto 48px}
@media (max-width:900px){.mrc-wrap{width:min(100% - 24px,1520px);margin:18px auto 32px}}

.mrc-root{
  --mrc-ink:#f4f8ff;
  --mrc-dim:#8291b5;
  --mrc-amber:#ffc857;
  --mrc-card:linear-gradient(180deg,#151c33,#101728);
  --mrc-card-line:rgba(126,155,220,.22);
  --mrc-field:#0d1426;
  --mrc-field-line:rgba(96,128,192,.38);
  --mrc-shadow:0 18px 44px rgba(0,0,0,.42);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0;
  padding:clamp(14px,1.8vw,26px);
  border-radius:24px;
  border:1px solid rgba(120,140,210,.3);
  color:var(--mrc-ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(620px 420px at 4% -6%,rgba(96,58,168,.5),transparent 70%),
    radial-gradient(520px 380px at 82% 0%,rgba(58,74,180,.34),transparent 72%),
    radial-gradient(700px 500px at 98% 64%,rgba(120,48,132,.3),transparent 70%),
    radial-gradient(600px 460px at 0% 78%,rgba(58,40,140,.28),transparent 72%),
    linear-gradient(180deg,#0a0c1c,#070a16 55%,#05070f);
  box-shadow:0 26px 60px rgba(12,16,40,.26);
}
/* 星點畫在框內（不用 position:fixed，才不會溢到整頁） */
.mrc-root::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 32% 8%,#cfe6ff,transparent),
    radial-gradient(1.6px 1.6px at 58% 22%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 74% 12%,#ffd9f2,transparent),
    radial-gradient(1.6px 1.6px at 88% 30%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 8% 52%,#d8e8ff,transparent),
    radial-gradient(1.4px 1.4px at 45% 62%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 92% 78%,#ffe6fb,transparent),
    radial-gradient(1.4px 1.4px at 24% 88%,#fff,transparent);
}
.mrc-root>*{position:relative;z-index:1}

/* 擋掉站台元素層級樣式滲入 */
.mrc-root h1,.mrc-root h2,.mrc-root h3,.mrc-root p,.mrc-root figure,.mrc-root label{
  margin:0;padding:0;background:none;color:inherit
}
.mrc-root img{max-width:100%}
.mrc-root button{font-family:inherit}

/* ===== 頂列 ===== */
.mrc-topbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.mrc-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.2em;color:#9fb0d6}
.mrc-eyebrow i{font-style:normal;color:#ffd66e;font-size:11px}
.mrc-mode{
  margin-left:auto;display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:800;color:#f3e9ff;
  background:linear-gradient(180deg,rgba(74,38,120,.9),rgba(48,24,82,.9));
  border:1px solid rgba(190,120,255,.55);
  box-shadow:0 0 20px rgba(168,85,247,.32),inset 0 1px 0 rgba(255,255,255,.08)
}
.mrc-mode i{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80}
.mrc-mode[aria-pressed="false"]{border-color:rgba(140,150,190,.45);box-shadow:none;color:#c9d3ea}
.mrc-mode[aria-pressed="false"] i{background:#7c8aa8;box-shadow:none}

/* ===== Hero ===== */
.mrc-hero{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(16px,2vw,32px);align-items:center;padding:clamp(10px,1.6vw,20px) 0 clamp(12px,1.6vw,18px)
}
.mrc-kicker{
  display:flex;align-items:center;gap:10px;margin:0 0 6px;
  font-size:12px;letter-spacing:.2em;color:#9fb0d6;font-weight:800
}
.mrc-kicker i{font-style:normal;color:#ffd66e;font-size:11px}
.mrc-root .mrc-hero h1{
  margin:0 0 12px;font-size:clamp(30px,3.6vw,52px);line-height:1.1;font-weight:900;letter-spacing:.01em;
  background:linear-gradient(96deg,#8fe3ff 0%,#ffffff 38%,#ffd0ee 68%,#ff8fd2 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(126,90,255,.35))
}
.mrc-lead{margin:0 0 7px;font-size:clamp(17px,1.7vw,26px);font-weight:900;line-height:1.32;color:var(--mrc-ink)}
.mrc-lead-pink{color:#ff7ec4;text-shadow:0 4px 18px rgba(255,110,178,.25)}
.mrc-desc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.mrc-desc p{margin:0;font-size:clamp(13px,1vw,16px);line-height:1.8;color:#cfd9ef}
.mrc-emoji{font-size:clamp(18px,1.6vw,24px);letter-spacing:4px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}

.mrc-art-row{position:relative;display:flex;align-items:stretch;justify-content:flex-end;gap:clamp(8px,.9vw,14px)}
.mrc-art{
  margin:0;flex:1 1 0;min-width:0;border-radius:16px;overflow:hidden;background:#141a2e;
  border:1px solid rgba(150,170,235,.26);box-shadow:var(--mrc-shadow)
}
/* 三張圖卡按原始比例分配寬度 → 高度一致又不會裁掉圖上的字 */
.mrc-art:nth-of-type(1){flex-grow:.964}
.mrc-art:nth-of-type(2){flex-grow:.890}
.mrc-art:nth-of-type(3){flex-grow:.779}
.mrc-art img{display:block;width:100%;height:100%;object-fit:contain}
.mrc-vs{
  position:absolute;left:calc(33.3% - 40px);top:50%;transform:translateY(-52%);
  width:clamp(58px,6vw,92px);height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))
}

/* ===== 卡片 ===== */
.mrc-panels{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(12px,1.2vw,18px);align-items:stretch
}
.mrc-card{
  position:relative;padding:clamp(14px,1.3vw,20px);border-radius:20px;
  background:var(--mrc-card);border:1px solid var(--mrc-card-line);box-shadow:var(--mrc-shadow)
}
.mrc-result{display:flex;flex-direction:column}
.mrc-input{padding-bottom:clamp(56px,4.6vw,70px)}
.mrc-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mrc-root .mrc-card-head h2{
  margin:0;display:flex;align-items:center;gap:8px;
  font-size:clamp(17px,1.35vw,21px);font-weight:900;color:var(--mrc-ink)
}
.mrc-spark{font-style:normal;color:#ffd66e;font-size:.82em}
.mrc-hint{
  margin:0;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#c6d2ea;
  background:rgba(30,40,66,.9);border:1px solid rgba(120,146,204,.28);border-radius:999px;padding:4px 12px 4px 6px
}
.mrc-hint img{width:24px;height:auto}
.mrc-unit{
  margin-left:auto;display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(16,24,44,.9);border:1px solid rgba(120,146,204,.28)
}
.mrc-unit button{
  border:0;background:transparent;color:#b9c7e4;font-size:12.5px;font-weight:800;
  padding:6px 16px;border-radius:999px;cursor:pointer;transition:.2s
}
.mrc-unit button.on{
  background:linear-gradient(180deg,#3a94d6,#2b7ec2);color:#fff;
  box-shadow:0 4px 12px rgba(43,126,194,.4)
}

/* ===== 輸入欄位 ===== */
.mrc-fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(9px,.9vw,13px)}
.mrc-field{
  display:block;padding:9px 12px 10px;border-radius:14px;
  background:rgba(14,21,38,.72);border:1px solid rgba(104,132,196,.24)
}
.mrc-field-label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:#b9c6e2}
.mrc-control{
  display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:11px;
  background:var(--mrc-field);border:1px solid var(--mrc-field-line);
  transition:border-color .2s,box-shadow .2s
}
.mrc-control:focus-within{border-color:rgba(111,212,255,.75);box-shadow:0 0 0 3px rgba(111,212,255,.15)}
.mrc-control input{
  flex:1 1 auto;min-width:0;width:100%;border:0;outline:none;background:transparent;color:#fff;
  font-size:clamp(14px,1vw,17px);font-weight:800;font-family:inherit
}
.mrc-control em{flex:0 0 auto;font-style:normal;font-size:12.5px;font-weight:700;color:#a8b7d6}
.mrc-select{
  flex:0 0 auto;border:0;outline:none;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#a8b7d6
}
.mrc-select option{background:#111a2e;color:#fff}
/* 兩地房價是一組對照 */
.mrc-field.mrc-pair{border-color:rgba(255,175,120,.42);background:rgba(38,26,32,.5)}
.mrc-field.mrc-pair .mrc-control{border-color:rgba(255,175,120,.34)}

.mrc-btn-row{display:flex;gap:12px;margin-top:clamp(12px,1.2vw,18px);padding-left:clamp(0px,6vw,110px)}
.mrc-btn{
  display:flex;align-items:center;gap:8px;border:0;border-radius:14px;cursor:pointer;
  padding:12px 22px;font-size:clamp(14px,1.05vw,17px);font-weight:900;color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.35);transition:transform .12s,filter .2s
}
.mrc-btn:hover{filter:brightness(1.08)}
.mrc-btn:active{transform:translateY(1px)}
.mrc-btn i{font-style:normal;font-size:1.05em}
.mrc-btn-blue{background:linear-gradient(180deg,#3a9ad9,#2b7cbe)}
.mrc-btn-pink{background:linear-gradient(180deg,#ff4f9f,#f26fbe)}

.mrc-note-img{
  position:absolute;left:-4px;bottom:-12px;width:clamp(86px,8vw,120px);height:auto;
  transform:rotate(-6deg);pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))
}

/* ===== 換算結果 ===== */
.mrc-headline{
  position:relative;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px clamp(88px,9vw,126px) 12px 14px;border-radius:16px;
  background:linear-gradient(90deg,rgba(122,54,92,.85),rgba(84,50,112,.7) 55%,rgba(52,36,86,.45));
  border:1px solid rgba(255,190,140,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)
}
.mrc-headline-label{
  font-size:clamp(11.5px,.9vw,14px);font-weight:800;color:#ffdca8;
  background:rgba(70,38,86,.6);border-radius:999px;padding:5px 11px
}
.mrc-headline strong{
  font-size:clamp(28px,3vw,46px);line-height:1;font-weight:900;letter-spacing:-.02em;
  color:var(--mrc-amber);text-shadow:0 4px 22px rgba(255,200,87,.35)
}
.mrc-headline em{font-style:normal;font-size:clamp(12px,.95vw,15px);font-weight:800;color:#ffe0b4}
.mrc-peanut{
  position:absolute;right:6px;bottom:0;width:clamp(76px,7.6vw,112px);height:auto;
  pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))
}

.mrc-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;
  gap:clamp(9px,.9vw,13px);margin-top:13px;flex:1 1 auto
}
.mrc-stat{
  position:relative;min-height:76px;padding:11px 52px 12px 13px;border-radius:14px;
  background:linear-gradient(180deg,rgba(24,32,56,.95),rgba(17,24,44,.95));
  border:1px solid rgba(110,140,210,.24)
}
.mrc-stat-label{display:block;font-size:12px;font-weight:700;line-height:1.35;color:#b7c5e4}
.mrc-stat-label b{font-weight:800;color:#d8e4ff;font-size:inherit}
.mrc-stat p{margin:7px 0 0;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.mrc-stat p b{font-size:clamp(17px,1.45vw,24px);font-weight:900;letter-spacing:-.01em;color:#eaf3ff}
.mrc-stat p em{font-style:normal;font-size:12px;font-weight:700;color:#9fb0d2}
.mrc-stat img{
  position:absolute;right:7px;bottom:7px;width:clamp(32px,2.9vw,42px);height:auto;
  pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))
}

.mrc-compare{position:relative;margin-top:clamp(12px,1.2vw,18px);padding-right:clamp(0px,12vw,172px)}
.mrc-root .mrc-compare h3{
  margin:0 0 9px;display:flex;align-items:center;gap:8px;
  font-size:clamp(14px,1.15vw,17px);font-weight:900;color:var(--mrc-ink)
}
.mrc-compare h3 small{font-size:11.5px;font-weight:700;color:var(--mrc-dim)}
.mrc-bars{display:grid;gap:9px}
.mrc-bar{display:grid;grid-template-columns:clamp(84px,7.4vw,112px) minmax(0,1fr) clamp(50px,4.2vw,62px);gap:11px;align-items:center}
.mrc-bar-label{font-size:12px;font-weight:800;color:#c6d3ec;line-height:1.35}
.mrc-bar-label small{display:block;font-size:10.5px;font-weight:700;color:#93a3c6}
.mrc-track{
  height:15px;border-radius:999px;overflow:hidden;
  background:rgba(32,42,70,.95);border:1px solid rgba(96,118,172,.3)
}
.mrc-track i{
  display:block;height:100%;width:0;border-radius:inherit;transition:width .4s ease;
  background:linear-gradient(90deg,#2f9ae0,#5cc8ff)
}
.mrc-track i.mrc-fill-pink{background:linear-gradient(90deg,#ff4f9f,#ff8ec7)}
.mrc-bar b{font-size:13px;font-weight:900;color:#fff}
.mrc-axis{
  display:flex;justify-content:space-between;padding-top:5px;
  margin-left:calc(clamp(84px,7.4vw,112px) + 11px);
  margin-right:calc(clamp(50px,4.2vw,62px) + 11px);
  border-top:1px solid rgba(120,140,190,.22)
}
.mrc-axis span{font-size:10.5px;font-weight:700;color:var(--mrc-dim)}

.mrc-bubble{
  position:absolute;right:0;top:-2px;width:clamp(132px,12vw,168px);text-align:center;
  padding:9px 12px;border-radius:14px;font-size:clamp(11.5px,.95vw,13.5px);font-weight:900;color:#fff;
  background:linear-gradient(135deg,#ff4f9f,#ff86c4);border:1px solid rgba(255,190,225,.5);
  box-shadow:0 12px 26px rgba(255,79,159,.3)
}
.mrc-bubble b{font-size:1.25em}
.mrc-bubble span{display:block;margin-top:3px;color:#fff3a8}
.mrc-bubble::after{
  content:"";position:absolute;left:20px;bottom:-8px;width:14px;height:14px;
  background:#ff6cb0;transform:rotate(45deg);border-radius:3px
}

/* ===== 清醒結論 ===== */
.mrc-verdict{
  display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);
  margin-top:clamp(12px,1.4vw,20px);padding:clamp(9px,.9vw,13px) clamp(13px,1.3vw,20px);
  border-radius:20px;border:1px solid rgba(210,150,110,.38);
  background:linear-gradient(90deg,rgba(126,66,44,.62),rgba(104,56,88,.5) 60%,rgba(72,44,96,.42));
  box-shadow:var(--mrc-shadow)
}
.mrc-verdict img{flex:0 0 auto;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.mrc-mega{width:clamp(64px,5.8vw,88px)}
.mrc-cat{width:clamp(104px,10vw,146px);margin-left:auto}
.mrc-verdict-body{min-width:0}
.mrc-verdict-tag{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#ffc9d8}
.mrc-verdict-body strong{
  display:block;margin-top:4px;font-size:clamp(17px,1.9vw,28px);font-weight:900;line-height:1.28;
  color:#ffd06b;text-shadow:0 4px 20px rgba(255,190,90,.22)
}
.mrc-verdict-body p{margin:5px 0 0;font-size:clamp(12px,.95vw,14.5px);line-height:1.55;color:#e3e9f8}

.mrc-foot{margin:clamp(12px,1.4vw,20px) 0 2px;text-align:center;font-size:12px;color:#8d9cbe}
.mrc-foot b{margin-left:6px;color:#ff7ab0}

/* ===== Toast（掛在 body，獨立命名避免撞站台） ===== */
.mrc-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140px);opacity:0;pointer-events:none;
  padding:12px 20px;border-radius:999px;background:#fff;color:#141a2e;font-weight:900;font-size:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.34);transition:.3s cubic-bezier(.2,.9,.3,1);z-index:60
}
.mrc-toast.mrc-show{transform:translate(-50%,0);opacity:1}

/* ===== 響應式（框寬≒視窗寬-44px，用視窗斷點即可） ===== */
@media (min-width:1061px){
  .mrc-fields{grid-template-columns:repeat(4,1fr)}
  .mrc-fields>.mrc-field:not(.mrc-narrow){grid-column:span 2}
}
@media (max-width:960px){
  .mrc-hero{grid-template-columns:1fr}
  .mrc-panels{grid-template-columns:1fr}
  .mrc-compare{padding-right:0}
  .mrc-bubble{position:static;width:auto;margin-top:12px}
  .mrc-bubble::after{display:none}
  .mrc-btn-row{padding-left:0}
  .mrc-note-img{left:auto;right:6px;bottom:-10px;width:92px}
  /* 圖卡改左右滑動，維持原始比例不裁切 */
  .mrc-art-row{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start;padding-bottom:6px;scroll-snap-type:x mandatory}
  .mrc-art{flex:0 0 auto;scroll-snap-align:center}
  .mrc-art:nth-of-type(1),.mrc-art:nth-of-type(2),.mrc-art:nth-of-type(3){flex-grow:0}
  .mrc-art img{width:auto;height:clamp(220px,38vh,300px)}
  .mrc-vs{display:none}
}
@media (max-width:700px){
  .mrc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mrc-verdict{flex-wrap:wrap}
  .mrc-mega{width:58px}
  .mrc-cat{width:104px}
}
@media (max-width:520px){
  .mrc-root{padding:12px;border-radius:18px}
  .mrc-fields{grid-template-columns:1fr}
  .mrc-stats{grid-template-columns:1fr}
  .mrc-headline{padding:12px 14px 60px}
  .mrc-peanut{width:84px;right:8px;bottom:-2px}
  .mrc-btn-row .mrc-btn{flex:1;justify-content:center;padding:12px 10px}
  .mrc-bar{grid-template-columns:1fr;gap:4px}
  .mrc-axis{margin:0}
}