/*
 * 공개 문서 본문(pl-*) — 이용약관(/terms) · 개인정보처리방침(/privacy) · 계정 삭제(/withdraw).
 * 머리 · 바닥은 public.css(pb-*) 몫이다. 색 토큰은 메인 · public.css 와 같은 값.
 * 예전에는 쪽마다 _common/policy-style.jsp 를 품었다 — 2026-10-21 4단계에서 파일 하나로 옮겼다.
 *
 * 4단계(읽기 편의, 검수 보고서 §6-4):
 *  · 넓은 화면(1100px~)은 두 단 — 왼쪽 따라오는 목차 · 오른쪽 본문(760). 목차가 있는 쪽(.pl-has-toc)만.
 *    좁으면 한 단에 접는 목차(js/landing/policy-toc.js 가 접고 지금 항목을 표시한다)
 *  · 맨 위 「한눈에 보기」(.pl-glance) — 요약일 뿐, 효력은 본문
 *  · 표는 640px 아래에서 줄마다 카드로 접는다. 머리칸이 위, 내용이 아래. 여러 칸 표는 td 의 data-label 을 앞에 붙인다
 *  · 국외 이전은 받는 자마다 카드(.pl-xfer) — 항목 · 국가 · 시기 · 보유기간을 한 덩이로 읽게
 */
