/* ─────────────────────────────────────────────────────────────
   FVA BASIC CLASS (왕초보반) — 피그마 21스튜디오 상페 1·2·3
   node 3684:17907 / 3684:261 / 3684:17645  (기준 폭 860)

   ■ 조판 규칙 — 피그마와 1:1
     피그마의 860 이 --u 에 대응한다. 모든 치수는 calc(var(--u) * N/860).
     그래서 화면이 커지든 작아지든 **비율이 그대로**다. clamp() 로 눈대중하지 않는다.
     자간은 px 을 글자크기로 나눠 em 으로 넣는다(크기가 변해도 같이 따라간다).
       예) 44px 에 -2.2px → -0.05em

   ■ 서체
     본문·제목은 Pretendard (style.css 가 이미 불러온다).
     디스플레이는 **TlabMixCoffee** 인데 웹폰트로 못 올린다(fsType=4 · 임베딩 금지).
     그래서 tools/tlab_basic.py 로 글자를 SVG 아웃라인으로 뽑아 쓴다.
     읽는 기계를 위해 같은 문구를 .sr-only 로 같이 둔다.
     ⚠ SVG 폭은 assets/tlab/meta.json 의 「잉크폭」(860 기준)을 그대로 쓴다. 눈대중 금지.

   ■ 색 (get_design_context 실측)
     --green #2CFF05 · --cyan #08FFD0 · --sky #AAD8F9
     카드 #121212 · 카드테두리 #3A3A3A · nono 그릇 #272727 · 걱정카드 테두리 #EBEBFF
   ───────────────────────────────────────────────────────────── */

.bs{
  --green:#2CFF05;
  --cyan:#08FFD0;
  --sky:#AAD8F9;
  --card:#121212;
  --card-line:#3A3A3A;
  --u:min(860px, 100vw);        /* 조판 기준 — 피그마 860 이 여기에 대응 */
  width:var(--u);
  margin-inline:auto;
  /* ⚠ style.css 의 `body > header, body > main, body > footer{padding-inline:var(--gutter)}` 가
       이 판까지 밀어서, 창을 줄이면 내용이 가운데가 아니라 오른쪽으로 치우쳐 보였다.
       이 페이지는 판 자체가 가운데 정렬이므로 바깥 여백을 없앤다. */
  padding-inline:0;
  background:#000;
  color:#fff;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
}
/* 데스크탑에서 조금 키운다. 사진 원본이 860 이라 더 늘리면 흐려진다. */
@media (min-width:940px){ .bs{ --u:900px } }

.bs *{ box-sizing:border-box }
.bs img{ display:block; width:100%; height:auto }
.bs p{ margin:0 }
.bs .bs-g{ color:var(--green) }
.bs .bs-tl{ display:block; margin-inline:auto; height:auto; fill:currentColor }
.bs .bs-mid{ text-align:center }
.bs .bs-pad{ padding-inline:calc(var(--u) * 30/860) }

/* ── 피그마 좌표 판 ────────────────────────────────
   상페1·2·3 은 여백을 눈으로 맞추지 않고 **피그마 좌표를 그대로** 옮긴다.
   자식은 전부 절대 배치라 어긋날 자리가 없고, --u 하나로 통째로 줄어든다.
   ⚠ 판 안에서 --u 를 다시 정의하면 페이지의 다른 블록과 폭이 어긋난다. 물려받아 쓴다. */
.bs .bs-board{ position:relative; width:var(--u); margin-inline:auto;
  background:#000; overflow:hidden }
.bs .bs-board > *{ position:absolute; margin:0 }
.bs .bs-board img{ display:block; width:100%; height:auto; max-width:none } /* style.css 의 max-width:100% 가 피그마 블리드(895/903px)를 860으로 눌러버린다 */
/* 피그마 글상자는 대문자 윗선~밑선으로 잘라 놓은 것이 많다. 같게 잘라야 자리가 맞는다. */
.bs .bs-board .tb{ text-box-trim:trim-both; text-box-edge:cap alphabetic;
  text-box:trim-both cap alphabetic }
/* ⚠ style.css 의 body{letter-spacing:var(--ls)} 가 -0.48px 로 스며들어서,
     자간을 안 적은 판 글자가 전부 피그마보다 좁게 나왔다. 판은 피그마 값이 전부이므로 끊는다. */
.bs .bs-board{ letter-spacing:normal }

/* ── 과정 고르기 ─────────────────────────────────
   ⚠ 두 과정은 장소도 결제도 다르다(합정 12주 ↔ 연희동 4주, 스토어 상품 별개).
     같은 「오프라인」으로 뭉뚱그리면 엉뚱한 상품을 결제한다. */
.bs-pick{
  --u:min(860px, 100vw);
  width:var(--u); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 8/860);
  padding:calc(var(--u) * 16/860) calc(var(--u) * 20/860);
}
@media (min-width:940px){ .bs-pick{ --u:900px } }
.bs-pick a{
  display:block; text-decoration:none; text-align:center;
  padding:calc(var(--u) * 14/860) calc(var(--u) * 12/860);
  border:1px solid #3A3A3A; border-radius:calc(var(--u) * 16/860);
  background:#0C0C0C; color:#9A9A9A;
}
.bs-pick a[aria-current="page"]{ border-color:#2CFF05; background:rgba(44,255,5,.07); color:#fff }
.bs-pick b{ display:block; font-weight:800; letter-spacing:-.03em; font-size:calc(var(--u) * 30/860) }
.bs-pick span{ display:block; margin-top:calc(var(--u) * 4/860); opacity:.72;
  font-size:calc(var(--u) * 22/860) }

/* ── 히어로 ───────────────────────────────────────
   사진 라이카시네마 x-8 y44 w877 h877 → 프레임보다 넓다. 그대로 넘치게 두고 자른다. */
.bs .bs-hero{ position:relative; overflow:hidden }
.bs .bs-hero .bs-ph{ position:relative }
/* ⚠ 이 사진은 피그마에서 877 폭이지만 프레임(860)에 이미 잘려서 860x877 로 받아진다.
   여기서 또 877/860 으로 늘리면 2% 확대돼 히어로 문구가 밝은 스크린 위로 밀린다. */
.bs .bs-hero .bs-ph img{ width:100% }
.bs .bs-hero .bs-ph::after{
  content:""; position:absolute; inset:0;
  /* 피그마의 검정 오버레이 두 장(3684:17912 h509 · 3684:17911)을 옮긴 것.
     위 509/877 = 53% 까지 덮는다. 이게 없으면 셋째 줄이 스크린 흰빛에 묻힌다. */
  background:linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 22%,
                             rgba(0,0,0,0) 53%, rgba(0,0,0,0) 66%, #000 100%);
}
/* 3684:17919 — SemiBold 44/55 -2.2px #CFCFCF · x120 y92 w620 */
.bs .bs-hero .bs-copy{
  position:absolute; z-index:2; left:50%; transform:translateX(-50%);
  top:calc(var(--u) * 48/860); width:calc(var(--u) * 620/860);
  font-weight:600; color:#CFCFCF; text-align:center;
  font-size:calc(var(--u) * 44/860);
  line-height:calc(var(--u) * 55/860);
  letter-spacing:-.05em;
}
.bs .bs-hero .bs-copy b{ font-weight:700; color:var(--green) }

/* 로고 락업 3684:28719 — w515 h101.7 · 사진 끝(921)에서 +26 */
.bs .bs-lock{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--u) * 26/860);
  width:calc(var(--u) * 515/860); margin:calc(var(--u) * 26/860) auto 0;
}
.bs .bs-lock img{ height:auto }
.bs .bs-lock .bs-f{ width:calc(var(--u) * 242/860) }
.bs .bs-lock .bs-x{ width:calc(var(--u) * 21/860) }
/* 21STUDIOS 는 **두 장이 겹쳐야** 로고가 된다 — 글자(21a) 위에 원(21b).
   ⚠ 한 장만 쓰면 빈 동그라미만 나온다. 피그마 3684:17937 의 inset 값 그대로. */
.bs .bs-lock .bs-s{ position:relative; display:block;
  width:calc(var(--u) * 198.51/860); height:calc(var(--u) * 101.7/860) }
.bs .bs-lock .bs-s img{ position:absolute }
.bs .bs-lock .bs-s1{ left:24.45%; right:24.45%; top:0; bottom:.01%; width:51.1%; height:auto;
  top:50%; translate:0 -50% }
.bs .bs-lock .bs-s2{ left:0; right:0; top:37.26%; bottom:37.26%; width:100%; height:auto;
  top:50%; translate:0 -50% }

/* BASIC CLASS 3684:17913 — TLAB 176 잉크 705.58 · 락업 끝(1048.9) → y1114 = +65 */
.bs .bs-h-basic{ margin-top:calc(var(--u) * 65/860); text-align:center; line-height:0 }
.bs .bs-h-basic .bs-tl{ color:var(--green) }
/* 부제 3684:28725 — Bold 44/60.838 -1.76 #2CFF05 */
.bs .bs-hero-sub{
  margin-top:calc(var(--u) * 12/860); text-align:center;
  font-weight:700; color:var(--green);
  font-size:calc(var(--u) * 44/860);
  line-height:calc(var(--u) * 60.838/860);
  letter-spacing:-.04em;
  padding-bottom:calc(var(--u) * 55/860);
}

/* ── 사진 위에 얹는 제목 ─────────────────────────── */
.bs .bs-onphoto{ position:relative }
.bs .bs-onphoto .bs-cap{ position:absolute; z-index:2; left:0; right:0; text-align:center;
  padding-inline:calc(var(--u) * 30/860) }
.bs .bs-onphoto::after{ content:""; position:absolute; inset:0; pointer-events:none }

/* 극장 몬스터 — 사진 y1374..2456(h1082) · 글 y2363/2398 → 사진 아래에서 58 */
.bs .bs-s-odd::after{
  background:linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 26%,
                             rgba(0,0,0,.6) 76%, #000 100%);
}
.bs .bs-s-odd .bs-cap{ bottom:calc(var(--u) * 58/860) }
/* 3684:28715 Bold 41 -1.23 #F5F5F6 */
.bs .bs-lead41{ font-weight:700; color:#F5F5F6;
  font-size:calc(var(--u) * 41/860); line-height:1.2; letter-spacing:-.03em }
.bs .bs-h-odd{ margin-top:calc(var(--u) * 14/860); line-height:0 }
.bs .bs-h-odd .bs-tl{ color:var(--green) }

/* 블러 현장 — 사진 y2697..3220(h523) · 글 y2883 → 사진 위에서 186 */
.bs .bs-s-can::after{
  background:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 42%,
                             rgba(0,0,0,.45) 100%);
}
.bs .bs-s-can .bs-cap{ top:calc(var(--u) * 186/860) }

/* 강사 현장 — 사진 y5601..6192(h591) · 글 y5822 → 사진 위에서 221 */
.bs .bs-s-one::after{
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 45%,
                             rgba(0,0,0,.5) 100%);
}
.bs .bs-s-one .bs-cap{ top:calc(var(--u) * 221/860) }

/* ── 제목 층위 (실측) ─────────────────────────────── */
/* Pretendard Bold 50/60 -1.5px — 3684:28731 / 21018 / 21100 */
.bs .bs-h50{ text-align:center; font-weight:700; color:#fff;
  font-size:calc(var(--u) * 50/860); line-height:calc(var(--u) * 60/860); letter-spacing:-.03em }
/* Pretendard ExtraBold 57/74 -2.85px — 3684:21101 */
.bs .bs-h57{ text-align:center; font-weight:800; color:#fff;
  font-size:calc(var(--u) * 57/860); line-height:calc(var(--u) * 74/860); letter-spacing:-.05em }
