/* Stackon AliExpress 추천 카드 */
.sac-box {
	--sac-accent: #ff4747;
	--sac-ink: #1f2328;
	--sac-sub: #6b7280;
	--sac-line: #e7e7ea;
	--sac-bg: #fff;
	margin: 2em 0;
	padding: 16px;
	border: 1px solid var(--sac-line);
	border-radius: 14px;
	background: var(--sac-bg);
	font-size: 15px;
	line-height: 1.45;
	color: var(--sac-ink);
	clear: both;
}
.sac-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sac-badge {
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
	padding: 3px 8px; border-radius: 999px;
	background: var(--sac-accent); color: #fff;
}
.sac-title { font-weight: 700; font-size: 16px; }

.sac-list { display: grid; gap: 12px; }
.sac-layout-grid .sac-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sac-box a.sac-card {
	display: flex; flex-direction: column;
	text-decoration: none !important; color: inherit !important;
	border: 1px solid var(--sac-line); border-radius: 12px; overflow: hidden;
	background: var(--sac-bg); transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: none !important;
}
.sac-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; }

.sac-thumb { position: relative; display: block; aspect-ratio: 1 / 1; background: #f6f6f7; }
.sac-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border-radius: 0 !important; }
.sac-off {
	position: absolute; top: 8px; left: 8px;
	background: var(--sac-accent); color: #fff; font-size: 12px; font-weight: 700;
	padding: 2px 7px; border-radius: 6px;
}
.sac-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.sac-name {
	font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 2.9em;
}
.sac-meta { display: flex; gap: 8px; font-size: 12px; color: var(--sac-sub); }
.sac-rate { color: #f59e0b; }
.sac-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sac-price strong { font-size: 17px; color: var(--sac-accent); }
.sac-price del { font-size: 12px; color: var(--sac-sub); }
.sac-btn {
	margin-top: auto; text-align: center; font-size: 13px; font-weight: 700;
	padding: 8px 10px; border-radius: 8px; background: var(--sac-ink); color: #fff;
}
.sac-card:hover .sac-btn { background: var(--sac-accent); }

/* 목록형 */
.sac-box a.sac-card { min-width: 0; }
.sac-layout-list a.sac-card { flex-direction: row; }
.sac-layout-list .sac-thumb { width: 120px; flex: 0 0 120px; aspect-ratio: auto; }
.sac-layout-list .sac-btn { align-self: flex-start; padding: 6px 14px; }

.sac-disclosure { margin: 12px 0 0 !important; font-size: 12px; color: var(--sac-sub); }

.sac-admin-note {
	margin: 1.5em 0; padding: 10px 12px; border: 1px dashed #d63638;
	border-radius: 8px; font-size: 13px; color: #b32d2e; background: #fff6f6;
}

@media (max-width: 520px) {
	.sac-layout-grid .sac-list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.sac-box { padding: 12px; }
	.sac-layout-list .sac-thumb { width: 96px; flex-basis: 96px; }
}

@media (prefers-color-scheme: dark) {
	.wp-dark-mode-active .sac-box,
	body.dark .sac-box { --sac-ink: #e6e6e6; --sac-line: #33363b; --sac-bg: #17181a; }
}

.sac-slot { min-height: 1px; }