/**
 * [Purpose] : 메인 홈 화면의 사이드바 내 레이어 관리 패널, AI 최근 질문 목록 및 듀얼 레인지 슬라이더의 UI를 정의하는 스타일시트
 * [Dependencies] : index.html (템플릿), home_layers.js (레이어 토글), home_ai.js (AI 질문 목록), home_drag.js (레이어 순서 변경)
 * [Data Flow] : N/A (상수 및 스타일 정의)
 * [Side Effects] : 
 *   - UI (DOM) 스타일링: 레이어 목록 아이템, 가져오기 패널, 전체 레이어 패널의 가시성 및 애니메이션 제어
 *   - 사용자 인터랙션: 드래그 앤 드롭 핸들(.layer-drag-handle), 듀얼 레인지 슬라이더(.dual-range-input) 디자인 적용
 * [Constraints / Notes] : 
 *   - 패널 제어: #layer-import-panel, #layer-all-panel 등은 absolute 포지셔닝으로 부모 사이드바를 완전히 덮도록 설정됨
 *   - 드래그 앤 드롭: .layer-item.drag-over 클래스를 통해 항목 이동 시 시각적 피드백(상단 보더) 제공
 *   - 전체 화면 모드: #app.fullscreen 클래스 활성화 시 사이드바 및 컨트롤 패널이 숨김 처리됨
 */

/* ─── AI 최근 질문 목록 ─────────────────────── */
.ai-recent-item {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 2px;
}

.ai-recent-text {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  color: #a0aec0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid #2d3748;
  transition: all .12s;
}

.ai-recent-text:hover {
  color: #e2e8f0;
  border-color: #4a5568;
  background: rgba(255, 255, 255, 0.04);
}

.ai-recent-copy-btn {
  background: none;
  border: none;
  color: #4a5568;
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color .12s;
}

.ai-recent-copy-btn:hover {
  color: #a0aec0;
}

/* ─── 레이어 가져오기 패널 ────────────────────── */
#layer-import-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a2030;
  z-index: 10;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#layer-import-panel.open {
  display: flex;
}

/* ─── 전체 레이어 패널 ────────────────────────── */
#layer-all-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a2030;
  z-index: 10;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#layer-all-panel.open {
  display: flex;
}

/* ─── 공개 뷰 전체목록 패널 ───────────────────── */
#public-view-all-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1a2030;
  z-index: 10;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#public-view-all-panel.open {
  display: flex;
}

.import-layer-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: #a0aec0;
  cursor: pointer;
  transition: background .12s;
}

.import-layer-item:hover {
  background: rgba(26, 115, 232, 0.15);
  color: #e2e8f0;
}

/* ─── 듀얼 레인지 슬라이더 ───────────────────── */
#dual-range-bg {
  width: 100%;
  height: 4px;
  background: #2d3748;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#dual-range-fill {
  height: 4px;
  background: #1a73e8;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.dual-range-input {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none;
  margin: 0;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
}

.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a73e8;
  pointer-events: all;
  cursor: pointer;
  border: 2px solid #1e2533;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.dual-range-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a73e8;
  pointer-events: all;
  cursor: pointer;
  border: 2px solid #1e2533;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

#ctrl-resize-handle {
  height: 6px;
  width: 100%;
  background: #2d3748;
  cursor: ns-resize;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

#ctrl-resize-handle:hover,
#ctrl-resize-handle.dragging {
  background: #4a5568;
}

#ctrl-resize-handle::before {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: #4a5568;
}

#ctrl-resize-handle:hover::before,
#ctrl-resize-handle.dragging::before {
  background: #718096;
}

/* ctrl-left 제거됨 — 6열 레이아웃으로 전환 */

.layer-add-btn {
  background: transparent;
  border: 1px solid #4a5568;
  color: #718096;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.4;
  transition: all .12s;
}

.layer-add-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}

.toggle-all-btn {
  background: transparent;
  border: 1px solid #4a5568;
  color: #718096;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}

.toggle-all-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}

#layer-list-panel {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 2px;
  transition: background .1s;
}

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

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

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

.layer-item label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11px;
  color: #cdd4e0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.layer-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.layer-badge-pub {
  font-size: 9px;
  background: rgba(104, 211, 145, 0.2);
  color: #68d391;
  border-radius: 3px;
  padding: 0 4px;
  flex-shrink: 0;
}

.layer-item-btns {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.layer-icon-btn {
  background: transparent;
  border: none;
  color: #4a5568;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: all .12s;
}

.layer-icon-btn:hover {
  color: #a0aec0;
  background: rgba(255, 255, 255, 0.08);
}

.layer-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 카카오맵 오버레이 섹션 ──────────────────── */
#kakao-layer-section {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 4px;
}

.kakao-layer-header {
  font-size: 10px;
  font-weight: 600;
  color: #a0aec0;
  padding: 4px 8px 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ctrl-right 제거됨 — 6열 레이아웃으로 전환 */

#app.fullscreen #sidebar {
  display: none;
}

#app.fullscreen #ctrl-panel {
  display: none;
}