/* =========================================================================
   고요재 — 경주 프라이빗 풀빌라
   디자인 토큰은 analysis.json (designSystem) 의 실측값을 그대로 옮겨 왔다.
   ========================================================================= */

/* --------------------------------------------------------------- fonts --
   Latin  : Lato          (제목 · 버튼 · 영문 라벨)
   Hangul : Gowun Dodum   (고운돋움 — 본문 설명 전역)
   두 폰트 모두 assets/fonts 에 셀프호스팅한다 (lato.css / gowun-dodum.css). */

/* ------------------------------------------------------------- tokens -- */
:root {
  /* --- palette (analysis.designSystem.colors) --- */
  --c-neutral-0:   #ffffff;
  --c-neutral-05:  #f5f6f7;
  --c-neutral-10:  #eff0f1;
  --c-neutral-20:  #e4e9ed;
  --c-neutral-30:  #c4ccd1;
  --c-neutral-40:  #939ca2;
  --c-neutral-50:  #5a636a;
  --c-neutral-60:  #4c555c;
  --c-neutral-70:  #3d454b;
  --c-neutral-80:  #2d3438;
  --c-neutral-90:  #202427;
  --c-neutral-100: #141618;
  --c-neutral-110: #0d0e10;

  --c-cyan-bluish-gray: #abb8c3;
  --c-pale-pink:        #f78da7;
  --c-vivid-red:        #cf2e2e;
  --c-vivid-orange:     #ff6900;
  --c-vivid-amber:      #fcb900;
  --c-light-green-cyan: #7bdcb5;
  --c-vivid-green-cyan: #00d084;
  --c-pale-cyan-blue:   #8ed1fc;
  --c-vivid-cyan-blue:  #0693e3;
  --c-vivid-purple:     #9b51e0;
  --c-hypergreen:       #abd233;
  --c-error:            #E43A3A;

  --overlay-modal-dim: rgba(20, 22, 24, 0.5);

  --g-cyan-purple:  linear-gradient(135deg, #0693e3 0%, #9b51e0 100%);
  --g-green:        linear-gradient(135deg, #7bdcb5 0%, #00d084 100%);
  --g-amber-orange: linear-gradient(135deg, #fcb900 0%, #ff6900 100%);
  --g-orange-red:   linear-gradient(135deg, #ff6900 0%, #cf2e2e 100%);
  --g-gray-cyan:    linear-gradient(135deg, #eeeeee 0%, #a9b8c3 100%);
  --g-midnight:     linear-gradient(135deg, #020381 0%, #2874fc 100%);

  /* --- typography --- */
  --font-sans: 'Lato', 'Gowun Dodum', -apple-system, BlinkMacSystemFont,
    'segoe ui', 'helvetica neue', 'Apple SD Gothic Neo', 'Malgun Gothic',
    helvetica, arial, sans-serif;
  /* 영문 라벨(eyebrow, 인덱스)도 같은 패밀리를 쓰고 자간으로만 구분한다 */
  --font-mono: var(--font-sans);

  /* 1440px 에서 각각 69 / 57 / 48 / 40 / 33 / 28px 로 렌더된다 */
  --fs-h1: clamp(41px, calc(-5.666667px + 5.833333vw), 69px);
  --fs-h2: clamp(36px, calc(1px + 4.375vw), 57px);
  --fs-h3: clamp(32px, calc(5.333333px + 3.333333vw), 48px);
  --fs-h4: clamp(29px, calc(10.666667px + 2.291667vw), 40px);
  --fs-h5: clamp(26px, calc(14.333333px + 1.458333vw), 33px);
  --fs-h6: clamp(23px, calc(14.666667px + 1.041667vw), 28px);

  --fs-body-lg: 19px;
  --fs-body-md: 16px;
  --fs-body-sm: 13px;
  --fs-body-xs: 12px;
  --fs-small:   13px;
  --fs-medium:  20px;
  --fs-large:   36px;
  --fs-x-large: 42px;
  --fs-nav:     14px;

  --lh-body: 1.5;
  --ls-body: 0.01em;
  --ls-sm:   0.02em;
  --ls-head: -0.01em;

  /* --- spacing (wp preset spacing) --- */
  --sp-8: 8px;   --sp-16: 16px;  --sp-24: 24px;  --sp-32: 32px;
  --sp-48: 48px; --sp-72: 72px;  --sp-96: 96px;  --sp-128: 128px; --sp-164: 164px;
  --sp-20: 0.44rem; --sp-30: 0.67rem; --sp-40: 1rem;
  --sp-50: 1.5rem;  --sp-60: 2.25rem; --sp-70: 3.38rem; --sp-80: 5.06rem;

  /* --- layout --- */
  --header-h: 90px;
  --block-max: 2108px;
  --block-max-narrow: 928px;
  --block-pad: 48px;
  --line-gutter: 24px;
  --line-width: 0.5px;
  --line-color: #5a636a;
  --radius: 4px;
  --radius-btn: 6px;
  --vh: 100dvh;

  /* --- shadows --- */
  --shadow-natural:  6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-deep:     12px 12px 50px rgba(0, 0, 0, 0.4);
  --shadow-sharp:    6px 6px 0px rgba(0, 0, 0, 0.2);
  --shadow-outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  --shadow-crisp:    6px 6px 0px rgba(0, 0, 0, 1);

  /* --- motion --- */
  --dur-xfast: 0.15s;
  --dur-fast:  0.3s;
  --dur:       0.55s;
  --dur-long:  0.6s;
  --dur-media: 0.75s;
  --dur-lines: 1.35s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft: ease-out;
  --ease-okd: cubic-bezier(0.625, 0.05, 0, 1);

  /* --- theme (기본 = neutral-100 dark) --- */
  --bg: var(--c-neutral-100);
  --heading: var(--c-neutral-05);
  --body: var(--c-neutral-30);
  --muted: var(--c-neutral-40);
  --hairline: #5a636a;
  --surface: var(--c-neutral-110);
}

@media (max-width: 1023px) {
  :root { --block-pad: 32px; --line-gutter: 16px; --header-h: 78px; }
}
@media (max-width: 767px) {
  :root { --block-pad: 24px; --line-gutter: 12px; --header-h: 72px; }
}

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

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

body {
  margin: 0;
  background: var(--c-neutral-90);
  color: var(--c-neutral-05);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

::selection { background: var(--c-hypergreen); color: var(--c-neutral-110); }

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
/* analysis.json: 본문·제목 모두 weight 400 */
h1, h2, h3, h4, h5, h6, th, strong, b { font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

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

/* 고정 헤더 아래로 앵커 대상이 숨지 않도록 */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------ theme classes -- */
.-theme-100 { --bg: var(--c-neutral-100); --heading: var(--c-neutral-05); --body: var(--c-neutral-30); --muted: var(--c-neutral-40); --hairline: #5a636a; --surface: var(--c-neutral-110); }
.-theme-110 { --bg: var(--c-neutral-110); --heading: var(--c-neutral-05); --body: var(--c-neutral-30); --muted: var(--c-neutral-40); --hairline: #3d454b; --surface: var(--c-neutral-100); }
.-theme-90  { --bg: var(--c-neutral-90);  --heading: var(--c-neutral-05); --body: var(--c-neutral-30); --muted: var(--c-neutral-40); --hairline: #4c555c; --surface: var(--c-neutral-110); }
.-theme-10  { --bg: var(--c-neutral-10);  --heading: var(--c-neutral-90); --body: var(--c-neutral-70); --muted: var(--c-neutral-50); --hairline: #c4ccd1; --surface: var(--c-neutral-0); }

.section {
  position: relative;
  background: var(--bg);
  color: var(--heading);
  isolation: isolate;
}

/* -------------------------------------------------- layout primitives -- */
.blk {
  position: relative;
  width: 100%;
  max-width: var(--block-max);
  margin-inline: auto;
  padding-inline: var(--block-pad);
}
.blk.-flush { padding-inline: 0; }
.blk.-narrow { max-width: calc(var(--block-max-narrow) + var(--block-pad) * 2); }

/* 12 컬럼 그리드 — 라인 거터 안쪽에서 시작하고 셀마다 24px 안쪽 여백을 갖는다 */
.u-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
  max-width: var(--block-max);
  margin-inline: auto;
  padding-inline: var(--line-gutter);
}
.u-grid > * { padding-inline: var(--line-gutter); min-width: 0; }
.u-grid.-no-gap > * { padding-inline: 0; }

/* --------------------------------------------------- grid line system -- */
.lines {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--block-max);
  pointer-events: none;
  z-index: 3;
}
.lines > i {
  position: absolute;
  top: 0; bottom: 0;
  width: var(--line-width);
  background: var(--hairline);
  left: calc(var(--line-gutter) + (100% - var(--line-gutter) * 2) * var(--i) / 12);
  transform-origin: 50% 0;
  transform: scaleY(1);
  transition: transform var(--dur-lines) ease;
}
.lines > i:last-child { transform-origin: 100% 0; margin-left: calc(var(--line-width) * -1); }
.lines.-rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--line-gutter);
  right: var(--line-gutter);
  height: var(--line-width);
  background: var(--hairline);
  transform-origin: 0 50%;
  transform: scaleX(1);
  transition: transform var(--dur-lines) ease;
}
.lines.-rule > i::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hairline) 100%, #ffffff 32%);
  transform: translate(-50%, -50%) scale(1);
  transition: transform var(--dur-lines) ease 0.25s;
}

/* JS 가 동작할 때만 초기 상태를 숨기고 스크롤에 맞춰 그린다 */
.has-js .lines > i { transform: scaleY(0); }
.has-js .lines.-rule::before { transform: scaleX(0); }
.has-js .lines.-rule > i::after { transform: translate(-50%, -50%) scale(0); }
.has-js .lines.is-in > i { transform: scaleY(1); }
.has-js .lines.is-in.-rule::before { transform: scaleX(1); }
.has-js .lines.is-in.-rule > i::after { transform: translate(-50%, -50%) scale(1); }
@media (max-width: 767px) {
  .lines > i.-mid { display: none; }
}

/* ------------------------------------------------------------ medias -- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-neutral-110);
  transition: opacity var(--dur-media) ease;
}
.has-js .media { opacity: 0; }
.media.is-ready { opacity: 1; }
.media > img, .media > video {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.media.-fill { position: absolute; inset: 0; }
.media::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--media-scrim, linear-gradient(180deg, rgba(13,14,16,.35) 0%, rgba(13,14,16,.15) 45%, rgba(13,14,16,.6) 100%));
  pointer-events: none;
}
.media.-plain::after { background: none; }

/* ------------------------------------------------------------ typography */
.t-h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--ls-head); font-weight: 400; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--ls-head); font-weight: 400; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--ls-head); font-weight: 400; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.t-h5 { font-size: var(--fs-h5); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.t-h6 { font-size: var(--fs-h6); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.t-lg { font-size: var(--fs-body-lg); line-height: 1.5; letter-spacing: var(--ls-body); }
.t-md { font-size: var(--fs-body-md); line-height: 1.5; letter-spacing: var(--ls-body); }
.t-sm { font-size: var(--fs-body-sm); line-height: 1.5; letter-spacing: var(--ls-sm); }
.t-xs { font-size: var(--fs-body-xs); line-height: 1.5; letter-spacing: var(--ls-body); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-body-xs);
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.muted { color: var(--muted); }
.dim { color: var(--body); }

/* 줄 마스크 (원본의 .okd-str-line / lineN-mask 와 같은 방식) */
.str { display: block; }
.str .str-line {
  display: block;
  overflow: hidden;
}
.str .str-line > span {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}
.str.is-in .str-line > span {
  transform: translateY(0);
  transition: transform 0.9s var(--ease-okd);
  transition-delay: calc(var(--n, 0) * 0.08s + var(--str-delay, 0s));
}

/* 페이드 + 상승 등장 */
.rise { will-change: transform, opacity; }
.has-js .rise { opacity: 0; transform: translateY(28px); }
.rise.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.9s var(--ease-okd);
  transition-delay: var(--delay, 0s);
}

/* ------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-nav);
  line-height: 1.5;
  letter-spacing: var(--ls-sm);
  color: var(--c-neutral-10);
  transition: color var(--dur-xfast) ease, opacity var(--dur-xfast) ease,
    background-color var(--dur-xfast) ease, border-color var(--dur-xfast) ease;
}
.btn:hover { color: var(--c-neutral-0); }

/* 문자 단위 롤오버 (원본 .btn-char transform 0.6s cubic-bezier(.625,.05,0,1)) */
.btn__label { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.btn__label .btn-char {
  display: inline-block;
  position: relative;
  transform: translateY(0);
  transition: transform var(--dur-long) var(--ease-okd);
  transition-delay: calc(var(--c, 0) * 0.012s);
  white-space: pre;
}
.btn__label .btn-char::after {
  content: attr(data-c);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: pre;
}
.btn:hover .btn__label .btn-char { transform: translateY(-100%); }

/* 외부 링크 아이콘 트랙 (원본 .u-btn__icon-external-track transform .65s) */
.btn__ext {
  display: inline-block;
  width: 10px; height: 10px;
  overflow: hidden;
  position: relative;
  flex: none;
}
.btn__ext-track {
  display: block;
  width: 20px; height: 20px;
  position: absolute;
  left: 0; top: 0;
  transform: translate3d(-10px, 10px, 0);
  transition: transform 0.65s var(--ease-okd);
}
.btn:hover .btn__ext-track { transform: translate3d(0, 0, 0); }
.btn__ext-track svg { position: absolute; width: 10px; height: 10px; }
.btn__ext-track svg:first-child { left: 10px; top: 10px; }
.btn__ext-track svg:last-child { left: 0; top: 0; }

.btn.-solid {
  height: 44px;
  padding-inline: var(--sp-24);
  border-radius: var(--radius-btn);
  background: var(--c-neutral-80);
  color: var(--c-neutral-10);
}
.btn.-solid:hover { background: #3a4247; }
.-theme-10 .btn.-solid { background: var(--c-neutral-20); color: var(--c-neutral-90); }
.-theme-10 .btn.-solid:hover { background: var(--c-neutral-30); }

.btn.-line {
  height: 44px;
  padding-inline: var(--sp-24);
  border-radius: var(--radius-btn);
  border: var(--line-width) solid var(--hairline);
  color: var(--heading);
}
.btn.-line:hover { border-color: var(--c-neutral-30); background: rgba(255, 255, 255, 0.04); }
.-theme-10 .btn.-line:hover { background: rgba(0, 0, 0, 0.04); }

.btn.-text {
  padding-block: 4px;
  color: var(--heading);
}
.btn.-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-hypergreen);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-okd);
}
.btn.-text:hover::after { transform: scaleX(1); }

.btn.-wide { width: 100%; justify-content: center; }

/* ------------------------------------------------------- page transition */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  pointer-events: none;
}
.page-transition__col {
  flex: 1 1 auto;
  background: var(--c-neutral-90);
  transform: translateY(0);
  will-change: transform;
}
.page-transition.is-out { pointer-events: none; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: var(--header-h);
  background: rgba(20, 22, 24, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--dur-fast) ease;
}
.site-header.is-scrolled { background: rgba(20, 22, 24, 0.78); }
.header__inline { position: relative; height: 100%; }
.header__shell {
  height: 100%;
  align-items: center;
}
.header__brand { grid-column: 1 / span 3; display: flex; align-items: center; }
.header__nav {
  grid-column: 4 / span 7;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-32);
  padding-right: var(--sp-32);
}
.header__cta { grid-column: 11 / span 2; display: flex; justify-content: center; }
.header__toggle-wrap { display: none; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-neutral-05);
}
/* 3D 흰 돌고래 마크 — Y축 회전 */
.brand__mark {
  width: 32px; height: 32px;
  flex: none;
  display: block;
  perspective: 220px;
}
.brand__mark svg {
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: dolphin-spin 11s linear infinite;
}
/* 360° 회전하되, 옆면(90°·270°)은 빠르게 지나가 마크가 오래 얇아지지 않게 한다 */
@keyframes dolphin-spin {
  0%   { transform: rotateX(-12deg) rotateY(0deg); }
  38%  { transform: rotateX(-12deg) rotateY(72deg); }
  50%  { transform: rotateX(-12deg) rotateY(180deg); }
  88%  { transform: rotateX(-12deg) rotateY(252deg); }
  100% { transform: rotateX(-12deg) rotateY(360deg); }
}
.brand:hover .brand__mark svg { animation-duration: 2.6s; }
.brand__name {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.brand__name b { font-weight: 500; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 4px;
  font-size: var(--fs-nav);
  line-height: 1.5;
  letter-spacing: var(--ls-sm);
  color: var(--c-neutral-10);
  transition: color var(--dur-xfast) ease, opacity var(--dur-xfast) ease;
}
.nav-link:hover { opacity: 0.62; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-hypergreen);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-okd);
}
.nav-link.-is-active::after { transform: scaleX(1); }

