/* 뱅보드 차트 스타일 v2
   글자 크기 단계(PC / 모바일)
   --t-h1 32/24  페이지 제목
   --t-h2 24/20  구역 제목, 순위 목록 제목
   --t-h3 19/17  소제목, 질문
   --t-lead 19/17 첫 문장(답)
   --t-body 16/15 본문, 상품명
   --t-sm 14/13  보조 설명, 은행명, 기준 안내
   --t-xs 13/12  캡션, 순위 변화
   금리: --t-rate 22/20 (선택한 만기), --t-rate2 17/15 (비교 만기)
   폭: 모든 페이지가 머리글과 같은 1200px 폭을 쓴다. */
:root{
 --ink:#222;--sub:#5f5f5f;--muted:#6b6b6b;--line:#e7e7e7;--line2:#eee;--strong:#222;
 --up:#c62828;--down:#1f5fd6;--hl:#fff6cc;
 --t-h1:32px;--t-h2:24px;--t-h3:19px;--t-lead:19px;--t-body:16px;--t-sm:14px;--t-xs:13px;
 --t-rate:22px;--t-rate2:17px;--t-rank:22px;
 --lh-h:1.3;--lh-b:1.65;
 --gut:24px;--rate-col:96px;--logo:50px;--rank-col:40px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);background:#fff;font-size:var(--t-body);line-height:var(--lh-b);word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}img{display:block;max-width:100%}ol,ul{list-style:none}
