/*
 * fixed-side-menu.css
 *
 * 이 파일은 웹 페이지의 오른쪽에 고정되어 표시되는 플로팅 메뉴 (견적서, 무료신청 등)의
 * 스타일을 정의합니다.
 */

/* CSS 변수 정의 */
:root {
    --fixed-menu-top: 300px;
    --fixed-menu-left-offset: 110px;
    --fixed-menu-z-index: 99999;
    --fixed-menu-width: 90px;
    --fixed-menu-padding: 15px 10px;
    --fixed-menu-bg-color: rgba(255, 255, 255, 0.95);
    --fixed-menu-border-radius: 10px;
    --fixed-menu-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    --fixed-menu-gap: 15px;
}

/* 기본 스타일 */
.fixed-side-menu {
    position: fixed;
    top: var(--fixed-menu-top);
    left: calc(100% - var(--fixed-menu-left-offset));
    z-index: var(--fixed-menu-z-index);
    width: var(--fixed-menu-width);
    padding: var(--fixed-menu-padding);
    background-color: var(--fixed-menu-bg-color);
    border-radius: var(--fixed-menu-border-radius);
    box-shadow: var(--fixed-menu-box-shadow);
    
    display: flex;
    flex-direction: column;
    gap: var(--fixed-menu-gap);
    align-items: center;
    
    cursor: default;
    pointer-events: auto;
}

/* JavaScript에서 사용할 상태 클래스들 */
.fixed-side-menu.visible {
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.fixed-side-menu.hidden {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* 개별 메뉴 항목 스타일 */
.side-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 견적서 버튼 */
.quotation-btn {
    padding: 15px 19px;
}

/* 무료신청 버튼 */
.free-application-btn {
    padding: 15px 12px;
}

/* TOP 버튼 */
.top-btn {
    padding: 15px 21px;
}

/* 메뉴 항목 내 아이콘 스타일 */
.side-menu-item i {
    font-size: 1.6rem;
    margin-bottom: 5px;
}

/* 메뉴 항목 내 텍스트 스타일 */
.side-menu-item span {
    white-space: nowrap;
}

/* 메뉴 항목 호버 시 스타일 */
.side-menu-item:hover {
    background-color: #f0f0f0;
    color: #00695C;
}

/* 태블릿/모바일에서 숨기기 */
@media (max-width: 1024px) {
    body .fixed-side-menu,
    body .fixed-side-menu.visible {
        display: none !important;
    }
}