:root{
  --navy:#0b426f;
  --blue:#0b65ad;
  --mint:#2ca58d;
  --ink:#182839;
  --muted:#667786;
  --line:#dfe8ef;
  --soft:#f4f8fb;
  --white:#fff;
  --accent:#2ca58d;
  --accent-soft:#eef9f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,92%);margin:auto}
.micro{height:34px;background:#073653;color:#fff;font-size:12px}
.micro .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.micro-links{display:flex;gap:18px}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.header-row{height:72px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;min-width:295px}
.brand-mark{width:42px;height:42px;border-radius:50%;border:2px solid #9cb6ca;display:grid;place-items:center;font-weight:900;color:var(--navy);font-size:12px}
.brand-title{font-size:19px;font-weight:900;color:#163c5f}
.brand small{display:block;color:#6d7c88;font-size:10px}
.main-nav{display:flex;justify-content:center;gap:28px;flex:1;font-size:14px;font-weight:800}
.main-nav a:hover{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:10px}
.apply{background:#0b65ad;color:#fff;padding:11px 17px;border-radius:999px;font-weight:900;font-size:13px}

/* Track hero */
.track-hero{
  min-height:420px;
  display:flex;
  align-items:center;
  position:relative;
  background:
    linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 37%,rgba(255,255,255,.70) 52%,rgba(255,255,255,.05) 72%),
    var(--hero-image) right center/64% 100% no-repeat;
  border-bottom:1px solid var(--line);
}
.track-hero .wrap{padding:48px 0}
.breadcrumb{font-size:12px;color:#7d8b96;margin-bottom:18px}
.track-no{
  display:inline-block;
  padding:5px 13px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
}
.track-hero h1{
  margin:12px 0 0;
  font-size:52px;
  line-height:1.03;
  letter-spacing:-.045em;
  color:#102f50;
}
.track-eng{font-size:19px;font-weight:900;color:var(--accent);margin:3px 0 8px}
.track-lead{max-width:630px;font-size:17px;color:#435768;margin:0}
.hero-icons{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.hero-icons span{display:flex;align-items:center;gap:7px;font-weight:800;color:#143e61;font-size:14px}
.icon-circle{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:20px}

/* Main content */
.intro{padding:28px 0 16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{border:1px solid var(--line);border-radius:18px;background:#fff;padding:24px}
.panel h3{margin:0 0 10px;color:var(--navy);font-size:20px}
.panel ul{margin:0;padding-left:22px}
.panel li{margin:6px 0}
.keywords{display:flex;flex-wrap:wrap;gap:8px}
.keyword{background:var(--accent-soft);color:#36515f;border-radius:999px;padding:7px 11px;font-size:12px}

.flow-sec{padding:28px 0 34px;background:#f7fafc}
.flow-sec h2{margin:0 0 14px;font-size:26px;color:#123f66}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{position:relative;border:1px solid var(--line);background:#fff;border-radius:15px;padding:17px 16px;min-height:95px}
.step:not(:last-child):after{content:"›";position:absolute;right:-13px;top:28px;font-size:30px;color:#5f88a8;z-index:2}
.step .num{display:inline-block;color:var(--accent);font-weight:900;margin-right:6px}
.step strong{color:#124e80}
.step small{display:block;color:#61727e;margin-top:3px}

.detail-sec{padding:28px 0 45px}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.detail-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px}
.detail-card h3{margin:0 0 9px;color:var(--accent);font-size:18px}
.detail-card p,.detail-card li{font-size:13px;color:#566977}
.detail-card ul{margin:0;padding-left:18px}

.track-links{padding:30px 0;background:#f7fbfd;border-top:1px solid #e4edf3}
.track-links .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.track-link{padding:16px;border-radius:15px;background:#fff;border:1px solid var(--line);font-weight:900;color:#17466e;text-align:center}
.track-link.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%, white)}

.footer-cta{padding:32px 0;background:linear-gradient(90deg,#eef6fb,#f6fbf6)}
.footer-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-cta h2{margin:0 0 5px;color:#36554b;font-size:26px}
.footer-cta p{margin:0;color:#66766f}
.cta-btns{display:flex;gap:10px}
.cta-btns a{padding:11px 16px;border-radius:999px;border:1px solid #b7c4cc;background:#fff;font-weight:900;font-size:13px}
.cta-btns a.primary{background:#0b65ad;color:#fff;border-color:#0b65ad}
footer{background:#18324a;color:#cbd5df;padding:25px 0;font-size:12px}

@media(max-width:960px){
  .main-nav{display:none}
  .track-hero{background-size:auto 100%;background-position:72% center}
  .flow,.detail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .micro{display:none}
  .header-row{height:66px}
  .brand{min-width:0}
  .brand small{display:none}
  .track-hero{
    min-height:690px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 44%,rgba(255,255,255,.12) 65%),
      var(--hero-image) center bottom/auto 50% no-repeat;
  }
  .track-hero .wrap{padding:38px 0 360px}
  .track-hero h1{font-size:39px}
  .two,.flow,.detail-grid,.track-links .wrap{grid-template-columns:1fr}
  .step:not(:last-child):after{display:none}
  .footer-cta .wrap{display:block}
  .cta-btns{flex-wrap:wrap;margin-top:16px}
}