/* ═══════════════════════════════════════════════════
   대출 서비스 · static/loan.css

   style.css 의 토큰과 부품을 그대로 쓴다. 값을 다시 정하지 않는다.
   두 서비스가 한 브랜드로 보여야 한다.

   여기에는 대출에만 있는 것만 둔다. 클래스는 모두 .ln- 으로 시작한다.
   상단바 · 푸터 · 버튼 · 알림 · 3단 설명 · 사이드 카드는
   style.css 의 것을 그대로 쓴다.
   ═══════════════════════════════════════════════════ */

.ln-steps{display:flex;gap:4px;border-bottom:1px solid var(--rl);margin-bottom:28px}
.ln-step{padding:9px 15px;font-size:13px;color:var(--dim);border-bottom:2px solid transparent;
     margin-bottom:-1px;cursor:default}
.ln-step.is-done{color:var(--sof);cursor:pointer}
.ln-step.is-done:hover{color:var(--gd-t)}
.ln-step.is-on{color:var(--gd-t);border-bottom-color:var(--gd);font-weight:600}
.ln-step i{font-family:var(--f-mono);font-style:normal;font-size:11px;margin-right:5px}

.ln-head{min-height:104px}
.ln-eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:1.2px;color:var(--gd-t);
     min-height:18px;text-transform:uppercase}
.ln-q{font-size:30px;font-weight:600;letter-spacing:-.9px;line-height:1.26;margin:6px 0 8px}
.ln-why{font-size:14.5px;color:var(--mid);line-height:1.6;min-height:24px}

.ln-body{display:flex;gap:24px;align-items:flex-start;margin-top:20px}
.ln-picks{width:440px;flex:none}
.ln-mine{width:198px;flex:none;height:324px;overflow:hidden;background:var(--sf);
     border:1px solid var(--rl);border-radius:var(--r2);padding:15px 16px}
.ln-mine h2{font-size:11.5px;font-weight:600;color:var(--sof);letter-spacing:.4px;
     padding-bottom:10px;border-bottom:1px solid var(--rl);margin-bottom:2px}
.ln-mrow{display:flex;gap:10px;padding:7px 0;align-items:flex-start}
.ln-mrow+.ln-mrow{border-top:1px solid var(--rl2)}
.ln-mk{font-size:11.5px;color:var(--sof);width:52px;flex-shrink:0;padding-top:3px;line-height:1.35}
.ln-mv{flex:1;color:var(--ink);line-height:1.45;font-size:13.5px}
.ln-mv.is-key{color:var(--gd-t);font-weight:600}
.ln-mnone{font-size:13.5px;color:var(--sof);padding-top:10px;line-height:1.6}
.ln-mmore{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);margin-top:9px;
     padding-top:9px;border-top:1px solid var(--rl2)}

.ln-opt{display:block;width:100%;text-align:left;background:var(--sf2);border:1px solid var(--rl);
     border-radius:var(--r);padding:13px 16px;margin-bottom:8px;font-size:15.5px;color:var(--ink);
     transition:border-color var(--t),background var(--t),opacity .28s}
.ln-opt:hover{border-color:var(--gd);background:var(--gdl)}
.ln-opt.is-on{border-color:var(--gd);background:var(--gdl);font-weight:600}
.ln-opt.is-off{opacity:.32}
.ln-opt:disabled{cursor:default}
.ln-opt em{display:block;font-style:normal;font-size:13px;color:var(--sof);font-weight:400;margin-top:2px}

.ln-rank{display:flex;align-items:center;gap:14px;background:var(--sf2);border:1px solid var(--rl);
     border-radius:var(--r);padding:12px 16px;margin-bottom:8px}
.ln-rank>span:first-child{flex:1;font-size:15.5px}
.ln-nums{display:flex;gap:6px}
.ln-num{width:32px;height:32px;border-radius:50%;border:1px solid var(--rl);background:var(--sf);
     font-family:var(--f-mono);font-size:13px;color:var(--sof);
     transition:background var(--t),border-color var(--t),color var(--t),opacity var(--t)}
