/* ─────────────────────────────────────────────────────────────
   FVA ACADEMY — 공식 홈페이지
   피그마 node 3398:146 (1920 기준) 실측값을 비율로 환산.

   핵심 원칙: 글자를 이미지 위에 좌표로 얹지 않는다.
   평면 그래픽은 CSS로 그리고 그 안에 텍스트를 흘려서,
   글자가 길어지면 그릇이 같이 늘어나게 한다. 겹침이 불가능해진다.
   ───────────────────────────────────────────────────────────── */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root{
  /* 좌우 여백 — 화면 가장자리에 숨 쉴 틈을 준다.
     모든 섹션의 --u 가 이 폭을 기준으로 계산되므로 비율은 그대로 유지된다. */
  --gutter:clamp(0px, 4.6vw, 112px);   /* 좌우 여백 (사용자 요청으로 확대) */
  --pagew:min(calc(100vw - 2 * var(--gutter)), 1920px);

  --green:#2CFF05;
  --black:#000;
  --ink:#151515;
  --ink2:#252526;
  --white:#FDFDFD;
  --muted:#8A8A8A;

  --max:1920px;          /* 디자인 기준 폭 */
  --pad:clamp(16px,4.2vw,80px);
  --ls:-0.03em;          /* 본문 자간 (피그마 실측) */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
/* 회전 요소는 시각적 박스가 레이아웃 박스보다 커서 가로 스크롤을 만든다.
   clip은 hidden과 달리 스크롤 컨테이너를 만들지 않아 sticky를 깨지 않는다. */
html,body{overflow-x:clip}

body{
  background:var(--black);
  color:var(--white);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
  font-weight:500;
  letter-spacing:var(--ls);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 한글은 브라우저 기본값이 글자 단위로 줄을 바꿔서 「열/람과」처럼 단어가 쪼개진다.
     띄어쓰기에서만 넘어가게 하고, 끊을 데가 없는 긴 문자열(URL 등)만 예외로 둔다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

img,svg,video{display:block;max-width:100%}
/* HTML width/height 속성이 높이를 고정해버리는 것을 막는다 */
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* 화면에는 안 보이지만 검색엔진과 스크린리더는 읽는 텍스트.
   이미지로 남긴 제목의 대체 텍스트 용도로만 쓴다. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
body > header,
body > main,
body > footer{ padding-inline:var(--gutter) }
body > main{ max-width:calc(1920px + 2 * var(--gutter)); margin-inline:auto }

/* ── 섹션 제목 ─────────────────────────────────────────────
   TLAB 믹스커피는 유료 폰트라 웹에 못 싣는다. 대신 피그마에서
   투명 PNG로 뽑아 <h2> 안에 넣고, alt에 실제 문구를 적는다.
   검색엔진은 alt를 제목 텍스트로 읽으므로 손해가 없다.
   폰트를 구매하면 img를 텍스트로 바꾸기만 하면 된다.        */
/* TLAB 대제목 — 피그마에서 1x 로 트림해 뽑은 PNG.
   width:auto 로 두면 원본 픽셀이 그대로 박혀 --pagew 배율(=1836/1920)을 안 타고
   4.6% 과대해진다. --dwn 에 PNG 원본 폭(=피그마 잉크 폭)을 넣어 환산한다. */
.display{text-align:center;line-height:0}
.display img,
.display svg.tlab{
  display:inline-block;height:auto;
  width:calc(var(--pagew) * var(--dwn, 900)/1920);
  max-width:calc(100% - 16px);
}

/* ══════════════════════════════════════════════════════════
   헤더 — 피그마 1920 기준 실측
   높이 72 · 로고 x25 184x17.77 · 네비 x264 20px 간격50
   버튼 x1451 124x35 · SNS x1615~1885 (아이콘 16~22, 간격 ~48)
   전부 1920 대비 % 로 환산해 어느 폭에서도 비율이 유지된다.
   ══════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hd{
  --u:var(--pagew);                      /* 1920 기준 단위 */
  max-width:1920px;margin-inline:auto;
  height:calc(var(--u) * 72/1920);
  min-height:56px;
  display:flex;align-items:center;
  padding-inline:calc(var(--u) * 25/1920);
  gap:calc(var(--u) * 24/1920);
}

.hd-logo{flex:none;display:block;line-height:0}
.hd-logo img,
.hd-logo svg.tlab-logo{
  width:calc(var(--u) * 184/1920);
  min-width:118px;height:auto;display:block;
}

.gnb{
  display:flex;align-items:center;
  gap:calc(var(--u) * 50/1920);
  margin-left:calc(var(--u) * 31/1920);
}
.gnb a{
  font-size:calc(var(--u) * 20/1920);
  font-weight:400;color:#fff;white-space:nowrap;
  letter-spacing:-.02em;line-height:1.2;
  transition:color .15s;
}
.gnb a:hover{color:var(--green)}
.gnb a[aria-current="page"]{color:var(--green)}

.btn-cta{
  flex:none;margin-left:auto;
  background:var(--green);color:#06150a;
  font-weight:800;font-size:calc(var(--u) * 14/1920);
  line-height:1.6;letter-spacing:-.02em;
  padding:calc(var(--u) * 6/1920) calc(var(--u) * 24/1920);
  border-radius:999px;white-space:nowrap;
  transition:filter .15s,transform .12s;
}
.btn-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

.sns{
  flex:none;display:flex;align-items:center;
  gap:calc(var(--u) * 30/1920);
  margin-left:calc(var(--u) * 40/1920);
}
.sns a{display:block;line-height:0;opacity:.92;transition:opacity .15s,transform .12s}
.sns a:hover{opacity:1;transform:translateY(-1px)}
.sns img{
  width:auto;height:calc(var(--u) * 18/1920);
  min-height:15px;display:block;
}
.nav-toggle{display:none}

/* ══════════════════════════════════════════════════════════
   히어로 — 피그마 실측
   워드마크 596x57.6 (y=153) · 카드 750x750 (x=153/985, 간격 82)
   컨테이너 1582/1920 = 82.4% · 카드 750/1582 = 47.41%
   ONLINE/OFFLINE CLASS 글자는 원본 이미지에 포함돼 있으므로
   위에 덧씌우지 않는다 (alt 로 검색엔진에 전달).
   ══════════════════════════════════════════════════════════ */
.hero{
  --u:var(--pagew);
  padding-top:calc(var(--u) * 81/1920);
  padding-bottom:calc(var(--u) * 127/1920);
}

.hero-mark{
  text-align:center;line-height:0;
  margin-bottom:calc(var(--u) * 84/1920);
}
.hero-mark img,
.hero-mark svg.tlab-logo{
  /* 피그마에서 뽑은 로고 SVG 는 style="display:block" 이 인라인으로 박혀 있어
     text-align:center 가 먹지 않는다. 마진으로 중앙을 잡는다. */
  display:block; margin-inline:auto;
  width:calc(var(--u) * 596/1920);
  min-width:220px;height:auto;
}

.hero-grid{
  width:calc(var(--u) * 1582/1920);
  max-width:calc(100% - 32px);
  margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 82/1920);
}
.hero-card{
  display:block;overflow:hidden;
  aspect-ratio:1/1;                 /* 750x750 — 원본 비율 그대로 */
  background:var(--ink);
}
.hero-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.hero-card:hover img{transform:scale(1.03)}

