/* ==========================================================================
   Regional Directory Hub (addrcat.css)
   Clean Design Token & Full Dark Mode Pairings
   WCAG 2.2 AA Contrast Compliant, Concentric Radii, 5-State Ergonomics
   ========================================================================== */

.op-addrcat-hub {
	font-family: var(--op-font-sans, "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif);
	color: #1e293b;
	margin: 0 auto;
	padding: 8px 0 40px;
	box-sizing: border-box;
	word-break: keep-all;
}

/* Accessibility */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 1. Control Bar (Search & Tabs)
   ========================================================================== */
.hub-control-bar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 22px;
}

.hub-search-box {
	position: relative;
	width: 100%;
}

.hub-search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 16px;
	pointer-events: none;
}

.hub-search-input {
	width: 100%;
	height: 46px;
	padding: 10px 48px 10px 44px;
	font-size: 14.5px;
	border: 1.5px solid #cbd5e1;
	border-radius: 23px;
	background: #ffffff;
	color: #0f172a;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
	box-sizing: border-box;
}

.hub-search-input::placeholder {
	color: #94a3b8;
}

.hub-search-input:focus {
	outline: none;
	border-color: var(--op-primary, #3dbf62);
	box-shadow: 0 0 0 3px rgba(61, 191, 98, 0.15);
}

.hub-search-kbd {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Fade out shortcut badge when input has focus or text */
.hub-search-box:focus-within .hub-search-kbd,
.hub-search-box.has-value .hub-search-kbd {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) scale(0.85);
}

.hub-search-clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #94a3b8;
	font-size: 17px;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0;
	transition: all 0.15s ease;
}
.hub-search-clear:hover {
	color: #0f172a;
	background: #f1f5f9;
}
.hub-search-clear:focus-visible {
	outline: 2px solid var(--op-primary, #3dbf62);
	outline-offset: 1px;
}

/* Province Tabs */
.hub-tabs-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.hub-tabs-scroll::-webkit-scrollbar {
	height: 4px;
}
.hub-tabs-scroll::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.hub-tabs {
	display: inline-flex;
	gap: 6px;
	min-width: max-content;
}

.hub-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: 18px;
	font-size: 13px;
	font-weight: 600;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	color: #475569;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
	box-sizing: border-box;
}

.hub-tab-btn:hover {
	background: #e2e8f0;
	color: #0f172a;
}
.hub-tab-btn:active {
	transform: scale(0.97);
}
.hub-tab-btn:focus-visible {
	outline: 2px solid var(--op-primary, #3dbf62);
	outline-offset: 2px;
}

.hub-tab-btn.active {
	background: var(--op-primary, #3dbf62);
	border-color: var(--op-primary, #3dbf62);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(61, 191, 98, 0.35);
}

.hub-tab-btn .tab-count {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.08);
}
.hub-tab-btn.active .tab-count {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* 3. ★ Favorite Regions Bar
   ========================================================================== */
.hub-fav-section {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fffdf5;
	border: 1px solid #fef08a;
	border-radius: 12px;
	padding: 8px 16px;
	margin-bottom: 20px;
	min-height: 48px;
	box-sizing: border-box;
}

.fav-section-head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	flex-shrink: 0;
}

.fav-head-title {
	font-size: 13px;
	font-weight: 700;
	color: #854d0e;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.fav-head-sub {
	font-size: 11.5px;
	color: #a16207;
	white-space: nowrap;
}

.text-gold {
	color: #eab308;
}

.fav-chip-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1;
}

.fav-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	min-height: 28px;
	background: #ffffff;
	border: 1px solid #fde047;
	border-radius: 14px;
	color: #713f12;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.15s ease;
	box-shadow: 0 1px 3px rgba(234, 179, 8, 0.12);
	box-sizing: border-box;
}

.fav-chip:hover {
	background: #fef9c3;
	color: #451a03;
	text-decoration: none;
	transform: translateY(-1px);
}
.fav-chip:active {
	transform: scale(0.97);
}
.fav-chip:focus-visible {
	outline: 2px solid #eab308;
	outline-offset: 1px;
}

.fav-chip-count {
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 8px;
	background: #fef08a;
	color: #854d0e;
}

/* 4. HOT Popular Regions Spotlight
   ========================================================================== */
.hub-hot-section {
	margin-bottom: 22px;
}

.hot-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.hot-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 700;
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	padding: 2.5px 9px;
	border-radius: 12px;
}

.hot-head-sub {
	font-size: 12px;
	color: #64748b;
}

.hot-card-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

/* Slim & Compact HOT Region Card (Inlined Rank Badge, Clean 2-Row Chip) */
.hot-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 9px 12px 8px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}
.hot-card:hover {
	border-color: #cbd5e1;
	transform: translateY(-1.5px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
	text-decoration: none;
}
.hot-card:active {
	transform: scale(0.98);
}
.hot-card:focus-visible {
	outline: 2px solid var(--op-primary, #3dbf62);
	outline-offset: 2px;
}

/* HOT Card Rank Badge: Inlined Micro Badge (Brand-Green for TOP 1, Neutral for 2~5) */
.hot-card-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1px 5.5px;
	font-size: 9.5px;
	font-weight: 800;
	border-radius: 4px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	flex-shrink: 0;
}
.hot-card-rank.rank-1 { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.hot-card-rank.rank-2,
.hot-card-rank.rank-3,
.hot-card-rank.rank-4,
.hot-card-rank.rank-5 { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

.hot-card-top {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}

.hot-region-name {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
}

.hot-region-text,
.hot-region-tag {
	font-size: 11.5px;
	font-weight: 500;
	color: #94a3b8;
	background: none;
	padding: 0;
	border-radius: 0;
}

.hot-card-metrics {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	letter-spacing: -0.02em;
	color: #64748b;
	margin-bottom: 0;
	padding-top: 0;
	border-top: none;
	white-space: nowrap;
	overflow: hidden;
}
.hot-metric-divider {
	color: #cbd5e1;
	font-size: 10px;
	user-select: none;
	flex-shrink: 0;
	margin: 0 1px;
}
.hot-metric-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
	flex-shrink: 0;
}
.hot-metric-item strong {
	color: #0f172a;
	font-weight: 700;
}
.hot-metric-item i {
	font-size: 10px;
	color: #94a3b8;
}

.hot-card-link {
	display: none;
}

/* 5. Region Cards Directory Grid
   ========================================================================== */
.hub-cards-section,
#hubGrid {
	scroll-margin-top: 80px;
}

.hub-cards-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 0;
	border-bottom: none;
}

