/* ===== Browser Warning Banner ===== */
/* Created by: 콩미니 (Kong-mini) */
/* Policy: P1 (Device Agnosticism) */

.browser-warning-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #fff3cd;
  border-bottom: 3px solid #ffc107;
  padding: var(--space-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.warning-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border-radius: 8px;
  background: white;
}

.warning-item:last-child {
  margin-bottom: 0;
}

.warning-critical {
  background: #fee;
  border-left: 4px solid #dc3545;
}

.warning-warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}

.warning-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.warning-message {
  flex: 1;
  font-size: var(--font-size-sm);
  color: #333;
}

/* Mobile: Smaller padding */
@media (max-width: 767px) {
  .browser-warning-banner {
    padding: var(--space-sm);
  }

  .warning-item {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .warning-message {
    font-size: 12px;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .browser-warning-banner {
    background: #663c00;
    border-bottom-color: #ff9800;
  }

  .warning-critical {
    background: #4a1818;
  }

  .warning-warning {
    background: #663c00;
  }

  .warning-message {
    color: #eee;
  }
}