/* footer-sub-page-v1.css
 * Generated by Phase 4 (safe-merge) for (푸터하위_MNU-U-040000, v1)
 * Source CSS (in cascade order): footer-sub-page.css
 */

/* === source: footer-sub-page.css === */
/* ================================================================
   푸터 하위 페이지 (MNU-U-040000) 고유 스타일
   - 개인정보처리방침, 이용약관 등 정책 페이지
   ================================================================
   - DS 토큰 변수(--ds-*) 필수 사용
   - DS 컴포넌트(.ds-*)로 대체 가능한 스타일은 작성 금지
   ================================================================ */


/* ==================== 제10조 — 권익침해 구제방법 기관 리스트 ==================== */
.privacy-relief {
  list-style: none;
  counter-reset: privacy-relief;
  padding-left: var(--ds-number-8);
  margin: var(--ds-number-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
}
.privacy-relief__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);
  counter-increment: privacy-relief;
}
.privacy-relief__item::before {
  content: counter(privacy-relief) ".";
  position: absolute;
  left: calc(-1 * var(--ds-number-8));
  top: 0;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}
.privacy-relief__name {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-1);
}
.privacy-relief__info {
  list-style: none;
  padding-left: var(--ds-number-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.privacy-relief__info > li {
  position: relative;
  padding-left: var(--ds-number-3);
  line-height: 1.8;
}
.privacy-relief__info > li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--ds-color-gray-50);
}
.privacy-relief__info a {
  color: var(--ds-color-primary-60);
  text-decoration: underline;
}
.privacy-relief__info a:hover,
.privacy-relief__info a:focus-visible {
  color: var(--ds-color-primary-50);
}


/* ==================== 제11조 — 이전 처리방침 드롭다운 ==================== */
.privacy-history {
  margin-top: var(--ds-number-3);
  border: 0.1rem solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-small);
  background-color: var(--ds-color-gray-0);
  max-width: 48rem;
}
.privacy-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-number-4) var(--ds-number-6);
  cursor: pointer;
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-80);
  list-style: none;
}
.privacy-history > summary::-webkit-details-marker {
  display: none;
}
.privacy-history > summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid var(--ds-color-gray-60);
  border-bottom: 0.2rem solid var(--ds-color-gray-60);
  transform: rotate(45deg) translate(-0.2rem, -0.2rem);
  transition: transform 0.2s ease;
}
.privacy-history[open] > summary::after {
  transform: rotate(-135deg) translate(-0.2rem, -0.2rem);
}
.privacy-history > summary:hover,
.privacy-history > summary:focus-visible {
  background-color: var(--ds-color-gray-5);
  outline: none;
}
.privacy-history__list {
  list-style: none;
  padding: var(--ds-number-3) var(--ds-number-6) var(--ds-number-4);
  margin: 0;
  border-top: 0.1rem solid var(--ds-color-gray-10);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.privacy-history__list > li > a {
  display: block;
  padding: var(--ds-number-2) 0;
  font-size: var(--ds-font-size-14);
  color: var(--ds-color-gray-70);
  text-decoration: none;
}
.privacy-history__list > li > a::before {
  content: "- ";
}
.privacy-history__list > li > a:hover,
.privacy-history__list > li > a:focus-visible {
  color: var(--ds-color-primary-60);
  text-decoration: underline;
}


/* ==================== 조항 목차 (TOC) ==================== */
.privacy-toc {
  margin-top: var(--ds-number-6);
  margin-bottom: var(--ds-number-14);
  padding: 3rem;
  border: 0.1rem solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-medium);
  background-color: var(--ds-color-gray-0);
}
.privacy-toc__title {
  font-size: var(--ds-font-size-22);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-6);
}
.privacy-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem var(--ds-number-6);
}
.privacy-toc__list > li {
  display: block;
}
.privacy-toc__list > li > a {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);
  padding: 0;
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-80);
  text-decoration: none;
  transition: color 0.15s ease;
}
.privacy-toc__list > li > a::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--ds-color-primary-50);
  border-radius: 50%;
  flex-shrink: 0;
}
.privacy-toc__list > li > a:hover,
.privacy-toc__list > li > a:focus-visible {
  color: var(--ds-color-primary-60);
  text-decoration: underline;
}

/* 앵커 스크롤 오프셋 (상단 헤더 가려짐 방지) */
.privacy-article[id] {
  scroll-margin-top: 12rem;
}

@media (max-width: 767px) {
  .privacy-toc {
    padding: var(--ds-number-6) var(--ds-number-4);
  }
  .privacy-toc__title {
    font-size: var(--ds-font-size-17);
  }
  .privacy-toc__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .privacy-toc__list > li > a {
    font-size: var(--ds-font-size-14);
    padding: var(--ds-number-2) var(--ds-number-3);
  }
}


/* ==================== 주요 개인정보 처리 표시 (라벨링) ==================== */
.privacy-labeling {
  margin-top: var(--ds-number-6);
  margin-bottom: var(--ds-number-14);
  /* padding: var(--ds-number-10) var(--ds-number-12); */
  /* border: 0.1rem solid var(--ds-color-gray-10); */
  border-radius: var(--ds-radius-medium);
  /* background-color: var(--ds-color-gray-5); */
}
.privacy-labeling__title {
  font-size: var(--ds-font-size-22);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-top: var(--ds-number-6);
  margin-bottom: var(--ds-number-4);
}
.privacy-labeling__head {
  display: none;
}
.privacy-labeling__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-6);
}
.privacy-label-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ds-number-16) var(--ds-number-8) var(--ds-number-14);
  background-color: var(--ds-color-gray-0);
  border: 0.1rem solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-small);
  text-align: center;
}
.privacy-label-item__icon {
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ds-number-6);
}
.privacy-label-item__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.privacy-label-item__name {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  line-height: 1.4;
  padding-bottom: var(--ds-number-3);
  padding-inline: var(--ds-number-3);
  border-bottom: 0.15rem solid var(--ds-color-primary-50);
  min-width: 6rem;
  text-align: center;
  white-space: nowrap;
  margin-bottom: var(--ds-number-6);
}
.privacy-label-item__desc {
  font-size: var(--ds-font-size-14);
  color: var(--ds-color-gray-60);
  line-height: 1.7;
}
@media (max-width: 1199px) {
  .privacy-labeling__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .privacy-labeling {
    padding: var(--ds-number-6) var(--ds-number-4);
  }
  .privacy-labeling__title {
    font-size: var(--ds-font-size-17);
  }
  .privacy-labeling__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-number-3);
  }
  .privacy-label-item {
    padding: var(--ds-number-6) var(--ds-number-3);
  }
  .privacy-label-item__icon {
    width: 5.4rem;
    height: 5.4rem;
  }
  .privacy-label-item__name {
    font-size: var(--ds-font-size-14);
  }
  .privacy-label-item__desc {
    font-size: var(--ds-font-size-12);
  }
}


/* ==================== 개인정보처리방침 ==================== */

/* --- 래퍼 --- */
body:has(.privacy-card) {
  background-color: var(--ds-color-gray-0);
  overflow-x: hidden;
}
body:has(.privacy-card) .site-footer {
  margin-top: 0;
}
.privacy-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 8rem;                                   /* 80px */
  padding-inline: var(--ds-pc-padding-layout-side);
}

/* --- 콘텐츠 컨테이너 --- */
.privacy-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
}

/* --- 헤더: 제목 + 시행일 --- */
.privacy-header {
  text-align: left;
}
.privacy-header__title {
  font-size: var(--ds-font-size-32);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);
  letter-spacing: -0.02em;
}
.privacy-header__date {
  font-size: var(--ds-font-size-14);
  color: var(--ds-color-gray-40);
  margin-top: var(--ds-number-3);
}

/* --- 본문 --- */
.privacy-body {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-70);
  line-height: 1.7;
}
.privacy-body p {
  margin-bottom: var(--ds-number-1);
}

