/* =====================================================================
   메인 모션 리뉴얼 (main/main.php 전용, 손으로 쓴 원본)
   - 로드 위치: main/main.php <head>에서 dark.css 다음, 마지막. 스크립트는 assets/js/main-motion.js.
   - 롤백: 이 파일과 main-motion.js만 빼면 새 섹션이 스타일·모션 없이 남으므로, 되돌릴 때는 이 리뉴얼 커밋 전체를 revert 한다.
   - dark.css 다음에 로드한다. 클래스와 변수는 모두 mx- 접두어라 기존 스타일과 겹치지 않는다.
   - 페이지 뒤의 고정 캔버스(#mx-scene)에 파티클이 그려지고, assets/js/main-motion.js가 스크롤에 맞춰 형태를 바꾼다.
   - JS·WebGL이 없거나 prefers-reduced-motion이면 모든 내용이 정적으로 그대로 보인다.
   ===================================================================== */
:root {
  --mx-bg: #05070d;
  --mx-accent: #3182f6;
  --mx-cyan: #6dd5ff;
  --mx-text: #f2f5fa;
  --mx-text-2: rgba(226, 233, 245, 0.68);
  --mx-text-3: rgba(226, 233, 245, 0.42);
  --mx-line: rgba(255, 255, 255, 0.08);
  --mx-glass: rgba(10, 14, 24, 0.58);
  --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mx-gutter: clamp(1rem, 4vw, 3.5rem);
}
/* 기존 CSS가 body에 overflow(hidden/auto)를 걸어 body가 스크롤 컨테이너가 되면 position: sticky가 멈춘다.
   clip은 가로 넘침은 그대로 잘라 내면서 스크롤 컨테이너를 만들지 않는다 */
body { overflow-x: clip; overflow-y: visible; }
/* clip을 모르는 브라우저(Safari 15 이하): html이 이미 가로 넘침을 자르므로 body는 visible로 둔다 */
@supports not (overflow: clip) { body { overflow-x: visible; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- WebGL 배경 ---------- */
#mx-scene {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.mx-no-webgl #mx-scene { display: none; }
.mx-no-webgl body {
  background:
    radial-gradient(60% 50% at 75% 30%, rgba(49, 130, 246, 0.18), transparent 70%),
    radial-gradient(40% 40% at 20% 80%, rgba(109, 213, 255, 0.08), transparent 70%),
    var(--mx-bg);
  background-attachment: fixed;
}
/* 내용 전체를 캔버스 위로 올린다 (내비는 자체 position: fixed) */
.mx-page { position: relative; z-index: 1; }

/* ---------- 새 섹션 공통 ----------
   main.php 인라인의 section { padding: 7.5rem 2rem } 를 무효로 하고, 기본 여백은 :where()로 지워 세부 규칙이 이기게 한다 */
.mx-sec { padding: 0; color: var(--mx-text); }
.mx-sec, .mx-sec * { box-sizing: border-box; }
.mx-sec :where(h1, h2, h3, p, figure) { margin: 0; }
.mx-sec :where(a) { color: inherit; text-decoration: none; }
/* common.min.css가 a:focus 외곽선을 지우므로 키보드 포커스를 다시 보이게 한다 */
.mx-sec a:focus-visible { outline: 2px solid var(--mx-cyan) !important; outline-offset: 4px; border-radius: 6px; }
/* 화면에서는 숨기고 스크린 리더만 읽는다 (올라가는 숫자의 최종 값) */
.mx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mx-wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 var(--mx-gutter); }
.mx-eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; color: var(--mx-cyan);
  display: inline-flex; align-items: center; gap: 0.625rem;
}
.mx-eyebrow::before { content: ""; width: 1.375rem; height: 1px; background: currentColor; opacity: 0.7; }
.mx-h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800; line-height: 1.18; margin-top: 1.125rem; word-break: keep-all; color: var(--mx-text); }
.mx-lead { font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.7; color: var(--mx-text-2); margin-top: 1.125rem; word-break: keep-all; }
.mx-btn-primary {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 1.125rem 1.75rem; border-radius: 999px;
  background: var(--mx-accent); color: #fff; font-weight: 700; font-size: 1.0625rem;
  box-shadow: 0 10px 40px -10px rgba(49, 130, 246, 0.8);
  transition: transform 0.3s var(--mx-ease), box-shadow 0.3s var(--mx-ease);
}
.mx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(49, 130, 246, 0.95); color: #fff; }
.mx-btn-primary .mx-arr { transition: transform 0.3s var(--mx-ease); }
.mx-btn-primary:hover .mx-arr { transform: translateX(4px); }

