/* ===== css/style/style.01.css ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 측정 좌표 라벨 */
.measure-coord-label {
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}


#fillEyeDropperBtn:hover,
#strokeEyeDropperBtn:hover {
    border-color: #ccc !important;
    background: #f5f5f5 !important;
}

/* 측정 도구 버튼 hover */
/* 측정/줌 컨트롤 컨테이너: 짙은 회색 거의 불투명 */
#measureTools,
#zoomControls {
    background: rgba(45, 45, 45, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#measureTools button:not(.measure-active):hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#measureTools button:not(.measure-active):active {
    background: rgba(0, 0, 0, 0.35) !important;
}

#measureTools button.measure-active {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* 반경 커서 */
#map.measure-radius,
#map.measure-radius * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%232c3e50' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%232c3e50'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

/* 면적 커서 */
#map.measure-area,
#map.measure-area * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='4' y='4' width='16' height='16' fill='none' stroke='%232c3e50' stroke-width='2' rx='1'/%3E%3Ccircle cx='4' cy='4' r='2' fill='%232c3e50'/%3E%3Ccircle cx='20' cy='4' r='2' fill='%232c3e50'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%232c3e50'/%3E%3Ccircle cx='4' cy='20' r='2' fill='%232c3e50'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

/* 거리 커서 */
#map.measure-distance,
#map.measure-distance * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='4' y1='20' x2='20' y2='4' stroke='%232c3e50' stroke-width='2'/%3E%3Ccircle cx='4' cy='20' r='2.5' fill='%232c3e50'/%3E%3Ccircle cx='20' cy='4' r='2.5' fill='%232c3e50'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

/* 지점 커서 */
#map.measure-point,
#map.measure-point * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%236f42c1' stroke='%23ffffff' stroke-width='2'/%3E%3Cline x1='12' y1='2' x2='12' y2='6' stroke='%236f42c1' stroke-width='2'/%3E%3Cline x1='12' y1='18' x2='12' y2='22' stroke='%236f42c1' stroke-width='2'/%3E%3Cline x1='2' y1='12' x2='6' y2='12' stroke='%236f42c1' stroke-width='2'/%3E%3Cline x1='18' y1='12' x2='22' y2='12' stroke='%236f42c1' stroke-width='2'/%3E%3C/svg%3E") 12 12, crosshair !important;
}

/* 측정 모드 활성 시 기존 레이어(폴리곤/마커) 클릭 무시 — 지도 어디든 클릭해서 측정 좌표 찍을 수 있게.
   단, 측정 도구가 만든 marker (className 이 measure-* 로 시작) 는 예외 — 그 안에 "지우기" 등 버튼이 있어 클릭돼야 함.
   .leaflet-popup-pane 은 차단하지 않음 — Leaflet 팝업의 버튼도 정상 동작. */
#map.measure-radius .leaflet-interactive,
#map.measure-area .leaflet-interactive,
#map.measure-distance .leaflet-interactive,
#map.measure-point .leaflet-interactive {
    pointer-events: none !important;
}
/* 모든 marker-icon 차단하되 측정 도구가 만든 measure-* 클래스 marker 는 제외 */
#map.measure-radius .leaflet-marker-icon:not([class*="measure-"]),
#map.measure-area .leaflet-marker-icon:not([class*="measure-"]),
#map.measure-distance .leaflet-marker-icon:not([class*="measure-"]),
#map.measure-point .leaflet-marker-icon:not([class*="measure-"]) {
    pointer-events: none !important;
}
/* 측정 도구 라벨 (measure-*-label / measure-coord-label 등) 안의 버튼은 항상 클릭 가능 */
.leaflet-marker-icon[class*="measure-"] {
    pointer-events: auto !important;
}
.leaflet-marker-icon[class*="measure-"] button,
.leaflet-marker-icon[class*="measure-"] a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

body {
    font-family: 'Pretendard', -apple-system, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

header {
    background-color: #344d6e;
    color: white;
    padding: 10px 20px;
    margin-bottom: 0;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin-bottom: 10px;
    margin-top: 6px;
    font-size: 1.5em;
    cursor: pointer;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #34495e;
}

/* 햄버거 토글 버튼 (기본 숨김) */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 26px;
}
.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 모바일 헤더 반응형 (햄버거 메뉴) — 세로/가로 모드 둘 다 */
@media (max-width: 768px), (max-height: 500px) {
    header {
        padding: 10px 14px;
        flex-wrap: wrap;
    }
    header h1 {
        font-size: 1.15em;
        margin: 0;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    header nav,
    header .auth-section {
        display: none;
        flex-basis: 100%;
        width: 100%;
    }
    header.mobile-menu-open nav {
        display: block;
        border-top: 1px solid rgba(255,255,255,0.15);
        margin-top: 10px;
        padding-top: 8px;
    }
    header.mobile-menu-open .auth-section {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 8px;
    }
    header nav ul {
        flex-direction: column;
        gap: 4px;
        padding: 0;
        margin: 0;
    }
    header nav a {
        display: block;
        padding: 10px 12px;
        font-size: 0.95em;
        border-radius: 4px;
    }
    /* 햄버거 → X 변환 */
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* 가로 회전 힌트 (기본 숨김 — 모바일 세로에서만 표시) */
.rotate-hint {
    display: none;
}

/* Canvas layer popup styling - ensure popups appear above canvas */
.track-popup .leaflet-popup-content-wrapper {
    z-index: 10000 !important;
}

.track-popup .leaflet-popup-tip {
    z-index: 10000 !important;
}

.leaflet-popup-pane {
    z-index: 10000 !important;
}

.track-canvas-layer {
    z-index: 200 !important;
    cursor: grab;
}

.track-canvas-layer:active {
    cursor: grabbing;
}

.leaflet-popup {
    z-index: 10000 !important;
}

.water-quality-legend,
.sediment-legend {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
    color: #172033;
    font: 12px/1.35 'Pretendard', 'Segoe UI', sans-serif;
    padding: 10px 12px;
}

/* Map container cursor styling */
#map {
    cursor: grab;
}

#map:active {
    cursor: grabbing;
}

.leaflet-container {
    cursor: grab !important;
}

.leaflet-container:active {
    cursor: grabbing !important;
}

.leaflet-dragging .leaflet-container {
    cursor: grabbing !important;
}

.auth-section {
    display: flex;
    gap: 10px;
    align-items: center;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.section {
    display: none;
    flex: 1;
    background-color: white;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 0;
}

.section.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Sidebar Resizer Styles */
.sidebar-resizer {
    position: absolute;
    top: 0;
    left: 350px;
    width: 10px;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize !important;
    z-index: 1000;
    background: transparent;
}

.resizer-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 80px;
    background: #888;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
    cursor: ew-resize;
    z-index: 9999;
}

.resizer-icon {
    font-size: 16px;
    color: #666;
    font-weight: normal;
    user-select: none;
    pointer-events: none;
}

.sidebar-resizer:hover .resizer-handle {
    background: #007bff;
    width: 6px;
    transform: translate(-50%, -50%);
}

.sidebar-resizer.dragging .resizer-handle {
    background: #0056b3;
    width: 8px;
    transform: translate(-50%, -50%);
}

/* Hide resizer when sidebar is collapsed */
.map-container.sidebar-collapsed .sidebar-resizer {
    display: none;
}

/* 모바일: 사이드바를 바텀시트로 — 세로/가로 모드 둘 다 */
@media (max-width: 768px), (max-height: 500px) {
    .map-sidebar {
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 55vh;
        height: 55dvh;
        max-height: 80vh;
        max-height: 80dvh;
        border-radius: 0;
        border: none;
        transition: transform 0.3s ease;
        /* display: block로 override해서 자식들이 자연스럽게 흐르도록 */
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-top: 6px; /* 바는 시트 위에 분리되어 있으므로 최소 여백만 */
    }
    .map-sidebar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    /* 접힘 상태: 시트를 화면 밖으로 완전히 내리고 바만 보이게 */
    .map-sidebar.collapsed {
        transform: translateY(100%) !important;
    }
    .sidebar-resizer {
        display: none !important;
    }
    /* 토글 버튼 → 시트 바로 위 드래그 영역 (시트와 겹치지 않게) */
    .sidebar-toggle {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 55dvh !important;
        transform: none !important;
        width: 100% !important;
        height: 24px !important;
        padding: 0 !important;
        background: rgba(0, 40, 80, 0.55) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: none !important;
        border-radius: 16px 16px 0 0 !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }
    /* 드래그 영역 안에 가로줄 표시 (absolute 중앙정렬로 고정) */
    .sidebar-toggle::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: rgba(255,255,255,0.55);
        border-radius: 3px;
    }
    .sidebar-toggle:hover,
    .sidebar-toggle:focus,
    .sidebar-toggle:active {
        transform: none !important;
        background: rgba(0, 40, 80, 0.55) !important;
        outline: none !important;
    }
    .sidebar-toggle.collapsed {
        transform: translateY(55dvh) !important;
    }
    /* 화살표 숨김 */
    .sidebar-toggle .toggle-icon {
        display: none !important;
    }

    /* 모바일에선 좌표 표시 패널, 줌 컨트롤, 측정 도구, Leaflet attribution, 하단 상태바 숨김 */
    #mapBoundsPanel,
    #zoomControls,
    #measureTools,
    .leaflet-control-attribution,
    .status-bar {
        display: none !important;
    }
    /* 모바일: 차트 내부 색상 셀렉터 축소 */
    .color-controls {
        padding: 3px 6px !important;
        gap: 4px !important;
        top: 4px !important;
        right: 4px !important;
    }
    .color-controls label {
        font-size: 10px !important;
    }
    .color-controls .color-preset-select,
    .color-controls select {
        min-width: 0 !important;
        max-width: 120px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
    /* 컨트롤바의 색상 드롭다운 축소 */
    #mooringColorBtn {
        min-width: 0 !important;
        padding: 2px 5px !important;
        gap: 3px !important;
    }
    #mooringColorBtn > span:first-child {
        font-size: 0.7em !important;
    }
    #mooringColorBtn > div {
        width: 40px !important;
        height: 10px !important;
    }
    #mooringColorBtn > span:last-child {
        font-size: 6px !important;
    }

    /* 모바일 공통: 컨트롤바 요소 컴팩트 (여유 공간 생겨서 약간 키움) */
    .chart-control-bar {
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .chart-control-bar__title {
        font-size: 0.9em !important;
    }
    .chart-control-bar__label {
        font-size: 0.7em !important;
    }
    .chart-control-bar__select {
        font-size: 0.7em !important;
        max-width: 110px !important;
        padding: 3px 5px !important;
    }
    .chart-control-bar__divider {
        margin: 0 2px !important;
        height: 16px !important;
    }
    .chart-toggle-label {
        font-size: 0.65em !important;
    }
    .chart-toggle-btn {
        padding: 2px 6px !important;
        font-size: 0.62em !important;
        min-width: 30px !important;
    }
    .chart-toggle-group {
        gap: 3px !important;
    }
    .chart-attribute-bar {
        gap: 4px !important;
    }

    /* 모바일에서 차트 모달 크기 맞춤 */
    .chart-modal-wrapper {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
    }
    .chart-modal-content {
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
    .chart-modal-body {
        padding: 8px !important;
    }
    #chartCanvas {
        min-height: 0 !important;
        height: auto !important;
    }
    /* 가로 회전 힌트 (세로 모드에서만 표시) */
    .rotate-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(52, 152, 219, 0.95);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 500;
    }
    .rotate-hint-close {
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 0 4px;
        opacity: 0.85;
    }
    /* 가로 모드: 힌트 숨김 + 차트 JS로 동적 스케일 (가로 스크롤 금지) */
    @media (orientation: landscape) {
        .rotate-hint {
            display: none !important;
        }
        .chart-modal-body {
            overflow: hidden !important;
            padding: 4px !important;
        }
    }

    /* 모바일에서 Leaflet 팝업 크기 축소 */
    .leaflet-popup-content-wrapper {
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }
    .leaflet-popup-content {
        margin: 8px 10px !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        max-width: 220px !important;
    }
    .leaflet-popup-close-button {
        font-size: 16px !important;
        padding: 2px 4px !important;
    }
    /* 팝업 내부 버튼, 인풋, 셀렉트: 가로폭만 내용에 맞춤, 글자는 보통 크기 */
    .leaflet-popup-content button,
    .leaflet-popup-content input,
    .leaflet-popup-content select,
    .leaflet-popup-content a {
        font-size: 13.5px !important;
        padding: 6px 12px !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
        width: auto !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }
    /* 팝업 안의 모든 요소 max-width 제한 + min-width 해제 */
    .leaflet-popup-content * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .leaflet-popup-content > div {
        min-width: 0 !important;
        width: auto !important;
    }
    /* 팝업 내부의 flex 컨테이너(버튼 묶음)가 wrap 되도록 */
    .leaflet-popup-content div[style*="display:flex"],
    .leaflet-popup-content div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 3px !important;
    }
    .leaflet-popup-content table {
        font-size: 0.78em !important;
    }
    .leaflet-popup-content h1,
    .leaflet-popup-content h2,
    .leaflet-popup-content h3,
    .leaflet-popup-content h4 {
        font-size: 0.9em !important;
        margin: 3px 0 !important;
    }
    /* 팝업 제목(첫 strong)만 작게 */
    .leaflet-popup-content > strong:first-child,
    .leaflet-popup-content strong:first-of-type {
        font-size: 0.85em !important;
    }
    /* buildPopupTable 팝업의 제목 헤더 */
    .leaflet-popup-content > div > div:first-child {
        font-size: 0.9em !important;
        font-weight: 600 !important;
        padding-bottom: 3px !important;
        margin-bottom: 5px !important;
    }
    /* 초기화 버튼을 상단(헤더 바로 아래)으로 이동, 아이콘만 */
    .map-reset-button-container {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
    }
    .map-reset-btn span {
        display: none !important;
    }
    .map-reset-btn {
        min-width: 0 !important;
        padding: 8px 10px !important;
        gap: 0 !important;
    }

    /* 중첩 플렉스/스크롤 해제 → 시트 전체가 하나의 스크롤 컨테이너 */
    /* display 속성은 JS가 탭 전환에 사용하므로 건드리지 않음 */
    .map-sidebar .search-form-container {
        height: auto !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-bottom: 30px;
    }
    .tab-wrapper {
        height: auto !important;
        flex: none !important;
    }
    .tab-content.active,
    #track-tab.active,
    #favorites-tab.active {
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .map-search-results {
        overflow-y: visible !important;
        flex: none !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}

/* 세로 모드 모바일 전용: 차트 데이터 명을 컨트롤바 위 별도 줄로 */
@media (orientation: portrait) and (max-width: 768px) {
    .chart-control-bar {
        flex-wrap: wrap !important;
    }
    .chart-control-bar__left {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 4px;
        margin-bottom: 4px;
        overflow: hidden !important;
    }
    .chart-control-bar__right {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
    .chart-control-bar__title {
        max-width: 100% !important;
    }
    /* 서브차트 2개를 세로로 쌓기 (3줄 레이아웃: heatmap / avg / index) */
    .adcp-sub-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    .adcp-sub-row > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0;
    }
    /* heatmap wrapper — padding 사용 금지 (canvas 가 % 기준으로 올라가서 축 밖으로 빠짐) */
    .adcp-heatmap-wrapper {
        margin-bottom: 0 !important;
    }
    /* 컬러바 min/max 입력 패널 축소 */
    .legend-range-panel input {
        width: 42px !important;
        padding: 2px 3px !important;
        font-size: 10px !important;
    }
    .legend-range-panel span {
        font-size: 9px !important;
        min-width: 20px !important;
    }
    .legend-range-panel > div {
        gap: 3px !important;
    }
    .legend-range-panel > div > div {
        gap: 2px !important;
    }
}

/* 모바일 가로 모드: 왼쪽 사이드 패널로 전환 */
@media (orientation: landscape) and (max-height: 500px) {
    .map-sidebar {
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 43% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        transform: none;
    }
    .map-sidebar.collapsed {
        transform: translateX(-100%) !important;
    }
    /* 토글 → 완전 투명, 가운데 세로줄 하나만 보이게 */
    .sidebar-toggle {
        top: 50% !important;
        bottom: auto !important;
        left: calc(43% - 24px) !important;
        right: auto !important;
        width: 24px !important;
        height: 60px !important;
        transform: translateY(-50%) !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
    }
    .sidebar-toggle.collapsed {
        transform: translateY(-50%) !important;
        left: 0 !important;
    }
    .sidebar-toggle:hover,
    .sidebar-toggle:focus,
    .sidebar-toggle:active {
        background: transparent !important;
    }
    .sidebar-toggle::before {
        width: 5px !important;
        height: 40px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

.map-container {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    min-height: 0;
    max-height: none;
    margin-left: 0;
}

/* When sidebar is collapsed, expand map to full width */
.map-container.sidebar-collapsed #map {
    margin-left: 0;
}

.map-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 350px;
    min-width: 250px;
    max-width: 600px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid rgba(221, 221, 221, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    flex-shrink: 0;
}

/* 사이드바 내부 반투명 처리 (사이드바 자체 제외) */
.map-sidebar .search-form-container,
.map-sidebar .tab-container,
.map-sidebar .tab-wrapper,
.map-sidebar .tab-content,
.map-sidebar .tab-content.active,
.map-sidebar .favorites-content,
.map-sidebar .favorites-sub-tabs,
.map-sidebar .sub-tab-content,
.map-sidebar .sub-tab-content.active,
.map-sidebar .collapsible-header,
.map-sidebar .collapsible-content,
.map-sidebar .map-search-results,
.map-sidebar .results-content,
.map-sidebar .favorites-workspace-item,
.map-sidebar .favorites-category-header,
.map-sidebar .favorites-category-content,
.map-sidebar .favorite-tree-item,
.map-sidebar .favorite-tree-content {
    background: transparent !important;
}
/* 조회조건 박스 + 결과 박스 불투명 유지 */
.map-sidebar .search-form {
    background: transparent !important;
}
.map-sidebar .map-search-results {
    background: rgba(255, 255, 255, 0.08) !important;
}

.map-sidebar .search-form-container {
    background: transparent;
    border-bottom: none;
    padding: 15px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: calc(100% - 15px);
    overflow: hidden;
}

.map-sidebar .search-form-container h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
}

.map-sidebar .search-form .form-group {
    margin-bottom: 10px;
}

.map-sidebar .search-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85em;
}

.map-sidebar .search-form .form-group input,
.map-sidebar .search-form .form-group select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    box-sizing: border-box;
}

.map-sidebar .search-btn {
    width: 100%;
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

/* ===== css/style/style.02.css ===== */
.map-sidebar .search-btn:hover {
    background: #2980b9;
}

.map-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    min-height: 0;
}

.map-search-results .table-card {
    margin-bottom: 8px;
    padding: 15px;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid #3498db;
}

.map-search-results .table-card .card-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.map-search-results .table-card .card-right {
    flex-shrink: 0;
    margin-left: 15px;
}

.map-search-results .table-header {
    margin-bottom: 5px;
    align-items: center;
    display: flex;
}

.map-search-results .table-header h3 {
    font-size: 0.9em;
    margin: 0;
    color: #2c3e50;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.map-search-results .table-description {
    font-size: 0.8em;
    margin: 0;
    color: #666;
    line-height: 1.4;
}

.map-search-results .view-table-btn {
    padding: 8px 16px;
    font-size: 0.85em;
    margin: 0;
    white-space: nowrap;
}

.search-bar {
    margin: 15px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.search-bar input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.search-bar button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-bar button:hover {
    background-color: #2980b9;
}

table {
    width: 100%;
    border-collapse: collapse;
    flex: 1;
    overflow-y: auto;
}

.table-container {
    flex: 1;
    overflow-y: auto;
    margin: 0 15px 15px 15px;
}

table th,
table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

table tr:hover {
    background-color: #f8f9fa;
}

.form-group {
    margin-bottom: 15px;
}

.form-container {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
}

button[type="submit"] {
    background-color: #27ae60;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #229954;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.btn-edit,
.btn-delete {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.btn-edit {
    background-color: #f39c12;
    color: white;
}

.btn-delete {
    background-color: #e74c3c;
    color: white;
}

.btn-edit:hover {
    background-color: #e67e22;
}

.btn-delete:hover {
    background-color: #c0392b;
}

.catalog-container {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    width: 100%;
}

.catalog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.catalog-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.catalog-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.catalog-item.selected {
    border-color: #3498db;
    background-color: #f8f9fa;
}

.catalog-item h3 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.catalog-item .item-id {
    background: #e74c3c;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    display: inline-block;
    margin-bottom: 10px;
}

.catalog-item .item-details {
    margin: 10px 0;
}

.catalog-item .item-details span {
    display: block;
    margin: 5px 0;
    color: #555;
    font-size: 0.9em;
}

.catalog-item .item-details strong {
    color: #2c3e50;
}

.catalog-item .view-on-map {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.catalog-item .view-on-map:hover {
    background-color: #2980b9;
}

/* Main Catalog Styles */
.main-catalog-grid {
    display: flex;
    justify-content: center;
    padding: 40px;
}

.main-catalog-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.main-catalog-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.main-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.main-catalog-item h2 {
    margin: 0 0 20px 0;
    font-size: 2em;
    font-weight: 300;
}

.main-stats {
    display: flex;
    justify-content: space-around;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9em;
    opacity: 0.8;
}

.main-description {
    margin: 20px 0 30px 0;
    opacity: 0.9;
    line-height: 1.5;
}

.explore-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.explore-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
}

/* Tables Grid Styles */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 25px;
    padding: 20px;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    justify-items: stretch;
}

.table-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.table-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #3498db;
}

.table-card.empty-table {
    opacity: 0.6;
    cursor: not-allowed;
}

.table-card.empty-table:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #e0e0e0;
}

.table-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 10px;
}

.table-icon {
    font-size: 1.1em;
    margin-right: 8px;
    margin-top: 0px;
    color: #3498db;
    flex-shrink: 0;
}

.table-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
    flex: 1;
}

.table-info {
    flex: 1;
    margin-bottom: 12px;
    text-align: left;
}

.table-description {
    color: #555;
    font-size: 0.95em;
    line-height: 1.5;
    margin-left: 22px;
    margin-top: 8px;
}

.date-range {
    white-space: nowrap;
    display: inline-block;
}



.table-empty {
    color: #999;
    font-style: italic;
    font-size: 0.7em;
    margin-left: 20px;
}


.view-table-btn {
    background: #34495e;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.0em;
    font-weight: 500;
    transition: background-color 0.3s;
    width: 100%;
    margin-top: auto;
}

.view-table-btn:hover:not(:disabled) {
    background: #1a252f;
}

.view-table-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

/* Header Back Button Styles */
.search-bar h2 button {
    background: none !important;
    border: none !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    margin-right: 10px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
}

.search-bar h2 button:hover {
    background-color: #ecf0f1 !important;
}

/* Search Form Styles */
.search-form-container {
    background: white;
    border-radius: 0;
    padding: 20px;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

.search-form .form-row {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
}

.search-form .form-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.search-form .form-group label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.search-form .form-group input,
.search-form .form-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

.search-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
    height: fit-content;
}

/* Search buttons inside search-buttons container should have consistent height */
.search-buttons .search-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
}

.search-btn:hover {
    background: #2980b9;
}

.search-results {
    min-height: 200px;
}

.results-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.results-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
}

.no-results {
    text-align: center;
    padding: 40px;
    color: #666;
}

.error-message {
    text-align: center;
    padding: 40px;
    color: #e74c3c;
    background: #fdf2f2;
    border-radius: 8px;
    border: 1px solid #fecaca;
}

/* Checkbox and Controls Styles */
.table-checkbox {
    margin-right: 10px;
    flex-shrink: 0;
}

.table-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.results-controls {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.show-selected-btn {
    background: #34495e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

.show-selected-btn:hover:not(:disabled) {
    background: #1a252f;
}

.show-selected-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
}

.select-all-btn, .clear-all-btn {
    background: #34495e;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
}

.select-all-btn:hover, .clear-all-btn:hover {
    background: #1a252f;
}

.clear-all-btn {
    background: #6B7280;
}

.clear-all-btn:hover {
    background: #4B5563;
}

.bulk-download-btn {
    border-radius: 4px;
    border: none;
}

/* Attribute Section Styles */
.attribute-section {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 15px;
    flex-shrink: 0;
}

.attribute-section h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.0em;
    font-weight: 600;
}

.attribute-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attribute-controls .form-group {
    margin-bottom: 0;
}

.attribute-controls .form-group label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.8em;
}

.attribute-controls .form-group select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0.8em;
    box-sizing: border-box;
}

/* Custom checkbox for sidebar */
#observationSearchResults input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

#observationSearchResults input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 3.5px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    box-sizing: border-box;
    opacity: 0;
}

#selectAllCheckbox {
    width: 14px !important;
    height: 14px !important;
}

#selectAllCheckbox::after {
    top: 1px !important;
    left: 4px !important;
    width: 4px !important;
    height: 7px !important;
    border-width: 0 1.5px 1.5px 0 !important;
}

#selectAllCheckbox:indeterminate::after {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 7px !important;
    height: 0 !important;
    border-width: 0 0 1.5px 0 !important;
}

#observationSearchResults input[type="checkbox"]:checked {
    background: #5a9ab5;
    border-color: #5a9ab5;
}

#observationSearchResults input[type="checkbox"]:checked::after {
    opacity: 1;
}

#observationSearchResults input[type="checkbox"]:indeterminate {
    background: #5a9ab5;
    border-color: #5a9ab5;
}

#observationSearchResults input[type="checkbox"]:indeterminate::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 0;
    border: solid white;
    border-width: 0 0 1.5px 0;
    opacity: 1;
}

/* Result row - single line layout */
.result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.15s;
    /* 화면 밖 행은 렌더/레이아웃을 건너뜀 — 결과가 수천 건일 때 렌더·페인트 비용 급감(가상스크롤 효과) */
    content-visibility: auto;
    contain-intrinsic-size: auto 37px;
}

.result-row:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.result-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* 선택된 행: hover와 동일한 강조 톤 유지 (식별용 강조는 지도 마커에서 처리) */
.result-row.selected {
    background: rgba(255, 255, 255, 0.15);
}
.result-row.selected:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* 선택된 관측 데이터 마커 위에 띄우는 푸른 링 오버레이 — 좌표가 비슷한 마커가 여러 개
   보여도 어느 게 선택한 데이터인지 식별. 지도에 직접 올리는 별도 마커라 클러스터/캔버스와 무관.
   바깥(.obs-highlight-ring)은 Leaflet 이 transform 으로 위치를 잡으므로 펄스 애니메이션은 안쪽에만. */
/* 관측 마커 선택 글로우는 JS(_highlightObservationMarker)에서 퇴적상/수질과 동일한
   drop-shadow 필터로 처리한다(별도 CSS 불필요). */

.result-row-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    font-size: 0.73em;
    color: #333;
}

.result-row-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    margin-left: 6px;
    color: #ffffff;
    line-height: 1.3;
}

.result-row-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 8px;
}

.row-action-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    transition: color 0.15s, background 0.15s;
    position: relative;
}

.row-action-btn::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s;
}

.row-action-btn:hover::after {
    opacity: 1;
}

.row-action-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.row-action-delete:hover {
    color: #922b2b;
    background: #f5dede;
}

/* Map sidebar controls */
.map-results-controls {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.map-results-list .table-card {
    margin-bottom: 8px;
    padding: 10px;
}

.map-results-list .table-header {
    align-items: center;
    margin-bottom: 5px;
}

.map-results-list .table-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Chart Modal Styles */

/* ===== css/style/style.03.css ===== */
.chart-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.chart-modal-wrapper {
    display: flex;
    margin: 1% auto;
    width: 93%;
    max-width: 1200px;
    max-height: 96vh;
    gap: 0;
    justify-content: center;
    position: relative;
}

/* ADCP 외 차트 — 모달 wrapper를 viewport 중앙으로 */
.chart-modal-wrapper:not(:has(#adcpMooringChartContainer)) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.chart-modal-content {
    background-color: #fefefe;
    padding: 0;
    border: none;
    width: 100%;
    max-width: 1000px;
    max-height: 96vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ADCP Mooring chart 전용 — 모달을 더 크게 */
.chart-modal-wrapper:has(#adcpMooringChartContainer) {
    margin: 10px auto;
    height: 900px;
    max-height: calc(100vh - 20px);
}
.chart-modal-content:has(#adcpMooringChartContainer) {
    height: 900px;
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

.ctd-casting-side-panel {
    display: none;
    width: 180px;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    border: 1px solid #ddd;
    border-left: none;
    overflow: visible;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 58px;
    left: min(calc(50% + 500px), 100%);
    z-index: 10;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease,
                background 0.35s ease;
}
.ctd-casting-side-panel.collapsed {
    width: 0;
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}
.ctd-casting-side-panel.collapsed .ctd-panel-toggle {
    right: auto;
    left: 0;
}
/* 패널 콘텐츠 */
.ctd-casting-side-panel #ctdPanelContent,
.ctd-casting-side-panel #trackingPanelContent {
    height: 680px;
}
/* 토글 버튼 (패널 오른쪽 바깥) */

.ctd-panel-toggle {
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 40px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 12px;
    color: #888;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.ctd-panel-toggle:hover {
    background: #e0e0e0;
    color: #555;
}

/* 사이드 패널이 보일 때 모달 오른쪽 모서리 직각 (collapsed가 아닐 때만) */
.chart-modal-wrapper:has(.ctd-casting-side-panel[style*="display: block"]:not(.collapsed)) .chart-modal-content {
    border-radius: 8px 0 0 8px;
}
/* 패널 열릴 때 헤더 오른쪽 모서리 직각 */
.chart-modal-wrapper:has(.ctd-casting-side-panel[style*="display: block"]:not(.collapsed)) .chart-modal-header {
    border-radius: 8px 0 0 0;
}

.chart-modal-header {
    background: #2c3e50;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.chart-modal-close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.chart-modal-close:hover {
    opacity: 0.7;
}

/* Chart control bar */
.chart-control-bar {
    display: flex;
    align-items: center;
    padding: 14px 12px;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    gap: 6px;
    flex-wrap: nowrap;
    font-family: 'Pretendard', -apple-system, sans-serif;
    overflow: visible;
}

.chart-control-bar__left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.chart-control-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.chart-control-bar__divider {
    width: 1px;
    height: 18px;
    background: #d1d5db;
    margin: 0 2px;
}

.chart-control-bar__label {
    font-size: 0.78em;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.chart-control-bar__select {
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.76em;
    color: #2c3e50;
    background: white;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    max-width: 250px;
    text-overflow: ellipsis;
}

.chart-control-bar__select:focus {
    border-color: #2c3e50;
}

.chart-control-bar__title {
    font-size: 1.08em;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.chart-control-bar__left {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}

.chart-control-bar__right {
    flex-shrink: 0;
}

/* Chart attribute bar (toggle groups) */
.chart-attribute-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    background: transparent;
    border: none;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.chart-toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-toggle-label {
    font-size: 0.78em;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.chart-toggle-buttons {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.chart-toggle-btn {
    padding: 4px 9px;
    font-size: 0.77em;
    font-weight: 500;
    border: none;
    background: white;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #ddd;
    border-radius: 0;
    font-family: inherit;
    min-width: 42px;
    text-align: center;
    box-sizing: border-box;
}

.chart-toggle-btn:last-child {
    border-right: none;
}

.chart-toggle-btn.active {
    background: #2c3e50;
    color: white;
}

.chart-toggle-btn:hover:not(.active) {
    background: #e9ecef;
    color: #2c3e50;
}

#trackingControlBar {
    margin-top: 8px;
}

#trackingChart .brush .selection {
    fill: #777;
    fill-opacity: 0.3;
    stroke: none;
    rx: 0;
}

#trackingChart .brush .handle {
    fill: #777;
    rx: 0;
}

.legend-range-panel input[type="number"]::-webkit-inner-spin-button,
.legend-range-panel input[type="number"]::-webkit-outer-spin-button {
    opacity: 0;
    transition: opacity 0.15s;
}

.legend-range-panel input[type="number"]:hover::-webkit-inner-spin-button,
.legend-range-panel input[type="number"]:hover::-webkit-outer-spin-button,
.legend-range-panel input[type="number"]:focus::-webkit-inner-spin-button,
.legend-range-panel input[type="number"]:focus::-webkit-outer-spin-button {
    opacity: 1;
}

#ctdControlBar .chart-toggle-label {
    font-size: 0.85em;
}

#ctdControlBar .chart-toggle-btn {
    padding: 5px 13px;
    font-size: 0.83em;
}

#ctdControlBar .chart-control-bar__title {
    font-size: 1.05em;
}

#ctdCastingControlBar .chart-control-bar__title {
    font-size: 1.05em;
}

#ctdCastingChart .brush .selection {
    fill: #2c3e50;
    fill-opacity: 0.25;
    stroke: #2c3e50;
    stroke-width: 1;
    rx: 3;
}

#ctdCastingChart .brush .handle {
    fill: #2c3e50;
    rx: 2;
}

.chart-modal-body {
    padding: 12px 20px;
    background: white;
    border-radius: 0 0 8px 8px;
    overflow-x: auto;
}

/* ADCP 외 차트(시계열/CTD Casting/Tracking) — 모달 body 길이 확장 */
.chart-modal-body:not(:has(#adcpMooringChartContainer)) {
    height: 680px;
    padding: 4px 20px;
    overflow: hidden;
}
.chart-modal-body:not(:has(#adcpMooringChartContainer)) #chartCanvas {
    min-height: 670px;
}
.chart-modal-content:not(:has(#adcpMooringChartContainer)) {
    overflow: hidden;
}

#chartCanvas {
    max-width: 100%;
    height: auto;
    overflow: visible;
}

/* ADCP Mooring 전용 — body/canvas 더 크게 */
.chart-modal-body:has(#adcpMooringChartContainer) {
    padding: 10px 14px 0 14px;
    height: 800px;
    overflow: hidden;
}
.chart-modal-content:has(#adcpMooringChartContainer) #chartCanvas {
    min-height: calc(min(900px, 100vh - 20px) - 70px);
}

/* Chart Loading: 작은 스피너만 (텍스트 숨김) */
.chart-loading {
    display: none;
    text-align: center;
    padding: 18px;
    background: transparent;
}

.chart-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    opacity: 0.7;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

@keyframes smoothBlink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* 안내 문구는 숨김 — 스피너만으로 충분 */
.chart-loading-text,
.chart-loading-subtext {
    display: none;
}

/* Chart Tooltip */
.chart-tooltip {
    position: fixed;
    background: rgba(20, 30, 50, 0.9);
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
    display: none;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Status Bar */
.status-bar {
    background: #2c3e50;
    padding: 3px 15px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #34495e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-bar p {
    margin: 0;
    font-size: 0.9em;
    color: #bdc3c7;
}

.status-bar .created-by {
    font-size: 0.8em;
    color: #95a5a6;
}

/* Auth Button Styles */
.auth-btn {
    background: #3e5780;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-left: 8px;
    transition: background-color 0.3s;
}

.auth-btn:hover {
    background: #344d6e;
}

/* Auth Modal Styles */
.auth-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.auth-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 0;
    border: none;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.auth-modal-header {
    background: #2c3e50;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.auth-modal-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.auth-modal-close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.auth-modal-close:hover {
    opacity: 0.7;
}

.auth-modal-body {
    padding: 20px;
    background: white;
    border-radius: 0 0 8px 8px;
}

.auth-submit-btn {
    background: #2c3e50;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.0em;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.auth-submit-btn:hover {
    background: #1f2d3d;
}

/* Tab Styles */
.tab-container {
    margin-bottom: 15px;
}

.tab-buttons {
    display: flex;
    border-bottom: none;
    margin-bottom: 0px;
}

.tab-btn {
    flex: 1;
    padding: 10px 15px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    font-family: 'Pretendard', -apple-system, sans-serif;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.65);
    transition: all 0.3s ease;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tab-btn.active {
    background: transparent;
    border-bottom-color: #ffffff;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Track Search Specific Styles */
.date-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-range input {
    flex: 1;
}

.date-range span {
    color: #ffffff;
    font-weight: 500;
}

.filter-section, .spatial-filter-section {
    background: transparent;
    padding: 3px 5px;
    border-radius: 6px;
    margin-bottom: 1px;
    border-left: none;
}

.filter-section:first-child {
    margin-top: 0;
}

.filter-section h4, .spatial-filter-section h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 0.95em;
    font-weight: 600;
}

.inline-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.inline-controls label {
    margin: 0;
    font-size: 0.8em;
    color: #555;
}

.inline-controls select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0.8em;
}

.spatial-inputs {
    margin-top: 10px;
}

.coordinate-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.coordinate-inputs label {
    min-width: 40px;
    font-size: 0.8em;
    color: #555;
}

.coordinate-inputs input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0.8em;
}

.coordinate-inputs span {
    color: #666;
}

.map-selection {
    margin-top: 10px;
}

.map-select-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
}

.map-select-btn:hover {
    background: #229954;
}

.track-search-btn {
    background: #e67e22;
    font-size: 1.0em;
    font-weight: 600;
    padding: 12px 20px;
}

.track-search-btn:hover {
    background: #d35400;
}

/* Map area selection inline style */
.form-group.inline-form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.form-group.inline-form-group label {
    display: block;
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: left;
}

.form-group.inline-form-group select {
    width: 180px;
    flex-shrink: 0;
}

/* Autocomplete styles */
.form-group {
    position: relative;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    font-size: 0.85em;
}

.autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

/* Collapsible sections */
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.collapsible-header h4 {
    margin: 0;
}

.collapse-icon {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.collapsible-header.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.collapsible-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 15px;
    padding-top: 10px;
}

.collapsible-content.collapsed {
    max-height: 0;
    padding-left: 15px;
}

.tab-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Track buttons */
.track-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: stretch;
}

.track-buttons .view-table-btn {
    flex: 1;
    font-size: 0.78em;
    padding: 6px 10px;
    line-height: 1.4;
    box-sizing: border-box;
    min-height: 32px;
}

.animation-btn {
    background: #6b3d8a !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.78em !important;
}

.animation-btn:hover,
.animation-btn:hover:not(:disabled) {
    background: #5b3275 !important;
}

/* 항적 카드 내 "지도에 표기" 버튼: solid 진한 파랑 */
#trackSearchResults .track-buttons .view-table-btn:not(.animation-btn),
#track-wrapper .track-buttons .view-table-btn:not(.animation-btn) {
    background: rgb(56, 86, 148) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 0.78em !important;
    border-radius: 4px !important;
}
#trackSearchResults .track-buttons .view-table-btn:not(.animation-btn):hover,
#track-wrapper .track-buttons .view-table-btn:not(.animation-btn):hover,
#trackSearchResults .track-buttons .view-table-btn:not(.animation-btn):hover:not(:disabled),
#track-wrapper .track-buttons .view-table-btn:not(.animation-btn):hover:not(:disabled) {
    background: rgb(45, 70, 122) !important;
}

/* Ship marker styles with performance optimizations */
.ship-marker {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    will-change: transform;
    transform-origin: center center;
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.track-marker {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
}

/* Static ship markers for actual data points with optimization */
.static-ship {
    background: transparent;
    border: none;
    border-radius: 0;
    will-change: auto;
    transform-origin: center center;
    backface-visibility: hidden;
    box-shadow: none;
    opacity: 0.8;
    z-index: 500;
}

/* Timeline styles */
.timeline-container {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.timeline-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.timeline-controls {
    display: flex;
    gap: 5px;
}

.timeline-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.3s;
}

.timeline-btn:hover {
    background: #2980b9;
}

.timeline-btn.pause-btn {
    background: #f39c12;
}

.timeline-btn.pause-btn:hover {
    background: #e67e22;
}

.timeline-btn.stop-btn {
    background: #e74c3c;
}

.timeline-btn.stop-btn:hover {
    background: #c0392b;
}

/* ===== css/style/style.04.css ===== */
.timeline-progress {
    margin-top: 10px;
}

.timeline-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #ecf0f1;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
}

.timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #3498db;
    border-radius: 4px;
    width: 0%;
}

.timeline-thumb {
    position: absolute;
    top: -4px;
    left: 0;
    width: 16px;
    height: 16px;
    background: #2980b9;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transform: translateX(-50%);
}

.timeline-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #7f8c8d;
    font-family: monospace;
}

/* Separate result areas for different tabs */
.observation-results {
    display: block;
}

.track-results {
    display: none;
}

/* Ensure proper styling for both result areas */
.map-search-results.observation-results {
    overflow-y: auto;
    padding: 10px;
}

.map-search-results.track-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

#track-wrapper .table-card {
    border: 1px solid #ddd;
    padding: 10px 12px !important;
    min-height: auto !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}

#track-wrapper .table-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #f8f9fa;
    border-color: #ccc;
    padding: 10px 12px !important;
    min-height: auto !important;
    max-height: 600px;
    min-height: 200px;
}

/* Tab wrapper styling to ensure proper scrolling */
.tab-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1;
}

.tab-wrapper .map-search-results {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    min-height: 200px;
}

/* Observation Wrapper */

#observation-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: transparent !important;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    border: none;
}

/* Track Wrapper */
#track-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    border-radius: 8px;
    box-shadow: none;
    border: none;
}

/* Favorites Wrapper */
#favorites-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    padding-top: 15px;
}

/* Clean Search Form Container */
#observation-wrapper .search-form {
    flex: 0 0 auto;
    overflow-y: hidden;
    background: transparent;
    margin: 6px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: calc(100% - 8px);
    max-height: 350px;
}

#observation-wrapper .search-form-header {
    background: transparent !important;
    color: #ffffff;
}

#observation-wrapper .search-form-header::after {
    background: rgba(255, 255, 255, 0.15);
}

#observation-wrapper .form-group label {
    color: #ffffff;
}

#observation-wrapper .search-form.collapsed {
    max-height: 44px;
    overflow: hidden;
}

#observation-wrapper .search-form.fixed-height {
    flex: none;
}

#observation-wrapper .search-form.fixed-height.collapsed {
    max-height: 44px;
    overflow: hidden;
}

/* Track wrapper styles - same as observation wrapper */
/* Clean Search Form Container for Track */
#track-wrapper .search-form {
    flex: 0 0 auto;
    overflow-y: hidden;
    background: transparent;
    margin: 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 500px;
}

#track-wrapper .search-form.collapsed {
    max-height: 44px;
    overflow: hidden;
}

#track-wrapper .search-form.fixed-height {
    flex: none;
}

#track-wrapper .search-form.fixed-height.collapsed {
    max-height: 44px;
    overflow: hidden;
}

/* Track search form header - same as observation */
#track-wrapper .search-form-header {
    position: relative;
    background: #e9ecef;
    color: #495057;
    padding: 10px 16px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    user-select: none;
    border-bottom: none;
    display: flex;
    align-items: center;
}

#track-wrapper .search-form-header:hover {
    background: #e9ecef;
}

#track-wrapper .search-form-toggle {
    display: block;
}

/* Ultra compact filter sections for track */
#track-wrapper .filter-section {
    margin-bottom: 0px;
    border-radius: 0;
    padding: 5px 16px;
    min-height: 120px;
    background: #e9ecef;
}

#track-wrapper .spatial-filter-section {
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 0;
    padding: 5px 16px;
    min-height: 80px;
    background: #e9ecef;
}

#track-wrapper .form-group label {
    font-size: 0.8em;
    font-weight: 600;
    color: #495057;
    margin-bottom: 3px;
    display: block;
    font-family: 'Pretendard', -apple-system, sans-serif;
}

#track-wrapper .form-control,
#track-wrapper select,
#track-wrapper input[type="date"] {
    font-size: 0.7em;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    line-height: 1.4;
    min-height: 24px;
}

#track-wrapper input[type="date"]:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Track attribute section */
#track-wrapper .attribute-section {
    flex: 0 0 auto;
    min-height: 160px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 12px;
    overflow-y: auto;
}

/* Track search results */
#track-wrapper .map-search-results {
    overflow-y: auto;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin: 0 12px 12px 12px;
    padding: 12px;
    min-height: 300px;
}

/* Ultra Compact Collapsible Headers for Track */
#track-wrapper .collapsible-header {
    background: #ffffff;
    color: #495057;
    padding: 3px 5px;
    border-radius: 1px;
    margin: 1px 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 500;
    font-size: 0.7em;
    border: 1px solid #dee2e6;
}

#track-wrapper .collapsible-header:hover {
    background: #f8f9fa;
}

#track-wrapper .collapsible-header.collapsed {
    background: #f8f9fa;
    color: #6c757d;
}

#track-wrapper .collapsible-header h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 500;
    line-height: 1.2;
}

/* Ultra Compact Form Content for Track */
#track-wrapper .collapsible-content {
    padding: 3px 5px;
    background: white;
}

/* Track Search Buttons - same as observation */
#track-wrapper .search-buttons {
    padding: 3px 16px 10px 16px;
    display: flex;
    gap: 3px;
    background: #e9ecef;
    margin: 0 !important;
    border-radius: 0;
    border-top: none;
    flex-wrap: nowrap;
}

#track-wrapper .search-buttons button {
    font-size: 0.7em;
    padding: 2px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    height: 30px;
    min-height: unset !important;
    min-width: unset;
}

#track-wrapper .search-btn {
    background: #385694;
    color: white;
    border-color: #385694;
}

#track-wrapper .search-btn:hover {
    background: #2e487d;
    border-color: #2e487d;
}

#track-wrapper .clear-all-btn {
    background: #6B7280;
    color: white;
    border-color: #6B7280;
}

#track-wrapper .clear-all-btn:hover {
    background: #4B5563;
    border-color: #4B5563;
}

/* Simple search form toggle */
.search-form-toggle {
    display: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: transparent;
    color: #6c757d;
    border: none;
    border-radius: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    transition: color 0.2s ease;
    z-index: 10;
}

#observation-wrapper .search-form-toggle {
    display: block;
}

.search-form-toggle .chevron-icon {
    display: inline-block;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    transform: rotate(45deg) translateZ(0);
    transform-origin: center center;
    margin-top: 3px;
    transition: transform 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.search-form.collapsed .search-form-toggle .chevron-icon {
    transform: rotate(225deg) translateZ(0);
    margin-top: -2px;
}

.search-form-toggle:hover .chevron-icon {
    border-color: #495057;
}

/* Simple search form header */
.search-form-header {
    position: relative;
    background: #e9ecef;
    color: #495057;
    padding: 10px 16px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    user-select: none;
    border-bottom: none;
    display: flex;
    align-items: center;
}

.search-form-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: #ced4da;
}

.search-form-header:hover {
    background: #e9ecef;
}

/* Ultra Compact Collapsible Headers */
#observation-wrapper .collapsible-header {
    background: #ffffff;
    color: #495057;
    padding: 3px 5px;
    border-radius: 1px;
    margin: 1px 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 500;
    font-size: 0.7em;
    border: 1px solid #dee2e6;
}

#observation-wrapper .collapsible-header:hover {
    background: #f8f9fa;
}

#observation-wrapper .collapsible-header.collapsed {
    background: #f8f9fa;
    color: #6c757d;
}

#observation-wrapper .collapsible-header h4 {
    margin: 0;
    font-size: 0.7em;
    font-weight: 500;
    line-height: 1.2;
}

/* Ultra Compact Form Content */
#observation-wrapper .collapsible-content {
    padding: 3px 5px;
    background: white;
    margin: 0 4px 1px 4px;
    border-radius: 1px;
    border: 1px solid #dee2e6;
}

#observation-wrapper .form-group,
#track-wrapper .form-group,
#favorites-search-tab .form-group {
    margin-bottom: 10px;
}

/* Ultra compact filter sections */
#observation-wrapper .filter-section {
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: none;
    padding: 8px 16px;
    min-height: 90px;
    background: transparent;
}

#observation-wrapper .spatial-filter-section {
    margin-top: 0px;
    margin-bottom: 0px;
    border-radius: 5px;
    padding: 3px 5px;
    min-height: 80px;
}

#observation-wrapper .form-group label {
    font-size: 0.95em;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    display: block;
    font-family: 'Pretendard', -apple-system, sans-serif;
}

#observation-wrapper .form-control,
#observation-wrapper select,
#observation-wrapper input[type="date"],
#observation-wrapper input[data-date-field] {
    font-size: 0.75em;
    font-family: 'Pretendard', 'Segoe UI', -apple-system, sans-serif;
    padding: 6px 12px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

#observation-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

#observation-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

#observation-wrapper select:not(#yearQuickSelect) {
    height: 32px;
    font-size: 0.82em !important;
}

#observation-wrapper select option {
    background: rgb(35, 70, 110);
    color: #ffffff;
}

#yearQuickSelect:focus,
#yearQuickSelect:active,
#yearQuickSelect:focus-visible {
    border-color: #2a5090 !important;
    outline: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    box-shadow: none !important;
}

#observation-wrapper select option:hover,
#observation-wrapper select option:checked {
    background: rgb(55, 90, 135);
    color: #ffffff;
}

#observation-wrapper .form-control:focus,
#observation-wrapper select:focus,
#observation-wrapper input[type="date"]:focus,
#observation-wrapper input[data-date-field]:focus,
#observation-wrapper .form-control:focus-visible,
#observation-wrapper select:focus-visible,
#observation-wrapper input[type="date"]:focus-visible,
#observation-wrapper input[data-date-field]:focus-visible {
    border-color: #2a5090;
    border-width: 1px;
    border-style: solid;
    outline: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    padding: 6px 12px;
    height: 30px;
}

/* Compact date range */
#observation-wrapper .date-range {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
}

#observation-wrapper .date-range span {
    font-size: 0.7em;
    color: #ffffff;
}

/* Compact collapse icons */
#observation-wrapper .collapse-icon {
    font-size: 0.7em;
}

/* Ultra Compact Search Buttons */
#observation-wrapper .search-buttons {
    padding: 3px 16px 10px 16px;
    display: flex;
    gap: 3px;
    background: transparent;
    margin: 0;
    border-radius: 0;
    border-top: none;
    border: none;
    box-shadow: none;
    outline: none;
}

#observation-wrapper .search-buttons button {
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    height: 30px;
    min-height: unset;
}

#observation-wrapper .search-btn {
    background: rgba(30, 60, 120, 0.4);
    color: #ffffff;
    border: 1.5px solid #2a5090;
}

#observation-wrapper .search-btn:hover {
    background: rgba(30, 60, 120, 0.55);
    border-color: #2a5090;
}

#observation-wrapper .clear-all-btn {
    background: rgba(140, 40, 40, 0.4);
    color: #ffffff;
    border: 1.5px solid #8c2828;
}

#observation-wrapper .clear-all-btn:hover {
    background: rgba(140, 40, 40, 0.55);
    border-color: #8c2828;
}

/* Clean Attribute Section */
#observation-wrapper .attribute-section {
    flex: 0 0 auto;
    min-height: 160px;
    overflow-y: hidden;
    background: #f8f9fa;
    margin: 0 12px 12px 12px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    padding: 12px;
    transition: all 0.3s ease;
}

#observation-wrapper .attribute-section h4 {
    color: #495057;
    font-size: 0.9em;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Clean Results Container */
#observation-wrapper .map-search-results {
    flex: 1;
    overflow-y: auto;
    background: transparent;
    color: #ffffff;
    margin: 12px 4px 6px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0;
    transition: all 0.3s ease;
    width: calc(100% - 8px);
}

#observation-wrapper .map-search-results::-webkit-scrollbar {
    width: 8px;
}

#observation-wrapper .map-search-results::-webkit-scrollbar-track {
    background: transparent;
}

#observation-wrapper .map-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    transition: background 0.3s;
}

#observation-wrapper .map-search-results:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}

#observation-wrapper .map-search-results:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}

/* WQI/ICSG 패널 휠 스타일 — 조회결과와 동일한 톤 (단, 흰 배경이라 어두운 thumb 사용) */
#wqAnalysisPanel::-webkit-scrollbar,
#sedimentGrainPanel::-webkit-scrollbar {
    width: 8px;
}
#wqAnalysisPanel::-webkit-scrollbar-track,
#sedimentGrainPanel::-webkit-scrollbar-track {
    background: transparent;
}
#wqAnalysisPanel::-webkit-scrollbar-thumb,
#sedimentGrainPanel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 4px;
    transition: background 0.3s;
}
#wqAnalysisPanel:hover::-webkit-scrollbar-thumb,
#sedimentGrainPanel:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.32);
}
#wqAnalysisPanel:hover::-webkit-scrollbar-thumb:hover,
#sedimentGrainPanel:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}
/* Firefox */
#wqAnalysisPanel,
#sedimentGrainPanel {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

/* Clean Result Cards */
#observation-wrapper .table-card {
    margin: 0;
    padding: 12px;
    border-bottom: 1px solid #f1f3f4;
    border-left: none;
    border-radius: 0;
    background: transparent;
    transition: background-color 0.2s ease;
}

#observation-wrapper .table-card:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#observation-wrapper .table-card:last-child {
    border-bottom: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#observation-wrapper .table-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

#observation-wrapper .no-results {
    padding: 40px 20px;
    text-align: center;
    color: #ffffff;
    background: transparent;
}

/* Search results header styling */
.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 5px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.search-results-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
}

.search-results-list {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

/* Individual result item styling */
.result-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 12px;
    transition: box-shadow 0.2s ease;
}

.result-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.result-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.result-header input[type="checkbox"] {
    margin-right: 10px;
}

.result-header h5 {
    margin: 0;
    color: #2c3e50;
    font-size: 1em;
    font-weight: 600;
}

.result-details {
    margin: 8px 0;
    padding-left: 22px;
}

.result-details p {
    margin: 4px 0;
    font-size: 0.9em;
    color: #5a6c7d;
}

.result-actions {
    display: flex;
    gap: 8px;
    padding-left: 22px;
    margin-top: 10px;
}

/* Map search actions */
.map-search-actions {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.selected-count {
    font-size: 0.9em;
    color: #5a6c7d;
    margin-bottom: 8px;
}

.show-selected-btn {
    background: #34495e;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.show-selected-btn:hover {
    background: #1a252f;
}

/* Track search results styling */
.track-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.track-results-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
}

.ship-list {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.ship-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 12px;
    transition: box-shadow 0.2s ease;
}

.ship-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== css/style/style.05.css ===== */
.ship-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ship-checkbox {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
}

.ship-checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.ship-info {
    font-size: 0.9em;
    color: #5a6c7d;
}

.ship-details {
    margin: 8px 0;
    padding-left: 22px;
}

.ship-details p {
    margin: 4px 0;
    font-size: 0.9em;
    color: #5a6c7d;
}

.ship-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.view-btn, .animation-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.view-btn {
    background: #3498db;
    color: white;
}

.view-btn:hover {
    background: #2980b9;
}

.animation-btn {
    background: #e74c3c;
    color: white;
}

.animation-btn:hover {
    background: #c0392b;
}

/* Track actions styling */
.track-actions {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.stop-all-btn {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.stop-all-btn:hover {
    background: #c0392b;
}

/* Timeline container styling */
.timeline-container {
    margin-top: 10px;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.timeline-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.timeline-ship-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.timeline-status {
    font-size: 0.8em;
    color: #5a6c7d;
}

.timeline-controls {
    display: flex;
    gap: 5px;
}

.timeline-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    background: #3498db;
    color: white;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s ease;
}

.timeline-btn:hover {
    background: #2980b9;
}


.timeline-progress {
    margin: 10px 0;
}

.timeline-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #ecf0f1;
    border-radius: 4px;
    cursor: pointer;
}

.timeline-progress-bar {
    height: 100%;
    background: #27ae60;
    transition: width 0.3s ease;
}

.timeline-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: #5a6c7d;
    margin-top: 5px;
}

.timeline-speed {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
}

.speed-selector {
    padding: 2px 6px;
    border: 1px solid #bdc3c7;
    border-radius: 3px;
    font-size: 0.85em;
}

/* Download and action button styling */
.download-btn {
    background: #e67e22;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.download-btn:hover {
    background: #d35400;
    color: white;
}

.download-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

.chart-btn {
    background: #9b59b6;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.chart-btn:hover {
    background: #8e44ad;
    color: white;
}

.chart-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Clear all button styling */
.clear-all-btn {
    background: #6B7280;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clear-all-btn:hover {
    background: #4B5563;
}

/* Search button styling */
.search-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-weight: 500;
}

.search-btn:hover {
    background: #2980b9;
}

.search-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Track search button specific styling */
.track-search-btn {
    background: #27ae60;
    font-weight: 600;
}

.track-search-btn:hover {
    background: #219a52;
}

/* Button groups in result actions */
.result-actions .download-btn,
.result-actions .chart-btn,
.result-actions .view-btn {
    margin-right: 5px;
}

.result-actions .download-btn:last-child,
.result-actions .chart-btn:last-child,
.result-actions .view-btn:last-child {
    margin-right: 0;
}

/* Bulk download styling */
.search-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.search-buttons button {
    flex: 1;
    min-width: 120px;
}

/* Table action buttons */
.table-card .view-btn,
.table-card .download-btn,
.table-card .chart-btn {
    margin: 2px;
    padding: 4px 8px;
    font-size: 0.8em;
}


/* Chart axis styling */
.axis {
    font-size: 12px;
}

.axis text {
    fill: #333;
    font-family: Arial, sans-serif;
}

.axis path,
.axis line {
    fill: none;
    stroke: #333;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.axisgrid path,
.axisgrid line {
    stroke: #aaa;
    stroke-width: 0.8px;
    stroke-dasharray: 4,3;
}

/* Chart labels */
.chartlabel {
    font-size: 14px;
    fill: #000000;
    font-family: 'Pretendard', -apple-system, sans-serif;
    font-weight: 600;
    text-rendering: geometricPrecision;
}

/* Marker cluster styling */
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}

/* Marker cluster numbers */
.marker-cluster span {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Ship marker styling */
.ship-marker {
    border: none !important;
    background: transparent !important;
}

.ship-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50% !important;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease-out;
    position: relative;
}

.ship-icon-container.animated-ship {
    animation: shipBob 2s ease-in-out infinite;
}

.ship-icon-container.static {
    filter: drop-shadow(1px 1px 2px rgba(44, 62, 80, 0.55));
    opacity: 0.7;
}

/* Ship animation effects */
@keyframes shipBob {
    0%, 100% { 
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) brightness(1);
    }
    50% { 
        filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4)) brightness(1.05);
    }
}

/* Ship wake animation */
.ship-icon-container svg path[stroke="#ffffff"] {
    animation: wakeFlow 2s ease-in-out infinite;
}

@keyframes wakeFlow {
    0% { opacity: 0.7; stroke-width: 1.2; }
    25% { opacity: 0.9; stroke-width: 1.5; }
    50% { opacity: 0.5; stroke-width: 1.8; }
    75% { opacity: 0.8; stroke-width: 1.3; }
    100% { opacity: 0.7; stroke-width: 1.2; }
}

/* Navigation lights blinking */
.ship-icon-container svg circle[fill="#22c55e"], 
.ship-icon-container svg circle[fill="#ef4444"] {
    animation: navigationLights 2.5s ease-in-out infinite;
}

.ship-icon-container svg circle[fill="#ef4444"] {
    animation-delay: 0.3s;
}

@keyframes navigationLights {
    0%, 80%, 100% { opacity: 0.9; }
    85%, 95% { opacity: 0.3; }
}

/* Bow indicator subtle pulse */
.ship-icon-container svg path[fill="#ff4757"] {
    animation: bowPulse 3s ease-in-out infinite;
}

@keyframes bowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Error and loading styles for charts */
.error {
    text-align: center;
    color: #e74c3c;
    padding: 20px;
    font-size: 14px;
    background: #f8f9fa;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin: 10px;
}

.loading {
    text-align: center;
    color: #7f8c8d;
    padding: 20px;
    font-size: 14px;
}


/* Auth buttons */
.auth-btn {
    background: #3e5780;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-left: 10px;
}

.auth-btn:hover {
    background: #344d6e;
}

.logout-btn {
    background: #3e5780 !important;
}

.logout-btn:hover {
    background: #344d6e !important;
}

/* Form submit buttons */
.auth-submit-btn {
    background: #2c3e50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    margin-top: 15px;
}

.auth-submit-btn:hover {
    background: #1f2d3d;
}

/* Track controls styling */
.track-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}


.select-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    gap: 8px;
}

.checkbox-label input[type="checkbox"] {
    appearance: auto;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    transform: scale(1.2);
}

.bulk-controls {
    display: flex;
    gap: 8px;
}

.bulk-controls .view-table-btn {
    font-size: 0.85em;
    padding: 8px 12px;
}

/* Ship selection checkbox styling */
.table-checkbox {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.table-checkbox input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.1);
}

