:root { 
    --bg-content: #1B212C;      /* 명언 페이지 */
}

/* 🖥️ [PC 기본 레이아웃] 세로 스크롤 방지 뷰포트 고정형 구조 */
.curation-container {
    max-width: 1200px;
    margin: 50px auto; 
    display: flex;
    gap: 50px;
    height: auto;
    /* height: calc(100vh - 100px); 화면 높이에 딱 맞춤 */
}

/* 좌측 사이드바 구조 */
.curation-sidebar {
    width: 350px;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* 폭 줄어듦 방지 */
}

/* 카테고리 미니 탭 스타일 */
.side-filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--border-color);
}

.side-tab {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 15px 0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.side-tab.active {
    color: var(--gold-bright);
    background-color: rgba(197, 160, 89, 0.06);
    font-weight: bold;
    border-bottom: 2px solid var(--gold-bright);
}

/* 좌측 글 목록 내부 스크롤 스페이스 */
.curation-list-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.curation-list-wrapper::-webkit-scrollbar { width: 4px; }
.curation-list-wrapper::-webkit-scrollbar-thumb { background-color: var(--gold-dim); }

/* 매거진 스타일의 리스트 아이템 디자인 */
.curation-item {
    display: flex;
    gap: 15px;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    cursor: pointer;
    transition: all 0.2s ease;
}

.curation-item:hover {
    background-color: rgba(255,255,255,0.02);
}

.curation-item.active {
    background-color: rgba(197, 160, 89, 0.04);
    border-left: 3px solid var(--gold-bright);
}

.curation-num {
    font-size: 1rem;
    color: var(--gold-dim);
    font-weight: bold;
}

.curation-item-txt h5 {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 긴 글자 말줄임표 처리 */
    max-width: 230px;
}

.curation-item-txt p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* 우측 본문 에세이 디스플레이 스페이스 */
.curation-display {
    flex: 1;
    background-color: var(--bg-content);
    padding: 60px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.essay-content {
    width: 100%;
    max-width: 720px;
    animation: fadeIn 0.4s ease-in-out;
}

/* 고급 북리뷰풍 인용구 상자 */
.essay-quote-box {
    background-color: var(--bg-surface);
    border-left: 3px solid var(--gold-bright);
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#view-quote {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 15px;
}

#view-author {
    font-size: 0.9rem;
    color: var(--gold-bright);
    display: block;
    text-align: right;
}

/* 나만의 큐레이션 본문 에디션 서체 매칭 */
.essay-article h4 {
    font-size: 1rem;
    color: var(--gold-bright);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 8px;
}

#view-my-thought p {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.05rem;
    color: #C9CDD3;
    line-height: 2;
    margin-bottom: 25px;
    text-align: justify;
    font-weight: 300;
}

@media (max-width: 850px) {

    /* 1. 모바일에서는 고정 높이를 해제하여 자연스럽게 세로 스크롤이 작동하도록 유도 */
    body { overflow-y: auto; }
    
    .curation-container {
        flex-direction: column; /* 💡 가로 정렬을 세로 정렬(위아래)로 전환 */
        height: auto;
        padding: 10px;
    }

    /* 2. 모바일 상단 목록 상자: 가로 고정(350px)을 풀고 너비 100% 확장 */
    .curation-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        height: auto;
    }

    .side-filter-tabs {
        border-bottom: 1px solid rgba(255,255,255,0.03);
    }

    /* 3. 💡 [핵심 연출] 모바일에서 명언 리스트 구역이 가로 스크롤 카드 스택 형태로 수려하게 변환 */
    .curation-list-wrapper {
        display: flex; /* 가로 가로 정렬 */
        overflow-x: auto; /* 💡 좌우 밀어서 카드 탐색하는 가로 스크롤 활성화 */
        overflow-y: hidden;
        padding: 15px;
        gap: 15px;
        scroll-snap-type: x mandatory; /* 카드 걸치지 않고 딱딱 끊어지게 스냅 가드 */
    }

    /* 모바일용 리스트 스크롤바 디자인 */
    .curation-list-wrapper::-webkit-scrollbar { height: 3px; }
    .curation-list-wrapper::-webkit-scrollbar-thumb { background-color: var(--gold-dim); }

    /* 개별 명언 리스트 항목을 하나의 예쁜 독립된 모바일 카드 팩으로 변환 */
    .curation-item {
        flex: 0 0 260px; /* 💡 카드가 찌그러지지 않도록 모바일 최적화 고정폭 할당 */
        background-color: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(197, 160, 89, 0.1);
        padding: 15px;
        border-bottom: none;
        scroll-snap-align: start;
    }

    .curation-item.active {
        border: 1px solid var(--gold-bright);
        border-left: 3px solid var(--gold-bright);
        background-color: rgba(197, 160, 89, 0.03);
    }

    .curation-item-txt h5 {
        max-width: 180px;
    }

    /* 4. 모바일 하단 사유 에세이 구역: 화면 좌우 폭에 맞춰 100% 풀 브라우저 렌더링 지향 */
    .curation-display {
        width: 100%;
        padding: 30px 15px;
        background-color: transparent;
        overflow-y: visible; /* 부모 스크롤을 타기 위해 개별 잠금 해제 */
    }

    .essay-content {
        max-width: 100%;
    }

    .essay-quote-box {
        padding: 20px;
        margin-bottom: 30px;
    }

    #view-quote {
        font-size: 1.1rem;
    }

    #view-my-thought p {
        font-size: 0.98rem;
        line-height: 1.9;
        text-align: left; /* 모바일 가독성을 위해 좌측 정렬 */
        margin-bottom: 20px;
    }

/*    
    .dictionary-container {
        flex-direction: column;
        height: auto;
    }
    .sidebar-panel {
        width: 100%;
        height: 300px; /* 리스트 영역 공간 강제 한정 */
  /*  }
    .display-panel {
        padding: 30px 20px;
    }
    .keyword-grid {
        grid-template-columns: 1fr;
    }*/
}