/* ══════════════════════════════════════════════════════════
   파트너
   ══════════════════════════════════════════════════════════ */
/* 파트너 — 피그마 3398:215 : x103 w1713 h590 */
/* 파트너 — 피그마 3398:215 : x103 y1171 1713x590.
   히어로 하단여백 127 이 곧 피그마 간격이라 padding-top 은 0.
   하단은 프로필 상단 1936 에 맞춰 121.2 */
.partners{--u:var(--pagew);padding:0 0 calc(var(--u) * 121.2/1920);text-align:center}
.partners img{margin-inline:auto;width:calc(var(--u) * 1713/1920);max-width:calc(100% - 32px)}
.partners p{
  margin-top:calc(var(--u) * 26/1920);
  font-size:calc(var(--u) * 22/1920);color:var(--muted);font-weight:500;
}

/* ══════════════════════════════════════════════════════════
   DIRECTOR'S PROFILE — 검증 완료 (320~1920px 넘침 0px)
   ══════════════════════════════════════════════════════════ */
.profile{
  position:relative;width:100%;
  aspect-ratio:1920/1853;
  background:var(--green);
  overflow:hidden;
  container-type:inline-size;
}
.profile .photo{
  position:absolute;left:0;top:0;height:100%;width:50.064%; /* 피그마 3398:491 우측단 961.224/1920 */
  object-fit:cover;object-position:center top;
}
/* 텍스트는 절대배치가 아니라 세로 흐름 — 서로 겹칠 수 없다 */
.profile .copy{
  position:absolute;left:54.10%;top:11.684%;width:41.14%;   /* 글리프 상단 y=205 (피그마) */
  container-type:inline-size;color:#000;
}
.profile h2{
  font-family:"TLAB 믹스커피","TlabMixCoffee",Pretendard,sans-serif;
  font-weight:400;line-height:.86;letter-spacing:-.04em;text-transform:uppercase;
}
/* TLAB 이라 SVG 아웃라인. 폭 = viewBox폭/1000 x 원래 글자크기
   DIRECTOR’S 3.942 x 24.13cqi = 95.1cqi · PROFILE 2.661 x 36.20cqi = 96.3cqi */
