/* =========================================================================
   hero-5e.css — 5E 상세 페이지 히어로의 키네틱 타이포 무대
   좌표계는 660x372 고정. 바깥 폭에 맞춰 JS 가 통째로 scale 한다.
   ========================================================================= */
/* ===== STAGE 660×372 (배너형 — 영상이 차지하는 비중을 키운다) ===== */
  .k5 {
    position: relative; width: min(660px, 94vw); aspect-ratio: 660 / 372;
    border-radius: 16px; overflow: hidden;
    background: radial-gradient(130% 105% at 24% 12%, #171b24 0%, #0b0d12 54%, #06070a 100%);
    border: 1px solid var(--line);
    box-shadow: 0 34px 80px -30px rgba(0,0,0,0.95);
    perspective: 1100px; perspective-origin: 50% 50%;
  }
  .k5-cam { position: absolute; inset: 0; transform-style: preserve-3d; }
  .k5-c { position: absolute; left: 50%; top: 50%; }

  .k5-glow {
    width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(76,157,255,0.15), rgba(76,157,255,0) 72%);
    pointer-events: none;
  }
  /* 과목 틴트 — 배경 전체를 그 과목 쪽으로 아주 살짝 기울인다 (색은 JS 가 넣는다) */
  .k5-tint {
    width: 900px; height: 700px; margin: -350px 0 0 -450px;
    opacity: 0; pointer-events: none;
  }
  .k5-vig {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(118% 88% at 50% 45%, transparent 56%, rgba(0,0,0,0.62) 100%);
  }
  .k5-flash { position: absolute; inset: 0; background: #eaf1ff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }

  /* ---- 왼쪽: 글자 칼럼 ---- */
  .k5-idx {
    font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.18em;
    color: var(--dimmer); opacity: 0; white-space: nowrap;
  }
  .k5-word {
    white-space: nowrap; opacity: 0; text-align: right;
    font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
  }
  .k5-rule {
    width: 1px; height: 190px; margin: -95px 0 0 0;
    background: linear-gradient(180deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
    opacity: 0;
  }

  /* ---- 오른쪽: 영상 프레임 — 원본이 1920×1080 이라 16:9 로 맞췄다 ---- */
  .k5-frame {
    width: 462px; height: 260px; margin: -130px 0 0 -231px;
    border-radius: 13px; overflow: hidden;
    background: #101318;
    border: 1px solid var(--line);
    box-shadow: 0 26px 56px -22px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,0.05);
    opacity: 0;
  }
  .k5-clip {
    position: absolute; inset: 0; opacity: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(158deg, #171b21 0%, #0f1216 100%);
  }
  .k5-clip video, .k5-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .k5-clip .ph { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #4e5663; letter-spacing: 0.06em; }
  .k5-cap { font-size: 13px; color: var(--dim); white-space: nowrap; opacity: 0; }

  .k5-dots { display: flex; gap: 7px; opacity: 0; }
  .k5-dot { width: 14px; height: 2px; border-radius: 1px; background: rgba(255,255,255,0.16); }
  .k5-dot i { display: block; height: 100%; width: 0; border-radius: 1px; }

  /* ---- 바람개비로 날아가는 E (색은 JS 가 넣는다) ----
     글자는 JS 가 인라인 SVG 패스로 채운다(glyphs-5e.js). Georgia 가 없는
     기기에서 다른 폰트로 대체되는 것을 막기 위해서다. font-* 는 스크립트가
     못 뜬 경우의 대비이자, SVG 높이가 em 기준이라 크기를 정하는 역할도 한다. */
  .k5-e {
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600;
    font-size: 34px; opacity: 0; margin: -24px 0 0 -12px;
  }

  /* 합체 카운터 — E → 2E → 3E → 4E → 5E 로 빠르게 올라간다 */
  .k5-count {
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 600;
    font-size: 88px; color: #fff; opacity: 0; white-space: nowrap;
    margin: -62px 0 0 -80px; width: 160px; text-align: center;
    /* 패스에는 text-shadow 가 안 먹는다 — 같은 번짐을 filter 로 */
    filter: drop-shadow(0 0 44px rgba(90,162,255,0.85));
  }
  .k5-e svg, .k5-count svg { vertical-align: baseline; overflow: visible; }

  /* ---- 최종 5E (150px) ---- */
  /* 마크는 CSS 로 흉내 내지 않고 실제 로고 SVG 를 그대로 쓴다.
     직접 그렸더니 그라데이션 색(#24324f vs 원본 #23366b)과 모서리 반경이
     미묘하게 달라, 인계 순간 아이콘이 바뀌는 게 눈에 띄었다.
     모서리는 SVG 자체가 rx=20/96 으로 둥글다 — 같은 비율만 맞춰준다. */
  .k5-final {
    width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 20.8%;
    box-shadow: 0 28px 64px -18px rgba(0,0,0,1);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; overflow: hidden;
  }
  .k5-final img { width: 100%; height: 100%; display: block; }
  .k5-sweep {
    position: absolute; top: -60%; left: -120%; width: 55%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: rotate(18deg); pointer-events: none;
  }
  /* 락인 순간 다섯 색이 차례로 퍼진다 */
  .k5-ring {
    width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; pointer-events: none;
  }

  .k5-stackword {
    white-space: nowrap; opacity: 0; font-size: 27px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--ink);
  }
  /* ③ 한글 카피 — 크고 밝게 */
  .k5-tag {
    font-size: 17px; font-weight: 500; color: #e6ecf7; white-space: nowrap; opacity: 0;
    letter-spacing: -0.01em;
  }

  @media (prefers-reduced-motion: reduce) { .k5 * { animation: none !important; } }