/* ==========================================================================
   NOVACELL — 디자인 토큰 (analysis.json designSystem 기준)
   ========================================================================== */
:root {
  /* 색상 */
  --color-white: #fcfaf3;
  --color-white--a5: rgba(252, 250, 243, 0.05);
  --color-white--a10: rgba(252, 250, 243, 0.1);
  --color-white--a25: rgba(252, 250, 243, 0.25);
  --color-black: #37352f;
  --color-black--a15: rgba(55, 53, 47, 0.15);
  --color-black--a25: rgba(55, 53, 47, 0.25);
  --color-grey-1: #989486;
  --color-grey-1--a15: rgba(152, 148, 134, 0.15);
  --color-grey-1--a25: rgba(152, 148, 134, 0.25);
  --color-grey-1--a50: rgba(152, 148, 134, 0.5);
  --color-grey-2: #d0cec8;
  --color-grey-2--a25: rgba(208, 206, 200, 0.25);
  --color-grey-2--a50: rgba(208, 206, 200, 0.5);
  --color-red: #d97562;
  --color-brown: #c4a178;
  --color-brown--a10: rgba(196, 161, 120, 0.1);
  --color-teal: #86a89e;
  --color-yellow: #f7f781;
  --color-green: #d6df6d;
  --color-green--a5: rgba(214, 223, 109, 0.05);
  --color-blue: #aecee8;
  --color-pureblack: #000000;
  --color-purewhite: #ffffff;
  --color-error: #ff3333;
  --color-success: #32d800;
  --color-background: #37352f;
  --color-text: #989486;

  /* 뷰포트 단위 (스크롤바 제외, JS 로 갱신) */
  --vw: 1vw;
  --scrollbar: 0px;

  /* 간격 */
  --s2: 2px; --s4: 4px; --s5: 5px; --s8: 8px; --s10: 10px; --s12: 12px; --s16: 16px;
  --s20: 20px; --s24: 24px; --s32: 32px; --s40: 40px; --s50: 50px; --s64: 64px;
  --s80: 80px; --s100: 100px; --s200: 200px; --s300: 300px; --s400: 400px;

  /* 그리드 */
  --columns-count: 12;
  --margin: 20px;
  --gutter: 20px;
  --container-max-width: 99999px;
  --container-width: min(calc((100 * var(--vw)) - (2 * var(--margin))), var(--container-max-width));
  --column: calc((1 / 12) * (var(--container-width) - ((12 - 1) * var(--gutter))));
  --margin-dynamic: calc((100 * var(--vw) - var(--container-width)) / 2);
  --sidebar-width: calc(2 * var(--column) + var(--gutter));
  --main-start: calc(var(--margin) + var(--sidebar-width) + var(--gutter));
  --header-height: 62px;
  --scroll-padding-top: calc(var(--header-height) + 100px);
  --border-width: 1px;
  --backdrop-filter: blur(40px);
  --border-radius--s: 3px;

  /* 모션 */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --transition-default-duration: 0.25s;
  --transition-default: 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-media-load-duration: 0.6s;
  --transition-media-load: 0.6s cubic-bezier(0.33, 1, 0.68, 1);

  /* 비율 */
  --aspect-square: 1 / 1;
  --aspect-landscape: 16 / 9;
  --aspect-portrait: 3 / 4;

  /* 서체 — 원본 FKAktual(그로테스크) → Inter, MDLorien(세리프) → Source Serif 4 (README 참고) */
  --font-family-heading: "Inter", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-family-body: "Source Serif 4", "Noto Serif KR", "Apple SD Gothic Neo", serif;

  /* 타이포 스케일 — 1440px 에서 실측값과 일치 (h1 64 / h2-large 50 / h2-alt 36) */
  --text-heading-l: clamp(40px, 4.4444vw, 64px);
  --text-heading-m: clamp(32px, 3.4722vw, 50px);
  --text-heading-s: clamp(26px, 2.5vw, 36px);
}

/* ==========================================================================
   기본
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--scroll-padding-top); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-menu-open { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--color-white); text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
main { display: block; position: relative; z-index: 2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   타이포그래피
   ========================================================================== */
