/* ==========================================================================
   hr_responsive.css — 휴대폰·태블릿 공통 반응형 규칙 (설계서 mobile-responsive-design 4·5절, 부록 C·D)

   계약(test_responsive_contracts 가 정적으로 검사한다)
   - 모든 선택자는 ':root.rs' 로 시작한다(쉼표 뒤 포함). html.rs 는 _rs_head.html 이
     rs_enabled 일 때만 붙이므로, RESPONSIVE_UI=0 · rs_off 쿠키면 이 파일의 규칙은 전부 무효다.
   - 모든 @media 는 'screen' 을 포함한다(인쇄 보정용 @media print 만 예외).
   - PC(마우스 ≥1280) 불변: 레이아웃을 바꾸는 규칙은 폭·포인터 미디어쿼리 안에서만 둔다.
   - !important 는 "floor" 주석이 달린 블록에서만 쓴다(블록 안에 floor 표기 주석을 둔다).
   - CSS 중첩·@layer 금지.
   - 구조 전환점은 767.98 / 992.98 / 1279.98 세 곳뿐. 크기는 clamp() 로 연속 변화.
   ========================================================================== */

/* ── 토큰 + --rs-mode 센티널 ───────────────────────────────────────────────
   JS(HR.rs.mode)는 innerWidth 대신 이 센티널을 읽는다. 휴대폰 가로(≤992.98 · 높이 ≤500)는 phone. */
@media screen {
    :root.rs {
        --rs-mode: desktop;
        --rs-gutter: 24px;
        --rs-tap: 44px;
        --rs-tap-dense: 40px;
        --rs-input-fs: 16px;
        --rs-font-floor: 12px;
        --rs-font-small: 13px;
        --rs-safe-t: env(safe-area-inset-top, 0px);
        --rs-safe-r: env(safe-area-inset-right, 0px);
        --rs-safe-b: env(safe-area-inset-bottom, 0px);
        --rs-safe-l: env(safe-area-inset-left, 0px);
        --rs-kpi-value: clamp(22px, 5.2vw, 28px);
        --rs-chart-h: clamp(180px, 52vw, 260px);
        --rs-sheet-max-h: 85dvh;
        --rs-submitbar-h: 72px;
    }
}
@media screen and (max-width: 1279.98px) {
    :root.rs {
        --rs-mode: rail;
        --rs-gutter: 20px;
    }
}
@media screen and (max-width: 992.98px) {
    :root.rs {
        --rs-mode: tablet;
        --rs-gutter: 20px;
    }
}
@media screen and (max-width: 767.98px) {
    :root.rs {
        --rs-mode: phone;
        --rs-gutter: clamp(12px, 4vw, 20px);
        --rs-toast-top: calc(var(--rs-safe-t) + 12px);
        --rs-toast-right: 12px;
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs {
        --rs-mode: phone;
        --rs-gutter: clamp(12px, 3vw, 20px);
        --rs-toast-top: calc(var(--rs-safe-t) + 12px);
        --rs-toast-right: 12px;
    }
}

/* ── C18 터치 · 16px · 글자 하한 ─────────────────────────────────────────
   iOS 포커스 확대(입력 16px 미만) 방지, 터치 대상 44px. 마우스 PC(폭 ≥768 · coarse 아님)에는 닿지 않는다. */
@media screen and (pointer: coarse), screen and (any-pointer: coarse), screen and (max-width: 767.98px) {
    :root.rs {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    :root.rs input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
    :root.rs select,
    :root.rs textarea {
        font-size: 16px !important; /* floor */
    }
    :root.rs input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),
    :root.rs select {
        min-height: var(--rs-tap);
    }
    :root.rs button,
    :root.rs input[type=button],
    :root.rs input[type=submit],
    :root.rs .btn,
    :root.rs .btn-add-file,
    :root.rs .add-btn,
    :root.rs a.ad-btn {
        min-height: var(--rs-tap);
    }
    :root.rs input[type=checkbox],
    :root.rs input[type=radio] {
        width: 20px;
        height: 20px;
        flex: none;
    }
    :root.rs label.rs-check,
    :root.rs .consent label {
        min-height: var(--rs-tap);
        align-items: center;
    }
}

/* ── 폰 · 가로 폰 공통(≤767.98 또는 높이 ≤500 가로) ─────────────────────── */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    /* C23 하단 고정 제출 바 — 탭바 없는 독립 화면. 키보드가 열려도 제출 가능해야 하므로 fixed bottom. */
    :root.rs .rs-submitbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        margin: 0;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        padding: 8px calc(var(--rs-gutter) + var(--rs-safe-r)) calc(8px + var(--rs-safe-b)) calc(var(--rs-gutter) + var(--rs-safe-l));
    }
    :root.rs.rs-has-submitbar body {
        padding-bottom: calc(var(--rs-submitbar-h) + var(--rs-safe-b));
    }
    :root.rs .rs-submitbar .btn-submit {
        min-height: 48px;
        padding: 12px;
    }
    :root.rs .rs-submitbar .hint {
        margin: 6px 0 0;
        font-size: var(--rs-font-small);
        text-align: center;
    }
    :root.rs .rs-submitbar-msg {
        margin: 0 0 8px;
        font-size: var(--rs-font-small);
        font-weight: 600;
        color: #b91c1c;
        line-height: 1.4;
    }
    :root.rs .rs-submitbar-msg:empty {
        display: none;
    }
    /* C11 섹션 접기 — 요약 줄 48px */
    :root.rs details[data-rs-collapse] > summary {
        display: flex;
        align-items: center;
        min-height: 48px;
        cursor: pointer;
    }
}

/* ── 폰(세로·좁은 폭 ≤767.98): C14 라벨-값 스택 + 공개 온보딩 ─────────────── */
@media screen and (max-width: 767.98px) {
    :root.rs table[data-rs-table=kv],
    :root.rs table[data-rs-table=kv] > tbody {
        display: block;
        width: 100%;
    }
    :root.rs table[data-rs-table=kv] colgroup {
        display: none;
    }
    :root.rs table[data-rs-table=kv] > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        margin: 0 0 10px;
    }
    :root.rs table[data-rs-table=kv] th {
        display: block;
        border: 0;
        background: transparent;
        padding: 4px 0;
        font-size: var(--rs-font-small);
        white-space: normal;
    }
    :root.rs table[data-rs-table=kv] td {
        display: block;
        border: 0;
        padding: 0;
        min-width: 0;
    }
    :root.rs table[data-rs-table=kv] th:empty,
    :root.rs table[data-rs-table=kv] td:empty {
        display: none;
    }
    :root.rs table[data-rs-table=kv] input:not([type=checkbox]):not([type=radio]),
    :root.rs table[data-rs-table=kv] select {
        width: 100%;
        min-width: 0;
        border: 1px solid #cbd5e1;
        background: #fff;
        padding: 10px 12px;
        border-radius: 8px;
    }
    :root.rs [data-rs-kv] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
    :root.rs [data-rs-kv] > label {
        font-size: var(--rs-font-small);
    }
    :root.rs [data-rs-kv] input:not([type=checkbox]):not([type=radio]),
    :root.rs [data-rs-kv] select,
    :root.rs [data-rs-kv] textarea {
        width: 100%;
        min-width: 0;
    }

    /* 공개 온보딩 시트(.sheet[data-rs-sheet=public]) — 유동 거터, 카드 해제 */
    :root.rs .sheet[data-rs-sheet=public] {
        margin: 0;
        max-width: none;
        box-shadow: none;
        padding: 16px var(--rs-gutter) 32px;
    }
    :root.rs .sheet[data-rs-sheet=public] .doc-head {
        flex-wrap: wrap;
        gap: 6px 12px;
        align-items: center;
    }
    :root.rs .sheet[data-rs-sheet=public] .brand {
        order: 1;
    }
    :root.rs .sheet[data-rs-sheet=public] .legend {
        order: 2;
        margin-left: auto;
        white-space: normal;
        font-size: var(--rs-font-small);
        line-height: 1.4;
    }
    :root.rs .sheet[data-rs-sheet=public] .doc-title {
        order: 3;
        flex: 1 1 100%;
        font-size: clamp(18px, 5.4vw, 22px);
        letter-spacing: 1px;
    }
    :root.rs .sheet[data-rs-sheet=public] .rec-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* 반복행 카드를 좌우 끝까지 펼쳐 입력이 시트 거터만큼만 안쪽에 오게 한다 */
    :root.rs .sheet[data-rs-sheet=public] .rec-list {
        padding: 8px 0;
        border-left: 0;
        border-right: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .rec-row {
        padding: 10px 0 12px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .doc-box {
        padding: 12px 0 14px;
        border-left: 0;
        border-right: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .rec-grid input:not([type=checkbox]),
    :root.rs .sheet[data-rs-sheet=public] .rec-grid select,
    :root.rs .sheet[data-rs-sheet=public] .rec-grid textarea {
        padding: 10px 12px;
        border-radius: 8px;
    }
    :root.rs .sheet[data-rs-sheet=public] .rec-grid label,
    :root.rs .sheet[data-rs-sheet=public] .hint,
    :root.rs .sheet[data-rs-sheet=public] .sec-cmt,
    :root.rs .sheet[data-rs-sheet=public] .doc-slot .desc,
    :root.rs .sheet[data-rs-sheet=public] .rec-grid .fld-hint,
    :root.rs .sheet[data-rs-sheet=public] .rec-grid .money-hint {
        font-size: var(--rs-font-small);
    }
    :root.rs .sheet[data-rs-sheet=public] .hint,
    :root.rs .sheet[data-rs-sheet=public] .doc-slot .desc {
        color: #6b7280;
    }
    :root.rs .sheet[data-rs-sheet=public] .sec-head {
        flex-wrap: wrap;
        gap: 6px 8px;
    }
    :root.rs .sheet[data-rs-sheet=public] .sec-cmt {
        margin-left: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .add-btn {
        white-space: nowrap;
        padding: 8px 14px;
    }
    :root.rs .sheet[data-rs-sheet=public] .rec-row .rm {
        position: static;
        display: block;
        width: var(--rs-tap);
        height: var(--rs-tap);
        margin: 0 0 6px auto;
    }
    :root.rs .sheet[data-rs-sheet=public] .doc-slot .top {
        flex-wrap: wrap;
    }
    :root.rs .sheet[data-rs-sheet=public] .file-item {
        flex-wrap: wrap;
        gap: 6px 10px;
        min-width: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .file-item > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    :root.rs .sheet[data-rs-sheet=public] .file-del {
        min-height: var(--rs-tap);
        padding: 0 14px;
    }
    :root.rs .sheet[data-rs-sheet=public] .consent label {
        gap: 12px;
    }
    :root.rs .sheet[data-rs-sheet=public] .consent input[type=checkbox] {
        margin-top: 0;
    }
    :root.rs .sheet[data-rs-sheet=public] .btn-add-file {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
    }
    :root.rs .sheet[data-rs-sheet=public] [data-rs-rrn-btn] {
        margin-left: 0 !important; /* floor */
        margin-top: 6px;
    }
    :root.rs .sheet[data-rs-sheet=public] .rs-addr-row {
        flex-wrap: wrap;
    }
    :root.rs .sheet[data-rs-sheet=public] .rs-addr-row input {
        flex: 1 1 100%;
    }
    /* 보유 서류 미리보기 모달 — 거의 전체 화면, 닫기 44px */
    :root.rs .dpv-backdrop {
        padding: 8px;
    }
    :root.rs .dpv-box {
        width: 100%;
        height: 92vh;
        height: 92dvh;
    }
    :root.rs .dpv-close {
        width: var(--rs-tap);
        height: var(--rs-tap);
    }
}

/* ── 모든 화면 폭: 빈 오류 배너 숨김(의도된 차이) + 새 탭 링크 기본 숨김 ───── */
@media screen {
    :root.rs .msg.err:empty {
        display: none;
    }
    :root.rs .rs-newtab {
        display: none;
    }
    :root.rs [aria-invalid=true] {
        outline: 2px solid #dc2626;
        outline-offset: 2px;
    }
}
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .rs-newtab {
        display: inline-flex;
        align-items: center;
        min-height: var(--rs-tap);
        padding: 0 4px;
        color: #2563eb;
        font-size: var(--rs-font-small);
        font-weight: 600;
        text-decoration: underline;
        white-space: nowrap;
    }
}

/* ── 로그인 · 비밀번호 변경 · 403 카드(독립 화면) ───────────────────────── */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .rs-card-page .btn,
    :root.rs .rs-card-page .ad-btn {
        min-height: 48px;
    }
    :root.rs .rs-card-page .form-input {
        min-height: var(--rs-tap);
        padding: 12px 14px;
    }
    :root.rs .rs-card-page .helptext {
        font-size: var(--rs-font-small);
        color: #6b7280;
    }
    :root.rs .rs-card-page .errorlist {
        font-size: var(--rs-font-small);
    }
    :root.rs .rs-card-page .alert {
        font-size: 14px;
    }
}
@media screen and (max-width: 992.98px) {
    /* 403 홈으로 / 비밀번호 변경 돌아가기 — 폰·태블릿에서만 노출(PC 불변) */
    :root.rs a.ad-btn.rs-home {
        display: inline-flex;
        justify-content: center;
    }
}
@media screen {
    :root.rs .rs-backlink {
        display: none;
    }
}
@media screen and (max-width: 992.98px) {
    :root.rs .rs-backlink {
        display: inline-flex;
        align-items: center;
        min-height: var(--rs-tap);
        margin: -8px 0 8px;
        padding: 0 4px;
        color: var(--primary-color, #007AFF);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }
}
@media screen and (max-width: 767.98px) {
    /* 폰: 카드를 가장자리까지 펼쳐 입력이 (기기 폭 - 2×거터)를 쓰게 한다 */
    :root.rs .rs-card-page .login-container {
        max-width: none;
        padding: 0;
    }
    :root.rs .rs-card-page .login-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 28px var(--rs-gutter);
    }
    :root.rs .rs-card-page .login-card .btn {
        width: 100%;
    }
    :root.rs .ad-card {
        padding: 28px clamp(16px, 5vw, 28px);
        margin: auto;
    }
    :root.rs .ad-actions {
        flex-wrap: wrap;
    }
    :root.rs .ad-actions .ad-btn {
        flex: 1 1 140px;
        justify-content: center;
        min-height: var(--rs-tap);
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .ad-card {
        margin: auto;
        padding: 20px 24px;
    }
    :root.rs .ad-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }
    :root.rs .ad-actions .ad-btn {
        min-height: var(--rs-tap);
        justify-content: center;
    }
}
@media screen and (max-width: 992.98px) {
    /* 높이 100% 고정 박스에서 넘친 카드가 잘리지 않게 — 내용이 길면 body 가 자란다 */
    :root.rs body.rs-center-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: max(24px, var(--rs-safe-t));
        padding-bottom: max(24px, var(--rs-safe-b));
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs body.rs-center-page {
        align-items: flex-start;
    }
}

/* ══ P2a 셸 응급 — base_dashboard 공통 틀 (설계서 부록 A P2a · C04·C05·C06·C21) ═══════════════════
   G-1: 기기보다 넓은 내용이 .main-content 안에 갇히게 한다(≤1279.98 와 터치 기기). 마우스 PC ≥1280 불변. */

/* 평소(모든 폭): 신규 마크업 숨김 — 보이는 조건은 아래 폭 규칙 안에만 둔다 */
@media screen {
    :root.rs .rs-search-btn,
    :root.rs .rs-search-go,
    :root.rs .rs-search-cancel,
    :root.rs .rs-sidebar-backdrop {
        display: none;
    }
    :root.rs #sidebarToggle {
        display: none;
    }
    :root.rs .notification-item:focus-within .notification-dismiss {
        opacity: 1;
    }
}

/* G-1 — 넓은 내용이 페이지를 밀지 않게. clip 미지원 브라우저는 앞 선언(hidden)이 남는다. */
@media screen and (max-width: 1279.98px), screen and (pointer: coarse), screen and (any-pointer: coarse) {
    :root.rs {
        overflow-x: hidden;
        overflow-x: clip;
    }
    :root.rs .main-wrapper {
        min-width: 0;
    }
    :root.rs .main-content {
        min-width: 0;
        max-width: 100%;
    }
    /* C12 최소형: 넓은 표·탭바·그리드를 자기 컨테이너 안에서만 스크롤 */
    :root.rs [data-rs-scroll] {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    :root.rs [data-rs-scroll] > table {
        max-width: none;
    }
}

/* C04 앱 헤더 — 제목 1줄 말줄임, 관할 배지는 제목 아래 칩 한 줄(마크업 이동 없음) */
@media screen and (max-width: 1279.98px) {
    :root.rs .top-header {
        gap: 8px;
        padding-left: max(var(--rs-gutter), var(--rs-safe-l));
        padding-right: max(var(--rs-gutter), var(--rs-safe-r));
    }
    :root.rs .header-left {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 0;
        flex: 1 1 0;
        min-width: 0;
    }
    :root.rs .header-left #sidebarToggle {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin-right: 4px;
    }
    :root.rs .header-left .page-title {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(16px, 4.4vw, 20px);
        line-height: 1.3;
    }
    :root.rs .header-left .page-title:not(:last-child) {
        grid-row: 1;
        align-self: end;
    }
    :root.rs .header-left .scope-badge {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        justify-self: start;
        max-width: 100%;
        margin-left: 0;
        padding: 1px 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.4;
    }
    :root.rs .header-right {
        flex: none;
        gap: 4px;
    }
    :root.rs .header-actions {
        gap: 0;
    }
    :root.rs .header-search input {
        width: 200px;
        max-width: 100%;
    }
}
@media screen and (max-width: 992.98px) {
    :root.rs {
        --header-height: 56px;
        --rs-toast-top: calc(var(--rs-safe-t) + 12px);
        --rs-toast-right: 12px;
    }
    :root.rs #sidebarToggle {
        display: inline-flex;
        width: var(--rs-tap);
        height: var(--rs-tap);
        padding: 0;
        flex: none;
    }
    :root.rs .header-action-btn,
    :root.rs .rs-search-btn {
        width: var(--rs-tap);
        height: var(--rs-tap);
    }
    /* G-2 드로어: 헤더(☰)를 가리지 않도록 헤더 아래에서 열고, 배경 탭으로 닫는다 */
    :root.rs .sidebar {
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        width: min(var(--sidebar-width), 86vw);
        padding-bottom: var(--rs-safe-b);
    }
    :root.rs .rs-sidebar-backdrop {
        display: block;
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.45);
    }
    :root.rs .rs-sidebar-backdrop[hidden] {
        display: none;
    }
    :root.rs.rs-drawer-open {
        overflow: hidden;
    }
    :root.rs .nav-item {
        min-height: var(--rs-tap);
    }
    /* C06 알림 시트(태블릿): 오른쪽 360px, 기기 폭 안 */
    :root.rs .notification-dropdown {
        max-width: calc(100vw - 16px);
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs {
        --header-height: 48px;
    }
}
@media screen and (max-width: 767.98px) {
    :root.rs {
        --header-height: 52px;
    }
    :root.rs .main-content {
        padding: var(--rs-gutter);
    }
    /* 사용자 메뉴: 아바타만 */
    :root.rs .user-menu {
        padding: 0;
        width: var(--rs-tap);
        height: var(--rs-tap);
        justify-content: center;
    }
    :root.rs .user-menu-text,
    :root.rs .user-menu > .fa-chevron-down {
        display: none;
    }
    /* C05 검색: 🔍 버튼 → 헤더 아래 전폭 오버레이(같은 form, 입력은 하나) */
    :root.rs .rs-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        padding: 0;
        color: var(--color-gray-600);
        cursor: pointer;
    }
    :root.rs.rs-search-open .header-search {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 120;
        padding: 8px max(var(--rs-gutter), var(--rs-safe-r)) 8px max(var(--rs-gutter), var(--rs-safe-l));
        background: var(--color-white, #fff);
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    }
    :root.rs.rs-search-open .header-search input {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        min-height: 48px;
    }
    :root.rs.rs-search-open .header-search > i {
        left: calc(max(var(--rs-gutter), var(--rs-safe-l)) + 14px);
        z-index: 1;
    }
    :root.rs.rs-search-open .rs-search-go,
    :root.rs.rs-search-open .rs-search-cancel {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-height: 48px;
        padding: 0 14px;
        border-radius: var(--border-radius-md, 8px);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    :root.rs.rs-search-open .rs-search-go {
        border: 0;
        background: var(--color-primary, #7D0948);
        color: #fff;
    }
    :root.rs.rs-search-open .rs-search-cancel {
        border: 1px solid var(--color-gray-300, #d4d4d4);
        background: #fff;
        color: var(--color-gray-700, #404040);
    }
    /* C06 알림 시트(폰): 헤더 아래 전폭, 왼쪽 음수 좌표로 나가던 360px 고정 해소 */
    :root.rs .notification-dropdown {
        position: fixed;
        top: calc(var(--header-height) + 4px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--header-height) - 16px);
        max-height: calc(100dvh - var(--header-height) - 16px);
        flex-direction: column;
    }
    :root.rs .notification-dropdown.show {
        display: flex;
    }
    :root.rs .notification-list {
        flex: 1 1 auto;
        max-height: none;
        -webkit-overflow-scrolling: touch;
    }
    :root.rs .notification-item {
        min-height: 56px;
    }
    /* 사용자 메뉴 드롭다운이 기기 밖으로 나가지 않게 */
    :root.rs .user-dropdown {
        max-width: calc(100vw - 16px);
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .notification-dropdown {
        max-height: calc(100dvh - var(--header-height) - 8px);
    }
}
/* 알림 해제 ×: 터치에서는 hover 가 없으므로 항상 보이게, 44px */
@media screen and (pointer: coarse), screen and (any-pointer: coarse), screen and (max-width: 767.98px) {
    :root.rs .notification-dismiss {
        opacity: 1;
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
    }
}

/* C21 토스트(≤992.98): 기기 안 상단, 인라인 max-width 360px 를 기기 폭으로 */
@media screen and (max-width: 992.98px) {
    :root.rs #hrToastContainer {
        left: 12px;
        align-items: flex-end;
    }
    :root.rs #hrToastContainer > div {
        max-width: 100% !important; /* floor — hr_common showToast 인라인 max-width:360px */
    }
}

/* ══ P2a 화면 응급 보정 — 폭을 미는 국소 원점(설계서 A P2a '국소 응급'). 화면 구조 전환은 P4~P7. ═══ */
/* 열 정의 없는 grid / '1fr' 한 칸 grid 는 min-content 가 트랙을 밀어낸다 → minmax(0,1fr) */
@media screen and (max-width: 1279.98px) {
    :root.rs .p1-grid,
    :root.rs .p6-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    :root.rs .access-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    :root.rs .access-tab-btn {
        flex: none;
        white-space: nowrap;
    }
}
/* 필터 바: iPad Pro 가로(coarse ≥1280)에서도 줄바꿈 — 입퇴사 quick-actions 가 본문(1040px)을 14px 넘던 것(마우스 PC 불변) */
@media screen and (max-width: 1279.98px), screen and (pointer: coarse), screen and (any-pointer: coarse) {
    :root.rs .filter-bar {
        flex-wrap: wrap;
    }
    :root.rs .filter-bar .quick-actions {
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 1200.98px) {
    :root.rs .grid-2,
    :root.rs .grid-3,
    :root.rs .grid-2-1,
    :root.rs .grid-1-2,
    :root.rs .report-builder-container {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* 조직 트리 사이드바 + 본문(P2·P5·부서별 상세): 세로 적층 응급 규칙은 P5-shared 의 조직 트리 드로어(C19)로 대체했다 */

/* ── 열 정의 있는 grid 의 자식은 min-width:0 — 1fr 트랙이 내용 폭에 밀리지 않게 ── */
@media screen and (max-width: 1279.98px) {
    :root.rs .p1-grid > *,
    :root.rs .p1-row-kpi > *,
    :root.rs .p1-row-dist > *,
    :root.rs .p1-row-dist-3 > *,
    :root.rs .p1-row-diagnosis > *,
    :root.rs .p6-grid > *,
    :root.rs .grid-2 > *,
    :root.rs .grid-3 > *,
    :root.rs .grid-2-1 > *,
    :root.rs .grid-1-2 > *,
    :root.rs .report-builder-container > * {
        min-width: 0;
    }
    :root.rs .rs-wrap-row {
        flex-wrap: wrap;
    }
}

/* ── 직원 목록: 액션 바 줄바꿈 + 필터 패널을 시트로(C10 응급형, 패널 DOM 제자리) ── */
@media screen {
    :root.rs .rs-filter-btn,
    :root.rs .filter-panel .rs-sheet-head,
    :root.rs .rs-filter-backdrop {
        display: none;
    }
}
@media screen and (max-width: 1200.98px) {
    :root.rs .rs-filter-btn {
        display: inline-flex;
    }
    :root.rs .filter-panel.rs-sheet-open {
        display: flex;
        position: fixed;
        z-index: 3100;
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: none;
        width: min(400px, calc(100vw - 16px));
        border-radius: var(--border-radius-lg, 12px) 0 0 var(--border-radius-lg, 12px);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
        padding-bottom: var(--rs-safe-b);
    }
    :root.rs .filter-panel.rs-sheet-open .rs-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        padding: 6px 8px 6px 16px;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
        font-size: 15px;
    }
    :root.rs .filter-panel .rs-sheet-close {
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        padding: 0 12px;
        border: 0;
        background: transparent;
        color: var(--color-primary, #7D0948);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    :root.rs.rs-filter-open {
        overflow: hidden;
    }
    :root.rs.rs-filter-open .rs-filter-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3090;
        background: rgba(0, 0, 0, 0.45);
    }
}
@media screen and (max-width: 767.98px) {
    :root.rs .filter-panel.rs-sheet-open {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    }
    :root.rs .date-selector-group,
    :root.rs .btn-toolbar {
        flex-wrap: wrap;
    }
}

/* ── 인쇄: rs 컴포넌트 원복/숨김(기존 print 블록은 건드리지 않는다) ─────── */
@media print {
    :root.rs .rs-submitbar {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0;
    }
    :root.rs .rs-submitbar-msg,
    :root.rs .rs-newtab {
        display: none;
    }
    :root.rs [data-rs-table],
    :root.rs [data-rs-scroll] {
        overflow: visible;
        max-width: none;
    }
    :root.rs details[data-rs-collapse] > summary {
        min-height: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   P2b 공통 오버레이 스킨 (설계서 C07·C08·C21, 명세 p2b-spec 3절)
   - 대상: [data-rs-modal] 루트(백드롭) + [data-rs-modal-dialog]/[data-rs-modal-body]/[data-rs-modal-foot]
   - phone(<=767.98 · 가로 폰) = full/sheet, tablet(768~992.98) = 중앙 정렬. 마우스 PC(>=1280)는 닿지 않는다.
   - --rs-vvh/--rs-vvt 는 레이어 매니저(JS)가 열린 동안에만 visualViewport 값으로 채운다(없으면 dvh 폴백).
   ========================================================================== */

/* 스크롤 잠금: 키 집합이 비어 있지 않을 때 html.rs-locked(JS 가 부여) */
@media screen and (max-width: 1279.98px), screen and (pointer: coarse), screen and (any-pointer: coarse) {
    :root.rs.rs-locked {
        overflow: hidden;
        overscroll-behavior: contain;
    }
}

/* 닫기 컨트롤 터치 크기 + 제목 포커스 링 제거 */
@media screen and (max-width: 992.98px) {
    :root.rs [data-rs-modal] [data-rs-close] {
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
    }
    :root.rs [data-rs-modal] [tabindex="-1"]:focus {
        outline: none;
    }
}

/* ── phone: 백드롭을 visual viewport 에 맞추고 full / sheet 로 ── */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs [data-rs-modal] {
        top: var(--rs-vvt, 0px);
        bottom: auto;
        height: var(--rs-vvh, 100dvh);
    }
    :root.rs [data-rs-modal="full"] {
        align-items: stretch;
    }
    :root.rs [data-rs-modal="sheet"] {
        align-items: flex-end;
    }
    :root.rs [data-rs-modal] [data-rs-modal-dialog] {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none !important; /* floor — 다이얼로그 인라인 max-width(500/520/700px)와 showReasonModal 의 style.maxWidth */
        margin: 0;
    }
    :root.rs [data-rs-modal="full"] [data-rs-modal-dialog] {
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding-top: var(--rs-safe-t);
        padding-bottom: var(--rs-safe-b);
    }
    :root.rs [data-rs-modal="sheet"] [data-rs-modal-dialog] {
        max-height: min(90dvh, var(--rs-vvh, 100dvh));
        border-radius: 16px 16px 0 0;
        padding-bottom: var(--rs-safe-b);
    }
}

/* ── tablet: 중앙 정렬, 폭은 기기 안 ── */
@media screen and (min-width: 768px) and (max-width: 992.98px) and (min-height: 501px) {
    :root.rs [data-rs-modal] {
        top: var(--rs-vvt, 0px);
        bottom: auto;
        height: var(--rs-vvh, 100dvh);
        align-items: center;
    }
    :root.rs [data-rs-modal] [data-rs-modal-dialog] {
        display: flex;
        flex-direction: column;
        width: calc(100% - 32px);
        max-height: min(calc(var(--rs-vvh, 100dvh) - 48px), 90vh) !important; /* floor — 선택자 상한(vvh-16 !important)이 백드롭 padding(.md-backdrop 24px)과 합쳐 기기 밖으로 밀던 것을 이관된 모달에서는 스킨이 이긴다 */
    }
}

/* ── phone·tablet 공통: 헤더·푸터 고정, 본문만 스크롤 ── */
@media screen and (max-width: 992.98px) {
    :root.rs [data-rs-modal-dialog] > * {
        flex: none;
    }
    :root.rs [data-rs-modal-dialog] > [data-rs-modal-body] {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none !important; /* floor — 본문 인라인 max-height:70vh/60vh/66vh */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* #employeeModal: 본문 고정 높이(70vh) 해제 → 다이얼로그를 채우고 iframe 은 본문 전체 */
    :root.rs #employeeModal [data-rs-modal-dialog] {
        height: calc(var(--rs-vvh, 100dvh) - 48px);
    }
    :root.rs #employeeModal [data-rs-modal-body] {
        flex: 1 1 0;
        position: relative;
        overflow: hidden;
    }
    :root.rs #employeeModal [data-rs-modal-body] iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs #employeeModal [data-rs-modal-dialog] {
        height: 100%;
    }
}

/* ── 키보드 열림: 하단 고정 제출 바를 키보드 위로 ── */
@media screen and (max-width: 992.98px) {
    :root.rs.rs-kb-open .rs-submitbar {
        transform: translateY(calc(-1 * var(--rs-kb-inset, 0px)));
    }
}

/* ── 선택자 상한: 아직 data-rs-modal 로 이관하지 않은 고정 폭 다이얼로그가 기기 폭·높이를 넘지 않게 ── */
@media screen and (max-width: 992.98px) {
    :root.rs .emp-create-dialog,
    :root.rs .dept-modal-dialog,
    :root.rs .md-dialog,
    :root.rs .qp-dialog,
    :root.rs .iu-dialog,
    :root.rs .iu-modal,
    :root.rs #iuReviewModal .employee-modal-dialog,
    :root.rs .scope-modal-dialog,
    :root.rs .org-edit-dialog,
    :root.rs .drill-panel,
    :root.rs .dr-modal,
    :root.rs .em-modal,
    :root.rs .cp-modal,
    :root.rs .modal-content,
    :root.rs .modal-dialog,
    :root.rs .p3-ledger-modal-box,
    :root.rs .dpv-box,
    :root.rs .id-panel,
    :root.rs .salary-detail-popup,
    :root.rs #obInviteModal > div,
    :root.rs #obExtendModal > div,
    :root.rs #obQueueModal > div,
    :root.rs #riskDetailModal > div,
    :root.rs #docModal > div,
    :root.rs #orderDetailModal > div,
    :root.rs #bulkResultModal > div,
    :root.rs #att-upload-modal > div,
    :root.rs #salaryLockModal > div,
    :root.rs #payband-modal > div,
    :root.rs #subrecordModal > div,
    :root.rs #qualDetailOverlay > div {
        max-width: calc(100vw - 16px) !important; /* floor — 인라인·접두 클래스의 고정 폭 상한 */
        max-height: calc(var(--rs-vvh, 100dvh) - 16px) !important; /* floor */
        overflow: auto;
    }
}

/* ── C21 토스트: 기록카드 모달(z 10500)이 열려 있는 동안 오른쪽 아래·모달 위 ── */
@media screen {
    :root.rs.rs-emp-modal-open #hrToastContainer {
        top: auto !important; /* floor — showToast 인라인 top/right/z-index */
        bottom: 24px;
        right: 24px !important; /* floor */
        z-index: 12000 !important; /* floor */
    }
}
@media screen and (max-width: 992.98px) {
    :root.rs.rs-emp-modal-open #hrToastContainer {
        left: 12px;
        right: 12px !important; /* floor */
        bottom: calc(12px + var(--rs-safe-b));
    }
}

/* ── 이탈 위험 직원 상세(#riskDetailModal): 993~1279 터치(가로 태블릿)에서도 푸터(주 버튼)를 화면 안에 고정 ── */
@media screen and (max-width: 1279.98px) and (min-width: 993px), screen and (min-width: 993px) and (pointer: coarse) {
    :root.rs #riskDetailModal [data-rs-modal-dialog] {
        display: flex;
        flex-direction: column;
    }
    :root.rs #riskDetailModal [data-rs-modal-dialog] > * {
        flex: none;
    }
    :root.rs #riskDetailModal [data-rs-modal-dialog] > [data-rs-modal-body] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   P3 내비게이션 (설계서 C01 하단 탭 · C02 더보기/그룹 시트 · C03 섹션 레일, 명세 p3-spec)
   - html.rs-nav3 = 시트·레일 활성(rs_enabled and mobile_nav_enabled), html.rs-has-tabbar = 탭 렌더, html.rs-rail-pinned = 레일 고정(마우스).
   - 상태는 sidebar[data-rs-nav=docked|sheet|drawer|rail|rail-open] (JS: initNav). 닫힌 폰·태블릿은 속성 없음(화면 밖).
   - PC(>=1280) 불변: 신규 마크업은 아래 무조건 블록에서 전부 숨기고, 보이는 규칙은 폭 미디어쿼리 안에만 둔다.
   - z-index 사다리: 헤더 100 < 탭바 950 < 시트·드로어 1000 < 레일 백드롭 1050 < 레일 패널 1060 < 모달 2000
   ========================================================================== */
@media screen {
    :root.rs {
        --rs-tab-h: 0px;
        --rs-rail-w: var(--sidebar-collapsed-width, 64px);
        --rs-bottom-offset: calc(var(--rs-tab-h) + var(--rs-safe-b));
    }
    :root.rs .rs-tabbar,
    :root.rs .rs-nav-head,
    :root.rs .rs-only-all,
    :root.rs .rs-rail,
    :root.rs .rs-nav-foot,
    :root.rs .rs-nav-search,
    :root.rs .rs-rail-pin {
        display: none;
    }
}

/* ── 공통 부품 스타일(보이는 폭에서만 display 가 켜진다) ── */
@media screen and (max-width: 1279.98px) {
    :root.rs .rs-nav-head {
        align-items: center;
        gap: 8px;
        flex: none;
        min-height: 56px;
        padding: 6px 8px 6px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--color-white, #fff);
    }
    :root.rs .rs-nav-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 16px;
        font-weight: 700;
    }
    :root.rs .rs-nav-title:focus {
        outline: none;
    }
    :root.rs .rs-nav-search,
    :root.rs .rs-rail-pin {
        align-items: center;
        gap: 6px;
        min-height: var(--rs-tap);
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 22px;
        background: transparent;
        color: inherit;
        font-size: 14px;
        cursor: pointer;
    }
    :root.rs .rs-rail-pin[aria-pressed=true] {
        background: rgba(255, 255, 255, 0.18);
    }
    :root.rs .rs-nav-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
    }
    :root.rs .rs-only-all {
        flex: none;
        min-height: var(--rs-tap);
        margin: 0;
        padding: 0 16px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
        background: transparent;
        color: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    :root.rs .rs-nav-foot {
        flex: none;
        padding: 8px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        color: var(--color-white, #fff);
    }
    :root.rs .rs-foot-account {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 2px 4px 8px;
        font-size: 14px;
    }
    :root.rs .rs-foot-name {
        font-weight: 600;
    }
    :root.rs .rs-foot-role {
        font-size: var(--rs-font-floor);
        opacity: 0.7;
    }
    :root.rs .rs-foot-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    :root.rs .rs-foot-link {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        min-height: var(--rs-tap);
        padding: 0 12px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    :root.rs .rs-foot-link i {
        flex: none;
        width: 18px;
        text-align: center;
    }
    :root.rs .rs-foot-link span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root.rs .rs-foot-link[data-rs-danger] {
        color: #fca5a5;
    }
    :root.rs .rs-nav-head button:focus-visible,
    :root.rs .rs-only-all:focus-visible,
    :root.rs .rs-foot-link:focus-visible,
    :root.rs .rs-railsec:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }
}

/* ── C01 하단 탭 바 (<=992.98, 탭이 렌더된 경우) ── */
@media screen and (max-width: 992.98px) {
    :root.rs.rs-has-tabbar {
        --rs-tab-h: 56px;
    }
    :root.rs.rs-kb-open {
        --rs-safe-b: 0px;
    }
    :root.rs.rs-has-tabbar.rs-kb-open {
        --rs-tab-h: 0px;
    }
    :root.rs.rs-has-tabbar .rs-tabbar {
        display: flex;
        justify-content: center;
        position: fixed;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        width: var(--rs-vvw, 100%);
        height: calc(var(--rs-tab-h) + var(--rs-safe-b));
        padding: 0 var(--rs-safe-r) var(--rs-safe-b) var(--rs-safe-l);
        z-index: 950;
        background: var(--color-white, #fff);
        border-top: 1px solid var(--color-gray-200, #e5e7eb);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    }
    :root.rs.rs-has-tabbar.rs-kb-open .rs-tabbar {
        display: none;
    }
    :root.rs .rs-tab {
        position: relative;
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 48px;
        height: var(--rs-tab-h);
        margin: 0;
        padding: 4px 2px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--color-gray-500, #737373);
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    :root.rs .rs-tab i {
        height: 20px;
        font-size: 20px;
        line-height: 20px;
    }
    :root.rs .rs-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root.rs .rs-tab[aria-current] {
        color: var(--color-primary, #7D0948);
        font-weight: 700;
    }
    :root.rs .rs-tab[aria-current]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 22%;
        right: 22%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: currentColor;
    }
    :root.rs .rs-tab:focus-visible {
        outline: 2px solid var(--color-primary, #7D0948);
        outline-offset: -3px;
    }
    /* ☰ 는 탭이 대신한다(HR_MOBILE_NAV=0 이면 탭이 없어 P2a ☰ 가 그대로 남는다) */
    :root.rs.rs-has-tabbar #sidebarToggle {
        display: none;
    }
    /* 가림 0: 본문 끝이 탭 위에 오도록(!important 허용 목록 e — 화면 CSS 의 .main-wrapper 패딩보다 우선) */
    :root.rs.rs-has-tabbar .main-wrapper {
        padding-bottom: calc(var(--rs-tab-h) + var(--rs-safe-b)) !important; /* floor — 허용 목록 (e) 탭바 본문 padding-bottom */
    }
    :root.rs.rs-has-tabbar .rs-submitbar {
        bottom: var(--rs-bottom-offset);
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs.rs-has-tabbar {
        --rs-tab-h: 48px;
    }
    :root.rs .rs-tab {
        flex-direction: row;
        gap: 6px;
    }
    :root.rs .rs-tab i {
        font-size: 18px;
    }
}
@media screen and (min-width: 768px) and (max-width: 992.98px) and (min-height: 501px) {
    :root.rs .rs-tab {
        max-width: 120px;
    }
}

/* ── C02 더보기·그룹 시트(폰 바텀시트) / 좌측 드로어(태블릿) — 사이드바 DOM 재사용 ── */
@media screen and (max-width: 992.98px) {
    :root.rs.rs-nav3 .rs-nav-head {
        display: flex;
    }
    :root.rs.rs-nav3 .rs-nav-search {
        display: inline-flex;
    }
    :root.rs.rs-nav3 .sidebar[data-rs-only] .rs-only-all {
        display: block;
    }
    :root.rs.rs-nav3 .sidebar[data-rs-only] .nav-section:not([data-rs-section=hrindex]),
    :root.rs.rs-nav3 .sidebar[data-rs-only] .rs-nav-foot {
        display: none;
    }
    :root.rs.rs-nav3 .rs-nav-foot {
        display: block;
    }
    :root.rs.rs-nav3 .sidebar {
        visibility: hidden;
        padding-bottom: 0;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }
    :root.rs.rs-nav3 .sidebar[data-rs-nav=sheet],
    :root.rs.rs-nav3 .sidebar[data-rs-nav=drawer] {
        transform: none;
        visibility: visible;
        transition: transform 0.22s ease, visibility 0s;
    }
    :root.rs.rs-nav3 .sidebar-nav {
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    :root.rs.rs-nav3 .sidebar .nav-section[data-rs-section=admin] .nav-item > span::after {
        content: "PC 권장";
        margin-left: 8px;
        padding: 1px 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.16);
        font-size: var(--rs-font-floor);
        font-weight: 600;
        vertical-align: middle;
    }
    :root.rs.rs-nav3 .rs-sidebar-backdrop {
        top: 0;
        cursor: pointer;
    }
}
/* 태블릿 드로어: 좌측 300px, 어두운 사이드바 테마 유지 */
@media screen and (min-width: 768px) and (max-width: 992.98px) and (min-height: 501px) {
    :root.rs.rs-nav3 .sidebar {
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: min(300px, 86vw);
        transform: translateX(-100%);
    }
    :root.rs.rs-nav3 .sidebar[data-rs-nav=drawer] {
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
    }
    :root.rs.rs-nav3 .sidebar-header {
        display: none;
    }
}
/* 폰 바텀시트: 흰 테마, 항목 48px */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs.rs-nav3 .sidebar {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 85vh;
        height: min(var(--rs-sheet-max-h), var(--rs-vvh, 100dvh));
        max-height: min(var(--rs-sheet-max-h), var(--rs-vvh, 100dvh));
        padding-bottom: var(--rs-safe-b);
        border-radius: 16px 16px 0 0;
        background: var(--color-white, #fff);
        color: var(--color-gray-900, #171717);
        transform: translateY(100%);
    }
    :root.rs.rs-nav3 .sidebar[data-rs-nav=sheet] {
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    }
    :root.rs.rs-nav3 .sidebar-header,
    :root.rs.rs-nav3 .sidebar-footer {
        display: none;
    }
    :root.rs.rs-nav3 .sidebar .rs-nav-head,
    :root.rs.rs-nav3 .sidebar .rs-only-all,
    :root.rs.rs-nav3 .sidebar .rs-nav-foot {
        border-color: var(--color-gray-200, #e5e7eb);
        color: var(--color-gray-900, #171717);
    }
    :root.rs.rs-nav3 .sidebar .rs-nav-search,
    :root.rs.rs-nav3 .sidebar .rs-foot-link {
        border-color: var(--color-gray-300, #d4d4d4);
    }
    :root.rs.rs-nav3 .sidebar .rs-foot-link[data-rs-danger] {
        color: #b91c1c;
    }
    :root.rs.rs-nav3 .sidebar .rs-nav-head button:focus-visible,
    :root.rs.rs-nav3 .sidebar .rs-only-all:focus-visible,
    :root.rs.rs-nav3 .sidebar .rs-foot-link:focus-visible {
        outline-color: var(--color-primary, #7D0948);
    }
    :root.rs.rs-nav3 .sidebar .nav-section-title {
        color: var(--color-gray-500, #737373);
    }
    :root.rs.rs-nav3 .sidebar .nav-item {
        min-height: 48px;
        color: var(--color-gray-700, #404040);
    }
    :root.rs.rs-nav3 .sidebar .nav-item:hover {
        background: var(--color-gray-100, #f5f5f5);
        color: var(--color-gray-900, #171717);
    }
    :root.rs.rs-nav3 .sidebar .nav-item.active {
        background: rgba(125, 9, 72, 0.08);
        color: var(--color-primary, #7D0948);
        border-left-color: var(--color-primary, #7D0948);
    }
    :root.rs.rs-nav3 .sidebar .nav-section[data-rs-section=admin] .nav-item > span::after {
        background: var(--color-gray-100, #f5f5f5);
        color: var(--color-gray-600, #525252);
    }
    :root.rs.rs-nav3 .sidebar-nav {
        scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    }
}
@media screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs.rs-nav3 .rs-foot-account {
        display: none;
    }
    :root.rs.rs-nav3 .rs-foot-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── C03 섹션 레일(992.99~1279.98): 64px + 240 오버레이 패널, 마우스 '고정' = 240 도킹 ── */
@media screen and (min-width: 992.99px) and (max-width: 1279.98px) {
    :root.rs.rs-nav3 .main-wrapper {
        margin-left: var(--rs-rail-w);
    }
    :root.rs.rs-nav3.rs-rail-pinned .main-wrapper {
        margin-left: var(--sidebar-width);
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar {
        width: var(--rs-rail-w);
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar[data-rs-nav=rail-open] {
        width: var(--sidebar-width);
        z-index: 1060;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
    }
    /* 닫힌 레일: 로고 아이콘 + 섹션 버튼만 */
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) {
        overflow: hidden;
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .sidebar-header {
        padding: 12px 0;
        border-bottom: 0;
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .sidebar-logo {
        justify-content: center;
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .sidebar-logo-text,
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .sidebar-nav,
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .sidebar-footer {
        display: none;
    }
    :root.rs.rs-nav3:not(.rs-rail-pinned) .sidebar:not([data-rs-nav=rail-open]) .rs-rail {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        padding-top: 4px;
    }
    :root.rs.rs-nav3 .sidebar[data-rs-nav=rail-open] .rs-nav-head,
    :root.rs.rs-nav3.rs-rail-pinned .rs-nav-head {
        display: flex;
    }
    :root.rs.rs-nav3 .sidebar[data-rs-nav=rail-open] .rs-nav-foot,
    :root.rs.rs-nav3.rs-rail-pinned .rs-nav-foot {
        display: block;
    }
    :root.rs.rs-nav3 .rs-foot-links {
        grid-template-columns: minmax(0, 1fr);
    }
    :root.rs.rs-nav3 .rs-nav-head .rs-rail-pin {
        display: inline-flex;
    }
    :root.rs.rs-nav3 .rs-nav-head .rs-rail-pin[hidden] {
        display: none;
    }
    :root.rs.rs-nav3.rs-rail-pinned .rs-nav-close {
        display: none;
    }
    :root.rs.rs-nav3 .rs-railsec {
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        box-sizing: border-box;
        width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 4px 2px;
        border: 0;
        border-left: 3px solid transparent;
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        font-family: inherit;
        font-size: var(--rs-font-floor);
        font-weight: 500;
        line-height: 1.15;
        text-align: center;
        word-break: keep-all;
        cursor: pointer;
    }
    :root.rs.rs-nav3 .rs-railsec i {
        font-size: 18px;
        line-height: 18px;
    }
    :root.rs.rs-nav3 .rs-railsec:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-white, #fff);
    }
    :root.rs.rs-nav3 .rs-railsec[aria-current] {
        background: rgba(255, 255, 255, 0.15);
        border-left-color: var(--color-accent, #fff);
        color: var(--color-white, #fff);
    }
    :root.rs.rs-nav3 .rs-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        background: rgba(0, 0, 0, 0.35);
        cursor: pointer;
    }
    :root.rs.rs-nav3 .rs-sidebar-backdrop[hidden] {
        display: none;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    :root.rs.rs-nav3 .sidebar {
        transition: none;
    }
}

/* ── 인쇄: 탭·레일·시트 숨김, 본문 하단 여백 해제 ── */
@media print {
    :root.rs .rs-tabbar,
    :root.rs .rs-rail,
    :root.rs .rs-railsec,
    :root.rs .rs-nav-head,
    :root.rs .rs-nav-foot,
    :root.rs .rs-only-all,
    :root.rs .rs-sidebar-backdrop {
        display: none;
    }
    :root.rs.rs-has-tabbar .main-wrapper {
        padding-bottom: 0 !important; /* floor — 인쇄에는 탭 높이만큼의 여백을 두지 않는다 */
    }
}

/* ── P3 보정: 레일 패널(240px) 계정 영역 1열 · 폰 헤더 ⚙ 더보기로 이관 ── */
@media screen and (min-width: 992.99px) and (max-width: 1279.98px) {
    :root.rs.rs-nav3 .rs-foot-links {
        grid-template-columns: minmax(0, 1fr);
    }
    :root.rs.rs-nav3 .rs-foot-link,
    :root.rs.rs-nav3 .rs-foot-link > span {
        white-space: nowrap;
        text-overflow: clip;
        overflow: visible;
    }
}
@media screen and (max-width: 767.98px) {
    :root.rs.rs-has-tabbar .header-actions .header-action-btn[onclick*="openAlertConfigModal"] {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   P4-card 인사기록카드 (설계서 C09·C11·C12·C14·C25, 명세 p4-spec 2절)
   - 적용 범위: 직접 접속(rs-standalone)과 폰·태블릿 부모의 모달 iframe(rs-in-frame + rs). 부모가 PC 면 html.rs 가 없어 전부 무효.
   - 카드 템플릿의 기존 880 블록(테스트로 고정)은 건드리지 않고, 여기서 더 구체적인 선택자('body' 추가)로 덮는다.
   - 미디어는 카드 자체 전환점(880)과 공통 전환점(767.98 · 992.98)만 쓴다. PC(>880) 직접 URL 은 닿지 않는다.
   ========================================================================== */

/* C25 앱바(직접 URL 만) — 기본은 숨김. 880 이하 직접 URL 에서만 보이고 모달 iframe·인쇄에서는 항상 숨는다 */
@media screen {
    :root.rs .rs-appbar {
        display: none;
    }
}
@media screen and (max-width: 880px) {
    :root.rs.rs-standalone .rs-appbar,
    :root.rs.rs-in-frame .rs-appbar {
        display: flex;
        align-items: center;
        gap: 4px;
        position: sticky;
        top: 0;
        z-index: 100;
        min-height: 52px;
        margin: 0 0 8px;
        padding: var(--rs-safe-t) 4px 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    :root.rs.rs-standalone .rs-appbar-title,
    :root.rs.rs-in-frame .rs-appbar-title {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root.rs.rs-standalone .rs-appbar-btn,
    :root.rs.rs-in-frame .rs-appbar-btn {
        flex: none;
        width: var(--rs-tap);
        height: var(--rs-tap);
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #374151;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }
    :root.rs.rs-standalone .rs-appbar-btn:active,
    :root.rs.rs-in-frame .rs-appbar-btn:active {
        background: #f3f4f6;
    }
    /* C12: 컨테이너 전체가 좌우로 패닝되던 것(P2b 의 overflow-x:auto)을 해소 — 넓은 표는 아래 .rs-xscroll 안에서만 스크롤한다 */
    :root.rs.rs-standalone body .container,
    :root.rs.rs-in-frame body .container {
        overflow-x: hidden;
        overflow-x: clip;
        min-width: 0;
    }
    :root.rs.rs-standalone .button-container button,
    :root.rs.rs-in-frame .button-container button {
        margin: 4px;
    }
}
@media print {
    :root.rs .rs-appbar {
        display: none;
    }
    :root.rs .rs-sec-head .section-title::before {
        content: none;
    }
}

/* C12 넓은 표 — JS 가 표를 .rs-xscroll 로 감싼다(폰·태블릿에서만). 래퍼가 가로 스크롤을 맡고 표 자체는 그대로다 */
@media screen and (max-width: 992.98px) {
    :root.rs.rs-standalone .rs-xscroll,
    :root.rs.rs-in-frame .rs-xscroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 25px;
        max-width: 100%;
    }
    :root.rs.rs-standalone .rs-xscroll > table,
    :root.rs.rs-in-frame .rs-xscroll > table {
        margin-bottom: 0;
    }
    :root.rs.rs-standalone .rs-xscroll:focus-visible,
    :root.rs.rs-in-frame .rs-xscroll:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
}

/* C14 인적정보 kv(≤767.98) — 라벨(1줄)-값 줄로 쌓고 사진은 상단 가운데. 공통 kv 규칙(위)이 table·tr·th·td 를 block/grid 로 바꾼 위에 카드 고유 모양을 얹는다 */
@media screen and (max-width: 767.98px) {
    :root.rs.rs-standalone table[data-rs-table=kv] > tbody > tr,
    :root.rs.rs-in-frame table[data-rs-table=kv] > tbody > tr {
        grid-template-columns: 112px minmax(0, 1fr);
        column-gap: 10px;
        margin: 0;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] th,
    :root.rs.rs-in-frame table[data-rs-table=kv] th {
        width: auto;
        padding: 9px 0;
        border-bottom: 1px solid #eef0f2;
        color: #6b7280;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] td,
    :root.rs.rs-in-frame table[data-rs-table=kv] td {
        padding: 9px 0;
        border-bottom: 1px solid #eef0f2;
        overflow-wrap: anywhere;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] td[data-rs-kv-photo],
    :root.rs.rs-in-frame table[data-rs-table=kv] td[data-rs-kv-photo] {
        grid-column: 1 / -1;
        justify-self: center;
        padding: 4px 0 14px;
        border-bottom: 0;
    }
}

/* C14 카드 전용 확장(768~880): 카드는 880 이하에서 컨테이너가 100% 로 바뀌므로 태블릿 폭에서도 사진 rowspan 이 행을 늘려 라벨이 높아 보이는 것을 막는다 — 같은 라벨-값 줄 */
@media screen and (min-width: 768px) and (max-width: 880px) {
    :root.rs.rs-standalone table[data-rs-table=kv],
    :root.rs.rs-in-frame table[data-rs-table=kv],
    :root.rs.rs-standalone table[data-rs-table=kv] > tbody,
    :root.rs.rs-in-frame table[data-rs-table=kv] > tbody {
        display: block;
        width: 100%;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] > tbody > tr,
    :root.rs.rs-in-frame table[data-rs-table=kv] > tbody > tr {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        column-gap: 12px;
        margin: 0;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] th,
    :root.rs.rs-in-frame table[data-rs-table=kv] th {
        display: block;
        width: auto;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid #eef0f2;
        background: transparent;
        color: #6b7280;
        text-align: left;
        white-space: nowrap;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] td,
    :root.rs.rs-in-frame table[data-rs-table=kv] td {
        display: block;
        min-width: 0;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid #eef0f2;
        overflow-wrap: anywhere;
    }
    :root.rs.rs-standalone table[data-rs-table=kv] td[data-rs-kv-photo],
    :root.rs.rs-in-frame table[data-rs-table=kv] td[data-rs-kv-photo] {
        grid-column: 1 / -1;
        justify-self: center;
        padding: 4px 0 14px;
        border-bottom: 0;
    }
}

/* C11 섹션 접기(폰) — JS 가 .section-header 를 버튼화(.rs-sec-head, aria-expanded)하고 본문 형제에 .rs-sec-collapsed 를 단다 */
@media screen and (max-width: 767.98px) {
    :root.rs.rs-standalone .rs-sec-head,
    :root.rs.rs-in-frame .rs-sec-head {
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 8px;
        min-height: 48px;
        margin-top: 20px;
        margin-bottom: 12px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    :root.rs.rs-standalone .rs-sec-head[aria-expanded=false],
    :root.rs.rs-in-frame .rs-sec-head[aria-expanded=false] {
        margin-bottom: 0;
    }
    :root.rs.rs-standalone .rs-sec-head:focus-visible,
    :root.rs.rs-in-frame .rs-sec-head:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
    :root.rs.rs-standalone .rs-sec-head .section-title::before,
    :root.rs.rs-in-frame .rs-sec-head .section-title::before {
        content: "\25BE";
        display: inline-block;
        width: 1.3em;
        color: #6b7280;
    }
    :root.rs.rs-standalone .rs-sec-head[aria-expanded=false] .section-title::before,
    :root.rs.rs-in-frame .rs-sec-head[aria-expanded=false] .section-title::before {
        content: "\25B8";
    }
    :root.rs.rs-standalone .rs-sec-head .final-education-text,
    :root.rs.rs-in-frame .rs-sec-head .final-education-text {
        font-size: 12px;
    }
    :root.rs.rs-standalone .rs-sec-collapsed,
    :root.rs.rs-in-frame .rs-sec-collapsed {
        display: none;
    }
}

/* 서류 표 폰 행(≤767.98) — 서류명·상태 / 파일 / 액션 으로 쌓는다(한 줄 고정 38px 은 태블릿·PC 의 몫) */
@media screen and (max-width: 767.98px) {
    :root.rs.rs-standalone .doc-group:not(.collapsed) .doc-table,
    :root.rs.rs-in-frame .doc-group:not(.collapsed) .doc-table,
    :root.rs.rs-standalone .doc-group:not(.collapsed) .doc-table > tbody,
    :root.rs.rs-in-frame .doc-group:not(.collapsed) .doc-table > tbody {
        display: block;
        width: 100%;
    }
    :root.rs.rs-standalone .doc-table colgroup,
    :root.rs.rs-in-frame .doc-table colgroup {
        display: none;
    }
    :root.rs.rs-standalone .doc-table > tbody > tr,
    :root.rs.rs-in-frame .doc-table > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name status" "files files" "actions actions";
        column-gap: 8px;
        padding: 4px 0 6px;
        border-bottom: 1px solid #f3f4f6;
    }
    :root.rs.rs-standalone .doc-table td,
    :root.rs.rs-in-frame .doc-table td {
        display: block;
        height: auto;
        padding: 0 4px;
        border-bottom: 0;
        white-space: normal;
        overflow: visible;
    }
    :root.rs.rs-standalone .doc-table td.doc-name,
    :root.rs.rs-in-frame .doc-table td.doc-name {
        grid-area: name;
        min-height: 40px;
        padding-top: 10px;
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    :root.rs.rs-standalone .doc-table td.doc-status,
    :root.rs.rs-in-frame .doc-table td.doc-status {
        grid-area: status;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    :root.rs.rs-standalone .doc-table td.doc-files,
    :root.rs.rs-in-frame .doc-table td.doc-files {
        grid-area: files;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        min-height: 44px;
        white-space: nowrap;
    }
    :root.rs.rs-standalone .doc-table td.doc-files > *,
    :root.rs.rs-in-frame .doc-table td.doc-files > * {
        flex: none;
    }
    :root.rs.rs-standalone .doc-table td.doc-files > .doc-file-link,
    :root.rs.rs-in-frame .doc-table td.doc-files > .doc-file-link {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 44px;
    }
    :root.rs.rs-standalone .doc-table td.doc-actions,
    :root.rs.rs-in-frame .doc-table td.doc-actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding-top: 2px;
        padding-bottom: 4px;
    }
    :root.rs.rs-standalone .doc-btn,
    :root.rs.rs-in-frame .doc-btn {
        justify-content: center;
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        margin: 0;
        padding: 0 12px;
        gap: 4px;
        font-size: 13px;
        line-height: 1.2;
    }
    :root.rs.rs-standalone .doc-btn i,
    :root.rs.rs-in-frame .doc-btn i {
        font-size: 12px;
    }
}
/* 태블릿 터치: 한 줄 표 그대로 두되 액션 버튼을 44×44·12px 이상으로 */
@media screen and (min-width: 768px) and (max-width: 992.98px) {
    :root.rs.rs-standalone .doc-btn,
    :root.rs.rs-in-frame .doc-btn {
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        font-size: 12px;
    }
}

/* 부가정보 관리(#subrecordModal, full) 폼 — 폰 1열. 본문 textarea 의 grid-column:1/3 이 만드는 암묵 2열은 폭 0 으로 */
@media screen and (max-width: 767.98px) {
    :root.rs.rs-standalone #subrecordModal .sr-form-grid,
    :root.rs.rs-in-frame #subrecordModal .sr-form-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-columns: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   P4-list 직원 목록 · 쓰기 시트 (설계서 C10·C13·C17·C23, 명세 p4-spec 1절)
   - 필터 시트 하단 푸터([초기화][적용]) · 적용 개수 배지 · 카드 목록(≤767.98) · 행 ⋯ 액션 시트 · 선택 모드 하단 액션 바
   - 직원 추가·수정 모달(data-rs-modal=full) 폰 1열. 마우스 PC(≥1280)는 닿지 않는다(무조건 블록은 숨김만).
   ========================================================================== */
@media screen {
    :root.rs .filter-panel .rs-sheet-foot,
    :root.rs .rs-row-more,
    :root.rs .rs-rowsheet,
    :root.rs .rs-actionbar {
        display: none;
    }
}

/* 필터 열기 버튼 적용 개수 배지(서버 값) */
@media screen {
    :root.rs .rs-filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        margin-left: 6px;
        padding: 0 6px;
        border-radius: 10px;
        background: var(--color-primary, #7D0948);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }
}

/* ── 필터 시트: 하단 고정 푸터 (≤1200.98 시트 구간) ── */
@media screen and (max-width: 1200.98px) {
    :root.rs .filter-panel.rs-sheet-open .rs-sheet-foot {
        display: flex;
        flex: none;
        gap: 8px;
        padding: 8px 12px;
        border-top: 1px solid var(--color-gray-200, #e5e7eb);
        background: var(--color-white, #fff);
    }
    :root.rs .filter-panel.rs-sheet-open .rs-sheet-foot .btn {
        flex: 1 1 0;
        min-height: var(--rs-tap);
        justify-content: center;
    }
    :root.rs .filter-panel.rs-sheet-open .rs-sheet-foot .btn-primary {
        flex: 2 1 0;
    }
    :root.rs .filter-panel.rs-sheet-open .filter-panel-content {
        overscroll-behavior: contain;
    }
}

/* ── 직원 추가·수정 모달(data-rs-modal=full): 폰·태블릿 ── */
@media screen and (max-width: 992.98px) {
    :root.rs .emp-create-radio {
        min-height: var(--rs-tap);
    }
}
@media screen and (max-width: 767.98px) {
    :root.rs [data-rs-modal="full"].emp-create-backdrop {
        padding: 0;
    }
    :root.rs [data-rs-modal="full"] .emp-create-dialog {
        border-radius: 0;
    }
    :root.rs [data-rs-modal="full"] .emp-create-header {
        padding: 8px 8px 8px 16px;
    }
    :root.rs [data-rs-modal="full"] .emp-create-body {
        padding: 16px;
    }
    :root.rs [data-rs-modal="full"] .emp-create-footer {
        padding: 8px 16px;
        gap: 8px;
    }
    :root.rs [data-rs-modal="full"] .emp-create-footer .btn {
        flex: 1 1 0;
        justify-content: center;
    }
    :root.rs [data-rs-modal="full"] .emp-create-footer .btn-primary {
        flex: 2 1 0;
    }
    :root.rs [data-rs-modal="full"] .emp-create-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    :root.rs [data-rs-modal="full"] .emp-create-grid > .emp-create-span2 {
        grid-column: auto;
    }
    :root.rs [data-rs-modal="full"] .emp-create-grid > .form-group {
        min-width: 0;
    }
}

/* ── 직원 목록 카드화(C13, ≤767.98): 같은 #employeeTable 을 CSS 로만 카드로 바꾼다(DOM 복제 없음) ── */
@media screen and (max-width: 767.98px) {
    :root.rs .employee-main-area .table-scroll-area {
        overflow: visible;
        max-height: none;
    }
    :root.rs [data-rs-table~="cards"],
    :root.rs [data-rs-table~="cards"] > tbody,
    :root.rs [data-rs-table~="cards"] > thead {
        display: block;
        width: 100%;
    }
    :root.rs [data-rs-table~="cards"] > thead > tr {
        display: block;
    }
    :root.rs [data-rs-table~="cards"] > thead th {
        display: none;
    }
    :root.rs [data-rs-table~="cards"] > thead th.col-sel {
        display: flex;
        align-items: center;
        gap: 4px;
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        min-height: var(--rs-tap);
        padding: 0 12px;
        background: var(--color-gray-50, #f9fafb);
        text-align: left;
        cursor: default;
    }
    :root.rs [data-rs-table~="cards"] > thead th.col-sel::after {
        content: "전체 선택";
        font-size: 13px;
        font-weight: 600;
        color: var(--color-gray-700, #374151);
        text-transform: none;
        letter-spacing: 0;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        position: relative;
        min-height: 56px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
        background: var(--color-white, #fff);
        cursor: pointer;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr.rs-selected {
        background: rgba(125, 9, 72, 0.06);
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr::before {
        content: "";
        order: -1;
        flex: 0 0 100%;
        height: 0;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td {
        display: block;
        flex: none;
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        padding: 0;
        border: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1.5;
        text-align: left;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td[data-rs-label]::before {
        content: attr(data-rs-label);
        margin-right: 4px;
        font-size: 12px;
        color: var(--color-gray-500, #6b7280);
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-fixed {
        position: static;
        left: auto;
        width: auto;
        min-width: 0;
        background: transparent;
        border-right: 0;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-sel {
        order: -5;
        position: static;
        max-width: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--rs-tap);
        height: var(--rs-tap);
        margin: -8px 0 -8px -10px;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-name {
        order: -4;
        flex: 1 1 0;
        font-size: 16px;
        font-weight: 600;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-name::before,
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-id::before {
        content: none;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-name .employee-name-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-id {
        order: -3;
        color: var(--color-gray-500, #6b7280);
        font-size: 12px;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-actions {
        order: -2;
        margin: -8px -6px -8px 0;
        overflow: visible;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-actions .row-action-group,
    :root.rs [data-rs-table~="cards"] > tbody > tr > td.col-actions > .row-action-btn {
        display: none;
    }
    :root.rs [data-rs-table~="cards"] .rs-row-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--color-gray-600, #4b5563);
        font-size: 16px;
        cursor: pointer;
    }
    :root.rs [data-rs-table~="cards"] > tbody > tr > td[colspan] {
        flex: 1 1 100%;
        white-space: normal;
    }
    :root.rs [data-rs-table~="cards"] .status-pill {
        padding: 1px 8px;
        font-size: 12px;
    }
    :root.rs .stats-summary-bar {
        flex-wrap: wrap;
        gap: 4px 16px;
    }
}

/* ── 행 ⋯ 액션 시트(폰 바텀시트, 레이어 매니저 등록) ── */
@media screen and (max-width: 767.98px) {
    :root.rs .rs-rowsheet.rs-open {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 3200;
        background: rgba(0, 0, 0, 0.45);
        align-items: flex-end;
    }
    :root.rs .rs-rowsheet .rs-rowsheet-dialog {
        background: var(--color-white, #fff);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    }
    :root.rs .rs-rowsheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 8px 6px 16px;
        border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
    }
    :root.rs .rs-rowsheet-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    :root.rs .rs-rowsheet-close {
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        padding: 0 12px;
        border: 0;
        background: transparent;
        color: var(--color-primary, #7D0948);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    :root.rs .rs-rowsheet-body {
        padding: 4px 8px 8px;
    }
    :root.rs .rs-rowsheet-body .rs-action-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: var(--rs-tap);
        padding: 8px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--color-gray-800, #1f2937);
        font-size: 16px;
        text-align: left;
        cursor: pointer;
    }
    :root.rs .rs-rowsheet-body .rs-action-item i {
        width: 20px;
        text-align: center;
        color: var(--color-gray-500, #6b7280);
    }
    :root.rs .rs-rowsheet-body .rs-action-item.rs-action-danger,
    :root.rs .rs-rowsheet-body .rs-action-item.rs-action-danger i {
        color: var(--color-error, #DC2626);
    }
    :root.rs .rs-rowsheet-body .rs-action-sep {
        height: 1px;
        margin: 6px 4px;
        background: var(--color-gray-200, #e5e7eb);
    }
}

/* ── 선택 모드 하단 액션 바(C23): 폰·태블릿, 1명 이상 선택 시 탭 바 위에 고정 ── */
@media screen and (max-width: 992.98px) {
    :root.rs .rs-actionbar.rs-show {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        left: 0;
        bottom: var(--rs-bottom-offset, 0px);
        box-sizing: border-box;
        width: var(--rs-vvw, 100%);
        padding: 8px max(var(--rs-gutter), var(--rs-safe-r)) 8px max(var(--rs-gutter), var(--rs-safe-l));
        z-index: 960;
        background: var(--color-white, #fff);
        border-top: 1px solid var(--color-gray-200, #e5e7eb);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }
    :root.rs .rs-actionbar .rs-actionbar-msg {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }
    :root.rs .rs-actionbar .btn {
        flex: none;
        min-height: var(--rs-tap);
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
    :root.rs.rs-kb-open .rs-actionbar.rs-show {
        display: none;
    }
    :root.rs.rs-list-selecting .employee-main-area {
        padding-bottom: calc(var(--rs-tap) + 24px);
    }
}
@media print {
    :root.rs .rs-rowsheet,
    :root.rs .rs-actionbar,
    :root.rs .rs-row-more,
    :root.rs .filter-panel .rs-sheet-foot {
        display: none;
    }
}

/* ══ P5-shared 공유 컴포넌트(설계서 C11·C12·C15·C16·C17·C19·C24, 명세 p5a-spec 1절) ══════════════════════════
   JS(HR.rs.collapse/table/kpi/tip/chart/orgDrawer)가 붙이는 상태 속성에 반응한다. 마우스 PC(>=1280)는 이 절 때문에 달라지지 않는다. */

/* 평소(모든 폭): 신규 마크업 숨김 — 보이는 조건은 아래 폭·상태 규칙 안에만 둔다 */
@media screen {
    :root.rs .rs-orgpick,
    :root.rs .rs-orgtree-close,
    :root.rs .rs-orgtree-backdrop,
    :root.rs .rs-tip,
    :root.rs [data-rs-collapse-toggle] {
        display: none;
    }
    :root.rs .rs-tip {
        position: fixed;
        z-index: 10600;
        box-sizing: border-box;
        background: rgba(17, 24, 39, 0.97);
        color: #fff;
        font-size: 14px;
        line-height: 1.55;
        border-radius: 10px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
        overflow-wrap: anywhere;
    }
    :root.rs .rs-tip.rs-tip-open {
        display: block;
    }
    :root.rs .rs-tip[data-rs-tip-kind="pop"] {
        max-width: min(320px, calc(100vw - 16px));
        max-height: 70vh;
        overflow-y: auto;
        padding: 12px 14px;
    }
    :root.rs .rs-tip[data-rs-tip-kind="pop"] .rs-tip-close {
        display: none;
    }
    :root.rs .rs-tip .rs-tip-body b {
        color: #fff;
    }
    :root.rs .rs-tip .rs-tip-body a {
        color: #9ecbff;
    }
    :root.rs [data-rs-tip] {
        touch-action: manipulation;
    }
    /* 접힘 토글: 지정 모드가 켜진 컨테이너 안에서만 보인다 */
    :root.rs [data-rs-collapse][data-rs-collapse-on] [data-rs-collapse-toggle] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: var(--rs-tap);
        cursor: pointer;
    }
    :root.rs [data-rs-collapse][data-rs-collapse-on][data-rs-collapsed] [data-rs-collapse-body] {
        display: none;
    }
}

/* ── 토큰: 첫 열 고정 폭 ── */
@media screen and (max-width: 1279.98px) {
    :root.rs {
        --rs-sticky-w: 160px;
        --rs-surface: #fff;
    }
}
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs {
        --rs-sticky-w: clamp(96px, 28vw, 140px);
    }
}

/* ── C12 첫 열 고정 표 래퍼: 래퍼 안 가로 스크롤 + 첫 열 sticky (<=1279.98) ── */
@media screen and (max-width: 1279.98px) {
    :root.rs [data-rs-table="sticky"] {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    :root.rs [data-rs-table="sticky"] table {
        max-width: none;
    }
    :root.rs [data-rs-table="sticky"]:not([data-rs-sticky-cols="explicit"]) tr > :first-child,
    :root.rs [data-rs-table="sticky"] .rs-stick-1 {
        position: sticky;
        left: var(--rs-sl-1, 0px);
        z-index: 1;
        box-sizing: border-box;
        width: var(--rs-sticky-w);
        min-width: var(--rs-sticky-w);
        max-width: var(--rs-sticky-w);
        overflow-wrap: anywhere;
    }
    :root.rs [data-rs-table="sticky"][data-rs-sticky-cols="2"] tr > :nth-child(2),
    :root.rs [data-rs-table="sticky"] .rs-stick-2 {
        position: sticky;
        left: var(--rs-sl-2, var(--rs-sticky-w));
        z-index: 1;
    }
    :root.rs [data-rs-table="sticky"] thead .rs-stick-1,
    :root.rs [data-rs-table="sticky"] thead .rs-stick-2,
    :root.rs [data-rs-table="sticky"]:not([data-rs-sticky-cols="explicit"]) thead tr > :first-child {
        z-index: 2;
    }
    :root.rs [data-rs-table="sticky"] .rs-stick-bg {
        background-color: var(--rs-surface, #fff);
        background-image: linear-gradient(var(--rs-row-tint, transparent), var(--rs-row-tint, transparent));
    }
}

/* ── C16 차트 컨테이너: 부모 트랙이 캔버스 폭에 밀리지 않게 ── */
@media screen and (max-width: 1279.98px) {
    :root.rs [data-rs-chart] {
        position: relative;
        min-width: 0;
        max-width: 100%;
    }
    :root.rs [data-rs-chart] canvas {
        max-width: 100%;
    }
}

/* ── C15 KPI 재배치(컨테이너 opt-in [data-rs-kpi-grid]): 줄바꿈 흐름, 마지막 줄 카드가 남는 폭을 채워 빈칸 0 ── */
@media screen and (max-width: 992.98px) {
    :root.rs [data-rs-kpi-grid] {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
    :root.rs [data-rs-kpi-grid] > * {
        flex: 1 1 100%;
        min-width: 0;
    }
    :root.rs [data-rs-kpi-grid] > [data-rs-kpi] {
        flex: 1 1 clamp(180px, 26vw, 240px);
        min-width: 0;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs [data-rs-kpi-grid] > [data-rs-kpi] {
        flex-basis: clamp(140px, 42vw, 180px);
    }
    :root.rs [data-rs-kpi-grid] [data-rs-kpi-value] {
        font-size: var(--rs-kpi-value);
        line-height: 1.2;
    }
}

/* ── C24 컨텍스트 영역(폰: 한 줄 칩, 가로 스크롤) · 가로 스크롤 탭 ── */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs [data-rs-context] {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    :root.rs [data-rs-context]::-webkit-scrollbar {
        display: none;
    }
    :root.rs [data-rs-context] > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
@media screen and (max-width: 1279.98px) {
    :root.rs [data-rs-tabs] {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    :root.rs [data-rs-tabs]::-webkit-scrollbar {
        display: none;
    }
    :root.rs [data-rs-tabs] > * {
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: start;
    }
}

/* ── C17 탭 툴팁: 폰 = 바텀시트, 그 밖 = 앵커 팝오버(JS 가 위치를 잡는다) ── */
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .rs-tip[data-rs-tip-kind="sheet"] {
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 60vh;
        max-height: 60dvh;
        overflow-y: auto;
        padding: 16px var(--rs-gutter, 16px) calc(12px + var(--rs-safe-b, 0px));
        border-radius: 16px 16px 0 0;
    }
    :root.rs .rs-tip[data-rs-tip-kind="sheet"] .rs-tip-close {
        display: block;
        width: 100%;
        min-height: var(--rs-tap);
        margin-top: 12px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
}
@media screen and (pointer: coarse), screen and (any-pointer: coarse), screen and (max-width: 992.98px) {
    :root.rs [data-rs-tip] {
        cursor: pointer;
    }
    :root.rs .rs-tip-rel {
        position: relative;
    }
    :root.rs .rs-tip-hit::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--rs-tap);
        height: var(--rs-tap);
        transform: translate(-50%, -50%);
    }
}

/* ── C19 조직 트리 드로어(P2·P5·부서별 상세 공통) ── */
/* 레일(992.99~1279.98): 트리 220px + 본문 >= 780 */
@media screen and (min-width: 992.99px) and (max-width: 1279.98px) {
    :root.rs .org-tree-sidebar {
        width: 220px;
    }
}
/* 터치 레일(iPad 가로): 노드 터치 높이 */
@media screen and (min-width: 992.99px) and (max-width: 1279.98px) and (pointer: coarse), screen and (min-width: 992.99px) and (max-width: 1279.98px) and (any-pointer: coarse) {
    :root.rs .org-tree-sidebar .sidebar-node {
        min-height: var(--rs-tap);
    }
}
/* 태블릿·폰(<=992.98): 트리는 기본 숨김, 열기 버튼으로 드로어/시트 */
@media screen and (max-width: 992.98px) {
    :root.rs .dept-layout {
        display: block;
        min-height: 0;
    }
    :root.rs .dept-layout > .dept-main {
        margin-left: 0;
        width: 100%;
        min-width: 0;
    }
    :root.rs .org-tree-sidebar {
        display: none;
    }
    :root.rs .rs-orgpick {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-sizing: border-box;
        max-width: 100%;
        min-height: var(--rs-tap);
        padding: 0 14px;
        border: 1px solid var(--color-gray-300, #d4d4d4);
        border-radius: 999px;
        background: var(--color-white, #fff);
        color: var(--color-gray-800, #262626);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    :root.rs .dept-layout > .rs-orgpick {
        margin-bottom: var(--space-3, 12px);
    }
    :root.rs .rs-orgpick-k {
        flex: none;
        color: var(--color-gray-500, #737373);
        font-weight: 500;
    }
    :root.rs .rs-orgpick-v {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-primary, #7D0948);
    }
    :root.rs .org-tree-sidebar.rs-orgtree-open {
        display: flex;
        position: fixed;
        z-index: 3100;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, calc(100vw - 16px));
        max-height: none;
        border-radius: 0 var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
        padding-bottom: var(--rs-safe-b, 0px);
    }
    :root.rs.rs-orgtree-open .rs-orgtree-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3090;
        background: rgba(0, 0, 0, 0.45);
    }
    :root.rs .org-tree-sidebar .dept-sidebar-header {
        min-height: 52px;
    }
    :root.rs .org-tree-sidebar .rs-orgtree-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        min-width: var(--rs-tap);
        min-height: var(--rs-tap);
        padding: 0 8px;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    :root.rs .org-tree-sidebar .dept-sidebar-search input {
        min-height: var(--rs-tap);
        padding: 8px 12px;
        font-size: 16px;
    }
    :root.rs .org-tree-sidebar .dept-sidebar-body {
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    :root.rs .org-tree-sidebar .sidebar-node {
        min-height: var(--rs-tap);
        padding-top: 0;
        padding-bottom: 0;
    }
    :root.rs .org-tree-sidebar .sidebar-toggle {
        width: 36px;
        height: var(--rs-tap);
        margin-left: -4px;
        font-size: 12px;
    }
    :root.rs .org-tree-sidebar .sidebar-badge {
        font-size: 12px;
    }
}
@media screen and (max-width: 767.98px), screen and (max-width: 992.98px) and (max-height: 500px) {
    :root.rs .org-tree-sidebar.rs-orgtree-open {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 85vh;
        max-height: 85dvh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
    }
}

/* ── 인쇄: P5-shared 의 화면 전용 마크업을 숨긴다(쪽수 불변) ── */
@media print {
    :root.rs .rs-orgpick,
    :root.rs .rs-orgtree-backdrop,
    :root.rs .rs-orgtree-close,
    :root.rs .rs-tip,
    :root.rs [data-rs-collapse-toggle] {
        display: none;
    }
}

/* ── P6-shared: S3 팁 본문 줄바꿈 보존(속성 텍스트 경로만), S4 앵커 점프 여백 ── */
@media screen {
    :root.rs .rs-tip .rs-tip-body.rs-tip-text {
        white-space: pre-line;
    }
}
/* 붙어 있는 ⓘ 두 개의 44px 히트 영역이 겹치지 않게 다음 ⓘ 를 띄운다(중심 간격 >= 44px). 마우스 PC 불변 — any-pointer 는 넣지 않는다 */
@media screen and (pointer: coarse), screen and (max-width: 992.98px) {
    :root.rs .rs-tip-hit + .rs-tip-hit {
        margin-left: 24px;
    }
}
@media screen and (max-width: 1279.98px) {
    :root.rs {
        --rs-anchor-offset: calc(var(--header-height, 56px) + 8px);
    }
    :root.rs [data-rs-anchor] {
        scroll-margin-top: var(--rs-anchor-offset);
    }
}