/* facter.kr — 신뢰감 우선, 장식 최소 */
:root{
  --ink:#15181c; --ink-2:#3d434b; --ink-3:#6b7280;
  --line:#e4e7ea; --line-2:#f0f2f4;
  --bg:#ffffff; --bg-2:#f7f8f9;
  --navy:#1b3a5c; --navy-2:#2a5580; --navy-ink:#0f2238;
  --accent:#0a6b5d;
  --radius:12px;
  --maxw:1080px;
  --shadow:0 1px 2px rgba(21,24,28,.05), 0 8px 24px rgba(21,24,28,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Malgun Gothic',sans-serif;
  font-size:16px; line-height:1.7; -webkit-text-size-adjust:100%;
  word-break:keep-all;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ── 헤더 ── */
.hd{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.6) blur(8px); border-bottom:1px solid var(--line)}
.hd-in{max-width:var(--maxw); margin:0 auto; padding:0 20px; height:62px;
       display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:flex; align-items:baseline; gap:8px; text-decoration:none; font-weight:800;
      font-size:19px; letter-spacing:-.4px; color:var(--navy-ink)}
.logo span{font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.hd-nav{display:flex; align-items:center; gap:22px; font-size:14.5px; font-weight:600; color:var(--ink-2)}
.hd-nav a{text-decoration:none}
.hd-nav a:hover{color:var(--navy)}
.hd-cta{display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:#fff;
        padding:9px 16px; border-radius:9px; font-size:14.5px; font-weight:700; text-decoration:none;
        white-space:nowrap}
.hd-cta:hover{background:var(--navy-2)}
@media (max-width:760px){ .hd-nav{display:none} }

/* ── 히어로 ── */
.hero{padding:76px 0 64px; border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 18px; font-size:clamp(28px,4.6vw,44px); line-height:1.3;
         letter-spacing:-1px; font-weight:800; color:var(--navy-ink)}
.hero h1 em{font-style:normal; color:var(--navy)}
.hero p.lead{margin:0 0 30px; font-size:clamp(15.5px,1.7vw,18px); color:var(--ink-2); max-width:620px}
.hero-btns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
     padding:14px 24px; border-radius:10px; font-weight:700; font-size:16px;
     text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-ghost{background:#fff; color:var(--navy-ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
.hero-note{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--ink-3)}
.hero-note b{color:var(--ink-2); font-weight:600}

/* ── 섹션 공통 ── */
.sec{padding:70px 0}
.sec-alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{max-width:640px; margin:0 0 38px}
.eyebrow{font-size:12.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
         color:var(--accent); margin:0 0 10px}
.sec-head h2{margin:0 0 12px; font-size:clamp(23px,3vw,31px); letter-spacing:-.7px;
             font-weight:800; color:var(--navy-ink); line-height:1.35}
.sec-head p{margin:0; color:var(--ink-2); font-size:15.5px}

/* ── 상품 카드 ── */
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
      padding:26px 24px; display:flex; flex-direction:column}
.card:hover{border-color:#cdd4db; box-shadow:var(--shadow)}
.card-top{font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:8px}
.card h3{margin:0 0 10px; font-size:19px; font-weight:800; letter-spacing:-.4px; color:var(--navy-ink)}
.card p{margin:0 0 16px; font-size:14.5px; color:var(--ink-2); flex:1}
.card ul{margin:0 0 18px; padding:0; list-style:none; font-size:13.8px; color:var(--ink-2)}
.card ul li{position:relative; padding-left:18px; margin-bottom:6px}
.card ul li::before{content:''; position:absolute; left:3px; top:9px; width:6px; height:6px;
                    border-radius:50%; background:var(--accent); opacity:.55}
.card-link{font-size:14.5px; font-weight:700; color:var(--navy); text-decoration:none}
.card-link:hover{text-decoration:underline}

/* ── 절차 ── */
.steps{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); counter-reset:s}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; counter-increment:s}
.step::before{content:counter(s); display:flex; align-items:center; justify-content:center;
              width:30px; height:30px; border-radius:50%; background:var(--navy-ink); color:#fff;
              font-size:14px; font-weight:800; margin-bottom:14px}
.step h4{margin:0 0 7px; font-size:16.5px; font-weight:800; color:var(--navy-ink)}
.step p{margin:0; font-size:14.2px; color:var(--ink-2)}

/* ── 약속(신뢰) ── */
.promise{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.pr{background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent);
    border-radius:10px; padding:22px 22px}
.pr h4{margin:0 0 8px; font-size:16.5px; font-weight:800; color:var(--navy-ink)}
.pr p{margin:0; font-size:14.2px; color:var(--ink-2)}

/* ── 보험사 ── */
.insurers{display:flex; flex-wrap:wrap; gap:9px}
.insurers span{background:#fff; border:1px solid var(--line); border-radius:999px;
               padding:8px 16px; font-size:14px; font-weight:600; color:var(--ink-2)}