.type-display { font-family: var(--font-family-heading); font-size: var(--text-heading-l); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-grey-1); }
.type-title { font-family: var(--font-family-heading); font-size: var(--text-heading-m); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-grey-1); }
.type-subtitle { font-family: var(--font-family-heading); font-size: var(--text-heading-s); font-weight: 300; line-height: 1.1; letter-spacing: -0.005em; color: var(--color-white); }
.type-lede { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-grey-2); }
.is-lit { color: var(--color-white); font-weight: inherit; }
.type-display.is-grey { color: var(--color-grey-1); }

/* 키커(사각 라벨) */
.kicker {
  display: inline-flex; align-items: center; gap: var(--s5);
  font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2;
  text-transform: uppercase; color: var(--color-white); letter-spacing: 0.01em;
}
.kicker__icon { display: inline-block; width: 8px; height: 8px; background: var(--kicker-color, currentColor); flex: none; }
.kicker.is-sticky { position: sticky; top: var(--scroll-padding-top); }

/* 내비 텍스트 링크 ( / 라벨 · ■ 라벨 ) */
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--color-grey-1);
  transition: color var(--transition-default);
}
.nav-link__icon { display: inline-flex; align-items: center; justify-content: center; width: 8px; height: 12px; font-weight: 400; color: inherit; }
.nav-link__icon::before { content: "/"; }
.nav-link.is-active .nav-link__icon::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--color-white); }
.nav-link.is-light { color: var(--color-grey-2); }
.nav-link.is-light:hover, .nav-link.is-light.is-active { color: var(--color-white); }

/* 밑줄 링크 (세리프) */
.inline-link {
  font-family: var(--font-family-body); font-size: 18px; line-height: 1.35; color: var(--color-white);
  border-bottom: 1px solid var(--color-white); padding-bottom: 1px;
  transition: color var(--transition-default), border-color var(--transition-default);
}
.inline-link:hover { color: var(--color-grey-2); border-color: var(--color-grey-2); }

/* 블록 버튼 */
.btn-block {
  display: block; width: 100%; text-align: center;
  padding: var(--s24) var(--s20);
  background: var(--color-grey-1--a50); color: var(--color-white);
  font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em;
  transition: background-color var(--transition-default), color var(--transition-default);
}
.btn-block:hover, .btn-block:focus-visible { background: var(--color-grey-1); }
.btn-block.is-small { display: inline-block; width: auto; padding: var(--s10) var(--s12); background: var(--color-grey-1--a25); }
.btn-block.is-small:hover { background: var(--color-grey-1--a50); }

/* ==========================================================================
   레이아웃 — 고정 선, 패턴, 페이지 전환
   ========================================================================== */
.rail-line {
  position: fixed; top: 0; bottom: 0; z-index: 30;
  left: calc(var(--margin) + var(--sidebar-width));
  width: var(--border-width); background: var(--color-white--a25);
  pointer-events: none;
}
.curtain {
  position: fixed; inset: 0; z-index: 90; background: var(--color-black);
  opacity: 1; pointer-events: none;
  transition: opacity 0.6s var(--ease-out-cubic);
}
.curtain.is-hidden { opacity: 0; }
.curtain.is-entering { opacity: 1; pointer-events: auto; transition-duration: 0.35s; }

/* 섹션 레이아웃: 사이드바(2열+거터) + 메인 */
.split { display: flex; align-items: flex-start; padding: 0 var(--margin); }
.split__aside { flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); padding-left: var(--s20); align-self: stretch; position: relative; }
.split__body { flex: 1 1 auto; min-width: 0; padding-left: var(--gutter); }

/* 메인 10열 그리드 */
.grid-10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ==========================================================================
   헤더
   ========================================================================== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
/* 스크롤 시 아래 콘텐츠와 겹쳐 보이지 않도록 헤더 배경(반투명 + 블러) 표시 */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(55, 53, 47, 0.92);
  -webkit-backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter);
  border-bottom: var(--border-width) solid var(--color-white--a10);
  opacity: 0; transition: opacity var(--transition-default);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform 0.35s var(--ease-out-cubic); }
