/* [E-12] ============================================================ page-intr */

/* intro 전용 — body overflow-x 만으로는 html 스크롤이 남는 경우가 있음 */
html { overflow-x: clip; }

:root {
  --pad-150: clamp(56px, 7.81vw, 150px);   /* container padding-block 150 */
  --pad-170: clamp(64px, 8.85vw, 170px);   /* container gap 170 */
}

/* ============================================================
   visual 64:1648 (1920x400 · bg #e35457)
   ============================================================ */
.iv {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-cta); color: var(--white);
  min-height: clamp(180px, 20.83vw, 400px);
  display: flex; align-items: center;
}
/* 64:1662 — 좌측 세로 중앙 · opacity .7 */
.iv__bg {
  /* 시안: absolute · left 0 · 480×500 · 세로 중앙 · opacity .70.
     세로 중앙을 transform 으로 잡으면 [data-parallax] 의 transform 이 그걸 덮는다 —
     transform 을 쓰지 않는 auto-margin 중앙 정렬로 둔다. */
  position: absolute; left: 0; top: 0; bottom: 0; margin-block: auto;
  width: clamp(160px, 25vw, 480px); height: clamp(167px, 26.04vw, 500px);
  object-fit: cover; object-position: left center;
  opacity: .7; z-index: 0; pointer-events: none;
}
.iv__inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  padding-right: calc(var(--gutter) + clamp(0px, 5.21vw, 100px));  /* 시안 pr-100 */
}
.iv__text { display: flex; flex-direction: column; align-items: flex-start;
            gap: var(--gap-md); min-width: 0; }
.iv__title { font-size: clamp(26px, 3.958vw, 76px); line-height: 1;
             font-weight: 700; white-space: nowrap; }   /* 64:1651 Bold 76 / lh 1.0 */
.iv__char { flex: 0 0 auto; width: clamp(96px, 10.78vw, 207px); height: auto; }

@media (max-width: 767px) {
  .iv__char { width: clamp(88px, 16vw, 130px); }
  .iv-sh--sq2, .iv-sh--p2 { display: none; }
}
@media (max-width: 479px) {
  .iv__char { display: none; }
  .iv__bg { opacity: .4; }
  .iv__inner { padding-right: var(--gutter); }
}

/* ============================================================
   container 64:1667 — py150 · gap170 · 자식 가운데 정렬
   ============================================================ */
.in-body {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--pad-170);
  padding-block: var(--pad-150);
  width: 100%; max-width: 100%;
  overflow-x: clip;
}

/* ============================================================
   도입안내 탭 64:1668 (440x70 · bg #f3f3f3 · r35)
   ============================================================ */
