:root {
    /* [의도] 채팅창의 크기 값을 변수로 관리하여 유지보수를 편하게 함 */
    --chat-width: 500px;
    --chat-height: 600px;
    --chat-bottom: 20px;
    --chat-right: 20px;
}

#floating-chat-btn {
    position: fixed;
    bottom: 30px;    /* 바닥에서의 거리 */
    right: 30px;     /* 오른쪽에서의 거리 */
    width: 60px;
    height: 60px;
    background-color: #62B6FF;
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;   /* 최상단에 표시 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: transform 0.2s;
}

#floating-chat-btn:hover {
    transform: scale(1.1); /* 호버 시 살짝 커짐 */
}

/* [의도] iframe을 담는 틀의 위치와 크기 설정 */
#chat-frame-container {
    position: fixed;
    /* [수정 핵심] 버튼 높이(60px) + 버튼 여백(20px) + 추가 간격(10px) = 90px [cite: 2025-11-17] */
    bottom: 100px;    
    right: 20px;     /* 버튼과 수직 정렬 */
    width: 380px;    /* 모바일 가독성을 고려한 너비 [cite: 2025-11-17] */
    height: 600px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 10000;  /* 버튼보다는 한 단계 아래 [cite: 2025-11-17] */
    overflow: hidden;
    display: none;   /* 초기 상태는 숨김 [cite: 2025-11-17] */
}

/* [의도] 틀 내부의 iframe이 꽉 차도록 설정 */
#chat-iframe {
    width: 100%;
    height: 100%;
    border: none;               /* 기본 테두리 제거 */
}

@media (max-width: 480px) {
    #chat-frame-container {
        width: 90%;    /* 모바일에서는 화면의 90% 차지 */
        right: 5%;     /* 중앙 정렬 느낌 */
        height: 70%;   /* 세로 길이는 70% */
    }
}