/* 서로 확인 · 댓글(M2) — 설계서 2026-10-15-markup-collab-design.md §6. 명단 · 받은 함 · 말풍선 · 상세 칸 · 목록의 새 꼴(app.css 는 그대로) */
.pmode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.pmode p { margin: 0; }
.perr { color: var(--bad); font-size: var(--fs-sm); }
.pmig.ok { color: var(--ok); } .pmig.bad { color: var(--bad); font-weight: 600; }
.padd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
table.ppl td { vertical-align: middle; } table.ppl tr.stopped { color: var(--muted); }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pedit { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-right: 6px; }
.pcodes { position: fixed; z-index: 70; left: 50%; top: 20%; transform: translateX(-50%); width: min(520px, 92vw); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: 16px 18px; }
.pcodes ul { list-style: none; padding: 0; } .pcodes li { padding: 6px 0; border-top: 1px solid var(--line); }
.pcode { font-size: var(--fs-lg); letter-spacing: 1px; font-weight: 600; }
.slips { display: none; }
@media print {  /* 「전달 쪽지 인쇄」 동안만(body.printing) — 다른 화면 · 보고서 인쇄는 그대로 */
  body.printing > *:not(main), body.printing main > *:not(.slips) { display: none !important; }
  body.printing .slips { display: block; } .slip { page-break-after: always; padding: 24px; font-size: 16px; }
  .slip .slt { font-weight: 600; } .slip .sln { font-size: 22px; } .slip .slc { font-size: 28px; letter-spacing: 2px; font-weight: 700; }
}
table.pnames tr.todo td:first-child { font-weight: 600; }
.inboxlink.has { font-weight: 700; } .inboxlink .ibn { color: var(--bad); }
.ibfilters .cur { outline: 2px solid var(--accent); }
.iblist { list-style: none; padding: 0; } .iblist li { padding: 6px 4px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.iblist li.ibday { font-weight: 600; color: var(--muted); border-bottom: 0; padding-top: 14px; }
.iblist li.unread a { font-weight: 700; }
/* 말풍선 · 상세 칸(설계서 §6.2) */
.tag.st.open { background: var(--card); color: var(--text, var(--fg)); border: 1px solid var(--line-strong); }
.tag.st.in_progress, .tag.in_progress { background: var(--tint-accent); color: var(--accent); } .tag.st.answered, .tag.answered { background: var(--tint-ok); color: var(--ok); }
.tag.st.rejected, .tag.rejected { background: var(--tint-bad); color: var(--bad); } .tag.st.resolved { background: var(--bg); color: var(--muted); }
.tag.st.cancelled, .tag.cancelled { background: var(--bg); color: var(--muted); text-decoration: line-through; }
.mkcollab { margin: 6px 0; } .mkcline { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .mkcline .tag { margin-left: 0; }
.mkcacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .mkcacts .on { font-weight: 700; outline: 2px solid var(--accent); }
.mkcwhy, .mkdwhy { display: flex; gap: 4px; margin-top: 4px; } .mkcwhy input, .mkdwhy input { flex: 1; }
.mkcerr, .mkderr { color: var(--bad); margin: 4px 0 0; }
.mkat { background: var(--tint-accent); color: var(--accent); border-radius: var(--r-card); padding: 0 4px; }
.mkfilepick input[type=file] { display: none; } .mkfilepick { display: inline-flex; gap: 4px; align-items: center; }
.mkpop .mkreply .mkfilepick, .mkpop .mkreply button { flex: none; white-space: nowrap; }
.mkdrawer { position: fixed; z-index: 65; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); overflow: auto; background: var(--card);
  border-left: 1px solid var(--line-strong); box-shadow: var(--shadow-pop); padding: 12px 14px; font-size: var(--fs-base); }
.mkdrawer:focus { outline: none; }  /* 서랍 자체는 초점을 맡아 두는 자리(tabindex -1) — 칸 · 단추의 초점 테두리는 그대로 */
.mkdhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mkdhead .x { margin-left: auto; border: 0; background: none; font-size: var(--fs-lg); cursor: pointer; }
.mkdtext { white-space: pre-line; margin: 8px 0; overflow-wrap: anywhere; } .mkdtext textarea, .mkdwork textarea, .mkdreply textarea { width: 100%; box-sizing: border-box; }
.mkdfields { display: grid; grid-template-columns: 4.5em 1fr; gap: 4px 8px; margin: 8px 0; } .mkdfields dt { color: var(--muted); } .mkdfields dd { margin: 0; }
.mkdwork h3, .mkdreplies h3 { font-size: var(--fs-base); margin: 10px 0 4px; } .mkdval { white-space: pre-line; margin: 0; }
.mkdinline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.mkfiles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .mkfiles img { max-width: 96px; max-height: 72px; border: 1px solid var(--line); }
.mkreplies.all { max-height: none; } .mkrtext.status { color: var(--bad); } .mkprev { color: var(--muted); font-size: var(--fs-sm); }
.mkdhist ol { padding-left: 18px; font-size: var(--fs-sm); }
.mkmention { position: fixed; z-index: 80; list-style: none; margin: 0; padding: 2px 0; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.mkmention li { padding: 3px 10px; cursor: pointer; } .mkmention li.on { background: var(--tint-accent); }
body.viewonly .mkpop .mkreply, body.viewonly .mkpop [data-act=edit], body.viewonly .mkpop [data-act=delete] { display: none; }
.mknewx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mknewx select, .mknewx input { flex: 1 1 30%; min-width: 0; }
/* 도면 위 상태 색 = M1a 번호 딱지의 바탕(설계서 §6.2 「도면 위」, 판정 R12) — 테두리(지은 사람 색)는 그대로. 늦음은 딱지 오른쪽 위 붉은 점 */
/* 반려는 회신(초록)과 다른 색상(살구) — 적록 색약 모의에서도 갈린다(끝 고침 T10-m9: 옛 #fde2df 는 회신과 CIEDE2000 0.9). 딱지 글 #1d2127 대비 10:1 이상 */
.ovl .mkbadge.st-in_progress { fill: #dbe8ff; } .ovl .mkbadge.st-answered { fill: #dcf3e2; } .ovl .mkbadge.st-rejected { fill: #ffc4a3; }
.ovl .mkbadge.st-resolved, .ovl .mkbadge.st-cancelled { fill: #e3e5e8; }
/* 첫 줄 글 색도 상태별(흰 테두리 위 — 흰 바탕 대비 4.5:1 이상). 열림은 app.css 의 #1d2127 그대로 */
.ovl .mkline.st-in_progress { fill: #1f4fbf; } .ovl .mkline.st-answered { fill: #16794c; } .ovl .mkline.st-rejected { fill: #b3261e; }
.ovl .mkline.st-resolved { fill: #5f6368; } .ovl .mkline.st-cancelled { fill: #6b7078; }
.ovl .mklate { fill: #d1242f; stroke: #fff; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.ovl .mk.cancelled, .ovl .mkimg.cancelled { opacity: .35; stroke-dasharray: 3px 4px; }
.sw.mk.off { background: #dadce0; }
/* 목록(설계서 §6.3) */
.mkchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.mkchip { background: var(--tint-accent); color: var(--accent); border: 1px solid transparent; border-radius: var(--r-pill); padding: 0 8px; line-height: 20px; font-size: var(--fs-sm); } .mkchip.saved { background: var(--tint-ok); color: var(--ok); }
.mkbulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--tint-cand); border: 1px solid var(--line-cand); border-radius: var(--r-card); padding: 6px 10px; margin: 6px 0; }
.mkbmsg { background: var(--tint-accent); border-radius: var(--r-ctl); padding: 6px 10px; white-space: pre-line; } /* 일괄 결과 — 못 바꾼 까닭마다 한 줄 */
.mkstbtn { cursor: pointer; border: 0; } .mkstmenu { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; padding: 4px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); }
tr.mkrepl td { background: var(--bg); } .mkthumb { max-height: 48px; vertical-align: middle; border: 1px solid var(--line); }
/* 내보내기(설계서 2026-10-17 §7) — 보기 전용은 흐린 단추(이유는 title) */
.heads .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.mkexp { position: absolute; z-index: 60; width: min(360px, calc(100vw - 16px)); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); padding: 10px 12px; font-size: var(--fs-sm); }
.mkexp .x { float: right; border: 0; background: none; font-size: var(--fs-lg); cursor: pointer; }
.mkexp p { margin: 2px 0; } .mkexph { font-weight: 600; } .mkexps { color: var(--muted); } .mkexpn { color: var(--bad); }
.mkexp fieldset { border: 0; padding: 0; margin: 6px 0; } .mkexp legend { display: none; }
.mkexpfmt label { display: block; padding: 2px 0; cursor: pointer; } .mkexpfmt .hint { color: var(--muted); margin-left: 6px; }
.mkexpopts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; } .mkexpacts { display: flex; gap: 6px; margin: 6px 0; }
.mkexpover { color: var(--bad); } .mkexpprog { background: var(--tint-accent); border-radius: var(--r-ctl); padding: 4px 8px; }
#mkexpprint { white-space: nowrap; } /* 인쇄판 링크는 줄 중간에서 끊기지 않고 통째로 다음 줄로 */
.mkexp .btn:disabled { opacity: .45; cursor: not-allowed; } /* 막힌 「만들기」(상한 넘음 · 만드는 중 · 빈 범위) — 흐리게(§7) */
.mkexp h3 { font-size: var(--fs-base); margin: 8px 0 2px; } .mkexprecent { list-style: none; padding: 0; margin: 0; } .mkexprecent li { padding: 2px 0; }