/* ===== 하우스옥션 공통 스타일 ===== */
:root {
  --deep-violet: #2E0D6C;
  --medium-blue: #4E4AF5;
  --bright-cyan: #73C2FB;
  --warm-violet: #C996FF;
  --surface: #0A0618;
  --surface-2: #120D2A;
  --surface-3: #1C1540;
  --border: rgba(78,74,245,0.18);
  --text-primary: #F0EDFF;
  --text-secondary: rgba(240,237,255,0.6);
  --text-muted: rgba(240,237,255,0.35);
  --success: #22D3A0;
  --warning: #F5A623;
  --danger: #F5546A;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: var(--surface);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ── 공통 NAV ── */
nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(10,6,24,0.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 40px; height: 100%;
  display: flex; align-items: center; gap: 4px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px;
  color: var(--text-primary); text-decoration: none;
  flex-shrink: 0; margin-right: 28px;
}
.nav-logo svg { width: 32px; height: 32px; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 7px 13px; border-radius: 8px;
  transition: all 0.18s; white-space: nowrap;
}
.nav-links a:hover { color: var(--text-primary); background: var(--surface-3); }
.nav-links a.active { color: var(--text-primary); font-weight: 700; background: var(--surface-3); }
.nav-spacer { flex: 1; }
.nav-case {
  display: flex; align-items: center;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color 0.2s; margin-right: 12px;
}
.nav-case:focus-within { border-color: var(--medium-blue); }
.nav-case input {
  background: none; border: none; color: var(--text-primary);
  padding: 8px 14px; font-size: 13px; font-family: inherit;
  width: 220px; outline: none;
}
.nav-case input::placeholder { color: var(--text-muted); }
.nav-case-btn {
  background: var(--medium-blue); border: none; color: white;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.18s; white-space: nowrap;
}
.nav-case-btn:hover { background: #3d39e0; }
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-nav-ghost {
  background: none; border: 1px solid var(--border);
  color: var(--text-secondary); padding: 7px 18px;
  border-radius: 50px; font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-nav-ghost:hover { border-color: var(--medium-blue); color: var(--text-primary); }

/* ── 공통 버튼 ── */
.btn-primary {
  background: linear-gradient(135deg, var(--medium-blue), var(--warm-violet));
  border: none; color: white; padding: 10px 22px;
  border-radius: 50px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-ghost-sm {
  background: none; border: 1px solid var(--border);
  color: var(--text-secondary); padding: 8px 16px;
  border-radius: 50px; font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.btn-ghost-sm:hover { border-color: var(--medium-blue); color: var(--text-primary); }

/* ── 공통 카드 ── */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── 배지 ── */
.badge { font-size: 12px; font-weight: 700; border-radius: 50px; padding: 4px 12px; }
.badge-new { background: var(--medium-blue); color: white; }
.badge-type { background: rgba(78,74,245,0.15); border: 1px solid rgba(78,74,245,0.3); color: var(--bright-cyan); }
.badge-fail { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.3); color: var(--warning); }

/* ── 배경 글로우 ── */
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 70% 5%, rgba(78,74,245,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 5% 90%, rgba(46,13,108,0.18) 0%, transparent 60%);
}

/* ── 공통 애니메이션 ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim { animation: fadeUp 0.4s ease both; }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.10s; }
.d3 { animation-delay: 0.15s; }

/* ── 반응형 공통 ── */
@media (max-width: 768px) {
  .nav-inner { padding: 0 20px; }
  .nav-case { display: none; }
  .nav-links { display: none; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
  .nav-logo { font-size: 17px; }
  .nav-logo svg { width: 26px; height: 26px; }
}