/* 조항 제목 */
.privacy-article {
  margin-top: var(--ds-number-8);
}
.privacy-article__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-80);
  margin-bottom: var(--ds-number-2);
}

/* 들여쓰기 */
.privacy-indent {
  padding-left: var(--ds-number-8);
}
.privacy-indent-2 {
  padding-left: var(--ds-number-16);
}


/* ==================== 법률문서 스타일 (v2) ==================== */
/* 하이라키(장>조>항>호) + 여백으로 가독성 확보 */

/* --- 장(章) 구분 --- */
.privacy-chapter {
  margin-top: var(--ds-number-24);
}
.privacy-chapter:first-child {
  margin-top: var(--ds-number-4);
}
.privacy-chapter__title {
  font-size: var(--ds-font-size-24);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-6);
}

/* --- 조(條) 제목 v2 --- */
.privacy-article--v2 {
  margin-top: var(--ds-number-8);
}
.privacy-article--v2:first-child {
  margin-top: 0;
}
.privacy-article--v2 .privacy-article__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-80);
  margin-bottom: var(--ds-number-2);
}

/* --- 약관 단락 목록 --- */
/* 원문이 대부분 단락만으로 구성되어 있어 기본은 블록 단락.
   신규 조항(privacy-new)에만 ①②③ 항 번호를 넣어 구조를 구분한다
   .privacy-body 스코프로 명시도 ↑ — .privacy-body p 기본 여백 오버라이드 */
.privacy-body .privacy-clause-list {
  display: block;
}
.privacy-body .privacy-clause-item {
  display: block;
  margin: 0 0 var(--ds-number-4);
  line-height: 1.65;
}
.privacy-body .privacy-clause-item:last-child {
  margin-bottom: 0;
}
.privacy-body .privacy-clause-item__num {
  display: inline-block;
  margin-right: var(--ds-number-1);
  font-weight: var(--ds-typo-font-weight-medium);
}

/* --- 하위 항목 (1. 2. 3.) --- */
.privacy-sub-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: var(--ds-number-10);
  margin-top: var(--ds-number-1);
  margin-bottom: var(--ds-number-1);
}
.privacy-sub-item {
  display: flex;
  gap: var(--ds-number-2);
  align-items: baseline;
  line-height: 1.8;
  color: var(--ds-color-gray-60);
}
.privacy-sub-item__marker {
  flex-shrink: 0;
  color: var(--ds-color-gray-50);
}

/* --- 안내문 강조 박스 --- */
.privacy-notice-box {
  background-color: var(--ds-color-gray-5);
  border-left: 4px solid var(--ds-color-primary-50);
  padding: var(--ds-number-10) var(--ds-number-12);
  margin-bottom: var(--ds-number-8);
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-80);
  line-height: 1.7;
}

/* --- 법률 조문 목록 (ul > li 글머리) --- */
.privacy-law-list {
  list-style: disc;
  padding-left: var(--ds-number-10);
  margin-top: var(--ds-number-2);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.privacy-law-list li {
  line-height: 1.7;
}

/* --- 부칙 --- */
.privacy-addendum {
  margin-top: var(--ds-number-10);
  color: var(--ds-color-gray-70);
}
.privacy-addendum__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-80);
  margin-bottom: var(--ds-number-2);
}
.privacy-addendum__list {
  list-style: decimal;
  padding-left: var(--ds-number-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
  font-size: var(--ds-font-size-15);
}
.privacy-addendum__list > li {
  line-height: 1.8;
}

/* 테이블 */
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ds-number-8) 0;
  font-size: var(--ds-pc-font-size-body-small);
}
.privacy-table th,
.privacy-table td {
  border: 1px solid var(--ds-color-gray-20);
  padding: var(--ds-number-5) var(--ds-number-6);
  text-align: center;
  vertical-align: middle;
}
.privacy-table th {
  background-color: var(--ds-light-color-surface-gray-subtler);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-basic);
}


/* --- 짧은 콘텐츠 --- */
.privacy-wrap--short {
  justify-content: flex-start;
}