/* ---------- Hero (회사 메시지 + 대표 카드) ---------- */
.mx-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 6.875rem 0 5rem; }
.mx-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mx-hero h1 { font-size: inherit; font-weight: inherit; line-height: inherit; }
.mx-hero-kicker { display: block; font-size: clamp(1.375rem, 2.4vw, 2.125rem); font-weight: 600; color: var(--mx-text-2); }
.mx-hero-title {
  display: block; font-size: clamp(4rem, 10vw, 9.25rem); font-weight: 850; line-height: 1.02; margin-top: 0.375rem;
  background: linear-gradient(100deg, #fff 30%, #a9d6ff 70%, var(--mx-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mx-split-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mx-split-line .mx-ch { display: inline-block; will-change: transform; }
.mx-split-line .mx-word { display: inline-block; white-space: nowrap; }
.mx-hero-sub { margin-top: 1.625rem; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.7; color: var(--mx-text-2); word-break: keep-all; }
.mx-hero-sub span { display: block; }
.mx-hero-ctas { margin-top: 2.375rem; display: flex; gap: 0.875rem; flex-wrap: wrap; align-items: center; }
.mx-hero-ghost { font-size: 0.9375rem; color: var(--mx-text-2); padding: 0.75rem 0.375rem; border-bottom: 1px solid var(--mx-line); }
.mx-hero-ghost:hover { color: var(--mx-text); }

.mx-founder-card {
  background: var(--mx-glass); border: 1px solid var(--mx-line); border-radius: 1.5rem;
  padding: 1.625rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.mx-founder-top { display: flex; gap: 1.125rem; align-items: center; }
.mx-founder-photo { width: 5.75rem; height: 6.5rem; border-radius: 1rem; overflow: hidden; flex: none; background: #0d1422; }
.mx-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-founder-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; color: var(--mx-cyan); }
.mx-founder-name { font-size: 1.625rem; font-weight: 800; margin-top: 0.375rem; }
.mx-founder-role { font-size: 0.875rem; color: var(--mx-text-2); margin-top: 0.25rem; }
.mx-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 1.375rem; }
.mx-chip {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.875rem; border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--mx-line);
}
.mx-chip b { font-size: 0.9375rem; font-weight: 750; }
.mx-chip small { font-size: 0.75rem; color: var(--mx-text-3); }
.mx-chip .mx-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--mx-cyan); box-shadow: 0 0 10px var(--mx-cyan); margin-bottom: 0.25rem; }

.mx-scroll-hint {
  position: absolute; left: 50%; bottom: 1.625rem; transform: translateX(-50%);
  font-size: 0.75rem; letter-spacing: 0.2em; color: var(--mx-text-3);
  display: flex; flex-direction: column; align-items: center; gap: 0.625rem;
}
.mx-scroll-hint i { width: 1px; height: 2.625rem; background: linear-gradient(var(--mx-cyan), transparent); animation: mxHint 2.2s var(--mx-ease) infinite; transform-origin: top; }
@keyframes mxHint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 숫자 띠 ---------- */
.mx-stats { padding: 2.5rem 0 7.5rem; }
.mx-stats-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--mx-line); border-bottom: 1px solid var(--mx-line);
  background: rgba(5, 7, 13, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mx-stat { padding: 2.125rem 1.5rem; position: relative; }
.mx-stat + .mx-stat::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 1px; background: var(--mx-line); }
.mx-stat-num { font-size: clamp(2.125rem, 3.6vw, 3.25rem); font-weight: 850; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-stat-num em { font-style: normal; color: var(--mx-cyan); }
.mx-stat-num small { font-size: 0.42em; font-weight: 700; color: var(--mx-text-2); margin-right: 0.375rem; vertical-align: 0.5em; }
.mx-stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: var(--mx-text-2); line-height: 1.5; word-break: keep-all; }

