/* ==========================================================================
   nFiction — base.css
   리셋 · 디자인 토큰 · 타이포그래피 · 공통 컴포넌트
   컬러는 assets/logo/*.png 픽셀에서 추출한 확정값
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* --------------------------------------------------------- Tokens */
:root {
  /* 브랜드 3색 */
  --yellow: #ffec2d;
  --ink: #141416;
  --paper: #ffffff;

  /* 파생 톤 */
  --ink-deep: #0a0a0b;
  --ink-soft: #1e1e21;
  --paper-soft: #f4f4f1;
  --yellow-deep: #e8d400;

  /* 텍스트 */
  --on-dark: #ffffff;
  --on-dark-sub: rgba(255, 255, 255, 0.62);
  --on-dark-mute: rgba(255, 255, 255, 0.38);
  --on-light: #141416;
  --on-light-sub: rgba(20, 20, 22, 0.6);
  --on-light-mute: rgba(20, 20, 22, 0.38);

  /* 라인 */
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-strong: rgba(255, 255, 255, 0.24);
  --line-light: rgba(20, 20, 22, 0.1);
  --line-light-strong: rgba(20, 20, 22, 0.22);

  /* 레이아웃 */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(96px, 12vw, 176px);
  --header-h: 84px;
  --header-h-sm: 64px;

  /* 모션 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;

  --radius: 4px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.75;
  font-weight: 400;
  color: var(--on-dark);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

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

/* --------------------------------------------------------- Typography */
.t-display {
  font-size: clamp(2.75rem, 7.4vw, 6.75rem);
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-weight: 800;
}

.t-h2 {
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  line-height: 1.14;
  letter-spacing: -0.032em;
  font-weight: 800;
}

.t-h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.t-lead {
  font-size: clamp(1.02rem, 1.3vw, 1.22rem);
  line-height: 1.72;
  font-weight: 400;
}

/* 섹션 상단 라벨 — 노란 점 + 영문 라벨 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  flex: none;
}
/* 노란 배경(.section--yellow) 위에서는 노란 점이 안 보이므로 검정으로 전환 */
.section--yellow .eyebrow::before { background: var(--ink); }

.hl { color: var(--yellow); }

/* 밑에서 위로 채워지는 노란 형광펜 강조 */
.mark {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.28em;
  padding: 0 0.06em;
}

/* --------------------------------------------------------- Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--dark {
  background: var(--ink);
  color: var(--on-dark);
}

.section--deep {
  background: var(--ink-deep);
  color: var(--on-dark);
}

.section--light {
  background: var(--paper);
  color: var(--on-light);
}

.section--soft {
  background: var(--paper-soft);
  color: var(--on-light);
}

.section--yellow {
  background: var(--yellow);
  color: var(--ink);
}

/* 밝은 배경 섹션에서의 보조 텍스트 색상 자동 전환 */
.section--light .sub,
.section--soft .sub { color: var(--on-light-sub); }
.section--dark .sub,
.section--deep .sub { color: var(--on-dark-sub); }
.section--yellow .sub { color: rgba(20, 20, 22, 0.66); }

.section-head {
  display: grid;
  gap: 22px;
  max-width: 780px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

/* --------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
  will-change: transform;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__arrow {
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* 노란 배경 위 텍스트는 반드시 --ink (흰색은 대비 1.21:1로 사용 금지) */
.btn--primary {
  background: var(--yellow);
  color: var(--ink);
}
.btn--primary:hover { background: var(--yellow-deep); }

.btn--ghost-dark {
  border-color: var(--line-dark-strong);
  color: var(--on-dark);
}
.btn--ghost-dark:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.btn--sm {
  padding: 10px 22px;
  font-size: 0.85rem;
  gap: 8px;
}

.btn--ghost-light {
  border-color: var(--line-light-strong);
  color: var(--on-light);
}
.btn--ghost-light:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}
.btn--ink:hover { background: #000; }

/* --------------------------------------------------------- Header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height 0.4s var(--ease), background-color 0.4s var(--ease),
    border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.header.is-stuck {
  height: var(--header-h-sm);
  background: rgba(20, 20, 22, 0.72);
  border-bottom-color: var(--line-dark);
}
/* backdrop-filter는 데스크톱에서만 — 조상에 걸린 backdrop-filter는 CSS 스펙상 그 안의
   position:fixed 자식(모바일 풀스크린 메뉴 .nav)의 기준을 뷰포트가 아니라 이 헤더 박스로
   바꿔버려서, 스크롤해서 헤더가 줄어든(is-stuck) 채로 메뉴를 열면 메뉴가 헤더 높이로
   눌려버리는 버그가 있었음. 모바일에서는 아예 적용하지 않아 원천 차단. */
@media (min-width: 901px) {
  .header.is-stuck {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 로고: light/dark 두 장을 겹쳐두고 opacity로 전환 → 교체 깜빡임 방지 */
.logo {
  position: relative;
  display: block;
  width: clamp(112px, 11vw, 148px);
  aspect-ratio: 3062 / 798;
  flex: none;
}
.logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s var(--ease);
}
.logo__light { opacity: 1; }
.logo__dark { opacity: 0; }

/* 밝은 배경 구간에 진입했을 때 */
.header.on-light .logo__light { opacity: 0; }
.header.on-light .logo__dark { opacity: 1; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 46px);
  margin-inline: auto;
}

.nav__link {
  position: relative;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-block: 6px;
  color: var(--on-dark-sub);
  transition: color 0.3s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover,
.nav__link.is-active {
  color: var(--on-dark);
}
.nav__link.is-active::after { transform: scaleX(1); }

/* 언어 토글 — GNB 메뉴가 아니라 우측 끝 별도 요소 */
.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: none;
}
.lang__sep { color: var(--on-dark-mute); }
.lang__btn {
  color: var(--on-dark-mute);
  transition: color 0.25s var(--ease);
}
.lang__btn:hover { color: var(--on-dark); }
.lang__btn.is-active { color: var(--yellow); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* 헤더가 밝은 섹션(흰 배경/노란 배경) 위에 있을 때 — js/nav.js가 .on-light를 토글.
   스크롤로 줄어들기(is-stuck) 전이라도 로고의 'n' 심볼이 브랜드 옐로우라 노란 배경(Contact)과
   섞여 안 보이는 문제가 있어, on-light면 스크롤 위치와 상관없이 항상 반투명 흰 레이어를 깜. */
.header.on-light {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: var(--line-light);
}
.header.on-light .nav__link { color: var(--on-light-sub); }
.header.on-light .nav__link:hover,
.header.on-light .nav__link.is-active { color: var(--on-light); }
.header.on-light .lang__btn { color: var(--on-light-mute); }
.header.on-light .lang__btn:hover,
.header.on-light .lang__btn.is-active { color: var(--on-light); }
.header.on-light .lang__sep { color: var(--on-light-mute); }
.header.on-light .nav-toggle span { background: var(--on-light); }
/* 오버레이 메뉴가 열려있는 동안엔 배경이 항상 어두워서(위 .nav.is-open .nav__link와 동일 사유)
   on-light 강제색을 다시 밝은 글자색으로 덮어써야 함 */
.header.on-light .nav-toggle.is-open span { background: var(--on-dark); }

/* --------------------------------------------------------- Footer */
.footer {
  background: var(--ink-deep);
  color: var(--on-dark);
  padding-block: clamp(64px, 7vw, 96px) 40px;
  border-top: 1px solid var(--line-dark);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}

.footer__logo {
  width: 168px;
  aspect-ratio: 3086 / 743;
  margin-bottom: 26px;
}
.footer__logo img { width: 100%; height: 100%; object-fit: contain; }

.footer__info {
  font-size: 0.88rem;
  line-height: 2;
  color: var(--on-dark-sub);
}
.footer__info dt {
  display: inline;
  color: var(--on-dark-mute);
  margin-right: 8px;
}
.footer__info dd {
  display: inline;
  margin: 0;
}
.footer__info dd::after {
  content: "";
  display: block;
}

.footer__links {
  display: flex;
  gap: 22px;
  font-size: 0.86rem;
  font-weight: 600;
}
.footer__links a { color: var(--on-dark-sub); transition: color 0.25s var(--ease); }
.footer__links a:hover { color: var(--yellow); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  font-size: 0.8rem;
  color: var(--on-dark-mute);
}

/* --------------------------------------------------------- Section Scrollspy */
/* 2026-08-12: 휠 강제 점프 방식은 폐기하고 Lenis 기반 연속 스크롤로 전환.
   .fp-section은 이제 "섹션 경계 표시"용 마커일 뿐 — 높이를 강제하지 않고 콘텐츠에 맞춰 자연스럽게 늘어남 */
.fp-section {
  position: relative;
}

/* 우측 섹션 도트 인디케이터 — JS가 .fp-section 목록으로 생성, 클릭 시 해당 섹션으로 스무스 스크롤 */
.fp-dots {
  position: fixed;
  right: clamp(18px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.fp-dots a {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--on-dark-mute);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.fp-dots a::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--on-dark);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.fp-dots a:hover::after { opacity: 1; }
.fp-dots a.is-active {
  background: var(--yellow);
  border-color: var(--yellow);
  transform: scale(1.3);
}
.fp-dots.on-light a { border-color: var(--on-light-mute); }
.fp-dots.on-light a::after { color: var(--on-light); }
.fp-dots.on-light a.is-active { background: var(--ink); border-color: var(--ink); }

@media (max-width: 860px) {
  .fp-dots { display: none; }
}

/* --------------------------------------------------------- Scroll FX */
/* Phase 4에서 scroll-fx.js가 .is-in을 붙입니다 */
[data-fx] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--fx-delay, 0s);
}
/* 오른쪽에서 슬라이드 인 — 성과(Numbers) 카드처럼 "창이 옆에서 나오는" 연출용 */
[data-fx="right"] {
  transform: translate3d(72px, 0, 0);
}
[data-fx].is-in {
  opacity: 1;
  transform: none;
}

/* 상단 스크롤 진행 바 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--yellow);
}

/* --------------------------------------------------------- Responsive */
@media (max-width: 900px) {
  :root { --header-h: 64px; --header-h-sm: 56px; }

  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    background: var(--ink-deep);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__link { font-size: 1.6rem; font-weight: 700; color: var(--on-dark); }
  /* 오버레이 메뉴는 배경이 항상 어두운(--ink-deep) 풀스크린이라, 밝은 섹션 위에서 헤더에 붙는
     .header.on-light .nav__link(명시도 3클래스, 어두운 글자색)와 명시도가 같아지는 문제가 있었음 —
     소스 순서상 이 규칙이 더 뒤에 오는 걸로 동점을 이겨서 메뉴 열렸을 때는 항상 밝은 글자색으로 강제 */
  .nav.is-open .nav__link { color: var(--on-dark); }
  .nav.is-open .nav__link:hover,
  .nav.is-open .nav__link.is-active { color: var(--yellow); }

  .nav-toggle { display: block; z-index: 1; }

  /* nav가 fixed로 빠지므로 언어 토글을 햄버거 옆으로 붙임 */
  .lang {
    margin-left: auto;
    z-index: 1;
  }

  .footer__top { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------- Custom Cursor */
/* 데스크톱(정밀 포인터)에서만 활성화 — js/cursor.js가 body에 .has-cursor를 붙임 */
.has-cursor { cursor: none; }
.has-cursor a,
.has-cursor button,
.has-cursor .pf__filter { cursor: none; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1.5px solid var(--yellow);
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease),
    background-color 0.25s var(--ease);
  opacity: 0;
  will-change: transform;
}
.cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.has-cursor .cursor { opacity: 1; }

/* 링크/버튼 위 — 원이 커지며 점이 사라짐 */
.cursor.is-hover {
  border-color: var(--yellow);
  background: rgba(255, 236, 45, 0.1);
  transform: translate3d(-100px, -100px, 0) scale(1.9);
}
.cursor.is-hover::after { transform: scale(0); opacity: 0; }

/* 밝은 섹션 위에서는 링 색을 잉크로 전환해 대비 확보 */
.cursor.on-light {
  border-color: var(--ink);
}
.cursor.on-light::after { background: var(--ink); }
.cursor.on-light.is-hover { background: rgba(20, 20, 22, 0.08); }

@media (max-width: 860px), (pointer: coarse) {
  .cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { transition: opacity 0.25s var(--ease); }
}

/* --------------------------------------------------------- A11y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-fx] { opacity: 1; transform: none; }
}