/* 성원 ERP — 레이아웃·컴포넌트 스타일 (의미 토큰만 참조) */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 56px); scroll-padding-bottom: 72px; }
/* WCAG 2.2 2.4.11 포커스가 고정 헤더·일괄 작업 바·검토 도구 아래로 숨지 않게 */
.table-wrap { scroll-padding-top: 40px; }
html[data-font-scale="lg"] { font-size: 112.5%; }
html[data-font-scale="xl"] { font-size: 125%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-md); line-height: var(--line-body); font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-link); }
svg.icon { flex: none; vertical-align: middle; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--color-text-3); }
.mono, code { font-family: var(--font-mono); font-size: 0.92em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.eyebrow { color: var(--color-text-3); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* 포커스 표시 (11단계: 항상 보이게, 2px, 대비 3:1 이상) */
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-1); }
.input:focus-visible, .input:focus { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 0; }
#page-title:focus, .panel__title:focus, .main:focus { outline: none; }
#page-title:focus-visible, .panel__title:focus-visible { outline: var(--border-2) solid var(--color-focus); outline-offset: 4px; }

.skip { position: absolute; left: var(--space-2); top: -60px; z-index: 100; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-2); text-decoration: none; font-weight: var(--weight-semibold); }
.skip:focus { top: var(--space-2); }
.skip-inline { position: absolute; left: -9999px; }
.skip-inline:focus { position: static; display: inline-block; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
.decide__hint { display: flex; gap: var(--space-1); align-items: center; font-size: var(--font-size-xs); }

/* ── 골격 ───────────────────────────────────── */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.gh { position: sticky; top: 0; z-index: 30; height: var(--header-h); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); background: var(--color-surface); border-bottom: var(--border-1) solid var(--color-border); }
.gh__left { display: flex; align-items: center; gap: var(--space-2); min-width: calc(var(--sidebar-w) - var(--space-4)); }
.gh__logo { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-text); font-weight: var(--weight-bold); font-size: var(--font-size-lg); }
.gh__mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-2); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-xs); letter-spacing: .02em; }
.gh__search { flex: 1; max-width: 520px; height: var(--control-h-md); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface-2); color: var(--color-text-3); cursor: pointer; text-align: left; }
.gh__search span { flex: 1; }
.gh__search:hover { border-color: var(--color-border-strong); }
.gh__right { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; position: relative; }
.gh__bell { position: relative; }
.gh__dot { position: absolute; left: 22px; top: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--st-danger-fg); color: var(--color-text-inverse); font-size: 11px; font-weight: var(--weight-bold); display: grid; place-items: center; pointer-events: none; }
.gh__user { display: flex; align-items: center; gap: var(--space-2); height: var(--control-h-md); padding: 0 var(--space-2); border: 0; background: transparent; border-radius: var(--radius-2); cursor: pointer; }
.gh__user:hover { background: var(--color-surface-3); }
.gh__uname { font-weight: var(--weight-semibold); }
.gh__urole { color: var(--color-text-3); font-size: var(--font-size-sm); }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary-subtle); color: var(--color-text); font-weight: var(--weight-bold); }
.avatar--sm { width: 28px; height: 28px; font-size: var(--font-size-sm); }

.layout { flex: 1; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 0; }
html[data-sidebar="closed"] .layout { grid-template-columns: 0 minmax(0, 1fr); }
html[data-sidebar="closed"] .sidebar { visibility: hidden; }
.sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--color-surface); border-right: var(--border-1) solid var(--color-border); padding: var(--space-3) var(--space-2) 88px; }
.main { min-width: 0; padding: var(--space-4) var(--space-5) var(--space-8); }

/* 사이드바 */
.nav__group { margin-bottom: var(--space-3); }
.nav__glabel { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--color-text-3); font-size: var(--font-size-xs); font-weight: var(--weight-semibold); letter-spacing: .02em; display: flex; align-items: center; gap: var(--space-1); }
.nav__secbtn { width: 100%; min-height: var(--control-h-sm); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-2); background: transparent; cursor: pointer; text-align: left; font-weight: var(--weight-semibold); color: var(--color-text-2); }
.nav__secbtn:hover { background: var(--color-surface-3); color: var(--color-text); }
.nav__sec.is-current > .nav__secbtn { color: var(--color-text); }
.nav__seclabel { flex: 1; }
.nav__chev { transition: transform var(--motion-duration-fast) var(--motion-ease-standard); }
.nav__secbtn[aria-expanded="false"] .nav__chev { transform: rotate(-90deg); }
.nav__sub { padding: 0 0 var(--space-2) var(--space-6); }
.nav__sublabel { padding: var(--space-2) var(--space-2) 2px; color: var(--color-text-3); font-size: var(--font-size-xs); }
.nav__link { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-h-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); color: var(--color-text-2); text-decoration: none; }
.nav__link:hover { background: var(--color-surface-3); color: var(--color-text); }
.nav__link[aria-current="page"] { background: var(--nav-item-current-bg); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--nav-item-current-marker); }
.nav__items--flat { padding-left: var(--space-2); }
.nav__foot { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); color: var(--color-text-3); font-size: var(--font-size-xs); display: flex; gap: var(--space-1); align-items: center; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-3); color: var(--color-text); font-size: var(--font-size-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* ── 버튼 (Fitts: 데스크톱 최소 32px) ─────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--button-height-md); padding: 0 var(--space-4); border-radius: var(--button-radius); border: var(--border-1) solid transparent; cursor: pointer; font-weight: var(--weight-semibold); white-space: nowrap; text-decoration: none; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard); }
.btn--sm { height: var(--button-height-sm); padding: 0 var(--space-3); font-size: var(--font-size-sm); }
.btn--lg { height: var(--button-height-lg); padding: 0 var(--space-5); font-size: var(--font-size-lg); }
.btn--icon { width: var(--button-height-md); padding: 0; }
.btn--icon.btn--sm { width: var(--button-height-sm); }
.btn--primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn--primary:hover { background: var(--button-primary-bg-hover); }
.btn--primary:active { background: var(--button-primary-bg-pressed); transform: translateY(1px); }
.btn--secondary { background: var(--button-secondary-bg); color: var(--button-secondary-fg); border-color: var(--button-secondary-border); }
.btn--secondary:hover { background: var(--button-secondary-bg-hover); }
.btn--tertiary { background: transparent; color: var(--color-link); padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 3px; }
.btn--tertiary:hover { background: var(--color-surface-3); }
.btn--ghost { background: transparent; color: var(--color-text-2); }
.btn--ghost:hover { background: var(--color-surface-3); color: var(--color-text); }
.btn--danger { background: var(--button-danger-bg); color: var(--button-danger-fg); }
.btn--danger:hover { background: var(--button-danger-bg-hover); }
.btn--danger-ghost { background: transparent; color: var(--st-danger-fg); border-color: var(--st-danger-bd); }
.btn--danger-ghost:hover { background: var(--st-danger-bg); }
.btn[aria-disabled="true"] { background: var(--button-disabled-bg); color: var(--button-disabled-fg); border-color: var(--color-border); cursor: not-allowed; transform: none; }
.btn[aria-pressed="true"].is-fav, .is-fav { color: var(--st-warning-fg); }
.btn[aria-pressed="true"].is-fav svg, .is-fav svg { fill: currentColor; }
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-on-primary); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.kbd { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--weight-regular); padding: 1px 5px; border-radius: var(--radius-1); border: var(--border-1) solid currentColor; color: inherit; }
.gh__search .kbd { color: var(--color-text-2); }
.btn--primary .kbd { border-color: currentColor; }
.link { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.why-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.why { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-3); max-width: 280px; }

