/* ============================================================
   JOSEPH TELECOM — Design System v1  /  Phase 1
   HEADER · HERO · BRAND TYPOGRAPHY · FEATURED PHONES
   ============================================================ */

/* ---------- Pretendard (self-hosted, variable) ----------
   @font-face 는 각 HTML 의 <link href="assets/fonts/pretendard/pretendardvariable-dynamic-subset.css"> 가 선언한다.
   한 파일(2MB)을 통째로 받던 방식 대신, 페이지에 실제로 쓰인 글자가 든 조각만 받는다(모바일 속도).
   글꼴 이름은 그대로 "Pretendard Variable" 이다. 예전 파일(PretendardVariable.woff2)은 남겨 둔다. */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Brand */
  --navy-950: #071B2D;     /* PEOPLE · FINAL · FOOTER — 가장 깊은 지면 */
  --navy-900: #0B1B2E;
  --navy-800: #0F2439;
  --navy-700: #16324F;
  --navy-500: #2A4A6B;
  --orange-500: #E05E14;
  --orange-400: #F2762E;
  --orange-700: #B34400;
  --ivory: #F2EEE6;
  --ivory-warm: #F7F4EE;   /* ABOUT · SERVICE 의 밝은 지면 */
  --paper: #FBFAF7;
  --ink: #14181D;
  --warm-grey: #6E6A62;
  --border: #DED8CC;

  /* Semantic — light ground */
  --bg: var(--ivory);
  --surface: var(--paper);
  --text: var(--ink);
  --text-muted: var(--warm-grey);
  --line: var(--border);
  --accent-text: var(--orange-700);   /* AA on ivory  4.85:1 */
  --accent-solid: var(--orange-500);
  --on-accent: #FFFFFF;

  /* Semantic — navy ground */
  --panel: var(--navy-900);
  --panel-text: #EDE7DC;
  --panel-muted: #8FA3B8;
  --panel-line: var(--navy-500);
  --accent-on-panel: var(--orange-500); /* AA on navy 4.78:1 */

  /* ---- HERO accent tokens (영상 삽입 후 최종 결정 — main.js 로 전환 가능) ---- */
  --hero-title: #FFFFFF;
  --hero-lede: rgba(242, 238, 230, 0.72);
  --hero-eyebrow: var(--panel-muted);
  --hero-rule: rgba(242, 238, 230, 0.28);
  --hero-cta-bg: var(--orange-500);
  --hero-cta-fg: #FFFFFF;
  --hero-cta-ghost: rgba(242, 238, 230, 0.55);
  --hero-scroll: var(--orange-500);
  --hero-overlay-top: rgba(11, 27, 46, 0.24);
  --hero-overlay-bottom: rgba(11, 27, 46, 0.62);

  /* ---- HERO 배경 이미지 ----
     영상(joseph-hero.mp4)이 들어오기 전까지 같은 full-bleed 자리를 채운다.
     --hero-focal 로 크롭 기준점을 조정한다 (우측 교회 · 중앙 스카이라인 보존). */
  --hero-image: url("../assets/images/hero/joseph-hero.jpg");   /* 원본 png(2MB)는 보관, 같은 이미지의 jpg(240KB)를 쓴다 */
  /* 가로 크롭은 오른쪽 기준(교회·십자가 보존), 세로 크롭은 위쪽 기준(십자가 상단 보존) */
  --hero-focal: 100% 34%;
  /* 좌측 카피 영역 가독성용 스크림 — 배경이 어두워지지 않도록 절제 */
  --hero-scrim-left: rgba(11, 27, 46, 0.62);
  --hero-scrim-mid: rgba(11, 27, 46, 0.20);

  /* Type */
  --font-kr: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", system-ui, sans-serif;
  --font-display: "Archivo", var(--font-kr);
  /* 영문·숫자는 JetBrains Mono 그대로. JetBrains Mono 에는 한글 글리프가 없어서
     예전에는 한글이 시스템 고정폭 글꼴(Windows: GulimChe)로 떨어졌다 —
     바로 뒤에 Pretendard 를 두어 한글만 Pretendard 로 그리게 한다. */
  --font-mono: "JetBrains Mono", "Pretendard Variable", Pretendard, ui-monospace, "SFMono-Regular", monospace;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 16px;  --sp-4: 24px;
  --sp-5: 40px; --sp-6: 64px;  --sp-7: 96px;  --sp-8: 144px;

  --gutter: 20px;
  --maxw: 1280px;
  --header-h: 88px;
  --header-h-sm: 64px;

  /* Motion */
  --m-micro: 180ms;
  --m-ui: 320ms;
  --m-reveal: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* 헤더가 풀스크린 메뉴 위에 있어야 닫기 버튼을 누를 수 있다 */
  --z-nav: 200;
  --z-header: 300;
}

@media (min-width: 768px)  { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 64px; } }
@media (min-width: 1440px) { :root { --gutter: 96px; } }

/* HERO — Orange 강조를 넓게 쓰는 대안 버전 */
.hero[data-hero-accent="accent"] {
  --hero-eyebrow: var(--orange-500);
  --hero-rule: rgba(224, 94, 20, 0.55);
  --hero-lede: rgba(242, 238, 230, 0.82);
}

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

/* hidden 속성은 어떤 클래스보다 우선한다.
   (.mobile-nav 의 display:flex 가 [hidden] 을 이겨 풀스크린 메뉴가
   기본으로 열려 보이던 문제를 막는다) */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  /* 새벽에서 시작한다 — 위로 당겨 튕길 때도 네이비가 보이도록 */
  background: var(--navy-950);
  color: var(--text);
  font-family: var(--font-kr);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  /* 한글은 어절 단위로만 줄바꿈한다. overflow-wrap:anywhere 는
     keep-all 을 무력화해 조사가 단독 줄로 떨어지므로 쓰지 않는다. */
  word-break: keep-all;
  overflow-wrap: normal;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--navy-900); color: var(--panel-text);
  padding: 10px 18px; font-size: 14px;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- shared bits ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow__axis {
  color: var(--accent-text);
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border-radius: 2px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color var(--m-micro) var(--ease-out),
              color var(--m-micro) var(--ease-out),
              border-color var(--m-micro) var(--ease-out);
}
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 16px; }

.btn--solid  { background: var(--hero-cta-bg); color: var(--hero-cta-fg); }
.btn--solid:hover  { background: var(--orange-700); }

.btn--ghost  { border-color: var(--hero-cta-ghost); color: var(--panel-text); }
.btn--ghost:hover  { border-color: var(--panel-text); background: rgba(242, 238, 230, 0.08); }

.btn--outline { border-color: currentColor; }
.btn--outline:hover { background: var(--orange-500); border-color: var(--orange-500); color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: 15px; font-weight: 500; color: var(--text-muted);
  transition: color var(--m-micro) var(--ease-out), gap var(--m-micro) var(--ease-out);
}
.link-arrow::after { content: "→"; transition: transform var(--m-micro) var(--ease-out); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--primary { color: var(--accent-text); font-weight: 600; }
.link-arrow--primary:hover { color: var(--orange-700); }

/* ---------- 국문 브랜드 로크업 ----------
   "꿈꾸는" 은 "요셉통신" 을 꾸며주는 modifier 다. 메인 크기로 올라오지 않는다.
   부모의 font-size 를 그대로 상속하므로 어디에 놓아도 비율이 유지된다.
   기본은 2줄 스택, .brand-kr--inline 은 한 줄 표현. */
.brand-kr {
  display: inline-flex; flex-direction: column;
  gap: 0.2em;
  line-height: 1.08;
  font-family: var(--font-kr);
}
.brand-kr__modifier {
  /* 요셉통신의 약 1/4. 작은 크기에서도 읽히도록 11px 하한을 둔다. */
  font-size: max(11px, 0.24em);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-solid);  /* 아주 작은 오렌지 포인트 */
}
.brand-kr__name {
  font-size: 1em;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.brand-kr--inline {
  flex-direction: row; align-items: baseline;
  gap: 0.36em;
}
/* 오렌지가 부담스러운 밝은 배경에서는 modifier 를 중립색으로 */
.brand-kr--muted .brand-kr__modifier { color: var(--text-muted); }

/* 평문 문장 안에서 쓰는 인라인 modifier.
   로크업 컴포넌트를 쓸 수 없는 본문에서 "꿈꾸는" 만 한 단계 낮춘다.
   em 기준이라 어느 문장에 넣어도 비율이 유지된다. */
.brand-mod {
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

/* ---------- asset placeholders ---------- */
.asset-box {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 240px;
  border: 1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg,
      rgba(110, 106, 98, 0.10) 0 7px, transparent 7px 14px);
}
.asset-slug {
  font-family: var(--font-mono);
  font-size: 10.5px; line-height: 1.7; letter-spacing: 0.06em;
  color: var(--text-muted); text-align: center; padding: var(--sp-3);
  overflow-wrap: anywhere;   /* 파일 경로만 예외적으로 강제 줄바꿈 */
}
.asset-slug span {
  display: block;
  font-size: 11px; letter-spacing: 0.22em; color: var(--accent-text);
  margin-bottom: 4px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  color: var(--panel-text);
  transition: transform var(--m-ui) var(--ease-out),
              background-color var(--m-ui) var(--ease-out),
              backdrop-filter var(--m-ui) var(--ease-out);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  height: var(--header-h);
  padding: 0 var(--gutter);
  transition: height var(--m-ui) var(--ease-out);
}

/* 스크롤 중에도 항상 고정 노출된다 ('hidden' 상태 없음).
   배경 0.72 → 0.64. 이보다 더 투명하게 하면 ABOUT·SERVICE 같은
   밝은 지면 위에서 메뉴 글자 대비가 WCAG AA(4.5:1) 아래로 떨어진다.
   (0.64 + 불투명 메뉴 글자 = 4.53:1)
   투명해진 만큼 blur 를 18px 로 올려 뒤 콘텐츠가 비쳐도 글자가 뜬다. */
.site-header[data-state="condensed"] {
  background: rgba(11, 27, 46, 0.64);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(42, 74, 107, 0.36);
}
.site-header[data-state="condensed"] .site-header__inner { height: var(--header-h-sm); }

.wordmark {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; white-space: nowrap;
}

/* 메뉴가 3개다. 항목 사이와 상담하기 버튼 앞을 넉넉히 벌려
   내비가 오른쪽 한쪽에 뭉쳐 보이지 않게 한다. */
.site-nav {
  display: none; align-items: center;
  gap: clamp(32px, 4vw, 64px);
}
.site-nav__list {
  display: flex; align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
}
/* 한국어가 MAIN. 영문은 그 아래 아주 작은 보조 라벨로만 둔다. */
.site-nav__list em {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-style: normal;
  font-size: 8.5px; letter-spacing: 0.24em;
  color: var(--panel-muted);
}
.site-nav__list a {
  position: relative;
  display: block; padding: 8px 2px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  /* 헤더 배경을 더 투명하게 만든 만큼(0.72→0.64) 글자는 불투명하게.
     0.82 로 두면 밝은 지면 위에서 대비가 3.6:1 까지 떨어진다. */
  color: var(--panel-text);
  transition: color var(--m-micro) var(--ease-out);
}
.site-nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1px; background: var(--orange-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.site-nav__list a:hover { color: #fff; }
.site-nav__list a:hover::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }

/* hamburger */
.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 48px; height: 48px; margin-right: -12px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 24px; height: 1.5px; background: currentColor;
  transition: transform var(--m-ui) var(--ease-out), opacity var(--m-micro) linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 1024px) {
  /* 로고(왼쪽) — 메뉴(화면 정중앙) — 상담하기(오른쪽 끝).

     메뉴를 흐름 안에 두면 중앙이 '로고와 버튼 사이의 가운데'가 되어
     둘의 폭에 따라 흔들린다. 그래서 메뉴만 흐름에서 빼내
     .site-header(= position:fixed, 화면 전체 폭) 기준으로 고정한다.
     left:50% 가 곧 viewport 의 정중앙이라 로고·버튼 폭과 무관하다. */
  .site-nav {
    display: flex;
    margin-left: auto;              /* 상담하기 버튼은 오른쪽 끝 */
  }
  .site-nav__list {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);   /* 헤더 높이가 줄어도 세로 중앙 유지 */
    /* 항목 사이를 조금만 더 벌린다 (28~56 → 36~68) */
    gap: clamp(36px, 4.2vw, 68px);
  }
  .nav-toggle { display: none; }
}

/* ---------- fullscreen nav — Mobile / Tablet 전용 ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-nav);
  color: var(--panel-text);
  display: flex;
}
/* 네이비 레이어를 분리해 콘텐츠와 별도로 부드럽게 등장시킨다 */
.mobile-nav__layer {
  position: absolute; inset: 0;
  background: var(--navy-900);
}

.mobile-nav__inner {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  padding: calc(var(--header-h) + var(--sp-4)) var(--gutter)
           calc(var(--sp-6) + env(safe-area-inset-bottom));
}

/* 메뉴를 남는 공간의 세로 중앙에 둔다 */
.mobile-nav__body { display: flex; align-items: center; }

.mobile-nav__list {
  width: 100%;
  display: flex; flex-direction: column;
  gap: clamp(var(--sp-3), calc(var(--vh, 1vh) * 3.2), var(--sp-5));
}
.mobile-nav__list a {
  display: flex; align-items: baseline; gap: 16px;
  min-height: 48px;
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px); font-weight: 700; letter-spacing: 0.02em;
  transition: color var(--m-micro) var(--ease-out);
}
.mobile-nav__list a:hover { color: #fff; }
.mobile-nav__idx {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--orange-500);
}
.mobile-nav__list em {
  font-family: var(--font-kr); font-style: normal;
  font-size: 13px; font-weight: 400; color: var(--panel-muted);
  margin-left: auto;
}

/* ---- 하단: secondary → primary → signature 3단 위계 ---- */
.mobile-nav__foot {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--panel-line);
}

.mobile-nav__secondary {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em;
}
.mobile-nav__secondary a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--panel-muted);
  transition: color var(--m-micro) var(--ease-out);
}
.mobile-nav__secondary a:hover { color: var(--panel-text); }
.mobile-nav__secondary span {
  width: 1px; height: 12px; background: var(--panel-line);
}

/* 정제된 primary CTA — 꽉 찬 오렌지 바가 아니라 오렌지 룰 위의 텍스트 */
.cta-line {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  align-self: flex-start;
  min-width: min(280px, 100%);
  min-height: 52px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--orange-500);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--panel-text);
  transition: color var(--m-micro) var(--ease-out),
              border-color var(--m-micro) var(--ease-out);
}
.cta-line::after {
  content: "→";
  color: var(--orange-500);
  transition: transform var(--m-ui) var(--ease-out);
}
.cta-line:hover { color: #fff; border-color: var(--orange-400); }
.cta-line:hover::after { transform: translateX(6px); }

.mobile-nav__sign {
  font-family: var(--font-mono);
  font-size: 10px; line-height: 1.9; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(143, 163, 184, 0.6);
}
.mobile-nav__sign span {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.28em;
  color: var(--panel-muted);
}

/* 태블릿: 여백과 타이포를 한 단 키운다 */
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-nav__list { gap: clamp(var(--sp-4), calc(var(--vh, 1vh) * 3.6), var(--sp-6)); }
  .mobile-nav__list a { font-size: 52px; }
  .mobile-nav__list em { font-size: 14px; }
  .cta-line { font-size: 22px; min-width: 340px; }
}

