/* 기본 — 초기화 · 글자 · 공통 레이아웃 도구 */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  word-break: keep-all;          /* 한글이 낱자 단위로 끊기지 않게 */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

body.is-menu-open {
  overflow: hidden;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* 글자 */
.display,
.h1,
.h2,
.h3 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.display { font-size: var(--text-display); }
.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

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

/* 본문 글은 양쪽 맞춤 — 제목 · 짧은 이름표는 왼쪽 맞춤 그대로
   낱말 단위로만 줄을 바꾸면 남는 자리를 띄어쓰기에 몰아 넣어 줄마다 간격이 크게 달라진다 (2026-10-17 원장님 지적).
   그래서 한글은 글자 단위로 줄을 바꾼다(신문 · 책 조판 방식) — 줄 끝에 남는 자리가 글자 하나보다 작아져 간격이 눈에 띄게 늘지 않는다.
   영어 낱말(Folio 등)은 중간에서 끊지 않는다. */
p, li, dd, blockquote {
  text-align: justify;
  word-break: normal;
  line-break: strict;   /* 문장부호가 줄 맨 앞에 오지 않게 */
  text-wrap: pretty;    /* 마지막 줄에 글자 하나만 남지 않게 (지원하는 브라우저에서) */
}

h1, h2, h3, h4, .display, .h1, .h2, .h3, .label {
  text-align: start;
}

/* 레이아웃 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-gap);
}

.stack > * + * {
  margin-top: var(--space-5);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
}

.skip-link:focus {
  top: var(--space-3);
}

/* 사진 자리 — 사진 에셋이 오기 전까지 */
.placeholder-photo {
  position: relative;
  background: var(--color-placeholder);
  overflow: hidden;
}

.placeholder-photo::after {
  content: attr(data-label);
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #8a8a8a;
}

/* ───────── 스크롤 움직임 (js/lib/reveal.js) ───────── */
.reveal-ready [data-reveal="text"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 사진: 흰 막이 위로 걷히면서 사진이 살짝 줄어든다.
   (사진 자체를 clip-path 로 가리면 브라우저가 화면에 들어온 것을 알아채지 못한다) */
.reveal-ready [data-reveal="media"] {
  position: relative;
  overflow: hidden;
}

.reveal-ready [data-reveal="media"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-bg);
  transform-origin: top;
  transition: transform 1200ms cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal="media"] > * {
  transform: scale(1.12);
  transition: transform 1600ms var(--ease-out);
}

.reveal-ready [data-reveal="media"].is-revealed::before {
  transform: scaleY(0);
}

.reveal-ready [data-reveal="text"].is-revealed {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal="media"].is-revealed > * {
  transform: none;
}

/* story__media 처럼 사진 자리 자체가 대상일 때는 안의 글자만 있으니 자리 전체를 살짝 키웠다 줄인다 */
.reveal-ready .placeholder-photo[data-reveal="media"] {
  transform: scale(1.04);
  transition: transform 1600ms var(--ease-out);
}

.reveal-ready .placeholder-photo[data-reveal="media"].is-revealed {
  transform: none;
}

/* 히어로 — 페이지가 열릴 때 제목이 아래에서 올라온다 */
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

.reveal-ready .hero__title,
.reveal-ready .hero__work,
.reveal-ready .hero aside {
  animation: rise 1100ms var(--ease-out) both;
}

.reveal-ready .hero__work { animation-delay: 200ms; }
.reveal-ready .hero aside { animation-delay: 350ms; }