.itabs { width: min(440px, calc(100% - 40px)); background: #f3f3f3; border-radius: var(--r-pill); }
.itabs ul { display: flex; }
.itabs li { flex: 1 1 0; min-width: 0; }
.itabs a {
  display: flex; align-items: center; justify-content: center;
  height: clamp(52px, 3.646vw, 70px);
  border-radius: var(--r-pill);
  font-size: clamp(15px, 1.042vw, 20px); line-height: 1; font-weight: 500;
  white-space: nowrap; color: var(--ink);
  padding-top: var(--optical-y); box-sizing: border-box;
  transition: background-color var(--mo-fast) var(--ease-out),
              color var(--mo-fast) var(--ease-out);
}
.itabs a.is-active { background: var(--brand-cta); color: var(--white); }
.itabs a:not(.is-active):hover { color: var(--brand-cta); background: rgba(227, 84, 87, .08); }

/* ============================================================
   공용 타이틀 조각 (image 181 마크 + h2 + 부제 + 본문)
   ============================================================ */
.in-mark { width: clamp(34px, 2.656vw, 51px); height: auto; }     /* 51x50 */
.in-title { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.in-h2 {                                     /* Bold 60 / lh 1.4 */
  font-size: clamp(24px, 3.125vw, 60px); line-height: 1.4;
  font-weight: 700; color: var(--ink); text-align: center;
}
.in-h2--left { text-align: left; }
.in-sub {                                    /* Light 30 / lh 1.4 */
  font-size: clamp(16px, 1.5625vw, 30px); line-height: 1.4;
  font-weight: 300; color: var(--ink); text-align: center;
}
.in-lead {                                   /* Medium 22 / lh 1.8 / #222 */
  font-size: clamp(14px, 1.1458vw, 22px); line-height: 1.8;
  font-weight: 500; color: var(--ink-2); text-align: center;
}

/* ============================================================
   섹션1 64:1674 — 교육기관의 실제 고민 (전폭 1920 · gap 70)
   ============================================================ */
.pain {
  position: relative; width: 100%; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl);
  overflow-x: clip;
}
.pain__head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.pain__arrow { width: clamp(24px, 2.135vw, 41px); height: auto; }   /* 65:2270 41x62.04 */
.pain__close {                               /* 65:2276 Medium 30 / lh 1.6 */
  font-size: clamp(17px, 1.5625vw, 30px); line-height: 1.6;
  font-weight: 500; color: var(--ink); text-align: center;
}
.pain__close strong { font-weight: 700; }

/* ---- 마스코트 원형 + 말풍선 무대 (시안 1920 x 450 = padding-top100 + 원 350) ---- */
.pain__stage {
  position: relative; width: 100%; max-width: min(1920px, 100%);
  margin-inline: auto; aspect-ratio: 1920 / 450;
  overflow-x: clip;
}
.pain__circle {                              /* 65:2141 350 · bg #fff1f0 · r200 */
  position: absolute; left: 40.885%; top: 22.222%;
  width: min(18.229%, 350px); aspect-ratio: 1;
  background: var(--tint-pink); border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
}
.pain__circle > img { width: 57.39%; height: auto; }   /* 65:2142 200.868 / 350 */

.pain__bubbles { position: absolute; inset: 0; }
.bub {
  position: absolute;
  display: flex; align-items: center;
  --bub-text-scale: 1.111111111; /* 1920 기준 18px → 20px · bub__t·bub__d·간격 동일 비율 */
  --bub-fs-max: calc(18px * var(--bub-text-scale));
  --bub-gap-max: calc(6.24px * var(--bub-text-scale)); /* .325vw @1920 */
  --bub-w-extra: min(1.25vw, 24px); /* 1.25vw @1920 · 말풍선 폭 보정 */
  --bub-pad-extra: min(.625vw, 12px); /* .625vw @1920 · 꼬리 여백 보정 */
}
.bub__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  z-index: 0; pointer-events: none;
}
.bub__c {
  position: relative; z-index: 1;
  width: 100%; min-width: 0;
  color: var(--white);
  overflow-wrap: anywhere;
}
.bub__t {                                    /* Bold 20 @1920 (was 18) · 줄마다 gradient highlight */
  display: inline;
  font-size: min(calc(.9375vw * var(--bub-text-scale)), var(--bub-fs-max)); line-height: 1.4; font-weight: 700;
  background-image: linear-gradient(
    transparent 0,
    transparent 52%,
    rgba(255, 255, 255, .3) 52%,
    rgba(255, 255, 255, .3) 100%
  );
  background-size: 100% 1.4em;
  background-repeat: repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bub__d { margin-top: min(calc(.325vw * var(--bub-text-scale)), var(--bub-gap-max)); font-size: min(calc(.9375vw * var(--bub-text-scale)), var(--bub-fs-max)); line-height: 1.4; font-weight: 500; }

/* 꼬리 여백 — bub--1·2 우하단 / bub--3·4 좌하단 (시안 65:2194) */
.bub--1, .bub--2 {
  padding: clamp(14px, .83vw, 16px)
    calc(clamp(20px, 1.56vw, 30px) + var(--bub-pad-extra))
    clamp(20px, 1.25vw, 24px)
    calc(clamp(16px, 1.25vw, 24px) + var(--bub-pad-extra));
}
.bub--3, .bub--4 {
  padding: clamp(14px, .83vw, 16px)
    calc(clamp(16px, 1.25vw, 24px) + var(--bub-pad-extra))
    clamp(20px, 1.25vw, 24px)
    calc(clamp(20px, 1.56vw, 30px) + var(--bub-pad-extra));
}

/* 좌표: 무대(1920x450) 기준 % — PC(1280+) · 좌우 패딩 +1.25vw(양쪽 .625vw) 반영 */
.bub--1 { bottom: 50%; right: 55%; width: calc(23.5% + var(--bub-w-extra)); }
.bub--2 { bottom: 13%; right: 56%; width: calc(23.729% + var(--bub-w-extra)); }
.bub--3 { bottom: 60%; left: 55%; width: calc(22.667% + var(--bub-w-extra)); }
.bub--4 { bottom: 22%; left: 57.854%; width: calc(20.744% + var(--bub-w-extra)); }

/* ---- 1279 이하: 원형 아래 2열 · 꼬리 위쪽(캐릭터 방향) ---- */
@media (max-width: 1279px) {
  .pain__stage {
    aspect-ratio: auto;
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-lg);
    padding-inline: var(--gutter);
  }
  .pain__circle { position: static; width: clamp(200px, 26vw, 300px); }
  .pain__bubbles {
    position: static; width: 100%; max-width: min(560px, 100%);
    margin-inline: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: clamp(12px, 2vw, 20px);
  }
  .bub {
    position: relative; inset: auto;
    width: 100%; max-width: 100%; min-width: 0; margin: 0;
  }
  /* scaleY(-1)로 꼬리 위 · 2·3번은 y축(scaleX) 추가 반전 */
  .bub--1 .bub__bg,
  .bub--4 .bub__bg { transform: scaleY(-1); }
  .bub--2 .bub__bg,
  .bub--3 .bub__bg { transform: scaleX(-1) scaleY(-1); }
  /* 상하반전 후 꼬리 여백 — 1·3 top-right / 2·4 top-left · 좌우 +1.2vw */
  .bub--1, .bub--3 {
    padding: clamp(20px, 2.5vw, 24px)
      calc(clamp(20px, 2.5vw, 30px) + 1.2vw)
      clamp(14px, 1.8vw, 16px)
      calc(clamp(16px, 2vw, 24px) + 1.2vw);
  }
  .bub--2, .bub--4 {
    padding: clamp(20px, 2.5vw, 24px)
      calc(clamp(16px, 2vw, 24px) + 1.2vw)
      clamp(14px, 1.8vw, 16px)
      calc(clamp(20px, 2.5vw, 30px) + 1.2vw);
  }
  .bub__t { font-size: clamp(calc(13px * var(--bub-text-scale)), calc(1.36vw * var(--bub-text-scale)), calc(18px * var(--bub-text-scale)));
            background-image: linear-gradient(
              transparent 0,
              transparent 52%,
              rgba(255, 255, 255, .3) 52%,
              rgba(255, 255, 255, .3) 100%
            ); }
  .bub__d {
    margin-top: calc(.325vw * var(--bub-text-scale));
    font-size: clamp(calc(13px * var(--bub-text-scale)), calc(1.36vw * var(--bub-text-scale)), calc(18px * var(--bub-text-scale)));
  }
}
@media (max-width: 767px) {
  .pain__bubbles {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(460px, 100%);
    gap: var(--gap-sm);
  }
  .bub { max-width: 100%; }
}