/* 모바일 토글 (세로 3점) */
.header__toggle {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.header__toggle span {
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-neutral-05);
  box-shadow: 0 -7px 0 var(--c-neutral-05), 0 7px 0 var(--c-neutral-05);
  transition: transform var(--dur-fast) var(--ease-okd);
}
.header__toggle[aria-expanded='true'] span { transform: rotate(90deg); }

/* 모바일 다이얼로그 */
.header__mobile {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: var(--c-neutral-110);
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.58s ease, visibility 0s linear 0.58s;
}
.header__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.58s ease, visibility 0s linear 0s;
}
.mobile__inner { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.mobile__nav { position: relative; z-index: 2; display: flex; flex-direction: column; padding-inline: var(--block-pad); gap: 4px; }
.mobile__nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 14px;
  font-size: var(--fs-h5);
  line-height: 1.15;
  letter-spacing: var(--ls-head);
  color: var(--c-neutral-05);
  opacity: 0;
}
.header__mobile.is-open .mobile__nav-link {
  animation: nav-link-in 0.5s var(--ease-okd) forwards;
  animation-delay: calc(0.12s + var(--n, 0) * 0.055s);
}
.mobile__nav-link.-is-active { color: var(--c-hypergreen); }
@keyframes nav-link-in {
  0%   { opacity: 0; transform: translateY(-14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.mobile__footer { padding: var(--block-pad); display: grid; gap: var(--sp-24); }
.mobile__copyright { font-size: var(--fs-body-sm); color: var(--muted); }
.mobile__terms { display: flex; gap: var(--sp-24); }
.mobile__terms a { font-size: var(--fs-body-sm); color: var(--muted); transition: opacity var(--dur-fast) ease; }
.mobile__terms a:hover { opacity: 0.6; }

@media (max-width: 1023px) {
  .header__brand { grid-column: 1 / span 8; }
  .header__nav, .header__cta { display: none; }
  .header__toggle-wrap { display: flex; grid-column: 11 / span 2; justify-content: flex-end; }
}

/* ------------------------------------------------------------------ hero */
/* 홈: 전체 화면 헤드라인 히어로 */
.hero-fsh {
  position: relative;
  min-height: var(--vh);
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-fsh__bg { position: absolute; inset: 0; z-index: 0; will-change: transform; backface-visibility: hidden; }
/* 히어로 배경 — 2880px 원본을 천천히 확대하며 스크롤에 따라 함께 밀린다 */
.media.-kenburns > img { animation: hero-drift 30s ease-in-out infinite alternate; transform-origin: 58% 46%; }
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}
.hero-fsh__bg .media { position: absolute; inset: -6% 0; }
.hero-fsh__bg .media.is-ready { opacity: 1; }
.hero-fsh__shell {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-fsh__main { position: relative; padding-bottom: var(--sp-48); }
.hero-fsh__main-inner { align-items: end; }
.hero-fsh__spacer { flex: 0 0 auto; height: clamp(80px, 14vh, 180px); position: relative; }
.hero-fsh__spacer-lines { position: absolute; inset: 0; }
.hero-fsh__spacer-line {
  position: absolute;
  left: var(--line-gutter); right: var(--line-gutter);
  height: var(--line-width);
  background: var(--hairline);
  transform-origin: 0 50%;
  transition: transform 0.8s ease 0.35s;
}
.has-js .hero-fsh__spacer-line { transform: scaleX(0); }
.hero-fsh__spacer-line--a { top: 0; }
.hero-fsh__spacer-line--b { bottom: 0; transition-delay: 0.5s; }
.is-hero-in .hero-fsh__spacer-line { transform: scaleX(1); }

.hero-fsh__title {
  grid-column: 1 / span 12;
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: var(--ls-head);
  font-weight: 400;
  color: var(--c-neutral-05);
}
.hero-fsh__main-line {
  position: relative;
  height: var(--line-width);
  margin-inline: var(--line-gutter);
  margin-top: var(--sp-32);
}
.hero-fsh__main-line-bar {
  position: absolute; inset: 0;
  background: var(--hairline);
  transform-origin: 0 50%;
  transition: transform 0.8s ease 0.58s;
}
.has-js .hero-fsh__main-line-bar { transform: scaleX(0); }
.is-hero-in .hero-fsh__main-line-bar { transform: scaleX(1); }

.hero-fsh__logos { position: relative; z-index: 2; transition: opacity 0.65s ease 0.82s; }
.has-js .hero-fsh__logos { opacity: 0; }
.is-hero-in .hero-fsh__logos { opacity: 1; }
.hero-fsh__logos-bar {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 92px;
  padding-inline: var(--line-gutter);
  flex-wrap: wrap;
}
.hero-fsh__logos-label { font-size: var(--fs-body-md); color: var(--c-neutral-05); flex: none; padding-inline: var(--line-gutter); }
.hero-fsh__logos-rail { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.wordlogo {
  font-size: var(--fs-body-lg);
  letter-spacing: 0.02em;
  color: var(--c-neutral-30);
  opacity: 0.82;
  white-space: nowrap;
  transition: opacity var(--dur-fast) ease;
}
.wordlogo:hover { opacity: 1; }
.wordlogo em { font-style: normal; font-family: var(--font-mono); font-size: 0.8em; letter-spacing: 0.14em; }

/* 소개: 전면 이미지 히어로 */
.hero-fs { position: relative; min-height: var(--vh); padding-top: var(--header-h); overflow: hidden; display: flex; }
.hero-fs__bg { position: absolute; inset: 0; z-index: 0; }
.hero-fs__bg .media { position: absolute; inset: -6% 0; }
.hero-fs__bg .media.is-ready { opacity: 1; }
.hero-fs__shell { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; }
.hero-fs__preband { flex: 1 1 auto; min-height: clamp(120px, 22vh, 320px); }
.hero-fs__postband { flex: 0 0 auto; height: clamp(48px, 8vh, 120px); }
.hero-fs__line { position: relative; height: var(--line-width); margin-inline: var(--line-gutter); }
.hero-fs__line-bar {
  position: absolute; inset: 0;
  background: var(--hairline);
  transform-origin: 0 50%;
  transition: transform 0.8s ease 0.35s;
}
.has-js .hero-fs__line-bar { transform: scaleX(0); }
.hero-fs__line--bottom .hero-fs__line-bar { transition-delay: 0.58s; }
.is-hero-in .hero-fs__line-bar { transform: scaleX(1); }
.hero-fs__band { padding-block: var(--sp-48); }
.hero-fs__band-inner { align-items: start; row-gap: var(--sp-32); }
.hero-fs__cell { grid-column: 1 / span 3; }
.hero-fs__main { grid-column: 4 / span 9; }
.hero-fs__title { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: var(--ls-head); font-weight: 400; }

/* 빌라 / 채용: 좌우 분할 히어로 */
.hero-maside { position: relative; padding-top: var(--header-h); }
.hero-maside__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: var(--line-gutter); }
.hero-maside__visual { grid-column: 1 / span 5; }
.hero-maside__visual .media { aspect-ratio: 4 / 5; height: 100%; }
.hero-maside__copy {
  grid-column: 6 / span 7;
  padding: clamp(40px, 8vh, 104px) var(--sp-48) clamp(40px, 8vh, 104px) clamp(32px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-48);
}
.hero-maside__copy-main { display: grid; gap: var(--sp-24); align-content: start; }
.hero-maside__eyebrow-row { display: flex; align-items: center; gap: 12px; }
.hero-maside__eyebrow-row::after { content: ''; flex: 1 1 auto; height: var(--line-width); background: var(--hairline); }
.hero-maside__title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.hero-maside__text { font-size: var(--fs-body-md); line-height: 1.5; letter-spacing: var(--ls-body); font-weight: 400; color: var(--muted); max-width: 46ch; }
.hero-maside__cta { align-self: start; margin-top: var(--sp-16); }
.hero-maside__logos-bar { display: flex; align-items: center; gap: var(--sp-32); flex-wrap: wrap; padding-top: var(--sp-24); border-top: var(--line-width) solid var(--hairline); }

@media (max-width: 1023px) {
  .hero-maside__row { grid-template-columns: 1fr; }
  .hero-maside__visual, .hero-maside__copy { grid-column: 1 / -1; }
  .hero-maside__visual .media { aspect-ratio: 4 / 3; }
  .hero-maside__copy { padding: var(--sp-48) var(--block-pad); }
}

/* --------------------------------------------------- horizontal scroll -- */
.horiz {
  position: relative;
  overflow: hidden;
  border-top: var(--line-width) solid var(--hairline);
  border-bottom: var(--line-width) solid var(--hairline);
  transition: border-color 0.55s ease-in-out;
}
.horiz__pin { position: relative; height: var(--vh); display: flex; align-items: center; }
.horiz__viewport { display: flex; align-items: stretch; gap: 0; will-change: transform; padding-inline: var(--line-gutter); }
.horiz__intro {
  flex: 0 0 clamp(320px, 34vw, 520px);
  padding: var(--sp-48) clamp(24px, 3vw, 56px);
  display: grid;
  align-content: center;
  gap: var(--sp-24);
  border-right: var(--line-width) solid var(--hairline);
}
.horiz__panel {
  flex: 0 0 clamp(300px, 30vw, 460px);
  padding: var(--sp-48) clamp(24px, 3vw, 56px);
  border-right: var(--line-width) solid var(--hairline);
  display: grid;
  align-content: start;
  gap: var(--sp-24);
}
.horiz__panel .media { aspect-ratio: 3 / 4; }
.horiz__index { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; color: var(--muted); }
.horiz__frame-diagonal { color: var(--hairline); transition: color 0.55s ease-in-out; }
.horiz__media-line { display: block; height: var(--line-width); background: var(--hairline); transition: background-color 0.55s ease-in-out; }

@media (max-width: 767px) {
  .horiz__pin { height: auto; }
  .horiz__viewport { flex-direction: column; }
  .horiz__intro, .horiz__panel { flex: none; border-right: 0; border-bottom: var(--line-width) solid var(--hairline); }
}

/* ---------------------------------------------------------------- metrics */
.metrics { position: relative; overflow: hidden; }
.metrics__bg-slot { position: absolute; inset: 0; z-index: 0; }
.metrics__bg-slot .media { position: absolute; inset: -8% 0; --media-scrim: linear-gradient(180deg, rgba(13,14,16,.86) 0%, rgba(13,14,16,.7) 40%, rgba(13,14,16,.92) 100%); }
.metrics__bg-slot .media.is-ready { opacity: 1; }
.metrics__content { position: relative; z-index: 2; padding-block: clamp(72px, 12vh, 164px); }
.metrics__hgroup { display: grid; gap: var(--sp-24); max-width: 62ch; margin-bottom: clamp(48px, 8vh, 96px); }
.metrics__heading { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); }
.metrics__text { font-size: var(--fs-body-lg); line-height: 1.5; letter-spacing: var(--ls-body); color: var(--body); }
.metrics__grid-wrap { position: relative; }
.metrics__grid { padding-inline: 0; }
.metric {
  position: relative;
  grid-column: span 3;
  padding: var(--sp-32) var(--sp-24) var(--sp-32) 0;
  display: grid;
  gap: 10px;
  align-content: start;
}
.metric::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--line-width);
  background: var(--hairline);
  transform-origin: 0 50%;
}
.has-js .metric::before { transform: scaleX(0); }
.metric.is-in::before { transform: scaleX(1); transition: transform 1s var(--ease-okd) calc(var(--n, 0) * 0.1s); }
.metric__dot {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hairline) 100%, #ffffff 32%);
}
.has-js .metric__dot { transform: translate(-50%, -50%) scale(0); }
.metric.is-in .metric__dot { transform: translate(-50%, -50%) scale(1); transition: transform .6s var(--ease-okd) calc(var(--n, 0) * .1s + .35s); }
.metric__value { font-size: var(--fs-h5); line-height: 1.05; letter-spacing: var(--ls-head); color: var(--heading); }
.metric__value sub { font-size: 0.44em; vertical-align: baseline; letter-spacing: 0.02em; margin-left: 4px; color: var(--muted); }
.metric__label { font-size: var(--fs-body-sm); letter-spacing: var(--ls-sm); color: var(--muted); }
.metrics__cta-wrap { margin-top: clamp(48px, 7vh, 88px); }

