@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    html,
    body,
    #root,
    .layout-wrapper,
    .layout-container,
    .layout-page {
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    .layout-menu {
        height: 100vh;
        overflow: hidden;
    }

    .layout-menu .menu-inner {
        height: calc(100vh - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .layout-page {
        overflow: hidden;
    }

    .layout-page .content-wrapper {
        height: calc(100vh - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* 본문 상자가 화면 높이로 줄어들지 않게 한다(2026-10-01 주인님 발견 — '서류 요청 알림톡' 표 뒤로 비친 것).
       위에서 .content-wrapper 를 화면 높이로 묶고 그 안에서 스크롤하게 했는데, 테마가 그 자식에
       min-height:1px 를 줘서 본문 상자가 화면 높이까지 줄어들었다. 그러면 긴 내용은 상자 밖으로 넘치고,
       꼬리말('© FLEX 통합관리 시스템')이 첫 화면 맨 아래(=줄어든 상자 끝)에 박힌 채 그 위로 표가 그려져
       양옆으로 비쳤다. 줄어들지만 않게 하면 꼬리말은 내용 맨 끝으로 가고, 짧은 화면은 flex-grow 로
       여전히 바닥까지 찬다. 화면 높이를 넘는 모든 화면에 있던 것이다(5/27 스크롤 구조부터). */
    .layout-page .content-wrapper > * {
        flex-shrink: 0;
    }
}

/* active 메뉴 우측 파란 인디케이터(.menu-item.active::before, position:absolute)가
   active 항목 기준으로 배치되도록 menu-item 을 relative 로 만든다.
   이게 없으면 인디케이터가 스크롤 컨테이너(menu-inner) 기준이 되어, 모바일에서
   사이드바 스크롤 시 active 를 안 따라가고 화면 특정 높이에 고정돼 보인다
   (PC 는 사이드바가 스크롤되지 않아 문제가 드러나지 않았음). 2026-07-21 확정. */
.layout-menu .menu-item {
    position: relative;
}

.layout-menu .menu-item.active > .menu-link {
    background-color: rgba(105, 108, 255, .16);
    color: #696cff;
    font-weight: 700;
}

.layout-menu .menu-item.active > .menu-link .menu-icon {
    color: #696cff;
}

.hidden {
    display: none !important;
}

.accordion-button {
    padding: 1.25rem;
}

.footer-text {
    font-size: .75rem;
    color: #b4bdc6;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.default-border-color {
    border-color: #d9dee3;
}

.table th {
    font-size: .975rem;
}

.table td {
    font-size: .925rem;
}

.dropdown-item.warning {
    color: #e6381a;
}

.dropdown-item.warning:active {
    background-color: rgba(255, 105, 105, 0.08) !important;
    color: #e6381a !important;
}

.modal .form-label {
    font-size: .875rem;
}

.modal .form-control {
    font-size: 1rem;
}

.form-check-input,
.form-check-label {
    cursor: pointer;
}

.form-control.fail-valid,
.form-check-input.fail-valid {
    border-color: #ff3e1d !important;
}

.form-check-input.fail-valid~.form-check-label {
    color: #ff3e1d;
}

.form-select.fail-valid {
    border-color: #ff3e1d !important;
}

.bootstrap-select .dropdown-toggle.btn-default.fail-valid {
    border-color: #ff3e1d !important;
}

.tooltip-inner {
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    font-size: .825rem;
    background: #696cff;
    box-shadow: 0 .125rem .25rem 0 rgba(105, 108, 255, .4);
    color: #fff
}

ngb-tooltip-window.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before,
.tooltip.bs-tooltip-auto[data-popper-placement=top] .tooltip-arrow:before {
    border-top-color: #696cff
}

.tooltip.bs-tooltip-auto[data-popper-placement=bottom] .tooltip-arrow:before {
    border-right-color: #696cff
}

.tooltip.bs-tooltip-auto[data-popper-placement=left] .tooltip-arrow:before {
    border-right-color: #696cff
}

.tooltip.bs-tooltip-auto[data-popper-placement=right] .tooltip-arrow:before {
    border-right-color: #696cff
}


.btn.btn-danger.form-control {
    border-color: #e6381a !important;
}


.modal-address {
    display: none;
    position: relative;
    z-index: 9999;
    width: 100%;
    padding: 10px;
    border: 1px solid #d9dee3;
    background-color: white;
    border-radius: 0.375rem;
}

@media screen and (max-width: 469px) {
    .modal-address {
        position: fixed;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}


.bs-stepper .step.active .bs-stepper-circle {
    background-color: #696cff;
    box-shadow: 0 .1875rem .375rem 0 rgba(105, 108, 255, .4);
    color: #fff
}

.bs-stepper .step.active .bs-stepper-label {
    color: #696cff !important
}

.bs-stepper .step.active .bs-stepper-icon svg {
    fill: #696cff !important
}

.bs-stepper .step.crossed .step-trigger .bs-stepper-circle {
    background-color: rgba(105, 108, 255, .16) !important;
    color: #696cff !important
}

.bs-stepper .step.crossed .step-trigger .bs-stepper-icon svg {
    fill: #696cff !important
}

.bs-stepper .step.crossed+.line svg {
    fill: #696cff
}

.bs-stepper .step.crossed+.line i {
    color: #696cff
}

.bs-stepper.wizard-icons .step.crossed .step-trigger .bs-stepper-label {
    color: #696cff !important
}

.bs-stepper .step-trigger:focus {
    color: #696cff
}

.bs-stepper .step-trigger:focus svg {
    fill: #696cff !important
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

.content-header-sub {
    color: #697a8d;
    font-size: .875rem;
    font-weight: 500;
}


.input-group .search-title {
    min-width: 100px;
    padding: 0.4375rem 1.125rem;
}

.input-radio-group {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.4375rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.53;
    background-color: #fff;
    border: 1px solid #d9dee3;
    border-radius: 0.375rem;
}

.input-radio-group .form-check {
    margin-bottom: 0;
}

.modal-body.input-readonly-form .form-control[readonly] {
    background-color: #fff !important;
}

.modal-body.input-readonly-form .input-group .text-primary {
    background-color: #ebeef0;
}

.list-scroll-layout {
    position: relative;
    overflow: auto;
    width: 100%;
    max-height: 600px;
    height: 600px;
}

.list-group-item .list-group-icon {
    display: flex;
    float: right;
    align-items: center;
    margin-top: .2rem;
    cursor: pointer;
}

table.table-checkboxes-select .checkboxes-cell {
    width: 40px;
}

/* ─────────────────────────────────────────────
   사이드바 스크롤바 숨김 (2026-07-21 재진단·확정)
   "현재 메뉴 우측에 고정된 파란 선"의 정체 = 사이드바 메뉴가 길어(≈1560px)
   세로로 넘칠 때 노출되는 브라우저 기본 스크롤바 thumb(파란 계열). thumb 이 스크롤
   위치에 붙박여 active 항목과 무관한 높이에 고정돼 보였다. PC 는 PerfectScrollbar 가
   hover 시에만 얇게 떠서 안 거슬렸고, 모바일/태블릿 구간에서만 기본 스크롤바가 상시 노출됨.
   → 사이드바 스크롤바를 완전히 숨긴다(스크롤은 터치·휠로 정상). PC 동작과 동일해짐.
   ───────────────────────────────────────────── */
#layout-menu .menu-inner {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 구 Edge/IE */
}

#layout-menu .menu-inner::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;                  /* Chrome/Safari/모바일 webkit */
}

/* 모바일 사이드바 열림 시 뒤 페이지 스크롤바가 사이드바 위로 비치지 않게 잠금.
   (콘텐츠 래퍼까지 건드리면 레이아웃이 틀어질 수 있어 html/body 최소 범위만) */
@media (max-width: 1199.98px) {
    html.layout-menu-expanded,
    html.layout-menu-expanded body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }
}

/* ─────────────────────────────────────────────
   bootstrap-select 래퍼 이중 캐럿 차단 (2026-07-22 브라우저 실측 확정)
   bootstrap-select 는 래퍼 div 에 원본 select 의 form-select/form-control 클래스를
   그대로 복사한다. BS5 의 .form-select 는 자체 보더+캐럿 배경이미지를 그리는
   클래스라서, 래퍼가 버튼보다 넓으면(실측 220px vs 175px) 버튼 오른쪽 조각이
   "빈 select 박스"처럼 이중으로 보인다(수동 서류 알림톡 필터 등 전 페이지 공통).
   → 래퍼의 폼 크롬을 제거하고 버튼이 래퍼를 꽉 채우게 해 UI 는 버튼 하나만 그린다.
   ───────────────────────────────────────────── */
.bootstrap-select.form-select,
.bootstrap-select.form-control {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.bootstrap-select.form-select > .dropdown-toggle,
.bootstrap-select.form-control > .dropdown-toggle {
    width: 100%;
}

/* ─────────────────────────────────────────────
   bootstrap-select 자동 init 래퍼 폭 보정 (2026-07-22 전수 실측)
   클래스(selectpicker)로 자동 init 되면 width 옵션이 없어 라이브러리 기본
   220px 고정폭을 받는다 → 좁은 col(예: col-md-2, 고정폭 col-auto)에서
   10~75px 삐져나옴(회사관리·기본서류·지원금종류 실측). JS init(width:100%)
   페이지는 인라인 width 가 있어 이 규칙의 영향을 받지 않는다.
   ───────────────────────────────────────────── */
.bootstrap-select.form-select:not([style*="width"]),
.bootstrap-select.form-control:not([style*="width"]) {
    /* 라이브러리 220px 규칙이 :not() 체인으로 특이성이 더 높아 !important 필요.
       인라인 width(data-width 지정) 래퍼는 선택자에서 제외되므로 영향 없음 */
    width: 100% !important;
    min-width: 0;
}

/* ─────────────────────────────────────────────
   표 안 토글 스위치 — .form-switch 에 d-flex 를 같이 준 경우 (2026-08-05 실측)
   부트스트랩의 .form-switch 는 스위치 자리를 padding-left:2.5em + 스위치
   margin-left:-2.5em 으로 잡는다. 가운데 정렬하려고 d-flex 를 얹으면
   스위치가 flex item 이 되어 그 음수 여백이 그대로 남고, 지정한 폭(3.5em)이
   flex-shrink 로 찌그러진다 — 실측 9px(정상 50px). 스위치가 동그라미만
   남고, 여백 36px 이 좁은 칸을 먹어 옆 글자가 세로로 쪼개졌다.
   (지원금 종류 관리 · 신청자 목록 · 서류 요청 세 화면 공통)
   ───────────────────────────────────────────── */
.form-switch.d-flex {
    padding-left: 0;
}

.form-switch.d-flex .form-check-input {
    margin-left: 0;
    flex-shrink: 0;   /* 좁은 칸에서도 스위치가 찌그러지지 않게 */
}

/* 스위치 옆 상태 글자는 칸이 좁아도 한 줄로 */
.form-switch.d-flex > span,
.form-switch.d-flex > .form-check-label {
    white-space: nowrap;
}

/* 급여·인사 제출 상태 선택 — 노무 상세 모달(partials/submission_modal)이 쓰는 색.
   그 모달을 월별 발송 현황·월별 제출 현황 두 화면이 공유하므로, 화면이 아니라 여기 둔다.
   (2026-08-06 부품으로 뽑을 때 HTML·JS 만 옮겨 새 화면에서 색이 빠졌다)
   알림톡 수동 발송 페이지와 같은 색 — 공용 CU_doc_status_new 연동. */
.doc-status-select { min-width: 96px; }
.doc-status-select.st-미제출 { color: #ff3e1d; font-weight: 600; }
.doc-status-select.st-일부제출 { color: #b17c10; font-weight: 600; }
.doc-status-select.st-제출완료 { color: #1f9254; font-weight: 600; }

/* 노무 제출 상태 배지 — 월별 발송 현황·월별 제출 현황이 같은 건을 같은 색으로 보여주게 한다.
   전에는 화면마다 색이 박혀 있어 같은 '제출 전' 이 한쪽은 주황(대기), 다른 쪽은 빨강(오류)으로 보였다.
   '제출 전' 은 아직 기한이 남은 정상 대기 상태다 — danger 빨강을 쓰지 않는다(2026-08-07).
   라벨 정본은 NomuController::SUBMIT_STATUS_LABELS. */
.nomu-submit-badge.is-submitted  { background: rgba(46,125,50,.12);   color: #256428; }
.nomu-submit-badge.is-no-change  { background: rgba(138,141,147,.12); color: #5d6b7d; }
.nomu-submit-badge.is-before     { background: rgba(232,131,12,.12);  color: #a35c07; }
/* 글자만 진하게 내렸다(배경·색 계열은 그대로). 실측 대비 2.44~4.37 → 아래 재측정값 참고.
   '제출 전' 이 2.44 로 가장 낮아 흐릿했다 — 아직 기한이 남은 정상 대기 상태라 자주 보게 되는 값이다. */

/* ── 상태 배지 글자색 — 밝은 배경에 흰 글자면 읽히지 않는다 ──────────────────
   실측(1440px, 2026-08-20): 같은 화면 안에서 이렇게 갈렸다.
     · badge bg-success  "승인"        → 대비 1.74   (기준 4.5)
     · badge bg-warning  "내부 검토 중" → 대비 1.90
     · badge bg-info     "심사중"       → 대비 2.10
     · badge bg-warning **text-dark**   → 대비 6.71   ← 같은 노랑인데 글자만 진하다
   누군가 일부에만 text-dark 를 붙여 둔 상태였다. 화면마다 붙였다 빠뜨리는 대신
   여기서 한 번에 정한다 — 앞으로 새로 만드는 배지도 자동으로 읽히는 색이 된다.

   .ac-badge(알림톡 관제)는 자체 진한 배경을 쓰므로 건드리지 않는다.
   버튼(.btn.bg-success 등)도 대상이 아니다 — 배지만 짚는다. */
.badge.bg-success:not(.ac-badge),
.badge.bg-warning:not(.ac-badge),
.badge.bg-info:not(.ac-badge) {
    color: #2f3641 !important;
}

/* 연한 배경 배지(bg-label-*) 글자색 — 테마 기본은 배경과 같은 계열의 밝은 색이라 잘 안 읽힌다.
   실측: bg-label-success 1.58 / bg-label-secondary 2.71 / bg-label-primary 3.33 (기준 4.5).
   사이드바 건수처럼 작은 글자에 많이 쓰여서 더 불리하다.
   배경은 그대로 두고 **글자만 같은 계열의 진한 색**으로 내린다 — 색 인상은 유지되고 읽힌다.
   진한 값은 이 파일이 이미 쓰던 것(.st-일부제출 #b17c10 / .st-제출완료 #1f9254)과 맞췄다. */
.badge.bg-label-primary   { color: #4b4dcc !important; }
.badge.bg-label-success   { color: #1f9254 !important; }
.badge.bg-label-warning   { color: #b17c10 !important; }
.badge.bg-label-danger    { color: #c0341a !important; }
.badge.bg-label-info      { color: #0a7ea1 !important; }
.badge.bg-label-secondary { color: #5d6b7d !important; }

/* ── 긴 표에서 머리글 고정 — **되돌렸다**(2026-08-20 같은 날) ──────────────────
   표 영역에 높이를 줘서 그 안에서 스크롤하게 하면 머리글은 붙는다. 실제로 붙었다.
   그런데 **스크롤 막대가 두 겹이 된다** — 표 안에서 한 번, 본문에서 또 한 번.
   주인님이 바로 이상하다고 하셨고, 재 보니 화면 세 곳 모두 두 겹이었다.

   머리글이 보이는 것보다 **스크롤이 하나인 것이 더 중요하다.** 표를 내려보다가
   손이 어디에 있느냐에 따라 다른 것이 움직이면 그게 더 불편하다.

   → **해결됐다(2026-08-21).** `partials/sticky_table_head` 를 볼 것.
   높이를 주지 않고, 가로로 넘치지 않는 표에 한해 .table-responsive 의 overflow 를 풀어
   스크롤 컨테이너에서 빼냈다. 그러면 sticky 기준이 본문이 되어 머리글이 붙고 스크롤은 하나다.
   여기(공용 CSS)에 두지 않은 이유: 폭을 **재서** 판정해야 해 JS 가 함께 있어야 한다. */

/* ⚠️ 여기 짝 없는 닫는 중괄호 하나가 있었다(2026-08-21 주석을 넣다 남은 것). 그 때문에 이 아래에
   무엇을 추가해도 CSS 파서에서 흔들려 적용되지 않았다 — 2026-08-24 제거. */

/* ── 모달 안의 표는 최소 높이를 먹지 않는다 ──────────────────────────────
   테마 공용 규칙 `.table-responsive { min-height: 420px }` 는 **목록 화면에서**
   DataTables 드롭다운이 잘리지 않게 둔 것이다. 그런데 모달 안의 작은 표까지 420px 를 먹어
   표 아래에 큰 빈 공간이 생긴다 — 알림 이력 모달 실측(2026-08-24): 표 87px / 상자 336px,
   행이 2개뿐인데 249px 가 비었다.
   두 화면(연차 촉진)에서 국소로 풀어 둔 것을 여기로 올려 **모든 모달**에 적용한다.
   목록 화면의 420px 는 그대로다(모달 안이 아니므로 이 규칙에 걸리지 않는다). */
.modal .table-responsive { min-height: 0; }

/* ── 보조 글자(.text-muted) 대비 ────────────────────────────────────────
   테마 기본값이 #a1acb8 이고 흰 배경에서 **대비 2.31** 이다 — 작은 글자 기준(4.5:1)의 절반이다.
   화면 곳곳의 안내·설명이 이 색이라, 담당자가 읽어야 할 문장이 흐려서 안 읽힌다
   (주인님이 서류 요청 화면에서 "색이 연해서 구분감이 없다" 고 지적한 것과 같은 뿌리).
   CLAUDE.md 는 muted 를 #697a8d 로 적어 두었는데 실제 값과 달랐다 — 문서 쪽이 맞다.
   #5f6b78 로 두면 대비 5.44 로 기준을 넘긴다(실측). 크기·굵기·배치는 그대로다. */
.text-muted,
.text-muted.small,
small.text-muted {
    color: #5f6b78 !important;
}

/* ── 보조 라벨(#697a8d) 미세 조정 ───────────────────────────────────────
   CLAUDE.md 가 muted 로 정한 색인데 흰 배경에서 대비 4.40 — 작은 글자 기준(4.5)에 0.1 부족했다.
   119곳에 쓰이는 색이라 크게 바꾸면 화면 인상이 달라진다. RGB 3 단계만 내려 4.65 로 넘긴다
   (눈으로는 같은 색으로 보이고 기준은 통과한다 — 실측).
   대상은 **글자로 쓰이는 자리만** 이고, 배경·테두리로 쓰는 곳은 건드리지 않는다. */
/* .stat-label 은 화면 쪽 `.dashboard-stat-card .stat-label` 이 더 강해 여기서 못 이긴다 —
   그 화면에서 직접 고쳤다(dashboard.blade.php). 여기 두면 안 먹는 규칙만 남는다. */
.form-text,
.card-header .small,
.ac-stat-note,
.ac-mini {
    color: #667689;
}

/* ── 본문 글자색을 문서(CLAUDE.md)가 정한 값으로 ─────────────────────────
   CLAUDE.md 는 body 를 #566a7f 로 적어 두었는데 실제로는 테마 기본 #697a8d 가 쓰이고 있었다.
   흰 배경 대비: #697a8d = 4.40(작은 글자 기준 4.5 미달) / #566a7f = 5.58(통과) — 실측.
   회사명·표 내용처럼 담당자가 매일 읽는 글자가 여기 해당한다.
   **색만 바꾼다** — 크기·굵기·간격·배치는 그대로이고, 제목처럼 색을 따로 지정한 곳은 영향 없다. */
/* ⚠️ `body { color: #566a7f }` 를 넣어 봤지만 **테마 규칙이 더 강해 먹지 않았다**(3회 시도).
   !important 로 밀면 색을 따로 지정한 자리까지 흔들릴 수 있어 넣지 않았다.
   현재 본문 글자는 #697a8d = 대비 4.40 으로, 작은 글자 기준(4.5)에 **0.1 부족**하다.
   읽는 데 문제는 없어 보류한다 — 손보려면 테마 변수(core.css 의 body 색)를 봐야 하고,
   그것은 화면 전체에 걸리는 변경이라 따로 판단할 일이다. */