/**
 * Rails Modal Manager - Complete Styles
 * Ported from @reshacs/react-modal-manager
 */

/* ============================================
   CSS Variables (Light Theme)
   ============================================ */
:root {
  /* OS/브라우저 자동 폼 색상 대응 (input, scrollbar 등) */
  color-scheme: light dark;

  /* v1.0.48 — Motion 토큰 (기존 --rmm-animation-duration/timing 과 병행) */
  --rmm-dur-fast: 140ms;
  --rmm-dur-base: 220ms;
  --rmm-dur-slow: 360ms;
  --rmm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --rmm-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --rmm-ease-decel: cubic-bezier(0, 0, 0, 1);
  --rmm-ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --rmm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* v1.0.48 — 포커스 링 / 드래그 강조 섀도 */
  --rmm-ring-color: rgba(59, 130, 246, 0.55);
  --rmm-ring: 0 0 0 2px var(--rmm-modal-bg, #ffffff), 0 0 0 4px var(--rmm-ring-color);
  --rmm-elev-drag:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.22),
    0 48px 96px -32px rgba(0, 0, 0, 0.30);

  /* Modal */
  --rmm-modal-bg: #ffffff;
  /* v1.0.57 — 모달 외곽 하드 border 제거 (drop shadow 로 경계 표현).
     기존처럼 선이 필요하면 :root { --rmm-modal-border: rgba(0,0,0,0.1); } 로 복구 */
  --rmm-modal-border: transparent;
  --rmm-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --rmm-modal-radius: 12px;

  /* Overlay */
  --rmm-overlay-bg: rgba(0, 0, 0, 0.5);
  --rmm-overlay-blur: 0px;

  /* Header — v1.0.57 블루 차콜 (사용자 지정 팔레트) */
  --rmm-header-bg: #3e6187;
  --rmm-header-border: rgba(0, 0, 0, 0.12);
  --rmm-header-text: #ffffff;
  --rmm-header-height: 52px;
  --rmm-header-title-align: center; /* left | center — 필요 시 개별 모달에서 override */
  --rmm-header-accent: #60a5fa;

  /* Header - Depth Colors (자식·손자 모달은 살짝 밝아지는 계단) */
  --rmm-header-bg-depth-0: #3e6187;
  --rmm-header-text-depth-0: #ffffff;
  --rmm-header-bg-depth-1: #4b7099;
  --rmm-header-text-depth-1: #ffffff;
  --rmm-header-bg-depth-2: #587fab;
  --rmm-header-text-depth-2: #ffffff;
  --rmm-header-bg-depth-3: #6590bd;
  --rmm-header-text-depth-3: #ffffff;

  /* Footer — v1.0.57 정제: 본문과 분리감 + 살짝 톤다운된 신뢰감 있는 베이스 */
  --rmm-footer-bg: #f8fafc;
  --rmm-footer-border: rgba(15, 23, 42, 0.08);
  --rmm-footer-text: #475569;
  --rmm-footer-height: 60px;
  --rmm-footer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Sidebar — v1.0.57 다크 블루 톤 통합 (헤더/서브메뉴와 좌측 한 판으로 연결)
     사용자 지정 팔레트(헤더 #3e6187 · 서브메뉴 #385678 · 활성 #406389)와 일관성 유지 */
  --rmm-sidebar-bg: #385678;
  --rmm-sidebar-border: rgba(0, 0, 0, 0.15);
  --rmm-sidebar-width: 240px;
  --rmm-sidebar-collapsed-width: 64px;
  --rmm-sidebar-text: #acc0d8;
  --rmm-sidebar-icon: #acc0d8;
  --rmm-sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --rmm-sidebar-item-active-bg: #406389;
  --rmm-sidebar-item-active-text: #ffffff;
  --rmm-sidebar-item-active-icon: #ffffff;

  /* Submenu — v1.0.57 블루 차콜 (사용자 지정 팔레트)
     컨테이너 = 미선택 탭 = #385678 로 동일 (미선택 탭은 배경에 녹아듦)
     선택 탭은 살짝 밝은 #406389 로 은은히 도드라짐 */
  --rmm-submenu-bg: #385678;
  --rmm-submenu-container-bg: #385678;
  --rmm-submenu-height: 42px;
  --rmm-submenu-item-text: #acc0d8;
  --rmm-submenu-item-hover-bg: rgba(255, 255, 255, 0.06);
  --rmm-submenu-item-active-bg: #406389;
  --rmm-submenu-item-active-text: #ffffff;
  --rmm-submenu-item-active-border: transparent;
  --rmm-submenu-item-active-underline: #ffffff;

  /* Content */
  --rmm-content-bg: #ffffff;
  --rmm-content-text: #1e293b;

  /* Buttons */
  --rmm-btn-primary-bg: #3b82f6;
  --rmm-btn-primary-hover: #2563eb;
  --rmm-btn-primary-text: #ffffff;
  --rmm-btn-secondary-bg: #e2e8f0;
  --rmm-btn-secondary-hover: #cbd5e1;
  --rmm-btn-secondary-text: #334155;
  --rmm-btn-danger-bg: #ef4444;
  --rmm-btn-danger-hover: #dc2626;
  --rmm-btn-danger-text: #ffffff;
  --rmm-btn-success-bg: #22c55e;
  --rmm-btn-success-hover: #16a34a;
  --rmm-btn-success-text: #ffffff;
  --rmm-btn-warning-bg: #f59e0b;
  --rmm-btn-warning-hover: #d97706;
  --rmm-btn-warning-text: #ffffff;
  --rmm-btn-ghost-hover: rgba(0, 0, 0, 0.05);

  /* Taskbar */
  --rmm-taskbar-bg: #1e293b;
  --rmm-taskbar-height: 48px;
  --rmm-taskbar-item-bg: rgba(255, 255, 255, 0.1);
  --rmm-taskbar-item-hover: rgba(255, 255, 255, 0.2);
  --rmm-taskbar-item-text: #ffffff;

  /* Badge */
  --rmm-badge-bg: #ef4444;
  --rmm-badge-text: #ffffff;

  /* Resize */
  --rmm-resize-handle-size: 8px;
  --rmm-resize-handle-hover: rgba(59, 130, 246, 0.3);

  /* Animation */
  --rmm-animation-duration: 200ms;
  --rmm-animation-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  /* v1.0.57 — z-index 계층 재정렬: overlay < taskbar < modal
     → 모달이 최소화 태스크바 위에 항상 노출, 태스크바는 여전히 overlay 위라 클릭 가능 */
  --rmm-z-overlay: 2000;
  --rmm-z-taskbar: 2100;
  --rmm-z-modal: 2200;
}

/* ============================================
   Dark Theme
   ============================================ */
.dark {
  --rmm-modal-bg: #1e293b;
  --rmm-modal-border: transparent;
  --rmm-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  --rmm-overlay-bg: rgba(0, 0, 0, 0.7);

  /* v1.0.57 — 라이트와 동일 원칙 유지, 한 단계 더 어두운 톤 */
  --rmm-header-bg: #0b1220;
  --rmm-header-border: rgba(255, 255, 255, 0.08);
  --rmm-header-text: #f1f5f9;
  --rmm-header-accent: #60a5fa;

  /* Header - Depth Colors (Dark Theme) — 단조 차콜 계단 */
  --rmm-header-bg-depth-0: #0b1220;
  --rmm-header-text-depth-0: #f8fafc;
  --rmm-header-bg-depth-1: #111a2e;
  --rmm-header-text-depth-1: #f8fafc;
  --rmm-header-bg-depth-2: #16223c;
  --rmm-header-text-depth-2: #f8fafc;
  --rmm-header-bg-depth-3: #1c2a4a;
  --rmm-header-text-depth-3: #f8fafc;

  --rmm-footer-bg: #0f172a;
  --rmm-footer-border: rgba(255, 255, 255, 0.08);
  --rmm-footer-text: #cbd5e1;
  --rmm-footer-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --rmm-sidebar-bg: #111a2e;
  --rmm-sidebar-border: rgba(255, 255, 255, 0.08);
  --rmm-sidebar-text: #cbd5e1;
  --rmm-sidebar-icon: #94a3b8;
  --rmm-sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --rmm-sidebar-item-active-bg: #1e293b;
  --rmm-sidebar-item-active-text: #f8fafc;
  --rmm-sidebar-item-active-icon: #f8fafc;

  --rmm-submenu-bg: #0b1220;
  --rmm-submenu-container-bg: #0b1220;
  --rmm-submenu-item-text: #94a3b8;
  --rmm-submenu-item-hover-bg: rgba(255, 255, 255, 0.06);
  --rmm-submenu-item-active-bg: #1e293b;
  --rmm-submenu-item-active-text: #f8fafc;
  --rmm-submenu-item-active-border: transparent;
  --rmm-submenu-item-active-underline: #f8fafc;

  --rmm-content-bg: #1e293b;
  --rmm-content-text: #f1f5f9;

  --rmm-btn-secondary-bg: #334155;
  --rmm-btn-secondary-hover: #475569;
  --rmm-btn-secondary-text: #f1f5f9;
  --rmm-btn-ghost-hover: rgba(255, 255, 255, 0.05);

  --rmm-taskbar-bg: #0f172a;
  --rmm-taskbar-item-bg: rgba(255, 255, 255, 0.1);
  --rmm-taskbar-item-hover: rgba(255, 255, 255, 0.15);

  /* v1.0.48 — 다크 테마 ring/elev */
  --rmm-ring-color: rgba(99, 179, 237, 0.65);
  --rmm-elev-drag:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    0 48px 96px -32px rgba(0, 0, 0, 0.70);
}

/* ============================================
   Overlay
   ============================================ */
.rmm-overlay {
  position: fixed;
  inset: 0;
  background: var(--rmm-overlay-bg);
  z-index: var(--rmm-z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rmm-animation-duration) var(--rmm-animation-timing),
              visibility var(--rmm-animation-duration) var(--rmm-animation-timing);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.rmm-overlay.rmm-active {
  opacity: 1;
  visibility: visible;
}

.rmm-overlay.rmm-overlay-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rmm-overlay.rmm-overlay-passthrough {
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Modal Container
   ============================================ */
.rmm-modal {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--rmm-modal-bg);
  /* v1.0.57 — border 를 외곽 라인(rmm-modal-outline)로 분리 관리.
     라인 없을 땐 width 0 으로 계산까지 빼 subpixel 경계 아티팩트 방지. */
  border: var(--rmm-modal-border-width, 0) solid var(--rmm-modal-border, transparent);
  border-radius: var(--rmm-modal-radius);
  box-shadow: var(--rmm-modal-shadow);
  /* v1.0.57 — 헤더 아래 그림자 오버레이용 stacking context 확보 (::before 가 z-index:1 로 올라감) */
  isolation: isolate;
  z-index: var(--rmm-z-modal);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95) translateY(10px);
  transition: opacity var(--rmm-animation-duration) var(--rmm-animation-timing),
              visibility var(--rmm-animation-duration) var(--rmm-animation-timing),
              transform var(--rmm-animation-duration) var(--rmm-animation-timing);
  overflow: hidden;
  max-height: 90vh;
  max-height: min(90vh, 90dvh); /* v1.0.48 — iOS 주소창 대응, 미지원 브라우저는 위 값 사용 */
}

.rmm-modal.rmm-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}

