@charset "UTF-8";
/*
    자원관리 > 장비관리 (/asset/equip)

    틀은 다른 목록 화면과 같다 (도구줄 → 표 → 모달).
    여기만의 것은 두 가지다.
      · 장비유형을 코드가 아니라 태그 칩으로 붙이고, 그 칩으로 거른다
      · 남은 대수는 적는 값이 아니라 세어지는 값이라, 적는 칸과 다르게 보이게 둔다
*/

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

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

.eq-tool{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.eq-tool__left{ flex:1 1 320px; min-width:0; }
.eq-tool__right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.eq-search{ width:250px; height:36px; }
.eq-search input{ height:100%; width:100%; padding:0 12px; font-size:14px; }

.eq-only{
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; color:#41506a; cursor:pointer; white-space:nowrap;
}
.eq-only input{ width:16px; height:16px; cursor:pointer; }

/* ── 태그 거르개 ────────────────────────────────────────── */

.eq-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.eq-tagbtn{
    padding:6px 13px; border:1px solid #dfe5ee; border-radius:16px;
    background:#fff; color:#41506a; font-family:inherit; font-size:13px;
    cursor:pointer; white-space:nowrap;
}
.eq-tagbtn:hover{ border-color:#9dc0ee; color:#0a529d; }
.eq-tagbtn.is-on{ background:#0a529d; border-color:#0a529d; color:#fff; font-weight:700; }
.eq-tagbtn b{ font-weight:700; opacity:.75; }
.eq-tagbtn.is-on b{ opacity:.9; }

.eq-hint{
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    margin:0 2px 10px; font-size:12px; color:#77839a;
}
.eq-hint b{ color:#41506a; }
.eq-total{ margin-left:auto; color:#41506a; }
.eq-total b{ color:#0a529d; font-weight:700; }

/* ── 표 ─────────────────────────────────────────────────── */

.eq-scroll{ max-height:calc(100vh - 340px); }
.eq-table tbody tr.eq-row{ cursor:pointer; }
.eq-table tbody tr.eq-row:hover{ background:#f6faff; }
.eq-nm{ font-weight:600; color:#1b2b46; }
.eq-num{ text-align:center; }

/* 세어지는 값 — 적는 칸과 달리 보이게 굵게 둔다 */
.eq-remain{ color:#1f7a45; font-weight:700; }
.eq-zero  { color:#c9313d; font-weight:700; }   /* 더 못 내보낸다 */
.eq-out   { color:#a3670a; font-weight:700; }

/* ── 태그 칩 ────────────────────────────────────────────── */

.eq-chip{
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 9px; border-radius:12px;
    background:#eef3fa; color:#0a529d; font-size:12px; font-weight:600;
    white-space:nowrap;
}
.eq-chip.is-sm{ margin:1px 3px 1px 0; font-size:11px; padding:2px 8px; }
.eq-chip__x{
    border:0; background:none; padding:0 0 0 2px; margin:0;
    color:#5a86bb; font-size:15px; line-height:1; cursor:pointer;
}
.eq-chip__x:hover{ color:#c9313d; }

/* 입력칸 : 칩이 쌓이고 그 뒤에 글자를 친다 (칸 전체가 한 덩어리로 보이게) */
.eq-taginput{
    display:flex; flex-wrap:wrap; align-items:center; gap:5px;
    min-height:46px; padding:7px 10px;
    border:1px solid #dfe5ee; border-radius:8px; background:#fff; cursor:text;
}
.eq-taginput:focus-within{ border-color:#0a529d; box-shadow:0 0 0 1px #0a529d inset; }
.eq-taginput__in{
    flex:1 1 180px; min-width:120px;
    border:0; outline:none; background:none;
    font-family:inherit; font-size:14px; color:#1b2b46;
}

/* ── 모달 ───────────────────────────────────────────────── */

.eq-modal .modal__dim{ position:absolute; inset:0; background:rgba(16,32,56,.45); }
.eq-modal .modal__box{
    position:relative; width:min(760px, calc(100% - 32px));
    margin:4vh auto; display:flex; flex-direction:column;
    background:#fff; border-radius:10px; overflow:hidden;
}
/* 상자 높이를 고정해 정보 · 반출회수가 같은 칸을 쓰게 한다.
   내용에 맡기면 탭을 오갈 때마다 모달이 늘었다 줄었다 해서 버튼 자리가 움직인다. */
.eq-modal .modal__box{ height:min(760px, 92vh); }
.eq-modal .modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; }

.eq-sub{ font-style:normal; font-weight:400; color:#8b95a6; font-size:12px; margin-left:4px; }
.eq-row2{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px; }
.eq-ta{ height:80px; padding:9px 12px; resize:vertical; line-height:1.6; }

/* ── 반출 · 회수 ────────────────────────────────────────── */

/* 제 탭을 가졌으니 정보와 끊던 선은 없앤다 */
.eq-moves{ display:flex; flex-direction:column; }

/* 셈의 결과를 한 줄로 먼저 보여 준다 — 기록을 남기기 전에 보는 값이다 */
.eq-sum{
    display:flex; flex-wrap:wrap; gap:18px; margin-bottom:12px;
    padding:10px 14px; border:1px solid #e6eaf1; border-radius:8px; background:#fafbfd;
    font-size:13px; color:#41506a;
}
.eq-sum b{ margin-left:4px; font-size:16px; }

.eq-mhead{ margin-bottom:8px; }
.eq-mhead h4{ margin:0; font-size:14px; font-weight:700; color:#1b2b46; }
/* 적는 칸과 쌓인 기록 사이를 선으로 끊는다 — 둘이 붙어 있으면 어디까지가 입력인지 모른다 */
.eq-mhead--list{ margin-top:18px; padding-top:14px; border-top:1px solid #e6eaf1; }
.eq-n{
    display:inline-block; min-width:20px; margin-left:4px; padding:1px 7px;
    background:#eef3fa; color:#0a529d; border-radius:10px; font-size:12px; font-weight:700;
}

/* 한 줄로 적게 둔다 — 여러 건을 잇달아 넣는 일이 많다 */
.eq-mform{
    display:grid; grid-template-columns:130px 80px minmax(0, 1fr) 150px auto;
    gap:6px; align-items:center;
}
.eq-mform .form-control{ height:38px; font-size:13.5px; }
.eq-mform .btn{ height:38px; width:auto; padding:0 14px; white-space:nowrap; }
.eq-mmemo{ height:64px; margin-top:6px; padding:8px 12px; font-size:13.5px;
            line-height:1.6; resize:vertical; }

.eq-mlist{ display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.eq-mempty{ padding:14px 0; text-align:center; font-size:13px; color:#8a94a6; }

/* 한 건 = 두 줄.
     첫 줄  5대 / 현대IT / 2026-09-23 / 황진태
     둘째 줄 덧붙인 말 — 줄이지 않고 다 보여 준다.
             시리얼 · 수령인이 적히는 자리라 '…' 로 끝나면 적어 둔 뜻이 없다. */
.eq-mrow{
    padding:9px 11px; border:1px solid #eef1f6; border-radius:6px; font-size:13px;
}
.eq-mrow:has(.eq-mmemo__v){ background:#fcfdff; }

.eq-mline{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.eq-msep { color:#c3cad6; }

.eq-mtp{
    flex:0 0 auto; width:46px; text-align:center; padding:2px 0; border-radius:9px;
    font-size:11px; font-weight:700; color:#fff;
}
.eq-mtp.is-out{ background:#a3670a; }
.eq-mtp.is-rtn{ background:#1f7a45; }
.eq-mcnt { font-size:14px; font-weight:700; color:#1b2b46; }
.eq-mplace{ color:#243247; font-weight:600; }
.eq-mplace i{ font-style:normal; font-weight:400; color:#a9b2c1; }
.eq-mdt  { color:#6b7688; }
.eq-mwho { color:#6b7688; }

/* 둘째 줄. 줄바꿈을 살리고 길어도 다 편다 */
.eq-mmemo__v{
    margin-top:6px; padding-top:6px; border-top:1px dashed #e6eaf1;
    color:#41506a; font-size:12.5px; line-height:1.65;
    white-space:normal; word-break:break-word;
}
.eq-mdel{
    margin-left:auto; border:0; background:none;
    color:#c9313d; font-size:16px; line-height:1; cursor:pointer; padding:0 2px;
}

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 1024px){
    .eq-scroll{ max-height:none; }
    .eq-search{ width:100% !important; }
    .eq-row2{ grid-template-columns:1fr; }
    .eq-mform{ grid-template-columns:1fr 1fr; }
    .eq-mform .btn{ grid-column:1 / -1; }
    .eq-modal .modal__box{ height:100%; }
}