/* GSAP 가 없을 때의 CSS 폴백 — 레이어가 먼저, 콘텐츠가 이어서 */
@keyframes nav-layer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.mobile-nav[data-anim="css"] .mobile-nav__layer {
  animation: nav-layer-in 380ms var(--ease-out) both;
}
.mobile-nav[data-anim="css"] .mobile-nav__inner {
  animation: nav-content-in 480ms var(--ease-out) 120ms both;
}

/* ============================================================
   STAGE — ONE SPACE · ONE LIGHT · ONE CONTINUOUS JOURNEY
   화면 뒤에 고정된 단 하나의 공간. main.js(initStage)가 매 프레임
   아래 CSS 변수와 transform 만 바꾼다. 섹션은 이 위를 지나가는 투명한 글 레이어.
     z 순서: SKY → CAMERA(plates) → ATMOS → LIGHT
   ============================================================ */
main { position: relative; z-index: 1; }

.stage {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: var(--navy-950);
  pointer-events: none;
}
/* Ivory 구간이 화면을 완전히 덮는 동안은 그리지 않는다 */
.stage.is-covered { visibility: hidden; }
/* 터치 기기 — 주소창이 들어가고 나와도 공간의 크기가 바뀌지 않게
   가장 큰 화면 높이(lvh)로 고정한다. 주소창이 보일 때는 아래 끝이 주소창 뒤에 숨을 뿐이다.
   main.js(initStage)가 같은 미디어쿼리에서 이 높이로 키 위치 · canvas 를 잰다. */
@media (hover: none), (pointer: coarse) {
  .stage { bottom: auto; height: calc(var(--vh, 1vh) * 100); height: 100lvh; }
}

.stage__sky {
  position: absolute; inset: 0;
  --sky-top: 4 12 24;
  --sky-bottom: 11 31 51;
  --sky-glow: 0;
  background:
    radial-gradient(120% 60% at 50% 108%,
      rgb(233 90 12 / calc(var(--sky-glow) * 0.85)) 0%,
      rgb(242 170 110 / calc(var(--sky-glow) * 0.32)) 34%,
      transparent 70%),
    linear-gradient(to bottom, rgb(var(--sky-top)), rgb(var(--sky-bottom)));
}

/* 한 대의 카메라 — 모든 plate 가 같은 transform 을 공유한다 */
.stage__camera {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* plate 는 화면보다 6% 크게 — 카메라가 움직여도 가장자리가 비지 않는다 */
.stage__plate {
  position: absolute; inset: -6%;
  opacity: 0;
  will-change: opacity;
}
.stage__img,
.stage__video,
.stage__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.stage__video { opacity: 0; transition: opacity 1400ms var(--ease-out); }
.stage__plate.has-video .stage__video { opacity: 1; }
.stage__layer { will-change: transform; }
.stage__plate.has-layers > .stage__img { opacity: 0; }
/* 두 손 사진은 밝은 한낮 톤이다 — 네이비를 덮으면 회색으로 뜨므로
   사진 자체를 새벽 톤으로 눌러 같은 영화의 한 장면처럼 맞춘다 (COLOR CONTINUITY) */
.stage__plate[data-plate="hands"] .stage__img {
  filter: brightness(0.6) contrast(1.12) saturate(0.85) hue-rotate(-6deg);
}
/* 아침 사진이 아직 없을 때 — 새벽 스틸을 아침빛으로 보정한 임시 장면 */
.stage__plate.is-graded .stage__img {
  filter: brightness(1.55) saturate(1.08) sepia(0.32) contrast(0.88);
}

/* 빛이 빠져나간 자리 — 사진에 이미 찍혀 있는 섬광은 지울 수 없으므로
   그 위에 따뜻한 그늘을 곱해(multiply) 가라앉힌다.
   가장자리는 흰색(= multiply 의 중립색)이라 주변에 티가 나지 않는다.

   '꺼진 구멍'이 아니라 '섬광이 잦아든 자리'여야 한다 —
   중심을 너무 어둡게 하면(예: rgb 104 74 44 = 밝기 41%) 그 어둠이
   오히려 시선을 끌어간다. 중심 밝기를 80% 선에서 멈춘다. */
.stage__drain {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
  background: radial-gradient(closest-side,
    rgb(204 190 170) 0%, rgb(226 216 202) 36%, rgb(244 240 234) 68%, rgb(255 255 255) 100%);
}

.stage__atmos {
  position: absolute; inset: 0;
  --dim: 0;
  --scrim: 0;
  --scrim-rgb: 7 27 45;
  --vig: 0.5;
  background:
    linear-gradient(to right,
      rgb(var(--scrim-rgb) / var(--scrim)) 0%,
      rgb(var(--scrim-rgb) / calc(var(--scrim) * 0.55)) 38%,
      transparent 70%),
    radial-gradient(130% 100% at 50% 45%, transparent 52%, rgb(3 10 20 / var(--vig)) 100%),
    rgb(7 27 45 / var(--dim));
}
.stage__light { position: absolute; inset: 0; width: 100%; height: 100%; }

/* JS 가 없으면 새벽 한 장면으로 멈춰 있다 */
html:not(.js) .stage__plate[data-plate="hero"] { opacity: 1; }
html:not(.js) .stage__atmos { --dim: 0.45; }

/* 머무는(sticky) 장면의 길이 — 모바일은 짧게 */
:root {
  --h-hero: calc(var(--vh, 1vh) * 230);
  /* 설립 약속 — 문이 열리는 영상이 재생되는 구간이기도 하다.
     8초짜리 영상이 도는 동안 글이 한 줄씩 떠오른다. 그래서 길다. */
  --h-quote: calc(var(--vh, 1vh) * 340);
  /* 문 구간 — 닫힌 문에 다가가 문틈으로 교차하는 데까지만 쓴다.
     영상은 여기서 시작하지 않고 다음(약속) 구간에서 시작한다. */
  --h-climax: calc(var(--vh, 1vh) * 200);
  /* CONNECT — 형상이 그려지고, 완성된 채 머물고, 빛이 아래로 빠져나갈 거리 */
  --h-rel: calc(var(--vh, 1vh) * 460);
}
@media (max-width: 899px) {
  :root {
    --h-hero: calc(var(--vh, 1vh) * 180);
    /* 모바일은 영상을 재생하지 않으므로(loadVideo 가 건너뛴다) 길게 잡지 않는다 */
    --h-quote: calc(var(--vh, 1vh) * 200);
    --h-climax: calc(var(--vh, 1vh) * 150);
    /* 예수님을 그리는 거리 — 그리는 과정을 충분히 보여야 하므로 줄이지 않는다.
       200vh 는 실제로 그리는 거리가 약 1화면(200vh − 100svh)이라
       손가락 한 번 튕기면 머리카락 → 얼굴 → 수염 → 어깨가 한꺼번에 지나갔다.
       300vh = 약 2화면. 한 번 튕길 때 한두 부위씩 보인다. */
    --h-rel: calc(var(--vh, 1vh) * 300);
  }

  /* 형상이 완성된 뒤의 빈 전환 구간만 줄인다.
     130vh → 66vh. 완성 → 빛이 아래로 → 밝아짐 → SERVICE 가 빠르게 이어진다. */
  .sunrise { height: calc(var(--vh, 1vh) * 66); }
}

/* ============================================================
   SCENE 01 · HERO / DAWN + PROMISE
   배경은 STAGE 가 쥔다. 섹션은 투명하고, 안쪽 화면(__sticky)만 머문다.
   html.motion 이 없으면(모션 최소화 · no-JS) 두 글 묶음이 그냥 차례로 읽힌다.
   ============================================================ */
.hero {
  position: relative;
  color: var(--hero-title);
}
.hero__sticky {
  position: relative;
  min-height: calc(var(--vh, 1vh) * 100); min-height: 100svh;
  /* 카피 묶음은 화면 가운데에 선다 — 제목이 두 줄이든 네 줄이든 스스로 맞춘다 */
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-6);
}
.motion .hero { height: var(--h-hero); }
.motion .hero__sticky {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); height: 100svh;
  overflow: hidden;
}

.hero__content {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
}
/* 브랜드는 첫 화면에 반드시 보인다. 한국어가 MAIN, 영문은 보조. */
.hero__eyebrow {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px;
}
.hero__brand {
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 600; letter-spacing: -0.02em;
  color: rgb(237 231 220 / 0.94);
}
.hero__brand .brand-mod { font-weight: 400; color: var(--orange-500); }
.hero__brand-en {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--hero-eyebrow);
}
.hero__brand-en::before {
  content: ""; width: 28px; height: 1px; background: var(--hero-rule);
}
.hero__sub {
  font-size: clamp(16px, 1.6vw, 23px);
  line-height: 1.6;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.94);
}
/* 약속이 첫 문장이다 — 두 문장짜리라 한 줄로 묶지 않고 흐르게 둔다.
   앞 문장은 한 톤 물러서고, 목사님께 건네는 뒷 문장만 흰색으로 선다. */
.hero__title {
  font-size: clamp(32px, 5.4vw, 78px);
  line-height: 1.2;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.7);
  text-wrap: balance;
  text-shadow: 0 2px 40px rgb(3 10 20 / 0.35);
}
.hero__title span { display: inline-block; color: #fff; }
.hero__lede {
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.85; color: var(--hero-lede);
  max-width: 42ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* 약속 — 같은 화면, 같은 새벽 위에서 선언의 자리를 이어받는다 */
.hero__promise {
  position: relative;
  margin-top: calc(var(--vh, 1vh) * 30);
  max-width: 34em;
}
.motion .hero__promise {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(72px, calc(var(--vh, 1vh) * 14), 160px);
  margin: 0;
  opacity: 0;
}
/* 선언이 물러난 자리를 이 문단 혼자 받는다 — 본문보다 한 급 크게 */
.hero__promise-body {
  font-size: clamp(17px, 1.7vw, 27px);
  line-height: 1.85;
  letter-spacing: -0.015em;
  color: rgb(237 231 220 / 0.82);
  text-shadow: 0 2px 40px rgb(3 10 20 / 0.4);
}

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: var(--sp-6);
  display: none; flex-direction: column; align-items: center; gap: 12px;
}
.hero__scroll-label {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.32em;
  writing-mode: vertical-rl;
  color: var(--panel-muted);
}
.hero__scroll-line {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, var(--hero-scroll) 0%, transparent 100%);
  background-size: 100% 200%;
  animation: scroll-pulse 2.6s var(--ease-out) infinite;
}
@keyframes scroll-pulse {
  0%   { background-position: 0 -100%; opacity: 0; }
  25%  { opacity: 1; }
  100% { background-position: 0 100%; opacity: 0; }
}

@media (min-width: 1024px) {
  .hero__scroll { display: flex; }
  .hero__content { max-width: min(860px, 62%); }
  .hero__cta { gap: var(--sp-3); }
  .hero__sticky {
    min-height: max(100dvh, 680px);
    /* 아래쪽 약속 자리를 비워두면, 가운데 정렬이 시각적으로 한 뼘 위에 앉는다 */
    padding-bottom: clamp(140px, calc(var(--vh, 1vh) * 22), 260px);
  }
  .motion .hero__promise { max-width: min(820px, 60%); }
}

@media (max-width: 767px) {
  .hero__sticky { padding-bottom: var(--sp-7); }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__content { max-width: none; }
  .hero__title { font-size: clamp(29px, 8.4vw, 40px); letter-spacing: -0.04em; }
  .hero__sub { font-size: 16px; }
  /* 모바일에서는 제목과 CTA 가 먼저 보여야 한다 — 긴 설명은 한 단계 접어 둔다 */
  .hero__lede { font-size: 14.5px; max-width: 30ch; color: rgb(237 231 220 / 0.72); }
}

/* ============================================================
   CONNECT / CARE / SERVE (#brand-statement)  —  철학의 두 번째 챕터
   PEOPLE 다음에 온다. 기본(모바일 · 모션 최소화 · no-JS)은 세 단어와
   설명이 세로로 쌓인 정상 높이 섹션이다.
   데스크톱에서 main.js 가 .is-sequenced 를 붙이면 섹션이 약 3화면
   높이가 되고, 안쪽 화면(__sticky)이 CSS sticky 로 머무는 동안
   스크롤이 CONNECT → CARE → SERVE 를 차례로 밝힌다.
   (GSAP pin 이 아니라 sticky — 아래 SERVICE 의 pin 과 서로 간섭하지 않는다)
   ============================================================ */
/* 이제 SCENE 06 · RELATIONSHIP 이다. 배경은 STAGE 가 쥔다(투명). */
.brand-typo {
  position: relative;
  background: transparent;
  color: var(--panel-text);
  /* hidden 은 sticky 를 죽인다. clip 은 넘침만 자르고 스크롤 컨테이너를 만들지 않는다 */
  overflow: clip;
}
.brand-typo__sticky {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(96px, calc(var(--vh, 1vh) * 13), 144px) var(--gutter) clamp(104px, calc(var(--vh, 1vh) * 14), 152px);
}
.brand-typo.is-sequenced { height: var(--h-rel); }
.brand-typo.is-sequenced .brand-typo__sticky {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); min-height: 640px;
  padding-top: calc(var(--header-h-sm) + clamp(16px, calc(var(--vh, 1vh) * 3), 40px));
  padding-bottom: clamp(80px, calc(var(--vh, 1vh) * 11), 120px);
}

/* 1920px 에서 콘텐츠가 왼쪽 가장자리에 붙지 않도록
   사이트 공통 max-width(1280px) 안에 가운데 정렬한다. */
.brand-typo__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
}
.brand-typo__list {
  display: flex; flex-direction: column; gap: clamp(28px, calc(var(--vh, 1vh) * 4), 44px);
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 4.5), 48px);
  will-change: transform;
}
/* 설명 문장 — 기본은 각 단어 아래에 그대로 읽힌다 */
.word__body {
  margin-top: 14px;
  max-width: 36ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
  color: rgba(237, 231, 220, 0.74);
}

/* 순차 모드 — 세 단어는 붙여 쌓고, 설명은 목록 아래 한 자리에서 교차한다.
   설명이 들어갈 자리는 목록의 padding-bottom 으로 미리 비워 둔다(레이아웃 흔들림 없음). */
.brand-typo.is-sequenced .brand-typo__list {
  position: relative;
  gap: clamp(8px, calc(var(--vh, 1vh) * 1.6), 20px);
  padding-bottom: clamp(150px, calc(var(--vh, 1vh) * 21), 200px);
}
.brand-typo.is-sequenced .word__body {
  position: absolute; left: 0; bottom: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
}
.brand-typo.is-sequenced .word.is-active .word__body {
  opacity: 1; transform: none;
}

