/* ══════════════════════════════════════════════════════════
   모바일 오버라이드를 걷어냈다 — 2026-08-02
   피그마 「오프라인 강의 - 모바일」(3457:2174) 의 이 블록들은
   데스크탑을 360 으로 그대로 줄인 것이다. --H 로 계산하면 딱 맞는다.
     off-lecture  7976.93 -> 1495.7  (시안 1496)
     off-story   24520.2  -> 4597.5  (시안 4598)
     off-sp      13754.79 -> 2579.0  (시안 2579)
     off-elite   10213    -> 1914.9  (시안 1915)
   세로로 다시 쌓던 기존 오버라이드가 오히려 높이를 1.5~1.6배로 부풀리고
   2단(사진+패널) 프로필 구성을 무너뜨리고 있었다.
   ══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   오프라인 강의 — 블록 3 이후
   피그마 3398:3432 "오프라인 강의 - 데스크탑" (1920 × 81112)
   좌표는 전부 블록 기준. 값은 calc(var(--u) * N/1920) 또는
   부모 대비 % 로 넣어 어느 폭에서도 비율이 유지된다.
   ═══════════════════════════════════════════════════════════ */

/* ── 블록 3 : AI 디렉팅 프로세스 3분할 + 민트 캡션 바 ──────────
   피그마 3402:164028 y22164.72 1920×946.6
     image 500 (좌) x0      y-2.23  692.09×866.23
     image 501 (중) x705.49 y4.46   685.40×857.30
     image 499 (우) x1404.28 y4.46  517.95×857.30
     바  3402:164029 x-17.86 y861.77 1940.09×84.84  #08FFD0
     글  3402:164030 x272.37 y846.14 1377.49×91.53
         Pretendard SemiBold 40.186 / 줄간격 120.558 / 자간 0.8037 / #000
   ─────────────────────────────────────────────────────────── */
.off-ai{
  --u:var(--pagew);
  position:relative;
  width:100%;
  aspect-ratio:1920/946.6;
  background:var(--black);
  overflow:hidden;
}
.off-ai img{
  position:absolute;
  display:block;
  max-width:none;
  object-fit:cover;
}
.off-ai .ai-l{
  left:0;
  top:calc(-2.23/946.6 * 100%);
  width:calc(692.09/1920 * 100%);
  aspect-ratio:692.09/866.23;
}
.off-ai .ai-m{
  left:calc(705.49/1920 * 100%);
  top:calc(4.46/946.6 * 100%);
  width:calc(685.40/1920 * 100%);
  aspect-ratio:685.40/857.30;
}
.off-ai .ai-r{
  left:calc(1404.28/1920 * 100%);
  top:calc(4.46/946.6 * 100%);
  width:calc(517.95/1920 * 100%);
  aspect-ratio:517.95/857.30;
}
.off-ai .ai-bar{
  position:absolute;
  left:calc(-17.86/1920 * 100%);
  top:calc(861.77/946.6 * 100%);
  width:calc(1940.09/1920 * 100%);
  height:calc(84.84/946.6 * 100%);
  background:#08FFD0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  font-size:calc(var(--u) * 40.186/1920);
  line-height:1;
  letter-spacing:calc(var(--u) * 0.8037/1920);
  font-weight:600;
  color:#000;
  text-align:center;
  white-space:nowrap;
}

/* ── 모바일 ────────────────────────────────────────────────
   3분할을 세로 1열로 내리고 캡션 바는 폭 전체를 쓴다 */
/* 모바일 — 피그마 3457:20387 360x177 실측
   세로 1열로 내리면 536px 이 되어 시안의 3배가 된다.
   시안은 그대로 3열이다 : 거터 x130~131 / x261~262
   폭 130 / 129 / 97, 높이는 각 이미지 비율(0.8017 / 0.7994 / 0.6018)이 알아서 161 을 만든다.
   초록 바는 y161~176 (h16) */
@media (max-width:820px){
  .off-ai{
    aspect-ratio:auto;      /* 열 폭이 정해지면 이미지 비율이 높이(약 162)를 만든다 */
    display:grid;
    grid-template-columns:130fr 129fr 97fr;
    grid-template-rows:1fr auto;
    column-gap:calc(var(--m) * 2/360);
    row-gap:0;
    padding:0;
  }
  /* 데스크탑의 .off-ai .ai-l(0,2,0) 이 .off-ai img(0,1,1) 를 이겨
     폭이 36% 로 줄어들었다. 같은 특정도로 다시 눌러준다. */
  .off-ai img,
  .off-ai .ai-l,
  .off-ai .ai-m,
  .off-ai .ai-r{
    position:static;
    left:auto; top:auto;
    width:100%;
    height:auto;            /* 잘라내지 말 것 — 세 장이 한 장면의 분할이다 */
    object-fit:fill;
    align-self:start;
  }
  .off-ai .ai-bar{
    position:static;
    grid-column:1 / -1;
    width:100%;
    height:calc(var(--m) * 16/360);
    display:flex; align-items:center; justify-content:center;
    padding:0;
    margin:0;
    font-size:calc(var(--m) * 8/360);
    line-height:1;
    letter-spacing:calc(var(--m) * 0.4/360);
  }
}

/* ── 블록 4 : AI 특강 상세 ─────────────────────────────────
   피그마 3402:164040 y23111.32 1920×7976.93
   좌표는 전부 블록 기준(절대배치). 4개 구역으로 나뉜다.
     ① 0~2154    특강 인트로 + 등록 유도 박스 + 마스코트
     ② 2154~3986 DIRECTOR'S PROFILE (정주 감독)
     ③ 3986~5358 SUPERVISOR'S PROFILE
     ④ 5358~7977 언론/후기 모음 콜라주
   ─────────────────────────────────────────────────────── */
.off-lecture{
  --u:var(--pagew);
  --H:7976.93;                     /* 블록 높이 — % 계산의 분모 */
  position:relative;
  width:100%;
  aspect-ratio:1920/7976.93;
  background:var(--black);
}
.off-lecture > *{ position:absolute; margin:0 }
.off-lecture img{ display:block; max-width:none }

/* ① 특강 인트로 ──────────────────────────────────────────
   특강      3402:164043 TLAB 227.721px #08FFD0
             노드박스 x95.82 y66.98 430.88×348.70 (=자폭)
             실제 잉크 250.72×207.23 · 섹션 렌더 실측 x84.8 y126.5
   제목      3402:164045 x424.19 y113.86 1480.19×236.65
             Pretendard ExtraBold 98.233 / 자간 -2.947 / 줄간격 118.325
   구분선    3402:164047 x95.20  y375.83 280.43  · #3A3A3A 2.23256
             3402:164046 x420.44 y375.83 1402.54 · 〃
   본문      3402:164044 x426.42 y406.33 1431.07 · SemiBold 39.07 / 66.977
             강조 #08FFD0
   ------------------------------------------------------- */
.off-lecture .lc-badge{
  left:calc(84.8/1920 * 100%);
  top:calc(126.5/var(--H) * 100%);
  width:calc(250.72/1920 * 100%);
  line-height:0;
}
.off-lecture .lc-badge svg.tlab{ width:100%;height:auto;color:#08FFD0 }

.off-lecture .lc-title{
  left:calc(424.19/1920 * 100%);
  top:calc(113.86/var(--H) * 100%);
  width:calc(1480.19/1920 * 100%);
  font-size:calc(var(--u) * 98.233/1920);
  line-height:calc(var(--u) * 118.325/1920);
  letter-spacing:calc(var(--u) * -2.947/1920);
  font-weight:800;
  color:#fff;
}
.off-lecture .lc-title b{ font-weight:700 }

.off-lecture .lc-rule{
  top:calc((375.83 - 1.116)/var(--H) * 100%);
  height:calc(2.23256/var(--H) * 100%);
  background:#3A3A3A;
  border:0;
}
.off-lecture .lc-rule.left { left:calc(95.20/1920 * 100%);  width:calc(280.43/1920 * 100%) }
.off-lecture .lc-rule.right{ left:calc(420.44/1920 * 100%); width:calc(1402.54/1920 * 100%) }

.off-lecture .lc-body{
  left:calc(426.42/1920 * 100%);
  top:calc(406.33/var(--H) * 100%);
  width:calc(1431.07/1920 * 100%);
  font-size:calc(var(--u) * 39.07/1920);
  line-height:calc(var(--u) * 66.977/1920);
  font-weight:600;
  color:#fff;
  word-break:break-word;
}
.off-lecture .lc-body em{ font-style:normal;color:#08FFD0 }

/* 등록 유도 박스 3402:164041 x111.63 y1004.65 1696.74×535.81
   테두리 8.93 #EBEBFF · radius 223.256
   배경 linear-gradient(170.643deg,#063908 6.66%,#000 41.33%,#063908 94.95%) */
.off-lecture .lc-box{
  left:calc(111.63/1920 * 100%);
  top:calc(1004.65/var(--H) * 100%);
  width:calc(1696.74/1920 * 100%);
  height:calc(535.81/var(--H) * 100%);
  border:calc(var(--u) * 8.93/1920) solid #EBEBFF;
  border-radius:calc(var(--u) * 223.256/1920);
  background-image:linear-gradient(170.643deg,#063908 6.6638%,#000 41.327%,#063908 94.946%);
  box-sizing:border-box;
}

/* 등록 문구 3402:164042 x44.65 y1158.70 1824×215
   Pretendard Bold 111.628 / 줄간격 136.186 / 자간 -5.5814 / #063908
   2번째 줄 "지금 당장 등록!" 은 흰색, 그 앞에 FVA 워드마크가 들어간다 */
.off-lecture .lc-cta{
  left:calc(44.65/1920 * 100%);
  top:calc(1132.6/var(--H) * 100%);   /* 피그마 1158.70 은 캡높이 트림 기준 -> 줄상자 기준 -26.1 */
  width:calc(1824/1920 * 100%);
  font-size:calc(var(--u) * 111.628/1920);
  line-height:calc(var(--u) * 136.186/1920);
  letter-spacing:calc(var(--u) * -5.5814/1920);
  font-weight:700;
  color:#063908;
  text-align:center;
  white-space:nowrap;
}
.off-lecture .lc-cta .wm{
  display:inline-block;
  width:calc(223.26/1824 * 100%);
  aspect-ratio:223.256/80.8736;      /* 피그마 3402:164097 */
  vertical-align:baseline;
  margin:0 calc(17.7/1824 * 100%) 0 calc(10.3/1824 * 100%);
  line-height:0;
}
.off-lecture .lc-cta .wm svg{ display:block;width:100%;height:auto;color:#2CFF05;fill:currentColor }
.off-lecture .lc-cta .w{ color:#fff }

/* 마스코트 3402:164155 x44.65 y1459.04 810.37×747.77 */
.off-lecture .lc-mascot{
  left:calc(44.65/1920 * 100%);
  top:calc(1459.04/var(--H) * 100%);
  width:calc(810.37/1920 * 100%);
  height:auto;
  z-index:2;
}

/* ── 모바일 ─────────────────────────────────────────────── */


/* ② 감독 프로필 ── 피그마 3402:164048 (블록기준 y2154.42, 1920×1549.395)
   패널 #23DC0E · 왼쪽 사진(마스크로 초록에 녹아든다) · 오른쪽 검정 글자
   좌표는 이 패널 기준. 제목 2개는 TLAB 이라 SVG, 나머지는 전부 실제 텍스트.
     DIRECTOR’S  TLAB 197.489 자간 -5.9247  잉크 778.5×181.89  (x1036.0 y139.0)
     PROFILE     TLAB 296.271 자간 -11.8509 잉크 788.38×252.72 (x1036.0 y338.4)
     정주 감독    ExtraBold 62.696 자간 -1.2539   (x1032.6 y696.8)
     (MV…)       Bold 40.32   자간 -1.2096       (x1274.34)
     현) BOWIE…   Bold 40.317  자간 -1.2095       (x1036.0 y774.5)
     구분선       x1038.70 y835.39 789.85 · 굵기 3.34
     주요 이력    ExtraBold 46.683 자간 -1.4005   (x1032.6 y953.7)
     이력 5줄     SemiBold 40.317 자간 -1.2095 줄간격 66.07 (x1036.0 y1038.2)
   ------------------------------------------------------------------ */
.off-lecture .lc-prof{
  left:0;
  top:calc(2154.42/var(--H) * 100%);
  width:100%;
  height:calc(1549.395/var(--H) * 100%);
  background:#23DC0E;
  overflow:hidden;
}
.off-lecture .lc-prof > *{ position:absolute; margin:0 }

/* 사진 — 내보내기에서 마스크가 평평해져 CSS 로 다시 초록에 녹인다 */
.off-lecture .pf-photo{
  left:0; top:0;
  width:calc(897.49/1920 * 100%);
  height:100%;
  object-fit:cover; object-position:center;
}
/* 초록으로 녹아드는 층 — 피그마는 사진 전체에 초록이 감돌다가 오른쪽에서 완전히 잠긴다.
   마스크만 쓰면 왼쪽 사진이 너무 날것으로 보여서 초록 그라데이션을 위에 덮는다. */
.off-lecture .pf-fade{
  left:0; top:0;
  width:calc(897.49/1920 * 100%);
  height:100%;
  background:linear-gradient(to right,
    rgba(35,220,14,0)   0%,
    rgba(35,220,14,.07) 32%,
    rgba(35,220,14,.42) 62%,
    rgba(35,220,14,.88) 87%,
    #23DC0E 100%);
  pointer-events:none;
}

.off-lecture .pf-h1,
.off-lecture .pf-h2{ line-height:0; color:#000 }
.off-lecture .pf-h1{ left:calc(1036.0/1920 * 100%); top:calc(139.0/1549.395 * 100%);
                     width:calc(778.5/1920 * 100%) }
.off-lecture .pf-h2{ left:calc(1036.0/1920 * 100%); top:calc(338.4/1549.395 * 100%);
                     width:calc(788.38/1920 * 100%) }
.off-lecture .pf-h1 svg.tlab,
.off-lecture .pf-h2 svg.tlab{ width:100%;height:auto;color:#000;fill:currentColor }

.off-lecture .pf-name{
  left:calc(1032.6/1920 * 100%); top:calc(696.8/1549.395 * 100%);
  font-size:calc(var(--u) * 62.696/1920);
  letter-spacing:calc(var(--u) * -1.2539/1920);
  line-height:1.1; font-weight:800; color:#000; white-space:nowrap;
}
.off-lecture .pf-name span{
  font-size:calc(var(--u) * 40.32/1920);
  letter-spacing:calc(var(--u) * -1.2096/1920);
  font-weight:700; margin-left:calc(var(--u) * 11/1920);
}
.off-lecture .pf-now{
  left:calc(1036.0/1920 * 100%); top:calc(774.5/1549.395 * 100%);
  font-size:calc(var(--u) * 40.317/1920);
  letter-spacing:calc(var(--u) * -1.2095/1920);
  line-height:1.1; font-weight:700; color:#000; white-space:nowrap;
}
.off-lecture .pf-rule{
  left:calc(1038.70/1920 * 100%); top:calc(835.39/1549.395 * 100%);
  width:calc(789.85/1920 * 100%);
  height:calc(var(--u) * 3.34/1920);
  background:#000; border:0;
}
.off-lecture .pf-sub{
  left:calc(1032.6/1920 * 100%); top:calc(953.7/1549.395 * 100%);
  font-size:calc(var(--u) * 46.683/1920);
  letter-spacing:calc(var(--u) * -1.4005/1920);
  line-height:1.1; font-weight:800; color:#000;
}
.off-lecture .pf-list{
  left:calc(1036.0/1920 * 100%); top:calc(1038.2/1549.395 * 100%);
  list-style:none; padding:0;
  font-size:calc(var(--u) * 40.317/1920);
  letter-spacing:calc(var(--u) * -1.2095/1920);
  line-height:calc(var(--u) * 66.07/1920);
  font-weight:600; color:#000; white-space:nowrap;
}



/* ③ 슈퍼바이저 프로필 ── 피그마 3402:164073 (블록기준 y3703.81, 1920×1549.395)
   ② 의 좌우 반전. 패널 #08FFD0 · 왼쪽 검정 글자 · 오른쪽 사진(민트로 녹아든다)
     SUPERVISOR’S TLAB 164.817 자간 -4.9445 잉크 780.11×151.8 (x64.3 y175.1)
     PROFILE      TLAB 296.271 (② 와 동일)                    (x64.3 y340.7)
     정주 감독 x60.8 y695.7 · 현)BOWIE x64.3 y773.4
     구분선 x66.9 y834.2 789.85 · 주요 이력 x60.8 y952.6 · 이력 x64.3 y1037.1
   ------------------------------------------------------------------ */
.off-lecture .lc-sup{
  left:0;
  top:calc(3703.81/var(--H) * 100%);
  width:100%;
  height:calc(1549.395/var(--H) * 100%);
  background:#08FFD0;
  overflow:hidden;
}
.off-lecture .lc-sup > *{ position:absolute; margin:0 }
.off-lecture .sv-photo{
  right:0; top:0;
  width:calc(960/1920 * 100%);
  height:100%;
  object-fit:cover; object-position:center;
}
.off-lecture .sv-fade{
  right:0; top:0;
  width:calc(960/1920 * 100%);
  height:100%;
  background:linear-gradient(to left,
    rgba(8,255,208,0)   0%,
    rgba(8,255,208,.07) 32%,
    rgba(8,255,208,.42) 62%,
    rgba(8,255,208,.88) 87%,
    #08FFD0 100%);
  pointer-events:none;
}
.off-lecture .sv-h1,
.off-lecture .sv-h2{ line-height:0; color:#000 }
.off-lecture .sv-h1{ left:calc(64.3/1920 * 100%); top:calc(175.1/1549.395 * 100%);
                     width:calc(780.11/1920 * 100%) }
.off-lecture .sv-h2{ left:calc(64.3/1920 * 100%); top:calc(340.7/1549.395 * 100%);
                     width:calc(788.38/1920 * 100%) }
.off-lecture .sv-h1 svg.tlab,
.off-lecture .sv-h2 svg.tlab{ width:100%;height:auto;color:#000;fill:currentColor }
.off-lecture .sv-name{
  left:calc(60.8/1920 * 100%); top:calc(695.7/1549.395 * 100%);
  font-size:calc(var(--u) * 62.696/1920);
  letter-spacing:calc(var(--u) * -1.2539/1920);
  line-height:1.1; font-weight:800; color:#000; white-space:nowrap;
}
.off-lecture .sv-name span{
  font-size:calc(var(--u) * 40.32/1920);
  letter-spacing:calc(var(--u) * -1.2096/1920);
  font-weight:700; margin-left:calc(var(--u) * 11/1920);
}
.off-lecture .sv-now{
  left:calc(64.3/1920 * 100%); top:calc(773.4/1549.395 * 100%);
  font-size:calc(var(--u) * 40.317/1920);
  letter-spacing:calc(var(--u) * -1.2095/1920);
  line-height:1.1; font-weight:700; color:#000; white-space:nowrap;
}
.off-lecture .sv-rule{
  left:calc(66.9/1920 * 100%); top:calc(834.2/1549.395 * 100%);
  width:calc(789.85/1920 * 100%);
  height:calc(var(--u) * 3.34/1920);
  background:#000; border:0;
}
.off-lecture .sv-sub{
  left:calc(60.8/1920 * 100%); top:calc(952.6/1549.395 * 100%);
  font-size:calc(var(--u) * 46.683/1920);
  letter-spacing:calc(var(--u) * -1.4005/1920);
  line-height:1.1; font-weight:800; color:#000;
}
.off-lecture .sv-list{
  left:calc(64.3/1920 * 100%); top:calc(1037.1/1549.395 * 100%);
  list-style:none; padding:0;
  font-size:calc(var(--u) * 40.317/1920);
  letter-spacing:calc(var(--u) * -1.2095/1920);
  line-height:calc(var(--u) * 66.07/1920);
  font-weight:600; color:#000; white-space:nowrap;
}



/* ④ 언론 보도 콜라주 ── 피그마 3402:164101 (블록기준 y5358.14, 1920×2589.77)
   실제 기사 화면 캡처 3장이 겹쳐진 구성이라 통이미지로 둔다.
   대신 기사 제목은 sr-only 로 넣어 검색에 잡히게 한다. */
.off-lecture .lc-press{
  left:0;
  top:calc(5358.14/var(--H) * 100%);
  width:100%;
  height:calc(2589.77/var(--H) * 100%);
}
.off-lecture .lc-press img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}


/* ══ 블록 5 : 감독 성장 스토리 + 커리큘럼 ═══════════════════
   피그마 3402:181971 y31088.3 1920×24520.2 — 이 페이지에서 가장 큰 블록.
   전체 구조는 docs/오프라인_블록5_노드지도.md 참고.
   여기서는 스토리 구간(0~7300)부터 채운다.

   스토리 텍스트 공통 : Pretendard SemiBold 98.233 / 줄간격 120.558 /
                        자간 -2.947 / 가운데 정렬. 강조는 #2CFF05.
   사진은 전부 어둡게 깔리고 그 위에 글자가 올라간다.
   ═══════════════════════════════════════════════════════ */
.off-story{
  --u:var(--pagew);
  --H:24520.2;
  position:relative;
  width:100%;
  aspect-ratio:1920/24520.2;
  background:var(--black);
  overflow:hidden;
}
.off-story > *{ position:absolute; margin:0 }
.off-story img{ display:block; max-width:none; width:100%; object-fit:cover }

/* 사진 위 어둠 — 피그마 3402:182005 (y-281.3, 1920x8434.6) 오버레이 벡터.
   섹션 렌더에서 재보니 사진 밝기가 원본의 0.14 배로 일정하다 = 검정 86%. */
.off-story .story-dim{
  left:0; top:0; width:100%;
  height:calc(8153.3/var(--H) * 100%);
  background:rgba(0,0,0,.86);
  z-index:1;
  pointer-events:none;
}

/* 사진 밴드 */
.off-story .sb{ left:0; width:100% }
.off-story .sb1{ top:0;                          height:calc(1473.5/var(--H) * 100%) }
.off-story .sb2{ top:calc(1377.5/var(--H) * 100%); height:calc(1328.4/var(--H) * 100%) }
.off-story .sb3{ top:calc(2703.6/var(--H) * 100%); height:calc(1319.3/var(--H) * 100%) }
.off-story .sb img{ height:100% }

/* 스토리 문장 */
.off-story .st{
  left:calc(51.3/1920 * 100%);
  width:calc(1817.3/1920 * 100%);
  text-align:center;
  font-size:calc(var(--u) * 98.233/1920);
  line-height:calc(var(--u) * 120.558/1920);
  letter-spacing:calc(var(--u) * -2.947/1920);
  font-weight:600;
  color:#fff;
  z-index:2;
}
.off-story .st em{ font-style:normal; color:var(--green) }
.off-story .st1{ top:calc(553.7/var(--H) * 100%) }
.off-story .st2{ top:calc(1906.6/var(--H) * 100%) }
.off-story .st3{ top:calc(3165.8/var(--H) * 100%) }


/* 밴드4 — 큰 사진(노드가 좌우로 넘쳐 화면 안쪽 1920 만 내보내진다) +
   문장 2줄 + 육각형 역량 차트 */
.off-story .sb4{ top:calc(4025.3/var(--H) * 100%); height:calc(1906.6/var(--H) * 100%) }
.off-story .st4{ top:calc(4264.2/var(--H) * 100%);
                 left:calc(82.6/1920 * 100%); width:calc(1757.0/1920 * 100%) }
.off-story .radar{
  left:calc(194.2/1920 * 100%);
  top:calc(4632.6/var(--H) * 100%);
  width:calc(1607.4/1920 * 100%);
  height:calc(1205.6/var(--H) * 100%);
  z-index:2;
}
/* ⚠ 차트 export 는 검정 배경이 구워져 나온다(알파 전부 255). CSS 합성모드는 부모가
     쌓임 맥락을 만들어 격리되므로 안 먹는다 — 그림 자체를 투명하게 구워야 한다.
   ⚠ 2026-08-28 다시 구웠다. 전 파일은 **밝기가 4배로 부풀어 초록이 255 에서 잘려**
     글자 획이 서로 붙어 뭉개져 있었다(피그마 원본은 초록 최대 62). 게다가 「투명으로
     만들었다」던 것과 달리 알파가 전부 255 였다.
     지금은 피그마 2639:108254 를 3배로 받아, 밝기를 알파로 옮기되 **감마 1.3** 으로
     번짐만 눌렀다. 획이 안 붙고 포화도 없다(255 화소 0.0001%). */
.off-story .radar img{ height:100%; object-fit:contain }

/* 밴드5·6 */
.off-story .sb5{ top:calc(5931.9/var(--H) * 100%); height:calc(727.9/var(--H) * 100%) }
.off-story .sb5 .l{ position:absolute;left:0;top:0;width:calc(1058.6/1920 * 100%);height:100% }
.off-story .sb5 .r{ position:absolute;left:calc(1026.2/1920 * 100%);top:0;
                    width:calc(900.2/1920 * 100%);height:calc(700.6/727.9 * 100%) }
.off-story .st5{ top:calc(6219.9/var(--H) * 100%);
                 left:calc(82.6/1920 * 100%); width:calc(1757.0/1920 * 100%); color:var(--green) }
.off-story .sb6{ top:calc(6632.9/var(--H) * 100%); height:calc(578.2/var(--H) * 100%) }
.off-story .sb6 .l{ position:absolute;left:calc(-42.4/1920 * 100%);top:0;
                    width:calc(991.5/1920 * 100%);height:100% }
.off-story .sb6 .r{ position:absolute;left:calc(946.5/1920 * 100%);top:0;
                    width:calc(991.5/1920 * 100%);height:100% }
/* "모두 알려드립니다." — Pretendard Black 196.465 / 줄간격 178.605 / 자간 -4.4651
   피그마 y6849.5 는 캡높이 트림 기준이라 줄상자 기준으로 20.5 올려 잡는다 */
.off-story .st6{ top:calc(6829.0/var(--H) * 100%);
                 left:calc(93.8/1920 * 100%); width:calc(1732.5/1920 * 100%);
                 color:var(--green); font-weight:900;
                 font-size:calc(var(--u) * 196.465/1920);
                 line-height:calc(var(--u) * 178.605/1920);
                 letter-spacing:calc(var(--u) * -4.4651/1920) }





/* ── 커리큘럼 표 (블록5 y7626~10254) ────────────────────────
   제목 FVA CURRICULUM : TLAB 잉크 1745.1×263.7 (x81.4 y7608.7)
   헤더 흰 도형 3402:204711 x95.9 y7954.8 1728.1×254 (좌상단 노치)
   본문 Pretendard SemiBold 60.279 / 자간 -1.8084
   강조행 5·10 #2CFF05 (x96 1495.8×134) · 15행 #08FFD0 (x96 1728×134)
   세로 점선 x1592.5 y8168.9 · 높이 1781.6
   ------------------------------------------------------- */
.off-story .cur-h{ left:calc(81.4/1920 * 100%); top:calc(7608.7/var(--H) * 100%);
                   width:calc(1745.1/1920 * 100%); line-height:0; z-index:2 }
.off-story .cur-h svg.tlab{ width:100%;height:auto;color:#fff;fill:currentColor }
.off-story .cur-note{
  left:calc(549.2/1920 * 100%); top:calc(7940.7/var(--H) * 100%);
  width:calc(1357.4/1920 * 100%);
  font-size:calc(var(--u) * 42/1920); line-height:1.267;
  letter-spacing:calc(var(--u) * -1.26/1920);
  font-weight:700; color:#fff; text-align:right; z-index:2;
}
.off-story .cur-head{
  left:calc(95.9/1920 * 100%); top:calc(7954.8/var(--H) * 100%);
  width:calc(1728.1/1920 * 100%); height:calc(254/var(--H) * 100%); z-index:1;
}
.off-story .cur-head svg{ display:block;width:100%;height:100% }
.off-story .cur-table{ left:0; top:0; width:100%; height:100%; z-index:2 }
.off-story .cur-table > *{ position:absolute; margin:0 }
.off-story .ch{ font-size:calc(var(--u) * 60.279/1920); line-height:1.2;
                letter-spacing:calc(var(--u) * -1.8084/1920);
                font-weight:700; color:#000; white-space:nowrap }
.off-story .cn{ font-size:calc(var(--u) * 60.279/1920); line-height:1.2;
                letter-spacing:calc(var(--u) * -1.8084/1920);
                font-weight:700; color:var(--green); white-space:nowrap }
.off-story .ct{ left:calc(307.0/1920 * 100%);
                font-size:calc(var(--u) * 60.279/1920); line-height:1.2;
                letter-spacing:calc(var(--u) * -1.8084/1920);
                font-weight:600; color:#fff; white-space:nowrap }
.off-story .cbar{ left:calc(96.0/1920 * 100%); height:calc(134/var(--H) * 100%);
                  width:calc(1495.8/1920 * 100%); background:var(--green); z-index:-1 }
.off-story .cbar.wide{ width:calc(1728.0/1920 * 100%); background:#08FFD0 }
.off-story .con{ color:#000 }              /* 강조행 위 글자는 검정 */
.off-story .cdash{
  left:calc(1592.5/1920 * 100%); top:calc(8168.9/var(--H) * 100%);
  width:calc(2/1920 * 100%); height:calc(1781.6/var(--H) * 100%);
  background:repeating-linear-gradient(to bottom,#fff 0 10px,transparent 10px 22px);
}
.off-story .cpk{ left:calc(1648.4/1920 * 100%);
                 font-size:calc(var(--u) * 60.279/1920); line-height:1.2;
                 letter-spacing:calc(var(--u) * -1.8084/1920);
                 font-weight:700; color:var(--green); white-space:nowrap }
.off-story .cpk small{ display:block; font-size:calc(var(--u) * 32/1920); font-weight:600 }
.off-story .cfoot{
  left:calc(104.9/1920 * 100%); top:calc(10120.2/var(--H) * 100%);
  width:calc(1415.4/1920 * 100%);
  font-size:calc(var(--u) * 47/1920); line-height:calc(var(--u) * 67/1920);
  letter-spacing:calc(var(--u) * -1.41/1920);
  color:#fff; z-index:2; text-indent:calc(var(--u) * -24/1920); padding-left:calc(var(--u) * 24/1920);
}



/* ── 골라 듣는 수강권 (블록5 y10380~13670) ──────────────────
   제목·캐릭터·하단 대형문구는 피그마에서 이미 아웃라인 벡터로 짜인
   장식 레터링이라 블록5 원본 렌더(1:1)에서 잘라 이미지로 쓴다.
   초록 블롭 3개는 노드별로 뽑고, 그 위 글자는 전부 실제 텍스트.
   블롭 export 에 검정 배경이 구워져 나와 밝기를 알파로 옮겼다
   (서로 겹치는 구조라 불투명하면 뒤 블롭을 잘라먹는다).
   ------------------------------------------------------- */
.off-story .pz-title{ left:calc(40/1920 * 100%); top:calc(10380/var(--H) * 100%);
                      width:calc(1840/1920 * 100%); height:calc(818/var(--H) * 100%); z-index:2 }
.off-story .pz-arc{ left:calc(50/1920 * 100%); top:calc(11630/var(--H) * 100%);
                    width:calc(550/1920 * 100%); height:calc(170/var(--H) * 100%); z-index:2 }
.off-story .pz-arc img{ height:100%;object-fit:contain }
.off-story .pz-blob{ z-index:2 }
.off-story .pz-b1{ left:calc(95.3/1920 * 100%);  top:calc(11860.4/var(--H) * 100%);
                   width:calc(658.3/1920 * 100%); height:calc(838.0/var(--H) * 100%) }
.off-story .pz-b2{ left:calc(634.2/1920 * 100%); top:calc(11581.8/var(--H) * 100%);
                   width:calc(657.6/1920 * 100%); height:calc(838.7/var(--H) * 100%); z-index:3 }
.off-story .pz-b3{ left:calc(1172.5/1920 * 100%);top:calc(11286.7/var(--H) * 100%);
                   width:calc(658.0/1920 * 100%); height:calc(838.6/var(--H) * 100%); z-index:4 }
.off-story .pz-char{ left:calc(1352/1920 * 100%); top:calc(11432/var(--H) * 100%);
                     width:calc(296/1920 * 100%); height:calc(156/var(--H) * 100%); z-index:5 }
.off-story .pz-blob img,.off-story .pz-char img,.off-story .pz-title img{ height:100%;object-fit:contain }

.off-story .pz-n{ font-weight:900; color:#000; line-height:1.15; white-space:nowrap;
                  letter-spacing:calc(var(--u) * -4/1920);
                  font-size:calc(var(--u) * 159/1920) }
.off-story .pz-s{ font-weight:700; color:#000; line-height:1.2; white-space:nowrap;
                  font-size:calc(var(--u) * 53/1920) }
.off-story .pz-bt{ font-weight:800; color:var(--green); line-height:1.15; white-space:nowrap;
                   font-size:calc(var(--u) * 70/1920) }
.off-story .pz-pill{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--green); border-radius:999px; color:#000; font-weight:700;
  font-size:calc(var(--u) * 52/1920); line-height:1.24;
  box-shadow:0 0 calc(var(--u)*34/1920) rgba(44,255,5,.55);
  z-index:6;
}
/* 흰 라벨은 서로 겹치지 않게 */
.off-story .pz-tag{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#fff; color:#000; font-weight:700;
  font-size:calc(var(--u) * 52/1920); line-height:1.24;
  padding:calc(var(--u) * 14/1920) calc(var(--u) * 26/1920);
  z-index:6;
}
.off-story .pz-q{ font-weight:700; color:#fff; line-height:1.2; white-space:nowrap;
                  font-size:calc(var(--u) * 72/1920); z-index:2 }
.off-story .pz-line{ left:calc(187.5/1920 * 100%); top:calc(13323.4/var(--H) * 100%);
                     width:calc(754.6/1920 * 100%); height:calc(var(--u) * 4/1920);
                     background:#fff; z-index:2 }
.off-story .pz-parts{ left:calc(90/1920 * 100%); top:calc(13400/var(--H) * 100%);
                      width:calc(1750/1920 * 100%); height:calc(270/var(--H) * 100%); z-index:2 }



/* ── 포트폴리오 카드 + 클래스 특징 + 추천 5개 (블록5 y14125~20700) ──
   문구 Pretendard Bold 98.233 / 자간 -2.947 · 설명 45 / SemiBold
   마스코트는 원본 렌더에서 잘라 투명 WebP 로
   ------------------------------------------------------------- */
.off-story .pf-card{ left:calc(111.6/1920 * 100%); top:calc(14125.4/var(--H) * 100%);
                     width:calc(1696.7/1920 * 100%); height:calc(2036.1/var(--H) * 100%);
                     background:radial-gradient(120% 90% at 30% 0%,#0d2a10 0%,#080808 62%);
                     border:calc(var(--u) * 3/1920) solid rgba(44,255,5,.42);
                     border-radius:calc(var(--u) * 60/1920);
                     box-shadow:0 0 calc(var(--u)*90/1920) rgba(44,255,5,.18) inset;
                     z-index:2 }
.off-story .pf-img{ left:calc(392.9/1920 * 100%); top:calc(14223.6/var(--H) * 100%);
                    width:calc(1134.1/1920 * 100%); height:calc(1173/var(--H) * 100%); z-index:3 }
/* ⚠ 이 그림은 알파가 없는 **네모**다 — 가장자리 색이 rgb(0,6,1)~(5,52,6) 의 어두운 초록이라
     검은 바탕 위에 얹히면 네모 경계가 층져 보였다(2026-08-28 지적).
     그림을 다시 굽는 대신 네 변을 마스크로 녹인다. 가운데는 그대로 둔다.
   ⚠ 가로·세로 두 겹을 겹쳐 쓰므로 mask-composite 가 있어야 네 변이 다 녹는다.
     그게 없는 옛 브라우저에서는 가로만 녹는다 — 지금보다 나쁘지는 않다. */
.off-story .pf-img img{ height:100%;object-fit:cover;border-radius:calc(var(--u) * 24/1920);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.off-story .pf-txt{ left:calc(274.6/1920 * 100%); top:calc(15415.8/var(--H) * 100%);
                    width:calc(1372/1920 * 100%); z-index:3; text-align:center;
                    font-size:calc(var(--u) * 62/1920); line-height:calc(var(--u) * 103.7/1920);
                    letter-spacing:calc(var(--u) * -1.86/1920); font-weight:700; color:#fff }
.off-story .pf-txt em{ font-style:normal;color:var(--green) }
.off-story .pf-note{ left:calc(111.6/1920 * 100%); top:calc(15848.9/var(--H) * 100%);
                     width:calc(1670/1920 * 100%); z-index:3; text-align:center;
                     font-size:calc(var(--u) * 39/1920); line-height:1.2; color:#8C8C8C }

.off-story .cf-t{ left:calc(705/1920 * 100%); top:calc(16654/var(--H) * 100%);
                  font-size:calc(var(--u) * 66/1920); line-height:1.2; font-weight:800;
                  letter-spacing:calc(var(--u) * -2/1920); color:#fff; white-space:nowrap; z-index:2 }
.off-story .rc-h{ left:calc(131/1920 * 100%); top:calc(16814/var(--H) * 100%);
                  width:calc(1659/1920 * 100%); line-height:0; z-index:2 }
.off-story .rc-h svg.tlab{ width:100%;height:auto;color:var(--green);fill:currentColor }

.off-story .rc-m{ z-index:2 }
.off-story .rc-m img{ height:100%;object-fit:contain }
.off-story .rc-q{ font-size:calc(var(--u) * 98.233/1920);
                  line-height:calc(var(--u) * 122.7/1920);
                  letter-spacing:calc(var(--u) * -2.947/1920);
                  font-weight:700; color:#fff; white-space:nowrap; z-index:3 }
.off-story .rc-d{ font-size:calc(var(--u) * 45/1920);
                  line-height:calc(var(--u) * 75.7/1920);
                  letter-spacing:calc(var(--u) * -1.35/1920);
                  font-weight:600; color:#B9B9B9; white-space:nowrap; z-index:3 }



/* ── FVA만의 특별한 혜택 6장 (블록5 y21012~24305) ────────────
   카드 807.7x834.4 · 2열(x125 / x1000.2) x 3행(y21564.3/22517.6/23470.9)
   각 카드 : 번호(01~06) + 제목 + 이미지 + 설명. 전부 실제 텍스트.
   ------------------------------------------------------- */
.off-story .bn-lead{ left:calc(433.1/1920 * 100%); top:calc(21012.8/var(--H) * 100%);
                     width:calc(1056/1920 * 100%); text-align:center;
                     font-size:calc(var(--u) * 66/1920); line-height:1.2; font-weight:800;
                     letter-spacing:calc(var(--u) * -2/1920); color:#fff; z-index:2 }
.off-story .bn-h{ left:calc(279/1920 * 100%); top:calc(21182/var(--H) * 100%);
                  width:calc(1366/1920 * 100%); line-height:0; z-index:2 }
.off-story .bn-h svg.tlab{ width:100%;height:auto;color:var(--green);fill:currentColor }
.off-story .bn{ width:calc(807.7/1920 * 100%); height:calc(834.4/var(--H) * 100%);
                background:radial-gradient(120% 80% at 50% 0%,#0e2a11 0%,#070707 68%);
                border:calc(var(--u) * 3/1920) solid rgba(44,255,5,.5);
                border-radius:calc(var(--u) * 44/1920);
                box-sizing:border-box; z-index:2 }
/* 번호+제목이 얹히는 초록 알약 */
.off-story .bn-pill{ width:calc(750.1/1920 * 100%);
                     background:var(--green); border-radius:999px; z-index:3 }
.off-story .bn-n{ font-size:calc(var(--u) * 46/1920); line-height:1.2; font-weight:800;
                  color:#0A2E0C; z-index:4 }
.off-story .bn-t{ font-size:calc(var(--u) * 54/1920); line-height:1.2; font-weight:800;
                  letter-spacing:calc(var(--u) * -1.62/1920); color:#062308;
                  white-space:nowrap; z-index:4 }
.off-story .bn-i{ z-index:3 }
.off-story .bn-i img{ height:100%;object-fit:contain }
.off-story .bn-d{ font-size:calc(var(--u) * 35/1920); line-height:calc(var(--u) * 60/1920);
                  letter-spacing:calc(var(--u) * -1.2/1920); color:#B9B9B9; z-index:3 }



/* ══ 블록 6 : SPECIAL PROGRAM ═══════════════════════════════
   피그마 3402:133595 y55608.44 1920×13754.79
   특강 2개(촬영&조명 워크샵 / 영상인들의 비밀 파티)가 같은 틀로 반복된다.
   사진은 원본 렌더에서 자르고, 글자는 전부 실제 텍스트.
   ═══════════════════════════════════════════════════════ */
.off-sp{
  --u:var(--pagew);
  --H:13754.79;
  position:relative; width:100%;
  aspect-ratio:1920/13754.79;
  background:var(--black);
  overflow:hidden;
}
.off-sp > *{ position:absolute; margin:0 }
.off-sp img{ display:block; max-width:none; width:100%; height:100%; object-fit:cover }
.off-sp .ph img{ object-fit:cover }
.off-sp .art img{ object-fit:contain }

.off-sp .sp-h{ left:0; top:calc(120/var(--H) * 100%); width:100%;
               height:calc(470/var(--H) * 100%); z-index:2 }
.off-sp .sp-ico{ width:calc(70/1920 * 100%); height:calc(78/var(--H) * 100%); z-index:3 }
.off-sp .sp-en{ font-size:calc(var(--u) * 82/1920); line-height:1.2; font-weight:800;
                letter-spacing:calc(var(--u) * -2.46/1920); color:var(--green);
                white-space:nowrap; z-index:3 }
.off-sp .sp-ko{ font-size:calc(var(--u) * 74/1920); line-height:1.2; font-weight:800;
                letter-spacing:calc(var(--u) * -2.22/1920); color:#fff;
                white-space:nowrap; z-index:3 }
.off-sp .sp-time{ font-size:calc(var(--u) * 60/1920); line-height:1.2; font-weight:700;
                  letter-spacing:calc(var(--u) * -1.8/1920); color:#FF3D00;
                  white-space:nowrap; z-index:3 }
.off-sp .sp-rule{ height:calc(var(--u) * 3/1920); background:#3A3A3A; border:0; z-index:3 }
.off-sp .sp-body{ font-size:calc(var(--u) * 62/1920);
                  line-height:calc(var(--u) * 93.75/1920);
                  font-weight:600;
                  letter-spacing:calc(var(--u) * -1.32/1920); color:#fff; z-index:3 }
.off-sp .sp-note{ font-size:calc(var(--u) * 35/1920); line-height:1.2;
                  color:#8C8C8C; z-index:3 }
.off-sp .sp-body em{ font-style:normal;color:var(--green) }
/* 안 채워진 부분을 어둡게 두면 사진 위에 가로선처럼 보인다 -> 투명 */
.off-sp .sp-bar{ left:0; width:100%; height:calc(6.7/var(--H) * 100%);
                 background:transparent; z-index:3 }
.off-sp .sp-bar i{ position:absolute;left:0;top:0;height:100%;
                   width:calc(533.6/1920 * 100%); background:var(--green) }



/* ══ 블록 7 : 엘리트 심화반 + SPECIAL BENEFIT + 환불 규정 ══════
   피그마 3402:133762 y69363.2 1920×10213
   ═══════════════════════════════════════════════════════ */
.off-elite{
  --u:var(--pagew); --H:10213;
  position:relative; width:100%;
  aspect-ratio:1920/10213;
  background:var(--black); overflow:hidden;
}
.off-elite > *{ position:absolute; margin:0 }
.off-elite img{ display:block; max-width:none; width:100%; height:100%; object-fit:contain }
.off-elite .el-bg img{ object-fit:cover }
/* 사진 아래를 검정으로 녹인다 (피그마 3402:142727 y708.2 1920x439.8).
   이게 없으면 FVA ELITE 글자가 사진에 딱 붙어 보인다. */
.off-elite .el-fade{ left:0; top:calc(708.2/var(--H) * 100%); width:100%;
                     height:calc(439.8/var(--H) * 100%); z-index:1;
                     background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 88%) }

.off-elite .el-ko{ font-size:calc(var(--u) * 78/1920); line-height:1.2; font-weight:800;
                   letter-spacing:calc(var(--u) * -2.34/1920); color:var(--green);
                   text-align:center; white-space:nowrap; z-index:2 }
.off-elite .el-lead{ font-size:calc(var(--u) * 62/1920);
                     line-height:calc(var(--u) * 93.75/1920); font-weight:700;
                     letter-spacing:calc(var(--u) * -1.86/1920);
                     color:#fff; text-align:center; z-index:2 }
.off-elite .el-lead em{ font-style:normal; color:var(--green) }
/* 잉크 실측: 01 x128~413 y4593~4800 (207) · 02 y5128~5350 · 03 y5672~5900
   가로선(5039·5584) 아래에 와야 한다. 150px 로 잡았다가 절반 크기로 나왔다. */
.off-elite .el-num{ font-size:calc(var(--u) * 280/1920); line-height:1; font-weight:900;
                    letter-spacing:calc(var(--u) * -8/1920); color:#fff; z-index:2 }
.off-elite .el-t{ font-size:calc(var(--u) * 62/1920); line-height:1.2; font-weight:800;
                  letter-spacing:calc(var(--u) * -1.86/1920); color:#fff;
                  white-space:nowrap; z-index:2 }
.off-elite .el-s{ font-size:calc(var(--u) * 42/1920);
                  line-height:calc(var(--u) * 73/1920); font-weight:500;
                  color:#B9B9B9; z-index:2 }
.off-elite .el-cap{ font-size:calc(var(--u) * 32/1920); line-height:1.2; font-weight:700;
                    color:var(--green); z-index:2 }
.off-elite .el-rule{ height:calc(var(--u) * 2/1920); background:#2A2A2A; border:0; z-index:2 }
/* 말풍선 — 상자 y7076~7232, 꼬리 7232~7350 (렌더 실측).
   꼬리를 이미지로 자르면 상자와 분리돼 보여서 CSS 로 붙인다. */
.off-elite .el-pill{ display:flex; align-items:center; justify-content:center;
                     background:var(--green); color:#062308;
                     border-radius:calc(var(--u)*24/1920);
                     font-size:calc(var(--u) * 58/1920); font-weight:800;
                     letter-spacing:calc(var(--u) * -1.74/1920); white-space:nowrap; z-index:3 }
.off-elite .el-pill::after{
  content:""; position:absolute; left:50%; top:100%;
  width:calc(var(--u) * 58/1920); height:calc(var(--u) * 118/1920);
  margin-left:calc(var(--u) * -29/1920);
  background:var(--green);
  clip-path:polygon(0 0, 100% 0, 46% 100%);
}
.off-elite .el-done{ font-size:calc(var(--u) * 54/1920); line-height:1.2; font-weight:800;
                     color:var(--green); text-align:center; white-space:nowrap; z-index:2 }
.off-elite .el-note{ font-size:calc(var(--u) * 34/1920);
                     line-height:calc(var(--u) * 56/1920); color:#8C8C8C;
                     text-align:center; z-index:2 }
.off-elite .el-rf{ font-size:calc(var(--u) * 34/1920); line-height:1.2; font-weight:700;
                   color:#8C8C8C; text-align:center; z-index:2 }
.off-elite .el-rfb{ font-size:calc(var(--u) * 26/1920);
                    line-height:calc(var(--u) * 46/1920); color:#6A6A6A;
                    text-align:center; z-index:2 }