:root {
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

body.dark-mode {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
}

/* 모든 팝업은 가장 앞에 표시 */
[id$='-modal'],
.modal-content,
[role='dialog'] {
  z-index: 9999 !important;
}

:root {
  --border-color: #334155;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.bg-gray-50 {
  background-color: var(--bg-primary) !important;
}
.bg-white {
  background-color: var(--bg-secondary) !important;
}
.text-gray-700 {
  color: var(--text-primary) !important;
}
.text-gray-600 {
  color: var(--text-secondary) !important;
}
.text-gray-500 {
  color: var(--text-secondary) !important;
}
.text-gray-800 {
  color: var(--text-primary) !important;
}
.text-gray-900 {
  color: var(--text-primary) !important;
}
.border-gray-200,
.border-gray-300 {
  border-color: var(--border-color) !important;
}
.border-gray-100 {
  border-color: var(--border-color) !important;
}

body.dark-mode .bg-blue-50 {
  background-color: #1e3a8a20 !important;
}
body.dark-mode .border-blue-100 {
  border-color: #1e40af !important;
}
body.dark-mode .text-blue-600 {
  color: #60a5fa !important;
}
body.dark-mode .bg-blue-600 {
  background-color: #2563eb !important;
}
body.dark-mode .hover\:bg-blue-600:hover {
  background-color: #1d4ed8 !important;
}
body.dark-mode .ring-blue-500 {
  --tw-ring-color: #3b82f6 !important;
}
body.dark-mode .ring-offset-white {
  --tw-ring-offset-color: #0f172a !important;
}

body.dark-mode .text-red-500 {
  color: #f87171 !important;
}
body.dark-mode .bg-red-500 {
  background-color: #dc2626 !important;
}
body.dark-mode .hover\:bg-red-600:hover {
  background-color: #b91c1c !important;
}
body.dark-mode .hover\:text-red-500:hover {
  color: #f87171 !important;
}
body.dark-mode .hover\:text-red-700:hover {
  color: #f87171 !important;
}

body.dark-mode .hover\:bg-gray-50:hover {
  background-color: #334155 !important;
}
body.dark-mode .hover\:text-blue-500:hover {
  color: #60a5fa !important;
}

body.dark-mode .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}
body.dark-mode .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode select {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* 다크모드 이미지 배경색 */
body.dark-mode img.bg-gray-100 {
  background-color: #1e293b !important;
}

/* 다크모드 이미지 확대 모달 */
body.dark-mode #image-zoom-modal {
  background-color: rgba(0, 0, 0, 0.95);
}

body.dark-mode #close-image-zoom {
  color: #f1f5f9 !important;
}

body.dark-mode #close-image-zoom:hover {
  color: #cbd5e1 !important;
}

/* 다크모드 랜킹 2위 메달 및 텍스트 색상 */
body.dark-mode .text-slate-300 {
  color: #cbd5e1 !important;
}
body.dark-mode .text-slate-600 {
  color: #1f2937 !important;
}
/* 다크모드 채택수 랭킹 2위 뱃지 텍스트 검은색 */
body.dark-mode .rank-2-badge-text {
  color: #000000 !important;
}

/* 다크모드 모달 텍스트 색상 */
body.dark-mode input[type='text'],
body.dark-mode textarea,
body.dark-mode input[type='file'] + span {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}

/* 다크모드 프로필 모달 */
body.dark-mode #profile-status-message {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode #save-status-btn {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.dark-mode #save-status-btn:hover {
  background-color: #475569 !important;
}

body.dark-mode .bg-gray-100.p-3,
body.dark-mode .bg-gray-100.rounded-lg {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
}

/* 다크모드 과목 선택 버튼 가시성 */
body.dark-mode .bg-red-50 {
  background-color: rgba(127, 29, 29, 0.28) !important;
}
body.dark-mode .text-red-700 {
  color: #fca5a5 !important;
}
body.dark-mode .border-red-200 {
  border-color: #7f1d1d !important;
}
body.dark-mode .hover\:bg-red-100:hover {
  background-color: rgba(127, 29, 29, 0.45) !important;
}

body.dark-mode .bg-amber-50 {
  background-color: rgba(120, 53, 15, 0.28) !important;
}
body.dark-mode .text-amber-700 {
  color: #fcd34d !important;
}
body.dark-mode .border-amber-200 {
  border-color: #78350f !important;
}
body.dark-mode .hover\:bg-amber-100:hover {
  background-color: rgba(120, 53, 15, 0.45) !important;
}

/* 다크모드 멘토링 허브 버튼 (purple) */
body.dark-mode .bg-purple-100 {
  background-color: rgba(88, 28, 135, 0.28) !important;
}
body.dark-mode .text-purple-700 {
  color: #d8b4fe !important;
}
body.dark-mode .border-purple-300 {
  border-color: #581c87 !important;
}
body.dark-mode .hover\:bg-purple-200:hover {
  background-color: rgba(88, 28, 135, 0.45) !important;
}

body.dark-mode .text-blue-700 {
  color: #93c5fd !important;
}
body.dark-mode .border-blue-200 {
  border-color: #1e40af !important;
}
body.dark-mode .hover\:bg-blue-100:hover {
  background-color: rgba(30, 58, 138, 0.3) !important;
}

/* 다크모드 통계 텍스트 */
body.dark-mode .text-gray-600 {
  color: #94a3b8 !important;
}

/* 다크모드 댓글 영역 */
body.dark-mode #comment-input {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode #comment-list p,
body.dark-mode #comment-list .text-gray-700 {
  color: #f1f5f9 !important;
}

body.dark-mode #comment-list .bg-gray-100 {
  background-color: #1e293b !important;
}

body.dark-mode #comment-list .text-gray-800 {
  color: #f1f5f9 !important;
}

/* 채택된 댓글 강조 */
body.dark-mode #comment-list .bg-green-50 {
  background-color: #14532d20 !important;
}

body.dark-mode #comment-list .ring-green-500 {
  --tw-ring-color: #22c55e !important;
}

/* 모바일 댓글 최적화 */
@media (max-width: 640px) {
  .comment-row {
    padding: 0.625rem !important;
  }
  .comment-row .bg-gray-100 {
    padding: 0.625rem !important;
  }
  /* 모바일에서 칭호 작게 표시 */
  .comment-row .badge-pill {
    font-size: 9px !important;
    padding: 2px 6px !important;
    gap: 3px !important;
  }
  .comment-row .badge-pill .badge-icon {
    width: 12px !important;
    height: 12px !important;
    font-size: 9px !important;
  }
  /* 댓글 간격 줄이기 */
  #comment-list {
    gap: 0.5rem !important;
  }
}

/* 다크모드 버튼 호버 색상 */
body.dark-mode .hover\:bg-gray-100:hover {
  background-color: #334155 !important;
}

body.dark-mode .hover\:bg-gray-100:hover i {
  color: #f1f5f9 !important;
}

/* 내 게시물 강조 */
.my-own-post {
  --tw-ring-offset-color: #f9fafb;
  box-shadow:
    0 0 0 2px #f9fafb,
    0 0 0 4px #3b82f6 !important;
}

body.dark-mode .my-own-post {
  --tw-ring-offset-color: #0f172a !important;
  box-shadow:
    0 0 0 2px #0f172a,
    0 0 0 4px #2563eb !important;
}

/* 칭호 텍스트 색상 */
.badge-text {
  color: rgba(17, 24, 39, 0.95);
}

body.dark-mode .badge-text {
  color: rgba(17, 24, 39, 0.95) !important;
}

/* 다크모드 내 칭호 모달의 칭호 텍스트 */
body.dark-mode #badges-modal .badge-text,
body.dark-mode #badges-modal .badge-pill span {
  color: rgba(17, 24, 39, 0.95) !important;
}

/* 다크모드 사용 안함 텍스트는 흰색 */
body.dark-mode .badge-none-text {
  color: #f1f5f9 !important;
}

body.dark-mode .badge-none-icon {
  color: #94a3b8 !important;
}