/* ---- CONNECTION SIGNATURE ----
   오른쪽 65% 를 쓰는 브랜드 모션. preserveAspectRatio 는 meet(균일 배율)이라
   빛이 타원으로 눌리지 않고, getTotalLength() 와 대시 길이도 어긋나지 않는다. */
/* ---- 예수님 라인 드로잉 ----
   제공된 완성 에셋을 그대로 쓴다. 형태를 코드로 다시 그리지 않는다.
   --fig (0 → 1) 가 마스크를 밀어 형상을 드러낸다. 각도 150deg 가
   들어오는 선 → 머리카락 → 얼굴 → 수염 → 목/어깨 순서를 만든다.

   왼쪽 카피와 라인아트가 화면을 양분하는 한 장면이다.
   데스크톱 크기·위치는 아래 미디어쿼리에서 잡는다. */
.brand-figure {
  position: relative;
  display: none;              /* 데스크톱에서만 (아래 미디어쿼리) */
  width: 100%;
  overflow: visible;          /* halo 의 blur 가 잘리지 않게 */
  pointer-events: none;
}
/* 부위마다 자기 마스크를 하나씩 가진다. 여섯 개가 차례로, 조금씩 겹치며 열린다.
   마스크 하나를 크게 쓸면 얼굴이 한 번에 나타나 버린다.

     m1 들어오는 선   m2 머리카락   m3 머리·이마
     m4 눈·코·입      m5 수염       m6 목·어깨

   원의 중심은 그림 안에서 그 부위가 있는 자리다. 반지름(0→목표)은 JS 가 민다.
   빈 곳까지 열려도 상관없다 — 그림이 투명해서 드러날 것이 없다.
   세로 반지름에 1.78 을 곱하는 건 그림이 가로로 길어서, 화면에서 원으로 보이게 하려는 것. */
.brand-figure__img {
  display: block;
  width: 100%; height: auto;
  --m1: 0; --m2: 0; --m3: 0; --m4: 0; --m5: 0; --m6: 0;
  /* 첫 paint = progress 0. main.js 가 늦게 돌아도 완성된 그림이 먼저 비치지 않는다.
     (크기 0 인 마스크만 믿지 않는다 — WebKit 에서도 확실히 감춘다)
     JS 가 없을 때의 완성 상태는 index.html 의 <noscript> 가 쥔다. */
  opacity: 0;

  -webkit-mask-image:
    radial-gradient(ellipse calc(var(--m1) * 1%) calc(var(--m1) * 1.78%) at 14% 60%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m2) * 1%) calc(var(--m2) * 1.78%) at 46% 38%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m3) * 1%) calc(var(--m3) * 1.78%) at 64% 22%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m4) * 1%) calc(var(--m4) * 1.78%) at 71% 38%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m5) * 1%) calc(var(--m5) * 1.78%) at 65% 60%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m6) * 1%) calc(var(--m6) * 1.78%) at 80% 78%, #000 62%, rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse calc(var(--m1) * 1%) calc(var(--m1) * 1.78%) at 14% 60%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m2) * 1%) calc(var(--m2) * 1.78%) at 46% 38%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m3) * 1%) calc(var(--m3) * 1.78%) at 64% 22%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m4) * 1%) calc(var(--m4) * 1.78%) at 71% 38%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m5) * 1%) calc(var(--m5) * 1.78%) at 65% 60%, #000 62%, rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--m6) * 1%) calc(var(--m6) * 1.78%) at 80% 78%, #000 62%, rgba(0,0,0,0) 100%);

  /* 여섯 장을 더한다 — 열린 자리는 모두 보인다 */
  -webkit-mask-composite: source-over;
          mask-composite: add;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* 모션이 없으면 형상은 그냥 다 보인다.
   예전의 html:not(.js) 규칙은 뺐다 — .js 는 main.js(defer, CDN 뒤)가 붙이므로
   그 전까지 완성된 그림이 먼저 보였다가 마스크가 걸리는 flash 가 났다.
   JS 가 아예 없을 때는 index.html 의 <noscript> 스타일이 같은 일을 한다. */
.still .brand-figure__img { -webkit-mask-image: none; mask-image: none; }

/* ONE LIGHT 가 앉을 자리 — 그림 위에 정확히 겹친다 */
.brand-figure__pts {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

.bs-sign__line {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.24em;
  fill: var(--panel-text);
  fill-opacity: 0.62;
}

/* JS 가 없으면 모션 대신 완성된 상태를 보여준다 — index.html 의 <noscript> 스타일.
   (JS 는 presentation attribute 로 opacity 를 쓰므로 CSS 는 no-JS 에만 건다 —
   .js 에도 걸면 CSS 가 attribute 를 이겨 모션이 죽는다.
   html:not(.js) 로 걸면 main.js 가 돌기 전까지 점과 서명이 먼저 보여서 옮겼다) */
.word { display: flex; flex-direction: column; gap: 2px; }
.word__en {
  font-family: var(--font-display);
  font-size: clamp(10px, 1vw, 12px); font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent-on-panel);
}
/* 세 문장이 한 화면(약 68vh) 안에 함께 들어와야 하므로
   가로(vw)뿐 아니라 세로(vh)로도 상한을 둔다. 낮은 창에서 넘치지 않는다.
   상한 88px 은 가장 긴 "함께합니다." 가 콘텐츠 폭의 약 40% 에 들어오는 크기다
   (= 오른쪽 60% 를 connection line 을 위한 여백으로 남긴다). */
/* 왼쪽 컬럼이 35% 로 좁아졌으므로 "함께합니다." 가 그 안에 들어가는 크기로 */
.word__kr {
  font-size: clamp(36px, min(6vw, calc(var(--vh, 1vh) * 6.6)), 72px);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.word__meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--panel-muted);
  margin-top: 6px;
}

/* JS가 붙기 전/실패 시에도 세 단어는 모두 읽힌다 */
.js .brand-typo__list .word { opacity: 0.28; }
.js .brand-typo__list .word.is-active { opacity: 1; }
.word { transition: none; }

/* 데스크톱: 왼쪽 타이포 + 설명 40% / 오른쪽 시그니처 모션 60% */
@media (min-width: 900px) {
  .brand-typo__inner {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    column-gap: clamp(20px, 2.5vw, 48px);
    align-items: center;
  }
  .brand-typo__copy { grid-column: 1; }
  .word__kr { white-space: nowrap; }
}

/* 라인아트는 칼럼 하나에 갇히지 않는다.
   에셋 안에 이미 '왼쪽에서 흘러드는 선 → 머리카락 → 얼굴 → 어깨 → 오른쪽 끝 빛'이
   한 장면으로 담겨 있다. 그 구도가 살아나려면 화면을 가로질러야 하므로
   흐름에서 빼내(absolute) 화면 폭 기준(vw)으로 키운다.

   1440px 화면에서의 결과 —
     들어오는 선 9%  ·  머리카락 왼쪽 33%  ·  얼굴 중심 66%
     머리 오른쪽 끝 71%  ·  어깨 끝 빛 85%
   왼쪽 카피는 5~41% 에 있으므로 머리카락과 겹치지 않는다. */
@media (min-width: 900px) {
  .brand-figure {
    display: block;
    position: absolute;
    top: 50%;
    left: 4vw;
    width: 88vw;
    margin: 0;
    transform: translateY(-42%);
    z-index: 0;                /* 글이 위 — .brand-typo__inner 가 z-index 1 */
  }

  /* 그림은 vw, 카피는 고정폭(--maxw) 가운데 정렬이었다.
     좌표계가 달라서 창이 넓어질수록 카피만 오른쪽으로 밀려 얼굴에 붙었다.
     이 장면에서는 카피도 같은 vw 좌표계로 옮겨, 창 크기와 상관없이
     '카피 왼쪽 16% · 머리카락 38%' 구도가 유지되게 한다. */
  .brand-typo.is-sequenced .brand-typo__inner {
    max-width: none;
    margin: 0;
    /* sticky 가 이미 좌우로 --gutter 를 주고 있으므로 그만큼 빼야
       글자 왼쪽 끝이 화면 16% 에 정확히 선다 */
    padding-left: calc(min(16vw, 320px) - var(--gutter));
    grid-template-columns: minmax(0, clamp(300px, 18vw, 400px)) minmax(0, 1fr);
  }
}

/* 모바일 — 글 아래에 작게 둔다. 여기서는 폭이 좁아 조금 더 크게 써도 된다 */
@media (max-width: 899px) {
  .brand-figure {
    display: block;
    width: 96%;
    margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
    margin-left: auto;
    margin-right: 0;
  }
}

.brand-typo__progress {
  position: absolute; z-index: 1;
  left: var(--gutter); right: var(--gutter); bottom: clamp(32px, calc(var(--vh, 1vh) * 5), 64px);
  height: 2px; background: var(--panel-line);
}
.brand-typo__progress-bar {
  display: block; height: 100%; width: 0%;
  background: var(--orange-500);
  transform-origin: left;
}

/* ============================================================
   PHONES — Editorial Product Feature
   상품 카드가 아니다. 그림자·테두리·라운드 카드 UI 를 쓰지 않고
   지면(배경색) · 여백 · 얇은 선 · 타이포만으로 구분한다.
   ============================================================ */
.phones { background: var(--ivory-warm); }

/* ---- 공통: 제품 메타 (번호 / 브랜드 / 제품명 / 카피 / CTA) ---- */
.phone-meta {
  --pm-num: var(--accent-text);
  --pm-brand: var(--text-muted);
  --pm-title: var(--navy-900);
  --pm-copy: var(--text);
  --pm-sub: var(--text-muted);
  --pm-line: var(--line);
  --pm-mark: var(--accent-solid);
  position: relative;
  display: flex; flex-direction: column;
  /* 섹션 제목 구역과 제품 구역을 확실히 가른다.
     얇은 실선 하나로는 "이어지는 글"로 읽혀서, 짧고 굵은 오렌지 표시로
     '여기서부터 다른 것'을 못 박는다. */
  padding-top: clamp(26px, calc(var(--vh, 1vh) * 3.6), 40px);
}
.phone-meta::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 44px; height: 3px;
  background: var(--pm-mark);
}

/* 번호 + 브랜드는 붙여서 하나의 작은 식별표로 읽히게 한다 */
.phone-meta__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--pm-num);
}
.phone-meta__brand {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--pm-brand);
}

/* 제품명 — 섹션 제목의 절반 이하 크기로 못 박는다.
   섹션 제목: 한글 · 최대 60px · 자간 -0.04em
   제품명   : 영문 display · 최대 26px · 자간 +0.01em
   크기 2.3배 차 + 서체 + 자간 방향까지 반대라 같은 층으로 읽히지 않는다. */
.phone-meta__name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--pm-title);
  text-wrap: normal;   /* balance 가 제품명을 두 줄로 쪼개지 않게 */
}
.phone-meta__name--italic { font-style: italic; }
/* 같은 라인업의 두 번째 이름 (Fold8 / Fold8 Ultra) — 한 단계 낮춘다 */
.phone-meta__name-sub {
  font-size: 0.72em; font-weight: 600;
  opacity: 0.55; white-space: nowrap;
}

/* 카피 — 제목이 아니라 설명이다. 굵기를 낮춰 제품명과 겹치지 않게 한다. */
.phone-meta__copy {
  margin-top: clamp(12px, calc(var(--vh, 1vh) * 1.8), 18px);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  font-weight: 400;
  color: var(--pm-copy);
}
.phone-meta__sub {
  margin-top: 6px;
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: 1.7;
  color: var(--pm-sub);
}

/* CTA — 얇은 사각 아웃라인 + 오른쪽으로 뻗는 짧은 선 */
.phone-cta {
  align-self: flex-start;
  margin-top: clamp(22px, calc(var(--vh, 1vh) * 3), 36px);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 22px;
  min-width: 172px; min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--pm-line);
  font-size: 14px; letter-spacing: -0.01em;
  color: var(--pm-title);
  transition: border-color var(--m-micro) var(--ease-out),
              color var(--m-micro) var(--ease-out);
}
.phone-cta__arrow {
  display: block; width: 26px; height: 1px;
  background: currentColor; opacity: 0.55;
  transition: transform var(--m-ui) var(--ease-out), opacity var(--m-ui) var(--ease-out);
}
.phone-cta:hover { border-color: currentColor; }
.phone-cta:hover .phone-cta__arrow,
.phone-cta:focus-visible .phone-cta__arrow { transform: translateX(7px); opacity: 1; }

/* ---- 01 — 도입부 + 제품 메타(왼쪽) / 제품 사진(오른쪽) ----
   PHONES 는 full-bleed 에디토리얼이라 maxw 박스가 아니라 gutter 기준으로
   정렬한다. 왼쪽 칼럼의 모든 줄이 같은 세로선에서 시작한다. */
.phones-hero { background: var(--ivory-warm); overflow: hidden; }
.phones-hero__inner {
  display: grid; grid-template-columns: 1fr;
}
.phones-hero__body {
  padding: clamp(64px, calc(var(--vh, 1vh) * 9), 112px) var(--gutter) clamp(48px, calc(var(--vh, 1vh) * 7), 80px);
}
.phones__headline {
  margin-top: var(--sp-5);
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.22;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}
.phones__lede {
  display: flex; flex-direction: column; gap: clamp(10px, calc(var(--vh, 1vh) * 1.4), 16px);
  margin-top: clamp(26px, calc(var(--vh, 1vh) * 4), 44px);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 34ch;
}

/* 도입부(섹션 제목)와 제품 메타 사이는 넉넉히 띄운다.
   붙어 있으면 크기 차이가 있어도 한 덩어리로 읽힌다. */
.phones-hero .phone-meta { margin-top: clamp(40px, calc(var(--vh, 1vh) * 6), 72px); }

.phones-hero__media { margin: 0; overflow: hidden; }
.phones-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 자리가 세로로 서므로 가로 사진의 좌우가 잘린다.
     폴드 두 대는 화면 오른쪽 45~95% 에 있으니 그쪽을 남긴다. */
  object-position: 84% 56%;
  transition: transform 900ms var(--ease-out);
}

/* ---- 02 · 03 COLLECTION ---- */
.phones-pair { display: grid; grid-template-columns: 1fr; }

/* ---- 대표 모델을 다 본 뒤 — 기기 사이트로 넘기는 자리 ----
   대표 제품보다 약해야 한다. 카드도 배경도 주지 않고, 가는 선 하나와
   텍스트 링크로만 둔다. */
.phones-more {
  background: var(--ivory-warm);
  padding: clamp(56px, calc(var(--vh, 1vh) * 9), 104px) var(--gutter) clamp(72px, calc(var(--vh, 1vh) * 12), 132px);
}
.phones-more__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px 40px;
  padding-top: clamp(28px, calc(var(--vh, 1vh) * 4.5), 44px);
  border-top: 1px solid var(--line);
}
.phones-more__note {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 34em;
}
.phones-more__link { flex: none; }

/* PHONES 는 홈페이지의 약 10% — 패널 높이를 한 단계 낮췄다 (62vh → 54vh) */
.phone-panel {
  position: relative; overflow: hidden;
  min-height: clamp(400px, calc(var(--vh, 1vh) * 54), 540px);
  display: flex;
}
.phone-panel__media { position: absolute; inset: 0; margin: 0; }
.phone-panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.phone-panel__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%;
  padding: clamp(40px, calc(var(--vh, 1vh) * 6), 72px) var(--gutter);
}
.phone-panel__sign {
  margin-top: clamp(48px, calc(var(--vh, 1vh) * 8), 96px);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em; line-height: 2.1;
}

/* 어두운 지면 — iPhone */
.phone-panel--dark { background: #0E0C0A; }
.phone-panel--dark .phone-meta {
  --pm-num: var(--orange-500);
  --pm-brand: rgba(237, 231, 220, 0.68);
  --pm-title: #F4EFE6;
  --pm-copy: rgba(244, 239, 230, 0.92);
  --pm-sub: rgba(237, 231, 220, 0.62);
  --pm-line: rgba(237, 231, 220, 0.34);
}
.phone-panel--dark .phone-panel__sign { color: rgba(237, 231, 220, 0.66); }
.phone-panel--dark .phone-panel__media img { object-position: 68% 46%; }

/* 밝은 지면 — Galaxy Z */
.phone-panel--ivory { background: var(--ivory-warm); }
.phone-panel--ivory .phone-panel__sign { color: var(--text-muted); }
.phone-panel--ivory .phone-panel__media img { object-position: 74% 56%; }

/* hover — 그림자/테두리 없이 아주 미세한 확대만 */
@media (hover: hover) and (pointer: fine) {
  .phones-hero:hover .phones-hero__media img,
  .phone-panel:hover .phone-panel__media img { transform: scale(1.015); }
}

/* ---- SIGNATURE — 제품 이미지 없음 ---- */
.phones-sign { background: var(--ivory-warm); }
.phones-sign__inner {
  /* PHONES 는 full-bleed 에디토리얼이라 maxw 박스가 아니라
     gutter 기준으로 정렬한다 — 히어로 카피·패널 본문과 같은 선에 선다 */
  padding: clamp(22px, calc(var(--vh, 1vh) * 3), 34px) var(--gutter) clamp(40px, calc(var(--vh, 1vh) * 6), 64px);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
}
.phones-sign__mark { color: var(--navy-900); font-weight: 500; }
.phones-sign__tag { color: var(--text-muted); }

/* ---- 모바일: 텍스트 먼저, 그 아래 제품이 크게 ---- */
@media (max-width: 899px) {
  /* 모바일에서도 사진 비율에 가깝게 — 4:3 은 폴드 사진의 좌우를 잘라낸다 */
  .phones-hero__media { aspect-ratio: 16 / 10; margin: 0; }
  .phones-hero__media img { object-position: 58% 50%; }
  .phone-panel { min-height: 0; flex-direction: column; }
  .phone-panel__media { position: relative; inset: auto; order: 2; aspect-ratio: 4 / 3; }
  .phone-panel__body { order: 1; }
  .phone-panel__sign { margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 48px); }
  /* 이미지가 본문 뒤가 아니라 아래에 오므로 패널 배경이 그대로 보인다 */
  .phone-panel--dark .phone-panel__media img { object-position: 68% 50%; }
  .phone-panel--ivory .phone-panel__media img { object-position: 66% 60%; }
}

/* ---- 데스크톱 ---- */
@media (min-width: 900px) {
  .phones-hero__inner {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    align-items: stretch;
  }
  /* 카피는 gutter 선에 정렬하고, 이미지는 우측 끝까지 흘린다 */
  /* 도입부 바로 아래에 이어지므로 위 여백은 최소로 — 사이가 벌어져 보이지 않게 */
  .phones-hero__body {
    padding: clamp(16px, calc(var(--vh, 1vh) * 2), 28px) clamp(28px, 3.5vw, 72px)
             clamp(32px, calc(var(--vh, 1vh) * 5), 56px) var(--gutter);
  }
  /* 제품 컷은 세로로 늘이지 않는다.
     사진이 가로(약 16:9)라 자리가 세로로 길면 좌우가 잘려 기기가 사라지고,
     화면을 꽉 채우면 또 하나의 히어로처럼 읽힌다.
     사진 비율 그대로, 위아래 여백을 두고 가운데 놓는다. */
  /* 사진은 왼쪽 글 덩어리의 높이를 따라간다(stretch).
     다만 위아래에 여백을 남겨 섹션 경계에 닿지 않게 한다 —
     끝까지 꽉 채우는 순간 제품 컷이 아니라 배너(히어로)로 읽힌다. */
  .phones-hero__media {
    align-self: stretch;
    min-height: 0;
    max-height: calc(var(--vh, 1vh) * 64);
    margin: clamp(40px, calc(var(--vh, 1vh) * 6), 80px) 0;
  }

  .phones-pair { grid-template-columns: 1fr 1fr; }
  /* 제품은 각 패널의 오른쪽 약 55% 를 차지한다.
     본문 폭을 그 앞까지로 제한해 글자가 기기 위로 올라가지 않게 한다. */
  .phone-panel__body {
    max-width: 48%;
    padding: clamp(56px, calc(var(--vh, 1vh) * 8), 88px) clamp(16px, 2vw, 32px)
             clamp(56px, calc(var(--vh, 1vh) * 8), 88px) var(--gutter);
  }
}

/* ============================================================
   BGM TOGGLE
   밝은 지면(ABOUT·SERVICE)과 어두운 지면(HERO·BRAND) 위를 모두 지나므로
   반투명 네이비 pill + ivory 글자로 어느 쪽에서도 읽히게 한다.
   모바일 풀스크린 메뉴(--z-nav 200)보다 아래에 둔다.
   ============================================================ */
/* --bgm-lift : 주소창처럼 화면 아래를 덮는 것이 있으면 그만큼 올린다 (js/main.js).
   덮는 것이 없으면 0 이라 아무 일도 일어나지 않는다.
   env(safe-area-inset-bottom) : 홈 인디케이터가 있는 기기의 아래 여백. */
.bgm {
  position: fixed; z-index: 150;
  right: var(--gutter);
  bottom: calc(clamp(18px, calc(var(--vh, 1vh) * 3), 28px)
               + env(safe-area-inset-bottom, 0px) + var(--bgm-lift, 0px));
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(237, 231, 220, 0.20);
  background: rgba(11, 27, 46, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--panel-text);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  cursor: pointer;
  transition: border-color var(--m-micro) var(--ease-out),
              background-color var(--m-micro) var(--ease-out);
}
.bgm:hover { border-color: rgba(237, 231, 220, 0.42); }
.bgm__label { line-height: 1; padding-top: 1px; }

/* 음표 — 기본(데스크톱)에서는 숨긴다. 데스크톱은 움직이는 막대가 재생 상태까지 보여준다.
   모바일에서만 막대와 자리를 바꾼다 (아래 max-width:767px). */
.bgm__note { display: none; width: 20px; height: 20px; color: var(--orange-500); }

/* 3개의 얇은 막대 — 재생 중에만 아주 느리게 움직인다 */
.bgm__bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.bgm__bars i {
  display: block; width: 2px; height: 3px;
  background: var(--orange-500);
  opacity: 0.55;
  transition: height var(--m-ui) var(--ease-out), opacity var(--m-ui) var(--ease-out);
}
.bgm[data-playing="true"] .bgm__bars i {
  opacity: 1;
  animation: bgm-bar 1.9s var(--ease-out) infinite;
}
.bgm[data-playing="true"] .bgm__bars i:nth-child(2) { animation-delay: 0.32s; }
.bgm[data-playing="true"] .bgm__bars i:nth-child(3) { animation-delay: 0.64s; }

@keyframes bgm-bar {
  0%, 100% { height: 3px; }
  50%      { height: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .bgm[data-playing="true"] .bgm__bars i { animation: none; height: 7px; }
}

/* ============================================================
   FOOTER — 바로 위 FINAL MESSAGE 가 강한 CTA 를 맡으므로
   Footer 는 조용하게: 작은 워드마크 · 국문 로크업 · 한 줄 · 메타.
   FINAL 과 같은 가장 깊은 네이비 위에 얇은 선 하나로만 나눈다.
   ============================================================ */
/* 아침으로 끝난 이야기 위에 — 같은 Warm Ivory 지면에서 조용하게 */
.site-footer {
  position: relative; z-index: 1;
  background: var(--ivory-warm); color: var(--navy-900);
  padding: clamp(44px, calc(var(--vh, 1vh) * 7), 72px) 0 clamp(72px, calc(var(--vh, 1vh) * 10), 96px);
}
.site-footer__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-direction: column; gap: 14px;
  padding-top: clamp(28px, calc(var(--vh, 1vh) * 4), 40px);
  /* 선은 글과 같은 폭으로 — border 를 쓰면 gutter 까지 뻗는다 */
  background: linear-gradient(var(--line), var(--line))
              center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.site-footer__id {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 22px;
}
.site-footer__mark {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.26em;
}
.site-footer__brand { font-size: 20px; }
.site-footer__copy {
  font-size: 14px; font-weight: 400; letter-spacing: -0.01em;
  color: var(--text-muted);
}
.site-footer__meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--warm-grey);
}

/* ============================================================
   REVEAL (JS 있을 때만 숨김 → 크롤러/no-JS 안전)
   ============================================================ */
/* ============================================================
   ABOUT — Brand Manifesto (Editorial)
   Deep Navy 히어로 직후 밝은 Warm Ivory 공간이 열린다.
   ============================================================ */
.about {
  --about-bg: #F7F4EE;
  background: var(--about-bg);
  padding: clamp(96px, calc(var(--vh, 1vh) * 13), 176px) 0 clamp(120px, calc(var(--vh, 1vh) * 17), 224px);
}
.about__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 섹션 인디케이터 — 01 / ABOUT JOSEPH */
.section-index {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.section-index__num { color: var(--accent-solid); }
.section-index__label { color: var(--text-muted); }

.about__headline {
  margin-top: var(--sp-5);
  max-width: 22ch;
  font-size: clamp(30px, 5.4vw, 82px);
  line-height: 1.22;
  letter-spacing: -0.038em;
  font-weight: 600;
  color: var(--ink);
  /* 줄바꿈은 <br> 로 직접 제어한다 */
  text-wrap: normal;
}

/* 비대칭 편집 레이아웃 — 좌측 넓은 visual / 우측 좁은 body, 50:50 아님 */
.about__editorial {
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: clamp(56px, calc(var(--vh, 1vh) * 9), 120px);
}
.about__visual { margin: 0; }
.about__visual .asset-box,
.about__visual .asset-img { aspect-ratio: 4 / 5; min-height: 0; }

/* 실제 이미지가 로드되기 전/실패 시에는 플레이스홀더만 보인다 */
.asset-img { display: none; width: 100%; height: auto; object-fit: cover; }
[data-asset-slot].has-image .asset-img { display: block; }
[data-asset-slot].has-image .asset-box { display: none; }

.about__body {
  display: flex; flex-direction: column;
  gap: clamp(20px, calc(var(--vh, 1vh) * 3), 34px);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.85;
  color: var(--text);
}

/* 브랜드 스테이트먼트 */
.about__statement {
  margin-top: clamp(88px, calc(var(--vh, 1vh) * 15), 200px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6.6vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--navy-900);
}

/* 핵심 가치 3개 — 카드 없이 번호·타이포·여백·얇은 선만 */
.values {
  display: grid; grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: clamp(88px, calc(var(--vh, 1vh) * 14), 176px);
}
.value {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.value__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; color: var(--accent-text);
}
.value__title {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.value__desc { font-size: 16px; color: var(--text-muted); }

@media (min-width: 900px) {
  .about__editorial {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(56px, 7vw, 128px);
    align-items: start;
  }
  /* body 컬럼을 아래로 밀어 비대칭을 만든다 */
  .about__body { padding-top: clamp(48px, 9vw, 128px); }

  .values {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(40px, 6vw, 96px);
  }
}

/* 번호가 없는 챕터용 라벨 — 번호 대신 짧은 오렌지 선 */
.section-index__rule {
  align-self: center;
  width: 24px; height: 1px;
  background: var(--accent-solid);
}
.section-index--dark .section-index__label { color: var(--panel-muted); }

/* ============================================================
   STORY — HERO ~ VISION 공통
   섹션은 배경을 갖지 않는다. STAGE 위를 지나가는 글 레이어일 뿐이다.
   ============================================================ */
.story-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.origin, .reason, .philosophy, .scene, .relationship, .share, .vision {
  position: relative;
  color: var(--panel-text);
}

/* 01 / SERVE 같은 장면 번호 */
.scene__index {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--panel-muted);
}
.scene__index b { font-weight: 500; color: var(--orange-500); }
.scene__title {
  margin-top: clamp(18px, calc(var(--vh, 1vh) * 3), 30px);
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  font-weight: 700;
  color: #fff;
  text-wrap: normal;
  text-shadow: 0 2px 40px rgb(3 10 20 / 0.35);
}
.scene__body {
  display: flex; flex-direction: column;
  gap: 18px;
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 52px);
  max-width: 32ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.85;
  color: rgb(237 231 220 / 0.82);
}

/* ============================================================
   SCENE 02 · ORIGIN
   ============================================================ */
/* 위쪽 여백은 그냥 빈 공간이 아니라 '걸어 들어가는 거리'다.
   십자가에서 아래로 내려와 입구를 통과하는 카메라가 이 구간에서 일어난다.
   글이 없는 이 한 화면 반이 있어야 움직임이 훅 지나가지 않는다. */
.origin__intro {
  padding-block: clamp(140px, calc(var(--vh, 1vh) * 26), 280px) clamp(72px, calc(var(--vh, 1vh) * 12), 140px);
}
.origin__headline {
  margin-top: var(--sp-5);
  font-size: clamp(30px, 4.8vw, 72px);
  line-height: 1.24;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
  text-wrap: normal;
  text-shadow: 0 2px 40px rgb(3 10 20 / 0.4);
}
.origin__copy {
  display: flex; flex-direction: column;
  gap: 22px;
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 80px);
  max-width: 30ch;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.8;
  color: rgb(237 231 220 / 0.84);
}

/* 말씀 — 공간이 조용해진 뒤 한 줄씩 떠오른다.
   라벨과 인용문이 위아래로 쌓여야 하므로 세로 방향이다.
   (가로면 라벨이 인용문 옆에 붙어 실수처럼 보인다) */
