/* ================================================================
   THE UNIVERSE — Cosmic Design System v4
   Based on COSMICA Agency Design Reference
   ================================================================ */

/* ── 대형 화면 중앙 정렬 (Google 스타일) ── */
:root {
  --max-layout: 1200px;

  /* 간격 */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px;
  --sp-xl:24px; --sp-2xl:32px; --sp-3xl:48px;

  /* 라운딩 */
  --rd-sm:4px; --rd-md:8px; --rd-lg:12px; --rd-xl:16px; --rd-pill:20px;

  /* 상태 컬러 */
  --c-success:#30d158; --c-warning:#ffd60a; --c-error:#ff453a; --c-info:#2997ff;

  /* 텍스트 컬러 */
  --c-text:#e8e8f0; --c-muted:#86868b; --c-dim:#9892B0; --c-subtle:#5A5478;

  /* z-index */
  --z-sidebar:40; --z-banner:50; --z-nav:200; --z-toast:9999;

  /* 팀 컬러 */
  --tc-basecamp:#f87171; --tc-plan:#60a5fa; --tc-dev:#4ade80;
  --tc-design:#c084fc; --tc-validation:#f87171; --tc-library:#60a5fa; --tc-patent:#fbbf24; --tc-store:#fbbf24; --tc-history:#22d3ee;

  /* 트랜지션 */
  --tr-fast:.15s; --tr-normal:.2s; --tr-slow:.3s;
}

@media (min-width: 1441px) {
  /* 사이드바: 좌측 고정 → 중앙 레이아웃 기준 좌측 */
  .design-sidebar, .lib-sidebar, .compare-sidebar,
  .dev-sidebar, .pt-sidebar, .vd-sidebar, .pl-sidebar, .tm-sidebar,
  aside[style*="position:fixed"] {
    left: calc((100vw - var(--max-layout)) / 2) !important;
  }

  /* 콘텐츠 영역: 중앙 배치 (max-width는 페이지 원래값 유지) */
  .design-main, .lib-main, .compare-main,
  .dev-main, .pt-content, .pj-main-wrap, .vd-main, .pl-main, .tm-main,
  div[style*="margin-left:200px"] {
    margin-left: calc(200px + (100vw - var(--max-layout)) / 2) !important;
  }

  /* 푸터 */
  .site-footer {
    margin-left: calc(200px + (100vw - var(--max-layout)) / 2) !important;
  }

  /* CONFIDENTIAL 배너 중앙 */
  div[style*="position:fixed"][style*="top:56px"] {
    left: calc((100vw - var(--max-layout)) / 2) !important;
    right: calc((100vw - var(--max-layout)) / 2) !important;
  }
}

