.p-level /* .cv* 공용 블록은 layout.css 로 승격됨 — 이 페이지 고유값만 남긴다 */ .cv__char { width: clamp(96px, 11.25vw, 216px); }
/* [E-13] ============================================================ page-leve */ :root {
  --pad-150: clamp(56px, 7.81vw, 150px);   /* container padding-block */
  --pad-170: clamp(64px, 8.85vw, 170px);   /* container gap */
  --stg-py:  clamp(56px, 6.25vw, 120px);   /* 스테이지 섹션 py 120 */
  --stg-gap: clamp(28px, 3.33vw, 64px);    /* 텍스트 ↔ 카드 gap 64 */
  --card-gap: clamp(20px, 2.60vw, 50px);   /* 카드 사이 gap 50 */
}

@media (max-width: 767px) {
}
@media (max-width: 479px) {
}
/* ============================================================ container 60:712 — py150 · gap170 · 자식 가운데 정렬 ============================================================ */ .lv-body {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--pad-170);
  padding-block: var(--pad-150);
  width: 100%;
}.p-level /* ============================================================ 프로그램 탭 60:713 (440x70 · bg #f3f3f3 · r35) ============================================================ */ .ptabs {
  width: min(440px, calc(100% - 40px));
  background: #f3f3f3;
  border-radius: var(--r-pill);
}
/* ============================================================ 레벨 오버뷰 60:719 (1600x620 · gap 70) ============================================================ */ .lv-over { width: 100%; }
.lv-over__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }
.lv-over__title { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.lv-mark { width: clamp(34px, 2.66vw, 51px); height: auto; }
/* 60:721 · 51x50 */ .lv-h2 {                                   /* 60:722 Bold 60 / lh 1.0 */
  font-size: clamp(22px, 3.125vw, 60px);
  line-height: 1.2; font-weight: 700; color: var(--ink); text-align: center;
}
.lv-over__lead {                           /* 60:723 Medium 22 / lh 1.8 / #222 */
  font-size: clamp(15px, 1.146vw, 22px);
  line-height: 1.8; font-weight: 500; color: var(--ink-2); text-align: center;
}
/* ---------------- 원형 5단계 60:1194 (1500 · 원 300 · gap 0) ---------------- */ .lv-circles {
  position: relative;
  width: min(1500px, 100%); margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
}
.lv-circle {
  position: relative;
  aspect-ratio: 1; border-radius: 500px;
  border: 1px solid var(--brand-cta);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(9px, .83vw, 16px);
  padding-inline: 16.667%;                 /* 50 / 300 */
  text-align: center;
  transition: background-color var(--mo-fast) var(--ease-out),
              box-shadow var(--mo-fast) var(--ease-out);
}
.lv-circle:nth-child(1) { z-index: 5; }
.lv-circle:nth-child(2) { z-index: 4; }
.lv-circle:nth-child(3) { z-index: 3; }
.lv-circle:nth-child(4) { z-index: 2; }
.lv-circle:nth-child(5) { z-index: 1; }
.lv-circle:hover { background: rgba(227, 84, 87, .06); box-shadow: 0 10px 26px rgba(227, 84, 87, .12); }
.lv-circle__en {                            /* Bold 20 / lh 1.0 / #e35457 · Figma 60:1182 */
  font-size: clamp(12px, 1.042vw, 20px); line-height: 1;
  font-weight: 700; color: var(--brand-cta);
}
.lv-circle__ko {                            /* Medium 18 / lh 1.6 / #222 · Figma 60:1185 */
  width: 100%;
  border-top: 1px solid var(--line);        /* 60:1188 계열 1px 가로선 대체 */
  padding-top: clamp(9px, .83vw, 16px);
  font-size: clamp(11px, 0.938vw, 18px); line-height: 1.6;
  font-weight: 500; color: var(--ink-2);
}
/* 화살표 배지 4개 — 원과 원의 경계 위 (54x54 · bg #e35457 · r100) */ .lv-arrow {
  position: absolute; left: 100%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(34px, 2.8125vw, 54px); aspect-ratio: 1;
  border-radius: var(--r-pill); background: var(--brand-cta);
  display: grid; place-items: center; z-index: 10;
  box-shadow: 0 6px 14px rgba(227, 84, 87, .25);
}
.lv-arrow img,
.lv-arrow svg { width: 24.1%; height: auto; }   /* 13 / 54 */

@media (max-width: 1024px) {
.lv-circles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-sm); }
.lv-arrow { display: none; }
}
@media (max-width: 767px) {
.lv-circles {
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px; gap: 46px;
  }
.lv-arrow { display: grid; left: 50%; top: 100%; transform: translate(-50%, -50%) rotate(90deg); }
}
/* ============================================================ 스테이지 상세 60:1295 — 5개 스택(gap 0) + 마무리(gap 70) ============================================================ */ .lv-stages { width: 100%; display: flex; flex-direction: column;
             align-items: center; gap: var(--gap-xl); }
