/* 약관 문서 스타일의 **단일 원천**.
   공개 페이지 · 어드민 미리보기 · **편집기(RichEditor)** 가 모두 이 파일 하나를 본다.
   편집기는 tiptap이 그리는 본문에 `.policy-root > .policy-body`를 그대로 입혀서,
   쓰는 화면과 발행된 문서가 **정의상** 같은 글자·여백·표를 갖게 한다.
   (편집 전용 장치 — 커서·열 크기 핸들·셀 선택 표시 — 만 RichEditor에 남는다. 문서 스타일이 아니다)

   ⚠️ 공개 페이지는 서비스 FE(community-fe)가 서빙하지만 스타일시트는 이 주소를 그대로 <link>한다.
      경로·클래스명을 바꾸면 대외 페이지가 깨진다. 미들웨어 예외에서도 빼면 안 된다.
   공개 페이지는 JS 없이 읽혀야 해서 Chakra 대신 순수 CSS다.
   폰트는 시스템 스택만 쓴다 — 심사 환경에서 외부 폰트가 차단될 수 있다.

   ⚠️ CSS 모듈이 아니라 **일반 CSS**다. 공개 페이지가 <link>로 직접 거는데
      모듈이면 클래스명이 해시돼서 안 맞는다.
      그래서 클래스마다 `policy-` 접두사를 붙여 전역 충돌을 막는다. */

.policy-root {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  background: #fff;
  color: #1f2933;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  word-break: break-word;
}

.policy-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e4e7eb;
}

.policy-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  color: #111827;
}

/* 고지일·시행일은 실제 약관 문서 관례대로 본문 맨 아래에 둔다 */
.policy-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e4e7eb;
  font-size: 14px;
  font-weight: 700;
  color: #1f2933;
}

.policy-footer p {
  margin: 0 0 4px;
}

.policy-empty {
  color: #9ca3af;
  font-size: 14px;
}

/* 본문 — 에디터가 만들어내는 태그를 그대로 받는다 */
.policy-body h2 {
  margin: 32px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.policy-body h3 {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2933;
}

.policy-body p {
  margin: 0 0 14px;
}

.policy-body ul,
.policy-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.policy-body li {
  margin-bottom: 4px;
}

.policy-body a {
  color: #1d4ed8;
  text-decoration: underline;
}

.policy-body img {
  max-width: 100%;
  border-radius: 6px;
  margin: 8px 0;
}

.policy-body blockquote {
  margin: 14px 0;
  padding-left: 16px;
  border-left: 3px solid #d2d6dc;
  color: #4b5563;
}

/* 표는 개인정보처리방침 수집항목 안내에서 쓰인다. 좁은 화면에서도 잘리지 않게 감싼다 */
/* 표는 개인정보처리방침 수집항목 안내에서 쓰인다.
   에디터가 심는 인라인 값 두 가지를 문서에서는 무시해야 폭이 맞는다.

   tiptap이 편집 중 표에 심는 `style="min-width: …"`는 **막지 않는다.** 그 값이 표를 넓히고
   `div.tableWrapper`가 가로로 스크롤시키는 것이 tiptap의 공식 동작이다. 발행본에는 그 style이
   애초에 오지 않으므로(BE가 제거, `stripEditorTableMeta`도 제거) 여기서 지울 것도 없다.

   ⚠️ `display: block`을 쓰지 않는다 — 가로 스크롤을 만들려고 넣었더니,
      table이 블록 박스가 되면서 그 안에 **익명 테이블 박스**가 따로 생겨
      내용 크기로 줄어들었다(박스 760px인데 실제 표는 180px). width: 100%가
      바깥 블록에만 닿아서, 갓 만든 빈 표가 미리보기에서만 좁게 보였다. */
.policy-body table {
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 14px;
  /* 셀에 심어둔 width가 그대로 먹히게 한다. auto면 브라우저가 내용에 맞춰 다시 계산해
     에디터에서 맞춘 폭과 달라진다 (`applyTableColumnWidths`와 짝) */
  table-layout: fixed;
}

.policy-body th,
.policy-body td {
  border: 1px solid #d2d6dc;
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
  /* ⚠️ `applyTableColumnWidths`가 셀에 %를 심는데, content-box면 그 %에 패딩·테두리가 **더해져**
     열 합계가 100%를 넘고 브라우저가 전체를 도로 줄인다. 같은 33% 열이 편집기(250px)와
     문서(238px)에서 다르게 나오고 줄바꿈 위치까지 달라졌다 — 실측으로 확인한 값이다. */
  box-sizing: border-box;
}

.policy-body th {
  background: #f5f7fa;
  font-weight: 700;
}

/* 코드블록·구분선 — 편집기 툴바로 만들 수 있으니 문서에도 규칙이 있어야 한다.
   ⚠️ 다만 BE sanitize 화이트리스트에 `pre`·`code`·`hr`이 없어 **저장할 때 지워진다.**
      툴바에서 버튼을 내리거나 화이트리스트를 넓히기 전까지, 이 규칙이 보이는 곳은 편집기뿐이다. */
.policy-body pre {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: #1f2933;
  color: #f5f7fa;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

.policy-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #eef1f5;
  font-family: monospace;
  font-size: 0.88em;
}

.policy-body pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.policy-body hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #e4e7eb;
}

@media (max-width: 640px) {
  .policy-root {
    padding: 24px 16px 60px;
    font-size: 14px;
  }

  .policy-title {
    font-size: 21px;
  }
}

/* 변경 비교(track changes) — 어드민 미리보기에서만 쓰인다 */
.policy-body [data-diff='ins'] {
  background: #eaf7ef;
  box-shadow: inset 3px 0 0 #2f9e5f;
  padding-left: 10px;
}

.policy-body [data-diff='del'] {
  background: #fdeceb;
  box-shadow: inset 3px 0 0 #d94436;
  padding-left: 10px;
  color: #8a2b22;
}

.policy-body [data-diff='mod'] {
  background: #fff8e6;
  box-shadow: inset 3px 0 0 #e0a020;
  padding-left: 10px;
}

.policy-body ins {
  background: #bfe9cf;
  text-decoration: none;
  font-weight: 700;
  border-radius: 2px;
}

.policy-body del {
  background: #f7c5c0;
  border-radius: 2px;
}