/* ═══════════════════════════════════════════════════════════════
   0. 리셋
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, p, figure { margin: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════════
   1. 루트 폰트 — 유동 계산식
   1440px 에서 1rem = 14.99px, 968px 이하에서 16px 로 복귀한다.
   이 값을 늘리면 이 페이지의 모든 치수가 같이 늘어난다.
   ═══════════════════════════════════════════════════════════════ */
html { font-size: 1rem; }

/* 스크롤바 자리를 항상 비워둔다 — 이게 없으면 섹션이 늘어나 스크롤바가
   튀어나온 순간 히어로가 흔들린다. */
html { scrollbar-gutter: stable; }

@media screen and (max-width: 1920px) {
  html { font-size: calc(0.747899rem + 0.210084vw); }
}
@media screen and (max-width: 968px) {
  html { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   2. 디자인 토큰
   ═══════════════════════════════════════════════════════════════ */
:root {
  --color-sunrise-coral: #fc5f2b;
  --color-carbon-black: #181818;
  --color-zinc-600: #52525b;
  --color-zinc-500: #71717a;
  --color-zinc-200: #e4e4e7;
  --color-paper-white: #ffffff;
  --font-sans: 'Inter Tight', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-carbon-black);
  background-color: var(--color-paper-white);
  font-size: 1rem;
  line-height: 1.5;
  /* 한글 줄바꿈 — 단어가 음절 단위로 쪼개지는 것을 막는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   3. 네비게이션 — 히어로 위에 떠 있다
   ═══════════════════════════════════════════════════════════════ */
.nav_component {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

/* 상하 패딩이 비대칭인 이유 — 헤더 칸의 시각 중심은 뷰포트 가운데가 아니다.
   칸의 위 경계는 wrapper 상단(0)이 아니라 프레임 위쪽 가로 룰(카드에서 1rem
   인셋)이고, 아래 경계는 wrapper 하단의 네비 라인이다. 그래서 칸 내용이
   칸 정중앙에 오려면 padding-top = 22.5px + padding-bottom 이어야 한다. */
.nav_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 3rem 4.5rem 1.5rem;
  position: relative;
  background-color: transparent;
  transition: padding .25s cubic-bezier(.16, 1, .3, 1),
              background-color .25s cubic-bezier(.16, 1, .3, 1);
}

/* 네비 하단 라인 — 좌우 끝을 프레임 세로 룰(1.5rem)에 맞춘다 */
.nav_wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, .17);
  transform: scaleX(0);
  transform-origin: left center;
}
.is-ready .nav_wrapper::after { transform: scaleX(1); }
.js .nav_wrapper::after { transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .22s; }

/* 스크롤하면 pill 자체가 경계가 되므로 라인은 사라진다 */
@media screen and (min-width: 992px) {
  .nav_wrapper.is-scrolled::after { opacity: 0; transition: opacity .25s cubic-bezier(.16, 1, .3, 1); }
}

/* 로고는 절대 위치 — 데스크톱에서는 정중앙 정렬 */
.nav_logo {
  position: absolute;
  left: 50%;
  /* top 이 50% 가 아닌 이유는 위 .nav_wrapper 주석과 같다 — 칸의 위 경계는
     프레임 위쪽 가로 룰이라, 그 절반인 .75rem 만큼 내려와 메뉴와 같은 높이에 선다. */
  top: calc(50% + .75rem);
  transform: translate(-50%, -50%);
  /* z-index 필수. 스크롤 시 .nav_inner 에 backdrop-filter 가 깔리면
     쌓임 맥락이 생겨 이게 없으면 로고가 블러 pill 뒤로 가라앉는다. */
  z-index: 2;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--color-paper-white);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              top .25s cubic-bezier(.16, 1, .3, 1);
}

.nav_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 9999px;
  background-color: transparent;
  transition: max-width .25s cubic-bezier(.16, 1, .3, 1),
              background-color .25s cubic-bezier(.16, 1, .3, 1),
              padding .25s cubic-bezier(.16, 1, .3, 1),
              gap .25s cubic-bezier(.16, 1, .3, 1),
              backdrop-filter .25s cubic-bezier(.16, 1, .3, 1);
}

