@charset "UTF-8";

/* ============================================================
   Search Header
   ============================================================ */
#supply_usim .search-box {
    flex: 1;
    max-width: 400px;
}

/* ============================================================
   Util Bar
   ============================================================ */
#supply_usim .form--tbl__util .total p     { margin: 0; }
#supply_usim .form--tbl__util .total span  { color: #047bb6; font-weight: 700; }

#supply_usim .supply_usim_btn-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #c6c6c6;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
}
#supply_usim .supply_usim_btn-refresh:hover {
    border-color: #047bb6;
    background-color: #f0f7fb;
}

/* ============================================================
   Table — 밀집형 (라우터 관리와 동일 규격)

   공통 bit.css 가 tbody td 를 40px · thead 38px 로 잡고 있으므로
   여기서는 sticky 머리글이 확실히 붙도록 스크롤 규칙만 정한다.
   ============================================================ */

/* 스크롤 영역 — sticky thead 가 확실히 동작하도록 브라우저 기본 스크롤을 쓴다.
   (simplebar 는 스크롤 주체를 자기 래퍼로 옮겨 sticky 기준이 흔들린다) */
#content #supply_usim .su-tbl {
    border: 1px solid #dbe3ed;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* 스크롤 컨테이너.
   - 데이터가 적으면 자기 높이만큼만 쓰고 (min-height: 0)
   - 데이터가 많으면 화면을 잘라 스크롤한다 (max-height 유지)
   페이지네이션은 아래 `.btn-pagination-group { margin-top: auto }` 로 하단에 고정한다. */
#content #supply_usim .su-tbl__scroll {
    min-height: 0;
    /* 스크롤은 SimpleBar 가 담당(data-simplebar).
       root overflow:hidden 이면 SimpleBar 가 오버플로우를 못 잡아 스크롤바가 안 뜬다 → visible */
    overflow: visible;
}
/* 세로 스크롤바가 sticky 헤더(38px)를 덮지 않도록 track 을 헤더 아래에서 시작시킨다 */
#content #supply_usim .su-tbl__scroll .simplebar-track.simplebar-vertical {
    top: 38px;
}

#content #supply_usim .su-tbl__scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#content #supply_usim .su-tbl__scroll::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background-clip: content-box;
    background-color: #c8d2de;
}

#content #supply_usim #supply_usim_table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    /* index.css 의 `.form-tbl table { overflow: hidden }` 을 반드시 되돌려야 한다.
       표에 overflow 가 걸리면 표 자체가 스크롤 컨테이너가 되고,
       thead 의 sticky 는 '스크롤되지 않는 그 표' 를 기준으로 잡혀 고정이 안 된다. */
    overflow: visible;
}

#supply_usim .tbl-td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 페이지네이션·등록 버튼 줄을 화면 하단에 고정.
   #supply_usim 이 flex-column(flex:1) 이라 margin-top:auto 하나로
   위 요소들 뒤에 남는 공간을 다 먹고 페이지네이션 줄이 바닥에 붙는다.
   데이터가 적을 때 표가 짧아져도 이 줄은 그 자리에 남는다. */
#supply_usim .btn-pagination-group {
    margin-top: auto;
}

/* ============================================================
   Pagination & Action
   ============================================================ */
#supply_usim .pagination-wrap {
    min-height: 40px;
}
#supply_usim #supply_usim_pagination {
    margin-top: 20px;
}

/* ============================================================
   상세 모달 오버라이드
   (기본 overlay·dialog·header 는 디자인 시스템 .modal 이 처리)
   ============================================================ */
#supply_usim_detailBackdrop .modal-dialog {
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
/* 상세 모달 레이아웃·기본정보 스타일은 아래 "상세 모달: 좌) 유심 정보 우) 유심 이력" 절에 있다.
   (예전 stats--modal / modal__card 래퍼와 박스형 form-value 규칙은 자산 상세 디자인 적용 시 제거) */
#supply_usim_detailBackdrop .round--btn {
    min-width: 120px;
    height: 45px;
}

