/* 보험DB — Podo UI v2 (landing) 토큰 위에 올린 사이트 스타일.
   색·타이포는 전부 --podo-* 를 참조한다. 여기서 색을 새로 정의하지 않는다. */
:root{
  --navy:var(--podo-elevation-basic-reverse);
  --navy-2:var(--podo-elevation-static);
  --navy-3:var(--podo-foreground-basic-reverse);

  --accent:var(--podo-foreground-primary);
  --accent-h:var(--podo-button-background-solid-primary-hover);
  --accent-l:var(--podo-button-background-outline-primary-pressed);
  --trust:var(--podo-foreground-primary);

  --green:var(--podo-foreground-success);
  --amber:var(--podo-foreground-warning);
  --red:var(--podo-text-danger);

  --bg:var(--podo-elevation-basic);
  --card:var(--podo-elevation-nesting);
  --bg-soft:var(--podo-elevation-gray);
  --bg-tint:var(--podo-foreground-primary-light);
  --border:var(--podo-elevation-outline);
  --border-2:var(--podo-border-gray-deep);

  --text:var(--podo-text-basic);
  --sub:var(--podo-text-subtil);
  --muted:var(--podo-icon-subtil);

  --f:var(--podo-typography-body-medium-fontFamily),"Pretendard Variable",Pretendard,system-ui,sans-serif;
  --base:var(--podo-typography-body-medium-fontSize);
  --h1:var(--podo-typography-h1-fontSize);
  --h1-lh:var(--podo-typography-h1-lineHeight);
  --h2:var(--podo-typography-heading-xlarge-fontSize);

  --r:var(--podo-radius-control-md);
  --rb:var(--podo-radius-control-md);
  --max:1200px; --sec-pad:80px; --gap:20px;
  --sh:0 1px 2px rgba(24,24,27,.05),0 8px 24px rgba(24,24,27,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--text);background:var(--bg);word-break:keep-all;overflow-wrap:break-word;
  font-size:var(--base);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.022em}
p{margin:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 유틸바 · GNB */
.util{background:var(--navy-2);color:var(--podo-text-subtil-reverse);font-size:14px}
.util .wrap{display:flex;align-items:center;gap:18px;height:38px}
.util .sp{margin-left:auto;display:flex;gap:18px}
.util a:hover{color:#fff}
.gnb{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.gnb .wrap{display:flex;align-items:center;gap:30px;height:74px}
.logo{font-size:21px;font-weight:700;letter-spacing:-.04em}
.logo span{color:var(--accent)}
.gnb nav{display:flex;gap:26px;font-size:16px;font-weight:500;color:var(--sub)}
.gnb nav a:hover{color:var(--accent)}
.gnb .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.tel{text-align:right;line-height:1.25}
.tel b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.tel small{display:block;font-size:14px;color:var(--muted)}

/* 버튼 — podo button 토큰 사용 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;
  padding:0 24px;border-radius:var(--rb);font-size:16px;font-weight:600;cursor:pointer;
  border:1px solid transparent;font-family:var(--f);
  transition:background .18s,border-color .18s,color .18s}
.btn-p{background:var(--podo-button-background-solid-primary);color:var(--podo-component-button-text)}
.btn-p:hover{background:var(--podo-button-background-solid-primary-hover)}
.btn-p:active{background:var(--podo-button-background-solid-primary-pressed)}
.btn-o{background:var(--podo-button-background-outline-primary);color:var(--text);
  border-color:var(--podo-button-border-assistive)}
.btn-o:hover{background:var(--podo-button-background-outline-primary-hover);border-color:var(--accent)}
.btn-w{background:var(--podo-button-background-solid-white);color:var(--podo-text-static)}
.btn-w:hover{background:var(--podo-button-background-solid-white-hover)}
.btn-gw{background:var(--podo-button-background-outline-white-hover);color:#fff;border-color:rgba(255,255,255,.34)}
.btn-gw:hover{background:var(--podo-button-background-outline-white-pressed)}
.btn-sm{height:42px;padding:0 18px;font-size:15px}
.btn-lg{height:56px;padding:0 30px;font-size:17px}

/* 섹션 */
.sec{padding:var(--sec-pad) 0}
.soft{background:var(--bg-soft)}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.h2{font-size:var(--h2);font-weight:700;line-height:1.32;margin-top:12px}
.lead{margin-top:14px;font-size:17px;color:var(--sub);text-wrap:pretty}
.shead{margin-bottom:36px}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* 히어로 */
.hero{position:relative;color:#fff;padding:76px 0 88px;overflow:hidden;
  background:radial-gradient(1100px 500px at 78% 8%,rgba(66,108,237,.28),transparent 62%),
             var(--podo-elevation-basic-reverse)}
.hero::before{content:"";position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:var(--h1);line-height:var(--h1-lh);font-weight:var(--podo-typography-h1-fontWeight,700)}
.hero h1 em{font-style:normal;color:var(--accent-l)}
.hero .sub{margin-top:20px;font-size:18px;color:var(--podo-text-subtil-reverse);max-width:52ch}
.hero .cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero .badges{margin-top:34px;display:flex;gap:8px;flex-wrap:wrap}
.hb{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;
  color:var(--podo-text-basic-reverse);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:7px 14px}
.hb svg{width:15px;height:15px;color:var(--accent-l);flex:none}

.panel{background:rgba(24,24,27,.66);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:22px;backdrop-filter:blur(6px)}
.panel .ph{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.panel .ph b{font-size:16px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--accent-l);font-weight:600}
.dot{width:7px;height:7px;border-radius:99px;background:var(--green);box-shadow:0 0 0 4px rgba(62,168,86,.24)}
.prow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.prow:last-child{border-bottom:0}
.prow .nm{font-size:15px;font-weight:500}
.prow .rg{font-size:14px;color:var(--podo-text-subtil-reverse)}
.prow .pr{margin-left:auto;text-align:right}
.prow .pr b{font-size:16px;font-weight:700}
.prow .pr small{display:block;font-size:14px;color:var(--green)}
.panel .pf{margin-top:14px;font-size:14px;color:var(--podo-text-subtil-reverse);
  display:flex;justify-content:space-between}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:-44px;
  position:relative;z-index:5;box-shadow:var(--sh)}
.kpi{background:var(--card);padding:22px 18px}
.kpi .v{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.035em}
.kpi .v em{font-style:normal;font-size:16px;font-weight:600;color:var(--muted)}
.kpi .l{font-size:14px;color:var(--muted);margin-top:5px}

/* 원천DB 적법성 — 주장 섹션이라 배경으로 눌러 신뢰 톤을 유지한다 */
.compliance{background:linear-gradient(180deg,var(--bg-tint),var(--bg) 62%)}
.compliance .note{margin-top:26px;padding:16px 18px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--border);
  font-size:15px;color:var(--sub);line-height:1.7}

/* 규제 리스크 섹션 */
/* 한글은 조사가 붙으므로 좌우 패딩을 음수 마진으로 상쇄해 자간이 벌어지지 않게 한다. */
.risk .h2 mark{background:var(--podo-foreground-danger-light);color:var(--podo-text-danger);
  padding:2px 5px;margin:0 -3px;border-radius:4px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
.risk tbody td:last-child{font-weight:600;white-space:nowrap}
.risk tbody tr:first-child td:last-child{color:var(--red)}
.bridge{margin-top:30px;padding:28px;border-radius:var(--r);
  background:var(--bg-tint);border:1px solid var(--podo-border-primary)}
.bridge h3{font-size:21px;font-weight:700}
.bridge p{margin-top:10px;font-size:16px;color:var(--sub);line-height:1.75;text-wrap:pretty}
.disclaimer{margin-top:22px;font-size:14px;color:var(--muted);line-height:1.7}

/* 카드 */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px}
.card h3{font-size:19px;font-weight:600}
.card p{font-size:15px;color:var(--sub);margin-top:8px}
.feat{display:flex;gap:16px;align-items:flex-start}
.ic{flex:none;width:46px;height:46px;border-radius:11px;background:var(--bg-tint);
  display:grid;place-items:center;color:var(--trust)}
.ic svg{width:23px;height:23px}

.chan{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.chan .top{padding:22px 24px;border-bottom:1px solid var(--border)}
.chan .top h3{font-size:20px}
.chan .top .rg{font-size:15px;color:var(--accent);font-weight:600;margin-top:6px}
.chan dl{margin:0;padding:18px 24px 22px}
.chan .r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:15px}
.chan dt{color:var(--muted)}
.chan dd{margin:0;font-weight:500;text-align:right}

/* 상품 카드 */
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:11px;transition:border-color .18s,box-shadow .18s}
.pcard:hover{border-color:var(--border-2);box-shadow:var(--sh)}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:14px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--bg-tint);color:var(--trust)}
.tag.g{background:var(--podo-foreground-success-light);color:var(--green)}
.tag.n{background:var(--podo-foreground-gray-light);color:var(--sub)}
.pt{font-size:18px;font-weight:600}
.pmeta{font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.pfoot{display:flex;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.price{font-size:22px;font-weight:700}
.price em{font-style:normal;font-size:15px;font-weight:500;color:var(--muted)}
.stock{font-size:14px;font-weight:600;color:var(--green)}
.soldout{color:var(--red)}

/* 필터 */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{font-size:15px;font-weight:500;padding:8px 16px;border-radius:999px;
  border:1px solid var(--border-2);background:var(--card);color:var(--sub)}
.chip[aria-current="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 표 */
.tw{overflow-x:auto;border:1px solid var(--podo-table-table-outline);border-radius:var(--r);
  background:var(--podo-table-table-bg)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--podo-table-table-outline);font-size:15px}
th{font-size:14px;font-weight:600;color:var(--muted);background:var(--podo-table-table-th);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--podo-table-table-tr-hover)}
td.r,th.r{text-align:right}

/* 절차 */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;font-size:15px;font-weight:700;color:var(--accent);
  border:1px solid var(--border-2);border-radius:var(--rb);width:38px;height:38px;
  display:grid;place-items:center}
