/*
 /var/www/html/_docs/jcs/bs53-bg-part.css
=====================================================
   Standalone BADGE CSS (NO Bootstrap dependency)
   Enhanced with Dark/Light Mode & Missing Features
===================================================== */

/* ---------- Color variables (Light Mode) ---------- */
:root {
  /* Primary Colors */
  --c-primary: #0d6efd;
  --c-secondary: #6c757d;
  --c-success: #198754;
  --c-danger: #dc3545;
  --c-warning: #ffc107;
  --c-info: #0dcaf0;
  --c-light: #f8f9fa;
  --c-dark: #212529;
  --c-white: #fff;
  --c-black: #000;
  
  /* Subtle Backgrounds (for soft badges) */
  --c-primary-subtle: #cfe2ff;
  --c-secondary-subtle: #e2e3e5;
  --c-success-subtle: #d1e7dd;
  --c-danger-subtle: #f8d7da;
  --c-warning-subtle: #fff3cd;
  --c-info-subtle: #cff4fc;
  --c-light-subtle: #fcfcfd;
  --c-dark-subtle: #ced4da;
  
  /* Border Subtle */
  --c-primary-border: #9ec5fe;
  --c-secondary-border: #c4c8cb;
  --c-success-border: #a3cfbb;
  --c-danger-border: #f1aeb5;
  --c-warning-border: #ffe69c;
  --c-info-border: #9eeaf9;
  --c-dark-border: #a9a9aa;
  
  /* Text Colors */
  --c-text-primary: #052c65;
  --c-text-success: #0a3622;
  --c-text-danger: #58151c;
  --c-text-warning: #664d03;
  --c-text-info: #055160;
  --c-text-light: #495057;
  --c-text-dark: #495057;
}

/* ---------- Dark Mode Color Variables ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-primary: #6ea8fe;
    --c-secondary: #a7acb1;
    --c-success: #75b798;
    --c-danger: #ea868f;
    --c-warning: #ffda6a;
    --c-info: #6edff6;
    --c-light: #f8f9fa;
    --c-dark: #dee2e6;
    --c-white: #212529;
    --c-black: #f8f9fa;
    
    /* Subtle Backgrounds for Dark Mode */
    --c-primary-subtle: rgba(110, 168, 254, 0.15);
    --c-secondary-subtle: rgba(167, 172, 177, 0.15);
    --c-success-subtle: rgba(117, 183, 152, 0.15);
    --c-danger-subtle: rgba(234, 134, 143, 0.15);
    --c-warning-subtle: rgba(255, 218, 106, 0.15);
    --c-info-subtle: rgba(110, 223, 246, 0.15);
    --c-light-subtle: rgba(248, 249, 250, 0.1);
    --c-dark-subtle: rgba(222, 226, 230, 0.15);
    
    /* Border Subtle for Dark Mode */
    --c-primary-border: #3d8bfd;
    --c-secondary-border: #868e96;
    --c-success-border: #198754;
    --c-danger-border: #dc3545;
    --c-warning-border: #ffc107;
    --c-info-border: #0dcaf0;
    --c-dark-border: #adb5bd;
    
    /* Text Colors for Dark Mode */
    --c-text-primary: #cfe2ff;
    --c-text-success: #d1e7dd;
    --c-text-danger: #f8d7da;
    --c-text-warning: #fff3cd;
    --c-text-info: #cff4fc;
    --c-text-light: #f8f9fa;
    --c-text-dark: #f8f9fa;
  }
}

/* Manual Dark Mode Class (if using class-based dark mode) */
.dark-mode {
  --c-primary: #6ea8fe;
  --c-secondary: #a7acb1;
  --c-success: #75b798;
  --c-danger: #ea868f;
  --c-warning: #ffda6a;
  --c-info: #6edff6;
  --c-light: #f8f9fa;
  --c-dark: #dee2e6;
  --c-white: #212529;
  --c-black: #f8f9fa;
  
  --c-primary-subtle: rgba(110, 168, 254, 0.15);
  --c-secondary-subtle: rgba(167, 172, 177, 0.15);
  --c-success-subtle: rgba(117, 183, 152, 0.15);
  --c-danger-subtle: rgba(234, 134, 143, 0.15);
  --c-warning-subtle: rgba(255, 218, 106, 0.15);
  --c-info-subtle: rgba(110, 223, 246, 0.15);
  --c-light-subtle: rgba(248, 249, 250, 0.1);
  --c-dark-subtle: rgba(222, 226, 230, 0.15);
  
  --c-primary-border: #3d8bfd;
  --c-secondary-border: #868e96;
  --c-success-border: #198754;
  --c-danger-border: #dc3545;
  --c-warning-border: #ffc107;
  --c-info-border: #0dcaf0;
  --c-dark-border: #adb5bd;
  
  --c-text-primary: #cfe2ff;
  --c-text-success: #d1e7dd;
  --c-text-danger: #f8d7da;
  --c-text-warning: #fff3cd;
  --c-text-info: #cff4fc;
  --c-text-light: #f8f9fa;
  --c-text-dark: #f8f9fa;
}

