@charset "UTF-8";
/* 개인정보 처리방침 안내 팝업 — contact.php · support-portal.php 공용 (2026-07-31) */
/* 본문 마크업은 privacy_policy.php과 동일하지만(목차 제외) 팝업에서 읽기 좋도록
   글자 크기·행간·여백을 축소한 별도 스케일을 쓴다. privacy_policy.css는 로드하지 않으므로
   .pp-* 규칙을 이 파일 안에서 .pp-modal 하위로 한정해 자체 정의한다. */

.pp-modal{
  /* reset.css의 여백 초기화가 UA의 margin:auto를 지우므로 화면 중앙 정렬을 직접 지정한다 */
  inset:0;margin:auto;
  width:min(860px,92vw);max-width:none;max-height:86vh;
  padding:0;border:0;border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-deep);color:var(--ink);
  display:flex;flex-direction:column;overflow:hidden;
}
.pp-modal::backdrop{background:rgba(10,31,68,.55)}
.pp-modal:not([open]){display:none}

/* 머리말 */
.pp-modal__head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg);
}
.pp-modal__head h2{flex:1 1 auto;font-size:16px;font-weight:900;color:var(--ink);line-height:1.4}
.pp-modal__head .eff{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--gray)}
.pp-modal__x{
  flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--gray);
  font-size:17px;line-height:1;cursor:pointer;transition:.15s;
}
@media (hover:hover){.pp-modal__x:hover{border-color:var(--primary);color:var(--primary)}}
.pp-modal__x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* 본문 스크롤 영역 */
.pp-modal__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px}

/* 맺음말 */
.pp-modal__foot{
  flex:0 0 auto;display:flex;justify-content:flex-end;
  padding:12px 20px;border-top:1px solid var(--line);background:var(--bg);
}
.pp-modal__foot .btn-outline{padding:9px 22px;font-size:13.5px}

/* ── 본문 조항 (축소 스케일) ──────────────────────────────────── */
.pp-modal .pp-art{scroll-margin-top:8px;padding-top:20px;border-top:1px solid var(--line)}
.pp-modal .pp-art:first-of-type{padding-top:0;border-top:0}
.pp-modal .pp-art+.pp-art{margin-top:20px}
.pp-modal .pp-art h2{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:15px;font-weight:900;color:var(--ink);line-height:1.45;letter-spacing:-.01em;
}
.pp-modal .pp-art h2 .no{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;
}
.pp-modal .pp-art h3{font-size:13.5px;font-weight:800;color:var(--navy);margin:16px 0 8px}
.pp-modal .pp-art p{font-size:13px;color:var(--ink);line-height:1.72;letter-spacing:-.01em}
.pp-modal .pp-art p+p{margin-top:6px}
.pp-modal .pp-art ul+p,.pp-modal .pp-art ol+p{margin-top:10px}
.pp-modal .pp-art .table-wrap{margin:10px 0}
.pp-modal .pp-art .note{margin-top:10px}
.pp-modal .pp-ref{color:var(--gray);font-size:12.5px}
.pp-modal .pp-art a{
  color:var(--primary);font-weight:700;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
@media (hover:hover){.pp-modal .pp-art a:hover{color:var(--primary-deep)}}

/* 번호 목록 */
.pp-modal .pp-list{margin:9px 0 0;padding:0;list-style:none;counter-reset:ppl;display:grid;gap:9px}
.pp-modal .pp-list>li{position:relative;counter-increment:ppl;padding-left:26px}
.pp-modal .pp-list>li::before{
  content:counter(ppl);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--info-bg);border:1px solid var(--info-line);color:var(--primary);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.pp-modal .pp-list>li>b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);margin-bottom:2px}

/* 점 목록 */
.pp-modal .pp-bullets{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.pp-modal .pp-bullets>li{position:relative;padding-left:13px;font-size:13px;color:var(--ink);line-height:1.7;letter-spacing:-.01em}
.pp-modal .pp-bullets>li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--primary-light)}

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

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

/* 공용 컴포넌트(on-sub.css) 축소 보정 */
.pp-modal .note{padding:11px 14px;border-radius:9px;font-size:12.5px;line-height:1.7}
.pp-modal .tbl th,.pp-modal .tbl td{padding:8px 10px;font-size:12.5px;line-height:1.6}
.pp-modal .tbl th{font-size:12px}
.pp-modal .tbl th[scope="row"]{font-size:12.5px}
.pp-modal .tbl .sub{display:inline-block;margin-top:1px;font-size:11.5px;font-weight:600;color:var(--gray)}
.pp-modal .mt-18,.pp-modal .mt-20,.pp-modal .mt-26{margin-top:12px}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:768px){
  .pp-modal{width:94vw;max-height:88vh}
  .pp-modal__body{padding:18px 16px}
  .pp-modal .g2{grid-template-columns:1fr}
  /* 좁은 화면에서 열이 눌리지 않도록 최소 폭을 두고 .table-wrap 안에서 가로 스크롤 */
  .pp-modal .tbl{min-width:460px}
  .pp-modal .tbl--4{min-width:560px}
}