@charset "utf-8";
/* =========================================================
   지역 데이터 상시 페이지 — regiondata.css (2026-10-30 P2)
   - 로드: top_skin 이 common.css → gnbmenu.css → header.css 다음, 컨트롤러 $_arrPageCss = array('regiondata.css') (버전=csspara)
   - 대상: regiondata.php(허브·시군구/시도 상세·랭킹) — 클래스 접두 rgn-
   - 공용 클래스(sec__*, shop-shelf*, shop-nav, ins-tbl*, ins-note, ins-empty, srv-gate*)는 common.css 그대로 사용
   - 색·폰트는 common.css :root 토큰(--ink·--line·--up·--down·--brand…) 사용
   - 본문 기본 16px(--t-body), 보조 정보 13~14px, 수치 강조 18~22px
   ========================================================= */

.rgn-page{font-family:var(--sans);font-size:var(--t-body,16px);color:var(--text);}
.rgn-page .rgn-up{color:var(--up);}
.rgn-page .rgn-dn{color:var(--down);}
.rgn-h2sub{margin-left:8px;font-size:15px;font-weight:600;color:var(--muted);vertical-align:middle;}

/* ── 지역 찾기 ── */
.rgn-find{display:flex;align-items:center;gap:12px;margin:4px 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.rgn-find label{font-size:15px;font-weight:700;color:var(--ink-2);white-space:nowrap;}
.rgn-find select{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:15px;color:var(--text);}

/* ── 시도 카드 ── */
.rgn-sidos{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;}
.rgn-sido{display:flex;flex-direction:column;gap:2px;padding:14px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--text);text-decoration:none;transition:border-color .15s,box-shadow .15s;}
.rgn-sido:hover{border-color:var(--brand-2);box-shadow:var(--sh-hover);}
.rgn-sido__nm{font-size:16px;font-weight:800;color:var(--brand-ink);}
.rgn-sido__v{font-size:19px;font-weight:800;color:var(--ink);}
.rgn-sido__rk{font-size:13px;color:var(--muted);}

/* ── 탭·칩 ── */
.rgn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;}
.rgn-tabs__it{padding:7px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;}
.rgn-tabs__it:hover{border-color:var(--brand);color:var(--brand-ink);}
.rgn-tabs__it.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.rgn-chips{display:flex;flex-wrap:wrap;gap:8px;}
.rgn-chip{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;color:var(--text);text-decoration:none;}
.rgn-chip:hover{border-color:var(--brand);color:var(--brand-ink);}
.rgn-chip--paid{border-style:dashed;color:var(--muted);}

/* ── 랭킹 카드(허브) ── */
.rgn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.rgn-cards[hidden]{display:none;}   /* 묶음 탭 JS 전환 — display:grid 가 hidden 속성을 덮지 않게 */
.rgn-card{display:flex;flex-direction:column;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);}
.rgn-card__hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;}
.rgn-card__tt{margin:0;font-size:17px;font-weight:800;color:var(--brand-ink);}
.rgn-card__as{font-size:12.5px;color:var(--muted-2);white-space:nowrap;}
.rgn-card__more{margin-top:auto;padding-top:10px;font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;}
.rgn-card__more:hover{text-decoration:underline;}

/* ── 랭킹 목록 ── */
.rgn-rk{list-style:none;margin:0;padding:0;}
.rgn-rk li{display:grid;grid-template-columns:28px 1fr auto auto auto;align-items:center;column-gap:8px;padding:7px 0;border-top:1px dashed var(--line);font-size:15px;}
.rgn-rk li:first-child{border-top:0;}
.rgn-rk__no{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink-2);}
.rgn-rk li:nth-child(-n+3) .rgn-rk__no{background:var(--ink);border-color:var(--ink);color:#fff;}
.rgn-rk__nm{font-weight:700;color:var(--text);text-decoration:none;min-width:0;}
.rgn-rk__nm:hover{color:var(--brand-ink);text-decoration:underline;}
.rgn-rk__sd{font-size:12.5px;color:var(--muted-2);}
.rgn-rk__v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rgn-rk__chg{min-width:32px;text-align:right;font-size:12.5px;color:var(--muted-2);}

/* ── 랭킹 표 화면 ── */
.rgn-rkctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 16px;}
.rgn-rkctl select{padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:15px;color:var(--text);max-width:100%;}
.rgn-rkctl .rgn-tabs{margin:0;}
.rgn-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.rgn-two .shop-shelf{margin:0 0 16px;}

/* ── 요약 칸 ── */
.rgn-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 28px;}
.rgn-kpis--4{grid-template-columns:repeat(4,1fr);margin:8px 0 12px;}
.rgn-kpi{padding:13px 14px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);}
.rgn-kpi__lb{display:block;font-size:13px;color:var(--muted);}
.rgn-kpi__v{display:block;margin-top:4px;font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap;}
.rgn-kpi__rk{display:block;margin-top:2px;font-size:12.5px;color:var(--muted-2);}
.rgn-kpi__rk small{font-weight:400;}

/* ── 표 ── */
.rgn-subtt{margin:22px 0 8px;font-size:16px;font-weight:700;color:var(--ink-2);}
.rgn-subtt small{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px;}
.rgn-tbl td,.rgn-tbl th{white-space:nowrap;}
.rgn-tbl .rgn-lb{white-space:normal;min-width:180px;}
.rgn-tbl .rgn-prev{color:var(--muted);}
.rgn-tbl .rgn-asof{font-size:12.5px;color:var(--muted-2);}
.rgn-tbl td small{font-size:12px;color:var(--muted-2);font-weight:400;}
.rgn-tbl--m{max-width:520px;}

/* ── 배지·잠금 ── */
.rgn-badge{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--line-2);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;vertical-align:middle;}
.rgn-badge--paid{margin-left:6px;background:#FFF4E5;color:#B45309;}
.rgn-page--allfree .rgn-badge--paid{display:none;}   /* 전 구역 무료 공개 중(2026-10-30) — 구독 배지 숨김 */
.rgn-lock{margin:16px 0 6px;padding:11px 14px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:14px;color:var(--muted);}
.rgn-lock a{color:var(--brand-ink);font-weight:700;text-decoration:none;}
.rgn-lock .rgn-badge--paid{margin-left:0;}
.rgn-paidlist{margin:4px 0 16px;padding-left:20px;font-size:15px;line-height:1.75;color:var(--text);}
.rgn-paidlist b{font-weight:700;color:var(--ink-2);}
.rgn-page .srv-gate--pw{margin:0 0 10px;padding-top:0;}
.rgn-page .srv-gate--pw .srv-gate__box{padding:20px 20px 22px;border:1px solid var(--line);border-radius:var(--r-sm);background:linear-gradient(180deg,#fff,var(--surface) 70%);}
.rgn-page .srv-gate--pw .srv-gate__txt{margin:10px 0 16px;}
.rgn-page .srv-gate__sub{margin:10px 0 0;font-size:13px;color:var(--muted);}
.rgn-page .srv-gate__sub a{color:var(--brand-ink);font-weight:700;}
.rgn-page .nm-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:3px;line-height:1.5;vertical-align:middle;}
.rgn-page .nm-tag--paid{background:#FFF4E5;color:#B45309;}

/* ── 연간 막대 ── */
.rgn-bars{list-style:none;margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);max-width:620px;}
.rgn-bars li{display:grid;grid-template-columns:52px 1fr 110px;align-items:center;column-gap:10px;padding:4px 0;font-size:14px;}
.rgn-bars__lb{color:var(--muted);font-variant-numeric:tabular-nums;}
.rgn-bars__bar{display:block;height:12px;background:var(--surface);border-radius:6px;overflow:hidden;}
.rgn-bars__bar i{display:block;height:100%;background:var(--brand);border-radius:6px;}
.rgn-bars__bar i.rgn-bars__neg{background:var(--down);}
.rgn-bars__v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}

/* ── 소식 ── */
.rgn-arts,.rgn-press{list-style:none;margin:0 0 6px;padding:4px 18px;background:#fff;border:1px solid #e6e6e6;border-radius:10px;}
.rgn-arts li,.rgn-press li{padding:11px 0;border-top:1px solid var(--line);}
.rgn-arts li:first-child,.rgn-press li:first-child{border-top:0;}
.rgn-arts a{font-size:16px;font-weight:700;color:var(--text);text-decoration:none;}
.rgn-arts a:hover{color:var(--brand-ink);text-decoration:underline;}
.rgn-arts__dt{margin-left:8px;font-size:13px;color:var(--muted-2);}
.rgn-press__tt{display:block;font-size:15px;color:var(--text);}
.rgn-press__meta{display:block;margin-top:2px;font-size:13px;color:var(--muted-2);}

/* ── 반응형 ── */
@media (max-width:1024px){
	.rgn-sidos{grid-template-columns:repeat(4,1fr);}
	.rgn-cards{grid-template-columns:repeat(2,1fr);}
	.rgn-kpis{grid-template-columns:repeat(3,1fr);}
	.rgn-two{grid-template-columns:1fr;}
}
@media (max-width:640px){
	.rgn-sidos{grid-template-columns:repeat(2,1fr);}
	.rgn-cards{grid-template-columns:1fr;}
	.rgn-kpis,.rgn-kpis--4{grid-template-columns:repeat(2,1fr);}
	.rgn-kpi__v{font-size:17px;}
	.rgn-find{flex-direction:column;align-items:stretch;}
	.rgn-rk li{grid-template-columns:24px 1fr auto auto;}
	.rgn-rk__sd{display:none;}
	.rgn-bars li{grid-template-columns:44px 1fr 90px;}
}