/* ==========================================
   태블릿 및 작은 화면 (최대 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* 네비게이션 컨테이너 너비 조정 */
    .ln-nav-container {
        padding: 0 30px;
    }

    /* 소설 페이지 판형 유연하게 변경 */
    .novel-page {
        width: 90%; /* 고정 568px에서 비율로 변경 */
        height: auto; /* 높이 고정 해제 */
        min-height: 80vh;
    }

    .content-area {
        padding: 40px 35px;
    }
}

/* ==========================================
   모바일 환경 (최대 768px)
   ========================================== */
@media (max-width: 768px) {
    /* 1. 네비게이션: 메뉴 숨기기 또는 간소화 */
    .ln-menu {
        display: none; /* 모바일에서는 햄버거 메뉴로 대체하거나 숨김 */
    }
    
    .ln-nav-container {
        justify-content: space-between;
    }

    /* 2. 메인 대시보드 리스트 */
    .main-dashboard {
        padding: 15px;
    }

    .main-card {
        padding: 15px;
        flex-direction: row; /* 가로 배열 유지하되 폰트 축소 */
    }

    .card-icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        font-size: 1rem;
    }

    .card-title {
        font-size: 1rem;
    }

    /* 3. 소설 본문 페이지 (가장 중요) */
    .novel-page {
        width: 100%;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .header-line, .footer-line {
        margin: 10px 20px;
        padding: 15px 0;
    }

    .content-area {
        padding: 30px 20px;
        font-size: 1.05rem; /* 모바일에서 보기 편한 크기 */
        line-height: 2.0; /* 행간 살짝 축소 */
    }

    .highlight-box {
        font-size: 1.1rem;
        padding: 12px 15px;
        margin: 25px 0;
    }

    /* 4. 입력창 및 버튼 */
    .ln-btn {
        width: 100%; /* 버튼을 가로 가득 채우기 */
        padding: 14px;
    }

    .ln-auth {
        gap: 8px;
    }

    .btn-signup {
        padding: 8px 15px;
        font-size: 0.75rem;
    }
}

/* ==========================================
   초소형 모바일 (최대 480px)
   ========================================== */
@media (max-width: 480px) {
    .ln-logo {
        font-size: 1.1rem;
    }

    .card-status {
        font-size: 0.75rem;
    }

    .status-badge {
        display: none; /* 공간 부족 시 뱃지 숨김 */
    }
    
    .book-title {
        font-size: 0.8rem;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* 제목이 길면 말줄임 */
    }
    .ln-auth {
        display: none;
    }

    .main-banner {
        height: 250px;
        font-size: 1.5rem;
    }
}