.ln-num:hover{border-color:var(--gd);color:var(--gd-t)}
.ln-num.is-on{background:var(--gd-b);border-color:var(--gd-b);color:#fff;font-weight:700}
.ln-num.is-used{opacity:.28;cursor:default}
.ln-trade{border-left:2px solid var(--gd);background:var(--sf);padding:12px 15px;
     border-radius:0 var(--r) var(--r) 0;font-size:14px;color:var(--mid);margin-top:14px;
     min-height:66px;line-height:1.6}
.ln-trade b{color:var(--gd-t);font-weight:600}

.ln-seek{padding:44px 0 46px}
.ln-seek p{font-family:var(--f-mono);font-size:13px;color:var(--sof);letter-spacing:.4px}
.ln-track{width:300px;height:4px;background:var(--rl2);border-radius:2px;margin-top:16px}
.ln-fill{height:4px;width:0;background:var(--gd);border-radius:2px}

.ln-rule{margin-top:34px;border-top:1px solid var(--rl)}
.ln-orgs{margin-top:18px}
.ln-orgs h2{font-size:13px;font-weight:600;color:var(--sof);margin-bottom:4px}
.ln-orgs h2 b{color:var(--gd-t)}
.ln-orgs .ln-onote{font-size:12.5px;color:var(--dim);margin-bottom:12px}
.ln-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:404px;overflow-y:auto}
.ln-grid::-webkit-scrollbar{width:5px}
.ln-grid::-webkit-scrollbar-thumb{background:var(--rl);border-radius:3px}
.ln-card{height:124px;background:var(--sf);border:1px solid var(--rl);border-radius:var(--r);
     overflow:hidden;position:relative;
     transition:opacity .28s,transform .3s,border-color var(--t),background var(--t)}
