/* ============================================================
   마이비즈니스파트너 — 사이드바 (지점 목록 + 지역 필터)
   sidebar.css
   ============================================================ */

/* ── 전체 레이아웃 ────────────────────────────────── */
.branch_new {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  overflow: hidden;
  color: var(--clr-text);
}

/* ── 사이드바 래퍼 ────────────────────────────────── */
.branch_nav {
  background: var(--clr-white);
  box-shadow: 2px 4px 8px 0 rgba(109, 117, 124, 0.25);
  display: flex;
  flex-direction: column;
  z-index: 102;
  overflow: hidden;
  position: relative;
  width: var(--sidebar-width);
  height: 100%;
  flex: 0 0 auto;
}

/* ── 타이틀 & 탭 버튼 ────────────────────────────────── */
.branch_title {
  display: flex;
  flex-direction: column;
  padding: 40px 0 32px 0;
  gap: 18px;
  flex-shrink: 0;
}
.branch_title h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--clr-text);
  text-align: center;
}
.branch_title .branch_num { color: var(--clr-primary); }

.branch_zone_button { display: flex; justify-content: center; gap: 8px; }

.zone-tab {
  height: 40px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--clr-text-sub);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  background: var(--clr-white);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  font-family: var(--font-base);
}
.zone-tab._active,
.zone-tab:hover {
  color: var(--clr-primary-dark);
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
}

/* ── 지역 선택 메뉴 팝업 오버레이 ────────────────────────────────── */
.zone-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9;
}
.zone-overlay._active { display: block; }
.branch_zone {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 174px; left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 184px);
  max-height: 480px;
  background: var(--clr-white);
  border: 1px solid var(--clr-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  z-index: 10;
}
.branch_zone._active { display: flex; }

.zone-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 47px;
  border-bottom: 1px solid var(--clr-text-sub);
  flex-shrink: 0;
  gap: 8px;
}
.zone-header h3 { font-size: 16px; font-weight: 700; color: var(--clr-text-sub); }
.zone-all-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--clr-primary); }
.zone-close-btn {
  width: 32px; height: 32px;
  background-color: var(--clr-border);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 2L2 14M2 2l12 12' stroke='%23B8C1CB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 2L2 14M2 2l12 12' stroke='%23B8C1CB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-size: 16px; mask-repeat: no-repeat; mask-position: center;
  text-indent: -999em; overflow: hidden;
  transition: background-color 0.15s;
}
.zone-close-btn:hover { background-color: var(--clr-text-sub); }

.branch_zone_wrap { flex: 1; overflow-y: auto; }

.branch_zone_list h4 {
  height: 54px;
  padding: 0 20px;
  font-size: 17px;
  font-weight: 600;
  background: var(--clr-bg);
  display: flex;
  align-items: center;
}
.zone-region-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--clr-text-sub);
  font-size: inherit;
  font-weight: inherit;
  transition: color 0.15s;
}
.zone-region-link:hover { color: var(--clr-text); }

.branch_zone_list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  padding: 14px 20px 28px;
  max-width: 300px;
}
.zone-area-link {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--clr-text-sub);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
}
.zone-area-link:hover,
.zone-area-link._active {
  color: var(--clr-primary-dark);
  border-color: var(--clr-primary);
  background: var(--clr-primary-light);
  font-weight: 600;
}

/* ── 지점 목록 ────────────────────────────────── */
.branch_list_layout {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.branch_list_wrap {
  position: relative;
  width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto;
  border-top: 1px solid var(--clr-border-light);
}
#branch-list { display: flex; flex-direction: column; }

/* 지점 카드 */
.branch-list-item {
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border-top: 1px solid var(--clr-border-light);
  cursor: pointer;
  transition: background 0.18s;
  outline: none;
}
.branch-list-item:first-child { border-top: 0; }
.branch-list-item:hover  { background: var(--clr-bg); }
.branch-list-item._active { background: var(--clr-primary-light); }
.branch-list-item:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: -2px; }

.branch-item-header { display: flex; justify-content: space-between; width: 100%; align-items: center; }

.branch-list-item h4 {
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--clr-text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.branch-list-item._active h4 { color: var(--clr-primary-dark); }

.branch-item-tags, .branch-item-addr {
  font-size: 13px; color: var(--clr-text-sub);
  display: flex; align-items: center; gap: 6px;
  line-height: 1.4;
}
.branch-item-addr { margin-bottom: 8px; }

.branch-item-thumbs { display: flex; gap: 8px; width: 100%; }
.b-thumb {
  flex: 1; aspect-ratio: 1; border-radius: var(--radius-sm);
  background-size: cover; background-position: center;
  background-color: #eee;
}

/* 빈 상태 */
.branch-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--clr-text-placeholder);
  font-size: 14px;
  font-weight: 500;
}

/* 지하철 배지 */
.branch_subway { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.branch_subway > span {
  width: var(--subway-size); height: var(--subway-size);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px; font-weight: 700;
  color: #fff;
  border-radius: 50%;
  display: inline-flex; justify-content: center; align-items: center;
  line-height: normal;
  flex-shrink: 0;
}
.branch_subway .line_1  { background: #3455B4; }
.branch_subway .line_2  { background: #2CC160; }
.branch_subway .line_3  { background: #FF8936; }
.branch_subway .line_4  { background: #00B0F0; }
.branch_subway .line_5  { background: #8F4ADB; }
.branch_subway .line_6  { background: #B26017; }
.branch_subway .line_7  { background: #747915; }
.branch_subway .line_9  { background: #D0A439; }
.branch_subway .line_sb { background: #DA304D; }
.branch_subway .line_su { background: #FFCE32; color: #333; }
.branch_subway .line_sh { background: #81A914; }
.branch_subway .line_kj { background: #77C4A3; }