v4:코드모듈화_20260123

static/css/editor.css

@@ -5,12 +5,25 @@
     padding: 8px 12px;
     background: var(--ui-panel);
     border-bottom: 1px solid var(--ui-border);
-    gap: 4px;
+    gap: 6px;
     flex-wrap: wrap;
 }
 
 .format-bar.active { display: flex; }
 
+/* 편집 바 2줄 구조 */
+.format-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+}
+
+.format-row:first-child {
+    border-bottom: 1px solid var(--ui-border);
+    padding-bottom: 8px;
+}
+
 .format-btn { 
     padding: 6px 10px;
     background: none;
@@ -61,6 +74,26 @@
 
 .format-btn:hover .tooltip { opacity: 1; }
 
+/* 페이지 버튼 스타일 */
+.format-btn.page-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-width: fit-content;
+}
+
+/* 페이지 브레이크 표시 */
+.page-break-forced {
+    border-top: 3px solid #e65100 !important;
+    margin-top: 10px;
+}
+
+.move-to-prev-page {
+    border-top: 3px dashed #1976d2 !important;
+    margin-top: 10px;
+}
+
 /* 색상 선택기 */
 .color-picker-btn {
     position: relative;
@@ -185,6 +218,65 @@
     animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
 }
 
+.resizable-container { position: relative; display: inline-block; max-width: 100%; }
+.resizable-container.block-type { display: block; }
+
+.resize-handle {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    width: 18px;
+    height: 18px;
+    background: #00C853;
+    cursor: se-resize;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 100;
+    border-radius: 3px 0 3px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.resize-handle::after {
+    content: '⤡';
+    color: white;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.resizable-container:hover .resize-handle { opacity: 0.8; }
+.resize-handle:hover { opacity: 1 !important; transform: scale(1.1); }
+.resizable-container.resizing { outline: 2px dashed #00C853 !important; }
+.resizable-container.resizing .resize-handle { opacity: 1; background: #FF9800; }
+
+/* 표 전용 */
+.resizable-container.table-resize .resize-handle { background: #2196F3; }
+.resizable-container.table-resize.resizing .resize-handle { background: #FF5722; }
+
+/* 이미지 전용 */
+.resizable-container.figure-resize img { display: block; }
+
+/* 크기 표시 툴팁 */
+.size-tooltip {
+    position: absolute;
+    bottom: 100%;
+    right: 0;
+    background: rgba(0,0,0,0.8);
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    white-space: nowrap;
+    opacity: 0;
+    transition: opacity 0.2s;
+    pointer-events: none;
+}
+
+.resizable-container:hover .size-tooltip,
+.resizable-container.resizing .size-tooltip { opacity: 1; }
+
+
 @keyframes toastIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }