@bwg-ui/core 1.2.31 → 1.2.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/chunks/{CMSearchIntfGwP01-CIf-fHXy.js → CMSearchIntfGwP01-C_y_G3xh.js} +108 -94
  2. package/dist/chunks/CMSearchIntfGwP01-uJxdFXUb.cjs +1 -0
  3. package/dist/chunks/{MenuReport-DQS5SAmi.cjs → MenuReport-DkWB3Yyc.cjs} +1 -1
  4. package/dist/chunks/{MenuReport-GeXRkcDD.js → MenuReport-XwdiwiFn.js} +1 -1
  5. package/dist/chunks/{common-components-DNos8aEG.js → common-components-Cxh8PLBH.js} +5 -5
  6. package/dist/chunks/{common-components-CyqUT5Vj.cjs → common-components-DcTm1Tn1.cjs} +1 -1
  7. package/dist/chunks/layout-components-B4ptqDmC.cjs +35 -0
  8. package/dist/chunks/{layout-components-C4ehuALr.js → layout-components-Bp6b-T1V.js} +495 -474
  9. package/dist/components/common/BwgPopup.d.ts.map +1 -1
  10. package/dist/components/common/index.cjs +1 -1
  11. package/dist/components/common/index.js +1 -1
  12. package/dist/components/core/BwgMaskedPicker.d.ts.map +1 -1
  13. package/dist/components/core/index.cjs +1 -1
  14. package/dist/components/core/index.js +683 -615
  15. package/dist/components/guide/index.cjs +1 -1
  16. package/dist/components/guide/index.js +1 -1
  17. package/dist/components/layout/custom/ConfigurableSidebar.d.ts.map +1 -1
  18. package/dist/components/layout/index.cjs +1 -1
  19. package/dist/components/layout/index.js +1 -1
  20. package/dist/components/popup/CMSearchIntfGwP01.d.ts.map +1 -1
  21. package/dist/components/popup/index.cjs +1 -1
  22. package/dist/components/popup/index.js +1 -1
  23. package/dist/index.cjs +1 -1
  24. package/dist/index.js +2 -2
  25. package/dist/stores/index.cjs +1 -1
  26. package/dist/stores/index.js +1 -1
  27. package/dist/styles/layout.css +1234 -1176
  28. package/dist/utils/index.cjs +1 -1
  29. package/dist/utils/index.js +1 -1
  30. package/package.json +1 -1
  31. package/dist/chunks/CMSearchIntfGwP01-C4Kg1iWo.cjs +0 -1
  32. package/dist/chunks/layout-components-USIA9TVn.cjs +0 -35
  33. package/dist/components/common/BwgDraggable.d.ts +0 -25
  34. package/dist/components/common/BwgDraggable.d.ts.map +0 -1
package/dist/styles/layout.css CHANGED
@@ -1,1176 +1,1234 @@
1
- /* 메인 레이아웃 스타일 */
2
- .main-layout {
3
- min-height: 100vh;
4
- overflow: hidden;
5
- min-width: 1280px;
6
- }
7
-
8
- /* 헤더 스타일 */
9
- .header-wrapper {
10
- height: 50px !important;
11
- line-height: 50px !important;
12
- background: var(--header-bg);
13
- padding: 0 30px 0 20px;
14
- border-bottom: 1px solid var(--border-color);
15
- display: flex;
16
- justify-content: space-between;
17
- align-items: center;
18
- z-index: 1000;
19
- gap: 24px;
20
- color: var(--header-text);
21
- }
22
-
23
- .header-search {
24
- flex-shrink: 0;
25
- }
26
-
27
- .header-title {
28
- font-size: 18px;
29
- font-weight: var(--font-weight-semibold);
30
- color: var(--text-primary);
31
- flex: 1;
32
- text-align: center;
33
- }
34
-
35
- /* 헤더 로고 영역 */
36
- .header-left {
37
- display: flex;
38
- align-items: center;
39
- min-width: 200px;
40
- }
41
-
42
- .logo-container {
43
- display: flex;
44
- align-items: center;
45
- height: 100%;
46
- gap: 10px;
47
- }
48
-
49
- .header-logo-image {
50
- width: 81px;
51
- height: 40px;
52
- object-fit: contain;
53
- }
54
-
55
- .logo-placeholder {
56
- font-size: 18px;
57
- font-weight: var(--font-weight-bold);
58
- color: var(--header-text);
59
- padding: 8px 12px;
60
- border: 2px dashed var(--header-text);
61
- border-radius: var(--border-radius-sm);
62
- opacity: 0.7;
63
- }
64
-
65
-
66
- /* 헤더 타이틀 영역 */
67
- .header-title {
68
- flex: 1;
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
72
- font-size: var(--font-size-md);
73
- font-weight: var(--font-weight-medium);
74
- color: var(--header-text);
75
- }
76
-
77
- /* 헤더 사용자 영역 */
78
- .header-right {
79
- display: flex;
80
- align-items: center;
81
- gap: 12px;
82
- min-width: 200px;
83
- justify-content: flex-end;
84
- }
85
-
86
- .header-wrapper .ant-btn {
87
- width: 30px;
88
- height: 30px;
89
- }
90
-
91
-
92
- /* 사이더 스타일 */
93
- .side-wrapper {
94
- height: calc(100vh - 50px); /* 헤더 높이(50px)를 제외 */
95
- overflow: visible; /* 토글 버튼이 짤리지 않도록 visible로 변경 */
96
- display: flex;
97
- flex-direction: column;
98
- background-color: var(--sidebar-bg) !important;
99
- position: relative; /* 토글 버튼의 absolute 포지셔닝을 위해 */
100
- border-right: 1px solid var(--border-color);
101
- }
102
-
103
- .sider-content {
104
- flex: 1;
105
- display: flex;
106
- flex-direction: column;
107
- overflow: hidden;
108
- }
109
-
110
- .sider-menu {
111
- border-inline-end: none !important;
112
- flex: 1;
113
- overflow-y: auto; /* 필요할 때만 스크롤바 표시 */
114
- overflow-x: hidden;
115
- max-height: calc(100vh - 160px); /* 헤더(50px) + 로고 높이 + 마진 고려 */
116
- padding-right: 0px !important; /* 스크롤바 너비만큼 여백 확보 */
117
- box-sizing: border-box; /* 패딩을 포함한 박스 모델 */
118
- }
119
- .sider-menu.ant-menu-inline-collapsed {
120
- max-height: calc(100vh - 50px);
121
- }
122
- .sider-segmented {
123
- padding: 5px;
124
- background-color: var(--sidebar-segmented-bg);
125
- border-radius: var(--border-radius-sm);
126
- font-size: 13px;
127
- color: var(--sidebar-segmented-text);
128
- }
129
- .sider-search-ipt {
130
- background: var(--sidebar-search-bg);
131
- border-radius: var(--border-radius-xl);
132
- border: 0;
133
- color: var(--sidebar-search-text);
134
- font-size: 13px;
135
- font-weight: var(--font-weight-medium);
136
- }
137
- .sider-segmented .ant-segmented-group {
138
- gap: 5px;
139
- }
140
-
141
- /* Ant Design 메뉴 스타일 오버라이드 */
142
-
143
- .sider-menu .ant-menu-item {
144
- height: 30px;
145
- transition: all 0.3s ease;
146
- }
147
-
148
- .sider-menu .ant-menu-submenu-title {
149
- height: 30px !important;
150
- line-height: 30px !important;
151
- }
152
-
153
- .sider-menu .ant-menu-submenu-title:hover {
154
- background-color: unset !important;
155
- }
156
-
157
- /* 사이드바 테마 적용 */
158
- .ant-layout-sider {
159
- background-color: var(--sidebar-bg);
160
- }
161
- .ant-layout-sider-collapsed {
162
- flex: 0 0 50px !important;
163
- max-width: 50px !important;
164
- min-width: 50px !important;
165
- width: 50px !important;
166
- padding: 10px 0;
167
- }
168
-
169
- .ant-menu-dark {
170
- background-color: var(--sidebar-bg);
171
- }
172
-
173
- /* 사이드바 메뉴 트리 전체 테마 적용 */
174
- .ant-layout-sider .ant-menu {
175
- background-color: var(--sidebar-bg);
176
- }
177
-
178
- .ant-layout-sider .ant-menu-submenu {
179
- border-radius: 0;
180
- margin: 0;
181
- width: 100%;
182
- }
183
-
184
- .ant-layout-sider .ant-menu-item {
185
- /* background-color: var(--sidebar-bg) !important; */
186
- /* color: var(--sidebar-text) !important; */
187
- }
188
-
189
- .ant-layout-sider .ant-menu-item:hover {
190
- background-color: unset !important;
191
- }
192
-
193
- .ant-layout-sider .ant-menu-item-selected {
194
- background-color: unset !important;
195
- }
196
-
197
- .ant-layout-sider .ant-menu-submenu-title:hover {
198
- background-color: unset !important;
199
- }
200
-
201
- .ant-layout-sider .ant-menu-submenu-open > .ant-menu-submenu-title {
202
- /* background-color: rgba(255, 255, 255, 0.15) !important; */
203
- }
204
-
205
- .ant-layout-sider .ant-menu-sub.ant-menu-inline {
206
- background: transparent !important;
207
- }
208
- /* 메뉴 공통 스타일 */
209
- .sider-menu .ant-menu-item,
210
- .sider-menu .ant-menu-submenu-title {
211
- margin: 0;
212
- width: 100%;
213
- border-radius: 0;
214
- }
215
- .sider-menu .ant-menu-item-active.ant-menu-item-only-child {
216
- background-color: var(--sidebar-menu-selected-bg);
217
- }
218
- .sider-menu .ant-menu-item-active.ant-menu-item-only-child:hover {
219
- background-color: var(--sidebar-menu-selected-bg) !important;
220
- }
221
- .sider-menu .ant-menu-item-active.ant-menu-item-only-child::before {
222
- content: '';
223
- position: absolute;
224
- top: 0;
225
- left: 0;
226
- width: 3px;
227
- height: 100%;
228
- background: var(--sidebar-menu-selected-bar);
229
- }
230
- .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content {
231
- font-weight: var(--font-weight-medium);
232
- color: var(--sidebar-primary-text);
233
- }
234
-
235
-
236
- /* 1레벨 스타일 */
237
- .sider-menu > .ant-menu-item > .ant-menu-item-icon + span,
238
- .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
239
- margin-inline-start: 6px;
240
- }
241
- /* 1레벨 활성화 스타일 */
242
- .ant-layout-sider .sider-menu > .ant-menu-item > .ant-menu-item-icon,
243
- .ant-layout-sider .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title span.anticon {
244
- width: 30px;
245
- height: 30px;
246
- display: flex;
247
- align-items: center;
248
- justify-content: center;
249
- border-radius: 5px;
250
- }
251
- .ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-item-icon,
252
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.anticon,
253
- .ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.anticon {
254
- background: var(--sidebar-active-icon-bg);
255
- color: var(--primary-color);
256
- }
257
- .ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-title-content,
258
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.ant-menu-title-content,
259
- .ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.ant-menu-title-content {
260
- color: var(--primary-color);
261
- font-weight: var(--font-weight-semibold);
262
- }
263
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title {
264
- margin-bottom: 5px !important;
265
- }
266
- .ant-layout-sider .sider-menu > .ant-menu-item,
267
- .ant-layout-sider .sider-menu > .ant-menu-submenu {
268
- margin-bottom: 15px;
269
- }
270
- /* 2레벨 ul 스타일 */
271
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
272
- background-color: var(--sidebar-open-menu-group-bg) !important;
273
- border-top: 1px solid var(--sidebar-open-menu-group-border) !important;
274
- border-bottom: 1px solid var(--sidebar-open-menu-group-border) !important;
275
- padding: 10px 0;
276
- }
277
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
278
- margin-bottom: 5px;
279
- }
280
-
281
- /* 열린 메뉴 상위 텍스트 색상 */
282
- .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-title-content {
283
- color: var(--text-high);
284
- font-weight: var(--font-weight-semibold);
285
- }
286
-
287
- /* 서브메뉴 내부 모든 요소 배경색 */
288
- .ant-layout-sider .ant-menu-sub .ant-menu-item,
289
- .ant-layout-sider .ant-menu-sub .ant-menu-submenu,
290
- .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
291
- /* background-color: var(--sidebar-bg) !important; */
292
- }
293
-
294
- /* 메뉴 트리 전체 배경색 강제 적용 */
295
- .ant-layout-sider .ant-menu-dark .ant-menu-sub,
296
- .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-item,
297
- .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu,
298
- .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title {
299
- /* background-color: var(--sidebar-bg) !important; */
300
- border-radius: 0;
301
- }
302
-
303
- /* 메뉴 레벨별 색상 깊이감 */
304
- /* 1레벨 메뉴 - 가장 진함 */
305
- .ant-layout-sider .ant-menu-item,
306
- .ant-layout-sider .ant-menu-submenu-title {
307
- /* color: var(--sidebar-text) !important; */
308
- color: var(--text-secondary);
309
- }
310
-
311
- /* 1레벨 active 스타일 */
312
- .ant-layout-sider .ant-menu-item,
313
- .ant-layout-sider .ant-menu-submenu-title
314
- .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span {
315
- color: var(--primary-color);
316
- &.ant-menu-title-content {
317
- font-weight: var(--font-weight-semibold);
318
- }
319
- }
320
-
321
-
322
- /* 2레벨 메뉴*/
323
- .ant-layout-sider .ant-menu-sub .ant-menu-item,
324
- .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
325
- padding-left: 20px !important;
326
- }
327
- .ant-layout-sider .ant-menu-sub .ant-menu-item.ant-menu-item-only-child {
328
- padding-left: 30px !important;
329
- }
330
- /* 3레벨 메뉴*/
331
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item,
332
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title {
333
- font-size: 13px !important;
334
- padding-left: 30px !important;
335
- }
336
-
337
- /* 4레벨 메뉴*/
338
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-sub .ant-menu-item,
339
- .ant-layout-sider
340
- .ant-menu-sub
341
- .ant-menu-sub
342
- .ant-menu-sub
343
- .ant-menu-submenu-title {
344
- font-size: 12px !important;
345
- padding-left: 30px !important;
346
- }
347
- /* 4레벨 ul 스타일 */
348
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-open .ant-menu-sub {
349
- /* background: var(--sidebar-last-open-menu-group-bg) !important; */
350
- }
351
-
352
- /* 메뉴 아이콘 색상 */
353
- .ant-layout-sider .ant-menu-item .anticon,
354
- .ant-layout-sider .ant-menu-submenu-title .anticon {
355
- color: #444 !important;
356
- }
357
-
358
- /* 메뉴 텍스트 색상 */
359
- .ant-layout-sider .ant-menu-item,
360
- .ant-layout-sider .ant-menu-submenu-title {
361
- color: var(--text-secondary) !important;
362
- }
363
-
364
- /* 메뉴 링크 색상 */
365
- .ant-layout-sider .ant-menu-item a,
366
- .ant-layout-sider .ant-menu-submenu-title a {
367
- color: var(--sidebar-text) !important;
368
- }
369
-
370
- /* 선택된 메뉴 아이템 */
371
- .ant-layout-sider .ant-menu-item-selected,
372
- .ant-layout-sider .ant-menu-item-selected > a {
373
- /* color: #6449FC !important; */
374
- /* background-color: rgba(255, 255, 255, 0.2) !important; */
375
- }
376
-
377
- /* 호버 상태 - 모든 레벨에 적용 */
378
- .ant-layout-sider .ant-menu-item:hover,
379
- .ant-layout-sider .ant-menu-submenu-title:hover {
380
- /* color: var(--sidebar-text) !important; */
381
- /* background-color: rgba(255, 255, 255, 0.1) !important; */
382
- }
383
- /* 호버 상태 - 서브메뉴 텍스트 강조 */
384
- .ant-layout-sider .ant-menu-submenu:hover > .ant-menu-submenu-title .ant-menu-title-content span,
385
- .ant-layout-sider .ant-menu-item:hover > .ant-menu-title-content span {
386
- font-weight: var(--font-weight-bold);
387
- }
388
-
389
- /* 서브메뉴 내부 호버 상태 */
390
- .ant-layout-sider .ant-menu-sub .ant-menu-item:hover,
391
- .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title:hover {
392
- /* color: var(--sidebar-text) !important; */
393
- /* background-color: rgba(255, 255, 255, 0.1) !important; */
394
- }
395
-
396
- /* 3레벨 서브메뉴 내부 호버 상태 */
397
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item:hover,
398
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title:hover {
399
- color: var(--sidebar-primary-text);
400
- background-color: var(--sidebar-menu-selected-bg);
401
- }
402
-
403
- /* 4레벨 서브메뉴 내부 호버 상태 */
404
- .ant-layout-sider
405
- .ant-menu-sub
406
- .ant-menu-sub
407
- .ant-menu-sub
408
- .ant-menu-item:hover,
409
- .ant-layout-sider
410
- .ant-menu-sub
411
- .ant-menu-sub
412
- .ant-menu-sub
413
- .ant-menu-submenu-title:hover {
414
- color: var(--sidebar-primary-text);
415
- background-color: var(--sidebar-menu-selected-bg);
416
- }
417
-
418
- /* 라이트 테마 호버 (어두운 색상) */
419
- .ant-layout-sider[data-theme='light'] .ant-menu-item:hover,
420
- .ant-layout-sider[data-theme='light'] .ant-menu-submenu-title:hover,
421
- .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item:hover,
422
- .ant-layout-sider[data-theme='light']
423
- .ant-menu-sub
424
- .ant-menu-submenu-title:hover,
425
- .ant-layout-sider[data-theme='light']
426
- .ant-menu-sub
427
- .ant-menu-sub
428
- .ant-menu-item:hover,
429
- .ant-layout-sider[data-theme='light']
430
- .ant-menu-sub
431
- .ant-menu-sub
432
- .ant-menu-submenu-title:hover,
433
- .ant-layout-sider[data-theme='light']
434
- .ant-menu-sub
435
- .ant-menu-sub
436
- .ant-menu-sub
437
- .ant-menu-item:hover,
438
- .ant-layout-sider[data-theme='light']
439
- .ant-menu-sub
440
- .ant-menu-sub
441
- .ant-menu-sub
442
- .ant-menu-submenu-title:hover {
443
- background-color: rgba(0, 0, 0, 0.1) !important;
444
- }
445
-
446
- /* 모던 테마 호버 (어두운 색상) */
447
- .ant-layout-sider[data-theme='modern'] .ant-menu-item:hover,
448
- .ant-layout-sider[data-theme='modern'] .ant-menu-submenu-title:hover,
449
- .ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item:hover,
450
- .ant-layout-sider[data-theme='modern']
451
- .ant-menu-sub
452
- .ant-menu-submenu-title:hover,
453
- .ant-layout-sider[data-theme='modern']
454
- .ant-menu-sub
455
- .ant-menu-sub
456
- .ant-menu-item:hover,
457
- .ant-layout-sider[data-theme='modern']
458
- .ant-menu-sub
459
- .ant-menu-sub
460
- .ant-menu-submenu-title:hover,
461
- .ant-layout-sider[data-theme='modern']
462
- .ant-menu-sub
463
- .ant-menu-sub
464
- .ant-menu-sub
465
- .ant-menu-item:hover,
466
- .ant-layout-sider[data-theme='modern']
467
- .ant-menu-sub
468
- .ant-menu-sub
469
- .ant-menu-sub
470
- .ant-menu-submenu-title:hover {
471
- background-color: rgba(0, 0, 0, 0.1) !important;
472
- }
473
-
474
- /* 메뉴 내부 모든 텍스트 강제 적용 */
475
- .ant-layout-sider .ant-menu * {
476
- /* color: var(--sidebar-text) !important; */
477
- }
478
-
479
- /* 메뉴 아이템 내부 텍스트 */
480
- .ant-layout-sider .ant-menu-item span,
481
- .ant-layout-sider .ant-menu-submenu-title span {
482
- overflow: hidden;
483
- white-space: nowrap;
484
- text-overflow: ellipsis;
485
- }
486
-
487
- /* 강제로 모든 메뉴 텍스트 색상 적용 */
488
- .ant-layout-sider .ant-menu-dark .ant-menu-item,
489
- .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title,
490
- .ant-layout-sider .ant-menu-dark .ant-menu-item a,
491
- .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title a,
492
- .ant-layout-sider .ant-menu-dark .ant-menu-item span,
493
- .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title span {
494
- /* color: var(--sidebar-text) !important; */
495
- }
496
-
497
- /* 선택된 메뉴 아이템 강제 적용 */
498
- .ant-layout-sider .ant-menu-dark .ant-menu-item-selected,
499
- .ant-layout-sider .ant-menu-dark .ant-menu-item-selected > a,
500
- .ant-layout-sider .ant-menu-dark .ant-menu-item-selected > span {
501
- /* color: var(--sidebar-text) !important; */
502
- }
503
-
504
- /* 선택된 메뉴 아이템 - 모든 레벨에 적용 */
505
- .ant-layout-sider .ant-menu-item-selected,
506
- .ant-layout-sider .ant-menu-item-selected > a {
507
- color: var(--sidebar-primary-text);
508
- background-color: var(--sidebar-menu-selected-bg);
509
- }
510
-
511
- /* 서브메뉴 내부 선택된 아이템 */
512
- .ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
513
- .ant-layout-sider .ant-menu-sub .ant-menu-item-selected > a {
514
- color: var(--sidebar-primary-text);
515
- background-color: var(--sidebar-menu-selected-bg);
516
- }
517
-
518
- /* 3레벨 서브메뉴 내부 선택된 아이템 */
519
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected,
520
- .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected > a {
521
- color: var(--sidebar-primary-text);
522
- background-color: var(--sidebar-menu-selected-bg);
523
- }
524
-
525
- /* 4레벨 서브메뉴 내부 선택된 아이템 */
526
- .ant-layout-sider
527
- .ant-menu-sub
528
- .ant-menu-sub
529
- .ant-menu-sub
530
- .ant-menu-item-selected,
531
- .ant-layout-sider
532
- .ant-menu-sub
533
- .ant-menu-sub
534
- .ant-menu-sub
535
- .ant-menu-item-selected
536
- > a {
537
- color: var(--sidebar-primary-text);
538
- background-color: var(--sidebar-menu-selected-bg);
539
- }
540
-
541
- /* 메뉴 하위 레이아웃 변경 */
542
- .sider-content .sider-menu > .ant-menu-item:not(.ant-menu-submenu-vertical) {
543
- padding-left: 10px !important;
544
- }
545
- .sider-content .sider-menu > .ant-menu-submenu:not(.ant-menu-submenu-vertical) > .ant-menu-submenu-title {
546
- margin-bottom: 15px;
547
- padding-left: 10px !important;
548
- }
549
-
550
- /* 3~4레벨 텍스트 꾸밈 요소 */
551
- .sider-content .sider-menu .ant-menu-title-content {
552
- height: 100%;
553
- line-height: 30px;
554
- overflow: visible !important;
555
- }
556
- .sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div {
557
- position: relative;
558
- }
559
- .sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div::before {
560
- content: '';
561
- position: absolute;
562
- top: 50%;
563
- left: -10px;
564
- width: 4px;
565
- height: 1px;
566
- background-color: var(--sidebar-menu-bullet);
567
- }
568
-
569
-
570
- .sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
571
- background-color: var(--sidebar-menu-bullet-active);
572
- }
573
-
574
- /* 사이드바 축소 스타일 */
575
- .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
576
- padding: 0 10px !important;
577
- margin-bottom: 15px;
578
- }
579
- .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title:hover {
580
- background-color: transparent !important;
581
- }
582
- .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title[aria-expanded="true"] .anticon {
583
- background: var(--sidebar-active-icon-bg);
584
- color: var(--primary-color) !important;
585
- }
586
-
587
- /* 사이드바 segemented */
588
- .sider-segmented .ant-segmented-item-label {
589
- display: flex;
590
- align-items: center;
591
- justify-content: center;
592
- gap: 5px;
593
- }
594
- .sider-segmented .sider-segmented-item {
595
- width: 20px;
596
- height: 20px;
597
- display: flex;
598
- align-items: center;
599
- justify-content: center;
600
- flex-shrink: 0;
601
- }
602
-
603
- /* 라이트 테마 선택된 아이템 (어두운 색상) */
604
- .ant-layout-sider[data-theme='light'] .ant-menu-item-selected,
605
- .ant-layout-sider[data-theme='light'] .ant-menu-item-selected > a,
606
- .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected,
607
- .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected > a,
608
- .ant-layout-sider[data-theme='light']
609
- .ant-menu-sub
610
- .ant-menu-sub
611
- .ant-menu-item-selected,
612
- .ant-layout-sider[data-theme='light']
613
- .ant-menu-sub
614
- .ant-menu-sub
615
- .ant-menu-item-selected
616
- > a,
617
- .ant-layout-sider[data-theme='light']
618
- .ant-menu-sub
619
- .ant-menu-sub
620
- .ant-menu-sub
621
- .ant-menu-item-selected,
622
- .ant-layout-sider[data-theme='light']
623
- .ant-menu-sub
624
- .ant-menu-sub
625
- .ant-menu-sub
626
- .ant-menu-item-selected
627
- > a {
628
- background-color: rgba(0, 0, 0, 0.2) !important;
629
- }
630
-
631
- /* 모던 테마 선택된 아이템 (어두운 색상) */
632
- .ant-layout-sider[data-theme='modern'] .ant-menu-item-selected,
633
- .ant-layout-sider[data-theme='modern'] .ant-menu-item-selected > a,
634
- .ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item-selected,
635
- .ant-layout-sider[data-theme='modern']
636
- .ant-menu-sub
637
- .ant-menu-item-selected
638
- > a,
639
- .ant-layout-sider[data-theme='modern']
640
- .ant-menu-sub
641
- .ant-menu-sub
642
- .ant-menu-item-selected,
643
- .ant-layout-sider[data-theme='modern']
644
- .ant-menu-sub
645
- .ant-menu-sub
646
- .ant-menu-item-selected
647
- > a,
648
- .ant-layout-sider[data-theme='modern']
649
- .ant-menu-sub
650
- .ant-menu-sub
651
- .ant-menu-sub
652
- .ant-menu-item-selected,
653
- .ant-layout-sider[data-theme='modern']
654
- .ant-menu-sub
655
- .ant-menu-sub
656
- .ant-menu-sub
657
- .ant-menu-item-selected
658
- > a {
659
- background-color: rgba(0, 0, 0, 0.2) !important;
660
- }
661
-
662
- /* 사이드바 스크롤바 스타일링 */
663
- .sider-menu::-webkit-scrollbar,
664
- .sider-menu-container::-webkit-scrollbar {
665
- width: 6px;
666
- }
667
- .sider-menu::-webkit-scrollbar-track,
668
- .sider-menu-container::-webkit-scrollbar-track {
669
- background: transparent;
670
- border-radius: 3px;
671
- }
672
- .sider-menu::-webkit-scrollbar-thumb,
673
- .sider-menu-container::-webkit-scrollbar-thumb {
674
- background: #d9d9d9;
675
- border-radius: 3px;
676
- border: 1px solid #f0f0f0;
677
- }
678
- .sider-menu::-webkit-scrollbar-thumb:hover,
679
- .sider-menu-container::-webkit-scrollbar-thumb:hover {
680
- background: #bfbfbf;
681
- }
682
-
683
- /* Firefox 스크롤바 스타일링 */
684
- .sider-menu {
685
- scrollbar-width: thin;
686
- scrollbar-color: #d9d9d9 #f0f0f0;
687
- }
688
-
689
- /* 컨텐츠 컨테이너 스타일 */
690
- .content-container {
691
- display: flex;
692
- flex-direction: column;
693
- flex: 1;
694
- overflow: hidden;
695
- height: calc(100vh - 50px); /* 헤더 높이를 제외 */
696
- }
697
-
698
- /* 컨텐츠 스타일 */
699
- .main-content {
700
- flex: 1;
701
- height: calc(100vh - 45px);
702
- }
703
- .content-header {
704
- margin-bottom: 24px;
705
- padding-bottom: 16px;
706
- border-bottom: 1px solid #f0f0f0;
707
- }
708
- .content-title {
709
- font-size: 24px;
710
- font-weight: 600;
711
- color: var(--text-primary);
712
- margin: 0;
713
- }
714
- .content-description {
715
- color: #666;
716
- margin-top: 8px;
717
- }
718
- .content-body {
719
- height: 100%;
720
- }
721
- .bwg-view {
722
- gap: 20px;
723
- padding: 20px 30px;
724
- }
725
-
726
- /* 반응형 디자인 */
727
- @media (max-width: 768px) {
728
- .side-wrapper {
729
- height: 100vh;
730
- z-index: 1001;
731
- transition: left 0.3s ease;
732
- }
733
- .side-wrapper.mobile-open {
734
- left: 0;
735
- }
736
- .header-wrapper {
737
- padding: 0 16px;
738
- gap: 12px;
739
- }
740
- .header-search {
741
- width: 200px;
742
- }
743
- .header-search .ant-auto-complete {
744
- width: 100% !important;
745
- }
746
- .header-title {
747
- font-size: var(--font-size-md);
748
- flex: 1;
749
- text-align: center;
750
- }
751
- .header-right {
752
- gap: 8px;
753
- }
754
- }
755
-
756
- /* MenuTab 전용 스타일링 */
757
- .menu-tab-wrapper {
758
- background: var(--bg-primary);
759
- }
760
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav {
761
- margin: 0;
762
- padding: 10px 34px 0 29px;
763
- height: 45px;
764
- display: flex;
765
- align-items: center;
766
- justify-content: space-between;
767
- }
768
- .menu-tab-wrapper .ant-tabs-nav::before {
769
- left: 29px;
770
- bottom: 0;
771
- border-bottom: 1px solid var(--border-color);
772
- }
773
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
774
- height: 35px;
775
- flex: 1 !important;
776
- align-items: flex-end;
777
- }
778
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-list {
779
- display: flex;
780
- align-items: center;
781
- height: 100%;
782
- flex-wrap: nowrap;
783
- }
784
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab {
785
- height: 100%;
786
- border-radius: 10px 10px 0 0;
787
- transition: all 0.3s ease;
788
- padding: 0 10px 0 24px;
789
- position: relative ;
790
- background: #E7E9F4;
791
- margin: 0 4px 0 0;
792
- font-size: var(--font-size-sm);
793
- color: #777;
794
- border: 0;
795
- }
796
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab .ant-tabs-tab-remove {
797
- width: 20px;
798
- height: 20px;
799
- margin-right: 0;
800
- margin-left: 10px;
801
- color: #a1a1a1;
802
- }
803
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
804
- background: #dbdeec;
805
- color: var(--text-secondary);
806
- }
807
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab-active {
808
- background: var(--bg-primary);
809
- border: 2px solid var(--primary-color);
810
- border-bottom: none;
811
- .ant-tabs-tab-btn {
812
- color:var(--primary-color);
813
- text-shadow: none;
814
- font-weight: var(--font-weight-bold);
815
- }
816
- }
817
- /* MenuTab의 content-holder는 숨김 처리 (뷰 렌더링하지 않음) */
818
- .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-content-holder {
819
- display: none !important;
820
- }
821
-
822
- /* MenuTab 네비게이션 버튼 스타일링 */
823
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content {
824
- display: flex;
825
- align-items: center;
826
- gap: 4px;
827
- flex-shrink: 0;
828
- white-space: nowrap;
829
- overflow: hidden;
830
- padding-bottom: 13px;
831
- }
832
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content > div {
833
- display: flex !important;
834
- align-items: center !important;
835
- gap: 4px !important;
836
- flex-wrap: nowrap !important;
837
- }
838
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn {
839
- height: 20px !important;
840
- width: 20px !important;
841
- font-size: 12px !important;
842
- display: flex !important;
843
- align-items: center !important;
844
- justify-content: center !important;
845
- border: 0;
846
- color: #bdbdbd;
847
- box-shadow: none !important;
848
- }
849
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
850
- color: #5E5E5E;
851
- }
852
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
853
- opacity: 0.5;
854
- cursor: not-allowed;
855
- background: none;
856
- }
857
- .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
858
- margin-left: 11px;
859
- }
860
- .menu-nav-wrapper {
861
- display: flex;
862
- align-items: center;
863
- gap: 4px;
864
- }
865
-
866
- /* landing-wrap */
867
- .landing-wrap {
868
- background: #f3f5f9;
869
- position: absolute;
870
- top: 0;
871
- bottom: 0;
872
- z-index: 4;
873
- right: 0;
874
- left: 0;
875
- background: url('./assets/images/backgrounds/landing_bg.png') no-repeat;
876
- background-size: cover;
877
- }
878
- .landing-wrap .content-tit {
879
- position: absolute;
880
- top: 51%;
881
- left: 50.6%;
882
- transform: translate(-50%, -50.6%);
883
- padding-top: 20px;
884
- color: #9c9d9e;
885
- font-size: var(--font-size-xl);
886
- }
887
- .landing-wrap .content-tit:before {
888
- position: absolute;
889
- top: 0;
890
- left: 50%;
891
- display: inline-block;
892
- width: 19px;
893
- height: 1px;
894
- background: #9c9d9e;
895
- content: '';
896
- transform: translateX(-50%);
897
- }
898
- /* 20210316수정 end */
899
- .landing-wrap .inner {
900
- position: relative;
901
- height: 100%;
902
- min-height: 600px;
903
- }
904
- .landing-wrap .page-tit {
905
- position: absolute;
906
- left: 3%;
907
- bottom: 26%;
908
- color: #6688ff;
909
- font-size: 60px;
910
- font-family: 'Poppins', sans-serif;
911
- }
912
- .landing-wrap .sub-tit {
913
- position: absolute;
914
- left: 3%;
915
- bottom: 16%;
916
- color: rgba(255, 255, 255, 0.7);
917
- font-size: var(--font-size-xl);
918
- line-height: 28px;
919
- letter-spacing: -0.2px;
920
- font-family: 'Poppins', sans-serif;
921
- font-weight: 300;
922
- }
923
- .landing-wrap .content {
924
- font-family: 'Poppins', sans-serif;
925
- display: flex;
926
- position: absolute;
927
- line-height: 0;
928
- bottom: 16%;
929
- padding: 20px 22px;
930
- width: 480px;
931
- box-sizing: border-box;
932
- background: rgba(255, 255, 255, 0.05);
933
- right: 2%;
934
- border-radius: var(--border-radius-xxxl);
935
- backdrop-filter: blur(8px);
936
- }
937
- .landing-wrap .content dl {
938
- position: relative;
939
- width: 100%;
940
- text-align: left;
941
- box-sizing: border-box;
942
- }
943
- .landing-wrap .content dt {
944
- margin-bottom: 10px;
945
- padding-bottom: 10px;
946
- color: var(--text-white);
947
- font-size: 24px;
948
- line-height: initial;
949
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
950
- padding-left: 9px;
951
- }
952
- .landing-wrap .content dd {
953
- line-height: 20px;
954
- color: var(--text-white);
955
- font-size: 18px !important;
956
- font-weight: var(--font-weight-regular);
957
- letter-spacing: 0;
958
- padding-top: 6px;
959
- }
960
- .landing-wrap .content dd span {
961
- display: block;
962
- padding: 6px 0 6px 40px;
963
- position: relative;
964
- }
965
- .landing-wrap .content dd span:before {
966
- display: block;
967
- content: '';
968
- left: 9px;
969
- position: absolute;
970
- top: 5px;
971
- width: 20px;
972
- height: 20px;
973
- background: url(../images/common.png) no-repeat;
974
- background-position: -78px -177px;
975
- }
976
- .landing-wrap .content dd span + span:before {
977
- background-position: -100px -177px;
978
- }
979
-
980
- /* 사이드바 토글 버튼 */
981
- .sider-toggle-wrapper {
982
- position: absolute;
983
- top: 9px;
984
- right: -25px;
985
- z-index: 1000;
986
- width: 25px;
987
- height: 41px;
988
- background-color: #ffffff;
989
- border: 1px solid #dddddd;
990
- border-radius: 0 10px 10px 0;
991
- display: flex;
992
- align-items: center;
993
- justify-content: center;
994
- cursor: pointer;
995
- box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
996
- transition: all 0.3s ease;
997
- }
998
-
999
- .sider-toggle-btn .ant-btn {
1000
- border-radius: 0 10px 10px 0;
1001
- font-size: 12px;
1002
- color: #787878;
1003
- padding: 0;
1004
- width: 100%;
1005
- height: 100%;
1006
- display: flex;
1007
- align-items: center;
1008
- justify-content: center;
1009
- }
1010
-
1011
- /* 퀵메뉴 */
1012
- .quick-tab-container {
1013
- width: 33px;
1014
- height: 118px;
1015
- background: #4C465D;
1016
- border-radius: 15px 0px 0px 15px;
1017
- box-shadow: 0 4px 4px rgba(61, 56, 98, 0.3);
1018
- }
1019
- .quick-tab-container:has(.expanded) {
1020
- background: var(--primary-color);
1021
- }
1022
- .ant-btn.quick-tab-toggle-btn {
1023
- width: 33px;
1024
- height: 67px;
1025
- margin: 11px 0 9px;
1026
- border-radius: 15px 0px 0px 15px;
1027
- position: absolute;
1028
- top: 0;
1029
- right: 0;
1030
- cursor: pointer;
1031
- background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
1032
- background-repeat: no-repeat;
1033
- background-position: center;
1034
- }
1035
- .ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):hover,
1036
- .ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):active {
1037
- background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
1038
- background-repeat: no-repeat;
1039
- background-position: center;
1040
- background-color: transparent !important;
1041
- }
1042
- .quick-tab-drag-btn {
1043
- position: absolute;
1044
- bottom: 9px;
1045
- right: 3px;
1046
- width: 24px;
1047
- height: 24px;
1048
- border-radius: 50%;
1049
- display: flex;
1050
- align-items: center;
1051
- justify-content: center;
1052
- background: transparent url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
1053
- }
1054
- .quick-tab-drag-btn:hover {
1055
- background: rgba(28, 24, 37, 0.2) url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
1056
- }
1057
- .quick-tab-container .quick-tab {
1058
- background-color: var(--primary-color);
1059
- }
1060
- .quick-tab-item-inner {
1061
- display: flex;
1062
- flex-direction: column;
1063
- align-items: center;
1064
- border-radius: var(--border-radius-lg);
1065
- text-align: center;
1066
- }
1067
- .quick-tab-item-inner .quick-tab-items-icon {
1068
- display: flex;
1069
- align-items: center;
1070
- justify-content: center;
1071
- }
1072
- .quick-tab-item-inner .quick-tab-items-icon .anticon {
1073
- font-size: 28px;
1074
- }
1075
- .quick-tab-item-inner .quick-tab-items:last-child {
1076
- margin-bottom: 0;
1077
- }
1078
- .quick-tab-items-icon:has(.quick-overtime) {
1079
- background: #EFEBFF;
1080
- }
1081
- .quick-tab-items-icon:has(.quick-business-trip) {
1082
- background: #E3F6FF;
1083
- }
1084
- .quick-tab-items-icon:has(.quick-holiday) {
1085
- background: #FFF0F5;
1086
- }
1087
- .quick-tab-items-title {
1088
- font-size: 13px;
1089
- font-weight: var(--font-weight-semibold);
1090
- line-height: 16px;
1091
- word-break: keep-all;
1092
- color: var(--text-primary);
1093
- }
1094
- .quick-tab-add-icon {
1095
- width: 30px;
1096
- height: 30px;
1097
- border-radius: 50%;
1098
- display: flex;
1099
- align-items: center;
1100
- justify-content: center;
1101
- }
1102
- .quick-tab-add-icon:hover {
1103
- background: rgb(28 ,24 ,37 , 0.2);
1104
- }
1105
- /* 퀵메뉴 스크롤 스타일 */
1106
- .quick-tab-items-wrap::-webkit-scrollbar {
1107
- width: 4px;
1108
- }
1109
- .quick-tab-items-wrap::-webkit-scrollbar-track {
1110
- background: transparent;
1111
- border-radius: 3px;
1112
- }
1113
- .quick-tab-items-wrap::-webkit-scrollbar-thumb {
1114
- background: #d9d9d9;
1115
- border-radius: 3px;
1116
- border: 1px solid #f0f0f0;
1117
- }
1118
- .quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
1119
- background: #bfbfbf;
1120
- }
1121
-
1122
- /* 잠금화면 */
1123
- .lockscreen-form {
1124
- text-align: center;
1125
- }
1126
- .lockscreen-form .lock-icon-wrap {
1127
- width: 100%;
1128
- height: 70px;
1129
- margin-bottom: 15px;
1130
- }
1131
- .lockscreen-form .lock-icon-box {
1132
- display: inline-block;
1133
- width: 70px;
1134
- height: 70px;
1135
- border-radius: 15px;
1136
- background: #fff url(./assets/images/contents/icon/ico-lockscreen.svg) no-repeat center;
1137
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1138
- }
1139
- .lockscreen-form h2 {
1140
- margin-bottom: 10px;
1141
- font-size: 30px;
1142
- color: #fff;
1143
- }
1144
- .lockscreen-form p {
1145
- margin-bottom: 40px;
1146
- font-size: 16px;
1147
- color: #E2E2E2;
1148
- }
1149
- .lock-ipt-wrap .ant-otp {
1150
- column-gap: 20px
1151
- }
1152
- .lock-ipt-wrap .ant-otp .ant-otp-mask-input {
1153
- width: 44px;
1154
- height: 44px;
1155
- border-radius: 50px;
1156
- opacity: .5;
1157
- }
1158
- .lock-ipt-wrap .ant-otp .ant-otp-mask-input:hover,
1159
- .lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus,
1160
- .lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus-within {
1161
- border-color: #6449fc;
1162
- box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
1163
- }
1164
-
1165
- .bwg-load-indicator { position: absolute !important; inset: 0 !important; z-index: 40; }
1166
-
1167
- /* ────────────────────── 로딩 오버레이 (WAVE 스타일) ────────────────────── */
1168
- .bwg-load-indicator { background: none !important; background-color: rgba(255,255,255,.6) !important; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; }
1169
- .bwg-load-indicator .bwg-load-wave { display: flex; align-items: flex-end; gap: 15px; height: 18px; }
1170
- .bwg-load-indicator .bwg-load-wave span { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #8bb1ff 0%, #a88bff 100%); box-shadow: 0 1px 2px rgba(0,0,0,.1); animation: rg-bounceY 900ms ease-in-out infinite; }
1171
- .bwg-load-indicator .bwg-load-wave span:nth-child(2) { animation-delay: 120ms; }
1172
- .bwg-load-indicator .bwg-load-wave span:nth-child(3) { animation-delay: 240ms; }
1173
- @keyframes rg-bounceY { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } }
1174
- .bwg-load-indicator .bwg-load-title { font-weight: 700; letter-spacing: .06em; font-size: 16px; color: #3b3b3b; }
1175
- .bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
1176
-
1
+ /* 메인 레이아웃 스타일 */
2
+ .main-layout {
3
+ min-height: 100vh;
4
+ overflow: hidden;
5
+ min-width: 1280px;
6
+ }
7
+
8
+ /* 헤더 스타일 */
9
+ .header-wrapper {
10
+ height: 50px !important;
11
+ line-height: 50px !important;
12
+ background: var(--header-bg);
13
+ padding: 0 30px 0 20px;
14
+ border-bottom: 1px solid var(--border-color);
15
+ display: flex;
16
+ justify-content: space-between;
17
+ align-items: center;
18
+ z-index: 1000;
19
+ gap: 24px;
20
+ color: var(--header-text);
21
+ }
22
+
23
+ .header-search {
24
+ flex-shrink: 0;
25
+ }
26
+
27
+ .header-title {
28
+ font-size: 18px;
29
+ font-weight: var(--font-weight-semibold);
30
+ color: var(--text-primary);
31
+ flex: 1;
32
+ text-align: center;
33
+ }
34
+
35
+ /* 헤더 로고 영역 */
36
+ .header-left {
37
+ display: flex;
38
+ align-items: center;
39
+ min-width: 200px;
40
+ }
41
+
42
+ .logo-container {
43
+ display: flex;
44
+ align-items: center;
45
+ height: 100%;
46
+ gap: 10px;
47
+ }
48
+
49
+ .header-logo-image {
50
+ width: 81px;
51
+ height: 40px;
52
+ object-fit: contain;
53
+ }
54
+
55
+ .logo-placeholder {
56
+ font-size: 18px;
57
+ font-weight: var(--font-weight-bold);
58
+ color: var(--header-text);
59
+ padding: 8px 12px;
60
+ border: 2px dashed var(--header-text);
61
+ border-radius: var(--border-radius-sm);
62
+ opacity: 0.7;
63
+ }
64
+
65
+
66
+ /* 헤더 타이틀 영역 */
67
+ .header-title {
68
+ flex: 1;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ font-size: var(--font-size-md);
73
+ font-weight: var(--font-weight-medium);
74
+ color: var(--header-text);
75
+ }
76
+
77
+ /* 헤더 사용자 영역 */
78
+ .header-right {
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 12px;
82
+ min-width: 200px;
83
+ justify-content: flex-end;
84
+ }
85
+
86
+ .header-wrapper .ant-btn {
87
+ width: 30px;
88
+ height: 30px;
89
+ }
90
+
91
+
92
+ /* 사이더 스타일 */
93
+ .side-wrapper {
94
+ height: calc(100vh - 50px); /* 헤더 높이(50px)를 제외 */
95
+ overflow: visible; /* 토글 버튼이 짤리지 않도록 visible로 변경 */
96
+ display: flex;
97
+ flex-direction: column;
98
+ background-color: var(--sidebar-bg) !important;
99
+ position: relative; /* 토글 버튼의 absolute 포지셔닝을 위해 */
100
+ border-right: 1px solid var(--border-color);
101
+ }
102
+
103
+ .sider-content {
104
+ flex: 1;
105
+ display: flex;
106
+ flex-direction: column;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .sider-menu {
111
+ border-inline-end: none !important;
112
+ flex: 1;
113
+ overflow-y: auto; /* 필요할 때만 스크롤바 표시 */
114
+ overflow-x: hidden;
115
+ max-height: calc(100vh - 160px); /* 헤더(50px) + 로고 높이 + 마진 고려 */
116
+ padding-right: 0px !important; /* 스크롤바 너비만큼 여백 확보 */
117
+ box-sizing: border-box; /* 패딩을 포함한 박스 모델 */
118
+ }
119
+ .sider-menu.ant-menu-inline-collapsed {
120
+ max-height: calc(100vh - 50px);
121
+ }
122
+ .sider-segmented {
123
+ padding: 5px;
124
+ background-color: var(--sidebar-segmented-bg);
125
+ border-radius: var(--border-radius-sm);
126
+ font-size: 13px;
127
+ color: var(--sidebar-segmented-text);
128
+ }
129
+ .sider-search-ipt {
130
+ background: var(--sidebar-search-bg);
131
+ border-radius: var(--border-radius-xl);
132
+ border: 0;
133
+ color: var(--sidebar-search-text);
134
+ font-size: 13px;
135
+ font-weight: var(--font-weight-medium);
136
+ }
137
+ .sider-segmented .ant-segmented-group {
138
+ gap: 5px;
139
+ }
140
+
141
+ /* Ant Design 메뉴 스타일 오버라이드 */
142
+
143
+ .sider-menu .ant-menu-item {
144
+ height: 30px;
145
+ transition: all 0.3s ease;
146
+ }
147
+
148
+ .sider-menu .ant-menu-submenu-title {
149
+ height: 30px !important;
150
+ line-height: 30px !important;
151
+ }
152
+
153
+ .sider-menu .ant-menu-submenu-title:hover {
154
+ background-color: unset !important;
155
+ }
156
+
157
+ /* 사이드바 테마 적용 */
158
+ .ant-layout-sider {
159
+ background-color: var(--sidebar-bg);
160
+ }
161
+ .ant-layout-sider-collapsed {
162
+ flex: 0 0 50px !important;
163
+ max-width: 50px !important;
164
+ min-width: 50px !important;
165
+ width: 50px !important;
166
+ padding: 10px 0;
167
+ }
168
+
169
+ .ant-menu-dark {
170
+ background-color: var(--sidebar-bg);
171
+ }
172
+
173
+ /* 사이드바 메뉴 트리 전체 테마 적용 */
174
+ .ant-layout-sider .ant-menu {
175
+ background-color: var(--sidebar-bg);
176
+ }
177
+
178
+ .ant-layout-sider .ant-menu-submenu {
179
+ border-radius: 0;
180
+ margin: 0;
181
+ width: 100%;
182
+ }
183
+
184
+ .ant-layout-sider .ant-menu-item {
185
+ /* background-color: var(--sidebar-bg) !important; */
186
+ /* color: var(--sidebar-text) !important; */
187
+ }
188
+
189
+ .ant-layout-sider .ant-menu-item:hover {
190
+ background-color: unset !important;
191
+ }
192
+
193
+ /* .sider-menu가 아닌 경우에만 배경색 제거 (기존 스타일 유지) */
194
+ .ant-layout-sider .ant-menu-item-selected {
195
+ background-color: unset !important;
196
+ }
197
+
198
+ .ant-layout-sider .ant-menu-submenu-title:hover {
199
+ background-color: unset !important;
200
+ }
201
+
202
+ .ant-layout-sider .ant-menu-submenu-open > .ant-menu-submenu-title {
203
+ /* background-color: rgba(255, 255, 255, 0.15) !important; */
204
+ }
205
+
206
+ .ant-layout-sider .ant-menu-sub.ant-menu-inline {
207
+ background: transparent !important;
208
+ }
209
+ /* 메뉴 공통 스타일 */
210
+ .sider-menu .ant-menu-item,
211
+ .sider-menu .ant-menu-submenu-title {
212
+ margin: 0;
213
+ width: 100%;
214
+ border-radius: 0;
215
+ }
216
+ .sider-menu .ant-menu-item-active.ant-menu-item-only-child {
217
+ background-color: var(--sidebar-menu-selected-bg);
218
+ }
219
+ .sider-menu .ant-menu-item-active.ant-menu-item-only-child:hover {
220
+ background-color: var(--sidebar-menu-selected-bg) !important;
221
+ }
222
+ .sider-menu .ant-menu-item-active.ant-menu-item-only-child::before {
223
+ content: '';
224
+ position: absolute;
225
+ top: 0;
226
+ left: 0;
227
+ width: 3px;
228
+ height: 100%;
229
+ background: var(--sidebar-menu-selected-bar);
230
+ }
231
+ .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content {
232
+ font-weight: var(--font-weight-medium);
233
+ color: var(--sidebar-primary-text);
234
+ }
235
+
236
+ /* 선택된 메뉴 아이템 스타일 (selectedKeys로 선택된 경우) */
237
+ .sider-menu .ant-menu-item-selected {
238
+ background-color: var(--sidebar-menu-selected-bg) !important;
239
+ color: var(--sidebar-primary-text) !important;
240
+ }
241
+
242
+ .sider-menu .ant-menu-item-selected::before {
243
+ content: '';
244
+ position: absolute;
245
+ top: 0;
246
+ left: 0;
247
+ width: 3px;
248
+ height: 100%;
249
+ background: var(--sidebar-menu-selected-bar);
250
+ }
251
+
252
+ .sider-menu .ant-menu-item-selected .ant-menu-title-content {
253
+ font-weight: var(--font-weight-medium);
254
+ color: var(--sidebar-primary-text);
255
+ }
256
+
257
+ /* 서브메뉴 내부 선택된 아이템 */
258
+ .sider-menu .ant-menu-sub .ant-menu-item-selected {
259
+ background-color: var(--sidebar-menu-selected-bg) !important;
260
+ color: var(--sidebar-primary-text) !important;
261
+ }
262
+
263
+ .sider-menu .ant-menu-sub .ant-menu-item-selected::before {
264
+ content: '';
265
+ position: absolute;
266
+ top: 0;
267
+ left: 0;
268
+ width: 3px;
269
+ height: 100%;
270
+ background: var(--sidebar-menu-selected-bar);
271
+ }
272
+
273
+ .sider-menu .ant-menu-sub .ant-menu-item-selected .ant-menu-title-content {
274
+ font-weight: var(--font-weight-medium);
275
+ color: var(--sidebar-primary-text);
276
+ }
277
+
278
+ /* 3레벨 서브메뉴 내부 선택된 아이템 */
279
+ .sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected {
280
+ background-color: var(--sidebar-menu-selected-bg) !important;
281
+ color: var(--sidebar-primary-text) !important;
282
+ }
283
+
284
+ .sider-menu .ant-menu-sub .ant-menu-sub .ant-menu-item-selected::before {
285
+ content: '';
286
+ position: absolute;
287
+ top: 0;
288
+ left: 0;
289
+ width: 3px;
290
+ height: 100%;
291
+ background: var(--sidebar-menu-selected-bar);
292
+ }
293
+
294
+ /* 1레벨 스타일 */
295
+ .sider-menu > .ant-menu-item > .ant-menu-item-icon + span,
296
+ .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span {
297
+ margin-inline-start: 6px;
298
+ }
299
+ /* 1레벨 활성화 스타일 */
300
+ .ant-layout-sider .sider-menu > .ant-menu-item > .ant-menu-item-icon,
301
+ .ant-layout-sider .sider-menu > .ant-menu-submenu > .ant-menu-submenu-title span.anticon {
302
+ width: 30px;
303
+ height: 30px;
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: center;
307
+ border-radius: 5px;
308
+ }
309
+ .ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-item-icon,
310
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.anticon,
311
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.anticon {
312
+ background: var(--sidebar-active-icon-bg);
313
+ color: var(--primary-color);
314
+ }
315
+ .ant-layout-sider .sider-menu > .ant-menu-item-active > .ant-menu-title-content,
316
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span.ant-menu-title-content,
317
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-active > .ant-menu-submenu-title span.ant-menu-title-content {
318
+ color: var(--primary-color);
319
+ font-weight: var(--font-weight-semibold);
320
+ }
321
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title {
322
+ margin-bottom: 5px !important;
323
+ }
324
+ .ant-layout-sider .sider-menu > .ant-menu-item,
325
+ .ant-layout-sider .sider-menu > .ant-menu-submenu {
326
+ margin-bottom: 15px;
327
+ }
328
+ /* 2레벨 ul 스타일 */
329
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
330
+ background-color: var(--sidebar-open-menu-group-bg) !important;
331
+ border-top: 1px solid var(--sidebar-open-menu-group-border) !important;
332
+ border-bottom: 1px solid var(--sidebar-open-menu-group-border) !important;
333
+ padding: 10px 0;
334
+ }
335
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
336
+ margin-bottom: 5px;
337
+ }
338
+
339
+ /* 열린 메뉴 상위 텍스트 색상 */
340
+ .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-title-content {
341
+ color: var(--text-high);
342
+ font-weight: var(--font-weight-semibold);
343
+ }
344
+
345
+ /* 서브메뉴 내부 모든 요소 배경색 */
346
+ .ant-layout-sider .ant-menu-sub .ant-menu-item,
347
+ .ant-layout-sider .ant-menu-sub .ant-menu-submenu,
348
+ .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
349
+ /* background-color: var(--sidebar-bg) !important; */
350
+ }
351
+
352
+ /* 메뉴 트리 전체 배경색 강제 적용 */
353
+ .ant-layout-sider .ant-menu-dark .ant-menu-sub,
354
+ .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-item,
355
+ .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu,
356
+ .ant-layout-sider .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title {
357
+ /* background-color: var(--sidebar-bg) !important; */
358
+ border-radius: 0;
359
+ }
360
+
361
+ /* 메뉴 레벨별 색상 깊이감 */
362
+ /* 1레벨 메뉴 - 가장 진함 */
363
+ .ant-layout-sider .ant-menu-item,
364
+ .ant-layout-sider .ant-menu-submenu-title {
365
+ /* color: var(--sidebar-text) !important; */
366
+ color: var(--text-secondary);
367
+ }
368
+
369
+ /* 1레벨 active 스타일 */
370
+ .ant-layout-sider .ant-menu-item,
371
+ .ant-layout-sider .ant-menu-submenu-title
372
+ .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-submenu-title span {
373
+ color: var(--primary-color);
374
+ &.ant-menu-title-content {
375
+ font-weight: var(--font-weight-semibold);
376
+ }
377
+ }
378
+
379
+
380
+ /* 2레벨 메뉴*/
381
+ .ant-layout-sider .ant-menu-sub .ant-menu-item,
382
+ .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
383
+ padding-left: 20px !important;
384
+ }
385
+ .ant-layout-sider .ant-menu-sub .ant-menu-item.ant-menu-item-only-child {
386
+ padding-left: 30px !important;
387
+ }
388
+ /* 3레벨 메뉴*/
389
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item,
390
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title {
391
+ font-size: 13px !important;
392
+ padding-left: 30px !important;
393
+ }
394
+
395
+ /* 4레벨 메뉴*/
396
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-sub .ant-menu-item,
397
+ .ant-layout-sider
398
+ .ant-menu-sub
399
+ .ant-menu-sub
400
+ .ant-menu-sub
401
+ .ant-menu-submenu-title {
402
+ font-size: 12px !important;
403
+ padding-left: 30px !important;
404
+ }
405
+ /* 4레벨 ul 스타일 */
406
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-open .ant-menu-sub {
407
+ /* background: var(--sidebar-last-open-menu-group-bg) !important; */
408
+ }
409
+
410
+ /* 메뉴 아이콘 색상 */
411
+ .ant-layout-sider .ant-menu-item .anticon,
412
+ .ant-layout-sider .ant-menu-submenu-title .anticon {
413
+ color: #444 !important;
414
+ }
415
+
416
+ /* 메뉴 텍스트 색상 */
417
+ .ant-layout-sider .ant-menu-item,
418
+ .ant-layout-sider .ant-menu-submenu-title {
419
+ color: var(--text-secondary) !important;
420
+ }
421
+
422
+ /* 메뉴 링크 색상 */
423
+ .ant-layout-sider .ant-menu-item a,
424
+ .ant-layout-sider .ant-menu-submenu-title a {
425
+ color: var(--sidebar-text) !important;
426
+ }
427
+
428
+ /* 선택된 메뉴 아이템 */
429
+ .ant-layout-sider .ant-menu-item-selected,
430
+ .ant-layout-sider .ant-menu-item-selected > a {
431
+ /* color: #6449FC !important; */
432
+ /* background-color: rgba(255, 255, 255, 0.2) !important; */
433
+ }
434
+
435
+ /* 호버 상태 - 모든 레벨에 적용 */
436
+ .ant-layout-sider .ant-menu-item:hover,
437
+ .ant-layout-sider .ant-menu-submenu-title:hover {
438
+ /* color: var(--sidebar-text) !important; */
439
+ /* background-color: rgba(255, 255, 255, 0.1) !important; */
440
+ }
441
+ /* 호버 상태 - 서브메뉴 텍스트 강조 */
442
+ .ant-layout-sider .ant-menu-submenu:hover > .ant-menu-submenu-title .ant-menu-title-content span,
443
+ .ant-layout-sider .ant-menu-item:hover > .ant-menu-title-content span {
444
+ font-weight: var(--font-weight-bold);
445
+ }
446
+
447
+ /* 서브메뉴 내부 호버 상태 */
448
+ .ant-layout-sider .ant-menu-sub .ant-menu-item:hover,
449
+ .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title:hover {
450
+ /* color: var(--sidebar-text) !important; */
451
+ /* background-color: rgba(255, 255, 255, 0.1) !important; */
452
+ }
453
+
454
+ /* 3레벨 서브메뉴 내부 호버 상태 */
455
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item:hover,
456
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title:hover {
457
+ color: var(--sidebar-primary-text);
458
+ background-color: var(--sidebar-menu-selected-bg);
459
+ }
460
+
461
+ /* 4레벨 서브메뉴 내부 호버 상태 */
462
+ .ant-layout-sider
463
+ .ant-menu-sub
464
+ .ant-menu-sub
465
+ .ant-menu-sub
466
+ .ant-menu-item:hover,
467
+ .ant-layout-sider
468
+ .ant-menu-sub
469
+ .ant-menu-sub
470
+ .ant-menu-sub
471
+ .ant-menu-submenu-title:hover {
472
+ color: var(--sidebar-primary-text);
473
+ background-color: var(--sidebar-menu-selected-bg);
474
+ }
475
+
476
+ /* 라이트 테마 호버 (어두운 색상) */
477
+ .ant-layout-sider[data-theme='light'] .ant-menu-item:hover,
478
+ .ant-layout-sider[data-theme='light'] .ant-menu-submenu-title:hover,
479
+ .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item:hover,
480
+ .ant-layout-sider[data-theme='light']
481
+ .ant-menu-sub
482
+ .ant-menu-submenu-title:hover,
483
+ .ant-layout-sider[data-theme='light']
484
+ .ant-menu-sub
485
+ .ant-menu-sub
486
+ .ant-menu-item:hover,
487
+ .ant-layout-sider[data-theme='light']
488
+ .ant-menu-sub
489
+ .ant-menu-sub
490
+ .ant-menu-submenu-title:hover,
491
+ .ant-layout-sider[data-theme='light']
492
+ .ant-menu-sub
493
+ .ant-menu-sub
494
+ .ant-menu-sub
495
+ .ant-menu-item:hover,
496
+ .ant-layout-sider[data-theme='light']
497
+ .ant-menu-sub
498
+ .ant-menu-sub
499
+ .ant-menu-sub
500
+ .ant-menu-submenu-title:hover {
501
+ background-color: rgba(0, 0, 0, 0.1) !important;
502
+ }
503
+
504
+ /* 모던 테마 호버 (어두운 색상) */
505
+ .ant-layout-sider[data-theme='modern'] .ant-menu-item:hover,
506
+ .ant-layout-sider[data-theme='modern'] .ant-menu-submenu-title:hover,
507
+ .ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item:hover,
508
+ .ant-layout-sider[data-theme='modern']
509
+ .ant-menu-sub
510
+ .ant-menu-submenu-title:hover,
511
+ .ant-layout-sider[data-theme='modern']
512
+ .ant-menu-sub
513
+ .ant-menu-sub
514
+ .ant-menu-item:hover,
515
+ .ant-layout-sider[data-theme='modern']
516
+ .ant-menu-sub
517
+ .ant-menu-sub
518
+ .ant-menu-submenu-title:hover,
519
+ .ant-layout-sider[data-theme='modern']
520
+ .ant-menu-sub
521
+ .ant-menu-sub
522
+ .ant-menu-sub
523
+ .ant-menu-item:hover,
524
+ .ant-layout-sider[data-theme='modern']
525
+ .ant-menu-sub
526
+ .ant-menu-sub
527
+ .ant-menu-sub
528
+ .ant-menu-submenu-title:hover {
529
+ background-color: rgba(0, 0, 0, 0.1) !important;
530
+ }
531
+
532
+ /* 메뉴 내부 모든 텍스트 강제 적용 */
533
+ .ant-layout-sider .ant-menu * {
534
+ /* color: var(--sidebar-text) !important; */
535
+ }
536
+
537
+ /* 메뉴 아이템 내부 텍스트 */
538
+ .ant-layout-sider .ant-menu-item span,
539
+ .ant-layout-sider .ant-menu-submenu-title span {
540
+ overflow: hidden;
541
+ white-space: nowrap;
542
+ text-overflow: ellipsis;
543
+ }
544
+
545
+ /* 강제로 모든 메뉴 텍스트 색상 적용 */
546
+ .ant-layout-sider .ant-menu-dark .ant-menu-item,
547
+ .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title,
548
+ .ant-layout-sider .ant-menu-dark .ant-menu-item a,
549
+ .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title a,
550
+ .ant-layout-sider .ant-menu-dark .ant-menu-item span,
551
+ .ant-layout-sider .ant-menu-dark .ant-menu-submenu-title span {
552
+ /* color: var(--sidebar-text) !important; */
553
+ }
554
+
555
+ /* 선택된 메뉴 아이템 강제 적용 */
556
+ .ant-layout-sider .ant-menu-dark .ant-menu-item-selected,
557
+ .ant-layout-sider .ant-menu-dark .ant-menu-item-selected > a,
558
+ .ant-layout-sider .ant-menu-dark .ant-menu-item-selected > span {
559
+ /* color: var(--sidebar-text) !important; */
560
+ }
561
+
562
+ /* 선택된 메뉴 아이템 - 모든 레벨에 적용 */
563
+ .ant-layout-sider .ant-menu-item-selected,
564
+ .ant-layout-sider .ant-menu-item-selected > a {
565
+ color: var(--sidebar-primary-text);
566
+ background-color: var(--sidebar-menu-selected-bg);
567
+ }
568
+
569
+ /* 서브메뉴 내부 선택된 아이템 */
570
+ .ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
571
+ .ant-layout-sider .ant-menu-sub .ant-menu-item-selected > a {
572
+ color: var(--sidebar-primary-text);
573
+ background-color: var(--sidebar-menu-selected-bg);
574
+ }
575
+
576
+ /* 3레벨 서브메뉴 내부 선택된 아이템 */
577
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected,
578
+ .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected > a {
579
+ color: var(--sidebar-primary-text);
580
+ background-color: var(--sidebar-menu-selected-bg);
581
+ }
582
+
583
+ /* 4레벨 서브메뉴 내부 선택된 아이템 */
584
+ .ant-layout-sider
585
+ .ant-menu-sub
586
+ .ant-menu-sub
587
+ .ant-menu-sub
588
+ .ant-menu-item-selected,
589
+ .ant-layout-sider
590
+ .ant-menu-sub
591
+ .ant-menu-sub
592
+ .ant-menu-sub
593
+ .ant-menu-item-selected
594
+ > a {
595
+ color: var(--sidebar-primary-text);
596
+ background-color: var(--sidebar-menu-selected-bg);
597
+ }
598
+
599
+ /* 메뉴 하위 레이아웃 변경 */
600
+ .sider-content .sider-menu > .ant-menu-item:not(.ant-menu-submenu-vertical) {
601
+ padding-left: 10px !important;
602
+ }
603
+ .sider-content .sider-menu > .ant-menu-submenu:not(.ant-menu-submenu-vertical) > .ant-menu-submenu-title {
604
+ margin-bottom: 15px;
605
+ padding-left: 10px !important;
606
+ }
607
+
608
+ /* 3~4레벨 텍스트 꾸밈 요소 */
609
+ .sider-content .sider-menu .ant-menu-title-content {
610
+ height: 100%;
611
+ line-height: 30px;
612
+ overflow: visible !important;
613
+ }
614
+ .sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div {
615
+ position: relative;
616
+ }
617
+ .sider-content .sider-menu .ant-menu-item.ant-menu-item-only-child .ant-menu-title-content > div::before {
618
+ content: '';
619
+ position: absolute;
620
+ top: 50%;
621
+ left: -10px;
622
+ width: 4px;
623
+ height: 1px;
624
+ background-color: var(--sidebar-menu-bullet);
625
+ }
626
+
627
+
628
+ .sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
629
+ background-color: var(--sidebar-menu-bullet-active);
630
+ }
631
+
632
+ /* 사이드바 축소 스타일 */
633
+ .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title {
634
+ padding: 0 10px !important;
635
+ margin-bottom: 15px;
636
+ }
637
+ .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title:hover {
638
+ background-color: transparent !important;
639
+ }
640
+ .sider-menu .ant-menu-submenu-vertical .ant-menu-submenu-title[aria-expanded="true"] .anticon {
641
+ background: var(--sidebar-active-icon-bg);
642
+ color: var(--primary-color) !important;
643
+ }
644
+
645
+ /* 사이드바 segemented */
646
+ .sider-segmented .ant-segmented-item-label {
647
+ display: flex;
648
+ align-items: center;
649
+ justify-content: center;
650
+ gap: 5px;
651
+ }
652
+ .sider-segmented .sider-segmented-item {
653
+ width: 20px;
654
+ height: 20px;
655
+ display: flex;
656
+ align-items: center;
657
+ justify-content: center;
658
+ flex-shrink: 0;
659
+ }
660
+
661
+ /* 라이트 테마 선택된 아이템 (어두운 색상) */
662
+ .ant-layout-sider[data-theme='light'] .ant-menu-item-selected,
663
+ .ant-layout-sider[data-theme='light'] .ant-menu-item-selected > a,
664
+ .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected,
665
+ .ant-layout-sider[data-theme='light'] .ant-menu-sub .ant-menu-item-selected > a,
666
+ .ant-layout-sider[data-theme='light']
667
+ .ant-menu-sub
668
+ .ant-menu-sub
669
+ .ant-menu-item-selected,
670
+ .ant-layout-sider[data-theme='light']
671
+ .ant-menu-sub
672
+ .ant-menu-sub
673
+ .ant-menu-item-selected
674
+ > a,
675
+ .ant-layout-sider[data-theme='light']
676
+ .ant-menu-sub
677
+ .ant-menu-sub
678
+ .ant-menu-sub
679
+ .ant-menu-item-selected,
680
+ .ant-layout-sider[data-theme='light']
681
+ .ant-menu-sub
682
+ .ant-menu-sub
683
+ .ant-menu-sub
684
+ .ant-menu-item-selected
685
+ > a {
686
+ background-color: rgba(0, 0, 0, 0.2) !important;
687
+ }
688
+
689
+ /* 모던 테마 선택된 아이템 (어두운 색상) */
690
+ .ant-layout-sider[data-theme='modern'] .ant-menu-item-selected,
691
+ .ant-layout-sider[data-theme='modern'] .ant-menu-item-selected > a,
692
+ .ant-layout-sider[data-theme='modern'] .ant-menu-sub .ant-menu-item-selected,
693
+ .ant-layout-sider[data-theme='modern']
694
+ .ant-menu-sub
695
+ .ant-menu-item-selected
696
+ > a,
697
+ .ant-layout-sider[data-theme='modern']
698
+ .ant-menu-sub
699
+ .ant-menu-sub
700
+ .ant-menu-item-selected,
701
+ .ant-layout-sider[data-theme='modern']
702
+ .ant-menu-sub
703
+ .ant-menu-sub
704
+ .ant-menu-item-selected
705
+ > a,
706
+ .ant-layout-sider[data-theme='modern']
707
+ .ant-menu-sub
708
+ .ant-menu-sub
709
+ .ant-menu-sub
710
+ .ant-menu-item-selected,
711
+ .ant-layout-sider[data-theme='modern']
712
+ .ant-menu-sub
713
+ .ant-menu-sub
714
+ .ant-menu-sub
715
+ .ant-menu-item-selected
716
+ > a {
717
+ background-color: rgba(0, 0, 0, 0.2) !important;
718
+ }
719
+
720
+ /* 사이드바 스크롤바 스타일링 */
721
+ .sider-menu::-webkit-scrollbar,
722
+ .sider-menu-container::-webkit-scrollbar {
723
+ width: 6px;
724
+ }
725
+ .sider-menu::-webkit-scrollbar-track,
726
+ .sider-menu-container::-webkit-scrollbar-track {
727
+ background: transparent;
728
+ border-radius: 3px;
729
+ }
730
+ .sider-menu::-webkit-scrollbar-thumb,
731
+ .sider-menu-container::-webkit-scrollbar-thumb {
732
+ background: #d9d9d9;
733
+ border-radius: 3px;
734
+ border: 1px solid #f0f0f0;
735
+ }
736
+ .sider-menu::-webkit-scrollbar-thumb:hover,
737
+ .sider-menu-container::-webkit-scrollbar-thumb:hover {
738
+ background: #bfbfbf;
739
+ }
740
+
741
+ /* Firefox 스크롤바 스타일링 */
742
+ .sider-menu {
743
+ scrollbar-width: thin;
744
+ scrollbar-color: #d9d9d9 #f0f0f0;
745
+ }
746
+
747
+ /* 컨텐츠 컨테이너 스타일 */
748
+ .content-container {
749
+ display: flex;
750
+ flex-direction: column;
751
+ flex: 1;
752
+ overflow: hidden;
753
+ height: calc(100vh - 50px); /* 헤더 높이를 제외 */
754
+ }
755
+
756
+ /* 컨텐츠 스타일 */
757
+ .main-content {
758
+ flex: 1;
759
+ height: calc(100vh - 45px);
760
+ }
761
+ .content-header {
762
+ margin-bottom: 24px;
763
+ padding-bottom: 16px;
764
+ border-bottom: 1px solid #f0f0f0;
765
+ }
766
+ .content-title {
767
+ font-size: 24px;
768
+ font-weight: 600;
769
+ color: var(--text-primary);
770
+ margin: 0;
771
+ }
772
+ .content-description {
773
+ color: #666;
774
+ margin-top: 8px;
775
+ }
776
+ .content-body {
777
+ height: 100%;
778
+ }
779
+ .bwg-view {
780
+ gap: 20px;
781
+ padding: 20px 30px;
782
+ }
783
+
784
+ /* 반응형 디자인 */
785
+ @media (max-width: 768px) {
786
+ .side-wrapper {
787
+ height: 100vh;
788
+ z-index: 1001;
789
+ transition: left 0.3s ease;
790
+ }
791
+ .side-wrapper.mobile-open {
792
+ left: 0;
793
+ }
794
+ .header-wrapper {
795
+ padding: 0 16px;
796
+ gap: 12px;
797
+ }
798
+ .header-search {
799
+ width: 200px;
800
+ }
801
+ .header-search .ant-auto-complete {
802
+ width: 100% !important;
803
+ }
804
+ .header-title {
805
+ font-size: var(--font-size-md);
806
+ flex: 1;
807
+ text-align: center;
808
+ }
809
+ .header-right {
810
+ gap: 8px;
811
+ }
812
+ }
813
+
814
+ /* MenuTab 전용 스타일링 */
815
+ .menu-tab-wrapper {
816
+ background: var(--bg-primary);
817
+ }
818
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav {
819
+ margin: 0;
820
+ padding: 10px 34px 0 29px;
821
+ height: 45px;
822
+ display: flex;
823
+ align-items: center;
824
+ justify-content: space-between;
825
+ }
826
+ .menu-tab-wrapper .ant-tabs-nav::before {
827
+ left: 29px;
828
+ bottom: 0;
829
+ border-bottom: 1px solid var(--border-color);
830
+ }
831
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
832
+ height: 35px;
833
+ flex: 1 !important;
834
+ align-items: flex-end;
835
+ }
836
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-nav-list {
837
+ display: flex;
838
+ align-items: center;
839
+ height: 100%;
840
+ flex-wrap: nowrap;
841
+ }
842
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab {
843
+ height: 100%;
844
+ border-radius: 10px 10px 0 0;
845
+ transition: all 0.3s ease;
846
+ padding: 0 10px 0 24px;
847
+ position: relative ;
848
+ background: #E7E9F4;
849
+ margin: 0 4px 0 0;
850
+ font-size: var(--font-size-sm);
851
+ color: #777;
852
+ border: 0;
853
+ }
854
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab .ant-tabs-tab-remove {
855
+ width: 20px;
856
+ height: 20px;
857
+ margin-right: 0;
858
+ margin-left: 10px;
859
+ color: #a1a1a1;
860
+ }
861
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
862
+ background: #dbdeec;
863
+ color: var(--text-secondary);
864
+ }
865
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-tab-active {
866
+ background: var(--bg-primary);
867
+ border: 2px solid var(--primary-color);
868
+ border-bottom: none;
869
+ .ant-tabs-tab-btn {
870
+ color:var(--primary-color);
871
+ text-shadow: none;
872
+ font-weight: var(--font-weight-bold);
873
+ }
874
+ }
875
+ /* MenuTab의 content-holder는 숨김 처리 (뷰 렌더링하지 않음) */
876
+ .menu-tab-wrapper .menu-tabs.ant-tabs .ant-tabs-content-holder {
877
+ display: none !important;
878
+ }
879
+
880
+ /* MenuTab 네비게이션 버튼 스타일링 */
881
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content {
882
+ display: flex;
883
+ align-items: center;
884
+ gap: 4px;
885
+ flex-shrink: 0;
886
+ white-space: nowrap;
887
+ overflow: hidden;
888
+ padding-bottom: 13px;
889
+ }
890
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content > div {
891
+ display: flex !important;
892
+ align-items: center !important;
893
+ gap: 4px !important;
894
+ flex-wrap: nowrap !important;
895
+ }
896
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn {
897
+ height: 20px !important;
898
+ width: 20px !important;
899
+ font-size: 12px !important;
900
+ display: flex !important;
901
+ align-items: center !important;
902
+ justify-content: center !important;
903
+ border: 0;
904
+ color: #bdbdbd;
905
+ box-shadow: none !important;
906
+ }
907
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:hover {
908
+ color: #5E5E5E;
909
+ }
910
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .ant-btn:disabled {
911
+ opacity: 0.5;
912
+ cursor: not-allowed;
913
+ background: none;
914
+ }
915
+ .menu-tab-wrapper .menu-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
916
+ margin-left: 11px;
917
+ }
918
+ .menu-nav-wrapper {
919
+ display: flex;
920
+ align-items: center;
921
+ gap: 4px;
922
+ }
923
+
924
+ /* landing-wrap */
925
+ .landing-wrap {
926
+ background: #f3f5f9;
927
+ position: absolute;
928
+ top: 0;
929
+ bottom: 0;
930
+ z-index: 4;
931
+ right: 0;
932
+ left: 0;
933
+ background: url('./assets/images/backgrounds/landing_bg.png') no-repeat;
934
+ background-size: cover;
935
+ }
936
+ .landing-wrap .content-tit {
937
+ position: absolute;
938
+ top: 51%;
939
+ left: 50.6%;
940
+ transform: translate(-50%, -50.6%);
941
+ padding-top: 20px;
942
+ color: #9c9d9e;
943
+ font-size: var(--font-size-xl);
944
+ }
945
+ .landing-wrap .content-tit:before {
946
+ position: absolute;
947
+ top: 0;
948
+ left: 50%;
949
+ display: inline-block;
950
+ width: 19px;
951
+ height: 1px;
952
+ background: #9c9d9e;
953
+ content: '';
954
+ transform: translateX(-50%);
955
+ }
956
+ /* 20210316수정 end */
957
+ .landing-wrap .inner {
958
+ position: relative;
959
+ height: 100%;
960
+ min-height: 600px;
961
+ }
962
+ .landing-wrap .page-tit {
963
+ position: absolute;
964
+ left: 3%;
965
+ bottom: 26%;
966
+ color: #6688ff;
967
+ font-size: 60px;
968
+ font-family: 'Poppins', sans-serif;
969
+ }
970
+ .landing-wrap .sub-tit {
971
+ position: absolute;
972
+ left: 3%;
973
+ bottom: 16%;
974
+ color: rgba(255, 255, 255, 0.7);
975
+ font-size: var(--font-size-xl);
976
+ line-height: 28px;
977
+ letter-spacing: -0.2px;
978
+ font-family: 'Poppins', sans-serif;
979
+ font-weight: 300;
980
+ }
981
+ .landing-wrap .content {
982
+ font-family: 'Poppins', sans-serif;
983
+ display: flex;
984
+ position: absolute;
985
+ line-height: 0;
986
+ bottom: 16%;
987
+ padding: 20px 22px;
988
+ width: 480px;
989
+ box-sizing: border-box;
990
+ background: rgba(255, 255, 255, 0.05);
991
+ right: 2%;
992
+ border-radius: var(--border-radius-xxxl);
993
+ backdrop-filter: blur(8px);
994
+ }
995
+ .landing-wrap .content dl {
996
+ position: relative;
997
+ width: 100%;
998
+ text-align: left;
999
+ box-sizing: border-box;
1000
+ }
1001
+ .landing-wrap .content dt {
1002
+ margin-bottom: 10px;
1003
+ padding-bottom: 10px;
1004
+ color: var(--text-white);
1005
+ font-size: 24px;
1006
+ line-height: initial;
1007
+ border-bottom: 1px solid rgba(255, 255, 255, 0.5);
1008
+ padding-left: 9px;
1009
+ }
1010
+ .landing-wrap .content dd {
1011
+ line-height: 20px;
1012
+ color: var(--text-white);
1013
+ font-size: 18px !important;
1014
+ font-weight: var(--font-weight-regular);
1015
+ letter-spacing: 0;
1016
+ padding-top: 6px;
1017
+ }
1018
+ .landing-wrap .content dd span {
1019
+ display: block;
1020
+ padding: 6px 0 6px 40px;
1021
+ position: relative;
1022
+ }
1023
+ .landing-wrap .content dd span:before {
1024
+ display: block;
1025
+ content: '';
1026
+ left: 9px;
1027
+ position: absolute;
1028
+ top: 5px;
1029
+ width: 20px;
1030
+ height: 20px;
1031
+ background: url(../images/common.png) no-repeat;
1032
+ background-position: -78px -177px;
1033
+ }
1034
+ .landing-wrap .content dd span + span:before {
1035
+ background-position: -100px -177px;
1036
+ }
1037
+
1038
+ /* 사이드바 토글 버튼 */
1039
+ .sider-toggle-wrapper {
1040
+ position: absolute;
1041
+ top: 9px;
1042
+ right: -25px;
1043
+ z-index: 1000;
1044
+ width: 25px;
1045
+ height: 41px;
1046
+ background-color: #ffffff;
1047
+ border: 1px solid #dddddd;
1048
+ border-radius: 0 10px 10px 0;
1049
+ display: flex;
1050
+ align-items: center;
1051
+ justify-content: center;
1052
+ cursor: pointer;
1053
+ box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
1054
+ transition: all 0.3s ease;
1055
+ }
1056
+
1057
+ .sider-toggle-btn .ant-btn {
1058
+ border-radius: 0 10px 10px 0;
1059
+ font-size: 12px;
1060
+ color: #787878;
1061
+ padding: 0;
1062
+ width: 100%;
1063
+ height: 100%;
1064
+ display: flex;
1065
+ align-items: center;
1066
+ justify-content: center;
1067
+ }
1068
+
1069
+ /* 퀵메뉴 */
1070
+ .quick-tab-container {
1071
+ width: 33px;
1072
+ height: 118px;
1073
+ background: #4C465D;
1074
+ border-radius: 15px 0px 0px 15px;
1075
+ box-shadow: 0 4px 4px rgba(61, 56, 98, 0.3);
1076
+ }
1077
+ .quick-tab-container:has(.expanded) {
1078
+ background: var(--primary-color);
1079
+ }
1080
+ .ant-btn.quick-tab-toggle-btn {
1081
+ width: 33px;
1082
+ height: 67px;
1083
+ margin: 11px 0 9px;
1084
+ border-radius: 15px 0px 0px 15px;
1085
+ position: absolute;
1086
+ top: 0;
1087
+ right: 0;
1088
+ cursor: pointer;
1089
+ background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
1090
+ background-repeat: no-repeat;
1091
+ background-position: center;
1092
+ }
1093
+ .ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):hover,
1094
+ .ant-btn.quick-tab-toggle-btn:not(.ant-btn-disabled):active {
1095
+ background-image: url(./assets/images/contents/icon/quick-tab-text.svg);
1096
+ background-repeat: no-repeat;
1097
+ background-position: center;
1098
+ background-color: transparent !important;
1099
+ }
1100
+ .quick-tab-drag-btn {
1101
+ position: absolute;
1102
+ bottom: 9px;
1103
+ right: 3px;
1104
+ width: 24px;
1105
+ height: 24px;
1106
+ border-radius: 50%;
1107
+ display: flex;
1108
+ align-items: center;
1109
+ justify-content: center;
1110
+ background: transparent url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
1111
+ }
1112
+ .quick-tab-drag-btn:hover {
1113
+ background: rgba(28, 24, 37, 0.2) url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
1114
+ }
1115
+ .quick-tab-container .quick-tab {
1116
+ background-color: var(--primary-color);
1117
+ }
1118
+ .quick-tab-item-inner {
1119
+ display: flex;
1120
+ flex-direction: column;
1121
+ align-items: center;
1122
+ border-radius: var(--border-radius-lg);
1123
+ text-align: center;
1124
+ }
1125
+ .quick-tab-item-inner .quick-tab-items-icon {
1126
+ display: flex;
1127
+ align-items: center;
1128
+ justify-content: center;
1129
+ }
1130
+ .quick-tab-item-inner .quick-tab-items-icon .anticon {
1131
+ font-size: 28px;
1132
+ }
1133
+ .quick-tab-item-inner .quick-tab-items:last-child {
1134
+ margin-bottom: 0;
1135
+ }
1136
+ .quick-tab-items-icon:has(.quick-overtime) {
1137
+ background: #EFEBFF;
1138
+ }
1139
+ .quick-tab-items-icon:has(.quick-business-trip) {
1140
+ background: #E3F6FF;
1141
+ }
1142
+ .quick-tab-items-icon:has(.quick-holiday) {
1143
+ background: #FFF0F5;
1144
+ }
1145
+ .quick-tab-items-title {
1146
+ font-size: 13px;
1147
+ font-weight: var(--font-weight-semibold);
1148
+ line-height: 16px;
1149
+ word-break: keep-all;
1150
+ color: var(--text-primary);
1151
+ }
1152
+ .quick-tab-add-icon {
1153
+ width: 30px;
1154
+ height: 30px;
1155
+ border-radius: 50%;
1156
+ display: flex;
1157
+ align-items: center;
1158
+ justify-content: center;
1159
+ }
1160
+ .quick-tab-add-icon:hover {
1161
+ background: rgb(28 ,24 ,37 , 0.2);
1162
+ }
1163
+ /* 퀵메뉴 스크롤 스타일 */
1164
+ .quick-tab-items-wrap::-webkit-scrollbar {
1165
+ width: 4px;
1166
+ }
1167
+ .quick-tab-items-wrap::-webkit-scrollbar-track {
1168
+ background: transparent;
1169
+ border-radius: 3px;
1170
+ }
1171
+ .quick-tab-items-wrap::-webkit-scrollbar-thumb {
1172
+ background: #d9d9d9;
1173
+ border-radius: 3px;
1174
+ border: 1px solid #f0f0f0;
1175
+ }
1176
+ .quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
1177
+ background: #bfbfbf;
1178
+ }
1179
+
1180
+ /* 잠금화면 */
1181
+ .lockscreen-form {
1182
+ text-align: center;
1183
+ }
1184
+ .lockscreen-form .lock-icon-wrap {
1185
+ width: 100%;
1186
+ height: 70px;
1187
+ margin-bottom: 15px;
1188
+ }
1189
+ .lockscreen-form .lock-icon-box {
1190
+ display: inline-block;
1191
+ width: 70px;
1192
+ height: 70px;
1193
+ border-radius: 15px;
1194
+ background: #fff url(./assets/images/contents/icon/ico-lockscreen.svg) no-repeat center;
1195
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
1196
+ }
1197
+ .lockscreen-form h2 {
1198
+ margin-bottom: 10px;
1199
+ font-size: 30px;
1200
+ color: #fff;
1201
+ }
1202
+ .lockscreen-form p {
1203
+ margin-bottom: 40px;
1204
+ font-size: 16px;
1205
+ color: #E2E2E2;
1206
+ }
1207
+ .lock-ipt-wrap .ant-otp {
1208
+ column-gap: 20px
1209
+ }
1210
+ .lock-ipt-wrap .ant-otp .ant-otp-mask-input {
1211
+ width: 44px;
1212
+ height: 44px;
1213
+ border-radius: 50px;
1214
+ opacity: .5;
1215
+ }
1216
+ .lock-ipt-wrap .ant-otp .ant-otp-mask-input:hover,
1217
+ .lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus,
1218
+ .lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus-within {
1219
+ border-color: #6449fc;
1220
+ box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
1221
+ }
1222
+
1223
+ .bwg-load-indicator { position: absolute !important; inset: 0 !important; z-index: 40; }
1224
+
1225
+ /* ────────────────────── 로딩 오버레이 (WAVE 스타일) ────────────────────── */
1226
+ .bwg-load-indicator { background: none !important; background-color: rgba(255,255,255,.6) !important; backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; }
1227
+ .bwg-load-indicator .bwg-load-wave { display: flex; align-items: flex-end; gap: 15px; height: 18px; }
1228
+ .bwg-load-indicator .bwg-load-wave span { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(180deg, #8bb1ff 0%, #a88bff 100%); box-shadow: 0 1px 2px rgba(0,0,0,.1); animation: rg-bounceY 900ms ease-in-out infinite; }
1229
+ .bwg-load-indicator .bwg-load-wave span:nth-child(2) { animation-delay: 120ms; }
1230
+ .bwg-load-indicator .bwg-load-wave span:nth-child(3) { animation-delay: 240ms; }
1231
+ @keyframes rg-bounceY { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(0); } }
1232
+ .bwg-load-indicator .bwg-load-title { font-weight: 700; letter-spacing: .06em; font-size: 16px; color: #3b3b3b; }
1233
+ .bwg-load-indicator .bwg-load-sub { font-size: 13px; color: #7a7a7a; }
1234
+