/* 배지 (색 + 아이콘 + 텍스트) */
.badge { display: inline-flex; align-items: center; gap: 4px; height: var(--badge-height); padding: 0 8px; border-radius: var(--badge-radius); border: var(--border-1) solid var(--st-neutral-bd); background: var(--st-neutral-bg); color: var(--st-neutral-fg); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.badge--sm { height: var(--badge-height-sm); padding: 0 6px; font-size: var(--font-size-xs); gap: 3px; }
.badge--success { background: var(--st-success-bg); color: var(--st-success-fg); border-color: var(--st-success-bd); }
.badge--warning { background: var(--st-warning-bg); color: var(--st-warning-fg); border-color: var(--st-warning-bd); }
.badge--danger { background: var(--st-danger-bg); color: var(--st-danger-fg); border-color: var(--st-danger-bd); }
.badge--info { background: var(--st-info-bg); color: var(--st-info-fg); border-color: var(--st-info-bd); }
.cell-status, .cell-deadline { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; white-space: nowrap; }
.masked { letter-spacing: 2px; color: var(--color-text-3); }

/* 칩 */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--radius-full); border: var(--border-1) solid var(--color-border-strong); background: var(--color-surface); cursor: pointer; font-size: var(--font-size-sm); }
.chip:hover { background: var(--color-surface-3); }
.chip--toggle[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.chip__n { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-2); overflow: hidden; }
.seg__btn { height: 30px; padding: 0 10px; border: 0; border-right: var(--border-1) solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: var(--font-size-sm); white-space: nowrap; }
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { background: var(--color-surface-3); }
.seg__btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); }

/* ── 페이지 헤더 ─────────────────────────────── */
.page-head { margin-bottom: var(--space-4); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-1); color: var(--color-text-3); font-size: var(--font-size-sm); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-1); }
.breadcrumb [aria-current] { color: var(--color-text-2); }
.page-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-1); flex-wrap: wrap; }
.page-head__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.page-head h1 { font-size: var(--font-size-2xl); line-height: var(--line-heading); font-weight: var(--weight-bold); }
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.local-tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-1) solid var(--color-border); margin-bottom: var(--space-3); overflow-x: auto; }
.local-tabs__tab { display: inline-flex; gap: var(--space-1); align-items: center; padding: var(--space-2) var(--space-3); color: var(--color-text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.local-tabs__tab[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }

/* 토글팁 */
.toggletip { position: relative; display: inline-flex; }
.toggletip__btn { width: 28px; height: 28px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--color-text-3); cursor: pointer; display: grid; place-items: center; }
.toggletip__btn:hover { background: var(--color-surface-3); color: var(--color-text); }
.toggletip__bubble { position: absolute; z-index: 40; top: 32px; left: 0; width: 320px; padding: var(--space-3); border-radius: var(--radius-2); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--font-size-sm); font-weight: var(--weight-regular); box-shadow: var(--shadow-3); }

/* 메뉴 */
.menu { position: relative; display: inline-flex; }
.menu__list { position: absolute; z-index: 40; top: calc(100% + 4px); min-width: 220px; padding: var(--space-1); border-radius: var(--radius-3); border: var(--border-1) solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-2); }
.menu__list--end { right: 0; }
.menu__list--start { left: 0; bottom: calc(100% + 4px); top: auto; }
.menu__item { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding: var(--space-1) var(--space-3); border: 0; background: transparent; border-radius: var(--radius-1); text-align: left; cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--color-surface-3); outline-offset: -2px; }
.menu__item--danger { color: var(--st-danger-fg); }
.menu__item[aria-disabled="true"] { color: var(--color-text-3); cursor: not-allowed; }
.menu__why { flex-basis: 100%; font-size: var(--font-size-xs); color: var(--color-text-3); padding-left: 24px; }

