/* 키플러스 — 디자인 시스템
   참고한 것: 보라 그라데이션 히어로 + 세리프 2줄 제목 + 아주 옅은 라벤더 지면에
   흰 소프트 카드. 절마다 위에 작은 보라 라벨을 얹는다.

   한글에는 세리프 기울임체가 없다. 참고 이미지는 둘째 줄을 기울여 구분하는데,
   가짜 기울임(skew)은 자소가 무너진다. 그래서 둘째 줄은 색을 옅게 해서 같은
   역할을 하게 했다.

   지어내지 않는 것 — 참고 이미지에는 있지만 우리에겐 근거가 없는 것들
     · 평점·후기 수 (4.9 / 12K+ reviews)
     · 고객사 로고 줄
     · 이용자 후기 카드
     · 누적 숫자 (10,000+ 같은 것)
     · 요금표 — 금액이 확정되지 않았다
   대신 확인된 사실(1:1·하루 20분·강사 고정·전화화상 전환·첨삭 포함)로 채운다. */

:root{
  --v-deep:#1c0940;
  --v-mid:#4c1d95;
  --v-base:#6d28d9;
  --v-lite:#8b5cf6;
  --v-glow:#a78bfa;
  --v-soft:#f3efff;

  --page:#fbfaff;        /* 아주 옅은 라벤더 흰색 */
  --card:#ffffff;
  --ink:#171331;         /* 제목 — 남보라 기운의 먹 */
  --ink-2:#5b5677;       /* 제목 둘째 줄 */
  --body:#4e4a66;
  --muted:#817ca0;
  --line:#ecebf6;
  --line-soft:#f4f3fa;

  --wrap:1120px;
  --read:800px;
  /* 제목용 — 굵은 산세리프. 한글 명조는 교과서처럼 읽혀서 뺐다.
     본문과 같은 가족이라 웹폰트를 하나 더 받지 않는다. */
  --display:"Pretendard","Pretendard Variable",-apple-system,system-ui,sans-serif;
  --r:18px;
  --r-sm:12px;
  --shadow:0 1px 2px rgba(23,19,49,.03), 0 10px 30px -16px rgba(23,19,49,.14);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--page);color:var(--body);
  font-size:16px;line-height:1.75;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.i{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
   width:20px;height:20px;display:block;flex:none}

/* ══ 위쪽 보라 판 ═══════════════════════════ */
.top{
  position:relative;isolation:isolate;color:#fff;
  background:radial-gradient(120% 88% at 50% -14%, #8b5cf6 0%, #6d28d9 30%, #4c1d95 58%, var(--v-deep) 100%);
}
.top::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 36% at 50% 0%, rgba(255,255,255,.32), transparent 72%);
}
/* 그라데이션에 띠가 지는 걸 덮는 아주 옅은 결 */
.top::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ 머리글 ═══════════════════════════════ */
.nav{position:relative;z-index:10}
.nav .in{max-width:var(--wrap);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:10px;min-height:74px}
.brand{font-weight:800;font-size:17.5px;color:#fff;letter-spacing:-.03em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px}
.brand .mark{width:22px;height:22px;flex:none;color:var(--v-glow)}
/* 메뉴와 신청 단추를 오른쪽에 붙여 둔다. flex:1 로 밀어내면 단추만 멀리 떨어져
   혼자 떠 있는 것처럼 보인다. */
.nav-links{display:flex;gap:2px;margin-left:auto;margin-right:14px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.74);
  padding:9px 14px;border-radius:999px;white-space:nowrap;transition:.15s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.11)}
@media(max-width:820px){
  .nav .in{padding:0 16px;min-height:60px}
  .nav .in>.btn{display:none}
  .nav-links{margin-left:12px;margin-right:0;flex:1}
  .nav-links a{padding:8px 10px;font-size:14px}
  .brand{font-size:16px}
}