.site-header__bar { display: flex; align-items: center; height: var(--header-height); padding-left: var(--margin); gap: var(--gutter); }
.site-logo { display: flex; align-items: center; width: var(--sidebar-width); flex: none; height: 100%; padding-left: var(--s20); color: var(--color-white); transition: color var(--transition-default); }
.site-logo:hover { color: var(--color-grey-2); }
.site-nav { display: flex; align-items: center; gap: var(--gutter); }
.site-nav .nav-link { opacity: 0; animation: navIn 0.6s var(--ease-out-cubic) forwards; }
.site-nav .nav-link:nth-child(1) { animation-delay: 0.3s; }
.site-nav .nav-link:nth-child(2) { animation-delay: 0.42s; }
.site-nav .nav-link:nth-child(3) { animation-delay: 0.54s; }
.site-nav .nav-link:nth-child(4) { animation-delay: 0.66s; }
@keyframes navIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.site-menu { display: none; }
.site-modals { margin-left: auto; margin-right: calc(2 * var(--column)); display: flex; align-items: stretch; height: 100%; position: relative; }
.news-popover__toggle {
  display: inline-flex; align-items: center; gap: var(--s5);
  padding: var(--s24) var(--s40) var(--s24) var(--s20);
  background: var(--color-grey-1--a15); color: var(--color-white);
  font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2; text-transform: uppercase;
  transition: color var(--transition-default), background-color var(--transition-default);
  opacity: 0; animation: navIn 0.6s var(--ease-out-cubic) 0.8s forwards;
}
.news-popover__toggle:hover, .news-popover__toggle[aria-expanded="true"] { background: var(--color-grey-1--a25); }
.news-popover__toggle__badge { color: var(--color-grey-1); font-weight: 400; }
.news-popover { position: relative; height: 100%; }
.news-popover__positioner {
  position: absolute; top: 100%; right: 0; width: min(380px, calc(100vw - 40px));
  background: rgba(55, 53, 47, 0.92); backdrop-filter: var(--backdrop-filter); -webkit-backdrop-filter: var(--backdrop-filter);
  border: 1px solid var(--color-white--a25); padding: var(--s20);
  opacity: 0; transform: translateY(-6px); transition: opacity var(--transition-default), transform var(--transition-default);
}
.news-popover__positioner:not([hidden]) { opacity: 1; transform: none; }
.news-popover__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s16); }
.news-popover__item a { display: grid; gap: var(--s4); color: var(--color-grey-2); transition: color var(--transition-default); }
.news-popover__item a:hover { color: var(--color-white); }
.news-popover__date { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; color: var(--color-grey-1); }
.news-popover__text { font-size: 18px; line-height: 1.25; }
.news-popover__contact { display: inline-block; margin-top: var(--s20); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; text-transform: uppercase; color: var(--color-white); transition: color var(--transition-default); }
.news-popover__contact:hover { color: var(--color-grey-2); }

/* 모바일 메뉴 */
.drawer { position: fixed; inset: var(--header-height) 0 0 0; z-index: 35; background: var(--color-black); }
.drawer__panel { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--s40) var(--margin) 0 calc(var(--margin) + var(--sidebar-width) + var(--s10)); }
.drawer__line { position: absolute; top: 0; bottom: 0; left: calc(var(--margin) + var(--sidebar-width)); width: 1px; background: var(--color-white--a25); }
.drawer__nav { display: grid; gap: var(--s12); }
.drawer__nav .nav-link { font-size: 18px; }
.brandmark--drawer__panel { margin-top: auto; margin-left: calc(-1 * (var(--sidebar-width) + var(--s10))); }

/* ==========================================================================
   미디어 — 이미지(플레이스홀더 → 페이드인), 영상, 오버레이
   ========================================================================== */
.media-image { position: relative; overflow: hidden; background: var(--color-grey-1--a15); }
.media-image.layout-cover { width: 100%; height: 100%; aspect-ratio: var(--aspect, auto); }
.media-image__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--transition-media-load); }
.media-image__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-grey-1--a25), var(--color-black--a25)); opacity: 1; transition: opacity var(--transition-media-load) 0.6s; }
.media-image.is-loaded .media-image__img { opacity: 1; }
.media-image.is-loaded .media-image__placeholder { opacity: 0; }
.intro__media > .media-shade::after { background: linear-gradient(180deg, rgba(40, 38, 33, 0.35) 0%, rgba(40, 38, 33, 0.15) 45%, rgba(40, 38, 33, 0.6) 100%); }
.media-shade { position: relative; }
.media-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 38, 33, 0.7) 0%, rgba(40, 38, 33, 0.5) 45%, rgba(40, 38, 33, 0.82) 100%); pointer-events: none; z-index: 1; }

