:root{
  --navy:#10243e;
  --navy-soft:#173654;
  --blue:#246bfd;
  --cyan:#20c7d9;
  --bg:#f4f7fb;
  --white:#fff;
  --text:#152238;
  --muted:#607089;
  --line:#dce5f0;
  --pale:#eaf2ff;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

.site-head{
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.head-inner{
  width:min(1180px,calc(100% - 40px));
  min-height:78px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}

.brand-mark{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  font-size:22px;
  font-weight:900;
}

.brand-copy strong,
.brand-copy small{display:block}

.brand-copy strong{font-size:16px}

.brand-copy small{
  margin-top:2px;
  color:#9eb6d1;
  font-size:9px;
  letter-spacing:.12em;
}

.head-course{
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  padding:10px 15px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.head-course:hover{background:rgba(255,255,255,.08)}

.hero{
  background:
    radial-gradient(circle at 85% 20%,rgba(32,199,217,.15),transparent 30%),
    radial-gradient(circle at 10% 100%,rgba(36,107,253,.20),transparent 35%),
    var(--navy);
  color:#fff;
  overflow:hidden;
}

.hero-inner{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  padding:82px 0;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
}

.eyebrow{
  margin:0 0 14px;
  color:var(--cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
}

.eyebrow.blue{color:var(--blue)}

.eyebrow.light{color:#75e3eb}

.hero h1{
  margin:0;
  font-size:clamp(46px,6vw,76px);
  line-height:1.08;
  letter-spacing:-.055em;
}

.hero h1 em{
  color:#7fdfe7;
  font-style:normal;
}

.hero-description{
  width:min(650px,100%);
  margin:26px 0 0;
  color:#c6d5e5;
  font-size:17px;
  line-height:1.9;
  word-break:keep-all;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.hero-tags span{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#d9e6f3;
  font-size:12px;
  font-weight:700;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
}

.primary-cta,
.secondary-cta{
  min-height:50px;
  border-radius:12px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-weight:900;
}

.primary-cta{
  background:var(--blue);
  color:#fff;
  box-shadow:0 12px 32px rgba(36,107,253,.28);
}

.primary-cta span{
  font-size:20px;
  transition:transform .2s ease;
}

.primary-cta:hover span{transform:translateX(4px)}

.secondary-cta{
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
}

.secondary-cta:hover{background:rgba(255,255,255,.07)}

.hero-board{
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
}

.board-label{
  display:block;
  margin-bottom:16px;
  color:#76e1e9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
}

.board-row{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.board-row:last-child{border-bottom:0}

.board-row>b{
  color:#62d5df;
  font-size:15px;
}

.board-row strong,
.board-row span{display:block}

.board-row strong{
  font-size:16px;
  color:#fff;
}

.board-row span{
  margin-top:3px;
  color:#9fb5cb;
  font-size:12px;
}

.section-inner{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
}

.lesson-section{
  padding:86px 0 94px;
  background:#fff;
}

.section-head{
  margin-bottom:32px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
}

.section-head h2,
.how-title h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(30px,4vw,44px);
  letter-spacing:-.04em;
}

.section-head p{
  margin:10px 0 0;
  color:var(--muted);
}

.open-count{text-align:right}

.open-count strong{
  display:block;
  color:var(--blue);
  font-size:48px;
  line-height:1;
}

.open-count span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.lesson-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.lesson-card{
  min-height:300px;
  padding:23px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(23,54,84,.05);
  transition:.2s ease;
}

a.lesson-card:hover{
  transform:translateY(-5px);
  border-color:#a7c4ff;
  box-shadow:0 18px 40px rgba(23,54,84,.1);
}

.lesson-card.featured{
  background:linear-gradient(145deg,#10243e,#173654);
  border-color:transparent;
  color:#fff;
}

.card-top,
.card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.lesson-no{
  font-size:32px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--blue);
}

.featured .lesson-no{color:#66dbe4}

.status{
  padding:5px 8px;
  border-radius:6px;
  background:var(--pale);
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.featured .status{
  background:rgba(255,255,255,.1);
  color:#76e0e8;
}

.status.coming{
  background:#edf0f4;
  color:#798596;
}

.card-body{
  flex:1;
  margin-top:30px;
}

.subject{
  display:block;
  margin-bottom:8px;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}

.featured .subject{color:#76e0e8}

.card-body h3{
  margin:0;
  font-size:21px;
  line-height:1.4;
  letter-spacing:-.035em;
  word-break:keep-all;
}

.card-body p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
  word-break:keep-all;
}

.featured .card-body p{color:#b5c6d8}

.card-foot{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
}

.featured .card-foot{
  border-color:rgba(255,255,255,.1);
  color:#a9bdd2;
}

.card-foot strong{
  color:var(--navy);
  font-size:12px;
}

.featured .card-foot strong{color:#fff}

.upcoming{
  background:#f6f8fb;
  border-style:dashed;
}

.upcoming .lesson-no{color:#9da8b5}

.upcoming .card-foot strong{color:#8c97a5}

.how-section{
  padding:82px 0;
  background:var(--bg);
}

.how-title{
  margin-bottom:30px;
  text-align:center;
}

.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.how-grid article{
  min-height:180px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.how-grid span{
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}

.how-grid b{
  display:block;
  margin-top:20px;
  color:var(--navy);
  font-size:18px;
}

.how-grid p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:13px;
}

.future-section{
  padding:82px 0;
  background:var(--navy);
  color:#fff;
}

.future-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.future-inner h2{
  margin:0;
  font-size:clamp(31px,4vw,46px);
  line-height:1.25;
  letter-spacing:-.045em;
}

.future-inner>div>p:not(.eyebrow){
  color:#a9bfd5;
  line-height:1.85;
}

.roadmap{
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}

.roadmap-current,
.roadmap-future{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.roadmap strong{
  font-size:29px;
  letter-spacing:-.04em;
}

.roadmap span{
  color:#9fb7ce;
  font-size:12px;
}

.road-line{
  height:5px;
  margin:23px 0;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

.road-line i{
  display:block;
  width:23%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.seo-section{
  padding:72px 0;
  background:#fff;
}

.seo-inner{
  max-width:900px;
}

.seo-inner h2{
  margin:0;
  color:var(--navy);
  font-size:29px;
  letter-spacing:-.035em;
}

.seo-inner p{
  margin:15px 0 0;
  color:var(--muted);
  line-height:1.9;
}

.seo-inner a{
  display:inline-block;
  margin-top:20px;
  color:var(--blue);
  font-weight:900;
}

.site-footer{
  padding:28px 20px;
  background:#0b1c30;
  color:#fff;
  text-align:center;
}

.site-footer strong,
.site-footer span{display:block}

.site-footer strong{font-size:14px}

.site-footer span{
  margin-top:4px;
  color:#7894af;
  font-size:11px;
}

@media(max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:38px;
    padding:62px 0;
  }

  .lesson-grid{grid-template-columns:repeat(2,1fr)}

  .how-grid{grid-template-columns:repeat(2,1fr)}

  .future-inner{
    grid-template-columns:1fr;
    gap:35px;
  }
}

@media(max-width:620px){
  .head-inner{
    width:min(100% - 24px,1180px);
  }

  .brand-copy small{display:none}

  .head-course{
    padding:8px 10px;
    font-size:11px;
  }

  .hero-inner,
  .section-inner{
    width:min(100% - 28px,1180px);
  }

  .hero-inner{padding:48px 0}

  .hero h1{font-size:44px}

  .hero-description{font-size:15px}

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .primary-cta,
  .secondary-cta{width:100%}

  .lesson-section,
  .how-section,
  .future-section,
  .seo-section{
    padding-top:60px;
    padding-bottom:60px;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .open-count{text-align:left}

  .lesson-grid{grid-template-columns:1fr}

  .lesson-card{min-height:270px}

  .how-grid{grid-template-columns:1fr 1fr}

  .how-grid article{
    min-height:155px;
    padding:18px;
  }

  .roadmap{padding:20px}
}

@media(max-width:430px){
  .how-grid{grid-template-columns:1fr}

  .hero-board{padding:22px}

  .brand-mark{
    width:36px;
    height:36px;
  }

  .brand-copy strong{font-size:14px}
}