:root {
    --vg-bg: #fffbf0;
    --vg-dark: #111111;
    --vg-white: #ffffff;
    --vg-accent: #7c3aed;
    --vg-pop: #10b981;
    --vg-border: 3px solid #111111;
    --vg-shadow: 5px 5px 0px #111111;
    --vg-shadow-hover: 8px 8px 0px #111111;
}
body { margin: 0; background: var(--vg-bg); color: var(--vg-dark); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.vg-header { background: var(--vg-white); border-bottom: var(--vg-border); }
.vg-nav-in { max-width: 1440px; margin: 0 auto; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; box-sizing: border-box; }
.vg-logo img { height: 28px; }
.vg-menu { display: flex; gap: 20px; }
.vg-menu a { text-decoration: none; color: var(--vg-dark); font-weight: 800; font-size: 14px; padding: 8px 16px; border: 2px solid transparent; transition: 0.2s; border-radius: 4px; }
.vg-menu a:hover { background: var(--vg-accent); color: var(--vg-white); border: 2px solid var(--vg-dark); box-shadow: 3px 3px 0px var(--vg-dark); transform: translate(-2px, -2px); }
.vg-container { max-width: 1440px; margin: 40px auto; padding: 0 24px; box-sizing: border-box; }
.vg-notice { background: var(--vg-pop); border: var(--vg-border); padding: 18px 24px; font-weight: 800; font-size: 14px; color: var(--vg-dark); box-shadow: var(--vg-shadow); margin-bottom: 40px; display: flex; align-items: center; gap: 15px; }
.vg-tag-notice { background: var(--vg-white); border: 2px solid var(--vg-dark); padding: 4px 10px; border-radius: 4px; font-size: 12px; }
.vg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; margin-bottom: 60px; }
.vg-card { background: var(--vg-white); border: var(--vg-border); box-shadow: var(--vg-shadow); padding: 16px; text-decoration: none; transition: 0.2s; display: flex; flex-direction: column; border-radius: 8px; position: relative; }
.vg-card:hover { transform: translate(-3px, -3px); box-shadow: var(--vg-shadow-hover); }
.vg-img-wrap { width: 100%; aspect-ratio: 1; border: 2px solid var(--vg-dark); background: #f4f4f5; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border-radius: 4px; }
.vg-img-wrap img { width: 60%; height: 60%; object-fit: contain; }
.vg-name { font-size: 14px; font-weight: 800; color: var(--vg-dark); height: 42px; line-height: 1.5; overflow: hidden; margin-bottom: 12px; }
.vg-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.vg-price { font-size: 20px; font-weight: 900; color: var(--vg-accent); }
.vg-sell { font-size: 11px; font-weight: 700; background: var(--vg-bg); border: 2px solid var(--vg-dark); padding: 2px 8px; border-radius: 4px; }
.vg-badge { position: absolute; top: -10px; right: -10px; background: var(--vg-accent); color: var(--vg-white); font-weight: 900; font-size: 11px; padding: 6px 12px; border: var(--vg-border); box-shadow: 2px 2px 0px var(--vg-dark); transform: rotate(5deg); }
.vg-detail-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.vg-box { background: var(--vg-white); border: var(--vg-border); box-shadow: var(--vg-shadow); padding: 40px; border-radius: 12px; }
.vg-h1 { font-size: 28px; font-weight: 900; margin: 0 0 24px 0; border-bottom: var(--vg-border); padding-bottom: 16px; }
.vg-input { width: 100%; height: 52px; background: var(--vg-white); border: var(--vg-border); box-shadow: 3px 3px 0px var(--vg-dark); padding: 0 16px; font-size: 15px; font-weight: 700; outline: none; box-sizing: border-box; transition: 0.2s; border-radius: 6px; }
.vg-input:focus { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px var(--vg-dark); border-color: var(--vg-accent); }
.vg-label { display: block; font-size: 13px; font-weight: 900; margin-bottom: 10px; }
.vg-btn { width: 100%; height: 60px; background: var(--vg-accent); color: var(--vg-white); border: var(--vg-border); box-shadow: 4px 4px 0px var(--vg-dark); font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.2s; border-radius: 8px; margin-top: 24px; }
.vg-btn:hover { background: var(--vg-pop); transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--vg-dark); }
.vg-footer { background: var(--vg-white); border-top: var(--vg-border); padding: 40px 0; margin-top: 80px; text-align: center; font-weight: 800; font-size: 14px; }
@media (max-width: 1400px) { .vg-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 960px) { .vg-grid { grid-template-columns: repeat(3, 1fr); } .vg-detail-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .vg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }