/* =========================================================================
   mobile.css — 모바일·태블릿 반응형 보정
   - 모든 커스텀 CSS(design.css, custom.css, front_common.css) 뒤에 로드한다.
   - 데스크톱(1200px 이상) 화면은 바꾸지 않고, 그보다 좁은 폭에서만 규칙을 추가한다.
   - 기준 폭: 1199.98px(사이드메뉴 접힘), 767.98px(모바일), 575.98px(소형 모바일)
   ========================================================================= */

/* ---------- 공통: 이미지·모달·표 ---------- */
/* 본문·첨부 이미지는 화면 폭에 맞춰 축소하되 비율을 유지한다.
   아바타·아이콘처럼 CSS로 크기를 고정한 이미지는 제외하고, 비율이 다른 원본은 잘라서(object-fit) 채운다. */
.content-body img:not(.img_round):not(.round):not(.pr_img img):not(.d_img img):not(.d_profile img):not(.thum_img img),
.card img:not(.img_round):not(.round):not(.pr_img img):not(.d_img img):not(.d_profile img):not(.thum_img img) {
    max-width: 100%;
    height: auto;
}
img.img_round,
img.round,
.pr_img img,
.d_img img,
.d_profile img,
.thum_img img,
.fc-event img {
    object-fit: cover;
    object-position: center;
}
.int_wrap .img_round,
.profile_wrap .pr_img img,
.pr_wrap .d_img img {
    flex-shrink: 0;
}

/* 좁은 화면에서 세로로 쌓이는 표(구매·도서 품목, 결재선). td의 data-label을 항목명으로 보여준다 */
@media (max-width: 767.98px) {
    .table-responsive:has(> table.table-stack-mobile) {
        white-space: normal;
        overflow-x: visible;
        background: none;
    }
    table.table-stack-mobile,
    table.table-stack-mobile > thead,
    table.table-stack-mobile > thead > tr,
    table.table-stack-mobile > tbody,
    table.table-stack-mobile > tbody > tr,
    table.table-stack-mobile > tbody > tr > td,
    table.table-stack-mobile > tfoot,
    table.table-stack-mobile > tfoot > tr {
        display: block;
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }
    table.table-stack-mobile > thead > tr > th {
        display: none;
    }
    table.table-stack-mobile > thead > tr > th:last-child:has(button) {
        display: block;
        width: 100%;
        text-align: right;
        border: 0;
        background: none;
        padding: 0 0 0.5rem;
    }
    table.table-stack-mobile > tbody > tr {
        border: 1px solid #e3e8f0;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.75rem;
        text-align: left;
    }
    table.table-stack-mobile > tbody > tr > td {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.35rem 0 !important;
        border: 0 !important;
        white-space: normal;
        text-align: left;
    }
    table.table-stack-mobile > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 5rem;
        color: #7c8394;
        font-weight: 600;
        font-size: 0.8125rem;
    }
    table.table-stack-mobile > tbody > tr > td:not([data-label])::before,
    table.table-stack-mobile > tbody > tr > td[data-label=""]::before {
        display: none;
    }
    table.table-stack-mobile > tbody > tr > td[data-label=""] {
        justify-content: flex-end;
    }
    table.table-stack-mobile > tbody > tr > td > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    table.table-stack-mobile > tbody > tr > td > img {
        flex: 0 0 auto;
    }
    table.table-stack-mobile > tbody > tr > td .int_wrap {
        justify-content: flex-start;
    }
    table.table-stack-mobile > tfoot > tr {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-top: 1px solid #e3e8f0;
    }
    table.table-stack-mobile > tfoot > tr > th {
        display: block;
        border: 0;
        padding: 0;
        background: none;
        width: auto;
    }
    table.table-stack-mobile > tfoot > tr > th:first-child {
        flex: 0 0 5rem;
        text-align: left;
    }
    table.table-stack-mobile > tfoot > tr > th:nth-child(2) {
        flex: 1 1 auto;
    }
    table.table-stack-mobile > tfoot > tr > th:empty {
        display: none;
    }

    /* 캘린더 주간 목록 뷰 */
    .fc .fc-list {
        border: 0;
    }
    .fc .fc-list-day-cushion,
    .fc .fc-list-event td {
        padding: 0.6rem 0.75rem;
    }
    .fc .fc-toolbar.fc-header-toolbar {
        margin-bottom: 0.75rem;
    }
    .fc .fc-toolbar-chunk .fc-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* DataTables responsive 자식 행(숨긴 열 펼침) */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eff3f8;
    white-space: normal;
    text-align: left;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
    border-bottom: 0;
}
table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 5.5rem;
    color: #7c8394;
    font-weight: 600;
}
table.dataTable > tbody > tr.child span.dtr-data {
    flex: 1;
}
table.dataTable > tbody > tr.child span.dtr-data .int_wrap {
    justify-content: flex-start;
}
/* 펼침 버튼 열: 좁게, 행 클릭(상세 이동)과 분리되도록 시각적으로 구분 */
table.dataTable > thead > tr > th.dtr-control-head,
table.dataTable > tbody > tr > td.dtr-control {
    width: 2.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control::before {
    top: 50%;
    left: 50%;
    margin-top: -0.55rem;
    margin-left: -0.55rem;
    line-height: 1rem;
}
/* 숨길 열이 없어 펼침 버튼이 필요 없으면 열을 비운다 */
table.dataTable.collapsed > thead > tr > th.dtr-control-head,
table.dataTable.collapsed > tbody > tr > td.dtr-control {
    width: 2.25rem;
}
table.dataTable:not(.collapsed) > thead > tr > th.dtr-control-head,
table.dataTable:not(.collapsed) > tbody > tr > td.dtr-control {
    width: 0;
    padding: 0;
    border-left: 0;
}

/* ---------- 1200px 미만: 사이드메뉴가 접힌 상태 ---------- */
@media (max-width: 1199.98px) {
    /* 헤더 우측 영역(알림·프로필)은 유지하고 시각·직급 텍스트만 숨긴다.
       design.css는 .navbar-container .nav 전체를 숨겨 모바일에서 로그아웃이 불가능했다. */
    .navbar-container .nav {
        display: flex;
    }
    .navbar-container .nav > li:has(.refresh_time) {
        display: none;
    }
    .refresh_time {
        display: none;
    }
    .profile_wrap .pr_text {
        display: none;
    }
    .profile_wrap .pr_img img {
        width: 34px;
        height: 34px;
    }
    .header-navbar .navbar-container ul.navbar-nav li > a.nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .h2_icon {
        font-size: 20px;
        min-width: 0;
    }
    .h2_icon {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 상단 헤더와 본문 사이 여백 축소.
       기본값은 헤더 안쪽 여백 22px(위아래) + 본문 시작 111px이라 좁은 화면에서 빈 공간이 커 보인다.
       헤더 안쪽 여백을 줄이고, 고정 헤더에 가려지지 않을 만큼만 본문을 내린다. */
    .header-navbar {
        min-height: 0;
    }
    /* 헤더 안쪽 여백은 `.navbar-floating .navbar-container:not(.main-menu-content)`(1.375rem)가 정한다 */
    .navbar-floating .navbar-container:not(.main-menu-content) {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }
    /* 본문 시작 위치는 `html body .app-content`가 !important로 정하므로 같은 방식으로 위쪽만 덮어쓴다.
       값은 줄인 헤더 높이(약 64px)에 여유 12px을 더한 값이다. 좌우 여백은 원래대로 둔다. */
    html body .app-content {
        padding-top: 4.375rem !important;   /* 헤더 약 65px + 간격 5px */
    }

    /* 사이드메뉴 끝의 내 정보·로그아웃 항목. 구분선만 두고 간격은 한 행 수준으로 붙인다 */
    .main-menu .navigation > li.menu-account {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #e3e8f0;
    }
    /* 펼침 화살표(a::after)는 위치 기준이 될 조상을 찾는데, 이 항목만 li에 padding이 있어
       글자보다 그만큼 위에 떠 있었다. a를 기준으로 삼아 다른 그룹과 같게 맞춘다. */
    .main-menu .navigation > li.menu-account > a {
        position: relative;
    }
}

/* ---------- 768px 미만: 모바일 ---------- */
@media (max-width: 767.98px) {
    .app-content.content .content-wrapper.p-0 .card {
        border-radius: 0.5rem;
    }

    /* 목록 상단 탭: 가로 스크롤 대신 줄바꿈. 스크롤바가 숨겨지는 모바일에서는 잘린 탭을 알아채기 어렵다 */
    .row.d_flex.me2 {
        margin: 1rem 1rem 0 0;
    }
    .sorting_wrap ul {
        margin: 1rem 1rem 0;
        overflow-x: visible;
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
    .sorting_wrap ul li {
        margin-right: 20px;
        flex: 0 0 auto;
    }
    .sorting_wrap ul li a {
        padding-bottom: 10px;
        white-space: nowrap;
    }

    /* 검색 영역 */
    .search_wrap {
        margin-bottom: 0;
    }

    /* 상세 상단: 제목 줄바꿈 허용, 버튼은 줄바꿈 */
    .detail_top {
        flex-direction: column;
        align-items: stretch;
    }
    .detail_top .title_wrap .title {
        white-space: normal;
        word-break: keep-all;
    }
    /* 상단 버튼(결재승인·반려·인쇄 등)은 줄바꿈 없이 한 줄에서 폭을 나눠 갖는다.
       버튼 사이   텍스트 노드가 익명 flex 항목이 되므로 gap 대신 버튼 여백으로 간격을 준다. */
    .detail_top .detail_btn_wrap,
    .detail_top .btns_wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 0.75rem;
        padding: 0;                   /* .detail_top이 이미 좌우 여백을 주므로 안쪽 여백(1.5rem)은 뺀다 */
    }
    .detail_top .detail_btn_wrap > .btn,
    .detail_top .btns_wrap > .btn {
        flex: 1 1 0;
        min-width: 0;                 /* .btn_detail의 min-width:90px보다 우선해 더 좁아질 수 있게 한다 */
        margin: 0 0.25rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }
    .detail_top .detail_btn_wrap > .btn:first-child,
    .detail_top .btns_wrap > .btn:first-child {
        margin-left: 0;
    }
    .detail_top .detail_btn_wrap > .btn:last-child,
    .detail_top .btns_wrap > .btn:last-child {
        margin-right: 0;
    }
    .detail_top .detail_btn_wrap > .btn > span,
    .detail_top .btns_wrap > .btn > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 작업 버튼 줄은 상세 상단과 같은 기조로 한 줄에 배치한다.
       대상: 상세 하단(.detail_btn_wrap > .left/.right), 카드 헤더 우측 버튼, 모달 푸터.
       버튼이 5개 이상이면 한 줄에 넣으면 글자가 뭉개지므로 그때만 줄바꿈을 허용한다. */
    .detail_btn_wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .detail_btn_wrap > .right {
        flex: 1 1 100%;               /* 좌측 묶음과 줄을 나눠 쓰던 기존 모바일 동작 유지 */
    }
    .detail_btn_wrap > .left,
    .detail_btn_wrap > .right,
    .card-header.justify-content-end,
    .modal-footer {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }
    .detail_btn_wrap > .left > .btn,
    .detail_btn_wrap > .right > .btn,
    .card-header.justify-content-end > .btn,
    .modal-footer > .btn {
        flex: 1 1 0;
        min-width: 0;                 /* .btn_detail의 min-width를 덮어 더 좁아질 수 있게 한다 */
        margin: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }
    .detail_btn_wrap > .left > .btn > span,
    .detail_btn_wrap > .right > .btn > span,
    .card-header.justify-content-end > .btn > span,
    .modal-footer > .btn > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .detail_btn_wrap > .left:has(> button:nth-of-type(5)),
    .detail_btn_wrap > .right:has(> button:nth-of-type(5)),
    .card-header.justify-content-end:has(> button:nth-of-type(5)),
    .modal-footer:has(> button:nth-of-type(5)) {
        flex-wrap: wrap;
    }

    /* 모달: 화면 폭에 맞춤 */
    .modal .modal-dialog.modal-xl,
    .modal .modal-dialog.modal-lg {
        max-width: none;
        margin: 0.5rem;
    }
    .modal .modal-body {
        padding: 1rem;
    }

    /* 목록 하단: '보기 N개'·'검색결과 N건'과 페이지 번호를 한 줄에 둔다.
       Bootstrap col-12 때문에 두 칸이 세로로 쌓이던 것을 폭 자동으로 바꾼다. */
    .dataTables_wrapper .row:has(.dataTables_paginate) {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }
    .dataTables_wrapper .row:has(.dataTables_paginate) > [class*="col-"] {
        width: auto;
        flex: 0 0 auto;           /* 좌측 '보기 N개'·'검색결과 N건'은 줄어들지 않는다 */
        padding-left: 0;
        padding-right: 0;
    }
    .dataTables_wrapper .row:has(.dataTables_paginate) > [class*="col-"]:has(.dataTables_paginate) {
        margin-left: auto;        /* 페이지 번호는 오른쪽 끝 */
        flex: 0 1 auto;           /* 자리가 모자라면 번호 쪽이 줄어든다 */
        min-width: 0;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 0;
    }
    .dataTables_wrapper .dataTables_paginate {
        margin: 0;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
    }
    /* 페이지 수가 많으면 번호 줄만 가로로 넘겨 본다(좌측 문구와 하단 바는 그대로 유지) */
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%;
        margin: 0;
    }
    .dataTables_wrapper .dataTables_paginate .pagination::-webkit-scrollbar {
        display: none;
    }
    .dataTables_wrapper .dataTables_paginate .pagination > li {
        flex: 0 0 auto;
    }

    /* 목록 상단 작업 버튼(공지관리의 노출·숨기기·삭제 등)도 한 줄에 둔다.
       992px 이하에서 `.btn_toplist { flex-wrap: wrap }`으로 줄바꿈되고, 버튼 min-width 110px이 원인이다.
       버튼이 5개 이상이면 글자가 뭉개지므로 그때만 줄바꿈을 허용한다. */
    .btn_toplist {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .btn_toplist > li {
        min-width: 0;
        margin-right: 0;
        margin-bottom: 0;
    }
    /* 버튼이 2개 이상일 때만 폭을 나눠 갖는다. 1개뿐이면 원래 크기를 유지한다. */
    .btn_toplist:has(> li:nth-of-type(2)) {
        width: 100%;
    }
    .btn_toplist:has(> li:nth-of-type(2)) > li {
        flex: 1 1 0;
    }
    .btn_toplist:has(> li:nth-of-type(2)) > li > .btn,
    .btn_toplist:has(> li:nth-of-type(2)) > li .btn_wrap {
        width: 100%;
        min-width: 0;                 /* .w_2의 110px보다 좁아질 수 있게(3개가 한 줄에 들어가도록) */
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .btn_toplist > li > .btn,
    .btn_toplist > li .btn_wrap {
        white-space: nowrap;
    }
    .btn_toplist > li .btn_wrap i {
        margin-right: 0.25rem;
        flex: 0 0 auto;
    }
    .btn_toplist > li .btn_wrap span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn_toplist:has(> li:nth-of-type(5)) {
        flex-wrap: wrap;
    }

    /* 표: 가로 스크롤이 남는 경우 잘림을 눈치챌 수 있게 오른쪽 그림자 */
    .table-responsive {
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
            linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)),
            linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* 캘린더 툴바: 이전·다음, 날짜, 월/목록 전환을 한 줄에 둔다.
       app-calendar.css가 mobile.css보다 뒤에 로드되므로 `.app-calendar`를 붙여 명시도를 높인다. */
    .app-calendar .fc .fc-toolbar,
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: center;
    }
    .app-calendar .fc .fc-toolbar .fc-toolbar-chunk,
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        min-width: 0;
    }
    /* app-calendar.css가 700px 이하에서 마지막 묶음을 1rem 내리는 규칙을 무효화한다(같은 줄 유지) */
    .app-calendar .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-of-type,
    .app-calendar .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
        margin-top: 0;
    }
    .app-calendar .fc .fc-toolbar .fc-toolbar-chunk:nth-child(2),
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
        flex: 1 1 auto;               /* 가운데 날짜가 남는 폭을 쓰고 넘치면 줄임표 */
        justify-content: center;
    }
    .app-calendar .fc .fc-toolbar .fc-toolbar-chunk:first-child,
    .app-calendar .fc .fc-toolbar .fc-toolbar-chunk:last-child,
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:first-child,
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
        flex: 0 0 auto;
    }
    .app-calendar .fc .fc-toolbar-title,
    .fc .fc-toolbar-title {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-calendar .fc .fc-daygrid-day-number,
    .fc .fc-daygrid-day-number,
    .app-calendar .fc .fc-col-header-cell-cushion,
    .fc .fc-col-header-cell-cushion {
        font-size: 0.8rem;
    }
    /* 한 칸이 40~50px뿐이라 app-calendar.css의 좌우 여백 0.5rem을 쓰면 '추석' 같은 두 글자도 잘린다 */
    .app-calendar .fc .fc-daygrid-event-harness .fc-event,
    .fc .fc-daygrid-event-harness .fc-event,
    .app-calendar .fc .fc-daygrid-event,
    .fc .fc-daygrid-event {
        font-size: 0.7rem;
        padding: 2px 2px;
    }
    .app-calendar .fc .fc-daygrid-event .fc-event-title,
    .fc .fc-daygrid-event .fc-event-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 월/목록 전환 버튼 폭 맞추기.
       선택된 버튼(.fc-button-active)만 좌우 여백이 24px로 커서 '월'이 '목록'보다 넓어 보였다.
       이전·다음 화살표 버튼은 원래 크기를 유지하도록 제외한다. */
    .app-calendar .fc .fc-toolbar .fc-button-group .fc-button:not(.fc-prev-button):not(.fc-next-button),
    .app-calendar .fc .fc-toolbar .fc-button-group .fc-button.fc-button-active:not(.fc-prev-button):not(.fc-next-button),
    .fc .fc-toolbar .fc-button-group .fc-button:not(.fc-prev-button):not(.fc-next-button) {
        min-width: 3rem;
        padding: 0.4rem 0.5rem;
        justify-content: center;
    }

    /* 푸터 */
    .footer p {
        text-align: center;
    }
}

