/* planmr 페이지 표시 규칙.
 *
 * 원본 사이트(DXPR 테마) CSS 약 1MB 를 통째로 가져오는 대신, 이 페이지에 필요한
 * 규칙만 옮긴 것이다. 값은 원본을 브라우저로 띄워 계산된 스타일을 뽑아 맞췄다
 * (눈대중이 아니라 실측). **값을 새로 정하지 말 것.**
 *
 * 원본은 탭을 DXPR 의 .az-tabs 로 그렸고 우리는 Quarto 의 .panel-tabset 을 쓴다.
 * 둘 다 Bootstrap 탭이라 안쪽 구조(.nav-tabs / .nav-link / .tab-content)는 같다.
 *
 * 원본 한글 주석은 수령본에서 숨 같은 숫자 참조로 이스케이프돼 있던 것을
 * 원문으로 되돌린 것이다.
 *
 * 문법 검사: tools/planmr/check_css.py
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. 레이아웃 — 원본이 감싼 div 에 인라인으로 갖고 있던 것
   ───────────────────────────────────────────────────────────────────────── */

/* 사이드바 문서라 제목이 breadcrumb 에 바짝 붙는다. */
.planmr-body { margin-top: 2rem; }

/* 도입부 문단. 원본은 감싼 div 에 margin-left/right: 15% 가 인라인으로 있었다. */
.planmr-intro { margin-left: 15%; margin-right: 15%; }

/* 개요 이미지 2장. 원본 인라인 style 을 그대로 옮겼다. */
.overview-image { width: 70%; margin-top: 1%; margin-bottom: 1%; }
.float-image { width: 70%; padding-top: 1%; padding-bottom: 2%; }

/* 원본은 감싼 div 의 .text-center 가 가운데 정렬을 맡았다. */
.planmr-body p:has(> .overview-image),
.planmr-body p:has(> .float-image) { text-align: center; }

/* 탭 안 이미지 6장. 원본 인라인 style="width: 100%". */
.tab-image { width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────
   2. 탭 — 원본은 둥근 버튼형(비활성 연보라, 활성 보라+흰 글씨)인데
      우리 사이트에서는 Bootstrap 기본 밑줄형으로 나온다.
   ───────────────────────────────────────────────────────────────────────── */

/* 화살표가 탭 바에 바짝 붙어 눌린 느낌이 든다. */
.panel-tabset { margin-top: 1.5rem; }

/* 원본은 탭 메뉴를 가운데 정렬한다. Quarto 기본에는 없다. */
.panel-tabset .nav-tabs {
  justify-content: center;
  border-bottom: 0;
  margin-bottom: 12px;
}

/* 우리 사이트 본문 리스트 스타일(assets/styles/components/_document.scss 의
   list-style-type: '•  ')이 Bootstrap 의 .nav { list-style: none } 을 덮어써
   탭 항목마다 불릿이 붙는다. 전역 CSS 를 고치면 나머지 18편의 본문 불릿까지
   바뀌므로 충돌이 생긴 이 페이지 안에서만 되돌린다. */
.panel-tabset .nav-tabs,
.panel-tabset .nav-tabs li { list-style: none; }

.panel-tabset .nav-tabs li.nav-item { margin: 0 12px 12px 0; }

/* 탭 바 아래 회색 선과 그림을 감싼 상자의 회색 선. Bootstrap 기본
   테두리색(#dee2e6)이 들어오는데 원본에는 둘 다 없다. */
.panel-tabset .tab-content { border: 0; }

.panel-tabset .nav-link {
  background-color: #eff2fc;   /* rgb(239, 242, 252) */
  color: #33354d;              /* rgb(51, 53, 77) */
  border: 0;
  border-radius: 4px 4px 0 0;
  padding: 8.56px 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.panel-tabset .nav-link.active {
  background-color: #6366f1;   /* rgb(99, 102, 241) */
  color: #fff;
  border: 0;
}

/* '한 눈에 보기' 탭만 점선 테두리. 원본은 이 규칙을 본문 뒤쪽에 실어 두고
   [data-bs-target="#tb_at_glance"] 로 걸었는데, Quarto 는 패널 id 를
   tabset-1-7 처럼 순번으로 만들므로 그 선택자가 성립하지 않는다. 대신 qmd 에서
   탭 제목을 [한 눈에 보기]{.at-glance} 로 쓰고 그 span 을 잡는다. 위치가 아니라
   표식으로 거는 것이라 탭을 추가·재배열해도 따라간다.

   :not(.active) 가 필요하다 — 이 규칙은 .panel-tabset .nav-link.active 와
   특이도가 같아서, 없으면 활성 상태일 때도 연보라·점선으로 덮어쓴다. */
.panel-tabset .nav-link:has(.at-glance):not(.active) {
  background-color: #eff2fc;   /* 원하는 배경색 */
  color: #6B64EF;              /* 글자색 */
  border: 1.5px dashed #6B64EF; /* 점선 테두리 */
  border-radius: 5px;          /* 모서리 둥글게 */
  transition: background-color 0.3s; /* 부드러운 색상 전환 */
}

/* ─────────────────────────────────────────────────────────────────────────
   3. 부양 애니메이션 — 원본은 animate.css 의 float 를 쓰는데 그 파일을
      가져오지 않으므로 keyframes 만 옮긴다. 원본 요소에 인라인으로 박혀 있던
      animation-duration(1800ms)도 여기로 옮겼다.
   ───────────────────────────────────────────────────────────────────────── */

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0.625rem); }
  100% { transform: translateY(0); }
}

