:root{
    --navy:#17324d;
    --blue:#2167ae;
    --blue-dark:#174e85;   /* 켜진 메뉴·탭, 상태 배지, 일정 칩 — "지금 여기·이 상태". 링크·단추의 --blue 는 "누를 수 있다". 파랑은 이 둘뿐 (HRUserAccess.md 21절 기본 UI) */
    --pale:#FBFBFF;
    --line:#dfe6ed;
    --text:#22303c;
    --muted:#44525f;
    --green:#18794e;
    --amber:#986800
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    background:var(--pale);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",helvetica,"나눔바른고딕 옛한글","NanumBarunGothic YetHangul",sans-serif;
    font-size:14px
}

.topbar{
    height:60px;
    background:var(--navy);
    display:flex;
    align-items:center;
    padding:0 max(24px,calc((100vw - 1180px)/2));
    gap:34px;color:#fff
}

.brand{
    font-size:20px;
    font-weight:750;
    color:#fff;
    text-decoration:none;
    white-space:nowrap
}

.topbar nav{
    display:flex;gap:22px
}

.topbar nav a,.user-menu{
    color:#dbe9f5;
    text-decoration:none
}

.user-menu{
    margin-left:auto;
    display:flex;
    gap:10px;
    align-items:center
}

.link-button{
    border:0;
    padding:0;
    background:transparent;
    color:#1B1D29;
    cursor:pointer
}

/* 본문 링크와 같은 모양의 단추 — 링크처럼 보이지만 POST 를 보낸다 (계약 만료 예정의 이름 → 새 계약 작성, 2026-09-22).
   sidebar.css 에도 .link-button 색(검정)이 있어 뒤에 읽히므로, 클래스 둘로 우선순위를 높인다 */
.link-button.link-button--link{
    font:inherit;
    color:var(--blue);   /* 본문 링크 규칙(1509행 근처)과 같은 파랑·굵기 */
    font-weight:650
}

.link-button.link-button--link:hover,.link-button.link-button--link:focus-visible{
    text-decoration:underline
}

.link-button-form{
    display:inline
}

.container{
    max-width:1180px;
    margin:0 auto;
    padding:34px 24px 60px
}

.page-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:24px;
    gap:18px
}

.page-heading h1{
    font-size:26px;margin:5px 0 6px
}

.page-heading p{
    margin:0;
    color:var(--muted)
}

.home-welcome{
    min-height:240px;
    align-items:center;
    margin-bottom:0
}

.home-welcome h1{
    margin-bottom:10px
}

.home-welcome p{
    font-size:16px
}

.hr-data-import-card{
    max-width:760px;
    padding:28px
}

.hr-data-import-card h2{
    margin:0 0 8px;
    font-size:18px
}

.hr-data-import-card p{
    color:var(--muted);
    line-height:1.65
}

.hr-data-import-step{
    display:grid;
    grid-template-columns:32px 1fr;
    gap:10px;
    padding:14px 0;
    border-bottom:1px solid var(--line)
}

.hr-data-import-step:last-of-type{
    border-bottom:0
}

.hr-data-import-step__number{
    width:28px;
    height:28px;
    margin:0 !important;
    display:block !important;
    background:transparent;
    color:var(--blue) !important;
    font-size:24px;
    font-weight:700;
    line-height:28px
}

.hr-data-import-step strong,
.hr-data-import-step__description{
    display:block
}

.hr-data-import-step__description{
    margin-top:3px;
    color:var(--muted)
}

.hr-data-import-step__action{
    margin-top:11px
}

.hr-data-import-step__action .button{
    display:inline-flex;
    align-items:center;
    min-height:32px
}

.hr-data-import-form{
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid var(--line)
}

/* ERP 의 인사 자료 업로드 (2026-09-23): 단계 목록은 번호 붙은 줄, 안내는 13px 회색 */
.hr-data-import-steps{margin:0;padding-left:20px}
.hr-data-import-steps li{margin-bottom:12px}
.hr-data-import-steps strong{display:block;margin-bottom:3px}

.hr-data-import-form label{
    display:block;
    margin-bottom:8px;
    font-weight:700
}

.hr-data-import-file{
    width:100%;
    padding:10px;
    border:1px solid #c6d2dd;
    border-radius:6px;
    background:#fff
}

.field-help{
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-size:13px
}

.form-errors{
    margin:8px 0 0;
    padding-left:18px;
    color:#b42318
}

.page-heading small{
    font-size:15px;
    color:var(--muted);
    font-weight:500
}

/* 단추 규칙 하나 (기본 UI): 기본 40px · 작은 것(.small, 표 안) 28px · 글씨 14/12px. <button> 과 <a> 가 같은 크기가 되게 글꼴·크기를 여기서 정한다 */
.button{
    box-sizing:border-box;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:40px;padding:0 13px;
    border:1px solid #c6d2dd;background:#fff;
    border-radius:6px;
    color:#294057;
    font-family:inherit;font-size:14px;font-weight:650;line-height:1;
    text-decoration:none;cursor:pointer;
    white-space:nowrap;vertical-align:middle}

.button.primary{
    border-color:var(--blue);
    background:var(--blue);
    color:#fff
}

.button.small,table .button{
    height:28px;padding:0 9px;
    font-size:12px
}

/* 잠긴 단추(disabled): 모양은 같고 흐리게. 이유는 title 로 (채용진행의 삭제 등) */
.button:disabled,.button[aria-disabled="true"]{
    opacity:.45;
    cursor:not-allowed
}

.action-group{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}

.stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:18px   /* 아래 표와의 간격도 18px (인사 현황 기준) */
}

.stats>div,.panel,.form-card,.info-grid{
    background:#fff;
    border:1px solid var(--line);
    border-radius:9px;
    box-shadow:0 1px 2px #19334b08
}

.stats>div{
    padding:20px
}

.stats span{
    display:block;
    color:var(--muted);
    font-size:13px
}

.stats strong{
    display:block;
    font-size:28px;
    margin-top:7px
}

.grid-two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

/* 패널 여백은 위아래 16px. 제목(.panel-title)은 자기 여백(14px)이 있어 위로 14px 당겨 예전과 같은 자리(16px)에 놓인다.
   제목 없이 표·폼으로 시작하는 패널(새 계약 줄 등)도 위 16px 이 된다 — 예전엔 2px 라 위가 붙어 보였다 (2026-09-18) */
.panel{
    overflow:auto;
    padding:16px 18px
}

