/* 개인정보처리방침과 이용약관 네 화면이 함께 쓰는 한 벌입니다.
   pages.json 의 "css" 로 걸려 있습니다. tech-detail·news-detail 과 마찬가지로
   #p- 접두사를 붙이지 않습니다. 처음부터 이 네 화면에만 실리고 이름도
   여기에서만 쓰므로 겹칠 일이 없습니다.

   법 문서는 읽는 글이 아니라 찾아보는 글입니다. 조문 번호가 눈에 먼저
   들어와야 하고, 필요한 조를 짚어 링크로 보낼 수 있어야 합니다. 그래서
   조마다 id 를 두고 번호를 본문 왼쪽에 세웁니다. */

/* base.css 의 .hero,.hd 규칙이 min-height:72vh 로 화면 높이를 차지하고 안쪽을
   가운데 정렬합니다. 첫 화면에는 맞지만 법 문서 머리글에는 과합니다. 글 높이만큼만
   쓰도록 풀고, 아래 밴드의 윗여백도 함께 줄입니다. */
.hd{background:var(--surface-dark);color:var(--on-dark);padding:180px 64px var(--s-xxxl);
  min-height:auto;display:block}
.band.light{padding-top:var(--s-xxxl)}
.hd .inner{max-width:1152px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-lg)}
.hd h1{color:var(--on-dark);max-width:20ch}
.hd .sub{font-size:17px;line-height:1.7;color:var(--on-dark-mute);max-width:62ch}
@media(max-width:900px){.hd{padding:140px 24px var(--s-xxl)}}

/* 조문. 넓은 화면에서는 번호가 본문 왼쪽에 서고, 좁아지면 위로 올라갑니다. */
.legal{margin-top:var(--s-xxxl);border-top:1px solid var(--hairline-strong)}
.legal .art{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-lg) var(--s-xxl);
  padding:var(--s-xxl) 0;border-bottom:1px solid var(--hairline)}
@media(max-width:767px){.legal .art{grid-template-columns:1fr;gap:var(--s-sm);padding:var(--s-xl) 0}}
.legal .no{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ash);
  font-variant-numeric:tabular-nums}
.legal h2{font-size:19px;font-weight:700;line-height:1.35;color:var(--ink);margin:0 0 var(--s-sm)}
@media(max-width:767px){.legal h2{margin-top:4px}}
.legal p{font-size:15px;line-height:1.85;color:var(--charcoal);margin:0}
.legal p + p{margin-top:var(--s-sm)}
.legal ul{list-style:none;margin:var(--s-md) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
/* 점은 격자가 아니라 절대 위치로 답니다. 격자로 두면 <b>이름</b> 과 그 뒤의
   글이 각각 칸을 차지해, 뒤 글이 14px 짜리 첫 칸으로 떨어져 한 글자씩 세로로
   쌓입니다. 실제로 그렇게 깨졌습니다. */
.legal li{position:relative;padding-left:14px;
  font-size:15px;line-height:1.75;color:var(--charcoal)}
.legal li::before{content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;background:var(--stone)}
.legal li b{margin-right:.35em}
.legal li b{color:var(--ink);font-weight:700}
.legal dl{margin:var(--s-md) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-xs) var(--s-md);font-size:15px;line-height:1.75}
.legal dt{color:var(--ink);font-weight:700}
.legal dd{margin:0;color:var(--charcoal)}

/* 책임자 연락처. 본문과 같은 결로 두되 한 덩어리로 묶습니다. */
.legal .who{margin-top:var(--s-md);border-left:1px solid var(--hairline-strong);
  padding-left:var(--s-md);display:flex;flex-direction:column;gap:2px}
.legal .who b{font-size:15px;font-weight:700;color:var(--ink)}
.legal .who span{font-size:15px;line-height:1.75;color:var(--charcoal)}
.legal .who a{border-bottom:1px solid var(--stone)}
.legal .who a:hover{border-bottom-color:var(--ink)}

/* 다른 문서로 건너가는 줄 */
.legal-next{margin-top:var(--s-xxxl);padding-top:var(--s-lg);border-top:1px solid var(--hairline-strong);
  display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-xxl);align-items:baseline}
.legal-next .k{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.legal-next a{font-size:17px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;transition:opacity .15s}
.legal-next a:hover{opacity:.6}