/* ── 필터 바 ────────────────────────────────── */
.fbar { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.fbar__row, .fbar__adv { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.fbar__adv { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-1) dashed var(--color-border); }
.fbar__item { display: flex; flex-direction: column; gap: var(--space-1); }
.fbar__label { font-size: var(--font-size-xs); color: var(--color-text-2); font-weight: var(--weight-semibold); }
.fbar__period, .fbar__search { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fbar__pk { font-size: var(--font-size-sm); color: var(--color-text-2); }
.fbar__search .input[type=search] { width: 220px; }
.fbar__btns { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.fbar__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.fbar__chips-label { font-size: var(--font-size-sm); color: var(--color-text-3); }

/* 입력 */
.input { height: var(--input-height); width: 100%; padding: 0 var(--space-3); border: var(--border-1) solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--color-text); }
.input--sm { height: var(--control-h-sm); font-size: var(--font-size-sm); width: auto; }
.input--lg { height: var(--control-h-lg); font-size: var(--font-size-lg); }
.input--date { width: 150px; }
.input--time { width: 120px; }
.input--num { text-align: right; font-variant-numeric: tabular-nums; }
textarea.input { height: auto; padding: var(--space-2) var(--space-3); resize: vertical; min-height: 72px; }
.input--select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.input--readonly { display: flex; align-items: center; background: var(--color-surface-2); border-style: dashed; color: var(--color-text-2); min-height: var(--control-h-md); height: auto; padding: var(--space-1) var(--space-3); }
.input[aria-invalid="true"] { border-color: var(--input-border-invalid); box-shadow: inset 0 0 0 1px var(--input-border-invalid); }
.input:disabled { background: var(--color-surface-3); color: var(--color-text-3); }
.input-group { display: flex; align-items: center; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group__unit { height: var(--control-h-md); display: grid; place-items: center; padding: 0 var(--space-3); border: var(--border-1) solid var(--color-border-strong); border-left: 0; border-radius: 0 var(--radius-2) var(--radius-2) 0; background: var(--color-surface-2); color: var(--color-text-2); font-size: var(--font-size-sm); }
.input-range, .input-pair { display: flex; align-items: center; gap: var(--space-2); }
.input-pair .input { flex: 1; }
.check { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: 2px; }
.choice-group--col { flex-direction: column; gap: var(--space-2); }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; cursor: pointer; }
.choice input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.switch { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; cursor: pointer; padding: 0; min-height: 32px; }
.switch__track { width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; transition: background-color var(--motion-duration-fast) var(--motion-ease-standard); }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); transition: transform var(--motion-duration-fast) var(--motion-ease-standard); }
.switch[aria-checked="true"] .switch__track { background: var(--color-primary); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(16px); }

/* 폼 */
.form__layout--toc { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-5); }
.form__toc { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--color-border); padding-left: var(--space-3); }
.form__toc a { color: var(--color-text-2); text-decoration: none; padding: var(--space-1) 0; font-size: var(--font-size-sm); }
.form__toc a:hover { color: var(--color-text); text-decoration: underline; }
.form__sec { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.form__legend { font-size: var(--font-size-lg); font-weight: var(--weight-bold); padding: 0; margin-bottom: var(--space-3); display: flex; gap: var(--space-2); align-items: center; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.form__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 0; border-top: var(--border-1) solid var(--color-border); margin-top: var(--space-4); position: sticky; bottom: 0; background: var(--color-surface); }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-1); }
.field--wide { grid-column: 1 / -1; }
.field__label { font-weight: var(--weight-semibold); color: var(--color-text); }
.field__opt, .field__auto { font-weight: var(--weight-regular); color: var(--color-text-3); font-size: var(--font-size-sm); }
.field__auto { border: var(--border-1) solid var(--color-border); border-radius: var(--radius-1); padding: 0 4px; font-size: var(--font-size-xs); }
.field__hint { color: var(--color-text-3); font-size: var(--font-size-sm); }
.field__calc { color: var(--color-text-2); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.field__error { display: flex; gap: 4px; align-items: flex-start; color: var(--st-danger-fg); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); }
.error-summary { border: var(--border-2) solid var(--st-danger-fg); border-radius: var(--radius-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--st-danger-bg); }
.error-summary__title { display: flex; gap: var(--space-2); align-items: center; font-size: var(--font-size-lg); color: var(--st-danger-fg); margin-bottom: var(--space-2); }
.error-summary ul { list-style: disc; padding-left: var(--space-5); }
.error-summary a { color: var(--st-danger-fg); font-weight: var(--weight-semibold); }
.file-drop { border: var(--border-1) dashed var(--color-border-strong); border-radius: var(--radius-2); padding: var(--space-3); background: var(--color-surface-2); position: relative; }
.file-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop:focus-within { outline: var(--border-2) solid var(--color-focus); }
.file-drop__text { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-2); font-size: var(--font-size-sm); }
.file-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.calc-strip { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); background: var(--color-surface-2); border: var(--border-1) solid var(--color-border); font-variant-numeric: tabular-nums; margin-bottom: var(--space-4); }
.calc-strip__title { font-weight: var(--weight-semibold); }

/* 공지 */
.notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); margin-bottom: var(--space-3); border: var(--border-1) solid var(--st-neutral-bd); background: var(--st-neutral-bg); }
.notice p { flex: 1; }
.notice--info { background: var(--st-info-bg); border-color: var(--st-info-bd); }
.notice--warning { background: var(--st-warning-bg); border-color: var(--st-warning-bd); }
.notice--danger { background: var(--st-danger-bg); border-color: var(--st-danger-bd); }
.notice--success { background: var(--st-success-bg); border-color: var(--st-success-bd); }
.notice .chip { margin-left: auto; }
.banner { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); margin-bottom: var(--space-3); }
.banner--warning { background: var(--st-warning-bg); border: var(--border-1) solid var(--st-warning-bd); }
.banner--info { background: var(--st-info-bg); border: var(--border-1) solid var(--st-info-bd); }
.changes { list-style: disc; padding-left: var(--space-5); margin-top: var(--space-1); }

/* ── 요약 줄 ─────────────────────────────────── */
.sumstrip { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin-bottom: var(--space-3); }
.sumstrip__status, .sumstrip__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sumstrip__quick { margin-left: auto; }
.stat-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-2); border: var(--border-1) solid var(--color-border); background: var(--color-surface); cursor: pointer; }
.stat-chip:hover { border-color: var(--color-border-strong); }
.stat-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-neutral-fg); }
.stat-chip--success::before { background: var(--st-success-fg); }
.stat-chip--warning::before { background: var(--st-warning-fg); }
.stat-chip--danger::before { background: var(--st-danger-fg); }
.stat-chip--info::before { background: var(--st-info-fg); }
.stat-chip[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary-subtle); }
.stat-chip__label { font-size: var(--font-size-sm); color: var(--color-text-2); }
.stat-chip__n { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.kpi-mini { display: flex; flex-direction: column; padding: 0 var(--space-3); border-left: var(--border-1) solid var(--color-border); }
.kpi-mini__label { font-size: var(--font-size-xs); color: var(--color-text-3); }
.kpi-mini__v { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.kpi-mini__v small { font-weight: var(--weight-regular); color: var(--color-text-3); margin-left: 2px; }

/* ── 목록-상세 ──────────────────────────────── */
.ld { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.ld--open { grid-template-columns: minmax(0, 1fr) var(--panel-width); }
.ld--open.ld--wide { grid-template-columns: minmax(0, 1fr) var(--panel-width-wide); }
.ld__list { min-width: 0; background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); overflow: hidden; }
.tbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--border-1) solid var(--color-border); flex-wrap: wrap; }
.tbar__count { color: var(--color-text-2); }
.tbar__count strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.tbar__sel { font-weight: var(--weight-semibold); color: var(--color-text); }
.tbar__tools { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.bulkbar { position: sticky; top: var(--header-h); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); background: var(--color-primary-subtle); border-bottom: var(--border-1) solid var(--color-border-strong); }
.bulkbar__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* 데이터 표 (3.2 데이터 테이블 규칙) */
.table-wrap { overflow: auto; max-height: calc(100vh - 300px); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-md); }
.table th, .table td { padding: 0 var(--space-3); height: var(--table-row-height-comfortable); border-bottom: var(--border-1) solid var(--color-border); text-align: left; white-space: nowrap; vertical-align: middle; }
.table--compact th, .table--compact td { height: var(--table-row-height-compact); }
.table thead th, .table thead td { position: sticky; top: 0; z-index: 2; background: var(--table-header-bg); font-size: var(--font-size-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); border-bottom-color: var(--color-border-strong); }
.table tbody th { font-weight: var(--weight-regular); position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
.table thead th:first-of-type + th, .table thead td.col-check + th { left: 0; }
.table td.num, .table th.num { text-align: right; }
.table tbody tr:hover > * { background: var(--table-row-hover-bg); }
.table tbody tr.is-selected > * { background: var(--table-row-selected-bg); }
.table tbody tr.is-open > * { background: var(--table-row-open-bg); }
.table tbody tr.is-open > :first-child { box-shadow: inset 3px 0 0 var(--table-row-open-marker); }
.table tbody tr.is-exception > th::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--table-exception-marker); }
.table tbody tr.is-new > * { animation: rowNew 1.6s var(--motion-ease-standard); }
@keyframes rowNew { from { background: var(--color-primary-subtle); } }
.table tfoot th, .table tfoot td { background: var(--color-surface-2); font-weight: var(--weight-bold); position: sticky; bottom: 0; border-top: var(--border-1) solid var(--color-border-strong); }
.col-check { width: 40px; padding: 0 var(--space-2) !important; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer; font-weight: inherit; color: inherit; padding: 4px 0; }
th.num .th-sort { flex-direction: row-reverse; }
.th-unit { font-weight: var(--weight-regular); color: var(--color-text-3); }
.th-sort__ic { font-size: 10px; color: var(--color-text-3); }
.th-sort:hover .th-sort__ic { color: var(--color-text); }
.row-open { border: 0; background: transparent; padding: 4px 0; cursor: pointer; color: var(--color-link); font-weight: var(--weight-semibold); text-align: left; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.row-open:hover { text-decoration-color: currentColor; }
.skeleton { display: block; height: 12px; border-radius: var(--radius-1); background: var(--color-surface-3); animation: pulse 1.2s ease-in-out infinite; }
.skeleton--block { height: 180px; }
@keyframes pulse { 50% { opacity: .5; } }
.pager { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: var(--border-1) solid var(--color-border); flex-wrap: wrap; }
.pager__list { display: flex; gap: 2px; align-items: center; }
.pager__btn { min-width: 32px; height: 32px; border: 0; border-radius: var(--radius-1); background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; }
.pager__btn:hover { background: var(--color-surface-3); }
.pager__btn[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-bold); }
.pager__size { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-2); font-size: var(--font-size-sm); }

/* 상태 (빈·오류·권한) */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); color: var(--color-text-2); white-space: normal; }
.state__title { font-size: var(--font-size-lg); font-weight: var(--weight-bold); color: var(--color-text); }
.state__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }
.state--danger svg { color: var(--st-danger-fg); }
.state-page { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); }

