/* =========================================================
   WE STILL SING - style.css
   모바일 우선. 태블릿 768px / 데스크톱 1024px
   색상·폰트·간격은 :root 변수로만 사용

   디자인 방향 (2026-09-23): "무대 프로그램북" — Editorial · Cinematic · Minimal
   - 배경은 전부 질감 있는 검정. 섹션 구분은 가는 선과 여백, 배치(칸 수)의 변화로 리듬을 만든다
   - 글자가 주인공: 아주 큰 제목 ↔ 아주 작은 메타 정보의 극적인 크기 대비
   - 카드·둥근 상자·그림자 대신 가는 선(hairline)과 여백으로 구분
   - 12칸 그리드에서 칸 수를 섹션마다 다르게 써서 비대칭으로 배치
   - 코랄 레드 = 키 컬러: 로고 · 큰 영문 타이틀 · 섹션 라벨 · 지원 버튼 · 진행 표시 · 현재 위치
   ========================================================= */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  color-scheme: dark;

  /* 색상 — 질감 있는 검정 + 키 컬러(코랄 레드) 하나 */
  --color-primary: #F04847;      /* 코랄 레드 키 컬러. 로고·큰 영문 타이틀·섹션 라벨·지원 버튼·진행 표시 (검정 위 5.4:1) */
  --color-bg: #0B0B0B;           /* 무대 검정 (+ body 의 미세한 점 질감) */
  --color-dark: #151515;         /* 검정보다 한 단계 뜬 면 (MANIFESTO 띠, 사진 자리) */
  --color-on-accent: #FFFFFF;    /* 흰색 (인트로 타이틀·버튼) */
  --color-on-primary: #0B0B0B;   /* 빨강 버튼 위 글자 (5.4:1, 흰 글씨는 3.7:1이라 쓰지 않음) */
  --color-surface: #151515;      /* 후기 카드 배경 */
  --color-text: #F4F3EF;         /* 제목        검정 위 18:1 */
  --color-text-body: #C2C2BE;    /* 본문        검정 위 11:1 */
  --color-text-muted: #94948F;   /* 보조 문구    검정 위 6.3:1 */
  --color-line: rgba(255, 255, 255, 0.14);        /* 가는 구분선 */
  --color-line-strong: rgba(255, 255, 255, 0.3);  /* 목록 시작선, 타임라인 미진행 */
  --color-danger: #FF7A6B;       /* 환불 불가 강조 */
  --color-star: #FFAA00;         /* 별점 */

  /* 버건디 — 붉은 커튼 인트로 전용 */
  --color-burgundy-deep: #2A0509;   /* 커튼 가장 어두운 주름, 가장자리 */
  --color-burgundy: #6B1020;        /* 커튼 기본색 */
  --color-burgundy-light: #9E1B32;  /* 커튼 주름 하이라이트 */
  --color-burgundy-shadow: #0E0205; /* 커튼 주름 골·가장자리 (레퍼런스에서 측정한 붉은 검정) */
  /* 투명도와 함께 쓰는 RGB 값: rgb(var(--rgb-*) / 45%) 형태로 사용 */
  --rgb-bg: 11 11 11;
  --rgb-burgundy-shadow: 14 2 5;
  --rgb-burgundy: 107 16 32;
  --rgb-on-accent: 255 255 255;
  --rgb-spotlight: 255 238 226;   /* 핀 조명 빛 (살짝 따뜻한 흰색) */
  /* 커튼용으로 미리 섞어 둔 색 (color-mix 미지원 브라우저 대응) */
  --curtain-face: #270509;     /* 커튼 면 (레퍼런스 ≈ #22030A) */
  --curtain-crease: #0E0306;     /* 더 깊게 접힌 골 */
  --curtain-hi-dim: #3C080F;     /* 주름 하이라이트 약 */
  --curtain-hi-mid: #4A0A14;     /* 주름 하이라이트 중 */
  --curtain-hi-bright: #560D19;     /* 주름 하이라이트 강 (드묾) */

  /* 폰트 — 한글 Pretendard / 메인 영문 큰 글자 Jost / 인트로 타이틀만 Outfit */
  --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-display: "Jost", "Futura", "Pretendard Variable", sans-serif;
  --font-intro: "Outfit", "Pretendard Variable", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;
  --font-weight-heavy: 900;

  /* 글자 크기 — 큰 제목과 작은 메타 정보의 대비를 크게 */
  --fs-display: clamp(2.75rem, 12vw, 12rem);      /* INTRODUCE 의 WE STILL SING: 글자 폭이 7.3em 이라 12vw 면 여백 안에 딱 맞음 */
  --fs-h1: clamp(2.5rem, 7vw, 8.25rem);           /* 첫 화면 제목 */
  --fs-h2: clamp(2.125rem, 5vw, 5.5rem);          /* 섹션 제목 */
  --fs-h3: clamp(1.5rem, 2.6vw, 2.75rem);
  --fs-lead: clamp(1.125rem, 1.55vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.1875rem);       /* 16 ~ 19px */
  --fs-small: 0.875rem;
  --fs-meta: 0.75rem;                              /* 12px 대문자 메타 */
  --tracking-tight: -0.045em;   /* 한글 큰 제목 */
  --tracking-display: -0.04em;  /* 영문 큰 제목 */
  --tracking-meta: 0.16em;
  --lh-heading: 1.12;
  --lh-body: 1.75;

  /* 간격 — 섹션마다 다르게 써서 세로 리듬을 만든다 */
  --space-3xl: clamp(120px, 16vw, 240px);
  --space-2xl: clamp(96px, 12vw, 184px);
  --space-xl: clamp(72px, 8.5vw, 128px);
  --space-l: clamp(48px, 5.5vw, 88px);
  --space-m: clamp(32px, 3.5vw, 56px);
  --space-s: clamp(20px, 2vw, 28px);

  /* 그리드 */
  --container-max: 1440px;
  --container-padding: 20px;
  --gutter: 16px;
  --header-height: 60px;

  /* 모서리 — 둥근 카드는 쓰지 않음 */
  --radius-s: 2px;

  /* 모션 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  :root {
    --container-padding: clamp(32px, 4.4vw, 72px);
    --gutter: clamp(20px, 2.2vw, 32px);
    --header-height: 76px;
  }
}

/* ---------- 2. 리셋 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 디자인적인 검정: 화면 위쪽에서 아주 옅게 들어오는 빛 + 인쇄물 같은 미세한 점 질감 (화면에 고정) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgb(var(--rgb-on-accent) / 5%), transparent 70%),
    radial-gradient(rgb(var(--rgb-on-accent) / 3.5%) 0.7px, transparent 1px);
  background-size: 100% 100%, 3px 3px;
}

/* 질감 층 위로 본문이 오도록 */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

section {
  scroll-margin-top: var(--header-height);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* 스크립트가 포커스만 옮기는 제목(tabindex="-1")에는 테두리를 그리지 않음 */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- 3. 공통 레이아웃 · 섹션 색 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* 섹션 구분: 배경은 모두 같은 검정이라, 섹션이 시작될 때 화면 폭 전체 가는 선 하나 */
.rule-top {
  border-top: 1px solid var(--color-line);
}

/* ---------- 4. 공통 텍스트 ---------- */
/* 작은 대문자 메타 정보 (섹션 번호 · 라벨) */
.meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-meta);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.meta__num {
  color: var(--color-text);
}

.meta__num::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background-color: currentColor;
}

/* 섹션 머리: 메타는 왼쪽 좁은 칸, 제목은 오른쪽 넓은 칸, 설명은 더 오른쪽 좁은 칸 */
.section-head {
  display: grid;
  gap: 20px;
  margin-bottom: var(--space-xl);
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: var(--font-weight-black);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* 영문 섹션 제목: Jost + 키 컬러 */
.section-head__title--en {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.section-head__lead {
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 32px;
  }

  .section-head .meta {
    grid-column: 1 / 4;
    padding-top: 1.4em;
  }

  .section-head__title {
    grid-column: 4 / 13;
  }

  .section-head__lead {
    grid-column: 8 / 13;
  }
}

.text-danger {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

/* ---------- 5. 링크형 CTA (글자 + 화살표) ----------
   둥근 버튼 대신 글자와 화살표. 마우스를 올리면 밑줄이 그어지고 화살표가 움직임 */
.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding-block: 6px;
  font-size: var(--fs-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.cta__text {
  position: relative;
}

.cta__text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-expo);
}

.cta:hover .cta__text::after,
.cta:focus-visible .cta__text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.cta__arrow {
  display: inline-block;
  transition: transform 0.6s var(--ease-expo);
}

.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow {
  transform: translate3d(6px, 0, 0);
}

/* 주 CTA: 글자를 키우고, 코랄 레드 밑줄을 늘 보여 줌 */
.cta--primary {
  font-size: var(--fs-lead);
}

.cta--primary .cta__text::after {
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(1);
}

.cta--primary .cta__arrow {
  color: var(--color-primary);
}

/* 페이지에서 단 하나뿐인 채움 버튼 (#join) */
.apply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 20px 28px;
  font-size: clamp(1.125rem, 1.8vw, 1.625rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.02em;
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-s);
}

.apply__arrow {
  font-size: 1.35em;
  line-height: 1;
  transition: transform 0.6s var(--ease-expo);
}

.apply:hover .apply__arrow,
.apply:focus-visible .apply__arrow {
  transform: translate3d(5px, -5px, 0);
}