/* ============================================================
   등록/수정 모달 오버라이드
   ============================================================ */
#supply_usim_editBackdrop .modal-dialog {
    width: 90%;
    max-width: 750px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
#supply_usim_editBackdrop .modal-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#supply_usim_editBackdrop .modal-section {
    background-color: #fff;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid #e5e7eb;
}
#supply_usim_editBackdrop .modal-section:last-child { margin-bottom: 0; }
/* 소제목 스타일 : modal_skin.css 공통 */
#supply_usim_editBackdrop .section-title {
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
#supply_usim_editBackdrop .section-content {
    display: flex;
    flex-direction: column;
}
#supply_usim_editBackdrop .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
    min-width: 0;
}
#supply_usim_editBackdrop .form-group:last-child { margin-bottom: 0; }
#supply_usim_editBackdrop .form-ti {
    flex-shrink: 0;
}
#supply_usim_editBackdrop .form-ti.w100 { width: 100px; }
#supply_usim_editBackdrop .form-ti.required::after {
    content: '*';
    color: #e54e57;
    margin-left: 3px;
}
#supply_usim_editBackdrop .form-control {
    flex: 1;
    height: 34px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 15px;
    color: #1d1d1d;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#supply_usim_editBackdrop .form-control:focus { border-color: #047bb6; }
#supply_usim_editBackdrop .form-control[readonly] {
    background: #f3f4f6;
    color: #6b7280;
}
#supply_usim_editBackdrop select.form-control {
    appearance: auto;
    -webkit-appearance: auto;
}
#supply_usim_editBackdrop .round--btn {
    min-width: 120px;
    height: 45px;
}

/* 등록 모달 박스(.modal-section) 안쪽에서만 SimpleBar 로 스크롤(네이티브 금지).
   본문·박스·폼 영역을 flex 로 묶어 박스 테두리가 늘 다 보이게 하고,
   내용이 넘치면 박스 안 스크롤 영역(data-simplebar)만 스크롤한다. */
#supply_usim_editBackdrop .modal-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#supply_usim_editBackdrop .section-content {
    flex: 1 1 auto;
    min-height: 0;
}
#supply_usim_editBackdrop .su-reg-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================
   상세 모달: 좌) 유심 정보  우) 유심 이력
   (단말 관리 supply_parts.css 의 sp-detail-* / sd-asset-* 디자인 차용)
   ============================================================ */
#supply_usim_detailBackdrop .su-detail-dialog {
    width: 820px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
/* 박스 밖(본문)은 회색, 상하좌우 14px 여백으로 박스를 감싼다 */
/* 본문 전체가 SimpleBar 스크롤 호스트(data-simplebar).
   overflow:hidden 금지 — SimpleBar 의 recalculate() 가 루트의 computed overflowY 를 읽어
   `"hidden" !== overflowY && isOverflowing` 으로 덮어쓰기 때문에, hidden 이면
   넘쳐도 스크롤바가 안 뜬다.
   그렇다고 visible 로 두면 height:inherit(→auto) 인 .simplebar-wrapper 가 내용 높이만큼
   자라서 본문 박스 밖으로 흘러내려 푸터(취소·삭제)를 덮는다 → 버튼이 안 눌렸다.
   clip 은 computed 값이 "hidden" 이 아니라 SimpleBar 판정을 건드리지 않으면서
   넘친 부분만 잘라낸다. 스크롤 컨테이너도 만들지 않는다.
   padding 14px 는 SimpleBar 가 .simplebar-content 로 옮겨 주므로 그대로 둔다. */
#supply_usim_detailBackdrop .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: clip;
    background: #fff;
    padding: 14px;
}
/* 푸터를 positioned 로 올려 둔다.
   .modal-content 는 position:relative + z-index:auto 라 스택 컨텍스트를 만들지 않아,
   그 안의 .simplebar-mask / .simplebar-offset / .simplebar-track (모두 absolute) 이
   dialog 스택 컨텍스트에서 static 인 푸터보다 위에 그려진다.
   푸터에 z-index 를 줘서 어떤 경우에도 버튼이 클릭을 받도록 보장한다. */
