/* ===================================================
   Layout - Dark Theme (main_new)
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
	--primary: #A78BFA;
	--primary-light: #C4B5FD;
	--primary-glow: rgba(167,139,250,.35);
	--accent: #22D3EE;
	--accent-glow: rgba(34,211,238,.25);
	--price-orange: #FB923C;
	--price-hot: #F43F5E;
	--bg-dark: #0a0a0f;
	--bg-card: #13131a;
	--bg-elevated: #1a1a24;
	--bg-surface: #22222e;
	--bg-input: #1e1e2a;
	--text-primary: #F1F5F9;
	--text-secondary: #94A3B8;
	--text-muted: #64748B;
	--border-dark: rgba(255,255,255,.06);
	--border-glow: rgba(167,139,250,.15);
	--shadow-sm: 0 2px 8px rgba(0,0,0,.3);
	--shadow-md: 0 4px 20px rgba(0,0,0,.4);
	--shadow-lg: 0 8px 40px rgba(0,0,0,.5);
	--shadow-glow: 0 0 30px rgba(167,139,250,.15);
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-full: 9999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: 'Outfit', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: var(--bg-dark);
	color: var(--text-primary);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 80px;
}
body.not_scroll { overflow: hidden; }

a { text-decoration: none; color: inherit; }

#container {
	min-height: 100vh;
	background: var(--bg-dark);
	position: relative;
}
#container::before {
	content: '';
	position: fixed; top: 0; left: 0; right: 0; height: 400px;
	background: radial-gradient(ellipse at 30% 0%, rgba(167,139,250,.12) 0%, transparent 60%),
				radial-gradient(ellipse at 70% 0%, rgba(34,211,238,.08) 0%, transparent 60%);
	pointer-events: none; z-index: 0;
}

/* --- Bottom Navigation --- */
#bottom_area {
	position: fixed; bottom: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(13,13,18,.85);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	border-top: 1px solid var(--border-dark);
	box-shadow: 0 -4px 30px rgba(0,0,0,.5);
	max-width: 750px;
	margin: 0 auto;
}
.bottom_box ul {
	display: flex; list-style: none;
	justify-content: space-around;
	align-items: center;
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}
.bottom_box ul li { flex: 1; text-align: center; }
.bottom_box ul li a {
	display: flex; flex-direction: column;
	align-items: center; gap: 3px;
	padding: 6px 0;
	color: var(--text-muted);
	font-size: 0.68rem; font-weight: 500;
	transition: all .2s;
}
.bottom_box ul li a .nav-icon { display: flex; align-items: center; justify-content: center; height: 26px; }
.bottom_box ul li a.active,
.bottom_box ul li a .nav-icon.on ~ .nav-label,
.bottom_box ul li a.on { color: var(--primary); filter: drop-shadow(0 0 6px var(--primary-glow)); }
.bottom_box ul li a .nav-icon.on { color: var(--primary); }
.nav-label { margin-top: 1px; }

/* --- DIM layer --- */
.dim-layer { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1500; }
.dim-layer .dimBg { width: 100%; height: 100%; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }

/* --- Search Popup --- */
.search_pop_area {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: var(--bg-dark);
	z-index: 2000;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	overflow-y: auto;
}
.search_pop_area.on { transform: translateY(0); }
.pop_searh_top {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	background: rgba(13,13,18,.9);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border-dark);
	position: sticky; top: 0; z-index: 10;
}
.pop_close {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg-surface);
	border: 1px solid var(--border-dark);
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
}
.pop_close img { filter: brightness(0) saturate(100%) invert(1); }
.pop_search_box {
	flex: 1;
	background: var(--bg-input);
	border: 1px solid var(--border-glow);
	border-radius: var(--radius-full);
	padding: 0 14px;
	display: flex; align-items: center;
	height: 42px;
	transition: border-color .2s;
}
.pop_search_box:focus-within { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); }
.pop_search_box form { display: flex; align-items: center; width: 100%; }
.pop_search_box input[type="text"] {
	flex: 1; border: none; background: transparent;
	font-size: 0.9rem; color: var(--text-primary);
	outline: none; padding: 8px 0;
}
.pop_search_box input[type="text"]::placeholder { color: var(--text-muted); }
.pop_search_box a { display: flex; align-items: center; flex-shrink: 0; }
.pop_search_box a img { filter: invert(1) brightness(.7); }
.research {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-dark);
}
.research a {
	display: flex; align-items: center; gap: 6px;
	color: var(--accent); font-size: 0.85rem; font-weight: 500;
}
.pin_search_area { padding: 16px; }
.pin_search_area .p_sub_title {
	font-size: 0.72rem; font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 10px;
}
.pin_search_area ul { list-style: none; }
.pin_search_area ul li {
	padding: 12px 0;
	font-size: 0.9rem;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-dark);
	cursor: pointer;
	transition: color .2s;
}
.pin_search_area ul li:hover { color: var(--text-primary); }
.keyword_tb li { cursor: pointer; }

/* --- Bootstrap dark overrides --- */
.card { background: var(--bg-card) !important; border: 1px solid var(--border-dark) !important; }
.text-muted { color: var(--text-muted) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.bg-white { background: var(--bg-card) !important; }
.bg-opacity-75 { --bs-bg-opacity: 1 !important; }
.border-bottom { border-bottom-color: var(--border-dark) !important; }
.border { border-color: var(--border-dark) !important; }

/* --- Shop cards --- */
.shop-card {
	transition: all .25s cubic-bezier(.4,0,.2,1);
	background: var(--bg-card) !important;
	border: 1px solid var(--border-dark) !important;
}
.shop-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-glow);
	border-color: var(--border-glow) !important;
}
.shop-card:active { transform: scale(0.97); }
.shop-card .card-img-top { width: 100%; height: 100%; object-fit: cover; }
.shop-card .card-body { background: var(--bg-card); }

/* --- Pagination --- */
.mi-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 24px 16px 32px;
	flex-wrap: wrap;
}
.mi-pagination .mi-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border: 1px solid var(--border-dark);
	border-radius: 10px;
	background: var(--bg-elevated);
	color: var(--text-secondary);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all .2s;
	text-decoration: none;
}
.mi-pagination .mi-page-btn:hover {
	border-color: var(--border-glow);
	color: var(--primary);
	background: rgba(167,139,250,.08);
	box-shadow: 0 0 12px var(--primary-glow);
}
.mi-pagination .mi-page-btn.active {
	background: linear-gradient(135deg, var(--primary), #8B5CF6);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(167,139,250,.4);
	pointer-events: none;
}
.mi-pagination .mi-page-btn.disabled {
	opacity: .3;
	pointer-events: none;
}
.mi-pagination .mi-page-dots {
	color: var(--text-muted);
	font-size: 0.8rem;
	padding: 0 4px;
	user-select: none;
}
.mi-page-info {
	text-align: center;
	font-size: 0.75rem;
	color: var(--text-muted);
	padding-bottom: 8px;
}

/* --- Responsive - PC --- */
@media (min-width: 768px) {
	#container { max-width: 1400px; margin: 0 auto; }
	#bottom_area { max-width: 1400px; }
}
@media (min-width: 992px) {
	body { padding-bottom: 0; }
	#bottom_area { display: none; }
}