/* ==================================================================
 *  제품 목록 (/product)  — ProductListContent.astro <style> 이식
 * ================================================================== */
.plist-hero { background: var(--gradient-hero); color: #fff; padding: 5rem var(--gutter) 4rem; }
.plist-hero-inner { max-width: var(--max-width); margin: 0 auto; text-align: center; }
.plist-hero .sec-index { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; color: #9fb4ff; margin-bottom: 1rem; }
.plist-hero h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.plist-lead { color: #c5cdf0; font-size: 1.05rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }

.plist-grid-wrap { max-width: var(--max-width); margin: 0 auto; padding: 4rem var(--gutter) 6rem; }
.plist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.plist-card { border: 1px solid #e8ebf2; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.6); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; }
.plist-card:hover { border-color: #c9d2f7; box-shadow: 0 20px 48px rgba(32,50,255,0.12); transform: translateY(-5px); text-decoration: none; }
.plist-img { aspect-ratio: 4/3; background: linear-gradient(135deg, #eef1f8, #dfe3ec); }
.plist-info { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.plist-badge { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--color-accent); margin-bottom: 0.6rem; }
.plist-name { font-size: 1.25rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.plist-tagline { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.plist-view { font-weight: 700; font-size: 0.88rem; color: var(--color-accent); }

.plist-legacy { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2rem 2.5rem; background: var(--color-surface); border: 1px solid #e8ebf2; border-radius: 20px; transition: border-color 0.2s; }
.plist-legacy:hover { border-color: var(--color-accent); text-decoration: none; }
.plist-legacy-text h3 { font-size: 1.2rem; margin-bottom: 0.4rem; color: var(--color-text); }
.plist-legacy-text p { color: var(--color-muted); font-size: 0.92rem; }
.plist-legacy-btn { flex-shrink: 0; padding: 0.85rem 1.75rem; background: var(--color-accent); color: #fff; border-radius: 100px; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

@media (max-width: 900px) { .plist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .plist-grid { grid-template-columns: 1fr; }
    .plist-legacy { flex-direction: column; align-items: flex-start; }
}