/* ==========================================================================
   섹션 — 히어로 (홈)
   ========================================================================== */
.sec-intro { position: relative; padding: calc(var(--scroll-padding-top)) var(--margin) 0; }
.intro__logo { margin-left: calc(var(--sidebar-width) + var(--gutter)); color: var(--color-white); margin-bottom: var(--s100); }
.intro__mark { width: clamp(64px, 8.33vw, 120px); height: auto; }
.intro__heading { margin-left: calc(var(--sidebar-width) + var(--gutter)); max-width: calc(8 * var(--column) + 7 * var(--gutter)); margin-bottom: var(--s100); }
.intro__heading .type-display { font-size: 30px; }
.intro__content { margin-left: calc(var(--sidebar-width) + var(--gutter)); }
.intro__media { position: relative; aspect-ratio: var(--aspect-landscape); overflow: hidden; background: var(--color-pureblack); }
.intro__media > .media-shade { position: absolute; inset: 0; }
.intro__earth { position: absolute; inset: -10% 0; height: auto; will-change: transform; }
.intro__text { margin-top: var(--s50); max-width: calc(4 * var(--column) + 3 * var(--gutter)); padding-bottom: var(--s100); }

/* ==========================================================================
   섹션 — 히어로 풀 (ORBIT / 채용)
   ========================================================================== */
.sec-cover { position: relative; height: 190vh; min-height: 900px; }
.cover__media { position: absolute; inset: 0; overflow: hidden; background: var(--color-pureblack); }
.cover__media::after { background: linear-gradient(180deg, rgba(30, 29, 25, 0.82) 0%, rgba(30, 29, 25, 0.72) 50%, rgba(30, 29, 25, 0.9) 100%); }
.cover__image { position: absolute; inset: -10% 0; height: auto; will-change: transform; }
.cover__content { position: relative; z-index: 2; height: 100%; padding: 0 var(--margin); }
.cover__track { height: calc(100% - 360px); }
.cover__sticky { position: sticky; top: var(--scroll-padding-top); padding-left: calc(var(--sidebar-width) + var(--gutter)); }
.cover__sticky h1 { max-width: calc(6 * var(--column) + 5 * var(--gutter)); }
.cover__text { position: absolute; left: var(--main-start); bottom: var(--s32); width: calc(3 * var(--column) + 2 * var(--gutter)); }

/* ==========================================================================
   섹션 — 히어로 텍스트 (인사이트)
   ========================================================================== */
.sec-lead { padding: var(--scroll-padding-top) 0 var(--s100); }
.sec-lead .type-display { max-width: calc(7 * var(--column) + 6 * var(--gutter)); }

/* ==========================================================================
   섹션 — 대형 텍스트
   ========================================================================== */
.sec-text-large { padding: var(--s100) 0; }
.sec-text-large .type-title { max-width: calc(10 * var(--column) + 9 * var(--gutter)); }
.split-content { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); }
.split-content__heading { grid-column: 1 / span 4; }
.split-content__text { grid-column: 5 / span 6; display: grid; gap: var(--s32); }
.split-content__text p { color: var(--color-grey-1); }
.split-content__cta { padding-top: var(--s16); }

/* 대형 텍스트 리빌 (홈 "문제") — 스티키 교차 페이드 */
.sec-statements { padding: var(--s100) 0 0; }
.sec-statements .statements { position: relative; height: calc(var(--items) * 60vh + 30vh); }
.statements__stage { position: sticky; top: var(--scroll-padding-top); height: 60vh; }
.statement { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; will-change: opacity; }
.statement .type-title { max-width: calc(6 * var(--column) + 5 * var(--gutter)); }

/* ==========================================================================
   섹션 — 풀 카드 (홈) : 스티키 스택
   ========================================================================== */
