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

:root {
  --bg:       #1e1e1e;
  --surface:  #252526;
  --surface2: #2d2d2d;
  --border:   #3c3c3c;
  --text:     #d4d4d4;
  --text-dim: #888;
  --accent:   #4ec9b0;
  --silver:   #9e9e9e;
  --gold:     #ffc107;
  --platinum: #00bcd4;
  --ok:       #4caf50;
  --err:      #f44336;
  --tle:      #ff9800;
  --purple:   #a78bfa;
  --favorite: #facc15;
  --diamond:  #5ce0ff;
  --ruby:     #ff4d6d;
  --bronze:   #c8833d;
  --unrated:  #888;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

/* 배지 */
.badge { font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.lv-bronze   { background: #2e1f0f; color: var(--bronze); }
.lv-silver   { background: #3a3a3a; color: var(--silver); }
.lv-gold     { background: #3a2e00; color: var(--gold); }
.lv-plat     { background: #00282e; color: var(--platinum); }
.lv-diamond  { background: #12203a; color: var(--diamond); }
.lv-ruby     { background: #350012; color: var(--ruby); }
.lv-unrated  { background: #2a2a2a; color: var(--unrated); }

/* 헤더 공통 */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 50px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.logo { font-weight: 700; font-size: 16px; color: var(--accent); text-decoration: none; }

/* 유저 배지 (닉네임 + 로그아웃) — 헤더 맨 오른쪽에 고정 */
.user-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.user-badge .user-nickname { font-size: 13px; color: var(--text-dim); }
.user-badge .logout-btn {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}
.user-badge .logout-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 뒤로가기 버튼 공통 */
.back-btn {
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 헤더 nav 링크 공통 (통계/랭킹 등) */
.stats-link {
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.stats-link:hover { color: var(--accent); border-color: var(--accent); }

/* 즐겨찾기 별 공통 */
.fav-star {
  font-size: 16px;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.fav-star:hover { color: var(--favorite); transform: scale(1.2); }
.fav-star.active { color: var(--favorite); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--favorite) 60%, transparent)); }
.fav-star.pop { animation: fav-pop .35s ease; }
@keyframes fav-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5) rotate(-10deg); }
  60%  { transform: scale(0.9) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }