/* ==========================================================================
   stop&loss — 개인정보처리방침(privacy.html) 전용 스타일

   privacy.html 하나만 이 파일을 싣는다. 모든 클래스가 .pv- 접두사이고, 공용
   클래스(.container · .page-hero · .section · .ack-note · .sr-only)는 style.css
   것을 그대로 빌려 쓴다. 여기를 통째로 지워도 다른 페이지는 픽셀 하나 안 바뀌고,
   이 문서도 style.css 기본 모습으로 물러날 뿐이다.

   ── 왜 prose.css 를 쓰지 않았나 ──
   저쪽은 관리자가 쓴 HTML(공지 상세 · 자주 묻는 질문 답변)을 그리는 규칙이라
   서버 소독기와 static/richtext.js 의 허용 목록에 묶여 있다. 이 문서는 손으로 쓴
   정적 법률 문서이고 표가 여섯 개라, 저쪽 규칙을 늘리면 그 순간 관리자 편집기의
   허용 목록도 함께 늘려야 한다(허용 목록이 세 파일에 흩어져 있다).
   서로를 건드리지 않으려고 파일을 갈랐다.

   ── 새 색을 만들지 않는다 ──
   등장하는 색은 전부 style.css 의 토큰이다. 값을 직접 적고 싶어지면 먼저
   토큰에 있는지 볼 것.

   ── 폭은 .container 하나가 정한다 ──
   본문에 따로 max-width 를 걸지 않는다. 헤더 · 푸터가 .container(1140px)를 쓰므로
   본문만 넓히면 헤더 아래에서 한 번 넓어졌다가 푸터에서 다시 좁아지는 계단이 생긴다
   (요금제 · 내 계정 화면에서 같은 이유로 한 번씩 고친 자리다).
   대신 읽는 글이라 조문 안쪽에만 ch 기준 상한을 준다 — 아래 4절.
   ========================================================================== */

/* ---------- 1. 요약 상자 ---------- */

/*
 * 조문을 읽기 전에 가장 자주 묻는 세 가지에 먼저 답하는 자리.
 *
 * 왼쪽 청록 띠는 이 사이트에서 '읽고 지나갈 안내'를 뜻한다(admin.css 의 .notice 와
 * 같은 문법). 붉은 테를 두르지 않는 이유: 여기 적힌 것은 경고가 아니라 약속이다.
 */
.pv-summary {
  margin-bottom: 28px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-lg);
}

.pv-summary-title {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pv-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-summary-list li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.75;
}

/* 체크 표시. 목록임을 색이 아니라 기호로도 말한다. */
.pv-summary-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
}

.pv-summary-list b { color: var(--text-soft); font-weight: 600; }

/* ---------- 2. 목차 ---------- */

/*
 * 조문이 열넷이라 목차 없이는 원하는 항목을 찾을 수 없다.
 * 두 열로 접는 이유: 세로 한 줄이면 목차만으로 화면 하나를 다 쓴다.
 */
