/* 🌟 복합 윈도우 패널 탭 바 전용 디자인 시스템 */
.panel-header-bar {
    display: flex; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0; justify-content: space-between; align-items: center; padding-right: 4px;
    width: 100%; box-sizing: border-box; /* 🌟 탭 바가 항상 가로 영역에 꽉 차도록 확장 */
    align-self: stretch; /* 🌟 확실하게 부모 프레임 폭을 100% 채우도록 강제 */
    height: 32px; /* 🌟 헤더 전체 높이를 슬림하고 샤프하게 축소 */
}

.panel-tabs-wrapper {
    /* 🌟 미관을 해치는 가로 스크롤바 강제 숨김 처리 */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    height: 100%; /* 🌟 다중 탭이 겹쳤을 때 뒤쪽 남는 공간과 높이를 꽉 채우도록 확장 */
}
.panel-tabs-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }

.view-tab-item {
    display: flex; justify-content: space-between; align-items: center; gap: 6px; 
    padding: 0 14px; background: transparent; border-radius: 6px 6px 0 0; cursor: grab; 
    font-weight: 600; color: #64748b; border: 1px solid transparent; border-bottom: none;
    transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; user-select: none;
    height: 28px; margin-top: auto; font-size: 0.9em; /* 🌟 탭 높이를 헤더에 맞춰 축소하고 하단 밀착 */
}
.view-tab-item:active { cursor: grabbing; }
.view-tab-item:hover { background: #e2e8f0; color: #1e293b; }
.view-tab-item.active-tab {
    background: #ffffff; color: #334155; font-weight: 700; 
    border: 1px solid #cbd5e1; border-bottom: 1px solid #ffffff; border-top: 3px solid #2c3e50;
    margin-bottom: -1px; z-index: 2;
    height: 29px; /* 🌟 활성화 시 하단 테두리를 덮기 위한 미세 보정 */
}

/* 🌟 패널 우측 상단 액션 버튼 그룹 (배치 변경 및 닫기) */
.panel-action-btn {
    width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;
    border-radius: 4px; font-size: 13px; color: #94a3b8; transition: all 0.2s; background: transparent; border: none; cursor: pointer;
    flex-shrink: 0;
}
.panel-action-btn:hover { background: #e2e8f0; color: #3b82f6; }
.panel-action-btn.close-btn:hover { background: #fee2e2; color: #ef4444; }

/* 🌟 탭이 하나뿐일 때는 '탭' 디자인을 벗고 깔끔한 단일 '타이틀 바(헤더)'로 자동 전환 */
.view-tab-item:only-child {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: #334155 !important;
    font-weight: 700 !important;
    flex: 1 1 100% !important; /* 🌟 혼자일 때 가로 영역 완벽히 꽉 채움 */
    height: 100% !important;   /* 🌟 혼자일 때 세로 높이 완벽히 꽉 채움 */
}
.view-tab-item:only-child:hover { background: transparent !important; }

.iframe-view {
    width: 100%; flex-grow: 1; border: none; border-top: 1px solid #f1f5f9; border-radius: 0 0 12px 12px; box-sizing: border-box; background: #ffffff; display: none;
}
.iframe-view.active-iframe { display: block; }

/* 🌟 외곽선 없는 모던 UI (Toss/Apple 스타일) 오버라이드 */
.workspace-frame-wrapper {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06), 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

/* 🌟 디버그 모드 (프레임 및 내부 뷰 외곽선 확인용) */
.workspace-frame-wrapper.debug-mode-active {
    border: 4px solid #e74c3c !important; /* 바깥쪽 래퍼 프레임: 빨간색 */
    padding: 4px !important;
}
.workspace-frame-wrapper.debug-mode-active .iframe-view {
    border: 4px solid #2ecc71 !important; /* 안쪽 IFrame 뷰: 초록색 */
    border-radius: 0 0 12px 12px;
}

/* 🌟 패널 분할 리사이저 슬라이더 */
.panel-resizer {
    background: transparent !important;
}
.panel-resizer:hover, .panel-resizer:active { background: transparent !important; }

/* 🌟 패널 전체화면(Maximize) 상태 클래스 */
/* 기존 분할 구조를 부수지 않고, 이 클래스가 붙은 패널만 절대 위치로 맨 앞에 꽉 차게 띄웁니다. */
.workspace-frame-wrapper.maximized-panel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 8000 !important;
}

/* 🌟 프레임 깜박임(Flicker) 방지용 스마트 숨김 클래스 */
/* display: none 대신 절대 위치와 투명도를 사용해 내부 차트 리사이즈 에러를 원천 차단합니다. */
.hidden-frame {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0 !important; visibility: hidden !important;
    pointer-events: none !important; z-index: -10 !important;
}