:root{
  --navy:#12315b; --navy2:#1c4b8a; --accent:#2f7dd1;
  --bg:#f5f7fa; --card:#ffffff; --text:#1f2937; --muted:#5b6472; --line:#e3e8ef;
  --ok:#0f9d58; --warn:#c0392b; --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.75; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:800; font-size:20px; color:var(--navy); letter-spacing:-.5px}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:22px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--text); font-weight:600; font-size:15px}
.nav-toggle{display:none; background:none; border:0; font-size:26px; color:var(--navy); cursor:pointer}
@media(max-width:820px){
  .nav-links{position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:.3s}
  .nav-links.open{max-height:400px}
  .nav-links li{border-top:1px solid var(--line)}
  .nav-links a{display:block; padding:14px 20px}
  .nav-toggle{display:block}
}

.hero{background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; padding:64px 0 72px}
.hero h1{font-size:38px; line-height:1.3; margin:0 0 16px; letter-spacing:-1px}
.hero p{font-size:19px; color:#d7e2f2; max-width:640px; margin:0 0 28px}
.hero .btns{display:flex; gap:12px; flex-wrap:wrap}
@media(max-width:600px){.hero h1{font-size:29px}.hero p{font-size:17px}}

.btn{display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; font-size:16px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:#215da0; text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.2); text-decoration:none}

section{padding:56px 0}
h2{font-size:28px; color:var(--navy); letter-spacing:-.5px; margin:0 0 8px}
.section-sub{color:var(--muted); margin:0 0 32px; font-size:16px}
h3{font-size:20px; color:var(--navy); margin:28px 0 10px}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:.2s; display:block; color:inherit}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(18,49,91,.1); text-decoration:none}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:15px}
.card .tag{display:inline-block; font-size:12px; font-weight:700; color:var(--accent);
  background:#eaf2fb; padding:3px 10px; border-radius:20px; margin-bottom:12px}

.article{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:40px 44px}
@media(max-width:600px){.article{padding:28px 22px}}
.article h1{font-size:30px; color:var(--navy); line-height:1.35; margin:0 0 6px; letter-spacing:-.8px}
.meta{color:var(--muted); font-size:14px; margin:0 0 24px; border-bottom:1px solid var(--line); padding-bottom:18px}
.lead{font-size:19px; color:#374151; background:#f0f5fb; border-left:4px solid var(--accent);
  padding:18px 22px; border-radius:0 10px 10px 0; margin:0 0 28px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 20px; padding-left:22px}
.article li{margin:6px 0}

table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
th,td{border:1px solid var(--line); padding:11px 14px; text-align:left}
th{background:var(--navy); color:#fff; font-weight:600}
tr:nth-child(even) td{background:#f8fafc}

.steps{counter-reset:step; list-style:none; padding:0; margin:20px 0}
.steps li{position:relative; padding:0 0 22px 56px; border-left:2px solid var(--line); margin-left:18px}
.steps li:last-child{border-left-color:transparent}
.steps li::before{counter-increment:step; content:counter(step);
  position:absolute; left:-19px; top:-2px; width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center}
.steps strong{display:block; color:var(--navy); font-size:17px; margin-bottom:2px}

.note{background:#fff8e6; border:1px solid #f2d98a; border-radius:10px; padding:16px 20px; margin:20px 0; font-size:15px}
.note strong{color:#9a6b00}

.faq details{background:#fff; border:1px solid var(--line); border-radius:10px; margin:10px 0; padding:0 20px}
.faq summary{cursor:pointer; font-weight:700; color:var(--navy); padding:16px 0; list-style:none; font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent); font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{padding:14px 0; margin:0; color:var(--muted)}

.crumb{font-size:14px; color:var(--muted); margin:0 0 18px}
.crumb a{color:var(--muted)}

.cta-band{background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff; border-radius:var(--radius);
  padding:38px 40px; text-align:center; margin:40px 0}
.cta-band h2{color:#fff; margin:0 0 10px}
.cta-band p{color:#d7e2f2; margin:0 0 22px}

.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px}
.related a{background:#f0f5fb; border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  font-weight:600; color:var(--navy); display:block}
.related a:hover{background:#e2edfa; text-decoration:none}

.site-footer{background:var(--navy); color:#c7d3e6; padding:44px 0 30px; margin-top:20px; font-size:14px}
.site-footer h4{color:#fff; margin:0 0 12px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:26px}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}
.site-footer a{color:#c7d3e6}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:6px 0}
.disclaimer{border-top:1px solid rgba(255,255,255,.15); padding-top:20px; color:#93a4c0; font-size:13px; line-height:1.7}


/* ===== 상단 고정 프로모 배너 (전체 페이지 공통) ===== */
body{padding-top:50px}
.site-header{top:50px}
.promo-bar{position:fixed; top:0; left:0; right:0; z-index:100; height:50px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:#fff; font-weight:800; font-size:15.5px; letter-spacing:-.3px;
  padding:0 16px; text-align:center; overflow:hidden;
  background:linear-gradient(90deg,#ff2d74,#ff5e3a,#ffb02f,#ff5e3a,#ff2d74);
  background-size:300% 100%; animation:promoFlow 6s linear infinite;
  box-shadow:0 2px 12px rgba(255,45,116,.4)}
@keyframes promoFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.promo-bar::before{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); animation:promoShine 4.5s ease-in-out infinite}
@keyframes promoShine{0%{left:-60%}55%{left:130%}100%{left:130%}}
.promo-bar>*{position:relative; z-index:1}
.promo-text{text-shadow:0 1px 2px rgba(0,0,0,.18)}
.promo-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:#fff;
  animation:promoPulse 1.4s ease-out infinite; margin-right:3px; vertical-align:middle}
@keyframes promoPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.promo-cta{background:#fff; color:#e8261f; font-weight:800; padding:6px 15px; border-radius:20px;
  font-size:13.5px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .2s}
.promo-bar:hover{text-decoration:none}
.promo-bar:hover .promo-cta{transform:translateX(3px)}
@media(max-width:600px){
  .promo-bar{font-size:13.5px; gap:9px; height:48px}
  body{padding-top:48px} .site-header{top:48px}
}