.pv-toc {
  margin-bottom: 36px;
  padding: 18px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.pv-toc-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.pv-toc-list {
  display: grid;
  gap: 2px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.pv-toc-list a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  transition: color var(--ease);
}

.pv-toc-list a:hover,
.pv-toc-list a:focus-visible { color: var(--primary); }

/* ---------- 3. 조문 ---------- */

/*
 * :target 은 목차에서 눌러 온 조문을 잠깐 짚어 주는 장치다. 배경만 옅게 깔고
 * 테두리나 그림자를 주지 않는 이유: 이 문서는 조문이 연달아 서 있어서, 하나가
 * 판으로 튀어나오면 그 아래 조문들이 통째로 밀려 내려간 것처럼 보인다.
 *
 * scroll-margin-top 이 없으면 고정 헤더가 조문 제목을 가린다(--header-h 64px).
 */
.pv-article {
  padding-top: 28px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.pv-article + .pv-article {
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.pv-article:target {
  border-radius: var(--radius-md);
  background: rgba(61, 233, 255, .05);
}

.pv-h2 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.45;
}

.pv-h3 {
  margin: 20px 0 10px;
  color: var(--text-soft);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.pv-h3:first-of-type { margin-top: 0; }

/* ---------- 4. 본문 · 목록 ---------- */

/*
 * 읽는 글이라 여기에만 줄 길이 상한을 준다. 84ch 는 한글 기준 약 42자로,
 * 법률 문서에서 한 줄이 너무 길어 다음 줄을 찾지 못하는 것을 막는 값이다.
 * 표(.pv-table-wrap)에는 걸지 않는다 — 표는 읽는 글이 아니라 대조하는 판이다.
 */
.pv-p {
  max-width: 84ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.pv-p + .pv-p { margin-top: 12px; }

.pv-p b { color: var(--text-soft); font-weight: 600; }

.pv-list {
  max-width: 84ch;
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.pv-list li + li { margin-top: 8px; }

.pv-list b { color: var(--text-soft); font-weight: 600; }

/* ol 은 숫자, ul 은 점. 브라우저 기본을 그대로 쓰되 표식 색만 낮춘다. */
.pv-list::marker,
.pv-list li::marker { color: rgba(255, 255, 255, .35); }

/*
 * '수집하지 않는다' 목록. 점 대신 ×를 쓴다 — 나머지 목록과 같은 점을 쓰면
 * 훑을 때 '수집하는 항목'으로 잘못 읽힌다. 이 문서에서 가장 오독하면 안 되는 자리다.
 */
.pv-list-deny {
  padding-left: 0;
  list-style: none;
}

.pv-list-deny li {
  position: relative;
  padding-left: 20px;
}

.pv-list-deny li::before {
  content: '×';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.85;
}

/*
 * 조문에 딸린 부연 한 줄. 조문 본문(.pv-p)보다 한 단계 낮은 층이라는 것을
 * 왼쪽 선으로 말한다. 색까지 바꾸면 경고로 읽히므로 색은 그대로 둔다.
 */
.pv-note {
  max-width: 84ch;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.pv-note b { color: var(--text-soft); font-weight: 600; }

/* 본문 · 목록 · 표 안의 링크. style.css 의 .page-desc a 와 같은 문법이다. */
.pv-p a,
.pv-list a,
.pv-note a,
.pv-summary-list a,
.pv-table a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pv-p a:hover,
.pv-list a:hover,
.pv-note a:hover,
.pv-summary-list a:hover,
.pv-table a:hover { color: #fff; }

/* ---------- 5. 표 ---------- */

/*
 * 가로 스크롤은 반드시 이 감싸개 안에서만 일어나야 한다. 표에 직접 걸면
 * 좁은 화면에서 문서 전체가 옆으로 밀린다(admin.css .table-wrap 과 같은 규칙).
 */
.pv-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.pv-table th,
.pv-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.pv-table thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/*
 * 행 머리(왼쪽 열)는 꺾지 않는다.
 *
 * 한글 표 머리는 폭이 모자라면 한 글자씩 세로로 쪼개진다. 그때 넘침 픽셀은
 * 0 이라 어떤 검사에도 안 걸리고, 행 높이만 조용히 세 배가 된다. 좁은 화면에서
 * 표가 감싸개 안에서 가로로 흐르는 편이 언제나 낫다.
 */
.pv-table tbody th {
  color: var(--text-soft);
  font-weight: 600;
  white-space: nowrap;
}

.pv-table tbody tr:last-child > th,
.pv-table tbody tr:last-child > td { border-bottom: 0; }

.pv-table td { color: var(--muted); }
.pv-table b { color: var(--text-soft); font-weight: 600; }

/* ---------- 6. 채워 넣어야 하는 자리 ---------- */

/*
 * 개인정보 보호책임자의 성명과 연락처는 법정 필수 기재사항(법 제30조 제1항
 * 제10호)인데 사업자만 채울 수 있다. 비워 두면 처리방침이 요건을 갖추지 못하므로
 * 눈에 띄게 표시해 둔다 — 회색 글씨로 두면 그대로 배포되고 아무도 눈치채지 못한다.
 *
 * 값을 넣은 뒤에는 <span class="pv-fill"> 을 통째로 지우고 값만 남길 것.
 */
.pv-fill {
  display: inline-block;
  padding: 2px 9px;
  background: rgba(255, 196, 77, .12);
  border: 1px dashed rgba(255, 196, 77, .5);
  border-radius: var(--radius-sm);
  color: var(--warn);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- 7. 반응형 ---------- */

@media (min-width: 640px) {
  .pv-summary { padding: 22px 24px; }
  .pv-toc { padding: 20px 24px; }
  .pv-article { padding-top: 32px; }
  .pv-h2 { font-size: 19px; }
}

/* 목차를 두 열로. 이 폭부터 한 항목이 한 줄에 들어간다(가장 긴 것이
   '제8조 정보주체와 법정대리인의 권리·의무 및 행사 방법'). */
@media (min-width: 860px) {
  .pv-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .pv-article { padding-top: 36px; }
  .pv-h2 { font-size: 20px; }
  .pv-p,
  .pv-list { font-size: 14.5px; }
}

/* ---------- 8. 접근성: 모션 최소화 ---------- */

@media (prefers-reduced-motion: reduce) {
  .pv-toc-list a { transition: none; }
}