@import url("./scrollbars.css?v=20260810-1");

:root {
  --wf-green: #20b15a;
  --wf-green-dark: #128545;
  --wf-green-soft: #eaf8ef;
  --wf-ink: #17201b;
  --wf-muted: #6f7a73;
  --wf-line: #e3e9e5;
  --wf-surface: #ffffff;
  --wf-bg: #f5f7f5;
  --wf-danger: #d94d45;
  font-family: "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.wf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.wf-login-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--wf-ink);
  background: var(--wf-bg);
}

.wf-login-card {
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid var(--wf-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(23, 32, 27, .08);
}

.wf-login-brand, .wf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wf-ink);
  text-decoration: none;
}

.wf-login-brand img, .wf-wordmark img { width: 28px; height: 28px; }
.wf-login-brand strong, .wf-wordmark span { font-weight: 850; letter-spacing: -.04em; }
.wf-login-brand small { margin-left: 4px; color: #8b958e; font-size: 10px; font-weight: 750; letter-spacing: .05em; }
.wf-login-heading { margin: 32px 0 24px; }
.wf-login-heading > span { color: var(--wf-green-dark); font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.wf-login-heading h1 { margin: 7px 0 6px; }
.wf-login-heading p { margin: 0; color: var(--wf-muted); font-size: 14px; }
.wf-login-card h1 { margin: 34px 0 24px; font-size: 28px; letter-spacing: -.04em; }
.wf-login-heading h1 { margin: 7px 0 6px; }
.wf-login-form { display: grid; gap: 16px; }
.wf-login-form label, .wf-field, .wf-admin-form > label {
  display: grid;
  gap: 8px;
  color: #465149;
  font-size: 13px;
  font-weight: 750;
}

.wf-login-form input,
.wf-field input,
.wf-field textarea,
.wf-contract-modal footer input,
.wf-admin-form input,
.wf-admin-form select,
.wf-admin-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d8e0da;
  border-radius: 12px;
  outline: none;
  background: #fff;
  color: var(--wf-ink);
}

.wf-field textarea, .wf-admin-form textarea { min-height: 88px; padding: 12px 14px; resize: vertical; }
.wf-login-form input:focus, .wf-field input:focus, .wf-field textarea:focus,
.wf-admin-form input:focus, .wf-admin-form select:focus, .wf-admin-form textarea:focus {
  border-color: var(--wf-green);
  box-shadow: 0 0 0 3px rgba(32, 177, 90, .12);
}

/* iOS Safari는 16px 미만 입력 필드에 포커스하면 화면을 자동 확대한다.
   수동 핀치 확대는 유지하면서 로그인·가입 입력의 자동 확대만 방지한다. */
@media (max-width: 768px) {
  .wf-login-page input:not([type="checkbox"]),
  .wf-login-page select,
  .wf-login-page textarea {
    font-size: 16px !important;
  }
}

.wf-primary-button {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--wf-green);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}
.wf-primary-button:disabled { opacity: .45; cursor: not-allowed; }
.wf-form-message { min-height: 20px; margin: 12px 0 0; color: var(--wf-danger); font-size: 13px; line-height: 1.45; }
.wf-form-message.success { color: var(--wf-green-dark); }
.wf-login-form .wf-login-remember { display: flex; align-items: center; gap: 8px; margin-top: -3px; color: var(--wf-muted); font-size: 12px; font-weight: 650; }
.wf-login-remember input { width: 16px; min-height: 16px; accent-color: var(--wf-green); }
.wf-login-options { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wf-login-options .wf-login-remember { margin-top: 0; cursor: pointer; }
.wf-login-help-link { width: fit-content; margin: -4px auto 0; padding: 3px 0; border: 0; background: transparent; color: #65758b; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wf-login-help-link:hover { color: #347ef4; }
.wf-login-role-note { margin: 4px 0 0; color: #89928c; font-size: 11px; line-height: 1.5; text-align: center; }
.wf-owner-start-link { min-height: 50px; display: flex; align-items: center; justify-content: center; margin-top: -2px; border: 1px solid #bfd5fa; border-radius: 14px; background: #eef5ff; color: #596a83; font-size: 12px; font-weight: 700; text-decoration: none; }
.wf-owner-start-link strong { margin-left: 5px; color: #2e73df; font-size: 13px; }
.wf-owner-start-link:hover { border-color: #91b8f7; background: #e5f0ff; }
.wf-login-account-guide { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin-top: 18px; padding: 13px 14px; border-radius: 13px; background: #f5f7fa; color: #8a95a6; font-size: 10px; line-height: 1.5; }
.wf-login-account-guide > strong { color: #536074; font-size: 10px; }
.wf-login-account-guide > a { grid-column: 1 / -1; width: fit-content; margin-top: 4px; color: #6c7890; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.wf-login-policy-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 20px; }
.wf-login-policy-links a { color: #7f8b9e; font-size: 10px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.wf-login-policy-links a:hover { color: #347ef4; }
.wf-login-policy-links .wf-super-admin-login-link { flex-basis: 100%; width: fit-content; margin-top: 3px; color: #52637c; font-size: 11px; font-weight: 850; text-align: center; text-decoration: none; }
.wf-login-policy-links .wf-super-admin-login-link:hover { color: #246bd5; transform: translateX(2px); }
.wf-platform-admin-note { margin-top: -7px !important; padding: 9px 11px; border-radius: 10px; background: #f3f6fa; color: #7a8799 !important; font-size: 10px !important; }
.wf-platform-admin-note a { color: #347ef4; font-weight: 800; }
.wf-login-page { background: radial-gradient(circle at 50% 34%, #fff 0 12%, transparent 42%), #f2f5fa; }
.wf-unified-login-card { width: min(400px, 100%); padding: 26px 28px 22px; border-color: #e5eaf1; border-radius: 28px; box-shadow: 0 26px 80px rgba(42, 59, 83, .12); }
.wf-unified-login-card .wf-login-brand { display: flex; justify-content: center; }
.wf-unified-login-card .wf-login-brand img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 11px 28px rgba(44, 125, 255, .22); }
.wf-unified-login-card .wf-login-heading { margin: 14px 0 20px; text-align: center; }
.wf-unified-login-card .wf-login-heading h1 { margin: 0 0 4px; color: #17202d; font-size: 29px; font-weight: 780; letter-spacing: -1.3px; }
.wf-unified-login-card .wf-login-heading p { color: #778396; font-size: 13px; }
.wf-unified-login-card .wf-login-form { gap: 11px; }
.wf-unified-login-card .wf-login-form label:not(.wf-login-remember) { color: #4f5b6c; font-size: 12px; font-weight: 650; }
.wf-unified-login-card .wf-login-form input:not([type="checkbox"]) { min-height: 52px; border-color: #dfe6f0; border-radius: 14px; background: #f7f9fc; }
.wf-unified-login-card .wf-login-form input:not([type="checkbox"]):focus { border-color: #3a82f7; background: #edf4ff; box-shadow: 0 0 0 3px rgba(52, 128, 247, .12); }
.wf-unified-login-card .wf-login-form input:not([type="checkbox"]).is-invalid { border-color: #dc5960; background: #fff7f7; box-shadow: 0 0 0 3px rgba(220, 89, 96, .1); }
.wf-unified-login-card .wf-primary-button { min-height: 54px; margin-top: 2px; background: linear-gradient(135deg, #2d78ef, #397fff); box-shadow: 0 12px 25px rgba(52, 125, 244, .22); }
.wf-unified-login-card .wf-login-remember input { accent-color: #347ef4; }
.wf-unified-login-card .wf-login-role-note { margin-top: 5px; color: #909aaa; line-height: 1.7; }
.wf-login-form-compact .wf-login-field { gap: 0 !important; }
.wf-login-form-compact .wf-login-field input { padding: 0 17px; font-size: 14px; font-weight: 650; }
.wf-login-form-compact .wf-login-field input::placeholder { color: #717b8b; opacity: 1; }
.wf-login-form-compact .wf-login-message { min-height: 0; margin: -1px 3px 0; font-size: 11px; }
.wf-login-form-compact .wf-login-message:empty { display: none; }
.wf-login-form-compact .wf-login-options { padding: 1px 2px 0; }
.wf-login-form-compact .wf-login-help-link { margin: -1px auto 1px; color: #347ef4; font-size: 12px; text-decoration: none; }
.wf-login-divider { display: flex; align-items: center; gap: 12px; margin: 5px 0 0; color: #6e7b90; font-size: 11px; font-weight: 800; white-space: nowrap; }
.wf-login-divider::before, .wf-login-divider::after { content: ""; flex: 1; height: 1px; background: #dfe4ec; }
.wf-login-signup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-login-signup-choice { min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 1px solid #cbdcf7; border-radius: 14px; background: #fff; color: #347ef4; font: inherit; text-decoration: none; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.wf-login-signup-choice:hover { border-color: #8cb5f6; background: #f4f8ff; transform: translateY(-1px); }
.wf-login-signup-choice:focus-visible { outline: 3px solid rgba(52, 126, 244, .2); outline-offset: 2px; }
.wf-login-signup-choice strong { overflow: hidden; font-size: 13px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.wf-login-signup-icon { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #347ef4; }
.wf-login-signup-icon.employee { color: #6068e8; }
.wf-unified-login-card .wf-login-policy-links { gap: 8px 12px; margin-top: 14px; }
.wf-unified-login-card .wf-login-policy-links .wf-super-admin-login-link { margin-top: 0; }
.wf-login-modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 20px; }
.wf-login-modal[hidden] { display: none; }
.wf-login-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(19, 28, 42, .48); backdrop-filter: blur(4px); }
.wf-login-modal-dialog { position: relative; width: min(410px, 100%); overflow: hidden; border: 1px solid #e1e7f0; border-radius: 22px; background: #fff; box-shadow: 0 28px 80px rgba(25, 38, 59, .24); }
.wf-login-modal-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 17px; border-bottom: 1px solid #edf0f5; }
.wf-login-modal-dialog > header span { color: #68799a; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.wf-login-modal-dialog > header h2 { margin: 3px 0 0; color: #1e2939; font-size: 20px; }
.wf-login-modal-dialog > header > button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f3f5f8; color: #758196; font-size: 22px; cursor: pointer; }
.wf-login-modal-dialog form { display: grid; gap: 14px; padding: 20px 22px 22px; }
.wf-login-modal-dialog form > p:first-child { margin: 0; color: #6d788a; font-size: 12px; line-height: 1.6; }
.wf-login-modal-dialog label { display: grid; gap: 7px; color: #4f5b6c; font-size: 12px; font-weight: 700; }
/* 같은 로그인 모달 안에서 가입 단계 입력칸은 15px 인데 이 칸만 물려받은 12px 이라
   비밀번호 재설정 화면만 글씨가 작아 보였다. 모달 기준 크기를 여기서 못 박는다. */
.wf-login-modal-dialog input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #dfe6f0; border-radius: 12px; background: #f7f9fc; font: inherit; font-size: 15px; outline: 0; }
.wf-login-modal-dialog input.is-valid { border-color: #1cad62; background: #f3fbf6; box-shadow: 0 0 0 3px rgba(28, 173, 98, .11); }
.wf-login-modal-dialog input.is-mismatch { border-color: #df8540; background: #fff9f3; }
.wf-login-modal-dialog footer { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.wf-login-modal-dialog footer button { min-height: 48px; }
.wf-login-modal-cancel { border: 1px solid #dfe5ed; border-radius: 13px; background: #fff; color: #596579; font: inherit; font-weight: 800; cursor: pointer; }
.wf-login-debug-link, .wf-password-reset-login { color: #347ef4; font-size: 12px; font-weight: 750; text-align: center; }
.wf-login-modal-dialog .wf-form-message { min-height: 0; margin: 0; }
.wf-signup-dialog { width: min(560px, 100%); height: min(690px, calc(100dvh - 40px)); display: flex; flex-direction: column; }
.wf-signup-dialog > .wf-signup-dialog-head { flex: 0 0 auto; padding: 17px 22px 15px; }
.wf-login-modal-dialog .wf-signup-wizard { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; padding: 0; }
.wf-signup-progress { flex: 0 0 auto; padding: 18px 24px 0; }
.wf-signup-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wf-signup-progress strong { color: #505a6c; font-size: 11px; }
.wf-signup-progress span { color: #5364e9; font-size: 11px; font-weight: 900; }
.wf-signup-progress-track { height: 5px; overflow: hidden; margin-top: 10px; border-radius: 99px; background: #e8ebf4; }
.wf-signup-progress-track > i { width: 12.5%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #5364ec, #478cf7); transition: width .24s ease; }
.wf-signup-stage { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 24px 24px 12px; scrollbar-width: thin; scrollbar-color: #cbd0db transparent; }
.wf-signup-stage::-webkit-scrollbar { width: 6px; }
.wf-signup-stage::-webkit-scrollbar-track { background: transparent; }
.wf-signup-stage::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 99px; background: #cbd0db; }
.wf-signup-step { animation: wf-signup-step-in .2s ease both; }
.wf-signup-step[hidden] { display: none; }
.wf-signup-step > span { color: #5364e9; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.wf-signup-step h3 { margin: 13px 0 9px; color: #172033; font-size: clamp(30px, 4vw, 38px); line-height: 1.18; letter-spacing: -.055em; }
.wf-signup-step > p { max-width: 420px; margin: 0 0 26px; color: #758096; font-size: 12px; line-height: 1.65; }
.wf-login-modal-dialog .wf-signup-step label { gap: 9px; color: #465166; font-size: 12px; }
.wf-login-modal-dialog .wf-signup-step label + label { margin-top: 14px; }
.wf-login-modal-dialog .wf-signup-step input { min-height: 58px; padding: 0 16px; border-radius: 15px; background: #f7f9fc; font-size: 15px; font-weight: 750; }
.wf-login-modal-dialog .wf-signup-step input:focus { border-color: #6472ed; background: #fff; box-shadow: 0 0 0 4px rgba(83, 100, 236, .1); }
.wf-signup-password-guide { margin: 10px 0 0 !important; color: #8993a5 !important; font-size: 10px !important; font-weight: 750; }
.wf-signup-password-guide.is-valid { color: #18835e !important; }
.wf-signup-review { display: grid; gap: 0; margin: 0; overflow: hidden; border: 1px solid #e2e6ef; border-radius: 16px; background: #fafbfe; }
.wf-signup-review > div { min-width: 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid #e8ebf2; }
.wf-signup-review > div:last-child { border-bottom: 0; }
.wf-signup-review dt { color: #8992a4; font-size: 10px; font-weight: 800; }
.wf-signup-review dd { overflow: hidden; margin: 0; color: #343c4e; font-size: 12px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.wf-login-modal-dialog .wf-signup-message { flex: 0 0 auto; min-height: 22px; padding: 0 24px; color: #d0525f; font-size: 11px; line-height: 1.45; }
.wf-login-modal-dialog .wf-signup-actions { flex: 0 0 auto; display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; padding: 12px 24px 22px; border-top: 1px solid #edf0f5; }
.wf-signup-actions > button { min-height: 50px; }
.wf-signup-actions > button[hidden] { display: none; }
.wf-signup-actions #workforceSignupPrevious[hidden] + #workforceSignupNext { grid-column: 1 / -1; }
.wf-signup-actions #workforceSignupPrevious[hidden] ~ #workforceSignupSubmit:not([hidden]) { grid-column: 1 / -1; }
.wf-signup-company-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px; border: 2px solid #4b7df0; border-radius: 18px; background: linear-gradient(145deg, #f3f7ff, #eaf2ff); box-shadow: 0 10px 24px rgba(55, 111, 224, .12); }
.wf-signup-company-card > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #347ef4; color: #fff; font-size: 11px; font-weight: 900; }
.wf-signup-company-card div { min-width: 0; }
.wf-signup-company-card small, .wf-signup-company-card strong, .wf-signup-company-card p { display: block; }
.wf-signup-company-card small { color: #6680ad; font-size: 10px; font-weight: 850; }
.wf-signup-company-card strong { overflow: hidden; margin-top: 5px; color: #1d3561; font-size: 20px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.wf-signup-company-card p { margin: 5px 0 0 !important; color: #667897 !important; font-size: 11px !important; }
.wf-signup-company-help { margin: 14px 0 0 !important; padding: 12px 13px; border-radius: 12px; background: #f5f7fa; color: #6f7d91 !important; font-size: 11px !important; line-height: 1.6 !important; }
.wf-signup-document-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wf-login-modal-dialog .wf-signup-document-card { position: relative; min-height: 104px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 15px 16px; overflow: hidden; border: 1px solid #dde5f2; border-radius: 16px; background: #f7f9fc; cursor: pointer; transition: .18s ease; }
.wf-login-modal-dialog .wf-signup-document-card:hover { border-color: #81a8f7; background: #f0f5ff; transform: translateY(-1px); }
.wf-signup-document-card:has(input:valid) { border-color: #53a884; background: #f2fbf6; }
.wf-signup-document-card strong { color: #28354a; font-size: 13px; }
.wf-signup-document-card small { color: #7b8799; font-size: 10px; }
.wf-login-modal-dialog .wf-signup-document-card input { min-height: 0; height: auto; margin-top: 7px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #5364e9; font-size: 10px; font-weight: 750; }
.wf-signup-document-card input::file-selector-button { margin-right: 8px; padding: 7px 9px; border: 0; border-radius: 9px; background: #e6edff; color: #3e64cf; font: inherit; font-weight: 850; cursor: pointer; }
.wf-signup-document-note { margin: 12px 0 0 !important; color: #7b8799 !important; font-size: 10px !important; line-height: 1.55 !important; }
.wf-signup-skip-documents { width: 100%; min-height: 44px; margin-top: 11px; border: 1px solid #dce3ed; border-radius: 13px; background: #fff; color: #647188; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.wf-signup-skip-documents:hover { border-color: #9ab9ed; background: #f5f8ff; color: #376bca; }
@keyframes wf-signup-step-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.wf-password-reset-card { width: min(440px, 100%); }
.wf-password-reset-card .wf-login-heading h1 { font-size: 26px; letter-spacing: -.8px; }
.wf-password-reset-card .wf-form-message.success { margin-bottom: 12px; text-align: center; }
.wf-password-reset-login { display: block; }
.wf-password-reset-login[hidden] { display: none; }
.wf-pro-brand > span { overflow: hidden; color: transparent; background: url("./onharu-app-icon-192.png") center/cover no-repeat; box-shadow: 0 5px 14px rgba(47, 126, 247, .2); }
.wf-network-badge.pending { background: #fff3dc; color: #9d6200; }
.wf-permission-card { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--wf-line); border-radius: 14px; background: #fff; color: var(--wf-muted); font-size: 12px; cursor: pointer; }
.wf-permission-card strong { color: var(--wf-green-dark); font-size: 12px; }

.wf-mobile-page {
  min-height: 100vh;
  margin: 0;
  color: var(--wf-ink);
  background: #e9eeea;
}

.wf-phone-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  position: relative;
  background: var(--wf-bg);
  box-shadow: 0 0 50px rgba(30, 45, 35, .08);
}

.wf-mobile-header {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 22px 0;
}

.wf-text-button,
.wf-sheet-head button,
.wf-contract-modal > header button {
  border: 0;
  background: transparent;
  color: var(--wf-muted);
  font-weight: 750;
  cursor: pointer;
}

.wf-mobile-main { padding: 26px 20px 104px; }
.wf-panel { display: none; }
.wf-panel.active { display: block; }
.wf-greeting span, .wf-section-title span { color: var(--wf-muted); font-size: 14px; font-weight: 700; }
.wf-greeting h1, .wf-section-title h1 { margin: 6px 0 24px; font-size: 28px; letter-spacing: -.045em; }

.wf-clock-card {
  padding: 22px;
  border: 1px solid var(--wf-line);
  border-radius: 22px;
  background: var(--wf-surface);
  box-shadow: 0 10px 32px rgba(28, 49, 35, .05);
}
.wf-clock-top { display: flex; align-items: center; justify-content: space-between; color: var(--wf-muted); font-size: 13px; font-weight: 700; }
.wf-network-badge { padding: 7px 10px; border-radius: 999px; background: #f0f2f0; color: #647068; font-size: 12px; }
.wf-network-badge.allowed { background: var(--wf-green-soft); color: var(--wf-green-dark); }
.wf-network-badge.denied { background: #fff0ef; color: #b83e38; }
.wf-clock { display: block; margin-top: 20px; font-size: clamp(48px, 14vw, 70px); line-height: 1; letter-spacing: -.065em; }
.wf-work-state { display: block; margin-top: 13px; color: var(--wf-muted); font-weight: 700; }

.wf-work-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.wf-work-button {
  min-height: 112px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(23, 32, 27, .08);
}
.wf-work-button.start { background: var(--wf-green); }
.wf-work-button.end { background: #202924; }
.wf-work-button:disabled { background: #cfd6d1; box-shadow: none; cursor: not-allowed; }
.wf-work-button:not(:disabled):active { transform: translateY(1px); }

.wf-leave-button {
  width: 100%;
  min-height: 58px;
  margin-top: 12px;
  border: 1px solid var(--wf-line);
  border-radius: 18px;
  background: #fff;
  color: var(--wf-ink);
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
}

.wf-today-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.wf-today-row div { padding: 16px 18px; border-radius: 16px; background: #edf1ee; }
.wf-today-row span { display: block; color: var(--wf-muted); font-size: 12px; font-weight: 700; }
.wf-today-row strong { display: block; margin-top: 6px; font-size: 18px; }

.wf-bottom-nav {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--wf-line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}
.wf-bottom-nav button { height: 48px; border: 0; border-radius: 14px; background: transparent; color: #8a948d; font-weight: 800; cursor: pointer; }
.wf-bottom-nav button.active { background: var(--wf-green-soft); color: var(--wf-green-dark); }

.wf-contract-list { display: grid; gap: 12px; }
.wf-contract-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--wf-line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.wf-contract-card strong { display: block; font-size: 16px; }
.wf-contract-card small { display: block; margin-top: 7px; color: var(--wf-muted); }
.wf-contract-status { padding: 7px 10px; border-radius: 999px; background: #fff4df; color: #a15c00; font-size: 12px; font-weight: 800; }
.wf-contract-status.completed { background: var(--wf-green-soft); color: var(--wf-green-dark); }
.wf-empty-card { padding: 36px 18px; border: 1px dashed #cad4cd; border-radius: 18px; color: var(--wf-muted); text-align: center; }

.wf-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; }
.wf-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 17, 14, .46); }
.wf-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top)));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #fff;
}
.wf-sheet-handle { width: 42px; height: 5px; margin: 0 auto 16px; border-radius: 99px; background: #d9dfdb; }
.wf-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.wf-sheet-head h2 { margin: 0; font-size: 22px; }
.wf-sheet form { display: grid; min-width: 0; gap: 16px; margin-top: 20px; }
.wf-sheet form > *, .wf-sheet .wf-field, .wf-sheet input, .wf-sheet textarea { min-width: 0; max-width: 100%; }
.wf-leave-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wf-leave-types input { position: absolute; opacity: 0; pointer-events: none; }
.wf-leave-types span { min-height: 46px; display: grid; place-items: center; border: 1px solid var(--wf-line); border-radius: 12px; background: #fff; color: #536057; font-size: 14px; font-weight: 780; cursor: pointer; }
.wf-leave-types input:checked + span { border-color: var(--wf-green); background: var(--wf-green-soft); color: var(--wf-green-dark); }
.wf-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-leave-date-field input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 54px;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--wf-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.wf-leave-date-field input[type="date"]::-webkit-date-and-time-value {
  min-height: 20px;
  margin: 0;
  text-align: left;
}

.wf-contract-modal { position: fixed; z-index: 120; inset: 0; display: grid; grid-template-rows: 62px 1fr auto; background: #fff; }
.wf-contract-modal > header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: env(safe-area-inset-top) 18px 0; border-bottom: 1px solid var(--wf-line); }
.wf-contract-modal > header button { justify-self: start; }
.wf-contract-document { overflow: auto; padding: 30px 22px 48px; }
.wf-contract-document article { max-width: 680px; margin: 0 auto; color: #222a25; line-height: 1.72; }
.wf-contract-document h1 { margin: 0 0 28px; text-align: center; font-size: 24px; }
.wf-contract-document h2 { margin: 28px 0 10px; font-size: 16px; }
.wf-contract-document p { margin: 7px 0; font-size: 14px; }
.wf-contract-document dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; padding: 18px; border-radius: 14px; background: var(--wf-bg); font-size: 14px; }
.wf-contract-document dt { color: var(--wf-muted); }
.wf-contract-document dd { margin: 0; font-weight: 700; }
.wf-contract-modal footer { display: grid; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wf-line); background: #fff; }
.wf-contract-agree { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.wf-contract-agree input { width: 18px; height: 18px; }

.wf-toast {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: calc(94px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(min(100vw, 520px) - 32px);
  transform: translate(-50%, 20px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #172033;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
}
.wf-toast.show { opacity: 1; transform: translate(-50%, 0); }

.wf-admin-page { background: #f4f6f4; }
.wf-admin-content { display: grid; gap: 18px; }
.wf-admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wf-admin-metrics div { padding: 20px; border: 1px solid var(--wf-line); border-radius: 16px; background: #fff; }
.wf-admin-metrics span { color: var(--wf-muted); font-size: 12px; font-weight: 750; }
.wf-admin-metrics strong { display: block; margin-top: 7px; font-size: 26px; }
.wf-admin-tabs { display: inline-flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid var(--wf-line); border-radius: 12px; background: #fff; }
.wf-admin-tabs button { min-height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--wf-muted); font-weight: 800; cursor: pointer; }
.wf-admin-tabs button.active { background: #202924; color: #fff; }
.wf-admin-panel { display: none; }
.wf-admin-panel.active { display: block; }
.wf-contract-admin-grid { display: grid; grid-template-columns: minmax(520px, .95fr) minmax(420px, 1.05fr); gap: 16px; align-items: start; }
.wf-network-admin-grid { display: grid; grid-template-columns: minmax(300px, .62fr) minmax(430px, 1.38fr); gap: 16px; align-items: start; }
.wf-admin-form, .wf-admin-list-card { padding: 22px; border: 1px solid var(--wf-line); border-radius: 18px; background: #fff; }
.wf-admin-form.compact { display: grid; gap: 16px; }
.wf-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.wf-form-head span { color: var(--wf-muted); font-size: 12px; font-weight: 800; }
.wf-form-head h2 { margin: 4px 0 0; font-size: 20px; }
.wf-admin-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wf-admin-field-grid label { display: grid; gap: 7px; color: #4d5851; font-size: 12px; font-weight: 800; }
.wf-admin-field-grid label.span-2 { grid-column: 1 / -1; }
.wf-admin-field-grid em { margin-left: 4px; color: var(--wf-green-dark); font-size: 10px; font-style: normal; }
.wf-admin-field-grid input[readonly] { background: #f3f6f4; font-weight: 800; }
.wf-admin-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.wf-admin-contract-list, .wf-policy-list { display: grid; gap: 10px; }
.wf-admin-contract-item, .wf-policy-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--wf-line); border-radius: 14px; }
.wf-admin-contract-item strong, .wf-policy-item strong { display: block; }
.wf-admin-contract-item small, .wf-policy-item small { display: block; margin-top: 6px; color: var(--wf-muted); }
.wf-admin-contract-actions { display: flex; align-items: center; gap: 8px; }
.wf-admin-status { padding: 6px 9px; border-radius: 999px; background: #f1f3f1; color: #5c685f; font-size: 11px; font-weight: 850; }
.wf-admin-status.sent, .wf-admin-status.viewed { background: #fff4df; color: #9b5b00; }
.wf-admin-status.completed { background: var(--wf-green-soft); color: var(--wf-green-dark); }
.wf-policy-toggle { min-width: 74px; min-height: 34px; border: 1px solid var(--wf-line); border-radius: 10px; background: #fff; color: var(--wf-muted); font-weight: 800; cursor: pointer; }
.wf-policy-toggle:hover, .wf-policy-toggle:focus-visible { border-color: #b9bbf4; color: #4f52d8; outline: 0; }

@media (max-width: 1100px) {
  .wf-contract-admin-grid, .wf-network-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wf-admin-metrics { grid-template-columns: 1fr 1fr; }
  .wf-admin-field-grid { grid-template-columns: 1fr; }
  .wf-admin-field-grid label.span-2 { grid-column: auto; }
}

@media (max-width: 420px) {
  .wf-mobile-main { padding-right: 16px; padding-left: 16px; }
  .wf-work-button { min-height: 104px; font-size: 16px; }
  .wf-login-card { padding: 28px 22px; }
}

/* Workforce admin system */
.wf-admin-page {
  margin: 0;
  background: #f4f6fa;
  color: #171c2b;
  font-family: "Geist", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wf-admin-page *, .wf-admin-page *::before, .wf-admin-page *::after { box-sizing: border-box; }
.wf-pro-shell { min-height: 100vh; }
.wf-pro-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  width: 258px;
  flex-direction: column;
  padding: 24px 18px 20px;
  border-right: 1px solid #e3e7ef;
  background: #fff;
}
.wf-pro-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 8px 18px;
  border-bottom: 1px solid #e7eaf1;
  color: #171c2b;
  text-decoration: none;
}
.wf-pro-brand > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #5d5fef;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(93, 95, 239, .22);
}
.wf-pro-brand-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(47, 126, 247, .22);
}
.wf-pro-brand strong { font-size: 19px; letter-spacing: -.04em; }
.wf-pro-brand small { display: block; margin-top: 2px; color: #929aab; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.wf-pro-nav { display: grid; gap: 4px; margin-top: 20px; }
.wf-pro-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 0 11px;
  border-radius: 9px;
  color: #586174;
  font-size: 13px;
  font-weight: 760;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.wf-pro-nav a:hover { background: #f5f6fb; color: #3e47c8; }
.wf-pro-nav a.active { background: #eff0ff; color: #5053dc; }
.wf-pro-nav a > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: #f5f6fa;
  color: #5961dc;
  font-size: 10px;
  font-weight: 900;
}
.wf-pro-nav a.active > span { background: #5d5fef; color: #fff; }
.wf-pro-nav-disclosure { margin-top: 4px; }
.wf-pro-nav-disclosure summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border-radius: 9px;
  color: #586174;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.wf-pro-nav-disclosure summary::-webkit-details-marker { display: none; }
.wf-pro-nav-disclosure summary:hover { background: #f5f6fb; color: #3e47c8; }
.wf-pro-nav-disclosure summary > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #f5f6fa; color: #5961dc; font-size: 10px; font-weight: 900; }
.wf-pro-nav-disclosure summary strong { font-weight: 760; }
.wf-pro-nav-disclosure summary i { margin-left: auto; font-style: normal; transition: transform .16s ease; }
.wf-pro-nav-disclosure[open] summary i { transform: rotate(180deg); }
.wf-pro-nav-submenu { display: grid; gap: 2px; padding: 3px 0 6px 46px; }
.wf-pro-nav .wf-pro-nav-submenu a { min-height: 32px; padding: 0 10px; color: #7c8494; font-size: 11px; }
.wf-pro-nav-group { margin: 18px 11px 5px; color: #a3a9b7; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.wf-pro-account { margin-top: auto; padding: 14px 0 0; border-top: 1px solid #e7eaf1; }
.wf-pro-account-trigger { width: 100%; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 11px; background: transparent; color: #252b3a; font: inherit; text-align: left; cursor: pointer; }
.wf-pro-account-trigger:hover { background: #f5f6fb; }
.wf-pro-account-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #eef0ff; color: #575adb; font-size: 12px; font-weight: 900; }
.wf-pro-account-copy { min-width: 0; display: block; }
.wf-pro-account-copy strong, .wf-pro-account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-pro-account-copy strong { color: #282e3e; font-size: 12px; }
.wf-pro-account-copy small { margin-top: 3px; color: #8a93a5; font-size: 10px; }
.wf-pro-account-trigger > i { color: #9aa2b2; font-size: 11px; font-style: normal; letter-spacing: 1px; }
.wf-mobile-account-trigger { display: none; }
.wf-pro-main { min-height: 100vh; margin-left: 258px; }
.wf-pro-header {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 34px;
  border-bottom: 1px solid #e3e7ef;
  background: rgba(255, 255, 255, .82);
}
.wf-pro-header p { margin: 0 0 5px; color: #6971dd; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.wf-pro-header h1 { margin: 0; font-size: 25px; letter-spacing: -.045em; }
.wf-pro-header h1 small { margin-left: 5px; color: #737c90; font-size: 12px; letter-spacing: 0; }
.wf-header-account { display: flex; align-items: center; gap: 10px; color: #6f788b; font-size: 12px; font-weight: 750; }
.wf-account-modal-open { overflow: hidden; }
.wf-account-dialog { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 44px); overflow: hidden; border: 1px solid #e1e5ee; border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(20, 27, 44, .25); animation: wf-modal-in .18s ease both; }
.wf-account-dialog-head { min-height: 98px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid #e8ebf2; }
.wf-account-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.wf-account-avatar { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #5d5fef, #7a83ff); color: #fff; font-size: 16px; font-weight: 900; box-shadow: 0 9px 20px rgba(93, 95, 239, .2); }
.wf-account-identity > div { min-width: 0; }
.wf-account-identity small { color: #777ee5; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-account-identity h2 { margin: 4px 0 2px; color: #202637; font-size: 18px; letter-spacing: -.03em; }
.wf-account-identity p { max-width: 300px; overflow: hidden; margin: 0; color: #8a93a5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.wf-account-dialog-head > em { padding: 6px 9px; border-radius: 999px; background: #f0f1ff; color: #5558dc; font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
.wf-account-dialog-head > button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #8b94a6; font-size: 24px; cursor: pointer; }
.wf-account-dialog-head > button:hover { background: #f5f6f9; }
.wf-account-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 10px 18px; border-bottom: 1px solid #edf0f4; background: #fafbfc; }
.wf-account-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: #7b8496; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.wf-account-tabs button.active { background: #fff; color: #5457dc; box-shadow: 0 2px 8px rgba(32, 38, 58, .08); }
.wf-account-panels { max-height: calc(100dvh - 228px); overflow-y: auto; padding: 22px; scrollbar-width: thin; scrollbar-color: #c5cad5 transparent; }
.wf-account-panels::-webkit-scrollbar { width: 7px; }
.wf-account-panels::-webkit-scrollbar-track { background: transparent; }
.wf-account-panels::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 99px; background: #c5cad5; }
.wf-account-panels [data-account-panel][hidden] { display: none; }
.wf-account-form { display: grid; gap: 15px; }
.wf-account-section-title { display: grid; gap: 4px; margin-bottom: 3px; }
.wf-account-section-title strong { color: #272d3d; font-size: 15px; }
.wf-account-section-title > span { color: #858ea0; font-size: 11px; line-height: 1.55; }
.wf-account-section-title > em { width: fit-content; margin-top: 5px; padding: 5px 8px; border-radius: 8px; background: #fff4e8; color: #b16820; font-size: 9px; font-style: normal; font-weight: 850; }
.wf-account-section-title > em.ready { background: #e8f8f1; color: #16835d; }
.wf-account-form > label, .wf-account-field-pair label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 850; }
.wf-account-form input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #dfe3eb; border-radius: 10px; background: #fff; color: #303849; font: inherit; font-size: 12px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.wf-account-form input[readonly] { background: #f5f6f9; color: #747d90; }
.wf-account-form input:focus { border-color: #7072ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .09); }
.wf-account-form input.is-valid { border-color: #25a66f; background: #f6fffa; box-shadow: 0 0 0 3px rgba(37, 166, 111, .08); }
.wf-account-form input.is-invalid { border-color: #de7c58; background: #fffaf7; }
.wf-account-field-pair { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(110px, .5fr); gap: 10px; }
.wf-account-password-status { margin: -4px 0 0; color: #8a93a5; font-size: 10px; font-weight: 750; }
.wf-account-password-status.is-valid { color: #18835e; }
.wf-account-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; }
.wf-account-check input { width: 17px; height: 17px; accent-color: #5d5fef; }
.wf-account-security-note { margin: -2px 0 0; padding: 11px 12px; border-radius: 10px; background: #f4f5ff; color: #6c73cf; font-size: 10px; line-height: 1.55; }
.wf-account-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.wf-account-form-actions > a { margin-right: auto; color: #656bd8; font-size: 10px; font-weight: 800; text-decoration: none; }
.wf-account-logout { min-height: 42px; padding: 0 16px; border: 1px solid #d93646; border-radius: 10px; background: #e34250; color: #fff; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; box-shadow: 0 8px 18px rgba(211, 46, 64, .16); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.wf-account-logout:hover { transform: translateY(-1px); background: #d63242; box-shadow: 0 10px 22px rgba(211, 46, 64, .22); }
.wf-account-logout:focus-visible { outline: 3px solid rgba(227, 66, 80, .2); outline-offset: 2px; }
.wf-pro-content { display: grid; gap: 20px; padding: 24px 34px 54px; }
.wf-outline-button, .wf-primary-button, .wf-text-button {
  min-height: 38px;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.wf-outline-button { padding: 0 15px; border: 1px solid #dce1eb; background: #fff; color: #4f596d; }
.wf-primary-button { padding: 0 18px; border: 1px solid #5d5fef; background: #5d5fef; color: #fff; box-shadow: 0 8px 18px rgba(93, 95, 239, .16); }
.wf-text-button { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: #6269d9; }
.wf-outline-button:disabled, .wf-primary-button:disabled { opacity: .55; cursor: wait; }
.wf-pro-card { border: 1px solid #e1e5ed; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(28, 38, 58, .025); }
.wf-pro-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #ebedf3; }
.wf-pro-card-head span { color: #848ca0; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.wf-pro-card-head h2 { margin: 4px 0 0; font-size: 17px; letter-spacing: -.025em; }
.wf-pro-card-head a { color: #5d5fef; font-size: 11px; font-weight: 800; text-decoration: none; }
.wf-owner-setup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid #d9dcff;
  border-radius: 15px;
  background: linear-gradient(130deg, #f8f8ff 0%, #fff 64%);
  box-shadow: 0 10px 26px rgba(75, 78, 190, .07);
}
.wf-owner-setup-card[hidden] { display: none; }
.wf-owner-setup-copy span { color: #676ade; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.wf-owner-setup-copy h2 { margin: 6px 0 5px; font-size: 18px; letter-spacing: -.03em; }
.wf-owner-setup-copy p { margin: 0; color: #747d90; font-size: 11px; line-height: 1.55; }
.wf-owner-setup-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.wf-owner-setup-progress strong { color: #4f52d3; font-size: 18px; }
.wf-owner-setup-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: #e8e9f5; }
.wf-owner-setup-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d5fef, #7b8cff); transition: width .35s ease; }
.wf-owner-setup-card .wf-primary-button { display: inline-grid; min-width: 118px; place-items: center; text-decoration: none; white-space: nowrap; }
.wf-overview-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wf-overview-metrics article, .wf-employee-metrics article { min-height: 116px; padding: 19px 20px; border: 1px solid #e1e5ed; border-radius: 13px; background: #fff; }
.wf-overview-metrics span, .wf-employee-metrics span { display: block; color: #7d8698; font-size: 11px; font-weight: 800; }
.wf-overview-metrics strong, .wf-employee-metrics strong { display: block; margin-top: 9px; color: #343bc2; font-size: 28px; line-height: 1; }
.wf-overview-metrics small { display: block; margin-top: 10px; color: #a0a7b5; font-size: 10px; }
.wf-overview-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .55fr); gap: 16px; align-items: start; }
.wf-quick-panel { overflow: hidden; }
.wf-quick-panel > a { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #edf0f5; color: #22283a; text-decoration: none; }
.wf-quick-panel > a:last-child { border-bottom: 0; }
.wf-quick-panel > a > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f0f1ff; color: #5659dc; font-size: 10px; font-weight: 900; }
.wf-quick-panel strong, .wf-quick-panel small { display: block; }
.wf-quick-panel strong { font-size: 12px; }
.wf-quick-panel small { margin-top: 4px; color: #9199a9; font-size: 10px; }
.wf-pro-table-wrap { width: 100%; overflow-x: auto; }
.wf-pro-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.wf-pro-table th { height: 42px; padding: 0 14px; border-bottom: 1px solid #e8ebf1; background: #fafbfc; color: #8790a2; font-size: 10px; font-weight: 800; text-align: left; white-space: nowrap; }
.wf-pro-table td { height: 61px; padding: 0 14px; border-bottom: 1px solid #edf0f4; color: #586174; white-space: nowrap; }
.wf-pro-table tbody tr { animation: wf-row-in .22s ease both; }
.wf-pro-table tbody tr:hover { background: #fafaff; }
.wf-pro-table tbody tr:last-child td { border-bottom: 0; }
.wf-pro-table td strong { color: #242a3a; }
.wf-table-empty { height: 130px !important; color: #9aa2b2 !important; text-align: center; }
.wf-table-primary { color: #40495c; }
.wf-state-pill { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border-radius: 999px; background: #f0f2f6; color: #687286; font-size: 10px; font-weight: 850; }
.wf-state-pill.active, .wf-state-pill.contract-completed { background: #e7f8f1; color: #16946b; }
.wf-state-pill.inactive { background: #f1f2f5; color: #8991a0; }
.wf-state-pill.contract-sent, .wf-state-pill.contract-viewed { background: #fff2d9; color: #b16d00; }
.wf-state-pill.contract-draft { background: #eef0ff; color: #595cd9; }
.wf-employee-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 12px; }
.wf-employee-metrics article { min-height: 96px; }
.wf-employee-card { overflow: hidden; }
.wf-table-tools { display: flex; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #e8ebf1; }
.wf-search-box { position: relative; width: min(420px, 100%); }
.wf-search-box span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #6f788b; font-size: 10px; font-weight: 850; }
.wf-search-box input, .wf-table-tools select { height: 38px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #3f485b; font: inherit; font-size: 11px; outline: 0; }
.wf-search-box input { width: 100%; padding: 0 14px 0 54px; }
.wf-table-tools select { min-width: 110px; padding: 0 30px 0 12px; }
.wf-search-box input:focus, .wf-table-tools select:focus { border-color: #7779ef; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
.wf-employee-name { display: flex; align-items: center; gap: 10px; }
.wf-employee-name > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #eef0ff; color: #575adb; font-size: 10px; font-weight: 900; }
.wf-table-edit { min-height: 31px; padding: 0 11px; border: 0; border-radius: 8px; background: #5d5fef; color: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.wf-employee-row-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wf-table-terminate { min-height: 31px; padding: 0 10px; border: 1px solid #edc4c8; border-radius: 8px; background: #fff; color: #b83d49; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.wf-table-terminate:hover { border-color: #df949c; background: #fff6f7; }
.wf-edit-modal[hidden] { display: none; }
.wf-edit-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.wf-edit-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(22, 28, 43, .46); backdrop-filter: blur(3px); }
.wf-edit-dialog { position: relative; width: min(720px, 100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid #e2e5ed; border-radius: 14px; background: #fff; box-shadow: 0 26px 70px rgba(20, 27, 44, .22); animation: wf-modal-in .18s ease both; }
.wf-edit-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e8ebf1; }
.wf-edit-dialog > header span { color: #696fe0; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.wf-edit-dialog > header h2 { margin: 4px 0 0; font-size: 18px; }
.wf-edit-dialog > header button { border: 0; background: transparent; color: #8b94a6; font-size: 24px; cursor: pointer; }
.wf-edit-dialog form { padding: 22px 24px 24px; }
.wf-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.wf-edit-grid label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-edit-grid .wf-field-label { display: inline-flex; align-items: center; gap: 3px; }
.wf-edit-grid label.span-2 { grid-column: 1 / -1; }
.wf-edit-grid input, .wf-edit-grid select { width: 100%; height: 41px; padding: 0 12px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #343c4e; font: inherit; font-size: 11px; outline: 0; }
.wf-edit-grid input:focus, .wf-edit-grid select:focus { border-color: #7476ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
.wf-edit-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 22px; }
.wf-edit-modal.employee-easy-mode { place-items: center start; padding-left: calc(258px + 28px); }
.wf-employee-editor-dialog { transition: width .18s ease, transform .18s ease; }
.wf-employee-editor-dialog.is-easy { width: min(460px, calc(100vw - 326px)); }
.wf-employee-editor-dialog > header { gap: 18px; }
.wf-employee-editor-dialog > header p { margin: 5px 0 0; color: #8a93a5; font-size: 11px; line-height: 1.45; }
.wf-employee-editor-head-actions { display: flex; align-items: center; gap: 10px; }
.wf-employee-editor-close { border: 0; background: transparent; color: #8b94a6; font-size: 24px; cursor: pointer; }
.wf-employee-mode-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #dfe3eb; border-radius: 10px; background: #f5f6f9; }
.wf-employee-editor-dialog > header .wf-employee-mode-switch button { min-width: 68px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #778093; font: inherit; font-size: 12px; line-height: 1; font-weight: 850; white-space: nowrap; cursor: pointer; }
.wf-employee-editor-dialog > header .wf-employee-mode-switch button.active { background: #fff; color: #5255da; box-shadow: 0 2px 7px rgba(32, 38, 58, .08); }
.wf-employee-easy-editor { min-height: 548px; display: flex; flex-direction: column; padding: 22px 26px 24px; }
.wf-easy-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.wf-easy-progress > span { color: #6269d9; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.wf-easy-progress > div { height: 6px; overflow: hidden; border-radius: 99px; background: #eceef5; }
.wf-easy-progress i { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5d5fef, #8284ff); transition: width .2s ease; }
.wf-easy-step { padding: 42px 2px 8px; animation: wf-row-in .2s ease both; }
.wf-easy-step[hidden] { display: none; }
.wf-easy-kicker { color: #6269d9; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.wf-easy-step h3 { margin: 11px 0 10px; color: #1c2232; font-size: 31px; line-height: 1.18; letter-spacing: -.055em; }
.wf-easy-step h3 strong { color: #5053dc; }
.wf-easy-step > p { margin: 0 0 28px; color: #7b8495; font-size: 12px; line-height: 1.65; }
.wf-easy-step > label { display: grid; gap: 8px; color: #566074; font-size: 11px; font-weight: 850; }
.wf-easy-step > label input { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid #dfe3eb; border-radius: 14px; background: #f8f9fc; color: #232a3a; font: inherit; font-size: 16px; font-weight: 760; outline: 0; }
.wf-easy-step > label input:focus { border-color: #6769eb; background: #fff; box-shadow: 0 0 0 4px rgba(93, 95, 239, .1); }
.wf-easy-employment-options { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.wf-easy-employment-options label { position: relative; cursor: pointer; }
.wf-easy-employment-options input { position: absolute; opacity: 0; pointer-events: none; }
.wf-easy-employment-options span { min-height: 64px; display: grid; align-content: center; padding: 12px 15px; border: 1px solid #dfe3eb; border-radius: 13px; background: #fafbfc; }
.wf-easy-employment-options strong, .wf-easy-employment-options small { display: block; }
.wf-easy-employment-options strong { color: #353d50; font-size: 13px; }
.wf-easy-employment-options small { margin-top: 3px; color: #929aaa; font-size: 10px; }
.wf-easy-employment-options input:checked + span { border-color: #6265ea; background: #f0f1ff; box-shadow: inset 0 0 0 1px #6265ea; }
.wf-easy-employment-options input:focus-visible + span { outline: 3px solid rgba(93,95,239,.14); outline-offset: 2px; }
.wf-easy-review { display: grid; gap: 0; margin: 0; border: 1px solid #e1e5ed; border-radius: 15px; background: #fafbfc; }
.wf-easy-review div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #e8ebf1; }
.wf-easy-review div:last-child { border-bottom: 0; }
.wf-easy-review dt { color: #929aaa; font-size: 10px; font-weight: 800; }
.wf-easy-review dd { margin: 0; color: #353d50; font-size: 12px; font-weight: 800; text-align: right; }
.wf-easy-error { min-height: 20px; margin: auto 0 0; color: #d84748; font-size: 11px; font-weight: 750; }
.wf-easy-actions { display: grid !important; grid-template-columns: .7fr 1.3fr; gap: 9px; padding-top: 12px !important; }
.wf-easy-actions[hidden] { display: none !important; }
.wf-easy-actions button { min-height: 48px; }
.wf-easy-actions button:first-child:disabled { visibility: hidden; }
.wf-easy-complete { padding-top: 52px; text-align: center; }
.wf-easy-complete-mark { width: 58px; height: 58px; display: grid; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: #e5f8ef; color: #16a36d; font-size: 25px; font-weight: 900; }
.wf-easy-complete-actions { display: grid; gap: 9px; margin-top: 34px; }
.wf-easy-complete-actions button { min-height: 48px; }
.wf-employee-standard-editor { padding: 0; }
.wf-employee-standard-editor .wf-edit-grid { padding: 22px 24px 0; }
.wf-employee-standard-editor > footer { padding: 0 24px 24px; }
.wf-employee-editor-dialog:not(.is-easy) { width: min(1180px, calc(100vw - 48px)); }
.wf-employee-card-tabs { position: sticky; top: -22px; z-index: 4; display: flex; gap: 6px; margin: -22px -24px 16px; padding: 12px 24px; overflow-x: auto; border-bottom: 1px solid #e7ebf2; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.wf-employee-card-tabs a { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; color: #647086; font-size: 10px; font-weight: 850; text-decoration: none; }
.wf-employee-card-tabs a:hover { background: #eef3ff; color: #4f5fc8; }
.wf-employee-card-section { margin-bottom: 10px; overflow: hidden; border: 1px solid #e4e8ef; border-radius: 10px; background: #fff; }
.wf-employee-card-section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 0; padding: 9px 14px; border-bottom: 1px solid #eaeef4; background: #f7f9fc; }
/* 영문 키커는 장식이라 숨긴다 — 세로 공간만 먹고 정보는 없다. */
.wf-employee-card-section > header > div > span { display: none; }
.wf-employee-card-section > header h3 { margin: 0; color: #283348; font-size: 13px; }
.wf-employee-card-section > header p { margin: 0; color: #7e899b; font-size: 9px; font-weight: 650; }
.wf-employee-photo-editor { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #eaeef4; background: #fbfcff; }
.wf-employee-photo-preview { position: relative; display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 1px solid #dce5f3; border-radius: 14px; background: linear-gradient(145deg,#eaf2ff,#f5f8ff); color: #3478f6; font-size: 14px; font-weight: 900; }
.wf-employee-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.wf-employee-photo-copy strong,.wf-employee-photo-copy small { display: block; }
.wf-employee-photo-copy strong { color: #283348; font-size: 11px; }
.wf-employee-photo-copy small { margin-top: 2px; color: #7e899b; font-size: 8px; line-height: 1.45; }
.wf-employee-photo-actions { display: flex; align-items: center; gap: 7px; }
.wf-employee-photo-actions label { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; margin: 0; cursor: pointer; }
.wf-employee-photo-actions button:disabled { opacity: .42; cursor: default; }
/* 라벨을 입력칸 위가 아니라 왼쪽에 두면 줄 높이가 절반이 된다.
   라벨 사이 텍스트 노드는 익명 그리드 아이템이 되어 첫 칸을 차지한다. */
.wf-employee-standard-editor .wf-employee-card-section .wf-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding: 12px 14px; }
.wf-employee-card-section .wf-edit-grid label { grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 0 8px; font-size: 10px; }
.wf-employee-card-section .wf-edit-grid input,
.wf-employee-card-section .wf-edit-grid select { height: 34px; padding: 0 10px; border-radius: 7px; font-size: 11px; }
/* "휴대전화번호 로그인에 사용 가능" 처럼 부연이 붙은 라벨은 두 줄로 접는다. */
.wf-employee-card-section .wf-edit-grid .wf-field-label { flex-wrap: wrap; gap: 0 3px; line-height: 1.3; }
.wf-employee-card-section .wf-edit-grid .wf-field-label small { flex: 1 0 100%; margin-left: 0; font-size: 8px; }
.wf-sensitive-status { color: #8a94a6; font-size: 9px; font-weight: 700; white-space: nowrap; }
.wf-sensitive-status.ready { color: #158658; }
.wf-sensitive-status:empty { display: none; }
.wf-employee-family-table,.wf-employee-record-table { padding: 10px 14px 2px; overflow-x: auto; }
.wf-employee-family-table table,.wf-employee-record-table table { width: 100%; min-width: 760px; border-collapse: collapse; }
.wf-employee-family-table th,.wf-employee-record-table th { padding: 4px 6px; border-bottom: 1px solid #e4e8ef; color: #6f7a8d; font-size: 9px; text-align: left; white-space: nowrap; }
.wf-employee-family-table td,.wf-employee-record-table td { padding: 3px; border-bottom: 1px solid #eef1f5; }
/* styles.css 가 모든 input 에 height: var(--control-h)(42px) 를 걸어 둔다.
   min-height 로는 이기지 못하므로 height 를 직접 정해야 표가 얄쌍해진다. */
.wf-employee-family-table input,.wf-employee-family-table select,
.wf-employee-record-table input,.wf-employee-record-table select { width: 100%; height: 30px; min-height: 0; padding: 0 7px; border: 1px solid #dfe4ec; border-radius: 6px; background: #fff; font: inherit; font-size: 10px; }
.wf-employee-family-table input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; accent-color: #5d5fef; }
.wf-employee-record-table td:last-child { width: 34px; }
/* 달력에 없는 날짜를 쳤을 때 눈에 띄게 한다. 저장은 서버가 다시 막는다. */
.wf-date-invalid { border-color: #e2867f !important; background: #fff8f7; }
.wf-record-empty { margin: 0; padding: 0 14px 12px; color: #98a1b1; font-size: 10px; }
.wf-record-empty[hidden] { display: none; }

/* 우편번호 검색 — 팝업은 차단될 수 있어 화면 안에 끼워 넣는다. */
.wf-postcode-layer { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(20, 26, 38, .45); }
.wf-postcode-frame { display: grid; grid-template-rows: auto 1fr; width: min(520px, 100%); height: min(560px, 90vh); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 20px 50px rgba(20, 30, 50, .28); }
.wf-postcode-frame > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e8ecf2; color: #283348; font-size: 13px; font-weight: 800; }
.wf-postcode-frame > header button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #f1f3f8; color: #5c6579; font-size: 16px; cursor: pointer; }
.wf-postcode-frame > div { min-height: 0; }

.wf-address-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.wf-address-search button { min-height: 34px; padding: 0 10px; font-size: 10px; white-space: nowrap; }
.wf-employee-card-section .wf-edit-grid .wf-address-search input { width: 100%; }
.wf-employee-card-section .wf-edit-grid input[readonly] { background: #f7f8fb; color: #4a5568; }
.wf-employee-family-remove { width: 26px; height: 26px; border: 0; border-radius: 6px; background: #fff2f3; color: #c64350; font-size: 13px; line-height: 1; cursor: pointer; }
.wf-employee-card-section > .wf-standard-contact-note { margin: 0; padding: 6px 14px 10px; }
.wf-employee-card-footer { position: sticky; bottom: -24px; z-index: 4; margin: 0 -24px -24px; padding: 14px 24px !important; border-top: 1px solid #e4e8ef; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.wf-employee-name button { padding: 0; border: 0; background: transparent; color: #266cce; font: inherit; font-weight: 850; cursor: pointer; }
.wf-employee-name button:hover { text-decoration: underline; }
.wf-standard-contact-note { margin: 14px 24px 0; padding: 11px 13px; border-radius: 10px; background: #f3f4ff; color: #686fd5; font-size: 10px; font-weight: 750; }
.wf-edit-grid .wf-field-label small { margin-left: auto; color: #9aa2b2; font-size: 9px; font-weight: 700; }
@media (max-width: 760px) {
  .wf-employee-photo-editor { grid-template-columns: auto 1fr; }
  .wf-employee-photo-actions { grid-column: 1 / -1; }
  .wf-document-review-list { grid-template-columns: 1fr; }
}
.wf-pro-tabs { display: inline-flex; width: fit-content; gap: 4px; padding: 4px; border: 1px solid #e0e4ec; border-radius: 10px; background: #fff; }
.wf-pro-tabs button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 7px; background: transparent; color: #778093; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.wf-pro-tabs button.active { background: #5d5fef; color: #fff; }
.wf-contract-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-contract-form { padding-bottom: 12px; }
.wf-contract-form .wf-pro-card-head { padding: 13px 16px; }
.wf-contract-form .wf-admin-field-grid, .wf-contract-form.compact > label, .wf-contract-form.compact > button, .wf-contract-form.compact > p { margin-right: 14px; margin-left: 14px; }
.wf-contract-form .wf-admin-field-grid { gap: 7px 9px; margin-top: 10px; }
.wf-contract-form.compact { display: grid; gap: 14px; padding-bottom: 22px; }
.wf-contract-form.compact > label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-contract-form.compact > label:first-of-type { margin-top: 18px; }
.wf-contract-form input, .wf-contract-form select, .wf-contract-form textarea { min-height: 33px; padding: 5px 9px; border-color: #dfe3eb; border-radius: 6px; background: #fff; color: #343c4e; font-family: inherit; font-size: 11px; }
.wf-contract-form textarea { min-height: 52px; resize: vertical; }
.wf-contract-form input:focus, .wf-contract-form select:focus, .wf-contract-form textarea:focus { border-color: #7476ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
.wf-contract-form.wf-validation-attempted input:invalid,
.wf-contract-form.wf-validation-attempted select:invalid,
.wf-contract-form.wf-validation-attempted textarea:invalid { border-color: #df3545; background: #fffafb; }
.wf-contract-form .wf-admin-field-grid label { gap: 3px; color: #596275; font-size: 10px; }
.wf-contract-form .wf-field-title { display: inline-flex; align-items: baseline; min-width: 0; }
.wf-contract-form .wf-field-title em {
  margin-left: 2px;
  color: #df3545;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.wf-contract-form .wf-admin-field-grid input[readonly] { background: #f5f6f9; }
.wf-contract-form .wf-admin-form-actions { gap: 7px; margin-top: 10px; padding: 0 14px; }
.wf-contract-form .wf-admin-form-actions button { min-height: 34px; }
.wf-contract-form .wf-form-message { min-height: 0; margin: 5px 14px; }
.wf-contract-list-card { min-height: 210px; overflow: hidden; }
.wf-contract-list-card .wf-admin-contract-list, .wf-contract-list-card .wf-policy-list { gap: 0; }
.wf-contract-list-card .wf-admin-contract-item, .wf-contract-list-card .wf-policy-item { border: 0; border-bottom: 1px solid #edf0f4; border-radius: 0; }
.wf-contract-list-card .wf-admin-contract-item:last-child, .wf-contract-list-card .wf-policy-item:last-child { border-bottom: 0; }
.wf-admin-page .wf-admin-status { background: #eef0ff; color: #575adb; }
.wf-admin-page .wf-admin-status.sent, .wf-admin-page .wf-admin-status.viewed { background: #fff2d9; color: #a96800; }
.wf-admin-page .wf-admin-status.completed { background: #e7f8f1; color: #16946b; }
.wf-admin-page .wf-policy-toggle:hover, .wf-admin-page .wf-policy-toggle:focus-visible { border-color: #c9cafa; background: #eff0ff; color: #5558dc; }
.wf-admin-page .wf-admin-contract-actions .btn { min-height: 30px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #596275; font-size: 10px; box-shadow: none; }
@keyframes wf-row-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wf-modal-in { from { opacity: 0; transform: scale(.985) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-width: 1180px) {
  .wf-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-overview-grid { grid-template-columns: 1fr; }
  .wf-contract-admin-grid, .wf-network-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 840px) {
  .wf-admin-page { overflow-x: clip; }
  .wf-pro-shell, .wf-pro-sidebar, .wf-pro-main, .wf-pro-header, .wf-pro-content { width: 100%; min-width: 0; max-width: 100%; }
  .wf-pro-sidebar { position: relative; min-height: auto; padding: 12px 62px 10px 14px; }
  .wf-pro-brand { min-height: 44px; border-bottom: 0; padding: 0 4px; }
  .wf-pro-brand-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .wf-pro-brand strong { font-size: 17px; }
  .wf-pro-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    overflow: visible;
  }
  .wf-pro-nav > a {
    min-width: 0;
    min-height: 43px;
    justify-content: center;
    gap: 5px;
    padding: 0 5px;
    font-size: 11px;
    white-space: nowrap;
  }
  .wf-pro-nav a > span { width: 21px; height: 21px; flex: 0 0 21px; font-size: 9px; }
  .wf-pro-nav-disclosure { grid-column: 1 / -1; min-width: 0; margin-top: 0; }
  .wf-pro-nav-disclosure summary { min-height: 43px; padding: 0 9px; }
  .wf-pro-nav-submenu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px 0 0; }
  .wf-pro-nav .wf-pro-nav-submenu a { justify-content: center; min-width: 0; min-height: 34px; padding: 0 4px; font-size: 10px; text-align: center; }
  .wf-pro-nav-group, .wf-pro-account { display: none; }
  .wf-mobile-account-trigger {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dfe3ed;
    border-radius: 12px;
    background: #fff;
    color: #5b5ee2;
    box-shadow: 0 5px 14px rgba(38, 45, 68, .08);
    cursor: pointer;
  }
  .wf-mobile-account-trigger > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eef0ff;
    font-size: 10px;
    font-weight: 900;
  }
  .wf-pro-main { margin-left: 0; }
  .wf-pro-header { min-height: 86px; padding: 18px 20px; }
  .wf-pro-content { padding: 18px 20px 40px; }
  .wf-pro-content > *, .wf-overview-grid > *, .wf-overview-metrics > *, .wf-contract-metrics > *, .wf-employee-metrics > * { min-width: 0; max-width: 100%; }
  .wf-owner-setup-card { grid-template-columns: 1fr auto; }
  .wf-owner-setup-copy { grid-column: 1 / -1; }
  .wf-overview-metrics, .wf-contract-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-employee-metrics { grid-template-columns: repeat(3, 1fr); }
  .wf-edit-modal.employee-easy-mode { place-items: center; padding-left: 22px; }
  .wf-employee-editor-dialog.is-easy { width: min(460px, 100%); }
}
@media (max-width: 600px) {
  #workforceSignupModal { padding: 0; }
  .wf-signup-dialog { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .wf-signup-dialog > .wf-signup-dialog-head { min-height: 74px; padding: max(15px, env(safe-area-inset-top)) 18px 13px; }
  .wf-signup-dialog > .wf-signup-dialog-head h2 { font-size: 18px; }
  .wf-signup-progress { padding: 17px 20px 0; }
  .wf-signup-stage { padding: 25px 20px 12px; }
  .wf-signup-step h3 { margin-top: 14px; font-size: 33px; }
  .wf-signup-step > p { margin-bottom: 25px; font-size: 13px; }
  .wf-login-modal-dialog .wf-signup-step input { min-height: 60px; font-size: 16px; }
  .wf-login-modal-dialog .wf-signup-message { padding: 0 20px; }
  .wf-login-modal-dialog .wf-signup-actions { padding: 12px 20px max(18px, env(safe-area-inset-bottom)); }
  .wf-signup-actions > button { min-height: 54px; font-size: 14px; }
  .wf-signup-review > div { grid-template-columns: 92px minmax(0, 1fr); min-height: 56px; padding: 0 14px; }
  .wf-pro-sidebar { padding-right: 56px; padding-left: 10px; }
  .wf-pro-nav { gap: 4px; }
  .wf-pro-nav > a { gap: 4px; padding: 0 3px; font-size: 10px; letter-spacing: -.02em; }
  .wf-pro-header { min-height: 76px; flex-wrap: wrap; padding: 14px; }
  .wf-pro-header h1 { font-size: 21px; }
  .wf-header-account { min-width: 0; margin-left: auto; }
  .wf-header-account > span { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wf-pro-content { gap: 14px; padding: 14px 14px 34px; }
  .wf-overview-metrics, .wf-contract-metrics, .wf-employee-metrics { grid-template-columns: 1fr 1fr; }
  .wf-overview-metrics article, .wf-employee-metrics article { min-height: 102px; padding: 16px; }
  .wf-overview-metrics strong, .wf-employee-metrics strong { font-size: 25px; }
  .wf-owner-setup-card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .wf-owner-setup-copy { grid-column: auto; }
  .wf-owner-setup-card .wf-primary-button { width: 100%; min-height: 46px; }
  .wf-table-tools { align-items: stretch; flex-direction: column; }
  .wf-table-tools select { width: 100%; }
  .wf-edit-grid, .wf-admin-field-grid { grid-template-columns: 1fr; }
  .wf-edit-grid label.span-2, .wf-admin-field-grid label.span-2 { grid-column: auto; }
  .wf-edit-modal { padding: 10px; }
  .wf-edit-modal.employee-easy-mode { padding: 10px; }
  .wf-employee-editor-dialog { width: 100%; max-height: calc(100dvh - 20px); border-radius: 18px; }
  .wf-employee-editor-dialog > header { align-items: flex-start; padding: 16px; }
  .wf-employee-editor-dialog > header p { display: none; }
  .wf-employee-editor-head-actions { align-items: flex-start; }
  .wf-employee-editor-dialog > header .wf-employee-mode-switch button { min-width: 60px; min-height: 30px; padding: 0 8px; font-size: 11px; }
  .wf-employee-easy-editor { min-height: min(620px, calc(100dvh - 105px)); padding: 18px 18px max(18px, env(safe-area-inset-bottom)); }
  .wf-easy-step { padding-top: 32px; }
  .wf-easy-step h3 { font-size: 29px; }
  .wf-employee-standard-editor .wf-edit-grid { padding: 18px 16px 0; }
  .wf-employee-standard-editor > footer { padding: 0 16px 18px; }
  .wf-employee-editor-dialog:not(.is-easy) { width: 100%; }
  .wf-employee-card-tabs { margin: -22px -16px 14px; padding: 10px 16px; }
  .wf-employee-standard-editor .wf-employee-card-section .wf-edit-grid { grid-template-columns: 1fr; padding: 12px; }
  .wf-employee-card-section .wf-edit-grid label { grid-template-columns: 72px minmax(0, 1fr); }
  .wf-employee-card-footer { margin: 0 -16px -18px; padding: 12px 16px !important; }
  .wf-standard-contact-note { margin-right: 16px; margin-left: 16px; }
  .wf-termination-dialog { border-radius: 18px; }
  .wf-termination-dialog > .wf-termination-dialog-head { padding: 16px; }
  .wf-termination-head-icon { width: 36px; height: 36px; }
  .wf-termination-dialog-head p { display: none; }
  .wf-edit-dialog .wf-termination-form { gap: 15px; padding: 16px; }
  .wf-termination-person { padding: 12px; }
  .wf-termination-reason-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .wf-termination-reason-chips button { padding: 0 6px; }
  .wf-account-modal { padding: 10px; }
  .wf-account-dialog { width: 100%; max-height: calc(100dvh - 20px); border-radius: 18px; }
  .wf-account-dialog-head {
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
  }
  .wf-account-dialog-head > em {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin-left: 58px;
    margin-top: -24px;
  }
  .wf-account-identity p { display: none; }
  .wf-account-dialog-head > button { grid-column: 2; grid-row: 1; }
  .wf-account-avatar { width: 46px; height: 46px; flex-basis: 46px; }
  .wf-account-tabs { padding: 8px 10px; }
  .wf-account-tabs button { min-height: 40px; font-size: 12px; }
  .wf-account-panels { max-height: calc(100dvh - 206px); padding: 18px 16px max(20px, env(safe-area-inset-bottom)); }
  .wf-account-field-pair { grid-template-columns: 1fr; }
  .wf-account-form input { height: 48px; font-size: 14px; }
  .wf-account-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .wf-account-form-actions > a { margin: 0; text-align: center; }
  .wf-account-form-actions .wf-primary-button { width: 100%; min-height: 46px; }
}
@media (max-width: 360px) {
  .wf-pro-nav > a { font-size: 9px; }
  .wf-pro-nav a > span { display: none; }
  .wf-overview-metrics, .wf-contract-metrics, .wf-employee-metrics { grid-template-columns: 1fr; }
}

/* 온하루 직원 모바일 웹 — Flutter 앱과 동일한 정보 구조 */
.wf-mobile-page { margin: 0; min-height: 100dvh; background: #eef2f0; color: #121713; }
.wf-phone-shell { position: relative; width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; background: #f7f9f8; box-shadow: 0 0 40px rgba(18, 35, 26, .08); }
.wf-mobile-header { position: sticky; z-index: 20; top: 0; display: flex; align-items: flex-end; height: 54px; padding: max(8px, env(safe-area-inset-top)) 20px 8px; border-bottom: 1px solid #e6eae7; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.wf-mobile-user-title { display: grid; gap: 1px; min-width: 0; }
.wf-mobile-user-title strong { overflow: hidden; color: #172033; font-size: 17px; line-height: 1.15; font-weight: 820; letter-spacing: -.45px; text-overflow: ellipsis; white-space: nowrap; }
.wf-mobile-user-title small { overflow: hidden; color: #7a8799; font-size: 10px; line-height: 1.2; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.wf-wordmark { display: inline-flex; align-items: center; gap: 10px; color: #101511; text-decoration: none; }
.wf-wordmark img { width: 42px; height: 42px; border-radius: 13px; object-fit: cover; }
.wf-wordmark span { font-size: 21px; font-weight: 750; letter-spacing: -.7px; }
.wf-mobile-header .wf-text-button { border: 0; background: transparent; color: #5f6b63; font: inherit; font-size: 13px; font-weight: 650; }
.wf-mobile-main { min-height: calc(100dvh - 130px); padding: 18px 20px 112px; }
.wf-mobile-main .wf-panel { display: none; }
.wf-mobile-main .wf-panel.active { display: block; animation: wf-row-in .18s ease-out; }
.wf-app-greeting { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 2px 22px; }
.wf-app-greeting h1 { margin: 0 0 3px; font-size: 30px; line-height: 1.1; letter-spacing: -1.2px; }
.wf-app-greeting span, .wf-app-greeting time { color: #738078; font-size: 13px; font-weight: 600; }
.wf-app-card { display: block; box-sizing: border-box; width: 100%; margin: 0 0 14px; border: 1px solid #e0e5e1; border-radius: 24px; background: #fff; box-shadow: 0 3px 12px rgba(24,45,32,.035); }
.wf-attendance-card { padding: 18px; }
.wf-home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-home-shortcuts button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border: 0; border-radius: 14px; background: #f5f7f6; color: #283029; font: inherit; font-size: 14px; font-weight: 700; }
.wf-home-shortcuts svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.wf-home-shortcuts b { color: #276b51; font-size: 12px; }
.wf-app-divider { height: 1px; margin: 16px 0 15px; background: #e2e7e3; }
.wf-attendance-state { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-time-state { display: flex; align-items: baseline; gap: 9px; }
.wf-time-state strong { font-size: clamp(43px, 12vw, 58px); line-height: 1; letter-spacing: -3px; }
.wf-time-state span { color: #66736a; font-size: 16px; font-weight: 650; }
.wf-mini-times { display: flex; gap: 22px; margin-top: 14px; }
.wf-mini-times span { display: grid; gap: 3px; color: #78847c; font-size: 11px; }
.wf-mini-times b { color: #273029; font-size: 14px; font-weight: 600; }
.wf-network-badge { flex: none; padding: 8px 11px; border: 0; border-radius: 999px; background: #edf2ef; color: #536158; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.wf-network-badge:focus-visible { outline: 2px solid #347ef4; outline-offset: 2px; }
.wf-network-badge.allowed { background: #e6f4ed; color: #176c4d; }
.wf-network-badge.pending { background: #fff2d9; color: #9a6805; }
.wf-network-badge.denied { background: #ffebe8; color: #b6433b; }
.wf-work-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.wf-work-button { min-height: 62px; border: 0; border-radius: 18px; font: inherit; font-size: 17px; font-weight: 750; }
.wf-work-button.start { background: #326c55; color: #fff; }
.wf-work-button.end { background: #202923; color: #fff; }
.wf-work-button.break { background: #fff; color: #2d6fdb; box-shadow: inset 0 0 0 1.5px #b9d0f6; }
.wf-work-button.resume { background: #fff4e2; color: #a8620d; box-shadow: inset 0 0 0 1.5px #f0cf9c; }
.wf-work-button:disabled { background: #e4e7e5; color: #9ba29e; }
.wf-method-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.wf-method-row > div:first-child { display: grid; gap: 3px; }
.wf-method-row > div:first-child span { color: #7a867e; font-size: 10px; font-weight: 700; }
.wf-method-row > div:first-child strong { font-size: 13px; font-weight: 650; }
.wf-method-icons { display: flex; gap: 6px; }
.wf-method-icons > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #dde2df; border-radius: 10px; color: #bec6c1; background: #fafbfa; }
.wf-method-icons > span.active { border-color: #3b765e; color: #2f7055; background: #eaf5ef; }
.wf-method-icons svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.wf-home-metrics { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 12px; }
.wf-home-metrics div { display: grid; gap: 5px; padding: 0 9px; }
.wf-home-metrics div + div { border-left: 1px solid #e7eae8; }
.wf-home-metrics span { color: #748078; font-size: 11px; font-weight: 650; }
.wf-home-metrics strong { font-size: 23px; line-height: 1.15; letter-spacing: -1px; }
.wf-home-list-card { overflow: hidden; }
.wf-home-list-card header, .wf-panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.wf-home-list-card h2, .wf-panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.5px; }
.wf-home-list-card header span, .wf-news-title b { display: grid; min-width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #eaf4ef; color: #315f4d; font-size: 11px; }
.wf-home-task-list > p { margin: 0; padding: 14px 20px 20px; color: #849087; font-size: 13px; }
.wf-home-task-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; border: 0; border-top: 1px solid #edf0ee; background: #fff; color: #202621; font: inherit; font-size: 14px; text-align: left; }
.wf-home-task-list button strong { font-weight: 600; }
.wf-home-news { padding: 18px 20px; border-color: #e0e5e1; color: inherit; font: inherit; text-align: left; }
.wf-news-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; font-size: 18px; font-weight: 750; }
.wf-news-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.wf-news-row i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #e7f2ed; color: #2e6d52; font-style: normal; font-size: 12px; font-weight: 800; }
.wf-news-row span { display: grid; gap: 3px; min-width: 0; }
.wf-news-row strong { font-size: 14px; font-weight: 650; }
.wf-news-row small { overflow: hidden; color: #758078; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wf-section-title { margin-bottom: 18px; }
.wf-section-title span { color: #3b745d; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.wf-section-title h1 { margin: 4px 0 0; font-size: 28px; letter-spacing: -1px; }
.wf-app-primary-action { width: 100%; min-height: 54px; margin: 0 0 16px; border: 0; border-radius: 18px; background: #2e6d52; color: #fff; font: inherit; font-size: 15px; font-weight: 750; }
.wf-panel-heading { padding-inline: 2px; }
.wf-panel-heading span { color: #758078; font-size: 12px; }
.wf-mobile-list { overflow: hidden; }
.wf-mobile-list:empty::after { display: block; padding: 22px; border: 1px solid #e0e5e1; border-radius: 20px; background: #fff; color: #849087; content: "내역이 없습니다."; font-size: 13px; text-align: center; }
.wf-mobile-list .wf-mobile-list-row { display: grid; gap: 3px; padding: 15px 17px; border: 1px solid #e0e5e1; border-radius: 17px; background: #fff; }
.wf-mobile-list .wf-mobile-list-row + .wf-mobile-list-row { margin-top: 8px; }
.wf-mobile-list-row strong { font-size: 14px; font-weight: 650; }
.wf-mobile-list-row small { color: #7a857e; font-size: 11px; }
.wf-notification-card { display: flex; align-items: center; justify-content: space-between; padding: 18px; color: inherit; font: inherit; text-align: left; }
.wf-notification-card > span { display: grid; gap: 5px; }
.wf-notification-card strong { font-size: 15px; font-weight: 650; }
.wf-notification-card small { color: #78837b; font-size: 11px; }
.wf-notification-card > b { padding: 7px 10px; border-radius: 999px; background: #e8f3ed; color: #2f6d53; font-size: 11px; }
.wf-bottom-nav { position: fixed; z-index: 25; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 520px); min-height: 76px; padding: 8px 13px max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid #e1e6e2; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); }
.wf-bottom-nav button { display: grid; gap: 3px; place-content: center; border: 0; border-radius: 16px; background: transparent; color: #707c74; font: inherit; font-size: 10px; font-weight: 650; }
.wf-bottom-nav button.active { color: #285f49; background: #e9f4ee; }
.wf-bottom-nav svg { width: 23px; margin: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.wf-bottom-nav button:first-child svg path:first-child { fill: currentColor; stroke: currentColor; }
.wf-history-sheet { max-height: 88dvh; overflow-y: auto; }
.wf-history-month { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; margin: 8px 0 16px; }
.wf-history-month button { border: 0; background: transparent; font: inherit; font-size: 28px; }
.wf-history-month strong { text-align: center; }
.wf-history-week, .wf-history-calendar { display: grid; grid-template-columns: repeat(7, 1fr); }
.wf-history-week span { padding: 5px 0 8px; color: #758078; font-size: 10px; font-weight: 700; text-align: center; }
.wf-history-calendar button, .wf-history-calendar span { min-height: 62px; padding: 7px 3px; border: 0; border-top: 1px solid #edf0ee; background: transparent; color: #303832; font: inherit; font-size: 11px; text-align: center; }
.wf-history-calendar button.has-record { background: #eef6f2; color: #265f49; }
.wf-history-calendar button.selected { outline: 2px solid #36745a; outline-offset: -2px; }
.wf-history-calendar small { display: block; margin-top: 4px; color: #6f7c73; font-size: 10px; }
.wf-history-detail { margin-top: 14px; padding: 14px; border-radius: 15px; background: #f2f5f3; color: #4f5c53; font-size: 12px; line-height: 1.65; }

@media (max-width: 390px) {
  .wf-mobile-main { padding-inline: 14px; }
  .wf-mini-times { gap: 14px; }
  .wf-method-row { align-items: flex-start; flex-direction: column; }
  .wf-method-icons { width: 100%; justify-content: flex-end; }
}

/* Contract document and identity verification */
.wf-contract-modal { grid-template-rows: 62px minmax(0, 1fr) auto; }
.wf-contract-modal > footer { display: block; }
.wf-contract-modal > footer .wf-primary-button { width: 100%; }
.wf-contract-document { background: #f2f4f2; }
.wf-contract-paper {
  position: relative;
  overflow: hidden;
  padding: 40px 44px 56px;
  border: 1px solid #e0e5e1;
  background: #fff;
  box-shadow: 0 12px 34px rgba(27, 39, 31, .06);
}
.wf-contract-paper::after { content: attr(data-watermark); position: absolute; inset: 0; display: grid; place-items: center; color: rgba(70, 85, 76, .055); font-size: 18px; font-weight: 900; letter-spacing: .05em; transform: rotate(-24deg); pointer-events: none; white-space: nowrap; }
.wf-contract-document[data-watermark] .wf-contract-paper::after { content: attr(data-watermark); }
.wf-contract-modal > footer .wf-outline-button { width: 100%; min-height: 48px; }
.wf-privacy-cover { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; gap: 8px; background: #101713; color: #fff; text-align: center; }
.wf-privacy-cover strong { font-size: 22px; }
.wf-privacy-cover span { color: #aab6ae; font-size: 13px; }
.wf-contract-title { margin-bottom: 30px; text-align: center; }
.wf-contract-title > span { color: #727d76; font-size: 12px; font-weight: 800; }
.wf-contract-document .wf-contract-title h1 { margin: 9px 0 18px; font-size: 28px; letter-spacing: -.045em; }
.wf-contract-title p { text-align: left; }
.wf-contract-document .wf-contract-summary { margin: 0 0 34px; }
.wf-contract-document section { padding: 22px 0; border-top: 1px solid #e7ebe8; }
.wf-contract-document section h2 { margin: 0 0 11px; font-size: 16px; letter-spacing: -.025em; }
.wf-contract-document ol { margin: 0; padding-left: 21px; }
.wf-contract-document li { margin: 7px 0; padding-left: 3px; font-size: 14px; }
.wf-contract-confirm { margin: 34px 0 18px !important; font-weight: 750; }
.wf-contract-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-contract-document .wf-contract-parties dl { grid-template-columns: 74px 1fr; margin: 0; align-content: start; }

.wf-auth-modal { position: fixed; z-index: 160; inset: 0; display: grid; place-items: center; padding: 20px; }
.wf-auth-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(13, 19, 15, .58); backdrop-filter: blur(4px); }
.wf-auth-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 24px;
  border: 1px solid #e1e6e2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(13, 20, 15, .28);
  animation: wf-modal-in .18s ease both;
}
.wf-auth-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; }
.wf-auth-dialog > header span { color: var(--wf-green-dark); font-size: 11px; font-weight: 850; }
.wf-auth-dialog > header h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.04em; }
.wf-auth-dialog > header button { border: 0; background: transparent; color: #7d8981; font-size: 25px; line-height: 1; cursor: pointer; }
.wf-auth-summary { margin: 14px 0 20px; color: #69756d; font-size: 13px; }
.wf-auth-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--wf-line); border-radius: 12px; background: #f4f6f4; }
.wf-auth-methods button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: #758078; font-weight: 800; cursor: pointer; }
.wf-auth-methods button.active { background: #fff; color: var(--wf-ink); box-shadow: 0 2px 8px rgba(22, 34, 26, .08); }
.wf-auth-dialog form { display: grid; gap: 16px; margin-top: 18px; }
.wf-auth-panel { display: none; }
.wf-auth-panel.active { display: block; }
.wf-auth-code-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.wf-auth-code-row .wf-outline-button { min-height: 48px; }
.wf-auth-hint { min-height: 18px; margin: 8px 0 0; color: var(--wf-green-dark); font-size: 12px; font-weight: 700; }
.wf-auth-agree { display: flex; align-items: flex-start; gap: 9px; color: #4f5b53; font-size: 13px; font-weight: 750; }
.wf-auth-agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--wf-green); }
.wf-auth-dialog .wf-form-message { margin: -4px 0 0; }
.wf-mobile-page .wf-primary-button,
.wf-contract-modal .wf-primary-button,
.wf-auth-dialog .wf-primary-button { min-height: 52px; border-color: var(--wf-green); background: var(--wf-green); box-shadow: 0 8px 18px rgba(32, 177, 90, .16); }

/* Contract editor workbench */
.wf-contract-workbench { display: grid; grid-template-columns: minmax(320px, 35fr) minmax(560px, 65fr); gap: 16px; align-items: start; }
.wf-contract-directory { position: sticky; top: 18px; overflow: hidden; }
.wf-directory-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 15px; }
.wf-directory-head h2 { margin: 0; font-size: 17px; }
.wf-directory-head span { color: #7f8899; font-size: 11px; font-weight: 800; }
.wf-directory-status-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0 16px 12px;
  padding: 4px;
  border: 1px solid #e0e4ec;
  border-radius: 10px;
  background: #f5f6f9;
}
.wf-directory-status-tabs button { min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: #737d90; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.wf-directory-status-tabs button.active { background: #fff; color: #4f52d5; box-shadow: 0 2px 7px rgba(37, 43, 64, .08); }
.wf-directory-status-tabs button em { margin-left: 3px; color: inherit; font-size: 9px; font-style: normal; }
.wf-directory-search, .wf-directory-sort { display: grid; gap: 6px; margin: 0 16px 10px; color: #7b8496; font-size: 10px; font-weight: 850; }
.wf-directory-search input, .wf-directory-sort select {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #dfe3eb;
  border-radius: 8px;
  background: #fff;
  color: #3c4557;
  font: inherit;
  font-size: 11px;
  outline: 0;
}
.wf-directory-search input:focus, .wf-directory-sort select:focus { border-color: #7476ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
/* '검색' 이라는 글자가 한 줄을 통째로 먹지 않도록, 라벨은 읽어주기용으로만 남기고
   안내는 입력칸 안에 넣는다. 돋보기는 배경 이미지라 자리를 차지하지 않는다. */
.wf-directory-search.is-inline { gap: 0; }
.wf-directory-search.is-inline input {
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b94a5' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.4'/%3E%3Cpath d='M13.2 13.2 17 17'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
  background-size: 16px 16px;
}
/* 검색어와 맞아떨어진 부분을 표시한다. 왜 이 사람이 걸렸는지 바로 보인다. */
.wf-directory-person mark { padding: 0 1px; border-radius: 3px; background: #fff0b8; color: inherit; font: inherit; }
.wf-directory-list { max-height: calc(100vh - 330px); min-height: 280px; overflow: auto; border-top: 1px solid #eceff4; }
.wf-directory-person { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; border: 0; border-bottom: 1px solid #edf0f4; background: #fff; color: #2a3142; text-align: left; cursor: pointer; }
.wf-directory-person:hover { background: #f8f8fc; }
.wf-directory-person.active { background: #eff0ff; box-shadow: inset 3px 0 #5d5fef; }
.wf-directory-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #eef0ff; color: #5659d8; font-size: 11px; font-weight: 900; }
.wf-directory-person-copy { min-width: 0; }
.wf-directory-person-copy strong, .wf-directory-person-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-directory-person-copy strong { font-size: 12px; }
.wf-directory-person-copy small { margin-top: 4px; color: #8a92a2; font-size: 10px; }
.wf-directory-person em { color: #5960d9; font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
.wf-directory-person.is-retired { background: #fafbfc; color: #697386; }
.wf-directory-person.is-retired .wf-directory-avatar { background: #eef0f3; color: #7c8595; }
.wf-directory-person.is-retired em { color: #8a93a3; }
.wf-directory-empty { padding: 54px 16px; color: #959dac; font-size: 11px; text-align: center; }
.wf-contract-editor-stack { display: grid; gap: 10px; min-width: 0; }
.wf-contract-form .wf-pro-card-head p { margin: 5px 0 0; color: #8b93a3; font-size: 10px; }
.wf-contract-workbench .wf-contract-form { overflow: hidden; }
.wf-contract-workbench .wf-contract-form .wf-pro-card-head { padding: 11px 14px; }
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  padding: 10px 12px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > label,
.wf-contract-workbench .wf-contract-inline-row > label {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: #596276;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.wf-contract-workbench .wf-contract-form label > em {
  display: inline;
  margin: -2px 0 0;
  color: #6064df;
  font-size: 10px;
  font-style: normal;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > label.span-2 { grid-column: 1 / -1; }
.wf-contract-workbench .wf-contract-form input,
.wf-contract-workbench .wf-contract-form select {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11px;
}
.wf-contract-workbench .wf-contract-form textarea {
  width: 100%;
  min-height: 56px;
  padding: 8px 9px;
  border-radius: 7px;
  font-size: 11px;
  resize: vertical;
}
.wf-contract-inline-row {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  gap: 8px;
}
.wf-contract-identity-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-contract-time-row,
.wf-contract-wage-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-inline-row {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  min-width: 0;
  gap: 6px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid {
  gap: 8px 10px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid label {
  gap: 3px;
  margin: 0;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid input,
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid select {
  height: 36px;
  min-height: 36px;
  padding: 0 9px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid textarea {
  min-height: 64px;
  padding: 8px 9px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-identity-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wf-contract-workbench .wf-contract-form .wf-admin-form-actions {
  gap: 6px;
  padding: 0 12px 10px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-form-actions button { min-height: 35px; }
.wf-trust-panel { margin-bottom: 16px; overflow: hidden; }
.wf-trust-panel summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; cursor: pointer; list-style: none; }
.wf-trust-panel summary::-webkit-details-marker { display: none; }
.wf-trust-panel summary strong, .wf-trust-panel summary small { display: block; }
.wf-trust-panel summary strong { font-size: 14px; }
.wf-trust-panel summary small { margin-top: 4px; color: #8a93a4; font-size: 10px; }
.wf-trust-panel summary em { color: #5c60db; font-size: 10px; font-style: normal; font-weight: 850; }
.wf-trust-panel-body { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(360px, 1fr); gap: 18px; padding: 18px 20px 20px; border-top: 1px solid #e9ecf2; background: #fafbfc; }
.wf-authority-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-authority-form label { display: grid; gap: 6px; color: #687286; font-size: 10px; font-weight: 850; }
.wf-authority-form label.span-2 { grid-column: 1 / -1; }
.wf-authority-form input, .wf-authority-form select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #3e475a; font: inherit; font-size: 10px; }
.wf-authority-form .wf-primary-button { min-height: 39px; align-self: end; }
.wf-authority-list { display: grid; align-content: start; gap: 8px; }
.wf-authority-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e2e5ec; border-radius: 10px; background: #fff; }
.wf-authority-item strong, .wf-authority-item small { display: block; }
.wf-authority-item strong { font-size: 11px; }
.wf-authority-item small { margin-top: 4px; color: #8b93a3; font-size: 10px; }

@media (max-width: 1180px) {
  .wf-contract-workbench { grid-template-columns: minmax(300px, 35fr) minmax(480px, 65fr); }
}
@media (max-width: 960px) {
  .wf-contract-workbench { grid-template-columns: 1fr; }
  .wf-contract-directory { position: static; }
  .wf-directory-list { max-height: 300px; }
  .wf-contract-time-row,
  .wf-contract-wage-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wf-contract-paper { padding: 28px 20px 40px; border-right: 0; border-left: 0; }
  .wf-contract-document { padding: 20px 0 38px; }
  .wf-contract-document .wf-contract-title h1 { font-size: 24px; }
  .wf-contract-parties { grid-template-columns: 1fr; }
  .wf-auth-modal { place-items: end center; padding: 0; }
  .wf-auth-dialog { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid,
  .wf-contract-identity-row,
  .wf-contract-time-row,
  .wf-contract-wage-row { grid-template-columns: 1fr; }
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-identity-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
    grid-template-columns: 1fr;
  }
}

/* Attendance administration */
.wf-attendance-tabs { margin-bottom: 2px; }
.wf-attendance-policy-grid { display: grid; grid-template-columns: minmax(560px, 58fr) minmax(400px, 42fr); gap: 16px; align-items: start; }
.wf-attendance-workbench { display: grid; grid-template-columns: minmax(320px, 35fr) minmax(560px, 65fr); gap: 16px; align-items: start; }
.wf-attendance-policy-grid .wf-pro-card-head p,
.wf-attendance-record-head p { margin: 5px 0 0; color: #8992a3; font-size: 10px; }
.wf-attendance-records { min-width: 0; overflow: hidden; }
.wf-attendance-record-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid #e9ecf2; }
.wf-attendance-record-head h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.wf-attendance-filters { display: flex; align-items: flex-end; gap: 8px; }
.wf-attendance-filters label { display: grid; gap: 6px; color: #747e91; font-size: 10px; font-weight: 850; }
.wf-attendance-filters input { width: 132px; height: 38px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #3b4456; font: inherit; font-size: 10px; outline: 0; }
.wf-attendance-filters input:focus { border-color: #7476ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
.wf-attendance-filters .wf-primary-button { min-height: 38px; white-space: nowrap; }
.wf-attendance-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid #e9ecf2; }
.wf-attendance-metrics article { min-height: 62px; padding: 11px 13px; border-right: 1px solid #edf0f4; background: #fafbfc; }
.wf-attendance-metrics article:last-child { border-right: 0; }
.wf-attendance-metrics span { display: block; color: #7f8899; font-size: 10px; font-weight: 850; white-space: nowrap; }
.wf-attendance-metrics strong { display: block; margin-top: 4px; color: #333ac1; font-size: clamp(14px, 1.15vw, 18px); letter-spacing: -.04em; white-space: nowrap; }
@media (max-width: 1240px) {
  .wf-attendance-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-attendance-metrics article:nth-child(3n) { border-right: 0; }
  .wf-attendance-metrics article:nth-child(-n+3) { border-bottom: 1px solid #edf0f4; }
}
.wf-attendance-table { min-width: 760px; }
.wf-attendance-person strong,
.wf-attendance-person small,
.wf-attendance-place strong,
.wf-attendance-place small { display: block; }
.wf-attendance-person small,
.wf-attendance-place small { margin-top: 4px; color: #939baa; font-size: 10px; }
.wf-state-pill.attendance-incomplete { background: #fff0e3; color: #b46300; }
.wf-directory-all { background: #fafbfc; }
.wf-policy-fields { display: grid; gap: 12px; margin: 0 22px; }
.wf-policy-fields > label, .wf-policy-coordinate-grid label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-policy-fields .wf-outline-button { min-height: 38px; }
.wf-policy-method-fieldset { min-width: 0; margin: 0 22px; padding: 0; border: 0; }
.wf-policy-method-fieldset legend { margin-bottom: 8px; color: #596275; font-size: 10px; font-weight: 850; }
/* 위치기반서비스사업 신고 전 안내. 경고가 아니라 '아직 안 열림' 이라 주황 계열로 둔다. */
.wf-policy-method-fieldset .wf-policy-location-hold {
  margin: 0 0 10px; padding: 8px 10px; border: 1px solid #f0d8b8; border-radius: 8px;
  background: #fdf6ec; color: #8a5a1b; font-size: 11px; line-height: 1.6;
}
.wf-policy-method-grid label.is-held { opacity: .55; }
.wf-policy-method-grid label.is-held::after {
  content: "신고 대기"; position: absolute; top: 6px; right: 8px;
  color: #8a5a1b; font-size: 9px; font-weight: 800;
}
.wf-policy-method-grid label.is-held { position: relative; }
.wf-policy-gps-hold {
  display: block; margin-top: 4px; color: #8a5a1b; font-size: 10px; font-weight: 700;
}
.wf-policy-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.wf-policy-method-grid label { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; min-height: 52px; padding: 9px 10px; border: 1px solid #dfe4e1; border-radius: 10px; background: #fff; cursor: pointer; }
.wf-policy-method-grid input { width: 15px !important; height: 15px !important; min-height: 0 !important; grid-row: 1 / span 2; accent-color: #28694d; }
.wf-policy-method-grid span { color: #303934; font-size: 10px; font-weight: 850; }
.wf-policy-method-grid small { color: #89928d; font-size: 10px; font-weight: 650; }
.wf-policy-method-grid label:has(input:checked) { border-color: #4c8a6d; background: #edf7f1; box-shadow: inset 0 0 0 1px #4c8a6d; }
.wf-policy-coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-policy-address-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.wf-policy-address-search label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-policy-address-search .wf-outline-button { min-width: 88px; }
.wf-policy-address-results { display: grid; gap: 5px; padding: 7px; border: 1px solid #dfe4e1; border-radius: 10px; background: #f8faf9; }
.wf-policy-address-results button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: #fff; color: #46524b; font: inherit; font-size: 10px; line-height: 1.45; text-align: left; cursor: pointer; }
.wf-policy-address-results button:hover, .wf-policy-address-results button:focus-visible { background: #e9f4ed; color: #1f6346; outline: none; }
.wf-worksite-map-shell { overflow: hidden; border: 1px solid #dfe4e1; border-radius: 12px; background: #f5f7f6; }
.wf-worksite-map { width: 100%; height: 300px; background: linear-gradient(135deg, #e9f1ec, #f4f6f5); }
.wf-worksite-map-shell p { margin: 0; padding: 9px 11px; border-top: 1px solid #e6eae8; color: #69756f; font-size: 10px; line-height: 1.5; }
.wf-worksite-map .leaflet-control-attribution { font-size: 10px; }
.wf-worksite-map .leaflet-marker-icon { filter: hue-rotate(70deg) saturate(.75); }
.wf-policy-security-note { margin: -4px 0 2px; padding: 11px 12px; border-radius: 9px; background: #fff5df; color: #88611d; font-size: 10px; font-weight: 750; line-height: 1.55; }
.wf-policy-item-actions { display: flex; align-items: center; gap: 8px; }
.wf-policy-item-actions .wf-outline-button { min-height: 34px; padding: 0 12px; }
.wf-policy-item[data-policy-select] { cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
.wf-policy-item[data-policy-select]:hover { background: #f7f9ff; }
.wf-policy-item[data-policy-select]:focus-visible { outline: 2px solid #5970ee; outline-offset: -2px; }
.wf-contract-list-card .wf-policy-item[data-policy-select].selected { background: #eef2ff; box-shadow: inset 4px 0 #5d5fef; }
.wf-policy-form-actions {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr);
  gap: 8px;
  min-width: 0;
  margin-right: 22px;
  margin-left: 22px;
}
.wf-policy-form-actions .wf-primary-button,
.wf-policy-form-actions .wf-danger-outline-button { width: 100%; min-width: 0; min-height: 38px; padding-right: 10px; padding-left: 10px; white-space: nowrap; }
.wf-policy-form-actions .wf-danger-outline-button[hidden] { display: none; }
.wf-modal-card { position: relative; z-index: 1; width: min(460px, calc(100% - 32px)); border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -22px 70px rgba(24, 31, 43, .22); }
.wf-modal-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f6; color: #667085; font: 700 22px/1 sans-serif; cursor: pointer; }
.wf-attendance-qr-card { display: grid; justify-items: center; gap: 12px; padding: 34px 34px 28px; text-align: center; }
.wf-attendance-qr-card h2 { margin: 0; font-size: 24px; }
.wf-attendance-qr-card p, .wf-attendance-qr-card small { margin: 0; color: #747e90; font-size: 11px; line-height: 1.6; }
.wf-attendance-qr-card img { width: min(300px, 78vw); aspect-ratio: 1; margin: 4px 0; border: 1px solid #e7e9ef; border-radius: 13px; }
.wf-attendance-qr-card > strong { font-size: 16px; }
.wf-attendance-qr-countdown { min-width: 142px; padding: 8px 12px; border-radius: 999px; background: #e9f7ef; color: #15834f; font-size: 11px; font-weight: 850; }
.wf-attendance-qr-countdown.is-expiring { background: #fff0da; color: #a86400; }
.wf-correction-applied { display: block; margin-top: 5px; color: #5d5fef; font-size: 9px; font-weight: 850; }
.wf-attendance-correction-actions { display: flex; gap: 5px; }
.wf-attendance-correction-actions button,
.wf-attendance-correction-item > div:last-child button { min-height: 28px; padding: 0 9px; border: 1px solid #dfe3eb; border-radius: 7px; background: #fff; color: #586174; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.wf-attendance-correction-queue { border-top: 1px solid #e8ebf1; background: #fafbfc; }
.wf-attendance-correction-queue > div:first-child { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 10px; }
.wf-attendance-correction-queue h3 { margin: 0; font-size: 13px; }
.wf-attendance-correction-queue > div:first-child span { color: #70798b; font-size: 10px; font-weight: 800; }
#attendanceCorrectionList,
#attendanceScheduleExceptionList { display: grid; gap: 8px; padding: 0 14px 14px; }
.wf-attendance-correction-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e3e6ed; border-radius: 10px; background: #fff; }
.wf-attendance-correction-item strong, .wf-attendance-correction-item small { display: block; }
.wf-attendance-correction-item strong { font-size: 11px; }
.wf-attendance-correction-item small { margin-top: 4px; color: #848d9f; font-size: 9px; }
.wf-attendance-correction-item p { margin: 6px 0 0; color: #626b7d; font-size: 10px; }
.wf-attendance-correction-item > div:last-child { display: flex; gap: 5px; }
.wf-attendance-correction-card { width: min(520px, calc(100vw - 30px)); padding: 28px; }
.wf-attendance-correction-card h2 { margin: 5px 0; font-size: 20px; }
.wf-attendance-correction-card > p { margin: 0 0 18px; color: #737c8f; font-size: 11px; }
.wf-attendance-correction-card form { display: grid; gap: 14px; }
.wf-attendance-correction-card label { display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-attendance-correction-card input,
.wf-attendance-correction-card textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #343c4e; font: inherit; font-size: 11px; }
.wf-attendance-correction-card textarea { min-height: 100px; resize: vertical; }
.wf-attendance-correction-card footer { display: flex; justify-content: flex-end; gap: 8px; }
.wf-attendance-qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 5px; }
.wf-check-row { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; }
.wf-check-row input { width: 16px !important; height: 16px !important; min-height: 0 !important; }
.wf-policy-item em { margin-left: 6px; padding: 3px 6px; border-radius: 5px; background: #eef0ff; color: #5659d8; font-size: 10px; font-style: normal; }

@media (max-width: 1180px) {
  .wf-attendance-policy-grid { grid-template-columns: minmax(500px, 55fr) minmax(360px, 45fr); }
  .wf-attendance-workbench { grid-template-columns: minmax(300px, 35fr) minmax(480px, 65fr); }
  .wf-attendance-record-head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 960px) {
  .wf-attendance-policy-grid,
  .wf-attendance-workbench { grid-template-columns: 1fr; }
  .wf-attendance-filters { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .wf-attendance-filters label { flex: 1 1 130px; }
  .wf-attendance-filters input { width: 100%; }
  .wf-attendance-filters .wf-primary-button { width: 100%; }
  .wf-policy-form-actions { grid-template-columns: 1fr; }
  .wf-attendance-metrics { grid-template-columns: 1fr 1fr; }
  /* 카드가 여섯 장이라 두 칸이면 세 줄이 된다. 줄 끝과 마지막 줄만 선을 뺀다. */
  .wf-attendance-metrics article:nth-child(2n) { border-right: 0; }
  .wf-attendance-metrics article:not(:nth-last-child(-n+2)) { border-bottom: 1px solid #edf0f4; }
  .wf-attendance-correction-item { grid-template-columns: 1fr auto; }
  .wf-attendance-correction-item > div:last-child,
  .wf-attendance-correction-item > small:last-child { grid-column: 1 / -1; }
}

/* Notification administration */
.wf-notification-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-notification-grid { display: grid; grid-template-columns: minmax(340px, 36fr) minmax(600px, 64fr); gap: 16px; align-items: start; }
.wf-notification-settings-body { display: grid; gap: 13px; padding: 18px 20px 22px; }
.wf-notification-settings-body > label { display: grid; gap: 6px; color: #687286; font-size: 10px; font-weight: 850; }
.wf-notification-settings-body input[type="email"], .wf-notification-settings-body input[type="text"] { height: 40px; padding: 0 11px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; font: inherit; font-size: 10px; }
.wf-channel-switches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 10px; background: #f5f6fa; }
.wf-channel-switches label { display: flex; align-items: center; gap: 7px; color: #50596c; font-size: 10px; font-weight: 750; }
.wf-adapter-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.wf-adapter-state { min-width: 0; padding: 10px; border: 1px solid #f0c8cd; border-radius: 9px; background: #fff8f8; }
.wf-adapter-state header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wf-adapter-state strong { color: #4c5567; font-size: 11px; }
.wf-adapter-state em { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #ef4d5b; color: #fff; font-size: 9px; font-style: normal; font-weight: 850; }
.wf-adapter-state p { margin: 7px 0; color: #6e7687; font-size: 10px; line-height: 1.45; }
.wf-adapter-state small { display: block; overflow-wrap: anywhere; color: #8c5260; font-size: 9px; line-height: 1.35; }
.wf-adapter-state small span { margin-right: 5px; color: #5d6576; font-weight: 850; }
.wf-adapter-state.ready { border-color: #bfe5d7; background: #f1fbf7; }
.wf-adapter-state.ready em { background: #20a878; }
.wf-adapter-state.ready small { color: #26745b; }
.wf-notification-policy-card { min-width: 0; overflow: hidden; }
.wf-notification-policy-list { display: grid; }
.wf-notification-policy { display: grid; grid-template-columns: minmax(150px, 1.5fr) 78px minmax(135px, 1fr) 72px 50px; align-items: center; gap: 8px; padding: 13px 14px; border-top: 1px solid #edf0f4; }
.wf-policy-enable { display: flex; align-items: center; gap: 10px; }
.wf-policy-enable strong, .wf-policy-enable small { display: block; }
.wf-policy-enable strong { color: #363e50; font-size: 11px; }
.wf-policy-enable small { margin-top: 3px; color: #9aa1af; font-size: 10px; }
.wf-notification-policy select, .wf-notification-policy input[type="time"] { height: 36px; padding: 0 8px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #4d5669; font: inherit; font-size: 10px; }
.wf-policy-channels { display: flex; gap: 8px; }
.wf-policy-channels label { display: flex; align-items: center; gap: 3px; color: #626b7d; font-size: 10px; }
.wf-notification-policy .wf-outline-button { min-height: 36px; padding: 0 10px; font-size: 10px; }
@media (max-width: 1100px) { .wf-notification-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .wf-notification-policy { grid-template-columns: 1fr 100px; } .wf-policy-channels { grid-column: 1 / -1; } }

/* Dense notification console: retain cards while maximizing information density. */
.wf-notification-admin-page .wf-pro-header { min-height: 68px; padding: 10px 24px; }
.wf-notification-admin-page .wf-pro-header h1 { font-size: 23px; }
.wf-notification-admin-page .wf-header-account { gap: 6px; }
.wf-notification-admin-page .wf-header-account button { min-height: 30px; padding: 0 10px; font-size: 10px; }
.wf-notification-admin-page .wf-pro-content { gap: 8px; padding: 10px 18px 20px; }
.wf-notification-admin-page .wf-notification-metrics { gap: 7px; }
.wf-notification-admin-page .wf-notification-metrics article { min-height: 54px; padding: 8px 12px; border-radius: 9px; }
.wf-notification-admin-page .wf-notification-metrics article span { font-size: 10px; }
.wf-notification-admin-page .wf-notification-metrics strong { margin-top: 2px; font-size: 19px; }
.wf-notification-admin-page .wf-pro-card-head { gap: 5px; padding: 6px 10px; }
.wf-notification-admin-page .wf-pro-card-head > div > span { font-size: 10px; line-height: 1; }
.wf-notification-admin-page .wf-pro-card-head h2 { margin-top: 1px; font-size: 14px; line-height: 1.2; }
.wf-notification-admin-page .wf-pro-card-head p { margin: 1px 0 0; font-size: 10px; line-height: 1.2; }
.wf-notification-admin-page .wf-notification-grid { grid-template-columns: 1fr; gap: 8px; }
.wf-notification-admin-page .wf-notification-settings-body { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 7px; padding: 6px 10px 7px; }
.wf-notification-admin-page .wf-notification-settings-body > label { gap: 2px; font-size: 10px; line-height: 1.15; }
.wf-notification-admin-page .wf-notification-settings-body > label > input { width: 100%; height: 27px; min-height: 27px; padding: 0 7px; border: 1px solid #dfe3eb; border-radius: 5px; background: #fff; color: #3f485a; font: inherit; font-size: 10px; }
.wf-notification-admin-page .wf-channel-switches,
.wf-notification-admin-page .wf-channel-switches { grid-column: 1 / -1; }
.wf-notification-admin-page .wf-channel-switches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; min-height: 27px; padding: 3px 6px; border-radius: 6px; }
.wf-notification-admin-page .wf-channel-switches label { gap: 3px; font-size: 10px; white-space: nowrap; }
.wf-notification-admin-page .wf-adapter-list { grid-column: 1 / span 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.wf-notification-admin-page .wf-adapter-state { min-height: 80px; padding: 7px 8px; border-radius: 7px; }
.wf-notification-admin-page .wf-adapter-state strong { font-size: 10px; line-height: 1.1; }
.wf-notification-admin-page .wf-adapter-state em { padding: 2px 6px; font-size: 8px; line-height: 1.1; }
.wf-notification-admin-page .wf-adapter-state p { margin: 5px 0; font-size: 9px; line-height: 1.35; }
.wf-notification-admin-page .wf-adapter-state small { font-size: 8px; line-height: 1.3; }
.wf-notification-admin-page .wf-notification-settings-body > button { grid-column: 4; min-height: 27px; height: 27px; padding: 0 8px; font-size: 10px; }
.wf-notification-admin-page .wf-notification-policy { grid-template-columns: minmax(210px, 1.8fr) 92px minmax(160px, 1fr) 82px 50px; gap: 6px; padding: 5px 9px; }
.wf-notification-admin-page .wf-policy-enable { gap: 7px; }
.wf-notification-admin-page .wf-policy-enable strong { font-size: 10px; }
.wf-notification-admin-page .wf-policy-enable small { margin-top: 1px; font-size: 10px; }
.wf-notification-admin-page .wf-notification-policy select,
.wf-notification-admin-page .wf-notification-policy input[type="time"] { height: 27px; padding: 0 6px; border-radius: 5px; font-size: 10px; }
.wf-notification-admin-page .wf-policy-channels { gap: 6px; }
.wf-notification-admin-page .wf-policy-channels label { gap: 2px; font-size: 10px; }
.wf-notification-admin-page .wf-notification-policy .wf-outline-button { min-height: 27px; padding: 0 7px; font-size: 10px; }

@media (max-width: 1280px) {
  .wf-notification-admin-page .wf-notification-settings-body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wf-notification-admin-page .wf-channel-switches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Admin typography and three-state column sorting */
.wf-admin-page {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wf-pro-header p, .wf-pro-card-head span, .wf-pro-nav-group { color: #727c90; font-size: 11px; }
.wf-pro-card-head h2, .wf-attendance-record-head h2 { font-size: 18px; }
.wf-pro-card-head p, .wf-attendance-policy-grid .wf-pro-card-head p, .wf-attendance-record-head p { color: #687286; font-size: 12px; line-height: 1.55; }
.wf-pro-table { font-size: 13px; }
.wf-pro-table th { color: #667085; font-size: 12px; }
.wf-pro-table td { color: #414b5f; font-size: 13px; }
.wf-sort-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.wf-sort-button::after, .wf-directory-sortbar button::after { content: "↕"; color: #b3bac7; font-size: 10px; }
.wf-sort-button[data-sort-direction="asc"]::after, .wf-directory-sortbar button[data-sort-direction="asc"]::after { content: "▲"; color: #5155dc; }
.wf-sort-button[data-sort-direction="desc"]::after, .wf-directory-sortbar button[data-sort-direction="desc"]::after { content: "▼"; color: #5155dc; }
.wf-sort-button[data-sort-direction]:not([data-sort-direction=""]) { color: #3338bd; }
.wf-sort-button:focus-visible, .wf-directory-sortbar button:focus-visible { outline: 2px solid #6265e8; outline-offset: 3px; }
.wf-directory-search { color: #667085; font-size: 11px; }
.wf-directory-search input { height: 42px; color: #313a4d; font-size: 13px; }
.wf-directory-sortbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 16px 12px;
  overflow: hidden;
  border: 1px solid #e0e4ec;
  border-radius: 9px;
  background: #fafbfc;
}
.wf-directory-sortbar button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid #e7eaf0;
  background: transparent;
  color: #657085;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.wf-directory-sortbar button:last-child { border-right: 0; }
.wf-directory-sortbar button[data-sort-direction]:not([data-sort-direction=""]) { background: #eff0ff; color: #4549cc; }
.wf-directory-person-copy strong { font-size: 13px; }
.wf-directory-person-copy small { color: #727c8e; font-size: 11px; }
.wf-directory-person em { font-size: 10px; }
.wf-search-box span, .wf-attendance-filters label, .wf-policy-fields > label, .wf-policy-coordinate-grid label,
.wf-contract-form.compact > label, .wf-contract-form .wf-admin-field-grid label, .wf-authority-form label,
.wf-notification-settings-body > label, .wf-edit-grid label { color: #586276; font-size: 11px; }
.wf-search-box input, .wf-table-tools select, .wf-attendance-filters input,
.wf-contract-form input, .wf-contract-form select, .wf-contract-form textarea,
.wf-authority-form input, .wf-authority-form select,
.wf-notification-settings-body input[type="email"], .wf-notification-settings-body input[type="text"],
.wf-edit-grid input, .wf-edit-grid select { color: #30394c; font-size: 12px; }
.wf-attendance-metrics span, .wf-overview-metrics span, .wf-employee-metrics span { color: #667085; font-size: 11px; }
.wf-attendance-metrics strong { font-size: clamp(15px, 1.2vw, 19px); }
.wf-attendance-person small, .wf-attendance-place small { color: #727c8f; font-size: 11px; }
.wf-state-pill { font-size: 11px; }
.wf-table-edit { font-size: 11px; }
.wf-channel-switches label { color: #414b5e; font-size: 12px; }
.wf-adapter-state strong { font-size: 11px; }
.wf-adapter-state em { color: #737d8f; font-size: 10px; }
.wf-notification-policy { grid-template-columns: minmax(180px, 1.5fr) 90px minmax(170px, 1fr) 90px 58px; gap: 10px; padding: 14px 16px; }
.wf-policy-enable strong { color: #2f3748; font-size: 12px; }
.wf-policy-enable small { color: #737d8f; font-size: 10px; }
.wf-notification-policy select, .wf-notification-policy input[type="time"] { color: #3e485b; font-size: 11px; }
.wf-policy-channels { gap: 10px; }
.wf-policy-channels label { color: #505a6d; font-size: 11px; }
.wf-notification-policy .wf-outline-button { font-size: 11px; }
.wf-audit-list-head p, .wf-audit-storage-state small, .wf-audit-storage-facts small,
.wf-audit-resource-id, .wf-audit-detail-body dt, .wf-audit-detail-body > div > span { color: #687286; font-size: 11px; }
.wf-audit-storage-facts strong, .wf-audit-detail-body dd { font-size: 12px; }

@media (max-width: 1120px) {
  .wf-notification-grid { grid-template-columns: 1fr; }
  .wf-attendance-workbench { grid-template-columns: 1fr; }
  .wf-attendance-workbench .wf-contract-directory { position: static; }
  .wf-attendance-workbench .wf-directory-list { max-height: 320px; }
}
@media (max-width: 760px) {
  .wf-notification-admin-page .wf-notification-settings-body { grid-template-columns: 1fr; }
  .wf-notification-admin-page .wf-channel-switches,
  .wf-notification-admin-page .wf-adapter-list,
  .wf-notification-admin-page .wf-notification-settings-body > button { grid-column: auto; }
  .wf-notification-admin-page .wf-channel-switches { grid-template-columns: 1fr 1fr; }
  .wf-notification-policy { grid-template-columns: minmax(0, 1fr) 110px; }
}

@media print {
  .wf-contract-modal, .wf-auth-modal, .wf-privacy-cover { display: none !important; }
  body:has(#attendanceQrModal:not([hidden])) * { visibility: hidden !important; }
  #attendanceQrModal:not([hidden]), #attendanceQrModal:not([hidden]) * { visibility: visible !important; }
  #attendanceQrModal:not([hidden]) { position: absolute; inset: 0; display: block; }
  #attendanceQrModal:not([hidden]) .wf-attendance-qr-card { width: 100%; box-shadow: none; }
  #attendanceQrModal:not([hidden]) .wf-modal-close, #attendanceQrModal:not([hidden]) .wf-attendance-qr-actions { display: none !important; }
}

/* Leave and absence */
.wf-leave-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-leave-tabs { margin-bottom: 18px; }
.wf-leave-card { overflow: hidden; }
.wf-leave-table { min-width: 1040px; }
.wf-leave-table td { vertical-align: middle; }
.wf-leave-request-person strong, .wf-leave-request-person small { display: block; }
.wf-leave-request-person small { margin-top: 4px; color: #7a8497; font-size: 11px; }
.wf-leave-actions { display: flex; gap: 7px; }
.wf-leave-actions button { min-height: 32px; padding: 0 11px; }
.wf-leave-policy-grid { display: grid; grid-template-columns: minmax(430px, .9fr) minmax(520px, 1.1fr); gap: 18px; align-items: start; }
.wf-leave-form-body { display: grid; gap: 15px; padding: 20px; }
.wf-leave-form-body > label, .wf-leave-decision > label { display: grid; gap: 7px; color: #596377; font-size: 12px; font-weight: 800; }
.wf-leave-form-body input, .wf-leave-decision input, .wf-leave-decision textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #30394c; font: inherit; font-size: 12px; outline: 0; }
.wf-leave-form-body input:focus, .wf-leave-decision input:focus, .wf-leave-decision textarea:focus { border-color: #686bea; box-shadow: 0 0 0 3px rgba(93, 95, 239, .09); }
.wf-leave-weekdays { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 9px; background: #f5f6f9; }
.wf-leave-weekdays > span { margin-right: 8px; color: #535d70; font-size: 11px; font-weight: 850; }
.wf-leave-weekdays label { display: inline-flex; align-items: center; gap: 4px; color: #586276; font-size: 11px; font-weight: 750; }
.wf-leave-weekdays input { width: 15px; min-height: auto; height: 15px; padding: 0; }
.wf-leave-law-note { min-height: 18px; margin: 0; color: #4e55cc; font-size: 11px; font-weight: 750; }
.wf-leave-type-list { display: grid; }
.wf-leave-type { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, auto) 74px; gap: 8px 14px; align-items: center; min-height: 64px; padding: 12px 18px; border-bottom: 1px solid #ebedf2; }
.wf-leave-type-name { min-width: 0; }
/* "6일 중 2일만 유급" 처럼 유급 여부가 둘로 나뉘는 휴가를 눈으로 구분한다. */
.wf-leave-pay { font-style: normal; font-weight: 800; }
.wf-leave-pay-paid { color: #1f8a52; }
.wf-leave-pay-partial { color: #b06d00; }
.wf-leave-pay-unpaid { color: #8992a3; }
.wf-leave-type-quota-note { color: #9aa2b1; font-size: 10px; line-height: 1.45; word-break: keep-all; }
/* 일수 입력은 둘째 줄 전체를 쓴다. 첫 줄에 끼우면 넓은 화면에서도 행이 가로로 넘친다. */
.wf-leave-type-quota { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 2px; }
.wf-leave-type-quota label { gap: 3px; }
.wf-leave-type-quota input { width: 72px; min-width: 0; min-height: 30px; padding: 0 8px; border: 1px solid var(--wf-line); border-radius: 8px; font-size: 11px; font-weight: 700; text-align: right; }
.wf-leave-type-quota input::placeholder { font-size: 10px; font-weight: 600; color: #aab2bf; }
#openLeaveTypeCreate { white-space: nowrap; flex: 0 0 auto; }
.wf-leave-type-quota input:disabled { background: #f4f5f7; color: #a8b0bd; }
.wf-leave-type-empty { padding: 18px; color: #8992a3; font-size: 12px; }
.wf-leave-type-create-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.wf-leave-type:last-child { border-bottom: 0; }
.wf-leave-type strong, .wf-leave-type small { display: block; }
.wf-leave-type strong { color: #343d50; font-size: 12px; }
.wf-leave-type small { margin-top: 3px; color: #8992a3; font-size: 10px; }
.wf-leave-type label { display: inline-flex; align-items: center; gap: 5px; color: #5b6578; font-size: 10px; font-weight: 750; white-space: nowrap; }
.wf-leave-type button { min-height: 32px; }
.wf-leave-decision { width: min(460px, 100%); display: grid; gap: 18px; padding: 26px; }
.wf-leave-decision h2 { margin: 5px 0 0; font-size: 22px; }
.wf-leave-decision p { margin: 8px 0 0; color: #6f798b; font-size: 12px; line-height: 1.6; }
.wf-leave-decision-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.wf-danger-button { min-height: 42px; border: 1px solid #f0c8cc; border-radius: 9px; background: #fff2f3; color: #c33f4b; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.wf-state-pill.leave-pending { background: #fff1d6; color: #aa6b00; }
.wf-state-pill.leave-approved { background: #e5f7ef; color: #16865f; }
.wf-state-pill.leave-rejected { background: #ffe9eb; color: #c44650; }
.wf-leave-balance-strong { color: #4248ca; font-size: 15px; font-weight: 900; }
.wf-ledger-positive { color: #188663; font-weight: 850; }
.wf-ledger-negative { color: #c34650; font-weight: 850; }

@media (max-width: 1250px) {
  .wf-leave-policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wf-leave-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-leave-type { grid-template-columns: 1fr 1fr; }
  .wf-leave-type-name { grid-column: 1 / -1; }
  .wf-leave-type-quota input { max-width: 72px; }
}

/* Audit archive */
.wf-audit-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wf-audit-storage-card { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 28px; padding: 20px 22px; }
.wf-audit-storage-state { display: flex; align-items: center; gap: 12px; }
.wf-audit-storage-state strong, .wf-audit-storage-state small { display: block; }
.wf-audit-storage-state strong { color: #2d3445; font-size: 14px; }
.wf-audit-storage-state small { margin-top: 5px; color: #8a93a4; font-size: 10px; }
.wf-audit-storage-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #e39b2f; box-shadow: 0 0 0 5px #fff2dd; }
.wf-audit-storage-dot.configured { background: #20a77a; box-shadow: 0 0 0 5px #e5f8f1; }
.wf-audit-storage-facts { display: flex; align-items: center; gap: 26px; }
.wf-audit-storage-facts span { min-width: 96px; }
.wf-audit-storage-facts small, .wf-audit-storage-facts strong { display: block; }
.wf-audit-storage-facts small { color: #929aaa; font-size: 10px; font-weight: 800; }
.wf-audit-storage-facts strong { margin-top: 5px; color: #475064; font-size: 10px; }
.wf-audit-storage-card .wf-primary-button { min-height: 38px; white-space: nowrap; }
.wf-audit-storage-card .wf-primary-button:disabled { border-color: #e1e4ea; background: #eff1f4; color: #8d95a3; box-shadow: none; cursor: not-allowed; }
.wf-audit-list-card { overflow: hidden; }
.wf-audit-list-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 20px; border-bottom: 1px solid #e9ecf2; }
.wf-audit-list-head h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.wf-audit-list-head p { margin: 5px 0 0; color: #8992a3; font-size: 10px; }
.wf-audit-tools { display: flex; gap: 9px; padding: 14px 18px; border-bottom: 1px solid #e9ecf2; background: #fafbfc; }
.wf-audit-tools .wf-search-box { flex: 1 1 auto; }
.wf-audit-tools select { min-width: 130px; height: 38px; padding: 0 31px 0 11px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #4d5669; font: inherit; font-size: 10px; outline: 0; }
.wf-audit-tools select:focus { border-color: #7476ec; box-shadow: 0 0 0 3px rgba(93, 95, 239, .08); }
.wf-audit-table { min-width: 1000px; }
.wf-audit-table td { height: 68px; }
.wf-audit-event { color: #333ac1; font-weight: 850; }
.wf-audit-resource-id { display: block; max-width: 180px; margin-top: 4px; overflow: hidden; color: #929aaa; font-size: 10px; text-overflow: ellipsis; }
.wf-audit-hash { padding: 5px 7px; border-radius: 6px; background: #f2f3f7; color: #626b7d; font-size: 10px; }
.wf-audit-empty { color: #a5acb8; }
.wf-state-pill.audit-pending { background: #fff2d9; color: #aa6800; }
.wf-state-pill.audit-archived { background: #e7f8f1; color: #168a65; }
.wf-state-pill.audit-failed { background: #ffebed; color: #c34550; }
.wf-audit-detail { width: min(780px, 100%); }
.wf-audit-detail-body { display: grid; gap: 20px; padding: 22px 24px 26px; }
.wf-audit-detail-body dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 14px; margin: 0; }
.wf-audit-detail-body dt { color: #8992a3; font-size: 10px; font-weight: 800; }
.wf-audit-detail-body dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #424b5e; font-size: 11px; }
.wf-audit-detail-body > div > span { color: #687286; font-size: 10px; font-weight: 850; }
.wf-audit-detail-body pre { max-height: 330px; margin: 8px 0 0; overflow: auto; padding: 15px; border-radius: 9px; background: #f4f5f8; color: #3d4659; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

@media (max-width: 1100px) {
  .wf-audit-storage-card { grid-template-columns: 1fr auto; }
  .wf-audit-storage-facts { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 840px) {
  .wf-audit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-audit-storage-card { grid-template-columns: 1fr; gap: 18px; }
  .wf-audit-storage-facts { grid-column: auto; grid-row: auto; flex-wrap: wrap; }
  .wf-audit-storage-card .wf-primary-button { width: 100%; }
}
@media (max-width: 600px) {
  .wf-audit-tools { flex-direction: column; }
  .wf-audit-tools select { width: 100%; }
  .wf-audit-list-head { align-items: flex-start; flex-direction: column; }
  .wf-audit-list-head .wf-outline-button { width: 100%; }
  .wf-audit-detail-body dl { grid-template-columns: 1fr; gap: 5px; }
  .wf-audit-detail-body dd { margin-bottom: 8px; }
}

/* 2026-08 dense admin layout: readable without wasting horizontal space */
.wf-admin-page {
  font-family: "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-identity-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-inline-row {
  grid-column: 1 / -1 !important;
  display: grid !important;
  width: 100%;
  gap: 6px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid {
  gap: 8px 10px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid label {
  gap: 3px;
  margin: 0;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid input,
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid select {
  height: 36px;
  min-height: 36px;
  padding: 0 9px;
}
.wf-contract-workbench .wf-contract-form .wf-admin-field-grid textarea {
  min-height: 64px;
  padding: 8px 9px;
}

.wf-policy-method-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.wf-policy-method-grid label {
  display: grid;
  grid-template-columns: 24px auto;
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 78px;
  align-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 9px;
  row-gap: 7px;
  padding: 8px 4px;
  border: 1px solid #e0e4e2;
  border-radius: 10px;
  background: #fff;
  color: #aeb7b2;
  text-align: center;
  cursor: pointer;
}
.wf-policy-method-grid label:has(input:checked) {
  border-color: #3478f6;
  background: #eef4ff;
  color: #3478f6;
}
.wf-policy-method-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.wf-policy-method-grid img {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: .62;
}
.wf-policy-method-grid label:has(input:checked) img { opacity: 1; }
.wf-policy-method-grid span {
  grid-column: 2;
  grid-row: 1;
  color: currentColor;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.wf-policy-method-grid small {
  grid-column: 1 / -1;
  grid-row: 2;
  color: currentColor;
  font-size: 10px;
  opacity: .78;
  white-space: nowrap;
}

.wf-policy-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 22px 0;
  padding: 13px 14px;
  border: 1px solid #dbe5f5;
  border-radius: 12px;
  background: #f6f9ff;
}
.wf-policy-selection-summary > strong { flex: 0 0 auto; color: #17223a; font-size: 12px; }
.wf-policy-selection-summary > span { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; color: #748097; font-size: 10px; }
.wf-policy-selection-summary em { padding: 5px 8px; border-radius: 999px; background: #3478f6; color: #fff; font-style: normal; font-weight: 800; }
.wf-policy-selection-summary b { margin-left: 3px; color: #46536c; font-size: 10px; }
.wf-policy-accordion { display: grid; gap: 8px; margin: 0 22px; }
.wf-policy-detail { overflow: hidden; border: 1px solid #e0e6ef; border-radius: 13px; background: #fff; }
.wf-policy-detail[hidden] { display: none; }
.wf-policy-detail > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 11px 14px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.wf-policy-detail > summary::-webkit-details-marker { display: none; }
.wf-policy-detail > summary::after { content: "⌄"; grid-column: 3; color: #8290a8; font-size: 16px; transition: transform .16s ease; }
.wf-policy-detail[open] > summary::after { transform: rotate(180deg); }
.wf-policy-detail > summary > span { min-width: 0; }
.wf-policy-detail > summary strong,
.wf-policy-detail > summary small { display: block; }
.wf-policy-detail > summary strong { color: #202c43; font-size: 13px; }
.wf-policy-detail > summary small { margin-top: 3px; color: #7f8aa0; font-size: 10px; font-weight: 600; }
.wf-policy-detail > summary em { grid-column: 2; grid-row: 1; padding: 5px 8px; border-radius: 999px; background: #edf3ff; color: #3478f6; font-size: 9px; font-style: normal; font-weight: 800; }
.wf-policy-detail[open] > summary { border-bottom: 1px solid #e8edf4; background: #fbfcff; }
.wf-policy-detail .wf-policy-fields { margin: 0; padding: 15px 14px 16px; }
.wf-policy-detail textarea { box-sizing: border-box; width: 100%; min-height: 106px; padding: 10px 11px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #343c4e; font: inherit; font-size: 11px; line-height: 1.5; resize: vertical; }
.wf-policy-info-note { margin: 0; padding: 11px 12px; border-radius: 9px; background: #eef5ff; color: #315e9b; font-size: 10px; font-weight: 700; line-height: 1.55; }
.wf-qr-mode-fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.wf-qr-mode-fieldset legend { grid-column: 1 / -1; margin-bottom: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-qr-mode-fieldset label { display: flex; align-items: flex-start; gap: 8px; min-height: 58px; padding: 11px; border: 1px solid #dde4ef; border-radius: 10px; cursor: pointer; }
.wf-qr-mode-fieldset label:has(input:checked) { border-color: #3478f6; background: #eef4ff; box-shadow: inset 0 0 0 1px #3478f6; }
.wf-qr-mode-fieldset input { width: 15px !important; height: 15px !important; min-height: 0 !important; margin-top: 2px; accent-color: #3478f6; }
.wf-qr-mode-fieldset span strong,
.wf-qr-mode-fieldset span small { display: block; }
.wf-qr-mode-fieldset span strong { color: #27344b; font-size: 11px; }
.wf-qr-mode-fieldset span small { margin-top: 4px; color: #7e899e; font-size: 9px; line-height: 1.4; }

@media (max-width: 600px) {
  .wf-policy-selection-summary { align-items: flex-start; flex-direction: column; }
  .wf-policy-selection-summary > span { justify-content: flex-start; }
  .wf-qr-mode-fieldset { grid-template-columns: 1fr; }
}

.wf-notification-admin-page .wf-notification-grid,
.wf-notification-admin-page .wf-notification-config-form { display: grid; gap: 10px; }
.wf-notification-admin-page .wf-notification-setup-grid {
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr);
  gap: 10px;
  align-items: stretch;
}
.wf-notification-admin-page .wf-notification-setup-grid > .wf-pro-card { height: 100%; }
.wf-notification-admin-page .wf-notification-settings,
.wf-notification-admin-page .wf-notification-smtp-card { display: flex; flex-direction: column; }
.wf-notification-admin-page .wf-notification-settings-body,
.wf-notification-admin-page .wf-notification-smtp-body { flex: 1 1 auto; }
.wf-notification-admin-page .wf-notification-settings-body,
.wf-notification-admin-page .wf-notification-smtp-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 9px;
  padding: 10px 12px 12px;
}
.wf-notification-admin-page .wf-notification-settings-body > label,
.wf-notification-admin-page .wf-notification-smtp-body > label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #596377;
  font-size: 10px;
  font-weight: 800;
}
.wf-notification-admin-page .wf-notification-settings-body input,
.wf-notification-admin-page .wf-notification-smtp-body input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid #dfe3eb;
  border-radius: 7px;
  background: #fff;
  color: #3f485a;
  font: inherit;
  font-size: 11px;
}
.wf-notification-admin-page .wf-channel-switches,
.wf-notification-admin-page .wf-adapter-list,
.wf-notification-admin-page .wf-notification-settings-body > button,
.wf-notification-admin-page .wf-smtp-secure-switch,
.wf-notification-admin-page .wf-smtp-security-note,
.wf-notification-admin-page .wf-notification-smtp-body > button { grid-column: 1 / -1; }
.wf-notification-admin-page .wf-channel-switches { padding: 7px 9px; }
.wf-notification-admin-page .wf-adapter-list { gap: 6px; }
.wf-notification-admin-page .wf-notification-settings-body > button,
.wf-notification-admin-page .wf-notification-smtp-body > button { min-height: 34px; }
.wf-notification-admin-page #testNotificationTelegram { grid-column: 1 / -1; min-height: 34px; }
.wf-notification-admin-page .wf-smtp-security-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: #f4f6fa;
  color: #697286;
  font-size: 10px;
  line-height: 1.45;
}
.wf-notification-admin-page .wf-notification-smtp-card .wf-pro-card-head em {
  color: #2e7659;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

/* Keep every notification checkbox on one accessible visual system. */
.wf-notification-admin-page input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  flex: 0 0 16px;
  place-content: center;
  margin: 0;
  padding: 0 !important;
  border: 1px solid #b9c1cf !important;
  border-radius: 4px !important;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
.wf-notification-admin-page input[type="checkbox"]::before {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(.7);
  transition: opacity .12s ease, transform .12s ease;
}
.wf-notification-admin-page input[type="checkbox"]:checked {
  border-color: #5d5fef !important;
  background: #5d5fef;
}
.wf-notification-admin-page input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.wf-notification-admin-page input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(93, 95, 239, .3);
  outline-offset: 2px;
}
.wf-notification-admin-page input[type="checkbox"]:disabled {
  border-color: #d9dee7 !important;
  background: #eef1f5;
  cursor: not-allowed;
}
.wf-notification-admin-page .wf-channel-switches {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}
.wf-notification-admin-page .wf-adapter-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.wf-notification-admin-page .wf-adapter-state {
  display: grid;
  min-height: 64px;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 9px;
  border: 1px solid #ee9fab;
  border-radius: 9px;
  background: #fff9fa;
  text-align: center;
}
.wf-notification-admin-page .wf-adapter-state.ready {
  border-color: #b9e2d2;
  background: #f4fbf8;
}
.wf-notification-admin-page .wf-adapter-state strong {
  color: #263044;
  font-size: 13px;
  line-height: 1.15;
}
.wf-notification-admin-page .wf-adapter-state p {
  margin: 7px 0;
  color: #4f5a6e;
  font-size: 11px;
  line-height: 1.5;
}
.wf-notification-admin-page .wf-adapter-state small {
  display: block;
  max-width: 100%;
  color: #9c3f50;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.wf-notification-admin-page .wf-adapter-state small span {
  color: #4b5568;
}
.wf-notification-admin-page .wf-adapter-state.ready small { color: #24745a; }
.wf-notification-admin-page .wf-adapter-operation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #6f788a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.wf-notification-admin-page .wf-adapter-operation em {
  display: inline-flex;
  min-width: 34px;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: #df3545;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.wf-notification-admin-page .wf-adapter-state.ready .wf-adapter-operation em { background: #15966b; color: #fff; }
.wf-notification-admin-page .wf-notification-smtp-body > .wf-smtp-secure-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Contract administration: employee-first browser with on-demand editor. */
.wf-contract-browser-card { min-height: 470px; overflow: hidden; }
.wf-contract-browser-card .wf-pro-card-head { min-height: 72px; }
.wf-contract-list-head-actions,
.wf-contract-form-head-actions { display: flex; align-items: center; gap: 8px; }
.wf-contract-add-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  background: #5d5fef;
  color: #fff;
  font: inherit;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(93, 95, 239, .24);
  cursor: pointer;
}
.wf-contract-add-button:hover { background: #4e51dc; transform: translateY(-1px); }
.wf-contract-add-button:focus-visible { outline: 3px solid rgba(93, 95, 239, .24); outline-offset: 3px; }
.wf-contract-add-button:disabled { background: #c8cdd8; box-shadow: none; transform: none; cursor: not-allowed; }
.wf-contract-browser-card .wf-admin-contract-list { min-height: 396px; align-content: start; }
.wf-contract-browser-card .wf-admin-contract-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0;
}
.wf-admin-contract-open {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(120px, .75fr) minmax(120px, .75fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 14px 6px 14px 16px;
  border: 0;
  background: transparent;
  color: #2c3446;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wf-admin-contract-item:hover { background: #f8f9fd; }
.wf-admin-contract-open:focus-visible { outline: 2px solid #696ce6; outline-offset: -3px; }
.wf-admin-contract-copy,
.wf-admin-contract-time { min-width: 0; }
.wf-admin-contract-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.wf-admin-contract-copy small { margin-top: 5px; color: #7e8799; font-size: 10px; }
.wf-admin-contract-time small { margin: 0 0 4px; color: #9098a8; font-size: 9px; font-weight: 800; }
.wf-admin-contract-time strong { color: #545e72; font-size: 10px; font-weight: 800; white-space: nowrap; }
.wf-contract-browser-card .wf-admin-contract-actions { padding-right: 14px; }

.wf-contract-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  place-items: center;
  padding: 28px;
}
.wf-contract-editor-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(23, 29, 44, .48);
  backdrop-filter: blur(4px);
}
.wf-contract-workbench .wf-contract-editor-dialog {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 15px;
  box-shadow: 0 28px 80px rgba(18, 25, 42, .28);
  animation: wf-modal-in .18s ease both;
}
.wf-contract-editor-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #e0e4ec;
  border-radius: 50%;
  background: #fff;
  color: #7b8496;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wf-part-time-terms {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin: 2px 0;
  padding: 15px;
  border: 1px solid #dce6ff;
  border-radius: 12px;
  background: #f8faff;
}
.wf-part-time-terms[hidden] { display: none !important; }
.wf-part-time-terms > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wf-part-time-terms > header span { color: #6472d8; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.wf-part-time-terms > header h3 { margin: 3px 0 2px; color: #28324a; font-size: 15px; letter-spacing: -.025em; }
.wf-part-time-terms > header p { max-width: 610px; margin: 0; color: #788399; font-size: 10px; font-weight: 650; line-height: 1.55; }
.wf-part-time-terms > header > strong { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e9efff; color: #5665c7; font-size: 9px; white-space: nowrap; }
.wf-part-time-wage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wf-part-time-wage-grid label { min-width: 0; }
.wf-part-time-schedule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 2px; }
.wf-part-time-schedule-head > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.wf-part-time-schedule-head strong { color: #3d475b; font-size: 11px; }
.wf-part-time-schedule-head small { color: #8993a5; font-size: 9px; }
.wf-part-time-presets { display: flex; gap: 5px; }
.wf-part-time-presets button { min-height: 27px; padding: 0 9px; border: 1px solid #dce2ef; border-radius: 7px; background: #fff; color: #657086; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.wf-part-time-presets button:hover { border-color: #aeb9e8; color: #4d58bd; }
.wf-part-time-schedule { display: grid; gap: 6px; }
.wf-outside-schedule-policy { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 11px 12px; border: 1px solid #e1e7f3; border-radius: 10px; background: #fff; }
.wf-outside-schedule-policy .wf-field-title { grid-column: 1; }
.wf-outside-schedule-policy select { grid-column: 1; min-height: 40px; }
.wf-outside-schedule-policy small { grid-column: 2; grid-row: 1 / span 2; color: #778299; font-size: 9px; font-weight: 650; line-height: 1.55; }
.wf-part-time-day {
  display: grid;
  grid-template-columns: 96px repeat(2, minmax(105px, 1fr)) minmax(90px, .8fr) 74px;
  align-items: end;
  gap: 7px;
  padding: 8px;
  border: 1px solid #e5e9f2;
  border-radius: 9px;
  background: #fff;
}
.wf-part-time-day > label { min-width: 0; }
.wf-part-time-day-check { display: flex !important; min-height: 36px; align-items: center; grid-template-columns: none !important; gap: 8px !important; color: #313b50 !important; font-size: 11px !important; }
.wf-part-time-day-check input { width: 18px !important; height: 18px !important; min-height: 18px !important; accent-color: #5d5fef; }
.wf-part-time-day-check strong { font-size: 11px; }
.wf-part-time-day .wf-part-time-day-minutes { align-self: center; color: #67738a; font-size: 10px; font-weight: 850; text-align: right; white-space: nowrap; }
.wf-part-time-day:not(.is-selected) label:not(.wf-part-time-day-check),
.wf-part-time-day:not(.is-selected) .wf-part-time-day-minutes { opacity: .42; }
.wf-part-time-rule-result { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; padding: 11px 12px; border-radius: 10px; background: #eef3ff; }
.wf-part-time-rule-result > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #dce6ff; color: #5063ca; font-size: 12px; font-weight: 900; }
.wf-part-time-rule-result strong { display: block; color: #364263; font-size: 11px; }
.wf-part-time-rule-result p { margin: 3px 0 0; color: #6d7890; font-size: 9px; font-weight: 650; line-height: 1.55; }
.wf-part-time-rule-result.ok { background: #eaf8f0; }
.wf-part-time-rule-result.ok > span { background: #ceefdc; color: #16894e; }
.wf-part-time-rule-result.ok strong { color: #176a42; }
.wf-part-time-rule-result.error { background: #fff0f1; }
.wf-part-time-rule-result.error > span { background: #ffd9dd; color: #c42e3c; }
.wf-part-time-rule-result.error strong { color: #a82431; }
.wf-part-time-rule-result.warn { background: #fff8e7; }
.wf-part-time-rule-result.warn > span { background: #f9e9bd; color: #976a00; }

.wf-admin-contract-preview { z-index: 125; }
.wf-admin-contract-preview > header { background: #fff; }
.wf-admin-contract-preview > header > span { justify-self: end; }
.wf-admin-contract-preview .wf-contract-document { background: #f4f6fa; }
.wf-admin-contract-preview .wf-contract-paper { padding: 48px 54px; border: 1px solid #e1e5ec; border-radius: 4px; background: #fff; box-shadow: 0 16px 45px rgba(26, 34, 52, .08); }
.wf-admin-contract-preview > footer {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
}
.wf-admin-contract-preview > footer > span { color: #687286; font-size: 11px; font-weight: 750; }
.wf-admin-contract-preview > footer > button { min-height: 36px; }

.wf-assessment-admin-content {
  height: calc(100vh - 108px);
  min-height: 620px;
  padding: 0;
  overflow: hidden;
}
.wf-assessment-frame { width: 100%; height: 100%; border: 0; background: #f6f8fb; }
.wf-assessment-admin-page .wf-pro-nav { min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.wf-assessment-admin-page .wf-pro-account { flex: 0 0 auto; background: #fff; }

/* Contract editor density: desktop rows stay horizontal. */
@media (min-width: 961px) {
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-identity-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  .wf-notification-admin-page .wf-notification-setup-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) and (min-width: 521px) {
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .wf-part-time-wage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-part-time-day { grid-template-columns: 78px repeat(2, minmax(95px, 1fr)) minmax(82px, .8fr) 64px; }
}
@media (max-width: 900px) {
  .wf-admin-contract-open { grid-template-columns: minmax(170px, 1fr) minmax(110px, .7fr); }
  .wf-admin-contract-time:last-child { display: none; }
  .wf-contract-editor-modal { padding: 14px; }
  .wf-contract-workbench .wf-contract-editor-dialog { max-height: calc(100vh - 28px); }
}
@media (max-width: 700px) {
  .wf-policy-method-grid { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .wf-policy-method-grid label { min-height: 68px; }
  .wf-notification-admin-page .wf-notification-settings-body,
  .wf-notification-admin-page .wf-notification-smtp-body { grid-template-columns: 1fr; }
  .wf-notification-admin-page .wf-adapter-list { grid-template-columns: 1fr; }
  .wf-admin-contract-open { grid-template-columns: 1fr; gap: 5px; }
  .wf-admin-contract-time { display: none; }
  .wf-admin-contract-preview .wf-contract-paper { padding: 30px 22px; }
  .wf-admin-contract-preview > footer { align-items: stretch; flex-direction: column; }
}
@media (max-width: 520px) {
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-identity-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contract-workbench .wf-contract-form .wf-admin-field-grid > .wf-contract-wage-row {
    grid-template-columns: 1fr !important;
  }
  .wf-contract-editor-modal { padding: 0; }
  .wf-contract-workbench .wf-contract-editor-dialog { width: 100%; max-height: 100dvh; border-radius: 0; }
  .wf-part-time-terms { margin-right: -3px; margin-left: -3px; padding: 12px 10px; }
  .wf-part-time-terms > header { align-items: flex-start; flex-direction: column; gap: 7px; }
  .wf-part-time-wage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-part-time-schedule-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .wf-part-time-schedule-head > div:first-child { align-items: flex-start; flex-direction: column; gap: 2px; }
  .wf-part-time-presets { margin-top: 5px; }
  .wf-part-time-day { grid-template-columns: 56px minmax(70px, 1fr) minmax(70px, 1fr) 72px; gap: 5px; padding: 7px 6px; }
  .wf-part-time-day .wf-part-time-day-minutes { display: none; }
  .wf-part-time-day-check { gap: 5px !important; }
  .wf-part-time-day-check input { width: 16px !important; height: 16px !important; min-height: 16px !important; }
  .wf-outside-schedule-policy { grid-template-columns: 1fr; }
  .wf-outside-schedule-policy .wf-field-title,
  .wf-outside-schedule-policy select,
  .wf-outside-schedule-policy small { grid-column: 1; grid-row: auto; }
  .wf-part-time-rule-result { grid-template-columns: 26px 1fr; padding: 10px; }
}

/* Contract editor: page-like desktop workspace, compact full-screen mobile editor. */
.wf-contract-editor-kicker {
  display: block;
  margin-bottom: 4px;
  color: #6267db;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.wf-contract-section-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 7px;
  padding: 14px 0 10px;
  border-top: 1px solid #e7eaf0;
}
.wf-contract-section-heading:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }
.wf-contract-section-heading > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 8px;
  background: #eef0ff;
  color: #575bd7;
  font-size: 10px;
  font-weight: 900;
}
.wf-contract-section-heading strong,
.wf-contract-section-heading small { display: block; }
.wf-contract-section-heading strong { color: #2e3547; font-size: 12px; }
.wf-contract-section-heading small { margin-top: 3px; color: #8a93a4; font-size: 9px; font-weight: 650; }
.wf-contract-address-group { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); align-items: end; gap: 10px; }
.wf-contract-address-group > label { min-width: 0; display: grid; gap: 7px; color: #596275; font-size: 10px; font-weight: 800; }
.wf-contract-address-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.wf-contract-address-search-row button { min-width: 84px; height: 40px; padding: 0 12px; border: 1px solid #bfcaf4; border-radius: 8px; background: #eef1ff; color: #5865c8; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.wf-contract-address-search-row button:hover, .wf-contract-address-search-row button:focus-visible { border-color: #6c79dd; background: #e5e9ff; outline: 0; }
.wf-address-dialog { position: fixed; z-index: 220; inset: 0; display: grid; place-items: center; padding: 18px; }
.wf-address-dialog-backdrop { position: absolute; inset: 0; border: 0; background: rgba(18, 25, 39, .62); backdrop-filter: blur(5px); }
.wf-address-dialog > section { width: min(620px, 100%); max-height: min(760px, calc(100dvh - 36px)); position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(18, 25, 39, .3); }
.wf-address-dialog header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #e5e9f1; }
.wf-address-dialog header span { display: block; color: #6370d5; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.wf-address-dialog h2 { margin: 3px 0 0; color: #252d3e; font-size: 19px; }
.wf-address-dialog header > button { width: 36px; height: 36px; border: 1px solid #e1e6ef; border-radius: 50%; background: #fff; color: #748096; font-size: 22px; cursor: pointer; }
.wf-address-frame { height: var(--postcode-height, 520px); min-height: 380px; background: #f5f7fa; }
.wf-part-time-schedule-columns { display: none; }
.wf-contract-action-note { color: #7b8597; font-size: 10px; font-weight: 700; }
.wf-contract-action-buttons { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }

@media (min-width: 961px) {
  .wf-contracts-page .wf-contract-editor-modal {
    inset: 0 0 0 258px;
    display: block;
    padding: 0;
    background: #f4f6fa;
  }
  .wf-contracts-page .wf-contract-editor-backdrop { display: none; }
  .wf-contracts-page .wf-contract-workbench .wf-contract-editor-dialog {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: #f4f6fa;
    box-shadow: none;
    animation: wf-editor-page-in .18s ease both;
  }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-pro-card-head {
    position: sticky;
    z-index: 5;
    top: 0;
    min-height: 78px;
    padding: 15px 30px !important;
    border-bottom: 1px solid #dfe4ed;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 18px rgba(35, 46, 70, .05);
    backdrop-filter: blur(16px);
  }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-pro-card-head h2 { margin: 0; font-size: 21px; }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-pro-card-head p { margin-top: 4px; font-size: 10px; }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid {
    width: calc(100% - 52px);
    max-width: 1480px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px 14px;
    margin: 22px auto 0 !important;
    padding: 22px 24px 30px !important;
    border: 1px solid #e0e5ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(39, 49, 70, .04);
  }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > label,
  .wf-contracts-page .wf-contract-editor-dialog .wf-contract-inline-row > label { font-size: 11px; }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid input,
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid select {
    height: 40px;
    min-height: 40px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 12px;
  }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid textarea {
    min-height: 74px;
    padding: 10px 11px;
    font-size: 12px;
  }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > label.span-2 { grid-column: 1 / -1; }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > .wf-contract-identity-row {
    grid-column: span 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > .wf-contract-time-row,
  .wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > .wf-contract-wage-row,
  .wf-contracts-page .wf-contract-editor-dialog .wf-part-time-terms { grid-column: 1 / -1 !important; }
  .wf-contracts-page .wf-part-time-terms {
    gap: 14px;
    padding: 18px 20px 20px;
    border-radius: 10px;
  }
  .wf-contracts-page .wf-part-time-terms > header h3 { font-size: 17px; }
  .wf-contracts-page .wf-part-time-terms > header p,
  .wf-contracts-page .wf-part-time-rule-result p { font-size: 10px; }
  .wf-contracts-page .wf-part-time-schedule-columns,
  .wf-contracts-page .wf-part-time-day {
    display: grid;
    grid-template-columns: 130px repeat(2, minmax(120px, 1fr)) minmax(100px, .72fr) 90px;
    gap: 12px;
  }
  .wf-contracts-page .wf-part-time-schedule-columns {
    padding: 9px 13px;
    border: 1px solid #e3e8f1;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #f1f4f9;
    color: #737e92;
    font-size: 10px;
    font-weight: 850;
  }
  .wf-contracts-page .wf-part-time-schedule-columns span:last-child { text-align: right; }
  .wf-contracts-page .wf-part-time-schedule { gap: 0; }
  .wf-contracts-page .wf-part-time-day {
    align-items: center;
    padding: 10px 13px;
    border-radius: 0;
    border-bottom: 0;
  }
  .wf-contracts-page .wf-part-time-day:last-child { border-bottom: 1px solid #e5e9f2; border-radius: 0 0 8px 8px; }
  .wf-contracts-page .wf-part-time-day > label:not(.wf-part-time-day-check) > span { display: none; }
  .wf-contracts-page .wf-part-time-day-check { min-height: 40px; }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-form-message {
    width: calc(100% - 52px);
    max-width: 1480px;
    margin: 8px auto 0;
  }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-admin-form-actions {
    position: sticky;
    z-index: 4;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 18px 0 0;
    padding: 13px 30px 14px;
    border-top: 1px solid #dfe4ed;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 18px rgba(35, 46, 70, .05);
    backdrop-filter: blur(16px);
  }
  .wf-contracts-page .wf-contract-action-buttons { width: min(430px, 50%); }
  .wf-contracts-page .wf-contract-action-buttons button { min-height: 42px !important; }
}

@media (max-width: 960px) {
  .wf-contracts-page .wf-contract-action-note { display: none; }
  .wf-contracts-page .wf-contract-editor-dialog > .wf-admin-form-actions { display: block; }
  .wf-contracts-page .wf-contract-action-buttons { width: 100%; }
  .wf-contract-address-group { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .wf-address-dialog { padding: 0; }
  .wf-address-dialog > section { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .wf-address-frame { flex: 1; height: auto; min-height: 0; }
  .wf-contract-address-search-row button { min-width: 80px; }
  .wf-contract-section-heading { padding-top: 12px; }
  .wf-contract-section-heading small { display: none; }
}

@keyframes wf-editor-page-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.wf-contract-schedule-table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 12px; }
.wf-contract-schedule-table th, .wf-contract-schedule-table td { padding: 8px 7px; border: 1px solid #e1e6e3; text-align: left; }
.wf-contract-schedule-table th { background: #f5f7f6; color: #667269; font-weight: 800; }

/* 2026-08-11: warm operator dashboard, compact contract directory and account security. */
.wf-admin-page {
  font-family: "Geist", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.wf-table-account {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #d9deea;
  border-radius: 8px;
  background: #fff;
  color: #566174;
  font: inherit;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.wf-table-account:hover { border-color: #aeb8cc; background: #f6f8fb; color: #263248; }
.wf-password-admin-dialog { width: min(560px, 100%); overflow: hidden; border-radius: 22px; }
.wf-password-admin-dialog > header p,
.wf-signing-authority-dialog > header p { margin: 5px 0 0; color: #7d8799; font-size: 11px; line-height: 1.5; }
.wf-password-admin-dialog form { display: grid; gap: 15px; padding: 20px 24px 24px; }
.wf-password-admin-dialog form > label { display: grid; gap: 7px; color: #525d70; font-size: 11px; font-weight: 850; }
.wf-password-admin-dialog input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid #dce2ec; border-radius: 10px; background: #fff; color: #263044; font: inherit; font-size: 12px; outline: 0; }
.wf-password-admin-dialog input:focus { border-color: #5d65e8; box-shadow: 0 0 0 4px rgba(93, 101, 232, .09); }
.wf-password-person { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e4e8f0; border-radius: 14px; background: #f8f9fc; }
.wf-password-person > span:nth-child(2) { min-width: 0; }
.wf-password-person strong, .wf-password-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-password-person strong { color: #232b3c; font-size: 14px; }
.wf-password-person small { margin-top: 4px; color: #7c879a; font-size: 10px; }
.wf-password-person em { padding: 6px 8px; border-radius: 99px; background: #fff1df; color: #a86812; font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.wf-password-person em.active { background: #e6f8ef; color: #147a55; }
.wf-password-security-note { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #f1f3ff; color: #5d66c5; }
.wf-password-security-note strong { font-size: 11px; }
.wf-password-security-note span { font-size: 10px; line-height: 1.5; }
.wf-password-generate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.wf-password-generate-row button { min-height: 44px; white-space: nowrap; }

.wf-signing-authority-button { min-height: 42px; border-color: #cfd6e4; color: #39465a; box-shadow: 0 8px 22px rgba(37, 49, 73, .06); }
.wf-signing-authority-button:hover { border-color: #9faac0; transform: translateY(-1px); }
.wf-signing-authority-dialog { width: min(980px, 100%); max-height: min(760px, calc(100dvh - 44px)); overflow: hidden; border-radius: 22px; }
.wf-signing-authority-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); min-height: 420px; }
.wf-signing-authority-body > .wf-authority-form { align-content: start; margin: 0; padding: 22px 24px 24px; border-right: 1px solid #e7ebf2; }
.wf-signing-authority-body > aside { min-width: 0; padding: 22px; background: #f8f9fc; }
.wf-signing-authority-list-head { display: grid; gap: 4px; margin-bottom: 14px; }
.wf-signing-authority-list-head strong { color: #283145; font-size: 14px; }
.wf-signing-authority-list-head span { color: #838da0; font-size: 10px; }
.wf-signing-authority-body .wf-authority-list { max-height: 420px; overflow: auto; }

.wf-contracts-page .wf-pro-content { gap: 14px; }
.wf-contracts-page .wf-contract-directory .wf-directory-head { gap: 14px; padding: 15px 14px 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 { min-width: max-content; font-size: 15px; letter-spacing: -.03em; }
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 small { margin-left: 2px; color: #8a93a4; font-size: 10px; font-weight: 750; letter-spacing: 0; }
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 small span { color: inherit; font-size: inherit; }
.wf-contracts-page .wf-contract-directory .wf-directory-status-tabs { display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 0 auto; padding: 2px; border-radius: 8px; }
.wf-contracts-page .wf-contract-directory .wf-directory-status-tabs button { min-width: 48px; min-height: 27px; padding: 0 7px; border-radius: 6px; font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-status-tabs button em { font-size: 8px; }
.wf-contracts-page .wf-contract-directory .wf-directory-search { margin: 0 14px 8px; gap: 4px; font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-search input { height: 34px; font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-sortbar { margin: 0 14px 8px; border-radius: 7px; }
.wf-contracts-page .wf-contract-directory .wf-directory-sortbar button { min-height: 29px; font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person { gap: 8px; padding: 9px 13px; }
.wf-contracts-page .wf-contract-directory .wf-directory-avatar { width: 29px; height: 29px; font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person-copy strong { font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person-copy small { margin-top: 2px; font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person em { font-size: 9px; }
.wf-contracts-page .wf-contract-directory .wf-directory-list { max-height: calc(100vh - 274px); }

.wf-home-dashboard { gap: 16px; background: radial-gradient(circle at 82% 3%, rgba(84, 126, 255, .09), transparent 24%), #f4f6fa; }
.wf-home-welcome { position: relative; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .7fr); min-height: 244px; overflow: hidden; border-radius: 24px; background: #0c1830; color: #fff; box-shadow: 0 26px 60px rgba(13, 29, 58, .18); }
.wf-home-welcome::before { content: ""; position: absolute; width: 460px; height: 460px; right: -90px; top: -270px; border: 1px solid rgba(104, 157, 255, .25); border-radius: 50%; box-shadow: 0 0 0 90px rgba(67, 129, 255, .035), 0 0 0 180px rgba(67, 129, 255, .025); pointer-events: none; }
.wf-home-welcome::after { content: ""; position: absolute; width: 320px; height: 240px; left: 33%; bottom: -170px; border-radius: 50%; background: rgba(36, 196, 168, .14); filter: blur(44px); pointer-events: none; }
.wf-home-welcome-copy { position: relative; z-index: 1; align-self: center; padding: 38px 42px; }
.wf-home-welcome-copy > span { display: block; margin-bottom: 9px; color: #a9c5ef; font-size: 14px; font-weight: 800; }
.wf-home-welcome-copy h2 { max-width: 780px; margin: 0; font-size: clamp(30px, 3vw, 43px); line-height: 1.14; letter-spacing: -.055em; }
.wf-home-welcome-copy p { margin: 14px 0 0; color: #c1cde0; font-size: 14px; line-height: 1.6; }
.wf-home-welcome-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.wf-home-welcome-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #edf4ff; font-size: 13px; font-weight: 850; text-decoration: none; transition: transform .22s ease, background-color .22s ease; }
.wf-home-welcome-actions a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); }
.wf-home-welcome-actions .wf-home-primary-link { border-color: #347ef4; background: #347ef4; color: #fff; box-shadow: 0 10px 24px rgba(52, 126, 244, .3); }
.wf-home-qr-launch { position: relative; z-index: 1; width: calc(100% - 34px); min-height: 172px; align-self: center; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-right: 34px; padding: 24px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; background: rgba(255, 255, 255, .075); color: #fff; font: inherit; text-align: left; cursor: pointer; backdrop-filter: blur(16px); transition: transform .3s ease, background-color .3s ease, border-color .3s ease; }
.wf-home-qr-launch:hover { transform: translateY(-4px); border-color: rgba(121, 169, 255, .5); background: rgba(255, 255, 255, .11); }
.wf-home-qr-symbol { width: 64px; height: 64px; position: relative; display: block; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.wf-home-qr-launch:hover .wf-home-qr-symbol { transform: scale(1.055) rotate(-1.5deg); }
.wf-home-qr-symbol svg { width: 100%; height: 100%; display: block; }
.wf-home-qr-symbol .wf-qr-corner { fill: none; stroke: #eb2a2f; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wf-home-qr-symbol .wf-qr-mark { fill: #101218; }
.wf-home-qr-symbol .wf-qr-scan-line { fill: none; stroke: rgba(255, 80, 92, .82); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 64, 76, .45)); animation: wf-home-qr-sweep 2.2s ease-in-out infinite; }
.wf-home-qr-launch > span:nth-child(2) { min-width: 0; }
.wf-home-qr-launch small, .wf-home-qr-launch strong, .wf-home-qr-launch em { display: block; }
.wf-home-qr-launch small { color: #b3c5df; font-size: 11px; font-weight: 850; }
.wf-home-qr-launch strong { margin-top: 6px; font-size: 19px; letter-spacing: -.03em; }
.wf-home-qr-launch em { overflow: hidden; margin-top: 6px; color: #a1b7d7; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.wf-home-qr-launch > b { padding: 7px 9px; border-radius: 7px; background: rgba(255, 255, 255, .11); color: #d1dced; font-size: 10px; }

.wf-home-bento { display: grid; grid-template-columns: minmax(0, 8fr) minmax(310px, 4fr); grid-auto-flow: dense; gap: 16px; align-items: stretch; }
.wf-home-live-card, .wf-home-request-card { min-width: 0; border: 1px solid #e0e5ed; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(29, 43, 66, .045); }
.wf-home-live-card { overflow: hidden; }
.wf-home-live-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; }
.wf-home-live-card > header h2, .wf-home-request-card h2 { margin: 8px 0 0; color: #1e2738; font-size: 22px; letter-spacing: -.035em; }
.wf-home-live-card > header > a { color: #3e70d5; font-size: 12px; font-weight: 850; text-decoration: none; }
.wf-live-indicator { display: inline-flex; align-items: center; gap: 8px; color: #58677e; font-size: 12px; font-weight: 850; }
.wf-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #1cbd80; box-shadow: 0 0 0 5px rgba(28, 189, 128, .1); animation: wf-live-pulse 2s ease-in-out infinite; }
.wf-home-live-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 24px 18px; overflow: hidden; border: 1px solid #e8ebf1; border-radius: 13px; background: #f8f9fc; }
.wf-home-live-summary > div { padding: 13px 15px; border-right: 1px solid #e7eaf0; }
.wf-home-live-summary > div:last-child { border-right: 0; }
.wf-home-live-summary span { display: block; color: #707c90; font-size: 11px; font-weight: 800; }
.wf-home-live-summary strong { display: block; margin-top: 6px; color: #252e40; font-size: 15px; }
.wf-home-live-summary b { font-size: 24px; letter-spacing: -.04em; }
.wf-home-attendance-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; min-height: 180px; border-top: 1px solid #edf0f4; }
.wf-home-attendance-group { min-width: 0; overflow: hidden; }
.wf-home-attendance-group + .wf-home-attendance-group { border-left: 1px solid #e8ecf2; }
.wf-home-attendance-group > header { min-height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid #edf0f4; background: #fbfcfe; }
.wf-home-attendance-group > header > span { display: inline-flex; align-items: center; gap: 8px; color: #536074; font-size: 12px; font-weight: 850; }
.wf-home-attendance-group > header i { width: 7px; height: 7px; border-radius: 50%; background: #20b982; box-shadow: 0 0 0 4px rgba(32, 185, 130, .1); }
.wf-home-attendance-group.is-absent > header i { background: #aeb7c5; box-shadow: 0 0 0 4px rgba(126, 139, 158, .09); }
.wf-home-attendance-group > header > strong { color: #2a3446; font-size: 12px; }
.wf-home-attendance-group > header b { margin-right: 2px; font-size: 18px; letter-spacing: -.03em; }
.wf-home-attendance-list { width: 100%; max-width: 100%; max-height: 224px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.wf-home-attendance-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 17px; border-bottom: 1px solid #edf0f4; transition: background-color .18s ease, transform .18s ease; }
.wf-home-attendance-list article:last-child { border-bottom: 0; }
.wf-home-attendance-list article:hover { z-index: 1; transform: translateX(2px); background: #f8fafd; }
.wf-home-person-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #eaf2ff; color: #346dd5; font-size: 13px; font-weight: 900; }
.wf-home-attendance-list article.is-absent .wf-home-person-avatar { background: #f0f2f5; color: #778296; }
.wf-home-attendance-list article > div { min-width: 0; }
.wf-home-attendance-list article strong, .wf-home-attendance-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-home-attendance-list article strong { color: #293245; font-size: 13px; }
.wf-home-attendance-list article small { margin-top: 4px; color: #7d889b; font-size: 11px; }
.wf-home-attendance-meta { display: grid; justify-items: end; gap: 4px; }
.wf-home-attendance-meta time { color: #5d697f; font-size: 11px; font-weight: 800; }
.wf-home-attendance-meta em { padding: 5px 8px; border-radius: 99px; background: #e8f8f1; color: #147d58; font-size: 10px; font-style: normal; font-weight: 900; text-align: center; white-space: nowrap; }
.wf-home-attendance-meta em.done { background: #eef1f5; color: #747e8f; }
.wf-home-attendance-meta em.waiting { background: #f2f3f6; color: #747f91; }
.wf-home-attendance-empty { min-height: 116px; display: grid; place-content: center; gap: 5px; padding: 16px; color: #8993a4; text-align: center; }
.wf-home-attendance-empty strong { color: #505d72; font-size: 12px; }
.wf-home-attendance-empty span { font-size: 11px; }
.wf-home-attendance-empty.is-complete strong { color: #16805b; }

.wf-home-request-card { padding: 22px; }
.wf-home-request-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wf-home-request-card > header > span { color: #58667d; font-size: 12px; font-weight: 850; }
.wf-home-request-card > header > strong { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #182844; color: #fff; font-size: 12px; }
.wf-home-request-card h2 { margin-top: 8px; }
.wf-home-request-list { display: grid; gap: 5px; margin-top: 17px; }
.wf-home-request-list a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.wf-home-request-list a:hover { transform: translateX(3px); background: #f6f8fb; }
.wf-home-request-list a > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e9f7f0; color: #187a59; font-size: 10px; font-weight: 900; }
.wf-home-request-list a > span.contract { background: #edf0ff; color: #555bd0; }
.wf-home-request-list a > span.people { background: #fff2e6; color: #ae6b20; }
.wf-home-request-list a > span.time { background: #eaf5ff; color: #2872b9; }
.wf-home-request-list a div { min-width: 0; }
.wf-home-request-list a strong, .wf-home-request-list a small { display: block; }
.wf-home-request-list a strong { color: #2d3648; font-size: 13px; }
.wf-home-request-list a small { margin-top: 4px; color: #7e899b; font-size: 11px; }
.wf-home-request-list a > b { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #f1f3f6; color: #536074; font-size: 11px; }

.wf-home-lower-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); grid-auto-flow: dense; gap: 16px; align-items: start; }
.wf-home-operations { overflow: hidden; }
.wf-home-operation-numbers { display: grid; grid-template-columns: repeat(3, 1fr); }
.wf-home-operation-numbers a { min-width: 0; padding: 18px; border-right: 1px solid #eceff4; color: inherit; text-decoration: none; }
.wf-home-operation-numbers a:last-child { border-right: 0; }
.wf-home-operation-numbers span, .wf-home-operation-numbers strong { display: block; }
.wf-home-operation-numbers span { color: #707c8f; font-size: 11px; font-weight: 800; }
.wf-home-operation-numbers strong { margin-top: 8px; color: #283144; font-size: 13px; }
.wf-home-operation-numbers b { font-size: 22px; letter-spacing: -.04em; }
.wf-home-operation-action { display: flex; align-items: center; justify-content: space-between; margin: 0 16px 16px; padding: 14px 15px; border-radius: 12px; background: #eff4ff; color: #365faa; font-size: 12px; font-weight: 850; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.wf-home-operation-action:hover { transform: translateY(-2px); background: #e5edff; }
.wf-home-qr-card { border-radius: 24px !important; }

.wf-web-qr-scanner { z-index: 260; place-items: center; padding: 18px; }
.wf-web-qr-scanner > section { position: relative; width: min(520px, 100%); overflow: hidden; border-radius: 24px; background: #0b1220; color: #fff; box-shadow: 0 34px 90px rgba(3, 8, 17, .48); }
.wf-web-qr-scanner header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; }
.wf-web-qr-scanner header span { color: #78a8f6; font-size: 9px; font-weight: 900; }
.wf-web-qr-scanner h2 { margin: 3px 0 0; font-size: 20px; }
.wf-web-qr-scanner header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 22px; cursor: pointer; }
.wf-web-qr-camera { position: relative; margin: 0 16px; overflow: hidden; aspect-ratio: 1; border-radius: 19px; background: #02050a; }
.wf-web-qr-camera video { width: 100%; height: 100%; display: block; object-fit: cover; }
.wf-web-qr-frame { position: absolute; width: 64%; aspect-ratio: 1; left: 18%; top: 18%; border: 3px solid #56dfad; border-radius: 24px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.wf-web-qr-frame::after { content: ""; position: absolute; inset: 50% 8px auto; height: 2px; background: linear-gradient(90deg, transparent, #71f2c1, transparent); box-shadow: 0 0 12px #56dfad; animation: wf-qr-scan 2.2s ease-in-out infinite; }
.wf-web-qr-scanner p { margin: 16px 20px 5px; color: #dbe7f8; font-size: 12px; font-weight: 750; text-align: center; }
.wf-web-qr-scanner > section > small { display: block; margin: 0 24px 20px; color: #7f91aa; font-size: 9px; line-height: 1.6; text-align: center; }

@keyframes wf-live-pulse { 50% { box-shadow: 0 0 0 8px rgba(28, 189, 128, 0); } }
@keyframes wf-qr-scan { 0%, 100% { transform: translateY(-70px); opacity: .2; } 50% { transform: translateY(70px); opacity: 1; } }
@keyframes wf-home-qr-sweep { 0%, 100% { transform: translateY(-9px); opacity: .45; } 50% { transform: translateY(9px); opacity: 1; } }

@media (max-width: 1120px) {
  .wf-home-welcome { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); }
  .wf-home-bento, .wf-home-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wf-signing-authority-body { grid-template-columns: 1fr; overflow-y: auto; }
  .wf-signing-authority-body > .wf-authority-form { border-right: 0; border-bottom: 1px solid #e7ebf2; }
  .wf-home-welcome { grid-template-columns: 1fr; }
  .wf-home-welcome-copy { padding: 28px 24px 18px; }
  .wf-home-welcome-copy h2 { font-size: 32px; }
  .wf-home-qr-launch { width: auto; min-height: 120px; margin: 0 20px 22px; padding: 18px; }
  .wf-home-live-card > header, .wf-home-request-card { padding: 18px; }
  .wf-home-live-summary { margin: 0 18px 14px; }
  .wf-home-attendance-split { grid-template-columns: 1fr; }
  .wf-home-attendance-group + .wf-home-attendance-group { border-left: 0; border-top: 1px solid #e8ecf2; }
  .wf-home-attendance-list { max-height: 240px; }
  .wf-home-attendance-list article { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 9px 18px; }
  .wf-contracts-page .wf-contract-directory .wf-directory-head { align-items: flex-start; flex-direction: column; }
  .wf-contracts-page .wf-contract-directory .wf-directory-status-tabs { width: 100%; margin: 0; justify-content: stretch; }
  .wf-contracts-page .wf-contract-directory .wf-directory-status-tabs button { flex: 1; }
}
@media (max-width: 520px) {
  .wf-password-generate-row { grid-template-columns: 1fr; }
  .wf-password-person { grid-template-columns: 42px minmax(0, 1fr); }
  .wf-password-person em { grid-column: 1 / -1; width: fit-content; }
  .wf-home-live-summary, .wf-home-operation-numbers { grid-template-columns: 1fr; }
  .wf-home-live-summary > div, .wf-home-operation-numbers a { border-right: 0; border-bottom: 1px solid #e7eaf0; }
  .wf-home-live-summary > div:last-child, .wf-home-operation-numbers a:last-child { border-bottom: 0; }
  .wf-web-qr-scanner { padding: 0; }
  .wf-web-qr-scanner > section { width: 100%; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
}

/* Employee lifecycle: registration, signup and offboarding. */
.wf-login-signup-link { width: fit-content; margin: -3px auto 0; padding: 4px 0; border: 0; background: transparent; color: #66748a; font: inherit; font-size: 12px; cursor: pointer; }
.wf-login-signup-link strong { color: #347ef4; text-decoration: underline; text-underline-offset: 3px; }
.wf-login-modal-dialog label small { color: #8b95a6; font-size: 10px; font-weight: 600; }
.wf-pro-header-actions { display: flex; align-items: center; gap: 8px; }
.wf-employee-metrics { grid-template-columns: repeat(5, minmax(0, 220px)); }
.wf-employee-metrics .wf-resignation-metric { padding: 0; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.wf-resignation-metric > button { display: grid; width: 100%; height: 100%; min-height: 94px; align-content: center; padding: 17px 20px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wf-resignation-metric > button:hover { background: #fafaff; }
.wf-resignation-metric > button:focus-visible { outline: 3px solid rgba(93, 95, 239, .2); outline-offset: -3px; }
.wf-resignation-metric small { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: #858da0; font-size: 9px; font-weight: 800; }
.wf-resignation-metric small i { font-size: 12px; font-style: normal; transition: transform .18s ease; }
.wf-resignation-metric.active { border-color: #7779ef; box-shadow: 0 0 0 3px rgba(93, 95, 239, .07); }
.wf-resignation-metric.active small i { transform: rotate(180deg); }
.wf-resignation-admin-card { animation: wf-row-in .18s ease both; }
.wf-edit-grid label em,
.wf-resignation-review-dialog label em { color: #e33f4b; font-style: normal; }
.wf-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #e8ebf1; }
.wf-card-title-row p { margin: 0; color: #696fe0; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-card-title-row h2 { margin: 4px 0 2px; font-size: 16px; }
.wf-card-title-row span { color: #8a93a4; font-size: 10px; }
.wf-card-title-row > b { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; background: #eef0ff; color: #575adb; font-size: 10px; }
.wf-resignation-table { min-width: 960px; }
.wf-resignation-table td > small { display: block; margin-top: 4px; color: #929aaa; }
.wf-table-reason { max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.wf-state-pill.resignation-pending { background: #fff3dc; color: #a56a09; }
.wf-state-pill.resignation-approved { background: #e6f7ef; color: #15825e; }
.wf-state-pill.resignation-rejected { background: #fff0f2; color: #c13f4b; }
.wf-table-documents { min-height: 31px; padding: 0 10px; border: 1px solid #cfdcf3; border-radius: 8px; background: #f4f7fd; color: #4269a9; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.wf-table-documents.pending { border-color: #f0d39c; background: #fff8e9; color: #9a650d; }
.wf-table-documents.rejected { border-color: #efc1c6; background: #fff2f3; color: #b43b47; }
.wf-table-documents.approved { border-color: #bfe5d4; background: #edf9f3; color: #177d5b; }
.wf-employee-documents-section > header { flex-wrap: wrap; }
.wf-document-review-summary { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; background: #eef2f8; color: #667187; font-size: 10px; white-space: nowrap; }
.wf-document-review-summary.ready { background: #e6f7ef; color: #15825e; }
.wf-document-review-summary.attention { background: #fff0f2; color: #b83d49; }
.wf-document-review-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 16px; background: #f8faff; }
.wf-document-review-card { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid #e0e6ef; border-radius: 12px; background: #fff; }
.wf-document-review-card > header { display: flex; align-items: flex-start; gap: 10px; }
.wf-document-review-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #eef3ff; color: #4a6fbd; font-size: 10px; font-weight: 900; }
.wf-document-review-card-copy { min-width: 0; flex: 1; }
.wf-document-review-card-copy strong,.wf-document-review-card-copy small { display: block; }
.wf-document-review-card-copy strong { color: #293449; font-size: 12px; }
.wf-document-review-card-copy small { margin-top: 4px; overflow: hidden; color: #8590a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wf-document-state { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; background: #eef2f8; color: #677287; font-size: 9px; font-weight: 850; white-space: nowrap; }
.wf-document-state.pending { background: #fff2dc; color: #9b650c; }
.wf-document-state.approved { background: #e6f7ef; color: #177d5b; }
.wf-document-state.rejected { background: #fff0f2; color: #b43b47; }
.wf-document-review-note { margin: 0; padding: 9px 10px; border-radius: 9px; background: #fff2f3; color: #ad3b47; font-size: 9px; line-height: 1.5; }
.wf-document-review-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.wf-document-review-actions button { min-height: 32px; padding: 0 11px; border: 1px solid #dce2eb; border-radius: 8px; background: #fff; color: #536076; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.wf-document-review-actions button[data-document-decision="approved"] { border-color: #b8ddcd; background: #effaf5; color: #167858; }
.wf-document-review-actions button[data-document-decision="rejected"] { border-color: #ebc4c8; background: #fff5f6; color: #b23d49; }
.wf-document-review-actions button:disabled { opacity: .42; cursor: not-allowed; }
.wf-document-review-empty { grid-column: 1 / -1; min-height: 120px; display: grid; place-items: center; color: #8a94a6; font-size: 11px; text-align: center; }
.wf-document-review-dialog { width: min(560px, 100%); }
.wf-document-review-dialog > header p { margin: 5px 0 0; color: #8590a3; font-size: 10px; }
.wf-document-review-dialog form { display: grid; gap: 14px; }
.wf-document-review-dialog form > label { display: grid; gap: 7px; color: #596275; font-size: 11px; font-weight: 800; }
.wf-document-review-dialog textarea { width: 100%; min-height: 96px; padding: 11px 12px; border: 1px solid #dfe3eb; border-radius: 10px; color: #343c4e; font: inherit; font-size: 12px; resize: vertical; }
.wf-document-review-target { padding: 13px 14px; border: 1px solid #e0e5ed; border-radius: 11px; background: #f8faff; }
.wf-document-review-target strong,.wf-document-review-target span { display: block; }
.wf-document-review-target strong { color: #293449; font-size: 13px; }
.wf-document-review-target span { margin-top: 5px; color: #7c8799; font-size: 10px; }
.wf-document-review-notice { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 11px; background: #eef5ff; }
.wf-document-review-notice > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #3778e7; color: #fff; font-weight: 900; }
.wf-document-review-notice p { margin: 0; color: #566c91; font-size: 10px; line-height: 1.45; }
.wf-document-review-notice strong { display: block; margin-bottom: 2px; color: #315b9d; font-size: 11px; }
@media (max-width: 760px) {
  .wf-document-review-list { grid-template-columns: 1fr; }
}
.wf-resignation-review-dialog { width: min(570px, 100%); }
.wf-resignation-review-dialog form { display: grid; gap: 15px; }
.wf-resignation-review-dialog form > label { display: grid; gap: 7px; color: #596275; font-size: 11px; font-weight: 800; }
.wf-resignation-review-dialog input,
.wf-resignation-review-dialog textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #dfe3eb; border-radius: 9px; background: #fff; color: #343c4e; font: inherit; font-size: 12px; }
.wf-resignation-review-summary { display: grid; gap: 7px; padding: 16px; border-radius: 11px; background: #f6f7fb; color: #4e596c; }
.wf-resignation-review-summary strong { color: #252c3c; font-size: 14px; }
.wf-resignation-review-summary span,
.wf-resignation-review-summary small { color: #7f8999; font-size: 11px; }
.wf-resignation-review-summary p { margin: 4px 0 0; line-height: 1.6; }
.wf-offboarding-warning { margin: 0; padding: 11px 13px; border-radius: 8px; background: #fff3f4; color: #a63b46; font-size: 10px; line-height: 1.55; }
.wf-danger-outline-button { min-height: 38px; padding: 0 15px; border: 1px solid #edbfc4; border-radius: 9px; background: #fff; color: #be3c49; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.wf-danger-outline-button:disabled { opacity: .5; cursor: not-allowed; }
.wf-danger-button { width: 100%; min-height: 48px; border: 1px solid #d94d5a; border-radius: 13px; background: #d94d5a; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.wf-termination-submit { width: auto; min-height: 38px; padding: 0 18px; border-radius: 9px; font-size: 12px; }
.wf-termination-dialog { width: min(540px, 100%); overflow: hidden; border-radius: 20px; }
.wf-termination-dialog > .wf-termination-dialog-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 20px 22px; }
.wf-termination-head-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: #fff0f2; color: #cf4552; font-size: 20px; font-weight: 900; transform: rotate(45deg); }
.wf-termination-dialog-head > div > span { color: #cf4552; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-termination-dialog-head h2 { margin: 3px 0 2px; font-size: 18px; letter-spacing: -.025em; }
.wf-termination-dialog-head p { margin: 0; color: #8790a0; font-size: 10px; }
.wf-termination-dialog-head > button { align-self: start; width: 32px; height: 32px; display: grid; padding: 0; place-items: center; border-radius: 50%; font-size: 21px; }
.wf-edit-dialog .wf-termination-form { display: grid; gap: 18px; padding: 20px 22px 22px; }
.wf-termination-person { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e6e9ef; border-radius: 14px; background: #f8f9fb; }
.wf-termination-person-avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; background: #e9ebff; color: #5558dc; font-size: 14px; font-weight: 900; }
.wf-termination-person-copy { min-width: 0; display: grid; gap: 3px; }
.wf-termination-person-copy strong { color: #252c3c; font-size: 14px; }
.wf-termination-person-copy span { overflow: hidden; color: #7e8797; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.wf-termination-person-state { margin-left: auto; padding: 5px 8px; border-radius: 999px; background: #e7f8f1; color: #16825f; font-size: 9px; font-weight: 900; }
.wf-termination-fields { display: grid; gap: 17px; }
.wf-termination-reason-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.wf-termination-reason-field legend,
.wf-termination-date-field > span { margin-bottom: 8px; color: #515b6d; font-size: 11px; font-weight: 850; }
.wf-termination-reason-field em,
.wf-termination-date-field em { color: #d94d5a; font-style: normal; }
.wf-termination-reason-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.wf-termination-reason-chips button { min-height: 31px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 999px; background: #fff; color: #687285; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.wf-termination-reason-chips button:hover { border-color: #c7cbd7; background: #f7f8fa; }
.wf-termination-reason-chips button.active { border-color: #e79ba2; background: #fff1f3; color: #b93d49; }
.wf-termination-reason-field textarea,
.wf-termination-date-field input { width: 100%; border: 1px solid #dfe3eb; border-radius: 11px; background: #fff; color: #343c4e; font: inherit; font-size: 12px; outline: 0; }
.wf-termination-reason-field textarea { min-height: 78px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
.wf-termination-date-field { display: grid; }
.wf-termination-date-field input { height: 43px; padding: 0 12px; }
.wf-termination-date-field small { margin-top: 6px; color: #9199a8; font-size: 9px; }
.wf-termination-reason-field textarea:focus,
.wf-termination-date-field input:focus { border-color: #d96d77; box-shadow: 0 0 0 3px rgba(217, 77, 90, .09); }
.wf-termination-warning { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 13px; border-radius: 12px; background: #fff6f7; color: #7f4b52; }
.wf-termination-warning > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f6d8dc; color: #b93f4a; font-size: 11px; font-weight: 900; }
.wf-termination-warning p { margin: 0; font-size: 10px; line-height: 1.55; }
.wf-termination-warning strong { display: block; margin-bottom: 2px; color: #9f3540; font-size: 10px; }
.wf-edit-dialog .wf-termination-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; padding: 0; }
.wf-termination-actions button { min-height: 43px; width: 100%; }
.wf-form-help { margin: 0; padding: 11px 13px; border-radius: 10px; background: #f5f6f8; color: #737e8d; font-size: 11px; line-height: 1.55; }
.wf-profile-summary { display: flex; align-items: center; gap: 14px; padding: 18px; }
.wf-profile-avatar { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: #e9f4ee; color: #285f49; font-size: 18px; font-weight: 900; }
.wf-profile-summary strong,
.wf-profile-summary small { display: block; }
.wf-profile-summary strong { color: #253128; font-size: 17px; }
.wf-profile-summary small { margin-top: 5px; color: #7b867f; font-size: 11px; }
.wf-resignation-card { margin-top: 14px; padding: 19px; }
.wf-resignation-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wf-resignation-card header span { color: #c34b55; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-resignation-card h2 { margin: 3px 0 0; font-size: 18px; }
.wf-resignation-card header > b { padding: 5px 9px; border-radius: 999px; background: #eef1ef; color: #68746c; font-size: 10px; }
.wf-resignation-card header > b.status-pending { background: #fff2d9; color: #a66500; }
.wf-resignation-card header > b.status-approved { background: #e5f7ef; color: #147b59; }
.wf-resignation-card > p { margin: 13px 0; color: #77827a; font-size: 11px; line-height: 1.65; }
.wf-resignation-card > button { width: 100%; }
.wf-resignation-history-row strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wf-resignation-history-row strong span { color: #7c867f; font-size: 10px; font-weight: 650; }
.wf-resignation-history-row small { white-space: normal; line-height: 1.5; }
/* ── 위치정보 동의 (내 정보 탭) ──────────────────────────────
   퇴사신청 카드와 같은 골격을 쓰되 색만 바꾼다.
   직원이 "이건 인사 카드가 아니라 내 권리에 관한 것" 이라고 바로 알아보게. */
.wf-consent-card { margin-top: 14px; padding: 19px; }
.wf-consent-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wf-consent-card header span { color: #2e78ef; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-consent-card h2 { margin: 3px 0 0; font-size: 18px; }
.wf-consent-card header > b { padding: 5px 9px; border-radius: 999px; background: #eef1ef; color: #68746c; font-size: 10px; font-weight: 800; white-space: nowrap; }
.wf-consent-card header > b.state-granted { background: #e5f7ef; color: #147b59; }
.wf-consent-card header > b.state-declined { background: #fdeff0; color: #b8434f; }
.wf-consent-card header > b.state-review { background: #fff2d9; color: #a66500; }
.wf-consent-card > p { margin: 13px 0; color: #77827a; font-size: 11px; line-height: 1.65; }
.wf-app-secondary-action { width: 100%; min-height: 46px; border: 1px solid #d7dfe9; border-radius: 14px; background: #f7f9fc; color: #33507a; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.wf-consent-body { padding: 0 4px 4px; }
.wf-consent-body > p.wf-consent-summary { margin: 0 0 14px; color: #4b5a52; font-size: 12.5px; line-height: 1.7; }
.wf-consent-body dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 9px 12px; margin: 0 0 16px; padding: 14px; border-radius: 14px; background: #f6f8fa; }
.wf-consent-body dt { color: #6d7a86; font-size: 11px; font-weight: 800; }
.wf-consent-body dd { margin: 0; color: #37423c; font-size: 11.5px; line-height: 1.6; }
.wf-consent-body ul { margin: 0 0 14px; padding-left: 17px; }
.wf-consent-body ul li { margin-bottom: 7px; color: #4b5a52; font-size: 11.5px; line-height: 1.6; }
.wf-consent-body .wf-consent-current { margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; background: #eef4fd; color: #33507a; font-size: 11.5px; line-height: 1.6; }
.wf-consent-body .wf-consent-current.state-declined { background: #fdeff0; color: #93404a; }
.wf-consent-body .wf-consent-version { margin: 0; color: #96a09a; font-size: 10px; }
.wf-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.wf-consent-actions .wf-app-primary-action { margin: 0; }
.wf-ghost-button { min-height: 54px; border: 1px solid #d9dfdb; border-radius: 18px; background: #fff; color: #5c6a62; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }

.wf-profile-logout { display: grid; width: 100%; margin-top: 18px; padding: 15px 17px; border: 1px solid #f1cfd3; border-radius: 16px; background: #fff7f8; color: #c13e4b; font: inherit; text-align: left; cursor: pointer; }
.wf-profile-logout span { font-size: 14px; font-weight: 800; }
.wf-profile-logout small { margin-top: 3px; color: #a77a7f; font-size: 10px; }
.wf-bottom-nav { grid-template-columns: repeat(5, 1fr); }

/* 직원 앱 브랜드 색상: 관리자·온보딩과 동일한 온하루 블루 */
.wf-mobile-page {
  --wf-green: #347ef4;
  --wf-green-dark: #2467d1;
  --wf-green-soft: #eaf2ff;
  --wf-line: #e1e7f0;
  --wf-bg: #f5f8fc;
  --wf-ink: #172033;
  --wf-muted: #6d7a8f;
  background: #edf2f8;
  color: #172033;
}
.wf-mobile-page .wf-phone-shell { background: #f7f9fc; box-shadow: 0 0 44px rgba(35, 74, 133, .09); }
.wf-mobile-page .wf-mobile-header { border-bottom-color: #e3e9f2; }
.wf-mobile-page .wf-app-card { border-color: #e1e7f0; box-shadow: 0 4px 14px rgba(36, 67, 111, .045); }
.wf-mobile-page .wf-home-shortcuts b,
.wf-mobile-page .wf-section-title span { color: #2d6fdb; }
.wf-mobile-page .wf-work-button.start,
.wf-mobile-page .wf-app-primary-action { background: linear-gradient(135deg, #2e78ef, #4389f8); box-shadow: 0 10px 22px rgba(52, 126, 244, .22); }
.wf-mobile-page .wf-work-button.end:not(:disabled) { background: #24344f; }
.wf-mobile-page .wf-work-button:disabled { background: #e6eaf0; color: #9aa5b5; box-shadow: none; }
/* 휴게 버튼은 근무 버튼과 확실히 달라 보여야 한다.
   둘 다 꽉 찬 색이면 지금 눌러야 할 쪽이 어느 쪽인지 순간적으로 구분되지 않는다. */
.wf-mobile-page .wf-work-button.break:not(:disabled) { background: #fff; color: #2d6fdb; box-shadow: inset 0 0 0 1.5px #b9d0f6; }
.wf-mobile-page .wf-work-button.resume:not(:disabled) { background: #fff4e2; color: #a8620d; box-shadow: inset 0 0 0 1.5px #f0cf9c; }
/* 이 문구는 .wf-pro-header 안의 <p> 라서 위쪽 규칙(font-weight:900, letter-spacing:.15em)을
   그대로 물려받고 있었다. 그래서 'PAYROLL' 라벨처럼 자간이 벌어진 굵은 글씨로 나왔다.
   읽으라고 쓴 문장이지 라벨이 아니므로, 자간과 굵기를 되돌리고 색만 조금 진하게 둔다. */
.wf-payroll-heading { display: flex; min-width: 0; align-items: center; gap: 20px; }
.wf-payroll-heading > div:first-child { flex: none; }
/* 선택자를 .wf-pro-header 로 한 번 더 묶는 이유
   덮어야 할 규칙이 '.wf-pro-header p' (클래스1+요소1) 라서, 클래스 하나짜리
   '.wf-payroll-confirm-state' 로는 뒤에 써도 우선순위에서 진다.
   실제로 그냥 클래스로 썼더니 굵기 900, 자간 1.65px 이 그대로 남았다. */
.wf-pro-header .wf-payroll-confirm-state {
  margin: 0;
  max-width: 460px;
  color: #4a5566;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.5;
}
.wf-pro-header .wf-payroll-confirm-state.done { color: #14795a; font-weight: 600; }
/* 버튼 묶음은 항상 오른쪽 끝. */
.wf-pro-header > .wf-payroll-toolbar { margin-left: auto; flex: none; }

/* ── 급여 명세 (근무 탭) ────────────────────────────────
   확정 전에는 제목에 (예상) 이 붙고 배지 색이 달라진다.
   법정 임금명세서와 예상치를 색으로도 구분해야 오해가 없다. */
.wf-pay-statement { margin-top: 14px; padding: 18px; }
.wf-pay-statement > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wf-pay-statement header span { color: #2d6fdb; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.wf-pay-statement header h2 { margin: 3px 0 0; font-size: 18px; }
.wf-pay-month select { height: 32px; padding: 0 8px; border: 1px solid #dde3ec; border-radius: 10px; background: #fff; font: inherit; font-size: 13px; }
.wf-pay-badge { display: inline-block; margin-bottom: 12px; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.wf-pay-badge.estimate { background: #fff2d9; color: #a66500; }
.wf-pay-badge.confirmed { background: #e5f7ef; color: #147b59; }
.wf-pay-meta { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 6px 10px; margin: 0 0 14px; }
.wf-pay-meta dt { color: #7d8898; font-size: 11px; font-weight: 800; }
.wf-pay-meta dd { margin: 0; color: #26303f; font-size: 12px; }
.wf-pay-section { margin-bottom: 14px; }
.wf-pay-section > h3 { margin: 0 0 7px; color: #55606f; font-size: 11.5px; font-weight: 850; }
.wf-pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
.wf-pay-row:last-child { border-bottom: 0; }
.wf-pay-row i { font-style: normal; color: #26303f; font-size: 12.5px; }
.wf-pay-row i small { display: block; margin-top: 2px; color: #939eae; font-size: 10.5px; font-weight: 600; }
.wf-pay-row b { color: #26303f; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-pay-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding: 12px 13px; border-radius: 13px; background: #f5f7fa; }
.wf-pay-total.net { background: #eef4fd; }
.wf-pay-total span { color: #55606f; font-size: 12px; font-weight: 800; }
.wf-pay-total strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.wf-pay-total.net strong { color: #2058b8; }
.wf-pay-notes { margin: 14px 0 0; padding-left: 16px; }
.wf-pay-notes li { margin-bottom: 5px; color: #8a94a3; font-size: 10.5px; line-height: 1.55; }
.wf-pay-empty { margin: 0; padding: 18px 0; color: #98a2b0; font-size: 12px; text-align: center; }
.wf-pay-pdf { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; border: 1px solid #dde3ec; border-radius: 14px; background: #f8fafc; color: #7a8595; font: inherit; font-size: 13px; font-weight: 750; cursor: not-allowed; }
.wf-pay-pdf b { padding: 3px 8px; border-radius: 999px; background: #eaeef4; color: #6a7686; font-size: 10px; }

.wf-break-note { margin: 10px 0 0; color: #7c8798; font-size: 11.5px; line-height: 1.55; text-align: center; }
.wf-mobile-page .wf-break-note { color: #7b879a; }
.wf-mobile-page .wf-method-icons > span.active { border-color: #76a5f4; color: #2f73df; background: #eaf2ff; }
.wf-mobile-page .wf-home-list-card header span,
.wf-mobile-page .wf-news-title b,
.wf-mobile-page .wf-news-row i { background: #eaf2ff; color: #2b69ca; }
.wf-mobile-page .wf-bottom-nav { border-top-color: #e1e7f0; }
.wf-mobile-page .wf-bottom-nav button { color: #748197; }
.wf-mobile-page .wf-bottom-nav button.active { background: #e8f1ff; color: #286bd5; }
.wf-mobile-page .wf-history-calendar button.has-record { background: #edf4ff; color: #2868ca; }
.wf-mobile-page .wf-history-calendar button.selected { outline-color: #347ef4; }
.wf-mobile-page .wf-profile-avatar { background: #e9f2ff; color: #286bd5; }

/* AI 예상 급여 */
.wf-payroll-glance { position: relative; overflow: hidden; padding: 18px; background: linear-gradient(145deg, #172b51 0%, #1e4e91 58%, #2d78e6 100%); color: #fff; border: 0 !important; box-shadow: 0 16px 34px rgba(26, 75, 145, .2) !important; }
.wf-payroll-glance::after { position: absolute; width: 180px; height: 180px; right: -82px; top: -96px; border-radius: 50%; background: rgba(255,255,255,.09); content: ""; }
.wf-payroll-glance header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-payroll-glance header span { color: #a9cfff; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.wf-payroll-glance header h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.5px; }
.wf-payroll-glance header em { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.14); color: #d7e8ff; font-size: 9px; font-style: normal; white-space: nowrap; }
.wf-payroll-glance header em.high { background: rgba(65, 222, 165, .18); color: #a8f6d7; }
.wf-payroll-glance header em.medium { background: rgba(255, 205, 93, .19); color: #ffe39f; }
.wf-payroll-glance-main { position: relative; z-index: 1; display: grid; gap: 3px; margin-top: 22px; }
.wf-payroll-glance-main > span { color: #c8ddf7; font-size: 11px; }
.wf-payroll-glance-main > strong { font-size: clamp(28px, 8vw, 36px); line-height: 1.12; letter-spacing: -1.4px; }
.wf-payroll-glance-main > small { color: #a9c1df; font-size: 10px; }
.wf-payroll-glance-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; padding: 11px 0; border-block: 1px solid rgba(255,255,255,.13); }
.wf-payroll-glance-grid div { display: grid; min-width: 0; gap: 3px; padding-inline: 9px; border-right: 1px solid rgba(255,255,255,.11); }
.wf-payroll-glance-grid div:first-child { padding-left: 0; }
.wf-payroll-glance-grid div:last-child { padding-right: 0; border: 0; }
.wf-payroll-glance-grid span { color: #aac2df; font-size: 9px; white-space: nowrap; }
.wf-payroll-glance-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wf-payroll-glance > button { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 100%; margin-top: 12px; padding: 7px 0 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 11px; font-weight: 750; }
.wf-payroll-sheet { max-height: min(790px, calc(100dvh - 36px)); }
.wf-payroll-sheet-summary { display: grid; gap: 4px; padding: 20px; border-radius: 20px; background: linear-gradient(145deg, #17305e, #3179e7); color: #fff; }
.wf-payroll-sheet-summary span,.wf-payroll-sheet-summary small { color: #c7dbf5; font-size: 11px; }
.wf-payroll-sheet-summary strong { font-size: 30px; letter-spacing: -1px; }
.wf-payroll-breakdown-list { margin: 16px 0; }
.wf-payroll-breakdown-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 4px; border-bottom: 1px solid #edf0f5; font-size: 13px; }
.wf-payroll-breakdown-list dt { color: #657289; }
.wf-payroll-breakdown-list dd { margin: 0; color: #172033; font-weight: 750; }
.wf-payroll-breakdown-list .is-total { font-size: 15px; }
.wf-payroll-breakdown-list .is-total dt,.wf-payroll-breakdown-list .is-total dd { color: #255fc1; font-weight: 850; }
.wf-payroll-confidence-note { padding: 13px 15px; border-radius: 15px; background: #fff7e6; color: #85601b; }
.wf-payroll-confidence-note.high { background: #eaf9f2; color: #167249; }
.wf-payroll-confidence-note.low { background: #fff0f0; color: #a13b45; }
.wf-payroll-confidence-note strong { display: block; font-size: 12px; }
.wf-payroll-confidence-note p { margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.wf-payroll-legal-note { margin: 13px 2px 0; color: #7d899b; font-size: 10px; line-height: 1.55; }

.wf-home-payroll-card { display: grid; gap: 20px; margin-top: 0; padding: 26px 28px; border: 1px solid #dce5f2; border-radius: 26px; background: linear-gradient(135deg, #f8fbff, #eef5ff); box-shadow: 0 10px 28px rgba(50, 79, 122, .06); }
.wf-home-payroll-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.wf-home-payroll-card > header span { color: #286ddb; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.wf-home-payroll-card > header h2 { margin: 5px 0 3px; color: #14213a; font-size: 23px; letter-spacing: -.7px; }
.wf-home-payroll-card > header p { margin: 0; color: #75839a; font-size: 12px; }
.wf-home-payroll-card > header a { padding: 10px 14px; border-radius: 12px; background: #fff; color: #2868d1; font-size: 12px; font-weight: 750; text-decoration: none; }
.wf-home-payroll-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wf-home-payroll-numbers div { display: grid; gap: 6px; padding: 17px; border: 1px solid #e0e8f3; border-radius: 18px; background: rgba(255,255,255,.82); }
.wf-home-payroll-numbers span { color: #718098; font-size: 10px; }
.wf-home-payroll-numbers strong { color: #14254a; font-size: 20px; letter-spacing: -.6px; }
.wf-home-payroll-numbers .is-total { border-color: #367be9; background: #2c73df; }
.wf-home-payroll-numbers .is-total span { color: #cfe1ff; }
.wf-home-payroll-numbers .is-total strong { color: #fff; }
.wf-home-payroll-card > small { color: #7d899b; font-size: 10px; }

.wf-payroll-toolbar { display: flex; align-items: flex-end; gap: 8px; }
.wf-payroll-toolbar label { display: grid; gap: 4px; color: #758198; font-size: 10px; font-weight: 750; }
.wf-payroll-toolbar input,.wf-payroll-toolbar button { min-height: 38px; padding: 0 12px; border: 1px solid #dae2ee; border-radius: 11px; background: #fff; color: #26354d; font: inherit; font-size: 12px; }
.wf-payroll-toolbar button { border-color: #347cf0; background: #347cf0; color: #fff; font-weight: 750; }
.wf-payroll-toolbar button.secondary { border-color: #d5dfec; background: #fff; color: #345273; }
.wf-payroll-content { display: grid; gap: 20px; }
.wf-payroll-hero { display: grid; grid-template-columns: 1.4fr .8fr; gap: 22px; align-items: center; padding: 22px 26px; border-radius: 22px; background: linear-gradient(135deg, #142950, #1d4d8c 58%, #2f79e2); color: #fff; box-shadow: 0 14px 32px rgba(25, 72, 137, .16); }
.wf-payroll-hero > div:first-child > span { color: #9fc8ff; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.wf-payroll-hero h2 { margin: 5px 0 4px; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -1px; }
.wf-payroll-hero p { margin: 0; color: #bed2ef; font-size: 12px; }
.wf-payroll-hero-total { display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(255,255,255,.1); }
.wf-payroll-hero-total span,.wf-payroll-hero-total small { color: #c8dcf7; font-size: 11px; }
.wf-payroll-hero-total strong { margin: 5px 0 2px; font-size: clamp(21px, 2.1vw, 30px); letter-spacing: -.8px; }
.wf-payroll-hero-total-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wf-payroll-confirm-badge { flex: none; padding: 4px 11px; border-radius: 999px; background: #17c27a; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: -.1px; box-shadow: 0 4px 12px rgba(23, 194, 122, .35); }
.wf-payroll-pay-date { margin-top: 6px; color: #fff !important; font-weight: 700; }
/* 7장을 한 줄에 놓는다. minmax(0,·) 가 없으면 금액이 길어질 때 칸이 밀려 넘친다. */
.wf-payroll-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wf-payroll-kpis article { display: grid; gap: 5px; min-width: 0; padding: 14px 12px; border: 1px solid #e0e6ef; border-radius: 16px; background: #fff; }
.wf-payroll-kpis span { color: #77849a; font-size: 10px; line-height: 1.35; word-break: keep-all; }
/* 칸 폭이 좁아 금액이 잘리지 않도록 화면 폭에 맞춰 줄인다. */
.wf-payroll-kpis strong { min-width: 0; color: #17243b; font-size: clamp(13px, 1.08vw, 18px); letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-payroll-kpis small { color: #9aa5b5; font-size: 9px; line-height: 1.35; word-break: keep-all; }

/* 7 → 4 → 2 로 접는다. 1280px 까지는 7칸에서도 금액이 잘리지 않는 것을 재서 확인했다.
   (맥북 14" 1512, 13" 1440, 일반 노트북 1366 모두 한 줄로 보인다) */
@media (max-width: 1279px) { .wf-payroll-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wf-payroll-table-card { overflow: hidden; }
.wf-payroll-legend { display: flex; gap: 5px; }
.wf-payroll-legend span,.wf-payroll-confidence { padding: 5px 8px; border-radius: 999px; background: #eef1f6; color: #758094; font-size: 9px; font-weight: 750; white-space: nowrap; }
.wf-payroll-legend .high,.wf-payroll-confidence.high { background: #e7f8f0; color: #167249; }
.wf-payroll-legend .medium,.wf-payroll-confidence.medium { background: #fff4d9; color: #8d6417; }
.wf-payroll-legend .low,.wf-payroll-confidence.low { background: #fff0f0; color: #a7424c; }
.wf-payroll-table td strong { display: block; }
.wf-payroll-table td small { display: block; max-width: 180px; margin-top: 4px; color: #909bae; font-size: 9px; line-height: 1.35; }
/* 상태 알약과 할 일 버튼을 같은 줄에 두고, 이유는 그 아래 한 줄로 내린다.
   셋을 세로로 쌓으면 칸이 세 줄이 되고 줄바꿈이 제멋대로 생겨 난잡해진다. */
.wf-payroll-table td.wf-payroll-status { min-width: 188px; }
.wf-payroll-status-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wf-plan-notice { margin-top: 14px; padding: 13px 15px; border: 1px solid #e2e7f0; border-radius: 14px; background: #f8fafd; }
.wf-plan-notice-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.wf-plan-notice-head strong { color: #2f3a4d; font-size: 13px; }
.wf-plan-notice-head span { color: #7d879a; font-size: 11px; }
.wf-plan-notice ul { margin: 9px 0 0; padding-left: 17px; color: #6c7688; font-size: 11px; line-height: 1.7; }
.wf-payroll-table td.wf-payroll-status small { max-width: 100%; margin-top: 5px; word-break: keep-all; }
.wf-payroll-row-action { display: inline-flex; align-items: center; min-height: 22px; margin: 0; padding: 4px 8px; border: 1px solid #cfddf1; border-radius: 8px; background: #f7faff; color: #2868cc; font: inherit; font-size: 9px; font-weight: 800; white-space: nowrap; text-decoration: none; cursor: pointer; }
.wf-payroll-row-action:hover, .wf-payroll-row-action:focus-visible { border-color: #9dbdf0; background: #eef5ff; outline: 0; }
.wf-payroll-notice { padding: 19px 22px; border: 1px solid #e1e7f0; border-radius: 18px; background: #fff; }
.wf-payroll-notice strong { color: #253650; font-size: 12px; }
.wf-payroll-notice ul { margin: 8px 0 0; padding-left: 17px; color: #7a8798; font-size: 10px; line-height: 1.7; }

.wf-payroll-admin-modal { z-index: 1000; }
/* 백드롭은 position:absolute 라, 자리를 잡지 않은(static) 창은 그 아래에 깔린다.
   그래서 창 내용이 어둡게 덮이고 클릭이 백드롭으로 새어 창이 닫혀 버렸다.
   머리말만 멀쩡해 보였던 건 sticky 라 이미 자리를 잡은 요소였기 때문이다. */
.wf-payroll-admin-modal > .wf-payroll-admin-dialog { position: relative; z-index: 1; }

/* 급여 설정 — 왼쪽 직원 목록 + 오른쪽 편집. 드롭다운은 직원이 늘면 못 쓴다. */
.wf-payroll-settings-workbench { display: grid; grid-template-columns: minmax(220px, 268px) minmax(0, 1fr); align-items: start; }
.wf-payroll-settings-directory { position: sticky; top: 96px; display: flex; flex-direction: column; padding: 18px 0 18px 0; border-right: 1px solid #eaeff6; }
.wf-payroll-settings-directory .wf-directory-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 16px 10px; }
.wf-payroll-settings-directory .wf-directory-head h3 { margin: 0; color: #22304a; font-size: 15px; }
.wf-payroll-settings-directory .wf-directory-head span { color: #7d879a; font-size: 11px; font-weight: 800; }
.wf-payroll-settings-directory .wf-directory-list { max-height: min(520px, calc(100dvh - 320px)); min-height: 180px; border-top: 1px solid #eef1f6; }
.wf-payroll-settings-directory .wf-directory-person { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 11px 14px; }
.wf-payroll-settings-workbench > form { padding: 18px 22px 22px; }
.wf-payroll-settings-flag { padding: 3px 7px; border-radius: 999px; background: #f1f3f7; color: #7c8698; font-size: 9px; font-weight: 850; white-space: nowrap; }
.wf-payroll-settings-flag.done { background: #e7f8f0; color: #167249; }
@media (max-width: 780px) {
  .wf-payroll-settings-workbench { grid-template-columns: 1fr; }
  .wf-payroll-settings-directory { position: static; border-right: 0; border-bottom: 1px solid #eaeff6; }
  .wf-payroll-settings-directory .wf-directory-list { max-height: 220px; }
}
.wf-payroll-admin-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(850px, calc(100dvh - 36px)); overflow: auto; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(20, 39, 70, .24); }
.wf-payroll-admin-dialog > header { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 26px 20px; border-bottom: 1px solid #e7edf5; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.wf-payroll-admin-dialog > header span { color: #3274df; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.wf-payroll-admin-dialog > header h2 { margin: 4px 0 3px; color: #17243a; font-size: 22px; }
.wf-payroll-admin-dialog > header p { margin: 0; color: #7b8799; font-size: 11px; }
.wf-payroll-admin-dialog > header > button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f4f8; color: #758198; font: inherit; font-size: 22px; cursor: pointer; }
.wf-payroll-admin-dialog form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 22px 26px 26px; }
.wf-payroll-admin-dialog .full { grid-column: 1 / -1; }
.wf-payroll-field { display: grid; gap: 7px; color: #4f5e72; font-size: 11px; font-weight: 800; }
.wf-payroll-field small { color: #929daf; font-size: 9px; font-weight: 600; }
.wf-payroll-field input,.wf-payroll-field select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dbe3ee; border-radius: 11px; background: #fff; color: #27364c; font: inherit; font-size: 12px; outline: 0; }
.wf-payroll-field input:focus,.wf-payroll-field select:focus { border-color: #4c8cf4; box-shadow: 0 0 0 3px rgba(65, 130, 240, .1); }
.wf-payroll-settings-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 12px; background: #f4f8fe; color: #62738a; font-size: 10px; }
.wf-payroll-settings-status strong { color: #2868c9; font-size: 11px; }
.wf-payroll-profile-section { min-width: 0; margin: 0; padding: 14px; border: 1px solid #dfe7f1; border-radius: 16px; }
.wf-payroll-profile-section legend { padding: 0 7px; color: #43536a; font-size: 11px; font-weight: 850; }
.wf-payroll-profile-section legend small { margin-left: 6px; color: #8a97aa; font-weight: 600; }
.wf-payroll-choice { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; cursor: pointer; }
.wf-payroll-choice:has(input:checked) { background: #edf4ff; }
.wf-payroll-choice span { display: grid; gap: 2px; }
.wf-payroll-choice strong { color: #27364b; font-size: 12px; }
.wf-payroll-choice small { color: #7b8798; font-size: 9px; }
.wf-payroll-employment-settings { display: grid; gap: 16px; }
.wf-payroll-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wf-payroll-grid .full { grid-column: 1 / -1; }
.wf-payroll-insurance-options { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wf-payroll-insurance-options label { display: inline-flex; align-items: center; gap: 6px; color: #536278; font-size: 11px; font-weight: 750; }
.wf-payroll-admin-dialog form > footer,.wf-payroll-admin-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.wf-payroll-admin-dialog footer button { min-width: 112px; min-height: 43px; }
.wf-payroll-transfer-dialog { width: min(720px, calc(100vw - 32px)); }
.wf-payroll-transfer-dialog > .wf-payroll-transfer-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 22px 26px 14px; }
.wf-payroll-transfer-summary div { display: grid; gap: 5px; padding: 14px; border: 1px solid #e1e7f0; border-radius: 14px; background: #f8fafd; }
.wf-payroll-transfer-summary span { color: #7b889a; font-size: 9px; }
.wf-payroll-transfer-summary strong { color: #1f304a; font-size: 17px; }
.wf-payroll-transfer-summary .warning { border-color: #f1d2d5; background: #fff6f7; }
.wf-payroll-transfer-summary .warning strong { color: #c04652; }
.wf-payroll-transfer-summary .ready { border-color: #d4ecdf; background: #f2fbf6; }
.wf-payroll-transfer-list { margin: 0 26px; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 15px; }
.wf-payroll-transfer-list article { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; border-bottom: 1px solid #edf0f4; }
.wf-payroll-transfer-list article:last-child { border: 0; }
.wf-payroll-transfer-list article div { display: grid; gap: 3px; }
.wf-payroll-transfer-list article strong { color: #26354b; font-size: 12px; }
.wf-payroll-transfer-list article small,.wf-payroll-transfer-list article > span { color: #7e8a9c; font-size: 10px; }
.wf-payroll-transfer-list article button { min-height: 32px; padding: 0 10px; border: 1px solid #cddcf2; border-radius: 9px; background: #f6f9ff; color: #2869cf; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.wf-payroll-transfer-dialog > footer { padding: 18px 26px 24px; }

/* ── 급여 확정 · 정정 재발행 ─────────────────────────────────
   브라우저 기본 prompt 를 쓰면 어느 회사 어느 달인지도 안 보이고,
   되돌릴 수 없는 일을 시스템 대화상자 하나로 처리하게 된다. 화면 안에서 받는다. */
.wf-payroll-confirm-dialog { width: min(720px, calc(100vw - 32px)); }
.wf-payroll-toolbar button { cursor: pointer; }
.wf-payroll-confirm-body { display: grid; gap: 16px; padding: 22px 26px 4px; }
.wf-payroll-confirm-warn { display: grid; gap: 7px; padding: 15px 17px; border: 1px solid #f0dcbb; border-radius: 14px; background: #fffaf0; color: #6b4d1d; font-size: 12px; line-height: 1.62; }
.wf-payroll-confirm-warn p { margin: 0; }
.wf-payroll-confirm-warn strong { color: #7a4a10; }
.wf-payroll-confirm-warn b { color: #7a4a10; font-weight: 800; }
.wf-payroll-confirm-diff { overflow: auto; max-height: 320px; border: 1px solid #e4ebf4; border-radius: 14px; }
.wf-payroll-confirm-diff table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wf-payroll-confirm-diff th { position: sticky; top: 0; padding: 10px 12px; border-bottom: 1px solid #e4ebf4; background: #f7f9fc; color: #78849a; font-size: 10px; font-weight: 800; text-align: left; }
.wf-payroll-confirm-diff td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; color: #33415a; white-space: nowrap; }
.wf-payroll-confirm-diff td strong { display: block; color: #1d2a40; font-size: 12px; }
.wf-payroll-confirm-diff td small { color: #8d97a8; font-size: 10px; }
.wf-payroll-confirm-diff td em { color: #97a1b2; font-style: normal; }
.wf-payroll-confirm-diff td.up { color: #1f7a45; font-weight: 800; }
.wf-payroll-confirm-diff td.down { color: #b3341f; font-weight: 800; }
.wf-payroll-confirm-diff td.new { color: #2869cf; font-weight: 800; }
.wf-payroll-confirm-diff-note { margin: 0; padding: 10px 12px; color: #7e8a9c; font-size: 10px; }
.wf-payroll-confirm-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 26px 24px; }

@media (max-width: 1100px) {
  .wf-home-payroll-numbers,.wf-payroll-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-payroll-hero { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wf-home-payroll-card { padding: 20px; }
  .wf-home-payroll-card > header { display: grid; }
  .wf-home-payroll-numbers { grid-template-columns: 1fr 1fr; }
  .wf-payroll-glance-grid { grid-template-columns: 1fr 1fr; }
  .wf-payroll-glance-grid div:last-child { grid-column: 1 / -1; margin-top: 8px; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.11); }
  .wf-payroll-toolbar { flex-wrap: wrap; }
  /* 좁은 화면에서는 한 줄에 다 못 들어간다. 제목 아래로 접는다. */
  .wf-payroll-heading { flex-wrap: wrap; gap: 6px 14px; }
  .wf-pro-header .wf-payroll-confirm-state { max-width: 100%; }
  .wf-pro-header > .wf-payroll-toolbar { margin-left: 0; }
  .wf-payroll-admin-dialog form,.wf-payroll-grid { grid-template-columns: 1fr; }
  .wf-payroll-admin-dialog form > *,.wf-payroll-grid > * { grid-column: 1; }
  .wf-payroll-transfer-dialog > .wf-payroll-transfer-summary { grid-template-columns: 1fr 1fr; }
  .wf-payroll-transfer-list article { grid-template-columns: 1fr auto; }
  .wf-payroll-transfer-list article > span { grid-column: 1; }
}

/* Employee-specific HR document table. */
.wf-contract-document-table-wrap { width: 100%; min-height: 396px; overflow: auto; }
.wf-contract-document-table { width: 100%; min-width: 1050px; border-collapse: collapse; color: #596275; font-size: 11px; }
.wf-contract-document-table th { height: 44px; padding: 0 13px; border-bottom: 1px solid #e7eaf0; background: #fafbfc; color: #818a9b; font-size: 10px; font-weight: 850; text-align: left; white-space: nowrap; }
.wf-contract-document-table td { height: 64px; padding: 0 13px; border-bottom: 1px solid #edf0f4; white-space: nowrap; }
.wf-contract-document-table tbody tr:hover { background: #fafaff; }
.wf-contract-document-table td strong { color: #282f3f; }
.wf-contract-document-table .wf-contract-document-link { padding: 0; border: 0; background: transparent; color: #4d58d9; font: inherit; font-size: 12px; font-weight: 850; text-align: left; cursor: pointer; }
.wf-contract-document-copy { display: grid; align-content: center; justify-items: start; gap: 7px; min-width: 250px; }
.wf-contract-document-copy small { display: block; margin: 0; color: #697386; font-size: 11px; line-height: 1.4; }
.wf-contract-document-table .wf-contract-view-button { min-height: 29px; padding: 0 10px; border: 1px solid #dfe3eb; border-radius: 7px; background: #fff; color: #525d70; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.wf-contract-document-table .wf-contract-table-empty { height: 210px; color: #969ead; text-align: center; }

@media (max-width: 900px) {
  .wf-employee-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-pro-header-actions { align-items: stretch; flex-direction: column; }
}

/* 근로계약 관리 가독성 하한: 조작·데이터 텍스트 11px 이상, 부연 설명만 10px 허용
   좌측 메뉴·계정 영역은 모든 화면이 공유하는 부분이라 여기서 건드리지 않는다.
   한 페이지만 글자 크기가 달라 보이는 원인이었다. */
.wf-contracts-page .wf-signing-authority-button { font-size: 12px; }
.wf-contracts-page .wf-contract-metrics article > span { font-size: 12px; }
.wf-contracts-page .wf-contract-metrics article > small { font-size: 10px; }
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 { font-size: 17px; }
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 small,
.wf-contracts-page .wf-contract-directory .wf-directory-head h2 small span { font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-status-tabs button { min-width: 54px; min-height: 31px; font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-status-tabs button em { font-size: 10px; }
.wf-contracts-page .wf-contract-directory .wf-directory-search { font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-search input { height: 38px; font-size: 12px; }
.wf-contracts-page .wf-contract-directory .wf-directory-sortbar button { min-height: 33px; font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person { min-height: 58px; }
.wf-contracts-page .wf-contract-directory .wf-directory-avatar { width: 32px; height: 32px; font-size: 11px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person-copy strong { font-size: 13px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person-copy small { font-size: 10px; }
.wf-contracts-page .wf-contract-directory .wf-directory-person > em { font-size: 11px; }
.wf-contracts-page .wf-contract-browser-card .wf-pro-card-head h2 { font-size: 18px; }
.wf-contracts-page .wf-contract-browser-card .wf-pro-card-head p,
.wf-contracts-page .wf-contract-list-head-actions .wf-text-button { font-size: 11px; }
.wf-contracts-page .wf-contract-document-table { font-size: 12px; }
.wf-contracts-page .wf-contract-document-table th { font-size: 11px; }
.wf-contracts-page .wf-contract-document-table .wf-contract-view-button { min-height: 32px; font-size: 11px; }
.wf-contracts-page .wf-contract-document-table .wf-contract-table-empty { font-size: 12px; }
.wf-contracts-page .wf-admin-contract-actions .btn,
.wf-contracts-page .wf-part-time-presets button,
.wf-contracts-page .wf-part-time-day .wf-part-time-day-minutes,
.wf-contracts-page .wf-part-time-terms > header > strong { font-size: 11px; }
.wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid > label,
.wf-contracts-page .wf-contract-editor-dialog .wf-contract-inline-row > label,
.wf-contracts-page .wf-contract-address-group > label { font-size: 11px; }
.wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid input,
.wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid select,
.wf-contracts-page .wf-contract-editor-dialog .wf-admin-field-grid textarea,
.wf-contracts-page .wf-contract-address-search-row button,
.wf-contracts-page .wf-contract-action-buttons button { font-size: 12px; }
.wf-contracts-page .wf-contract-section-heading small,
.wf-contracts-page .wf-contract-editor-dialog > .wf-pro-card-head p,
.wf-contracts-page .wf-part-time-terms > header p,
.wf-contracts-page .wf-part-time-rule-result p { font-size: 10px; }

/* 출퇴근·알림 관리 가독성 하한: 실제 조작·판단 텍스트는 11px 이상. */
.wf-notification-admin-page .wf-header-account button,
.wf-notification-admin-page .wf-notification-metrics article span,
.wf-notification-admin-page .wf-pro-card-head > div > span,
.wf-notification-admin-page .wf-notification-settings-body > label,
.wf-notification-admin-page .wf-notification-smtp-body > label,
.wf-notification-admin-page .wf-channel-switches label,
.wf-notification-admin-page .wf-adapter-state small,
.wf-notification-admin-page .wf-adapter-operation,
.wf-notification-admin-page .wf-notification-policy select,
.wf-notification-admin-page .wf-notification-policy input[type="time"],
.wf-notification-admin-page .wf-policy-channels label,
.wf-notification-admin-page .wf-notification-policy .wf-outline-button { font-size: 11px; }
.wf-notification-admin-page .wf-notification-settings-body > label > input,
.wf-notification-admin-page .wf-notification-smtp-body > label > input,
.wf-notification-admin-page .wf-notification-settings-body > button,
.wf-notification-admin-page .wf-notification-smtp-body > button { font-size: 12px; }
.wf-notification-admin-page .wf-adapter-state p,
.wf-notification-admin-page .wf-policy-enable strong { font-size: 12px; }
.wf-notification-admin-page .wf-adapter-state em { font-size: 11px; }
.wf-telegram-help {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #f3f6fb;
  color: #5f6b7f;
  font-size: 11px;
  line-height: 1.55;
}
.wf-telegram-help a { color: #4266d5; font-weight: 800; }
.wf-notification-policy-card > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.wf-notification-policy-card > summary::-webkit-details-marker { display: none; }
.wf-notification-policy-toggle { display: flex; align-items: center; gap: 8px; color: #657086; font-size: 11px; }
.wf-notification-policy-toggle b { padding: 5px 8px; border-radius: 999px; background: #eef1ff; color: #565bd4; }
.wf-notification-policy-toggle span { font-weight: 800; }
.wf-notification-policy-toggle .when-open { display: none; }
.wf-notification-policy-card[open] .wf-notification-policy-toggle .when-open { display: inline; }
.wf-notification-policy-card[open] .wf-notification-policy-toggle .when-closed { display: none; }
.wf-notification-policy-card[open] > summary { border-bottom: 1px solid #e9ecf2; background: #fbfcff; }

.wf-attendance-policy-grid .wf-pro-card-head p,
.wf-attendance-record-head p,
.wf-attendance-filters label,
.wf-attendance-filters input,
.wf-attendance-metrics span,
.wf-attendance-person small,
.wf-attendance-place small,
.wf-policy-fields > label,
.wf-policy-coordinate-grid label,
.wf-policy-method-fieldset legend,
.wf-policy-method-grid small,
.wf-policy-address-search label,
.wf-policy-address-results button,
.wf-worksite-map-shell p,
.wf-policy-security-note,
.wf-policy-selection-summary > span,
.wf-policy-selection-summary b,
.wf-policy-detail > summary small,
.wf-policy-detail > summary em,
.wf-policy-info-note,
.wf-qr-mode-fieldset legend,
.wf-qr-mode-fieldset span small { font-size: 11px; }
.wf-policy-method-grid span,
.wf-policy-detail > summary strong,
.wf-qr-mode-fieldset span strong { font-size: 12px; }
.wf-policy-fields input,
.wf-policy-fields select,
.wf-policy-fields textarea,
.wf-policy-form-actions button { font-size: 12px; }

/* POS·태블릿 관리자 홈 직관 모드 */
.wf-home-page { overflow-x: hidden; }
.wf-home-page [hidden] { display: none !important; }
.wf-home-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.wf-home-header-actions > .wf-outline-button { min-height: 44px; padding-inline: 16px; }
.wf-owner-business-actions { display: flex; align-items: center; gap: 8px; }
.wf-owner-business-actions select { min-width: 170px; min-height: 44px; padding: 0 38px 0 13px; border: 1px solid #dce3ee; border-radius: 11px; background: #fff; color: #25324a; font: inherit; font-size: 12px; font-weight: 800; }
.wf-owner-business-actions .wf-outline-button { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 14px; white-space: nowrap; }
.wf-home-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 4px; padding: 4px; border: 1px solid #dce3ee; border-radius: 13px; background: #f1f4f8; }
.wf-home-mode-switch button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: #68758a; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.wf-home-mode-switch button:hover { color: #25324a; }
.wf-home-mode-switch button[aria-pressed="true"] { background: #17294a; color: #fff; box-shadow: 0 5px 14px rgba(23, 41, 74, .18); }
.wf-home-fullscreen-button { min-width: 90px; }

.wf-pos-dashboard { min-height: calc(100vh - 108px); display: grid; align-content: start; gap: 14px; padding: 20px 24px 22px; background: radial-gradient(circle at 14% -8%, rgba(76, 139, 255, .18), transparent 30%), radial-gradient(circle at 90% 16%, rgba(35, 198, 160, .12), transparent 26%), #eef3f9; }
.wf-pos-topbar { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 5px; }
.wf-pos-topbar > div:first-child > span { display: block; margin-bottom: 2px; color: #5d6d84; font-size: 13px; font-weight: 800; }
.wf-pos-topbar h2 { max-width: 44rem; margin: 0; color: #122039; font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -.05em; }
.wf-pos-heading { min-width: 0; }
.wf-pos-title-row { display: flex; align-items: center; gap: 12px; }
.wf-home-mode-switch-pos { flex: 0 0 auto; }
.wf-pos-clock-block { min-width: 180px; display: grid; justify-items: end; }
.wf-pos-clock-block time { color: #13213a; font-size: clamp(30px, 4vw, 48px); font-weight: 900; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.wf-pos-clock-block span { margin-top: 7px; color: #688096; font-size: 12px; font-weight: 800; }

.wf-pos-marquee { min-height: 38px; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(42, 94, 170, .12); border-radius: 12px; background: rgba(255, 255, 255, .76); color: #3e5470; }
.wf-pos-marquee > div { width: max-content; padding-left: 100%; font-size: 13px; font-weight: 800; white-space: nowrap; animation: wf-pos-marquee 28s linear infinite; }

.wf-pos-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; }
.wf-pos-grid > article { min-width: 0; overflow: hidden; border: 1px solid rgba(192, 204, 220, .8); border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 14px 34px rgba(31, 52, 82, .075); }
.wf-pos-grid > article > header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #e8edf4; }
.wf-pos-grid > article > header span { color: #63738a; font-size: 12px; font-weight: 800; }
.wf-pos-grid > article > header h3 { margin: 5px 0 0; color: #17243a; font-size: 22px; line-height: 1.2; letter-spacing: -.04em; }

.wf-pos-qr-panel { grid-column: span 7; background: linear-gradient(145deg, #0c1931, #152947) !important; color: #fff; border-color: rgba(21, 45, 80, .9) !important; }
.wf-pos-qr-panel > header { border-bottom-color: rgba(255, 255, 255, .1) !important; }
.wf-pos-qr-panel > header span { color: #aebed5 !important; }
.wf-pos-qr-panel > header h3 { color: #fff !important; }
.wf-pos-qr-panel > header > strong { padding: 8px 11px; border-radius: 10px; background: rgba(101, 155, 255, .14); color: #b9d4ff; font-size: 12px; white-space: nowrap; }
.wf-pos-qr-body { min-height: 322px; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(230px, .9fr); align-items: center; gap: 25px; padding: 24px; }
.wf-pos-qr-frame { width: min(100%, 290px); aspect-ratio: 1; display: grid; place-items: center; justify-self: center; margin: 0; overflow: hidden; border: 9px solid #fff; border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(0, 0, 0, .3); }
.wf-pos-qr-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.wf-pos-qr-frame > div { display: grid; place-items: center; gap: 7px; padding: 18px; color: #506079; text-align: center; }
.wf-pos-qr-frame > div strong { color: #24344e; font-size: 20px; }
.wf-pos-qr-frame > div span { font-size: 12px; line-height: 1.55; }
.wf-pos-qr-copy { min-width: 0; display: grid; align-content: center; justify-items: start; }
.wf-pos-qr-copy > strong { color: #fff; font-size: 22px; letter-spacing: -.035em; }
.wf-pos-qr-copy > span { margin-top: 12px; padding: 10px 13px; border-radius: 11px; background: #2f78ef; color: #fff; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.wf-pos-qr-copy > span.is-expiring { background: #e24d59; }
.wf-pos-qr-copy p { max-width: 440px; margin: 15px 0 21px; color: #b8c7da; font-size: 12px; line-height: 1.7; }
.wf-pos-qr-copy > div { display: flex; flex-wrap: wrap; gap: 9px; }
.wf-pos-qr-copy button, .wf-pos-qr-copy a { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 900; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.wf-pos-qr-copy button { border: 0; background: #fff; color: #172a49; }
.wf-pos-qr-copy a { border: 1px solid rgba(255, 255, 255, .22); color: #f0f5fc; }
.wf-pos-qr-copy button:hover, .wf-pos-qr-copy a:hover { transform: translateY(-2px); }

.wf-pos-status-panel { grid-column: span 5; }
.wf-pos-status-panel > header { align-items: center !important; justify-content: flex-start !important; padding: 18px 20px; }
.wf-pos-status-header > div { display: grid; gap: 4px; }
.wf-pos-status-header > div > span { display: block; margin: 0; }
.wf-pos-status-header > div > h3 { margin: 0; }
.wf-pos-status-accordion { min-height: 106px; display: flex; gap: 9px; padding: 15px 20px 14px; }
.wf-pos-status-item { min-width: 0; flex: 1 1 0; display: grid; align-content: start; justify-items: start; gap: 3px; min-height: 78px; padding: 15px 14px 11px; border: 1px solid #dfe6ef; border-radius: 15px; background: #f4f7fb; color: #68778c; }
.wf-pos-status-item.is-working { border-color: #74a6f8; background: #eaf2ff; color: #245fc2; }
.wf-pos-status-item.is-absent { border-color: #8bd6ad; background: #edf9f2; color: #18794e; }
.wf-pos-status-item.is-leave { border-color: #efa0a6; background: #fff1f2; color: #b93643; }
.wf-pos-status-item span { font-size: 12px; font-weight: 850; line-height: 1; white-space: nowrap; }
.wf-pos-status-item strong { display: flex; align-items: baseline; gap: 2px; color: inherit; font-size: 15px; line-height: 1; }
.wf-pos-status-item b { margin: 0; color: #17243a; font-size: 28px; line-height: 1; letter-spacing: -.05em; }
.wf-pos-focus-list { min-height: 208px; display: grid; align-content: start; padding: 3px 16px 16px; }
.wf-pos-focus-list article { min-height: 59px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 7px; border-bottom: 1px solid #edf1f5; }
.wf-pos-focus-list article:last-child { border-bottom: 0; }
.wf-pos-focus-list article > span:first-child, .wf-pos-person-list article > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #eaf2ff; color: #2e6fd8; font-size: 14px; font-weight: 900; }
.wf-pos-focus-list article div, .wf-pos-person-list article div { min-width: 0; }
.wf-pos-focus-list article strong, .wf-pos-focus-list article small, .wf-pos-person-list article strong, .wf-pos-person-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-pos-focus-list article strong, .wf-pos-person-list article strong { color: #1f2d43; font-size: 15px; }
.wf-pos-focus-list article small, .wf-pos-person-list article small { margin-top: 4px; color: #75849a; font-size: 12px; }
.wf-pos-focus-list article > em { min-width: 70px; padding: 6px 8px; border-radius: 9px; background: #eef1f5; color: #59677a; font-size: 11px; font-style: normal; font-weight: 900; text-align: center; white-space: nowrap; }
.wf-pos-focus-list article > em.is-working { background: #e8f1ff; color: #2467c8; }
.wf-pos-focus-list article > em.is-absent { background: #e9f8ef; color: #17834f; }
.wf-pos-focus-list article > em.is-leave { background: #fff0f0; color: #c43d45; }
.wf-pos-focus-list article > em.is-done { background: #eef1f5; color: #59677a; }
.wf-pos-focus-empty { min-height: 170px; display: grid; place-content: center; gap: 7px; color: #77869b; text-align: center; }
.wf-pos-focus-empty strong { color: #2c3a50; font-size: 17px; }
.wf-pos-focus-empty span { font-size: 12px; }

.wf-pos-roster-panel, .wf-pos-leave-panel { grid-column: span 6; min-height: 265px; }
.wf-pos-live-dot { display: inline-flex; align-items: center; gap: 7px; color: #247855 !important; }
.wf-pos-live-dot i { width: 8px; height: 8px; border-radius: 50%; background: #20bd7d; box-shadow: 0 0 0 6px rgba(32, 189, 125, .1); animation: wf-live-pulse 2s ease-in-out infinite; }
.wf-pos-carousel-controls { display: flex; align-items: center; gap: 7px; }
.wf-pos-carousel-controls button { min-width: 58px; min-height: 44px; padding: 0 10px; border: 1px solid #dce4ee; border-radius: 11px; background: #fff; color: #46566e; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.wf-pos-carousel-controls button:disabled { opacity: .38; cursor: default; }
.wf-pos-carousel-controls span { min-width: 50px; color: #65758a !important; font-size: 11px !important; text-align: center; }
.wf-pos-person-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 0 12px; padding: 8px 18px 16px; }
.wf-pos-person-list article { min-width: 0; min-height: 73px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px solid #edf1f5; }
.wf-pos-person-list article > time, .wf-pos-person-list article > em { color: #55708e; font-size: 12px; font-style: normal; font-weight: 850; white-space: nowrap; }
.wf-pos-leave-panel .wf-pos-person-list article > span:first-child { background: #fff1e3; color: #a7621c; }
.wf-pos-leave-panel .wf-pos-person-list article > em { padding: 6px 8px; border-radius: 9px; background: #fff5e9; color: #9b5d1d; }
.wf-pos-person-list .wf-pos-focus-empty { grid-column: 1 / -1; min-height: 145px; }

.wf-pos-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 5px; color: #637389; font-size: 12px; font-weight: 750; }
.wf-pos-footer button { min-height: 50px; padding: 0 20px; border: 1px solid #cfd9e6; border-radius: 12px; background: #fff; color: #243550; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }

.wf-home-pos-enabled .wf-pro-sidebar { display: none; }
.wf-home-pos-enabled .wf-pro-main { margin-left: 0; }
.wf-home-pos-enabled .wf-pro-header { display: none; }

@media (min-width: 921px) and (min-height: 600px) {
  body.wf-home-pos-enabled { height: 100dvh; overflow: hidden; }
  .wf-home-pos-enabled .wf-pro-shell,
  .wf-home-pos-enabled .wf-pro-main { height: 100dvh; min-height: 0; overflow: hidden; }
  .wf-home-pos-enabled .wf-pos-dashboard {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: 64px 34px minmax(0, 1fr);
    gap: 10px;
    padding: 16px 18px 10px;
    overflow: hidden;
  }
  .wf-home-pos-enabled .wf-pos-marquee { min-height: 34px; }
  .wf-home-pos-enabled .wf-pos-grid {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1.58fr) minmax(0, .92fr);
    gap: 10px;
  }
  .wf-home-pos-enabled .wf-pos-grid > article { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  .wf-home-pos-enabled .wf-pos-grid > article > header { min-height: 60px; flex: 0 0 60px; padding: 10px 18px; }
  .wf-home-pos-enabled .wf-pos-grid > article > header h3 { margin-top: 3px; font-size: 20px; }
  .wf-home-pos-enabled .wf-pos-qr-body { min-height: 0; flex: 1 1 auto; gap: 18px; padding: 14px 18px; }
  .wf-home-pos-enabled .wf-pos-qr-frame { width: min(100%, min(29dvh, 260px)); border-width: 7px; border-radius: 20px; }
  .wf-home-pos-enabled .wf-pos-qr-copy p { margin: 10px 0 14px; line-height: 1.55; }
  .wf-home-pos-enabled .wf-pos-qr-copy button,
  .wf-home-pos-enabled .wf-pos-qr-copy a { min-height: 44px; }
  .wf-home-pos-enabled .wf-pos-status-panel > header { min-height: 72px; flex: 0 0 72px; padding: 14px 20px; }
  .wf-home-pos-enabled .wf-pos-status-accordion { min-height: 96px; flex: 0 0 96px; padding: 12px 20px; }
  .wf-home-pos-enabled .wf-pos-status-item { min-height: 72px; padding: 15px 14px 11px; }
  .wf-home-pos-enabled .wf-pos-focus-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
  .wf-home-pos-enabled .wf-pos-roster-panel,
  .wf-home-pos-enabled .wf-pos-leave-panel { min-height: 0; }
  .wf-home-pos-enabled .wf-pos-person-list { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
  .wf-home-pos-enabled .wf-pos-person-list article { min-height: 62px; }
  .wf-home-pos-enabled .wf-pos-person-list .wf-pos-focus-empty { min-height: 100%; }
}

@keyframes wf-pos-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (max-width: 1180px) {
  .wf-pos-qr-body { grid-template-columns: minmax(210px, .85fr) minmax(210px, 1fr); gap: 18px; }
  .wf-pos-qr-frame { max-width: 250px; }
  .wf-pos-person-list { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .wf-home-header-actions { width: 100%; flex-wrap: wrap; }
  .wf-owner-business-actions { width: 100%; }
  .wf-owner-business-actions select { flex: 1; min-width: 0; }
  .wf-home-mode-switch { margin-right: auto; }
  .wf-pos-qr-panel, .wf-pos-status-panel { grid-column: span 12; }
  .wf-pos-qr-body { grid-template-columns: minmax(240px, .8fr) minmax(250px, 1.2fr); }
  .wf-pos-status-panel { min-height: auto; }
  .wf-pos-focus-list { min-height: 120px; }
}

@media (max-width: 700px) {
  .wf-home-mode-switch { width: 100%; grid-template-columns: 1fr 1fr; order: -1; }
  .wf-home-mode-switch button { min-height: 48px; }
  .wf-home-fullscreen-button { display: none; }
  .wf-pos-dashboard { padding: 14px; }
  .wf-pos-topbar { align-items: flex-start; }
  .wf-pos-clock-block { min-width: auto; }
  .wf-pos-qr-body { grid-template-columns: 1fr; }
  .wf-pos-qr-frame { max-width: 270px; }
  .wf-pos-qr-copy { justify-items: center; text-align: center; }
  .wf-pos-status-accordion { overflow-x: auto; }
  .wf-pos-status-item { min-width: 116px; }
  .wf-pos-roster-panel, .wf-pos-leave-panel { grid-column: span 12; }
  .wf-pos-grid > article > header { align-items: flex-start; flex-direction: column; }
  .wf-pos-carousel-controls { width: 100%; justify-content: flex-end; }
  .wf-pos-person-list { grid-template-columns: 1fr; }
  .wf-pos-footer { align-items: stretch; flex-direction: column; padding: 12px 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-pos-marquee > div, .wf-pos-live-dot i { animation: none; }
}

/* 관리자 홈 일반 모드의 첫 화면 밀도를 높인다. */
@media (min-width: 761px) {
  .wf-home-page:not(.wf-home-pos-enabled) .wf-pro-header {
    min-height: 80px;
    padding: 13px 34px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome {
    min-height: 195px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-copy {
    padding: 27px 34px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-copy > span {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-copy h2 {
    font-size: clamp(28px, 2.5vw, 36px);
    line-height: 1.12;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-copy p {
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.6;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-actions {
    margin-top: 16px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-welcome-actions a {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-qr-launch {
    width: calc(100% - 28px);
    min-height: 138px;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    margin-right: 28px;
    padding: 18px 20px;
    border-radius: 18px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-qr-symbol {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-qr-launch strong {
    margin-top: 4px;
    font-size: 17px;
  }

  .wf-home-page:not(.wf-home-pos-enabled) .wf-home-qr-launch em {
    margin-top: 4px;
  }
}

/* 근로시간 표 · 휴게 열 (2026-08 휴게시간 기능) */
.wf-break-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wf-break-cell .wf-break-amount { font-variant-numeric: tabular-nums; }
.wf-break-source { font-size: 11px; color: #6b7280; line-height: 1.2; }
.wf-break-badge {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.wf-break-badge.danger { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.wf-break-badge.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.wf-break-badge.muted { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* 근태 월간 매트릭스 (직원 × 날짜) — 2026-08 */
.wf-att-matrix-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.wf-att-matrix-toolbar label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #475569; white-space: nowrap; }
.wf-att-matrix-toolbar select,
.wf-att-matrix-toolbar input[type="search"] { padding: 6px 10px; border: 1px solid #d7dce5; border-radius: 8px; font-size: 13px; }
.wf-att-matrix-check { cursor: pointer; }
.wf-directory-checks { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 16px 9px; }
.wf-directory-checks .wf-directory-check { margin: 0; }
.wf-att-leaver-note { margin: 0 0 8px; padding: 9px 12px; border: 1px solid #ffe0b8; border-radius: 10px; background: #fff8ef; color: #9a6412; font-size: 12px; line-height: 1.55; word-break: keep-all; }
.wf-att-leaver-note[hidden] { display: none; }
.wf-directory-check { display: flex; align-items: center; gap: 7px; margin: 0 16px 10px; color: #7b8496; font-size: 11px; font-weight: 800; cursor: pointer; }
.wf-directory-check input { width: 15px; height: 15px; margin: 0; accent-color: #5d5fef; }
.wf-att-matrix-summary { font-size: 12px; color: #64748b; }
.wf-att-matrix-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 12px; color: #64748b; }
.wf-att-matrix-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.wf-att-matrix-legend .dot.late { background: #ef4444; }
.wf-att-matrix-legend .dot.leave { background: #3b82f6; }
.wf-att-matrix-legend .dot.warn { background: #f59e0b; }
.wf-att-matrix-legend .dot.none { background: #e2e8f0; }

/* 이름 열은 가로 스크롤에서도 고정한다. 날짜가 31개라 안 고정하면 누구 줄인지 잃는다. */
/* grid/flex 자식은 기본 min-width:auto 라, 넓은 표가 바깥 레이아웃까지 밀어낸다.
   min-width:0 을 줘야 표가 자기 상자 안에서만 스크롤된다. */
.wf-pro-content, .wf-pro-content > *, .wf-admin-panel { min-width: 0; }
.wf-att-matrix-wrap {
  overflow: auto; max-height: 70vh; min-width: 0; max-width: 100%;
  border: 1px solid #e8ecf3; border-radius: 12px; background: #fff;
  overscroll-behavior-x: contain;
}
.wf-att-matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.wf-att-matrix th, .wf-att-matrix td { border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f6f8fb; }
.wf-att-matrix thead th { position: sticky; top: 0; z-index: 3; background: #fbfcfe; padding: 8px 6px; font-weight: 700; color: #475569; white-space: nowrap; }
.wf-att-matrix thead th.sat { color: #2563eb; }
.wf-att-matrix thead th.sun { color: #dc2626; }
.wf-att-matrix th.wf-att-name, .wf-att-matrix td.wf-att-name {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
  min-width: 132px; padding: 7px 12px; border-right: 1px solid #e8ecf3;
}
.wf-att-matrix thead th.wf-att-name { z-index: 4; background: #fbfcfe; }
.wf-att-matrix td.wf-att-name strong { display: block; font-size: 13px; color: #0f172a; }
.wf-att-matrix td.wf-att-name small { display: block; color: #94a3b8; font-size: 11px; }
.wf-att-matrix tbody tr:hover td { background: #f9fbff; }
.wf-att-matrix tbody tr:hover td.wf-att-name { background: #f9fbff; }

.wf-att-cell { min-width: 62px; height: 46px; text-align: center; padding: 3px 4px; cursor: default; vertical-align: middle; }
.wf-att-cell.has-record { cursor: pointer; }
.wf-att-cell b, .wf-att-cell span { display: block; line-height: 1.45; font-variant-numeric: tabular-nums; }
.wf-att-cell b { font-weight: 600; color: #0f172a; }
.wf-att-cell span { color: #64748b; }
.wf-att-cell.late b { color: #dc2626; }
.wf-att-cell.early span { color: #dc2626; }
.wf-att-cell.weekend { background: #fcfdfe; }
.wf-att-cell.leave { background: #eff6ff; color: #2563eb; font-weight: 600; }
.wf-att-cell.warn { box-shadow: inset 0 -3px 0 #fcd34d; }
.wf-att-cell.incomplete b { color: #b45309; }

.wf-att-matrix-popover {
  position: fixed; z-index: 60; min-width: 236px; max-width: 300px;
  padding: 13px 15px; border-radius: 12px; background: #fff;
  border: 1px solid #e2e8f0; box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
  font-size: 12px; color: #334155; pointer-events: none;
}
.wf-att-matrix-popover h4 { margin: 0 0 9px; font-size: 13px; color: #0f172a; }
.wf-att-matrix-popover dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.wf-att-matrix-popover dt { color: #94a3b8; white-space: nowrap; }
.wf-att-matrix-popover dd { margin: 0; text-align: right; color: #0f172a; }
.wf-att-matrix-popover dd.alert { color: #dc2626; font-weight: 600; }
.wf-att-matrix-popover dd.ok { color: #16a34a; font-weight: 600; }
.wf-att-matrix-empty { padding: 44px 16px; text-align: center; color: #94a3b8; font-size: 13px; }

/* 이번 달 퇴사자 — 급여 목록에 남아 있는 것이 정상이다(정산이 남았다).
   왜 남아 있는지 한 줄로 적어 두어야 매달 다시 의심하지 않는다. */
.wf-payroll-leaver { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #fff1e6; color: #a4551a; font-size: 10px; font-weight: 800; vertical-align: middle; }
.wf-payroll-leaver.past { background: #f1f3f7; color: #77839a; }
tr.is-leaving td { background: #fffdf8; }

/* ── 퇴직 정산 ────────────────────────────────────────────── */
/* 이 창에서 사람이 하려는 일은 'PDF 내려받기' 하나다. 그런데 정산 내역이 길어서
   버튼이 화면 아래로 밀려 내려가면, 스크롤을 끝까지 내려 본 사람만 그게 있는 줄 안다.
   그래서 내용만 스크롤시키고 버튼은 아래에 붙여 둔다. */
.wf-settlement-dialog { display: flex; flex-direction: column; overflow: hidden; width: min(680px, calc(100vw - 32px)); }
.wf-settlement-dialog > header { flex: none; }
.wf-settlement-dialog > .wf-settlement-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wf-settlement-dialog > footer { flex: none; border-top: 1px solid #e7edf5; background: #fff; }
.wf-payroll-row-action.is-settlement { border-color: #f0d3b4; background: #fff6ec; color: #a4551a; }
.wf-settlement-body { padding: 20px 26px 6px; color: #33415a; font-size: 12px; }
.wf-settlement-body h3 { margin: 22px 0 8px; color: #7d879a; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.wf-settlement-body h3:first-of-type { margin-top: 18px; }
.wf-settlement-deadline { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #f0dcbb; border-radius: 14px; background: #fffaf0; }
.wf-settlement-deadline strong { color: #7a4a10; font-size: 14px; }
.wf-settlement-deadline span { color: #8a6a3c; font-size: 10.5px; line-height: 1.55; }
.wf-settlement-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid #eef2f7; }
.wf-settlement-row i { display: grid; gap: 2px; color: #33415a; font-style: normal; font-weight: 700; }
.wf-settlement-row i small { color: #8d97a8; font-size: 10px; font-weight: 500; line-height: 1.5; }
.wf-settlement-row b { flex: none; color: #1d2a40; font-size: 13px; white-space: nowrap; }
.wf-settlement-row.is-total { margin-top: 4px; border-bottom: 0; border-top: 2px solid #dfe6f0; padding-top: 12px; }
.wf-settlement-row.is-total i { font-size: 13px; }
.wf-settlement-row.is-total b { font-size: 16px; }
.wf-settlement-table { overflow: auto; margin-top: 10px; border: 1px solid #e4ebf4; border-radius: 12px; }
.wf-settlement-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.wf-settlement-table th { padding: 8px 10px; border-bottom: 1px solid #e4ebf4; background: #f7f9fc; color: #78849a; font-size: 9.5px; font-weight: 800; text-align: left; }
.wf-settlement-table td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; color: #33415a; white-space: nowrap; }
.wf-settlement-table tr:last-child td { border-bottom: 0; }
.wf-settlement-table em { color: #b3661f; font-style: normal; font-weight: 800; }
.wf-settlement-table p { margin: 0; padding: 8px 10px; color: #8d97a8; font-size: 9.5px; }
.wf-settlement-notes { margin: 0; padding-left: 16px; color: #6f7b8e; font-size: 10.5px; line-height: 1.65; }
.wf-settlement-notes li { margin-bottom: 4px; }
.wf-settlement-error { margin: 0; padding: 16px; border: 1px solid #f3d5ce; border-radius: 12px; background: #fdf3f1; color: #a8402c; font-size: 12px; line-height: 1.6; }
.wf-settlement-dialog > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 26px 24px; }
/* 퇴직소득세 계산 과정 — 세액만 찍어 두면 맞는지 확인할 방법이 없다. */
.wf-settlement-steps { margin: 0; padding-left: 0; list-style: none; border: 1px solid #e4ebf4; border-radius: 12px; overflow: hidden; }
.wf-settlement-steps li { padding: 8px 12px; border-bottom: 1px solid #eef2f7; color: #33415a; font-size: 11.5px; line-height: 1.55; }
.wf-settlement-steps li:last-child { border-bottom: 0; background: #f7f9fc; font-weight: 700; }
.wf-settlement-source { margin: 8px 0 0; color: #8d97a8; font-size: 10px; }

/* ── 화면 안 확인창 (wfAsk) ──────────────────────────────────
   브라우저 기본 confirm·prompt 는 누구의 무슨 요청인지 적을 자리가 없다.
   근태 정정 승인·반려는 급여로 이어지는 결정이라 무엇이 바뀌는지 적어 놓고 묻는다. */
.wf-ask { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; padding: 20px; }
.wf-ask-backdrop { position: absolute; inset: 0; background: rgba(14, 20, 33, .48); }
.wf-ask-open { overflow: hidden; }
.wf-ask-card { position: relative; z-index: 1; width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px 26px 20px; border-radius: 20px; background: #fff; box-shadow: 0 26px 70px rgba(18, 25, 45, .3); animation: wf-ask-in .16s ease both; }
.wf-ask-card > span { color: #3274df; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.wf-ask-card > h2 { margin: 6px 0 12px; color: #17243a; font-size: 19px; line-height: 1.35; letter-spacing: -.03em; }
.wf-ask-lead { margin: 0 0 8px; padding: 10px 12px; border-radius: 11px; background: #f4f7fb; color: #2b3a52; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.wf-ask-detail { margin: 0; color: #6c7789; font-size: 11.5px; line-height: 1.6; }
.wf-ask-reason { display: grid; gap: 6px; margin-top: 16px; color: #4f5e72; font-size: 11px; font-weight: 800; }
.wf-ask-reason small { color: #929daf; font-size: 9.5px; font-weight: 600; }
.wf-ask-reason input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dbe3ee; border-radius: 11px; background: #fff; color: #27364c; font: inherit; font-size: 13px; font-weight: 500; outline: 0; }
.wf-ask-reason input:focus { border-color: #4c8cf4; box-shadow: 0 0 0 3px rgba(65, 130, 240, .1); }
.wf-ask-error { color: #b3341f; font-size: 10.5px; font-style: normal; font-weight: 700; }
.wf-ask-card > footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.wf-ask-card > footer button { min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.wf-ask-cancel { border-color: #d9dfea; background: #fff; color: #48566f; }
.wf-ask-ok { background: #2f6fe0; color: #fff; }
.wf-ask-ok.danger { background: #c0392b; }
@keyframes wf-ask-in { from { opacity: 0; transform: scale(.985) translateY(6px); } to { opacity: 1; transform: none; } }


/* ── 임금명세서 뷰어 ─────────────────────────────────────
   화면 안에서 보고 여기서 내려받는다. 새 탭으로 보내면 브라우저 PDF 뷰어가
   blob 주소를 파일 이름으로 써서 '638317ed...pdf' 같은 이름이 저장된다. */
.wf-pdf-viewer { place-items: center; }
.wf-pdf-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(940px, calc(100vw - 40px)); height: min(88vh, 1100px);
  overflow: hidden; border: 1px solid #e1e5ee; border-radius: 16px; background: #fff;
  box-shadow: 0 28px 80px rgba(20, 27, 44, .25); animation: wf-modal-in .18s ease both;
}
.wf-pdf-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid #e6eaf2; background: #f7f9fc;
}
.wf-pdf-bar span { display: block; color: #8b95a5; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.wf-pdf-bar h2 { margin: 2px 0 0; color: #17223a; font-size: 15px; font-weight: 800; }
.wf-pdf-actions { display: flex; align-items: center; gap: 8px; }
.wf-pdf-close {
  width: 34px; height: 34px; border: 1px solid #dfe4ee; border-radius: 9px;
  background: #fff; color: #6b7890; font-size: 18px; line-height: 1; cursor: pointer;
}
.wf-pdf-close:hover { background: #f2f5fa; }
.wf-pdf-dialog iframe { flex: 1; width: 100%; border: 0; background: #f2f4f8; }
@media (max-width: 640px) {
  .wf-pdf-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
}