/* ==========================================================================
   DAMDA 2026 — 담다노트 상세 (레이아웃)
   ⚠️ 본문(.note-article-content) 스타일은 css2021/damdanote/detail.css 유지
      (에디터 = 미리보기 = 게시글 동기화 규칙, CLAUDE.md)
   ========================================================================== */

#nddetail2026 {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 16px 16px;
}

/* ---------- 본문 + 사이드바 ---------- */
#nddetail2026 .nd-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* 본문 컬럼 */
#nddetail2026 .nd-article {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border-radius: 0;
    padding: 104px 120px; /* top/bottom 104, left/right 120 */
}

#nddetail2026 .nd-article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

#nddetail2026 .nd-article-title {
    font-family: var(--font-kr);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.44px;
    color: #252A28;
    margin-bottom: 10px;
    word-break: keep-all;
}

#nddetail2026 .nd-article-meta {
    display: flex;
    gap: 20px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: #848D89;
}

#nddetail2026 .nd-article-divider {
    border: 0;
    border-top: 1px solid #E4E7E5;
    margin: 28px 0 40px;
}

/* 본문 내부는 기존 detail.css의 .note-article-content 규칙 적용 (좌측 정렬) */
#nddetail2026 .note-article-content {
    max-width: none;
    margin: 0;
}

#nddetail2026 .nd-copyright {
    margin-top: 48px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    color: #848D89;
}

/* ---------- 사이드바 ---------- */
#nddetail2026 .nd-side {
    flex: 0 0 43%;
    max-width: 43%;
    position: sticky;
    top: 96px; /* 고정된 서브바 높이(12+64+20)와 정확히 일치 */
}

#nddetail2026 .nd-side-box {
    background: #fff;
    border-radius: 0;
    padding: 32px 40px;
}

/* 사이드바 문구: 처음엔 숨김 → 스크롤 다운 시 등장 (scroll down 아트보드) */
#nddetail2026 .nd-side-title {
    /* XD 스펙: normal normal 500 32px/48px Pretendard */
    font-family: var(--font-kr);
    font-size: 32px;
    font-weight: 500;
    line-height: 48px;
    letter-spacing: -0.64px;
    color: #252A28;
    opacity: 1;
    word-break: keep-all;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
}

#nddetail2026.is-scrolled .nd-side-title {
    max-height: 160px;
    opacity: 1;
    margin: 0 0 24px;
}

#nddetail2026 .nd-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nddetail2026 .nd-side-item + .nd-side-item { margin-top: 16px; }

#nddetail2026 .nd-side-item a {
    display: block;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 21px; /* XD 텍스트 노드 높이 + 간격 8px */
    letter-spacing: -0.36px;
    color: #AAB2AD;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}

#nddetail2026 .nd-side-item a:hover { color: var(--dark-gray); }

#nddetail2026 .nd-side-item.is-current a {
    color: var(--green);
    font-weight: 600;
}

/* 사이드바 페이지네이션 */
#nddetail2026 .nd-side-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0;
    color: #AAB2AD;
}

#nddetail2026 .nd-pager-arrow {
    display: flex;
    align-items: center;
    color: #848D89;
    padding: 4px;
}

#nddetail2026 .nd-pager-nums {
    display: inline-flex;
    gap: 12px;
    font-family: var(--font-en);
    font-size: 15px;
}

#nddetail2026 .nd-pager-nums button {
    color: #AAB2AD;
    padding: 2px 4px;
}

#nddetail2026 .nd-pager-nums button.is-active {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- 모바일 ---------- */
@media (max-width: 900px) {
    #nddetail2026 { padding: 0 16px 8px; } /* 좌우 거터 16px */

    #nddetail2026 .nd-body { flex-direction: column; }

    #nddetail2026 .nd-article {
        flex: none;
        width: 100%;
        padding: 32px 24px;
    }

    #nddetail2026 .nd-article-title { font-size: 22px; }

    #nddetail2026 .nd-side {
        flex: none;
        width: 100%;
        max-width: none;
        position: static;
    }

    #nddetail2026 .nd-side-box { padding: 28px 24px; }
}

/* 와이드(>1920): 본문 여백을 헤더·푸터 인셋(8px)과 정렬 */
@media (min-width: 1921px) {
    #nddetail2026 { padding: 0 8px 8px; }
}