/* =========================================
   WRITING 섹션 스타일
   ========================================= */

/* 글 목록 */
.writing-credit {
    font-family: var(--f-sans);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.3px;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.writing-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; max-width: 700px; margin: 0 auto; }
.writing-item {
    background: transparent; 
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 14px 10px; 
    border-radius: 0;
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: all 0.2s ease; 
    text-align: left;
}
.writing-item:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.writing-item:hover { background: rgba(212, 165, 116, 0.08); padding-left: 15px; }
.writing-item h4 { font-family: var(--f-serif) !important; font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }

/* 글 뷰어 */
.writing-viewer-container { display: none; text-align: center; animation: fadeIn 0.5s ease; touch-action: pan-y; }
.writing-viewer-container.active { display: block; }
#viewer-title { font-family: var(--f-serif) !important; font-size: 1.5rem; font-weight: 700; }
.story-text-container { 
    font-family: var(--f-serif) !important; 
    font-size: 1rem; 
    line-height: 2.4; 
    max-width: 650px; 
    margin: 40px auto; 
    white-space: pre-wrap; 
    color: rgba(255,255,255,0.9); 
    text-align: left;
    min-height: 500px; /* 페이지 전환 시 높이 덜컥거림 방지 */
}

/* 텍스트 페이드인 애니메이션 */
@keyframes fadeInText {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-text {
    animation: fadeInText 0.6s ease forwards;
}

/* 페이지네이션 컨트롤 */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
    font-family: var(--f-sans);
}

.page-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}

.page-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.1);
}

.page-indicator {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}

.list-return-btn { display: inline-block; padding: 10px 30px; border: 1px solid #fff; border-radius: 25px; font-size: 0.8rem; cursor: pointer; transition: 0.3s; background: rgba(255,255,255,0.05); color: #fff; font-family: var(--f-sans) !important; }
.list-return-btn:hover { background: #fff; color: #000; }

/* 스토리 오디오 플레이어 */
.story-audio-player { width: 100%; max-width: 300px; margin: 0 auto 30px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(5px); }
.story-audio-info { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-family: var(--f-sans) !important; }

/* =========================================
   모바일 대응 스타일 (writing.css 내부 오버라이드)
   ========================================= */
@media (max-width: 950px) {
    .story-text-container {
        margin: 20px auto;
        padding: 0 15px;
        min-height: 450px;
        font-size: 0.95rem;
    }
    
    .pagination-controls {
        gap: 25px;
        margin: 25px 0;
    }
    
    /* 모바일에서 버튼 스타일 강제 유지 및 터치 최적화 */
    .page-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        color: rgba(255,255,255,0.8) !important;
        border-radius: 50% !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .page-btn:active:not(:disabled) {
        background: rgba(255,255,255,0.1) !important;
        border-color: rgba(255,255,255,0.6) !important;
        color: #fff !important;
    }
}

@media (max-width: 480px) {
    .story-text-container {
        min-height: 400px;
        font-size: 0.9rem;
        line-height: 2.2;
    }
    
    #viewer-title {
        font-size: 1.3rem;
    }
    
    .pagination-controls {
        gap: 20px;
    }
    
    .page-btn {
        width: 40px;
        height: 40px;
    }
}