/* v1.0.57 — 헤더 바로 아래 그림자 오버레이
   서브메뉴/사이드바/body 유무와 무관하게 헤더 아래 항상 은은한 drop shadow 효과 제공.
   .rmm-modal::before 는 positioned descendant 로서 non-positioned 자식(header/submenu/body) 위에 렌더됨.
   z-index 를 header 자체에 주지 않아 rounded-corner subpixel 아티팩트 없음. */
.rmm-modal::before {
  content: "";
  position: absolute;
  top: var(--rmm-header-height);
  left: 0;
  right: 0;
  height: 6px;
  background: var(--rmm-header-underlay-shadow, linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 100%));
  pointer-events: none;
  z-index: 1;
}

/* Minimized state with fade animation - animates to bottom-left */
.rmm-modal.rmm-minimized {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(0.2) !important;
  transform-origin: 0% 100% !important;
  pointer-events: none !important;
}

/* Overlay minimized state */
.rmm-overlay.rmm-minimized {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Size variants */
/* Modal Size Options (PC)
   - width: 브라우저 크기 대비 비율
   - min-width: 1920px 기준 비율, 단 브라우저보다 커지지 않도록 min() 사용
   - max-width: 브라우저보다 커지지 않도록 제한 (20px 여백 확보)
*/
.rmm-modal.rmm-size-fit { width: auto; min-width: min(200px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }
.rmm-modal.rmm-size-xss { width: 20%; min-width: min(384px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }  /* 1920 * 20% */
.rmm-modal.rmm-size-xs { width: 30%; min-width: min(576px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }   /* 1920 * 30% */
.rmm-modal.rmm-size-sm { width: 40%; min-width: min(768px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }   /* 1920 * 40% */
.rmm-modal.rmm-size-md { width: 50%; min-width: min(960px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }   /* 1920 * 50% */
.rmm-modal.rmm-size-lg { width: 60%; min-width: min(1152px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }  /* 1920 * 60% */
.rmm-modal.rmm-size-xl { width: 70%; min-width: min(1344px, calc(100vw - 40px)); max-width: calc(100vw - 40px); }  /* 1920 * 70% */
.rmm-modal.rmm-size-full,
.rmm-modal.rmm-size-full.rmm-active,
.rmm-modal.rmm-size-full.rmm-position-center,
.rmm-modal.rmm-size-full.rmm-position-center.rmm-active,
.rmm-modal.rmm-size-full.rmm-position-top,
.rmm-modal.rmm-size-full.rmm-position-top.rmm-active,
.rmm-modal.rmm-size-full.rmm-position-bottom,
.rmm-modal.rmm-size-full.rmm-position-bottom.rmm-active {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  border-radius: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  margin: 0 !important;
}

/* Position variants */
.rmm-modal.rmm-position-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rmm-modal.rmm-position-center.rmm-active {
  transform: translate(-50%, -50%) scale(1);
}

.rmm-modal.rmm-position-top {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.rmm-modal.rmm-position-top.rmm-active {
  transform: translateX(-50%) scale(1);
}

.rmm-modal.rmm-position-bottom {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.rmm-modal.rmm-position-bottom.rmm-active {
  transform: translateX(-50%) scale(1);
}

.rmm-modal.rmm-position-top-left {
  top: 20px;
  left: 20px;
  transform: none;
}

.rmm-modal.rmm-position-top-right {
  top: 20px;
  right: 20px;
  transform: none;
}

.rmm-modal.rmm-position-bottom-left {
  bottom: 20px;
  left: 20px;
  transform: none;
}

.rmm-modal.rmm-position-bottom-right {
  bottom: 20px;
  right: 20px;
  transform: none;
}

/* ============================================
   Modal Header
   ============================================ */
.rmm-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--rmm-header-height);
  min-height: var(--rmm-header-height);
  background: var(--rmm-header-bg);
  /* v1.0.57 — 헤더 상/하 모서리 모달 radius 와 정확히 맞춰 subpixel 하이라이트 방지 */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  /* v1.0.57 — 헤더와 서브메뉴 사이 하드 라인 제거. 미묘한 채도 차이만으로 레이어 분리 표현 */
  border-bottom: 1px solid var(--rmm-header-divider, transparent);
  /* v1.0.57 — 헤더 하단 은은한 drop shadow (1.png 레퍼런스) — 깊이감 표현 */
  box-shadow: var(--rmm-header-shadow, 0 3px 6px rgba(0, 0, 0, 0.12));
  user-select: none;
  flex-shrink: 0;
}

/* v1.0.57 — 드래그는 .rmm-drag-handle 에서만 시작되므로
   헤더 전체에 move 커서를 주지 않는다. 커서 힌트는 드래그핸들에만. */
.rmm-header.rmm-draggable {
  cursor: default;
}

.rmm-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  z-index: 1;
}

/* v1.0.57 — 타이틀 중앙 정렬 (세로·가로 모두 flex 로 확실하게)
   h2 기본 margin 을 0 으로 리셋하고 inset: 0 + flex 로 absolute 영역 내 중앙 정렬.
   하위 구조:
     .rmm-header-title-text   — 제목 텍스트
     .rmm-header-section      — 모바일 + 사이드바 있는 경우 현재 메뉴명(서브타이틀) */
.rmm-header-title {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: var(--rmm-header-title-justify, center);
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rmm-header-text);
  line-height: 1;
  padding: 0 88px; /* 좌우 컨트롤 영역 침범 방지 */
  pointer-events: none;
  letter-spacing: -0.01em;
  min-width: 0;
}
.rmm-header-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rmm-header-title > *:not(.rmm-header-title-text):not(.rmm-header-section) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 사이드바 메뉴명 서브타이틀 — 사이드바 있는 모달에서 현재 선택 메뉴명 노출 (v1.0.57) */
.rmm-header-section {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-header-text);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  letter-spacing: -0.01em;
}
.rmm-header-section:not(:empty)::before {
  content: "›";
  margin-right: 6px;
  opacity: 0.55;
  font-weight: 400;
}
/* 사이드바 있는 모달의 헤더 섹션에 텍스트가 있을 때 노출 (데스크톱 + 모바일 공통) */
.rmm-modal:has(.rmm-sidebar) .rmm-header-section:not(:empty) {
  display: inline-flex;
  align-items: center;
}

/* 좌측 정렬이 필요한 경우: 기존 동작 복원 */
.rmm-header.rmm-header-title-left .rmm-header-title {
  position: static;
  transform: none;
  text-align: left;
  padding: 0;
  pointer-events: auto;
}
.rmm-header.rmm-header-title-left .rmm-header-left {
  flex: 1;
}

.rmm-header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1; /* 중앙 absolute 타이틀 위에 올라가도록 */
}

.rmm-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--rmm-header-text);
  opacity: 0.7;
  transition: opacity 0.15s, background-color 0.15s;
}

.rmm-header-btn:hover {
  opacity: 1;
  /* 헤더 배경이 어두운 톤이므로 반투명 흰색 오버레이 사용 */
  background: rgba(255, 255, 255, 0.12);
}

.rmm-header-btn.rmm-close-btn {
  width: calc(var(--rmm-header-height) + 1px);
  height: calc(var(--rmm-header-height) + 1px);
  border-radius: 0;
  margin: -1px -17px -1px 0;
}

.rmm-header-btn.rmm-close-btn:hover {
  background: #ef4444;
  color: white;
  opacity: 1;
}

.rmm-header-btn.rmm-close-btn svg {
  width: 22px;
  height: 22px;
}

.rmm-header-btn svg {
  width: 18px;
  height: 18px;
}

/* Custom header buttons */
.rmm-header-btn-custom {
  opacity: 0.8;
}

.rmm-header-btn-custom:hover {
  opacity: 1;
}

/* Header button variants */
.rmm-header-btn-danger {
  color: var(--rmm-btn-danger-bg);
}

.rmm-header-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--rmm-btn-danger-hover);
}

