/* ══════════════════════════════════════════════════════════
   기획 · CLASS FEATURE · AI 특강 — 피그마 3402:145856
   블록 1920x16715.2. 텍스트 44개 중 41개가 단색 배경 위라 전부 실제 텍스트.
   사진 콜라주는 원본 렌더에서 밴드로 잘라 씀(글자가 겹치지 않는 구간).
   Pretendard 가 원본 폰트보다 6% 넓어, 잉크폭 여유가 없는 문단은 /1.06 적용.
   ══════════════════════════════════════════════════════════ */
.off-plan{
  --u:var(--pagew);
  position:relative;width:100%;
  aspect-ratio:1920/16715.2;
  background:var(--black);
  overflow:hidden;
}
.off-plan > *{ position:absolute;margin:0 }
.off-plan img{ height:auto }
.off-plan svg.tlab{ height:auto }
.off-plan p,.off-plan h2,.off-plan h3,.off-plan blockquote,.off-plan li{
  text-align:center;letter-spacing:-.03em;font-weight:700;
}

.off-plan .p-intro{ left:calc(13.4/1920 * 100%);top:calc(160.7/16715.2 * 100%);width:calc(1895.4/1920 * 100%);font-size:calc(var(--u) * 69/1920);line-height:1.3043;color:#777 }
.off-plan .p-lead{ left:calc(209.9/1920 * 100%);top:calc(426.4/16715.2 * 100%);width:calc(1500.3/1920 * 100%);font-size:calc(var(--u) * 92/1920);line-height:1.2174;color:var(--green) }
.off-plan .p-quote-wrap{ left:calc(-44.7/1920 * 100%);top:calc(917.6/16715.2 * 100%);width:calc(2011.5/1920 * 100%);height:calc(1352.9/16715.2 * 100%);overflow:hidden }
.off-plan .p-eyes{ left:calc(837.2/1920 * 100%);top:calc(2641.1/16715.2 * 100%);width:calc(305.5/1920 * 100%);z-index:2 }
.off-plan .p-qmark{ left:calc(1171.1/1920 * 100%);top:calc(2621.0/16715.2 * 100%);width:calc(44.0/1920 * 100%);font-size:calc(var(--u) * 81/1920);line-height:1;color:#fff }
.off-plan .p-ask{ left:calc(462.1/1920 * 100%);top:calc(2973.8/16715.2 * 100%);width:calc(994.0/1920 * 100%);font-size:calc(var(--u) * 81/1920);line-height:1;color:#fff }
.off-plan .pp-glow{ left:calc(201.3/1920 * 100%);top:calc(3325.6/16715.2 * 100%);width:calc(1521.5/1920 * 100%);z-index:1 }
/* Pre-Production — Pretendard SemiBold 223.256px / 자간 -8.9302px /
   초록->흰색 그라데이션 글자 (배경 클립). TLAB 이 아니었다 */
.off-plan .pp-text{
  left:calc(178.6/1920 * 100%);top:calc(3337.7/16715.2 * 100%);
  width:calc(1565/1920 * 100%);z-index:2;
  font-size:calc(var(--u) * 223.256/1920);
  line-height:1.04;
  letter-spacing:calc(var(--u) * -8.9302/1920);
  font-weight:600;text-align:center;
  background-image:linear-gradient(68.519deg,#2CFF05 32.213%,#FFFFFF 94.71%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.off-plan .p-box{ left:calc(111.6/1920 * 100%);top:calc(3668.1/16715.2 * 100%);width:calc(1696.7/1920 * 100%);height:calc(1210.0/16715.2 * 100%);background:linear-gradient(180deg,#011001 0%,#022003 45%,#042905 100%);border:1px solid rgba(44,255,5,.28);border-radius:calc(var(--u) * 60/1920) }
.off-plan .p-pencil{ left:calc(600.6/1920 * 100%);top:calc(3813.2/16715.2 * 100%);width:calc(669.8/1920 * 100%);z-index:4 }
/* screen 합성을 쓰면 뒤 가로선이 연필 위로 비친다 -> 이미지에 알파를 구워 z-index 로 올린다 */
.off-plan .p-def{ left:calc(250.0/1920 * 100%);top:calc(4996.5/16715.2 * 100%);width:calc(1440.0/1920 * 100%);font-size:calc(var(--u) * 87/1920);line-height:1.2759;color:#fff }
.off-plan .p-alexa{ left:calc(0.0/1920 * 100%);top:calc(5595.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-ask2{ left:calc(113.9/1920 * 100%);top:calc(6440.9/16715.2 * 100%);width:calc(1234.0/1920 * 100%);font-size:calc(var(--u) * 87/1920);line-height:1.2874;color:#ECECEC }
.off-plan .p-col1{ left:calc(0.0/1920 * 100%);top:calc(6700.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-ask3{ left:calc(515.7/1920 * 100%);top:calc(8758.3/16715.2 * 100%);width:calc(1249.0/1920 * 100%);font-size:calc(var(--u) * 87/1920);line-height:1.2874;color:#ECECEC }
/* b2-collage2.jpg 는 글자가 잘린 채 내보내진 이미지였다.
   같은 문구가 .p-ask3 에 이미 실제 텍스트로 있어서 이미지만 걷어냈다. */
.off-plan .p-cta{ left:calc(2.2/1920 * 100%);top:calc(9495.1/16715.2 * 100%);width:calc(1917.8/1920 * 100%);font-size:calc(var(--u) * 92/1920);line-height:1.2065;color:var(--green) }
/* CLASS FEATURE — TlabMixCoffee 303.628px 흰색 1줄 (SVG) +
   그 위 FVA ACADEMY 워드마크 */
.off-plan .p-cf{ left:calc(129.5/1920 * 100%);top:calc(10467.7/16715.2 * 100%);width:calc(1663/1920 * 100%);line-height:0 }
.off-plan .p-cf svg.tlab{ color:#fff;width:100% }
.off-plan .p-cf-wm{ left:calc(741.6/1920 * 100%);top:calc(10306.7/16715.2 * 100%);width:calc(437/1920 * 100%);line-height:0 }
.off-plan .p-cf-wm svg{ color:var(--green);width:100%;height:auto;fill:currentColor;display:block }
.off-plan .p-f1{ left:calc(0.0/1920 * 100%);top:calc(10688.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-n1{ left:calc(95.8/1920 * 100%);top:calc(11527.1/16715.2 * 100%);width:calc(194.0/1920 * 100%) }
.off-plan .p-t1{ left:calc(423.7/1920 * 100%);top:calc(11615.6/16715.2 * 100%);width:calc(1294.9/1920 * 100%);font-size:calc(var(--u) * 100/1920);line-height:1.20;color:#fff;text-align:left }
.off-plan .p-b1{ left:calc(425.4/1920 * 100%);top:calc(11918.0/16715.2 * 100%);width:calc(1470/1920 * 100%);font-size:calc(var(--u) * 42/1920);line-height:1.674;color:#fff;text-align:left;font-weight:500 }
.off-plan .p-f2{ left:calc(0.0/1920 * 100%);top:calc(12410.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-n2{ left:calc(95.8/1920 * 100%);top:calc(13277.3/16715.2 * 100%);width:calc(225.7/1920 * 100%) }
.off-plan .p-t2{ left:calc(423.7/1920 * 100%);top:calc(13363.5/16715.2 * 100%);width:calc(1431.1/1920 * 100%);font-size:calc(var(--u) * 100/1920);line-height:1.20;color:#fff;text-align:left }
.off-plan .p-b2{ left:calc(425.4/1920 * 100%);top:calc(13669.6/16715.2 * 100%);width:calc(1494/1920 * 100%);font-size:calc(var(--u) * 39/1920);line-height:1.674;color:#fff;text-align:left;font-weight:500 }
.off-plan .p-note2{ left:calc(1012/1920 * 100%);top:calc(13803/16715.2 * 100%);width:calc(774.7/1920 * 100%);font-size:calc(var(--u) * 37/1920);line-height:1.764;color:#FF3D00;text-align:left }
.off-plan .p-f3{ left:calc(0.0/1920 * 100%);top:calc(14174.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-n3{ left:calc(95.8/1920 * 100%);top:calc(15014.9/16715.2 * 100%);width:calc(225.7/1920 * 100%) }
.off-plan .p-t3{ left:calc(423.7/1920 * 100%);top:calc(15103.4/16715.2 * 100%);width:calc(1382.0/1920 * 100%);font-size:calc(var(--u) * 100/1920);line-height:1.20;color:#fff;text-align:left }
.off-plan .p-b3{ left:calc(425.4/1920 * 100%);top:calc(15405.8/16715.2 * 100%);width:calc(1470/1920 * 100%);font-size:calc(var(--u) * 42/1920);line-height:1.674;color:#fff;text-align:left;font-weight:500 }
.off-plan .p-ai1{ left:calc(0.0/1920 * 100%);top:calc(15955.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-bar1{ left:calc(-17.9/1920 * 100%);top:calc(16259.7/16715.2 * 100%);width:calc(1940.1/1920 * 100%);height:calc(84.8/16715.2 * 100%);background:#08FFD0 }
.off-plan .p-abt1{ left:calc(-17.9/1920 * 100%);top:calc(16259.7/16715.2 * 100%);
                   width:calc(1940.1/1920 * 100%);height:calc(84.8/16715.2 * 100%);
                   display:flex;align-items:center;justify-content:center;
                   font-size:calc(var(--u) * 47/1920);line-height:1;color:#000;z-index:2 }
.off-plan .p-ai2{ left:calc(0.0/1920 * 100%);top:calc(16344.0/16715.2 * 100%);width:calc(1920.0/1920 * 100%) }
.off-plan .p-bar2{ left:calc(-17.9/1920 * 100%);top:calc(16630.3/16715.2 * 100%);width:calc(1940.1/1920 * 100%);height:calc(84.8/16715.2 * 100%);background:#08FFD0 }
.off-plan .p-abt2{ left:calc(-17.9/1920 * 100%);top:calc(16630.3/16715.2 * 100%);
                   width:calc(1940.1/1920 * 100%);height:calc(84.8/16715.2 * 100%);
                   display:flex;align-items:center;justify-content:center;
                   font-size:calc(var(--u) * 47/1920);line-height:1;color:#000;z-index:2 }

/* 인용 — 사진 2장 + 85% 검정 오버레이(원본 밝기의 14.8%) + 흰 인용 */
.off-plan .p-quote-wrap .pq-l{ position:absolute;left:calc(142.9/2011.5 * 100%);top:calc(104.9/1352.9 * 100%);width:calc(870.7/2011.5 * 100%) }
.off-plan .p-quote-wrap .pq-r{ position:absolute;left:calc(1047.1/2011.5 * 100%);top:calc(104.9/1352.9 * 100%);width:calc(817.1/2011.5 * 100%) }
.off-plan .p-quote-wrap .pq-dim{ position:absolute;inset:0;background:rgba(0,0,0,.852) }
.off-plan .p-quote{
  position:absolute;z-index:2;
  left:calc(377.4/2011.5 * 100%);top:calc(346/1352.9 * 100%);width:calc(1257/2011.5 * 100%);
  font-size:calc(var(--u) * 148/1920);line-height:1.25;color:#fff;
}
/* 기획 8요소 */
.off-plan .p-keys{ list-style:none;margin:0;padding:0;inset:0 }   /* li 의 % 기준을 블록으로 */
.off-plan .p-keys li{
  position:absolute;
  font-size:calc(var(--u) * 72/1920);line-height:1;color:var(--green);white-space:nowrap;
}
.off-plan .p-keys .k1{ left:calc(317/1920 * 100%);   top:calc(3860.1/16715.2 * 100%) }
.off-plan .p-keys .k2{ left:calc(1056/1920 * 100%);  top:calc(3871.3/16715.2 * 100%) }
.off-plan .p-keys .k3{ left:calc(230/1920 * 100%);   top:calc(4085.6/16715.2 * 100%) }
.off-plan .p-keys .k4{ left:calc(1187.7/1920 * 100%);top:calc(4096.7/16715.2 * 100%) }
.off-plan .p-keys .k5{ left:calc(178.6/1920 * 100%); top:calc(4311.1/16715.2 * 100%) }
.off-plan .p-keys .k6{ left:calc(1219/1920 * 100%);  top:calc(4324.5/16715.2 * 100%) }
.off-plan .p-keys .k7{ left:calc(288/1920 * 100%);   top:calc(4536.6/16715.2 * 100%) }
.off-plan .p-keys .k8{ left:calc(1408.7/1920 * 100%);top:calc(4550/16715.2 * 100%) }
/* 박스 안 구분선 4개 (피그마 y 4007.4 / 4230.7 / 4451.7 / 4675.0) */
/* 가로선은 연필 뒤 */
.off-plan .p-rule{ z-index:1;
  position:absolute;left:calc(140.7/1920 * 100%);width:calc(1640.9/1920 * 100%);
  height:1px;background:rgba(214,232,211,.55);z-index:2;
}
.off-plan .p-rule.r1{ top:calc(4007.4/16715.2 * 100%) }
.off-plan .p-rule.r2{ top:calc(4230.7/16715.2 * 100%) }
.off-plan .p-rule.r3{ top:calc(4451.7/16715.2 * 100%) }
.off-plan .p-rule.r4{ top:calc(4675.0/16715.2 * 100%) }

/* 초록 강조 — 피그마에서 색이 다른 구간 (픽셀 실측) */
.off-plan em{ font-style:normal;color:var(--green) }

/* ── 모바일 ─────────────────────────────────────────────────
   오버라이드를 걷어냈다 (2026-08-02).
   피그마 「오프라인 강의 - 모바일」 3457:2218 은 y1193.6 h3134.1 인데,
   데스크탑 비율 1920/16715.2 를 360 에 대면 3134.1 로 정확히 같다.
   즉 이 블록의 모바일 시안은 데스크탑을 그대로 줄인 것이라
   세로로 재배치하던 기존 규칙이 오히려 시안에서 벗어나 있었다.
   ------------------------------------------------------------------ */


/* STEP 숫자 색 — 피그마 실측 (01 회색 / 02 주황 / 03 초록) */
.off-plan .p-n1 svg.tlab{ color:#8C8C8C }
.off-plan .p-n2 svg.tlab{ color:#FF3D00 }
.off-plan .p-n3 svg.tlab{ color:#2CFF05 }

/* 글자는 항상 사진 위로. 블록2 는 사진과 글자가 같은 절대좌표 평면에 있어서
   DOM 순서만으로는 사진이 글자를 덮는다 (CLASS FEATURE 를 b2-feat01 이 39px,
   Pre-Production 을 b2-pre-glow 가 덮고 있었다). */
.off-plan > p,
.off-plan > h2,
.off-plan > h3,
.off-plan > ul{ z-index:3 }
.off-plan > img{ z-index:0 }
.off-plan .p-pencil{ z-index:4 }