body{margin:0;background:#ffffff;-webkit-font-smoothing:antialiased}
a{color:#2A5BB8}
/* 마우스를 올렸을 때 색이 진해지는 효과는 글자 링크(약관 보기·푸터)에만 줍니다.
   예전 a:hover 는 .hero-cta 처럼 클래스로 색을 준 버튼보다 우선순위가 높아서,
   파란 버튼에 마우스를 올리면 흰 글자가 남색으로 바뀌었습니다. */
.fm-term-a:hover,.ft-a:hover{color:#214A97}
.fl{display:flex;align-items:center;height:44px;box-sizing:border-box;border:1px solid #E5E8EB;border-radius:10px;padding:0 11px;background:#fff;gap:5px}
.fl:focus-within{border-color:#3182F6;box-shadow:0 0 0 3px rgba(49,130,246,0.14)}
.fl input{border:none;outline:none;flex:1;min-width:0;width:0;font-size:14.5px;font-family:inherit;color:#18202E;background:transparent;padding:0}
.fl input.num{text-align:right;font-weight:600}
.fl input::placeholder{color:#A0A7B2;font-weight:400}
.u{font-size:13px;color:#4A5363;flex-shrink:0}
.lb{font-size:13px;font-weight:700;color:#191F28}
.rq{color:#E04848;margin-left:2px}
.sg{height:44px;border-radius:10px;font-family:inherit;font-size:14px;cursor:pointer}
.sg-on{border:1.5px solid #3182F6;background:#EAF2FE;color:#3182F6;font-weight:700}
.sg-off{border:1px solid #E5E8EB;background:#FFFFFF;color:#2C3544;font-weight:500}
.btn2{width:86px;height:44px;flex-shrink:0;border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:#ECEEF1;font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#191F28;word-break:keep-all}
.page{max-width:768px;margin:0 auto;background:#FFFFFF;min-height:100vh;display:flex;flex-direction:column;position:relative}
.page>header{padding-top:env(safe-area-inset-top,0px)}
img,svg{max-width:100%}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld .err{font-size:12px;color:#E04848;min-height:0}
.fld .err:empty{display:none}
.fld.bad .fl{border-color:#E04848}
.fld.bad .sg-off{border-color:#E04848}
.sg-on,.sg-off{transition:background .15s}
.term .tick{color:#3182F6;display:flex}
.term[aria-pressed="false"] .tick{color:#C5CCD6}
.allbox{width:20px;height:20px;border-radius:50%;background:#3182F6;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid #3182F6}
#allBtn[aria-pressed="false"] .allbox{background:#FFFFFF;border-color:#C5CCD6}
#allBtn[aria-pressed="false"] .allbox svg{visibility:hidden}
#termList:not([hidden]){display:flex}
.formerr{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#FFF1F1;color:#C9302C;font-size:13px;line-height:1.5}
#submitBtn:disabled{background:#C5CCD6;cursor:default}
#submitBtn{background:#3182F6}#submitBtn.off{background:#C5CCD6}
button:focus-visible,a:focus-visible{outline:2px solid #3182F6;outline-offset:2px}
.ov{position:fixed;inset:0;z-index:50;background:rgba(17,24,39,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.ov[hidden],.panel[hidden]{display:none}
.dlg{width:100%;max-width:390px;max-height:min(640px,calc(100vh - 40px));background:#FFFFFF;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden}
.dlgbody{padding:4px 20px 0;overflow-y:auto}
.x{width:44px;height:44px;margin:-10px -12px 0 0;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer}
.panel .x{margin:0}
.okbtn{width:100%;height:52px;border-radius:12px;border:none;background:#3182F6;color:#FFFFFF;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.panel{position:fixed;inset:0;z-index:60;background:rgba(17,24,39,.35);display:flex;justify-content:center}
.panelin{width:100%;max-width:768px;height:100%;overflow-y:auto;background:#FFFFFF;padding-bottom:env(safe-area-inset-bottom,0px)}

.lead{border:1px solid #E5E8EB;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;color:#333D4B}
.lead b{color:#191F28}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:70;background:#191F28;color:#FFFFFF;font-size:13.5px;padding:10px 16px;border-radius:999px;max-width:90vw;text-align:center}

/* ======================================================================
   index.php 에서 옮겨온 스타일
   섹션 순서대로 묶어 두었습니다. 화면과 짝을 맞춰 보세요.
   ====================================================================== */

/* --- 공통 --- */
.noshrink{flex-shrink:0}
.ico-next{margin-left:4px;flex-shrink:0}
.c-blue{color:#3182f6}
.opt{font-weight:500;color:#8b95a1}
.opt2{color:#8a93a2}

/* --- 상단 헤더 --- */
.hd{--sx:20px;height:56px;flex-shrink:0;box-sizing:border-box;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eef1f5;background-color:#ffffff;color:#0f1e36}
.hd-logo{font-size:20px;font-weight:800;letter-spacing:-0.8px}
.hd-logo-k{color:#000000}
.hd-cta{font-size:14px;font-weight:700;color:#2f6fe0;text-decoration:none;padding:12px 0px}

/* --- 첫 화면 --- */
.hero{--sx:20px;padding:34px 20px 30px;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#ffffff;position:relative}
.hero-badge{font-size:13px;font-weight:700;color:#ffffff;background:#3182f6;border-radius:999px;padding:7px 14px}
.hero-h{margin:18px 0 0;font-size:31px;line-height:1.36;font-weight:800;color:#191f28;letter-spacing:-1px}
.hero-h-d{color:#191f28}
.hero-p{margin:12px 0 0;font-size:15px;line-height:1.6;color:#4e5968}
.hero-imgwrap{position:relative;width:100%;max-width:350px;margin:22px auto 0}
.hero-img{display:block;width:100%;height:auto}
.hero-cta{margin-top:22px;width:100%;height:58px;border-radius:14px;background:#3182f6;color:#ffffff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;letter-spacing:-0.3px}
/* 이미지 상자를 기준으로 붙입니다. 화면이 좁아 이미지가 줄어들어도 늘 오른쪽 아래에 따라갑니다
   (예전에는 top:463px 처럼 고정값이라 폭이 달라지면 위치가 어긋났습니다) */
.hero-note{position:absolute;right:15px;top:100%;z-index:3;font-size:10px;color:#8b95a1;white-space:nowrap}

/* --- 신청 폼 --- */
#apply{--sx:16px;padding:28px 16px 26px;display:flex;flex-direction:column;background-color:#f2f4f6;scroll-margin-top:0}
.fm-badge{align-self:flex-start;margin-left:4px;display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#ffffff;background:#3182f6;border-radius:999px;padding:5px 10px}
.fm-dot{width:4px;height:4px;border-radius:50%;background:#ffffff}
.fm-h{margin:10px 0 0 4px;font-size:26px;line-height:1.38;font-weight:800;color:#191f28;letter-spacing:-0.5px}
#leadForm{margin:16px 0 0;background:#ffffff;border-radius:16px;box-shadow:0 4px 20px rgba(25,31,40,0.06);padding:20px 16px 18px;display:flex;flex-direction:column}
#hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fm-grid2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 8px}
.fm-gender{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:4px}
.fm-mt14{margin-top:14px}
/* 좁은 화면에서 옆의 버튼이 밀려나지 않도록, 입력상자가 내용 폭보다 더 줄어들 수 있게 합니다.
   flex 항목은 기본값이 min-width:auto 라서 안쪽 input 의 기본 크기만큼 자리를 붙들고 있습니다. */
.fm-grp{display:flex;gap:6px;min-width:0}
.fl-grow{flex:1;min-width:0}
#sendBtn{border:none;background:#eaf2fe;color:#3182f6}
#timer{font-size:12.5px;font-weight:600;color:#e04848}
#verifyBtn{border:none;background:#3182f6;color:#ffffff}
.fm-help{display:block;margin-top:6px;font-size:12px;color:#6b7684}
.fm-sub{margin-top:22px;padding-top:20px;border-top:1px solid #eef1f5;font-size:13.5px;font-weight:500;color:#4e5968}
.fm-grid2-mt{margin-top:12px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 8px}
.fm-line{display:flex;align-items:center}
.fm-terms{margin-top:20px;padding:2px 0}
#allBtn{flex:1;min-height:46px;display:flex;align-items:center;gap:9px;border:none;background:transparent;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.fm-allt{font-size:14px;font-weight:700;color:#191f28}
#openBtn{height:44px;border:none;background:transparent;font-family:inherit;font-size:12.5px;color:#8b95a1;cursor:pointer;display:flex;align-items:center;gap:3px;padding:0}
#termList{padding:4px 0 6px 29px;border-top:1px solid #f2f4f6;flex-direction:column}
.term{flex:1;min-height:40px;display:flex;align-items:center;gap:6px;border:none;background:transparent;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.fm-term-t{font-size:12.5px;color:#4e5968}
.fm-term-a{font-size:12px;color:#8b95a1;text-decoration:underline;padding:10px 0 10px 8px}
#submitBtn{margin-top:12px;width:100%;height:56px;flex-shrink:0;border-radius:14px;border:none;color:#ffffff;font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer}
.fm-perks{margin-top:14px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));text-align:center;font-size:12.5px;color:#6b7684}
.fm-more{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#8b95a1;text-decoration:none}
.fm-more-c{width:30px;height:30px;box-sizing:border-box;border-radius:50%;border:1px solid #d1d6db;display:flex;align-items:center;justify-content:center;background:#ffffff}
.fm-more-t{font-size:11.5px;color:#4e5968}

/* --- 섹션 공통 머리 --- */
.sec-badge{font-size:13px;font-weight:700;color:#ffffff;background:#1b3a8c;border-radius:4px;padding:9px 16px;letter-spacing:-0.2px}
.sec-h{margin:22px 0 0;font-size:25px;line-height:1.42;font-weight:800;color:#191f28;letter-spacing:-0.8px}
.sec-h-b{font-size:31px;color:#3182f6}
.sec-p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#6b7684}

/* --- 왜 필요할까요 --- */
#why{--sx:16px;padding:48px 16px 40px;background:#ffffff;display:flex;flex-direction:column;align-items:center;text-align:center}
.why-list{margin-top:20px;width:100%;display:flex;flex-direction:column;gap:14px}
.why-card{background:#f5f7fa;border-radius:18px;padding:22px 18px;display:flex;gap:14px;align-items:flex-start;text-align:left}
.why-body{display:flex;flex-direction:column;gap:6px}
.why-t{font-size:16px;font-weight:800;color:#2f6fe0;letter-spacing:-0.3px}
.why-d{font-size:13.5px;line-height:1.6;color:#4e5968}

/* --- 리포트 포인트 --- */
.rep{--sx:16px;padding:48px 16px 44px;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#3d3d3d}
.rep-badge{font-size:13px;font-weight:700;color:#2f6fe0;border-radius:4px;padding:9px 16px;letter-spacing:-0.2px;background-color:#ffffff}
.rep-h{margin:22px 0 0;font-size:25px;line-height:1.42;font-weight:800;color:#ffffff;letter-spacing:-0.8px}
.rep-h-b{font-size:31px;color:#b6d3ff}
.rep-p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#e3edff}
.rep-list{margin-top:26px;width:100%;display:flex;flex-direction:column;gap:14px}
.rep-card{background:#ffffff;border-radius:18px;box-shadow:0 6px 24px rgba(19,40,74,0.16);padding:22px 18px;display:flex;gap:14px;align-items:flex-start;text-align:left}
.rep-no{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#e3edfd;color:#3182f6;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rep-body{display:flex;flex-direction:column;gap:5px}
.rep-t{font-size:16px;font-weight:800;color:#000000;letter-spacing:-0.3px}
.rep-d{font-size:14px;line-height:1.6;color:#4e5968}

/* --- 필요한 기준 --- */
.std{--sx:20px;padding:0 20px 48px;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#f1f4f9;position:relative}
.std-line{width:1px;height:44px;background:#b9cceb}
.std-h{margin:26px 0 0;font-size:22px;line-height:1.45;font-weight:700;color:#191f28;letter-spacing:-0.6px}
.std-h-b{font-size:27px;font-weight:800;color:#3182f6}
.std-grid{margin-top:26px;width:100%;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px 10px}
.std-item{display:flex;flex-direction:column;align-items:center;gap:7px}
.std-item-rd{display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:10px}
.std-ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;background-color:#ffffff;box-shadow:0 6px 20px rgba(19,40,74,0.08)}
.std-t{margin-top:4px;font-size:15.5px;font-weight:800;color:#2f6fe0;letter-spacing:-0.3px}
.std-d{font-size:13.5px;line-height:1.5;color:#4e5968}

/* --- 받는 방법 --- */
.step-sec{--sx:16px;padding:48px 16px 44px;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#ffffff}
.step-list{margin-top:28px;width:100%;display:flex;flex-direction:column;gap:22px;text-align:left}
.step-row{display:flex;flex-direction:column;align-items:flex-start}
.step-badge{position:relative;z-index:1;margin-left:6px;font-size:13.5px;font-weight:800;color:#ffffff;background:#3182f6;border-radius:4px;padding:8px 14px;letter-spacing:-0.2px}
.step-card{margin-top:-10px;width:100%;box-sizing:border-box;background:#ffffff;border:1px solid #dce3ec;border-radius:8px;padding:22px 16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.step-d{font-size:14px;line-height:1.65;font-weight:500;color:#333d4b}
.step-ctawrap{margin-top:58px;width:100%;position:relative}
.step-tip{position:absolute;left:75px;top:-22px;transform:translateX(-50%);z-index:1;white-space:nowrap;font-size:13px;font-weight:700;color:#ffffff;background:#2b2d31;border-radius:999px;padding:6px 16px;box-shadow:0 4px 10px rgba(0,0,0,0.15)}
.step-cta{width:100%;height:58px;border-radius:14px;background:#3182f6;color:#ffffff;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;letter-spacing:-0.3px}

/* --- 하단 강조 --- */
.cta{--sx:20px;padding:50px 20px 50px;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:#333d4b;color:#333d4b}
.cta-badge{font-size:13px;font-weight:700;color:#1b3a8c;background:#ffffff;border-radius:4px;padding:9px 16px;letter-spacing:0.4px}
.cta-h{margin:22px 0 0;font-size:26px;line-height:1.4;font-weight:800;color:#ffffff;letter-spacing:-0.5px}
.cta-p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:#d3def5}
.cta-btn{margin-top:26px;width:100%;height:58px;border-radius:14px;background:#3182f6;color:#ffffff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;font-size:17px;font-weight:700}

/* --- 푸터 --- */
.ft{--sx:20px;flex-grow:1;padding:28px 20px 30px;background:#ffffff;display:flex;flex-direction:column;gap:5px;font-size:11.5px;line-height:1.6;color:#6b7482}
.ft-a{color:#3a4352;text-decoration:none;padding:6px 0}
.ft-strong{font-weight:600;color:#3a4352}
.ft-note{margin-top:4px}

/* --- 하단 고정 버튼 --- */
.bar{position:sticky;bottom:0;padding-bottom:env(safe-area-inset-bottom, 0px);z-index:10;padding:0 12px 12px}
/* 띠 전체가 눌리는 영역이라, 안쪽 글자가 선택되면 안드로이드 크롬이
   "검색결과를 보려면 탭하세요" 같은 시트를 띄웁니다. 글자 선택을 막아 둡니다. */
.bar-in{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:58px;box-sizing:border-box;border-radius:14px;background:#1b3a8c;box-shadow:0 8px 24px rgba(27,58,140,0.3);display:flex;align-items:center;gap:8px;padding:0 8px 0 12px}
.bar-tag{font-size:11px;font-weight:700;color:#8fb0ec;background:rgba(143,176,236,0.16);border-radius:4px;padding:3px 6px}
.bar-t{flex:1;font-size:13.5px;font-weight:600;color:#ffffff}
.bar-a{height:44px;padding:0 16px;border-radius:10px;background:#3182f6;color:#ffffff;text-decoration:none;display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700}

/* --- 약관 팝업 --- */
.dlg-hd{padding:20px 20px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid #f2f4f6}
.dlg-ttl{display:flex;flex-direction:column;gap:4px}
.dlg-req{font-size:12px;font-weight:700;color:#3182f6}
.dlg-opt{font-size:12px;font-weight:700;color:#6b7684}
.dlg-h{margin:0;font-size:18px;line-height:1.4;font-weight:800;color:#191f28}
.dlg-inner{padding:4px 20px 0}
.dlg-row{display:grid;grid-template-columns:78px minmax(0, 1fr);gap:10px;padding:11px 0;border-bottom:1px solid #f2f4f6;font-size:13.5px;line-height:1.6}
.dlg-k{font-weight:700;color:#191f28}
.dlg-v{color:#4e5968}
/* 팝업 안의 본문 문단 (표로 나눌 수 없는 설명글) */
.dlg-p{margin:14px 0 2px;font-size:13.5px;line-height:1.7;color:#4e5968}
.dlg-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:#6b7684}
.dlg-ft{padding:16px 20px 20px}

/* --- 약관 전문 패널 --- */
.panelin-col{display:flex;flex-direction:column;min-height:100%}
.doc-hd{--sx:8px;position:sticky;top:0;z-index:1;height:56px;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid #f2f4f6;background:#ffffff}
.doc-hd-t{font-size:16px;font-weight:700;color:#191f28}
.doc-wrap{padding:8px 22px 40px}
.doc-h1{margin:22px 0 0;font-size:22px;font-weight:800;color:#191f28;letter-spacing:-0.5px}
.doc-date{margin:8px 0 0;font-size:13px;color:#6b7684}
.doc-blk{margin-top:26px}
.doc-h{margin:0;font-size:16px;font-weight:800;color:#191f28}
.doc-t{margin-top:8px;font-size:14px;line-height:1.75;color:#4e5968}
/* 처리방침 맨 아래 공고일자·시행일자.
   파란색은 본문 링크와 같은 #2A5BB8 을 씁니다. 밝은 #3182F6 은
   흰 배경에서 작은 글자 대비가 모자랍니다(3.3:1 → WCAG AA 미달). */
.doc-sig{margin:30px 0 0;font-size:14px;line-height:1.9;font-weight:500;color:#4a83ec}

/* --- 신청 완료 --- */
.done-wrap{flex:1;padding:0 24px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.done-ico{width:64px;height:64px;border-radius:50%;background:#eef3fa;display:flex;align-items:center;justify-content:center}
.done-h{margin:20px 0 0;font-size:22px;line-height:1.42;font-weight:800;color:#13284a;letter-spacing:-0.5px}
.done-p{margin:10px 0 0;font-size:14px;line-height:1.7;color:#5f6877}
.done-ft{padding:16px 20px 26px}
.done-btn{height:50px;border-radius:5px;background:#2a5bb8;color:#ffffff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:700}
#saveNote{margin:0 24px 24px;font-size:12.5px;color:#8b95a1;text-align:center}


/* 화면이 모바일 폭(768px)보다 넓어지면 = PC 보기.
   섹션 배경색은 화면 끝까지 펼치고, 글과 입력칸만 가운데 좁은 칸으로 모읍니다.
   --pcw 가 그 칸(컨테이너)의 너비입니다. 이 값 하나만 바꾸면 전체가 따라갑니다.
   --sx 는 섹션마다 다른 좌우 여백이라 글 폭은 (--pcw - sx*2) 가 됩니다.
   768px 미만(모바일)은 이 블록이 적용되지 않아 예전과 똑같습니다. */
@media (min-width: 768px){
  :root{--pcw:480px}
  body{background:#FFFFFF}
  .page{max-width:none}
  .page>header,.page>section,.page>footer{padding-left:calc(50% - var(--pcw)/2 + var(--sx,20px))!important;padding-right:calc(50% - var(--pcw)/2 + var(--sx,20px))!important}
  .page>.bar{padding-left:0!important;padding-right:0!important}
  /* 하단 고정 띠는 모바일에서 좌우 12px 여백을 쓰므로 그만큼 뺀 폭입니다 */
  .page>.bar>.bar-in{max-width:calc(var(--pcw) - 24px);margin:0 auto}
  /* 약관 전문·신청 완료 화면도 같은 폭으로 맞춥니다 */
  .panelin{max-width:var(--pcw)}
}