@charset "utf-8";

.list-nav { line-height:22px; margin-bottom:20px; }
.list-nav .page-nav { margin-top:4px; }
@media all and (max-width:460px) {
	.responsive .list-nav .page-nav { display:none; }
}

.list-category { margin-bottom:24px; }
.list-category ul { list-style:none; }
.list-category .active a, .list-category .selected a { color:#3b82f6; font-weight:700 !important; }

.list-sort { margin:10px 0px 20px; }
.list-sort ul { list-style:none; }
.list-sort .on { font-weight:700; color:#3b82f6 !important; }
.list-sort .pull-left a, .list-sort .pull-right a { display:inline-block; margin:0px 12px; font-size:13px; color:#64748b; transition:color 0.2s; }
.list-sort .pull-left a:hover, .list-sort .pull-right a:hover { color:#1e293b; text-decoration:none; }

.list-wrap { overflow:hidden; line-height:1.5; }
.list-wrap .item-row { float:left; }
.list-wrap .item-list {
	background:#fff;
	border-radius:16px;
	overflow:hidden;
	transition:transform 0.25s ease, box-shadow 0.25s ease;
	box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.list-wrap .item-list:hover {
	transform:translateY(-6px);
	box-shadow:0 12px 40px rgba(0,0,0,0.10);
}
.list-wrap .item-image { position:relative; overflow:hidden; }
.list-wrap .item-image .img-wrap { overflow:hidden; }
.list-wrap .item-image .img-item img {
	transition:transform 0.4s ease;
	width:100%;
	display:block;
}
.list-wrap .item-list:hover .img-item img {
	transform:scale(1.06);
}
.list-wrap .item-content { padding:18px 16px 22px; text-align:left; }
.list-wrap .item-star { overflow:hidden; letter-spacing:-1px; font-size:15px; line-height:1; height:18px; margin-bottom:6px; }
.list-wrap .item-name { overflow:hidden; }
.list-wrap .item-name a { color:#1e293b; text-decoration:none; }
.list-wrap .item-name b {
	display:block;
	font-size:15px;
	font-weight:600;
	line-height:1.4;
	margin-bottom:4px;
}
.list-wrap .item-text { font-size:13px; color:#94a3b8; line-height:1.5; margin-top:4px; }
.list-wrap .item-price { margin-top:12px; display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.list-wrap .item-price b { font-size:18px; font-weight:700; color:#1e293b; }
.list-wrap .item-price b i { font-size:13px; color:#94a3b8; }
.list-wrap .item-price strike { color:#cbd5e1; font-size:14px; font-weight:400; }
.list-wrap .item-details { margin-top:12px; display:flex; flex-wrap:wrap; gap:4px 12px; }
.list-wrap .item-sp {
	display:inline-flex; align-items:center; gap:4px;
	font-size:12px; padding:3px 10px; border-radius:20px; white-space:nowrap;
	background:#f1f5f9; color:#64748b;
}
.list-wrap .item-sp i { font-size:11px; }
.list-wrap .item-sp.red { background:#fef2f2; color:#ef4444; }
.list-wrap .item-sp.blue { background:#eff6ff; color:#3b82f6; }
.list-wrap .item-sp.gray { background:#f8fafc; color:#94a3b8; }
.list-wrap .item-sp.green { background:#f0fdf4; color:#22c55e; }
.list-wrap .item-sp.orangered { background:#fff7ed; color:#f97316; }

.list-wrap .label-cap {
	position:absolute; top:12px; left:12px; z-index:2;
	font-size:11px; font-weight:700; letter-spacing:0.5px;
	padding:4px 10px; border-radius:20px; text-transform:uppercase;
	background:linear-gradient(135deg, #ef4444, #f97316);
	color:#fff;
	box-shadow:0 2px 8px rgba(239,68,68,0.25);
}
.list-wrap .label-cap.bg-red { background:linear-gradient(135deg, #ef4444, #f97316); }
.list-wrap .label-cap.bg-navy { background:linear-gradient(135deg, #1e40af, #3b82f6); }
.list-wrap .label-cap.bg-color { background:linear-gradient(135deg, #7c3aed, #a855f7); }
.list-wrap .label-cap.bg-black { background:linear-gradient(135deg, #334155, #475569); }
.list-wrap .label-cap.bg-green { background:linear-gradient(135deg, #16a34a, #22c55e); }
.list-wrap .label-cap.bg-orangered { background:linear-gradient(135deg, #ea580c, #f97316); }

.list-wrap .label-tack { position:absolute; top:12px; right:12px; z-index:2; }

.list-wrap .img-overlay {
	position:absolute; inset:0; z-index:1;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,0,0,0.35); opacity:0;
	transition:opacity 0.3s ease;
}
.list-wrap .item-list:hover .img-overlay { opacity:1; }
.list-wrap .img-overlay .overlay-btn {
	display:inline-flex; align-items:center; gap:6px;
	padding:10px 22px; border-radius:30px;
	background:#fff; color:#1e293b; font-size:13px; font-weight:600;
	text-decoration:none; transition:background 0.2s;
}
.list-wrap .img-overlay .overlay-btn:hover { background:#f1f5f9; }

.list-wrap .item-heart {
	position:absolute; top:12px; right:12px; z-index:3;
	width:36px; height:36px; border-radius:50%;
	background:rgba(255,255,255,0.95);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; transition:all 0.2s;
	box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.list-wrap .item-heart:hover { transform:scale(1.1); }
.list-wrap .item-heart i { font-size:15px; color:#94a3b8; transition:color 0.2s; }
.list-wrap .item-heart:hover i { color:#ef4444; }
.list-wrap .item-heart.on i { color:#ef4444; }

.list-wrap .item-sns { margin-top:16px; display:flex; justify-content:center; gap:8px; }
.list-wrap .item-sns img { width:32px; border-radius:50%; opacity:0.7; transition:opacity 0.2s; }
.list-wrap .item-sns img:hover { opacity:1; }

.list-none { margin:0px 0px 15px; padding:100px 0px; text-align:center; color:#94a3b8; font-size:15px; }
.list-btn { margin:30px 0px; }
.list-page { margin-bottom:15px; }
.list-page .pagination { margin:0; }

@keyframes fadeInUp {
	from { opacity:0; transform:translateY(20px); }
	to { opacity:1; transform:translateY(0); }
}
.list-wrap .item-row { animation:fadeInUp 0.4s ease backwards; }