/* ============================================================
 * pages/home.css — 홈(/) 전용
 *   .hero · .featured · .work · .section-header · .text-neon-cyan
 *   + P8: hero__scene (Three.js) · 글리치/corner/scroll 제거
 *
 *   공통 site- 셸 (.site-nav / .site-main / .site-footer / .blob-stage /
 *   .visually-hidden / body overflow-x) 은 P7.5에서 assets/css/layout.css
 *   로 이동했다.
 * ============================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.hero { padding-block: clamp(5rem, 14vw, 9rem); }
.hero__inner { max-width: 880px; }
.hero__eyebrow {
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}
.hero__title {
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  margin-bottom: var(--space-6);
}
.hero__title-line { display: block; }
.hero__name {
  background: linear-gradient(120deg, #e6ecf2, #cfd6e0 60%, #e6ecf2);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero__lede {
  font-size: var(--fs-lg); color: var(--text-secondary);
  line-height: var(--lh-relaxed); max-width: 56ch;
  margin-bottom: var(--space-7);
}
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.text-neon-cyan {
  color: var(--text-primary);
}

/* ── Section Header ─────────────────────────────────────── */
.section-header { margin-bottom: var(--space-7); }
.section-header__eyebrow {
  font-size: var(--fs-xs); letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--text-muted);
  font-weight: var(--fw-bold); margin-bottom: var(--space-2);
}
.section-header__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* ── Featured ───────────────────────────────────────────── */
.featured__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.featured__item { display: flex; }
.featured__card {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; padding: 0; overflow: hidden;
  text-decoration: none; color: inherit;
  border-radius: var(--radius-md);
}
.featured__media {
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--color-bg-deep);
}
.featured__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.featured__card:hover .featured__media img { transform: scale(1.05); }
.featured__placeholder {
  width: 100%; height: 100%;
  background: #0a0a0e;
}
.featured__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  background: #0d0d12;
}
.featured__title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  margin-top: var(--space-1);
  color: var(--text-primary);
}
.featured__summary {
  color: var(--text-muted); font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Work (grid + filters) ──────────────────────────────── */
.work__filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.work__filter-count {
  margin-left: var(--space-1);
  font-size: 10px; opacity: 0.45;
}
.work__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.work__card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  text-decoration: none; color: inherit; height: 100%;
  border-radius: var(--radius-md);
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition:
    border-color var(--dur-base) var(--ease),
    transform    var(--dur-base) var(--ease),
    box-shadow   var(--dur-base) var(--ease);
}
.work__card:hover {
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-4px);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.60);
}
.work__media {
  aspect-ratio: 16 / 9; overflow: hidden;
  background: #090909;
}
.work__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.work__card:hover .work__media img { transform: scale(1.05); }
.work__placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: #090909;
  color: rgba(255, 255, 255, 0.07);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black); letter-spacing: var(--ls-tight);
}
.work__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.work__meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.work__tech {
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%; opacity: 0.5;
}
.work__title {
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.work__summary {
  color: var(--text-muted); font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.work__empty {
  text-align: center; padding: var(--space-9) var(--space-6);
}
.work__empty-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.work__empty-hint {
  color: var(--text-muted); font-size: var(--fs-sm);
}

/* === P7 IMPACT — hero/card 보강 (append) =========================== */

/* hero 풀페이지 (100svh) + vertical center — P7.4: nav overlay 위해 site-main padding 상쇄 */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--nav-height));
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  background:
    radial-gradient(70% 50% at 15% 20%, rgba(0, 180, 220, 0.06), transparent 65%),
    radial-gradient(60% 50% at 85% 25%, rgba(140, 30, 100, 0.05), transparent 65%),
    var(--color-bg);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* P8: Three.js scene canvas — hero 배경 */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* hero canvas는 data-motion과 무관하게 표시 — Three.js 자체 motionOk로 제어 */

/* tilt 사용을 위한 positioning */
.work__card,
.featured__card {
  position: relative;
}

/* tilt 켜졌을 때 이미지 scale 보강 */
[data-motion="on"] .work__card.is-tilting .work__media img,
[data-motion="on"] .featured__card.is-tilting .featured__media img {
  transform: scale(1.08);
}

/* ── Mobile Visual Scene (Three.js 로드 전 fallback) ──────── */
.hero__mobile-scene { display: none; }
/* Three.js canvas가 활성화되면 CSS orbs 숨김 */
.hero__scene:not([style*="display: none"]) ~ .hero__mobile-scene { display: none !important; }

@media (max-width: 720px) {
  .hero {
    min-height: 100svh;
    padding-block: clamp(4rem, 12vw, 6rem);
    background:
      radial-gradient(55% 45% at 90% 25%, rgba(0, 160, 210, 0.05), transparent 60%),
      radial-gradient(45% 40% at 10% 80%, rgba(120, 40, 150, 0.04), transparent 60%),
      var(--color-bg);
  }

  .hero__mobile-scene {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* 크롬 구체 공통 */
  .morb {
    position: absolute;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(200, 210, 225, 0.06) 28%,
        rgba(8, 8, 12, 0.88) 62%,
        rgba(3, 3, 6, 0.97) 100%
      );
    border: 1px solid rgba(255, 255, 255, 0.08);
    will-change: transform;
  }

  /* 메인 큰 구체 — 우상단 */
  .morb--a {
    width: 200px; height: 200px;
    top: 6%; right: -55px;
    animation: morb-drift-a 9s ease-in-out infinite alternate;
  }

  /* 중간 구체 — 좌중단 */
  .morb--b {
    width: 88px; height: 88px;
    top: 52%; left: -22px;
    animation: morb-drift-b 8s ease-in-out 1.2s infinite alternate;
  }

  /* 중간 구체 — 우하단 */
  .morb--c {
    width: 72px; height: 72px;
    bottom: 14%; right: 6%;
    animation: morb-drift-b 7s ease-in-out 2.5s infinite alternate;
  }

  /* 작은 구체 — 좌상단 */
  .morb--d {
    width: 42px; height: 42px;
    top: 22%; left: 10%;
    animation: morb-drift-a 6s ease-in-out 0.8s infinite alternate;
  }

  /* 작은 구체 — 우중단 */
  .morb--e {
    width: 32px; height: 32px;
    bottom: 32%; right: 22%;
    animation: morb-drift-b 5.5s ease-in-out 3.5s infinite alternate;
  }

  @keyframes morb-drift-a {
    0%   { transform: translate(0,    0   ); }
    40%  { transform: translate(8px,  -16px); }
    100% { transform: translate(-6px, 10px ); }
  }
  @keyframes morb-drift-b {
    0%   { transform: translate(0,    0   ); }
    40%  { transform: translate(-10px, 12px); }
    100% { transform: translate(6px, -10px); }
  }
}

/* reduced-motion — 모바일 씬 숨김 */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .hero__mobile-scene { display: none; }
}

.br-desktop { display: none; }
@media (min-width: 720px) { .br-desktop { display: block; } }

/* ── Section Header 확장 ─────────────────────────────────── */
.section-header__title { line-height: 1.2; }
.contact-header__sub {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  max-width: 60ch;
  margin-top: var(--space-4);
}

/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
.services__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.service-card:hover {
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-3px);
}

.service-card__num {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: rgba(255,255,255,0.06);
  line-height: 1;
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  pointer-events: none;
}

.service-card__body { display: flex; flex-direction: column; gap: var(--space-2); }

.service-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.service-card__en {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
}

.service-card__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-2);
}

.service-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
}
.service-card__tags li {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  letter-spacing: var(--ls-wide);
}

/* ══════════════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════════════ */
.process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
  position: relative;
}

/* 데스크탑 연결선 */
@media (min-width: 900px) {
  .process__steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(var(--space-9) + 4px);
    right: calc(var(--space-9) + 4px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
    pointer-events: none;
  }
}

.process__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.process__num {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  color: rgba(255,255,255,0.15);
  line-height: 1;
  display: block;
}

.process__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.process__desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* ══════════════════════════════════════════════════════════
   BEFORE & AFTER
══════════════════════════════════════════════════════════ */
.ba__wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
  background: #0d0d12;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

@media (max-width: 720px) {
  .ba__wrap {
    grid-template-columns: 1fr;
  }
  .ba__divider { display: none; }
}

.ba__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}

.ba__col--before .ba__label { color: rgba(255,100,100,0.6); }
.ba__col--after  .ba__label { color: rgba(100,220,150,0.6); }

.ba__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.ba__list li {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  padding-left: var(--space-5);
  position: relative;
  color: var(--text-secondary);
}

.ba__col--before .ba__list li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: rgba(255,100,100,0.5);
  font-weight: var(--fw-bold);
}

.ba__col--after .ba__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(100,220,150,0.6);
  font-weight: var(--fw-bold);
}

.ba__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  color: rgba(255,255,255,0.12);
  align-self: center;
  padding-top: var(--space-9);
}

/* ══════════════════════════════════════════════════════════
   WHO WE WORK WITH
══════════════════════════════════════════════════════════ */
.fit__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 720px) {
  .fit__wrap { grid-template-columns: 1fr; }
}

.fit__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-6);
}

.fit__cta { margin-top: auto; }

.fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.fit__item {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-left: var(--space-5);
  position: relative;
}
.fit__item:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.fit__item::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.2);
}

/* ── Contact 인포 확장 ─────────────────────────────────── */
.contact-info__note {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.contact-info__note p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.contact-info__sub {
  margin-top: var(--space-3) !important;
  font-style: italic;
  opacity: 0.5;
}