/* management-page-V1.3.css
 * 경영공시 목록 (MNU-U-100601) — V1.3 전용 CSS
 *
 * Source: foundation-page-V2.css `.management-v2` 섹션 (line 880~1318)에서 분리.
 * 적용: shared/publishing/fo/pages/소통참여_MNU-U-100000/경영공시_MNU-U-100600/MNU-U-100601_경영공시목록_design_V1.3_PUB.html
 *
 * wrapper: .management-v2 (HTML 기존 클래스 유지)
 * V1.3에서 발생하는 페이지 고유 룰 변경은 본 파일에 누적한다.
 * (V1.2 HTML과 격리되어 영향 없음. V1.2는 계속 foundation-page-V2.css 사용)
 *
 * 누적 수정 규칙:
 *  - BASE LAYER: 페이지 공통 구조 룰 (탭/dl/리스트 그리드)
 *  - OVERRIDE LAYER: 시안 스펙 (V01~Vn 마커별 오버라이드)
 *  - R. 반응형: 태블릿/모바일 분기
 */


/* ════════════════════════════════════════════════════════════════
   PAGE: 100601 경영공시 목록 — wrapper .management-v2
   ════════════════════════════════════════════════════════════════ */

/* ==================== BASE LAYER ====================
   v1 foundation-page.css / community-page.css 에서 추출
   (disclosure-tab · disclosure-info-* · disclosure-mobile-cat · notice-list · notice-attach)
   .management-v2 prefix로 격리 — V1.3.html은 management-page-V1.3.css 단독 link (self-contained) */

/* CONTENT ↔ FOOTER — 가이드 §5-1/5-2 100px 전 뷰포트
   (DS .sub-page-wrap 기본은 case C 100/80/60 → 탭형 페이지 한정 100 통일) */
.sub-page-wrap.management-v2 {
  margin-bottom: 10rem;
}
@media (max-width: 1199px) {
  .sub-page-wrap.management-v2 {
    margin-bottom: 10rem;
  }
}
@media (max-width: 767px) {
  .sub-page-wrap.management-v2 {
    margin-bottom: 10rem;
  }
}

/* CONTENT(목록) ↔ PAGINATION — 가이드 §5-1 Case A 100px 전 뷰포트
   (DS .ds-pagination 기본 margin-top 32px 오버라이드) */
.management-v2 .ds-pagination {
  margin-top: 10rem;
}

/* 메인 탭 간격 — 공통가이드 v1.7.1 §5-2 Case B (HERO↔TAB / TAB↔CONTENT 동일값)
   PC 50 · 태블릿 28 · 모바일 16 */
.management-v2 .disclosure-tab {
  margin-top: var(--ds-number-25, 5rem);
  margin-bottom: var(--ds-number-25, 5rem);
}
.management-v2 .disclosure-tab .ds-tab__list {
  justify-content: center;
}
@media (max-width: 1199px) {
  .management-v2 .disclosure-tab {
    margin-top: var(--ds-number-14, 2.8rem);
    margin-bottom: var(--ds-number-14, 2.8rem);
  }
}
@media (max-width: 767px) {
  .management-v2 .disclosure-tab {
    margin-top: var(--ds-number-8, 1.6rem);
    margin-bottom: var(--ds-number-8, 1.6rem);
  }
}

/* 정보공개 하이라키 콘텐츠 — pfmc-info(예매·할인·환불) 디자인 톤 적용
   상단 패딩 제거: HERO↔TAB↔CONTENT 간격은 .disclosure-tab margin이 단일 책임 */
