/* 사용자 페이지 화면 컨테이너 — 가이드 §11.1 */

.screen {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);   /* Mobile */
    background: var(--neutral-bg);
}

@media (min-width: 768px) {
    .screen {
        max-width: var(--container-max);                            /* 1200px */
        margin: 0 auto;
        padding: var(--spacing-6) var(--spacing-6) var(--spacing-10);
    }
}

/* 좁은 콘텐츠용 — 본문 가독성 폭 (PC에서 가운데 정렬) */
.screen-narrow {
    max-width: 100%;
}
@media (min-width: 768px) {
    .screen-narrow {
        max-width: 768px;
        margin: 0 auto;
    }
}

/* 페이지 본문 섹션 간 여백 */
.section + .section {
    margin-top: var(--spacing-7);
}
@media (min-width: 768px) {
    .section + .section {
        margin-top: var(--spacing-8);
    }
}