/* ============================================================
   style.css — 1단계: 히어로 정적 레이아웃
   모든 색/폰트/간격은 tokens.css 의 2단(역할명) 토큰만 참조한다.
   ============================================================ */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- 히어로 ---------- */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--surface);
}

/* 중앙 대형 타이포 — 배경보다 약간만 밝은 무채색, 낮은 대비.
   두 줄(SOMYUNG / KANG) — 래퍼가 화면 전체를 잡고 h1을 놓는다.
   h1은 flex item이라 폭이 가장 넓은 줄(SOMYUNG)의 fit-content가 되고,
   그 안에서 text-align으로 두 줄의 정렬(가운데/왼쪽)만 바꾼다.
   두 줄 다 같은 font-size를 쓴다 — 짧은 KANG을 억지로 늘리지 않는다.

   SOMYUNG은 좌측 정렬 그대로 유지 — 좌우 패딩을 hero__overlay와
   동일하게 var(--space-lg)로 줘서 SOMYUNG의 왼쪽 끝이 로고(KS)와
   같은 기준선에 오게 한다(위치는 이전과 동일, 손대지 않음).

   KANG만 가운데 정렬로 뒀다. 기준은 화면 폭이 아니라 h1의 박스 폭 —
   h1은 flex item이라 가장 넓은 줄(SOMYUNG)의 fit-content 폭을 그대로
   갖고, KANG도 같은 h1 안에 있으므로 "h1 가운데 정렬" =
   "SOMYUNG 블록 가운데 정렬"과 정확히 같다. :nth-child(2)로 두 번째
   줄(KANG)에만 적용한다. */
.hero__name-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-lg);
  z-index: 1;
  pointer-events: none;
}

.hero__name {
  margin: 0;
  color: var(--hero-name-color); /* 딥그린 #144428, tokens.css 참조, 하드코딩 없음 */
  text-align: left; /* SOMYUNG(첫 줄) 기준값 — 위치 그대로 */
  user-select: none;
}

.hero__name-line:nth-child(2) {
  text-align: center; /* KANG만 SOMYUNG 블록 가운데로 */
}

