/*전체 레이아웃, 로그인 모달*/

/* ── 리셋 & 기본 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Pretendard', 'Pretendard Variable', sans-serif; height: 100vh; overflow: hidden; }

/* ── 헤더 ────────────────────────────────────────────────────── */
/* 지도 위에 float되어 있어 지도 인터랙션을 막지 않도록 pointer-events 제어 */
#app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid #ddd;
  backdrop-filter: blur(4px);
}
.site-title { font-size: 1.1rem; font-weight: 700; }
.title-hau { color: #191919; }
.title-a   { color: #e53935; }
.title-sm  { color: #191919; }
.title-kr  { color: #4a8a94; }  /* 프로젝트 강조색(#75B3BD)의 진한 버전 */
.header-auth { display: flex; align-items: center; gap: 8px; }
.user-email  { font-size: 0.85rem; color: #555; }
.progress-indicator {
  font-size: 0.8rem; font-weight: 700; color: #4a8a94;
  padding: 3px 10px; border: 1px solid #75B3BD; border-radius: 12px;
}
.btn-header  { padding: 5px 12px; font-size: 0.85rem; cursor: pointer;
               border: 1px solid #75B3BD; border-radius: 4px; background: #75B3BD; color: #fff; }
.btn-header:hover { background: #5f9aa4; border-color: #5f9aa4; }

/* ── 지도: 헤더 높이(~48px)를 제외하고 전체 화면 ───────────────── */
#map {
  position: absolute; top: 48px; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

/* ── 플로팅 필터 UI: 지도 위에 떠 있는 패널, filter-ui.js가 내용 렌더링 ─── */
.floating-filter {
  position: absolute; z-index: 900;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
}
.floating-filter--left {
  top: 64px; left: 12px;
  padding: 12px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.floating-filter--bottom {
  bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 92vw;
}
.filter-panel-title {
  font-size: 0.8rem; font-weight: 700; color: #555;
  margin-bottom: 8px;
}

/* 왼쪽 장소분류 색상 스와치 버튼 */
.filter-swatch-list { display: flex; flex-direction: column; gap: 6px; }
.filter-swatch {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.78rem; color: #333;
  white-space: nowrap;
}
.filter-swatch-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--swatch-color, #999); flex-shrink: 0;
}
.filter-swatch:hover  { background: #f5f5f5; }
.filter-swatch.active { border-color: var(--swatch-color, #75B3BD); background: color-mix(in srgb, var(--swatch-color, #75B3BD) 15%, #fff); }

/* 하단 시간대/계절 칩 필터 */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-row-label { font-size: 0.78rem; font-weight: 700; color: #555; flex-shrink: 0; min-width: 40px; }
.filter-chip-list { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  padding: 5px 12px; border: 1px solid #ddd; border-radius: 16px;
  background: #fff; cursor: pointer; font-size: 0.8rem; color: #333;
}
.filter-chip:hover  { background: #f5f5f5; }
.filter-chip.active { background: #75B3BD; border-color: #75B3BD; color: #fff; }

/* 모바일: 왼쪽 패널을 상단 가로 스크롤 형태로, 하단 패널 폭 확보 */
@media (max-width: 768px) {
  .floating-filter--left {
    top: 52px; left: 8px; right: 8px;
    max-height: none;
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; white-space: nowrap;
    padding: 8px 10px;
  }
  .floating-filter--left .filter-panel-title { margin-bottom: 0; flex-shrink: 0; }
  .filter-swatch-list { flex-direction: row; }
  .floating-filter--bottom { width: calc(100vw - 24px); }
}

/* ── 모달 공통 오버레이 ──────────────────────────────────────── */
/* 지도 위에 반투명 배경으로 표시 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,0.5);
}
.modal-box {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  width: 90%; max-width: 1088px;  /* 640 × 1.7 */
  max-height: 90vh; overflow-y: auto;
}
/* 작은 모달 (로그인 등) */
.modal-box--sm { max-width: 360px; }

/* 모달 닫기 버튼: 오른쪽 상단 고정 */
.btn-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #666;
}
.btn-close:hover { color: #000; }

/* ── 로그인 모달 ─────────────────────────────────────────────── */
#auth-modal h2   { margin-bottom: 12px; }
.auth-desc       { font-size: 0.9rem; color: #555; margin-bottom: 12px; }
.input-email     { width: 100%; padding: 8px 10px; border: 1px solid #ccc;
                   border-radius: 4px; font-size: 0.95rem; margin-bottom: 10px; }
.btn-primary     { width: 100%; padding: 9px; background: #75B3BD; color: #fff;
                   border: none; border-radius: 4px; font-size: 0.95rem; cursor: pointer; }
.btn-primary:hover { background: #5f9aa4; }
.btn-primary + .btn-primary,
.btn-primary + .btn-secondary { margin-top: 8px; }
.btn-kakao       { background: #FEE500; color: #191919; }
.btn-kakao:hover { background: #f5dc00; }
.btn-secondary   { width: 100%; padding: 9px; background: #fff; color: #555;
                   border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; cursor: pointer; }
.btn-secondary:hover { background: #f0f0f0; }

/* ── 프로필 입력 모달 (세로로 긴 좁은 폼, 모바일/PC 공용) ────── */
.profile-modal-box   { width: 100%; max-width: 130px; padding: 28px 22px; }
.profile-title       { font-size: 1.15rem; font-weight: 700; color: #75B3BD;
                        line-height: 1.4; margin-bottom: 20px; }
.profile-field       { margin-bottom: 16px; }
.profile-field label { display: block; font-size: 0.9rem; color: #333; margin-bottom: 6px; }

/* 성별 버튼식 선택: 2개 버튼 중 하나만 active */
.gender-toggle { display: flex; gap: 8px; }
.gender-btn {
  flex: 1; padding: 9px 0; font-size: 0.9rem; cursor: pointer;
  border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #555;
}
.gender-btn:hover        { background: #f0f0f0; }
.gender-btn--active      { background: #75B3BD; border-color: #75B3BD; color: #fff; }

/* 생년월일: 연도(입력)-월(드롭다운)-일(입력) 3분할 */
.birth-date-group { display: flex; gap: 6px; }
.birth-date-group .input-email { margin-bottom: 0; padding: 8px 6px; text-align: center; }
.birth-year  { flex: 1.4; }
.birth-month { flex: 1.2; }
.birth-day   { flex: 1; }

/* 개인정보처리방침 동의 체크박스 */
.profile-consent  { display: flex; }
.consent-label     { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #333; cursor: pointer; }
.consent-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #75B3BD; cursor: pointer; flex-shrink: 0; }
.consent-label a   { color: #75B3BD; text-decoration: underline; }

/* ── 토스트 알림 ─────────────────────────────────────────────── */
/* showToast()가 표시, 2초 후 자동 숨김 */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 9999; padding: 10px 20px;
  background: rgba(0,0,0,0.75); color: #fff;
  border-radius: 20px; font-size: 0.9rem;
  pointer-events: none;
}