rails_modal_manager 1.0.56 → 1.0.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcef6ca1f8ba2ff2081d6b141e3b2acc4be49dc2b84098970ab749f32c8a6a42
-  data.tar.gz: d63d261103869e8e4a78069eb7c8aa6105362c840543064c9a20c529b5d3425c
+  metadata.gz: 91f46719ac2c4bf2aa6b8b33d883b85ee97f8dbc3490c7162441855ff6701e42
+  data.tar.gz: 881b2327c4fa56fa3fa4199655d26b3bb360b8e79ebdab4efec31db5d3368188
 SHA512:
-  metadata.gz: 16fa3e3f92afef8e0c15daac0d2c6680ff60a5e71b46b504c51c9c29b65fc875b9295c4741f363e12d791b79683b378877288469d3e0552b8f0d4e628b770dac
-  data.tar.gz: 765436e26b23756f2be9234422430c93e8c842b96c2d655afe93140856e4cb5edf1b4ccf0a955ae0dddcba44fb063f69e158167cd0385dcea29ff9061d99929b
+  metadata.gz: 97bfd7a727035f23b11cc926911f1fb0465a9df3b48e0cec2cf73b69c06983d9b0fbf329732c10eec541ade3c5943f209cd2e30ddb79dd3aa38816a8ea6be503
+  data.tar.gz: 2f7b805a605d217f0af8a4ef98745b3f2204baed44ee6aa15ab839c703afcd025b73363b6dfe83072b09d06cc93f3396e6298f87f50750b6d7bfbde45e3c940e

data/app/assets/stylesheets/rails_modal_manager.css

@@ -30,7 +30,9 @@
 
   /* Modal */
   --rmm-modal-bg: #ffffff;
-  --rmm-modal-border: rgba(0, 0, 0, 0.1);
+  /* 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;
 
@@ -38,47 +40,56 @@
   --rmm-overlay-bg: rgba(0, 0, 0, 0.5);
   --rmm-overlay-blur: 0px;
 
-  /* Header */
-  --rmm-header-bg: #f8fafc;
-  --rmm-header-border: rgba(0, 0, 0, 0.1);
-  --rmm-header-text: #1e293b;
-  --rmm-header-height: 56px;
+  /* 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 (Parent/Child/Grandchild) */
-  --rmm-header-bg-depth-0: #3b82f6;
+  /* Header - Depth Colors (자식·손자 모달은 살짝 밝아지는 계단) */
+  --rmm-header-bg-depth-0: #3e6187;
   --rmm-header-text-depth-0: #ffffff;
-  --rmm-header-bg-depth-1: #0ea5e9;
+  --rmm-header-bg-depth-1: #4b7099;
   --rmm-header-text-depth-1: #ffffff;
-  --rmm-header-bg-depth-2: #06b6d4;
+  --rmm-header-bg-depth-2: #587fab;
   --rmm-header-text-depth-2: #ffffff;
-  --rmm-header-bg-depth-3: #64748B;
+  --rmm-header-bg-depth-3: #6590bd;
   --rmm-header-text-depth-3: #ffffff;
 
-  /* Footer */
+  /* Footer — v1.0.57 정제: 본문과 분리감 + 살짝 톤다운된 신뢰감 있는 베이스 */
   --rmm-footer-bg: #f8fafc;
