@charset "UTF-8";
/*
    이슈사항 (/issue/cust · /issue/vendor)

    두 화면이 같은 마크업을 쓴다. 상단 상태 탭 → 도구줄 → 목록,
    상세는 모달 안에서 [이슈 내용] + [처리내역] + [처리내역 등록] 순으로 쌓인다.
*/

.is-page{
    background:#fff; border:1px solid #e3e8f0; border-radius:10px; padding:16px 18px;
}

/* ── 상태 탭 ────────────────────────────────────────────── */

.is-tabs{
    display:flex; gap:6px; margin-bottom:12px;
    border-bottom:1px solid #e3e8f0; padding-bottom:10px;
}
.is-tab{
    padding:7px 16px; border:1px solid #dfe5ee; border-radius:20px;
    background:#fff; color:#41506a; font-size:13px; cursor:pointer;
}
.is-tab:hover{ border-color:#9dc0ee; color:#0a529d; }
.is-tab.is-on{ background:#0a529d; border-color:#0a529d; color:#fff; font-weight:700; }
.is-tab b{ font-weight:700; margin-left:2px; }

/* ── 도구줄 ─────────────────────────────────────────────── */

/* 대상 고르는 select.
   전에는 `.is-sel` 이었는데, 그건 다른 화면들이 '선택된 항목' 표시에 쓰는 이름이다.
   전역으로 height 를 걸어 고객사대시보드의 선택된 카드까지 36px 로 눌렀다.
   이름을 바꾸고 이 화면 안으로 좁힌다. */
.is-page .is-targetsel{ width:180px; height:36px; padding:0 10px; font-size:13px; }

.is-page .search-box{
    display:flex; align-items:center; width:260px; height:36px;
    border:1px solid #d8dee8; border-radius:6px; background:#fff; overflow:hidden;
}
.is-page .search-box input{
    flex:1 1 auto; min-width:0; height:100%; border:none; padding:0 12px; font-size:13px;
}
.is-page .search-box input:focus{ outline:none; }

/* ── 목록 ───────────────────────────────────────────────── */

.is-hint{ margin:0 0 6px 2px; font-size:12px; color:#8a94a6; }

.is-scroll{ max-height:calc(100vh - 360px); min-height:240px; overflow:auto; }
/* 열이 12개다. 폭 합이 화면보다 넓으면 '관리' 칸이 밀려 삭제 버튼이 안 보인다.
   최소 폭을 정해 가로 스크롤로 넘기고, 관리 칸은 오른쪽에 붙여 둔다. */
.is-table{ table-layout:fixed; min-width:1180px; }
.is-table .is-target{ font-weight:600; color:#41506a; }

/* 행 어디를 눌러도 상세가 열린다 */
.is-table tbody tr.is-row{ cursor:pointer; }
.is-table tbody tr.is-row:hover{ background:#f6faff; }

.is-open{
    font-size:13px; font-weight:600; color:#0a529d;
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.is-table tbody tr.is-row:hover .is-open{ text-decoration:underline; }

/* 관리 칸은 스크롤해도 오른쪽에 붙여 둔다 — 지우려고 매번 끝까지 밀지 않게 */
.is-table th:last-child,
.is-table td.is-act{
    position:sticky; right:0; z-index:1;
    background:#fff; box-shadow:-3px 0 6px -3px rgba(16,32,56,.16);
}
/* 공통 표 규칙(overflow:hidden + ellipsis)이 걸려 있어, 버튼이 칸보다 크면
   '...' 으로 잘려 보인다. 이 칸만 잘라내지 않게 풀고 버튼을 조금 좁힌다. */
.is-table td.is-act{
    overflow:visible; text-overflow:clip;
    padding-left:6px; padding-right:8px; white-space:nowrap;
}
.is-table td.is-act .btn.tiny{ min-width:0; padding:0 9px; margin-left:4px; }
.is-table td.is-act .btn.tiny:first-child{ margin-left:0; }
.is-table thead th:last-child{ background:#f4f7fb; }
.is-table tbody tr.is-row:hover td.is-act{ background:#f6faff; }

/* ── 모달 ───────────────────────────────────────────────
   이슈는 글이 길다. 좁은 칸에 밀어 넣으면 무슨 일인지 읽히지 않으므로
   다른 설정 모달(560px)보다 넓게 잡는다. */

.is-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.is-modal .modal__box{
    position:relative; width:min(820px, calc(100% - 32px)); max-height:92vh;
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}
.is-modal .modal__body{ overflow-y:auto; }
.is-modal .modal__card{ padding:20px 24px; }

/* ── 등록 · 수정 ────────────────────────────────────────── */

.is-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.is-ta{ height:190px; padding:10px 12px; resize:vertical; line-height:1.7; }
/* 결과는 내용보다 짧게 적는 칸 */
.is-ta--sm{ height:110px; }
/* 파일 고르는 칸. 아래 .is-file(첨부 칩)과 이름이 겹치지 않게 따로 둔다 */
.is-fileinput{ padding:6px 8px; height:auto; }
.is-files{ display:flex; flex-wrap:wrap; gap:6px; }

/* ── 상세 모달 ──────────────────────────────────────────── */

.is-modal .is-detailbox{ width:min(920px, calc(100% - 32px)); }
.is-detailbox .modal__body{ max-height:calc(92vh - 128px); overflow:auto; }

.is-dl{
    display:grid; grid-template-columns:80px 1fr; gap:6px 10px;
    margin:0 0 12px; font-size:13px;
}
.is-dl dt{ color:#77839a; font-weight:600; }
.is-dl dd{ margin:0; color:#243247; }

.is-content{
    padding:12px 14px; border:1px solid #eef1f6; border-radius:6px; background:#fafbfd;
    font-size:13px; color:#243247; line-height:1.7; white-space:normal;
}

/* 첨부 한 줄 */
.is-filelist{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.is-file{
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border:1px solid #dfe5ee; border-radius:14px; background:#fff;
    font-size:12px;
}
.is-file a{ color:#0a529d; text-decoration:none; font-weight:600; }
.is-file a:hover{ text-decoration:underline; }
.is-file i{ font-style:normal; color:#a9b2c1; }
.is-file-del{
    border:none; background:none; color:#c9313d; cursor:pointer;
    font-size:15px; line-height:1; padding:0 0 0 2px;
}

/* 결과 — 처리내역이 과정이고 이것이 결론이라 따로 떼어 눈에 띄게 둔다 */
.is-result{
    margin-top:16px; padding:12px 14px;
    border:1px solid #cfe3d6; border-radius:8px; background:#f4faf6;
}
.is-result.is-none{ border-color:#e6eaf1; background:#fafbfd; }
.is-result__head{
    display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.is-result__head h4{ font-size:14px; font-weight:700; color:#1f7a45; margin:0; }
.is-result.is-none .is-result__head h4{ color:#77839a; }
.is-result__who{ margin-left:auto; font-size:12px; color:#6b7789; }
.is-result__body{ font-size:13px; color:#243247; line-height:1.7; }
.is-result__empty{ margin:0; font-size:12px; color:#a9b2c1; }

/* 목록의 결과 칸 */
.is-hasresult{
    display:inline-block; padding:1px 8px; border-radius:9px;
    background:#eaf6ee; color:#1f7a45; font-size:11px; font-weight:700; cursor:help;
}

/* 처리내역 */
.is-acthead{
    display:flex; align-items:center; gap:8px;
    margin:20px 0 8px; padding-top:14px; border-top:1px solid #eef1f6;
}
.is-acthead h4{ font-size:15px; font-weight:700; color:#243247; margin:0; }
.is-n{
    display:inline-block; min-width:20px; padding:1px 7px; border-radius:10px;
    background:#eef3fb; color:#41506a; font-size:12px; font-weight:700; text-align:center;
}

.is-actions{ display:flex; flex-direction:column; gap:8px; }
.is-act{
    padding:10px 12px; border:1px solid #eef1f6; border-radius:6px; background:#fff;
    border-left:3px solid #0a529d;
}
.is-act__head{
    display:flex; align-items:center; gap:8px; margin-bottom:6px;
    font-size:12px; color:#77839a;
}
.is-act__dt{ font-weight:700; color:#41506a; }
.is-act__to{ color:#8a94a6; }
.is-act__who{ margin-left:auto; }
.is-act__body{ font-size:13px; color:#243247; line-height:1.7; }

.is-noact{
    padding:24px 10px; text-align:center; color:#8a94a6; font-size:13px;
}

/* 처리내역 등록 */
.is-newact{
    margin-top:18px; padding:14px; border:1px solid #dfeaf9; border-radius:8px; background:#f6faff;
}
.is-newact h4{ font-size:14px; font-weight:700; color:#0a529d; margin:0 0 10px; }
.is-newact .is-ta{ height:120px; }
.is-newact__foot{ text-align:right; }

@media (max-width:900px){
    .is-row2{ grid-template-columns:1fr; }
    .is-tabs{ flex-wrap:wrap; }
}