.panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 84px; padding: var(--space-4); border-block-end: var(--line-thin) solid var(--neutral-350); }
.panel-header h2 { margin: 0; font-size: var(--type-20); line-height: var(--leading-tight); word-break: keep-all; }
.icon-button { display: grid; place-items: center; inline-size: var(--target-min); block-size: var(--target-min); padding: 0; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); cursor: pointer; }
.icon-button svg { inline-size: 20px; block-size: 20px; }
.panel-toggle { display: none; min-block-size: var(--target-min); flex: none; padding-inline: var(--space-3); color: var(--company-accent-600); border: var(--line-thin) solid var(--company-accent-600); border-radius: var(--radius-sm); background: var(--surface-000); font-weight: 700; white-space: nowrap; }
.panel-body { min-block-size: 0; overflow-y: auto; padding: var(--space-4); }
.welcome-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
.welcome-panel strong { display: block; margin-block-end: var(--space-1); }
.welcome-panel p, .activity-note p { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.keep-together { white-space: nowrap; }
.soi-portrait { display: grid; place-items: center; inline-size: 64px; block-size: 64px; color: var(--surface-000); background: var(--company-accent-600); border: 4px solid var(--company-accent-100); border-radius: 50%; font-size: var(--type-14); font-weight: 800; }
.panel-body > .secondary-action { inline-size: 100%; }
.activity-note { margin-block-start: var(--space-6); padding: var(--space-4) 0; border-block: var(--line-thin) solid var(--neutral-350); }
.activity-note strong { display: block; margin-block-end: var(--space-2); }
.welcome-work { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.welcome-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.welcome-actions + .welcome-panel { margin-block-start: var(--space-6); border-block-start: var(--line-thin) solid var(--neutral-350); }

/* 대표 홈 — 자기 출근보다 회사 현황과 다음 관리 행동을 먼저 보여 준다. */
.owner-home { display: grid; gap: var(--space-5); }
.owner-home-hero { display: grid; gap: var(--space-4); padding: var(--space-5); color: var(--surface-000); background: var(--navy-950); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.owner-home-hero h3, .owner-home-hero p { margin: 0; }
.owner-home-hero h3 { margin-block: var(--space-1) var(--space-2); font-size: var(--type-24); line-height: var(--leading-tight); word-break: keep-all; }
.owner-home-hero p:not(.owner-home-eyebrow) { color: var(--neutral-200); line-height: var(--leading-body); word-break: keep-all; }
.owner-home-eyebrow { color: var(--glass-150); font-size: var(--type-12); font-weight: 800; letter-spacing: .04em; }
.owner-home-hero-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-2); }
.owner-home-hero .secondary-action { color: var(--surface-000); background: var(--navy-850); border-color: var(--glass-500); }
.owner-pulse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.owner-pulse-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-1); min-block-size: 88px; padding: var(--space-3); color: var(--ink-900); background: var(--neutral-050); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); text-align: start; }
.owner-pulse-item strong { color: var(--company-accent-600); font-size: var(--type-24); line-height: 1; }
.owner-pulse-item span { font-size: var(--type-14); font-weight: 800; word-break: keep-all; }
.owner-pulse-item small { grid-column: 1 / -1; align-self: end; color: var(--ink-600); font-size: var(--type-12); }
button.owner-pulse-item { inline-size: 100%; font: inherit; cursor: pointer; }
button.owner-pulse-item:hover { border-color: var(--company-accent-600); background: var(--company-accent-100); }
.owner-shortcuts, .owner-team { display: grid; gap: var(--space-3); }
.owner-shortcuts h3, .owner-team h3 { margin: 0; font-size: var(--type-16); }
.owner-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.owner-action { display: grid; gap: var(--space-1); min-block-size: 76px; padding: var(--space-3); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); background: var(--surface-000); text-align: start; cursor: pointer; }
.owner-action:hover { color: var(--company-accent-600); border-color: var(--company-accent-600); background: var(--company-accent-100); }
.owner-action strong, .owner-action span { display: block; }
.owner-action span { color: var(--ink-600); font-size: var(--type-12); line-height: var(--leading-tight); word-break: keep-all; }
.owner-team-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.owner-team-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.owner-team-row > div { min-inline-size: 0; }
.owner-team-row strong, .owner-team-row div span { display: block; }
.owner-team-row div span { overflow: hidden; color: var(--ink-600); font-size: var(--type-12); text-overflow: ellipsis; white-space: nowrap; }
.owner-team-row .quick-travel { grid-column: 1 / -1; justify-self: start; }
.owner-presence { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-600); font-size: var(--type-12); font-weight: 700; white-space: nowrap; }
.owner-presence::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--presence-offline); }
.owner-presence[data-presence="online"]::before { background: var(--presence-available); }
.owner-presence[data-presence="away"]::before { background: var(--presence-away); }
.owner-privacy-note { margin: 0; padding: var(--space-3); color: var(--ink-600); background: var(--company-accent-100); border-radius: var(--radius-sm); font-size: var(--type-12); line-height: var(--leading-body); word-break: keep-all; }
.tool-panel, .employee-form, .floor-form { display: grid; gap: var(--space-4); }
.employee-access { display: grid; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: var(--line-thin) solid var(--neutral-350); }
.employee-access h3, .employee-access p { margin: 0; }
.access-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.access-row span, .access-row strong, .access-row small { display: block; }
.access-row small { margin-block-start: var(--space-1); color: var(--ink-600); }
.access-row .danger-action { min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--status-error-700); background: var(--status-error-100); border: var(--line-thin) solid var(--status-error-700); border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }
.tool-panel > p, .form-help { margin: 0; max-inline-size: 60ch; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 700; }
.field input, .field select { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-3); color: var(--ink-900); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-result { min-block-size: 1.5em; margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.form-result[data-kind="success"] { color: var(--presence-available); }
.form-result[data-kind="error"] { color: var(--status-error-700); }
.panel-section { padding-block: var(--space-4); border-block-start: var(--line-thin) solid var(--neutral-350); }
.panel-section h3 { margin: 0 0 var(--space-3); font-size: var(--type-16); }
.zone-list, .people-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.zone-list li, .people-list li { padding: var(--space-3); background: var(--neutral-050); border-inline-start: 3px solid var(--company-accent-600); line-height: var(--leading-body); word-break: keep-all; }
.recovery-state { display: grid; place-items: center; align-content: center; gap: var(--space-3); min-block-size: 100%; padding: var(--space-8); text-align: center; }
.recovery-state strong { color: var(--status-error-700); font-size: var(--type-20); }
.recovery-state p { max-inline-size: 38ch; margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.upload-drop { display: grid; place-items: center; gap: var(--space-2); min-block-size: 180px; padding: var(--space-6); color: var(--company-accent-600); border: 2px dashed var(--glass-500); border-radius: var(--radius-md); background: var(--company-accent-100); text-align: center; cursor: pointer; }
.upload-drop[data-dragging="true"] { border-style: solid; filter: brightness(.96); }
.upload-drop svg { inline-size: 32px; block-size: 32px; }
.upload-drop span { color: var(--ink-600); font-size: var(--type-14); }
.conversation-chat { display: grid; grid-template-rows: minmax(12rem, 1fr) auto; gap: var(--space-4); min-block-size: 100%; }
.chat-log { display: flex; flex-direction: column; gap: var(--space-2); min-block-size: 12rem; padding: var(--space-3); overflow-y: auto; background: var(--neutral-050); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.chat-bubble { align-self: flex-start; max-inline-size: 86%; margin: 0; padding: var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-md); line-height: var(--leading-body); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.chat-bubble[data-actor="me"] { align-self: flex-end; color: var(--surface-000); background: var(--company-accent-600); border-color: var(--company-accent-600); }
.chat-composer { display: grid; gap: var(--space-2); }
.chat-composer label { font-weight: 700; }
.chat-composer textarea { inline-size: 100%; padding: var(--space-3); resize: vertical; color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); font: inherit; line-height: var(--leading-body); }
.drive-view { display: grid; gap: var(--space-4); min-inline-size: 0; }
.drive-introduction, .drive-count, .drive-status, .drive-empty { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.drive-search { display: grid; gap: var(--space-2); font-weight: 700; }
.drive-search input { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-3); color: var(--ink-900); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); background: var(--surface-000); }
.drive-count { font-weight: 700; }
.drive-status { min-block-size: 1.5em; padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); }
.drive-status[data-kind="error"] { color: var(--status-error-700); background: var(--status-error-100); }
.drive-empty { padding: var(--space-4); background: var(--neutral-050); border-inline-start: var(--line-focus) solid var(--neutral-350); }
.drive-tree, .drive-document-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.drive-tree .drive-tree { margin-block: var(--space-2); padding-inline-start: var(--space-3); border-inline-start: var(--line-thin) solid var(--neutral-350); }
.drive-group > details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); cursor: pointer; }
.drive-group-label { min-inline-size: 0; overflow-wrap: anywhere; font-weight: 800; }
.drive-group-count { flex: none; color: var(--ink-600); font-size: var(--type-12); }
.drive-document-list { margin-block-start: var(--space-2); }
.drive-document { display: grid; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.drive-document-name { overflow-wrap: anywhere; line-height: var(--leading-body); }
.drive-document-meta, .drive-document-original { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); overflow-wrap: anywhere; }
.drive-location { min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--company-accent-600); background: var(--company-accent-100); border: var(--line-thin) dashed var(--glass-500); border-radius: var(--radius-sm); text-align: start; line-height: var(--leading-body); overflow-wrap: anywhere; cursor: pointer; }
.drive-location:hover { border-style: solid; }
.drive-document-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.drive-document-actions > * { min-inline-size: 0; text-align: center; }

