/* 관리자 테이블 페이지(table.html — 주소 /table, 페이지 이름 '테이블') 전용. 다른 페이지 CSS와 독립.
   생김새는 메모·계획 회복·원장처럼 타임시트와 한 집안(2026-10-28 펭귄 지시 — 첫 판의 노션 회색·파랑을 걷음): 남색 기운 회색 바탕 위
   흰 카드, 로고 남색 + 금 강조(금은 늘 남색과 함께, DESIGN.md Brand accents), 표는 타임시트 시트처럼 머리 띠가 있는 둥근 상자.
   토큰은 원장(styles/ledger.css)과 같은 값이다. 표의 짜임(열 머리 속성 그림·칸 팝오버·옆 패널)은 노션식 그대로다.
   Pr 태그만 빨강 단계(2026-10-28 펭귄 지시 — 빨강 한 색, 순위가 낮을수록 옅게). 다크 모드 없음(다른 페이지와 같다). */

.work-page {
    --app-bg: #f0f2f4;
    --surface: #ffffff;
    --border: #e5e9ed;
    --border-soft: #eef1f4;
    --border-strong: #cfd6dd;
    --quiet-border: #d6dbe1;
    --menu-border: #e3e7e9;
    --text: #1e293b;
    --text-strong: #0f172a;
    --text-muted: #64748b;
    --text-faint: #94a3b8;
    --ink-navy: #14254a;
    --primary: #163a6e;
    --primary-top: #1c4278;
    --primary-hover: #0f2c57;
    --primary-press: #082043;
    --primary-soft: #f2f4f8;
    --ivory: #fffdf8;
    --ivory-warm: #fffaf0;
    --gold: #b88f3e;
    --gold-light: #e8cf8e;
    --gold-foil: linear-gradient(135deg, #f0dca6, #b88f3e 45%, #e8cf8e);
    --gold-soft: rgba(217, 189, 130, 0.7);
    --gold-hover: rgba(184, 143, 62, 0.55);
    --gold-ring: rgba(184, 143, 62, 0.35);
    --danger: #dc2626;
    --danger-strong: #b91c1c;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --success-strong: #1e874b;
    --success-tint: rgba(39, 174, 96, 0.12);
    --row-hover: #f7f8fa;
    --sheet-head: linear-gradient(180deg, #fafbfb, #ebeef1);
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-card: 0 1px 2px rgba(8, 28, 52, 0.04), 0 10px 30px rgba(8, 28, 52, 0.07);
    --shadow-menu: 0 14px 30px rgba(8, 28, 52, 0.16), 0 2px 6px rgba(8, 28, 52, 0.06);
    --shadow-peek: -8px 0 32px rgba(8, 28, 52, 0.12);
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #163a6e;

    /* Pr.1~Pr.10: 빨강 한 색, 순위가 낮을수록 옅게(2026-10-28 펭귄 지시 — 노션 옵션 열 색 대신).
       OKLCH 색상각 27°에서 밝기 0.50 → 0.96, 채도 0.20 → 0.02. 진한 두 단은 흰 글씨, 그 아래는 바탕과 함께 옅어지는
       붉은 글씨(모든 단 대비 4.5 이상). */
    --pr-1-bg: #bb0916;
    --pr-1-fg: #ffffff;
    --pr-2-bg: #c23f38;
    --pr-2-fg: #ffffff;
    --pr-3-bg: #d7645a;
    --pr-3-fg: #400000;
    --pr-4-bg: #df7b70;
    --pr-4-fg: #580a0a;
    --pr-5-bg: #e79086;
    --pr-5-fg: #611412;
    --pr-6-bg: #eda39a;
    --pr-6-fg: #6a1d19;
    --pr-7-bg: #f2b6ae;
    --pr-7-fg: #732621;
    --pr-8-bg: #f8c9c3;
    --pr-8-fg: #7c2e28;
    --pr-9-bg: #fddcd7;
    --pr-9-fg: #853630;
    --pr-10-bg: #ffedeb;
    --pr-10-fg: #8e3e38;

    color-scheme: light;
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg);
    color: var(--text);
    font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.work-page *,
.work-page *::before,
.work-page *::after {
    box-sizing: border-box;
}

.work-page :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---- 로딩 / 오류 / 게이트 ---- */

.work-loading {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text-muted);
}

.work-loading[hidden],
html.tt-work-guest .work-loading,
html.tt-work-fatal .work-loading,
html.tt-work-denied .work-loading {
    display: none;
}

.work-fatal,
.work-auth-gate,
.work-denied {
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 24px;
    text-align: center;
}

.work-fatal {
    display: grid;
}

.work-fatal[hidden] {
    display: none;
}

.work-auth-gate,
.work-denied {
    display: none;
}

.work-fatal h1,
.work-auth-gate h1,
.work-denied h1 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--text-strong);
}

