:root {
    --zn-bg: #e0e5ec;
    --zn-shadow-dark: #a3b1c6;
    --zn-shadow-light: #ffffff;
    --zn-accent: #4481eb;
    --zn-text: #4a5568;
    --zn-price: #e53e3e;
}
body { margin: 0; background: var(--zn-bg); color: var(--zn-text); font-family: 'Segoe UI', system-ui, sans-serif; }
.zn-header-fix { position: sticky; top: 0; z-index: 2000; padding: 15px 0; background: var(--zn-bg); }
.zn-nav { max-width: 1400px; margin: 0 auto; height: 60px; background: var(--zn-bg); border-radius: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; box-shadow: 9px 9px 16px var(--zn-shadow-dark), -9px -9px 16px var(--zn-shadow-light); }
.zn-logo img { height: 24px; }
.zn-menu { display: flex; gap: 40px; }
.zn-menu a { text-decoration: none; color: var(--zn-text); font-weight: 700; font-size: 14px; transition: 0.3s; }
.zn-menu a:hover { color: var(--zn-accent); }
.zn-container { max-width: 1440px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.zn-notice-box { padding: 20px; border-radius: 20px; background: var(--zn-bg); box-shadow: inset 6px 6px 12px var(--zn-shadow-dark), inset -6px -6px 12px var(--zn-shadow-light); margin-bottom: 40px; font-size: 13px; line-height: 1.6; }
.zn-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.zn-item { background: var(--zn-bg); border-radius: 25px; padding: 20px; text-decoration: none; box-shadow: 9px 9px 16px var(--zn-shadow-dark), -9px -9px 16px var(--zn-shadow-light); transition: 0.3s; position: relative; }
.zn-item:hover { box-shadow: inset 4px 4px 8px var(--zn-shadow-dark), inset -4px -4px 8px var(--zn-shadow-light); transform: scale(0.98); }
.zn-img-wrap { width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--zn-bg); box-shadow: inset 4px 4px 8px var(--zn-shadow-dark), inset -4px -4px 8px var(--zn-shadow-light); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.zn-img-wrap img { width: 60%; height: 60%; object-fit: contain; }
.zn-name { font-size: 13px; font-weight: 700; color: var(--zn-text); height: 38px; line-height: 1.4; overflow: hidden; margin-bottom: 15px; text-align: center; }
.zn-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 12px; }
.zn-price { color: var(--zn-price); font-weight: 900; font-size: 16px; }
.zn-sell { font-size: 10px; opacity: 0.6; }
.zn-detail-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; }
.zn-box { background: var(--zn-bg); border-radius: 30px; padding: 40px; box-shadow: 9px 9px 16px var(--zn-shadow-dark), -9px -9px 16px var(--zn-shadow-light); }
.zn-input { width: 100%; height: 50px; background: var(--zn-bg); border: none; border-radius: 15px; box-shadow: inset 4px 4px 8px var(--zn-shadow-dark), inset -4px -4px 8px var(--zn-shadow-light); padding: 0 20px; box-sizing: border-box; outline: none; margin-top: 10px; color: var(--zn-text); font-weight: 600; }
.zn-btn { width: 100%; height: 55px; background: var(--zn-bg); border: none; border-radius: 15px; box-shadow: 6px 6px 12px var(--zn-shadow-dark), -6px -6px 12px var(--zn-shadow-light); color: var(--zn-accent); font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.2s; margin-top: 25px; }
.zn-btn:active { box-shadow: inset 4px 4px 8px var(--zn-shadow-dark), inset -4px -4px 8px var(--zn-shadow-light); }
@media (max-width: 1200px) { .zn-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .zn-grid { grid-template-columns: repeat(2, 1fr); } .zn-detail-grid { grid-template-columns: 1fr; } }