/**
 * layout.css
 * Flexbox/Grid based responsive layout system
 */
.l-main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.l-content-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-base);
}

.l-responsive-wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* Flexbox Utilities */
.u-flex { display: flex; }
.u-flex-column { flex-direction: column; }
.u-flex-center { justify-content: center; align-items: center; }

/* Grid Utilities */
.u-grid { display: grid; }

/* Visibility */
.u-mobile-only { display: block; }
@media (min-width: 768px) {
    .u-mobile-only { display: none; }
}

/* ──────────────────────────────────────────────────────────────
 * RFC-V4 P7: *-main-layout 직속 .card-ui 자식 균등 분배 (global)
 *
 * 16 개 컴포넌트가 동일 패턴 (.X-main-layout { display: flex|grid }
 * + 자식 .card-ui) 인데 flex 모드에선 자식 flex 미지정 시 콘텐츠
 * 기반 폭만 차지해 layout 폭을 다 못 씀. grid 모드 컴포넌트는
 * grid item 이라 아래 flex 속성 무시되어 영향 없음.
 *
 * 예외:
 *   - sidebar 패턴 (sidebar-info / sidebar-layout / sidebar-left /
 *     cd-pro-sidebar) 은 고정 폭 유지
 *   - .ping-main-layout 은 flex-direction:column + 첫 카드 auto
 *     height + 둘째 .flex-1 자체 처리 — 글로벌 적용 시 회귀하므로
 *     :not() 으로 직접 제외
 * ────────────────────────────────────────────────────────────── */
[class$="-main-layout"]:not(.ping-main-layout) > .card-ui {
    flex: 1 1 0;
    min-width: 0;
}
[class$="-main-layout"] > .sidebar-info,
[class$="-main-layout"] > .sidebar-layout,
[class$="-main-layout"] > .sidebar-left,
[class$="-main-layout"] > .cd-pro-sidebar {
    flex: 0 0 auto;
}