@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/PretendardVariable.302ec55f5b43.woff2") format("woff2");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}
:root {
  color-scheme: light dark;
  --app-bg: light-dark(#F1F2F4, #0F1319);
  --surface: light-dark(#FFFFFF, #171C26);
  --surface-secondary: light-dark(#F7F8FA, #1E2430);
  --text: light-dark(#14181F, #E6EAF0);
  --muted: light-dark(#6B7280, #96A0AE);
  --muted-on-bg: light-dark(#5F6673, #96A0AE);
  --border: light-dark(#E4E7EB, #232A36);
  --border-strong: light-dark(#D6DAE0, #2E3644);
  --accent: #E0202E;
  --accent-soft: light-dark(#FDECED, #331D27);
  --chrome: light-dark(#1B2029, #0B0F15);
  --chrome-active: light-dark(#232A36, #1E2430);
  --chrome-border: light-dark(#2E3644, #232A36);
  --chrome-text: #E6EAF0;
  --chrome-muted: #A4ADBA;
  --shadow-color: light-dark(rgb(20 24 31 / 3%), rgb(0 0 0 / 8%));
  --shadow: 0 3px 14px var(--shadow-color);
  --list-row-padding: 9px;
  --list-block-padding: 12px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-width: 320px; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 14px; line-height: 1.6; color: var(--text); background: var(--app-bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: wait; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, strong { font-weight: 600; }
h1 { font-size: 28px; line-height: 1.4; letter-spacing: -.8px; overflow-wrap: anywhere; }
h2 { font-size: 15px; line-height: 1.5; }
h3 { font-size: 16px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--surface); color: var(--text); border: 2px solid var(--accent); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.topbar { min-height: 72px; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--chrome); color: var(--chrome-text); border-bottom: 1px solid var(--chrome-border); }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #FFFFFF; background: var(--accent); font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.brand-name { display: inline-flex; align-items: baseline; gap: 10px; font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.7px; }
.brand-product { padding-left: 10px; border-left: 1px solid var(--chrome-border); font-size: 11px; font-weight: 400; letter-spacing: .2px; color: var(--chrome-muted); }
.topbar-context { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 20px; }
.topbar-team { font-size: 12px; color: var(--chrome-muted); }
.theme-control select { color-scheme: dark; min-height: 34px; padding: 5px 26px 5px 10px; border: 1px solid var(--chrome-border); border-radius: 7px; background-color: var(--chrome-active); color: var(--chrome-text); font-size: 12px; }
.topbar :focus-visible, .sidebar :focus-visible { outline-color: var(--chrome-text); }
.user-identity { display: flex; align-items: center; gap: 9px; }
.user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--chrome-border); border-radius: 50%; font-size: 12px; background: var(--chrome-active); }
.user-name { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.user-role { display: block; color: var(--chrome-muted); font-size: 11px; }
.logout-form { display: flex; margin: 0; }
.topbar-button { padding: 6px 0; border: 0; background: transparent; color: var(--chrome-text); font-size: 12px; cursor: pointer; }
.topbar-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.app-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100dvh - 72px); }
.app-layout--guest { display: block; }
.sidebar { display: flex; flex-direction: column; padding: 30px 16px 22px; background: var(--chrome); color: var(--chrome-text); border-right: 1px solid var(--chrome-border); }
.sidebar-heading { margin: 0 14px 14px; color: var(--chrome-muted); font-size: 11px; letter-spacing: .3px; }
.main-nav { display: flex; flex-direction: column; gap: 7px; }
.nav-link { min-height: 43px; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 8px; color: var(--chrome-text); text-decoration: none; font-size: 13px; }
.nav-link:hover { background: var(--chrome-active); }
.nav-link.is-active { box-shadow: inset 3px 0 0 var(--accent); background: var(--chrome-active); font-weight: 600; }
.nav-symbol { width: 18px; text-align: center; font-size: 16px; line-height: 1; font-weight: 400; }
.sidebar-footer { display: grid; gap: 4px; margin: auto 14px 0; padding-top: 40px; color: var(--chrome-text); font-size: 12px; overflow-wrap: anywhere; }
.sidebar-footer-label { padding-top: 18px; border-top: 1px solid var(--chrome-border); font-size: 11px; color: var(--chrome-muted); }
.sidebar-product { margin-top: 16px; color: var(--chrome-muted); font-size: 11px; }
.main-content { width: 100%; max-width: 1360px; min-width: 0; padding: 30px 28px 44px; margin: 0; }
.main-content--guest { max-width: 1280px; padding: 48px 36px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-heading > div { min-width: 0; }
.page-heading > .button { flex-shrink: 0; }
.eyebrow { font-size: 12px; color: var(--muted-on-bg); margin-bottom: 7px; }
.page-description { font-size: 13px; color: var(--muted-on-bg); margin-top: 8px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.button--primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.button--primary:hover { box-shadow: 0 3px 12px rgb(224 32 46 / 22%); }
.button--primary:disabled { opacity: .8; }
.button--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.button--secondary:hover { background: var(--surface-secondary); }
.button--small { min-height: 33px; padding: 5px 11px; font-size: 12px; }
.button--disabled { background: var(--surface-secondary); border-color: var(--border); color: var(--muted); cursor: default; }
.button--block { width: 100%; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: var(--list-block-padding) 22px; border-bottom: 1px solid var(--border); }
.section-note, .result-count, .toolbar-note { font-size: 12px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.metric { position: relative; min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }
.metric--attention { box-shadow: inset 0 3px 0 var(--accent); }
.metric-label { display: block; font-size: 12px; color: var(--muted); }
.metric-value { display: block; margin: 5px 0 3px; font-size: 30px; line-height: 1.35; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.metric-value small { margin-left: 5px; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.metric-caption { display: block; font-size: 11px; color: var(--muted); }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px 15px; }
.scope-switch { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 8px; background: var(--surface-secondary); }
.scope-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 6px 13px; color: var(--muted); font-size: 13px; text-decoration: none; border-radius: 6px; }
.scope-link span { color: inherit; font-size: 11px; font-variant-numeric: tabular-nums; }
.scope-link.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 8%); font-weight: 600; }
.filter-form { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(108px, 1fr)) auto; gap: 12px; align-items: end; padding: 5px 22px 22px; border-bottom: 1px solid var(--border); }
.filter-field { min-width: 0; }
.filter-field label { display: block; margin-bottom: 6px; font-size: 11px; color: var(--muted); }
.filter-field input, .filter-field select { width: 100%; min-height: 38px; padding: 7px 10px; font-size: 12px; }
input:not([type="hidden"]), select, textarea { max-width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 7px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.filter-actions { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.filter-actions .button { min-height: 38px; padding: 7px 14px; }
.filter-reset { color: var(--muted); font-size: 12px; white-space: nowrap; }
.task-search-panel { margin-bottom: 24px; background: var(--surface-secondary); }
.task-search-panel .filter-form { border-bottom: 0; }
.task-search-panel .scope-switch { border: 1px solid var(--border); }
.task-search-panel .active-filter { border-bottom: 0; border-top: 1px solid var(--border); }
.task-list-panel .section-heading { padding-top: var(--list-block-padding); padding-bottom: var(--list-block-padding); }
.task-table, .account-table { width: 100%; border-collapse: collapse; text-align: left; color: var(--text); }
.task-table th, .account-table th { padding: 12px 20px; font-size: 11px; font-weight: 400; color: var(--muted); background: var(--surface-secondary); border-bottom: 1px solid var(--border); }
.task-table td, .account-table td { padding: 18px 20px; vertical-align: middle; border-bottom: 1px solid var(--border); font-size: 12px; }
.task-table td { padding-top: var(--list-row-padding); padding-bottom: var(--list-row-padding); }
.task-table tbody tr:last-child td, .account-table tbody tr:last-child td { border-bottom: 0; }
.task-table tbody tr:hover, .account-table tbody tr:hover { background: var(--surface-secondary); }
.task-table th:first-child { width: 45%; }
.task-table th:nth-child(2) { width: 13%; }
.task-table th:nth-child(3) { width: 17%; }
.task-table th:nth-child(4) { width: 14%; }
.task-table th:last-child { width: 11%; }
.task-table { table-layout: fixed; }
.task-title-link { display: block; color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.6; overflow-wrap: anywhere; }
.task-title-link:hover { text-decoration: underline; }
.task-updated { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.person-name { overflow-wrap: anywhere; }
.self-label { display: inline-block; padding: 1px 5px; margin-left: 5px; border: 1px solid var(--border-strong); border-radius: 4px; font-size: 11px; font-weight: 400; color: var(--muted); line-height: 1.5; vertical-align: middle; }
.date-value { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-variant-numeric: tabular-nums; }
.date-value small { display: inline-flex; align-items: center; gap: 4px; width: 100%; font-size: 11px; color: var(--text); }
.date-value small::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: var(--surface-secondary); color: var(--text); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status-pill[data-status="in_progress"] .status-dot { background: var(--accent); }
.status-pill--inactive { color: var(--muted); }
.priority-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.priority-label[data-priority="high"], .priority-label[data-priority="urgent"] { color: var(--text); }
.priority-label[data-priority="high"]::before, .priority-label[data-priority="urgent"]::before { content: ""; width: 3px; height: 10px; border-radius: 2px; background: var(--accent); }
.priority-label[data-priority="urgent"] { font-weight: 600; }
.muted { color: var(--muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 58px 24px 64px; text-align: center; }
.empty-symbol { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-secondary); color: var(--muted); font-size: 23px; }
.empty-state h3 { margin-bottom: 7px; }
.empty-state p { max-width: 420px; color: var(--muted); font-size: 13px; }
.empty-state .button { margin-top: 22px; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--border); }
.pagination-summary, .pagination-current { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pagination-controls { display: flex; align-items: center; gap: 12px; }
.messages { display: grid; gap: 10px; margin-bottom: 22px; }
.notice { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; }
.notice-mark { flex-shrink: 0; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--text); }
.notice--error { border-left: 3px solid var(--accent); }
.notice--error .notice-mark { background: var(--accent); }
.breadcrumbs { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; font-size: 12px; color: var(--muted-on-bg); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.page-heading--detail { align-items: flex-start; }
.page-heading--detail h1 { margin-top: 13px; max-width: 950px; }
.heading-badges { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.heading-badges .status-pill { background: var(--surface); border: 1px solid var(--border); }
.heading-badges .priority-label { color: var(--muted-on-bg); }
.heading-badges .priority-label[data-priority="urgent"], .heading-badges .priority-label[data-priority="high"] { color: var(--text); }
.read-only-label { font-size: 11px; color: var(--muted-on-bg); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 20px; }
.detail-main { min-width: 0; display: grid; gap: 20px; }
.task-description { min-height: 170px; padding: 24px; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.task-facts dl { margin: 0; padding: 22px; display: grid; gap: 19px; }
.task-facts dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.task-facts dd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.person-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-secondary); font-size: 11px; flex-shrink: 0; font-weight: 500; }
.task-facts .self-label { margin-left: 0; }
.facts-separator { border-top: 1px solid var(--border); padding-top: 17px; }
.task-facts dd.facts-time { font-size: 12px; font-variant-numeric: tabular-nums; }
.sharing-note { padding: 14px 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; background: var(--surface-secondary); }
.history-list { list-style: none; margin: 0; padding: 23px 24px; }
.history-item { position: relative; display: flex; gap: 14px; padding-bottom: 12px; }
.history-item::before { content: ""; position: absolute; top: 12px; bottom: 0; left: 4px; width: 1px; background: var(--border-strong); }
.history-item:last-child { padding-bottom: 0; }
.history-item:last-child::before { display: none; }
.history-marker { position: relative; flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px; background: var(--surface); border: 2px solid var(--border-strong); border-radius: 50%; }
.history-item:first-child .history-marker { border-color: var(--accent); }
.history-item-main { min-width: 0; }
.history-item-heading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.history-action { color: var(--muted); font-size: 11px; }
.history-item p { font-size: 13px; margin: 3px 0 4px; }
.history-item time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-empty { padding: 24px; color: var(--muted); font-size: 13px; }
.back-link { display: inline-flex; gap: 7px; align-items: center; margin-top: 25px; font-size: 12px; color: var(--muted-on-bg); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.form-panel { max-width: 880px; }
.form-panel--narrow { max-width: 600px; }
.editor-form { padding: 26px; }
.form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.form-field { min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-field > label { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.field-required, .field-optional { color: var(--muted); font-size: 11px; font-weight: 400; }
.form-field input:not([type="hidden"]), .form-field select, .form-field textarea { width: 100%; min-height: 42px; padding: 9px 11px; font-size: 14px; }
.form-field input[type="checkbox"], .form-field input[type="radio"] { width: auto; min-height: auto; }
.form-field textarea { min-height: 190px; resize: vertical; line-height: 1.75; }
.form-field input:disabled, .form-field select:disabled { color: var(--muted); background: var(--surface-secondary); }
.field-help { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.field-help ul { margin: 5px 0 0; padding-left: 18px; }
.field-help li + li { margin-top: 3px; }
.form-alert { margin-bottom: 22px; padding: 13px 15px; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; background: var(--surface-secondary); color: var(--text); font-size: 13px; }
.form-alert ul { list-style: none; margin: 5px 0 0; padding: 0; }
.form-alert > .errorlist { margin: 0; }
.form-alert li + li { margin-top: 5px; }
.has-errors input, .has-errors textarea, .has-errors select { border-color: var(--accent); }
.field-errors { margin-top: 7px; padding-left: 9px; border-left: 2px solid var(--accent); font-size: 12px; color: var(--text); }
.field-errors ul { list-style: none; margin: 0; padding: 0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 24px; margin-top: 28px; border-top: 1px solid var(--border); }
.form-panel--narrow .form-fields { grid-template-columns: minmax(0, 1fr); }
.account-table th, .account-table td { padding: var(--list-row-padding) 23px; }
.account-table th { padding-top: 12px; padding-bottom: 12px; }
.account-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account-person strong { font-size: 13px; overflow-wrap: anywhere; }
.account-person .self-label { margin-left: 0; }
.username { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.role-pill { padding: 3px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; }
.account-create-layout { display: grid; grid-template-columns: minmax(0, 780px) 270px; align-items: start; gap: 20px; }
.role-guide { padding: 23px; }
.role-guide dl { display: grid; gap: 20px; margin: 20px 0 0; }
.role-guide dt { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.role-guide dd { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.75; }
.role-guide > p { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: 80px; max-width: 1000px; margin: 7vh auto 5vh; }
.login-intro .eyebrow { margin-bottom: 22px; }
.login-intro h1 { font-size: 40px; line-height: 1.5; letter-spacing: -1.6px; font-weight: 600; }
.login-description { margin-top: 20px; font-size: 15px; color: var(--muted-on-bg); line-height: 1.85; }
.login-features { display: grid; gap: 18px; margin-top: 36px; }
.login-features > div { display: flex; gap: 15px; align-items: center; }
.login-features > div > span { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 11px; color: var(--muted-on-bg); font-variant-numeric: tabular-nums; }
.login-features strong { display: block; font-size: 13px; }
.login-features small { display: block; font-size: 12px; color: var(--muted-on-bg); }
.login-panel { padding: 32px; }
.login-panel-heading .eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: .6px; color: var(--muted); }
.login-panel-heading h2 { font-size: 25px; letter-spacing: -.7px; }
.login-panel-heading > p:last-child { margin-top: 8px; color: var(--muted); font-size: 13px; }
.stacked-form { display: grid; gap: 20px; margin-top: 29px; }
.stacked-form .form-alert { margin-bottom: 0; }
.stacked-form .button { min-height: 44px; margin-top: 3px; }
.login-help { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); text-align: center; }
.result-panel { max-width: 680px; margin: 40px auto; padding: 54px 30px; text-align: center; }
.result-panel h1 { font-size: 25px; margin: 8px 0 12px; }
.result-panel > p:not(.eyebrow):not(.error-code) { color: var(--muted); font-size: 13px; }
.result-panel .button { margin-top: 28px; }
.result-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 23px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 22px; }
.error-code { font-size: 48px; line-height: 1.3; font-weight: 600; letter-spacing: -2px; color: var(--text); }
.error-code::after { content: ""; display: block; width: 28px; height: 3px; margin: 16px auto 22px; background: var(--accent); border-radius: 2px; }
@media (max-width: 1200px) {
  .main-content { padding: 26px 22px 40px; }
  .filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-field--search { grid-column: span 2; }
  .filter-actions { justify-content: flex-end; }
  .task-table th, .task-table td { padding-left: 16px; padding-right: 16px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .account-create-layout { grid-template-columns: minmax(0, 1fr); }
  .account-create-layout .form-panel { max-width: none; }
  .role-guide dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .login-layout { gap: 45px; }
  .login-intro h1 { font-size: 34px; }
}
@media (max-width: 1000px) {
  .app-layout { grid-template-columns: 182px minmax(0, 1fr); }
  .sidebar { padding-left: 11px; padding-right: 11px; }
  .topbar { padding-left: 22px; padding-right: 22px; }
  .topbar-context { gap: 14px; }
  .topbar-team { display: none; }
  .main-content { padding: 24px 20px 36px; }
  .metrics { gap: 10px; }
  .metric { padding: 15px; }
  .metric-caption { font-size: 11px; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .task-facts { order: -1; }
  .task-facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px 15px; }
  .facts-separator { border-top: 0; padding-top: 0; }
  .task-description { min-height: 130px; }
  .login-layout { grid-template-columns: minmax(0, 1fr) 390px; gap: 35px; }
  .login-intro h1 { font-size: 29px; letter-spacing: -.9px; }
}
@media (max-width: 760px) {
  .app-layout { display: block; min-height: calc(100dvh - 72px); }
  .topbar { padding: 13px 18px; gap: 12px; }
  .brand-product { display: none; }
  .brand-name { font-size: 21px; }
  .brand-mark { width: 33px; height: 33px; border-radius: 10px; }
  .topbar-context { gap: 13px; }
  .user-avatar { display: none; }
  .user-name { max-width: 90px; }
  .theme-control select { min-height: 34px; font-size: 11px; max-width: 125px; }
  .sidebar { display: block; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--chrome-border); }
  .sidebar-heading, .sidebar-footer { display: none; }
  .main-nav { flex-direction: row; flex-wrap: wrap; gap: 5px; }
  .nav-link { gap: 8px; padding: 9px 11px; font-size: 12px; min-height: 39px; }
  .nav-symbol { width: 15px; font-size: 14px; }
  .main-content { padding: 24px 18px 34px; }
  h1 { font-size: 25px; }
  .page-heading { margin-bottom: 22px; gap: 16px; }
  .page-description { font-size: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 21px; }
  .metric { padding: 16px 18px; }
  .metric-value { font-size: 28px; }
  .list-toolbar, .section-heading { padding: var(--list-block-padding) 18px; }
  .toolbar-note { display: none; }
  .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 18px 18px; }
  .filter-field--search { grid-column: 1 / -1; }
  .filter-actions { justify-content: flex-end; }
  .task-table thead, .account-table thead { display: none; }
  .task-table, .task-table tbody, .account-table, .account-table tbody { display: block; }
  .task-table tbody tr, .account-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 15px 7px; border-bottom: 1px solid var(--border); }
  .task-table tbody tr:last-child, .account-table tbody tr:last-child { border-bottom: 0; }
  .task-table td, .account-table td { min-width: 0; display: block; padding: 6px 12px; border: 0; }
  .task-table .task-title-cell, .account-table td:first-child { grid-column: 1 / -1; padding-bottom: 11px; }
  .task-table td[data-label]::before, .account-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
  .task-table tbody tr, .account-table tbody tr { padding-top: 8px; padding-bottom: 8px; }
  .task-table td { padding-top: 4px; padding-bottom: 4px; }
  .task-table .task-title-cell { padding-bottom: 6px; }
  .task-title-link { font-size: 14px; min-height: 32px; display: block; }
  .date-value small { width: auto; }
  .pagination { padding: 16px 18px; justify-content: center; }
  .pagination-summary { width: 100%; text-align: center; }
  .task-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
  .task-description, .history-list { padding: 20px; }
  .task-description { font-size: 13px; }
  .editor-form { padding: 22px 20px; }
  .form-fields { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .form-panel { max-width: none; }
  .role-guide { padding: 21px; }
  .role-guide dl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .main-content--guest { padding: 28px 20px; }
  .login-layout { grid-template-columns: minmax(0, 1fr); max-width: 470px; gap: 26px; margin: 8px auto 15px; }
  .login-intro .eyebrow { margin-bottom: 12px; }
  .login-intro h1 { font-size: 27px; line-height: 1.4; }
  .login-description { margin-top: 12px; font-size: 13px; }
  .desktop-break, .login-features { display: none; }
  .login-panel { padding: 27px 25px; }
  .login-panel-heading h2 { font-size: 23px; }
  .result-panel { margin: 15px auto; padding: 40px 23px; }
  .result-panel h1 { font-size: 22px; }
}
@media (max-width: 440px) {
  .topbar-context { flex: 1; justify-content: flex-end; }
  .user-identity { order: 2; }
  .logout-form { order: 3; }
  .topbar:has(.user-identity) .brand { align-self: flex-start; margin-top: 2px; }
  .topbar:has(.user-identity) .topbar-context { max-width: 205px; gap: 8px 13px; }
  .topbar:has(.user-identity) .theme-control { width: 100%; text-align: right; }
  .main-content { padding-left: 14px; padding-right: 14px; }
  .main-content--guest { padding-left: 18px; padding-right: 18px; }
  .page-heading .button { min-height: 38px; }
  .filter-form { gap: 12px 10px; }
  .filter-actions { gap: 10px; }
  .scope-link { padding-left: 12px; padding-right: 12px; }
  .login-panel { padding: 24px 21px; }
  .role-guide dl { gap: 16px; }
}
@media (pointer: coarse) {
  .button, .nav-link, .scope-link, .topbar-button, .theme-control select { min-height: 44px; }
  .form-field input:not([type="hidden"]), .form-field select, .form-field textarea, .filter-field input, .filter-field select { font-size: 16px; min-height: 44px; }
  .filter-reset { display: inline-flex; min-height: 44px; align-items: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .nav-link, .scope-link { transition: background-color .12s ease, box-shadow .12s ease; }
}

/* Everyday work, reports and planning. */
.text-link { font-size: 12px; font-weight: 500; text-underline-offset: 4px; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.metric-link { display: block; color: var(--text); text-decoration: none; }
.metric-link:hover { border-color: var(--border-strong); }
.getting-started { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; padding: 15px 18px; border: 1px solid var(--border); border-radius: 9px; margin: -4px 0 22px; background: var(--surface); font-size: 12px; }
.getting-started-label { font-weight: 600; white-space: nowrap; }
.getting-started p { flex: 1; min-width: 230px; color: var(--muted); }
.getting-started a { color: var(--text); }
.dashboard-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 20px; }
.dashboard-wide { margin-top: 20px; }
.compact-list { display: grid; }
.compact-item { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: var(--list-block-padding) 22px; border-bottom: 1px solid var(--border); }
.compact-item:last-child { border-bottom: 0; }
.compact-item > div { min-width: 0; }
.compact-item > .button, .compact-item > .status-pill { flex-shrink: 0; }
.compact-meta { margin-top: 2px; color: var(--muted); font-size: 12px; }
.team-overview-row { display: flex; gap: 6px 14px; align-items: center; padding: var(--list-row-padding) 22px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.team-overview-row:last-child { border-bottom: 0; }
.team-overview-row:hover { background: var(--surface-secondary); }
.team-person { display: flex; align-items: center; gap: 9px; min-width: 100px; }
.team-person strong { font-size: 12px; overflow-wrap: anywhere; }
.team-stats { margin-left: auto; display: flex; flex-wrap: wrap; gap: 7px 13px; font-size: 11px; color: var(--muted); }
.team-stats b { font-weight: 600; color: var(--text); margin-left: 3px; }
.attention-text::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: 4px; vertical-align: middle; background: var(--accent); }
.status-pill[data-status="review_pending"] { background: var(--accent-soft); }
.status-pill[data-status="review_pending"] .status-dot { background: var(--accent); }
.status-pill[data-status="done"] .status-dot { background: var(--text); }
.private-label { display: inline-block; font-size: 11px; padding: 2px 7px; border: 1px dashed var(--border-strong); border-radius: 5px; background: var(--surface-secondary); color: var(--text); white-space: nowrap; }
.task-title-cell > .private-label { margin-top: 4px; }
.task-next-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; padding: 19px 22px; margin: 0 0 22px; }
.task-next-step strong { font-size: 14px; }
.task-next-step p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.history-collapsible > summary { cursor: pointer; padding: var(--list-block-padding) 22px; font-size: 13px; font-weight: 600; }
.history-collapsible > summary span { margin-left: 12px; font-size: 11px; color: var(--muted); font-weight: 400; }
.history-collapsible[open] > summary { border-bottom: 1px solid var(--border); }
.report-card { padding: var(--list-block-padding) 22px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; scroll-margin-top: 20px; }
.report-card:last-child { border-bottom: 0; }
.report-card-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.report-card-heading .heading-badges { gap: 8px; }
.report-type { display: inline-block; font-size: 11px; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: 5px; white-space: nowrap; color: var(--text); }
.report-type[data-kind="completion"] { border-left: 3px solid var(--accent); }
.review-result { font-size: 11px; color: var(--muted); }
.review-result[data-decision="changes"] { color: var(--text); border-bottom: 1px solid var(--accent); }
.report-task-title { margin-top: 8px; font-size: 16px; }
.report-byline { margin-top: 5px; color: var(--muted); font-size: 11px; }
.report-content { font-size: 14px; line-height: 1.9; padding: 8px 0 3px; white-space: normal; }
.review-note { margin-top: 10px; padding: 10px 14px; background: var(--surface-secondary); border-left: 2px solid var(--border-strong); border-radius: 0 7px 7px 0; font-size: 13px; }
.review-note-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.review-note-heading strong { font-size: 12px; }
.review-note-heading time { color: var(--muted); font-size: 11px; }
.snapshot-details { margin-top: 10px; font-size: 12px; }
.snapshot-details summary { cursor: pointer; color: var(--muted); padding: 5px 0; }
.snapshot-content { padding: 14px 16px; margin-top: 9px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 7px; }
.snapshot-content .field-help { margin-top: 0; }
.snapshot-content dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 14px 0 0; }
.snapshot-content dt { color: var(--muted); margin-bottom: 4px; font-size: 11px; }
.snapshot-content dd { margin: 0; }
.snapshot-description { grid-column: 1 / -1; }
.selected-task { padding: 22px 26px; border-bottom: 1px solid var(--border); background: var(--surface-secondary); }
.selected-task h2 { margin: 5px 0 7px; font-size: 17px; overflow-wrap: anywhere; }
.selected-task p { color: var(--muted); font-size: 12px; }
.submission-note { margin-top: 24px; padding: 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-secondary); font-size: 12px; line-height: 1.8; }
.submission-note strong { display: block; margin-bottom: 5px; }
.submission-note p { color: var(--muted); }
.review-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 20px; align-items: start; }
.review-form-panel .form-fields { grid-template-columns: minmax(0,1fr); }
.report-filter-form { display: grid; grid-template-columns: minmax(180px,1fr) 180px auto; gap: 14px; padding: 5px 22px 22px; align-items: end; border-bottom: 1px solid var(--border); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 20px 22px; }
.calendar-month-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.calendar-month-nav h2 { font-size: 20px; font-variant-numeric: tabular-nums; }
.calendar-month-nav > .text-link { margin-left: 4px; }
.calendar-month-nav > .button { min-width: 34px; font-size: 17px; }
.calendar-filter { display: flex; gap: 9px; align-items: end; }
.calendar-filter label { display: block; }
.calendar-filter .filter-field { min-width: 150px; }
.month-grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.month-grid th { text-align: center; padding: 11px 3px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--surface-secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.month-grid th:last-child { color: var(--text); }
.month-cell { padding: 0; height: 112px; vertical-align: top; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.month-cell:last-child { border-right: 0; }
.day-select { display: block; height: 100%; min-height: 112px; padding: 10px 11px; text-decoration: none; color: var(--text); overflow: hidden; }
a.day-select:hover { background: var(--surface-secondary); }
.day-select:focus-visible { outline-offset: -3px; }
.day-number { display: inline-grid; place-items: center; min-width: 24px; height: 24px; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.day-count { float: right; font-size: 11px; line-height: 24px; color: var(--muted); }
.day-titles { display: grid; gap: 3px; margin-top: 6px; }
.day-titles > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; padding-left: 5px; border-left: 2px solid var(--border-strong); line-height: 1.6; }
.day-titles small { color: var(--muted); font-size: 11px; }
.outside-month .day-select { background: var(--surface-secondary); }
.outside-month .day-number, .outside-month .day-titles { color: var(--muted); }
.is-today .day-number { border-radius: 50%; background: var(--accent); color: #FFFFFF; }
.is-selected .day-select { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.calendar-footnote { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 13px 18px; font-size: 11px; color: var(--muted); }
.calendar-footnote > span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-footnote i { display: inline-block; width: 10px; height: 10px; }
.legend-today { background: var(--accent); border-radius: 50%; }
.legend-selected { border: 2px solid var(--accent); }
.selected-day-panel { margin-top: 20px; scroll-margin-top: 18px; }
.week-navigation { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.week-navigation strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.weekly-brief { margin-bottom: 20px; }
.weekly-brief .section-note { margin-top: 4px; }
.brief-content { padding: 22px; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.weekly-table-scroll { overflow-x: auto; }
.weekly-table { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; text-align: left; }
.weekly-table th, .weekly-table td { padding: var(--list-block-padding) 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: top; }
.weekly-table tr:last-child > * { border-bottom: 0; }
.weekly-table tr > *:last-child { border-right: 0; }
.weekly-table thead th { background: var(--surface-secondary); font-size: 13px; font-weight: 600; }
.weekly-table thead th:first-child { width: 135px; }
.weekly-table thead th span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); font-weight: 400; }
.weekly-table tbody th { background: var(--surface-secondary); font-weight: 400; }
.weekly-owner { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.weekly-role { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.weekly-table .self-label { margin: 7px 0 0; }
.weekly-plan-item + .weekly-plan-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.weekly-plan-heading { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.weekly-plan-heading .text-link { flex-shrink: 0; font-size: 11px; }
.weekly-plan-meta { display: flex; align-items: center; gap: 7px 10px; flex-wrap: wrap; margin-top: 5px; font-size: 11px; color: var(--muted); }
.weekly-plan-note { margin-top: 6px; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.weekly-empty { color: var(--muted); font-size: 12px; }
.weekly-export-note { color: var(--muted-on-bg); font-size: 11px; margin-top: 14px; }
.print-report-heading { display: none; }
.copy-feedback { font-size: 12px; margin-bottom: 12px; }
.copy-feedback:empty { display: none; }
.copy-fallback { padding: 20px; margin-bottom: 20px; }
.copy-fallback label { display: block; font-size: 13px; margin-bottom: 10px; }
.copy-fallback textarea { width: 100%; padding: 12px; margin-bottom: 10px; font-size: 12px; }
.copy-fallback[hidden] { display: none; }
.plan-remove { max-width: 880px; margin-top: 25px; padding: 0 5px; font-size: 12px; }
.plan-remove summary { color: var(--muted-on-bg); cursor: pointer; }
.plan-remove p { margin: 12px 0; color: var(--muted-on-bg); }
@media (max-width: 1200px) { .team-overview-row { flex-wrap: wrap; } .team-stats { margin-left: 0; } }
@media (max-width: 1000px) { .dashboard-columns, .review-layout { grid-template-columns: minmax(0,1fr); } .day-select { padding: 8px; } .day-count { float: none; display: block; line-height: 18px; } .day-titles { margin-top: 3px; } }
@media (max-width: 760px) {
  .main-nav { flex-wrap: nowrap; overflow-x: auto; padding: 3px; }
  .nav-link { flex: 0 0 auto; }
  .getting-started { padding: 15px; gap: 8px; }
  .getting-started p { flex-basis: 100%; }
  .getting-started p > span { display: none; }
  .getting-started p > a { display: block; margin-top: 3px; }
  .compact-item { padding: var(--list-block-padding) 18px; }
  .team-overview-row { padding: var(--list-row-padding) 18px; }
  .task-next-step { padding: 18px; gap: 16px; }
  .task-next-step .page-actions { width: 100%; }
  .report-card { padding: var(--list-block-padding) 18px; }
  .report-content { font-size: 13px; }
  .report-filter-form { grid-template-columns: minmax(0,1fr) auto; padding: 5px 18px 18px; }
  .report-filter-form > .filter-field:first-of-type { grid-column: 1 / -1; }
  .snapshot-content dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .snapshot-content dl > div:first-child { grid-column: 1 / -1; }
  .selected-task { padding: 20px; }
  .history-collapsible > summary span { display: block; margin: 5px 0 0; }
  .calendar-toolbar { padding: 18px 14px; gap: 16px; }
  .calendar-month-nav { gap: 9px; }
  .calendar-month-nav h2 { font-size: 17px; }
  .calendar-filter { flex: 1; justify-content: flex-end; }
  .calendar-filter .filter-field { min-width: 120px; }
  .month-cell { height: 74px; }
  .day-select { min-height: 74px; padding: 7px 3px; text-align: center; }
  .day-number { font-size: 12px; }
  .day-count { font-size: 11px; margin-top: 5px; }
  .day-titles { display: none; }
  .calendar-footnote { padding: 12px 14px; }
  .calendar-footnote > span:last-child { flex-basis: 100%; }
  .week-navigation { gap: 10px; }
  .week-navigation .section-note { width: 100%; }
  .weekly-table th, .weekly-table td { padding: var(--list-block-padding) 18px; }
  .brief-content { padding: 19px; font-size: 13px; }
}
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  :root, :root[data-theme] { color-scheme: light; --text: #14181F; --muted: #5F6673; --muted-on-bg: #5F6673; --surface: #FFFFFF; --surface-secondary: #F7F8FA; --border: #D6DAE0; --border-strong: #A4ADBA; }
  body { background: #FFFFFF; color: #14181F; font-size: 10pt; }
  .topbar, .sidebar, .skip-link, .no-print, .messages { display: none !important; }
  .app-layout, .main-content { display: block; width: 100%; max-width: none; padding: 0; min-height: 0; margin: 0; }
  .print-report-heading { display: block; margin-bottom: 7mm; }
  .print-report-heading h2 { font-size: 19pt; margin: 2mm 0; }
  .print-report-heading p { font-size: 10pt; }
  .panel { box-shadow: none; border-radius: 0; overflow: visible; }
  .weekly-brief { break-inside: avoid; margin-bottom: 5mm; }
  .weekly-brief .section-heading { padding: 3mm 4mm; }
  .brief-content { padding: 4mm; font-size: 10pt; }
  .weekly-table-scroll { overflow: visible; }
  .weekly-table { min-width: 0; font-size: 9pt; }
  .weekly-table thead { display: table-header-group; }
  .weekly-table thead th:first-child { width: 25mm; }
  .weekly-table th, .weekly-table td { padding: 4mm; }
  .weekly-table tr { break-inside: avoid; }
  .weekly-plan-item { break-inside: avoid; }
  .weekly-plan-note { font-size: 9pt; }
  a { text-decoration: none; }
  .weekly-plan-heading .task-title-link { font-size: 10pt; }
  .weekly-export-note { font-size: 8pt; }
  .status-pill, .private-label { color: #14181F; border: 1px solid #A4ADBA; }
}
.active-filter { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 22px; background: var(--surface-secondary); font-size: 12px; border-bottom: 1px solid var(--border); }
.form-field fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.form-field legend { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; font-size: 13px; font-weight: 500; padding: 0; }
.form-field fieldset label { display: flex; align-items: center; min-height: 40px; font-size: 13px; }
.form-field input[type="radio"], .form-field input[type="checkbox"] { width: 17px; height: 17px; min-height: 17px; padding: 0; margin: 0 9px 0 0; flex-shrink: 0; }
@media (pointer: coarse) { .form-field fieldset label { min-height: 44px; } }
/* Compact, textual alternatives accompany every status visualization. */
.status-bar { display:flex; height:6px; overflow:hidden; border-radius:4px; background:var(--border); }
.status-bar [data-state="todo"] { background:#A4ADBA; }
.status-bar [data-state="in_progress"] { background:#E0202E; }
.status-bar [data-state="review_pending"] { background:#6B7280; }
.status-bar [data-state="done"] { background:var(--text); }
.member-status { flex:1; min-width:180px; }
.team-person { text-decoration:none; }
.status-legend { display:flex; gap:4px 12px; flex-wrap:wrap; margin-top:5px; font-size:11px; color:var(--muted); }
.status-legend a { text-decoration:none; padding:2px 0; }
.status-legend a:hover, .status-legend a[aria-current] { text-decoration:underline; color:var(--text); }
.status-legend b { color:var(--text); }
.overdue-link { font-size:11px; white-space:nowrap; }
.weekly-visual { padding:12px 20px; margin-bottom:16px; }
.weekly-visual-heading { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:9px; }
.weekly-visual .field-help { margin-top:6px; }
.workflow-steps { display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; padding:12px 16px; margin:0 0 16px; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.workflow-steps li { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.workflow-steps li > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--surface-secondary); }
.workflow-steps .is-current { color:var(--text); font-weight:600; }
.workflow-steps .is-current > span { background:#E0202E; color:#FFFFFF; }
.workflow-steps small { font-size:10px; }
@media (max-width:760px) { .member-status { flex-basis:100%; order:3; } .overdue-link { margin-left:auto; } }
@media (pointer:coarse) { .status-legend a, .overdue-link { min-height:32px; display:inline-flex; align-items:center; } }

.status-legend a[data-state]::before { content:""; display:inline-block; width:6px; height:6px; margin-right:5px; background:#A4ADBA; border-radius:2px; }
.status-legend a[data-state="in_progress"]::before { background:#E0202E; }
.status-legend a[data-state="review_pending"]::before { background:#6B7280; }
.status-legend a[data-state="done"]::before { background:var(--text); }

.activity-editor { padding:16px 22px; margin-bottom:20px; }
.activity-editor h2 { font-size:14px; margin-bottom:12px; }
.activity-editor .button { margin-top:10px; }

.activity-editor .form-fields { grid-template-columns:minmax(140px, 1fr) minmax(240px, 3fr); gap:12px; }
.activity-editor .form-field--wide { grid-column:auto; }
.activity-editor textarea { min-height:88px; }
@media (max-width:760px) { .activity-editor .form-fields { grid-template-columns:1fr; } }

/* Concise navigation and summaries; preserve table DOM for export. */
.team-legend { padding:8px 22px; font-size:11px; color:var(--muted); border-bottom:1px solid var(--border); }
.team-legend span { float:right; }
.member-status .status-legend { flex-wrap:nowrap; justify-content:space-between; }
.member-status { min-width:130px; }
.settings-link { color:var(--text); text-decoration:none; font-size:13px; }
.settings-link span { color:var(--muted); font-size:12px; }
.dashboard-metrics .metric { padding-top:12px; padding-bottom:12px; }
.dashboard-metrics .metric-value { font-size:25px; margin:2px 0; }
#recovered-memo { display:block; width:100%; min-height:100px; margin:10px 0; }
@media screen and (max-width:760px) {
 .weekly-table { display:block; min-width:0; width:100%; }
 .weekly-table thead { display:none; }
 .weekly-table tbody { display:block; }
 .weekly-table tbody tr { display:block; border-bottom:2px solid var(--border-strong); }
 .weekly-table tbody th, .weekly-table tbody td { display:block; width:100%; border-right:0; }
 .weekly-table tbody th { display:flex; align-items:center; gap:8px; }
 .weekly-table .weekly-role, .weekly-table .self-label { margin:0; }
 .weekly-table td[data-week-label]::before { content:attr(data-week-label); display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
 .weekly-table-scroll { overflow:visible; }
}

/* Dashboard headline colors; the brand red remains identical in both themes. */
.dashboard-metrics .metric-label { display:inline-block; font-weight:700; padding:2px 6px; border-radius:4px; }
.dashboard-metrics [data-metric="open"] { color:light-dark(#2563EB, #93C5FD); background:light-dark(#EFF6FF, #172B46); }
.dashboard-metrics [data-metric="overdue"] { color:#E0202E; background:#FFFFFF; }
.dashboard-metrics [data-metric="review"] { color:light-dark(#92400E, #FCD34D); background:light-dark(#FFFBEB, #332A17); }
.dashboard-metrics [data-metric="done"] { color:light-dark(#15803D, #86EFAC); background:light-dark(#F0FDF4, #173025); }

/* Signed-in result pages follow the same sidebar-aligned content edge. */
.app-layout:not(.app-layout--guest) .result-panel { margin-left:0; margin-right:0; }

.reverse-action { margin:0 0 18px; font-size:12px; color:var(--muted); }

/* Shared instruction marker: same brand red in light and dark themes. */
.manager-directed-label { display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px 8px; border-radius: 5px; background: var(--accent); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }

/* Align the outer badges as well as the text inside each badge. */
.task-badge-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; vertical-align: middle; }
.status-pill, .manager-directed-label, .private-label, .priority-label, .read-only-label, .role-pill { vertical-align: middle; }
.task-badge-group > .status-pill, .task-badge-group > .manager-directed-label { min-height: 24px; box-sizing: border-box; padding: 3px 8px; justify-content: center; }
.form-field > .checkbox-label { align-items: center; min-height: 24px; }
@media print {
  .manager-directed-label { background: #FFFFFF; color: #14181F; border: 1px solid #A4ADBA; }
}

.task-category { font-size: 1.16em; font-weight: 700; color: light-dark(#2459A6, #9AC3FF); overflow-wrap: anywhere; }

.weekly-plan-heading { align-items: flex-start; gap: 8px; }
.weekly-plan-title-date { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.weekly-plan-title-date .task-title-link { min-width: 0; overflow-wrap: anywhere; }
.weekly-plan-due { color: var(--muted); font-size: 11px; white-space: nowrap; }
.weekly-plan-status { margin-left: auto; flex-shrink: 0; }
.weekly-plan-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.weekly-plan-footer > .text-link { margin-left: auto; font-size: 11px; }
@media print { .task-category { color: #2459A6; } }

/* Keep category and title in one text flow, including narrow weekly cells. */
.task-category { display: inline; }
.task-editor-form .form-fields { gap: 18px 20px; }
.task-editor-form .form-actions { margin-top: 22px; }

.task-editor-form textarea[name="description"] { min-height: 132px; }

/* Readable text with compact spacing. Screen-only to preserve print sizing. */
@media screen {
 body { font-size:15px; line-height:1.5; }
 :root { --list-row-padding:7px; --list-block-padding:9px; }
 .main-content { padding-top:20px; padding-bottom:28px; }
 .page-heading { margin-bottom:16px; gap:12px; }
 .page-description { font-size:14px; margin-top:5px; }
 .section-heading { padding:10px 16px; }
 .section-heading h2, .weekly-owner { font-size:15px; }
 .task-title-link { font-size:15px; line-height:1.5; }
 .task-table td, .account-table td { font-size:14px; }
 .compact-item { padding:9px 16px; }
 .compact-meta, .field-help, .section-note, .weekly-role, .weekly-empty, .weekly-plan-due { font-size:13px; }
 .status-pill, .manager-directed-label, .private-label, .priority-label { font-size:12px; }
 .weekly-plan-note { font-size:14px; line-height:1.55; margin-top:4px; }
 .weekly-table th, .weekly-table td { padding:9px 12px; }
 .weekly-plan-item + .weekly-plan-item { margin-top:8px; padding-top:8px; }
 .brief-content, .panel-empty { padding:14px 16px; }
 .weekly-brief, .week-navigation { margin-bottom:12px; }
 .weekly-visual { padding:12px 16px; }
 .task-description { min-height:0; padding:16px; font-size:15px; line-height:1.6; }
 .editor-form { padding:18px; }
 .form-fields, .task-editor-form .form-fields { gap:14px 16px; }
 .form-field > label, .form-field legend { font-size:14px; margin-bottom:5px; }
 .form-field textarea { min-height:120px; }
 .form-field input:not([type="hidden"]), .form-field select, .form-field textarea { font-size:15px; padding:7px 9px; }
 .form-field input[type="checkbox"], .form-field input[type="radio"] { padding:0; }
 .task-editor-form textarea[name="description"] { min-height:110px; }
 .form-actions { margin-top:18px; padding-top:14px; gap:8px; }
 .nav-link { font-size:14px; }
 .month-grid .current-week { background:var(--accent-soft); }
 .month-cell .day-select { min-height:88px; }
 .day-titles > span { font-size:12px; }
}
.private-align-right { justify-content:flex-end; }
@media screen and (max-width:760px) {
 .form-field input:not([type="hidden"]), .form-field select, .form-field textarea { font-size:16px; }
 .calendar-month-nav { gap:8px; flex-wrap:wrap; }
 .month-cell .day-select { min-height:66px; }
}

.weekly-more { margin-top:8px; }
.weekly-more > summary { width:fit-content; margin-left:auto; cursor:pointer; color:var(--text); background:var(--surface-secondary); border:1px solid var(--border-strong); border-radius:5px; padding:5px 9px; font-size:13px; list-style:none; }
.weekly-more > summary::-webkit-details-marker { display:none; }
.weekly-more .when-open, .weekly-more[open] .when-closed { display:none; }
.weekly-more[open] .when-open { display:inline; }
.weekly-more-content { border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
@media print { .weekly-more > summary { display:none; } .weekly-more-content { display:block!important; } }

@media screen { .month-cell { height:92px; } .day-number { font-size:14px; } }
@media screen and (max-width:760px) { .month-cell { height:66px; } }
.report-card-heading .heading-badges { flex:1; }
.report-card-heading .private-label { margin-left:auto; }

.month-grid .current-week .month-cell:not(.is-selected) { background:var(--accent-soft); }

#task-card-dialog { width:min(820px,calc(100% - 28px)); max-height:88dvh; padding:0; border:1px solid var(--border-strong); border-radius:12px; background:var(--app-bg); color:var(--text); overflow:auto; }
#task-card-dialog::backdrop { background:rgb(0 0 0 / 45%); }
.task-card-toolbar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
[data-task-card-content] { padding:18px; }
.task-card-heading { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.task-card-heading h2 { flex:1; min-width:180px; font-size:20px; overflow-wrap:anywhere; }
.card-facts { color:var(--muted); font-size:14px; margin:8px 0 14px; }
.card-description { padding:14px; background:var(--surface); border:1px solid var(--border); border-radius:8px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; margin-bottom:14px; }
.manager-comments { margin:14px 0; }
.manager-comment { padding:10px 16px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.comment-byline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:5px; font-size:13px; }
.comment-byline time { color:var(--muted); }
.comment-byline .private-label { margin-left:auto; }
.comment-editor { padding:12px 16px; }
.comment-editor > label { display:block; margin-bottom:5px; font-weight:600; }
.comment-editor textarea { width:100%; min-height:88px; padding:9px; font:inherit; }
.comment-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:8px 0; }
.comment-actions label { display:flex; gap:6px; align-items:center; font-size:14px; }
.card-history { margin:12px 0; }
.card-history > summary { cursor:pointer; font-weight:600; padding:8px 0; }

/* A defined outer frame; inner grid lines stay light and quiet. */
@media screen {
 .weekly-table-panel, .team-progress-panel, .calendar-panel, .task-list-panel { border:2px solid light-dark(#8B98AA, #64748B); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgb(15 23 42 / 6%); }
}

.settings-section { margin-bottom:12px; }
.settings-section > summary { display:flex; align-items:center; gap:14px; cursor:pointer; padding:15px 18px; list-style:none; }
.settings-section > summary::after, .settings-account > summary::after { content:"＋"; margin-left:auto; flex-shrink:0; }
.settings-section[open] > summary::after, .settings-account[open] > summary::after { content:"−"; }
.settings-section > summary span { color:var(--muted); font-size:14px; }
.settings-section[open] > summary { border-bottom:1px solid var(--border); }
.settings-section-content { padding:16px 18px; }
.settings-password-form { max-width:650px; }
.settings-password-form .form-fields { grid-template-columns:1fr; }
.settings-password-form > .button, .settings-account-form > .button { margin-top:14px; }
.settings-account { border-bottom:1px solid var(--border); }
.settings-account > summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:12px 0; cursor:pointer; list-style:none; }
.settings-account > summary strong { min-width:120px; }
.settings-account > summary > span { font-size:14px; color:var(--muted); }
.settings-account-form { padding:12px; background:var(--surface-secondary); border:1px solid var(--border); border-radius:8px; margin-bottom:12px; }
.settings-account-form .form-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-new-account { margin-top:14px; }
.settings-new-account > summary { cursor:pointer; font-weight:600; padding:8px 0; }
.settings-section summary::-webkit-details-marker { display:none; }
@media(max-width:760px) { .settings-account-form .form-fields { grid-template-columns:1fr; } .settings-section > summary { flex-wrap:wrap; gap:5px 12px; } .settings-section-content { padding:12px; } }

.settings-new-account .form-field:nth-child(3) { grid-column:1 / -1; }
.settings-account > summary > strong, .settings-account > summary > span { overflow-wrap:anywhere; min-width:0; }

/* Inbox: compact, keyboard-accessible and shared by all roles. */
.notification-menu { position:relative; }
.notification-menu > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.notification-menu > summary::-webkit-details-marker { display:none; }
.notification-count { border-radius:12px; background:#E0202E; color:#fff; min-width:21px; padding:1px 5px; font-size:12px; text-align:center; font-weight:700; }
.notification-popover { position:absolute; right:0; top:calc(100% + 12px); width:410px; max-height:70vh; overflow:auto; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface); color:var(--text); box-shadow:0 12px 32px rgb(0 0 0 / 18%); z-index:60; }
.notification-popover .section-heading { padding:12px 14px; }
.notification-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.notification-item:last-child { border-bottom:0; }
.notification-item.is-unread { border-left:3px solid #E0202E; background:var(--surface-secondary); padding-left:13px; }
.notification-copy { flex:1; min-width:0; }
.notification-task-link { display:block; color:inherit; text-decoration:none; }
.notification-task-link:hover .notification-title { text-decoration:underline; }
.notification-kind { display:block; font-size:13px; color:var(--muted); margin-bottom:3px; }
.notification-title { display:block; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.notification-meta { margin:4px 0 0; color:var(--muted); font-size:12px; }
.notification-read-form { flex-shrink:0; }
.notification-refresh { padding:10px 14px; margin:0; font-size:13px; }
.notification-inbox { overflow:hidden; }
@media(max-width:760px) { .notification-popover { position:fixed; top:var(--notification-top, 110px); right:12px; left:12px; width:auto; max-height:65vh; } .notification-item { padding:10px 12px; gap:8px; } .notification-item.is-unread { padding-left:9px; } }

.push-device-controls { margin-bottom:16px; }
.push-device-controls .button-row { display:flex; flex-wrap:wrap; gap:8px; }

.mobile-test-notice { flex-direction:column; gap:3px; margin-bottom:12px; }
.push-device-controls button:disabled { opacity:.5; cursor:not-allowed; }

.card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:0 0 12px; }

/* Header controls: a single identity line and a touch-friendly theme switch. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; height:44px; padding:10px; border:1px solid var(--chrome-border); border-radius:9px; background:var(--chrome-active); color:var(--chrome-text); }
.theme-toggle:hover { border-color:var(--chrome-muted); }
.theme-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle [data-theme-icon="light"] { display:none; }
.user-identity { flex-shrink:0; }
.user-summary { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.user-role { flex-shrink:0; padding-left:7px; border-left:1px solid var(--chrome-border); line-height:1.2; }
@media (max-width:440px) {
  .topbar:has(.user-identity) .topbar-context { max-width:none; gap:4px 10px; }
  .topbar:has(.user-identity) .brand { align-self:center; margin-top:0; }
}

/* Strongly separated task scopes; selection stays obvious in both themes. */
.task-search-panel .scope-switch { gap:6px; padding:5px; border:2px solid var(--border-strong); background:var(--surface); }
.task-search-panel .scope-link { min-height:38px; border:2px solid var(--border-strong); color:var(--text); background:var(--surface-secondary); font-weight:600; }
.task-search-panel .scope-link:hover { border-color:var(--accent); }
.task-search-panel .scope-link.is-active { border-color:var(--accent); background:var(--accent); color:#FFFFFF; box-shadow:none; font-weight:700; }
.task-search-panel .scope-link span { padding:0 5px; border-radius:4px; background:light-dark(rgb(0 0 0 / 6%),rgb(255 255 255 / 9%)); }
.task-search-panel .scope-link.is-active span { background:rgb(255 255 255 / 18%); }
.task-delete-link { margin-left:auto; }
@media (pointer:coarse) { .task-search-panel .scope-link { min-height:44px; } }

.settings-password-reset { margin:0 12px 12px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px; }
.settings-password-reset > summary { cursor:pointer; font-weight:600; }

.task-state-pair { display:inline-flex; align-items:center; flex-wrap:nowrap; gap:6px; white-space:nowrap; }
.task-state-pair > .status-pill, .task-state-pair > .manager-directed-label { min-height:24px; padding:3px 8px; justify-content:center; }
@media (min-width:761px) { .task-table th:first-child { width:auto; } .task-table th:nth-child(4) { width:210px; } }
@media (max-width:760px) { .task-table td[data-label="상태"] { grid-column:1 / -1; } }