/* 기본 모바일 터치 최적화 */
* { -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; }

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #0d0e12; overflow: hidden;
    font-family: 'Pretendard', Arial, sans-serif; display: flex; color: #ffffff;
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* --- 커스텀 모달 공통 --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85); z-index: 6000;
    justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
#customConfirm { z-index: 9999; } 
.confirm-box { 
    background: #252525; padding: 25px; border-radius: 15px; text-align: center; 
    border: 1px solid #444; width: 85%; max-width: 350px;
    transition: background-color 0.3s;
}
.confirm-btns { display: flex; gap: 10px; margin-top: 20px; }
.confirm-btns button { flex: 1; padding: 15px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 15px; }
.btn-yes { background: #ff3b30; color: white; }
.btn-no { background: #444; color: white; }

/* 표(Table) 모달 창 */
.data-box {
    background: #252525; padding: 20px; border-radius: 12px; 
    width: 95%; max-width: 900px; height: 92%; display: flex; flex-direction: column;
    border: 1px solid #444; transition: background-color 0.3s;
}
.weather-data-box { width: 98%; max-width: 1300px; }

.data-table-container { flex: 1; overflow-y: auto; background: #1e1e1e; border: 1px solid #555; border-radius: 6px; padding-bottom: 5px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { border: 1px solid #555; padding: 12px 8px; text-align: center; }
.data-table th { background: #333; position: sticky; top: 0; z-index: 10; font-size: 14px; }
.data-table input[type="text"], .data-table input[type="number"], .data-table input[type="date"], .data-table select { 
    width: 100%; box-sizing: border-box; background: transparent; 
    border: none; color: white; text-align: center; font-family: inherit; font-size: 15px; padding: 5px 0;
}
.data-table input:focus, .data-table select:focus { outline: 1px solid #007aff; background: #2a2a2a; }
.data-table select option { background: #222; color: #fff; }
.data-table input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; accent-color: #ff3b30; }

/* 날씨 스플릿 레이아웃 */
.weather-split-layout { display: flex; gap: 20px; flex: 1; overflow: hidden; margin-top: 15px; padding-bottom: 5px; }
.weather-left-pane { flex: 1; display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid #444; padding-right: 20px; padding-bottom: 20px; }
.weather-right-pane { flex: 1.2; display: flex; flex-direction: column; overflow-y: auto; padding-bottom: 20px; }

/* 달력 뷰 UI */
.cal-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.cal-header-row button { background: #444; border: none; color: #fff; padding: 12px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; flex: 1; align-content: start; }
.cal-header-cell { text-align: center; font-weight: bold; font-size: 14px; padding: 8px; background: #333; border-radius: 4px; }
.cal-day { background: #222; border: 1px solid #444; border-radius: 6px; padding: 5px; min-height: 80px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.2s; position: relative; }
.cal-day:hover { border-color: #34c759; }
.cal-date { font-size: 13px; color: #aaa; margin-bottom: 2px; padding-left: 2px; }
.cal-icon { font-size: 28px; text-align: center; margin: auto 0; }
.cal-temp { font-size: 13px; text-align: center; color: #ccc; font-weight: bold; }
.cal-day.flight-day { border: 2px solid #ff3b30 !important; background-color: rgba(255, 59, 48, 0.1); }
.flight-badge { position: absolute; top: 4px; right: 4px; font-size: 12px; background: #ff3b30; color: white; border-radius: 4px; padding: 2px 5px; font-weight: bold; }

/* 버튼 클릭 시 파란 테두리가 번쩍였다 사라지는 피드백 */
@keyframes btnFlash {
    0%   { box-shadow: 0 0 0 3px rgba(47,107,255,0.85), 0 0 14px rgba(47,107,255,0.65); }
    100% { box-shadow: 0 0 0 0 rgba(47,107,255,0); }
}
#measureToolbar button.btn-flash { animation: btnFlash 0.45s ease-out; }

/* --- 사이드바 --- */
.sidebar {
    width: 320px; min-width: 320px; height: 100%;
    background-color: #111319; border-right: 1px solid #20232b;
    display: flex; flex-direction: column; z-index: 5000;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, border-color 0.3s;
    position: relative;
}
.sidebar.collapsed { margin-left: -320px; }

.toggle-btn {
    position: absolute; right: -36px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 70px; background-color: #1a1c22; border-radius: 0 10px 10px 0;
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    color: white; font-size: 20px; z-index: 5100; border: 1px solid #20232b; border-left: none;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar-header { flex-shrink: 0; padding: 15px; background-color: #111319; text-align: center; font-size: 15px; font-weight: bold; border-bottom: 1px solid #20232b; }
.weather-widget { flex-shrink: 0; padding: 12px 15px; background-color: #111319; border-bottom: 1px solid #20232b; display: flex; justify-content: center; align-items: center; gap: 15px; }
.add-form { flex-shrink: 0; padding: 12px 15px; background-color: #111319; border-bottom: 1px solid #20232b; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.record-sync-panel { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:7px 8px; border:1px solid #333; border-radius:5px; background:#1a1a1a; font-size:11px; }
.record-sync-status { flex:1; min-width:130px; font-weight:bold; color:#9aa0aa; line-height:1.3; }
.record-sync-status[data-state="synced"] { color:#34c759; }
.record-sync-status[data-state="pending"], .record-sync-status[data-state="working"] { color:#ff9500; }
.record-sync-status[data-state="conflict"], .record-sync-status[data-state="error"] { color:#ff453a; }
.record-sync-actions { display:flex; gap:4px; }
.record-sync-actions button, .record-sync-badge button { border:1px solid #555; border-radius:4px; background:#2a2e35; color:#fff; padding:4px 6px; font:inherit; cursor:pointer; }
.record-sync-actions button:disabled { opacity:.55; cursor:default; }
.record-sync-error { flex-basis:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ff9f0a; line-height:1.3; }
.record-sync-badge { margin-top:4px; font-size:11px; line-height:1.45; }
.record-sync-badge.pending { color:#ff9f0a; }
.record-sync-badge.conflict { color:#ff453a; }
.record-sync-badge button { margin:3px 3px 0 0; padding:3px 5px; }
#pinSheetSync:not(:empty) { margin-bottom:10px; }

.weather-icon { font-size: 32px; line-height: 1; }
.weather-info { display: flex; flex-direction: column; justify-content: center; }
.weather-location { font-size: 11px; font-weight: bold; color: #34c759; margin-bottom: 2px; }
.weather-temp { font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 2px; }
.weather-desc { font-size: 12px; color: #aaa; }

.theme-toggle { display: flex; gap: 6px; background: #1a1c22; padding: 4px; border-radius: 999px; border: 1px solid #20232b; }
.theme-toggle button { flex: 1; padding: 9px; border: none; border-radius: 999px; font-weight: bold; cursor: pointer; font-size: 13px; transition: 0.2s; background: transparent; color: #8a8f99; }
.btn-night, .btn-light { background: transparent; color: #8a8f99; border: none; }
.theme-toggle button.active { background: #2f6bff; color: #ffffff; box-shadow: 0 2px 8px rgba(47,107,255,0.35); }

.viewer-mode-control { display:flex; flex-direction:column; gap:7px; padding:9px; border:1px solid #2d313b; border-radius:8px; background:#171920; }
.viewer-mode-title { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#eef2f8; font-size:12px; font-weight:bold; }
.viewer-mode-title small { color:#8f97a6; font-size:10px; font-weight:normal; text-align:right; line-height:1.25; }
.viewer-mode-buttons { display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; }
.viewer-mode-buttons button { min-width:0; padding:8px 3px; border:1px solid #343944; border-radius:6px; background:#242730; color:#cbd1dc; font-family:inherit; font-size:11px; font-weight:bold; cursor:pointer; }
.viewer-mode-buttons button.active { border-color:#2f6bff; background:#2f6bff; color:#fff; box-shadow:0 2px 7px rgba(47,107,255,.3); }

.cad-overlay-control {
    --cad-border:#2d313b; --cad-input-border:#343944; --cad-bg:#171920;
    --cad-input-bg:#242730; --cad-text:#eef2f8; --cad-muted:#a0a9b8; --cad-hint:#8f97a6;
    --cad-status-bg:#1c2029; --cad-danger:#ff8b84;
    border:1px solid var(--cad-border); border-radius:8px; background:var(--cad-bg); overflow:hidden;
}
.cad-overlay-toggle { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) 10px; align-items:center; gap:8px; padding:9px; border:0; background:transparent; color:var(--cad-text); font-family:inherit; font-size:12px; font-weight:bold; cursor:pointer; text-align:left; }
.cad-overlay-toggle small { min-width:0; overflow:hidden; color:var(--cad-hint); font-size:10px; font-weight:normal; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.cad-overlay-toggle::after { content:""; width:6px; height:6px; border-right:1.5px solid var(--cad-hint); border-bottom:1.5px solid var(--cad-hint); transform:rotate(-45deg); justify-self:center; }
.cad-overlay-toggle[aria-expanded="true"]::after { transform:rotate(45deg); }
.cad-overlay-toggle:focus-visible { outline:2px solid #2f6bff; outline-offset:-2px; }
.cad-overlay-body { display:flex; flex-direction:column; gap:8px; padding:9px; border-top:1px solid var(--cad-border); max-height:min(55vh,480px); overflow-y:auto; scrollbar-width:thin; }
.cad-overlay-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.cad-overlay-actions button, .cad-overlay-file-button { display:flex; align-items:center; justify-content:center; min-width:0; min-height:32px; padding:8px 5px; border:1px solid var(--cad-input-border); border-radius:6px; background:var(--cad-input-bg); color:var(--cad-text); font-family:inherit; font-size:11px; font-weight:bold; cursor:pointer; box-sizing:border-box; }
.cad-overlay-actions button:hover, .cad-overlay-file-button:hover { border-color:#2f6bff; }
.cad-overlay-actions .danger { color:var(--cad-danger); }
.cad-overlay-field { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:center; gap:7px; color:var(--cad-muted); font-size:11px; }
.cad-overlay-control [hidden] { display:none !important; }
.cad-overlay-field select { min-width:0; height:32px; padding:0 7px; border:1px solid var(--cad-input-border); border-radius:6px; background:var(--cad-input-bg); color:var(--cad-text); font:inherit; }
.cad-overlay-style-grid { display:grid; grid-template-columns:1fr 2fr; gap:8px; }
.cad-overlay-style-grid label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; color:var(--cad-muted); font-size:11px; }
.cad-overlay-style-grid input[type="color"] { width:32px; height:27px; padding:2px; border:1px solid var(--cad-input-border); border-radius:6px; background:var(--cad-input-bg); }
.cad-overlay-style-grid input[type="range"] { min-width:0; width:100%; accent-color:#2f6bff; }
.cad-overlay-checks { display:flex; flex-wrap:wrap; gap:8px; color:var(--cad-muted); font-size:11px; }
.cad-overlay-checks label { display:flex; align-items:center; gap:4px; }
.cad-overlay-checks input { accent-color:#2f6bff; }
.cad-overlay-display-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.cad-overlay-display-options label { position:relative; min-width:0; cursor:pointer; }
.cad-overlay-display-options input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.cad-overlay-display-options span { display:flex; align-items:center; justify-content:center; min-height:32px; padding:8px 3px; box-sizing:border-box; border:1px solid var(--cad-input-border); border-radius:6px; background:var(--cad-input-bg); color:var(--cad-muted); font-size:11px; font-weight:bold; }
.cad-overlay-display-options input:checked + span { border-color:#2f6bff; background:#2f6bff; color:#fff; box-shadow:0 2px 7px rgba(47,107,255,.3); }
.cad-overlay-display-options input:focus-visible + span { outline:2px solid #2f6bff; outline-offset:2px; }
.cad-overlay-help { color:var(--cad-muted); font-size:10px; line-height:1.5; }
.cad-overlay-advanced { border-top:1px solid var(--cad-border); padding-top:7px; }
.cad-overlay-advanced summary { display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; color:var(--cad-muted); font-size:11px; padding:5px 0; }
.cad-overlay-advanced summary::-webkit-details-marker { display:none; }
.cad-overlay-advanced summary::after { content:""; width:6px; height:6px; margin:0 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.cad-overlay-advanced details[open] > summary::after, .cad-overlay-advanced[open] > summary::after { transform:rotate(45deg); }
.cad-overlay-advanced summary:focus-visible { outline:2px solid #2f6bff; outline-offset:2px; }
.cad-overlay-advanced-body { display:flex; flex-direction:column; gap:8px; padding-top:8px; }
.cad-overlay-status { padding:7px 8px; border:1px solid var(--cad-border); border-radius:6px; background:var(--cad-status-bg); color:var(--cad-muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.cad-overlay-feedback { display:flex; flex-direction:column; gap:5px; padding:8px; border:1px solid var(--cad-border); border-radius:6px; background:var(--cad-status-bg); }
.cad-overlay-feedback .cad-overlay-status { padding:0; border:0; border-radius:0; background:transparent; }
.cad-overlay-feedback #cadCoverageStatus { color:var(--cad-text); }
.cad-overlay-status:empty { display:none; }
.cad-map-label { border:0!important; background:rgba(17,19,25,.76)!important; color:#ffe56d!important; box-shadow:none!important; font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR",sans-serif!important; font-size:11px!important; font-weight:bold!important; line-height:1.4!important; white-space:nowrap; }
.cad-parcel-panel { --parcel-bg:#242a34; --parcel-card:#2b3340; --parcel-border:#424d60; --parcel-text:#e8edf5; --parcel-muted:#aab6c8; position:absolute; z-index:800; right:12px; top:12px; bottom:28px; width:min(390px,calc(100% - 24px)); display:flex; flex-direction:column; background:var(--parcel-bg); color:var(--parcel-text); border:1px solid var(--parcel-border); border-radius:12px; box-shadow:0 8px 28px #0004; font:12px/1.6 "Malgun Gothic",sans-serif; cursor:auto; box-sizing:border-box; }
.cad-parcel-panel * { box-sizing:border-box; }
.cad-parcel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 10px; }
.cad-parcel-header h3 { font-size:18px; line-height:1.4; margin:0; }
.cad-parcel-header small { color:var(--parcel-muted); }
.cad-parcel-actions { display:flex; align-items:center; gap:6px; }
.cad-parcel-expand { display:none; }
.cad-parcel-panel button { font:inherit; cursor:pointer; }
.cad-parcel-panel .cad-parcel-close { border:0; border-radius:8px; background:var(--parcel-card); color:var(--parcel-text); width:36px; height:36px; font-size:23px; flex-shrink:0; }
.cad-parcel-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:0 12px 12px; border-bottom:1px solid var(--parcel-border); }
.cad-parcel-tabs button { padding:7px 4px; border:1px solid transparent; border-radius:7px; color:var(--parcel-muted); background:transparent; white-space:nowrap; }
.cad-parcel-tabs button[aria-selected="true"] { background:#2f6bff; color:#fff; }
.cad-parcel-panel button:focus-visible, .cad-parcel-content:focus-visible { outline:2px solid #43c7ff; outline-offset:2px; }
.cad-parcel-content { overflow:auto; overscroll-behavior:contain; min-height:0; flex:1; padding:16px; -webkit-overflow-scrolling:touch; }
.cad-parcel-table { width:100%; table-layout:fixed; border-collapse:collapse; border:1px solid var(--parcel-border); margin:0; background:var(--parcel-bg); font:inherit; }
.cad-parcel-table th, .cad-parcel-table td { border:1px solid var(--parcel-border); padding:9px 10px; text-align:left; vertical-align:top; line-height:1.65; overflow-wrap:anywhere; user-select:text; }
.cad-parcel-table th { width:38%; background:var(--parcel-card); color:var(--parcel-muted); font-weight:600; }
.cad-parcel-table td { color:var(--parcel-text); }
.cad-parcel-content .cad-parcel-note { font-size:11px; color:var(--parcel-muted); margin:12px 0; }
.cad-parcel-card { background:var(--parcel-card); border:1px solid var(--parcel-border); border-radius:9px; padding:12px; margin:0 0 10px; }
.cad-parcel-card h4 { margin:0 0 10px; font-size:14px; }
.cad-parcel-content progress { display:block; width:100%; height:12px; margin-top:16px; accent-color:#2f6bff; }
.cad-parcel-footer { padding:9px 16px 12px; border-top:1px solid var(--parcel-border); color:var(--parcel-muted); font-size:10px; }
.cad-parcel-footer p { margin:0 0 5px; }
.cad-parcel-footer a { color:#70b7ff; }
.cad-parcel-error { color:#f0837d; }
.cad-parcel-retry { padding:7px 12px; border:0; border-radius:7px; background:#2f6bff; color:#fff; }
body.light-mode .cad-parcel-panel { --parcel-bg:#fff; --parcel-card:#f7f9fc; --parcel-border:#dce3ed; --parcel-text:#29303a; --parcel-muted:#64748b; }
body.light-mode .cad-parcel-footer a { color:#245edb; }
@media (max-width:700px) {
    .cad-parcel-panel { top:auto; bottom:0; left:0; right:0; width:100%; height:56%; max-height:520px; min-height:220px; border-radius:14px 14px 0 0; }
    .cad-parcel-header { padding:8px 12px; }
    .cad-parcel-header h3 { font-size:16px; }
    .cad-parcel-tabs { flex-shrink:0; padding:0 8px 8px; }
    .cad-parcel-tabs button { padding:6px 4px; }
    .cad-parcel-expand { display:block; padding:7px; border:1px solid var(--parcel-border); border-radius:7px; color:var(--parcel-text); background:var(--parcel-card); }
    .cad-parcel-panel.is-expanded { height:90%; max-height:none; }
    .cad-parcel-content { padding:12px; }
    .cad-parcel-footer { padding:6px 12px max(8px,env(safe-area-inset-bottom)); }
}
.cad-overlay-actions button:disabled { opacity:.5; cursor:default; }
.cad-overlay-field input { min-width:0; height:32px; box-sizing:border-box; padding:0 7px; border:1px solid var(--cad-input-border); border-radius:6px; background:var(--cad-input-bg); color:var(--cad-text); font:inherit; }

.record-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 12px; gap: 10px; }
.folder-container { background: #1a1a1a; border-radius: 8px; overflow: hidden; transition: background-color 0.3s; flex-shrink: 0; }
.folder-header { background: #252525; padding: 16px 20px; cursor: pointer; font-weight: bold; font-size: 15px; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s; }
.folder-content { display: flex; flex-direction: column; gap: 10px; padding: 10px; }

.record-card { background-color: #222; border-radius: 8px; padding: 15px; }
.record-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.name-container { cursor: pointer; flex: 1; padding: 5px 0; }
.record-name { font-weight: bold; font-size: 15px; color: #eee; display: block; line-height: 1.3; }
/* 하단 툴바 */
.bottom-toolbar { display: flex; border-top: 1px solid #20232b; flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.btn-tools { flex: 1; color: #000; font-weight: bold; border: none; padding: 18px 5px; cursor: pointer; font-size: 14px; }
.btn-tools.notes { background-color: #ff9500; }
.btn-tools.weather { background-color: #34c759; border-left: 1px solid #222; }
.btn-tools.report { background-color: #007aff; color: #fff; border-left: 1px solid #222; }

/* --- 전체 뷰어 레이아웃 구조 --- */
.workspace-wrapper { flex: 1; position: relative; overflow: hidden; display: flex; background: #0d0e12; }
.screen-capture-controls { position:absolute; right:58px; bottom:18px; z-index:1300; display:flex; flex-direction:column; align-items:flex-end; gap:8px; max-width:calc(100% - 76px); pointer-events:none; }
#screenCaptureButton { min-height:44px; padding:10px 15px; border:1px solid #668fe8; border-radius:9px; background:#172b50; color:#fff; font:600 14px 'Malgun Gothic',sans-serif; box-shadow:0 2px 8px #0005; cursor:pointer; pointer-events:auto; }
#screenCaptureButton:disabled { cursor:wait; }
#screenCaptureStatus { max-width:390px; padding:10px 12px; border-radius:8px; background:#17212f; color:#fff; font-size:13px; line-height:1.5; box-shadow:0 2px 8px #0005; overflow-wrap:anywhere; }

/* 온라인 지도 작업 공간 (Leaflet) */
.workspace-online { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 5; background: #dfe4ec; }

/* 날짜별 동기화 분할 지도 */
.split-view-grid { position:absolute; inset:0; z-index:6; display:none; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:minmax(0, 1fr); gap:3px; padding:3px; box-sizing:border-box; background:#101218; }
.split-view-grid.mode-split3 { grid-template-rows:repeat(2, minmax(0, 1fr)); }
.split-view-grid.mode-split3 .split-map-pane:first-child { grid-row:1 / 3; }
.split-view-grid.mode-split4 { grid-template-rows:repeat(2, minmax(0, 1fr)); }
.split-map-pane { position:relative; min-width:0; min-height:0; overflow:hidden; border:2px solid transparent; border-radius:7px; background:#dfe4ec; box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.split-map-pane.active { border-color:#2f6bff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.split-map-canvas { position:absolute; inset:0; background:#dfe4ec; }
.split-map-canvas .leaflet-map-pane, .split-map-canvas .leaflet-tile-container { will-change:transform; }
.split-map-header { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:700; display:flex; align-items:center; gap:6px; width:min(440px, calc(100% - 18px)); padding:6px 7px; border:1px solid rgba(255,255,255,.22); border-radius:8px; background:rgba(17,19,25,.9); box-shadow:0 2px 8px rgba(0,0,0,.4); box-sizing:border-box; backdrop-filter:blur(5px); }
.split-map-number { display:flex; align-items:center; justify-content:center; flex:0 0 25px; width:25px; height:25px; border-radius:50%; background:#2f6bff; color:#fff; font-size:12px; font-weight:bold; }
.split-map-selectors { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; }
.split-map-select { width:100%; min-width:0; height:28px; padding:0 28px 0 9px; border:1px solid #4a5060; border-radius:6px; background:#242730; color:#fff; font-family:inherit; font-size:12px; font-weight:bold; text-overflow:ellipsis; }
.split-map-date-select { color:#d8deea; font-weight:normal; }
.split-map-select:disabled { opacity:.62; cursor:not-allowed; }
.split-map-select:focus { outline:2px solid rgba(47,107,255,.65); outline-offset:1px; }
.split-map-empty { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding:60px 20px 20px; color:#727b8a; background:rgba(223,228,236,.9); text-align:center; font-size:13px; font-weight:bold; pointer-events:none; }
.split-map-pane:not(.active) .leaflet-control-zoom { opacity:.72; }

/* 통합 정보 레이블 */
.viewer-label { position: absolute; top: 20px; background-color: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 6px; font-weight: bold; z-index: 500; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
#labelPastInfo { left: 20px; border-left: 4px solid #34c759; }
#labelRecentInfo { right: 20px; border-right: 4px solid #ff9500; }

/* NDVI 범례 */
.ndvi-legend { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 1000; width: 60px; height: 350px; display: none; }
.legend-color-bar {
    position: absolute; left: 0; top: 0; width: 10px; height: 100%;
    background: linear-gradient(to top, #111111 0%, #666666 25%, #4444aa 40%, #0000ff 50%, #00ff00 75%, #ffff00 88%, #ff0055 100%);
    border-radius: 5px; border: 1px solid #999; box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
.legend-labels { position: absolute; left: 16px; top: 0; height: 100%; width: 50px; }
.label-box {
    position: absolute; left: 0; transform: translateY(-50%); background: rgba(255, 255, 255, 0.85); color: #333;
    font-size: 12px; font-weight: bold; padding: 3px 8px; border-radius: 4px; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.3); text-align: center; min-width: 25px;
}

/* --- 라이트 모드 테마 호환 --- */
body.light-mode { background-color: #dfe4ec; color: #333; }
body.light-mode .sidebar { background-color: #ffffff; border-right: 1px solid #e2e8f0; }
body.light-mode .sidebar-header { background-color: #ffffff; border-bottom: 1px solid #eef1f6; color: #333; }
body.light-mode .workspace-wrapper { background: #dfe4ec; }
body.light-mode .theme-toggle { background: #eef1f6; border: 1px solid #dfe4ec; }
body.light-mode .theme-toggle button, body.light-mode .btn-night, body.light-mode .btn-light { color: #6b7280; }
body.light-mode .theme-toggle button.active { background: #2f6bff; color: #ffffff; }
body.light-mode .viewer-mode-control { background:#f7f9fc; border-color:#d8dee8; }
body.light-mode .viewer-mode-title { color:#29303a; }
body.light-mode .viewer-mode-title small { color:#6f7784; }
body.light-mode .viewer-mode-buttons button { background:#fff; color:#4b5563; border-color:#d8dee8; }
body.light-mode .viewer-mode-buttons button.active { background:#2f6bff; color:#fff; border-color:#2f6bff; }
body.light-mode .cad-overlay-control {
    --cad-border:#d8dee8; --cad-input-border:#d8dee8; --cad-bg:#f7f9fc;
    --cad-input-bg:#fff; --cad-text:#29303a; --cad-muted:#606b7b; --cad-hint:#6f7784;
    --cad-status-bg:#eef2f7; --cad-danger:#be3030;
}
body.light-mode .weather-widget { background-color: #ffffff; border-bottom: 1px solid #eef1f6; }
body.light-mode .weather-temp { color: #222; } body.light-mode .weather-desc { color: #666; }
body.light-mode .add-form { background-color: #ffffff; border-bottom: 1px solid #eef1f6; }
body.light-mode .record-sync-panel { background:#f8f9fa; border-color:#d7dce3; }
body.light-mode .record-sync-actions button, body.light-mode .record-sync-badge button { background:#fff; color:#333; border-color:#c8ced8; }
body.light-mode .toggle-btn { background-color: #fff; color: #333; border: 1px solid #ddd; border-left: none; }
body.light-mode .folder-container { background: #f8f9fa; border: 1px solid #eaeaea; }
body.light-mode .folder-header { background: #f1f3f5; color: #333; border-bottom: 1px solid #eaeaea; }
body.light-mode .folder-content { background: #f8f9fa; }
body.light-mode .record-card { background-color: #ffffff; border: 1px solid #e0e0e0; }
body.light-mode .record-name { color: #222; }
body.light-mode .viewer-label { background-color: rgba(255, 255, 255, 0.95); color: #333; }

/* 모달 라이트 모드 */
body.light-mode .data-box, body.light-mode .confirm-box { background: #ffffff; border: 1px solid #ccc; color: #333; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
body.light-mode #pinMemoInput, body.light-mode #pinCategoryInput { background: #ffffff; color: #222; border-color: #ccc; }
body.light-mode .data-table-container { background: #fafafa; border: 1px solid #ddd; }
body.light-mode .data-table th { background: #f1f3f5; color: #333; border: 1px solid #ccc; }
body.light-mode .data-table td { border: 1px solid #ccc; }
body.light-mode .data-table input, body.light-mode .data-table select { color: #333; }
body.light-mode .data-table input:focus, body.light-mode .data-table select:focus { background: #eaf2ff; color: #111; outline: 1px solid #007aff; }
body.light-mode .data-table input::placeholder { color: #999; }
body.light-mode .data-table select option { background: #fff; color: #333; }
body.light-mode .weather-left-pane { border-right: 1px solid #ddd; }
body.light-mode .cal-header-row button { background: #ddd; color: #333; }
body.light-mode .cal-header-cell { background: #e0e0e0; color: #333; }
body.light-mode .cal-day { background: #fff; border-color: #ccc; }
body.light-mode .cal-date { color: #666; } body.light-mode .cal-temp { color: #555; }
body.light-mode .label-box { background: rgba(255, 255, 255, 0.95); }

@media (max-height: 750px) {
    .sidebar-header { padding: 10px; font-size: 14px; }
    .weather-widget { padding: 8px 15px; }
    .weather-icon { font-size: 26px; } .weather-temp { font-size: 18px; }
    .add-form { padding: 8px 15px; gap: 6px; }
    .theme-toggle button { padding: 8px; font-size: 12px; }
    .folder-header { padding: 12px 15px; font-size: 14px; }
    .record-list { padding: 8px; gap: 8px; }
    .btn-tools { padding: 12px 5px; font-size: 13px; }
    .ndvi-legend { height: 280px; }
}
@media (max-width: 1024px), (max-height: 800px) {
    .weather-split-layout { flex-direction: column; overflow-y: auto; display: block; padding-right: 5px; }
    .weather-left-pane { border-right: none; padding-right: 0; border-bottom: 2px solid #444; padding-bottom: 25px; margin-bottom: 20px; }
    body.light-mode .weather-left-pane { border-bottom: 2px solid #ddd; }
}

@media (max-width: 720px) {
    .split-view-grid.mode-split2, .split-view-grid.mode-split3 { grid-template-columns:minmax(0, 1fr); }
    .split-view-grid.mode-split2 { grid-template-rows:repeat(2, minmax(0, 1fr)); }
    .split-view-grid.mode-split3 { grid-template-rows:repeat(3, minmax(0, 1fr)); }
    .split-view-grid.mode-split3 .split-map-pane:first-child { grid-row:auto; }
    .split-map-header { top:5px; width:calc(100% - 12px); padding:4px 5px; }
    .split-map-number { flex-basis:22px; width:22px; height:22px; font-size:11px; }
    .split-map-select { height:28px; font-size:11px; }
}