.nav_left { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.nav_right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

.nav_link {
  font-size: .875rem;
  line-height: 1.3125rem;
  color: var(--color-paper-white);
  white-space: nowrap;
}
.nav_link:hover { text-decoration: underline; }

.nav_cta {
  background-color: var(--color-paper-white);
  color: var(--color-carbon-black);
  padding: .625rem 1.25rem;
  border-radius: 9999px;
  font-size: .875rem;
  line-height: 1.3125rem;
  white-space: nowrap;
  transition: padding .25s cubic-bezier(.16, 1, .3, 1), scale 150ms ease-out;
}
.nav_cta:active { scale: .96; }

/* 햄버거 — 3x3 점 그리드 */
.nav_hamburger {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: .1875rem;
  padding: .375rem;
  border-radius: 9999px;
  transition: width .25s cubic-bezier(.16, 1, .3, 1),
              height .25s cubic-bezier(.16, 1, .3, 1),
              background-color .25s cubic-bezier(.16, 1, .3, 1),
              opacity .2s ease;
}
.nav_hamburger span {
  display: block;
  border-radius: 50%;
  background-color: var(--color-paper-white);
}
.nav_hamburger span:nth-child(9) { background: transparent; }
.nav_hamburger:hover { opacity: .7; }

/* 스크롤 상태 — 폭이 줄고 검정 블러 pill 로 수축 (데스크톱 전용) */
@media screen and (min-width: 992px) {
  .nav_wrapper.is-scrolled { padding: 1rem 4.5rem; }
  .nav_wrapper.is-scrolled .nav_inner {
    max-width: 46rem;
    background-color: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
    padding: .375rem .375rem .375rem .375rem;
    gap: 4rem;
  }
  .nav_wrapper.is-scrolled .nav_left,
  .nav_wrapper.is-scrolled .nav_right { width: auto; }
  /* 스크롤 상태에서는 top 보정이 필요 없다 — 프레임 칸이 사라지고
     pill 자체가 경계이기 때문이다. */
  .nav_wrapper.is-scrolled .nav_logo {
    top: 50%;
    transform: translate(-50%, -50%) scale(.75);
  }
  .nav_wrapper.is-scrolled .nav_cta { padding: .5rem 1rem; }
  .nav_wrapper.is-scrolled .nav_hamburger {
    width: 3.0625rem;
    height: 3.0625rem;
    padding: .75rem;
    background-color: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
  }
}

/* 태블릿·모바일 — pill 자체가 검정 블러 */
@media screen and (max-width: 991px) {
  .nav_wrapper {
    padding: 1rem 1.5rem;
  }
  .nav_inner {
    background-color: rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    padding: .5rem .5rem .5rem 1.25rem;
  }
  .nav_logo { position: static; transform: none; font-size: 1.625rem; }
  .nav_inner { justify-content: space-between; }
  .nav_left { display: none; }
  .nav_right { width: auto; }
  .nav_cta { font-size: .875rem; }
}

/* ═══════════════════════════════════════════════════════════════
   4. 히어로 레이아웃
   ═══════════════════════════════════════════════════════════════ */
.section_hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  /* 배너를 없애더라도 카드를 사방 .5rem 여백 안에 두는 구조 */
  height: calc(100dvh - 1rem);
  padding: .5rem;
}
@media screen and (max-width: 991px) { .section_hero { justify-content: flex-start; padding: 0; } }
@media screen and (max-width: 479px) { .section_hero { gap: 3rem; height: 100dvh; } }

/* 라운드 카드 = 배경 클리퍼 */
.hero_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  padding-bottom: 4rem;
  padding-left: 4rem;
}
@media screen and (max-width: 991px) {
  .hero_card {
    border-radius: 0;
    justify-content: flex-end;
    min-height: 720px;
    height: 720px;
    padding-bottom: 3rem;
    padding-left: 3rem;
  }
}
@media screen and (max-width: 479px) {
  .hero_card { min-height: 720px; padding-bottom: 1.5rem; padding-left: 0; }
}

