/* ============================================================
   마이비즈니스파트너 — 디자인 토큰 + 스코프 리셋
   ✏️  색상·폰트·크기 전역 수정은 이 파일의 :root 블록에서!
   tokens.css
   ============================================================ */

/* ── 1. 디자인 토큰 (전역 CSS 변수) ────────────────────────── */
:root {
  --clr-primary:        #00BFA5;
  --clr-primary-dark:   #00897B;
  --clr-primary-light:  #E0F7F4;

  --clr-text:           #40484F;
  --clr-text-sub:       #6D757C;
  --clr-text-placeholder: #B8C1CB;

  --clr-bg:             #F0FAF8;
  --clr-border:         #B8C1CB;
  --clr-border-light:   #E9EEF4;
  --clr-white:          #FFFFFF;
  --clr-black:          #222222;

  --clr-red:            #FF5F68;
  --clr-blue:           #007FFF;
  --clr-purple:         #9F5EF1;

  --font-base: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;

  --sidebar-width:  340px;
  --gnb-height:     64px;
  --scrollbar-size: 8px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --subway-size: 20px;
}

/* ── 2. 지도 페이지 body ────────────────────────────────────
   ⚠️  전역 * 리셋은 Header.astro(Tailwind)와 충돌하므로 사용 안 함.
      리셋은 아래 .branch_new 스코프로만 적용.
   ──────────────────────────────────────────────────────── */
html.html_map,
html.html_map body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

html.html_map body {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  color: var(--clr-text);
}

/* ── 3. 맵 콘텐츠 영역 스코프 리셋 ─────────────────────────
   Header.astro 는 .branch_new 밖에 있으므로 영향 없음.
   ──────────────────────────────────────────────────────── */
.branch_new *,
.branch_new *::before,
.branch_new *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.branch_new a  { text-decoration: none; color: inherit; }
.branch_new ul { list-style: none; }
.branch_new button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-base);
}

/* 상세 팝업도 동일 리셋 적용 */
.branch_detail_popup *,
.branch_detail_popup *::before,
.branch_detail_popup *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.branch_detail_popup a  { text-decoration: none; color: inherit; }
.branch_detail_popup ul { list-style: none; }
.branch_detail_popup button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-base);
}

/* ── 4. 공통 스크롤바 ────────────────────────────────────── */
.branch_zone_wrap::-webkit-scrollbar,
.branch_list_wrap::-webkit-scrollbar,
.branch_detail_wrap::-webkit-scrollbar { width: var(--scrollbar-size); background-color: var(--clr-bg); }
.branch_zone_wrap::-webkit-scrollbar-thumb,
.branch_list_wrap::-webkit-scrollbar-thumb,
.branch_detail_wrap::-webkit-scrollbar-thumb { background-color: #D4DAE1; border-radius: var(--scrollbar-size); }

/* ── 5. 공통 배지 ────────────────────────────────────────── */
.branch_badge {
  position: relative;
  width: fit-content;
  min-width: 60px;
  height: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--badge-color);
  border: 1px solid var(--badge-color);
  border-radius: var(--radius-sm);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.branch_badge._new    { --badge-color: var(--clr-primary); }
.branch_badge._best   { --badge-color: var(--clr-blue); }
.branch_badge._open   { --badge-color: var(--clr-purple); }
.branch_badge._person { --badge-color: #FF6E2E; }