/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


<style>
/* 사이드 퀵메뉴 컨테이너 */
.side-quick-menu {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 메뉴 리스트 */
.side-quick-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 헤더 (QUICK MENU) */
.side-quick-menu .sqm-header {
    background: #1a1a4e;
    color: #fff;
    text-align: center;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.4;
    border-radius: 8px 0 0 0;
}

.side-quick-menu .sqm-header span {
    display: block;
}

/* 각 메뉴 아이템 */
.side-quick-menu .sqm-item {
    background: #1a1a4e;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.side-quick-menu .sqm-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 70px;
}

.side-quick-menu .sqm-item a:hover {
    background: #2d2d7a;
}

/* 아이콘 */
.side-quick-menu .sqm-icon {
    font-size: 20px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.side-quick-menu .sqm-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.side-quick-menu .sqm-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

/* 텍스트 라벨 */
.side-quick-menu .sqm-label {
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
}

.side-quick-menu .sqm-sublabel {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

/* TALK 뱃지 스타일 */
.side-quick-menu .sqm-badge {
    background: #fff;
    color: #1a1a4e;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 5px;
}

/* blog 텍스트 스타일 */
.side-quick-menu .sqm-text-icon {
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 5px;
}

/* TOP 버튼 */
.side-quick-menu .sqm-top {
    background: #3366cc;
    border-radius: 0 0 0 8px;
}

.side-quick-menu .sqm-top a {
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
}

.side-quick-menu .sqm-top a:hover {
    background: #4477dd;
}

/* 반응형 - 모바일에서 크기 조정 */
@media (max-width: 768px) {
    .side-quick-menu {
        transform: translateY(-50%) scale(0.9);
        transform-origin: right center;
    }
}

/* 반응형 - 아주 작은 화면에서는 숨김 또는 더 작게 */
@media (max-width: 480px) {
    .side-quick-menu {
        transform: translateY(-50%) scale(0.8);
    }
}
</style>

<div class="side-quick-menu">
    <ul>
        <!-- 헤더 -->
        <li class="sqm-header">
            <span>QUICK</span>
            <span>MENU</span>
        </li>
        
        <!-- 전화 상담 -->
        <li class="sqm-item">
            <a href="tel:02-491-2590">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                    </svg>
                </span>
                <span class="sqm-label">전화 상담</span>
                <span class="sqm-sublabel">02-491-2590</span>
            </a>
        </li>
        
        <!-- 상담시간 -->
        <li class="sqm-item">
            <a href="#" onclick="return false;">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                    </svg>
                </span>
                <span class="sqm-label">상담시간</span>
                <span class="sqm-sublabel">9:00~18:00</span>
            </a>
        </li>
        
        <!-- 카톡문의 -->
        <li class="sqm-item">
            <a href="https://pf.kakao.com/YOUR_KAKAO_CHANNEL" target="_blank">
                <span class="sqm-badge">TALK</span>
                <span class="sqm-label">카톡문의</span>
            </a>
        </li>
        
        <!-- 네이버 톡톡 -->
        <li class="sqm-item">
            <a href="https://talk.naver.com/YOUR_NAVER_TALKTALK" target="_blank">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
                    </svg>
                </span>
                <span class="sqm-label">네이버 톡톡</span>
            </a>
        </li>
        
        <!-- 블로그 -->
        <li class="sqm-item">
            <a href="https://blog.naver.com/YOUR_BLOG" target="_blank">
                <span class="sqm-text-icon">blog</span>
                <span class="sqm-label">블로그</span>
            </a>
        </li>
        
        <!-- 유튜브 -->
        <li class="sqm-item">
            <a href="https://www.youtube.com/YOUR_CHANNEL" target="_blank">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
                    </svg>
                </span>
                <span class="sqm-label">유튜브</span>
            </a>
        </li>
        
        <!-- 온라인문의 -->
        <li class="sqm-item">
            <a href="/contact">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                </span>
                <span class="sqm-label">온라인문의</span>
            </a>
        </li>
        
        <!-- 고객센터 -->
        <li class="sqm-item">
            <a href="/customer-center">
                <span class="sqm-icon">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                    </svg>
                </span>
                <span class="sqm-label">고객센터</span>
            </a>
        </li>
        
        <!-- TOP 버튼 -->
        <li class="sqm-item sqm-top">
            <a href="#" onclick="window.scrollTo({top: 0, behavior: 'smooth'}); return false;">
                TOP
            </a>
        </li>
    </ul>
</div>

<script>
// TOP 버튼 - 페이지 상단으로 부드럽게 스크롤
document.querySelector('.sqm-top a').addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
</script>