.ln-bar{height:10px}
.ln-cbody{padding:9px 11px}
.ln-ckind{font-family:var(--f-mono);font-size:10px;letter-spacing:.4px;color:var(--dim)}
.ln-cname{font-size:13.5px;font-weight:600;letter-spacing:-.3px;line-height:1.35;margin-top:2px;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-ctel{font-family:var(--f-mono);font-size:11px;color:var(--sof);margin-top:3px}
.ln-ccnt{position:absolute;left:11px;bottom:9px;font-size:11.5px;color:var(--sof)}
.ln-ccnt b{font-family:var(--f-mono);font-size:16px;font-weight:600;color:var(--ink);margin-right:2px}
/* 0 건이 된 명함. #FBF2F1 은 style.css 의 .note.err 와 같은 값이다 */
.ln-card.is-zero{border-color:var(--rd);background:#FBF2F1}
.ln-card.is-zero .ln-ccnt,.ln-card.is-zero .ln-ccnt b{color:var(--rd)}
.ln-card.is-out{opacity:0;transform:translateY(14px)}
.ln-card.is-in{animation:lnPop .32s both}
@keyframes lnPop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.ln-panel{background:var(--sf);border:1px solid var(--rl);border-radius:var(--r2);padding:18px 20px}
.ln-panel h2{font-size:15px;font-weight:600;margin-bottom:12px}
.ln-panel p{font-size:14px;color:var(--mid);line-height:1.65}
.ln-fix{display:flex;align-items:center;justify-content:space-between;gap:12px;
     border-top:1px solid var(--rl2);padding:10px 0;font-size:14px;color:var(--mid)}
.ln-fix b{color:var(--ink);font-weight:600}
.ln-fix em{font-family:var(--f-mono);font-style:normal;color:var(--gd-t)}
.ln-mini{font-size:12.5px;font-weight:600;color:var(--ink);background:var(--sf2);
     border:1px solid var(--rl);border-radius:6px;padding:7px 12px;white-space:nowrap;
     transition:border-color var(--t),background var(--t)}
.ln-mini:hover{border-color:var(--gd);background:var(--gdl)}

/* 히어로 아래 기관 미리 보여주기. 이름이 신뢰를 만든다 */
.ln-trust{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.ln-chip{background:var(--sf2);border:1px solid var(--rl);border-radius:20px;padding:7px 14px;
     font-size:13px;color:var(--mid)}
.ln-chip b{color:var(--gd-t);font-weight:600}

.ln-preview-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);
     font-size:10px;letter-spacing:1px;color:#fff;background:var(--rd);border-radius:3px;
     padding:3px 7px;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* style.css 에는 비활성 버튼 규칙이 없다. 대출 화면 안에서만 둔다.
   순서를 다 정하기 전에는 누를 수 없어야 하고, 그것이 보여야 한다. */
.ln-picks .btn-go:disabled{background:#B6B7BE;cursor:not-allowed}

/* ═══════════════════════════════════════════════════
   대출 현황 · /loan/stats
   ═══════════════════════════════════════════════════ */

/* ── 도넛 ──
   조각 길이와 시작 위치는 loan/stats.py 가 계산한다.
   여기서는 두께와 움직임만 정한다. */
.ln-pie-row{display:flex;align-items:center;gap:30px;padding-top:20px}
.ln-pie{flex:none}
.ln-seg{fill:none;stroke-width:20;stroke-dasharray:var(--len) 999;
     transition:stroke-dasharray .85s cubic-bezier(.22,.85,.2,1),
                stroke-width .16s ease,opacity .16s ease}
.ln-pie.is-wait .ln-seg{stroke-dasharray:0 999}
.ln-seg.is-blank{opacity:.9}
.ln-seg.is-hi{stroke-width:26}
.ln-seg.is-dim{opacity:.22}
.ln-mid{text-anchor:middle;pointer-events:none}
.ln-mid .big{font-family:var(--f-mono);font-size:25px;font-weight:700;fill:var(--ink)}
.ln-mid .big.is-key{fill:var(--gd)}
.ln-mid .cap{font-size:9px;fill:var(--sof);letter-spacing:.6px}
.ln-mid .pct{font-family:var(--f-mono);font-size:9px;fill:var(--dim);letter-spacing:.4px}
.ln-brk{fill:none;stroke:var(--gd);stroke-width:1.2}
.ln-brk-t{font-size:8.5px;fill:var(--gd-t);font-weight:600;letter-spacing:.2px;
     text-anchor:middle}

/* ── 도넛 범례 ── */
.ln-legend{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-content:center}
.ln-legend .lg{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
     font-size:13px;padding:6px 0;border-bottom:1px solid var(--rl2);
     transition:background var(--t)}
.ln-legend .lg:hover{background:var(--sf2)}
.ln-legend .lg i{width:10px;height:10px;border-radius:2px;flex:none}
/* 미공개는 색이 아니라 질감으로 구분한다.
   모르는 것을 아는 것처럼 칠하면 안 된다. */
.ln-legend .lg i.is-blank{background-image:repeating-linear-gradient(45deg,
     rgba(255,255,255,.85) 0 2px,transparent 2px 4px)}
.ln-legend .lg span{flex:1;color:var(--mid)}
.ln-legend .lg b{font-family:var(--f-mono);font-size:12.5px;font-weight:600}
.ln-legend .lg em{font-style:normal;font-family:var(--f-mono);font-size:11px;
     color:var(--dim);width:32px;text-align:right}
.ln-legend .lg.is-hi span,.ln-legend .lg.is-hi b{color:var(--gd-t)}
.ln-hint{font-size:11.5px;color:var(--dim);margin-top:12px;font-family:var(--f-mono);
     letter-spacing:.3px}

/* ── 기관 가로 막대 ──
   도넛으로 하지 않는다. 순위를 읽는 값이고 기관 수가 계속 바뀐다.
   조각이 늘면 도넛은 못 읽지만 줄은 늘어나면 그만이다. */
.ln-orgbar{margin-top:18px}
.ob{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px}
.ob+.ob{border-top:1px solid var(--rl2)}
.ob-r{font-family:var(--f-mono);font-size:11px;color:var(--dim);width:18px;
     text-align:right;flex:none}
.ob-n{width:132px;flex:none;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;
     text-overflow:ellipsis}
.ob-k{width:60px;flex:none;font-size:11.5px;color:var(--sof)}
.ob-z{flex:1;height:9px;background:var(--rl2);border-radius:2px;overflow:hidden}
.ob-z i{display:block;height:9px;border-radius:2px;background:#C3AE72}
.ob b{font-family:var(--f-mono);font-size:13px;font-weight:600;width:26px;
     text-align:right;flex:none}
.ob.t1 .ob-z i{background:var(--gd)}
.ob.t1 b{color:var(--gd-t)}
.ob.t3 .ob-z i{background:#E0D6B4}
.ob.t3 .ob-n,.ob.t3 b{color:var(--sof)}
.ob:hover .ob-n{color:var(--gd-t)}

/* ── 모르는 것 ── */
.ln-miss{display:flex;flex-wrap:wrap;gap:7px;padding-top:14px}
.ln-miss span{background:var(--sf2);border:1px solid var(--rl);border-radius:20px;
     padding:7px 14px;font-size:13px;color:var(--mid)}
.ln-miss b{color:var(--rd);font-weight:600}
.mono-sm{font-family:var(--f-mono);font-size:12.5px}

@media (prefers-reduced-motion:reduce){
  .ln-seg{transition:none}
  .ln-pie.is-wait .ln-seg{stroke-dasharray:var(--len) 999}
}

/* ── 사이드 광고 ──
   style.css 의 .promo-box 는 min-height 620px 이다.
   지원금 사이드의 큰 단위에 맞춘 값이라 250×250 을 넣으면
   아래로 370px 이 빈다. 대출에서는 상자를 내용에 맞춘다.

   사이드 칸은 268px 이고 광고는 250px 이다. 가운데로 놓아
   양쪽에 9px 씩 남게 한다. 왼쪽에 붙이면 위 카드와 오른쪽 끝이 어긋나 보인다.
   소재가 단위 규격보다 작게 들어오는 경우가 있어 그때도 가운데에 놓인다. */
.promo-box.is-sq{min-height:0;margin-bottom:12px;text-align:center}
.promo-box.is-sq .promo-lab{display:block;text-align:left}
.promo-box.is-sq .kakao_ad_area{margin:0 auto}

/* ═══════════════════════════════════════════════════
   결과 화면 · /loan 에서 문답이 끝나면 이 자리를 차지한다
   ═══════════════════════════════════════════════════ */

/* ── 골드박스 ──
   답한 조건과 맞는 것이 확인된 상품 하나만 올린다.
   판정되지 않은 상품을 여기 올리면 근거 없이 권한 셈이 된다. */
.ln-lead{border:2px solid var(--gd);border-radius:var(--r2);background:var(--sf2);
     overflow:hidden;margin-top:18px}
.ln-lead-top{background:var(--gdl);padding:10px 20px;display:flex;align-items:center;
     justify-content:space-between;gap:14px;border-bottom:1px solid var(--gd)}
.ln-lead-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;color:var(--gd-t);
     font-weight:700;text-transform:uppercase}
.ln-fit{font-family:var(--f-mono);font-size:12px;color:var(--gd-t);font-weight:600}
.ln-lead-body{padding:20px}
.ln-lead h2{font-size:26px;font-weight:600;letter-spacing:-.8px;line-height:1.28;
     margin-bottom:6px}
.ln-lead .who{font-size:13.5px;color:var(--sof);margin-bottom:18px}
.ln-lead .who b{color:var(--gd-t);font-weight:600}
.ln-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rl);
     border:1px solid var(--rl);border-radius:var(--r);overflow:hidden}
.ln-three>div{background:var(--sf);padding:12px 14px}
.ln-three .k{font-size:11.5px;color:var(--sof);margin-bottom:5px}
.ln-three .v{font-family:var(--f-mono);font-size:19px;font-weight:600;color:var(--ink);
     letter-spacing:-.3px}
.ln-three .r{font-size:11.5px;color:var(--dim);margin-top:3px}

/* ── 갚아야 하는 돈 ──
   빌릴 수 있는 금액만 크게 보여주면 사람들은 그것만 본다.
   대출은 갚아야 하는 돈이라는 사실이 같은 크기로 보여야 한다. */
.ln-pay{margin-top:18px;border:1px solid var(--rl);border-radius:var(--r);
     background:var(--sf);overflow:hidden}
.ln-pay-h{padding:11px 16px;border-bottom:1px solid var(--rl);font-size:13.5px;
     font-weight:600;color:var(--ink);background:var(--sf2)}
.ln-pay-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rl2)}
.ln-pay-rows>div{background:var(--sf);padding:13px 16px}
.ln-pay .k{font-size:11.5px;color:var(--sof);margin-bottom:5px}
.ln-pay .v{font-family:var(--f-mono);font-size:18px;font-weight:600;letter-spacing:-.3px}
.ln-pay .v.is-cost{color:var(--rd)}
.ln-pay-note{padding:11px 16px;font-size:12px;color:var(--sof);line-height:1.6;
     border-top:1px solid var(--rl2)}

