/* ═══════════════════════════════════════════════════════════════════
   v9.5.0 개선 요청 서랍 · 유지보수 센터 (시안 A 첫 화면 · B 자세히 · D 서랍 — 담당자 확정 2026-10-23)
   이름은 모두 .mt- 로 시작 — 다른 화면 규칙과 섞이지 않습니다. 색은 tokens.css 그대로.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 서랍 단추 ── */
.mt-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  background: var(--navy); color: #fff; border: 0; border-radius: 22px;
  padding: 9px 16px; font: 700 12.5px var(--font); cursor: pointer;
  box-shadow: 0 4px 14px rgba(23, 59, 99, .28);
}
.mt-fab:hover { background: var(--deep); }
.mt-fab:focus-visible, .mt-drawer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-dim { position: fixed; inset: 0; background: rgba(23, 59, 99, .28); z-index: 1000; }
.mt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100vw; z-index: 1001;
  background: #fff; box-shadow: -8px 0 24px rgba(23, 59, 99, .18); overflow-y: auto;
}
.mt-drawer form { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 13px; min-height: 100%; }
.mt-dhead { display: flex; justify-content: space-between; align-items: center; }
.mt-dhead h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.mt-x { background: none; border: 0; color: var(--gray); font: 600 12.5px var(--font); cursor: pointer; }
.mt-sub { margin: -8px 0 0; font-size: 12px; color: var(--gray); }
.mt-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.mt-lab { display: block; font-size: 12px; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; padding: 0; }
.mt-opt { font-weight: 400; color: var(--gray); }
.mt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mt-chip span {
  display: inline-block; border: 1px solid var(--border); border-radius: 16px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-sub); cursor: pointer; background: #fff;
}
.mt-chip input:checked + span { background: var(--royal); border-color: var(--royal); color: #fff; }
.mt-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mt-drawer textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; resize: vertical;
  font: 13px/1.5 var(--font); color: var(--text); min-height: 92px;
}
.mt-title { width: 100%; margin-top: 6px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px;
            font: 12.5px var(--font); color: var(--text); }
