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

/* ── Default tokens (blue / light-dark)
   Pages with different themes override :root in their own <style>. ── */
:root {
  --bg:        #ffffff;
  --bg2:       #f7f7f5;
  --bg3:       #f0efe9;
  --text:      #1a1a1a;
  --text2:     #6b6b6b;
  --text3:     #a0a09a;
  --border:    rgba(0,0,0,0.1);
  --border2:   rgba(0,0,0,0.18);
  --radius:    8px;
  --radius-lg: 12px;
  --blue:      #1a6ef5;
  --blue-bg:   rgba(26,110,245,0.08);
  --green:     #2da44e;
  --green-bg:  rgba(45,164,78,0.1);
  --red:       #e05252;
  --gold:      #c9973a;
  --gold-bg:   rgba(201,151,58,0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #1a1a1a;
    --bg2:     #242424;
    --bg3:     #2a2a2a;
    --text:    #f0f0f0;
    --text2:   #a0a09a;
    --text3:   #6b6b6b;
    --border:  rgba(255,255,255,0.1);
    --border2: rgba(255,255,255,0.18);
  }
}

/* ── Base ────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg3);
  color: var(--text);
  min-height: 100vh;
  padding: 1.5rem 1rem 4rem;
}

.wrap { max-width: 640px; margin: 0 auto; }

/* ── Ad ──────────────────────────────────────────────── */
.ad {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text3); letter-spacing: 0.05em;
  min-height: 90px;
}
.ad-top    { margin-bottom: 1.5rem; }
.ad-mid    { min-height: 60px; margin: 1.25rem 0; }
.ad-bottom { min-height: 250px; margin-top: 1.5rem; }

/* ── Site header ─────────────────────────────────────── */
.site-header {
  text-align: center;
  padding: 1.5rem 0 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 0.5px solid var(--border);
}
.site-header h1 { font-size: 20px; font-weight: 500; }
.site-header p  { font-size: 13px; color: var(--text3); margin-top: 4px; }

/* ── Card ────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ── Site footer ─────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding-top: 1.5rem;
  margin-top: 1rem;
  border-top: 0.5px solid var(--border);
  font-size: 12px;
  color: var(--text3);
}
.site-footer a { color: var(--text3); text-decoration: none; margin: 0 8px; }
.site-footer a:hover { color: var(--text2); }

/* ── Animation ───────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }