@charset "UTF-8";
/* =========================================================================
   공용 모달 스킨 (mskin)
   - 사용법: 기존 .modal-dialog 에 mskin 클래스를 추가하고,
     헤더는 [아이콘 + 제목/부제 + 닫기], 본문은 .mskin__scroll[data-simplebar] 로 감싼다.
   - .modal / .modal.active(display:flex) 개폐 방식은 그대로 사용.
   - index.css 의 기본 .modal .modal-dialog ... 규칙을 이기도록 selector 를 한 단계 더 준다.
   ========================================================================= */

.modal .modal-dialog.mskin {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    max-height: 85vh;
    box-shadow: 0 18px 48px rgba(16, 32, 56, .28);
}

/* ── 헤더 ─────────────────────────────────────────── */
.modal .modal-dialog.mskin .modal-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f7f9fc 0%, #eff4fa 100%);
    color: #12315a;
    border-radius: 12px 12px 0 0;
}
/* 기본 .modal-header span{color:#fff} 되돌림 */
.modal .modal-dialog.mskin .modal-header span { color: inherit; }

/* 헤더 아이콘 = 파란 박스 + 흰 글리프(좌측 메뉴 아이콘 nav-m0X.svg 를 mask). cs-modal 과 동일한 파랑.
   글리프는 페이지별로 --mskin-ico 로 지정 */
.mskin__ico {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #0a529d;
    position: relative;
}
.mskin__ico::before {
    content: "";
    position: absolute;
    inset: 7px;
    background-color: #fff;
    -webkit-mask: var(--mskin-ico) no-repeat center / var(--mskin-ico-size, contain);
    mask: var(--mskin-ico) no-repeat center / var(--mskin-ico-size, contain);
}
/* ── 헤더 아이콘(글리프)은 --mskin-ico 변수로 지정.
   값은 MAIN.applyModalIcon() 이 현재 페이지의 좌측 메뉴 활성 섹션 아이콘(nav-m0X.svg)으로
   :root 에 실시간 세팅한다 → 메뉴 순서와 무관하게 항상 좌측 메뉴와 동일. ── */

.mskin__ttl {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.mskin__ttl > b,
.mskin__ttl > strong,
.mskin__ttl > span,
.mskin__ttl > h1,
.mskin__ttl > h2,
.mskin__ttl > h3,
.mskin__ttl > h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  //  line-height: 1.35;
    color: #12315a;
}
.mskin__ttl i { font-style: normal; font-size: 12px; color: #7c8797; line-height: 1.4; }

/* 닫기 × (기존 빈 버튼에 글리프를 얹는다) */
.modal .modal-dialog.mskin .modal-header button {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    background-image: none;
    color: #8a94a1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
}
.modal .modal-dialog.mskin .modal-header button::before { content: "\00d7"; color: #8a94a1; font-size: 32px; line-height: 1; }
.modal .modal-dialog.mskin .modal-header button:hover { background: rgba(10, 82, 157, .08); }
.modal .modal-dialog.mskin .modal-header button:hover::before { color: #0a529d; }

/* ── 본문 : 고정 영역(헤더/푸터 사이) ─────────────────
   기본(mskin)은 본문 네이티브 스크롤, mskin--sb 는 내부 SimpleBar 사용 */
.modal .modal-dialog.mskin .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
}
.modal .modal-dialog.mskin.mskin--sb .modal-content {
    padding: 0;
    overflow: hidden;
}
/* mskin--sb 의 본문 스크롤 호스트.
   height:100% 는 부모(.modal-content)의 높이가 확정돼 있을 때만 의미가 있다.
   dialog 가 max-height 만 갖는 이 구조에서는 높이가 순환해서 본문이 찌그러졌다
   (supply/store 창고 등록 : dialog 133px, 카드 42px 로 눌렸다).
   → 내용 높이대로 두고 상한만 준다. dialog 의 max-height(85vh) 에서 헤더·푸터(≈150px)를 뺀다. */
.modal .modal-dialog.mskin .mskin__scroll {
    height: auto;
    max-height: calc(85vh - 150px);
}
.modal .modal-dialog.mskin .mskin__scroll .simplebar-wrapper,
.modal .modal-dialog.mskin .mskin__scroll .simplebar-mask,
.modal .modal-dialog.mskin .mskin__scroll .simplebar-offset,
.modal .modal-dialog.mskin .mskin__scroll .simplebar-content-wrapper {
    height: auto;
    max-height: none;
    min-height: 0;
}
.modal .modal-dialog.mskin .mskin__scroll .simplebar-content {
    box-sizing: border-box;
    /* 본문 여백은 상하좌우 14px 동일 (카드형 모달의 .modal__card{margin:14px} 과 같은 값) */
    padding: 14px;
}

/* ── 푸터 ─────────────────────────────────────────── */
.modal .modal-dialog.mskin .modal-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    /* 버튼이 모달 가장자리에 붙어 답답해 보이므로 bit.css 의 .modal .modal-footer 표준(14px 20px)에 맞춘다 */
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #eaeff5;
    border-radius: 0 0 12px 12px;
}
/* 버튼: 좌우로 벌어지지 않고 우측에 함께, 알약(round--btn) 대신 기본 사각(radius 5) */
.modal .modal-dialog.mskin .modal-footer .modal-footer__actions {
    margin-left: 0;
    gap: 8px;
}
.modal .modal-dialog.mskin .modal-footer .btn.round--btn {
    border-radius: 5px;
}

/* =========================================================================
   __ 구조 모달(oper 등) : 헤더/푸터/닫기만 스킨 적용 (프레임/본문은 각 페이지 유지)
   - dialog 는 .modal--form.<page>.mskin, 내부는 .modal__header/__title/__close/__footer
   - 페이지 CSS(파란 헤더·커스텀 × 선) 를 이기도록 .modal--form.mskin 로 특정
   ========================================================================= */
.modal--form.mskin .modal__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f7f9fc 0%, #eff4fa 100%);
    border-bottom: 0;
}
.modal--form.mskin .modal__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #12315a;
}
/* 닫기 × : 기존 '닫기' 텍스트·× 선(::before/::after) 제거하고 회색 글리프로 */
.modal--form.mskin .modal__close {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: transparent;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal--form.mskin .modal__close::before {
    content: "\00d7";
    position: static;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    transform: none;
    color: #8a94a1;
    font-size: 32px;
    line-height: 1;
}
.modal--form.mskin .modal__close::after { display: none; }
.modal--form.mskin .modal__close:hover { background: rgba(10, 82, 157, .08); }
.modal--form.mskin .modal__close:hover::before { color: #0a529d; }
/* 푸터 : 버튼 우측 정렬(cs-modal 동일) */
.modal--form.mskin .modal__footer {
    display: flex;                 /* 같은 이유로 스킨에서 직접 선언 */
    flex: none;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eaeff5;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
}
.modal--form.mskin .modal__footer .modal__actions {
    margin-left: 0;
    gap: 8px;
}
.modal--form.mskin .modal__footer .btn.round--btn { border-radius: 5px; }

/* ============================================================
   modal__box 구조 (cs-modal 계열: account/user, account/role, system/menu)
   .modal__dim / .modal__box / .modal__head / .modal__close(&times; 텍스트) / .modal__foot
   → 헤더 그라데이션+아이콘, 큰 × 회색→호버 파랑. 푸터는 원래 우측정렬 유지.
   ============================================================ */
.modal__box.mskin {
    overflow: hidden;               /* 헤더 상단 라운드가 박스 밖으로 안 삐져나오게 */
}
.modal__box.mskin .modal__head {
    /* display:flex 를 여기서 직접 선언한다. 예전에는 페이지 CSS(.au-modal .modal__head 등)가
       flex 를 줬고 스킨은 정렬만 덮었는데, 그러면 페이지 CSS 를 걷어낸 화면에서 헤더가
       block 으로 떨어져 아이콘·제목·× 가 세로로 쌓인다. 스킨만으로 완결되게 한다. */
    display: flex;
    flex: none;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    height: auto;
    padding: 12px 16px;
    background: linear-gradient(180deg, #f7f9fc 0%, #eff4fa 100%);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.modal__box.mskin .mskin__ttl h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #12315a;
}
.modal__box.mskin .modal__close {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #8a94a1;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal__box.mskin .modal__close:hover {
    background: rgba(10, 82, 157, .08);
    color: #0a529d;
}
/* 푸터 : 버튼 우측 정렬. display:flex 도 스킨에서 직접 선언(헤더와 같은 이유) */
.modal__box.mskin .modal__foot {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid #eaeff5;
}
.modal__box.mskin .modal__foot .btn.round--btn { border-radius: 5px; }

/* ── 푸터 버튼 공통 모양 ───────────────────────────────
   취소 · 확인 · 닫기 · 이전 같은 보조 버튼은 [파란 테두리 + 흰 배경 + 파란 글자].
   채움형(.primary/.danger/.blue) 과 별도 디자인 시스템(.btn--primary/.btn--secondary)은
   제외해서 제출 버튼의 강조는 그대로 남긴다. */
.modal .modal-dialog.mskin .modal-footer .btn:not(.primary):not(.danger):not(.blue):not(.btn--primary):not(.btn--secondary),
.modal--form.mskin .modal__footer .btn:not(.primary):not(.danger):not(.blue):not(.btn--primary):not(.btn--secondary),
.modal__box.mskin .modal__foot .btn:not(.primary):not(.danger):not(.blue):not(.btn--primary):not(.btn--secondary) {
    border: 1px solid #047bb6;
    color: #047bb6;
    background: #fff;
}


/* =========================================================================
   모달 내용 박스 (일괄) — 기준: app/hist 상세
   · 박스 밖(본문)은 흰색 #fff, 박스 안도 흰색 + 테두리(1px #dfe6ef, radius 8)
   · 상하좌우 14px 동일 여백, 박스는 본문 폭/높이에 맞춰 고정(테두리 다 보임)
   · 표준 구조(modal-content > stats--modal > (inner) > modal__card)는 내부에서만 스크롤
   ========================================================================= */

/* 박스 밖(본문) 흰색 */
.mskin .modal-content,
.mskin .modal__body { background: #fff; }

/* 흰 테두리 박스(공통 모양) — base .modal__card{width:480px} 무효화 */
.mskin .modal__card {
    width: auto;
    align-self: stretch;
    margin: 14px;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
}

/* 카드형(stats--modal) 구조: 박스를 본문 높이에 맞춰 고정 + 내부 스크롤 */
.mskin .modal-content:has(> .stats--modal),
.mskin .modal__body:has(> .stats--modal) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mskin .stats--modal {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}
.mskin .stats--modal > div,
.mskin .stats--modal__inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mskin .stats--modal .modal__card {
    flex: 1 1 auto;
    min-height: 0;
    /* overflow:hidden 금지 — SimpleBar 는 컨테이너의 computed overflow-y 가 hidden 이면
       isOverflowing 을 false 로 만들어 트랙·막대를 숨긴다. 클리핑은 .simplebar-mask 가 한다.
       이 규칙은 stats--modal 구조를 쓰는 모달 전부(app/hist · content/set · content/text ·
       system/code · system/hist · system/qna · apk/adm · apk/deploy · app/remote)에 걸린다. */
    overflow: visible;
}


/* =========================================================================
   모달 body 자동 스크롤 (SimpleBar) — 테두리 박스(.modal__card) 개수로 결정
   - 테두리 박스가 1개  → 그 박스가 SimpleBar 스크롤 컨테이너 = "테두리 안에서 스크롤"
   - 테두리 박스가 2개+ → body 가 SimpleBar 스크롤 컨테이너 = "모달 전체 영역 스크롤"
   - 마커 클래스(mskin__body--sb1 / mskin__body--sb2)와 래퍼 체인 표시(mskin__flex)는
     MAIN.applyModalBodyScroll 이 런타임에 붙인다. SimpleBar 가 자식 트리를
     .simplebar-wrapper 로 감싸기 때문에 :has() 매칭이 깨져서, JS 로 클래스를 확정한다.
   - 카드가 .stats--modal / .stats--modal__inner 같은 래퍼 안에 중첩돼 있어도 성립하도록
     선택자는 자식(>) 이 아니라 후손으로 두고, 중간 래퍼는 mskin__flex 가 높이를 전달한다.
   ========================================================================= */

/* 공통: 본문을 flex column 으로 고정해 내부(카드 또는 body)에서 스크롤이 성립 */
.mskin .modal-content.mskin__body--sb1,
.mskin .modal-content.mskin__body--sb2,
.mskin .modal__body.mskin__body--sb1,
.mskin .modal__body.mskin__body--sb2 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* !! SimpleBar 는 컨테이너의 computed overflow-y 가 hidden 이면 isOverflowing 을 강제로
   false 로 만들어 스크롤바(트랙·막대)를 숨긴다. 실제 클리핑은 .simplebar-mask 가 하므로
   SimpleBar 가 붙는 요소에는 overflow:hidden 을 주면 안 된다.
     · sb1 → 컨테이너는 카드. body 는 컨테이너가 아니므로 hidden 으로 넘침만 막는다.
     · sb2 → 컨테이너가 body 자신. 반드시 visible 이어야 스크롤바가 보인다. */
.mskin .modal-content.mskin__body--sb1,
.mskin .modal__body.mskin__body--sb1 { overflow: hidden; }
.mskin .modal-content.mskin__body--sb2,
.mskin .modal__body.mskin__body--sb2 { overflow: visible; }

/* ── 카드 1개: 카드가 스크롤 컨테이너(테두리 안에서 스크롤) ────────── */

/* body ~ 카드 사이의 래퍼(stats--modal, stats--modal__inner, 익명 div …).
   높이 전달이 한 단계라도 끊기면 카드가 늘어나지 않아 스크롤이 안 생긴다. */
.mskin .mskin__body--sb1 .mskin__flex {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.mskin .mskin__body--sb1 .modal__card {
    flex: 1 1 auto;
    min-height: 0;
    /* overflow:hidden 금지 — SimpleBar 가 스크롤바를 숨겨버린다(위 주석 참고).
       카드 테두리 밖으로 내용이 새지 않게 하는 일은 .simplebar-mask 가 한다. */
    overflow: visible;
}
/* 카드 안 SimpleBar 가 카드 높이를 꽉 채우도록 */
.mskin .mskin__body--sb1 .modal__card > .simplebar-wrapper,
.mskin .mskin__body--sb1 .modal__card > .simplebar-wrapper .simplebar-mask,
.mskin .mskin__body--sb1 .modal__card > .simplebar-wrapper .simplebar-offset,
.mskin .mskin__body--sb1 .modal__card > .simplebar-wrapper .simplebar-content-wrapper {
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

/* ── 카드 2개+: body 가 스크롤 컨테이너, 카드는 자기 컨텐츠 높이대로 ── */
.mskin .modal-content.mskin__body--sb2,
.mskin .modal__body.mskin__body--sb2 {
    padding: 0;         /* 스크롤 여백은 카드 margin(14px) 이 담당 */
}
.mskin .mskin__body--sb2 .simplebar-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.mskin .mskin__body--sb2 .modal__card {
    flex: none;         /* body 가 스크롤하므로 카드는 늘어나지 않는다 */
}


/* 모달 라벨 / 값 — 여기서만 정한다. 이름이 다르면 m-label / m-value 표식.
   필수 별표(.required::after)·잠금(.is-locked) 같은 상태 색은 화면 CSS 유지 */
.modal .form-label,
.modal .form-ti,
.modal .sp-info__label,
.modal .stats--modal dl > div > dt,
.modal dl.form-view-list dt,
.mskin .form-label,
.mskin .form-ti,
.mskin .sp-info__label,
.mskin .stats--modal dl > div > dt,
.mskin dl.form-view-list dt,
.m-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}
.modal .form-value,
.modal .form-value-textarea,
.modal .sp-info__value,
.modal .stats--modal dl > div > dd,
.modal dl.form-view-list dd,
.mskin .form-value,
.mskin .form-value-textarea,
.mskin .sp-info__value,
.mskin .stats--modal dl > div > dd,
.mskin dl.form-view-list dd,
.m-value {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1d;
    line-height: 1.45;
}


/* 소제목 별칭 클래스들의 여백·구분선. 크기·굵기·색은 아래 공통 규칙이 담당 */
.mskin .section-title,
.mskin .cs-mgroup,
.mskin .stats--modal__title,
.mskin .modal__card-title {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3eaf3;
}
/* 필수 표시(*) 등 소제목 안 강조 */
.mskin .section-title em,
.mskin .cs-mgroup em { color: #c0392b; font-style: normal; }


/* ============================================================
   모달 소제목 / 값 — 전 화면 통틀어 여기서만 정한다.
     소제목 <h3 class="section-title">   값 <span class="form-value">
     이름이 다르면 m-subtitle / m-value 표식만 덧붙인다 (색·점선만 갖는 표식)
   ★ 페이지 CSS 에 색·크기·점선을 다시 쓰지 말 것
   ============================================================ */
.modal .section-title,
.modal .stats--modal__title,
.modal .modal__card-title,
.modal .cs-mgroup,
.mskin .section-title,
.mskin .stats--modal__title,
.mskin .modal__card-title,
.mskin .cs-mgroup,
.m-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #047bb6;
}


/* 값 = 상자 없이 점선 밑줄. 항목명 아래에는 긋지 않는다.
   !important : bit.css 의 `.form-value{border:0!important}` 리셋을 되살리려고.
   .m-value 단독 규칙은 .modal 조상이 없는 oper 모달(.modal-backdrop)용. */
.m-value {
    padding-bottom: 5px;
    border-bottom: 1px dashed #d9dee6;
}
#content .modal .form-value,
#content .modal .form-value-textarea,
#content .modal .m-value {
    padding-bottom: 5px !important;
    border-bottom: 1px dashed #d9dee6 !important;
    background: transparent !important;
}
/* 여러 줄 값(.form-value-textarea)도 같은 밑줄을 받는다 — 한 모달 안에서
   '업데이트 내용'만 밑줄이 빠져 보이던 문제.
   입력창(.form-control)에는 붙이지 않는다 — 자기 테두리가 있어 겹치면 지저분하다 */