/**
 * v7/css/layout.css - v6 레이아웃을 완벽 재현하는 5-column flex 레이아웃
 *
 * 구조: [왼쪽날개 120px] [왼쪽사이드바 240px] [메인] [오른쪽사이드바 240px] [오른쪽날개 120px]
 *
 * 이 파일은 레이아웃 구조(뼈대) CSS만 포함한다.
 * 위젯 CSS는 각 모듈별 CSS 파일에서 별도 관리한다:
 *   - v7/widgets/layout/layout-widget.css (탑바, 헤더, 사이드바, 푸터 등)
 *   - v7/widgets/home/home-widget.css (뉴스탭, 게시글 카드, 인기글 등)
 *
 * @see tmp/v7-layout-plan.md 섹션 9.4
 */

:root {
    color-scheme: light dark;
    --v7-sidebar-width: 240px;
    --v7-wing-width: 120px;
    --v7-gap: 16px;
    --v7-max-width: 1320px;
    --v7-topbar-height: 2.25rem; /* v6 동일: ~36px */
}

/* 전역 기본 스타일 */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family:  system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--wa-color-text, #212529);
    background-color: var(--wa-color-surface-default, #fff);
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ===== 페이지 래퍼: max-width 제한 + 중앙 정렬 ===== */
.v7-page-wrapper {
    max-width: var(--v7-max-width);
    margin: 0 auto;
    padding: 0;
}

/* ===== 5-column flex 레이아웃 ===== */
.v7-layout {
    display: flex;
    gap: var(--v7-gap);
}

/* ===== 중앙 영역: 나머지 공간 차지 ===== */
.v7-center {
    flex: 1;
    min-width: 0;
}

/* ===== 날개 배너: 고정 너비 ===== */
.v7-wing {
    width: var(--v7-wing-width);
    flex-shrink: 0;
    margin-top: 236px; /* 헤더 높이만큼 내림 (v6 동일) */
}

.v7-wing .wing-item {
    width: 100%;
    margin-bottom: 8px;
    background: var(--wa-color-neutral-fill-quiet, #f0f0f0);
    border-radius: 4px;
    overflow: hidden;
}

.v7-wing .wing-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== 본문 영역: 사이드바 + 메인 flex ===== */
.v7-body {
    display: flex;
    gap: var(--v7-gap);
    margin-top: var(--v7-gap);
}

/* ===== 사이드바: 고정 너비 ===== */
.v7-sidebar {
    width: var(--v7-sidebar-width);
    flex-shrink: 0;
}

/* ===== 메인 콘텐츠: 나머지 공간 ===== */
.v7-main {
    flex: 1;
    min-width: 0;
}

/* ===== 배너 플레이스홀더 (공통 유틸리티) ===== */
.v7-banner-placeholder {
    background: var(--wa-color-neutral-fill-quiet, #f0f0f0);
    border-radius: 4px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    color: var(--wa-color-text-quiet, #999);
}