.origin__quote-sticky {
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 120px var(--gutter);
}
.motion .origin__quote-scene { height: var(--h-quote); }
.motion .origin__quote-sticky {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); min-height: 0;
}
.origin__quote {
  margin: 0;
  display: flex; flex-direction: column;
  gap: 0.9em;
  max-width: 24em;
  font-size: clamp(22px, 2.8vw, 44px);
  line-height: 1.55;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #F7F1E6;
  text-align: center;
}
.q-line { display: block; }
.motion .q-line { opacity: 0.08; filter: blur(6px); transform: translateY(10px); }

/* ============================================================
   SCENE 03 · REASON — 첫 번째 emotional climax
   ============================================================ */
.reason__copy {
  display: flex; flex-direction: column;
  gap: clamp(28px, calc(var(--vh, 1vh) * 5), 52px);
  padding-block: clamp(120px, calc(var(--vh, 1vh) * 20), 220px) clamp(48px, calc(var(--vh, 1vh) * 8), 96px);
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.75;
  color: rgb(237 231 220 / 0.84);
}
.reason__copy p { max-width: 26em; }
.reason__turn {
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 8), 96px);
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: #fff;
}
@media (min-width: 900px) {
  /* 문단이 조금씩 오른쪽으로 물러나며 문으로 다가간다 */
  .reason__copy p:nth-child(3) { margin-left: 12%; }
  .reason__copy p:nth-child(4) { margin-left: 24%; }
  .reason__turn { margin-left: 36%; }
}

.reason__sticky {
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px var(--gutter);
  text-align: center;
}
.motion .reason__climax { height: var(--h-climax); }
.motion .reason__sticky {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); min-height: 0;
}
.reason__quote {
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(32px, 6vw, 100px);
  line-height: 1.22;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: #FFF8EE;
  text-shadow: 0 2px 60px rgb(40 16 4 / 0.35);
}
.reason__line { display: block; }
@media (min-width: 900px) { .reason__line { white-space: nowrap; } }
.motion .reason__line { clip-path: inset(0 100% 0 0); }
.reason__small {
  margin-top: clamp(36px, calc(var(--vh, 1vh) * 6), 64px);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.26em;
  color: rgb(255 240 222 / 0.86);
}
.motion .reason__small { opacity: 0; }

/* ============================================================
   SCENE 04 · PHILOSOPHY — PEOPLE, BEFORE PRODUCTS.
   ============================================================ */
.people {
  position: relative;
  padding: clamp(140px, calc(var(--vh, 1vh) * 22), 260px) 0 clamp(120px, calc(var(--vh, 1vh) * 18), 220px);
  overflow: clip;
}
.people__inner {
  max-width: 1720px; margin: 0 auto;
  padding: 0 var(--gutter);
}
.people__statement {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 12.5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--panel-text);
  text-wrap: normal;
}
.people__line { display: block; will-change: transform; }
.people__line--end { align-self: flex-end; text-align: right; }
.people__comma { color: var(--orange-500); }

.philosophy__list {
  max-width: var(--maxw);
  margin: clamp(72px, calc(var(--vh, 1vh) * 12), 150px) auto 0;
  border-top: 1px solid rgb(143 163 184 / 0.22);
}
.philosophy__list li {
  display: grid; grid-template-columns: 1fr;
  gap: 8px;
  padding: clamp(20px, calc(var(--vh, 1vh) * 3.4), 34px) 0;
  border-bottom: 1px solid rgb(143 163 184 / 0.22);
}
.philosophy__idx {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--panel-muted);
}
.philosophy__idx b { font-weight: 500; color: var(--orange-500); }
.philosophy__kr {
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
}
@media (min-width: 900px) {
  .people__statement { font-size: clamp(64px, 8vw, 150px); }
  .philosophy__list li {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: baseline;
  }
}

/* ============================================================
   SCENE 05 · 01 / SERVE — 두 손 사이의 빛 위로 글이 지나간다
   위쪽 60vh 는 사진만 숨 쉬게 비워 둔다.
   ============================================================ */
.serve { min-height: calc(var(--vh, 1vh) * 170); display: flex; align-items: flex-end; }
.serve .scene__inner { width: 100%; padding-block: calc(var(--vh, 1vh) * 62) calc(var(--vh, 1vh) * 24); }

/* ============================================================
   SCENE 06 · 02 / RELATIONSHIP — 예전 brand-typo 시퀀스 재사용
   ============================================================ */
.relationship .scene__title { font-size: clamp(40px, 5.4vw, 88px); }
.bs-label {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.3em;
  fill: var(--panel-muted);
}

/* ============================================================
   SCENE 07 · 03 / SHARE — 한 사람 → 가정 → 교회/공동체
   예전 GOOD CONNECTIONS 레이아웃을 어두운 공간 위로 옮겼다.
   ============================================================ */
.community {
  position: relative;
  padding: clamp(120px, calc(var(--vh, 1vh) * 18), 220px) 0 clamp(120px, calc(var(--vh, 1vh) * 16), 200px);
}
.community__inner {
  --cgap: clamp(56px, 7vw, 128px);
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr;
  gap: clamp(56px, calc(var(--vh, 1vh) * 9), 96px);
}
.community__body {
  display: flex; flex-direction: column;
  gap: 18px;
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 52px);
  max-width: 34ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.85;
  color: rgb(237 231 220 / 0.82);
}

.community__visuals {
  --tpad: 24px;                         /* 모바일: 선이 들어갈 왼쪽 여백 */
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(72px, calc(var(--vh, 1vh) * 12), 150px);
  padding-left: var(--tpad);
}
/* 두 장. 행동(작게) → 의미(넓게) 로 시야가 열린다.
   아침 배경 위에 얹히는 editorial frame 이므로 화면을 덮지 않는다. */
.community__frame { position: relative; margin: 0; }
.community__frame--act     { width: 72%; }
.community__frame--meaning { width: 92%; }

.community__media { position: relative; overflow: hidden; background: rgb(11 27 46 / 0.05); }
.community__media .asset-img,
.community__media .asset-box { width: 100%; min-height: 0; }
.community__media .asset-img { will-change: transform; }
/* 01 선물 포장 — 손과 상자가 가운데 아래쪽에 있다 */
.community__frame--act     .asset-img,
.community__frame--act     .asset-box { aspect-ratio: 4 / 3; object-position: 46% 60%; }
/* 02 성경 · 십자가 · 서울 — 가로로 넓게, 십자가와 교회가 함께 들어오도록 */
.community__frame--meaning .asset-img,
.community__frame--meaning .asset-box { aspect-ratio: 16 / 9; object-position: 50% 50%; }

.community__cap {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--panel-text);
}
.community__cap b { font-weight: 500; color: var(--orange-500); }
.community__cap em {
  font-family: var(--font-kr); font-style: normal;
  font-size: 13px; letter-spacing: -0.01em;
  color: var(--panel-muted);
}

/* 빛의 선 — ONE LIGHT 가 선의 끝(화면 55% 높이)에서 선을 이끌고 내려간다 */
.community__thread {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--tpad) / 2);
  width: 1px;
  background: rgb(143 163 184 / 0.22);
}
.community__thread-fill,
.vision__line-fill {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgb(233 90 12 / 0) 0%, var(--orange-500) 12%, #F2B27A 100%);
  transform-origin: top;
}
.js .community__thread-fill,
.js .vision__line-fill { transform: scaleY(0); }

.community__node {
  position: absolute; top: 50%;
  left: calc(var(--tpad) / -2 - 3.5px);
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid rgb(143 163 184 / 0.45);
  transition: background-color 700ms var(--ease-out),
              border-color 700ms var(--ease-out),
              box-shadow 700ms var(--ease-out);
}
.community__frame.is-lit .community__node,
html:not(.js) .community__node {
  background: var(--orange-500);
  border-color: var(--orange-500);
  box-shadow: 0 0 0 6px rgb(233 90 12 / 0.16);
}
.community__frame { opacity: 0.55; transition: opacity 900ms var(--ease-out); }
.community__frame.is-lit,
html:not(.js) .community__frame { opacity: 1; }

.community__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #FFF6EA;
  text-wrap: normal;
}
.community__coda { margin-top: clamp(24px, calc(var(--vh, 1vh) * 6), 64px); }

@media (min-width: 1024px) {
  .community__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--cgap);
  }
  .community__sticky { position: sticky; top: calc(var(--header-h-sm) + calc(var(--vh, 1vh) * 10)); }
  .community__visuals { --tpad: 0px; }
  .community__thread { left: calc(var(--cgap) / -2); }
  .community__node { left: calc(var(--cgap) / -2 - 3.5px); }
  .community__frame--act     { width: 58%; }
  .community__frame--meaning { width: 84%; }
}

/* ============================================================
   SCENE 08 · VISION — 하늘이 밝아지기 시작한다
   ============================================================ */
.vision {
  padding-block: clamp(140px, calc(var(--vh, 1vh) * 22), 240px) clamp(120px, calc(var(--vh, 1vh) * 18), 200px);
}
.vision__inner { --vx: 30px; }
.vision__headline {
  margin-top: var(--sp-5);
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.66);
  text-wrap: normal;
}
.vision__headline span { color: #fff; }
.vision__copy {
  display: flex; flex-direction: column;
  gap: 18px;
  margin-top: clamp(32px, calc(var(--vh, 1vh) * 5), 56px);
  max-width: 40ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.85;
  color: rgb(237 231 220 / 0.8);
}

.vision__path {
  position: relative;
  margin-top: clamp(96px, calc(var(--vh, 1vh) * 16), 200px);
  padding-left: var(--vx);
}
.vision__line {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--vx) / 2);
  width: 1px;
  background: rgb(143 163 184 / 0.22);
}
.vision__list {
  display: flex; flex-direction: column;
  gap: clamp(88px, calc(var(--vh, 1vh) * 17), 190px);
}
.vision__item {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  opacity: 0.26;
  transition: opacity 900ms var(--ease-out);
}
.vision__item.is-lit,
.vision__item.is-now,
html:not(.js) .vision__item { opacity: 1; }
.vision__node {
  position: absolute; top: 0.9em;
  left: calc(var(--vx) / -2 - 4px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy-900);
  border: 1px solid rgb(143 163 184 / 0.45);
  transition: background-color 700ms var(--ease-out),
              border-color 700ms var(--ease-out),
              box-shadow 700ms var(--ease-out);
}
.vision__item.is-lit .vision__node,
.vision__item.is-now .vision__node {
  background: var(--orange-500);
  border-color: var(--orange-500);
  box-shadow: 0 0 0 6px rgb(233 90 12 / 0.16);
}
.vision__en {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #FFF6EA;
}
.vision__kr {
  font-size: clamp(15px, 1.3vw, 20px);
  color: rgb(237 231 220 / 0.82);
}
.vision__close {
  display: grid; gap: 24px;
  margin-top: clamp(120px, calc(var(--vh, 1vh) * 20), 240px);
  padding-left: var(--vx);
  max-width: 34em;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.85;
  color: rgb(237 231 220 / 0.84);
}
.vision__close-lead {
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.34;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
}

@media (min-width: 900px) {
  .vision__inner { --vx: clamp(56px, 8vw, 140px); }
}

/* ============================================================
   PHASE 2 — 재배치로 새로 생기거나 성격이 바뀐 구간
   ============================================================ */

/* ---- SCENE 02 · COMPANY & MISSION (어두운 무대 위) ---- */
.company {
  position: relative;
  color: var(--panel-text);
  padding-block: clamp(120px, calc(var(--vh, 1vh) * 20), 220px) clamp(120px, calc(var(--vh, 1vh) * 40), 440px);
}

/* 머무는 글 —
   블록은 길게(190vh / 150vh) 잡아 카메라가 내려올 거리를 만들고,
   그 안의 글은 sticky 로 화면에 붙어 움직이지 않는다.
   글이 올라가지 않으니 배경 움직임과 겹쳐 어지러워지지 않는다. */
.company__scene { position: relative; }
.company__hold { display: flex; flex-direction: column; justify-content: center; }

.motion .company__scene { height: calc(var(--vh, 1vh) * 190); }
.motion .company__scene--mission { height: calc(var(--vh, 1vh) * 150); }
.motion .company__hold {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); height: 100svh;
}
@media (max-width: 899px) {
  .motion .company__scene { height: calc(var(--vh, 1vh) * 150); }
  .motion .company__scene--mission { height: calc(var(--vh, 1vh) * 120); }
}
.company__headline {
  margin-top: var(--sp-5);
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.66);
  text-wrap: balance;
}
.company__headline span { color: #fff; }
.company__sub {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.9);
}
.company__copy {
  display: flex; flex-direction: column;
  gap: 20px;
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
  max-width: 38ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.9;
  color: rgb(237 231 220 / 0.8);
}
/* MISSION 은 자기 차례에 화면 가운데에서 머문다(.company__scene--mission) */
.company__mission {
  margin-top: 0;
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 1px solid rgb(237 231 220 / 0.24);
  max-width: 40ch;
}
.company__mission-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--orange-500);
}
.company__mission-body {
  margin-top: 18px;
  font-size: clamp(17px, 1.7vw, 26px);
  line-height: 1.75;
  letter-spacing: -0.025em;
  color: #fff;
}

/* ---- SCENE 03 · ORIGIN 추가분 ---- */
.origin__sub {
  margin-top: clamp(22px, calc(var(--vh, 1vh) * 4), 38px);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.9);
}
.origin__turn { color: #fff; }

/* 닫힌 문 → 문이 열리는 구간. 글은 두지 않는다 — STAGE 가 쥔다 */
.origin__door { position: relative; }
.motion .origin__door-scene { height: var(--h-climax); }
.motion .origin__door-sticky {
  position: sticky; top: 0;
  height: calc(var(--vh, 1vh) * 100); height: 100svh;
  display: flex; align-items: center; justify-content: center;
}
.origin__door-sticky {
  min-height: calc(var(--vh, 1vh) * 42);
  display: flex; align-items: center; justify-content: center;
}
.origin__door-cue {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.42em;
  color: rgb(237 231 220 / 0.34);
  opacity: 0;
}
html:not(.js) .origin__door-cue { opacity: 1; }

/* 인용문을 소개하는 라벨.
   인용문이 화면 가운데 정렬이므로 라벨도 가운데에 두고,
   양옆에 짧은 오렌지 선을 둬서 '일부러 놓은 표지'로 읽히게 한다.
   선은 사이트의 다른 섹션 라벨(.section-index__rule)과 같은 언어다. */
.origin__quote-label {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(34px, calc(var(--vh, 1vh) * 6), 72px);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.26em;
  white-space: nowrap;
  color: rgb(237 231 220 / 0.66);
}
.origin__quote-label::before,
.origin__quote-label::after {
  content: "";
  width: clamp(22px, 4vw, 56px); height: 1px;
  background: var(--orange-500);
}
.origin__after {
  padding-block: clamp(120px, calc(var(--vh, 1vh) * 20), 220px) clamp(140px, calc(var(--vh, 1vh) * 24), 260px);
}
.origin__after-body {
  max-width: 26em;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.5;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.62);
}
.origin__after-body span { color: #fff; }

/* ---- SCENE 04 · PRINCIPLES (어두운 무대 위) ---- */
.principles {
  position: relative;
  color: var(--panel-text);
}
.principles__head { padding-block: clamp(96px, calc(var(--vh, 1vh) * 16), 180px) 0; }
.principles__headline {
  margin-top: var(--sp-5);
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.66);
  text-wrap: balance;
}
.principles__headline span { color: #fff; }
.principles__sub {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.9);
}
.principles__intro { margin-top: 0; }
.serve .scene__inner { padding-block: clamp(120px, calc(var(--vh, 1vh) * 20), 220px); }