/* 슬라이드 — 카드 안을 꽉 채운다 */
.hero_slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 4rem;
  padding-left: 4rem;
}
@media screen and (max-width: 991px) {
  .hero_slide { justify-content: flex-end; padding-bottom: 3rem; padding-left: 3rem; }
}
@media screen and (max-width: 479px) {
  .hero_slide { padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   5. 배경 — 원본 이미지 2겹 + 호버 리빌
   ═══════════════════════════════════════════════════════════════ */
.hero_bg { position: absolute; inset: 0; }
.hero_media { position: absolute; inset: 0; }

.hero_layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* 레이어 역할 —
   is-before : 항상 보이는 바탕 (z 0)
   is-after  : 화면에 직접 안 보인다 (opacity 0). 캔버스가 오려서 그린다.
   지우면 리빌될 그림이 없어진다. */
.hero_layer.is-before { z-index: 0; }
.hero_layer.is-after  { z-index: 1; opacity: 0; }

/* 모바일 크롭 보정 — 세로 화면에서는 가로 50%(기본)로 두면 얼굴 오른쪽만
   남아 리빌의 핵심이 화면 밖으로 나간다. 값을 줄이면 왼쪽으로, 키우면 오른쪽으로 간다. */
@media screen and (max-width: 767px) {
  .hero_layer { object-position: 40% 50%; }
}

/* 리빌 캔버스 — 커서가 지나간 자리에 에이전트 이미지가 '칠해진다'.
   서서히 지워진다. JS가 그리기 전에는 완전 투명이다 →
   JS가 죽어도 사람 이미지만 보일 뿐 빈 화면이 되지 않는다. */
.hero_reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 5-1. 좌측 스크림 — 텍스트가 안 읽히면 세 번째 값(.78)을 올린다.
   원본 히어로는 어두운 왼쪽에 텍스트가 놓이는 전제라, 그 겹이 반드시 필요하다. */
.hero_scrim-left {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  /* 76% 까지 뻗은 것은 화면 23% 에서 끝나버리면 스크림이 그 3배까지 가면서
     인물 얼굴을 절반 넘어버리기 때문이다. 마지막 정지점(44%)을 키우면 다시 얼굴이 어두워진다. */
  background-image: linear-gradient(90deg,
    rgba(10, 4, 2, .82) 0%,
    rgba(10, 4, 2, .70) 18%,
    rgba(10, 4, 2, .40) 32%,
    rgba(10, 4, 2, 0) 44%);
}

/* 5-2. 원본 오버레이 2겹 — mix-blend-mode 수정 금지. 두 겹 중
   하나라도 단순 반투명으로는 재현되지 않는다. */
.hero_gradient-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  z-index: 5;
  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: .3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero_gradient-darken {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 75%;
  z-index: 5;
  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
  opacity: .5;
  mix-blend-mode: darken;
  pointer-events: none;
}

/* 5-3. 계측 다이얼 — 오른쪽 여백 채우기.
   흰색 하이라인만, 컬러 금지. 색을 넣거나 굵게 하면 피사체와 카피를 이긴다.

   인물 뒤로 넣는 것처럼 보여야 하는데 이미지가 한 장이라 실제로 '뒤'에 놓을 수 없다.
   대신 인물 실루엣 모양으로 다이얼을 오려낸다 → 인물이 원을 가린 것처럼 보인다.
   마스크는 이미지의 object-fit:cover / object-position 과 같아야 하므로
   cover + 50% 50% 로 맞춘다. 이미지 크롭을 바꾸면 여기도 같이 바꿔야 한다. */
.hero_dial-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: url("assets/hero-mask.png");
  mask-image: url("assets/hero-mask.png");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero_dial {
  position: absolute;
  pointer-events: none;
  /* 가로 위치. 4% 는 카드 폭 비례(화면이 커지면 같이 밀린다).
     고정 오프셋이면 좁은 화면에서 다이얼이 잘린다. */
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  width: min(46vw, 660px);
  aspect-ratio: 1;
  overflow: visible;
}
.hero_dial circle {
  fill: none;
  stroke: #fff;
  /* non-scaling-stroke 대신 이 방식을 쓰는 이유 — viewBox 100 기준이라
     화면이 커지면 선도 같이 굵어진다. 얇게 유지하려면 vector-effect 를 쓴다. */
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
}
.hero_dial-ring { stroke-opacity: .14; }
.hero_dial-ring.is-inner { stroke-opacity: .09; }

/* 눈금 링 — 점선으로 눈금을 만든다 (48등분).
   등속(linear)이어야 계기가 살아 있다는 인상이 든다.
   이징을 넣으면 회전이 덜컥거린다. */
.hero_dial-ticks {
  stroke-opacity: .26;
  stroke-dasharray: 0.9 4.47;
  transform-origin: 50% 50%;
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .hero_dial-ticks { animation: dialSpin 120s linear infinite; }
}
@keyframes dialSpin { to { transform: rotate(360deg); } }

/* 모바일에서는 화면에 채울 여백이 없고 피사체만 가린다 */
@media screen and (max-width: 767px) {
  .hero_dial-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   6. 히어로 콘텐츠
   ═══════════════════════════════════════════════════════════════ */
.hero_content-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 991px) {
  .hero_content-wrap { justify-content: flex-end; align-self: stretch; align-items: stretch; width: 100%; }
}

.hero_content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .5rem;
  max-width: 37rem;
  color: var(--color-paper-white);
  text-wrap: balance;
}
@media screen and (max-width: 991px) { .hero_content { max-width: none; } }
@media screen and (max-width: 479px) { .hero_content { align-self: stretch; width: 100%; } }

/* 6-2. 제목 묶음 — margin-bottom = 서브↔버튼 간격 */
.title_content-group {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-bottom: 2.5rem;
}

/* 6-3. H1 — weight 400 고정. 굵게 쓰면 인상이 완전히 달라진다. */
.heading-style-h1 {
  font-size: 3.75rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 400;
  color: var(--color-paper-white);
}
/* 헤드라인은 줄 단위로 쪼개 순차 등장시킨다 */
.heading-style-h1 .line,
.heading-style-h1 .line > span { display: block; }

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .heading-style-h1 { font-size: 3rem; line-height: 1.166; letter-spacing: -.02em; }
}
@media screen and (max-width: 991px) {
  .heading-style-h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -.02em; }
}
@media screen and (max-width: 767px) {
  .heading-style-h1 { font-size: 2.5rem; }
}

