/* 약관·처리방침 두 쪽이 함께 쓰는 문서 스타일.
   랜딩(index.html)의 토큰을 그대로 가져왔다 — 같은 사이트로 보여야 한다.
   랜딩은 단일 파일이지만 이 둘은 서로 똑같아야 해서 파일로 뺐다. */

:root{
  --bg:#ffffff;
  --bg-soft:#f5f6f8;
  --ink:#0e1116;
  --ink-2:#3d4655;
  --ink-3:#6b7585;
  --line:#e4e7ec;
  --brand:#2f6bff;
  --brand-ink:#1b46b8;
  --radius:14px;
  --maxw:760px;
}

*{box-sizing:border-box}

body{
  /* 한글은 기본값이 아무 데서나 끊긴다 — 어절 단위로 끊는다(랜딩과 같은 규칙) */
  word-break:keep-all; overflow-wrap:break-word;
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              system-ui,"Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.02em;
  font-size:16px; line-height:1.78;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px}

/* ── 머리 ────────────────────────────────────────────── */
.doc-head{border-bottom:1px solid var(--line); padding-block:22px; margin-bottom:44px}
.doc-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.doc-head img{height:22px; display:block}
.doc-head a{color:var(--ink-3); text-decoration:none; font-size:14px; font-weight:600}
.doc-head a:hover{color:var(--brand-ink)}

h1{
  font-size:clamp(28px,4.4vw,38px); line-height:1.28; letter-spacing:-.025em;
  margin:0 0 10px; text-wrap:balance;
}
.meta{color:var(--ink-3); font-size:14px; margin:0 0 10px}
.lead{color:var(--ink-2); margin:0 0 46px}

/* ── 조문 ────────────────────────────────────────────── */
h2{
  font-size:19px; line-height:1.4; letter-spacing:-.022em;
  margin:46px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
h2:first-of-type{border-top:0; padding-top:0}
h3{font-size:16px; margin:26px 0 8px; color:var(--ink)}

p{margin:0 0 14px; color:var(--ink-2)}
ol,ul{margin:0 0 14px; padding-left:22px; color:var(--ink-2)}
li{margin-bottom:7px}
li::marker{color:var(--ink-3)}
strong{color:var(--ink); font-weight:700}
a{color:var(--brand-ink)}

/* ── 표 ──────────────────────────────────────────────── */
/* 좁은 화면에서 표만 가로로 밀린다 — 쪽 전체가 밀리면 안 된다 */
.tablewrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:var(--radius)}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:15px}
th,td{padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
th{background:var(--bg-soft); color:var(--ink); font-weight:700; white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:0}
td{color:var(--ink-2)}

/* ── 강조 상자 ───────────────────────────────────────── */
.note{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin:0 0 18px;
}
.note p:last-child{margin-bottom:0}

/* ── 꼬리 ────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line); margin-top:64px; padding-block:34px 56px;
  color:var(--ink-3); font-size:14px;
}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
footer a{color:var(--ink-3); text-decoration:none; font-weight:600}
footer a:hover{color:var(--brand-ink)}

@media (max-width:520px){
  body{font-size:15.5px}
  .doc-head{margin-bottom:32px}
  h2{margin-top:36px}
}