/* ==========================================================================
   Style — Competition Analysis
   Imports variables.css for design tokens
   ========================================================================== */
@import url("variables.css");

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  min-height: 100vh;
  padding-top: var(--nav-height);
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.detail, .detail-layout {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) + 1);
  height: var(--nav-height);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.nav__logo-wrap:hover { text-decoration: none; }

.nav__logo-img {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: baseline;
  align-self: center;
}

body.dark .nav__logo-img {
  filter: brightness(0) invert(1) brightness(0.85);
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--font-normal);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}
.nav__logo:hover { text-decoration: none; }

.nav__tagline {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: 2px;
}

/* ==========================================================================
   Layout: sidebar + main
   ========================================================================== */
.layout {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  gap: var(--space-6);
  flex: 1;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar {
  flex: 1 0 0;
  min-width: 200px;
  max-width: 340px;
}

.content {
  flex: 3.5 1 0;
}

.sidebar__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.sidebar__body {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: calc(100vh - var(--nav-height) - var(--space-12));
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.04);
}

/* ── Filter Section ── */
.filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-section + .filter-section {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.filter-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-section__hint {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--color-text-disabled);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Search Input ── */
.search-input-wrap {
  position: relative;
}

.search-input-wrap__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--input-padding-x) 0 calc(var(--space-3) + 20px);
  font-size: var(--input-font-size);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-full);
  outline: none;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.search-input::placeholder { color: var(--input-placeholder); }
.search-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-ring);
}

/* ── Category Grid ── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1-5);
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  transition: var(--transition-all);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}

.category-btn__icon {
  font-size: var(--text-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  width: 18px;
  height: 18px;
}

.category-btn__icon svg {
  width: 18px;
  height: 18px;
}

.category-btn.active .category-btn__icon {
  color: inherit;
}
.category-btn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.category-btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-sunken);
}

.category-btn.active {
  border-color: var(--color-accent-500);
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  font-weight: var(--font-medium);
}

/* ── Chip Group ── */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--chip-height);
  padding: 0 var(--chip-padding-x);
  font-size: var(--chip-font-size);
  font-weight: var(--font-medium);
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: var(--transition-all);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.chip:hover {
  background: var(--color-bg-sunken);
  border-color: var(--color-border-strong);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06);
}

.chip.active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08);
}

.chip--star {
  font-size: 11px;
  letter-spacing: -1px;
}

.chip__icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 16px;
}

.chip__icon svg {
  width: 100%;
  height: 100%;
}

/* ── Reset Button ── */
.reset-btn {
  width: 100%;
  height: var(--btn-height-md);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  color: var(--btn-secondary-text);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-full);
  transition: var(--transition-all);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
}

.reset-btn:hover {
  background: var(--btn-secondary-hover-bg);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.06);
}

/* ==========================================================================
   Main Content
   ========================================================================== */
.main {
  flex: 1;
  min-width: 0;
}

.main__header,
.content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.result-count {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-normal);
  letter-spacing: 0.02em;
}

/* ── Loading Indicator ── */
.loading-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
}

.loading-indicator__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent-500);
  animation: pulse-dot 1.2s ease-in-out infinite;
}

.loading-indicator__dot:nth-child(2) { animation-delay: 0.15s; }
.loading-indicator__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulse-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   Card Grid
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  contain: layout style;
}

/* ── Card Link (wrapper) ── */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}
.card-link:hover { text-decoration: none; }

/* ── Card ── */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
  height: 100%;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-strong);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.card__category-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.card__category-tags {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}

.card__category-tag--secondary {
  opacity: 0.7;
  font-size: 11px;
}

.card__category-tag--secondary::before {
  content: '+';
  margin-right: 2px;
  color: var(--color-text-disabled);
}

.card__category-icon {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
}

.card__category-icon svg {
  width: 14px;
  height: 14px;
}

.card__comp-type-icon {
  font-size: var(--text-md);
  line-height: 1;
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date display */
.card__date {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-3);
}

.card__date svg {
  flex-shrink: 0;
  color: var(--color-accent-500);
}

/* Stars */
.card__stars {
  display: flex;
  gap: 1px;
  align-items: center;
}

.star--filled { color: var(--color-accent-500); }
.star--empty { color: #D1D5DB; }

/* Card bottom */
.card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Badges */
.card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  border-radius: var(--badge-radius);
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

.badge--sub { background: #F3F4F6; color: #4B5563; }
.badge--type { background: var(--color-accent-100); color: var(--color-accent-700); }
.badge--recruitment { font-weight: 600; }
.badge--recruitment[data-recruit="상시"] { background: #dcfce7; color: #166534; }
.badge--recruitment[data-recruit="모집중"] { background: #dbeafe; color: #1e40af; }
.badge--recruitment[data-recruit="수시"] { background: #fef3c7; color: #92400e; }
.badge--recruitment:not([data-recruit="상시"]):not([data-recruit="모집중"]):not([data-recruit="수시"]) {
  background: #e0f2fe; color: #0369a1;
}

/* ==========================================================================
   Empty State
   ========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.empty-state__icon {
  color: var(--color-gray-300);
  margin-bottom: var(--space-4);
}

.empty-state__text {
  font-size: var(--text-md);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.empty-state__sub {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ==========================================================================
   Detail Page
   ========================================================================== */
.detail-layout {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-6);
}

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: color var(--duration-fast) var(--ease-default);
}

.detail__back:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.detail {
  background: var(--color-surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--card-shadow);
}

.detail__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail__header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.detail__category-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

.detail__category-tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.detail__category-tag--secondary {
  opacity: 0.7;
}

.detail__category-tag--secondary::before {
  content: '+';
  margin-right: 4px;
  color: var(--color-text-disabled);
}

.detail__category-icon { font-size: var(--text-md); }
.detail__category-icon svg { width: 1.2em; height: 1.2em; vertical-align: middle; }

.detail__comp-type {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.detail__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.detail__desc {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.detail__stars {
  display: flex;
  gap: 2px;
}

.detail__stars .star--filled { color: var(--color-accent-500); }
.detail__stars .star--empty { color: #D1D5DB; }

/* Progress Tracker */
.progress-tracker {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.progress-tracker__bar {
  position: relative;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.progress-tracker__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-accent-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.progress-tracker__steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.progress-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}

.progress-tracker__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
}

.progress-tracker__step--active .progress-tracker__dot {
  border-color: var(--color-accent-500);
  background: var(--color-accent-500);
  box-shadow: 0 0 0 4px var(--color-accent-100);
}

.progress-tracker__step--done .progress-tracker__dot {
  border-color: var(--color-accent-500);
  background: var(--color-accent-500);
}

.progress-tracker__step--done .progress-tracker__dot svg,
.progress-tracker__step--active .progress-tracker__dot svg {
  color: #fff;
}

.progress-tracker__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-align: center;
}

.progress-tracker__step--active .progress-tracker__label {
  color: var(--color-accent-600);
}

.progress-tracker__step--done .progress-tracker__label {
  color: var(--color-text-secondary);
}

.progress-tracker__date {
  font-size: 10px;
  color: var(--color-text-disabled);
  text-align: center;
}

.progress-tracker__status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

/* 접수 예정 */
.progress-tracker__status--0 {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* 접수 중 */
.progress-tracker__status--1 {
  background: var(--color-success-100);
  color: var(--color-success-600);
}

/* 대회 준비 중 */
.progress-tracker__status--2 {
  background: var(--color-warning-100);
  color: var(--color-warning-600);
}

/* 대회 진행 중 */
.progress-tracker__status--3 {
  background: var(--color-accent-100);
  color: var(--color-accent-700);
}

/* 종료 */
.progress-tracker__status--4 {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

/* Info Grid */
.detail__info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
}

.detail__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.detail__info-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail__info-value {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

/* Keywords */
.detail__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-6);
}

.detail__keyword {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border-radius: var(--radius-full);
}

/* Hashtags (detail page) */
.detail__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
}

.detail__hashtag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent-600);
  background: var(--color-accent-50, #EDF2FF);
  border: 1px solid var(--color-accent-200, #BAC8FF);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-all);
}

.detail__hashtag:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-300, #F2889A);
  color: var(--color-accent-700);
  text-decoration: none;
}

/* Hashtags (card) */
.card__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.card__hashtag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-accent-600);
  background: var(--color-accent-50, #EDF2FF);
  border: 1px solid var(--color-accent-200, #BAC8FF);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-all);
  position: relative;
  z-index: 1;
}

.card__hashtag:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-300, #F2889A);
  color: var(--color-accent-700);
}

.card__hashtag--counselor {
  background: #EDE9FE;
  color: #7C3AED;
  border-color: #C4B5FD;
}

.card__hashtag--counselor:hover {
  background: #DDD6FE;
  color: #6D28D9;
  border-color: #A78BFA;
}

.card__hashtag--reviewed {
  background: #DCFCE7;
  color: #16a34a;
  border-color: #86EFAC;
}

.card__hashtag--reviewed:hover {
  background: #BBF7D0;
  color: #15803d;
  border-color: #4ADE80;
}

/* Hashtag filter indicator */
.hashtag-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-50, #EDF2FF);
  border: 1px solid var(--color-accent-200, #BAC8FF);
  border-radius: var(--radius-lg);
}

.hashtag-indicator__tag {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent-600);
}

.hashtag-indicator__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--color-accent-400);
  transition: var(--transition-all);
}

.hashtag-indicator__clear:hover {
  background: var(--color-accent-100);
  color: var(--color-accent-600);
}

/* Body text */
.detail__body {
  margin-bottom: var(--space-6);
}

.detail__body p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.detail__body p:last-child {
  margin-bottom: 0;
}

/* Website link */
.detail__website-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-default);
}

.detail__website-link:hover {
  background: var(--btn-primary-hover-bg);
  text-decoration: none;
}

/* ==========================================================================
   Error Page
   ========================================================================== */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--space-8);
}

.error-page__code {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-200);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-bottom: var(--space-4);
}

.error-page__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.error-page__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.error-page__link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-link);
}

/* ==========================================================================
   Card Top Right (comp type + d-day)
   ========================================================================== */
.card__top-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ==========================================================================
   D-Day Badges
   ========================================================================== */
.card__d-day {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 11px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.card__d-day--upcoming {
  background: var(--color-accent-50, #EDF2FF);
  color: var(--color-accent-600);
}

.card__d-day--today {
  background: var(--color-success-100);
  color: var(--color-success-600);
}

.card__d-day--ended,
.card__d-day--passed {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
}

.card__d-day--urgent {
  background: #fef2f2;
  color: #dc2626;
}

/* Detail page D-day */
.detail__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.detail__d-day {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
}

.detail__d-day small {
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  opacity: 0.8;
}

.detail__d-day--upcoming {
  background: var(--color-accent-50, #EDF2FF);
  color: var(--color-accent-600);
  border: 1px solid var(--color-accent-200, #BAC8FF);
}

.detail__d-day--today {
  background: var(--color-success-100);
  color: var(--color-success-600);
  border: 1px solid #86efac;
}

.detail__d-day--ended,
.detail__d-day--passed {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  border: 1px solid var(--color-border);
}

.detail__d-day--urgent {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ==========================================================================
   Pathway Box
   ========================================================================== */
.pathway-box {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
}

.pathway-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.pathway-box__icon {
  color: var(--color-accent-500);
  flex-shrink: 0;
}

.pathway-box__title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.pathway-box__desc {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.pathway-box__steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pathway-box__step {
  display: inline-flex;
}

.pathway-box__step-label {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-accent-700);
  background: var(--color-accent-100);
  border: 2px solid var(--color-accent-500);
  border-radius: var(--radius-md);
}

.pathway-box__step-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-all);
}

.pathway-box__step-link:hover {
  border-color: var(--color-accent-300, #F2889A);
  color: var(--color-accent-600);
  text-decoration: none;
}

.pathway-box__arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-disabled);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-border-subtle);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Small laptop (sidebar + content both shrink) */
@media (max-width: 1400px) {
  .sidebar {
    max-width: 280px;
  }

  .sidebar__body {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .filter-section__title {
    font-size: 11px;
  }

  .chip {
    height: 26px;
    padding: 0 var(--space-2);
    font-size: 11px;
  }

  .chip--star {
    font-size: 10px;
  }

  .category-btn {
    padding: var(--space-1-5) var(--space-1);
    font-size: 11px;
  }

  .category-btn__icon {
    font-size: var(--text-md);
  }

  .search-input {
    height: 36px;
    font-size: var(--text-sm);
  }

  .reset-btn {
    height: 32px;
    font-size: 12px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Narrow laptop */
@media (max-width: 1200px) {
  .sidebar {
    max-width: 240px;
  }

  .sidebar__body {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .filter-section + .filter-section {
    padding-top: var(--space-2);
  }

  .filter-section {
    gap: var(--space-1-5);
  }

  .filter-section__title {
    font-size: 10px;
  }

  .filter-section__hint {
    font-size: 9px;
  }

  .chip {
    height: 24px;
    padding: 0 var(--space-2);
    font-size: 10px;
  }

  .chip--star {
    font-size: 9px;
  }

  .chip-group {
    gap: var(--space-1);
  }

  .category-grid {
    gap: var(--space-1);
  }

  .category-btn {
    padding: var(--space-1) var(--space-0-5);
    font-size: 10px;
    gap: 2px;
  }

  .category-btn__icon {
    font-size: var(--text-base);
  }

  .search-input {
    height: 32px;
    font-size: 12px;
  }

  .reset-btn {
    height: 28px;
    font-size: 11px;
  }

  .layout {
    gap: var(--space-4);
  }
}

/* Tablet & below */
@media (max-width: 1024px) {
  .sidebar {
    max-width: 210px;
  }

  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .detail__info-grid {
    grid-template-columns: 1fr;
  }

  .layout {
    padding: var(--space-4);
    gap: var(--space-3);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .sidebar {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .sidebar__toggle {
    display: flex;
    width: 100%;
  }

  .sidebar__body {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    padding: var(--space-4);
    gap: var(--space-4);
  }

  .sidebar__body.open {
    display: flex;
    margin-top: var(--space-3);
  }

  .filter-section + .filter-section {
    padding-top: var(--space-3);
  }

  .filter-section {
    gap: var(--space-2);
  }

  .filter-section__title {
    font-size: var(--text-xs);
  }

  .filter-section__hint {
    font-size: 10px;
  }

  .chip {
    height: var(--chip-height);
    padding: 0 var(--chip-padding-x);
    font-size: var(--chip-font-size);
  }

  .chip--star {
    font-size: 11px;
  }

  .chip-group {
    gap: var(--space-1-5);
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1-5);
  }

  .category-btn {
    padding: var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    gap: var(--space-1);
  }

  .category-btn__icon {
    font-size: var(--text-lg);
  }

  .search-input {
    height: var(--input-height);
    font-size: var(--input-font-size);
  }

  .reset-btn {
    height: var(--btn-height-md);
    font-size: var(--btn-font-size);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .nav__tagline {
    display: none;
  }

  .nav__inner {
    padding: 0 var(--space-4);
  }

  .detail-layout {
    padding: var(--space-4);
  }

  .detail {
    padding: var(--space-5);
  }

  .detail__title {
    font-size: var(--text-2xl);
  }

  .detail__info-grid {
    grid-template-columns: 1fr;
  }

  .progress-tracker {
    padding: var(--space-4);
  }

  .progress-tracker__label {
    font-size: 10px;
  }

  .progress-tracker__date {
    font-size: 9px;
  }

  .progress-tracker__dot {
    width: 20px;
    height: 20px;
  }

  .progress-tracker__dot svg {
    width: 10px;
    height: 10px;
  }

  .pathway-box {
    padding: var(--space-4);
  }

  .pathway-box__steps {
    gap: var(--space-1);
  }

  .pathway-box__arrow svg {
    width: 16px;
    height: 16px;
  }

  .detail__header-right {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Feature 3: Mini stages progress bar (card)
   ========================================================================== */
.card__stages {
  margin-bottom: var(--space-2);
}

.card__stages-label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  color: var(--color-accent-600);
  display: block;
  margin-bottom: 4px;
}

.card__stages-bar {
  position: relative;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.card__stages-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-accent-500);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ==========================================================================
   Feature 2: Subcategory group headers
   ========================================================================== */
.subcategory-group-header {
  width: 100%;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1) 0;
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.subcategory-group-header:first-child {
  margin-top: 0;
}

.subcategory-group-header__icon {
  font-size: var(--text-sm);
  line-height: 1;
}

.subcategory-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   Feature 1: Favorites
   ========================================================================== */

/* Card bookmark button */
.card__fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-gray-400);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
  position: relative;
  z-index: 2;
  line-height: 1;
}

.card__fav-btn svg {
  width: 16px;
  height: 16px;
}

.card__fav-btn:hover {
  color: var(--color-accent-500);
  background: var(--color-accent-50, #EDF2FF);
}

.card__fav-btn--active {
  color: var(--color-accent-500);
}

.card__fav-btn--active svg {
  fill: currentColor;
}

.card__fav-btn--active:hover {
  color: var(--color-accent-600);
}

/* Detail page bookmark button */
.detail__fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-gray-400);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
}

.detail__fav-btn svg {
  width: 20px;
  height: 20px;
}

.detail__fav-btn:hover {
  color: var(--color-accent-500);
  border-color: var(--color-accent-200, #BAC8FF);
  background: var(--color-accent-50, #EDF2FF);
}

.detail__fav-btn--active {
  color: var(--color-accent-500);
  border-color: var(--color-accent-200, #BAC8FF);
  background: var(--color-accent-50, #EDF2FF);
}

.detail__fav-btn--active svg {
  fill: currentColor;
}

.detail__fav-btn--active:hover {
  color: var(--color-accent-600);
}

/* Favorites toggle button */
.content__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.favorites-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition: var(--transition-all);
}

.favorites-toggle:hover {
  border-color: var(--color-accent-200, #BAC8FF);
  color: var(--color-accent-500);
}

.favorites-toggle.active {
  border-color: var(--color-accent-200, #BAC8FF);
  background: var(--color-accent-50, #EDF2FF);
  color: var(--color-accent-500);
}

.favorites-toggle__icon {
  font-size: var(--text-sm);
  line-height: 1;
}

/* ==========================================================================
   Mode Navigation — Side Nav Bar
   ========================================================================== */
.mode-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 196px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-3);
  padding-top: calc(var(--nav-height) + var(--space-3));
  gap: var(--space-1-5);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-sticky);
}

.nav__school-logo-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 196px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: calc(var(--z-sticky) + 2);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.nav__school-logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mode-nav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  transition: var(--transition-all);
  white-space: nowrap;
}

.mode-nav__btn:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
}

.mode-nav__btn--active {
  background: var(--color-accent-50);
  color: var(--color-accent-700);
  font-weight: var(--font-semibold);
}

.mode-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.mode-nav__icon svg {
  width: 22px;
  height: 22px;
}

.mode-nav__icon--csia svg {
  width: 28px;
  height: 16px;
}

/* Layout shift for side nav bar */
body.has-mode-nav .nav .nav__inner { max-width: none; margin-left: 196px; padding-left: var(--space-8); padding-right: var(--space-24); }
body.has-mode-nav .main { margin-left: 196px; }
body.has-mode-nav .main .layout { max-width: none; margin: 0; padding-left: var(--space-8); padding-right: var(--space-24); }
body.has-mode-nav .footer { margin-left: 196px; padding-left: var(--space-8); padding-right: var(--space-24); }

/* ==========================================================================
   Theme Toggle
   ========================================================================== */
.nav__spacer {
  flex: 1;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: var(--transition-all);
}

.theme-toggle:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-primary);
}

/* Show sun by default (light mode), hide moon */
.theme-toggle__moon { display: none; }
.theme-toggle__sun  { display: block; }

/* In dark mode, show moon, hide sun */
body.dark .theme-toggle__moon { display: block; }
body.dark .theme-toggle__sun  { display: none; }

/* ==========================================================================
   Pre-college Mode — Teal Color Overrides
   ========================================================================== */
/* Competition mode — accent color active chips */
body:not(.mode--precollege):not(.mode--csia):not(.mode--volunteer) .chip.active {
  background: var(--color-accent-600);
  color: #fff;
}

body.mode--precollege .chip.active {
  background: var(--color-teal-700);
  color: #fff;
}

body.mode--precollege .search-input:focus {
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px rgba(59, 174, 160, 0.15);
}

body.mode--precollege .loading-indicator__dot {
  background: var(--color-teal-500);
}

body.mode--precollege .card__hashtag {
  color: var(--color-teal-600);
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
}

body.mode--precollege .card__hashtag:hover {
  background: var(--color-teal-100);
  border-color: var(--color-teal-300);
  color: var(--color-teal-700);
}

body.mode--precollege .card__d-day--upcoming {
  background: var(--color-teal-50);
  color: var(--color-teal-600);
}

body.mode--precollege .mode-nav__btn--active {
  color: var(--color-teal-700);
  background: var(--color-teal-50);
}

body.mode--precollege .category-btn.active {
  border-color: var(--color-teal-500);
  background: var(--color-teal-50);
  color: var(--color-teal-700);
}

body.mode--precollege .reset-btn:hover {
  background: var(--color-teal-50);
}

body.mode--precollege .hashtag-indicator {
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
}

body.mode--precollege .hashtag-indicator__tag {
  color: var(--color-teal-600);
}

/* ── Volunteer (Amber) Mode Overrides ── */
body.mode--volunteer .chip.active {
  background: var(--color-amber-700);
  color: #fff;
}

body.mode--volunteer .search-input:focus {
  border-color: var(--color-amber-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

body.mode--volunteer .loading-indicator__dot {
  background: var(--color-amber-500);
}

body.mode--volunteer .card__hashtag {
  color: var(--color-amber-600);
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

body.mode--volunteer .card__hashtag:hover {
  background: var(--color-amber-100);
  border-color: var(--color-amber-300);
  color: var(--color-amber-700);
}

body.mode--volunteer .mode-nav__btn--active {
  color: var(--color-amber-700);
  background: var(--color-amber-50);
}

body.mode--volunteer .category-btn.active {
  border-color: var(--color-amber-500);
  background: var(--color-amber-50);
  color: var(--color-amber-700);
}

body.mode--volunteer .reset-btn:hover {
  background: var(--color-amber-50);
}

body.mode--volunteer .hashtag-indicator {
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

body.mode--volunteer .hashtag-indicator__tag {
  color: var(--color-amber-600);
}

body.mode--volunteer .card__date svg {
  color: var(--color-amber-500);
}

body.mode--volunteer .favorites-toggle.active {
  color: var(--color-amber-600);
}

/* Pre-college card extras */
.card__university-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.card__university-badge__flag {
  font-size: var(--text-sm);
  line-height: 1;
}

.card__field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.card__field-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--space-1-5);
  font-size: 10px;
  font-weight: var(--font-medium);
  color: var(--color-teal-600);
  background: var(--color-teal-50);
  border-radius: var(--radius-full);
}

.card__cost {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

.card__duration {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.badge--format {
  background: var(--color-teal-50);
  color: var(--color-teal-700);
}

/* ==========================================================================
   Pre-college Detail Page
   ========================================================================== */
.detail--precollege .detail__website-link {
  background: var(--color-teal-600);
}

.detail--precollege .detail__website-link:hover {
  background: var(--color-teal-700);
}

.detail--precollege .detail__d-day--upcoming {
  background: var(--color-teal-50);
  color: var(--color-teal-600);
  border-color: var(--color-teal-200);
}

.detail__university-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-teal-700);
}

.detail__university-badge__flag {
  font-size: var(--text-lg);
}

.detail__field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-4);
}

.detail__field-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-teal-600);
  background: var(--color-teal-50);
  border: 1px solid var(--color-teal-200);
  border-radius: var(--radius-full);
}

.detail--precollege .detail__hashtag {
  color: var(--color-teal-600);
  background: var(--color-teal-50);
  border-color: var(--color-teal-200);
}

.detail--precollege .detail__hashtag:hover {
  background: var(--color-teal-100);
  border-color: var(--color-teal-300);
  color: var(--color-teal-700);
}

.detail--precollege .detail__keyword {
  color: var(--color-teal-700);
  background: var(--color-teal-100);
}

.detail--precollege .progress-tracker__fill {
  background: var(--color-teal-500);
}

/* ---------- Volunteer Detail — Amber ---------- */
.detail--volunteer .detail__hashtag {
  color: var(--color-amber-700);
  background: var(--color-amber-50);
  border-color: var(--color-amber-200);
}

.detail--volunteer .detail__hashtag:hover {
  background: var(--color-amber-100);
  border-color: var(--color-amber-300);
  color: var(--color-amber-700);
}

.detail--volunteer .detail__keyword {
  color: var(--color-amber-700);
  background: var(--color-amber-100);
}

.detail--volunteer .detail__website-link {
  background: var(--color-amber-600);
}

.detail--volunteer .detail__website-link:hover {
  background: var(--color-amber-700);
}

/* ==========================================================================
   CSIA Mode — Cheongshim Blue Overrides
   ========================================================================== */
body.mode--csia .mode-nav__btn--active {
  color: var(--color-csblue-700);
  background: var(--color-csblue-50);
}

body.mode--csia .chip.active {
  background: var(--color-csblue-700);
  color: #fff;
}

body.mode--csia .search-input:focus {
  border-color: var(--color-csblue-500);
  box-shadow: 0 0 0 3px rgba(74, 137, 191, 0.15);
}

body.mode--csia .loading-indicator__dot {
  background: var(--color-csblue-500);
}

/* ── CSIA Login Modal ── */
.csia-login-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.csia-login-modal {
  width: 380px;
  max-width: 90vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  position: relative;
}

.csia-login-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

.csia-login-modal__close:hover {
  color: var(--color-text-primary);
}

.csia-login-modal__logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.csia-login-modal__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-1);
}

.csia-login-modal__desc {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-bottom: var(--space-6);
}

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

.csia-login-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.csia-login-form__field label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csia-login-form__field input {
  height: var(--input-height);
  padding: 0 var(--input-padding-x);
  font-size: var(--input-font-size);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.csia-login-form__field input:focus {
  border-color: var(--color-csblue-500);
  box-shadow: 0 0 0 3px rgba(74, 137, 191, 0.15);
}

.csia-login-form__field input::placeholder {
  color: var(--input-placeholder);
}

.csia-login-form__error {
  font-size: var(--text-xs);
  color: var(--color-error-600);
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-100);
  border-radius: var(--radius-md);
}

.csia-login-form__submit {
  height: var(--btn-height-lg);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: #fff;
  background: var(--color-csblue-600);
  border-radius: var(--radius-md);
  transition: background var(--duration-normal) var(--ease-default);
  cursor: pointer;
}

.csia-login-form__submit:hover {
  background: var(--color-csblue-700);
}

.csia-login-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── CSIA Sidebar narrower ── */
.csia-layout .sidebar {
  max-width: 240px;
  min-width: 180px;
}

/* ── CSIA Sub-nav (in sidebar) ── */
.csia-subnav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.csia-subnav__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  transition: var(--transition-all);
}