.panel > .panel-title:first-child,
.panel > [type="hidden"]:first-child + .panel-title,
.panel > form > .panel-title:first-child,
.panel > form > [type="hidden"]:first-child + .panel-title{
    margin-top:-14px
}

.panel-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0
}

.panel-title h2{
    font-size:18px;
    margin:0
}

table{
    width:100%;
    border-collapse:collapse;
    white-space:nowrap
}

/* 표 규칙 하나 (기본 UI): 머리글·내용 모두 가운데 정렬, 14px, 여백 11/9px. 서술형 칸(사유·비고·내용·의견·메모·설명·제목)만 내용을 왼쪽 — table_text_align.js 가 머리글을 보고 td.text-left 를 붙인다 */
th{
    color:var(--muted);
    font-weight:600;
    font-size:14px;
    background:#f8fafc
}

th,td{
    border-bottom:1px solid var(--line);
    padding:11px 9px;
    text-align:center
}

td.text-left{text-align:left}

/* 빽빽한 표: 13px, 여백 6/8px — 급여대장·사용자 권한·이력 편집·할 일·퇴사율·발령 편집·수술 항목. 새 표는 .table-compact 를 붙인다 */
.table-compact th,.table-compact td,.pr-table th,.pr-table td,.ua-table th,.ua-table td,.personal-history-table th,.personal-history-table td,.rc-todo-table th,.rc-todo-table td,.rc-turnover th,.rc-turnover td,.apt-edit-table th,.apt-edit-table td,.consult-formset th,.consult-formset td{padding:6px 8px;font-size:13px}

/* 날짜 칸(KeyboardDateInput): 글자 칸 + 달력 버튼. 폼 칸 안에서 가로로 채운다 */
.field .inline-date-input{display:flex;align-items:center;gap:4px}
.field .inline-date-input .keyboard-date-input{flex:1 1 auto;min-width:0}