.principle__list {
  display: flex; flex-direction: column;
  gap: clamp(80px, calc(var(--vh, 1vh) * 14), 170px);
  padding-block: clamp(40px, calc(var(--vh, 1vh) * 8), 90px) clamp(120px, calc(var(--vh, 1vh) * 20), 220px);
}
.principle__item {
  position: relative;
  padding-top: clamp(22px, calc(var(--vh, 1vh) * 4), 38px);
  max-width: 34em;
}

/* 세 원칙이 한 줄로만 내려가면 단조롭다.
   빛이 좌우로 흐르는 것에 맞춰 블록을 번갈아 놓고,
   들어올 때도 각자 자기 쪽에서 올라온다.
   좁은 화면에서는 가로 이동을 주지 않는다 — 여백이 없어 넘친다. */
@media (min-width: 1024px) {
  .principle__item { width: min(34em, 52%); }
  .principle__item:nth-child(even) { margin-left: auto; }

  .js .principle__item {
    transform: translateX(var(--enter, 0));
    transition: transform 1100ms var(--ease-out);
  }
  .js .principle__item:nth-child(odd)  { --enter: -34px; }
  .js .principle__item:nth-child(even) { --enter:  34px; }
  .js .principle__item.is-in { transform: none; }
}
.principle__rule {
  position: absolute; top: 0; left: 0;
  width: clamp(48px, 10vw, 120px); height: 1px;
  background: var(--orange-500);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}
.principle__item.is-in .principle__rule,
html:not(.js) .principle__rule { transform: scaleX(1); }
.principle__num {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.28em;
  color: rgb(237 231 220 / 0.5);
}
.principle__num b { font-weight: 500; color: var(--orange-500); }
.principle__title {
  margin-top: clamp(16px, calc(var(--vh, 1vh) * 2.6), 26px);
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #fff;
}
.principle__body {
  display: flex; flex-direction: column;
  gap: 18px;
  margin-top: clamp(22px, calc(var(--vh, 1vh) * 4), 38px);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.9;
  color: rgb(237 231 220 / 0.8);
}
.principles__aside {
  font-size: clamp(24px, 3.4vw, 54px);
  line-height: 1.34;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: rgb(237 231 220 / 0.6);
}
.principles__aside span { color: #fff; }

/* ---- SCENE 05 · SERVICE 이용 과정 (Ivory 지면) ---- */
.howto {
  padding-block: clamp(96px, calc(var(--vh, 1vh) * 16), 180px) 0;
  border-top: 1px solid var(--line);
  margin-top: clamp(80px, calc(var(--vh, 1vh) * 14), 160px);
}
.howto__list {
  display: grid; gap: clamp(40px, calc(var(--vh, 1vh) * 6), 64px);
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
}
.howto__step { position: relative; padding-left: clamp(44px, 6vw, 76px); }
.howto__num {
  position: absolute; left: 0; top: 2px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--orange-500);
}
.howto__title {
  font-size: clamp(19px, 1.8vw, 26px);
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy-900);
}
.howto__desc {
  margin-top: 10px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.85;
  color: rgb(20 24 29 / 0.76);
  max-width: 38em;
}
@media (min-width: 900px) {
  .howto__list { grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 64px); }
}

/* ============================================================
   아침 지면 위의 섹션들 — .on-morning
   PARTNERSHIP · SHARE & VISION · FAQ 는 밝은 아침 스크림 위에 앉는다.
   어두운 무대용으로 만들어진 색을 여기서 전부 뒤집는다.
   ============================================================ */
.on-morning { color: var(--navy-900); }
.on-morning .section-index__label { color: rgb(11 27 46 / 0.66); }
.on-morning .section-index__rule { background: rgb(11 27 46 / 0.3); }

/* ---- SCENE 09 · PARTNERSHIP ---- */
.partnership {
  position: relative;
  padding-block: clamp(140px, calc(var(--vh, 1vh) * 24), 260px) clamp(120px, calc(var(--vh, 1vh) * 18), 200px);
}
.partnership__headline {
  margin-top: var(--sp-5);
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(11 27 46 / 0.6);
  text-wrap: balance;
}
.partnership__headline span { color: var(--navy-900); }
.partnership__sub {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.partnership__copy {
  display: flex; flex-direction: column;
  gap: 20px;
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
  max-width: 38ch;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.9;
  color: rgb(20 24 29 / 0.82);
}

/* ---- SCENE 10 · SHARE & VISION — 밝은 지면용으로 반전 ---- */
.share__headline {
  margin-top: var(--sp-5);
  font-size: clamp(28px, 4.2vw, 60px);
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(11 27 46 / 0.6);
  text-wrap: balance;
}
.share__headline span { color: var(--navy-900); }
.share__sub {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.on-morning .community__body { color: rgb(20 24 29 / 0.82); }
.on-morning .community__media { background: rgb(11 27 46 / 0.05); }
.on-morning .community__thread { background: rgb(11 27 46 / 0.16); }
.on-morning .community__cap { color: rgb(11 27 46 / 0.66); }
.on-morning .community__cap em { color: rgb(11 27 46 / 0.5); }
.on-morning .community__node {
  background: var(--ivory-100);
  border-color: rgb(11 27 46 / 0.3);
}

.on-morning .vision__inner { padding-block: clamp(96px, calc(var(--vh, 1vh) * 16), 190px) 0; }
.vision__statement { max-width: 40ch; }
.vision__body {
  margin-top: var(--sp-5);
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.5;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: rgb(11 27 46 / 0.6);
}
.vision__body span { display: block; margin-top: 0.5em; color: var(--navy-900); }
/* 대제목과 분야 목록 사이의 본문 한 문단. 아래 .vision__close 와 같은 본문 톤이다.
   (.vision__close 는 목록 뒤에 오느라 큰 margin-top 과 padding-left 를 갖고 있어 그대로 쓸 수 없다) */
.vision__lede {
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 52px);
  max-width: 34em;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.85;
  color: rgb(20 24 29 / 0.8);
}
.on-morning .vision__line { background: rgb(11 27 46 / 0.18); }
.on-morning .vision__node { background: var(--ivory-100); border-color: rgb(11 27 46 / 0.32); }
.on-morning .vision__kr { color: var(--navy-900); font-size: clamp(17px, 1.7vw, 24px); font-weight: 600; }
.on-morning .vision__list { gap: clamp(52px, calc(var(--vh, 1vh) * 9), 96px); }
.on-morning .vision__close { color: rgb(20 24 29 / 0.8); }

/* 준비 중 / 운영 중 · 실천 중 — 지금 하는 일과 앞으로의 계획을 눈으로 구분한다 */
.vision__state {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  padding: 4px 9px;
  border: 1px solid rgb(11 27 46 / 0.26);
  color: rgb(11 27 46 / 0.6);
}
.vision__state--now {
  border-color: var(--orange-500);
  color: var(--orange-500);
}

/* ---- SCENE 12 · FAQ ---- */
.faq {
  position: relative;
  padding-block: clamp(120px, calc(var(--vh, 1vh) * 20), 220px) clamp(140px, calc(var(--vh, 1vh) * 24), 260px);
}
.faq__headline {
  margin-top: var(--sp-5);
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--navy-900);
}
.faq__list {
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
  border-top: 1px solid rgb(11 27 46 / 0.16);
}
.faq__item {
  padding-block: clamp(26px, calc(var(--vh, 1vh) * 4), 40px);
  border-bottom: 1px solid rgb(11 27 46 / 0.16);
}
.faq__q {
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--navy-900);
}
.faq__a {
  margin-top: 14px;
  max-width: 46em;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.9;
  color: rgb(20 24 29 / 0.78);
}
@media (min-width: 900px) {
  .faq__item { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); }
  .faq__a { margin-top: 0; }
}

/* ---- CONTACT 의 두 CTA ---- */
.contact-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 600px) {
  .contact-cta { flex-direction: column; }
  .contact-cta .btn { width: 100%; }
}

/* ============================================================
   TRANSITION 01 — 해가 떠오른다. 아래에서 Ivory 가 빛처럼 차오른다.
   TRANSITION 02 — Ivory 가 걷히고 같은 공간이 아침으로 돌아온다.
   ============================================================ */
/* 글이 하나도 없는 전환 구간이다. 데스크톱에서는 이 길이가 여유로 읽히지만
   세로 화면에서는 '빈 화면을 한참 내리는' 구간이 된다 — 모바일에서만 줄인다.
   (예수님을 그리는 속도는 --h-rel 이 쥐고 있고, 그 값은 건드리지 않는다) */
.sunrise {
  position: relative;
  height: calc(var(--vh, 1vh) * 130);
  background: linear-gradient(to bottom,
    rgb(247 244 238 / 0) 0%,
    rgb(247 244 238 / 0) 28%,
    rgb(247 244 238 / 0.32) 58%,
    rgb(247 244 238 / 0.82) 84%,
    var(--ivory-warm) 100%);
  pointer-events: none;
}
.daybreak {
  position: relative;
  height: calc(var(--vh, 1vh) * 110);
  background: linear-gradient(to bottom,
    var(--ivory-warm) 0%,
    rgb(247 244 238 / 0.78) 30%,
    rgb(247 244 238 / 0.2) 70%,
    rgb(247 244 238 / 0) 100%);
  pointer-events: none;
}

/* ============================================================
   SCENE 09 · IN PRACTICE + OUR PROMISE — clean editorial 시작
   "우리는 이런 철학이 있습니다" → "그래서 실제로 이렇게 일합니다"
   ============================================================ */
.practice {
  position: relative;
  background: var(--ivory-warm);
  color: var(--ink);
  padding-top: clamp(40px, calc(var(--vh, 1vh) * 8), 96px);
}
.practice__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, calc(var(--vh, 1vh) * 5), 48px);
}
.practice__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; line-height: 2; letter-spacing: 0.24em;
  color: var(--accent-text);
}
.practice__headline {
  font-size: clamp(32px, 5vw, 76px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}
.practice__sub {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.9;
  color: var(--text-muted);
}
@media (min-width: 900px) {
  .practice__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 4vw, 72px);
  }
  .practice__eyebrow { padding-top: 1.4em; }
}

.promise {
  --pgap: clamp(32px, 4vw, 72px);
  padding: clamp(96px, calc(var(--vh, 1vh) * 15), 180px) 0 clamp(112px, calc(var(--vh, 1vh) * 15), 192px);
}
.promise__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.promise__lead {
  margin-top: var(--sp-4);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.36;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--navy-900);
}
.promise__list { margin-top: clamp(48px, calc(var(--vh, 1vh) * 8), 96px); }
.promise__item {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: 14px;
  padding: clamp(32px, calc(var(--vh, 1vh) * 5), 56px) 0;
  border-top: 1px solid var(--line);
}
.promise__item:last-child { border-bottom: 1px solid var(--line); }
.promise__rule {
  position: absolute; left: 0; top: -1px;
  width: 100%; height: 1px;
  background: var(--orange-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1600ms var(--ease-out);
}
.promise__item.is-in .promise__rule,
html:not(.js) .promise__rule { transform: scaleX(1); }
.promise__meta { display: flex; align-items: baseline; gap: 14px; }
.promise__meta .value__title { margin: 0; font-size: 12px; }
.promise__title {
  font-size: clamp(21px, 2.2vw, 34px);
  line-height: 1.4;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}
.promise__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--text-muted);
}
@media (min-width: 900px) {
  .promise__intro {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--pgap);
    align-items: baseline;
  }
  .promise__lead { margin-top: 0; }
  .promise__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 4.8fr) minmax(0, 3.2fr);
    column-gap: var(--pgap);
    align-items: baseline;
  }
}

/* SERVICE · PHONES 는 Ivory 지면을 스스로 깐다 (STAGE 를 덮는다) */
.svc, .phones { position: relative; }

/* ============================================================
   SCENE 12 · FINAL / MORNING
   처음의 새벽과 같은 공간, 아침. 사진은 STAGE 가 쥐고 글만 지나간다.
   왼쪽 약 45% 가 text safe area — STAGE 의 Ivory 스크림이 그쪽을 받쳐 준다.
   ============================================================ */
.closing {
  position: relative;
  color: var(--navy-900);
}
.closing__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.closing__block { max-width: min(36em, 100%); }
.closing__block--promise {
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--vh, 1vh) * 14);
}
.closing__mark {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.24em; line-height: 2;
  color: rgb(11 27 46 / 0.62);
}
.closing__mark span {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--navy-900);
}
.closing__mark span::before { content: ""; width: 40px; height: 1px; background: var(--orange-500); }
.closing__headline {
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 48px);
  font-size: clamp(28px, 3.8vw, 60px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: rgb(11 27 46 / 0.6);
  text-wrap: normal;
}
.closing__headline span { color: var(--navy-900); }
.closing__partner {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--navy-900);
}
.closing__block--body {
  display: flex; flex-direction: column;
  gap: 28px;
  padding-block: calc(var(--vh, 1vh) * 16);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.95;
  color: rgb(20 24 29 / 0.84);
}
.closing__reason {
  margin-top: 12px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.5;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--navy-900);
}
/* 충분히 숨을 쉰 뒤 */
.closing__block--invite {
  display: flex; flex-direction: column;
  gap: 24px;
  padding-block: calc(var(--vh, 1vh) * 34) calc(var(--vh, 1vh) * 20);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.95;
  color: rgb(20 24 29 / 0.84);
}
.closing__invite-lead {
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.34;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--navy-900);
}
.closing__final {
  margin-top: clamp(24px, calc(var(--vh, 1vh) * 5), 48px);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--accent-text);
}
.closing .cta-line { color: var(--navy-900); margin-top: 8px; }
.closing .cta-line:hover { color: var(--accent-text); }
@media (min-width: 900px) {
  .closing__block { max-width: min(560px, 46vw); }
}

/* JS 가 없으면 STAGE 는 새벽에 머물므로 FINAL 은 스스로 아침 지면을 깐다 */
html:not(.js) .closing { background: var(--ivory-warm); }

/* ============================================================
   SERVICE — Editorial Service Index
   ABOUT 과 같은 Warm Ivory 지면 위에 5개 서비스를 하나의 목록으로
   압축한다. 스테이지마다 배경을 바꾸지 않고, 구분은 얇은 divider 로만.
   카드 없음 · 그림자 없음 · 이미지는 가로형 editorial crop.
   ============================================================ */
