/* ============================================================
   HRGA 다듬기 공통 부품 (spec 2026-09-26-hrga-ux-polish-design §5)
   index.html 이 모든 화면에 건다(layout.css 다음). 화면 전용 CSS(ExtraCSS)가 뒤에 오므로 화면은 덮어쓸 수 있다.
   마크업은 partials/hrga-kit.html(save-pill · icon-delete — 월 스테퍼는 클래스만)과 partials/person.html 의 크기 row,
   동작은 modules/save-pill.js · modules/wide-table.js.
   ============================================================ */

/* X-4 빈 값: 값이 없으면 어디서나 흐린 「—」 */
.muted-dash { color: var(--color-text-muted); font-weight: var(--font-normal, 400); }

/* X-4 빈 선택 칸: 값이 빈 select 는 글자를 흐리게, 화살표는 호버·포커스에서만(터치 기기는 늘 보인다).
   화살표 자리(padding-right)는 늘 비워 두어 값을 고른 뒤에도 칸 폭이 흔들리지 않는다. */
select.is-empty-dash {
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-text-muted);
    padding-right: 1.75rem;
    background-image: none;
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 12px 12px;
}
select.is-empty-dash:hover,
select.is-empty-dash:focus {
    color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (hover: none) {
    select.is-empty-dash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
}
select.is-empty-dash option { color: var(--color-text); }

/* X-5 날짜·숫자: 줄바꿈 없이 고정폭 숫자 */
.nowrap-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* X-5 넓은 표: 상자가 가로로 스크롤하고, 오른쪽에 표가 더 있으면(data-overflow-right — wide-table.js)
   오른쪽 가장자리를 흐린다. 흐림은 상자의 직계 자식(::after)이 sticky 로 스크롤 창의 오른쪽에 붙는 것이라
   상자는 표 하나를 담는 flex 줄이다(다른 자식은 같은 줄에 선다 — hidden 이면 상관없다).
   ::after 는 폭만큼 음수 여백을 가져 표의 자리·scrollWidth 를 바꾸지 않는다.
   첫 열은 sticky — 머리·몸통 칸 모두(상자의 직계 표만), 배경을 채워 밑으로 지나가는 칸을 가린다. */
.wide-table-wrap { --wide-fade: 32px; display: flex; align-items: flex-start; max-width: 100%; overflow-x: auto; }
.wide-table-wrap > table { flex: 0 0 auto; }
.wide-table-wrap[data-overflow-right]::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 4;
    flex: 0 0 var(--wide-fade);
    align-self: stretch;
    margin-left: calc(-1 * var(--wide-fade));
    background: linear-gradient(to right, transparent, var(--color-surface, #fff));
    pointer-events: none;
}
/* :where() — 명시도 0: 화면의 칸 배경·z-index(머리줄 sticky 등)가 언제나 이긴다 */
:where(.wide-table-wrap > table > * > tr > :first-child) { position: sticky; left: 0; z-index: 1; background: var(--color-surface, #fff); }
:where(.wide-table-wrap > table > thead > tr > :first-child) { z-index: 3; }

/* X-6 한국어 줄바꿈: 여덟 화면 루트(+ /hr 구성원)에 .hrga-text 를 달면 켜진다 — 단어 중간에서 끊지 않는다 */
.hrga-text { word-break: keep-all; overflow-wrap: anywhere; }
/* X-4 날짜 칸의 YYYY-MM-DD 안내는 포커스했을 때만 (값처럼 보이지 않게) — 여덟 루트 안에서만 */
.hrga-text input[data-date-auto]:not(:focus)::placeholder { color: transparent; }

/* X-2 저장 상태 알약: 점(::before)은 data-state 로 칠한다. 실패면 누를 수 있다(문제 칸으로). */
.save-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    max-width: 100%;
    min-height: 26px;
    padding: 2px 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}
.save-pill::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500, #22c55e); }
.save-pill[data-state="pending"]::before,
.save-pill[data-state="saving"]::before { background: var(--warning-500, #f59e0b); }
.save-pill[data-state="error"],
.save-pill[data-state="frozen"] { border-color: var(--error-200, #fecdd3); background: var(--error-50, #fff1f2); color: var(--error-700, #be123c); }
.save-pill[data-state="error"]::before,
.save-pill[data-state="frozen"]::before { background: var(--error-600, #e11d48); }
.save-pill[data-state="error"] { cursor: pointer; }
.save-pill[data-state="error"]:hover { border-color: var(--error-400, #fb7185); }
.save-pill:focus-visible { outline: 2px solid var(--color-border-focus, #3b82f6); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .save-pill[data-state="saving"]::before { animation: save-pill-pulse 1.2s ease-in-out infinite; }
}
@keyframes save-pill-pulse { 50% { opacity: .35; } }

/* X-11 월 스테퍼: 이전 달 · 월 · 다음 달. 비활성(범위 끝)은 흐린 span */
.month-stepper { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.month-stepper .btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.month-stepper [aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.month-stepper-label { min-width: 7.5em; padding: 0 var(--space-1, 4px); text-align: center; font-weight: var(--font-semibold, 600); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* X-10 삭제 아이콘: 평소엔 흐리고, 호버·포커스에서만 위험 색. 확인은 언제나 appConfirm(쓰는 모듈). */
.btn-icon-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}
.btn-icon-danger svg { display: block; }
.btn-icon-danger:hover:not(:disabled),
.btn-icon-danger:focus-visible { color: var(--color-danger, var(--error-600, #e11d48)); background: var(--error-50, #fff1f2); }
.btn-icon-danger:focus-visible { outline: 2px solid var(--color-danger, var(--error-600, #e11d48)); outline-offset: 1px; }
.btn-icon-danger:disabled { opacity: .45; cursor: not-allowed; }

/* X-3 한 줄 사람 칸 (partials/person.html 크기 row): 아바타 20px · 이름 · 흐린 영문 이름 · 흐린 부서·직급.
   한 줄을 넘지 않는다. 이름은 칸의 빈 자리를 다 쓰고 줄지 않는다(flex-shrink 0) — 한글 이름은 1px 만 줄어도
   한 글자가 「…」가 되므로(「엡…」), 넘치면 영문 이름이 먼저(줄임 비율 100 : 1 — 거의 다 받는다), 그다음
   부서·직급이 줄어 말줄임된다(둘 다 0 까지; .person small 의 min-width 0 은 layout.css). 이름의 한계는 칩 자체뿐이다:
   max-width = 칩 폭 − 아바타 20px − 틈 6px — 이름 혼자 칸보다 길 때만(그때는 영문 이름·부서·직급이 이미 0 이다)
   말줄임되고, 그 「…」는 칩의 오른쪽 끝에 딱 붙는다(0 폭이 된 뒤 칸의 틈은 칩 밖으로 밀려 잘린다). 예전의 8em 상한은
   280px 칸에서도 긴 라틴 이름·아이디 이름을 112px 에서 잘랐다(최종 수정 B). 전체는 칩의 title 에 있다.
   화면마다 따로 두던 이름 보호 규칙(자산관리 .ga-user-btn)은 이 규칙으로 옮겼다. */
.person.row { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; vertical-align: middle; line-height: 1.35; }
.person.row .rec-avatar { flex: none; width: 20px; height: 20px; font-size: 10px; }
.person.row .person-name { flex: 0 0 auto; max-width: calc(100% - 26px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.person.row .person-en { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); font-size: var(--text-xs); }
.person.row small { flex: 0 1 auto; }