:root {
    --vinyl-black: #0D0D0D;
    --vinyl-orange: #FF6B35;
    --vinyl-silver: #C0C0C0;
    --vinyl-kraft: #8B7355;
    --vinyl-groove: #1A1A1A;
    --font-title: 'Anton', sans-serif;
    --font-body: 'Noto Sans KR', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background: var(--vinyl-black);
    color: #EEE;
    line-height: 1.6;
    overflow-x: hidden;
}

.site-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    background: rgba(13, 13, 13, 0.95);
    border-bottom: 2px solid var(--vinyl-orange);
    transition: all 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 0 20px rgba(255, 107, 53, 0.2); }

.header-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between; height: 70px;
}

.logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.logo-vinyl { font-size: 1.5rem; color: var(--vinyl-orange); animation: spin 4s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.logo-text { font-family: var(--font-title); font-size: 1.5rem; color: #EEE; letter-spacing: 2px; }
.logo-text span { color: var(--vinyl-orange); }

.nav-menu { display: flex; gap: 2rem; list-style: none; }
.nav-menu a { font-family: var(--font-title); font-size: 1rem; color: #EEE; text-decoration: none; letter-spacing: 2px; transition: color 0.3s; }
.nav-menu a:hover { color: var(--vinyl-orange); }

.mobile-toggle { display: none; background: none; border: 1px solid var(--vinyl-orange); color: var(--vinyl-orange); font-size: 1.3rem; cursor: pointer; padding: 0.5rem 0.75rem; }
.mobile-nav { display: none; position: fixed; top: 70px; left: 0; width: 100%; background: rgba(13, 13, 13, 0.98); padding: 1.5rem 2rem; border-bottom: 2px solid var(--vinyl-orange); z-index: 999; }
.mobile-nav.active { display: block; }
.mobile-nav a { display: block; font-family: var(--font-title); color: #EEE; text-decoration: none; padding: 0.75rem 0; font-size: 1.1rem; letter-spacing: 2px; }

.hero-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem; }
.hero-content { text-align: center; }

.vinyl-disc {
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, #333 20%, #1A1A1A 21%, #222 40%, #1A1A1A 41%, #222 60%, #1A1A1A 61%, #222 80%, #1A1A1A 81%);
    margin: 0 auto 2rem; position: relative;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.vinyl-disc.spinning { animation: spin 3s linear infinite; }
.disc-groove { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); }
.disc-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: var(--vinyl-orange); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; }

.hero-title { font-family: var(--font-title); font-size: clamp(3rem, 8vw, 6rem); color: #EEE; letter-spacing: 5px; margin-bottom: 0.5rem; }
.hero-subtitle { font-size: 1rem; color: rgba(238,238,238,0.6); margin-bottom: 2rem; }

.btn-vinyl {
    display: inline-flex; align-items: center; gap: 0.75rem;
    padding: 1rem 2.5rem; border: 2px solid var(--vinyl-orange);
    color: var(--vinyl-orange); font-family: var(--font-title);
    font-size: 1.1rem; text-decoration: none; letter-spacing: 2px; transition: all 0.3s;
}
.btn-vinyl:hover { background: var(--vinyl-orange); color: #0D0D0D; }

.features-section { padding: 6rem 2rem; max-width: 1000px; margin: 0 auto; }
.section-title { font-family: var(--font-title); font-size: 2.5rem; color: #EEE; text-align: center; margin-bottom: 3rem; letter-spacing: 3px; }

.features-grid { display: flex; flex-direction: column; gap: 1rem; }
.feature-sleeve { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s; }
.feature-sleeve:hover { background: rgba(255, 107, 53, 0.05); padding-left: 2rem; }
.sleeve-number { font-family: var(--font-title); font-size: 2rem; color: var(--vinyl-orange); min-width: 50px; }
.sleeve-content { flex: 1; }
.sleeve-icon { font-size: 1.2rem; color: var(--vinyl-silver); margin-bottom: 0.3rem; display: inline-block; margin-right: 0.5rem; }
.sleeve-content h3 { font-family: var(--font-title); font-size: 1.2rem; color: #EEE; letter-spacing: 1px; display: inline; }
.sleeve-content p { font-size: 0.85rem; color: rgba(238,238,238,0.5); margin-top: 0.3rem; }

.stats-section { padding: 6rem 2rem; max-width: 1000px; margin: 0 auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.rpm-value { display: block; font-family: var(--font-title); font-size: 2.5rem; color: var(--vinyl-orange); }
.rpm-label { font-size: 0.8rem; color: rgba(238,238,238,0.5); letter-spacing: 2px; }

.site-footer { background: #0D0D0D; border-top: 2px solid var(--vinyl-orange); padding: 3rem 2rem; text-align: center; }
.footer-inner { max-width: 800px; margin: 0 auto; }
.footer-brand { font-family: var(--font-title); font-size: 1.5rem; color: #EEE; margin-bottom: 0.5rem; }
.footer-brand span { color: var(--vinyl-orange); }
.footer-desc { font-size: 0.85rem; color: rgba(238,238,238,0.5); margin-bottom: 1.5rem; }
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.footer-links a { font-family: var(--font-title); font-size: 0.9rem; color: rgba(238,238,238,0.6); text-decoration: none; letter-spacing: 1px; transition: color 0.3s; }
.footer-links a:hover { color: var(--vinyl-orange); }
.footer-copyright { font-size: 0.8rem; color: rgba(238,238,238,0.3); }

@media (max-width: 359px) { html { font-size: 13px; } }
@media (min-width: 360px) and (max-width: 767px) { html { font-size: 14px; } .nav-menu { display: none; } .mobile-toggle { display: block; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .vinyl-disc { width: 150px; height: 150px; } }
@media (min-width: 768px) and (max-width: 1023px) { html { font-size: 15px; } .nav-menu { display: none; } .mobile-toggle { display: block; } }
@media (min-width: 1024px) and (max-width: 1279px) { html { font-size: 15px; } }
@media (min-width: 1280px) and (max-width: 1919px) { html { font-size: 16px; } }
@media (min-width: 1920px) and (max-width: 2559px) { html { font-size: 17px; } }
@media (min-width: 2560px) and (max-width: 3839px) { html { font-size: 19px; } }
@media (min-width: 3840px) { html { font-size: 22px; } }