* { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
            background: linear-gradient(135deg, #2d1b4e 0%, #3a2563 25%, #2a4a7c 50%, #6b3f8e 75%, #2d1b4e 100%);
            min-height: 100vh;
            color: white;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 마우스 따라다니는 빛 효과 */
        .mouse-glow {
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            transition: all 0.8s ease-out;
            z-index: 0;
            filter: blur(40px);
        }

        .container {
            position: relative;
            z-index: 10;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            flex: 1;
        }

        /* 헤더 */
        .header-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 28px;
            padding: 20px 30px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            flex-wrap: wrap;
            gap: 12px;
        }
        .header-card:hover { background: rgba(255,255,255,0.15); }

        .header-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: bold;
        }
        .header-title .sparkle { color: #a855f7; animation: pulse 2s infinite; }
        .header-title .header-logo-img { height: 45px; max-width: 200px; object-fit: contain; }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .header-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

        /* 헤더 반응형 */
        @media (max-width: 768px) {
            .header-card {
                padding: 16px 20px;
                border-radius: 20px;
                flex-direction: column;
                text-align: center;
            }
            .header-title {
                font-size: 18px;
                justify-content: center;
            }
            .header-buttons {
                width: 100%;
                justify-content: center;
            }
        }
        @media (max-width: 480px) {
            .header-title { font-size: 16px; }
            .btn { padding: 8px 16px; font-size: 13px; }
        }

        .btn {
            padding: 10px 24px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
        }
        .btn-outline {
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
        }
        .btn-outline:hover { background: rgba(255,255,255,0.3); }
        .btn-primary {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            color: white;
        }
        .btn-primary:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4); }
        .btn-white {
            background: white;
            color: #1f2937;
        }
        .btn-white:hover { background: #f3f4f6; transform: scale(1.05); }

        /* 그리드 레이아웃 */
        .main-grid {
            display: grid;
            grid-template-columns: 280px 1fr 280px;
            gap: 24px;
        }

        /* 반응형: 태블릿 */
        @media (max-width: 1200px) {
            .main-grid {
                grid-template-columns: 1fr 1fr;
            }
            .main-content {
                grid-column: 1 / -1;
                order: -1;
            }
            .left-sidebar { order: 1; }
            .right-sidebar { order: 2; }
        }

        /* 반응형: 모바일 */
        @media (max-width: 768px) {
            .container { padding: 12px; }
            .main-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .main-content { order: -1; }
            .left-sidebar { order: 1; }
            .right-sidebar { order: 2; }
        }

        /* 글래스 카드 */
        .glass-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 24px;
            padding: 24px;
            transition: all 0.3s;
        }
        .glass-card:hover { background: rgba(255,255,255,0.15); }
        .glass-card h3 {
            font-size: 18px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 공지사항 */
        .notice-item {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            transition: transform 0.2s;
            cursor: pointer;
        }
        .notice-item:hover { transform: translateX(4px); }
        .notice-item:last-child { border-bottom: none; }
        .notice-date { font-size: 12px; color: #9ca3af; }
        .notice-title { font-size: 14px; margin-top: 4px; }
        .notice-title:hover { color: #c084fc; }

        /* 빠른 기능 */
        .quick-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .quick-item:hover { background: rgba(255,255,255,0.1); }
        .quick-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .quick-arrow { margin-left: auto; color: #9ca3af; }

        /* 검색 섹션 */
        .search-section { margin-bottom: 24px; }
        .search-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        .search-tab {
            flex: 1;
            padding: 12px;
            border-radius: 16px;
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        .search-tab.active {
            background: linear-gradient(135deg, #a855f7 0%, #a855f7 100%);
        }
        .search-tab:not(.active) {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
        }
        .search-tab:not(.active):hover { background: rgba(255,255,255,0.2); }

        .search-input {
            width: 100%;
            padding: 14px 18px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 15px;
            transition: all 0.3s;
        }
        .search-input::placeholder { color: #9ca3af; }
        .search-input:focus {
            outline: none;
            background: rgba(255,255,255,0.15);
            border-color: #a855f7;
        }
        /* 검색 반응형 */
        @media (max-width: 576px) {
            .search-tabs { gap: 8px; }
            .search-tab { padding: 10px 8px; font-size: 13px; }
            .search-input { padding: 12px 14px; font-size: 14px; }
        }

        /* 대행 서비스 카드 */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }
        @media (max-width: 992px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 576px) {
            .services-grid { grid-template-columns: 1fr; gap: 12px; }
        }

        .service-card {
            border-radius: 28px;
            padding: 32px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            text-decoration: none;
            color: white;
            display: block;
        }
        .service-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        .service-card.purple { background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%); }
        .service-card.pink { background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%); }
        .service-card.cyan { background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); }

        .service-icon {
            font-size: 48px;
            margin-bottom: 16px;
            transition: transform 0.3s;
        }
        .service-card:hover .service-icon { transform: scale(1.25); }
        .service-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; }
        .service-desc { font-size: 14px; opacity: 0.9; white-space: pre-line; margin-bottom: 16px; }
        /* 서비스 카드 반응형 */
        @media (max-width: 576px) {
            .service-card {
                padding: 24px 16px;
                border-radius: 20px;
            }
            .service-icon { font-size: 36px; margin-bottom: 12px; }
            .service-title { font-size: 18px; }
            .service-desc { font-size: 13px; margin-bottom: 12px; }
            .service-card .btn { padding: 8px 16px; font-size: 13px; }
        }

        /* 고급 기능 */
        .advanced-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        @media (max-width: 992px) {
            .advanced-grid { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 768px) {
            .advanced-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        }
        @media (max-width: 480px) {
            .advanced-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .advanced-card { padding: 12px; }
            .advanced-icon { font-size: 20px; }
            .advanced-title { font-size: 12px; }
            .advanced-desc { font-size: 10px; }
        }
        .advanced-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 16px;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .advanced-card:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }
        .advanced-icon { font-size: 24px; margin-bottom: 8px; }
        .advanced-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .advanced-desc { font-size: 11px; color: #9ca3af; }

        /* 추가 서비스 */
        .extra-services {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        @media (max-width: 992px) {
            .extra-services { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 576px) {
            .extra-services { grid-template-columns: 1fr; gap: 12px; }
            .extra-card { padding: 16px; }
            .extra-icon { font-size: 28px; }
        }
        .extra-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .extra-card:hover { background: rgba(255,255,255,0.15); transform: scale(1.05); }
        .extra-icon { font-size: 32px; margin-bottom: 12px; }
        .extra-label { font-size: 14px; font-weight: 600; }

        /* 우측 사이드바 */
        .stat-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
        }
        .stat-card:hover { background: rgba(255,255,255,0.15); }
        .stat-icon { font-size: 20px; }
        .stat-number {
            font-weight: bold;
            font-size: 14px;
            background: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .stat-label { font-size: 12px; color: #9ca3af; }

        /* HS Code 검색 */
        .hscode-section { margin-top: 24px; }
        .hscode-input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 14px;
            margin-bottom: 12px;
        }
        .hscode-input::placeholder { color: #9ca3af; }
        .hscode-input:focus { outline: none; border-color: #06b6d4; }
        .hscode-results {
            max-height: 200px;
            overflow-y: auto;
            display: none;
        }
        .hscode-results.show { display: block; }
        .hscode-item {
            padding: 10px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
            font-size: 13px;
        }
        .hscode-item:hover { background: rgba(255,255,255,0.1); }
        .hscode-code { color: #06b6d4; font-weight: bold; }

        /* 개인통관고유부호 검증 */
        .customs-section { margin-top: 24px; }
        .customs-row { display: flex; gap: 8px; margin-bottom: 12px; }
        .customs-row input { flex: 1; }
        .customs-result {
            padding: 12px;
            border-radius: 10px;
            font-size: 13px;
            display: none;
        }
        .customs-result.show { display: block; }
        .customs-result.success { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; }
        .customs-result.error { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; }

        /* 로그인 상태 */
        .user-card { margin-top: 24px; }
        .user-info { margin-bottom: 16px; }
        .user-label { font-size: 12px; color: #9ca3af; }
        .user-value { font-size: 14px; font-weight: 500; }

        /* 소셜 로그인 */
        .social-login-divider {
            display: flex;
            align-items: center;
            margin: 16px 0 12px;
            color: #6b7280;
            font-size: 12px;
        }
        .social-login-divider::before,
        .social-login-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        }
        .social-login-divider span {
            padding: 0 12px;
        }
        .social-login-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
        }
        .social-btn {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .social-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .social-btn.naver {
            background: #03C75A;
            color: white;
        }
        .social-btn.kakao {
            background: #FEE500;
            color: #000000;
        }
        .social-btn.google {
            background: #ffffff;
            color: #757575;
        }
        .social-btn.naver:hover { background: #02b351; }
        .social-btn.kakao:hover { background: #f5dc00; }
        .social-btn.google:hover { background: #f5f5f5; }

        /* 고객지원 */
        .support-card {
            margin-top: 24px;
            text-align: center;
        }
        .support-icon { font-size: 24px; animation: spin 3s linear infinite; }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 모달 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        .modal-overlay.show { display: flex; }
        .modal-content {
            background: linear-gradient(135deg, #2d1b4e 0%, #3a2563 100%);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 24px;
            padding: 32px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .modal-close {
            font-size: 28px;
            cursor: pointer;
            color: #9ca3af;
            transition: color 0.2s;
        }
        .modal-close:hover { color: white; }

        /* 배송비 계산기 모달 */
        .calc-form-group { margin-bottom: 16px; }
        .calc-label { display: block; font-size: 14px; margin-bottom: 8px; font-weight: 500; }
        .calc-input {
            width: 100%;
            padding: 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 14px;
        }
        .calc-input:focus { outline: none; border-color: #06b6d4; }
        .calc-result {
            margin-top: 20px;
            padding: 20px;
            flex: 1;
            background: rgba(6, 182, 212, 0.2);
            border: 1px solid #06b6d4;
            border-radius: 12px;
            display: none;
        }
        .calc-result.show { display: block; }
        .calc-total { font-size: 24px; font-weight: bold; color: #06b6d4; }

        /* 로그인 모달 */
        .login-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }
        .login-modal.show { display: flex; }
        .login-modal-content {
            background: linear-gradient(135deg, #2d1b4e 0%, #3a2563 100%);
            border: 1px solid rgba(255,255,255,0.2);
            padding: 32px;
            border-radius: 24px;
            max-width: 420px;
            width: 90%;
        }
        .login-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .login-modal-header h2 { font-size: 22px; }
        .login-modal-close {
            font-size: 28px;
            cursor: pointer;
            color: #9ca3af;
            transition: color 0.2s;
        }
        .login-modal-close:hover { color: #ef4444; }
        .login-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }
        .login-tab {
            flex: 1;
            padding: 12px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
            background: rgba(255,255,255,0.1);
            color: white;
        }
        .login-tab.active {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
        }
        .login-form-group {
            margin-bottom: 16px;
        }
        .login-form-group label {
            display: block;
            font-size: 14px;
            margin-bottom: 8px;
            color: #d1d5db;
        }
        .login-form-group input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 14px;
        }
        .login-form-group input:focus {
            outline: none;
            border-color: #a855f7;
            background: rgba(255,255,255,0.15);
        }
        .login-message {
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 16px;
            font-size: 14px;
        }
        .login-message.error {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid #ef4444;
            color: #fca5a5;
        }
        .login-message.success {
            background: rgba(16, 185, 129, 0.2);
            border: 1px solid #10b981;
            color: #6ee7b7;
        }

        /* 솔루션 미리보기 섹션 */
        .preview-section {
            margin-top: 40px;
            padding: 40px 0;
        }
        .preview-section h2 {
            text-align: center;
            font-size: 28px;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #c084fc 0%, #f472b6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .preview-section .subtitle {
            text-align: center;
            color: #9ca3af;
            margin-bottom: 32px;
            font-size: 15px;
        }
        .preview-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        @media (max-width: 1200px) {
            .preview-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .preview-grid { grid-template-columns: 1fr; }
        }
        .preview-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s;
        }
        .preview-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);
            border-color: #a855f7;
        }
        .preview-iframe-wrapper {
            width: 100%;
            height: 220px;
            overflow: hidden;
            position: relative;
            background: #1a1a2e;
        }
        .preview-iframe-wrapper iframe {
            width: 400%;
            height: 400%;
            transform: scale(0.25);
            transform-origin: top left;
            border: none;
            pointer-events: none;
        }
        .preview-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 10;
        }
        .preview-info {
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .preview-title {
            font-weight: 600;
            font-size: 15px;
        }
        .preview-badge {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .preview-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 10px;
            color: white;
            font-size: 13px;
            text-decoration: none;
            transition: all 0.2s;
        }
        .preview-btn:hover {
            background: rgba(255,255,255,0.2);
        }

        /* 솔루션 홍보 섹션 */
        .solution-section {
            margin-top: 60px;
            padding: 60px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .solution-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .solution-header h2 {
            font-size: 36px;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #f472b6 0%, #a855f7 50%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .solution-header p {
            color: #9ca3af;
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }

        /* 타사 vs 우리 비교 */
        .compare-section {
            margin-bottom: 60px;
        }
        .compare-section h3 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 30px;
        }
        .compare-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }
        @media (max-width: 768px) {
            .compare-grid { grid-template-columns: 1fr; }
        }
        .compare-card {
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        .compare-card.other {
            background: rgba(107, 114, 128, 0.2);
            border: 1px solid rgba(107, 114, 128, 0.3);
        }
        .compare-card.ours {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            border: 2px solid #a855f7;
        }
        .compare-card.ours::before {
            content: "RECOMMEND";
            position: absolute;
            top: 15px;
            right: -30px;
            background: linear-gradient(135deg, #a855f7, #ec4899);
            color: white;
            padding: 4px 40px;
            font-size: 10px;
            font-weight: bold;
            transform: rotate(45deg);
        }
        .compare-card h4 {
            font-size: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .compare-list {
            list-style: none;
        }
        .compare-list li {
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }
        .compare-list li:last-child { border-bottom: none; }
        .compare-list .icon-x { color: #ef4444; }
        .compare-list .icon-check { color: #10b981; }

        /* 주요 기능 */
        .features-section {
            margin-bottom: 60px;
        }
        .features-section h3 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 30px;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        @media (max-width: 1024px) {
            .features-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 600px) {
            .features-grid { grid-template-columns: 1fr; }
        }
        .feature-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 24px;
            text-align: center;
            transition: all 0.3s;
        }
        .feature-card:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-5px);
            border-color: #a855f7;
        }
        .feature-card .icon {
            font-size: 36px;
            margin-bottom: 12px;
        }
        .feature-card h4 {
            font-size: 15px;
            margin-bottom: 8px;
        }
        .feature-card p {
            font-size: 12px;
            color: #9ca3af;
        }

        /* 플랜 비교 */
        .plans-section {
            margin-bottom: 60px;
        }
        .plans-section h3 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 12px;
        }
        .plans-section .subtitle {
            text-align: center;
            color: #9ca3af;
            margin-bottom: 30px;
        }
        .plans-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }
        @media (max-width: 768px) {
            .plans-grid { grid-template-columns: 1fr; }
        }
        .plan-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 24px;
            padding: 32px;
            transition: all 0.3s;
        }
        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        .plan-card.featured {
            border: 2px solid #a855f7;
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
        }
        .plan-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        .plan-card:first-child .plan-badge {
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
        }
        .plan-card.featured .plan-badge {
            background: linear-gradient(135deg, #a855f7, #ec4899);
        }
        .plan-card h4 {
            font-size: 22px;
            margin-bottom: 8px;
        }
        .plan-card .plan-desc {
            color: #9ca3af;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .plan-features {
            list-style: none;
            margin-bottom: 24px;
        }
        .plan-features li {
            padding: 8px 0;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .plan-features li::before {
            content: "✓";
            color: #10b981;
            font-weight: bold;
        }
        .plan-card .btn-plan {
            width: 100%;
            padding: 14px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            text-align: center;
            display: block;
            text-decoration: none;
        }
        .plan-card:first-child .btn-plan {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
        }
        .plan-card:first-child .btn-plan:hover {
            background: rgba(255,255,255,0.2);
        }
        .plan-card.featured .btn-plan {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            color: white;
        }
        .plan-card.featured .btn-plan:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
        }

        /* 문의 섹션 */
        .contact-section {
            text-align: center;
            padding: 40px;
            backdrop-filter: blur(20px);
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 24px;
        }
        .contact-section h3 {
            font-size: 24px;
            margin-bottom: 12px;
        }
        .contact-section p {
            color: #d1d5db;
            margin-bottom: 24px;
        }
        .contact-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .contact-buttons .btn-contact {
            padding: 14px 32px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-contact.primary {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            color: white;
            border: none;
        }
        .btn-contact.primary:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
        }
        .btn-contact.secondary {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
        }
        .btn-contact.secondary:hover {
            background: rgba(255,255,255,0.2);
        }

        /* 시스템 구조 섹션 */
        .structure-section {
            margin-bottom: 60px;
        }
        .structure-section h3 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 12px;
        }
        .structure-section .subtitle {
            text-align: center;
            color: #9ca3af;
            margin-bottom: 30px;
        }
        .structure-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 30px;
        }
        .structure-tab {
            padding: 12px 24px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .structure-tab.active {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            border-color: transparent;
        }
        .structure-tab:hover:not(.active) {
            background: rgba(255,255,255,0.15);
        }
        .structure-content {
            display: none;
        }
        .structure-content.active {
            display: block;
        }

        /* 구조도 */
        .hierarchy-chart {
            max-width: 800px;
            margin: 0 auto 30px;
        }
        .hierarchy-level {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }
        .hierarchy-level::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            width: 2px;
            height: 15px;
            background: rgba(168, 85, 247, 0.5);
        }
        .hierarchy-level:last-child::after {
            display: none;
        }
        .hierarchy-box {
            padding: 16px 32px;
            border-radius: 12px;
            text-align: center;
            font-weight: 600;
            position: relative;
        }
        .hierarchy-box.super {
            background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
            font-size: 16px;
        }
        .hierarchy-box.agency {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
        }
        .hierarchy-box.customer {
            background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
        }
        .hierarchy-box.report {
            background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
        }
        .hierarchy-box small {
            display: block;
            font-weight: 400;
            opacity: 0.9;
            margin-top: 4px;
            font-size: 12px;
        }

        /* 권한 테이블 */
        .permission-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            overflow: hidden;
        }
        .permission-table th,
        .permission-table td {
            padding: 14px 16px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .permission-table th {
            background: rgba(168, 85, 247, 0.3);
            font-weight: 600;
            font-size: 14px;
        }
        .permission-table td {
            font-size: 13px;
        }
        .permission-table tr:last-child td {
            border-bottom: none;
        }
        .permission-table tr:hover td {
            background: rgba(255,255,255,0.05);
        }
        .permission-table .check {
            color: #10b981;
            font-weight: bold;
        }
        .permission-table .cross {
            color: #ef4444;
        }
        .permission-table .limited {
            color: #f59e0b;
        }

        /* 구조 설명 카드 */
        .structure-desc {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 30px;
        }
        @media (max-width: 768px) {
            .structure-desc { grid-template-columns: 1fr; }
        }
        .structure-desc-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 24px;
            text-align: center;
        }
        .structure-desc-card .icon {
            font-size: 32px;
            margin-bottom: 12px;
        }
        .structure-desc-card h5 {
            font-size: 15px;
            margin-bottom: 8px;
            color: #c084fc;
        }
        .structure-desc-card p {
            font-size: 13px;
            color: #9ca3af;
            line-height: 1.5;
        }

        /* 방법 비교 그리드 */
        .method-comparison {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: 30px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        @media (max-width: 768px) {
            .method-comparison { grid-template-columns: 1fr; }
        }
        .method-card {
            backdrop-filter: blur(20px);
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 28px;
        }
        .method-card h5 {
            font-size: 18px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .method-card ul {
            list-style: none;
            margin-bottom: 20px;
        }
        .method-card ul li {
            padding: 8px 0;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .method-card ul li::before {
            content: "•";
            color: #a855f7;
        }
        .method-card .pros {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 10px;
            padding: 12px;
            margin-top: 12px;
        }
        .method-card .pros h6 {
            color: #10b981;
            font-size: 13px;
            margin-bottom: 8px;
        }
        .method-card .pros p {
            font-size: 12px;
            color: #9ca3af;
        }

        /* 모드 전환 버튼 */
        .theme-toggle {
            width: auto;
            height: 40px;
            padding: 0 16px;
            border-radius: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        .theme-toggle:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        .theme-toggle .icon { font-size: 18px; }
        .theme-toggle .text { font-size: 12px; }

        /* 언어 선택 버튼 */
        .lang-buttons {
            display: flex;
            gap: 4px;
            background: rgba(255,255,255,0.1);
            padding: 4px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .lang-btn {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            background: transparent;
            text-decoration: none;
            overflow: hidden;
        }
        .lang-btn img {
            width: 24px;
            height: 18px;
            object-fit: cover;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .lang-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.1);
        }
        .lang-btn.active {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
            box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4);
        }
        body.light-mode .lang-buttons {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .lang-btn:hover {
            background: rgba(0,0,0,0.1);
        }

        /* ========== 라이트 모드 ========== */
        body.light-mode {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100%);
            color: #1e293b;
        }

        body.light-mode .mouse-glow {
            background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, rgba(59, 130, 246, 0.08) 50%, transparent 70%);
        }

        body.light-mode .header-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        body.light-mode .header-card:hover { background: rgba(255,255,255,0.95); }
        body.light-mode .header-title { color: #1e293b; }
        body.light-mode .header-title .sparkle { color: #7c3aed; }

        body.light-mode .btn-outline {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.15);
            color: #374151;
        }
        body.light-mode .btn-outline:hover { background: rgba(0,0,0,0.1); }

        body.light-mode .theme-toggle {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border: 2px solid rgba(0,0,0,0.1);
            color: white;
            box-shadow: 0 4px 15px rgba(30, 41, 59, 0.3);
        }
        body.light-mode .theme-toggle:hover {
            box-shadow: 0 6px 20px rgba(30, 41, 59, 0.4);
        }

        body.light-mode .glass-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        body.light-mode .glass-card:hover { background: rgba(255,255,255,0.95); }
        body.light-mode .glass-card h3 { color: #1e293b; }

        body.light-mode .notice-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
        body.light-mode .notice-date { color: #64748b; }
        body.light-mode .notice-title { color: #1e293b; }
        body.light-mode .notice-title:hover { color: #7c3aed; }

        body.light-mode .quick-item { color: #1e293b; }
        body.light-mode .quick-item:hover { background: rgba(0,0,0,0.05); }
        body.light-mode .quick-arrow { color: #94a3b8; }

        body.light-mode .search-tab:not(.active) {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.1);
            color: #374151;
        }
        body.light-mode .search-tab:not(.active):hover { background: rgba(0,0,0,0.08); }

        body.light-mode .search-input {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.15);
            color: #1e293b;
        }
        body.light-mode .search-input::placeholder { color: #94a3b8; }
        body.light-mode .search-input:focus {
            background: rgba(255,255,255,1);
            border-color: #7c3aed;
        }

        body.light-mode .service-card {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        body.light-mode .service-card:hover {
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        body.light-mode .advanced-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .advanced-card:hover { background: rgba(255,255,255,0.95); }
        body.light-mode .advanced-title { color: #1e293b; }
        body.light-mode .advanced-desc { color: #64748b; }

        body.light-mode .extra-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .extra-card:hover { background: rgba(255,255,255,0.95); }
        body.light-mode .extra-label { color: #1e293b; }

        body.light-mode .stat-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .stat-card:hover { background: rgba(255,255,255,0.95); }
        body.light-mode .stat-label { color: #64748b; }

        body.light-mode .hscode-input {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.15);
            color: #1e293b;
        }
        body.light-mode .hscode-input::placeholder { color: #94a3b8; }
        body.light-mode .hscode-input:focus { border-color: #06b6d4; background: white; }

        body.light-mode .hscode-item {
            border-bottom: 1px solid rgba(0,0,0,0.08);
            color: #1e293b;
        }
        body.light-mode .hscode-item:hover { background: rgba(0,0,0,0.05); }

        body.light-mode .user-label { color: #64748b; }
        body.light-mode .user-value { color: #1e293b; }

        body.light-mode .preview-section h2 { color: #1e293b; }
        body.light-mode .preview-section .subtitle { color: #64748b; }

        body.light-mode .preview-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .preview-card:hover {
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        body.light-mode .preview-title { color: #1e293b; }

        body.light-mode .solution-section {
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .solution-header h2,
        body.light-mode .compare-section h3,
        body.light-mode .features-section h3,
        body.light-mode .plans-section h3,
        body.light-mode .structure-section h3 { color: #1e293b; }
        body.light-mode .solution-header p,
        body.light-mode .plans-section .subtitle,
        body.light-mode .structure-section .subtitle { color: #64748b; }

        body.light-mode .compare-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .compare-card h4 { color: #1e293b; }
        body.light-mode .compare-list li {
            border-bottom: 1px solid rgba(0,0,0,0.08);
            color: #374151;
        }

        body.light-mode .feature-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .feature-card:hover { border-color: #7c3aed; }
        body.light-mode .feature-card h4 { color: #1e293b; }
        body.light-mode .feature-card p { color: #64748b; }

        body.light-mode .plan-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .plan-card h4 { color: #1e293b; }
        body.light-mode .plan-card .plan-desc { color: #64748b; }
        body.light-mode .plan-features li { color: #374151; }
        body.light-mode .plan-card:first-child .btn-plan {
            background: rgba(0,0,0,0.08);
            border: 1px solid rgba(0,0,0,0.15);
            color: #374151;
        }

        body.light-mode .structure-tab {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.1);
            color: #374151;
        }
        body.light-mode .structure-tab:hover:not(.active) { background: rgba(0,0,0,0.08); }

        body.light-mode .permission-table {
            background: rgba(255,255,255,0.9);
        }
        body.light-mode .permission-table th { background: rgba(124, 58, 237, 0.15); color: #1e293b; }
        body.light-mode .permission-table td { border-bottom: 1px solid rgba(0,0,0,0.08); color: #374151; }
        body.light-mode .permission-table tr:hover td { background: rgba(0,0,0,0.03); }

        body.light-mode .structure-desc-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .structure-desc-card h5 { color: #7c3aed; }
        body.light-mode .structure-desc-card p { color: #64748b; }

        body.light-mode .method-card {
            background: rgba(255,255,255,0.9);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .method-card h5 { color: #1e293b; }
        body.light-mode .method-card ul li { color: #374151; }
        body.light-mode .method-card .pros {
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        body.light-mode .method-card .pros p { color: #64748b; }

        body.light-mode .contact-section {
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
            border: 1px solid rgba(0,0,0,0.1);
        }
        body.light-mode .contact-section h3 { color: #1e293b; }
        body.light-mode .contact-section p { color: #64748b; }
        body.light-mode .btn-contact.secondary {
            background: rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.15);
            color: #374151;
        }