.float-image {
  animation-name: float;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 1800ms;
}

@media (prefers-reduced-motion: reduce) {
  .float-image { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   4. '한 눈에 보기' 표 — 원본 그대로.
   ───────────────────────────────────────────────────────────────────────── */

/* 주의: 아래 .tg td / .tg th 의 `border-color: :` 는 콜론이 두 개인 원본의
   오타다. CSS 파서가 이 선언을 통째로 버리므로 표의 위아래 테두리는 기본색이
   되는데, **그 상태가 곧 발주처가 보고 있는 화면이다.** 고치면 외관이 달라지므로
   그대로 둔다. tools/planmr/check_css.py 가 이 2건을 알려진 예외로 세고 있어,
   누가 "고쳐" 놓으면 검사가 실패한다. */

.tg { border-collapse: collapse; border-spacing: 0; }

.tg td {
    border-color: : #afafaf !important;
    border-right-color : #afafaf ;
    border-left-color : #afafaf ;
    border-style: solid ;
    border-width: 1px;
    font-weight: 450;
    font-size: 15px;
    overflow: hidden;
    padding: 0.5px;
    word-break: normal;
    line-height: 25px;
}

.tg th {
    border-color: :  #afafaf  !important;
    border-right-color : #afafaf ;
    border-left-color : #afafaf ;
    border-style: solid;
    border-width: 1px;
    font-weight: 650;
    font-size: 15px;
    overflow: hidden;
    padding: 0.5px;
    word-break: normal;
}

.tg .tg-dj6d { background-color: #F4F4F4; font-weight: bold; text-align: center; vertical-align: middle; }
.tg .tg-nrix { text-align: center; vertical-align: middle; }
.tg .tg-0o4m { color: rgba(194, 9, 9, 0.89); text-align: center; vertical-align: top; }
.tg .tg-5y04 { color: rgba(59, 138, 242, 0.694); text-align: center; vertical-align: top; }
.tg .tg-v2uf { background-color: #F9F9F9; color: #afafaf; font-style: italic; text-align: center; vertical-align: middle; }
.tg .tg-jlj0 { background-color: #F9F9F9; font-style: italic; text-align: center; vertical-align: middle; }
.tg .tg-9xr5 { background-color: #F9F9F9; color: rgba(59, 138, 242, 0.694); font-style: italic; text-align: center; vertical-align: top; }
.tg .tg-20yr { background-color: #F9F9F9; color: rgba(194, 9, 9, 0.89); font-style: italic; text-align: center; vertical-align: top; }

/* ─────────────────────────────────────────────────────────────────────────
   5. 세부지표 접기/펴기 — planmr.js 가 .smr_hidden 을 토글한다.
   ───────────────────────────────────────────────────────────────────────── */

.smr_hidden {
    visibility: collapse; /* 숨기지만 레이아웃 유지 */
    height: 0; /* 높이를 0으로 설정 */
}

.toggle-button {
    font-size: medium;
    margin-bottom: 5px;
    padding: 5px 10px;
    background-color: #f2f2f7e3;
    color: #4e4e72b4;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    display: inline-block; /* 모바일에서 잘 보이도록 설정 */
}

.toggle-button:hover {
    background-color: #7272a0b4;
    color: white;
}

.sub-indicator {
    background-color: #f9f9f9;
    padding-left: 20px;
    font-size: 12px; /* 글자 크기 작게 */
    color: #6868e1;
    font-style: italic; /* 이탤리체 적용 */
    transition: background-color 0.3s; /* 배경색 전환 효과 */
}

.sub-indicator:hover {
    background-color: rgb(205, 233, 252); /* 마우스 오버 시 배경색 변화 */
}

.sub-indicator td:first-child {
    font-style: italic;
    color: #555;
    border-left: 3px solid rgba(127, 127, 250, 0.53);
}

/* 중복된 색상 스타일을 클래스화 */
.color-blue { color: rgba(59, 138, 242, 0.694); }
.color-red { color: rgba(194, 9, 9, 0.89); }