.work-fatal p,
.work-auth-gate p,
.work-denied p {
    margin: 0 0 20px;
    max-width: 34em;
    color: var(--text-muted);
}

/* pre-paint에는 tt-work-guest(boot/work-guard.js), 이후엔 work/work-app.js가 클래스를 소유한다. */
html.tt-work-guest .work-auth-gate {
    display: grid;
}

html.tt-work-guest .work-fatal,
html.tt-work-denied .work-fatal,
html.tt-work-denied .work-auth-gate {
    display: none;
}

html.tt-work-denied .work-denied {
    display: grid;
}

html.tt-work-guest .work-shell,
html.tt-work-fatal .work-shell,
html.tt-work-denied .work-shell,
html.tt-work-guest .work-detail,
html.tt-work-fatal .work-detail,
html.tt-work-denied .work-detail,
html.tt-work-fatal .work-auth-gate,
html.tt-work-fatal .work-denied {
    display: none !important;
}

/* 게이트 단추만 금박(로그인·안내 화면 CTA — DESIGN.md: 금박은 게이트에만). */
.work-auth-gate-login,
.work-fatal-home,
.work-denied-home {
    display: inline-block;
    padding: 11px 22px;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(180deg, var(--primary-top), var(--primary-hover)) padding-box,
        var(--gold-foil) border-box;
    box-shadow: inset 0 0 0 2px var(--primary-hover), inset 0 0 0 3px var(--gold-soft);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
}

/* ---- 페이지: 회색 바탕 위 흰 카드(원장·타임시트와 같은 판) ---- */

.work-shell[hidden] {
    display: none;
}

.work-main {
    max-width: 1200px;
    margin: 32px auto 64px;
    padding: 24px 28px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.work-shell[aria-busy="true"] .work-tables {
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.work-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* 계획 회복의 ⌂ 처음으로와 같은 조용한 단추. */
.work-home-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--quiet-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.work-home-link:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

.work-title {
    margin: 0;
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.work-save-state {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 13px;
}

.work-save-state.is-error {
    color: var(--danger);
    font-weight: 600;
}

.work-lede {
    margin: 14px 0 16px;
    color: var(--text-muted);
    font-size: 13.5px;
}

.work-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    color: #991b1b;
}

.work-banner[hidden] {
    display: none;
}

/* 조용한 단추(타임시트 .nav-btn과 같은 꼴): 흰 바탕 + 회색 테, 마우스 올림만 아이보리 + 옅은 금. */
.work-btn,
.work-icon-btn {
    padding: 7px 12px;
    border: 1px solid var(--quiet-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink-navy);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.work-btn:hover,
.work-icon-btn:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

.work-btn:active,
.work-icon-btn:active {
    background: #f6f0e2;
}

.work-btn[hidden] {
    display: none;
}

.work-icon-btn {
    min-width: 32px;
    padding: 4px 8px;
    font-size: 15px;
    letter-spacing: 0.04em;
}

.work-icon-btn[aria-expanded="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
}

/* 주 단추('오늘'과 같은 문법): 남색 몸체 + 금 ✦. */
.work-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--primary-hover);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--primary-top), var(--primary-hover));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.work-primary-btn:hover {
    background: linear-gradient(180deg, #24427f, #162d59);
}

.work-primary-btn:active {
    background: linear-gradient(180deg, #0c2650, var(--primary-press));
}

.work-spark {
    color: var(--gold-light);
    font-size: 12px;
}

.work-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 4px;
}

.work-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 13.5px;
    cursor: pointer;
    user-select: none;
}

.work-check input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}

