/*
 * 약관·처리방침 문서.
 *
 * Figma "홈페이지 이용약관/개인정보 처리 방침"(O8vEkIloHlQfVFngJEKQXC, node 271:8677) 기준.
 * 소개 페이지와 같은 방식으로, 원본 px 를 1920 으로 나눈 vw 를 clamp 로 감싸 쓴다.
 *
 * **본문은 클래스가 아니라 태그로 잡는다.** 문안은 `content/terms/` 의 원고에서 오고
 * 마크다운은 `<h2>`·`<p>`·`<ul>` 같은 맨 태그만 뱉는다. 클래스를 붙이려면 원고 쪽에 마크업
 * 규칙을 요구하게 되는데, 문안을 주는 사람이 지킬 수 있는 약속이 아니다. 그래서 어떤 구조가
 * 와도 읽히도록 태그 기준으로 잡았다. 여기 없는 태그가 와도 읽기는 깨지지 않는다.
 *
 * 위계 대응 — h2 = 장(총칙), h3 = 조(제1조 목적), h4 = 항. 원고가 어디까지 쪼개 오든
 * 세 단계는 확보된다.
 *
 * 세로 여백은 인접 형제 규칙 대신 **margin 병합**에 맡긴다. 병합은 큰 쪽을 택하므로
 * `h2{margin-bottom:52}` 와 `h3{margin-top:52}` 가 만나면 52 로 붙는다 — 조합마다 예외
 * 규칙을 두지 않아도 된다.
 *
 * 헤더·푸터는 이 문서에도 있다(디자인 확인). 앱 웹뷰만 `?webview=1` 로 숨긴다 — 맨 아래.
 */

body.terms {
  margin: 0;
  background: var(--neutral-50);
  color: var(--neutral-900);
  line-height: 1.4;
  word-break: keep-all;
  /* 숫자·법령 조문 번호가 붙어 있어 줄바꿈이 생기면 읽기 어렵다 */
  overflow-wrap: break-word;
}

.terms-page {
  /* Figma: 머리글 x 420 · 카드 x 380(1160). 카드 기준으로 가운데 정렬한다 */
  max-width: 1160px;
  margin: 0 auto;
  /*
   * 헤더는 `position: fixed` 이고 흐름에서 높이를 차지하지 않는다(landing.css `.site-header`).
   * Figma 의 위쪽 여백 200 은 화면 맨 위 기준이라 헤더 높이를 빼야 같은 자리에 앉는다.
   */
  padding: calc(var(--header-h) + clamp(1.5rem, 5.625vw, 108px))
    clamp(1.25rem, 1.667vw, 32px) clamp(3rem, 8.333vw, 160px);
}

/*
 * 소개 페이지의 헤더는 배경이 없다 — 영상 위를 지나기 때문이다. 약관은 수십 개 조문이
 * 스크롤되므로, 배경이 없으면 글자가 로고와 버튼 아래로 흘러 지나가 둘 다 읽을 수 없게 된다.
 * 문서에서만 헤더 자리에 바닥을 깐다.
 *
 * 로고는 `mix-blend-mode: exclusion` 이라 뒤에 무엇이 있느냐로 색이 정해진다. 크림색 바닥을
 * 깔면 어느 스크롤 위치에서도 같은 색으로 읽힌다 — 배경을 깐 이유가 하나 더 있는 셈이다.
 * z-index 는 로고·CTA(50)보다 낮아야 한다.
 */
.terms .site-header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 49;
  width: 100%;
  height: var(--header-h);
  background: var(--neutral-50);
}

/* ── 머리글 ──────────────────────────────────────────────────────────── */

.terms-head {
  /* 카드보다 40px 안쪽에서 시작한다(Figma 420 vs 380) */
  padding: 0 clamp(0px, 2.083vw, 40px);
  margin-bottom: clamp(1.5rem, 4.167vw, 80px);
}

.terms-head__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.875vw, 2.25rem); /* 36 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

/* ── 본문 카드 ───────────────────────────────────────────────────────── */

