/* ═══════════════════════════════════════════════════════════
   커리큘럼 — 피그마 3402:222684 "커리큘럼 - 데스크탑"
   본문 프레임 3402:213461 (1920 × 5412) 기준.

   좌표는 전부 프레임 기준 절대값이고, 섹션마다 로컬 원점으로
   옮겨 % 로 넣는다. 글자 크기만 calc(var(--u) * N/1920) 로 환산.
   → 어느 폭에서도 시안 비율이 그대로 유지된다.

   높이는 고정하지 않는다(텍스트 블록은 top/left/width 만 잡는다).
   글자가 길어지면 아래로 흐를 뿐 옆 글자를 침범하지 않는다.

   섹션 구간 (프레임 y)
     S1 hero    0–1810   S2 feature 1810–2600   S3 ai 2600–3350
     S4 table   3350–4150  S5 cta   4150–4990
   ═══════════════════════════════════════════════════════════ */

.cur-sec{
  --u:var(--pagew);
  position:relative;
  width:100%;
  margin-inline:auto;
  max-width:var(--max);
}
.cur-sec > *,
.cur-sec > .cf-block > *,
.cur-sec > .ai-figure > *,
.cur-sec > .pf-panel > *{position:absolute}
/* 데스크탑에서 .cf-block 은 레이아웃에 없는 것처럼 사라진다.
   자식들은 그대로 .cur-sec 기준 절대배치로 남고, 모바일에서만 grid 로 쓴다. */
.cf-block,
.ai-figure,
.pf-panel{display:contents}
/* 폭은 반드시 요소 자신의 클래스가 정한다.
   `.cur-sec img{width:100%}` 로 뭉뚱그리면 특정도(0,1,1)가 이겨서
   직계 자식 이미지의 폭 지정을 덮어버린다 — 캐릭터가 2배로 커졌던 원인. */
.cur-sec img{max-width:none;height:auto}
/* 폭 100% 는 제목/문단이 감싼 이미지에만 준다.
   `> * > img` 처럼 넓게 잡으면 자기 클래스로 폭을 정한 사진까지 삼킨다. */
.cur-sec :is(h1,h2,h3,p,b) > img{width:100%}

.cur-hero   {aspect-ratio:1920/1810}
.cur-feature{aspect-ratio:1920/900}
.cur-ai     {aspect-ratio:1920/860}
.cur-table  {aspect-ratio:1920/800}
.cur-cta    {aspect-ratio:1920/840}

/* ── S1 : 골라듣는 수강권 ─────────────────────────────────── */

/* 젓가락 + 「골라듣는 수강권」 (3402:222689) x428.4 y80.3 1111.78×447.33 */
.ch-title{left:22.3125%;top:4.4365%;width:57.9052%}

/* 초록 젤리 3형제 (3402:222752) x371.6 y651.1 829.6×733.6
   피그마 export 는 알파가 평평해져 검정이 구워져 나온다.
   이 섹션 배경이 순검정(#000)이라 그대로 얹어도 티가 나지 않는다. */
.ch-cluster{left:19.3542%;top:35.9724%;width:43.2083%}

/* 3개월권 혜택 (3402:222717) */
.ch-ben-h{left:70.9568%;top:42.3757%;width:10.5927%;color:var(--green)}
.ch-pill{
  left:67.5021%;width:16.7887%;
  height:calc(var(--u) * 92.719/1920);
  border-radius:999px;
  background:var(--green);
  border:calc(var(--u) * 1.352/1920) solid var(--green);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#000;font-weight:700;letter-spacing:0;
  font-size:calc(var(--u) * 32.448/1920);
  line-height:calc(var(--u) * 36.504/1920);
  /* 시안의 blur 15 + plus-lighter 발광을 그림자로 근사 */
  box-shadow:0 0 calc(var(--u) * 34/1920) rgba(44,255,5,.55),
             0 0 calc(var(--u) * 90/1920) rgba(44,255,5,.22);
}
.ch-pill.p1{top:47.2088%}
.ch-pill.p2{top:54.4547%}
.ch-pill.p3{top:61.7000%}

/* 긴 ──────── 커리큘럼이 부담스러우셨다면? */
.ch-lead{
  color:#F5F5F6;font-weight:700;letter-spacing:0;
  font-size:calc(var(--u) * 52.701/1920);
  line-height:1;white-space:nowrap;
}
.ch-lead.l1{left:17.0313%;top:81.1602%}
.ch-lead.l2{left:50.5729%;top:81.1602%}
.ch-rule{
  left:20.2604%;top:82.4309%;width:29.0625%;
  height:calc(var(--u) * 4/1920);background:#F5F5F6;
}