/* ---------- Base badge ---------- */
.badge {
  display: inline-block;
  padding: .35em .65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .375rem;
  color: var(--c-white);
  background-color: var(--c-primary);
  border: 1px solid transparent;
}

/* hide empty */
.badge:empty { display: none; }

/* ---------- Shape ---------- */
.badge-pill { border-radius: 50rem; }

/* ---------- Background colors ---------- */
.bg-primary { background: var(--c-primary); }
.bg-secondary { background: var(--c-secondary); }
.bg-success { background: var(--c-success); }
.bg-danger { background: var(--c-danger); }
.bg-warning { background: var(--c-warning); }
.bg-info { background: var(--c-info); }
.bg-light { 
  background: var(--c-light); 
  color: var(--c-text-light);
  border-color: #dee2e6;
}
.bg-dark { background: var(--c-dark); }

/* ---------- Text colors ---------- */
.text-white { color: var(--c-white) !important; }
.text-black { color: var(--c-black) !important; }
.text-dark { color: var(--c-dark) !important; }

/* Text color classes (for use without background) */
.text-primary { color: var(--c-primary) !important; }
.text-secondary { color: var(--c-secondary) !important; }
.text-success { color: var(--c-success) !important; }
.text-danger { color: var(--c-danger) !important; }
.text-warning { color: var(--c-warning) !important; }
.text-info { color: var(--c-info) !important; }
.text-light { color: var(--c-light) !important; }

