/**
 * right-sidebar.css
 * 우측 사이드바 보완 스타일
 * - 기본 스타일은 sys_uis.css, core_component.css에서 정의됨
 * - 여기서는 layer-group, 폼, 썸네일 등 추가 스타일 정의
 */

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

/* ==============================
   레이어 그룹 아코디언 스타일
   ============================== */

/* layer-depth2 기본 숨김 */
.map_rightbar .layer-group .layer-depth2 {
    display: none !important;
}

/* is-open일 때 layer-depth2 표시 */
.map_rightbar .layer-group.is-open .layer-depth2 {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ==============================
   layout_body 스크롤 설정
   ============================== */

/* has-fixed-bottom일 때 하단 버튼 영역 확보 */
.map_rightbar .layout_panel.has-fixed-bottom .layout_body {
    height: unset !important;
    padding-bottom: 1.2rem;
}

/* ==============================
   폼 요소 스타일
   ============================== */

.map_rightbar .form-wrap {
    display: flex;
    gap: 0.6rem;
}

.map_rightbar .form-wrap.col {
    flex-direction: column;
}

/* required 표시 - before만 사용 */
.map_rightbar .label.required::before {
    content: '*';
    color: var(--krds-color-light-danger-40, #dc2626);
    margin-right: 0.2rem;
}

/* after 제거 */
.map_rightbar .label.required::after {
    display: none;
}

.map_rightbar .form-message {
    font-size: 1.1rem;
    margin-top: 0.4rem;
    color: var(--krds-color-light-warning-30, #ffb114);
}

.map_rightbar .form-message.error {
    color: var(--krds-color-light-warning-30, #ffb114);
}

.map_rightbar .form-message.success {
    color: var(--krds-color-light-success-40, #16a34a);
}

/* 레시피 이름/설명 검증 메시지 - KRDS secondary 색상 사용 */
.map_rightbar #recipeNameDuplicateMessage,
.map_rightbar #recipeDescValidationMessage {
    color: var(--krds-color-light-secondary) !important;
    font-size: 1.1rem;
    margin-top: 0.4rem;
}

/* ==============================
   썸네일 미리보기
   ============================== */

.map_rightbar .thumbnail-preview {
    background-color: var(--krds-color-light-gray-90, #f1f3f5);
    border: 1px solid var(--krds-color-light-gray-70, #d1d5db);
    border-radius: 0.6rem;
    padding: 1rem;
    margin-top: 0.8rem;
}

.map_rightbar .thumbnail-preview.hidden {
    display: none;
}

.map_rightbar .thumbnail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.map_rightbar .thumbnail-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--krds-color-light-gray-20, #374151);
}

.map_rightbar .thumbnail-image img {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
}

.map_rightbar .thumbnail-filename {
    font-size: 1.1rem;
    color: var(--krds-color-light-gray-40, #6b7280);
    margin-top: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==============================
   빈 상태 메시지
   ============================== */

.map_rightbar .layer-empty-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
    text-align: center;
}

.map_rightbar .layer-empty-text .empty-text {
    font-size: 1.2rem;
    color: var(--krds-color-light-gray-40, #6b7280);
}

/* ==============================
   버튼 스타일 보완
   ============================== */

.map_rightbar .btn-wrap.has-two-line-button .krds-btn.two-line {
    line-height: 1.3;
    padding: 0.6rem 0.8rem;
    height: auto;
}

/* ==============================
   유틸리티 클래스
   ============================== */

.map_rightbar .hidden {
    display: none !important;
}

.map_rightbar .mt12 {
    margin-top: 1.2rem;
}

.map_rightbar .gap8 {
    gap: 0.8rem;
}

/* ==============================
   대시보드 아이템 스타일 (KRDS)
   ============================== */

/* 대시보드 아이템 컨테이너 */
.map_rightbar .dashboard-items-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* 대시보드 아이템 - layer-group no-accordion 기본 스타일 */
.map_rightbar .dashboard-item.layer-group.no-accordion {
    padding: 8px 12px;
}

/* layer-depth2-inner-item 패딩 제거 */
.map_rightbar .dashboard-item .layer-depth2-inner-item {
    padding: 0;
    margin: 0;
}

/* layer-depth2-item 패딩 제거 */
.map_rightbar .dashboard-item .layer-depth2-item {
    padding: 0;
    margin: 0;
}

/* layer-depth-box 스타일 */
.map_rightbar .dashboard-item .layer-depth-box {
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
}


.map_rightbar .dashboard-item.dashboard-item-editing .layer-header-label {
    color: var(--krds-color-light-primary-40, #1a5cff);
    font-weight: 600;
}

/* 드래그 핸들 커서 */
.map_rightbar .dashboard-item .drag-handle {
    cursor: move;
}

/* 드래깅 상태 */
.map_rightbar .dashboard-item.dragging {
    opacity: 0.5;
}

/* 비활성화된 버튼 */
.map_rightbar .dashboard-item .krds-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* layer-eye 아이콘 방향 반전 */
.map_rightbar .layer-eye {
    transform: scaleX(-1);
}

/* 보이기 버튼 활성 상태 */
.map_rightbar .dashboard-item .layer-eye.active {
    color: var(--krds-color-light-primary-40, #1a5cff);
}

/* 빈 상태 표시 */
.map_rightbar .dashboard-items-container .layer-empty-text.show {
    display: flex;
}

/* ==============================
   우측 사이드바 토글 버튼 아이콘 애니메이션
   ============================== */

/* 기본 상태: 화살표 왼쪽 방향 (닫혀있을 때) */
.map_rightbar .map_rightbar_toggle::before {
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.3s ease;
}

/* 1depth 열린 상태: 화살표 오른쪽 방향 */
.map_rightbar.active .map_rightbar_toggle::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* 2depth 열린 상태: 화살표 왼쪽 방향 */
/* .map_rightbar.active.has-depth2.depth2-active .map_rightbar_toggle::before {
    transform: translate(-50%, -50%) rotate(180deg);
} */

/* ==============================
   우측 사이드바 토글 버튼 위치
   ============================== */

/* 1depth 기본 상태 */
.map_rightbar .map_rightbar_toggle {
    transition: right 0.3s ease;
}

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

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

/* 기본 depth2 패널 스타일 */
.layout_depth2_panel {
    backdrop-filter: blur(4px);
    background-color: rgba(19, 20, 22, 0.9);
}

/* 패널 위치: 사이드바 왼쪽에 배치 */
.map_rightbar .layout_depth2_panel {
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 43rem;
    overflow-y: unset !important;
}

/* has-depth2 상태에서 패널 너비 */
.map_rightbar.has-depth2 .layout_depth2_panel {
    width: 43rem;
}

/* has-depth2 상태에서 제목 영역 스타일 */
.map_rightbar.has-depth2 .layout_header .title-text {
    font-size: 1.7rem;
}

.map_rightbar.has-depth2 .title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.map_rightbar.has-depth2 .title-area .ico-popup-close {
    background-size: 20px;
}

/* depth2 패널 body 스크롤 - flex로 남은 영역 채움 */
.map_rightbar .layout_depth2_panel .layout_body.col {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

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

/* depth2 패널 표시 상태 */
.map_rightbar.has-depth2.depth2-active .layout_depth2_panel {
    display: flex !important;
}