.profile h2 .l1{display:block;width:95.1cqi;line-height:0}
.profile h2 .l2{display:block;width:96.3cqi;line-height:0;margin-top:2.10cqi}
.profile h2 svg.tlab{display:block;width:100%;height:auto;color:#000;fill:currentColor}
.profile .name{margin-top:10.11cqi}                 /* 정주 감독 글리프 상단 y=731.5 */
.profile .who {font-size:7.59cqi;font-weight:800;letter-spacing:-.02em}
.profile .role{font-size:5.06cqi;font-weight:700;margin-left:.45em}
.profile .org {font-size:5.06cqi;font-weight:700;margin-top:.19em;display:block}
.profile .rule{height:.42cqi;background:#000;margin-top:1.30cqi}      /* 구분선 y=859 */
.profile h3{margin-top:12.61cqi;font-size:5.70cqi;font-weight:800}    /* 주요 이력 y=969.5 */
.profile ul{margin-top:2.46cqi}                     /* 이력 1행 y=1049.5 */
.profile li{
  font-size:4.81cqi;font-weight:600;line-height:1.676;
  text-indent:-.55em;padding-left:.55em;
}
.profile li::before{content:"· "}

/* ══════════════════════════════════════════════════════════
   수상 — 피그마 y3954~6914 (1920x2960) 실측
   트로피 1923x2554 · 월계관 x107.7 y202 1672x202
   「5연속 수상」 y2143 · 카피 y2358 · 대제목 y2436
   ══════════════════════════════════════════════════════════ */
.awards{
  --u:var(--pagew);
  margin-top:calc(var(--u) * 164.92/1920);   /* 프로필 하단 3789.08 -> 3954 */
  position:relative;background:var(--black);
  aspect-ratio:1920/2960;
  overflow:hidden;
}
.awards .trophy{
  position:absolute;left:0;top:0;
  width:calc(var(--u) * 1923/1920);
  height:calc(var(--u) * 2554/1920);
  object-fit:cover;
}
.awards .laurels{
  position:absolute;z-index:2;
  left:calc(107.7/1920 * 100%);
  top:calc(202/2960 * 100%);
  width:calc(1672/1920 * 100%);
  height:auto;
}
/* 레데 — 피그마 로컬좌표(섹션 2960 기준)
   별 2050.05 (383.31x67.25) · 키커행 2138.34~2248 · 카피 2357.99 (박스 107.67)
   대제목 잉크 2499. 키커 전체가 #777777 (트로피 받침에 새긴 느낌) */
.awards-lede{
  position:absolute;z-index:3;left:0;right:0;
  top:calc(2050.05/2960 * 100%);
  text-align:center;
}
.awards-lede .stars{ line-height:0 }
.awards-lede .stars img,
.awards-lede .stars svg.tlab-logo{
  display:inline-block;width:calc(var(--u) * 383.31/1920);height:auto;
}
.awards-lede .kicker{
  margin-top:calc(var(--u) * 21.04/1920);
  display:inline-flex;align-items:flex-end;
  gap:calc(var(--u) * 22/1920);
  color:#777;letter-spacing:-.02em;
}
.awards-lede .kicker .q{
  font-size:calc(var(--u) * 103/1920);line-height:.9;
  margin-inline:calc(var(--u) * 30/1920);
}
.awards-lede .brand{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(var(--u) * 3/1920);
}
.awards-lede .brand img,
.awards-lede .brand svg.tlab-logo{ width:calc(var(--u) * 191/1920);height:auto }
.awards-lede .k1{ font-size:calc(var(--u) * 45/1920);line-height:1.2;font-weight:700 }
.awards-lede .k2{ font-size:calc(var(--u) * 87.5/1920);line-height:1.2;font-weight:800 }
.awards-lede .bang{ margin-left:.18em }
.awards-lede .quote{
  margin-top:calc(var(--u) * 114.89/1920);
  font-size:calc(var(--u) * 72/1920);line-height:1.4954;   /* 박스 107.67 */
  font-weight:700;color:#fff;letter-spacing:-.03em;
}
.awards-lede .quote em{font-style:normal;color:var(--green)}
.awards-lede h2{ --dwn:1663; margin-top:calc(var(--u) * 33.34/1920) }

/* 수상 모바일은 css/mobile.css 에서 피그마 3457:1642 실측값으로 정의한다 */

/* ── 수강생 작품 카드 — 피그마 3398:411 실측 ──────────────
   스틸 2장 각 959.62x548.09 를 화면 폭에 꽉 채움 (full-bleed)
   배너 x179.6 / w1458.75 좌측 정렬 · 제목 TLAB 110px(이미지)
   부제 56px · 크레딧 30px #636363                          */
.works{
  --u:var(--pagew);
  padding:0 0 calc(var(--u) * 120/1920);
}

.work{ margin-bottom:calc(var(--u) * 236/1920) }
.work:last-child{ margin-bottom:0 }

.work .stills{ display:grid; width:100%; background:#000 }
.work .stills.two{ grid-template-columns:1fr 1fr }
.work .stills.two img{ width:100%; aspect-ratio:959.62/548.09; object-fit:cover; display:block }

/* 4번 작품 — 스틸 3장 사이에 폰 목업이 겹쳐 올라간다 */
.work .stills.phone{
  position:relative;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  padding-top:calc(var(--u) * 86/1920);
}
.work .stills.phone img{ width:100%; display:block }
.work .stills.phone .s1,
.work .stills.phone .s2,
.work .stills.phone .s3{ aspect-ratio:479/854; object-fit:cover }
.work .stills.phone .s3{ grid-column:4; aspect-ratio:481/854 }
.work .stills.phone .ph{
  position:absolute; z-index:2;
  left:calc(921.3/1920 * 100%);
  width:calc(562.7/1920 * 100%);
  top:0;
  display:block;
}
.work .stills.phone .ph img{ width:100%; height:auto; display:block }

/* 초록 배너 — 피그마 실측. 회전 전 박스 크기를 --bw/--bh 로 개별 지정한다.
   (AABB 에서 rotate(1.15°) 를 역산한 값. 제목 PNG 는 --tw 로 --u 배율을 태운다) */
.work .banner{
  position:relative; z-index:3;
  width:calc(var(--u) * var(--bw,1451.7)/1920);
  aspect-ratio:var(--bw,1451.7) / var(--bh,366.9);
  margin-inline:auto;                    /* 완전 중앙정렬 */
  margin-top:calc(var(--u) * -60/1920);
  background:var(--green);
  transform:rotate(-1.15deg);
  padding-inline:calc(var(--u) * 40/1920);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}
.work .banner h3{ line-height:0 }
.work .banner h3 img,
.work .banner h3 svg.tlab{
  display:block; height:auto;
  color:#000;                            /* 초록 배너 위 검정 글자 (원본 PNG 잉크색) */
  width:calc(var(--u) * var(--tw,1226)/1920);
  max-width:100%;
}
.work .wsub{
  margin-top:calc(var(--u) * 22/1920);
  font-family:Helvetica,Arial,"Pretendard Variable",Pretendard,sans-serif;
  font-weight:700; color:#000;
  font-size:calc(var(--u) * 56/1920);
  letter-spacing:-.03em; line-height:1.2;
}
.work .credit{
  margin-top:calc(var(--u) * 86/1920);
  margin-left:calc(var(--u) * 179.6/1920);
  margin-right:calc(var(--u) * 179.6/1920);
  font-size:calc(var(--u) * 30/1920);
  font-weight:500; color:#636363; letter-spacing:-.03em;
}

/* 작품 모바일은 css/mobile.css 에서 피그마 3457:1884 실측값으로 정의한다 */

/* ══════════════════════════════════════════════════════════
   감독 전문성 / 통계
   ══════════════════════════════════════════════════════════ */
/* 감독 전문성 — 피그마 실측 (지그재그 하단 12176 기준)
   제목 3398:452 잉크 1235.5x243 · 상단 12403.5 · x296 (2줄, 줄간격 142)
   본문 3398:453 박스 1342x666 · 상단 12747 · 초록 #2CFF05
        글리프 44.5 / 줄간격 95 / 단락사이 190(=2줄)  → 60px·lh1.5833 */
.expertise{--u:var(--pagew);padding:calc(var(--u) * 227.5/1920) 0 0;background:var(--black)}
.expertise .wrap{padding-left:calc(var(--u) * 296/1920);padding-right:calc(var(--u) * 100/1920)}
.expertise h2{ line-height:0 }
.expertise h2 img,
.expertise h2 svg.tlab{
  display:block;height:auto;
  width:calc(var(--u) * 1235.5/1920);
  max-width:calc(100% - 16px);
}
/* Pretendard 는 피그마 원본 폰트보다 6% 넓다. 폭 1342 안에 3줄이 들어가고
   글리프 높이 44.5 · 줄간격 95 를 동시에 맞추는 값 = 51px / -.03em / lh1.8627 */
.expertise p{
  margin-top:calc(var(--u) * 100.5/1920);
  width:calc(var(--u) * 1342/1920);max-width:100%;
  font-size:calc(var(--u) * 51/1920);
  font-weight:700;line-height:1.8627;letter-spacing:-.03em;
  color:var(--green);
}
.expertise p + p{margin-top:1.8627em}

/* 학생작 영상 — 피그마 3398:3297 : x170 y13458 w1580 h2524 (비율 0.626)
   캡션 3398:3298 박스 605x96 · 상단 15992 · #5A5A5A · 60px·lh1.6
   음소거 자동재생 + 반복. 마우스 올리면 소리 버튼이 나온다. */
.showreel{--u:var(--pagew);padding:calc(var(--u) * 45/1920) 0 0}
.showreel .wrap{padding-inline:calc(var(--u) * 170/1920)}
.showreel figure{position:relative}   /* 배경을 빼야 캡션 뒤 회색 띠가 사라진다 */
.showreel video,.showreel img{width:100%;aspect-ratio:1580/2524;object-fit:cover;display:block;background:#000}
.reel-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border:0; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:24px; line-height:64px;
  padding:0 0 0 4px; cursor:pointer; z-index:3;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.reel-play[hidden]{ display:none }
.reel-play:hover{ background:rgba(0,0,0,.75) }

.showreel figcaption{
  text-align:center;
  margin-top:calc(var(--u) * 10/1920);
  font-size:calc(var(--u) * 34/1920);
  font-weight:700;line-height:1.75;letter-spacing:-.03em;
  color:#5A5A5A;
}

/* ══════════════════════════════════════════════════════════
   차별점 3가지 — 피그마 3398:3304 실측
   카드 564x315 (x 85 / 677.9 / 1270.9, 간격 28.9)
   배경 #000 · 테두리 2px #2CFF05 · radius 23.98 · 패딩 52/42
   번호 TLAB 42px #2CFF05 · 제목 EB 28px #EAEAEA
   본문 Regular 21px/34 #9A9A9A
   ══════════════════════════════════════════════════════════ */
/* 지그재그 하단 17310 기준 — 제목 잉크 상단 17494.5 / 서브 17800 / 카드 17905 */
.features{ --u:var(--pagew); padding:calc(var(--u) * 184.5/1920) 0 calc(var(--u) * 110/1920) }
.section-head{ text-align:center }
.features .section-head{ margin-bottom:calc(var(--u) * 71/1920) }
.reviews  .section-head{ margin-bottom:calc(var(--u) * 71/1920) }
.features .section-head h2{ --dwn:1542 }
.reviews  .section-head h2{ --dwn:1402 }
.faq      .section-head h2{ --dwn:976  }
.section-head .sub{
  margin-top:calc(var(--u) * 63.5/1920);
  font-size:calc(var(--u) * 24/1920);
  line-height:1.4167;                    /* 박스 34 (피그마) */
  font-weight:700; color:var(--green); letter-spacing:-.02em;
}
.reviews .section-head .sub{ margin-top:calc(var(--u) * 46.5/1920) }
.feature-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--u) * 28.9/1920);
  width:calc(var(--u) * 1749.9/1920);
  margin-inline:auto;
}
.feature{
  background:#000;
  border:2px solid var(--green);
  border-radius:calc(var(--u) * 23.981/1920);
  padding:calc(var(--u) * 52/1920) calc(var(--u) * 42/1920);
}
.feature .num{
  font-family:"TLAB 믹스커피","TlabMixCoffee",Unbounded,Pretendard,sans-serif;
  font-weight:800; color:var(--green);
  font-size:calc(var(--u) * 42/1920); line-height:1;
}
.feature h3{
  margin-top:calc(var(--u) * 18/1920);
  font-size:calc(var(--u) * 28/1920);
  font-weight:800; color:#EAEAEA; letter-spacing:-.0096em;
}
.feature p:last-child{
  margin-top:calc(var(--u) * 12/1920);
  font-size:calc(var(--u) * 21/1920);
  line-height:1.619; font-weight:400; color:#9A9A9A; letter-spacing:0;
}

/* 카드 호버 — 01/02/03 각각 다른 색으로 채워진다.
   테두리색을 --c 하나로 묶고, 호버 시 배경을 그 색으로 반전시킨다. */
.feature{
  --c:var(--green);
  border-color:var(--c);
  transition:background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.feature:nth-child(1){ --c:#2CFF05 }   /* 시그니처 그린 */
.feature:nth-child(2){ --c:#05E0FF }   /* 시안 */
.feature:nth-child(3){ --c:#FFE605 }   /* 옐로 */
.feature .num,
.feature h3,
.feature p:last-child{ transition:color .28s ease }
.feature:hover,
.feature:focus-within{
  background-color:var(--c);
  transform:translateY(calc(var(--u) * -6/1920));
}
.feature:hover .num,
.feature:focus-within .num{ color:#000 }
.feature:hover h3,
.feature:focus-within h3{ color:#000 }
.feature:hover p:last-child,
.feature:focus-within p:last-child{ color:rgba(0,0,0,.72) }

@media (prefers-reduced-motion:reduce){
  .feature{ transition:background-color .01s, border-color .01s }
  .feature:hover, .feature:focus-within{ transform:none }
}

/* ══════════════════════════════════════════════════════════
   후기 — 피그마 3398:3343 실측
   카드 564.4x702.8 (x 0 / 591.4 / 1182.8) · 사진 561.4x421.1
   4.99 박스 631x163.2
   ══════════════════════════════════════════════════════════ */
/* 제목 잉크 상단 18585.5 / REVIEWS 18874 / 평점 18979 / 카드 19243.95 / 전체보기 20008.73 */
.reviews{ --u:var(--pagew); padding:calc(var(--u) * 255.5/1920) 0 calc(var(--u) * 110/1920); background:var(--black) }
.rating{
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--u) * 31.47/1920);
  width:calc(var(--u) * 631.05/1920);
  margin:0 auto calc(var(--u) * 101.74/1920);
  background:var(--ink);
  border-radius:calc(var(--u) * 16/1920);
  padding:calc(var(--u) * 32.25/1920) calc(var(--u) * 62.25/1920);
}
.rating .score{                        /* 피그마는 TLAB — SVG 아웃라인, 잉크 150.44x80.92 */
  display:block; line-height:0; color:var(--green);
  width:calc(var(--u) * 150.44/1920);
  flex:none;
}
.rating .score svg.tlab{ display:block;width:100%;height:auto;fill:currentColor }
.rating .stars{
  display:block; color:var(--green); letter-spacing:.06em;
  font-size:calc(var(--u) * 30/1920); line-height:1.5667;   /* 박스 47 */
}
.rating .meta{
  display:block; white-space:nowrap;    /* 피그마는 1줄. 줄바꿈되면 박스가 2배가 된다 */
  font-size:calc(var(--u) * 22/1920); line-height:2.35;      /* 박스 51.71 */
  color:#C9C9C9; font-weight:500;
}
.rating .meta b{ color:#fff; font-weight:800 }

.review-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:calc(var(--u) * 27/1920);
  width:calc(var(--u) * 1747.2/1920);
  margin-inline:auto;
}
.review{
  background:var(--ink);
  border-radius:calc(var(--u) * 14/1920);
  height:calc(var(--u) * 702.81/1920);      /* 피그마 고정 높이 — 넘치면 자른다 */
  overflow:hidden; display:flex; flex-direction:column;
}
.review img{ width:100%; aspect-ratio:561.4/421.1; object-fit:cover; display:block }
.rv-body{ padding:calc(var(--u) * 24/1920) calc(var(--u) * 27/1920) calc(var(--u) * 28/1920) }
.review .stars{ color:var(--green); font-size:calc(var(--u) * 22/1920); letter-spacing:.06em }
.review blockquote{
  margin-top:calc(var(--u) * 14/1920);
  font-size:calc(var(--u) * 21/1920); line-height:1.62;
  color:#C6C6C6; font-weight:400;
}
.review figcaption{
  margin-top:calc(var(--u) * 18/1920);
  font-size:calc(var(--u) * 19/1920); color:#8A8A8A; font-weight:500;
}
.reviews .more{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  width:fit-content; margin:calc(var(--u) * 61.97/1920) auto 0;
  padding:calc(var(--u) * 22/1920) calc(var(--u) * 54/1920);
  font-size:calc(var(--u) * 25/1920); font-weight:700;
  color:var(--green); border:2px solid var(--green); border-radius:999px;
  transition:background-color .22s ease, color .22s ease, transform .16s ease;
}
.reviews .more::after{ content:"\2192"; transition:transform .22s ease }
.reviews .more:hover,
.reviews .more:focus-visible{
  background:var(--green); color:#06150A; transform:translateY(-2px);
}
.reviews .more:hover::after{ transform:translateX(4px) }
.reviews .more:focus-visible{ outline:3px solid #fff; outline-offset:3px }

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
/* 하단 여백은 .bts 가 182.5 로 책임진다 (피그마: FAQ 끝 21786.5 -> 사진 21969) */
.faq{--u:var(--pagew);padding:calc(var(--u) * 164.74/1920) 0 0}
.faq .section-head{ margin-bottom:calc(var(--u) * 60/1920) }   /* 제목이 목록에 붙어 답답했다 */
.faq-list{width:calc(var(--u) * 1653/1920);max-width:calc(100% - 32px);margin-inline:auto}
.faq details{border-bottom:1px solid rgba(255,255,255,.13)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2em;
  padding:clamp(16px,1.8vw,34px) clamp(4px,.6vw,12px);
  font-size:clamp(13.5px,1.22vw,24px);font-weight:700;cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";color:var(--green);font-weight:400;
  font-size:clamp(22px,2vw,40px);line-height:1;flex:none;
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{
  padding:0 clamp(4px,.6vw,12px) clamp(18px,2vw,36px);
  font-size:clamp(12.5px,1.05vw,20px);font-weight:500;line-height:1.8;color:#BFBFBF;
}

/* ══════════════════════════════════════════════════════════
   CTA / 푸터
   ══════════════════════════════════════════════════════════ */
/* 촬영 현장 사진 — 피그마 3398:510 : x0 y21969 1918x1243
   FAQ 마지막 항목 하단 21786.5 -> 사진 상단 21969 = 182.5 */
.bts{ --u:var(--pagew); padding-top:calc(var(--u) * 182.5/1920) }
.bts img{
  width:calc(var(--u) * 1918/1920);
  margin-inline:auto;
  aspect-ratio:1918/1243;object-fit:cover;
}

/* CTA — 사진 하단 23212 -> 배너 상단 23319.23 = 107.23 */
.cta{
  --u:var(--pagew);
  position:relative;
  width:calc(var(--u) * 1918/1920);
  margin:calc(var(--u) * 107.23/1920) auto 0;
  aspect-ratio:1918/480;
  overflow:hidden;
  text-align:center;
}
.cta .cta-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.cta-inner{ position:relative;z-index:1;height:100% }
/* 배너 상단 23319.23 기준 — 제목 잉크 23415.2 (=+95.97) */
.cta h2{ line-height:0;padding-top:calc(var(--u) * 95.97/1920) }
.cta h2 img,
.cta h2 svg.tlab{
  display:inline-block;height:auto;
  width:calc(var(--u) * 591.3/1920);max-width:calc(100% - 32px);
}
.cta p{
  margin-top:calc(var(--u) * 29/1920);          /* 잉크하단 23497.2 -> 박스 23526.2 */
  font-size:calc(var(--u) * 51/1920);
  line-height:1.8824;                            /* 박스 96 */
  font-weight:700;color:var(--green);letter-spacing:-.03em;
}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.3em;
  margin-top:calc(var(--u) * 52/1920);           /* 문구와 너무 붙어 답답했다 */
  width:calc(var(--u) * 240/1920);
  height:calc(var(--u) * 84/1920);
  background:var(--green);color:#000;
  font-size:calc(var(--u) * 31/1920);            /* 40 은 버튼을 꽉 채워 여백이 없었다 */
  font-weight:800;letter-spacing:-.03em;line-height:1;
  border-radius:999px;
  transition:filter .15s,transform .12s;
}
.cta-btn:hover{ filter:brightness(1.08);transform:translateY(-2px) }
.cta-btn:focus-visible{ outline:3px solid #fff;outline-offset:3px }

/* 푸터 — 피그마 3398:459 : x120 y23942.2 1680x231, 중앙정렬 #4C4C4C
   구분선 3402:231315 : x120 y23905.2 1680x1
   배너 하단 23799.23 -> 구분선 23905.2 = 105.97 / 구분선 -> 본문 36 */
.site-footer{--u:var(--pagew);padding:0 0 calc(var(--u) * 90/1920);background:var(--black)}
.site-footer .ft-inner{
  width:calc(var(--u) * 1680/1920);
  margin-inline:auto;text-align:center;
}
.ft-rule{
  border:0;height:1px;background:#4C4C4C;
  margin:calc(var(--u) * 105.97/1920) 0 calc(var(--u) * 36/1920);
}
.site-footer p{
  font-size:calc(var(--u) * 20/1920);  /* 29 는 한 줄에 안 들어가 계속 줄바꿈됐다 */
  line-height:1.95;
  color:#4C4C4C;font-weight:700;letter-spacing:-.02em;
}
.site-footer .ft-name{ letter-spacing:.02em }
/* 개인정보처리방침 링크. sub.css 에만 있어서 홈에서는 밑줄이 안 그어졌다.
   푸터는 모든 페이지에 있으므로 규칙도 공통 파일에 둔다. */
.site-footer .ft-privacy{ text-decoration:underline; text-underline-offset:2px; color:inherit }
.site-footer .ft-privacy:hover{ color:var(--green) }

/* ══════════════════════════════════════════════════════════
   태블릿 · 모바일
   원본 비율을 그대로 유지하면 900px 근처에서 본문이 17px까지
   작아지므로, 그 전에 세로 배치로 전환해 가독성을 확보한다.
   ══════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .profile{aspect-ratio:auto}
  .profile .photo{position:static;width:100%;aspect-ratio:1080/1240;object-position:center 22%}
  .profile .copy{position:static;width:100%;padding:7cqi 6cqi 8.5cqi}
  .feature-list,.review-list{grid-template-columns:1fr;width:auto;padding-inline:16px}
  .rating{width:auto;margin-inline:16px}
}

@media (max-width:900px){
  .hd{gap:10px;padding-inline:16px}
  .hd-logo{margin-right:auto}
  .btn-cta{font-size:12px;padding:.55em 1.05em;margin-left:0}
  .sns{display:none}
  .nav-toggle{
    display:grid;place-items:center;order:9;
    width:36px;height:36px;background:none;border:0;cursor:pointer;
    color:#fff;font-size:19px;margin-left:2px;
  }
  .gnb{
    position:fixed;inset:56px 0 auto 0;margin-left:0;
    flex-direction:column;gap:0;
    background:rgba(0,0,0,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:8px 0 16px;
    transform:translateY(-130%);transition:transform .28s ease;
  }
  .gnb[data-open="true"]{transform:translateY(0)}
  .gnb a{padding:13px 16px;font-size:15px}
  .hero-grid{grid-template-columns:1fr;gap:12px}

  .work .banner{width:calc(100% - 24px);transform:rotate(-.8deg)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ══════════════════════════════════════════════════════════
   모바일 마감 — 최소 가독 크기와 터치 영역 확보
   원본 비율을 그대로 축소하면 10px 안팎까지 작아지는 항목이
   생긴다. 작은 화면에서만 하한을 올린다.
   ══════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* 피그마 모바일 실측값이 있는 항목(.work .credit / .partners p / .site-footer p /
     .review figcaption / .rating .meta)은 mobile.css 가 정확한 크기를 준다 */
  .buy-note,
  .cur-note,
  .cur-foot,
  .portfolio-note .small,
  .yt-meta,
  .badge-hot,
  .pass .tag{ font-size:12px !important; line-height:1.65 }

  .likes{ font-size:11.5px !important }
  .work .credit{ line-height:1.7 }

  /* 터치 영역 — 손가락으로 누를 수 있는 최소치 */
  /* .btn-cta(75x22) · .faq summary(310x22) · .reviews .more(179x40.8) 는
     피그마 박스가 44 보다 작다 — 시안을 따르고 강제하지 않는다 */
  .gnb a,
  .btn-primary,
  .btn-ghost,
  .btn-more,
  .back-link{ min-height:44px; display:flex; align-items:center }
  .btn-primary,.btn-ghost,.btn-more{ justify-content:center }
  .btn-cta,.reviews .more{ display:flex;align-items:center;justify-content:center }
  .sns a{ min-width:40px; min-height:40px }
  .hd-logo{ min-height:40px; display:flex; align-items:center }
}

@media (max-width:400px){
  .btn-cta{ font-size:11.5px; padding:.5em .85em }
  .hd{ gap:6px }
}

/* 태블릿(821~1200) — 1920 비례식만 쓰면 헤더 버튼이 7px 까지 작아진다 */
@media (min-width:821px) and (max-width:1200px){
  .btn-cta{ font-size:12px; padding:.5em 1em }
}

@media (max-width:820px){
  .cur-badge em,
  .pass-role em{ font-size:12px !important }
  /* 시리즈 제목 링크도 손가락으로 누를 수 있게 */
  .series-copy h2 a{ display:inline-block; padding-block:8px }
}

@media (max-width:820px){
  .cur-head span{ font-size:12px !important }
}


/* ══════════════════════════════════════════════════════════
   지그재그 띠 — 피그마 1918x253
   y11923(작품 뒤) · y17057(통계 뒤) 초록,
   프로필 위·아래(y1809/y3698) 검정으로 초록 카드를 잘라낸다.
   ══════════════════════════════════════════════════════════ */
.zig{
  display:block;width:100%;
  aspect-ratio:1918/253;
  background:no-repeat center/100% 100%;
}
.zig.green{ background-image:url("../assets/img/zigzag-green.svg") }
.zig.black{ background-image:url("../assets/img/zigzag-black.svg") }

.profile{ isolation:isolate }
.profile .fold{
  position:absolute;left:0;width:100%;
  aspect-ratio:1918/253;z-index:4;pointer-events:none;
  background:no-repeat center/100% 100%;
  background-image:url("../assets/img/zigzag-black.svg");
}
.profile .fold.top{ top:-11.2% }
.profile .fold.bot{ bottom:-11.2%; transform:scaleY(-1) }

/* 학생작 영상 — 음소거 자동재생, 호버 시 소리 버튼 */
.reel{position:relative}
.reel-sound{
  position:absolute;right:calc(var(--u) * 24/1920);top:calc(var(--u) * 24/1920);
  width:clamp(38px,3vw,56px);height:clamp(38px,3vw,56px);
  display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:clamp(15px,1.2vw,22px);
  opacity:0;transition:opacity .18s,background .15s;
}
.reel:hover .reel-sound,
.reel-sound:focus-visible{opacity:1}
.reel-sound:hover{background:rgba(44,255,5,.85);color:#000}
@media (hover:none){ .reel-sound{opacity:1} }

/* FILM VISUAL ART — 피그마 3398:455 : x296 w1220 (TLAB 108px) */
/* FILM VISUAL ART — 피그마 3398:457 박스 1214.3x396.5 / 잉크 993.5x372.5
   잉크 상단 16208 (캡션 박스 하단 16088 + 120)
   통계 3398:375 x177 y16680 1566x256.23 — 그룹 3장은 노드박스 그대로 export */
.fva-seoul{ --u:var(--pagew); padding:calc(var(--u) * 120/1920) 0 calc(var(--u) * 120.8/1920) }
.fva-seoul h2{
  line-height:0;
  padding-left:calc(var(--u) * 296/1920);
}
.fva-seoul h2 img,
.fva-seoul h2 svg.tlab{
  width:calc(var(--u) * 993.5/1920);
  max-width:calc(100% - 32px);height:auto;
}
.stats-row{
  position:relative;
  margin-top:calc(var(--u) * 99.5/1920);
  margin-left:calc(var(--u) * 177/1920);
  width:calc(var(--u) * 1566/1920);
  aspect-ratio:1566/256.2266;
}
.stats-row .stats-wordmark,
.stats-row svg.stats-wordmark{
  position:absolute;left:0;
  top:calc(111.81/256.2266 * 100%);
  width:calc(522/1566 * 100%);height:auto;
}
/* 통계 3개 — 피그마 3398:375 을 텍스트+벡터로 재조판 (이미지 아님)
   숫자 TLAB 144px 자간 -4.32 흰색 · 라벨 TLAB 48px 자간 -1.44 #2CFF05
   글자상자(피그마 text-center)를 그대로 두고 안에서 잉크를 가운데 맞춘다.
   그룹 기준 좌표 : 그룹높이 256.2266
     트로피  숫자 x86.91 66.36x202 · 라벨 x0 y154.23 204.19x102 · 아이콘 x191    y180.64 44x48
     연차    숫자 x86.87 66.36x202 · 라벨 x0 y154.23 176.75x102 · 아이콘 x148.21 y185.64 69x39.24
     수료생  숫자 x13.03 285.86x202 · 라벨 x0 y154.23 239.92x102 · 아이콘 x223.89 y184.64 61x43.34 */
.stats-row .stats{ list-style:none;margin:0;padding:0 }
.stats-row .stat{ position:absolute;top:0;height:100% }
.stats-row .stat > span{ position:absolute;display:flex;align-items:center;justify-content:center }
.stats-row .stat svg.tlab{ display:block;width:100%;height:auto;fill:currentColor }
.stats-row .st-num{ top:0;height:calc(202/256.2266 * 100%);color:#fff }
.stats-row .st-lab{ top:calc(154.23/256.2266 * 100%);height:calc(102/256.2266 * 100%);color:var(--green) }
.stats-row .st-ic { color:var(--green) }
/* SVG viewBox 는 잉크 기준이다. 폭을 안 주면 상자 폭까지 늘어나므로 잉크폭을 명시한다.
   색은 svg 에 직접 준다 — 전역 svg.tlab{color:var(--green)} 이 부모 상속을 이긴다. */
.stats-row .st-num svg.tlab,
.stats-row .st-lab svg.tlab{ height:auto }
.stats-row .st-num svg.tlab{ color:#fff }
.stats-row .st-lab svg.tlab{ color:var(--green) }
.stats-row .st-ic  svg.tlab{ color:var(--green) }
.stats-row .st-lab{ left:0 }

.stats-row .s-trophies{ left:calc(654/1566 * 100%);    width:calc(235/1566 * 100%) }
.stats-row .s-trophies .st-num{ left:calc(86.91/235 * 100%);width:calc(66.36/235 * 100%) }
.stats-row .s-trophies .st-lab{ width:calc(204.19/235 * 100%) }
.stats-row .s-trophies .st-num svg.tlab{ width:calc(56.16/66.36 * 100%) }
.stats-row .s-trophies .st-lab svg.tlab{ width:calc(158.16/204.19 * 100%) }
.stats-row .s-trophies .st-ic {
  left:calc(191/235 * 100%);top:calc(180.64/256.2266 * 100%);
  width:calc(44/235 * 100%);height:calc(48/256.2266 * 100%);
}
.stats-row .s-years   { left:calc(957.79/1566 * 100%); width:calc(217.21/1566 * 100%) }
.stats-row .s-years .st-num{ left:calc(86.87/217.21 * 100%);width:calc(66.36/217.21 * 100%) }
.stats-row .s-years .st-lab{ width:calc(176.75/217.21 * 100%) }
.stats-row .s-years .st-num svg.tlab{ width:calc(56.16/66.36 * 100%) }
.stats-row .s-years .st-lab svg.tlab{ width:calc(104.3/176.75 * 100%) }
.stats-row .s-years .st-ic {
  left:calc(148.21/217.21 * 100%);top:calc(185.64/256.2266 * 100%);
  width:calc(69/217.21 * 100%);height:calc(39.24/256.2266 * 100%);
}
.stats-row .s-grads   { left:calc(1267.11/1566 * 100%);width:calc(298.89/1566 * 100%) }
.stats-row .s-grads .st-num{ left:calc(13.03/298.89 * 100%);width:calc(285.86/298.89 * 100%) }
.stats-row .s-grads .st-lab{ width:calc(239.92/298.89 * 100%) }
.stats-row .s-grads .st-num svg.tlab{ width:calc(242.62/285.86 * 100%) }
.stats-row .s-grads .st-lab svg.tlab{ width:calc(186.91/239.92 * 100%) }
.stats-row .s-grads .st-ic {
  left:calc(223.89/298.89 * 100%);top:calc(184.64/256.2266 * 100%);
  width:calc(61/298.89 * 100%);height:calc(43.34/256.2266 * 100%);
}

/* FILM VISUAL ART 모바일: 잉크폭 공식(993.5/1920)이 360 에서 그대로 맞아 재정의하지 않는다 */

/* 후기 본문 — 피그마는 카드 높이가 고정(데스크탑 564x702.8 / 모바일 265x329.4)이라
   본문이 넘치면 잘린다. 4줄에서 자르고 나머지는 리뷰 사이트에서 보게 한다. */
.review blockquote{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 상단 초록 발광 바 — 피그마 3462:172655 (모바일 360x3, #4FE82E) */
/* 스크롤 진행 바 — 1차 사이트 디자인 유지 */
.top-bar{
  display:block;
  position:fixed;left:0;top:0;width:var(--scroll,0%);height:3px;
  background:#4FE82E;
  box-shadow:0 0 20.9px rgba(79,232,46,.7);
  z-index:1;
}


/* 호버 피드백 — 누를 수 있는 요소는 반응이 있어야 한다 */
.hd-logo{transition:opacity .15s}
.hd-logo:hover{opacity:.75}

.faq summary{transition:color .15s, background .15s}
.faq summary:hover{color:var(--green)}
.faq summary:hover::after{color:#fff}
.faq details[open] summary{color:var(--green)}
.faq summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* 「지금 신청하러 가기」류 버튼 — 호버 시 반짝이는 가벼운 모션 */
.btn-primary,.btn-more,.cta .btn{position:relative;overflow:hidden}
.btn-primary::after,.btn-more::after,.cta .btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);
}
.btn-primary:hover::after,.btn-more:hover::after,.cta .btn:hover::after{
  transform:translateX(120%);transition:transform .55s ease;
}
@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.btn-more::after,.cta .btn::after{display:none}
}


/* ── TLAB 제목 : 진짜 텍스트 + 인라인 SVG ────────────────────
   폰트가 유료(웹 임베딩 불가)라 글리프를 벡터로 떠서 쓴다.
   h2 안에는 sr-only 로 실제 문구가 들어가므로 검색엔진은 제목 텍스트를 읽는다.
   currentColor 라 색을 CSS 로 바꿀 수 있고, 어느 배율에서도 선명하다.
   tools/tlab_build.py 로 생성 · assets/tlab/*.svg                        */
svg.tlab{ display:block; fill:currentColor; color:var(--green); height:auto }
.display svg.tlab{ display:inline-block }
.cq svg.tlab, .off-plan svg.tlab{ display:block }

/* 로고·워드마크도 인라인 SVG + sr-only 텍스트.
   awards 키커의 작은 워드마크·별은 회색(#777) 이라 색을 따로 준다. */
svg.tlab-logo{ display:block; fill:currentColor; height:auto }
.hd-logo svg.tlab-logo,
.hero-mark svg.tlab-logo{ color:var(--green) }
.hero-mark svg.tlab-logo{ display:inline-block }
.stats-row svg.stats-wordmark{ color:var(--green) }
svg.club-wordmark{ color:var(--green) }
.awards-lede .brand svg.tlab-logo,
.awards-lede .stars svg.tlab-logo{ color:#777 }


/* ══════════════════════════════════════════════════════════
   스크롤 등장 — 어둡게 있다가 화면에 들어오면 밝아진다
   JS 가 클래스를 붙이므로, JS 가 없으면 처음부터 그냥 보인다.
   ══════════════════════════════════════════════════════════ */
.reveal{
  opacity:.55; filter:brightness(.28) saturate(.7);
  transform:translateY(14px);
  transition:opacity 1s ease, filter 1.2s ease, transform 1s ease;
  will-change:opacity, filter, transform;
}
.reveal.in{ opacity:1; filter:none; transform:none }

/* 아주 천천히 — 촬영현장 사진처럼 크게 깔리는 사진용 (사용자 요청) */
.reveal.slow{
  opacity:.42; filter:brightness(.16) saturate(.55);
  transition:opacity 3.4s ease, filter 4.2s cubic-bezier(.25,.6,.3,1), transform 3.4s ease;
}
.reveal.slow.in{ opacity:1; filter:none; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{ opacity:1;filter:none;transform:none;transition:none }
}