/* 레벨 배지: 숫자 배지(기본)와 관리자가 올린 아이콘. 사이트와 관리자 > 레벨 설정 미리보기가 같이 쓴다
   레벨이 오를수록 모양과 색이 강해진다: 신규(흐림) < 1(테두리) < 2(파랑) < 3(진한 파랑) < 4(남보라, 빛) < 5(배지 금색, 반짝임) */
.level-badge { position: relative; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; margin-right: 5px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: baseline; flex: none; }
.level-badge .lv-pre { margin-right: -1px; }
.level-badge .lv-num { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 2px; border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.level-badge .lv-pre + .lv-num { margin-right: -5px; }

/* 신규: 눈에 띄지 않게 */
.level-0 { color: #a9b4cc; background: rgba(169, 180, 204, .08); box-shadow: inset 0 0 0 1px rgba(169, 180, 204, .22); }
/* Lv.1: 테두리만, 차가운 회청색 */
.level-1 { color: #c6d3ea; box-shadow: inset 0 0 0 1px rgba(156, 195, 255, .38); }
.level-1 .lv-num { color: #dbe7ff; box-shadow: inset 0 0 0 1px rgba(156, 195, 255, .7); }
/* Lv.2: 파랑 */
.level-2 { color: #bcd6ff; background: rgba(91, 155, 255, .16); box-shadow: inset 0 0 0 1px rgba(91, 155, 255, .45); }
.level-2 .lv-num { color: #fff; background: #3d7bf0; }
/* Lv.3: 진한 파랑 그라데이션, 육각 숫자 */
.level-3 { color: #fff; background: linear-gradient(180deg, #4a82f5 0%, #2551c8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(156, 195, 255, .55); }
.level-3 .lv-num, .level-4 .lv-num, .level-5 .lv-num { min-width: 18px; border-radius: 0; clip-path: polygon(24% 0, 76% 0, 100% 50%, 76% 100%, 24% 100%, 0 50%); }
.level-3 .lv-num { color: #1d47b8; background: #fff; }
/* Lv.4: 남보라 그라데이션, 안쪽 빛, 은은한 번짐 */
.level-4 { color: #fff; background: linear-gradient(135deg, #7d6bff 0%, #4a3bd0 55%, #31279e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(196, 180, 255, .55), 0 0 6px rgba(124, 99, 255, .5); }
.level-4 .lv-num { color: #3a2db8; background: linear-gradient(180deg, #ffffff 0%, #d6ccff 100%); }
/* Lv.5: 배지 금색, 빛 번짐, 가벼운 반짝임 (배지는 누르는 요소가 아니라 금색을 쓴다) */
.level-5 { overflow: hidden; color: #2a1c00; background: var(--gold-grad, linear-gradient(180deg, #ffe7a1 0%, #f2c14e 52%, #c8901c 100%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 231, 161, .75), 0 0 8px rgba(242, 193, 78, .55); }
.level-5 .lv-num { color: #ffd970; background: #2a1c00; }
.level-5::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: lv-shine 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes lv-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* 내 정보 크기 */
.level-badge.is-lg { height: 34px; gap: 6px; padding: 0 14px; margin-right: 0; font-size: 18px; }
.level-badge.is-lg .lv-num { min-width: 26px; height: 26px; font-size: 17px; }
.level-badge.is-lg .lv-pre + .lv-num { margin-right: -8px; }
.level-3.is-lg .lv-num, .level-4.is-lg .lv-num, .level-5.is-lg .lv-num { min-width: 30px; }

/* 관리자가 올린 아이콘: 바탕 없이 그림 + 이름 */
.level-badge.has-icon { gap: 4px; height: auto; padding: 0; overflow: visible; background: none; box-shadow: none; }
.level-badge.has-icon::after { content: none; }
.level-badge .lv-icon { flex: none; width: 18px; height: 18px; object-fit: contain; }
.level-badge.is-lg .lv-icon { width: 40px; height: 40px; }
.has-icon.level-3 { color: #9cc3ff; }
.has-icon.level-4 { color: #c9b8ff; }
.has-icon.level-5 { color: var(--gold, #f2c14e); }

@media (prefers-reduced-motion: reduce) {
  .level-5::after { animation: none; content: none; }
}
@media print {
  .level-badge { box-shadow: inset 0 0 0 1px #999 !important; }
  .level-badge::after { content: none; }
}