/* Finish Course 버튼 숨기기 */
.lp-button.lp-btn-finish-course {
    display: none !important;
}

/* 하단 이전/다음(Prev/Next) 네비게이션 바 숨기기 */
.course-item-nav {
    display: none !important;
}

/* complete버튼 가운데 정렬 */
#learn-press-content-item form {
    text-align: center !important;
    display: flex;
    justify-content: center;
}

/* 로그인 및 제출 버튼 색상 변경 */
#um-submit-btn.um-button, 
.um-button, 
input[type="submit"].um-button {
    background-color: #24abb2 !important;
    border-color: #24abb2 !important;
    color: #ffffff !important; /* 글자색을 흰색으로 고정 */
}

/* 마우스를 올렸을 때(Hover) 효과 - 살짝 더 어둡게 */
#um-submit-btn.um-button:hover, 
.um-button:hover {
    background-color: #1d8e94 !important;
    border-color: #1d8e94 !important;
}


/* Thin Box Shadow 스타일이 적용된 헤더의 패딩만 강제 제거 */
.wp-block-group.is-style-thin-box-shadow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 제목 요소에 마우스를 올렸을 때 색상 변경 */
div.course-item-title:hover {
    color: #24abb2 !important;
    cursor: pointer; /* 마우스 포인터를 손가락 모양으로 변경 */
}

/* 체크 표시 아이콘 색상 변경 */
.course-item-ico.passed.completed::before {
    color: #24abb2 !important;
}

/* 성공 메시지 박스 디자인 변경 */
.learn-press-message.success {
    background-color: #cdf3f5 !important; /* 배경색 */
    color: #000000 !important;            /* 글자색 */
   
}

/* 1. 버튼을 감싸는 부모 박스 정렬 설정 */
.content-item-summary {
    display: flex !important;
    flex-direction: column !important; /* 내부 요소들을 세로로 나열 */
    align-items: center !important;    /* 가로축 기준 정중앙 정렬 */
    justify-content: center !important;
    width: 100% !important;
}

/* 2. 완료 버튼 디자인 (배경색 청록, 글자색 흰색) */
button.lp-button.completed {
    background-color: #24abb2 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
    margin: 20px 0 !important;         /* 위아래 간격 확보 */
    cursor: default !important;
}

/* 3. 버튼 안의 체크 아이콘도 흰색으로 */
button.lp-button.completed::after {
    color: #ffffff !important;
}

/* LearnPress 완료 버튼 스타일 변경 */
.lp-button.button-complete-lesson.lp-btn-complete-item {
    background-color: #ffffff !important;   /* 배경색: 흰색 */
    color: #24abb2 !important;              /* 글자색: 청록색 */
    border: 2px solid #24abb2 !important;   /* 테두리: 2px 실선, 청록색 */
    transition: all 0.3s ease;              /* 마우스 올릴 때 부드러운 효과 */
}

/* 마우스를 올렸을 때(Hover) 효과 - 선택 사항 */
.lp-button.button-complete-lesson.lp-btn-complete-item:hover {
	    color: #ffffff !important;              /* 글자색: 흰색 */
    background-color: #24ABB2 !important;   /* 배경색: 청록색 */

	    border: 2px solid #24ABB2 !important;   /* 테두리: 2px 실선 */
}


/* 파일 블록 내의 텍스트 링크(파일명)만 숨기기 */
.wp-block-file a:not(.wp-block-file__button) {
    display: none !important;
}

/* 'my-hover-card'라는 이름을 붙인 블록에만 적용됩니다 */
.my-hover-card {
    transition: all 0.3s ease-in-out !important;
    position: relative;
}

.my-hover-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-3px) !important;
    z-index: 10 !important;
}

/* 선택 시 내부 동그라미만 청록색으로 생성 */
.answer-option input[type="radio"]:checked::after {
    background-color: #24abb2 !important; /* 요청하신 색상 */
}

/* 1. 퀴즈 질문 제목 (예: What is the first step...) 색상 변경 */
#learn-press-quiz-app .question-title,
#learn-press-quiz-app h4 {
    color: #1F1F1F !important; /* BBC 스타일의 짙은 색상 */
    font-weight: 600 !important;
}

/* 2. 퀴즈 질문 설명 및 본문 텍스트 색상 변경 */
#learn-press-quiz-app .question-content,
#learn-press-quiz-app .question-content p,
#learn-press-quiz-app .quiz-description {
    color: #262626 !important; /* CNN 스타일의 가독성 좋은 색상 */
}

/* 3. 선택지(A, B, C, D) 안의 글자 색상 변경 */
#learn-press-quiz-app .answer-options .option-title {
    color: #262626 !important;
}

/* 1. Correct 라벨 배경색 변경 */
.question .question-response.correct .label {
    background-color: #24abb2 !important;
}

/* 2. 정답 보기 항목의 테두리 색상 변경 */
.question .answer-option.answer-correct .option-title {
    border-color: #24abb2 !important;
}

/* 헤더 내 활성화된 진행 바 배경색 */
.course-item-popup #popup-header .learn-press-progress__active {
    background-color: #73d8de !important;
}

/* 모바일 화면(너비 768px 이하)에서 헤더의 특정 버튼 숨기기 */
@media (max-width: 768px) {
    /* 헤더 영역 안에 있는 버튼 블록을 타겟팅합니다 */
    header .wp-block-button {
        display: none !important;
    }
}

@media (max-width: 781px) {
    /* mobile-reverse 클래스가 적용된 섹션 내부의 '열' 블록을 뒤집음 */
    .mobile-reverse .wp-block-getwid-section__inner-wrapper > .wp-block-columns {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* 뒤집힌 후 이미지와 텍스트 사이 간격 조정 (필요 시) */
    .mobile-reverse .wp-block-column {
        margin-bottom: 20px !important;
    }
}

/* Finish Course 버튼 숨기기 */
.lp-button.btn-finish-course {
    display: none !important;
}