/**
 * widgets/layout/five-column — 5칼럼 셸
 *
 * 🔴 폭이 두 가지다. 헷갈리면 레이아웃이 어긋난다.
 *
 *    --w-shell-max   "중앙 영역" — 사이드바 + 본문 + 사이드바.
 *                    탑바·헤더·주 메뉴·푸터가 모두 이 폭에 맞춘다.
 *                    기본 1370px = 275 + 20 + 780 + 20 + 275
 *
 *    전체 폭         중앙 영역 + 양쪽 날개(광고). 이 위젯만 여기까지 쓴다.
 *                    1690px = 140 + 20 + 1370 + 20 + 140
 *
 *    아래 calc 가 날개 몫을 스스로 더하므로, 사이트는 --w-shell-max 하나만 정하면 된다.
 *
 * 🔴 광고 열은 전체 폭(기본 1690px)이 확보될 때만 보여준다.
 *    1200px 에서 5칼럼을 다 켜면 본문이 290px 로 짓눌린다(목표의 37%).
 */
.w-five-column {
    --w-five-column-wing: 140px;
    --w-five-column-side: 275px;
    --w-five-column-gap:  20px;
    --w-five-column-pad:  1rem;

    /* 중앙 영역 + (날개 + 간격) × 2 */
    --w-five-column-max: calc(
        var(--w-shell-max, 1370px)
        + (var(--w-five-column-wing) + var(--w-five-column-gap)) * 2
    );

    max-width: var(--w-five-column-max);
    margin: 0 auto;
    padding: var(--w-five-column-gap) var(--w-five-column-pad);
    display: flex;
    align-items: flex-start;
    gap: var(--w-five-column-gap);
}

.w-five-column__wing {
    width: var(--w-five-column-wing);
    flex-shrink: 0;

    /* 광고 칸이 여러 개 들어오므로 간격은 여기서 준다
       (칸 위젯이 자기 바깥 여백을 갖지 않게 한다) */
    display: grid;
    gap: var(--w-five-column-wing-gap, 15px);
    align-content: start;
}

.w-five-column__side {
    width: var(--w-five-column-side);
    flex-shrink: 0;
}

/* min-width:0 이 없으면 긴 제목이 칼럼을 밀어낸다 */
.w-five-column__main {
    flex: 1;
    min-width: 0;
}

/* ── 전체 폭이 안 나오면 광고 열을 접는다 ─────────────────
   🔴 미디어쿼리는 CSS 변수를 못 읽으므로 이 값만 손으로 맞춘다.
      기본값 기준 1690px = 중앙 1370 + (140 + 20) × 2.
      --w-shell-max 나 날개 폭을 바꾸면 이 숫자도 함께 고쳐야 한다. */
@media (max-width: 1689.98px) {
    .w-five-column__wing { display: none; }

    /* 🔴 날개를 접었으면 전체 폭도 중앙 영역으로 줄인다.
       그러지 않으면 5칼럼만 화면 끝까지 벌어져, 같은 폭이어야 할
       탑바·헤더·주 메뉴·푸터와 좌우가 어긋난다. */
    .w-five-column { --w-five-column-max: var(--w-shell-max, 1370px); }
}

/* ── 992~1199px — 오른쪽 사이드바까지 접는다 ─────────── */
@media (max-width: 1199.98px) {
    .w-five-column__side--right { display: none; }
}

/* ── 992px 미만 — 1칼럼으로 쌓는다 ──────────────────── */
@media (max-width: 991.98px) {
    .w-five-column {
        flex-direction: column;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* 사이드바는 숨기지 않고 본문 아래로 내린다 — 로그인·통계가 사라지면 안 된다 */
    .w-five-column__side,
    .w-five-column__side--right {
        display: block;
        width: 100%;
        order: 2;
    }

    .w-five-column__main { order: 1; width: 100%; }
}