body { margin: 0; background-color: #1a0624; font-family: sans-serif; }
        .mixero-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 200px; background: #1a0624; border-bottom: 1px solid rgba(128, 0, 255, 0.3); position: sticky; top: 0; z-index: 1000; }
        .logo img { height: 50px; width: 50px; cursor: pointer; }
        .header-right { display: flex; align-items: center; gap: 20px; }     
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .nav-links { display: flex; gap: 40px; }
        .nav-links a { color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); user-select: none; -webkit-user-select: none; }
        .nav-links a:hover { color: #bf00ff; text-shadow: 0 0 10px #bf00ff; }
        .lang-select { background: rgba(26, 6, 36, 0.5); border: 1px solid rgba(191, 0, 255, 0.3); color: #ffffff; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; outline: none; transition: all 0.3s ease; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat: no-repeat; background-position-x: 85%; background-position-y: 50%; padding-right: 40px; user-select: none; -webkit-user-select: none; }
        
        /* 모바일 햄버거 메뉴 추가 스타일 */
        .menu-btn { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
        .menu-btn div { width: 25px; height: 3px; background-color: white; }

        .hero-section { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 20px; text-align: center; color: white; }
        .hero-logo { width: 300px; height: auto; margin-bottom: 20px; }
        .hero-text { max-width: 650px; font-size: 1.0em; line-height: 1.6; margin-bottom: 38px; white-space: pre-line; word-break: keep-all; }
        .button-group { display: flex; gap: 15px; }
        .btn-primary { background: #bf00ff; color: white; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: bold; cursor: pointer; }
        .btn-secondary { background: transparent; color: white; padding: 12px 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); text-decoration: none; cursor: pointer; }
        .features-section { padding: 60px 20px; display: flex; justify-content: center; }
        .features-container { position: relative; display: flex; justify-content: center; align-items: center; width: 1000px; height: 800px; }
        .orbit-ring { position: absolute; border: 1px dashed rgba(128, 0, 255, 0.5); border-radius: 50%; z-index: 1; }
        .ring-1 { width: 700px; height: 700px; } .ring-2 { width: 500px; height: 500px; }
        .center-character { width: 400px; height: auto; z-index: 2; position: relative; }
        .feature-box { position: absolute; width: 280px; background: rgba(26, 6, 36, 0.8); border: 1px solid rgba(128, 0, 255, 0.5); padding: 20px; border-radius: 15px; color: white; text-align: left; z-index: 3; }
        .feature-box h3 { color: #bf00ff; margin: 0 0 5px 0; font-size: 1.1em; }
        .feature-box p { font-size: 0.9em; margin: 0; opacity: 0.8; }
        .pos-1 { top: 100px; left: 100px; } .pos-2 { top: 100px; right: 100px; } .pos-3 { bottom: 100px; left: 100px; } .pos-4 { bottom: 100px; right: 100px; }
        .adv-section { padding: 80px 20px; color: white; max-width: 1000px; margin: auto; }
        .adv-title { text-align: center; margin-bottom: 80px; font-size: 2em; }
        .adv-grid-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 60px; }
        .adv-grid-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .adv-item { background: rgba(26, 6, 36, 0.6); border: 1px solid rgba(128, 0, 255, 0.3); padding: 20px; border-radius: 15px; text-align: center; }
        .adv-item img { width: 120px; height: 120px; margin-bottom: 40px; object-fit: contain; }
        .adv-item h4 { color: #bf00ff; margin: 10px 0; font-size: 1.1em; }
        .adv-item p { font-size: 0.8em !important; opacity: 0.8; }
        .how-section { padding: 80px 20px; color: white; max-width: 1000px; margin: auto; text-align: center; }
        .how-title { font-size: 2em; margin-bottom: 80px; }
        .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .how-item { background: rgba(26, 6, 36, 0.6); border: 1px solid rgba(128, 0, 255, 0.3); padding: 30px 20px 20px 20px; border-radius: 15px; position: relative; }
        .how-item img { width: 80px; height: 80px; margin-bottom: 15px; }
        .how-item h4 { color: #bf00ff; margin: 10px 0; font-size: 1.1em; }
        .how-item p { font-size: 0.8em !important; opacity: 0.8; }
        .step-num { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #bf00ff; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 2px solid #0d0013; }
        .faq-section { padding: 80px 20px; color: white; max-width: 800px; margin: auto; text-align: center; }
        .faq-title { margin-bottom: 80px; font-size: 2em; }
        .faq-img { width: 250px; height: 250px; margin-bottom: 60px; }
        .faq-item { border: 1px solid rgba(128, 0, 255, 0.3); border-radius: 10px; margin-bottom: 15px; background: rgba(26, 6, 36, 0.4); overflow: hidden; text-align: left; }
        .faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
        .faq-answer { padding: 0 20px; max-height: 0; transition: max-height 0.3s ease-out; color: #ccc; }
        .faq-answer p { padding-bottom: 20px; font-size: 0.8em; }
        .faq-icon { font-size: 20px; color: #bf00ff; }
        
        .footer-section { padding: 30px 300px; border-top: 1px solid rgba(128, 0, 255, 0.3); color: white; display: flex; flex-direction: column; gap: 30px; }
        .footer-main { display: flex; justify-content: space-between; align-items: flex-start; }
        .footer-left img { height: 30px; }
        .footer-links { display: flex; gap: 60px; }
        .footer-links h4 { color: white; margin-bottom: 10px; }
        .footer-links ul { list-style: none; padding: 0; }
        .footer-links li { margin-bottom: 8px; color: #aaa; cursor: pointer; }

        /* 반응형 미디어 쿼리 */
        @media (max-width: 900px) {
            .mixero-header { padding: 10px 20px; }
            .nav-links { display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #1a0624; flex-direction: column; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(191, 0, 255, 0.3); z-index: 999; }
            .nav-links.show { display: flex; }
            .menu-btn { display: flex; }
            .footer-section { padding: 30px 20px; }
            .footer-main { flex-direction: column; gap: 30px; }
            .footer-links { gap: 30px; }
        }
        @media (max-width: 900px) {
            .features-container { width: 100%; height: auto; flex-direction: column; gap: 20px; }
            .orbit-ring, .center-character { display: none; }
            .feature-box { position: static; width: 80%; }
            .adv-grid-top, .adv-grid-bottom, .how-grid { grid-template-columns: 1fr; }
        }

        html {
        scroll-behavior: smooth;
    }