/* ---------- text-bg-* (BS 5.3 style) ---------- */
.text-bg-primary { background: var(--c-primary); color: #fff; }
.text-bg-secondary { background: var(--c-secondary); color: #fff; }
.text-bg-success { background: var(--c-success); color: #fff; }
.text-bg-danger { background: var(--c-danger); color: #fff; }
.text-bg-warning { 
  background: var(--c-warning); 
  color: var(--c-text-warning) !important; 
}
.text-bg-info { 
  background: var(--c-info); 
  color: var(--c-text-info) !important; 
}
.text-bg-light { 
  background: var(--c-light); 
  color: var(--c-text-light) !important; 
  border-color: #dee2e6;
}
.text-bg-dark { background: var(--c-dark); color: #fff; }

/* ---------- Outline badge ---------- */
.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
}

/* Outline with specific colors (추가: 더 많은 색상 지원) */
.badge-outline.primary { color: var(--c-primary); }
.badge-outline.secondary { color: var(--c-secondary); }
.badge-outline.success { color: var(--c-success); }
.badge-outline.danger { color: var(--c-danger); }
.badge-outline.warning { color: var(--c-warning); }
.badge-outline.info { color: var(--c-info); }
.badge-outline.light { 
  color: var(--c-text-light); 
  border-color: #dee2e6;
}
.badge-outline.dark { color: var(--c-dark); }

/* 단일 클래스 Outline 스타일 (추가) */
.badge-outline-primary {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-primary);
}
.badge-outline-success {
  background: transparent;
  color: var(--c-success);
  border: 1px solid var(--c-success);
}
.badge-outline-danger {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.badge-outline-warning {
  background: transparent;
  color: var(--c-warning);
  border: 1px solid var(--c-warning);
}
.badge-outline-info {
  background: transparent;
  color: var(--c-info);
  border: 1px solid var(--c-info);
}
.badge-outline-dark {
  background: transparent;
  color: var(--c-dark);
  border: 1px solid var(--c-dark);
}

/* ---------- Soft badge ---------- */
.badge-soft {
  border: 1px solid transparent;
}

.badge-soft.primary {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border-color: var(--c-primary-border);
}
.badge-soft.secondary {
  background: var(--c-secondary-subtle);
  color: var(--c-secondary);
  border-color: var(--c-secondary-border);
}
.badge-soft.success {
  background: var(--c-success-subtle);
  color: var(--c-success);
  border-color: var(--c-success-border);
}
.badge-soft.danger {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
  border-color: var(--c-danger-border);
}
.badge-soft.warning {
  background: var(--c-warning-subtle);
  color: var(--c-text-warning);
  border-color: var(--c-warning-border);
}
.badge-soft.info {
  background: var(--c-info-subtle);
  color: var(--c-text-info);
  border-color: var(--c-info-border);
}
.badge-soft.light {
  background: var(--c-light-subtle);
  color: var(--c-text-light);
  border-color: #dee2e6;
}
.badge-soft.dark {
  background: var(--c-dark-subtle);
  color: var(--c-dark);
  border-color: var(--c-dark-border);
}

/* 단일 클래스 Soft 스타일 (추가) */
.badge-soft-primary {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border: 1px solid var(--c-primary-border);
}
.badge-soft-success {
  background: var(--c-success-subtle);
  color: var(--c-success);
  border: 1px solid var(--c-success-border);
}
.badge-soft-danger {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
  border: 1px solid var(--c-danger-border);
}
.badge-soft-warning {
  background: var(--c-warning-subtle);
  color: var(--c-text-warning);
  border: 1px solid var(--c-warning-border);
}
.badge-soft-info {
  background: var(--c-info-subtle);
  color: var(--c-text-info);
  border: 1px solid var(--c-info-border);
}

/* ---------- Size ---------- */
.badge-xs {
  font-size: .6em;
  padding: .2em .4em;
}
.badge-sm {
  font-size: .7em;
  padding: .25em .5em;
}
.badge-md {
  font-size: .75em;
  padding: .35em .65em;
}
.badge-lg {
  font-size: .85em;
  padding: .45em .75em;
}
.badge-xl {
  font-size: 1em;
  padding: .5em .8em;
}

/* ---------- Dot badge ---------- */
.badge-dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

/* Dot sizes (추가) */
.badge-dot-sm {
  width: .375rem;
  height: .375rem;
}
.badge-dot-lg {
  width: .625rem;
  height: .625rem;
}
.badge-dot-xl {
  width: .75rem;
  height: .75rem;
}

/* ---------- Counter ---------- */
.badge-counter {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  font-size: .65rem;
  border-radius: 50rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Counter sizes (추가) */
.badge-counter-sm {
  min-width: 1rem;
  height: 1rem;
  font-size: .55rem;
}
.badge-counter-lg {
  min-width: 1.5rem;
  height: 1.5rem;
  font-size: .75rem;
}

/* ---------- Badge with icon (추가) ---------- */
.badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Animation effects (추가) ---------- */
.badge-pulse {
  animation: badge-pulse 2s infinite;
}
@keyframes badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb), 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(var(--c-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb), 0); }
}

.badge-shake {
  animation: badge-shake 0.5s ease-in-out;
}
@keyframes badge-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ---------- Hover ---------- */
.badge-hover {
  cursor: pointer;
  transition: all 0.15s ease;
}
.badge-hover:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}

/* Hover effects for different types */
.badge-outline.badge-hover:hover {
  background-color: currentColor;
  color: white;
}
.badge-soft.badge-hover:hover {
  filter: brightness(0.95);
}

/* ---------- Positioned badge (추가: 알림 배지용) ---------- */
.badge-positioned {
  position: relative;
  display: inline-block;
}
.badge-positioned .badge {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  transform: scale(0.8);
}
.badge-positioned .badge-dot {
  top: -0.25em;
  right: -0.25em;
}

/* ---------- Accessibility (추가) ---------- */
.badge:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* ---------- Utility classes (추가) ---------- */
.badge-rounded {
  border-radius: 0.5rem;
}
.badge-square {
  border-radius: 0.25rem;
}
.badge-circle {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 768px) {
  .badge-xs { font-size: .55em; }
  .badge-sm { font-size: .65em; }
  .badge-lg { font-size: .8em; }
  .badge-xl { font-size: .9em; }
}

/* ---------- Print styles ---------- */
@media print {
  .badge {
    border: 1px solid #000;
    background-color: #fff !important;
    color: #000 !important;
  }
  .badge-outline {
    background-color: transparent !important;
  }
}

/* ---------- Documentation/Examples ---------- */
/*
사용 예시:

1. 기본 뱃지:
   <span class="badge bg-primary">Primary</span>

2. Pill + Size:
   <span class="badge bg-info badge-pill badge-sm">Small Pill</span>

3. Outline:
   <span class="badge badge-outline-primary">Outline</span>
   또는
   <span class="badge badge-outline primary">Outline (두 클래스)</span>

4. Soft:
   <span class="badge badge-soft-success">Soft</span>
   또는
   <span class="badge badge-soft success">Soft (두 클래스)</span>

5. Counter:
   <span class="badge bg-danger badge-counter">9</span>

6. Dot:
   <span class="badge bg-success badge-dot"></span>

7. With Icon:
   <span class="badge bg-primary badge-with-icon">
     <span class="badge-icon">🔔</span>
     알림
   </span>

8. Positioned:
   <div class="badge-positioned">
     <button>버튼</button>
     <span class="badge bg-danger badge-dot"></span>
   </div>

9. 다크모드 지원:
   시스템 다크모드 또는 .dark-mode 클래스 자동 지원
*/