/* --- 아이콘+본문 가로 레이아웃 --- */
.privacy-icon-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-12);
}
.privacy-icon-layout__icon {
  flex-shrink: 0;
  width: 8.4rem;
  height: 8.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-color-primary-5);
  border-radius: 50%;
  padding: var(--ds-number-10);
}
.privacy-icon-layout__icon .ds-icon {
  width: 4.2rem;
  height: 4.2rem;
  background-color: var(--ds-color-brand-blue);
  -webkit-mask-size: contain;
  mask-size: contain;
}
.privacy-icon-layout__body {
  flex: 1;
}

/* --- 하위 섹션 제목 (고객서비스헌장 "고객을 맞이하는 자세" 등) --- */
.privacy-subsection__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-top: var(--ds-number-8);
  margin-bottom: var(--ds-number-4);
}

/* --- 하위 항목 타이틀 h4 (고객서비스헌장 "고객내방·전화응대·서면 및 인터넷 상담" 등 공통) --- */
/* .privacy-article--v2 .privacy-article__title 기본 19px를 h4만 17px로 축소.
   이용약관·개인정보처리방침의 제N조(h2/h3)는 영향 없음 */
.privacy-article--v2 h4.privacy-article__title {
  font-size: var(--ds-font-size-17);
}

/* --- 고객서비스헌장 전용 (조 제목 확대·번호 섹션 헤더·항목 원문자 간격) --- */
/* .privacy-charter-article: "서비스 이행 기준"·"고객 여러분께 부탁드리는 말씀"·"이용 안내 및 문의" */
/* 장 제목 위 여백 확대 — privacy-article--v2 기본 1.6rem → 3.2rem */
.privacy-body .privacy-charter-article {
  margin-top: var(--ds-number-16);
}
/* 장 제목 22px */
.privacy-body .privacy-charter-article > .privacy-article__title {
  font-size: var(--ds-font-size-22);
  margin-bottom: var(--ds-number-4);
}
/* 번호 섹션 헤더 (1. 고객내방, 2. 전화응대 등): 17px semibold, 섹션 사이 넉넉한 여백 */
.privacy-body .privacy-charter-head {
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-80);
  margin-top: var(--ds-number-8);
  margin-bottom: var(--ds-number-2);
}
.privacy-body .privacy-indent > .privacy-charter-head:first-child {
  margin-top: 0;
}
/* 본문 항목(①②③…): 섹션 내부는 타이트하게 (가독성 확보 + 섹션 간격과 대비) */
.privacy-body .privacy-charter-item {
  margin-bottom: var(--ds-number-1);
  line-height: 1.7;
}

/* --- 강조 박스 (고객서비스헌장 "하나" 등) --- */
.privacy-emphasis-box {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);
  background-color: var(--ds-light-color-surface-gray-subtler);
  border-radius: var(--ds-radius-small);
  padding: var(--ds-number-12) var(--ds-number-14);
  margin: var(--ds-number-8) 0;
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
}
.privacy-emphasis-box p {
  margin-bottom: 0;
}

/* --- 아이콘 mask-image 변형 --- */
.ds-icon--mail {
  -webkit-mask-image: url(../../icons/mail-05-thin.svg);
  mask-image: url(../../icons/mail-05-thin.svg);
}
.ds-icon--shield-tick {
  -webkit-mask-image: url(../../icons/shield-tick-thin.svg);
  mask-image: url(../../icons/shield-tick-thin.svg);
}

/* --- 간격·정렬 유틸리티 --- */
.privacy-mt-10 {
  margin-top: var(--ds-number-10);
}
.privacy-mt-8 {
  margin-top: var(--ds-number-8);
}
.privacy-text-center {
  text-align: center;
}

/* --- 다운로드/바로가기 버튼 아이콘 --- */
.privacy-btn-icon {
  width: 1.6rem;
  height: 1.6rem;
  filter: brightness(0) invert(1);
}