.management-v2 .disclosure-info-content {
  line-height: 1.6;
  color: var(--ds-color-gray-70, #464c53);
  width: 100%;
  padding: 0 0 var(--ds-number-20, 4rem);
}

/* 페이지 타이틀 — 40 Medium, 좌측 정렬 */
.management-v2 .disclosure-info__title {
  font-size: var(--ds-font-size-40, 4rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-color-gray-95, #1a1a1a);
  letter-spacing: -0.02em;
  margin: 0 0 var(--ds-number-30, 6rem);
  padding: 0;
  text-align: left;
  line-height: 1.3;
  border-bottom: none; /* 정보공개 청구제도 타이틀 하단 라인 제거 */
}

/* 섹션 — guide-section margin-bottom 60px */
.management-v2 .disclosure-info__section {
  margin-bottom: var(--ds-number-30, 6rem);
}
.management-v2 .disclosure-info__section:last-child {
  margin-bottom: 0;
}

/* 섹션 헤딩 — 22 SemiBold, 좌측 라인/도트 없음 */
.management-v2 .disclosure-info__heading {
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-color-gray-90, #1e2124);
  letter-spacing: -0.003em;
  margin: 0 0 var(--ds-number-8, 1.6rem);
  line-height: 1.3;
  display: block;
}
.management-v2 .disclosure-info__heading::before {
  content: none;
}

/* 본문 desc */
.management-v2 .disclosure-info__desc {
  font-size: var(--ds-font-size-17, 1.7rem);
  line-height: 1.55;
  color: var(--ds-color-gray-70, #464c53);
  margin: 0;
  word-break: keep-all;
}

/* 청구인·대상기관 dl — 표 형식 (라벨 좌측 / 본문 우측, 상하 라인 구분) */
.management-v2 .disclosure-info__dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ds-color-gray-20, #d8dde2);
  border-radius: 0;
}

.management-v2 .disclosure-info__dl-item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--ds-number-8, 1.6rem);
  padding: var(--ds-number-7, 1.4rem) var(--ds-number-6, 1.2rem);
  border-bottom: 1px solid var(--ds-color-gray-20, #d8dde2);
  background: transparent;
  border-radius: 0;
}

.management-v2 .disclosure-info__dl-item dt {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-primary-60, #02639a);
  margin: 0;
  align-self: start;
}

.management-v2 .disclosure-info__dl-item dd {
  font-size: var(--ds-font-size-16, 1.6rem);
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

/* 태블릿 (768~1199) — pfmc-info 동일 스케일 (40→32) */
@media (max-width: 1199px) and (min-width: 768px) {
  .management-v2 .disclosure-info__title {
    font-size: var(--ds-font-size-32, 3.2rem);
  }
  .management-v2 .disclosure-info__heading {
    font-size: var(--ds-font-size-20, 2rem);
  }
  .management-v2 .disclosure-info__section {
    margin-bottom: var(--ds-number-24, 4.8rem);
  }
}

/* 모바일 (≤767) — pfmc-info 동일: 페이지 타이틀 숨김 (page-header 인클루드가 대체) */
@media (max-width: 767px) {
  .management-v2 .disclosure-info__title {
    display: none;
  }
  .management-v2 .disclosure-info__heading {
    font-size: var(--ds-font-size-19, 1.9rem);
    margin-bottom: var(--ds-number-6, 1.2rem);
  }
  .management-v2 .disclosure-info__section {
    margin-bottom: var(--ds-number-18, 3.6rem);
  }
  .management-v2 .disclosure-info__desc {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
  .management-v2 .disclosure-info__dl-item {
    grid-template-columns: 1fr;
    gap: var(--ds-number-2, 0.4rem);
    padding: var(--ds-number-6, 1.2rem) 0;
  }
  .management-v2 .disclosure-info__dl-item dt {
    font-size: var(--ds-font-size-16, 1.6rem);
  }
  .management-v2 .disclosure-info__dl-item dd {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
}

/* notice-list: 3컬럼 그리드 베이스 (번호 8rem / 제목 1fr / 등록일 12rem) */
.management-v2 .notice-list .ds-board-list__head,
.management-v2 .notice-list .ds-board-list__item {
  grid-template-columns: 8rem 1fr 12rem;
}

/* 첨부파일 아이콘 */
.management-v2 .notice-attach {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ds-number-2, 0.4rem);
  color: var(--ds-color-gray-40, #8a949e);
  vertical-align: middle;
  flex-shrink: 0;
}


/* ==================== OVERRIDE LAYER — 시안 스펙 ==================== */

/* V01 — 메인 탭 (정보공개/경영공시): v1과 동일하게 ds-tab--bold + .disclosure-tab BASE만 사용
   (커스텀 오버라이드 없음 — DS 기본 폰트/컬러/구분자 그대로) */

/* V02 — 경영공시 탭 패널 (상단 패딩 제거: TAB↔콘텐츠 간격은 .disclosure-tab margin-bottom으로 단일화) */
.management-v2 #tab-mgmt {
  padding-top: 0;
}

/* V05 — 경영공시 카테고리 칩 (레퍼런스 management-cat 적용)
   데스크탑: management-cat__list = 5열 CSS 그리드, 각 칩은 보더 셀 (컨테이너 top/left + 칩 right/bottom로 1px 격자)
   태블릿: 3열 / 모바일: list 숨김 + select 노출.
   활성 칩: 흰 배경 + 브랜드 오렌지 텍스트 + 오렌지 inset 보더. */
.management-v2 .management-cat {
  margin-top: var(--ds-number-20, 4rem);
  margin-bottom: var(--ds-number-20, 4rem);
}
.management-v2 .management-cat__select {
  display: none;
}
/* ds-select-enhance.js가 select를 향상해 만든 커스텀 UI도 select와 동일하게 PC 숨김 */
.management-v2 .management-cat .ds-select-ui {
  display: none;
}
.management-v2 .management-cat__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: none;
  border-top: 1px solid var(--ds-color-gray-10, #e6e8ea);
  border-left: 1px solid var(--ds-color-gray-10, #e6e8ea);
}
.management-v2 .management-cat__chip {
  box-sizing: border-box;
  width: auto;
  min-height: 5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0;
  border-right: 1px solid var(--ds-color-gray-10, #e6e8ea);
  border-bottom: 1px solid var(--ds-color-gray-10, #e6e8ea);
  background: #fff;
  color: var(--ds-color-gray-80, #3a3f44);
  padding: 1rem 1.2rem;
  font-size: var(--ds-font-size-15, 1.5rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  line-height: 1.2;
  word-break: keep-all;
  cursor: pointer;
  transition: box-shadow 0.18s ease, color 0.18s ease;
  position: relative;
}
.management-v2 .management-cat__chip:hover {
  color: var(--ds-color-brand-orange, #DC521E);
}
.management-v2 .management-cat__chip.is-active,
.management-v2 .management-cat__chip[aria-selected="true"] {
  background: #fff;
  color: var(--ds-color-brand-orange, #DC521E);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  box-shadow: inset 0 0 0 1px var(--ds-color-brand-orange, #DC521E);
  z-index: 1;
}
.management-v2 .management-cat__chip:focus-visible {
  outline: 2px solid var(--ds-color-brand-blue-aa, #1d62c3);
  outline-offset: 2px;
}

/* V04 — 검색 영역
   ※ DS layout.css의 .ds-filter-search 표준(700px 가운데 + chips PC 가운데 + 모바일 한줄 가로스크롤 + 주황 pill 활성칩) 그대로 사용.
   페이지 고유 요소(연도 select + divider)만 추가 정의 */
.management-v2 .ds-filter-search__year {
  flex: 0 0 auto;
  width: 9rem;
  height: 4.4rem;
  padding: 0 var(--ds-number-12, 2.4rem) 0 0;
  border: 0;
  background: transparent;
  background-image: url('../../icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--ds-number-2, 0.4rem) center;
  background-size: 1.6rem 1.6rem;
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-color-gray-90, #1e2124);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.management-v2 .ds-filter-search__year:focus {
  outline: 0;
}
.management-v2 .ds-filter-search__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 2rem;
  background: var(--ds-color-gray-20, #cdd1d5);
  margin: 0 var(--ds-number-8, 1.6rem);
}

/* V05 — 4컬럼 테이블 (번호 8rem / 분류 12rem / 제목 1fr / 등록일 12rem)
   ※ grid-template-columns는 PC/태블릿 전용 — 모바일은 DS layout.css의 flex-wrap 패턴 사용
   ※ 셀 세로 중앙 정렬은 모든 뷰포트 공통 (분류 태그가 위로 붙는 현상 방지) */
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__num,
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__col,
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__date {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px) {
  .management-v2 .management-list.ds-board-list .ds-board-list__head,
  .management-v2 .management-list.ds-board-list .ds-board-list__item {
    grid-template-columns: 8rem 12rem 1fr 12rem;
  }

  /* 헤더 셀 정렬: 번호·분류·등록일 가운데 / 제목 좌측 */
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(1),
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(2),
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(4) {
    text-align: center;
    justify-content: center;
  }
}

/* V06 — 분류 태그: DS .ds-tag .ds-tag--s + color 유틸리티 토큰 사용
   페이지 오버라이드: 흰 배경 + pill radius + ds-comp-color 토큰으로 outline 구성 */
.management-v2 .management-list .ds-tag,
.management-v2 .ds-detail-header__tags .ds-tag {
  background-color: var(--ds-color-gray-0, #fff);
  color: var(--ds-comp-color, var(--ds-light-color-text-subtle));
  border-color: var(--ds-comp-color, var(--ds-light-color-border-gray));
  border-radius: var(--ds-radius-max, 999px); /* Figma: pill 100px */
}

/* 목록 분류 태그 — 행 내 수직 중앙 정렬 보정
   DS .ds-tag--s 고정 높이(2.4rem) + line-height:1 조합이 한글 글리프를 칩 중앙보다 살짝 위로
   치우치게 하므로, 고정 높이를 해제하고 상·하 동일 패딩 + line-height로 글리프를 칩 정중앙에 배치 */
.management-v2 .management-list .ds-tag {
  height: auto;
  padding-block: 0.5rem;
  line-height: 1.2;
}

/* 상세 페이지 태그 — 목록 대비 한 단계 크게 */
.management-v2 .ds-detail-header__tags .ds-tag {
  height: var(--ds-number-15, 3rem);
  padding-inline: var(--ds-number-6, 1.2rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
}


/* ==================== R. 반응형 (태블릿 / 모바일) ====================
   모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D) */

@media (max-width: 1199px) {
  .management-v2 .management-main-tab .ds-tab__btn {
    min-width: 14rem;
    font-size: var(--ds-font-size-17, 1.7rem);
  }
  /* 경영공시 카테고리 칩 — 태블릿 3열 */
  .management-v2 .management-cat__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .management-v2 .management-cat__chip {
    font-size: var(--ds-font-size-14, 1.4rem);
  }
}

@media (max-width: 767px) {
  /* 메인 탭(정보공개/경영공시) ↔ 평면 그리드 갭 확장 (PC 16px → 모바일 40px) */
  .management-v2 #tab-mgmt {
    padding-top: var(--ds-number-20, 4rem);
  }

  /* 경영공시 카테고리 — 모바일: 칩 리스트(데스크탑 그리드) 숨김 + select 드롭다운 노출 (18개 분류 선택)
     ※ 데스크탑은 칩 그리드, 모바일은 select 한 줄 — V05 설계 의도(line 229)와 일치 */
  .management-v2 .management-cat {
    display: block;
  }
  .management-v2 .management-cat__list {
    display: none;
  }
  .management-v2 .management-cat__select,
  .management-v2 .management-cat .ds-select-ui {
    display: block;
  }

  /* 4컬럼 → 모바일: DS layout.css(line 1611~1643)의 flex-wrap 모바일 패턴 그대로 적용
     (번호 좌측 작게 / 제목 풀폭 / 등록일 좌측). 페이지에서는 두 가지만 추가 처리: */
  /* (1) 공지 제외 모든 행의 번호 숨김 (사용자 요청) */
  .management-v2 .management-list .ds-board-list__item:not(.ds-board-list__item--pinned) > .ds-board-list__num {
    display: none;
  }
  /* (2) 분류 태그 셀(__col): 모바일 숨김 (사용자 요청 — 모바일은 분류 드롭다운으로 선택, 행 내 분류 태그는 미노출)
        ※ base 규칙 `.management-list.ds-board-list …__col { display:flex }`(specificity 0,5,0)을 이기려면
          동일 specificity 필요 → selector에 .ds-board-list 포함 + 모바일 블록 후순위로 승리 */
  .management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__col {
    display: none;
  }
  /* 공지 배지(번호 셀) 좌측정렬 (모바일) — base 중앙정렬 오버라이드 */
  .management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__num {
    justify-content: flex-start;
    text-align: left;
  }
}