/* ── 상담 폼 ── */
.form-grid{display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:start}
@media (max-width:860px){ .form-grid{grid-template-columns:1fr} }
.form-card{background:#fff; border:1px solid var(--line); border-radius:14px;
           padding:30px 28px; box-shadow:var(--shadow)}
.fld{margin-bottom:17px}
.fld label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:7px}
.fld .req{color:#c0392b; margin-left:2px}
.fld input[type=text], .fld input[type=tel], .fld select, .fld textarea{
  width:100%; padding:12px 13px; border:1px solid #d6dbe0; border-radius:9px;
  font-size:15.5px; font-family:inherit; color:var(--ink); background:#fff}
.fld textarea{min-height:92px; resize:vertical; line-height:1.6}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(27,58,92,.1)}
.fld .hint{margin:6px 0 0; font-size:12.8px; color:var(--ink-3)}
.radio-row{display:flex; flex-wrap:wrap; gap:8px}
.radio-row label{display:inline-flex; align-items:center; gap:7px; margin:0;
                 border:1px solid #d6dbe0; border-radius:999px; padding:9px 15px;
                 font-size:14px; font-weight:600; cursor:pointer; background:#fff; color:var(--ink-2)}
.radio-row input{accent-color:var(--navy); margin:0}
.radio-row label:has(input:checked){border-color:var(--navy); background:#f2f6fa; color:var(--navy-ink)}
.agree{display:flex; gap:9px; align-items:flex-start; font-size:13.6px; color:var(--ink-2);
       background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:13px 14px}
.agree input{margin-top:4px; accent-color:var(--navy); flex-shrink:0}
.agree a{color:var(--navy); font-weight:600}
.form-card .btn{width:100%; margin-top:18px; padding:15px}
.form-msg{margin-top:14px; padding:12px 14px; border-radius:9px; font-size:14.2px; display:none}
.form-msg.ok{display:block; background:#eaf6f2; border:1px solid #bfe3d8; color:#11574a}
.form-msg.err{display:block; background:#fdeeee; border:1px solid #f3cfcf; color:#9b2c2c}

/* 연락 정보 블록 */
.contact-list{list-style:none; margin:0; padding:0}
.contact-list li{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line-2); font-size:14.8px}
.contact-list li:last-child{border-bottom:0}
.contact-list .k{flex:0 0 76px; color:var(--ink-3); font-size:13.6px; font-weight:600; padding-top:1px}
.contact-list .v{color:var(--ink); font-weight:600}
.contact-list .v small{display:block; font-weight:400; color:var(--ink-3); font-size:13px; margin-top:3px}
.callout{background:#f2f6fa; border:1px solid #d8e3ee; border-radius:11px; padding:18px 20px;
         font-size:14.2px; color:var(--navy-ink); margin-bottom:22px}
.callout b{display:block; margin-bottom:5px; font-size:15px}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:19px 2px; font-size:16px; font-weight:700;
             color:var(--navy-ink); list-style:none; display:flex; justify-content:space-between; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--ink-3); font-weight:400; font-size:20px; line-height:1}
.faq details[open] summary::after{content:'−'}
.faq .a{padding:0 2px 20px; font-size:14.8px; color:var(--ink-2); max-width:760px}

/* ── 푸터 ── */
.ft{background:var(--navy-ink); color:#c2ccd6; padding:46px 0 34px; font-size:13.6px}
.ft a{color:#e4eaf0}
.ft-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:22px; padding-bottom:22px;
        border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:22px}
.ft-brand{font-size:18px; font-weight:800; color:#fff; letter-spacing:-.4px}
.ft-links{display:flex; flex-wrap:wrap; gap:18px; font-weight:600}
.ft-biz{display:grid; gap:4px 22px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
        line-height:1.75; margin-bottom:20px}
.ft-biz b{color:#e4eaf0; font-weight:600}
.ft-note{font-size:12.6px; color:#8d9aa7; line-height:1.75; border-top:1px solid rgba(255,255,255,.1);
         padding-top:18px}
.ft-todo{background:rgba(255,196,0,.13); border:1px solid rgba(255,196,0,.4); color:#ffe08a;
         border-radius:9px; padding:13px 15px; margin-bottom:20px; font-size:13px; line-height:1.7}
.ft-todo b{color:#ffd45e}

/* ── 모바일 하단 고정 CTA ── */
.m-cta{display:none}
@media (max-width:760px){
  .m-cta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:8px;
         padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
         background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line)}
  .m-cta a{flex:1; display:flex; align-items:center; justify-content:center; padding:13px 10px;
           border-radius:10px; font-size:15px; font-weight:700; text-decoration:none}
  .m-cta .c1{background:#fff; border:1px solid var(--line); color:var(--navy-ink)}
  .m-cta .c2{background:var(--navy); color:#fff}
  body{padding-bottom:74px}
  .hero{padding:52px 0 46px}
  .sec{padding:54px 0}
}