html { scroll-behavior:smooth; scroll-padding-top:84px; }
html, body { margin:0; padding:0; background:#0d1117; }
.pl-page {
	--bg:#0d1117; --bg2:#161b22; --surface:#21262d;
	--bd:rgba(240,246,252,.10); --bd2:rgba(240,246,252,.17);
	--t1:#e6edf3; --t2:#bcc4ce; --t3:#97a0ab;
	--brand:#2dd4bf; --brand2:#0e9384; --cyan:#39c5cf; --warn:#e3b341;
	--r:8px; --r2:12px;
	--font:'Noto Sans KR',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
	--side:232px; --gap:48px; --main:760px;
	min-height:100vh; background:var(--bg); color:var(--t1); font-family:var(--font); -webkit-font-smoothing:antialiased;
}
.pl-page * { box-sizing:border-box; }

/* 문서 머리 */
.pl-head { border-bottom:1px solid var(--bd);
	background:radial-gradient(ellipse 70% 130% at 50% 0%, rgba(45,212,191,.08), transparent 62%), var(--bg2); }
.pl-head-inner { max-width:calc(var(--main) + 48px); margin:0 auto; padding:52px 24px 40px; }
.pl-eb { font-family:var(--mono); font-size:11.5px; color:var(--cyan); letter-spacing:2px; margin-bottom:12px; }
.pl-head h1 { margin:0; font-size:30px; font-weight:800; letter-spacing:-.9px; }
.pl-head-desc { margin:14px 0 0; font-size:14.5px; color:var(--t2); line-height:1.75; }
.pl-meta { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.pl-chip { font-family:var(--mono); font-size:11.5px; color:var(--t2); padding:5px 11px;
	border:1px solid var(--bd); border-radius:999px; background:rgba(255,255,255,.03); }

/* 본문 틀 — 기본은 한 단 */
.pl-doc { max-width:calc(var(--main) + 48px); margin:0 auto; padding:28px 24px 72px; }
.pl-body { min-width:0; }

/* 목차 — 좁은 화면은 접는 상자 */
.pl-toc { background:var(--surface); border:1px solid var(--bd); border-radius:var(--r2); margin-bottom:8px; }
.pl-toc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
	padding:14px 18px; font-size:13.5px; font-weight:700; color:var(--t1); border-radius:var(--r2); }
.pl-toc > summary::-webkit-details-marker { display:none; }
.pl-toc > summary::after { content:''; width:7px; height:7px; margin:-3px 4px 0 0;
	border-right:2px solid var(--t3); border-bottom:2px solid var(--t3); transform:rotate(45deg); transition:transform .2s; }
.pl-toc[open] > summary::after { margin-top:3px; transform:rotate(-135deg); }
.pl-toc > summary:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.pl-toc-list { list-style:none; margin:0; padding:0 10px 12px; }
.pl-toc-list a { display:block; padding:6px 8px; border-radius:6px; font-size:13.5px; line-height:1.45; color:var(--t2); text-decoration:none; }
.pl-toc-list a:hover { color:var(--t1); background:rgba(255,255,255,.04); }
.pl-toc-list a[aria-current="true"] { color:var(--brand); background:rgba(45,212,191,.08); font-weight:600; }

/* 좁은 화면 — 목차를 지나 내려가면 뜨는 「목차」 단추(js/landing/policy-toc.js 가 만든다) */
.pl-toc-back { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:90;
	display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:999px;
	border:1px solid rgba(45,212,191,.45); background:rgba(22,27,34,.94); color:#e6edf3;
	font:600 13.5px/1 'Noto Sans KR',system-ui,sans-serif; box-shadow:0 6px 20px rgba(0,0,0,.45); cursor:pointer; }
.pl-toc-back::before { content:''; width:7px; height:7px; margin-top:3px; border-left:2px solid #2dd4bf; border-top:2px solid #2dd4bf; transform:rotate(45deg); }
.pl-toc-back[hidden] { display:none; }
.pl-toc-back:focus-visible { outline:2px solid #2dd4bf; outline-offset:2px; }

/* 넓은 화면 — 목차가 왼쪽에 따라오는 두 단 */
@media (min-width:1100px) {
	.pl-has-toc .pl-head-inner { max-width:calc(var(--side) + var(--gap) + var(--main) + 48px);
		padding-left:calc(24px + var(--side) + var(--gap)); }
	.pl-has-toc .pl-doc { max-width:calc(var(--side) + var(--gap) + var(--main) + 48px); padding-top:36px;
		display:grid; grid-template-columns:var(--side) minmax(0, var(--main)); column-gap:var(--gap); align-items:start; }
	.pl-side { position:sticky; top:88px; max-height:calc(100vh - 112px); overflow-y:auto; overscroll-behavior:contain; }
	.pl-toc { background:none; border:0; margin:0; }
	/* 넓은 화면에서는 늘 펼쳐 둔다 — 머리글은 이름표일 뿐 접히지 않게 */
	.pl-toc > summary { pointer-events:none; padding:2px 0 10px 12px; font-family:var(--mono); font-size:11.5px; font-weight:500;
		letter-spacing:1.6px; color:var(--t3); }
	.pl-toc > summary::after { display:none; }
	.pl-toc-list { padding:0; border-left:1px solid var(--bd); }
	.pl-toc-list a { margin-left:-1px; padding:6px 10px; border-left:2px solid transparent; border-radius:0 6px 6px 0; font-size:13px; }
	.pl-toc-list a[aria-current="true"] { border-left-color:var(--brand); }
}

/* 한눈에 보기 */
.pl-glance { margin:4px 0 8px; padding:22px 24px; border:1px solid rgba(45,212,191,.28); border-radius:var(--r2);
	background:linear-gradient(180deg, rgba(45,212,191,.07), rgba(45,212,191,.02)); }
.pl-glance h2 { margin:0 0 4px; font-size:17px; font-weight:700; letter-spacing:-.3px; color:var(--t1); }
.pl-glance-lead { margin:0 0 12px; font-size:12.5px; color:var(--t3); line-height:1.7; }
.pl-glance dl { margin:0; }
.pl-glance dl > div { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:14px; padding:11px 0; border-top:1px solid var(--bd); }
.pl-glance dl > div:first-child { border-top:0; }
.pl-glance dt { font-size:13px; font-weight:700; color:var(--brand); line-height:1.75; }
.pl-glance dd { margin:0; font-size:14px; color:var(--t2); line-height:1.75; }
.pl-glance dd a { margin-left:4px; font-size:12.5px; color:var(--t3); white-space:nowrap; }
.pl-glance dd a:hover { color:var(--brand); }

/* 본문 조항 */
.pl-art { padding:28px 0; border-bottom:1px solid var(--bd); }
.pl-art:last-of-type { border-bottom:0; }
.pl-art h2 { margin:0 0 14px; font-size:19px; font-weight:700; letter-spacing:-.4px; color:var(--t1); }
.pl-art h3 { margin:22px 0 10px; font-size:15px; font-weight:700; color:var(--t1); }
.pl-art p { margin:0 0 12px; font-size:14.5px; color:var(--t2); line-height:1.85; }
.pl-art ol, .pl-art ul { margin:0 0 12px; padding-left:20px; }
.pl-art li { font-size:14.5px; color:var(--t2); line-height:1.85; margin-bottom:6px; }
.pl-art li > ul, .pl-art li > ol { margin-top:6px; }
.pl-art strong { color:var(--t1); font-weight:600; }
.pl-art a { color:var(--brand); }

/* 표 — 수집 항목 · 보유기간처럼 대조해 읽는 내용 */
.pl-tw { margin:0 0 14px; border:1px solid var(--bd); border-radius:var(--r2); overflow:hidden; }
.pl-table { width:100%; border-collapse:collapse; }
.pl-table th, .pl-table td { padding:12px 14px; text-align:left; font-size:13.5px; line-height:1.7;
	border-bottom:1px solid var(--bd); vertical-align:top; }
.pl-table thead th { background:var(--bg2); color:var(--t1); font-weight:600; font-size:13px; white-space:nowrap; }
.pl-table tbody th { color:var(--t1); font-weight:600; width:26%; background:rgba(255,255,255,.015); }
.pl-table td { color:var(--t2); }
.pl-table tr:last-child th, .pl-table tr:last-child td { border-bottom:0; }

/* 국외 이전 — 받는 자마다 카드 */
.pl-xfer { display:grid; gap:12px; margin:0 0 14px; }
.pl-xfer-card { border:1px solid var(--bd); border-radius:var(--r2); background:rgba(255,255,255,.015); overflow:hidden; }
.pl-xfer-card h4 { margin:0; padding:12px 16px; font-size:14px; font-weight:700; color:var(--t1);
	background:var(--bg2); border-bottom:1px solid var(--bd); }
.pl-xfer-card h4 small { display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--t3); }
.pl-xfer-card dl { margin:0; padding:4px 16px 8px; }
.pl-xfer-card dl > div { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; padding:8px 0; border-top:1px solid var(--bd); }
.pl-xfer-card dl > div:first-child { border-top:0; }
.pl-xfer-card dt { font-size:12.5px; font-weight:600; color:var(--t3); line-height:1.7; }
.pl-xfer-card dd { margin:0; font-size:13.5px; color:var(--t2); line-height:1.7; }

/* 주의 상자 */
.pl-note { border:1px solid rgba(45,212,191,.28); background:rgba(45,212,191,.07);
	border-radius:var(--r2); padding:16px 18px; margin:16px 0; }
.pl-note p { margin:0; font-size:13.5px; color:var(--t2); line-height:1.8; }
.pl-note p + p { margin-top:8px; }
.pl-note-title { font-size:13px; font-weight:700; color:var(--brand); margin-bottom:6px; }

@media (max-width:900px) {
	/* 좁은 화면의 머리는 두 줄(public.css) — 이동한 제목이 머리 밑에 숨지 않게 */
	html { scroll-padding-top:112px; }
}

@media (max-width:760px) {
	.pl-head-inner { padding:40px 20px 32px; }
	.pl-head h1 { font-size:24px; }
	.pl-doc { padding:20px 20px 60px; }
}

/* 휴대폰 — 표를 줄마다 카드로 */
@media (max-width:640px) {
	.pl-glance { padding:18px 16px; }
	.pl-glance dl > div { grid-template-columns:minmax(0, 1fr); gap:2px; }
	.pl-tw { border:0; border-radius:0; overflow:visible; }
	.pl-table thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
		overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
	.pl-table, .pl-table tbody, .pl-table tr, .pl-table th, .pl-table td { display:block; width:auto; }
	.pl-table tr { margin-bottom:10px; border:1px solid var(--bd); border-radius:var(--r2); overflow:hidden; }
	.pl-table tbody th { width:auto; background:var(--bg2); }
	.pl-table tr > * { border-bottom:1px solid var(--bd); }
	.pl-table tr > :last-child, .pl-table tr:last-child > :last-child { border-bottom:0; }
	.pl-table tr:last-child > :not(:last-child) { border-bottom:1px solid var(--bd); }
	.pl-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:2px;
		font-size:11.5px; font-weight:600; color:var(--t3); }
	.pl-xfer-card dl > div { grid-template-columns:minmax(0, 1fr); gap:2px; }
}

@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior:auto; }
	.pl-toc > summary::after { transition:none; }
}

/* 인쇄 — 머리 · 바닥 · 목차를 빼고 흰 바탕 한 단으로 */
@media print {
	.pb-head, .pb-foot, .pl-side, .pl-toc-back { display:none !important; }
	.pl-page { --bg:#fff; --bg2:#f3f4f6; --surface:#fff; --bd:#d0d7de; --bd2:#d0d7de;
		--t1:#111; --t2:#222; --t3:#555; --brand:#0e6b60; --cyan:#0e6b60; min-height:0; }
	html, body { background:#fff; }
	.pl-head { background:none; }
	.pl-has-toc .pl-head-inner, .pl-has-toc .pl-doc { display:block; max-width:none; padding-left:0; padding-right:0; }
	.pl-tw, .pl-xfer-card, .pl-note, .pl-glance { break-inside:avoid; }
}