.hub-cards-title-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hub-cards-title {
	font-size: 16.5px;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hub-counter {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--op-primary, #3dbf62);
}

.hub-fav-hint {
	display: none;
}

/* Single Unified Toolbar: Left Province Tabs + Right Sort Group in One Row */
.hub-cards-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.hub-cards-toolbar .hub-tabs-scroll {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
	padding-bottom: 2px;
}

.hub-cards-toolbar .hub-sort-group {
	flex-shrink: 0;
}

/* Sorting Toggle Group: 36px Height Harmonized with Province Tabs */
.hub-sort-group {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 36px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 2.5px;
	box-sizing: border-box;
}

.hub-sort-btn {
	background: none;
	border: none;
	height: 29px;
	line-height: 29px;
	padding: 0 11px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hub-sort-btn:hover {
	color: #0f172a;
}
.hub-sort-btn:active {
	transform: scale(0.97);
}
.hub-sort-btn:focus-visible {
	outline: 2px solid var(--op-primary, #3dbf62);
	outline-offset: 1px;
}

.hub-sort-btn.active {
	background: #ffffff;
	color: var(--op-primary, #3dbf62);
	font-weight: 700;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

/* Individual Region Card (Clean 2-Row Layout, No Visual Noise) */
.region-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 12px 14px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	gap: 7px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.region-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}

/* Pinned/Favorite Card Visual Differentiation (Pure White Background + Elegant Gold Border) */
.region-card[data-fav="1"] {
	border: 1.5px solid #fbbf24;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}
.region-card[data-fav="1"]:hover {
	border-color: #f59e0b;
	box-shadow: 0 4px 14px rgba(245, 158, 11, 0.14);
}

/* 1. Primary Region Header Row (Left: Star + Name + Group Text / Right: Post Count Pill) */
.card-main-row,
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.card-title-group {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* Ergonomic Star Button Hitbox */
.btn-fav-star {
	background: none;
	border: none;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	margin-left: -3px;
	padding: 0;
	cursor: pointer;
	color: #cbd5e1;
	font-size: 15px;
	line-height: 1;
	flex-shrink: 0;
	transition: all 0.15s ease;
}
.btn-fav-star:hover {
	color: #facc15;
	background: rgba(234, 179, 8, 0.1);
	transform: scale(1.08);
}
.btn-fav-star:active {
	transform: scale(0.95);
}
.btn-fav-star:focus-visible {
	outline: 2px solid #eab308;
	outline-offset: 1px;
}
.btn-fav-star.is-fav {
	color: #eab308;
	animation: starPulse 0.3s ease;
}

@keyframes starPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.region-name {
	font-size: 15.5px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.region-name a {
	color: #0f172a;
	text-decoration: none;
	transition: color 0.15s ease;
}
.region-name a:hover {
	color: var(--op-primary, #3dbf62);
}
.region-name a:focus-visible {
	outline: 2px solid var(--op-primary, #3dbf62);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Province text: Minimalist text without box containers */
.region-group-text,
.region-group-badge {
	font-size: 12px;
	font-weight: 500;
	color: #94a3b8;
	background: none;
	padding: 0;
	border-radius: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Single Point Color: Total Post Count Pill */
.region-total-pill {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 700;
	color: var(--op-primary, #3dbf62);
	background: rgba(61, 191, 98, 0.08);
	padding: 2.5px 8px;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: all 0.15s ease;
}
.region-total-pill strong {
	font-size: 13px;
	font-weight: 800;
}
.region-total-pill i {
	font-size: 10px;
	transition: transform 0.15s ease;
}
.region-total-pill:hover {
	background: rgba(61, 191, 98, 0.16);
	color: #239243;
	text-decoration: none;
}
.region-total-pill:hover i {
	transform: translateX(1.5px);
}

/* 2. Clean Inline Meta Row (Review · Coupon · Industry in Neutral Palette) */
.card-meta-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-top: 1px;
}

.card-meta-inline {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #64748b;
	flex-wrap: nowrap;
	overflow: hidden;
	white-space: nowrap;
}

.meta-inline-item {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #64748b;
	text-decoration: none;
	font-size: 12px;
	transition: color 0.15s ease;
}
.meta-inline-item i {
	font-size: 11px;
	color: #94a3b8;
	transition: color 0.15s ease;
}
.meta-inline-item span {
	font-weight: 600;
	color: #475569;
	transition: color 0.15s ease;
}
.meta-inline-item:hover {
	color: var(--op-primary, #3dbf62);
	text-decoration: none;
}
.meta-inline-item:hover i,
.meta-inline-item:hover span {
	color: var(--op-primary, #3dbf62);
}

.meta-sep {
	color: #cbd5e1;
	font-size: 11px;
	user-select: none;
	flex-shrink: 0;
	margin: 0 1px;
}

.meta-biz {
	color: #64748b;
	font-size: 11.5px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.meta-biz.has-tag-icon {
	display: inline-flex;
	align-items: center;
	gap: 3.5px;
}
.meta-biz.has-tag-icon i {
	font-size: 10px;
	color: #94a3b8;
}
.meta-biz.has-tag-icon span {
	font-weight: 500;
	color: #64748b;
}

/* Backward-compatible micro-badge styles */
.card-pills-group {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	min-width: 0;
}
.micro-badge {
	display: inline-flex;
	align-items: center;
	gap: 3.5px;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.4;
	transition: all 0.15s ease;
}
.micro-badge.badge-review { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; }
.micro-badge.badge-coupon { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.micro-badge.badge-neutral { background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; font-size: 10.5px; }

.btn-biz-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2.5px 7px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}
.biz-single-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.card-biz-drawer {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
}
.card-biz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.biz-chip {
	display: inline-flex;
	align-items: center;
	gap: 4.5px;
	padding: 3px 8px;
	min-height: 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 11.5px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.biz-chip:hover {
	background: #ffffff;
	border-color: var(--chip-color, #3dbf62);
	color: #0f172a;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
	transform: translateY(-1px);
}
.biz-chip:active {
	transform: scale(0.97);
}
.biz-chip:focus-visible {
	outline: 2px solid var(--chip-color, #3dbf62);
	outline-offset: 1px;
}

.biz-chip-dot {
	width: 5.5px;
	height: 5.5px;
	border-radius: 50%;
	display: inline-block;
}

.biz-chip-cnt {
	font-size: 10.5px;
	font-weight: 700;
	color: #64748b;
}

/* Backward-compatible Action Classes */
.card-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: auto;
}

.card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 34px;
	padding: 0 6px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.card-btn.is-empty {
	background: #fafafa;
	border: 1px dashed #cbd5e1;
	color: #94a3b8;
}
.card-btn.is-empty strong {
	color: #94a3b8;
	font-weight: 500;
}
.card-btn.is-empty:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
	color: #475569;
	text-decoration: none;
}

/* Empty Search Results State */
.hub-empty-state {
	text-align: center;
	padding: 50px 20px;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 16px;
	margin: 20px 0;
}

.hub-empty-icon {
	font-size: 36px;
	color: #94a3b8;
	margin-bottom: 12px;
}

.hub-empty-title {
	font-size: 17px;
	font-weight: 700;
	color: #334155;
	margin: 0 0 6px;
}

.hub-empty-desc {
	font-size: 13.5px;
	color: #64748b;
	margin: 0 0 16px;
}

/* ==========================================================================
   Full Dark Mode (html.theme-dark)
   ========================================================================== */

html.theme-dark .hub-search-input {
	background: #18181d;
	border-color: #272730;
	color: #f1f5f9;
}
html.theme-dark .hub-search-input::placeholder {
	color: #64748b;
}
html.theme-dark .hub-search-input:focus {
	border-color: var(--op-primary, #3dbf62);
}

html.theme-dark .hub-search-kbd {
	background: #272730;
	border-color: #3b3b48;
	color: #94a3b8;
}

html.theme-dark .hub-search-clear {
	color: #94a3b8;
}
html.theme-dark .hub-search-clear:hover {
	color: #f1f5f9;
	background: #272730;
}

html.theme-dark .hub-tab-btn {
	background: #18181d;
	border-color: #272730;
	color: #94a3b8;
}
html.theme-dark .hub-tab-btn:hover {
	background: #272730;
	color: #f1f5f9;
}
html.theme-dark .hub-tab-btn.active {
	background: var(--op-primary, #3dbf62);
	border-color: var(--op-primary, #3dbf62);
	color: #ffffff;
}

html.theme-dark .hub-fav-section {
	background: #221c10;
	border-color: #423010;
}
html.theme-dark .fav-head-title {
	color: #fef08a;
}
html.theme-dark .fav-head-sub {
	color: #ca8a04;
}
html.theme-dark .fav-chip {
	background: #2d2414;
	border-color: #5c4112;
	color: #fef08a;
}
html.theme-dark .fav-chip:hover {
	background: #3b2e18;
	color: #ffffff;
}
html.theme-dark .fav-chip-count {
	background: #423010;
	color: #fef08a;
}

html.theme-dark .hot-card {
	background: #18181d;
	border-color: #272730;
}
html.theme-dark .hot-card:hover {
	border-color: #3b3b48;
}
html.theme-dark .hot-card-rank.rank-1 { background: rgba(5, 150, 105, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
html.theme-dark .hot-card-rank.rank-2,
html.theme-dark .hot-card-rank.rank-3,
html.theme-dark .hot-card-rank.rank-4,
html.theme-dark .hot-card-rank.rank-5 { background: #22222a; color: #94a3b8; border: 1px solid #2e2e38; }

html.theme-dark .hot-region-name {
	color: #f1f5f9;
}
html.theme-dark .hot-region-text,
html.theme-dark .hot-region-tag {
	background: none;
	color: #64748b;
}
html.theme-dark .hot-card-metrics {
	border-top-color: #272730;
}
html.theme-dark .hot-metric-divider {
	color: #475569;
}
html.theme-dark .hot-card-metrics strong {
	color: #f1f5f9;
}
html.theme-dark .hot-badge {
	background: rgba(185, 28, 28, 0.15);
	border-color: rgba(185, 28, 28, 0.35);
	color: #f87171;
}

html.theme-dark .hub-cards-head {
	border-bottom-color: #272730;
}
html.theme-dark .hub-cards-title {
	color: #f1f5f9;
}
html.theme-dark .hub-fav-hint {
	color: #64748b;
}

html.theme-dark .hub-sort-group {
	background: #18181d;
	border-color: #272730;
}
html.theme-dark .hub-sort-btn {
	color: #94a3b8;
}
html.theme-dark .hub-sort-btn:hover {
	color: #f1f5f9;
}
html.theme-dark .hub-sort-btn.active {
	background: #272732;
	color: #34d399;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html.theme-dark .region-card {
	background: #18181d;
	border-color: #272730;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.theme-dark .region-card:hover {
	border-color: #3b3b48;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

html.theme-dark .region-card[data-fav="1"] {
	border-color: rgba(245, 158, 11, 0.55);
	background: #18181d;
	box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}
html.theme-dark .region-card[data-fav="1"]:hover {
	border-color: #fbbf24;
	box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18);
}

html.theme-dark .card-main-row,
html.theme-dark .card-header {
	border-bottom-color: #22222a;
}
html.theme-dark .btn-fav-star:hover {
	background: rgba(234, 179, 8, 0.15);
}
html.theme-dark .region-name a {
	color: #f1f5f9;
}
html.theme-dark .region-name a:hover {
	color: var(--op-primary, #3dbf62);
}
html.theme-dark .region-group-text,
html.theme-dark .region-group-badge {
	background: none;
	color: #64748b;
}
html.theme-dark .region-total-pill {
	color: #34d399;
	background: rgba(52, 211, 153, 0.12);
}
html.theme-dark .region-total-pill:hover {
	background: rgba(52, 211, 153, 0.22);
	color: #6ee7b7;
}

html.theme-dark .meta-inline-item {
	color: #94a3b8;
}
html.theme-dark .meta-inline-item i {
	color: #64748b;
}
html.theme-dark .meta-inline-item span {
	color: #cbd5e1;
}
html.theme-dark .meta-inline-item:hover,
html.theme-dark .meta-inline-item:hover i,
html.theme-dark .meta-inline-item:hover span {
	color: var(--op-primary, #3dbf62);
}
html.theme-dark .meta-sep {
	color: #3b3b48;
}
html.theme-dark .meta-biz {
	color: #94a3b8;
}
html.theme-dark .meta-biz.has-tag-icon i {
	color: #64748b;
}
html.theme-dark .meta-biz.has-tag-icon span {
	color: #94a3b8;
}

html.theme-dark .micro-badge.badge-review {
	background: rgba(194, 65, 12, 0.18);
	border-color: rgba(194, 65, 12, 0.35);
	color: #fb923c;
}
html.theme-dark .micro-badge.badge-review strong {
	color: #fdba74;
}
html.theme-dark .micro-badge.badge-review:hover {
	background: rgba(194, 65, 12, 0.28);
}

html.theme-dark .micro-badge.badge-coupon {
	background: rgba(5, 150, 105, 0.18);
	border-color: rgba(16, 185, 129, 0.35);
	color: #34d399;
}
html.theme-dark .micro-badge.badge-coupon strong {
	color: #6ee7b7;
}
html.theme-dark .micro-badge.badge-coupon:hover {
	background: rgba(5, 150, 105, 0.28);
}

html.theme-dark .micro-badge.badge-neutral {
	background: #22222a;
	border-color: #2e2e38;
	color: #94a3b8;
}

html.theme-dark .btn-biz-toggle {
	background: #22222a;
	border-color: #2e2e38;
	color: #94a3b8;
}
html.theme-dark .btn-biz-toggle i {
	color: #64748b;
}
html.theme-dark .btn-biz-toggle:hover {
	background: #2e2e38;
	color: #f1f5f9;
}
html.theme-dark .region-card.is-biz-open .btn-biz-toggle {
	background: #2e2e38;
	border-color: #3b3b48;
	color: #f1f5f9;
}

html.theme-dark .biz-single-chip {
	background: #22222a;
	border-color: #2e2e38;
	color: #cbd5e1;
}
html.theme-dark .biz-single-chip:hover {
	background: #272732;
	color: #ffffff;
}

html.theme-dark .card-biz-drawer {
	border-top-color: #272730;
}

html.theme-dark .biz-chip {
	background: #22222a;
	border-color: #2e2e38;
	color: #cbd5e1;
}
html.theme-dark .biz-chip:hover {
	background: #272732;
	color: #ffffff;
}

html.theme-dark .card-btn.btn-posting {
	background: rgba(29, 78, 216, 0.18);
	border-color: rgba(59, 130, 246, 0.35);
	color: #60a5fa;
}
html.theme-dark .card-btn.btn-posting:hover {
	background: rgba(29, 78, 216, 0.3);
	color: #93c5fd;
}

html.theme-dark .card-btn.btn-review {
	background: #22222a;
	border-color: #2e2e38;
	color: #94a3b8;
}
html.theme-dark .card-btn.btn-review.has-content {
	background: rgba(194, 65, 12, 0.18);
	border-color: rgba(194, 65, 12, 0.35);
	color: #fb923c;
}
html.theme-dark .card-btn.btn-review:hover {
	background: rgba(194, 65, 12, 0.28);
}

html.theme-dark .card-btn.btn-coupon {
	background: #22222a;
	border-color: #2e2e38;
	color: #94a3b8;
}
html.theme-dark .card-btn.btn-coupon.has-coupon {
	background: rgba(5, 150, 105, 0.18);
	border-color: rgba(16, 185, 129, 0.35);
	color: #34d399;
}
html.theme-dark .card-btn.btn-coupon:hover {
	background: rgba(5, 150, 105, 0.3);
}

html.theme-dark .card-btn.is-empty {
	background: #16161a;
	border: 1px dashed #33333f;
	color: #64748b;
}
html.theme-dark .card-btn.is-empty strong {
	color: #64748b;
}
html.theme-dark .card-btn.is-empty:hover {
	background: #1f1f26;
	border-color: #4b4b5a;
	color: #94a3b8;
}

html.theme-dark .hub-empty-state {
	background: #18181d;
	border-color: #272730;
}
html.theme-dark .hub-empty-title {
	color: #f1f5f9;
}
html.theme-dark .hub-empty-desc {
	color: #94a3b8;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1100px) {
	.hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hot-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.op-addrcat-hub {
		padding: 4px 6px 30px;
	}
	.hub-fav-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 10px 12px;
	}
	.fav-chip-list {
		width: 100%;
	}
	.hub-search-kbd {
		display: none;
	}
	.hub-cards-head {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.hub-cards-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.hub-cards-toolbar .hub-tabs-scroll {
		width: 100%;
	}
	.hub-cards-toolbar .hub-sort-group,
	.hub-sort-group {
		width: 100%;
		display: flex;
	}
	.hub-sort-btn {
		flex: 1;
		text-align: center;
		padding: 6px 0;
	}
	.btn-fav-star {
		width: 38px;
		height: 38px;
	}
	/* Mobile HOT Region Cards: Sleek Snap-Scroll Carousel */
	.hot-section-head {
		margin-bottom: 4px;
	}
	.hot-card-grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(190px, 72%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-top: 12px;
		padding-bottom: 8px;
		padding-left: 2px;
		padding-right: 2px;
		-webkit-overflow-scrolling: touch;
	}
	.hot-card-grid::-webkit-scrollbar {
		height: 4px;
	}
	.hot-card-grid::-webkit-scrollbar-thumb {
		background: #cbd5e1;
		border-radius: 4px;
	}
	html.theme-dark .hot-card-grid::-webkit-scrollbar-thumb {
		background: #3b3b48;
	}
	.hot-card {
		scroll-snap-align: start;
	}
	.hub-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.card-actions {
		grid-template-columns: repeat(3, 1fr);
	}
	.card-btn {
		height: 38px;
		font-size: 11.5px;
	}
}