/* --- 번호 목록 --- */
.privacy-numbered-list {
  counter-reset: privacy-num;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-12);
}
.privacy-numbered-item {
  display: flex;
  gap: var(--ds-number-6);
  align-items: flex-start;
}
.privacy-numbered-item::before {
  counter-increment: privacy-num;
  content: counter(privacy-num) ".";
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  flex-shrink: 0;
}

/* --- CTA 버튼 래퍼 --- */
.privacy-cta {
  display: flex;
  justify-content: center;
  padding-top: var(--ds-number-16);
}

/* --- 문서 카드 그리드 (조례/시행규칙) --- */
.privacy-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-number-10);
  margin-top: var(--ds-number-8);
}
.privacy-doc-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-5);
  padding: var(--ds-number-20);
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-medium);
}
.privacy-doc-card__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}
.privacy-doc-card__desc {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-50);
  line-height: 1.7;
  flex: 1;
}
.privacy-doc-card .ds-btn {
  align-self: flex-start;
  margin-top: var(--ds-number-2);
}


/* ============================================================
   반응형 — 태블릿 (768px ~ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  .privacy-card {
    max-width: 100%;
    padding-inline: var(--ds-number-10);
  }
  .privacy-doc-grid {
    grid-template-columns: 1fr;
  }
  .privacy-doc-card {
    padding: var(--ds-number-16);
  }
}

/* ============================================================
   반응형 — 모바일 (~767px)
   ============================================================ */
@media (max-width: 767px) {
  .privacy-wrap {
    padding-inline: var(--ds-mobile-padding-layout-side);
    padding-block: var(--ds-number-30);
  }
  .privacy-card {
    gap: 0;
  }
  .privacy-header__title {
    font-size: var(--ds-font-size-24);
  }
  .privacy-header__date {
    font-size: var(--ds-font-size-13);
  }
  .privacy-body {
    font-size: var(--ds-font-size-14);
  }
  .privacy-body p {
    font-size: inherit;
  }
  .privacy-article__title {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .privacy-article {
    margin-top: var(--ds-number-10);
  }
  .privacy-table {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .privacy-table th,
  .privacy-table td {
    padding: var(--ds-number-3) var(--ds-number-4);
  }
  .privacy-wrap--short {
    min-height: 0;
  }
  .privacy-icon-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .privacy-icon-layout--left {
    align-items: center;
    text-align: left;
  }
  .privacy-icon-layout__icon {
    width: 7.2rem;
    height: 7.2rem;
  }
  .privacy-icon-layout__icon .ds-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .privacy-emphasis-box {
    padding: var(--ds-number-8) var(--ds-number-10);
    font-size: var(--ds-mobile-font-size-body-small);     /* 14px */
  }

  /* 법률문서 v2 모바일 */
  .privacy-chapter {
    margin-top: var(--ds-number-10);
  }
  .privacy-chapter__title {
    font-size: var(--ds-font-size-17);
    margin-bottom: var(--ds-number-4);
  }
  .privacy-article--v2 {
    margin-top: var(--ds-number-6);
  }
  .privacy-article--v2 .privacy-article__title {
    font-size: var(--ds-font-size-15);
  }
  .privacy-sub-list {
    padding-left: var(--ds-number-8);
  }
  .privacy-doc-grid {
    grid-template-columns: 1fr;
  }
  .privacy-doc-card {
    padding: var(--ds-number-12);
  }
}



/* ↓↓↓ 클린신고센터 온라인 신고(.clean-list*) — 02_design/PUB_CSS/footer-sub-page-V1.css(851~1090) 동기화 복제 (MNU-U-040700 고유 클래스, 타 푸터 페이지 무영향) ↓↓↓ */
/* ================================================================
   클린신고센터 — 신고목록 그리드 (MNU-U-040700)
   - 좌측 라벨 박스 + 우측 카드 그리드 (PC 1+3 / 태블릿 1+2 / 모바일 1열)
   ================================================================ */
.clean-list-section {
  margin-top: var(--ds-number-16);
}

/* --- 섹션 헤더 (H2 + 설명) --- */
.clean-list-section__header {
  margin-bottom: var(--ds-number-8);
}
.clean-list-section__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-80);
  margin: 0 0 var(--ds-number-2);
}
.clean-list-section__desc {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-60);
  line-height: 1.7;
  margin: 0;
}

.clean-list-section__notice {
  margin: var(--ds-number-5) 0 0;
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-60);
  line-height: 1.6;
}
.clean-list-section__notice strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-80);
}

.clean-list {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 4fr;
  gap: 1rem;
}

/* --- 좌측 라벨 박스 --- */
.clean-list__label {
  background-color: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ds-number-8) var(--ds-number-4);
  gap: var(--ds-number-2);
}
.clean-list__label-icon {
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.clean-list__label-icon img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}
.clean-list__label-text {
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-bold);
  line-height: 1.4;
  color: var(--ds-color-gray-0);
  margin: 0;
}

/* --- 우측 body 컨테이너 (그리드 + 직접 신고 박스 세로 배치) --- */
.clean-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3);
  min-width: 0;
}

/* --- 우측 카드 그리드 --- */
.clean-list__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.clean-list__card {
  background-color: var(--ds-color-gray-0);
  border: 0.1rem solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-small);
  padding: var(--ds-number-12) var(--ds-number-6);
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: var(--ds-number-6);
  text-align: center;
  min-height: 20rem;
}
.clean-list__card-title {
  align-self: center;
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin: 0;
}
.clean-list__card-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--ds-number-2);
  width: 100%;
}
.clean-list__card-actions .ds-btn {
  width: 100%;
  min-width: 0;
}
.clean-list__btn-icon {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: var(--ds-number-1);
  filter: brightness(0) invert(1);
}

/* --- 반응형: 태블릿 (768px ~ 1199px) --- */
@media (max-width: 1199px) {
  .clean-list {
    grid-template-columns: minmax(12rem, 1fr) 3fr;
  }
  .clean-list__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 반응형: 모바일 (~767px) --- */
@media (max-width: 767px) {
  .clean-list-section {
    margin-top: var(--ds-number-10);
  }
  .clean-list {
    grid-template-columns: 1fr;
    gap: var(--ds-number-2);
  }
  .clean-list__label {
    flex-direction: row;
    min-height: auto;
    padding: var(--ds-number-6);
    gap: var(--ds-number-4);
    justify-content: flex-start;
    text-align: left;
  }
  .clean-list__label-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
  }
  .clean-list__label-text {
    font-size: var(--ds-font-size-17);
    text-align: left;
  }
  .clean-list__label-text br {
    display: none;
  }
  .clean-list__grid {
    grid-template-columns: 1fr;
  }
  .clean-list__card {
    padding: var(--ds-number-10) var(--ds-number-8);
    min-height: 16rem;
  }
  .clean-list__card-title {
    font-size: var(--ds-font-size-17);
  }
  .clean-list-section__title {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .clean-list-section__desc {
    font-size: var(--ds-font-size-14);
  }
  .clean-list-section__notice {
    font-size: var(--ds-font-size-14);
  }
}


/* ================================================================
   청렴포털 직접 신고 안내 박스 (MNU-U-040700)
   - 신고센터 그리드 하단 풀폭 박스 (안내 + 신고하기 CTA)
   ================================================================ */
.clean-list-direct {
  padding: var(--ds-number-14) var(--ds-number-12);
  background-color: var(--ds-color-gray-0);
  border: 0.1rem solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-6);
  flex-wrap: wrap;
}
.clean-list-direct__text {
  flex: 1 1 24rem;
  min-width: 0;
}
.clean-list-direct__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  line-height: 1.3;
  margin: 0 0 var(--ds-number-1);
}
.clean-list-direct__desc {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-60);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 767px) {
  .clean-list-direct {
    padding: var(--ds-number-6) var(--ds-number-8);
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-number-4);
  }
  .clean-list-direct__text {
    flex: 0 0 auto;
  }
  .clean-list-direct__title {
    font-size: var(--ds-font-size-17);
  }
  .clean-list-direct__desc {
    font-size: var(--ds-font-size-14);
  }
}