/* ============================================================
   PACS Premium UI Design System
   Medical-grade UI components for worklist & viewer
   ============================================================
   - Dual-theme aware (dark/light via --smcw-color-* variables)
   - Zero-distraction design for radiology workflows
   - Smooth, professional micro-interactions
   - Overrides Bootstrap 4 modal/toast/popover defaults
   ============================================================ */

/* ── Design Tokens (PACS-specific) ── */
:root {
  /* Elevation & Depth */
  --pacs-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  --pacs-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  --pacs-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.2) !important;
  --pacs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.35) !important;

  /* Radii */
  --pacs-radius-sm: 6px !important;
  --pacs-radius-md: 10px !important;
  --pacs-radius-lg: 14px !important;
  --pacs-radius-xl: 20px !important;

  /* Transition */
  --pacs-ease-out: cubic-bezier(0.16, 1, 0.3, 1) !important;
  --pacs-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  --pacs-duration-fast: 180ms !important;
  --pacs-duration-normal: 280ms !important;
  --pacs-duration-slow: 400ms !important;

  /* Semantic Colors */
  --pacs-color-info: #3b82f6 !important;
  --pacs-color-success: #10b981 !important;
  --pacs-color-warning: #f59e0b !important;
  --pacs-color-error: #ef4444 !important;

  /* Accent Gradients */
  --pacs-gradient-info: linear-gradient(135deg, #3b82f6, #2563eb) !important;
  --pacs-gradient-success: linear-gradient(135deg, #10b981, #059669) !important;
  --pacs-gradient-warning: linear-gradient(135deg, #f59e0b, #d97706) !important;
  --pacs-gradient-error: linear-gradient(135deg, #ef4444, #dc2626) !important;

  /* Backdrop */
  --pacs-backdrop-blur: 12px !important;
  --pacs-backdrop-color: rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================
   1. MODAL SYSTEM — Premium Alert & Confirm
   ============================================================ */

/* ── Modal Content Card ── */
#alert-modal .modal-content,
#confirm-modal .modal-content,
#custom-modal .modal-content {
  background: var(--pacs-modal-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-modal-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-lg) !important;
  box-shadow: var(--pacs-modal-shadow, var(--pacs-shadow-xl)) !important;
  overflow: visible !important;
  position: relative !important;
}

/* Accent bar at top of modal */
#alert-modal .modal-content::before,
#confirm-modal .modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--pacs-accent-gradient, var(--pacs-gradient-info)) !important;
  z-index: 1 !important;
}

/* Type-specific accent bars */
#alert-modal .modal-content.pacs-type-success::before,
#confirm-modal .modal-content.pacs-type-success::before {
  background: var(--pacs-gradient-success) !important;
}
#alert-modal .modal-content.pacs-type-warning::before,
#confirm-modal .modal-content.pacs-type-warning::before {
  background: var(--pacs-gradient-warning) !important;
}
#alert-modal .modal-content.pacs-type-error::before,
#confirm-modal .modal-content.pacs-type-error::before {
  background: var(--pacs-gradient-error) !important;
}

#alert-modal .modal-content.pacs-type-info::before,
#confirm-modal .modal-content.pacs-type-info::before {
  background: var(--pacs-accent-gradient, var(--pacs-gradient-info)) !important;
}

/* ── Modal Header ── */
#alert-modal .modal-header,
#confirm-modal .modal-header,
#custom-modal .modal-header {
  border-bottom: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 20px 28px 16px !important;
  background: transparent !important;
  align-items: center !important;
  min-height: 60px !important;
  height: auto !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  cursor: grab !important;
  user-select: none !important;
}

#alert-modal .modal-header:active,
#confirm-modal .modal-header:active,
#custom-modal .modal-header:active {
  cursor: grabbing !important;
}

#alert-modal .modal-title,
#confirm-modal .modal-title,
#custom-modal .modal-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  margin-bottom: 0px !important;
}

/* Close button modernization */
#alert-modal .close,
#confirm-modal .close,
#custom-modal .close {
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pacs-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--pacs-close-btn-color, #94a3b8) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  text-shadow: none !important;
}

#alert-modal .close:hover,
#confirm-modal .close:hover,
#custom-modal .close:hover {
  opacity: 1 !important;
  background: var(--pacs-close-btn-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--pacs-close-btn-hover, #e2e8f0) !important;
}

#alert-modal .close:active,
#confirm-modal .close:active,
#custom-modal .close:active {
  transform: scale(0.92) !important;
}

/* ── Modal Body ── */
#alert-modal .modal-body,
#confirm-modal .modal-body,
#custom-modal .modal-body {
  padding: 24px 28px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  display: flex !important;
  align-items: flex-start !important;
}

#alert-content,
#confirm-content,
#custom-content {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  word-break: keep-all !important;
  width: 100% !important;
}

/* Input fields inside modals */
#alert-modal input[type='text'],
#confirm-modal input[type='text'],
#custom-modal input[type='text'],
#alert-modal textarea,
#confirm-modal textarea,
#custom-modal textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  border-radius: var(--pacs-radius-sm) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  font-size: 14px !important;
  transition:
    border-color var(--pacs-duration-fast) ease,
    box-shadow var(--pacs-duration-fast) ease;
  outline: none !important;
}

#alert-modal input[type='text']:focus,
#confirm-modal input[type='text']:focus,
#custom-modal input[type='text']:focus,
#alert-modal textarea:focus,
#confirm-modal textarea:focus,
#custom-modal textarea:focus {
  border-color: var(--pacs-color-info) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ── Modal Footer ── */
#alert-modal .modal-footer,
#confirm-modal .modal-footer,
#custom-modal .modal-footer {
  border-top: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 16px 28px 18px !important;
  background: transparent !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* ── Premium Button System ── */

/* Primary Button (OK/Confirm) */
#alert-ok,
#confirm-ok,
.pacs-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  height: 36px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--pacs-btn-primary-text, #ffffff) !important;
  background: var(--pacs-btn-primary-bg, var(--pacs-color-info)) !important;
  border: none !important;
  border-radius: var(--pacs-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--pacs-duration-fast) var(--pacs-ease-out) !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

#alert-ok:hover,
#confirm-ok:hover,
.pacs-btn-primary:hover {
  background: var(--pacs-btn-primary-hover, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px) !important;
}

#alert-ok:active,
#confirm-ok:active,
.pacs-btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2) !important;
}

/* Ripple effect */
#alert-ok::after,
#confirm-ok::after,
.pacs-btn-primary::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 70%
  ) !important;
  opacity: 0 !important;
  transition: opacity var(--pacs-duration-fast) !important;
}

#alert-ok:active::after,
#confirm-ok:active::after,
.pacs-btn-primary:active::after {
  opacity: 1 !important;
}

/* Secondary Button (Cancel) */
#confirm-cancel,
.pacs-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  height: 36px !important;
  padding: 0 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--pacs-btn-secondary-text, var(--smcw-color-popup-text, #94a3b8)) !important;
  background: var(--pacs-btn-secondary-bg, transparent) !important;
  border: 1px solid var(--pacs-btn-secondary-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--pacs-duration-fast) var(--pacs-ease-out) !important;
}

#confirm-cancel:hover,
.pacs-btn-secondary:hover {
  background: var(--pacs-btn-secondary-hover-bg, rgba(255, 255, 255, 0.08)) !important;
  border-color: var(--pacs-btn-secondary-border, var(--smcw-color-popup-text, #94a3b8)) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  transform: translateY(-1px) !important;
}

#confirm-cancel:active,
.pacs-btn-secondary:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Danger variant for destructive actions (on OK button) */
#confirm-ok.pacs-danger {
  background: var(--pacs-btn-danger-bg, var(--pacs-color-error)) !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3) !important;
}

