/* 발표 전 반응형 보완: 각 화면의 기존 CSS 다음에 불러온다. */
/* 화면 전용 규칙이므로 발주서의 A4 인쇄 스타일에는 적용하지 않는다. */
@media screen {
    html,
    body.responsive-page {
        min-width: 0;
    }

    body.responsive-page {
        overflow-wrap: anywhere;
    }

    .responsive-page *,
    .responsive-page *::before,
    .responsive-page *::after {
        box-sizing: border-box;
    }

    .responsive-page main,
    .responsive-page :is(section, article, form, fieldset) {
        min-width: 0;
    }

    .responsive-page :is(input, select, textarea) {
        max-width: 100%;
    }

    .responsive-page :is(textarea, p, h1, h2, h3, dd) {
        overflow-wrap: anywhere;
    }

    .responsive-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 2px solid #5c6bc0;
        outline-offset: 3px;
    }

    /* 표와 주간 달력만 스크롤하며, 페이지 전체를 잘라서 숨기지 않는다. */
    .responsive-table,
    .responsive-admin .week-calendar {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .responsive-table table {
        width: 100%;
    }

    .responsive-admin .responsive-table :is(th, td) {
        font-size: 14px;
        line-height: 1.5;
    }

    .responsive-table .service-menu-table { min-width: 850px; }
    .responsive-table .customer-table { min-width: 1000px; }
    .responsive-table .treatment-table { min-width: 800px; }
    .responsive-table .recent-payment-table { min-width: 760px; }
    .material-list-page .responsive-table .material-table { min-width: 1100px; }

    .responsive-admin .service-menu-table .service-name-cell :is(strong, small) {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    /* 세로가 짧은 노트북에서도 사이드바 하단 메뉴까지 접근한다. */
    .responsive-admin :is(.admin-sidebar, .customer-admin-sidebar) {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .responsive-admin :is(.admin-sidebar, .customer-admin-sidebar) > * {
        flex-shrink: 0;
    }

    .responsive-nav-hint {
        display: none;
    }

    /* 로그인 이름이 길어져도 로고와 메뉴 사이에서 줄바꿈한다. */
    .site-header .header-inner {
        flex-wrap: wrap;
        gap: 12px 28px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .site-header .main-nav,
    .site-header .member-menu {
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px 18px;
    }

    .site-header .member-menu {
        max-width: 100%;
    }

    .site-header .login-user {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .site-header :is(.main-nav a, .member-menu a, .logout-button) {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .site-header .main-nav a:hover {
        font-weight: inherit;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* 줄바꿈 가능한 헤더와 버튼 묶음: 좁은 PC 창에서도 서로 밀어내지 않는다. */
    .responsive-admin :is(
        .dashboard-header, .page-header, .create-header, .detail-header,
        .memo-header, .treatment-header, .material-header, .form-header,
        .purchaseorder-header, .purchase-order-header, .salon-event-header,
        .service-material-header, .siteadmin-header, .payment-page-header,
        .panel-header, .payment-panel-header, .calendar-panel-header,
        .management-section-heading, .table-header, .result-summary
    ),
    .responsive-page .test-company-header {
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .responsive-admin :is(
        .header-actions, .header-buttons, .material-header-actions,
        .purchase-order-header-actions, .salon-event-header-actions,
        .filter-buttons, .event-filter-buttons, .search-buttons,
        .form-actions, .service-form-actions, .event-form-actions,
        .purchaseorder-form-actions, .payment-period-form, .period-tabs,
        .sales-period-form, .sales-period-tabs, .material-summary
    ),
    .responsive-page :is(.pagination, .user-pagination, .print-actions) {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .responsive-admin :is(
        .material-filter, .purchaseorder-filter, .event-search-section, .filter-form
    ) {
        flex-wrap: wrap;
    }

    .responsive-admin :is(
        .dashboard-content, .siteadmin-content, .service-material-page,
        .payment-admin-content, .material-admin-content, .purchaseorder-admin-content,
        .salonevent-admin-content, .stockhistory-admin-content,
        .customer-page, .customer-detail-page, .create-page, .memo-page, .treatment-page
    ) {
        min-width: 0;
    }

    .responsive-admin :is(
        .summary-content, .customer-profile-text, .stock-item > div,
        .sales-chart-frame,
        .material-search-area, .list-search-area, .keyword-group,
        .filter-field, .form-field, .edit-field
    ) {
        min-width: 0;
        max-width: 100%;
    }

    .responsive-admin :is(.page-description, .panel-subtext, .field-hint,
        .summary-description, .customer-profile-text p, .input-guide),
    .responsive-admin .panel-header > p:not(.panel-label),
    .responsive-admin .payment-panel-header p:not(.payment-panel-label) {
        color: #626b78;
        font-size: 13px;
        line-height: 1.6;
    }

    .responsive-admin :is(.summary-number, .payment-summary-card strong) {
        overflow-wrap: anywhere;
    }

    /* 자동완성 창은 입력창보다 넓어져 화면 밖으로 나가지 않는다. */
    .responsive-page :is(.recent-search-panel, .search-suggestion-list) {
        max-width: 100%;
    }
}

@media screen and (max-width: 1280px) {
    /* 250px 사이드바를 제외한 본문 너비를 기준으로 검색칸을 재배치한다. */
    .responsive-admin :is(.service-search-grid, .customer-page .search-form) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-admin .item-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-admin :is(
        .dashboard-grid, .sales-insight-grid, .siteadmin-grid,
        .payment-main-grid, .payment-bottom-grid, .customer-management-grid
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    .responsive-admin :is(
        .dashboard-content, .siteadmin-content, .service-material-page,
        .payment-admin-content, .customer-page, .customer-detail-page,
        .create-page, .memo-page, .treatment-page,
        .material-page, .purchaseorder-page, .purchase-order-page,
        .salon-event-page, .stockhistory-page
    ) {
        padding: 28px 24px 44px;
    }
}

@media screen and (max-width: 1024px) {
    /* 태블릿과 모바일에서는 관리자 메뉴를 본문 위로 이동한다. */
    .responsive-admin .admin-layout {
        display: block;
    }

    .responsive-admin :is(.admin-sidebar, .customer-admin-sidebar) {
        position: static;
        width: 100%;
        height: auto;
        padding: 16px;
        overflow: visible;
    }

    .responsive-admin :is(.sidebar-logo, .customer-sidebar-logo) {
        padding: 0 0 12px;
    }

    .responsive-admin .responsive-nav-hint {
        display: block;
        margin: 0 0 8px;
        color: #c8cbd2;
        font-size: 13px;
        line-height: 1.5;
    }

    .responsive-admin :is(.sidebar-menu, .customer-sidebar-menu) {
        flex-direction: row;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        gap: 6px;
        padding: 4px 4px 10px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .responsive-admin :is(.sidebar-menu-item, .customer-sidebar-menu-item) {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 12px;
        gap: 8px;
        white-space: nowrap;
    }

    .responsive-admin :is(.sidebar-bottom, .customer-sidebar-bottom) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 8px;
        padding-top: 8px;
    }

    .responsive-admin :is(.sidebar-logout-form, .customer-sidebar-logout-form) {
        width: auto;
        margin: 0;
    }

    .responsive-admin :is(
        .dashboard-content, .siteadmin-content, .service-material-page,
        .payment-admin-content, .material-admin-content, .purchaseorder-admin-content,
        .salonevent-admin-content, .stockhistory-admin-content,
        .customer-page, .customer-detail-page, .create-page, .memo-page, .treatment-page
    ) {
        width: 100%;
        margin-left: 0;
        min-height: 0;
    }

    /* PC와 태블릿의 중간 너비에서도 고객 메뉴가 겹치지 않는다. */
    .site-header .main-nav {
        order: 3;
        width: 100%;
    }

    .site-header .member-menu {
        margin-left: auto;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 760px) {
    /* 폼 입력 시 글자가 지나치게 작아지거나 iOS에서 자동 확대되지 않게 한다. */
    .responsive-page input:not([type="checkbox"]):not([type="radio"]),
    .responsive-page select,
    .responsive-page textarea {
        min-width: 0;
        font-size: 16px;
    }

    .responsive-admin :is(
        .dashboard-content, .siteadmin-content, .service-material-page,
        .payment-admin-content, .customer-page, .customer-detail-page,
        .create-page, .memo-page, .treatment-page,
        .material-page, .purchaseorder-page, .purchase-order-page,
        .salon-event-page, .stockhistory-page
    ) {
        padding: 24px 16px 36px;
    }

    .responsive-admin :is(.dashboard-header, .page-header, .create-header,
        .detail-header, .memo-header, .treatment-header, .material-header,
        .form-header, .purchaseorder-header, .purchase-order-header,
        .salon-event-header, .service-material-header, .siteadmin-header,
        .payment-page-header) h1 {
        font-size: 26px;
        line-height: 1.35;
    }

    .responsive-admin :is(
        .summary-grid, .service-summary-grid, .payment-summary-grid,
        .reservation-operation-grid, .customer-overview-grid,
        .grade-rule-grid, .guide-grid, .memo-guide, .preview-style-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .responsive-admin :is(
        .service-search-grid, .customer-page .search-form, .search-grid,
        .reservation-search-grid, .material-setting-form, .item-form,
        .form-grid, .form-grid.two-column, .detail-grid,
        .create-form-grid, .update-form-row, .edit-field-grid,
        .purchaseorder-form-grid, .event-form-grid, .adjustment-page .form-row,
        .grade-management-area
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    .responsive-admin .reservation-search-actions,
    .responsive-admin .purchaseorder-form-field.form-field-wide {
        grid-column: 1 / -1;
    }

    .responsive-admin :is(.search-form, .event-search-form, .filter-form),
    .responsive-page .test-company-page .search-form {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    .responsive-admin :is(.material-search-area, .list-search-area, .filter-field),
    .responsive-admin .search-form input,
    .responsive-admin .event-search-form input,
    .responsive-admin .filter-field input {
        width: 100%;
        min-width: 0;
    }

    .responsive-admin :is(.summary-card, .material-list-page .summary-card) {
        min-width: 0;
        max-width: 100%;
    }

    .responsive-admin :is(.customer-summary-card, .customer-profile,
        .customer-summary, .registration-summary, .memo-card-header,
        .item-form-footer, .item-amount-summary) {
        flex-wrap: wrap;
        min-width: 0;
        gap: 12px;
    }

    .responsive-admin .current-grade-summary {
        align-items: flex-start;
    }

    .responsive-admin .panel-header > p {
        text-align: left;
    }

    .responsive-admin :is(.dashboard-panel, .payment-panel, .setting-card,
        .form-panel, .detail-panel, .create-panel, .memo-panel, .search-section,
        .adjustment-card) {
        padding: 18px 16px;
    }

    /* 예약 선택 결과와 신청 버튼, 할인 합계를 세로로 배치한다. */
    .reservation-page .submit-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .reservation-page .reservation-price-preview {
        width: 100%;
        min-width: 0;
    }

    .reservation-page .reservation-price-preview > div,
    .reservation-page .service-detail-topline,
    .reservation-page .service-detail-meta {
        flex-wrap: wrap;
    }

    .responsive-page .detail-overlay {
        padding: 12px;
    }

    .responsive-page :is(.detail-modal, .agreement-dialog) {
        max-width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .responsive-page .test-company-page {
        width: calc(100% - 32px);
        padding: 28px 0 40px;
    }

    .responsive-page .test-company-page .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .responsive-admin .siteadmin-toast {
        right: 16px;
        left: 16px;
        bottom: 16px;
        min-width: 0;
    }
}

@media screen and (max-width: 480px) {
    .site-header .header-inner {
        padding: 14px 16px;
        gap: 10px;
    }

    .site-header .member-menu {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        gap: 4px 16px;
    }

    .site-header .login-user {
        flex-basis: 100%;
    }

    .site-header .main-nav {
        gap: 4px 16px;
    }

    .site-header :is(.main-nav a, .member-menu a, .logout-button) {
        min-height: 44px;
        font-size: 15px;
    }

    .responsive-admin :is(
        .summary-grid, .service-summary-grid, .payment-summary-grid,
        .reservation-operation-grid, .customer-overview-grid, .grade-rule-grid,
        .guide-grid, .memo-guide, .preview-style-grid
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    .responsive-page :is(.phone-verification-row, .verification-row, .member-id-row) {
        flex-direction: column;
        align-items: stretch;
    }

    .responsive-page :is(.phone-verification-row, .verification-row, .member-id-row)
    > :is(input, button) {
        width: 100%;
        min-width: 0;
    }

    .responsive-page :is(.signup-card, .login-card, .recovery-card) {
        padding: 24px 18px;
    }

    .responsive-page .auth-logo {
        font-size: 32px;
    }

    .responsive-page :is(.signup-page, .recovery-page, .login-page) {
        padding: 32px 16px;
    }

    .responsive-page .agreement-dialog-header {
        gap: 12px;
    }

    .responsive-page .agreement-dialog-close {
        flex-shrink: 0;
    }
}

/* 인쇄 화면도 휴대전화에서는 읽을 수 있게 표시하고, 실제 인쇄는 기존 A4를 쓴다. */
@media screen and (max-width: 900px) {
    .responsive-print-page {
        padding: 16px;
    }

    .responsive-print-page .print-page {
        width: 100%;
        min-height: 0;
        padding: 24px 16px;
    }

    .responsive-print-page :is(.order-information, .order-items) {
        max-width: 100%;
        overflow-x: auto;
    }

    .responsive-print-page :is(.order-information, .order-items) table {
        min-width: 600px;
    }

    .responsive-print-page .document-header h1 {
        font-size: 26px;
        letter-spacing: 6px;
    }
}