/* 범용 button 스타일을 이 버튼에서만 무력화하고 새로 정의합니다 */
#scrollTopBtn {
    /* 1. 고정 위치 및 기본 크기 */
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px !important;  /* 기존 템플릿의 크기 강제 무시 */
    height: 48px !important; /* 기존 템플릿의 크기 강제 무시 */
    padding: 0 !important;   /* 기존 템플릿의 padding 2rem 제거 */
    
    /* 2. 모양 및 배경 설정 */
    border: none;
    border-radius: 50% !important;
    background: #1D232C !important; /* 템플릿 배경색 덮어쓰기 방지 */
    color: #ffffff !important;      /* 글자색(아이콘색)을 흰색으로 고정 */
    
    /* 3. 중앙 정렬 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: normal !important; /* 기존 line-height 3rem 제거 */
    
    /* 4. 애니메이션 및 기타 */
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background-color 0.2s ease-in-out;
}

/* 버튼이 노출될 때 */
#scrollTopBtn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 마우스를 올렸을 때 (배경색 변경) */
#scrollTopBtn:hover {
    background: #23B6EC !important;
}

/* 내부 SVG 아이콘 크기 제어 */
#scrollTopBtn svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
}

/* 내부 화살표 선 색상 강제 지정 */
#scrollTopBtn svg path {
    stroke: #ffffff !important;
}

/* 모바일 환경 대응 */
@media (max-width: 736px) {
    #scrollTopBtn {
        right: 1rem;
        bottom: 1rem;
        width: 44px !important;
        height: 44px !important;
    }
}