:focus-visible{outline:3px solid #2f6fe4;outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{width:100%;max-width:calc(1200px + var(--gut) * 2);padding:0 var(--gut);margin:0 auto}
h1,h2,h3{line-height:var(--lh-h);letter-spacing:-.03em;font-weight:800}
.tnum,.rv,.rk{font-variant-numeric:tabular-nums}

/* ---------- 머리글 ---------- */
.top{height:84px;border-bottom:1px solid var(--line);position:relative;z-index:20;background:#fff}
.top .w{height:100%;display:flex;align-items:center;gap:32px}
.logo{height:32px;width:auto}
.search{position:relative;flex:0 1 400px;min-width:200px}
.search input{width:100%;height:48px;border:2px solid var(--strong);border-radius:24px;padding:0 50px 0 22px;font:inherit;font-size:var(--t-body);color:var(--ink);background:#fff;outline:0;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#767676}
.search input::-webkit-search-cancel-button{display:none}
.search .ic{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;color:var(--ink)}
.sres{position:absolute;left:0;right:0;top:54px;background:#fff;border:1px solid #d6d6d6;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:6px 0;max-height:460px;overflow:auto}
.sres a{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:10px 16px}
.sres a:hover,.sres a:focus{background:#f6f6f6}
.sres b{font-size:var(--t-body);font-weight:700;line-height:1.35}
.sres span{grid-column:1;font-size:var(--t-xs);color:var(--muted)}
.sres em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-weight:800;font-size:var(--t-body);font-variant-numeric:tabular-nums;text-align:right}
.sres em small{display:block;font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.sres p{padding:10px 16px;color:var(--muted);font-size:var(--t-sm)}
.sres a.all{display:block;border-top:1px solid var(--line2);margin-top:4px;padding:12px 16px;font-size:var(--t-sm);font-weight:700;text-align:center}
.top .util{margin-left:auto;display:flex;align-items:center}
.fs{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid #cfcfcf;border-radius:20px;font-size:var(--t-sm);font-weight:700;color:var(--ink);background:#fff;white-space:nowrap}
.m{display:none}
.nav{height:60px;border-bottom:1px solid var(--line)}
.nav .w{height:100%;display:flex;align-items:stretch;gap:38px;font-size:var(--t-h3);font-weight:700}
.nav a{display:flex;align-items:center;position:relative}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--strong)}
.nav .fs{display:none}

/* ---------- 페이지 머리 (모든 글 페이지 공통) ---------- */
main h1{font-size:var(--t-h1);padding-top:44px}
.answer{margin-top:16px;max-width:960px;font-size:var(--t-lead);line-height:1.6;font-weight:500;letter-spacing:-.015em}
.also{margin-top:12px;max-width:960px;font-size:var(--t-body);line-height:1.7;color:#444}
.also a,.lnk,.basis a{border-bottom:1px solid #999;white-space:nowrap}
.basis{margin-top:12px;max-width:960px;font-size:var(--t-sm);line-height:1.6;color:var(--muted)}

/* ---------- 순위 목록 (홈, 차트, 지난 기록, 찾기 결과 공통) ---------- */
.board{margin-top:44px;min-width:0}
.bh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:2px solid var(--strong);padding-bottom:12px}
.bh h2{font-size:var(--t-h2)}
.bh h2 small,.bh>small{display:block;font-size:var(--t-sm);font-weight:500;color:var(--muted);margin-top:2px;letter-spacing:0}
.bh>a{font-size:var(--t-sm);font-weight:700;color:var(--sub);display:inline-flex;align-items:center;gap:2px;white-space:nowrap;min-height:40px}
.th3{display:flex;justify-content:flex-end;align-items:center;min-height:40px;border-bottom:1px solid var(--line2)}
.th3 a,.th3 button,.th3 span{width:var(--rate-col);text-align:center;font-size:var(--t-xs);font-weight:700;color:var(--muted);padding:10px 0;background:none}
.th3 .on{color:var(--ink)}
.th3 a.on::after,.th3 button.on::after{content:"▼";font-size:9px;margin-left:3px;vertical-align:1px}
.it{position:relative;display:grid;grid-template-columns:var(--rank-col) minmax(0,1fr) auto;column-gap:14px;align-items:center;min-height:80px;padding:10px 0;border-bottom:1px solid var(--line2)}
.it .rk{font-size:var(--t-rank);font-weight:800;text-align:center;line-height:1.1}
.it .rk .chg{display:block;margin-top:3px}
.lg{width:var(--logo);height:var(--logo);border-radius:50%;border:1px solid #e9e9e9;object-fit:cover}
.lg0{display:grid;place-items:center;background:#f2f2f2;color:var(--muted);font-weight:800;font-size:18px}
.nm{min-width:0}
.nm strong{display:block;font-size:var(--t-body);font-weight:700;letter-spacing:-.02em;line-height:1.35;overflow-wrap:anywhere}
.nm span{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.rts{display:flex;justify-content:flex-end}
.rv{width:var(--rate-col);text-align:center;font-size:var(--t-rate2);font-weight:700;color:#767676;letter-spacing:-.01em}
.rv.sel{font-size:var(--t-rate);font-weight:800;color:var(--ink)}
.rv.nt{font-size:var(--t-xs);line-height:1.35;overflow-wrap:anywhere}
.it.first .rv.sel{color:var(--up)}
.it.hit,.it:target{background:var(--hl);box-shadow:0 0 0 8px var(--hl)}
.it{scroll-margin-top:120px}
.chg{font-size:var(--t-xs);font-weight:700}
.chg.up{color:var(--up)}.chg.down{color:var(--down)}.chg.same{color:#767676}.chg.new{color:var(--up);font-size:11px}
details.more{margin-top:16px}
details.more summary{display:block;height:54px;border:1px solid #cfcfcf;border-radius:6px;font-size:var(--t-body);font-weight:700;text-align:center;line-height:52px;cursor:pointer;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{margin-bottom:8px}
.empty{padding:22px 0;color:var(--muted);font-size:var(--t-sm);border-bottom:1px solid var(--line2)}
/* 찾기 결과: 상품 이름 링크만 줄 전체로 넓힌다 (은행 이름 링크는 넓히지 않음, 2026-10-17 홈 그래프 버튼이 은행 링크로 덮이던 문제) */
.nm strong a::after{content:"";position:absolute;inset:0}

/* ---------- 홈 ---------- */
.hh{text-align:center;font-size:var(--t-h3);font-weight:700;color:var(--sub);letter-spacing:-.01em;padding-top:36px}
.when{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:10px}
.when .d{font-size:36px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.when .d i{font-style:normal;border-bottom:3px solid #ffe680}
.when .d svg{color:var(--muted)}
.when .ar{width:40px;height:40px;border-radius:50%;border:1px solid #d6d6d6;display:grid;place-items:center;color:var(--muted);flex:none}
.when .ar.off{opacity:.35}
.when-note{text-align:center;margin-top:10px;font-size:var(--t-sm);color:var(--muted)}
.mtabs{display:none}
.cols3{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1.34fr) minmax(0,.84fr);column-gap:28px;margin-top:40px}
.cols3 .board{margin-top:0}
.col{--rate-col:62px;--t-rate:19px;--t-rate2:15px;--logo:40px;--rank-col:28px}
.col .it{column-gap:10px;min-height:76px}
.col .bh h2{font-size:var(--t-h2)}
.mini{display:flex;gap:6px}
.mini a,.mini button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid #cfcfcf;border-radius:18px;font-size:var(--t-sm);font-weight:700;color:var(--sub);background:#fff}
.mini .on{background:var(--strong);border-color:var(--strong);color:#fff}
.col .mini{display:none}
.rknote{margin-top:16px;font-size:var(--t-sm);line-height:1.6;color:var(--sub)}
.hsec{margin-top:72px}
.mv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.mv h3{font-size:var(--t-body);font-weight:800;padding:16px 0 6px}
.mv h3.up{color:var(--up)}.mv h3.down{color:var(--down)}
.mi{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:72px;border-bottom:1px solid var(--line2);padding:8px 0}
.mi .lg{width:44px;height:44px}
.mi .v{text-align:right;font-variant-numeric:tabular-nums}
.mi .v b{display:block;font-size:var(--t-h3);font-weight:800}
.mi.none{display:block;min-height:0;padding:14px 0;color:var(--muted);font-size:var(--t-sm)}
.quick{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.quick a{display:block;border-top:2px solid var(--strong);padding:18px 0 4px}
.quick b{display:block;font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em}
.quick span{display:block;margin-top:6px;font-size:var(--t-sm);color:var(--sub);line-height:1.55}

/* ---------- 차트 페이지 ---------- */
.ctabs{display:flex;gap:28px;margin-top:28px;border-bottom:1px solid var(--line);font-size:var(--t-h3);font-weight:700;color:var(--muted);overflow-x:auto;white-space:nowrap}
.ctabs a{padding-bottom:12px;position:relative}
.ctabs a.on{color:var(--ink)}.ctabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--strong)}
.sub h1{padding-top:28px}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.seg{display:flex;border:1px solid #cfcfcf;border-radius:10px;overflow:hidden;width:320px}
.seg a{flex:1;height:44px;display:grid;place-items:center;font-size:var(--t-sm);font-weight:700;color:var(--sub);border-left:1px solid #cfcfcf}
.seg a:first-child{border-left:0}.seg .on{background:var(--strong);color:#fff}
.filters .mini{display:none}
.faqlink{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--t-body);line-height:1.7;color:#444}
.faqlink a{font-weight:700;color:var(--ink);border-bottom:1px solid #999}
.sec{margin-top:56px;border-top:2px solid var(--strong)}
.sec>h2{font-size:var(--t-h2);padding:22px 0 4px}
.how p{max-width:960px;font-size:var(--t-body);line-height:var(--lh-b);color:#333;padding-top:12px}
.cite{margin-top:18px;max-width:960px;font-size:var(--t-sm);line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.cite a{border-bottom:1px solid #aaa}

/* ---------- 지난 기록 ---------- */
.archive{margin-top:28px}
.archive .yr{margin-top:40px}.archive .yr:first-child{margin-top:8px}
.yr details{border-bottom:1px solid var(--line)}
.yr summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-size:var(--t-h3);font-weight:700;cursor:pointer}
.yr summary em{font-style:normal;font-size:var(--t-sm);color:var(--sub);font-weight:500}
.yr ul{padding:0 0 14px;columns:2;column-gap:32px}
.yr li a{display:block;padding:10px 0;font-size:var(--t-body);color:#333;border-bottom:1px solid #f1f1f1;break-inside:avoid}
.yr li a:hover{text-decoration:underline}
.pn{display:flex;justify-content:space-between;gap:14px;margin-top:18px;font-size:var(--t-sm);font-weight:700;color:var(--sub)}
.pn a{border-bottom:1px solid #bbb}

/* ---------- 글 페이지 (소개, 자주 묻는 질문, 음성 안내, 요약, 404, 찾기) ---------- */
.prose h2{font-size:var(--t-h2);margin-top:44px;padding-bottom:10px;border-bottom:2px solid var(--strong)}
.prose ul{margin-top:4px}
.prose li{padding:12px 0 12px 18px;border-bottom:1px solid var(--line2);font-size:var(--t-body);line-height:1.75;color:#333;position:relative;max-width:960px}
.prose li::before{content:"";position:absolute;left:2px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--strong)}
.prose li a,.old a,.contact a{border-bottom:1px solid #999}
.contact{margin-top:28px;font-size:var(--t-body);font-weight:700}
.old{margin-top:12px;max-width:960px;font-size:var(--t-body);line-height:1.7;color:var(--sub)}
.faq article{padding:20px 0;border-bottom:1px solid var(--line);max-width:960px}
.faq h3{font-size:var(--t-h3)}
.faq p{margin-top:8px;font-size:var(--t-body);line-height:1.7;color:#333}
.faqpage .sec:first-of-type{margin-top:40px}
.speak{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;max-width:560px;min-height:80px;margin-top:24px;padding:12px 24px;border-radius:16px;background:var(--strong);color:#fff;font-size:24px;font-weight:800;letter-spacing:-.02em}
.speak svg{flex:none;width:34px;height:34px}
.speak[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 3px var(--strong)}
.vplay{display:flex;align-items:center;gap:28px;margin-top:24px}
.vplay .speak{margin-top:0;flex:0 0 auto;width:440px}
.vstat{font-size:var(--t-body);line-height:1.6;color:var(--sub);font-weight:500}
.vone{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:2px solid var(--strong);border-radius:22px;background:#fff;font-size:var(--t-sm);font-weight:800;color:var(--ink);white-space:nowrap}
.vone[aria-pressed="true"]{background:var(--strong);color:#fff}
.vsec{scroll-margin-top:24px;transition:background .2s}
.vsec.now{background:var(--hl);box-shadow:0 0 0 14px var(--hl)}
.vmore{margin-top:12px;text-align:right;font-size:var(--t-sm);font-weight:700}
.vmore a{border-bottom:1px solid #999}
.vend p{max-width:960px;font-size:var(--t-body);line-height:var(--lh-b);color:#333;padding-top:12px}
.ai h3{font-size:var(--t-h3);margin-top:32px;padding-top:18px;border-top:1px solid var(--line);max-width:960px}
.ai h4{font-size:var(--t-sm);font-weight:700;color:var(--sub);margin-top:12px}
.ai p{font-size:var(--t-body);line-height:1.7;max-width:960px;margin-top:8px;overflow-wrap:anywhere}
.ai ol{max-width:960px;margin-top:6px;counter-reset:n}
.ai ol li{counter-increment:n;font-size:var(--t-sm);line-height:1.6;color:#444;padding:8px 0 8px 26px;border-bottom:1px solid #f0f0f0;position:relative}
.ai ol li::before{content:counter(n)".";position:absolute;left:0;top:8px;color:var(--muted);background:none;width:auto;height:auto;border-radius:0}
.nf{max-width:960px;margin-top:22px}.nf li{border-bottom:1px solid var(--line)}.nf a{display:block;padding:16px 0;font-size:var(--t-h3);font-weight:700}
.sbox{display:flex;gap:10px;max-width:640px;margin-top:22px}
.sbox input{flex:1;min-width:0;height:52px;border:2px solid var(--strong);border-radius:26px;padding:0 22px;font:inherit;font-size:var(--t-body);outline:0;-webkit-appearance:none;appearance:none}
.sbox button{height:52px;padding:0 24px;border-radius:26px;background:var(--strong);color:#fff;font-weight:800;font-size:var(--t-body)}
.srch .board+.board{margin-top:40px}

/* ---------- 바닥글 ---------- */
.foot{margin-top:80px;border-top:1px solid var(--line);padding:34px 0 56px;color:var(--muted);font-size:var(--t-sm);line-height:1.7}
.foot .tag{font-size:var(--t-h3);font-weight:800;color:var(--ink);margin-bottom:10px}
.foot .lk{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--sub)}
.foot a{border-bottom:1px solid #bbb}

/* ---------- 글자 크게 ---------- */
html.large main,html.large .foot .w{zoom:1.18}

/* ---------- 좁은 PC (821~1199px) ---------- */
@media (min-width:821px) and (max-width:1199px){
 .cols3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
 .cols3 .col[data-col="pk"]{grid-column:1/-1}
 .cols3 .col[data-col="pk"]{--rate-col:96px}
 :root{--rate-col:80px}
}

/* ---------- 모바일 ---------- */
@media (max-width:820px){
 :root{--t-h1:24px;--t-h2:20px;--t-h3:17px;--t-lead:17px;--t-body:15px;--t-sm:13px;--t-xs:12px;--t-rate:20px;--t-rate2:15px;--t-rank:19px;--gut:18px;--logo:46px;--rank-col:30px}
 .top{height:58px}.top .w{gap:0;justify-content:space-between}.logo{height:26px}
 .search,.top .util,.nav{display:none}
 .m{display:flex;gap:4px;align-items:center}.m button{width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
 body.so .search{display:block;position:absolute;left:0;right:0;top:58px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex:none}
 body.so .sres{left:16px;right:16px;top:62px}
 body.mo .nav{display:block;height:auto}
 body.mo .nav .w{flex-direction:column;align-items:stretch;gap:0;padding-top:4px;padding-bottom:14px;font-size:var(--t-h3)}
 body.mo .nav a{min-height:48px;border-bottom:1px solid #f0f0f0}
 body.mo .nav a.on::after{display:none}
 .nav .fs{display:inline-flex;align-self:flex-start;margin-top:14px;min-height:44px}
 main h1{padding-top:24px}
 .hh{text-align:left;padding-top:18px}
 .when{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}
 .when .d{min-width:0;justify-content:center;font-size:clamp(20px,6.2vw,26px);gap:8px}
 .when .ar{width:44px;height:44px}
 .when-note{text-align:left}
 .mtabs{display:flex;gap:22px;margin-top:22px;border-bottom:1px solid var(--line);font-size:var(--t-h3);white-space:nowrap;overflow-x:auto}
 .mtabs button{min-height:44px;padding:0 0 10px;position:relative;font-weight:700;color:var(--muted)}
 .mtabs button.on{color:var(--ink)}.mtabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--strong)}
 html:not(.js) .mtabs{display:none}
 .cols3{display:block;margin-top:0}
 .col+.col{margin-top:32px}
 .js .col:not(.on){display:none}
 .js .col+.col{margin-top:0}
 .col{--logo:46px;--rank-col:30px;--t-rate:20px}
 .cols3 .col .bh{padding-top:18px}
 .col .mini,.filters .mini{display:flex;margin-top:12px}
 .filters .mini{margin-top:0}
 .mini a,.mini button{height:44px;min-width:60px}
 .th3{display:none}
 .rv{display:none}
 .rv.sel{display:block;width:auto;min-width:64px;text-align:right}
 .it{column-gap:10px;min-height:74px}
 .bh>a{min-height:44px}
 .hsec{margin-top:48px}
 .mv{display:block}
 .quick{display:block;margin-top:48px}.quick a+a{margin-top:18px}
 .ctabs{gap:20px;margin-top:16px}
 .seg{width:100%}
 .yr ul{columns:1}
 .pn{flex-direction:column}
 .speak{min-height:84px;font-size:22px;max-width:none}
 .vplay{display:block}.vplay .speak{width:100%}.vstat{margin-top:12px}
 .vsec .bh{flex-wrap:wrap;align-items:flex-end}
 .vsec .vone{margin-top:4px}
 .sbox button{padding:0 18px}
 .foot{margin-top:56px}
 html.large main,html.large .foot .w{zoom:1.12}
}

/* 홈 세 칸: 줄마다 높이를 같게 해서 행과 마지막 선을 맞춘다. 상품명은 최대 두 줄 */
.col .it{height:88px;min-height:0;padding:0}
.col .it .nm strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col .it .nm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){.col .it{height:auto;min-height:74px;padding:10px 0}}
/* 한 줄의 큰 금리와 작은 금리를 같은 기준선에 맞춘다 */
.rts{align-items:baseline}

/* 모바일 상단 메뉴: 숨기지 않고 PC처럼 항상 보이게, 좁으면 가로로 넘긴다 (2026-10-17, 접근성). 글자 크게는 헤더 오른쪽에 항상 */
@media (max-width:820px){
 .nav{display:block;height:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
 .nav::-webkit-scrollbar{display:none}
 .nav .w{flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:24px;height:50px;width:max-content;min-width:100%;padding-top:0;padding-bottom:0;font-size:16px;white-space:nowrap}
 .nav a{flex:none;min-height:44px;border-bottom:0}
 .nav a.on::after{display:block;bottom:0;height:3px}
 .nav .fs{display:none}
 .m .fs{display:inline-flex;width:auto;height:40px;min-width:44px;padding:0 12px;font-size:13px;gap:4px;margin-left:4px}
}
@media (max-width:359px){ .m .fsl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
 @media (max-width:820px){ .mtabs{overflow-y:hidden;scrollbar-width:none} .mtabs::-webkit-scrollbar{display:none} }
/* 일별 중위 금리 그래프 (2026-10-17) */
.trend{margin-top:28px;padding-top:18px;border-top:2px solid var(--strong)}
.cols3 + .trend,.mtabs + .trend{margin-top:36px}
.trend-h h2{font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em}
.trend-h small{display:block;font-size:var(--t-sm);font-weight:500;color:var(--muted);margin-top:3px;letter-spacing:0}
.trend-sum{margin-top:8px;font-size:var(--t-body);font-weight:600}
.trend-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.trend-seg{display:inline-flex;border:1px solid #cfcfcf;border-radius:22px;padding:3px;gap:2px}
.trend-seg button{min-height:38px;min-width:56px;padding:0 14px;border-radius:19px;font-size:var(--t-sm);font-weight:700;color:var(--muted);background:none}
.trend-seg button.on{background:var(--strong);color:#fff}
.trend-m{display:flex;align-items:center;gap:8px;font-weight:800;font-size:var(--t-body);white-space:nowrap}
.trend-m button{width:40px;height:40px;border:1px solid #d6d6d6;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:18px}
.trend-m button:disabled{opacity:.3}
.trend-m.off button{visibility:hidden}
.trend-leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:var(--t-sm);font-weight:700;list-style:none;padding:0}
.trend-leg li{display:inline-flex;align-items:center;gap:6px}
.trend-box{position:relative;margin-top:10px;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none;border-radius:6px}
.trend-box:focus-visible{box-shadow:0 0 0 3px #ffd84d}
.trend-box svg{display:block;width:100%;overflow:visible}
.trend .ax{fill:#767676;font-size:12px}
.trend .mk{fill:#8a8a8a;font-size:11px}
.trend-tip{position:absolute;top:0;background:var(--strong);color:#fff;border-radius:8px;padding:7px 10px;font-size:13px;line-height:1.45;white-space:nowrap;pointer-events:none;z-index:2}
.trend-tip .td,.trend-tip .tl{display:block}
.trend-tip b{font-size:15px}
.trend-tip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle;outline:1px solid rgba(255,255,255,.6)}
.trend-note{font-size:var(--t-xs);color:var(--muted);margin-top:6px;line-height:1.5}
@media (max-width:820px){.trend-ctl{gap:10px}.trend-m{flex:1;justify-content:space-between;min-width:0}.trend-seg{flex:none}}
@media (max-width:420px){.trend-ctl{flex-direction:column;align-items:stretch}.trend-seg{align-self:flex-start}}
/* 은행 이름 → 은행 홈페이지 (새 창) */
.nm a.bk{position:relative;z-index:1;color:inherit;text-decoration:underline;text-decoration-color:#c9c9c9;text-underline-offset:3px;padding:4px 0}
.nm a.bk:hover{text-decoration-color:currentColor}
.nm a.bk .ex{display:inline-block;margin-left:3px;vertical-align:1px;color:#9a9a9a}
/* 그래프 색은 글자색(currentColor) 기준: 휴대폰 브라우저 자동 다크모드에서도 글자처럼 함께 밝아지게 (2026-10-17) */
.trend-box,.trend-leg{color:var(--ink)}
.trend .gl{stroke:currentColor;opacity:.12}
.trend .ax{fill:currentColor;opacity:.62}
.trend .mk{fill:currentColor;opacity:.55}
.trend .mkl{stroke:currentColor;opacity:.4;stroke-dasharray:2 3}
.trend .gd{stroke:currentColor;opacity:.7;stroke-dasharray:3 3}
.trend .ln{fill:none;stroke:currentColor;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.trend .lp,.trend .dt{fill:currentColor}
.trend .s0{color:var(--ink)}
.trend .s1{color:#2563eb}
.trend .s2{color:#8a8a8a}
.trend .ln.s2{stroke-dasharray:6 4}
.trend .dt.one{color:var(--up)}
.trend-tip i{background:currentColor;outline:0;width:12px;height:4px}
.trend-tip i.s0{color:#fff}
/* 차트 탭 줄: 선택 밑줄이 1px 아래로 넘쳐 세로 스크롤바가 생기던 문제 (2026-10-17). 가로 넘김은 유지 */
.ctabs{overflow-y:hidden;scrollbar-width:none}
.ctabs::-webkit-scrollbar{display:none}
.ctabs a.on::after{bottom:0}
/* 예금 이자 계산기 페이지 (/deposit-calculator) */
.calc-page .calc{max-width:560px;margin-top:24px;border:1px solid #d9d9d9;border-radius:14px;padding:4px 20px 20px;background:#fff}
.calc-l{display:block;font-size:var(--t-sm);font-weight:700;margin:16px 0 6px}
.calc select,.calc-in{width:100%;min-height:48px;border:1px solid #cfcfcf;border-radius:10px;background:#fff;font-size:var(--t-body);color:var(--ink)}
.calc select{padding:0 10px;font-weight:600}
.calc-in{display:flex;align-items:center;padding:0 12px;gap:6px}
.calc-in:focus-within,.calc select:focus{outline:3px solid #ffd84d;outline-offset:1px}
.calc-in input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--t-lead);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.calc-in span{color:var(--muted);font-weight:600}
.calc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.calc-chips button{min-height:38px;padding:0 12px;border:1px solid #d6d6d6;border-radius:19px;background:#fff;font-size:var(--t-sm);font-weight:700;color:var(--ink)}
.calc-hint{font-size:var(--t-xs);color:var(--muted);margin-top:6px;line-height:1.5}
.calc-hint:empty{display:none}
.calc-f{border:0;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.calc-f legend{font-size:var(--t-sm);font-weight:700;margin-bottom:6px;padding:0;width:100%}
.calc-f label{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:var(--t-body);font-weight:600}
.calc-f input{width:20px;height:20px;accent-color:var(--strong)}
.calc-why{margin-top:8px;font-size:var(--t-sm)}
.calc-why summary{cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:36px;display:flex;align-items:center}
.calc-why p{margin-top:6px;line-height:1.6;color:var(--ink)}
.calc-out{margin-top:18px;border-top:2px solid var(--strong);padding-top:10px}
.calc-dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2)}
.calc-dl dt{font-size:var(--t-sm);color:var(--muted)}
.calc-dl dd{font-weight:700;font-variant-numeric:tabular-nums}
.calc-dl .tx dd{color:var(--muted);font-weight:600}
.calc-dl .big dt{color:var(--ink);font-weight:800;font-size:var(--t-body)}
.calc-dl .big dd{font-size:var(--t-h3);font-weight:800}
.calc-meta,.calc-note,.calc-warn,.calc-empty{font-size:var(--t-xs);color:var(--muted);margin-top:8px;line-height:1.55}
.calc-warn{color:var(--ink);background:#fff6cc;border-radius:8px;padding:8px 10px}
/* 직접 넣는 광고 칸: 위에 "광고" 표시, 채워지지 않으면 숨김 */
.adbox{margin:36px 0 4px;padding:6px 0 8px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);min-height:0}
.adbox[data-shown="1"]{padding:10px 0 14px}
.adl{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
/* 채워지지 않은 광고(unfilled, unfill-optimized 등)는 빈 칸을 남기지 않는다 */
.adbox:has(ins[data-ad-status^="unfill"]){display:none}
/* 계산기 페이지 순위표: PC는 왼쪽 표 + 오른쪽 계산기, 모바일은 계산기 아래 표 */
.calc-page .calc-grid{margin-top:24px}
.calc-page .calc-grid>.calc{margin-top:0;max-width:none}
.calc-board{margin-top:32px}
.cb-row{cursor:pointer}
.cb-pick{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;letter-spacing:inherit}
.cb-pick:focus-visible{outline:3px solid #ffd84d;outline-offset:2px;border-radius:4px}
.calc-board .it.pick{background:var(--hl);box-shadow:0 0 0 8px var(--hl)}
.cb-more{margin-top:14px;width:100%;min-height:48px;border:1px solid #cfcfcf;border-radius:10px;background:#fff;font-size:var(--t-body);font-weight:700;color:var(--ink)}
@media (min-width:1101px){
 .calc-page .calc-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:40px;align-items:start}
 .calc-grid>.calc-board{grid-column:1;grid-row:1;margin-top:0}
 .calc-grid>.calc{grid-column:2;grid-row:1}
 .calc.stick{position:sticky;top:16px}
}
@media (min-width:1101px){
 .calc-page .calc{padding:2px 18px 16px}
 .calc-page .calc-l{margin:10px 0 5px}
 .calc-page .calc select,.calc-page .calc-in{min-height:42px}
 .calc-page .calc-in input{font-size:var(--t-body)}
 .calc-page .calc-chips{margin-top:6px}
 .calc-page .calc-chips button{min-height:32px;padding:0 10px}
 .calc-page .calc-f{margin-top:10px;flex-wrap:nowrap;align-items:center;gap:4px 14px}
 .calc-page .calc-f legend{float:left;width:auto;min-width:92px;margin:0}
 .calc-page .calc-f label{min-height:32px}
 .calc-page .calc-why{margin-top:4px}
 .calc-page .calc-out{margin-top:10px;padding-top:4px}
 .calc-page .calc-dl div{padding:5px 0}
}
/* 계산기 종류·우대금리 버튼 (라디오를 버튼처럼) */
.calc-seg{border:0;margin:16px 0 0;padding:0}
.calc-seg legend{font-size:var(--t-sm);font-weight:700;margin-bottom:6px;padding:0}
.seg-row{display:flex;border:1px solid #cfcfcf;border-radius:10px;overflow:hidden}
.seg-row label{flex:1;position:relative}
.seg-row input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg-row span{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:var(--t-body);font-weight:700;color:var(--muted);cursor:pointer;border-left:1px solid #e3e3e3}
.seg-row label:first-child span{border-left:0}
.seg-row input:checked+span{background:var(--strong);color:#fff}
.seg-row input:focus-visible+span{outline:3px solid #ffd84d;outline-offset:-3px}
.seg-row input:disabled+span{opacity:.35;cursor:not-allowed;text-decoration:line-through}
@media (min-width:1101px){.calc-page .calc-seg{margin-top:10px}.calc-page .seg-row span{min-height:40px}}