/* 기간 선택: 계획 회복 활동 탭처럼 고르면 남색. */
.work-range {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.work-range-btn {
    padding: 7px 12px;
    border: 1px solid var(--quiet-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink-navy);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.work-range-btn:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

.work-range-btn[aria-pressed="true"] {
    border-color: var(--primary-hover);
    background: linear-gradient(180deg, var(--primary-top), var(--primary-hover));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
}

.work-note {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.work-note[hidden] {
    display: none;
}

/* 표가 없을 때: 점선 판 + 표 추가. */
.work-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 40px 20px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
    background: #fafbfc;
    text-align: center;
}

.work-empty[hidden] {
    display: none;
}

.work-empty-title {
    margin: 0;
    color: var(--ink-navy);
    font-size: 16px;
    font-weight: 700;
}

.work-empty-text {
    margin: 0 0 8px;
    max-width: 30em;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* 표 추가: 맨 아래 표 밑의 표 폭 점선 줄(2026-10-28 펭귄 지시 — 노션 '새로 만들기' 줄, 빈 상태 판·'＋ 새 행' 줄과 한 문법).
   남색 원 안의 금 ＋ — 남색과 금이 함께(DESIGN.md Brand accents). */
.work-add-table {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin-top: 16px;
    padding: 0 16px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
    background: #fafbfc;
    color: var(--ink-navy);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.work-add-table[hidden] {
    display: none;
}

.work-add-table:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

.work-add-table[aria-expanded="true"] {
    border-style: solid;
    border-color: var(--primary);
    background: var(--primary-soft);
}

.work-add-table-plus {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--primary-top), var(--primary-hover));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--gold-light);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.work-add-table-hint {
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

/* ---- 표(고른 카드 하나 = 표 하나) ---- */

.work-tables {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 20px;
}

.work-tables:empty {
    display: none;
}

/* 넓은 표는 표 안에서만 가로로 민다 — 페이지는 화면 폭을 넘지 않는다. */
.work-db {
    min-width: 0;
}

.work-db-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.work-db-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--ink-navy);
    font-size: 16px;
    font-weight: 700;
}

.work-db-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-db-icon {
    display: inline-flex;
    flex: none;
    color: var(--primary);
}

.work-db-icon svg {
    width: 17px;
    height: 17px;
}

.work-db-count {
    flex: none;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.work-db-menu {
    margin-left: auto;
}

.work-db-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(8, 28, 52, 0.04);
    -webkit-overflow-scrolling: touch;
}

.work-grid {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 머리 띠는 타임시트 시트 머리와 같다. */
.work-th {
    height: 38px;
    padding: 0 10px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid #d8dde2;
    background: var(--sheet-head);
    color: #38424c;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.work-th:last-child,
.work-cell:last-child {
    border-right: 0;
}

.work-th > * {
    vertical-align: middle;
}

.work-th-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    margin-right: 6px;
    color: #6b7785;
    font-size: 11px;
    font-weight: 700;
}

/* 열 순서: Pr(맨 왼쪽, 2026-10-28 펭귄 지시) · 이름 · 작업 기간 · 데드라인 · 상태 · 활동 기록. */
.work-th-priority {
    width: 84px;
}

.work-th-name {
    width: 30%;
}

.work-th-period,
.work-th-deadline {
    width: 15%;
}

.work-th-status {
    width: 118px;
}

.work-cell {
    height: 42px;
    padding: 0;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border);
    background: #fff;
    vertical-align: middle;
    overflow: hidden;
}

.work-row:hover .work-cell {
    background: var(--row-hover);
}

/* 열어 본(고른) 행: 타임시트 '지금 시각 행'처럼 왼쪽 남색 + 금 세로줄. */
.work-row.is-selected .work-cell {
    background: var(--primary-soft);
}

.work-row.is-selected .work-cell:first-child {
    box-shadow: inset 3px 0 0 var(--primary), inset 4px 0 0 var(--gold-hover);
}

.work-row.is-done .work-name-text {
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(22, 58, 110, 0.4);
}

.work-row.is-done .work-cell-prop,
.work-row.is-done .work-cell-activity {
    opacity: 0.6;
}

/* 이름 칸: 펼치기 ▸ · 칩 색 점 · 이름 · 마우스를 올리면 '열기'. */
.work-name {
    --indent: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding-left: calc(var(--depth, 0) * var(--indent));
    padding-right: 8px;
}

.work-toggle,
.work-toggle-spacer {
    flex: none;
    width: 22px;
    height: 22px;
    margin-left: 4px;
}

.work-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.work-toggle:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.work-toggle svg {
    transition: transform 0.12s ease;
}

.work-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.work-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(22, 58, 110, 0.22);
    border-radius: 50%;
    background: #fff;
}