/* Ship label styling */
.ship-label {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.ship-label div {
    white-space: nowrap;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Search buttons container styling */
.search-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.search-buttons .clear-all-btn {
    flex: 0 0 auto;
    background: #6B7280;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s;
    height: fit-content;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-buttons .clear-all-btn:hover {
    background: #4B5563;
}

.search-buttons .track-search-btn {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar toggle button */
.sidebar-toggle {
    position: absolute;
    top: 80px;
    left: 350px;
    z-index: 1000;
    background: rgba(0, 40, 80, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 10px 6px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    font-size: 18px;
    line-height: 1;
}

.sidebar-toggle:hover {
    background: rgba(0, 40, 80, 0.75);
    transform: translateX(2px);
}

.toggle-icon {
    display: block;
    transition: transform 0.3s ease;
}

/* Sidebar collapsed state */
.map-sidebar.collapsed {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.sidebar-toggle.collapsed {
    left: 0;
    border-radius: 0 8px 8px 0;
}

.sidebar-toggle.collapsed .toggle-icon {
    transform: rotate(180deg);
}

/* ========================================
   즐겨찾기 탭 스타일
   ======================================== */


/* 탭 콘텐츠들이 flex 컨테이너가 되도록 설정 - active 상태에서만 */
.tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#observation-tab.active,
#track-tab {
    background: transparent;
}

#track-tab.active,
#favorites-tab.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 검색 폼은 고정 크기, 검색 결과는 남은 공간 모두 사용 */
.search-form {
    flex-shrink: 0;
}

.search-form h3 {
    flex-shrink: 0;
}

/* 즐겨찾기 서브탭도 flex 컨테이너로 설정 */
.favorites-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.favorites-sub-tabs {
    flex-shrink: 0;
}

/* 즐겨찾기 검색 탭의 내용이 active일 때만 flex되도록 설정 */
#favorites-search-tab.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#favorites-search-tab.active .search-form {
    flex-shrink: 0;
}

/* Favorites Search Buttons - same style as observation */
#favorites-search-tab .search-buttons {
    padding: 3px 5px;
    display: flex;
    gap: 3px;
    border-radius: 2px;
    margin-top: 20px !important;
    flex-wrap: nowrap;
}
#favorites-search-tab .search-buttons button {
    flex: 1 1 0 !important;
    width: 100% !important;
}

#favorites-search-tab .search-buttons button {
    font-size: 0.7em;
    padding: 2px 8px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    flex: 1;
    height: 30px;
    min-height: unset !important;
    min-width: unset;
}

#favorites-search-tab .search-btn {
    background: #385694;
    color: white;
    border-color: #385694;
}

#favorites-search-tab .search-btn:hover {
    background: #2e487d;
    border-color: #2e487d;
}

#favorites-search-tab .search-form {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

#favorites-search-tab .form-group {
    margin-bottom: 6px;
}

#favorites-search-tab .form-group label {
    font-size: 0.9em;
    margin-bottom: 4px;
    font-weight: 600;
    color: #2c3e50;
}

#favorites-search-tab .form-group input,
#favorites-search-tab .form-group select {
    font-size: 0.85em;
    padding: 6px 8px;
    border-radius: 6px;
}

#favorites-search-tab .clear-all-btn {
    background: #6B7280;
    color: white;
    border-color: #6B7280;
}

#favorites-search-tab .clear-all-btn:hover {
    background: #4B5563;
    border-color: #4B5563;
}

#favorites-search-tab.active h3 {
    flex-shrink: 0;
}

/* 내 즐겨찾기 탭도 active일 때만 flex되도록 설정 */
#favorites-my-tab.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#favorites-my-tab.active .workspace-selector,
#favorites-my-tab.active h3 {
    flex-shrink: 0;
}

#favorites-my-tab.active .favorites-workspace-list,
#favorites-my-tab.active .favorites-tree-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.favorites-workspace-list {
    display: block;
}

.favorites-tree-container {
    display: none;
}

.add-favorite-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border-left: 4px solid #28a745;
}

.current-location-info {
    text-align: center;
}

.location-coords {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.8em;
    color: #666;
}

.location-coords span {
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    font-family: monospace;
}

.add-favorite-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.add-favorite-btn:hover {
    background: linear-gradient(135deg, #218838, #1ca085);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.add-favorite-btn:active {
    transform: translateY(0);
}

/* ===== css/style/style.06.css ===== */
.favorites-list-section {
    background: white;
    border-radius: 6px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.section-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1em;
}

.refresh-btn {
    background: none;
    border: none;
    font-size: 0.9em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.refresh-btn:hover {
    background: #f0f0f0;
}

.favorites-list {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

.no-favorites {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 0.9em;
}

.no-favorites p {
    margin: 8px 0;
}

.favorite-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.favorite-item:hover {
    background: #e9ecef;
    border-color: #3498db;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
}

.favorite-item.selected {
    background: #e3f2fd;
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.favorite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.favorite-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.favorite-actions {
    display: flex;
    gap: 4px;
}

.favorite-action-btn {
    background: none;
    border: none;
    font-size: 0.8em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.favorite-action-btn.view-btn {
    color: #3498db;
}

.favorite-action-btn.view-btn:hover {
    background: #3498db;
    color: white;
}


.favorite-coords {
    font-size: 0.75em;
    color: #666;
    font-family: monospace;
    margin-bottom: 4px;
}

.favorite-date {
    font-size: 0.7em;
    color: #999;
}

.favorite-description {
    font-size: 0.8em;
    color: #555;
    margin-top: 4px;
    font-style: italic;
}

/* 즐겨찾기 추가 모달 */
.favorite-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.favorite-modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(44, 62, 80, 0.55);
}

.favorite-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.favorite-modal-header h3 {
    margin: 0;
    color: #2c3e50;
}

.favorite-modal-close {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.favorite-modal-close:hover {
    background: #f0f0f0;
    color: #666;
}

.favorite-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.favorite-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.favorite-form label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.favorite-form input,
.favorite-form textarea,
.favorite-form select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.favorite-form input:focus,
.favorite-form textarea:focus,
.favorite-form select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.favorite-form select:disabled {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.favorite-form textarea {
    resize: vertical;
    min-height: 60px;
}

.favorite-form-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.favorite-form-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.favorite-form-btn.save-btn {
    background: #28a745;
    color: white;
}

.favorite-form-btn.save-btn:hover {
    background: #218838;
}

.favorite-form-btn.cancel-btn {
    background: #6c757d;
    color: white;
}

.favorite-form-btn.cancel-btn:hover {
    background: #5a6268;
}

/* ========================================
   즐겨찾기 서브탭 스타일
   ======================================== */

.favorites-sub-tabs {
    margin-bottom: 5px;
    border-bottom: none;
}

.sub-tab-buttons {
    display: flex;
    gap: 0;
}

.sub-tab-btn {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    color: #666;
    transition: all 0.2s ease;
    border-radius: 4px 4px 0 0;
}

.sub-tab-btn:first-child {
    border-radius: 4px 0 0 0;
}

.sub-tab-btn:last-child {
    border-radius: 0 4px 0 0;
}

.sub-tab-btn.active {
    background: white;
    color: #2c3e50;
    font-weight: 600;
    border-bottom: 2px solid white;
    position: relative;
    z-index: 1;
}

.sub-tab-btn:hover:not(.active) {
    background: #e9ecef;
    color: #495057;
}

.sub-tab-content {
    display: none;
    padding-top: 10px;
}

.sub-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ========================================
   워크스페이스 선택 모달 스타일
   ======================================== */

.workspace-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

.workspace-modal-content {
    background-color: white;
    border-radius: 8px;
    width: 400px;
    max-width: 90vw;
    max-height: 97vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
}

.workspace-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 10px 20px;
    border-bottom: 1px solid #eee;
}

.workspace-modal-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.workspace-modal-close {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.workspace-modal-close:hover {
    color: #333;
}

.workspace-modal-body {
    padding: 20px;
}

.workspace-item-info {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #3498db;
}

.workspace-item-info h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1em;
}

.workspace-item-info p {
    margin: 5px 0;
    color: #555;
}

.workspace-selection h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1em;
}

.workspace-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
}

.workspace-modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.workspace-modal-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.workspace-modal-btn.cancel-btn {
    background: #95a5a6;
    color: white;
}

.workspace-modal-btn.cancel-btn:hover {
    background: #7f8c8d;
}

.workspace-modal-btn.confirm-btn {
    background: #3498db;
    color: white;
}

.workspace-modal-btn.confirm-btn:hover {
    background: #2980b9;
}

/* Workspace Favorites Display Styles */
.workspace-favorites-view {
    padding: 10px 0;
}

.workspace-favorites-view h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1.1em;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
}

.favorites-category {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.favorites-category h5 {
    margin: 0;
    padding: 12px 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    font-size: 0.95em;
    font-weight: 600;
    border-bottom: 1px solid #e0e0e0;
}

.favorites-list {
    background: white;
}

.favorite-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.favorite-item:hover {
    background-color: #f8f9fa;
}

.favorite-item:last-child {
    border-bottom: none;
}

.favorite-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.favorite-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.favorite-name {
    font-weight: 500;
    color: #2c3e50;
    flex-grow: 1;
}

.favorite-coords {
    font-size: 0.85em;
    color: #666;
    font-family: 'Courier New', monospace;
}

.favorite-description {
    font-size: 0.9em;
    color: #555;
    margin: 5px 0;
    padding-left: 24px;
    line-height: 1.4;
}

.favorite-details {
    display: flex;
    gap: 12px;
    padding-left: 24px;
    font-size: 0.8em;
}

.favorite-type {
    background: #e3f2fd;
    color: #1565c0;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

.favorite-layer {
    background: #f3e5f5;
    color: #7b1fa2;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

/* All Workspaces View Styles */
.all-workspaces-view {
    padding: 10px 0;
}

.all-workspaces-view h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
    padding-bottom: 5px;
}

/* Workspace header with sort controls */
.workspace-header-with-sort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
}

.workspace-sort-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-reverse-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.sort-reverse-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3498db;
}

.sort-reverse-checkbox span {
    font-weight: 500;
}

.sort-reverse-checkbox:hover span {
    color: #3498db;
}

.workspace-sort-select {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    background: white;
    cursor: pointer;
    min-width: 140px;
    height: 28px;
}

.workspace-sort-select:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.workspace-sort-select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.workspaces-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workspace-summary {
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.workspace-summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #3498db;
}

.workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.workspace-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1em;
}

.workspace-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.workspace-description {
    font-size: 0.9em;
    color: #666;
    line-height: 1.4;
}

/* Workspace Section Styles (for all workspaces view) */
.workspace-section {
    margin-bottom: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.workspace-header-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workspace-title-section:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 0.2s ease;
}

.workspace-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-action-btn {
    padding: 6px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: white;
    color: #24292f;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.workspace-action-btn:hover {
    background: #f6f8fa;
    border-color: #d0d7de;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.workspace-action-btn:active {
    background: #e9ecef;
    transform: translateY(1px);
}

.workspace-action-btn.view-all-btn {
    background: #0969da;
    color: white;
    border-color: #0969da;
}

.workspace-action-btn.view-all-btn:hover {
    background: #0860ca;
    border-color: #0860ca;
}

.workspace-action-btn.view-all-btn.collapsed {
    background: white;
    color: #0969da;
    border-color: #0969da;
}

.workspace-action-btn.view-all-btn.collapsed:hover {
    background: #f6f8fa;
    color: #0860ca;
    border-color: #0860ca;
}

.workspace-action-btn.toggle-btn {
    font-size: 1rem;
    padding: 4px 8px;
}

/* Individual favorite visibility toggle */
.favorite-item.favorite-hidden {
    opacity: 0.5;
}

.favorite-item.favorite-hidden .favorite-name {
    text-decoration: line-through;
    color: #999;
}

.favorite-action-btn.toggle-visibility-btn {
    font-size: 1rem;
    padding: 2px 6px;
    min-width: 28px;
    height: 28px;
}

/* Filter no results message */
.filter-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.filter-no-results p {
    margin-bottom: 15px;
    font-size: 0.95em;
}

.clear-filters-btn {
    padding: 8px 20px;
    background: #4A90E2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
}

.clear-filters-btn:hover {
    background: #357ABD;
}

.workspace-header-section h5 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Favorite workspace star animation */
.workspace-header-section h5:has(⭐) {
    position: relative;
}

.workspace-section h5 {
    animation: none;
}

.workspace-section h5:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

.workspace-header-section .workspace-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.workspace-header-section .workspace-color.empty {
    background: white !important;
    border: 3px solid;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.workspace-section .workspace-description {
    padding: 10px 20px;
    background: #f8f9fa;
    color: #666;
    font-size: 0.9em;
    border-bottom: 1px solid #e0e0e0;
}

.workspace-tags-section {
    padding: 8px 20px;
    background: #fafbfc;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.workspace-tag {
    display: inline-block;
    padding: 3px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 12px;
    font-size: 0.85em;
    border: 1px solid #bbdefb;
}

.workspace-favorites-list {
    padding: 15px;
    background: white;
}

/* ===== css/style/style.07.css ===== */
.workspace-favorites-list .favorite-item {
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    background: #fafafa;
}

.workspace-favorites-list .favorite-item:last-child {
    margin-bottom: 0;
}

/* Favorite actions at bottom layout */
.favorite-actions-bottom {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.favorite-actions-bottom .favorite-action-btn {
    padding: 6px 10px;
    font-size: 1.1em;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
}

/* 보기 버튼 기본값 - 안보기 상태 (회색) */
.favorite-actions-bottom .toggle-visibility-btn {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

.favorite-actions-bottom .favorite-action-btn:hover {
    background: #f5f5f5;
    border-color: #3498db;
}

.favorite-actions-bottom .toggle-visibility-btn:hover {
    background: #e3f2fd;
    border-color: #2196f3;
}

.favorite-actions-bottom .edit-btn:hover {
    background: #fff3e0;
    border-color: #ff9800;
}


.favorite-actions-bottom .history-btn:hover {
    background: #f3e5f5;
    border-color: #9c27b0;
}

/* Disabled button styles for view-only permissions */
.favorite-actions-bottom .favorite-action-btn.disabled {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.favorite-actions-bottom .favorite-action-btn.disabled:hover {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #ccc !important;
    transform: none !important;
}

.favorite-actions-bottom .favorite-action-btn[disabled] {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.favorite-actions-bottom .favorite-action-btn[disabled]:hover {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
    color: #ccc !important;
    transform: none !important;
}

/* Workspace empty and error states */
.workspace-empty-state,
.workspace-error-state {
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 6px;
    margin: 10px 0;
}

.workspace-empty-state .empty-message {
    color: #666;
    font-size: 0.9em;
    margin: 0 0 5px 0;
    font-weight: 500;
}

.workspace-empty-state small {
    color: #888;
    font-size: 0.8em;
}

.workspace-error-state .error-message {
    color: #e74c3c;
    font-size: 0.9em;
    margin: 0 0 5px 0;
    font-weight: 500;
}

.workspace-error-state small {
    color: #888;
    font-size: 0.8em;
}

.no-favorites-in-workspace {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    background: #f8f9fa;
}

.error-loading-favorites {
    padding: 20px;
    text-align: center;
    color: #e74c3c;
    background: #ffebee;
    border-left: 4px solid #f44336;
}

/* Table Favorites Styles */
.table-favorite-item {
    border-left: 4px solid #3498db;
}

.table-favorite-item .favorite-header {
    padding: 10px;
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 1em;
}

.table-favorite-item .favorite-name {
    color: #2c3e50;
    font-size: 1.05em;
}

.table-favorite-item .favorite-description {
    padding: 0 10px;
    color: #666;
    font-size: 0.9em;
}

.table-favorite-item .favorite-details {
    padding: 5px 10px;
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: #777;
}

.favorite-actions {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.favorite-action-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    transition: background-color 0.2s;
}

.favorite-action-btn:hover {
    background-color: #f0f0f0;
}

.favorite-action-btn.edit-btn:hover {
    background-color: #e3f2fd;
}


.favorite-action-btn.history-btn:hover {
    background-color: #f3e5f5;
}

.favorite-order,
.favorite-created,
.favorite-updated {
    font-size: 0.75em;
    color: #666;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

.favorite-created {
    background: #e8f5e8;
    color: #2e7d32;
}

.favorite-updated {
    background: #fff3e0;
    color: #f57c00;
}

/* History Modal Styles */
.history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 12px;
    transition: box-shadow 0.2s;
}

.history-item:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.history-item.action-insert {
    border-left: 4px solid #4caf50;
    background: #f1f8e9;
}

.history-item.action-update {
    border-left: 4px solid #ff9800;
    background: #fff8e1;
}

.history-item.action-delete {
    border-left: 4px solid #f44336;
    background: #ffebee;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 600;
}

.history-action {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85em;
    color: white;
}

.action-insert .history-action {
    background: #4caf50;
}

.action-update .history-action {
    background: #ff9800;
}

.action-delete .history-action {
    background: #f44336;
}

.history-timestamp {
    font-size: 0.8em;
    color: #666;
    font-weight: normal;
}

.history-details {
    font-size: 0.9em;
    line-height: 1.4;
}

.history-details > div {
    margin-bottom: 4px;
}

.history-details > div:last-child {
    margin-bottom: 0;
}

/* ========================================
   즐겨찾기 조회 결과 스타일
   ======================================== */

/* 테이블 전체 데이터 표시 스타일 */
.table-data-header {
    background: #f8f9fa;
    padding: 15px;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 10px;
}

.table-data-header h4 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.2em;
}

.table-info {
    margin: 0;
    color: #6c757d;
    font-size: 0.9em;
}

.full-table-data {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.full-data-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
}

.full-data-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0,123,255,0.1);
}

.full-data-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.item-number {
    background: #007bff;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.geometry-icon {
    font-size: 1.1em;
}

.full-data-name {
    font-weight: 600;
    color: #2c3e50;
    flex-grow: 1;
}

.full-data-coords {
    color: #6c757d;
    font-size: 0.9em;
    font-family: monospace;
}

.full-data-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.data-info {
    color: #28a745;
    font-size: 0.9em;
    font-weight: 500;
}

.full-data-actions {
    display: flex;
    gap: 5px;
}

.no-data {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-style: italic;
}

.favorites-search-results {
    margin-top: 15px;
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
    min-height: 200px;
    max-height: calc(100vh - 300px);
}

.search-result-item {
    padding: 6px 12px !important;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f8f9fa;
}

.search-result-item.selected {
    background: #e0e0e0;
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.search-result-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.search-result-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}

.search-result-btn {
    background: none;
    font-size: 0.78em;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-result-btn.add-btn {
    color: #5B9BD5;
    border: 1px solid #5B9BD5;
}

.search-result-btn.add-btn:hover {
    background: #5B9BD5;
    color: white;
}

.search-result-btn.view-btn {
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.search-result-btn.view-btn:hover {
    background: #e74c3c;
    color: white;
}

.search-result-details {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 4px;
}

.search-result-geom {
    display: inline-block;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.7em;
    margin-right: 8px;
}

/* ========================================
   워크스페이스 선택기 스타일
   ======================================== */

/* 워크스페이스 검색 섹션 */
.workspace-search-section {
    background: #f0f4f8;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #d0d7de;
}

.workspace-search-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.workspace-search-container label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
    white-space: nowrap;
    width: 120px;
    flex-shrink: 0;
}

.workspace-search-container input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    max-width: 167px;
    box-sizing: border-box;
}

.workspace-search-container input:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.workspace-search-container .search-btn {
    display: none; /* 검색 버튼 숨김 - Enter 키로만 검색 */
}

/* 워크스페이스 검색 섹션 개선 */
.workspace-search-section {
    margin-bottom: 15px;
}

.workspace-search-container {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}

.workspace-search-container label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
    margin-bottom: 8px;
}

.search-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-input-group input[type="text"] {
    padding: 3px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    background: white;
    height: 27px; /* 기존보다 5px 감소 */
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%; /* 좌우폭은 컨테이너에 맞춤 */
}

.search-input-group input[type="text"]:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.search-input-group input[type="text"].disabled-search {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
}

.search-input-group input[type="text"].favorites-filter-active {
    border: 2px solid #ffd700;
    background-color: #fffaf0;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

.workspace-favorites-filter {
    display: flex;
    align-items: center;
    order: -1; /* 텍스트박스 위로 이동 */
    margin-bottom: 4px;
    justify-content: flex-start; /* 왼쪽 정렬 */
}

.workspace-favorites-filter label {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 0.85em;
    color: #555;
    cursor: pointer;
    user-select: none;
    font-weight: normal;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    width: 90px !important; /* 라벨 자체의 고정 크기를 60px로 설정 (약 80px에서 20px 줄임) */
    max-width: 90px !important;
}

.workspace-favorites-filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #4A90E2;
    margin: 0 !important;
    margin-right: -2px !important; /* 오른쪽 공간 제거 */
    padding: 0 !important;
    border: none;
    outline: none;
    flex-shrink: 0;
    vertical-align: top;
    position: relative;
    display: inline-block;
}

.workspace-favorites-filter label span {
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 1px !important; /* 최소한의 간격만 */
    line-height: 1;
    display: inline-block;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .workspace-search-container {
        padding: 10px;
    }
    
    .search-input-group input[type="text"] {
        padding: 3px 10px;
        height: 25px;
        font-size: 0.85em;
    }
    
    .workspace-favorites-filter label {
        font-size: 0.8em;
        gap: 0; /* 모바일에서도 여백 제거 */
        margin: 0;
        padding: 0;
        width: 55px !important; /* 모바일에서는 더 작게 55px */
        max-width: 55px !important;
    }
    
    .workspace-favorites-filter input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin: 0 !important;
        margin-right: -2px !important;
        padding: 0 !important;
    }
    
    .workspace-favorites-filter label span {
        margin: 0 !important;
        padding: 0 !important;
        margin-left: 0px !important; /* 모바일에서는 간격 제거 */
    }
}

/* 이전 workspace-selector 스타일 (호환성 유지) */
.workspace-selector {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.workspace-selector label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9em;
}

.workspace-selector select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    background: white;
}

/* ========================================
   워크스페이스별 즐겨찾기 목록 스타일
   ======================================== */

