/* Shared visual language, based on the personal home dashboard.
   Legacy utility selectors bridge existing templates without changing behavior.
   Keep status colors, calendar categories and document/email content semantic. */
/* Settlement history: readable messages, with field comparisons on demand. */
.settlement-conversation { display: grid; gap: 20px; margin: 20px 0; }
.settlement-message { min-width: 0; padding-left: 14px; border-left: 2px solid var(--ui-line); }
.settlement-message[hidden] { display: none; }
.settlement-message-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; margin-bottom: 7px; font-size: 12px; color: var(--ui-muted); }
.settlement-message-meta strong { color: var(--ui-ink); font-size: 13px; font-weight: 600; }
.settlement-message-meta time { font-size: 11px; }
.settlement-message-bubble { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 0 13px 13px 13px; background: #f1f5fb; color: var(--ui-ink); }
.settlement-message-note { margin: 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.settlement-message-system { border-left-style: dashed; }
.settlement-message-system .settlement-message-meta strong { color: var(--ui-muted); font-size: 12px; }
.settlement-message-system .settlement-message-bubble { background: var(--ui-line-soft); color: var(--ui-muted); padding: 8px 12px; }
.settlement-message-system .settlement-message-note { font-size: 12px; }
.settlement-message-changes { min-width: 0; font-size: 12px; }
.settlement-message-note + .settlement-message-changes { margin-top: 9px; }
.settlement-message-changes summary { cursor: pointer; color: var(--ui-ink); font-weight: 500; }
.settlement-message-changes summary:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 4px; border-radius: 3px; }
.settlement-message-changes table { background: var(--ui-surface); min-width: 360px; }
@media (max-width: 640px) {
  .settlement-message { padding-left: 10px; }
  .settlement-message-meta time { flex-basis: 100%; }
  .settlement-message-bubble { padding: 10px 12px; }
}
.settlement-message { width: fit-content; max-width: 85%; border: 0; padding: 0; }
.settlement-message-self { justify-self: start; }
.settlement-message-other { justify-self: end; }
.settlement-message-other .settlement-message-meta { justify-content: flex-end; }
.settlement-message-other .settlement-message-meta time { text-align: right; }
.settlement-message-bubble { background: hsl(0 0% var(--message-gray)); border: 1px solid hsl(0 0% calc(var(--message-gray) - 9%)); color: #262626; }
.settlement-message-meta strong { color: #353535; }
.settlement-message-other .settlement-message-bubble { margin-left: auto; border-radius: 13px 0 13px 13px; }
.settlement-message-self-label { font-size: 10px; color: var(--ui-muted); }
.settlement-message-system { --system-bg: #f0f2f6; --system-line: #e0e5ec; --system-ink: #58677c; }
.settlement-message-system[data-auto-tone="warning"] { --system-bg: #fff7e8; --system-line: #f2d9a6; --system-ink: #865719; }
.settlement-message-system[data-auto-tone="success"] { --system-bg: #edf8f1; --system-line: #bedfc9; --system-ink: #296443; }
.settlement-message-system[data-auto-tone="documents"] { --system-bg: #f5f0fc; --system-line: #dbceee; --system-ink: #694394; }
.settlement-message-system[data-auto-tone="erp"] { --system-bg: #edf5ff; --system-line: #c7daf3; --system-ink: #365f95; }
.settlement-message-system .settlement-message-bubble { background: var(--system-bg); border-color: var(--system-line); color: var(--system-ink); }
.settlement-message-system .settlement-message-meta strong { color: var(--system-ink); }
@media (max-width: 640px) {
  .settlement-message { max-width: 94%; padding: 0; }
}
:root {
  --ui-canvas: #edf0f4;
  --ui-surface: #fff;
  --ui-line: #e5e9f0;
  --ui-line-soft: #f0f2f6;
  --ui-ink: #21324b;
  --ui-muted: #738096;
  --ui-primary: #2563eb;
  --ui-primary-ink: #245bc0;
  --ui-primary-soft: #eaf2ff;
  --ui-primary-hover: #dce9ff;
  --ui-primary-border: #afc5e8;
  --ui-radius: 13px;
}
body.app-shell, body.app-auth {
  font-family: 'Noto Sans KR', system-ui, sans-serif;
  background: var(--ui-canvas);
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
body.app-shell .sidebar-main { min-width: 0; padding: 24px 28px; }
.app-topbar, .sidebar-shell { border-color: var(--ui-line); }
.sidebar-group-trigger { font-size: 13px; color: #586982; }
.sidebar-group-trigger.is-active,
.sidebar-flyout a[aria-current=page] { background: var(--ui-primary-soft); color: var(--ui-primary-ink); }
.sidebar-flyout { border-color: var(--ui-line); border-radius: var(--ui-radius); }

.app-page { color: var(--ui-ink); font-size: 13px; line-height: 1.6; }
/* 예산 관리 전체·과제 관리·정산 검토: 큰 화면에서도 읽기 편한 본문 폭 유지.
   좁은 화면은 본문이 줄고 각 표의 기존 최소 폭/가로 스크롤을 유지한다. */
.app-page.finance-page-width { width: 100%; max-width: 1440px; min-width: 0; }
.app-page h1 { font-size: 25px; line-height: 1.4; letter-spacing: -.8px; font-weight: 700; color: var(--ui-ink); }
.app-page h2 { color: var(--ui-ink); font-size: 14px; font-weight: 700; }
.app-page h3 { color: var(--ui-ink); font-size: 13px; font-weight: 700; }
.app-page h1 + p { font-size: 13px; color: var(--ui-muted); margin-top: 6px; }
.app-page .page-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.app-page :is(.text-gray-800, .text-gray-900) { color: var(--ui-ink); }
.app-page .text-gray-700 { color: #52647b; }
.app-page :is(.text-gray-400, .text-gray-500) { color: var(--ui-muted); }
.app-page :is(.border-gray-200, .border-gray-300) { border-color: var(--ui-line); }
.app-page .border-gray-100 { border-color: var(--ui-line-soft); }
.app-page :where(div, section, form, article, details).bg-white:where(.rounded-xl, .rounded-2xl) {
  border-radius: var(--ui-radius);
  border-color: var(--ui-line);
  box-shadow: none;
}
.app-page :where(div, section, form, article).bg-white:where(.p-6, .p-5) { padding: 18px; }
.app-page :where(.divide-gray-100, .divide-gray-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-line-soft); }

.app-page :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea).border {
  border-color: var(--ui-line); border-radius: 8px; font-size: 13px; line-height: 1.5;
}
.app-page :where(input,select,textarea):disabled { background: #f3f5f9; color: var(--ui-muted); cursor: not-allowed; }
.app-page :where(input,textarea)::placeholder { color: #8a97aa; }
.app-page :where(input[type=checkbox],input[type=radio]) { accent-color: var(--ui-primary); }
.app-page :where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.app-page :where(input,select,textarea)[aria-invalid=true] { outline-color: #dc2626; border-color: #dc2626; }
.app-page :where(button:disabled,a[aria-disabled=true]) { opacity: .45; cursor: not-allowed; }
.app-page :where(table):not(.notice-email-body table) { font-size: 12px; }
.app-page :where(thead):not(.notice-email-body thead) { background: #f7f9fc; color: #586982; }
.app-page :where(th):not(.notice-email-body th) { font-size: 11px; font-weight: 500; }
.app-page :where(.overflow-x-auto) { overscroll-behavior-x: contain; }
.app-page :where(dialog, [role=dialog]) { border-color: var(--ui-line); border-radius: var(--ui-radius); }
.app-page .notice-email-body { color: #374151; font-size: 14px; }
.app-page .application-layout { gap: 16px; }
.app-page .application-layout > form { min-width: 0; }
.app-auth { padding: 24px 16px; }
.app-auth h1 { font-size: 18px; letter-spacing: -.4px; }

@media (max-width: 767px) {
  body.app-shell .sidebar-main { padding: 20px 16px; }
  .app-page h1 { font-size: 23px; }
  .app-page .page-heading { align-items: flex-start; }
  .app-page :where(div,section,form,article).bg-white:where(.p-6,.p-5) { padding: 14px; }
  .app-auth h1 { font-size: 18px; }
  .app-page .doc-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .app-page .doc-row .doc-label { width: auto; min-width: 0; }
  .app-page .doc-row > .flex-1 { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .app-page .application-layout { flex-direction: column; align-items: stretch; }
  .app-page .application-layout > form { width: 100%; max-width: none; }
  .app-page .application-layout > aside { position: static; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-main, .sidebar-shell, .app-page :where(button,a) { transition: none; }
}

/* Components shared by page content and dialogs outside the main wrapper. */
.review-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.settlement-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.settlement-toolbar .review-shortcuts { margin: 0; }
.settlement-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.settlement-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.settlement-controls:not(:has(> :not([hidden]))) { display: none; }
.settlement-section-heading { display:flex;align-items:center;gap:8px;margin:18px 0 16px; }
.review-shortcuts>[role=status] { display:inline-flex;align-items:center;min-height:34px;line-height:18px; }
.settlement-controls .settlement-filters { flex: 1 1 800px; min-width: 0; }
.settlement-controls .settlement-filters select { max-width: 120px; }
.settlement-controls .settlement-search { flex: 1 1 160px; width: 160px; min-width: 140px; max-width: 240px; }
.application-errors { padding: 12px; border: 1px solid #f5ddd4; border-radius: 8px; color: #9f4530; background: #fff1ed; }
.application-errors button { display: block; margin-top: 6px; text-align: left; text-decoration: underline; }
.settlement-info-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted); cursor: pointer; }
.settlement-info-button:hover { background: var(--ui-primary-soft); color: var(--ui-primary-ink); }
.settlement-status-help { margin: auto; padding: 20px; width: min(620px,calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.settlement-status-help::backdrop { background: #21324b66; }
.settlement-help-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.settlement-status-help section + section { margin-top: 20px; }
.settlement-help-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; margin: 10px 0; }
.settlement-help-flow li { padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-canvas); }
.settlement-help-flow strong,.settlement-help-flow span { display: block; }
.settlement-help-flow span { margin-top: 6px; color: #586982; font-size: 12px; }
.settlement-help-revision { border-left: 3px solid var(--ui-primary-border); padding: 8px 12px; background: var(--ui-primary-soft); border-radius: 0 8px 8px 0; }
.settlement-help-definitions { margin-top: 8px; }
.settlement-help-definitions > div { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.settlement-help-definitions dt { font-weight: 600; }
.settlement-help-definitions dd { margin: 0; color: #586982; }
.settlement-help-note { margin-top: 12px; color: #586982; font-size: 12px; }
@media(max-width:480px) {
  .settlement-status-help { padding: 16px; }
  .settlement-help-flow { grid-template-columns: 1fr; }
  .settlement-help-definitions > div { grid-template-columns: 1fr; gap: 4px; }
}
.settlement-detail-link { color: inherit; font: inherit; text-decoration: none; }
body.app-shell .review-shortcuts button[aria-pressed=true] { --button-bg: var(--ui-primary-soft); --button-border: var(--ui-primary-border); --button-ink: var(--ui-primary-ink); }
.settlement-filters :is(input,select) { min-height: 34px; background: var(--ui-surface); }
.settlement-table { min-width: 980px; table-layout: auto; }
.settlement-table :is(th,td) { white-space: nowrap; }
.settlement-table .settlement-subject { white-space: nowrap; }
.settlement-table .settlement-detail-link { display: inline-block; max-width: clamp(240px,32vw,640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.settlement-table-scroll:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.home-dashboard :is(.home-action-body small,.home-event-body small,.home-settlement-meta,.home-panel-footer,.home-budget-caption,.home-salary-caption) { font-size: 12px; }
@media(max-width:767px) {
  .application-layout .application-actions { position: sticky; bottom: 0; z-index: 20; background: var(--ui-surface); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -5px 12px #21324b0a; }
  .application-layout form { padding-bottom: env(safe-area-inset-bottom); }
  .app-page .settlement-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settlement-controls .settlement-filters select { max-width: none; }
  .settlement-controls .settlement-search { max-width: none; width: 100%; min-width: 0; }
  .settlement-filters select { width: 100%; max-width: none; min-width: 0; }
  .settlement-filters input { grid-column: 1/-1; width: 100%; min-width: 0; }
  .settlement-filters [role=status] { text-align: right; white-space: normal; }
}
body:is(.app-shell,.app-auth) .ui-panel {
  background: var(--ui-surface); border-color: var(--ui-line);
  border-radius: var(--ui-radius); box-shadow: none;
}
body:is(.app-shell,.app-auth) .ui-panel-padded { padding: 18px; }
body.app-shell .ui-modal-surface {
  background: var(--ui-surface); border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); box-shadow: 0 16px 40px #21324b1f;
  color: var(--ui-ink); font-size: 13px; line-height: 1.6;
}
body.app-shell .ui-modal-surface :is(h2,h3) { color: var(--ui-ink); font-size: 14px; font-weight: 700; }
body:is(.app-shell,.app-auth) :is(input,select,textarea):focus-visible {
  outline: 2px solid var(--ui-primary); outline-offset: 2px; box-shadow: none;
}
body:is(.app-shell,.app-auth) :is(input,select,textarea)[aria-invalid=true] {
  outline: 2px solid #dc2626; outline-offset: 2px; border-color: #dc2626;
}
.app-page .ui-tabs {
  display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ui-line);
  border-radius: 10px; background: var(--ui-canvas); overflow-x: auto;
  max-width: 100%; align-items: center;
}
.app-page :is(.ui-tab,.ay-tab,.docpm-tab,.overseas-doc-tab) {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-height: 32px; padding: 6px 12px; margin-bottom: 0;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  font-size: 12px; line-height: 18px; font-weight: 600; color: #586982;
  white-space: nowrap; box-shadow: none;
}
.app-page :is(.ui-tab,.ay-tab,.docpm-tab,.overseas-doc-tab):hover { background: #e3eaf4; }
.app-page :is(.ui-tab,.ay-tab,.docpm-tab,.overseas-doc-tab):is([aria-current=page],.border-blue-500,.border-blue-600,.border-indigo-500,.border-indigo-600) {
  background: var(--ui-surface); color: var(--ui-primary-ink);
  border-color: var(--ui-primary-border); font-weight: 700;
}
.app-page .ui-empty {
  padding: 18px; font-size: 12px; line-height: 1.6;
  color: var(--ui-muted); text-align: center;
}
.system-test-page .top { flex-wrap: wrap; }
.system-test-page .system-test-title { margin: 0; }
.system-test-page .scenario-item { border-radius: var(--ui-radius); }
@media(max-width:767px) {
  html.sidebar-unpinned .sidebar-shell:hover,
  html.sidebar-unpinned .sidebar-shell:focus-within { transform: translateX(-100%); }
  html.sidebar-unpinned.sidebar-open .sidebar-shell { transform: translateX(0); box-shadow: 0 16px 40px #21324b1f; }
  html.sidebar-unpinned .sidebar-hover-zone { display: none; }
  .system-test-page main { padding: 20px 16px; }
  body:is(.app-shell,.app-auth) .ui-panel-padded { padding: 14px; }
}

/* 작성 중인 개인 초안: 알림과 동일한 카드 구조, 주황 강조로 구분. */
.draft-panel{min-width:0;width:100%;box-sizing:border-box;background:#fff;border:2px solid #edcba6;border-left:4px solid #c5792a;border-radius:13px;padding:7px 14px;color:var(--ui-ink,#21324b)}
.draft-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:5px}
.draft-panel .draft-panel-heading h2{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:700;line-height:20px;color:#975916}
.draft-count{display:inline-grid;place-items:center;min-width:21px;height:20px;padding:0 5px;border-radius:6px;background:#b97125;color:white;font-size:11px}
.draft-state,.draft-kind{font-size:11px;color:#975916;background:#fff4e6;padding:2px 6px;border-radius:5px;white-space:nowrap}
.draft-list{list-style:none;margin:0;padding:0}
.draft-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f1e5d8;min-width:0}
.draft-title{min-width:0;flex:1;font-size:13px;line-height:19px;color:var(--ui-ink,#21324b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draft-title:hover{text-decoration:underline;color:#975916}.draft-row.is-current .draft-title{font-weight:600}
.draft-time{font-size:11px;color:var(--ui-muted,#738096);white-space:nowrap}
.draft-actions{display:flex;align-items:center;gap:10px;margin-left:6px;flex-shrink:0;font-size:11px;white-space:nowrap}
.draft-actions>a{color:#975916;font-weight:600}.draft-actions form{margin:0}.draft-actions .draft-delete{padding:3px 0;background:transparent;border:0;font-size:11px;color:#b34f43;cursor:pointer}
.draft-panel a:focus-visible,.draft-panel button:focus-visible{outline:2px solid #c5792a;outline-offset:3px}
.draft-form-list,.draft-saved{margin-bottom:16px}.draft-saved{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12px}.draft-saved strong{color:#975916}.draft-saved span{color:var(--ui-muted,#738096)}
@media(max-width:600px){.draft-panel{padding:7px 10px}.draft-row{flex-wrap:wrap;gap:5px 7px}.draft-title{flex-basis:calc(100% - 100px)}.draft-actions{margin-left:auto}.draft-time{padding-left:0}}

/* Salary and schedule use the same surfaces and controls as the home dashboard. */
.salary-notice,.salary-form-section{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:14px 16px;color:var(--ui-muted);font-size:12px}
.salary-notice{border-left:3px solid var(--ui-primary-border)}
.salary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.salary-stat{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:18px;text-align:left;min-width:0}
.salary-stat>div:first-child{font-size:22px;font-weight:700;color:var(--ui-ink);overflow-wrap:anywhere}
.salary-stat>div+div{font-size:12px;color:var(--ui-muted);margin-top:4px}
.salary-year,.schedule-page .schedule-filter{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 12px;font-size:12px;font-weight:600;line-height:18px;border:1px solid var(--ui-line);border-radius:8px;background:#fff;color:var(--ui-muted);white-space:nowrap}
.salary-year.is-active,.schedule-page .schedule-filter[data-active=true]{background:var(--ui-primary-soft);border-color:var(--ui-primary-border);color:var(--ui-primary-ink)}
.salary-year:hover,.schedule-page .schedule-filter:hover{background:var(--ui-primary-hover)}
.schedule-page #member-filter-btn{min-height:34px;font-size:12px;border-radius:8px}
.salary-page .salary-form-section input,.salary-page .salary-form-section select{background:#fff}
@media(max-width:640px){.salary-stats{grid-template-columns:1fr}.salary-stat{padding:14px}.salary-stat>div:first-child{font-size:20px}}

.settlement-toolbar-left,.settlement-control-toggles{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.settlement-controls [hidden]{display:none!important}
.settlement-control-toggles [aria-expanded=true]{background:var(--ui-primary-soft);border-color:var(--ui-primary-border);color:var(--ui-primary-ink)}
.settlement-controls>.settlement-filters{flex:1 0 100%;padding:8px 0}
.settlement-search-panel{display:flex;align-items:center;gap:8px;flex:1 0 100%;padding:4px 0}
.settlement-controls .settlement-search-panel .settlement-search{max-width:480px;flex:1}

/* Compact selection controls sit below the main action hierarchy. */
.salary-year,.schedule-page .schedule-filter{min-height:32px;padding:6px 11px;border-radius:9px;font-weight:600}
.salary-year.is-active,.schedule-page .schedule-filter[data-active=true]{background:#e4edfc;border-color:transparent;color:#245bc0}
.schedule-page .schedule-filter[data-active=false]{background:transparent;border-color:var(--ui-line);color:var(--ui-muted)}

.settlement-control-toggles .settlement-icon-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0}
.settlement-icon-toggle[data-applied=true]::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--ui-primary)}

.settlement-control-toggles .settlement-icon-toggle>svg{width:20px;height:20px;min-width:20px;flex-shrink:0;stroke-width:2;color:#526581}