/* ── 히어로 디자인 시스템 ── */
.tm-hero { padding:0; margin-bottom:32px; }
.tm-hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600;
  color:var(--team-color, #60a5fa);
  background:color-mix(in srgb, var(--team-color, #60a5fa) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--team-color, #60a5fa) 15%, transparent);
  padding:5px 14px; border-radius:var(--rd-pill); margin-bottom:20px;
}
.tm-hero-title {
  font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:900;
  letter-spacing:-1.5px; line-height:1.15; margin-bottom:16px; color:var(--c-text);
}
.tm-hero-accent {
  background:linear-gradient(135deg, var(--team-color, #60a5fa), #e8e8f0);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.tm-hero-desc { font-size:15px; color:var(--c-dim); line-height:1.7; max-width:560px; }
.tm-hero-divider { height:1px; background:color-mix(in srgb, var(--team-color, rgba(255,255,255,.08)) 25%, transparent); margin:32px 0; }

/* ── 유틸리티 클래스 ── */
.t-xs { font-size:9px; } .t-sm { font-size:10px; } .t-md { font-size:11px; }
.t-lg { font-size:12px; } .t-xl { font-size:13px; }
.c-muted { color:var(--c-muted); } .c-dim { color:var(--c-dim); }
.c-subtle { color:var(--c-subtle); } .c-text { color:var(--c-text); }
.c-success { color:var(--c-success); } .c-error { color:var(--c-error); }
.c-info { color:var(--c-info); } .c-warning { color:var(--c-warning); }
.mono { font-family:'JetBrains Mono',monospace; }
.divider { height:1px; background:rgba(255,255,255,.06); }

/* ── 공통 팀 페이지 스타일 (기획/개발/디자인/검증) ── */
.tm-sidebar {
  position:fixed; top:56px; left:0; width:200px; height:calc(100vh - 56px);
  background:rgba(0,0,0,.95); border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto; padding:24px 0; z-index:40;
}
.tm-main { margin-left:200px; padding:80px 48px 48px; }
.tm-inner { max-width:900px; }
.tm-sb-label { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#5A5478; padding:16px 20px 8px; }
.tm-sb-back { display:block; font-size:13px; font-weight:600; color:#f87171; padding:7px 20px; border-left:2px solid #f87171; text-decoration:none; background:rgba(248,113,113,.04); }
.tm-sb-link { display:block; padding:7px 20px; font-size:13px; font-weight:500; color:#9892B0; text-decoration:none; border-left:2px solid transparent; transition:all .15s; cursor:pointer; }
.tm-sb-link:hover { color:#e8e8f0; border-left-color:rgba(255,255,255,.15); }
.tm-sb-link.active { font-weight:600; color:var(--team-color, #60a5fa); border-left-color:var(--team-color, #60a5fa); background:color-mix(in srgb, var(--team-color, #60a5fa) 4%, transparent); }
.tm-sb-sep { height:1px; background:rgba(255,255,255,.06); margin:12px 20px; }
.tm-st { font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#86868b; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.tm-st .dot { width:6px; height:6px; border-radius:50%; }
.tm-card { background:rgba(17,17,21,.6); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px; margin-bottom:12px; transition:all .2s; }
.tm-card:hover { border-color:rgba(255,255,255,.15); }
.tm-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.tm-stat { text-align:center; padding:16px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(17,17,21,.6); }
.tm-stat-value { font-size:24px; font-weight:800; font-family:'Space Grotesk',sans-serif; }
.tm-stat-label { font-size:9px; color:#86868b; margin-top:4px; font-weight:600; }
.tm-agent-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tm-agent-card { padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.06); background:rgba(17,17,21,.4); }
.tm-agent-tag { font-size:10px; font-weight:800; font-family:'JetBrains Mono',monospace; margin-bottom:6px; }
.tm-agent-stat { font-size:9px; color:#86868b; line-height:1.7; }
.tm-doc { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.06); margin-bottom:8px; text-decoration:none; color:inherit; transition:all .2s; }
.tm-doc:hover { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.02); transform:translateX(2px); }
.tm-doc-agent { font-size:9px; font-weight:700; font-family:'JetBrains Mono',monospace; padding:2px 6px; border-radius:4px; flex-shrink:0; }
.tm-doc-title { font-size:11px; font-weight:600; margin-bottom:2px; }
.tm-doc-desc { font-size:9px; color:#5A5478; line-height:1.5; }
.tm-doc-file { font-size:8px; font-family:'JetBrains Mono',monospace; color:#86868b; margin-top:3px; }
.tm-badge { font-size:8px; font-weight:700; padding:2px 7px; border-radius:4px; }
.tm-badge-done { background:rgba(48,209,88,.12); color:#30d158; }
.tm-badge-active { background:rgba(41,151,255,.12); color:#2997ff; }
.tm-badge-pending { background:rgba(134,134,139,.08); color:#86868b; }
.tm-sprint-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.06); margin-bottom:6px; cursor:pointer; transition:all .2s; }
.tm-sprint-row:hover { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.02); }
.tm-sprint-row.selected { border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.tm-hist-row { display:grid; grid-template-columns:80px 1fr 80px 100px; gap:8px; align-items:center; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.04); margin-bottom:4px; font-size:10px; }
.tm-pipe-col { border-radius:10px; border:1px solid rgba(255,255,255,.06); padding:10px; min-height:180px; }
.tm-item { padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,.06); margin-bottom:6px; cursor:pointer; transition:all .2s; background:rgba(17,17,21,.4); }
.tm-item:hover { border-color:rgba(255,255,255,.15); transform:translateY(-1px); }
.tm-form-input { width:100%; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:rgba(17,17,21,.6); color:#e8e8f0; font-size:12px; font-family:inherit; outline:none; }
.tm-form-input:focus { border-color:rgba(255,255,255,.3); }
.tm-form-btn { padding:8px 20px; border-radius:8px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); color:#e8e8f0; font-size:11px; font-weight:700; cursor:pointer; }
.tm-form-btn:hover { background:rgba(255,255,255,.1); }
@media (max-width:960px) {
  .tm-sidebar { display:none; }
  .tm-main { margin-left:0 !important; }
  .tm-stat-grid { grid-template-columns:repeat(2,1fr); }
  .tm-agent-grid { grid-template-columns:1fr; }
}

/* 기본 = 다크 모드 (The Universe는 우주 테마) */
:root {
  --background: #000000;
  --foreground: #e8e8f0;
  --card: rgba(15, 15, 30, 0.6);
  --border: rgba(255, 255, 255, 0.1);
  --muted-foreground: #9892B0;
  --accent: rgba(255,255,255,0.05);
  --primary: #e8e8f0;
  --primary-foreground: #0a0a1a;
  --space-bg: #000000;
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 라이트 모드 */
.light-mode {
  --background: #f5f3ee;
  --foreground: #0a0a1a;
  --card: rgba(255, 255, 255, 0.8);
  --border: rgba(0, 0, 0, 0.08);
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --primary: #030213;
  --primary-foreground: #fff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #000000;
  color: #e8e8f0;
  font-family: var(--fb);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ── Space Background ── */
.space-bg {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none;
  transition: opacity 500ms;
}
.light-mode .space-bg { opacity: 0; }
.space-bg .base { position: absolute; inset: 0; background: #000000; }

/* Nebula layers */
.nebula {
  position: absolute; border-radius: 50%;
}
.nebula-1 {
  top: -20%; left: -10%; width: 60%; height: 60%; opacity: .3;
  background: radial-gradient(circle, rgba(139,92,246,.4) 0%, rgba(139,92,246,.1) 40%, transparent 70%);
  filter: blur(60px);
}
.nebula-2 {
  top: 10%; right: -15%; width: 55%; height: 55%; opacity: .25;
  background: radial-gradient(circle, rgba(168,85,247,.35) 0%, rgba(168,85,247,.1) 40%, transparent 70%);
  filter: blur(70px);
}
.nebula-3 {
  bottom: -10%; left: 20%; width: 50%; height: 50%; opacity: .2;
  background: radial-gradient(circle, rgba(99,102,241,.3) 0%, rgba(99,102,241,.08) 40%, transparent 70%);
  filter: blur(80px);
}

/* Planet */
.planet {
  position: absolute; top: 15%; right: 8%;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(147,51,234,.25), rgba(99,102,241,.2), rgba(79,70,229,.15));
  box-shadow: 0 0 80px rgba(139,92,246,.15), inset -20px -20px 60px rgba(0,0,0,.3);
  opacity: 0.6;
}
.planet-rings {
  position: absolute; top: 15%; right: 8%;
  width: 280px; height: 280px;
  transform: rotateX(75deg) translateZ(0);
  transform-style: preserve-3d;
}
.ring-1 {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(168,85,247,.12);
  box-shadow: 0 0 15px rgba(168,85,247,.1);
  transform: scale(1.8);
}
.ring-2 {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(139,92,246,.08);
  box-shadow: 0 0 10px rgba(139,92,246,.08);
  transform: scale(2.1);
}

/* Stars — JS로 생성/소멸 관리, CSS는 기본 스타일만 */
.star {
  position: absolute; border-radius: 50%; will-change: opacity, background, box-shadow;
}

/* ── Navbar ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(max(48px, (100% - var(--max-layout)) / 2));
  background: transparent;
  transition: all 300ms;
}
.site-nav.scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav-brand {
  font-family: var(--fh); font-size: 18px; font-weight: 700;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, #a78bfa, #c4b5fd, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  min-width: 105px;
}
.site-nav-links {
  margin-left: auto;
  display: flex; gap: 18px; align-items: center;
}
@media (min-width: 1441px) {
  .site-nav-links { gap: 20px; }
}
.site-nav-links a {
  font-size: 13px; font-weight: 500;
  color: rgba(232, 232, 240, 0.7);
  transition: color 200ms;
}
.site-nav-links a:hover { color: #e8e8f0; }
.site-nav-links a.active { color: var(--team-color, #e8e8f0); }
.site-nav-cta {
  font-size: 14px; font-weight: 600;
  color: #0a0a1a !important;
  background: #e8e8f0;
  padding: 10px 24px; border-radius: 8px;
  transition: all 200ms;
}
.site-nav-cta:hover { opacity: .9; transform: scale(1.02); }
/* ── Page Hero (통일 상단 카드) ── */
.page-hero {
  background: rgba(15, 15, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 32px;
}
.page-hero-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 4px 12px; border-radius: 6px;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.page-hero-badge-internal {
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.2);
}
.page-hero-badge-confidential {
  background: rgba(240, 192, 64, 0.1);
  color: #f0c040;
  border: 1px solid rgba(240, 192, 64, 0.2);
}
.page-hero-badge-public {
  background: rgba(34, 211, 153, 0.1);
  color: #34D399;
  border: 1px solid rgba(34, 211, 153, 0.2);
}
.page-hero-title {
  font-family: var(--fh);
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  color: #e8e8f0;
}
.page-hero-desc {
  font-size: 13px;
  color: rgba(232, 232, 240, 0.5);
  line-height: 1.6;
}
.page-hero-stats {
  display: flex; gap: 24px; margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.page-hero-stat {
  text-align: center;
}
.page-hero-stat-num {
  font-family: var(--fh);
  font-size: 20px; font-weight: 700;
  color: #e8e8f0;
}
.page-hero-stat-label {
  font-size: 9px;
  color: rgba(232, 232, 240, 0.4);
  letter-spacing: 0.5px;
}

/* Nav badges */
.site-nav-badge {
  font-size: 7px; font-weight: 700; padding: 2px 5px; border-radius: 3px;
  letter-spacing: .3px; vertical-align: middle;
}
.badge-internal { background: rgba(248,113,113,.08); color: #f87171; border: 1px solid rgba(248,113,113,.15); }
.badge-confidential { background: rgba(240,192,64,.08); color: #f0c040; border: 1px solid rgba(240,192,64,.15); }

/* Nav group — INTERNAL 묶음 */
.nav-group {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 12px 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
  background: rgba(255,255,255,.02);
  position: relative;
}
.nav-group .nav-group-label {
  font-size: 7px; font-weight: 700; letter-spacing: .5px;
  color: #f87171; opacity: .7;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(248,113,113,.06);
  border: 1px solid rgba(248,113,113,.1);
  white-space: nowrap;
}
.nav-group a {
  font-size: 13px; font-weight: 500;
  color: rgba(232,232,240,.55);
  transition: color 200ms;
  text-decoration: none;
}
.nav-group a:hover { color: #e8e8f0; }
.nav-group a.active { color: var(--team-color, #e8e8f0); }

/* Nav divider | */
.nav-divider {
  color: rgba(255,255,255,.15);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
  user-select: none;
}
.nav-divider::after {
  content: '|';
}
/* theme-btn 삭제됨 */

/* ── Container ── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
@media (min-width: 640px) { .container { padding: 0 32px; } }
@media (min-width: 1024px) { .container { padding: 0 48px; } }

/* ── Section ── */
.section { padding: 160px 0; position: relative; }
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; margin-bottom: 16px; display: block;
  color: rgba(232, 232, 240, 0.5);
}
.section-title {
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  letter-spacing: -1px; line-height: 1.15;
  color: #e8e8f0;
}

/* ── Hero Badge ── */
.hero-badge {
  display: inline-block; padding: 8px 16px; border-radius: 50px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
}

/* ── Hero Title ── */
.hero-title {
  font-family: var(--fh); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -2px; line-height: 1.12;
}
.gradient-text {
  background: linear-gradient(to right, #a78bfa, #c4b5fd, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fb); font-size: 16px; font-weight: 600;
  color: #0a0a1a; background: #e8e8f0;
  padding: 16px 32px; border-radius: 16px; border: none; cursor: pointer;
  transition: all 200ms;
}
.btn-primary:hover { transform: scale(1.02); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--fb); font-size: 16px; font-weight: 600;
  color: #e8e8f0; background: transparent;
  padding: 16px 32px; border-radius: 16px;
  border: 1px solid var(--border); cursor: pointer;
  transition: all 200ms;
}
.btn-secondary:hover { background: var(--accent); }

/* ── Service Card ── */
.service-card {
  position: relative;
  padding: 32px;
  border-radius: 16px;
  background: rgba(15, 15, 30, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 6s cubic-bezier(.22,1,.36,1), transform 6s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s, background .4s;
  cursor: pointer;
  will-change: transform;
}
.service-card:hover {
  border-color: rgba(139,92,246,.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,92,246,.15);
}
.service-card .top-border {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 16px 16px 0 0;
  opacity: 0; transition: opacity 300ms;
}
.service-card:hover .top-border { opacity: 1; }
.service-card-icon {
  width: 24px; height: 24px; margin-bottom: 24px;
  color: #a78bfa;
}
.service-card-title {
  font-family: var(--fh); font-size: 24px; font-weight: 700;
  letter-spacing: -.5px; margin-bottom: 16px; color: #e8e8f0;
}
.service-card-desc {
  font-size: 15px; line-height: 1.7;
  color: rgba(232, 232, 240, 0.6);
}

/* ── Project Card ── */
.project-card {
  position: relative; height: 400px; border-radius: 16px;
  overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 300ms;
}
.project-card:hover {
  border-color: rgba(139,92,246,.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(139,92,246,.2);
}
.project-card-bg {
  position: absolute; inset: 0;
  backdrop-filter: blur(4px);
}
.project-card-content {
  position: absolute; inset: 0; padding: 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.project-card-category {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 8px;
  color: rgba(232, 232, 240, 0.6);
}
.project-card-title {
  font-family: var(--fh); font-size: 32px; font-weight: 700;
  letter-spacing: -1px; color: #e8e8f0;
}
.project-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  opacity: 0; transition: opacity 300ms;
}
.project-card:hover .project-card-overlay { opacity: 1; }

/* ── Grid ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 1;
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.footer-brand { font-family: var(--fh); font-size: 18px; font-weight: 700; letter-spacing: -.5px; color: #e8e8f0; }
.footer-copy { font-size: 14px; color: rgba(232, 232, 240, 0.5); }

/* ── Sidebar (project/dev/patent) ── */
.sidebar {
  position: fixed; top: 56px; left: 0; width: 200px;
  height: calc(100vh - 56px);
  background: rgba(0, 0, 0, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto; padding: 24px 0; z-index: 40;
}
.sidebar-link {
  display: block; font-size: 13px; font-weight: 500;
  color: #9892B0; padding: 8px 24px;
  border-left: 3px solid transparent; transition: all 250ms;
}
.sidebar-link:hover { color: #e8e8f0; background: rgba(255,255,255,0.03); }
.sidebar-link.active {
  color: #e8e8f0; border-left-color: #8b5cf6;
  background: rgba(139,92,246,.05);
}
.main-with-sidebar { margin-left: 200px; padding: 72px 48px 48px; position: relative; z-index: 1; }
.lib-main { padding:80px 48px 48px; }

/* ── Fade In ── */
.fade-in {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.25,.1,.25,1), transform 700ms cubic-bezier(.25,.1,.25,1);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }
/* 페이지 로드 시 즉시 보여야 하는 요소 */
.fade-in.instant { opacity: 1; transform: none; transition: none; }
.fade-in.d1 { transition-delay: 100ms; }
.fade-in.d2 { transition-delay: 200ms; }
.fade-in.d3 { transition-delay: 300ms; }

/* ── Focus ── */
:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-nav { padding: 0 16px; height: 64px; }
  .site-nav-links { gap: 16px; }
  .site-nav-links a { font-size: 13px; }
  .sidebar, .compare-sidebar, .design-sidebar,
  .lib-sidebar, .dev-sidebar { display: none !important; }
  .main-with-sidebar, .compare-main,
  .design-main, .lib-main, .dev-main { margin-left: 0 !important; padding: 88px 16px 32px; }
  .section { padding: 100px 0; }
  .project-card { height: 280px; }
}
@media (max-width: 480px) {
  .site-nav-badge { display: none; }
  .site-nav-cta { padding: 8px 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .space-bg * { animation: none !important; }
  .fade-in { opacity: 1; transform: none; }
}