@charset "utf-8";

/* 기본 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #f0f0f0; } /* 배경색 */

/* 메인 컨테이너: 모바일 뷰 유지 (PC에서 너무 커짐 방지) */
.landing-wrap {
    max-width: 720px; /* PC에서 보여질 최대 너비 */
    margin: 0 auto;   /* 중앙 정렬 */
    background-color: #fff;
    position: relative;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* (옵션) PC에서 볼 때 입체감 추가 */
}

/* 이미지 스타일: 가로 꽉 차게, 하단 여백 제거 */
.landing-wrap img {
    display: block;
    width: 100%;
    /* height: auto; */
    border: 0;
}

/* 이미지 내 특정 영역 링크 걸기 (상대 좌표) */
.img-box {
    position: relative; /* 자식 요소(링크)의 기준점 */
    width: 100%;
}

/* 투명 링크 박스 공통 스타일 */
.link-area {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
    /* background: rgba(255, 0, 0, 0.3); */ /* 테스트용: 붉은색 반투명 (작업 후 삭제) */
}

/* 하단 고정 버튼 스타일 (수정됨) */
#abs-sticky {
    position: fixed;
    bottom: 20px;         /* [수정] 바닥에서 20px 띄우기 */
    left: 0; 
    right: 0;
    margin: 0 auto;
    width: calc(100% - 40px); /* [선택] 양옆에도 여백을 주고 싶으면 너비 조정 (100%에서 양쪽 20px씩 뺌) */
    max-width: 700px;     /* [선택] 너비를 줄였으니 max-width도 살짝 조정 */
    
    z-index: 9999;
    line-height: 0;
    
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out; /* 움직임도 부드럽게 */
    opacity: 1;
    pointer-events: auto;
}

/* 푸터를 만났을 때 적용될 클래스 (추가해주세요) */
#abs-sticky.fade-out {
    opacity: 0; /* 투명해짐 */
    pointer-events: none; /* 안 보일 땐 클릭 안 되게 설정 */
}
/* GIF 위치 잡기 스타일 */
    .gif-bubble {
        position: absolute; /* 겹치기 필수 설정 */
        z-index: 2;         /* 배경보다 위에 오도록 설정 */
        
        /* 아래 수치를 조절해서 말풍선 위치를 맞추세요 */
        top: 7.1%;    /* 위에서 얼마나 떨어질지 (예: 10%) */
        left: 15%;   /* 왼쪽에서 얼마나 떨어질지 (예: 50%) */
        width: 70%!important;  /* GIF 이미지 크기 (화면 너비 대비 비율) */
        
        /* (선택사항) 정확히 가로 중앙에 놓고 싶다면 아래 속성 추가 */
        /* transform: translateX(-50%); */
        margin: 0 auto;
    }
	
/* 1. 퀵메뉴 공통 기본 설정 */
.quick-menu {
    position: fixed;
    z-index: 9999;
    transition: all 0.3s ease;
}

.quick-menu a {
    display: block;
}

.quick-menu img {
    display: block;
    width: 100%;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* 그림자 효과 */
}

/* -----------------------------------------------------
   2. 🖥️ PC 화면 설정 (핵심 수정 부분)
   - 화면 정중앙(left: 50%)을 기준으로 잡고
   - margin-left로 컨텐츠 크기만큼 옆으로 밉니다.
----------------------------------------------------- */
@media (min-width: 769px) {
    .quick-menu {
        top: 50%;          /* 위아래 중앙 */
        left: 55%;         /* 좌우 중앙 (일단 화면 한가운데 둡니다) */
        
        /* ⭐중요: 컨텐츠 너비의 절반(약 320px) + 여백(20px) = 340px 만큼 오른쪽으로 이동 */
        margin-left: 340px; 
        
        transform: translateY(-50%); /* 수직 중앙 정렬 보정 */
        width: 250px;      /* PC 버튼 크기 */
		        /* 둥둥 떠다니는 효과 */
        animation: floatMotion 2s infinite ease-in-out;
    }
	@keyframes floatMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
}

/* -----------------------------------------------------
   3. 📱 모바일 화면 설정 (기존 유지)
   - 모바일은 그냥 오른쪽 구석이 보기 좋습니다.
----------------------------------------------------- */
@media (max-width: 768px) {
    .quick-menu {
        right: -20px;       /* 오른쪽 벽에서 15px */
        bottom: 100px;     /* 하단 전화바 위에 위치 */
        width: 175px;      /* 모바일 버튼 크기 */
        left: auto;        /* PC 설정 초기화 */
        margin-left: 0;    /* PC 설정 초기화 */
        
        /* 둥둥 떠다니는 효과 */
        animation: floatMotion 2s infinite ease-in-out;
    }
}

@keyframes floatMotion {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}