/* 다크모드 칭호 생성 모달 */
body.dark-mode #badge-create-modal .modal-content,
body.dark-mode #manage-users-modal .modal-content,
body.dark-mode #badge-manage-modal .modal-content {
  background-color: #1e293b !important;
}

body.dark-mode #badge-create-modal h3,
body.dark-mode #badge-create-modal label,
body.dark-mode #manage-users-modal h3,
body.dark-mode #manage-users-modal label,
body.dark-mode #badge-manage-modal h3,
body.dark-mode #badge-manage-modal label {
  color: #f1f5f9 !important;
}

body.dark-mode #badge-create-modal input,
body.dark-mode #badge-create-modal select,
body.dark-mode #manage-users-modal input,
body.dark-mode #manage-users-modal select,
body.dark-mode #badge-manage-modal input,
body.dark-mode #badge-manage-modal select {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode #badge-create-modal .border-t,
body.dark-mode #manage-users-modal .border-t,
body.dark-mode #badge-manage-modal .border-t {
  border-color: #334155 !important;
}

body.dark-mode .text-gray-500 {
  color: #94a3b8 !important;
}

/* 다크모드: 새 모달들 (검색, 버그, 이벤트, 알림, 문의) */
body.dark-mode #search-modal .modal-content,
body.dark-mode #bug-report-modal .modal-content,
body.dark-mode #bug-list-modal .modal-content,
body.dark-mode #event-hub-modal .modal-content,
body.dark-mode #event-manage-modal .modal-content,
body.dark-mode #notif-panel .modal-content,
body.dark-mode #admin-inquiry-modal .modal-content {
  background-color: #1e293b !important;
}

body.dark-mode #search-modal h2,
body.dark-mode #bug-report-modal h3,
body.dark-mode #bug-list-modal h3,
body.dark-mode #event-hub-modal h3,
body.dark-mode #event-manage-modal h3,
body.dark-mode #notif-panel h2,
body.dark-mode #admin-inquiry-modal h2 {
  color: #f1f5f9 !important;
}

body.dark-mode #search-modal input,
body.dark-mode #bug-report-modal input,
body.dark-mode #bug-report-modal select,
body.dark-mode #bug-report-modal textarea,
body.dark-mode #admin-inquiry-modal input,
body.dark-mode #admin-inquiry-modal select,
body.dark-mode #admin-inquiry-modal textarea {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body.dark-mode #search-modal .text-gray-800,
body.dark-mode #bug-report-modal .text-gray-700,
body.dark-mode #bug-list-modal .text-gray-700,
body.dark-mode #event-hub-modal .text-gray-700,
body.dark-mode #event-manage-modal .text-gray-700,
body.dark-mode #admin-inquiry-modal .text-gray-700,
body.dark-mode #notif-panel .text-gray-800 {
  color: #e2e8f0 !important;
}

body.dark-mode #bug-list-modal .bg-white,
body.dark-mode #event-hub-modal .bg-white,
body.dark-mode #event-manage-modal .bg-white,
body.dark-mode #notif-panel .notif-item {
  background-color: #334155 !important;
}

body.dark-mode #notif-panel .notif-item.bg-blue-50 {
  background-color: #1e3a5f !important;
}

body.dark-mode #notif-panel .text-gray-600,
body.dark-mode #notif-panel .text-gray-400 {
  color: #94a3b8 !important;
}

/* 다크모드: 이벤트 버튼 */
body.dark-mode #event-nav-btn {
  background-color: rgba(22, 101, 52, 0.22) !important;
  border-color: #166534 !important;
  color: #86efac !important;
}
body.dark-mode #event-nav-btn:hover {
  background-color: rgba(22, 101, 52, 0.36) !important;
  color: #bbf7d0 !important;
}

body.dark-mode #event-manage-btn,
body.dark-mode #add-event-btn,
body.dark-mode #event-form button[type='submit'],
body.dark-mode #event-hub-content button {
  background-color: #15803d !important;
  color: #f8fafc !important;
}
body.dark-mode #event-manage-btn:hover,
body.dark-mode #add-event-btn:hover,
body.dark-mode #event-form button[type='submit']:hover,
body.dark-mode #event-hub-content button:hover {
  background-color: #166534 !important;
}

