/* =============================================================================
   에이플론 · base.css — 리셋 + 기본 요소 + 레이아웃/유틸리티
   ========================================================================== */

/* ---- 리셋 --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip: 가로 넘침만 잘라냄(스크롤 컨테이너 생성 X) → position:sticky 보존 */
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--blue-200); color: var(--navy-900); }

/* ---- 타이포 기본 -------------------------------------------------------- */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { text-wrap: pretty; }

strong { font-weight: var(--fw-bold); }

/* 숫자 강조용 */
.num { font-family: var(--font-num); font-feature-settings: "tnum"; }

/* ---- 레이아웃 컨테이너 -------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--soft  { background: var(--color-bg-soft); }
.section--muted { background: var(--color-bg-muted); }
.section--navy  { background: var(--grad-navy); color: var(--color-text-on-navy); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* ---- 섹션 헤더(공통) ---------------------------------------------------- */
.section-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: clamp(36px, 4vw, 60px); }
.section-head .eyebrow { margin-bottom: var(--space-4); }
.section-head h2 { margin-bottom: var(--space-4); }
.section-head p { color: var(--color-text-soft); font-size: var(--fs-lg); }
.section--navy .section-head p { color: var(--color-text-on-navy); }

/* ---- 유틸리티 ----------------------------------------------------------- */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-gradient {
  background: linear-gradient(120deg, var(--blue-500), var(--cyan-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-muted { color: var(--color-text-muted); }

.stack > * + * { margin-top: var(--gap, var(--space-4)); }

.grid { display: grid; gap: var(--gap, var(--space-6)); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.hidden { display: none !important; }
.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;
}

.no-scroll { overflow: hidden; }

/* 데스크탑/모바일 표시 토글 */
.only-desktop { display: revert; }
.only-mobile  { display: none; }

@media (max-width: 900px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cols-2, .cols-4 { grid-template-columns: 1fr; }
  .only-desktop { display: none; }
  .only-mobile  { display: revert; }
}

/* ---- 스크롤 등장 애니메이션 (main.js가 .is-visible 부여) ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ---- 방향별·플립 스크롤 등장 (main.js가 .in-view 토글, 재진입 시 재생) ---- */
/* 등장은 keyframes(animation)로 처리 → animation-delay로 스태거, fill:backwards로 등장 후
   transform 잠금을 풀어 hover/transition을 그대로 보존(지연 없음). 방향은 --ai-from 변수로 주입. */
[data-animate-in] {
  opacity: 0;
  will-change: transform, opacity;
  --ai-from: none;
}
[data-animate-in="up"]     { --ai-from: translate3d(0, 48px, 0); }
[data-animate-in="down"]   { --ai-from: translate3d(0, -48px, 0); }
[data-animate-in="left"]   { --ai-from: translate3d(-48px, 0, 0); }
[data-animate-in="right"]  { --ai-from: translate3d(48px, 0, 0); }
[data-animate-in="zoomIn"] { --ai-from: scale(.85); }
[data-animate-in="zoomOut"]{ --ai-from: scale(1.15); }
[data-animate-in].in-view {
  opacity: 1;
  animation: aiIn var(--dur-slow) cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes aiIn {
  from { opacity: 0; transform: var(--ai-from, none); }
  to   { opacity: 1; transform: none; }
}
/* 플립(3D) — 위 aiIn 대신 전용 keyframes로 덮어씀 */
[data-animate-in^="flip"]  { backface-visibility: visible; }
[data-animate-in^="flip"].in-view { animation-duration: .85s; }
[data-animate-in="flipInX"].in-view { animation-name: flipInX; }
[data-animate-in="flipInY"].in-view { animation-name: flipInY; }
@keyframes flipInX {
  from { transform: perspective(800px) rotate3d(1,0,0,68deg); opacity: 0; }
  60%  { transform: perspective(800px) rotate3d(1,0,0,-12deg); opacity: 1; }
  to   { transform: perspective(800px) rotate3d(1,0,0,0deg); }
}
@keyframes flipInY {
  from { transform: perspective(800px) rotate3d(0,1,0,68deg); opacity: 0; }
  60%  { transform: perspective(800px) rotate3d(0,1,0,-12deg); opacity: 1; }
  to   { transform: perspective(800px) rotate3d(0,1,0,0deg); }
}

/* ---- 헤딩 단어별 마스크 라이즈 (main.js가 단어를 .tr-word>.tr-inner로 분할) -- */
/* 분할 전(=JS 미실행)에는 .tr-inner가 없어 헤딩이 그대로 보임 → FOUC/실패 안전 */
[data-text-reveal] .tr-word {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: .12em; margin-bottom: -.12em;   /* 받침/디센더 잘림 방지(레이아웃 영향 X) */
}
[data-text-reveal] .tr-inner {
  display: inline-block; transform: translateY(112%);
  transition: transform .62s cubic-bezier(.2,.85,.25,1);
  will-change: transform;
}
[data-text-reveal].in-view .tr-inner { transform: none; }

/* 변형 ① blur — 마스크 없이 흐림+페이드로 떠오름(다크/펀치 섹션용) */
[data-text-reveal="blur"] .tr-word { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
[data-text-reveal="blur"] .tr-inner {
  transform: translateY(.28em); opacity: 0; filter: blur(10px);
  transition: transform .7s var(--ease-out), opacity .7s ease, filter .7s ease;
}
[data-text-reveal="blur"].in-view .tr-inner { transform: none; opacity: 1; filter: blur(0); }

/* 변형 ② zoom — 단어가 작게→원래 크기로 팝(친근/펀치 섹션용) */
[data-text-reveal="zoom"] .tr-word { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
[data-text-reveal="zoom"] .tr-inner {
  transform: scale(.5); opacity: 0; transform-origin: center bottom;
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
[data-text-reveal="zoom"].in-view .tr-inner { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-text-reveal] .tr-inner { transform: none !important; transition: none !important; opacity: 1 !important; filter: none !important; }
  [data-animate-in] { opacity: 1; }
  [data-animate-in].in-view { animation: none; }
}