.max-width-small { width: 100%; max-width: 32rem; }
@media screen and (max-width: 767px) { .max-width-small { max-width: 20rem; } }
@media screen and (max-width: 479px) { .max-width-small { max-width: 18.5rem; } }

/* 두 문장을 각각 한 줄로 — .line 단위로 줄바꿈된다 */
.hero_sub .line,
.hero_sub .line > span { display: block; }

.hero_sub {
  /* 원본 영문 1줄 기준(17px)이라, 한글 2줄에서는 너무 작고 H1(56px)과 낙차가 커진다 */
  font-size: 1.125rem;
  line-height: 1.45;
  letter-spacing: -.2px;
  font-weight: 400;
  /* 어두운 히어로에서는 흰색을 낮춘 투명도로. 100% 로 두면 서브가 헤드라인과 같은 무게로 읽힌다 */
  color: rgba(255, 255, 255, .82);
}
@media screen and (max-width: 767px) { .hero_sub { font-size: 1rem; line-height: 1.5; } }

.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
@media screen and (max-width: 767px) { .button-group { gap: .5rem; } }
@media screen and (max-width: 479px) {
  .button-group.is-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
}

.btn {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1),
              transform .25s cubic-bezier(.4, 0, .2, 1),
              box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}
@media screen and (max-width: 767px) { .btn { padding: .62rem 1rem; font-size: .875rem; } }
@media screen and (max-width: 479px) { .btn { padding-top: .675rem; padding-bottom: .675rem; } }

.btn.is-primary {
  background-color: var(--color-paper-white);
  color: var(--color-carbon-black);
  border-style: none;
}
.btn.is-primary:hover { background-color: var(--color-zinc-200); }
.btn.is-primary:active {
  background-color: var(--color-zinc-200);
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.btn.is-secondary {
  background-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  color: var(--color-paper-white);
  border-style: none;
}
.btn.is-secondary:hover { background-color: rgba(255, 255, 255, .2); }
.btn.is-secondary:active { background-color: rgba(255, 255, 255, .2); transform: translateY(1px); }

/* ═══════════════════════════════════════════════════════════════
   7. 계측 프레임 / 계측 라인
   세로 룰과 가로 룰이 사각 틀을 닫고, 그 교차 위에 + 크로스헤어 4개를 찍어
   '계측 도면' 인상을 만든다. 반드시 카드 가장자리에만 둔다.
   제목 옆으로 끌어오면 '제목 좌측 액센트 바'가 되는데, 그건 금지된 장식이다.
   ═══════════════════════════════════════════════════════════════ */
.hero_frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* 1rem 인셋인 이유 — 위쪽 가로 룰이 네비게이션 프레임 안에 걸쳐야
     네비 라인과 한 칸을 이룬다. 이보다 크면 룰이 네비 글자를 관통한다. */
  inset: 1rem;
}
/* border 가 아니라 엘리먼트인 이유 — border 는 그어지는 연출을 못 한다 */
.hero_frame-h {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .17);
  transform-origin: left center;
}
.hero_frame-h.is-top { top: 0; }
.hero_frame-h.is-bottom { bottom: 0; }

/* 세로 룰 — 카드 위아래 끝까지 관통한다 */
.hero_frame::before,
.hero_frame::after {
  content: '';
  position: absolute;
  top: -1rem;
  bottom: -1rem;
  width: 1px;
  background: rgba(255, 255, 255, .24);
  transform-origin: top center;
}
.hero_frame::before { left: -1px; }
.hero_frame::after { right: -1px; }

/* 크로스헤어 */
.hero_cross {
  position: absolute;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
}
.hero_cross::before,
.hero_cross::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, .55);
}
.hero_cross::before { left: 0; right: 0; top: 50%; height: 1px; }
.hero_cross::after { top: 0; bottom: 0; left: 50%; width: 1px; }

/* 크로스헤어 위치 — 좌우 두 지점씩 */
.hero_cross.is-l1 { left: 0; top: 30%; }
.hero_cross.is-l2 { left: 0; top: 68%; }
.hero_cross.is-r1 { left: 100%; top: 30%; }
.hero_cross.is-r2 { left: 100%; top: 68%; }

/* 모바일에서는 프레임을 숨긴다 — 카피와 라인이 붙어 답답해진다 */
@media screen and (max-width: 767px) {
  .hero_frame { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   8. 하단 3샷
   ═══════════════════════════════════════════════════════════════ */
.hero_bottom-notes {
  position: absolute;
  z-index: 10;
  bottom: 3rem;
  left: 4rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-paper-white);
}
@media screen and (max-width: 991px) { .hero_bottom-notes { display: none; } }

.hero_note {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 1rem;
  line-height: 1.4;
}
/* 구분선은 보더 아니라 폭 1px 짜리 빈 div 다 */
.hero_divider {
  width: 1px;
  height: 2.5rem;
  background-color: var(--color-paper-white);
  opacity: .2;
  flex: none;
}
.text-style-muted { opacity: .6; }

/* ═══════════════════════════════════════════════════════════════
   9. 인트로 연출
   원본은 배경이 '거의 검정'에서 주황 조명이 밝아오는 7.2초 영상이었다.
   우리는 그 영상을 정지 이미지로 바꿨으므로, 같은 역할을 하는 연출을 따로 만들어야 한다.

   '숨김' 상태는 전부 `.js` 로 게이트한다 → JS 가 꺼져 있으면 숨김 자체가
   적용되지 않아, 히어로가 처음부터 완성된 모습으로 보인다.
   전체 속도는 아래 duration 을 늘리거나 줄이면 된다.
   ═══════════════════════════════════════════════════════════════ */

/* 확대 + 흐림 + 어둠에서 풀린다 */
.js .hero_media {
  transform: scale(1.12);
  filter: blur(14px) brightness(.42);
  transition: transform 1.9s cubic-bezier(.22, 1, .36, 1),
              filter 1.6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, filter;
}
.is-ready .hero_media { transform: scale(1); filter: blur(0) brightness(1); }

/* 네비 — 투명도만 (transform 을 걸면 backdrop-filter 가 어긋난다) */
.js .nav_component { opacity: 0; transition: opacity 1s cubic-bezier(.22, 1, .36, 1) .155s; }
.is-ready .nav_component { opacity: 1; }

/* 텍스트 — 보이는 상자 밖에서 밀려 올라온다 (마스크 슬라이드인) */
.heading-style-h1 .line,
.hero_sub .line { overflow: hidden; }
/* line-height 1 이라 overflow:hidden 이 글자 위아래를 자른다.
   padding 으로 자리를 벌리고 같은 값의 음수 margin 으로 레이아웃을 되돌린다. */
.heading-style-h1 .line { padding: .18em 0; margin-bottom: -.18em; }
.hero_sub .line { padding: .12em 0; margin-bottom: -.12em; }

.js .heading-style-h1 .line > span,
.js .hero_sub .line > span {
  display: block;
  transform: translateY(108%);
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1);
}
.is-ready .heading-style-h1 .line > span,
.is-ready .hero_sub .line > span { transform: translateY(0); }

