/* ==========================================================
   pages/region.css — 지역 상세 전용
   .region-hero(요약) · .region-layout(본문 + 옆) · .rg-cats(카테고리 비교)
   · .rg-baskets · .rg-store-list · .rg-dl
   ========================================================== */

/* ---------- 요약 ---------- */
.rh-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rh-kicker { font-size: 14px; font-weight: 700; color: var(--brand-deep); }
.region-hero h1 { margin-top: 2px; }
.rh-actions { display: flex; gap: 8px; }
.rh-summary { display: grid; gap: 16px; margin-top: 18px; }
.rh-idx { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.rh-idx-side { display: grid; justify-items: start; gap: 4px; padding-bottom: 8px; }
.rh-level { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.rh-sentence { margin-top: 10px; font-size: 17px; font-weight: 700; }
.rh-ranks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rh-ranks .rpill { background: #fff; box-shadow: var(--shadow-1); }
.rh-strip { padding: 14px 14px 10px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); align-self: end; }
.rh-strip-t { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.region-hero .basis { margin-top: 16px; }

/* ---------- 본문 배치 ---------- */
.region-layout { display: grid; gap: 16px; }
.region-main, .region-side { min-width: 0; }

/* ---------- 카테고리별 비교 ---------- */
.rg-cats { display: grid; gap: 2px; }
.rgc, .rgc-axis {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 34px minmax(88px, 130px) minmax(0, 1fr) 70px 16px;
}
.rgc { min-height: 60px; padding: 6px 8px; border-radius: 13px; transition: background .12s; }
.rgc:hover { background: var(--surface-2); }
.rgc-axis { padding: 4px 8px 0; }
.rgc-name { display: grid; line-height: 1.35; min-width: 0; }
.rgc-name b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.rgc-name b .tag { height: 20px; padding: 0 7px; font-size: 11px; }
.rgc-name small { font-size: 12px; color: var(--ink-3); }
.rgc-val { display: grid; justify-items: end; line-height: 1.3; }
.rgc-val b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rgc-val small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.rgc-go { width: 16px; height: 16px; color: var(--ink-4); }

/* ---------- 추이 ---------- */
.trend-badge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--navy-soft); font-size: 13px; font-weight: 700; color: var(--navy-2); }
.trend-badge b { font-weight: 900; color: var(--navy); }
.trend-badge .ico { width: 14px; height: 14px; }

/* ---------- 가격 변동 ---------- */
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-v .chg { font-size: 20px; }
.kpi-v .chg .ico { width: 13px; height: 13px; }
.rg-change-list { margin-top: 16px; }

/* ---------- 주요 품목 ---------- */
#rgItemCats { margin-bottom: 14px; }
.rg-item-sum { display: grid; gap: 8px; margin-bottom: 12px; }
.rg-item-sum:empty { display: none; }
.rg-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; }
.rg-sum-count { font-size: 13.5px; color: var(--ink-2); }
.rg-sum-count .t-exp { color: var(--exp-deep); font-weight: 800; }
.rg-sum-count .t-aff { color: var(--aff-deep); font-weight: 800; }
.rg-sum.exp { background: var(--exp-soft); }
.rg-sum.aff { background: var(--aff-soft); }
.rg-sum.flat { background: var(--surface-2); }
.rg-sum span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.rg-sum span .ico { width: 10px; height: 10px; }
.rg-sum.exp span { color: var(--exp-deep); }
.rg-sum.aff span { color: var(--aff-deep); }
.rg-sum b { font-weight: 800; }
.rg-sum b a:hover { text-decoration: underline; }
.rg-sum em { margin-left: auto; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.tbl-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.tbl-note .ico { margin-top: 2px; color: var(--ink-4); }

/* ---------- 소비 유형 ---------- */
.rg-baskets { display: grid; gap: 2px; }
.rgb { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 62px; padding: 8px; border-radius: 13px; transition: background .12s; }
.rgb:hover { background: var(--surface-2); }
.rgb-name { display: grid; line-height: 1.35; min-width: 0; }
.rgb-name b { font-size: 15px; font-weight: 800; }
.rgb-name small { font-size: 12px; color: var(--ink-3); }
.rgb-val { display: grid; justify-items: end; gap: 3px; }
.rgb-val b { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rgb-val .dpill { height: 22px; font-size: 12px; }
.rgb-rank { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-3); }
.rgb-rank b { font-weight: 800; color: var(--navy); }

/* ---------- 판매점 ---------- */
.rg-store-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; font-size: 12.5px; color: var(--ink-3); }
.rg-store-list { display: grid; gap: 2px; }
.rg-store-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px; border-radius: 12px; }
.rg-store-list li:nth-child(odd) { background: var(--surface-2); }
.rs-rank { font-size: 14px; font-weight: 800; color: var(--ink-3); text-align: center; }
.rs-name { display: grid; line-height: 1.35; min-width: 0; }
.rs-name b { font-size: 14.5px; font-weight: 800; }
.rs-name small { font-size: 12px; color: var(--ink-3); }
.rs-val { display: grid; justify-items: end; line-height: 1.35; }
.rs-val b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- 옆: 데이터 기준 ---------- */
.rg-dl { display: grid; gap: 0; margin-bottom: 12px; }
.rg-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.rg-dl dt { color: var(--ink-3); font-weight: 600; }
.rg-dl dd { margin: 0; font-weight: 800; }
.rg-others { grid-template-columns: repeat(4, 1fr) !important; }
.rg-rank-link { margin-top: 12px; }

@media (max-width: 520px) {
  .rgc, .rgc-axis { grid-template-columns: 34px 78px minmax(0, 1fr) 58px; column-gap: 10px; }
  .rgc-go { display: none; }
  .rgc-axis > span:last-child { display: none; }
  .kpis-3 { gap: 6px; }
  .kpis-3 .kpi { padding: 12px 10px; }
  .kpis-3 .kpi-v { font-size: 18px; }
}
@media (min-width: 768px) {
  .rh-sentence { font-size: 19px; }
  .rgb { grid-template-columns: 34px minmax(0, 1fr) auto 110px; }
  .rgb-rank { grid-column: auto; text-align: right; }
}
@media (min-width: 900px) {
  .rh-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 32px; }
  .region-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
}