.lv-stack { width: 100%; }
/* ---- 스테이지 섹션 공통 (5색 테마는 아래 변형 클래스로만 분기) ---- */ .stg { background: var(--s-bg); padding-block: var(--stg-py); }
.stg__inner { display: flex; flex-direction: column; align-items: center; gap: var(--stg-gap); }
.stg__text { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.stg__badge {                               /* padding 10/16 · r2 · Bold 15 */
  padding: 10px 16px; padding-top: calc(10px + var(--optical-y)); border-radius: 2px;
  background: var(--s-badge); color: var(--s-badge-ink);
  font-size: clamp(12px, .78125vw, 15px); font-weight: 700; line-height: 1;
}
.stg__h {                                   /* 60:1230 · 60px / #1a1a1a · 앞 Bold + 뒤 Light */
  font-size: clamp(22px, 3.125vw, 60px); line-height: 1;
  font-weight: 300; color: #1a1a1a; text-align: center;
}
.stg__h strong { font-weight: 700; }
.stg__lead {                                /* Light 30 / lh 1.6 / #444 */
  font-size: clamp(16px, 1.5625vw, 30px); line-height: 1.6;
  font-weight: 300; color: #444444; text-align: center;
}
/* ---- 카드 박스 (1600 폭 · gap 50 · 가운데 정렬) ---- */ .stg__cards {
  width: 100%;
  display: grid; gap: var(--card-gap);
  grid-template-columns: repeat(var(--n, 1), minmax(0, 450px));
  justify-content: center; align-items: start;
}
.stg__cards--1 { --n: 1; }
.stg__cards--2 { --n: 2; }
.stg__cards--3 { --n: 3; }
/* ---- 카드 (w450 · p30 · r30 · 흰 배경) ---- */ .lvc {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(20px, 1.5625vw, 30px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 1.04vw, 20px);
  box-shadow: 0 12px 12px rgba(0, 0, 0, .03);
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.lvc:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .1);
}

/* lcard tilt 등장 (서브 level · 1회 · card-rise stagger 연동) */
html.js-motion .lvc[data-mo="lcard-tilt"] {
  opacity: var(--m-o0, 0);
  transform: rotate(-7deg) scale(0.88) translateY(30px);
  transform-origin: 50% 80%;
  transition-duration: 0.82s;
  transition-timing-function: var(--ease-back);
}
html.js-motion .lvc[data-mo="lcard-tilt"].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
html.js-motion .lvc[data-mo="lcard-tilt"].is-in:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(0, 0, 0, .1);
}

