/* =========================================================
   AGIJIGI RESPONSIVE
   CSS import 구조 대응: page CSS보다 먼저 불려도 적용되도록
   모든 반응형 선택자에 body 범위를 추가했습니다.

   0~599     Mobile
   600~767   Large mobile / small tablet
   768~1199  Tablet
   1200~     Desktop app layout
========================================================= */

:root {
    --responsive-gutter: clamp(2rem, 4vw, 5rem);
    --responsive-normal: 120rem;
    /* 960px */
    --responsive-wide: 150rem;
    /* 1200px */
    --responsive-read: 90rem;
    /* 720px */
}

html {
    min-width: 320px;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

body img,
body video,
body canvas,
body svg,
body iframe {
    max-width: 100%;
}

body .application_content,
body .form_section,
body .form_fields,
body .form_field,
body .info_row,
body .data_row,
body .data_value,
body .link_card,
body .step_card,
body .care_card,
body .schedule_table,
body .document_section {
    min-width: 0;
}

body:has(.btm_nav) {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom));
}

/* =========================================================
   600+: 큰 모바일 / 작은 태블릿
========================================================= */

@media (min-width: 600px) {
    body {
        padding-left: 0;
        padding-bottom: calc(8rem + env(safe-area-inset-bottom));
    }

    body .btm_nav {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: none;
        width: 100%;
        height: calc(7.5rem + env(safe-area-inset-bottom));
        padding: 0 0 env(safe-area-inset-bottom);
        border-top: 1px solid var(--color-border-100);
        border-right: 0;
        box-shadow: none;
    }

    body .care_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .photo_viewer_sheet {
        top: auto;
        right: 50%;
        bottom: 0;
        left: auto;
        width: min(calc(100% - 6rem), 80rem);
        border-radius: 3rem 3rem 0 0;
        opacity: 1;
        transform: translate(50%, 100%);
    }

    body .photo_viewer.is_open .photo_viewer_sheet {
        transform: translate(50%, 0);
    }

    body .photo_viewer_handle {
        display: block;
    }

    /* body #footer {
        display: grid;
        grid-template-columns: 18rem minmax(0, 1fr);
        align-items: start;
        gap: 4rem;
    }

    body #footer .agency {
        align-items: flex-start;
        flex-direction: column;
        gap: 3rem;
    } */

    /* 공통 콘텐츠: body는 고정하지 않고 각 화면만 유동 제한 */

    /* Main */

    body .quick_btn>.wide {
        min-height: 12rem;
    }

    body .quick_btn {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    body .quick_btn>.grid {
        display: contents;
    }

    body .quick_btn>.grid .link_card {
        min-height: 14rem;
    }

    body .progress {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    body .progress>.step_card {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        width: 100%;
        height: auto;
        padding: 2rem;
    }

    body .progress>.step_card>.head {
        width: 100%;
        padding-bottom: 2rem;
    }

    body .progress>.step_card>.align_box {
        width: 100%;
    }

    body .progress>.step_card>.align_box+.align_box {
        padding-top: 2rem;
        border-top: 1px solid var(--color-border-100);
    }

    body .progress>.step_card .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    body .progress>.step_card .grid> :only-child {
        grid-column: 1 / -1;
    }

    body .guide_swiper {
        padding-right: 0 !important;
    }

    /* Reservation / Mypage form */
    body .reservation_form .form_fields,
    body .mypage .form_fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 2rem;
    }

    body .reservation_form .form_field:has(.address_fields),
    body .mypage .form_field:has(.address_fields),
    body .mypage .form_field:has(.resident_row),
    body .reservation_form .form_field:has(.resident_row),
    body .reservation_form .form_field:has(textarea) {
        grid-column: 1 / -1;
    }

    body .resident_row,
    body .address_fields,
    body .service_radio_group,
    body .condition_check_group,
    body .feeding_radio_group,
    body .record_options,
    body .record_field .radio_group {
        gap: 1rem;
    }

    /* Payment */
    body .payment_form>.form_section:first-child,
    body .payment_form>.bottom_actions {
        grid-column: 1 / -1;
    }

    body .service_page .service_question:has(.service_calendar),
    body .service_page .service_question:has(.service_notice),
    body .service_page .service_question:last-child {
        grid-column: 1 / -1;
    }

    /* Contract / schedule */
    body .schedule_table_head,
    body .schedule_table_row,
    body .schedule_table_total {
        grid-template-columns: 1.4fr 1fr 1fr;
        padding-right: 3rem;
        padding-left: 3rem;
    }

    body .standard_schedule li {
        grid-template-columns: 12rem minmax(0, 1fr);
    }

    body .standard_schedule li::before {
        left: 12rem;
    }

    /* Board */
    body .board_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 2rem;
    }

    body .board_list>.empty,
    body .board_list>.empty_txt {
        grid-column: 1 / -1;
    }

    body .board_list .diary_card,
    body .board_list .guide_card {
        height: 100%;
    }

    body .board_list .diary_card .tit {
        display: -webkit-box;
        height: 6rem;
        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body .board_list .diary_card .txt {
        display: -webkit-box;
        height: 11.25rem;
        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    body .board_list .diary_card .thumb {
        width: 100%;
        aspect-ratio: 455 / 236;
        object-fit: cover;
    }

    body .board_list .diary_card .meta {
        margin-top: auto;
    }


    body .record_options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }


    /* Login */
    body .login_content {
        display: grid;
        align-items: center;
        gap: 15rem;
        width: 60rem;
        height: 100%;
        margin: 0 auto;
    }

    body .login_content .brand_logo {
        width: 100%;
        height: auto;
        max-height: 32rem;
        object-fit: contain;
    }

    /* Legal documents */
    body .document_page,
    body .terms_document {
        width: min(100%, var(--responsive-read));
        margin-right: auto;
        margin-left: auto;
    }

    body .document_section_content,
    body .terms_section {
        line-height: 1.8;
    }

    body .document_info>div,
    body .document_contact_list>div {
        grid-template-columns: 14rem minmax(0, 1fr);
    }

    body #footer .tgl_box.is_open {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 4rem;
    }

    body #footer .tgl_box {
        display: none;
        gap: 2rem;
    }

    body .service_calendar_day {
        max-width: none;
        height: 9rem;
    }
}

/* =========================================================
   768+: 일반 태블릿
========================================================= */

@media (min-width: 768px) {

    body .board_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body .record_options {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    body .service_calendar_day {
        min-height: 6rem;
    }

    body .manager_card {
        padding: 3rem;
    }

    body .progress>.step_card>.head+.align_box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 30rem;
        align-items: center;
        gap: 2rem;
    }

    /* 4단계: 상태와 특이사항을 두 줄로 배치 */
    body .progress .step_card.summary>.head+.align_box:has(> .commet) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;

        grid-template-columns: none !important;
    }

    /* 오늘의 산후일지 */
    body .progress .step_card.summary>.head+.align_box:has(> .commet)>.status {
        width: 100%;
    }

    /* 특이사항 */
    body .progress .step_card.summary>.head+.align_box:has(> .commet)>.commet {
        width: 100%;
        max-width: none;
        min-height: auto;
        padding: 2rem;
    }

    body .brand_banner .brand_box {
        display: grid;
        grid-template-columns: 24rem minmax(0, 45rem);
        column-gap: 3rem;
        align-items: center;
        justify-content: center;

        min-height: 24rem;
        padding: 4rem 6rem;

        text-align: left;
    }

    body .brand_banner .brand_box>img {
        width: 24rem;
        height: 20rem;
        object-fit: contain;
    }

    body .brand_banner .txt_box {
        width: 100%;
        transform: translateY(-0.5rem);
    }

    body .brand_banner .tit {
        font-size: 3rem;
        font-weight: var(--bold);
    }

    body .brand_banner .txt {
        margin-top: 2rem;
        font-size: 2rem;
        line-height: 1.6;
    }

    body .brand_banner .txt br {
        display: none;
    }

    /* Care */

    body .care_card {
        height: 100%;
    }

    body .care_detail>.care_user {
        grid-column: 1 / -1;
    }

    body .application_content:has(> .contract_number) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 3rem 2rem;
    }

    /* 기본적으로 나머지 영역은 한 줄 전체 */
    body .application_content:has(> .contract_number)>* {
        grid-column: 1 / -1;
    }

    /* 대상자 조건 */
    body .application_content:has(> .contract_number)>.form_section:nth-of-type(2),

    /* 계약정보 */
    body .application_content:has(> .contract_number)>.form_section:nth-of-type(3) {
        grid-column: auto;
        height: 100%;
    }

    body .contract_info_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
    }

    body .contract_info_list>.info_row {
        min-width: 0;
    }

    body .contract_info_list>.info_row:first-of-type {
        padding: 1.25rem 0;
    }

    body .contract_info_list>.info_row:last-of-type {
        border-bottom: 1px solid var(--color-border-100);
    }

    /* 출산 정보와 신생아 카드는 전체 너비 */
    body .contract_info_list>.info_row:has(.baby_list_box) {
        grid-column: 1 / -1;
    }

    body .contract_detail_extra>.info_row {
        border-bottom: 0;
    }

    body .contract_detail_extra>.info_row:last-of-type {
        border-bottom: 0;
    }


    body .service_page .form_section:first-child .info_list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .service_page .form_section:first-child .info_row {
        padding: 0;
        border-bottom: 0;
    }


    body .reservation_page .info_list_soft {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0;
    }

    body .reservation_page .info_list_soft>.info_row {
        height: 100%;
        padding: 2rem;

        border-bottom: 0;
    }

    /* 가운데 세로선 */
    body .reservation_page .info_list_soft>.info_row:nth-child(odd) {
        border-right: 1px solid var(--color-border-100);
    }

    /* 첫 번째 행의 가로선 */
    body .reservation_page .info_list_soft>.info_row:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border-100);
    }

    /* 결제 정보: 3열 */
    body .reservation_complete_page>.form_section:nth-of-type(2)>.info_list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
    }

    body .reservation_complete_page>.form_section:nth-of-type(2)>.info_list>.info_row {
        padding: 2rem;
        border-bottom: 0;
    }

    body .reservation_complete_page>.form_section:nth-of-type(2)>.info_list>.info_row+.info_row {
        border-left: 1px solid var(--color-border-100);
    }

    /* 결제 페이지와 완료 페이지의 예약 정보: 2열 */
    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
        padding: 0 2rem;
    }

    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list)>.info_row {
        height: 100%;
        padding: 2rem 0;
    }

    /* 주소 */
    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list)>.info_row:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* 출산경험 */
    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list)>.info_row:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    /* 출산예정일 */
    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list)>.info_row:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    /* 메모 */
    body :is(.payment_page .payment_form>.form_section:first-of-type>.info_list,
        .reservation_complete_page>.form_section:nth-of-type(3)>.info_list)>.info_row:nth-child(7) {
        grid-column: 1 / -1;
        grid-row: 5;
    }

}

