/*
 * privacy.html 전용 규칙입니다. 원본 <style> 에서 그대로 옮겼습니다.
 * 공통 규칙은 site.css 에 있으며, 이 파일이 나중에 로드되어 우선합니다.
 */

:root {
  --c-bg: #FFFFFF; --c-text: #2B2B2B; --c-text-sub: #4A4A4A; --c-text-mute: #6B6B6B;
  --c-dark-bg: #0F0F0E; --c-dark-text: #F1F1F1; --c-dark-sub: #C6C6C6;
  --c-line: #E0E0E0; --c-line-strong: #D6D6D6; --c-line-dark: #2F2F2D;
  --c-fill-soft: #F6F6F4;
  --c-brand: #0016D5; --c-brand-hover: #0011A8;
  --font-head: 'Paperlogy', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --fs-h1: 48px; --fs-h2: 22px; --fs-body: 16px; --fs-caption: 14px;
  --pad-x: 120px; --pad-top: 200px; --pad-bottom: 160px;
  --gap-s: 16px; --gap-m: 24px; --gap-l: 40px;
  --r-card: 6px; --r-pill: 999px; --header-h: 88px;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
}

h1, h2, p, dl, dd { margin: 0; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; }

.container--narrow { max-width: 800px; }

/* header */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; padding: 0 var(--pad-x);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; }

.brand-logo { display: flex; align-items: center; gap: 14px; }

.site-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; white-space: nowrap; }

.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.nav-overlay {
  position: fixed; inset: 0; height: 100vh; z-index: 49; background: var(--c-dark-bg); color: var(--c-dark-text);
  display: none; flex-direction: column; justify-content: center; gap: 32px; padding: 0 var(--gap-m);
}

.nav-overlay__meta { margin-top: var(--gap-m); font-size: var(--fs-caption); color: #8A8A84; }

/* page head */

.page-head { padding: var(--pad-top) var(--pad-x) 0; }

.page-head__inner { display: flex; flex-direction: column; gap: 32px; }

.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-text-sub); }

.page-label { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-sub); }

.page-title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h1); line-height: 1.35; letter-spacing: -0.02em; }

.page-intro { font-size: 17px; line-height: 1.8; color: var(--c-text-sub); text-wrap: pretty; }

.page-version { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-caption); color: var(--c-text-mute); }

/* policy body */

.policy { padding: var(--gap-l) var(--pad-x) var(--pad-bottom); }

.policy__inner { display: flex; flex-direction: column; gap: 56px; }

.policy-section { display: flex; flex-direction: column; gap: var(--gap-s); border-top: 0.5px solid var(--c-line); padding-top: 32px; }

.policy-section__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h2); line-height: 1.4; letter-spacing: -0.02em; }

.policy-section p { font-size: var(--fs-body); line-height: 1.85; text-wrap: pretty; }

.policy-section .note { background: var(--c-fill-soft); border-radius: var(--r-card); padding: var(--gap-m) 28px; font-size: var(--fs-body); line-height: 1.9; white-space: pre-line; }

.policy-section .fine { font-size: 15px; line-height: 1.8; color: var(--c-text-sub); }

.policy-dl { display: flex; flex-direction: column; }

.policy-dl__row { display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px; border-top: 0.5px solid var(--c-line); padding: var(--gap-s) 0; }

.policy-dl__row:last-child { border-bottom: 0.5px solid var(--c-line); }

.policy-dl dt { font-size: var(--fs-caption); color: var(--c-text-mute); }

.policy-dl dd { font-size: var(--fs-body); line-height: 1.7; }

.policy-actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); border-top: 0.5px solid var(--c-line); padding-top: var(--gap-l); }

.btn-primary { border: 0; border-radius: var(--r-pill); background: var(--c-brand); color: #FFFFFF; padding: 14px 28px; font-size: 15px; cursor: pointer; transition: background 200ms linear; white-space: nowrap; }

.btn-ghost { border: 0.5px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 14px 28px; font-size: 15px; background: transparent; cursor: pointer; white-space: nowrap; }

.btn-ghost:hover { background: var(--c-text); color: #FFFFFF; opacity: 1; }

/* footer */

.site-footer nav { display: flex; flex-wrap: wrap; gap: 32px; font-size: var(--fs-caption); }

.site-footer nav a[aria-current="page"] { font-weight: 500; }

.site-footer__meta { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-caption); line-height: 1.8; color: var(--c-dark-sub); }

@media (max-width: 1024px) {
  :root { --pad-x: 48px; --pad-top: 160px; --pad-bottom: 120px; --fs-h1: 40px; }
  .site-nav { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 680px) {
  :root { --pad-x: 20px; --pad-top: 120px; --pad-bottom: 80px; --fs-h1: 32px; --fs-h2: 20px; }
  .brand-logo__wordmark { display: none; }
  .policy-dl__row { grid-template-columns: 1fr; gap: 6px; }
  .policy-section .note { padding: var(--gap-m) 20px; }
}