@media (max-width: 1023px) { .metric { grid-column: span 6; } }
@media (max-width: 639px) { .metric { grid-column: span 12; } }

/* ------------------------------------------------------------------ ctext */
.ctext { position: relative; }
.ctext__row { padding-block: clamp(72px, 12vh, 164px); }
.ctext__copy { max-width: 68ch; display: grid; gap: var(--sp-32); }
.ctext__title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; color: var(--heading); }
.ctext__text { font-size: var(--fs-body-lg); line-height: 1.5; letter-spacing: var(--ls-body); color: var(--body); }
.ctext__cta { justify-self: start; }
.ctext.-center .ctext__copy { margin-inline: auto; text-align: center; justify-items: center; }

/* ----------------------------------------------------------- sticky steps */
.sticky-steps { position: relative; }
.sticky-steps__container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: var(--line-gutter); }
.sticky-steps__rail { grid-column: 1 / span 4; padding: clamp(72px, 12vh, 164px) var(--line-gutter) var(--sp-48); }
.sticky-steps__rail-sticky { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: var(--sp-24); }
.sticky-steps__upper { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.sticky-steps__collection { grid-column: 5 / span 8; padding-block: clamp(72px, 12vh, 164px); }
.sticky-steps__list { display: grid; gap: clamp(48px, 8vh, 120px); }
.step { display: grid; gap: var(--sp-24); padding-left: var(--line-gutter); }
.step__head { display: flex; align-items: baseline; gap: var(--sp-16); border-top: var(--line-width) solid var(--hairline); padding-top: var(--sp-16); }
.step__no { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; color: var(--muted); }
.step__title { font-size: var(--fs-h6); line-height: 1.1; letter-spacing: var(--ls-head); }
.step__text { font-size: var(--fs-body-md); color: var(--body); max-width: 54ch; }
.step .media { aspect-ratio: 16 / 10; }

@media (max-width: 1023px) {
  .sticky-steps__container { grid-template-columns: 1fr; }
  .sticky-steps__rail { grid-column: 1 / -1; padding-bottom: 0; }
  .sticky-steps__rail-sticky { position: static; }
  .sticky-steps__collection { grid-column: 1 / -1; }
  .step { padding-left: 0; }
}

/* ------------------------------------------------------------- fs-media */
.fs-media { position: relative; }
.fs-media__wrap { padding-block: clamp(48px, 8vh, 120px); }
.fs-media__media .media { aspect-ratio: 21 / 9; }

/* ------------------------------------------------------ overview accords */
.accords { position: relative; }
.accords__inner { padding-block: clamp(72px, 12vh, 164px); }
.accords__heading { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); margin-bottom: clamp(40px, 6vh, 72px); }
.accords__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.accords__media { position: sticky; top: calc(var(--header-h) + 48px); }
.accords__media .media { aspect-ratio: 4 / 3; }
.accords__media .media + .media { position: absolute; inset: 0; opacity: 0; }
.accords__media .media.is-current { opacity: 1; }
.accords__list { display: grid; }
.accord { border-top: var(--line-width) solid var(--hairline); }
.accord:last-child { border-bottom: var(--line-width) solid var(--hairline); }
.accord__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding-block: var(--sp-24);
  text-align: left;
  font-size: var(--fs-h6);
  line-height: 1.2;
  letter-spacing: var(--ls-head);
  color: var(--heading);
  transition: color var(--dur-xfast) ease, opacity var(--dur-xfast) ease;
}
.accord__btn:hover { opacity: 0.65; }
.accord__sign { position: relative; width: 14px; height: 14px; flex: none; }
.accord__sign::before, .accord__sign::after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 14px; height: var(--line-width);
  background: currentColor;
  transition: transform 0.5s var(--ease-okd);
}
.accord__sign::after { transform: rotate(90deg); }
.accord.is-open .accord__sign::after { transform: rotate(0deg); }
.accord__panel { overflow: hidden; height: 0; transition: height 0.55s var(--ease-okd); }
.accord__panel-inner { padding-bottom: var(--sp-32); display: grid; gap: var(--sp-16); max-width: 56ch; }
.accord__panel-inner p { font-size: var(--fs-body-md); color: var(--body); }
.accord__spec { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.accord__spec span { font-size: var(--fs-body-xs); letter-spacing: 0.06em; color: var(--muted); }

@media (max-width: 1023px) {
  .accords__layout { grid-template-columns: 1fr; }
  .accords__media { position: relative; top: auto; }
}

/* --------------------------------------------------------- testimonial -- */
.testimonial { position: relative; overflow: hidden; }
.testimonial__bg-slot { position: absolute; inset: 0; z-index: 0; }
.testimonial__bg-slot .media { position: absolute; inset: -8% 0; --media-scrim: linear-gradient(180deg, rgba(13,14,16,.82) 0%, rgba(13,14,16,.66) 50%, rgba(13,14,16,.9) 100%); }
.testimonial__bg-slot .media.is-ready { opacity: 1; }
.testimonial__content { position: relative; z-index: 2; padding-block: clamp(96px, 16vh, 220px); }
.testimonial__grid { padding-inline: 0; }
.testimonial__copy { grid-column: 3 / span 8; display: grid; gap: var(--sp-32); }
.testimonial__quote { font-size: var(--fs-h5); line-height: 1.3; letter-spacing: var(--ls-head); color: var(--c-neutral-05); }
.testimonial__author { display: grid; gap: 4px; }
.testimonial__author strong { font-weight: 400; font-size: var(--fs-body-md); color: var(--c-neutral-30); }
.testimonial__author span { font-size: var(--fs-body-sm); color: var(--c-neutral-40); }
@media (max-width: 1023px) { .testimonial__copy { grid-column: 1 / -1; } }

/* -------------------------------------------------------- posts archive -- */
.posts-archive { position: relative; }
.posts-archive__inner { padding-inline: 0; }
.posts-archive__layout { align-items: stretch; }
.posts-archive__sidebar { grid-column: 1 / span 4; position: relative; }
.posts-archive__sidebar-bg { position: absolute; inset: 0; overflow: hidden; }
.posts-archive__sidebar-bg .media {
  position: sticky; top: 0; height: var(--vh);
  --media-scrim: linear-gradient(180deg, rgba(13,14,16,.72) 0%, rgba(13,14,16,.5) 40%, rgba(13,14,16,.88) 100%);
}
.posts-archive__sidebar-inner {
  position: sticky;
  top: calc(var(--header-h) + 56px);
  z-index: 2;
  padding: 0 var(--block-pad) var(--sp-48) var(--block-pad);
  display: grid;
  gap: var(--sp-24);
}
.posts-archive__sidebar { padding-top: calc(var(--header-h) + 72px); }
.posts-archive__title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; }
.posts-archive__lead { font-size: var(--fs-body-md); color: var(--body); max-width: 34ch; }
.posts-archive__main { grid-column: 5 / span 8; padding: calc(var(--header-h) + 72px) 0 clamp(72px, 10vh, 128px); border-left: var(--line-width) solid var(--hairline); }
.posts-section { padding-inline: var(--block-pad); }
.posts-section + .posts-section { margin-top: clamp(56px, 8vh, 96px); }
.posts-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-24); padding-bottom: var(--sp-24); }
.posts-section__title { font-size: var(--fs-h6); line-height: 1.1; letter-spacing: var(--ls-head); }
.posts-section__count { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; color: var(--muted); }
.post-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--sp-24);
  align-items: baseline;
  padding-block: var(--sp-24);
  border-top: var(--line-width) solid var(--hairline);
  transition: background-color var(--dur-fast) ease;
}
.post-item:hover { background: rgba(255, 255, 255, 0.03); }
.post-item[hidden] { display: none; }
.post-item__date { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.1em; color: var(--muted); }
.post-item__title { font-size: var(--fs-body-md); color: var(--heading); }
.post-item__meta { font-size: var(--fs-body-sm); color: var(--muted); }
.posts-section__more { display: flex; justify-content: center; padding-top: var(--sp-32); }
@media (max-width: 1023px) {
  .posts-archive__sidebar { grid-column: 1 / -1; min-height: 46vh; }
  .posts-archive__main { grid-column: 1 / -1; border-left: 0; padding-top: var(--sp-48); }
  .post-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ------------------------------------------------------------- maside -- */
.maside { position: relative; }
.maside__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: var(--line-gutter); align-items: stretch; }
.maside__visual { grid-column: 1 / span 6; }
.maside__visual .media { height: 100%; min-height: 380px; aspect-ratio: 3 / 2; }
.maside__copy {
  grid-column: 7 / span 6;
  padding: clamp(48px, 9vh, 120px) var(--sp-48) clamp(48px, 9vh, 120px) clamp(32px, 4vw, 80px);
  display: grid;
  gap: var(--sp-24);
  align-content: center;
}
.maside__title { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); }
.maside__text { font-size: var(--fs-body-md); color: var(--body); max-width: 46ch; }
.maside__cta { justify-self: start; margin-top: var(--sp-16); }
@media (max-width: 1023px) {
  .maside__row { grid-template-columns: 1fr; }
  .maside__visual, .maside__copy { grid-column: 1 / -1; }
  .maside__copy { padding: var(--sp-48) var(--block-pad); }
}

/* ------------------------------------------------------ team directory -- */
.team { position: relative; }
.team__inner { padding-block: clamp(72px, 12vh, 164px); }
.team__groups { display: grid; gap: clamp(48px, 7vh, 88px); }
.team__group { padding-inline: 0; align-items: start; }
.team__group-head { grid-column: 1 / span 4; padding-right: var(--sp-32); }
.team__group-title { font-size: var(--fs-h6); line-height: 1.1; letter-spacing: var(--ls-head); }
.team__group-note { font-size: var(--fs-body-sm); color: var(--muted); margin-top: 10px; }
.team__group-body { grid-column: 5 / span 8; display: grid; }
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-24);
  align-items: center;
  padding-block: var(--sp-24);
  border-top: var(--line-width) solid var(--hairline);
  text-align: left;
  width: 100%;
  transition: background-color var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}
.team-row:last-child { border-bottom: var(--line-width) solid var(--hairline); }
.team-row:hover { background: rgba(255, 255, 255, 0.03); padding-left: 12px; }
.team-row__name { font-size: var(--fs-body-md); color: var(--heading); }
.team-row__role { font-size: var(--fs-body-sm); color: var(--muted); }
.team-row__sign { font-family: var(--font-mono); font-size: var(--fs-body-xs); color: var(--muted); letter-spacing: 0.14em; }
@media (max-width: 1023px) {
  .team__group-head, .team__group-body { grid-column: 1 / -1; }
  .team__group-body { margin-top: var(--sp-24); }
  .team-row { grid-template-columns: 1fr auto; }
  .team-row__role { grid-column: 1 / -1; }
}

.team-dialog { border: 0; padding: 0; background: none; max-width: none; max-height: none; width: 100%; height: 100%; overflow: visible; }
.team-dialog::backdrop { background: rgba(13, 14, 16, 0.72); backdrop-filter: blur(6px); }
.team-dialog__panel {
  position: fixed;
  inset: auto 0 0 auto;
  width: min(560px, 100%);
  height: 100%;
  background: var(--c-neutral-100);
  border-left: var(--line-width) solid var(--hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-okd);
}
.team-dialog[open] .team-dialog__panel { transform: none; }
.team-dialog__top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-24) var(--block-pad); border-bottom: var(--line-width) solid var(--hairline); }
.team-dialog__kicker { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.team-dialog__close { width: 32px; height: 32px; display: grid; place-items: center; color: var(--c-neutral-30); transition: color var(--dur-xfast) ease; }
.team-dialog__close:hover { color: var(--c-neutral-0); }
.team-dialog__scroll { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-48) var(--block-pad); display: grid; gap: var(--sp-24); align-content: start; }
.team-dialog__name { font-size: var(--fs-h5); line-height: 1.1; letter-spacing: var(--ls-head); }
.team-dialog__role { font-size: var(--fs-body-sm); color: var(--muted); }
.team-dialog__bio { font-size: var(--fs-body-md); color: var(--body); }