#supply_usim_detailBackdrop .modal-footer {
    position: relative;
    z-index: 2;
}
#supply_usim_detailBackdrop .su-detail-layout {
    display: flex;
    align-items: stretch;
    gap: 14px;
    max-height: 420px;
    overflow: hidden;
}
#supply_usim_detailBackdrop .su-detail-left {
    flex: 0 0 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#supply_usim_detailBackdrop .su-detail-right {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 좌/우 카드 공통 = 흰색 프레임 박스(테두리 1px #dfe6ef, radius 8). 회색 위에 14px 간격으로 뜬다 */
#supply_usim_detailBackdrop .section_content {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    padding: 24px;
}
/* 소제목 스타일 : modal_skin.css 공통 */
#supply_usim_detailBackdrop .section-title {
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}
/* 좌측 기본정보 카드: 제목 고정 + 정보행이 남은 높이를 채움 */
#supply_usim_detailBackdrop .su-detail-left .section_content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* 점선 구분 행 + 박스 없는 값 (자산 상세 기본 정보와 동일) */
#supply_usim_detailBackdrop .form.view-mode {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
}
/* 행 전체(항목명+값)를 긋던 점선을 값 칸에만 긋는다 → 항목명 아래는 선이 없다 */
#supply_usim_detailBackdrop .form-group-view {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 0;
    font-size: 14px;
}
#supply_usim_detailBackdrop .form-label {
    flex: 0 0 110px;
}
#supply_usim_detailBackdrop .form-value {
    flex: 1 1 auto;
    word-break: break-all;
    overflow-wrap: anywhere;
}
/* 값 점선 밑줄 : modal_skin.css 공통 */
#supply_usim_detailBackdrop .su-detail-scroll {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#supply_usim_detailBackdrop .su-hist-scroll {
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 720px) {
    #supply_usim_detailBackdrop .su-detail-layout {
        flex-direction: column;
        max-height: none;
    }
}

/* ── 이력 타임라인 ── */
#supply_usim_detailBackdrop .sd-asset-timeline {
    list-style: none;
    margin: 0;
    padding: 2px;
}
#supply_usim_detailBackdrop .sd-asset-timeline__item {
    position: relative;
    padding: 0 0 18px 22px;
    margin-left: 5px;
    border-left: 2px solid #e5e7eb;
}
#supply_usim_detailBackdrop .sd-asset-timeline__item:last-child {
    padding-bottom: 2px;
    border-left-color: transparent;
}
#supply_usim_detailBackdrop .sd-asset-timeline__item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #047bb6;
    box-sizing: border-box;
}
/* 분리(OUT) 이력은 점 색을 달리해 장착과 구분 */
#supply_usim_detailBackdrop .sd-asset-timeline__item[data-direction="OUT"]::before {
    border-color: #9ca3af;
}
#supply_usim_detailBackdrop .sd-asset-timeline__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#supply_usim_detailBackdrop .sd-asset-timeline__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
#supply_usim_detailBackdrop .su-hist__device {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    background: #dbeafe;
    color: #1d4ed8;
}
#supply_usim_detailBackdrop .sd-asset-timeline__item[data-direction="OUT"] .su-hist__device {
    background: #e5e7eb;
    color: #6b7280;
}
#supply_usim_detailBackdrop .sd-asset-timeline__meta {
    margin-top: 3px;
    font-size: 12px;
    color: #9ca3af;
}
#supply_usim_detailBackdrop .su-hist__counter,
#supply_usim_detailBackdrop .su-hist__reason,
#supply_usim_detailBackdrop .su-hist__user {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
    word-break: break-all;
    overflow-wrap: anywhere;
}
#supply_usim_detailBackdrop .su-hist__counter {
    color: #c2410c;
}
#supply_usim_detailBackdrop .sd-asset-empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    border: none;
    background: none;
}