@media screen and (max-width: 1024px) {

.desktop-only {
    display: none;
}

/* ---------------------------------- header 영역 ---------------------------------- */

.title {
    padding-left: 3%;
    text-align: left;
}

.logo {
    position: relative;
    left: 15px;
}

.title_kor {
    width: auto;
    height: 25px;
    position: static;
    padding-left: 10px;
}

.title_eng {
    display: none;
}


/* ---------------------------------- Sidebar 영역 ---------------------------------- */

/* 햄버거 메뉴 버튼 */
.hamburger-menu {
    right: 0;
}

.hamburger-menu:active {
    background-position: 0 0;
}

/* 사이드 메뉴 영역 */
input[type="checkbox"]:checked ~ .sidebar {
    transform: translateX(0);
    transition: all 0.2s ease-in;
}

.sidebar {
    width: 100%;
    top: 70px;
    right: 0px;
    transform: translateX(100%);
    transition: all 0.2s ease-out;
}

/* ---------------------------------- Main 영역 ---------------------------------- */

.main-contents-01 .main-contents-text { /* 메인 콘텐츠 영역 */
    width: 90%;
    margin-bottom: 15%;
}

@media screen and (max-width: 576px) { /* Mobil/모바일 사이즈 */
    .main-contents-01 .main-contents-text {
        width: 90%;
        margin-bottom: 1%;
    }
}

.main-contents-btn a {
    width: 40%;
}

.main-contents-btn a:active {
    color: #ffffff;
    background-color: #2b3953;
    transition: all 0.2s ease-in-out;
}


.main-contents-02 .video-container, .main-contents-02 .main-contents-text {
    width: 90%;
}

.main-contents-03 {
    height: 500px;
}

.main-contents-05 {
    height: 300px;
}

/* ---------------------------------- Contents Title 영역 ---------------------------------- */


.page .subtitle .contents-title {
    padding: 0px 5%;
}

.page .subtitle .contents-level {
        width: 20%;
        margin-bottom: 10%;
    }

@media screen and (max-width: 768px) {
    .page .subtitle .contents-level {
        width: 35%;
        margin-bottom: 10%;
    }
}

.page .subtitle .contents-title-text {
    padding: 0;
}

.page .subtitle h1 {
    font-size: 180%;
}

.page .subtitle img {
    width: 30px;
    display: none;
    /* margin: auto 0; */
}

@media screen and (max-width: 768px) {
    .page .contents-menu-type .bar {
        width: 10%;
    }

    .main-contents-02 {
        padding: 10px;
    }

    .main-contents-02 .video-container {
        width: 100%;
    }
}

/* ---------------------------------- Navigation 영역 ---------------------------------- */

.navigation .nav-menu {
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.navigation {
    align-items: flex-start; 
}

.navigation .nav-title span {
    /* 모바일에서는 화면 너비 대비 폰트 비중을 조금 더 높임 */
    font-size: clamp(20px, 8vw, 32px);
    margin: 0 2vw;
}

.navigation .nav-title img {
    /* 모바일에서 아이콘이 너무 작아 보이면 비율을 살짝 조정 */
    width: 1.5em !important;
}

@media screen and (max-width: 768px) {
    .navigation .nav-title {
        aspect-ratio: 4 / 3 !important;
    }

    .navigation .nav-title img {
        /* 모바일에서 아이콘이 너무 작아 보이면 비율을 살짝 조정 */
        width: 1.1  em !important;
    }
    
}

.navigation .nav-menu {
    width: 100%;
    padding: 20px; /* 모바일 전용 여백 */
    display: flex;
    flex-direction: column; /* 세로 나열 */
    justify-content: flex-start; /* 왼쪽 위부터 배치 */
    align-items: flex-start;    /* 자식(nav)들을 왼쪽으로 붙임 */
    gap: 20px;
}

.navigation nav {
    width: 100% !important;   /* 가로 꽉 채우기 */
    min-width: 100% !important;
    margin: 0;                /* 기본 여백 제거 */
    padding: 0;
    justify-content: flex-start;
}

.navigation nav ul {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* 서브 타이틀(a태그 등) 왼쪽 끝에 붙이기 */
.navigation nav ul .subtitle {
    padding-left: 0;
    justify-content: flex-start;
}

.navigation nav ul li {
    width: 100%;
    padding-left: 0; /* 불필요한 왼쪽 패딩 제거 */
    margin-left: 0;
    text-align: left;
}

.navigation nav ul li a {
    display: block;
    width: 100%;
    padding: 0px 0; /* 클릭하기 좋게 위아래 여백만 제공 */
    text-align: left;
}

/* ---------------------------------- SubMenu 영역 ---------------------------------- */

@media screen and (max-width: 768px) { /* Mobil/모바일 사이즈 */
    .page .subMenu ul {
        flex-direction: column;
        padding: 0;
    }
  
    .page .subMenu ul li a {
        height: 400%;
        aspect-ratio: 3 / 4;
    }

    .page .subMenu ul li a .tag {
        margin-bottom: 10%;
        
        font-size: 0.8em;
    }
    
    .page .subMenu ul li a .kor {
        font-size: 2em;
    }
    
    .page .subMenu ul li a .eng {
        font-size: 1.3em;
    }
    .page-contents-02 .page-contents-img {
        aspect-ratio: 3 / 4;
        height: 80%;
    }
}

.page .subMenu ul {
    padding: 0;
    gap: 2%;
}

.page .subMenu ul li {
    width: 100%;
    margin: 3% 0px;
}

.page .content-image img {
    display: block;
    width: 100%;
}

.page .subMenu ul li a div {

    background-color: #ffffff;
}

.page .subMenu ul li .book:active div {
    background-color: #2f8f7a;
}

.page .subMenu ul li .pronunciation:active div {
    background-color: #c74756;
}

.page .subMenu ul li a:active span {
    color: #ffffff;
    transform: scale(1.05);
}

.page-contents-02 .page-contents-img {
    height: 80%;
}

.page-contents-02::before {
    width: 100%;
    height: 100%;
    bottom: -10%;
}

/* ---------------------------------- Book 영역 ---------------------------------- */

.page .content-image {
    padding: 0;
}

.page .chapter-slide .content-image img {
    width: 100%;
}

/* ---------------------------------- Pronunciation 영역 ---------------------------------- */

.chapter-grid-container {
    padding: 0;
}

.page #pronunciation-area {
    padding: 0;
}

@media screen and (max-width: 546px) {
    .page #page-contents-area {
        padding: 2%;
    }

    .page #pronunciation-area {
    padding: 0;
}
}

@media screen and (max-width: 768px) {
    .chapter-grid-container {
        grid-template-columns: repeat(var(--items-per-row-mobile, 1), 1fr);
        border: 1px solid #fac963;
        background-color: #d8d8d8;
    }

    .pron-item-box {
        background-color: #fff;
    }
}

.play-audio-btn {
    height: 40px;
    transition: all 0.1s ease-in-out;
}

.play-audio-btn:active {
    border: 1px solid #2f8f7a;
    background-color: #2f8f7a; /* 호버 효과 */
}


@media (max-width: 768px) {
    
    .chapter-grid-container {
        /* 모바일은 itemsPerRowMobile 기준으로 4개 컬럼 */
        grid-template-columns: repeat(var(--items-per-row-mobile, 4), 1fr);
    }

    /* 임시 테스트: 8번째마다 배경색을 파란색으로 변경 (줄바꿈이 아닌 색상으로 테스트) */
    #pronunciation-area .pron-item-box.force-newline-mobile {
        grid-column-start: 1 !important; /* 줄바꿈 규칙은 그대로 유지 */
    }
}

.slide-nav-btn {
    display: none !important;
}

.page-num-item {
    font-size: 16px; /* 모바일에서는 숫자를 살짝 작게 */
    column-gap: 5px;
}
.page-divider {
    margin: 0 2px; /* 구분선 간격 축소 */
}

@media (max-width: 768px) {
    .page-num-item {
        padding: 8px; /* 터치하기 편하게 영역 확대 */
        font-size: 20px;
    }
}

.word-text {
    font-family: 'Nanum Gothic Bold', sans-serif;
}

/* ---------------------------------- Footer 영역 ---------------------------------- */


footer .contact {
    padding: 5% 10%;
}

footer .contact ul {
    padding: 0 10px;
}

footer .contact ul li a, .sns-area span {
    font-size: 80%;
    padding: 0;
}

@media screen and (max-width: 768px) { /* Mobil/모바일 사이즈 */
    footer .contact {
        padding: 0 10% !important;
        display: flex;
        flex-wrap: wrap; /* 내용이 넘치면 줄 바꿈 허용 (모바일 기본 동작) */
    }

    footer .contact ul {
        width: calc(50%);
        text-align: left;
        margin-bottom: 5%;
        
    }

    footer .contact ul li {
        padding: 5px 0;
    }

    footer .contact ul li a, .sns-area span {
        font-size: 100%;
        padding: 0;
    }

    .footer-img {
        min-height: 250px;
        aspect-ratio: 4 / 3; /* 모바일에서는 세로로 좀 더 길게 보이도록 비율 조정 */
    }
    footer .contact {
        padding: 30px 20px;
    }
    
    /* Copyright 영역 */
    footer .copyright ul {
        flex-direction: column;
        padding: 0;
    }

    footer .copyright ul li {
        margin: 5px 0;
    }   

    footer .copyright {
        padding: 10px 0;
    }

    footer .copyright .copyright-text, footer .copyright .version, footer .copyright .count{
        border: none;
    }
}

}