.csia-subnav__btn:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
}

.csia-subnav__btn--active {
  background: var(--color-csblue-50);
  color: var(--color-csblue-700);
  font-weight: var(--font-semibold);
}

/* ── CSIA User Info ── */
.csia-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
}

.csia-user-info__name {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

.csia-user-info__logout {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  transition: color var(--duration-fast) var(--ease-default);
}

.csia-user-info__logout:hover {
  color: var(--color-error-600);
}

/* ── AP Card Grid ── */
.ap-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── AP Card ── */
.ap-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
  position: relative;
}

.ap-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-border-strong);
  transform: none;
}

.ap-card__header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  position: relative;
  overflow: hidden;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ap-card__ap-label {
  font-size: 10px;
  font-weight: var(--font-bold);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}

.ap-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: #fff;
  line-height: var(--leading-snug);
  position: relative;
  z-index: 1;
}

.ap-card__dday {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--font-bold);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}
.ap-card__dday--urgent {
  background: rgba(239, 68, 68, 0.85);
}
.ap-card__dday--soon {
  background: rgba(245, 158, 11, 0.75);
}
.ap-card__dday--ended {
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.7;
}

.ap-card__body {
  padding: var(--space-3) var(--space-5) var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ap-card__name-kr {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

.ap-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-right: 28px;
}

.ap-card__exam-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}
.ap-card__exam-date svg {
  color: var(--color-csblue-400);
}

.ap-card__cat-tag {
  font-size: 10px;
  font-weight: var(--font-semibold);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  opacity: 0.8;
  margin-left: auto;
}

.ap-card__fav {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s, transform 0.2s;
  z-index: 2;
}
.ap-card__fav:hover {
  color: var(--color-csblue-500);
  transform: scale(1.15);
}
.ap-card__fav--active {
  color: var(--color-csblue-500);
}

/* ── Club Sort Bar ── */
.club-sort-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.club-sort-bar__label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
  margin-right: var(--space-1);
}

.club-sort-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s;
}
.club-sort-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-400);
}
.club-sort-btn--active {
  background: var(--color-csblue-500);
  border-color: var(--color-csblue-500);
  color: #fff;
}

/* ── AP Filter Bar ── */
.ap-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.ap-filter-bar__label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
  margin-right: var(--space-1);
}

.ap-filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s;
}
.ap-filter-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-400);
}
.ap-filter-btn--active {
  background: var(--color-csblue-500);
  border-color: var(--color-csblue-500);
  color: #fff;
}

.ap-filter-bar__sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

.ap-filter-fav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}
.ap-filter-fav-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-400);
}
.ap-filter-fav-btn--active {
  background: var(--color-csblue-500);
  border-color: var(--color-csblue-500);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   Roadmap Builder — Table Layout
   ══════════════════════════════════════════════════════ */

/* Toolbar */
.roadmap__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.roadmap__toolbar-actions {
  display: flex;
  gap: var(--space-1);
}

.roadmap__act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}
.roadmap__act-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-500);
}
.roadmap__act-btn--done {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

/* Table wrapper */
.roadmap__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

/* Table */
.rm-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 900px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.rm-table * {
  -webkit-user-drag: none;
}

.rm-th {
  padding: 12px 8px;
  text-align: center;
  background: var(--color-bg-sunken);
  border-bottom: 2px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.rm-th:last-child { border-right: none; }

.rm-th__id {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.rm-th__cr {
  display: block;
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
  margin-top: 2px;
}

/* Cells */
.rm-cell {
  padding: 6px 28px 6px 8px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--text-xs);
  position: relative;
  height: 38px;
}
.rm-cell:last-child { border-right: none; }

.rm-cell--blank {
  background: var(--color-bg);
}

/* Required cell */
.rm-cell--req {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

/* Type colors via left border */
.rm-cell--elective { border-left: 3px solid #94a3b8; }
.rm-cell--major    { border-left: 3px solid var(--color-csblue-400); }
.rm-cell--school   { border-left: 3px solid #f59e0b; }
.rm-cell--lang     { border-left: 3px solid #10b981; }

/* Empty cell = has dropdown */
.rm-cell--empty {
  background: var(--color-bg);
}

/* Filled cell = selected */
.rm-cell--filled {
  background: var(--color-bg);
}
.rm-cell--filled .rm-select {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.rm-cell--lang.rm-cell--filled {
  background: rgba(16, 185, 129, 0.06);
}
.rm-cell--major.rm-cell--filled {
  background: rgba(74, 137, 191, 0.06);
}
.rm-cell--school.rm-cell--filled {
  background: rgba(245, 158, 11, 0.06);
}

.rm-name {
  display: block;
  line-height: 1.35;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px;
}

.rm-cr {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: var(--font-semibold);
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 1px 4px;
  border-radius: 6px;
  line-height: 1.3;
}

.rm-empty-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

/* Dropdown inside cell */
.rm-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  cursor: pointer;
}
.rm-select:focus {
  outline: none;
  border-color: var(--color-csblue-400);
  box-shadow: 0 0 0 2px rgba(74, 137, 191, 0.12);
}
.rm-select:hover {
  border-color: var(--color-csblue-300);
}


/* ── 소인수 강좌 Section ── */
.rm-mini {
  margin-top: var(--space-4);
}
.rm-mini__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.rm-mini__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}
.rm-mini__hint {
  font-size: 10px;
  color: var(--color-text-tertiary);
}
.rm-mini__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rm-mini__col {
  background: var(--color-bg);
  padding: 8px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rm-mini__col--off {
  background: var(--color-bg-sunken);
  opacity: 0.4;
}
.rm-mini__col-head {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  width: 100%;
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.rm-mini__slots {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rm-mini__pick {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  cursor: pointer;
}
.rm-mini__add {
  width: 100%;
  padding: 4px 0;
  border: 1px dashed var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: all 0.15s;
}
.rm-mini__add:hover {
  border-color: #a78bfa;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.06);
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
  .roadmap__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .roadmap__toolbar-actions {
    justify-content: flex-end;
  }
  .rm-mini__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .rm-mini__col--off {
    display: none;
  }
}

/* Dark mode */
body.dark .roadmap__table-wrap {
  border-color: #2a2a2a;
}
body.dark .rm-th {
  background: #161616;
  border-bottom-color: #2a2a2a;
  border-right-color: #2a2a2a;
}
body.dark .rm-cell {
  border-right-color: #222;
  border-bottom-color: #222;
}
body.dark .rm-cell--req,
body.dark .rm-cell--blank,
body.dark .rm-cell--empty {
  background: #111;
}
body.dark .rm-cell--filled {
  background: #151515;
}
body.dark .rm-cell--lang.rm-cell--filled { background: rgba(16,185,129,0.08); }
body.dark .rm-cell--major.rm-cell--filled { background: rgba(74,137,191,0.08); }
body.dark .rm-cell--school.rm-cell--filled { background: rgba(245,158,11,0.08); }
body.dark .rm-cr {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}
body.dark .rm-select {
  background: #1a1a1a;
  border-color: #333;
  color: #999;
}
body.dark .rm-select:focus { color: #e0e0e0; border-color: var(--color-csblue-400); }
body.dark .rm-select:hover { border-color: #555; }
body.dark .roadmap__act-btn { border-color: #2a2a2a; color: #888; }
body.dark .rm-mini__grid { background: #222; border-color: #2a2a2a; }
body.dark .rm-mini__col { background: #111; }
body.dark .rm-mini__col--off { background: #0c0c0c; }
body.dark .rm-mini__col-head { border-bottom-color: #2a2a2a; }
body.dark .rm-mini__pick { background: #1a1a1a; border-color: #333; color: #ddd; }
body.dark .rm-mini__add { border-color: #333; color: #666; }
body.dark .rm-mini__add:hover { border-color: #a78bfa; color: #a78bfa; background: rgba(167,139,250,0.08); }
body.dark .roadmap__act-btn:hover { border-color: var(--color-csblue-400); color: var(--color-csblue-400); }

/* ── Club Cards ── */
.club-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12) var(--space-5);
  align-items: start;
  padding-top: 50px; /* space for protruding logos */
}

@media (min-width: 1600px) {
  .club-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.club-card {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: var(--space-5);
  padding-top: 56px; /* space for logo overhang */
  min-height: 180px;
  transition: box-shadow 0.3s;
}

/* Logo — protruding circle above the card */
.club-card__logo-area {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.club-card__logo-area {
  overflow: hidden;
}

.club-card--cssc .club-card__logo-area {
  background: #1B2A4A;
  border: 2px solid #F0C040;
}

.club-card--quill .club-card__logo-area {
  background: #F5F0E8;
  border: 2px solid #8A7B62;
}

.club-card--roundsquare .club-card__logo-area {
  background: #FFFFFF;
  border: 2px solid #E8636E;
  padding: 0;
}

.club-card--mun .club-card__logo-area {
  background: #0A1E3D;
  border: 2px solid #4A90D9;
}

.club-card__logo {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

/* Round Square logo fills the entire circle */
.club-card--roundsquare .club-card__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* MUN logo needs to be brighter on dark bg */
.club-card--mun .club-card__logo {
  filter: brightness(1.1);
}

/* Card body */
.club-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  z-index: 1;
}

.club-card__name {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  text-align: center;
}

.club-card__name-kr {
  font-size: var(--text-xs);
  opacity: 0.7;
  text-align: center;
}

.club-card__est {
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
  text-align: center;
}

.club-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  opacity: 0.8;
  padding-bottom: var(--space-7);
  padding-right: 90px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Award badge — top-left */
.club-card__award {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: var(--font-semibold);
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #5C3A00;
  box-shadow: 0 2px 8px rgba(255,165,0,0.3);
  z-index: 3;
  letter-spacing: 0.02em;
}
.club-card__award svg {
  color: #5C3A00;
}

/* Award on back face — inline next to title */
.club-card-back__award {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: var(--font-semibold);
  padding: 2px 6px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #5C3A00;
  vertical-align: middle;
  margin-left: 6px;
}

/* Door button — small, bottom-right */
.club-card__door {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  opacity: 0.4;
  font-size: 11px;
  font-weight: var(--font-medium);
  cursor: pointer;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.club-card__door:hover { text-decoration: none; opacity: 0.7; }
.club-card__door svg { flex-shrink: 0; width: 12px; height: 12px; }

.club-card__door--active {
  opacity: 0.8;
}
.club-card__door--active:hover {
  opacity: 1;
}

/* ── Neon glow orbit ── */
@property --laser-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes laser-orbit {
  to { --laser-angle: 360deg; }
}

/* Glow point — orbits on top of the solid border */
.club-card::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--laser-angle),
    var(--laser-color) 0%,
    transparent 5%,
    transparent 95%,
    var(--laser-color) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  filter: blur(5px);
  opacity: 0.85;
  animation: laser-orbit 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Sharp core on border (no blur) */
.club-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--laser-angle),
    var(--laser-color) 0%,
    transparent 4%,
    transparent 96%,
    var(--laser-color) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  opacity: 0.9;
  animation: laser-orbit 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── Per-club color themes ── */
.club-card--cssc .club-card {
  background: #1B2A4A;
  border: 2px solid rgba(240,192,64,0.35);
  --laser-color: #F0C040;
  color: #F0C040;
}
.club-card--cssc:hover .club-card {
  box-shadow: 0 4px 20px rgba(240,192,64,0.15);
}

.club-card--quill .club-card {
  background: #F5F0E8;
  border: 2px solid rgba(138,123,98,0.35);
  --laser-color: rgba(138,123,98,0.8);
  color: #1C1C1C;
}
.club-card--quill:hover .club-card {
  box-shadow: 0 4px 20px rgba(138,123,98,0.15);
}

.club-card--roundsquare .club-card {
  background: #FFF0F1;
  border: 2px solid rgba(232,99,110,0.35);
  --laser-color: #E8636E;
  color: #5C1E24;
}
.club-card--roundsquare:hover .club-card {
  box-shadow: 0 4px 20px rgba(232,99,110,0.15);
}

.club-card--mun .club-card {
  background: #0A1E3D;
  border: 2px solid rgba(74,144,217,0.35);
  --laser-color: #4A90D9;
  color: #B8D4F0;
}
.club-card--mun:hover .club-card {
  box-shadow: 0 4px 20px rgba(74,144,217,0.15);
}

/* ── Card Flip Container ── */
.club-card-flip {
  perspective: 1000px;
  position: relative;
}

.club-card-flip__inner {
  position: relative;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.club-card-flip--flipped .club-card-flip__inner {
  transform: rotateY(180deg);
}

/* Front face */
.club-card-flip__front {
  backface-visibility: hidden;
  position: relative;
}

/* Back face */
.club-card-flip__back {
  backface-visibility: hidden;
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Disable pointer events while facing away; re-enabled when card is flipped */
  pointer-events: none;
}

.club-card-flip--flipped .club-card-flip__back {
  pointer-events: auto;
}

.club-card--cssc .club-card-flip__back {
  background: #1B2A4A;
  color: #F0C040;
  border: 2px solid #F0C040;
}

.club-card--quill .club-card-flip__back {
  background: #F5F0E8;
  color: #1C1C1C;
  border: 2px solid #8A7B62;
}

.club-card--roundsquare .club-card-flip__back {
  background: #FFF0F1;
  color: #5C1E24;
  border: 2px solid #E8636E;
}

.club-card--mun .club-card-flip__back {
  background: #0A1E3D;
  color: #B8D4F0;
  border: 2px solid #4A90D9;
}

.club-card-back__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-align: center;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid currentColor;
  opacity: 0.8;
}

.club-card-back__info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.club-card-back__label {
  font-weight: var(--font-semibold);
  opacity: 0.7;
}

.club-card-back__value {
  opacity: 0.9;
}

/* Detail description */
.club-card-back__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  opacity: 0.8;
  padding-top: var(--space-2);
}

/* Toggle button for detail description */
.club-card-back__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  opacity: 0.6;
  transition: opacity 0.2s;
  pointer-events: none;
}
.club-card-back__toggle-area:hover .club-card-back__toggle { opacity: 1; }
.club-card-back__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

/* ── Expand description in place ── */

/* Description wrapper — hidden with max-height transition */
.club-card-back__desc-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in;
}

.club-card-flip--expanded {
  z-index: 110 !important;
}

.club-card-flip--expanded .club-card-flip__inner {
  transform: rotateY(180deg);
}

.club-card-flip--expanded .club-card-back__desc-wrap {
  max-height: 300px;
  transition: max-height 0.4s ease-out;
}

.club-card-back__desc {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.club-card-flip--expanded .club-card-back__desc {
  opacity: 0;
  transform: translateY(6px);
  animation: fadeSlideIn 0.4s 0.1s ease both;
}

.club-card-flip--expanded .club-card-back__toggle svg {
  transform: rotate(180deg);
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* toggle-area — entire region clickable for detail expand */
.club-card-back__toggle-area {
  cursor: pointer;
  margin-top: auto;
  padding: var(--space-2) 0;
}

/* Disable entire front face pointer events when flipped */
.club-card-flip--flipped .club-card-flip__front {
  pointer-events: none;
}

/* ── Dim Overlay ── */
.club-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 90;
  transition: opacity 0.3s;
}
.club-overlay--active {
  display: block;
}

.club-card-flip--flipped {
  z-index: 100;
}

/* ── Club Card Dark Mode ── */
body.dark .club-card--cssc .club-card {
  box-shadow: 0 0 20px rgba(240,192,64,0.1);
}
body.dark .club-card--quill .club-card {
  background: #2A2720;
  border-color: rgba(201,169,110,0.35);
  --laser-color: rgba(201,169,110,0.8);
  color: #E8DFD0;
}
body.dark .club-card--quill .club-card-flip__back {
  background: #2A2720;
  color: #E8DFD0;
  border-color: #C9A96E;
}
body.dark .club-card--quill .club-card__logo-area {
  background: #2A2720;
  border-color: #C9A96E;
}
body.dark .club-card--quill .club-card__logo,
body.dark .club-detail__logo[src*="csiaquill"] {
  filter: brightness(0) invert(1);
}

body.dark .club-card--roundsquare .club-card {
  background: #2A1012;
  border-color: #C95560;
  color: #F0C0C4;
}
body.dark .club-card--roundsquare .club-card-flip__back {
  background: #2A1012;
  color: #F0C0C4;
  border-color: #C95560;
}
body.dark .club-card--roundsquare .club-card__logo-area {
  background: #2A1012;
  border-color: #C95560;
}

body.dark .club-card--mun .club-card {
  background: #081628;
  box-shadow: 0 0 20px rgba(74,144,217,0.1);
}
body.dark .club-card--mun .club-card-flip__back {
  background: #081628;
  border-color: #3A7BC0;
}
body.dark .club-card--mun .club-card__logo-area {
  background: #081628;
  border-color: #3A7BC0;
}

/* ── Club Detail Header ── */
.club-detail__header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.club-detail__logo-wrap {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--space-3);
}

.club-detail__logo {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}

.club-detail__header-text {
  flex: 1;
}

.club-detail__category {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.club-detail__name-kr {
  font-size: var(--text-sm);
  opacity: 0.7;
  margin-top: 2px;
}

.detail--club .detail__header {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.detail--club .detail__title {
  margin-top: var(--space-2);
}

/* ── AP Detail Page ── */
.ap-detail-header {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.ap-detail-header__icon {
  opacity: 0.25;
  flex-shrink: 0;
}

.ap-detail-header__icon svg {
  width: 80px;
  height: 80px;
}

.ap-detail-header__text {
  position: relative;
  z-index: 1;
}

.ap-detail-header__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-1);
}

.ap-detail-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: #fff;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.ap-detail-header__title-kr {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.8);
}

.ap-detail-section {
  margin-bottom: var(--space-6);
}

.ap-detail-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.ap-detail-section__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* AP Units */
.ap-units {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ap-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}

.ap-unit__name {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-medium);
}

.ap-unit__weight {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
}

/* AP Scores */
.ap-scores {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ap-score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ap-score__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  width: 36px;
  text-align: right;
}

.ap-score__bar-wrap {
  flex: 1;
  height: 20px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ap-score__bar {
  height: 100%;
  border-radius: var(--radius-md);
  transition: width var(--duration-slow) var(--ease-out);
}

.ap-score__pct {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  width: 36px;
}

/* AP Detail Links */
.ap-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.detail--csia .detail__website-link {
  background: var(--color-csblue-600);
}

.detail--csia .detail__website-link:hover {
  background: var(--color-csblue-700);
}

/* Responsive AP Cards & Club Cards */
@media (max-width: 1024px) {
  .ap-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ap-card-grid {
    grid-template-columns: 1fr;
  }
  .club-card-grid {
    grid-template-columns: 1fr;
  }
}

/* University sub-chips */
.pc-university-chips {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.chip--university {
  font-size: 11px;
}

.chip--readonly {
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* ==========================================================================
   Responsive — Mode Navigation
   ========================================================================== */
@media (max-width: 1400px) {
  body.has-mode-nav .nav .nav__inner { padding-left: var(--space-6); padding-right: var(--space-16); }
  body.has-mode-nav .main .layout { padding-left: var(--space-6); padding-right: var(--space-16); }
  body.has-mode-nav .footer { padding-left: var(--space-6); padding-right: var(--space-16); }
}

@media (max-width: 1200px) {
  body.has-mode-nav .nav .nav__inner { padding-left: var(--space-4); padding-right: var(--space-8); }
  body.has-mode-nav .main .layout { padding-left: var(--space-4); padding-right: var(--space-8); }
  body.has-mode-nav .footer { padding-left: var(--space-4); padding-right: var(--space-8); }
}

@media (max-width: 768px) {
  .mode-nav {
    position: fixed;
    top: auto;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    flex-direction: row;
    padding: var(--space-1-5) var(--space-3);
    padding-top: var(--space-1-5);
    gap: var(--space-1);
    border-right: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 16px rgba(17, 24, 39, 0.10), 0 1px 4px rgba(17, 24, 39, 0.04);
  }

  .mode-nav__btn {
    width: auto;
    padding: var(--space-1-5) var(--space-3);
    flex-direction: row;
    gap: var(--space-1);
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
  }

  .mode-nav__icon svg {
    width: 16px;
    height: 16px;
  }

  .mode-nav__icon--csia svg {
    width: 22px;
    height: 12px;
  }

  body.has-mode-nav .nav .nav__inner { margin-left: 0; padding-left: var(--space-6); padding-right: var(--space-6); }
  body.has-mode-nav .main { margin-left: 0; padding-bottom: 80px; }
  body.has-mode-nav .main .layout { padding-left: var(--space-4); padding-right: var(--space-4); }
  body.has-mode-nav .footer { margin-left: 0; padding-bottom: 64px; padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ==========================================================================
   Flash prevention for dark mode
   ========================================================================== */
html.dark-pending body {
  visibility: hidden;
}

/* Theme transition — applied temporarily during toggle */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition: background-color 0.75s ease,
              color 0.75s ease,
              border-color 0.75s ease,
              box-shadow 0.75s ease,
              fill 0.75s ease,
              stroke 0.75s ease !important;
}

/* ==========================================================================
   DARK MODE — Component Overrides
   ========================================================================== */

/* Scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: #3a3a3a; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #555555; }

/* Nav glassmorphism */
body.dark .nav {
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Mode nav */
body.dark .mode-nav {
  background: #111111;
  border-right-color: #2a2a2a;
}

body.dark .mode-nav__btn:hover {
  background: #1e1e1e;
}

body.dark .mode-nav__btn--active {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.08);
}

/* Category buttons */
body.dark .category-btn.active {
  border-color: #E8546A;
  background: rgba(232, 84, 106, 0.12);
  color: #E8546A;
}

/* Stars */
body.dark .star--filled { color: #E8546A; }
body.dark .star--empty { color: #3a3a3a; }

/* Loading dots */
body.dark .loading-indicator__dot { background: #E8546A; }

/* Badge overrides */
body.dark .badge--sub {
  background: #1e1e1e;
  color: #a0a0a0;
}

body.dark .badge--type {
  background: rgba(232, 84, 106, 0.15);
  color: #E8546A;
}

body.dark .badge--recruitment[data-recruit="상시"] {
  background: rgba(22, 101, 52, 0.2);
  color: #6ee7a0;
}
body.dark .badge--recruitment[data-recruit="모집중"] {
  background: rgba(30, 64, 175, 0.2);
  color: #93bbfd;
}
body.dark .badge--recruitment[data-recruit="수시"] {
  background: rgba(146, 64, 14, 0.2);
  color: #fbbf24;
}
body.dark .badge--recruitment:not([data-recruit="상시"]):not([data-recruit="모집중"]):not([data-recruit="수시"]) {
  background: rgba(3, 105, 161, 0.15);
  color: #7dd3fc;
}

/* Card hover */
body.dark .card:hover {
  border-color: #3a3a3a;
  background: #1c1c1c;
}

/* D-day dark variants */
body.dark .card__d-day--upcoming {
  background: rgba(232, 84, 106, 0.12);
  color: #E8546A;
}

body.dark .card__d-day--urgent {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Hashtag dark */
body.dark .card__hashtag {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.08);
  border-color: rgba(232, 84, 106, 0.2);
}

body.dark .card__hashtag:hover {
  background: rgba(232, 84, 106, 0.15);
  border-color: rgba(232, 84, 106, 0.25);
  color: #F2889A;
}

body.dark .card__hashtag--counselor {
  background: rgba(124, 58, 237, 0.15);
  color: #A78BFA;
  border-color: rgba(124, 58, 237, 0.3);
}

body.dark .card__hashtag--counselor:hover {
  background: rgba(124, 58, 237, 0.25);
  color: #C4B5FD;
  border-color: rgba(124, 58, 237, 0.4);
}

body.dark .card__hashtag--reviewed {
  background: rgba(22, 163, 74, 0.15);
  color: #4ADE80;
  border-color: rgba(22, 163, 74, 0.3);
}

body.dark .card__hashtag--reviewed:hover {
  background: rgba(22, 163, 74, 0.25);
  color: #86EFAC;
  border-color: rgba(22, 163, 74, 0.4);
}

body.dark .hashtag-indicator {
  background: rgba(232, 84, 106, 0.08);
  border-color: rgba(232, 84, 106, 0.2);
}

body.dark .hashtag-indicator__tag {
  color: #E8546A;
}

/* Detail page dark */
body.dark .detail {
  background: #141414;
  border-color: #2a2a2a;
}

body.dark .detail__info-grid {
  background: #1a1a1a;
}

body.dark .progress-tracker {
  background: #1a1a1a;
}

body.dark .pathway-box {
  background: #1a1a1a;
  border-color: #2a2a2a;
}

body.dark .pathway-box__step-link {
  background: #141414;
  border-color: #2a2a2a;
  color: #a0a0a0;
}

body.dark .pathway-box__step-link:hover {
  border-color: rgba(232, 84, 106, 0.3);
  color: #E8546A;
}

body.dark .pathway-box__step-label {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.12);
  border-color: rgba(232, 84, 106, 0.25);
}

/* Detail hashtag dark */
body.dark .detail__hashtag {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.08);
  border-color: rgba(232, 84, 106, 0.2);
}

body.dark .detail__hashtag:hover {
  background: rgba(232, 84, 106, 0.15);
  border-color: rgba(232, 84, 106, 0.25);
}

body.dark .detail__keyword {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.12);
}

/* Detail d-day dark */
body.dark .detail__d-day--upcoming {
  background: rgba(232, 84, 106, 0.12);
  color: #E8546A;
  border-color: rgba(232, 84, 106, 0.2);
}

body.dark .detail__d-day--urgent {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Bookmark fav dark */
body.dark .card__fav-btn:hover {
  color: #E8546A;
  background: rgba(232, 84, 106, 0.12);
}

body.dark .card__fav-btn--active {
  color: #E8546A;
}

body.dark .detail__fav-btn:hover {
  color: #E8546A;
  border-color: rgba(232, 84, 106, 0.25);
  background: rgba(232, 84, 106, 0.08);
}

body.dark .detail__fav-btn--active {
  color: #E8546A;
  border-color: rgba(232, 84, 106, 0.25);
  background: rgba(232, 84, 106, 0.08);
}

body.dark .favorites-toggle:hover {
  border-color: rgba(232, 84, 106, 0.25);
  color: #E8546A;
}

body.dark .favorites-toggle.active {
  border-color: rgba(232, 84, 106, 0.25);
  background: rgba(232, 84, 106, 0.08);
  color: #E8546A;
}

/* Website link dark */
body.dark .detail__website-link {
  background: #f0f0f0;
  color: #0d0d0d;
}

body.dark .detail__website-link:hover {
  background: #e0e0e0;
}

/* Footer dark */
body.dark .footer {
  border-top-color: #2a2a2a;
}

/* Empty state dark */
body.dark .empty-state__icon {
  color: #3a3a3a;
}

/* Progress tracker steps dark */
body.dark .progress-tracker__dot {
  background: #1a1a1a;
  border-color: #3a3a3a;
}

body.dark .progress-tracker__step--active .progress-tracker__dot {
  border-color: #E8546A;
  background: #E8546A;
  box-shadow: 0 0 0 4px rgba(232, 84, 106, 0.15);
}

body.dark .progress-tracker__step--done .progress-tracker__dot {
  border-color: #E8546A;
  background: #E8546A;
}

body.dark .progress-tracker__step--active .progress-tracker__label {
  color: #E8546A;
}

body.dark .card__stages-label {
  color: #E8546A;
}

/* ── Dark Mode × Competition accent ── */
body.dark:not(.mode--precollege):not(.mode--csia):not(.mode--volunteer) .chip.active {
  background: var(--color-accent-500);
  color: #fff;
}

/* ── Dark Mode × Pre-college Teal ── */
body.dark.mode--precollege .chip.active {
  background: var(--color-teal-500);
  color: #0d0d0d;
}

body.dark.mode--precollege .search-input:focus {
  border-color: var(--color-teal-400);
  box-shadow: 0 0 0 3px rgba(59, 174, 160, 0.2);
}

body.dark.mode--precollege .mode-nav__btn--active {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.1);
}

body.dark.mode--precollege .card__hashtag {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.08);
  border-color: rgba(59, 174, 160, 0.2);
}

body.dark.mode--precollege .card__hashtag:hover {
  background: rgba(59, 174, 160, 0.15);
  border-color: rgba(59, 174, 160, 0.3);
  color: var(--color-teal-300);
}

body.dark.mode--precollege .card__d-day--upcoming {
  background: rgba(59, 174, 160, 0.1);
  color: var(--color-teal-400);
}

body.dark.mode--precollege .hashtag-indicator {
  background: rgba(59, 174, 160, 0.08);
  border-color: rgba(59, 174, 160, 0.2);
}

body.dark.mode--precollege .hashtag-indicator__tag {
  color: var(--color-teal-400);
}

/* ── Volunteer (Amber) Dark Mode ── */
body.dark.mode--volunteer .chip.active {
  background: var(--color-amber-500);
  color: #0d0d0d;
}

body.dark.mode--volunteer .search-input:focus {
  border-color: var(--color-amber-400);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

body.dark.mode--volunteer .mode-nav__btn--active {
  color: var(--color-amber-400);
  background: rgba(245, 158, 11, 0.1);
}

body.dark.mode--volunteer .card__hashtag {
  color: var(--color-amber-400);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

body.dark.mode--volunteer .card__hashtag:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--color-amber-300);
}

body.dark.mode--volunteer .hashtag-indicator {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

body.dark.mode--volunteer .hashtag-indicator__tag {
  color: var(--color-amber-400);
}

body.dark .card__university-badge {
  color: var(--color-text-primary);
}

body.dark .card__field-tag {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.1);
}

body.dark .badge--format {
  background: rgba(59, 174, 160, 0.1);
  color: var(--color-teal-400);
}

body.dark .detail__university-badge {
  color: var(--color-teal-400);
}

body.dark .detail__field-tag {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.1);
  border-color: rgba(59, 174, 160, 0.2);
}

body.dark .detail--precollege .detail__website-link {
  background: var(--color-teal-500);
  color: #0d0d0d;
}

body.dark .detail--precollege .detail__website-link:hover {
  background: var(--color-teal-400);
}

body.dark .detail--precollege .detail__d-day--upcoming {
  background: rgba(59, 174, 160, 0.1);
  color: var(--color-teal-400);
  border-color: rgba(59, 174, 160, 0.2);
}

body.dark .detail--precollege .detail__hashtag {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.08);
  border-color: rgba(59, 174, 160, 0.2);
}

body.dark .detail--precollege .detail__hashtag:hover {
  background: rgba(59, 174, 160, 0.15);
  border-color: rgba(59, 174, 160, 0.3);
  color: var(--color-teal-300);
}

body.dark .detail--precollege .detail__keyword {
  color: var(--color-teal-400);
  background: rgba(59, 174, 160, 0.1);
}

body.dark .detail--precollege .progress-tracker__fill {
  background: var(--color-teal-500);
}

/* ---------- Dark: Volunteer Detail — Amber ---------- */
body.dark .detail--volunteer .detail__hashtag {
  color: var(--color-amber-400);
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
}

body.dark .detail--volunteer .detail__hashtag:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--color-amber-300);
}

body.dark .detail--volunteer .detail__keyword {
  color: var(--color-amber-400);
  background: rgba(245, 158, 11, 0.1);
}

body.dark .detail--volunteer .detail__website-link {
  background: var(--color-amber-500);
  color: #0d0d0d;
}

body.dark .detail--volunteer .detail__website-link:hover {
  background: var(--color-amber-400);
}

body.dark .pc-university-chips {
  border-top-color: #2a2a2a;
}

/* Sidebar body dark (floating card) */
body.dark .sidebar__body {
  background: #111111;
  border-color: #2a2a2a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Sidebar toggle dark */
body.dark .sidebar__toggle {
  background: #161616;
  border-color: #2a2a2a;
  color: #b0b0b0;
}

/* Reset btn dark */
body.dark .reset-btn {
  color: #b0b0b0;
  border-color: #2a2a2a;
}

body.dark .reset-btn:hover {
  background: #1e1e1e;
}

/* Filter section title in dark */
body.dark .filter-section__title {
  color: #909090;
}

/* Card description readability */
body.dark .card__desc {
  color: #b0b0b0;
}

/* Detail description readability */
body.dark .detail__desc {
  color: #c0c0c0;
}

body.dark .detail__body p {
  color: #b8b8b8;
}

/* Category button dark improvements */
body.dark .category-btn {
  background: #161616;
  border-color: #2a2a2a;
  color: #b0b0b0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.dark .category-btn:hover {
  background: #1e1e1e;
  border-color: #3a3a3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

body.dark .category-btn .category-btn__icon {
  color: #909090;
}

/* Chip dark mode */
body.dark .chip {
  border-color: #2a2a2a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.dark .chip:hover {
  background: #282828;
  border-color: #3a3a3a;
}

body.dark .chip.active {
  border-color: transparent;
}

/* Filter section divider in dark */
body.dark .filter-section + .filter-section {
  border-top-color: #2a2a2a;
}


/* ── Dark Mode × CSIA Blue ── */
body.dark.mode--csia .mode-nav__btn--active {
  color: var(--color-csblue-400);
  background: rgba(74, 137, 191, 0.1);
}

body.dark.mode--csia .chip.active {
  background: var(--color-csblue-500);
  color: #0d0d0d;
}

body.dark.mode--csia .search-input:focus {
  border-color: var(--color-csblue-400);
  box-shadow: 0 0 0 3px rgba(74, 137, 191, 0.2);
}

body.dark .csia-login-modal {
  background: #161616;
  border-color: #2a2a2a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.dark .csia-subnav__btn--active {
  background: rgba(74, 137, 191, 0.1);
  color: var(--color-csblue-400);
}

body.dark .ap-card {
  background: #161616;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .ap-card:hover {
  background: #1c1c1c;
  border-color: #3a3a3a;
}

body.dark .ap-card__name-kr {
  color: #b0b0b0;
}

body.dark .ap-card__exam-date {
  color: #858585;
}

body.dark .ap-card__exam-date svg {
  color: var(--color-csblue-400);
}

body.dark .ap-card__fav {
  color: #606060;
}
body.dark .ap-card__fav--active {
  color: var(--color-csblue-400);
}

body.dark .ap-filter-btn {
  border-color: #2a2a2a;
  color: #909090;
}
body.dark .ap-filter-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-400);
}
body.dark .ap-filter-btn--active {
  background: var(--color-csblue-500);
  border-color: var(--color-csblue-500);
  color: #0d0d0d;
}

body.dark .ap-filter-bar__sep {
  background: #2a2a2a;
}

body.dark .ap-filter-fav-btn {
  border-color: #2a2a2a;
  color: #606060;
}
body.dark .ap-filter-fav-btn:hover {
  border-color: var(--color-csblue-400);
  color: var(--color-csblue-400);
}
body.dark .ap-filter-fav-btn--active {
  background: var(--color-csblue-500);
  border-color: var(--color-csblue-500);
  color: #0d0d0d;
}

body.dark .ap-unit {
  background: #1a1a1a;
  border-color: #2a2a2a;
}

body.dark .ap-score__bar-wrap {
  background: #1a1a1a;
}

body.dark .detail--csia .detail__website-link {
  background: var(--color-csblue-500);
  color: #0d0d0d;
}

body.dark .detail--csia .detail__website-link:hover {
  background: var(--color-csblue-400);
}

body.dark .csia-user-info {
  border-top-color: #2a2a2a;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN — Badge, Edit Button, Edit Mode
   Uses theme accent colors (Warm Rose). Purple ONLY for 카운슬러추천.
   ══════════════════════════════════════════════════════════════ */

/* Admin Badge (in header) */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--color-accent-500);
  color: #fff;
  margin-right: 8px;
  white-space: nowrap;
}

/* Edit Button (next to bookmark) */
.detail__edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.detail__edit-btn:hover {
  color: var(--color-accent-500);
  border-color: var(--color-accent-200);
  background: var(--color-accent-50);
}

body.dark .detail__edit-btn:hover {
  color: var(--color-accent-400);
  border-color: var(--color-accent-200);
  background: var(--color-accent-50);
}

/* Admin Edit Bar (sticky top bar in edit mode) */
.admin-edit-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--color-accent-500);
  color: #fff;
  border-radius: 10px;
  margin-bottom: var(--space-4);
  box-shadow: 0 4px 16px rgba(232, 84, 106, 0.25);
}

.admin-edit-bar__label {
  font-weight: 700;
  font-size: 0.9rem;
}

.admin-edit-bar__actions {
  display: flex;
  gap: 8px;
}

.admin-edit-bar__btn {
  padding: 6px 18px;
  border-radius: 6px;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-edit-bar__btn--cancel {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.admin-edit-bar__btn--cancel:hover {
  background: rgba(255,255,255,0.25);
}

.admin-edit-bar__btn--save {
  background: #fff;
  color: var(--color-accent-600);
}

.admin-edit-bar__btn--save:hover {
  background: var(--color-accent-50);
}

.admin-edit-bar__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Editable Field Highlight */
.editable-field {
  outline: 2px dashed var(--color-border);
  outline-offset: 4px;
  border-radius: 4px;
  min-height: 1.2em;
  cursor: text;
}

.editable-field:focus {
  outline-color: var(--color-accent-500);
  background: var(--color-gray-50);
}

body.dark .editable-field:focus {
  background: rgba(255,255,255,0.04);
}

/* Edit Inputs */
.edit-input {
  padding: 4px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.edit-input:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px rgba(232, 84, 106, 0.1);
}

.detail__info-value .edit-input {
  width: 100%;
  box-sizing: border-box;
}
.detail__info-value .edit-input.edit-input--num {
  width: 60px;
  display: inline-block;
}

.edit-input--textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.edit-date-row .edit-input {
  flex: 1;
  min-width: 0;
}

.edit-input--date {
  width: 150px;
}

.edit-input--num {
  width: 60px;
  text-align: center;
}

.edit-select {
  padding: 4px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.edit-select:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px rgba(232, 84, 106, 0.1);
}

.edit-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.edit-textarea:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px rgba(232, 84, 106, 0.1);
}

.edit-date-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.edit-date-row label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.edit-website-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-website-row label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.edit-website-row .edit-input {
  width: 100%;
}

/* Stages Editor */
.stages-editor {
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: var(--space-4);
}

body.dark .stages-editor {
  background: rgba(255,255,255,0.02);
  border-color: var(--color-border);
}

.stages-editor__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}

.stages-editor__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
}

body.dark .stages-editor__row {
  background: rgba(255,255,255,0.03);
}

.stages-editor__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

body.dark .stages-editor__num {
  background: var(--color-gray-200);
}

.stages-editor__label-input {
  flex: 1;
  min-width: 0;
}

.stages-editor__date-input {
  width: 150px;
  flex-shrink: 0;
}

.stages-editor__remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.stages-editor__remove:hover {
  background: var(--color-error-100);
  border-color: var(--color-error-500);
  color: var(--color-error-600);
}

body.dark .stages-editor__remove:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
  color: #F87171;
}

.stages-editor__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1.5px dashed var(--color-gray-300);
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.stages-editor__add:hover {
  background: var(--color-gray-50);
  border-color: var(--color-accent-400);
  color: var(--color-accent-600);
  border-style: solid;
}

/* Hashtag Editor */
.hashtag-editor {
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: var(--space-4);
}

body.dark .hashtag-editor {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
}

.hashtag-editor__current {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  min-height: 28px;
}

.hashtag-editor__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-accent-50);
  color: var(--color-accent-600);
  cursor: pointer;
  transition: all 0.15s;
}

.hashtag-editor__tag:hover {
  background: var(--color-accent-100);
}

/* Counselor tag stays purple */
.hashtag-editor__tag--counselor {
  background: #EDE9FE;
  color: #7C3AED;
}

.hashtag-editor__tag--counselor:hover {
  background: #DDD6FE;
}

.hashtag-editor__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(0,0,0,0.1);
  color: inherit;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  margin-left: 2px;
}

.hashtag-editor__tag-remove:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #DC2626;
}

.hashtag-editor__input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.hashtag-editor__input {
  flex: 1;
  padding: 5px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}

.hashtag-editor__input:focus {
  border-color: var(--color-accent-500);
}

.hashtag-editor__add-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1.5px solid var(--color-border);
  background: var(--color-gray-50);
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.hashtag-editor__add-btn:hover {
  background: var(--color-accent-50);
  border-color: var(--color-accent-300);
  color: var(--color-accent-600);
}

.hashtag-editor__special-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Counselor button — flat style */
.hashtag-editor__counselor-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #7C3AED;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.hashtag-editor__counselor-btn:hover {
  background: rgba(124, 58, 237, 0.08);
}

/* Reviewed button — flat style */
.hashtag-editor__reviewed-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #16a34a;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.hashtag-editor__reviewed-btn:hover {
  background: rgba(22, 163, 74, 0.08);
}

.hashtag-editor__counselor-tag {
  background: #7C3AED;
  color: #fff;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
}

.hashtag-editor__reviewed-tag {
  background: #16a34a;
  color: #fff;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
}

/* Green reviewed tag in editor */
.hashtag-editor__tag--reviewed {
  background: #DCFCE7;
  color: #16a34a;
  border-color: #86EFAC;
}

.hashtag-editor__tag--deleted {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FCA5A5;
  opacity: 0.7;
}
.hashtag-editor__tag--deleted s {
  text-decoration: line-through;
}
.hashtag-editor__tag-undo {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  padding: 0 2px;
  color: #2563EB;
}
.hashtag-editor__tag-undo:hover {
  color: #1D4ED8;
}

.hashtag-editor__related {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 8px;
}

.hashtag-editor__related-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.hashtag-editor__related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hashtag-editor__related-list li {
  padding: 4px 0;
  font-size: 0.82rem;
}

.hashtag-editor__related-list a {
  color: var(--color-accent-500);
  text-decoration: none;
}

.hashtag-editor__related-list a:hover {
  text-decoration: underline;
}

.hashtag-editor__related-empty {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Purple counselor hashtag — detail view */
.detail__hashtag--counselor {
  background: #EDE9FE !important;
  color: #7C3AED !important;
  border-color: #C4B5FD !important;
}

.detail__hashtag--counselor:hover {
  background: #DDD6FE !important;
}

body.dark .detail__hashtag--counselor {
  background: rgba(124, 58, 237, 0.15) !important;
  color: #A78BFA !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

body.dark .detail__hashtag--counselor:hover {
  background: rgba(124, 58, 237, 0.25) !important;
}

/* Green reviewed hashtag — detail view */
.detail__hashtag--reviewed {
  background: #DCFCE7 !important;
  color: #16a34a !important;
  border-color: #86EFAC !important;
}

.detail__hashtag--reviewed:hover {
  background: #BBF7D0 !important;
}

body.dark .detail__hashtag--reviewed {
  background: rgba(22, 163, 74, 0.15) !important;
  color: #4ADE80 !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}

body.dark .detail__hashtag--reviewed:hover {
  background: rgba(22, 163, 74, 0.25) !important;
}

/* Progress tracker empty state */
.progress-tracker__empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  padding: 16px;
  margin: 0;
}

/* Academic Field Checkboxes (pre-college edit) */
.edit-field-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.edit-field-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.edit-field-checkbox:has(input:checked) {
  background: var(--color-teal-100);
  color: var(--color-teal-700);
}

.edit-field-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-teal-500);
}

body.dark .edit-field-checkbox {
  background: var(--color-gray-200);
}

body.dark .edit-field-checkbox:has(input:checked) {
  background: var(--color-teal-100);
  color: var(--color-teal-400);
}

/* Edit mode: show all info items (even empty ones) */
.detail--editing .detail__info-item {
  display: flex !important;
}

/* Dark mode overrides for edit elements */
body.dark .edit-input,
body.dark .edit-select,
body.dark .edit-textarea {
  background: #1a1a1a;
  color: #e0e0e0;
  border-color: var(--color-border);
}

body.dark .edit-input:focus,
body.dark .edit-select:focus,
body.dark .edit-textarea:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px rgba(232, 84, 106, 0.15);
}

body.dark .editable-field {
  outline-color: var(--color-border);
}

body.dark .editable-field:focus {
  outline-color: var(--color-accent-500);
}

/* ==========================================================================
   Admin Action Buttons (수정기록, 수정요청)
   ========================================================================== */
.admin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: all var(--duration-fast) var(--ease-default);
  cursor: pointer;
}

.admin-download-btn {
  color: #166534;
  border-color: #86efac;
  background: #f0fdf4;
}

.admin-download-btn:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

body.dark .admin-download-btn {
  color: #86efac;
  border-color: #14532d;
  background: #052e16;
}

body.dark .admin-download-btn:hover {
  background: #14532d;
  border-color: #22c55e;
}

.admin-action-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-tertiary);
  background: var(--color-surface-hover);
}


/* ── Dark Mode ── */
body.dark .admin-action-btn {
  background: #161616;
  border-color: #2a2a2a;
  color: #b0b0b0;
}

body.dark .admin-action-btn:hover {
  background: #1e1e1e;
  color: #e0e0e0;
}