.p-class /* .cv* 공용 블록은 layout.css 로 승격됨 — 이 페이지 고유값만 남긴다 */ .cv__char { width: clamp(96px, 11.25vw, 216px); }
/* [E-09] ============================================================ page-clas */ :root {
  --pad-150: clamp(56px, 7.81vw, 150px);   /* container padding-block */
  --pad-170: clamp(64px, 8.85vw, 170px);   /* container gap · 핑크블록 py */
  --gap-40:  clamp(16px, 2.08vw, 40px);
  --gap-100: clamp(36px, 5.21vw, 100px);
}
/* 시안이 정의한 고정 개행은 넓은 폭에서만 지킨다 */ /* ---- 공용 타이포 (이 페이지 한정) ---- */ .cls-h2 {
  font-size: clamp(22px, 3.125vw, 60px);   /* 60 */
  line-height: 1.2; font-weight: 700; color: var(--ink); text-align: center;
}
.cls-sub {
  font-size: clamp(15px, 1.5625vw, 30px);  /* Light 30 */
  line-height: 1.6; font-weight: 300; color: var(--ink); text-align: center;
}
.cls-lead {
  font-size: clamp(15px, 1.146vw, 22px);   /* 22 / lh 1.8 */
  line-height: 1.8; font-weight: 500; color: var(--ink-2);
  text-align: center; max-width: min(100%, 1200px); margin-inline: auto;
}
.cls-lead--tight { line-height: 1.6; max-width: min(100%, 1400px); }
/* 섹션 표식 이미지 (image 180 / 181 · 51x50) */ .cls-mark { width: clamp(34px, 2.66vw, 51px); height: auto; }

@media (max-width: 767px) {
}
@media (max-width: 479px) {
}.p-class /* ============================================================ 프로그램 탭 36:1588 (440x70 · bg #f3f3f3 · r35) ============================================================ */ .ptabs {
  width: min(440px, calc(100% - 40px));
  margin: var(--pad-150) auto 0;
  background: #f3f3f3;
  border-radius: var(--r-pill);
}
/* ============================================================ 1 · 인트로 타이틀 36:1360 ============================================================ */ .cls-intro { margin-top: var(--pad-170); }
.cls-intro__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-md);
}
/* ============================================================ 2 · 영어가 열리는 60분 36:1960 ============================================================ */ .cls-60 { margin-top: var(--pad-170); position: relative; }
.cls-60__pink { background: var(--tint-pink); padding-block: var(--pad-170); }
.cls-60__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-100); }
.cls-60__text { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); width: 100%; }
.cls-60__title { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
/* 물결 구분선 36:1953 — core.css 공용 .cls-wave */
/* ---------------- 원형 스텝 다이어그램 36:1724 ---------------- */ .dia {
  position: relative;
  width: min(605px, 100%);
  aspect-ratio: 605 / 590;
  container-type: inline-size;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 48px);
}
.dia__bg-frame { position: absolute; inset: 0; z-index: 0; }
.dia__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 36:1785 중앙 흰 원 220x220 */ .dia__core {
  position: absolute; left: 50%; top: 50%;
  width: 36.36%; aspect-ratio: 1;
  margin: -18.18% 0 0 -18.18%;
  background: var(--white); border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  z-index: 2;
}
.dia__core img { width: 68.2%; height: auto; }
.dia__badges { position: absolute; inset: 0; z-index: 3; }
.dia__b {
  position: absolute;
  width: 28.43%; aspect-ratio: 1;         /* 172 / 605 */
  border-radius: 50%;
  background: var(--brand-cta); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1.4;
  font-size: clamp(9px, 3.306cqw, 20px);  /* 20 / 605 */
  box-shadow: 0 8px 18px rgba(227, 84, 87, .22);
}
.dia__min { font-weight: 500; }
.dia__lb { font-weight: 700; }
.dia__b--1 { left: 36.94%; top:  -7.80%; }
/* 36:1747 Warm-up */ .dia__b--2 { left: 74.96%; top:  15.93%; }
/* 36:1769 Today's Lesson */ .dia__b--3 { left: 83.47%; top:  56.44%; }
/* 36:1764 Tablet Study */ .dia__b--4 { left: 42.15%; top:  81.86%; }
/* 36:1750 Workbook Study */ .dia__b--5 { left: -7.60%; top:  60.17%; }
/* 36:1754 Activity */ .dia__b--6 { left: -5.95%; top:  11.02%; }   /* 36:1759 Wrap-up */

/* 1024 이하: 원형 유지 · 배지가 컨테이너 밖으로 덜 나가도록 여백 확보 */
@media (max-width: 1023px) {
.dia { width: min(480px, calc(100% - 90px)); padding-block: clamp(40px, 8vw, 72px); }
}
/* 768 이하: 원형 해제 → 중앙 캐릭터 + 배지 6개 2열 그리드 */
@media (max-width: 767px) {
.dia {
    width: 100%; aspect-ratio: auto; container-type: normal;
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-md);
    padding-block: clamp(48px, 10vw, 80px);
  }
.dia__bg-frame { display: none; }
.dia__core {
    position: static; margin: 0; width: 140px;
  }
.dia__badges {
    position: static; width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm);
    justify-items: center;
  }
