:root {
  --ankk-primary: #5b4dff;
  --ankk-primary-dark: #312e81;
  --ankk-violet: #8b5cf6;
  --ankk-ink: #17172f;
  --ankk-muted: #6b6b84;
  --ankk-surface: #ffffff;
  --ankk-canvas: #f7f7fc;
  --ankk-border: #e8e7f3;
  --bs-primary: #5b4dff;
  --bs-link-color: #4f46e5;
  --bs-link-hover-color: #312e81;
}

body {
  background: var(--ankk-canvas);
  color: var(--ankk-ink);
  font-family: Inter, Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#header {
  min-height: 64px;
  background: linear-gradient(120deg, #17143f 0%, #4338ca 55%, #8b5cf6 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(49,46,129,.18);
}

#header .navbar-brand,
#header a[href="/"] {
  font-weight: 800;
  letter-spacing: -.025em;
}

#header .form-control,
#header input[type="search"] {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(12px);
}

#header .form-control::placeholder,
#header input[type="search"]::placeholder {
  color: rgba(255,255,255,.72);
}

.page-wrap {
  padding-top: 24px;
  padding-bottom: 48px;
}

.page-wrap .card {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--ankk-border);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(30,27,75,.06);
  overflow: hidden;
}

.page-wrap li.list-group-item-action {
  margin-bottom: 12px;
  padding: 20px 22px !important;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--ankk-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 20px rgba(30,27,75,.045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-wrap li.list-group-item-action:hover {
  transform: translateY(-2px);
  border-color: #cbc7ff !important;
  box-shadow: 0 13px 30px rgba(67,56,202,.11);
}

.page-wrap h5 a,
.page-wrap .link-dark {
  color: var(--ankk-ink) !important;
  font-weight: 720;
  letter-spacing: -.018em;
}

.badge-tag,
.question-tags .badge {
  color: #4c3fd5 !important;
  background: #eeecff !important;
  border: 1px solid #ddd9ff !important;
  border-radius: 999px !important;
  font-weight: 650;
}

.nav-pills .nav-link.active,
.nav-link.active {
  color: #4338ca !important;
  background: #eeecff !important;
  border-radius: 12px;
  font-weight: 700;
}

.btn-primary {
  background: linear-gradient(135deg, #5b4dff, #7c3aed) !important;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(91,77,255,.22);
}

.btn-outline-primary {
  color: #5046d8;
  border-color: #bbb6ff;
  border-radius: 12px;
}

.card-header {
  background: linear-gradient(180deg, #fff, #fbfaff);
  border-bottom-color: var(--ankk-border);
  font-weight: 750;
}

footer, .footer {
  color: var(--ankk-muted);
}

@media (max-width: 767.98px) {
  #header { min-height: 58px; }
  .page-wrap { padding-top: 14px; }
  .page-wrap li.list-group-item-action {
    margin-bottom: 9px;
    padding: 16px !important;
    border-radius: 14px !important;
  }
  .page-wrap .card { border-radius: 15px; }
}