/* ---------- 6. Header ----------
   첫 화면(사진) 위에서는 투명, 첫 화면을 지나면 검정 바탕 + 가는 선 (.is-solid).
   내려가는 중엔 숨고(.is-hidden) 올라오면 나타남. 동작은 main.js 8번 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  color: var(--color-text);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease-expo);
}

.site-header.is-solid,
.site-header.is-menu-open {
  background-color: var(--color-bg);
  border-bottom-color: var(--color-line);
}

.site-header.is-hidden:not(.is-menu-open):not(:focus-within) {
  transform: translate3d(0, -100%, 0);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  line-height: 1;
  color: var(--color-primary);
}

.logo__main {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--font-weight-heavy);
  letter-spacing: 0.02em;
}

/* 햄버거 버튼 (모바일 전용): 가는 선 두 줄 느낌을 위해 가운데 막대는 짧게 */
.nav-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  margin-right: -10px;
  padding-right: 10px;
}

.nav-toggle__bar {
  width: 22px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: transform 0.4s var(--ease-expo), opacity 0.25s ease, width 0.4s var(--ease-expo);
}

.nav-toggle__bar:nth-child(2) {
  width: 14px;
}

.site-header.is-menu-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.site-header.is-menu-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-menu-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* 모바일 메뉴: 헤더 아래 화면 전체를 덮는 검정 판 + 큰 글자 메뉴 */
.site-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-l) var(--container-padding);
  background-color: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-header.is-menu-open .site-nav {
  opacity: 1;
  visibility: visible;
}

.site-nav__list {
  display: grid;
  gap: 6px;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-text);
}

/* 현재 위치: 글자 아래 코랄 레드 선 */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-expo);
}

.site-nav__link.is-active::after {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .logo__main {
    font-size: 19px;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-header.is-menu-open .site-nav {
    position: static;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
  }

  .site-nav__list {
    display: flex;
    gap: clamp(24px, 3vw, 44px);
  }

  .site-nav__link {
    padding: 8px 0;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-meta);
    transition: opacity 0.2s ease;
  }

  .site-nav__link:hover {
    opacity: 0.7;
  }

  .site-nav__link::after {
    bottom: 0;
    height: 1.5px;
  }
}

/* ---------- 7. #home — 화면 전체 무대 사진 + 아주 큰 제목 ----------
   커튼이 열리면 뒤에 실제 무대 사진이 드러난다. 글자는 사진 아래쪽(관객석 어두운 부분)에 놓음 */
.home {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.home__media {
  position: absolute;
  inset: 0;
  margin: 0;
}

.home__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* 글자가 읽히도록 아래쪽과 맨 위(헤더 자리)만 어둡게 */
.home__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to top, rgb(var(--rgb-bg) / 96%) 0%, rgb(var(--rgb-bg) / 80%) 30%, rgb(var(--rgb-bg) / 12%) 62%, transparent 76%),
    linear-gradient(to bottom, rgb(var(--rgb-bg) / 55%) 0%, transparent 18%);
}

.home__inner {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--header-height) + var(--space-l));
  padding-bottom: var(--space-l);
}

.home__meta {
  margin-bottom: var(--space-s);
  color: var(--color-text-body);
}

.home__title {
  font-size: var(--fs-h1);
  font-weight: var(--font-weight-black);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.home__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* 받침이 잘리지 않게 */
}

.home__title .line > span {
  display: block;
}

.home__foot {
  display: grid;
  gap: 28px;
  margin-top: var(--space-m);
}

.home__desc {
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

.home__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 36px;
}

@media (min-width: 1024px) {
  .home__foot {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }

  .home__desc {
    grid-column: 1 / 6;
  }

  .home__actions {
    grid-column: 8 / 13;
    justify-content: flex-end;
  }
}

/* 첫 화면 등장: 커튼이 절반쯤 열리면(html.is-stage-lit, main.js 6번) 글자가 올라옴.
   다시 커튼을 닫으면 숨었다가, 열 때 또 재생 */
.js .home [data-hero] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.js .home__title .line > span {
  transform: translate3d(0, 105%, 0);
  transition: transform 1.1s var(--ease-expo);
}

html.is-stage-lit .home [data-hero],
html.is-stage-lit .home__title .line > span {
  opacity: 1;
  transform: none;
}

html.is-stage-lit .home__title .line:nth-child(2) > span { transition-delay: 0.1s; }
html.is-stage-lit .home [data-hero="2"] { transition-delay: 0.25s; }
html.is-stage-lit .home [data-hero="3"] { transition-delay: 0.35s; }

/* ---------- 7-b. 핵심 숫자 띠 (작은 글자 구간) ---------- */
.facts {
  padding-block: var(--space-l) var(--space-xl);
}

.home__facts {
  display: grid;
  gap: 28px;
}

.home__facts > div {
  padding-top: 18px;
  border-top: 1px solid var(--color-line-strong);
}

.home__facts dt {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.home__facts dd {
  margin-top: 10px;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .home__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

/* 데스크톱: 세 칸을 고르게 나누지 않고 한 칸씩 띄워 비대칭으로 */
@media (min-width: 1024px) {
  .home__facts {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .home__facts > div:nth-child(1) { grid-column: 1 / 4; }
  .home__facts > div:nth-child(2) { grid-column: 5 / 8; }
  .home__facts > div:nth-child(3) { grid-column: 10 / 13; }
}

/* ---------- 8. #introduce — 화면 폭을 가득 채우는 큰 글자 (키 컬러) ---------- */
.introduce {
  padding-block: var(--space-2xl) var(--space-3xl);
  overflow: hidden;           /* 자간 등장 모션 중 가로 스크롤 방지 */
}

.introduce__meta {
  margin-bottom: var(--space-m);
}

.introduce__title {
  margin-left: -0.04em;       /* W 의 왼쪽 여백을 눈으로 맞춤 */
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--font-weight-heavy);
  line-height: 0.86;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
  color: var(--color-primary);
}

.introduce__headline {
  margin-top: var(--space-m);
  max-width: 13em;
  text-wrap: balance;         /* 마지막 한 단어만 떨어지지 않게 */
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .introduce__headline {
    margin-left: calc(50% + var(--gutter) / 2);
  }
}

/* ---------- 9. #track — 4개의 프로젝트 트랙 ---------- */
.track {
  padding-block: var(--space-2xl);
}

/* 트랙 목록: 카드 대신 가는 선으로 나눈 목록 */
.track-index {
  margin-bottom: var(--space-2xl);
  border-top: 1px solid var(--color-line-strong);
}

.track-index > li + li {
  border-top: 1px solid var(--color-line);
}

.track-index__item {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  grid-template-areas:
    "num name emoji"
    ".   ko   ko"
    ".   tag  tag";
  align-items: baseline;
  column-gap: 12px;
  padding: 22px 0 24px;
}

.track-index__num {
  grid-area: num;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.track-index__emoji {
  grid-area: emoji;
  font-size: 22px;
  line-height: 1;
  transition: transform 0.6s var(--ease-expo);
}

.track-index__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  transition: transform 0.6s var(--ease-expo);
}

.track-index__ko {
  grid-area: ko;
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-body);
}

.track-index__tag {
  grid-area: tag;
  margin-top: 2px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.track-index__item:hover .track-index__name,
.track-index__item:focus-visible .track-index__name {
  transform: translate3d(8px, 0, 0);
}

.track-index__item:hover .track-index__emoji,
.track-index__item:focus-visible .track-index__emoji {
  transform: scale(1.15) rotate(-6deg);
}

@media (min-width: 1024px) {
  .track-index {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .track-index > li + li {
    border-top: 0;
    border-left: 1px solid var(--color-line);
  }

  .track-index__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "num  emoji"
      "name name"
      "ko   ko"
      "tag  tag";
    row-gap: 0;
    height: 100%;
    padding: 24px 24px 32px;
  }

  .track-index > li:first-child .track-index__item {
    padding-left: 0;
  }

  .track-index__name {
    margin-top: 44px;
  }
}

/* 트랙 상세: 상자 없이 가는 선 하나로 시작. 이름 쪽이 트랙마다 좌우를 바꿈 */
.track-panels {
  display: grid;
  gap: var(--space-xl);
}

.track-panel {
  display: grid;
  gap: 40px;
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line-strong);
  scroll-margin-top: calc(var(--header-height) + 24px);
}

.track-panel__index {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-meta);
  color: var(--color-text-muted);
}

.track-panel__emoji {
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.track-panel__name {
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.4vw, 6.75rem);
  font-weight: var(--font-weight-black);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

.track-panel__title {
  display: block;
  margin-top: 22px;
  font-family: var(--font-base);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.track-panel__summary {
  max-width: 30em;
  font-size: var(--fs-lead);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--color-text-body);
}

.track-panel__result {
  margin-top: 32px;
  padding-top: 18px;
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-black);
  line-height: 1.25;
  letter-spacing: -0.035em;
  color: var(--color-text);
  border-top: 1px solid var(--color-line);
}

.track-panel__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-base);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .track-panel {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .track-panel__side {
    grid-column: 1 / 7;
  }

  .track-panel__body {
    grid-column: 8 / 13;
    padding-top: 52px;
  }
}

/* ---------- 10. #musical — 8주 커리큘럼 ---------- */
.musical {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.curriculum {
  display: grid;
  gap: var(--space-l);
}

.curriculum__head .meta {
  margin-bottom: var(--space-m);
}

.curriculum__label {
  margin-bottom: 14px;
  font-size: var(--fs-lead);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);   /* 섹션 라벨 (굵게 18px 이상) */
}