.dia__b {
    position: static; width: 100%; max-width: 172px;
    font-size: clamp(13px, 3.6vw, 17px);
  }
}
/* ---------------- 6단계 카드 36:1920 ---------------- */ .steps { width: 100%; padding-top: clamp(20px, 2.6vw, 50px); }
.steps__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-40); }
.stepc {
  background: var(--white); border-radius: var(--r-md);
  padding: clamp(28px, 3.65vw, 70px) clamp(20px, 2.2vw, 50px);
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-md);
  text-align: center;
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.stepc:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(0, 0, 0, .08); }
.stepc__no {
  width: clamp(40px, 3.125vw, 60px); aspect-ratio: 1;
  background: var(--brand-cta); border-radius: 10px;
  display: grid; place-items: center; flex: none;
  color: var(--white); font-weight: 700; line-height: 1;
  font-size: clamp(14px, .94vw, 18px);
}
.stepc__en { color: var(--brand-cta); font-weight: 700; line-height: 1.25;
             font-size: clamp(17px, 1.354vw, 26px); }
.stepc__ko { color: var(--ink); font-weight: 700; line-height: 1.25;
             font-size: clamp(17px, 1.354vw, 26px); }
.stepc__body { color: #444444; font-weight: 500; line-height: 1.6;
               font-size: clamp(14px, .95vw, 16px); }
.stepc__u { display: block; margin-top: 1.6em; text-decoration: underline;
            text-underline-offset: 3px; }

@media (max-width: 1023px) {
.steps__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.steps__row { grid-template-columns: minmax(0, 1fr); }
.stepc { padding: clamp(28px, 7vw, 40px) clamp(20px, 6vw, 24px); }
}
/* ============================================================ 3 · 영어가 자연스럽게 자라납니다 54:342 ============================================================ */ .cls-grow { margin-top: var(--pad-170); }
.cls-grow__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }
.cls-grow__title { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.stepblocks { width: 100%; display: flex; flex-direction: column; gap: var(--gap-lg); }
.sb {
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 50px);
  display: flex; flex-direction: column; gap: var(--gap-md);
}
.sb--violet { background: var(--tint-violet); }
.sb--sky { background: var(--tint-sky); }
.sb--amber { background: var(--tint-amber); }
.sb__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); width: 100%; }
.sb__badge {
  background: var(--ink); color: var(--white);
  border-radius: 2px; padding: 6px 10px; padding-top: 9px; line-height: 1;
  font-weight: 700; font-size: clamp(12px, .78vw, 15px);
}
.sb__h { font-weight: 700; line-height: 1.3; color: var(--ink);
         font-size: clamp(17px, 1.5625vw, 30px); }
.sb__desc { font-weight: 500; line-height: 1.6; color: var(--ink-2);
            font-size: clamp(14px, .95vw, 16px); width: 100%; }
.sb__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); width: 100%; }
.sbc {
  background: var(--white); border-radius: var(--r-md);
  padding: clamp(20px, 1.56vw, 30px) clamp(20px, 2.1vw, 40px);
  display: flex; flex-direction: column; gap: var(--gap-sm);
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.sbc:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(0, 0, 0, .08); }
.sbc__top { display: flex; align-items: center; gap: var(--gap-sm); }
.sbc__tile {
  width: clamp(44px, 3.125vw, 60px); aspect-ratio: 1; flex: none;
  border-radius: 12px; display: grid; place-items: center;
}
.sbc__tile img { width: 50%; height: auto; }
/* 30 / 60 */ .sbc__tile--violet { background: #f6f2ff; }
.sbc__tile--sky { background: #e9f8ff; }
.sbc__tile--amber { background: #fff6de; }
.sbc__tile--bare { background: none; border-radius: 0; }
.sbc__tile--bare img { width: 100%; }
.sbc__labels { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sbc__en { color: var(--ink-2); font-weight: 500; line-height: 1.2;
           font-size: clamp(14px, .94vw, 18px); }
.sbc__ko { color: var(--ink); font-weight: 700; line-height: 1.3;
           font-size: clamp(16px, 1.146vw, 22px); }
.sbc__body { color: #444444; font-weight: 500; line-height: 1.6;
             font-size: clamp(14px, .95vw, 16px); }

@media (max-width: 1023px) {
.sb__cards { grid-template-columns: minmax(0, 1fr); gap: var(--gap-sm); }
}
@media (max-width: 767px) {
.sbc { padding: clamp(18px, 5vw, 24px) clamp(18px, 5vw, 24px); }
}
/* ---------------- 클로징 58:441 ---------------- */ .cls-closing {
  padding-block: var(--pad-170) var(--pad-150);
  width: 100%;
}
.cls-closing__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-lg); text-align: center; max-width: 1400px;
  padding-inline: 20px;
}
.cls-closing__lead {
  font-size: clamp(18px, 2.083vw, 40px); line-height: 1.3; font-weight: 300; color: var(--ink);
}
.cls-closing__body {
  font-size: clamp(15px, 1.770833vw, 34px); line-height: 1.6; font-weight: 500; color: var(--ink);
}
.cls-closing__body strong { font-weight: 700; }

/* ---- 장식 도형 4개 — 시안 get_design_context 실측 (중심 % + 회전) ---- */
.p-class .cv-sh--sq1 { left: 91.61%; top: 66.0%; --rot: 0deg; --c: #ffda75; }
.p-class .cv-sh--sq2 { left: 70.97%; top: 30.17%; --rot: 30.69deg; --c: #12deab; }
.p-class .cv-sh--p1 { left: 89.51%; top: 25.91%; --rot: 28.89deg; }
.p-class .cv-sh--p2 { left: 68.14%; top: 69.55%; --rot: 22.55deg; }