/* ---------- 576px 미만: 소형 모바일 ---------- */
@media (max-width: 575.98px) {
    .app-calendar .fc .fc-toolbar-title,
    .fc .fc-toolbar-title {
        font-size: 0.9rem;
    }
    .app-calendar .fc .fc-daygrid-event-harness .fc-event,
    .fc .fc-daygrid-event-harness .fc-event {
        padding: 2px 1px;
    }
    .content-body .card .row.d_flex.me2 > [class*="col-"] {
        padding-left: 0;
    }
    .sorting_wrap ul li a {
        font-size: 0.8125rem;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        text-align: left;
    }
    .modal .modal-dialog.modal-xl,
    .modal .modal-dialog.modal-lg {
        margin: 0;
    }
}

/* 자료실·FAQ: 좌측 분류 트리가 첫 화면을 다 차지하므로 접이식 선택 바로 바꾼다(faq-nav.js) */
@media (max-width: 767.98px) {
    .faq-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        margin-bottom: 0.75rem;
        padding: 0.7rem 1rem;
        border: 1px solid #d8d6de;
        border-radius: 0.5rem;
        background-color: #fff;
        color: #5e5873;
        font-weight: 600;
        text-align: left;
    }
    .faq-nav-toggle-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /* 키보드로 이동했을 때 어디에 있는지 보이게 한다 */
    .faq-nav-toggle:focus-visible {
        outline: 2px solid #7367f0;
        outline-offset: 2px;
    }
    .faq-nav-toggle-arrow {
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid #6e6b7b;
        border-bottom: 2px solid #6e6b7b;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s ease;
    }
    .faq-nav-toggle[aria-expanded="true"] .faq-nav-toggle-arrow {
        transform: translateY(2px) rotate(-135deg);
    }
    /* .faq-navigation은 d-flex(!important)를 달고 있어 같은 무게로 맞선다 */
    .faq-navigation.faq-nav-panel {
        display: none !important;
    }
    .faq-navigation.faq-nav-panel.is-open {
        display: flex !important;
    }
}

