/* ═══════════════════════════════════════════════════
   시민보험 · /insurance

   app.css 의 토큰을 그대로 쓴다. 색을 새로 만들지 않는다.
   다만 골드를 아껴 쓴다.

   이 서비스는 다친 사람이 보는 화면이다. 강조가 여러 개면
   어디를 봐야 할지 모른다. 골드는 `이미 가입되어 있습니다` 와
   `내 보험료 0원` 두 곳에만 쓴다.
   ═══════════════════════════════════════════════════ */

.si-title{font-size:34px;font-weight:600;line-height:1.26;letter-spacing:-1px;
     margin-bottom:4px}

/* ── 이미 가입되어 있습니다 ──
   지원금은 신청해서 받는 것이고 이 보험은 이미 가입된 것이다.
   그 사실을 모르는 것이 이 서비스가 막으려는 유일한 문제다.
   그래서 이 상자가 화면의 중심에 온다. */
.si-hero{border:2px solid var(--gd);border-radius:var(--r2);background:var(--sf2);
     overflow:hidden;margin-top:18px}
.si-hero-top{background:var(--gdl);padding:14px 22px;border-bottom:1px solid var(--gd)}
.si-hero-top b{font-size:19px;font-weight:600;letter-spacing:-.4px;color:var(--gd-t)}
.si-hero-top span{display:block;font-size:13px;color:var(--gd-t);margin-top:2px;opacity:.85}
.si-hero-body{padding:20px 22px}
.si-money{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rl);
     border:1px solid var(--rl);border-radius:var(--r);overflow:hidden}
.si-money>div{background:var(--sf);padding:14px 16px}
.si-money .k{font-size:11.5px;color:var(--sof);margin-bottom:5px}
.si-money .v{font-family:var(--f-mono);font-size:22px;font-weight:600;letter-spacing:-.4px}
.si-money .v.zero{color:var(--gd)}
.si-money .r{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.si-steps{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.si-step{flex:1 1 150px;background:var(--sf);border:1px solid var(--rl2);
     border-radius:var(--r);padding:11px 13px}
.si-step b{display:block;font-family:var(--f-mono);font-size:10px;color:var(--gd-t);
     margin-bottom:5px;letter-spacing:.5px}
.si-step span{font-size:13.5px;color:var(--ink);line-height:1.45}

/* ── 보장 항목 ──
   조건 원문을 요약하지 않는다. 그것으로 판단이 갈린다.
   `개에 물려 치료를 받은 경우` 를 줄이면 무엇이 되는지 알 수 없다. */
.si-tier{margin-top:20px}
.si-tier-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
     padding-bottom:8px;border-bottom:1px solid var(--rl)}
.si-tier-h h3{font-size:15px;font-weight:600;letter-spacing:-.2px}
.si-tier-h em{font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--sof);
     white-space:nowrap}
.si-cov{display:flex;gap:12px;padding:11px 0;align-items:baseline}
.si-cov+.si-cov{border-top:1px solid var(--rl2)}
.si-code{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);width:30px;flex:none;
     padding-top:3px}
.si-cov-b{flex:1;min-width:0}
.si-cov-n{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.4}
.si-cov-c{font-size:12.5px;color:var(--sof);line-height:1.5;margin-top:2px}
.si-amt{font-family:var(--f-mono);font-size:15px;font-weight:600;white-space:nowrap;
     flex:none;text-align:right;width:92px}
.si-amt em{font-style:normal;font-size:10.5px;color:var(--dim);display:block;
     font-weight:400;font-family:var(--f-sans);letter-spacing:-.2px}

/* ── 전국 비교 ──
   주민에게는 판단 근거를 주고, 지자체 담당자에게는
   이 페이지를 신경 쓸 이유를 준다. 담당자가 자기 홈페이지에서
   이 페이지를 링크하면 그게 백링크가 된다. */
.si-rank{display:flex;gap:1px;background:var(--rl);border:1px solid var(--rl);
     border-radius:var(--r);overflow:hidden;margin-top:14px}
