/* =============================================================================
   itms.css — KSTC-ITMS 전환 레이아웃
   현행 main.css 위에 얹는 최소 스타일. 화면 UX 는 현행을 유지한다.
   ============================================================================= */

:root {
    --itms-bg:        #f4f6f9;
    --itms-surface:   #ffffff;
    --itms-border:    #dfe3e8;
    --itms-text:      #21252b;
    --itms-muted:     #6b7280;
    --itms-primary:   #1f4e8c;
    --itms-primary-d: #16386a;
    --itms-nav-bg:    #232a35;
    --itms-nav-text:  #cfd6e4;
    --itms-danger:    #c0392b;
    --itms-warn-bg:   #fff8e1;
    --itms-warn-bd:   #f0c36d;
    --itms-ok:        #1e8e5a;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--itms-bg);
    color: var(--itms-text);
    font-family: "Malgun Gothic", "맑은 고딕", -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
}

a { color: inherit; text-decoration: none; }

/* ---- 헤더 ---------------------------------------------------------------- */
.itms-header {
    height: 52px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px; background: var(--itms-primary); color: #fff;
}
.itms-header-brand a { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.itms-header-sub { margin-left: 10px; font-size: 12px; opacity: .8; }
.itms-header-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.itms-logout-form { margin: 0; }

/* ---- 본문 배치 ------------------------------------------------------------ */
.itms-body { display: flex; height: calc(100vh - 52px); }
.itms-side-nav {
    width: 210px; flex: 0 0 210px; overflow-y: auto;
    background: var(--itms-nav-bg); color: var(--itms-nav-text); padding: 8px 0;
}
.itms-content { flex: 1; overflow: auto; padding: 16px 20px; }

/* ---- 좌측 메뉴 ------------------------------------------------------------ */
.itms-menu-group { border-bottom: 1px solid rgba(255,255,255,.06); }
.itms-menu-l1 {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; color: var(--itms-nav-text);
    padding: 11px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
    font-family: inherit;
}
.itms-menu-l1:hover { background: rgba(255,255,255,.06); color: #fff; }
.itms-menu-l1.active { background: rgba(255,255,255,.10); color: #fff; }
.itms-menu-arrow { transition: transform .15s; opacity: .6; }
.itms-menu-l1.active .itms-menu-arrow { transform: rotate(90deg); }
.itms-menu-l2 { display: none; padding: 4px 0 8px; background: rgba(0,0,0,.18); }
.itms-menu-l2.active { display: block; }
.itms-menu-item { display: block; padding: 8px 14px 8px 28px; font-size: 13px; color: #a9b3c6; }
.itms-menu-item:hover { color: #fff; background: rgba(255,255,255,.05); }
.itms-menu-item.current { color: #fff; background: rgba(255,255,255,.09); font-weight: 600; }
.itms-menu-empty { padding: 16px 14px; font-size: 12.5px; color: #8b95a7; line-height: 1.6; }

/* ---- 페이지 제목 / 버튼 ---------------------------------------------------- */
.itms-page-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.itms-page-title h2 { margin: 0; font-size: 18px; font-weight: 700; }
.itms-page-actions { display: flex; gap: 6px; }

.itms-btn {
    padding: 7px 15px; border: 1px solid var(--itms-border); border-radius: 3px;
    background: #fff; color: var(--itms-text); font-size: 13px; cursor: pointer;
    font-family: inherit;
}
.itms-btn:hover { background: #f0f2f5; }
.itms-btn-primary { background: var(--itms-primary); border-color: var(--itms-primary); color: #fff; }
.itms-btn-primary:hover { background: var(--itms-primary-d); }
.itms-btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.itms-btn-ghost:hover { background: rgba(255,255,255,.12); }
.itms-btn-block { display: block; width: 100%; padding: 11px; font-size: 14px; text-align: center; }

/* ---- 조회 조건 ------------------------------------------------------------ */
.itms-search {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    background: var(--itms-surface); border: 1px solid var(--itms-border); border-radius: 4px;
    padding: 12px 14px; margin-bottom: 12px;
}
.itms-search-fields { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.itms-search-fields label { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.itms-search-fields label > span { color: var(--itms-muted); white-space: nowrap; }
.itms-search-fields input[type=text] {
    height: 30px; padding: 0 8px; border: 1px solid var(--itms-border); border-radius: 3px;
    font-family: inherit; font-size: 13px;
}
.itms-select { min-width: 150px; }
/* 드롭다운이 아래 tui-grid(z-index 5~15)에 가려 잘려 보인다. 기본값 z-index:1 / max-height:145px 를 올린다 */
.tui-select-box-dropdown { z-index: 120; max-height: 320px; }

/* ---- 그리드 -------------------------------------------------------------- */
.itms-grid-wrap {
    background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 8px;
}

/* ---- 카드 ---------------------------------------------------------------- */
.itms-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.itms-card {
    background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 16px 18px;
}
.itms-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.itms-check { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.9; }
.itms-check li::before { display: inline-block; width: 20px; font-weight: 700; }
.itms-check li.done::before { content: "✓"; color: var(--itms-ok); }
.itms-check li.todo::before { content: "…"; color: var(--itms-muted); }
.itms-check li.todo { color: var(--itms-muted); }

.itms-health dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; margin: 0 0 12px; font-size: 13px; }
.itms-health dt { color: var(--itms-muted); }
.itms-health dd { margin: 0; font-weight: 600; }
.itms-health .bad { color: var(--itms-danger); }

.itms-alert { padding: 11px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }
.itms-alert-warn { background: var(--itms-warn-bg); border: 1px solid var(--itms-warn-bd); }
.itms-alert small { color: var(--itms-muted); }

/* ---- 로그인 / 에러 --------------------------------------------------------- */
body.itms-empty { display: flex; align-items: center; justify-content: center; }
.itms-login-wrap { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.itms-login-box {
    width: 360px; background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 6px; padding: 34px 30px; box-shadow: 0 2px 16px rgba(0,0,0,.06); text-align: center;
}
.itms-login-brand { margin-bottom: 22px; }
.itms-login-logo {
    display: block; margin: 0 auto 14px; height: 62px; width: auto; max-width: 100%;
}
.itms-login-box h1 { margin: 0; font-size: 18px; font-weight: 700; }
.itms-login-sub { margin: 5px 0 0; font-size: 11.5px; color: var(--itms-muted); letter-spacing: .4px; }
.itms-field { display: block; text-align: left; margin-bottom: 12px; }
.itms-field > span { display: block; font-size: 12.5px; color: var(--itms-muted); margin-bottom: 5px; }
.itms-field input {
    width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--itms-border);
    border-radius: 3px; font-family: inherit; font-size: 14px;
}
.itms-field input:focus { outline: none; border-color: var(--itms-primary); }
.itms-login-error {
    background: #fdecea; border: 1px solid #f5c6c2; color: var(--itms-danger);
    padding: 9px 12px; border-radius: 3px; font-size: 12.5px; margin-bottom: 14px; text-align: left;
}
.itms-login-foot { margin: 20px 0 0; font-size: 11px; color: var(--itms-muted); }
.itms-error-code { margin: 0 0 8px; font-size: 46px; color: var(--itms-primary); }
.itms-error-msg { color: var(--itms-muted); font-size: 13.5px; line-height: 1.7; margin-bottom: 20px; }

/* ---- 알림 모달 ------------------------------------------------------------ */
.itms-toast-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35);
    align-items: center; justify-content: center; z-index: 9999;
}
.itms-toast {
    width: 340px; background: #fff; border-radius: 5px; padding: 20px 22px;
    box-shadow: 0 6px 28px rgba(0,0,0,.22);
}
.itms-toast-title { font-weight: 700; margin-bottom: 10px; font-size: 14.5px; }
.itms-toast-body { font-size: 13.5px; line-height: 1.65; color: #333; white-space: pre-line; min-height: 42px; }
.itms-toast-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; }
.itms-toast-actions button {
    padding: 7px 17px; border-radius: 3px; border: 1px solid var(--itms-border);
    background: #fff; cursor: pointer; font-family: inherit; font-size: 13px;
}
.itms-toast-ok { background: var(--itms-primary) !important; border-color: var(--itms-primary) !important; color: #fff; }

/* ---- 파일 뷰어 (보관함 행 클릭 → 화면 안에서 보기) ------------------------ */
.itms-viewer-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
    align-items: center; justify-content: center; z-index: 9998;
}
.itms-viewer {
    width: min(1200px, calc(100vw - 40px)); height: calc(100vh - 40px);
    background: #fff; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
    display: flex; flex-direction: column; overflow: hidden;
}
.itms-viewer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--itms-border); background: var(--itms-surface);
}
.itms-viewer-title { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itms-viewer-actions { display: flex; gap: 6px; flex: none; }
.itms-viewer-body { flex: 1; min-height: 0; background: #525659; display: flex; align-items: center; justify-content: center; overflow: auto; }
.itms-viewer-body iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.itms-viewer-body img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; }

/* ---- 2분할 화면 (그룹/권한, 코드그룹/코드) --------------------------------- */
.itms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .itms-split { grid-template-columns: 1fr; } }
.itms-split-pane {
    background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 10px 12px 12px;
}
.itms-pane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.itms-pane-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.itms-pane-head h3 small { color: var(--itms-muted); font-weight: 400; margin-left: 5px; }
.itms-pane-head > div { display: flex; gap: 5px; }

/* ---- 폼 카드 (비밀번호 변경) ------------------------------------------------ */
.itms-form-card {
    max-width: 420px; background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 22px 24px;
}
.itms-form-card .itms-field > span small { color: var(--itms-muted); font-weight: 400; }
.itms-form-hint { min-height: 18px; font-size: 12.5px; margin: 2px 0 12px; }
.itms-form-hint.bad { color: var(--itms-danger); }
.itms-form-hint.ok  { color: var(--itms-ok); }

/* ---- 조회조건 date 입력 ---------------------------------------------------- */
.itms-search-fields input[type=date] {
    height: 30px; padding: 0 8px; border: 1px solid var(--itms-border);
    border-radius: 3px; font-family: inherit; font-size: 13px;
}

/* ---- 마스터-디테일 상세 영역 (P3: 접수/무상/유상/견적) ---------------------- */
.itms-detail {
    background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 12px 14px 16px;
}
.itms-detail-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.itms-detail-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.itms-detail-head h3 small { color: var(--itms-muted); font-weight: 400; margin-left: 4px; }
.itms-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--itms-muted); }
.itms-detail-meta span { white-space: nowrap; }

.itms-detail-row { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 10px; }
.itms-detail-row label { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.itms-detail-row label.wide { flex: 1 1 100%; }
.itms-detail-row label.wide input { flex: 1; }
.itms-detail-row label > span { color: var(--itms-muted); white-space: nowrap; }

/* 상세 입력 폼 그리드 */
.itms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 10px 18px; }
.itms-form-grid label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.itms-form-grid label.wide { grid-column: 1 / -1; }
.itms-form-grid label.tall { align-items: flex-start; }
.itms-form-grid label > span { width: 74px; flex: none; color: var(--itms-muted); }
.itms-form-grid input[type=text],
.itms-form-grid input[type=date],
.itms-form-grid select,
.itms-form-grid textarea {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px;
    border: 1px solid var(--itms-border); border-radius: 3px;
    font-family: inherit; font-size: 13px; background: #fff;
}
.itms-form-grid textarea { height: auto; padding: 6px 8px; line-height: 1.5; resize: vertical; }
.itms-form-grid input[readonly], .itms-form-grid textarea[readonly],
.itms-form-grid input:disabled, .itms-form-grid select:disabled { background: #f4f5f7; color: #666; }
.itms-form-grid .itms-select { flex: 1; min-width: 0; }
@media (max-width: 900px) { .itms-form-grid { grid-template-columns: 1fr; } }

/* ---- 견적/유상 금액 입력 테이블 -------------------------------------------- */
.itms-cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.itms-cost-table th, .itms-cost-table td {
    border: 1px solid var(--itms-border); padding: 4px 8px; height: 32px;
}
.itms-cost-table thead th { background: #f5f6f8; font-weight: 600; }
.itms-cost-table td.num, .itms-cost-table th.num { text-align: right; }
.itms-cost-table input {
    width: 100%; height: 26px; padding: 0 6px; border: 1px solid transparent;
    border-radius: 3px; font-family: inherit; font-size: 13px; background: transparent;
}
.itms-cost-table input:focus { outline: none; border-color: var(--itms-primary); background: #fff; }
.itms-cost-table input:disabled { color: #777; }
.itms-cost-table input.num { text-align: right; }
.itms-cost-total td { background: #f5f6f8; font-weight: 700; }

/* ---- 사원 관리 (APP-15) : 좌측 목록 + 우측 이력카드 -------------------------
   주의: .itms-split 은 두-그리드 화면(사용자그룹/공통코드)이 쓰는 기존 클래스라
   여기서는 .itms-emp-split 로 분리한다 (같은 이름을 덮어쓰면 그 화면들이 깨진다) */
.itms-emp-split { display: flex; gap: 12px; align-items: flex-start; }
.itms-split-left { flex: 0 0 46%; min-width: 420px; }
.itms-split-right { flex: 1; min-width: 0; }
.itms-emp-panel {
    background: var(--itms-surface); border: 1px solid var(--itms-border);
    border-radius: 4px; padding: 14px 16px;
}
.itms-emp-section { margin: 16px 0 8px; font-size: 14px; font-weight: 700; }
.itms-emp-basic { display: flex; gap: 16px; align-items: flex-start; }
.itms-emp-photo { flex: 0 0 120px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.itms-emp-photo img {
    width: 120px; height: 150px; object-fit: cover;
    border: 1px solid var(--itms-border); border-radius: 4px; background: #f4f5f7;
    color: var(--itms-muted); font-size: 12px; text-align: center; line-height: 150px;
}
.itms-emp-photo-btns { display: flex; gap: 4px; }
.itms-emp-photo-btns .itms-btn { padding: 3px 8px; font-size: 12px; }
.itms-emp-section small { font-weight: 400; color: var(--itms-muted); }
.itms-emp-no { font-weight: 400; font-size: 13px; color: var(--itms-primary); margin-left: 6px; }
.itms-cost-table select {
    width: 100%; height: 26px; padding: 0 4px; border: 1px solid transparent;
    border-radius: 3px; font-family: inherit; font-size: 13px; background: transparent;
}
.itms-cost-table select:focus { outline: none; border-color: var(--itms-primary); background: #fff; }
@media (max-width: 1400px) { .itms-emp-split { flex-direction: column; } .itms-emp-split .itms-split-left { flex: none; width: 100%; } .itms-emp-split .itms-split-right { width: 100%; } }

/* ---- 견적서 입력 (현행 팝업 배치 재현) -------------------------------------- */
.itms-cost-head { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.itms-cost-head th, .itms-cost-head td { border: 1px solid var(--itms-border); padding: 6px 10px; }
.itms-cost-head th { background: #e8f4fb; font-weight: 600; width: 120px; text-align: left; white-space: nowrap; }
.itms-cost-head td { background: #fff; }
.itms-cost-head-desc { min-height: 60px; white-space: pre-line; vertical-align: top; }

/* 고정 배분: 좌우 내용요약 입력칸이 같은 폭을 갖도록 한다 */
.itms-cost-entry { table-layout: fixed; width: 100%; }
.itms-cost-entry th { background: #f5f6f8; font-weight: 600; white-space: nowrap; width: 88px; }
.itms-cost-entry td.itms-cost-cat { background: #f5f6f8; font-weight: 700; text-align: center; width: 52px; }
.itms-cost-entry td.w-num { width: 104px; }
.itms-cost-entry td { overflow: hidden; }
.itms-cost-entry input { border: 1px solid #e2e5ea; background: #fff; }
.itms-cost-sum th, .itms-cost-sum td { background: #f5f6f8; }
.itms-cost-sum td.num { font-weight: 600; }
.itms-cost-grand { font-weight: 700 !important; font-size: 14px; }

/* ---- 주간 보고서 (APP-16) --------------------------------------------------- */
.itms-dropzone {
    margin: 0 0 12px; padding: 14px; text-align: center; font-size: 13px;
    color: var(--itms-muted); background: #fafbfc;
    border: 2px dashed var(--itms-border); border-radius: 6px;
    transition: border-color .15s, background .15s;
}
.itms-dropzone.over { border-color: var(--itms-primary); background: #eef5ff; color: var(--itms-primary); }

/* ---- 출장보고서 미리보기 (APP-17) ------------------------------------------- */
.itms-trip-preview {
    margin: 0; padding: 12px 14px; max-height: 480px; overflow: auto;
    background: #fafbfc; border: 1px solid var(--itms-border); border-radius: 4px;
    font-family: inherit; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-all;
}
.itms-week-table td { vertical-align: top; white-space: pre-line; }
.itms-week-table textarea {
    width: 100%; border: 1px solid #e2e5ea; border-radius: 3px;
    font-family: inherit; font-size: 13px; padding: 5px 7px;
    line-height: 1.5; resize: vertical; background: #fff;
}
.itms-week-table textarea:focus { outline: none; border-color: var(--itms-primary); }
.itms-week-table th { background: #f5f6f8; }

/* ---- 조회조건 옆 안내 문구 (현황 화면) ------------------------------------- */
.itms-search-note { margin-left: 10px; font-size: 12px; color: var(--itms-muted); align-self: center; }

/* ---- 메인 공지 목록 --------------------------------------------------------- */
.itms-notice-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.itms-notice-list li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--itms-border);
}
.itms-notice-list li:last-child { border-bottom: none; }
.itms-notice-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itms-notice-date  { color: var(--itms-muted); font-size: 12px; white-space: nowrap; }
.itms-empty { color: var(--itms-muted); padding: 7px 0; }