@charset "UTF-8";
/* privacy_policy.php 전용 — 개인정보 처리방침 (초안, 2026-07-31) */
/* 공용 토큰(tokens.css)만 참조하며 색상·간격을 하드코딩하지 않는다 */

/* ── 주요 개인정보 처리 표시(라벨링) ───────────────────────────────
   아이콘은 images/privacy-policy/*.svg 를 <img> 로 넣는다. 기호 자체가 도형(육각형=처리 단계,
   방패·사각형=권리·의무)과 색을 갖고 있으므로 슬롯에는 배경·테두리를 두지 않는다.
   img 가 비어 있는 슬롯만 :empty 로 점선 자리를 표시해 누락을 드러낸다.
   ------------------------------------------------------------------ */
.pp-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
.pp-label a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;transition:.2s}
@media (hover:hover){.pp-label a:hover{border-color:var(--primary);box-shadow:var(--shadow-card);transform:translateY(-3px)}}
.pp-label a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* 아이콘 — 기호 SVG의 세로 비율(육각형 47×53)에 맞춰 슬롯 높이를 잡는다 */
.pp-label__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:58px}
.pp-label__icon img{width:100%;height:100%;object-fit:contain}
/* 기호가 빠진 슬롯 — 누락을 눈에 띄게 남긴다 */
.pp-label__icon:empty{border:1px dashed var(--line);border-radius:12px;background:var(--bg)}
.pp-label__icon:empty::before{content:"\2726";color:var(--gray);font-size:20px;line-height:1}

.pp-label__name{font-size:15px;font-weight:800;color:var(--ink);line-height:1.4}
.pp-label__val{font-size:13px;color:var(--gray);line-height:1.65}
.pp-label--none .pp-label__val{color:var(--success);font-weight:700}

/* ── 총칙(본문 머리글) ────────────────────────────────────────── */
.pp-lead{font-size:16px;line-height:1.9;color:var(--ink);margin-bottom:28px}

/* ── 목차 ─────────────────────────────────────────────────────── */
.pp-toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;margin-bottom:28px}
.pp-toc h2{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:18px}
.pp-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 32px;margin:0;padding:0;list-style:none;counter-reset:toc}
.pp-toc li{counter-increment:toc;font-size:15px;line-height:1.6}
.pp-toc li::before{content:counter(toc) ".";display:inline-block;min-width:30px;padding-right:6px;font-weight:800;color:var(--primary)}
.pp-toc a{color:var(--ink);text-underline-offset:3px}
@media (hover:hover){.pp-toc a:hover{color:var(--primary);text-decoration:underline}}

/* ── 본문 조항 ────────────────────────────────────────────────── */
.pp-art{scroll-margin-top:calc(var(--head-h) + 24px);padding-top:38px;border-top:1px solid var(--line)}
.pp-art:first-of-type{padding-top:0;border-top:0}
.pp-art+.pp-art{margin-top:38px}
.pp-art h2{display:flex;align-items:center;gap:12px;font-size:clamp(19px,2.2vw,24px);font-weight:900;color:var(--ink);line-height:1.4;margin-bottom:18px}
.pp-art h2 .no{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--navy);color:#fff;font-size:15px;font-weight:800}
.pp-art h3{font-size:16px;font-weight:800;color:var(--navy);margin:26px 0 12px}
.pp-art p{font-size:15px;color:var(--ink);line-height:1.9}
.pp-art p+p{margin-top:10px}
.pp-art ul+p,.pp-art ol+p{margin-top:16px}
.pp-art .table-wrap{margin:16px 0}
/* 행 머리글 아래 붙는 부연 (예: 처리 목적의 범위, 기관 소속) */
.pp-art .tbl .sub{display:inline-block;margin-top:2px;font-size:13px;font-weight:600;color:var(--gray)}
.pp-art .note{margin-top:16px}
.pp-ref{color:var(--gray);font-size:14px}
.pp-art a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .15s,text-decoration-thickness .15s}
@media (hover:hover){.pp-art a:hover{color:var(--primary-deep);text-decoration-thickness:2px}}

/* 번호 목록 (가·나·다가 아닌 조 내부 항목) */
.pp-list{margin:14px 0 0;padding:0;list-style:none;counter-reset:ppl;display:grid;gap:14px}
.pp-list>li{position:relative;counter-increment:ppl;padding-left:34px}
.pp-list>li::before{content:counter(ppl);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--info-bg);border:1px solid var(--info-line);color:var(--primary);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pp-list>li>b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:4px}

/* 점 목록 */
.pp-bullets{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pp-bullets>li{position:relative;padding-left:16px;font-size:15px;color:var(--ink);line-height:1.8}
.pp-bullets>li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--primary-light)}

/* 연락처 박스 */
.pp-contact{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin-top:16px}
.pp-contact h3{margin:0 0 14px;font-size:15px;font-weight:800;color:var(--navy)}
.pp-contact ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pp-contact li{font-size:14.5px;color:var(--ink);line-height:1.6}
.pp-contact li b{display:inline-block;min-width:64px;color:var(--gray);font-weight:700}

/* 변경 이력 */
.pp-hist{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pp-hist>li{position:relative;padding-left:16px;font-size:14.5px;color:var(--gray);line-height:1.8}
.pp-hist>li::before{content:"\2013";position:absolute;left:0;color:var(--primary-light)}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:1024px){
  .pp-labels{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .pp-labels{grid-template-columns:repeat(2,1fr);gap:14px}
  .pp-label a{padding:18px 16px}
  .pp-label__icon{width:44px;height:50px}
  .pp-toc{padding:24px 20px}
  .pp-toc ol{grid-template-columns:1fr;gap:8px}
  .pp-art h2 .no{width:28px;height:28px;font-size:14px}
  /* 좁은 화면에서 열이 과도하게 눌리지 않도록 최소 폭을 두고 .table-wrap 안에서 가로 스크롤 */
  .pp-art .tbl{min-width:560px}
  .pp-art .tbl--4{min-width:680px}
  .pp-contact{padding:20px 18px}
  .pp-contact li b{display:block;min-width:0;margin-bottom:2px}
}