.hero__name-line {
  display: block;
  /* SOMYUNG이 화면 폭의 약 94%(92~96% 목표)를 채우도록 캔버스로
     실측한 값(18vw). 그런데 좌측 정렬 + 고정 좌측 padding(var(--space-lg))
     조합에서는 "94% of 100vw"가 왼쪽 padding 만큼 그대로 오른쪽 밖으로
     밀려난다 — 뷰포트가 좁을수록(예: 390px) 그 32px 여백의 비중이
     커져서 실제로 화면 밖으로 잘린다(.hero의 overflow:hidden 때문에
     스크롤은 안 생기고 글자만 조용히 잘림, 390px에서 약 9px 초과 확인함).
     min()의 두 번째 항이 "패딩을 뺀 뒤 남는 폭 안에서만 커지도록" 하는
     안전판이다 — SOMYUNG 실측 비율(폭 = font-size × 5.235)을 역산해서
     (100vw - 3rem 패딩) 안에 반드시 들어가게 상한을 건다. */
  font-size: clamp(2.5rem, min(18vw, calc((100vw - 3rem) * 0.191)), 40rem);
  font-weight: 800;
  line-height: 0.85; /* 두 줄이 한 덩어리로 보이도록 좁게 */
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 인물 이미지 — 타이포보다 위 레이어. background-image라 알파(투명)가
   그대로 표현된다. hero.webp는 profile.jpg 기반(683x1024, 세로형)으로
   교체했다 — 박스 비율도 이미지 그대로(683/1024) 쓴다.
   세로 구도라 "폭"이 아니라 "높이"를 기준으로 크기를 잡는다.
   높이는 vh 기반 clamp이고 상한 1024px(원본 세로 길이)를 넘지
   않게 해서 업스케일을 막는다.
   가로 무게중심은 이미지 폭의 중앙에서 3.65% 오른쪽으로 치우쳐
   있지만(onset-0의 7.5%보다 작음), 이번엔 별도 보정 없이 center로
   두었다 — 필요하면 이전과 같은 방식(박스를 넓히고
   background-position 조정)으로 보정할 수 있다. */
.hero__portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: clamp(480px, 85vh, 1024px);
  aspect-ratio: 683 / 1024;
  z-index: 2;
  background-image: url("photos/hero.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* 무릎 절단면이 알파 경계에서 직선으로 뚝 끊겨 사각형 크롭처럼
     보이는 것을 막는다. 이미지 파일은 그대로 두고 마스크로만
     아래쪽 20%(15~25% 범위 안)를 배경으로 서서히 사라지게 한다. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

/* UI 오버레이 — 로고/네비/역할/수상/릴 진입점. 항상 최상단 */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  /* minmax(0, 1fr) — 그냥 1fr만 쓰면 오른쪽 칼럼(수상 문구)이
     같은 칼럼을 쓰는 nav 행의 콘텐츠 폭에 끌려가 트랙이 미세하게
     넓어질 수 있고, 그 경우 justify-self:end로 붙은 수상 문구의
     오른쪽 끝이 실제 여백보다 밖으로 밀려 [TBD] 같은 짧은 텍스트도
     끝 글자가 overflow:hidden에 잘릴 수 있다. minmax(0, 1fr)로
     트랙 자체의 콘텐츠 기반 최소폭을 0으로 강제한다. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "logo    nav"
    "roles   awards"
    "spacer  spacer"
    "reel    reel";
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  pointer-events: none;
}

.hero__overlay > * {
  pointer-events: auto;
  min-width: 0; /* 그리드 기본 min-width:auto가 nav 등의 콘텐츠 폭만큼
                   트랙을 강제로 늘려 뷰포트를 넘치게 하는 것을 막는다 */
}

/* 최상단 좌: 로고 */
.hero__logo {
  grid-area: logo;
  justify-self: start;
  align-self: start;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* 최상단 우: 네비게이션 */
.hero__nav {
  grid-area: nav;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm) var(--space-md);
  font-size: 1rem;
  font-weight: 400; /* 로고(800)와 같은 무게라 상단이 무거워 보였다 — 낮춤 */
  letter-spacing: 0.1em; /* 굵기를 낮춘 대신 자간을 넓혀 존재감 유지 */
}

.hero__nav a {
  opacity: 0.9;
}

/* 좌측 상단: 역할 세로 스택 */
.hero__roles {
  grid-area: roles;
  justify-self: start;
  align-self: start;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.02em;
}

/* 우측 상단: 수상 한 문장. 좌우 여백은 hero__overlay의 좌우
   padding(var(--space-lg))을 그대로 공유하므로 로고 왼쪽 여백과
   이미 동일하다. */
.hero__awards {
  grid-area: awards;
  justify-self: end;
  align-self: start;
  margin: var(--space-lg) 0 0;
  max-width: 15ch;
  min-height: calc(1.4em * 3);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* 하단: 릴 진입점 — 강조색은 이 요소에만 사용 */
.hero__reel {
  grid-area: reel;
  justify-self: start;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--accent);
  color: var(--surface);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero__reel-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--surface);
}

/* ---------- 반응형 ---------- */