.mt-paste {
  border: 1.5px dashed var(--st4-bd); background: #F6F9FE; border-radius: 9px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.mt-paste.drag, .mt-paste:focus { border-color: var(--royal); background: #EEF3FA; outline: none; }
.mt-paste-help { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.mt-shots { display: flex; flex-direction: column; gap: 8px; }
.mt-shot { position: relative; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.mt-shot canvas { display: block; width: 100%; height: auto; cursor: crosshair; border-radius: 6px; touch-action: none; }
.mt-shot .mt-del {
  position: absolute; top: 6px; right: 6px; background: rgba(255, 255, 255, .92); border: 1px solid var(--border);
  border-radius: 5px; font: 600 11.5px var(--font); color: var(--st1); padding: 2px 7px; cursor: pointer;
}
.mt-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--st3); }
.mt-link { color: var(--royal); font-weight: 600; cursor: pointer; text-decoration: none; }
.mt-link:hover { text-decoration: underline; }
.mt-auto {
  margin: 0; background: #F4F7FB; border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--text-sub);
  display: grid; grid-template-columns: 70px 1fr; row-gap: 3px;
}
.mt-auto dt { font-weight: 600; color: var(--gray); }
.mt-auto dd { margin: 0; word-break: break-all; }
.mt-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-sub); cursor: pointer; }
.mt-check input { margin-top: 3px; }
.mt-foot { margin-top: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
.mt-urg { font-size: 12px; color: var(--gray); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.mt-msg { margin: 0; font-size: 12.5px; min-height: 18px; }
.mt-msg.ok { color: var(--st5); font-weight: 600; }
.mt-msg.err { color: var(--st1); font-weight: 600; }
@media print { .mt-fab, .mt-drawer, .mt-dim { display: none !important; } }
@media (max-width: 560px) { .mt-fab { right: 10px; bottom: 10px; } }

/* ── 첫 화면 A ── */
.mt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap;
           margin-bottom: 14px; }
.mt-head .meta { color: var(--gray); font-size: 12.5px; }
.mt-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mt-kpi { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
          text-decoration: none; color: inherit; display: block; }
.mt-kpi b { font-size: 24px; font-weight: 700; display: block; line-height: 1.15; color: var(--text); }
.mt-kpi span { font-size: 12px; color: var(--gray); }
.mt-kpi.hot { border-color: var(--royal); box-shadow: inset 0 3px 0 var(--royal); }
.mt-kpi.warn { box-shadow: inset 0 3px 0 var(--st3); }
.mt-kpi:hover { border-color: var(--royal); }
.mt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.mt-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
.mt-card + .mt-card { margin-top: 14px; }
.mt-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mt-card h3 .sub { font-weight: 500; color: var(--gray); font-size: 12px; }
.mt-appr { border: 1px solid var(--border); border-radius: 9px; padding: 13px 14px; margin-top: 10px;
           display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; }
.mt-appr .t { font-weight: 700; font-size: 13.5px; margin: 4px 0; }
.mt-appr .t a { color: var(--text); text-decoration: none; }
.mt-appr .t a:hover { color: var(--royal); }
.mt-appr ul { margin: 6px 0 0; padding-left: 17px; color: var(--text-sub); font-size: 12.5px; }
.mt-facts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--gray); }
.mt-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.mt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mt-pair figure { margin: 0; }
.mt-pair img, .mt-pair .mt-noimg { width: 100%; height: 96px; object-fit: cover; object-position: top left;
  border: 1px solid var(--border); border-radius: 6px; background: #EEF2F8; display: block; }
.mt-pair .mt-noimg { display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-dim); }
.mt-pair figcaption { font-size: 11px; color: var(--gray); margin-top: 2px; }
.mt-need { background: var(--st3-bg); border: 1px solid var(--st3-bd); border-radius: 9px; padding: 12px 14px; margin-top: 10px; }
.mt-need .t { font-weight: 700; }
.mt-need p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-sub); white-space: pre-line; }
.mt-health { list-style: none; margin: 0; padding: 0; }
.mt-health li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--lightgray); font-size: 12.5px; }
.mt-health li:last-child { border: 0; }
.mt-health .r { margin-left: auto; color: var(--gray); font-size: 12px; text-align: right; }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--text-dim); }
.mt-dot.OK { background: var(--st5); } .mt-dot.WARN { background: #C0871F; } .mt-dot.BAD { background: var(--st1); }
.mt-st { font-size: 11px; font-weight: 700; color: var(--gray); min-width: 28px; }
.mt-tl { list-style: none; margin: 0; padding: 0; }
.mt-tl li { font-size: 12.5px; padding: 6px 0 6px 14px; border-left: 2px solid var(--lightgray); margin-left: 4px; position: relative; }
.mt-tl li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.mt-tl li.g::before { background: var(--st5); }
.mt-tl li.b::before { background: var(--st1); }
.mt-tl .when { color: var(--text-dim); font-size: 11.5px; }
.mt-empty { color: var(--gray); font-size: 12.5px; padding: 10px 0; }
.mt-bundle { border: 1px solid var(--st4-bd); background: #F6F9FE; border-radius: 9px; padding: 10px 12px; margin-top: 12px;
             display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.mt-pw { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mt-pw input[type=password] { width: 150px; }
@media (max-width: 1100px) { .mt-grid { grid-template-columns: 1fr; } .mt-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mt-appr { grid-template-columns: 1fr; } .mt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 자세히 B (받은편지함) ── */
.mt-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); background: #fff; border: 1px solid var(--border);
           border-radius: 10px; overflow: hidden; min-height: 640px; }
.mt-list { border-right: 1px solid var(--border); background: #FBFCFE; max-height: calc(100vh - 210px); overflow-y: auto; }
.mt-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
           position: sticky; top: 0; background: #FBFCFE; z-index: 1; }
.mt-tabs a { font-size: 12px; padding: 4px 9px; border-radius: 6px; color: var(--gray); font-weight: 600; text-decoration: none; }
.mt-tabs a.on { background: var(--st4-bg); color: var(--royal); }
.mt-gh { font-size: 11px; font-weight: 700; color: var(--text-dim); padding: 12px 14px 4px; }
.mt-it { display: block; padding: 10px 14px; border-bottom: 1px solid var(--lightgray); color: inherit; text-decoration: none; }
.mt-it:hover { background: #F3F6FB; }
.mt-it.on { background: #EEF3FA; box-shadow: inset 3px 0 0 var(--royal); }
.mt-it .t { font-weight: 600; font-size: 12.8px; margin: 3px 0 2px; color: var(--text); }
.mt-it .m { font-size: 11.5px; color: var(--gray); display: flex; gap: 8px; flex-wrap: wrap; }
.mt-det { padding: 18px 22px 24px; min-width: 0; }
.mt-det .h { font-size: 17px; font-weight: 700; margin: 6px 0 4px; }
.mt-det .k { color: var(--gray); font-size: 12px; }
.mt-sec { margin-top: 16px; }
.mt-sec > .lab { font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.mt-rep { border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; display: grid;
          grid-template-columns: 90px minmax(0, 1fr); row-gap: 7px; column-gap: 10px; font-size: 12.8px; }
.mt-rep .k { font-weight: 600; color: var(--gray); }
.mt-rep span { white-space: pre-line; word-break: break-word; }
.mt-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; background: #FBFCFE; border: 1px solid var(--lightgray);
           border-radius: 8px; padding: 10px 12px; margin: 0; font-family: var(--font); }
.mt-shotrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mt-shotrow a { display: block; }
.mt-shotrow img { width: 100%; max-height: 220px; object-fit: contain; object-position: top; border: 1px solid var(--border);
                  border-radius: 6px; background: #F3F5F8; }
.mt-shotrow .cap { font-size: 11.5px; color: var(--gray); margin-top: 2px; }
.mt-hist { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.mt-hist li { display: grid; grid-template-columns: 96px 70px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--lightgray); }
.mt-hist .w { color: var(--text-dim); font-size: 12px; }
.mt-hist .who { color: var(--gray); font-size: 12px; }
.mt-hist .note { white-space: pre-line; word-break: break-word; }
.mt-bar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.mt-bar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.mt-bar textarea { width: 100%; min-height: 60px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: 13px var(--font); }
.mt-note { font-size: 12px; color: var(--gray); }
@media (max-width: 980px) { .mt-wrap { grid-template-columns: 1fr; } .mt-list { max-height: 320px; } }

/* ── 보고서 (아침 보고 한 장) ── */
.mt-doc { max-width: 880px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px 32px 28px; }
.mt-doc .date { color: var(--text-dim); font-weight: 600; font-size: 12px; }
.mt-doc h1 { font-size: 22px; margin: 4px 0 6px; }
.mt-lead { font-size: 14px; color: var(--text-sub); background: #F4F7FB; border-left: 3px solid var(--royal);
           padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0 4px; }
.mt-doc h2 { font-size: 15px; margin: 22px 0 8px; }
.mt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--border);
          border-radius: 9px; padding: 10px 14px; margin-bottom: 8px; }
.mt-row .t { font-weight: 700; }
.mt-row .d { font-size: 12.5px; color: var(--gray); margin-top: 2px; }

/* ── 승인 상자 (summary 를 누르면 펼침 — 스크립트 없이 동작) ── */
.mt-approve { display: inline-block; }
.mt-approve > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.mt-approve > summary::-webkit-details-marker { display: none; }
.mt-approve[open] > summary { box-shadow: 0 0 0 2px var(--st5-bd); }
.mt-approve-form { margin-top: 10px; border: 1px solid var(--st5-bd); background: var(--st5-bg); border-radius: 9px;
                   padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.mt-inline { display: inline; margin: 0; }
.mt-mini { font-size: 12px; color: var(--gray); }
.mt-tbl td, .mt-tbl th { vertical-align: top; }
.mt-cfg { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px 16px; align-items: center; font-size: 13px; }
.mt-cfg .ds-input, .mt-cfg .ds-select { max-width: 220px; }
.mt-cfg .help { grid-column: 2; margin-top: -6px; font-size: 12px; color: var(--gray); }
@media (max-width: 720px) { .mt-cfg { grid-template-columns: 1fr; } .mt-cfg .help { grid-column: 1; } }

/* ── 요청자 화면 : 진행 단계 ── */
.mt-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mt-steps li { font-size: 12.5px; font-weight: 600; color: var(--text-dim); padding: 8px 10px 6px; border-top: 3px solid var(--lightgray); }
.mt-steps li.done { color: var(--text-sub); border-top-color: var(--st5); }
.mt-steps li.now { color: var(--royal); border-top-color: var(--royal); }
.mt-steps li.done::before { content: "✓ "; color: var(--st5); }
.mt-steps li.now::before { content: "● "; }
@media (max-width: 560px) { .mt-steps { grid-template-columns: 1fr 1fr; } }

/* ── 바뀐 코드 보기 ── */
.mt-diff { margin: 0; max-height: 640px; overflow: auto; background: #FBFCFE; border: 1px solid var(--lightgray); border-radius: 8px;
           padding: 8px 0; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre; }
.mt-diff span { display: block; padding: 0 12px; }
.mt-diff .a { background: var(--st5-bg); color: #1d5e3a; }
.mt-diff .d { background: var(--st1-bg); color: #8a2f3a; }
.mt-diff .h { color: var(--royal); background: #EEF3FA; }