.board-view { display: grid; gap: var(--space-4); min-inline-size: 0; }
.board-introduction, .board-counts { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.board-status-line { margin: 0; min-block-size: 1.5em; padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--company-accent-100); border-radius: var(--radius-sm); line-height: var(--leading-body); }
.board-status-line[data-kind="error"] { color: var(--status-error-700); background: var(--status-error-100); }
.board-groups { display: grid; gap: var(--space-5); }
.board-person h3 { margin: 0 0 var(--space-1); font-size: var(--type-16); }
.board-counts { font-size: var(--type-14); font-weight: 700; }
.board-run-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.board-run { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--neutral-350); border-radius: var(--radius-sm); }
.board-run[data-status="running"] { border-inline-start-color: var(--presence-focused); }
.board-run[data-status="completed"] { border-inline-start-color: var(--presence-available); }
.board-run[data-status="failed"] { border-inline-start-color: var(--status-error-700); }
.board-run-title { line-height: var(--leading-tight); overflow-wrap: anywhere; }
.board-run-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; color: var(--ink-600); font-size: var(--type-14); font-variant-numeric: tabular-nums; }
.board-status { padding: 2px var(--space-2); border-radius: var(--radius-round); border: var(--line-thin) solid currentColor; background: var(--neutral-050); color: var(--ink-600); font-size: var(--type-12); font-weight: 800; }
.board-status[data-status="running"] { color: var(--presence-focused); }
.board-status[data-status="completed"] { color: var(--presence-available); }
.board-status[data-status="failed"] { color: var(--status-error-700); }
.board-run-result { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-run-error { margin: 0; color: var(--status-error-700); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-timeline-toggle { justify-self: start; min-block-size: var(--target-min); min-inline-size: var(--target-min); padding: var(--space-2) var(--space-3); color: var(--company-accent-600); background: var(--company-accent-100); border: var(--line-thin) solid var(--glass-500); border-radius: var(--radius-sm); font-size: var(--type-14); font-weight: 700; word-break: keep-all; cursor: pointer; }
.board-timeline-toggle:hover { border-style: solid; border-color: var(--company-accent-600); }
.board-timeline { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-1) 0 0 var(--space-2); list-style: none; }
.board-timeline-step { position: relative; display: flex; flex-wrap: wrap; column-gap: var(--space-3); row-gap: var(--space-1); align-items: baseline; padding-inline-start: var(--space-4); }
.board-timeline-step::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.45em; inline-size: 8px; block-size: 8px; background: var(--company-accent-600); border-radius: var(--radius-round); }
.board-timeline-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 3px; inset-block-start: calc(0.45em + 8px); inset-block-end: calc(-1 * var(--space-2)); inline-size: var(--line-thin); background: var(--neutral-350); }
.board-timeline-note::before { background: var(--neutral-350); }
.board-timeline-label { color: var(--ink-900); font-size: var(--type-14); line-height: var(--leading-body); word-break: keep-all; }
.board-timeline-note .board-timeline-label { color: var(--ink-600); }
.board-timeline-time { color: var(--ink-600); font-size: var(--type-12); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

.seat-editor { display: grid; gap: var(--space-4); }
.seat-editor-intro, .seat-editor-hint { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.seat-editor-status { padding: var(--space-2) var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.seat-editor-status:empty { min-block-size: 0; padding: 0; background: transparent; }
.seat-editor-done { inline-size: 100%; }
.seat-editor-section h3 { margin: 0 0 var(--space-3); font-size: var(--type-16); }
.seat-editor-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.seat-editor-empty { padding: var(--space-3); color: var(--ink-600); background: var(--neutral-050); border-radius: var(--radius-sm); line-height: var(--leading-body); word-break: keep-all; }
.seat-choice { inline-size: 100%; min-block-size: var(--target-min); padding: var(--space-2) var(--space-3); text-align: start; color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); line-height: var(--leading-body); word-break: keep-all; cursor: pointer; }
.seat-choice:hover { border-color: var(--company-accent-600); }
.seat-choice[aria-pressed="true"] { border-color: var(--company-accent-600); background: var(--company-accent-100); font-weight: 700; }
.seat-editor-detail { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--neutral-050); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.seat-editor-selected { margin: 0; font-weight: 700; line-height: var(--leading-body); word-break: keep-all; }
.seat-editor-occupant span { font-weight: 700; }
.seat-editor-subheading { margin: 0; font-weight: 700; }
.seat-editor-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.seat-move-button, .seat-facing-button { min-inline-size: 0; word-break: keep-all; }

.storage-contents { display: grid; gap: var(--space-2); }
.storage-count { margin: 0; color: var(--ink-600); font-size: var(--type-14); font-weight: 700; }
.storage-child-list, .storage-document-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.storage-child-list li { padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); font-weight: 700; }
.storage-document-list li { min-inline-size: 0; }
.storage-document-link { display: block; padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); text-decoration: none; overflow-wrap: anywhere; line-height: var(--leading-tight); }
.storage-document-link:hover { border-color: var(--company-accent-600); color: var(--company-accent-600); }

.payroll-day, .payroll-content { display: grid; gap: var(--space-4); min-inline-size: 0; }
.payroll-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; }
.payroll-status, .payroll-empty, .payroll-warning, .payroll-result-line { margin: 0; color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.payroll-status { padding: var(--space-2) var(--space-3); background: var(--company-accent-100); border-radius: var(--radius-sm); }
.payroll-status[data-kind="error"], .payroll-result-line[data-kind="error"], .payroll-error { color: var(--status-error-700); }
.payroll-card { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-inline-start: var(--line-focus) solid var(--company-accent-600); border-radius: var(--radius-sm); }
.payroll-person h3, .payroll-person p { margin: 0; }
.payroll-person p, .payroll-person small { display: block; margin-block-start: var(--space-1); color: var(--ink-600); overflow-wrap: anywhere; }
.payroll-form { display: grid; gap: var(--space-4); }
.payroll-group { display: grid; gap: var(--space-3); min-inline-size: 0; margin: 0; padding: var(--space-3); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.payroll-group legend { padding-inline: var(--space-1); color: var(--ink-900); font-weight: 800; }
.payroll-group-help { margin: 0; color: var(--ink-600); font-size: var(--type-14); line-height: var(--leading-body); }
.payroll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.payroll-field { display: grid; gap: var(--space-1); min-inline-size: 0; font-weight: 700; }
.payroll-field input, .payroll-field textarea { inline-size: 100%; min-block-size: var(--control-tall); padding: var(--space-2) var(--space-3); color: var(--ink-900); background: var(--surface-000); border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); font: inherit; }
.payroll-field textarea { min-block-size: 6rem; resize: vertical; line-height: var(--leading-body); }
.payroll-checks { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.payroll-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-2); line-height: var(--leading-body); word-break: keep-all; }
.payroll-check input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; }
.payroll-result { display: grid; gap: var(--space-3); }
.payroll-summary { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--neutral-050); border-radius: var(--radius-sm); }
.payroll-amounts dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; font-size: var(--type-14); }
.payroll-amounts dt, .payroll-amounts dd { margin: 0; }
.payroll-amounts dd { text-align: end; font-variant-numeric: tabular-nums; }
.payroll-net { margin: 0; padding-block-start: var(--space-2); border-block-start: var(--line-thin) solid var(--neutral-350); line-height: var(--leading-body); }
.payroll-saved { margin: 0; color: var(--presence-available); font-weight: 700; }
.payroll-send { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--company-accent-100); border: var(--line-thin) solid var(--glass-500); border-radius: var(--radius-sm); }
.payroll-send h3, .payroll-send p { margin: 0; }
.payroll-send > p { color: var(--ink-600); line-height: var(--leading-body); word-break: keep-all; }
.payroll-sender-form { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.payroll-aliases, .mailbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.payroll-aliases li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.mailbox-item { width: 100%; text-align: left; display: grid; gap: var(--space-1); }
.mailbox-item span, .mailbox-from { color: var(--ink-600); font-size: .85rem; }
.mailbox-list .is-unread .mailbox-item { border-color: var(--company-accent-600); background: var(--company-accent-100); }
.mailbox-detail { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.mailbox-payroll-summary { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: var(--space-2) var(--space-3); margin: 0; }
.mailbox-payroll-summary dt { color: var(--ink-600); }
.mailbox-payroll-summary dd { margin: 0; font-weight: 600; }
.payroll-warning { padding: var(--space-3); background: var(--status-error-100); border-radius: var(--radius-sm); }

/* 미팅 예약 패널 */
.meeting-view { display: flex; flex-direction: column; gap: 12px; }
.meeting-month-title { font-weight: 600; font-size: 0.85rem; margin: 4px 0; }
.meeting-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.meeting-grid-head { font-size: 0.65rem; text-align: center; opacity: 0.6; }
.meeting-cell { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 44px; padding: 3px; font-size: 0.62rem; border: 1px solid var(--panel-border, rgba(120, 120, 140, 0.3)); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.meeting-cell.is-out { opacity: 0.3; cursor: default; border-color: transparent; }
.meeting-cell.is-today { border-width: 2px; border-color: currentColor; }
.meeting-chip { border-radius: 4px; padding: 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.meeting-chip.is-booked { background: rgba(220, 80, 80, 0.25); }
.meeting-chip.is-open { background: rgba(80, 180, 110, 0.25); }
.meeting-day-detail { font-size: 0.78rem; margin-top: 6px; }
.meeting-form-row { display: flex; gap: 6px; flex-wrap: wrap; }
.meeting-form-row input { flex: 1; min-width: 120px; }
.meeting-invite-link { font-size: 0.78rem; word-break: break-all; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.meeting-row { display: flex; gap: 6px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.meeting-weekly-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.meeting-weekly-row > span { flex: 0 0 20px; font-size: 0.75rem; }
.meeting-weekly-row input { flex: 1; }
.meeting-number-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; flex: 1; }

/* 미팅 예약 페이지 미리보기 */
.meeting-preview-card { border: 1px solid var(--panel-border, rgba(120,120,140,.35)); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.meeting-preview-badge { align-self: flex-start; font-size: 0.68rem; border-radius: 5px; padding: 1px 6px; background: rgba(80,120,220,.18); }
.meeting-preview-title { font-size: 0.95rem; }
.meeting-preview-sub { font-size: 0.75rem; opacity: .75; }
.meeting-preview-day { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.meeting-preview-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.meeting-preview-slots > span { border: 1px solid var(--panel-border, rgba(120,120,140,.35)); border-radius: 5px; padding: 2px 7px; font-size: 0.7rem; }

/* 출근 요일 패널 */
.schedule-list { display: grid; gap: 10px; }
.schedule-row { border: 1px solid var(--panel-border, rgba(120,120,140,.35)); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.schedule-days { margin: 0; font-size: 0.85rem; }
.schedule-pending { margin: 0; font-size: 0.8rem; opacity: .85; }
.schedule-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.schedule-form { display: grid; gap: 10px; margin-top: 14px; }
.schedule-person, .schedule-note { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--panel-border, rgba(120,120,140,.35)); background: transparent; color: inherit; }
.schedule-day-picker { display: flex; gap: 6px; flex-wrap: wrap; border: 1px solid var(--panel-border, rgba(120,120,140,.35)); border-radius: 8px; padding: 8px 10px; }
.schedule-day-picker legend { font-size: 0.8rem; padding-inline: 4px; }
.schedule-day { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; }

/* 일간 근무시간 그래프 — 단일 시리즈, 8시간 기준선 */
.attendance-chart { display: block; inline-size: 100%; max-inline-size: 360px; margin-top: 6px; }
.attendance-chart-bar { fill: var(--company-accent-600); }
.attendance-chart-bar:hover { fill: var(--company-accent-700, var(--company-accent-600)); }
.attendance-chart-bar-empty { fill: transparent; }
.attendance-chart-baseline { stroke: var(--panel-border, rgba(120,120,140,.45)); stroke-width: 1; }
.attendance-chart-reference { stroke: var(--panel-border, rgba(120,120,140,.35)); stroke-width: 1; stroke-dasharray: 3 4; }
.attendance-chart-label { fill: currentColor; opacity: .6; font-size: 9px; }

/* 오늘 출근 시간표 — 켠(근무)/끈(휴식) 구간을 하루 축 위에 표시 */
.schedule-person-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.schedule-person-toggle .timeline-hint { font-size: 0.75rem; opacity: .55; }
.schedule-person-toggle[aria-expanded="true"] .timeline-hint { opacity: .85; }
.schedule-person-toggle:focus-visible { outline: 2px solid var(--company-accent-600); outline-offset: 2px; border-radius: 4px; }
.attendance-timeline-chart { display: block; inline-size: 100%; max-inline-size: 360px; margin-top: 4px; }
.attendance-timeline-track { fill: var(--panel-border, rgba(120,120,140,.18)); opacity: .35; }
.attendance-timeline-tick { stroke: var(--panel-border, rgba(120,120,140,.4)); stroke-width: 1; opacity: .5; }
.attendance-timeline-bar { fill: var(--company-accent-600); }
.attendance-timeline-bar.is-ongoing { fill: var(--company-accent-700, var(--company-accent-600)); }
.attendance-timeline-label { fill: currentColor; opacity: .6; font-size: 9px; }
.attendance-timeline-list { margin: 4px 0 0; padding-inline-start: 18px; font-size: 0.82rem; opacity: .85; }
.attendance-timeline-list li { margin-block: 1px; }

/* CCTV — 업무 화면 그리드 */
.cctv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cctv-cell { margin: 0; border: 2px solid var(--company-accent-600); border-radius: 10px; overflow: hidden; background: var(--surface-000); display: grid; }
.cctv-frame { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in; }
.cctv-cell[data-zoom="true"] { grid-column: 1 / -1; }
.cctv-cell[data-zoom="true"] .cctv-frame { cursor: zoom-out; aspect-ratio: auto; }
.cctv-name { padding: 6px 10px; font-size: 0.85rem; font-weight: 700; border-top: 1px solid var(--panel-border, rgba(120,120,140,.35)); }
.cctv-empty { opacity: .75; }

/* 출근 패널 상단 토글 */
.work-toggle-row { display: grid; gap: 6px; }
.work-toggle { inline-size: 100%; }
.work-onboarding { padding: 10px 12px; border-radius: 8px; background: var(--company-accent-100); }
.work-onboarding p, .work-bandwidth { margin: 4px 0 0; }
.workview-settings select { min-block-size: var(--target-min); padding: 8px 10px; border: 1px solid var(--panel-border, rgba(120,120,140,.35)); border-radius: 6px; background: var(--surface-000); color: inherit; }
.work-consent { max-inline-size: 34rem; border: 1px solid var(--neutral-350); border-radius: 14px; color: var(--ink-900); background: var(--surface-000); box-shadow: var(--shadow-panel); }
.work-consent::backdrop { background: rgba(8,20,32,.72); }
.work-consent form { display: grid; gap: 10px; }
.work-consent h2, .work-consent p, .work-consent ul { margin: 0; }
.work-consent li { margin-block: 6px; line-height: 1.5; }
.consent-policy-form textarea { font: inherit; font-size: 0.88rem; padding: 10px 12px; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); resize: vertical; line-height: 1.5; }

/* 사장 할 일 보드 */
.tasks-view { display: flex; flex-direction: column; gap: var(--space-3); }
.tasks-content { display: flex; flex-direction: column; gap: var(--space-3); }
.task-row { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.task-row.is-done .task-title { color: var(--ink-600); text-decoration: line-through; }
.task-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.task-title { margin: 0; word-break: keep-all; }
.task-badge { font-size: 0.68rem; border-radius: 5px; padding: 1px 6px; background: rgba(80, 120, 220, 0.18); white-space: nowrap; }
.task-assign { margin: 0; font-size: 0.8rem; color: var(--ink-600); }
.task-assign a { color: var(--company-accent-600); font-weight: 700; }
.task-alert-dot { display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 6px; border-radius: 50%; background: #d9534a; vertical-align: 2px; }
.task-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.task-thread { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--panel-border, rgba(120,120,140,.3)); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.task-comment-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.task-comment b { font-size: 0.82rem; margin-inline-end: 6px; }
.task-comment p { margin: 2px 0 0; font-size: 0.88rem; }
.task-comment-time { font-size: 0.72rem; color: var(--ink-600); }
.task-comment-form { display: flex; gap: 6px; }
.task-comment-form input { flex: 1; min-width: 0; }
.task-complete-box { display: flex; gap: 6px; margin-top: 6px; }
.task-complete-box input { flex: 1; min-width: 0; }
.task-files, .task-history { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--panel-border, rgba(120,120,140,.3)); padding-top: 8px; }
.task-files b, .task-history b { font-size: 0.82rem; }
.task-file-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.task-file a { color: var(--company-accent-600); font-weight: 700; font-size: 0.88rem; }
.task-files input[type="file"] { font-size: 0.8rem; }
.task-worklog-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.task-worklog-form input[type="datetime-local"] { font: inherit; font-size: 0.82rem; padding: 6px 8px; border: var(--line-thin) solid var(--neutral-350); border-radius: var(--radius-sm); }
.task-worklog-form input:not([type]) { grid-column: 1 / 2; }
.task-worklog-form .secondary-action { grid-column: 2 / 3; }
.manual-clock { align-items: stretch; }
.manual-clock input { flex: 1; }