@media (max-width: 768px) {
  .hero__overlay {
    padding: var(--space-md) var(--space-md) var(--space-lg);
  }

  .hero__awards {
    max-width: 11ch;
  }

  /* 모바일에서만 사진 높이를 낮춘다(85vh→58vh). 데스크톱과 같은
     비율을 쓰면 세로로 긴 인물 사진이 nav·직함열·REEL과 겹치고
     좌우로 화면 밖까지 삐져나간다(390px에서 실측: 좌측 -64px,
     상단 nav·하단 REEL과 겹침). 폭은 aspect-ratio로 따라오므로
     별도 지정이 필요 없다. */
  .hero__portrait {
    height: clamp(320px, 58vh, 1024px);
  }
  .hero__overlay {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hero__nav {
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .hero__nav {
    gap: var(--space-sm);
    font-size: 0.6875rem;
  }

  .hero__awards {
    font-size: 0.6875rem;
    max-width: 9ch;
  }

  .hero__reel {
    font-size: 0.6875rem;
  }
}

/* ============================================================
   릴 섹션 — 히어로 바로 아래, FILMS 위. 모션이 붙기 전에는 이
   섹션이 REEL 버튼의 유일한 목적지였고, 모션이 붙은 뒤에도
   prefers-reduced-motion / 모바일 768px 이하에서는 모션이 꺼지므로
   그 환경들의 정적 진입점으로 계속 남는다 — 임시 섹션이 아니다.
   라벨/임베드 박스 모두 상세 페이지(work__section-label,
   work__embed, work__embed-tbd)의 기존 클래스를 그대로 재사용한다.
   새 색/폰트/토큰 없음. 래퍼(배경/구분선/여백)만 .films와 동일한
   값으로 새로 선언한다(섹션 자체가 새로 생겼으니 선택자만 새것).
   ============================================================ */
.reel-section {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2xl) var(--space-lg);
}

/* 960px 고정값이 1920px에서 과소해 확대. width:90% + max-width
   조합 — 1920px에서 90%(1728px)가 상한(1440px)에 걸려 1440px로
   고정되고, 1440px에서는 90%(1296px)가 상한 밑이라 그대로 적용돼
   화면 양옆에 약 72px씩 여백이 남는다. 16:9(.work__embed)·가운데
   정렬은 그대로 유지. 390px는 아래 미디어쿼리로 100%. */
.reel-section__inner {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .reel-section__inner {
    width: 100%;
  }
}

/* ============================================================
   작품 목록 (2단계) — 히어로 바로 아래. 2x2 그리드로 확정.
   ============================================================ */

.films {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2xl) var(--space-lg);
}

.films__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 행간(위 카드 제목 -> 아래 카드 이미지)은 카드 내부(이미지-제목)
     간격의 최소 2배 이상을 유지한다 — 아래 .film__link의
     gap(--space-sm, 1rem)의 4.5배인 --space-2xl(4.5rem)로 잡아
     한 작품이 하나의 덩어리로 분명히 보이게 한다. */
  row-gap: var(--space-2xl);
  column-gap: var(--space-md);
}

.film__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 이미지 -> 제목: 좁게 */
  color: inherit;
  text-decoration: none;
}

/* 강조색(--accent)이 지금 텍스트 기본색(--text-primary)과 같은 값이라
   제목에 강조색을 입혀도 hover가 눈에 보이지 않는다.
   그래서 hover는 스틸 박스 쪽에 아주 미세한 밝기 변화로 준다.
   확대/이동/트랜스폼은 쓰지 않는다. --accent 토큰 자체는 건드리지 않는다. */
.film__link:hover .film__figure {
  filter: brightness(1.2);
}

/* 카드 호버에 딥그린 강조 추가. 밑줄(제목 하단) 선택 — 이유:
   테두리(border)는 박스 크기에 레이아웃 시프트를 주지 않으려면
   outline이 필요하고 이미지 경계와 시각적으로 경쟁하지만, 밑줄은
   text-decoration이라 박스 치수에 전혀 영향이 없고 이미지 중심의
   미니멀한 톤에 더 잘 맞는다. transition은 추가하지 않았다 — 코드
   전체에 hover 전환 duration을 쓰는 기존 선례가 없어(work-back:hover,
   work__list a:hover 모두 즉시 전환) 새 타이밍 값을 만들지 않고 기존
   "즉시 전환" 관례를 그대로 따랐다. filter를 애니메이션·트랜지션하지
   않으므로(brightness도 그대로 즉시 전환) filter 애니메이션 금지
   조항과 충돌 없음. */
.film__link:hover .film__title {
  text-decoration: underline;
  text-decoration-color: var(--hero-name-color);
}

/* 스틸 이미지 자리 — 화면비는 4편 모두 16:9로 통일한다.
   원본 화면비는 상세 페이지 몫이다. */
.film__figure {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
}

