:root {
  --brand: #702b91;
  --brand-hover: #592173;
  --brand-soft: #f3edf8;
  --lime: #bbdc45;
  --ink: #26232c;
  --muted: #716b7b;
  --line: #e9e5ed;
  --surface: #fff;
  --canvas: #f6f5f8;
  --success: #287346;
  --danger: #b53343;
  --radius: 1.125rem;
  --header: 4.75rem;
  --sidebar: 15.5rem;
  --mobile-nav-height: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  --bs-primary: #702b91;
  --bs-primary-rgb: 112,43,145;
  --bs-body-color: #26232c;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--bs-body-font-family); font-size: 1rem; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--brand); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, .btn, select, .icon-button { touch-action: manipulation; }
button, .btn { white-space: normal; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 750; line-height: 1.35; letter-spacing: -.045em; margin-bottom: .5rem; }
h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.45; }
h3 { font-size: 1.05rem; font-weight: 700; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.eyebrow { display: block; color: var(--brand); font-size: .875rem; font-weight: 700; letter-spacing: .035em; margin-bottom: .6rem; }
.bi { display: inline-block; line-height: 1; }
.skip-link { position: fixed; z-index: 2000; top: -6rem; left: 1rem; background: white; padding: 1rem; border: 2px solid var(--brand); }
.skip-link:focus { top: .5rem; }
.btn { --bs-btn-border-radius: .65rem; min-height: 2.75rem; padding: .6rem 1rem; font-weight: 650; font-size: .9375rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; line-height: 1.4; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover); --bs-btn-disabled-bg: #8e8394; --bs-btn-disabled-border-color: #8e8394; }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: #d7c3e1; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); background: white; }
.btn-light { --bs-btn-bg: #f5f3f7; --bs-btn-border-color: #e9e5ed; --bs-btn-hover-bg: #eae5ef; --bs-btn-hover-border-color: #d9d1e2; }
.btn-sm { min-height: 2.75rem; padding: .5rem .75rem; font-size: .875rem; }
.form-control, .form-select { min-height: 3rem; border: 1px solid #d9d4df; border-radius: .65rem; font-size: 1rem; color: var(--ink); background-color: white; }
.form-control:focus, .form-select:focus { border-color: #9e71b4; box-shadow: 0 0 0 .2rem #702b9118; }
.form-label { font-size: .9375rem; font-weight: 650; margin-bottom: .5rem; }
.form-help { font-size: .875rem; color: var(--muted); margin: .625rem 0 0; }
.field { margin-bottom: 1.25rem; }
.alert { border-radius: .8rem; padding: 1rem 1.15rem; font-size: .9375rem; }
.alert-info { color: #543368; background: #f3edf8; border-color: #e1d1e9; }
.status-pill { display: inline-flex; align-items: center; gap: .375rem; border-radius: 99px; padding: .3rem .65rem; background: #eeedf1; color: #67616e; font-size: .875rem; font-weight: 650; line-height: 1.35; }
.status-success { color: #216439; background: #edf7ee; }
.status-pending { color: #875919; background: #fff6e5; }
.status-danger { color: var(--danger); background: #fceef0; }
.app-header { height: var(--header); position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2rem; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 1020; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.app-header .brand { min-width: 0; flex-shrink: 1; }
.brand-mark { display: block; width: 3.35rem; height: auto; flex-shrink: 0; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: -.035em; }
.brand-copy small { font-size: .75rem; color: var(--muted); }
.brand-mobile-store, .brand-store-full { display: none; }
.header-actions { display: flex; align-items: center; gap: 1rem; min-width: 0; flex-shrink: 0; }
.role-label { font-size: .8125rem; font-weight: 650; color: var(--brand); border: 1px solid #e7daed; border-radius: .4rem; padding: .15rem .55rem; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line); border-radius: .7rem; background: white; color: #62586d; font-size: 1.2rem; }
.icon-button:hover { background: var(--brand-soft); color: var(--brand); }
.worker-mobile-tool { display: none; }
.install-guide-section { margin-top: 1.35rem; }
.install-guide-section h3 { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }
.install-guide-section ol { line-height: 1.75; padding-left: 1.35rem; margin: 0; }
.install-guide-section li + li { margin-top: .25rem; }
.worker-logout-dialog { width: min(23rem, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.1rem; color: var(--ink); background: white; box-shadow: 0 1.1rem 2.5rem #21172b33; }
.worker-logout-dialog::backdrop { background: #21172b75; }
.worker-logout-dialog h2 { margin: 0 0 1.25rem; font-size: 1.2rem; font-weight: 750; }
.worker-logout-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.worker-logout-actions .btn { min-width: 5rem; }
.header-user { display: flex; align-items: center; gap: .6rem; border-left: 1px solid var(--line); padding-left: 1rem; font-size: .9375rem; min-width: 0; }
.header-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.header-store-button { display: inline-flex; align-items: center; gap: .55rem; max-width: min(22rem, 32vw); padding: .35rem .5rem; border: 0; border-radius: .75rem; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.header-store-button:hover, .header-store-button:focus-visible { background: var(--brand-soft); color: var(--brand); }
.header-store-button strong { max-width: 17rem; font-size: .875rem; }
.header-store-button > .bi { font-size: .8rem; color: var(--muted); }
.header-store-unassigned { color: var(--muted); font-weight: 600; }
.avatar { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 1.2rem; }
.app-sidebar { width: var(--sidebar); position: fixed; inset: var(--header) auto 0 0; background: var(--surface); padding: 2rem 1.125rem 1.125rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); z-index: 1010; overflow-y: auto; }
.sidebar-content { display: contents; }
.sidebar-label { font-size: .8125rem; color: #918998; margin: 0 1rem .8rem; }
.side-nav { display: flex; flex-direction: column; gap: .45rem; }
.side-link { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: .75rem; font-size: .9375rem; color: #746b7e; font-weight: 550; position: relative; }
.side-link .bi { font-size: 1.2rem; }
.menu-unread-dot { display: block; position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: #e53935; pointer-events: none; }
.side-nav .menu-unread-dot { left: .25rem; top: 50%; transform: translateY(-50%); }
.side-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 750; }
@media (hover: hover) { .side-link:hover { background: #f6f3f8; color: var(--brand); } }
.sidebar-bottom { margin-top: auto; padding-top: 2rem; }
.sidebar-person { display: flex; align-items: center; gap: .65rem; padding: 1rem .75rem; border-top: 1px solid var(--line); border-radius: .75rem; color: var(--ink); min-width: 0; }
.sidebar-person-copy { flex: 1; min-width: 0; }
.sidebar-person strong, .sidebar-person small { display: block; font-size: .875rem; }
.sidebar-person small { color: var(--muted); font-size: .8125rem; }
.sidebar-person > .bi { flex: none; color: var(--muted); font-size: .875rem; }
.sidebar-person.active, .sidebar-person:focus-visible { background: var(--brand-soft); color: var(--brand); }
@media (hover: hover) { .sidebar-person:hover { background: var(--brand-soft); color: var(--brand); } }
[dir="rtl"] .sidebar-person > .bi { transform: scaleX(-1); }
.logout-link { padding-top: .6rem; padding-bottom: .6rem; font-weight: 400; }
.mobile-nav, .mobile-logout { display: none; }
.more-menu { display: grid; gap: .75rem; max-width: 42rem; }
.more-menu-link { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; color: var(--ink); text-decoration: none; }
.more-menu-link:hover, .more-menu-link:focus-visible { color: var(--brand); border-color: var(--brand); }
.more-menu-link > .bi:first-child { font-size: 1.4rem; color: var(--brand); }
.more-menu-link > span { display: grid; gap: .2rem; flex: 1; }
.more-menu-link small { color: var(--muted); }
.more-menu-link > .bi:last-child { color: var(--muted); }
.worker-settings-main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.worker-settings-page { display: flex; flex: 1; flex-direction: column; }
.worker-settings-menu { overflow: hidden; }
.worker-settings-row { display: flex; align-items: center; gap: .875rem; padding: 1.125rem; color: var(--ink); }
.worker-settings-row + .worker-settings-row { border-top: 1px solid var(--line); }
.worker-settings-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; color: var(--brand); background: var(--brand-soft); font-size: 1.25rem; }
.worker-settings-copy { display: grid; flex: 1; gap: .15rem; min-width: 0; }
.worker-settings-copy strong { font-size: 1rem; font-weight: 650; }
.worker-settings-copy small { color: var(--muted); font-size: .875rem; }
.worker-settings-row > .bi:last-child { flex: none; color: var(--muted); font-size: .875rem; }
[dir="rtl"] .worker-settings-row > .bi:last-child { transform: scaleX(-1); }
.worker-settings-row:focus-visible { outline-offset: -3px; }
.worker-settings-row[aria-disabled="true"] { color: var(--muted); }
.worker-settings-logout { margin-top: auto; padding-top: 2rem; }
.worker-settings-logout .btn { width: 100%; min-height: 3.125rem; }
@media (hover: hover) { .worker-settings-row[href]:hover { color: var(--brand); background: var(--brand-soft); } }
.alert-settings-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.alert-settings-tabs .btn[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.worker-mobile-payroll-link { display: none !important; }
@media (max-width: 991.98px) { .worker-mobile-payroll-link { display: inline-flex !important; } }
.app-main { margin-left: var(--sidebar); padding: calc(var(--header) + 2.5rem) clamp(1.5rem, 3.4vw, 3.5rem) 3.5rem; min-height: 100vh; }
.install-guest-main { margin-left: 0; }
.page-container { max-width: 76rem; margin: 0 auto; }
.employee-container { max-width: 67rem; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.page-heading p { margin-bottom: 0; color: var(--muted); font-size: .9375rem; }
.page-date { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: #7b7385; white-space: nowrap; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 12px #30243b03; }
.panel-body { padding: 1.75rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.75rem; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 1.125rem; }
.panel-heading .small { color: var(--muted); }
.attendance-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.attendance-grid > * { min-width: 0; }
.worker-duration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 1rem; margin-top: 1.4rem; }
.worker-duration-grid .field { min-width: 0; margin: 0 !important; }
.section-icon { display: inline-flex; width: 2.5rem; height: 2.5rem; background: var(--brand-soft); border-radius: .7rem; align-items: center; justify-content: center; color: var(--brand); font-size: 1.25rem; }
.heading-with-icon { display: flex; align-items: center; gap: .75rem; }
.time-inputs { display: flex; align-items: center; gap: .6rem; }
.time-select { position: relative; flex: 1; min-width: 0; }
.time-select select { min-height: 4rem; padding-left: 1.05rem; padding-right: 3.25rem; font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; background-position: right .8rem center; }
.time-select > span { position: absolute; right: 2.3rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .875rem; pointer-events: none; }
.time-colon { font-size: 1.5rem; color: #aaa1b2; }
.shift-estimate { padding: 1rem 1.1rem; background: var(--brand-soft); border: 1px solid #e6d8ee; border-radius: .75rem; margin: 1.4rem 0 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .875rem; }
.shift-estimate strong { color: var(--brand); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.attendance-submit { width: 100%; min-height: 3.375rem; font-size: 1rem; }
.attendance-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.attendance-fieldset:disabled .time-select, .attendance-fieldset:disabled .field { opacity: .7; }
.registered-note { padding: .875rem 1rem; border-radius: .65rem; background: #edf7ee; color: #2d6f41; font-size: .9375rem; margin-bottom: 1.25rem; }
.record-timeline { padding: 0; margin: 0; list-style: none; }
.record-timeline li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .875rem; padding: 1.25rem 0; }
.record-timeline li + li { border-top: 1px dashed var(--line); }
.record-icon { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; color: var(--brand); background: #f7f3fa; font-size: 1.2rem; }
.record-icon.out { background: #f2f7df; color: #628325; }
.record-timeline small { display: block; color: var(--muted); margin-top: .15rem; }
.record-time { display: block; font-size: 1.65rem; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-align: right; }
.record-time small { font-size: .75rem; letter-spacing: 0; font-weight: 400; }
.record-total { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: 1.1rem 0 0; border-top: 1px solid var(--line); margin-top: .75rem; font-size: .9375rem; }
.record-total strong { font-size: 1.5rem; color: var(--brand); }
.record-total strong span { font-size: 1rem; font-weight: 500; }
.help-panel { padding: 1.3rem 1.5rem; background: #efedf2; border-radius: var(--radius); margin-top: 1.25rem; }
.help-panel summary { cursor: pointer; color: var(--ink); font-size: .9375rem; font-weight: 700; }
.help-panel[open] summary { margin-bottom: .6rem; }
.help-panel p { color: var(--muted); font-size: .875rem; margin-bottom: .3rem; line-height: 1.8; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card { padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-width: 0; }
.stat-label { color: var(--muted); font-size: .875rem; }
.stat-value { display: block; font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 750; line-height: 1.35; margin-top: .45rem; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat-value span { font-size: .9rem; font-weight: 500; letter-spacing: 0; margin-left: .2rem; }
.stat-card .section-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; }
.stat-card.emphasis { border-color: #ddd0e7; background: linear-gradient(110deg, #fbf8fd, #f2ecf6); }
.stat-card.emphasis .stat-value { color: var(--brand); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.period-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.period-form .form-select { width: auto; min-height: 2.75rem; font-size: .9375rem; }
.table-scroll { overflow-x: auto; overflow-y: hidden; height: auto; max-height: none; border-radius: 0 0 var(--radius) var(--radius); -webkit-overflow-scrolling: touch; }
.staff-table, .attendance-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.staff-table { min-width: 60rem; }
.staff-table th, .staff-table td { padding: 1rem .85rem; text-align: left; border-bottom: 1px solid #f0edf3; vertical-align: middle; }
.staff-table th { background: #fcfbfd; color: #82788d; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.staff-table th:first-child, .staff-table td:first-child { padding-left: 1.5rem; }
.staff-table th:last-child, .staff-table td:last-child { padding-right: 1.5rem; }
.staff-table tbody tr:last-child td { border-bottom: 0; }
.staff-table tbody tr:hover { background: #fdfbfe; }
.staff-table .numeric { white-space: nowrap; font-variant-numeric: tabular-nums; }
.staff-table td[data-label="근무시간"] small { white-space: normal; }
.employee-name { font-weight: 700; font-size: 1rem; }
.employee-name small { color: var(--muted); display: none; font-size: .8125rem; font-weight: 400; }
.wage-display { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.text-action { border: none; background: none; color: var(--brand); padding: .5rem; font-size: .875rem; min-height: 2.75rem; min-width: 2.75rem; }
.wage-edit-form { min-width: 11rem; }
.wage-edit-form input { max-width: 11rem; min-height: 2.75rem; }
.wage-edit-actions { display: flex; gap: .35rem; margin-top: .4rem; }
.table-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.table-total strong { color: var(--brand); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--muted); }
.empty-state .bi { font-size: 2rem; color: #b6a9c1; display: block; margin-bottom: 1rem; }
.empty-state strong { color: var(--ink); display: block; margin-bottom: .4rem; }
.empty-state p { margin-bottom: 0; font-size: .9375rem; }
.post-list { display: grid; gap: .8rem; }
.post-card { background: white; border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; }
.post-summary { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; min-height: 5rem; }
.post-summary::-webkit-details-marker { display: none; }
.post-summary::after { content: ''; width: .5rem; height: .5rem; border: solid #9a8da6; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); flex-shrink: 0; margin-left: .35rem; transition: transform .15s; }
.post-card[open] .post-summary::after { transform: rotate(225deg); }
.post-card[open] .post-summary { background: #fcfafd; }
.post-title-block { flex: 1; min-width: 0; }
.post-title { font-size: 1rem; font-weight: 650; line-height: 1.6; }
.post-date { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.new-badge { font-size: .75rem; padding: .15rem .4rem; border-radius: .3rem; color: var(--brand); background: #efe3f5; font-weight: 750; margin-right: .45rem; display: inline-block; vertical-align: .05rem; }
.post-content { padding: 1.5rem; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.85; overflow-x: auto; overflow-wrap: anywhere; word-break: normal; }
.post-content img { max-width: 100% !important; height: auto !important; }
.post-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-content table { max-width: 100%; }
.post-actions { display: flex; justify-content: flex-end; gap: .5rem; padding-top: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.editor-panel { padding: 1.5rem; margin-bottom: 1.25rem; }
.editor-panel h2 { margin-bottom: 1.25rem; }
.editor-area { width: 100%; min-height: 14rem; }
.editor-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.note-editor { border-radius: .65rem; max-width: 100%; }
.note-editor .note-toolbar { display: flex; flex-wrap: wrap; background: #f8f6fa; padding: .4rem; }
.note-editor .note-editable { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.note-toolbar .note-btn { min-width: 2rem; min-height: 2.25rem; }
.modal-content { border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 80px #30243b22; }
.modal-header, .modal-body, .modal-footer { padding: 1.25rem 1.5rem; }
.modal-title { font-size: 1.125rem; font-weight: 700; }
.modal .btn-close { box-sizing: content-box; min-width: 1.25rem; min-height: 1.25rem; padding: .7rem; }
.payslip-publication-modal .modal-dialog { width: calc(100% - 24px); max-width: 390px; min-height: calc(100% - 24px); margin: 12px auto; }
.payslip-publication-modal .modal-content { display: grid; gap: 12px; max-height: calc(100dvh - 24px); padding: 20px; background: var(--surface); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.payslip-publication-modal .modal-header { align-items: flex-start; gap: 8px; padding: 0; border: 0; }
.payslip-publication-heading { min-width: 0; }
.payslip-publication-heading .modal-title { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 750; }
.payslip-publication-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.payslip-publication-close { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 1px solid transparent; border-radius: 11px; background: var(--canvas); color: var(--muted); }
.payslip-publication-close .bi { font-size: 20px; }
.payslip-publication-form { display: grid; gap: 12px; min-width: 0; margin: 0; }
.payslip-publication-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.payslip-publication-option { position: relative; min-width: 0; min-height: 116px; margin: 0; padding: 14px; border: 1px solid #d9d4df; border-radius: 13px; background: var(--surface); cursor: pointer; }
.payslip-publication-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.payslip-publication-option:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.payslip-publication-option:has(input:disabled) { cursor: not-allowed; opacity: .65; }
.payslip-publication-option input { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.payslip-publication-option-content { display: grid; gap: 5px; min-width: 0; }
.payslip-publication-option-content > .bi { justify-self: start; margin-bottom: 5px; color: var(--muted); font-size: 23px; }
.payslip-publication-option:has(input:checked) .payslip-publication-option-content > .bi { color: var(--brand); }
.payslip-publication-option-content strong { font-size: 16px; line-height: 1.4; font-weight: 750; }
.payslip-publication-option-content small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.payslip-publication-info { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.payslip-publication-info .bi { flex: none; margin-top: 3px; }
.payslip-publication-status { margin: 0; color: var(--danger); font-size: 13px; line-height: 1.6; }
.payslip-publication-actions { display: grid; grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.payslip-publication-actions .btn { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 11px; font-size: 14px; }
.payslip-publication-actions .btn-light { background: var(--canvas); color: var(--ink); }
.payslip-publication-modal .alert { margin: 0; padding: 12px; font-size: 13px; line-height: 1.6; }
@media (hover: hover) {
  .payslip-publication-option:has(input:not(:checked):not(:disabled)):hover { border-color: var(--brand); }
  .payslip-publication-close:not(:disabled):hover { color: var(--ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .payslip-publication-actions .btn, .payslip-publication-close { transition: transform 150ms ease-out; }
  .payslip-publication-actions .btn:not(:disabled):active, .payslip-publication-close:not(:disabled):active { transform: scale(.96); }
}
.notification-list { display: grid; gap: .75rem; }
.notification-row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; }
.notification-row small { color: var(--muted); display: block; }
.back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--muted); font-size: .875rem; margin-bottom: 1rem; }
.person-heading { display: flex; align-items: center; gap: 1rem; }
.person-heading .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.inline-form .form-control, .inline-form .form-select { width: auto; max-width: 100%; }
.profile-panel { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.5rem; padding: 1.4rem 1.5rem; margin-bottom: 1.5rem; }
.profile-section > .form-label { display: block; color: var(--muted); }
.profile-section + .profile-section { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.profile-section .form-help { margin-top: .35rem; }
.ssn-input { flex: 1 1 11rem; min-width: 0; font-variant-numeric: tabular-nums; }
.ssn-value { font-variant-numeric: tabular-nums; }
.attendance-table th, .attendance-table td { padding: 1rem 1.5rem; border-bottom: 1px solid #f0edf3; text-align: center; font-variant-numeric: tabular-nums; }
.attendance-table th { color: var(--muted); font-size: .8125rem; background: #fcfbfd; font-weight: 600; }
.attendance-table th:first-child, .attendance-table td:first-child { text-align: left; }
.attendance-table tr.is-today { background: #f6f0fa; }
.attendance-table tr.is-empty td:not(:first-child) { color: #b3acbb; }
.weekday { font-size: .8125rem; margin-left: .35rem; }
.sunday { color: #b84554; }
.saturday { color: #3c68ad; }
.auth-body { min-height: 100dvh; background: #f5f3f8; }
.auth-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.auth-aside { position: relative; display: flex; flex-direction: column; padding: clamp(2rem, 5vw, 5rem); background: #62277e; color: white; }
.auth-aside .brand { color: white; }
.auth-aside .brand-mark { width: 4.1rem; padding: .4rem; border-radius: .65rem; background: white; }
.auth-aside .brand-copy small { color: #d2bddc; }
.auth-message { margin: auto 0; padding: 4rem 0; max-width: 34rem; }
.auth-message .eyebrow { color: var(--lime); font-size: .875rem; }
.auth-message h1 { font-size: clamp(2.2rem, 4vw, 3.35rem); line-height: 1.4; letter-spacing: -.055em; font-weight: 750; }
.auth-message h1 span { color: var(--lime); }
.auth-message p { color: #ddcfe5; margin: 1.5rem 0 0; font-size: 1rem; }
.auth-bottom { border-top: 1px solid #ffffff24; padding-top: 1.5rem; display: flex; gap: 2rem; font-size: .875rem; color: #eee4f3; flex-wrap: wrap; }
.auth-bottom span { display: inline-flex; gap: .5rem; align-items: center; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; min-width: 0; }
.auth-card { width: 100%; max-width: 26rem; }
.auth-card h2 { font-size: 1.75rem; margin-bottom: .5rem; }
.auth-card > p { color: var(--muted); font-size: .9375rem; margin-bottom: 1.75rem; }
.auth-mobile-brand { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #eae5ef; border-radius: .75rem; padding: .3rem; gap: .3rem; margin-bottom: 1.75rem; }
.auth-tabs button { border: 0; border-radius: .5rem; padding: .75rem; min-height: 2.75rem; background: none; color: var(--muted); font-size: .9375rem; font-weight: 650; }
.auth-tabs button[aria-selected="true"] { background: white; color: var(--brand); box-shadow: 0 2px 4px #3621430c; }
.auth-card .form-control { background: white; min-height: 3.25rem; }
.password-field { position: relative; }
.password-field input { padding-right: 4rem; }
.password-toggle { position: absolute; right: .4rem; top: .25rem; border: 0; background: none; color: var(--muted); width: 2.75rem; height: 2.75rem; border-radius: .5rem; }
.auth-note { color: var(--muted); text-align: center; font-size: .875rem; margin-top: 1.25rem; }
.auth-display-mode { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: center; }
.auth-display-mode button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); color: var(--brand); font-size: .875rem; font-weight: 600; }
.auth-display-mode button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
[hidden] { display: none !important; }
.app-update-notice { position: fixed; z-index: 1100; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid #d9c2e8; border-radius: 14px; background: #fff; color: #302738; box-shadow: 0 6px 24px #30273826; }
@media (max-width: 1199px) {
  :root { --sidebar: 13.5rem; }
  .app-header { padding: 0 1.5rem; }
  .app-main { padding-left: 1.75rem; padding-right: 1.75rem; }
  .stat-card { padding: 1.1rem; }
  .stat-card .section-icon { display: none; }
  .attendance-grid { gap: 1rem; }
  .panel-body, .panel-heading { padding: 1.35rem; }
}
/* The desktop rail keeps the content in place while the menu opens over it. */
@media (min-width: 992px) {
  :root { --sidebar: 4.5rem; --sidebar-expanded: 15.5rem; }
  .app-sidebar { inset-inline-start: 0; inset-inline-end: auto; width: var(--sidebar); padding-inline: .5rem; overflow-x: hidden; overscroll-behavior: contain; z-index: 1020; }
  .app-sidebar.is-expanded { width: var(--sidebar-expanded); box-shadow: 10px 0 26px #21172b12; }
  .app-sidebar .sidebar-label { white-space: nowrap; opacity: 0; }
  .app-sidebar .side-link { min-height: 3rem; }
  .app-sidebar .side-link > .bi { flex: 0 0 1.5rem; inline-size: 1.5rem; text-align: center; }
  .app-sidebar .side-link-copy { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; opacity: 0; }
  .app-sidebar .sidebar-person { block-size: 5rem; padding-inline: .5rem; overflow: hidden; }
  .app-sidebar .sidebar-person .avatar { width: 2.5rem; height: 2.5rem; }
  .app-sidebar:not(.is-expanded) .sidebar-person { flex: none; inline-size: 2.5rem; block-size: 2.5rem; margin: 1.25rem .5rem; padding: 0; gap: 0; border: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
  .app-sidebar:not(.is-expanded) .sidebar-person-copy,
  .app-sidebar:not(.is-expanded) .sidebar-person > .bi { display: none; }
  .app-sidebar .sidebar-person-copy { white-space: nowrap; opacity: 0; }
  .app-sidebar .sidebar-person-copy strong { overflow: hidden; text-overflow: ellipsis; }
  .app-sidebar .sidebar-person > .bi { opacity: 0; }
  .app-sidebar.is-expanded .sidebar-label,
  .app-sidebar.is-expanded .side-link-copy,
  .app-sidebar.is-expanded .sidebar-person-copy,
  .app-sidebar.is-expanded .sidebar-person > .bi { opacity: 1; }
  .app-sidebar .side-link:focus-visible,
  .app-sidebar .sidebar-person:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  [dir="rtl"] .app-main { margin-left: 0; margin-right: var(--sidebar); }
  [dir="rtl"] .app-sidebar { border-right: 0; border-left: 1px solid var(--line); }
  [dir="rtl"] .app-sidebar.is-expanded { box-shadow: -10px 0 26px #21172b12; }
  [dir="rtl"] .app-sidebar .menu-unread-dot { left: auto; right: .25rem; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  :root { --sidebar-expanded: 13.5rem; }
}
/* Touch desktop uses native fixed positioning without viewport-tracking offsets.
   Only the menu scrolls; controls remain anchored at bottom: 0. */
@media (min-width: 992px) and (any-pointer: coarse) {
  .app-main { min-height: 0; }
  /* An enlarged phone desktop view starts beside the rail, rather than inside
     the large centered gutter of a 1920px canvas. The canvas remains pannable. */
  html[data-desktop-fit="height"] .app-main > .page-container { margin-inline: 0; }
  html[data-desktop-fit="height"] .audit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-sidebar { inset-block-end: 0; height: auto; padding: 0; overflow: visible; }
  .sidebar-content { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; padding: 2rem .5rem var(--sidebar-footer-height, 9.75rem); }
  .sidebar-label { flex-shrink: 0; }
  .side-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav .side-link { flex-shrink: 0; }
  .sidebar-bottom { position: fixed; inset: auto; inset-inline-start: 0; bottom: 0; width: inherit; margin: 0; padding: 1rem .5rem max(1.125rem, env(safe-area-inset-bottom, 0px)); border-inline-end: 1px solid var(--line); background: var(--surface); transform: translateZ(0); z-index: 1; }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .app-sidebar { transition: width 200ms cubic-bezier(0.2, 0, 0, 1), box-shadow 200ms ease-out; }
  .app-sidebar.is-expanded { transition-duration: 280ms, 200ms; }
  .app-sidebar .sidebar-label, .app-sidebar .side-link-copy,
  .app-sidebar .sidebar-person-copy, .app-sidebar .sidebar-person > .bi { transition: opacity 180ms ease-out; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .app-sidebar .sidebar-label, .app-sidebar .side-link-copy,
  .app-sidebar .sidebar-person-copy, .app-sidebar .sidebar-person > .bi { transition: opacity 100ms linear; }
}
@media (max-width: 991.98px) {
  :root { --header: 4.25rem; }
  .app-header > .brand.brand-worker-store { flex: 1; min-width: 0; }
  .brand-worker-store .brand-copy { min-width: 0; }
  .brand-worker-store .brand-desktop-name { display: none; }
  .app-header .brand-worker-store .brand-mobile-store { display: -webkit-box; min-width: 0; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .875rem; line-height: 1.3; }
  .brand-worker-store:focus-visible .brand-store-full { display: block; position: fixed; top: var(--header); inset-inline-start: 1rem; max-width: calc(100% - 2rem); padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); color: var(--ink); box-shadow: 0 3px 12px #30243b12; font-size: .9375rem; line-height: 1.45; }
  .worker-desktop-install { display: none; }
  .worker-desktop-account, .worker-header-actions .role-label { display: none; }
  .app-header .header-actions.worker-header-actions > .icon-button { min-width: 2.75rem; min-height: 2.75rem; }
  .worker-mobile-tool { display: inline-flex; }
  .worker-settings-link[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
  .app-main.worker-settings-main { padding-bottom: calc(var(--mobile-nav-height) + 1.25rem); }
  .app-sidebar { display: none; }
  .app-main { margin-left: 0; padding: calc(var(--header) + 1.75rem) 1.5rem calc(7rem + env(safe-area-inset-bottom)); }
  .mobile-logout { display: inline-flex; }
  .header-user { display: none; }
  .mobile-nav { display: grid; grid-template-columns: repeat(var(--nav-items, 3), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: white; border-top: 1px solid var(--line); padding: .5rem max(.75rem, env(safe-area-inset-right)) max(.55rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left)); box-shadow: 0 -4px 16px #33243d05; }
  .mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .25rem .9rem; min-height: 4rem; color: #8a8094; font-size: .875rem; font-weight: 550; line-height: 1.4; border-radius: .65rem; position: relative; }
  .mobile-nav .bi { font-size: 1.3rem; }
  .mobile-nav .menu-unread-dot { left: 50%; bottom: .28rem; transform: translateX(-50%); }
  .mobile-nav a.active { color: var(--brand); background: var(--brand-soft); font-weight: 750; }
  .page-heading { margin-bottom: 1.5rem; }
  /* 모바일에서만 안내 문구와 설정 버튼을 같은 줄 양 끝에 둡니다. */
  .page-heading.page-heading-mobile-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem .75rem; }
  .page-heading-mobile-actions .page-heading-copy { display: contents; }
  .page-heading-mobile-actions .eyebrow { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
  .page-heading-mobile-actions .page-heading-text { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .page-heading-mobile-actions .page-date { grid-column: 1 / -1; grid-row: 3; }
  .page-heading-mobile-actions .page-heading-action { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .page-heading-mobile-actions .branch-policy-mobile-trigger { display: inline-flex; }
  .page-heading-mobile-actions .btn.page-heading-action, .page-heading-mobile-actions .page-heading-action > .btn { min-height: 2.25rem; padding: .4rem .7rem; font-size: .8125rem; white-space: nowrap; }
  .auth-shell { grid-template-columns: .8fr 1fr; }
  .auth-aside { padding: 2.5rem; }
  .auth-message h1 { font-size: 2.5rem; }
  .auth-bottom { gap: 1rem; }
}
@media (max-width: 767.98px) {
  .app-header { padding: 0 1rem; gap: .5rem; }
  .brand-copy small, .role-label { display: none; }
  .brand { gap: .6rem; }
  .brand-mark { width: 3rem; }
  .brand-copy strong { font-size: 1rem; }
  .header-actions { gap: .5rem; }
  .icon-button { border-color: transparent; }
  .app-main { padding: calc(var(--header) + 1.5rem) 1rem calc(7rem + env(safe-area-inset-bottom)); }
  .page-heading { align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
  .page-heading h1 { font-size: 1.6rem; }
  .page-heading p { font-size: .875rem; }
  .page-date { font-size: .8125rem; }
  .attendance-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .employee-attendance-page .page-heading p { display: none; }
  .employee-attendance-page .page-heading .eyebrow { font-size: .75rem; }
  .employee-attendance-page .page-heading h1 { margin: 0; font-size: 1.2rem; }
  .employee-attendance-page .page-date { font-size: .8rem; }
  .employee-attendance-page .attendance-grid { gap: .75rem; }
  .employee-attendance-page .panel-heading { padding: .85rem 1rem; }
  .employee-attendance-page .panel-heading h2 { font-size: 1rem; }
  .employee-attendance-page .panel-heading .section-icon { width: 2rem; height: 2rem; font-size: 1rem; }
  .employee-attendance-page .panel-body { padding: 1rem; }
  .employee-attendance-page .form-label { margin-bottom: .35rem; }
  .employee-attendance-page .time-select select { min-height: 3.25rem; font-size: 1.35rem; }
  .employee-attendance-page .time-inputs + .form-help { margin-top: .35rem; }
  .employee-attendance-page .field { margin-bottom: .75rem; }
  .employee-attendance-page .field.mt-4 { margin-top: 1rem !important; }
  .employee-attendance-page .field.mt-3 { margin-top: .75rem !important; }
  .employee-attendance-page .worker-duration-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .75rem; margin-top: 1rem; }
  .employee-attendance-page .worker-duration-grid .field { min-width: 0; margin: 0 !important; }
  .employee-attendance-page .worker-duration-grid .form-label { font-size: .85rem; }
  .employee-attendance-page .worker-duration-grid .form-select { width: 100%; min-width: 0; padding-left: .65rem; padding-right: 1.65rem; font-size: .9rem; background-position: right .5rem center; }
  .employee-attendance-page .shift-estimate { flex-wrap: wrap; margin: .75rem 0 .45rem; padding: .7rem .85rem; }
  .employee-attendance-page #shift-paid-estimate { margin-top: .3rem; }
  .employee-attendance-page #shift-paid-estimate:empty { display: none; }
  .employee-attendance-page .form-check.mt-4 { margin-top: .9rem !important; }
  .employee-attendance-page .form-check small { font-size: .8rem; }
  .employee-attendance-page .attendance-submit { min-height: 3rem; margin-top: .9rem; }
  .employee-attendance-page .registered-note { margin-bottom: .8rem; padding: .65rem .8rem; }
  .employee-attendance-page .record-timeline li { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .65rem; padding: .65rem 0; }
  .employee-attendance-page .record-icon { width: 2rem; height: 2rem; font-size: 1rem; }
  .employee-attendance-page .record-time { font-size: 1.35rem; }
  .employee-attendance-page .record-total { margin-top: .35rem; padding-top: .75rem; }
  .employee-attendance-page .record-total strong { font-size: 1.2rem; }
  .employee-attendance-page .help-panel { margin-top: .75rem; padding: .85rem 1rem; }
  .panel-body, .panel-heading { padding: 1.25rem; }
  .record-timeline li { padding: 1rem 0; }
  .record-time { font-size: 1.5rem; }
  .help-panel { padding: 1.2rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
  .stat-card { padding: 1rem 1.1rem; }
  .stat-card.emphasis { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .stat-card.emphasis > div { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; gap: .75rem; }
  .stat-card.emphasis .stat-value { margin-top: 0; font-size: 1.5rem; }
  .stat-value { font-size: 1.5rem; }
  .table-toolbar { padding: 1rem; gap: .75rem; }
  .table-toolbar > .btn { flex: 1; }
  .period-form { width: 100%; }
  .period-form .form-select { flex: 1; min-width: 0; width: 0; }
  .period-form .btn { flex-shrink: 0; }
  .staff-panel { background: transparent; border: none; box-shadow: none; }
  .staff-panel .table-toolbar { background: white; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
  .staff-table { display: block; min-width: 0; font-size: .9375rem; }
  .staff-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .staff-table tbody { display: grid; gap: 1rem; }
  .staff-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; gap: .9rem 1rem; }
  .staff-table td, .staff-table th:first-child, .staff-table td:first-child, .staff-table td:last-child { display: block; border: none; padding: 0; width: auto; min-width: 0; }
  .staff-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .8125rem; margin-bottom: .35rem; }
  .staff-table td.employee-cell { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: .9rem; }
  .staff-table td.employee-cell::before { display: none; }
  .employee-name { font-size: 1.125rem; }
  .employee-name small { display: block; margin-top: .15rem; }
  .staff-table td.username-cell { display: none; }
  .staff-table td.wage-cell { grid-column: 1 / -1; }
  .staff-table .manage-cell .btn, .staff-table .payslip-cell .btn, .staff-table .payslip-form, .staff-table .payslip-form .btn { width: 100%; }
  .wage-edit-form { min-width: 0; }
  .wage-edit-form input { width: 100%; max-width: 100%; }
  .wage-edit-actions .btn { flex: 1; }
  .table-total { padding: 1.1rem; border: 1px solid var(--line); background: white; border-radius: var(--radius); margin-top: 1rem; }
  .table-total strong { font-size: 1.125rem; }
  .post-summary { padding: 1.1rem; gap: .75rem; flex-wrap: wrap; }
  .post-title-block { flex-basis: calc(100% - 2rem); }
  .post-date { order: 3; width: 100%; font-size: .8125rem; }
  .post-summary::after { margin-left: auto; }
  .post-content { padding: 1.1rem; }
  .editor-panel { padding: 1.1rem; }
  .profile-panel { grid-template-columns: 1fr; padding: 1.2rem; gap: 1rem; }
  .profile-section + .profile-section { padding: 1rem 0 0; border-left: none; border-top: 1px solid var(--line); }
  .attendance-table th, .attendance-table td { padding: .9rem .6rem; font-size: .875rem; }
  .attendance-table th { font-size: .8125rem; }
  .attendance-table th:first-child, .attendance-table td:first-child { padding-left: 1rem; }
  .weekday { margin-left: .2rem; }
  .modal-dialog { margin: .75rem; }
  .modal-header, .modal-body, .modal-footer { padding: 1rem; }
  .auth-shell { display: block; }
  .auth-aside { display: none; }
  .auth-main { padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom)); min-height: 100dvh; }
  .auth-mobile-brand { display: inline-flex; margin-bottom: 2.5rem; }
  .auth-card { max-width: 27rem; }
  .auth-card h2 { font-size: 1.65rem; }
  .auth-card > p { font-size: .875rem; }
}
@media (max-width: 359px) {
  .app-main { padding-left: .75rem; padding-right: .75rem; }
  .panel-body, .panel-heading { padding: 1rem; }
  .brand-copy strong { font-size: .9375rem; }
  .header-actions { gap: .1rem; }
  .time-select select { padding-left: .75rem; }
  .attendance-table th, .attendance-table td { padding-left: .35rem; padding-right: .35rem; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 26em) {
  .time-select > span { display: none; }
  .time-select select { padding: .65rem .8rem; font-size: 1.35rem; background-image: none; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .app-header, .app-sidebar, .mobile-nav, .skip-link, .back-link, .btn, .text-action, .profile-panel, .modal { display: none !important; }
  body { background: white; font-size: 11pt; }
  .app-main { margin: 0; padding: 0; }
  .panel { box-shadow: none; }
  .table-scroll { overflow: visible; }
  .staff-table { min-width: 0; }
}

/* Monthly attendance review: the document owns vertical scrolling. */
.audit-page > .panel { margin-bottom: 1.5rem; }
.audit-page [id^="audit-"] { scroll-margin-top: calc(var(--header) + 1.5rem); }
/* 점검 요약은 하단 메뉴 위에 고정하고, 마지막 입력·설정 영역을 가리지 않습니다. */
.audit-main.has-audit-summary { padding-bottom: calc(var(--audit-summary-height, 6rem) + 3rem); }
.audit-summary-dock { position: fixed; z-index: 1015; left: calc(var(--sidebar) + clamp(1.5rem,3.4vw,3.5rem)); right: clamp(1.5rem,3.4vw,3.5rem); bottom: max(16px,env(safe-area-inset-bottom,0px)); max-width: 54rem; margin-inline: auto; padding: .45rem; border: 1px solid #cbb5d8; border-radius: 1.15rem; background: #f3edf7; box-shadow: 0 6px 16px #2d183c1a, 0 16px 38px #2d183c30; pointer-events: none; }
.audit-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; }
.audit-summary-dock.is-zoomed .audit-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.audit-summary-card { position: relative; isolation: isolate; min-width: 0; padding: .6rem .75rem; overflow: hidden; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); text-align: center; }
.audit-summary-card > span:not(.visually-hidden) { position: relative; display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.audit-summary-card strong { position: relative; display: block; color: var(--ink); font-size: clamp(1rem,1.45vw,1.25rem); line-height: 1.5; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.audit-summary-card small { margin-inline-start: .2rem; font-size: .8rem; font-weight: 500; }
.audit-summary-card.is-attention { border-color: #cdb6db; }
.audit-summary-card.is-attention strong { color: var(--brand); }
.audit-summary-card.is-attention::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg,#e3c6f4,#f5eafa 55%,#e3c6f4); box-shadow: inset 0 0 18px #a86fc340; opacity: .55; }
/* 사용자가 요청한 반복 점등: 숫자 대신 배경 빛만 페이드합니다. */
@media (prefers-reduced-motion: no-preference) {
  .audit-summary-card.is-attention::before { animation: audit-summary-glow 4.8s ease-in-out infinite; }
}
@keyframes audit-summary-glow { 0%,100% { opacity: .1; } 50% { opacity: .85; } }
@media screen and (max-width: 991.98px) {
  .audit-main.has-audit-summary { padding-bottom: calc(var(--mobile-nav-height) + var(--audit-summary-height,9rem) + 2rem); }
  .audit-summary-dock { left: 1.5rem; right: 1.5rem; bottom: calc(var(--mobile-nav-height) + .65rem); }
}
@media screen and (max-width: 767.98px) {
  .audit-summary-dock { left: .75rem; right: .75rem; padding: .35rem; }
  .audit-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem; }
  .audit-summary-card { padding: .35rem .5rem; }
  .audit-summary-card > span:not(.visually-hidden) { font-size: .75rem; }
  .audit-summary-card strong { font-size: 1rem; margin-top: .05rem; }
}
@media print { .audit-summary-dock { display: none; } .audit-main.has-audit-summary { padding-bottom: 0; } }
.audit-filter, .audit-row-actions, .audit-form-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.audit-filter { margin: 1.25rem 0; }
.audit-month-controls { display: contents; }
.audit-filter-desktop { display: none; }
.audit-normal-text { color: var(--success); }
/* 데스크톱은 조회 기간과 필터를 나란히 두고, 모바일은 기존 위치를 유지합니다. */
@media (min-width: 992px) {
  .audit-month-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; min-width: 0; }
  .audit-filter-desktop { display: flex; margin: 0; }
  .audit-filter-desktop .btn { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .audit-filter-mobile { display: none; }
}
.audit-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .6rem; }
.audit-day { display: flex; flex-direction: column; gap: .25rem; padding: .85rem .7rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--ink); min-width: 0; }
.audit-day span { font-size: .875rem; }
.audit-day small { font-weight: 400; color: var(--muted); }
.audit-day .audit-day-weekday.is-saturday { color: #3c68ad; }
.audit-day .audit-day-weekday.is-sunday { color: #b84554; }
.audit-day.needs-review { background: #fffbfa; }
.audit-day.is-selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.audit-gap-text { color: #b22d41; }
.audit-overlap-text { color: #885313; }
.audit-outside-text { color: #a02b61; }
.audit-day-overview > :last-child { margin-bottom: 0; }
.audit-record-outside { display: none; }
.audit-summary-card > .audit-summary-outside { color: #a02b61; font-size: .75rem; margin-top: .1rem; overflow-wrap: anywhere; }
.audit-scale { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
.audit-timeline { position: relative; height: 1.1rem; background: #ece9ee; margin: .5rem 0; border-radius: .25rem; overflow: hidden; }
.audit-segment { position: absolute; top: 0; bottom: 0; }
.audit-segment.covered { background: #9160ab; }
.audit-segment.gap { background: #db6476; }
.audit-segment.overlap { background: #d69a42; }
.audit-segment.outside { background: #b65b88; }
.audit-segment.closed { background: repeating-linear-gradient(135deg,#e2dfe5 0 4px,#f3f1f5 4px 8px); }
.audit-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .875rem; margin: .75rem 0 1.25rem; }
.audit-issues { display: grid; gap: .65rem; }
.audit-issue { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-left: 3px solid #d69a42; border-radius: .5rem; }
.audit-issue.gap { border-left-color: #db6476; }
.audit-issue.outside { border-left-color: #b65b88; }
.audit-issue > div { min-width: 0; overflow-wrap: anywhere; }
.audit-issue strong, .audit-issue span { display: block; }
.audit-issue span { font-size: .875rem; color: var(--muted); margin-top: .15rem; }
.audit-row-actions .audit-person-edit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.audit-issue .audit-person-edit > span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.audit-person-edit .audit-edit-name { min-width: 0; }
.audit-person-edit .audit-edit-label { flex: none; padding-inline-start: .5rem; border-inline-start: 2px solid #a995b7; }
.audit-record-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.audit-record-table th, .audit-record-table td { padding: 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.audit-record-table th { color: var(--muted); font-size: .875rem; background: #fcfbfd; }
.audit-record-table tbody tr:last-child td { border-bottom: 0; }
.audit-record-person > strong { font-size: 1.125rem; line-height: 1.4; }
.audit-record-time { display: inline-flex; flex-direction: column; gap: .15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-record-date { font-size: .875rem; color: var(--muted); }
.audit-record-time strong { font-weight: 600; }
.audit-record-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.audit-record-cancelled { background: #faf9fc; color: var(--muted); }
.audit-record-actions form { margin: 0; }
.audit-record-duration-mobile { display: none; }
.admin-schedule > summary { cursor: pointer; list-style: none; }
.admin-schedule > summary::-webkit-details-marker { display: none; }
.admin-schedule > summary::after { content: '+'; font-size: 1.4rem; color: var(--brand); }
.admin-schedule[open] > summary::after { content: '−'; }
.admin-schedule > summary > span:first-child { flex: 1; }
.admin-schedule > summary strong { font-size: 1.1rem; }
.schedule-week { display: grid; gap: .75rem; margin-top: 1.25rem; }
.schedule-day { display: grid; grid-template-columns: 6rem minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: .65rem; padding: 1rem; }
.schedule-day fieldset { min-width: 0; }
.schedule-day legend { float: none; font-size: .875rem; width: auto; margin-bottom: .4rem; }
.schedule-enable { display: inline-flex; gap: .6rem; align-items: center; cursor: pointer; }
.schedule-enable .form-check-input { margin: 0; flex-shrink: 0; }
.payslip-page { max-width: 850px; }
.payslip-page [hidden] { display: none !important; }
.payslip-window { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; color: var(--muted); font-size: .875rem; }
.payslip-window > span { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.payslip-window small { font-size: .875rem; }
.payslip-paper { background: white; border: 1px solid var(--line); border-top: 4px solid #acd12e; border-radius: 1rem; padding: 2.5rem; box-shadow: 0 8px 30px #32233e08; }
.payslip-download-row { display: none; justify-content: flex-end; margin-top: 1rem; }
.payslip-paper-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.payslip-period { margin: 0 0 .3rem; color: var(--brand); font-weight: 600; }
.payslip-paper h2 { font-size: 1.9rem; margin: 0; font-weight: 750; letter-spacing: -.04em; }
.payslip-logo { width: 85px; height: auto; flex-shrink: 0; }
.payslip-company { color: var(--muted); margin: .7rem 0 0; overflow-wrap: anywhere; }
.payslip-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; margin: 1.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.payslip-meta dt { color: var(--muted); font-size: .875rem; font-weight: 400; margin-bottom: .35rem; }
.payslip-meta dd { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.payslip-full { grid-column: 1 / -1; }
.payslip-net { padding: 1.5rem; border-radius: .8rem; background: #f4edf8; color: #702b91; }
.payslip-net > span { font-size: .9375rem; font-weight: 600; }
.payslip-net > strong { display: block; margin-top: .35rem; font-size: clamp(2rem,5vw,3rem); font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.payslip-net small { font-size: 1.05rem; font-weight: 600; margin-left: .4rem; }
.payslip-section { padding-top: 1.6rem; }
.payslip-section + .payslip-section { border-top: 1px solid var(--line); margin-top: 1.3rem; }
.payslip-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.payslip-amounts { margin: 0; display: grid; gap: 1rem; }
.payslip-amounts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; }
.payslip-amounts dt { font-weight: 400; }
.payslip-amounts dd { margin: 0 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.payslip-formula { margin-top: 1rem; }
.payslip-formula > span { color: var(--muted); font-size: .875rem; }
.payslip-formula p { margin: .35rem 0 0; }
.payslip-footnote { color: var(--muted); font-size: .875rem; line-height: 1.7; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.payslip-retry { display: flex; flex-wrap: wrap; gap: .6rem; }
/* 모바일 관리자 명세서의 정산 수정은 제목 위쪽 오른쪽에 둡니다. */
@media (max-width: 991.98px) {
  .app-main .payslip-page-admin .payslip-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mobile-heading-label-gap, .5rem) .75rem; }
  .payslip-page-admin .payslip-heading-copy, .payslip-page-admin .payslip-actions { display: contents !important; }
  .payslip-page-admin .payslip-heading .eyebrow { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
  .payslip-page-admin .payslip-heading h1 { grid-column: 1 / -1; grid-row: 2; }
  .payslip-page-admin #payslip-intro { grid-column: 1 / -1; grid-row: 3; }
  .payslip-page-admin .payslip-settlement-edit { grid-column: 2; grid-row: 1; justify-self: end; min-height: 2.25rem; padding: .4rem .7rem; font-size: .8125rem; white-space: nowrap; }
  .payslip-page-admin .payslip-back-link { display: none; }
  .payslip-page-admin .payslip-download-desktop { grid-column: 1 / -1; justify-self: end; }
}
/* 모바일 급여명세서에서 내용 없는 상태 안내를 숨깁니다. */
@media (max-width: 767.98px) {
  .payslip-page-worker #payslip-status:empty { display: none; }
}
@media (max-width: 575.98px) {
  .payslip-paper { padding: 1.35rem; border-radius: .85rem; }
  .payslip-page-admin .page-heading { gap: 1rem; }
  .payslip-page .payslip-actions { width: 100%; }
  .payslip-page-worker #payslip-intro, .payslip-page .payslip-download-desktop { display: none; }
  .payslip-page-worker .payslip-actions { display: none !important; }
  .payslip-download-row { display: flex; }
  .payslip-download-row .btn { width: 100%; justify-content: center; }
  .payslip-paper h2 { font-size: 1.6rem; }
  .payslip-logo { width: 65px; }
  .payslip-net { padding: 1.1rem; }
  .payslip-net > strong { font-size: clamp(1.8rem,8vw,2.6rem); }
}
@media (max-width: 575.98px) { .admin-schedule .schedule-day { grid-template-columns: 1fr; } }
.audit-flag { display: block; color: #9b4d24; font-size: .875rem; }
.audit-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.audit-form-grid fieldset { min-width: 0; }
.audit-form-grid legend { float: none; width: auto; }
.audit-time-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
.audit-form-actions { margin-top: 1.25rem; }
/* 근무 점검은 화면 크기와 관계없이 버튼 옆에서 입력·검토를 이어갑니다. */
  .audit-editor-enabled #audit-form:not(.is-open) { display: none; }
  .audit-editor-popover.is-open { position: fixed; z-index: 1070; display: flex; flex-direction: column; margin: 0; min-width: 0; max-width: calc(100vw - 32px); border: 1px solid #cdb6db; border-radius: 16px; background: var(--surface); box-shadow: 0 8px 20px #30213918, 0 24px 64px #30213926; opacity: 0; transition: opacity 150ms ease-out; }
  .audit-editor-popover.is-visible { opacity: 1; }
  .audit-editor-popover > .panel-heading { flex: none; flex-wrap: wrap; gap: 8px 12px; padding: 16px 20px; border-radius: 16px 16px 0 0; background: var(--surface); }
  .audit-editor-popover > .panel-heading > div { flex: 1; min-width: 0; }
  .audit-editor-popover .panel-heading h2 { font-size: 17px; }
  .audit-editor-popover .audit-editor-intro { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  .audit-editor-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #f5f3f7; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
  .audit-editor-close[hidden] { display: none; }
  .audit-editor-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .audit-editor-popover > .panel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; border-radius: 0 0 16px 16px; scrollbar-width: thin; }
  .audit-editor-popover .audit-original { margin-bottom: 16px; padding: 10px 12px; font-size: 12px; line-height: 1.65; }
  .audit-editor-popover .audit-original strong { font-size: 13px; }
  .audit-editor-popover .audit-form-grid { gap: 12px 16px; }
  .audit-editor-popover .form-label { margin-bottom: 5px; font-size: 13px; }
  .audit-editor-popover .form-control, .audit-editor-popover .form-select { min-width: 0; min-height: 40px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; border-radius: 8px; }
  .audit-editor-popover .form-help { font-size: 12px; line-height: 1.55; margin-top: 6px; }
  .audit-editor-popover #audit-date-label { margin-top: 4px; }
  .audit-editor-popover #audit-substitute-field { margin-top: 12px !important; font-size: 13px; }
  .audit-editor-popover #audit-break-field { max-width: 220px; margin-top: 12px !important; margin-bottom: 8px; }
  .audit-editor-popover .audit-next-day-help { margin-top: 8px; }
  .audit-editor-popover #audit-estimate { padding: 10px 12px; border: 1px solid #e6daed; border-radius: 8px; background: var(--brand-soft); color: #543368; font-size: 13px; font-weight: 650; white-space: pre-line; }
  .audit-editor-popover .audit-form-actions { gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
  .audit-editor-popover .btn { min-height: 36px; padding: 7px 12px; font-size: 13px; border-radius: 8px; white-space: normal; }
  .audit-editor-enabled .audit-page .audit-row-actions .btn, .audit-editor-enabled .audit-page .audit-record-actions .btn { min-height: 36px; padding: 7px 12px; }
  .audit-editor-enabled .audit-page a[aria-controls="audit-form"][aria-expanded="true"] { background: var(--brand-soft); border-color: #b791cc; color: var(--brand); }
  .audit-editor-popover .audit-editor-arrow { position: absolute; left: calc(var(--audit-editor-arrow, 32px) - 12px); top: -12px; width: 24px; height: 12px; overflow: visible; pointer-events: none; }
  .audit-editor-arrow path { fill: var(--surface); stroke: #cdb6db; stroke-width: 1; stroke-linejoin: round; }
  .audit-editor-arrow .audit-editor-arrow-join { fill: var(--surface); stroke: none; }
  .audit-editor-popover.is-above .audit-editor-arrow { top: auto; bottom: -12px; transform: rotate(180deg); }
  .audit-editor-popover.is-left .audit-editor-arrow { top: calc(var(--audit-editor-arrow-top, 32px) - 6px); bottom: auto; left: auto; right: -18px; transform: rotate(90deg); }
  .audit-editor-popover.is-right .audit-editor-arrow { top: calc(var(--audit-editor-arrow-top, 32px) - 6px); bottom: auto; left: -18px; right: auto; transform: rotate(-90deg); }
  .audit-editor-popover.is-detached .audit-editor-arrow { display: none; }
  .audit-editor-popover .audit-editor-loading, .audit-editor-popover .audit-editor-load-error { flex-basis: 100%; margin: 0; font-size: 13px; }
  .audit-editor-popover .audit-editor-load-error { color: var(--danger); }
  .audit-editor-popover.has-load-error > .panel-body { display: none; }
  .audit-editor-popover[aria-busy="true"] > .panel-body { opacity: .35; }
  .audit-editor-popover #audit-edit-form.is-reviewing > :not(.audit-form-actions):not(#audit-preview-feedback) { display: none; }
  .audit-editor-popover #audit-edit-form.is-reviewing > .audit-form-actions { display: block; border: 0; padding-top: 0; margin-top: 0; }
  .audit-editor-popover .is-reviewing .audit-form-actions > a, .audit-editor-popover .is-reviewing .audit-form-actions > button, .audit-editor-popover .is-reviewing #audit-preview-trigger { display: none; }
  .audit-editor-popover .is-reviewing .audit-review-anchor { width: 100%; }
  .audit-editor-popover .audit-review-anchor::before, .audit-editor-popover .audit-review-anchor::after { display: none !important; }
  .audit-editor-popover .audit-review.is-inline-review { position: static; width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .audit-editor-popover .audit-review-heading h3 { font-size: 15px; }
  .audit-editor-popover .audit-review-close { width: auto; height: auto; min-height: 32px; padding: 5px 10px; border: 1px solid var(--line); font-size: 12px; font-weight: 650; }
  .audit-editor-popover .audit-review p { font-size: 13px; line-height: 1.7; }
  .audit-editor-popover .audit-review #audit-save { margin-top: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    .audit-editor-popover { transform: translateY(4px); transition: opacity 150ms ease-out, transform 150ms cubic-bezier(0.2, 0, 0, 1); }
    .audit-editor-popover.is-visible { transform: translateY(0); }
    .audit-editor-popover .btn:not(:disabled):active, .audit-editor-close:active { scale: .96; transition: scale 150ms ease-out; }
  }
@media (max-width: 991.98px) {
  .audit-page .audit-issue .audit-row-actions .audit-person-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; min-width: 0; padding-inline: 0; }
  .audit-person-edit .audit-edit-name { padding-inline: .25rem; text-align: center; }
  .audit-person-edit .audit-edit-label { padding-inline: .65rem; white-space: nowrap; text-align: center; }
  .audit-editor-popover > .panel-heading, .audit-editor-popover > .panel-body { padding: 14px; }
  .audit-editor-popover > .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .audit-editor-popover > .panel-heading > div { grid-column: 1; grid-row: 1; }
  .audit-editor-popover .audit-editor-close { grid-column: 2; grid-row: 1; }
  .audit-editor-popover .audit-editor-intro { display: none; }
  .audit-editor-popover .audit-editor-loading, .audit-editor-popover .audit-editor-load-error { grid-column: 1 / -1; }
  .audit-editor-popover .panel-heading h2 { font-size: 1.0625rem; }
  .audit-editor-popover .audit-editor-intro, .audit-editor-popover .form-help, .audit-editor-popover .audit-original { font-size: .8125rem; }
  .audit-editor-popover .audit-form-grid { grid-template-columns: 1fr; gap: 12px; }
  .audit-editor-popover .form-label { font-size: .875rem; }
  .audit-editor-popover .form-control, .audit-editor-popover .form-select { min-height: 44px; font-size: max(1rem, 16px); }
  .audit-editor-popover .app-picker-trigger { height: auto; }
  .audit-editor-popover .btn { min-height: 44px; font-size: .875rem; }
  .audit-editor-popover .audit-editor-close { width: 44px; height: 44px; }
  .audit-editor-popover #audit-break-field { max-width: none; }
  .audit-editor-popover .audit-original strong, .audit-editor-popover #audit-estimate, .audit-editor-popover .audit-review p { font-size: .875rem; }
  .audit-editor-popover .audit-review-heading h3 { font-size: 1rem; }
  .audit-editor-popover .audit-review-close { min-height: 44px; font-size: .875rem; }
}
.audit-preview-feedback[hidden] { display: none; }
.audit-review-anchor { position: relative; overflow-anchor: none; }
.audit-review { position: absolute; z-index: 30; bottom: calc(100% + .85rem); left: 0; width: min(30rem, calc(100vw - 1.5rem)); max-height: min(70vh, 34rem); overflow-y: auto; padding: 1rem; background: #fff; border: 1px solid #ddcce7; border-radius: .85rem; box-shadow: 0 14px 38px #30213930; }
.audit-review[hidden] { display: none; }
.audit-review-anchor.has-open-review::before, .audit-review-anchor.has-open-review::after { content: ''; position: absolute; z-index: 31; width: 0; height: 0; pointer-events: none; }
.audit-review-anchor.has-open-review::before { left: calc(var(--audit-arrow-center, 1.35rem) - 9px); top: calc(-.85rem - 1px); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #ddcce7; }
.audit-review-anchor.has-open-review::after { left: calc(var(--audit-arrow-center, 1.35rem) - 8px); top: calc(-.85rem - 1px); border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; }
.audit-review.is-below { top: calc(100% + .85rem); bottom: auto; }
.audit-review-anchor.has-open-review.is-below::before { top: calc(100% + .85rem - 8px); border-top: 0; border-bottom: 9px solid #ddcce7; }
.audit-review-anchor.has-open-review.is-below::after { top: calc(100% + .85rem - 7px); border-top: 0; border-bottom: 8px solid #fff; }
/* 위치 계산 후에는 버튼을 감싼 칸의 너비에 영향을 받지 않습니다. */
.audit-review.is-positioned { position: fixed; z-index: 1060; top: 0; left: 0; bottom: auto; max-width: none; min-width: 0; overscroll-behavior: contain; }
.audit-page .audit-review [id] { scroll-margin-block: .5rem; }
.audit-review-anchor.has-positioned-review::before, .audit-review-anchor.has-positioned-review::after { position: fixed; z-index: 1061; left: calc(var(--audit-arrow-left) - 9px); top: var(--audit-arrow-top); }
.audit-review-anchor.has-positioned-review::after { left: calc(var(--audit-arrow-left) - 8px); }
.audit-review-anchor.has-positioned-review.is-below::before, .audit-review-anchor.has-positioned-review.is-below::after { top: var(--audit-arrow-top); }
.audit-review-anchor.has-positioned-review.is-below::after { top: calc(var(--audit-arrow-top) + 1px); }
.audit-review-anchor.has-open-review.is-detached::before, .audit-review-anchor.has-open-review.is-detached::after { display: none; }
.audit-review-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.audit-review-heading h3 { margin: 0; font-size: 1rem; }
.audit-review-close { flex: none; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .45rem; background: #f5f1f7; color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.audit-review-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.audit-review p { margin: 0 0 .7rem; overflow-wrap: anywhere; }
.audit-review p:last-child { margin-bottom: 0; }
.audit-empty { padding: 1rem; text-align: center; color: var(--muted); margin: 0; }
@media (max-width: 1199px) { .audit-days { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width: 767.98px) {
  .audit-days { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .375rem; }
  .audit-day { gap: .25rem; padding: .65rem .5rem; }
  .audit-day > strong { font-size: .875rem; line-height: 1.45; }
  .audit-day span { font-size: .8125rem; line-height: 1.45; }
  .audit-day small { font-size: .75rem; }
  .audit-form-grid { grid-template-columns: 1fr; }
  .audit-issue { align-items: flex-start; flex-direction: column; }
  .audit-issue > .btn { width: 100%; }
  .audit-record-table { display: block; }
  .audit-record-table tbody { display: grid; gap: 10px; padding: 0 12px 12px; }
  .audit-record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .audit-record-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .audit-record-table tbody tr.audit-record-cancelled { background: #faf9fc; }
  .audit-record-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .audit-record-table td:first-child, .audit-record-table td:last-child, .audit-record-table .audit-record-duration { grid-column: 1 / -1; }
  .audit-record-table .audit-record-moment::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 2px; }
  /* 출퇴근 시각, 근무·휴게, 급여 시간을 10px 간격으로 구분합니다. */
  .audit-record-table .audit-record-username,
  .audit-record-table .audit-record-issues { display: none !important; }
  .audit-record-table .audit-record-outside { display: block; margin-top: .25rem; font-size: .8125rem; }
  .audit-record-table td:not(:first-child):not(:last-child) { font-size: .875rem; line-height: 1.5; }
  .audit-record-table .audit-record-time { gap: 3px; }
  .audit-record-table .audit-record-time strong { order: -1; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.5px; }
  .audit-record-table .audit-record-date { font-size: 12px; line-height: 1.5; }
  .audit-record-table .audit-record-duration { padding-top: 10px; border-top: 1px solid var(--line); }
  .audit-record-duration-desktop { display: none; }
  .audit-record-duration-mobile { display: grid; gap: 10px; }
  .audit-record-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 13px; }
  .audit-record-summary:empty { display: none; }
  .audit-record-summary strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
  .audit-record-pay { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 13px; }
  .audit-record-pay strong { font-size: 18px; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
  .audit-page .audit-record-table .audit-record-actions .btn { width: 100%; min-height: 44px; padding: 8px 10px; font-size: 14px; }
  .audit-record-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .schedule-day { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
  .schedule-day > .schedule-enable { grid-column: 1 / -1; }
  .audit-row-actions > .btn { flex: 1; }
  .audit-row-actions { width: 100%; }
}

.reminder-week .schedule-day { grid-template-columns: 6rem minmax(0, 24rem); }
@media (max-width: 575.98px) { .reminder-week .schedule-day { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 575.98px) {
  .worker-period-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .worker-period-form .form-select { width: 100%; }
  .worker-period-form > a.btn { grid-column: 1 / -1; }
  .worker-toolbar-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
  .worker-toolbar-actions > .btn { min-width: 0; width: 100%; }
}

/* Payroll settlement: stacked weekly cards keep all inputs usable on phones. */
.payroll-page { max-width: 1280px; }
.payroll-filter { align-items: end; flex-wrap: wrap; }
.payroll-filter > div:first-child { min-width: 220px; }
.payroll-page fieldset { min-width: 0; }
.payroll-weeks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.payroll-week { padding: 20px; border: 1px solid var(--border, #e8e3ed); border-radius: 16px; }
.payroll-week.has-holiday-hours { border-color: #ddd0e7; background: linear-gradient(110deg, #fbf8fd, #f2ecf6); }
.payroll-week-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.payroll-week-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.payroll-week-result { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.payroll-week-result .form-label { margin: 0; }
.payroll-week .form-check-label { display: block; line-height: 1.7; }
.payroll-week-total { margin-top: 16px; padding: 16px 0 0; }
.payroll-amount-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.payroll-holiday-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 8px; }
.payroll-holiday-heading h2 { margin: 0; }
.payroll-week input[readonly] { background: #f3eef7; color: #702b91; }
.payroll-manual-options { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 12px; }
.payroll-manual-options .form-check { margin-bottom: 0; }
.payroll-hours-box { padding: 18px; border: 1px solid #e4d7ee; border-radius: 14px; background: #faf7fc; }
.payroll-hours-input { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; margin: 16px 0; max-width: 520px; }
.payroll-hours-wage { display: flex; flex-direction: column; justify-content: center; }
.payroll-hours-wage strong { font-size: 1.15rem; }
.payroll-amount-fields input[readonly] { background: #f3eef7; color: #702b91; }
.payroll-amount-fields [data-hours-auto] { color: #702b91; }
.payroll-save-panel { padding: 24px; display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.payroll-save-panel strong { display: block; color: #702b91; font-size: 1.65rem; }
.payroll-history summary { padding: 20px; font-weight: 600; cursor: pointer; }
.payroll-history li { margin-bottom: 16px; }
.payroll-history p, .payslip-adjustment-note { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 767px) {
 .payroll-weeks { grid-template-columns: 1fr; }
 .payroll-amount-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .payroll-filter > div:first-child { width: 100%; }
 .payroll-week { padding: 16px; }
 .payroll-save-panel { align-items: stretch; flex-direction: column; padding: 20px; }
}

.journal-panel .panel-heading h2 { margin: .15rem 0 0; }
.journal-shift-time { color: var(--muted); font-size: .875rem; margin: 0 0 1.15rem; }
.journal-task-list { list-style: none; display: grid; gap: .7rem; margin: 0 0 1rem; padding: 0; }
.journal-task { display: flex; align-items: center; min-height: 4.25rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; overflow: hidden; }
.journal-task.is-done { background: #f4faf3; border-color: #d7ead4; padding: .85rem 1rem; gap: .85rem; }
.journal-check-form { width: 100%; margin: 0; }
.journal-check-button { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 4.25rem; padding: .85rem 1rem; border: 0; background: transparent; color: var(--ink); text-align: left; }
.journal-check-button:hover, .journal-check-button:focus-visible { background: var(--brand-soft); }
.journal-check-button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.journal-check-button strong, .journal-task-copy strong { font-size: .96rem; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.journal-check-empty, .journal-check-done { width: 1.5rem; height: 1.5rem; flex: none; border-radius: .45rem; }
.journal-check-empty { border: 2px solid #a39aaa; background: #fff; }
.journal-check-done { display: grid; place-items: center; color: #fff; background: #288046; }
.journal-task-copy { display: grid; gap: .2rem; min-width: 0; }
.journal-task-copy small { color: #41644b; font-size: .8rem; }
.journal-empty { padding: 1.5rem .5rem; }
.journal-note-form { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.journal-note-form .form-label { font-weight: 700; }
.journal-note-form textarea { width: 100%; resize: vertical; }
.journal-note-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; margin-top: .7rem; }
.journal-history-note { display: grid; gap: .2rem; margin: .7rem 0 0; padding: .75rem; border-radius: .65rem; background: #f7f4f9; font-size: .85rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.journal-history { margin-top: 1.25rem; }
.journal-history-item { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.journal-history-item:last-child { border-bottom: 0; }
.journal-history-item summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; }
.journal-history-item summary span:first-child { min-width: 0; overflow-wrap: anywhere; }
.journal-history-item summary span:last-child { flex: none; color: var(--muted); font-size: .82rem; }
.journal-history-item ul { list-style: none; padding: .8rem 0 0; margin: 0; }
.journal-history-item li { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; font-size: .875rem; }
.journal-history-item li small { flex: none; color: var(--muted); }
@media (max-width: 575.98px) {
  .worker-toolbar-actions > .btn { font-size: .78rem; white-space: normal; }
  .journal-history-item li { flex-direction: column; gap: .15rem; }
}

/* 관리자 근무일지 달력: 시간대별 행과 월~일 열 */
.journal-admin-page { max-width: 100rem; }
.journal-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1rem; margin-bottom: 1.5rem; }
.journal-settings-panel { min-width: 0; }
.journal-settings-panel .panel-heading { align-items: flex-start; flex-wrap: wrap; gap: .6rem; }
.journal-settings-panel .panel-body { min-width: 0; }
.journal-settings-editor { border: 1px solid var(--line); border-radius: .8rem; background: #fff; }
.journal-settings-editor-toggle { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; font-weight: 700; }
.journal-settings-editor-toggle::-webkit-details-marker { display: none; }
.journal-settings-editor-toggle::after { content: '⌄'; color: var(--brand); font-size: 1.25rem; line-height: 1; }
.journal-settings-editor[open] .journal-settings-editor-toggle { border-bottom: 1px solid var(--line); }
.journal-settings-editor[open] .journal-settings-editor-toggle::after { content: '⌃'; }
.journal-settings-editor-hint { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 400; }
.journal-settings-editor-body { padding: 1.1rem; }
.journal-sort-card { position: relative; }
.journal-sort-card.has-sort-grip { padding-left: 3.15rem !important; }
.journal-sort-grip { position: absolute; z-index: 1; inset: .55rem auto auto .45rem; width: 2.15rem; height: 2.15rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: .6rem; background: var(--brand-soft); color: var(--brand); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.journal-sort-grip:active { cursor: grabbing; }
.journal-sort-grip:disabled { opacity: .45; cursor: not-allowed; }
.journal-sort-grip .bi { font-size: 1.25rem; }
.journal-card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.journal-card-actions > form { margin: 0; }
.journal-inline-editor { min-width: 0; }
.journal-inline-editor > summary { list-style: none; cursor: pointer; }
.journal-inline-editor > summary::-webkit-details-marker { display: none; }
.journal-inline-editor[open] { flex-basis: 100%; width: 100%; }
.journal-inline-editor-body { margin-top: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--canvas); }
.journal-sort-card.is-pointer-dragging { z-index: 1200; pointer-events: none; opacity: .96; box-shadow: 0 1rem 2.5rem rgba(38, 35, 44, .2); cursor: grabbing; }
.journal-sort-placeholder { border: 2px dashed var(--brand); border-radius: var(--radius); background: var(--brand-soft); }
.journal-card-details { margin: .7rem 0 1rem; color: var(--ink); }
.journal-card-details summary { width: fit-content; cursor: pointer; color: var(--brand); font-size: .9rem; }
.journal-card-details li + li { margin-top: .25rem; }
.journal-settings-list { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (max-width: 959.98px) { .journal-settings-grid { grid-template-columns: minmax(0, 1fr); } }
.journal-calendar-panel { scroll-margin-top: calc(var(--header) + 1rem); }
.journal-calendar-toolbar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: .9rem; }
.journal-calendar-week-form { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0; }
.journal-calendar-week-form .form-label { white-space: nowrap; font-weight: 650; }
.journal-calendar-week-form .form-select { width: auto; min-width: 15rem; max-width: 23rem; }
.journal-calendar-query-label { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.journal-calendar-record-count-mobile { display: none; }
.journal-calendar-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .75rem; margin-bottom: .45rem; }
.journal-calendar-meta .journal-calendar-scroll-hint { margin: 0; }
.journal-calendar-record-count-desktop { margin-inline-start: auto; }
@media (max-width: 991.98px) {
  .journal-calendar-record-count-mobile { display: inline-flex; }
  .journal-calendar-record-count-desktop, .journal-calendar-meta.is-empty { display: none; }
}
.journal-calendar-week-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.journal-calendar-note { font-size: .875rem; color: var(--muted); margin: 0 0 .8rem; line-height: 1.6; }
.journal-calendar-scroll-hint { font-size: .8125rem; color: var(--muted); margin: 0 0 .45rem; }
.journal-calendar-scroll { max-width: 100%; max-height: min(72vh, 52rem); overflow: auto; border: 1px solid var(--line); border-radius: .85rem; background: #fff; overscroll-behavior: contain; }
.journal-calendar-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.journal-calendar-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 94rem; width: 100%; margin: 0; }
.journal-calendar-table th, .journal-calendar-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.journal-calendar-table tr > :last-child { border-right: 0; }
.journal-calendar-table tbody tr:last-child > * { border-bottom: 0; }
.journal-calendar-table thead th { position: sticky; top: 0; z-index: 3; height: 4.2rem; background: #f9f7fb; color: var(--ink); text-align: left; padding: .8rem .9rem; }
.journal-calendar-table .journal-calendar-slot-heading { width: 11rem; left: 0; z-index: 5; }
.journal-calendar-day-heading span { display: block; color: var(--muted); font-size: .8125rem; font-weight: 550; }
.journal-calendar-day-heading strong { display: block; margin-top: .15rem; font-size: 1.12rem; line-height: 1.2; }
.journal-calendar-day-heading.is-today { color: var(--brand); box-shadow: inset 0 -3px var(--brand); }
.journal-calendar-day-heading.is-saturday span, .journal-calendar-day-heading.is-saturday strong { color: #2364a4; }
.journal-calendar-day-heading.is-sunday span, .journal-calendar-day-heading.is-sunday strong { color: #c13b4b; }
.journal-calendar-table .journal-calendar-slot { position: sticky; left: 0; z-index: 2; width: 11rem; min-width: 11rem; padding: .95rem .85rem; text-align: left; background: #faf9fb; }
.journal-calendar-slot strong { display: block; font-size: .925rem; line-height: 1.4; overflow-wrap: anywhere; }
.journal-calendar-slot small { display: block; margin-top: .4rem; font-size: .77rem; font-weight: 450; color: var(--muted); }
.journal-calendar-slot .status-pill { margin-top: .55rem; font-size: .72rem; }
.journal-calendar-table td { padding: .55rem; background: #fff; }
.journal-calendar-table tbody tr:nth-child(even) td { background: #fdfcfe; }
.journal-calendar-cell { display: grid; align-content: start; gap: .45rem; min-height: 4.7rem; }
.journal-calendar-cell-empty { align-self: center; padding: .65rem .15rem; color: #a09aa6; font-size: .8rem; }
.journal-calendar-entry { min-width: 0; border: 1px solid #dcd0e6; border-left: 3px solid var(--brand); border-radius: .6rem; background: #fff; box-shadow: 0 2px 8px #32233e08; }
.journal-calendar-entry.is-archived { border-color: var(--line); border-left-color: #a39aaa; background: #fbfafc; }
.journal-calendar-entry-admin-auto { border-color: #d5e6d9; border-left-color: #529a67; background: #f8fbf8; }
.journal-calendar-auto { display: flex; align-items: flex-start; gap: .3rem; padding: .65rem .55rem; }
.journal-calendar-entry-trigger { display: flex; align-items: flex-start; gap: .3rem; width: 100%; border: 0; border-radius: .5rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: .65rem .55rem; }
.journal-calendar-entry-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.journal-calendar-entry-trigger::after { content: '↗'; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.journal-calendar-entry-person { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.journal-calendar-entry-person strong { font-size: .86rem; line-height: 1.3; overflow-wrap: anywhere; }
.journal-calendar-entry-person small { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.journal-calendar-note-dot { display: inline-block; width: .42rem; height: .42rem; margin-left: .28rem; border-radius: 50%; background: #d63b4b; vertical-align: .12rem; }
.journal-calendar-entry-state { flex: none; padding: .14rem .3rem; border-radius: 99px; background: #fff6e5; color: #875919; font-size: .68rem; font-weight: 700; line-height: 1.35; }
.journal-calendar-entry-state.is-deleted { background: #fceef0; color: var(--danger); }
.journal-calendar-progress { flex: none; padding: .13rem .35rem; border-radius: 99px; color: #6f6277; background: #f2eef5; font-size: .74rem; font-weight: 700; line-height: 1.35; font-variant-numeric: tabular-nums; }
.journal-calendar-progress.is-complete { color: #216439; background: #edf7ee; }
.journal-calendar-popover { position: fixed; z-index: 1080; width: min(26rem, calc(100vw - 1.5rem)); border: 1px solid #d8c6e5; border-radius: .85rem; background: #fff; box-shadow: 0 16px 40px #30213938; }
.journal-calendar-popover[hidden] { display: none; }
/* 꼬리를 한 줄로 그리고 바탕색을 본체 안까지 이어 연결선이 겹치지 않게 합니다. */
.journal-calendar-popover::before { content: ''; position: absolute; pointer-events: none; width: 18px; height: 11px; left: calc(var(--journal-popover-arrow-left, 24px) - 3px); top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11'%3E%3Crect x='.5' y='8' width='17' height='3' fill='%23fff'/%3E%3Cpath d='M.5 9L9 .5L17.5 9' fill='%23fff' stroke='%23d8c6e5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; }
.journal-calendar-popover::after { content: none; }
.journal-calendar-popover.is-above::before { top: auto; bottom: -9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='11' viewBox='0 0 18 11'%3E%3Crect x='.5' y='0' width='17' height='3' fill='%23fff'/%3E%3Cpath d='M.5 2L9 10.5L17.5 2' fill='%23fff' stroke='%23d8c6e5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.journal-calendar-popover:is(.is-right, .is-left)::before { width: 11px; height: 18px; top: calc(var(--journal-popover-arrow-top, 24px) - 9px); bottom: auto; }
.journal-calendar-popover.is-right::before { left: -9px; right: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18'%3E%3Crect x='8' y='.5' width='3' height='17' fill='%23fff'/%3E%3Cpath d='M9 .5L.5 9L9 17.5' fill='%23fff' stroke='%23d8c6e5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.journal-calendar-popover.is-left::before { left: auto; right: -9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18'%3E%3Crect x='0' y='.5' width='3' height='17' fill='%23fff'/%3E%3Cpath d='M2 .5L10.5 9L2 17.5' fill='%23fff' stroke='%23d8c6e5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.journal-calendar-popover:is(.is-left, .is-right):not([hidden]) { display: flex; flex-direction: column; }
.journal-calendar-popover:is(.is-left, .is-right) .journal-calendar-popover-heading { flex: none; }
.journal-calendar-popover:is(.is-left, .is-right) .journal-calendar-entry-detail { flex: 1; min-height: 0; max-height: none; }
.journal-calendar-popover-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border-bottom: 1px solid var(--line); }
.journal-calendar-popover-heading h3 { margin: 0; font-size: .95rem; font-weight: 750; }
.journal-calendar-popover-close { flex: none; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .5rem; background: #f5f1f7; color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.journal-calendar-popover-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.journal-calendar-entry-detail { max-height: min(60vh, 29rem); overflow-y: auto; margin: 0 .375rem .375rem; padding: .75rem calc(.9rem - .375rem) calc(.85rem - .375rem); }
.journal-calendar-entry-meta { margin: 0 0 .45rem; color: var(--muted); font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.journal-calendar-entry-meta .status-pill { padding: .08rem .3rem; font-size: .7rem; }
.journal-calendar-checks { list-style: none; margin: 0; padding: 0; }
.journal-calendar-checks li { padding: .4rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.journal-calendar-checks li:first-child { border-top: 0; }
.journal-calendar-checks li span, .journal-calendar-checks li small { display: block; font-size: .75rem; line-height: 1.45; }
.journal-calendar-checks li span .bi { color: var(--brand); }
.journal-calendar-checks li small { margin-top: .18rem; color: var(--muted); }
.journal-calendar-alert-heading { margin: .65rem 0 .25rem; font-size: .78rem; font-weight: 700; }
.journal-calendar-note-content { margin-top: .7rem; padding: .65rem .75rem; border-radius: .6rem; background: #f7f4f9; font-size: .8rem; }
.journal-calendar-note-content p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .journal-calendar-week-form { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
  .journal-calendar-query-label { grid-column: 1 / -1; }
  .journal-calendar-week-form .form-select { width: 100%; min-width: 0; max-width: none; }
  .journal-calendar-week-nav { width: 100%; }
  .journal-calendar-week-nav .btn { flex: 1; }
  .journal-calendar-table { min-width: 82rem; }
  .journal-calendar-table .journal-calendar-slot-heading, .journal-calendar-table .journal-calendar-slot { width: 8rem; min-width: 8rem; }
  .journal-calendar-table td { padding: .45rem; }
  .journal-calendar-scroll { max-height: none; }
}

/* 작은 화면에서도 일주일 전체를 가로로 확인합니다. */
.journal-calendar-viewport { position: relative; min-width: 0; }
.journal-calendar-maximize { display: none; position: absolute; right: .5rem; bottom: .5rem; z-index: 6; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid #cfc4d8b3; border-radius: .75rem; background: #ffffffb8; color: var(--brand); box-shadow: 0 3px 12px #30213926; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; touch-action: manipulation; }
.journal-calendar-maximize .bi { font-size: 1.05rem; }
.journal-calendar-maximize:active { background: #f1e8f8e6; }
.journal-calendar-maximize:focus-visible, .journal-fullscreen-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 991.98px) { .journal-calendar-maximize { display: flex; } }
.journal-fullscreen { position: fixed; inset: 0; z-index: 1300; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--canvas); overscroll-behavior: none; }
.journal-fullscreen[hidden] { display: none; }
.journal-fullscreen::backdrop { background: var(--canvas); }
.journal-fullscreen-stage { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; gap: .35rem; width: var(--journal-stage-width, 100%); height: var(--journal-stage-height, 100%); padding: .35rem .5rem .5rem; padding-left: max(.5rem, env(safe-area-inset-left)); padding-right: max(.5rem, env(safe-area-inset-right)); padding-top: max(.35rem, env(safe-area-inset-top)); padding-bottom: max(.5rem, env(safe-area-inset-bottom)); transform: translate(-50%, -50%); background: var(--canvas); }
.journal-fullscreen-stage.is-rotated { transform: translate(-50%, -50%) rotate(90deg); padding: .35rem .5rem .5rem; padding-left: max(.5rem, env(safe-area-inset-top)); padding-right: max(.5rem, env(safe-area-inset-bottom)); }
.journal-fullscreen-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; }
.journal-fullscreen-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; min-width: 0; }
.journal-fullscreen-heading h2 { margin: 0; font-size: .95rem; font-weight: 750; }
.journal-fullscreen-heading span { color: var(--muted); font-size: .75rem; }
.journal-fullscreen-close { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: .65rem; background: #fff; color: var(--brand); cursor: pointer; touch-action: manipulation; }
.journal-fullscreen-close:active { background: var(--brand-soft); }
.journal-fullscreen-content { display: flex; flex: 1; min-height: 0; min-width: 0; }
.journal-fullscreen .journal-calendar-scroll { flex: 1; min-height: 0; max-height: none; border-radius: .6rem; }
.journal-fullscreen .journal-calendar-table { min-width: 0; width: 100%; height: 100%; }
.journal-fullscreen .journal-calendar-table .journal-calendar-slot-heading, .journal-fullscreen .journal-calendar-table .journal-calendar-slot { width: 12%; min-width: 0; }
.journal-fullscreen .journal-calendar-table thead th { height: auto; padding: .3rem .35rem; font-size: .75rem; }
.journal-fullscreen .journal-calendar-day-heading span { font-size: .675rem; }
.journal-fullscreen .journal-calendar-day-heading strong { margin-top: .1rem; font-size: .85rem; }
.journal-fullscreen .journal-calendar-table .journal-calendar-slot { padding: .4rem .35rem; }
.journal-fullscreen .journal-calendar-slot strong { font-size: .75rem; }
.journal-fullscreen .journal-calendar-slot small { margin-top: .2rem; font-size: .625rem; }
.journal-fullscreen .journal-calendar-slot .status-pill { margin-top: .2rem; font-size: .625rem; padding: .1rem .2rem; }
.journal-fullscreen .journal-calendar-table td { padding: .25rem; }
.journal-fullscreen .journal-calendar-cell { min-height: 44px; gap: .25rem; }
.journal-fullscreen .journal-calendar-cell-empty { padding: .6rem .1rem; font-size: .675rem; }
.journal-fullscreen .journal-calendar-entry { border-radius: .4rem; border-left-width: 2px; }
.journal-fullscreen .journal-calendar-entry-trigger, .journal-fullscreen .journal-calendar-auto { min-height: 44px; padding: .375rem .25rem; gap: .2rem; flex-wrap: wrap; }
.journal-fullscreen .journal-calendar-entry-trigger::after { display: none; }
.journal-fullscreen .journal-calendar-entry-person strong { font-size: .75rem; }
.journal-fullscreen .journal-calendar-entry-person small { font-size: .625rem; }
.journal-fullscreen .journal-calendar-progress, .journal-fullscreen .journal-calendar-entry-state { padding: .1rem .2rem; font-size: .625rem; }
.journal-fullscreen-stage .journal-calendar-popover { position: absolute; display: flex; flex-direction: column; width: min(26rem, calc(var(--journal-stage-width) - 24px)); }
.journal-fullscreen-stage .journal-calendar-popover[hidden] { display: none; }
.journal-fullscreen-stage .journal-calendar-popover-heading { flex: none; padding: .4rem .75rem; }
.journal-fullscreen-stage .journal-calendar-popover-close { width: 44px; height: 44px; }
.journal-fullscreen-stage .journal-calendar-entry-detail { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
@media print { .journal-calendar-maximize, .journal-fullscreen { display: none !important; } }

/* 모든 모바일 탭의 상단 간격을 한곳에서 관리합니다. */
@media screen and (max-width: 991.98px) {
  :root {
    --mobile-page-top-gap: .75rem;
    --mobile-heading-label-height: 2rem;
    --mobile-heading-label-gap: .375rem;
    --mobile-heading-title-gap: .25rem;
    --mobile-heading-content-gap: .75rem;
  }
  .app-main, .app-main.board-main, .app-main.worker-payslip-main, .app-main.employee-attendance-page {
    padding-top: calc(var(--header) + var(--mobile-page-top-gap));
  }
  .app-main .page-heading, .app-main .board-heading {
    align-items: flex-start;
    gap: var(--mobile-heading-label-gap) .75rem;
    margin: 0 0 var(--mobile-heading-content-gap);
  }
  .app-main .page-heading .eyebrow, .app-main .board-heading .eyebrow {
    display: flex;
    align-items: center;
    min-height: var(--mobile-heading-label-height);
    margin: 0 0 var(--mobile-heading-label-gap);
    line-height: 1.4;
  }
  .app-main .page-heading h1, .app-main .board-heading h1 {
    margin: 0 0 var(--mobile-heading-title-gap);
    line-height: 1.3;
  }
  .app-main .page-heading p, .app-main .board-heading p { margin: 0; line-height: 1.45; }
  .app-main .page-heading .page-date { line-height: 1.4; }
  .app-main .page-heading.page-heading-mobile-actions { gap: var(--mobile-heading-label-gap) .75rem; }
  .app-main .page-heading-mobile-actions .eyebrow { margin: 0; }
  .app-main .page-heading-mobile-actions .btn.page-heading-action,
  .app-main .page-heading-mobile-actions .page-heading-action > .btn {
    min-height: var(--mobile-heading-label-height);
    padding: .3rem .65rem;
  }
  .app-main .payslip-window { gap: .25rem; margin-bottom: var(--mobile-heading-content-gap); line-height: 1.45; }
  .app-main .board-context { margin: 0 0 var(--mobile-heading-content-gap); line-height: 1.45; }
}
@media screen and (max-width: 575.98px) {
  .app-main.employee-attendance-page .page-heading h1,
  .app-main .payslip-page-worker .page-heading h1 { margin-bottom: 0; }
}

/* 근무자 모바일 화면은 글자의 역할별 크기와 카드 여백을 통일합니다. */
@media screen and (max-width: 991.98px) {
  .worker-main {
    --worker-title-size: 1.6rem;
    --worker-label-size: .8125rem;
    --worker-copy-size: .875rem;
    --worker-card-title-size: 1rem;
  }
  .worker-main .page-heading h1, .worker-main .board-heading h1 {
    font-size: var(--worker-title-size);
    font-weight: 750;
    letter-spacing: -.045em;
  }
  .worker-main .page-heading .eyebrow, .worker-main .board-heading .eyebrow {
    font-size: var(--worker-label-size);
    font-weight: 700;
    letter-spacing: .035em;
  }
  .worker-main .page-heading p, .worker-main .board-heading p,
  .worker-main .form-help, .worker-main .board-context,
  .worker-main .payslip-window, .worker-main .payslip-window small {
    font-size: var(--worker-copy-size);
    line-height: 1.45;
  }
  .worker-main .page-heading .page-date { font-size: var(--worker-label-size); }
  .worker-main .panel-body { padding: 1rem; }
  .worker-main .panel-heading { padding: .85rem 1rem; gap: .75rem; }
  .worker-main .panel-heading h2, .worker-main .board-list-copy h2 {
    font-size: var(--worker-card-title-size);
    font-weight: 700;
    line-height: 1.45;
  }
  .worker-main .panel-heading .eyebrow { font-size: var(--worker-label-size); margin-bottom: .25rem; }
  .worker-main .journal-panel .panel-heading h2 { margin: 0; }
  .worker-main .form-label, .worker-main .worker-duration-grid .form-label,
  .worker-main .btn, .worker-main .board-list-copy p {
    font-size: var(--worker-copy-size);
  }
  .worker-main .status-pill, .worker-main .board-list-copy time { font-size: var(--worker-label-size); }
  .worker-main .journal-check-button strong, .worker-main .journal-task-copy strong { font-size: 1rem; }
  .worker-main .board-list-item { padding: 1rem; gap: .75rem; }
}

/* 조회용 모바일 명세서는 항목 간 여백을 줄이고 글자 크기는 유지합니다. */
@media screen and (max-width: 991.98px) {
  .app-main .payslip-page .payslip-paper { padding: 1rem; }
  .app-main .payslip-page .payslip-period { margin-bottom: .2rem; }
  .app-main .payslip-page .payslip-company { margin-top: .4rem; }
  .app-main .payslip-page .payslip-meta { gap: .75rem 1rem; margin: 1rem 0; padding-top: .75rem; }
  .app-main .payslip-page .payslip-meta dt { margin-bottom: .2rem; }
  .app-main .payslip-page .payslip-net { padding: .75rem 1rem; }
  .app-main .payslip-page .payslip-net > strong { margin-top: .2rem; }
  .app-main .payslip-page .payslip-section { padding-top: 1rem; }
  .app-main .payslip-page .payslip-section + .payslip-section { margin-top: .75rem; }
  .app-main .payslip-page .payslip-section h3 { margin-bottom: .5rem; }
  .app-main .payslip-page .payslip-amounts { gap: .5rem; }
  .app-main .payslip-page .payslip-formula { margin-top: .625rem; }
  .app-main .payslip-page .payslip-formula p { margin-top: .2rem; }
  .app-main .payslip-page .payslip-footnote { margin-top: 1rem; padding-top: .75rem; }
  .app-main .payslip-page .payslip-download-row { margin-top: .75rem; }
}

/* 모바일 스킬 시범 적용: 출근등록의 입력 경계와 터치 반응을 보완합니다. */
.employee-attendance-page .form-select,
.employee-attendance-page .form-control { border-color: #8c8298; }
.employee-attendance-page .btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.employee-attendance-page .help-panel summary {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.employee-attendance-page .help-panel summary:active { color: var(--brand); }

/* 터치 입력칸은 16px 이상으로 표시해 작은 글씨로 인한 확대를 예방합니다. */
@media (pointer: coarse) {
  .employee-attendance-page .worker-duration-grid .form-select { font-size: max(1rem, 16px); }
}

/* 터치 후 마우스용 호버 색이 남지 않게 하고, 누르는 동안에는 반응을 유지합니다. */
@media (hover: none) {
  .employee-attendance-page .btn-primary:hover:not(:active) {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
  }
  .employee-attendance-page .btn-outline-primary:hover:not(:active) {
    background-color: white;
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .employee-attendance-page .btn { transition-property: background-color, border-color, color, scale; }
  .employee-attendance-page .btn:not(:disabled):not(.disabled):active { scale: .96; }
}

/* 근무 상세의 관련 급여 버튼을 모으고 시각의 숫자가 나뉘지 않게 합니다. */
.worker-detail-payroll-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.worker-detail-payroll-actions .payslip-publication-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 1px 62px; min-width: 176px; padding: 8px 0; gap: 0; }
.payslip-publication-trigger-title { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; white-space: nowrap; }
.payslip-publication-trigger-title .bi { flex: none; font-size: 16px; }
.payslip-publication-trigger-divider { width: 1px; height: 20px; background: color-mix(in srgb, currentColor 35%, transparent); }
.payslip-publication-trigger-status { display: flex; align-items: center; justify-content: center; min-width: 0; }
.payslip-publication-trigger-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 6px; border-radius: 7px; background: var(--brand-soft); color: var(--brand); font-size: .8125rem; line-height: 1.4; white-space: nowrap; }
.payslip-publication-trigger[data-delivery-state="off"] .payslip-publication-trigger-badge,
.payslip-publication-trigger[data-delivery-state="unknown"] .payslip-publication-trigger-badge { background: var(--canvas); color: var(--muted); }
.payslip-publication-trigger[data-delivery-state="unknown"] .payslip-publication-trigger-badge { padding-inline: 2px; font-size: .7rem; }
.worker-detail-time { display: inline-block; min-width: 5ch; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.worker-detail-next-day { white-space: nowrap; }
.worker-detail-date { display: inline-flex; align-items: center; white-space: nowrap; }
.worker-detail-substitute { margin-inline-start: .375rem; padding: .12rem .35rem; font-size: .7rem; line-height: 1.4; }
.worker-profile-editor { position: fixed; z-index: 1080; display: flex; flex-direction: column; width: min(380px, calc(100% - 24px)); border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); box-shadow: 0 8px 20px #30213918, 0 24px 64px #30213926; }
.worker-profile-editor[hidden] { display: none !important; }
.worker-profile-arrow { position: absolute; left: var(--profile-arrow-left, 24px); top: -11px; overflow: visible; pointer-events: none; fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.worker-profile-editor[data-side="top"] .worker-profile-arrow { top: auto; bottom: -11px; transform: rotate(180deg); }
.worker-profile-editor.is-detached .worker-profile-arrow { display: none; }
.worker-profile-editor-heading { display: flex; align-items: center; justify-content: space-between; flex: none; gap: .75rem; padding: .55rem .75rem .55rem 1rem; border-bottom: 1px solid var(--line); }
.worker-profile-editor-heading h2 { margin: 0; font-size: 1rem; line-height: 1.4; }
.worker-profile-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation; }
.worker-profile-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.worker-profile-editor-body { min-height: 0; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 1rem 1rem; scrollbar-width: thin; }
.worker-profile-editor .form-label { display: block; margin-bottom: .4rem; font-size: .875rem; }
.worker-profile-editor .form-control, .worker-profile-editor .form-select { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
.worker-profile-editor #leave-date-field { margin-top: .85rem; }
.worker-profile-editor .form-help { margin: .5rem 0 0; font-size: .8rem; line-height: 1.55; }
.worker-profile-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.worker-profile-actions .btn { min-height: 44px; padding: .5rem 1rem; font-size: .875rem; }
@media (hover: hover) { .worker-profile-close:hover { background: var(--brand-soft); } }
@media (max-width: 991.98px) { .worker-profile-close { width: 44px; height: 44px; } }

/* 모바일 근무 상세의 요약은 하단 메뉴 위에 고정하고 본문에 같은 높이의 여백을 둡니다. */
@media (max-width: 991.98px) {
  .worker-detail-main { padding-bottom: calc(var(--mobile-nav-height) + var(--worker-detail-summary-height, 5.5rem) + 1.75rem); }
  .worker-detail-back, .worker-detail-heading-status { display: none; }
  .worker-detail-main .profile-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: .75rem 0 .25rem; margin-bottom: 1rem; }
  .worker-detail-main .profile-section { min-width: 0; padding-inline: .75rem; }
  .worker-detail-main .profile-section + .profile-section { position: relative; padding: 0 .75rem; border: 0; }
  .worker-detail-main .profile-section + .profile-section::before { content: ''; position: absolute; inset-block: .25rem; inset-inline-start: -.5px; width: 1px; background: var(--line); pointer-events: none; }
  .worker-detail-main .profile-section > .form-label { margin: 0; font-family: inherit; font-size: .75rem; font-weight: 500; line-height: 1.4; }
  .worker-detail-main .profile-section .inline-form { gap: .15rem .2rem; font-size: .8125rem; }
  .worker-detail-main #status-display, .worker-detail-main #ssn-display { display: flex; align-items: center; gap: .375rem; }
  .worker-detail-main .profile-section .text-action { min-width: 24px; min-height: 36px; padding: .2rem 0; font-size: .75rem; }
  .worker-detail-main #status-display > .status-pill, .worker-detail-main #ssn-display > .ssn-value { display: inline-flex; align-items: center; min-height: 1.75rem; max-width: 100%; font-family: inherit; font-size: .8rem; font-weight: 500; line-height: 1.4; }
  .worker-detail-main #status-display > .status-pill { padding: .15rem .45rem; }
  .worker-detail-main .profile-section .form-help { margin-block: .15rem 0; font-size: .75rem; }
  .worker-detail-main .profile-section input, .worker-detail-main .profile-section select { min-width: 0; font-size: max(1rem, 16px); }
  .worker-detail-main .profile-section #leave-date-field { min-width: 0; max-width: 100%; }
  .worker-detail-main .panel-heading { padding-block: 12px; }
  .worker-detail-main .table-toolbar { padding: .75rem; gap: .6rem; }
  .worker-detail-main .period-form { width: 100%; }
  .worker-detail-payroll-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .5rem; }
  .worker-detail-payroll-actions .worker-detail-settlement-link { grid-column: 1 / -1; }
  .worker-detail-payroll-actions .btn { min-width: 0; min-height: 44px; padding: .5rem .35rem; gap: .3rem; font-size: .8rem; }
  .worker-detail-payroll-actions .payslip-publication-trigger { grid-template-columns: minmax(0, 1fr) 1px 48px; padding-inline: 0; gap: 0; }
  .payslip-publication-trigger-title { gap: 4px; }
  .payslip-publication-trigger-title .bi { font-size: 14px; }
  .payslip-publication-trigger-badge { font-size: .75rem; }
  .worker-detail-main .attendance-table th, .worker-detail-main .attendance-table td { padding-inline: .45rem; }
  .worker-detail-summary-dock {
    position: fixed;
    z-index: 1015;
    left: max(.75rem, env(safe-area-inset-left, 0px));
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(var(--mobile-nav-height) + .65rem);
    padding: .3rem;
    border: 1px solid #cbb5d8;
    border-radius: 1rem;
    background: #f3edf7;
    box-shadow: 0 12px 30px rgba(45,24,60,.22);
    pointer-events: none;
  }
  .worker-detail-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
  .worker-detail-summary-grid .stat-card,
  .worker-detail-summary-grid .stat-card.emphasis {
    grid-column: auto;
    display: block;
    min-height: 4.3rem;
    padding: .55rem .35rem;
    border-radius: .75rem;
    text-align: center;
    box-shadow: none;
  }
  .worker-detail-summary-grid .stat-card > div { display: block; min-width: 0; }
  .worker-detail-summary-grid .section-icon { display: none; }
  .worker-detail-summary-grid .stat-label { display: block; font-size: .7rem; line-height: 1.4; }
  .worker-detail-summary-grid .stat-value,
  .worker-detail-summary-grid .stat-card.emphasis .stat-value { display: block; margin-top: .3rem; font-size: 1rem; line-height: 1.35; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .worker-detail-summary-grid .stat-value span { margin-inline-start: .05rem; font-size: .72rem; }
}
@media (max-width: 359px) {
  .worker-detail-main #ssn-display { gap: .1rem; }
  .worker-detail-main .attendance-table th, .worker-detail-main .attendance-table td { padding-inline: .3rem; font-size: .8125rem; }
  .worker-detail-main .attendance-table td:last-child { min-width: 5.5rem; }
  .worker-detail-main .attendance-table td:last-child small { font-size: .75rem; }
  .worker-detail-summary-grid .stat-label { font-size: .65rem; }
  .worker-detail-summary-grid .stat-value,
  .worker-detail-summary-grid .stat-card.emphasis .stat-value { font-size: .85rem; }
}
@media print {
  .worker-profile-editor { display: none !important; }
  .worker-detail-summary-dock { position: static; }
  .worker-detail-main { padding-bottom: 0; }
}