/* ===== 이용약관 페이지 (Figma 79:1998) =====
   본문 폰트: Pretendard (공통). 좌측 세로 메뉴(200) + 우측(제목 + 약관 본문)
   레이아웃은 flex (gap 60). 조 제목은 Bold, 본문은 Regular */

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

/* ===== 좌측 메뉴 (79:2020) ===== */
.terms-nav {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;                        /* 시안 항목 간격 */
}
.terms-nav-track {                 /* 모바일 가로 스크롤용 트랙 (시안 ul.flex 구조) — PC 레이아웃은 동일 */
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.terms-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;
}
.terms-nav a.is-active {           /* 이용약관 (현재 페이지) */
  font-weight: 700;                /* Bold */
  color: #1b1b1b;
}

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

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

/* 약관 본문 (79:2038): 18px / 28px, 조 제목만 Bold */
.terms-body {
  padding: 28px 24px 0;
  font-size: 18px;
  font-weight: 400;                /* Regular */
  line-height: 28px;
  letter-spacing: -0.16px;
  color: #000;
}
.terms-body strong {
  font-weight: 700;                /* 조 제목 Bold */
}

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

/* ===== 모바일 (시안 112:63 "모바일 이용약관" — Figma 실측 375) =====
   본문 텍스트 노드(114:1929)는 수직 중앙정렬 박스라 노드 y가 아닌
   풀해상도 렌더 픽셀 스캔으로 실측 (글리프 292~3639 → 라인박스 287~3645) */
@media (max-width: 767px) {
  /* 섹션: 탭 박스 y101 = 헤더 하단(100.68) 바로 아래 (gap 0)
     본문 하단(y3645) → 푸터 시작(y3783) = 138px */
  .terms {
    padding: 0 0 138px;
  }
  .terms-wrap { padding: 0 20px; }   /* 콘텐츠 x20~355 (335) */
  .terms-row { gap: 0; }             /* 간격은 아래 margin/padding으로 제어 */

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

  /* 탭 목록 (112:1153 ul.flex): 항목 gap 20, 하단 1px #e5e5e5 */
  .terms-nav-track {
    width: max-content;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 탭 항목 (112:1155 a.relative): py 20 (높이 64), Regular 16/lh24/ls-0.16 #404040 */
  .terms-nav a {
    position: relative;
    padding: 20px 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #404040;
    white-space: nowrap;
  }
  /* 활성 탭 (112:1169 이용약관): Bold(공통 규칙) + #2d57a1, 하단 2px 바(트랙 보더 덮음)
     색상은 렌더 픽셀 실측 #2D57A1 (글자·바 동일) */
  .terms-nav a.is-active { color: #2d57a1; }
  .terms-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;
  }

  /* 제목 바 (112:1176): 보더(상하 1px #404040)·패딩(17/24)은 PC와 동일, 폰트만 Bold 20/lh28/ls-0.2 */
  .terms-head h1 {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.2px;
  }

  /* 약관 본문 (114:1929): 텍스트 x35·폭 311 (실측) → wrap(20) 기준 좌 15 / 우 9
     제목 바 하단(y263) → 본문(y287) = 24px. 폰트 PC와 동일: Regular 18/lh28/ls-0.16 #000 */
  .terms-body {
    padding: 24px 9px 0 15px;
  }
}