/* mascot-frame 390x250 · r20 · bg = 스테이지 배경색 */ .lvc__mascot {
  width: 100%;
  height: clamp(200px, 13.03vw, 250px);
  padding: 25px;
  border-radius: var(--r-md); background: var(--s-bg);
  overflow: hidden; 
}
.lvc__mascot img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; }
.lvc__name { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lvc__nm { font-size: clamp(18px, 1.25vw, 24px); line-height: 1; font-weight: 700; color: #1a1a1a; }
.lvc__pill {                                /* padding 6/16 · r20 · Bold 15 */
  flex: none; padding: 6px 16px; padding-top: 9px; border-radius: 20px;
  background: var(--s-pill); color: var(--s-pill-ink);
  font-size: clamp(12px, .78125vw, 15px); font-weight: 700; line-height: 1;
  white-space: nowrap;
}
.lvc__one {                                 /* Medium 18 / lh 1.0 / 포인트색 */
  font-size: clamp(14px, .9375vw, 18px); line-height: 1.3;
  font-weight: 500; color: var(--s-point);
}
.lvc__body {
  width: 100%;
  border-top: 1px solid var(--line);        /* 60:1241 계열 1px 가로선 대체 */
  padding-top: clamp(14px, 1.04vw, 20px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.lvc__desc {                                /* Medium 18 / lh 1.6 / #222 */
  font-size: clamp(14px, .9375vw, 18px); line-height: 1.6;
  font-weight: 500; color: var(--ink-2);
}
.lvc__desc strong { font-weight: 700; }
.lvc__checks { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.lvc__checks li { display: flex; align-items: flex-start; gap: 4px; }
.lvc__checks img { flex: none; width: clamp(19px, 1.25vw, 24px); height: auto; margin-top: -1px; }
.lvc__checks span {                         /* Medium 16 / lh 1.4 / #444 */
  flex: 1; min-width: 0;
  font-size: clamp(13px, .8333vw, 16px); line-height: 1.4;
  font-weight: 500; color: #444444;
}
/* ---- 5색 테마 (변형 클래스로만 색이 갈린다) ---- */ .stg--1 { --s-bg: #fff9e6; --s-badge: #ffd10a; --s-badge-ink: #33260d;
          --s-pill: #ffd10a; --s-pill-ink: #33260d; --s-point: #f8b600; }
.stg--2 { --s-bg: #eef8f3; --s-badge: #58b978; --s-badge-ink: #ffffff;
          --s-pill: #58b978; --s-pill-ink: #ffffff; --s-point: #58b978; }
.stg--3 { --s-bg: #eef2fc; --s-badge: #4d82f3; --s-badge-ink: #ffffff;
          --s-pill: #4d82f3; --s-pill-ink: #ffffff; --s-point: #4d82f3; }
.stg--4 { --s-bg: #fcf2ec; --s-badge: #f2994a; --s-badge-ink: #ffffff;
          --s-pill: #f2994a; --s-pill-ink: #ffffff; --s-point: #f2994a; }
.stg--5 { --s-bg: #fdf0f1; --s-badge: #e35457; --s-badge-ink: #ffffff;
          --s-pill: #e35457; --s-pill-ink: #ffffff; --s-point: #e35457; }

@media (max-width: 1023px) {
.stg__cards--3 { --n: 2; }
}
@media (max-width: 768px) {
.stg__cards { --n: 1 !important; max-width: 450px; margin-inline: auto; }
.lvc { padding: clamp(18px, 5vw, 24px); }
}
/* ============================================================ 마무리 문구 73:2410 (592 · gap 50 · center) ============================================================ */ .lv-close {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-lg); text-align: center;
  width: 100%; padding-inline: var(--gutter);
}
.lv-close__h {                              /* 40 / lh 1.6 · 1행 Light · 2행 Bold */
  max-width: 720px;
  font-size: clamp(20px, 2.0833vw, 40px); line-height: 1.6;
  font-weight: 300; color: var(--ink);
}
.lv-close__h strong { font-weight: 700; }
.lv-close__note {                           /* Light 18 / lh 1.8 */
  max-width: 720px;
  font-size: clamp(14px, .9375vw, 18px); line-height: 1.8;
  font-weight: 300; color: var(--ink);
}

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