-  --rmm-footer-border: rgba(0, 0, 0, 0.1);
-  --rmm-footer-text: #334155;
-  --rmm-footer-height: 64px;
-
-  /* Sidebar */
-  --rmm-sidebar-bg: #f1f5f9;
-  --rmm-sidebar-border: rgba(0, 0, 0, 0.1);
+  --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: #334155;
-  --rmm-sidebar-icon: #64748b;
-  --rmm-sidebar-item-hover: rgba(0, 0, 0, 0.05);
-  --rmm-sidebar-item-active-bg: rgba(59, 130, 246, 0.1);
-  --rmm-sidebar-item-active-text: #3b82f6;
-
-  /* Submenu */
-  --rmm-submenu-bg: #f1f5f9;
-  --rmm-submenu-container-bg: #ffffff;
-  --rmm-submenu-height: 56px;
-  --rmm-submenu-item-text: #64748b;
-  --rmm-submenu-item-hover-bg: rgba(0, 0, 0, 0.04);
-  --rmm-submenu-item-active-bg: #3b82f6;
+  --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;
@@ -122,9 +133,11 @@
   --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-modal: 2001;
   --rmm-z-taskbar: 2100;
+  --rmm-z-modal: 2200;
 }
 
 /* ============================================
@@ -132,42 +145,49 @@
    ============================================ */
 .dark {
   --rmm-modal-bg: #1e293b;
-  --rmm-modal-border: rgba(255, 255, 255, 0.1);
+  --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);
 
-  --rmm-header-bg: #0f172a;
-  --rmm-header-border: rgba(255, 255, 255, 0.1);
+  /* v1.0.57 — 라이트와 동일 원칙 유지, 한 단계 더 어두운 톤 */
+  --rmm-header-bg: #0b1220;
+  --rmm-header-border: rgba(255, 255, 255, 0.08);
   --rmm-header-text: #f1f5f9;
-
-  /* Header - Depth Colors (Dark Theme) */
-  --rmm-header-bg-depth-0: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);
-  --rmm-header-text-depth-0: #ffffff;
-  --rmm-header-bg-depth-1: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
-  --rmm-header-text-depth-1: #ffffff;
-  --rmm-header-bg-depth-2: linear-gradient(135deg, #c0392b 0%, #d68910 100%);
-  --rmm-header-text-depth-2: #ffffff;
-  --rmm-header-bg-depth-3: linear-gradient(135deg, #a0185e 0%, #c0392b 100%);
-  --rmm-header-text-depth-3: #ffffff;
+  --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.1);
-  --rmm-footer-text: #e2e8f0;
+  --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: #0f172a;
-  --rmm-sidebar-border: rgba(255, 255, 255, 0.1);
-  --rmm-sidebar-text: #e2e8f0;
+  --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: rgba(59, 130, 246, 0.2);
+  --rmm-sidebar-item-active-bg: #1e293b;
+  --rmm-sidebar-item-active-text: #f8fafc;
+  --rmm-sidebar-item-active-icon: #f8fafc;
 
-  --rmm-submenu-bg: #1e293b;
-  --rmm-submenu-container-bg: #0f172a;
+  --rmm-submenu-bg: #0b1220;
+  --rmm-submenu-container-bg: #0b1220;
   --rmm-submenu-item-text: #94a3b8;
-  --rmm-submenu-item-hover-bg: rgba(255, 255, 255, 0.08);
-  --rmm-submenu-item-active-bg: #3b82f6;
-  --rmm-submenu-item-active-text: #ffffff;
+  --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;
@@ -230,9 +250,13 @@
   display: flex;
   flex-direction: column;
   background: var(--rmm-modal-bg);
-  border: 1px solid var(--rmm-modal-border);
+  /* 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;
@@ -251,6 +275,22 @@
   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;
@@ -360,6 +400,7 @@
    Modal Header
    ============================================ */
 .rmm-header {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -367,36 +408,110 @@
   height: var(--rmm-header-height);
   min-height: var(--rmm-header-height);
   background: var(--rmm-header-bg);
-  border-bottom: 1px solid var(--rmm-header-border);
+  /* 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: move;
+  cursor: default;
 }
 
 .rmm-header-left {
   display: flex;
   align-items: center;
-  gap: 12px;
-  flex: 1;
+  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 {
-  font-size: 16px;
+  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 {
@@ -416,7 +531,8 @@
 
 .rmm-header-btn:hover {
   opacity: 1;
-  background: var(--rmm-btn-ghost-hover);
+  /* 헤더 배경이 어두운 톤이므로 반투명 흰색 오버레이 사용 */
+  background: rgba(255, 255, 255, 0.12);
 }
 
 .rmm-header-btn.rmm-close-btn {
@@ -530,7 +646,8 @@
 /* Depth 0 - Parent Modal (Purple gradient) */
 .rmm-modal.rmm-depth-0 .rmm-header {
   background: var(--rmm-header-bg-depth-0);
-  border-bottom-color: rgba(255, 255, 255, 0.2);
+  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
+  border-bottom-color: var(--rmm-header-divider, transparent);
 }
 
 .rmm-modal.rmm-depth-0 .rmm-header-title {
@@ -557,7 +674,8 @@
 /* Depth 1 - Child Modal (Green gradient) */
 .rmm-modal.rmm-depth-1 .rmm-header {
   background: var(--rmm-header-bg-depth-1);
-  border-bottom-color: rgba(255, 255, 255, 0.2);
+  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
+  border-bottom-color: var(--rmm-header-divider, transparent);
 }
 
 .rmm-modal.rmm-depth-1 .rmm-header-title {
@@ -584,7 +702,8 @@
 /* Depth 2 - Grandchild Modal (Orange gradient) */
 .rmm-modal.rmm-depth-2 .rmm-header {
   background: var(--rmm-header-bg-depth-2);
-  border-bottom-color: rgba(255, 255, 255, 0.2);
+  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
+  border-bottom-color: var(--rmm-header-divider, transparent);
 }
 
 .rmm-modal.rmm-depth-2 .rmm-header-title {
@@ -613,7 +732,8 @@
 .rmm-modal.rmm-depth-4 .rmm-header,
 .rmm-modal.rmm-depth-5 .rmm-header {
   background: var(--rmm-header-bg-depth-3);
-  border-bottom-color: rgba(255, 255, 255, 0.2);
+  /* v1.0.57 — 헤더-서브메뉴 경계 하이라이트 라인 제거 (하드 라인 대신 색차로만 분리) */
+  border-bottom-color: var(--rmm-header-divider, transparent);
 }
 
 .rmm-modal.rmm-depth-3 .rmm-header-title,
@@ -764,7 +884,7 @@
 }
 
 /* ============================================
-   Modal Sidebar
+   Modal Sidebar (v1.0.57 다크 블루 톤 — 헤더/서브메뉴와 통합)
    ============================================ */
 .rmm-sidebar {
   width: var(--rmm-sidebar-width);
@@ -785,20 +905,39 @@
 
 .rmm-sidebar-nav {
   flex: 1;
-  padding: 8px;
+  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: 10px 12px;
-  border-radius: 8px;
+  padding: 9px 12px;
+  border-radius: 6px;
   cursor: pointer;
   color: var(--rmm-sidebar-text);
   text-decoration: none;
-  transition: background-color 0.15s;
+  transition: background-color 0.15s ease, color 0.15s ease;
   white-space: nowrap;
   /* Button reset for when using <button> */
   border: none;
@@ -809,13 +948,27 @@
   font-size: inherit;
 }
 
-.rmm-sidebar-item:hover {
+.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 {
@@ -826,18 +979,24 @@
   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-text);
+  color: var(--rmm-sidebar-item-active-icon, var(--rmm-sidebar-item-active-text));
 }
 
 .rmm-sidebar-item-label {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  letter-spacing: -0.01em;
 }
 
 .rmm-sidebar-collapsed .rmm-sidebar-item {
@@ -946,27 +1105,34 @@
 }
 
 /* ============================================
-   Modal Submenu (Pill/Tab Style)
+   Modal Submenu (v1.0.57 Dark Tab Style)
+   ---------------------------------------------
+   레퍼런스 1.png: 다크 배경 + 흰색 활성 탭 + 본문과 매끄럽게 이어짐.
+   비활성 탭은 어두운 배경 위 연한 회색 글자.
+   pill 호환은 .rmm-submenu-pill 클래스로 유지.
    ============================================ */
 .rmm-submenu {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: flex-start;
-  gap: 6px;
-  padding: 8px 12px;
+  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: center;
-  gap: 4px;
-  padding: 4px;
-  background: var(--rmm-submenu-bg);
-  border-radius: 8px;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .rmm-submenu::-webkit-scrollbar {
@@ -978,36 +1144,73 @@
 }
 
 .rmm-submenu::-webkit-scrollbar-thumb {
-  background: var(--rmm-modal-border);
+  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: 8px 16px;
-  font-size: 14px;
+  padding: 9px 18px;
+  font-size: 13px;
   font-weight: 500;
   color: var(--rmm-submenu-item-text);
   background: transparent;
   border: none;
-  border-radius: 6px;
+  border-radius: 6px 6px 0 0;
   cursor: pointer;
   white-space: nowrap;
-  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  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: var(--rmm-content-text);
+  color: #f8fafc;
 }
 
 .rmm-submenu-item.rmm-active {
   background: var(--rmm-submenu-item-active-bg);
   color: var(--rmm-submenu-item-active-text);
-  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
+  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 {
@@ -1108,28 +1311,37 @@
 }
 
 /* ============================================
-   Modal Footer
+   Modal Footer (v1.0.57 정제 — 본문과 레이어 분리 + 부드러운 highlight)
    ============================================ */
 .rmm-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 16px;
+  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: 14px;
+  font-size: 13px;
   color: var(--rmm-footer-text);
+  letter-spacing: -0.01em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1142,7 +1354,7 @@
 }
 
 /* ============================================
-   Buttons
+   Buttons (v1.0.57 정제 — 미세 lift · active 눌림 · focus 링)
    ============================================ */
 .rmm-btn {
   display: inline-flex;
@@ -1150,13 +1362,23 @@
   justify-content: center;
   gap: 6px;
   padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
   border: none;
-  border-radius: 8px;
+  border-radius: 7px;
   cursor: pointer;
-  transition: background-color 0.15s, opacity 0.15s;
   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 {
@@ -1167,19 +1389,23 @@
 .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 {
@@ -1601,16 +1827,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
   color: var(--rmm-header-text);
-  opacity: 0.4;
+  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.7;
+  opacity: 0.95;
+  background: rgba(255, 255, 255, 0.12);
 }
 
 .rmm-drag-handle svg {
@@ -1834,8 +2063,8 @@
    남아 "잔향" 느낌. 또 기본 blur 를 8px + saturate 로 상향해 배경과의
    대비를 강화 (v2 overlay 와 동급). */
 .rmm-overlay {
-  backdrop-filter: blur(8px) saturate(1.1);
-  -webkit-backdrop-filter: blur(8px) saturate(1.1);
+  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);
 }

data/app/javascript/rails_modal_manager/controllers/rmm_header_controller.js

@@ -17,26 +17,78 @@ export default class extends Controller {
     // Listen for sidebar toggled event to update icon
     this.handleSidebarToggled = this.handleSidebarToggled.bind(this)
     this.handleModalClosed = this.handleModalClosed.bind(this)
+    // v1.0.57 — 모바일 서브타이틀: 사이드바 메뉴 변경 이벤트 수신
+    this.handleSidebarItemSelect = this.handleSidebarItemSelect.bind(this)
 
     const modal = this.element.closest('.rmm-modal')
     if (modal) {
       modal.addEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
       modal.addEventListener('rmm:closed', this.handleModalClosed)
+      modal.addEventListener('rmm-sidebar:itemSelect', this.handleSidebarItemSelect)
     }
 
     // Title 더블클릭 이벤트 리스너 추가 및 원래 title 저장
     this.setupTitleEdit()
+    // 초기 sidebar 활성 항목 이름을 서브타이틀에 세팅
+    this.initSectionFromActiveSidebarItem()
   }
 
-  setupTitleEdit() {
+  // 제목 텍스트를 담고 있는 노드. 하위 구조(<span.rmm-header-title-text>)가 있으면 그것을, 없으면 h2 자체를 반환
+  _getTitleTextNode() {
     const titleEl = this.element.querySelector('.rmm-header-title')
-    if (titleEl) {
-      // 원래 title 저장 (모달 닫힐 때 복원용)
-      this.originalTitle = titleEl.textContent.trim()
+    if (!titleEl) return null
+    return titleEl.querySelector('.rmm-header-title-text') || titleEl
+  }
 
-      titleEl.addEventListener('dblclick', (e) => this.editTitle(e))
-      titleEl.style.cursor = 'default'
+  setupTitleEdit() {
+    const titleEl = this.element.querySelector('.rmm-header-title')
+    const textEl = this._getTitleTextNode()
+    if (!titleEl || !textEl) return
+
+    // 원래 title 저장 (모달 닫힐 때 복원용)
+    this.originalTitle = textEl.textContent.trim()
+
+    // v1.0.57 — 모달이 "최소화 가능" 한 경우에만 타이틀 더블클릭 편집 활성화.
+    // 최소화 버튼 존재로 minimizable 여부를 판별 — data-action 에 minimize 가 있는 버튼 탐색
+    // (gem 내부 파티알은 .rmm-minimize-btn 클래스도 가지지만, 수동 HTML 은 클래스 없이 data-action 만 쓸 수도 있음).
+    // 부모 .rmm-header-title 는 드래그를 방해하지 않도록 pointer-events:none 유지하고,
+    // 편집 가능한 text span 만 선택적으로 pointer-events:auto 로 복원.
+    const isMinimizable = !!this.element.querySelector('.rmm-minimize-btn, [data-action*="rmm-header#minimize"]')
+    if (!isMinimizable) {
+      textEl.style.cursor = 'default'
+      return
     }
+
+    textEl.style.cursor = 'text'
+    textEl.style.pointerEvents = 'auto'
+    textEl.title = '더블클릭하여 제목 편집'
+    // span 에서 시작한 mousedown 이 헤더 드래그 로직과 충돌하지 않도록 bubble up 은 허용하되
+    // dblclick 만 편집 트리거로 사용
+    textEl.addEventListener('dblclick', (e) => this.editTitle(e))
+  }
+
+  // 모바일 서브타이틀 초기값 — sidebar 의 .rmm-active 항목 label 을 읽어 반영
+  initSectionFromActiveSidebarItem() {
+    const modal = this.element.closest('.rmm-modal')
+    if (!modal) return
+    const sidebar = modal.querySelector('.rmm-sidebar')
+    if (!sidebar) return
+    const active = sidebar.querySelector('.rmm-sidebar-item.rmm-active')
+    if (!active) return
+    const label = active.dataset.itemLabel || active.querySelector('.rmm-sidebar-item-label')?.textContent?.trim() || ''
+    this._setSectionText(label)
+  }
+
+  handleSidebarItemSelect(e) {
+    const detail = e.detail || {}
+    const label = detail.itemLabel || ''
+    this._setSectionText(label)
+  }
+
+  _setSectionText(text) {
+    const sectionEl = this.element.querySelector('.rmm-header-section')
+    if (!sectionEl) return
+    sectionEl.textContent = text || ''
   }
 
   disconnect() {
@@ -44,6 +96,7 @@ export default class extends Controller {
     if (modal) {
       modal.removeEventListener('rmm-sidebar:toggled', this.handleSidebarToggled)
       modal.removeEventListener('rmm:closed', this.handleModalClosed)
+      modal.removeEventListener('rmm-sidebar:itemSelect', this.handleSidebarItemSelect)
     }
   }
 
@@ -55,9 +108,9 @@ export default class extends Controller {
   resetTitle() {
     if (!this.originalTitle) return
 
-    const titleEl = this.element.querySelector('.rmm-header-title')
-    if (titleEl) {
-      titleEl.textContent = this.originalTitle
+    const textEl = this._getTitleTextNode()
+    if (textEl) {
+      textEl.textContent = this.originalTitle
     }
   }
 
@@ -85,13 +138,17 @@ export default class extends Controller {
   }
 
   handleMouseDown(e) {
-    // Only start drag from title bar area, not buttons
+    if (!this.draggableValue) return
+
+    // v1.0.57 — 드래그는 반드시 `.rmm-drag-handle` 에서 시작된 경우에만 동작.
+    // 헤더 다른 영역(타이틀/빈 공간/버튼)에서의 mousedown 으로는 드래그가 시작되지 않음.
+    if (!e.target.closest('.rmm-drag-handle')) return
+
+    // 드래그핸들 위에서라도 내부 버튼이 있다면 제외 (안전장치)
     if (e.target.closest('button') || e.target.closest('.rmm-header-controls')) {
       return
     }
 
-    if (!this.draggableValue) return
-
     const controller = this.getModalController()
     if (controller) {
       controller.startDrag(e)
@@ -99,6 +156,8 @@ export default class extends Controller {
   }
 
   handleTouchStart(e) {
+    // v1.0.57 — 터치 드래그도 드래그핸들에서만 시작
+    if (!e.target.closest('.rmm-drag-handle')) return
     if (e.target.closest('button') || e.target.closest('.rmm-header-controls')) {
       return
     }
@@ -220,7 +279,10 @@ export default class extends Controller {
     // 이미 수정 중인 경우 무시
     if (titleEl.querySelector('input')) return
 
-    const currentTitle = titleEl.textContent.trim()
+    // v1.0.57 — 하위 구조(.rmm-header-title-text)가 있으면 그 span 만 대상으로
+    // 편집. 서브타이틀(.rmm-header-section) 은 건드리지 않음.
+    const textEl = titleEl.querySelector('.rmm-header-title-text') || titleEl
+    const currentTitle = textEl.textContent.trim()
 
     // input 생성
     const input = document.createElement('input')
@@ -242,9 +304,9 @@ export default class extends Controller {
       outline: none;
     `
 
-    // title 내용을 input으로 교체
-    titleEl.textContent = ''
-    titleEl.appendChild(input)
+    // 제목 텍스트 노드만 input으로 교체
+    textEl.textContent = ''
+    textEl.appendChild(input)
     input.focus()
     input.select()
 
@@ -254,7 +316,7 @@ export default class extends Controller {
       const finalTitle = newTitle || currentTitle
 
       // title 업데이트
-      titleEl.textContent = finalTitle
+      textEl.textContent = finalTitle
 
       // modalStore의 title도 업데이트
       if (newTitle && newTitle !== currentTitle) {
@@ -273,7 +335,7 @@ export default class extends Controller {
       } else if (ke.key === 'Escape') {
         ke.preventDefault()
         input.removeEventListener('blur', saveTitle)
-        titleEl.textContent = currentTitle
+        textEl.textContent = currentTitle
       }
     })
   }

data/app/javascript/rails_modal_manager/index.js

@@ -81,6 +81,77 @@ export function initGlobalClickHandler() {
   })
 }
 
+/**
+ * v1.0.57 — Global keyboard navigation for the top-most modal
+ *
+ *   Ctrl + ArrowUp / ArrowDown → cycle active sidebar items
+ *   Ctrl + ArrowLeft / ArrowRight → cycle active submenu tabs
+ *
+ * - Only the top-most open modal receives the shortcut.
+ * - Minimized modals are ignored.
+ * - When the focus is in an editable element (input / textarea / contenteditable),
+ *   the shortcut is skipped so normal text navigation still works.
+ * - Sidebar + submenu group combination: the submenu of the currently active group
+ *   is the navigation target.
+ */
+export function initGlobalKeyboardHandler() {
+  document.addEventListener('keydown', (e) => {
+    if (!e.ctrlKey) return
+    const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
+    if (!keys.includes(e.key)) return
+
+    // Skip when typing in editable elements
+    const target = e.target
+    if (target && target.matches && target.matches('input, textarea, [contenteditable="true"], [contenteditable=""]')) {
+      return
+    }
+
+    const order = modalStore.getModalOrder()
+    if (order.length === 0) return
+    const topModalId = order[order.length - 1]
+    const config = modalStore.getModalConfig(topModalId)
+    // Skip if top modal is minimized (and not restored)
+    if (config && config.isMinimized && !config.isRestored) return
+
+    const modal = document.getElementById(topModalId)
+    if (!modal) return
+
+    // 양 끝에서 멈춤 (wraparound 없음). 이미 끝/처음이면 null 반환 → 이동 안 함.
+    const step = (items, forward) => {
+      const activeIndex = items.findIndex(el => el.classList.contains('rmm-active'))
+      const len = items.length
+      if (len === 0) return null
+      const baseIndex = activeIndex === -1 ? 0 : activeIndex
+      const nextIndex = forward ? baseIndex + 1 : baseIndex - 1
+      if (nextIndex < 0 || nextIndex >= len) return null
+      return items[nextIndex]
+    }
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      const sidebar = modal.querySelector('.rmm-sidebar')
+      if (!sidebar) return
+      const items = Array.from(sidebar.querySelectorAll('.rmm-sidebar-item')).filter(el => !el.classList.contains('rmm-disabled'))
+      const next = step(items, e.key === 'ArrowDown')
+      if (!next) return
+      e.preventDefault()
+      next.click()
+      return
+    }
+
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      // Prefer the submenu inside the currently active submenu group (if sidebar is used)
+      const activeGroup = modal.querySelector('.rmm-submenu-group.rmm-submenu-group-active')
+      const submenu = (activeGroup && activeGroup.querySelector('.rmm-submenu')) || modal.querySelector('.rmm-submenu')
+      if (!submenu) return
+      const items = Array.from(submenu.querySelectorAll('.rmm-submenu-item')).filter(el => !el.classList.contains('rmm-disabled'))
+      const next = step(items, e.key === 'ArrowRight')
+      if (!next) return
+      e.preventDefault()
+      next.click()
+    }
+  })
+}
+
 /**
  * Open a modal by ID
  * If the modal is already open but minimized, it will be restored instead

data/app/javascript/rails_modal_manager/modal_store.js

@@ -11,7 +11,8 @@
 // ============================================
 
 export const MODAL_CONSTANTS = {
-  DEFAULT_Z_INDEX: 2000,
+  // v1.0.57 — 모달이 최소화 태스크바(2100) 위에 오도록 시작 z-index 상향
+  DEFAULT_Z_INDEX: 2200,
   ANIMATION_DURATION: 200,
   HEADER_HEIGHT: 56,
   FOOTER_HEIGHT: 64,

data/app/views/rails_modal_manager/_header.html.erb

@@ -81,7 +81,7 @@
         </svg>
       </button>
     <% end %>
-    <h2 id="<%= modal_id %>-title" class="rmm-header-title"><%= title %></h2>
+    <h2 id="<%= modal_id %>-title" class="rmm-header-title"><span class="rmm-header-title-text"><%= title %></span><span class="rmm-header-section" data-rmm-header-target="section"></span></h2>
   </div>
 
   <div class="rmm-header-controls">

data/lib/rails_modal_manager/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsModalManager
-  VERSION = "1.0.56"
+  VERSION = "1.0.57"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_modal_manager
 version: !ruby/object:Gem::Version
-  version: 1.0.56
+  version: 1.0.57
 platform: ruby
 authors:
 - reshacs