.sec-stack { position: relative; }
.stack__track { position: absolute; top: 0; bottom: 0; left: calc(var(--margin) + var(--s20)); z-index: 5; pointer-events: none; }
.stack__kicker { position: sticky; top: var(--scroll-padding-top); }
.stack-card { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; background: var(--color-black); }
.stack-card__inner { position: relative; height: 100%; }
.stack-card__media { position: absolute; inset: 0; background: var(--color-pureblack); }
.stack-card__media .media-image { position: absolute; inset: -10% 0; height: 120%; will-change: transform; }
.stack-card__content { position: relative; z-index: 2; height: 100%; padding-top: var(--scroll-padding-top); }
.stack-card__text { max-width: calc(7 * var(--column) + 6 * var(--gutter)); }
.stack-card__desc { margin-top: var(--s50); max-width: calc(4 * var(--column) + 3 * var(--gutter)); color: var(--color-grey-2); }
.stack-card__cta { margin-top: var(--s40); }
.stack-card__overlay { position: absolute; inset: 0; z-index: 3; background: var(--color-black); opacity: 0; pointer-events: none; }

/* ==========================================================================
   섹션 — 기본 카드 (ORBIT)
   ========================================================================== */
.sec-features { padding: var(--s100) 0; }
.features__heading .type-title { max-width: calc(9 * var(--column) + 8 * var(--gutter)); }
.feature-list { margin-top: var(--s200); display: grid; gap: var(--s100); }
.feature { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); border-top: var(--border-width) solid var(--color-white--a25); }
.feature__text { grid-column: 1 / span 4; padding-top: var(--s24); }
.feature__desc { margin-top: var(--s24); font-size: 18px; line-height: 1.25; color: var(--color-grey-1); max-width: 440px; }
.feature__media { grid-column: 7 / span 4; }
.feature__media .media-image { aspect-ratio: 4 / 5; }

/* ==========================================================================
   섹션 — 문의
   ========================================================================== */
.sec-inquiry { padding: var(--s200) 0; }
.sec-inquiry__content { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); }
.sec-inquiry__heading { grid-column: 1 / span 5; }
.sec-inquiry__form { grid-column: 6 / span 4; }

.contact-form { display: grid; gap: var(--s24); }
.form-field { display: grid; gap: var(--s8); }
.form-field label { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--color-grey-1); }
.form-field input, .form-field textarea {
  width: 100%; background: transparent; border: var(--border-width) solid var(--color-grey-1--a50); border-radius: 0;
  color: var(--color-white); font-family: var(--font-family-body); font-size: 18px; line-height: 1.35; padding: var(--s10) var(--s12);
  transition: border-color var(--transition-default);
}
.form-field input { height: 42px; }
.form-field textarea { min-height: 200px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-grey-2); }
.form-field ::placeholder { color: var(--color-grey-1--a50); }
.contact-form__submit { margin-top: var(--s8); padding: var(--s20); }
.contact-form__success { font-size: 18px; color: var(--color-white); }
.contact-form.is-sent .form-field, .contact-form.is-sent .contact-form__submit { display: none; }

/* ==========================================================================
   섹션 — 채용 포지션
   ========================================================================== */
.sec-roles { position: relative; padding: var(--s100) 0 0; }
.roles__media-mobile { display: none; }
.roles__content { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); }
.roles__header { grid-column: 1 / span 4; }
.roles__media { margin-top: var(--s100); width: calc(2 * var(--column) + var(--gutter)); position: sticky; top: var(--scroll-padding-top); }
.roles__list { grid-column: 5 / span 6; display: grid; gap: var(--s100); }
.roles-group { display: grid; gap: var(--s40); }
.roles-group__name { margin-bottom: var(--s24); }
.role { border-top: var(--border-width) solid var(--color-white--a25); padding-top: var(--s24); display: grid; gap: var(--s12); }
.role__meta { display: flex; gap: var(--s12); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.2; text-transform: uppercase; }
.role__type { color: var(--color-white); }
.role__location { color: var(--color-grey-1); }
.role__title { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-white); }
.role__desc { font-size: 18px; line-height: 1.25; color: var(--color-grey-1); max-width: 560px; }
.role__apply { justify-self: start; margin-top: var(--s8); }

/* ==========================================================================
   섹션 — 아티클 목록
   ========================================================================== */
.sec-posts { padding-bottom: var(--s100); }
.article-categories { position: sticky; top: var(--scroll-padding-top); }
.article-categories__list { display: grid; gap: var(--s12); }
.article-categories__selector { display: none; }
.article-categories__selector select { width: 100%; background: var(--color-grey-1--a15); border: 1px solid var(--color-white--a25); color: var(--color-white); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; text-transform: uppercase; padding: var(--s10) var(--s12); }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s100); }
.post-card { display: block; color: inherit; }
.post-card__media { position: relative; aspect-ratio: var(--aspect-portrait); overflow: hidden; }
.post-card__media .media-image { position: absolute; inset: 0; transition: transform 0.6s var(--ease-out-cubic); }
.post-card:hover .post-card__media .media-image { transform: scale(1.03); }
.post-card__tag { position: absolute; top: 0; left: 0; z-index: 2; background: rgba(152, 148, 134, 0.7); color: var(--color-white); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; text-transform: uppercase; padding: var(--s12) var(--s16); }
.post-card__body { padding-top: var(--s24); display: grid; gap: var(--s12); justify-items: start; }
.post-card__category { color: var(--kicker-color); }
.post-card__title { color: var(--color-grey-1); transition: color var(--transition-default); }
.post-card:hover .post-card__title { color: var(--color-white); }
.post-card__excerpt { color: var(--color-white); }
.post-card .inline-link { margin-top: var(--s8); }

.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s100); }
.pagination__arrow { color: var(--color-grey-1); font-size: 24px; line-height: 1; transition: color var(--transition-default); }
.pagination__arrow:hover { color: var(--color-white); }
.pagination__arrow.is-disabled { color: var(--color-grey-1--a25); pointer-events: none; }
.pagination__numbers { display: flex; gap: var(--s8); }
.pagination__number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; color: var(--color-white); background: var(--color-grey-1--a25); }
.pagination__number.is-current { background: var(--color-grey-1--a50); }

/* ==========================================================================
   섹션 — 아티클 상세
   ========================================================================== */
.sec-post-head { padding: var(--scroll-padding-top) 0 var(--s100); }
.post-head__media { position: sticky; top: var(--scroll-padding-top); }
.post-head__content { max-width: calc(8 * var(--column) + 7 * var(--gutter)); display: grid; gap: var(--s24); }
.post-head__details { display: flex; align-items: center; gap: var(--s16); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; text-transform: uppercase; }
.post-head__date { color: var(--color-grey-1); }
.post-head__details-mobile { display: none; }
.post-head__subheading { font-size: 18px; line-height: 1.3; color: var(--color-white); max-width: calc(5 * var(--column) + 4 * var(--gutter)); }

.sec-post-body { padding: 0 var(--margin) var(--s100); }
.post-body { margin-left: calc(var(--sidebar-width) + var(--gutter)); max-width: calc(5 * var(--column) + 4 * var(--gutter)); color: var(--color-grey-2); }
.post-body p { margin-bottom: var(--s32); }
.post-body p:last-child { margin-bottom: 0; }
.post-body strong { color: var(--color-white); font-weight: 600; }
.post-body a { color: var(--color-white); border-bottom: 1px solid var(--color-white); transition: color var(--transition-default), border-color var(--transition-default); }
.post-body a:hover { color: var(--color-grey-2); border-color: var(--color-grey-2); }
.post-body sup { font-size: 18px; line-height: 0; color: var(--color-grey-1); }
.post-body__heading { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-grey-1); margin: var(--s50) 0 var(--s24); }
.post-body__note { font-size: 18px; color: var(--color-grey-1); padding-top: var(--s24); }
.post-body__ctas { display: grid; gap: var(--s20); margin: var(--s50) 0; }

.sec-related { padding: var(--s200) 0 var(--s100); }
.related__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s40); margin-bottom: var(--s100); }
.related__header .type-display { max-width: calc(6 * var(--column) + 5 * var(--gutter)); }
.related { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--margin)); padding-right: var(--margin); }
.related::-webkit-scrollbar { display: none; }
.related__track { display: flex; gap: var(--gutter); }
.related__track .post-card { flex: 0 0 calc((100% - 2 * var(--gutter)) / 3); scroll-snap-align: start; }

/* ==========================================================================
   섹션 — 리치 텍스트 (개인정보/약관/정책)
   ========================================================================== */
