/* Sla.css — HOME SLA 열람 모달(#sla-modal) + 문서 본문(.sla-doc). V1/Index.aspx 전용.
   CUST ServiceInfo 의 SLA 모달(DEVY.CUST/V3/css/Sla.css + ServiceInfo.aspx #slaModal)과 같은 모양을 HOME 에서 재현한다.
   ⚠ .sla-doc 본문 규칙은 CUST/ADM Sla.css 와 같은 값을 유지할 것(사이트별 자산 분리 관례상 사본).
   HOME V1 은 Bulma + template.css(Bootstrap 4 리부트 계열) 위에서 돌아 Bootstrap 5 CSS 가 없다 — 그래서
   ① 모달 셸을 .modal 이 아닌 .sla-modal 로 직접 만들고(Bulma/BS4 의 .modal 과 충돌 방지)
   ② CUST 라이트 테마 토큰을 #sla-modal 스코프에 선언하고
   ③ 전역 리셋(ul/ol list-style:none, h2 2rem, body Poppins 회색 .875rem, a transition)을 이 스코프에서 되돌린다. */

#sla-modal {
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-tertiary-bg: #f1f3f5;
    --bs-link-color: #0d6efd;
    --bs-modal-bg: #fff;
    --mf-brand: #2f6bff;
    --mf-border: #e6e9f0;
    --mf-muted: #8a93a6;
    --mf-row-border: #f0f2f6;
    --mf-tint-neutral-bg: #f1f3f5;
    --mf-tint-neutral-fg: #868e96;
    --mf-tint-ok-bg: #e6f7ee;
    --mf-tint-ok-fg: #0f9d58;
    --mf-tint-warn-bg: #fff4e0;
    --mf-tint-warn-fg: #c77800;
}

/* ── 모달 셸(Bootstrap 5 modal 외형 재현) — 빈 공간 클릭으로 닫히지 않는다(ESC·X만, 전역 모달 규칙) ──
   z-index 10000: V1 의 우측 퀵메뉴 aside·page-loader(9999)보다 위, WebGate 대기 화면 #mf-ui-wrapper(999999)보다 아래. */
#sla-modal.sla-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 0 2vw; }
#sla-modal.sla-modal.is-open { display: flex; animation: sla-fade .15s linear; }
#sla-modal .sla-modal-dialog {
    width: 1024px; max-width: min(1024px, 96vw); height: 768px; max-height: min(768px, 92vh);
    display: flex; flex-direction: column; background: var(--bs-modal-bg); border: 1px solid rgba(0, 0, 0, .175);
    border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); overflow: hidden; outline: 0;
    font-family: -apple-system, "Segoe UI", "Malgun Gothic", system-ui, sans-serif; font-size: 1rem; line-height: 1.5;
    font-weight: 400; color: #2b3243; text-align: left; animation: sla-slide .3s ease-out;
}
@keyframes sla-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sla-slide { from { transform: translateY(-50px); } to { transform: none; } }
#sla-modal .sla-modal-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: .5rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
#sla-modal .sla-modal-title { margin: 0; font-family: inherit; font-size: 1.25rem; font-weight: 500; line-height: 1.5; color: #212529; }
#sla-modal .sla-modal-title i { margin-right: .25rem; }
#sla-modal .sla-modal-close {
    box-sizing: content-box; width: 1em; height: 1em; padding: .25em; margin: -.5rem -.5rem -.5rem auto; border: 0; border-radius: .375rem; opacity: .5; cursor: pointer;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}
#sla-modal .sla-modal-close:hover { opacity: .75; }
#sla-modal .sla-modal-close:focus-visible { opacity: 1; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
#sla-modal .sla-modal-body { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 0; }
html.sla-modal-open, html.sla-modal-open body { overflow: hidden; }

/* ── 뷰어 공용 헬퍼(Sla.js 가 토글하는 클래스 — CUST 는 Bootstrap 유틸리티, HOME 은 여기서 정의) ── */
#sla-modal .d-none { display: none !important; }
#sla-modal .fw-semibold { font-weight: 600; }
#sla-modal .sla-empty { color: #6c757d; padding: 3rem 0; text-align: center; }
#sla-modal a { transition: none; }

