/* ─────────────────────────────────────────────────────────────
   오프라인 강의 페이지 — 피그마 3398:3432 (1920 기준) 실측
   좌표 체계는 메인과 동일: --u:var(--pagew), calc(var(--u) * N/1920)
   ───────────────────────────────────────────────────────────── */

.off-hero{
  --u:var(--pagew);
  padding-top:calc(var(--u) * 199.75/1920);   /* 제목 잉크 상단 199.75 */
  text-align:center;
}
.off-hero h1{ line-height:0 }
.off-hero h1 img,
.off-hero h1 svg.tlab{
  display:inline-block;height:auto;
  width:calc(var(--u) * 909/1920);            /* 잉크 폭 (노드박스 925 아님) */
  max-width:calc(100% - 32px);
}
/* 잉크 하단 437.25 -> 설명 박스 503 = 65.75 */
.off-lede{
  margin-top:calc(var(--u) * 65.75/1920);
  width:calc(var(--u) * 1229/1920);max-width:calc(100% - 32px);
  margin-inline:auto;
  font-size:calc(var(--u) * 24/1920);
  line-height:1.4167;                          /* 박스 34 */
  font-weight:600;color:var(--muted);letter-spacing:-.02em;
}

/* ── 수강생 작품 슬라이드 ────────────────────────────────
   프레임 y599 1920x289.7 · 카드 407.31x263.99 · 간격 425.41 (gap 18.1)
   설명 박스 하단 537 -> 프레임 599 = 62 / 카드는 프레임 안 6.79 */
.off-slider{
  margin-top:calc(var(--u) * 62/1920);
  width:100%;
  padding-top:calc(var(--u) * 6.79/1920);
  padding-bottom:calc(var(--u) * 12.1/1920);  /* 프레임 289.7 맞춤 */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  /* ⚠ 사파리는 mask 를 씌운 상자 안에서 애니메이션이 멈춰 서는 일이 있다(아이폰에서 실제로 그랬다).
       상자를 제 층으로 올려 두면 안 그런다. 크롬은 이 줄이 있으나 없으나 같다. */
  transform:translateZ(0);
}
.off-track{
  display:flex;
  gap:calc(var(--u) * 18.1/1920);
  width:max-content;
  animation:off-marquee 46s linear infinite;
  /* 흐르는 것이 이 상자뿐임을 미리 알려 사파리가 매 프레임 다시 그리지 않게 한다 */
  will-change:transform;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
}
.off-slider:hover .off-track,
.off-track:focus-within,
.off-slider.has-playing .off-track{ animation-play-state:paused }