/* 순차 등장 간격 */
.js .heading-style-h1 .line:nth-child(1) > span { transition-delay: .28s; }
.js .heading-style-h1 .line:nth-child(2) > span { transition-delay: .40s; }
.js .hero_sub .line:nth-child(1) > span { transition-delay: .52s; }
.js .hero_sub .line:nth-child(2) > span { transition-delay: .60s; }

/* 하단 3샷 — 부드러운 페이드업 */
.js .button-group,
.js .hero_bottom-notes {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1),
              transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.js .button-group { transition-delay: .68s; }
.js .hero_bottom-notes { transition-delay: .78s; }
.is-ready .button-group,
.is-ready .hero_bottom-notes { opacity: 1; transform: none; }

/* 계측 다이얼 — 살짝 작은 상태에서 퍼지듯 나타난다 */
.js .hero_dial {
  opacity: 0;
  transform: translateY(-50%) scale(.94);
  transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1) .9s,
              transform 1.6s cubic-bezier(.22, 1, .36, 1) .9s;
}
.is-ready .hero_dial { opacity: 1; transform: translateY(-50%) scale(1); }

/* 프레임 — 룰이 그어지고 크로스헤어가 뒤이어 찍힌다 */
.js .hero_frame-h { transform: scaleX(0); transform-origin: left center;
  transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .18s; }
.is-ready .hero_frame-h { transform: scaleX(1); }

.js .hero_frame::before,
.js .hero_frame::after { transform: scaleY(0); transform-origin: top center;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .12s; }
.is-ready .hero_frame::before,
.is-ready .hero_frame::after { transform: scaleY(1); }

.js .hero_cross {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  transition: opacity .65s ease-out 1.15s, transform .8s cubic-bezier(.22, 1, .36, 1) 1.15s;
}
.is-ready .hero_cross { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 모션 최소화 사용자 — 인트로 없이 최종 상태로 바로 */
@media (prefers-reduced-motion: reduce) {
  .hero_media, .nav_component, .button-group, .hero_bottom-notes, .hero_dial,
  .heading-style-h1 .line > span, .hero_sub .line > span, .nav_wrapper::after,
  .hero_frame-h, .hero_frame::before, .hero_frame::after, .hero_cross {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .hero_media { transform: none; filter: none; will-change: auto; }
  .nav_component, .button-group, .hero_bottom-notes { opacity: 1; transform: none; }
  .heading-style-h1 .line > span, .hero_sub .line > span { transform: none; }
  .hero_dial { opacity: 1; transform: translateY(-50%) scale(1); }
  .nav_wrapper::after { transform: scaleX(1); }
  .hero_frame-h { transform: scaleX(1); }
  .hero_frame::before, .hero_frame::after { transform: scaleY(1); }
  .hero_cross { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}