/* ------------------------------------------------------- careers list -- */
.careers-list { position: relative; }
.careers-list__inner { padding-block: clamp(72px, 12vh, 164px); }
.careers-list__hgroup { display: grid; gap: 10px; margin-bottom: clamp(40px, 6vh, 72px); }
.careers-list__title { font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--ls-head); font-weight: 400; }
.careers-list__count { font-size: var(--fs-h6); line-height: 1.1; letter-spacing: var(--ls-head); color: var(--muted); }
.careers-list__categories { display: grid; }
.careers-cat { border-top: var(--line-width) solid var(--hairline); padding-block: var(--sp-32) 0; }
.careers-cat__label { font-size: var(--fs-body-sm); color: var(--muted); letter-spacing: var(--ls-sm); }
.careers-cat__name { font-size: var(--fs-h6); line-height: 1.2; letter-spacing: var(--ls-head); margin-top: 4px; margin-bottom: var(--sp-24); }
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-24);
  align-items: center;
  padding-block: var(--sp-24);
  border-top: var(--line-width) solid var(--hairline);
  transition: background-color var(--dur-fast) ease;
}
.job-row:hover { background: rgba(255, 255, 255, 0.03); }
.job-row__title { font-size: var(--fs-body-md); color: var(--heading); }
.job-row__meta { font-size: var(--fs-body-sm); color: var(--muted); margin-top: 2px; }
@media (max-width: 639px) {
  .job-row { grid-template-columns: 1fr; }
  .job-row .btn.-solid { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------- site form -- */
.site-form { position: relative; min-height: calc(var(--vh) - 0px); display: flex; }
.site-form__inner { position: relative; width: 100%; display: flex; align-items: center; padding-block: calc(var(--header-h) + 72px) clamp(72px, 10vh, 128px); }
.site-form__stage { position: relative; width: 100%; }
.site-form__panel { transition: opacity 0.55s ease, visibility 0s linear 0.55s; }
.site-form__panel--success { position: absolute; inset: 0; opacity: 0; visibility: hidden; display: grid; align-content: center; }
.site-form.is-sent .site-form__panel--form { opacity: 0; visibility: hidden; }
.site-form.is-sent .site-form__panel--success { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-form__grid { padding-inline: 0; }
.site-form__hgroup { grid-column: 5 / span 8; display: grid; gap: var(--sp-16); margin-bottom: clamp(40px, 6vh, 64px); }
.site-form__title { font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--ls-head); font-weight: 400; }
.site-form__lead { font-size: var(--fs-body-md); color: var(--muted); max-width: 52ch; }
.site-form__form-wrap { grid-column: 5 / span 8; }
.site-form__side { grid-column: 1 / span 4; display: grid; gap: var(--sp-24); align-content: start; }
.site-form__side dl { display: grid; gap: 6px; }
.site-form__side dt { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.site-form__side dd { margin: 0; font-size: var(--fs-body-md); color: var(--body); }
.site-form__success-inner { grid-column: 5 / span 8; display: grid; gap: var(--sp-24); justify-items: start; }
.site-form__success-title { font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--ls-head); font-weight: 400; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
.field { display: grid; gap: 8px; }
.field.-full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-nav); letter-spacing: var(--ls-sm); color: var(--c-neutral-20); }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--line-width) solid var(--hairline);
  padding: 12px 0;
  font-size: var(--fs-body-md);
  color: var(--heading);
  border-radius: 0;
  transition: border-color var(--dur-fast) ease;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 20px, calc(100% - 7px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--c-neutral-100); color: var(--c-neutral-05); }