/* =========================================================
   1024+: 마우스를 사용하는 작은 PC
========================================================= */

@media (min-width: 1024px) {

    body .mypage,
    body .withdraw_page,
    body .post_view,
    body .post_toolbar,
    body .write_category,
    body .write_title,
    body .write_toolbar,
    body .write_content,
    body .care_detail,
    body .care_write,
    body .record_content,
    body .record_header,
    body .alarm_page,
    body .care_list,
    body .application_page,
    body .reservation_page,
    body .contract_page {
        width: 100rem;
        max-width: calc(100% - 4rem);
        margin-inline: auto;
    }

    body .bottom_actions {
        display: grid;

        right: 0;
        left: 0;

        width: auto;
        max-width: none;
        margin: 0;

        justify-content: center;
        transform: none;
    }

    /* 버튼 2개 */
    body .bottom_actions:has(> :nth-child(2)) {
        grid-template-columns: 10rem minmax(0, 85.5rem);
    }

    /* 버튼 1개 */
    body .bottom_actions:not(:has(> :nth-child(2))) {
        grid-template-columns: minmax(0, 96rem);
    }


    body .quick_btn {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem;
    }

    /* 중간 grid 구조 해제 */
    body .quick_btn>.grid {
        display: contents;
    }

    /* 모든 카드 형태 통일 */
    body .quick_btn .link_card,
    body .quick_btn .link_card.wide,
    body .quick_btn .grid .link_card {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: 100%;
        min-width: 0;
        min-height: 20rem;
        padding: 2.5rem;
        padding-bottom: 8rem;

        border-radius: 2rem;
    }

    /* 글자 영역 */
    body .quick_btn .link_card .txt_box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

        width: 100%;
        min-width: 0;
    }

    body .quick_btn .link_card .tit {
        font-size: var(--font-md);
        line-height: 1.4;
    }

    body .quick_btn .link_card .txt {
        font-size: var(--font-sm);
        line-height: 1.5;
    }

    /* 모든 아이콘 오른쪽 아래로 통일 */
    body .quick_btn .link_card>img,
    body .quick_btn .grid .link_card>img {
        position: absolute;
        right: 2rem;
        bottom: 2rem;

        width: 6rem;
        height: 6rem;
        object-fit: contain;
    }

    body .service_page .baby_list,
    body .service_page .service_price,
    body .service_page .service_notice {
        grid-column: 1 / -1;
    }

    body .application_content:has(.contract_number)>.contract_number,
    body .application_content:has(.contract_number)>.contract_document {
        grid-column: 1 / -1;
    }

    body .record_options {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    body #footer .tgl_box.is_open {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #footer .menu {
        gap: 2rem;
    }
}