/* ---------- 대표 스토리 / 퀀트 ---------- */
.mx-story, .mx-quant { padding: 3.75rem 0; }
.mx-section-head { padding: 2.5rem 0 0; }
.mx-story-col { width: min(32.5rem, 46%); }
.mx-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; transition: opacity 0.6s var(--mx-ease); }
/* 지금 단계가 아니면 흐리게 (JS가 준비를 마쳐 html.mx-motion이 붙었을 때만) */
.mx-motion .mx-step:not(.is-active) { opacity: 0.22; }
.mx-step-tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; color: var(--mx-text-3); display: flex; gap: 0.75rem; align-items: center; }
.mx-step.is-active .mx-step-tag, html:not(.mx-motion) .mx-step-tag { color: var(--mx-cyan); }
.mx-step-tag .mx-bar { width: 2.5rem; height: 2px; background: var(--mx-line); position: relative; overflow: hidden; }
.mx-step-tag .mx-bar::after { content: ""; position: absolute; inset: 0; background: var(--mx-cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--mx-ease); }
.mx-step.is-active .mx-step-tag .mx-bar::after { transform: scaleX(1); }
.mx-step :is(h2, h3) { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 800; line-height: 1.25; margin-top: 1.125rem; word-break: keep-all; color: var(--mx-text); }
.mx-step p { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.75; color: var(--mx-text-2); margin-top: 1rem; word-break: keep-all; }
.mx-step-logo { height: 2rem; width: auto; margin-top: 1.375rem; display: block; align-self: flex-start; }
.mx-step-logo--sk { height: 3.25rem; margin-top: 1.125rem; }
.mx-step .mx-step-extra { margin-top: 0.875rem; padding-left: 0.875rem; border-left: 2px solid rgba(245, 128, 37, 0.6); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); }
.mx-step :is(h2, h3) .mx-hl { color: var(--mx-cyan); font-variant-numeric: tabular-nums; }
.mx-em-cyan { color: var(--mx-cyan); font-weight: 800; }
.mx-step-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.mx-step-meta span { font-size: 0.8125rem; padding: 0.4375rem 0.75rem; border-radius: 999px; border: 1px solid var(--mx-line); color: var(--mx-text-2); background: rgba(5, 7, 13, 0.5); }