/* 실제 스틸 사진 — .film__figure가 잡아둔 16:9 박스를 그대로 채운다 */
.film__figure img {
  display: block;
  width: 100%;
  height: 100%;
}

.film__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.film__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.film__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
}

.film__info {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .films {
    padding: var(--space-xl) var(--space-md);
  }

  .films__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   작품 상세 (works/*.html) — 4편 공통 템플릿의 첫 장(Kiran).
   나머지 3편은 이 마크업/클래스를 그대로 복제해서 만든다.
   ============================================================ */

.work-header {
  max-width: calc(1440px + var(--space-lg) * 2);
  margin: 0 auto;
  padding: var(--space-lg);
}

.work-back {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.work-back:hover {
  color: var(--text-primary);
}

.work {
  max-width: calc(1440px + var(--space-lg) * 2);
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
}

.work__intro {
  margin-bottom: var(--space-xl);
}

.work__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-xs);
}

.work__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
}

.work__meta {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0;
}

/* 영상 임베드 자리 — 16:9 고정, 실제 링크 있으면 iframe,
   없으면 같은 박스 안에 [TBD] 텍스트만 둔다(상세 페이지 복제 시 참고) */
.work__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
  margin-bottom: var(--space-2xl);
}

.work__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 로컬 확인용 <video> 임시 배치. iframe과 동일하게 16:9 박스를 채운다. */
.work__embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 영상 링크가 아직 없는 작품(A Couple Story)용 자리 표시.
   16:9 박스는 그대로 두고 안에 텍스트만 중앙 정렬한다 */
.work__embed-tbd {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.work__section {
  margin-bottom: var(--space-xl);
}

.work__section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--space-sm);
}

.work__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: 1rem;
  line-height: 1.5;
}

/* 수상/노미네이트/초청 구분 접두 라벨. 새 토큰 없이 기존
   --text-muted(라벨) / --text-primary(영화제명, .work__list가
   이미 상속받는 기본색) 두 개만 쓴다. */
.work__award-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: var(--space-sm);
}

/* 영문 주표기 + 한국어 보조표기(줄바꿈 분리). 새 색/폰트/토큰 없이
   기존 --text-primary/--text-muted와 .work__meta가 쓰는 0.875rem을
   재사용한다. 영문은 태그와 이어지므로 inline, 한국어만 다음 줄로 내린다. */
.work__award-kr {
  display: block;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font-weight: 400;
  font-size: 0.875rem;
}

/* 작업 노트 본문 — 가장 중요한 텍스트라 폭을 넉넉히 확보하되,
   한 줄이 너무 길어지지 않게(75자 이내) max-width로 제한한다 */
.work__notes {
  max-width: 56rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--text-primary);
}

/* ACTOR 섹션 본문은 컨테이너 전체 폭을 사용해 EQUIPMENT & SOFTWARE와
   우측 끝을 일치시킨다. 56rem 제한을 해제한다. */
#actor .work__notes {
  max-width: none;
}

/* About 상단 2단 — 좌 사진(55%) / 우 DIRECTING & EDITING + FAVORITE FILMS.
   grid 사용(float 금지) — float은 텍스트 높이가 사진 높이를 넘는
   지점부터 줄 폭이 바뀌어 그 문단 안에서 한글 줄바꿈이 흔들리지만,
   grid는 두 열 폭이 문단 높이와 무관하게 고정된다. FAVORITE FILMS를
   우측 열로 이동시켜 DIRECTING & EDITING과 세로로 쌓았다.
   실측 결과 좌열 55%, 우측 스택 간격 32px(--space-lg)에서 높이 차이
   113px로 목표 120px 이하를 만족했다. 사진은 항상 텍스트보다 짧으며,
   이 마크업에서는 폭·간격 조정만으로 동률 또는 역전이 불가능하다.
   align-items:start로 두 칼럼 모두 grid row 상단 기준으로 맞춘다
   (둘 다 자체 top margin이 없어 이 값만으로 정렬됨). 768px는
   .about__grid·.work의 반응형과 같은 기존 브레이크포인트를 그대로
   재사용했다(새 값 추가 없음). */
.about__top {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}

