/* ─────────────────────────────────────────────────────────────
   모바일 — 피그마 「홈 구성 - 모바일」 3402:231334 (360 × 6732)
   모든 수치를 360 기준 비율로 환산한다.
   --m : 360 기준 단위 (화면 폭)
   ───────────────────────────────────────────────────────────── */
@media (max-width:820px){

  :root{ --m:100vw; --gutter:0px }   /* 모바일은 피그마 360 그대로 */

  /* ── 햄버거 메뉴 — 피그마 3400:4375 ───────────────────────
     배경 #0D0D0D · 아래 테두리 0.786 #1D1D1D
     세로 중앙정렬 · 간격 12.576 · 패딩 14.15/18.87/14.93
     Pretendard Bold 11px / 17.963 · 활성 #2CFF05 그 외 #D2D2D2  */
  .gnb{
    position:fixed;
    left:0;right:0;
    top:calc(var(--m) * 45.65/360);
    display:flex;flex-direction:column;align-items:center;
    gap:calc(var(--m) * 12.576/360);
    margin-left:0;
    background:#0D0D0D;
    border-bottom:calc(var(--m) * 0.786/360) solid #1D1D1D;
    padding:calc(var(--m) * 14.148/360) calc(var(--m) * 18.865/360) calc(var(--m) * 14.934/360);
    transform:translateY(-115%);
    transition:transform .28s ease;
    z-index:99;
  }
  .gnb[data-open="true"]{ transform:translateY(0) }
  .gnb a{
    padding:calc(var(--m) * 5/360) 0;
    font-size:calc(var(--m) * 11/360);
    font-weight:700;line-height:1.633;color:#D2D2D2;
    min-height:34px;display:flex;align-items:center;
  }
  .gnb a[aria-current="page"]{ color:var(--green) }


  /* ── 헤더 360x45.65 ──────────────────────────────────────
     로고 x15.34 y17.83 101.79x9.83 · 메뉴 x320.33 23.95
     즉시상담 x233 y13 75x22                                */
  .site-header{ border-bottom-width:calc(var(--m) * 0.786/360) }
  .hd{
    height:calc(var(--m) * 44.864/360);   /* 테두리 0.786 포함 45.65 */
    min-height:0; box-sizing:border-box;
    padding-inline:calc(var(--m) * 15.34/360);
    gap:calc(var(--m) * 8/360);
  }
  .hd-logo img,
  .hd-logo svg.tlab-logo{ width:calc(var(--m) * 101.79/360); min-width:88px }
  .btn-cta{                            /* 시안 75x22 -> 사용자 결정 높이 32 (B-03) */
    height:calc(var(--m) * 32/360);
    padding:0 calc(var(--m) * 12/360);
    font-size:calc(var(--m) * 11/360);
    line-height:1;
    margin-left:auto;
  }
  .nav-toggle{ width:calc(var(--m) * 23.95/360); min-width:30px; font-size:17px }

  /* ══ 히어로 ══ 워드마크 박스 y70.21 223.04x21.54
     카드 280x280 (y120 / y436, 간격 36) · 파트너 y739
     헤더 45.65 + 24.56 = 70.21                              */
  .hero{
    padding-top:calc(var(--m) * 24.56/360);
    padding-bottom:calc(var(--m) * 22/360);
  }
  .hero-mark{ margin-bottom:calc(var(--m) * 28.29/360) }
  .hero-mark img,
  .hero-mark svg.tlab-logo{ width:calc(var(--m) * 223.04/360); min-width:0 }
  .hero-grid{
    width:calc(var(--m) * 280/360);
    grid-template-columns:1fr;
    gap:calc(var(--m) * 36/360);
  }
  .hero-card{ aspect-ratio:1/1 }

  /* ══ 파트너 ══ x19.31 y739 321.19 (하단 856 -> 프로필 863) */
  .partners{ padding:0 0 calc(var(--m) * 13.37/360) }   /* 그룹 117 - 로고 110.63 + 7 */
  .partners img{ width:calc(var(--m) * 321.19/360); max-width:none }
  .partners p{                       /* 피그마 모바일에는 없는 설명문 — 검색용으로만 남긴다 */
    position:absolute;width:1px;height:1px;margin:0;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    font-size:12px;
  }

  /* ══ 감독 프로필 ══ 피그마 3457:1931 (y863, 360×411.19)
     안쪽 초록 패널은 360×347.453. 아래 % 는 그 패널 기준.
     사진 173.727 (마스크) · 글은 x53.89%~ 부터
     DIRECTOR’S TLAB 35.739 자간 -1.0722 · PROFILE TLAB 53.615 자간 -2.1446
     정주 감독 ExtraBold 11.25 · (MV…) Bold 7.5 · 현) BOWIE Bold 7.5
     주요 이력 ExtraBold 8.438 · 이력 SemiBold 7.125 (11줄)
     ※ cqi 를 쓰면 폭 따라 글자가 커져 글상자를 넘는다. 360 고정 환산으로 간다. */
  .profile{
    margin-top:0;
    aspect-ratio:360/411.19;
    container-type:normal;
    background:#000;        /* 데스크탑은 전체가 초록이지만 모바일은 패널(347.45)만 초록 */
  }
  /* 초록 패널 : 별도 요소가 없어 .profile 의 가상요소로 깐다 */
  .profile::before{
    content:"";position:absolute;left:0;top:0;z-index:0;
    width:100%;height:calc(347.453/411.19 * 100%);
    background:var(--green);
  }
  .profile .photo,.profile .copy{ z-index:1 }
  .profile .photo{
    position:absolute;left:0;top:0;
    width:calc(173.727/360 * 100%);
    height:calc(347.453/411.19 * 100%);
    object-fit:cover;object-position:center 20%;
  }
  .profile .copy{
    position:absolute;
    left:calc(53.89/100 * 100%);
    top:0;width:calc(46.11/100 * 100%);
    height:100%;            /* 자식들의 top:% 가 411.19 기준으로 풀리게 */
    padding:0;
  }
  .profile .copy > *{ position:absolute; margin:0; white-space:nowrap }
  .profile .copy > h2{ position:static }   /* .copy > * 규칙보다 세게 */
  /* TLAB 이라 SVG 아웃라인. 잉크폭 = viewBox폭/1000 x 글자크기
     DIRECTOR’S 3942/1000 x 35.739 = 140.9 · PROFILE 2661/1000 x 53.615 = 142.7 */
  .profile h2 .l1,
  .profile h2 .l2{ position:absolute;left:0;display:block;line-height:0 }
  /* 피그마 좌표는 글상자 기준(DIRECTOR’S 30.2~81.2 · PROFILE 59.4~135.4)이고
     내 SVG 는 잉크라 상자 안에서 가운데로 내려야 겹치지 않는다.
     DIRECTOR’S 잉크 32.9 -> 30.2+(51-32.9)/2 = 39.3
     PROFILE   잉크 45.7 -> 59.4+(76-45.7)/2 = 74.6 */
  .profile h2 .l1{ top:calc(39.3/411.19 * 100%); width:calc(var(--m) * 140.9/360) }
  .profile h2 .l2{ top:calc(74.6/411.19 * 100%); width:calc(var(--m) * 142.7/360); margin-top:0 }
  .profile h2 svg.tlab{ display:block;width:100%;height:auto;color:#000;fill:currentColor }
  .profile .name{ top:calc(135.4/411.19 * 100%); margin-top:0 }
  .profile .who { font-size:calc(var(--m) * 11.25/360); font-weight:800; color:#000;
                  letter-spacing:calc(var(--m) * -0.225/360) }
  .profile .role{ font-size:calc(var(--m) * 7.5/360); font-weight:700; margin-left:.4em }
  .profile .org { top:calc(150.5/411.19 * 100%); margin-top:0;
                  font-size:calc(var(--m) * 7.5/360); font-weight:700; color:#000 }
  .profile .rule{ top:calc(161.3/411.19 * 100%); left:0; width:calc(95.24/100 * 100%);
                  height:1px; margin-top:0; background:#000 }
  .profile h3{ top:calc(170/411.19 * 100%); margin-top:0;
               font-size:calc(var(--m) * 8.438/360); font-weight:800; color:#000 }
  /* ⚠ 이력이 12줄로 늘면서 마지막 줄이 아래 톱니(.fold.bot, z-index 4)에 8~10px 가려졌다.
     피그마 좌표(195.6)는 줄 수가 적던 때 값이다. 톱니를 건드리면 「패널을 물어뜯는」
     그래픽 의도가 깨지므로 목록만 위로 올린다. 제목(h3)도 같은 만큼 올려 간격을 지킨다. 360~430 전 폭 검증. */
  .profile ul{ top:calc(185/411.19 * 100%); margin-top:0; padding:0; list-style:none }
  .profile li{ font-size:calc(var(--m) * 7.125/360); font-weight:600; color:#000;
               line-height:calc(var(--m) * 11.96/360);
               letter-spacing:calc(var(--m) * -0.2137/360); white-space:nowrap }
  /* 지그재그 : 피그마 위 y872(=프로필+9) · 아래 y1226.19~1274(하단 flush)
     -5.7% 로 두면 아래 톱니가 통째로 검정 위에 얹혀 안 보였다 */
  /* 지그재그 톱니는 초록/사진 패널을 "물어뜯는" 그래픽이라 패널과 겹쳐야 보인다.
     피그마(프로필 기준): 패널 32.81~380.26, 위 톱니 9~56.44, 아래 톱니 363.19~411
       → 위는 패널 위로 23.81 튀어나오고 아래는 패널 아래로 30.74 넘어간다.
     이 빌드는 패널을 0~347.45 에 두었으므로 그만큼 되돌려 맞춘다.
     (bottom:0 으로 두면 톱니가 전부 검정 위에 얹혀 평평해 보였다) */
  .profile .fold.top{ top:calc(-23.81/411.19 * 100%) }
  .profile .fold.bot{ bottom:calc(33/411.19 * 100%) }

  /* ══ 수상 ══ y1274.19 360x555 (트로피 478.87 · 월계관 y37.95)
     프로필 하단에 딱 붙는다 — 데스크탑 margin-top 을 지운다 */
  .awards{ margin-top:0; aspect-ratio:360/555; padding-bottom:0 }
  .awards .trophy{
    position:absolute;left:0;top:0;
    width:100%;height:calc(478.87/555 * 100%);object-fit:cover;
  }
  .awards .laurels{
    position:absolute;
    left:calc(20.19/360 * 100%);
    top:calc(37.95/555 * 100%);
    width:calc(313.56/360 * 100%);
  }
  .awards-lede{
    position:absolute;
    top:calc(384/555 * 100%);
    padding-inline:calc(var(--m) * 20/360);
  }
  .awards-lede{ text-align:center }
  .awards-lede .stars{ line-height:0; margin:0 0 calc(var(--m) * 8/360) }
  .awards-lede .stars svg.tlab-logo{ display:block; width:calc(var(--m) * 128/360);
                           margin-inline:auto; height:auto; color:#777 }
  .awards-lede .kicker{ font-size:calc(var(--m) * 13/360) }
  .awards-lede .quote{
    margin-top:calc(var(--m) * 20/360);
    font-size:calc(var(--m) * 13/360);
  }
  .awards-lede h2{ margin-top:calc(var(--m) * 10/360) }

  /* ══ 수강생 작품 ══ 피그마 3457:1884 y1829.19 359.95x924.94
     스틸 179.93x102.77 2장 (x0 / x180.02)
     배너 폭 273.5~275.8 · 높이 83.19 / 74.25 / 61.20 / 74.25
       -> 회전된 벡터라 스틸과 겹치는 양이 작품마다 다르다
     크레딧 x33.68 h7 (=피그마 3.94px) — 읽을 수 없어 8px 로 올린다
     작품4 는 아이폰(201.68)이 스틸(160.14)보다 16.09 위로 올라온다 */
  .works{ padding-top:0; padding-bottom:calc(var(--m) * 27.4/360) }
  .work{ margin-bottom:calc(var(--m) * 43.93/360) }
  .work:nth-of-type(3){ margin-bottom:calc(var(--m) * 16.95/360) }
  .work:last-of-type{ margin-bottom:0 }
  .work .stills.two{ gap:calc(var(--m) * 0.09/360) }
  .work .stills.two img{ aspect-ratio:179.93/102.77; height:auto }
  .work .banner{
    width:calc(273.52/360 * 100%);
    margin-inline:auto;
    padding:calc(var(--m) * 9/360) calc(var(--m) * 8/360) calc(var(--m) * 10/360);
    transform:rotate(-1.15deg);
  }
  .work:nth-of-type(2) .banner{ margin-top:calc(var(--m) * -9.95/360) }
  .work:nth-of-type(3) .banner{ margin-top:calc(var(--m) * -12.23/360) }
  .work:nth-of-type(4) .banner{ margin-top:calc(var(--m) * -2.92/360) }
  .work:nth-of-type(5) .banner{ margin-top:calc(var(--m) * 8.6/360) }
  .work .banner h3 img,
  .work .banner h3 svg.tlab{ max-width:calc(var(--m) * 230/360) }
  .work .wsub{
    margin-top:calc(var(--m) * 5/360);
    font-size:calc(var(--m) * 8.5/360);
    line-height:1.4988;                  /* 피그마 부제 박스 12.74 */
  }
  /* 배너 아래 여백 + 한 줄 유지.
     360 에서는 8px 로도 들어가지만(290<293) 폰에서 Pretendard 가 안 실리면
     더 넓은 기본 서체로 떨어져 두 줄이 된다. 폭을 넓히고 글자를 줄여 여유를 둔다. */
  .work .credit{
    margin:calc(var(--m) * 12/360) 0 0 calc(20/360 * 100%);
    width:calc(320/360 * 100%);
    font-size:calc(var(--m) * 7.2/360);
    line-height:1.35;
  }
  .work:last-of-type .credit{ margin-top:calc(var(--m) * 9.61/360) }
  .work .stills.phone{
    grid-template-columns:repeat(4,1fr);
    padding-top:calc(var(--m) * 16.09/360);
  }
  .work .stills.phone .s3{ grid-column:4 }
  .work .stills.phone .ph{
    display:block;position:absolute;
    left:calc(172.75/360 * 100%);
    width:calc(105.52/360 * 100%);top:0;
  }
  .work .stills.phone .s1,
  .work .stills.phone .s2,
  .work .stills.phone .s3{ aspect-ratio:89.8/160.14 }

  /* ══ 지그재그 ══ 359.63x47.44 */
  .zig{ aspect-ratio:359.63/47.44 }
  .profile .fold{ aspect-ratio:360/47.81 }

  /* ══ 감독 전문성 ══ 제목 박스 x55.5 y2854.53 247.33x54
     본문 y2922.875 251.63x125 — 9px / 줄간격 17.815 / 자간 -0.27px
     7줄(3+빈줄+3) x 17.815 = 124.7 = 피그마 높이 125
     제목 폭은 데스크탑 잉크폭 공식(1235.5/1920)이 360 에서 그대로 맞는다 */
  .expertise{ padding:calc(var(--m) * 53.23/360) 0 0 }
  .expertise .wrap{ padding-inline:calc(var(--m) * 55.5/360) }
  .expertise h2{ line-height:0; margin-bottom:0 }
  .expertise h2 svg.tlab,
  .expertise h2 img{ max-width:none }
  .expertise p{
    margin-top:calc(var(--m) * 22.85/360);
    width:max-content; max-width:calc(var(--m) * 300/360);
    font-size:calc(var(--m) * 9/360);
    line-height:calc(var(--m) * 17.815/360);
    letter-spacing:calc(var(--m) * -0.27/360);
  }
  .expertise p + p{ margin-top:calc(var(--m) * 17.815/360) }

  /* ══ 학생작 영상 ══ x31.875 y3056.19 296.25x473.25
     캡션 박스 y3531.31 114x18 */
  .showreel{ padding:calc(var(--m) * 8.315/360) 0 0 }
  .showreel .wrap{ padding-inline:calc(var(--m) * 31.875/360) }
  .showreel video{ aspect-ratio:296.25/473.25 }
  .showreel figcaption{
    font-size:calc(var(--m) * 11/360);
    margin-top:calc(var(--m) * 1.87/360);
    line-height:1.636; letter-spacing:-.03em;
  }

  /* ══ FILM VISUAL ART ══ 제목 박스 x55.5 y3569.56 228.78x74.35
     -> 잉크 폭은 데스크탑 공식(993.5/1920 x 360 = 186.3) 그대로가 정답.
     통계 x33.19 y3660.31 293.62x48.92 · 워드마크 x33.19 y3681.28 97.87x9.45 */
  .fva-seoul{ padding:calc(var(--m) * 20.55/360) 0 0 }
  .fva-seoul h2{ padding-left:calc(var(--m) * 55.5/360) }
  .fva-seoul h2 svg.tlab,
  .fva-seoul h2 img{ max-width:none }
  .stats-row{
    margin:calc(var(--m) * 20.9/360) 0 0 calc(var(--m) * 33.19/360);
    width:calc(var(--m) * 293.62/360);
    aspect-ratio:293.62/48.92;
  }
  .stats-row .stats-wordmark,
  .stats-row svg.stats-wordmark{
    display:block;
    top:calc(20.97/48.92 * 100%);
    width:calc(97.87/293.62 * 100%);
  }
  /* 통계 — 모바일은 그룹 3개가 293.62 안에 들어간다(데스크탑 1566 의 18.75%) */
  .stats-row .s-trophies{ left:calc(122.6/293.62 * 100%); width:calc(44.06/293.62 * 100%) }
  .stats-row .s-years   { left:calc(179.55/293.62 * 100%); width:calc(40.73/293.62 * 100%) }
  .stats-row .s-grads   { left:calc(237.55/293.62 * 100%); width:calc(56.03/293.62 * 100%) }
  .rating .score{ width:calc(var(--m) * 44.06/360) }

  /* ══ 차별점 ══ 제목 박스 y3811.13 293x69 · 서브 y3880.31 167x12
     카드 x47.69 265x148 (y3915 / 4075 / 4234 -> 간격 12)
     제목 잉크폭 = 데스크탑 공식(1542/1920 x 360 = 289.1) */
  .features{ padding:calc(var(--m) * 54.43/360) 0 calc(var(--m) * 14.245/360) }
  .section-head h2 svg.tlab,
  .section-head h2 img{ max-width:none }
  .features .section-head{ margin-bottom:calc(var(--m) * 22.69/360) }
  .section-head .sub{
    margin-top:calc(var(--m) * 23.8/360);   /* 제목 잉크 하단 -> 서브 (박스 여백 23.6 포함) */
    font-size:calc(var(--m) * 9/360); line-height:1.3333;
  }
  .feature-list{
    grid-template-columns:1fr;
    width:calc(var(--m) * 265/360);
    gap:calc(var(--m) * 12/360);
    padding-inline:0;
  }
  .feature{
    height:calc(var(--m) * 148/360);
    padding:calc(var(--m) * 24/360) calc(var(--m) * 19/360);
    border-width:calc(var(--m) * 1.5/360);
    border-radius:calc(var(--m) * 11.24/360);
  }
  .feature .num{ font-size:calc(var(--m) * 19.7/360) }
  .feature h3{ margin-top:calc(var(--m) * 10/360); font-size:calc(var(--m) * 13.13/360) }
  .feature p:last-child{ margin-top:calc(var(--m) * 8/360); font-size:calc(var(--m) * 9.85/360); line-height:1.619 }

  /* ══ 후기 ══ 제목 박스 y4420 267x69 · REVIEWS y4487 46x12
     평점 x87.47 y4516 184.86x47.97 · 카드 x48 265x329.44 (간격 33.06)
     전체보기 x90 y5686 179.15x40.8 */
  .reviews{ padding:calc(var(--m) * 22.8/360) 0 0 }
  .reviews .section-head{ margin-bottom:calc(var(--m) * 17.03/360) }
  .reviews .section-head .sub{ margin-top:calc(var(--m) * 21.8/360) }
  .rating{
    box-sizing:border-box;
    width:calc(var(--m) * 184.86/360);
    height:calc(var(--m) * 47.97/360);
    margin-inline:auto;
    gap:calc(var(--m) * 9.201/360);
    padding:calc(var(--m) * 9.426/360) calc(var(--m) * 18.196/360);
    border:calc(var(--m) * 0.657/360) solid #1D1D1D;
    border-radius:calc(var(--m) * 10.515/360);
    background:#161616;
  }
  .rating .score{
    font-size:calc(var(--m) * 27.602/360);
    line-height:1;
  }
  .rating > div{ width:calc(var(--m) * 93.271/360) }
  .rating .stars{
    font-size:calc(var(--m) * 8.544/360);
    line-height:calc(var(--m) * 13.67/360);
    letter-spacing:calc(var(--m) * 1.3144/360);
  }
  .rating .meta{
    margin-top:calc(var(--m) * 1.972/360);
    font-size:calc(var(--m) * 8.215/360);
    line-height:calc(var(--m) * 13.144/360);
  }
  .review-list{
    grid-template-columns:1fr;
    width:calc(var(--m) * 265/360);
    gap:calc(var(--m) * 33.06/360);
    padding-inline:0;
    margin-top:calc(var(--m) * 32.43/360);
  }
  .review{
    box-sizing:border-box;
    height:calc(var(--m) * 329.44/360);   /* 피그마 고정높이 + overflow-clip */
    overflow:hidden;
    border:calc(var(--m) * 0.703/360) solid #1D1D1D;
    border-radius:calc(var(--m) * 9.836/360);
    background:#161616;
    padding:0;                       /* 위쪽 패딩이 사진 앞 여백으로 보였다 */
  }
  .review img{ display:block; border-radius:calc(var(--m) * 9.836/360)
               calc(var(--m) * 9.836/360) 0 0 }
  .review img{ aspect-ratio:262.19/197.369; height:auto }   /* 테두리·패딩 0.703 안쪽 폭 */
  .rv-body{ padding:calc(var(--m) * 11.241/360) calc(var(--m) * 12.646/360) }
  .review .stars{
    font-size:calc(var(--m) * 9.133/360);
    line-height:calc(var(--m) * 14.614/360);
    letter-spacing:calc(var(--m) * 1.4052/360);
  }
  .review blockquote{
    margin-top:calc(var(--m) * 5.621/360);
    font-size:calc(var(--m) * 10/360);
    line-height:calc(var(--m) * 16.862/360);
    height:calc(var(--m) * 67.447/360);            /* 피그마 4줄 고정 */
    overflow:hidden;
  }
  .review figcaption{
    /* 피그마 Figcaption 은 y99.31 에서 바로 시작하고 7.026 은 상자 안쪽 여백이다.
       margin 으로 주면 본문이 5.2px 넘쳐 카드 아래가 잘렸다 */
    margin-top:0;
    padding-top:calc(var(--m) * 7.026/360);
    font-size:calc(var(--m) * 8.431/360);
    line-height:calc(var(--m) * 13.489/360);
  }
  .reviews .more{
    margin-top:calc(var(--m) * 33.56/360);
    width:calc(var(--m) * 179.15/360);
    height:calc(var(--m) * 40.8/360);
    font-size:calc(var(--m) * 11/360);
  }

  /* ══ FAQ ══ 제목 박스 y5792 184x69 · 목록 x25 y5875 310x262
     행 310x22 · 간격 8 · 아래 테두리 0.369 #1D1D1D
     질문 Pretendard Bold 12px (박스 안 4.38 내려앉음) · + 8.25px */
  .faq{ padding:calc(var(--m) * 65.2/360) 0 0 }
  .faq .section-head{ margin-bottom:calc(var(--m) * 40.5/360) }
  .faq-list{
    width:calc(var(--m) * 310/360); max-width:none;
    display:flex;flex-direction:column;
    gap:calc(var(--m) * 8/360);
  }
  .faq details{ box-sizing:border-box;height:calc(var(--m) * 40/360);
                border-bottom:calc(var(--m) * 0.369/360) solid #1D1D1D }
  .faq details[open]{ height:auto }
  .faq summary{                        /* 시안 22 -> 사용자 결정 40 (B-04) */
    box-sizing:border-box;
    height:calc(var(--m) * 40/360);
    min-height:0;
    padding:0;
    align-items:center;
    font-size:calc(var(--m) * 12/360);
    line-height:1.25;
  }
  .faq summary::after{ font-size:calc(var(--m) * 11/360); line-height:1 }
  .faq details[open] summary{ height:auto }
  .faq .answer{ padding:calc(var(--m) * 4/360) 0 calc(var(--m) * 10/360); font-size:calc(var(--m) * 10.5/360) }

  /* ══ 촬영현장 사진 ══ y6177 359.63x233.06 (FAQ 하단 6137 -> 40) */
  .bts{ padding-top:calc(var(--m) * 40/360) }

  /* ══ CTA ══ 배너 y6423 360x136 (사진은 위로 24.79 넘쳐 흐른다)
     NEW SEASON OPEN 박스 y6457.21 225x39 — TLAB 36px 이므로
       잉크폭 = 6151.3/1000 x 36 = 221.4 (데스크탑 공식의 2배)
     카카오 문구 y6490.21 212x36 — 16px / 35.629 / -0.48px
     Contact y6530.21 84x30.25 — TLAB 13.5px · 패딩 5.625/15 · radius 47.25 */
  /* 시안 수정됨 : 배너가 136 -> 176 로 커져 버튼이 안 잘린다 (3457:2011)
     Contact 는 배너 기준 y109 (절대 6534, 배너 6425) */
  .cta{
    margin-top:calc(var(--m) * 14.94/360);
    aspect-ratio:360/176;
    padding:0 0 calc(var(--m) * 8/360);
  }
  .cta .cta-bg{
    position:absolute;
    left:calc(-0.56/360 * 100%);
    top:calc(-24.79/176 * 100%);
    width:calc(365.333/360 * 100%);
    height:calc(205.5/176 * 100%);
    max-width:none;object-fit:cover;
  }
  .cta h2{ padding-top:calc(var(--m) * 32.2/360) }
  .cta h2 svg.tlab,
  .cta h2 img{ width:calc(var(--m) * 221.4/360); max-width:none }
  .cta p{
    margin-top:calc(var(--m) * 2.5/360);
    font-size:calc(var(--m) * 16/360);
    line-height:calc(var(--m) * 35.629/360);
    letter-spacing:calc(var(--m) * -0.48/360);
  }
  .cta-btn{
    margin-top:calc(var(--m) * 8/360);
    width:calc(var(--m) * 84/360);
    height:calc(var(--m) * 30.25/360);
    font-size:calc(var(--m) * 13.5/360);
    border-radius:calc(var(--m) * 47.25/360);
  }

  /* ══ 푸터 ══ 구분선 x23 y6648 315x1 · 본문 y6659 315x42
     피그마는 42(약 3줄)이지만 사업자 정보를 다 담으면 6px 까지 내려가
     읽을 수 없다. 8px/13.5 로 두고 폭·자리만 피그마에 맞춘다. */
  .site-footer{ padding:0 0 calc(var(--m) * 31/360) }
  .site-footer .ft-inner{ width:calc(var(--m) * 315/360) }
  .ft-rule{ margin:calc(var(--m) * 89/360) 0 calc(var(--m) * 11/360) }
  .site-footer p{
    font-size:calc(var(--m) * 7/360);
    line-height:calc(var(--m) * 12/360);
  }
  .ft-logo{ width:calc(var(--m) * 101.79/360) }
}

/* ─────────────────────────────────────────────────────────────
   피바뉴스 모바일 — 피그마 3462:154568 (360 × 2488)
   시리즈 카드 x18 w324.08 · 사진 324x216 (위)
   키커 85.77x32.2 · 제목 40.25 · 설명 90.56 · 메타 14.09
   더보기 64.4x32.2 · 푸터 x23 w315
   2뎁스(166545 등) 글 카드는 세로 1열
   ───────────────────────────────────────────────────────────── */
@media (max-width:820px){

  .news-index{ padding:calc(var(--m) * 31/360) 0 calc(var(--m) * 40/360) }
  .series-row,
  .series-head{
    grid-template-columns:1fr;
    width:calc(var(--m) * 324.08/360);
    margin-inline:auto;
    gap:calc(var(--m) * 8/360);
    padding-block:calc(var(--m) * 20/360);
  }
  .series-photo{ order:1 }
  .series-copy{ order:2 }
  .series-photo img{ aspect-ratio:324.08/216 }

  .series-kicker{
    font-size:calc(var(--m) * 22/360);
    margin-bottom:calc(var(--m) * 8/360);
  }
  .series-kicker.img img{ width:calc(var(--m) * 85.77/360); min-width:0 }
  .series-copy h1,
  .series-copy h2{ font-size:calc(var(--m) * 26/360); line-height:1.55 }
  .series-copy h2 a{ padding-block:calc(var(--m) * 2/360) }
  .series-desc{
    margin-top:calc(var(--m) * 8/360);
    font-size:calc(var(--m) * 12/360); line-height:1.5;
  }
  .series-meta{
    margin-top:calc(var(--m) * 8/360);
    gap:calc(var(--m) * 5.4/360);
    font-size:12px !important;
  }
  .btn-more{
    margin-top:calc(var(--m) * 22/360);
    font-size:calc(var(--m) * 13/360);
    padding:calc(var(--m) * 6/360) calc(var(--m) * 17/360);
    min-height:40px;
  }

  /* 2뎁스 — 글 카드 세로 1열 */
  .back-link{
    padding:calc(var(--m) * 20/360) calc(var(--m) * 18/360) 0;
    font-size:calc(var(--m) * 13/360);
  }
  .back-link span{
    width:calc(var(--m) * 26/360);height:calc(var(--m) * 26/360);
    min-width:26px;min-height:26px;font-size:calc(var(--m) * 17/360);
  }
  .series-head{ padding-top:calc(var(--m) * 14/360) }
  .post-grid{
    grid-template-columns:1fr;
    gap:calc(var(--m) * 26/360);
    padding:calc(var(--m) * 26/360) calc(var(--m) * 18/360) calc(var(--m) * 40/360);
  }
  .post-card img{ aspect-ratio:324.08/216 }
  .post-card h2{
    margin-top:calc(var(--m) * 10/360);
    font-size:calc(var(--m) * 14/360);
  }
  .post-sub{ margin-top:calc(var(--m) * 5/360); font-size:calc(var(--m) * 11.5/360) }
  .likes{ font-size:11.5px !important }

  /* 3뎁스 — 글 상세 */
  .post-detail{
    width:auto;
    margin:calc(var(--m) * 14/360) calc(var(--m) * 18/360) 0;
  }
  .post-body{ padding:calc(var(--m) * 16/360) calc(var(--m) * 16/360) calc(var(--m) * 26/360) }
  .post-eyebrow{ font-size:calc(var(--m) * 12/360) }
  .post-detail h1{ font-size:calc(var(--m) * 20/360); margin-top:calc(var(--m) * 6/360) }
  .post-detail .post-sub,
  .post-detail .post-topic{ font-size:calc(var(--m) * 12/360) }
  .post-meta{ font-size:12px !important }
  .post-gallery{ gap:calc(var(--m) * 10/360) }
  .post-nav{ padding:calc(var(--m) * 26/360) 16px calc(var(--m) * 44/360) }
}

/* ── 커리큘럼 모바일 (3457:153673) ────────────────────────── */
@media (max-width:820px){
  .passes{ padding:calc(var(--m) * 30/360) 0 calc(var(--m) * 20/360) }
  .page-title{ font-size:calc(var(--m) * 40/360) }
  .page-sub{ margin-top:calc(var(--m) * 10/360); font-size:calc(var(--m) * 12/360) }
  .pass-grid{
    grid-template-columns:1fr;
    width:calc(var(--m) * 310/360);margin-inline:auto;
    gap:calc(var(--m) * 12/360);margin-top:calc(var(--m) * 22/360);
  }
  .pass{ padding:calc(var(--m) * 18/360) }
  .pass h2{ font-size:calc(var(--m) * 26/360) }
  .pass li{ font-size:calc(var(--m) * 11.5/360) }

  .class-feature{ padding:calc(var(--m) * 30/360) 0 }
  .cf-title{ font-size:calc(var(--m) * 30/360); margin-bottom:calc(var(--m) * 20/360) }
  .step{ padding:calc(var(--m) * 18/360) }
  .step-num{ font-size:calc(var(--m) * 24/360) }
  .step h3{ font-size:calc(var(--m) * 14/360) }
  .step-body p:last-child{ font-size:calc(var(--m) * 11/360) }
  .weeks{ font-size:calc(var(--m) * 12/360) }

  .special{ padding:calc(var(--m) * 30/360) 0 }
  .badge{ font-size:calc(var(--m) * 22/360) }
  .special h2{ font-size:calc(var(--m) * 15/360) }
  .special p{ font-size:calc(var(--m) * 11/360) }
  .ai-flow li{ font-size:calc(var(--m) * 11/360); padding:calc(var(--m) * 9/360) }

  .curriculum{ padding:calc(var(--m) * 30/360) 0 }
  .cur-title{ font-size:calc(var(--m) * 30/360) }
  .cur-grid{ margin-top:calc(var(--m) * 20/360); gap:calc(var(--m) * 10/360) }
  .cur-list li{ font-size:calc(var(--m) * 11.5/360); padding:calc(var(--m) * 9/360) calc(var(--m) * 12/360) }
  .cur-badge{ font-size:calc(var(--m) * 15/360) }
  .portfolio-note{ padding:calc(var(--m) * 22/360); margin-top:calc(var(--m) * 26/360) }
  .portfolio-note p{ font-size:calc(var(--m) * 14/360) }
}

/* ── 하위 페이지 공통 모바일 (온라인·오프라인·작품) ───────── */
@media (max-width:820px){
  .sub-hero{ padding:calc(var(--m) * 34/360) 0 calc(var(--m) * 20/360) }
  .sub-hero h1{ font-size:calc(var(--m) * 26/360) }
  .sub-hero .lede{ margin-top:calc(var(--m) * 14/360); font-size:calc(var(--m) * 12/360) }
  .eyebrow-line{ font-size:calc(var(--m) * 11/360); margin-bottom:calc(var(--m) * 12/360) }
  .btn-primary,.btn-ghost{ font-size:calc(var(--m) * 12.5/360); padding:.8em 1.6em }
  .sec-title{ font-size:calc(var(--m) * 19/360); margin-bottom:calc(var(--m) * 16/360) }
  .course-card{ padding:calc(var(--m) * 18/360); gap:calc(var(--m) * 16/360) }
  .course-info h2{ font-size:calc(var(--m) * 16/360) }
  .course-meta > div{ font-size:calc(var(--m) * 12/360) }
  .price-now{ font-size:calc(var(--m) * 28/360) }
  .why-grid article{ padding:calc(var(--m) * 18/360) }
  .why-grid h3{ font-size:calc(var(--m) * 14/360) }
  .why-grid p{ font-size:calc(var(--m) * 11.5/360) }
  .also-lede{ font-size:calc(var(--m) * 12/360) }
  .yt-grid,.yt-list{ gap:calc(var(--m) * 12/360) }
  .yt-card h3,.yt-list h3{ font-size:calc(var(--m) * 12.5/360) }
}