/* 사이드 메뉴가 서랍이 되는 폭. 로고 자리를 줄이고 터치 목표를 키운다(side-menu.js와 함께) */
@media (max-width: 1199.98px) {
    /* 기본값 260px는 .vertical-overlay-menu.menu-hide .main-menu가 정하므로 선택자를 그대로 맞선다.
       메뉴명이 길어 '전자결재 문서 관리'처럼 잘리는 것을 줄인다.
       원래 테마는 'left: -260px + 열 때 translate3d(260px)'로 숨기는데, 이 방식은 폭을 260px보다
       넓히면 닫힌 메뉴가 화면 왼쪽으로 삐져나와 햄버거 버튼을 덮는다(탭이 먹지 않음).
       폭과 무관하게 자기 너비만큼 밀어두는 방식으로 바꾼다. */
    .vertical-overlay-menu .main-menu,
    .vertical-overlay-menu.menu-hide .main-menu {
        width: 82vw;
        max-width: 300px;
        left: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .vertical-overlay-menu.menu-open .main-menu {
        left: 0;
        transform: translate3d(0, 0, 0);
    }
    /* 스와이프용 감지 영역이 헤더까지 덮어 햄버거 버튼 왼쪽이 눌리지 않았다. 헤더 아래부터 잡는다. */
    .drag-target {
        top: 4.375rem;
    }
    /* 로고 영역이 129px로 화면 높이의 15%를 쓰고 있었다 */
    .main-menu .navbar-header {
        padding: 0.75rem 1rem 0.75rem 1.25rem;
    }
    .main-menu .navbar-header .logo_text {
        font-size: 1rem;
    }
    /* 하위 항목 높이가 37px로 손가락 터치 권장치(44px)에 못 미쳤다 */
    .main-menu .navigation-main .menu-content li a {
        min-height: 2.75rem;
    }
    /* 글씨가 흐려 밝은 곳에서 읽기 어려웠다(그룹명 #A7BAD1, 항목 #A1A6AE).
       선택된 항목은 보라 배경에 흰 글씨이므로 건드리지 않는다. */
    .main-menu .navigation-main > li > a .dep1 {
        color: #6e6b7b;
        font-weight: 700;
    }
    .main-menu .navigation-main .menu-content li:not(.active) > a .menu-item {
        color: #4b465c;
        font-weight: 600;
    }
}

/* 첨부파일 상자(Uppy Dashboard)는 파일이 없어도 304px를 차지해 화면을 크게 먹었다.
   file.js가 인라인 style로 height를 붙이므로 !important로 맞서고, 폭에 따라 달리 준다. */
.uppy-Dashboard-inner {
    /* 파일이 없어도 304px를 차지해 화면을 크게 먹었다. 폭은 기존대로 다 쓰고 높이만 줄인다. */
    height: 12.5rem !important;   /* 200px */
    min-height: 0 !important;
}
@media (max-width: 767.98px) {
    .uppy-Dashboard-inner {
        height: 10rem !important;   /* 160px */
    }
}

/* Uppy는 상자가 넓어지면(uppy-size--md 이상) 한 건당 186px짜리 카드 배치로 바꾼다.
   가로 공간을 크게 쓰면서 정작 파일명은 잘리므로, 넓은 화면에서도 목록형을 유지한다.
   아래 값은 좁은 화면(목록형)에서 실제로 계산된 값과 같게 맞춘 것이다. */
.uppy-Dashboard.uppy-size--md .uppy-Dashboard-Item {
    display: flex;
    float: none;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 0 10px 10px;
    border-bottom: 1px solid #eaeaea;
}
.uppy-Dashboard.uppy-size--md .uppy-Dashboard-Item-preview {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-inline-end: 12px;   /* 좁은 화면 목록형과 같은 간격 */
}
.uppy-Dashboard.uppy-size--md .uppy-Dashboard-Item-actionWrapper {
    display: flex;
    align-items: center;
}
.uppy-Dashboard.uppy-size--md .uppy-Dashboard-Item-action--remove {
    position: static;
    top: auto;
    right: auto;
    width: 22px;
    height: 22px;
    padding: 3px;
    z-index: auto;
}
.uppy-Dashboard.uppy-size--md .uppy-Dashboard-Item-progressIndicator {
    width: 18px;
    height: 18px;
}