@charset "utf-8";

/* 바텀 시트를 여는 버튼에 대한 예시 스타일 (필요에 따라 사용) */
.open-bottom-sheet-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 10px; /* 다른 요소와의 간격 */
}

/* 오버레이 스타일 */
.bottom-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000; /* 다른 요소들 위에 오도록 z-index 설정 */
}

.bottom-sheet-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* 바텀 시트 컨테이너 스타일 */
.bottom-sheet {
    position: fixed;
    /*top: 0;*/
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #2D2D35;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 1001; /* 오버레이보다 위에 오도록 z-index 설정 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 내부 컨텐츠가 넘칠 경우를 대비 */
}

.bottom-sheet.is-open {
    transform: translateY(0);
}

/* 드래그 중 애니메이션 제거를 위한 클래스 */
.bottom-sheet.no-transition {
    transition: none !important;
}

/* 드래그 핸들 스타일 */
.bottom-sheet__handle {
    padding: 20px 0; /* 터치 영역 확보 */
    text-align: center;
    cursor: grab; /* 드래그 가능함을 시각적으로 표시 */
    user-select: none; /* 드래그 중 텍스트 선택 방지 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    flex-shrink: 0; /* 내용이 많아져도 핸들 영역 크기 유지 */
    padding-bottom: 15%;
}

.bottom-sheet__handle-bar {
    width: 35%;
    height: 4px;
    background-color: #454553;
    border-radius: 10px;
    margin: auto; /* 핸들 중앙 정렬 */
}

/* 액션 버튼 영역 스타일 */
.bottom-sheet__actions {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid #eee; /* 상단 구분선 */
    flex-shrink: 0; /* 내용이 많아져도 액션 영역 크기 유지 */
}
.bottom-sheet__header { display: flex; justify-content: space-between; margin-bottom: 2vh; padding: 0 8vw; }

.bottom-sheet__title { font-family: 'GangwonEduPower', sans-serif; color: #fff; font-weight: 500; font-size: 1.15rem; font-style: italic; }
.bottom-sheet__close {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
}
.bottom-sheet__close-img { width: 15px; height: auto; }

/* 내용 영역 스타일 */
.bottom-sheet__content {
/*    overflow-y: auto; !* 내용이 많을 경우 스크롤 *!
    flex-grow: 1; !* 남은 공간을 모두 차지하도록 설정 *!
    -webkit-overflow-scrolling: touch; !* iOS에서 부드러운 스크롤 *!*/
}

.bottom-sheet__content h2 { /* 예시: 컨텐츠 내 h2 태그 상단 마진 제거 */
    margin-top: 0;
}

/* 푸터 버튼 스타일 */
.bottom-sheet__footer-button {
    display: flex;
    align-items: center;
    padding: 20px 20px;
}
.bottom-sheet__footer-button button {
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    width: 100%;
}





/* 약관 Sheet 관련 */
.bottom-sheet-terms {
    padding: 0 8vw;
    padding-bottom: 3.5vh;
}

.bottom-sheet-terms__content {
    background: #24242B;
    height: 70vh;
    overflow-y: auto;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
}
.bottom-sheet-terms__text { font-family: 'Pretendard', sans-serif; font-size: 0.65rem; font-weight: 400; color: #939393; line-height: 1.5; }
.bottom-sheet-terms__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 1.4rem 30px;
}
.bottom-sheet-terms__footer button {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    border: none;
    border-radius: 27px;
    padding: 1.1rem 0;
    width: 48%;
}
.bottom-sheet-terms__footer button:first-child {
    background: #454553;
    color: #939393;
}
.bottom-sheet-terms__footer button:last-child {
    background: #D9FC4C;
    color: #181818;
}


/* SNS 로그인 Sheet 관련 */
.bottom-sheet_sns { padding-bottom: 2vh; margin-top: 8px; }
.bottom-sheet-sns__title {  }
.bottom-sheet-sns__title-main { font-family: 'GangwonEduPower', sans-serif; font-size: 18px; color: #fff; text-align: center; font-weight: 900; font-style: italic; }
.bottom-sheet-sns__title-sub { font-family: 'Pretendard', sans-serif; font-size: 10px; font-weight: 400; color: #939393; text-align: center; margin-top: 15px; line-height: 1.7; }
.bottom-sheet-sns__list { margin-top: 40px; padding: 0 30px; }
.bottom-sheet-sns__item { border-radius: 27px; width: 100%; height: 40px; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 15px; position: relative; }
.bottom-sheet-sns__item img { width: 5vw; height: auto; margin-left: 19px; }
.bottom-sheet-sns__item span { font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 600; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; align-content: center; }
.bottom-sheet-sns__item-google { background: #dddddd; }
.bottom-sheet-sns__item-google img { }
.bottom-sheet-sns__item-google span { color: #181818; }
.bottom-sheet-sns__item-apple { background: #000000; }
.bottom-sheet-sns__item-apple img { }
.bottom-sheet-sns__item-apple span { color: #fff; }
.bottom-sheet-sns__item-naver { background: #03CF5D; }
.bottom-sheet-sns__item-naver img { }
.bottom-sheet-sns__item-naver span { color: #fff; }
.bottom-sheet-sns__item-kakao { background: #FEE500; }
.bottom-sheet-sns__item-kakao img { }
.bottom-sheet-sns__item-kakao span { color: #181818; }