:root {
    --hz-bg: #fafaf9;
    --hz-surface: #ffffff;
    --hz-primary: #f97316;
    --hz-primary-hover: #ea580c;
    --hz-gradient: linear-gradient(135deg, #f97316 0%, #e11d48 100%);
    --hz-text-main: #1c1917;
    --hz-text-sub: #78716c;
    --hz-border: #f5f5f4;
    --hz-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
    --hz-shadow-hover: 0 30px 60px -15px rgba(249, 115, 22, 0.15);
    --hz-radius-card: 24px;
    --hz-radius-pill: 50px;
}
body { margin: 0; background: var(--hz-bg); color: var(--hz-text-main); font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; }
.hz-nav-spacer { padding: 25px 20px; background: var(--hz-bg); }
.hz-navbar { max-width: 1400px; margin: 0 auto; height: 72px; background: var(--hz-surface); border-radius: var(--hz-radius-pill); box-shadow: var(--hz-shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; border: 1px solid rgba(0,0,0,0.02); }
.hz-logo img { height: 26px; display: block; }
.hz-menu { display: flex; gap: 35px; }
.hz-menu a { text-decoration: none; color: var(--hz-text-main); font-weight: 600; font-size: 14px; transition: 0.2s; }
.hz-menu a:hover { color: var(--hz-primary); }
.hz-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.hz-notice { background: var(--hz-gradient); color: #fff; padding: 16px 24px; border-radius: var(--hz-radius-pill); margin-bottom: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 600; box-shadow: var(--hz-shadow-hover); }
.hz-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; margin-bottom: 60px; }
.hz-card { background: var(--hz-surface); border-radius: var(--hz-radius-card); padding: 16px; text-decoration: none; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid var(--hz-border); box-shadow: var(--hz-shadow); display: flex; flex-direction: column; }
.hz-card:hover { transform: translateY(-8px); border-color: #ffedd5; box-shadow: var(--hz-shadow-hover); }
.hz-img-wrap { width: 100%; aspect-ratio: 1; background: var(--hz-bg); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hz-img-wrap img { width: 65%; height: 65%; object-fit: contain; }
.hz-name { font-size: 14px; font-weight: 700; color: var(--hz-text-main); height: 42px; line-height: 1.5; overflow: hidden; margin-bottom: 16px; }
.hz-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.hz-price { color: var(--hz-primary); font-weight: 900; font-size: 18px; letter-spacing: -0.5px; }
.hz-sell { font-size: 11px; color: var(--hz-text-sub); font-weight: 600; background: var(--hz-bg); padding: 4px 10px; border-radius: var(--hz-radius-pill); }
.hz-detail-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; margin-bottom: 80px; }
.hz-box { background: var(--hz-surface); border-radius: var(--hz-radius-card); padding: 40px; box-shadow: var(--hz-shadow); border: 1px solid var(--hz-border); }
.hz-h1 { font-size: 32px; font-weight: 900; color: var(--hz-text-main); margin: 0 0 20px 0; letter-spacing: -1px; }
.hz-input { width: 100%; height: 56px; background: var(--hz-bg); border: 2px solid transparent; border-radius: var(--hz-radius-pill); padding: 0 24px; font-size: 15px; font-weight: 600; color: var(--hz-text-main); box-sizing: border-box; outline: none; transition: 0.3s; margin-top: 8px; }
.hz-input:focus { border-color: #fdba74; background: #fff; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); }
.hz-label { display: block; font-size: 13px; font-weight: 700; color: var(--hz-text-main); margin-left: 8px; }
.hz-btn { width: 100%; height: 60px; background: var(--hz-gradient); color: #fff; border: none; font-size: 16px; font-weight: 800; border-radius: var(--hz-radius-pill); cursor: pointer; transition: 0.3s; margin-top: 24px; box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3); }
.hz-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(225, 29, 72, 0.4); }
.hz-footer { background: var(--hz-surface); padding: 60px 0; text-align: center; border-top: 1px solid var(--hz-border); margin-top: 60px; }
@media (max-width: 1400px) { .hz-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .hz-grid { grid-template-columns: repeat(3, 1fr); } .hz-detail-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hz-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hz-nav-spacer { padding: 15px; } .hz-navbar { padding: 0 20px; } }