:root{
  --bd:#e5e7eb; --bg:#fff; --muted:#6b7280; --text:#111; --pill:#f8f8f8;
}

/* 전체 레이아웃 */
html, body, #map{ height:100%; margin:0; }
#map{ position:relative; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ───────────────────────────────── Topbar ───────────────────────────────── */
.topbar{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  transform: none;
  z-index: 500;

  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: .45rem .6rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  box-sizing: border-box;
}

.brand{
  font-weight: 700;
  margin: 0 .4rem;
  white-space: nowrap;
}

/* 검색박스 */
.search-box{
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
}
.search-box input{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: .45rem .7rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
}
.search-box button,
.actions button{
  padding: .45rem .6rem;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--pill);
  cursor: pointer;
}

/* 스와이프 가능한 액션 버튼 행 */
.actions{
  display: flex;
  gap: .3rem;
  margin-left: .3rem;
  flex: 0 0 auto;
  flex-wrap: nowrap;        /* 줄바꿈 금지 */
}
.actions > button{
  flex: 0 0 auto;           /* 버튼 크기 고정 */
}

/* ──────────────────────────────── Chip bar ─────────────────────────────── */
.chipbar{
  position: fixed;
  z-index: 490;
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  display: flex;
  gap: .4rem;
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: .2rem 0;
}
.chipbar::-webkit-scrollbar{ display:none; }

.chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--bd);
  background: var(--bg);
  border-radius: 999px;
  padding: .28rem .6rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  white-space: nowrap;
}
.chip input{ display: none; }
.chip.active{ border-color:#c9ccd1; background:#fafafa; }

/* ───────────────────────────── Popup/Infowindow ────────────────────────── */
.popup{ font-size:14px; line-height:1.35; max-width:260px; }
.popup .title{ font-weight:700; margin-bottom:4px; }
.popup .row{ margin:2px 0; }
.popup .muted{ color:var(--muted); }

/* ────────────────────────────────── Toast ───────────────────────────────── */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  background: #111;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: .6rem;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 600;
}
.toast.show{ opacity:.92; }

/* ───────────────────────────── 현재 위치 표시 ───────────────────────────── */
.me-dot{
  position: relative;
  width:14px; height:14px; border-radius:50%;
  background:#2563eb; border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(37,99,235,.35);
}
.me-dot.pulse::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%;
  background:rgba(37,99,235,.35);
  animation:mePulse 1.8s ease-out infinite;
}
@keyframes mePulse{
  0%{ transform:scale(.9); opacity:.9; }
  70%{ transform:scale(2.2); opacity:0; }
  100%{ transform:scale(2.2); opacity:0; }
}

/* ───────────────────────────── 모바일 최적화 ───────────────────────────── */
@media (max-width: 600px){
  .topbar{
    flex-wrap: wrap;
    gap: .35rem;
    padding: .38rem .5rem;
  }

  .brand{
    font-size: 14px;
    order: 1;
  }

  /* 검색창을 먼저(2) */
  .search-box{
    order: 2;
    width: 100%;
  }
  .search-box input{
    font-size: 14px;
    padding: .4rem .65rem;
  }

  /* 액션 버튼 줄을 그 아래(3) + 가로 스와이프 */
  .actions{
    order: 3;
    width: 100%;
    overflow-x: auto;                    /* 좌우 스와이프 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: 0;
    padding-bottom: .1rem;
    flex-wrap: nowrap;                   /* 한 줄 유지 */
    position: relative;
  }
  .actions::-webkit-scrollbar{ display:none; }
  .actions button{ padding:.38rem .5rem; }
  .actions::after{
    content:"";                          /* 스와이프 힌트(그라데이션) */
    position:absolute; top:0; bottom:0; right:0; width:24px;
    pointer-events:none;
    background:linear-gradient(to left, rgba(255,255,255,.95), rgba(255,255,255,0));
  }

  /* topbar가 두 줄이 되니 chipbar를 더 아래로 */
  .chipbar{
    top: calc(env(safe-area-inset-top, 0px) + 112px);
  }
}

/* 아주 좁은 화면에서는 브랜드 텍스트 숨김 */
@media (max-width: 360px){
  .brand{ display: none; }
}