.si-rank>div{flex:1;background:var(--sf);padding:12px 14px;text-align:center}
.si-rank .k{font-size:11.5px;color:var(--sof);margin-bottom:4px}
.si-rank .v{font-family:var(--f-mono);font-size:18px;font-weight:600}
.si-rank .v.is-key{color:var(--gd)}

/* ── 구조적 한계 ──
   불안 장사를 하지 않는다. 사실과 금액만 놓고 판단은 사용자에게 넘긴다.
   이 서비스의 자산은 정확성이고, 한 번 겁주는 곳으로 보이면 회복되지 않는다. */
.si-limit{background:var(--sf);border:1px solid var(--rl);border-radius:var(--r2);
     padding:18px 20px;margin-top:16px}
.si-limit h3{font-size:16px;font-weight:600;letter-spacing:-.3px;margin-bottom:4px}
.si-limit p.head{font-size:13.5px;color:var(--mid);line-height:1.65;margin-bottom:14px}
.si-lim{padding:10px 0;border-top:1px solid var(--rl2)}
.si-lim b{font-size:14px;font-weight:600;display:block}
.si-lim span{font-size:13px;color:var(--sof);line-height:1.55;display:block;margin-top:2px}

/* ── 지역 찾기 ── */
.si-find{background:var(--sf);border:1px solid var(--rl);border-radius:var(--r2);
     padding:20px;margin-top:20px}
.si-find-row{display:flex;gap:8px}
.si-find-row 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)}
.si-find-row input:focus{outline:none;border-color:var(--gd)}
.si-hits{margin-top:10px;background:var(--sf2);border:1px solid var(--rl);
     border-radius:var(--r);overflow:hidden}
.si-hit-row{display:flex;align-items:baseline;gap:10px;padding:11px 14px;
     transition:background var(--t)}
.si-hit-row+.si-hit-row{border-top:1px solid var(--rl2)}
.si-hit-row:hover{background:var(--sf)}
.si-hit-nm{font-size:15px;font-weight:600}
.si-hit-sd{font-size:12.5px;color:var(--sof)}
/* 분당구는 자치단체가 아니라 API 에 없다. 성남시로 보낸다.
   없다고 하면 분당구민은 자기 보험이 없는 줄 안다 */
.si-hit-al{font-size:12px;color:var(--gd-t);margin-left:auto}
.si-hit-none{padding:12px 14px;font-size:13.5px;color:var(--sof)}
.si-sido{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.si-sido a{background:var(--sf2);border:1px solid var(--rl);border-radius:var(--r);
     padding:11px 8px;text-align:center;font-size:14px;
     transition:border-color var(--t),background var(--t)}
.si-sido a:hover{border-color:var(--gd);background:var(--gdl)}
.si-sido a b{display:block;font-family:var(--f-mono);font-size:11px;color:var(--sof);
     font-weight:400;margin-top:2px}
.si-hurt{margin-top:16px;padding-top:14px;border-top:1px solid var(--rl2);
     display:flex;align-items:center;justify-content:space-between;gap:14px}
.si-hurt p{font-size:13.5px;color:var(--mid)}

/* ── 하위 지자체 목록 ── */
.si-kids{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.si-kids a{background:var(--sf);border:1px solid var(--rl);border-radius:var(--r);
     padding:11px 13px;display:flex;align-items:baseline;justify-content:space-between;
     gap:8px;transition:border-color var(--t),background var(--t)}
.si-kids a:hover{border-color:var(--gd);background:var(--gdl)}
.si-kids .nm{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.si-kids .n{font-family:var(--f-mono);font-size:12px;color:var(--sof)}
/* 계약이 등록되지 않은 지자체. 감추지 않는다.
   목록에서 빼면 그 지역 주민이 자기 동네를 못 찾는다 */
.si-kids a.is-zero{opacity:.6}
.si-kids a.is-zero .nm{font-weight:500;color:var(--sof)}

/* ── 모르는 것 ──
   미가입과 미수집을 뭉치지 않는다. 뭉치면 실제로는 보험이 있는데
   수집이 실패한 지자체 주민이 자기가 못 받는 줄 알고 포기한다. */
.si-none{background:var(--sf);border-left:2px solid var(--sof);padding:13px 15px;
     border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:var(--mid);
     line-height:1.65;margin-top:16px}
.si-none b{color:var(--ink);font-weight:600}

/* ── 확인하러 가기 ── */
.si-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;
     background:var(--sf);border:1px solid var(--rl);border-radius:var(--r2);
     padding:16px 18px;margin-top:22px}
.si-cta p{font-size:14px;color:var(--mid);line-height:1.6}
.si-src{font-size:12px;color:var(--dim);line-height:1.7;margin-top:18px;
     padding-top:14px;border-top:1px solid var(--rl2)}

/* ── 세 단계 안내 ──
   app.css 에 같은 이름이 있는지 확신할 수 없어 전용 이름을 쓴다.
   공용 클래스를 짐작해 쓰면 다른 화면이 바뀔 때 같이 깨진다. */
.si-how{list-style:none;margin-top:30px;display:grid;
     grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rl);
     border:1px solid var(--rl);border-radius:var(--r2);overflow:hidden}
.si-how li{background:var(--sf);padding:16px 18px}
.si-how b{display:block;font-family:var(--f-mono);font-size:10px;color:var(--gd-t);
     letter-spacing:.5px;margin-bottom:6px}
.si-how span{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px}
.si-how i{display:block;font-style:normal;font-size:13px;color:var(--sof);
     line-height:1.55;margin-top:4px}

/* ── 판정 ──
   다친 사람이 급하게 보는 화면이다. 골드는 버튼 하나에만 쓴다.
   강조가 여러 개면 어디를 봐야 할지 모른다. */
.si-ask-where{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.si-ask-where select,.si-ask-where input{flex:1 1 150px;background:var(--sf2);
     border:1px solid var(--rl);border-radius:var(--r);padding:11px 13px;
     font-family:inherit;font-size:14.5px;color:var(--ink)}
.si-ask-where select:focus,.si-ask-where input:focus{outline:none;border-color:var(--gd)}
.si-ask textarea{width:100%;min-height:104px;resize:vertical;background:var(--sf2);
     border:1px solid var(--rl);border-radius:var(--r);padding:12px 14px;
     font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink)}
.si-ask textarea:focus{outline:none;border-color:var(--gd)}
.si-ask-row{display:flex;align-items:center;gap:12px;margin-top:10px}
.si-count{font-family:var(--f-mono);font-size:11.5px;color:var(--dim)}
.si-priv{font-size:12.5px;color:var(--sof);line-height:1.6;margin-top:10px}
.si-priv b{color:var(--ink);font-weight:600}

.si-verdict{border:1px solid var(--rl);border-radius:var(--r2);background:var(--sf2);
     overflow:hidden;margin-top:18px}
.si-v-h{padding:12px 18px;border-bottom:1px solid var(--rl);background:var(--sf);
     font-size:13.5px;font-weight:600}
.si-hit{padding:15px 18px}
.si-hit+.si-hit{border-top:1px solid var(--rl2)}
.si-hit-h{display:flex;align-items:center;gap:10px}
.si-badge{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:.5px;
     padding:3px 8px;border-radius:11px;white-space:nowrap;flex:none}
.si-badge.likely{background:var(--gdl);color:var(--gd-t)}
/* 확실하지 않은 것을 붉게 하지 않는다. 확인이 필요하다는 뜻일 뿐
   못 받는다는 뜻이 아니다 */
.si-badge.cond{background:#E8E9EC;color:var(--sof)}
.si-hit-n{flex:1;font-size:16px;font-weight:600;letter-spacing:-.2px;line-height:1.4}
.si-hit-a{font-family:var(--f-mono);font-size:15px;font-weight:600;white-space:nowrap}
.si-hit-r{font-size:13.5px;color:var(--mid);margin-top:6px;line-height:1.55}
.si-hit-t{font-size:12.5px;color:var(--sof);margin-top:4px;line-height:1.5}
.si-hit-c{font-size:12.5px;color:var(--sof);margin-top:5px;line-height:1.5;
     padding-left:11px;border-left:2px solid var(--rl2)}

.si-total{display:flex;gap:1px;background:var(--rl);border:1px solid var(--rl);
     border-radius:var(--r);overflow:hidden;margin-top:14px}
.si-total>div{flex:1;background:var(--sf);padding:13px 16px}
.si-total .k{font-size:11.5px;color:var(--sof);margin-bottom:4px}
.si-total .v{font-family:var(--f-mono);font-size:19px;font-weight:600}
.si-total .r{font-size:11.5px;color:var(--dim);margin-top:3px}

.si-follow{background:var(--sf);border-left:2px solid var(--gd);padding:13px 15px;
     border-radius:0 var(--r) var(--r) 0;margin-top:14px}
.si-follow b{font-size:13.5px;display:block;margin-bottom:5px}
.si-follow span{display:block;font-size:13px;color:var(--mid);line-height:1.55;
     padding:3px 0}

/* ── 서류 ──
   주민등록초본이 반려 사유 1위다. 그것만 붉게 한다. */
.si-docs{margin-top:14px}
.si-doc{display:flex;gap:11px;padding:9px 0;align-items:baseline}
.si-doc+.si-doc{border-top:1px solid var(--rl2)}
.si-doc-m{width:16px;flex:none;font-family:var(--f-mono);font-size:12px;color:var(--dim)}
.si-doc.crit .si-doc-m{color:var(--rd);font-weight:700}
.si-doc-b{flex:1}
.si-doc-n{font-size:14.5px;font-weight:600;letter-spacing:-.2px}
.si-doc.crit .si-doc-n{color:var(--rd)}
.si-doc-w{font-size:12.5px;color:var(--sof);margin-top:1px;line-height:1.5}
.si-tips{margin-top:14px;background:var(--sf);border:1px solid var(--rl);
     border-radius:var(--r);padding:13px 15px}
.si-tips p{font-size:12.5px;color:var(--mid);line-height:1.6}
.si-tips p+p{margin-top:6px;padding-top:6px;border-top:1px solid var(--rl2)}

/* ── 면책 고지 ──
   모든 결과 아래에 붙인다. 약관과 면책 전문이 공개 데이터에 없다. */
.si-disc{background:#FBF2F1;border:1px solid var(--rd);border-radius:var(--r);
     padding:13px 15px;margin-top:18px;font-size:13px;color:var(--rd);line-height:1.6}
.si-disc b{font-weight:600}

/* ── 물음에 대한 답 ──
   사용자가 `수리비는 받을 수 없나` 라고 물으면 그 답이 맨 위에 와야 한다.
   모델이 답을 했는데 되묻기 목록에 섞여 있으면 읽지 않고 지나간다.
   답이 없는 것과 같아진다. */
.si-answer{background:var(--sf2);border:1px solid var(--gd);border-radius:var(--r2);
     padding:15px 18px;margin-top:18px}
.si-answer b{display:block;font-family:var(--f-mono);font-size:10px;color:var(--gd-t);
     letter-spacing:.5px;margin-bottom:6px}
.si-answer p{font-size:15px;color:var(--ink);line-height:1.65}

/* ── 사이드 광고 ──
   style.css 의 .promo-box 는 min-height 620px 이다.
   지원금 사이드의 큰 단위에 맞춘 값이라 250×250 을 넣으면 아래가 빈다.
   loan.css 와 같은 규칙을 둔다. 두 파일이 서로를 불러오지 않으므로
   각자 갖고 있어야 한다. */
.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}

/* ── 다음에 할 일 띠 ──
   홈·시도·우리 동네 세 곳에 같은 모양으로 둔다.
   어디서 보든 같은 자리에 있으면 찾지 않아도 눈에 들어온다. */
.si-hurt-band{background:var(--sf);border:1px solid var(--rl);border-radius:var(--r2);
     padding:16px 18px;margin-top:22px;border-top:1px solid var(--rl)}
.si-hurt-band p{font-size:14px;color:var(--mid);line-height:1.6}

/* 판정 화면 광고. 결과 아래에 놓아 가운데로 맞춘다 */
.promo-box.is-sq.is-mid{margin-top:26px;padding-top:18px;
     border-top:1px solid var(--rl2)}