body{margin:0;background:#071433}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
a{color:#2F6BFF}a:hover{color:#1D4FD8}
h1,h2,h3,.gong{font-family:'GongGothic','Gong Gothic','Noto Sans KR',sans-serif;font-weight:900;letter-spacing:-0.02em}
.fld{width:100%;height:52px;padding:0 16px;border:1px solid #CBD5EA;border-radius:10px;background:#FFFFFF;color:#0B1838;font:inherit;font-size:16px}
textarea.fld{height:110px;padding:14px 16px;resize:vertical}
.fld::placeholder{color:#97A3BD}
input,select,textarea,button{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #FFC93C;outline-offset:3px}
.step-arrow{flex:0 0 40px;align-self:center;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#E3EBFF}
.step-arrow svg{width:22px;height:22px}
@media (max-width:760px){
  .hero-shield{opacity:0.16 !important;right:-160px !important}
  .step-arrow{flex:0 0 100%;width:100%;height:32px;background:transparent;margin:-6px 0}
  .step-arrow svg{transform:rotate(90deg);width:28px;height:28px;padding:4px;border-radius:50%;background:#E3EBFF;box-sizing:content-box}
  .offer-div{display:none}
  .float-txt{display:none}
}
.alert-card{box-shadow:0 0 0 0 rgba(255,107,107,0.55);animation:alertPulse 2s ease-out infinite}
.blink-dot{animation:blink 1s steps(2,start) infinite}
@keyframes alertPulse{0%{box-shadow:0 0 0 0 rgba(255,107,107,0.55)}70%{box-shadow:0 0 0 14px rgba(255,107,107,0)}100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}}
@keyframes blink{to{visibility:hidden}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.alert-card,.blink-dot{animation:none}}
@keyframes newsRise{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .news-card{animation:newsRise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .news-card:nth-child(3n+2){animation-range:entry 10% cover 33%}
  .news-card:nth-child(3n){animation-range:entry 20% cover 38%}
}
@media (prefers-reduced-motion: reduce){.news-card{animation:none !important}}
@media (max-width:760px){
  .m-pill{border-radius:20px !important;padding:16px 18px !important;align-items:flex-start !important;text-align:left !important}
  .m-pill br{display:none}
  .m-phone{border-left:0 !important;border-top:1px solid rgba(201,212,238,0.2);padding:18px 0 0 !important;width:100%}
  .m-icon{width:56px !important;height:56px !important}
  .m-icon svg{width:24px;height:24px}
  .m-gtitle{font-size:24px !important;line-height:1.3 !important}
  .float-cta{width:56px;height:56px;min-height:56px !important;padding:0 !important;justify-content:center}
  .m-hcard{flex-direction:row !important;align-items:flex-start !important;text-align:left;padding:24px 20px !important;gap:16px !important}
  .m-hbody{align-items:flex-start !important;gap:8px !important}
  .m-hicon{flex:0 0 auto;width:40px;height:40px}
  .m-step{max-width:none !important;width:100%}
  .m-step > .gong{flex:0 0 auto;font-size:34px !important;min-width:48px}
  .m-wcard{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 20px 20px !important}
  .m-wcard > div + div{margin-top:0 !important;text-align:center}
  .m-risk{padding:24px 20px !important}
  .m-risk .m-hbody{gap:8px !important;padding-right:56px}
  .m-trust > span:first-child{flex:0 0 auto;width:52px !important;height:52px !important}
  .m-trust > span.gong:first-child{width:auto !important;font-size:38px !important}
  .m-trust h4 br{display:none}
  .m-trust p br{display:none}
  .m-sensor{position:relative;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:22px 20px !important}
  .m-sensor .m-hbody{gap:6px !important}
  .m-sensor .m-hicon{position:absolute;top:20px;right:20px;width:32px;height:32px;margin:0}
  .m-sensor h3{text-align:left;line-height:1.2 !important;padding-right:44px}
  .m-sensor .m-hbody > p{text-align:left;margin-top:0 !important}
  .m-intro{gap:14px !important}
  .m-intro br{display:none}
}
/* ===== 메인 타이핑 + 아래에서 올라오는 효과 ===== */
.tw{opacity:0;animation:twIn .08s linear forwards}
@keyframes twIn{0%{opacity:0}20%,100%{opacity:1}}
.tw-caret{display:inline-block;width:0.07em;height:0.85em;margin-left:0.08em;vertical-align:-0.06em;background:#FF6B6B;opacity:0;animation:caretBlink .7s linear 5 forwards}
@keyframes caretBlink{0%,40%{opacity:1}50%,100%{opacity:0}}
.rise{opacity:0;transform:translateY(44px);animation:riseUp .75s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes riseUp{to{opacity:1;transform:none}}
.alert-card.rise{animation:riseUp .75s cubic-bezier(.2,.7,.2,1) forwards,alertPulse 2s ease-out infinite}
@media (prefers-reduced-motion: reduce){
  .tw,.rise,.alert-card.rise{opacity:1 !important;transform:none !important;animation:none !important}
  .tw-caret{display:none}
}
/* ===== 스크롤하면 아래에서 올라오는 효과 (전 섹션) ===== */
@keyframes srUp{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  .reveal > div > *{animation:srUp linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  .reveal > div > [style*="grid-template-columns"],
  .reveal > div > [style*="align-items:stretch"]{animation:none}
  .reveal > div > [style*="grid-template-columns"] > *:not(.news-card),
  .reveal > div > [style*="align-items:stretch"] > *{animation:srUp linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
  .reveal > div > [style*="grid-template-columns"] > *:not(.news-card):nth-child(3n+2),
  .reveal > div > [style*="align-items:stretch"] > *:nth-child(3n+2){animation-range:entry 8% cover 30%}
  .reveal > div > [style*="grid-template-columns"] > *:not(.news-card):nth-child(3n),
  .reveal > div > [style*="align-items:stretch"] > *:nth-child(3n){animation-range:entry 16% cover 35%}
}
.sr-hide{opacity:0;transform:translateY(56px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.sr-hide.sr-show{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal *{animation:none !important}
  .sr-hide{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ===== 서버용 추가 스타일 ===== */
@font-face{font-family:'GongGothic';src:url('/fonts/GongGothicBold.woff2') format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'GongGothic';src:url('/fonts/GongGothicMedium.woff2') format('woff2');font-weight:400 600;font-display:swap}
[hidden]{display:none !important}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
#apply-submit[disabled]{opacity:.6;cursor:wait}
.fld:invalid:not(:placeholder-shown){border-color:#E5484D}
.float-safe{bottom:calc(88px + env(safe-area-inset-bottom,0px)) !important}
.float-safe-top{bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important}
@media (max-width:760px){
  .float-safe,.float-safe-top{right:14px !important}
}