/* 약관·방침 페이지 전용 스타일.
   guide.css 위에 얹는다 — 색·글꼴·상단바는 그대로 쓰고, 긴 글을 읽기 좋게 만드는
   것만 여기서 더한다. 안내 페이지와 달리 이쪽은 훑어보며 원하는 조항을 찾는 글이라,
   조항 번호가 눈에 띄고 목차로 건너뛸 수 있어야 한다. */

/* 문서 머리 — 시행일·개정일을 한눈에 */
.docmeta{
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin:0 0 28px;padding:14px 18px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);
  font-size:14.5px;color:var(--muted);
}
.docmeta b{color:var(--ink-2);font-weight:700}

/* 목차 — 조항이 많아 위에서 골라 뛰어야 한다 */
.toc{
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:18px 22px;margin:0 0 34px;
}
.toc h2{font-size:15px;margin:0 0 10px;padding:0;letter-spacing:0.02em;color:var(--muted)}
.toc ol{margin:0;padding:0 0 0 20px;columns:2;column-gap:26px}
.toc li{margin:0 0 5px;font-size:15.5px;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--brand-ink);text-decoration:underline}

/* 조항 제목 — 앵커로 건너뛰었을 때 상단바에 가리지 않게 여백을 둔다 */
main h2{scroll-margin-top:72px}

/* 조항 본문 */
.sec{margin:0 0 6px}
.sec > ul{margin:0 0 15px;padding:0 0 0 20px}
.sec > ul > li{margin:0 0 7px}
.sec > ul > li::marker{color:var(--muted-2)}

/* 수집 항목처럼 "이름 — 설명" 이 반복되는 덩어리 */
.item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:18px 20px;
  box-shadow:var(--shadow-sm);margin:0 0 12px;
}
.item > b{display:block;font-size:17px;letter-spacing:-0.02em;margin:0 0 6px}
.item p{margin:0 0 9px;color:var(--ink-2)}
.item p:last-child{margin-bottom:0}
.item ul{margin:8px 0 0;padding:0 0 0 18px;color:var(--muted)}
.item ul li{margin:0 0 5px;font-size:16px}

/* 항목 안에서 "수집 항목 / 목적 / 보유 기간" 처럼 짝지어 보여 줄 때 */
.kv{margin:10px 0 0;font-size:16px}
.kv > div{display:flex;gap:10px;margin:0 0 6px;align-items:baseline}
.kv dt{flex:0 0 76px;color:var(--muted-2);font-weight:600;font-size:14.5px}
.kv dd{margin:0;color:var(--ink-2);flex:1}

/* 강조해서 못박아 둘 한 줄 */
.keep{
  margin:10px 0 0;padding:10px 14px;
  background:var(--brand-soft);border-radius:var(--radius-sm);
  color:var(--brand-ink);font-size:15.5px;font-weight:600;
}

/* 다른 문서로 건너가는 줄 */
.docnav{
  display:flex;flex-wrap:wrap;gap:10px;margin:44px 0 0;
}
.docnav a{
  flex:1 1 200px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:15px 18px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.docnav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.docnav b{display:block;font-size:16.5px;letter-spacing:-0.02em}
.docnav span{color:var(--muted);font-size:14.5px}
.docnav a[aria-current]{border-color:var(--brand);background:var(--brand-soft)}

@media (max-width:560px){
  .toc ol{columns:1}
  .kv > div{flex-direction:column;gap:2px}
  .kv dt{flex:none}
}