.curriculum__desc {
  margin-top: 24px;
  max-width: 24em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

@media (min-width: 1024px) {
  .curriculum {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .curriculum__head {
    grid-column: 1 / 6;
    position: sticky;
    top: calc(var(--header-height) + 48px);
  }

  .timeline {
    grid-column: 7 / 13;
  }
}

/* 타임라인: 주차마다 가는 선, 영문 키워드는 크게 */
.timeline {
  --week-width: 52px;
  --dot-column: 18px;
  --column-gap: 14px;
  --row-height: 108px;
  position: relative;
}

.timeline__track {
  position: absolute;
  /* 위치/길이는 main.js가 점 위치를 측정해 덮어씀. 아래는 JS 없을 때 기본값 */
  top: var(--track-top, calc(var(--row-height) / 2));
  height: var(--track-height, calc(100% - var(--row-height)));
  left: calc(var(--week-width) + var(--column-gap) + var(--dot-column) / 2 - 0.5px);
  width: 1px;
  background-color: var(--color-line-strong);
}

.timeline__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5px;
  width: 2px;
  background-color: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
}

.timeline__item {
  display: grid;
  grid-template-columns: var(--week-width) var(--dot-column) minmax(0, 1fr);
  column-gap: var(--column-gap);
  align-items: center;
  min-height: var(--row-height);
  border-bottom: 1px solid var(--color-line);
}

.timeline__item:first-child {
  border-top: 1px solid var(--color-line);
}

.timeline__week {
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-out);
}

.timeline__dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.timeline__item.is-passed .timeline__dot,
.timeline__item.is-current .timeline__dot {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.timeline__desc {
  padding-block: 18px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-text-body);
  transition: color 0.3s var(--ease-out);
}

/* 주차 키워드 (WHO ARE YOU?, TEXT ...) */
.timeline__key {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  transition: color 0.3s var(--ease-out);
}

.timeline__item.is-passed .timeline__key,
.timeline__item.is-passed .timeline__week,
.timeline__item.is-current .timeline__week {
  color: var(--color-text);
}

/* 현재 주차: 키워드를 코랄 레드로 */
.timeline__item.is-current .timeline__key {
  color: var(--color-primary);
}

.timeline__item.is-current .timeline__desc {
  color: var(--color-text);
}

@media (min-width: 768px) {
  .timeline {
    --week-width: 64px;
    --dot-column: 22px;
    --column-gap: 22px;
    --row-height: 128px;
  }
}

/* ---------- 11. MANIFESTO — 화면 폭 전체 띠 (한 단계 뜬 검정) ---------- */
.manifesto {
  padding-block: var(--space-2xl);
  overflow: hidden;
  background-color: var(--color-dark);
  border-block: 1px solid var(--color-line);
}

.banner {
  display: grid;
  gap: 28px;
}

.banner__title {
  font-size: clamp(2.375rem, 6.4vw, 7.25rem);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.banner__sub {
  font-size: var(--fs-lead);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-text-body);
}

.banner__aside {
  display: grid;
  gap: 24px;
  justify-items: start;
}

.banner__quote {
  max-width: 24em;
  padding-top: 20px;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
}

@media (min-width: 1024px) {
  .banner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-m);
  }

  .banner__meta {
    grid-column: 1 / 4;
    align-self: start;
  }

  .banner .pile-wrap {
    grid-column: 4 / 13;
    justify-content: flex-end;
    margin: 0;
  }

  .banner__title {
    grid-column: 1 / 12;
  }

  .banner__sub {
    grid-column: 1 / 6;
  }

  .banner__aside {
    grid-column: 8 / 13;
  }
}

/* ---------- 12. #instructor — 디렉터 소개 ----------
   사진은 오른쪽 화면 끝까지, 이름은 아주 크게 써서 사진 가장자리에 살짝 겹침 */
.instructor {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.profile__top {
  display: grid;
  gap: 40px;
}

.profile__name {
  font-size: clamp(4rem, 17vw, 16rem);
  font-weight: var(--font-weight-black);
  line-height: 0.95;
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: var(--color-text);
}

.profile__bio {
  margin-top: var(--space-m);
  max-width: 27em;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-text-body);
}

.instructor__photo {
  position: relative;
  margin-inline: calc(-1 * var(--container-padding));
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-dark);
}

.instructor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 22%;   /* 얼굴과 마이크가 잘리지 않도록 위쪽 가운데 기준 */
  transition: transform 1.2s var(--ease-expo);
}

@media (min-width: 1024px) {
  .profile__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .profile__intro {
    position: relative;
    z-index: 1;               /* 이름이 사진 위로 겹치게 */
    grid-column: 1 / 6;       /* 이름만 칸 밖으로 넘쳐 사진 가장자리에 겹침 (nowrap) */
    grid-row: 1;
    padding-top: var(--space-l);
  }

  .instructor__photo {
    grid-column: 6 / 13;
    grid-row: 1;
    margin-inline: 0 calc(-1 * var(--container-padding));
    aspect-ratio: auto;
    height: min(88vh, 900px);
  }
}

/* 분야별 경력: 공연 프로그램북의 크레딧처럼 */
.profile__career {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-line-strong);
}

.profile__row {
  display: grid;
  gap: 10px;
  padding-block: 26px;
  border-bottom: 1px solid var(--color-line);
}

.profile__row dt {
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-meta);
  color: var(--color-text-muted);
}

/* 작품명이 줄 끝에서 중간에 잘리지 않도록 항목 단위로 줄바꿈 */
.profile__list li {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--color-text);
}

/* 작품명·곡명·브랜드명 강조: 흰색 굵게 */
.profile__em {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.profile__list li:not(:last-child)::after {
  content: "·";
  margin-inline: 10px;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .profile__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-block: 32px;
  }

  .profile__row dt {
    grid-column: 1 / 4;
    padding-top: 0.6em;
  }

  .profile__row dd {
    grid-column: 4 / 13;
  }
}

/* 사진 드러남: 아래에서 위로 걷히며 살짝 다가옴. 마우스를 올리면 1.03배 */
.js .reveal-image[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease-expo);
}

.js .reveal-image[data-reveal] img {
  transform: scale(1.14);
  transition: transform 1.8s var(--ease-expo);
}

.js .reveal-image[data-reveal].is-revealed {
  clip-path: inset(0 0 0 0);
}

.js .reveal-image[data-reveal].is-revealed img {
  transform: none;
}

.reveal-image.is-revealed:hover img,
html:not(.js) .reveal-image:hover img {
  transform: scale(1.03);
}

/* ---------- 13. #review (현재 hidden) ---------- */
.review {
  padding-block: var(--space-2xl);
}

.review__list {
  display: grid;
  gap: 16px;
}

.review-card {
  padding: 28px 0;
  border-top: 1px solid var(--color-line-strong);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-dark);
}

.review-card__name {
  font-weight: var(--font-weight-bold);
}

.review-card__stars {
  font-size: 14px;
  color: var(--color-star);
}

.review-card__body {
  margin-top: 16px;
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

@media (min-width: 768px) {
  .review__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

/* ---------- 14. #join — 한눈에 보기 + 지원 ---------- */
.join {
  padding-block: var(--space-2xl);
}

.join__grid {
  display: grid;
  gap: var(--space-xl);
}

.summary .meta {
  margin-bottom: var(--space-m);
}

.summary__title {
  font-size: clamp(2.125rem, 4vw, 4.25rem);   /* 6칸 폭에서 "보기"가 혼자 떨어지지 않게 */
}

.summary__list {
  margin-top: var(--space-l);
  border-top: 1px solid var(--color-line-strong);
}

.summary__row {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-line);
}

.summary__row dt {
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  padding-top: 0.15em;
}

.summary__row dd {
  font-size: var(--fs-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  color: var(--color-text);
}

.summary__row dd span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.product__name {
  font-size: var(--fs-lead);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.product__price {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

.product__desc {
  margin-top: 24px;
  max-width: 28em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-body);
}

.refund {
  margin-top: var(--space-m);
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.refund__title {
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-text);
}

.refund__list {
  margin-top: 12px;
}

.refund__list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--color-text-body);
}

.refund__list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.refund__note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.product .apply {
  margin-top: var(--space-m);
}

@media (min-width: 1024px) {
  .join__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .summary {
    grid-column: 1 / 7;
  }

  .product {
    grid-column: 8 / 13;
    padding-top: calc(var(--space-m) + 1.4em);
  }
}

/* ---------- 14-b. 모바일 하단 고정 지원 버튼 ----------
   첫 화면·MANIFESTO 의 지원 링크나 #join 이 보이는 동안에는 main.js 가 .is-hidden 을 붙여 숨긴다 */
.mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: var(--font-weight-black);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-s);
  transition: transform 0.5s var(--ease-expo), opacity 0.3s ease;
}

.mobile-cta.is-hidden {
  transform: translateY(160%);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

/* ---------- 15. Footer ---------- */
.site-footer {
  padding-block: var(--space-xl) calc(var(--space-l) + 72px);   /* 모바일: 하단 고정 버튼 높이만큼 여유 */
}

.site-footer__inner {
  display: grid;
  gap: 20px;
  color: var(--color-text-body);
}

.site-footer__mark {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--font-weight-heavy);
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.site-footer__insta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-size: var(--fs-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.site-footer__links {
  display: flex;
  gap: 20px;
  font-size: 13px;
}

.site-footer__links .is-strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.site-footer__biz {
  font-size: 12px;
  color: var(--color-text-muted);
}

.site-footer__biz:empty {
  display: none;
}

@media (min-width: 768px) {
  .site-footer {
    padding-bottom: var(--space-l);
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-line);
  }

  .site-footer__mark { grid-column: 1 / 6; }
  .site-footer__insta { grid-column: 7 / 9; }
  .site-footer__links { grid-column: 9 / 11; }
  .site-footer__biz { grid-column: 11 / 13; }
}

/* ---------- 16. 스크롤 등장 모션 ----------
   html.js 일 때만 숨김 → JS가 없으면 내용이 그대로 보임
   main.js가 화면 진입 시 .is-revealed 추가, 화면 밖으로 완전히 나가면 제거 (매번 재생) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-reveal-delay="1"] {
  transition-delay: 0.1s;
}

.js [data-reveal-delay="2"] {
  transition-delay: 0.2s;
}

.js [data-reveal-delay="3"] {
  transition-delay: 0.3s;
}

/* INTRODUCE 대형 타이포: 아래 가려진 선에서 글자가 솟아오름 (이 페이지의 가장 큰 글자)
   자간을 벌렸다 좁히면 화면 밖으로 잘려 보여서, 폭은 그대로 두고 위로만 움직인다 */
.js .introduce__title[data-reveal] {
  opacity: 1;
  transform: translate3d(0, 0.5em, 0);
  clip-path: inset(0 -0.2em 100% -0.2em);
  transition: transform 1.4s var(--ease-expo), clip-path 1.4s var(--ease-expo);
}

.js .introduce__title[data-reveal].is-revealed {
  transform: none;
  clip-path: inset(-0.1em -0.2em -0.1em -0.2em);
}

/* 상단 스크롤 진행 바 (코랄 레드 선) */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- 17. 모션 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js .home [data-hero],
  .js .home__title .line > span {
    opacity: 1;
    transform: none;
  }

  .js .introduce__title[data-reveal],
  .js .introduce__title[data-reveal].is-revealed {
    clip-path: none;
  }

  .js .reveal-image[data-reveal] {
    clip-path: none;
  }

  .js .reveal-image[data-reveal] img {
    transform: none;
  }

  .scroll-progress {
    display: none;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 11-b. MANIFESTO 글 상자 더미 ----------
   테두리만 있는 알약 모양 상자들이 기울어진 채 쌓여 있음 (참고: NEW BRAND 포스터).
   단어는 모두 기획안의 커리큘럼·트랙 용어. 장식이라 aria-hidden.
   860×240 고정 캔버스에 좌표로 배치하고, 화면 폭에 따라 캔버스를 통째로 축소한다.
   배너가 화면에 들어올 때마다 위에서 떨어져 쌓이는 모션 (볼 때마다 재생). */
.pile-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 240px;
  margin: 20px 0 8px;
  overflow: hidden;           /* 축소 전 캔버스 폭이 페이지 가로 스크롤을 만들지 않게 */
}

.pile {
  position: relative;
  flex: 0 0 auto;
  width: 860px;
  height: 240px;
  transform-origin: top center;
}

.pile__chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  height: 54px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text);
  border: 1.5px solid rgb(var(--rgb-on-accent) / 55%);
  border-radius: 999px;
  background-color: var(--color-dark);   /* 겹친 상자가 뒤 상자를 가리도록 띠 배경과 같은 색 */
  transform: rotate(var(--r));
}

/* 세로로 선 상자 */
.pile__chip--tall {
  width: 54px;
  height: var(--w);
}

.pile__chip--tall span {
  transform: rotate(-90deg);
}

/* 떨어져 쌓이는 모션: JS가 켜져 있을 때만 숨겼다가, 배너가 보이면 재생 */
.js .banner .pile__chip {
  opacity: 0;
}

.js .banner.is-revealed .pile__chip {
  opacity: 1;
  animation: chip-drop 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  animation-delay: var(--d);
}

@keyframes chip-drop {
  from { opacity: 0; transform: translate3d(0, -280px, 0) rotate(calc(var(--r) + 24deg)); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--r)); }
}

/* 폭에 맞춘 정확한 축소는 main.js 7번이 계산. 아래는 JS가 없을 때의 기본값 */
@media (max-width: 1023px) {
  .pile-wrap { height: 163px; }
  .pile { transform: scale(0.68); }
}

@media (max-width: 767px) {
  .pile-wrap { height: 108px; margin-top: 12px; }
  .pile { transform: scale(0.45); }
}

@media (max-width: 479px) {
  .pile-wrap { height: 79px; }
  .pile { transform: scale(0.33); }
}

@media (prefers-reduced-motion: reduce) {
  .js .banner .pile__chip,
  .js .banner.is-revealed .pile__chip {
    opacity: 1;
    animation: none !important;
  }
}

/* =========================================================
   19. 인트로 — 붉은 커튼 (2026-09-22 추가)
   - 기본은 숨김. head 인라인 스크립트가 html.has-intro 를 붙일 때만 보임
     → JS가 실패해도 본문은 항상 보인다
   - 페이지 맨 위에 늘 있음: 스크롤한 만큼 좌우로 열리고, 다시 올리면 닫힘 (ARTPIE 참고)
   - 커튼·밸런스·스포트라이트·입자 모두 CSS 그라데이션 (이미지 없음)
   - 애니메이션은 transform, opacity 만 사용
   ========================================================= */
.intro {
  display: none;
}

html.has-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;              /* 헤더(100)·모바일 버튼(90)보다 위 */
  overflow: hidden;
  pointer-events: none;       /* 스크롤·클릭은 뒤 페이지로 (스크롤 안내 버튼만 누를 수 있음) */
}

/* 완전히 열리면 그리지 않음 (다시 올리면 나타남) */
html.has-intro .intro.is-open {
  visibility: hidden;
}

/* 커튼이 열리는 동안 첫 화면을 헤더 아래에 붙잡아 둠.
   아래 빈 블록 높이만큼 스크롤하면 커튼이 끝까지 열리고, 그 뒤로는 평소처럼 스크롤 */
html.has-intro .opening::after {
  content: "";
  display: block;
  height: 120vh;              /* sticky 는 부모의 padding 안으로는 못 움직여서, 빈 블록으로 스크롤 여유를 만듦 */
}

html.has-intro .opening > .home {
  position: sticky;
  top: 0;
}

html.has-intro .opening > .home .home__media img {
  transform: scale(calc(1.14 - 0.14 * var(--curtain, 1)));
  transform-origin: center 40%;
}

/* ---------- 19-1. 커튼 패널 (좌우 각 50%) ----------
   레퍼런스 측정값에 맞춤: 골은 거의 검정, 하이라이트는 어두운 크림슨, 주름 간격 30~150px 불규칙.
   주름은 ::before (아주 느리게 흔들림), 위·아래 어둡게 + 안쪽 가장자리 그림자는 ::after.
   주름 값은 scratchpad/natural_curtain.py 로 생성 */
.intro__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);     /* 가운데 틈이 보이지 않게 1px 겹침 */
  overflow: hidden;
  background-color: var(--curtain-face);
  will-change: transform;
}

/* 스크롤한 만큼 바깥으로 모이며 열림 (--curtain 0 → 1) */
.intro__curtain--left {
  left: 0;
  transform-origin: left center;
  transform: translate3d(calc(var(--curtain, 0) * -100%), 0, 0) scaleX(calc(1 - var(--curtain, 0) * 0.18));
}

.intro__curtain--right {
  right: 0;
  transform-origin: right center;
  transform: translate3d(calc(var(--curtain, 0) * 100%), 0, 0) scaleX(calc(1 - var(--curtain, 0) * 0.18));
}

/* 주름 층 (흔들림) */
.intro__curtain::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24px;
  right: -24px;
  background-repeat: repeat-x;
  animation: intro-sway 8s ease-in-out infinite alternate;
}

.intro__curtain--left::before {
  background-image:
    linear-gradient(90deg,
      transparent 0px,
      transparent 275px,
      rgb(var(--rgb-burgundy-shadow) / 36%) 375px,
      transparent 475px,
      transparent 754px,
      rgb(var(--rgb-burgundy-shadow) / 36%) 827px,
      transparent 901px,
      transparent 1211px,
      rgb(var(--rgb-burgundy-shadow) / 20%) 1268px,
      transparent 1325px,
      transparent 1616px,
      rgb(var(--rgb-burgundy-shadow) / 36%) 1691px,
      transparent 1766px,
      transparent 1730px),
    linear-gradient(90deg,
      var(--color-burgundy-shadow) 0px,
      var(--curtain-face) 11px,
      var(--curtain-face) 23px,
      var(--curtain-hi-dim) 45px,
      var(--curtain-face) 67px,
      var(--curtain-face) 124px,
      var(--color-burgundy-shadow) 135px,
      var(--curtain-face) 140px,
      var(--curtain-face) 144px,
      var(--curtain-hi-dim) 154px,
      var(--curtain-face) 164px,
      var(--curtain-face) 185px,
      var(--color-burgundy-shadow) 190px,
      var(--curtain-face) 198px,
      var(--curtain-face) 215px,
      var(--curtain-hi-dim) 237px,
      var(--curtain-face) 258px,
      var(--curtain-face) 274px,
      var(--color-burgundy-shadow) 282px,
      var(--curtain-face) 296px,
      var(--curtain-face) 300px,
      var(--curtain-hi-mid) 319px,
      var(--curtain-face) 338px,
      var(--curtain-face) 371px,
      var(--curtain-crease) 385px,
      var(--curtain-face) 397px,
      var(--curtain-face) 400px,
      var(--curtain-hi-dim) 417px,
      var(--curtain-face) 434px,
      var(--curtain-face) 463px,
      var(--color-burgundy-shadow) 475px,
      var(--curtain-face) 483px,
      var(--curtain-face) 501px,
      var(--curtain-hi-bright) 514px,
      var(--curtain-face) 527px,
      var(--curtain-face) 544px,
      var(--curtain-crease) 552px,
      var(--curtain-face) 565px,
      var(--curtain-face) 570px,
      var(--curtain-hi-bright) 592px,
      var(--curtain-face) 613px,
      var(--curtain-face) 634px,
      var(--curtain-crease) 647px,
      var(--curtain-face) 654px,
      var(--curtain-face) 660px,
      var(--curtain-hi-mid) 668px,
      var(--curtain-face) 676px,
      var(--curtain-face) 697px,
      var(--curtain-crease) 704px,
      var(--curtain-face) 710px,
      var(--curtain-face) 723px,
      var(--curtain-hi-bright) 733px,
      var(--curtain-face) 744px,
      var(--curtain-face) 752px,
      var(--color-burgundy-shadow) 758px,
      var(--curtain-face) 764px,
      var(--curtain-face) 772px,
      var(--curtain-hi-mid) 779px,
      var(--curtain-face) 787px,
      var(--curtain-face) 790px,
      var(--color-burgundy-shadow) 796px,
      var(--curtain-face) 799px,
      var(--curtain-face) 815px,
      var(--curtain-hi-mid) 820px,
      var(--curtain-face) 826px,
      var(--curtain-face) 832px,
      var(--curtain-crease) 835px,
      var(--curtain-face) 847px,
      var(--curtain-face) 852px,
      var(--curtain-hi-bright) 875px,
      var(--curtain-face) 899px,
      var(--curtain-face) 924px,
      var(--curtain-crease) 936px,
      var(--curtain-face) 943px,
      var(--curtain-face) 952px,
      var(--curtain-hi-mid) 960px,
      var(--curtain-face) 969px,
      var(--curtain-face) 971px,
      var(--color-burgundy-shadow) 978px,
      var(--curtain-face) 981px,
      var(--curtain-face) 985px,
      var(--curtain-hi-mid) 994px,
      var(--curtain-face) 1002px,
      var(--curtain-face) 1017px,
      var(--color-burgundy-shadow) 1020px,
      var(--curtain-face) 1024px,
      var(--curtain-face) 1026px,
      var(--curtain-hi-mid) 1033px,
      var(--curtain-face) 1040px,
      var(--curtain-face) 1051px,
      var(--curtain-crease) 1055px,
      var(--curtain-face) 1065px,
      var(--curtain-face) 1094px,
      var(--curtain-hi-bright) 1109px,
      var(--curtain-face) 1124px,
      var(--curtain-face) 1134px,
      var(--color-burgundy-shadow) 1144px,
      var(--curtain-face) 1148px,
      var(--curtain-face) 1162px,
      var(--curtain-hi-bright) 1167px,
      var(--curtain-face) 1172px,
      var(--curtain-face) 1176px,
      var(--curtain-crease) 1180px);
  background-size: 1730px 100%, 1180px 100%;
}

