:root {
  /* Claude 디자인 톤 — 따뜻한 미색 바탕 · 잉크 글자 · 점토(테라코타) 강조 · 명조 제목 */
  --bg: #f4f2eb; --panel: #fdfcf8; --panel-2: #f8f6f0; --text: #1f1e1b; --muted: #6e6b62; --line: #e6e2d7; --line-strong: #d2ccbe;
  --accent: #b9583a; --accent-hover: #a14a2f; --accent-weak: #f6e7df; --accent-text: #ffffff;
  --warn: #93590f; --warn-bg: #fbf0dc; --danger: #b3261e; --ok: #44785a; --ok-bg: #e7f1ea;
  --radius: 12px; --radius-sm: 8px; --gap: 18px;
  --shadow: 0 1px 2px rgba(31, 30, 27, .04), 0 1px 1px rgba(31, 30, 27, .03);
  --serif: "Tiempos Headline", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", Georgia, serif;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1d1c19; --panel: #262521; --panel-2: #2c2b26; --text: #ece9e0; --muted: #a7a297; --line: #3a3832; --line-strong: #4e4b43;
    --accent: #e08f6d; --accent-hover: #eaa283; --accent-weak: #3a2a22; --accent-text: #1d1c19;
    --warn: #e2b36b; --warn-bg: #3a2e19; --danger: #ef8a80; --ok: #93c4a1; --ok-bg: #22332a;
    --shadow: none; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); line-height: 1.5; font-size: 15px; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1 { font-size: 1.35rem; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.warn { color: var(--warn); background: var(--warn-bg); padding: 8px 12px; border-radius: var(--radius); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

header#app-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.brand-logo { height: 22px; width: auto; display: block; }
.brand-app { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted, #666); font-weight: 600; }
/* 밝은 화면은 logo-whitebg, 어두운 화면은 logo-blackbg(index.html 의 picture) — 흰 상자 없이 */
.who { color: var(--muted); font-size: .9rem; }
.head-tools { margin-left: auto; display: flex; gap: 8px; }

button, .button { font: inherit; font-size: .9rem; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); padding: 6px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
button.ghost, .button.ghost { background: transparent; color: var(--accent); }
button.small { padding: 3px 10px; font-size: .82rem; }
button:disabled { opacity: .5; cursor: default; }
input:disabled, select:disabled, textarea:disabled { background: var(--bg); color: var(--muted); border-style: dashed; }
input[type=search], input[type=text], select { font: inherit; font-size: .9rem; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--text); }

.tabs { display: flex; gap: 4px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current=page] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); }
.panel.center { text-align: center; padding: 40px 16px; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tools input[type=search] { min-width: 0; width: 220px; max-width: 100%; }
.flash { padding: 8px 12px; border-radius: var(--radius); background: var(--accent-weak); margin: 0 0 12px; }
.flash.error { background: var(--warn-bg); color: var(--danger); }

.subnav { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.subnav button { background: var(--panel); color: var(--text); border-color: var(--line-strong); white-space: nowrap; }
.subnav button[aria-selected=true] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg); color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tr.left td { color: var(--muted); }
td .sub { display: block; color: var(--muted); font-size: .8rem; }
td .line { display: block; white-space: nowrap; }
.col-actions { width: 1%; white-space: nowrap; }
#people-table td, #sync-table td:first-child, #audit-table td:first-child, #audit-table td:nth-child(2), #contract-table td { white-space: nowrap; }
.badge.override { margin-left: 6px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--line-strong); color: var(--muted); margin: 0 4px 2px 0; white-space: nowrap; }
.badge.ceo, .badge.coo, .badge.deputy { border-color: var(--accent); color: var(--accent); }
.badge.hr { border-color: var(--ok); color: var(--ok); }
.badge.override { border-color: var(--warn); color: var(--warn); }
.badge.left { border-color: var(--danger); color: var(--danger); }
.level { font-weight: 600; }
.ok { color: var(--ok); }
.bad { color: var(--danger); }

.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 18px; border-left: 1px solid var(--line); padding-left: 12px; }
.tree li { padding: 4px 0; }
.tree .org-name { font-weight: 600; }
.tree .removed .org-name { color: var(--muted); text-decoration: line-through; }

dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--panel); color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
.dialog-body { padding: 20px; margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; padding: 10px 12px; display: grid; gap: 8px; }
legend { font-weight: 600; padding: 0 4px; }
fieldset label { display: block; }
fieldset input[type=text] { width: 100%; margin-top: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; }