.sec-document { padding: var(--scroll-padding-top) 0 var(--s100); }
.document__nav { position: sticky; top: var(--scroll-padding-top); display: grid; gap: var(--s24); }
.document__nav .kicker.is-sticky { position: static; }
.document__links { display: grid; gap: var(--s12); }
.document__content { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); }
.document__heading { grid-column: 1 / span 4; }
.document__heading .type-display { position: sticky; top: var(--scroll-padding-top); }
.doc-sections { grid-column: 5 / span 6; color: var(--color-grey-2); }
.document-section { margin-bottom: var(--s64); }
.document-section p { margin-bottom: var(--s24); }
.document-section__heading { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-grey-1); margin-bottom: var(--s24); }
.document-section a { color: var(--color-white); border-bottom: 1px solid var(--color-white); }

/* ==========================================================================
   푸터
   ========================================================================== */
.site-footer { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 943px; padding-top: var(--s200); overflow: hidden; }
.site-footer .split { position: relative; z-index: 1; }
.site-footer__text { display: grid; gap: var(--s12); justify-items: start; }
.site-footer__copyright { font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; line-height: 1.25; text-transform: uppercase; color: var(--color-grey-2); margin-bottom: var(--s12); }
.site-footer__socials { display: grid; gap: var(--s12); }
.site-footer__credit { margin-top: var(--s50); font-family: var(--font-family-heading); font-size: 18px; font-weight: 500; text-transform: uppercase; color: var(--color-grey-1); transition: color var(--transition-default); }
.site-footer__credit:hover { color: var(--color-white); }
.site-footer__nav { display: grid; gap: var(--s12); justify-items: start; }
.brandmark { width: 100%; padding: 0 var(--margin); color: var(--color-grey-1); line-height: 0; }
.brandmark--footer { margin-top: auto; padding-top: var(--s200); position: relative; z-index: 1; }
.brandmark__svg { width: 100%; height: auto; display: block; overflow: visible; }
.brandmark__text { font-family: var(--font-family-heading); font-weight: 400; font-size: 200px; letter-spacing: -0.04em; fill: currentColor; }

/* ==========================================================================
   등장 모션 (IntersectionObserver)
   ========================================================================== */
[data-reveal-in] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out-cubic), transform 0.8s var(--ease-out-cubic); }
[data-reveal-in].is-in { opacity: 1; transform: none; }
.reveal-text .reveal-char { color: var(--color-grey-1); transition: color 0.25s var(--ease-out-cubic); }
.reveal-text .reveal-char.is-lit, .reveal-text .is-lit .reveal-char { color: var(--color-white); }
.post-card, .feature, .role, .document-section { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out-cubic), transform 0.8s var(--ease-out-cubic); }
.post-card.is-in, .feature.is-in, .role.is-in, .document-section.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-in], .post-card, .feature, .role, .document-section { opacity: 1; transform: none; transition: none; }
  .curtain { transition: none; }
}

/* ==========================================================================
   반응형 — 태블릿 (≤1024) / 모바일 (≤768)  ※ analysis 에 명시 브레이크포인트 없음 (MISSING.md)
   ========================================================================== */
@media (max-width: 1024px) {
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__track .post-card { flex-basis: calc((100% - var(--gutter)) / 2); }
  .feature__text { grid-column: 1 / span 5; }
  .feature__media { grid-column: 6 / span 5; }
  .sec-inquiry__heading { grid-column: 1 / span 10; margin-bottom: var(--s64); }
  .sec-inquiry__form { grid-column: 1 / span 7; }
  .roles__header { grid-column: 1 / span 10; display: flex; align-items: flex-end; gap: var(--s40); margin-bottom: var(--s64); }
  .roles__media { margin-top: 0; position: static; }
  .roles__list { grid-column: 1 / span 10; }
  .split-content__heading { grid-column: 1 / span 10; margin-bottom: var(--s40); }
  .split-content__text { grid-column: 1 / span 9; }
  .document__heading { grid-column: 1 / span 10; margin-bottom: var(--s40); }
  .document__heading .type-display { position: static; }
  .doc-sections { grid-column: 1 / span 9; }
  .site-modals { margin-right: var(--column); }
}

