/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --bg:          #E9E7E0;
  --panel:       #F6F4EF;
  --ink:         #0E0E0E;
  --body:        #5A5A55;
  --accent:      #1F8A5B;
  --accent-soft: rgba(31,138,91,0.08);
  --rule:        #D6D2C8;
  --ink-inv:     #F6F4EF;
  --danger:      #C8372D;
  --danger-soft: rgba(200,55,45,0.08);
  --live:        #1F8A5B;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* ── CURSOR ─────────────────────────────────────────────────── */
body {
  font-family: 'Pretendard Variable', system-ui, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' shape-rendering='crispEdges'><rect x='14' y='0' width='2' height='11' fill='%230E0E0E'/><rect x='14' y='19' width='2' height='11' fill='%230E0E0E'/><rect x='0' y='14' width='11' height='2' fill='%230E0E0E'/><rect x='19' y='14' width='11' height='2' fill='%230E0E0E'/><rect x='12' y='12' width='6' height='6' fill='%23FF3B30'/></svg>") 15 15, crosshair;
}

/* ── 총알 이펙트 ─────────────────────────────────────────────── */
.bullet-dot, .bullet-ring {
  position: fixed; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.bullet-dot  { width:6px; height:6px; background:#FF3B30; animation: bdot .18s ease-out forwards; }
.bullet-ring { width:10px; height:10px; border:2px solid #FF3B30; animation: bring .45s ease-out forwards; }
.bullet-ring.ring2 { border:1px solid rgba(200,55,45,.5); animation: bring2 .6s ease-out .05s forwards; }
@keyframes bdot  { 0%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.2)} }
@keyframes bring { 0%{opacity:.85;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(5)} }
@keyframes bring2{ 0%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(7)} }

/* ── HEADER ─────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}
.logo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink);
}
.logo-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body);
  margin-top: 3px;
}

/* ── NAV ────────────────────────────────────────────────────── */
nav { display: flex; overflow-x: auto; flex-shrink: 1; min-width: 0; }
nav a.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0px;
  text-transform: uppercase;
  padding: 12px 16px;
  background: none;
  border: none;
  border-left: 1px solid var(--rule);
  cursor: inherit;
  color: var(--body);
  text-decoration: none;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}
nav a.nav-link.active {
  background: var(--ink);
  color: var(--ink-inv);
}
nav a.nav-link:hover:not(.active) { color: var(--ink); }
nav a.nav-link.admin-link { color: var(--rule); font-size: 16px; padding: 10px 18px; }
nav a.nav-link.admin-link:hover { color: var(--body); }

/* ── MAIN ────────────────────────────────────────────────────── */
main { flex: 1; max-width: 900px; margin: 0 auto; padding: 48px 32px; width: 100%; }

.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--body);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}

/* ── RANKING CARDS ───────────────────────────────────────────── */
.rank-list { display: flex; flex-direction: column; gap: 2px; }
.rank-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  background: var(--panel);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.rank-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 800;
  font-size: 30px;
  color: var(--ink-inv);
  background: var(--ink);
  min-height: 140px;
}
.rank-card.rank-2 .rank-num { background: #3D3D3A; }
.rank-card.rank-3 .rank-num { background: #6A6A62; }
.rank-body { padding: 22px 26px; }
.rank-alias { font-weight: 700; font-size: 20px; margin-bottom: 12px; }
.pct-track  { height: 6px; background: var(--rule); margin-bottom: 10px; overflow: hidden; }
.pct-fill   { height: 100%; background: var(--danger); transition: width .7s ease; }
.rank-meta  {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--body);
  margin-bottom: 16px;
}
.vote-row { display: flex; gap: 8px; }
.vote-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 1px solid var(--rule);
  background: none;
  cursor: inherit;
  transition: all .15s;
  color: var(--body);
}
.vote-btn.v-bp:hover  { background: var(--danger); color: #fff; border-color: var(--danger); }
.vote-btn.v-ok:hover  { background: var(--accent); color: #fff; border-color: var(--accent); }
.vote-btn.voted-bp    { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.vote-btn.voted-ok    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.vote-btn:disabled    { opacity: .4; cursor: not-allowed; }

/* ── CHART / TRACKING CARDS ──────────────────────────────────── */
.chart-list  { display: flex; flex-direction: column; gap: 2px; }
.chart-card  { background: var(--panel); border: 1px solid var(--rule); padding: 22px 26px; }
.chart-head  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.chart-alias { font-weight: 700; font-size: 17px; }
.chart-total { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--body); }

.bar-wrap    { display: flex; align-items: flex-end; gap: 2px; height: 72px; position: relative; margin-top: 22px; overflow: visible; }
.hbar        { flex: 1; background: var(--accent); transition: height .3s; }
.hbar.dim    { background: var(--rule); }
.hbar.cur    { background: #f59e0b; }
.hbar.cur.dim{ background: rgba(245,158,11,.3); }
.hbar.start  { background: #e07b39; }
.bar-post-marker {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 12px; line-height: 1; margin-bottom: 4px;
  pointer-events: none; white-space: nowrap;
}
.bar-slot { position: relative; flex: 1; display: flex; align-items: flex-end; height: 100%; overflow: visible; }
.bar-slot .hbar { flex: 1; }
.bar-labels { display: grid; grid-template-columns: repeat(24, 1fr); margin-top: 8px; }
.bar-lbl-pos { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--body); }
.bar-lbl-pos-0  { grid-column: 1; }
.bar-lbl-pos-6  { grid-column: 7; }
.bar-lbl-pos-12 { grid-column: 13; }
.bar-lbl-pos-18 { grid-column: 19; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
  padding: 12px 16px; border: 1px solid var(--rule); background: var(--panel);
}
.legend-item { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--body); }
.legend-dot  { width: 12px; height: 12px; flex-shrink: 0; }

/* ── TRACKING LIST ───────────────────────────────────────────── */
.track-item    { background: var(--panel); border: 1px solid var(--rule); margin-bottom: 2px; }
.track-header  { display: flex; align-items: center; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.track-alias   { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 16px; flex: 1; min-width: 100px; }
.track-added   { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--body); }
.track-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.track-btn {
  font-size: 13px; padding: 6px 14px;
  border: 1px solid var(--rule); background: transparent;
  cursor: pointer; font-family: inherit; border-radius: 2px;
  color: var(--body); transition: background .15s, color .15s, border-color .15s;
}
.track-btn.bp { border-color: rgba(200,55,45,.3); color: var(--danger); }
.track-btn.bp:hover, .track-btn.bp.voted { background: var(--danger-soft); border-color: var(--danger); }
.track-btn.ok { border-color: rgba(31,138,91,.3); color: var(--accent); }
.track-btn.ok:hover, .track-btn.ok.voted { background: var(--accent-soft); border-color: var(--accent); }
.track-btn.detail { color: var(--body); }
.track-btn.detail.open { background: var(--rule); }
.track-today       { padding: 0 20px 16px; }
.track-today-label { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--body); margin-bottom: 8px; }
.track-detail      { border-top: 1px solid var(--rule); padding: 18px 20px; display: none; }
.track-detail.open { display: block; }
.hist-day          { margin-bottom: 16px; }
.hist-day-label    { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--body); margin-bottom: 6px; display: flex; justify-content: space-between; }

/* ── VERIFY FLOW ─────────────────────────────────────────────── */
.verify-step    { margin-bottom: 18px; }
.verify-token-box {
  font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700;
  letter-spacing: .08em; background: var(--ink); color: var(--ink-inv);
  padding: 12px 18px; text-align: center; margin: 12px 0; user-select: all; cursor: copy;
}
.verify-guide {
  font-size: 15px; color: var(--body); line-height: 1.75;
  padding: 14px 18px; border-left: 2px solid var(--rule); margin: 12px 0;
}
.step-badge {
  display: inline-block; font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 700; background: var(--ink); color: var(--ink-inv);
  padding: 4px 10px; margin-bottom: 10px;
}
.step-badge.done { background: var(--accent); }

/* ── FORM ────────────────────────────────────────────────────── */
.form-wrap  { max-width: 520px; }
.form-group { margin-bottom: 24px; }
label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--body); margin-bottom: 10px;
}
input[type="text"], input[type="password"], textarea {
  width: 100%; padding: 12px 16px;
  border: 1px solid var(--rule); background: var(--panel);
  color: var(--ink); font-family: 'Pretendard Variable', system-ui;
  font-size: 16px; outline: none; border-radius: 0; cursor: inherit;
  transition: border-color .15s;
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { height: 120px; resize: vertical; }
.submit-btn {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 32px; background: var(--ink); color: var(--ink-inv);
  border: none; cursor: inherit; transition: opacity .15s;
}
.submit-btn:hover { opacity: .8; }
.notice {
  font-size: 15px; color: var(--body); line-height: 1.7;
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--rule); background: var(--accent-soft);
}

/* ── ADMIN ───────────────────────────────────────────────────── */
.admin-section { margin-bottom: 48px; }
.add-row { display: flex; gap: 8px; margin-bottom: 18px; }
.add-row input { flex: 1; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--body);
  padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left;
}
td { padding: 13px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 14px; }
tr:last-child td { border-bottom: none; }
.act {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 13px; border: 1px solid currentColor;
  background: none; cursor: inherit; margin-right: 4px;
}
.act.track   { color: var(--accent); }
.act.dismiss { color: var(--body); }
.act.del     { color: var(--danger); }
.badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 4px 9px; letter-spacing: 1px; text-transform: uppercase;
}
.badge.pending  { background: var(--danger-soft); color: var(--danger); }
.badge.tracking { background: var(--accent-soft); color: var(--accent); }
.badge.active   { background: var(--accent-soft); color: var(--accent); }
.badge.off      { background: var(--rule); color: var(--body); }

/* ── LEGAL NOTICE ───────────────────────────────────────────── */
.legal-notice {
  font-size: 15px; color: var(--body); line-height: 1.8;
  margin-bottom: 28px; padding: 14px 18px;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--panel);
}
.legal-notice strong { color: var(--ink); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty { text-align: center; padding: 72px 0; color: var(--body); }
.empty-glyph  { font-family: 'IBM Plex Mono', monospace; font-size: 40px; color: var(--rule); margin-bottom: 16px; letter-spacing: -2px; }
.empty-title  { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.empty-sub    { font-size: 15px; }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: var(--ink-inv);
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 1px; padding: 12px 26px; opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none; z-index: 9998; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── LIVE DOT ────────────────────────────────────────────────── */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--live); margin-right: 7px; vertical-align: middle;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule); padding: 16px 32px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-l {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--accent);
}
.footer-r {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--rule);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  header { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  nav { overflow-x: auto; }
  nav a.nav-link { padding: 10px 14px; font-size: 13px; }
  main { padding: 28px 16px; }
  .rank-num { min-height: 110px; font-size: 24px; }
}