body.dark-mode #cancel-event-form-btn {
  background-color: #334155 !important;
  color: #e2e8f0 !important;
}
body.dark-mode #cancel-event-form-btn:hover {
  background-color: #475569 !important;
}

body.dark-mode #event-manage-list button[onclick*='editEventForm'] {
  color: #93c5fd !important;
}
body.dark-mode #event-manage-list button[onclick*='editEventForm']:hover {
  color: #bfdbfe !important;
}
body.dark-mode #event-manage-list button[onclick*='deleteEvent'] {
  color: #fca5a5 !important;
}
body.dark-mode #event-manage-list button[onclick*='deleteEvent']:hover {
  color: #fecaca !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 이미지 확대 모달 스타일 */
#image-zoom-modal {
  z-index: 9999;
  touch-action: none;
}

#image-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

#image-zoom-container.dragging {
  cursor: grabbing;
}

#image-zoom-container.dragging img {
  pointer-events: none;
}

#image-zoom-modal img {
  max-width: none;
  max-height: none;
  object-fit: contain;
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.image-zoomable {
  cursor: zoom-in;
  transition: opacity 0.2s;
}

.image-zoomable:hover {
  opacity: 0.9;
}

.zoom-controls {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5rem;
  border-radius: 0.5rem;
  z-index: 10;
}

.zoom-controls button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-controls button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.zoom-level {
  color: white;
  font-size: 0.875rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  min-width: 4rem;
  justify-content: center;
}

.animate-scale-up {
  animation: scaleUp 0.3s ease-out forwards;
}
@keyframes scaleUp {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
#subject-selector {
  user-select: none;
}
#subject-selector.grabbing {
  cursor: default;
}

/* 반응형 레이아웃 */
.app-container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 모바일 (기본) */
#create-post-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
}

#ranking-btn {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + 3.5rem + 1.25rem);
  width: 3.5rem;
  height: 3.5rem;
}

/* 태블릿 (640px 이상) */
@media (min-width: 640px) {
  #create-post-btn {
    right: 2rem;
    bottom: 2rem;
    width: 4rem;
    height: 4rem;
  }

  #ranking-btn {
    right: 2rem;
    bottom: calc(2rem + 4rem + 1.5rem);
    width: 4rem;
    height: 4rem;
  }
}

/* 데스크톱 (768px 이상) - 중앙 정렬된 컨테이너 */
@media (min-width: 768px) {
  .app-container {
    max-width: 768px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  #create-post-btn {
    position: fixed;
    right: calc(50% - 384px + 2rem);
    bottom: 2rem;
  }

  #ranking-btn {
    right: calc(50% - 384px + 2rem);
    bottom: calc(2rem + 4rem + 1.5rem);
  }
}

/* 큰 화면 (1024px 이상) */
@media (min-width: 1024px) {
  #create-post-btn {
    right: calc(50% - 384px + 3rem);
    bottom: 3rem;
  }

  #ranking-btn {
    right: calc(50% - 384px + 3rem);
    bottom: calc(3rem + 4rem + 1.75rem);
  }
}

/* 모달 반응형 */
.modal-content {
  width: 90%;
  max-width: 500px;
}

/* 칭호 스타일 (pill) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.badge-pill .badge-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
  z-index: 2;
}
.badge-pill .badge-text {
  position: relative;
  z-index: 2;
}
/* 고급 스타일: 애니메이션 효과 */
.badge-pill-clickable {
  cursor: pointer;
}
.badge-pill-clickable:hover {
  transform: translateY(-2px);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  box-shadow:
    0 8px 26px rgba(16, 24, 40, 0.08),
    0 0 10px rgba(99, 102, 241, 0.06);
}

/* 칭호 내부 배경 애니메이션을 위한 공통 스타일 */
.badge-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* 칭호별 내부 애니메이션 효과 */
/* 1. 별들이 떠다니는 효과 (Stars) */
@keyframes floatingStars {
  0%,
  100% {
    background-position:
      0% 0%,
      100% 100%,
      50% 50%,
      80% 20%,
      20% 80%,
      30% 60%,
      70% 40%;
  }
  25% {
    background-position:
      10% 10%,
      90% 90%,
      60% 40%,
      70% 30%,
      30% 70%,
      40% 50%,
      60% 30%;
  }
  50% {
    background-position:
      20% 5%,
      80% 95%,
      45% 55%,
      85% 15%,
      15% 85%,
      50% 40%,
      50% 20%;
  }
  75% {
    background-position:
      15% 15%,
      85% 85%,
      55% 45%,
      75% 25%,
      25% 75%,
      35% 55%,
      65% 35%;
  }
}
.badge-animation-stars::before {
  background-image:
    radial-gradient(
      circle,
      white 1.2px,
      rgba(255, 255, 255, 0.5) 1.5px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      white 1px,
      rgba(255, 255, 255, 0.4) 1.3px,
      transparent 1.8px
    ),
    radial-gradient(
      circle,
      white 1.1px,
      rgba(255, 255, 255, 0.3) 1.5px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      white 1.4px,
      rgba(255, 255, 255, 0.6) 1.8px,
      transparent 2.3px
    ),
    radial-gradient(
      circle,
      white 0.9px,
      rgba(255, 255, 255, 0.4) 1.2px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      white 1.15px,
      rgba(255, 255, 255, 0.5) 1.5px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      white 1.05px,
      rgba(255, 255, 255, 0.4) 1.4px,
      transparent 1.8px
    );
  background-size:
    50% 50%,
    50% 50%,
    40% 40%,
    60% 60%,
    30% 30%,
    45% 45%,
    35% 35%;
  background-position:
    0% 0%,
    100% 100%,
    50% 50%,
    80% 20%,
    20% 80%,
    30% 60%,
    70% 40%;
  opacity: 0.95;
  animation: floatingStars 6s ease-in-out infinite;
}

/* 2. 반짝이는 입자 효과 (Sparkles) */
@keyframes sparkleParticles {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scale(2);
    filter: brightness(1.5);
  }
}
.badge-animation-sparkles::before {
  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.9) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 1) 0.8px,
      transparent 0.8px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.7) 1.2px,
      transparent 1.2px
    );
  background-size:
    30% 30%,
    40% 40%,
    25% 25%,
    35% 35%;
  background-position:
    20% 30%,
    70% 60%,
    40% 80%,
    60% 20%;
  animation: sparkleParticles 1.5s ease-in-out infinite;
}

/* 3. 파동 효과 (Waves) */
@keyframes waves {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.badge-animation-waves::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(255, 255, 255, 0.8) 35%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 65%,
    rgba(255, 255, 255, 0.5) 80%,
    transparent 100%
  );
  background-size: 120% 100%;
  animation: waves 1.5s linear infinite;
}

/* 4. 빛나는 그라데이션 (Shine) */
@keyframes shine {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 250% 0;
  }
}
.badge-animation-shine::before {
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.8) 45%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 55%,
    rgba(255, 255, 255, 0.3) 75%,
    transparent
  );
  background-size: 200% 100%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  animation: shine 1.8s ease-in-out infinite;
}

/* 5. 맥박 빛 효과 (Pulse Light) */
@keyframes pulseLight {
  0%,
  100% {
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.2) 40%,
      transparent 70%
    );
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.5) 40%,
      rgba(255, 255, 255, 0.2) 60%,
      transparent 80%
    );
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.6);
  }
}
.badge-animation-pulse-light::before {
  animation: pulseLight 1.5s ease-in-out infinite;
}

/* 6. 불꽃 효과 (Fire) */
@keyframes fire {
  0%,
  100% {
    background-position:
      0% 100%,
      50% 80%,
      100% 100%;
    opacity: 0.6;
  }
  50% {
    background-position:
      20% 40%,
      70% 20%,
      80% 50%;
    opacity: 0.9;
  }
}
.badge-animation-fire::before {
  background-image:
    radial-gradient(ellipse, rgba(255, 200, 0, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse, rgba(255, 150, 0, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse, rgba(255, 100, 0, 0.4) 0%, transparent 70%);
  background-size:
    60% 80%,
    40% 60%,
    50% 70%;
  background-position:
    0% 100%,
    50% 80%,
    100% 100%;
  animation: fire 1s ease-in-out infinite;
}

/* 7. 눈 내리는 효과 (Snow) */
@keyframes snow {
  0% {
    transform: translateY(-15px);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}
.badge-animation-snow::before {
  background-image:
    radial-gradient(circle, white 1.2px, transparent 1.2px),
    radial-gradient(circle, white 1px, transparent 1px),
    radial-gradient(circle, white 1.5px, transparent 1.5px),
    radial-gradient(circle, white 0.8px, transparent 0.8px);
  background-size:
    25% 150%,
    30% 150%,
    20% 150%,
    28% 150%;
  background-position:
    15% -20%,
    45% -20%,
    75% -20%,
    60% -20%;
  background-repeat: repeat-y;
  animation: snow 3s linear infinite;
}

/* 8. 회오리 효과 (Swirl) */
@keyframes swirl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.badge-animation-swirl::before {
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.3) 45deg,
    rgba(255, 255, 255, 0.6) 90deg,
    rgba(255, 255, 255, 0.3) 135deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.2) 225deg,
    rgba(255, 255, 255, 0.4) 270deg,
    rgba(255, 255, 255, 0.2) 315deg,
    transparent 360deg
  );
  animation: swirl 2s linear infinite;
}

/* 9. 버블 효과 (Bubbles) */
@keyframes bubbles {
  0% {
    background-position:
      15% 110%,
      50% 110%,
      75% 110%,
      30% 110%;
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    background-position:
      15% -30%,
      50% -30%,
      75% -30%,
      30% -30%;
    opacity: 0;
  }
}
.badge-animation-bubbles::before {
  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.6) 2.5px,
      transparent 2.5px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.7) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 3px, transparent 3px);
  background-size:
    20% 40%,
    15% 35%,
    18% 38%,
    22% 42%;
  background-repeat: no-repeat;
  animation: bubbles 4s ease-in-out infinite;
}

/* 10. 전기 효과 (Electric) */
@keyframes electric {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  15%,
  25% {
    opacity: 0;
  }
  10%,
  20% {
    opacity: 1;
    filter: brightness(1.5);
  }
  30%,
  95% {
    opacity: 0.7;
  }
}
.badge-animation-electric::before {
  background-image:
    linear-gradient(
      150deg,
      transparent 0%,
      transparent 45%,
      white 45%,
      white 47%,
      transparent 47%,
      transparent 55%,
      white 55%,
      white 57%,
      transparent 57%,
      transparent 100%
    ),
    linear-gradient(
      30deg,
      transparent 0%,
      transparent 48%,
      rgba(255, 255, 255, 0.9) 48%,
      rgba(255, 255, 255, 0.9) 52%,
      transparent 52%,
      transparent 100%
    ),
    linear-gradient(
      200deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.8) 40%,
      rgba(255, 255, 255, 0.8) 43%,
      transparent 43%,
      transparent 100%
    );
  background-size: 100% 100%;
  background-position: center;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation: electric 2s ease-in-out infinite;
}

.badge-rarity-common {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.2)
  );
}
.badge-rarity-rare {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
  border: none;
  color: #0f172a;
}
.badge-rarity-epic {
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.18);
  color: #0b1220;
  transform: translateZ(0);
}
.badge-pill .badge-icon {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

@media (min-width: 640px) {
  .modal-content {
    width: 80%;
  }
}

/* 헤더 반응형 */
header {
  padding: 0.75rem 1rem;
}

@media (min-width: 640px) {
  header {
    padding: 1rem 1.5rem;
  }
}

/* 피드 반응형 */
main {
  padding: 0.75rem;
}

@media (min-width: 640px) {
  main {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  main {
    padding: 1.5rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
}

/* 모바일/태블릿 환경에서 화면 전환 확실히 하기 */
#login-container.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#app-container:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}