.intro__curtain--right::before {
  background-image:
    linear-gradient(90deg,
      transparent 0px,
      transparent 163px,
      rgb(var(--rgb-burgundy-shadow) / 20%) 238px,
      transparent 313px,
      transparent 573px,
      rgb(var(--rgb-burgundy-shadow) / 36%) 627px,
      transparent 681px,
      transparent 852px,
      rgb(var(--rgb-burgundy-shadow) / 20%) 905px,
      transparent 959px,
      transparent 1256px,
      rgb(var(--rgb-burgundy-shadow) / 36%) 1315px,
      transparent 1375px,
      transparent 1570px),
    linear-gradient(90deg,
      var(--color-burgundy-shadow) 0px,
      var(--curtain-face) 6px,
      var(--curtain-face) 19px,
      var(--curtain-hi-bright) 28px,
      var(--curtain-face) 36px,
      var(--curtain-face) 48px,
      var(--color-burgundy-shadow) 54px,
      var(--curtain-face) 60px,
      var(--curtain-face) 69px,
      var(--curtain-hi-dim) 74px,
      var(--curtain-face) 79px,
      var(--curtain-face) 86px,
      var(--color-burgundy-shadow) 92px,
      var(--curtain-face) 102px,
      var(--curtain-face) 121px,
      var(--curtain-hi-mid) 138px,
      var(--curtain-face) 156px,
      var(--curtain-face) 164px,
      var(--color-burgundy-shadow) 174px,
      var(--curtain-face) 187px,
      var(--curtain-face) 217px,
      var(--curtain-hi-mid) 248px,
      var(--curtain-face) 279px,
      var(--curtain-face) 292px,
      var(--color-burgundy-shadow) 305px,
      var(--curtain-face) 309px,
      var(--curtain-face) 322px,
      var(--curtain-hi-bright) 331px,
      var(--curtain-face) 341px,
      var(--curtain-face) 349px,
      var(--color-burgundy-shadow) 353px,
      var(--curtain-face) 367px,
      var(--curtain-face) 373px,
      var(--curtain-hi-dim) 392px,
      var(--curtain-face) 411px,
      var(--curtain-face) 449px,
      var(--color-burgundy-shadow) 463px,
      var(--curtain-face) 469px,
      var(--curtain-face) 473px,
      var(--curtain-hi-mid) 480px,
      var(--curtain-face) 487px,
      var(--curtain-face) 495px,
      var(--color-burgundy-shadow) 501px,
      var(--curtain-face) 506px,
      var(--curtain-face) 512px,
      var(--curtain-hi-dim) 520px,
      var(--curtain-face) 527px,
      var(--curtain-face) 532px,
      var(--curtain-crease) 537px,
      var(--curtain-face) 544px,
      var(--curtain-face) 552px,
      var(--curtain-hi-dim) 559px,
      var(--curtain-face) 567px,
      var(--curtain-face) 589px,
      var(--curtain-crease) 596px,
      var(--curtain-face) 605px,
      var(--curtain-face) 618px,
      var(--curtain-hi-dim) 628px,
      var(--curtain-face) 638px,
      var(--curtain-face) 642px,
      var(--color-burgundy-shadow) 651px,
      var(--curtain-face) 657px,
      var(--curtain-face) 663px,
      var(--curtain-hi-dim) 670px,
      var(--curtain-face) 678px,
      var(--curtain-face) 696px,
      var(--color-burgundy-shadow) 702px,
      var(--curtain-face) 707px,
      var(--curtain-face) 709px,
      var(--curtain-hi-mid) 718px,
      var(--curtain-face) 726px,
      var(--curtain-face) 741px,
      var(--curtain-crease) 746px,
      var(--curtain-face) 750px,
      var(--curtain-face) 755px,
      var(--curtain-hi-mid) 761px,
      var(--curtain-face) 768px,
      var(--curtain-face) 775px,
      var(--curtain-crease) 779px,
      var(--curtain-face) 790px,
      var(--curtain-face) 820px,
      var(--curtain-hi-mid) 837px,
      var(--curtain-face) 855px,
      var(--curtain-face) 861px,
      var(--curtain-crease) 872px,
      var(--curtain-face) 883px,
      var(--curtain-face) 889px,
      var(--curtain-hi-mid) 904px,
      var(--curtain-face) 918px,
      var(--curtain-face) 950px,
      var(--color-burgundy-shadow) 961px,
      var(--curtain-face) 968px,
      var(--curtain-face) 982px,
      var(--curtain-hi-dim) 991px,
      var(--curtain-face) 1000px,
      var(--curtain-face) 1014px,
      var(--color-burgundy-shadow) 1021px,
      var(--curtain-face) 1029px,
      var(--curtain-face) 1036px,
      var(--curtain-hi-mid) 1051px,
      var(--curtain-face) 1065px,
      var(--curtain-face) 1080px,
      var(--color-burgundy-shadow) 1088px,
      var(--curtain-face) 1097px,
      var(--curtain-face) 1114px,
      var(--curtain-hi-dim) 1130px,
      var(--curtain-face) 1146px,
      var(--curtain-face) 1171px,
      var(--color-burgundy-shadow) 1180px);
  background-size: 1570px 100%, 1180px 100%;
  background-position: 37px 0, 0 0;
  animation-duration: 9.5s;
  animation-delay: -3s;
}

@keyframes intro-sway {
  from { transform: translate3d(-4px, 0, 0) scaleX(1); }
  to   { transform: translate3d(5px, 0, 0) scaleX(1.01); }
}

/* 위·아래를 어둡게 (레퍼런스: 위는 약간, 아래는 많이) + 두 커튼이 맞닿는 안쪽 그림자 */
.intro__curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  --curtain-depth: linear-gradient(to bottom,
      rgb(var(--rgb-burgundy-shadow) / 35%) 0%,
      rgb(var(--rgb-burgundy-shadow) / 8%) 22%,
      transparent 40%,
      transparent 58%,
      rgb(var(--rgb-burgundy-shadow) / 30%) 82%,
      rgb(var(--rgb-burgundy-shadow) / 60%) 100%);
}

.intro__curtain--left::after {
  background-image:
    linear-gradient(to left, rgb(var(--rgb-burgundy-shadow) / 55%), transparent),
    var(--curtain-depth);
  background-size: 50px 100%, 100% 100%;
  background-position: right top, 0 0;
}

.intro__curtain--right::after {
  background-image:
    linear-gradient(to right, rgb(var(--rgb-burgundy-shadow) / 55%), transparent),
    var(--curtain-depth);
  background-size: 50px 100%, 100% 100%;
  background-position: left top, 0 0;
}

/* ---------- 19-2. 상단 가로 장식 띠 (밸런스) ----------
   레퍼런스에는 상단 띠가 없어 표시하지 않음 (요소는 남겨 둠) */
.intro__valance {
  display: none;
}

/* ---------- 19-3. 어두운 무대 + 핀 조명 ----------
   .intro__dim  : 커튼 전체를 한 톤 더 누르고 가장자리를 깊은 그림자로 (처음부터 보임)
   .intro__beam : 위에서 내려오는 원뿔 모양 빛줄기
   .intro__spot : 빛이 떨어진 자리 (메인 문구 주변만 밝게)
   빛줄기와 빛 자리는 잠깐 깜빡인 뒤 "딸깍" 켜짐. (날아다니던 입자는 삭제) */
.intro__dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 62% 58% at 50% 48%, transparent 25%, rgb(var(--rgb-burgundy-shadow) / 80%) 100%),
    linear-gradient(rgb(var(--rgb-burgundy-shadow) / 45%), rgb(var(--rgb-burgundy-shadow) / 45%));
}

.intro__beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1100px, 150vw);
  height: 66%;
  transform: translateX(-50%);
  pointer-events: none;
  background-image: conic-gradient(from 159deg at 50% -6%,
    transparent 0deg,
    rgb(var(--rgb-spotlight) / 10%) 12deg,
    rgb(var(--rgb-spotlight) / 17%) 21deg,
    rgb(var(--rgb-spotlight) / 10%) 30deg,
    transparent 42deg,
    transparent 360deg);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  animation: intro-light-on 1.3s linear backwards;
}

.intro__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 40% 32% at 50% 50%, rgb(var(--rgb-spotlight) / 24%) 0%, rgb(var(--rgb-spotlight) / 10%) 45%, transparent 72%);
  animation: intro-light-on 1.3s linear backwards;
}

/* 잠깐 깜빡인 뒤 켜짐 */
@keyframes intro-light-on {
  0%   { opacity: 0; }
  38%  { opacity: 0; }
  44%  { opacity: 0.85; }
  50%  { opacity: 0.25; }
  60%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---------- 19-5. 가운데 콘텐츠 ---------- */
.intro__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  transition: opacity 0.3s ease;
}

/* 주황 타이틀이 버건디 위에서 묻히지 않도록 뒤를 살짝 어둡게 */
.intro__content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1000px, 110vw);
  height: min(520px, 70vh);
  transform: translate(-50%, -50%);
  background-image: radial-gradient(ellipse at center, rgb(var(--rgb-burgundy-shadow) / 35%), transparent 70%);
  z-index: -1;
  pointer-events: none;
}


.intro__title {
  font-family: var(--font-intro);
  font-size: clamp(36px, 12.4vw, 184px);   /* 375px 폭에서도 한 줄 */
  font-weight: 900;
  white-space: nowrap;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-on-accent);
  text-shadow: 0 6px 40px rgb(var(--rgb-burgundy-shadow) / 70%);
}


/* 등장 순서: 스포트라이트 → 타이틀 → 스크롤 안내 (전체 2초 이내)
   fill-mode 를 backwards 로 둬서, 등장이 끝난 뒤에는 아래 스크롤 연동 opacity 가 적용되게 함 */
.intro__title,
.intro__scroll {
  animation: intro-rise 0.7s var(--ease-out) backwards;
}

.intro__title    { animation-delay: 0.8s; }
.intro__scroll   { animation-delay: 1.3s; }

