/* ========================================
   메인 레이아웃 구조
   ======================================== */

/* 메인 컨테이너 */
.main-container {
    width: 100%;
    padding-top: 60px;
    position: relative;
}

/* 왼쪽 영역 - absolute 포지셔닝 */
.left-section {
    position: absolute;
    left: -280px;
    width: 240px;
    height: 100%;
}

/* 콘텐츠 영역 */
.content-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================================
   2단 레이아웃 래퍼
   ======================================== */

.layout-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1024px;
    margin: 0 auto;
    margin-top: 60px;
    align-items: stretch;
}

/* ========================================
   레이아웃 반응형
   ======================================== */

/* 태블릿 (1199px 이하) */
@media (max-width: 1199px) {
    .left-section {
        display: none;
    }

    .layout-wrapper {
        flex-direction: column;
        max-width: 700px;
    }

    .layout-wrapper .content-area {
        max-width: 100%;
    }
}

/* 모바일 (700px 이하) */
@media (max-width: 700px) {
    .main-container {
        padding: 0px 20px;
        padding-top: 30px;
    }
}

/* 소형 모바일 (480px 이하) */
@media (max-width: 480px) {
    .main-container {
        padding: 0px 20px;
        padding-top: 30px;
    }
}

/* ========================================
   푸터
   ======================================== */

.site-footer {
    margin-top: 20px;
    padding: 40px 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.footer-content {
    font-size: 13px;
    color: var(--text-tertiary);
}

.footer-separator {
    margin: 0 8px;
}

/* 모바일 대응 */
@media (max-width: 700px) {
    .site-footer {
        margin-top: 20px;
        padding: 30px 16px;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .footer-separator {
        display: none;
    }
}