/* ============================================================
   섹션2 65:2320 — 운영의 폭 (컨테이너 1600 · gap 70)
   ============================================================ */
.ops { width: 100%; max-width: 100%; overflow-x: clip; }
.ops__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }
.ops__cards {
  width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg);                        /* 시안 500x3 + 실질 gap 50 */
  align-items: stretch;
}
.opc {                                       /* w500 h570 · bg #f5f5f5 · r30 · p 20/20/50 */
  background: #f5f5f5; border-radius: var(--r-lg);
  padding: clamp(14px, 1.04vw, 20px) clamp(14px, 1.04vw, 20px) clamp(28px, 2.604vw, 50px);
  display: flex; flex-direction: column; gap: var(--gap-md);
  min-width: 0;
  overflow: hidden;
  transition: transform var(--mo-base) var(--ease-out), box-shadow var(--mo-base) var(--ease-out);
}
.opc:hover { box-shadow: 0 20px 36px rgba(0, 0, 0, .08); }
.opc__img { width: 100%; aspect-ratio: 460 / 300; border-radius: var(--r-md); }
.opc__img > img { transition: transform var(--mo-base) var(--ease-out); }
.opc:hover .opc__img > img { transform: scale(1.05); }
.opc__text {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm);
  width: 100%; min-width: 0;
  padding-inline: clamp(6px, 1.04vw, 20px); flex: 1 1 auto;
}
.opc__h { font-size: clamp(17px, 1.25vw, 24px); line-height: 1.3;
          font-weight: 700; color: var(--ink); text-align: center; }