.favorites-workspace-list {
    max-height: calc(100vh - 430px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 4px;
    margin: 0 4px;
}

.workspace-group {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.workspace-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 10px 15px;
    font-weight: 600;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.workspace-header:hover {
    background: linear-gradient(135deg, #2980b9, #21618c);
}

.workspace-toggle {
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.workspace-header.collapsed .workspace-toggle {
    transform: rotate(-90deg);
}

.workspace-content {
    overflow: visible;
    transition: max-height 0.3s ease;
}

.workspace-content.collapsed {
    max-height: 0;
}

.category-group {
    border-top: 1px solid #f0f0f0;
}

.category-header {
    background: #f8f9fa;
    padding: 8px 15px;
    font-weight: 600;
    font-size: 0.85em;
    color: #495057;
    border-left: 3px solid #6c757d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.category-header:hover {
    background: #e9ecef;
}

.category-toggle {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.category-header.collapsed .category-toggle {
    transform: rotate(-90deg);
}

.category-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.category-content.collapsed {
    max-height: 0;
}

.category-favorites {
    padding: 0;
}

.workspace-favorite-item {
    background: white;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 15px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.workspace-favorite-item:hover {
    background: #f8f9fa;
    border-left: 3px solid #3498db;
}

.workspace-favorite-item.selected {
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.workspace-favorite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.workspace-favorite-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.85em;
}

.workspace-favorite-actions {
    display: flex;
    gap: 4px;
}

.workspace-favorite-details {
    font-size: 0.75em;
    color: #666;
    margin-bottom: 2px;
}

.workspace-favorite-coords {
    font-size: 0.7em;
    color: #999;
    font-family: monospace;
}

/* Time interval controls styling */
.time-interval-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.time-interval-controls label {
    font-size: 0.8em;
    color: #5a6c7d;
    white-space: nowrap;
    margin: 0;
}

.time-interval-controls select {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0.8em;
    background: white;
    min-width: 80px;
}

/* Selection controls styling */

/* ===== css/style/style.08.css ===== */
.selection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    gap: 10px;
    flex-wrap: wrap;
}


.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #2c3e50;
    cursor: pointer;
    margin: 0;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 6px;
    cursor: pointer;
    transform: scale(1.1);
}

.clear-all-btn {
    background: #6B7280;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clear-all-btn:hover {
    background: #4B5563;
}

/* Bulk actions styling */
.bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.show-selected-btn {
    background: #34495e;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.show-selected-btn:hover {
    background: #1a252f;
}

.show-selected-btn:disabled {
    background: #95a5a6;
    cursor: not-allowed;
}

/* Map search summary styling */
.map-search-summary {
    margin-top: 10px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.map-search-summary .selected-count {
    font-size: 0.9em;
    color: #5a6c7d;
    margin: 0;
    text-align: center;
}

/* Map item checkbox styling */
.map-item-checkbox {
    cursor: pointer;
    transform: scale(1.1);
    margin-right: 8px;
}

/* Search results header responsive design */
@media (max-width: 400px) {
    .search-results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .time-interval-controls {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
    
    .selection-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .select-controls,
    .bulk-actions {
        justify-content: center;
    }
}

/* Form control styling for better consistency */
.form-control {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85em;
    background: white;
    color: #333;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* ========================================
   Tree View Styles for Favorites2
   ======================================== */

.favorites-tree-container {
    margin-top: 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fff;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}

.tree-view {
    padding: 10px;
}

/* Tree Node Base Styling */
.tree-node {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tree-node-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}

.tree-node-content:hover {
    background-color: #f8f9fa;
}

.tree-node-content.selected {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

/* Tree Toggle Button */
.tree-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
    transition: all 0.2s ease;
}

.tree-toggle:hover {
    background-color: #e9ecef;
    color: #333;
}

.tree-toggle.expanded::before {
    content: "▼";
}

.tree-toggle.collapsed::before {
    content: "▶";
}

.tree-toggle.no-children {
    visibility: hidden;
}

/* Tree Node Icons */
.tree-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.tree-icon.workspace {
    color: #3498db;
}

.tree-icon.category {
    color: #e67e22;
}

.tree-icon.favorite {
    color: #27ae60;
}

/* Tree Node Labels */
.tree-label {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.tree-label.workspace {
    font-weight: 600;
    color: #2c3e50;
}

.tree-label.category {
    font-weight: 500;
    color: #34495e;
}

.tree-label.favorite {
    font-weight: normal;
    color: #5a6c7d;
}

/* Tree Node Actions */
.tree-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.tree-node-content:hover .tree-actions {
    opacity: 1;
}

.tree-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #f8f9fa;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.tree-action-btn:hover {
    background: #e9ecef;
    transform: scale(1.1);
}

.tree-action-btn.view-btn {
    color: #3498db;
}

.tree-action-btn.eye-btn,
.favorite-action-btn.eye-btn,
.tree-content-toggle-btn.eye-btn {
    color: #3498db;
    font-size: 16px;
    transition: all 0.2s;
}

.tree-action-btn.eye-btn.eye-open,
.favorite-action-btn.eye-btn.eye-open,
.tree-content-toggle-btn.eye-btn.eye-open {
    color: #2ecc71;  /* 초록색 - 표시 중 */
}

.tree-action-btn.eye-btn.eye-closed,
.favorite-action-btn.eye-btn.eye-closed,
.tree-content-toggle-btn.eye-btn.eye-closed {
    color: #95a5a6;  /* 회색 - 숨김 */
}

.tree-action-btn.eye-btn:hover,
.favorite-action-btn.eye-btn:hover,
.tree-content-toggle-btn.eye-btn:hover {
    transform: scale(1.2);
}


/* Tree content toggle button styles */
.tree-content-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    font-size: 14px;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.tree-content-toggle-btn:hover {
    background-color: rgba(52, 152, 219, 0.1);
    opacity: 1;
}

.tree-content-toggle-btn:active {
    transform: scale(0.95);
}

/* Tree content actions container */
.tree-content-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tree content delete button styles */
.tree-content-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    font-size: 14px;
    transition: all 0.2s ease;
    color: #e74c3c;
    opacity: 0.7;
}

.tree-content-delete-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
    opacity: 1;
    transform: scale(1.1);
}

.tree-content-delete-btn:active {
    transform: scale(0.95);
}


/* 새로운 즐겨찾기 검색 디자인 */
.favorites-search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #dee2e6;
}

.search-header {
    margin-bottom: 12px;
    text-align: left;
}

.search-header h4 {
    margin: 0;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.search-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-input-container {
    width: 100%;
}

.search-box-with-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-checkbox {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.search-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 2px solid #ced4da;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #6c757d;
}

.search-checkbox input[type="checkbox"]:checked + .checkbox-label {
    background: #3498db;
    border-color: #3498db;
    color: white;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
}

.checkbox-label:hover {
    border-color: #3498db;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.search-checkbox input[type="checkbox"]:checked + .checkbox-label:hover {
    background: #2980b9;
    border-color: #2980b9;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-input::placeholder {
    color: #6c757d;
    font-style: italic;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: #6c757d;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.search-clear-btn:hover {
    background: #f8f9fa;
    color: #495057;
}



/* Favorite actions container */
.favorite-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.favorite-item:hover .favorite-actions {
    opacity: 1;
}

/* Favorite header layout */
.favorite-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.favorite-name {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

/* Tree Children */
.tree-children {
    margin-left: 28px;
    border-left: 1px dashed #ddd;
    padding-left: 0;
    transition: all 0.3s ease;
}

.tree-children.collapsed {
    display: none;
}

.tree-children .tree-node {
    position: relative;
}

.tree-children .tree-node::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 16px;
    width: 20px;
    height: 1px;
    border-top: 1px dashed #ddd;
}

/* Tree Node Details */
.tree-node-details {
    margin-left: 46px;
    padding: 4px 8px;
    font-size: 11px;
    color: #888;
    background: #f8f9fa;
    border-radius: 3px;
    margin-top: 4px;
    border-left: 2px solid #e9ecef;
}

.tree-coordinates {
    font-family: monospace;
    color: #666;
}

.tree-description {
    font-style: italic;
    color: #999;
    margin-top: 2px;
}

.tree-metadata {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.tree-geomtype {
    background: #e3f2fd;
    color: #1976d2;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
}

.tree-layername {
    color: #666;
    font-size: 10px;
}

/* Tree View Animations */
.tree-node {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tree Search/Filter */
.tree-search {
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    font-size: 13px;
}

.tree-search:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

/* Tree Empty State */
.tree-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-style: italic;
}

/* Scrollbar for tree container */
.favorites-tree-container::-webkit-scrollbar {
    width: 8px;
}

.favorites-tree-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.favorites-tree-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.favorites-tree-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ===============================
   Workspace Search Interface Styles
   =============================== */

/* Workspace search container */
.workspace-search-container {
    position: relative;
    margin-bottom: 15px;
}

.workspace-search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

.workspace-search-input:focus {
    outline: none;
    border-color: #4A90E2;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.workspace-search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
}

/* Filter options */
.workspace-filter-options {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #555;
}

.filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4A90E2;
}

.filter-option:hover {
    color: #333;
}

/* Workspace options container */
.workspace-options-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    background-color: #ffffff;
}

.workspace-options-container::-webkit-scrollbar {
    width: 6px;
}

.workspace-options-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.workspace-options-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.workspace-options-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Individual workspace option */
.workspace-option {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.workspace-option:hover {
    background-color: #f8f9fa;
    border-left: 4px solid #4A90E2;
}

.workspace-option.selected {
    background-color: #e3f2fd;
    border-left: 4px solid #4A90E2;
    box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.2);
}

.workspace-option:last-child {
    border-bottom: none;
}

/* Workspace option header */
.workspace-option-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.workspace-color-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.workspace-name {
    font-weight: 600;
    color: #333;
    flex: 1;
    font-size: 14px;
}

.workspace-favorite-icon {
    color: #ffc107;
    font-size: 14px;
    flex-shrink: 0;
}

/* Workspace description */
.workspace-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Workspace tags */
.workspace-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.workspace-tag {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid rgba(25, 118, 210, 0.2);
}

/* No workspaces message */
.no-workspaces-message {
    padding: 30px 20px;
    text-align: center;
    color: #666;
    font-style: italic;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* Enhanced workspace modal styles */
.workspace-modal .workspace-selection {
    margin-top: 20px;
}

.workspace-modal .workspace-selection h4 {
    margin-bottom: 15px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

/* Responsive design for smaller screens */

/* ===== css/style/style.09.css ===== */
@media (max-width: 768px) {
    .workspace-search-input {
        padding: 10px 35px 10px 12px;
        font-size: 13px;
    }
    
    .workspace-search-icon {
        right: 12px;
        font-size: 14px;
    }
    
    .workspace-option {
        padding: 12px;
    }
    
    .workspace-option-header {
        gap: 8px;
        margin-bottom: 6px;
    }
    
    .workspace-name {
        font-size: 13px;
    }
    
    .workspace-description {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .workspace-tag {
        padding: 2px 6px;
        font-size: 10px;
    }
}

/* ===============================
   Enhanced Workspace Select Styles
   =============================== */

/* Enhanced workspace select container */
.enhanced-workspace-select-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1; /* workspace-filter-section과 호환 */
}

/* workspace-filter-section 내부에서의 스타일링 조정 */
.workspace-filter-section .enhanced-workspace-select-container {
    flex: 1;
    gap: 6px;
}

.workspace-filter-section .workspace-select-search {
    position: relative;
    width: 100%;
}

.workspace-filter-section .workspace-select-search-input {
    width: 100%;
    padding: 6px 25px 6px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    background: white;
}

.workspace-filter-section .workspace-select-search i {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.8em;
    pointer-events: none;
}

.workspace-filter-section .workspace-select-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}

.workspace-filter-section .workspace-select-filters label {
    font-size: 0.8em;
    font-weight: normal;
    color: #666;
    width: auto;
    white-space: nowrap;
}


/* Workspace select search */
.workspace-select-search {
    position: relative;
}

.workspace-select-search-input {
    width: 100%;
    padding: 8px 30px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.workspace-select-search-input:focus {
    outline: none;
    border-color: #4A90E2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.workspace-select-search i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 12px;
}

/* Workspace select filters */
.workspace-select-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.workspace-select-filters label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    user-select: none;
}

.workspace-select-filters input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #4A90E2;
}

/* Enhanced workspace select */

/* Responsive design for enhanced select */
@media (max-width: 768px) {
    .workspace-select-search-input {
        padding: 6px 25px 6px 10px;
        font-size: 12px;
    }
    
    .workspace-select-search i {
        right: 8px;
        font-size: 11px;
    }
    
    .workspace-select-filters label {
        font-size: 11px;
        gap: 4px;
    }
    
    .workspace-select-filters input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }
}

/* ========================================
   Favorites Tree Structure Styles
   ======================================== */

/* Hide old favorite-item styles when tree structure is active */
.favorites-tree-group ~ .favorite-item,
#favoritesWorkspaceList:has(.favorites-tree-group) .favorite-item:not(.favorite-tree-item),
#favoritesWorkspaceList .favorite-item:not(.favorite-tree-item),
.workspace-favorite-item,
.workspace-favorites-list {
    display: none !important;
}

/* Tree Group Container */
.favorites-tree-group {
    margin-bottom: 5px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

/* Workspace Level (Level 1) */
.favorites-workspace-item {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 600;
}

.favorites-workspace-item:hover {
    background: #e9ecef;
}

.favorites-workspace-item.selected {
    background: #e3f2fd !important;
    color: #1976d2;
}

.favorites-workspace-item.selected .favorites-workspace-name {
    color: #1976d2;
}

.favorites-workspace-item.selected .favorites-workspace-count {
    background: #bbdefb;
    color: #1976d2;
}

.favorites-tree-expand {
    margin-right: 10px;
    font-size: 12px;
    width: 16px;
    text-align: center;
    color: #6c757d;
    transition: transform 0.2s;
}

.favorites-workspace-icon {
    margin-right: 10px;
    font-size: 16px;
}

.favorites-workspace-name {
    flex: 1;
    color: #2c3e50;
}

.favorites-workspace-count {
    font-size: 12px;
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 12px;
}

.favorites-workspace-content {
    background: #fdfdfd;
}

/* Category Level (Level 2) */
.favorites-category-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-left: 20px;
    border-left: 2px solid #e9ecef;
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
}

.favorites-category-item:hover {
    background: #f8f9fa;
}

.favorites-category-icon {
    margin-right: 8px;
    font-size: 14px;
}

.favorites-category-name {
    flex: 1;
    color: #495057;
    font-size: 14px;
}

.favorites-category-count {
    font-size: 11px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 10px;
}

.favorites-category-content {
    background: #fefefe;
}


/* Favorite Items (Level 3) */
.favorite-tree-item {
    display: flex;
    align-items: center;
    padding: 2px 20px;
    margin-left: 40px;
    border-left: 2px solid #f0f0f0;
    background: #ffffff;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s;
}

.favorite-tree-item:hover {
    background: #f8f9fa;
    border-left-color: #3498db;
}

.favorite-tree-item:last-child {
    border-bottom: none;
}

.favorite-tree-icon {
    margin-right: 12px;
    font-size: 12px;
    color: #3498db;
    margin-top: 2px;
}

.favorite-tree-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: text-align 0.2s ease;
}

.favorite-tree-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.favorite-tree-item:hover .favorite-tree-actions {
    opacity: 1;
}

.favorite-tree-content:hover {
    text-align: left;
}

.favorite-tree-name {
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 4px;
    word-break: break-word;
}

.favorite-tree-coords {
    font-size: 12px;
    color: #6c757d;
    font-family: monospace;
    margin-bottom: 4px;
}

.favorite-tree-description {
    font-size: 12px;
    color: #868e96;
    line-height: 1.4;
    word-break: break-word;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

.favorite-tree-description:hover {
    color: #868e96;
    margin: 0;
    padding: 0;
    text-indent: 0;
    transform: none;
}

/* 부모 요소 hover 상태에서도 favorite-tree-description 고정 */
.favorite-item:hover .favorite-tree-description,
.tree-node-content:hover .favorite-tree-description,
.workspace-favorite-item:hover .favorite-tree-description {
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.favorite-tree-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
    align-self: flex-start;
    margin-top: 2px;
}

.favorite-tree-actions .favorite-action-btn {
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.favorite-tree-actions .view-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    margin-right: 4px;
}

.favorite-tree-actions .view-btn:hover {
    background: #0056b3;
}


/* Empty states */
.favorites-tree-group:empty {
    display: none;
}

/* Responsive design for tree structure */
@media (max-width: 768px) {
    .favorites-category-item {
        margin-left: 15px;
    }
    
    .favorite-tree-item {
        margin-left: 30px;
        padding: 10px 15px;
    }
    
    .favorite-tree-icon {
        margin-right: 8px;
    }
    
    .favorite-tree-actions {
        margin-left: 8px;
    }
}

/* ========================================
   Enhanced Tree Structure Styles
   ======================================== */

/* Permission badges */
.favorites-workspace-permission {
    margin-right: 10px;
}

.permission-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.permission-badge.owner {
    background: #2ecc71;
    color: white;
}

.permission-badge.edit {
    background: #3498db;
    color: white;
}

.permission-badge.view {
    background: #95a5a6;
    color: white;
}

.permission-badge.none {
    background: #e74c3c;
    color: white;
}

/* Workspace actions */
.favorites-workspace-actions {
    display: flex;
    gap: 5px;
    margin-left: 8px;
}

.favorites-category-actions {
    display: flex;
    gap: 5px;
    margin-left: 8px;
}

.favorites-toggle-btn {
    background: #dc3545;  /* 기본 상태 (숨기기) - 빨간색 */
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 40px;
}

.favorites-toggle-btn:hover {
    background: #c82333;
    transform: translateY(-1px);
}

.favorites-toggle-btn:active {
    transform: translateY(0);
}

.favorites-toggle-btn.map-display-off {
    background: #007bff;  /* 지도표기 상태 - 파란색 */
    color: white;
}

.favorites-toggle-btn.map-display-off:hover {
    background: #0056b3;
}

.favorites-workspace-item {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 600;
}

.favorites-category-item {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    margin-left: 20px;
    background: white;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Search results */
.search-no-results {
    text-align: center;
    padding: 20px;
    color: #666;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    border-radius: 8px;
    margin: 10px;
}

.clear-search-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    font-size: 12px;
}

.clear-search-btn:hover {
    background: #0056b3;
}

/* Enhanced workspace item layout */
.favorites-workspace-item .favorites-workspace-name {
    flex: 1;
    margin-right: 10px;
}

.favorites-category-item .favorites-category-name {
    flex: 1;
    margin-right: 10px;
}

/* ========================================
   Map Reset Button Styles
   ======================================== */

.map-reset-button-container {
    position: absolute;
    bottom: 25px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.map-reset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(140, 40, 40, 0.92);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: all;
    box-shadow: none;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-reset-btn:hover {
    background: rgba(140, 40, 40, 1);
    transform: translateY(-1px);
}

.map-reset-btn:active {
    transform: translateY(0);
}

.map-reset-btn i {
    font-size: 16px;
    animation: none;
}

.map-reset-btn:hover i {
    animation: spin 0.5s ease-in-out;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.map-reset-btn span {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .map-reset-button-container {
        bottom: 15px;
        right: 15px;
    }
    
    .map-reset-btn {
        padding: 10px 14px;
        font-size: 13px;
        min-width: 90px;
    }
    
    .map-reset-btn i {
        font-size: 14px;
    }
}

/* Arrow marker styles for track data */
.arrow-marker {
    background: transparent !important;
    border: none !important;
    pointer-events: auto;
}

.arrow-marker div {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    font-weight: bold;
    transform-origin: center;
    transition: transform 0.2s ease;
}

/* 호버 효과 제거 */

/* === CTD 단면도 스타일 === */
.ctd-section-item {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    gap: 6px;
    transition: background 0.15s;
}
.ctd-section-item:hover {
    background: #f5f8fa;
}
.ctd-section-item__grip {
    color: #ccc;
    cursor: grab;
    font-size: 12px;
    flex-shrink: 0;
}
.ctd-section-item__num {
    font-size: 0.75em;
    color: #999;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.ctd-section-item__name {
    flex: 1;
    min-width: 0;
    font-size: 0.72em;
    color: #2c3e50;
    /* 긴 데이터명을 ...으로 자르지 않고 두 줄로 줄바꿈(긴 언더스코어 이름도 끊기게). 2줄 넘으면 말줄임. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ctd-section-item__actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.ctd-section-item__btn {
    width: 22px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    color: #888;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ctd-section-item__btn:hover {
    background: #e9ecef;
}
.ctd-section-item__btn:disabled {
    opacity: 0.3;
    cursor: default;
}
.ctd-section-item__btn--del:hover {
    background: #fee;
    color: #e74c3c;
    border-color: #e74c3c;
}
.ctd-section-add-row {
    padding: 7px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.ctd-section-add-row:hover {
    background: #eaf4fc;
}
.ctd-section-add-row.added {
    background: #f5f5f5;
    cursor: default;
    color: #aaa;
}

/* CTD Casting 리스트 패널 아이템 */
.ctd-casting-list-item {
    padding: 8px 12px;
    font-size: 0.78em;
    color: #555;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background 0.15s;
    white-space: normal;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.ctd-casting-list-item:hover {
    background: #e8f0fe;
}
.ctd-casting-list-item.active {
    background: #d4e6fc;
    color: #1a73e8;
    font-weight: 600;
    border-left: 3px solid #1a73e8;
}

/* 드래그 앤 드롭 */
.favorites-tree-group[draggable="true"],
.favorites-category-item[draggable="true"],
.favorite-tree-item[draggable="true"] {
    cursor: grab;
}
.favorites-tree-group[draggable="true"]:active,
.favorites-category-item[draggable="true"]:active,
.favorite-tree-item[draggable="true"]:active {
    cursor: grabbing;
}

/* 커스텀 포인트 마커 */
.point-marker-custom {
    background: transparent !important;
    border: none !important;
}

/* 단면도 선택 마커 번호 라벨 */
.section-marker-number {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === Sidebar rail layout (탈출 시 이 블록만 삭제하면 원래대로 돌아감) === */
.map-sidebar {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    flex-direction: row;
    background: transparent;
    border-right: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
}
.map-sidebar .search-form-container {
    display: flex;
    flex-direction: row;
    width: 60px;
    height: 100%;
    background: transparent !important;
    padding: 0 !important;
}
.map-sidebar .tab-container {
    flex-shrink: 0;
    width: 60px;
    margin: 0;
    background: #344d6e !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    height: 100%;
    overflow: hidden;
}
.map-sidebar .tab-buttons {
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: stretch;
    padding-top: 8px;
    gap: 2px;
}
.map-sidebar .tab-buttons .tab-btn {
    width: 100%;
    flex: 0 0 auto;
    padding: 24px 4px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
    line-height: 1.25;
    border-bottom: none;
    border-left: 3px solid transparent;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
}
.map-sidebar .tab-buttons .tab-btn.active {
    border-bottom-color: transparent;
    border-left-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
/* 떠있는 카드 컨테이너: 자체 배경 없음, 자식(조회조건/조회결과)을 각각 별도 카드로 표시 */
.map-sidebar .tab-wrapper,
#observation-wrapper,
#track-wrapper,
#favorites-wrapper {
    position: absolute !important;
    left: 76px;
    top: 24px;
    width: 280px;
    max-height: calc(100vh - 140px);
    overflow: visible;
    background: transparent !important;
    border: none;
    box-shadow: none;
    z-index: 1000;
}

/* ===== css/style/style.10.css ===== */
/* 카드 사이 간격을 위한 flex 컨테이너 (실제 카드들의 부모) */
.map-sidebar .tab-wrapper > .tab-content,
.map-sidebar .tab-wrapper > .tab-content.active,
#observation-wrapper > .tab-content,
#track-wrapper > .tab-content,
#favorites-wrapper > .tab-content,
#observation-tab,
#track-tab,
#favorites-search-tab.active,
#favorites-my-tab.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    /* 부모(wrapper, height:100%) 높이를 받아 내부 조회결과가 넘치면 스크롤되게 함.
       min-height:0 가 없으면 내용만큼 커져서 부모를 넘쳐 잘리고 스크롤이 안 생김(특히 ctd_casting 결과 多). */
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* 떠있는 개별 카드: 조회조건(search-form), 조회결과(map-search-results), 기타 박스 */
.map-sidebar .tab-wrapper .search-form,
.map-sidebar .tab-wrapper .map-search-results,
#observation-wrapper .search-form,
#observation-wrapper .map-search-results,
#track-wrapper .search-form,
#track-wrapper .map-search-results,
#favorites-wrapper .map-search-results,
#favorites-wrapper .search-form,
#favorites-search-tab .search-form,
#favorites-search-tab .favorites-search-results,
#favorites-search-tab #favoritesSearchResults {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    margin: 0 !important;
}
.map-sidebar .tab-wrapper .map-search-results,
#observation-wrapper .map-search-results,
#track-wrapper .map-search-results {
    max-height: 50vh;
    overflow-y: auto;
}
/* 조회조건 카드 안의 초기화/조회 버튼 가로 정렬 강제 */
#observation-wrapper .search-buttons,
#track-wrapper .search-buttons,
.map-sidebar .tab-wrapper .search-buttons {
    flex-wrap: nowrap !important;
}
#observation-wrapper .search-buttons button,
#track-wrapper .search-buttons button,
.map-sidebar .tab-wrapper .search-buttons button {
    min-width: 0 !important;
    flex: 1 1 0 !important;
}
.map-sidebar .tab-wrapper[style*="display: none"],
.map-sidebar .tab-wrapper[style*="display:none"] {
    display: none !important;
}
/* 지도 컨테이너가 사이드바 폭만큼만 밀리도록 (사이드바 60px만 차지) */
.map-container.sidebar-collapsed .map-sidebar {
    width: 0 !important;
    min-width: 0 !important;
}
/* 사이드바 닫기 버튼, 크기조절 핸들 숨김 */
.sidebar-toggle,
.sidebar-resizer {
    display: none !important;
}
/* 영역 선택 모드 커서 — 검은 십자 (사각형용) */
.leaflet-container.area-select-cursor,
.leaflet-container.area-select-cursor .leaflet-interactive,
.leaflet-container.area-select-cursor.leaflet-grab,
.leaflet-container.area-select-cursor .leaflet-grab {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'><rect x='11' y='0' width='2' height='24' fill='black'/><rect x='0' y='11' width='24' height='2' fill='black'/></svg>") 12 12, crosshair !important;
}
/* 영역 선택 모드 커서 — 검은 점 (폴리곤용) */
.leaflet-container.area-select-dot-cursor,
.leaflet-container.area-select-dot-cursor .leaflet-interactive,
.leaflet-container.area-select-dot-cursor.leaflet-grab,
.leaflet-container.area-select-dot-cursor .leaflet-grab {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='8' cy='8' r='3.5' fill='black'/></svg>") 8 8, crosshair !important;
}
/* 영역 선택 시 마우스 따라다니는 좌표 툴팁 */
#coord-cursor-tooltip {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.78) !important;
    color: #fff !important;
    padding: 2px 6px;
    font-size: 11px;
    font-family: 'Consolas', 'Menlo', monospace;
    border-radius: 3px;
    display: none;
    white-space: nowrap;
    border: none;
    box-shadow: none;
}
/* 확정 클릭 지점 좌표 라벨 (Leaflet 기본 흰배경 덮어쓰기) */
.leaflet-tooltip.coord-point-label,
.leaflet-tooltip-pane .leaflet-tooltip.coord-point-label {
    background: rgba(0, 0, 0, 0.78) !important;
    background-color: rgba(0, 0, 0, 0.78) !important;
    color: #fff !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    font-family: 'Consolas', 'Menlo', monospace !important;
    border-radius: 3px !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}
/* Leaflet 툴팁 화살표 제거 (모든 방향) */
.leaflet-tooltip.coord-point-label::before,
.leaflet-tooltip-top.coord-point-label::before,
.leaflet-tooltip-bottom.coord-point-label::before,
.leaflet-tooltip-left.coord-point-label::before,
.leaflet-tooltip-right.coord-point-label::before {
    display: none !important;
    border: none !important;
}
/* 사용자 업로드 포인트 영구 라벨 — 마커 옆에 항상 표시 */
.leaflet-tooltip.sg-permanent-label,
.leaflet-tooltip-pane .leaflet-tooltip.sg-permanent-label {
    background: transparent !important;
    background-color: transparent !important;
    color: #1f2d3d !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}
.leaflet-tooltip.sg-permanent-label::before,
.leaflet-tooltip-top.sg-permanent-label::before,
.leaflet-tooltip-bottom.sg-permanent-label::before,
.leaflet-tooltip-left.sg-permanent-label::before,
.leaflet-tooltip-right.sg-permanent-label::before {
    display: none !important;
    border: none !important;
}
/* 사각형 그리기 안내 팝업 (마우스 따라다님) */
#rect-draw-hint,
#polygon-finish-hint {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: rgba(51, 136, 255, 0.92);
    color: #fff;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: none;
    white-space: nowrap;
}
/* 폴리곤 완료 안내 팝업 (우클릭으로 완성) */
.leaflet-tooltip.polygon-finish-hint,
.leaflet-tooltip-pane .leaflet-tooltip.polygon-finish-hint {
    background: rgba(51, 136, 255, 0.92) !important;
    background-color: rgba(51, 136, 255, 0.92) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
}
.leaflet-tooltip.polygon-finish-hint::before,
.leaflet-tooltip-top.polygon-finish-hint::before,
.leaflet-tooltip-bottom.polygon-finish-hint::before,
.leaflet-tooltip-left.polygon-finish-hint::before,
.leaflet-tooltip-right.polygon-finish-hint::before {
    display: none !important;
    border: none !important;
}
/* 관측데이터 탭 카드 가로 폭을 항적 탭과 동일하게 통일 */
#observation-wrapper .search-form,
#observation-wrapper .map-search-results {
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
}
/* === 항적 탭 다크 테마: 관측데이터와 디자인 통일 === */
#track-wrapper .search-form,
#track-wrapper .map-search-results {
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
}
#track-wrapper .search-form {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#track-wrapper .search-form-header {
    background: transparent !important;
    color: #ffffff !important;
}
#track-wrapper .search-form-header::after {
    background: rgba(255, 255, 255, 0.15) !important;
}
#track-wrapper .filter-section,
#track-wrapper .spatial-filter-section {
    background: transparent !important;
    color: #ffffff !important;
}
#track-wrapper .form-group label {
    color: #ffffff !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: block !important;
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif !important;
}
#track-wrapper .form-control,
#track-wrapper select,
#track-wrapper input[type="text"],
#track-wrapper input[type="date"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    height: 30px !important;
    font-size: 0.75em !important;
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif !important;
    box-sizing: border-box;
}
/* 날짜 input 안에 표시되는 값(YYYY-MM-DD)도 동일 폰트 */
#track-wrapper input#trackStartDate,
#track-wrapper input#trackEndDate {
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif !important;
    flex: 0 1 116px !important;
    max-width: 116px !important;
    height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.72em !important;
}
/* 항적 input 자동완성/선택 후에도 빈 박스와 동일한 흰 반투명 배경 유지 */
#track-wrapper input:-webkit-autofill,
#track-wrapper input:-webkit-autofill:hover,
#track-wrapper input:-webkit-autofill:focus,
#track-wrapper input:-webkit-autofill:active,
#shipName:-webkit-autofill,
#shipName:-webkit-autofill:hover,
#shipName:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08) inset !important;
    caret-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s !important;
}
/* 조회 기간 날짜 입력만 살짝 크게 */
#track-wrapper input[type="date"] {
    font-size: 0.78em !important;
    height: 32px !important;
}
/* === 즐겨찾기 탭 다크 테마: 관측데이터/항적과 디자인 통일 === */
/* 서브탭 버튼: 하나의 박스 안에서 토글 (segmented control 스타일) */
#favorites-wrapper .sub-tab-buttons,
#favorites-wrapper .favorites-sub-tabs .sub-tab-buttons {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 4px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    /* 레이아웃 흐름은 안 건드리고(부모 높이/형제 위치 유지) 시각적으로만 위로 -6px */
    transform: translateY(-6px) !important;
    margin-bottom: 14px !important;
}
#favorites-wrapper .sub-tab-btn {
    flex: 1 1 0 !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    transition: background 0.2s, color 0.2s !important;
}
#favorites-wrapper .sub-tab-btn.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
#favorites-wrapper .sub-tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
/* 즐겨찾기 검색 폼 */
#favorites-search-tab .search-form {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#favorites-search-tab .form-group label {
    color: #ffffff !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    display: block !important;
    font-family: 'Segoe UI', 'Pretendard', -apple-system, sans-serif !important;
}
#favorites-search-tab .form-group input,
#favorites-search-tab .form-group select {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    height: 30px !important;
    font-size: 0.75em !important;
}
#favorites-search-tab .form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 24px !important;
}
#favorites-search-tab .form-group select option {
    background: rgb(35, 70, 110) !important;
    color: #ffffff !important;
}
#favorites-search-tab .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#favorites-search-tab .form-group input:focus,
#favorites-search-tab .form-group select:focus,
#favorites-search-tab .form-group input:focus-visible,
#favorites-search-tab .form-group select:focus-visible {
    border-color: #2a5090 !important;
    outline: none !important;
    box-shadow: none !important;
}
/* 조회/초기화 버튼: 관측데이터와 동일 톤 */
#favorites-search-tab .search-btn {
    background: rgba(30, 60, 120, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #2a5090 !important;
}
#favorites-search-tab .search-btn:hover {
    background: rgba(30, 60, 120, 0.55) !important;
    border-color: #2a5090 !important;
}
#favorites-search-tab .clear-all-btn {
    background: rgba(140, 40, 40, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #8c2828 !important;
}
#favorites-search-tab .clear-all-btn:hover {
    background: rgba(140, 40, 40, 0.55) !important;
    border-color: #8c2828 !important;
}
/* 조회 결과 영역 */
#favorites-search-tab .favorites-search-results,
#favorites-search-tab #favoritesSearchResults {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
}
#favorites-search-tab .no-results,
#favorites-search-tab .no-results p {
    color: #ffffff !important;
}
#track-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 24px !important;
}
#track-wrapper select option {
    background: rgb(35, 70, 110) !important;
    color: #ffffff !important;
}
#track-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
#track-wrapper input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
#track-wrapper .form-control:focus,
#track-wrapper select:focus,
#track-wrapper input[type="text"]:focus,
#track-wrapper input[type="date"]:focus {
    border-color: #2a5090 !important;
    outline: none !important;
    box-shadow: none !important;
}
#track-wrapper .date-range span {
    color: #ffffff !important;
    font-size: 0.7em !important;
}

#track-wrapper .collapsible-header {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
#track-wrapper .collapsible-header.collapsed {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
#track-wrapper .collapsible-content {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#track-wrapper .attribute-section {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#track-wrapper .search-buttons {
    background: transparent !important;
}
#track-wrapper .search-btn {
    background: rgba(30, 60, 120, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #2a5090 !important;
}
#track-wrapper .search-btn:hover {
    background: rgba(30, 60, 120, 0.55) !important;
}
#track-wrapper .clear-all-btn {
    background: rgba(140, 40, 40, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #8c2828 !important;
}
#track-wrapper .clear-all-btn:hover {
    background: rgba(140, 40, 40, 0.55) !important;
    border-color: #8c2828 !important;
}
#track-wrapper .map-search-results {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 12px !important;
}
#track-wrapper .no-results,
#track-wrapper .no-results p {
    color: #ffffff !important;
}
#track-wrapper .track-results-header {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#track-wrapper .track-results-header h4,
#track-wrapper .track-results-header h4 span {
    color: #ffffff !important;
}
/* 선박 리스트 카드 (.table-card): 흰 반투명 배경 + 흰 글씨 */
#track-wrapper .table-card,
#track-wrapper .map-search-results .table-card,
#track-wrapper #trackSearchResults .table-card,
#trackSearchResults .table-card {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}
#track-wrapper .table-card:hover,
#track-wrapper .map-search-results .table-card:hover,
#trackSearchResults .table-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}
#track-wrapper .table-card .table-header h3,
#track-wrapper .table-card .table-description,
#track-wrapper .table-card .table-description strong,
#track-wrapper .table-card p,
#track-wrapper .table-card span,
#track-wrapper .table-card label {
    color: #ffffff !important;
}
/* 테이블 카드 체크박스: 크기 축소 + 약간 오른쪽으로 이동 + 글씨와 간격 좁힘 */
#track-wrapper .table-card .table-checkbox {
    margin-left: 4px !important;
    margin-right: 4px !important;
    flex-shrink: 0;
}
#track-wrapper .table-card .table-checkbox input[type="checkbox"],
#track-wrapper .table-card .ship-checkbox {
    width: 12px !important;
    height: 12px !important;
}
/* 타임라인 컨테이너: 흰 반투명 배경 + 흰 글씨 */
#track-wrapper .timeline-container,
#trackSearchResults .timeline-container {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
    color: #ffffff !important;
}
#track-wrapper .timeline-container *,
#trackSearchResults .timeline-container * {
    color: #ffffff !important;
}
#track-wrapper .timeline-container .timeline-bar,
#trackSearchResults .timeline-container .timeline-bar {
    background: rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    overflow: visible !important;
}
/* 결과 헤더 + 컨트롤 영역도 흰색 텍스트 */
#track-wrapper .results-header,
#track-wrapper .results-header h3,
#track-wrapper .results-header h3 span,
#track-wrapper .track-controls,
#track-wrapper .track-controls .select-controls span {
    color: #ffffff !important;
}
/* track-controls 박스: 초기화 버튼과 같은 반투명 흰색, 안 글씨 모두 흰색 */
#track-wrapper .track-controls,
#trackSearchResults .track-controls {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}
#track-wrapper .track-controls,
#track-wrapper .track-controls *,
#trackSearchResults .track-controls,
#trackSearchResults .track-controls * {
    color: #ffffff !important;
}
#track-wrapper .track-controls .select-controls,
#track-wrapper .track-controls .bulk-controls,
#trackSearchResults .select-controls,
#trackSearchResults .bulk-controls {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
#track-wrapper .track-controls .bulk-controls .view-table-btn,
#trackSearchResults .bulk-controls .view-table-btn {
    background: rgb(56, 86, 148) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 3px 9px !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
#track-wrapper .track-controls .bulk-controls .view-table-btn:hover,
#trackSearchResults .bulk-controls .view-table-btn:hover,
#track-wrapper .track-controls .bulk-controls .view-table-btn:hover:not(:disabled),
#trackSearchResults .bulk-controls .view-table-btn:hover:not(:disabled) {
    background: rgb(45, 70, 122) !important;
}
/* shipName 자동완성 리스트: seaflow 배경 + 흰 글씨 */
#shipName-autocomplete-list,
#track-wrapper .autocomplete-items {
    background: #344d6e !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
#shipName-autocomplete-list div,
#track-wrapper .autocomplete-items div {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#shipName-autocomplete-list div:hover,
#track-wrapper .autocomplete-items div:hover {
    background-color: #3e5a80 !important;
}
#shipName-autocomplete-list .autocomplete-active,
#track-wrapper .autocomplete-active {
    background-color: #4a6995 !important;
    color: #ffffff !important;
}
#track-wrapper .track-actions {
    background: #344d6e !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
/* 항적 조회결과 영역 안의 모든 텍스트 흰색 강제 (인라인 color 무시) */
#track-wrapper .map-search-results,
#track-wrapper .map-search-results * {
    color: #ffffff !important;
}
/* 내 즐겨찾기 탭: Workspace 통합 패널 + 내 측정 + 즐겨찾기 트리 컨테이너 검정 글래스 */
#favorites-my-tab .favorites-workspace-combined,
#favorites-my-tab .favorites-measure-list,
#favorites-my-tab .favorites-tree-container {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* 내 측정 패널 안의 내부 흰박스(트리 그룹) 제거 → 목록만 나열 */
#favorites-my-tab .favorites-measure-list .favorites-tree-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
/* 내 측정 항목: 좌측 들여쓰기 + 세로 선 제거 */
#favorites-my-tab .favorites-measure-list .measure-favorite-item,
#favorites-my-tab .favorites-measure-list .favorite-tree-item {
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 10px !important;
}
/* 내 측정 헤더 아래 가로 선 제거 */
#favorites-my-tab .favorites-measure-list .favorites-workspace-item {
    border-bottom: none !important;
}
/* 워크스페이스 목록: 박스가 아니라 선으로 구분 */
#favorites-my-tab .favorites-workspace-list .favorites-tree-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 0 !important;
}
#favorites-my-tab .favorites-workspace-list .favorites-tree-group:last-child {
    border-bottom: none !important;
}
/* 통합 패널 내부 자식들은 별도 배경/테두리 없이 평평하게 */
#favorites-my-tab .favorites-workspace-combined .favorites-search-section,
#favorites-my-tab .favorites-workspace-combined .favorites-workspace-list {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}
/* 검색 섹션: 자체 구분선 제거 — 선은 아래 워크스페이스 리스트의 border-top으로 이동 */
#favorites-my-tab .favorites-workspace-combined .favorites-search-section {
    padding-bottom: 6px;
    border-bottom: none !important;
}
/* 워크스페이스 목록: scrollbar-gutter 제거 — 우측에 항상 예약되던 8px 빈공간 없애서 좌우 시각적 대칭 */
#favorites-my-tab .favorites-workspace-combined .favorites-workspace-list {
    max-height: 42vh !important;
    overflow-y: auto !important;
}
/* 첫 번째 워크스페이스 그룹의 상단에 구분선 — 아이템 border-bottom과 같은 너비로 자동 정렬 */
#favorites-my-tab .favorites-workspace-list .favorites-tree-group:first-child {
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}
/* 워크스페이스 행 hover 배경이 라인 끝까지 꽉 채우도록 좌우 padding은 유지하되 박스는 full-width */
#favorites-my-tab .favorites-workspace-list .favorites-workspace-item {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* 새로고침 버튼 세로 높이 축소 */
#favorites-my-tab .refresh-btn {
    padding: 2px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
/* 내 측정 패널: 워크스페이스 목록과 시각적으로 분리 */
#favorites-my-tab .favorites-measure-list {
    margin-top: 12px !important;
    padding: 8px !important;
    max-height: 40vh;
    overflow-y: auto;
}

/* 검색 박스 가로 확장 — 컨테이너 풀폭 사용 */
#favorites-my-tab .search-box-with-filter,
#favorites-my-tab .search-box,
#favorites-my-tab .search-input-container {
    width: 100% !important;
}
#favorites-my-tab .search-box {
    flex: 1 1 auto !important;
}
/* 별 아이콘 좌측으로 이동 + 별과 검색박스 사이 적당한 간격 */
#favorites-my-tab .search-box-with-filter {
    gap: 8px !important;
}
#favorites-my-tab .search-checkbox {
    margin-left: -6px !important;
}

/* 편집 중인 측정 즐겨찾기의 편집 아이콘 활성 표시 */
.tree-content-edit-btn.editing-active {
    background: rgba(194, 65, 12, 0.18) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px rgba(194, 65, 12, 0.6) inset;
}
.tree-content-edit-btn.editing-active i {
    color: #c2410c !important;
    animation: measureEditPulse 1.4s ease-in-out infinite;
}
@keyframes measureEditPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}
/* 워크스페이스 카드(.favorites-tree-group)는 흰 테두리 + 흰색 반투명 배경 — 그룹 전체에는 hover 없음 */
#favorites-my-tab .favorites-tree-group {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
}
/* 워크스페이스 행: 기본 투명, 직접 hover 시에만 살짝 밝게 */
#favorites-my-tab .favorites-workspace-item {
    background: transparent !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
#favorites-my-tab .favorites-workspace-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* 카테고리/즐겨찾기 행은 원래 박스 없음 — 색깔만 어두운 톤에 맞춰 변경 */
#favorites-my-tab .favorites-category-item,
#favorites-my-tab .favorite-tree-item {
    background: transparent !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
#favorites-my-tab .favorites-category-item {
    margin-left: 15px !important;
}
/* 지도표기 버튼을 관측데이터 조회버튼과 동일 스타일로 (밝은 톤 위에 올라가므로 더 진하게) */
#favorites-my-tab .favorites-toggle-btn.map-display-off {
    background: rgba(30, 60, 120, 0.85) !important;
    color: #ffffff !important;
    border: 1.5px solid #2a5090 !important;
}
#favorites-my-tab .favorites-toggle-btn.map-display-off:hover {
    background: rgba(30, 60, 120, 1) !important;
    border-color: #2a5090 !important;
}
#favorites-my-tab .favorite-tree-item {
    border-left-color: rgba(255, 255, 255, 0.25) !important;
}
#favorites-my-tab .favorites-category-item:hover,
#favorites-my-tab .favorite-tree-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* 워크스페이스/카테고리 펼침 컨테이너는 원래 박스 없음 — 배경 투명 + 글자색 흰색 */
#favorites-my-tab .favorites-workspace-content,
#favorites-my-tab .favorites-category-content {
    background: transparent !important;
    color: #ffffff !important;
}
/* 즐겨찾기 행: 텍스트(.favorite-tree-content)와 우측 아이콘(.tree-content-actions) 사이 간격 */
#favorites-my-tab .favorite-tree-item .tree-content-actions {
    margin-left: 14px !important;
}
/* 텍스트 영역(.favorite-tree-content) 가로 폭 확보 — 좌우 10px / 상하 3px */
#favorites-my-tab .favorite-tree-item {
    padding: 3px 10px !important;
    margin-left: 30px !important;
}
#favorites-my-tab .favorite-tree-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
/* 폴더 리스트 스크롤바 디자인을 관측 데이터 결과 영역과 동일하게 */
#favorites-my-tab .favorites-workspace-list::-webkit-scrollbar,
#favorites-my-tab .favorites-measure-list::-webkit-scrollbar,
#favorites-my-tab .favorites-tree-container::-webkit-scrollbar {
    width: 8px;
}
#favorites-my-tab .favorites-workspace-list::-webkit-scrollbar-track,
#favorites-my-tab .favorites-measure-list::-webkit-scrollbar-track,
#favorites-my-tab .favorites-tree-container::-webkit-scrollbar-track {
    background: transparent;
}
#favorites-my-tab .favorites-workspace-list::-webkit-scrollbar-thumb,
#favorites-my-tab .favorites-measure-list::-webkit-scrollbar-thumb,
#favorites-my-tab .favorites-tree-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    transition: background 0.3s;
}
#favorites-my-tab .favorites-workspace-list:hover::-webkit-scrollbar-thumb,
#favorites-my-tab .favorites-measure-list:hover::-webkit-scrollbar-thumb,
#favorites-my-tab .favorites-tree-container:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}
#favorites-my-tab .favorites-workspace-list:hover::-webkit-scrollbar-thumb:hover,
#favorites-my-tab .favorites-measure-list:hover::-webkit-scrollbar-thumb:hover,
#favorites-my-tab .favorites-tree-container:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}
#favorites-my-tab .favorites-search-section .search-header h4,
#favorites-my-tab .favorites-workspace-list,
#favorites-my-tab .favorites-measure-list,
#favorites-my-tab .favorites-tree-container,
#favorites-my-tab .favorites-search-section,
#favorites-my-tab .favorites-search-section *,
#favorites-my-tab .favorites-workspace-list *,
#favorites-my-tab .favorites-measure-list *,
#favorites-my-tab .favorites-tree-container * {
    color: #ffffff !important;
}
/* 내부 입력 박스/체크박스 라벨도 어두운 톤에 맞춰 조정 + 높이 축소 */
#favorites-my-tab .search-input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 6px 36px 6px 12px !important;
    font-size: 13px !important;
}
#favorites-my-tab .search-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}
#favorites-my-tab .checkbox-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #FFD700 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 2px 0 0 !important;
    font-size: 18px !important;
    transform: none !important;
}
#favorites-my-tab .checkbox-label:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    filter: brightness(1.15);
}
#favorites-my-tab .search-checkbox input[type="checkbox"]:checked + .checkbox-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #FFD700 !important;
}
/* 즐겨찾기 조회 서브탭: 조회조건/검색결과 글씨 흰색 + 버튼 관측데이터 스타일과 동일 */
#favorites-search-tab .search-form,
#favorites-search-tab .search-form *,
#favorites-search-tab .favorites-search-results,
#favorites-search-tab .favorites-search-results *,
#favorites-search-tab #favoritesSearchResults,
#favorites-search-tab #favoritesSearchResults * {
    color: #ffffff !important;
}
#favorites-search-tab .search-form input,
#favorites-search-tab .search-form select {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
#favorites-search-tab .search-form input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}
#favorites-search-tab .search-form .search-btn {
    background: rgba(30, 60, 120, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #2a5090 !important;
}
#favorites-search-tab .search-form .search-btn:hover {
    background: rgba(30, 60, 120, 0.55) !important;
    border-color: #2a5090 !important;
}
#favorites-search-tab .search-form .clear-all-btn {
    background: rgba(140, 40, 40, 0.4) !important;
    color: #ffffff !important;
    border: 1.5px solid #8c2828 !important;
}
#favorites-search-tab .search-form .clear-all-btn:hover {
    background: rgba(140, 40, 40, 0.55) !important;
    border-color: #8c2828 !important;
}
/* 검색 결과 헤더(검색 결과 N개): 박스 제거 → 하단 선만 */
#favorites-search-tab .search-results-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0 !important;
    padding: 15px !important;
}
#favorites-search-tab .search-results-header,
#favorites-search-tab .search-results-header h4 {
    color: #ffffff !important;
}
/* 검색 결과 항목 사이 구분선을 더 얇고 은은하게 */
#favorites-search-tab .search-result-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#favorites-search-tab .search-result-item:hover,
#favorites-search-tab .search-result-item.selected {
    background: rgba(255, 255, 255, 0.06) !important;
}
/* 검색 결과 텍스트: 내 즐겨찾기 폴더 글씨와 동일한 두께(400), 크기 14px */
#favorites-search-tab .search-result-name,
#favorites-search-tab .search-result-item,
#favorites-search-tab .search-result-item * {
    font-weight: 400 !important;
    font-size: 14px !important;
}
/* 레이어 정보 글씨는 더 작게 (10px) */
#favorites-search-tab .search-result-item .search-result-layer,
#favorites-search-tab .search-result-item .search-result-meta,
#favorites-search-tab .search-result-item .search-result-meta * {
    font-size: 10px !important;
}
/* 추가/삭제 버튼 — 글씨/크기 살짝 작게 */
#favorites-search-tab .search-result-item .search-result-btn,
#favorites-search-tab .search-result-item .search-result-btn * {
    font-size: 12px !important;
    padding: 4px 9px !important;
}
/* 관측/즐겨찾기/항적 조회결과 영역: 결과 유무에 따라 자연스럽게 늘어나도록 (조회 전: no-results 크기, 조회 후: 결과만큼 확장) */
#observationSearchResults,
#favorites-search-tab .favorites-search-results,
#favorites-search-tab #favoritesSearchResults,
#trackSearchResults {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
}
/* 즐겨찾기 조회결과 max 높이 축소 */
#favorites-search-tab .favorites-search-results,
#favorites-search-tab #favoritesSearchResults {
    max-height: 57vh !important;
}
/* 조회 버튼을 눌러 결과를 본 상태(.searched): 결과 개수+1 만큼 높이를 JS가 inline으로 설정, 최대 500px */
#observationSearchResults.searched {
    flex: 0 1 auto !important;
    max-height: 500px !important;
}
/* 수온/염분 공간분포(ctd_casting)일 때만: 결과 박스가 항상 leftover 공간을 다 채워서
   CTD Casting Heatmap 버튼이 컨테이너 바닥에 anchor되게 함.
   → form이 펼쳐져도 결과 박스 아래쪽(=ctd-btn 위쪽)은 고정되고 위쪽만 움직임 */
#observationSearchResults.searched.with-ctd-btn {
    /* grow 안 함 + JS가 '가용 높이(폼·버튼 제외)'로 height 지정 → 버튼이 안 잘리고 목록은 스크롤.
       max-height는 안전 천장(JS 실패 시 대비)이고 실제 높이는 JS가 제어. */
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}
#ctdSectionPanel {
    /* 항목 수와 무관하게 항상 같은 고정 길이(60vh) 유지.
       flex-shrink 를 0 으로(+min-height) 잠가, 첫 로드 때 부모 높이가 덜 잡혀도
       패널이 60vh 보다 작게 줄어들어(잘려) 보이지 않게 한다. */
    flex: 0 0 auto !important;
    height: 60vh !important;
    min-height: 60vh !important;
    max-height: 60vh !important;
}
/* 항적 조회결과: 조회 누른 후 더 크게 확장 */
#trackSearchResults.searched {
    flex: 1 1 auto !important;
    height: 70vh !important;
    max-height: 70vh !important;
}
/* 항적 조회결과 스크롤바: 관측/즐겨찾기와 동일 디자인 (항상 보이는 흰색 반투명) */
#trackSearchResults::-webkit-scrollbar,
#track-wrapper .map-search-results::-webkit-scrollbar {
    width: 8px;
}
#trackSearchResults::-webkit-scrollbar-track,
#track-wrapper .map-search-results::-webkit-scrollbar-track {
    background: transparent;
}
#trackSearchResults::-webkit-scrollbar-thumb,
#track-wrapper .map-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px;
}
#trackSearchResults::-webkit-scrollbar-thumb:hover,
#track-wrapper .map-search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55) !important;
}
/* CTD Casting Heatmap 단면도 리스트 스크롤바: 위와 동일 디자인(흰색 반투명) */
#ctdSectionList::-webkit-scrollbar {
    width: 8px;
}
#ctdSectionList::-webkit-scrollbar-track {
    background: transparent;
}
#ctdSectionList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px;
}
#ctdSectionList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55) !important;
}
/* CTD 버튼 박스: 결과 박스 바로 아래에서 한 박스처럼 보이도록 스타일 */
/* #observation-tab의 flex gap(14px) 상쇄를 위해 margin-top -14px */
/* 위 결과 박스가 margin:0/width:100%로 풀폭이라 동일하게 맞춤 */
#ctdSectionBtnArea {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    padding: 8px 20px !important;
    margin: -14px 0 0 0 !important;
    width: 100% !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}
/* 버튼 자체는 투명 (테두리만 유지), 배경의 다크글래스가 그대로 보이도록 */
#ctdSectionBtnArea > button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#ctdSectionBtnArea > button:hover {
    background: rgba(52, 152, 219, 0.15) !important;
}
/* 결과 박스가 CTD 버튼 박스와 붙을 때 하단 라운드 제거 + 하단 마진 제거로 간격 0 */
#observationSearchResults.with-ctd-btn {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}
/* CTD 패널 열렸을 때 숨김 (어떤 CSS도 못 이기도록 강제) */
.ctd-hidden,
#observationSearchResults.ctd-hidden,
#ctdSectionBtnArea.ctd-hidden {
    display: none !important;
}
/* CTD Casting Heatmap 패널(검정 배경) 안의 단면도 항목 텍스트를 흰색으로 */
#ctdSectionPanel .ctd-section-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
#ctdSectionPanel .ctd-section-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
#ctdSectionPanel .ctd-section-item__grip {
    color: rgba(255, 255, 255, 0.5) !important;
}
#ctdSectionPanel .ctd-section-item__num {
    color: rgba(255, 255, 255, 0.7) !important;
}
#ctdSectionPanel .ctd-section-item__name {
    color: #ffffff !important;
}
#ctdSectionPanel .ctd-section-item__btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}
#ctdSectionPanel .ctd-section-item__btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
/* CTD 패널 초기화 버튼 hover: 조회조건(관측) 초기화 버튼과 동일(인라인 배경을 이기려 !important) */
.ctd-section-clear-btn:hover {
    background: rgba(140, 40, 40, 0.55) !important;
    border-color: #8c2828 !important;
}
#ctdSectionPanel .ctd-section-item__btn--del:hover {
    background: rgba(231, 76, 60, 0.25) !important;
    color: #ff7e6e !important;
    border-color: #e74c3c !important;
}
/* '그래프 생성' 버튼: 쨍한 블루 (글로우 없이 순수 색상만) */
#ctdSectionGenerateBtn {
    background: #1e9bff !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}
#ctdSectionGenerateBtn:not(:disabled):hover {
    background: #3aa9ff !important;
    box-shadow: none !important;
}
#ctdSectionGenerateBtn:disabled {
    box-shadow: none !important;
}
/* 조회조건이 접히면 결과 영역이 남은 공간을 채우도록 확장 — 단, 조회를 누른 상태(.searched)에서만 */
/* 관측데이터: 결과가 max-height를 초과해서 스크롤이 생긴 경우(.has-overflow)에만 확장 */
#observation-wrapper .search-form.collapsed ~ #observationSearchResults.searched.has-overflow,
#observationSearchResults.transitioning-uncollapse {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}
#track-wrapper .search-form.collapsed ~ #trackSearchResults.searched,
#track-wrapper .search-form.collapsed ~ .map-search-results.searched {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}

/* ================================================================== */
/* === 모바일 UI 마이그레이션 (GeoNode 옛 버전에서 통째로 이식) ====== */
/* === PC 레이아웃은 절대 안 건드림 — 미디어 쿼리 안에서만 동작 ===== */
/* === 배경색은 사이드바 탭 컨테이너와 동일 네이비 #344d6e 적용 ===== */
/* ================================================================== */

/* 모바일 헤더 반응형 (햄버거 메뉴) — 세로/가로 모드 둘 다 */
@media (max-width: 768px), (max-height: 500px) {
    header {
        padding: 10px 14px;
        flex-wrap: wrap;
    }
    header h1 {
        font-size: 1.15em;
        margin: 0;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    header nav,
    header .auth-section {
        display: none;
        flex-basis: 100%;
        width: 100%;
    }
    header.mobile-menu-open nav {
        display: block;
        border-top: 1px solid rgba(255,255,255,0.15);
        margin-top: 10px;
        padding-top: 8px;
    }
    header.mobile-menu-open .auth-section {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 8px;
    }
    header nav ul {
        flex-direction: column;
        gap: 4px;
        padding: 0;
        margin: 0;
    }
    header nav a {
        display: block;
        padding: 10px 12px;
        font-size: 0.95em;
        border-radius: 4px;
    }
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    header.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* 모바일: 사이드바를 바텀시트로 — 세로/가로 모드 둘 다 */
@media (max-width: 768px), (max-height: 500px) {
    .map-sidebar {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 55vh !important;
        height: 55dvh !important;
        max-height: 80vh !important;
        max-height: 80dvh !important;
        background: #344d6e !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        border: none !important;
        transition: transform 0.3s ease;
        display: block !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-top: 0 !important;
        z-index: 999 !important;
    }
    .map-sidebar::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    /* 접힘 상태: 시트는 완전히 화면 밖으로 — 탭/내용 안 보임 */
    .map-sidebar.collapsed {
        transform: translateY(100%) !important;
    }
    .sidebar-resizer {
        display: none !important;
    }
    .sidebar-toggle {
        display: block !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 55dvh !important;
        transform: none !important;
        width: 100% !important;
        height: 20px !important;
        padding: 0 !important;
        background: #344d6e !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-radius: 16px 16px 0 0 !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }
    .sidebar-toggle::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255,255,255,0.55);
        border-radius: 3px;
    }
    .sidebar-toggle:hover,
    .sidebar-toggle:focus,
    .sidebar-toggle:active {
        transform: none !important;
        background: #344d6e !important;
        outline: none !important;
    }
    /* 접힘 시 토글바도 같이 내려감 (원래대로) */
    .sidebar-toggle.collapsed {
        transform: translateY(55dvh) !important;
    }
    .sidebar-toggle .toggle-icon {
        display: none !important;
    }

    /* style.09 rail 레이아웃의 떠있는 카드 패널 → 모바일에서는 사이드바 안에 자연스럽게 흐르도록 */
    .map-sidebar .tab-wrapper,
    #observation-wrapper,
    #track-wrapper,
    #favorites-wrapper {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        z-index: auto !important;
        overflow: visible !important;
        background: transparent !important;
    }
    .map-sidebar .search-form-container {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        padding: 0 0 30px 0 !important;
        overflow: visible !important;
    }
    .map-sidebar .tab-container {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        border-right: none !important;
    }
    .map-sidebar .tab-buttons {
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 0 !important;
        gap: 0 !important;
    }
    /* style.09: 각 탭 버튼이 width:100%, min-height:90px이라 모바일 row에서 1개만 보임 → 3등분 */
    .map-sidebar .tab-buttons .tab-btn {
        width: auto !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        padding: 12px 4px !important;
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
        font-size: 0.9em !important;
        white-space: nowrap !important;
    }
    /* 모바일에서는 "관측데이터"/"즐겨찾기" <br> 제거하고 한 줄로 */
    .map-sidebar .tab-buttons .tab-btn br {
        display: none !important;
    }
    /* 조회조건 토글 chevron — 모바일에서는 항상 흰색 (탭 시 hover 잔상으로 색 변하는 문제 방지) */
    .map-sidebar .search-form-toggle .chevron-icon,
    .map-sidebar .search-form-toggle:hover .chevron-icon,
    .map-sidebar .search-form-toggle:focus .chevron-icon,
    .map-sidebar .search-form-toggle:active .chevron-icon,
    .map-sidebar .search-form.collapsed .search-form-toggle .chevron-icon {
        border-left-color: #ffffff !important;
        border-top-color: #ffffff !important;
    }
    .map-sidebar .tab-buttons .tab-btn.active {
        border-left-color: transparent !important;
        border-bottom-color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* 모바일에선 좌표 표시 패널, 줌 컨트롤, 측정 도구, Leaflet attribution, 하단 상태바 숨김 */
    #mapBoundsPanel,
    #zoomControls,
    #measureTools,
    .leaflet-control-attribution,
    .status-bar {
        display: none !important;
    }

    /* 모바일: 차트 내부 색상 셀렉터 축소 */
    .color-controls {
        padding: 3px 6px !important;
        gap: 4px !important;
        top: 4px !important;
        right: 4px !important;
    }
    .color-controls label {
        font-size: 10px !important;
    }
    .color-controls .color-preset-select,
    .color-controls select {
        min-width: 0 !important;
        max-width: 120px !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
    }
    #mooringColorBtn {
        min-width: 0 !important;
        padding: 2px 5px !important;
        gap: 3px !important;
    }
    #mooringColorBtn > span:first-child {
        font-size: 0.7em !important;
    }
    #mooringColorBtn > div {
        width: 40px !important;
        height: 10px !important;
    }
    #mooringColorBtn > span:last-child {
        font-size: 6px !important;
    }

    /* 모바일 공통: 컨트롤바 요소 컴팩트 */
    .chart-control-bar {
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .chart-control-bar__title {
        font-size: 0.9em !important;
    }
    .chart-control-bar__label {
        font-size: 0.7em !important;
    }
    .chart-control-bar__select {
        font-size: 0.7em !important;
        max-width: 110px !important;
        padding: 3px 5px !important;
    }
    .chart-control-bar__divider {
        margin: 0 2px !important;
        height: 16px !important;
    }
    .chart-toggle-label {
        font-size: 0.65em !important;
    }
    .chart-toggle-btn {
        padding: 2px 6px !important;
        font-size: 0.62em !important;
        min-width: 30px !important;
    }
    .chart-toggle-group {
        gap: 3px !important;
    }
    .chart-attribute-bar {
        gap: 4px !important;
    }

    /* 모바일에서 차트 모달 크기 맞춤 */
    .chart-modal-wrapper {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        height: 100dvh !important;
    }
    .chart-modal-content {
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .chart-modal-body {
        padding: 8px !important;
        height: auto !important;
        max-height: calc(100dvh - 70px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* ADCP 모달 body — 데스크탑은 height:800px + overflow:hidden인데 모바일은 양방향 스크롤 */
    .chart-modal-body:has(#adcpMooringChartContainer) {
        height: auto !important;
        max-height: calc(100dvh - 70px) !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        padding: 8px !important;
    }
    /* ADCP 차트 컨테이너 — inline height: 800px 가 컨텐츠보다 길어 모바일에서 아래 빈 공간 생김 → auto */
    #adcpMooringChartContainer {
        height: auto !important;
    }
    .chart-modal-content:has(#adcpMooringChartContainer) #chartCanvas {
        min-height: 0 !important;
    }
    #chartCanvas {
        min-height: 0 !important;
        height: auto !important;
    }

    /* 가로 회전 힌트 (세로 모드에서만 표시) */
    .rotate-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(52, 152, 219, 0.95);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 500;
    }
    .rotate-hint-close {
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 0 4px;
        opacity: 0.85;
    }

    /* 모바일에서 Leaflet 팝업 크기 — 살짝 작게 (15% 축소 정도) */
    .leaflet-popup-content-wrapper {
        padding: 4px 8px !important;
        border-radius: 6px !important;
    }
    .leaflet-popup-content {
        margin: 6px 8px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        max-width: 240px !important;
        min-width: 220px !important;
    }
    .leaflet-popup-close-button {
        font-size: 14px !important;
        padding: 2px 4px !important;
    }
    .leaflet-popup-content button,
    .leaflet-popup-content input,
    .leaflet-popup-content select,
    .leaflet-popup-content a {
        font-size: 12px !important;
        padding: 5px 10px !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
        width: auto !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }
    .leaflet-popup-content * {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .leaflet-popup-content > div {
        min-width: 0 !important;
        width: auto !important;
    }
    /* 즐겨찾기 폴리곤 색상 팝업(작은 팝업): 위 일반 규칙이 select/button 을 width:auto·max-width:240 으로 줄이므로
       더 높은 특이도로 되돌려, 두께/스타일 드롭다운과 색상 저장 버튼을 가로로 길게(터치하기 좋게) 만든다. */
    .leaflet-popup-content:has(.fav-color-popup-poly) {
        max-width: 290px !important;
        min-width: 260px !important;
    }
    .leaflet-popup-content .fav-color-popup-poly {
        width: 260px !important;
        max-width: 260px !important;
    }
    .leaflet-popup-content .fav-color-popup-poly select {
        width: 100% !important;
        flex: 1 1 0 !important;
        padding: 4px 6px !important;
        font-size: 13px !important;
    }
    .leaflet-popup-content .fav-color-popup-poly .fav-save-color-btn {
        width: 100% !important;
        flex: none !important;
        padding: 7px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
    .leaflet-popup-content div[style*="display:flex"],
    .leaflet-popup-content div[style*="display: flex"] {
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }
    /* 한 줄에 맞도록 버튼 폰트/패딩 살짝 줄임 */
    .leaflet-popup-content div[style*="display:flex"] button,
    .leaflet-popup-content div[style*="display: flex"] button {
        font-size: 12px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    /* 지도 점 마커 탭 → '색상 저장' 팝업의 '모양' 선택 버튼(.popup-marker-shape-btn).
       위 일반 button 규칙들이 padding(4~8px)을 강제하고, .leaflet-popup-content *{max-width:100%}
       가 안쪽 14px SVG 를 좁아진 콘텐츠 폭으로 수축시켜(viewBox 없음→도형 잘림) 빈 박스로만
       보이던 문제 수정. 버튼 폭은 3열 레이아웃에 맞게 유연하게 두되(넘침 방지) 패딩만 제거하고,
       SVG 가 절대 수축/클리핑되지 않도록 고정. (특이도 ↑ 로 위 규칙들 override) */
    .leaflet-popup-content div[style*="display:flex"] button.popup-marker-shape-btn,
    .leaflet-popup-content div[style*="display: flex"] button.popup-marker-shape-btn,
    .leaflet-popup-content button.popup-marker-shape-btn {
        -webkit-appearance: none !important;
        appearance: none !important;
        padding: 0 !important;
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        height: 28px !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    /* '모양' 칸을 버튼 3개 폭만큼 고정 → flex:1 로 좁던 칸이 넓어지고, '크기/두께' 드롭다운이
       오른쪽으로 밀려 모양 버튼과 겹치지 않음. (모양 버튼을 손자로 가진 칸을 :has 로 선택) */
    .leaflet-popup-content div:has(> div > .popup-marker-shape-btn) {
        flex: 0 0 auto !important;
        margin-right: 4px !important;
    }
    /* '색상 저장' 버튼 — 위 .leaflet-popup-content button{width:auto·flex:0 1 auto} 규칙이
       인라인 width:100% 를 덮어 글자폭으로 줄어듦. 팝업 가로폭에 맞춰 full-width 복원. */
    .leaflet-popup-content button[style*="width:100%"],
    .leaflet-popup-content button[style*="width: 100%"] {
        width: 100% !important;
        flex: none !important;
        display: block !important;
    }
    /* 라인 팝업의 '두께'·'스타일' 드롭다운 — 위 select{width:auto} 규칙이 글자폭으로 줄여
       칸을 안 채우므로, 인라인 width:100% 인 select 를 칸 가로폭에 맞춰 full-width 복원.
       (폴리곤 팝업 select 는 .fav-color-popup-poly 규칙으로 이미 처리됨) */
    .leaflet-popup-content select[style*="width:100%"],
    .leaflet-popup-content select[style*="width: 100%"] {
        width: 100% !important;
        flex: 1 1 0 !important;
    }
    .leaflet-popup-content .popup-marker-shape-btn svg {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        display: block !important;
    }
    .leaflet-popup-content table {
        font-size: 0.78em !important;
    }
    .leaflet-popup-content h1,
    .leaflet-popup-content h2,
    .leaflet-popup-content h3,
    .leaflet-popup-content h4 {
        font-size: 0.9em !important;
        margin: 3px 0 !important;
    }
    .leaflet-popup-content > strong:first-child,
    .leaflet-popup-content strong:first-of-type {
        font-size: 0.85em !important;
    }
    .leaflet-popup-content > div > div:first-child {
        font-size: 0.9em !important;
        font-weight: 600 !important;
        padding-bottom: 3px !important;
        margin-bottom: 5px !important;
    }

    /* 초기화 버튼을 상단으로 이동, 아이콘만 */
    .map-reset-button-container {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
    }
    .map-reset-btn span {
        display: none !important;
    }
    .map-reset-btn {
        min-width: 0 !important;
        padding: 8px 10px !important;
        gap: 0 !important;
    }

    /* 중첩 플렉스/스크롤 해제 → 시트 전체가 하나의 스크롤 컨테이너 */
    .tab-wrapper {
        height: auto !important;
        flex: none !important;
    }
    .tab-content.active,
    #track-tab.active,
    #favorites-tab.active {
        flex: none !important;
        min-height: 0 !important;
        height: auto !important;
        background: transparent !important;
    }
    .map-search-results {
        overflow-y: visible !important;
        flex: none !important;
        max-height: none !important;
        min-height: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    /* 조회조건 박스 + 조회결과 박스 투명화 — PC 흑색 카드(rgba(0,0,0,0.8))를 동일/높은 구체성으로 덮어씀 */
    .map-sidebar .search-form,
    .map-sidebar .search-form-container,
    .map-sidebar .search-form > div,
    .map-sidebar #observationSearchResults,
    .map-sidebar #trackSearchResults,
    .map-sidebar #favoritesSearchResults,
    .map-sidebar .results-content,
    .map-sidebar .collapsible-header,
    .map-sidebar .collapsible-content,
    #observation-wrapper .search-form,
    #observation-wrapper .map-search-results,
    #observation-wrapper #observationSearchResults,
    #track-wrapper .search-form,
    #track-wrapper .map-search-results,
    #track-wrapper #trackSearchResults,
    #favorites-wrapper .search-form,
    #favorites-wrapper .map-search-results,
    #favorites-wrapper #favoritesSearchResults,
    #favorites-search-tab .search-form,
    #favorites-search-tab .favorites-search-results,
    #favorites-search-tab #favoritesSearchResults {
        background: transparent !important;
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    /* 조회조건/조회결과 박스 가로 살짝 줄임 — 사이드바 양옆에 8px씩 여유 */
    #observation-wrapper .search-form,
    #track-wrapper .search-form,
    #favorites-wrapper .search-form,
    #favorites-search-tab .search-form,
    #observation-wrapper #observationSearchResults,
    #track-wrapper #trackSearchResults,
    #favorites-wrapper #favoritesSearchResults,
    #favorites-search-tab #favoritesSearchResults,
    #observation-wrapper .map-search-results,
    #track-wrapper .map-search-results,
    #favorites-wrapper .map-search-results {
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        box-sizing: border-box !important;
    }
    /* 초기화/조회 버튼 묶음 밑에 구분선 — 조회결과와 시각적 분리 */
    #observation-wrapper .search-buttons,
    #track-wrapper .search-buttons,
    #favorites-wrapper .search-buttons,
    #favorites-search-tab .search-buttons {
        padding-bottom: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
        margin-bottom: 4px !important;
    }
    /* 조회결과 영역도 위쪽 여백 최소화 */
    #observation-wrapper #observationSearchResults,
    #track-wrapper #trackSearchResults,
    #favorites-wrapper #favoritesSearchResults,
    #observation-wrapper .map-search-results,
    #track-wrapper .map-search-results,
    #favorites-wrapper .map-search-results {
        margin-top: 0 !important;
        padding-top: 4px !important;
    }

    /* 가로 모드: 힌트 숨김 + 차트 dynamic scale */
    @media (orientation: landscape) {
        .rotate-hint {
            display: none !important;
        }
        .chart-modal-body {
            overflow: hidden !important;
            padding: 4px !important;
        }
        /* ADCP 가로 모드: padding 거의 제거해서 차트가 화면 가득 차도록 */
        .chart-modal-body:has(#adcpMooringChartContainer) {
            padding: 2px !important;
        }
        /* ADCP Tracking 가로 모드: 차트가 viewport 높이 넘으면 세로 스크롤 허용
           (위 .chart-modal-body { overflow: hidden } 을 #trackingChart 가진 경우만 override) */
        .chart-modal-body:has(#trackingChart) {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        /* CTD Mooring 가로 모드: 동일하게 세로 스크롤 허용 */
        .chart-modal-body:has(#ctdChartCanvas) {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
        /* CTD Casting 가로 모드: 세로 스크롤 허용 */
        .chart-modal-body:has(#ctdCastingChart) {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* 세로 모드 모바일 전용: 차트 데이터 명을 컨트롤바 위 별도 줄로 */
@media (orientation: portrait) and (max-width: 768px) {
    .chart-control-bar {
        flex-wrap: wrap !important;
    }
    .chart-control-bar__left {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 4px;
        margin-bottom: 4px;
        overflow: hidden !important;
    }
    .chart-control-bar__right {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
    .chart-control-bar__title {
        max-width: 100% !important;
    }
    .adcp-sub-row {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }
    .adcp-sub-row > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0;
    }
    .adcp-heatmap-wrapper {
        /* padding 사용 금지 (canvas 가 % 기준으로 올라가서 축 밖으로 빠짐) */
        margin-bottom: 0 !important;
    }
    .legend-range-panel input {
        width: 42px !important;
        padding: 2px 3px !important;
        font-size: 10px !important;
    }
    .legend-range-panel span {
        font-size: 9px !important;
        min-width: 20px !important;
    }
    .legend-range-panel > div {
        gap: 3px !important;
    }
    .legend-range-panel > div > div {
        gap: 2px !important;
    }
}

/* 데스크탑 — 모바일 드롭다운 숨김 (사이드 패널 사용) */
.tracking-mobile-list-selector,
.ctd-casting-mobile-list-selector {
    display: none;
}

/* 데스크탑 — CTD Casting "이 데이터 단면도 추가" 모바일 전용 버튼 숨김 */
.ctd-section-mobile-single {
    display: none;
}
@media (max-width: 768px), (max-height: 500px) {
    .ctd-section-mobile-single {
        display: inline-block !important;
    }
}

/* PC: 모바일 탭 숨김 */
.add-data-mobile-tabs {
    display: none;
}

/* 모바일: Add Data 탭 전환 — 한 번에 셋 중 하나만 풀스크린 */
@media (max-width: 768px) {
    .add-data-mobile-tabs {
        display: flex !important;
        background: #ffffff;
        padding: 4px;
        gap: 0;
        border-bottom: 1px solid #e0e0e0;
    }
    .add-data-mobile-tab-btn {
        flex: 1 1 33.33%;
        background: transparent;
        border: none;
        color: #888;
        padding: 8px 6px;
        font-size: 0.82em;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
    }
    .add-data-mobile-tab-btn.active {
        background: #3498db;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    /* 데이터 관리 탭 활성: 지도/좌표편집 숨김 */
    .add-data-container[data-mobile-tab="data"] > #addDataMap { display: none !important; }
    .add-data-container[data-mobile-tab="data"] .add-data-sidebar { width: 100% !important; height: 100% !important; }
    .add-data-container[data-mobile-tab="data"] .add-data-right-panel { display: none !important; }
    .add-data-container[data-mobile-tab="data"] .add-data-left-panel { height: 100% !important; }
    /* 지도 탭 활성: 사이드바 숨김 */
    .add-data-container[data-mobile-tab="map"] > #addDataMap { height: 100% !important; }
    .add-data-container[data-mobile-tab="map"] .add-data-sidebar { display: none !important; }
    /* 좌표 편집 탭 활성: 지도/데이터관리 숨김 */
    .add-data-container[data-mobile-tab="coord"] > #addDataMap { display: none !important; }
    .add-data-container[data-mobile-tab="coord"] .add-data-sidebar { width: 100% !important; height: 100% !important; }
    .add-data-container[data-mobile-tab="coord"] .add-data-left-panel { display: none !important; }
    .add-data-container[data-mobile-tab="coord"] .add-data-right-panel { height: 100% !important; }
    /* container 높이도 탭 바 만큼 빼야 깔끔 */
    #add-data .add-data-container {
        height: calc(100% - 42px);
    }
}

/* 모바일: 내 즐겨찾기 박스 투명 처리 + 좌우 여백 추가하여 가로 폭 축소 */
@media (max-width: 768px), (max-height: 500px) {
    #favorites-my-tab .favorites-workspace-combined,
    #favorites-my-tab .favorites-measure-list,
    #favorites-my-tab .favorites-tree-container {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
    }
}

/* 모바일: WQI 분석 패널 / Sediment Grain 분석 패널을 사이드바 자리(하단 시트)에 풀커버로 표시
   PC 에선 사이드바 우측에 floating 으로 떴지만, 모바일은 지도+패널 같이 보이는 구조라
   기존 하단 시트 위치 그대로 덮어쓰는 형태 */
/* 차트 보기 팝업이 열려 있는 동안엔 사이드바 토글을 숨겨, 차트 위에서 사이드바를 못 열게 한다
   (PC 처럼 차트 팝업 중 사이드바 비활성). 팝업을 닫으면 body.chart-modal-open 제거 → 토글 다시 표시. */
@media (max-width: 768px), (max-height: 500px) {
    body.chart-modal-open .sidebar-toggle {
        display: none !important;
    }
}

@media (max-width: 768px), (max-height: 500px) {
    #wqAnalysisPanel,
    #sedimentGrainPanel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 55dvh !important;
        max-height: 90dvh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 1002 !important;
        /* padding-bottom 을 크게: 사이드바 토글 바(접힌 상태 24px) 가 화면 하단을 덮어
           패널 바닥 콘텐츠(펜타곤 시리즈 등)가 가려지지 않도록 여유 공간 확보 */
        padding: 12px 14px 44px 14px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18) !important;
        -webkit-overflow-scrolling: touch;
        transition: height 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    }
    /* 드래그 중에는 transition 꺼서 손가락 따라 즉시 움직이도록 */
    #wqAnalysisPanel.wq-bs-dragging,
    #sedimentGrainPanel.wq-bs-dragging {
        transition: none !important;
    }
    /* 3단계 스냅 상태: peek (헤더만) / half (기본 55dvh) / full (90dvh) */
    #wqAnalysisPanel[data-bs-state="peek"],
    #sedimentGrainPanel[data-bs-state="peek"] {
        height: 96px !important;
    }
    #wqAnalysisPanel[data-bs-state="half"],
    #sedimentGrainPanel[data-bs-state="half"] {
        height: 55dvh !important;
    }
    #wqAnalysisPanel[data-bs-state="full"],
    #sedimentGrainPanel[data-bs-state="full"] {
        height: 90dvh !important;
    }
    /* 드래그 핸들 — PC 에선 빈 div 로 0px 차지, 모바일에서만 시각화 */
    #wqAnalysisPanel .wq-mobile-handle,
    #sedimentGrainPanel .wq-mobile-handle {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 4px 0 8px 0 !important;
        margin: -8px -14px 0 -14px !important;
        cursor: grab !important;
        touch-action: none !important;
        flex-shrink: 0 !important;
    }
    #wqAnalysisPanel .wq-mobile-handle:active,
    #sedimentGrainPanel .wq-mobile-handle:active {
        cursor: grabbing !important;
    }
    #wqAnalysisPanel .wq-mobile-handle-bar,
    #sedimentGrainPanel .wq-mobile-handle-bar {
        display: block !important;
        width: 44px !important;
        height: 5px !important;
        background: #c8cdd4 !important;
        border-radius: 999px !important;
    }
    /* peek 상태에선 헤더 아래 모든 콘텐츠 숨김 (핸들 + 헤더만 보이도록) */
    #wqAnalysisPanel[data-bs-state="peek"] > *:not(.wq-mobile-handle):not(:nth-child(2)),
    #sedimentGrainPanel[data-bs-state="peek"] > *:not(.wq-mobile-handle):not(:nth-child(2)) {
        display: none !important;
    }
    /* 사이드바와 토글 바가 WQI/Sediment 패널보다 위에 떠 있게 — 사용자가 패널 열어둔
       상태에서도 사이드바의 (접힌) 핸들을 잡아 다시 올릴 수 있도록 */
    .map-sidebar,
    .sidebar-toggle {
        z-index: 1003 !important;
    }
}

/* 가로모드: WQI / ICSG 패널을 사이드바 자리(왼쪽 43% 풀높이) 에 배치.
   세로모드의 바텀시트(55dvh) 동작을 완전히 override — height 100%, 핸들 숨김 */
@media (orientation: landscape) and (max-height: 500px) {
    #wqAnalysisPanel,
    #sedimentGrainPanel {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 43% !important;
        max-width: 43% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        /* 좌측 padding 32px — 사이드바 닫혔을 때 토글(left:0, 20px wide) + 여백(12px) 만큼 비워서 패널 글씨가 토글에 안 가림 */
        padding: 12px 14px 12px 32px !important;
        transition: none !important;
    }
    /* 가로모드에선 바텀시트 핸들 불필요 */
    #wqAnalysisPanel .wq-mobile-handle,
    #sedimentGrainPanel .wq-mobile-handle {
        display: none !important;
    }
}

/* 모바일: 수질등급 범례를 지도 좌측 상단에 가로 배치 + 한글 라벨 숨김
   PC 는 우측 하단 세로 배치(범례 인라인 style + 기본 row layout) 그대로 유지 */
@media (max-width: 768px), (max-height: 500px) {
    .water-quality-legend {
        right: auto !important;
        bottom: auto !important;
        top: 10px !important;
        left: 10px !important;
        padding: 5px 8px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        background: rgba(255, 255, 255, 0.92) !important;
    }
    /* 제목 (수질등급) 숨김 — 가로 폭 절약 */
    .water-quality-legend .wq-legend-title {
        display: none !important;
    }
    /* 산정불가 행 숨김 — 로마자가 없어 가로 배치 시 어색함 */
    .water-quality-legend .wq-legend-row-nonum {
        display: none !important;
    }
    /* 각 행의 margin 제거하고 점·번호만 컴팩트하게 */
    .water-quality-legend .wq-legend-row {
        margin: 0 !important;
        gap: 3px !important;
    }
    /* 한글 라벨 숨김 — 번호(로마자) 만 남김 */
    .water-quality-legend .wq-legend-ko {
        display: none !important;
    }
    .water-quality-legend .wq-legend-num {
        font-weight: 700 !important;
    }
}

/* 모바일: ICSG/퇴적상 범례도 지도 좌측 상단으로 이동 + 컴팩트화
   PC 위치(우측 하단)는 인라인 style 그대로 유지, 모바일 CSS 가 !important 로 override */
@media (max-width: 768px), (max-height: 500px) {
    .sediment-legend {
        right: auto !important;
        bottom: auto !important;
        top: 10px !important;
        left: 10px !important;
        padding: 5px 8px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        font-size: 11px !important;
        max-width: calc(100vw - 20px) !important;
    }
    /* 범례 행 간격 축소 (percent 모드 등 기본) */
    .sediment-legend > div {
        margin: 1px 0 !important;
        font-size: 11px !important;
    }
    /* Jet 그라데이션 바 (percent 모드) — 화면에 잘 맞게 살짝 축소 */
    .sediment-legend div[style*="width:180px"] {
        width: 150px !important;
    }
    /* Folk 모드 전용 — 5열 × 2행 그리드 + 영문 라벨 숨김으로 코드만 표시
       (sg-legend-title 은 display:none 이라 그리드 셀로 잡히지 않음) */
    .sediment-legend.sg-legend-folk {
        display: grid !important;
        grid-template-columns: repeat(5, auto) !important;
        align-items: center !important;
        gap: 4px 8px !important;
    }
    .sediment-legend.sg-legend-folk .sg-legend-title {
        display: none !important;
    }
    .sediment-legend.sg-legend-folk .sg-legend-en {
        display: none !important;
    }
    .sediment-legend.sg-legend-folk .sg-legend-row {
        margin: 0 !important;
        gap: 3px !important;
    }
    .sediment-legend.sg-legend-folk .sg-legend-code {
        font-weight: 700 !important;
    }
    /* 수심격자 범례: 모바일에선 '깊음/얕음' 끝 라벨 숨김 (위/중/아래 수심값으로 충분). PC 는 유지. */
    .bathymetry-legend .bathy-legend-endlabels {
        display: none !important;
    }
}

/* 가로 모바일: 좌측 43% 를 분석 패널(#wqAnalysisPanel/#sedimentGrainPanel)이 차지해
   좌측 상단 범례가 패널에 가려 "사라진다" → 가로 모드에선 범례를 우측 하단으로 옮겨 보이게 한다.
   (세로 모바일은 위 좌측상단 규칙 유지, PC 는 가로 미디어쿼리에 안 걸리므로 영향 없음) */
@media (orientation: landscape) and (max-height: 500px) {
    .water-quality-legend,
    .sediment-legend {
        top: auto !important;
        left: auto !important;
        right: 10px !important;
        bottom: 10px !important;
        max-width: 52vw !important;
    }
    /* 수질등급 범례: 우측 하단에선 세로로 쌓아 컴팩트하게 */
    .water-quality-legend {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
}

/* 모바일/터치: :hover/:active/:focus stuck 방지 — 탭 후 색깔이 안 사라지는 문제
   기존 #favorites-search-tab .search-result-item:hover (specificity 더 높음) 도 override 위해 같은 id 셀렉터 사용 */
@media (max-width: 768px), (max-height: 500px) {
    #favorites-search-tab .search-result-item:hover,
    #favorites-search-tab .search-result-item:active,
    #favorites-search-tab .search-result-item:focus,
    .search-result-item:hover, .search-result-item:active, .search-result-item:focus,
    .favorites-workspace-item:hover, .favorites-workspace-item:active, .favorites-workspace-item:focus,
    .favorites-category-item:hover, .favorites-category-item:active, .favorites-category-item:focus,
    .favorite-tree-item:hover, .favorite-tree-item:active, .favorite-tree-item:focus,
    .favorites-toggle-btn:hover, .favorites-toggle-btn:active, .favorites-toggle-btn:focus,
    .result-row:not(.selected):hover, .result-row:not(.selected):active, .result-row:not(.selected):focus,
    #favorites-my-tab .favorites-workspace-item:hover,
    #favorites-my-tab .favorites-workspace-item:active,
    #favorites-my-tab .favorites-workspace-item:focus {
        background: transparent !important;
        background-color: transparent !important;
        outline: none !important;
    }
    /* .selected 가 검색 결과에 남는 경우도 모바일에선 시각 효과 약하게 (JS toggle 잠시 늦어도 안 띄게) */
    #favorites-search-tab .search-result-item.selected {
        background: rgba(255, 255, 255, 0.06) !important;
    }
    .search-result-item,
    .favorites-workspace-item,
    .favorites-category-item,
    .favorite-tree-item,
    .favorites-toggle-btn,
    .result-row,
    .result-row-name {
        -webkit-tap-highlight-color: transparent !important;
    }
}

@media (hover: none) {
    .search-result-item:hover, .search-result-item:active, .search-result-item:focus,
    .favorites-workspace-item:hover, .favorites-workspace-item:active, .favorites-workspace-item:focus,
    .favorites-category-item:hover, .favorites-category-item:active, .favorites-category-item:focus,
    .favorite-tree-item:hover, .favorite-tree-item:active, .favorite-tree-item:focus,
    .favorites-toggle-btn:hover, .favorites-toggle-btn:active, .favorites-toggle-btn:focus,
    .favorites-toggle-btn.map-display-off:hover,
    .favorites-toggle-btn.map-display-off:active,
    .favorites-toggle-btn.map-display-off:focus,
    #favorites-my-tab .favorites-workspace-item:hover,
    #favorites-my-tab .favorites-workspace-item:active,
    #favorites-my-tab .favorites-workspace-item:focus,
    #favorites-my-tab .favorites-toggle-btn.map-display-off:hover,
    #favorites-my-tab .favorites-toggle-btn.map-display-off:active,
    #favorites-my-tab .favorites-toggle-btn.map-display-off:focus {
        background: inherit !important;
        background-color: inherit !important;
        outline: none !important;
    }
    /* tap highlight 도 제거 (모바일 Safari 의 회색 강조) */
    .search-result-item,
    .favorites-workspace-item,
    .favorites-category-item,
    .favorite-tree-item,
    .favorites-toggle-btn {
        -webkit-tap-highlight-color: transparent !important;
    }
}

/* 모바일: 즐겨찾기 탭 안의 서브탭 (조회 / 내 즐겨찾기) 을 pill/segmented control 스타일로
   메인 탭과 시각적으로 구분 — 둘레 둥근 박스 + 선택 시 안쪽만 하이라이트
   기존 룰(line 8411)이 더 specific 하므로 같은 셀렉터로 작성 */
@media (max-width: 768px), (max-height: 500px) {
    #favorites-wrapper .favorites-sub-tabs {
        margin: 6px 8px 10px 8px !important;
    }
    #favorites-wrapper .sub-tab-buttons,
    #favorites-wrapper .favorites-sub-tabs .sub-tab-buttons {
        display: flex !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 3px !important;
        gap: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }
    #favorites-wrapper .sub-tab-btn {
        flex: 1 1 50% !important;
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 6px 10px !important;
        font-size: 0.8em !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.65) !important;
        text-align: center !important;
        transition: background 0.18s, color 0.18s !important;
    }
    #favorites-wrapper .sub-tab-btn.active {
        background: #ffffff !important;
        color: #2c3e50 !important;
        border-bottom: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
    #favorites-wrapper .sub-tab-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
    }
}

/* 모바일: 항적 조회결과의 각 선박 카드 좌측 정렬 */
@media (max-width: 768px), (max-height: 500px) {
    #track-wrapper .table-card {
        text-align: left !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    #track-wrapper .table-card .table-header,
    #track-wrapper .table-card .table-description,
    #track-wrapper .table-card .track-buttons {
        width: 100%;
        justify-content: flex-start !important;
        text-align: left !important;
    }
}

/* 모바일: CTD Casting Heatmap 버튼 박스 — 다크글래스 배경/그림자 제거 (버튼만 보이게)
   + flex order 로 조회결과 위로 재배치 (PC HTML 순서는 그대로 유지) */
@media (max-width: 768px), (max-height: 500px) {
    #ctdSectionBtnArea {
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 6px 0 !important;
        padding: 0 40px !important;
    }
    /* tab-content 를 flex column 으로 만들어 order 가 동작하게 */
    #observation-tab.active {
        display: flex !important;
        flex-direction: column !important;
    }
    #observation-tab > .search-form { order: 1; }
    #observation-tab > #ctdSectionBtnArea { order: 2; }
    #observation-tab > #observationSearchResults { order: 3; }
    #observation-tab > #ctdSectionPanel { order: 4; }
}

/* 세로 모바일: CTD Casting 각 차트 Min/Max 패널 세로 배치 (Min 위, Max 아래)
   그래프는 가로로 유지하고 Min/Max 입력만 세로 스택 → 가로 공간 절약 */
@media (orientation: portrait) and (max-width: 768px) {
    #ctdCastingChart [id$="_range"] {
        flex-direction: column !important;
        gap: 2px !important;
        padding-left: 0 !important;
        margin-top: 10px !important;
    }
}
/* 가로 모바일: Min/Max 는 가로(row) 그대로 두고 margin-top 만 조정 */
@media (orientation: landscape) and (max-height: 500px) {
    #ctdCastingChart [id$="_range"] {
        margin-top: 10px !important;
        padding-left: 0 !important;
    }
}


/* 모바일 (세로/가로 모두): ADCP Tracking / CTD Casting same-location 리스트
   사이드 패널이 모바일 풀스크린 모달의 화면 밖에 위치 → 드롭다운으로 대체 */
@media (max-width: 768px), (max-height: 500px) {
    #trackingListPanel,
    #ctdCastingListPanel {
        display: none !important;
    }
    .ctd-casting-mobile-list-selector {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 6px 10px;
    }
    .ctd-casting-mobile-list-label {
        font-size: 11px;
        font-weight: 700;
        color: #2c3e50;
        flex-shrink: 0;
    }
    .ctd-casting-mobile-list-select {
        flex: 1;
        min-width: 0;
        padding: 4px 8px;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #ffffff;
        color: #2c3e50;
    }
    /* ADCP Tracking 차트 컨테이너 — height auto */
    #trackingChart {
        height: auto !important;
        padding-top: 8px !important;
    }
    /* ADCP Tracking infowindow (데이터 클릭 시 정보) — 모바일: 좌우 여백 더 늘려 가로 길이 줄임 */
    #infowindow {
        margin: 8px 40px 0 40px !important;
        max-width: none !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    .tracking-mobile-list-selector {
        display: flex !important;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 6px 10px;
    }
    .tracking-mobile-list-label {
        font-size: 11px;
        font-weight: 700;
        color: #2c3e50;
        flex-shrink: 0;
    }
    .tracking-mobile-list-select {
        flex: 1;
        min-width: 0;
        padding: 4px 8px;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #ffffff;
        color: #2c3e50;
    }
}

/* 세로 모바일 — ADCP Tracking infowindow 살짝 왼쪽으로 (우측 margin 늘리고 좌측 줄임)
   위 mobile 일반 규칙 (8px 40px 0 40px) 보다 뒤에 와야 source order 로 이김 */
@media (orientation: portrait) and (max-width: 768px) {
    #infowindow {
        margin: 8px 60px 0 20px !important;
    }
}

/* 가로 모바일 — ADCP Mooring Min/Max 패널 각 행도 세로 배치 (라벨 위, 입력 아래) */
@media (orientation: landscape) and (max-height: 500px) {
    .legend-range-panel > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1px !important;
    }
    .legend-range-panel > div > div > span {
        min-width: 0 !important;
    }
}

/* 모바일 가로 모드: 왼쪽 사이드 패널로 전환 */
@media (orientation: landscape) and (max-height: 500px) {
    .map-sidebar {
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 43% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        padding-top: 0 !important;
        transform: none;
        transition: transform 0.3s ease !important;
    }
    .map-sidebar.collapsed {
        transform: translateX(-100%) !important;
    }
    /* 가로 모드 토글: 사이드바 우측 가장자리에 붙어 있는 클릭 가능한 손잡이.
       세로모드의 바텀시트 핸들과 달리 좌우 배치이므로 CSS 보더로 chevron 직접 그림
       (‹ 문자는 일부 한글 폰트에서 세모(▶)로 fallback 되는 경우가 있어 안 씀) */
    .sidebar-toggle {
        top: 50% !important;
        bottom: auto !important;
        left: 43% !important;
        right: auto !important;
        width: 20px !important;
        height: 60px !important;
        transform: translateY(-50%) !important;
        /* transform 은 transition 에서 제외 — 보간되면 translateY(-50%) 가 잠깐 풀려 토글이 살짝 내려옴 */
        transition: left 0.3s ease, background 0.2s ease !important;
        border-radius: 0 6px 6px 0 !important;
        background: #344d6e !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25) !important;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        z-index: 1003 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* 접힘 상태: 사이드바와 함께 좌측 끝으로 이동 (top/transform 은 base 와 동일하게 유지) */
    .sidebar-toggle.collapsed {
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 0 !important;
        border-radius: 0 6px 6px 0 !important;
    }
    /* hover/focus/active 시 base 의 translateX(2px) 가 끼어들지 못하게 명시적으로 다시 박음 */
    .sidebar-toggle:hover,
    .sidebar-toggle:focus,
    .sidebar-toggle:active,
    .sidebar-toggle.collapsed:hover,
    .sidebar-toggle.collapsed:focus,
    .sidebar-toggle.collapsed:active {
        background: #344d6e !important;
        transform: translateY(-50%) !important;
        top: 50% !important;
    }
    /* 텍스트 ‹ 아이콘은 폰트 fallback 으로 세모로 렌더링되는 경우가 있어 완전히 숨김 */
    .sidebar-toggle .toggle-icon {
        display: none !important;
    }
    /* CSS 보더로 chevron 직접 그림 — 폰트 무관하게 항상 깔끔한 < 모양
       원본 위쪽 드래그 핸들 ::before 룰을 가로모드용 chevron 으로 override */
    .sidebar-toggle::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        box-sizing: border-box !important;
        width: 8px !important;
        height: 8px !important;
        border-left: 2px solid #ffffff !important;
        border-top: 2px solid #ffffff !important;
        border-right: none !important;
        border-bottom: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        /* 살짝 우측으로 이동(-25%) — chevron 의 시각적 중심이 왼쪽에 치우쳐 있어 보정 */
        transform: translate(-25%, -50%) rotate(-45deg) !important;
        transform-origin: center center !important;
        transition: transform 0.3s ease !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    .sidebar-toggle.collapsed::before {
        transform: translate(-75%, -50%) rotate(135deg) !important;
    }
}

/* 모바일: 내 즐겨찾기 — 워크스페이스 리스트(.favorites-workspace-list) 와
   내 측정 리스트(.favorites-measure-list) 사이에 구분선 + 여백 — 두 섹션 구별 명확히 */
@media (max-width: 768px), (max-height: 500px) {
    .favorites-measure-list {
        border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }
}

/* 모바일: 즐겨찾기 색상 편집 팝업 (사이드바 팔레트 아이콘 → 큰 팝업) — 데스크탑 410px 너무 큼
   화면 폭의 92% 또는 360px 중 작은 값으로 축소 + 내부 padding/폰트도 좀 줄임 */
@media (max-width: 768px), (max-height: 500px) {
    .color-picker-popup {
        width: min(92vw, 360px) !important;
        max-width: min(92vw, 360px) !important;
        max-height: 90dvh !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 13px !important;
    }
    /* 내부 padding 컴팩트화 (인라인 style 가 있을 수 있어 !important) */
    .color-picker-popup > * {
        font-size: inherit !important;
    }
    /* 측정 색상 팝업도 같이 — min-width 가 360px 박혀있어서 작은 화면 넘침 */
    .color-picker-popup.measure-color-popup {
        min-width: 0 !important;
        padding: 14px 16px !important;
    }
    /* 색상 입력/버튼 사이즈 살짝 줄임 */
    .color-picker-popup input[type="color"] {
        width: 40px !important;
        height: 28px !important;
    }
    .color-picker-popup input[type="text"],
    .color-picker-popup input[type="number"] {
        font-size: 12px !important;
    }
    .color-picker-popup button {
        font-size: 12px !important;
        padding: 5px 12px !important;
    }
    /* 포인트 '모양' 선택 버튼 — 안쪽 SVG 도형이 모바일에서 안 보이던 문제 수정.
       원인 1) 위 공통 button padding(5px 12px) 강제가 box-sizing:border-box 인
              32×32 버튼의 콘텐츠 영역을 먹어 SVG가 쪼그라듦 (Blink 계열).
       원인 2) iOS Safari/WebKit(아이폰은 Chrome 도 WebKit)은 <button> 에 기본
              -webkit-appearance: button 이 걸려 display:flex 가 무시되고 내용이
              네이티브 영역으로 클리핑되어 SVG 가 잘림.
       → 네이티브 외형 제거 + 패딩 제거 + flex 중앙정렬 강제 + SVG 고정 크기. */
    .color-picker-popup .marker-shape-btn {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    .color-picker-popup .marker-shape-btn svg {
        flex: 0 0 auto !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        display: block !important;
    }
    /* 팔레트 색상 팝업 — '포인트 크기'를 '포인트 스타일' 다음 줄로 내림(모바일 전용).
       포인트 크기 앞의 break 요소(평소 인라인 display:none 이라 PC 영향 없음)를 모바일에서만
       flex-basis:100% 로 살려 강제 줄바꿈. 줄 맨앞이 되므로 라벨 좌측여백(16px)도 제거. */
    .color-picker-popup .pt-size-break {
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        height: 0 !important;
    }
    .color-picker-popup .pt-size-break + label {
        margin-left: 0 !important;
    }
    /* 가로 모드(높이 좁음) — 팝업 더 컴팩트 + 세로 스크롤 가능 */
    @media (orientation: landscape) and (max-height: 500px) {
        .color-picker-popup {
            max-height: 88dvh !important;
            max-height: 88vh !important;
            padding: 10px 12px !important;
        }
    }
}

/* 모바일: 워크스페이스 list view 표 — th/td padding 15px → 컴팩트하게.
   모든 컬럼 nowrap + 넘치면 말줄임(...) 으로 세로 늘어남 방지 */
@media (max-width: 768px), (max-height: 500px) {
    #workspace .workspace-table th,
    #workspace .workspace-table td {
        padding: 6px 3px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 0; /* table-layout: auto 가 ellipsis 동작하게 */
    }
    /* 데이터(4번째) — 좁게 */
    #workspace .workspace-table th:nth-child(4),
    #workspace .workspace-table td:nth-child(4) {
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: 36px !important;
        max-width: 36px !important;
        text-align: center !important;
    }
    /* 수정일(5번째) — 좁게 + 줄바꿈 허용 (날짜 길면 2줄) */
    #workspace .workspace-table th:nth-child(5),
    #workspace .workspace-table td:nth-child(5) {
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: 56px !important;
        max-width: 56px !important;
        white-space: normal !important;
        word-break: break-all !important;
        text-align: center !important;
    }
    /* 공유(6번째) — 좁게 */
    #workspace .workspace-table th:nth-child(6),
    #workspace .workspace-table td:nth-child(6) {
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: 36px !important;
        max-width: 36px !important;
        text-align: center !important;
    }
    /* 작업(7번째, 마지막) — 좁게 */
    #workspace .workspace-table th:nth-child(7),
    #workspace .workspace-table td:nth-child(7) {
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: 52px !important;
        max-width: 52px !important;
    }
    /* ⭐ 칼럼(1번째) — 좁게, 왼쪽 살짝 들여서 (너무 끝에 안 붙게) */
    #workspace .workspace-table th:nth-child(1),
    #workspace .workspace-table td:nth-child(1) {
        padding: 4px 0 4px 6px !important;
        width: 22px !important;
        max-width: 22px !important;
        text-align: left !important;
    }
    /* 별표 버튼 자체도 왼쪽 정렬 + 내부 padding 제거 */
    #workspace .workspace-table td:nth-child(1) .favorite-btn {
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block !important;
        text-align: left !important;
    }
    /* 이름(2번째), 카테고리(3번째) 칼럼 — padding 거의 0 + 줄바꿈 허용 + 폭 강제 제한 */
    #workspace .workspace-table th:nth-child(2),
    #workspace .workspace-table td:nth-child(2),
    #workspace .workspace-table th:nth-child(3),
    #workspace .workspace-table td:nth-child(3) {
        padding: 4px 2px !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: 60px !important;
        max-width: 60px !important;
        min-width: 0 !important;
    }
    /* 워크스페이스 테이블 자체 — table-layout: fixed 로 명시적 폭 적용되게 */
    #workspace .workspace-table {
        table-layout: fixed !important;
    }
    /* 이름 칼럼 내부 wrapper(name-with-color) 도 컴팩트 */
    #workspace .workspace-table td:nth-child(2) .name-with-color {
        gap: 2px !important;
        align-items: flex-start !important;
    }
    #workspace .workspace-table td:nth-child(2) .name-with-color > div {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow: hidden !important;
    }
    /* 이름/설명 내부 span 도 줄바꿈 허용 */
    #workspace .workspace-table .workspace-name,
    #workspace .workspace-table .workspace-description-small {
        white-space: normal !important;
        word-break: break-all !important;
    }
    #workspace .workspace-table .workspace-name {
        font-size: 13px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    #workspace .workspace-table .workspace-description-small {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    #workspace .workspace-table .name-with-color {
        gap: 6px !important;
    }
    #workspace .workspace-table .color-indicator {
        width: 4px !important;
        height: 26px !important;
    }
    #workspace .workspace-table .category-badge,
    #workspace .workspace-table .shared-badge,
    #workspace .workspace-table .private-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    #workspace .workspace-table .action-buttons {
        gap: 2px !important;
    }
    #workspace .workspace-table .action-btn,
    #workspace .workspace-table .favorite-btn {
        padding: 3px 5px !important;
        font-size: 11px !important;
    }
}

/* 가로 모바일 — 워크스페이스 list view 작업 칼럼만 살짝 우측으로 + 폭 추가
   (위의 @media 와 분리해서 nested media query specificity 문제 회피) */
@media (orientation: landscape) and (max-height: 500px) {
    #workspace .workspace-table th:nth-child(7),
    #workspace .workspace-table td:nth-child(7) {
        padding-left: 20px !important;
        padding-right: 4px !important;
        width: 72px !important;
        max-width: 72px !important;
    }

    /* 가로 모바일 — 워크스페이스 필터 영역 2행 grid:
       1행: 카테고리 칩 (즐겨찾기/연구프로젝트/.../분석결과) 가로 풀폭
       2행: 검색 + 역순 + 정렬 + view-toggle */
    #workspace .workspace-filters {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "categories categories"
            "search controls" !important;
        gap: 6px 8px !important;
        align-items: center !important;
    }
    #workspace .workspace-filters .filter-section {
        display: contents !important;
    }
    #workspace .workspace-filters .category-filter {
        grid-area: categories !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    #workspace .workspace-filters .search-section {
        grid-area: search !important;
        min-width: 0 !important;
    }
    #workspace .workspace-filters .search-section .search-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #workspace .workspace-filters .view-controls {
        grid-area: controls !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
}

/* 모바일 세로 — CTD casting heatmap 차트 영역 높이 540px 너무 큼 → 축소 + 가로 폭에 맞춤 */
@media (orientation: portrait) and (max-width: 768px) {
    #ctdSectionChartArea {
        height: 280px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    /* SVG 차트도 viewBox preserveAspectRatio 로 컨테이너에 맞춤 */
    #ctdSectionChartArea svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    /* 컨트롤바도 컴팩트 */
    #ctdSectionControlBar {
        font-size: 0.85em !important;
        margin-bottom: 6px !important;
    }
}

/* 모바일 가로 — CTD heatmap 그래프 크기 유지 + 컨테이너에 세로 스크롤 허용 */
@media (orientation: landscape) and (max-height: 500px) {
    #ctdSectionChartArea {
        height: 540px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    #ctdSectionChartArea svg {
        width: 100% !important;
        height: 540px !important;
        display: block !important;
    }
    /* 부모 모달 body 가 세로 스크롤 가능하게 */
    .chart-modal-body:has(#ctdSectionChartArea) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        max-height: 100dvh !important;
    }
}

/* ===== css/style/style.11.css ===== */
#trackSearchResults.transitioning-uncollapse {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
}
/* 조회 전 no-results 메시지의 큰 패딩(40px) 축소 */
#observationSearchResults .no-results,
#favorites-search-tab .no-results {
    padding: 16px !important;
}
/* 즐겨찾기 조회 서브탭 검색결과 스크롤바를 관측 데이터와 동일하게 */
#favorites-search-tab .favorites-search-results::-webkit-scrollbar,
#favorites-search-tab #favoritesSearchResults::-webkit-scrollbar,
#favorites-search-tab .search-results-list::-webkit-scrollbar {
    width: 8px;
}
#favorites-search-tab .favorites-search-results::-webkit-scrollbar-track,
#favorites-search-tab #favoritesSearchResults::-webkit-scrollbar-track,
#favorites-search-tab .search-results-list::-webkit-scrollbar-track {
    background: transparent;
}
#favorites-search-tab .favorites-search-results::-webkit-scrollbar-thumb,
#favorites-search-tab #favoritesSearchResults::-webkit-scrollbar-thumb,
#favorites-search-tab .search-results-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
    transition: background 0.3s;
}
#favorites-search-tab .favorites-search-results:hover::-webkit-scrollbar-thumb,
#favorites-search-tab #favoritesSearchResults:hover::-webkit-scrollbar-thumb,
#favorites-search-tab .search-results-list:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}
#favorites-search-tab .favorites-search-results:hover::-webkit-scrollbar-thumb:hover,
#favorites-search-tab #favoritesSearchResults:hover::-webkit-scrollbar-thumb:hover,
#favorites-search-tab .search-results-list:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.55);
}
/* 새로고침 버튼을 관측데이터 초기화 버튼 스타일과 동일하게 */
#favorites-my-tab .refresh-btn {
    background: rgba(140, 40, 40, 0.75) !important;
    background-color: rgba(140, 40, 40, 0.75) !important;
    color: #ffffff !important;
    border: 1.5px solid #8c2828 !important;
}
#favorites-my-tab .refresh-btn:hover {
    background: rgba(140, 40, 40, 0.9) !important;
    background-color: rgba(140, 40, 40, 0.9) !important;
    border-color: #8c2828 !important;
}
#favorites-my-tab .search-clear-btn {
    color: rgba(255, 255, 255, 0.7) !important;
}
/* 워크스페이스 그룹/트리 컨테이너 내부 자체 박스는 투명으로 두어 상위 어두운 배경이 보이도록 */
#favorites-my-tab .workspace-group,
#favorites-my-tab .tree-view {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ===== css/workspace/workspace.01.css ===== */
/* workspace.css - Workspace 스타일 (완전 스코프 제한) */

/* ===== 공유 설정 팝업 스타일 ===== */
.share-settings {
    max-width: 720px;
    margin: 0 auto;
}

.share-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 12px 12px 0 0;
    margin: -20px -20px 20px -20px;
}

.workspace-info-header h3 {
    color: white !important;
    font-size: 1.4em;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.workspace-info-header p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 8px 0 0 0 !important;
    font-size: 0.9em !important;
    opacity: 0.9;
}

.share-status-card {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #e1e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.status-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.status-icon.shared {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.status-icon.private {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.status-content h4 {
    margin: 0 0 5px 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
}

.status-content p {
    margin: 0;
    color: #5a6c7d;
    font-size: 0.9em;
}

.add-user-card {
    background: white;
    border: 2px solid #e8f4f8;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.add-user-card:hover {
    border-color: #3498db;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.1);
}

.add-user-card .card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f8f9fa;
}

.add-user-card .card-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-user-card .card-header h4 i {
    color: #3498db;
    font-size: 1.2em;
}

.add-user-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.add-user-form > button {
    height: 38px !important;
    min-height: 38px !important;
    margin-top: 19px;
    align-self: flex-end;
    padding: 10px 15px !important;
    box-sizing: border-box;
}

.form-field {
    flex: 1;
}

/* 사용자 추가 폼 내부의 공통 필드 스타일 */
.user-select-field,
.permission-field {
    margin-top: 4px;
}

.user-select-field {
    flex: 1;
}

.permission-field {
    flex: 0 0 120px;
}

.form-field label,
.add-user-form > div:not(.form-field) > label {
    display: block;
    margin-bottom: 12px;
    color: #34495e;
    font-weight: 500;
    font-size: 0.9em;
}

/* 사용자 선택과 권한 라벨 공통 스타일 */
.user-select-field label,
.permission-field label {
    display: block;
    margin-bottom: 18px;
    color: #34495e;
    font-weight: 500;
    font-size: 0.9em;
}


.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e1e8f0;
    border-radius: 8px;
    font-size: 0.9em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: white;
    height: 38px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.shared-users-section {
    background: white;
    border: 2px solid #f1f3f4;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.shared-users-section h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.bulk-actions .form-control {
    width: 120px !important;
    font-size: 0.85em !important;
    padding: 6px 8px !important;
}

.bulk-actions .btn-secondary {
    font-size: 0.8em !important;
    padding: 6px 12px !important;
    height: auto !important;
}

.shared-users-list {
    max-height: 250px !important;
    overflow-y: auto !important;
    border: 2px solid #e8f4f8 !important;
    padding: 15px !important;
    background: #fafbfc !important;
    border-radius: 8px !important;
    margin-top: 15px;
}

.shared-user-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 15px !important;
    border: 1px solid #e1e8f0 !important;
    background: white !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

.shared-user-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #3498db !important;
}

.shared-user-item:last-child {
    margin-bottom: 0 !important;
}

.user-info {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.user-info strong {
    color: #2c3e50;
    font-size: 0.95em;
    font-weight: 600;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info small {
    color: #7f8c8d !important;
    font-size: 0.8em;
    background: #ecf0f1;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-controls {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0;
    min-width: 160px;
}

.permission-select {
    width: 110px !important;
    font-size: 0.85em !important;
    padding: 6px 8px !important;
    height: auto !important;
    border: 1px solid #bdc3c7 !important;
}

.permission-select:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}

.btn-danger.small {
    font-size: 0.8em !important;
    padding: 6px 10px !important;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.btn-danger.small:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}

.no-shared-users {
    text-align: center !important;
    color: #95a5a6 !important;
    padding: 30px 20px !important;
    font-style: italic;
    background: white;
    border-radius: 8px;
    border: 2px dashed #bdc3c7;
}

/* 체크박스 스타일 개선 */
.share-settings input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
    accent-color: #3498db;
}

.share-settings label:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center;
    color: #34495e;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
}

.share-settings label:has(input[type="checkbox"]):hover {
    color: #2980b9;
}

/* 다이얼로그 액션 버튼 개선 */
.dialog-actions {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 2px solid #f8f9fa !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

.dialog-actions .btn-secondary {
    background: #95a5a6 !important;
    border: none !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.dialog-actions .btn-secondary:hover {
    background: #7f8c8d !important;
    transform: translateY(-1px) !important;
}

.dialog-actions .btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

.dialog-actions .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4) !important;
}

/* ===== 일반 버튼 스타일 ===== */
.btn-primary {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
    background: linear-gradient(135deg, #2980b9 0%, #1f5f99 100%) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(149, 165, 166, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3) !important;
    background: linear-gradient(135deg, #7f8c8d 0%, #5d6d6e 100%) !important;
}

.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(149, 165, 166, 0.3) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-danger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
}

.btn-danger:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3) !important;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-success:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3) !important;
    background: linear-gradient(135deg, #229954 0%, #1e8449 100%) !important;
}

.btn-success:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-warning:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3) !important;
    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%) !important;
}

.btn-warning:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3) !important;
}

.btn-info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.9em !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 38px !important;
}

.btn-info:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
    background: linear-gradient(135deg, #2980b9 0%, #1f5f99 100%) !important;
}

.btn-info:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3) !important;
}

/* 작은 버튼 스타일 */
.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8em !important;
    min-height: 30px !important;
}

/* 큰 버튼 스타일 */
.btn-lg {
    padding: 12px 24px !important;
    font-size: 1em !important;
    min-height: 44px !important;
}

/* 비활성화된 버튼 */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-warning:disabled,
.btn-info:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-danger:disabled:hover,
.btn-success:disabled:hover,
.btn-warning:disabled:hover,
.btn-info:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 버튼 그룹 */
.btn-group {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.btn-group .btn-primary,
.btn-group .btn-secondary,
.btn-group .btn-danger,
.btn-group .btn-success,
.btn-group .btn-warning,
.btn-group .btn-info {
    margin: 0;
}

/* 아이콘만 있는 버튼 */
.btn-icon {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.btn-icon.btn-sm {
    width: 30px !important;
    height: 30px !important;
}

.btn-icon.btn-lg {
    width: 44px !important;
    height: 44px !important;
}

/* 로딩 상태 */
#workspace .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#workspace .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 상태 배너 */
#workspace .status-banner {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    gap: 12px;
}

#workspace .status-banner.warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

#workspace .status-banner.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

#workspace .banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#workspace .banner-content strong {
    font-weight: 600;
    font-size: 14px;
}

#workspace .banner-content span {
    font-size: 13px;
    opacity: 0.8;
}

#workspace .retry-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s;
}

#workspace .retry-btn:hover {
    background: currentColor;
    color: white;
}

#workspace .workspace-container {
    padding: 20px;
    background: #f8f9fa;
    min-height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* 헤더 영역 */
#workspace .workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#workspace .workspace-title h2 {
    margin: 0;
    font-size: 28px;
    color: #2c3e50;
}

#workspace .workspace-subtitle {
    color: #7f8c8d;
    font-size: 14px;
    margin-left: 10px;
}

#workspace .workspace-actions {
    display: flex;
    gap: 10px;
}

/* 통계 카드 */
#workspace .workspace-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

#workspace .stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#workspace .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

#workspace .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

#workspace .stat-content {
    flex: 1;
}

#workspace .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
}

#workspace .stat-label {
    font-size: 14px;
    color: #7f8c8d;
    margin-top: 4px;
}

/* 필터 및 검색 영역 */
#workspace .workspace-filters {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

#workspace .filter-section {
    display: flex;
    gap: 20px;
    flex: 1;
    align-items: center;
}

#workspace .category-filter {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#workspace .category-btn {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

#workspace .category-btn:hover {
    background: #f8f9fa;
    border-color: #3498db;
}

#workspace .category-btn.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

#workspace .category-count {
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

#workspace .category-btn.active .category-count {
    background: rgba(255,255,255,0.3);
}

#workspace .search-section {
    position: relative;
    flex: 1;
    max-width: 300px;
}

#workspace .search-input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

#workspace .search-input:focus {
    outline: none;
    border-color: #3498db;
}

/* ===== css/workspace/workspace.02.css ===== */
#workspace .search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #7f8c8d;
}

#workspace .view-controls {
    display: flex;
    gap: 15px;
    align-items: center;
}

#workspace .reverse-order-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

#workspace .reverse-order-container:hover:not(:has(input:disabled)) {
    background: #f8f9fa;
    border-color: #3498db;
}

#workspace .reverse-order-container input[type="checkbox"] {
    cursor: pointer;
}

#workspace .reverse-order-container input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#workspace .reverse-order-container:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
    background: #f8f9fa;
}

#workspace .reverse-order-container span {
    user-select: none;
}

#workspace .sort-select {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

#workspace .view-toggle {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

#workspace .view-btn {
    padding: 8px 12px;
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

#workspace .view-btn:not(:last-child) {
    border-right: 1px solid #e0e0e0;
}

#workspace .view-btn:hover {
    background: #f8f9fa;
}

#workspace .view-btn.active {
    background: #3498db;
    color: white;
}

/* 워크스페이스 그리드 뷰 */
#workspace .workspace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    align-items: start;
    padding-bottom: 40px; /* 마지막 카드 아래에 여백 추가 */
}

#workspace .workspace-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    position: relative;
}

#workspace .workspace-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

#workspace .workspace-card-header {
    height: 80px;
    position: relative;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#workspace .workspace-card-header .workspace-name {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 15px;
}

#workspace .workspace-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

#workspace .favorite-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #bdc3c7;
}

#workspace .favorite-btn:hover {
    background: white;
    transform: scale(1.1);
}

#workspace .favorite-btn.active {
    color: #f39c12;
}

#workspace .more-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#workspace .more-btn:hover {
    background: white;
}

#workspace .workspace-card-body {
    padding: 20px 20px 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#workspace .workspace-name {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

#workspace .workspace-description {
    color: #7f8c8d;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#workspace .workspace-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

#workspace .tag {
    padding: 4px 10px;
    background: #ecf0f1;
    border-radius: 12px;
    font-size: 12px;
    color: #7f8c8d;
}

#workspace .workspace-info {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #95a5a6;
    padding-top: 15px;
    border-top: 1px solid #ecf0f1;
    margin-top: auto;
}

#workspace .info-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

#workspace .workspace-shared {
    margin-top: 10px;
    padding: 8px 12px;
    background: #e8f4fd;
    border-radius: 8px;
    font-size: 13px;
    color: #3498db;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 워크스페이스 리스트 뷰 */
#workspace .workspace-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#workspace .workspace-table {
    width: 100%;
    border-collapse: collapse;
}

#workspace .workspace-table thead {
    background: #f8f9fa;
}

#workspace .workspace-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    border-bottom: 2px solid #e0e0e0;
}

#workspace .workspace-table tbody tr {
    border-bottom: 1px solid #ecf0f1;
    transition: background 0.3s ease;
}

#workspace .workspace-table tbody tr:hover {
    background: #f8f9fa;
}

#workspace .workspace-table td {
    padding: 15px;
    font-size: 14px;
}

#workspace .workspace-name-cell {
    cursor: pointer;
}

#workspace .name-with-color {
    display: flex;
    align-items: center;
    gap: 10px;
}

#workspace .color-indicator {
    width: 8px;
    height: 40px;
    border-radius: 4px;
}

#workspace .workspace-description-small {
    font-size: 12px;
    color: #95a5a6;
    margin-top: 4px;
}

#workspace .category-badge {
    padding: 4px 10px;
    background: #ecf0f1;
    border-radius: 12px;
    font-size: 12px;
}

#workspace .shared-badge {
    padding: 4px 10px;
    background: #e8f4fd;
    color: #3498db;
    border-radius: 12px;
    font-size: 12px;
}

#workspace .private-badge {
    padding: 4px 10px;
    background: #f8f9fa;
    color: #95a5a6;
    border-radius: 12px;
    font-size: 12px;
}

#workspace .action-buttons {
    display: flex;
    gap: 8px;
}

#workspace .action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #7f8c8d;
}

#workspace .action-btn:hover {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

/* 빈 상태 */
#workspace .empty-state {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#workspace .empty-icon {
    font-size: 64px;
    color: #bdc3c7;
    margin-bottom: 20px;
}

#workspace .empty-state h3 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

#workspace .empty-state p {
    color: #7f8c8d;
    margin-bottom: 20px;
}

/* 다이얼로그 */
.workspace-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.workspace-dialog {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 720px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.workspace-dialog .dialog-header {
    padding: 20px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workspace-dialog .dialog-header h3 {
    margin: 0;
    color: #2c3e50;
}

.workspace-dialog .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.3s ease;
    color: #7f8c8d;
}

.workspace-dialog .close-btn:hover {
    background: #f8f9fa;
}

.workspace-dialog .dialog-body {
    padding: 20px;
}

.workspace-dialog .form-group {
    margin-bottom: 20px;
}

.workspace-dialog .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.workspace-dialog .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
}

.workspace-dialog .form-control:focus {
    outline: none;
    border-color: #3498db;
}

.workspace-dialog textarea.form-control {
    resize: vertical;
    font-family: inherit;
}

.workspace-dialog .color-picker {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.workspace-dialog .color-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.workspace-dialog .color-option:hover {
    transform: scale(1.1);
}

.workspace-dialog .color-option.selected {
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.workspace-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* 카테고리 관리 */
.workspace-dialog .category-manager {
    min-height: 300px;
}

.workspace-dialog .category-list {
    margin-bottom: 30px;
}

.workspace-dialog .category-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.workspace-dialog .category-item .category-icon {
    font-size: 20px;
    margin-right: 10px;
}

.workspace-dialog .category-item .category-name {
    flex: 1;
    font-weight: 600;
    color: #2c3e50;
}

.workspace-dialog .category-item .category-count {
    color: #7f8c8d;
    font-size: 13px;
    margin-right: 15px;
}

.workspace-dialog .category-actions {
    display: flex;
    gap: 8px;
}

.workspace-dialog .category-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #7f8c8d;
}

.workspace-dialog .category-actions button:hover:not(:disabled) {
    background: #3498db;
    color: white;
}

.workspace-dialog .category-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.workspace-dialog .add-category-section h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.workspace-dialog .form-row {
    display: flex;
    gap: 10px;
}

/* 워크스페이스 버튼 스타일 */
.workspace-btn-primary {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.workspace-btn-primary:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

.workspace-btn-secondary {
    padding: 10px 20px;
    background: white;
    color: #2c3e50;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.workspace-btn-secondary:hover {
    background: #f8f9fa;
    border-color: #3498db;
    color: #3498db;
}

/* 드롭다운 메뉴 */
.workspace-dropdown-menu {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 10001;
    overflow: hidden;
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.workspace-dropdown-menu .dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #2c3e50;
}

.workspace-dropdown-menu .dropdown-item:hover {
    background: #f8f9fa;
}

.workspace-dropdown-menu .dropdown-item.danger {
    color: #e74c3c;
}

.workspace-dropdown-menu .dropdown-item.danger:hover {
    background: #fee;
}

.workspace-dropdown-menu .dropdown-item i {
    width: 16px;
    text-align: center;
}

.workspace-dropdown-menu .dropdown-divider {
    height: 1px;
    background: #ecf0f1;
    margin: 5px 0;
}

/* 알림 */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 10003;
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left: 4px solid #2ecc71;
}

.notification-error {
    border-left: 4px solid #e74c3c;
}

.notification-info {
    border-left: 4px solid #3498db;
}

/* 공유된 사용자 팝업 스타일 */
.shared-users-popup-content {
    padding: 0;
}

.shared-users-popup-content .popup-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 12px 12px 0 0;
}

.shared-users-popup-content .workspace-info h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1em;
    font-weight: 600;
}

.shared-users-popup-content .workspace-info h4 i {
    font-size: 1.2em;
}

.shared-users-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
}

.shared-user-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.shared-user-item:hover {
    background: #f8f9fa;
}

.shared-user-item:last-child {
    border-bottom: none;
}

.user-avatar {
    margin-right: 15px;
    color: #95a5a6;
    font-size: 2.2em;
}

.user-details {
    flex: 1;
}

.user-name {
    font-weight: 600;
    font-size: 1em;
    color: #2c3e50;
    margin-bottom: 2px;
}

.user-id {
    font-size: 0.85em;
    color: #7f8c8d;
    font-family: monospace;
}

.user-permission {
    margin-left: 15px;
}

.permission-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permission-badge.view {
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.permission-badge.edit {
    background: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.permission-badge.admin {
    background: #fff3e0;
    color: #ef6c00;
    border: 1px solid #ffcc02;
}

/* 공유 정보 클릭 가능하도록 스타일 추가 */
#workspace .workspace-shared {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
}

#workspace .workspace-shared:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    transform: translateY(-1px);
}

#workspace .workspace-shared i {
    margin-right: 6px;
}

/* 팝업 다이얼로그 크기 조정 */
.workspace-dialog {
    max-width: 500px;
    width: 90%;
}

/* 공유된 사용자 팝업용 다이얼로그 스타일 */
.workspace-dialog:has(.shared-users-popup-content) {
    max-width: 450px;
    animation: slideUpFadeIn 0.3s ease-out;
}

/* 공유 팝업 슬라이드 애니메이션 */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.workspace-dialog:has(.shared-users-popup-content) .dialog-body {
    padding: 0;
}

/* 스크롤바 스타일링 */
.shared-users-list::-webkit-scrollbar,
#workspace .workspace-container::-webkit-scrollbar {
    width: 8px;
}

.shared-users-list::-webkit-scrollbar-track,
#workspace .workspace-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.shared-users-list::-webkit-scrollbar-thumb,
#workspace .workspace-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.shared-users-list::-webkit-scrollbar-thumb:hover,
#workspace .workspace-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 삭제 애니메이션 효과 */

/* ===== css/workspace/workspace.03.css ===== */
@keyframes fragmentDelete {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(1.05) rotate(2deg);
    }
    50% {
        transform: scale(0.9) rotate(-1deg);
        opacity: 0.8;
    }
    75% {
        transform: scale(0.5) rotate(5deg) translateY(-20px);
        opacity: 0.3;
    }
    100% {
        transform: scale(0) rotate(15deg) translateY(-50px);
        opacity: 0;
    }
}

@keyframes fragmentParticle {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(var(--random-x, 100px)) translateY(var(--random-y, -100px)) scale(0);
        opacity: 0;
    }
}

.workspace-card.deleting {
    animation: fragmentDelete 0.8s ease-in-out forwards;
    position: relative;
    overflow: visible;
    z-index: 10;
}

.workspace-card.deleting::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255,0,0,0.1) 50%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
    pointer-events: none;
    animation: fragmentParticle 1s ease-out forwards;
    z-index: 100;
}

.particle:nth-child(odd) {
    background: #3498db;
}

.particle:nth-child(3n) {
    background: #f39c12;
    width: 6px;
    height: 6px;
}

.particle:nth-child(4n) {
    background: #2ecc71;
    width: 10px;
    height: 10px;
}

/* 카드 위치 이동 애니메이션 */
.workspace-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.workspace-card.moving {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 그리드 컨테이너의 부드러운 전환 */
#workspace .workspace-grid {
    transition: all 0.3s ease;
}

/* 카드 삭제 후 공간 채우기 애니메이션 */

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0.8;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(20px);
        opacity: 0.8;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.workspace-card.slide-up {
    animation: slideUp 0.4s ease-out;
}

.workspace-card.slide-left {
    animation: slideLeft 0.4s ease-out;
}

/* 그리드 재배치 상태 */
#workspace .workspace-grid.repositioning {
    overflow: visible;
}

#workspace .workspace-grid.repositioning .workspace-card {
    transform-origin: center;
}

/* 드래그앤드랍 스타일 */
.workspace-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.workspace-card.draggable {
    cursor: grab;
}

.workspace-card:not(.draggable) {
    cursor: default;
}

.workspace-card:not(.draggable):hover {
    cursor: default;
}

.workspace-card.dragging {
    opacity: 0.7;
    transform: scale(1.05) rotate(5deg);
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: 2px dashed #3498db;
}

.workspace-card.drag-over {
    transform: translateX(10px);
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
}

.workspace-card.drag-target::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 3px dashed #3498db;
    border-radius: 15px;
    background: rgba(52, 152, 219, 0.1);
    animation: dragTargetPulse 1s infinite;
}

@keyframes dragTargetPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

/* 드래그 미리보기 */
.drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.8;
    transform: rotate(5deg) scale(0.9);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid #3498db;
    border-radius: 12px;
}

/* 드래그 중 그리드 스타일 */
#workspace .workspace-grid.drag-active {
    background: linear-gradient(45deg, transparent 48%, rgba(52, 152, 219, 0.1) 50%, transparent 52%);
    background-size: 20px 20px;
}

/* 드래그 완료 후 재정렬 애니메이션 */
.workspace-card.reordering {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 드래그앤드롭 성공 애니메이션 */
@keyframes dragSuccess {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    25% {
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(46, 204, 113, 0.6);
    }
    50% {
        transform: scale(1.05) rotateY(5deg);
        box-shadow: 0 0 35px rgba(46, 204, 113, 0.8);
        border: 2px solid #2ecc71;
    }
    75% {
        transform: scale(1.02) rotateY(-2deg);
        box-shadow: 0 0 30px rgba(46, 204, 113, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: none;
    }
}

@keyframes successParticle {
    0% {
        transform: translateX(0) translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(var(--random-x, 50px)) translateY(var(--random-y, -50px)) scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes successPulse {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5) rotate(360deg);
        opacity: 0;
    }
}

.workspace-card.drag-success {
    animation: dragSuccess 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
    overflow: visible;
    z-index: 100;
}

.workspace-card.drag-success::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: #2ecc71;
    background: rgba(255, 255, 255, 0.95);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.4);
    animation: successPulse 1.2s ease-out forwards;
    z-index: 1;
}

/* 성공 파티클 */
.success-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #2ecc71;
    border-radius: 50%;
    pointer-events: none;
    animation: successParticle 0.8s ease-out forwards;
    z-index: 101;
}

.success-particle:nth-child(odd) {
    background: #27ae60;
    width: 8px;
    height: 8px;
}

.success-particle:nth-child(3n) {
    background: #f39c12;
    width: 4px;
    height: 4px;
    animation-duration: 1s;
}

.success-particle:nth-child(4n) {
    background: #3498db;
    width: 5px;
    height: 5px;
    animation-duration: 0.9s;
}

.success-particle:nth-child(5n) {
    background: #ffffff;
    width: 3px;
    height: 3px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

/* 생성 애니메이션 효과 */
@keyframes cardSpawnBounce {
    0% {
        transform: scale(0) rotate(-10deg) translateY(50px);
        opacity: 0;
        filter: blur(5px);
    }
    20% {
        transform: scale(0.3) rotate(-5deg) translateY(30px);
        opacity: 0.3;
        filter: blur(3px);
    }
    40% {
        transform: scale(0.7) rotate(2deg) translateY(10px);
        opacity: 0.7;
        filter: blur(1px);
    }
    60% {
        transform: scale(1.1) rotate(-1deg) translateY(-10px);
        opacity: 0.9;
        filter: blur(0px);
    }
    80% {
        transform: scale(0.95) rotate(0.5deg) translateY(-5px);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg) translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes sparkleEffect {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    25% {
        transform: scale(1.2) rotate(90deg);
        opacity: 0.8;
    }
    50% {
        transform: scale(0.8) rotate(180deg);
        opacity: 1;
    }
    75% {
        transform: scale(1.5) rotate(270deg);
        opacity: 0.6;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(52, 152, 219, 0.6), 0 0 60px rgba(52, 152, 219, 0.2);
    }
}

/* 새로운 워크스페이스 카드가 생성될 때 적용되는 클래스 */
.workspace-card.spawning {
    animation: cardSpawnBounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    position: relative;
    overflow: visible;
    z-index: 10;
}

.workspace-card.spawning::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.1), rgba(243, 156, 18, 0.1));
    border-radius: 20px;
    animation: glowPulse 1.2s ease-in-out;
    z-index: -1;
}

/* 생성 시 반짝이는 파티클 효과 */
.sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(45deg, #3498db, #2ecc71, #f39c12, #e74c3c);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleEffect 1s ease-out forwards;
    z-index: 100;
}

.sparkle:nth-child(odd) {
    background: linear-gradient(45deg, #9b59b6, #3498db);
    width: 8px;
    height: 8px;
}

.sparkle:nth-child(3n) {
    background: linear-gradient(45deg, #f39c12, #e67e22);
    width: 10px;
    height: 10px;
    animation-duration: 1.3s;
}

.sparkle:nth-child(4n) {
    background: linear-gradient(45deg, #2ecc71, #27ae60);
    width: 6px;
    height: 6px;
    animation-duration: 0.8s;
}

.sparkle:nth-child(5n) {
    background: radial-gradient(circle, #ffffff, #3498db);
    width: 4px;
    height: 4px;
    animation-duration: 1.5s;
}

/* 그리드 컨테이너가 새 카드를 받을 때 */
#workspace .workspace-grid.receiving {
    overflow: visible;
}

#workspace .workspace-grid.receiving .workspace-card {
    transform-origin: center bottom;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    #workspace .workspace-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    #workspace .workspace-filters {
        flex-direction: column;
        align-items: stretch;
    }

    #workspace .filter-section {
        flex-direction: column;
    }

    #workspace .search-section {
        max-width: none;
    }

    #workspace .workspace-grid {
        grid-template-columns: 1fr;
    }

    #workspace .workspace-stats {
        grid-template-columns: 1fr;
    }

    .workspace-dialog {
        width: 95%;
    }

    .shared-user-item {
        padding: 12px 15px;
    }

    .user-avatar {
        font-size: 1.8em;
        margin-right: 12px;
    }

    .permission-badge {
        padding: 3px 8px;
        font-size: 0.75em;
    }
}

/* 새로운 워크스페이스 상세 정보 스타일 */
.workspace-details-new {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    max-width: 800px;
    width: 100%;
    animation: slideUpFadeIn 0.4s ease-out;
}

.detail-header-new {
    padding: 30px;
    color: white;
    position: relative;
    overflow: hidden;
}

.detail-header-new::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.detail-header-new .header-icon {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 15px;
    border-radius: 50%;
    font-size: 24px;
    margin-bottom: 15px;
    backdrop-filter: blur(10px);
}

.detail-header-new .header-content h3 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-header-new .header-content p {
    margin: 0;
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.5;
}

.detail-header-new .header-stats {
    display: flex;
    gap: 25px;
    margin-top: 20px;
}

.detail-header-new .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.detail-header-new .stat-item i {
    font-size: 18px;
}

.detail-header-new .stat-item span {
    font-weight: 600;
    font-size: 16px;
}

.detail-body-new {
    padding: 40px 30px;
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.detail-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.detail-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid #f1f3f4;
    background: linear-gradient(135deg, #fafafa, #f5f5f5);
}

.detail-card .card-header i {
    font-size: 20px;
}

.detail-card .card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
}

.detail-card .card-content {
    padding: 20px 24px 24px 24px;
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f8f9fa;
}

.detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    min-width: 110px;
}

.detail-label i {
    font-size: 14px;
    opacity: 0.7;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
    flex: 1;
}

.detail-value.highlight {
    color: #27ae60;
    background: linear-gradient(135deg, #e8f5e8, #d4edda);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 15px;
}

.tag-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 6px;
    margin-bottom: 4px;
}

.user-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 6px;
    margin-bottom: 4px;
}

.more-users {
    display: inline-block;
    background: #e9ecef;
    color: #6c757d;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.no-data {
    color: #adb5bd;
    font-style: italic;
    font-size: 13px;
}

.shared-users {
    text-align: right;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .workspace-details-new {
        margin: 10px;
        max-width: calc(100vw - 20px);
    }
    
    .detail-header-new {
        padding: 20px;
    }
    
    .detail-body-new {
        padding: 20px;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .detail-header-new .header-content h3 {
        font-size: 22px;
    }
    
    .detail-header-new .header-stats {
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .detail-label {
        min-width: auto;
    }
    
    .detail-value {
        text-align: left;
        width: 100%;
    }
    
    .shared-users {
        text-align: left;
    }
}

/* ===== 권한 기반 스타일 ===== */

/* 읽기 전용 워크스페이스 스타일 */
#workspace .workspace-card.read-only,
#workspace .workspace-row.read-only {
    opacity: 0.85;
    border-left: 4px solid #95a5a6;
}

#workspace .workspace-card.read-only:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(149, 165, 166, 0.3);
}

/* 회색 텍스트 - 원래 색상 유지 */
/* #workspace .text-muted,
#workspace .workspace-card.read-only .workspace-name,
#workspace .workspace-card.read-only .workspace-description,
#workspace .workspace-card.read-only p.workspace-description,
#workspace .workspace-row.read-only .workspace-name,
#workspace .workspace-row.read-only .workspace-description-small,
#workspace .workspace-card.read-only h3.workspace-name,
#workspace .workspace-row.read-only td .workspace-name,
#workspace .workspace-row.read-only td .workspace-description-small {
    color: #7f8c8d !important;
    opacity: 0.8;
} */

/* 권한 배지 */
#workspace .permission-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
}

#workspace .permission-badge.view-only {
    background: #ecf0f1;
    color: #7f8c8d;
}

/* 권한 텍스트 */
#workspace .permission-text {
    color: #95a5a6 !important;
    font-size: 0.8em;
    font-style: italic;
}

/* 비활성화된 버튼 스타일 - 즐겨찾기 버튼은 항상 활성화 */
#workspace .action-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ecf0f1 !important;
    color: #95a5a6 !important;
}

#workspace .action-btn.disabled:hover {
    background-color: #ecf0f1 !important;
    transform: none;
}

/* 드롭다운 메뉴 disabled 항목 - 권한 없는 항목 회색 처리 */
#workspace .workspace-dropdown-menu .dropdown-item.disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu .dropdown-item.disabled:hover {
    background-color: rgba(149, 165, 166, 0.1) !important;
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu .dropdown-item.disabled i {
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu .dropdown-item.disabled .permission-hint {
    color: #e74c3c !important;
}

/* 읽기 전용 워크스페이스의 드롭다운 메뉴에서 권한 없는 항목만 회색 처리 */
#workspace .workspace-dropdown-menu.read-only-dropdown .dropdown-item.disabled,
#workspace .workspace-dropdown-menu[data-workspace-permission="view"] .dropdown-item.disabled {
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu.read-only-dropdown .dropdown-item.disabled:hover,
#workspace .workspace-dropdown-menu[data-workspace-permission="view"] .dropdown-item.disabled:hover {
    color: #95a5a6 !important;
    background-color: rgba(149, 165, 166, 0.1) !important;
}

#workspace .workspace-dropdown-menu.read-only-dropdown .dropdown-item.disabled i,
#workspace .workspace-dropdown-menu[data-workspace-permission="view"] .dropdown-item.disabled i {
    color: #95a5a6 !important;
}

/* 삭제 항목은 권한이 없어도 빨간색 유지 (단, disabled 상태에서는 회색) */
#workspace .workspace-dropdown-menu .dropdown-item.danger.disabled {
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu .dropdown-item.danger.disabled i {
    color: #95a5a6 !important;
}

#workspace .workspace-dropdown-menu .dropdown-item.danger.disabled .permission-hint {
    color: #e74c3c !important;
}

/* 권한 힌트 텍스트 */

/* ===== css/workspace/workspace.04.css ===== */
#workspace .permission-hint {
    font-size: 0.75em;
    color: #e74c3c;
    font-style: italic;
    margin-left: 8px;
    font-weight: 500;
}

/* 모든 disabled 드롭다운 항목에 강제 회색 적용 - 최강 우선순위 */
html body #workspace .workspace-dropdown-menu .dropdown-item.disabled,
html body #workspace .workspace-dropdown-menu .dropdown-item.disabled *,
html body #workspace .workspace-dropdown-menu .dropdown-item.disabled i,
html body #workspace .workspace-dropdown-menu .dropdown-item.disabled span:not(.permission-hint) {
    color: #95a5a6 !important;
    opacity: 0.7 !important;
}

html body #workspace .workspace-dropdown-menu .dropdown-item.disabled .permission-hint {
    color: #e74c3c !important;
    opacity: 1 !important;
}

/* 위의 스타일이 적용되지 않는 경우를 위한 대안 */
.workspace-dropdown-menu .dropdown-item.disabled[style*="color"] {
    color: #95a5a6 !important;
}

.workspace-dropdown-menu .dropdown-item.disabled .fas,
.workspace-dropdown-menu .dropdown-item.disabled .fa {
    color: #95a5a6 !important;
}

/* 읽기 전용 워크스페이스 카드 헤더 스타일 조정 - 원래 색상 유지 */
/* #workspace .workspace-card.read-only .workspace-card-header {
    background: linear-gradient(135deg, rgba(149, 165, 166, 0.8), rgba(127, 140, 141, 0.8)) !important;
} */

/* 리스트 뷰에서 읽기 전용 행 스타일 - 원래 색상 유지 */
/* #workspace .workspace-row.read-only td {
    color: #7f8c8d;
}

#workspace .workspace-row.read-only .workspace-name {
    font-weight: normal;
} */

/* 워크스페이스 권한 표시기 스타일 */
.workspace-permission-indicator {
    background: rgba(149, 165, 166, 0.9);
    color: white;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 4px;
    font-weight: 500;
    position: absolute;
    top: 4px;
    left: 8px;
    z-index: 10;
}

.workspace-permission-indicator i {
    font-size: 0.9em;
}

/* 리스트 뷰용 작은 권한 표시기 */
.workspace-permission-indicator-small {
    background: rgba(149, 165, 166, 0.9);
    color: white;
    font-size: 0.65em;
    padding: 1px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 2px;
    font-weight: 500;
}

.workspace-permission-indicator-small i {
    font-size: 0.8em;
}

/* ===== 카테고리 스타일 ===== */
.category-section {
    margin-bottom: 10px;
}

.category-header {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 4px solid #007bff;
    user-select: none;
    font-weight: 500;
}

.category-icon {
    font-size: 14px;
}

.category-name {
    flex: 1;
    font-weight: 500;
    color: #495057;
}

.category-count {
    font-size: 0.85em;
    color: #6c757d;
    background: #dee2e6;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}


.category-favorites {
    margin-left: 16px;
    margin-top: 8px;
    border-left: 2px solid #e9ecef;
    padding-left: 12px;
}

.category-favorites .favorite-item {
    margin-bottom: 8px;
}

/* ===== css/addData/addData.01.css ===== */
/* Add Data Tab Navigation */
.add-data-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
}

.add-data-tab-btn {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9em;
    color: #666;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}

.add-data-tab-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.add-data-tab-btn.active {
    background: white;
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: 500;
}

.add-data-tab-content {
    display: none;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.add-data-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* User Input Tab Styles */
.user-input-section {
    padding: 20px;
}

.user-input-section h4 {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 1.1em;
}

.input-type-selection {
    margin-bottom: 20px;
}

.input-type-selection label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.input-type-buttons {
    display: flex;
    gap: 10px;
}

.input-type-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.input-type-btn:hover {
    background: #f0f0f0;
}

.input-type-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.input-controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.input-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.input-info .form-group {
    margin-bottom: 15px;
}

.input-info .form-group:last-child {
    margin-bottom: 0;
}

.input-info label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.input-info input,
.input-info textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.drawn-items-list {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.drawn-items-list h5 {
    margin: 0 0 10px 0;
    color: #333;
}

#drawnItemsContainer {
    max-height: 200px;
    overflow-y: auto;
}

.save-controls {
    text-align: center;
}

.drawing-instructions {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    padding: 10px;
    margin: 15px 0;
}

.instruction-text {
    margin: 0;
    color: #1976d2;
    font-size: 0.9em;
}

/* Coordinate Editor Styles */
.coordinate-editor-content {
    padding: 15px;
}

.coordinate-editor-content h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1em;
}

.editor-info-section {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.editor-info-section .form-group {
    margin-bottom: 12px;
}

.editor-info-section .form-group:last-child {
    margin-bottom: 0;
}

.coordinates-section {
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px;
    margin-bottom: 8px;
}

.coordinates-section h4 {
    margin: 0 0 4px 0;
    color: #555;
    font-size: 0.85em;
    font-weight: 600;
}

.coordinates-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.coordinate-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-bottom: 1px solid #eee;
}

.coordinate-item:last-child {
    border-bottom: none;
}

.coord-index {
    background: #007bff;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    min-width: 20px;
    text-align: center;
}

.coord-lat,
.coord-lng {
    flex: 1;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 0.85em;
}

.coord-delete {
    padding: 4px 8px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8em;
}

.coord-delete:hover {
    background: #c82333;
}

.coordinate-actions {
    display: flex;
    gap: 10px;
}

.editor-save-section {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* File Upload Styles */
.file-upload-section {
    margin-bottom: 20px;
}

.upload-area {
    border: 2px dashed #007bff;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background: #f8f9ff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: #0056b3;
    background: #f0f8ff;
}

.upload-area.drag-over {
    border-color: #28a745;
    background: #f8fff8;
}

.upload-icon {
    font-size: 3em;
    margin-bottom: 15px;
    color: #007bff;
}

.upload-text {
    margin-bottom: 20px;
}

.upload-text p {
    margin: 5px 0;
    color: #495057;
}

.observation-file-guide {
    max-width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #c9d8ee;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    box-shadow: 0 6px 16px rgba(31, 63, 104, 0.08);
    color: #26384d;
    text-align: left;
}

.observation-file-guide-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.94em;
    font-weight: 700;
    color: #153b66;
}

.observation-file-guide-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: #007bff;
}

.observation-file-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 8px;
    font-size: 0.84em;
    line-height: 1.35;
}

.observation-file-guide-grid span {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #e3ebf7;
    border-radius: 6px;
    background: #ffffff;
}

.observation-file-guide-grid strong {
    display: inline-block;
    min-width: 76px;
    margin-right: 4px;
    color: #0056b3;
}

@media (max-width: 520px) {
    .observation-file-guide-grid {
        grid-template-columns: 1fr;
    }
}

.upload-btn {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #007bff;
    color: white;
    transition: background-color 0.2s ease;
}

.upload-btn:hover {
    background: #0056b3;
}

.file-info {
    background: #e8f5e8;
    border: 1px solid #4CAF50;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.file-icon {
    font-size: 1.5em;
    color: #4CAF50;
}

.file-name {
    font-weight: 500;
    color: #2e7d2e;
    flex: 1;
}

.file-size {
    font-size: 0.9em;
    color: #666;
}

.file-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.batch-upload-queue {
    margin-top: 15px;
    border: 1px solid #d8dee4;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* 2줄 카드형: 파일명(가로 전체) + 메타(상태·크기·데이터셋·제거) */
.batch-upload-row {
    padding: 10px 12px;
    border-bottom: 1px solid #edf1f5;
    font-size: 0.92em;
}

.batch-upload-row:last-child {
    border-bottom: none;
}

.batch-file-name {
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: #24292f;
    margin-bottom: 6px;
}

.batch-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #5b6473;
}

.batch-meta-sep {
    color: #c8cdd4;
}

.batch-meta .batch-remove {
    margin-left: auto;
}

.batch-error {
    margin-top: 6px;
    color: #cf222e;
}

.batch-status {
    font-weight: 600;
}

.batch-status.completed {
    color: #1a7f37;
}

.batch-status.failed {
    color: #cf222e;
}

.batch-status.uploading {
    color: #0969da;
}

/* CSV Preview Styles */
.csv-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.csv-preview h4 {
    margin: 0;
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    font-size: 1em;
    color: #2c3e50;
}

.preview-table {
    max-height: 300px;
    overflow: auto;
    padding: 15px;
}

.preview-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.preview-table th,
.preview-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.preview-table th {
    background: #f8f9fa;
    font-weight: 500;
    color: #495057;
    position: sticky;
    top: 0;
}

/* Tab Placeholder Styles */
.tab-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #6c757d;
}

.placeholder-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

.tab-placeholder h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.tab-placeholder p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Data Type Selector Styles */
.data-type-selector {
    margin: 10px 0;
    padding: 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.data-type-selector label {
    display: inline-block;
    margin-right: 8px;
    font-weight: bold;
    font-size: 0.9em;
    color: #495057;
}

.data-type-selector select {
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    font-size: 0.9em;
    min-width: 200px;
}

.data-type-selector select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Validation Section Styles */
.validation-section {
    margin: 10px 0;
    text-align: left;
}

.validate-btn {
    background: #17a2b8;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.validate-btn:hover {
    background: #138496;
}

.validate-btn:active {
    transform: scale(0.98);
}

.validate-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Add Data Tab Styles */
.add-data-container {
    display: flex;
    height: calc(100vh - 120px);
    position: relative;
    background-color: #f5f5f5;
}

#addDataMap {
    flex: 1;
    height: 100%;
    position: relative;
}

.add-data-sidebar {
    width: 800px;
    background: white;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.add-data-panels {
    display: flex;
    height: 100%;
}

.add-data-left-panel {
    width: 400px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.add-data-right-panel {
    width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    background: #f8f9fa;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}

.panel-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: #2c3e50;
}

.table-query-section {
    padding: 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.selected-table-info {
    background: #e8f5e8;
    border: 1px solid #4CAF50;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.selected-table-info h4 {
    margin: 0 0 5px 0;
    color: #2e7d2e;
    font-size: 1.1em;
}

.selected-table-info p {
    margin: 0 0 10px 0;
    color: #555;
    font-size: 0.9em;
}

.table-search .form-group {
    margin-bottom: 15px;
}

.table-search label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.table-data-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.no-data-message, .loading-message {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

.loading-message {
    color: #3498db;
}

.table-data-item {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-data-item:hover {
    background-color: #f8f9fa;
}

.table-data-item.selected {
    background-color: #e3f2fd;
    border-left: 4px solid #2196F3;
}

.data-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.data-item-icon {
    font-size: 1.2em;
}

.data-item-name {
    font-weight: 500;
    color: #2c3e50;
}

.data-item-coords {
    font-size: 0.9em;
    color: #666;
    margin-left: auto;
}

.data-item-info {
    font-size: 0.85em;
    color: #888;
    margin-left: 28px;
}

.coordinate-editor {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.no-selection-message {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 40px 20px;
}

.coord-editor-header {
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.coord-editor-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 5px 0;
}

.coord-editor-info {
    font-size: 0.9em;
    color: #666;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.coordinate-list {
    margin-top: 20px;
}

.coordinate-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.coordinate-section h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 1em;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.coordinate-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.coordinate-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.coordinate-input label {
    font-size: 0.9em;
    font-weight: 500;
    color: #555;
}

.coordinate-input input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    transition: border-color 0.2s ease;
}

.coordinate-input input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.coordinate-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.coord-action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.coord-action-btn.save-btn {
    background: #28a745;
    color: white;
}

.coord-action-btn.save-btn:hover {
    background: #218838;
}

.coord-action-btn.cancel-btn {
    background: #6c757d;
    color: white;
}

.coord-action-btn.cancel-btn:hover {
    background: #545b62;
}

/* Search Results Styles */
.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ===== css/addData/addData.02.css ===== */
.search-results-header {
    padding: 10px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
}

.search-results-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1em;
}

.search-results-list {
    padding: 0;
}

.search-result-item {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: #f8f9fa;
}

.result-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.result-icon {
    font-size: 1.2em;
}

.result-name {
    font-weight: 500;
    color: #2c3e50;
    flex: 1;
}

.result-count {
    font-size: 0.9em;
    color: #666;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 10px;
}

.result-item-info {
    margin-bottom: 10px;
}

.result-workspace,
.result-geometry,
.result-description {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 3px;
}

.result-description {
    color: #888;
    font-style: italic;
}

.result-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.detail-btn {
    padding: 6px 12px;
    font-size: 0.85em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: #007bff;
    color: white;
    transition: background-color 0.2s ease;
}

.detail-btn:hover {
    background: #0056b3;
}

/* Table Data List in Editor */
.table-data-list-editor {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
}

.table-data-item-editor {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-data-item-editor:hover {
    background-color: #f8f9fa;
}

.table-data-item-editor.selected {
    background-color: #e3f2fd;
    border-left: 4px solid #2196F3;
}

.table-data-item-editor:last-child {
    border-bottom: none;
}

/* Loading and Error Messages */
.loading-message {
    color: #3498db;
    font-style: italic;
}

.error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
}

.error-message h4 {
    color: #721c24;
    margin: 0 0 10px 0;
}

.error-message p {
    color: #721c24;
    margin: 0 0 15px 0;
}

/* CSV Data Styles */
.csv-data-list-editor {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
}

.csv-data-item {
    border-bottom: 1px solid #eee;
    padding: 12px 15px;
}

.csv-data-item:last-child {
    border-bottom: none;
}

.csv-data-item .data-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.csv-data-item .data-item-name {
    font-weight: 500;
    color: #2c3e50;
}

.csv-data-item .data-item-info {
    font-size: 0.85em;
    color: #666;
    margin-left: auto;
}

.data-row-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-left: 28px;
    padding: 8px 0;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 8px 12px;
}

.data-field {
    font-size: 0.85em;
    color: #495057;
}

.data-field strong {
    color: #2c3e50;
}

/* User Tab Search Form Adjustments */
#addDataUserTab .search-form-container {
    margin-bottom: 20px;
}

#addDataUserTab .form-row {
    margin-bottom: 15px;
}

#addDataUserTab .search-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* Responsive design for add data */
@media (max-width: 1200px) {
    .add-data-sidebar {
        width: 600px;
    }
    
    .add-data-left-panel,
    .add-data-right-panel {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .add-data-container {
        flex-direction: column;
    }
    
    .add-data-sidebar {
        width: 100%;
        height: 50%;
        border-left: none;
        border-top: 1px solid #ddd;
    }
    
    .add-data-panels {
        flex-direction: column;
    }
    
    .add-data-left-panel,
    .add-data-right-panel {
        width: 100%;
        height: 50%;
    }
    
    .add-data-left-panel {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
}

/* CC_ File Mapping Results Styles */
.cc-mapping-results {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.cc-mapping-results h4 {
    color: #007bff;
    margin-bottom: 10px;
    font-size: 16px;
}

.cc-data-preview {
    margin-top: 15px;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.cc-mapped-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cc-mapped-table th {
    background: #e9ecef;
    padding: 8px 4px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.cc-mapped-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.cc-mapped-table tr:hover {
    background: #f5f5f5;
}

.cc-mapped-table td:first-child {
    font-weight: 600;
    color: #6c757d;
}

.more-data-notice {
    margin-top: 10px;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

/* ===== js/add_data/user/userStyles.css ===== */
/**
 * User Management Styles
 * 사용자 관리 탭 스타일
 */

/* Container */
.user-management-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Header Section */
.user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.user-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.user-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Search Box */
.search-box {
    position: relative;
}

.user-search-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 250px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.user-search-input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

/* Status Filter Box */
.status-filter-box {
    position: relative;
}

.status-filter-select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 120px;
    font-size: 14px;
    transition: border-color 0.2s;
    background: white;
}

.status-filter-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

.refresh-btn {
    padding: 8px 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.refresh-btn:hover {
    background: #45a049;
}

/* Table Container */
.user-table-container {
    flex: 1;
    overflow: auto;
    background: white;
    margin: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Table Styles */
.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.user-table thead {
    background: #e8f5e9;
    position: sticky;
    top: 0;
    z-index: 10;
}

.user-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #2e7d32;
    border-bottom: 2px solid #4CAF50;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.user-table th:hover {
    background: #c8e6c9;
}

.authority-header {
    text-align: center !important;
    background: #c8e6c9;
    border-left: 1px solid #4CAF50;
    border-right: 1px solid #4CAF50;
}

.sub-header th {
    font-size: 12px;
    padding: 8px;
    background: #f1f8e9;
    border-bottom: 1px solid #81c784;
    font-weight: normal;
}

.user-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.user-table tbody tr:hover {
    background: #f5f5f5;
}

.even-row {
    background: #fafafa;
}

.odd-row {
    background: white;
}

/* Cell Styles */
.user-id {
    font-weight: 600;
    color: #666;
    text-align: center;
}

.user-name {
    color: #333;
    font-weight: 500;
}

.user-role {
    padding: 4px 8px;
    display: inline-block;
}

.user-role:contains("admin") {
    color: #d32f2f;
    font-weight: 600;
}

.authority-cell {
    text-align: center;
    border-left: 1px solid #f0f0f0;
}

.checkmark {
    color: #4CAF50;
    font-size: 18px;
    font-weight: bold;
}

.user-email {
    color: #1976d2;
    font-size: 13px;
}

/* Sort Icon */
.sort-icon {
    display: inline-block;
    margin-left: 5px;
    color: #999;
    font-size: 12px;
}

/* Status Bar */
.user-status-bar {
    padding: 10px 20px;
    background: white;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #666;
}

/* Loading & Error States */
.loading-cell, .empty-cell, .error-cell {
    text-align: center;
    padding: 40px !important;
    color: #999;
    font-size: 14px;
}

.error-cell {
    color: #d32f2f;
}

.error-icon {
    font-size: 20px;
    margin-right: 8px;
}

/* Grid Action Buttons */
.action-grid-btn {
    padding: 8px 12px;
    margin: 0 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    transition: opacity 0.2s;
}

.action-grid-btn:hover {
    opacity: 0.9;
}

/* Inline Editable Cells */
.editable {
    cursor: pointer;
    position: relative;
}

.editable:hover {
    background-color: #f0f8ff;
}

.editable input,
.editable select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #4CAF50;
    border-radius: 2px;
    font-size: inherit;
    font-family: inherit;
}

/* Date Column Styles */
.readonly-date {
    background-color: #f8f9fa;
    color: #666;
    font-size: 12px;
    text-align: center;
    font-family: monospace;
    padding: 8px 4px;
    cursor: help;
    border-left: 1px solid #e0e0e0;
}

.readonly-date:hover {
    background-color: #f0f0f0;
}

/* Row States */
.new-row {
    background-color: #e8f5e9 !important;
}

.new-row .readonly-date {
    background-color: #d4e8d4 !important;
    color: #999;
}

.deleted-row {
    text-decoration: line-through;
    opacity: 0.6;
    background-color: #ffebee !important;
}

.new-row td:first-child::before {
    content: "NEW";
    position: absolute;
    left: -30px;
    color: #4CAF50;
    font-size: 10px;
    font-weight: bold;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 15px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.modal-close:hover {
    background-color: #f0f0f0;
    color: #333;
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-primary,
.btn-secondary {
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: #4CAF50;
    color: white;
}

.btn-primary:hover {
    background-color: #45a049;
}

.btn-secondary {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}

.btn-secondary:hover {
    background-color: #e9e9e9;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .user-search-input {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .user-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .user-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .user-table {
        font-size: 12px;
    }
    
    .user-table th, .user-table td {
        padding: 8px;
    }
    
    .modal-content {
        min-width: 300px;
        margin: 20px;
    }
    
    .checkbox-group {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ===== js/popup/passwordChangePopup.css ===== */
/**
 * Password Change Popup Styles
 * 패스워드 변경 팝업 전용 스타일
 */

/* Modal Container */
#passwordChangeModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Modal Content */
.auth-modal-content {
    background: white;
    border-radius: 8px;
    min-width: 450px;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.auth-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 15px;
    border-bottom: 1px solid #e0e0e0;
    background: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0;
}

.auth-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.auth-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.auth-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Modal Body */
.auth-modal-body {
    padding: 24px;
}

.auth-modal-body p {
    line-height: 1.6;
    font-size: 14px;
}

/* Form Styles */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}
/* :invalid 상태(필수입력 미충족 등)에서도 붉은 테두리 대신 파랑 유지 */
.auth-modal .form-group input:invalid:not(:placeholder-shown),
.auth-modal .form-group input:focus:invalid {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}

.form-group input::placeholder {
    color: #999;
    font-style: italic;
}

/* Button Styles */
.auth-submit-btn, .auth-extend-btn {
    padding: 10px 20px;
    height: 40px;  /* 두 버튼 높이 동일하게 설정 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;  /* 수직 정렬 추가 */
    margin: 0;  /* 상하 마진 제거 */
}

/* 버튼 내 아이콘 스타일 */
.auth-submit-btn i, .auth-extend-btn i {
    margin-right: 8px;  /* 아이콘과 텍스트 사이 간격 */
}

.auth-submit-btn {
    background: #2c3e50 !important;
    color: white !important;
    min-width: 50px;  /* 변경하기 버튼 - 기존의 절반 */
}

.auth-submit-btn:hover {
    background: #1f2d3d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.auth-extend-btn {
    background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
    color: white;
    min-width: 200px;  /* 연장하기 버튼 - 기존의 두 배 */
}

.auth-extend-btn:hover {
    background: linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.auth-submit-btn:active, .auth-extend-btn:active {
    transform: translateY(0);
}

/* Button Container */
.button-container {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    align-items: center;  /* 버튼들을 수직 중앙 정렬 */
}

/* Warning Message */
.password-warning {
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
    color: #e65100;
}

.password-warning strong {
    display: block;
    margin-bottom: 4px;
}

/* Responsive Design */
@media (max-width: 600px) {
    .auth-modal-content {
        min-width: 320px;
        margin: 20px;
        max-width: calc(100% - 40px);
    }
    
    .auth-modal-body {
        padding: 20px;
    }
    
    .button-container {
        flex-direction: column;
        gap: 8px;
    }
    
    .auth-submit-btn, .auth-extend-btn {
        width: 100%;
        min-width: auto;
    }
}