.work-dialog { --note-ink:#25233d; --note-muted:#7a798d; --note-line:#eeedf4; width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid #e8e5f2; border-radius:22px; background:#fff; color:var(--note-ink); box-shadow:0 24px 80px #20194738; font-family:var(--font-ui,"Malgun Gothic",sans-serif); font-size:13px; line-height:1.6; overflow:auto; }
.work-dialog::backdrop { background:#201b384d; backdrop-filter:blur(4px); }
.work-dialog *, .work-dialog *::before, .work-dialog *::after { box-sizing:border-box; }
.work-dialog .work-heading { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:13px; padding:24px 26px 20px; border-bottom:1px solid var(--note-line); background:#fff; }
.work-heading-mark { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:14px; color:#6452e8; background:#f0edff; }
.work-heading-mark svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.work-dialog .work-heading h2 { margin:0; font-size:20px; letter-spacing:-.7px; line-height:1.4; overflow-wrap:anywhere; }
.work-heading-copy { min-width:0; flex:1; }
.work-heading-copy small { display:block; margin-top:3px; color:var(--note-muted); font-size:12px; font-weight:400; }
.work-dialog button { font:inherit; cursor:pointer; transition:background .15s,border-color .15s; }
.work-dialog button:disabled { cursor:wait; opacity:.55; }
.work-dialog button:focus-visible,.work-dialog input:focus-visible,.work-dialog textarea:focus-visible,.work-dialog select:focus-visible { outline:3px solid #d8d1ff; outline-offset:2px; }
.work-dialog button[data-close] { flex:0 0 32px; height:32px; padding:0; border:0; border-radius:10px; background:#f6f5f9; color:#817c91; font-size:22px; line-height:1; }
.work-dialog button[data-close]:hover { background:#ebe8f5; color:#413267; }
.work-dialog-body { padding:22px 26px 26px; }
.work-error:empty { display:none; }
.work-error { margin:0 0 18px; padding:12px 15px; border-radius:12px; background:#fff0f1; color:#b33448; white-space:pre-wrap; overflow-wrap:anywhere; }
.work-toolbar,.work-filterbar,.work-actions,.work-card-head,.work-personline { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.work-toolbar { margin-bottom:18px; flex-wrap:wrap; }
.work-tabs { display:flex; gap:4px; background:#f4f3f8; border-radius:12px; padding:4px; }
.work-tabs button { border:0; border-radius:9px; background:transparent; padding:8px 16px; color:#8b879c; font-weight:600; white-space:nowrap; }
.work-tabs button.is-selected { color:#5945da; background:#fff; box-shadow:0 2px 6px #29213e0b; }
.work-dialog .work-primary,.work-dialog .work-secondary { min-height:38px; padding:8px 15px; border-radius:10px; font-weight:600; white-space:nowrap; }
.work-dialog .work-primary { border:1px solid #6652e8; color:#fff; background:#6652e8; box-shadow:0 3px 8px #6652e81a; }
.work-dialog .work-primary:hover { background:#5742d5; }
.work-dialog .work-secondary { border:1px solid #e4e1ed; background:#fff; color:#625a76; }
.work-dialog .work-secondary:hover { background:#f7f5ff; border-color:#cfc6f5; }
.work-filterbar { margin:0 0 14px; flex-wrap:wrap; color:var(--note-muted); font-size:12px; }
.work-filterbar p { margin:0; }
.work-check { display:flex; gap:7px; align-items:center; cursor:pointer; font-size:12px; color:var(--note-muted); }
.work-dialog .work-check input { width:15px; height:15px; margin:0; padding:0; accent-color:#6652e8; }
.work-note-list { display:grid; gap:10px; }
.work-dialog .work-note-row { display:flex; gap:13px; width:100%; min-width:0; padding:17px; text-align:left; border:1px solid var(--note-line); border-radius:14px; background:#fff; color:var(--note-ink); }
.work-dialog .work-note-row:hover { border-color:#d4ccf8; background:#fbfaff; }
.work-note-row.is-unread { background:#fcfbff; border-color:#e6e0fb; }
.work-avatar { display:grid; place-items:center; flex:0 0 38px; height:38px; background:#f0edfc; color:#7862bc; border-radius:13px; font-weight:700; font-size:12px; }
.work-note-copy { flex:1; min-width:0; display:grid; gap:5px; }
.work-note-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.work-note-title { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-note-preview { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9590a4; font-size:12px; }
.work-note-meta { color:#8c879b; font-size:11px; }
.work-badge { flex-shrink:0; display:inline-flex; padding:3px 9px; border-radius:7px; color:#827b95; background:#f3f1f7; font-size:10px; line-height:1.5; font-weight:700; white-space:nowrap; }
.work-badge.unread,.work-badge.open { color:#7553d3; background:#efe8ff; }
.work-badge.scheduled { color:#2b79b4; background:#eaf4fd; }
.work-badge.completed { color:#258968; background:#e8f6ef; }
.work-badge.cancelled { color:#938797; background:#f3f0f3; }
.work-empty { text-align:center; padding:54px 20px; border:1px dashed #e1dcea; border-radius:16px; background:#fcfbfe; }
.work-empty .work-heading-mark { width:52px; height:52px; margin:0 auto 15px; border-radius:17px; }
.work-empty strong { display:block; font-size:15px; font-weight:600; }
.work-empty p { margin:6px 0 0; color:#9690a3; font-size:12px; }
.work-loading { text-align:center; padding:40px 0; color:#9b94ab; }
.work-dialog form { display:grid; gap:20px; }
.work-field,.work-picker { display:grid; gap:8px; font-size:12px; font-weight:600; color:#665f78; }
.work-dialog input:not([type=checkbox]),.work-dialog textarea,.work-dialog select { width:100%; min-width:0; padding:11px 13px; border:1px solid #e4dfec; border-radius:10px; background:#fcfbfe; color:#363046; font:inherit; font-size:13px; line-height:1.5; }
.work-dialog textarea { resize:vertical; min-height:130px; }
.work-dialog input::placeholder,.work-dialog textarea::placeholder { color:#b0a9bc; }
.work-search { display:flex; gap:8px; }
.work-search input { flex:1; }
.work-user-results,.work-selected { display:flex; gap:7px; flex-wrap:wrap; }
.work-user-results:empty,.work-selected:empty { display:none; }
.work-user-results button { padding:8px 11px; border:1px solid #e6e1ef; border-radius:9px; background:#fff; color:#625775; }
.work-selected button { padding:6px 10px; border:0; border-radius:8px; background:#eee8ff; color:#7454bc; font-size:12px; }
.work-hint { color:#9a91a8; font-size:11px; font-weight:400; margin:0; }
.work-actions { justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--note-line); padding-top:18px; margin-top:22px; }
form .work-actions { margin-top:0; }
.work-personline { justify-content:flex-start; flex-wrap:wrap; color:#746b85; font-size:12px; padding-bottom:17px; border-bottom:1px solid var(--note-line); }
.work-letter { margin:22px 0 28px; min-height:150px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; font-size:14px; }
.work-followup-list { display:grid; gap:14px; }
.work-card { padding:19px; border:1px solid var(--note-line); border-radius:15px; background:#fff; }
.work-card-head { align-items:flex-start; }
.work-card-head strong { font-size:15px; overflow-wrap:anywhere; }
.work-card-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; margin:16px 0; padding:13px; background:#f8f7fb; border-radius:10px; }
.work-card-grid span { display:block; color:#a099ae; font-size:10px; margin-bottom:4px; }
.work-card-grid strong { font-size:12px; color:#6f657e; font-weight:500; overflow-wrap:anywhere; }
.work-card p { margin:8px 0; color:#887d97; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.work-card p b { color:#62576f; font-weight:500; margin-right:8px; }
.work-card .work-actions { margin-top:16px; padding-top:13px; }
.work-context { padding:14px 16px; border-radius:12px; background:#f6f3fd; color:#716182; font-size:13px; margin:0 0 20px; overflow-wrap:anywhere; }
.work-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.work-report-block { padding:15px 0; border-bottom:1px solid var(--note-line); white-space:pre-wrap; overflow-wrap:anywhere; }
.work-report-block b { display:block; margin-bottom:7px; color:#95869f; font-size:11px; font-weight:500; }
.work-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.work-photos p { margin:0; padding:10px; background:#f9f7fc; border-radius:12px; color:#988ca5; font-size:12px; }
.work-photos img { display:block; width:100%; border-radius:8px; max-height:260px; object-fit:contain; }
.work-dialog [data-more] { width:100%; margin-top:6px; }
@media(max-width:480px) { .work-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 24px); border-radius:17px; } .work-dialog .work-heading { padding:18px; } .work-dialog-body { padding:18px; } .work-toolbar { gap:12px; } .work-tabs { flex:1; } .work-tabs button { flex:1; padding:8px 10px; } .work-form-grid,.work-card-grid { grid-template-columns:1fr; } .work-note-row .work-avatar { display:none; } .work-actions button { flex:1; } .work-heading-copy small { font-size:11px; } }