h3 { font-size: .98rem; margin: 18px 0 8px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain > li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain > li:last-child { border-bottom: 0; }
textarea { font: inherit; font-size: .9rem; width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--text); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
button.danger { color: var(--danger); border-color: var(--danger); }
.chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg); border: 1px solid var(--line-strong); color: var(--muted); vertical-align: middle; }
.chip.st-approved, .chip.st-sent, .chip.st-viewed { border-color: var(--accent); color: var(--accent); }
.chip.st-signed { border-color: var(--ok); color: var(--ok); }
.chip.st-returned { border-color: var(--warn); color: var(--warn); }
.chip.st-cancelled { text-decoration: line-through; }
.doc { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--bg); max-height: 70vh; overflow: auto; line-height: 1.75; }
.doc .doc-title { text-align: center; font-size: 1.2rem; margin: 4px 0 16px; }
.doc h4 { margin: 16px 0 6px; font-size: .95rem; }
.doc p { margin: 0 0 6px; }
.sig-preview { height: 44px; vertical-align: middle; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.seal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.seal-item { display: inline-flex; align-items: center; gap: 4px; }
.timeline { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 8px 0; list-style: none; color: var(--muted); }
.note { background: var(--warn-bg); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; }
.note p { margin: 4px 0 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
label.field { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
label.field input, label.field select { color: var(--text); }
.sign-box { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.agree { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
details { margin: 12px 0; }
pre.mail { white-space: pre-wrap; font: inherit; font-size: .85rem; background: var(--bg); border-radius: 6px; padding: 8px 10px; margin: 6px 0 0; }
#sign-canvas { width: 100%; height: auto; aspect-ratio: 600 / 220; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: #fff; touch-action: none; }

.card { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 12px; }
.card .panel-head { margin-bottom: 4px; }
.card h3 { margin: 10px 0 6px; }
.upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; text-align: center; }
.badge { margin-left: 4px; }

@media (max-width: 640px) {
  body { font-size: 14px; }
  main { padding: 12px; }
  .panel { padding: 12px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .tools input[type=search] { width: 100%; }
}

/* 문안 라이브러리 · 전체 발송 (7.x) */
.palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.template-body { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.6; }
.tools.wrap { margin: 8px 0; }
.pick { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); margin: 6px 0; max-height: 220px; overflow: auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
tr.current td { font-weight: 600; }
.chip.bulk-ready, .chip.bulk-sent { border-color: var(--ok); color: var(--ok); }
.chip.bulk-error { border-color: var(--warn); color: var(--warn); }
tr.bulk-skip td { color: var(--muted); }
td input[type=text], td input[type=date] { min-width: 110px; }
.bulk-table td:nth-child(-n+3), .bulk-table th { white-space: nowrap; }
.fields input:disabled, .field input:disabled, .field textarea:disabled { background: var(--bg); color: var(--muted); border-style: dashed; }
.doc p.li { padding-left: 1.6em; }
.chip.num-new { border-color: var(--accent); color: var(--accent); }
.chip.num-error { border-color: var(--warn); color: var(--warn); }
tr.num-exempt td { color: var(--muted); }
.numbers-table td:first-child, .numbers-table td:nth-child(4), .numbers-table td:nth-child(5), .numbers-table td:nth-child(6) { white-space: nowrap; }
.aff { display: inline-flex; gap: 4px; flex-wrap: wrap; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.salary-table td { white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.up { color: var(--ok); }
td.down { color: var(--warn); }
tr.left td { color: var(--muted); }
.bands { margin: 8px 0 14px; }
.bands-table input { min-width: 0; }
.band-pos { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.band-bar { position: relative; display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--line); }
.band-dot { position: absolute; top: -3px; width: 8px; height: 12px; border-radius: 2px; background: var(--accent); }
.band-dot.below, .chip.band-below { background: var(--warn); border-color: var(--warn); color: var(--warn); }
.band-dot.above { background: var(--ok); }
.chip.band-above { border-color: var(--ok); color: var(--ok); }
.chip.band-below { background: transparent; }
.recog { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chip.edu { font-weight: 500; }

/* ── Claude 디자인 다듬기(7.20) — 위의 규칙을 덮어쓴다 ── */
body { font-size: 15px; line-height: 1.6; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
main, #main { max-width: 1240px; margin: 0 auto; padding: 20px 20px 48px; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
h2 { font-size: 1.45rem; margin: 0 0 4px; }
h3 { font-size: 1.02rem; font-weight: 650; margin: 22px 0 10px; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
.lede { color: var(--muted); margin: 2px 0 0; font-size: .92rem; max-width: 62ch; }

header#app-head { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); padding: 12px 20px; }
.brand-app { color: var(--text); font-family: var(--serif); font-weight: 600; }
.tabs { background: transparent; border-bottom: 1px solid var(--line); padding: 0 20px; gap: 2px; }
.tabs a { color: var(--muted); padding: 12px 14px; border-bottom-width: 2px; transition: color .15s; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current=page] { color: var(--text); border-bottom-color: var(--accent); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 24px 0 10px; }
.section-head h3 { margin: 0; }

.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.subnav button { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; font-weight: 500; }
.subnav button:hover { background: var(--panel-2); color: var(--text); }
.subnav button[aria-selected=true] { background: var(--text); color: var(--panel); border-color: var(--text); }

button, .button { border-radius: var(--radius-sm); padding: 7px 15px; font-weight: 550; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); transition: background .15s, border-color .15s, color .15s; }
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
button.ghost, .button.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
button.ghost:hover, .button.ghost:hover { background: var(--panel-2); color: var(--text); border-color: var(--line-strong); }
button.small, .button.small { padding: 4px 11px; font-size: .84rem; }
button.danger, .button.danger, button.ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: transparent; }
button:focus-visible, .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
button:disabled, button:disabled:hover { background: var(--line); border-color: var(--line); color: var(--muted); opacity: 1; }

input[type=search], input[type=text], input[type=email], input[type=date], select, textarea { border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); padding: 7px 11px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
textarea { font: inherit; line-height: 1.55; }

.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: .01em; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }

.badge { border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--panel-2); padding: 1px 9px; }
.badge.deputy, .badge.ceo, .badge.coo { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-weak); }
.chip { border-radius: 999px; padding: 2px 10px; font-weight: 600; background: var(--panel-2); }
.chip.st-signed, .chip.num-keep { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.chip.st-approved, .chip.st-sent, .chip.st-viewed { background: var(--accent-weak); border-color: transparent; color: var(--accent); }
.flash { background: var(--accent-weak); color: var(--text); border-radius: var(--radius-sm); }
.flash.error, .warn { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); }
.note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }

/* 문서 미리보기 — 종이처럼 */
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 40px; font-family: var(--serif); line-height: 1.85; box-shadow: var(--shadow); }
.doc .doc-title { font-size: 1.35rem; letter-spacing: .08em; }

/* 계약 탭 — 직인 · 문안 카드 */
.seal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); margin: 4px 0 6px; }
.seal-title { font-weight: 650; margin-right: 6px; }
.seal-item { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.seal-item .sig-preview { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.seal-item.missing { border-style: dashed; }
.seal-empty { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--line-strong); color: var(--muted); font-size: .7rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card.empty { grid-column: 1 / -1; text-align: center; padding: 28px; background: var(--panel-2); }
.tpl-card { display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.tpl-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tpl-card.retired { opacity: .6; }
.tpl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tpl-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--text); text-decoration: none; }
.tpl-name:hover { color: var(--accent); }
.tpl-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-stats { display: flex; gap: 16px; color: var(--muted); font-size: .88rem; }
.tpl-stats strong { color: var(--text); font-size: 1.05rem; margin-right: 2px; }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* 연봉 범위 막대 */
.band-bar { background: var(--line); height: 6px; border-radius: 999px; }
.band-dot { border-radius: 3px; box-shadow: 0 0 0 2px var(--panel); }

/* 대화상자 */
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: 0 20px 50px rgba(31, 30, 27, .18); padding: 0; }
dialog::backdrop { background: rgba(31, 30, 27, .35); backdrop-filter: blur(2px); }
.dialog-body { padding: 22px 24px; }
.dialog-body h2 { margin-top: 0; }

@media (max-width: 640px) {
  .panel { padding: 16px; }
  main, #main { padding: 12px 12px 40px; }
  .doc { padding: 20px; }
}

/* 내 정보: 머리 한 줄 · 슬롯 · 재직 기록 · 서류함 표 · 인사평가 */
.me-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.me-head h2 { margin: 0; font-family: var(--serif); font-size: 1.6rem; }
.me-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; }
.me-line .dot { color: var(--line-strong); }
.me-sig { display: inline-flex; align-items: center; gap: 6px; }
.sig-mini { height: 26px; max-width: 90px; object-fit: contain; border-bottom: 1px solid var(--line-strong); }
#me-profile .card, #person-view .card { margin-bottom: 12px; box-shadow: none; }
.card h3 { margin: 0; font-family: var(--serif); font-size: 1.08rem; }
.card > .panel-head { margin-bottom: 8px; }
.card > h3 { margin-bottom: 10px; }
.slots { list-style: none; margin: 0; padding: 0; }
.slots > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.slots > li:last-child { border-bottom: 0; }
.slot-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.slot-main .sub { flex-basis: 100%; color: var(--muted); font-size: .85rem; white-space: pre-wrap; }
.slot-label { min-width: 7em; color: var(--muted); font-size: .88rem; }
.slot-actions { display: flex; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.timeline > li { position: relative; padding: 4px 0 10px 12px; }
.timeline > li::before { content: ''; position: absolute; left: -20px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-strong); }
.timeline > li.now::before { border-color: var(--accent); background: var(--accent); }
.timeline .when { display: inline-block; min-width: 6.5em; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .88rem; }
.doc-table td.num { color: var(--muted); font-variant-numeric: tabular-nums; width: 3em; }
.doc-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-table td:nth-child(3) { white-space: nowrap; color: var(--muted); }
.doc-table td:nth-child(4) { min-width: 10em; }
.doc-table td:last-child { white-space: nowrap; }
.doc-table td:last-child button { margin-left: 6px; }
.eval-year { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.eval-year:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.eval-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.eval-item .hint { grid-column: 1; color: var(--muted); font-size: .82rem; }
.eval-item .scale { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; }
.scale label { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; font-variant-numeric: tabular-nums; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.scale label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.eval-group { margin: 14px 0 2px; color: var(--muted); font-size: .8rem; letter-spacing: .04em; }
.avg-bar { width: 90px; height: 8px; vertical-align: middle; margin-right: 6px; }
dialog.wide .self-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 6px 0 12px; }
.self-view h4 { margin: 4px 0 8px; }
.self-view .pre, .pre { white-space: pre-wrap; margin: 2px 0 10px; }
dialog.wide { width: min(720px, calc(100vw - 32px)); }
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .eval-item { grid-template-columns: 1fr; }
  .eval-item .scale { grid-row: auto; grid-column: 1; }
  .doc-table th:first-child, .doc-table td.num { display: none; }
}

.test-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border: 1px solid var(--warn); }
.bands-table input[inputmode=decimal] { width: 4.5em; }
.bands-table td:has(input[inputmode=decimal]) { white-space: nowrap; }
.onboarding td { white-space: nowrap; }
.onboarding td .ok, .onboarding td .bad, .onboarding td > a.small { display: block; }
.onboarding td .bad.small { white-space: normal; min-width: 12em; }
.onboarding .col-actions button, .onboarding .col-actions a { display: block; margin: 2px 0; }

.tpl-add { border-style: dashed; background: var(--panel-2); box-shadow: none; }
.tpl-own { text-decoration: none; color: inherit; justify-content: center; }
.tpl-own:hover { border-color: var(--accent); }

/* 팝업 오른쪽 위 X */
dialog { position: fixed; }
dialog > .dlg-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 1; }
dialog > .dlg-x:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
dialog > .dlg-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 대상 직원 고르기 */
.picker { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; background: var(--panel); }
.picker-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picker-filters input[type=search] { flex: 1 1 10em; min-width: 8em; }
.picker-filters select { flex: 0 1 auto; max-width: 11em; }
.picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.picker-list { max-height: 260px; overflow: auto; display: grid; }
.picker-row { display: grid; grid-template-columns: auto 6em 4em 1fr; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .92rem; }
.picker-row:last-child { border-bottom: 0; }
.picker-row.on { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.picker-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.picker-name { font-weight: 600; }
.picker-no { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.picker-meta { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .picker-row { grid-template-columns: auto 1fr; } .picker-no, .picker-meta { grid-column: 2; } }

/* 계약 — 네이버웍스 서약서처럼: 화면 탭 · 상태 건수 · 거르기 · 고른 것 한꺼번에 · 진행 단계 */
.seg { display: inline-flex; gap: 2px; padding: 3px; margin: 2px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); }
.seg button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 16px; font-weight: 600; }
.seg button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.kpi:hover { border-color: var(--line-strong); }
.kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kpi-n { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-l { color: var(--muted); font-size: .85rem; }
.kpi-progress .kpi-n { color: var(--accent); }
.kpi-returned .kpi-n { color: var(--warn); }
.kpi-signed .kpi-n { color: var(--ok); }
.filters { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); margin-bottom: 8px; }
.filters input[type=search] { flex: 1 1 10em; }
.filters input[type=date] { font: inherit; font-size: .88rem; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--text); }
.bulkbar { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 34px; margin-bottom: 6px; }
.status-table th.chk, .status-table td.chk { width: 32px; }
.status-table td.chk input, .status-table th.chk input { width: 17px; height: 17px; accent-color: var(--accent); }
.status-table tr.on td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.chip.nw-draft { color: var(--muted); }
.chip.nw-approved { border-color: var(--line-strong); color: var(--text); }
.chip.nw-progress { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.chip.nw-returned { border-color: var(--warn); color: var(--warn); }
.chip.nw-signed { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--panel)); }
.chip.nw-cancelled { color: var(--muted); text-decoration: line-through; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 16px; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.steps li { flex: 1 1 110px; display: grid; justify-items: center; gap: 3px; position: relative; padding: 0 4px; text-align: center; }
.steps li + li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; }
.steps li.done + li::before, .steps li.done + li.done::before { background: var(--accent); }
.steps .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--panel); font-size: .8rem; font-weight: 700; color: var(--muted); }
.steps li.done .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.steps li.now .dot { border-color: var(--accent); color: var(--accent); }
.steps li.stop .dot { border-color: var(--warn); color: var(--warn); }
.steps.stopped li.stop .dot { border-color: var(--danger); color: var(--danger); }
.steps .lbl { font-weight: 600; font-size: .88rem; }
.steps .when { color: var(--muted); font-size: .76rem; }
.steps li.now .when { color: var(--accent); }
@media (max-width: 640px) { .steps li { flex-basis: 33%; margin-bottom: 8px; } .steps li + li::before { display: none; } }
.sign-bar { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 -4px 16px rgba(31, 30, 27, .08); }
.sign-bar.done { position: static; box-shadow: none; border-color: var(--ok); }
.sign-btn { min-width: 8em; font-weight: 700; }