/* 상세 패널 */
.panel { position: sticky; top: calc(var(--header-h) + var(--space-3)); display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - var(--space-5)); background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); min-width: 0; animation: panelIn var(--motion-duration-slow) var(--motion-ease-enter); }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } }
.panel__head { display: flex; gap: var(--space-2); justify-content: space-between; padding: var(--space-3) var(--space-4) var(--space-2); }
.panel__titles { min-width: 0; }
.panel__eyebrow { font-size: var(--font-size-sm); color: var(--color-text-3); }
.panel__title { font-size: var(--font-size-xl); line-height: var(--line-heading); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.panel__status { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.panel__nav { display: flex; gap: 2px; flex: none; }
.panel__body { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); }
.panel__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: var(--border-1) solid var(--color-border); background: var(--color-surface); border-radius: 0 0 var(--radius-3) var(--radius-3); }
.panel__h { font-size: var(--font-size-md); font-weight: var(--weight-bold); margin: var(--space-4) 0 var(--space-2); color: var(--color-text); }
.panel__h:first-child { margin-top: 0; }
.tabs { flex: none; display: flex; gap: var(--space-1); padding: 0 var(--space-4); border-bottom: var(--border-1) solid var(--color-border); overflow-x: auto; }
.tabs__tab { padding: var(--space-2) var(--space-2); border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; color: var(--color-text-2); white-space: nowrap; }
.tabs__tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-primary); font-weight: var(--weight-semibold); }
.kv { display: grid; gap: 0; }
.kv__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-1) solid var(--color-border); }
.kv--compact .kv__row { padding: 6px 0; }
.kv dt { color: var(--color-text-3); font-size: var(--font-size-sm); }
.kv dd { overflow-wrap: anywhere; }
.kv dd.num { text-align: left; }
.flow { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: var(--space-4); border-left: 2px solid var(--color-border-strong); }
.flow__item { position: relative; padding: var(--space-2) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.flow__item::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-primary); transform: translateY(-50%); }
.related li { padding: var(--space-1) 0; }
.timeline { display: flex; flex-direction: column; }
.timeline__item { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-1) solid var(--color-border); }
.timeline time { color: var(--color-text-3); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.aline { display: flex; flex-direction: column; gap: var(--space-2); }
.aline__step { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); border: var(--border-1) solid var(--color-border); }
.aline--edit .aline__step { grid-template-columns: 24px auto auto 1fr auto; }
.aline__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface-3); font-size: var(--font-size-xs); font-weight: var(--weight-bold); }
.aline__type { font-size: var(--font-size-xs); border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-1); padding: 0 4px; }
.aline__who { font-weight: var(--weight-semibold); }
.aline__dept { color: var(--color-text-3); font-size: var(--font-size-sm); }
.aline__state { font-size: var(--font-size-sm); }
.aline__step--done { background: var(--st-success-bg); }
.aline__step--now { border-color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-primary); }
.aline__step--rej { background: var(--st-danger-bg); }
.aline__tools { display: flex; gap: 2px; }
.biz-card { border: var(--border-1) solid var(--color-border-strong); border-radius: var(--radius-3); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface-2); }
.biz-card__title { font-size: var(--font-size-md); display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.decide { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.decide__btns { display: flex; gap: var(--space-2); align-items: center; }
.doc-body { margin-top: var(--space-4); max-width: 70ch; }
.doc-body p { margin-bottom: var(--space-3); line-height: 1.7; }
.doc-body__title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.rules { list-style: disc; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }

/* ── 대화상자·시트 ─────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 60; display: grid; background: var(--color-scrim); opacity: 0; transition: opacity var(--motion-duration-normal) var(--motion-ease-enter); }
.overlay.is-open { opacity: 1; }
.overlay.is-closing { opacity: 0; transition-duration: var(--motion-duration-exit); transition-timing-function: var(--motion-ease-exit); }
.overlay--dialog { place-items: center; padding: var(--space-4); }
.overlay--sheet { justify-items: end; }
.dialog, .sheet { background: var(--color-surface); display: flex; flex-direction: column; box-shadow: var(--shadow-3); max-height: 100%; }
.dialog { width: 100%; border-radius: var(--dialog-radius); max-height: calc(100vh - 2 * var(--space-4)); transform: translateY(8px); transition: transform var(--motion-duration-normal) var(--motion-ease-enter); }
.overlay.is-open .dialog { transform: none; }
.dialog--sm { max-width: 480px; } .dialog--md { max-width: 640px; } .dialog--lg { max-width: 800px; } .dialog--xl { max-width: 1040px; }
.sheet { height: 100vh; width: 100%; transform: translateX(24px); transition: transform var(--motion-duration-slow) var(--motion-ease-enter); }
.overlay.is-closing .sheet { transform: translateX(24px); transition-duration: var(--motion-duration-exit); transition-timing-function: var(--motion-ease-exit); }
.overlay.is-closing .dialog { transform: translateY(8px); transition-duration: var(--motion-duration-exit); transition-timing-function: var(--motion-ease-exit); }
.overlay.is-open .sheet { transform: none; }
.sheet--sm { max-width: 420px; } .sheet--md { max-width: 560px; } .sheet--lg { max-width: 760px; } .sheet--xl { max-width: 1000px; }
.dialog__head, .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-1) solid var(--color-border); }
.dialog__title, .sheet__title { font-size: var(--font-size-xl); font-weight: var(--weight-bold); line-height: var(--line-heading); }
.dialog__body, .sheet__body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.dialog__foot, .sheet__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: var(--border-1) solid var(--color-border); flex-wrap: wrap; }
.sheet__meta { margin-right: auto; color: var(--color-text-3); font-size: var(--font-size-sm); }
.dialog__text { color: var(--color-text-2); }
.impact { padding: var(--space-3); border-radius: var(--radius-2); background: var(--color-surface-2); border: var(--border-1) solid var(--color-border); }
.impact__list { display: grid; gap: var(--space-1); }
.impact__list > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-2); }
.impact__list dt { color: var(--color-text-3); }
.impact__list dd { font-weight: var(--weight-semibold); }
.result-list li { padding: var(--space-1) 0; display: flex; gap: var(--space-2); align-items: center; }
.cols { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1) var(--space-4); }

/* 토스트 */
/* 토스트는 헤더 아래 가운데 — 패널·폼·스캔 화면 하단의 주요 행동 버튼을 가리지 않게(클릭 검증에서 발견 → 09 수정) */
.toasts { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); top: calc(var(--header-h) + var(--space-3)); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: max-content; max-width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; }
.toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-3); background: var(--toast-bg); color: var(--toast-fg); box-shadow: var(--shadow-3); animation: toastIn var(--motion-duration-normal) var(--motion-ease-enter); }
.toast__msg { flex: 1; }
.toast .btn--tertiary { color: var(--color-text-inverse); }
.toast .btn--ghost { color: var(--color-text-inverse); }
.toast--danger { border-left: 4px solid var(--st-danger-bd); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* 팔레트·알림 */
.palette__list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.palette__opt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); cursor: pointer; }
.palette__opt[aria-selected="true"] { background: var(--color-primary-subtle); box-shadow: inset 3px 0 0 var(--color-primary); }
.palette__title { font-weight: var(--weight-semibold); }
.palette__path { color: var(--color-text-3); font-size: var(--font-size-sm); margin-left: auto; }
.palette__none { padding: var(--space-4); color: var(--color-text-2); }
.notif { display: flex; flex-direction: column; }
.notif__item a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2); align-items: start; padding: var(--space-3) 0; border-bottom: var(--border-1) solid var(--color-border); text-decoration: none; color: var(--color-text-2); }
.notif__item.is-unread a { color: var(--color-text); font-weight: var(--weight-semibold); }
.umenu { display: flex; flex-direction: column; gap: var(--space-4); }
.umenu__me { display: flex; gap: var(--space-3); align-items: center; }
.umenu__links { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ── 신청서·문서 작성·기록 ─────────────────── */
.req { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.req__form { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-5); }
.req__aside { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.aside-card { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.aside-card__title { font-size: var(--font-size-md); font-weight: var(--weight-bold); }
.aside-card__calc { font-variant-numeric: tabular-nums; }
.meter-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.meter-list dt { font-size: var(--font-size-xs); color: var(--color-text-3); }
.meter-list dd { font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--color-primary); }
.compose { display: flex; flex-direction: column; gap: var(--space-5); }
.compose__search { max-width: 420px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.tpl { display: flex; align-items: stretch; border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); background: var(--color-surface); }
.tpl:hover { border-color: var(--color-border-strong); }
.tpl__main { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); align-items: center; padding: var(--space-3); border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: var(--radius-3); }
.tpl__name { font-weight: var(--weight-semibold); }
.tpl__cat { grid-column: 2; font-size: var(--font-size-xs); color: var(--color-text-3); }
.record { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); }
.record__head { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); }
.record__head .avatar { width: 64px; height: 64px; font-size: var(--font-size-2xl); }
.record__name { font-size: var(--font-size-2xl); }
.record__head p { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.record__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.file-list--doc li { border-bottom: var(--border-1) solid var(--color-border); padding: var(--space-2) 0; }

/* 출퇴근 */
.clock { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); }
.clock__card, .clock__side { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.clock__card { align-items: center; text-align: center; }
.clock__date { font-size: var(--font-size-2xl); }
.clock__times { display: flex; gap: var(--space-7); font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; }
.clock__times dt { font-size: var(--font-size-sm); color: var(--color-text-3); }
.clock__btn .btn { min-width: 240px; height: 64px; font-size: var(--font-size-xl); }
.week li { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: var(--border-1) solid var(--color-border); }

/* 대시보드·카드·차트 */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.hello__t { font-size: var(--font-size-xl); }
.hello__clock { display: flex; gap: var(--space-2); align-items: center; }
.todo__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.todo__item { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 var(--space-2); padding: var(--space-4); border-radius: var(--radius-3); border: var(--border-1) solid var(--color-border); background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.todo__item:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.todo__item svg { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--color-text-3); }
.todo__n { font-size: var(--font-size-3xl); font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.todo__label { color: var(--color-text-2); }
.todo__item--zero { color: var(--color-text-3); }
.todo__item--zero .todo__n { color: var(--color-text-3); font-weight: var(--weight-semibold); }
.todo__item--danger { box-shadow: inset 4px 0 0 var(--st-danger-fg); }
.todo__item--warning { box-shadow: inset 4px 0 0 var(--st-warning-fg); }
.todo__item--info { box-shadow: inset 4px 0 0 var(--st-info-fg); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.card { background: var(--card-bg); border: var(--border-1) solid var(--card-border); border-radius: var(--card-radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.card--kpi { grid-column: 1 / -1; }
.card__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card__table { overflow-x: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.card__title { font-size: var(--font-size-lg); font-weight: var(--weight-bold); margin-right: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.kpi__label { color: var(--color-text-2); font-size: var(--font-size-sm); }
.kpi__v { font-size: var(--font-size-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.kpi__v small { font-size: var(--font-size-md); font-weight: var(--weight-regular); color: var(--color-text-3); margin-left: 2px; }
.kpi__d { font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.kpi__d--up { color: var(--st-success-fg); } .kpi__d--down { color: var(--st-danger-fg); }
.chart { width: 100%; height: auto; max-height: 220px; }
.chart__axis { stroke: var(--color-border-strong); }
.chart__lbl { font-size: 10px; fill: var(--color-text-3); }
.chart__val { font-size: 10px; fill: var(--color-text-2); font-weight: 600; }
.stack { display: flex; height: 20px; border-radius: var(--radius-1); overflow: hidden; gap: 2px; }
.stack__seg { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
.legend li { display: inline-flex; gap: var(--space-1); align-items: center; }
.legend__sw { width: 10px; height: 10px; border-radius: 2px; }
.report-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.report-table { margin-top: var(--space-2); }
.report-table .table-wrap, .report-table > .table-wrap { background: var(--color-surface); }
.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.quick-link { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-2); border: var(--border-1) solid var(--color-border); text-decoration: none; color: var(--color-text); text-align: center; }
.quick-link:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }

/* 달력 */
.cal-bar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.cal-bar__t { font-size: var(--font-size-xl); min-width: 140px; text-align: center; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); }
.cal th { padding: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-2); border-bottom: var(--border-1) solid var(--color-border); }
.cal td { border: var(--border-1) solid var(--color-border); height: 96px; vertical-align: top; padding: 0; }
.cal__btn { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-1); border: 0; background: transparent; cursor: pointer; text-align: left; }
.cal__btn:hover { background: var(--color-surface-2); }
.cal__num { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.cal__day.is-today .cal__num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); }
.cal__day.is-sel { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cal__day.is-sun .cal__num { color: var(--st-danger-fg); }
.cal__ev { display: block; font-size: 11px; padding: 1px 4px; border-radius: 3px; background: var(--st-neutral-bg); border-left: 3px solid var(--st-neutral-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__ev--success { border-left-color: var(--st-success-fg); background: var(--st-success-bg); }
.cal__ev--warning { border-left-color: var(--st-warning-fg); background: var(--st-warning-bg); }
.cal__ev--danger { border-left-color: var(--st-danger-fg); background: var(--st-danger-bg); }
.cal__ev--info { border-left-color: var(--st-info-fg); background: var(--st-info-bg); }
.cal__more { font-size: 11px; color: var(--color-text-3); }
.cal__empty { background: var(--color-surface-2); }
.cal-side { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: calc(var(--header-h) + var(--space-3)); }
.stack-btns { display: flex; flex-direction: column; gap: var(--space-2); }
.ev-list li { padding: var(--space-1) 0; display: flex; gap: var(--space-2); align-items: center; }
.ld--float { margin-top: var(--space-3); grid-template-columns: minmax(0, 1fr); }

/* 트리 */
.cascade { display: flex; gap: var(--space-3); overflow-x: auto; align-items: stretch; }
.cascade__col { min-width: 220px; background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); max-height: 70vh; overflow-y: auto; }
.cascade__h { font-size: var(--font-size-sm); padding: var(--space-1) var(--space-2); color: var(--color-text-2); }
.cascade__item { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: center; padding: var(--space-2); border: 0; border-radius: var(--radius-1); background: transparent; cursor: pointer; text-align: left; min-height: 32px; }
.cascade__item:hover { background: var(--color-surface-3); }
.cascade__item[aria-pressed="true"] { background: var(--color-primary-subtle); font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--color-primary); }
.cascade__detail { flex: 1; min-width: 360px; background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-4); }

/* 정책 표 */
.policy td.is-changed { background: var(--st-warning-bg); }
.changed-dot { color: var(--st-warning-fg); margin-left: 4px; font-size: var(--font-size-xs); }
.policy th[scope=rowgroup] { vertical-align: top; padding-top: var(--space-2); background: var(--color-surface-2); }

/* 스캔 작업대 (Fitts 56px) */
.scan { max-width: 920px; display: flex; flex-direction: column; gap: var(--space-4); }
.scan__net { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-2); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--st-success-fg); }
.scan.is-offline .scan__net { color: var(--st-warning-fg); font-weight: var(--weight-semibold); }
.scan__label { font-size: var(--font-size-lg); font-weight: var(--weight-bold); display: block; margin-bottom: var(--space-2); }
.input--scan { height: var(--control-h-scan); font-size: var(--font-size-xl); font-family: var(--font-mono); border-width: 2px; }
.scan__card { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-3); border: 2px solid var(--color-border); background: var(--color-surface); }
.scan__card--idle { flex-direction: column; align-items: center; color: var(--color-text-3); border-style: dashed; }
.scan__card--ok { border-color: var(--st-success-fg); }
.scan__card--ok > svg { color: var(--st-success-fg); }
.scan__card--err { border-color: var(--st-danger-fg); background: var(--st-danger-bg); }
.scan__card--err > svg { color: var(--st-danger-fg); }
.scan__info { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.scan__code { font-size: var(--font-size-xl); font-weight: var(--weight-bold); }
.scan__qty { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); font-variant-numeric: tabular-nums; }
.scan__qty dt { font-size: var(--font-size-sm); color: var(--color-text-3); }
.scan__qty dd { font-size: var(--font-size-lg); }
.scan__btns { display: flex; gap: var(--space-3); justify-content: flex-end; }
.scan__btns .btn { height: var(--control-h-scan); min-width: 160px; }
.scan__done li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: var(--border-1) solid var(--color-border); }

/* 진행 막대 (MI-04) */
.progress { height: 8px; border-radius: var(--radius-full); background: var(--color-surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--motion-duration-normal) var(--motion-ease-standard); }
.scan__tools { display: flex; justify-content: flex-end; }

/* 단계형 */
.stepper { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.stepper__s { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); border: var(--border-1) solid var(--color-border); background: var(--color-surface); color: var(--color-text-3); }
.stepper__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface-3); font-size: var(--font-size-xs); font-weight: var(--weight-bold); }
.stepper__s.is-done { color: var(--color-text-2); }
.stepper__s.is-done .stepper__n { background: var(--st-success-fg); color: var(--color-text-inverse); }
.stepper__s.is-now { border-color: var(--color-primary); color: var(--color-text); font-weight: var(--weight-semibold); }
.stepper__s.is-now .stepper__n { background: var(--color-primary); color: var(--color-on-primary); }
.wizard__body { background: var(--color-surface); border: var(--border-1) solid var(--color-border); border-radius: var(--radius-3); padding: var(--space-4); }
.done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6); }
.done svg { color: var(--st-success-fg); }
.mobile-frame { max-width: 380px; margin: 0 auto; border: 8px solid var(--color-text); border-radius: 28px; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-frame .form__grid { grid-template-columns: 1fr; }

/* 편성 그리드 */
.grid-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.grid-bar__tools { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.grid { border-collapse: separate; border-spacing: 0; background: var(--color-surface); font-size: var(--font-size-sm); }
.grid th, .grid td { border-bottom: var(--border-1) solid var(--color-border); border-right: var(--border-1) solid var(--color-border); text-align: center; padding: 0; min-width: 36px; height: 36px; }
.grid thead th { position: sticky; top: 0; background: var(--color-surface-2); z-index: 2; font-weight: var(--weight-semibold); padding: 2px; }
.grid thead abbr { text-decoration: none; }
.grid .is-sun { color: var(--st-danger-fg); }
.grid__name { position: sticky; left: 0; z-index: 1; background: var(--color-surface); text-align: left !important; padding: 0 var(--space-3) !important; min-width: 120px; font-weight: var(--weight-semibold); }
.grid__name small { display: block; font-weight: var(--weight-regular); color: var(--color-text-3); }
.grid__btn { width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; font-weight: var(--weight-semibold); }
.grid__cell--B { background: var(--color-surface-2); }
.grid__cell--C { background: var(--color-surface-3); }
.grid__cell--off { color: var(--color-text-3); background: repeating-linear-gradient(45deg, transparent 0 4px, var(--color-surface-3) 4px 6px); }
.grid__cell--leave { background: var(--st-info-bg); }
.grid__cell.is-sel { box-shadow: inset 0 0 0 2px var(--color-primary); }
.legend__chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border: var(--border-1) solid var(--color-border); font-weight: var(--weight-bold); }

/* 검토 도구 */
.review { position: fixed; left: var(--space-3); bottom: var(--space-3); z-index: 50; display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); background: var(--color-surface); border: var(--border-1) solid var(--color-border-strong); box-shadow: var(--shadow-2); font-size: var(--font-size-sm); }
.review__label { color: var(--color-text-2); font-weight: var(--weight-semibold); }

