.l-blog {
    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, var(--content-width));

    column-gap: var(--layout-gap);

    width: 100%;
    align-items: start;
}

.l-blog__sidebar {
    min-width: 0;
}

.l-blog__main {
    min-width: 0;
    width: 100%;
}


/* ==========================================
   SMALL DESKTOP / TABLET

   고정 비율을 억지로 축소하지 않고
   Sidebar + Main 구조는 유지하되
   사이즈를 유동적으로 변경한다.
   ========================================== */

@media (max-width: 959px) {
    .o-page-frame {
        padding-inline: var(--page-gutter-tablet);
    }

    .l-blog {
        grid-template-columns:
            minmax(180px, 220px)
            minmax(0, 1fr);

        column-gap: clamp(32px, 5vw, 48px);
    }
}


/* ==========================================
   MOBILE / ADAPTIVE BREAKPOINT

   여기서는 단순 축소가 아니라
   2열 → 1열로 구조 자체를 변경한다.
   ========================================== */

@media (max-width: 767px) {
    .o-page-frame {
        padding:
            32px
            var(--page-gutter-mobile)
            56px;
    }

    .l-blog {
        display: block;
    }

    .l-blog__main {
        margin-top: 48px;
    }
}