.svc {
  background: var(--ivory-warm);
  padding: clamp(88px, calc(var(--vh, 1vh) * 12), 160px) 0 clamp(96px, calc(var(--vh, 1vh) * 13), 176px);
}
.svc__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- intro ---- */
.svc__intro {
  padding-bottom: clamp(40px, calc(var(--vh, 1vh) * 6), 72px);
  border-bottom: 1px solid var(--line);
}
.svc__intro-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, calc(var(--vh, 1vh) * 4), 40px);
  margin-top: var(--sp-5);
}
.svc__headline {
  max-width: 16ch;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 1.2;
  letter-spacing: -0.038em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;   /* 줄바꿈은 <br> 로 직접 제어 */
}
.svc__lede {
  display: flex; flex-direction: column;
  gap: clamp(12px, calc(var(--vh, 1vh) * 1.8), 20px);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 42ch;
}

/* ---- list ---- */
.svc-list { margin: 0; padding: 0; list-style: none; }

/* divider 는 행과 행 사이에만. intro 하단선·CTA 블록과 중복되지 않는다 */
.svc-row + .svc-row { border-top: 1px solid var(--line); }

/* 상하 여백은 기존 대비 약 13% 축소 (52→45 / 4.5→3.9vh / 28→24).
   이미지 비율·컬럼 폭은 건드리지 않으므로 이미지 크기는 그대로다.
   5개 서비스가 하나의 여정처럼 조금 더 빠르게 이어진다. */
.svc-row__link {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(18px, calc(var(--vh, 1vh) * 3), 28px);
  padding: clamp(24px, calc(var(--vh, 1vh) * 3.9), 45px) 0;
  align-items: center;
}

/* 이미지 — 가로형 editorial crop. 프레임 고정, 내부만 미세 확대 */
.svc-row__media {
  margin: 0; position: relative;
  overflow: hidden;
  background: var(--paper);
}
.svc-row__media .asset-img,
.svc-row__media .asset-box { aspect-ratio: 16 / 9; min-height: 0; }
.svc-row__media .asset-img {
  transition: transform var(--m-ui) var(--ease-out);
}
.svc-row__link:hover .asset-img,
.svc-row__link:focus-visible .asset-img { transform: scale(1.02); }
.svc-row__media .asset-slug { line-height: 1.9; }

/* 원본은 가로(5:4) 사진이고 슬롯은 더 넓은 가로다 → 세로만 잘린다.
   피사체(손·공유기·통화·상자·얼굴)가 남도록 y 초점을 서비스별로 잡는다. */
#service-mobile    .asset-img { object-position: 50% 34%; }  /* 손과 휴대폰 */
#service-plan-home .asset-img { object-position: 50% 62%; }  /* 공유기 + 휴대폰 */
#service-remote    .asset-img { object-position: 50% 40%; }  /* 통화 + 노트북 화면 */
#service-delivery  .asset-img { object-position: 50% 51%; }  /* 기사 얼굴 + 상자 */
#service-aftercare .asset-img { object-position: 50% 30%; }  /* 마주 앉은 두 사람 */

/* 텍스트 */
.svc-row__body { display: flex; flex-direction: column; }
.svc-row__idx { display: flex; align-items: baseline; gap: 14px; }
.svc-row__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--accent-text);
}
.svc-row__name {
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 14px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy-900);
}
.svc-row__label {
  margin-top: 10px;
  font-size: 14px; letter-spacing: -0.01em;
  color: var(--text-muted);
}
.svc-row__copy {
  margin-top: clamp(12px, calc(var(--vh, 1vh) * 1.8), 20px);
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}

/* arrow — 버튼이 아니라 에디토리얼 내비게이션 */
.svc-row__arrow {
  justify-self: end;
  font-size: 19px; line-height: 1;
  color: var(--text-muted);
  transition: transform var(--m-micro) var(--ease-out),
              color var(--m-micro) var(--ease-out);
}
.svc-row__arrow::before { content: "\2192"; }
.svc-row__link:hover .svc-row__arrow,
.svc-row__link:focus-visible .svc-row__arrow {
  transform: translateX(5px);
  color: var(--accent-text);
}

/* ---- closing CTA — 리스트보다 한 톤 따뜻한 베이지 ---- */
.svc-cta {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, calc(var(--vh, 1vh) * 4), 36px);
  margin-top: clamp(56px, calc(var(--vh, 1vh) * 8), 96px);
  padding: clamp(36px, calc(var(--vh, 1vh) * 6), 64px) clamp(28px, 5vw, 72px);
  background: var(--ivory);
}
.svc-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-text);
}
.svc-cta__headline {
  margin-top: var(--sp-3);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.032em;
  font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}
.svc-cta__desc {
  margin-top: var(--sp-3);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--text-muted);
}
.svc-cta__link { justify-self: start; }

/* ---- desktop: 좌우 교차 + 3열(이미지 / 텍스트 / arrow) ---- */
@media (min-width: 900px) {
  .svc__intro-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(56px, 7vw, 128px);
    align-items: end;
  }
  .svc__lede { padding-bottom: 0.5em; }

  .svc-row__link {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6fr) 40px;
    column-gap: clamp(40px, 5vw, 88px);
  }
  .svc-row__media .asset-img,
  .svc-row__media .asset-box { aspect-ratio: 16 / 8; }

  /* IMAGE LEFT / TEXT RIGHT */
  .svc-row--media-left .svc-row__media { grid-column: 1; grid-row: 1; }
  .svc-row--media-left .svc-row__body  { grid-column: 2; grid-row: 1; }

  /* TEXT LEFT / IMAGE RIGHT */
  .svc-row--media-right .svc-row__link  { grid-template-columns: minmax(0, 6fr) minmax(0, 5.5fr) 40px; }
  .svc-row--media-right .svc-row__body  { grid-column: 1; grid-row: 1; padding-right: clamp(0px, 2vw, 32px); }
  .svc-row--media-right .svc-row__media { grid-column: 2; grid-row: 1; }

  .svc-row__arrow { grid-column: 3; grid-row: 1; }

  .svc-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .svc-cta__link { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-row__link:hover .asset-img,
  .svc-row__link:focus-visible .asset-img,
  .svc-row__link:hover .svc-row__arrow,
  .svc-row__link:focus-visible .svc-row__arrow { transform: none; }
}

/* ============================================================
   FRONTIER — SERVICE 쇼케이스 (한 화면에서 다섯이 넘어간다)
   ------------------------------------------------------------
   좌: 서비스 이름 목록 (활성 항목만 또렷하게)
   중: 이미지 — 같은 자리에 겹쳐 두고 교차 페이드
   진행 레일: 현재 위치를 막대 하나로
   우: 라벨 · 카피 · 설명 · 상담 링크

   · 전환은 전부 CSS(.is-active)가 한다. GSAP 은 스크롤을 인덱스로
     바꾸는 데에만 쓰고, 없으면 클릭 탭으로 동작한다.
   · JS 가 아예 없으면 다섯이 세로로 쌓여 그냥 목록으로 읽힌다.
   ============================================================ */
/* 핀이 걸리는 요소에는 margin 을 주지 않는다 — ScrollTrigger 의 핀 계산이
   margin 을 만나면 고정되는 순간 한 번 튄다(덜컹거림의 원인). */
.frontier { position: relative; }

/* 핀이 활성인 동안에는 부드러운 스크롤을 끈다.
   scroll-behavior: smooth 와 ScrollTrigger 의 핀이 같은 스크롤을 서로
   당기면서 걸리듯 내려오는 현상이 생긴다. */
html.is-pin-active { scroll-behavior: auto; }

.frontier__stage {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  gap: clamp(26px, calc(var(--vh, 1vh) * 4), 44px);
  align-items: center;
}

/* ---- 좌측 배경의 디스크 — 사진이 바뀔 때마다 한 칸씩 돌아간다 ---- */
.frontier__disc {
  display: none;
  position: absolute; z-index: 0;
  left: clamp(-420px, -20vw, -180px);
  top: 50%;
  width: clamp(560px, 48vw, 940px); height: auto;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  color: var(--navy-900);
  opacity: 0.07;
}
.frontier__disc path,
.frontier__disc circle { fill: none; stroke: currentColor; }

/* ---- 좌: 이름 목록 ---- */
.frontier__nav { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.frontier__nav-item {
  position: relative;
  padding: 6px 0;
  font-size: clamp(15px, 1.5vw, 24px);
  font-weight: 500; letter-spacing: -0.02em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--m-ui) var(--ease-out), opacity var(--m-ui) var(--ease-out);
}
.frontier__nav-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent-solid);
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.frontier__nav-item:hover { color: var(--ink); }
.frontier__nav-item.is-active { color: var(--navy-900); font-weight: 600; }
.frontier__nav-item.is-active::after { transform: scaleX(1); }

/* ---- 중: 이미지 ---- */
.frontier__media {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--ivory);
}
.frontier__frame {
  grid-area: 1 / 1;
  margin: 0; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.frontier__frame .asset-img,
.frontier__frame .asset-box { width: 100%; height: 100%; }
.frontier__frame .asset-img {
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1200ms var(--ease-out);
}
.frontier__frame.is-active { opacity: 1; }
.frontier__frame.is-active .asset-img { transform: scale(1); }

/* 모자이크가 끝나고 진짜 프레임으로 바꿔 끼우는 그 한 순간에는
   페이드도 확대도 걸지 않는다. 트랜지션이 새로 시작되면
   이미 완성된 그림이 한 번 튀었다가 다시 그려진다. */
.frontier__media.is-swapping .frontier__frame,
.frontier__media.is-swapping .frontier__frame .asset-img {
  transition: none !important;
}

/* ---- 모자이크 전환 — 다음 사진의 조각들이 위에서 아래로 내려앉는다 ----
     칸은 main.js 가 미디어 크기에 맞춰 만든다(약 46px 격자).
     각 칸은 다음 사진의 자기 자리 조각을 그대로 물고 있어서,
     다 내려앉는 순간이 곧 새 사진이다. */
.frontier__mosaic {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  visibility: hidden;
}
.frontier__mosaic.is-running { visibility: visible; }
.frontier__cell {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  /* 칸 사이 실선이 보이지 않도록 아주 조금 겹친다 */
  outline: 0.5px solid transparent;
}
.frontier__cell img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* ---- 진행 레일 ---- */
.frontier__rail { display: none; }
.frontier__dot {
  display: block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line);
  transition: height var(--m-ui) var(--ease-out),
              width var(--m-ui) var(--ease-out),
              background-color var(--m-ui) var(--ease-out),
              border-radius var(--m-ui) var(--ease-out);
}
.frontier__dot.is-active {
  width: 2px; height: 34px; border-radius: 1px;
  background: var(--navy-900);
}

/* ---- 우: 카피 — 사진이 바뀌면 라벨 → 제목 → 설명 → 링크 순으로 올라온다 ---- */
.frontier__copy { position: relative; z-index: 1; display: grid; }
.frontier__panel {
  grid-area: 1 / 1;
  pointer-events: none;
}
.frontier__panel.is-active { pointer-events: auto; }

/* 문단 하나하나가 따로 등장한다 — 흐릿하게 번지며 올라온다 */
.frontier__panel > * {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
  transition: opacity 560ms var(--ease-out),
              transform 560ms var(--ease-out),
              filter 560ms var(--ease-out);
}
.frontier__panel.is-active > * {
  opacity: 1; transform: none; filter: blur(0);
}
/* 모자이크가 내려앉기 시작한 뒤 글이 따라 붙는다 */
.frontier__panel.is-active > *:nth-child(1) { transition-delay: 120ms; }
.frontier__panel.is-active > *:nth-child(2) { transition-delay: 210ms; }
.frontier__panel.is-active > *:nth-child(3) { transition-delay: 300ms; }
.frontier__panel.is-active > *:nth-child(4) { transition-delay: 390ms; }

.frontier__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.frontier__label b { color: var(--accent-text); font-weight: 500; }

/* ============================================================
   평가 반영 — 묶음 A (2026-09-15)
   아래 규칙들은 원래 규칙보다 뒤에 있어야 이긴다. 그래서 흩어 넣지 않고
   한곳에 모았다 — 되돌릴 때는 이 블록만 지우면 된다.
   ============================================================ */

/* A1. 한글이 들어간 라벨은 모노 서체·넓은 자간을 쓰지 않는다.
   영문 대문자용 자간(0.2em)을 한글에 주면 "비 대 면 상 담"처럼 단어가 흩어진다.
   번호(01)만 모노로 남긴다. */
.frontier__label {
  font-family: var(--font-kr);
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em; text-transform: none;
}
.frontier__label b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
.community__cap {
  font-family: var(--font-kr);
  font-size: 13px; letter-spacing: -0.005em;
}
.community__cap b { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; }
.vision__state {
  font-family: var(--font-kr);
  font-size: 12px; font-weight: 500; letter-spacing: 0;
}
.howto .section-index {           /* "이용 과정" — 섹션 라벨 중 유일한 한글 */
  font-family: var(--font-kr);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
}

/* A3. FAQ 답변이 밝은 교회 사진 위에 그대로 올라가 나무·건물과 겹쳤다.
   목록 뒤에 옅은 아이보리 막을 깐다. 막이 경계가 되므로 윗선은 뺀다. */
.faq__list {
  padding-inline: clamp(20px, 3vw, 44px);
  background: rgb(247 244 238 / 0.82);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  border-top: 0;
  border-radius: 4px;
}
.faq__item:last-child { border-bottom: 0; }
.faq__a { color: rgb(20 24 29 / 0.84); }

/* A4. 밝은 구간(서비스부터 아래)의 헤더 — 남색 반투명 대신 밝은 반투명.
   구간 판정은 main.js initHeader 의 data-tone. */
.site-header[data-tone="light"] { color: var(--navy-900); }
.site-header[data-tone="light"][data-state="condensed"] {
  background: rgb(247 244 238 / 0.80);
  border-bottom-color: rgb(11 27 46 / 0.10);
}
.site-header[data-tone="light"] .site-nav__list a { color: var(--navy-900); }
.site-header[data-tone="light"] .site-nav__list a:hover { color: var(--orange-700); }
.site-header[data-tone="light"] .site-nav__list em { color: var(--warm-grey); }
/* 모바일 메뉴는 남색 풀스크린이다 — 열려 있는 동안은 밝은 톤을 쓰지 않는다.
   글자색만 되돌리면 밝은 반투명 막이 남아 남색 위에 회색 띠가 생긴다. 막도 되돌린다. */
body.is-locked .site-header[data-tone="light"] { color: var(--panel-text); }
body.is-locked .site-header[data-tone="light"][data-state="condensed"] {
  background: rgba(11, 27, 46, 0.64);
  border-bottom-color: rgba(42, 74, 107, 0.36);
}

/* A5. 히어로 첫 줄 대비 — 두 톤 강조는 유지하되 남색 위에서 읽히게 */
.hero__title { color: rgb(237 231 220 / 0.86); }

