@charset "UTF-8";

/* ===== 설치 구성 관리 (supply_package) =====
   패널 · 목록 · 상세 머리 · 모달 2단 배치는 supply_type.css 의 .st-* 규격을 그대로 쓴다.
   여기서는 이 화면에서만 다른 것만 지정한다. */

/* ── 2단 배치 : 구성 목록 / 구성 항목 ─────────────────────── */
.pk-cols {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 440px;
}

@media (max-width: 1200px) {
    .pk-cols { grid-template-columns: 1fr; grid-template-rows: auto; }
    .pk-cols .st-list-scroll { max-height: 260px; }
}

/* 검색줄 : 설치 대상 select + 검색창 */
#supply_package .pk-search { align-items: center; }
#supply_package .pk-search__target { flex: 0 0 84px; height: 32px; padding: 0 6px; font-size: 14.5px; }
#supply_package .pk-search .search-box { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; }
#supply_package .pk-search .search-box input {
    width: 100%; height: 100%; border: none; padding: 0 10px; font-size: 15px;
}
#supply_package .pk-search .search-box .search-btn {
    flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; padding: 0;
}

/* ── 목록 항목 : 코드 · 버전 위, 구성명 아래 ─────────────────── */
.pk-item { height: auto; min-height: 58px; }
.pk-item__wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pk-item__top { display: flex; align-items: center; gap: 6px; }
.pk-item__ver { font-size: 12.5px; font-weight: 700; color: #8e97a4; }
.pk-item__off {
    padding: 0 6px; border-radius: 999px; background: #fdecee; color: #c4320a;
    font-size: 12px; font-weight: 700;
}
.pk-item.is-off .st-item__name { color: #8e97a4; }

/* ── 상세 머리 : 버전 select + 상태 배지 ──────────────────── */
#supply_package .pk-ver { flex: 0 0 auto; width: auto; height: 28px; padding: 0 26px 0 8px; font-size: 14px; }
.pk-badge {
    flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
    background: #e7f6ec; color: #228738; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pk-badge.is-off { background: #f1f3f7; color: #667085; }
.pk-act-btn--line { background: #fff; color: #047bb6; }
.st-act-btn[hidden] { display: none; }
#supply_package .st-bar__right[hidden] { display: none; }

/* ── 상세 본문 ────────────────────────────────────────────── */
.pk-info {
    display: flex; flex-wrap: wrap; gap: 8px 28px;
    margin-bottom: 10px; padding: 10px 12px;
    border: 1px solid #e5e9ef; border-radius: 8px; background: #fafbfd;
}
.pk-info__item { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.pk-info__item span { color: #8e97a4; }
.pk-info__item b { color: #1d1d1d; font-weight: 600; }

.pk-old-notice {
    margin: 0 0 10px; padding: 8px 12px; border-radius: 8px;
    background: #fff6e6; color: #9a5b00; font-size: 14px;
}
.pk-old-notice[hidden], .pk-rules[hidden], #supply_package .st-detail__desc[hidden] { display: none; }
#supply_package .st-detail__desc { margin-bottom: 10px; }

#content #supply_package .pk-tbl { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#content #supply_package .pk-tbl .tbody-scroll { flex: 1 1 auto; max-height: none; min-height: 120px; }
#supply_package .pk-tbl table { table-layout: fixed; width: 100%; }
#supply_package .pk-tbl tbody tr { height: 44px; }
#supply_package .pk-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pk-tree { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pk-tree__line { color: #b4bdc8; font-size: 13px; }
.pk-tree__name { overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #1d1d1d; }

.pk-kind {
    flex: 0 0 auto; padding: 0 6px; border-radius: 4px;
    background: #eef1f5; color: #5b6472; font-size: 12px; font-weight: 700;
}
.pk-kind--router, .pk-kind--usim { background: #eaf3fb; color: #0a529d; }
.pk-kind--app { background: #e7f6ec; color: #228738; }
.pk-kind--check { background: #fff6e6; color: #9a5b00; }

.pk-req { color: #8e97a4; font-weight: 600; }
.pk-req.is-on { color: #047bb6; }
.pk-dim { color: #b4bdc8; }

.pk-rules {
    margin: 10px 0 0; padding: 9px 12px 9px 28px;
    border-radius: 8px; background: #f4f7fa; font-size: 14px; color: #475467; line-height: 1.7;
}
.pk-rules b { color: #0a529d; }

/* ── 등록 · 수정 모달 : 항목 열이 많아 장비 유형 모달보다 넓게 ── */
.pk-form-dialog { width: 1400px; }

#supplyPackageModal .modal-content {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding: 0; overflow: hidden; background: #fff;
}
#supplyPackageModal .st-form-cols { grid-template-columns: 260px minmax(0, 1fr); }

.pk-newver { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }

.pk-items-head { align-items: center; }
.pk-items-head__ttl { margin: 0; padding: 0; border: 0; }

#content .modal .pk-edit tbody td .form-control {
    width: 100%; height: 32px; padding: 0 6px; font-size: 14px;
}
#content .modal .pk-edit tbody td select.form-control { padding-right: 20px; }
#content .modal .pk-edit tbody td.pk-f-no { color: #8e97a4; font-weight: 700; }
.pk-f-act { white-space: nowrap; }
.pk-f-btn {
    width: 22px; height: 24px; padding: 0; border: 1px solid #d0d5dd; border-radius: 4px;
    background: #fff; color: #667085; font-size: 11px; line-height: 1; cursor: pointer;
}
.pk-f-btn + .pk-f-btn { margin-left: 2px; }
.pk-f-btn:hover { border-color: #047bb6; color: #047bb6; }
.pk-f-del:hover { border-color: #e54e57; color: #e54e57; }
.pk-edit-hint { margin-top: 8px; }

/* 허용 장비유형 버튼 (여러 개 선택) */
#content .modal .pk-edit tbody td .pk-f-type {
    display: block; text-align: left; background: #fff; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#content .modal .pk-edit tbody td .pk-f-type.is-empty { color: #9aa5b2; }
#content .modal .pk-edit tbody td .pk-f-type:disabled { background: #f1f3f7; color: #b4bdc8; cursor: default; }

.pk-type-pop {
    position: fixed; z-index: 10050; width: 260px; max-height: 340px;
    display: flex; flex-direction: column;
    border: 1px solid #cbd8e6; border-radius: 8px; background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}
.pk-type-pop[hidden] { display: none; }
.pk-type-pop__ttl {
    margin: 0; padding: 9px 12px; border-bottom: 1px solid #eef2f7;
    font-size: 14px; font-weight: 700; color: #0a529d;
}
.pk-type-pop__ttl i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; font-weight: 400; color: #8e97a4; }
.pk-type-pop__list { overflow-y: auto; padding: 4px 0 6px; }
.pk-type-pop__cat { margin: 6px 0 2px; padding: 0 12px; font-size: 12.5px; font-weight: 700; color: #8e97a4; }
.pk-type-pop__item { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 14.5px; cursor: pointer; }
.pk-type-pop__item:hover { background: #f2f6fb; }
.pk-type-pop__empty { margin: 0; padding: 16px 12px; color: #9aa5b2; font-size: 14px; text-align: center; }
#content .modal .pk-edit tbody td .pk-f-type[hidden], #content .modal .pk-edit tbody td .pk-f-parts[hidden] { display: none; }