/* ─── 검색연구소 디자인 시스템 ─── */
/* Signature: Deep Navy (#102a43) + Cyan (#06b6d4) */

/* ── Scroll Snap (landing page) ── */
.snap-start { scroll-snap-align: start; }
#app.snap-landing { scroll-snap-type: y mandatory; }

/* ── Header ── */
.sl-header {
  background: rgba(16, 42, 67, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Spinner */
.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid #d9e2ec;
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: spin 0.55s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Fade */
.fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero ── */
.hero-dark {
  background: linear-gradient(160deg, #0a1929 0%, #102a43 50%, #163a5f 100%);
  position: relative;
  overflow: hidden;
}
.hero-dark::before {
  content: '';
  position: absolute;
  top: -40%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(6,182,212,0.1) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-dark::after {
  content: '';
  position: absolute;
  bottom: -25%; left: -8%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(14,184,166,0.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.01em;
}
.badge-urgent  { background: #fef2f2; color: #dc2626; }
.badge-high    { background: #fff7ed; color: #ea580c; }
.badge-monitor { background: #fffbeb; color: #d97706; }
.badge-maintain { background: #ecfdf5; color: #059669; }

/* ── Metric card ── */
.metric-card {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  padding: 20px 22px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.metric-card:hover {
  border-color: #bcccdc;
  box-shadow: 0 2px 8px rgba(16,42,67,0.06);
}

/* ── Score bar ── */
.score-bar {
  height: 5px; border-radius: 3px;
  background: #e8eef4; overflow: hidden;
}
.score-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Delta ── */
.delta-up   { color: #059669; }
.delta-down { color: #dc2626; }
.delta-flat { color: #627d98; }

/* ── Data table ── */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  text-align: left;
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #627d98;
  padding: 10px 14px;
  border-bottom: 2px solid #e8eef4;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.data-table td {
  padding: 12px 14px;
  font-size: 0.8125rem;
  border-bottom: 1px solid #f0f4f8;
  vertical-align: middle;
}
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover td { background: #f0f4f8; }

/* ── Card ── */
.sl-card {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.sl-card:hover {
  border-color: #bcccdc;
  box-shadow: 0 2px 12px rgba(16,42,67,0.06);
}
.sl-card-body { padding: 22px 24px; }
.sl-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e8eef4;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334e68;
}

/* ── Buttons ── */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px;
  font-size: 0.8125rem; font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer; border: none; outline: none;
  line-height: 1.4;
}
.sl-btn:active { transform: scale(0.97); }

.sl-btn-primary {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
  box-shadow: 0 2px 8px rgba(6,182,212,0.3);
}
.sl-btn-primary:hover {
  background: linear-gradient(135deg, #0e7490, #0891b2);
  box-shadow: 0 4px 12px rgba(6,182,212,0.35);
}

.sl-btn-secondary {
  background: #fff; color: #334e68;
  border: 1px solid #d9e2ec;
}
.sl-btn-secondary:hover { background: #f0f4f8; border-color: #bcccdc; }

.sl-btn-ghost {
  background: transparent; color: #627d98;
}
.sl-btn-ghost:hover { background: #f0f4f8; color: #334e68; }

.sl-btn-sm { padding: 5px 12px; font-size: 0.75rem; border-radius: 8px; }

/* ── Input ── */
.sl-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid #d9e2ec; border-radius: 10px;
  font-size: 0.875rem; color: #102a43;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none; background: #fff;
}
.sl-input:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.12);
}

/* ── Pill tabs ── */
.pill-tabs {
  display: inline-flex; gap: 4px;
  background: #e8eef4; border-radius: 10px; padding: 3px;
}
.pill-tab {
  padding: 6px 14px; border-radius: 8px;
  font-size: 0.75rem; font-weight: 600;
  color: #627d98; cursor: pointer;
  transition: all 0.15s;
  border: none; background: none;
}
.pill-tab:hover { color: #334e68; }
.pill-tab.active {
  background: #fff; color: #102a43;
  box-shadow: 0 1px 3px rgba(16,42,67,0.08);
}

/* ── Breadcrumb ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: #9fb3c8;
  margin-bottom: 24px;
}
.breadcrumb a { color: #627d98; text-decoration: none; transition: color 0.1s; }
.breadcrumb a:hover { color: #334e68; }
.breadcrumb .sep { font-size: 0.625rem; }
.breadcrumb .current { color: #102a43; font-weight: 500; }

/* ── Variant card ── */
.variant-card {
  border: 1px solid #d9e2ec; border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.variant-card:hover {
  border-color: #a5f3fc;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.06);
}

/* ── Empty state ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 24px; color: #9fb3c8;
}
.empty-state svg { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state p { font-size: 0.875rem; }

/* ── Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, #e8eef4 25%, #d9e2ec 50%, #e8eef4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── KPI ── */
.kpi-label {
  font-size: 0.6875rem; font-weight: 500;
  color: #627d98; letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 1.5rem; font-weight: 700;
  color: #102a43; line-height: 1.2;
}
.kpi-delta {
  font-size: 0.75rem; font-weight: 600;
  margin-top: 4px;
}

/* ── Pricing popular ── */
.pricing-popular {
  border: 2px solid #06b6d4 !important;
  box-shadow: 0 0 0 1px rgba(6,182,212,0.1), 0 4px 24px rgba(6,182,212,0.12);
}

/* ── Stats glow text ── */
.stat-value {
  background: linear-gradient(135deg, #22d3ee, #67e8f9, #06b6d4);
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(6,182,212,0.4));
}
.stat-label {
  color: rgba(255,255,255,0.7);
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Hero mockup ── */
.hero-mockup {
  animation: floatUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
  opacity: 0;
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Skeleton loading ── */
.skel-card {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  padding: 20px 22px;
}
.skel-line {
  background: linear-gradient(90deg, #e8eef4 25%, #d9e2ec 50%, #e8eef4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  height: 12px;
}
.skel-line-lg { height: 24px; border-radius: 8px; }
.skel-line-sm { height: 8px; }
.skel-circle {
  background: linear-gradient(90deg, #e8eef4 25%, #d9e2ec 50%, #e8eef4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 50%;
}

/* ── Empty state enhanced ── */
.empty-state-icon {
  width: 64px; height: 64px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ecfeff, #f0f4f8);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.empty-state-icon svg {
  width: 28px; height: 28px; color: #9fb3c8;
}

/* ── Error banner ── */
.error-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 16px 20px;
}
.error-banner-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: #dc2626;
  margin-top: 1px;
}

/* ── Footer ── */
.sl-footer {
  background: #0a1929;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
}

/* ── Mobile adjustments ── */
@media (max-width: 639px) {
  .hero-dark .text-5xl { font-size: 1.75rem; }
  .data-table { font-size: 0.75rem; }
  .data-table th { padding: 8px 10px; font-size: 0.625rem; }
  .data-table td { padding: 10px; }
  .sl-card-body { padding: 16px 18px; }
  .sl-card-header { padding: 12px 18px; }
  .metric-card { padding: 16px 18px; }
  .kpi-value { font-size: 1.25rem; }
  .breadcrumb { font-size: 0.75rem; margin-bottom: 16px; }
  .pill-tabs { gap: 2px; }
  .pill-tab { padding: 5px 10px; font-size: 0.6875rem; }
}