/* 인사 탭 설정 화면 (HRUserAccess.md 19절) */
.hr-settings-tabs{margin-bottom:18px}   /* 설정 탭 줄과 아래 표 사이도 18px */
.hr-settings-form .field.hr-field--check{display:flex;flex-wrap:wrap;align-items:center;min-height:42px}
.hr-settings-form .field.hr-field--check label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:650;cursor:pointer}
.hr-settings-form .field.hr-field--check input[type="checkbox"]{flex:0 0 auto;width:16px;height:16px;margin:0}
/* 설정 목록의 바로 고치기 칸: 숫자·짧은 글은 좁게, 체크는 가운데 (2026-09-23) */
.hr-settings-list input[type="text"],.hr-settings-list input[type="number"]{width:90px;text-align:center}
.hr-settings-list input.wide{width:240px;text-align:left}   /* 계산방법 표기처럼 글이 긴 칸 */
.hr-settings-list select{max-width:160px}
.hr-settings-form .field.hr-field--check .field-help{flex-basis:100%;margin-top:4px}
.hr-field-error{color:#c53030}
.hr-settings-log td.text-left s{color:#9aa8b5}

/* .table-center 는 이제 기본값과 같다(모든 표가 가운데) — 이름만 남겨 둔다 */

.empty{
    text-align:center;
    color:var(--muted);
    padding:30px!important
}

/* 상태 배지 규칙 하나 (기본 UI): .badge(계약·급여·수정 요청)와 .rc-status(채용)가 같은 모양. 색은 뜻으로 —
   파랑 진행 중·예정 / 초록 완료·합격·확정 / 빨강 취소·반려·무효·불합격 / 노랑 대기(서명·승인) / 회색 초안·종료 */
.badge,.rc-status{display:inline-block;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap;background:#eef2f6;color:#44586b}
.rc-status--open,.rc-status--scheduled,.rc-status--interviewed{background:#eaf3fc;color:var(--blue-dark)}
.badge.approved,.badge.completed,.badge.confirmed,.rc-status--passed,.rc-status--accepted,.rc-status--confirmed,.rc-status--hired{background:#e7f5ed;color:var(--green)}
.badge.rejected,.badge.canceled,.badge.void,.rc-status--failed,.rc-status--declined,.rc-status--no_show{background:#fdeaea;color:#b3372f}
.badge.pending,.badge.pending_sign{background:#fff4d6;color:var(--amber)}
.badge.awaiting{background:#eaf3fc;color:var(--blue-dark)}   /* 체결 대기: 직원 서명 끝, 담당자 차례 */
.badge.draft,.rc-status--closed{background:#eef2f6;color:var(--muted)}

.info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-bottom:18px;
    padding:2px 18px 16px;
    gap:10px 14px
}

.info-grid-title{
    grid-column:1 / -1;
    padding:14px 0;
}

.info-grid-title h2{
    font-size:18px;
    margin:0;
}

.info-grid span{
    display:block;
    color:var(--muted);
    font-size:14px;
    background:#f8fafc;
}

.info-grid-item{
    padding:0 0 6px;
}

.info-grid-item > span{
    margin:0 0 5px;
    padding:8px 9px;
}

.info-grid-value{
    padding:0 9px;
}

.info-grid strong{
    display:block;
}
.search{
    display:flex;
    gap:8px;
    margin:0 0 18px
}

/* 좁은 화면: 검색·필터 줄은 접혀서 다음 줄로 — 페이지가 옆으로 늘어나지 않게 (2026-09-17 수정 요청) */
@media(max-width:760px){
    .search{flex-wrap:wrap}
    .search input{width:100%;max-width:300px}
}

.search input{
    width:300px;
    border:1px solid #bdcad5;
    border-radius:6px;
    padding:9px;
    font:inherit;
    background:#fff
}

.form-card{
    padding:26px;
    max-width:820px
}

.memo-field {
    grid-row: span 1;
}

.memo-field textarea {
    height:58px;
    min-height:58px;
    resize:vertical;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.field.wide{
    grid-column:span 2
}

.field label{
    font-weight:650;
    display:block;
    margin-bottom:7px
}

.field em{
    color:#c53030;
    margin-left:2px;
    font-style:normal
}

.field input,.field select,.field textarea,.login-card input{
    width:100%;
    border:1px solid #bdcad5;
    border-radius:6px;
    padding:9px;
    font:inherit;
    background:#fff
}

/* 체크박스·라디오 규칙 하나 (기본 UI, 2026-09-23 — 화면마다 크기·자리가 달라 여러 번 고쳐 달라던 것): 16px, 파란 체크, 여백 0, 글자와는 label 의 gap 8px 로 띄운다.
   <label> 이 체크박스를 바로 감싸면 한 줄에 가운데 맞춤. .field 의 가로 100% 규칙에서도 뺀다 */
input[type="checkbox"],input[type="radio"]{
    box-sizing:border-box;
    width:16px;
    height:16px;
    padding:0;
    margin:0;
    flex:0 0 auto;
    vertical-align:middle;
    accent-color:var(--blue);
    cursor:pointer
}

label:has(> input[type="checkbox"]),label:has(> input[type="radio"]){
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer
}

.field input[type="checkbox"],.field input[type="radio"]{
    width:16px;
    height:16px;
    margin:0
}

.form-actions{
    margin-top:24px;
    display:flex;
    justify-content:flex-end;
    gap:8px
}

.message{
    border-radius:6px;
    padding:10px 14px;
    margin-bottom:18px
}

/* 안내가 여러 줄 이어질 때(서명 요청의 법정 기재 오류 등) 줄 사이는 6px 만 — 마지막 줄 아래만 본문 간격 18px */
.message:has(+ .message){
    margin-bottom:6px
}

.message.error{
    background:#fdecec;
    border:1px solid #f3c2c2
}

.message.warning{
    background:#fff6e5;
    color:#8a5a00;
    border:1px solid #f0dcb0
}

.message.success{
    background:#e7f5ed;
    color:#17623e
}

.error{
    color:#bd2727
}

.login-card{
    max-width:390px;
    background:#fff;
    margin:10vh auto;
    padding:30px;
    border:1px solid var(--line);
    border-radius:10px
}

.login-card h1{
    margin:0 0 8px
}

.login-card p{
    color:var(--muted);
    margin:0 0 24px
}

.login-card label{
    display:block;
    font-weight:650;
    margin:15px 0
}

.login-card button{
    width:100%;
    margin-top:10px
}

@media(max-width:760px){
    .topbar{
        padding:0 16px;
        gap:16px
    }
    
    .topbar nav{
        gap:12px
    }
    
    .topbar nav a:nth-child(3){
        display:none
    }
    
    .user-menu{
        font-size:12px
    }
    
    .container{
        padding:24px 14px
    }
    
    .grid-two,.stats,.info-grid,.form-grid{
        grid-template-columns:1fr
    }
    
    .field.wide{
        grid-column:auto
    }
    
    .page-heading{
        align-items:start;
        flex-direction:column
    }
    
    .action-group{
        width:100%
    }
    
    .action-group .button{
        flex:1;
        text-align:center
    }
    
    table{
        font-size:12px
    }
}
.department-summary {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.department-status-panel {
    max-width: 1120px;
}

.department-tree,
.department-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.department-tree > .department-tree__node + .department-tree__node {
    margin-top: 12px;
}

.department-tree ul {
    margin: 8px 0 0 24px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.department-tree__node + .department-tree__node {
    margin-top: 8px;
}

.department-tree__row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.department-tree__name {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: var(--navy);
}

.department-tree__level,
.department-tree__metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 5px;
    background: #edf3f8;
    color: #46627a;
    font-size: 12px;
    white-space: nowrap;
}

.department-tree__level {
    background: #dbe9f5;
    color: var(--blue-dark);
    font-weight: 650;
}

.department-tree__metrics {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

@media (max-width: 900px) {
    .department-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .department-tree__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .department-tree__metrics {
        justify-content: flex-start;
    }
}


/* Department status: compact ERP organization chart. */
.department-summary {
    width: min(100%, 1180px);
    grid-template-columns: repeat(8, minmax(110px, 140px));
    gap: 12px;
}

.department-summary.stats > div {
    padding: 14px;
}

.department-summary.stats span {
    font-size: 18px;
    font-weight: 700;
}

.department-summary.stats strong {
    margin-top: 5px;
    font-size: 26px;
}


.department-tree__row {
    min-height: 44px;
    padding: 7px 12px;
    border-color: var(--line);
    background: #fff;
}

.department-tree__name {
    font-size: 14px;
}

.department-tree__metrics span,
.department-tree__level {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 14px;
}

.department-tree__duty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 5px 10px;
    color: var(--text);
    font-size: 14px;
}

.department-tree__duty span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 7px;
    border-radius: 5px;
    background: #edf3f8;
    color: var(--blue-dark);
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 900px) {
    .department-summary {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


.organization-tree-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
}

.organization-tree-heading h2 {
    margin:0;
}

.organization-tree-controls {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.organization-tree-control {
    min-height:30px;
    padding:4px 10px;
    border:1px solid #2167ae;
    border-radius:6px;
    background:#fff;
    color:var(--blue-dark);
    font:inherit;
    font-weight:650;
    cursor:pointer;
}

.organization-tree-control:hover,
.organization-tree-control.is-active {
    background:#edf5fb;
}

.department-tree__toggle {
    width:20px;
    min-width:20px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--blue);
    font-size:18px;
    font-weight:700;
    line-height:24px;
    cursor:pointer;
}

.department-tree__toggle--empty {
    display:block;
}

@media (max-width:700px) {
    .organization-tree-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
}

/* Job-duty rows use the same visual scale as department rows. */
.department-tree__duty {
    margin: 8px 0;
    padding: 0;
}

.department-tree__duty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.department-tree__duty .department-tree__name {
    font-size: 14px;
    color: var(--text);
}

.department-tree__duty .department-tree__metrics span,
.department-tree__metric-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #edf3f8;
    color: #46627a;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.department-tree__metric-link:hover {
    background: #dbe9f5;
    color: var(--blue);
}

.headcount-history {
    max-width: 1120px;
}

.headcount-history__notice {
    margin-bottom: 16px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .department-tree__duty-row {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Job duties inherit the same type scale as department rows. */
.department-tree__duty-row .department-tree__level {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #dbe9f5;
    color: var(--blue-dark);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.department-tree__duty .department-tree__duty-name {
    display: inline;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
}/* Job duties are displayed inside their department card, not as separate cards. */
.department-tree__row {
    flex-wrap: wrap;
}

.department-tree__duty-list {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 7px 0 0 30px;
    padding: 7px 0 0;
    border-top: 1px solid var(--line);
}

.department-tree__duty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.department-tree__duty-row .department-tree__name {
    font-size: 14px;
    color: var(--text);
}

.department-tree__duty-row .department-tree__level {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #dbe9f5;
    color: var(--blue-dark);
    font-size: 14px;
    font-weight: 650;
    white-space: nowrap;
}

.department-tree__duty-row .department-tree__duty-name {
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
}

.department-tree__duty-row .department-tree__metrics span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #edf3f8;
    color: #46627a;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .department-tree__duty-list {
        margin-left: 0;
    }

    .department-tree__duty-row {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Keep the direct-organization checkbox and its label on one line. */
.field.direct-organization-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
}

.field.direct-organization-field input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
}

.field.direct-organization-field label {
    display: inline;
    margin: 0;
    font-weight: 650;
}
/* Employee hire date: compact keyboard field with a separate calendar button. */
.field.hire-date-field .hire-date-input-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.field.hire-date-field .keyboard-date-input {
    width: 150px;
}

.field.hire-date-field .hire-date-calendar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 40px;
    padding: 0;
    border: 1px solid #bdcad5;
    border-radius: 6px;
    background: #fff;
    color: var(--blue);
    font-size: 18px;
    cursor: pointer;
}

.field.hire-date-field .hire-date-calendar-button:hover {
    border-color: var(--blue);
    background: #edf5fb;
}

/* The hidden attribute must always collapse job-duty rows. */
.department-tree__duty-list[hidden] {
    display: none !important;
}
.personal-profile-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.employee-photo-field {
    grid-row: span 2;
}

.employee-photo-editor {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 190px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.employee-photo-editor__preview {
    display: block;
    width: 105px;
    height: 140px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.employee-photo-editor .employee-photo-input {
    max-width: 100%;
    font-size: 12px;
}

.employee-photo-editor__clear {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400 !important;
}

.employee-photo-editor__clear input {
    width: auto !important;
    margin: 0;
    padding: 0;
}

.personal-profile-address {
    grid-column: span 2;
}

.personal-profile-memo {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .personal-profile-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-photo-field {
        grid-row: auto;
    }
}

@media (max-width: 560px) {
    .personal-profile-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .personal-profile-address,
    .personal-profile-memo {
        grid-column: auto;
    }
}
/* Employee personal-card editor: optional personal details and repeatable histories. */
.personal-profile-form {
    max-width: none;
}

.personal-profile-section {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.personal-profile-section:last-of-type {
    margin-bottom: 18px;
}

.personal-profile-section h2,
.profile-history-form h2 {
    margin: 0 0 16px;
    font-size: 18px;
}

.profile-history-form {
    margin-top: 26px;
}

.profile-history-form .panel-title {
    padding: 0 0 12px;
}

.profile-history-form .panel-title h2 {
    margin: 0;
}

.profile-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.personal-history-table {
    min-width: 980px;
    background: #fff;
}

.personal-history-table th,
.personal-history-table td {
    vertical-align: top;
}

.personal-history-table td input,
.personal-history-table td select {
    box-sizing: border-box;
    min-width: 105px;
    width: 100%;
    padding: 8px;
    border: 1px solid #bdcad5;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.personal-history-table td:has(input[type="date"]),
.personal-history-table td:has(input[type="month"]) {
    min-width: 128px;
}

.personal-history-table__delete {
    white-space: nowrap;
    text-align: center;
    vertical-align: middle !important;
}

.personal-history-table__delete input[type="checkbox"] {
    width: auto;
    min-width: 0;
    margin: 0 4px 0 0;
    padding: 0;
}

.personal-history-table__delete label {
    color: var(--muted);
    font-size: 13px;
}

.personal-history-table output {
    display: inline-block;
    min-width: 48px;
    padding: 8px 4px;
    color: var(--text);
    font-weight: 650;
    text-align: center;
}

.personal-history-table .errorlist,
.personal-profile-form .errorlist {
    margin: 4px 0 0;
    padding: 0;
    color: #bd2727;
    font-size: 12px;
    list-style: none;
}

.info-grid .wide {
    grid-column: span 2;
}

@media (max-width: 760px) {
    .personal-profile-form {
        padding: 18px;
    }

    .info-grid .wide {
        grid-column: auto;
    }
}
/* Inline calendar controls used by personal-profile history rows. */
.inline-date-input {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 164px;
}

.personal-history-table .inline-date-input .keyboard-date-input,
.personal-history-table .inline-date-input .keyboard-month-input {
    min-width: 0;
    width: 118px;
}

.inline-date-calendar-button {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 40px;   /* 옆 입력 칸(40px)과 같은 높이. 표 안에서는 32px (아래 기본 UI 규칙) */
    padding: 0;
    border: 1px solid #bdcad5;
    border-radius: 6px;
    background: #fff;
    color: var(--blue);
    cursor: pointer;
}

.inline-date-calendar-button:hover {
    border-color: var(--blue);
    background: #edf5fb;
}

.personal-history-delete {
    min-width: 52px;
    padding: 5px 8px;
    color: #a33b3b;
}


.info-grid-photo {
    grid-row: span 2;
    display: grid;
    place-items: center;
    min-height: 140px;
}

.employee-photo-image {
    display: block;
    width: 105px;
    height: 140px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f8fafc;
}

@media (max-width: 760px) {
    .info-grid-photo {
        grid-row: auto;
    }
}
/* Employee history panels: keep the same type scale on desktop and mobile. */
.employee-history-panel .panel-title h2 {
    font-size: 18px;
}

.employee-history-panel table,
.employee-history-panel th,
.employee-history-panel td,
.employee-history-panel .empty {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.employee-history-panel .empty {
    font-weight: 400;
    line-height: 1.5;
}

/* 충원이 필요한 조직·직무를 조직도에서 즉시 식별합니다. */
.department-tree__metrics .department-tree__metric--vacancy,
.department-tree__duty-row .department-tree__metric--vacancy {
    background: #FBE5D6;
    color: #C00000;
    font-weight: 700;
}
/* 인사 현황 대시보드의 예정자·충원 확인 영역 */
.dashboard-summary {
    margin-bottom: 18px;
}

.dashboard-summary__vacancy,
.dashboard-vacancy {
    color: #C00000;
    font-weight: 700;
}

.dashboard-alert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-alert-panel {
    min-width: 0;
}

.dashboard-alert-scroll {
    max-height: 258px;
    overflow-y: auto;
}

.dashboard-alert-scroll table {
    width: 100%;
}

.dashboard-alert-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.dashboard-alert-panel td:last-child,
.dashboard-alert-panel th:last-child {
    white-space: nowrap;
}

/* 대시보드의 계약 만료 예정자 성명: 링크처럼 보이되 POST로 새 계약 초안을 만든다. */
.dashboard-contract-create-form {
    display: inline;
}

.dashboard-contract-create {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.dashboard-contract-create:hover,
.dashboard-contract-create:focus-visible {
    color: var(--navy);
    text-decoration: underline;
}
@media (max-width: 900px) {
    .dashboard-alert-grid {
        grid-template-columns: 1fr;
    }
}

/* Department-status metrics link to their corresponding employee list. */
.department-summary__status {
    cursor: pointer;
}

.department-summary__status a {
    display: block;
    color: inherit;
    font-weight: inherit;   /* 요약 카드 전체가 링크 — 본문 링크 규칙(굵게)을 따르지 않고 카드 글자 그대로 */
    text-decoration: none;
}

.department-summary__status:hover {
    border-color: var(--blue);
    background: #edf5fb;
}



/* 인사카드: 사진은 첫 두 줄에 걸치고, 주소·메모는 남는 칸을 채운다 */
.info-grid-photo.tall { grid-row: span 2; }
/* 칸 너비는 관리자 설정(인적사항 항목의 `칸 너비`)이 정한다. 한 줄은 4칸이다. */
.info-grid-item.span-2 { grid-column: span 2; }
.info-grid-item.span-3 { grid-column: span 3; }
.info-grid-item.span-4 { grid-column: 1 / -1; }
.info-grid-value.multiline { white-space: pre-line; }

@media (max-width: 760px) {
    .info-grid-item.span-2,
    .info-grid-item.span-3,
    .info-grid-item.span-4 { grid-column: auto; }
}


/* 사람 고르기 칸 (person_picker.js) — 이름·부서를 치면 아래에 맞는 사람이 펼쳐진다 */
.pp { position: relative; display: inline-block; vertical-align: middle; min-width: 220px; }
.pp__input { width: 100%; box-sizing: border-box; border: 1px solid #bdcad5; border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; }
.pp__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #c6d9ec; border-radius: 8px; box-shadow: 0 6px 18px rgba(25, 51, 75, .14); padding: 4px 0; text-align: left; }
.pp__group { padding: 6px 12px 2px; font-size: 12px; font-weight: 700; color: var(--muted); background: #f5f8fb; }
.pp__item { padding: 7px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pp__item:hover, .pp__item.is-active { background: #eaf3fc; color: var(--blue-dark); }
.pp__empty { padding: 10px 14px; font-size: 13px; color: var(--muted); }
.pp--multiple { display: block; }
.pp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 10px; border-radius: 14px; background: #eaf3fc; color: var(--blue-dark); font-size: 13px; font-weight: 600; }
.pp__remove { border: 0; background: transparent; color: var(--blue-dark); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pp__remove:hover { color: #bd2727; }
.rc-inline-form .pp, .ct-picker .pp { flex: 0 1 auto; }
/* 펼쳐진 목록이 패널(overflow:auto) 안에서 잘리지 않게 */
.panel.pp-host, .panel:has([data-person-picker]) { overflow: visible; }
/* 검색 줄의 사람 찾기 칸(검색 모드): 폭은 검색 칸과 같은 300px (2026-09-22 검색창 통일) */
.search .pp { width: 300px; min-width: 0; }
.search .pp .pp__input { width: 100%; }
@media (max-width: 760px) { .search .pp { width: 100%; max-width: 300px; } }

/* 부서 현황 표 (HRUserAccess.md 결정 `부서 현황 표`, 2026-09-16): 퇴사율 표와 같은 줄 모양.
   단계는 배경·굵기, 깊이는 들여쓰기, 접힌 줄은 hidden 속성 (department_table.js) */
.dept-table-scroll { overflow-x: auto; }
/* 구간 선택: 제목 오른쪽, 단계 버튼 왼쪽 */
.organization-tree-heading .dept-filter { margin-left: auto; font-size: 14px; }
.dept-filter select { border: 1px solid #bdcad5; border-radius: 6px; padding: 6px 9px; font: inherit; background: #fff; }
.dept-table { table-layout: fixed; min-width: 760px; }   /* TO~충원 여덟 칸은 같은 너비(9%씩), 조직 칸이 나머지를 쓴다.
   좁은 화면에서는 칸이 줄어들지 않고 .dept-table-scroll 안에서 가로로 넘긴다 (2026-09-17 수정 요청) */
.dept-table th:not(:first-child), .dept-table td:not(:first-child) { width: 9%; }
.dept-table th, .dept-table td { white-space: nowrap; }
.dept-table tr.dept-table__row--TOP td { font-weight: 700; background: #eef3f8; }
.dept-table tr.dept-table__row--UPPER td { font-weight: 600; background: #f7f9fb; }
.dept-table tr.dept-table__row--DUTY td { color: var(--muted); font-weight: 500; }
.dept-table tr[hidden] { display: none; }
.dept-table__toggle { display: inline-block; width: 20px; min-width: 20px; margin-right: 4px; padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 16px; font-weight: 700; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; }
.dept-table__toggle--empty { cursor: default; }
.dept-table td.dept-depth-1 { padding-left: 27px; }
.dept-table td.dept-depth-2 { padding-left: 45px; }
.dept-table td.dept-depth-3 { padding-left: 63px; }
.dept-table td.dept-depth-4 { padding-left: 81px; }
.dept-table__duty::before { content: "· "; }
.dept-table tr td.dept-table__vacancy { background: #FBE5D6; color: #C00000; font-weight: 700; }

/* 부서 순서변경 (부서 현황 › 순서변경): 마스터 설정의 조직도 순서 변경과 같은 조작, 스크립트는 organization_order.js 공용 */
.organization-order-editor__status { min-height: 22px; margin: 0; color: var(--muted); }   /* 아래 여백은 패널 안 간격 규칙(18px)이 준다 */
.organization-order-editor__status.is-dirty { color: #a05b00; font-weight: 650; }
.organization-order-editor__status.is-success { color: #18724a; font-weight: 650; }
.organization-order-editor__status.is-error { color: #b42318; font-weight: 650; }
.organization-order__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.organization-order__item > .organization-order__list { margin: 8px 0 0 30px; padding-left: 16px; border-left: 1px solid var(--line); }
.organization-order__row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: grab; }
.organization-order__item.is-dragging > .organization-order__row { opacity: 0.45; }
.organization-order__handle { color: #7890a5; font-size: 20px; letter-spacing: -5px; cursor: grab; }
.organization-order__level { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 7px; border-radius: 5px; background: #dbe9f5; color: var(--blue-dark); font-size: 12px; font-weight: 650; }
.organization-order__move-buttons { display: flex; gap: 6px; margin-left: auto; }
.organization-order__move-buttons button { min-height: 28px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--blue); font-size: 13px; font-weight: 650; cursor: pointer; }
.organization-order__move-buttons button:disabled { opacity: 0.4; cursor: default; }

/* 표(패널) 사이 간격은 어디서나 18px — 인사 현황의 표 사이 간격이 기준 (2026-09-18 수정 요청).
   본문(main) 바로 아래에 놓인 패널·요약 카드·격자가 연달아 올 때 위쪽에 18px. 검색·필터 줄과 표 사이도 같다 */
main.container > :is(.panel, .stats, .info-grid, .dashboard-alert-grid, .grid-two, .search, form) + :is(.panel, .stats, .info-grid, .dashboard-alert-grid, .grid-two),
.rc-page > :is(.panel, .stats, .rc-grid) + :is(.panel, .stats, .rc-grid) { margin-top: 18px; }

/* 날짜 칸 아래 달력 창 (keyboard_date_input.js, HRUserAccess.md 21절 `날짜 칸`).
   크로뮴(엣지·크롬) 기본 달력과 같은 크기·모양: 218×281px, 머리 24px, 요일 줄 29px, 날 칸 28px, 글씨 12px, 아래 `지우기`·`오늘`.
   해 이동 단추(겹화살표)만 더했다. 창은 body 끝에 하나 두고 칸 위치에 맞춰 옮긴다 */
/* 스크립트가 📅 단추를 붙이며 자동으로 묶은 칸: 원래 자리의 너비를 바꾸지 않는다 */
.inline-date-input--auto { min-width: 0; }
.dp-popup { position: fixed; z-index: 1200; box-sizing: border-box; width: 218px; padding: 10px; background: #fff; border: 1px solid #bfbfbf; border-radius: 2px; box-shadow: 0 2px 6px #0000002e; font: 12px system-ui, "Segoe UI", "Malgun Gothic", sans-serif; color: #101010; user-select: none; cursor: default; }
.dp-popup[hidden] { display: none; }
.dp-header { display: flex; align-items: center; height: 24px; margin-bottom: 10px; }
.dp-title { flex: 1; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dp-nav { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; margin-left: 4px; padding: 0; border: 1px solid transparent; border-radius: 0; background: #fff; color: #101010; cursor: default; }
.dp-nav[hidden] { display: none; }
.dp-nav svg { display: block; }
.dp-nav:hover { background: rgba(0, 117, 255, .3); border-color: #000; }
.dp-weekdays { display: grid; grid-template-columns: repeat(7, 28px); height: 29px; align-items: start; text-align: center; line-height: 28px; }
.dp-days { display: grid; grid-template-columns: repeat(7, 28px); }
.dp-day { box-sizing: border-box; width: 28px; height: 28px; padding: 1px; border: 1px solid transparent; border-radius: 2px; background: #fff; color: #101010; font: inherit; line-height: 24px; text-align: center; cursor: default; }
.dp-day.is-other { color: #767676; }
.dp-day.is-today { border-color: #767676; }
.dp-day:hover { background: rgba(0, 117, 255, .3); border-color: #000; }
.dp-day.is-selected { background: #0075ff; color: #fff; font-weight: 700; }
.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); }
.dp-month { box-sizing: border-box; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 2px; background: #fff; color: #101010; font: inherit; line-height: 30px; text-align: center; cursor: default; }
.dp-month.is-today { border-color: #767676; }
.dp-month:hover { background: rgba(0, 117, 255, .3); border-color: #000; }
.dp-month.is-selected { background: #0075ff; color: #fff; font-weight: 700; }
.dp-footer { display: flex; justify-content: space-between; align-items: flex-end; height: 28px; padding: 0 10px 2px; }
.dp-text { box-sizing: border-box; height: 20px; padding: 0 4px; border: 1px solid transparent; background: #fff; color: #0078d4; font: inherit; cursor: default; }
.dp-text:hover { background: rgba(0, 117, 255, .3); border-color: #000; }

/* 본문 링크 규칙 하나 (2026-09-18 결정, HRUserAccess.md 21절 `링크`): 파란색 · 약간 굵게(650) · 밑줄 없음 · 방문 뒤에도 같은 파란색.
   마우스를 올리거나 키보드 초점이 가면 밑줄. 글자 크기는 둘러싼 글을 따른다(따로 정하지 않는다).
   :where() 로 우선순위를 0으로 두어, 단추(.button)·탭·메뉴·달력 칩처럼 자기 클래스가 있는 링크는 그 규칙이 그대로 이긴다.
   자리별로 흩어져 있던 규칙(td a · .panel-title a · .department-tree__name a · .rc-read a)은 이 규칙 하나로 합쳤다 */
main :where(a, a:visited) { color: var(--blue); font-weight: 650; text-decoration: none; }
main :where(a:hover, a:focus-visible) { text-decoration: underline; }

/* 패널(카드) 안 세로 리듬 (2026-09-18 요청, HRUserAccess.md 21절 `패널 안 간격`):
   제목 아래 14px(제목 자체의 여백) · 내용 덩어리(표·메모·안내·폼·다음 표) 사이 18px(표 사이 간격과 같은 값) · 단추 줄(.form-actions) 앞 24px · 패널 바닥 16px(패널 padding).
   덩어리가 이어지면 뒤 덩어리 위에 18px 를 준다. 제목 바로 뒤와 숨은 칸(input hidden) 뒤에는 주지 않는다.
   패널 바로 아래의 form 이 표·form-grid·form-actions 를 품고 있으면(내용을 감싸는 폼) 그 안도 같다 — 한 줄짜리 입력 폼(flex, 예: 서류 올리기·새 계약 고르기)은 제외.
   덩어리 자체는 위아래 여백을 갖지 않아야 한다 — 채용 화면 부품(rc-*)의 위아래 padding·margin 을 그래서 0 으로 했다(recruitment.css). 화면마다 손으로 여백을 주지 않는다 */
/* 사이에 숨은 칸(csrf · 폼셋 관리 칸)이 최대 넷까지 끼어 있어도 같은 18px. 비어 있는 자리(스크립트가 나중에 채우는 줄)는 채워질 때 여백이 생긴다(:empty) */
:is(.panel, .form-card, :is(.panel, .form-card) > form:has(> :is(table, .form-grid, .form-actions))) > :not(.panel-title, [type="hidden"]) + :not(.panel-title, .form-actions, [type="hidden"], :empty),
:is(.panel, .form-card, :is(.panel, .form-card) > form:has(> :is(table, .form-grid, .form-actions))) > :not(.panel-title, [type="hidden"]) + [type="hidden"] + :not(.panel-title, .form-actions, [type="hidden"], :empty),
:is(.panel, .form-card, :is(.panel, .form-card) > form:has(> :is(table, .form-grid, .form-actions))) > :not(.panel-title, [type="hidden"]) + [type="hidden"] + [type="hidden"] + :not(.panel-title, .form-actions, [type="hidden"], :empty),
:is(.panel, .form-card, :is(.panel, .form-card) > form:has(> :is(table, .form-grid, .form-actions))) > :not(.panel-title, [type="hidden"]) + [type="hidden"] + [type="hidden"] + [type="hidden"] + :not(.panel-title, .form-actions, [type="hidden"], :empty),
:is(.panel, .form-card, :is(.panel, .form-card) > form:has(> :is(table, .form-grid, .form-actions))) > :not(.panel-title, [type="hidden"]) + [type="hidden"] + [type="hidden"] + [type="hidden"] + [type="hidden"] + :not(.panel-title, .form-actions, [type="hidden"], :empty) { margin-top: 18px; }
/* 패널 바닥: 마지막 덩어리의 아래 여백은 빼서 어디서나 패널 padding 16px 로 */
:is(.panel, .form-card, :is(.panel, .form-card) > form) > :last-child { margin-bottom: 0; }
/* 스크립트가 나중에 채우는 빈 문단(예: 발령 대상 인원 수)은 비어 있는 동안 자리를 차지하지 않는다 */
:is(.panel, .form-card, :is(.panel, .form-card) > form) > p:empty { margin: 0; }
/* 패널 바로 아래의 textarea 는 줄 상자 밑 공간이 생기지 않게 블록으로 */
:is(.panel, .form-card, :is(.panel, .form-card) > form) > textarea { display: block; }

/* ===== 기본 UI 규칙 (2026-09-18 결정, HRUserAccess.md 21절 `기본 UI`) =====
   입력 칸: 표준 40px(글씨 14px) · 표 안 32px(글씨 13px). 크기는 여기서만 정한다 — 부품 규칙의 padding·font-size 가 이기지 못하게 !important.
   체크박스·라디오·파일·여러 줄 선택(select[multiple])·상담표 수량 칸은 제외. 가로 여백은 부품이 정한다 */
main :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="image"], .consult-qty-input), select:not([multiple])) { box-sizing: border-box !important; height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-family: inherit !important; font-size: 14px !important; line-height: normal !important; }
main table :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="image"], .consult-qty-input), select:not([multiple])) { height: 32px !important; font-size: 13px !important; }
/* 표 안 입력 칸의 테두리 규칙 하나 (2026-09-23): 급여대장 칸과 같은 모양 — 회색 테두리·둥근 모서리·흰 바탕, 들어오면 파란 테두리 + 옅은 파란 띠.
   .field 밖(설정 목록·지원자 표 등)의 칸은 이 규칙이 없으면 브라우저 기본 모양(각진 회색)으로 나왔다 */
main table :is(input[type="text"], input[type="number"], input[type="time"], select:not([multiple])) { border: 1px solid #bdcad5; border-radius: 6px; padding-left: 8px; padding-right: 8px; background: #fff; font-family: inherit; }
/* 입력 칸 모양 규칙 하나 (2026-09-28): 어느 칸이든 회색 테두리·둥근 모서리 6px·흰 바탕·좌우 9px. 부품 규칙이 없는 칸(활동 기록 메뉴·보존 기간, 메일 받는 주소)이
   브라우저 기본 모양(각진 검은 테두리)으로 나왔다. :where 라 우선순위가 0 — 부품이 폭·여백·테두리를 따로 정하면 그쪽이 이긴다 */
:where(main) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="image"]), select, textarea) { border: 1px solid #bdcad5; border-radius: 6px; padding-left: 9px; padding-right: 9px; background-color: #fff; font-family: inherit; }
:where(main) :where(input, select, textarea):disabled { background-color: #f4f6f8; }
main :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="image"]), select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px #2167ae22; }
main textarea { box-sizing: border-box; font-family: inherit; font-size: 14px; }
main table .inline-date-calendar-button { height: 32px; width: 30px; flex-basis: 30px; }
.rc-mini .button.small { height: 32px; }   /* 표 안 입력 칸에 붙은 단추는 칸과 같은 32px */
/* 제목: 화면 26px(.page-heading h1) · h2 18px · h3 16px. 계약서 종이 제목(22px)과 상담표 작성 시트 안의 작은 소제목은 예외 */
main :where(h2) { font-size: 18px; }
main :where(h3) { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
/* 안내문: 13px 회색 — .pr-note · .rc-note · .field-help 가 같은 값 */
.field-help ul { margin: 0; padding-left: 18px; }   /* 비밀번호 규칙처럼 목록으로 오는 도움말도 같은 크기·색 */
.field-help li { margin: 2px 0; }
.pr-note { color: var(--muted); font-size: 13px; }

/* 한 줄 입력 줄 (라벨 · 입력 · 선택 · 단추): 급여 엑셀 업로드 · 계약 · 메일 시험 발송 · 활동 기록 설정이 같이 쓴다. 칸 모양은 위 입력 칸 규칙 */
.pr-upload-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0; }   /* 위아래 여백은 패널 안 간격 규칙 */
.pr-upload-form .pr-upload-label { font-weight: 650; white-space: nowrap; }
.pr-upload-form input[type="file"] { width: 380px; height: 40px; box-sizing: border-box; padding: 7px 9px; border: 1px solid #bdcad5; border-radius: 6px; background: #fff; font: inherit; }
/* 체크 묶음 (가입 여부 · 활동 기록 종류 등): 체크박스 자체는 체크박스 규칙 하나, 여기서는 글자 굵기와 줄바꿈만 */
.pb-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 14px; }
.pb-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; cursor: pointer; }

/* 인사발령 목록 (2026-09-18 요청): 열이 셋뿐이라 760px 로 줄이고, 작성 단추는 검색 줄 오른쪽 끝에 */
.apt-list { max-width: 760px; }
.apt-list__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.apt-list__bar .search { margin: 0; }
.apt-list th:first-child { width: 150px; }
.apt-list th:last-child { width: 120px; }

/* 직인 설정 (2026-09-18 요청): 왼쪽 현재 직인, 오른쪽 바꿀 파일 + 미리 보기 */
.stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.stamp-grid h2 { margin: 0 0 12px; }
.hr-settings-form .form-actions { align-items: center; }
.hr-settings-form .form-actions input[type="file"] { font: inherit; max-width: 320px; }   /* 직인: 파일 선택은 저장 단추 줄에 */
.stamp-box { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 12px; border: 1px dashed #c6d2dd; border-radius: 8px; background: #fafbfc; text-align: center; }
.stamp-box img { max-width: 100%; max-height: 160px; }
.stamp-meta { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .stamp-grid { grid-template-columns: 1fr; } }

/* 급여명세서 메일 일괄 발송 진행 막대 (payroll_mail.js, reference/HRmail.md 3.5) */
.mail-progress__bar { height: 10px; border-radius: 5px; background: #e6edf3; overflow: hidden; }
.mail-progress__bar span { display: block; height: 100%; background: var(--blue); transition: width .3s ease; }
.mail-progress__text { margin: 8px 0 0; }
.mail-mode { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }

/* 메일 재발송 창 (mail_resend.js): 등록메일 / 다른 메일주소 */
/* margin:auto 가 창을 화면 한가운데에 둔다. 패널 안 간격 규칙(위 18px·아래 0)이 이 값을 덮어 창이 위로 붙었었다 — 그래서 !important */
.mail-dialog { width: min(440px, 92vw); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: auto !important; }
.mail-dialog::backdrop { background: #0b1a2a66; }
.mail-dialog__title { margin: 0 0 12px; }
.mail-dialog__choice { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 600; cursor: pointer; }
.mail-dialog input[type="text"] { width: 100%; border: 1px solid #bdcad5; border-radius: 6px; padding: 0 9px; margin: 2px 0 10px; background: #fff; }
.mail-dialog input[type="text"]:disabled { background: #f4f6f8; }

/* 활동 기록 (reference/ActivityLog.md 4절): 거르기 두 줄 · 종류 체크 · 전/후 펼침 */
.activity-filters__row { flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.activity-filters__row input.keyboard-date-input { width: 120px; }
.activity-filters__row .pp { flex: 0 0 auto; width: 200px; }
.activity-filters__row .activity-filters__query { width: 180px; }
.activity-filters__label { font-weight: 650; color: var(--muted); white-space: nowrap; }
.activity-filters__row > * { flex: 0 0 auto; }   /* 칸이 줄어들지 않고 다음 줄로 넘어간다 */
.activity-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }   /* .pb-checks 와 같은 간격 */
.activity-diff { margin-top: 4px; }
.activity-diff summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: 12px; }
.activity-diff table { margin-top: 6px; width: auto; min-width: 320px; }
.activity-table td:nth-child(4) { white-space: normal; }
.activity-pages { justify-content: center; align-items: center; gap: 12px; }

/* 근무 유형 코드 딱지 (reference/WorkSchedule.md 결정 20): 근태 설정 목록 · 근무표 범례가 같이 쓴다. 색은 근무 유형에 정한 색 그대로(칸마다 style) */
.shift-chip { display: inline-block; min-width: 28px; padding: 2px 6px; border-radius: 4px; font-size: 12px; font-weight: 650; text-align: center; line-height: 1.4; }
/* 색 고르기 칸 (근무 유형의 근무표 색상): 공통 입력 칸 규칙(폭 100%·여백 9px)이면 색 견본이 가는 줄로만 보인다 */
.field input[type="color"] { width: 88px; height: 40px; padding: 3px; cursor: pointer; }
/* 색 선택지 (근무 유형의 근무표 색상, 2026-09-29): 견본 10개 + 끝에 직접 고르기 칸 */
.color-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.color-swatch { width: 28px; height: 28px; padding: 0; border: 1px solid #bdcad5; border-radius: 6px; cursor: pointer; }
.color-swatch[aria-pressed="true"] { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.color-palette__custom { margin-left: 8px; }
.color-palette input[type="color"] { width: 56px; height: 32px; }
/* 세로 입력 표 (희망 오프 입력, 2026-10-02): 위에서 아래로만 적는 폼. 한 줄에 제목(왼쪽) | 입력 칸 하나(오른쪽).
   내용이 적은 폼이라 전체 폭을 쓰지 않는다 */
.form-table { width: 100%; max-width: 560px; }
.form-table th { white-space: nowrap; }
.form-table th:first-child { width: 150px; }
@media (max-width: 760px) { .form-table th:first-child { width: 96px; } }
.form-table tbody th { text-align: left; }
.form-table td { text-align: left; }
.form-table td :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }
.form-table label { margin: 0; }
.form-table + .pr-note { margin-top: 8px; }
/* 숨긴 입력 칸: 격자(.pb-grid 등)의 display 규칙이 hidden 속성을 덮어 빈 자리가 남는다 (연봉계약의 현재호봉, 2026-10-01) */
.field[hidden] { display: none !important; }
/* 떠 있는 단추 줄 (2026-10-01, HRUserAccess.md 21절 기본 UI): 저장·취소·임시저장처럼 그 화면의 작업을 끝내는 단추를
   화면 아래에 늘 띄운다. 내용 끝까지 내려가면 제자리(맨 아래)에 놓인다. 처음 쓴 곳은 월 근무표.
   쓰는 법  <section class="panel action-bar"><div class="action-bar__row">안내 글 · 단추…</div></section>
   자리     main 바로 아래 맨 끝. 패널(.panel) 안에 넣으면 뜨지 않는다(패널이 overflow:auto 라서).
   폼 밖의 단추는 <button form="폼 id">, 남는 폭을 쓰는 입력(사유 칸)은 .action-bar__grow
   삭제·문서 취소처럼 되돌리기 어려운 단추는 .action-bar__left 로 묶어 왼쪽 끝에 — 저장 옆에서 잘못 누르지 않게 */
.action-bar { position: sticky; bottom: 0; z-index: 5; }
.action-bar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.action-bar__row form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.action-bar__grow { flex: 1 1 280px; }
.action-bar__left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-right: auto; }
@media print { .action-bar { display: none; } }
/* 입력 칸 자리의 보기 한 줄 (근무 유형의 분류 · 근무 · 오프 · 휴가): 칸 높이에 맞추고 제목 글씨 모양을 받지 않는다 */
.field .pb-checks { min-height: 40px; align-items: center; margin-bottom: 0; }
.field .pb-checks .pb-check { display: inline-flex; margin-bottom: 0; font-weight: 600; }