/* 원하는 파트만 수강하세요! (3402:222704) x322.6 y1559.1 1276.7×179.33 */
.ch-pick{left:16.8021%;top:86.1381%;width:66.4948%}

/* ── S2 : CLASS FEATURE ──────────────────────────────────── */

.cf-eyebrow{left:44.0885%;top:calc(var(--u) * 44.7/1920);width:11.7842%;color:#fff}
.cf-title  {left:31.3047%;top:calc(var(--u) * 94/1920);width:37.3906%;color:#fff}

.cf-1a{left:4.1146%;top:calc(var(--u) * 267/1920);width:13.5156%}
.cf-1b{left:18.3333%;top:calc(var(--u) * 267/1920);width:13.5938%}
.cf-2 {left:34.3750%;top:calc(var(--u) * 269/1920);width:29.7656%}
.cf-3 {left:65.6250%;top:calc(var(--u) * 260/1920);width:30.6250%}

.cf-num{top:calc(var(--u) * 522/1920)}
.cf-num.n1{left:5.0000%;width:3.0990%;color:#8C8C8C}
.cf-num.n2{left:36.3542%;width:3.6042%;color:#FF3D00}
.cf-num.n3{left:67.8646%;top:calc(var(--u) * 521/1920);width:3.6042%;color:var(--green)}

.cf-h3{
  color:#fff;font-weight:800;letter-spacing:-.02em;
  font-size:calc(var(--u) * 28.735/1920);
  line-height:calc(var(--u) * 34/1920);
}
.cf-h3.c1{left:9.8438%;top:calc(var(--u) * 526/1920);width:19.7396%}
.cf-h3.c2{left:41.1979%;top:calc(var(--u) * 526/1920);width:21.8229%}
.cf-h3.c3{left:72.7604%;top:calc(var(--u) * 526/1920);width:20.4167%}

.cf-line{
  top:calc(var(--u) * 603/1920);width:21.3542%;
  height:calc(var(--u) * 1/1920);background:#242424;
}
.cf-line.c1{left:9.7917%}
.cf-line.c2{left:41.1458%}
.cf-line.c3{left:72.7083%}

.cf-weeks{
  color:#fff;font-weight:700;white-space:nowrap;
  font-size:calc(var(--u) * 18.2/1920);line-height:1.3;
}
.cf-weeks.c1{left:5.0521%;top:calc(var(--u) * 624/1920)}
.cf-weeks.c2{left:36.4063%;top:calc(var(--u) * 625/1920)}
.cf-weeks.c3{left:67.9688%;top:calc(var(--u) * 624/1920)}

.cf-body{
  color:#fff;font-weight:600;letter-spacing:-.01em;
  font-size:calc(var(--u) * 17.4/1920);
  line-height:calc(var(--u) * 31.7/1920);
}
.cf-body.c1{left:9.8438%;top:calc(var(--u) * 625/1920);width:20.6771%}
.cf-body.c2{left:41.1979%;top:calc(var(--u) * 625/1920);width:20.5208%}
.cf-body.c3{left:72.7604%;top:calc(var(--u) * 625/1920);width:20.5208%}
.cf-body .hl-orange{color:#FF3D00;font-weight:700}
.cf-body .hl-green {color:var(--green);font-weight:700}

/* ── S3 : AI 실습 스트립 + 특강 ──────────────────────────── */

/* 스트립 (3402:231237) x2.6 y2636.5 1914.8×414.9 — 사진 콜라주 */
.ai-strip{left:.1354%;top:calc(var(--u) * 36.5/1920);width:99.7292%}

/* 민트 캡션 바는 CSS 로 다시 그린다.
   이미지에 구워진 바 위에 정확히 덮어씌워 글자를 또렷하게 만든다. */
.ai-bar{
  background:#08FFD0;color:#000;
  display:flex;align-items:center;
  font-weight:600;letter-spacing:.02em;white-space:nowrap;
  font-size:calc(var(--u) * 22.627/1920);
}
.ai-bar.b1{
  left:.1354%;top:calc(var(--u) * 202.8/1920);width:56.5104%;
  height:calc(var(--u) * 38.6/1920);
  justify-content:center;
}
.ai-bar.b2,
.ai-bar.b3{
  top:calc(var(--u) * 413.6/1920);
  height:calc(var(--u) * 37.8/1920);
  justify-content:center;
}
.ai-bar.b2{left:.1354%;width:56.5104%}    /* 프레임 2.6~1087.6 */
.ai-bar.b3{left:56.6458%;width:43.2188%}  /* 프레임 1087.6~1917.4 */
.ai-strip.m{display:none}

.ai-badge{left:34.1146%;top:calc(var(--u) * 522/1920);width:4.4219%;color:#08FFD0}
.ai-h2{
  left:39.8438%;top:calc(var(--u) * 517.3/1920);width:26.1146%;
  color:#fff;font-weight:800;letter-spacing:-.03em;
  font-size:calc(var(--u) * 33.275/1920);
  line-height:calc(var(--u) * 40.1/1920);
}
.ai-line{
  left:39.8438%;top:calc(var(--u) * 601/1920);width:22.2396%;
  height:calc(var(--u) * 2/1920);background:#171717;
}
.ai-body{
  left:39.8802%;top:calc(var(--u) * 616.3/1920);width:25.2500%;
  color:#fff;font-weight:600;letter-spacing:-.01em;
  font-size:calc(var(--u) * 19.8/1920);
  line-height:calc(var(--u) * 33.8/1920);
}
.ai-body .hl{color:#08FFD0;font-weight:700}

/* ── S4 : FVA CURRICULUM 표 ──────────────────────────────── */

.ct-title{left:30.9844%;top:7.9500%;width:38.6055%;color:#fff}
.ct-note{
  left:47.2917%;top:24.7500%;width:23.6979%;
  color:#fff;font-weight:500;line-height:1.3;
  font-size:calc(var(--u) * 15.1/1920);
}

.ct-col{width:30.9375%;top:0;height:100%}
.ct-col.k1{left:2.5521%}
.ct-col.k2{left:34.5313%}
.ct-col.k3{left:66.5104%}
.ct-col > *{position:absolute}

/* 폴더 탭 모양 헤더 (3402:231159) 594.221×87.34, 흰색 */
.ct-tab{left:0;top:36.5000%;width:100.0372%}
.ct-hdr{
  top:42.7500%;color:#000;font-weight:700;line-height:1;white-space:nowrap;
  font-size:calc(var(--u) * 20.728/1920);
}
.ct-hdr.h1{left:1.8519%}
.ct-hdr.h2{left:43.2660%}
.ct-hdr.h3{left:88.8889%}

.ct-row{left:0;width:100%;height:calc(var(--u) * 30/1920)}
.ct-row.r1{top:50.5500%}
.ct-row.r2{top:56.0250%}
.ct-row.r3{top:61.5000%}
.ct-row.r4{top:67.0000%}
.ct-row.r5{top:72.3750%}

.ct-n{
  position:absolute;left:0;width:9.0909%;text-align:center;
  color:var(--green);font-weight:800;line-height:1.5;
  font-size:calc(var(--u) * 19.576/1920);
}
.ct-t{
  position:absolute;left:13.8721%;width:80%;
  color:#fff;font-weight:600;line-height:1.5;letter-spacing:-.02em;
  font-size:calc(var(--u) * 20.728/1920);
}
/* BONUS 행도 주차 번호(5·10·15)를 그대로 쓴다 — 1~15 가 끊기지 않는다.
   초록 띠 위라 글자만 검정으로 뒤집는다. */
.ct-row.bonus .ct-n{color:#000}
.ct-row.bonus .ct-t{color:#000}

/* BONUS 초록 띠 (3402:222686~688) y3923.59 h43.10 */
.ct-bar{top:71.6988%;height:calc(var(--u) * 43.102/1920);background:var(--green)}
.ct-col.k1 .ct-bar{left:.8754%;width:85.6116%}
.ct-col.k2 .ct-bar{left:0;width:86.6006%}
.ct-col.k3 .ct-bar{left:0;width:86.6006%;background:#08FFD0}

/* 수강권 배지 */
.ct-pass{
  color:var(--green);font-weight:700;line-height:1;white-space:nowrap;
  font-size:calc(var(--u) * 20.728/1920);
}
.ct-col.k1 .ct-pass{left:89.8990%;top:62.0000%}
.ct-col.k2 .ct-pass{left:89.8148%;top:60.7250%}
.ct-col.k3 .ct-pass{left:89.7306%;top:62.0000%}
.ct-pass em{
  display:block;font-style:normal;font-weight:500;
  font-size:calc(var(--u) * 12.283/1920);
  margin-top:calc(var(--u) * 9/1920);
  margin-left:calc(var(--u) * -8.6/1920);
}

/* 수강권 칸 점선 구분 (3402:231215/219/223) x+514 y3730 h237 */
.ct-dash{
  top:47.5000%;left:86.5320%;
  width:calc(var(--u) * 1/1920);height:29.6250%;
  background:repeating-linear-gradient(
    to bottom,#7F7F7F 0,#7F7F7F calc(var(--u) * 5/1920),
    transparent calc(var(--u) * 5/1920),transparent calc(var(--u) * 10/1920));
}
/* 열 바닥선 */
.ct-foot-rule{
  left:0;width:100%;top:77.0000%;
  height:calc(var(--u) * 1.5/1920);background:#D6D8D0;
}

.ct-note-foot{
  left:31.7188%;top:91.4500%;width:38.6000%;
  color:#fff;font-weight:600;line-height:1.3;letter-spacing:-.02em;
  font-size:calc(var(--u) * 20.728/1920);
  padding-left:calc(var(--u) * 20/1920);
  text-indent:calc(var(--u) * -20/1920);
}

/* ── S5 : 포트폴리오 카드 + CTA ──────────────────────────── */

.pf-card{
  left:37.3802%;top:5.0774%;width:25.8504%;
  height:calc(var(--u) * 595.592/1920);
  border-radius:calc(var(--u) * 65.306/1920);
  border:calc(var(--u) * 2.612/1920) solid transparent;
  background:
    linear-gradient(147.95deg,#063908 6.66%,#000 41.33%,#063908 94.95%) padding-box,
    conic-gradient(from 0deg,
      #043905   0deg, #22CD03  35deg, #000000  60deg, #021A02 140deg,
      #032B03 180deg, #0F6000 215deg, #000E01 250deg, #043907 313deg,
      #D0EDDC 325deg, #043905 360deg) border-box;
}
/* 3D 포폴 아이콘 — export 시 검정이 구워져서 카드 그라디언트를 덮는다.
   screen 합성으로 검정을 투명처럼 되돌린다. 카드에 opacity/filter/transform 을
   주면 쌓임 맥락이 생겨 합성이 끊기므로 넣지 말 것. */
.pf-icon{left:41.6667%;top:8.4988%;width:17.2789%;mix-blend-mode:screen}

.pf-cap{
  left:50%;top:50.0143%;transform:translateX(-50%);
  width:44%;text-align:center;white-space:nowrap;
  color:#fff;font-weight:800;letter-spacing:-.03em;
  font-size:calc(var(--u) * 28.735/1920);
  line-height:calc(var(--u) * 35.265/1920);
  margin-left:calc(var(--u) * 6.39/1920);
}
.pf-cap b{color:var(--green);font-weight:800}
.pf-sub{
  left:50%;top:65.0976%;transform:translateX(-50%);
  width:44%;text-align:center;
  color:#ECECEC;font-weight:400;letter-spacing:-.066em;
  font-size:calc(var(--u) * 19.592/1920);
  line-height:calc(var(--u) * 28.735/1920);
  margin-left:calc(var(--u) * 1.96/1920);
}

.pf-btn{
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:calc(var(--u) * 1.638/1920) solid var(--green);
  padding-inline:calc(var(--u) * 40.952/1920);
  font-weight:800;letter-spacing:0;white-space:nowrap;
  font-size:calc(var(--u) * 23/1920);
  line-height:calc(var(--u) * 36.693/1920);
  transition:box-shadow .2s;
}
.pf-btn.b1{
  left:32.3729%;top:85.7905%;
  height:calc(var(--u) * 75.992/1920);
  background:var(--green);color:#06150A;
}
.pf-btn.b2{
  left:52.6661%;top:85.5952%;
  height:calc(var(--u) * 79.268/1920);
  color:var(--green);
}
.pf-btn:hover{box-shadow:0 0 calc(var(--u) * 40/1920) rgba(44,255,5,.5)}

/* ═══════════════════════════════════════════════════════════
   모바일 — 피그마 3457:153673 "커리큘럼 - 모바일" (360 기준)
   본문 프레임 3402:204905 (y46 부터) 를 로컬 원점 0 으로 옮겼다.

   히어로만 시안처럼 절대배치 캔버스로 두고(겹쳐 놓은 일러스트라
   흐름 배치로는 구성이 무너진다), 나머지는 흐름 배치로 쌓는다.

   ⚠ 시안의 모바일 본문은 5~8px 라 실제 화면에서 읽을 수 없다.
     오프라인 페이지에서와 같은 판단으로 배치는 시안을 따르되
     글자 크기만 읽을 수 있게 올렸다.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){

  .cur-sec{
    --u:100vw; --m:100vw;
    width:100vw; max-width:none;
    margin-inline:calc(-1 * var(--gutter));
  }

  /* ── S1 히어로 (절대배치 유지) ── 프레임 y46~646 ─────────── */
  .cur-hero{aspect-ratio:360/600}
  .ch-title  {left:11.86%;top:8.25%;width:71.11%}
  .ch-cluster{left:10.90%;top:26.81%;width:78.13%}
  .ch-ben-h  {left:63.01%;top:61.12%;width:18.13%}
  .ch-pill{
    left:60.54%;width:22.16%;
    height:calc(var(--m) * 25.26/360);
    font-size:calc(var(--m) * 8.6/360);
    line-height:calc(var(--m) * 10.4/360);
    border-width:calc(var(--m) * .5/360);
    box-shadow:0 0 calc(var(--m) * 10/360) rgba(44,255,5,.55),
               0 0 calc(var(--m) * 26/360) rgba(44,255,5,.22);
  }
  .ch-pill.p1{top:64.57%}
  .ch-pill.p2{top:70.24%}
  .ch-pill.p3{top:75.91%}
  .ch-lead{font-size:calc(var(--m) * 11/360)}
  .ch-lead.l1{left:12.35%;top:82.94%}
  .ch-lead.l2{left:48.16%;top:82.94%}
  .ch-rule{left:15.85%;top:84.03%;width:30.95%;height:calc(var(--m) * 1.2/360)}
  .ch-pick{left:12.11%;top:86.34%;width:70.99%}

  /* ── S2 CLASS FEATURE (흐름) ─────────────────────────────── */
  .cur-feature{
    aspect-ratio:auto;height:auto;
    padding:calc(var(--m) * 26/360) calc(var(--m) * 29.67/360) calc(var(--m) * 34/360);
  }
  .cur-feature > *,
  .cur-feature > .cf-block > *{position:static}
  .cur-feature .cf-eyebrow{width:calc(var(--m) * 77.4/360);margin:0 auto}
  .cur-feature .cf-title  {width:calc(var(--m) * 253.5/360);margin:calc(var(--m) * 3/360) auto 0}

  .cur-feature .cf-block{
    display:flex;flex-wrap:wrap;align-items:flex-start;
    margin-top:calc(var(--m) * 30/360);
  }
  .cur-feature .cf-block > img{
    width:100%;margin-bottom:calc(var(--m) * 14/360);
  }
  .cur-feature .cf-block.b1 > img{width:calc(50% - var(--m) * 3/360)}
  .cur-feature .cf-block.b1 > img.cf-1b{margin-left:calc(var(--m) * 6/360)}

  .cur-feature .cf-num{width:28%;padding-left:7.46%}
  .cur-feature .cf-num img{width:calc(var(--m) * 40/360)}
  .cur-feature .cf-num.n2 img,
  .cur-feature .cf-num.n3 img{width:calc(var(--m) * 46.5/360)}

  .cur-feature .cf-h3{
    width:72%;
    font-size:calc(var(--m) * 13/360);
    line-height:1.42;
  }
  .cur-feature .cf-line{
    width:100%;height:calc(var(--m) * 1/360);
    margin:calc(var(--m) * 9/360) 0 calc(var(--m) * 8/360);
    /* 시안은 번호 아래 짧은 선 + 본문 아래 긴 선, 두 도막이다 */
    background:linear-gradient(90deg,
      transparent 0 7.42%, #242424 7.42% 20%,
      transparent 20% 28%, #242424 28% 92.38%, transparent 92.38%);
  }
  .cur-feature .cf-weeks{
    width:28%;padding-left:7.9%;
    font-size:calc(var(--m) * 11/360);
  }
  .cur-feature .cf-body{
    width:72%;
    font-size:calc(var(--m) * 12/360);
    line-height:1.72;
  }

  /* ── S3 AI 실습 + 특강 (흐름) ────────────────────────────── */
  .cur-ai{
    aspect-ratio:auto;height:auto;
    padding:calc(var(--m) * 8/360) calc(var(--m) * 21.19/360) calc(var(--m) * 34/360);
  }
  .cur-ai > *,
  .cur-ai > .ai-figure > *{position:static}
  .cur-ai .ai-figure{display:block;position:relative}
  .cur-ai .ai-strip.d{display:none}
  .cur-ai .ai-strip.m{display:block;width:100%}
  /* 민트 바는 콜라주에 구워진 바 위에 그대로 덮어 글자를 또렷하게 만든다 */
  .cur-ai .ai-bar{
    position:absolute;justify-content:center;
    font-size:calc(var(--m) * 8.4/360);
    letter-spacing:0;
    height:4.76%;
  }
  .cur-ai .ai-bar.b1{left:6.59%;top:21.40%;width:86.73%}
  .cur-ai .ai-bar.b2{left:6.59%;top:42.18%;width:86.73%}
  .cur-ai .ai-bar.b3{left:5.79%;top:95.24%;width:87.72%}

  .cur-ai .ai-badge{
    width:calc(var(--m) * 31.4/360);
    margin:calc(var(--m) * 24/360) 0 0 calc(var(--m) * 31.5/360);
    float:left;
  }
  .cur-ai .ai-h2{
    width:auto;margin:calc(var(--m) * 22/360) 0 0 calc(var(--m) * 78/360);
    font-size:calc(var(--m) * 14/360);line-height:1.42;
  }
  .cur-ai .ai-line{
    width:auto;margin:calc(var(--m) * 8/360) 0 calc(var(--m) * 7/360) calc(var(--m) * 31.5/360);
    height:calc(var(--m) * 1/360);background:#2A2A2A;
  }
  .cur-ai .ai-body{
    width:auto;margin-left:calc(var(--m) * 78/360);
    font-size:calc(var(--m) * 12/360);line-height:1.72;
  }

  /* ── S4 커리큘럼 표 (흐름 · 15행 한 줄기) ─────────────────── */
  .cur-table{
    aspect-ratio:auto;height:auto;
    padding:calc(var(--m) * 14/360) calc(var(--m) * 46.15/360) calc(var(--m) * 30/360);
  }
  .cur-table > *{position:static}
  .cur-table .ct-title{width:calc(var(--m) * 255/360);margin:0 auto}
  .cur-table .ct-note{
    width:auto;margin-top:calc(var(--m) * 8/360);text-align:center;
    font-size:calc(var(--m) * 9/360);
  }

  .cur-table .ct-col{
    /* relative 로 두면 데스크탑의 left:34.5% 가 그대로 살아 옆으로 밀린다 */
    position:relative;left:0;right:auto;
    width:100%;height:auto;
    padding-right:calc(var(--m) * 44/360);
  }
  .cur-table .ct-col > *{position:static}
  .cur-table .ct-col.k1{margin-top:calc(var(--m) * 14/360)}
  /* 시안은 표가 하나로 이어진다 — 2·3번째 열의 머리는 지운다 */
  .cur-table .ct-col.k2 .ct-tab,.cur-table .ct-col.k2 .ct-hdr,
  .cur-table .ct-col.k3 .ct-tab,.cur-table .ct-col.k3 .ct-hdr{display:none}

  /* 머리 띠는 수강권 칸까지 덮어야 한다 (오른쪽 여백만큼 더 늘린다) */
  .cur-table .ct-tab{
    width:calc(100% + var(--m) * 44/360);
    margin:0 calc(var(--m) * -44/360) calc(var(--m) * 3/360) 0;
  }
  .cur-table .ct-hdr{
    position:absolute;top:calc(var(--m) * 23/360);
    color:#000;font-size:calc(var(--m) * 11/360);
  }
  .cur-table .ct-hdr.h1{left:calc(var(--m) * 4.7/360)}
  .cur-table .ct-hdr.h2{left:44%}
  .cur-table .ct-hdr.h3{left:auto;right:calc(var(--m) * 4/360)}

  .cur-table .ct-row{
    display:flex;align-items:center;
    gap:calc(var(--m) * 6/360);
    width:100%;height:auto;
    padding:calc(var(--m) * 3.6/360) calc(var(--m) * 4/360);
  }
  .cur-table .ct-n{
    position:static;flex:none;width:calc(var(--m) * 20/360);
    text-align:center;font-size:calc(var(--m) * 10.5/360);line-height:1.4;
  }
  .cur-table .ct-t{
    position:static;flex:1;width:auto;
    font-size:calc(var(--m) * 11/360);line-height:1.4;
  }
  /* 모바일 시안은 BONUS 행도 5·10·15 로 이어서 번호를 매긴다 */
  .cur-table .ct-row.bonus .ct-n{color:#000}
  .cur-table .ct-row.bonus{background:var(--green)}
  .cur-table .ct-col.k3 .ct-row.bonus{background:#08FFD0}
  .cur-table .ct-bar,
  .cur-table .ct-foot-rule{display:none}

  .cur-table .ct-dash{
    top:0;height:100%;left:auto;
    right:calc(var(--m) * 40/360);
    width:calc(var(--m) * 1/360);
  }
  .cur-table .ct-pass{
    position:absolute;left:auto;right:0;top:50%;
    transform:translateY(-50%);text-align:center;
    font-size:calc(var(--m) * 11/360);
  }
  .cur-table .ct-pass em{font-size:calc(var(--m) * 7.5/360);margin:2px 0 0}

  .cur-table .ct-note-foot{
    width:auto;margin-top:calc(var(--m) * 22/360);
    font-size:calc(var(--m) * 9.5/360);line-height:1.6;
    padding-left:calc(var(--m) * 9/360);
    text-indent:calc(var(--m) * -9/360);
  }

  /* ── S5 포트폴리오 + CTA (흐름) ──────────────────────────── */
  .cur-cta{
    aspect-ratio:auto;height:auto;
    padding:calc(var(--m) * 20/360) calc(var(--m) * 54.7/360) calc(var(--m) * 40/360);
    display:flex;flex-direction:column;align-items:center;
  }
  .cur-cta > *,
  .cur-cta > .pf-panel > *{position:static}

  /* 카드 자체가 그릇이 된다 — 안의 글이 길어지면 카드가 같이 늘어난다 */
  .cur-cta .pf-panel{
    display:flex;flex-direction:column;align-items:center;
    width:100%;
    padding:calc(var(--m) * 19/360) calc(var(--m) * 14/360) calc(var(--m) * 24/360);
    border-radius:calc(var(--m) * 33/360);
    border:calc(var(--m) * 1.3/360) solid transparent;
    background:
      linear-gradient(147.95deg,#063908 6.66%,#000 41.33%,#063908 94.95%) padding-box,
      conic-gradient(from 0deg,
        #043905   0deg, #22CD03  35deg, #000000  60deg, #021A02 140deg,
        #032B03 180deg, #0F6000 215deg, #000E01 250deg, #043907 313deg,
        #D0EDDC 325deg, #043905 360deg) border-box;
  }
  .cur-cta .pf-card{display:none}
  .cur-cta .pf-icon{
    width:calc(var(--m) * 172.8/360);margin:0;
    mix-blend-mode:screen;
  }
  .cur-cta .pf-cap{
    transform:none;width:100%;white-space:normal;text-align:center;
    margin:calc(var(--m) * 12/360) 0 0;
    font-size:calc(var(--m) * 14/360);line-height:1.45;
  }
  .cur-cta .pf-sub{
    transform:none;width:100%;text-align:center;
    margin:calc(var(--m) * 10/360) 0 0;
    font-size:calc(var(--m) * 9.5/360);line-height:1.5;
  }
  .cur-cta .pf-btn{
    width:100%;max-width:calc(var(--m) * 250/360);
    height:auto;padding:calc(var(--m) * 13/360) calc(var(--m) * 20/360);
    margin-top:calc(var(--m) * 12/360);
    font-size:calc(var(--m) * 13/360);line-height:1.3;
  }
  .cur-cta .pf-btn.b1{margin-top:calc(var(--m) * 26/360)}
}

/* ══ 과정 고르기 탭 (정규반 / 왕초보반) ══════════════════════
   ⚠ 스크립트가 못 돌면 글이 영영 안 보이면 안 된다. 그래서 감추는 규칙은
     html.js-tab 이 붙은 뒤에만 걸린다. JS 가 꺼져 있으면 두 과정이 그냥 이어서 나온다. */
.cur-pick{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(8px, 1.2vw, 16px);
  width:min(900px, calc(100% - 2 * var(--gutter)));
  margin:clamp(18px, 3vw, 40px) auto clamp(24px, 3.4vw, 44px);
}
.cur-tab{
  appearance:none; cursor:pointer; text-align:left;
  padding:clamp(12px, 1.5vw, 20px) clamp(14px, 1.8vw, 24px);
  border-radius:clamp(12px, 1.4vw, 18px);
  border:2px solid #3A3A3A; background:#121212; color:#BDBDBD;
  transition:border-color .15s, background .15s, color .15s;
}
.cur-tab b{ display:block; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(17px, 2vw, 26px); }
.cur-tab span{ display:block; margin-top:.25em; opacity:.72;
  font-size:clamp(12px, 1.15vw, 15px); letter-spacing:-.02em; }
.cur-tab[aria-selected="true"]{
  border-color:#2CFF05; background:rgba(44,255,5,.07); color:#fff;
}
.cur-tab:hover{ border-color:#6c6c6c }
.cur-tab[aria-selected="true"]:hover{ border-color:#2CFF05 }
.cur-tab:focus-visible{ outline:3px solid #2CFF05; outline-offset:3px }

/* 자바스크립트가 돌 때만 감춘다 */
html.js-tab .cur-panel[hidden]{ display:none }

/* ══ 왕초보반 패널 ══════════════════════════════════════════
   정규반 표는 피그마 좌표에 맞춘 절대배치라 그대로 못 쓴다.
   여기는 흐름 배치로 단순하게 짠다(폭이 좁아져도 그냥 접힌다). */
.bc-sec{
  width:min(900px, calc(100% - 2 * var(--gutter)));
  margin-inline:auto;
  padding-block:clamp(20px, 3vw, 44px) clamp(56px, 7vw, 120px);
  color:#fff;
}
.bc-eyebrow{ color:#A0A0A0; font-weight:600; letter-spacing:-.03em;
  font-size:clamp(13px, 1.4vw, 19px); text-align:center }
.bc-title{ margin-top:.3em; text-align:center; font-weight:800; color:#2CFF05;
  letter-spacing:-.04em; font-size:clamp(28px, 4.4vw, 58px); line-height:1.2 }
.bc-when{ margin-top:.7em; text-align:center; font-weight:600; color:#ECECEC;
  letter-spacing:-.03em; font-size:clamp(15px, 1.8vw, 24px) }
.bc-when b{ color:#2CFF05; font-weight:800 }
.bc-where{ margin-top:.35em; text-align:center; color:#AAD8F9; font-weight:500;
  letter-spacing:-.03em; font-size:clamp(13px, 1.4vw, 19px) }
.bc-note{ margin-top:clamp(18px, 2.4vw, 32px); text-align:center; color:#fff;
  font-weight:600; letter-spacing:-.03em; font-size:clamp(13px, 1.35vw, 18px);
  word-break:keep-all }
.bc-note b{ color:#2CFF05; font-weight:600 }

.bc-table{ width:100%; margin-top:clamp(18px, 2.2vw, 30px);
  border-collapse:collapse; font-size:clamp(13px, 1.35vw, 18px) }
.bc-table thead th{
  background:#fff; color:#000; font-weight:600; letter-spacing:-.03em;
  padding:clamp(10px, 1.1vw, 15px) clamp(8px, 1vw, 14px);
}
.bc-table thead th:first-child{ border-radius:clamp(10px,1.2vw,16px) 0 0 0; width:14% }
.bc-table thead th:last-child{ border-radius:0 clamp(10px,1.2vw,16px) 0 0; width:14%;
  text-align:right }
.bc-table thead th:nth-child(2){ text-align:center }
.bc-table td, .bc-table tbody th{
  border-bottom:1px solid #2A2A2A;
  padding:clamp(11px, 1.25vw, 17px) clamp(8px, 1vw, 14px);
  letter-spacing:-.04em; word-break:keep-all;
}
.bc-table tbody th.bc-w{
  color:#2CFF05; font-weight:800; text-align:center; vertical-align:middle;
  font-size:clamp(26px, 3.4vw, 46px); line-height:1;
  border-bottom:1px solid #2A2A2A;
}
.bc-table td.bc-e{ color:#2CFF05; font-weight:800; text-align:right; white-space:nowrap }

.bc-perk{ list-style:none; margin-top:clamp(22px, 3vw, 40px); display:grid;
  gap:clamp(8px, 1vw, 12px) }
.bc-perk li{ background:#121212; border:1px solid #3A3A3A;
  border-radius:clamp(12px, 1.4vw, 18px);
  padding:clamp(13px, 1.5vw, 20px) clamp(15px, 1.8vw, 24px) }
.bc-perk b{ display:block; color:#2CFF05; font-weight:800; letter-spacing:-.03em;
  font-size:clamp(15px, 1.7vw, 22px) }
.bc-perk span{ display:block; margin-top:.3em; color:#D6D6D6; letter-spacing:-.03em;
  font-size:clamp(13px, 1.35vw, 17px); word-break:keep-all }

.bc-btns{ margin-top:clamp(26px, 3.4vw, 48px); display:flex; flex-wrap:wrap;
  justify-content:center; gap:clamp(10px, 1.2vw, 16px) }
.bc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-width:clamp(160px, 20vw, 280px); min-height:clamp(52px, 5vw, 70px);
  padding:0 clamp(20px, 2.2vw, 34px); border-radius:999px;
  font-weight:800; letter-spacing:-.028em; line-height:1;
  font-size:clamp(15px, 1.5vw, 22px);
  transition:filter .15s, transform .12s, background .15s, color .15s }
.bc-btn.solid{ background:#2CFF05; color:#06150A; box-shadow:0 6px 20px rgba(44,255,5,.28) }
.bc-btn.ghost{ background:rgba(253,253,253,.10); color:#fff; box-shadow:inset 0 0 0 2px #fff }
.bc-btn:hover{ filter:brightness(1.07); transform:translateY(-2px) }
.bc-btn.ghost:hover{ background:#fff; color:#06150A; filter:none }
.bc-btn:active{ transform:translateY(0) scale(.985) }
.bc-btn:focus-visible{ outline:3px solid #2CFF05; outline-offset:3px }

@media (max-width:560px){
  .cur-pick{ grid-template-columns:1fr }
  .bc-table thead th:first-child,.bc-table thead th:last-child{ width:18% }
}