.opc__d {
  display: flex; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 100%; min-width: 0;
  font-size: clamp(13px, .9375vw, 18px); line-height: 1.6;
  font-weight: 500; color: var(--ink-2); text-align: center;
}
.opc__d span { min-width: 0; max-width: 100%; }
.opc__d span::before { content: ">"; margin-inline: .35em; }
.opc__d span:first-child::before { display: none; }
.opc__badge {                                /* bg #fff · r10 · p20 */
  background: var(--white); border-radius: 10px;
  padding: clamp(14px, 1.04vw, 20px);
  padding-top: calc(clamp(14px, 1.04vw, 20px) + var(--optical-y)); /* Gmarket Sans optical center */
  font-size: clamp(13px, .9375vw, 18px); line-height: 1.5;
  font-weight: 700; color: var(--ink-2); text-align: center;
}

@media (max-width: 1023px) {
  .ops__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .site-footer { overflow-x: clip; }
  .ops__cards { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
}

/* ============================================================
   섹션3 65:2286 — 콘텐츠가 경쟁력 (전폭 핑크 밴드 · py170 · 컨테이너 1400)
   ============================================================ */
.cont { width: 100%; max-width: 100%; overflow-x: clip;
        background: var(--tint-pink);
        padding-block: clamp(56px, 8.854vw, 170px); }
.cont__inner { display: flex; align-items: center; justify-content: space-between;
               gap: var(--gap-xl); }
.cont__title { display: flex; flex-direction: column; align-items: flex-start;
               gap: var(--gap-md); min-width: 0; }
.cont__lead {                                /* 65:2284 Medium 22 / lh 1.8 / #222 */
  font-size: clamp(14px, 1.1458vw, 22px); line-height: 1.8;
  font-weight: 500; color: var(--ink-2);
}
.cont__lead span { display: inline-block; }
.cont__list {                                /* 65:2303 w500 · gap 10 */
  flex: none; width: 35.714%; max-width: 500px;
  display: flex; flex-direction: column; gap: 10px;
}
.cont__list li {
  background: var(--white); border-radius: 10px;
  padding: clamp(16px, 1.5625vw, 30px);
  display: flex; align-items: center; gap: 10px;
  transition: transform var(--mo-fast) var(--ease-out), box-shadow var(--mo-fast) var(--ease-out);
}
.cont__list li:hover { transform: translateX(6px); box-shadow: 0 10px 22px rgba(227, 84, 87, .14); }
.cont__list img { flex: none; width: clamp(19px, 1.25vw, 24px); height: auto; }
.cont__list span { font-size: clamp(15px, 1.042vw, 20px); line-height: 1.3;
                   font-weight: 500; color: var(--ink-2); }

@media (max-width: 1023px) { .cont__list { width: 42%; } }
@media (max-width: 767px) {
  .cont__inner { flex-direction: column; align-items: flex-start; gap: var(--gap-lg); }
  .cont__list { width: 100%; max-width: none; }
}

/* ============================================================
   섹션4 69:2353 — 도입 즉시 수업 가능 + 클로징 (컨테이너 1600 · gap 70)
   ============================================================ */
.ready { width: 100%; max-width: 100%; overflow-x: clip; }
.ready__inner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-xl); }
.ready__list {                               /* 73:2370 5칸 flex:1 · gap 10 */
  width: 100%;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 10px; row-gap: var(--gap-lg);
  align-items: start;
}
.rdy { display: flex; flex-direction: column; align-items: center; gap: var(--gap-md); }
.rdy__ico {                                  /* 60×60 · #fff1f0 · r12 · icon 30×30 */
  display: grid; place-items: center;
  width: clamp(44px, 3.125vw, 60px); aspect-ratio: 1;
  background-color: #fff1f0;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  transition: transform var(--mo-fast) var(--ease-back), background-color var(--mo-fast);
}
.rdy__ico img {
  width: clamp(22px, 1.5625vw, 30px);
  height: auto;
  object-fit: contain;
}
.rdy:hover .rdy__ico { transform: translateY(-6px); background-color: #ffe0dd; }
.rdy__t { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); }
.rdy__h { font-size: clamp(16px, 1.1458vw, 22px); line-height: 1.3;
          font-weight: 700; color: var(--ink); text-align: center; }