.field textarea { resize: vertical; min-height: 132px; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-neutral-60); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-hypergreen); }
.field.-invalid input, .field.-invalid textarea, .field.-invalid select { border-color: var(--c-error); }
.field__error { font-size: var(--fs-body-xs); color: var(--c-error); min-height: 16px; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-24); margin-top: var(--sp-16); }
.form-note { font-size: var(--fs-body-xs); color: var(--muted); }
.spinner { width: 14px; height: 14px; border: 1.5px solid rgba(245,246,247,.3); border-top-color: var(--c-neutral-05); border-radius: 50%; animation: spin 0.8s linear infinite; display: none; }
.is-sending .spinner { display: block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1023px) {
  .site-form__hgroup, .site-form__form-wrap, .site-form__side, .site-form__success-inner { grid-column: 1 / -1; }
  .site-form__side { margin-top: var(--sp-48); }
  .form-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- policy copy -- */
.policy { position: relative; }
.policy__inner { padding-block: calc(var(--header-h) + 72px) clamp(72px, 10vh, 128px); }
.policy__header { display: grid; gap: 12px; margin-bottom: clamp(40px, 6vh, 72px); max-width: var(--block-max-narrow); }
.policy__header h1 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; }
.policy__header p { font-size: var(--fs-body-md); color: var(--c-neutral-50); }
.policy__body { max-width: var(--block-max-narrow); display: grid; gap: var(--sp-24); }
.policy__body h2 { font-size: var(--fs-h6); line-height: 1.2; letter-spacing: var(--ls-head); font-weight: 400; margin-top: var(--sp-32); }
.policy__body p { font-size: var(--fs-body-md); color: var(--body); }
.policy__body ul { display: grid; gap: 10px; padding-left: 18px; }
.policy__body li { font-size: var(--fs-body-md); color: var(--muted); list-style: disc; }
.policy__body a { color: var(--c-neutral-05); border-bottom: 1px solid var(--hairline); transition: border-color var(--dur-xfast) ease; }
.policy__body a:hover { border-color: var(--c-hypergreen); }