.rmm-header-btn-warning {
  color: var(--rmm-btn-warning-bg);
}

.rmm-header-btn-warning:hover {
  background: rgba(245, 158, 11, 0.15);
  color: var(--rmm-btn-warning-hover);
}

.rmm-header-btn-success {
  color: var(--rmm-btn-success-bg);
}

.rmm-header-btn-success:hover {
  background: rgba(34, 197, 94, 0.15);
  color: var(--rmm-btn-success-hover);
}

.rmm-header-btn-info {
  color: var(--rmm-btn-primary-bg);
}

.rmm-header-btn-info:hover {
  background: rgba(59, 130, 246, 0.15);
  color: var(--rmm-btn-primary-hover);
}

/* Text buttons in header */
.rmm-header-btn-text {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

.rmm-header-btn-text.rmm-header-btn-primary {
  background: var(--rmm-btn-primary-bg);
  color: white;
  border-radius: 6px;
  margin: 0 4px;
}

.rmm-header-btn-text.rmm-header-btn-primary:hover {
  background: var(--rmm-btn-primary-hover);
}

.rmm-header-btn-text.rmm-header-btn-secondary {
  background: var(--rmm-btn-ghost-bg);
  color: var(--rmm-text-secondary);
  border-radius: 6px;
  margin: 0 4px;
}

.rmm-header-btn-text.rmm-header-btn-secondary:hover {
  background: var(--rmm-btn-ghost-hover);
  color: var(--rmm-text-primary);
}

.rmm-header-btn-label {
  white-space: nowrap;
}

/* ============================================
   Modal Depth-based Header Colors
   ============================================ */
/* Depth 0 - Parent Modal (Purple gradient) */
.rmm-modal.rmm-depth-0 .rmm-header {
  background: var(--rmm-header-bg-depth-0);
  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
  border-bottom-color: var(--rmm-header-divider, transparent);
}

.rmm-modal.rmm-depth-0 .rmm-header-title {
  color: var(--rmm-header-text-depth-0);
}

.rmm-modal.rmm-depth-0 .rmm-header-btn {
  color: var(--rmm-header-text-depth-0);
}

.rmm-modal.rmm-depth-0 .rmm-header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rmm-modal.rmm-depth-0 .rmm-header-btn.rmm-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
}

.rmm-modal.rmm-depth-0 .rmm-drag-handle {
  color: var(--rmm-header-text-depth-0);
  opacity: 0.6;
}

/* Depth 1 - Child Modal (Green gradient) */
.rmm-modal.rmm-depth-1 .rmm-header {
  background: var(--rmm-header-bg-depth-1);
  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
  border-bottom-color: var(--rmm-header-divider, transparent);
}

.rmm-modal.rmm-depth-1 .rmm-header-title {
  color: var(--rmm-header-text-depth-1);
}

.rmm-modal.rmm-depth-1 .rmm-header-btn {
  color: var(--rmm-header-text-depth-1);
}

.rmm-modal.rmm-depth-1 .rmm-header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rmm-modal.rmm-depth-1 .rmm-header-btn.rmm-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
}

.rmm-modal.rmm-depth-1 .rmm-drag-handle {
  color: var(--rmm-header-text-depth-1);
  opacity: 0.6;
}

/* Depth 2 - Grandchild Modal (Orange gradient) */
.rmm-modal.rmm-depth-2 .rmm-header {
  background: var(--rmm-header-bg-depth-2);
  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
  border-bottom-color: var(--rmm-header-divider, transparent);
}

.rmm-modal.rmm-depth-2 .rmm-header-title {
  color: var(--rmm-header-text-depth-2);
}

.rmm-modal.rmm-depth-2 .rmm-header-btn {
  color: var(--rmm-header-text-depth-2);
}

.rmm-modal.rmm-depth-2 .rmm-header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rmm-modal.rmm-depth-2 .rmm-header-btn.rmm-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
}

.rmm-modal.rmm-depth-2 .rmm-drag-handle {
  color: var(--rmm-header-text-depth-2);
  opacity: 0.6;
}

/* Depth 3+ - Deep nested modals (Pink/Red gradient) */
.rmm-modal.rmm-depth-3 .rmm-header,
.rmm-modal.rmm-depth-4 .rmm-header,
.rmm-modal.rmm-depth-5 .rmm-header {
  background: var(--rmm-header-bg-depth-3);
  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
  border-bottom-color: var(--rmm-header-divider, transparent);
}

.rmm-modal.rmm-depth-3 .rmm-header-title,
.rmm-modal.rmm-depth-4 .rmm-header-title,
.rmm-modal.rmm-depth-5 .rmm-header-title {
  color: var(--rmm-header-text-depth-3);
}

.rmm-modal.rmm-depth-3 .rmm-header-btn,
.rmm-modal.rmm-depth-4 .rmm-header-btn,
.rmm-modal.rmm-depth-5 .rmm-header-btn {
  color: var(--rmm-header-text-depth-3);
}

.rmm-modal.rmm-depth-3 .rmm-header-btn:hover,
.rmm-modal.rmm-depth-4 .rmm-header-btn:hover,
.rmm-modal.rmm-depth-5 .rmm-header-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.rmm-modal.rmm-depth-3 .rmm-header-btn.rmm-close-btn:hover,
.rmm-modal.rmm-depth-4 .rmm-header-btn.rmm-close-btn:hover,
.rmm-modal.rmm-depth-5 .rmm-header-btn.rmm-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
}

.rmm-modal.rmm-depth-3 .rmm-drag-handle,
.rmm-modal.rmm-depth-4 .rmm-drag-handle,
.rmm-modal.rmm-depth-5 .rmm-drag-handle {
  color: var(--rmm-header-text-depth-3);
  opacity: 0.6;
}

/* ============================================
   Custom Header Colors (via CSS variables)
   Usage: style="--rmm-custom-header-bg: #3b82f6; --rmm-custom-header-text: #ffffff;"
   ============================================ */
.rmm-modal.rmm-custom-header .rmm-header {
  background: var(--rmm-custom-header-bg, var(--rmm-header-bg));
  border-bottom-color: var(--rmm-custom-header-border, var(--rmm-header-border));
}

.rmm-modal.rmm-custom-header .rmm-header-title {
  color: var(--rmm-custom-header-text, var(--rmm-header-text));
}

.rmm-modal.rmm-custom-header .rmm-header-btn {
  color: var(--rmm-custom-header-text, var(--rmm-header-text));
}

.rmm-modal.rmm-custom-header .rmm-header-btn:hover {
  background: var(--rmm-custom-header-btn-hover, rgba(255, 255, 255, 0.15));
}

.rmm-modal.rmm-custom-header .rmm-header-btn.rmm-close-btn:hover {
  background: var(--rmm-custom-header-close-btn-hover, rgba(239, 68, 68, 0.9));
}

.rmm-modal.rmm-custom-header .rmm-drag-handle {
  color: var(--rmm-custom-header-text, var(--rmm-header-text));
}

/* Size controls dropdown */
.rmm-size-controls {
  position: relative;
}

.rmm-size-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--rmm-modal-bg);
  border: 1px solid var(--rmm-modal-border);
  border-radius: 8px;
  box-shadow: var(--rmm-modal-shadow);
  padding: 4px;
  min-width: 100px;
  z-index: 10;
  display: none;
}

.rmm-size-controls:hover .rmm-size-dropdown,
.rmm-size-dropdown:hover {
  display: block;
}

.rmm-size-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  color: var(--rmm-header-text);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.rmm-size-option:hover {
  background: var(--rmm-btn-ghost-hover);
}

.rmm-size-option.rmm-active {
  background: var(--rmm-sidebar-item-active-bg);
  color: var(--rmm-sidebar-item-active-text);
}

/* Sidebar toggle button */
.rmm-sidebar-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}

.rmm-sidebar-toggle svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   Modal Body
   ============================================ */
.rmm-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.rmm-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.rmm-content {
  flex: 1;
  overflow-y: auto;
  background: var(--rmm-content-bg);
  color: var(--rmm-content-text);
}

/* ============================================
   Modal Sidebar (v1.0.57 다크 블루 톤 — 헤더/서브메뉴와 통합)
   ============================================ */
.rmm-sidebar {
  width: var(--rmm-sidebar-width);
  min-width: var(--rmm-sidebar-width);
  background: var(--rmm-sidebar-bg);
  border-right: 1px solid var(--rmm-sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width var(--rmm-animation-duration) var(--rmm-animation-timing),
              min-width var(--rmm-animation-duration) var(--rmm-animation-timing);
  overflow: hidden;
}

.rmm-sidebar.rmm-sidebar-collapsed {
  width: var(--rmm-sidebar-collapsed-width);
  min-width: var(--rmm-sidebar-collapsed-width);
}

.rmm-sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 다크 사이드바 스크롤바 톤 다운 */
.rmm-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.rmm-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.rmm-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}
.rmm-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.rmm-sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--rmm-sidebar-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  /* Button reset for when using <button> */
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}

.rmm-sidebar-item:hover:not(.rmm-active) {
  background: var(--rmm-sidebar-item-hover);
  color: #ffffff;
}

.rmm-sidebar-item.rmm-active {
  background: var(--rmm-sidebar-item-active-bg);
  color: var(--rmm-sidebar-item-active-text);
  font-weight: 600;
}

/* 활성 항목 좌측 3px 포인트 바 — 서브메뉴 활성 탭 하단 바와 대칭 */
.rmm-sidebar-item.rmm-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--rmm-sidebar-item-active-underline, #ffffff);
  border-radius: 0 2px 2px 0;
}

.rmm-sidebar-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--rmm-sidebar-icon);
  transition: color 0.15s ease;
}

.rmm-sidebar-item:hover:not(.rmm-active) .rmm-sidebar-item-icon {
  color: #ffffff;
}

.rmm-sidebar-item.rmm-active .rmm-sidebar-item-icon {
  color: var(--rmm-sidebar-item-active-icon, var(--rmm-sidebar-item-active-text));
}

.rmm-sidebar-item-label {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.rmm-sidebar-collapsed .rmm-sidebar-item {
  justify-content: center;
  padding: 10px;
}

.rmm-sidebar-collapsed .rmm-sidebar-item-label {
  display: none;
}

.rmm-sidebar-item-badge {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--rmm-badge-bg);
  color: var(--rmm-badge-text);
  border-radius: 10px;
}

.rmm-sidebar-collapsed .rmm-sidebar-item-badge {
  display: none;
}

/* Mobile sidebar overlay */
.rmm-sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .rmm-sidebar {
    position: absolute;
    top: var(--rmm-header-height);
    left: 0;
    bottom: 0;
    z-index: 10;
    width: var(--rmm-sidebar-width);
    min-width: var(--rmm-sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--rmm-animation-duration) var(--rmm-animation-timing);
  }

  .rmm-sidebar:not(.rmm-sidebar-collapsed) {
    transform: translateX(0);
  }

  .rmm-sidebar-overlay {
    display: block;
    position: absolute;
    inset: 0;
    top: var(--rmm-header-height);
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rmm-animation-duration) var(--rmm-animation-timing),
                visibility var(--rmm-animation-duration) var(--rmm-animation-timing);
    z-index: 9;
    cursor: pointer;
  }

  .rmm-sidebar:not(.rmm-sidebar-collapsed) ~ .rmm-sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* When modal is maximized on mobile - icons state uses inline (takes space) */
  .rmm-modal.rmm-size-full .rmm-sidebar {
    position: relative;
    top: auto;
    transform: none;
  }

  /* icons 상태 (collapsed) - 본문 공간 차지 (inline) */
  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-collapsed {
    width: var(--rmm-sidebar-collapsed-width);
    min-width: var(--rmm-sidebar-collapsed-width);
  }

  /* expanded 상태 - 오버레이 방식 (본문 위에 떠있음) */
  .rmm-modal.rmm-size-full .rmm-sidebar:not(.rmm-sidebar-collapsed):not(.rmm-sidebar-hidden) {
    position: absolute;
    top: var(--rmm-header-height);
    left: 0;
    bottom: 0;
    z-index: 10;
    width: var(--rmm-sidebar-width);
    min-width: var(--rmm-sidebar-width);
    transform: translateX(0);
  }

  /* hidden 상태 - 완전 숨김 */
  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-hidden {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-right: none;
  }

  /* hidden/collapsed 상태에서는 오버레이 숨김 */
  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-hidden ~ .rmm-sidebar-overlay,
  .rmm-modal.rmm-size-full .rmm-sidebar.rmm-sidebar-collapsed ~ .rmm-sidebar-overlay {
    opacity: 0;
    visibility: hidden;
  }
}

/* ============================================
   Modal Submenu (v1.0.57 Dark Tab Style)
   ---------------------------------------------
   레퍼런스 1.png: 다크 배경 + 흰색 활성 탭 + 본문과 매끄럽게 이어짐.
   비활성 탭은 어두운 배경 위 연한 회색 글자.
   pill 호환은 .rmm-submenu-pill 클래스로 유지.
   ============================================ */
