/* 장애문제해결(LPMS) — KaiLabsPlatform 장애해결시스템(KPMS) kpms.css 복사 (아래 kp-* 는 그대로)
   KaiLabs 의 색 · 모양 변수와 공용 클래스(.btn · .page-head …)를 두언유통 포탈 화면(.lp-view) 안에서만 정의한다 */
.lp-view{
  --border:#dde1e7; --border-strong:#c9ced6; --surface:#fff; --surface-2:#f4f6f9; --text:#14181d; --text-2:#3d434b; --text-3:#8a93a3;
  --on-accent:#fff; --radius:10px; --shadow:0 1px 3px rgba(15,23,42,.12);
  --ok:#1e8a4c; --ok-soft:#e6f6ec; --bad:#c0392b; --bad-soft:#fdecea; --warn:#b7791f; --warn-soft:#fdf3e1;
  --info:#1a56b8; --info-soft:#e8f0fc; --dev:#7c3aed; --dev-soft:#f1eafe;
  flex:1 1 auto; min-height:0; overflow:auto; padding:2px 4px 12px; color:var(--text);
}
.lp-view .ico{ width:15px; height:15px; flex:none; }
.lp-view .page-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.lp-view .page-title{ display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0; }
.lp-view .page-title .dots{ width:4px; height:18px; border-radius:2px; background:var(--accent); }
.lp-view .page-title h2{ margin:0; font-size:17px; font-weight:800; color:var(--accent); }
.lp-view .lp-ver{ font-size:13px; font-weight:800; color:#111; font-family:Consolas,monospace; }
.lp-view .page-sub{ font-size:12px; color:var(--text-3); }
.lp-view .count{ font-size:12px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:10px; padding:1px 8px; }
.lp-view .count:empty{ display:none; }
.lp-view .spacer{ flex:1 1 auto; }
.lp-view .muted{ color:var(--text-3); }
.lp-view .box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.lp-view .loading{ padding:24px; color:var(--text-3); }
.lp-view .kpi-ico{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); }
.lp-view .kpi-ico .ico{ width:22px; height:22px; }
.lp-view .form-error{ color:var(--bad); font-weight:700; font-size:12.5px; }
.lp-view .btn, .lp-confirm .btn{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border:1px solid var(--btn-bd, #c9ced6);
  border-radius:7px; background:var(--btn-bg, #f4f6f9); color:var(--btn-tx, #222); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.lp-view .btn:hover:not(:disabled), .lp-confirm .btn:hover{ background:var(--btn-bg-hv, #e9edf3); }
.lp-view .btn.primary, .lp-confirm .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.lp-view .btn.primary:hover:not(:disabled), .lp-confirm .btn.primary:hover{ filter:brightness(1.08); background:var(--accent); }
.lp-view .btn.danger{ color:#c0392b; border-color:#e7b6b0; background:#fff5f4; }
.lp-view .btn.sm{ height:28px; padding:0 10px; font-size:12px; }
.lp-view .btn:disabled{ opacity:.5; cursor:not-allowed; }
/* 확인 창 · 알림 */
.lp-confirm .modal{ width:420px; max-width:92vw; }
.lp-confirm .lp-cf-body{ padding:14px 18px; font-size:13.5px; line-height:1.6; }
.lp-confirm .lp-cf-foot{ display:flex; justify-content:flex-end; gap:6px; padding:0 18px 14px; }
#lpToast{ position:fixed; right:18px; bottom:18px; z-index:1000; display:flex; flex-direction:column; gap:6px; }
.lp-toast{ padding:10px 14px; border-radius:8px; background:#1e293b; color:#fff; font-size:13px; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.2);
  transition:opacity .3s, transform .3s; }
.lp-toast.bad{ background:#c0392b; }
.lp-toast.out{ opacity:0; transform:translateY(6px); }
/* 원문 : 회사명 · 담당자명 · 연락처 · 이메일 (입력 첫 줄 · 문서 보기) */
.lp-view .kp-contact{ padding-bottom:10px; border-bottom:1px dashed var(--border); }
.lp-view .kp-contact[hidden]{ display:none; }
.lp-view .kp-contact input[readonly]{ font-weight:700; color:var(--text); cursor:default; }   /* 조회 필드 (공용메모리 값) */
.lp-view .kp-row .f-co{ flex:0 1 220px; } .lp-view .kp-row .f-cn{ flex:0 0 140px; }
.lp-view .kp-row .f-ct{ flex:0 0 160px; } .lp-view .kp-row .f-ce{ flex:0 1 260px; }
.lp-view .kp-info dl .kp-co{ gap:6px 8px; flex-wrap:wrap; }
.lp-view .kp-info dl .kp-co dd{ margin-right:16px; }
/* 좌측 아래 [장애문제해결(LPMS)] 선택 표시 */
.nav-foot .nav-item.on{ background:var(--accent-soft); color:var(--accent); font-weight:800; }

/* 장애해결시스템(KPMS) — kpms.js 화면 (kp-*) */

/* 전-화면 ↔ 후-화면 스위치 */
.kp-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.kp-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.kp-switch button .ico { width: 15px; height: 15px; }
.kp-switch button:hover { color: var(--text); }
.kp-switch button.on { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }

/* 위 줄 (조회 · 버튼) */
.kp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.kp-bar select, .kp-bar .kp-q { width: auto; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
.kp-bar .kp-q { width: 220px; }
.kp-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.kp-sep { width: 1px; height: 22px; background: var(--border); margin: 0 2px; }
.kp-cur { font-size: 14px; }
.kp-mode { font-size: 12.5px; color: var(--text-3); }

/* 목록 */
.kp-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 290px); }
.kp-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.kp-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 12.5px;
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.kp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-table tbody tr { cursor: pointer; user-select: none; }
.kp-table tbody tr:hover { background: var(--surface-2); }
.kp-table tbody tr.sel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.kp-table tr.kp-main td { font-weight: 600; }
.kp-table tr.kp-main:not(:first-child) td { border-top: 1px solid var(--border-strong); }
.kp-table tr.kp-child td { color: var(--text-2); }
.kp-table tr.kp-child .c-title { padding-left: 28px; }
.kp-table .c-code { width: 112px; font-variant-numeric: tabular-nums; }
.kp-table .c-type { width: 64px; }
.kp-table .c-who { width: 96px; }
.kp-table .c-date { width: 108px; font-variant-numeric: tabular-nums; }
.kp-table .c-st { width: 64px; }
.kp-table .c-rm { width: 16%; color: var(--text-3); }
.kp-table .c-title small { color: var(--text-3); font-weight: 400; }
.kp-re { font-style: normal; color: var(--text-3); margin-right: 5px; }
.kp-empty { text-align: center; color: var(--text-3); padding: 28px !important; cursor: default; }
.kp-tip { font-size: 12px; color: var(--text-3); margin: 6px 4px 0; }

/* 타입 · 상태 표시 */
.kp-type, .kp-st { display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 18px; padding: 0 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.kp-type.t-원문 { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.kp-type.t-추가 { background: var(--dev-soft); color: var(--dev); border-color: transparent; }
.kp-type.t-답변 { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.kp-type.t-홀딩 { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.kp-type.t-취소 { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.kp-st.s-대기 { background: var(--surface-2); color: var(--text-2); }
.kp-st.s-진행 { background: var(--info-soft); color: var(--info); border-color: transparent; }
.kp-st.s-완료 { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.kp-st.s-홀딩 { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.kp-st.s-취소 { background: var(--bad-soft); color: var(--bad); border-color: transparent; }

/* 후-화면 : 문서 보기 (전체조회면 메일처럼 최근 문서부터, 아래로 갈수록 들여쓰기) */
.kp-none { text-align: center; padding: 40px 20px; }
.kp-thread { display: grid; gap: 12px; }
.kp-card { margin-left: calc(var(--depth, 0) * 28px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; }
.kp-card + .kp-card { border-left: 3px solid var(--border-strong); }
.kp-card.cur { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.kp-info { padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.kp-info-top { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.kp-info dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0 0; font-size: 12.5px; }
.kp-info dl div { display: flex; gap: 6px; }
.kp-info dl .wide { flex-basis: 100%; }
.kp-info dt { color: var(--text-3); font-weight: 600; }
.kp-info dd { margin: 0; color: var(--text); }
.kp-view { display: block; width: 100%; min-height: 120px; border: 0; background: #fff; }


/* 후-화면 가운데 : 진행상태 (원문 작성자) */
.kp-stbox { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 999px; background: var(--accent-soft); }
.kp-stbox label { font-size: 15px; font-weight: 800; color: var(--accent); }
.kp-bar .kp-stbox select { height: 34px; min-width: 104px; font-size: 15px; font-weight: 700; }
.kp-stbox .btn { font-size: 14px; font-weight: 800; }
.kp-stbox .kp-st { font-size: 14px; font-weight: 800; line-height: 24px; padding: 0 12px; }
.kp-stbox small { font-size: 14px; font-weight: 700; color: var(--text-2); padding-right: 6px; }
.kp-lock { font-size: 12.5px; font-weight: 700; color: var(--ok); background: var(--ok-soft); padding: 6px 12px; border-radius: 999px; }
.kp-dash { color: var(--text-3); padding-left: 10px; }

/* 후-화면 : 등록 · 수정 — 관리번호 · 타입 · 구분 · 제목 · 등록일 왼쪽, 상태 오른쪽 */
.kp-form { display: grid; gap: 0; }
.kp-info-form { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.kp-row { display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap; }
.kp-row .fld { display: grid; gap: 5px; min-width: 0; }
.kp-row .fld > span { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.kp-row .fld em { color: var(--bad); font-style: normal; }
.kp-row input, .kp-row select { width: 100%; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 13.5px; padding: 0 10px; min-width: 0; }
.kp-row input[readonly] { background: var(--surface-2); color: var(--text-2); }
.kp-row select:disabled { background: var(--surface-2); color: var(--text-2); }
.kp-row .f-code { flex: 0 0 120px; }
.kp-row .f-type { flex: 0 0 88px; }
.kp-row .f-cat { flex: 0 0 104px; }
.kp-row .f-title { flex: 0 1 440px; }
.kp-row .f-date { flex: 0 0 140px; }
.kp-row .f-st { flex: 0 0 88px; margin-left: auto; }
.kp-row .f-st input { text-align: center; font-weight: 700; }
.kp-row .f-who { flex: 0 0 120px; }
.kp-row .f-rm { flex: 1 1 300px; }
.kp-docbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.kp-docbar b { font-size: 13px; margin-right: 4px; }
.kp-fname { font-size: 12px; color: var(--accent); }
.kp-editor { display: flex; height: calc(100vh - 330px); min-height: 420px; border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; background: #fff; }
.kp-editor .lp-embed { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.kp-form .form-error { margin-top: 8px; }

@media (max-width: 860px) {
  .kp-switch button { padding: 6px 10px; }
  .kp-bar .kp-q { width: 140px; }
  .kp-table .c-rm, .kp-table .c-who { display: none; }
  .kp-row .f-title, .kp-row .f-rm { flex-basis: 100%; }
  .kp-row .f-st { margin-left: 0; }
  .kp-card { margin-left: calc(var(--depth, 0) * 12px); }
}