.rdy__d { font-size: clamp(13px, .9375vw, 18px); line-height: 1.6;
          font-weight: 500; color: #444444; text-align: center; }

/* ---- 클로징 CTA 64:1567 ---- */
.icta {
  width: 100%; max-width: 100%;
  overflow-x: clip;
  padding-block: var(--pad-170) var(--pad-150);
}
.icta__inner {
  position: relative;
  width: 100%;
  max-width: min(1660px, 100%);
  margin-inline: auto;
  padding-inline: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.icta__inner::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  top: calc(-1 * var(--pad-170));
  height: 1px;
  background: var(--line);
}
.icta__h {                                   /* 64:1568 40 / lh 1.6 · 1행 Bold · 2행 Light */
  font-size: clamp(18px, 2.0833vw, 40px); line-height: 1.6;
  font-weight: 300; color: var(--ink); text-align: center;
}
.icta__h-in { display: block; }
.icta__h strong { font-weight: 700; }
.icta__btns { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap;
              justify-content: center; margin-top: 50px; }
.icta__btn {                                 /* 73:2414 / 73:2419 · border 2 #000 · r100 */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: clamp(150px, 12.24vw, 235px);
  min-height: clamp(48px, 3.333vw, 64px);
  padding-inline: clamp(18px, 1.5625vw, 30px);
  border: 2px solid var(--ink); border-radius: var(--r-pill);
  font-size: clamp(15px, 1.1458vw, 22px); line-height: 1; font-weight: 700;
  color: var(--ink); background: transparent;
  transition: color var(--mo-base) var(--ease-out),
              border-color var(--mo-base) var(--ease-out);
}
/* 렌더 자산 73:2416 은 rotate(90deg) 가 이미 적용된 오른쪽 화살표다 — 다시 돌리지 않는다 */
.icta__btn img { width: clamp(18px, 1.25vw, 24px); height: auto;
                 transition: filter var(--mo-fast) var(--ease-out); }

@media (max-width: 1023px) {
  .ready__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-sm); }
}
@media (max-width: 767px) {
  .ready__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .icta__btns { width: 100%; flex-direction: column; gap: 12px; }
  .icta__btn { width: 100%; justify-content: space-between; padding-inline: 24px; }
}

/* ---- 장식 도형 4개 — 시안 get_design_context 실측 (중심 % + 회전) ---- */
.iv-sh--sq1 { left: 89.48%; top: 28.5%; --rot: 0deg; --c: #ffda75; }
.iv-sh--sq2 { left: 72.01%; top: 30.17%; --rot: -8.64deg; --c: #12deab; }
.iv-sh--p1 { left: 89.47%; top: 81.69%; --rot: 28.89deg; }
.iv-sh--p2 { left: 68.14%; top: 69.55%; --rot: 60.09deg; }