:root {
  --bg: #0b0c0f;
  --card: #11131a;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #60a5fa;
  --ring: #93c5fd66;
}
@media (prefers-color-scheme: light) {
  :root { --bg:#f8fafc; --card:#ffffff; --text:#111827; --muted:#6b7280; --accent:#2563eb; --ring:#2563eb33; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); }

header { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { margin: 0; font-size: clamp(20px, 2.8vw, 36px); letter-spacing: -0.02em; }
.sub { color: var(--muted); margin-top: 6px; font-size: 14px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.btn { padding:10px 18px; font-size:15px; font-weight:600; border:none; border-radius:12px; color:#fff; background:linear-gradient(135deg,#6d5dfc,#4f46e5); cursor:pointer; box-shadow:0 6px 12px rgba(0,0,0,0.15); transition:transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease; text-shadow:0 1px 2px rgba(0,0,0,0.2); }
.btn:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 10px 20px rgba(0,0,0,0.2); background:linear-gradient(135deg,#7c6dff,#5c3ed1); }
.btn:active, .btn[aria-pressed="true"] { transform:translateY(1px) scale(0.98); box-shadow:0 4px 10px rgba(0,0,0,0.15); background:linear-gradient(135deg,#4f46e5,#312e81); }

.search { flex: 1 1 220px; position: relative; }
.search input { width: 100%; padding: 10px 12px 10px 36px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--text) 12%, transparent); background: var(--card); color: var(--text); }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.card { position: relative; overflow: clip; border-radius: 16px; background: var(--card); border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); }
.card img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .35s ease; }
.card .badge { position: absolute; top: 8px; left: 8px; padding: 3px 10px; font-size: 10px; font-weight: 500; color: #ffffff; background: rgba(0, 0, 0, 0.50); border: none; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

.card button { all: unset; cursor: zoom-in; position: absolute; inset: 0; }
.card:hover img { transform: scale(1.04); }

dialog#lightbox { width: 100vw; max-width: none; height: 100vh; border: none; padding: 0; background: color-mix(in oklab, #000 75%, transparent); }
dialog::backdrop { background: rgba(0,0,0,.6); }
.viewer { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.viewer img { max-width: min(92vw, 1400px); max-height: 80vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.viewer figcaption { margin-top: 12px; color: var(--muted); text-align: center; }
.nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nav button { pointer-events: auto; border: 1px solid color-mix(in oklab, var(--text) 10%, transparent); background: color-mix(in oklab, var(--bg) 60%, transparent); color: var(--text); width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; margin: 0 16px; }
.close { position: absolute; top: 16px; right: 16px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
footer { text-align: center; color: var(--muted); padding: 30px 0 50px; }