.step h3{font-size:18px;font-weight:600}
.step p{font-size:15px;color:var(--sub);margin-top:7px}

/* 요금 구간 */
.tier{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:12px}
.tier.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--podo-foreground-primary-light)}
.tier h3{font-size:19px}
.tier .q{font-size:15px;color:var(--muted)}
.tier .d{font-size:30px;font-weight:700;letter-spacing:-.03em}
.tier .d small{font-size:16px;font-weight:500;color:var(--muted)}
.tier ul{margin:6px 0 0;padding-left:18px;font-size:15px;color:var(--sub);line-height:1.9}

/* 폼 */
.form{display:grid;gap:14px}
.fld label{display:block;font-size:14px;font-weight:500;color:var(--sub);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;height:48px;padding:0 14px;font-size:16px;
  font-family:var(--f);border:1px solid var(--border-2);border-radius:var(--rb);
  background:var(--podo-component-input-background);color:var(--text)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--podo-text-placeholder)}
.fld textarea{height:96px;padding:12px 14px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);
  outline:2px solid var(--podo-foreground-primary-light);outline-offset:0}
.req{color:var(--red)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--sub);
  line-height:1.6;cursor:pointer}
.consent input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--accent)}
.consent em{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:4px}
.alert{padding:12px 14px;border-radius:var(--rb);font-size:15px;margin-bottom:16px}
.alert.ok{background:var(--podo-foreground-success-light);color:var(--podo-text-success);
  border:1px solid var(--podo-border-success)}
.alert.err{background:var(--podo-foreground-danger-light);color:var(--podo-text-danger);
  border:1px solid var(--podo-border-danger)}

/* FAQ */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:27px;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{padding:0 0 22px;font-size:16px;color:var(--sub);text-wrap:pretty}

/* 최종 CTA · 푸터 */
.final{background:var(--navy);color:#fff;padding:66px 0}
.final .wrap{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.final h2{font-size:32px;font-weight:700;line-height:1.35}
.final p{margin-top:12px;color:var(--podo-text-subtil-reverse);font-size:17px}
.foot{background:var(--navy-2);color:var(--podo-text-subtil-reverse);padding:52px 0 40px;font-size:15px}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot h4{font-size:15px;color:#fff;font-weight:600;margin-bottom:12px}
.foot ul{margin:0;padding:0}
.foot li{list-style:none;line-height:2}
.foot a:hover{color:#fff}
.biz{padding-top:26px;font-size:14px;line-height:1.9;opacity:.75}
.biz b{color:#fff;font-weight:600}

@media (max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .gnb nav,.util .sp{display:none}
  .g3,.g4{grid-template-columns:1fr 1fr}
  :root{--h1:36px;--h1-lh:1.25;--h2:25px;--sec-pad:56px}
}
@media (max-width:560px){
  .g2,.g3,.g4,.steps,.foot .cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr);margin-top:-20px}
  :root{--h1:30px}
  .tel{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* 단가표 상세 링크 · 주석 */
.tnote{margin-top:16px;font-size:14px;color:var(--muted)}