/* 3684:17916 — Medium 40/52 #A0A0A0 + ExtraBold 40/52 흰색, -1.2px */
.bs .bs-why{ text-align:center; letter-spacing:-.03em; font-size:calc(var(--u) * 40/860) }
.bs .bs-why .bs-a{ display:block; font-weight:500; color:#A0A0A0; line-height:calc(var(--u) * 52/860) }
.bs .bs-why .bs-b{ display:block; font-weight:800; color:#fff;    line-height:calc(var(--u) * 52/860) }
/* 3684:28723 「그건 바로....」 */
.bs .bs-eyebrow31{ text-align:center; font-weight:600; color:#A0A0A0;
  font-size:calc(var(--u) * 31/860); letter-spacing:-.02em }
/* 본문 SemiBold 33/47 -0.66 */
.bs .bs-body33{ text-align:center; font-weight:600; color:#fff;
  font-size:calc(var(--u) * 33/860); line-height:calc(var(--u) * 47/860); letter-spacing:-.02em }

/* ── 걱정 카드 3개 (3730:34241 / 34240 / 34239) ───
   w760 h302 · 테두리 4px #EBEBFF · 반지름 100px · y3483/3823/4163 (간격 340 → 여백 38) */
.bs .bs-worry{ list-style:none; padding:0; margin:calc(var(--u) * 50/860) auto 0;
  width:calc(var(--u) * 760/860); display:grid; gap:calc(var(--u) * 38/860) }
.bs .bs-worry li{
  min-height:calc(var(--u) * 302/860);
  border:calc(var(--u) * 4/860) solid #2CFF05;   /* 원본 실측 — 발광 없는 4px 실선 */
  border-radius:calc(var(--u) * 100/860);
  background:linear-gradient(168.29deg, #063908 6.66%, #000 41.33%, #063908 94.95%);
  padding:calc(var(--u) * 74/860) calc(var(--u) * 28/860) calc(var(--u) * 40/860);
  text-align:center;
}
/* 제목 3684:17963 Bold 44/54 -0.88 #08FFD0 */
.bs .bs-worry q{ quotes:none; display:block;   /* ⚠ 본문에 이미 따옴표가 있다. 안 끄면 두 번 나온다 */ font-weight:700; color:var(--cyan);
  font-size:calc(var(--u) * 44/860); line-height:calc(var(--u) * 54/860); letter-spacing:-.02em }
/* 본문 3684:17970 SemiBold 33/47 -0.66 흰색 */
.bs .bs-worry p{ margin-top:calc(var(--u) * 18/860); font-weight:600; color:#fff;
  font-size:calc(var(--u) * 33/860); line-height:calc(var(--u) * 47/860); letter-spacing:-.02em }

/* ── 안 챙겨도 되는 것 (3726:34001) ───────────────
   그릇 #272727 radius 13.51 w782 · 행 #121212 radius 22.5 w759 h120 (간격 132 → 여백 12) */
.bs .bs-nono{ list-style:none; margin:calc(var(--u) * 40/860) auto 0;
  width:calc(var(--u) * 782/860); background:#272727;
  border-radius:calc(var(--u) * 13.51/860);
  padding:calc(var(--u) * 13/860) calc(var(--u) * 11/860);
  display:grid; gap:calc(var(--u) * 12/860) }
.bs .bs-nono li{ position:relative; min-height:calc(var(--u) * 120/860);
  background:var(--card); border-radius:calc(var(--u) * 22.5/860);
  display:flex; flex-direction:column; justify-content:center;
  padding-left:calc(var(--u) * 129/860); padding-right:calc(var(--u) * 20/860) }
/* ⚠ 아이콘마다 가로세로비가 다르다. 상자에 꽉 채우면 찌부러진다.
     피그마 원본 크기 그대로 놓고 상자 가운데에 맞춘다. */
.bs .bs-nono .bs-ico{ position:absolute; left:calc(var(--u) * 18.5/860); top:50%;
  transform:translateY(-50%); width:calc(var(--u) * 52.7/860); height:calc(var(--u) * 80.6/860) }
.bs .bs-nono .bs-ico img{ position:absolute; inset:0; margin:auto }
.bs .bs-nono .bs-ico img[src$="nono-cam.svg"]{ width:calc(var(--u) * 48.5771/860); height:calc(var(--u) * 68.2759/860) }
.bs .bs-nono .bs-ico img[src$="nono-edit.svg"]{ width:calc(var(--u) * 49.6855/860); height:calc(var(--u) * 49.5083/860) }
.bs .bs-nono .bs-ico img[src$="nono-light.svg"]{ width:calc(var(--u) * 52.6734/860); height:calc(var(--u) * 68.885/860) }
.bs .bs-nono .bs-ico img[src$="nono-script.svg"]{ width:calc(var(--u) * 52.4018/860); height:calc(var(--u) * 56.2361/860) }
.bs .bs-nono .bs-ico img[src$="nono-slash.svg"]{ width:calc(var(--u) * 51.0566/860); height:calc(var(--u) * 80.5696/860) }
.bs .bs-nono .bs-ico img[src$="nono-term.svg"]{ width:calc(var(--u) * 42.1205/860); height:calc(var(--u) * 56.3264/860) }
.bs .bs-nono .bs-ico .bs-sl{ z-index:2 }
.bs .bs-nono b{ display:block; font-weight:800; color:#fff;
  font-size:calc(var(--u) * 27/860); line-height:calc(var(--u) * 40/860); letter-spacing:-.02em }
.bs .bs-nono span{ display:block; font-weight:500; color:#fff;
  font-size:calc(var(--u) * 27/860); line-height:calc(var(--u) * 40/860); letter-spacing:-.02em }

/* ── 나는 뭘 좋아할까 ─────────────────────────────
   제목 TLAB 110 잉크 509.96 · 새싹 SVG w101 h150 */
.bs .bs-likehead{ display:flex; align-items:center; justify-content:center;
  gap:calc(var(--u) * 24/860) }
.bs .bs-likehead .bs-sprout{ width:calc(var(--u) * 101/860); flex:0 0 auto }
.bs .bs-likehead .bs-sprout img{ width:100% }
.bs .bs-likehead .bs-tl{ color:var(--green) }
/* 카드 — 피그마 x51/451 y7013/7453.19/7893 · w372 · h415.62(1·2행) / 271(3행)
   ⚠ 3D 아이콘이 카드 위로 튀어나온다. overflow 를 열어둬야 한다.
   ⚠ 3행(편집·색보정)은 아이콘이 없어서 카드가 낮고 제목이 위에서 시작한다. */
.bs .bs-like{ list-style:none; padding:0; margin:calc(var(--u) * 58/860) auto 0;
  width:calc(var(--u) * 772/860);
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:calc(var(--u) * 28/860); row-gap:calc(var(--u) * 24.4/860) }
.bs .bs-like li{ position:relative; overflow:visible;
  background:var(--card); border:1px solid var(--card-line);
  border-radius:calc(var(--u) * 25/860); min-height:calc(var(--u) * 415.62/860);
  padding:calc(var(--u) * 192.76/860) calc(var(--u) * 16/860) calc(var(--u) * 30/860);
  text-align:center }
.bs .bs-like li.bs-short{ min-height:calc(var(--u) * 271/860);
  padding-top:calc(var(--u) * 48.21/860) }
/* 카드 위 3D 아이콘 — 카드 좌상단 기준 좌표 */
.bs .bs-like .bs-ico{ position:absolute; z-index:1 }
.bs .bs-like .bs-ico img{ width:100% }
.bs .bs-like .bs-i-plan  { left:calc(var(--u) * 112/860);    top:calc(var(--u) * -11/860);
                     width:calc(var(--u) * 143/860) }
.bs .bs-like .bs-i-direct{ left:calc(var(--u) * 129/860);    top:calc(var(--u) * 3/860);
                     width:calc(var(--u) * 118/860) }
.bs .bs-like .bs-i-shoot { left:calc(var(--u) * 147.19/860); top:calc(var(--u) * -82.15/860);
                     width:calc(var(--u) * 191.79/860) }
.bs .bs-like .bs-i-ai    { left:calc(var(--u) * 98.91/860);  top:calc(var(--u) * 28.54/860);
                     width:calc(var(--u) * 189.18/860) }
.bs .bs-like .bs-tl{ color:var(--sky) }
/* 본문 3684:20972 SemiBold 30/44 -0.6 #ECECEC · 제목 아래 37.37 */
.bs .bs-like p{ margin-top:calc(var(--u) * 37.37/860); font-weight:600; color:#ECECEC;
  font-size:calc(var(--u) * 30/860); line-height:calc(var(--u) * 44/860); letter-spacing:-.02em }

/* ── 세로 리듬 (피그마 y 간격 그대로) ─────────────── */
.bs .bs-gap-xl{ margin-top:calc(var(--u) * 133/860) }
.bs .bs-gap-lg{ margin-top:calc(var(--u) * 96/860) }
.bs .bs-gap-md{ margin-top:calc(var(--u) * 60/860) }
.bs .bs-gap-sm{ margin-top:calc(var(--u) * 30/860) }
.bs .bs-sec{ padding-block:calc(var(--u) * 120/860) }
.bs .bs-sec-t{ padding-top:calc(var(--u) * 120/860) }
.bs .bs-sec-b{ padding-bottom:calc(var(--u) * 120/860) }

/* ── CLASS FEATURE (상페2) ───────────────────────── */
.bs .bs-feat{ display:grid; gap:calc(var(--u) * 90/860); margin-top:calc(var(--u) * 60/860) }
.bs .bs-feat article{ display:grid; grid-template-columns:auto 1fr;
  gap:calc(var(--u) * 24/860); align-items:start }
/* 번호 3684:352 — TLAB 121px #2CFF05 자간 +2.42 */
.bs .bs-feat .bs-no{ line-height:0; color:var(--green) }
.bs .bs-feat h3{ margin:0 0 calc(var(--u) * 18/860); padding-bottom:calc(var(--u) * 24/860);
  border-bottom:1px solid #2E2E2E; font-weight:700; color:#fff;
  font-size:calc(var(--u) * 40/860); line-height:calc(var(--u) * 54/860); letter-spacing:-.04em }
.bs .bs-feat h3 .bs-g{ display:block }
/* 3684:354 — Pretendard Regular 24 / 1.513 / -0.8px / #EFEFEF, 마지막 줄만 ExtraBold */
.bs .bs-feat p{ font-weight:400; color:#EFEFEF;
  font-size:calc(var(--u) * 24/860); line-height:1.513; letter-spacing:-.0333em }
.bs .bs-feat p b{ font-weight:800; color:#fff }
/* ⚠ 여기에 브레이크포인트를 두면 안 된다. 피그마는 860 한 벌뿐이고 우리는 그걸
   --u 비율로 줄여 쓴다. 모바일에서만 세로로 쌓으면 1:1 이 깨진다. */

/* ── 표 ───────────────────────────────────────────── */
.bs .bs-tbl{ width:100%; border-collapse:collapse; margin-top:calc(var(--u) * 30/860);
  font-size:calc(var(--u) * 26/860); letter-spacing:-.02em }
.bs .bs-tbl caption{ text-align:center; font-weight:800; color:var(--green);
  font-size:calc(var(--u) * 44/860); padding-bottom:calc(var(--u) * 24/860) }
.bs .bs-tbl th,.bs .bs-tbl td{ padding:calc(var(--u) * 18/860) calc(var(--u) * 10/860);
  border-bottom:1px solid #232323; text-align:left; line-height:1.45 }
.bs .bs-tbl thead th{ color:#8A8A8A; font-weight:700; font-size:calc(var(--u) * 22/860) }
.bs .bs-tbl tbody th{ font-weight:800; color:#fff; white-space:nowrap }
.bs .bs-tbl .bs-wk{ width:1%; white-space:nowrap; color:var(--green); font-weight:800;
  font-size:calc(var(--u) * 34/860); text-align:center }
.bs .bs-tbl .bs-ep{ width:1%; white-space:nowrap; color:#8A8A8A; text-align:right }
/* 3697:32973 — 걱정카드와 같은 캡슐. w760 h658 · 테두리 4px #EBEBFF · radius 100
   ⚠ 그라데이션 각도만 다르다(155.69deg). 밋밋한 검정 박스로 두면 안 된다. */
.bs .bs-boxed{
  width:calc(var(--u) * 760/860); margin:calc(var(--u) * 50/860) auto 0;
  border:calc(var(--u) * 4/860) solid #2CFF05;   /* 원본 실측 — 발광 없는 4px 실선 */
  border-radius:calc(var(--u) * 100/860);
  background:linear-gradient(155.69deg, #063908 6.66%, #000 41.33%, #063908 94.95%);
  padding:calc(var(--u) * 40/860) calc(var(--u) * 50/860) calc(var(--u) * 46/860);
}
/* 제목 3697:33001 — TLAB 90px #2CFF05 tracking -3.6 */
.bs .bs-boxed .bs-cap-h{ text-align:center; line-height:0; margin-bottom:calc(var(--u) * 26/860) }
.bs .bs-boxed .bs-cap-h .bs-tl{ color:var(--green);
  filter:drop-shadow(0 calc(var(--u) * 2.7/860) calc(var(--u) * 2.7/860) rgba(0,0,0,.15)) }
.bs .bs-note{ margin-top:calc(var(--u) * 16/860); color:#8A8A8A;
  font-size:calc(var(--u) * 22/860); text-align:center }

/* ── 추천 대상 (상페2 y4789~7328) ─────────────────────
   실측 — 섹션 제목 TLAB 110 #2CFF05 · 항목 제목 Pretendard Bold 44(-1.32) 흰색
   본문 Pretendard Bold 22/32 흰색. 캐릭터 일러스트가 좌·우 번갈아 붙는다. */
.bs .bs-who-lead{ text-align:center; font-weight:700; color:#fff;
  font-size:calc(var(--u) * 34/860); letter-spacing:-.03em }
.bs .bs-who-h{ margin:calc(var(--u) * 10/860) 0 0; text-align:center; line-height:0 }
.bs .bs-who-h .bs-tl{ color:var(--green) }
.bs .bs-b-whoh{ width:calc(var(--u) * 743.6/860) }

.bs .bs-who{ list-style:none; padding:0; margin:calc(var(--u) * 70/860) 0 0;
  display:grid; gap:calc(var(--u) * 60/860) }
.bs .bs-who li{ display:grid; align-items:center; gap:calc(var(--u) * 18/860) }
.bs .bs-who .bs-left { grid-template-columns:auto 1fr; text-align:left }
.bs .bs-who .bs-right{ grid-template-columns:1fr auto; text-align:right }
.bs .bs-who .bs-right .bs-ch{ order:2 }
.bs .bs-who .bs-ch{ display:block }
.bs .bs-who .bs-ch img{ width:100% }
.bs .bs-who .bs-left  .bs-ch{ width:calc(var(--u) * 214/860) }
.bs .bs-who .bs-right .bs-ch{ width:calc(var(--u) * 250/860) }
.bs .bs-who h3{ margin:0; font-weight:700; color:#fff;
  font-size:calc(var(--u) * 44/860); line-height:1.24; letter-spacing:-.03em }
.bs .bs-who p{ margin-top:calc(var(--u) * 16/860); font-weight:700; color:#fff;
  font-size:calc(var(--u) * 22/860); line-height:calc(var(--u) * 32/860) }

/* 마지막 — 「그리고 무엇보다도...」 (3687:28880 / 28879) 위에 대화방 화면 */
/* 3726:34210 — 사진 위에 글이 얹힌다(피그마 x42 y7008.5 w775 h416.9).
   ⚠ 예전에는 사진 아래에 글을 뒀었다. 피그마와 다르다. */
.bs .bs-who-last{ position:relative; margin-top:calc(var(--u) * 80/860); text-align:center }
.bs .bs-who-last img{ display:block; width:calc(var(--u) * 775/860); height:auto;
  margin-inline:auto; border-radius:calc(var(--u) * 16/860) }
.bs .bs-who-cap{ position:absolute; left:0; right:0; top:calc(var(--u) * 118/860) }
.bs .bs-who-cap .bs-h50{ margin-top:calc(var(--u) * 12/860) }

/* ── 혜택 (상페2 y7689~10113) ──────────────────────────
   캡슐 두 개다. **주황**(극장 상영 · 테두리 #FF742F · 그라데이션 149.76deg #431600)과
   **초록**(워크샵·파티 · 136.63deg #063908). 둘 다 w760 테두리 4px 반지름 100.
   ⚠ get_design_context 는 테두리를 #EBEBFF 로 준다. 원본 픽셀은 각각 #FF742F / #2CFF05 다. */
.bs .bs-perk-lead{ text-align:center; font-weight:700; color:#fff;
  font-size:calc(var(--u) * 34/860); letter-spacing:-.03em }
.bs .bs-perk-h{ margin:calc(var(--u) * 12/860) 0 0; text-align:center; font-weight:800; color:#fff;
  font-size:calc(var(--u) * 56/860); line-height:1.2; letter-spacing:-.04em }

.bs .bs-capsule{ width:calc(var(--u) * 760/860); margin:calc(var(--u) * 60/860) auto 0;
  border:calc(var(--u) * 4/860) solid; border-radius:calc(var(--u) * 100/860);
  padding:calc(var(--u) * 56/860) calc(var(--u) * 40/860) calc(var(--u) * 60/860);
  text-align:center }
.bs .bs-capsule-o{ border-color:#FF742F;
  background:linear-gradient(149.76deg, #431600 6.66%, #000 41.33%, #431600 94.95%) }
.bs .bs-capsule-g{ border-color:#2CFF05;
  background:linear-gradient(136.63deg, #063908 6.66%, #000 41.33%, #063908 94.95%) }
.bs .bs-capsule-lead{ font-weight:600; font-size:calc(var(--u) * 30/860);
  line-height:calc(var(--u) * 44/860); letter-spacing:-.01em }
.bs .bs-capsule-lead.bs-o{ color:#CDFF0C }
.bs .bs-capsule-lead.bs-c{ color:#08FFD0 }
.bs .bs-capsule-logo{ display:flex; align-items:center; justify-content:center;
  gap:calc(var(--u) * 14/860); margin-top:calc(var(--u) * 22/860) }
.bs .bs-capsule-logo img{ width:auto; height:auto }
.bs .bs-capsule-logo .bs-lw{ width:calc(var(--u) * 421.3/860) }
.bs .bs-capsule-logo .bs-lm{ width:calc(var(--u) * 39/860) }
.bs .bs-slr img{ width:calc(var(--u) * 369.27/860) }
.bs .bs-slr b{ font-weight:800; color:#fff; font-size:calc(var(--u) * 43.825/860);
  letter-spacing:-.01em }
.bs .bs-capsule h3{ margin:calc(var(--u) * 26/860) 0 0; line-height:0 }
.bs .bs-capsule h3 .bs-tl{ margin-inline:auto }
.bs .bs-capsule-o h3 .bs-tl{ color:#FF742F;
  filter:drop-shadow(0 calc(var(--u) * 2.444/860) calc(var(--u) * 2.444/860) rgba(0,0,0,.15)) }
.bs .bs-capsule-g h3 .bs-tl{ color:var(--green);
  filter:drop-shadow(0 calc(var(--u) * 2.687/860) calc(var(--u) * 2.687/860) rgba(0,0,0,.15)) }
/* 「촬영 & 조명 워크샵」 — & 만 작다. 한 줄로 붙인다. */
.bs .bs-capsule h3.bs-ws{ display:flex; align-items:baseline; justify-content:center;
  gap:calc(var(--u) * 12/860) }
.bs .bs-capsule .bs-shot{ margin:calc(var(--u) * 34/860) auto 0;
  width:calc(var(--u) * 632.6/860); border-radius:calc(var(--u) * 9.55/860) }
.bs .bs-capsule-cap{ margin-top:calc(var(--u) * 16/860); color:#fff; font-weight:600;
  font-size:calc(var(--u) * 26/860); letter-spacing:-.02em }

.bs .bs-b-theater{ width:calc(var(--u) * 615.48/860) }
.bs .bs-b-ticket{ width:calc(var(--u) * 615.87/860); margin-top:calc(var(--u) * 10/860) }
.bs .bs-b-ws1{ width:calc(var(--u) * 150.31/860) }
.bs .bs-b-ws2{ width:calc(var(--u) * 70.76/860) }
.bs .bs-b-ws3{ width:calc(var(--u) * 403.73/860) }
.bs .bs-b-party{ width:calc(var(--u) * 618.15/860) }

/* ── 21스튜디오 실적 ──────────────────────────────── */
.bs .bs-recs{ list-style:none; padding:0; margin:calc(var(--u) * 40/860) 0 0;
  display:grid; gap:calc(var(--u) * 12/860) }
.bs .bs-recs li{ display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u) * 20/860);
  background:var(--card); border-radius:calc(var(--u) * 14/860);
  padding:calc(var(--u) * 22/860) calc(var(--u) * 24/860) }
.bs .bs-recs .bs-no{ color:var(--green); font-weight:800; font-size:calc(var(--u) * 26/860) }
.bs .bs-recs p{ color:#E2E2E2; font-size:calc(var(--u) * 25/860);
  line-height:calc(var(--u) * 36/860); letter-spacing:-.02em }

/* ── 강사 ─────────────────────────────────────────── */
.bs .bs-tutor{ margin-top:calc(var(--u) * 40/860) }
.bs .bs-tutor .bs-name{ font-weight:900; letter-spacing:-.04em; line-height:1;
  font-size:calc(var(--u) * 130/860) }
.bs .bs-tutor .bs-role{ margin-top:calc(var(--u) * 14/860); color:#8A8A8A;
  font-size:calc(var(--u) * 24/860) }
.bs .bs-tutor .bs-rule{ height:1px; background:#2B2B2B; margin:calc(var(--u) * 26/860) 0 }
.bs .bs-tutor ul{ display:grid; gap:calc(var(--u) * 12/860); padding:0; margin:0 }
.bs .bs-tutor li{ list-style:none; color:#D6D6D6; position:relative;
  padding-left:calc(var(--u) * 22/860);
  font-size:calc(var(--u) * 24/860); line-height:calc(var(--u) * 36/860); letter-spacing:-.02em }
.bs .bs-tutor li::before{ content:""; position:absolute; left:0; top:.62em;
  width:calc(var(--u) * 8/860); aspect-ratio:1; border-radius:50%; background:var(--green) }

/* ── 장소 ─────────────────────────────────────────── */
.bs .bs-place{ display:grid; grid-template-columns:185fr 249fr 425fr;
  margin-top:calc(var(--u) * 30/860); overflow:hidden }

/* ── 가격 상자 (3684:17731) ───────────────────────
   창 w753.53 · bg rgba(0,0,0,.25) · blur 10.543 · 테두리 0.843 #747474 · radius 12.651 */
.bs .bs-price{
  width:calc(var(--u) * 753.53/860); margin:calc(var(--u) * 50/860) auto 0;
  background:rgba(0,0,0,.25);
  -webkit-backdrop-filter:blur(calc(var(--u) * 10.543/860));
  backdrop-filter:blur(calc(var(--u) * 10.543/860));
  border:calc(var(--u) * .843/860) solid #747474;
  border-radius:calc(var(--u) * 12.651/860);
  box-shadow:calc(var(--u) * 1.647/860) calc(var(--u) * 1.647/860)
             calc(var(--u) * 3.294/860) rgba(0,0,0,.25);
  overflow:hidden;
}
.bs .bs-price .bs-bar{ display:flex; align-items:center; background:var(--card);
  border-bottom:calc(var(--u) * .843/860) solid #747474;
  height:calc(var(--u) * 32.049/860);
  padding-inline:calc(var(--u) * 12/860); gap:calc(var(--u) * 6.7/860) }
.bs .bs-price .bs-bar i{ width:calc(var(--u) * 10.964/860); aspect-ratio:1; display:block }
.bs .bs-price .bs-bar span{ flex:1; text-align:center; color:#B3ADAF; font-weight:500;
  font-size:calc(var(--u) * 16.868/860); letter-spacing:-.01em;
  margin-left:calc(var(--u) * -55/860) }
.bs .bs-price .bs-body{ padding:calc(var(--u) * 56/860) calc(var(--u) * 34/860) calc(var(--u) * 54/860);
  text-align:center }
/* 정가 — TLAB 70.846 잉크 333.54 #D2D2D2 · 취소선 w349 h4 */
.bs .bs-price .bs-was{ position:relative; display:inline-block; color:#D2D2D2; line-height:0 }

.bs .bs-price .bs-was::after{ content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:calc(var(--u) * 349/860);
  height:calc(var(--u) * 8/860); background:#D2D2D2; border-radius:2px }
.bs .bs-price .bs-arrow{ margin:calc(var(--u) * 14/860) auto; width:calc(var(--u) * 27/860) }
/* 299,000원 — TLAB 168.68 잉크 567.1 #2CFF05 */
.bs .bs-price .bs-now{ line-height:0 }
.bs .bs-price .bs-now .bs-tl{ color:var(--green);
  filter:drop-shadow(0 calc(var(--u) * 3.374/860) calc(var(--u) * 3.374/860) rgba(0,0,0,.15)) }
.bs .bs-price .bs-tags{ display:flex; justify-content:center; gap:calc(var(--u) * 17/860);
  margin-top:calc(var(--u) * 34/860) }
.bs .bs-price .bs-tags span{ display:grid; place-items:center; color:var(--green);
  border:calc(var(--u) * 1.687/860) solid var(--green);
  border-radius:calc(var(--u) * 10/860); height:calc(var(--u) * 68/860) }
.bs .bs-price .bs-tags .bs-t1{ width:calc(var(--u) * 284/860) }
.bs .bs-price .bs-tags .bs-t2{ width:calc(var(--u) * 182/860) }


.bs .bs-price ul{ list-style:none; padding:0; margin:calc(var(--u) * 46/860) 0 0; text-align:left }
.bs .bs-price li{ display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:calc(var(--u) * 19/860); padding:calc(var(--u) * 22/860) calc(var(--u) * 4/860);
  border-top:1px solid #1C1C1C }
.bs .bs-price li::before{ content:""; width:calc(var(--u) * 31/860); aspect-ratio:1;
  border-radius:50%; border:calc(var(--u) * 3/860) solid var(--green);
  background:rgba(44,255,5,.14) }
.bs .bs-price li b{ font-weight:800; color:#fff; font-size:calc(var(--u) * 26/860);
  letter-spacing:-.02em }
.bs .bs-price li em{ font-style:normal; color:#8A8A8A; font-weight:600;
  font-size:calc(var(--u) * 22/860); margin-left:calc(var(--u) * 10/860) }
.bs .bs-price .bs-limited{ margin-top:calc(var(--u) * 46/860) }
.bs .bs-price .bs-limited img{ width:calc(var(--u) * 439.412/860); margin-inline:auto }
/* 3684:17746 SemiBold 26.989 #F5F5F6 + Bold #2CFF05 */
.bs .bs-price .bs-lastline{ margin-top:calc(var(--u) * 16/860); font-weight:600; color:#F5F5F6;
  font-size:calc(var(--u) * 26.989/860); letter-spacing:-.01em }
.bs .bs-price .bs-lastline b{ font-weight:700; color:var(--green) }
.bs .bs-price .bs-fine{ margin-top:calc(var(--u) * 12/860); color:#777; font-weight:600;
  font-size:calc(var(--u) * 16.868/860); letter-spacing:-.01em }

/* ── 신청 버튼 ────────────────────────────────────── */
.bs .bs-go{ display:grid; gap:calc(var(--u) * 12/860); margin-top:calc(var(--u) * 40/860) }
.bs .bs-go a{ display:block; text-align:center; text-decoration:none; font-weight:800;
  border-radius:calc(var(--u) * 16/860); padding:calc(var(--u) * 26/860);
  font-size:calc(var(--u) * 30/860); letter-spacing:-.02em }
.bs .bs-go .bs-buy{ background:var(--green); color:#031000 }
.bs .bs-go .bs-ask{ background:#141414; color:#fff; border:1px solid #2C2C2C }

/* ── 가격·단추 움직임 (2026-08-24) ─────────────────────
   ⚠ 나타나기(bs-rv)는 translate/opacity 를 쓰므로, 여기서는 안쪽 svg 의
     transform/filter 만 만진다. 겹치면 안 된다. */
/* 299,000원 — 나타날 때 한 번 튀고, 그 뒤 초록빛 숨쉬기 */
html.js-rv .bs .bs-price .bs-now.bs-in .bs-tl{ animation:bs-pop .55s cubic-bezier(.2,1.7,.4,1) both }
@keyframes bs-pop{ from{ transform:scale(.8) } to{ transform:scale(1) } }
.bs .bs-price .bs-now svg{ animation:bs-glow 2.6s ease-in-out 1.2s infinite }
@keyframes bs-glow{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(44,255,5,0)) }
  50%{ filter:drop-shadow(0 0 calc(var(--u) * 16/860) rgba(44,255,5,.55)) } }
/* 내려가는 화살표 — 콕콕 */
.bs .bs-price .bs-arrow{ animation:bs-drop 1.6s ease-in-out infinite }
@keyframes bs-drop{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(22%) } }
/* 「최대 33% 할인」 캡슐 — 몇 초에 한 번 흔들어 눈길 끌기 */
.bs .bs-price .bs-tags .bs-t1{ animation:bs-nudge 3.4s ease-in-out 2s infinite }  /* ⚠ display 는 위의 grid 를 그대로 둘 것 */
@keyframes bs-nudge{
  0%,84%,100%{ transform:none }
  88%{ transform:rotate(-2.2deg) scale(1.05) }
  92%{ transform:rotate(2.2deg) scale(1.05) }
  96%{ transform:rotate(0) scale(1.03) } }
/* 초록 단추 — 빛 숨쉬기 + 이따금 빛줄기 스치기, 올리면 살짝 떠오름 */
.bs .bs-go .bs-buy{ position:relative; overflow:hidden;
  animation:bs-breathe 2.8s ease-in-out infinite;
  transition:transform .18s ease }
.bs .bs-go .bs-buy:hover{ transform:translateY(-2px) scale(1.015) }
@keyframes bs-breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(44,255,5,.25) }
  50%{ box-shadow:0 0 calc(var(--u) * 24/860) calc(var(--u) * 3/860) rgba(44,255,5,.45) } }
.bs .bs-go .bs-buy::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translateX(-130%); animation:bs-shine 3.6s ease 1.4s infinite }
@keyframes bs-shine{ 0%{ transform:translateX(-130%) } 42%,100%{ transform:translateX(130%) } }
.bs .bs-go .bs-ask{ transition:transform .18s ease, border-color .18s ease }
.bs .bs-go .bs-ask:hover{ transform:translateY(-2px); border-color:#4A4A4A }
@media (prefers-reduced-motion: reduce){
  .bs .bs-price .bs-now svg, .bs .bs-price .bs-arrow,
  .bs .bs-price .bs-tags .bs-t1, .bs .bs-go .bs-buy, .bs .bs-go .bs-buy::after{ animation:none } }
.bs .bs-go a:hover{ filter:brightness(1.08) }
@media (min-width:620px){ .bs .bs-go{ grid-template-columns:1.4fr 1fr } }

/* ── 화면 아래 신청 바 ─────────────────────────────
   ⚠ main 밖이라 --u 를 다시 선언해야 한다.
   ⚠ 카톡·네이버 인앱 브라우저가 화면 아래를 자기 툴바로 덮는다. --lift 만큼 올린다
     (값은 페이지 스크립트가 visualViewport 로 잰다). env(safe-area) 는 그때 0 이라 소용없다. */
.bs-buybar{
  --u:min(860px, 100vw);
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  transform:translateY(calc(-1 * var(--lift,0px)));
  background:rgba(0,0,0,.93); backdrop-filter:blur(14px); border-top:1px solid #1E1E1E;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transition:opacity .2s;
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
}
.bs-buybar.bs-on{ opacity:1; visibility:visible }
.bs-buybar .bs-in2{ width:min(var(--u), 100%); margin:0 auto; display:grid;
  grid-template-columns:1fr auto; gap:10px; align-items:center }
.bs-buybar .bs-p{ font-weight:800; color:#fff; font-size:clamp(13px,3.2vw,17px) }
.bs-buybar .bs-p s{ color:#8A8A8A; font-weight:600; margin-right:7px; font-size:.85em }
.bs-buybar a{ background:#2CFF05; color:#031000; text-decoration:none; font-weight:800;
  border-radius:11px; padding:12px clamp(16px,4vw,28px);
  font-size:clamp(13px,3.2vw,16px); white-space:nowrap }
body.kb .bs-buybar{ display:none }

/* ⚠ 이 줄은 파일 맨 끝이어야 한다 — .bs-buybar 가 뒤에서 --u 를 다시 선언하므로
   앞에 두면 우선순위가 같아 덮인다. 501 하단 바에서 똑같이 당했다. */
@media (min-width:940px){ .bs-buybar{ --u:900px } }


/* ── 과정 고르기 옆 캐릭터 ─────────────────────────
   ⚠ 두 과정을 고르는 자리라 눈이 먼저 가야 한다. 캐릭터가 시선을 잡아준다. */
/* ⚠ 마스코트가 위로 튀어나오면 헤더에 잘린다. 그릇 안에서만 놀게 하고
     위쪽에 그만큼 자리를 비워둔다. */
.bs-pick-wrap{ position:relative; --u:min(860px, 100vw);
  padding-top:clamp(46px, 5.2vw, 80px); overflow:visible }
@media (min-width:940px){ .bs-pick-wrap{ --u:900px } }
/* 카드마다 캐릭터를 하나씩 — 정규반은 몬스터, 왕초보반은 알 캐릭터(사용자 지정).
   ⚠ 카드 위로 튀어나오므로 그릇에 위 여백이 있어야 헤더에 안 잘린다. */
.bs-pick a{ position:relative }
.bs-mascot{ position:absolute; z-index:3; pointer-events:none; height:auto;
  transform-origin:bottom center; animation:bs-peek 4.6s ease-in-out infinite }
.bs-m-reg{ left:clamp(-16px, -0.9vw, -3px); bottom:calc(100% - clamp(14px, 3.4vw, 26px));
  width:clamp(50px, 11vw, 92px) }
.bs-m-basic{ right:clamp(-12px, -0.8vw, -3px); bottom:calc(100% - clamp(12px, 3vw, 22px));
  width:clamp(42px, 8.6vw, 74px); animation-delay:1.4s }

@keyframes bs-peek{
  0%,72%,100%{ transform:translateY(0) rotate(0) }
  78%{ transform:translateY(-5px) rotate(-6deg) }
  86%{ transform:translateY(-2px) rotate(4deg) }
  92%{ transform:translateY(0) rotate(0) }
}

/* ── CLASS FEATURE 제목 (3684:348) ────────────────
   Pretendard ExtraBold · 화면 폭에 꽉 차게. 피그마 w769 h178 */
/* 3684:348 — TLAB 136px 흰색 자간 -4.08 · 잉크 712.1 */
.bs .bs-h-feat{ margin:calc(var(--u) * 16/860) 0 0; text-align:center; line-height:0 }
.bs .bs-h-feat .bs-tl{ color:#fff }
/* 사진 두 장 나란히 (3697:32978 / 32990) — x30/445 w397/384 */
.bs .bs-duo{ display:grid; grid-template-columns:397fr 384fr;
  gap:calc(var(--u) * 18/860); margin-top:calc(var(--u) * 40/860) }
.bs .bs-duo img{ border-radius:calc(var(--u) * 14/860) }
/* 포스터 3장 (3684:17665 외) */
.bs .bs-trio{ display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:calc(var(--u) * 10/860); margin-top:calc(var(--u) * 40/860) }
.bs .bs-trio img{ border-radius:calc(var(--u) * 10/860) }
/* 21스튜디오 사진 위 문구 — 사진 y576..1167 · 글 y843 */
.bs .bs-s-21::after{ background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%,
  rgba(0,0,0,.2) 45%, rgba(0,0,0,.55) 100%) }
.bs .bs-s-21 .bs-cap{ top:calc(var(--u) * 200/860) }
/* 마무리 사진 — 글은 아래쪽 */
.bs .bs-s-end::after{ background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%,
  rgba(0,0,0,.05) 40%, rgba(0,0,0,.9) 100%) }
.bs .bs-s-end .bs-cap{ bottom:calc(var(--u) * 70/860) }

/* ── 스크롤 등장 ──────────────────────────────────
   ⚠ 과하면 광고처럼 보인다. 아래에서 살짝 올라오며 나타나는 것 하나만 쓴다.
   ⚠ 자바스크립트가 못 돌면 .bs-rv 가 영영 안 보이면 안 된다.
     그래서 기본값을 「보임」으로 두고, 스크립트가 붙을 때만 숨긴다(html.js-rv). */
/* ⚠ transform 을 쓰면 안 된다. 히어로 문구처럼 이미 translateX(-50%) 로 가운데를
     잡아둔 요소의 transform 을 덮어써서 자리가 통째로 틀어진다(실제로 그랬다).
     translate 속성은 transform 과 따로 쌓이므로 안전하다. */
html.js-rv .bs .bs-rv{ opacity:0; translate:0 calc(var(--u) * 22/860);
  transition:opacity .55s ease, translate .55s cubic-bezier(.22,.8,.28,1) }
html.js-rv .bs .bs-rv.bs-in{ opacity:1; translate:none }
/* 목록은 한 칸씩 늦게 */
html.js-rv .bs .bs-worry li.bs-rv,
html.js-rv .bs .bs-nono li.bs-rv,
html.js-rv .bs .bs-like li.bs-rv,
html.js-rv .bs .bs-who li.bs-rv,
html.js-rv .bs .bs-perk li.bs-rv,
html.js-rv .bs .bs-recs li.bs-rv{ transition-delay:var(--d, 0s) }

@media (prefers-reduced-motion:reduce){
  html.js-rv .bs .bs-rv{ opacity:1; translate:none; transition:none }
  .bs-mascot{ animation:none }
}

.bs .bs-b-feature{ width:calc(var(--u) * 712.1/860) }
.bs .bs-b-n01{ width:calc(var(--u) * 86.88/860) }
.bs .bs-b-n02{ width:calc(var(--u) * 103.45/860) }
.bs .bs-b-n03{ width:calc(var(--u) * 103.45/860) }

/* ── 커리큘럼 표 (상페2 y3471~4316) ────────────────────
   실측 — 주차 번호 TLAB 85 · 회차 TLAB 32(-0.96) · 주제 Pretendard Medium 27(-1.62)
   헤더는 **흰 띠에 검정 글씨**(3684:427 text-black). 왼쪽 위 모서리가 접힌 노치 모양이다
   (3684:426 Vector w774.04 h113.77 — offline.html 커리큘럼과 같은 도형). */
.bs .bs-cur-lead{ text-align:center; font-weight:600; color:#7B7B7B;
  font-size:calc(var(--u) * 50/860); line-height:calc(var(--u) * 60/860); letter-spacing:-.05em }
.bs .bs-cur-logo{ margin:calc(var(--u) * 18/860) 0 0; text-align:center; line-height:0 }
.bs .bs-cur-logo .bs-tl{ color:#fff; width:calc(var(--u) * 773.48/860) }

.bs .bs-cur{ position:relative; margin-top:calc(var(--u) * 22/860) }
.bs .bs-cur-note{ position:relative; z-index:2; text-align:right;
  padding-right:calc(var(--u) * 8/860); margin-bottom:calc(var(--u) * 6/860);
  font-weight:600; color:#fff; font-size:calc(var(--u) * 20/860); letter-spacing:-.02em }

.bs .bs-cur-head{ position:relative; height:calc(var(--u) * 113.77/860);
  display:grid; grid-template-columns:calc(var(--u) * 120/860) 1fr calc(var(--u) * 110/860);
  align-items:end; padding-bottom:calc(var(--u) * 22/860) }
.bs .bs-notch{ position:absolute; inset:0; width:100%; height:100%; display:block }
.bs .bs-cur-head span{ position:relative; z-index:1; color:#000; font-weight:600;
  font-size:calc(var(--u) * 27.01/860) }
.bs .bs-cur-head .bs-c1{ padding-left:calc(var(--u) * 18/860) }
.bs .bs-cur-head .bs-c2{ text-align:center }
.bs .bs-cur-head .bs-c3{ text-align:right; padding-right:calc(var(--u) * 12/860) }

/* 주차 묶음 — 안쪽 줄 간격 44, 주차 사이 71 */
.bs .bs-cw{ display:grid;
  grid-template-columns:calc(var(--u) * 120/860) 1fr;
  align-items:center; padding-top:calc(var(--u) * 27/860) }
.bs .bs-wk{ line-height:0; text-align:center; color:#fff }
.bs .bs-wk .bs-tl{ margin-inline:auto }
.bs .bs-rows{ display:grid; gap:calc(var(--u) * 10/860) }
.bs .bs-row{ display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:calc(var(--u) * 14/860); min-height:calc(var(--u) * 34/860) }
.bs .bs-row p{ font-weight:500; color:#fff;
  font-size:calc(var(--u) * 27/860); line-height:1.28; letter-spacing:-.06em }
.bs .bs-ep{ line-height:0; color:#fff; width:calc(var(--u) * 110/860); text-align:right }
.bs .bs-ep .bs-tl{ margin:0 0 0 auto }
/* 표 아래 마감선 3684:28840 */
.bs .bs-cur::after{ content:""; display:block; height:1px; background:#3A3A3A;
  margin-top:calc(var(--u) * 40/860) }

.bs .bs-b-w1{ width:calc(var(--u) * 21.5/860) }
.bs .bs-b-w2{ width:calc(var(--u) * 33.15/860) }
.bs .bs-b-w3{ width:calc(var(--u) * 33.14/860) }
.bs .bs-b-w4{ width:calc(var(--u) * 37.57/860) }
.bs .bs-b-e1{ width:calc(var(--u) * 27.49/860) }
.bs .bs-b-e2{ width:calc(var(--u) * 30.08/860) }
.bs .bs-b-e3{ width:calc(var(--u) * 30.59/860) }
.bs .bs-b-e4{ width:calc(var(--u) * 31.78/860) }
.bs .bs-b-e5{ width:calc(var(--u) * 30.22/860) }
.bs .bs-b-e6{ width:calc(var(--u) * 30.59/860) }
.bs .bs-b-e7{ width:calc(var(--u) * 30.05/860) }
.bs .bs-b-e8{ width:calc(var(--u) * 30.59/860) }
.bs .bs-b-curriculum{ width:calc(var(--u) * 773.48/860) }

/* ── TLAB 아웃라인 폭 — assets/tlab/meta.json 의 잉크폭(860 기준) 그대로 ──
   ⚠ 손으로 고치지 말 것. tools/tlab_basic.py 를 다시 돌리면 값이 바뀐다. */
.bs .bs-b-basicclass{ width:calc(var(--u) * 705.58/860) }
.bs .bs-b-odd{ width:calc(var(--u) * 773.01/860) }
.bs .bs-b-like{ width:calc(var(--u) * 509.96/860) }
.bs .bs-b-monthly{ width:calc(var(--u) * 497.7/860) }
.bs .bs-b-plan{ width:calc(var(--u) * 89.29/860) }
.bs .bs-b-direct{ width:calc(var(--u) * 90.72/860) }
.bs .bs-b-shoot{ width:calc(var(--u) * 260.82/860) }
.bs .bs-b-ai{ width:calc(var(--u) * 53.84/860) }
.bs .bs-b-edit{ width:calc(var(--u) * 89.21/860) }
.bs .bs-b-color{ width:calc(var(--u) * 137.42/860) }
.bs .bs-b-was{ width:calc(var(--u) * 333.54/860) }
.bs .bs-b-now{ width:calc(var(--u) * 567.1/860) }
.bs .bs-b-off33{ width:calc(var(--u) * 226.11/860) }
.bs .bs-b-limited{ width:calc(var(--u) * 124.74/860) }

/* ══ 상페3 (3684:17645) — tools/basic_s3.py 가 만든다. 손대지 말 것 ══ */
/* 판 공통 규칙(.bs-board)은 손조판 구역에 있다. 여기서는 높이만 정한다. */
.bs .bs-s3a{ height:calc(var(--u) * 8140.0/860) }
.bs .bs-s3b{ height:calc(var(--u) * 1207.0/860) }

/* ── 여는 사진 3장 (3684:262 · 3689:28881 · 3697:32995) ── */
.bs .bs-s3 .bs-p1{ top:calc(var(--u) * 0.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
.bs .bs-s3 .bs-p2{ top:calc(var(--u) * 576.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
.bs .bs-s3 .bs-p3{ top:calc(var(--u) * 1167.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
/* 3684:17641~17643 — 레이어가 Inter:Bold 50. 한글이 피그마 폴백폰트로 4.5% 크게 렌더된다(실측 52.3/-.018) */
.bs .bs-s3 .bs-t1,.bs .bs-s3 .bs-t2,.bs .bs-s3 .bs-t3{ text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 52.3/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.018em }
.bs .bs-s3 .bs-t1{ top:calc(var(--u) * 260.0/860); left:calc(var(--u) * 285.0/860); width:calc(var(--u) * 290.0/860) }
.bs .bs-s3 .bs-t2{ top:calc(var(--u) * 841.0/860); left:calc(var(--u) * 301.0/860); width:calc(var(--u) * 257.0/860) }
.bs .bs-s3 .bs-t3{ top:calc(var(--u) * 1438.0/860); left:calc(var(--u) * 155.0/860); width:calc(var(--u) * 550.0/860) }
/* 3697:33701 — 로고 세 개, 불투명도 25% */
.bs .bs-s3 .bs-lgs{ top:calc(var(--u) * 1792.0/860); left:calc(var(--u) * 262.833/860); width:calc(var(--u) * 333.333/860); height:calc(var(--u) * 40.0/860); display:flex; align-items:center; justify-content:space-between; opacity:.25 }
.bs .bs-s3 .bs-lgs img:nth-child(1){ width:calc(var(--u) * 91.282/860) }
.bs .bs-s3 .bs-lgs img:nth-child(2){ width:calc(var(--u) * 87.179/860) }
.bs .bs-s3 .bs-lgs img:nth-child(3){ width:calc(var(--u) * 99.487/860) }
/* 3684:17639 — Bold 50/60 -1px #ECECEC, 앞 구절만 ExtraBold #2CFF05 */
.bs .bs-s3 .bs-made{ top:calc(var(--u) * 1985.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); text-align:center; color:#ECECEC; font-weight:700; font-size:calc(var(--u) * 50.0/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.02em }
.bs .bs-s3 .bs-made b{ font-weight:800; color:var(--green) }

/* ── 21스튜디오 ── */
.bs .bs-s3 .bs-lock{ top:calc(var(--u) * 2226.0/860); left:calc(var(--u) * 216.0/860); width:calc(var(--u) * 428.0/860) }
/* 3684:17714 — TLAB 70 -2.8 #2CFF05 */
.bs .bs-s3 .bs-h21{ top:calc(var(--u) * 2528.0/860); left:calc(var(--u) * 97.745/860); width:calc(var(--u) * 664.51/860); color:var(--green); filter:drop-shadow(0 calc(var(--u) * 2.7/860) calc(var(--u) * 2.7/860) rgba(0,0,0,.15)) }
/* 3684:17715 — Medium 33/45 -0.66 #A0A0A0. trim 없는 줄상자 */
.bs .bs-s3 .bs-sub21{ top:calc(var(--u) * 2610.0/860); left:calc(var(--u) * 35.0/860); width:calc(var(--u) * 789.0/860); text-align:center; color:#A0A0A0; font-weight:500; font-size:calc(var(--u) * 33.0/860); line-height:calc(var(--u) * 45.0/860); letter-spacing:-.02em }
/* 3684:17716 / 17783 / 17648 / 17784 / 17906 / 3687:28878 — 44/54 #ECECEC */
.bs .bs-s3 .bs-lead21,.bs .bs-s3 .bs-ip,.bs .bs-s3 .bs-story,.bs .bs-s3 .bs-placeh,.bs .bs-s3 .bs-finlead,.bs .bs-s3 .bs-finh{ text-align:center; color:#ECECEC; font-weight:800; font-size:calc(var(--u) * 44.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.02em }
.bs .bs-s3 .bs-lead21 b,.bs .bs-s3 .bs-story b,.bs .bs-s3 .bs-finlead b{ font-weight:inherit }
.bs .bs-s3 .bs-story b,.bs .bs-s3 .bs-finlead b{ color:var(--green) }
.bs .bs-s3 .bs-lead21{ top:calc(var(--u) * 2761.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); letter-spacing:-.0245em }
.bs .bs-s3 .bs-lead21 b{ color:#fff; font-weight:700 }
/* 포스터 3장 3684:17665 외 — x31..829 */
.bs .bs-s3 .bs-pos{ top:calc(var(--u) * 2896.671/860); left:calc(var(--u) * 31.0/860); width:calc(var(--u) * 798.0/860); display:grid; grid-template-columns:calc(var(--u) * 259.205/860) calc(var(--u) * 259.675/860) calc(var(--u) * 259.395/860); justify-content:space-between; align-items:start }
.bs .bs-s3 .bs-pos img{ border-radius:calc(var(--u) * 6.0/860) }
.bs .bs-s3 .bs-ip{ top:calc(var(--u) * 3379.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860) }
/* 3684:17785 — SemiBold 27/41 -0.54 #ECECEC, 앞 구절만 #2CFF05 */
.bs .bs-s3 .bs-only{ top:calc(var(--u) * 3449.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); text-align:center; color:#ECECEC; font-weight:600; font-size:calc(var(--u) * 27.0/860); line-height:calc(var(--u) * 41.0/860); letter-spacing:-.02em }
.bs .bs-s3 .bs-only b{ font-weight:inherit; color:var(--green) }
/* 실적 6줄 3684:17787 — 바깥 #272727, 줄 #121212 r22.5 */
.bs .bs-s3 .bs-cred{ top:calc(var(--u) * 3569.0/860); left:calc(var(--u) * 39.0/860); width:calc(var(--u) * 782.49/860); list-style:none; background:#272727; border-radius:calc(var(--u) * 27.0/860); padding:calc(var(--u) * 9.0/860); display:grid; gap:calc(var(--u) * 9.004/860) }
.bs .bs-s3 .bs-cred li{ display:flex; align-items:center; gap:calc(var(--u) * 9.004/860); background:#121212; border-radius:calc(var(--u) * 22.511/860); padding:calc(var(--u) * 18.009/860) calc(var(--u) * 22.511/860) }
.bs .bs-s3 .bs-cred i{ flex:none; color:#AAD8F9 }
.bs .bs-s3 .bs-cred i .bs-tl{ margin-inline:0 }
.bs .bs-s3 .bs-b-c01{ width:calc(var(--u) * 18.86/860) }
.bs .bs-s3 .bs-b-c02{ width:calc(var(--u) * 22.56/860) }
.bs .bs-s3 .bs-b-c03{ width:calc(var(--u) * 22.56/860) }
.bs .bs-s3 .bs-b-c04{ width:calc(var(--u) * 23.83/860) }
.bs .bs-s3 .bs-b-c05{ width:calc(var(--u) * 22.77/860) }
.bs .bs-s3 .bs-b-c06{ width:calc(var(--u) * 22.96/860) }
.bs .bs-s3 .bs-cred p{ padding-left:calc(var(--u) * 10.0/860); color:#ECECEC; font-weight:600; font-size:calc(var(--u) * 22.0/860); line-height:calc(var(--u) * 41.779/860); letter-spacing:-.02em }

/* ── 대표 강사 ── */
.bs .bs-s3 .bs-tutpic{ top:calc(var(--u) * 4267.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
/* 3684:17830 — TLAB 143.333 -5.7333 #08FFD0 */
.bs .bs-s3 .bs-hugo{ top:calc(var(--u) * 4717.0/860); left:calc(var(--u) * 63.0/860); width:calc(var(--u) * 251.41/860); color:#08FFD0 }
.bs .bs-s3 .bs-hugo .bs-tl{ margin-inline:0 }
/* 3684:17828 — Bold 44/54 -1.32 #AAD8F9 */
.bs .bs-s3 .bs-headin{ top:calc(var(--u) * 4882.0/860); left:calc(var(--u) * 60.0/860); width:calc(var(--u) * 500.0/860); color:#AAD8F9; font-weight:700; font-size:calc(var(--u) * 44.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.03em }
/* 3684:17827 — Bold 27/48 -0.81 흰색 */
.bs .bs-s3 .bs-hrole{ top:calc(var(--u) * 4936.0/860); left:calc(var(--u) * 59.0/860); width:calc(var(--u) * 700.0/860); color:#fff; font-weight:700; font-size:calc(var(--u) * 27.0/860); line-height:calc(var(--u) * 48.0/860); letter-spacing:-.03em }
.bs .bs-s3 .bs-rule2{ top:calc(var(--u) * 4986.0/860); left:calc(var(--u) * 52.5/860); width:calc(var(--u) * 751.5/860); height:calc(var(--u) * 2.0/860); border:0; background:#3A3A3A }
/* 3684:17831 — Medium 22/41.8 -0.66 흰색, 글머리 들여쓰기 33 */
/* ⚠ ::marker 는 글 바로 앞에 붙어서 피그마(점이 8px 더 왼쪽)와 다르다. 점을 직접 그린다 */
.bs .bs-s3 .bs-hcv,.bs .bs-s3 .bs-awdlist{ list-style:none; color:#fff; font-size:calc(var(--u) * 22.0/860); line-height:calc(var(--u) * 41.8/860); letter-spacing:-.03em; padding-left:calc(var(--u) * 33.0/860) }
.bs .bs-s3 .bs-hcv li,.bs .bs-s3 .bs-awdlist li{ position:relative }
.bs .bs-s3 .bs-hcv li::before,.bs .bs-s3 .bs-awdlist li::before{ content:""; position:absolute; left:calc(var(--u) * -20.0/860); top:calc(var(--u) * 16.0/860); width:calc(var(--u) * 6.0/860); height:calc(var(--u) * 6.0/860); border-radius:50%; background:currentColor }
.bs .bs-s3 .bs-hcv{ top:calc(var(--u) * 5021.0/860); left:calc(var(--u) * 50.0/860); width:calc(var(--u) * 752.0/860); font-weight:500 }
.bs .bs-s3 .bs-story{ top:calc(var(--u) * 5496.0/860); left:calc(var(--u) * 12.0/860); width:calc(var(--u) * 834.0/860) }

/* ── 공모전 ── */
.bs .bs-s3 .bs-trophy{ top:calc(var(--u) * 5743.3/860); left:calc(var(--u) * 151.2/860); width:calc(var(--u) * 713.8/860); z-index:0 }
/* 3697:33467 — Bold 41 -1.23 #F5F5F6. trim 없는 줄상자 */
.bs .bs-s3 .bs-awdlead{ top:calc(var(--u) * 5830.597/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 656.0/860); z-index:1; color:#F5F5F6; font-weight:700; font-size:calc(var(--u) * 41.0/860); line-height:calc(var(--u) * 48.0/860); letter-spacing:-.03em }
/* 3697:33465 — TLAB 120.82 #2CFF05 */
.bs .bs-s3 .bs-hawd{ top:calc(var(--u) * 5895.0/860); left:calc(var(--u) * 56.0/860); width:calc(var(--u) * 490.29/860); z-index:1; color:var(--green) }
.bs .bs-s3 .bs-hawd .bs-tl{ margin-inline:0 }
.bs .bs-s3 .bs-awdlogo{ top:calc(var(--u) * 6053.0/860); left:calc(var(--u) * 67.0/860); width:calc(var(--u) * 354.297/860); z-index:1 }
/* 3697:33462 — ExtraBold 30/41.8 -0.9 흰색 */
.bs .bs-s3 .bs-awd8{ top:calc(var(--u) * 6110.221/860); left:calc(var(--u) * 65.0/860); width:calc(var(--u) * 388.0/860); z-index:1; color:#fff; font-weight:800; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 41.8/860); letter-spacing:-.03em }
.bs .bs-s3 .bs-rule3{ top:calc(var(--u) * 6155.221/860); left:calc(var(--u) * 52.0/860); width:calc(var(--u) * 444.0/860); height:calc(var(--u) * 2.0/860); z-index:1; border:0; background:#3A3A3A }
/* 3697:33461 — Bold 22/41.8 -0.66 흰색, 마지막 줄만 #777 */
.bs .bs-s3 .bs-awdlist{ top:calc(var(--u) * 6183.0/860); left:calc(var(--u) * 50.0/860); width:calc(var(--u) * 492.0/860); z-index:1; font-weight:700 }
.bs .bs-s3 .bs-awdlist .bs-more{ list-style:none; color:#777; margin-left:calc(var(--u) * 4.0/860) }
/* 3697:33492 — ExtraBold 30/41.8 -0.9 #2CFF05 */
.bs .bs-s3 .bs-awdmc{ top:calc(var(--u) * 6473.0/860); left:calc(var(--u) * 65.0/860); width:calc(var(--u) * 388.0/860); z-index:1; color:var(--green); font-weight:800; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 41.8/860); letter-spacing:-.03em }

/* ── 수강생 우수작 띠 3732:27226 — 733 짜리 판을 좌우로 이어 붙인다 ── */
.bs .bs-s3 .bs-works{ top:calc(var(--u) * 6515.0/860); left:calc(var(--u) * -675.0/860); width:calc(var(--u) * 2210.0/860); display:flex; gap:calc(var(--u) * 6.0/860) }
.bs .bs-s3 .bs-works img{ flex:none; width:calc(var(--u) * 733.0/860) }
/* 좌우로 흘러나간 칸은 피그마에서 10% 밝기로 눌려 있다 */
.bs .bs-s3 .bs-dimL{ top:calc(var(--u) * 6515.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 64.0/860); height:calc(var(--u) * 982.0/860); background:rgba(0,0,0,.9); pointer-events:none }
.bs .bs-s3 .bs-dimR{ top:calc(var(--u) * 6515.0/860); left:calc(var(--u) * 796.0/860); width:calc(var(--u) * 64.0/860); height:calc(var(--u) * 982.0/860); background:rgba(0,0,0,.9); pointer-events:none }
/* 3736:27492 — Bold 30/55.8 -0.9 #777, 가운데 구절만 흰색 */
.bs .bs-s3 .bs-grow{ top:calc(var(--u) * 7541.0/860); left:calc(var(--u) * 35.0/860); width:calc(var(--u) * 789.0/860); text-align:center; color:#777; font-weight:700; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 55.8/860); letter-spacing:-.03em }
.bs .bs-s3 .bs-grow b{ font-weight:inherit; color:#fff }

/* ── 강의 장소 ── */
.bs .bs-s3 .bs-placeh{ top:calc(var(--u) * 7730.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); letter-spacing:-.05em }
/* 3684:17786 — Medium 27/41 -1.35 #AAD8F9 */
.bs .bs-s3 .bs-addr{ top:calc(var(--u) * 7786.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); text-align:center; color:#AAD8F9; font-weight:500; font-size:calc(var(--u) * 27.0/860); line-height:calc(var(--u) * 41.0/860); letter-spacing:-.05em }
.bs .bs-s3 .bs-pl1{ top:calc(var(--u) * 7844.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 185.0/860) }
.bs .bs-s3 .bs-pl2{ top:calc(var(--u) * 7844.0/860); left:calc(var(--u) * 185.0/860); width:calc(var(--u) * 249.0/860) }
.bs .bs-s3 .bs-pl3{ top:calc(var(--u) * 7844.0/860); left:calc(var(--u) * 435.0/860); width:calc(var(--u) * 425.0/860) }

/* ── 마무리 (원점 9810) ── */
.bs .bs-s3 .bs-finlead{ top:calc(var(--u) * 37.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); letter-spacing:-.03em }
.bs .bs-s3 .bs-finpic{ top:calc(var(--u) * 198.0/860); left:calc(var(--u) * -31.0/860); width:calc(var(--u) * 903.0/860) }
.bs .bs-s3 .bs-finh{ top:calc(var(--u) * 943.0/860); left:calc(var(--u) * 13.0/860); width:calc(var(--u) * 834.0/860); letter-spacing:-.03em }
/* 3697:33230 — SemiBold 24 -1.2 흰색. trim 없는 줄상자 */
.bs .bs-s3 .bs-insta{ top:calc(var(--u) * 1046.0/860); left:calc(var(--u) * 180.0/860); width:calc(var(--u) * 499.0/860); text-align:center; color:#fff; font-weight:600; font-size:calc(var(--u) * 24.0/860); line-height:calc(var(--u) * 34.0/860); letter-spacing:-.05em }
.bs .bs-s3 .bs-insta a{ color:var(--green) }
/* ══ 상페3 끝 ══ */

/* ══ 상페1 (3684:17907) — tools/basic_s1.py 가 만든다. 손대지 말 것 ══ */
.bs .bs-s1{ height:calc(var(--u) * 8780.0/860) }

/* 3731:34265 히어로 사진 (x-8 y44 w877 → 판에 맞춰 잘림) */
.bs .bs-s1 .s1-hero{ top:calc(var(--u) * -1.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 861.0/860) }
/* 3684:17919 — SemiBold 44/55 -2.2px #CFCFCF, 「극장」만 Bold #2CFF05 */
.bs .bs-s1 .s1-copy{ top:calc(var(--u) * 92/860); left:calc(var(--u) * 120.0/860); width:calc(var(--u) * 620.0/860); text-align:center; color:#CFCFCF; font-weight:600; font-size:calc(var(--u) * 44.0/860); line-height:calc(var(--u) * 55.0/860); letter-spacing:-.05em }
.bs .bs-s1 .s1-copy b{ font-weight:700; color:var(--green) }
/* 3684:28719 FVA ACADEMY × 21STUDIOS */
.bs .bs-s1 .s1-lock{ top:calc(var(--u) * 947.239/860); left:calc(var(--u) * 173.001/860); width:calc(var(--u) * 514.999/860) }
/* 3684:17913 — TLAB 176 #2CFF05 (잉크 x78 y1094) */
.bs .bs-s1 .s1-basic{ top:calc(var(--u) * 1094/860); left:calc(var(--u) * 78.0/860); width:calc(var(--u) * 705.58/860); color:var(--green) }
/* 3684:28725 — Bold 44/60.838 -1.76px #2CFF05 */
.bs .bs-s1 .s1-sub{ top:calc(var(--u) * 1276.59/860); left:calc(var(--u) * 45.0/860); width:calc(var(--u) * 774.0/860); text-align:center; color:var(--green); font-weight:700; font-size:calc(var(--u) * 44.0/860); line-height:calc(var(--u) * 60.838/860); letter-spacing:-.04em }

/* 3730:34260 극장 몬스터 (x-6 y1374 w871) */
/* 상단 왕초보 신청 버튼 — 부제(1337) 아래·몬스터(1514) 위. 2026-08-25 추가, 아래 전부 +150 이동 */
.bs .bs-s1 .s1-topbuy{ top:calc(var(--u) * 1389.0/860); left:calc(var(--u) * 150.0/860); width:calc(var(--u) * 560.0/860);
  display:block; box-sizing:border-box; height:calc(var(--u) * 88.0/860);
  background:var(--green); color:#031000; text-align:center; text-decoration:none; font-weight:800;
  font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 88.0/860); letter-spacing:-.02em;
  border-radius:calc(var(--u) * 44.0/860);
  box-shadow:0 0 calc(var(--u) * 34.0/860) rgba(59,245,59,.45);
  transition:transform .18s ease }
.bs .bs-s1 .s1-topbuy:hover{ transform:translateY(-2px) scale(1.015) }
.bs .bs-s1 .s1-monster{ top:calc(var(--u) * 1514/860); left:calc(var(--u) * -29.0/860); width:calc(var(--u) * 895.0/860) }
/* 3684:28715 — Bold 41 -1.23px #F5F5F6 (trim 없음) */
.bs .bs-s1 .s1-oddlead{ top:calc(var(--u) * 2513/860); left:calc(var(--u) * 81.0/860); width:calc(var(--u) * 698.0/860); text-align:center; color:#F5F5F6; font-weight:700; font-size:calc(var(--u) * 41.0/860); line-height:calc(var(--u) * 50.0/860); letter-spacing:-.03em }
/* 3684:28713 — TLAB 120.82 #2CFF05 (잉크 x46 y2429) */
.bs .bs-s1 .s1-odd{ top:calc(var(--u) * 2579/860); left:calc(var(--u) * 46.0/860); width:calc(var(--u) * 773.01/860); color:var(--green) }

/* 3697:33229 블러 현장 (x-11 y2697 w883) */
.bs .bs-s1 .s1-blur{ top:calc(var(--u) * 2847/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
/* 3684:28731 — Bold 50/60 -1.5px 흰색, 첫 줄만 #2CFF05 (trim 없음) */
.bs .bs-s1 .s1-can{ top:calc(var(--u) * 3033/860); left:calc(var(--u) * 30.0/860); width:calc(var(--u) * 799.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 50.0/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.03em }
.bs .bs-s1 .s1-can b{ font-weight:inherit; color:var(--green) }
/* 3684:17916 — 40/52 -1.2px. 1줄 Medium #A0A0A0 · 2줄 ExtraBold 흰색 */
.bs .bs-s1 .s1-why{ top:calc(var(--u) * 3503/860); left:calc(var(--u) * 51.0/860); width:calc(var(--u) * 757.0/860); text-align:center; font-size:calc(var(--u) * 40.0/860); line-height:calc(var(--u) * 52.0/860); letter-spacing:-.03em }
.bs .bs-s1 .s1-why i{ font-style:normal; font-weight:500; color:#A0A0A0 }
.bs .bs-s1 .s1-why b{ font-weight:800; color:#fff }

/* 걱정 카드 3장 (3684:17962 외) — 760x302 r100, 테두리 4px.
   ⚠ get_design_context 는 테두리를 #EBEBFF 라 하지만 렌더 픽셀은 #2CFF05 다. */
/* 피그마 테두리는 outside 정렬 — 4px 밖으로 두른다 */
.bs .bs-s1 .s1-worry{ left:calc(var(--u) * 46.0/860); width:calc(var(--u) * 768.0/860); height:calc(var(--u) * 310.0/860); border:calc(var(--u) * 4.0/860) solid var(--green); border-radius:calc(var(--u) * 100.0/860); background:linear-gradient(168.287deg, #063908 6.66%, #000 41.33%, #063908 94.95%) }
.bs .bs-s1 .s1-wq{ text-align:center; color:#08FFD0; font-weight:700; font-size:calc(var(--u) * 44.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.02em }
.bs .bs-s1 .s1-wa{ text-align:center; color:#fff; font-weight:600; font-size:calc(var(--u) * 33.0/860); line-height:calc(var(--u) * 47.0/860); letter-spacing:-.02em }
.bs .bs-s1 .s1-wa b{ font-weight:inherit; color:var(--green) }
.bs .bs-s1 .s1-w1{ top:calc(var(--u) * 3629/860) }
.bs .bs-s1 .s1-wq1{ top:calc(var(--u) * 3711/860); left:calc(var(--u) * 78.0/860); width:calc(var(--u) * 703.0/860) }
.bs .bs-s1 .s1-wa1{ top:calc(var(--u) * 3782/860); left:calc(var(--u) * 134.0/860); width:calc(var(--u) * 584.0/860) }
.bs .bs-s1 .s1-w2{ top:calc(var(--u) * 3969/860) }
.bs .bs-s1 .s1-wq2{ top:calc(var(--u) * 4031/860); left:calc(var(--u) * 78.0/860); width:calc(var(--u) * 703.0/860) }
.bs .bs-s1 .s1-wa2{ top:calc(var(--u) * 4102/860); left:calc(var(--u) * 157.5/860); width:calc(var(--u) * 537.0/860) }
.bs .bs-s1 .s1-w3{ top:calc(var(--u) * 4309/860) }
.bs .bs-s1 .s1-wq3{ top:calc(var(--u) * 4371/860); left:calc(var(--u) * 78.0/860); width:calc(var(--u) * 703.0/860) }
.bs .bs-s1 .s1-wa3{ top:calc(var(--u) * 4442/860); left:calc(var(--u) * 130.0/860); width:calc(var(--u) * 584.0/860) }

/* 3684:21018 — 레이어가 Inter:Bold 50. 한글이 피그마 폴백폰트로 4.5% 크게 렌더된다(실측 52.3/-.018) */
.bs .bs-s1 .s1-nonoh{ top:calc(var(--u) * 4761/860); left:calc(var(--u) * 30.0/860); width:calc(var(--u) * 799.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 52.3/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.018em }
.bs .bs-s1 .s1-nonoh b{ font-weight:inherit; color:var(--green) }
/* 3726:33995 바깥 판 #272727 r13.51 */
.bs .bs-s1 .s1-nonobox{ top:calc(var(--u) * 4920/860); left:calc(var(--u) * 39.0/860); width:calc(var(--u) * 782.0/860); height:calc(var(--u) * 675.0/860); background:#272727; border-radius:calc(var(--u) * 13.51/860) }
/* ⚠ 판의 자식은 전부 absolute 라 ul 이 폭 0 이 된다. 그러면 그 안의 <img> 가
     max-width:100%(=0) 에 눌려 사라진다. 목록을 판 전체에 펼쳐 담는 그릇으로 만든다. */
.bs .bs-s1 .s1-nono{ list-style:none; inset:0; pointer-events:none } /* 판 전체를 덮는 투명 그릇 — 버튼 클릭을 막지 않게 */
.bs .bs-s1 .s1-nono li{ position:static }
.bs .bs-s1 .s1-nrow,.bs .s1-nico,.bs .s1-nsl,.bs .s1-ntx{ position:absolute }
.bs .bs-s1 .s1-nrow{ left:calc(var(--u) * 50.0/860); width:calc(var(--u) * 759.0/860); height:calc(var(--u) * 120.0/860); background:#121212; border-radius:calc(var(--u) * 22.5/860) }
/* 3684:28735 외 — Medium 27/40 -0.54px 흰색, 첫 줄만 ExtraBold */
.bs .bs-s1 .s1-ntx{ left:calc(var(--u) * 140.0/860); width:calc(var(--u) * 642.0/860); color:#fff; font-weight:500; font-size:calc(var(--u) * 27.0/860); line-height:calc(var(--u) * 40.0/860); letter-spacing:-.02em }
.bs .bs-s1 .s1-ntx b{ font-weight:800 }
.bs .bs-s1 .s1-nsl{ left:calc(var(--u) * 68.5/860); width:calc(var(--u) * 48.5/860); height:calc(var(--u) * 79.0/860) }
.bs .bs-s1 .s1-n1 .s1-nrow{ top:calc(var(--u) * 4933/860) }
.bs .bs-s1 .s1-n1 .s1-nsl{ top:calc(var(--u) * 4953/860) }
.bs .bs-s1 .s1-n1 .s1-ntx{ top:calc(var(--u) * 4961/860) }
.bs .bs-s1 .s1-n1 .s1-nico{ top:calc(var(--u) * 4958.78/860); left:calc(var(--u) * 73.423/860); width:calc(var(--u) * 48.577/860); height:calc(var(--u) * 68.276/860) }
.bs .bs-s1 .s1-n2 .s1-nrow{ top:calc(var(--u) * 5065/860) }
.bs .bs-s1 .s1-n2 .s1-nsl{ top:calc(var(--u) * 5085/860) }
.bs .bs-s1 .s1-n2 .s1-ntx{ top:calc(var(--u) * 5093/860) }
.bs .bs-s1 .s1-n2 .s1-nico{ top:calc(var(--u) * 5100/860); left:calc(var(--u) * 75.0/860); width:calc(var(--u) * 49.686/860); height:calc(var(--u) * 49.508/860) }
.bs .bs-s1 .s1-n3 .s1-nrow{ top:calc(var(--u) * 5197/860) }
.bs .bs-s1 .s1-n3 .s1-nsl{ top:calc(var(--u) * 5217/860) }
.bs .bs-s1 .s1-n3 .s1-ntx{ top:calc(var(--u) * 5225/860) }
.bs .bs-s1 .s1-n3 .s1-nico{ top:calc(var(--u) * 5225.72/860); left:calc(var(--u) * 75.599/860); width:calc(var(--u) * 52.402/860); height:calc(var(--u) * 56.236/860) }
.bs .bs-s1 .s1-n4 .s1-nrow{ top:calc(var(--u) * 5329/860) }
.bs .bs-s1 .s1-n4 .s1-nsl{ top:calc(var(--u) * 5349/860) }
.bs .bs-s1 .s1-n4 .s1-ntx{ top:calc(var(--u) * 5357/860) }
.bs .bs-s1 .s1-n4 .s1-nico{ top:calc(var(--u) * 5354/860); left:calc(var(--u) * 70.0/860); width:calc(var(--u) * 52.673/860); height:calc(var(--u) * 68.885/860) }
.bs .bs-s1 .s1-n5 .s1-nrow{ top:calc(var(--u) * 5461/860) }
.bs .bs-s1 .s1-n5 .s1-nsl{ top:calc(var(--u) * 5481/860) }
.bs .bs-s1 .s1-n5 .s1-ntx{ top:calc(var(--u) * 5489/860) }
.bs .bs-s1 .s1-n5 .s1-nico{ top:calc(var(--u) * 5491/860); left:calc(var(--u) * 76.0/860); width:calc(var(--u) * 42.121/860); height:calc(var(--u) * 56.326/860) }

/* 3697:33076 강사 현장 (x-37 y5601 w933) */
.bs .bs-s1 .s1-teacher{ top:calc(var(--u) * 5751/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
/* 3684:21100 — 레이어가 Inter:Bold 50. 같은 함정, 같은 실측값 */
.bs .bs-s1 .s1-one{ top:calc(var(--u) * 5972/860); left:calc(var(--u) * 136.0/860); width:calc(var(--u) * 586.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 52.3/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.018em; white-space:nowrap }
.bs .bs-s1 .s1-one b{ font-weight:inherit; color:var(--green) }
/* 3684:28723 — ExtraBold 40/54 -0.8px #CFCFCF */
.bs .bs-s1 .s1-baro{ top:calc(var(--u) * 6575/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 738.0/860); text-align:center; color:#CFCFCF; font-weight:800; font-size:calc(var(--u) * 40.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.02em }
/* 3684:21101 — ExtraBold 57/74 -2.85px, 2줄만 초록 */
.bs .bs-s1 .s1-goal{ top:calc(var(--u) * 6621/860); left:calc(var(--u) * 8.0/860); width:calc(var(--u) * 844.0/860); text-align:center; color:#fff; font-weight:800; font-size:calc(var(--u) * 57.0/860); line-height:calc(var(--u) * 74.0/860); letter-spacing:-.05em }
.bs .bs-s1 .s1-goal b{ font-weight:inherit; color:var(--green) }
/* 3684:17976 새싹 */
.bs .bs-s1 .s1-sprout{ top:calc(var(--u) * 6954/860); left:calc(var(--u) * 108.0/860); width:calc(var(--u) * 101.168/860) }
/* 3684:17975 — TLAB 110 #2CFF05 (잉크 x239 y6837) */
.bs .bs-s1 .s1-like{ top:calc(var(--u) * 6987/860); left:calc(var(--u) * 239.0/860); width:calc(var(--u) * 509.96/860); color:var(--green) }

/* 카드 6장 — 사각 #121212 테두리 1px #3A3A3A r25 */
.bs .bs-s1 .s1-cards{ list-style:none; inset:0; pointer-events:none } /* 판 전체를 덮는 투명 그릇 — 버튼 클릭을 막지 않게 */
.bs .bs-s1 .s1-cards li{ position:static }
.bs .bs-s1 .s1-cbox,.bs .s1-cico,.bs .s1-ch,.bs .s1-cd{ position:absolute }
.bs .bs-s1 .s1-cbox{ background:#121212; border:calc(var(--u) * 1.0/860) solid #3A3A3A; border-radius:calc(var(--u) * 25.0/860) }
.bs .bs-s1 .s1-ch{ color:#AAD8F9 }
/* 3684:20972 외 — SemiBold 30/44 -0.6px #ECECEC */
.bs .bs-s1 .s1-cd{ text-align:center; color:#ECECEC; font-weight:600; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 44.0/860); letter-spacing:-.02em }
.bs .bs-s1 .s1-c-plan .s1-cbox{ top:calc(var(--u) * 7163/860); left:calc(var(--u) * 51.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 415.62/860) }
.bs .bs-s1 .s1-c-plan .s1-cico{ top:calc(var(--u) * 7152/860); left:calc(var(--u) * 163.0/860); width:calc(var(--u) * 143.0/860); height:calc(var(--u) * 204.0/860) }
.bs .bs-s1 .s1-c-plan .s1-ch{ top:calc(var(--u) * 7361/860); left:calc(var(--u) * 194.0/860); width:calc(var(--u) * 89.29/860) }
.bs .bs-s1 .s1-c-plan .s1-cd{ top:calc(var(--u) * 7467.9/860); left:calc(var(--u) * 70.0/860); width:calc(var(--u) * 339.0/860) }
.bs .bs-s1 .s1-c-direct .s1-cbox{ top:calc(var(--u) * 7163/860); left:calc(var(--u) * 451.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 415.62/860) }
.bs .bs-s1 .s1-c-direct .s1-cico{ top:calc(var(--u) * 7166/860); left:calc(var(--u) * 580.0/860); width:calc(var(--u) * 118.0/860); height:calc(var(--u) * 176.0/860) }
.bs .bs-s1 .s1-c-direct .s1-ch{ top:calc(var(--u) * 7361/860); left:calc(var(--u) * 594.0/860); width:calc(var(--u) * 90.72/860) }
.bs .bs-s1 .s1-c-direct .s1-cd{ top:calc(var(--u) * 7467.94/860); left:calc(var(--u) * 468.0/860); width:calc(var(--u) * 339.0/860) }
.bs .bs-s1 .s1-c-shoot .s1-cbox{ top:calc(var(--u) * 7603.19/860); left:calc(var(--u) * 51.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 415.62/860) }
/* ⚠ 그림 아래 투명 여백이 19% 라 상자 좌표만 보면 안 된다 — 눈에 보이는 틈은 13 뿐이었다.
     기획·연출(32)에 맞춰 카메라를 7% 줄였다. 위로 올리면 윗줄 카드와 부딪힌다. (2026-08-28) */
.bs .bs-s1 .s1-c-shoot .s1-cico{ top:calc(var(--u) * 7521.04/860); left:calc(var(--u) * 204.96/860); width:calc(var(--u) * 178.25/860); height:calc(var(--u) * 305.7/860) }
.bs .bs-s1 .s1-c-shoot .s1-ch{ top:calc(var(--u) * 7800/860); left:calc(var(--u) * 106.0/860); width:calc(var(--u) * 260.82/860) }
.bs .bs-s1 .s1-c-shoot .s1-cd{ top:calc(var(--u) * 7908.13/860); left:calc(var(--u) * 77.0/860); width:calc(var(--u) * 321.0/860) }
.bs .bs-s1 .s1-c-ai .s1-cbox{ top:calc(var(--u) * 7603.19/860); left:calc(var(--u) * 451.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 415.62/860) }
/* ⚠ 여기는 아예 겹쳐 있었다(보이는 틈 -4). 12 올리고 15% 줄여 기획·연출과 같은 틈으로. */
.bs .bs-s1 .s1-c-ai .s1-cico{ top:calc(var(--u) * 7619.7/860); left:calc(var(--u) * 563.8/860); width:calc(var(--u) * 161.4/860); height:calc(var(--u) * 172.0/860) }
.bs .bs-s1 .s1-c-ai .s1-ch{ top:calc(var(--u) * 7806/860); left:calc(var(--u) * 610.0/860); width:calc(var(--u) * 53.84/860) }
.bs .bs-s1 .s1-c-ai .s1-cd{ top:calc(var(--u) * 7908.1/860); left:calc(var(--u) * 477.0/860); width:calc(var(--u) * 321.0/860) }
.bs .bs-s1 .s1-c-edit .s1-cbox{ top:calc(var(--u) * 8043/860); left:calc(var(--u) * 51.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 271.0/860) }
.bs .bs-s1 .s1-c-edit .s1-ch{ top:calc(var(--u) * 8098/860); left:calc(var(--u) * 193.0/860); width:calc(var(--u) * 89.21/860) }
.bs .bs-s1 .s1-c-edit .s1-cd{ top:calc(var(--u) * 8203.35/860); left:calc(var(--u) * 68.0/860); width:calc(var(--u) * 339.0/860) }
.bs .bs-s1 .s1-c-color .s1-cbox{ top:calc(var(--u) * 8043/860); left:calc(var(--u) * 451.0/860); width:calc(var(--u) * 372.0/860); height:calc(var(--u) * 270.0/860) }
.bs .bs-s1 .s1-c-color .s1-ch{ top:calc(var(--u) * 8097/860); left:calc(var(--u) * 567.0/860); width:calc(var(--u) * 137.42/860) }
.bs .bs-s1 .s1-c-color .s1-cd{ top:calc(var(--u) * 8201.97/860); left:calc(var(--u) * 487.0/860); width:calc(var(--u) * 301.0/860) }

/* 3684:28782 — Medium 40/52 -1.2px #ECECEC, 강조는 ExtraBold #2CFF05 */
.bs .bs-s1 .s1-both{ top:calc(var(--u) * 8444/860); left:calc(var(--u) * 51.0/860); width:calc(var(--u) * 757.0/860); text-align:center; color:#ECECEC; font-weight:500; font-size:calc(var(--u) * 40.0/860); line-height:calc(var(--u) * 52.0/860); letter-spacing:-.03em }
.bs .bs-s1 .s1-both b{ font-weight:800; color:var(--green) }
/* ══ 상페1 끝 ══ */

/* ══ 상페2 (3684:261) — tools/basic_s2.py 가 만든다. 손대지 말 것 ══ */
.bs .bs-s2{ height:calc(var(--u) * 10449.0/860) }
.bs .bs-s2 .s2-lock{ top:calc(var(--u) * 70.0/860); left:calc(var(--u) * 252.0/860); width:calc(var(--u) * 356.476/860) }
/* 3684:348 — TLAB 136 -4.08 흰색 (잉크 x76 y165) */
.bs .bs-s2 .s2-hfeat{ top:calc(var(--u) * 165.0/860); left:calc(var(--u) * 76.0/860); width:calc(var(--u) * 712.1/860); color:#fff }

/* 사진 띠 3장 — 피그마 합성 렌더에서 통째로 잘라 업스케일한 것 */
.bs .bs-s2 .s2-band1{ top:calc(var(--u) * 309.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
.bs .bs-s2 .s2-band2{ top:calc(var(--u) * 1093.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
.bs .bs-s2 .s2-band3{ top:calc(var(--u) * 1811.0/860); left:calc(var(--u) * 0.0/860); width:calc(var(--u) * 860.0/860) }
/* 3684:352 외 — TLAB 121 +2.42 #2CFF05 */
.bs .bs-s2 .s2-no{ color:var(--green) }
/* 3684:358 외 — Bold 40/54 -1.6px 흰색, 둘째 줄만 #2CFF05 */
.bs .bs-s2 .s2-ft{ color:#fff; font-weight:700; font-size:calc(var(--u) * 40.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.04em }
.bs .bs-s2 .s2-ft b{ font-weight:inherit; color:var(--green) }
/* 3684:354 외 — Regular 24/1.513 #EFEFEF, 강조만 ExtraBold */
.bs .bs-s2 .s2-fp{ color:#EFEFEF; font-weight:400; font-size:calc(var(--u) * 24.0/860); line-height:1.513 }
/* 굵은 줄만 뿌리 tracking -1.2px 로 렌더된다(잉크 실측). 나머지 줄은 -0.8px */
.bs .bs-s2 .s2-fp b{ letter-spacing:-.05em }
/* 01 은 1~4줄도 뿌리 tracking -1.2px 로 렌더된다(잉크 실측). 5줄만 -0.8px */
.bs .bs-s2 .s2-fp1a{ letter-spacing:-.05em }
.bs .bs-s2 .s2-fp b{ font-weight:800 }
.bs .bs-s2 .s2-rl{ border:0; height:calc(var(--u) * 1.0/860); background:#3A3A3A }
.bs .bs-s2 .s2-no1{ top:calc(var(--u) * 720.0/860); left:calc(var(--u) * 47.0/860); width:calc(var(--u) * 86.88/860) }
.bs .bs-s2 .s2-ft1{ top:calc(var(--u) * 723.0/860); left:calc(var(--u) * 190.0/860); width:calc(var(--u) * 648.0/860) }
.bs .bs-s2 .s2-rl1a{ top:calc(var(--u) * 840.5/860); left:calc(var(--u) * 42.64/860); width:calc(var(--u) * 125.61/860) }
.bs .bs-s2 .s2-rl1b{ top:calc(var(--u) * 840.5/860); left:calc(var(--u) * 188.32/860); width:calc(var(--u) * 628.22/860) }
.bs .bs-s2 .s2-fp1{ top:calc(var(--u) * 858.0/860); left:calc(var(--u) * 191.0/860); width:calc(var(--u) * 640.0/860); letter-spacing:-0.0333em }
.bs .bs-s2 .s2-no2{ top:calc(var(--u) * 1503.0/860); left:calc(var(--u) * 47.0/860); width:calc(var(--u) * 103.45/860) }
.bs .bs-s2 .s2-ft2{ top:calc(var(--u) * 1506.0/860); left:calc(var(--u) * 190.0/860); width:calc(var(--u) * 673.0/860) }
.bs .bs-s2 .s2-rl2a{ top:calc(var(--u) * 1623.33/860); left:calc(var(--u) * 42.64/860); width:calc(var(--u) * 125.61/860) }
.bs .bs-s2 .s2-rl2b{ top:calc(var(--u) * 1623.33/860); left:calc(var(--u) * 188.32/860); width:calc(var(--u) * 628.22/860) }
.bs .bs-s2 .s2-fp2{ top:calc(var(--u) * 1641.0/860); left:calc(var(--u) * 191.0/860); width:calc(var(--u) * 640.0/860); letter-spacing:-0.04em }
.bs .bs-s2 .s2-no3{ top:calc(var(--u) * 2228.0/860); left:calc(var(--u) * 47.0/860); width:calc(var(--u) * 103.45/860) }
.bs .bs-s2 .s2-ft3{ top:calc(var(--u) * 2230.826/860); left:calc(var(--u) * 190.0/860); width:calc(var(--u) * 631.0/860) }
.bs .bs-s2 .s2-rl3a{ top:calc(var(--u) * 2348.33/860); left:calc(var(--u) * 42.64/860); width:calc(var(--u) * 125.61/860) }
.bs .bs-s2 .s2-rl3b{ top:calc(var(--u) * 2348.33/860); left:calc(var(--u) * 188.32/860); width:calc(var(--u) * 628.22/860) }
.bs .bs-s2 .s2-fp3{ top:calc(var(--u) * 2366.0/860); left:calc(var(--u) * 191.0/860); width:calc(var(--u) * 603.0/860); letter-spacing:-0.04em }
/* 3687:28860 — SemiBold 22 -0.88 #A0A0A0 */
.bs .bs-s2 .s2-note{ top:calc(var(--u) * 2608.0/860); left:calc(var(--u) * 191.0/860); width:calc(var(--u) * 619.0/860); color:#A0A0A0; font-weight:600; font-size:calc(var(--u) * 22.0/860); line-height:1.3; letter-spacing:-.04em }

/* Monthly Themes 3697:32973 — 760x658 r100 테두리 4px.
   ⚠ get_design_context 는 테두리를 #EBEBFF 라 하지만 렌더는 #2CFF05 다. */
.bs .bs-s2 .s2-mbox{ top:calc(var(--u) * 2735.0/860); left:calc(var(--u) * 50.0/860); width:calc(var(--u) * 760.0/860); height:calc(var(--u) * 634.0/860); border:calc(var(--u) * 4.0/860) solid var(--green); border-radius:calc(var(--u) * 100.0/860); background:linear-gradient(155.689deg, #063908 6.66%, #000 41.33%, #063908 94.95%) }
.bs .bs-s2 .s2-mh{ top:calc(var(--u) * 2767.0/860); left:calc(var(--u) * 143.08/860); width:calc(var(--u) * 573.8/860); color:var(--green) }
.bs .bs-s2 .s2-mtable{ inset:0; border-collapse:collapse }
.bs .bs-s2 .s2-mtable th,.bs .bs-s2 .s2-mtable td{ position:absolute; padding:0; text-align:left; font-weight:600; color:#ECECEC; font-size:calc(var(--u) * 31.689/860); line-height:calc(var(--u) * 60.179/860); letter-spacing:-.02em; white-space:nowrap }
/* What you can Make — 6줄. 라벨(초록) · 설명(흰색). 피그마 좌표 그대로. */
.bs .bs-s2 .s2-mtable th{ color:var(--green) }
.bs .bs-s2 .s2-mk1{ top:calc(var(--u) * 2902.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv1{ top:calc(var(--u) * 2902.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mk2{ top:calc(var(--u) * 2973.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv2{ top:calc(var(--u) * 2973.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mk3{ top:calc(var(--u) * 3044.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv3{ top:calc(var(--u) * 3044.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mk4{ top:calc(var(--u) * 3115.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv4{ top:calc(var(--u) * 3115.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mk5{ top:calc(var(--u) * 3186.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv5{ top:calc(var(--u) * 3186.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mk6{ top:calc(var(--u) * 3257.0/860); left:calc(var(--u) * 217.0/860); width:calc(var(--u) * 160.0/860) }
.bs .bs-s2 .s2-mv6{ top:calc(var(--u) * 3257.0/860); left:calc(var(--u) * 388.66/860); width:calc(var(--u) * 300.0/860) }
.bs .bs-s2 .s2-mtable .bs-tl{ margin-inline:0 }

/* ── 커리큘럼 ── */
/* 3684:28824 — SemiBold 50/60 -2.5px #7B7B7B */
.bs .bs-s2 .s2-when{ top:calc(var(--u) * 3471.0/860); left:calc(var(--u) * 139.0/860); width:calc(var(--u) * 581.0/860); text-align:center; color:#7B7B7B; font-weight:600; font-size:calc(var(--u) * 50.0/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.05em }
/* 3684:410 — 아웃라인 벡터. TLAB 아님 */
.bs .bs-s2 .s2-curw{ top:calc(var(--u) * 3549.0/860); left:calc(var(--u) * 38.0/860); width:calc(var(--u) * 773.48/860) }
/* 3684:425 — SemiBold 22 -0.88, 앞 구절만 #2CFF05 */
.bs .bs-s2 .s2-game{ top:calc(var(--u) * 3689.0/860); left:calc(var(--u) * 143.0/860); width:calc(var(--u) * 718.0/860); color:#fff; font-weight:600; font-size:calc(var(--u) * 22.0/860); line-height:1.3; letter-spacing:-.04em }
.bs .bs-s2 .s2-game b{ font-weight:inherit; color:var(--green) }
/* 3684:426 표 머리 — 왼쪽 위가 파인 벡터다. 네모로 그리면 다르다 */
.bs .bs-s2 .s2-thead{ top:calc(var(--u) * 3695.303/860); left:calc(var(--u) * 38.0/860); width:calc(var(--u) * 774.04/860) }
.bs .bs-s2 .s2-th1,.bs .bs-s2 .s2-th2,.bs .bs-s2 .s2-th3{ color:#000; font-weight:600; font-size:calc(var(--u) * 27.01/860); line-height:1.2 }
.bs .bs-s2 .s2-th1{ top:calc(var(--u) * 3761.404/860); left:calc(var(--u) * 55.38/860); width:calc(var(--u) * 50.0/860) }
.bs .bs-s2 .s2-th2{ top:calc(var(--u) * 3761.404/860); left:calc(var(--u) * 373.22/860); width:calc(var(--u) * 106.0/860) }
.bs .bs-s2 .s2-th3{ top:calc(var(--u) * 3761.404/860); left:calc(var(--u) * 749.0/860); width:calc(var(--u) * 50.0/860) }
.bs .bs-s2 .s2-cur{ list-style:none; inset:0 }
.bs .bs-s2 .s2-cur li{ position:static }
.bs .bs-s2 .s2-w,.bs .bs-s2 .s2-e,.bs .bs-s2 .s2-s{ position:absolute }
.bs .bs-s2 .s2-w{ color:#fff }
.bs .bs-s2 .s2-e{ color:#fff }
/* 3684:399 외 — Medium 27 -1.62 흰색 */
.bs .bs-s2 .s2-s{ color:#fff; font-weight:500; font-size:calc(var(--u) * 27.0/860); line-height:1.2; letter-spacing:-.06em; white-space:nowrap }
.bs .bs-s2 .s2-w .bs-tl,.bs .bs-s2 .s2-e .bs-tl{ margin-inline:0 }
.bs .bs-s2 .s2-cu1 .s2-w{ top:calc(var(--u) * 3853.0/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 21.5/860) }
.bs .bs-s2 .s2-e1{ top:calc(var(--u) * 3850.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 27.49/860) }
.bs .bs-s2 .s2-s1{ top:calc(var(--u) * 3848.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-e2{ top:calc(var(--u) * 3895.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.08/860) }
.bs .bs-s2 .s2-s2{ top:calc(var(--u) * 3892.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-cu3 .s2-w{ top:calc(var(--u) * 3966.0/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 33.15/860) }
.bs .bs-s2 .s2-e3{ top:calc(var(--u) * 3966.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.59/860) }
.bs .bs-s2 .s2-s3{ top:calc(var(--u) * 3963.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-e4{ top:calc(var(--u) * 4011.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 31.78/860) }
.bs .bs-s2 .s2-s4{ top:calc(var(--u) * 4008.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-cu5 .s2-w{ top:calc(var(--u) * 4085.0/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 33.14/860) }
.bs .bs-s2 .s2-e5{ top:calc(var(--u) * 4083.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.22/860) }
.bs .bs-s2 .s2-s5{ top:calc(var(--u) * 4081.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-e6{ top:calc(var(--u) * 4128.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.59/860) }
.bs .bs-s2 .s2-s6{ top:calc(var(--u) * 4124.9/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-cu7 .s2-w{ top:calc(var(--u) * 4196.0/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 37.57/860) }
.bs .bs-s2 .s2-e7{ top:calc(var(--u) * 4199.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.05/860) }
.bs .bs-s2 .s2-s7{ top:calc(var(--u) * 4196.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-e8{ top:calc(var(--u) * 4244.0/860); left:calc(var(--u) * 761.0/860); width:calc(var(--u) * 30.59/860) }
.bs .bs-s2 .s2-s8{ top:calc(var(--u) * 4241.0/860); left:calc(var(--u) * 118.0/860); width:calc(var(--u) * 700.0/860) }
.bs .bs-s2 .s2-cend{ top:calc(var(--u) * 4315.86/860); left:calc(var(--u) * 38.0/860); width:calc(var(--u) * 774.04/860); height:calc(var(--u) * 1.0/860); border:0; background:#3A3A3A }

/* ── 추천 대상 ── */
/* 3687:28870 — Bold 50/60 -0.8px, 「라이카 시네마」만 #FF742F */
.bs .bs-s2 .s2-laika{ top:calc(var(--u) * 4419.0/860); left:calc(var(--u) * -3.0/860); width:calc(var(--u) * 799.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 50.0/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.016em }
.bs .bs-s2 .s2-laika b{ font-weight:inherit; color:#FF742F }
.bs .bs-s2 .s2-lmark{ top:calc(var(--u) * 4419.0/860); left:calc(var(--u) * 742.0/860); width:calc(var(--u) * 63.0/860); height:calc(var(--u) * 63.0/860) }
/* 3697:32975 — SemiBold 27 -1.35 흰색 */
.bs .bs-s2 .s2-screen{ top:calc(var(--u) * 4492.0/860); left:calc(var(--u) * 194.0/860); width:calc(var(--u) * 472.0/860); text-align:center; color:#fff; font-weight:600; font-size:calc(var(--u) * 27.0/860); line-height:1.3; letter-spacing:-.05em }
/* 3684:469 — 레이어가 Inter:Bold 50 이라 한글이 피그마 폴백폰트로 4.5% 크게 렌더된다.
   Pretendard 잉크를 내보낸 그림에 맞춘 실측값: 52.3px / -.018em */
.bs .bs-s2 .s2-cfeat{ top:calc(var(--u) * 4789.0/860); left:calc(var(--u) * 282.445/860); width:calc(var(--u) * 307.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 52.3/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.018em; white-space:nowrap }
/* 3684:474 — TLAB 110 #2CFF05 (잉크 x64 y4867) */
.bs .bs-s2 .s2-whoh{ top:calc(var(--u) * 4867.0/860); left:calc(var(--u) * 64.0/860); width:calc(var(--u) * 743.6/860); color:var(--green) }
.bs .bs-s2 .s2-who{ list-style:none; inset:0 }
.bs .bs-s2 .s2-who li{ position:static }
.bs .bs-s2 .s2-wc,.bs .bs-s2 .s2-wt,.bs .bs-s2 .s2-wd{ position:absolute }
/* 3684:452 외 — Bold 44 -1.32 흰색 / 3684:460 외 — Bold 22/32 흰색 */
.bs .bs-s2 .s2-wt{ color:#fff; font-weight:700; font-size:calc(var(--u) * 44.0/860); line-height:1.2; letter-spacing:-.03em }
.bs .bs-s2 .s2-wd{ color:#fff; font-weight:700; font-size:calc(var(--u) * 22.0/860); line-height:calc(var(--u) * 32.0/860) }
.bs .bs-s2 .s2-wi1 .s2-wc{ top:calc(var(--u) * 5025.0/860); left:calc(var(--u) * 39.0/860); width:calc(var(--u) * 214.0/860) }
.bs .bs-s2 .s2-wi1 .s2-wt{ top:calc(var(--u) * 5108.0/860); left:calc(var(--u) * 264.0/860); width:calc(var(--u) * 410.0/860); text-align:left }
.bs .bs-s2 .s2-wi1 .s2-wd{ top:calc(var(--u) * 5227.0/860); left:calc(var(--u) * 277.0/860); width:calc(var(--u) * 547.0/860); text-align:left }
.bs .bs-s2 .s2-wi2 .s2-wc{ top:calc(var(--u) * 5322.0/860); left:calc(var(--u) * 579.0/860); width:calc(var(--u) * 266.0/860) }
.bs .bs-s2 .s2-wi2 .s2-wt{ top:calc(var(--u) * 5399.0/860); left:calc(var(--u) * 42.0/860); width:calc(var(--u) * 552.0/860); text-align:right }
.bs .bs-s2 .s2-wi2 .s2-wd{ top:calc(var(--u) * 5514.0/860); left:calc(var(--u) * 36.0/860); width:calc(var(--u) * 547.0/860); text-align:right }
.bs .bs-s2 .s2-wi3 .s2-wc{ top:calc(var(--u) * 5673.0/860); left:calc(var(--u) * 30.0/860); width:calc(var(--u) * 230.0/860) }
.bs .bs-s2 .s2-wi3 .s2-wt{ top:calc(var(--u) * 5723.0/860); left:calc(var(--u) * 262.0/860); width:calc(var(--u) * 412.0/860); text-align:left }
.bs .bs-s2 .s2-wi3 .s2-wd{ top:calc(var(--u) * 5842.0/860); left:calc(var(--u) * 257.0/860); width:calc(var(--u) * 481.0/860); text-align:left }
.bs .bs-s2 .s2-wi4 .s2-wc{ top:calc(var(--u) * 5919.0/860); left:calc(var(--u) * 513.0/860); width:calc(var(--u) * 345.0/860) }
.bs .bs-s2 .s2-wi4 .s2-wt{ top:calc(var(--u) * 6059.0/860); left:calc(var(--u) * 40.0/860); width:calc(var(--u) * 540.0/860); text-align:right }
.bs .bs-s2 .s2-wi4 .s2-wd{ top:calc(var(--u) * 6178.0/860); left:calc(var(--u) * 62.0/860); width:calc(var(--u) * 547.0/860); text-align:right }
.bs .bs-s2 .s2-wi5 .s2-wc{ top:calc(var(--u) * 6264.0/860); left:calc(var(--u) * 15.0/860); width:calc(var(--u) * 253.0/860) }
.bs .bs-s2 .s2-wi5 .s2-wt{ top:calc(var(--u) * 6329.0/860); left:calc(var(--u) * 255.0/860); width:calc(var(--u) * 438.0/860); text-align:left }
.bs .bs-s2 .s2-wi5 .s2-wd{ top:calc(var(--u) * 6453.0/860); left:calc(var(--u) * 275.0/860); width:calc(var(--u) * 547.0/860); text-align:left }
.bs .bs-s2 .s2-wi6 .s2-wc{ top:calc(var(--u) * 6585.0/860); left:calc(var(--u) * 558.0/860); width:calc(var(--u) * 285.0/860) }
.bs .bs-s2 .s2-wi6 .s2-wt{ top:calc(var(--u) * 6680.173/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 507.0/860); text-align:right }
.bs .bs-s2 .s2-wi6 .s2-wd{ top:calc(var(--u) * 6799.0/860); left:calc(var(--u) * 17.0/860); width:calc(var(--u) * 586.0/860); text-align:right }

/* 3726:34210 단체사진 — 글이 사진 위에 얹힌다 */
.bs .bs-s2 .s2-crowd{ top:calc(var(--u) * 7008.544/860); left:calc(var(--u) * 42.0/860); width:calc(var(--u) * 775.0/860); border-radius:calc(var(--u) * 16.0/860) }
/* 3687:28880 — 3684:28723 과 같은 층위 */
.bs .bs-s2 .s2-crowd1{ top:calc(var(--u) * 7137.0/860); left:calc(var(--u) * 61.0/860); width:calc(var(--u) * 738.0/860); text-align:center; color:#CFCFCF; font-weight:800; font-size:calc(var(--u) * 40.0/860); line-height:calc(var(--u) * 54.0/860); letter-spacing:-.02em }
/* 3687:28879 — ExtraBold 50/60 -1.5px 흰색, 앞 구절만 #2CFF05 */
.bs .bs-s2 .s2-crowd2{ top:calc(var(--u) * 7181.0/860); left:calc(var(--u) * 8.0/860); width:calc(var(--u) * 844.0/860); text-align:center; color:#fff; font-weight:800; font-size:calc(var(--u) * 50.0/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.03em }
.bs .bs-s2 .s2-crowd2 b{ font-weight:inherit; color:var(--green) }
/* 3697:33007 — 레이어가 Inter:Bold 50. 3684:469 와 같은 함정, 같은 실측값 */
.bs .bs-s2 .s2-perk1{ top:calc(var(--u) * 7689.0/860); left:calc(var(--u) * 193.0/860); width:calc(var(--u) * 473.0/860); text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 52.3/860); line-height:calc(var(--u) * 60.0/860); letter-spacing:-.018em; white-space:nowrap }
/* 3697:33008 — TLAB 110 #2CFF05 (잉크 x125 y7765) */
.bs .bs-s2 .s2-perkh{ top:calc(var(--u) * 7765.0/860); left:calc(var(--u) * 125.0/860); width:calc(var(--u) * 612.15/860); color:var(--green) }

/* ── 혜택 캡슐 ── */
/* 3697:33233 주황 · 3697:33342 초록 — 760 폭 r100 테두리 4px */
.bs .bs-s2 .s2-cap{ border-radius:calc(var(--u) * 100.0/860); border:calc(var(--u) * 4.0/860) solid }
.bs .bs-s2 .s2-capO{ top:calc(var(--u) * 7937.0/860); left:calc(var(--u) * 50.0/860); width:calc(var(--u) * 760.0/860); height:calc(var(--u) * 849.0/860); border-color:#FF742F; background:linear-gradient(149.76deg, #431600 6.66%, #000 41.33%, #431600 94.95%) }
.bs .bs-s2 .s2-capG{ top:calc(var(--u) * 8848.0/860); left:calc(var(--u) * 53.0/860); width:calc(var(--u) * 760.0/860); height:calc(var(--u) * 1376.0/860); border-color:var(--green); background:linear-gradient(136.63deg, #063908 6.66%, #000 41.33%, #063908 94.95%) }
/* 3697:33237 라이카 워드마크 */
.bs .bs-s2 .s2-capOlock{ top:calc(var(--u) * 8050.0/860); left:calc(var(--u) * 220.0/860); width:calc(var(--u) * 421.302/860) }
.bs .bs-s2 .s2-capOlogo{ top:calc(var(--u) * 8195.0/860); left:calc(var(--u) * 257.0/860); width:calc(var(--u) * 333.0/860) }
/* 3697:33236 — SemiBold 30/44 -0.3 #CDFF0C */
.bs .bs-s2 .s2-capOsub{ top:calc(var(--u) * 8356.0/860); left:calc(var(--u) * 92.0/860); width:calc(var(--u) * 677.0/860); text-align:center; color:#CDFF0C; font-weight:600; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 44.0/860); letter-spacing:-.01em }
.bs .bs-s2 .s2-capOa{ top:calc(var(--u) * 8437.0/860); left:calc(var(--u) * 124.0/860); width:calc(var(--u) * 615.48/860); color:#FF742F }
.bs .bs-s2 .s2-capOb{ top:calc(var(--u) * 8578.0/860); left:calc(var(--u) * 124.0/860); width:calc(var(--u) * 615.87/860); color:#FF742F }
/* 3697:33344 — 33236 과 같은 층위, 흰색 */
.bs .bs-s2 .s2-capGsub{ top:calc(var(--u) * 8950.0/860); left:calc(var(--u) * 95.0/860); width:calc(var(--u) * 677.0/860); text-align:center; color:#CDFF0C; font-weight:600; font-size:calc(var(--u) * 30.0/860); line-height:calc(var(--u) * 44.0/860); letter-spacing:-.01em }
.bs .bs-s2 .s2-capGlock{ top:calc(var(--u) * 9029.297/860); left:calc(var(--u) * 128.0/860); width:calc(var(--u) * 369.274/860) }
/* 3697:33420 — ExtraBold 43.825/38.566 -0.4383 흰색 */
.bs .bs-s2 .s2-capGmaster{ top:calc(var(--u) * 9028.178/860); left:calc(var(--u) * 511.568/860); width:calc(var(--u) * 236.432/860); text-align:center; color:#fff; font-weight:800; font-size:calc(var(--u) * 43.825/860); line-height:calc(var(--u) * 38.566/860); letter-spacing:-.01em }
/* 단어 시작점을 잉크 실측(120·275·346)에 둔다. SVG 비율은 피그마와 같다 */
.bs .bs-s2 .s2-capGa{ top:calc(var(--u) * 9088.0/860); left:calc(var(--u) * 120.2/860); width:calc(var(--u) * 627.0/860); display:flex; align-items:flex-end; justify-content:flex-start; color:var(--green) }
.bs .bs-s2 .s2-capGa .bs-tl{ margin-inline:0 }
.bs .bs-s2 .s2-ws2{ margin-left:calc(var(--u) * 4.4/860) }
.bs .bs-s2 .s2-ws3{ margin-left:calc(var(--u) * 4.2/860) }
.bs .bs-s2 .s2-ws1 .bs-tl{ width:calc(var(--u) * 150.31/860) }
.bs .bs-s2 .s2-ws2 .bs-tl{ width:calc(var(--u) * 70.76/860) }
.bs .bs-s2 .s2-ws3 .bs-tl{ width:calc(var(--u) * 403.73/860) }
/* 잉크 실측: x=125 에서 피그마와 일치. 폭도 그대로 일치 */
.bs .bs-s2 .s2-capGb{ top:calc(var(--u) * 9242.3/860); left:calc(var(--u) * 125.0/860); width:calc(var(--u) * 618.15/860); color:var(--green) }
.bs .bs-s2 .s2-capGpic1{ top:calc(var(--u) * 9382.0/860); left:calc(var(--u) * 116.691/860); width:calc(var(--u) * 632.616/860); border-radius:calc(var(--u) * 20.0/860) }
.bs .bs-s2 .s2-capGpic2{ top:calc(var(--u) * 9757.266/860); left:calc(var(--u) * 116.691/860); width:calc(var(--u) * 632.616/860); border-radius:calc(var(--u) * 20.0/860) }
/* 3736:27536 · 3697:33432 — Bold 24 -0.72 흰색 */
.bs .bs-s2 .s2-capGcap1,.bs .bs-s2 .s2-capGcap2{ text-align:center; color:#fff; font-weight:700; font-size:calc(var(--u) * 24.0/860); line-height:1.2; letter-spacing:-.03em }
/* 3736:27536 — 글 + SLR 렌트 로고(3736:27512). 로고는 따로 앉힌다 */
.bs .bs-s2 .s2-capGcap1{ top:calc(var(--u) * 9687.0/860); left:calc(var(--u) * 262.0/860); width:calc(var(--u) * 206.0/860); text-align:left; white-space:nowrap }
.bs .bs-s2 .s2-slrlogo{ top:calc(var(--u) * 9677.08/860); left:calc(var(--u) * 474.93/860); width:calc(var(--u) * 129.483/860); height:calc(var(--u) * 33.844/860) }
.bs .bs-s2 .s2-capGcap2{ top:calc(var(--u) * 10065.0/860); left:calc(var(--u) * 334.0/860); width:calc(var(--u) * 191.0/860) }
/* ══ 상페2 끝 ══ */

/* ══ 상단 모집 블록 — offline.css(마스터)와 같은 크기·구조 이식 (2026-08-25) ══ */
.bs-notice{
  --u:var(--pagew);
  --w:clamp(320px, calc(var(--u) * 1180/1920), 1180px);
  --alert:#E01B00; --alert-ink:#FFF;
  padding:clamp(52px, calc(var(--u) * 118/1920), 118px) 0 clamp(24px, calc(var(--u) * 56/1920), 56px);
  text-align:center;
}
.bs-notice .nt-urgent[hidden]{ display:none }
.bs-notice .nt-urgent{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px, calc(var(--u) * 26/1920), 26px);
  width:var(--w); max-width:calc(100% - 24px);
  margin:0 auto clamp(24px, calc(var(--u) * 44/1920), 44px);
  padding:clamp(12px, calc(var(--u) * 20/1920), 20px) clamp(20px, calc(var(--u) * 40/1920), 40px);
  background:var(--alert); color:var(--alert-ink);
  border-radius:clamp(12px, calc(var(--u) * 20/1920), 20px);
  box-shadow:0 10px 34px rgba(224,27,0,.30);
}
.bs-notice .nt-urgent picture{ display:contents }
.bs-notice .nt-urgent .face{
  height:clamp(96px, calc(var(--u) * 210/1920), 210px); width:auto; flex:none;
  margin-top:calc(-1 * clamp(46px, calc(var(--u) * 104/1920), 104px));
  margin-bottom:calc(-1 * clamp(11px, calc(var(--u) * 19/1920), 19px));
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
.bs-notice .nt-urgent .say{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(8px, calc(var(--u) * 16/1920), 16px);
  padding-bottom:clamp(2px, calc(var(--u) * 6/1920), 6px);
}
.bs-notice .nt-urgent .flare{
  font-size:clamp(12px, calc(var(--u) * 21/1920), 21px); font-weight:800; letter-spacing:.02em;
  padding:clamp(3px,calc(var(--u)*6/1920),6px) clamp(9px,calc(var(--u)*15/1920),15px);
  border-radius:999px; background:var(--alert-ink); color:var(--alert); white-space:nowrap;
  animation:nt-blink 1.5s ease-in-out infinite;
}
.bs-notice .nt-urgent strong{
  font-size:clamp(16px, calc(var(--u) * 34/1920), 34px); font-weight:800;
  letter-spacing:-.035em; line-height:1.24; word-break:keep-all; text-wrap:balance;
}
.bs-notice .nt-urgent strong b{ font-weight:800; color:var(--green) }
.bs-notice .nt-urgent .dday{
  font-size:clamp(12.5px, calc(var(--u) * 22/1920), 22px); font-weight:800;
  letter-spacing:-.02em; white-space:nowrap;
  padding:clamp(4px,calc(var(--u)*7/1920),7px) clamp(11px,calc(var(--u)*17/1920),17px);
  border-radius:999px; background:rgba(0,0,0,.26); font-variant-numeric:tabular-nums;
}
@keyframes nt-blink{ 0%,100%{opacity:1} 50%{opacity:.4} }
@media (prefers-reduced-motion: reduce){ .bs-notice .nt-urgent .flare{ animation:none } }

/* 시간표 */
.bs-notice .nt-open{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, calc(var(--u) * 24/1920), 24px);
}
.bs-notice .nt-open .head{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(10px, calc(var(--u) * 22/1920), 22px); flex-wrap:wrap;
}
.bs-notice .nt-open .head strong{
  font-size:clamp(28px, calc(var(--u) * 76/1920), 76px);
  font-weight:800; letter-spacing:-.05em; line-height:1; color:var(--green);
}
.bs-notice .nt-open .head span{
  font-size:clamp(13px, calc(var(--u) * 26/1920), 26px);
  font-weight:700; color:#fff; letter-spacing:-.028em; word-break:keep-all; text-wrap:balance;
}
/* ⚠ 마스터(합정 현영빌딩)와 베이직(연희동 스페이스독)은 **장소가 다르다.**
     헷갈려 엉뚱한 곳으로 가는 일이 없게, 동네 이름을 앞에 붙이고 눈에 띄게 둔다. */
.bs-notice .loc{
  display:flex; flex-direction:column; align-items:center; gap:.28em;
  margin:clamp(14px, calc(var(--u) * 26/1920), 26px) auto
         clamp(18px, calc(var(--u) * 34/1920), 34px);
  width:var(--w); max-width:calc(100% - 24px);
  padding:clamp(10px, calc(var(--u) * 16/1920), 16px) clamp(12px, calc(var(--u) * 22/1920), 22px);
  border:1px solid rgba(44,255,5,.34); border-radius:14px;
  background:rgba(44,255,5,.055); text-align:center;
}
.bs-notice .loc b{
  font-size:clamp(15px, calc(var(--u) * 30/1920), 30px); font-weight:800;
  letter-spacing:-.035em; color:var(--green); word-break:keep-all;
}
.bs-notice .loc span{
  font-size:clamp(12.5px, calc(var(--u) * 23/1920), 23px); font-weight:600;
  letter-spacing:-.02em; color:#D8D8DA; word-break:keep-all;
}
.bs-notice .nt-table{
  width:var(--w); max-width:calc(100% - 24px);
  border-top:3px solid #fff; border-bottom:3px solid #fff;
}
/* ⚠ 개강일이 상담으로 가장 많이 물어보는 항목이다. 시간보다 눈에 먼저 들어와야 한다.
     전에는 「반이름 · 시간 · 개강일」을 한 줄에 뒀는데, 폭이 좁아지면 개강일이 오른쪽 끝으로
     밀려 작게 붙었다(두 페이지가 서로 다르게 접히기까지 했다).
     이제 **개강일을 반 이름 바로 아래**에 두 줄로 고정한다. 시간은 오른쪽에 세로 가운데. */
.bs-notice .nt-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"cls time" "start time";
  align-items:center;
  /* ⚠ 이 블록은 부모가 가운데 정렬이다. 칸이 넓어지면 반 이름·개강일이 칸 한가운데로
       밀려 서로 어긋나 보인다(데스크탑에서 실측). 왼쪽에 못 박는다. */
  justify-items:start; text-align:left;
  column-gap:clamp(10px, calc(var(--u) * 30/1920), 30px);
  row-gap:clamp(3px, calc(var(--u) * 7/1920), 7px);
  padding:clamp(13px, calc(var(--u) * 24/1920), 24px) clamp(12px, calc(var(--u) * 26/1920), 26px);
}
.bs-notice .nt-row + .nt-row{ border-top:1px solid rgba(253,253,253,.3) }
.bs-notice .nt-row .cls{
  font-size:clamp(16px, calc(var(--u) * 40/1920), 40px); font-weight:800;
  letter-spacing:-.045em; color:#fff; white-space:nowrap;
  grid-area:cls;
}
.bs-notice .nt-row .time{
  justify-self:end;
  font-size:clamp(16px, calc(var(--u) * 40/1920), 40px); font-weight:800;
  letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap;
  grid-area:time; text-align:right;
}
.bs-notice .nt-row .start{
  grid-area:start;
  font-size:clamp(14px, calc(var(--u) * 29/1920), 29px); font-weight:800;
  color:var(--green); white-space:nowrap; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:.5em;
}
/* 반마다 남은 날. 스크립트가 넣는다 — 없으면 그냥 안 보인다. */
.bs-notice .nt-row .start .dday{
  font-size:.82em; font-weight:900; letter-spacing:-.02em;
  background:var(--green); color:#06150A; border-radius:999px;
  padding:.18em .62em; white-space:nowrap;
}
.bs-notice .nt-row .start .dday.soon{ background:#FF375F; color:#fff }
/* 신청 방법 */
.bs-notice .nt-how{
  margin-top:clamp(24px, calc(var(--u) * 48/1920), 48px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(9px, calc(var(--u) * 15/1920), 15px);
}
.bs-notice .nt-how div{
  width:var(--w); max-width:calc(100% - 24px);
  background:var(--green); color:#06150A;
  border-radius:clamp(9px, calc(var(--u) * 16/1920), 16px);
  padding:clamp(13px, calc(var(--u) * 20/1920), 20px) clamp(15px, calc(var(--u) * 26/1920), 26px);
  font-size:clamp(13px, calc(var(--u) * 22/1920), 22px);
  font-weight:600; line-height:1.55; letter-spacing:-.028em; text-align:left;
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(9px, calc(var(--u) * 16/1920), 16px); align-items:start;
}
.bs-notice .nt-how div b{
  font-weight:800; white-space:nowrap; padding:2px 9px; border-radius:6px;
  background:rgba(6,21,10,.15); align-self:start;
}
.bs-notice .nt-how div span{ word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty }
/* 버튼 */
.bs-notice .nt-btns{
  margin-top:clamp(26px, calc(var(--u) * 52/1920), 52px);
  display:flex; justify-content:center; gap:clamp(10px, calc(var(--u) * 18/1920), 18px); flex-wrap:wrap;
}
.bs-notice .nt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-width:clamp(160px, calc(var(--u) * 290/1920), 290px);
  min-height:clamp(52px, calc(var(--u) * 74/1920), 74px);
  padding:clamp(13px, calc(var(--u) * 24/1920), 24px) clamp(20px, calc(var(--u) * 36/1920), 36px);
  border-radius:999px; text-decoration:none;
  font-size:clamp(15px, calc(var(--u) * 26/1920), 26px);
  font-weight:800; letter-spacing:-.028em; line-height:1;
  transition:filter .15s, transform .12s, background .15s, color .15s, box-shadow .15s;
}
.bs-notice .nt-btn.solid{ background:var(--green); color:#06150A; box-shadow:0 6px 20px rgba(122,255,102,.28) }
.bs-notice .nt-btn.ghost{ background:rgba(253,253,253,.10); color:#fff; box-shadow:inset 0 0 0 2px #fff }
.bs-notice .nt-btn:hover{ filter:brightness(1.07); transform:translateY(-2px) }
.bs-notice .nt-btn.solid:hover{ box-shadow:0 10px 26px rgba(122,255,102,.4) }
.bs-notice .nt-btn.ghost:hover{ background:#fff; color:#06150A; box-shadow:none; filter:none }
.bs-notice .nt-btn:active{ transform:translateY(0) scale(.985) }
.bs-notice .nt-btn:focus-visible{ outline:3px solid var(--green); outline-offset:3px }
.bs-notice .nt-btn span{ transition:transform .15s }
.bs-notice .nt-btn:hover span{ transform:translateX(3px) }

/* 좁은 화면 — 마스터와 동일한 축소 */
@media (max-width:680px){
  .bs-notice .nt-urgent{
    flex-direction:column; align-items:center;
    padding:0 14px 13px; gap:6px; margin-bottom:18px; border-radius:16px;
  }
  .bs-notice .nt-urgent .face{ height:118px; margin-top:-58px; margin-bottom:-2px; align-self:center }
  .bs-notice .nt-urgent .say{ gap:5px; padding-bottom:0 }
  .bs-notice .nt-urgent strong{ font-size:16.5px; width:100% }
  .bs-notice .nt-urgent .flare{ font-size:11.5px }
  .bs-notice .nt-urgent .dday{ font-size:12px }
  .bs-notice .nt-btns{ padding:0 12px; gap:8px }
  .bs-notice .nt-btn{ flex:1; min-width:0; padding:13px 10px; font-size:14px }
  .bs-notice .nt-open .head{ gap:6px }
  .bs-notice .nt-open .head span{ font-size:14px }
}