/* ==========================================================================
   색상 조절 영역.
   여기 HEX 값만 바꾸면 전체에 반영됨.
   ========================================================================== */
:root {
  --hero-bg:          #e0e2ea;  /* 프레임 1 배경 (영상 위쪽 가장자리와 맞출 색) */
  --info-bg-top:      #f2f2f4;  /* 프레임 2 배경 그라데이션 ─ 위 (영상 아래쪽 가장자리와 맞출 색) */
  --info-bg-bottom:   #cdd5e2;  /* 프레임 2 배경 그라데이션 ─ 아래 */
  /* 바깥 배경 (PC에서 가운데 콘텐츠 양옆) ─ 그라데이션
     두 색을 같게 두면 단색처리. 스크롤해도 화면에 고정. */
  --page-bg-top:      #e0e2ea;  /* 그라데이션 시작 색 */
  --page-bg-bottom:   #cdd5e2;  /* 그라데이션 끝 색 */
  --page-bg-angle:    180;      /* 방향 (도) : 180 = 위->아래, 90 = 왼->오른, 135 = 대각선 */
  --ink:              #182566;  /* 기본 글자색 (Navy) */

  /* 영상 경계가 보일 때 쓰는 페이드 (디자인 px 단위, 0 = 끔)
     예: 32 로 두면 영상 위 32px 구간이 --hero-bg 로 서서히 이어짐. 기본값은 없음(=0). */
  --video-fade-top:    0;
  --video-fade-bottom: 0;
}

/* ==========================================================================
   레이아웃 스케일
   Figma 대지(가로 360)의 1px = 1u.  폰 폭에 맞춰 비례 확대되고,
   데스크톱에서는 --max-w 값으로 가운데 정렬됨.
   ========================================================================== */
:root {
  --max-w: 880px;  /* PC에서 가운데 콘텐츠 최대 폭 */
  --u: calc(min(100vw, var(--max-w)) / 360);
  --font: "Geist", "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page-bg-bottom);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
/* 바깥 배경 그라데이션 : 화면(뷰포트)에 고정 ─ iOS 에서도 안정적으로 보이도록 background-attachment 대신 고정 레이어 사용 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(calc(var(--page-bg-angle) * 1deg), var(--page-bg-top), var(--page-bg-bottom));
  pointer-events: none;
}
p, h1, h2 { margin: 0; font-weight: inherit; }
img { display: block; }

.page {
  width: min(100vw, var(--max-w));
  margin: 0 auto;
  overflow: hidden;
}

/* ─────────────── 프레임 1 ─────────────── */
.hero {
  background: var(--hero-bg);
  padding-top: calc(24 * var(--u));
  text-align: center;
  font-weight: 600;
}
.hero-title {
  width: calc(322 * var(--u));
  margin: 0 auto;
  font-size: calc(18 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.05em;
}
.hero-to {
  width: calc(322 * var(--u));
  margin: calc(19.2 * var(--u)) auto 0;
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.hero-from {
  width: calc(322 * var(--u));
  margin: calc(12.2 * var(--u)) auto 0;
  font-size: calc(12 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}
.hero-from[hidden] { display: none; }

.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 640;
  margin-top: calc(5 * var(--u)); /* '드림' 줄과 영상 사이 여백 */
}
/* from 줄이 없을 때 영상과 to 문장 사이 간격 */
.hero-from[hidden] + .hero-media { margin-top: calc(12 * var(--u)); }

.hero-video,
.hero-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--hero-bg);
}
/* iOS 저전력 모드 등에서 뜨는 기본 재생 버튼 숨김 */
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero-video::-webkit-media-controls { display: none !important; }

.hero-media::before,
.hero-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-media::before {
  top: 0;
  height: calc(var(--video-fade-top) * var(--u));
  background: linear-gradient(var(--hero-bg), transparent);
}
.hero-media::after {
  bottom: 0;
  height: calc(var(--video-fade-bottom) * var(--u));
  background: linear-gradient(transparent, var(--info-bg-top));
}

/* ─────────────── 프레임 2 (Figma 좌표 그대로 배치) ─────────────── */
.info {
  background: linear-gradient(to bottom, var(--info-bg-top), var(--info-bg-bottom));
}
.info-canvas {
  position: relative;
  height: calc(1113 * var(--u));
}
.info-canvas > * {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}
.art {
  width: calc(var(--w) * var(--u));
  height: auto; /* 내보낸 이미지 비율 그대로 (찌그러짐 방지) */
}

.period {
  width: calc(195 * var(--u));
  font-weight: 500;
  font-size: calc(14.378 * var(--u));
  line-height: 1.15;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.period-line {
  flex: 0 0 calc(64.7 * var(--u));
  height: max(1px, calc(1.24 * var(--u)));
  background: currentColor;
}

.heading {
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: 1.15;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
/* 제목 이미지 (Figma 텍스트 박스 크기 그대로) */
.heading img {
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.insta {
  left: auto;
  right: calc(var(--r) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* 글자가 작아서 누르기 쉽도록 터치 영역만 넓힘 (보이는 위치는 그대로) */
  padding: calc(10 * var(--u));
  margin: calc(-10 * var(--u));
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: calc(7.212 * var(--u));
  line-height: 1.15;
  letter-spacing: -0.04em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.insta span {
  text-decoration: underline;
  text-decoration-thickness: max(0.5px, calc(0.5 * var(--u)));
  text-underline-offset: 0.15em;
}
.insta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }