/* ═══════════════════════════════════════════════════════════════════════════
   LILT 약관·방침 지면(이용약관 · 개인정보 처리방침) — 첫 화면과 같은 펄 종이 위 먹색 활자.
   무드는 첫 화면(bridge.css)과 한 벌이다: 카드 없음 · 그림자 없음 · 가는 선(hairline) · 세리프 금지.
   값이 bridge.css 와 두 벌이다(그쪽은 한 화면 앱이라 이 글을 못 얹는다) — 한쪽만 고치지 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920; font-style:normal; font-display:swap;
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root{
  --bg:#fafaf8;
  --ink:#1e1c19;
  --soft:#5a544d;
  --mute:#8a827a;
  --line:rgba(30,28,25,.1);
  --line-3:rgba(30,28,25,.16);
  --umber:rgb(40 30 27 / 84%);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    linear-gradient(rgba(255,255,255,.225), rgba(255,255,255,.225)),
    url(../bridge/paper.jpg) 0 0/384px 384px repeat,
    var(--bg);
  color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:14px; line-height:1.75; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:break-word;   /* 한국어 어절 한가운데서 끊지 않는다 */
}
a{ color:inherit; }

/* ── 미리보기·이전 판 띠 — 공개 화면과 구분한다(콘솔에서 연 화면에만 선다) ── */
.lg-banner{ position:sticky; top:0; z-index:5; padding:10px 20px; background:#1e1c19; color:#fafaf8;
  font-size:12px; letter-spacing:.02em; text-align:center; }

/* ── 머리 띠 ── 문서 고르개(이용약관 | 개인정보 처리방침)와 Back 한 줄. 스크롤해도 위에 붙어 있다.
   띠는 화면 폭 전체, 안쪽 내용만 본문과 같은 760px 선에 맞춘다(좌우 패딩으로). 바탕은 body 와 같은 종이.
   ⚠ 높이 약 51px — 바꾸면 .lg-sec 의 scroll-margin-top 과 띠 아래 자리(.lg-banner + .lg-hd)도 같이 고친다. */
.lg-hd{
  position:sticky; top:0; z-index:4;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:6px calc(max(0px, (100% - 760px) / 2) + clamp(20px,5vw,32px)) 0;
  background:
    linear-gradient(rgba(255,255,255,.225), rgba(255,255,255,.225)),
    url(../bridge/paper.jpg) 0 0/384px 384px repeat,
    var(--bg);
  border-bottom:1px solid var(--line);
}
/* 미리보기 띠(한 줄 41px)가 있으면 그 아래에 붙는다. */
.lg-banner + .lg-hd{ top:41px; }
/* 문서 고르개 — 지금 보는 쪽만 먹색 + 밑줄(버튼 모양은 두르지 않는다). 밑줄은 띠의 아랫선 위에 겹친다. */
.lg-docs{ display:flex; gap:20px; min-width:0; }
.lg-docs a{ padding:10px 0 11px; margin-bottom:-1px; font-size:13px; color:var(--mute); text-decoration:none;
  white-space:nowrap; border-bottom:1px solid transparent; }
.lg-docs a:hover{ color:var(--ink); }
.lg-docs a[aria-current]{ color:var(--ink); font-weight:650; border-bottom-color:var(--ink); }
/* Back — 화살표와 한 덩어리. 누르는 높이는 고르개와 같다. */
.lg-back{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:10px 0 11px;
  font-size:12.5px; letter-spacing:.02em; color:var(--mute); text-decoration:none; white-space:nowrap; transition:color .2s; }
.lg-back__arr{ font-size:14px; line-height:1; transition:transform .2s; }
.lg-back:hover{ color:var(--ink); }
.lg-back:hover .lg-back__arr{ transform:translateX(-3px); }

/* ── 본문 ── */
.lg{ max-width:760px; margin:0 auto; padding:18px clamp(20px,5vw,32px) 56px; }
.lg-title{ margin:20px 0 0; font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.3; }
.lg-meta{ margin:8px 0 0; font-size:12px; color:var(--mute); }
.lg-lead{ margin:26px 0 0; color:var(--soft); }
.lg-lead--2{ margin-top:10px; }
.lg p{ margin:10px 0 0; }
.lg b{ font-weight:650; }

/* 목차 — 세로 목록. 가로로 흘리지 않는다(좁은 폰에서 넘친다). */
.lg-toc{ margin:30px 0 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr; gap:2px; }
.lg-toc a{ display:block; padding:6px 0; font-size:13px; color:var(--soft); text-decoration:none; }
.lg-toc a:hover{ color:var(--ink); }
@media (min-width:640px){ .lg-toc{ grid-template-columns:1fr 1fr; column-gap:28px; } }

.lg-sec{ margin-top:46px; scroll-margin-top:68px; }   /* 붙은 머리 띠(약 51px)에 제목이 가리지 않게 */
.lg-sec h2{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.015em; line-height:1.4; }

/* 목록 — 카드가 아니라 가는 선으로 가른다. 폰에서도 이름 | 내용을 한 줄에 나란히 둔다
   (위아래로 쌓으면 「목적 / 보관기간」 같은 짧은 이름 한 줄마다 구분선이 끼어 쿠키 표가 화면 몇 장이 된다). */
.lg-rows{ margin-top:14px; border-top:1px solid var(--line-3); }
.lg-row{ padding:11px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,7.6em) minmax(0,1fr); gap:0 14px; }
.lg-k{ font-size:13px; font-weight:650; color:var(--ink); overflow-wrap:anywhere; }
.lg-v{ min-width:0; color:var(--soft); }
.lg-v p{ margin:0 0 6px; }
.lg-v p:last-child{ margin-bottom:0; }
.lg-v b{ color:var(--ink); }
.lg-why{ font-size:12.5px; color:var(--mute); }
@media (min-width:640px){
  .lg-row{ grid-template-columns:168px 1fr; column-gap:22px; padding:14px 0; }
}

/* 소항목 묶음 — 항목 제목(h3) 아래 목록·문단이 이어지고, 묶음 사이는 가는 선으로 가른다. */
.lg-blk{ margin-top:0; padding:16px 0 18px; border-bottom:1px solid var(--line); }
.lg-sec h2 + .lg-blk{ margin-top:14px; border-top:1px solid var(--line-3); }
.lg-h3{ margin:0; font-size:14.5px; font-weight:700; letter-spacing:-.01em; line-height:1.45; }
.lg-lbl{ margin:14px 0 0; font-size:13px; font-weight:650; color:var(--ink); }
.lg-h3 + .lg-lbl{ margin-top:10px; }
.lg-lbl--top{ margin-top:18px; }
.lg-blk .lg-list{ margin-top:6px; }
.lg-list{ margin:12px 0 0; padding:0 0 0 18px; color:var(--soft); }
.lg-list li{ margin:0 0 8px; padding-left:2px; }
.lg-list b{ color:var(--ink); }

.lg-note{ margin-top:14px; font-size:12.5px; line-height:1.7; color:var(--mute); }
.lg-note b{ color:var(--soft); }

.lg a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-3); }
.lg a:hover{ text-decoration-color:var(--ink); }

/* ── 푸터 ── */
.lg-ft{ max-width:760px; margin:0 auto; padding:18px clamp(20px,5vw,32px) 30px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.02em; color:var(--mute); text-align:right; }