/* ── 조건 대조 ── */
.ln-crit{margin-top:18px}
.ln-crit-row{display:flex;gap:12px;padding:9px 0;font-size:14.5px;align-items:baseline}
.ln-crit-row+.ln-crit-row{border-top:1px solid var(--rl2)}
.ln-mark{flex-shrink:0;width:18px;font-family:var(--f-mono);font-size:13px}
.ln-crit-row.ok .ln-mark{color:var(--gd)}
.ln-crit-row.maybe .ln-mark{color:var(--mid)}
.ln-crit-row.no .ln-mark{color:var(--rd)}
.ln-crit-k{width:78px;flex-shrink:0;font-size:13px;color:var(--sof)}
.ln-crit-v{flex:1;color:var(--ink);line-height:1.5}
.ln-crit-v em{font-style:normal;display:block;font-size:12.5px;color:var(--sof);
     margin-top:2px}

/* ── 부합도 근거 ──
   왜 이 상품이 위에 왔는지 보여 준다.
   우리가 고른 것이 아니라 손님이 정한 순서의 결과다. */
.ln-why{margin-top:18px;background:var(--sf);border:1px solid var(--rl);
     border-radius:var(--r);padding:14px 16px}
.ln-why-h{font-size:12.5px;color:var(--sof);margin-bottom:10px}
.ln-why-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13.5px}
.ln-why-row+.ln-why-row{border-top:1px solid var(--rl2)}
.ln-why-n{width:18px;height:18px;border-radius:50%;background:var(--gd-b);color:#fff;
     font-family:var(--f-mono);font-size:10px;font-weight:700;display:flex;
     align-items:center;justify-content:center;flex:none}