/* ── 뷰어 바(상태 배지·버전 드롭다운·인쇄) — 본문 스크롤 시에도 상단 고정 ── */
#sla-modal .sla-bar { position: sticky; top: 0; z-index: 2; background: var(--bs-modal-bg); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.05rem; border-bottom: 1px solid var(--mf-border); }
#sla-modal .sla-bar .state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .86rem; padding: .25rem .7rem; border-radius: 999px; }
#sla-modal .sla-bar .state:empty { display: none; }
#sla-modal .sla-bar .state.current { background: var(--mf-tint-ok-bg); color: var(--mf-tint-ok-fg); }
#sla-modal .sla-bar .state.upcoming { background: var(--mf-tint-warn-bg); color: var(--mf-tint-warn-fg); }
#sla-modal .sla-bar .state.past { background: var(--mf-tint-neutral-bg); color: var(--mf-tint-neutral-fg); }
#sla-modal .sla-bar .sla-title-short { color: #6c757d; font-size: .875em; }
#sla-modal .sla-bar .spacer { flex: 1; }
#sla-modal .sla-bar label { display: inline; margin: 0; color: #6c757d; font-size: .875em; font-weight: 400; }
#sla-modal .sla-select {
    width: auto; min-width: 15rem; height: auto; margin: 0; padding: .25rem 2.25rem .25rem .5rem; font-family: inherit; font-size: .875rem; line-height: 1.5; color: #212529;
    border: 1px solid var(--bs-border-color); border-radius: .25rem; -webkit-appearance: none; appearance: none; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") right .5rem center / 16px 12px no-repeat;
}
#sla-modal .sla-select:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
/* 버튼 최소 폭 — 전역 규칙(코딩표준 §4.0) .btn-sm 4rem 과 같은 값 */
#sla-modal .sla-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 4rem; margin: 0; padding: .25rem .5rem;
    font-family: inherit; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #6c757d; text-transform: none; letter-spacing: normal;
    background: transparent; border: 1px solid #6c757d; border-radius: .25rem; cursor: pointer; transition: color .15s, background-color .15s;
}
#sla-modal .sla-btn:hover { color: #fff; background: #6c757d; }

#sla-modal .sla-banner { margin: 0 1.05rem; padding: .6rem .9rem; border-radius: 8px; font-size: .86rem; }
#sla-modal .sla-banner.upcoming { background: var(--mf-tint-warn-bg); color: var(--mf-tint-warn-fg); }
#sla-modal .sla-banner.past { background: var(--mf-tint-neutral-bg); color: var(--mf-tint-neutral-fg); }
#sla-modal .sla-banner a { color: var(--bs-link-color); text-decoration: underline; }

/* ── 본문 + 목차 ── */
#sla-modal .sla-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.25rem; padding: 1.05rem; }
#sla-modal .sla-toc { position: sticky; top: 4rem; align-self: start; font-size: .82rem; line-height: 1.5; border-left: 2px solid var(--mf-border); padding-left: .75rem; }
#sla-modal .sla-toc a { display: block; color: var(--mf-muted); text-decoration: none; padding: .2rem 0; }
#sla-modal .sla-toc a:hover { color: var(--mf-brand); }
#sla-modal .sla-doc-title { font-family: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #212529; margin: 0 0 .25rem; }
#sla-modal .sla-doc-sub { color: var(--mf-muted); font-size: .85rem; margin-bottom: 1rem; }

/* ── 변경 이력 ── */
#sla-modal .sla-history { padding: 0 1.05rem 1.05rem; }
#sla-modal .sla-history h3 { font-family: inherit; font-size: .875em; font-weight: 600; line-height: 1.5; color: #6c757d; margin: 0 0 .5rem; }
#sla-modal .sla-history table { width: 100%; border-collapse: collapse; font-size: .85rem; }
#sla-modal .sla-history th, #sla-modal .sla-history td { border-bottom: 1px solid var(--mf-row-border); padding: .45rem .5rem; text-align: left; color: #2b3243; }
#sla-modal .sla-history th { color: var(--mf-muted); font-weight: 600; font-size: .76rem; }
#sla-modal .sla-history a { color: var(--bs-link-color); text-decoration: underline; }

@media (max-width: 991px) { #sla-modal .sla-layout { grid-template-columns: 1fr; } #sla-modal .sla-toc { display: none; } }

/* ── SLA 문서 본문(.sla-doc) — CUST/ADM Sla.css 와 같은 규칙. 인쇄 iframe(Sla.js printDoc)도 이 파일을 링크한다. ── */
.sla-doc { font-size: .92rem; line-height: 1.7; color: var(--bs-body-color); }
.sla-doc h2 { font-family: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--bs-body-color); margin: 1.6rem 0 .6rem; padding-top: .9rem; border-top: 1px solid var(--bs-border-color); scroll-margin-top: 5rem; }
.sla-doc h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.sla-doc h3 { font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--bs-body-color); margin: 1rem 0 .4rem; }
.sla-doc p { margin: 0 0 .7rem; }
.sla-doc ul, .sla-doc ol { padding-left: 1.4rem; margin: 0 0 .8rem; }
.sla-doc ul { list-style: disc; }
.sla-doc ol { list-style: decimal; }
.sla-doc li { margin-bottom: .3rem; }
.sla-doc strong, .sla-doc b { font-weight: 700; color: inherit; }
.sla-doc table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; font-size: .9em; }
.sla-doc th, .sla-doc td { border: 1px solid var(--bs-border-color); padding: .5rem .7rem; text-align: left; vertical-align: top; color: inherit; }
.sla-doc thead th { background: var(--bs-tertiary-bg); font-weight: 600; }
.sla-doc tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bs-tertiary-bg) 45%, transparent); }
.sla-doc a { color: var(--bs-link-color); text-decoration: underline; }
.sla-doc hr { margin: 1.2rem 0; border: 0; border-top: 1px solid var(--bs-border-color); }
@media print {
  .sla-doc { font-size: 11pt; }
  .sla-doc h2 { break-after: avoid; }
  .sla-doc table, .sla-doc tr { break-inside: avoid; }
  .sla-doc thead th { background-color: #f1f3f5 !important; }
  .sla-doc tbody tr:nth-child(even) td { background-color: #f8f9fa !important; }
}