/* =========================================================
   1200+: PC 앱 레이아웃
========================================================= */

@media (min-width: 12000px) {
    :root {
        --responsive-side-nav: 12rem;
    }


    body:has(.btm_nav) {
        padding-bottom: 0;
        padding-left: var(--responsive-side-nav);
    }

    #header .header_box,
    #sub_header .tit,
    body .quick_btn,
    body .progress,
    body .diary .main_tit,
    body .diary .diary_swiper,
    body .guide .main_tit,
    body .guide .guide_swiper,
    body .brand_banner,
    body .board_list,
    body .write_head,
    #footer {
        width: min(calc(100% - 4rem), 150rem);
        margin-inline: auto;
        padding: 2rem 0;
    }

    body .main_slide,
    body .banner .img_box {
        width: min(calc(100% - 4rem), 150rem);
        margin-inline: auto;
        padding: 0;
    }

    body .btm_nav {
        position: fixed;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(10rem, auto));
        align-content: center;
        width: var(--responsive-side-nav);
        height: 100dvh;
        padding: 3rem 1rem;
        padding-inline: 1.5rem;
        border-top: 0;
        border-right: 1px solid var(--color-border-100);
        box-shadow: .5rem 0 2rem rgb(17 17 17 / 4%);
    }

    body .btm_nav .item {
        gap: 1rem;
        width: 100%;
        border-radius: 1.5rem;
    }

    body .btm_nav .item:hover,
    body .btm_nav .item:focus-visible,
    body .btm_nav .item.is_active {
        background: var(--color-bg-blue);
    }

    body #footer {
        grid-template-columns: 28rem minmax(0, 1fr);
    }

    body .board_list,
    body .care_cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body .photo_viewer_sheet {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(calc(100% - 8rem), 80rem);
        max-height: calc(100dvh - 8rem);
        border-radius: 3rem;
        opacity: 0;
        transform: translate(-50%, calc(-50% + 3rem));
    }

    body .photo_viewer.is_open .photo_viewer_sheet {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    body .photo_viewer_handle {
        display: none;
    }

    body .guide_swiper .guide_card {
        left: 0;
    }


}

/* =========================================================
   600px ~ 1023px 또는 터치 태블릿 레이아웃
========================================================= */

@media (min-width: 600px) and (max-width: 1023px) {

    body .quick_btn .link_card,
    body .quick_btn .link_card.wide,
    body .quick_btn .grid .link_card {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        min-height: 18rem;
        padding: 2.5rem 8rem 2.5rem 2.5rem;
    }

    body .quick_btn .link_card>img {
        position: absolute;
        right: 2rem;
        bottom: 2rem;

        width: 6rem;
        height: 6rem;
        object-fit: contain;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}