/* ============ 평가 반영 — 묶음 A 끝 ============ */

/* ============================================================
   평가 반영 — 묶음 B (2026-09-15) · 연락처 · 사업자정보
   값은 아직 예시다(index.html 의 TODO(info) 참고). 되돌릴 때는 이 블록만 지운다.
   ============================================================ */

/* 모바일 메뉴의 "전화 상담 | 카카오톡" — 한글이라 모노 서체·자간을 쓰지 않는다 (A1 과 같은 규칙) */
.mobile-nav__secondary { font-family: var(--font-kr); font-size: 13.5px; letter-spacing: 0; }

/* 상담 버튼 아래 번호 · 시간 안내. 덩어리 단위로만 줄바꿈해 가운뎃점이 줄 앞에 오지 않게 한다. */
.contact-cta__note {
  display: flex; flex-wrap: wrap; gap: 2px 20px;
  font-size: 15px; line-height: 1.7;
  color: rgb(20 24 29 / 0.72);
}
.contact-cta__note span { white-space: nowrap; }
.contact-cta__note a {
  color: var(--navy-900); font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: underline; text-decoration-color: rgb(11 27 46 / 0.28);
  text-underline-offset: 3px;
}
.contact-cta__note a:hover { text-decoration-color: var(--orange-500); }
@media (max-width: 400px) { .contact-cta__note { font-size: 14px; } }

/* 푸터 사업자정보 — 항목:값 쌍을 한 줄에 흘리고, 좁으면 쌍 단위로 내린다 */
.site-footer__biz {
  margin: 6px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px 22px;
  font-size: 12.5px; line-height: 1.7;
}
.site-footer__biz div { display: flex; gap: 6px; min-width: 0; }
.site-footer__biz dt { color: rgb(11 27 46 / 0.62); font-weight: 500; white-space: nowrap; }
.site-footer__biz dd { margin: 0; min-width: 0; color: rgb(11 27 46 / 0.84); font-variant-numeric: tabular-nums; }
.site-footer__biz a {
  color: inherit;
  text-decoration: underline; text-decoration-color: rgb(11 27 46 / 0.22);
  text-underline-offset: 3px;
}
.site-footer__biz a:hover { text-decoration-color: var(--orange-500); }
.site-footer__legal { margin-top: 4px; font-size: 12px; color: var(--warm-grey); }

/* ============ 평가 반영 — 묶음 B 끝 ============ */

/* ============================================================
   묶음 C (2026-09-15) · 클릭 영역 개편
   FAQ 아코디언 · 서비스 패널의 '자세히 보기' · 공통 펼침 아이콘
   모달 자체는 css/modal.css, 상세 페이지는 css/page.css
   ============================================================ */

/* 펼침 아이콘 — 닫힘 +, 열림 − (메인 FAQ · 상세 페이지 FAQ 공통) */
.acc-icon { position: relative; flex: none; width: 18px; height: 18px; color: var(--orange-500); }
.acc-icon::before,
.acc-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 240ms var(--ease-out);
}
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

/* 메인 FAQ — <dl> 을 <details> 로 바꿨다. 질문(summary)이 곧 버튼이다.
   예전의 '질문 왼쪽 · 답변 오른쪽' 2열 격자는 해제한다. */
details.faq__item { display: block; padding-block: 0; }
details.faq__item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: clamp(22px, calc(var(--vh, 1vh) * 3.4), 30px);
  transition: color 160ms var(--ease-out);
}
details.faq__item > summary::-webkit-details-marker { display: none; }
details.faq__item > summary:hover { color: var(--orange-700); }
details.faq__item > summary:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 4px; border-radius: 2px; }
details.faq__item > .faq__a { margin-top: 0; padding-bottom: clamp(22px, calc(var(--vh, 1vh) * 3.4), 30px); }

/* 서비스 패널 — '자세히 보기'(상세 페이지 · 안내 모달) + '상담하기'(상담 모달) */
.frontier__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  margin-top: clamp(22px, calc(var(--vh, 1vh) * 3.2), 34px);
}
.frontier__actions .frontier__cta { margin-top: 0; }
.frontier__more {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--navy-900);
  transition: color 160ms var(--ease-out);
}
.frontier__more::after { content: "→"; color: var(--orange-500); transition: transform 180ms var(--ease-out); }
.frontier__more:hover { color: var(--orange-700); }
.frontier__more:hover::after { transform: translateX(4px); }

/* 메인에서 상세로 가는 링크 — 함께하는 섬김 · 온라인 상담 신청 */
.vision__more { justify-self: start; margin-top: 4px; }
.contact-cta__form { margin-top: 10px; }

/* ============ 묶음 C 끝 ============ */

/* ============================================================
   묶음 D (2026-09-15) · 모바일 최적화
   터치 영역 44px · 작은 글자 · SOUND 버튼 · 밝은 사진 위 글 대비 · 작은 기기
   빛 · 장면 전환 거리(--h-* · 섹션 높이)는 건드리지 않는다.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, label { -webkit-tap-highlight-color: rgb(224 94 20 / 0.12); }

/* 터치 영역 — 손가락으로 누르는 요소는 높이 44px 이상 */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.frontier__nav-item { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-block: 0; }
.frontier__cta { display: inline-flex; align-items: flex-end; min-height: 44px; }

/* 작은 글자 — 한글은 13px 아래로 내려가지 않게 */
.origin__quote-label { font-size: clamp(13px, 1vw, 14px); }
.vision__state { font-size: 13px; }
.site-footer__biz { font-size: 13.5px; }
.site-footer__legal { font-size: 13px; }
.site-footer .brand-kr__modifier { font-size: 12.5px; }

@media (max-width: 767px) {
  /* SOUND — 글자를 빼고 44px 원형 아이콘으로. 본문을 덜 가린다 (이름은 aria-label 이 읽는다) */
  .bgm {
    width: 44px; height: 44px; padding: 0;
    justify-content: center;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--bgm-lift, 0px));
  }
  /* 막대(equalizer)는 44px 안에서 너무 작아 무엇인지 읽히지 않는다 — 음표로 바꾼다 */
  .bgm__bars { display: none; }
  .bgm__note { display: block; }
  /* 재생 중일 때만 또렷하게. 꺼져 있으면 한 톤 물러선다 */
  .bgm__note { opacity: 0.55; transition: opacity var(--m-ui) var(--ease-out); }
  .bgm[data-playing="true"] .bgm__note { opacity: 1; }

  /* 상담 CTA 가 화면에 들어오면 비킨다 (js/main.js 의 duckBgmButton).
     보이기만 끄는 것이라 음악은 그대로 흐른다. */
  .bgm {
    transition: border-color var(--m-micro) var(--ease-out),
                opacity var(--m-ui) var(--ease-out),
                transform var(--m-ui) var(--ease-out),
                visibility 0s linear var(--m-ui);
  }
  .bgm[data-ducked="true"] {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    visibility: hidden;
    pointer-events: none;
  }
  .bgm[data-ducked="false"] { transition-delay: 0s; }
  .bgm__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* 푸터 마지막 줄이 SOUND 버튼에 가리지 않게 */
  .site-footer__legal { margin-bottom: 56px; }
}

@media (max-width: 899px) {
  /* 어두운 사진 위 설명 글 — 밝은 창문과 겹쳐도 읽히게 글 둘레만 어둡게 */
  .hero__sub, .hero__lede,
  .company__sub, .company__copy, .company__mission-body {
    text-shadow: 0 1px 14px rgb(7 17 30 / 0.78), 0 0 2px rgb(7 17 30 / 0.45);
  }
  .hero__lede { color: rgb(237 231 220 / 0.86); }

  /* 아침 사진 위 짙은 글 — 협약 · 나눔 · 비전 · 상담 · FAQ.
     (2026-09-17) 예전에는 섹션 뒤에 아이보리 막을 깔았는데, 그 막이 글과 함께 올라가면서
     고정된 사진 위로 뿌연 띠가 흘러가 보여 어지러움을 키웠다. 막은 빼고 글자 둘레에만 밝은 번짐을 둔다. */
  .on-morning :is(h2, h3, p, li, dt, dd, summary),
  .closing :is(h2, p) {
    text-shadow: 0 0 12px rgb(247 244 238 / 0.85), 0 0 2px rgb(247 244 238 / 0.6);
  }
}

/* 터치 기기 (2026-09-17 · 아이폰 최적화)
   흐림(backdrop-filter)은 뒤에서 움직이는 STAGE 를 매 프레임 다시 흐리게 계산한다.
   아이폰 Safari 에서 스크롤 중 프레임이 떨어지는 주원인이라 터치에서는 끄고,
   대신 바탕을 조금 더 불투명하게 해 글자가 똑같이 읽히게 한다. */
@media (hover: none), (pointer: coarse) {
  .site-header[data-state="condensed"] {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgb(11 27 46 / 0.92);
  }
  .site-header[data-tone="light"][data-state="condensed"] { background: rgb(247 244 238 / 0.95); }
  body.is-locked .site-header[data-tone="light"][data-state="condensed"] { background: rgb(11 27 46 / 0.92); }
  .bgm { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 27 46 / 0.86); }
  .faq__list {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgb(247 244 238 / 0.93);
  }
}

/* 작은 기기 (iPhone SE · 갤럭시 폴드 접힘 등 375px 미만) */
@media (max-width: 374px) {
  :root { --gutter: 16px; }
  .hero__title { font-size: 27px; }
  .btn--lg { padding-inline: 16px; }
}

/* ============ 묶음 D 끝 ============ */
.frontier__title {
  margin-top: clamp(20px, calc(var(--vh, 1vh) * 2.6), 32px);
  font-size: clamp(25px, 3vw, 46px);
  line-height: 1.3; letter-spacing: -0.038em; font-weight: 600;
  color: var(--navy-900);
  text-wrap: normal;
}
.frontier__desc {
  margin-top: clamp(20px, calc(var(--vh, 1vh) * 2.8), 34px);
  max-width: 42ch;
  font-size: clamp(15px, 1.25vw, 20px); line-height: 1.9;
  color: var(--text-muted);
}
.frontier__cta {
  display: inline-block; margin-top: clamp(24px, calc(var(--vh, 1vh) * 4), 44px);
  padding-bottom: 8px;
  font-size: clamp(15px, 1.05vw, 17px); font-weight: 600; color: var(--navy-900);
  border-bottom: 1px solid var(--accent-solid);
  transition: color var(--m-micro) var(--ease-out);
}
.frontier__cta:hover { color: var(--accent-text); }

/* 스크롤 힌트 — 핀이 걸려 있을 때만 의미가 있다 */
.frontier__hint {
  margin-top: clamp(20px, calc(var(--vh, 1vh) * 3), 32px);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--warm-grey);
  opacity: 0;
  transition: opacity var(--m-ui) var(--ease-out);
}
.frontier.is-pinned .frontier__hint { opacity: 1; }

@media (min-width: 1024px) {
  /* .svc__inner(최대 1280) 를 벗어나 화면 폭을 다 쓴다.
     핀이 걸리는 .frontier 자체에는 transform 을 주지 않는다 — 핀 계산이 어긋난다. */
  .frontier__stage {
    width: min(1720px, calc(100vw - 2 * var(--gutter)));
    margin-left: 50%;
    transform: translateX(-50%);

    /* 왼쪽 목록 / 이미지 / 레일 / 오른쪽 설명 — 사이는 넉넉하게 */
    grid-template-columns: minmax(150px, 2fr) minmax(0, 5fr) 24px minmax(0, 5fr);
    gap: 0 clamp(40px, 5.5vw, 150px);

    /* 섹션이 화면 한 장을 통째로 차지한다 (헤더 96px 만 비운다) */
    min-height: calc(calc(var(--vh, 1vh) * 100) - 96px);
  }

  .frontier__disc { display: block; }

  .frontier__nav {
    flex-direction: column; align-items: flex-end;
    gap: clamp(14px, calc(var(--vh, 1vh) * 2.4), 30px);
    text-align: right;
  }
  .frontier__nav-item { opacity: 0.4; }
  .frontier__nav-item:hover { opacity: 0.8; }
  .frontier__nav-item.is-active { opacity: 1; }
  /* 활성 항목 왼쪽의 점 — 목록이 우측 정렬이라 바깥으로 뺀다 */
  .frontier__nav-item::before {
    content: ""; position: absolute; left: -16px; top: 50%;
    width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
    background: var(--navy-900);
    opacity: 0; transform: scale(0.4);
    transition: opacity var(--m-ui) var(--ease-out), transform var(--m-ui) var(--ease-out);
  }
  .frontier__nav-item.is-active::before { opacity: 1; transform: none; }
  .frontier__nav-item::after { display: none; }

  /* 이미지는 높이가 기준 — 화면 높이의 약 3/4 를 채우고 폭은 4:5 로 따라온다 */
  .frontier__media {
    aspect-ratio: 4 / 5;
    height: min(calc(var(--vh, 1vh) * 74), 860px);
    width: auto;
    justify-self: center;
  }

  .frontier__rail {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px;
    height: 100%;
  }
}

/* JS 가 없으면 쇼케이스가 아니라 그냥 세로 목록으로 읽힌다 */
html:not(.js) .frontier__stage { display: block; }
html:not(.js) .frontier__nav { display: none; }
html:not(.js) .frontier__rail { display: none; }
html:not(.js) .frontier__media { display: block; aspect-ratio: auto; margin-top: var(--sp-4); }
html:not(.js) .frontier__frame { opacity: 1; }
html:not(.js) .frontier__frame + .frontier__frame { margin-top: var(--sp-3); }
html:not(.js) .frontier__panel {
  pointer-events: auto;
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 56px);
  padding-top: clamp(28px, calc(var(--vh, 1vh) * 5), 56px);
  border-top: 1px solid var(--line);
}
html:not(.js) .frontier__panel > * { opacity: 1; transform: none; filter: none; }
html:not(.js) .frontier__disc,
html:not(.js) .frontier__mosaic { display: none; }

@media (prefers-reduced-motion: reduce) {
  .frontier__frame,
  .frontier__frame .asset-img,
  .frontier__panel > * { transition-duration: 1ms; transition-delay: 0ms; }
  .frontier__frame .asset-img { transform: none; }
  .frontier__panel > * { filter: none; }
  .frontier__disc { transition: none; }
  .frontier__mosaic { display: none; }
}

/* ============================================================
   REVEAL
   ============================================================ */
.js [data-reveal],
.js [data-reveal-seq],
.js [data-phone-media] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal-seq],
  .js [data-phone-media] { opacity: 1 !important; transform: none !important; }
  .js .brand-typo__list .word { opacity: 1; }
  .js .principle__item { transform: none; transition: none; }
  .js .community__thread-fill,
  .js .vision__line-fill { transform: none; }
  .motion .q-line { opacity: 1; filter: none; transform: none; }
  .motion .reason__line { clip-path: none; }
  .motion .reason__small { opacity: 1; }
  .hero__scroll-line { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}