/* ==============================
   Left Sidebar - KRDS Publishing 스타일
   퍼블리싱 CSS (sys_mrb.css, core_component.css)에서
   제공하지 않는 추가 스타일만 정의
   ============================== */

.map_sidebar.active {
    z-index: 10000 !important;
}


/* ==============================
   사이드바 레이아웃 (Flex 분리)
   ============================== */

/* 사이드바 탭 영역 - 탭과 선택 레이어를 분리 */
.map_sidebar_tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* KRDS 탭 영역 - 상단 영역 */
.map_sidebar_tabs .krds-tab-area {
    flex: 1;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 탭 컨텐츠 래퍼 - 스크롤 영역 */
.map_sidebar_tabs .tab-conts-wrap {
    flex: 1;
    overflow-y: auto;
}

/* 새로고침 버튼 회전 애니메이션 */
.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==============================
   드래그 앤 드롭 스타일
   ============================== */

/* 드래그 중 레이어 아이템 */
.dragging {
    opacity: 0.5;
}

/* 드롭 존 기본 상태 */
[data-group-drop-zone] {
    min-height: 40px;
    border: 2px dashed transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* 드래그 시작 시 드롭 존 활성화 */
[data-group-drop-zone].drop-zone-ready {
    border-color: var(--krds-color-light-primary-70, #93c5fd);
    background-color: rgba(26, 92, 255, 0.02);
}

/* 드롭 존 호버 상태 */
[data-group-drop-zone].drop-zone-hover {
    border-color: var(--krds-color-light-primary-40, #1a5cff);
    background-color: rgba(26, 92, 255, 0.1);
}

/* 드롭 인디케이터 */
[data-group-drop-indicator] {
    display: none;
}

[data-group-drop-indicator].show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    color: var(--krds-color-light-primary-40, #1a5cff);
    font-size: 12px;
    background: rgba(26, 92, 255, 0.05);
    border-radius: 4px;
}

/* ==============================
   레이어 선택 상태
   ============================== */

/* 레이어 선택 상태 */
.layer-selected {
    border-color: var(--krds-color-light-primary-40, #1a5cff) !important;
    background: rgba(26, 92, 255, 0.05) !important;
}

/* 버튼 활성 상태 */
.layer-button-active {
    color: var(--krds-color-light-primary-40, #1a5cff) !important;
    background: rgba(26, 92, 255, 0.05) !important;
    border-radius: 4px;
}

/* ==============================
   빈 상태 표시 (퍼블리싱 -empty-text 패턴)
   ============================== */

#activeLayersEmpty,
#styleEmptyStateContainer {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    width: 100%;
    height: 100%;
    flex: 1;
    color: var(--krds-color-light-gray-40, #6b7280);
    text-align: center;
    font-size: 14px;
}

#activeLayersEmpty .svg-icon,
#styleEmptyStateContainer .svg-icon {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}

#activeLayersEmpty.show,
#styleEmptyStateContainer.show {
    display: flex;
}

/* ==============================
   레이어 이름 편집
   ============================== */

.layer-name-editing {
    background: var(--krds-light-color-surface-white, #fff);
    border: 1px solid var(--krds-color-light-gray-70, #d1d5db);
    border-radius: 4px;
    padding: 4px 8px;
}

/* 레이어 이름 입력 필드 */
.layer-name-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #fff;
    cursor: text;
}

.layer-name-input:focus {
    cursor: text;
}

/* ==============================
   그룹 내부 스타일
   ============================== */

/* 그룹 정보 텍스트 */
.layer-group-info {
    font-size: 12px;
    color: var(--krds-light-color-text-subtle, #6b7280);
    margin-bottom: 8px;
}

/* 그룹 하위 레이어 목록 */
.layer-group-children-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 그룹 하위 레이어 컨테이너 */
.layer-group-children {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 그룹 하위 레이어 아이템 - 공간 최소화 */
.layer-group-children .layer-group.no-accordion {
    margin: 0;
    padding: 0;
}

.layer-group-children .layer-depth2-inner-item {
    padding: 0;
    margin: 0;
}

.layer-group-children .layer-depth2-item {
    padding: 0;
    margin: 0;
}

.layer-group-children .layer-depth-box {
    padding: 2px 4px;
}

/* 퍼블리싱 마진 오버라이드 */
.layer-depth2.has-depth2-inner-item .layer-depth2-inner-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 그룹 드롭존 */
.layer-group-dropzone {
    min-height: 60px;
    border: 2px dashed var(--krds-color-light-gray-70, #d1d5db);
    border-radius: 8px;
    padding: 8px;
    transition: all 0.2s ease;
}

.layer-group-dropzone:hover {
    border-color: var(--krds-color-light-primary-70, #93c5fd);
    background-color: rgba(26, 92, 255, 0.02);
}

.layer-group-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #fff;
}

.layer-group-dropzone-text {
    font-size: 12px;
    color: #fff;
    margin-top: 8px;
}

/* ==============================
   패널 내 공통 스타일
   ============================== */



/* 필드/컬럼 아이템 */
.field-item,
.column-item {
    padding: 8px 12px;
    border: 1px solid var(--krds-color-light-gray-80, #e5e7eb);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.field-item:hover {
    background-color: var(--krds-color-light-gray-90, #f3f4f6);
}

.column-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-item label {
    flex: 1;
    cursor: pointer;
}

/* 드롭다운 비활성 아이템 */
.dropdown-item.disabled {
    color: var(--krds-light-color-text-subtle, #6b7280);
    cursor: not-allowed;
}

/* 가시성 버튼 활성 상태 */
.layer-eye.active {
    color: var(--krds-color-light-primary-40, #1a5cff);
}

/* ==============================
   레이어 펼치기/접기 화살표
   ============================== */

/* 레이어 chevron 아이콘 */
.recipe-layer-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    color: var(--krds-color-light-gray-40);
    transition: transform 0.25s ease;
}

/* 펼쳐진 상태 (is-open) */
.layer-group.is-open .recipe-layer-chevron {
    transform: rotate(180deg);
}

/* 호버 상태 */
.layer-button-group button:hover .recipe-layer-chevron {
    color: var(--krds-color-light-primary-40, #1a5cff);
}

/* ==============================
   레이어 상세 펼치기/접기 애니메이션
   ============================== */

/* 기본 상태 (접힘) - display 대신 max-height 사용 */
.layer-group .layer-depth2 {
    display: block !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-out, margin 0.25s ease-out, padding 0.25s ease-out;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* 펼쳐진 상태 */
.layer-group.is-open .layer-depth2 {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
    padding: 8px 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==============================
   레이어 영역 구분선 (드래그 가능)
   ============================== */

.layer-divider {
    height: 6px;
    background: var(--krds-color-light-gray-80, #e5e7eb);
    margin: 0;
    cursor: ns-resize;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.layer-divider:hover {
    background: var(--krds-color-light-gray-70, #d1d5db);
}

.layer-divider:active,
.layer-divider.dragging {
    background: var(--krds-color-light-primary-70, #93c5fd);
}

/* 구분선 중앙 핸들 표시 */
.layer-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 2px;
    background: var(--krds-color-light-gray-50, #9ca3af);
    border-radius: 2px;
}

/* ==============================
   선택 레이어 영역 (항상 표시)
   ============================== */

.active-layers-section {
    flex: 1;
    min-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.active-layers-section .box-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.active-layers-section .box-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0px 16px;
}

.active-layers-section .layer-group-wrapper {
    flex: 1;
    overflow-y: auto;
}

/* ==============================
   활성 레이어 상태 스타일
   ============================== */

/* 활성 레이어 선택 하이라이트 */
[data-active-layer-id].layer-selected {
    background: rgba(26, 92, 255, 0.05) !important;
    border-color: var(--krds-color-light-primary-40, #1a5cff) !important;
    box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.2);
}

/* 활성 레이어 hover */
[data-active-layer-id]:hover {
    background: var(--krds-color-light-gray-95, #f9fafb);
    cursor: pointer;
}

/* 선택된 레이어는 hover보다 우선 */
[data-active-layer-id].layer-selected:hover {
    background: rgba(26, 92, 255, 0.08) !important;
}

/* 버튼 그룹 (box-tit 내) */
.box-tit .btn-group {
    display: flex;
    gap: 4px;
}

/* box-tit 양쪽 정렬 */
.box-tit.between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==============================
   레이어 그룹 hover/active 상태
   ============================== */

/* layer-group.has-header 호버 효과 */
.layer-group.has-header>.layer-header {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 0.4rem;
}

.layer-group.has-header>.layer-header:hover {
    background-color: var(--krds-color-light-gray-90, #f1f3f5);
}

/* 마우스 클릭(active) 효과 */
.layer-group.has-header>.layer-header:active {
    background-color: var(--krds-color-light-gray-80, #e5e7eb);
}

/* 열린 상태에서 헤더 배경 */
.layer-group.has-header.is-open>.layer-header {
    background-color: var(--krds-color-light-gray-95, #f9fafb);
}

.layer-group.has-header.is-open>.layer-header:hover {
    background-color: var(--krds-color-light-gray-90, #f1f3f5);
}

.layer-group.has-header.is-open>.layer-header:active {
    background-color: var(--krds-color-light-gray-80, #e5e7eb);
}

#styleNameDuplicateMessage {
    color: var(--krds-color-light-secondary) !important;
    font-size: 1.1rem;
    margin-top: 0.4rem;
}

.form-error {
    color: var(--krds-color-light-secondary) !important;
    font-size: 1.1rem;
    margin-top: 0.4rem;
}

/* ==============================
   KRDS 페이지네이션 보완
   ============================== */

/* 페이지네이션 버튼 영역 */
.pagination-wrapper .krds-paging-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

/* KRDS 페이지네이션 중앙 정렬 */
.pagination-wrapper .krds-pagination {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

/* 페이지 링크 gap 조정 */
.pagination-wrapper .krds-pagination .page-links {
    gap: 0.4rem;
}

/* ==============================
   좌측 확장 패널 (layout_depth2_panel)
   퍼블리싱 sys_mrb.css 스타일 보완
   ============================== */

/* 패널 위치: 사이드바 오른쪽에 배치 */
.map_sidebar .layout_depth2_panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* has-depth2 상태에서도 탭 영역 항상 표시 (퍼블리싱 오버라이드) */
.map_sidebar.has-depth2 .map_sidebar_tabs {
    display: flex !important;
}

/* 2depth 패널 열릴 때 토글 버튼 위치 (사이드바 330px + 2depth 43rem) */
.map_sidebar.has-depth2.depth2-active .map_sidebar_toggle {
    right: auto !important;
    left: calc(330px + 43rem) !important;
    transition: left 0.3s ease;
}

/* 패널 숨김 상태 (PanelManager와 호환) */
#leftExpandPanel.hidden,
#leftExpandPanel.panel-hidden {
    display: none !important;
}

/* ==============================
   스타일 목록 - 적용 중인 스타일 하이라이트 (강조)
   ============================== */
#styleListContainer li.active {
    border-color: var(--krds-color-light-primary-40, #1a5cff) !important;
    border: 1px solid var(--krds-color-light-primary-40, #1a5cff) !important;
    box-shadow: 0 0 0 1px rgba(26, 92, 255, 0.3);
    padding: var(--krds-padding-3) var(--krds-padding-5);
}

/* 적용 중인 스타일의 체크 아이콘 색상 강조 */
#styleListContainer li.active .check-circle {
    color: var(--krds-color-light-primary-40, #1a5cff);
}

/* ==============================
   버튼 래퍼 스타일 (퍼블리싱 참고) - 하단 고정
   ============================== */