/* ===== 개인정보처리방침 페이지 (Figma 79:1997) =====
   본문 폰트: Pretendard (공통). 좌측 세로 메뉴(200) + 우측(제목 + 방침 본문)
   레이아웃은 flex (gap 60). 조 제목은 Bold, 본문은 Regular */

.privacy {
  width: 100%;
  padding: 123px 0 175px;            /* 시안: 헤더 아래 123px, 본문 아래~푸터 175px */
}
.privacy-wrap {                       /* 헤더와 동일 컨테이너 → 메뉴가 헤더 로고와 좌측 정렬 */
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px 0 var(--container-pad-left);
  font-family: 'Pretendard', sans-serif;
}
.privacy-row {
  max-width: 1280px;                  /* 시안 콘텐츠 폭 (200 + 60 + 1020) */
  display: flex;
  gap: 60px;                          /* 시안 좌우 간격 */
  align-items: flex-start;
}

/* ===== 좌측 메뉴 (79:2188) ===== */
.privacy-nav {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;                         /* 시안 항목 간격 */
}
.privacy-nav-track {                /* 모바일 가로 스크롤용 트랙 (시안 ul.flex 구조) — PC 레이아웃은 동일 */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.privacy-nav a {
  display: block;
  padding: 10px 8px;
  font-size: 20px;
  font-weight: 400;                 /* Regular */
  line-height: 30px;
  letter-spacing: -0.4px;
  color: #262626;
  text-decoration: none;
}
.privacy-nav a.is-active {          /* 개인정보보호방침 (현재 페이지) */
  font-weight: 700;                 /* Bold */
  color: #1b1b1b;
}

/* ===== 우측 본문 (79:2202) ===== */
.privacy-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* 제목 바: 상하 1px 보더 (79:2203) */
.privacy-head {
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  padding: 17px 24px;
}
.privacy-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;                 /* Bold */
  line-height: 30.8px;
  letter-spacing: -0.44px;
  color: #1b1b1b;
}

/* 방침 본문 (79:2208): 18px / 28px, 조 제목만 Bold, 하단 1px 보더 */
.privacy-body {
  border-bottom: 1px solid #e5e5e5;
  padding: 26px 24px 27px;
  font-size: 18px;
  font-weight: 400;                 /* Regular */
  line-height: 28px;
  letter-spacing: -0.16px;
  color: #0a0a0a;
}
.privacy-body strong {
  font-weight: 700;                 /* 조 제목 Bold */
}

/* 반응형: 좁은 화면에선 메뉴를 본문 위로 */
@media (max-width: 767px) {
  .privacy-row {
    flex-direction: column;
    gap: 24px;
  }
  .privacy-nav {
    flex: none;
    width: 100%;
  }
  /* 본문: 부모(.privacy-row)의 align-items:flex-start 때문에 column 전환 시
     내용 폭으로 굳음 → 375~767 전 구간 화면 폭 추종하도록 유동 폭 지정 */
  .privacy-main {
    width: 100%;
  }
  .privacy-nav-track {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 16px;
  }
}

/* ===== 모바일 (시안 112:64 "모바일 개인정보" — Figma 실측 375) ===== */
@media (max-width: 767px) {
  /* 섹션: 탭 박스 y94 — 헤더 하단(100.68)보다 6.68 위 (시안 실측 → 음수 마진)
     본문 하단(y4261) → 푸터 시작(y4359) = 98px */
  .privacy {
    margin-top: -6.7px;
    padding: 0 0 98px;
  }
  .privacy-wrap { padding: 0 20px; }   /* 콘텐츠 x20~355 (335) */
  .privacy-row { gap: 0; }             /* 간격은 아래 margin/padding으로 제어 */

  /* 탭 스크롤 영역 (114:1618 div.no-scrollbar): 가로 스크롤 + 스크롤바 숨김
     탭 보더(y159) → 제목 바(y194) = 35px (pb 15 + gap 20) */
  .privacy-nav {
    overflow-x: auto;
    padding-bottom: 15px;
    margin-bottom: 20px;
    scrollbar-width: none;             /* Firefox */
    -ms-overflow-style: none;          /* IE/Edge */
  }
  .privacy-nav::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

  /* 탭 목록 (114:1619 ul.flex): 항목 gap 20, 하단 1px #e5e5e5
     콘텐츠 폭 435.44 > 화면 335 → 가로 스크롤 */
  .privacy-nav-track {
    width: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 탭 항목 (114:1621 a.relative): py 20 (높이 64), Regular 16/lh24/ls-0.16 #404040 */
  .privacy-nav a {
    position: relative;
    padding: 20px 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #404040;
    white-space: nowrap;
  }
  /* 활성 탭 (114:1631 개인정보보호방침): Bold(공통 규칙) + #2d57a1, 하단 2px 바(트랙 보더 덮음)
     (시안은 #e51715 — 사용자 요청으로 #2d57a1 변경) */
  .privacy-nav a.is-active { color: #2d57a1; }
  .privacy-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;                      /* 시안 span.pointer-events-none: bottom -1, h2 */
    height: 2px;
    background: #2d57a1;
  }
  /* 제목 바 (114:1642): 보더(상하 1px #404040)·패딩(17/24)은 PC와 동일, 폰트만 Bold 20/lh28/ls-0.2 */
  .privacy-head h1 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
  }

  /* 방침 본문 (114:1871): 텍스트 x21·폭 335 → 좌우 패딩 0 (시안 x21은 wrap 20 + 1px 반올림 오차)
     하단 보더 없음. 제목 바 하단(y256) → 본문(y285) = 29px
     폰트는 PC와 동일: Regular 18/lh28/ls-0.16 #0a0a0a */
  .privacy-body {
    border-bottom: none;
    padding: 29px 0 0;
  }
}