#confirm-ok.pacs-danger:hover {
  background: var(--pacs-btn-danger-hover, #dc2626) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

/* ============================================================
   2. TOAST — Premium Notification System
   ============================================================ */

/* Toast container redesign */
.toast {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  bottom: auto !important;
  left: auto !important;
  min-width: 400px !important;
  max-width: 520px !important;
  border: none !important;
  border-radius: var(--pacs-radius-md) !important;
  box-shadow: var(--pacs-toast-shadow, var(--pacs-shadow-lg)) !important;
  overflow: hidden !important;
  z-index: 1100000 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Toast animation */
.toast.show {
  animation: pacsToastIn var(--pacs-duration-slow) var(--pacs-ease-bounce) !important;
}

.toast.hiding,
.toast.pacs-toast-hiding {
  animation: pacsToastOut var(--pacs-duration-normal) var(--pacs-ease-out) forwards !important;
}

@keyframes pacsToastIn {
  from {
    opacity: 0 !important;
    transform: translateY(-100%) scale(0.9) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}

@keyframes pacsToastOut {
  from {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  to {
    opacity: 0 !important;
    transform: translateY(-40px) scale(0.95) !important;
  }
}

/* Toast body redesign */
.toast-body {
  background: var(--pacs-toast-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-toast-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-md) !important;
  padding: 0 !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Type accent bar (left edge) */
.toast-body::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: var(--pacs-info, var(--pacs-color-info)) !important;
  border-radius: 4px 0 0 4px !important;
}

.toast-body.toast-success::before {
  background: var(--pacs-success, var(--pacs-color-success)) !important;
}

.toast-body.toast-warning::before {
  background: var(--pacs-warning, var(--pacs-color-warning)) !important;
}

.toast-body.toast-error::before {
  background: var(--pacs-error, var(--pacs-color-error)) !important;
}

.toast-body.toast-info::before {
  background: var(--pacs-info, var(--pacs-color-info)) !important;
}

/* Toast icon area */
.toast-svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 4px 16px 16px !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}

/* SVG icon coloring by type (both .aco-svg and plain svg) */
.toast-body.toast-success .toast-svg svg,
.toast-body.toast-success .aco-svg {
  fill: var(--pacs-success, var(--pacs-color-success)) !important;
}

.toast-body.toast-success .toast-svg svg path,
.toast-body.toast-success .aco-svg path {
  fill: var(--pacs-success, var(--pacs-color-success)) !important;
}

.toast-body.toast-warning .toast-svg svg,
.toast-body.toast-warning .aco-svg {
  fill: var(--pacs-warning, var(--pacs-color-warning)) !important;
}

.toast-body.toast-warning .toast-svg svg path,
.toast-body.toast-warning .aco-svg path {
  fill: var(--pacs-warning, var(--pacs-color-warning)) !important;
}

.toast-body.toast-error .toast-svg svg,
.toast-body.toast-error .aco-svg {
  fill: var(--pacs-error, var(--pacs-color-error)) !important;
}

.toast-body.toast-error .toast-svg svg path,
.toast-body.toast-error .aco-svg path {
  fill: var(--pacs-error, var(--pacs-color-error)) !important;
}

.toast-body.toast-info .toast-svg svg,
.toast-body.toast-info .aco-svg {
  fill: var(--pacs-info, var(--pacs-color-info)) !important;
}

.toast-body.toast-info .toast-svg svg path,
.toast-body.toast-info .aco-svg path {
  fill: var(--pacs-info, var(--pacs-color-info)) !important;
}

.toast-svg svg,
.aco-svg {
  width: 26px !important;
  height: 26px !important;
  opacity: 0.9 !important;
}

/* Toast text area */
.toast-right {
  flex: 1 !important;
  padding: 16px 18px 16px 14px !important;
  min-width: 0 !important;
}

.toast-logo {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--pacs-toast-text, var(--smcw-color-popup-head-text, #e2e8f0)) !important;
  opacity: 0.7 !important;
  margin-bottom: 2px !important;
}

.toast-content {
  margin-top: 4px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--pacs-toast-subtext, var(--smcw-color-popup-text, #cbd5e1)) !important;
}

/* Toast close button */
.toast-close-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: var(--pacs-close-btn-color, #64748b) !important;
  border-radius: var(--pacs-radius-sm) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  padding: 0 !important;
  z-index: 1 !important;
}

.toast:hover .toast-close-btn {
  opacity: 0.7 !important;
}

.toast-close-btn:hover {
  opacity: 1 !important;
  background: var(--pacs-close-btn-hover-bg, rgba(255, 255, 255, 0.08)) !important;
  color: var(--pacs-close-btn-hover, #e2e8f0) !important;
}

/* Toast auto-dismiss progress bar */
.toast-body::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--pacs-info, var(--pacs-color-info)) !important;
  animation: toastProgress 4s linear forwards !important;
  opacity: 0.5 !important;
}

.toast-body.toast-success::after {
  background: var(--pacs-success, var(--pacs-color-success)) !important;
}

.toast-body.toast-warning::after {
  background: var(--pacs-warning, var(--pacs-color-warning)) !important;
}

.toast-body.toast-error::after {
  background: var(--pacs-error, var(--pacs-color-error)) !important;
}

@keyframes toastProgress {
  from {
    width: 100% !important;
  }
  to {
    width: 0% !important;
  }
}

/* ============================================================
   3. POPOVER — Premium Floating Card
   ============================================================ */

.popover {
  background: var(--pacs-popover-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-popover-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-md) !important;
  box-shadow: var(--pacs-shadow-lg) !important;
  font-size: 13px !important;
  max-width: 320px !important;
  /* animation 제거 — hover trigger + scale animation = 무한 반짝임 유발 */
  transition: opacity var(--pacs-duration-fast) ease !important;
  pointer-events: auto !important;
}

.popover .popover-header {
  background: transparent !important;
  border-bottom: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 12px 16px 10px !important;
  border-radius: var(--pacs-radius-md) var(--pacs-radius-md) 0 0 !important;
}

.popover .popover-body {
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Arrow styling */
.popover .arrow::before {
  border-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.popover .arrow::after {
  border-color: var(--smcw-color-popup-background, #161b26) !important;
}

.bs-popover-bottom .arrow::before {
  border-bottom-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-popover-bottom .arrow::after {
  border-bottom-color: var(--smcw-color-popup-background, #161b26) !important;
}

.bs-popover-top .arrow::before {
  border-top-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-popover-top .arrow::after {
  border-top-color: var(--smcw-color-popup-background, #161b26) !important;
}

.bs-popover-left .arrow::before {
  border-left-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-popover-left .arrow::after {
  border-left-color: var(--smcw-color-popup-background, #161b26) !important;
}

.bs-popover-right .arrow::before {
  border-right-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-popover-right .arrow::after {
  border-right-color: var(--smcw-color-popup-background, #161b26) !important;
}

/* ============================================================
   4. DROPDOWN / SELECT MENUS
   ============================================================ */

.dropdown-menu {
  background: var(--smcw-color-popup-background, #161b26) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  border-radius: var(--pacs-radius-md) !important;
  box-shadow: var(--pacs-shadow-lg) !important;
  padding: 6px !important;
  animation: pacsDropdownIn var(--pacs-duration-normal) var(--pacs-ease-bounce) !important;
}

@keyframes pacsDropdownIn {
  from {
    opacity: 0 !important;
    transform: scale(0.95) translateY(-4px) !important;
  }
  to {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }
}

.dropdown-menu .dropdown-item {
  border-radius: var(--pacs-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  transition: all var(--pacs-duration-fast) ease !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: rgba(59, 130, 246, 0.12) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
}

.dropdown-menu .dropdown-item:active {
  background: var(--pacs-color-info) !important;
  color: #fff !important;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--smcw-color-popup-divider, #2a3348) !important;
  margin: 4px 0 !important;
}

/* ============================================================
   5. TOOLTIP — Clean & Minimal
   ============================================================ */

.tooltip .tooltip-inner {
  background: var(--smcw-color-popup-background, #161b26) !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  border-radius: var(--pacs-radius-sm) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  box-shadow: var(--pacs-shadow-md) !important;
  max-width: 280px !important;
}

.tooltip .arrow::before {
  border-color: transparent !important;
}

.bs-tooltip-top .arrow::before {
  border-top-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-tooltip-left .arrow::before {
  border-left-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

.bs-tooltip-right .arrow::before {
  border-right-color: var(--smcw-color-popup-divider, #2a3348) !important;
}

/* ============================================================
   6. CONTEXT MENU (jQuery contextMenu 플러그인)
   ============================================================ */

.context-menu-list {
  background: var(--pacs-context-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-context-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-md) !important;
  box-shadow: var(--pacs-shadow-lg) !important;
  padding: 6px !important;
  min-width: 180px !important;
  animation: pacsDropdownIn var(--pacs-duration-normal) var(--pacs-ease-bounce) !important;
}

.context-menu-list .context-menu-item {
  border-radius: var(--pacs-radius-sm) !important;
  padding: 8px 14px 8px 2.5em !important;
  font-size: 13px !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  background: transparent !important;
  transition: all var(--pacs-duration-fast) ease !important;
  position: relative !important;
}

/* 아이콘이 없는 항목도 텍스트 위치 일관되게 유지 */
.context-menu-list .context-menu-item > span {
  margin-left: 0 !important;
}

.context-menu-list .context-menu-item:hover,
.context-menu-list .context-menu-item.context-menu-hover {
  background: var(--pacs-context-hover, rgba(59, 130, 246, 0.12)) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
}

.context-menu-list .context-menu-separator {
  border-bottom-color: var(--smcw-color-popup-divider, #2a3348) !important;
  margin: 4px 8px !important;
  padding: 2px !important;
}

/* 아이콘 위치 — 라이브러리가 absolute left:0 사용하므로 간격은 padding-left에서 처리 */
.context-menu-list .context-menu-item .context-menu-icon,
.context-menu-list .context-menu-item .context-menu-icon::before {
  left: 6px !important;
}

/* Disabled item */
.context-menu-list .context-menu-item.context-menu-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Submenu indicator */
.context-menu-list .context-menu-submenu::after {
  color: var(--smcw-color-popup-text, #94a3b8) !important;
}

/* ============================================================
   7. GENERAL MODAL IMPROVEMENTS
   ============================================================ */

/* All modals get premium treatment — alert/confirm과 동일한 UX */
.modal {
  transition: opacity var(--pacs-duration-normal) var(--pacs-ease-out) !important;
}

.modal .modal-dialog {
  transform: translateY(0) scale(1) !important;
  transition: transform var(--pacs-duration-normal) var(--pacs-ease-bounce) !important;
}

.modal.fade .modal-dialog {
  transform: translateY(-30px) scale(0.95) !important;
}

.modal.show .modal-dialog {
  transform: translateY(0) scale(1) !important;
}

.modal-content {
  background: var(--pacs-modal-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-modal-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-lg) !important;
  box-shadow: var(--pacs-modal-shadow, var(--pacs-shadow-xl)) !important;
  overflow: visible !important;
  position: relative !important;
}

/* Accent bar at top — 모든 modal 공통 */
.modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--pacs-accent-gradient, var(--pacs-gradient-info)) !important;
  z-index: 1 !important;
  border-radius: var(--pacs-radius-lg) var(--pacs-radius-lg) 0 0 !important;
}

.modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 20px 28px 16px !important;
  min-height: 60px !important;
  height: auto !important;
  align-items: center !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}

.modal-header .modal-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  margin-bottom: 0px !important;
}

.modal-header .close {
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pacs-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--pacs-close-btn-color, #94a3b8) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  text-shadow: none !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
  background: var(--pacs-close-btn-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--pacs-close-btn-hover, #e2e8f0) !important;
}

.modal-header .close:active {
  transform: scale(0.92) !important;
}

/* ── Modal Body — alert/confirm과 동일 ── */
.modal-body {
  padding: 24px 28px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

.modal-body p,
.modal-body span,
.modal-body div {
  font-size: 15px;
  line-height: 1.65 !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
}

/* Input fields inside modals */
.modal input[type='text'],
.modal textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  border-radius: var(--pacs-radius-sm) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  font-size: 14px !important;
  transition:
    border-color var(--pacs-duration-fast) ease,
    box-shadow var(--pacs-duration-fast) ease;
  outline: none !important;
}

.modal input[type='text']:focus,
.modal textarea:focus {
  border-color: var(--pacs-color-info) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.modal-footer {
  background: transparent !important;
  border-top: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 16px 28px 18px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* General button improvements — alert/confirm 버튼과 동일 */
.modal-footer .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pacs-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 0 20px !important;
  min-width: 88px !important;
  height: 36px !important;
  cursor: pointer !important;
  transition: all var(--pacs-duration-fast) var(--pacs-ease-out) !important;
  position: relative !important;
  overflow: hidden !important;
}

.modal-footer .btn-primary {
  color: var(--pacs-btn-primary-text, #ffffff) !important;
  background: var(--pacs-btn-primary-bg, var(--pacs-color-info)) !important;
  border: none !important;
  border-color: var(--pacs-btn-primary-bg, var(--pacs-color-info)) !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

.modal-footer .btn-primary:hover {
  background: var(--pacs-btn-primary-hover, #2563eb) !important;
  border-color: var(--pacs-btn-primary-hover, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px) !important;
}

.modal-footer .btn-primary:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2) !important;
}

/* Ripple effect on primary button */
.modal-footer .btn-primary::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 70%
  ) !important;
  opacity: 0 !important;
  transition: opacity var(--pacs-duration-fast) !important;
}

.modal-footer .btn-primary:active::after {
  opacity: 1 !important;
}

.modal-footer .btn-secondary {
  color: var(--pacs-btn-secondary-text, var(--smcw-color-popup-text, #94a3b8)) !important;
  background: var(--pacs-btn-secondary-bg, transparent) !important;
  border: 1px solid var(--pacs-btn-secondary-border, var(--smcw-color-popup-divider, #2a3348)) !important;
}

.modal-footer .btn-secondary:hover {
  background: var(--pacs-btn-secondary-hover-bg, rgba(255, 255, 255, 0.08)) !important;
  border-color: var(--pacs-btn-secondary-border, var(--smcw-color-popup-text, #94a3b8)) !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  transform: translateY(-1px) !important;
}

.modal-footer .btn-secondary:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Danger variant for destructive actions */
.modal-footer .btn-danger,
.modal-footer .btn-primary.pacs-danger {
  background: var(--pacs-btn-danger-bg, var(--pacs-color-error)) !important;
  border-color: var(--pacs-btn-danger-bg, var(--pacs-color-error)) !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3) !important;
}

.modal-footer .btn-danger:hover,
.modal-footer .btn-primary.pacs-danger:hover {
  background: var(--pacs-btn-danger-hover, #dc2626) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================
   9. ALERT TYPE ICONS (SVG inline via JS)
   ============================================================ */

/* Icon container in modal header */
.pacs-modal-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.pacs-modal-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.pacs-modal-icon.pacs-icon-info {
  background: var(--pacs-info-bg, #3b82f626) !important;
}

.pacs-modal-icon.pacs-icon-info svg {
  fill: var(--pacs-info, var(--pacs-color-info)) !important;
}

.pacs-modal-icon.pacs-icon-success {
  background: var(--pacs-success-bg, rgba(16, 185, 129, 0.15)) !important;
}

.pacs-modal-icon.pacs-icon-success svg {
  fill: var(--pacs-success, var(--pacs-color-success)) !important;
}

.pacs-modal-icon.pacs-icon-warning {
  background: var(--pacs-warning-bg, rgba(245, 158, 11, 0.15)) !important;
}

.pacs-modal-icon.pacs-icon-warning svg {
  fill: var(--pacs-warning, var(--pacs-color-warning)) !important;
}

.pacs-modal-icon.pacs-icon-error {
  background: var(--pacs-error-bg, rgba(239, 68, 68, 0.15)) !important;
}

.pacs-modal-icon.pacs-icon-error svg {
  fill: var(--pacs-error, var(--pacs-color-error)) !important;
}

/* ============================================================
   10. NOTICE ALERT — Slide-in notification bar
   ============================================================ */

.notice-alert-container {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  width: 100% !important;
}

.notice-alert-wrapper {
  pointer-events: auto !important;
}

/* ============================================================
   10-B. NOTICE MODAL — Premium Notice Dialog
   ============================================================ */

/* ── Notice Modal Content Card ── */
#notice-modal .modal-content {
  background: var(--pacs-modal-surface, var(--smcw-color-popup-background, #161b26)) !important;
  border: 1px solid var(--pacs-modal-border, var(--smcw-color-popup-divider, #2a3348)) !important;
  border-radius: var(--pacs-radius-lg) !important;
  box-shadow: var(--pacs-modal-shadow, var(--pacs-shadow-xl)) !important;
  overflow: hidden !important;
}

/* Info accent bar at top */
#notice-modal .modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--pacs-gradient-info) !important;
  z-index: 1 !important;
}

/* ── Notice Modal Header — override customize.css generic ── */
#notice-modal .modal-header {
  border-bottom: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 20px 28px 16px !important;
  background: transparent !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: default !important;
  min-height: 60px !important;
}

#notice-modal .modal-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--smcw-color-popup-head-text, #e2e8f0) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

#notice-modal .modal-title::before {
  content: '\f0f3' !important;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  color: var(--pacs-color-info) !important;
}

#notice-modal .close {
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pacs-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--pacs-close-btn-color, #94a3b8) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  text-shadow: none !important;
}

#notice-modal .close:hover {
  opacity: 1 !important;
  background: var(--pacs-close-btn-hover-bg, rgba(255, 255, 255, 0.06)) !important;
  color: var(--pacs-close-btn-hover, #e2e8f0) !important;
}

/* ── Notice Modal Body ── */
#notice-modal .modal-body {
  padding: 20px 28px !important;
  max-height: 65vh !important;
  overflow-y: auto !important;
  border-bottom: none !important;
}

/* Scrollbar styling for notice body */
#notice-modal .modal-body::-webkit-scrollbar {
  width: 6px !important;
}
#notice-modal .modal-body::-webkit-scrollbar-track {
  background: transparent !important;
}
#notice-modal .modal-body::-webkit-scrollbar-thumb {
  background: var(--smcw-color-popup-divider, #2a3348) !important;
  border-radius: 3px !important;
}
#notice-modal .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4) !important;
}

/* ── Notice Content Items ── */
#notice-contents-div {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#notice-contents-div > div {
  border-radius: var(--pacs-radius-md) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 16px !important;
  transition: background var(--pacs-duration-fast) ease !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

#notice-contents-div > div:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Override Bootstrap alert colors for theme compatibility */
#notice-contents-div > .alert-info,
#notice-contents-div > .alert-light {
  background: rgba(59, 130, 246, 0.06) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
}

#notice-contents-div > .alert-dark {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--smcw-color-popup-divider, #2a3348) !important;
  color: var(--smcw-color-popup-text, #94a3b8) !important;
  opacity: 0.75 !important;
}

#notice-contents-div h6 {
  color: var(--smcw-color-popup-text, #cbd5e1) !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

/* Notice type icons */
#notice-contents-div .text-warning {
  color: var(--pacs-color-warning) !important;
}
#notice-contents-div .text-info {
  color: var(--pacs-color-info) !important;
}
#notice-contents-div .text-danger {
  color: var(--pacs-color-error) !important;
}

/* Link icons in notice items */
#notice-contents-div .notice-alert-link a {
  color: var(--pacs-color-info) !important;
  opacity: 1 !important;
  font-size: 16px !important;
  transition: opacity var(--pacs-duration-fast) ease !important;
}
#notice-contents-div .notice-alert-link a:hover {
  opacity: 0.7 !important;
}

/* Card news images */
#notice-contents-div .preview-card-news-image {
  border-radius: var(--pacs-radius-sm) !important;
  max-height: 200px !important;
  object-fit: cover !important;
}

/* ── Notice Modal Footer ── */
#notice-modal .modal-footer {
  border-top: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
  padding: 14px 28px 16px !important;
  background: transparent !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#notice-modal .modal-footer .form-check {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 8px !important;
}

#notice-modal .modal-footer .form-check-input {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--pacs-color-info) !important;
}

#notice-modal .modal-footer .form-check-label {
  font-size: 13px !important;
  color: var(--smcw-color-popup-text, #94a3b8) !important;
  cursor: pointer !important;
  margin: 0 !important;
  user-select: none !important;
  margin-left: 25px !important;
}

#notice-modal .modal-close-button {
  min-width: 80px !important;
  height: 36px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--pacs-color-info) !important;
  border: none !important;
  border-radius: var(--pacs-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--pacs-duration-fast) var(--pacs-ease-out) !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

#notice-modal .modal-close-button:hover {
  background: #2563eb !important;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.35) !important;
  transform: translateY(-1px) !important;
}

#notice-modal .modal-close-button:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ============================================================
   10-C. BOTTOM NOTICE FLICK — Premium Notification Bar
   ============================================================ */

/* ── Notice Bottom Wrapper ── */
.notice-bottom {
  position: relative !important;
  overflow: hidden !important;
}

/* ── Flicking Viewport ── */
#bottom-notice-flick,
#notice-banner {
  background: var(--pacs-notice-flick-bg-start, rgba(59, 130, 246, 0.5)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#bottom-notice-flick {
  height: 52px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding-right: 48px !important;
  overflow: hidden !important;
}

/* ── Flicking Panel Cards ── */
#bottom-notice-flick .flicking-panel {
  display: flex !important;
  padding: 0 0 0 20px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  height: 100% !important;
}

#bottom-notice-flick .flicking-panel > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

/* Type icon container */
#bottom-notice-flick .flicking-panel .text-warning,
#bottom-notice-flick .flicking-panel .text-info,
#bottom-notice-flick .flicking-panel .text-danger {
  font-size: 16px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

#bottom-notice-flick .flicking-panel .text-warning {
  background: rgba(245, 158, 11, 0.12) !important;
  color: var(--pacs-color-warning) !important;
}

#bottom-notice-flick .flicking-panel .text-info {
  background: rgba(59, 130, 246, 0.12) !important;
  color: var(--pacs-color-info) !important;
}

#bottom-notice-flick .flicking-panel .text-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--pacs-color-error) !important;
}

/* Message text */
#bottom-notice-flick .flicking-panel .h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--smcw-color-popup-text, var(--smcw-color-text, #cbd5e1)) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100vw - 200px) !important;
}

/* Link icon in flick panel */
#bottom-notice-flick .notice-alert-link {
  padding: 0 8px !important;
}

#bottom-notice-flick .notice-alert-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--pacs-radius-sm) !important;
  color: var(--pacs-color-info, #3b82f6) !important;
  opacity: 1 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  text-decoration: none !important;
  font-size: 18px !important;
}

#bottom-notice-flick .notice-alert-link a:hover {
  opacity: 0.7 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

/* ── Close Button ── */
.notice-bottom .bottom-notice-close-wrapper {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  align-items: center !important;
  background: transparent;
  padding: 0 8px 0 24px !important;
  z-index: 1 !important;
}

.notice-bottom .notice-closebtn {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--pacs-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--smcw-color-popup-text, #94a3b8) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: all var(--pacs-duration-fast) ease !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

.notice-bottom .notice-closebtn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.notice-bottom .notice-closebtn:active {
  transform: scale(0.9) !important;
}

/* ── SKT Event Panel in Flick ── */
#bottom-notice-flick .skt_event_panel {
  height: 100% !important;
  gap: 16px !important;
}

#bottom-notice-flick .skt_event_panel img {
  height: 80% !important;
  width: auto !important;
  border-radius: var(--pacs-radius-sm) !important;
  object-fit: contain !important;
}

/* ============================================================
   11. UTILITY CLASSES
   ============================================================ */

/* Focus ring for accessibility */
.pacs-focus-ring:focus-visible {
  outline: 2px solid var(--pacs-color-info) !important;
  outline-offset: 2px !important;
}

/* Smooth transitions for interactive elements */
.pacs-interactive {
  transition: all var(--pacs-duration-fast) var(--pacs-ease-out) !important;
}

.pacs-interactive:hover {
  transform: translateY(-1px) !important;
}

.pacs-interactive:active {
  transform: translateY(0) scale(0.97) !important;
}

/* Glass surface mixin via class */
.pacs-glass {
  background: var(--smcw-color-popup-background, #161b26) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border: 1px solid var(--smcw-color-popup-divider, #2a3348) !important;
}

/* ============================================================
   12. RESPONSIVE — Mobile adaptations
   ============================================================ */

@media (max-width: 576px) {
  #alert-modal .modal-dialog,
  #confirm-modal .modal-dialog,
  #custom-modal .modal-dialog,
  #notice-modal .modal-dialog {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  .toast {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    min-width: auto !important;
    max-width: none !important;
  }

  .popover {
    max-width: calc(100vw - 32px) !important;
  }

  .context-menu-list {
    min-width: 160px !important;
    max-width: calc(100vw - 32px) !important;
  }

  #alert-modal .modal-header,
  #confirm-modal .modal-header,
  #custom-modal .modal-header,
  #notice-modal .modal-header {
    padding: 14px 18px 12px !important;
  }

  #alert-modal .modal-body,
  #confirm-modal .modal-body,
  #custom-modal .modal-body,
  #notice-modal .modal-body {
    padding: 16px 18px !important;
  }

  #alert-modal .modal-footer,
  #confirm-modal .modal-footer,
  #custom-modal .modal-footer,
  #notice-modal .modal-footer {
    padding: 12px 18px !important;
  }

  /* Bottom flick responsive */
  #bottom-notice-flick {
    height: 46px !important;
    font-size: 13px !important;
  }

  #bottom-notice-flick .flicking-panel {
    padding: 0 12px !important;
  }

  #bottom-notice-flick .flicking-panel .h6 {
    font-size: 13px !important;
    max-width: calc(100vw - 140px) !important;
  }
}