/* 유리 규칙 (SPEC 5.2): 배경 블롭, 유리 카드, 광택, pill, 눌림 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ---- 배경 블롭 ---- */
.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--blob-opacity);
  width: 50vw; height: 50vw; min-width: 260px; min-height: 260px;
  animation: drift 48s ease-in-out infinite alternate;
}
.blob.b1 { background: var(--blob-1); top: -12vw; left: -10vw; width: 58vw; height: 58vw; }
.blob.b2 { background: var(--blob-2); top: 18vh; right: -16vw; animation-duration: 56s; animation-delay: -12s; }
.blob.b3 { background: var(--blob-3); bottom: -14vw; left: 4vw; width: 44vw; height: 44vw; animation-duration: 42s; animation-delay: -20s; }
.blob.b4 { background: var(--blob-4); bottom: 12vh; right: 10vw; width: 40vw; height: 40vw; animation-duration: 60s; animation-delay: -30s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vh) scale(1.08); }
  100% { transform: translate(-4vw, -3vh) scale(.95); }
}

/* ---- 유리 ---- */
.glass, .glass-strong {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
}
.glass-strong {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(170%);
  backdrop-filter: blur(var(--blur-strong)) saturate(170%);
}
/* 광택: 상단 1px 흰 라인 + 왼쪽 위 은은한 반사 */
.glass::before, .glass-strong::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--glare) 50%, transparent) top center / 78% 1px no-repeat,
    radial-gradient(120% 90% at 0% 0%, var(--glare-soft), transparent 46%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255,255,255,.88); --glass-strong: rgba(255,255,255,.95); }
  :root[data-theme="dark"] { --glass: rgba(28,32,52,.92); --glass-strong: rgba(34,38,60,.96); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --glass: rgba(28,32,52,.92); --glass-strong: rgba(34,38,60,.96); }
  }
}

/* ---- pill 버튼·칩 ---- */
button { font: inherit; color: inherit; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: transform 120ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
  box-shadow: inset 0 1px 0 var(--glare-soft);
}
.pill:active, .press:active { transform: scale(.96); }
.pill[aria-pressed="true"], .pill.on {
  background: var(--text); color: var(--bg); border-color: transparent;
}
.pill.muted { color: var(--text-2); }
.icon-btn {
  width: 40px; height: 40px; padding: 0; justify-content: center; min-height: 40px;
}
.icon-btn svg, .pill svg { width: 18px; height: 18px; flex: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}