.about__top-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .about__top {
    grid-template-columns: 1fr;
  }
}

/* About 사진(onset-9, 세로 1008/1072). about__top 그리드의 한 칼럼이라
   폭은 grid-template-columns(55%)가 결정하므로 100%만 채운다. */
.about__photo {
  width: 100%;
  aspect-ratio: 1189 / 1296;
}

.about__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* .actor__body의 max-width:42rem·margin:0 auto 잔존
   선언을 완전히 제거했다 — #actor가 #about/#contact와 동일한 .work
   클래스를 이미 쓰고 있어 정렬은 그 공유 클래스만으로 충분하다(실측
   결과 세 섹션의 콘텐츠 시작 x좌표·폭이 1920/1440/768px 전부 동일).
   .actor__body 클래스명 자체는 .reveal 스크롤 리빌 대상 표시용으로만
   HTML에 남겨뒀고 별도 CSS 규칙은 없다. */

/* ACTOR 섹션 상단 여백을 다른 섹션(--space-2xl)보다 한 단계 낮은
   --space-xl로 줄여 위계를 낮춘다. .about 공유 규칙 위에 #actor만
   오버라이드 — 다른 섹션(REEL/FILMS/ABOUT/CONTACT)에는 영향 없음. */
#actor {
  padding-top: var(--space-xl);
}

/* 키·체형·나이·활동지역은 캐스팅 판단의 1차 정보라 부속
   정보용 옅은 색/작은 글씨로는 기능하지 않는다는 클라이언트 판단에
   따라 본문(.work__notes, 1.0625rem)보다도 크게 올린다. #actor
   범위로 한정해 작품 상세 4장의 메타데이터 행에는 영향이 없다.
   font-family/letter-spacing/margin은 .work__meta 그대로 유지,
   font-size와 color만 덮어쓴다. 1rem→1.125rem — 코드 전체를
   검색했으나 1.125rem을 쓰는 기존 선택자가 없어 신규 리터럴이다
   (tokens.css에 font-size 변수 자체가 없어 완전한 토큰 재사용은
   애초에 불가능했음). font-weight는 손대지 않았다 — @font-face에
   로드된 굵기가 Inter 400/800, JetBrains Mono 400/700뿐이라 500·600이
   없고, 새 웨이트 파일 로드가 금지돼 있어 지시대로 변경하지 않았다. */
#actor .work__meta {
  font-size: 1.125rem;
  color: var(--text-primary);
}

/* ============================================================
   About — index.html #about 섹션. FILMS/REEL과 동일하게 배경/
   구분선/여백을 섹션 단위로 새로 선언한다(재사용 아님, 새 섹션이라
   선택자만 새것). 안쪽 콘텐츠는 work__* 클래스를 그대로 재사용한다.
   ============================================================ */
.about {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2xl);
}

/* CONTACT만 .about 재사용을 끊고 .contact로 분리(보류 사항
   해소). 레이아웃 값(border-top/padding-top)은 .about에서 그대로
   복사하고 배경색만 딥그린으로 추가했다. 좌우 padding·콘텐츠 시작
   x좌표는 내부의 .work가 그대로 담당해 다른 섹션과 동일하다.
   --hero-name-color(2단, tokens.css:100, 원시값 --green-900은
   tokens.css:74)를 재사용 — 새 색·새 토큰 추가 없음. 대비: surface
   대비 1.78:1(면 자체 낮은 대비, 의도된 절제된 톤), 면 위
   --text-primary 9.77:1(본문·링크 전부 이 색, WCAG AA/AAA 통과).
   섹션 라벨(--text-muted)만 3.21:1로 AA 미달이나 글자색 변경은
   금지 지시라 그대로 둔다. */
.contact {
  background: var(--hero-name-color);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2xl);
}

/* CAREER / EQUIPMENT·SKILLS(묶음) 두 블록 사이에만 구분선을 넣어
   상단(연출·편집, 좋아하는 영화)과의 밀도 차를 줄인다.
   about__grid(EQUIPMENT+SKILLS)는 나란히 두는 한 묶음이라 그 내부
   (EQUIPMENT-SKILLS 사이)에는 선을 넣지 않는다 — .about__lower의
   "직계 자식" 사이에만 적용되는 자식 결합자라 안쪽 2열에는 영향이 없다. */
