/* ============================================================
   SNU ECE 공지방 — desktop.css
   data-view="desktop"일 때만 적용되는 레이아웃 레이어.
   좌우 레일을 화면에 고정(position: fixed)하고, 본문은 그만큼
   안쪽으로 들여 넣는다. 레일은 스크롤에 따라 움직이지 않는다.
   ============================================================ */

html[data-view="desktop"] .page-shell {
    /* 레일이 흐름에서 빠져 있으므로 그 폭만큼 본문 자리를 비워둔다. */
    padding-left: var(--rail-width);
    padding-right: var(--rail-width);
    min-width: 1100px;
}

html[data-view="desktop"] .page-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
}

/* 좌우 레일 — 스크롤과 무관하게 항상 같은 자리 */
html[data-view="desktop"] .site-rail {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--rail-width);
    overscroll-behavior: contain;
    z-index: 800;
}
/* 왼쪽 레일은 내용이 한 화면에 다 들어온다. 스크롤 막대가 뜨면 자리만
   차지하고 눈에 거슬리므로 세로로 밀리지 않게 잠근다. */
html[data-view="desktop"] .rail-left {
    left: 0;
    overflow: hidden;
    border-right: 1px solid var(--rail-bg-deep);
}
html[data-view="desktop"] .rail-right {
    right: 0;
    overflow: hidden;
    border-left: 0;
}

/* 모바일 전용 조각은 데스크탑에서 자리를 차지하지 않는다. */
html[data-view="desktop"] .mobile-only { display: none !important; }

/* ---------- 헤더 ---------- */
html[data-view="desktop"] .header-actions { flex-wrap: nowrap; }

/* ---------- 공지 그리드 ----------
   화면이 좁아지면 열을 줄인다. 레일 폭을 뺀 본문 기준이다. */
html[data-view="desktop"] .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
html[data-view="desktop"] .spatial-workspace.is-split[data-blocks="1"] .notice-base-block > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1500px) {
    html[data-view="desktop"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 노트북·분할 창처럼 폭이 줄어든 데스크톱에서는 왼쪽 레일만 서랍으로
   접는다. 오른쪽 홍보 레일은 고정하되 이미지의 원래 비율을 유지한다. */
@media (max-width: 1360px) {
    html[data-view="desktop"] {
        --compact-ad-rail-width: clamp(200px, 20vw, var(--rail-width));
    }

    html[data-view="desktop"] .page-shell {
        min-width: 0;
        padding-left: 0;
        padding-right: var(--compact-ad-rail-width);
    }

    html[data-view="desktop"] .page-main {
        max-width: 100%;
        padding: 28px;
    }

    html[data-view="desktop"] .rail-left {
        left: 0;
        width: min(280px, 82vw);
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    html[data-view="desktop"] .rail-left.drawer-open {
        transform: translateX(0);
    }

    html[data-view="desktop"] .drawer-scrim {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(15, 44, 98, 0.5);
    }

    html[data-view="desktop"] .drawer-scrim.drawer-open {
        display: block;
    }

    html[data-view="desktop"] .mobile-menu-btn,
    html[data-view="desktop"] .rail-left .drawer-close-btn {
        display: block !important;
    }

    html[data-view="desktop"] .rail-right {
        width: var(--compact-ad-rail-width);
    }

    /* 놓기 표적은 화면 위 가운데에 작게 뜨므로 레일 폭을 따로 뺄 필요가 없다. */

    /* 폭이 줄어든 데스크톱에서도 레일 전체를 채운다. 원본 비율은 유지하고
       모자란 자리는 흐린 배경 층이 메운다. */
    html[data-view="desktop"] .rail-ad-image { width: 100%; height: 100%; object-fit: contain; }
}