/*
    48rem = 768
    64rem = 1024
    80rem = 1280
    90rem = 1440
    120rem = 1920
*/

/*min-width*/
@media (min-width: 48rem) {
    /* 768px 이상일 때 적용될 스타일 */
}

@media (min-width: 64rem) {
    /* 1024px 이상일 때 적용될 스타일 */
}

@media (min-width: 80rem) {
    /* 1280px 이상일 때 적용될 스타일 */
}

@media (min-width: 90rem) {
    /* 1440px 이상일 때 적용될 스타일 */
}

@media (min-width: 120rem) {
    /* 1920px 이상일 때 적용될 스타일 */
}

/*max-width*/
@media (max-width: 90rem) {
    /* 1440px 이하일 때 적용될 스타일 */
    header .header-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    main {
        padding-left: 20px;
        padding-right: 20px;
    }

    footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 관리자 상세 폼 (pg-form-body): 2열 그리드를 1열(행 단위) 반응형으로 전환 */
    .pg-form-body .dtl-cell {
        grid-template-columns: 160px 1fr;
        min-height: auto;
    }

    .pg-form-body .dtl-cell > .dtl-head,
    .pg-form-body .dtl-cell > .dtl-data {
        min-height: 56px;
    }

    /* 2번째 필드 세트(3, 4번째 자식) 상단에 구분선 추가하여 row 구분 유지 */
    .pg-form-body .dtl-cell > :nth-child(n+3) {
        border-top: 1px solid var(--gary-100);
    }

    /* 빈 헤드/데이터 요소는 숨김 처리하여 불필요한 빈 행 방지 */
    .pg-form-body .dtl-cell > .dtl-head:empty,
    .pg-form-body .dtl-cell > .dtl-data:empty {
        display: none;
    }
}

@media (max-width: 64rem) {
    /* 1024px 이하일 때 적용될 스타일 */
}

@media (max-width: 48rem) {
    /* 768px 이하일 때 적용될 스타일 */
}