.about__lower > * + * {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-lg);
}

/* EQUIPMENT / SPECIAL SKILLS를 나란히 둬서 같은 크기 텍스트 행이
   반복되는 느낌을 줄인다. 1920/1440px 2열, 390px 1열(아래 미디어쿼리). */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

/* 하단 리스트(EQUIPMENT/SKILLS/CONTACT)만 행간을 넓혀 밀도를 낮춘다.
   work__list 자체를 바꾸면 상세 페이지 AWARDS 목록도 바뀌므로
   #about/#contact 범위 + 별도 클래스로 한정한다. CONTACT는 #about
   밖 #contact 독립 섹션에 있어 선택자에 함께 넣었다. */
#about .work__list--loose,
#contact .work__list--loose {
  gap: var(--space-sm);
  line-height: 1.7;
}

/* CONTACT 링크를 링크처럼 보이게 한다. work__list는 작품 상세
   페이지의 AWARDS 목록도 공유하지만 그 목록엔 <a>가 없어 안전하다.
   새 색 없이 기존 텍스트색 안에서 밑줄/포커스 표시만 추가한다. */
.work__list a {
  text-decoration: none;
}

.work__list a:hover {
  text-decoration: underline;
  cursor: pointer;
}

.work__list a:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  text-decoration: underline;
}

/* 스크린리더 전용 텍스트(새 탭 안내). 시각적으로는 아무것도
   추가하지 않는다 — 색/폰트/크기 값 없음, 표준 클리핑 기법만 사용. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .about,
  .contact {
    padding-top: var(--space-xl);
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.work-next {
  max-width: calc(1440px + var(--space-lg) * 2);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border-subtle);
}

.work-next a {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .work-header,
  .work,
  .work-next {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ============================================================
   모션 — 절제된 스크롤 리빌(클라이언트 직접 지시로 확정,
   2026-09-18). CLAUDE.md 9번 참조. site/motion.js가 <html>에
   js-motion 클래스를 추가한 뒤에만 아래 숨김 규칙이 적용된다 —
   JS가 동작하지 않으면 .reveal 요소는 기본 상태(보이는 상태)
   그대로다(백지 금지). transform/opacity만 애니메이션해 레이아웃에
   영향이 없다(CLS 0). 지속시간·이징 값은 여기 style.css 안에서만
   쓰고 tokens.css는 건드리지 않는다.
   ============================================================ */
html.js-motion .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}

html.js-motion .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js-motion {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js-motion {
    scroll-behavior: auto;
  }
}

/* ============================================================
   히어로 진입 연출(이름 리빌).
   페이지 로드 직후 1회, 총 820ms(1초 이내). html.js-motion 게이트
   아래에서만 동작 — JS 비활성 시 이름·사진 모두 기본 상태(보이는
   상태) 그대로다. 이름 텍스트만 transform/opacity 애니메이션.
   사진에는 진입 모션 없음. 히어로는 스크롤 리빌(.reveal) 대상 제외.
   ============================================================ */

/* 히어로 사진 진입 모션은 클라이언트 최종 결정으로 전면 삭제.
   이름 텍스트 페이드업만 유지 — opacity 0→1, translateY(14px)→0,
   700ms, cubic-bezier(0.22,1,0.36,1), delay 120ms(종료 820ms≤900ms).
   .hero__portrait는 이제 이 파일 어디에도 opacity/filter/transform/
   animation 초기값이 없어 js-motion 유무와 무관하게 항상 정적
   최종 상태(위 110행 기존 .hero__portrait 규칙: translate(-50%,-50%)
   센터링 + mask-image만, blur/scale/opacity 없음)로 렌더된다. */
html.js-motion .hero__name-wrap .hero__name {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-name-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

@keyframes hero-name-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .hero__name-wrap .hero__name {
    opacity: 1;
    transform: none;
    animation: none;
  }
}