/* Sla.css — HOME SLA 안내 페이지(/sla = V3/Sla.aspx) 뷰어 + 문서 본문(.sla-doc).
   CUST SLA 뷰어(DEVY.CUST/V3/css/Sla.css)와 같은 모양을 V3 Site.Master(theme.css) 위에서 재현한다.
   ⚠ .sla-doc 본문 규칙은 CUST/ADM Sla.css 와 같은 값을 유지할 것(사이트별 자산 분리 관례상 사본).
   V3 theme.css 는 Bootstrap 이 없고 a{color:inherit;text-decoration:none} 리셋이 있어, 뷰어 색 토큰(CUST 라이트 테마 값)과
   링크·헬퍼 클래스를 .sla-page 스코프에 직접 둔다. 인쇄 전용 iframe(Sla.js printDoc)도 이 파일을 링크하므로 .sla-doc 는 스코프 밖. */

.sla-page {
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-tertiary-bg: #f1f3f5;
    --bs-link-color: #0d6efd;
    --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;
    background: var(--mf-paper);
}
section.block.sla-page { padding: 40px 0 70px; }

/* ── 뷰어 카드 ── */
.sla-page .sla-card { background: #fff; border: 1px solid #E5EBF5; border-radius: var(--mf-r); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .25); font-size: 1rem; line-height: 1.5; color: #2b3243; scroll-margin-top: 80px; }

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

/* ── 뷰어 바(상태 배지·버전 드롭다운·인쇄) — 본문 스크롤 시에도 V3 헤더(64px) 바로 아래에 고정 ── */
.sla-page .sla-bar { position: sticky; top: 64px; z-index: 2; background: #fff; border-radius: var(--mf-r) var(--mf-r) 0 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.05rem; border-bottom: 1px solid var(--mf-border); }
.sla-page .sla-bar .state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .86rem; padding: .25rem .7rem; border-radius: 999px; }
.sla-page .sla-bar .state:empty { display: none; }
.sla-page .sla-bar .state.current { background: var(--mf-tint-ok-bg); color: var(--mf-tint-ok-fg); }
.sla-page .sla-bar .state.upcoming { background: var(--mf-tint-warn-bg); color: var(--mf-tint-warn-fg); }
.sla-page .sla-bar .state.past { background: var(--mf-tint-neutral-bg); color: var(--mf-tint-neutral-fg); }
.sla-page .sla-bar .sla-title-short { color: #6c757d; font-size: .875em; }
.sla-page .sla-bar .spacer { flex: 1; }
.sla-page .sla-bar label { margin: 0; color: #6c757d; font-size: .875em; font-weight: 400; }
.sla-page .sla-select {
    width: auto; min-width: 15rem; 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-page .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-page .sla-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 4rem; margin: 0; padding: .25rem .5rem;
    font-family: inherit; font-size: .875rem; font-weight: 400; line-height: 1.5; color: #6c757d;
    background: transparent; border: 1px solid #6c757d; border-radius: .25rem; cursor: pointer; transition: color .15s, background-color .15s;
}
.sla-page .sla-btn:hover { color: #fff; background: #6c757d; }

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

/* ── 본문 + 목차 ── */
.sla-page .sla-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.25rem; padding: 1.05rem; }
/* 목차 고정 위치 = V3 헤더(64px) + 고정된 .sla-bar(~3.6rem) */
.sla-page .sla-toc { position: sticky; top: calc(64px + 4.25rem); align-self: start; font-size: .82rem; line-height: 1.5; border-left: 2px solid var(--mf-border); padding-left: .75rem; }
.sla-page .sla-toc a { display: block; color: var(--mf-muted); padding: .2rem 0; }
.sla-page .sla-toc a:hover { color: var(--mf-brand); }
.sla-page .sla-doc-title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #212529; margin: 0 0 .25rem; }
.sla-page .sla-doc-sub { color: var(--mf-muted); font-size: .85rem; margin-bottom: 1rem; }
/* 본문 h2 로 이동할 때 V3 헤더 + 고정 바 아래에 멈추도록 */
.sla-page .sla-doc h2 { scroll-margin-top: calc(64px + 5rem); }

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

@media (max-width: 991px) { .sla-page .sla-layout { grid-template-columns: 1fr; } .sla-page .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-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); }
.sla-doc h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.sla-doc h3 { 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); }

/* ── 인쇄 — [인쇄] 버튼은 Sla.js printDoc() 의 인쇄 전용 iframe 에서 처리한다(CUST 와 동일 구조).
   아래는 사용자가 페이지를 Ctrl+P 로 직접 인쇄할 때를 위한 이중 방어: 사이트 셸·뷰어 컨트롤을 숨기고 문서만 남긴다. ── */
@media print {
  header, footer, .subhero, .sla-page .sla-bar, .sla-page .sla-banner, .sla-page .sla-toc, .sla-page .sla-history { display: none !important; }
  .sla-page { background: #fff; }
  section.block.sla-page { padding: 0; }
  .sla-page .sla-card { border: 0; box-shadow: none; }
  .sla-page .sla-layout { display: block; padding: 0; }
  .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; }
}