/* ==========================================================================
   TLB IMWEB FIX - 아임웹 호환성 수정 및 오버라이드
   The LEET BIBLE Design System - 아임웹 특화 스타일
   Refactored from lb-imweb-fix.css
   ========================================================================== */

/* ==========================================================================
   SUIT 폰트 전역 적용
   ========================================================================== */

/* SUIT 폰트 Import */
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css');
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css');

/* 본문 전역 폰트 적용 (아임웹 Pretendard 덮어쓰기) */
html {
    font-size: 16px !important;
    /* rem 기준값 명시 (1rem = 16px) */
}

/* 
   폰트 적용: !important 제거 및 불필요한 폰트 스택 정리
   사용자 요청: 'Pretendard', system fonts 등 제거, SUIT 우선
*/
body,
html {
    font-family: 'SUIT', sans-serif;
}

/* 본문 요소 폰트 적용 - !important 제거하여 상속 가능하게 수정 */
body,
p,
span,
li,
td,
th {
    font-family: inherit;
}

/* ==========================================================================
   팝업 배너 조정
   ========================================================================== */

/* 팝업 배너 높이 조정 */
.popup-banner-wrap {
    height: 40px;
}

.popup-banner-wrap .banner-container .banner_img {
    max-height: 28px !important;
    width: auto;
    padding: 5px 0;
}

.close_tools {
    display: none;
}

/* ==========================================================================
   세부 카테고리 네비게이션 (서브메뉴)
   ========================================================================== */

/* 세부 카테고리 버튼 스타일 */
.nav.sub-menu a {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-body);
    text-decoration: none;
    margin: 0 var(--spacing-sm);
    padding: 5px 0;
    display: inline-block;
}

.nav.sub-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--color-primary);
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}

.nav.sub-menu a:hover::after {
    width: 100%;
    left: 0;
    transform: translateX(0);
    height: 3px;
}

/* 선택된 상태 스타일 */
.nav.sub-menu a.active {
    color: var(--color-primary);
    font-weight: 700;
}

.nav.sub-menu a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: none;
}

/* ==========================================================================
   게시판 (Bulletin Board) 스타일 수정
   ========================================================================== */

/* [게시판 스타일 정정] 강의나 이런데 너무 폰트가 커서 조절 */
.category.hidden-xs em {
    font-size: 1.4rem !important;
}

ul.dropdown-menu li {
    font-size: 1.4rem;
}

ul.li_body.holder {
    padding-left: 0;
    padding-right: 0;
}

/* [게시판 스타일 정정] 여기까지 끝 */

/* ==========================================================================
   알파리뷰 (Alpha Review) 섹션 조정
   ========================================================================== */

/* 리뷰 섹션 상단 여백 조정 */
.vreview-row.vreview-board-popup {
    margin-top: 8px !important;
}

/* 별 아이콘 크기 조정 */
.vreview-rating svg {
    width: 20px;
    height: 20px;
}

/* 별점 숫자와 리뷰 수 스타일링 */
.vreview-row.vreview-board-popup>div[style*="flex-shrink:0"] {
    font-size: 16px !important;
    margin-left: 5px;
    font-weight: 500 !important;
}

/* ==========================================================================
   모바일 반응형 조정
   ========================================================================== */

/* 모바일 환경 (최대 너비 768px 기준) */
@media only screen and (max-width: 768px) {

    /* 본문 줄간격 조정 */
    .item-summary.holder.fr-view p {
        line-height: 1.45;
        letter-spacing: -0.03rem;
    }

    /* 세부 카테고리 모바일 조정 */
    .nav.sub-menu ul {
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav.sub-menu a {
        font-size: 14px;
        margin: 0 var(--spacing-xs);
        padding: 4px 0;
    }

    .nav.sub-menu a::after {
        height: 3px;
    }

    .nav.sub-menu a.active::after {
        height: 2px;
    }
}

/* 모바일 반응형 (767px 이하) */
@media screen and (max-width: 767px) {
    .nav.sub-menu ul {
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav.sub-menu a {
        font-size: 14px;
        margin: 0 var(--spacing-xs);
        padding: 4px 0;
    }

    .nav.sub-menu a::after {
        height: 3px;
    }

    .nav.sub-menu a.active::after {
        height: 2px;
    }
}