@media (max-width: 768px) {
  :root { --scroll-padding-top: calc(var(--header-height) + 60px); }
  body { font-size: 18px; }

  /* 헤더 */
  .site-nav { display: none; }
  .site-menu { display: flex; align-items: center; padding-left: var(--s10); }
  .site-modals { margin-right: 0; }
  .news-popover__toggle { padding: var(--s24) var(--s20); }
  .site-logo { padding-left: 0; justify-content: center; }
  .site-header__bar { gap: var(--s10); }

  /* 레이아웃: 사이드바 접힘 — 모든 콘텐츠가 선 오른쪽에서 시작 */
  .split { flex-direction: column; padding-left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); padding-right: var(--margin); }
  .split__aside { flex: none; width: auto; padding-left: 0; margin-bottom: var(--s40); }
  .split__body { width: 100%; padding-left: 0; }
  .kicker.is-sticky, .article-categories, .document__nav, .post-head__media, .roles__media { position: static; }

  .sec-intro { padding-left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); padding-right: var(--margin); }
  .intro__logo, .intro__heading, .intro__content { margin-left: 0; }
  .intro__logo { margin-bottom: var(--s64); }
  .intro__heading { margin-bottom: var(--s64); }
  .intro__text { max-width: none; margin-top: var(--s32); padding-bottom: var(--s64); }
  .sec-cover { height: 160vh; min-height: 720px; }
  .cover__track { height: calc(100% - 420px); }
  .cover__content { padding-left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); }
  .cover__sticky { padding-left: 0; }
  .cover__text { left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); right: var(--margin); width: auto; }

  /* 텍스트 · 카드 */
  .sec-text-large { padding: var(--s64) 0; }
  .sec-statements .statements { height: calc(var(--items) * 50vh + 30vh); }
  .statements__stage { height: 50vh; }
  .stack-card__content { padding-top: calc(var(--header-height) + 120px); }
  .stack__track { left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); }
  .stack__kicker { top: calc(var(--header-height) + 40px); }
  .stack-card__text { max-width: none; padding-right: var(--margin); }
  .stack-card__desc { max-width: none; }
  .stack-card { min-height: 560px; }
  .feature { grid-template-columns: 1fr; row-gap: var(--s32); }
  .feature__text, .feature__media { grid-column: 1 / -1; }
  .feature-list { margin-top: var(--s100); gap: var(--s64); }
  .features__heading .type-title { max-width: none; }

  /* 문의 */
  .sec-inquiry { padding: var(--s100) 0; }
  .sec-inquiry__content { grid-template-columns: 1fr; }
  .sec-inquiry__heading, .sec-inquiry__form { grid-column: 1 / -1; }
  .sec-inquiry__heading { margin-bottom: var(--s64); }

  /* 채용 */
  .roles__media-mobile { display: block; margin: 0 var(--margin) var(--s64) calc(var(--margin) + var(--sidebar-width) + var(--s10)); }
  .roles__media { display: none; }
  .roles__header { margin-bottom: var(--s40); }
  .roles__list { gap: var(--s64); }
  .split-content { grid-template-columns: 1fr; }
  .split-content__heading, .split-content__text { grid-column: 1 / -1; }

  /* 아티클 */
  .article-categories__list { display: none; }
  .article-categories__selector { display: block; }
  .posts-grid { grid-template-columns: 1fr; row-gap: var(--s64); }
  .related__track .post-card { flex-basis: 85%; }
  .related__header { flex-direction: column; align-items: flex-start; margin-bottom: var(--s64); }
  .sec-related { padding-top: var(--s100); }
  .post-head__media { margin-bottom: var(--s40); }
  .post-head__details-desktop { display: none; }
  .post-head__details-mobile { display: block; }
  .sec-post-body { padding-left: calc(var(--margin) + var(--sidebar-width) + var(--s10)); }
  .post-body { margin-left: 0; max-width: none; }
  .document__content { grid-template-columns: 1fr; }
  .document__heading, .doc-sections { grid-column: 1 / -1; }

  /* 푸터 */
  .site-footer { min-height: 0; padding-top: var(--s100); }
  .site-footer .split__aside { margin-bottom: var(--s100); }
  .brandmark--footer { padding-top: var(--s100); }
}

@media (max-width: 480px) {
  :root { --text-heading-l: 40px; --text-heading-m: 32px; --text-heading-s: 26px; }
}