/* -------------------------------------------------------------- footer -- */
.site-footer { position: relative; background: var(--c-neutral-110); color: var(--c-neutral-05); overflow: hidden; --hairline: #3d454b; }
.footer__media { position: absolute; inset: 0; z-index: 0; }
.footer__media .media {
  position: absolute; inset: -10% 0;
  --media-scrim: linear-gradient(180deg, rgba(13,14,16,.9) 0%, rgba(13,14,16,.82) 50%, rgba(13,14,16,.96) 100%);
}
.footer__media .media.is-ready { opacity: 1; }
.footer__inner { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 861px; }
.footer__main { flex: 1 1 auto; padding-block: clamp(72px, 11vh, 140px) var(--sp-48); }
.footer__main-inner { display: grid; gap: clamp(40px, 6vh, 72px); }
.footer__eyebrow { display: flex; align-items: center; gap: 12px; }
.footer__eyebrow::after { content: ''; flex: 1 1 auto; height: var(--line-width); background: var(--hairline); }
.footer__content { padding-inline: 0; row-gap: clamp(40px, 6vh, 64px); }
.footer__col--heading { grid-column: 1 / span 6; display: grid; gap: var(--sp-32); align-content: start; }
.footer__heading { font-size: var(--fs-h4); line-height: 1.1; letter-spacing: var(--ls-head); font-weight: 400; max-width: 18ch; }
.footer__cta { justify-self: start; }
.footer__col--aside { grid-column: 8 / span 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-32); align-content: start; }
.footer__nav { display: grid; gap: 12px; align-content: start; }
.footer__nav-title { font-family: var(--font-mono); font-size: var(--fs-body-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-neutral-50); margin-bottom: 4px; }
.footer__nav a { font-size: var(--fs-nav); letter-spacing: var(--ls-sm); color: var(--c-neutral-10); transition: color var(--dur-xfast) ease, opacity var(--dur-xfast) ease; }
.footer__nav a:hover { opacity: 0.6; }
.footer__nav address { font-style: normal; font-size: var(--fs-nav); letter-spacing: var(--ls-sm); color: var(--c-neutral-30); line-height: 1.6; }
.footer__bottom { padding-block: var(--sp-32); border-top: var(--line-width) solid var(--hairline); }
.footer__bottom-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap; }
.footer__copyright, .footer__credit { font-size: var(--fs-body-sm); letter-spacing: var(--ls-sm); color: var(--c-neutral-40); }
.footer__credit a { color: var(--c-neutral-30); transition: color var(--dur-xfast) ease; }
.footer__credit a:hover { color: var(--c-hypergreen); }

@media (max-width: 1023px) {
  .footer__col--heading { grid-column: 1 / -1; }
  .footer__col--aside { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__inner { min-height: 0; }
}
@media (max-width: 639px) {
  .footer__col--aside { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ utilities */
@media (max-width: 1023px) {
  .hero-fs__cell { grid-column: 1 / span 12; }
  .hero-fs__main { grid-column: 1 / span 12; }
  .hero-fsh__title { grid-column: 1 / span 12; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .str .str-line > span { transform: none; }
  .rise { opacity: 1; transform: none; }
  .media { opacity: 1; }
}

/* ---------------------------------------------- 추가 컴포넌트 / 보조 스타일 */
.footer__lead { font-size: var(--fs-body-md); color: var(--c-neutral-40); max-width: 40ch; }
.footer__hours { color: var(--c-neutral-40); }
.accords__note { margin-top: clamp(32px, 5vh, 56px); padding-top: var(--sp-24); border-top: var(--line-width) solid var(--hairline); }
.careers-list__note { margin-top: clamp(32px, 5vh, 56px); padding-top: var(--sp-24); border-top: var(--line-width) solid var(--hairline); }

/* 브랜드 워드마크 — 상호를 Lato 로 조판 */
.brand__name {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 영문 제목은 Lato 로 조판하고, 한글 본문은 고운돋움이 그대로 받는다 */
.hero-fsh__title, .hero-fs__title, .hero-maside__title, .metrics__heading,
.ctext__title, .sticky-steps__upper, .accords__heading, .careers-list__title,
.careers-list__count, .posts-archive__title, .posts-section__title,
.site-form__title, .site-form__success-title, .maside__title, .footer__heading,
.policy__header h1, .team__group-title, .step__title, .accord__btn,
.horiz__panel h3, .btn, .nav-link, .eyebrow, .horiz__index, .metric__value,
.post-item__date, .team-row__sign, .footer__nav-title, .careers-cat__name,
.careers-cat__label, .team-dialog__kicker, .wordlogo em {
  font-family: 'Lato', 'Gowun Dodum', sans-serif;
}

/* 한글이 섞이는 제목은 고운돋움이 자연스럽게 받도록 자간을 조금 풀어 준다 */
.hero-maside__text, .ctext__text, .metrics__text, .step__text, .posts-archive__lead,
.maside__text, .policy__body p, .policy__body li, .testimonial__quote,
.metric__label, .job-row__meta, .post-item__title, .team__group-note,
.accord__panel-inner p, .hero-fsh__logos-label { letter-spacing: 0; }

.testimonial__quote { letter-spacing: -0.005em; }

/* 히어로 배경은 원본 사이트처럼 어둡게 눌러 타이포가 먼저 읽히게 한다 */
.hero-fsh__bg .media {
  /* 낮 항공뷰라 가운데는 밝게 두고, 헤더와 헤드라인 영역만 눌러 준다 */
  --media-scrim: linear-gradient(180deg, rgba(13,14,16,.6) 0%, rgba(13,14,16,.2) 28%, rgba(13,14,16,.38) 58%, rgba(13,14,16,.84) 86%, rgba(13,14,16,.93) 100%);
}
.hero-fsh__bg { filter: saturate(.78) brightness(.92) contrast(1.02); }
/* 영상 레이어는 변형만 담당하도록 GPU 로 올리고, 시차 이동 시 가장자리가 드러나지 않게 살짝 키운다 */
.hero-fsh__bg .media > video {
  transform: scale(1.06) translateZ(0);
  transform-origin: 50% 45%;
  backface-visibility: hidden;
  will-change: transform;
}
.hero-fs__bg .media {
  --media-scrim: linear-gradient(180deg, rgba(13,14,16,.72) 0%, rgba(13,14,16,.44) 38%, rgba(13,14,16,.88) 100%);
}
.hero-fs__bg .media > img { filter: saturate(.7) brightness(.84) contrast(1.03); }
.hero-maside__visual .media > img { filter: saturate(.82) brightness(.92); }

/* 밝은 테마 이미지는 팔레트에 맞춰 채도를 살짝 낮춘다 */
.-theme-10 .fs-media__media .media > img { filter: saturate(.74) contrast(1.02); }
.testimonial__bg-slot .media > img { filter: saturate(.7) brightness(.86); }
.metrics__bg-slot .media > img { filter: saturate(.72) brightness(.9); }

/* 모바일 보정 */
@media (max-width: 767px) {
  .hero-fsh__logos-bar { min-height: 68px; gap: 12px; align-items: center; flex-wrap: nowrap; }
  .hero-fsh__logos-label { font-size: var(--fs-body-sm); padding-inline: var(--line-gutter) 0; }
  .hero-fsh__logos-rail {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding-inline: 12px var(--line-gutter);
    scrollbar-width: none;
  }
  .hero-fsh__logos-rail::-webkit-scrollbar { display: none; }
  .wordlogo { font-size: var(--fs-body-md); }
  .hero-fsh__main { padding-bottom: var(--sp-32); }
  .posts-section__head { flex-wrap: wrap; }
  .team-dialog__panel { width: 100%; }
  .horiz__panel .media { aspect-ratio: 4 / 3; }
}