/* ── 반응형 (09: <1024px 단일 창 드릴다운) ─────────── */
@media (max-width: 1279px) {
  .ld--open { grid-template-columns: minmax(0, 1fr) 380px; }
  .req, .clock { grid-template-columns: minmax(0, 1fr); }
  .req__aside { position: static; }
  .cal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .layout, html[data-sidebar="closed"] .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 45; top: var(--header-h); left: 0; width: min(320px, 85vw); box-shadow: var(--shadow-3); }
  html[data-sidebar="closed"] .sidebar { display: none; }
  html[data-sidebar="open"] .sidebar { visibility: visible; }
  .gh__left { min-width: 0; }
  .gh__search span, .gh__search .kbd, .gh__urole { display: none; }
  .gh__search { flex: 0 0 auto; width: var(--control-h-md); padding: 0; justify-content: center; }
  .main { padding: var(--space-3) var(--space-4) var(--space-8); }
  .ld--open, .ld--open.ld--wide { grid-template-columns: minmax(0, 1fr); }
  .ld--open .panel { position: fixed; inset: var(--header-h) 0 0 0; z-index: 40; max-height: none; border-radius: 0; }
  .form__grid { grid-template-columns: 1fr; }
  .form__layout--toc { grid-template-columns: 1fr; }
  .form__toc { display: none; }
  .fbar__btns { margin-left: 0; }
  .sumstrip__quick { margin-left: 0; }
  .grid-cards { grid-template-columns: 1fr; }
  .btn { min-height: 44px; } /* 모바일 터치 대상 44px */
  .btn--sm { min-height: 40px; }
}
@media (max-width: 599px) {
  .page-head h1 { font-size: var(--font-size-xl); }
  .fbar__search .input[type=search] { width: 100%; }
  .fbar__period { flex-direction: column; align-items: stretch; }
  /* 320px 리플로(19.4): 필터 항목은 한 줄 전체, 빠른 기간 버튼은 줄바꿈 */
  .fbar__item { width: 100%; }
  .fbar__item .input--select, .fbar__item .input--sm { width: 100%; }
  .seg { flex-wrap: wrap; }
  .seg__btn { flex: 1 1 auto; border-bottom: var(--border-1) solid var(--color-border); }
  .fbar__search { flex-direction: column; align-items: stretch; }
  .page-head__actions { width: 100%; }
  .input-range, .input-pair { flex-direction: column; align-items: stretch; }
  .req__form { padding: var(--space-4); min-width: 0; }
  .choice-group { flex-wrap: wrap; }
  .form__bar { flex-wrap: wrap; }
  .form__bar .btn, .form__bar .why-wrap { flex: 1 1 auto; }
  .form__bar .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; text-align: center; }
  /* 모바일 헤더: 로고 표식·아바타만(ego-lite 375px 검수에서 줄바꿈 발견) */
  .gh__name, .gh__uname { display: none; }
  .btn .kbd { display: none; }
  .file-drop__text { flex-wrap: wrap; }
  .gh { gap: var(--space-2); padding: 0 var(--space-3); }
  /* 달력: 일정 글자 대신 기호 + 색(색만으로 전달 금지) */
  .cal__ev { display: block; font-size: 0; height: 14px; line-height: 14px; padding: 0; border-left: 0; text-align: center; border-radius: 3px; }
  .cal__ev::before { font-size: 11px; font-weight: 700; content: "•"; }
  .cal__ev--success::before { content: "✓"; color: var(--st-success-fg); }
  .cal__ev--warning::before { content: "!"; color: var(--st-warning-fg); }
  .cal__ev--danger::before { content: "✕"; color: var(--st-danger-fg); }
  .cal__ev--info::before { content: "i"; color: var(--st-info-fg); }
  .cal-bar { flex-wrap: wrap; }
  /* 검토 도구는 고정하지 않고 본문 끝에(주요 행동 버튼을 가리지 않게) */
  .review { position: static; margin: var(--space-4) var(--space-4) var(--space-6); box-shadow: none; }
  .input--date { width: 100%; }
  .kv__row { grid-template-columns: 1fr; gap: 0; }
  .toasts { left: var(--space-3); right: var(--space-3); transform: none; width: auto; }
  .clock__times { gap: var(--space-5); }
  .quick-links { grid-template-columns: repeat(2, 1fr); }
  .cal td { height: 64px; }
  .cal__btn::after { content: ""; }
}

/* 모션 감소 (3.7 «책임감 있는 모션», 19.4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* 강제 색상(고대비 모드)에서도 테두리·포커스 유지 (2.4 실행 가이드 7) */
@media (forced-colors: active) {
  .badge, .chip, .stat-chip, .btn, .input, .panel, .card { border: 1px solid CanvasText; }
  .table tbody tr.is-open > :first-child, .nav__link[aria-current="page"] { outline: 2px solid Highlight; }
  :focus-visible { outline: 2px solid Highlight; }
}
@media print {
  .gh, .sidebar, .review, .fbar, .tbar, .pager, .panel__foot, .toasts { display: none !important; }
  .layout { display: block; }
}