/* ============================================================
 *  상권 분석 전용 페이지 (/user/sangga)
 *  - 좌측 사이드 패널 (380px) + 우측 지도 (flex)
 * ============================================================ */
.sg-container {
  display: flex;
  height: calc(100vh - 70px);
  font-family: 'Pretendard', sans-serif;
  background: #f8fafc;
}

/* ===== 좌측 사이드 ===== */
.sg-side {
  width: 380px;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sg-side-head {
  padding: 18px 20px;
  background: linear-gradient(135deg, #0081FF, #4DA6FF);
  color: #fff;
}
.sg-side-head h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.sg-side-sub {
  font-size: 11px;
  opacity: .85;
  margin-top: 2px;
}

/* 검색 (오픈업 스타일 — pill 형태) */
.sg-search-wrap {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
.sg-search-box-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f5f9;
  border: 1.5px solid transparent;
  border-radius: 28px;
  padding: 10px 16px;
  transition: all .15s;
}
.sg-search-box-pill:focus-within {
  background: #fff;
  border-color: #0081FF;
  box-shadow: 0 0 0 3px rgba(26, 95, 168, .12);
}
.sg-search-icon {
  /* 메인 검색창과 같은 SVG 돋보기를 넣었다. 이모지 때 쓰던 opacity 는 뺀다 (선이 흐려진다) */
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.sg-search-input-pill {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  font-family: inherit;
  min-width: 0;
}
.sg-search-input-pill::placeholder { color: #94a3b8; font-weight: 400; }
.sg-search-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 8px;
  padding-left: 4px;
}
.sg-search-hint b { color: #475569; font-weight: 600; }

/* 온보딩 카드 섹션 */
.sg-onboard {
  padding: 14px 16px;
  background: #fafbfd;
  border-bottom: 1px solid #e2e8f0;
}
.sg-onboard-title {
  font-size: 12px;
  color: #475569;
  margin-bottom: 10px;
  font-weight: 600;
}
.sg-onboard-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: all .15s;
  cursor: pointer;
}
.sg-onboard-card:hover {
  border-color: #0081FF;
  background: #f0f9ff;
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.sg-onboard-card:last-child { margin-bottom: 0; }
.sg-ob-ico {
  font-size: 20px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  border-radius: 8px;
}
.sg-ob-text { flex: 1; min-width: 0; }
.sg-ob-name {
  font-size: 13px;
  font-weight: 700;
  color: #0081FF;
  margin-bottom: 2px;
}
.sg-ob-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}
.sg-ob-arrow {
  color: #94a3b8;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .15s;
}
.sg-onboard-card:hover .sg-ob-arrow { transform: translateX(2px); color: #0081FF; }

/* 분석 시작되면 온보딩 자동 숨김 (active 클래스 부재 시 noop) */
body.sg-analyzing .sg-onboard { display: none; }

/* 탭 */
.sg-tabs {
  display: flex;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
}
.sg-tab {
  flex: 1;
  padding: 12px 4px;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  transition: all .15s;
}
.sg-tab:hover { color: #0081FF; }
.sg-tab.active {
  color: #0081FF;
  border-bottom-color: #0081FF;
  background: #fff;
}

/* 컨트롤 */
.sg-controls {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #fafbfd;
}
.sg-control-title {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}
.sg-control-hint {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 4px;
}
.sg-radius-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.sg-radius-btn {
  padding: 8px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sg-radius-btn:hover { border-color: #0081FF; color: #0081FF; }
.sg-radius-btn.active {
  background: #0081FF;
  border-color: #0081FF;
  color: #fff;
}
.sg-action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.sg-action-btn {
  padding: 8px 4px;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.sg-action-btn:hover { border-color: #0081FF; color: #0081FF; }
.sg-action-btn.active { background: #0081FF; color: #fff; border-color: #0081FF; }
.sg-calc-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  background: linear-gradient(135deg, #ffaf28, #f0990f);
  border: 0;
  border-radius: 8px;
  /* 노란 바탕에는 어두운 글자 — 사이트 공용 .w_btn_yellow 와 같은 규칙 */
  color: #333;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.3px;
}
.sg-calc-btn:hover { background: linear-gradient(135deg, #f0990f, #d98200); }

/* 본문 */
.sg-tab-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.sg-tab-pane { animation: fadeInPane .2s; }
@keyframes fadeInPane { from { opacity: 0; } to { opacity: 1; } }

/* 통계 카드 */
.sg-stat-card {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 14px;
}
.sg-stat-card .sg-stat-label {
  font-size: 11px;
  color: #0369a1;
  font-weight: 600;
}
.sg-stat-card .sg-stat-num {
  font-size: 24px;
  font-weight: 800;
  color: #0c4a6e;
}
.sg-stat-card .sg-stat-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* 카테고리 분포 */
.sg-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin: 14px 0 8px;
}
.sg-cat-list { display: flex; flex-direction: column; gap: 6px; }
.sg-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .15s;
}
.sg-cat-row:hover { background: #f8fafc; border-color: #e2e8f0; }
.sg-cat-row.active { background: #eff6ff; border-color: #93c5fd; }
.sg-cat-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #fff;
}
.sg-cat-dot:empty { width: 10px; height: 10px; }
.sg-cat-name { font-size: 13px; color: #334155; flex: 1; }
.sg-cat-bar-wrap {
  flex: 0 0 80px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.sg-cat-bar {
  height: 100%;
  background: linear-gradient(90deg, #4DA6FF, #0081FF);
  border-radius: 4px;
}
.sg-cat-cnt {
  font-size: 12px;
  font-weight: 700;
  color: #0081FF;
  min-width: 40px;
  text-align: right;
}

/* ============================================================
 *  업종 필터 버튼
 * ============================================================ */
.sg-filter-btn {
  width: 100%;
  margin-top: 8px;
  padding: 11px;
  background: linear-gradient(135deg, #0081FF, #4DA6FF);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.sg-filter-btn:hover { background: linear-gradient(135deg, #0064c8, #0081FF); }
.sg-filter-count {
  display: inline-block;
  background: #fff;
  color: #0081FF;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
  min-width: 18px;
  text-align: center;
}

/* ============================================================
 *  업종 필터 모달
 * ============================================================ */
.sgcf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sgcf-modal.open { display: flex; }
.sgcf-modal-inner {
  background: #fff;
  border-radius: 16px;
  width: 640px;
  max-width: 100%;
  height: 80vh;
  max-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  font-family: 'Pretendard', sans-serif;
}
.sgcf-header {
  background: linear-gradient(135deg, #0081FF, #4DA6FF);
  color: #fff;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.sgcf-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.sgcf-subtitle { font-size: 11px; opacity: .85; margin-top: 3px; display: block; }
.sgcf-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
}
.sgcf-toolbar {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.sgcf-tool-btn {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
}
.sgcf-tool-btn:hover { border-color: #0081FF; color: #0081FF; }
.sgcf-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  position: relative;
}
.sgcf-footer {
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #e2e8f0;
  background: #fafbfd;
  flex-shrink: 0;
}
.sgcf-cancel, .sgcf-apply {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.sgcf-cancel {
  background: #fff;
  border-color: #cbd5e1;
  color: #475569;
}
.sgcf-cancel:hover { background: #f1f5f9; }
.sgcf-apply {
  background: #0081FF;
  color: #fff;
  flex: 2;
}
.sgcf-apply:hover { background: #0064c8; }

/* 트리 — 대분류 그룹 */
.sgcf-group {
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.sgcf-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.sgcf-group-head:hover { background: #eff6ff; }
.sgcf-group.expanded .sgcf-group-head { background: #eff6ff; }
.sgcf-group-toggle {
  font-size: 12px;
  color: #94a3b8;
  width: 14px;
  flex-shrink: 0;
  transition: transform .15s;
}
.sgcf-group.expanded .sgcf-group-toggle { transform: rotate(90deg); }
.sgcf-group-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.sgcf-group-info { flex: 1; min-width: 0; }
.sgcf-group-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}
.sgcf-group-meta {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.sgcf-group-cnt {
  font-size: 12px;
  font-weight: 800;
  color: #0081FF;
}
.sgcf-group-select-all {
  font-size: 11px;
  color: #0081FF;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-left: 8px;
}
.sgcf-group-select-all:hover { border-color: #0081FF; background: #eff6ff; }

/* 트리 — 세부 그룹 */
.sgcf-subs {
  background: #fff;
  padding: 8px 0;
  display: none;
}
.sgcf-group.expanded .sgcf-subs { display: block; }
.sgcf-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 50px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #f1f5f9;
}
.sgcf-sub:last-child { border-bottom: 0; }
.sgcf-sub:hover { background: #f8fafc; }
.sgcf-sub.checked { background: #eff6ff; }
.sgcf-sub-check {
  width: 18px; height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #fff;
  font-size: 12px;
  color: transparent;
  transition: all .15s;
}
.sgcf-sub.checked .sgcf-sub-check {
  background: #0081FF;
  border-color: #0081FF;
  color: #fff;
}
.sgcf-sub-icon { font-size: 14px; flex-shrink: 0; }
.sgcf-sub-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.sgcf-sub-cnt {
  font-size: 11px;
  font-weight: 700;
  color: #0081FF;
}
.sgcf-sub-types {
  font-size: 10px;
  color: #94a3b8;
  margin: 2px 0 0 28px;
  line-height: 1.5;
}

/* 세부 그룹 없는 대분류 (소매, 서비스 등) — 단일 항목 */
.sgcf-group.no-subs .sgcf-group-toggle { visibility: hidden; }
.sgcf-group.no-subs .sgcf-group-head { cursor: pointer; }
.sgcf-group.no-subs.checked .sgcf-group-head {
  background: #eff6ff;
  border-left: 3px solid #0081FF;
}

/* 세부 하위 그룹 (음식 → 14개 sub-group) */
.sg-subgroup-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.sg-subgroup {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  transition: all .15s;
}
.sg-subgroup:hover { border-color: #cbd5e1; }
.sg-subgroup.active {
  background: #eff6ff;
  border-color: #0081FF;
  box-shadow: 0 1px 4px rgba(26,95,168,.1);
}
.sg-subgroup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.sg-sub-radio {
  font-size: 14px;
  color: #cbd5e1;
  flex-shrink: 0;
}
.sg-subgroup.active .sg-sub-radio { color: #0081FF; }
.sg-sub-icon { font-size: 14px; flex-shrink: 0; }
.sg-sub-name { flex: 1; font-size: 13px; font-weight: 600; color: #334155; }
.sg-sub-cnt { font-size: 12px; font-weight: 700; color: #0081FF; }
.sg-sub-info {
  font-size: 11px;
  color: #64748b;
  margin: 5px 0 4px 26px;
  line-height: 1.5;
}
.sg-sub-toggle {
  color: #0081FF;
  text-decoration: underline;
  font-weight: 600;
}
.sg-sub-details {
  font-size: 10px;
  color: #475569;
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 9px;
  margin: 4px 0 4px 26px;
  line-height: 1.6;
  word-break: keep-all;
}
.sg-sub-bar-wrap {
  height: 3px;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0 0 26px;
}
.sg-sub-bar {
  height: 100%;
  background: linear-gradient(90deg, #4DA6FFaa, #0081FF);
  border-radius: 2px;
}

/* 정보 그리드 */
.sg-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.sg-info-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.sg-info-cell .sg-info-num {
  font-size: 18px;
  font-weight: 800;
  color: #0081FF;
}
.sg-info-cell .sg-info-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* 매장 목록 */
.sg-store-list { display: flex; flex-direction: column; gap: 6px; }
.sg-store-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all .15s;
}
.sg-store-item:hover { border-color: #0081FF; }
.sg-store-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sg-store-text { flex: 1; min-width: 0; }
.sg-store-name {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-store-cat {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* 빈/로딩 */
.sg-empty { color: #94a3b8; font-size: 12px; text-align: center; padding: 24px 0; }
.sg-loading { text-align: center; padding: 30px 0; color: #64748b; font-size: 12px; }

/* 면책 */
.sg-disclaimer {
  margin: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 10px;
  color: #64748b;
  line-height: 1.6;
}

/* ===== 우측 지도 ===== */
.sg-main {
  flex: 1;
  position: relative;
  background: #e0e7ff;
}
.sg-map {
  width: 100%;
  height: 100%;
}
.sg-map-overlay {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 100;
}
.sg-map-overlay > span {
  background: rgba(255,255,255,.95);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.sg-source-badge {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
}

/* 그리기 모드 */
body.sg-draw-mode .sg-map { cursor: crosshair !important; }

/* ===== 핀 (말풍선 — 금액+갯수 형식) ===== */
.sg-pin {
  display: inline-block;
  min-width: 56px;
  background: #fff;
  color: #0081FF;
  border: 2px solid #0081FF;
  border-radius: 5px;
  padding: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  position: relative;
  white-space: nowrap;
  font-family: 'Pretendard', sans-serif;
  cursor: pointer;
  overflow: hidden;
}
.sg-pin:hover { transform: translateY(-2px) scale(1.05); z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.sg-pin .sg-pin-amount {
  background: #0081FF;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  letter-spacing: -0.3px;
}
.sg-pin .sg-pin-count {
  background: #fff;
  color: #0081FF;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
}
.sg-pin-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #0081FF;
}

/* 핫스팟 (1억 이상) — 빨간 핀 */
.sg-pin-hot { border-color: #dc2626; color: #dc2626; }
.sg-pin-hot .sg-pin-amount { background: #dc2626; }
.sg-pin-hot .sg-pin-count { color: #dc2626; }
.sg-pin-hot .sg-pin-arrow { border-top-color: #dc2626; }
/* 일반 (1억 미만) — 파란 핀 */
.sg-pin-normal { border-color: #0081FF; color: #0081FF; }
.sg-pin-normal .sg-pin-amount { background: #0081FF; }
.sg-pin-normal .sg-pin-count { color: #0081FF; }
.sg-pin-normal .sg-pin-arrow { border-top-color: #0081FF; }

/* 카테고리별 색상 */
/* 카테고리별 색상 (개별 핀 + 클러스터 핀 공용) */
.sg-pin.sg-pin-food,      .sg-cluster.sg-pin-food      { background: #e74c3c; }
.sg-pin.sg-pin-food .sg-pin-arrow,      .sg-cluster.sg-pin-food .sg-cluster-arrow      { border-top-color: #e74c3c; }
.sg-pin.sg-pin-retail,    .sg-cluster.sg-pin-retail    { background: #3498db; }
.sg-pin.sg-pin-retail .sg-pin-arrow,    .sg-cluster.sg-pin-retail .sg-cluster-arrow    { border-top-color: #3498db; }
.sg-pin.sg-pin-edu,       .sg-cluster.sg-pin-edu       { background: #9b59b6; }
.sg-pin.sg-pin-edu .sg-pin-arrow,       .sg-cluster.sg-pin-edu .sg-cluster-arrow       { border-top-color: #9b59b6; }
.sg-pin.sg-pin-life,      .sg-cluster.sg-pin-life      { background: #2ecc71; }
.sg-pin.sg-pin-life .sg-pin-arrow,      .sg-cluster.sg-pin-life .sg-cluster-arrow      { border-top-color: #2ecc71; }
.sg-pin.sg-pin-medical,   .sg-cluster.sg-pin-medical   { background: #1abc9c; }
.sg-pin.sg-pin-medical .sg-pin-arrow,   .sg-cluster.sg-pin-medical .sg-cluster-arrow   { border-top-color: #1abc9c; }
.sg-pin.sg-pin-realestate,.sg-cluster.sg-pin-realestate{ background: #f39c12; }
.sg-pin.sg-pin-realestate .sg-pin-arrow,.sg-cluster.sg-pin-realestate .sg-cluster-arrow{ border-top-color: #f39c12; }
.sg-pin.sg-pin-lodging,   .sg-cluster.sg-pin-lodging   { background: #e67e22; }
.sg-pin.sg-pin-lodging .sg-pin-arrow,   .sg-cluster.sg-pin-lodging .sg-cluster-arrow   { border-top-color: #e67e22; }
.sg-pin.sg-pin-leisure,   .sg-cluster.sg-pin-leisure   { background: #e91e63; }
.sg-pin.sg-pin-leisure .sg-pin-arrow,   .sg-cluster.sg-pin-leisure .sg-cluster-arrow   { border-top-color: #e91e63; }
.sg-pin.sg-pin-sports,    .sg-cluster.sg-pin-sports    { background: #00bcd4; }
.sg-pin.sg-pin-sports .sg-pin-arrow,    .sg-cluster.sg-pin-sports .sg-cluster-arrow    { border-top-color: #00bcd4; }
.sg-pin.sg-pin-tech,      .sg-cluster.sg-pin-tech      { background: #607d8b; }
.sg-pin.sg-pin-tech .sg-pin-arrow,      .sg-cluster.sg-pin-tech .sg-cluster-arrow      { border-top-color: #607d8b; }
.sg-pin.sg-pin-repair,    .sg-cluster.sg-pin-repair    { background: #795548; }
.sg-pin.sg-pin-repair .sg-pin-arrow,    .sg-cluster.sg-pin-repair .sg-cluster-arrow    { border-top-color: #795548; }
.sg-pin.sg-pin-facility,  .sg-cluster.sg-pin-facility  { background: #34495e; }
.sg-pin.sg-pin-facility .sg-pin-arrow,  .sg-cluster.sg-pin-facility .sg-cluster-arrow  { border-top-color: #34495e; }

/* ============================================================
 *  행정구역 클러스터 핀 (동/구/시 단위)
 *  지역명 + 평균금액 + 매장수 — 첨부 이미지 스타일
 * ============================================================ */
.sg-area-cluster {
  display: inline-block;
  min-width: 80px;
  background: #fff;
  border: 1.5px solid #0081FF;
  border-radius: 6px;
  padding: 5px 9px 4px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  position: relative;
  white-space: nowrap;
  font-family: 'Pretendard', sans-serif;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.sg-area-cluster:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  z-index: 999;
}
.sg-ac-name {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 1px;
}
.sg-ac-amount {
  font-size: 16px;
  font-weight: 800;
  color: #0081FF;
  letter-spacing: -0.4px;
}
.sg-ac-cnt {
  display: inline-block;
  background: #0081FF;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 2px;
}
.sg-ac-arrow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.15));
}
.sg-ac-arrow::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -7px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #0081FF;
  z-index: -1;
}

/* 핫스팟 (평균 1억+) — 빨간 강조 */
.sg-area-hot { border-color: #dc2626; }
.sg-area-hot .sg-ac-amount { color: #dc2626; }
.sg-area-hot .sg-ac-cnt { background: #dc2626; }
.sg-area-hot .sg-ac-arrow::before { border-top-color: #dc2626; }

/* ============================================================
 *  행정구역(시/구/동) 단위 클러스터 마커 — 라벨형
 *  지역명 + 토탈금액 + 증감률 배지
 * ============================================================ */
.sg-region-cluster {
  position: relative;
  background: #fff;
  border: 1px solid #d0d4d9;
  border-radius: 8px;
  padding: 5px 12px 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  z-index: 1000;
  transition: transform .15s ease;
  font-family: inherit;
}
.sg-region-cluster:hover {
  transform: translateY(-2px) scale(1.05);
  z-index: 1500;
}
.sg-region-name {
  font-size: 12px;
  color: #333;
  font-weight: 600;
  line-height: 1.2;
}
.sg-region-amount {
  font-size: 15px;
  color: #111;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 1px;
}
.sg-region-delta {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px 2px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}
.sg-region-delta-up   { background: #1f72ff; }
.sg-region-delta-down { background: #e8456b; }

.sg-region-cluster[data-level="sigungu"] .sg-region-amount { font-size: 16px; }
.sg-region-cluster[data-level="sido"] {
  padding: 7px 14px 8px;
}
.sg-region-cluster[data-level="sido"] .sg-region-name   { font-size: 13px; }
.sg-region-cluster[data-level="sido"] .sg-region-amount { font-size: 18px; }

/* 클러스터 (금액+갯수 — 매장 핀과 동일 스타일) */
.sg-cluster {
  display: inline-block;
  min-width: 60px;
  background: #fff;
  border: 2px solid #0081FF;
  border-radius: 5px;
  padding: 0;
  text-align: center;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  position: relative;
  font-family: 'Pretendard', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
}
.sg-cluster:hover { transform: translateY(-2px) scale(1.05); z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.sg-cluster .sg-cl-amount {
  background: #0081FF;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 10px;
  letter-spacing: -0.3px;
}
.sg-cluster .sg-cl-count {
  background: #fff;
  color: #0081FF;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}
.sg-cluster-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #0081FF;
}

/* 클러스터 핫스팟 (1억 이상) — 빨강 */
.sg-cluster-hot { border-color: #dc2626; }
.sg-cluster-hot .sg-cl-amount { background: #dc2626; }
.sg-cluster-hot .sg-cl-count { color: #dc2626; }
.sg-cluster-hot .sg-cluster-arrow { border-top-color: #dc2626; }
.sg-cluster-normal { border-color: #0081FF; }
.sg-cluster-normal .sg-cl-amount { background: #0081FF; }
.sg-cluster-normal .sg-cl-count { color: #0081FF; }
.sg-cluster-normal .sg-cluster-arrow { border-top-color: #0081FF; }

/* ===== 모바일 ===== */
@media (max-width: 768px) {
  .sg-container { flex-direction: column; height: calc(100vh - 60px); }
  .sg-side { width: 100%; max-height: 50vh; border-right: 0; border-bottom: 1px solid #e2e8f0; }
  .sg-main { flex: 1; }
}

/* 상권 상세 잠금 — 열기 전에는 흐리게만 보여 준다 (2026-09-23) */
.sg-lock{position:relative;margin-top:10px;border-radius:12px;overflow:hidden;}
.sg-lock-blur{filter:blur(4px);opacity:.55;pointer-events:none;user-select:none;padding-bottom:6px;}
.sg-lock-bars{display:flex;flex-direction:column;gap:7px;padding:8px 2px 12px;}
.sg-lock-bars span{display:block;height:13px;border-radius:7px;background:linear-gradient(90deg,#cfe0f3,#e8eef5);}
.sg-lock-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.95));}
.sg-lock-ico{font-size:22px;margin-bottom:6px;}
.sg-lock-title{font-size:14px;font-weight:800;color:#1b1e21;margin-bottom:6px;word-break:keep-all;}
.sg-lock-desc{font-size:12px;color:#6b7684;line-height:1.6;margin-bottom:12px;word-break:keep-all;}
.sg-lock-btn{padding:11px 26px;border:0;border-radius:10px;background:#0081ff;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;}
.sg-lock-btn:hover{background:#0069d9;}
.sg-lock-note{margin-top:10px;font-size:11px;color:#98a2ad;line-height:1.5;word-break:keep-all;}

/* 분석 중인 동네 이름표 (2026-09-23) */
.sg-area-tag{display:inline-block;padding:5px 12px;border-radius:16px;background:#0081FF;color:#fff;
  font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);
  transform:translateX(-50%);}

/* ══════════ 상권 보고서 (2026-09-23) ══════════ */
.sg-report-box{margin-top:12px;padding:12px;border:1px solid #e3e8ef;border-radius:10px;background:#fbfcfe}
.sg-report-title{font-size:13.5px;font-weight:800;color:#0081FF;margin-bottom:8px}
.sg-report-sel{width:100%;height:36px;border:1px solid #d6dde7;border-radius:8px;padding:0 10px;
  font-size:13px;background:#fff;color:#222}
.sg-report-btn{width:100%;height:40px;margin-top:8px;border:0;border-radius:8px;cursor:pointer;
  background:#0081FF;color:#fff;font-size:14px;font-weight:800;letter-spacing:-.2px}
.sg-report-btn:hover{background:#0064c8}
.sg-report-hint{margin-top:6px;font-size:11.5px;color:#8a94a3;line-height:1.5}

.sg-rpt-dim{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:1400;display:none}
.sg-rpt-dim.open{display:block}

.sg-rpt{position:fixed;top:0;right:0;width:min(760px,100vw);height:100vh;background:#f4f6f9;
  z-index:1401;display:none;flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.18)}
.sg-rpt.open{display:flex}
.sg-rpt-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 14px;height:52px;background:#0081FF;color:#fff}
.sg-rpt-head-left{display:flex;align-items:center;gap:8px;min-width:0}
.sg-rpt-head-left strong{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-rpt-ico{font-size:16px}
.sg-rpt-sub{font-size:12px;opacity:.85;white-space:nowrap}
.sg-rpt-x{border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}

.sg-rpt-tabs{flex:0 0 auto;display:flex;gap:4px;padding:8px 10px;background:#fff;border-bottom:1px solid #e5e9ef;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.sg-rpt-tabs::-webkit-scrollbar{display:none}
.sg-rpt-tab{flex:0 0 auto;border:0;background:transparent;border-radius:18px;padding:8px 14px;cursor:pointer;
  font-size:13px;font-weight:600;color:#5b6472;white-space:nowrap}
.sg-rpt-tab:hover{background:#f1f4f8}
.sg-rpt-tab.on{background:#eef3fa;color:#0081FF;font-weight:800}

.sg-rpt-body{flex:1 1 auto;overflow-y:auto;padding:18px 20px 48px;-webkit-overflow-scrolling:touch}
.sg-rpt-loading,.sg-rpt-empty{padding:60px 20px;text-align:center;color:#8a94a3;font-size:14px}

/* 보고서 본문 요소 */
.rpt-h2{margin:0 0 12px;font-size:19px;font-weight:800;color:#141b25;letter-spacing:-.4px}
.rpt-h3{margin:28px 0 12px;font-size:15px;font-weight:800;color:#1f2733}
.rpt-lead{background:#eef1f5;border-radius:10px;padding:13px 15px;font-size:13.5px;color:#4a5462;line-height:1.65}
.rpt-sub{font-size:12.5px;color:#8a94a3;margin:-4px 0 10px}
.rpt-p{font-size:13.5px;line-height:1.85;color:#2c3541;margin:0 0 14px}
.rpt-hl{color:#0081FF}
.rpt-up{color:#e5484d;font-weight:700}
.rpt-down{color:#0081FF;font-weight:700}
.rpt-note{margin-top:10px;font-size:12px;color:#8a94a3;line-height:1.6}
.rpt-blank{margin:10px 0;padding:26px 18px;background:#fff;border:1px dashed #d9e0e8;border-radius:10px;
  text-align:center;font-size:13px;color:#8a94a3;line-height:1.7}

/* 도넛 */
.rpt-donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:#fff;border-radius:12px;padding:20px}
.rpt-donut-big{font-size:26px;font-weight:800;fill:#141b25}
.rpt-donut-sm{font-size:10px;fill:#8a94a3}
.rpt-legend{flex:1 1 200px;min-width:190px}
.rpt-legend-row{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px}
.rpt-legend-lab{flex:1 1 auto;color:#3b4552}
.rpt-legend-val{font-weight:700;color:#141b25}
.rpt-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
.rpt-legend-inline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#5b6472;margin-top:8px}

/* 가로 막대 */
.rpt-bars{background:#fff;border-radius:12px;padding:16px 18px}
.rpt-bar-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.rpt-bar-rank{flex:0 0 22px;text-align:center;font-size:12px;color:#8a94a3}
.rpt-bar-label{flex:0 0 130px;font-size:13px;font-weight:700;color:#2c3541;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpt-bar-track{flex:1 1 auto;position:relative;display:flex;align-items:center;min-height:28px}
.rpt-bar-fill{height:26px;border-radius:6px;background:#dceafa;display:block}
.rpt-bar-fill.top{background:#0081FF}
.rpt-bar-val{position:absolute;left:10px;font-size:12.5px;font-weight:700;color:#0081FF}
.rpt-bar-fill.top ~ .rpt-bar-val{color:#fff}

/* 세로 막대 */
.rpt-cols{display:flex;align-items:flex-end;gap:8px;height:190px;background:#fff;border-radius:12px;
  padding:16px 14px 8px;overflow-x:auto}
.rpt-col{flex:1 1 0;min-width:52px;display:flex;flex-direction:column;align-items:center;height:100%}
.rpt-col-val{font-size:10.5px;color:#5b6472;margin-bottom:4px;white-space:nowrap}
.rpt-col-bar{width:60%;max-width:34px;background:#0081FF;border-radius:4px 4px 0 0;margin-top:auto}
.rpt-col-lab{font-size:10.5px;color:#8a94a3;margin-top:6px;white-space:nowrap}

/* 표 */
.rpt-tablewrap{margin-top:12px;overflow-x:auto;background:#fff;border-radius:12px}
.rpt-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:100%}
.rpt-table th,.rpt-table td{padding:11px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid #eef1f5}
.rpt-table th:first-child,.rpt-table td:first-child{text-align:left}
.rpt-table th{background:#f7f9fb;color:#5b6472;font-weight:700}
.rpt-td-lab{font-weight:700;color:#2c3541}
.rpt-diff{text-align:right;margin-top:8px;font-size:12.5px;font-weight:700}
.rpt-diff.up{color:#e5484d}
.rpt-diff.down{color:#0081FF}

/* 인프라 카드 */
.rpt-infra{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
.rpt-infra-card{display:flex;align-items:center;gap:9px;background:#fff;border-radius:10px;padding:14px 15px}
.rpt-infra-ico{font-size:19px}
.rpt-infra-lab{flex:1 1 auto;font-size:13px;color:#3b4552;white-space:nowrap}
.rpt-infra-cnt{font-size:14px;font-weight:800;color:#141b25;white-space:nowrap}
.rpt-station{margin-top:10px;background:#fff;border-radius:10px;padding:13px 15px;font-size:13px;color:#3b4552}

/* 안내 박스 */
.rpt-tip{margin-top:20px;background:#eef3fa;border-radius:12px;padding:16px 18px}
.rpt-tip-t{font-size:14px;font-weight:800;color:#0081FF;margin-bottom:8px}
.rpt-tip-b{font-size:13px;line-height:1.75;color:#3b4552}

/* 성장 단계 카드 */
.rpt-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rpt-stage-card{background:#fff;border-radius:12px;padding:16px 18px}
.rpt-stage-ico{font-size:22px}
.rpt-stage-lab{margin-top:8px;font-size:12.5px;color:#8a94a3}
.rpt-stage-val{margin-top:4px;font-size:16px;font-weight:800;color:#141b25}
.rpt-stage-pct{font-size:13px;color:#e5484d;margin-left:4px}

/* KPI 카드 */
.rpt-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.rpt-kpi{background:#fff;border-radius:12px;padding:16px 18px}
.rpt-kpi-ico{font-size:20px}
.rpt-kpi-lab{margin-top:8px;font-size:12.5px;color:#8a94a3}
.rpt-kpi-val{margin-top:4px;font-size:19px;font-weight:800;color:#141b25}
.rpt-kpi-unit{font-size:12px;font-weight:600;color:#8a94a3}

/* 연령 막대 */
.rpt-agebars{background:#fff;border-radius:12px;padding:16px 18px}
.rpt-age-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.rpt-age-lab{flex:0 0 60px;font-size:12.5px;color:#5b6472}
.rpt-age-track{flex:1 1 auto;display:flex;align-items:center;position:relative;min-height:24px}
.rpt-age-m{height:22px;background:#0081FF;border-radius:4px 0 0 4px}
.rpt-age-f{height:22px;background:#FFAF28;border-radius:0 4px 4px 0}
.rpt-age-val{margin-left:8px;font-size:12px;font-weight:700;color:#5b6472}

/* 마지막 CTA */
.rpt-cta{margin-top:20px;background:#141b25;border-radius:14px;padding:24px;color:#fff}
.rpt-cta-t{font-size:17px;font-weight:800;margin-bottom:10px}
.rpt-cta-b{font-size:13px;line-height:1.75;color:#c3cbd6;margin-bottom:16px}
.rpt-cta-btn{border:0;border-radius:9px;background:#fff;color:#141b25;font-size:13.5px;font-weight:800;
  padding:12px 20px;cursor:pointer}

@media (max-width:820px){
  .sg-rpt{width:100vw}
  .rpt-stage{grid-template-columns:1fr}
  .rpt-bar-label{flex:0 0 92px}
}

/* ══════════ 상권 대화 (2026-09-23) ══════════ */
.sg-rpt-head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sg-rpt-chat{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff;
  border-radius:16px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.sg-rpt-chat:hover{background:rgba(255,255,255,.22)}
.rpt-cta-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);margin-left:8px}

.sgc{position:fixed;top:0;right:0;width:min(560px,100vw);height:100vh;background:#fff;
  z-index:1410;display:none;flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.2)}
.sgc.open{display:flex}
.sgc-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  height:52px;padding:0 16px;border-bottom:1px solid #e9edf2;background:#fff}
.sgc-head strong{font-size:14.5px;font-weight:800;color:#141b25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgc-x{border:0;background:transparent;font-size:26px;line-height:1;color:#5b6472;cursor:pointer;padding:0 4px}
.sgc-body{flex:1 1 auto;overflow-y:auto;padding:18px 16px 30px;background:#f7f9fb}
.sgc-foot{flex:0 0 auto;padding:11px 16px;border-top:1px solid #e9edf2;background:#fff;
  font-size:11.5px;color:#8a94a3;line-height:1.5}

.sgc-turn{margin-bottom:14px}
.sgc-me{display:flex;justify-content:flex-end}
.sgc-me .sgc-bubble{background:#eef1f5;border-radius:16px 16px 4px 16px;padding:11px 15px;
  font-size:13.5px;color:#2c3541;max-width:85%}
.sgc-card{background:#fff;border:1.5px solid #0081FF;border-radius:14px;padding:18px 18px 20px;position:relative}
.sgc-tag{position:absolute;top:-11px;left:16px;background:#0081FF;color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:.4px;border-radius:5px;padding:3px 9px}
.sgc-title{font-size:16px;font-weight:800;color:#141b25;margin:6px 0 6px}
.sgc-sub{font-size:12px;color:#8a94a3}
.sgc-hr{border:0;border-top:1px solid #1f2733;margin:12px 0 14px;opacity:.85}
.sgc-h{margin:18px 0 10px;font-size:14.5px;font-weight:800;color:#1f2733}
.sgc-h:first-child{margin-top:2px}
.sgc-p{margin:0 0 12px;font-size:13.5px;line-height:1.8;color:#2c3541}
.sgc-hl{color:#0081FF}
.sgc-ul{margin:0 0 12px;padding-left:18px}
.sgc-ul li{font-size:13px;line-height:1.85;color:#2c3541;margin-bottom:6px}
.sgc-none{margin:10px 0;padding:14px;background:#f4f6f9;border-radius:9px;
  font-size:12.5px;color:#8a94a3;line-height:1.65}
.sgc-fine{margin-top:12px;font-size:11.5px;color:#a3abb7;line-height:1.55}
.sgc-tw{overflow-x:auto;margin:0 0 14px}
.sgc-t{width:100%;border-collapse:collapse;font-size:12.5px}
.sgc-t th,.sgc-t td{padding:9px 11px;border:1px solid #e5e9ef;text-align:right;white-space:nowrap}
.sgc-t th:first-child,.sgc-t td:first-child{text-align:left}
.sgc-t th{background:#f4f7fa;color:#5b6472;font-weight:700}
.sgc-cta{margin-top:16px;padding:14px;background:#eef3fa;border-radius:10px;font-size:13px;color:#2c3541;line-height:1.7}
.sgc-cta-btn{border:0;background:#0081FF;color:#fff;border-radius:7px;padding:6px 12px;
  font-size:12.5px;font-weight:700;cursor:pointer;margin:0 2px}

.sgc-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.sgc-card-btn{border:0;border-radius:12px;padding:15px 14px;cursor:pointer;text-align:left;
  color:#fff;display:flex;flex-direction:column;gap:9px;min-height:84px}
.sgc-card-btn:hover{filter:brightness(1.06)}
.sgc-card-ico{font-size:19px}
.sgc-card-tx{font-size:13px;font-weight:700;line-height:1.45}
.sgc-card-btn.c1{background:#0081FF}
.sgc-card-btn.c2{background:#0064C8}
.sgc-card-btn.c3{background:#4DA6FF}
.sgc-card-btn.c4{background:#37474F}
.sgc-card-btn.c5{background:#FFAF28;color:#3a2a00}

@media (max-width:820px){
  .sgc{width:100vw}
  .sgc-cards{grid-template-columns:1fr}
  .sg-rpt-chat{padding:5px 9px;font-size:11.5px}
}

/* 왼쪽 패널 버튼 폭 맞추기 (2026-09-23 사용자 지적 — "짤려있는 느낌")
   원인은 여백이 없어서가 아니라 **계산 기준이 달라서**다.
   reset_code.css 의 `button { all: unset }` 이 box-sizing 을 content-box 로 되돌려서,
   width:100% 에 좌우 padding 이 그대로 더해져 패널 밖으로 22px 씩 튀어나간다.
   (가입 화면에서 2026-09-12 에 똑같이 당했다 — user_common.css 의 .join-submit 참고)
   ⚠️ 여백만 더 주는 식으로 덮지 말 것. 기준을 맞춰야 한다. */
.sg-filter-btn,
.sg-calc-btn,
.sg-report-btn,
.sg-report-sel,
.sg-radius-btn,
.sg-action-btn { box-sizing: border-box; }

/* 보고서 일곱 칸을 이어 붙였다 (2026-09-23 사용자 지시 — 탭으로 갈아끼우지 않는다).
   이어져 있으니 어디서 다음 칸이 시작하는지 눈에 보여야 한다. */
.sg-rpt-sec{padding-bottom:30px;margin-bottom:30px;border-bottom:8px solid #e9edf2}
.sg-rpt-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:10px}
.sg-rpt-sec > .rpt-h2:first-child{margin-top:0}
/* 탭줄은 스크롤해도 머리에 붙어 있게 */
.sg-rpt-tabs{position:sticky;top:0;z-index:2}
/* 스크롤통을 기준점으로 삼을 수 있게 (칸 위치 계산에 쓴다) */
.sg-rpt-body{position:relative}


/* ══════════ 창업 계산기 모달 (2026-09-23 옮겨 옴) ══════════
   🔴 이 규칙들은 user_commercial.css 에 있었는데, 상권분석을 /user/sangga 로 떼어내면서
      **화면 코드와 JS 만 옮기고 CSS 를 두고 왔다.** 그래서 [창업 계산기] 를 눌러도
      모달이 position:fixed 도, z-index 도 없는 맨 div 로 떠서 아무것도 안 보였다.
      (사용자 신고: "창업계산기 누르면 실행이 안돼")
   ⚠️ 화면을 다른 페이지로 옮길 때는 CSS 가 어느 파일에 있는지 같이 확인할 것. */
/* ===================== 창업 계산기 모달 ===================== */
.sc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sc-modal.open { display: flex; }
.sc-modal-inner {
  background: #fff;
  border-radius: 16px;
  width: 540px;
  max-width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  font-family: 'Pretendard', sans-serif;
}
.sc-header {
  background: linear-gradient(135deg, #ffaf28, #f0990f);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sc-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.sc-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.sc-body { padding: 22px 24px; overflow-y: auto; }
.sc-step h4 {
  margin: 0 0 16px;
  font-size: 14px;
  color: #334155;
}
.sc-step label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: #475569;
}
.sc-select, .sc-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  margin-top: 6px;
}
.sc-select:disabled { background: #f1f5f9; color: #94a3b8; }
.sc-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.sc-next-btn, .sc-prev-btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.sc-next-btn {
  background: #0081FF;
  color: #fff;
}
.sc-next-btn:hover { background: #0064c8; }
.sc-prev-btn {
  background: #fff;
  border-color: #cbd5e1;
  color: #475569;
}
.sc-prev-btn:hover { background: #f8fafc; }

/* 결과 카드 */
.sc-result-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #ffaf28;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}
.sc-result-card .sc-rc-label {
  font-size: 12px;
  color: #78350f;
  font-weight: 600;
}
.sc-result-card .sc-rc-num {
  font-size: 22px;
  font-weight: 800;
  color: #92400e;
}
.sc-result-detail {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: #475569;
  line-height: 1.7;
}
.sc-result-detail .sc-rd-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #e2e8f0;
  padding: 4px 0;
}
.sc-result-detail .sc-rd-row:last-child { border-bottom: 0; font-weight: 700; color: #0081FF; }
/* 어느 범위 숫자인지 알려주는 띠 (서울 밖은 시도 전체·연간이라 반드시 밝힌다) */
.rpt-scope{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#fff7e6;border:1px solid #ffdfa8;border-radius:8px;padding:9px 13px;margin-bottom:12px;
  font-size:12.5px;font-weight:700;color:#8a6200}
.rpt-scope span{font-weight:600;color:#a88a4a;font-size:11.5px}

/* 유동인구를 상권분석 '인구' 탭 안으로 (2026-09-23 사용자 지시 — 따로 떼어놓지 않는다) */
.sg-ft-cnt{font-size:11.5px;font-weight:700;color:#0081FF;margin-left:6px}
.sg-ft-list{display:flex;flex-direction:column;gap:2px}
.sg-ft-row{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;cursor:pointer}
.sg-ft-row:hover{background:#f2f8ff}
.sg-ft-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9BB0C4}
.sg-ft-dot.lv1{background:#3ED07A}.sg-ft-dot.lv2{background:#FFAF28}
.sg-ft-dot.lv3{background:#FF8A3D}.sg-ft-dot.lv4{background:#E5484D}
.sg-ft-name{flex:1 1 auto;font-size:12.5px;color:#2c3541;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-ft-num{font-size:12.5px;font-weight:800;color:#141b25;white-space:nowrap}
.sg-ft-tag{font-size:10.5px;font-weight:700;border-radius:10px;padding:2px 7px;white-space:nowrap;
  background:#eef1f5;color:#5b6472}
.sg-ft-tag.lv1{background:#e8f8ee;color:#1e8e4e}.sg-ft-tag.lv2{background:#fff5e0;color:#96650a}
.sg-ft-tag.lv3{background:#fff0e6;color:#b04e13}.sg-ft-tag.lv4{background:#fdecec;color:#c02a2f}
.sg-ft-more{margin-top:6px;font-size:11.5px;color:#8a94a3}
.sg-ft-wide{background:#f4f7fb;border-radius:10px;padding:13px 14px}
.sg-ft-wide-num{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:#141b25}
.sg-ft-wide-msg{margin-top:6px;font-size:11.5px;color:#5b6472;line-height:1.5}

/* 매출 추정 칸 (2026-09-23 — 오래 비어 있던 자리를 채움) */
.sg-est{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.sg-est-head{padding:14px 15px;background:#f2f8ff;border-bottom:1px solid #e2e8f0}
.sg-est-num{font-size:22px;font-weight:800;color:#0081FF;letter-spacing:-.5px}
.sg-est-num span{font-size:12px;font-weight:700;color:#5b6472;margin-left:2px}
.sg-est-sub{margin-top:3px;font-size:11.5px;color:#8a94a3}
.sg-est-list{padding:6px 4px}
.sg-est-row{display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12.5px}
.sg-est-name{flex:1 1 auto;color:#2c3541;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-est-cnt{flex:0 0 auto;font-size:11px;color:#8a94a3}
.sg-est-per{flex:0 0 auto;font-weight:800;color:#141b25}
.sg-est-note{padding:10px 14px;border-top:1px solid #eef1f5;background:#fafbfd;
  font-size:11px;color:#8a94a3;line-height:1.55}

/* ── 휴대폰에서 글이 잘리고 칸을 잡아먹던 것 (2026-09-23 사용자 신고) ──
   ③ 파란 머리말이 한 줄 통째로 자리를 먹었다 → 한 줄로 눕히고 높이를 줄인다
   ④ "분석 반경 (선택, 미지정시 전체)" 이 한 줄에 안 들어가 잘렸다 → 접히게 둔다 */
@media (max-width: 768px) {
  /* 제목은 헤더(로고 옆)로 옮겼다 → 여기서는 파란 띠를 통째로 걷는다.
     한 화면에 같은 제목이 두 번 나올 이유가 없고, 휴대폰은 한 줄이 아깝다. */
  .sg-side-head { display: none; }

  /* 글자가 잘리지 않게 — 좁으면 아랫줄로 접힌다 */
  .sg-control-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 4px;
    font-size: 12px;
    line-height: 1.4;
  }
  .sg-control-hint { margin-left: 0; white-space: nowrap; }

  /* 반경 버튼도 좁은 화면에서 두 줄로 (네 개가 한 줄에 안 들어간다).
     ⚠️ 이 줄은 flex 가 아니라 **grid** 다. flex-wrap 을 줘도 아무 일도 안 일어난다. */
  .sg-radius-row { grid-template-columns: repeat(2, 1fr); }
}