/* 02 저서: 왼쪽 열(글 + 책)을 고정하고, 오른쪽은 파티클이 맡는다 */
.mx-step--feature { min-height: 150vh; display: block; }
.mx-feature-inner { position: sticky; top: max(5.625rem, calc(50vh - 18.125rem)); width: min(37.5rem, 50%); }
.mx-feature-inner h3 em { font-style: normal; color: #ff9b7f; }
.mx-book-row { display: flex; gap: 1.625rem; align-items: center; margin-top: 1.625rem; }
.mx-book-float { position: relative; flex: none; animation: mxBookFloat 6s ease-in-out infinite; perspective: 1000px; }
@keyframes mxBookFloat { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.mx-book-img {
  width: clamp(10.625rem, 17vw, 15rem); height: auto; display: block;
  filter: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(240, 115, 89, 0.16));
}
.mx-book-badge {
  position: absolute; bottom: 6%; left: -14%; z-index: 2;
  width: 4.875rem; height: 4.875rem; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 30% 30%, #ff9d80, #e2583d); color: #fff;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.2; box-shadow: 0 14px 34px -10px rgba(226, 88, 61, 0.8);
}
.mx-book-badge b { display: block; font-size: 1.375rem; line-height: 1; margin-top: 2px; }
.mx-book-meta p:first-child { margin-top: 0; }
.mx-book-link { display: inline-flex; gap: 0.375rem; margin-top: 1.125rem; font-size: 0.9375rem; font-weight: 600; color: #ff9b7f; border-bottom: 1px solid rgba(255, 155, 127, 0.4); padding-bottom: 0.1875rem; }
.mx-sec .mx-book-link { color: #ff9b7f; }

/* 04 CES 사진: 단계에 들어서면 테두리가 열리며 드러난다 */
.mx-ces-photo {
  position: relative; margin-top: 1.375rem; width: 100%; max-width: 28.75rem; aspect-ratio: 1 / 1; border-radius: 1.125rem; overflow: hidden;
  border: 1px solid var(--mx-line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.mx-ces-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-motion .mx-ces-photo { clip-path: inset(10% 6% 10% 6% round 18px); transition: clip-path 1.2s var(--mx-ease); }
.mx-motion .mx-ces-photo img { transform: scale(1.14); transition: transform 1.6s var(--mx-ease); }
.mx-ces-photo figcaption {
  position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.4375rem 0.75rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(5, 7, 13, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mx-motion .mx-step.is-active .mx-ces-photo { clip-path: inset(0 0 0 0 round 18px); }
.mx-motion .mx-step.is-active .mx-ces-photo img { transform: scale(1); }

/* 퀀트 엔진 + 알파 전략 */
.mx-step--quant { min-height: 100vh; }
.mx-step p.mx-quant-lead { margin-top: 1.25rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.5; color: var(--mx-text); }
.mx-flow { display: flex; flex-wrap: wrap; row-gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.mx-flow li {
  position: relative; padding: 0.375rem 0.75rem; border: 1px solid rgba(109, 213, 255, 0.28); border-radius: 999px;
  background: rgba(109, 213, 255, 0.06); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--mx-cyan);
}
.mx-flow li + li { margin-left: 1.625rem; }
.mx-flow li + li::before { content: "→"; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); letter-spacing: 0; color: var(--mx-text-3); }
.mx-step p.mx-quant-close { margin-top: 1.25rem; font-weight: 600; color: var(--mx-text); }
.mx-quant-stat { margin-top: 1.625rem; padding: 1.5rem; border-radius: 1.125rem; border: 1px solid var(--mx-line); background: var(--mx-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mx-quant-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--mx-text-2); margin-bottom: 0.625rem; }
.mx-quant-stat .mx-big { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 850; color: var(--mx-cyan); font-variant-numeric: tabular-nums; line-height: 1; }
.mx-quant-stat .mx-cap { margin-top: 0.625rem; font-size: 0.9375rem; color: var(--mx-text-2); }
.mx-quant-stat .mx-disc { margin-top: 0.875rem; font-size: 0.75rem; line-height: 1.6; color: var(--mx-text-3); border-top: 1px solid var(--mx-line); padding-top: 0.75rem; }

/* ---------- 마지막 CTA: 화면 정중앙에 고정, 파티클 링이 둘레를 감싼다 ---------- */
.mx-cta { height: 200vh; position: relative; }
.mx-cta-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 var(--mx-gutter); }
.mx-cta-inner { max-width: 40rem; }
.mx-cta .mx-h2 { margin-top: 1rem; font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.3; }
.mx-cta .mx-btn-primary { margin-top: 1.875rem; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .mx-hero { padding-top: 6rem; }
  .mx-hero-grid { grid-template-columns: 1fr; }
  .mx-stats-row { grid-template-columns: repeat(2, 1fr); }
  .mx-stat:nth-child(odd)::before { display: none; }
  .mx-stat:last-child { grid-column: 1 / -1; }
  .mx-stat:last-child::before { display: none; }
  .mx-stat { border-bottom: 1px solid var(--mx-line); padding: 1.625rem 1.125rem; }
  .mx-story-col { width: 100%; }
  .mx-step--feature { min-height: auto; padding: 8vh 0; }
  .mx-feature-inner { position: static; width: 100%; }
  .mx-book-row { flex-direction: column; align-items: flex-start; }
  .mx-book-img { width: min(62vw, 16.25rem); }
  .mx-book-badge { left: -6%; }
  .mx-step { min-height: 72vh; }
  .mx-step :is(h2, h3), .mx-step p, .mx-section-head { text-shadow: 0 2px 18px rgba(5, 7, 13, 0.9); }
}
@media (max-width: 480px) {
  .mx-chip { padding: 0.75rem; }
  .mx-chip b { font-size: 0.875rem; }
  .mx-founder-card { padding: 1.25rem; }
  .mx-scroll-hint { display: none; }
}

/* JS가 모션을 맡을 때만 초기 숨김. reduced-motion·JS 실패 시엔 그대로 보인다 */
.mx-motion [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .mx-scroll-hint i { animation: none; }
  .mx-step-tag .mx-bar::after { transition: none; }
  .mx-book-float { animation: none; }
}