/**
 * [Purpose] : 홈 화면의 다양한 해상도(데스크탑, 태블릿, 모바일)에 따른 레이아웃 전환 및 모바일 전용 드래그 핸들 기능을 정의하는 스타일시트
 * [Dependencies] : index.html (템플릿), home_layout.css (기본 레이아웃), home_core.js (모바일 인터랙션 핸들러)
 * [Data Flow] : N/A (상수 및 스타일 정의)
 * [Side Effects] : 
 *   - UI (DOM) 스타일링: 해상도별 #app의 flex-direction 변경, 사이드바 및 컨트롤 패널의 폭/높이 재배치
 *   - 모바일 인터랙션: #mobile-map-handle 및 #mobile-sidebar-handle를 통한 터치 기반 리사이즈 UI 제공
 *   - 테마 확장: 패널별(AI, 레이어, 시간 등) 모바일 전용 헤더 배경색 적용
 * [Constraints / Notes] : 
 *   - 모바일 해상도(≤600px): #app의 height를 auto로 변경하고 세로 스크롤을 허용하여 모든 패널을 수직으로 나열함
 *   - 태블릿 해상도(601px~1200px): 사이드바 폭을 240px로 축소하고 컨트롤 패널 내부 컬럼을 세로로 쌓음
 *   - 드래그 핸들: 모바일 환경에서만 display: flex로 활성화되며, touch-action: none으로 브라우저 기본 스크롤 간섭을 방지함
 */

/* ─── 반응형 ──────────────────────────────────── */
@media (max-width: 1280px) {
  #ctrl-panel-inner {
    overflow-x: auto;
  }

  .ctrl-col {
    min-width: 140px;
  }
}

@media (max-width: 1024px) {
  .ctrl-col {
    min-width: 120px;
  }

  .ctrl-col-title {
    font-size: 9px;
    letter-spacing: .4px;
  }
}

@media (max-width: 800px) {
  .ctrl-col {
    min-width: 100px;
  }

  .ctrl-col-body {
    padding: 4px 6px;
  }
}

/* 모바일 드래그 핸들: 기본 숨김 (모바일에서만 표시) */
#mobile-map-handle { display: none; }
#mobile-sidebar-handle { display: none; }

/* ─── 모바일 (≤600px) ────────────────────────── */
@media (max-width: 600px) {

  /* html/body: 세로 스크롤 허용 */
  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* 전체 앱: 세로 쌓기 켄테이너 */
  #app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* 지도 영역: 자연 흐름 */
  #map-area {
    height: auto;
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  /* 지도 래퍼: 고정 높이 */
  #map-wrap {
    height: 50vh;
    flex: none;
    min-height: 200px;
  }

  /* 컨트롤 패널: 프레임 없이 내용 전체 표시 */
  #ctrl-panel {
    position: relative;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex-shrink: 0;
    z-index: 10;
  }

  /* 리사이즈 핸들: 모바일에서 숨김 */
  #ctrl-resize-handle {
    display: none;
  }

  /* 컨트롤 패널 내부 */
  #ctrl-panel-inner {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
    flex: none;
    height: auto;
    pointer-events: auto;
  }

  /* 각 컬럼: 전체 폭, 충분한 최소 높이 */
  .ctrl-col {
    width: 100%;
    flex: none;
    min-width: 0 !important;
    height: auto;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #2d3748;
    overflow: visible;
  }

  .ctrl-col:last-child {
    border-bottom: none;
  }

  .ctrl-col-title {
    font-size: 9px;
    padding: 3px 6px;
  }

  #col-ai .ctrl-col-title { background: rgba(81, 88, 145, 0.4); color: #d0d4fc; border-bottom: none; }
  #col-layer .ctrl-col-title { background: rgba(56, 102, 92, 0.4); color: #bdf2df; border-bottom: none; }
  #col-time .ctrl-col-title { background: rgba(102, 59, 115, 0.4); color: #ebccf5; border-bottom: none; }
  #col-tag .ctrl-col-title { background: rgba(121, 91, 57, 0.4); color: #fae0c5; border-bottom: none; }
  #col-marker .ctrl-col-title { background: rgba(119, 65, 65, 0.4); color: #fad3cf; border-bottom: none; }
  #col-view .ctrl-col-title { background: rgba(168, 118, 50, 0.4); color: #ffe6bd; border-bottom: none; }
  #title-marker-subview { background: rgba(119, 65, 65, 0.4); color: #fad3cf; border-bottom: none; }



  .ctrl-col-body {
    flex: none;
    padding: 5px 8px;
    gap: 4px;
    overflow-y: visible;
    height: auto;
    min-height: auto;
  }

  /* 사이드바: 전체 폭, 페이지 스크롤로 접근 (별도 프레임 없음) */
  #sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    min-height: 60vh;
    border-left: none;
    border-top: 1px solid #e8eaed;
    flex-shrink: 0;
    overflow: visible;
  }

  /* 지도 위 버튼: 가로 배열, 아이콘만 표시 */
  .map-top-left {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
    max-width: calc(100vw - 24px);
    top: 8px;
    left: 8px;
  }

  .map-btn {
    font-size: 0;
    padding: 7px 9px;
    gap: 0;
    border-radius: 6px;
  }

  .map-btn i {
    font-size: 14px;
  }

  .mode-badge {
    font-size: 0;
    padding: 7px 9px;
  }

  .mode-badge i {
    font-size: 14px;
  }

  /* 범례: 더 작게 */
  .legend-box {
    font-size: 10px;
    padding: 6px 9px;
    line-height: 1.7;
    bottom: 6px;
    right: 6px;
  }

  /* 엔티티 팝업 */
  #entity-popup {
    max-width: calc(100vw - 24px);
    font-size: 12px;
  }

  /* 지도↔패널 드래그 핸들 — 태블릿의 ctrl-resize-handle과 동일한 디자인 */
  #mobile-map-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6px;
    width: 100%;
    background: #2d3748;
    cursor: ns-resize;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s;
  }
  #mobile-map-handle:hover,
  #mobile-map-handle.dragging {
    background: #4a5568;
  }
  #mobile-map-handle::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #4a5568;
  }
  #mobile-map-handle:hover::before,
  #mobile-map-handle.dragging::before {
    background: #718096;
  }

  /* 지도↔사이드바 드래그 핸들 — 비로그인 전용, 주변 밝은 톤에 어울리는 스타일 */
  #mobile-sidebar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6px;
    width: 100%;
    background: #dde3ee;
    cursor: ns-resize;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s;
  }
  #mobile-sidebar-handle:hover,
  #mobile-sidebar-handle.dragging {
    background: #c5cfe4;
  }
  #mobile-sidebar-handle::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: #a0aec0;
  }
  #mobile-sidebar-handle:hover::before,
  #mobile-sidebar-handle.dragging::before {
    background: #718096;
  }
}

/* ─── 태블릿/중형 (601px ~ 1200px) ──────────────── */
@media (min-width: 601px) and (max-width: 1200px) {
  /*
   * 홈 화면: #app은 row 유지 → 지도+사이드바 관계 그대로
   * 지도 영역 하단 컨트롤 패널 칸만 세로로 쌓기
   */

  /* 사이드바: 폭을 줄여서 지도 공간 확보 */
  #sidebar {
    width: 240px;
    min-width: 240px;
  }

  /* 지도 래퍼: 비는 곳 없이 남는 공간을 모두 채워 하단 흰 여백 방지 */
  #map-wrap {
    flex: 1;
    height: auto;
    min-height: 200px;
  }

  /* 컨트롤 패널: 리사이즈 핸들 지원 */
  #ctrl-panel {
    position: relative;
    height: 200px;
    min-height: 8px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    flex-shrink: 0;
    z-index: 10;
  }

  /* 컨트롤 패널 내부: 칸을 세로로 쌓기 */
  #ctrl-panel-inner {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    pointer-events: auto;
  }

  #ctrl-panel-inner::-webkit-scrollbar { width: 6px; }
  #ctrl-panel-inner::-webkit-scrollbar-thumb { background: #718096; border-radius: 3px; }
  #ctrl-panel-inner::-webkit-scrollbar-track { background: transparent; }

  /* 각 컬럼: 전체 폭, 충분한 최소 높이 */
  .ctrl-col {
    width: 100%;
    flex: none;
    min-width: 0 !important;
    height: auto;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid #2d3748;
    overflow: visible;
  }

  .ctrl-col:last-child {
    border-bottom: none;
  }

  .ctrl-col-title {
    font-size: 10px;
    padding: 3px 6px;
  }

  #col-ai .ctrl-col-title { background: rgba(81, 88, 145, 0.4); color: #d0d4fc; border-bottom: none; }
  #col-layer .ctrl-col-title { background: rgba(56, 102, 92, 0.4); color: #bdf2df; border-bottom: none; }
  #col-time .ctrl-col-title { background: rgba(102, 59, 115, 0.4); color: #ebccf5; border-bottom: none; }
  #col-tag .ctrl-col-title { background: rgba(121, 91, 57, 0.4); color: #fae0c5; border-bottom: none; }
  #col-marker .ctrl-col-title { background: rgba(119, 65, 65, 0.4); color: #fad3cf; border-bottom: none; }
  #col-view .ctrl-col-title { background: rgba(168, 118, 50, 0.4); color: #ffe6bd; border-bottom: none; }
  #title-marker-subview { background: rgba(119, 65, 65, 0.4); color: #fad3cf; border-bottom: none; }


  .ctrl-col-body {
    flex: none;
    padding: 5px 10px;
    gap: 4px;
    overflow-y: visible;
    height: auto;
    min-height: auto;
  }

  /* 지도 위 버튼: 폰트 약간 줄임 */
  .map-btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* 사이드바 사용자/관리 링크 래퍼 - 좁은 영역 고려 */
  .sidebar-auth {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
  }
  .sidebar-auth .sep { display: none; }
}

/* ═══════════════════════════════════════════════
   패널2/3/4/5/6 신규 요소 스타일
═══════════════════════════════════════════════ */

/* ─── 공개 레이어 선택 목록 (패널2 하단) ──────── */
.pub-layer-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 10px;
  color: #a0aec0;
  border-bottom: 1px solid #2d3748;
}

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

.pub-layer-item.pub-layer-drag-over {
  border-top: 2px solid #1a73e8;
}

.pub-layer-drag-handle {
  cursor: grab;
  color: #4a5568;
  font-size: 12px;
  padding: 0 2px;
  flex-shrink: 0;
  user-select: none;
}

.pub-layer-drag-handle:active {
  cursor: grabbing;
}

.pub-layer-item input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #1a73e8;
}

.pub-layer-color-picker {
  width: 22px;
  height: 18px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
}

/* ─── 엔티티 필터링 패널3 연산 버튼 ────────────── */
.filter-op-btn {
  background: #2d3748;
  border: 1px solid #4a5568;
  color: #718096;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 13px;
  cursor: pointer;
  transition: all .12s;
  line-height: 1;
}

.filter-op-btn:hover { border-color: #1a73e8; color: #a0c4ff; }
.filter-op-btn.active { background: #1a3a6e; border-color: #1a73e8; color: #60a5fa; }

/* ─── 연산 목록 아이템 ─────────────────────────── */
.filter-op-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: #1a2030;
  border: 1px solid #2d3748;
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: 11px;
  color: #a0aec0;
}

.filter-op-item i { font-size: 12px; color: #60a5fa; flex-shrink: 0; }
.filter-op-item[draggable="true"] { cursor: default; }
.filter-op-item.drag-over { border-color: #1a73e8; background: #1a2d4e; }

.fo-drag-handle {
  font-size: 13px;
  color: #4a5568;
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
  user-select: none;
}
.fo-drag-handle:hover { color: #a0aec0; }
.fo-drag-handle:active { cursor: grabbing; }

/* ─── 레이어 선택 모달 테이블 ──────────────────── */
#lsm-table tbody tr,
#pvm-table tbody tr {
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid #2d3748;
}

#lsm-table tbody tr:hover,
#pvm-table tbody tr:hover { background: rgba(26,115,232,0.15); }

#lsm-table tbody tr.lsm-selected,
#pvm-table tbody tr.pvm-selected { background: rgba(26,115,232,0.25); }

#lsm-table td,
#pvm-table td {
  padding: 7px 10px;
  color: #cdd4e0;
  vertical-align: middle;
}

#lsm-table td:first-child,
#pvm-table td:first-child { text-align: center; }

/* ─── 사이드바 공개 엔티티 목록 (체크박스+X) ─── */
.pub-entity-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-bottom: 1px solid #f5f5f5;
  transition: background .1s;
}

.pub-entity-item:hover { background: #f9f9f9; }

.pub-entity-cb {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1a73e8;
}

.pub-entity-del-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color .12s;
}

.pub-entity-del-btn:hover { color: #e74c3c; }