/* 공지·업무지시 · 법정점검 설비 · 공문 본문 표·사진 · 지출 붙여넣기 · 오늘 챙길 일 (2026-10-08 작성 · 10-09 정리)
   기존 토큰과 공문 작성 화면의 부품(df-sec · df-dropzone · wl-photo-add)을 그대로 쓴다 — 새 모양을 만들지 않는다.
   ★기존 화면 배치(.doc-2pane 1.5:1 등)는 여기서 덮지 않는다. 10-08 판이 1:1·고정으로 바꿔 기안 미리보기 배율이 달라졌었다.
   ★입력칸 글자는 16px 이상 — iOS 는 16px 미만 입력에 포커스하면 화면을 확대한다(CLAUDE.md §4.18).
   ★입력 요소 규칙은 'input.클래스'·'.doc-form input' 꼴로 특이도를 맞춘다 — 전역 input[type=...] (0,1,1) 이 클래스 하나를 이긴다(§4.18). */

/* ── 대화창(공지·업무지시 · 점검 증빙) ── */
.wf-dialog { width:min(900px,calc(100vw - 28px)); max-height:88dvh; margin:auto; padding:24px; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--ds-radius-card); color:var(--text-main); background:var(--surface); overflow:auto; }
.wf-dialog::backdrop { background:rgb(0 0 0 / .4); }
.wf-dialog h2 { margin:0; font-size:20px; }
.wf-dialog h3 { font-size:18px; margin:20px 0 12px; }
.wf-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between; margin-bottom:18px; }
.wf-dialog button,.wf-inspection button { min-height:44px; padding:0 14px; border:1px solid var(--border); background:var(--surface); color:var(--text-main); border-radius:var(--ds-radius-input); cursor:pointer; font:inherit; font-size:15px; }
.wf-dialog button:disabled { opacity:.5; cursor:wait; }
.wf-dialog button.wf-primary,.wf-inspection button.wf-primary { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.wf-dialog label { display:block; margin:14px 0 6px; font-weight:600; }
.wf-dialog input:not([type=checkbox]),.wf-dialog textarea,.wf-dialog select { box-sizing:border-box; width:100%; margin-top:6px; font-size:16px; }
.wf-dialog .wf-site { display:flex; align-items:center; gap:8px; font-weight:400; margin:8px 0; }
.wf-dialog .wf-site input { width:20px; height:20px; margin:0; }
/* 점검 증빙 창(11-09) — 칸 몇 개짜리 양식이라 900px 은 날짜·메모 칸만 길게 늘였다. 공지·업무지시 창은 그대로 둔다.
   .wf-ev 는 '불러오는 중'과 본문 둘 다에 있다 — 불러온 뒤에 폭이 줄며 창이 튀지 않게. */
.wf-dialog:has(.wf-ev) { width:min(560px,calc(100vw - 28px)); }
.wf-evidence { margin-top:14px; }
.wf-evidence-hd { font-weight:600; margin-bottom:6px; }
.wf-evidence-hd .wf-meta { font-weight:400; margin-left:4px; }
.wf-evidence > .wf-meta { margin:0 0 6px; }
.wf-dialog input[type=file] { font-size:14px; color:var(--text-sub); }
.wf-dialog input[type=file]::file-selector-button { min-height:40px; margin-right:10px; padding:0 14px; border:1px solid var(--border); border-radius:var(--ds-radius-input); background:var(--surface); color:var(--text-main); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.wf-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.wf-dialog .wf-foot .wf-site { margin:0; }
.wf-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wf-meta { color:var(--text-sub); font-size:14px; line-height:1.6; }
.wf-copy { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.wf-error { color:var(--danger); margin-top:12px; white-space:pre-wrap; }
.wf-error:empty { display:none; }
.wf-msg { display:block; width:100%; text-align:left; background:transparent; color:var(--text-main); font:inherit; cursor:pointer; border-color:var(--border); border-width:0 0 1px !important; border-radius:0 !important; padding:16px 0 !important; }
.wf-msg strong { display:block; font-size:16px; margin-bottom:6px; }
.wf-receipts { width:100%; border-collapse:collapse; }
.wf-receipts th,.wf-receipts td { padding:10px; text-align:left; border-bottom:1px solid var(--border); }
.wf-reply { border-top:1px solid var(--border); padding:14px 0; }
.wf-file { display:block; margin:8px 0; }
.wf-table-scroll { max-width:100%; overflow:auto; margin-top:10px; }
.wf-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

/* ── 법정점검: 설비 정보로 일정 만들기(점검·일정 화면의 접힌 서랍) — 설비 한 줄씩, 표처럼 ── */
.wf-inspection { border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:20px; }
.wf-inspection summary { cursor:pointer; font-weight:700; padding:12px 0; font-size:16px; }
.wf-equip-table { margin:12px 0; border:1px solid var(--border); border-radius:var(--ds-radius-input); background:#fff; overflow:hidden; }
.wf-equip-row { display:grid; grid-template-columns:minmax(150px,1.3fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:10px; align-items:center; padding:10px 14px; border-top:1px solid var(--line-row); }
.wf-equip-row:first-child { border-top:0; }
.wf-equip-head { padding:8px 14px; background:var(--bg); font-size:13px; font-weight:700; color:var(--text-sub); }
.wf-equip-name strong { display:block; font-size:15px; color:var(--text-main); }
.wf-equip-name small { display:block; margin-top:2px; font-size:12px; color:var(--text-muted); }
.wf-equip-note { grid-column:2 / -1; font-size:14px; color:var(--text-sub); }
.wf-inspection select,.wf-inspection input[type="date"],.wf-inspection input[type="text"] { width:100%; box-sizing:border-box; height:42px; margin:0; padding:0 10px; font-size:16px; border-radius:var(--ds-radius-input); }
.wf-basis { display:block; margin:6px 0 14px; font-size:14px; font-weight:600; color:var(--text-main); }
.wf-basis input[type="text"] { margin-top:6px; }

/* ── 달력: 선택일 일정 목록 ── */
.wf-cal-agenda { margin-top:16px; }
.wf-cal-agenda h3 { font-size:16px; margin:0 0 6px; }
.wf-cal-agenda button { display:block; text-align:left; width:100%; min-height:44px; padding:10px 0; border:0; border-bottom:1px solid var(--line-row); background:none; font:inherit; color:var(--text-main); cursor:pointer; }

/* ── 붙여넣기 칸 — 공문 '본문 표·사진'과 지출 '품의서 이미지'가 같은 부품이다(한쪽만 바꾸지 말 것) ── */
.wf-paste-zone { padding:22px 16px; outline:none; }
.wf-paste-zone:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.wf-paste-lead { margin:0 0 12px; font-size:14px; color:var(--text-sub); }
.wf-paste-lead b { color:var(--text-main); }
.wf-paste-button { display:flex; align-items:center; padding:10px 18px; border:1.5px solid var(--primary); border-radius:var(--ds-radius-card); background:var(--primary); color:#fff; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.wf-touch { display:none; }
@media (pointer:coarse) { .wf-touch { display:inline; } .wf-mouse { display:none; } }   /* 손가락엔 Ctrl+V 가 없다 */
.wf-paste-hint { margin:10px 0 0; font-size:13px; color:var(--text-sub); }
.wf-paste-hint:empty,#expPhotoSize:empty { display:none; }
#expPhotoSize { display:block; margin-top:4px; }
/* 지출 첨부 타일 — 엑셀 범위 그림은 가로로 길어 100px 정사각 자르기로는 무엇인지 안 보인다 */
#expPhotoPreview .photo-wrap { width:168px; height:116px; background:#fff; }
#expPhotoPreview .photo-wrap img { width:100%; height:100%; object-fit:contain; }

/* ── 공문 내용 카드 — 카드 안 간격(12px)에 df-ai 의 위 여백(6px)이 더해지지 않게 예전 간격 그대로 ── */
.df-sec-purpose .df-ai { margin-top:-6px; }

/* ── 공문 본문 표·사진 — documentBlocks.js ── */
.dbe { display:flex; flex-direction:column; gap:14px; }
.dbe:empty { display:none; }
.dbe-block { padding-top:12px; border-top:1px solid var(--line-row); }
.dbe-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dbe-tag { font-size:13px; font-weight:700; color:#3A4150; }
.dbe-acts { display:flex; gap:2px; }
.dbe-acts button { background:none; border:0; padding:4px 7px; font-family:inherit; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; }

.dbe-acts button:disabled { opacity:.35; cursor:default; }
.dbe-hint { margin:6px 0 0; font-size:12px; color:var(--text-muted); line-height:1.5; }
/* 표 도구 — 한글 표 메뉴처럼 묶음 단위로. 높이·글씨를 한 자로 맞춘다 */
.dbe-ttools { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:8px; }
.dbe-tgroup,.dbe-seg { display:inline-flex; border:1px solid var(--border); border-radius:var(--ds-radius-input); overflow:hidden; background:#fff; }
.dbe-tgroup button,.dbe-seg button,.dbe-pick { height:34px; padding:0 11px; border:0; border-right:1px solid var(--border); background:#fff; font-family:inherit; font-size:13px; font-weight:600; color:#334155; cursor:pointer; white-space:nowrap; }
.dbe-tgroup button:last-child,.dbe-seg button:last-child { border-right:0; }
.dbe-bold { font-weight:800 !important; }
.dbe-seg button[aria-pressed="true"],.dbe-pick[aria-pressed="true"] { background:var(--primary-bg); color:var(--primary); }
.dbe-pick { display:none; border:1px solid var(--border); border-radius:var(--ds-radius-input); }
@media (pointer:coarse) { .dbe-pick { display:inline-flex; align-items:center; } }   /* 손가락은 Shift 가 없다 — 켜고 칸을 차례로 누르면 범위 */
/* 표 — 문서에 찍히는 모양 그대로 칸에 바로 적는다 */
.dbe-table-scroll { max-width:100%; overflow-x:auto; }
/* 열 폭은 저장된 값(colgroup)으로 고정 — 글자를 굵게 해도 칸이 안 움직인다. 위 20px 은 폭 눈금 자리 */
.dbe-grid { position:relative; padding-top:20px; }
.dbe-ruler { position:absolute; inset:0; pointer-events:none; }
.dbe-grip { position:absolute; top:0; bottom:0; width:0; touch-action:none; outline:none; }
.dbe-grip::before { content:''; position:absolute; top:1px; left:-9px; width:18px; height:17px; pointer-events:auto; cursor:col-resize; border-radius:var(--ds-radius-pill); background:linear-gradient(#94A3B8,#94A3B8) center/4px 13px no-repeat; }
.dbe-grip::after { content:''; position:absolute; top:20px; bottom:0; left:-1px; width:2px; background:var(--primary); opacity:0; pointer-events:none; }
.dbe-grip:focus-visible::before { box-shadow:0 0 0 2px var(--primary); }
.dbe-grip:hover::after,.dbe-grip:focus-visible::after,.dbe-grip.on::after { opacity:1; }
.dbe-table { width:100%; table-layout:fixed; border-collapse:collapse; background:#fff; }
.dbe-table td { height:40px; padding:7px 9px; border:1px solid #6B7280; font-size:16px; line-height:1.55; color:var(--text-main); vertical-align:middle; white-space:pre-wrap; overflow-wrap:anywhere; outline:none; cursor:text; }
.dbe-table td:focus { box-shadow:inset 0 0 0 2px var(--primary); }
.dbe-table td.sel { background:#DBEAFE; }
.dbe-table.dragging,.dbe-table.dragging td { user-select:none; cursor:cell; }
/* 고른 줄·열 바로 옆 삭제 단추(documentBlocks.js selButton) — 고른 칸 오른쪽 끝 안쪽, 세로 가운데 */
.dbe-selbtn { position:absolute; z-index:2; transform:translate(-100%, -50%); height:34px; padding:0 12px; border:1px solid #FCA5A5; border-radius:var(--ds-radius-input); background:#fff; color:#DC2626; font-family:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.15); }
@media (hover:hover) { .dbe-selbtn:hover { background:#FEF2F2; } }
/* 사진 — 고른 크기 그대로(본문 폭 대비) 보인다 */
.dbe-img-box { padding:12px; border-radius:var(--ds-radius-input); background:var(--bg); text-align:center; }
.dbe-img-box img { display:inline-block; max-width:100%; max-height:420px; object-fit:contain; background:#fff; }
.dbe-img-fields { display:flex; align-items:center; gap:8px; margin-top:8px; }
.doc-form .dbe-img-fields input[type="text"] { flex:1; height:40px; padding:0 12px; font-size:16px; }
/* 사진 배치 — 한 줄에 1장/2장 · 크기 막대(11-05) */
.dbe-size-lbl { font-size:14px; font-weight:600; color:var(--text-label); white-space:nowrap; }
.dbe-size { display:flex; align-items:center; gap:8px; flex:1; min-width:200px; margin:0; }
.dbe-size input[type="range"] { flex:1; min-width:0; height:34px; margin:0; accent-color:var(--primary); cursor:pointer; }
.dbe-size output { min-width:3em; text-align:right; font-size:14px; font-weight:600; color:var(--text-label); font-variant-numeric:tabular-nums; }
.doc-form textarea.dbe-text { margin:0; font-size:16px; min-height:72px; field-sizing:content; }

/* 마우스가 있을 때만 올림 표시 — 휴대폰은 누른 뒤 올림 색이 남아 '눌린 버튼'처럼 보인다 */
@media (hover:hover) {
    .wf-paste-button:hover { filter:brightness(1.06); }
    .dbe-acts button:hover:not(:disabled) { color:var(--primary); }
    .dbe-acts .dbe-del:hover { color:var(--danger); }
    .dbe-tgroup button:hover,.dbe-seg button:hover,.dbe-pick:hover { background:var(--bg); color:var(--primary); }
}

/* ── 화면 폭 ── */
.wf-document-view { display:none; }
button.viewer-close { border:0; background:none; padding:0 10px; font:inherit; font-size:40px; color:inherit; cursor:pointer; }
@media (max-width:640px) {
    .wf-dialog { padding:18px; width:calc(100vw - 20px); }
    .wf-cols,.wf-profile-grid { grid-template-columns:1fr; }
    .wf-equip-head { display:none; }
    .wf-equip-row { grid-template-columns:1fr 1fr; }
    .wf-equip-name,.wf-equip-note { grid-column:1 / -1; }
    .dbe-img-fields { flex-wrap:wrap; }
    .doc-form .dbe-img-fields input[type="text"] { flex-basis:100%; }
    .wf-document-view { display:flex; gap:8px; margin:12px 0; }
    .wf-document-view button { flex:1; min-height:44px; padding:10px; border:1px solid var(--border); background:var(--surface); font:inherit; border-radius:var(--ds-radius-input); }
    .wf-document-view button[aria-pressed=true] { border-color:var(--primary); color:var(--primary); background:var(--primary-bg); font-weight:600; }
    #tab4[data-wf-view=write] .doc-2pane > div:last-child,#tab8[data-wf-view=write] .doc-2pane > div:last-child { display:none; }
    #tab4[data-wf-view=preview] .doc-form,#tab8[data-wf-view=preview] .doc-form { display:none; }
    #tab1 .calendar-grid .cal-event { display:none; }
    #tab1 .cal-cell { min-height:54px !important; padding:6px !important; }
    #tab1 .cal-cell[data-has-events="1"]::after { content:'•'; display:block; color:var(--primary); }
    .wf-feed-group .tdy-r { flex-wrap:wrap; }
}
@media print { .wf-document-view { display:none; } }

/* ── 오늘 챙길 일: 묶음 제목 / 업무 종류 / 본문·상태. 아이콘 없이 같은 왼쪽선에 맞춘다 ── */
.wf-feed-group { margin:10px 0 18px; }
.wf-feed-group h3 { margin:0 0 8px; font-size:16px; }
.wf-feed-group.wf-overdue h3 { color:var(--danger); }
.tdy-sec > button[data-action=workflowAction]:not(.wf-msg) { background:none; color:var(--primary); font:inherit; font-size:14px; border:0; cursor:pointer; padding:8px 0; min-height:40px; }
#todayFeed .wf-feed-group { margin:0 0 16px; }
#todayFeed .wf-feed-group h3 { padding:0 0 8px; margin:0; font-size:16px; line-height:1.4; font-weight:700; border-bottom:1px solid var(--border); }
#todayFeed details.wf-feed-group { border-top:1px solid var(--border); margin:0; }
#todayFeed details.wf-feed-group > summary { min-height:44px; padding:12px 0; font-size:16px; font-weight:600; cursor:pointer; }
#todayFeed details.wf-feed-group[open] { padding-bottom:12px; }
#todayFeed .tdy-sec { margin:0; }
#todayFeed .tdy-sec + .tdy-sec { margin-top:8px; }
#todayFeed .tdy-sec-hd { display:flex; justify-content:space-between; align-items:center; gap:10px; border:0; padding:8px 0 0; font-size:14px; font-weight:400; color:var(--text-sub); }
#todayFeed .tdy-sec-n { margin-left:auto; font-size:14px; font-weight:400; color:var(--text-sub); white-space:nowrap; }
#todayFeed .tdy-r { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:12px; padding:10px 0; min-height:44px; }
#todayFeed button.tdy-r { width:100%; border:0; border-radius:0; background:transparent; color:var(--text-main); font:inherit; text-align:left; cursor:pointer; }
#todayFeed button.tdy-r:hover { background:var(--bg); }
#todayFeed .tdy-r-t { font-size:16px; line-height:1.5; font-weight:600; }
#todayFeed .tdy-r-sub { font-size:14px; line-height:1.5; font-weight:400; margin-top:3px; }
#todayFeed .tdy-r-m { padding-top:1px; font-size:14px; line-height:22px; font-weight:500; white-space:nowrap; }
#todayFeed .tdy-r-m.urgent { font-weight:600; }
#todayFeed .tdy-r-go { margin-left:auto; padding-top:1px; }
#todayFeed .tdy-r + .tdy-r { border-top:1px solid var(--line-row); }
#todayFeed .tdy-more { min-height:44px; padding:8px 0; font-size:14px; font-family:inherit; border:0; background:transparent; color:var(--text-sub); cursor:pointer; text-align:left; }
#todayFeed .tdy-sec.ref { background:transparent; padding:0; margin:0; }
#todayFeed .wf-msg { padding:12px 0 !important; }
#todayFeed .wf-msg strong { font-size:15px; line-height:1.5; font-weight:600; margin-bottom:3px; }
#todayFeed .wf-msg .wf-meta { display:block; font-size:14px; line-height:1.5; font-weight:400; }
#todayFeed .tdy-r-done,#todayFeed .tdy-r-drop { min-height:44px; min-width:44px; margin:0; font-size:14px; font-weight:600; padding:0 12px; border-radius:var(--ds-radius-input); }
#todayFeed .tdy-sec > button[data-action=workflowAction]:not(.wf-msg) { font-size:14px; padding:8px 0 0; }
/* 기안 미리보기 = A4 한 장(2026-10-09). 여백 10mm 는 print.js printDoc 의 @page margin 과 한 쌍 — 글줄이 인쇄와 같은 폭(190mm)에서 꺾여야
   쪽 경계(print.js markPageBreaks)가 맞는다. 종이(area)에 거는 스타일이라 innerHTML(상신·인쇄되는 문서)에는 안 들어간다. */
/* 회의록(작성 미리보기·조회)도 같은 종이(10-19) */
#docPreviewArea, #meetPreviewArea, #meetDocContent { padding:10mm; box-sizing:border-box; background:#fff; box-shadow:inset 0 0 0 1px #E5E7EB; }
/* 승인 문서를 고치는 중(10-19 · '짧게 2'안) — 초록 버튼 칸(#updateApproved*Btn)이 보일 때만 안내 한 줄 + 파란 버튼 다른 이름.
   보임은 docs.js·expenses.js 가 초록 칸 display 를 바꾸는 그 자리 하나로 움직인다 — 따로 맞출 상태가 없다(#tab7 meet-placeholder 와 같은 :has 패턴).
   기안 파란 버튼은 고치는 중에도 새 문서로 올라가고(승인본 그대로), 지출 파란 버튼은 그 승인본을 바꿔 결재를 다시 받는다 — 이름이 다른 이유 */
.approved-edit-note, .doc-actions .lbl-edit { display: none; }
.approved-edit-note { margin: 0 0 10px; padding: 12px 16px; border-radius: var(--ds-radius-input); background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; font-size: 15px; font-weight: 700; }
.doc-actions:has(#updateApprovedDocBtn[style*="block"]) .approved-edit-note,
.doc-actions:has(#updateApprovedExpBtn[style*="block"]) .approved-edit-note { display: block; }
.doc-actions:has(#updateApprovedDocBtn[style*="block"]) .lbl-new,
.doc-actions:has(#updateApprovedExpBtn[style*="block"]) .lbl-new { display: none; }
.doc-actions:has(#updateApprovedDocBtn[style*="block"]) .lbl-edit,
.doc-actions:has(#updateApprovedExpBtn[style*="block"]) .lbl-edit { display: inline; }
/* 회의록 첨부 사진 배치(한 쪽에 몇 장) — 10-19. 고른 칸은 aria-pressed 로만 표시(meetings.js setMeetPhotoPerPage) */
.meet-ppp-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; }
.meet-ppp-lead { font-size:14px; color:var(--text-sub); margin-right:4px; }
@media (max-width:480px) { .meet-ppp-lead { flex-basis:100%; } }   /* 휴대폰: 글자는 위 줄, 버튼 넷은 한 줄(390px 에서 '4장'만 밀렸다) */
.meet-ppp { min-width:48px; height:36px; padding:0 10px; background:#fff; color:var(--text-sub); border:1.5px solid var(--line-input); border-radius:var(--ds-radius-input); font-size: 14px; font-weight:700; cursor:pointer; }
.meet-ppp[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:#fff; }
.doc-page-break { position:absolute; left:0; right:0; height:0; border-top:2px dashed #3B82F6; pointer-events:none; z-index:1; }
/* 쪽 번호는 종이 오른쪽 여백(10mm + 본문 안쪽 30px)에 들어갈 만큼만 — 길게 쓰면 표 끝 칸(금액)을 가린다(10-09 캡처) */
.doc-page-break span { position:absolute; right:2px; top:-9px; padding:0 4px; border-radius:var(--ds-radius-pill); background:var(--primary); color:#fff; font-size: 12px; font-weight:700; line-height:17px; white-space:nowrap; }