/* ══ 단추 ═══════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;
  border-radius:999px;padding:11px 22px;transition:.16s;white-space:nowrap}
.btn-glass{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-primary,.btn-dark{background:var(--v-base);color:#fff;
  box-shadow:0 10px 24px -10px rgba(109,40,217,.62)}
.btn-primary:hover,.btn-dark:hover{background:#5b21b6}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--v-base);color:var(--v-base)}
.btn-lg{padding:15px 32px;font-size:16px}
.btn:active{transform:translateY(1px)}
.btn .i{width:17px;height:17px;stroke-width:2}

/* ══ 표제 ═══════════════════════════════════ */
.hero{padding:52px 0 62px;text-align:center}
.hero h1{font-family:var(--display);font-size:clamp(34px,5.6vw,64px);line-height:1.2;
  font-weight:800;color:#fff;letter-spacing:-.045em;margin-bottom:22px}
.hero h1 .alt{display:block;color:#cbb8ff}
.hero p{font-size:clamp(15.5px,1.7vw,17.5px);color:rgba(255,255,255,.75);
  max-width:600px;margin:0 auto;line-height:1.74}
.hero .btns{display:flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* 표제 위 작은 줄 — 지어낸 평점 대신 확인된 사실만 */
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  padding:7px 17px;border-radius:999px;font-size:13.2px;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.eyebrow em{font-style:normal;color:var(--v-glow);font-weight:600}
.eyebrow s{opacity:.34;text-decoration:none}

/* 안쪽 페이지 표제 */
.top.slim .hero{padding:10px 0 54px;text-align:left}
.top.slim .hero h1{font-size:clamp(27px,4vw,44px);margin-bottom:0;line-height:1.32}

/* ══ 떠 있는 화면 ═══════════════════════════ */
.stage .frame{margin:0 auto;max-width:960px;transform:translateY(64px)}
.stage-pad{height:64px}
.frame{background:#191338;border-radius:20px;padding:12px;
  box-shadow:0 44px 90px -34px rgba(20,9,50,.72), 0 0 0 1px rgba(255,255,255,.08)}
.frame-in{background:#fff;border-radius:11px;overflow:hidden;color:var(--body)}
@media(max-width:760px){.stage .frame{transform:translateY(40px)}.stage-pad{height:40px}}

/* 화면 안 — 우리 수업 기록을 본뜬 그림 */
.mock{display:grid;grid-template-columns:200px 1fr;min-height:396px;font-size:13px}
.mock .rail{background:#fafaff;border-right:1px solid var(--line);padding:16px 14px}
.mock .rail h4{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.09em;
  margin:0 0 11px;text-transform:uppercase}
.mock .rail .row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  color:var(--body);margin-bottom:2px}
.mock .rail .row.on{background:#fff;box-shadow:var(--shadow);color:var(--ink);font-weight:600}
.mock .rail .dot{width:7px;height:7px;border-radius:50%;background:var(--v-lite);flex:none}
.mock .rail .dot.g{background:#d7d3e8}
.mock .body{padding:20px 24px}
.mock .head{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.mock .head b{font-size:15.5px;color:var(--ink);letter-spacing:-.02em}
.mock .head span{font-size:12.5px;color:var(--muted)}
.mock .fix{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.mock .fix .was{color:#a9a5bd;text-decoration:line-through;text-decoration-color:#e6b6b6}
.mock .fix .now{color:var(--ink);font-weight:600;margin-top:4px}
.mock .fix .why{color:var(--muted);font-size:12.2px;margin-top:4px}
.mock .memo{margin-top:16px;background:var(--v-soft);border-radius:12px;padding:14px 16px;
  color:#4b3d7a;line-height:1.7}
.mock .memo b{display:block;color:var(--v-mid);font-size:11.5px;letter-spacing:.06em;margin-bottom:5px}
.mock .tagline{margin-top:13px;font-size:11.5px;color:var(--muted)}
@media(max-width:760px){.mock{grid-template-columns:1fr;min-height:0}.mock .rail{display:none}}

/* ══ 절 ═════════════════════════════════════ */
section{padding:76px 0}
.band-soft{background:#f6f4ff}
.band-white{background:var(--card)}

/* 절 머리 — 작은 보라 라벨 + 세리프 두 줄 */
.lbl{font-size:11.8px;font-weight:800;letter-spacing:.16em;color:var(--v-base);
  text-transform:uppercase;margin-bottom:14px}
.sec-head{margin-bottom:40px;text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.sec-head h2{font-family:var(--display);font-size:clamp(26px,3.7vw,42px);font-weight:800;
  color:var(--ink);letter-spacing:-.04em;line-height:1.3}
.sec-head h2 .alt{display:block;color:var(--ink-2)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:16.2px;line-height:1.7}
.sec-head.left{text-align:left;margin-left:0}

/* ══ 확인된 사실 줄 ═════════════════════════
   참고 이미지의 고객사 로고 줄 자리. 없는 고객사를 그리지 않는다. */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:920px;margin:0 auto}
.chips span{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);font-weight:500}
.chips .i{width:17px;height:17px;color:var(--v-base)}

/* ══ 카드 ═══════════════════════════════════ */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g3,.g2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 28px;box-shadow:var(--shadow);transition:.18s;position:relative}
a.card:hover{border-color:rgba(109,40,217,.34);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(23,19,49,.04), 0 18px 40px -18px rgba(23,19,49,.2)}
.card .no{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--v-base);
  display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}
.card h3{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.025em;
  margin-bottom:9px;transition:color .18s}
.card p{font-size:14.9px;color:var(--body);line-height:1.72}
a.card:hover h3{color:var(--v-base)}
/* 카드 안 얇은 선 아이콘. 3D 그림이나 이모지는 쓰지 않는다 */
.card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--v-soft);color:var(--v-base);margin-bottom:16px}
.card .ic .i{width:21px;height:21px}

/* ══ 본문 옆 주석단 ═════════════════════════ */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:0 48px;align-items:start}
/* 1fr 은 최소폭이 콘텐츠 크기라 안에 500px 표가 들어오면 칸이 벌어져
   화면 밖으로 밀린다. minmax(0,1fr) 로 눌러야 .table-scroll 이 제 몫을 한다. */
@media(max-width:900px){.sheet{grid-template-columns:minmax(0,1fr)}}
.note{font-size:14px;line-height:1.72;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.note b{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-bottom:7px;line-height:1.5}
.note a{color:var(--v-base)}
@media(max-width:900px){.note{margin:8px 0 28px}}

.lesson{padding:50px 0;border-top:1px solid var(--line)}
.lesson:first-of-type{border-top:0;padding-top:8px}
.lesson-no{font-size:11.8px;font-weight:800;color:var(--v-base);letter-spacing:.16em;
  margin-bottom:12px;font-variant-numeric:tabular-nums}
.lesson h2{font-family:var(--display);font-size:clamp(23px,3.2vw,32px);font-weight:800;
  color:var(--ink);letter-spacing:-.035em;line-height:1.36;margin-bottom:16px}
.lesson p{font-size:16.5px;line-height:1.84;margin-bottom:14px;max-width:720px}
.lesson p:last-child{margin-bottom:0}

/* ══ 차례 ═══════════════════════════════════ */
.toc{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.toc li{border-bottom:1px solid var(--line-soft)}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;align-items:baseline;gap:16px;padding:17px 22px;transition:background .15s}
.toc a:hover{background:var(--v-soft)}
.toc .no{font-size:11.8px;color:var(--v-base);font-weight:800;letter-spacing:.12em;
  flex:none;width:26px;font-variant-numeric:tabular-nums}
.toc .t{font-weight:600;color:var(--ink);font-size:16.5px}
.toc a:hover .t{color:var(--v-base)}
.toc .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:20px}
.toc .m{font-size:14px;color:var(--muted);flex:none}
@media(max-width:640px){.toc .dots,.toc .m{display:none}.toc a{padding:14px 18px}}

/* ══ 색인 ═══════════════════════════════════ */
.idx{columns:5;column-gap:26px;list-style:none;margin:0;padding:0}
.idx li{break-inside:avoid;border-bottom:1px solid var(--line)}
.idx a{display:flex;align-items:baseline;gap:8px;padding:10px 0;font-size:15px;color:var(--ink)}
.idx a:hover{color:var(--v-base)}
.idx .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:8px}
.idx .m{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:1000px){.idx{columns:3}}
@media(max-width:640px){.idx{columns:2}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,4vw,38px);box-shadow:var(--shadow)}

/* ══ 본문(글) ═══════════════════════════════ */
.article{max-width:var(--read);padding-top:46px}
.article h2{font-family:var(--display);font-size:clamp(23px,3vw,30px);font-weight:800;
  color:var(--ink);letter-spacing:-.035em;margin:46px 0 14px;line-height:1.36}
.article h2:first-child{margin-top:0}
.article h3{font-size:18.5px;font-weight:800;color:var(--ink);margin:28px 0 10px}
.article p{margin-bottom:16px;font-size:16.5px;line-height:1.84}
.article ul,.article ol{margin:0 0 20px;padding:0;list-style:none}
.article li{line-height:1.72;padding:11px 0 11px 26px;position:relative;font-size:16px;
  border-bottom:1px solid var(--line)}
.article li:last-child{border-bottom:0}
.article li::before{content:"";position:absolute;left:0;top:19px;width:13px;height:2px;
  border-radius:2px;background:var(--v-base)}
.article ol{counter-reset:ol}
.article ol li{counter-increment:ol;padding-left:34px}
.article ol li::before{content:counter(ol,decimal-leading-zero);background:none;
  font-size:12.5px;font-weight:800;color:var(--v-base);top:11px;width:auto;height:auto;letter-spacing:.06em}
.article strong,.article b{color:var(--ink);font-weight:800}
.article a{color:var(--v-base);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(109,40,217,.28)}
.article a:hover{text-decoration-color:var(--v-base)}
.lead{font-size:18px;color:var(--ink);line-height:1.8}

.pubdate{font-size:14px;color:var(--muted);margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.postlist{list-style:none;margin:0;padding:0}
.postlist li{margin:0;padding:20px 0;border-bottom:1px solid var(--line);line-height:1.6}
.postlist li:last-child{border-bottom:0}
.postlist a{color:var(--ink);font-weight:800;font-size:17.5px;letter-spacing:-.02em}
.postlist a:hover{color:var(--v-base)}
.postlist .d{display:block;font-size:13.5px;color:var(--muted);font-weight:400;margin-top:5px}
.postlist .s{display:block;font-size:15px;color:var(--body);font-weight:400;margin-top:7px}

/* ══ 인포그래픽 ═════════════════════════════
   히어로의 수업 화면과 같은 말투로 그린다. 사람 웃는 스톡 사진 대신 이걸 쓴다.
   숫자는 본문 표와 같은 자료에서 뽑는다. 그림과 표가 어긋나면 둘 다 못 믿는다. */
.viz{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px 24px;margin:28px 0}
.viz .cap{font-size:11.8px;font-weight:800;letter-spacing:.14em;color:var(--v-base);
  text-transform:uppercase;margin:0 0 18px}
.viz .foot{margin:16px 0 0;font-size:12.8px;color:var(--muted);line-height:1.65}

/* 막대 — 수업 시간 중 내 차례가 차지하는 비율 */
.bars{display:grid;gap:13px}
.bar{display:grid;grid-template-columns:150px 1fr 52px;gap:13px;align-items:center;font-size:14px}
.bar .who{color:var(--body);line-height:1.4}
/* span 은 인라인이라 width·height 가 안 먹는다. 블록으로 만들어야 막대가 그려진다 */
.bar .track{display:block;background:var(--line-soft);border-radius:999px;height:26px;overflow:hidden}
/* 폭은 --w 로 받아서 0에서 자라게 한다. 눈으로 따라가면 차이가 바로 읽힌다 */
.bar .fill{display:block;height:100%;width:var(--w,0);border-radius:999px;
  background:linear-gradient(90deg,#cdbcff,#a78bfa);
  animation:grow 1s cubic-bezier(.2,.8,.3,1) both}
.bar:nth-child(2) .fill{animation-delay:.08s}
.bar:nth-child(3) .fill{animation-delay:.16s}
.bar:nth-child(4) .fill{animation-delay:.24s}
@keyframes grow{from{width:0}}
.bar .val{text-align:right;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.bar.on .fill{background:linear-gradient(90deg,#8b5cf6,#5b21b6);
  box-shadow:0 6px 16px -8px rgba(109,40,217,.8)}
.bar.on .who,.bar.on .val{color:var(--ink)}
.bar.on .who{font-weight:800}
.bar.on .track{background:#efeaff}
@media(max-width:600px){.bar{grid-template-columns:104px 1fr 44px;gap:9px;font-size:13px}}


/* 단계 흐름 */
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.steps .st{padding:0 16px 0 0}
.steps .st+.st{padding-left:18px;border-left:1px solid var(--line)}
.steps .n{width:27px;height:27px;border-radius:50%;background:var(--v-soft);color:var(--v-base);
  font-size:12px;font-weight:800;display:grid;place-items:center;margin-bottom:11px;
  font-variant-numeric:tabular-nums}
.steps .st h5{font-size:15.5px;color:var(--ink);font-weight:700;margin:0 0 5px}
.steps .st p{font-size:13.6px;color:var(--muted);line-height:1.62;margin:0}
@media(max-width:760px){
  .steps{grid-template-columns:1fr;gap:16px}
  .steps .st{padding:0}
  .steps .st+.st{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:16px}
}

/* 강사가 직접 써 준 피드백 — 이게 다른 학습과 갈리는 지점이라 카드로 세운다 */
.fb{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.fb .who{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line-soft);
  background:#fcfbff}
.fb .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#a78bfa,#6d28d9);color:#fff;font-weight:800;font-size:13.5px}
.fb .who b{font-size:14.5px;color:var(--ink);display:block;line-height:1.3}
.fb .who span{font-size:12.4px;color:var(--muted)}
.fb .msg{padding:18px;font-size:15px;line-height:1.8;color:var(--ink)}
/* 강사가 손으로 적어 넣은 자리라는 걸 왼쪽 선으로 표시한다 */
.fb .msg em{font-style:normal;display:block;border-left:3px solid var(--v-glow);
  padding-left:14px;color:var(--body)}
.fb .todo{border-top:1px solid var(--line-soft);padding:14px 18px;background:#fcfbff}
.fb .todo b{display:block;font-size:11.6px;letter-spacing:.1em;color:var(--v-base);
  font-weight:800;margin-bottom:9px;text-transform:uppercase}
.fb .todo div{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--body);
  padding:3px 0;line-height:1.6}
.fb .todo .i{width:16px;height:16px;color:var(--v-base);margin-top:4px}

/* 세 갈래 비교 — 글자 덩어리가 아니라 한눈에 어디가 우리인지 보이게 한다.
   남는 게 없는 쪽은 ✕, 우리 쪽은 ✓ 를 크게 얹고 바탕색으로 갈랐다. */
.after{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.after .col{border:1px solid var(--line);border-radius:14px;padding:20px 18px 22px;
  background:#fcfcfe;position:relative}
.after .col.on{background:linear-gradient(160deg,#f6f1ff,#efe7ff);
  border-color:rgba(109,40,217,.34);box-shadow:0 10px 26px -14px rgba(109,40,217,.5)}
.after .mk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:800;line-height:1;margin-bottom:13px;
  background:#eeecf4;color:#a7a1bb}
.after .col.on .mk{background:var(--v-base);color:#fff}
.after h5{font-size:13.6px;color:var(--muted);font-weight:700;margin:0 0 10px;
  letter-spacing:.01em}
.after .col.on h5{color:var(--v-base)}
.after .keep{font-size:19px;color:#8b86a3;font-weight:800;line-height:1.35;margin:0 0 8px;
  letter-spacing:-.03em}
.after .col.on .keep{color:var(--v-mid);font-size:20px}
.after .col p{font-size:13.6px;color:var(--muted);line-height:1.66;margin:0}
.after .col.on p{color:#584b86}
@media(max-width:760px){.after{grid-template-columns:1fr}}

/* ══ 영어 공부하기 (게시판) ══════════════════ */
/* 글 목록 — 카드 두 단. 제목이 길어도 카드 높이가 어긋나지 않게 세로로 쌓는다. */
.plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 28px}
@media(max-width:760px){.plist{grid-template-columns:minmax(0,1fr)}}
.pcard{display:flex;flex-direction:column;gap:8px;padding:22px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--v-glow);transform:translateY(-2px)}
.pcard .cat{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--v-base);background:var(--v-soft);padding:4px 10px;border-radius:999px}
.pcard h3{font-family:var(--display);font-size:18px;font-weight:800;line-height:1.45;
  color:var(--ink);margin:0;letter-spacing:-.02em}
.pcard p{font-size:14.2px;line-height:1.7;color:var(--muted);margin:0}
.pcard .date{margin-top:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 틀린 문장 대조 — 히어로 목업의 교정 화면과 같은 말투 */
.corr{margin:24px 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);overflow:hidden}
.corr .c-row{padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.corr .c-row:last-child{border-bottom:none}
.corr .was{color:#a9a5bd;text-decoration:line-through;text-decoration-color:#e6b6b6;
  margin:0;font-size:15.5px;line-height:1.6}
.corr .now{color:var(--ink);font-weight:700;margin:5px 0 0;font-size:15.8px;line-height:1.6}
.corr .why{color:var(--muted);font-size:13.4px;margin:7px 0 0;line-height:1.65}

/* 우리가 센 숫자 — 자료 상자.
   눈에 띄어야 하는 것은 장식이 아니라 건수다. 그래서 숫자만 키우고
   색 막대·그라데이션·배지는 쓰지 않는다. 신문 기사에 붙는 통계 상자에 가깝게. */
.evid{margin:28px 0;padding:20px 22px 18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}
.evid-h{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.evid-n{display:flex;gap:28px;flex-wrap:wrap;padding:14px 0 12px}
.evid-n>div{display:flex;flex-direction:column;gap:2px}
.evid-n b{font-family:var(--display);font-size:27px;font-weight:800;color:var(--ink);
  line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.evid-n span{font-size:12.4px;color:var(--muted)}
/* 여러 항목을 한 상자에 묶을 때 — 걸린 자리 / 건수 / 비율 세 칸 */
.evid-list{padding:12px 0 10px}
.evid-list>div{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-soft)}
.evid-list>div:last-child{border-bottom:none}
.evid-list .w{flex:1;min-width:0;font-size:14.4px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evid-list b{font-family:var(--display);font-size:17px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.evid-list .p{font-size:12.4px;color:var(--muted);min-width:44px;text-align:right;
  font-variant-numeric:tabular-nums}
.evid p{margin:0;font-size:14.8px;line-height:1.78;color:var(--body)}
.evid strong{color:var(--ink);font-weight:700}
.evid i{font-style:normal;color:var(--ink);border-bottom:1px solid var(--line)}
.evid .src{margin-top:9px;font-size:12.4px;color:var(--muted);line-height:1.6}
@media(max-width:520px){.evid-n{gap:20px}.evid-n b{font-size:23px}}

/* 한 줄 정리 */
.sumbox{margin:28px 0;padding:20px 22px;border-radius:var(--r);
  background:var(--v-soft);border:1px solid #e3daff;font-size:16px;
  line-height:1.75;color:var(--ink)}
.sumbox b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--v-base);margin-bottom:6px}

/* 이전·다음 글 */
.pnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0}
@media(max-width:640px){.pnav{grid-template-columns:minmax(0,1fr)}}
.pnav a{display:block;padding:16px 18px;text-decoration:none;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);
  font-weight:600;font-size:15px;line-height:1.5}
.pnav a:hover{border-color:var(--v-glow)}
.pnav a span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.pnav .nx{text-align:right}

/* ══ 사진 ═══════════════════════════════════
   본문 중간에 한 장씩 들어간다. 비율을 여기서 고정하지 않는다.
   HTML에 박아 둔 width·height(실측값)로 브라우저가 자리를 미리 잡으므로
   로딩 중에 글이 밀리지 않는다. 여기서 비율을 못 박으면 실제와 어긋나 잘린다. */
.ph{margin:28px 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--card)}
.ph img{display:block;width:100%;height:auto}
.ph figcaption{padding:10px 16px;font-size:12.8px;color:var(--muted);
  background:var(--card);border-top:1px solid var(--line-soft)}
.ph figcaption a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ph figcaption a:hover{color:var(--v-base)}

/* ══ 표 ═════════════════════════════════════ */
.table-scroll{overflow-x:auto;margin:24px 0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:500px;font-size:15.2px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-soft)}
thead th{background:#faf9ff;font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.02em}
tbody tr:last-child td{border-bottom:none}
td{font-variant-numeric:tabular-nums}
td.hl{color:var(--ink);font-weight:600}
/* 우리 줄 — 표에서 어느 게 키플러스인지 바로 보이게 한다 */
tbody tr.ours td{background:var(--v-soft);color:var(--ink);font-weight:600}
tbody tr.ours td.hl{color:var(--v-base);font-weight:800}

/* ══ 자주 묻는 것 ═══════════════════════════
   참고 이미지처럼 두 단으로 놓고 + 기호를 왼쪽에 둔다. */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:820px){.faq{grid-template-columns:1fr}}
/* 글 안쪽은 폭이 800px이라 두 단으로 쪼개면 답이 잘게 끊긴다. 한 단으로 둔다. */
.article .faq{grid-template-columns:1fr}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;transition:border-color .15s}
.faq details[open]{border-color:rgba(109,40,217,.32);box-shadow:var(--shadow)}
.faq summary{padding:17px 20px 17px 48px;font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;font-size:15.6px;position:relative;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;left:20px;top:16px;color:var(--v-base);
  font-weight:400;font-size:19px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 20px 19px 48px;color:var(--body);font-size:15.2px;line-height:1.78}

/* ══ 신청 블록 ══════════════════════════════ */
.rec{border-radius:24px;padding:clamp(30px,4.6vw,56px);margin-top:64px;color:#fff;
  position:relative;overflow:hidden;
  background:radial-gradient(120% 150% at 10% -25%, #8b5cf6 0%, #6d28d9 34%, #4c1d95 68%, var(--v-deep) 100%);
  box-shadow:0 26px 64px -30px rgba(76,29,149,.7)}
/* 오른쪽 위 옅은 격자 — 참고 이미지의 그 자리 */
.rec::after{content:"";position:absolute;right:-40px;top:-40px;width:320px;height:320px;
  pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.rec>*{position:relative;z-index:1}
.rec h2{font-family:var(--display);font-size:clamp(25px,3.4vw,36px);font-weight:800;
  letter-spacing:-.04em;color:#fff;margin-bottom:14px;line-height:1.3}
.rec h2 .alt{display:block;color:#cbb8ff}
.rec p{color:rgba(255,255,255,.78);font-size:16.2px;line-height:1.78;margin-bottom:10px;max-width:620px}
.rec .btns{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.rec .btn-dark,.rec .btn-primary{background:#fff;color:var(--v-mid);box-shadow:none}
.rec .btn-dark:hover,.rec .btn-primary:hover{background:#f1ebff}

/* ══ 꼬리말 ═════════════════════════════════ */
footer{margin-top:78px;padding:0 0 56px;color:var(--muted);font-size:14.2px}
footer .sheetbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:36px 34px 30px;box-shadow:var(--shadow)}
footer .cols{display:flex;gap:56px;flex-wrap:wrap;margin-bottom:28px}
footer h4{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:12px;min-width:118px}
footer a{display:block;padding:4px 0;color:var(--muted)}
footer a:hover{color:var(--v-base)}
footer .legal{border-top:1px solid var(--line);padding-top:22px;line-height:1.85;font-size:13.2px}
footer .legal a{display:inline}
.wordmark{margin-top:22px;font-size:12.5px;letter-spacing:.26em;color:var(--muted);
  opacity:.7;text-transform:uppercase;user-select:none}

/* 이동 경로 — 보라 판 위에 얹힌다 */
.crumb{font-size:13px;color:rgba(255,255,255,.6);padding:20px 0 0}
.crumb a:hover{color:#fff}
.crumb span{margin:0 8px;opacity:.45}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--v-glow);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ══ 본문 사진 ═══════════════════════════════
   장식이 아니라 글 흐름을 끊어 주는 용도다.
   설명 문구는 사진을 되풀이하지 말고, 사진만으로는 알 수 없는 걸 적는다. */
figure{margin:32px 0;max-width:460px}
figure img{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
figcaption{margin-top:10px;font-size:13.4px;color:var(--muted);line-height:1.6}
@media(max-width:680px){figure{max-width:100%}}

/* ══ 단추 색 마무리 ══════════════════════════
   글 안(.article)에 단추가 들어가면 .article a 의 링크 색·밑줄이 단추 글씨를
   덮어써서 안 보이는 일이 있었다. 특이도가 같아 순서로 결정되므로 맨 뒤에서
   다시 잡는다. 여기 규칙을 위로 옮기면 다시 안 보이게 된다. */
a.btn{text-decoration:none}
a.btn-primary,a.btn-dark{color:#fff}
a.btn-primary:hover,a.btn-dark:hover{color:#fff}
a.btn-glass{color:#fff;border-color:rgba(255,255,255,.5)}
a.btn-ghost{color:var(--ink)}
a.btn-ghost:hover{color:var(--v-base)}
/* 보라 판 위에서는 흰 단추에 보라 글씨가 맞다 */
.rec a.btn-primary,.rec a.btn-dark,
.rec a.btn-primary:hover,.rec a.btn-dark:hover{color:var(--v-mid)}
/* 유리 단추가 보라 판 위에서 묻힌다는 지적이 있어 테두리와 바탕을 올렸다 */
.rec a.btn-glass{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.62)}
.rec a.btn-glass:hover{background:rgba(255,255,255,.32)}

/* ══ 강사 소개 ══════════════════════════════
   등록 전에 강사를 확인할 수 있다는 게 우리 강점이라 카드로 세운다.
   사진 파일이 아직 없어서 이름 첫 글자를 원 안에 넣었다.
   실제 사진이 준비되면 .tcard .av 를 img 로 바꾸면 된다. */
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin:26px 0}
.tcard .hd{display:flex;align-items:center;gap:15px;padding:20px 22px;border-bottom:1px solid var(--line);
  background:#fcfbff}
.tcard .av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#a78bfa,#5b21b6);color:#fff;font-weight:800;font-size:21px}
.tcard .hd b{font-size:19px;color:var(--ink);display:block;line-height:1.3;letter-spacing:-.02em}
.tcard .hd .meta{font-size:13.4px;color:var(--muted);margin-top:3px}
.tcard .hd .meta i{font-style:normal;color:var(--v-base);font-weight:700}
.tcard .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tcard .tags span{font-size:12.4px;color:var(--v-base);background:var(--v-soft);
  padding:3px 9px;border-radius:999px}
.tcard .sec{padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.tcard .sec:last-child{border-bottom:0}
.tcard .sec h5{font-size:11.6px;font-weight:800;letter-spacing:.12em;color:var(--v-base);
  text-transform:uppercase;margin:0 0 9px}
.tcard .sec p{font-size:15px;line-height:1.78;color:var(--body);margin:0 0 8px}
.tcard .sec p:last-child{margin-bottom:0}
.tcard .sec ul{margin:0;padding:0;list-style:none}
.tcard .sec li{font-size:14.2px;color:var(--body);padding:5px 0 5px 15px;position:relative;
  line-height:1.6;border:0}
.tcard .sec li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:2px;
  border-radius:2px;background:var(--v-glow)}

/* 후기 — 지어낸 게 아니라 파워잉글리쉬에 올라와 있는 것이다. 출처를 함께 적는다 */
.revs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
@media(max-width:760px){.revs{grid-template-columns:1fr}}
.rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.rev .rl{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rev .score{background:var(--v-base);color:#fff;font-size:11.8px;font-weight:800;
  padding:2px 8px;border-radius:999px}
.rev .book{font-size:12.4px;color:var(--muted)}
.rev p{font-size:14.6px;line-height:1.72;color:var(--ink);margin:0 0 8px}
.rev .by{font-size:12.6px;color:var(--muted)}

/* ══ 포함 항목 대조 ═════════════════════════
   "수강료 밖에서 드는 것"을 글머리 목록으로 두면 그냥 주의사항으로 읽힌다.
   같은 줄에서 흔한 경우와 우리를 맞붙여야 무료라는 게 눈에 들어온다. */
.incl{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);
  box-shadow:var(--shadow);margin:26px 0}
.incl .row{display:grid;grid-template-columns:1fr 132px 88px;gap:14px;align-items:center;
  padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.incl .row:last-child{border-bottom:0}
.incl .hdr{background:#faf9ff;padding:11px 20px;font-size:11.6px;letter-spacing:.1em;
  color:var(--muted);font-weight:800;text-transform:uppercase}
.incl .hdr span{text-align:center}
.incl .hdr span:first-child{text-align:left}
.incl .it{font-size:15.4px;color:var(--ink);font-weight:700;line-height:1.4}
.incl .it em{display:block;font-style:normal;font-size:13.2px;color:var(--muted);
  font-weight:400;margin-top:3px;line-height:1.55}
.incl .x{font-size:13.4px;color:#9b95b3;text-align:center;line-height:1.45}
.incl .o{font-size:13.4px;font-weight:800;color:#fff;background:var(--v-base);
  padding:6px 0;border-radius:999px;text-align:center;white-space:nowrap;
  box-shadow:0 6px 16px -8px rgba(109,40,217,.7)}
.incl .foot{padding:14px 20px;background:#faf9ff;font-size:13px;color:var(--muted);
  line-height:1.65;border-top:1px solid var(--line-soft)}
@media(max-width:640px){
  .incl .row{grid-template-columns:1fr 76px;gap:10px;padding:13px 15px}
  .incl .row .x{display:none}
  .incl .hdr{grid-template-columns:1fr 76px}
  .incl .hdr span:nth-child(2){display:none}
}

/* ══ 수업 영상 ══════════════════════════════
   말로 설명하는 것보다 실제 수업 화면 30초가 빠르다.
   loading=lazy 로 두어 첫 화면 속도를 잡아먹지 않게 한다. */
.vid{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;
  background:#100c26;box-shadow:0 24px 60px -30px rgba(23,19,49,.5);border:1px solid var(--line)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cap{margin-top:13px;font-size:13.6px;color:var(--muted);line-height:1.65;text-align:center}

/* 표 안에서 어느 줄이 키플러스인지 — 첫 칸 뒤에 배지를 붙인다.
   중립적으로 쓴 비교표라 색만으로는 우리 줄인지 알기 어렵다. */
.ours-tag{display:inline-block;font-size:10.6px;font-weight:800;color:#fff;
  background:var(--v-base);padding:2px 8px;border-radius:999px;margin-left:7px;
  vertical-align:middle;letter-spacing:-.01em;white-space:nowrap}

/* ══ 모바일 하단 고정 단추 ═════════════════
   좁은 화면에서는 내비의 신청 단추가 숨는다. 그 자리를 여기가 메운다.
   본문 맨 아래 신청 블록이 가려지지 않도록 그때는 스스로 비켜난다. */
.dock{display:none}
@media(max-width:820px){
  .dock{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:9px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 -6px 20px -12px rgba(23,19,49,.3);
  }
  .dock a{flex:1;padding:13px 10px;font-size:14.6px}
  .dock .sub{flex:0 0 auto;padding:13px 16px}
  body{padding-bottom:74px}
}

/* 보라 판 안의 굵은 글씨 — .article b 규칙이 먹색을 씌워서 안 보였다.
   .rec 은 글 안에도 들어가므로 여기서 다시 흰색으로 잡는다. */
.rec b,.rec strong{color:#fff}
.rec .alt b,.rec .alt strong{color:#cbb8ff}