/* 글래스모피즘 — 라이트 1순위 / 다크는 blur 약화 + glow (가독성·가시성 강화) */
.glass-card {
  position: relative;
  background: var(--surface-glass);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  color: var(--ink);
  transition:
    transform var(--dur-3) var(--easing-standard),
    box-shadow var(--dur-3) var(--easing-standard),
    border-color var(--dur-2) var(--easing-standard);
}
.glass-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-glass-strong);
}

.glass-card--strong {
  background: var(--surface-glass-2);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--shadow-glass-strong);
  border: 1.5px solid var(--line-strong);
}

.glass-card--floating {
  background: var(--surface-glass-2);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid var(--line-strong);
  box-shadow:
    0 16px 44px rgba(14,28,64,0.22),
    0 2px 0 rgba(255,255,255,0.85) inset;
  border-radius: var(--radius-lg);
}

/* 다크 — blur 적당히 + 인디고 glow 강조 */
:root[data-theme="dark"] .glass-card {
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-glass);
  border-color: var(--line);
}
:root[data-theme="dark"] .glass-card--strong,
:root[data-theme="dark"] .glass-card--floating {
  background: var(--surface-glass-2);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.6),
    0 0 0 1px rgba(138,180,248,0.18) inset,
    0 0 24px rgba(138,180,248,0.08);
}

/* 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card,
  .glass-card--strong,
  .glass-card--floating {
    background: var(--surface);
  }
  :root[data-theme="dark"] .glass-card,
  :root[data-theme="dark"] .glass-card--strong,
  :root[data-theme="dark"] .glass-card--floating {
    background: var(--bg-elev);
  }
}

/* 광택 라인 (라이트 전용) */
.glass-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0) 22%
  );
  mix-blend-mode: overlay;
}
:root[data-theme="dark"] .glass-card::before { display: none; }

.glass-card:hover { transform: translateY(-2px); }