.ln-why-row:nth-child(3) .ln-why-n{background:#B6A56E}
.ln-why-row:nth-child(4) .ln-why-n{background:#CFC6A8}
.ln-why-k{width:38px;flex:none;color:var(--mid)}
.ln-why-v{flex:1;color:var(--ink)}
.ln-why-w{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);flex:none}
.ln-why-bar{width:64px;height:5px;background:var(--rl2);border-radius:3px;flex:none;
     overflow:hidden}
.ln-why-bar i{display:block;height:5px;background:var(--gd);border-radius:3px}

/* ── 신청 ── */
.ln-apply{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ln-apply-note{font-size:12.5px;color:var(--sof);line-height:1.6;margin-top:10px}
.ln-tel{font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--ink)}

/* ── 목록 ── */
.ln-list{margin:0 -18px}
.ln-item{display:block;padding:13px 18px;border-radius:10px;transition:background var(--t)}
.ln-item+.ln-item{box-shadow:inset 0 1px 0 var(--rl2)}
.ln-item:hover{background:var(--sf)}
.ln-item:hover+.ln-item{box-shadow:none}
.ln-item-h{display:flex;align-items:center;gap:12px}
.ln-item-n{flex:1;font-size:16px;font-weight:600;letter-spacing:-.35px;line-height:1.38}
.ln-item-f{flex-shrink:0;font-family:var(--f-mono);font-size:12.5px;font-weight:600;
     color:var(--gd-t);background:var(--gdl);border-radius:12px;padding:3px 11px}
.ln-item-m{font-size:13px;color:var(--mid);margin-top:5px}
.ln-item-m b{font-family:var(--f-mono);font-weight:600;color:var(--ink)}
.ln-item-s{font-size:12.5px;color:var(--sof);margin-top:4px}
.ln-flag{flex-shrink:0;font-size:12px;font-weight:600;padding:3px 11px;border-radius:12px;
     white-space:nowrap;color:var(--sof);background:#E8E9EC}
.ln-raw{font-size:12.5px;color:var(--sof);margin-top:5px;line-height:1.5}

/* ── 나머지 받기 ──
   이메일이 기본 흐름이고 화면 보기는 열어 둔다.
   막으면 이메일을 남기기 싫은 사람이 그냥 나간다. */
.ln-rest{margin-top:20px;background:var(--sf);border:1px solid var(--rl);
     border-radius:var(--r2);padding:20px}
.ln-rest h3{font-size:17px;font-weight:600;letter-spacing:-.3px;margin-bottom:6px}
.ln-rest p{font-size:14px;color:var(--mid);line-height:1.65;margin-bottom:16px}
.ln-mail{display:flex;gap:8px;align-items:flex-start}
.ln-mail input{flex:1;background:var(--sf2);border:1px solid var(--rl);
     border-radius:var(--r);padding:12px 14px;font-family:inherit;font-size:15px;
     color:var(--ink);transition:border-color var(--t)}
.ln-mail input:focus{outline:none;border-color:var(--gd)}
.ln-consents{margin-top:12px}
.ln-consents .consent{display:flex;gap:10px;align-items:flex-start;padding:11px 0;
     font-size:14px}
.ln-consents .consent+.consent{border-top:1px solid var(--rl2)}
.ln-consents .consent input{width:17px;height:17px;margin:4px 0 0;flex-shrink:0;
     accent-color:var(--gd)}
.ln-consents .consent-note{display:block;font-size:12.5px;color:var(--sof);
     line-height:1.6;margin-top:3px}
.ln-consents .req{color:var(--rd);font-size:12px;font-weight:600}
.ln-opt{color:var(--sof);font-size:12px}
.ln-or{text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--rl2)}
.ln-more-link{font-size:13px;color:var(--sof);text-decoration:underline;
     text-underline-offset:3px;background:none}
.ln-more-link:hover{color:var(--ink)}
.ln-more-link:disabled{color:var(--dim);text-decoration:none;cursor:default}
.ln-sent{background:var(--gdl);border:1px solid var(--gd);border-radius:var(--r);
     padding:14px 16px;font-size:14px;color:var(--gd-t);line-height:1.6}
.ln-sent.is-bad{background:#FBF2F1;border-color:var(--rd);color:var(--rd);
     margin-bottom:14px}