:root{--navy:#12306B;--navy-d:#0F2A5F;--blue:#2F6FE4;--sky:#EAF2FF;--sky2:#F3F7FF;--yellow:#FFC629;--text:#1F2A44;--sub:#4B5873;--sub2:#5B6784}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans KR',sans-serif;color:var(--text);background:#fff;min-width:320px}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}
html{scroll-behavior:smooth;scroll-padding-top:84px}
h1,h2,p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px}
.btn-navy{background:var(--navy);color:#fff}
.btn-line{border:2px solid var(--navy);color:var(--navy)}
.btn-yellow{background:var(--yellow);color:var(--navy);font-weight:800}
.btn-white{border:2px solid #fff;color:#fff}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);box-shadow:0 2px 14px rgba(18,48,107,.10)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;max-width:1180px;margin:0 auto;padding:8px 24px;min-height:60px}
.logo{display:flex;align-items:baseline;gap:10px}
.logo b{font-size:24px;font-weight:800;color:#2E211F;letter-spacing:-.5px}
.logo b i{font-style:normal;color:#EB6100}
.logo span{font-size:15px;font-weight:700;color:#2E211F}
.nav{display:flex;align-items:center;gap:4px 8px;font-size:16px;font-weight:700}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.nav a.on{color:var(--navy)}
.nav a.cta{padding:0 22px;margin-left:8px;border-radius:999px;background:var(--navy);color:#fff}
.header-m{display:none;align-items:center;gap:8px}
.header-m .cta{min-height:44px;padding:0 16px;font-size:14px}
.burger{width:44px;height:44px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.ph{background:linear-gradient(135deg,#CFE0FF,#F1F6FF);border:2px dashed #7FA4EC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;color:#1F3F85;font-size:13px;line-height:1.5}
.ph b{font-size:14px}
.ph svg{width:40px;height:40px}

.photo{display:block;width:100%;object-fit:cover}
.hero-photo{aspect-ratio:3/2;height:auto;border-radius:24px}
.banner-photo{flex:1 1 300px;min-width:0;height:auto;min-height:220px;max-height:340px;border-radius:18px}
.campus-side{flex:0 1 400px;min-width:0;max-width:400px;width:100%;display:flex;flex-direction:column;gap:14px;align-self:flex-start}
.campus-photo{width:100%;max-width:none;height:auto;min-height:0;max-height:none;aspect-ratio:1200/784;border-radius:18px}
.hero{max-width:1180px;margin:0 auto;padding:20px 24px 0}
.hero-box{border-radius:28px;background:linear-gradient(120deg,#EAF2FF 0%,#F7FAFF 55%,#DCE9FF 100%);padding:56px 48px 112px;display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.hero-txt{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero-txt .eyebrow{font-size:16px;font-weight:700;color:var(--blue)}
.hero-txt h1{font-size:52px;line-height:1.25;font-weight:800;color:var(--navy)}
.hero-txt .name{font-size:22px;line-height:1.5;font-weight:700}
.hero-txt .name small{font-size:17px;font-weight:500;color:var(--sub)}
.hero-txt .desc{font-size:17px;line-height:1.75;color:var(--sub);max-width:460px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.hero-btns .btn{min-height:52px;padding:0 30px;font-size:17px}
.hero-img{flex:1 1 440px;min-width:0}
.hero-img .ph{aspect-ratio:3/2;border-radius:24px;font-size:14px}
.hero-img .ph b{font-size:16px}

.core{margin:-64px 24px 0;position:relative;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(18,48,107,.14);display:grid;grid-template-columns:repeat(4,1fr)}
.core div{padding:24px 26px;display:flex;gap:16px;align-items:center}
.core svg{flex:none;width:44px;height:44px}
.core strong{display:block;font-size:17px;font-weight:800}
.core span{font-size:14px;color:var(--sub2)}

.sec{max-width:1180px;margin:0 auto;padding:72px 24px 0;display:flex;flex-direction:column;gap:28px}
.sec h2,.flow h2{font-size:32px;line-height:1.4;font-weight:800;color:var(--navy)}
.sec .lead{font-size:16px;color:var(--sub)}
.sec-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end}
.sec-head>div{display:flex;flex-direction:column;gap:8px}

.flow-wrap{max-width:1180px;margin:32px auto 0;padding:0 24px}
.flow{border-radius:24px;background:var(--sky2);padding:44px 48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.flow-l{flex:1 1 320px;display:flex;flex-direction:column;gap:14px}
.flow-l p{font-size:16px;line-height:1.75;color:var(--sub)}
.flow-l .btn{align-self:flex-start}
.steps{flex:2 1 520px;display:flex;flex-wrap:wrap;gap:20px 8px;justify-content:space-around}
.step{display:flex;flex-direction:column;align-items:center;gap:10px;width:132px;text-align:center}
.step i{font-style:normal;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(18,48,107,.12);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--blue)}
.step b{font-size:16px;font-weight:800}
.step span{font-size:13px;color:var(--sub2);line-height:1.5}

.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.course{min-width:0;border-radius:24px;background:linear-gradient(120deg,#EAF2FF,#F7FAFF);padding:32px;display:flex;flex-direction:column;gap:20px}
.course-t{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
.course-t .course-fee{font-size:20px;font-weight:800;color:var(--navy)}
.course-t .ttl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.course-t .ttl b{font-size:28px;font-weight:800;color:var(--navy)}
.course-t .ttl span{font-size:15px;font-weight:700;color:var(--sub2)}
.course-t p{font-size:15px;line-height:1.7;color:var(--sub)}
.course-t p.ph-txt{font-size:14px;color:var(--sub2)}
.course-t .btn{align-self:flex-start;font-size:14px;padding:0 20px}
.course .ph{flex:none;min-height:180px;border-radius:18px}

.memo{display:flex;flex-wrap:wrap;align-items:stretch;border-radius:24px;background:#fff;box-shadow:0 6px 22px rgba(18,48,107,.10);overflow:hidden}
.memo>img{flex:1 1 300px;min-width:0;max-width:440px;width:auto;height:auto;min-height:260px;object-fit:cover;display:block}
.memo-t{flex:2 1 420px;min-width:0;padding:32px 36px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.memo-t .tag{font-size:13px;font-weight:800;color:var(--navy);background:var(--yellow);border-radius:999px;padding:4px 12px}
.memo-t h3{margin:0;font-size:26px;font-weight:800;color:var(--navy)}
.memo-t p{font-size:15px;line-height:1.7;color:var(--sub)}
.memo-t .memo-for{font-weight:700;color:var(--text)}
.memo-t .memo-fee{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font-size:15px;color:var(--navy);background:#FFF6D6;border-radius:12px;padding:8px 14px;line-height:1.5}
.memo-t .memo-fee b{font-size:19px;font-weight:800;color:var(--navy)}
.memo-t .memo-fee small{font-size:12px;color:var(--sub2)}
.memo-steps{list-style:none;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.memo-steps li{background:var(--sky2);border-radius:14px;padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px}
.memo-steps i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
.memo-steps b{font-size:15px;font-weight:800;color:var(--navy)}
.memo-steps span{font-size:13px;line-height:1.55;color:var(--sub)}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(18,48,107,.10);overflow:hidden;display:flex;flex-direction:column}
.card .ph{aspect-ratio:16/10;border-width:0 0 2px;font-size:12px}
.card>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.course-photo{flex:none;width:100%;height:auto;aspect-ratio:16/10;border-radius:18px}
.card .ph b{font-size:13px}
.card-b{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.card-b strong{font-size:17px;font-weight:800;color:var(--navy)}
.card-b span{font-size:14px;line-height:1.6;color:var(--sub)}

.story{margin-top:80px;background:linear-gradient(180deg,#EAF2FF,#F7FAFF)}
.story .sec{padding:64px 24px}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{color:inherit}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.blog-card:hover{opacity:1;transform:translateY(-3px);box-shadow:0 10px 28px rgba(18,48,107,.16)}
.blog-card{transition:transform .2s,box-shadow .2s}
.story .card-b span{color:var(--blue);font-weight:700}
.story .card-b{gap:10px}
.story .card-b strong{font-size:16px;font-weight:700;line-height:1.6;color:var(--text)}
.story .card-b span{font-size:13px;color:var(--sub2)}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why div{background:var(--sky2);border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.why .ic{width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.why svg{width:34px;height:34px}
.why strong{font-size:17px;font-weight:800}
.why span{font-size:14px;line-height:1.6;color:var(--sub)}

.banner-wrap{max-width:1180px;margin:0 auto;padding:64px 24px 0}
.banner{border-radius:24px;background:linear-gradient(120deg,#0F2A5F,#1B4B9B);padding:44px 48px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;color:#fff}
.banner-t{flex:1 1 340px;display:flex;flex-direction:column;gap:16px}
.banner h2{font-size:30px;line-height:1.5;font-weight:800}
.banner h2 em{font-style:normal;color:var(--yellow)}
.banner p{font-size:16px;line-height:1.7;color:#DCE7FF}
.banner .btn{align-self:flex-start;min-height:48px;padding:0 26px;font-size:16px}
.banner .ph{flex:1 1 300px;min-height:220px;border-radius:18px;background:rgba(255,255,255,.12);border:2px dashed rgba(255,255,255,.7);color:#fff}

.campus{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.info{flex:1 1 360px;background:#fff;border-radius:20px;box-shadow:0 6px 22px rgba(18,48,107,.10);padding:32px;display:flex;flex-direction:column;gap:22px}
.info div{display:flex;flex-direction:column;gap:4px}
.info small{font-size:14px;font-weight:700;color:var(--blue)}
.info b{font-size:17px;font-weight:700;line-height:1.5}
.info span{font-size:14px;line-height:1.8;color:var(--sub2)}
.info a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:700;text-decoration:underline}
.campus .ph{flex:1.4 1 420px;min-height:300px;border-radius:20px}

.reserve{max-width:1180px;margin:0 auto;padding:56px 24px 72px}
.reserve-in{border-radius:20px;background:var(--navy-d);color:#fff;padding:32px 40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.reserve-in strong{display:block;font-size:22px;font-weight:800}
.reserve-in span{font-size:15px;line-height:1.7;color:#DCE7FF}
.reserve-in span b{color:var(--yellow)}
.reserve-btns{display:flex;flex-wrap:wrap;gap:12px}
.reserve-btns .btn{min-height:48px;padding:0 26px;font-size:16px}

.site-footer{background:var(--navy-d);color:#DCE7FF}
.footer-in{max-width:1180px;margin:0 auto;padding:36px 24px;display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.9}
.f-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px}
.f-brand{font-size:20px;font-weight:800;color:#fff}
.f-brand i{font-style:normal;color:#FF7A1A}
.f-info{display:flex;flex-direction:column;gap:2px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 20px;font-size:14px}
.footer-links a,.footer-legal a{display:inline-flex;align-items:center;min-height:44px}
.footer-legal{display:flex;flex-wrap:wrap;gap:0 20px;font-size:13px;margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16)}

.mbar{display:none}

@media (max-width:1000px){
  .cards4,.why{grid-template-columns:repeat(2,1fr)}
  .core{grid-template-columns:repeat(2,1fr)}
  .course-grid{grid-template-columns:minmax(0,1fr)}
  .course{flex-direction:row;flex-wrap:wrap}
  .course-t{flex:1 1 200px}
  .course .ph{flex:1 1 180px;min-height:200px}
  .course-photo{flex:1 1 180px;width:auto;min-width:0}
  .story-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  html{scroll-padding-top:68px}
  body{padding-bottom:68px}
  .header-in{padding:8px 16px;flex-wrap:wrap}
  .logo b{font-size:20px}
  .logo span{font-size:13px}
  .header-m{display:flex}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 12px;border-top:1px solid #E3EAF7}
  .nav.open{display:flex}
  .nav a{padding:0 8px;border-bottom:1px solid #EEF2FA}
  .nav a::after{display:none}
  .nav a.cta{display:none}
  .hero{padding:12px 16px 0}
  .hero-box{padding:28px 20px 84px;border-radius:20px;gap:24px}
  .hero-txt{gap:14px}
  .hero-txt .eyebrow{font-size:14px}
  .hero-txt h1{font-size:30px}
  .hero-txt .name{font-size:18px}
  .hero-txt .name small{font-size:15px}
  .hero-txt .desc{font-size:15px}
  .hero-btns .btn{flex:1 1 140px;min-height:48px;padding:0 16px;font-size:15px}
  .core{margin:-56px 16px 0}
  .core div{padding:16px 12px;gap:10px;flex-direction:column;text-align:center}
  .core svg{width:36px;height:36px}
  .core strong{font-size:14px}
  .core span{font-size:12px}
  .sec{padding:48px 16px 0;gap:20px}
  .sec h2,.flow h2{font-size:24px}
  .sec .lead{font-size:14px}
  .flow-wrap{padding:0 16px;margin-top:24px}
  .flow{padding:28px 20px;gap:20px}
  .steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .step{width:auto}
  .step i{width:64px;height:64px;font-size:22px}
  .course{padding:20px}
  .memo>img{flex:1 1 100%;max-width:none;min-height:0;aspect-ratio:4/3}
  .memo-t{padding:22px 20px}
  .memo-t h3{font-size:22px}
  .memo-steps{grid-template-columns:1fr}
  .course-t .ttl b{font-size:24px}
  .cards4,.why{gap:12px}
  .card-b{padding:12px 12px 16px}
  .card-b strong{font-size:15px}
  .card-b span{font-size:12px}
  .why div{padding:20px 10px}
  .why .ic{width:56px;height:56px}
  .why strong{font-size:15px}
  .why span{font-size:12px}
  .story{margin-top:48px}
  .story .sec{padding:40px 16px}
  .story-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 8px;-webkit-overflow-scrolling:touch}
  .story-grid .card{flex:0 0 78%;scroll-snap-align:start}
  .banner-wrap{padding:40px 16px 0}
  .banner{padding:28px 20px}
  .banner h2{font-size:22px}
  .info{padding:22px}
  .campus .ph{min-height:200px}
  .reserve{padding:40px 16px 48px}
  .reserve-in{padding:24px 20px}
  .reserve-btns{width:100%}
  .reserve-btns .btn{flex:1 1 100%}
  .footer-in{padding:28px 16px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;box-shadow:0 -2px 14px rgba(18,48,107,.18);padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .mbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:800;font-size:16px}
  .mbar .m1{background:var(--yellow);color:var(--navy)}
  .mbar .m2{background:var(--navy);color:#fff}
}