.terms-card {
  padding: clamp(1.25rem, 2.083vw, 40px);
  border-radius: clamp(12px, 1.25vw, 24px);
  background: var(--neutral-0);
  /* 본문 기본값. 아래 태그 규칙이 크기만 덮어쓴다 */
  color: var(--neutral-700);
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem); /* 20 */
  font-weight: 500;
  line-height: 1.7; /* 조문은 길어서 소개 페이지보다 넉넉하게 */
  letter-spacing: -0.04em;
}

/*
 * 장 — 총칙 · 이용계약 및 정보보호
 *
 * `h1` 을 함께 잡는다. 내보내기 문서는 위계를 잃고 모든 절을 `h1` 으로 뱉는 경우가 많다 —
 * 받은 동의서가 그랬다(본문 h1 8개, h2·h3 없음). 셸이 첫 `h1` 을 문서 제목으로 걷어내므로
 * 본문에 남은 `h1` 은 절 제목이라는 뜻이고, 장과 같게 두는 게 원고 의도에 가깝다.
 */
.terms-card h1,
.terms-card h2 {
  margin: clamp(2.5rem, 6.25vw, 120px) 0 clamp(1.25rem, 2.708vw, 52px);
  color: var(--neutral-900);
  font-size: clamp(1.25rem, 1.458vw, 1.75rem); /* 28 */
  font-weight: 600;
  line-height: 1.3;
}

/* 조 — 제1조 목적 · 제2조 용어의 정의 */
.terms-card h3 {
  margin: clamp(1.75rem, 2.708vw, 52px) 0 clamp(0.625rem, 0.833vw, 16px);
  color: var(--neutral-900);
  font-size: clamp(1.0625rem, 1.25vw, 1.5rem); /* 24 */
  font-weight: 600;
  line-height: 1.4;
}

/* 항 — 원고가 더 쪼개 올 경우 */
.terms-card h4 {
  margin: clamp(1.25rem, 1.667vw, 32px) 0 clamp(0.5rem, 0.625vw, 12px);
  color: var(--neutral-900);
  font-size: clamp(1rem, 1.042vw, 1.25rem); /* 20 */
  font-weight: 600;
  line-height: 1.4;
}

.terms-card p,
.terms-card ul,
.terms-card ol {
  margin: 0 0 clamp(0.5rem, 0.625vw, 12px);
}

/* 카드 첫 요소·마지막 요소가 패딩 위에 여백을 더하면 안 된다 */
.terms-card > :first-child {
  margin-top: 0;
}

.terms-card > :last-child {
  margin-bottom: 0;
}

/* 목록 — Figma 는 들여쓰기 30px, 항목 간 12px */
.terms-card ul,
.terms-card ol {
  padding-left: clamp(1.125rem, 1.563vw, 30px);
}

.terms-card ul {
  list-style: disc;
}

.terms-card ol {
  list-style: decimal;
}

.terms-card li + li,
.terms-card li > ul,
.terms-card li > ol {
  margin-top: clamp(0.5rem, 0.625vw, 12px);
}

.terms-card li > ul,
.terms-card li > ol {
  margin-bottom: 0;
}

.terms-card strong {
  color: var(--neutral-900);
  font-weight: 600;
}

/*
 * 약관에서 링크는 "여기서 확인" 같은 실제 참조다. landing.css 의 `.landing :where(a)` 가
 * 색을 지우므로 문서에서는 밑줄로 링크임을 남긴다.
 */
.terms-card a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.terms-card hr {
  height: 1px;
  margin: clamp(1.75rem, 2.708vw, 52px) 0;
  border: 0;
  background: var(--neutral-300);
  opacity: 0.5;
}

.terms-card blockquote {
  margin: clamp(0.75rem, 1.25vw, 24px) 0;
  padding-left: clamp(0.75rem, 1.042vw, 20px);
  border-left: 2px solid var(--neutral-300);
}

.terms-card code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--neutral-50);
  font-size: 0.9em;
}

/* ── 표(처리방침의 개인정보 항목) ────────────────────────────────────── */

/*
 * 좁은 화면에서 표를 줄이면 셀 안에서 글자가 세로로 쌓여 읽을 수 없다. 가로 스크롤을 허용하고
 * 최소 폭을 준다. `-webkit-overflow-scrolling` 은 앱 웹뷰에서 관성 스크롤을 살린다.
 *
 * 마크다운 표에는 감싸는 요소가 없으므로 빌드가 이 div 를 붙인다(build.mjs `wrapTables`).
 */
.terms-table-scroll {
  margin: clamp(0.75rem, 1.25vw, 24px) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.terms-card table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: clamp(0.75rem, 0.833vw, 1rem); /* 16 */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: left;
}

.terms-card th,
.terms-card td {
  padding: clamp(0.5rem, 0.625vw, 12px) clamp(0.5rem, 0.729vw, 14px);
  border: 1px solid #eae7e2;
  vertical-align: top;
}

/*
 * 워드에서 온 표는 셀 안에 `<p>` 가 들어 있다(한 셀에 여러 문단). 위 규칙의 문단 여백이
 * 그대로 걸리면 칸이 아래로 늘어난다. 셀 안에서는 문단 사이만 띄운다.
 */
.terms-card th > p,
.terms-card td > p {
  margin: 0;
}

.terms-card th > p + p,
.terms-card td > p + p {
  margin-top: 0.4em;
}

.terms-card thead th {
  background: var(--neutral-50);
  color: var(--neutral-900);
  font-weight: 600;
  white-space: nowrap;
}

.terms-card tbody th {
  color: var(--neutral-900);
  font-weight: 500;
}

/* ── 문안 대기 자리 ──────────────────────────────────────────────────── */

/* 확정 전임을 화면에서도 알 수 있게 둔다 */
.terms-pending {
  padding: clamp(0.75rem, 1.042vw, 20px);
  border: 1px dashed var(--neutral-300);
  border-radius: 8px;
  background: var(--neutral-50);
}

/* ── 문의 채널(FAQ 페이지) ───────────────────────────────────────────── */

/*
 * `/faq/` 의 "이메일 문의하기" 버튼(APPF-1182). 약관 문서에는 없는 부품이지만 그 페이지가
 * `.terms-card` 뼈대를 그대로 쓰므로 여기 둔다 — 페이지 하나를 위해 CSS 파일을 더 만들면
 * `<head>` 의 로드 순서가 페이지마다 갈리고, 아래 특정도 계산이 다시 어긋난다.
 *
 * 모양은 404·딥링크 안내 화면의 CTA 와 같은 알약 버튼이다(`base.css` `.notice__cta`).
 * 그 클래스를 그대로 쓰지 않았다 — `.notice` 블록 소유물이고 px 고정이라, 이 카드의
 * clamp 본문 옆에서 홀로 안 줄어든다.
 *
 * **선택자 앞에 `.terms-card` 를 붙인다.** 이 카드 안의 태그 규칙(`.terms-card p`·
 * `.terms-card a`)이 (0,1,1) 이라 클래스 하나(0,1,0)로는 못 이긴다 — 여백은 `p` 의 `margin`
 * 단축 속성에, 버튼 색·밑줄은 `a` 의 링크 기본값에 덮인다. 클래스 둘(0,2,0)이면 클래스
 * 개수를 먼저 비교하므로 이긴다. 같은 함정을 `base.css` 가 `a.notice__cta` 로 한 번 못 박아
 * 둔 바 있다(`.landing :where(a)` 쪽).
 */
.terms-card .terms-contact {
  /* 문안과 버튼 사이는 문단 간격(12)보다 벌린다 — 읽고 나서 누르는 순서다 */
  margin-top: clamp(1.25rem, 1.667vw, 32px);
}

.terms-card a.terms-contact__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 3.125vw, 60px);
  padding: 0 clamp(1.25rem, 1.667vw, 32px);
  border-radius: 100px;
  background: var(--coral-500);
  color: #fff;
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.terms-card a.terms-contact__cta:active {
  background: var(--coral-600);
}

/* 버튼을 눌러도 아무 일이 없는 기기용 안내. 본문보다 작고 흐리게 둔다 */
.terms-card .terms-contact__note {
  margin-top: clamp(0.75rem, 1.042vw, 20px);
  color: var(--neutral-500);
  font-size: clamp(0.8125rem, 0.833vw, 1rem); /* 16 */
}

/* ── FAQ(문답 아코디언) ──────────────────────────────────────────────── */

/*
 * `/faq/` 는 약관과 달리 카드를 여러 장 쓴다(APPF-1247). 문답이 40개를 넘어서 한 장에 담으면
 * 카테고리 경계가 스크롤 안에서 사라진다 — 카드가 곧 카테고리다.
 *
 * 약관 문서에는 카드가 한 장뿐이라 이 규칙이 없었다. 형제 카드 간 여백은 여기서 준다.
 */
.terms-card + .terms-card {
  margin-top: clamp(1rem, 1.667vw, 32px);
}

/* 카테고리 제목(h2) 아래 한 줄 설명. 제목보다 흐리게 둬서 위계가 뒤집히지 않게 한다 */
.terms-card .terms-card__lead {
  margin-top: calc(-1 * clamp(0.75rem, 1.667vw, 32px));
  margin-bottom: clamp(0.75rem, 1.25vw, 24px);
  color: var(--neutral-500);
  font-size: clamp(0.875rem, 0.938vw, 1.125rem); /* 18 */
  font-weight: 500;
}

/*
 * 문답 한 건. **`<details>` 를 쓴다** — 접고 펴는 동작을 브라우저가 맡으므로 JS 가 막혀도
 * 답을 읽을 수 있고(펼치기만 하면 된다), 검색·접근성 도구도 닫힌 내용을 찾아낸다. 직접
 * 만든 아코디언은 스크립트가 안 돌면 답이 통째로 사라진다 — 고객센터에서 받아들일 수 없다.
 *
 * 구분선은 항목의 위쪽에 둔다. 마지막 항목만 아래쪽을 더해 목록이 선으로 닫히게 한다.
 */
.terms-card details {
  border-top: 1px solid #eae7e2;
}

.terms-card details:last-child {
  border-bottom: 1px solid #eae7e2;
}

/*
 * 질문 줄. `list-style: none` 과 `::-webkit-details-marker` 를 함께 지운다 — 사파리는
 * 아직 후자만 듣는다. 하나만 쓰면 한쪽 브라우저에 삼각형 기본 마커가 남는다.
 */
.terms-card summary {
  display: flex;
  gap: clamp(0.75rem, 1.042vw, 20px);
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.875rem, 1.25vw, 24px) 0;
  color: var(--neutral-900);
  font-size: clamp(0.9375rem, 1.042vw, 1.25rem); /* 20 */
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.terms-card summary::-webkit-details-marker {
  display: none;
}

/*
 * 펼침 화살표. 아이콘 파일을 두지 않고 테두리 두 변을 회전시켜 그린다 — 이 페이지 하나를
 * 위해 SVG 를 요청·배포·캐시 무효화까지 얹을 이유가 없다.
 *
 * `flex-shrink: 0` 이 있어야 질문이 길 때 화살표가 찌그러지지 않는다.
 */
.terms-card summary::after {
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  margin-bottom: 0.15em;
  border-right: 2px solid var(--neutral-400);
  border-bottom: 2px solid var(--neutral-400);
  content: "";
  transform: rotate(45deg);
}

.terms-card details[open] summary::after {
  margin-bottom: 0;
  margin-top: 0.15em;
  transform: rotate(-135deg);
}

/*
 * 답. 원고에서 강조 배경(callout)이던 자리다. 배경을 옅게 깔아 질문 줄과 구분한다 —
 * 접었다 펴는 화면에서 답이 어디서 끝나는지가 선만으로는 읽히지 않는다.
 *
 * 웹뷰에서는 카드 배경이 없어지므로(아래 `.webview .terms-card`) 이 배경이 유일한 면이 된다.
 */
.terms-card .faq-answer {
  padding: clamp(0.875rem, 1.25vw, 24px);
  margin-bottom: clamp(0.875rem, 1.25vw, 24px);
  border-radius: clamp(8px, 0.833vw, 16px);
  background: var(--neutral-50);
  font-size: clamp(0.875rem, 0.938vw, 1.125rem); /* 18 */
}

.terms-card .faq-answer > :first-child {
  margin-top: 0;
}

.terms-card .faq-answer > :last-child {
  margin-bottom: 0;
}

/* 원고의 경로 안내(`설정 → 계정 설정 → 탈퇴`). 답 안에서 한 번 더 들여쓴다 */
.terms-card .faq-answer blockquote {
  margin: clamp(0.5rem, 0.833vw, 16px) 0;
  border-left-color: var(--coral-500);
}

/*
 * 웹뷰에서는 카드 배경이 사라지고 답의 `--neutral-50` 만 남는다. 그 색이 카드 바탕
 * (`--neutral-0`)과 거의 붙어 있어 면이 안 보이므로 테두리를 하나 더 준다.
 */
.webview .terms-card .faq-answer {
  border: 1px solid #f0ede8;
}

/*
 * 카테고리 경계도 웹뷰에서 다시 벌린다. 웹에서는 카드가 흰 면으로 갈라 주지만 웹뷰는 그
 * 면을 벗기므로(`.webview .terms-card`), 카드 사이 16px 만 남으면 마지막 문답의 구분선과
 * 다음 카테고리 제목이 붙어 한 덩어리로 읽힌다.
 */
.webview .terms-card + .terms-card {
  margin-top: 32px;
}

/* ── 앱 웹뷰 ─────────────────────────────────────────────────────────── */

/*
 * 같은 URL 을 웹과 앱 웹뷰가 함께 쓴다. 앱은 자기 내비게이션이 있고 그 안에서 "클로저
 * 시작하기" 버튼이 뜨면 이상하므로, 앱이 `?webview=1` 을 붙여 열면 장식을 숨긴다.
 * 표식은 템플릿의 인라인 스크립트가 <html> 에 붙인다.
 */
.webview .site-header,
.webview .site-footer {
  display: none;
}

/*
 * **웹뷰 여백은 웹이 준다.** 앱의 웹뷰 컨테이너는 `flex: 1` 뿐이라 좌우 여백이 없다
 * (closer-mobile `TermsWebViewScreen`). 여기서 0 으로 두면 글자가 화면 끝에 붙는다.
 *
 * 값은 앱 토큰을 따른다 — 좌우 20 은 `theme.screenPadding`(Foundation "화면 좌우 마진")
 * 이고, 위 24 는 앱에서 `screenPadding` 과 가장 많이 짝지어 쓰는 세로 값이다. 아래 32 는
 * 긴 조문 끝에서 스크롤이 바닥에 붙지 않게 둔다(하단 인디케이터는 앱의 SafeArea 가 맡는다).
 *
 * 카드는 웹에서 배경과 구분하려고 둔 장식이라 웹뷰에서는 벗긴다 — 앱이 이미 화면을 감싼다.
 */
.webview .terms-page {
  max-width: none;
  padding: 24px 20px 32px;
}

.webview .terms-card {
  padding: 0;
  border-radius: 0;
  background: none;
}

/*
 * 바탕도 문서 색으로 바꾼다. 웹에서는 크림색 바탕 위에 흰 카드를 얹어 문서 영역을
 * 구분했는데, 웹뷰는 그 카드를 벗기므로(바로 위) 구분할 상대가 사라지고 크림색만 남는다.
 * 앱 화면 안에서 문서만 읽는 자리라 바탕이 곧 문서 바탕이어야 한다.
 *
 * 카드가 쓰던 `--neutral-0` 을 그대로 올린다 — 웹에서 본문이 앉아 있던 색이 이 색이므로,
 * 본문 위에 얹히는 표 머리·`code`·대기 자리(`--neutral-50`)의 대비가 웹과 같게 유지된다.
 */
.webview body.terms {
  background: var(--neutral-0);
}

/*
 * 문서 제목은 웹뷰에서도 웹이 그린다. 앱 네이티브 헤더는 제목을 비우고 뒤로가기만 둔다
 * (closer-mobile `app/terms/[id].tsx`). 제목의 출처를 문서 한쪽으로 모아 두면 문안이
 * 바뀌어도 앱 배포 없이 따라온다 — 앱에 문자열을 두면 두 곳이 갈릴 수 있다.
 */
.webview .terms-head {
  padding: 0;
}

.webview .site-header::before {
  display: none;
}