/* ───────────────────────────────────────────────────────────────────────────
   네이버웍스 톤 리뉴얼(2026-10-24 Henry) — 흰 바탕 · 옅은 회색 선 · 초록 강조 · 고딕 제목 · 인사관리 왼쪽 메뉴.
   위의 규칙을 덮어쓴다(나중 규칙이 이긴다). 초록은 흰 글자 대비 4.5:1 을 맞추려 조금 짙게.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #f3f5f7; --panel: #ffffff; --panel-2: #f8f9fa; --text: #1e2124; --muted: #6b7280; --line: #e5e7eb; --line-strong: #d1d5db;
  --accent: #078a49; --accent-hover: #06773f; --accent-weak: #e8f6ee; --accent-text: #ffffff;
  --warn: #9a5b00; --warn-bg: #fff6e5; --danger: #d13b2e; --ok: #078a49; --ok-bg: #e8f6ee;
  --radius: 8px; --radius-sm: 6px; --gap: 16px; --shadow: none;
  --serif: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16181b; --panel: #1f2226; --panel-2: #24282d; --text: #e7e9ec; --muted: #9aa1ab; --line: #30353b; --line-strong: #3d434a;
    --accent: #2fc26f; --accent-hover: #45d083; --accent-weak: #16301f; --accent-text: #0e1a12;
    --warn: #f0b45a; --warn-bg: #33270f; --danger: #ff7b6e; --ok: #2fc26f; --ok-bg: #16301f; }
}
body { font-size: 14px; letter-spacing: -0.01em; }
h1, h2, h3, h4, .brand-app, .tpl-name, .me-head h2, .card h3 { font-family: var(--serif); letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 머리 · 메뉴 */
header#app-head { padding: 0 20px; height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: none; }
.brand-app { border-left-color: var(--line); color: var(--text); font-weight: 700; }
.tabs { padding: 0 20px; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.tabs a { padding: 14px 16px 12px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current=page] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs .count { background: var(--danger); }
main { max-width: 1320px; padding: 20px; }

/* 단추: 주 동작은 초록 채움, 나머지는 흰 바탕 · 회색 테두리 */
button, .button { border-radius: 6px; font-weight: 600; padding: 7px 14px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); box-shadow: none; }
button:hover:not(:disabled), .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
button.ghost, .button.ghost { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
button.ghost:hover:not(:disabled), .button.ghost:hover { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
button.danger, .button.danger, button.ghost.danger { color: var(--danger); }
button.small, .button.small { padding: 4px 10px; font-size: .82rem; }
input[type=search], input[type=text], input[type=email], input[type=date], input[type=month], input[type=tel], input:not([type]), select, textarea { border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }

/* 판 · 카드 */
.panel, .card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: none; }
.panel { padding: 20px 24px; }
.lede { color: var(--muted); }
.flash { background: var(--accent-weak); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.flash.error { background: var(--warn-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }

/* 인사관리: 왼쪽 메뉴(네이버웍스 관리자처럼) — 넓은 화면에서만 */
@media (min-width: 900px) {
  #tab-admin:not([hidden]) { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 16px; align-items: start; }
  #tab-admin > .subnav { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 16px; flex-direction: column; gap: 2px; margin: 0; padding: 10px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; }
  #tab-admin > section { grid-column: 2; margin-bottom: 0; }
  #tab-admin > .subnav button { text-align: left; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-weight: 500; }
  #tab-admin > .subnav button:hover { background: var(--panel-2); }
  #tab-admin > .subnav button[aria-selected=true] { background: var(--accent-weak); color: var(--accent); font-weight: 700; }
}
@media (max-width: 899px) {
  .subnav button { border-radius: 999px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); }
  .subnav button[aria-selected=true] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
}

/* 표 */
.table-wrap { border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
th { background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: .82rem; border-bottom: 1px solid var(--line); padding: 10px 12px; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }

/* 상태 표시: 옅은 바탕 알약 */
.chip { border: 0; border-radius: 4px; padding: 2px 8px; font-weight: 600; font-size: .78rem; background: var(--panel-2); color: var(--muted); }
.chip.nw-draft { background: #f1f3f5; color: #5b6470; }
.chip.nw-approved { background: #eef2ff; color: #3b4fd1; }
.chip.nw-progress { background: var(--accent-weak); color: var(--accent); }
.chip.nw-returned { background: var(--warn-bg); color: var(--warn); }
.chip.nw-signed { background: #e9f2fd; color: #1f5fbf; }
.chip.nw-cancelled { background: #f6f6f6; color: #9aa0a6; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .chip.nw-draft, .chip.nw-cancelled { background: #2a2e33; color: #a5adb7; }
  .chip.nw-approved { background: #222844; color: #9aa8ff; }
  .chip.nw-signed { background: #1b2a3e; color: #8dbbf6; }
}
.badge { border-radius: 4px; border-color: var(--line); }

/* 계약 현황 */
.seg { border-radius: 8px; background: var(--panel-2); border-color: var(--line); }
.seg button { border-radius: 6px; padding: 7px 18px; color: var(--muted); }
.seg button[aria-selected=true] { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.kpi { border-radius: var(--radius); padding: 14px 16px; }
.kpi-n { font-size: 1.6rem; }
.kpi.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-weak); }
.filters { background: var(--panel); }
.steps { background: var(--panel); }
.steps li.done .dot { background: var(--accent); border-color: var(--accent); }

/* 문서 본문 · 대화상자 */
.doc { font-family: var(--serif); line-height: 1.8; padding: 32px 40px; border-radius: var(--radius); box-shadow: none; }
dialog { border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(0, 0, 0, .16); }
.dialog-body h2 { font-size: 1.2rem; }

/* 카드(계약 서류 · 인사 정보) */
.tpl-card { gap: 10px; }
.tpl-name { font-size: 1.02rem; font-weight: 700; }
.tpl-add { background: var(--panel); border-style: dashed; }
.me-head h2 { font-size: 1.4rem; }
.card h3 { font-size: 1rem; }

/* 내 정보: 할 일 · 탭 */
.todo { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-weak); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.todo h3 { margin: 0 0 8px; font-size: .95rem; }
.todo-list { display: grid; gap: 6px; }
.todo-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-weight: 500; font-size: .9rem; cursor: pointer; text-decoration: none; }
.todo-item:hover { border-color: var(--accent); text-decoration: none; background: var(--panel); }
.todo-item.muted-item { cursor: default; color: var(--muted); }
.todo-k { flex: none; padding: 1px 8px; border-radius: 4px; background: var(--accent); color: var(--accent-text); font-size: .75rem; font-weight: 700; }
.profile-tabs { display: flex; width: 100%; overflow-x: auto; margin: 0 0 14px; }
.profile-tabs button { flex: 1 0 auto; }
.tab-pane > .card:first-child, .tab-pane > dl:first-child { margin-top: 0; }
details.help { margin: 0 0 12px; font-size: .85rem; color: var(--muted); }
details.help summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-weight: 600; list-style: none; }
details.help summary::before { content: 'ⓘ'; }
details.help summary::-webkit-details-marker { display: none; }
details.help[open] p { margin: 6px 0 0; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
/* 아직 불러오는 중인 화면 */
[id$="-box"]:empty::before, #me-profile:empty::before, #person-view:empty::before { content: '불러오는 중…'; display: block; padding: 24px 4px; color: var(--muted); }

/* 탭(.seg) 위에 마우스를 올리면 초록 바탕 + 흰 글자 — 회색 글자가 초록 위에서 안 보이던 것 */
.seg button:hover:not(:disabled):not([aria-selected=true]) { background: var(--accent); color: #fff; }
.seg button[aria-selected=true]:hover { background: var(--panel); color: var(--text); }

/* 연봉 › 추천 연봉 계산 순서(① 테이블 → ② 점수 → ③ 등급 → ④ 인상률 → ⑤ 추천 연봉) */
.flow { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px 16px; margin: 0 0 14px; }
.flow-steps { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.flow-step { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); }
.flow-arrow { align-self: center; color: var(--accent); font-weight: 700; }
.flow-no { color: var(--accent); font-weight: 700; margin-right: 6px; }
.rule-row { display: flex; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.rule-row input { margin: 2px 2px; }
ol.calc { list-style: none; padding: 0; display: grid; gap: 10px; }
ol.calc li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
@media (max-width: 700px) { .flow-arrow { display: none; } }

/* 날짜 고르기(datepicker.js) — 큰 한국어 달력 */
@media (pointer: fine) {
  input[type=date]::-webkit-calendar-picker-indicator { display: none; }
  input[type=date] { cursor: pointer; min-width: 9.5em; }
}
.datepicker { position: fixed; z-index: 1000; width: 340px; max-width: calc(100vw - 16px); padding: 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dp-head select { flex: 1; font: inherit; font-weight: 600; padding: 6px 8px; }
.datepicker .dp-nav { width: 36px; height: 36px; padding: 0; font-size: 1.3rem; line-height: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: .82rem; color: var(--muted); padding: 4px 0 6px; font-weight: 600; }
.datepicker .dp-day { height: 40px; padding: 0; font: inherit; font-size: .95rem; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 8px; }
.dp-wd.sun, .datepicker .dp-day.sun { color: #d33; }
.dp-wd.sat, .datepicker .dp-day.sat { color: #2563eb; }
.datepicker .dp-day:hover:not(:disabled) { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.datepicker .dp-day.today { border-color: var(--accent); font-weight: 700; }
.datepicker .dp-day.sel, .datepicker .dp-day.sel:hover { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.datepicker .dp-day:disabled { opacity: .3; cursor: default; }
.datepicker .dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.datepicker .dp-link { background: transparent; color: var(--accent); border: 0; padding: 6px 10px; font-weight: 600; }
.datepicker .dp-link:hover:not(:disabled) { background: var(--panel-2); color: var(--accent); }
.datepicker .dp-link:disabled { color: var(--muted); }

/* 인사평가 결과 한눈에 보기 — 요약 카드 · 막대 · 상급자 · 동료 · 하급자 나란히 · 추천평가 */
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.sum-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.sum-card .sum-value { font-size: 1.5rem; line-height: 1.2; }
.sum-card.accent { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.sum-card.accent .sum-value { color: var(--accent); }
.sum-card.star .sum-value { color: #c88a04; }
.compare { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
.compare h4 { margin: 0 0 8px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 9em) 1fr 2.6em; align-items: center; gap: 8px; padding: 3px 0; font-size: .88rem; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.k-self { background: #8b95a1; } .k-down { background: #078a49; } .k-peer { background: #2563eb; } .k-up { background: #d97706; }
.side-avg.k-self, .side-avg.k-down, .side-avg.k-peer, .side-avg.k-up { background: none; }
.side-avg { font-size: 1.4rem; font-weight: 700; }
.side-avg.k-down { color: #078a49; } .side-avg.k-peer { color: #2563eb; } .side-avg.k-up { color: #d97706; }
.sides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .sides { grid-template-columns: 1fr; } }
.side-col { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.side-col .bars { margin: 6px 0; }
.side-col .bar-row { grid-template-columns: minmax(70px, 9.5em) 1fr 2.2em; }
.side-comments summary { cursor: pointer; font-size: .86rem; color: var(--accent); }
.kudos-box { padding: 12px 14px; border: 1px solid #f0d58a; border-radius: 8px; background: color-mix(in srgb, #f5c542 9%, var(--panel)); margin-bottom: 16px; }
.kudos-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.kudos-card { margin: 0; padding: 10px 12px; border-left: 3px solid #e0a810; background: var(--panel); border-radius: 0 6px 6px 0; }
.kudos-card p { margin: 0 0 4px; }
.result-more summary { cursor: pointer; color: var(--accent); }
@media (max-width: 560px) {
  .sum-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-card .sum-value { font-size: 1.2rem; }
  .bar-row, .side-col .bar-row { grid-template-columns: 8.5em 1fr 2.2em; }
}
.pick-list { list-style: none; padding: 0; margin: 8px 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.pick-list li { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pick-list li:last-child { border-bottom: 0; }

/* 역량 육각형 · 우수 사원 */
.result-top { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 12px; align-items: start; margin-bottom: 16px; }
.result-top .compare { margin-bottom: 0; }
@media (max-width: 760px) { .result-top { grid-template-columns: 1fr; } }
.axes-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.axes-box h4 { margin: 0 0 4px; }
.radar { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-grid.outer { stroke: var(--line-strong); }
.radar-company { fill: none; stroke: #8b95a1; stroke-width: 1.5; stroke-dasharray: 4 3; }
.radar-me { fill: rgba(7, 138, 73, .22); stroke: #078a49; stroke-width: 2; }
.radar-dot { fill: #078a49; }
.radar-label { font-size: 12px; fill: var(--text); }
.radar-val { font-weight: 700; fill: #078a49; }
.legend { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border-radius: 2px; }
.legend.me { background: rgba(7, 138, 73, .35); border: 2px solid #078a49; }
.legend.company { border: 2px dashed #8b95a1; }
.highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 16px; }
@media (max-width: 760px) { .highlights { grid-template-columns: 1fr; } }
.hl-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.hl-card.star { border-color: #f0d58a; background: color-mix(in srgb, #f5c542 9%, var(--panel)); }
.hl-card h4 { margin: 0 0 8px; }
.hl-list { list-style: none; padding: 0; margin: 0; }
.hl-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hl-list li:last-child { border-bottom: 0; }
.hl-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hl-star { color: #c88a04; }
.rank { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; background: var(--panel-2); color: var(--muted); }
.rank.r1 { background: #f5c542; color: #4a3500; } .rank.r2 { background: #d5d9de; color: #333; } .rank.r3 { background: #e7b98a; color: #4a2a00; }
.hl-note { grid-column: 1 / -1; margin: 0; }
button.linklike { background: none; border: 0; padding: 0; color: var(--text); font-weight: 600; cursor: pointer; }
button.linklike:hover { color: var(--accent); background: none; text-decoration: underline; }

/* 징계 */
#tab-discipline { max-width: 900px; margin: 0 auto; }
.disc-sec { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.disc-sec h3 { margin: 0 0 8px; font-size: 1rem; }
.disc-ev { padding: 8px 12px; margin: 6px 0; border-left: 3px solid var(--line-strong); background: var(--panel-2); border-radius: 0 6px 6px 0; }
.disc-ev p { margin: 0 0 4px; }
.disc-ev.defense { border-left-color: #2563eb; }
.disc-ev.minutes { border-left-color: var(--accent); }
.notice-doc .doc-title { text-align: center; letter-spacing: .3em; }
.notice-doc .doc-sign { text-align: right; margin-top: 40px; }
@media print {
  body:has(dialog.print-area[open]) > *:not(dialog) { display: none !important; }
  dialog.print-area { position: static; border: 0; box-shadow: none; max-width: none; width: 100%; }
  dialog.print-area::backdrop { background: none; }
  .no-print, dialog.print-area .dlg-x { display: none !important; }
}

/* 파일 미리보기 — 화면 가득, 보는 사람 이름 워터마크 */
dialog.preview-dlg { width: min(1000px, 96vw); height: 92vh; max-height: 92vh; padding: 0; display: flex; flex-direction: column; }
dialog.preview-dlg[open] { display: flex; }
dialog.preview-dlg > .dlg-x { display: none; }
.preview-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.preview-tools { margin-left: auto; display: flex; gap: 6px; }
/* PDF(iframe)는 창 아래까지 채운다 — height: 100% 는 Safari(WebKit)에서 풀리지 않아 아래가 비었음(2026-10-29) */
.preview-body { position: relative; flex: 1; min-height: 0; background: #525659; overflow: auto; display: flex; flex-direction: column; }
.preview-body.is-pdf { overflow: hidden; }
.preview-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: #fff; }
.preview-img { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.preview-mark { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; transform: rotate(-24deg) scale(1.4); opacity: .10; font-size: 15px; font-weight: 700; color: #000; user-select: none; }
.preview-mark.strong { opacity: .16; color: #b00020; }
.preview-mark span { padding: 26px 30px; white-space: nowrap; }
.preview-btn { margin-left: 6px; }
.kpi-overdue .kpi-n { color: var(--danger); }

/* 인사관리 › 요약 */
.sum-group { margin-bottom: 14px; }
.sum-group h3 { font-size: .95rem; margin: 0 0 6px; }
a.sum-card { text-decoration: none; }
a.sum-card:hover { color: var(--text); }
.sum-card.sum-zero { opacity: .5; }
.sum-card.sum-act .kpi-n { color: var(--accent); }
.sum-card.sum-warn .kpi-n { color: var(--warn); }
.sum-note { color: var(--muted); font-size: .75rem; line-height: 1.3; }
.sum-group .kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* 사람 동그라미(네이버웍스 사진 · 없으면 이름 글자) */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--accent-weak); color: var(--accent); font-weight: 600; vertical-align: middle; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 28px; height: 28px; font-size: .72rem; }
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; }
.with-avatar { display: inline-flex; align-items: center; gap: 8px; }
li.with-avatar { display: flex; flex-wrap: wrap; }
.head-who { display: flex; align-items: center; gap: 12px; }

/* 조직도 — 조직 카드 · 구성원 사진 */
#org-tree.tree ul.org-children { margin-left: 14px; border-left: 2px solid var(--line); padding-left: 14px; }
#org-tree .org-node { padding: 5px 0; }
.org-card { border: 1px solid var(--line); border-radius: 0; background: var(--panel); padding: 10px 12px; } /* 모서리 각지게(Henry 2026-10-25) */
.org-card.depth-0 { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.org-card.depth-1 { box-shadow: inset 3px 0 0 var(--line-strong); }
.org-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.org-toggle { border: 0; background: none; color: var(--muted); padding: 0 2px; cursor: pointer; font-size: .9rem; line-height: 1; }
.org-toggle:hover { color: var(--text); background: none; }
.org-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.org-person { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); text-decoration: none; min-width: 0; }
.org-person:hover { background: var(--accent-weak); color: var(--text); }
.org-person.is-manager { background: var(--accent-weak); }
.org-person .avatar-sm { width: 32px; height: 32px; }
.org-person-text { display: flex; flex-direction: column; min-width: 0; }
.org-person-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-person-sub { color: var(--muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-node.removed .org-card { opacity: .6; }
.org-person.is-manager .avatar { background: var(--panel); }
@media (max-width: 600px) { #org-tree.tree ul.org-children { margin-left: 4px; padding-left: 8px; } .org-card { padding: 8px 10px; } }
/* 평가 결과 칸 수 · 비공개(Henry 2026-10-25) */
.sides.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sides.n-1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .sides.n-2, .sides.n-1 { grid-template-columns: 1fr; } }
.side-col.compact { align-self: start; }
.side-col.compact p { margin: 4px 0 0; }
.side-private { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.compare .bar-row { grid-template-columns: minmax(90px, 9em) 1fr 3.4em; }
/* 10점 척도(Henry 2026-10-25) — 칸을 조금 줄이고 좁으면 두 줄 */
.scale.scale-10 { flex-wrap: wrap; }
.scale.scale-10 label { width: 30px; height: 30px; }

/* 올해 휴가(2026-10-26) */
.leave-card { margin-bottom: 14px; }
.leave-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.leave-num { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.leave-v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.leave-l { color: var(--muted); font-size: .8rem; }
.leave-num.used .leave-v { color: var(--warn); }
.leave-num.left .leave-v { color: var(--accent); }
.leave-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.leave-table th, .leave-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.leave-table th:first-child, .leave-table td:last-child { text-align: left; }
/* 근무(출퇴근, 2026-10-26) */
.work-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 8px; }
.work-week { display: grid; grid-template-columns: auto minmax(120px, 220px); align-items: center; gap: 8px; }
.work-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bar-fill.warn { background: var(--warn); }
@media (max-width: 600px) { .work-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flex-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; margin: 6px 0; }

/* 오늘 근태(2026-10-26) */
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.team-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--text); font-size: .85rem; cursor: pointer; }
.team-chip-n { font-size: 1.15rem; font-weight: 700; }
.team-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.team-chip.k-in .team-chip-n { color: var(--ok); }
.team-chip.k-ready .team-chip-n { color: var(--warn); }
.team-chip.k-away .team-chip-n { color: var(--accent); }
.team-org { margin: 0 0 14px; }
.team-org h4 { margin: 0 0 6px; font-size: .9rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.team-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
.team-person:hover { border-color: var(--accent); }
.team-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.team-who strong, .team-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.chip.k-in { border-color: var(--ok); color: var(--ok); }
.chip.k-ready { border-color: var(--warn); color: var(--warn); }
.chip.k-away { border-color: var(--accent); color: var(--accent); }
.team-person.k-ready { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.team-leave th { white-space: nowrap; }
.team-leave td.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.team-leave .rate { display: inline-flex; align-items: center; gap: 6px; min-width: 110px; }
.team-leave .rate .bar { flex: 1; }
.week-h { color: var(--muted); }
.week-h.over { color: var(--warn); font-weight: 700; }
.team-chip.k-over .team-chip-n { color: var(--warn); }

/* 다가오는 휴가 · 부재(2026-10-27) */
.absence-days { display: flex; flex-direction: column; gap: 0; }
.absence-day { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.absence-day:first-child { border-top: 0; }
.absence-day.today .absence-date { color: var(--accent); }
.absence-date { font-weight: 700; font-size: .88rem; padding-top: 4px; white-space: nowrap; }
.absence-date.sun { color: var(--warn); }
.absence-date.sat { color: #3b6fd8; }
.absence-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.absence-item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: .88rem; }
.absence-item:hover { border-color: var(--accent); }
.absence-item.self { border-color: var(--accent); }
@media (max-width: 560px) { .absence-day { grid-template-columns: 1fr; gap: 4px; } }
.team-leave td.promo { white-space: nowrap; }
.expiring { margin-bottom: 12px; }
.expiring h3 { margin: 0 0 4px; }
.expiring-list li { display: flex; gap: 12px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.expiring-list li > a:first-child { min-width: 6em; font-weight: 600; }