/* ════════════════════════════════════════════════════════════
   기찬수학 홈페이지 — 모션 층(시안)
   원칙
   1. 라이브 디자인·구성은 그대로다. 이 파일은 색·크기·배치를 바꾸지 않는다. 모든 움직임의 끝 상태는 라이브와 같다.
   2. 라이브의 CSS 스크롤 애니메이션(animation-timeline — 크롬 계열 전용)을 GSAP 로 옮겨,
      아이폰 사파리·파이어폭스에서도 같은 움직임이 나오게 한다. 두 번 움직이지 않도록 라이브 애니메이션은 끈다.
   3. 숨김·변형은 전부 html.js-km 안에서만 — km 은 '모션 허용 + 스크립트 정상'일 때만 붙고,
      3초 안에 GSAP 가 없으면 떨어진다(라이브 리빌 안전 규칙의 '.js 게이트'와 같은 방식).
════════════════════════════════════════════════════════════ */

/* ── 1. 라이브 CSS 애니메이션 끄기(GSAP 가 대신한다) ──
   .km-still = 인쇄 등에서 모션 없이 완성된 정지 화면이 필요할 때 — 라이브 애니메이션도 처음부터 다시 돌지 않게 */
.js-km .rv,
.km-still .rv,
.js-km .seq-step,
.km-still .seq-step,
.js-km .st-item,
.km-still .st-item,
.js-km .pin-prog i,
.km-still .pin-prog i,
.js-km .progress,
.km-still .progress,
.js-km .rail-bar,
.km-still .rail-bar,
.js-km .mq-inner,
.km-still .mq-inner,
.js-km-hero .cast img,
.km-still .cast img{animation:none !important;}
.km-still .hl::after,.km-still .st-col::after{animation:none !important;}

/* 크롬 전용으로만 보이던 장치를 모든 브라우저에서 보이게(모양은 라이브와 같다) */
.js-km .progress{display:block;}
.js-km .rail-track{display:block;}
@media (width > 980px){ .js-km .pin-prog{display:block;} }

/* 숫자: 라이브는 크롬에서만 CSS 카운터 사본(.cnt-live)을 보여 준다 → 정적 숫자를 그대로 두고 GSAP 가 센다 */
.js-km .cnt-live,.km-still .cnt-live{display:none !important;}
.js-km .cnt-static,.km-still .cnt-static{position:static !important;inline-size:auto !important;block-size:auto !important;
  overflow:visible !important;clip-path:none !important;}

/* §04 진행선 — 라이브의 ::after 를 모든 브라우저에서, 길이는 변수로 */
.js-km .st-col::after{content:'';position:absolute;inset-block:0;inset-inline-start:10px;inline-size:1px;
  background:var(--color-navy);transform-origin:50% 0;transform:scaleY(var(--stp,0));animation:none !important;}
.js-km .st-col .km-dot{position:absolute;inset-inline-start:7px;inset-block-start:0;inline-size:7px;block-size:7px;
  border-radius:50%;background:var(--color-navy);box-shadow:0 0 0 4px rgba(19,29,136,.12);
  transform:translateY(calc(var(--sty,0px) - 3.5px));pointer-events:none;}

/* 키커의 가로선(가상 요소) — 길이를 변수로 그린다. 기본값 1 = 라이브 그대로 */
.js-km .ch-kicker::before{transform:scaleX(var(--kx,1));transform-origin:0 50%;}
/* 인용 따옴표(가상 요소) */
.js-km .quote blockquote::before{transform:scale(var(--qm,1));transform-origin:50% 60%;}

/* 픽셀 캐릭터가 '접속'하듯 나타나는 모자이크 캔버스 — 그 위치에만 잠깐 겹친다 */
.js-km .cast,.js-km .staff-row{position:relative;}
.km-rez{position:absolute;pointer-events:none;image-rendering:pixelated;z-index:1;}

/* 히어로 캐릭터 — GSAP 가 제때(라이브 등장 애니메이션 시작 전) 왔을 때만 .js-km-hero 가 붙고, 모자이크 등장으로 이어받는다.
   늦게 오면 라이브의 등장(c-pop)과 대기 동작(bob)이 그대로 돈다. 이어받은 뒤의 대기 동작은 라이브 bob 을 translate 로 옮긴 것 */
.js-km-hero .cast img{opacity:0;}
@keyframes km-bob{50%{translate:0 -5px}}
.js-km-hero .cast img.km-idle{animation:km-bob 4.6s ease-in-out infinite !important;animation-delay:var(--bd,0s) !important;}

/* ── 2. 첫 화면 — 제목·문장·버튼은 라이브의 CSS 등장 애니메이션을 그대로 쓴다(모든 브라우저에서 즉시 돈다).
      GSAP 가 늦게 와도 첫 화면이 비지 않게, 이 층은 첫 화면 글자를 숨기지 않는다. ── */

/* 전화번호 — 원래 글자는 투명하게 두고(폭·자간 그대로), 그 자리에 같은 글자를 겹쳐 한 글자씩 아래에서 올린다 */
.js-km .ct-phone{position:relative;}
.km-hide-text{color:transparent !important;}
.km-ov{position:absolute;inset:0;pointer-events:none;}
.km-dg{position:absolute;display:block;overflow:hidden;}
.km-dg>span{display:block;}

/* ── 3. 라이브 버그 수정(모션과 무관 — 항상 적용) ──
   모바일(≤640px)에서 교습비 표가 블록으로 바뀌면 caption 이 최소 폭으로 접혀
   '월 4.3주 산정 · 부가세 포함…' 안내가 한 글자씩 세로로 쌓인다(라이브에서 재현, 2026-10-10).
   caption 을 블록으로 두면 라이브의 의도대로 한 문단으로 읽힌다. 라이브에도 같은 한 줄을 권고한다. */
@media (width <= 640px){ .fee-table caption{display:block;} }