.work-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-open {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--quiet-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-navy);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
}

.work-row:hover .work-open,
.work-open:focus-visible,
.work-row.is-selected .work-open {
    opacity: 1;
}

.work-open:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

/* 터치 기기에는 마우스 올림이 없으니 '열기'를 늘 보인다. */
@media (hover: none) {
    .work-open {
        opacity: 1;
    }
}

/* 속성 칸: 칸 전체가 단추 — 누르면 그 자리에 팝오버. */
.work-cell-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.work-cell-btn:hover {
    background: var(--ivory);
}

.work-cell-btn[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px var(--primary);
}

/* Pr 열은 태그를 가운데에(모든 태그가 같은 폭). */
.work-cell-priority .work-cell-btn {
    justify-content: center;
    padding: 0 6px;
}

.work-cell-activity {
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.work-cell-activity.has-records {
    color: var(--text);
}

.work-nowrap {
    white-space: nowrap;
}

.work-row-empty .work-cell {
    height: 48px;
    padding: 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}

/* 표 아래: ＋ 새 행(노션 '새로 만들기' 줄) · 개수. */
.work-add-row-cell {
    padding: 0;
    border-bottom: 1px solid var(--border);
}

.work-add-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    background: #fff;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.work-add-row:hover,
.work-add-row[aria-expanded="true"] {
    background: var(--ivory-warm);
    color: var(--ink-navy);
}

.work-add-row-plus {
    color: var(--gold);
    font-size: 15px;
    font-weight: 700;
}

.work-grid-foot {
    height: 34px;
    padding: 0 14px;
    background: #fafbfc;
    color: var(--text-muted);
    font-size: 12px;
}

.work-grid-foot-label {
    margin-right: 6px;
    letter-spacing: 0.04em;
}

.work-grid-foot-value {
    color: var(--ink-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- 태그(Pr) · 상태 · 날짜 ---- */

/* Pr 태그는 모두 같은 폭(2026-10-28 펭귄 지시 — 글자 폭대로면 Pr.1이 좁고 Pr.10이 넓었다): 고정 폭 + 가운데 + 고른 숫자 폭. */
.work-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 22px;
    padding: 0 4px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 22px;
    white-space: nowrap;
}

.work-tag[data-priority="1"] { background: var(--pr-1-bg); color: var(--pr-1-fg); }
.work-tag[data-priority="2"] { background: var(--pr-2-bg); color: var(--pr-2-fg); }
.work-tag[data-priority="3"] { background: var(--pr-3-bg); color: var(--pr-3-fg); }
.work-tag[data-priority="4"] { background: var(--pr-4-bg); color: var(--pr-4-fg); }
.work-tag[data-priority="5"] { background: var(--pr-5-bg); color: var(--pr-5-fg); }
.work-tag[data-priority="6"] { background: var(--pr-6-bg); color: var(--pr-6-fg); }
.work-tag[data-priority="7"] { background: var(--pr-7-bg); color: var(--pr-7-fg); }
.work-tag[data-priority="8"] { background: var(--pr-8-bg); color: var(--pr-8-fg); }
.work-tag[data-priority="9"] { background: var(--pr-9-bg); color: var(--pr-9-fg); }
.work-tag[data-priority="10"] { background: var(--pr-10-bg); color: var(--pr-10-fg); }

/* 상태: 원장 배지 꼴 — 시작 전 회색 · 진행 중 남색 · 완료 초록. */
.work-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
}

.work-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.work-status[data-status="todo"] { background: #f1f3f5; color: var(--text-muted); }
.work-status[data-status="todo"] .work-status-dot { background: #98a6b4; }
.work-status[data-status="doing"] { background: #e5eaf2; color: var(--primary); }
.work-status[data-status="doing"] .work-status-dot { background: var(--primary); box-shadow: 0 0 0 2px rgba(184, 143, 62, 0.35); }
.work-status[data-status="done"] { background: var(--success-tint); color: var(--success-strong); }
.work-status[data-status="done"] .work-status-dot { background: #27ae60; }

.work-date {
    overflow: hidden;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-date.is-overdue {
    color: var(--danger);
    font-weight: 600;
}

/* 오늘이 작업 기간 안이면 아이보리 + 금 — '지금 하는 일'. 완료한 행에는 달지 않는다. */
.work-date.is-current {
    padding: 1px 7px;
    border: 1px solid var(--gold-ring);
    border-radius: 6px;
    background: var(--ivory);
    color: #5c4813;
    font-weight: 700;
}

/* ---- 팝오버(☰ 메뉴 카드 꼴) ---- */

.work-popover {
    position: absolute;
    z-index: 60;
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--menu-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-menu);
}

.work-popover[hidden] {
    display: none;
}

.work-popover.is-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    max-height: 75vh;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
}

/* 머리: 제목 …… 비우기(오른쪽 위, 2026-10-28 펭귄 지시). */
.work-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0 0 4px;
    padding: 0 4px 0 8px;
}

.work-popover-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-popover-clear {
    flex: none;
    padding: 3px 9px;
    border: 1px solid var(--quiet-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-navy);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.work-popover-clear:hover {
    border-color: var(--gold-hover);
    background: var(--ivory);
}

.work-popover-clear[hidden] {
    display: none;
}

.work-popover-filter {
    width: 100%;
    margin: 0 0 6px;
}

.work-popover-filter[hidden],
.work-popover-options[hidden],
.work-range-editor[hidden] {
    display: none;
}

.work-option-group {
    margin: 8px 8px 2px;
    color: var(--text-faint);
    font-size: 11.5px;
    font-weight: 700;
}

.work-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-navy);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.work-option:hover,
.work-option:focus-visible {
    background: var(--ivory-warm);
    box-shadow: inset 0 0 0 1px var(--gold-ring);
}

.work-option[aria-pressed="true"]::after {
    content: "✓";
    margin-left: auto;
    color: var(--primary);
    font-weight: 700;
}

.work-option.is-danger {
    color: var(--danger);
}

.work-option-note {
    margin: 4px 8px 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.work-option-card,
.work-option-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.work-option-card-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-option-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.work-confirm-text {
    margin: 2px 8px 12px;
    color: var(--text);
    font-size: 13.5px;
}

.work-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 4px 4px;
}

.work-danger-solid {
    padding: 7px 14px;
    border: 1px solid var(--danger-strong);
    border-radius: var(--radius-md);
    background: var(--danger);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.work-danger-solid:hover {
    background: var(--danger-strong);
}

.work-range-editor {
    display: grid;
    gap: 10px;
    padding: 4px 8px 8px;
}

.work-range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.work-range-row[hidden] {
    display: none;
}

.work-range-arrow {
    color: var(--text-muted);
}

.work-range-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.work-input {
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--quiet-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.work-input:focus {
    border-color: var(--primary);
}

.work-input[hidden] {
    display: none;
}

.work-field-error {
    margin: 0;
    color: var(--danger);
    font-size: 13px;
}

.work-field-error[hidden] {
    display: none;
}

/* ---- 옆 패널(노션 사이드 피크) ---- */

.work-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 28, 52, 0.18);
}

.work-detail-backdrop[hidden] {
    display: none;
}

.work-detail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(560px, 100%);
    padding: 14px 32px 40px;
    overflow-y: auto;
    border-left: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow-peek);
    overscroll-behavior: contain;
}

.work-detail[hidden] {
    display: none;
}

.work-detail-head {
    display: flex;
    justify-content: flex-end;
    margin: 0 -16px 4px;
}

.work-detail-card {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.work-detail-name {
    margin: 0;
    color: var(--text-strong);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.work-props {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.work-prop-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
}

.work-prop-name {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.work-prop-value {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.work-prop-value:hover {
    background: var(--ivory);
    box-shadow: inset 0 0 0 1px var(--gold-ring);
}

.work-prop-value[aria-expanded="true"] {
    box-shadow: inset 0 0 0 2px var(--primary);
}

.work-placeholder {
    color: var(--text-faint);
}

.work-detail-section {
    padding-top: 4px;
}

.work-detail-section h3 {
    margin: 0 0 8px;
    color: var(--ink-navy);
    font-size: 14px;
    font-weight: 700;
}

.work-totals {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.work-totals[hidden] {
    display: none;
}

.work-period-totals {
    padding: 7px 10px;
    border: 1px solid var(--gold-ring);
    border-radius: var(--radius-sm);
    background: var(--ivory);
    color: #5c4813;
    font-weight: 600;
}

.work-strip {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 46px;
    margin-bottom: 10px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}

.work-strip:empty {
    display: none;
}

.work-strip-day {
    position: relative;
    flex: 1 1 0;
    min-width: 2px;
    height: 100%;
}

.work-strip-plan,
.work-strip-actual {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px 2px 0 0;
}

.work-strip-plan {
    background: #e5eaf2;
}

.work-strip-actual {
    background: var(--primary);
}

.work-strip-day.is-today .work-strip-actual {
    background: var(--gold);
}

/* 작업 기간 안의 날은 옅은 금 띠 — 계획한 기간에 실제로 했는지 막대로 본다. */
.work-strip-day.is-in-period {
    background: rgba(217, 189, 130, 0.22);
}

.work-records {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-records:empty {
    display: none;
}

.work-record-day {
    margin-top: 8px;
}

.work-record-day:first-child {
    margin-top: 0;
}

.work-record-date {
    padding: 2px 6px;
    margin-left: -6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--ink-navy);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.work-record-date:hover {
    background: var(--ivory);
    box-shadow: inset 0 0 0 1px var(--gold-ring);
}

.work-record-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
}

.work-record-time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.work-record-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-record-meta {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.work-record-done {
    color: var(--success-strong);
    font-weight: 700;
}

.work-body {
    width: 100%;
    min-height: 200px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
}

.work-body:focus {
    border-color: var(--primary);
}

.work-body::placeholder {
    color: var(--text-faint);
}

/* 옆 패널 아래 '행 삭제'(최상위 행만). */
.work-detail-foot {
    display: grid;
    justify-items: start;
    gap: 6px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.work-detail-foot[hidden] {
    display: none;
}

.work-danger-btn {
    padding: 7px 12px;
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--danger);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.work-danger-btn:hover {
    background: var(--danger-soft);
}

.work-detail-foot-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

/* ---- 토스트(앱 토스트와 같은 남색) ---- */

.work-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--primary-top);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    font-size: 13.5px;
    transform: translateX(-50%);
}

.work-toast[hidden] {
    display: none;
}

.work-toast-action {
    flex: none;
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #f2c96a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.work-toast-action[hidden] {
    display: none;
}

/* ---- 좁은 화면: 카드는 화면 끝까지, 표는 Pr·이름 두 열을 붙인 채 가로로 밀고, 옆 패널은 전체 화면 ---- */

@media (max-width: 640px) {
    .work-main {
        margin: 0;
        padding: 16px 16px 48px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .work-title {
        font-size: 18px;
    }

    .work-range {
        margin-left: 0;
    }

    .work-add-table {
        min-height: 48px;
    }

    .work-add-table-hint {
        display: none;
    }

    .work-grid {
        min-width: 860px;
    }

    .work-th-priority,
    .work-cell-priority,
    .work-th-name,
    .work-cell-name {
        position: sticky;
        z-index: 1;
    }

    .work-th-priority,
    .work-cell-priority {
        left: 0;
    }

    .work-th-name,
    .work-cell-name {
        left: 72px;
        box-shadow: 1px 0 0 var(--border);
    }

    .work-th-priority {
        width: 72px;
    }

    .work-th-name {
        width: 168px;
    }

    .work-th-period,
    .work-th-deadline {
        width: 150px;
    }

    .work-name {
        --indent: 12px;
        gap: 4px;
    }

    .work-toggle,
    .work-toggle-spacer {
        margin-left: 0;
    }

    .work-detail {
        width: 100%;
        padding: 10px 18px 32px;
        border-left: 0;
    }

    .work-detail-head {
        margin: 0 -6px 4px;
    }

    .work-prop-row {
        grid-template-columns: 108px minmax(0, 1fr);
    }

    .work-record-row {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .work-record-meta {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-toggle svg,
    .work-shell[aria-busy="true"] .work-tables {
        transition: none;
    }
}