@keyframes intro-rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 19-6. 스크롤 연동: 스크롤한 만큼 커튼이 좌우로 열림 ----------
   --curtain : 0(닫힘) → 1(완전히 열림). main.js 6번이 스크롤 위치로 계산해 :root 에 넣음.
   다시 위로 스크롤하면 그대로 닫힘. 커튼 뒤에는 첫 화면(#home)이 붙잡혀 있다가 살짝 다가오며 드러남 */
.intro__content {
  opacity: calc(1 - var(--curtain, 0) * 4.5);   /* 커튼이 1/4쯤 열리면 사라짐 (뒤 첫 화면 글자와 겹치지 않게) */
  transform: translate3d(0, calc(var(--curtain, 0) * -10vh), 0) scale(calc(1 + var(--curtain, 0) * 0.3));
}

.intro__dim {
  opacity: calc(1 - var(--curtain, 0) * 1.4);
}

.intro__beam,
.intro__spot {
  opacity: calc(1 - var(--curtain, 0) * 1.8);
}

/* ---------- 19-6-b. "스크롤하여 계속" 안내 (화면 아래 가운데) ----------
   누르거나 Enter 로도 커튼이 끝까지 열린 위치로 이동. 테두리·채움 없이 글자와 화살표만 */
.intro__scroll {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 7vh, 72px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: max-content;
  margin-inline: auto;
  padding: 8px 16px;
  color: var(--color-on-accent);
  background: none;
  border: 0;
  border-radius: 12px;
  pointer-events: auto;
  opacity: calc(1 - var(--curtain, 0) * 6);
}

.intro__scroll:focus-visible {
  outline: 2px solid var(--color-on-accent);
  outline-offset: 4px;
}

.intro__scroll-text {
  font-size: clamp(16px, 1.9vw, 24px);
  font-weight: var(--font-weight-bold);
  color: rgb(var(--rgb-on-accent) / 70%);
  transition: color 0.2s ease;
}

.intro__scroll:hover .intro__scroll-text {
  color: var(--color-on-accent);
}

/* 아래 화살표: 천천히 아래로 까딱이며 "내려가세요"를 알림 */
.intro__scroll-arrow {
  width: 22px;
  height: 36px;
  animation: intro-arrow 1.8s ease-in-out infinite;
}

@keyframes intro-arrow {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  50%      { transform: translate3d(0, 8px, 0); opacity: 0.55; }
}

/* 조금이라도 열리면 안내는 누를 수 없게 */
html.is-curtain-moving .intro__scroll {
  pointer-events: none;
}

/* ---------- 19-7. 모션 줄이기: 등장·깜빡임·까딱임·다가오기 없음 (커튼은 스크롤한 만큼만 움직이므로 유지) ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro__beam,
  .intro__spot,
  .intro__title,
  .intro__scroll,
  .intro__scroll-arrow {
    animation: none !important;
  }

  .intro__content,
  html.has-intro .opening > .home .home__media img {
    transform: none;
  }
}

/* Revised curriculum copy and coral manifesto keywords. */
.timeline__title { display: block; color: var(--color-text); font-weight: var(--font-weight-semibold); margin-block: 10px; }
.timeline__detail { display: block; line-height: 1.75; font-size: var(--fs-small); }
.pile__chip { color: var(--color-primary); border-color: var(--color-primary); background-color: var(--color-dark); }

/* Opening poster: stage title, corner credits and a narrow curtain light. */
.intro__title { display: flex; flex-direction: column; align-items: center; font-size: clamp(64px, min(17vw, 18vh), 190px); line-height: .82; letter-spacing: -.055em; }
.intro__title span { display: block; }
.intro__title span + span { margin-top: .08em; }
.intro__eyebrow, .intro__edition { position: absolute; font-family: var(--font-display); font-size: clamp(10px, .85vw, 13px); font-weight: var(--font-weight-semibold); line-height: 1.5; letter-spacing: .16em; color: var(--color-on-accent); }
.intro__eyebrow { top: max(28px, env(safe-area-inset-top)); left: clamp(24px, 4vw, 64px); text-align: left; }
.intro__edition { right: clamp(24px, 4vw, 64px); bottom: 36px; }
.intro__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; pointer-events: none; background: rgb(var(--rgb-spotlight) / 65%); box-shadow: 0 0 24px 4px rgb(var(--rgb-spotlight) / 18%); transform: translateX(-50%) scaleX(calc(1 + var(--curtain, 0) * 90)); opacity: calc(.45 - var(--curtain, 0) * .9); }
.intro__scroll { bottom: clamp(56px, 7vh, 76px); }
.intro__scroll-text { font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .06em; }
@media (max-width: 767px) {
  .intro__edition { left: 24px; right: 24px; bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; font-size: 9px; letter-spacing: .12em; }
  .intro__eyebrow { font-size: 9px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .intro__title { font-size: 17vh; }
  .intro__scroll { left: auto; right: 24px; bottom: 70px; }
  .intro__scroll-text { font-size: 12px; }
}

/* Grounded keyword pile: readable labels, supported layers and quiet settling. */
.pile { height: 304px; }
.pile-wrap { height: 304px; margin-block: 0 20px; }
.pile__chip { font-size: 16px; letter-spacing: .045em; border-width: 1px; }
.js .banner.is-revealed .pile__chip { animation: chip-settle .85s var(--ease-out) both; animation-delay: var(--d); }
@keyframes chip-settle {
  0% { opacity: 0; transform: translate3d(0,-90px,0) rotate(calc(var(--r) - 12deg)); }
  65% { opacity: 1; transform: translate3d(0,3px,0) rotate(calc(var(--r) + 2deg)); }
  82% { transform: translate3d(0,-2px,0) rotate(calc(var(--r) - 1deg)); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(var(--r)); }
}
.banner__title { max-width: 15em; line-height: 1.2; text-wrap: balance; }
.banner__sub { font-weight: var(--font-weight-regular); line-height: 1.75; }
@media (min-width: 1024px) {
  .banner .pile-wrap { grid-column: 4 / 13; margin-bottom: 32px; }
  .banner__meta { padding-top: 30px; }
}
/* On phones, reflow the words instead of shrinking a desktop composition. */
@media (max-width: 599px) {
  .pile-wrap { height: auto; overflow: visible; margin: 12px 0 24px; }
  .pile { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px 7px; width: 100%; height: auto; padding: 12px 2px; transform: none; }
  .pile__chip, .pile__chip--tall { position: relative; left: auto; top: auto; width: auto; height: 38px; padding-inline: 15px; font-size: 11px; flex: 0 0 auto; }
  .pile__chip--tall span { transform: none; }
  .pile__chip:nth-child(3n) { margin-top: 6px; }
  .banner { gap: 22px; }
  .banner__title { font-size: clamp(28px, 7.6vw, 44px); line-height: 1.3; word-break: keep-all; }
  .banner__sub { font-size: var(--fs-body); }
}
@media (prefers-reduced-motion: reduce) {
  .js .banner.is-revealed .pile__chip { animation: none !important; }
}

/* Project cards replace the duplicated index and alternating long descriptions. */
.track-panels { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 48px; }
.track-panel { display: flex; flex-direction: column; gap: 0; padding: 0 0 32px; border: 1px solid var(--color-line); border-radius: 2px; overflow: hidden; background: var(--color-dark); transition: border-color .25s ease; }
.track-panel:hover { border-color: var(--color-primary); }
.track-panel__side, .track-panel__body { padding: 28px 32px 0; grid-column: auto; }
.track-panel__body { padding-top: 18px; }
.track-panel__index { font-size: 11px; color: var(--color-primary); }
.track-panel__name { margin-top: 16px; font-size: clamp(32px,4.2vw,62px); overflow-wrap: anywhere; }
.track-panel__title { margin-top: 20px; font-size: clamp(18px,1.7vw,24px); line-height: 1.5; min-height: 3em; word-break: keep-all; }
.track-panel__summary { max-width: none; font-size: 16px; font-weight: var(--font-weight-regular); line-height: 1.85; word-break: keep-all; }
.track-art { position: relative; height: 190px; overflow: hidden; color: var(--color-primary); border-bottom: 1px solid var(--color-line); background: var(--color-bg); }
.track-art__number { position: absolute; left: 28px; top: 18px; font: 600 12px var(--font-display); letter-spacing: .15em; }
.track-art__caption { position: absolute; left: 28px; bottom: 18px; font: 600 10px var(--font-display); letter-spacing: .18em; }
.track-art__shape { position: absolute; width: 180px; height: 180px; top: 24px; right: 12%; border: 1px solid currentColor; transform: rotate(-12deg); }
.track-art__shape::before, .track-art__shape::after { content: ''; position: absolute; inset: 18px; border: 1px solid currentColor; }
.track-art__shape::after { inset: 36px; }
.track-art--create .track-art__shape { width: 148px; height: 148px; top: 38px; transform: rotate(45deg); }
.track-art--create .track-art__shape::before { transform: rotate(25deg); }
.track-art--create .track-art__shape::after { transform: rotate(50deg); }
.track-art--ensemble .track-art__shape { width: 116px; height: 116px; top: 42px; right: 18%; border-radius: 50%; transform: none; }
.track-art--ensemble .track-art__shape::before, .track-art--ensemble .track-art__shape::after { inset: -1px; border-radius: 50%; transform: translateX(-62px); }
.track-art--ensemble .track-art__shape::after { transform: translateX(62px); }
.track-art--solo .track-art__shape { border-radius: 50%; width: 160px; height: 160px; top: 22px; transform: none; }
.track-art--solo .track-art__shape::before, .track-art--solo .track-art__shape::after { border-radius: 50%; }
@media (max-width: 767px) {
 .track-panels { grid-template-columns: minmax(0,1fr); gap: 20px; margin-top: 32px; }
 .track-art { height: 150px; }
 .track-panel__side, .track-panel__body { padding-inline: 24px; }
 .track-panel__name { font-size: 42px; }
 .track-panel__title { min-height: 0; font-size: 20px; }
 .track-panel__summary { font-size: 15px; }
}

/* Director portrait and a slightly quieter hero image. */
.home__media img { filter: brightness(.85); }
.instructor__photo img { object-position: 58% 28%; }
/* Compact project cards keep descriptions visible without oversized artwork. */
@media (max-width: 767px) {
 .track-panel { padding-bottom: 22px; }
 .track-art { height: 64px; }
 .track-art__shape { opacity: .55; transform: scale(.65) rotate(-12deg); transform-origin: top right; top: 0; }
 .track-art__caption { left: auto; right: 20px; bottom: 12px; font-size: 9px; }
 .track-art__number { left: 20px; top: 12px; }
 .track-panel__side { padding: 18px 20px 0; }
 .track-panel__body { padding: 10px 20px 0; }
 .track-panel__index { display: none; }
 .track-panel__name { margin-top: 0; font-size: 30px; }
 .track-panel__title { margin-top: 12px; font-size: 17px; line-height: 1.5; }
 .track-panel__summary { font-size: 14px; line-height: 1.7; }
}
/* Phone-sized pile: fixed contact points, scaled as a single composition. */
@media (max-width: 599px) {
 .pile-wrap { height: 260px; overflow: hidden; margin: 4px 0 18px; }
 .pile { display: block; flex: 0 0 auto; width: 430px; height: 260px; padding: 0; transform: scale(.72); }
 .pile__chip, .pile__chip--tall { position: absolute; left: var(--mx); top: var(--my); width: var(--mw); height: 44px; padding: 0; margin: 0 !important; font-size: 13px; letter-spacing: .01em; --r: var(--mr); }
 .pile__chip--tall span { transform: none; }
}
@media (max-width: 599px) { .pile__chip:nth-child(1) { --mx: 4px; --my: 207px; --mw: 145px; --mr: -3deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(2) { --mx: 156px; --my: 210px; --mw: 108px; --mr: 2deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(3) { --mx: 272px; --my: 205px; --mw: 150px; --mr: -4deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(4) { --mx: 8px; --my: 154px; --mw: 161px; --mr: 4deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(5) { --mx: 176px; --my: 155px; --mw: 120px; --mr: -3deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(6) { --mx: 302px; --my: 151px; --mw: 118px; --mr: 5deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(7) { --mx: 35px; --my: 102px; --mw: 142px; --mr: -5deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(8) { --mx: 185px; --my: 102px; --mw: 150px; --mr: 5deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(9) { --mx: 342px; --my: 100px; --mw: 44px; --mr: 7deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(10) { --mx: 77px; --my: 49px; --mw: 170px; --mr: -3deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(11) { --mx: 256px; --my: 47px; --mw: 140px; --mr: 4deg; } }
@media (max-width: 599px) { .pile__chip:nth-child(12) { --mx: 161px; --my: 1px; --mw: 116px; --mr: -4deg; } }
@media (max-width: 599px) {
 .pile__chip:nth-child(9) { height: 98px; }
 .pile__chip:nth-child(9) span { transform: rotate(-90deg); }
 .pile { transform: scale(.72); }
}

/* Stage photo essay and genuine participant voices. */
.moments, .voices { padding-block: var(--space-2xl); }
.moments__grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 28px 20px; margin-top: 40px; }
.moments__photo { margin: 0; min-width: 0; grid-column: span 6; }
.moments__photo--1, .moments__photo--6 { grid-column: 1 / -1; }
.moments__photo--2 { grid-column: span 4; }
.moments__photo--3 { grid-column: span 8; }
.moments__photo img { display: block; width: 100%; height: 360px; object-fit: cover; }
.moments__photo--1 img, .moments__photo--6 img { height: auto; aspect-ratio: 16/9; }
.moments__photo--2 img { object-position: center 35%; }
.moments__photo--4 img { object-position: center 35%; }
.moments__photo figcaption { display: flex; gap: 18px; padding-top: 12px; font-size: 13px; color: var(--color-text-body); }
.moments__photo figcaption span { color: var(--color-primary); font-family: var(--font-display); }
.profile__name { font-size: clamp(36px,5vw,64px); line-height: 1.2; white-space: normal; }
.profile__top { max-width: 1080px; margin-inline: auto; align-items: center; gap: 32px; }
.profile__intro { padding-top: 0; }
.instructor__photo { margin: 0; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1159/1356; justify-self: end; }
.instructor__photo img { object-position: center; }
.voices__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 40px; }
.voices__card { min-width: 0; padding: 28px; background: var(--color-dark); border: 1px solid var(--color-line); }
.voices__person { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.voices__person h3 { font-size: 17px; }
.voices__person p { margin-top: 4px; color: var(--color-text-muted); font-size: 11px; }
.voices__avatar { display: block; width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; background-repeat: no-repeat; }
.voices__card h4 { font-size: 22px; line-height: 1.45; margin-bottom: 20px; word-break: keep-all; }
.voices__card blockquote { margin: 0; font-size: 15px; line-height: 1.85; color: var(--color-text-body); }
.voices__card blockquote p + p { margin-top: 16px; }
@media (max-width: 767px) {
 .moments__grid { gap: 22px 12px; }
 .moments__photo, .moments__photo--2, .moments__photo--3 { grid-column: 1 / -1; }
 .moments__photo img { height: auto; max-height: 440px; aspect-ratio: 4/3; }
 .moments__photo--2 img, .moments__photo--4 img { aspect-ratio: 1; }
 .moments__photo figcaption { font-size: 12px; }
 .instructor__photo { max-width: 320px; justify-self: center; }
 .profile__name { font-size: 40px; }
 .voices__grid { grid-template-columns: minmax(0,1fr); }
 .voices__card { padding: 22px; }
 .voices__card h4 { font-size: 20px; }
}
.voices__avatar--alex { background-image: url("../images/review-alex.png"); background-position: -73px -43px; }
.voices__avatar--jeti { background-image: url("../images/review-jeti.png"); background-position: -35px -0px; }
.voices__avatar--sinyong { background-image: url("../images/review-sinyong.png"); background-position: -65px -18px; }
.voices__avatar--hyunmin { background-image: url("../images/review-hyunmin.png"); background-position: -71px -35px; }
/* Mobile scroll: stable viewport, lightweight paint and one-time reveals. */
@media (max-width: 767px), (pointer: coarse) {
  html { scroll-behavior: auto; }
  .home { min-height: 100svh; }
  html.has-intro .opening::after { height: 120svh; }
  body::before { display: none; }
  .intro__curtain::before { animation: none; }
  .intro.is-open .intro__curtain { will-change: auto; }
  .home__media img { filter: none; }
  .home__media::after { background-color: rgb(var(--rgb-bg) / 15%); }
  .js [data-reveal] { transition-duration: .4s; }
  .js .reveal-image[data-reveal] { clip-path: none; }
  .js .reveal-image[data-reveal] img, .js .reveal-image[data-reveal].is-revealed img { transform: none; transition: none; }
}

/* Fit complete artwork inside compact phone cards. */
@media (max-width: 767px) {
 .track-art { height: 132px; }
 .track-art .track-art__shape { top: 50%; right: 50%; opacity: .8; transform-origin: center; transform: translate(50%,-50%) scale(.52) rotate(-12deg); }
 .track-art--create .track-art__shape { transform: translate(50%,-50%) scale(.52) rotate(45deg); }
 .track-art--ensemble .track-art__shape, .track-art--solo .track-art__shape { transform: translate(50%,-50%) scale(.52); }
 .track-art__caption { bottom: 10px; }
}
/* Reserve clearance above rotated SCENE and below the resting chips. */
@media (max-width: 599px) {
 .pile { height: 280px; }
 .pile__chip, .pile__chip--tall { top: calc(var(--my) + 12px); }
}
@media (max-width: 767px), (pointer: coarse) {
 html.has-intro .opening > .home { min-height: var(--mobile-stage-height,100svh); }
 html.has-intro .opening::after { height: var(--mobile-curtain-distance,120svh); }
 .site-header.is-hidden { transform: none; }
}

/* Editorial photo sequence: varied scale, open space, no captions. */
.moments__grid { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:clamp(14px,2.5vw,36px); margin-top:clamp(32px,5vw,72px); }
.moments__photo { position:relative; margin:0; }
.moments__photo img { width:100%; height:auto; max-height:none; object-fit:cover; }
.moments__photo--1 { grid-column:1 / 10; grid-row:1; }
.moments__photo--1 img { aspect-ratio:3 / 2; }
.moments__photo--2 { grid-column:10 / 13; grid-row:1; align-self:end; margin-bottom:-12%; z-index:1; }
.moments__photo--2 img { aspect-ratio:2 / 3; object-position:center 40%; }
.moments__photo--3 { grid-column:5 / 13; grid-row:2; margin-top:8%; }
.moments__photo--3 img { aspect-ratio:3 / 2; }
.moments__photo--4 { grid-column:1 / 5; grid-row:2; margin-top:24%; }
.moments__photo--4 img { aspect-ratio:4 / 5; object-position:center 42%; }
.moments__photo--5 { grid-column:2 / 7; grid-row:3; margin-top:12%; }
.moments__photo--5 img { aspect-ratio:3 / 2; }
.moments__photo--6 { grid-column:7 / 13; grid-row:3; margin-top:25%; }
.moments__photo--6 img { aspect-ratio:3 / 2; }
.key-phrase, .voices__card h4 { color:var(--color-primary); }
.voices__card { border-top:2px solid var(--color-primary); }
.voices .meta, .instructor .meta, .summary > .meta { color:var(--color-primary); }
@media(max-width:767px) {
 .moments__grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
 .moments__photo--1 { grid-column:1 / 7; grid-row:1; }
 .moments__photo--2 { grid-column:1 / 3; grid-row:2; margin:0; align-self:start; }
 .moments__photo--3 { grid-column:3 / 7; grid-row:2; margin-top:18%; }
 .moments__photo--4 { grid-column:1 / 4; grid-row:3; margin-top:4%; }
 .moments__photo--5 { grid-column:4 / 7; grid-row:3; margin-top:32%; }
 .moments__photo--6 { grid-column:1 / 7; grid-row:4; margin:10px 0 0; }
 .moments__photo--6 img { aspect-ratio:3 / 2; }
}

/* KEEP DREAMING special rate. */
.dreaming { margin-block:32px; padding:clamp(22px,3vw,36px); border:1px solid var(--color-primary); background:rgba(240,72,71,.04); }
.dreaming__label { color:var(--color-primary); font-family:var(--font-display); font-size:clamp(24px,3vw,36px); letter-spacing:.05em; line-height:1.2; }
.dreaming__message { margin-top:20px; font-size:clamp(16px,1.6vw,20px); line-height:1.7; word-break:keep-all; }
.dreaming__message strong { font-weight:600; }
.dreaming__offer { margin-top:28px; font-size:16px; line-height:1.7; }
.dreaming__offer strong { color:var(--color-primary); font-size:24px; }
.dreaming__price { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-top:12px; }
.dreaming__price del { color:var(--color-text-muted); font-size:16px; }
.dreaming__price strong { color:var(--color-primary); font-size:clamp(28px,4vw,36px); }
.dreaming__note { margin-top:16px; color:var(--color-text-body); font-size:14px; }

/* Quiet, compact special-rate note. */
.dreaming { max-width:440px; margin-block:24px; padding:18px 20px; border-color:var(--color-line); background:transparent; }
.dreaming__label { font-size:16px; letter-spacing:.08em; }
.dreaming__message { margin-top:10px; font-size:14px; line-height:1.6; color:var(--color-text-body); }
.dreaming__offer { margin-top:14px; font-size:14px; line-height:1.5; }
.dreaming__offer strong { font-size:17px; }
.dreaming__price { margin-top:8px; gap:10px; }
.dreaming__price del { font-size:14px; }
.dreaming__price strong { font-size:22px; color:var(--color-text); }
.dreaming__note { margin-top:10px; font-size:13px; color:var(--color-text-muted); }

/* Personal coaching: a clear learning pathway below the curriculum. */
.coaching { padding-block:var(--space-2xl); }
.coaching > .container > .meta { color:var(--color-primary); }
.coaching__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); margin-top:28px; }
.coaching__subtitle { margin-top:24px; font-size:20px; font-weight:600; }
.coaching__body { font-size:16px; line-height:1.85; color:var(--color-text-body); word-break:keep-all; }
.coaching__steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; margin:28px 0; padding:0; border-block:1px solid var(--color-line); }
.coaching__steps li { padding:16px 4px; font-size:14px; }
.coaching__steps span { display:block; color:var(--color-primary); font-size:13px; }
.coaching__level strong { font-weight:600; color:var(--color-primary); }
.coaching__closing { margin-top:44px; font-size:clamp(16px,1.8vw,22px); line-height:1.6; word-break:keep-all; }
.coaching__break { display:none; }
@media(max-width:767px) { .coaching__grid { grid-template-columns:1fr; gap:24px; } .coaching__subtitle { margin-top:16px; font-size:18px; } .coaching__closing { margin-top:28px; } .coaching__break { display:initial; } }

/* FAQ and verified operator details. */
.faq { padding-block:var(--space-2xl); }
.faq__list { margin-top:36px; border-top:1px solid var(--color-line); }
.faq__item { border-bottom:1px solid var(--color-line); }
.faq__item summary { cursor:pointer; padding:22px 8px; font-size:18px; line-height:1.5; font-weight:600; word-break:keep-all; }
.faq__item summary::marker, .policy-detail summary::marker { color:var(--color-primary); }
.faq__item p { padding:0 8px 24px; max-width:850px; font-size:16px; line-height:1.85; color:var(--color-text-body); word-break:keep-all; }
.faq__item summary:focus-visible,.policy-detail summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:4px; }
.coaching__duration { margin-top:8px; font-size:14px; color:var(--color-primary); }
.refund > p,.policy-detail { font-size:14px; line-height:1.8; color:var(--color-text-body); }
.policy-detail { margin-top:14px; border-top:1px solid var(--color-line); }
.policy-detail summary { cursor:pointer; padding-top:14px; font-weight:600; }
.policy-detail ul { padding-left:20px; margin-top:12px; }
.policy-detail li+li { margin-top:8px; }
.site-footer__biz { width:100%; grid-column:1 / -1; font-size:13px; line-height:1.9; color:var(--color-text-muted); word-break:keep-all; }
.site-footer__biz p { margin:4px 0; }
@media(max-width:767px) { .faq__item summary { font-size:16px; padding-block:18px; } .site-footer__links { flex-wrap:wrap; gap:12px 20px; } }

/* Updated seven-photo sequence with portrait pair and full cast finale. */
.moments__photo--2 { align-self:center; margin:0; }
.moments__photo--2 img { aspect-ratio:3/4; object-position:53% center; }
.moments__photo--5 { grid-column:2/7; grid-row:3; margin-top:8%; }
.moments__photo--6 { grid-column:7/12; grid-row:3; margin-top:22%; }
.moments__photo--5 img,.moments__photo--6 img { aspect-ratio:5/7; object-position:center; }
.moments__photo--7 { grid-column:1/-1; grid-row:4; margin-top:3%; }
.moments__photo--7 img { aspect-ratio:3/2; }
@media(max-width:767px) {
 .moments__photo--2 { grid-column:1/3; grid-row:2; align-self:start; margin:0; }
 .moments__photo--4 { grid-column:2/6; grid-row:3; margin:8px 0; }
 .moments__photo--5 { grid-column:1/4; grid-row:4; margin:0; }
 .moments__photo--6 { grid-column:4/7; grid-row:4; margin-top:18%; }
 .moments__photo--7 { grid-column:1/-1; grid-row:5; margin:12px 0 0; }
 .moments__photo--5 img,.moments__photo--6 img { aspect-ratio:5/7; }
}

/* Close the removed rehearsal photo slot. */
.moments__photo--3 { grid-column:2/12; margin-top:5%; }
@media(max-width:767px) { .moments__photo--3 { grid-column:3/7; grid-row:2; margin-top:18%; } .moments__photo--5,.moments__photo--6 { grid-row:3; } .moments__photo--7 { grid-row:4; } }

/* Compact testimonials and quieter final gallery images. */
.voices__grid { gap:14px; margin-top:28px; }
.voices__card { padding:20px; }
.voices__person { gap:12px; margin-bottom:14px; }
.voices__person h3 { font-size:16px; }
.voices__card h4 { font-size:18px; margin-bottom:12px; line-height:1.45; }
.voices__card blockquote { font-size:16px; line-height:1.65; }
.voices__card blockquote p+p { margin-top:10px; }
.voices__avatar { zoom:.75; }
.moments__photo--5,.moments__photo--6 { width:84%; justify-self:center; }
.moments__photo--7 { width:84%; justify-self:center; }
@media(max-width:767px) {
 .voices__card { padding:16px; }
 .voices__person { margin-bottom:12px; }
 .voices__card h4 { font-size:17px; }
 .moments__photo--5,.moments__photo--6 { width:90%; }
 .moments__photo--7 { width:90%; }
}