/* 재생 중 카드의 닫기 버튼 — 닫으면 슬라이드가 다시 흐른다 */
.off-thumb.playing{ cursor:default }
.off-thumb.playing iframe{ position:absolute;inset:0;width:100%;height:100%;border:0 }
.off-close{
  position:absolute; top:8px; right:8px; z-index:4;
  width:34px; height:34px; display:grid; place-items:center;
  background:rgba(0,0,0,.72); color:#fff; border:0; border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.off-close:hover{ background:var(--green); color:#000; transform:scale(1.08) }
.off-close:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@keyframes off-marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
@media (prefers-reduced-motion:reduce){
  .off-track{ animation:none }
  .off-slider{ overflow-x:auto;-webkit-overflow-scrolling:touch }
}

.off-card{
  flex:none;
  width:calc(var(--u) * 407.31/1920);
  text-align:left;
}
.off-thumb{
  position:relative;display:block;width:100%;
  aspect-ratio:407.31/229.68;
  border-radius:calc(var(--u) * 10/1920);
  overflow:hidden;background:var(--ink);
  cursor:pointer;border:0;padding:0;
}
.off-thumb img{ width:100%;height:100%;object-fit:cover;display:block }
.off-thumb iframe{ position:absolute;inset:0;width:100%;height:100%;border:0 }

/* 태그 — local 13.74/13.63, 82.63x31.31 · 초록 글자 + 어두운 반투명 배경 */
.off-tag{
  position:absolute;left:calc(13.74/407.31 * 100%);top:calc(13.63/229.68 * 100%);
  display:inline-block;
  padding:calc(var(--u) * 5.66/1920) calc(var(--u) * 11.31/1920);
  border-radius:calc(var(--u) * 6/1920);
  background:rgba(0,0,0,.62);
  font-size:calc(var(--u) * 20/1920);line-height:1;
  font-weight:700;color:var(--green);letter-spacing:-.02em;
  white-space:nowrap;
}
/* 재생버튼 — local 164.62/78.63, 78.07x72.41 · 반투명 초록 + 검은 삼각형 */
.off-play{
  position:absolute;
  left:calc(164.62/407.31 * 100%);top:calc(78.63/229.68 * 100%);
  width:calc(78.07/407.31 * 100%);height:calc(72.41/229.68 * 100%);
  display:grid;place-items:center;
  background:rgba(44,255,5,.82);
  border-radius:calc(var(--u) * 8/1920);
  color:#000;font-size:calc(var(--u) * 34/1920);line-height:1;
  transition:background .18s, transform .18s;
}
.off-thumb:hover .off-play{ background:var(--green);transform:scale(1.06) }
.off-thumb:focus-visible{ outline:3px solid var(--green);outline-offset:3px }

/* 캡션 — 카드 local y229.68 박스 34.31, 글자 23 */
.off-card figcaption{
  margin-top:calc(var(--u) * 11.31/1920);
  font-size:calc(var(--u) * 23/1920);line-height:1.3;
  font-weight:700;color:var(--white);letter-spacing:-.03em;
}

/* ── 지금 신청하러 가기 ─────────────────────────────────
   프레임 하단 888.7 -> 버튼 996 = 107.3 · 버튼 256.94x72.53 */
.off-cta-wrap{ margin-top:calc(var(--u) * 107.3/1920);line-height:0 }
.off-cta{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  gap:.35em;
  width:calc(var(--u) * 256.94/1920);
  height:calc(var(--u) * 72.53/1920);
  border-radius:999px;
  background:var(--green);color:#000;
  font-size:calc(var(--u) * 25/1920);
  font-weight:800;letter-spacing:-.02em;line-height:1;
  transition:filter .15s, transform .12s;
}
.off-cta:hover{ filter:brightness(1.07);transform:translateY(-2px) }
.off-cta:focus-visible{ outline:3px solid #fff;outline-offset:3px }
/* 호버 반짝임 (사용자 요청) */
.off-cta::after{
  content:"";position:absolute;top:0;left:-140%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.off-cta:hover::after{ animation:off-shine .75s ease-out }
@keyframes off-shine{ to{ left:160% } }
@media (prefers-reduced-motion:reduce){
  .off-cta:hover::after{ animation:none }
  .off-cta:hover{ transform:none }
}

/* ── 모바일 ─────────────────────────────────────────────── */
@media (max-width:820px){
  .off-hero{ --m:100vw; padding-top:calc(var(--m) * 42/360) }
  .off-hero h1 img,
  .off-hero h1 svg.tlab{ width:calc(var(--m) * 250/360) }
  .off-lede{
    margin-top:calc(var(--m) * 14/360);
    width:calc(var(--m) * 290/360);
    font-size:calc(var(--m) * 11/360);
  }
  .off-slider{ margin-top:calc(var(--m) * 18/360) }
  .off-track{ gap:calc(var(--m) * 10/360); animation-duration:34s }
  .off-card{ width:calc(var(--m) * 220/360) }
  .off-tag{ font-size:calc(var(--m) * 9.5/360); padding:3px 6px }
  .off-play{ font-size:calc(var(--m) * 16/360) }
  .off-card figcaption{ font-size:calc(var(--m) * 11.5/360); margin-top:6px }
  .off-cta-wrap{ margin-top:calc(var(--m) * 24/360) }
  .off-cta{
    width:calc(var(--m) * 180/360); height:calc(var(--m) * 46/360);
    font-size:calc(var(--m) * 13/360);
  }
}

/* ══════════════════════════════════════════════════════════
   SECRET CLUB FOR FILMMAKERS — 피그마 3402:164156
   블록 1920x4248.56. 아래 % 는 전부 이 블록 기준.
   카드 848.4x491.2 #073908 r22 · 후기 글리프 37.8~42.2 줄간격 63.3 #2CFF05
   ══════════════════════════════════════════════════════════ */
.off-club{
  --u:var(--pagew);
  position:relative;
  width:100%;
  aspect-ratio:1920/4248.56;
  background:var(--black);
  overflow:hidden;
  margin-top:calc(var(--u) * 132.3/1920);   /* 버튼 하단 1068.53 -> 블록 1201 */
}

/* ── 상단 촬영현장 사진 (노드 x-185.3 y-87.1 2283.9x1522.6) ── */
.club-photo{ position:absolute;inset:0;z-index:0 }
.club-photo > img:first-child{
  position:absolute;
  left:calc(-185.3/1920 * 100%);
  top:calc(-87.1/4248.56 * 100%);   /* top % 는 컨테이너 높이 기준이다 */
  width:calc(2283.9/1920 * 100%);
  max-width:none;                   /* 전역 img{max-width:100%} 가 크롭을 망친다 */
  height:auto;
}
/* 사진 하단 페이드 (노드 3402:164161 y439.8 h439.8) */
.club-fade{
  position:absolute;left:0;right:0;
  top:calc(439.8/4248.56 * 100%);
  height:calc(439.8/4248.56 * 100%);   /* 노드 3402:164161 : 439.8~879.6 */
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%);
}
.club-photo::after{           /* 페이드 아래는 완전 검정 */
  content:"";position:absolute;left:0;right:0;
  top:calc(879.6/4248.56 * 100%);bottom:0;background:#000;
}
.club-wordmark,
svg.club-wordmark{
  position:absolute;z-index:2;
  left:calc(698.79/1920 * 100%);
  top:calc(104.93/4248.56 * 100%);
  width:calc(524.06/1920 * 100%);height:auto;
}

/* ── TLAB 대제목 ── */
.club-title{ line-height:0 }
.club-title img,
.club-title svg.tlab{ position:absolute;z-index:2;height:auto }
.club-title .ct1{ left:calc(295.6/1920 * 100%); top:calc(1021.1/4248.56 * 100%); width:calc(1333.5/1920 * 100%) }
.club-title .ct2{ left:calc(113.9/1920 * 100%); top:calc(1251.0/4248.56 * 100%); width:calc(1705.5/1920 * 100%) }

/* ── 수강생 만족도 100% + 서브 ── */
.club-satis,.club-first{ line-height:0 }
.club-satis img,.club-first img{ position:absolute;z-index:2;height:auto }
.club-satis .cs-icon{ left:calc(149.6/1920 * 100%); top:calc(1926.5/4248.56 * 100%); width:calc(134/1920 * 100%) }
.club-satis .cs-glow{ left:calc(254.1/1920 * 100%);  top:calc(1893.0/4248.56 * 100%); width:calc(1511.5/1920 * 100%); z-index:1 }
/* 수강생 만족도 100% — 피그마 실제 스펙: Pretendard ExtraBold 176.977px /
   줄높이 194.2 / 자간 -5.3093px / #2CFF05. (TLAB 이 아니었다) */
.club-satis .cs-text{
  position:absolute;z-index:3;
  left:calc(267.9/1920 * 100%); top:calc(1922.2/4248.56 * 100%);
  width:calc(1585.1/1920 * 100%);
  font-size:calc(var(--u) * 176.977/1920);
  line-height:calc(var(--u) * 194.2/1920);
  letter-spacing:calc(var(--u) * -5.3093/1920);
  font-weight:800;color:var(--green);text-align:center;
}
/* 영상 제작의 '첫 단추'를 꿰는 곳 — Pretendard Bold 107.163px / 줄높이 120.558 /
   자간 -1.0716px / #063908, '첫 단추' 만 #2CFF05 */
.club-first{
  position:absolute;z-index:2;
  left:calc(372/1920 * 100%); top:calc(2150/4248.56 * 100%);
  width:calc(1273/1920 * 100%);
  font-size:calc(var(--u) * 107.163/1920);
  line-height:calc(var(--u) * 120.558/1920);
  letter-spacing:calc(var(--u) * -1.0716/1920);
  font-weight:700;color:#063908;text-align:center;
  white-space:nowrap;      /* 폭이 좁아지면 "곳" 만 다음 줄로 떨어진다 */
}
.club-first em{ font-style:normal;color:var(--green) }

/* ── 후기 카드 8장 중 화면에 걸리는 6장 + 잘려나가는 것들 ── */
.club-quotes{ list-style:none;margin:0;padding:0 }
.cq{
  position:absolute;z-index:1;
  width:calc(848.4/1920 * 100%);
  height:calc(491.2/4248.56 * 100%);
  background:#073908;
  border-radius:calc(var(--u) * 22/1920);
  padding:calc(var(--u) * 200.9/1920) calc(var(--u) * 29.1/1920) 0;
  font-size:calc(var(--u) * 42/1920);
  line-height:1.5071;                      /* 줄간격 63.3 */
  font-weight:700;color:var(--green);
  letter-spacing:-.03em;text-align:center;
  overflow:hidden;
}
.cq.q1{ left:calc(-17.9/1920 * 100%);  top:calc(2424.6/4248.56 * 100%) }
.cq.q2{ left:calc(895.3/1920 * 100%);  top:calc(2424.6/4248.56 * 100%) }
.cq.q3{ left:calc(176.4/1920 * 100%);  top:calc(2980.5/4248.56 * 100%) }
.cq.q4{ left:calc(1089.5/1920 * 100%); top:calc(2980.5/4248.56 * 100%) }
.cq.q5{ left:calc(-17.9/1920 * 100%);  top:calc(3536.4/4248.56 * 100%) }
.cq.q6{ left:calc(895.3/1920 * 100%);  top:calc(3536.4/4248.56 * 100%) }

/* ── 캐릭터 6개 (카드 위쪽에 걸침) ── */
.club-mascots .m{ position:absolute;z-index:3;height:auto }
.club-mascots .m1{ left:calc(279.1/1920 * 100%);  top:calc(2248.2/4248.56 * 100%); width:calc(225.9/1920 * 100%) }
.club-mascots .m2{ left:calc(1233.5/1920 * 100%); top:calc(2216.2/4248.56 * 100%); width:calc(233.5/1920 * 100%) }
.club-mascots .m3{ left:calc(495.6/1920 * 100%);  top:calc(2833.1/4248.56 * 100%); width:calc(235.2/1920 * 100%) }
.club-mascots .m4{ left:calc(1442.2/1920 * 100%); top:calc(2777.3/4248.56 * 100%); width:calc(229.2/1920 * 100%) }
.club-mascots .m5{ left:calc(254.5/1920 * 100%);  top:calc(3386.8/4248.56 * 100%); width:calc(272.5/1920 * 100%) }
.club-mascots .m6{ left:calc(1201.1/1920 * 100%); top:calc(3382.3/4248.56 * 100%); width:calc(230.5/1920 * 100%) }

/* ── SECRET CLUB 모바일 ─────────────────────────────────────
   데스크탑은 고정비율 절대배치라 좁은 화면에서 글자가 읽을 수 없게 작아진다.
   820px 이하에서는 세로 흐름으로 재배치한다.
   (모바일 피그마 프레임을 받으면 실측으로 다시 맞출 것) */
/* ══════════════════════════════════════════════════════════
   모바일 — 피그마 3457:20515 「오프라인 강의 - 모바일」 360x797 실측
   데스크탑과 구성이 다르다. 헤드라인이 사진 위에 얹히고,
   후기 카드는 3행 2열로 어긋나게(스태거) 놓이며 좌우로 잘려나간다.
   마스코트는 각 카드 위쪽에 걸터앉는다.
   ══════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .off-club{
    --m:100vw;
    position:relative;
    aspect-ratio:360/797;
    margin-top:0;
    padding-bottom:0;
    overflow:hidden;
    background:#000;
  }

  /* 사진 : left -9.65% / right -9.3% / top -16.33 · 4096x2731 */
  .club-photo{
    position:absolute; inset:auto;
    left:-9.65%; width:118.95%;
    top:calc(var(--m) * -16.33/360);
    height:auto; aspect-ratio:4096/2731;
    overflow:visible;
  }
  .club-photo > img:first-child{
    position:absolute; inset:0; left:0; top:0; transform:none;
    width:100%; height:100%; max-width:none; object-fit:cover;
  }
  /* 상단 어둡게 : 높이 82.465, 아래로 갈수록 투명 */
  .club-fade{
    position:absolute; left:0; top:0; bottom:auto;
    width:100%; height:calc(var(--m) * 82.465/360);
    background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
  }
  .club-photo::after{ display:none }

  /* 잉크 실측 : x131~228(폭 98) y20~28 · 색은 흰빛 초록
     워드마크는 .club-photo(절대배치) 안에 있어 그 상자가 기준이 된다.
     사진은 top -16.33 이므로 20 - (-16.33) = 36.33 을 쓴다.
     선택자를 svg.club-wordmark 로 맞춰야 데스크탑 규칙(0,1,1)을 이긴다. */
  svg.club-wordmark,
  .club-wordmark{
    position:absolute; z-index:3;
    left:50%; transform:translateX(-50%);
    top:calc(var(--m) * 36.33/360);
    width:calc(var(--m) * 98/360);
    color:#d6ffcf;
  }

  /* 헤드라인 — 사진 위에 겹친다 (TLAB 41.86 / 76.186) */
  .club-title{ position:static; margin:0; line-height:0 }
  .club-title svg.tlab,
  .club-title img{
    position:absolute; z-index:2; height:auto; max-width:none;
    left:50%; transform:translateX(-50%);
  }
  /* 피그마가 주는 336.14/375.07 은 텍스트 "상자" 폭이라 그대로 쓰면 커진다.
     TLAB 잉크폭 = viewBox/1000 x 글자크기
       SECRET CLUB FOR : 5968.8/1000 x 41.860 = 249.8  (렌더 실측 249 ✓)
       FILMMAKERS      : 4192.5/1000 x 76.186 = 319.4  (렌더 실측 319 ✓) */
  .club-title .ct1{ top:calc(var(--m) * 192/360); width:calc(var(--m) * 249.8/360);
                    margin-left:calc(var(--m) * 0.2/360) }
  .club-title .ct2{ top:calc(var(--m) * 234/360); width:calc(var(--m) * 319.4/360);
                    margin-left:calc(var(--m) * 1/360) }

  /* 수강생 만족도 100% — 33.183px ExtraBold, 뒤에 흐린 초록 글로우 */
  .club-satis{
    position:absolute; z-index:2; left:0; top:calc(var(--m) * 360.42/360);
    width:100%; height:calc(var(--m) * 38.93/360);
    display:block; margin:0; padding:0; line-height:0;
  }
  .club-satis .cs-glow{ display:none }
  .club-satis .cs-icon{
    position:absolute; left:calc(28.05/360 * 100%); top:calc(var(--m) * 0.79/360);
    width:calc(var(--m) * 25.116/360); height:auto;
  }
  .club-satis .cs-text{
    position:absolute; top:0;      /* top 을 안 주면 정적 위치(=18px 아래)로 떨어져 아랫줄과 겹쳤다 */
    left:calc(50% + calc(var(--m) * 18.84/360));
    transform:translateX(-50%);
    width:calc(var(--m) * 297.209/360);
    font-family:Pretendard,system-ui,sans-serif; font-weight:800;
    font-size:calc(var(--m) * 33.183/360);
    line-height:calc(var(--m) * 36.412/360);
    letter-spacing:calc(var(--m) * -0.9955/360);
    text-align:center; color:var(--green); white-space:nowrap;
  }
  /* 글로우 사본 — 피그마의 blur 4.186 / rgba(44,255,5,.5) */
  .club-satis .cs-text::after{
    content:attr(data-glow); position:absolute; left:0; top:0; width:100%;
    color:rgba(44,255,5,.5); filter:blur(calc(var(--m) * 4.186/360));
    z-index:-1; pointer-events:none;
  }

  /* 영상 제작의 '첫 단추'를 꿰는 곳 — 20.093px Bold, 한 줄 */
  .club-first{
    position:absolute; z-index:2;
    left:calc(50% + calc(var(--m) * 9.25/360));
    transform:translateX(-50%);
    top:calc(var(--m) * 400/360);
    width:auto; margin:0; padding:0;
    font-size:calc(var(--m) * 20.093/360);
    line-height:calc(var(--m) * 22.605/360);
    letter-spacing:calc(var(--m) * -0.2009/360);
    font-weight:700; color:#063908; text-align:center; white-space:nowrap;
  }
  .club-first em{ font-style:normal; color:var(--green) }

  /* ── 후기 카드 6장 : 159.07x92.093 · radius 6.279 · 테두리 0.628
     행 top 454.6 / 558.84 / 663.07, 열 중심 (50%±103.81) (50%±67.4)
     왼쪽 열 #063908 · 오른쪽 열 #052b06 ── */
  .club-quotes{
    position:static; display:block; margin:0; padding:0;
    list-style:none;
  }
  .cq{
    position:absolute; z-index:2;
    box-sizing:border-box;
    width:calc(var(--m) * 159.07/360);
    height:calc(var(--m) * 92.093/360);
    transform:translateX(-50%);
    border:calc(var(--m) * 0.628/360) solid var(--green);
    border-radius:calc(var(--m) * 6.279/360);
    padding:calc(var(--m) * 37.68/360) calc(var(--m) * 2.5/360) 0;  /* 피그마 글줄폭 151.1 이 들어가야 2줄로 앉는다 */
    font-size:calc(var(--m) * 8.791/360);
    line-height:calc(var(--m) * 12.558/360);
    letter-spacing:calc(var(--m) * -0.0837/360);
    font-weight:600; color:var(--green); text-align:center;
  }
  .cq.q1{ left:calc(50% - calc(var(--m) * 103.81/360)); top:calc(var(--m) * 454.6/360); background:#063908 }
  .cq.q2{ left:calc(50% + calc(var(--m) *  67.40/360)); top:calc(var(--m) * 454.6/360); background:#052b06 }
  .cq.q3{ left:calc(50% - calc(var(--m) *  67.39/360)); top:calc(var(--m) * 558.84/360); background:#052b06 }
  .cq.q4{ left:calc(50% + calc(var(--m) * 103.81/360)); top:calc(var(--m) * 558.84/360); background:#063908 }
  .cq.q5{ left:calc(50% - calc(var(--m) * 103.81/360)); top:calc(var(--m) * 663.07/360); background:#063908 }
  .cq.q6{ left:calc(50% + calc(var(--m) *  67.40/360)); top:calc(var(--m) * 663.07/360); background:#052b06 }

  /* 좌우 페이드 — 41.442x331.535, 카드 열이 화면 밖으로 이어지는 느낌 */
  .club-quotes::before,
  .club-quotes::after{
    content:""; position:absolute; z-index:3; pointer-events:none;
    top:calc(var(--m) * 439.12/360);
    width:calc(var(--m) * 41.442/360);
    height:calc(var(--m) * 331.535/360);
  }
  .club-quotes::before{ left:0;  background:linear-gradient(to left,  rgba(0,0,0,0), rgba(0,0,0,.55)) }
  .club-quotes::after { right:calc(var(--m) * -5.86/360);
                        background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.55)) }

  /* ── 마스코트 : 각 카드 위쪽에 걸터앉는다 ── */
  .club-mascots{ position:static }
  .club-mascots .m{
    position:absolute; z-index:4; display:block; height:auto;
    transform:translateX(-50%);
  }
  .club-mascots .m1{ left:calc(var(--m) *  73.5/360); top:calc(var(--m) * 421.8/360); width:calc(var(--m) * 42.4/360) }
  .club-mascots .m2{ left:calc(var(--m) * 252.7/360); top:calc(var(--m) * 415.7/360); width:calc(var(--m) * 43.7/360) }
  .club-mascots .m3{ left:calc(var(--m) * 115.0/360); top:calc(var(--m) * 531.4/360); width:calc(var(--m) * 44.1/360) }
  .club-mascots .m4{ left:calc(var(--m) * 291.9/360); top:calc(var(--m) * 521.0/360); width:calc(var(--m) * 43.0/360) }
  .club-mascots .m5{ left:calc(var(--m) *  73.3/360); top:calc(var(--m) * 635.3/360); width:calc(var(--m) * 51.1/360) }
  .club-mascots .m6{ left:calc(var(--m) * 246.8/360); top:calc(var(--m) * 634.4/360); width:calc(var(--m) * 43.2/360) }
}

/* ── 하단 수강생 작품 (3462:170800 y79625 · 슬라이드 3462:170504) ── */
.off-tail{ --u:var(--pagew); padding:calc(var(--u) * 48/1920) 0 calc(var(--u) * 120/1920) }
.off-tail .tail-h{
  text-align:center; color:#fff;
  font-size:calc(var(--u) * 62/1920); line-height:1.13; font-weight:800;
  letter-spacing:calc(var(--u) * -1.86/1920);
}
.off-tail .tail-d{
  text-align:center; color:#9A9A9A;
  margin-top:calc(var(--u) * 14/1920);
  font-size:calc(var(--u) * 30/1920); line-height:1.43;
}
.off-tail .off-slider{ margin-top:calc(var(--u) * 56/1920) }
@media (max-width:820px){
  /* 피그마(모바일) 블록 시작 15092.3 기준
       제목   y10.7 h18   · 부제 y35.7 h24(2줄, 줄간 12)
       슬라이드 y95.7 h188 · 섹션 전체 348 (그 뒤가 푸터 15440) */
  .off-tail{ padding:calc(var(--m) * 10.7/360) 0 calc(var(--m) * 64.3/360) }
  .off-tail .tail-h{
    font-size:calc(var(--m) * 16/360);
    line-height:calc(var(--m) * 18/360);
    margin:0;
  }
  .off-tail .tail-d{
    margin-top:calc(var(--m) * 7/360);
    font-size:calc(var(--m) * 9/360);
    line-height:calc(var(--m) * 12/360);
    padding-inline:calc(var(--m) * 22/360);
  }
  .off-tail .off-slider{
    margin-top:calc(var(--m) * 36/360);
    height:calc(var(--m) * 188/360);
  }
  .off-tail .off-track{ height:100% }
  .off-tail .off-track > li{ height:100% }
}

/* 오프라인은 글이 길어 좌우 여백을 더 준다 (사용자 요청).
   --gutter 를 :root 에서 키우면 헤더·푸터까지 같이 작아지므로,
   헤더에는 다른 페이지와 같은 값을 되돌려준다.
   모바일(≤820)은 mobile.css 가 gutter 0 이라 건드리지 않는다. */
@media (min-width:821px){
  :root{ --gutter:clamp(0px, 12.8vw, 312px) }
  .site-header,
  body > footer{
    --pagew:min(calc(100vw - 2 * clamp(0px, 4.6vw, 112px)), 1920px);
    --gutter:clamp(0px, 4.6vw, 112px);
  }
}

/* ─────────────────────────────────────────────────────────────
   맨 위 공지 블록 — 리틀리에 있던 개강 정보를 그대로 옮겼다.
   상담이 이 내용으로 몰려서 페이지 첫 화면에 박는다.

   리틀리는 이모지를 쓰지만 사이트 쪽은 안 쓴다. 정보 구조만 가져오고
   표기는 이 페이지의 말투(검정 바탕·초록 강조·Pretendard)로 맞춘다.
   원본이 화면을 꽉 채우는 굵은 표라 그 인상을 살린다 — 작게 만들면 공지가 아니라 각주가 된다.
   ⚠ 개강일·기수가 박혀 있다. 20기로 넘어가면 여기부터 고칠 것.
   ───────────────────────────────────────────────────────────── */
.off-notice{
  --u:var(--pagew);
  --w:clamp(320px, calc(var(--u) * 1180/1920), 1180px);   /* 표와 박스 공통 폭 */
  padding:clamp(52px, calc(var(--u) * 118/1920), 118px) 0 clamp(24px, calc(var(--u) * 56/1920), 56px);
  text-align:center;
}
/* ⚠ 마스터(합정 현영빌딩)와 베이직(연희동 스페이스독)은 **장소가 다르다.**
     헷갈려 엉뚱한 곳으로 가는 일이 없게, 동네 이름을 앞에 붙이고 눈에 띄게 둔다. */
.off-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;
}
.off-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;
}
.off-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;
}

.nt-news{
  margin-top:clamp(22px, calc(var(--u) * 52/1920), 52px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(7px, calc(var(--u) * 13/1920), 13px);
}
.nt-news .cap{
  font-size:clamp(12px, calc(var(--u) * 18/1920), 18px);
  font-weight:800; letter-spacing:.18em; color:var(--green);
  margin-bottom:clamp(2px, calc(var(--u) * 6/1920), 6px);
}
.nt-news p{
  font-size:clamp(14.5px, calc(var(--u) * 27/1920), 27px);
  font-weight:600; color:var(--white); letter-spacing:-.028em;
  line-height:1.45; max-width:46ch;
  /* 한글은 어절 단위로만 끊는다. balance 는 두 줄이 될 때 길이를 고르게 나눈다 —
     첫 줄이 꽉 차고 둘째 줄에 한 단어만 남는 모양을 막는다. */
  word-break:keep-all; overflow-wrap:break-word; text-wrap:balance;
}
.nt-news p b{ color:var(--green); font-weight:800 }
/* 공지 중 이게 머리기사다. 나머지는 딸린 설명이라 한 급 낮춘다. */
.nt-news .lead-news{
  font-size:clamp(19px, calc(var(--u) * 40/1920), 40px);
  font-weight:800; letter-spacing:-.04em; line-height:1.3;
  margin-bottom:clamp(3px, calc(var(--u) * 8/1920), 8px);
}

/* ── 기수 표 — 이 블록의 주인공 ── */
.nt-open{
  margin-top:clamp(30px, calc(var(--u) * 70/1920), 70px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px, calc(var(--u) * 24/1920), 24px);
}
.nt-open .head{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(10px, calc(var(--u) * 22/1920), 22px); flex-wrap:wrap;
}
.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);
}
.nt-open .head span{
  font-size:clamp(13px, calc(var(--u) * 26/1920), 26px);
  font-weight:700; color:var(--white); letter-spacing:-.028em;
  word-break:keep-all; text-wrap:balance;
}

.nt-table{
  width:var(--w); max-width:calc(100% - 24px);
  border-top:3px solid var(--white); border-bottom:3px solid var(--white);
}
/* ⚠ 개강일이 상담으로 가장 많이 물어보는 항목이다. 시간보다 눈에 먼저 들어와야 한다.
     전에는 「반이름 · 시간 · 개강일」을 한 줄에 뒀는데, 폭이 좁아지면 개강일이 오른쪽 끝으로
     밀려 작게 붙었다(두 페이지가 서로 다르게 접히기까지 했다).
     이제 **개강일을 반 이름 바로 아래**에 두 줄로 고정한다. 시간은 오른쪽에 세로 가운데. */
.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);
}
.nt-row + .nt-row{ border-top:1px solid rgba(253,253,253,.3) }
.nt-row .cls{
  font-size:clamp(16px, calc(var(--u) * 40/1920), 40px);
  font-weight:800; letter-spacing:-.045em; color:var(--white); white-space:nowrap;
  grid-area:cls;
}
.nt-row .time{
  justify-self:end;
  font-size:clamp(16px, calc(var(--u) * 40/1920), 40px);
  font-weight:800; letter-spacing:-.03em; color:var(--white);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  grid-area:time; text-align:right;
}
.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;
}
/* 반마다 남은 날. 스크립트가 넣는다 — 없으면 그냥 안 보인다. */
.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;
}
.nt-row .start .dday.soon{ background:#FF375F; color:#fff }

/* ── 신청·연장 방법 ── */
.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);
}
.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;
}
.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;
}
.nt-how div span{ word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty }

/* ── 버튼 두 개 ── */
.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;
}
.nt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-width:clamp(160px, calc(var(--u) * 290/1920), 290px);
  /* 손가락으로 짚는 자리다. 애플·구글 권장이 44px 이라 그 아래로 안 내려가게 잡는다. */
  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;
  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;
}
.nt-btn.solid{
  background:var(--green); color:#06150A;
  box-shadow:0 6px 20px rgba(122,255,102,.28);
}
/* 테두리만 있는 버튼은 「눌러도 되나」 싶게 보인다. 면을 살짝 깔고 테두리를 또렷하게
   해서 두 번째 버튼도 버튼으로 읽히게 한다. */
.nt-btn.ghost{
  background:rgba(253,253,253,.10); color:var(--white);
  box-shadow:inset 0 0 0 2px var(--white);
}
.nt-btn:hover{ filter:brightness(1.07); transform:translateY(-2px) }
.nt-btn.solid:hover{ box-shadow:0 10px 26px rgba(122,255,102,.4) }
.nt-btn.ghost:hover{ background:var(--white); color:#06150A; box-shadow:none; filter:none }
.nt-btn:active{ transform:translateY(0) scale(.985) }
.nt-btn:focus-visible{ outline:3px solid var(--green); outline-offset:3px }
/* 화살표는 눌렀을 때 어디로 가는지 알려주는 표시다. 마우스를 올리면 살짝 나아간다. */
.nt-btn span{ transition:transform .15s }
.nt-btn:hover span{ transform:translateX(3px) }

@media (prefers-reduced-motion: reduce){
  .nt-btn{ transition:none }
  .nt-btn:hover{ transform:none }
}

/* ── 좁은 화면 ──
   반 이름과 시간을 한 줄에 두면 시간이 눌려 읽히지 않는다.
   개강일을 이름 밑으로 내리고, 버튼은 세로로 쌓아 손가락이 빗나가지 않게 한다. */
@media (max-width:680px){
  /* 공지가 한 화면을 넘기면 그 아래가 있다는 걸 모른 채 나간다.
     정보는 그대로 두고 여백만 깎아 첫 화면 안에 들어오게 한다. */
  .off-notice{ padding:44px 0 18px }
  .nt-news{ margin-top:16px; gap:5px }
  .nt-news .lead-news{ font-size:19px; margin-bottom:1px }
  .nt-news p{ font-size:13.5px; line-height:1.4 }
  .nt-open{ margin-top:20px; gap:11px }
  .nt-how{ margin-top:16px; gap:7px }
  .nt-how div{ padding:11px 13px }
  /* 좁은 화면에서는 두 버튼이 같은 폭으로 화면을 꽉 채우게 둔다.
     폭이 넓어야 엄지로 짚기 쉽고, 두 개가 나란해야 둘 다 버튼으로 읽힌다. */
  .nt-btns{ margin-top:18px; gap:9px }
  .nt-btn{ flex:1 1 0; min-width:0; min-height:52px; padding:14px 10px; font-size:15px }

  .nt-row{
    grid-template-columns:1fr auto; row-gap:2px;
    padding:11px 12px;
  }
  /* 블록 전체가 가운데 정렬이라 반 이름도 가운데로 뜬다.
     바로 밑 개강일은 왼쪽이라 둘이 어긋나 보인다. 왼쪽으로 맞춘다. */
  .nt-row .cls{ font-size:19px; grid-column:1; grid-row:1; text-align:left }
  /* 반 이름과 개강일이 두 줄인데 시간이 첫 줄에만 맞으면 위로 쏠려 보인다.
     두 줄에 걸치게 두고 그 안에서 가운데 정렬한다. */
  .nt-row .time{
    font-size:19px; text-align:right;
    grid-column:2; grid-row:1 / span 2; align-self:center;
  }
  .nt-row .start{ grid-column:1; grid-row:2; text-align:left; font-size:13px }
  .nt-how div{
    font-size:13px; line-height:1.5;
    grid-template-columns:1fr; gap:5px;   /* 라벨을 윗줄로 내린다 */
  }
  .nt-how div b{ justify-self:start }
  .nt-btns{ padding:0 12px; gap:8px }
  .nt-btn{ flex:1; min-width:0; padding:13px 10px; font-size:14px }
  .nt-open .head{ gap:6px }
  .nt-open .head span{ font-size:14px }
}

/* ── 마감 임박 띠 ──
   이 페이지에서 가장 큰 소리를 내는 자리다. 그래서 하나만 둔다.
   초록 일색인 페이지에서 초록으로 소리치면 묻힌다. 빨강으로 바탕을 뒤집고
   캐릭터를 띠 위로 세워 받침처럼 쓴다.
   ⚠ 빨강은 여기서만 쓴다. 다른 데로 번지면 이 띠가 특별해 보이지 않는다.
   ⚠ 캐릭터가 위로 넘치므로 .off-notice 의 padding-top 이 그 자리를 비워둔다. */
.off-notice{ --alert:#E01B00; --alert-ink:#FFF }
/* ⚠ display 를 지정한 요소에는 hidden 속성이 안 먹는다 (UA 의 display:none 보다
   클래스 규칙이 세다). 이 한 줄이 없으면 개강일이 지나 스크립트가 hidden 을
   그대로 둬도 띠가 계속 떠서 「마감 임박」이 거짓말이 된다.
   2026-08-23 실제로 그렇게 떠 있었다 — 19기 개강 다음날인데 D-day 는 빈칸. */
.off-notice .nt-urgent[hidden]{ display:none }
.off-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);
}
/* WebP 를 먼저 주려고 <picture> 로 감쌌다. 그대로 두면 <picture> 가 flex 자식이 되어
   아래 음수 여백이 안 먹는다. display:contents 로 감싼 것을 없는 셈 치면
   .face 가 다시 직접 자식이 되어 기존 배치가 그대로 산다. */
.nt-urgent picture{ display:contents }
/* 캐릭터 — 띠 위로 솟는다. 안에 얌전히 넣으면 아이콘이 되고,
   넘치게 두면 띠가 캐릭터를 받치는 받침이 된다. */
.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));
}
.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);
}
.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;
}
.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;
}
.nt-urgent strong b{ font-weight:800; color:var(--green) }   /* 브랜드 초록은 이 한 단어에만 */
.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){ .nt-urgent .flare{ animation:none } }

/* 좁은 화면에서도 캐릭터가 띠 위로 솟게 둔다. 다만 옆으로 나란히 두면
   글자가 눌리므로 캐릭터를 윗줄에 세우고 글은 아래로 내린다. */
@media (max-width:680px){
  .off-notice .nt-urgent{
    flex-direction:column; align-items:center;
    padding:0 14px 13px; gap:6px; margin-bottom:18px;
    border-radius:16px;
  }
  .nt-urgent .face{
    height:118px; margin-top:-58px; margin-bottom:-2px;
    align-self:center;
  }
  .nt-urgent .say{ gap:5px; padding-bottom:0 }
  .nt-urgent strong{ font-size:16.5px; width:100% }
  .nt-urgent .flare{ font-size:11.5px }
  .nt-urgent .dday{ font-size:12px }
}

/* ── 페이지 맨 아래 버튼 한 벌 ─────────────────────────
   위쪽 버튼은 한참 위에 있어서, 끝까지 읽은 사람이 다시 올라가야 했다. */
.off-endcta{
  padding:clamp(48px, calc(var(--u) * 120/1920), 120px) var(--gutter)
          clamp(64px, calc(var(--u) * 140/1920), 140px);
  background:#000;
}
.off-endcta .nt-btns{ margin-top:0 }

/* ── 수강신청 단추 살리기 (2026-08-24, 왕초보반과 같은 결) ── */
.nt-btn.solid{ position:relative; overflow:hidden; animation:fv-breathe2 2.8s ease-in-out infinite }
@keyframes fv-breathe2{
  0%,100%{ box-shadow:0 6px 20px rgba(122,255,102,.28) }
  50%{ box-shadow:0 6px 28px 6px rgba(122,255,102,.45) } }
.nt-btn.solid::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.45) 50%, transparent 68%);
  transform:translateX(-130%); animation:fv-shine2 3.6s ease 1.4s infinite }
@keyframes fv-shine2{ 0%{ transform:translateX(-130%) } 45%,100%{ transform:translateX(130%) } }
@media (prefers-reduced-motion: reduce){ .nt-btn.solid,.nt-btn.solid::after{ animation:none } }