.rmm-submenu {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 10px 0;
  min-height: var(--rmm-submenu-height);
  background: var(--rmm-submenu-container-bg);
  overflow-x: auto;
  flex-shrink: 0;
}

/* 내부 컨테이너는 pill 스타일과의 호환을 위해 유지하지만 시각적으로 투명 */
.rmm-submenu-inner {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.rmm-submenu::-webkit-scrollbar {
  height: 4px;
}

.rmm-submenu::-webkit-scrollbar-track {
  background: transparent;
}

.rmm-submenu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.rmm-submenu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rmm-submenu-item-text);
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rmm-submenu-item:hover:not(.rmm-active):not(.rmm-disabled) {
  background: var(--rmm-submenu-item-hover-bg);
  color: #f8fafc;
}

.rmm-submenu-item.rmm-active {
  background: var(--rmm-submenu-item-active-bg);
  color: var(--rmm-submenu-item-active-text);
  font-weight: 600;
}

/* 활성 탭 하단: 흰색 포인트 바 (1.png 레퍼런스) */
.rmm-submenu-item.rmm-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--rmm-submenu-item-active-underline, #ffffff);
}

/* Legacy pill 호환 모드 (원하는 경우 .rmm-submenu.rmm-submenu-pill 으로 사용) */
.rmm-submenu.rmm-submenu-pill {
  align-items: center;
  padding: 8px 12px;
  border-bottom: none;
  gap: 6px;
}
.rmm-submenu.rmm-submenu-pill .rmm-submenu-inner {
  padding: 4px;
  background: var(--rmm-submenu-bg);
  border-radius: 8px;
  flex: 0 0 auto;
}
.rmm-submenu.rmm-submenu-pill .rmm-submenu-item {
  padding: 8px 16px;
  border-radius: 6px;
}
.rmm-submenu.rmm-submenu-pill .rmm-submenu-item.rmm-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.rmm-submenu.rmm-submenu-pill .rmm-submenu-item.rmm-active::before,
.rmm-submenu.rmm-submenu-pill .rmm-submenu-item.rmm-active::after {
  display: none;
}

.rmm-submenu-item.rmm-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rmm-submenu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

/* ============================================
   Tab Panels (Submenu Content)
   ============================================ */
.rmm-tab-panel {
  display: none;
}

.rmm-tab-panel.rmm-tab-panel-active {
  display: block;
}

/* AJAX Content Container */
.rmm-tab-content {
  min-height: 100px;
  position: relative;
}

.rmm-tab-content.rmm-tab-loading {
  min-height: 150px;
}

/* Loading State */
.rmm-tab-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--rmm-submenu-item-text);
  font-size: 14px;
}

.rmm-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--rmm-modal-border);
  border-top-color: var(--rmm-btn-primary-bg);
  border-radius: 50%;
  animation: rmm-spin 0.8s linear infinite;
}

/* Error State */
.rmm-tab-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  color: var(--rmm-btn-danger-bg);
  font-size: 14px;
  text-align: center;
}

/* ============================================
   Sidebar Panels (Sidebar Content Switching)
   ============================================ */
.rmm-sidebar-panel {
  display: none;
}

.rmm-sidebar-panel.rmm-sidebar-panel-active {
  display: block;
}

/* ============================================
   Submenu Groups (Sidebar-linked Submenus)
   ============================================ */
.rmm-submenu-group {
  display: none;
  flex-shrink: 0;
}

.rmm-submenu-group.rmm-submenu-group-active {
  display: block;
  flex-shrink: 0;
}

/* Wrapper for submenu groups - contains multiple submenus */
.rmm-submenu-container {
  display: contents;
}

/* ============================================
   Modal Footer (v1.0.57 정제 — 본문과 레이어 분리 + 부드러운 highlight)
   ============================================ */
.rmm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  height: var(--rmm-footer-height);
  min-height: var(--rmm-footer-height);
  background: var(--rmm-footer-bg);
  border-top: 1px solid var(--rmm-footer-border);
  /* 상단 안쪽 1px 흰 하이라이트로 "내린 서랍" 느낌 + 모달 하단 radius 상속 */
  box-shadow: var(--rmm-footer-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.6));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  flex-shrink: 0;
}

.rmm-footer-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rmm-footer-message {
  font-size: 13px;
  color: var(--rmm-footer-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmm-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================
   Buttons (v1.0.57 정제 — 미세 lift · active 눌림 · focus 링)
   ============================================ */
.rmm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, opacity 0.15s;
}

.rmm-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.rmm-btn:focus-visible {
  outline: 2px solid var(--rmm-header-accent, #60a5fa);
  outline-offset: 2px;
}

.rmm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rmm-btn-primary {
  background: var(--rmm-btn-primary-bg);
  color: var(--rmm-btn-primary-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.rmm-btn-primary:hover:not(:disabled) {
  background: var(--rmm-btn-primary-hover);
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.rmm-btn-secondary {
  background: var(--rmm-btn-secondary-bg);
  color: var(--rmm-btn-secondary-text);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.rmm-btn-secondary:hover:not(:disabled) {
  background: var(--rmm-btn-secondary-hover);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.rmm-btn-danger {
  background: var(--rmm-btn-danger-bg);
  color: var(--rmm-btn-danger-text);
}

.rmm-btn-danger:hover:not(:disabled) {
  background: var(--rmm-btn-danger-hover);
}

.rmm-btn-success {
  background: var(--rmm-btn-success-bg);
  color: var(--rmm-btn-success-text);
}

.rmm-btn-success:hover:not(:disabled) {
  background: var(--rmm-btn-success-hover);
}

.rmm-btn-warning {
  background: var(--rmm-btn-warning-bg);
  color: var(--rmm-btn-warning-text);
}

.rmm-btn-warning:hover:not(:disabled) {
  background: var(--rmm-btn-warning-hover);
}

.rmm-btn-loading {
  position: relative;
  color: transparent !important;
}

.rmm-btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rmm-spin 0.6s linear infinite;
}

@keyframes rmm-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Resize Handles
   ============================================ */
.rmm-resize-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rmm-resize-handle {
  position: absolute;
  pointer-events: auto;
}

.rmm-resize-handle:hover {
  background: var(--rmm-resize-handle-hover);
}

/* Edge handles */
.rmm-resize-handle-n {
  top: 0;
  left: var(--rmm-resize-handle-size);
  right: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: ns-resize;
}

.rmm-resize-handle-s {
  bottom: 0;
  left: var(--rmm-resize-handle-size);
  right: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: ns-resize;
}

.rmm-resize-handle-e {
  right: 0;
  top: var(--rmm-resize-handle-size);
  bottom: var(--rmm-resize-handle-size);
  width: var(--rmm-resize-handle-size);
  cursor: ew-resize;
}

.rmm-resize-handle-w {
  left: 0;
  top: var(--rmm-resize-handle-size);
  bottom: var(--rmm-resize-handle-size);
  width: var(--rmm-resize-handle-size);
  cursor: ew-resize;
}

/* Corner handles */
.rmm-resize-handle-ne {
  top: 0;
  right: 0;
  width: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: nesw-resize;
}

.rmm-resize-handle-nw {
  top: 0;
  left: 0;
  width: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: nwse-resize;
}

.rmm-resize-handle-se {
  bottom: 0;
  right: 0;
  width: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: nwse-resize;
}

.rmm-resize-handle-sw {
  bottom: 0;
  left: 0;
  width: var(--rmm-resize-handle-size);
  height: var(--rmm-resize-handle-size);
  cursor: nesw-resize;
}

/* ============================================
   Taskbar
   ============================================ */
.rmm-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--rmm-taskbar-height);
  background: var(--rmm-taskbar-bg);
  z-index: var(--rmm-z-taskbar);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  transform: translateY(100%);
  transition: transform var(--rmm-animation-duration) var(--rmm-animation-timing);
}

.rmm-taskbar.rmm-taskbar-visible {
  transform: translateY(0);
}

.rmm-taskbar-items {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
}

.rmm-taskbar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--rmm-taskbar-item-bg);
  border-radius: 6px;
  color: var(--rmm-taskbar-item-text);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s;
  user-select: none;
}

.rmm-taskbar-item:hover {
  background: var(--rmm-taskbar-item-hover);
}

.rmm-taskbar-item-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.rmm-taskbar-item-disabled .rmm-taskbar-item-close {
  pointer-events: auto;
  opacity: 0.7;
}

.rmm-taskbar-item-disabled .rmm-taskbar-item-close:hover {
  opacity: 1;
}

.rmm-taskbar-item-index {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
  flex-shrink: 0;
}

.rmm-taskbar-item-title {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmm-taskbar-badge {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--rmm-btn-primary-bg);
  color: var(--rmm-btn-primary-text);
  border-radius: 8px;
}

.rmm-taskbar-item-restore,
.rmm-taskbar-item-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--rmm-taskbar-item-text);
  opacity: 0.7;
  transition: opacity 0.15s, background-color 0.15s;
}

.rmm-taskbar-item-restore:hover,
.rmm-taskbar-item-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.rmm-taskbar-item-close:hover {
  background: rgba(239, 68, 68, 0.3);
}

.rmm-taskbar-item-restore svg,
.rmm-taskbar-item-close svg {
  width: 14px;
  height: 14px;
}

/* Taskbar - Close All Button */
.rmm-taskbar-close-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 6px;
  cursor: pointer;
  color: #ef4444;
  opacity: 0.9;
  transition: opacity 0.15s, background-color 0.15s;
  flex-shrink: 0;
  margin-right: 4px;
}

.rmm-taskbar-close-all:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.4);
}

.rmm-taskbar-close-all svg {
  width: 16px;
  height: 16px;
}

/* Taskbar - Shortcut Badge */
.rmm-taskbar-shortcut {
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  font-family: monospace;
}

.rmm-taskbar-item:hover .rmm-taskbar-shortcut {
  background: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.rmm-taskbar-item-disabled .rmm-taskbar-shortcut {
  opacity: 0.5;
}

/* Taskbar - Drag Handle */
.rmm-taskbar-item-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  cursor: grab;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.rmm-taskbar-item-drag-handle:active {
  cursor: grabbing;
}

.rmm-taskbar-item:hover .rmm-taskbar-item-drag-handle {
  opacity: 0.8;
}

.rmm-taskbar-item-drag-handle svg {
  width: 12px;
  height: 12px;
}

/* Taskbar - Dragging States */
.rmm-taskbar-item-dragging {
  opacity: 0.8;
}

.rmm-taskbar-item-dragging-active {
  opacity: 0.4;
}

/* Taskbar - Drop Indicators */
.rmm-taskbar-item-drop-before {
  position: relative;
}

.rmm-taskbar-item-drop-before::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--rmm-btn-primary-bg, #3b82f6);
  border-radius: 2px;
}

.rmm-taskbar-item-drop-after {
  position: relative;
}

.rmm-taskbar-item-drop-after::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--rmm-btn-primary-bg, #3b82f6);
  border-radius: 2px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .rmm-modal {
    width: calc(100% - 40px) !important;
    min-width: auto !important;
    max-width: none !important;
    left: 20px !important;
    right: 20px !important;
    transform: none !important;
  }

  .rmm-modal.rmm-position-center {
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 40px) !important;
    min-width: auto !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    max-height: calc(100% - 40px);
  }

  .rmm-modal.rmm-position-center.rmm-active {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .rmm-modal.rmm-size-full {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    max-height: 100%;
    border-radius: 0;
  }

  .rmm-header {
    cursor: default !important;
  }

  .rmm-resize-handles {
    display: none;
  }
}

/* ============================================
   Drag Handle
   ============================================ */
.rmm-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--rmm-header-text);
  opacity: 0.55;
  flex-shrink: 0;
  cursor: grab;
  transition: opacity 0.15s, background-color 0.15s;
}

.rmm-header.rmm-draggable .rmm-drag-handle:hover {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.12);
}

.rmm-drag-handle svg {
  width: 14px;
  height: 14px;
}

/* Hide drag handle and default size button on mobile */
@media (max-width: 768px) {
  .rmm-drag-handle {
    display: none;
  }

  .rmm-default-size-btn {
    display: none;
  }
}

/* ============================================
   Utilities
   ============================================ */
.rmm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Content Loading Overlay
   ============================================ */
.rmm-content-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.dark .rmm-content-loader {
  background: rgba(30, 41, 59, 0.7);
}

.rmm-content-loader.rmm-active {
  opacity: 1;
  visibility: visible;
}

/* Loading indicator wrapper */
.rmm-content-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Spinner sizes */
.rmm-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.rmm-spinner-md {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.rmm-spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Loading text */
.rmm-content-loader-text {
  font-size: 14px;
  color: var(--rmm-submenu-item-text);
}

/* Container with loading state (relative positioning for overlay) */
.rmm-loading-container {
  position: relative;
  min-height: 100px;
}

/* Fade effect for content during loading */
.rmm-loading-container.rmm-loading > *:not(.rmm-content-loader) {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* ============================================
   PC Size Fixes (min-width: 769px)
   - 중간 크기 브라우저에서도 min-width 적용
   - :not(.rmm-dragging):not(.rmm-custom-position)으로 드래그 중/후 제외
   ============================================ */
@media (min-width: 769px) {
  /* MD: 769px ~ 960px 범위에서도 min-width 적용 */
  .rmm-modal.rmm-size-md:not(.rmm-dragging):not(.rmm-custom-position) {
    width: 50% !important;
    min-width: min(960px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    left: 50% !important;
    right: auto !important;
  }
  .rmm-modal.rmm-size-md.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) !important;
  }
  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* LG: 769px ~ 1152px 범위에서도 min-width 적용 */
  .rmm-modal.rmm-size-lg:not(.rmm-dragging):not(.rmm-custom-position) {
    width: 60% !important;
    min-width: min(1152px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    left: 50% !important;
    right: auto !important;
  }
  .rmm-modal.rmm-size-lg.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) !important;
  }
  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* XL: 769px ~ 1344px 범위에서도 min-width 적용 */
  .rmm-modal.rmm-size-xl:not(.rmm-dragging):not(.rmm-custom-position) {
    width: 70% !important;
    min-width: min(1344px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    left: 50% !important;
    right: auto !important;
  }
  .rmm-modal.rmm-size-xl.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) !important;
  }
  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position) {
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* ============================================
   v1.0.48 — Modernization port (from rails-modal-manager2)
   ============================================
   외부 API/클래스명/옵션은 전혀 바꾸지 않음. 아래 규칙들은 기존 규칙 뒤에
   추가되어 시각적 품질만 끌어올림. 문제 발생 시 이 블록만 제거하면 완전 원복.
*/

/* 포커스 링: 키보드 탐색 시에만 나타남 (마우스 클릭 시 노출 안 함) */
.rmm-modal :focus-visible,
.rmm-overlay :focus-visible,
.rmm-taskbar :focus-visible {
  outline: none;
  box-shadow: var(--rmm-ring);
  border-radius: 6px;
}

/* 드래그 중 "들림" 효과 — JS가 이미 .rmm-dragging 클래스를 세팅함 */
.rmm-modal.rmm-dragging {
  box-shadow: var(--rmm-elev-drag);
  transition: box-shadow var(--rmm-dur-fast) var(--rmm-ease-standard);
}

/* Depth 4, 5 자동 확장 — 기존 0~3 팔레트를 바탕으로 더 어둡게 섞어 생성
   (color-mix 미지원 구형 브라우저는 depth-3 값으로 폴백) */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --rmm-header-bg-depth-4: color-mix(in srgb, var(--rmm-header-bg-depth-3) 80%, #000 20%);
    --rmm-header-text-depth-4: var(--rmm-header-text-depth-3);
    --rmm-header-bg-depth-5: color-mix(in srgb, var(--rmm-header-bg-depth-3) 60%, #000 40%);
    --rmm-header-text-depth-5: var(--rmm-header-text-depth-3);
  }
  .dark {
    --rmm-header-bg-depth-4: color-mix(in srgb, var(--rmm-header-bg-depth-3) 80%, #000 20%);
    --rmm-header-bg-depth-5: color-mix(in srgb, var(--rmm-header-bg-depth-3) 60%, #000 40%);
  }
}

/* prefers-reduced-motion: 사용자가 OS 설정으로 모션 축소를 요청한 경우
   모든 트랜지션/애니메이션을 거의 즉시 끝내 접근성 향상 */
@media (prefers-reduced-motion: reduce) {
  .rmm-overlay,
  .rmm-modal,
  .rmm-modal *,
  .rmm-taskbar,
  .rmm-sidebar,
  .rmm-submenu,
  .rmm-content-loader {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================
   v1.0.48 — 애니메이션 고도화 (v2 이식)
   ============================================
   v1 의 기존 트랜지션 규칙 자체는 남아 있고, 여기서 **뒤에 오는 규칙으로**
   duration/easing 만 재정의. 비대칭 이징 적용:
     · 닫힘(기본 상태) : fast(140ms) + ease-in  → 빠르고 깔끔하게 사라짐
     · 열림(.rmm-active): base(220ms) + ease-emphasized → 부드럽게 나타남
     · 최소화            : slow(360ms) + ease-emphasized → taskbar 로 천천히 흡수
   CSS cascade 순서 덕분에 별도 position 분기 오버라이드 없이도 적용됨.
*/
/* Overlay: 열림도 닫힘도 base(220ms) + ease-out — v2 방식.
   **의도적으로 modal(fast exit) 보다 느리게** 사라지게 해서 배경 잔상이
   남아 "잔향" 느낌. 또 기본 blur 를 8px + saturate 로 상향해 배경과의
   대비를 강화 (v2 overlay 와 동급). */
.rmm-overlay {
  backdrop-filter: blur(1.5px) saturate(1.1);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.1);
  transition: opacity    var(--rmm-dur-base) var(--rmm-ease-out),
              visibility var(--rmm-dur-base) var(--rmm-ease-out);
}
/* 기존 .rmm-overlay-blur 는 더 강하게 — 중첩 모달 분리감 */
.rmm-overlay.rmm-overlay-blur {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ⚠️ 중요: CSS Transforms L2 스펙상 개별 `scale`/`translate` 는 `transform`
   함수보다 **나중에 적용**됨. position-center 는 transform: translate(-50%,-50%)
   로 중앙 정렬하는데, 이 상태에서 scale 개별 프로퍼티를 더하면 -50% 계산이
   원본 박스 기준으로 유지되어 **열림/닫힘 시 우하단으로 쏠리는 현상** 발생.
   → scale/translate 개별 프로퍼티를 쓰지 않고, 각 position 의 transform 체인
     **내부**에 scale()/translateY() 를 포함시켜 중심점 일치 보장.
     아래는 position 별 오버라이드. */
.rmm-modal {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
              visibility var(--rmm-dur-fast) var(--rmm-ease-in),
              transform  var(--rmm-dur-fast) var(--rmm-ease-in),
              box-shadow var(--rmm-dur-base) var(--rmm-ease-out);
}
.rmm-modal.rmm-active {
  transition-duration: var(--rmm-dur-base);
  transition-timing-function: var(--rmm-ease-emphasized);
}

/* Position-aware transform — scale/translateY 를 transform 체인 **내부**에
   포함시켜 중심점 쏠림 방지. :not() 필터로 드래그/커스텀위치/최소화/size-full 제외.
   size-full 은 transform: none !important 를 유지하고 엔트리는 `translate` 개별
   프로퍼티(sheet 모션)가 담당. */
.rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translate(-50%, -50%) scale(0.94) translateY(14px);
}
.rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translate(-50%, -50%) scale(1) translateY(0);
}

.rmm-modal.rmm-position-top:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translateX(-50%) scale(0.94) translateY(-14px);
}
.rmm-modal.rmm-position-top.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translateX(-50%) scale(1) translateY(0);
}

.rmm-modal.rmm-position-bottom:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translateX(-50%) scale(0.94) translateY(14px);
}
.rmm-modal.rmm-position-bottom.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: translateX(-50%) scale(1) translateY(0);
}

.rmm-modal.rmm-position-top-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-top-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-bottom-left:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-bottom-right:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: scale(0.94) translateY(14px);
}
.rmm-modal.rmm-position-top-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-top-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-bottom-left.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full),
.rmm-modal.rmm-position-bottom-right.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized):not(.rmm-size-full) {
  transform: scale(1) translateY(0);
}

/* PC size fixes (@media min-width: 769px) 가 position-center 에 !important 로
   transform 을 덮어써 있음 → 같은 specificity + !important 로 재오버라이드 */
@media (min-width: 769px) {
  .rmm-modal.rmm-size-md.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
  .rmm-modal.rmm-size-lg.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
  .rmm-modal.rmm-size-xl.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
    transform: translate(-50%, -50%) scale(0.94) translateY(14px) !important;
  }
  .rmm-modal.rmm-size-md.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
  .rmm-modal.rmm-size-lg.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized),
  .rmm-modal.rmm-size-xl.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
    transform: translate(-50%, -50%) scale(1) translateY(0) !important;
  }
}

/* 모바일(≤768px)도 기존 CSS 가 position-center 에 !important 걸고 있음 */
@media (max-width: 768px) {
  .rmm-modal.rmm-position-center:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
    transform: translate(-50%, -50%) scale(0.94) translateY(14px) !important;
  }
  .rmm-modal.rmm-position-center.rmm-active:not(.rmm-dragging):not(.rmm-custom-position):not(.rmm-minimized) {
    transform: translate(-50%, -50%) scale(1) translateY(0) !important;
  }
}

/* 최소화: 기존 transform: scale(0.2) !important 그대로 사용. 이번엔 개별
   scale/translate 프로퍼티를 안 쓰므로 따로 초기화할 것 없음. transition 만 재정의. */
.rmm-modal.rmm-minimized {
  transition: opacity    var(--rmm-dur-slow) var(--rmm-ease-emphasized),
              visibility var(--rmm-dur-slow) var(--rmm-ease-emphasized),
              transform  var(--rmm-dur-slow) var(--rmm-ease-emphasized) !important;
}
.rmm-overlay.rmm-minimized {
  transition: opacity    var(--rmm-dur-slow) var(--rmm-ease-emphasized),
              visibility var(--rmm-dur-slow) var(--rmm-ease-emphasized) !important;
}

/* ============================================
   v1.0.48 — 모바일(≤768px) 헤더 컨트롤 정리
   ============================================
   터치 환경에서는 최소화 / 크기조절(최대화) / 기본크기 복원 버튼이 조작 실수를
   유발하고 공간만 차지하므로 **resizable/minimizable 옵션과 무관하게** 숨김.
   사이드바 토글, 커스텀 헤더 버튼, 닫기 버튼은 그대로 유지.
   기존 line 1627 의 `.rmm-default-size-btn { display: none }` 규칙과 같은
   breakpoint(768px)를 사용해 일관성 확보 + !important 로 확실히 덮어씀.
*/
@media (max-width: 768px) {
  .rmm-header .rmm-minimize-btn,
  .rmm-header .rmm-maximize-btn,
  .rmm-header .rmm-default-size-btn {
    display: none !important;
  }
  /* 구버전 ERB 폴백: 클래스 없는 최소화 버튼이 렌더되는 경우 */
  .rmm-header .rmm-header-btn[data-action*="#minimize"],
  .rmm-header .rmm-header-btn[data-action*="#maximize"],
  .rmm-header .rmm-header-btn[data-action*="#restoreDefaultSize"] {
    display: none !important;
  }
}

/* ============================================
   v1.0.48 — size=full 전환 플래시 제거 + 모바일 sheet 애니메이션
   ============================================
   문제: mobile_default_maximized: true 모달은 JS 가 열릴 때 size-md → size-full
         로 클래스를 바꿈. 이 순간 transition 이 걸려 있어서 top/left/transform 이
         `translate(-50%,-50%) scale(0.94) translateY(14px)` → `none` 으로 보간되면서
         **모달이 중앙에서 좌상단으로 스르륵 미끄러지는 현상** 발생.

   해결:
   (A) size-full 상태에서는 top/left/transform 의 transition 을 끊음.
       → 중앙→좌상단 슬라이드 차단. opacity 만 페이드.
   (B) 모바일 + size-full 은 v2 의 `:sheet` variant 처럼 바닥에서 살짝
       올라오는 모션으로 대체. translate 개별 프로퍼티를 써서 기존
       `transform: none !important` 와 충돌 없음.
*/

/* (A) size-full: 레이아웃 속성(top/left/transform) 전환 차단.
   opacity / box-shadow 만 전환되도록 transition 축소. */
.rmm-modal.rmm-size-full {
  transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
              visibility var(--rmm-dur-fast) var(--rmm-ease-in),
              box-shadow var(--rmm-dur-base) var(--rmm-ease-out) !important;
}
.rmm-modal.rmm-size-full.rmm-active {
  transition-duration: var(--rmm-dur-base) !important;
  transition-timing-function: var(--rmm-ease-emphasized) !important;
}

/* (B) 모바일(≤768px) + size-full: translate 개별 프로퍼티로 sheet 느낌 엔트리.
       transform: none !important 는 그대로 두고 translate 만 보간. */
@media (max-width: 768px) {
  .rmm-modal.rmm-size-full {
    translate: 0 24px;
    transition: opacity    var(--rmm-dur-fast) var(--rmm-ease-in),
                visibility var(--rmm-dur-fast) var(--rmm-ease-in),
                translate  var(--rmm-dur-fast) var(--rmm-ease-in),
                box-shadow var(--rmm-dur-base) var(--rmm-ease-out) !important;
  }
  .rmm-modal.rmm-size-full.rmm-active {
    translate: 0 0;
    transition-duration: var(--rmm-dur-base) !important;
    transition-timing-function: var(--rmm-ease-emphasized) !important;
  }
  /* 최소화/드래그 상태는 translate 개별 프로퍼티 초기화 (기존 로직 간섭 방지) */
  .rmm-modal.rmm-size-full.rmm-minimized,
  .rmm-modal.rmm-size-full.rmm-dragging {
    translate: 0 0;
  }

  /* (C) v1.0.50: 모바일+full 모달 여백은 JS inline !important 가 직접 담당 (rmm_modal_controller.js).
         CSS !important 규칙들(라인 1569/1574/1577)과의 specificity 싸움을 피하기 위해 CSS 규칙은 두지 않음.
         overflow:hidden 이 모달 본체에 이미 있어 내부 사이드바(absolute)도 둥근 모서리에 맞게 클리핑됨. */

  /* (D) v1.0.50: 모바일에서는 모달 라운드 제거 (size 무관). PC 에서는 기본 radius 유지. */
  .rmm-modal {
    border-radius: 0 !important;
  }
}

/* ============================================
   v1.0.50 — 모달 외곽선 제거 + 폰트 선명도
   ============================================
   v2 처럼 깔끔한 edge (box-shadow 만으로 구분).
   + 한글 전용 폰트 stack 을 `.rmm-modal` 에 명시해 host 앱 (ORDARS 포함)이
     별도 폰트 지정을 안 해도 모달 내부는 한글이 선명하게 렌더되도록. */
.rmm-modal {
  border: 0 !important;
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Pretendard",
    "Noto Sans KR",
    "Malgun Gothic",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.rmm-overlay,
.rmm-taskbar {
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Pretendard",
    "Noto Sans KR",
    "Malgun Gothic",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   v1.0.50 — 탭별 푸터 전환 애니메이션
   ============================================
   submenu selectItem 시 setModalFooter() 가 .rmm-footer-left / -right 의
   innerHTML 을 교체. 교체 순간 미세한 fade 트랜지션을 주어 "딸깍" 느낌 제거. */
.rmm-footer-left,
.rmm-footer-right {
  transition: opacity var(--rmm-dur-fast) var(--rmm-ease-out);
}

/* ============================================
   v1.0.50 — 모바일 사이드바 단순화 (v2 스타일 peek)
   ============================================
   모바일+최대화 상태에서의 사이드바:
   - 기본 hidden(완전 숨김). 토글 버튼으로 expanded drawer 오픈 (2상태).
   - 모달 오픈 시 1회 peek 애니메이션: 얇은 drawer(아이콘만 표시)가 좌측에서
     0 → 100% → 100% → -100% 로 슬라이드해 "사이드바가 여기 있다" 라는 힌트만 줌.
   - 이전의 'icons'(64px inline) 단계는 제거. 관련 CSS(.rmm-sidebar-collapsed)는
     PC 의 접힘 기능용으로 유지되므로 삭제하지 않음.
*/
@keyframes rmm-sidebar-peek {
  0%   { transform: translateX(-100%); }
  30%  { transform: translateX(0); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 768px) {
  /* ── peek 중인 사이드바: 얇은 폭(아이콘 너비) + 오버레이 + 1회 animation ──
     v1.0.50 개선: size-full 조건 제거. 모바일 + 사이드바 있는 모든 모달에 작동. */
  .rmm-modal .rmm-sidebar[data-peek="true"] {
    position: absolute !important;
    top: var(--rmm-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 11 !important;
    width: var(--rmm-sidebar-collapsed-width) !important;
    min-width: var(--rmm-sidebar-collapsed-width) !important;
    padding: 8px 6px !important;
    pointer-events: none; /* peek 중엔 클릭 불가 — 단순 힌트 */
    box-shadow: var(--rmm-elev-drag);
    animation: rmm-sidebar-peek 1000ms var(--rmm-ease-out) forwards;
    transition: none !important; /* animation 과 transition 충돌 방지 */
  }
  .rmm-modal .rmm-sidebar[data-peek="true"] .rmm-sidebar-item-label,
  .rmm-modal .rmm-sidebar[data-peek="true"] .rmm-sidebar-item-badge {
    display: none;
  }
  .rmm-modal .rmm-sidebar[data-peek="true"] .rmm-sidebar-item {
    justify-content: center;
    padding: 10px 8px;
  }

  /* ── 모바일+full 사이드바 일반 상태: transform translateX 기반 drawer + 부드러운 transition ──
     기존 width:0 / width:64px 스냅 방식(__라인 906~945__)을 덮어써 전환을 부드럽게 만든다.
     peek 중에는 이 규칙이 비활성(:not([data-peek="true"])). */
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) {
    position: absolute !important;
    top: var(--rmm-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: var(--rmm-sidebar-width) !important;
    min-width: var(--rmm-sidebar-width) !important;
    padding: 8px 6px !important;
    overflow-y: auto;
    border-right: 1px solid var(--rmm-sidebar-border) !important;
    transform: translateX(-100%);
    transition: transform var(--rmm-dur-base) var(--rmm-ease-emphasized),
                box-shadow var(--rmm-dur-base) var(--rmm-ease-out);
    box-shadow: none;
  }
  /* expanded = hidden 도 collapsed 도 없을 때 → drawer 펼침 */
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]):not(.rmm-sidebar-hidden):not(.rmm-sidebar-collapsed) {
    transform: translateX(0);
    box-shadow: var(--rmm-elev-drag);
  }
  /* hidden 과 legacy collapsed 모두 동일하게 숨김 (v1.0.50 에선 icons 단계 제거됨) */
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-hidden,
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-collapsed {
    transform: translateX(-100%) !important;
    box-shadow: none !important;
  }
  /* expanded 일 때 라벨/배지 확실히 표시 (peek 스타일이 섞여 있을 수 있으므로 복원) */
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item-label,
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item-badge {
    display: inline-block;
  }
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]) .rmm-sidebar-item {
    justify-content: flex-start;
  }

  /* 오버레이: expanded 일 때 표시, 나머진 숨김 (transform 전환과 동기) */
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]):not(.rmm-sidebar-hidden):not(.rmm-sidebar-collapsed) ~ .rmm-sidebar-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-hidden ~ .rmm-sidebar-overlay,
  .rmm-modal.rmm-size-full .rmm-sidebar:not([data-peek="true"]).rmm-sidebar-collapsed ~ .rmm-sidebar-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}