@charset "utf-8";

/* position:sticky 활성화
   basic.css 의 `html, body { overflow-x:hidden }`(모바일 오른쪽 잘림 방지) 때문에
   html/body 가 스크롤 컨테이너가 되어 페이지 안의 sticky 고정이 전혀 동작하지 않는다.
   clip 은 잘라내는 효과는 같으면서 스크롤 컨테이너를 만들지 않아 sticky 가 정상 동작한다.
   → 앞줄 hidden 은 clip 미지원 브라우저용 폴백이므로 두 줄을 함께 둔다. */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* 비밀번호 토글 아이콘 스타일 - 일반 폼 */
.password-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 4px !important;
    cursor: pointer !important;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    user-select: none;
    vertical-align: middle !important;
}

/* 로그인 폼 비밀번호 필드 - 눈 아이콘 위치 */
.new_login .input_form dl dd {
    position: relative !important;
}

.new_login .input_form dl dd .password-toggle-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

.password-toggle-icon:hover {
    opacity: 1;
}

.password-toggle-icon:hover svg {
    stroke: #000 !important;
}

.password-toggle-icon.active {
    opacity: 0.85;
}

.password-toggle-icon svg {
    display: block;
}

/* 댓글 입력 폼 비밀번호 필드 - 눈 아이콘 위치 */
.answer_wrapper .custom_box_bom {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.answer_wrapper .custom_box_bom input[type="password"],
.answer_wrapper .custom_box_bom input[type="text"] {
    flex: 1 !important;
    padding-right: 35px !important;
}

.answer_wrapper .custom_box_bom .password-toggle-icon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
}

/* Alert/Confirm 모달의 확인·취소 버튼 크기
   버튼이 .login_chk_btn01 클래스를 그대로 쓰는데, board.css 의 그 규칙에 height:60px 가 들어 있다.
   모달용 규칙(.alert-modal-buttons .login_chk_btn01)은 min-height 만 지정해 60px 를 못 이겨
   모달 안에서도 페이지 제출 버튼만 한 크기로 나온다.
   → height 를 풀어 min-height 가 실제 높이가 되게 하고, 폭도 한 단계 줄인다. */
.alert-modal-buttons .login_chk_btn01,
.alert-modal-buttons a.login_chk_btn01 {
    height: auto;
    min-height: 42px;
    min-width: 90px;
    max-width: 120px;
    padding: 10px 18px;
    font-size: 15px;
}

@media screen and (max-width: 768px) {
    .alert-modal-buttons .login_chk_btn01,
    .alert-modal-buttons a.login_chk_btn01 {
        height: auto;
        min-height: 40px;
        font-size: 14px;
    }
}

/* 댓글 관련 스타일 */
.comment-empty {
    text-align: center !important;
    padding: 80px 0 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #666 !important;
}