/*
 * 이용약관·개인정보처리방침 (UT-06) — Figma PC 627:8020·8070·8181 / 태블릿 694:13691 / MO 627:17170·17300·17574
 * 구성: sub-hero(사이트맵 배경 재사용) + 메인탭(tab--segment) + 서브필(tab--chip) + 헤드라인 + 버전 드롭다운 + 약관 본문.
 * 콘텐츠는 t_terms 저장 HTML(th:utext)을 .terms-content 하위 요소(h3/h4/p/ul/li/table)로 스타일링.
 */

/* 타이틀 배너 — 사이트맵 배경(#ee3124 + hero-illust) 재사용 */
.terms-page .sub-hero-inner {
  background: url("../../images/sitemap/hero-illust.png") right center / cover no-repeat #ee3124;
}

.terms-page .sub-hero-sub {
  display: none;   /* 서브텍스트 없음 */
}

/* 탭 블록 (메인탭 + 서브필) — 시안 tab: gap48·pt80·pb56·px40. 자식(tab_large·tab_small)은 전폭(w-full) */
.terms-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  padding: var(--spacing-80) var(--spacing-40) var(--spacing-56);
}

/* 본문 컨테이너 — 시안 body: gap40·pt40·pb80·px40 (헤드라인↔드롭↔본문 40) */
.terms-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  padding: var(--spacing-40) var(--spacing-40) var(--spacing-80);
}

/* 서브필 (이용약관 문서 전환) — 시안 tab_small 전폭·가운데·h64·px40·Bold18 */
.terms-subtab .tab-list {
  width: 100%;
  justify-content: center;
}

.terms-subtab .tab-link {
  height: 64px;
  padding: 0 var(--spacing-40);
  font-size: 18px;
}

/* 서브탭 줄바꿈 — PC 한 줄(br 숨김), 모바일만 "브랜드명 / 홈페이지 이용약관" 2줄 */
.tab-br-mo {
  display: none;
}

/* 헤드라인 (문서 제목) — Paperlogy 56 (type-display-2), 가운데 */
.terms-headline {
  color: var(--color-text-heading);
  text-align: center;
  word-break: keep-all;   /* 단어 경계 줄바꿈 (세이브더칠드런 / 홈페이지 이용약관) */
}

/* 버전 드롭다운 — 우측 정렬, 시안 w440 */
.terms-drop {
  display: flex;
  justify-content: flex-end;
}

.terms-drop .form-select {
  width: 440px;
}

/* ── 약관 본문 (저장 HTML 스타일링) ─────────────────────────── */
/* 장 제목 (h3) — 시안 section tit: Pretendard Bold 30 + 하단 2px 구분선 */
.terms-content h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  padding-bottom: var(--spacing-16);
  border-bottom: 2px solid var(--color-text-heading);
  margin: var(--spacing-40) 0 var(--spacing-24);
}

.terms-content h3:first-child {
  margin-top: 0;
}

/* 조 제목 (h4) — Pretendard SemiBold 20 */
.terms-content h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  margin: var(--spacing-40) 0 var(--spacing-12);
}

/* 본문 텍스트 (p) — Pretendard Regular 18 */
.terms-content p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
  margin-top: var(--spacing-12);
}

/* 리스트 공통 — Pretendard Regular 16, gap8, pl16 */
.terms-content ul,
.terms-content ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
  padding-left: var(--spacing-16);
}

.terms-content li {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);
}

/* 불릿(ul) — 3px 도트 */
.terms-content ul > li {
  padding-left: var(--spacing-16);
}

.terms-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-text-secondary);
}

/* 번호(ol) — "N." (시안 BulletText num) */
.terms-content ol {
  counter-reset: terms-item;
}

.terms-content ol > li {
  counter-increment: terms-item;
  padding-left: var(--spacing-24);
}

.terms-content ol > li::before {
  content: counter(terms-item) ".";
  position: absolute;
  left: 0;
  top: 0;
}

/* 개인정보 보유기간 표 — 시안 627:8209 (border #ddd·radius12 라운드·헤더 #f3f3f3) */
.terms-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing-24);
  border-radius: var(--radius-small);
  overflow: hidden;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.terms-content th,
.terms-content td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-20) var(--spacing-24);
  text-align: center;
  vertical-align: middle;
}

/* 첫 열(항목)은 좌측 정렬 (시안) */
.terms-content td:first-child {
  text-align: left;
}

.terms-content th {
  background-color: var(--color-background-section);
  font-weight: 600;
}

/* CardButton (개인정보 위탁현황 등) — 시안 160:1299: 흰 배경·1px #222 보더·pill·h40·Bold16 + 화살표 */
.terms-content .terms-card-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  height: 40px;
  margin-top: var(--spacing-20);
  padding: 0 var(--spacing-20) 0 var(--spacing-24);
  border: 1px solid var(--color-text-heading);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  text-decoration: none;
}

.terms-content .terms-card-button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-arrowNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-arrowNext.svg") no-repeat center / contain;
}

/* 다운로드 버튼 (개인정보 별지 서식 — UT-06 개인정보처리방침 6번 섹션) — 아웃라인 박스 + ↓ */
.terms-content .terms-download {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background-color: var(--color-background);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
  text-decoration: none;
}

.terms-content .terms-download::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
}

/* 이전 개인정보처리방침 버전 박스 (가이드 image3 / 시안 627:17783) — 현재✓ + 이전 링크(본홈 새창) + 전체보기 토글 */
.terms-versions {
  margin-top: var(--spacing-40);
  padding: var(--spacing-40);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}

/* .terms-content 프리픽스로 base .terms-content ul/li(도트·padding) 오버라이드 */
/* 시안 627:8286 — PC 3열 그리드(열간격24·행간격40) */
.terms-content .terms-versions-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-40);
  margin: 0;
  padding: 0;
}

.terms-content .terms-versions-list > li {
  padding-left: 0;
}

.terms-content .terms-versions-list > li::before {
  content: none;   /* 상속된 불릿 도트 제거 */
}

/* .terms-content 프리픽스 — base .terms-content li(0,1,1) 보다 높은 특정성 확보 */
/* 시안 627:8288 — PC/Body3/Bold 18 #555, 가운데 정렬 */
.terms-content .terms-versions-item {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
  text-align: center;
  word-break: keep-all;
}

.terms-versions-item a {
  color: inherit;
  text-decoration: none;
}

.terms-versions-item a:hover {
  text-decoration: underline;
}

/* 현재 버전 — ✓ + 가운데 정렬 (타이포는 .terms-versions-item 상속: 18 Bold #555) */
.terms-versions-item--current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
}

.terms-versions-check {
  flex-shrink: 0;
}

.terms-versions-check::before {
  content: "✓";
}

/* 전체보기 접힘 — 초과 항목 숨김, 펼치면 노출 */
.terms-versions-item--hidden {
  display: none;
}

.terms-versions.is-expanded .terms-versions-item--hidden {
  display: block;
}

.terms-versions-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 100%;
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-24);
  border: none;
  border-top: 1px solid var(--color-border);
  background: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
  cursor: pointer;
}

.terms-versions-toggle-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
  transition: transform 0.15s;
}

.terms-versions.is-expanded .terms-versions-toggle-icon {
  transform: rotate(180deg);
}

/* 이전 약관 전체보기 박스 — 본홈 약관 페이지로 새 창 이동 (CRFF-185, 시안 627:17783 박스+토글).
 * SERVICE 는 내부 이전버전이 없어 그리드 없이 링크만 (PRIVACY 도 동일 — 이전 버전은 본홈에서 제공) */
.terms-prev {
  margin-top: var(--spacing-40);
  padding: var(--spacing-40);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}
.terms-prev-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
  text-decoration: none;
}
.terms-prev-link-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-arrowDown.svg") no-repeat center / contain;
}

/* 목차 (다장 문서 — terms.js 가 h4 조항명으로 생성) — 시안 group: bg#f3f3f3·radius24·pad40·gap24·3열 */
.terms-index {
  margin-bottom: var(--spacing-40);
  padding: var(--spacing-40);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}

/* 3열 그리드 — 세로 채움(col1: 1~N, col2: …). 행수는 JS 가 --terms-index-rows 로 공급 */
.terms-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(var(--terms-index-rows, 9), auto);
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-12);
}

/* 항목 = [번호][띄어쓰기 4][텍스트] flex (시안 BulletText) */
.terms-index li {
  display: flex;
  gap: var(--spacing-4);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-body);
}

.terms-index-num {
  flex-shrink: 0;
}

/* 목차는 자체 번호 span 사용 — 본문 ol 카운터(::before)·패딩이 중복 적용되지 않도록 무효화 */
.terms-content .terms-index li {
  padding-left: 0;
}

.terms-content .terms-index li::before {
  content: none;
}

.terms-index a {
  color: inherit;
  text-decoration: none;
}

.terms-index a:hover {
  text-decoration: underline;
}

/* 이용약관 서브탭 — 채움 등분 칩(시안 tab_MO 627:17215)을 모바일~1024px 까지 적용
 * (>1024px 데스크탑은 base 아웃라인 칩 유지). h48·pill·px20·Bold14 lh1.3·gap6 */
@media (max-width: 1024px) {
  .terms-subtab {
    padding: 0 var(--spacing-16);   /* 탭블록 px0 이므로 서브탭은 자체 인셋 */
  }

  .terms-subtab .tab-list {
    gap: var(--spacing-6);
  }

  .terms-subtab .tab-list li {
    flex: 1;
  }

  .terms-subtab .tab-link {
    flex: 1;   /* li 를 꽉 채워 텍스트 가운데 정렬 (온라인 탭 tab--segment 동일) */
    height: 48px;
    min-width: 72px;
    padding: var(--spacing-8) var(--spacing-20);
    background-color: var(--color-background-section);
    border: 1px solid var(--color-border-button);
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-text-body);
    white-space: normal;
    word-break: keep-all;   /* 한글 단어 단위 줄바꿈 (아동권리영화제 / 홈페이지 이용약관) */
  }

  /* 브랜드명 뒤 강제 줄바꿈 → "브랜드명 / 홈페이지 이용약관" 2줄 고정 */
  .terms-subtab .tab-br-mo {
    display: inline;
  }

  .terms-subtab .tab-link[aria-current] {
    background-color: var(--color-text-heading);
    border-color: var(--color-text-heading);
    color: var(--color-text-inverse);
  }
}

@media (max-width: 1023px) {
  .terms-tabs {
    gap: var(--spacing-24);
    padding: var(--spacing-40) 0 0;   /* pb0 — 탭→타이틀 간격은 .terms-inner pt20 이 담당 (시안 20px) */
  }

  /* 메인탭 모바일 = 언더라인 바 (시안 tab_MO 627:17211): 전폭 #eee 구분선 + 아이템 내부 px16 인셋, 간격0·등분·h56·pb20·Bold16 */
  .terms-tab-main .tab-list {
    gap: 0;
    padding: 0 var(--spacing-16);
    background: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-divider);
  }

  /* 활성 li 를 내용폭 고정하는 tab--segment :has 규칙을 무효화 — 언더라인 탭은 둘 다 등분 */
  .terms-tab-main .tab-list li,
  .terms-tab-main .tab-list li:has(> .tab-link[aria-current]) {
    flex: 1;
  }

  .terms-tab-main .tab-link {
    height: 56px;
    padding: 0 var(--spacing-16) var(--spacing-20);
    align-items: flex-end;
    justify-content: center;
    background: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--color-border-button);   /* 하단 밑줄만 (상·좌·우 선 없음) */
    font-size: 16px;
    color: var(--color-text-secondary);
  }

  .terms-tab-main .tab-link[aria-current] {
    background: none;
    border-bottom: 2px solid var(--color-text-heading);
    color: var(--color-text-heading);
  }

  .terms-inner {
    gap: var(--spacing-20);   /* 타이틀→셀렉트박스 20 (시안 tit gap-20) */
    padding: var(--spacing-20) var(--spacing-16) var(--spacing-64);   /* pt20 = 탭→타이틀 20 */
  }

  /* 셀렉트박스→본문 40 (시안: gap20 + 콘텐츠 상단여백 20) */
  .terms-content {
    margin-top: var(--spacing-20);
  }

  /* 이전 약관 박스 — MO 시안 627:17783: pt40·pb32·px20 (CRFF-185) */
  .terms-prev {
    margin-top: var(--spacing-32);
    padding: var(--spacing-40) var(--spacing-20) var(--spacing-32);
  }

  .terms-headline {
    font-size: 30px;   /* MO 는 display-2(56) → heading-1(30) 축소 (section-headline 관례) */
  }

  .terms-drop .form-select {
    width: 100%;   /* MO 전폭 */
  }

  /* 모바일 목차 — 시안 627:17353: 2열·행 우선(1,2/3,4…)·번호12·텍스트13 SemiBold·gap8 */
  .terms-index {
    padding: var(--spacing-24) var(--spacing-20);
  }

  .terms-index ol {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    column-gap: var(--spacing-8);
    row-gap: var(--spacing-8);
  }

  /* .terms-content 프리픽스로 특정성 상향 — 아래 .terms-content li(15) 오버라이드 방지 */
  .terms-content .terms-index li {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-body);
  }

  .terms-index-num {
    font-size: 12px;
  }

  /* 모바일 본문 = 표 형태 (시안 627:17466·17574): 장 상단 4px#222 + 조항마다 1px#ddd 구분선 */
  /* 장 제목(h3) — MO/Title2 28 Bold 가운데 (시안 627:17525), 위64·아래24 */
  .terms-content h3 {
    font-size: 28px;
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
    margin: var(--spacing-64) 0 var(--spacing-24);
  }

  /* 조/섹션(h4) — MO/Body1 18 Bold, body-1(#555) (시안 627:17472·17655) */
  .terms-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-body);
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-border);   /* 조항 사이 구분선 #ddd */
  }

  /* 제목(h3) 직후 첫 본문 — 조(h4·세이브) 또는 개요 문단(p·개인정보) 위에 장 상단 4px #222 */
  .terms-content h3 + h4,
  .terms-content h3 + p {
    margin-top: var(--spacing-24);
    padding-top: var(--spacing-40);
    border-top: 4px solid var(--color-text-heading);   /* 장 상단 4px #222 */
  }

  /* 본문 문단(p) — MO/Body2 16 Regular, sub-title(#333) (시안 627:17474·17659) */
  .terms-content p {
    font-size: 16px;
    color: var(--color-text-subtitle);
  }

  /* 개요 문단(제목 직후 p) — MO/Body3 15 Regular #555 (시안 627:17653) */
  .terms-content h3 + p {
    font-size: 15px;
    color: var(--color-text-body);
  }

  /* 하위 리스트(li) — MO/Body3 15 Regular, body-1(#555) (시안 627:17478·17660) */
  .terms-content li {
    font-size: 15px;
    color: var(--color-text-body);
  }

  /* 데이터 표 — MO/Body4 14, 각진 모서리, 상단선 검정#222 (시안 627:17682) */
  .terms-content table {
    font-size: 14px;
    border-radius: 0;
  }

  .terms-content th,
  .terms-content td {
    padding: var(--spacing-16);
  }

  .terms-content th {
    font-weight: 700;
    color: var(--color-text-heading);   /* 헤더 14 Bold #222 */
    border-top-color: var(--color-text-heading);   /* 표 상단선 검정 #222 */
  }

  /* CardButton 모바일 — h32·13px·화살표16 (시안 627:17779) */
  .terms-content .terms-card-button {
    height: 32px;
    padding: 0 var(--spacing-16);
    font-size: 13px;
  }

  .terms-content .terms-card-button::after {
    width: 16px;
    height: 16px;
  }

  /* 다운로드 버튼 모바일 */
  .terms-content .terms-download {
    font-size: 14px;
    padding: var(--spacing-8) var(--spacing-16);
  }

  /* 버전 박스 모바일 (시안 627:17783) — 여백·폰트 축소 */
  .terms-versions {
    padding: var(--spacing-32) var(--spacing-20);
  }

  /* 시안 627:17783 — MO 2열 그리드(열간격8·행간격20) */
  .terms-content .terms-versions-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-8);
    row-gap: var(--spacing-20);
  }

  /* MO 항목 — Caption1/SemiBold 13 #6e6e6e (시안 627:17796) */
  .terms-content .terms-versions-item {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
  }

  .terms-versions-toggle {
    font-size: 16px;
  }
}