/* 앱 메인 컨테이너 */
.app-container {min-height: calc(100vh - 8rem);}
.app-container.grey {background-color: var(--grey-background);}

/* 앱 섹션 */
.app-section {padding: 7.5rem 4rem;}
.app-section.grey {background-color: var(--grey-background);}

/* 앱 컨텐트 */
.app-content {width: 100%; max-width: 110rem; margin: 0 auto;}
.app-content.narrow {max-width: 80rem;}
.app-content.board {max-width: 72rem;}

/* 앱 컨텐트 헤드 */
.app-content-head {padding-bottom: 4rem; color: var(--grey-dark);}
.app-content-title {font-size: 2.4rem; font-weight: bold;}
.app-content-sub-title {padding-top: 1.5rem; font-size: 1.6rem; font-weight: bold;}

/* 앱 컨텐트 하단 */
.app-content-bottom {width: 100%; display: flex; justify-content: center; padding-top: 4rem;}

/* 더보기 버튼 */
.app-more-btn {display: flex; justify-content: center; align-items: center; gap: 0.6rem; min-width: 12rem; padding: 1rem 2rem; color: var(--grey-dark); background-color: var(--grey-btn-background); font-size: 1.4rem; font-weight: bold; border-radius: 4rem;}
.app-more-btn::after {content: "\f054"; font-family: "Font Awesome 5 Pro"; font-size: 1.2rem;}
.app-more-btn.bottom::after {transform: rotateZ(90deg);}

@media screen and (max-width: 768px) {
    /* 앱 메인 컨테이너 */
    .app-container {min-height: calc(100vh - 6rem);}

    /* 앱 섹션 */
    .app-section {padding: 4rem 2rem;}

    /* 앱 컨텐트 헤드 */
    .app-content-head {padding-bottom: 2rem;}
    .app-content-title {font-size: 2rem;}
    .app-content-sub-title {padding-top: 1rem;}

    /* 앱 컨텐트 하단 */
    .app-content-bottom {padding-top: 2rem;}
}