/* ── 쎄롬케어 약관 및 정책 ─────────────────────────────────────────
   레포에서 유일한 장문 읽기 페이지. 다른 페이지는 앱 셸(480px 풀스크린)
   또는 마케팅 랜딩(1280px .wrap)이지만 여기는 문서 페이지이므로
   모든 폭에서 헤더·푸터를 유지합니다 (/estimate/ 처럼 모바일에서 숨기지 않음).
   부수 효과로 "모바일에 정책 링크가 없다" 문제도 해결됩니다.

   ⚠️ 루트 styles.css 를 함께 로드하지 않습니다 (.btn/.dot 정의가 충돌).
      크롬(헤더/푸터)은 루트 styles.css:78-88, 246-263 에서 발췌 복사했고,
      estimate/styles.css 가 빠뜨린 `.foot-links a.strong` 을 여기엔 포함했습니다.
   ───────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   0. 토큰 · 리셋 — 루트 styles.css:6-24
   ══════════════════════════════════════════════════════════════ */
:root {
  --brand: #ED7F1A;
  --brand-hover: #D8700F;
  --brand-600: #C9650A;
  --amber: #F6A24A;
  --ink: #181D27;
  --ink-2: #535862;
  --ink-3: #717680;
  --ink-4: #85888E;
  --footer: #0A0D12;
  --line: #E9EAEB;
  --line-2: #D5D7DA;
  --soft: #FAFAFA;
  --tint: #FEF6EE;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
::-webkit-scrollbar { width: 0; height: 0; }
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* ══════════════════════════════════════════════════════════════
   1. 헤더 — 루트 styles.css:78-88 발췌
   ══════════════════════════════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .90); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hdr-logo img { height: 28px; width: auto; }
.hdr-nav { display: flex; gap: 32px; white-space: nowrap; margin-left: auto; margin-right: 8px; }
.hdr-nav a { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hdr-nav a:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border-radius: 8px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-brand {
  height: 44px; padding: 0 18px; font-size: 15px; color: #fff; background: var(--brand);
  box-shadow: 0 1px 2px 0 rgba(10, 13, 18, .05), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.btn-brand:hover { background: var(--brand-hover); }
.dot { width: 7px; height: 7px; border-radius: 9px; background: #fff; }

/* ══════════════════════════════════════════════════════════════
   2. 셸 — 데스크탑 좌측 사이드바 / 모바일 가로 탭 (같은 DOM)
   ══════════════════════════════════════════════════════════════ */
.pol-shell { padding-top: 44px; padding-bottom: 88px; }

@media (min-width: 1024px) {
  .pol-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

/* ── 네비게이션 ── */
.pol-nav { display: flex; flex-direction: column; }
.pol-nav-h {
  font-size: 13px; font-weight: 700; color: var(--ink-4);
  letter-spacing: .02em; margin-bottom: 14px;
}
.pol-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.pol-nav a:hover { background: var(--soft); color: var(--ink); }
.pol-nav a.is-on { background: var(--tint); color: var(--brand-600); font-weight: 700; }

@media (min-width: 1024px) {
  .pol-nav { position: sticky; top: 96px; }
}

/* 모바일·태블릿 — 가로 스크롤 탭 스트립 */
@media (max-width: 1023px) {
  .pol-nav {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 -20px 28px;
    padding: 0 20px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }
  .pol-nav-h { display: none; }
  .pol-nav a {
    flex: none;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 13.5px;
    white-space: nowrap;
  }
  .pol-nav a.is-on { background: var(--tint); }
}

/* ══════════════════════════════════════════════════════════════
   3. 문서 본문 — 장문 리딩 타이포 (측정 68~72자)
   ══════════════════════════════════════════════════════════════ */
.pol-body { max-width: 720px; }

.pol-doc { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
/* JS OFF 에서 5개 문서가 세로로 이어질 때만 구분선을 넣는다.
   :not([hidden]) 두 개를 붙이지 않으면 JS ON 에서도 앞 문서가 숨겨져 있을 뿐
   인접 선택자는 계속 매칭돼, 보이는 문서 위에 선과 여백이 남는다. */
.pol-doc:not([hidden]) + .pol-doc:not([hidden]) {
  margin-top: 72px;
  padding-top: 64px;
  border-top: 8px solid var(--soft);
}

.pol-h1 {
  font-size: 30px; font-weight: 800; line-height: 1.3;
  letter-spacing: -.03em; color: var(--ink);
}
.pol-h1:focus { outline: none; }
.pol-h1:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.pol-meta { margin-top: 10px; font-size: 13.5px; color: var(--ink-4); font-weight: 500; }
.pol-meta b { color: var(--brand-600); font-weight: 700; }

.pol-doc h2 {
  margin: 44px 0 14px;
  font-size: 20px; font-weight: 800; line-height: 1.4;
  letter-spacing: -.02em; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.pol-doc h3 {
  margin: 28px 0 8px;
  font-size: 16.5px; font-weight: 700; line-height: 1.5;
  letter-spacing: -.01em; color: var(--ink);
}
.pol-doc p { margin: 0 0 12px; }
.pol-doc b { color: var(--ink); font-weight: 700; }
.pol-doc a:not(.pol-nav a) { color: var(--brand-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pol-doc a:hover { color: var(--brand); }

/* 목록 — 조·항·호 */
.pol-ol { margin: 0 0 14px; padding-left: 22px; }
.pol-ol > li { margin-bottom: 7px; padding-left: 4px; }
.pol-ol > li::marker { color: var(--ink-4); font-weight: 600; }
.pol-ol--sub { margin-top: 8px; list-style: lower-alpha; }
.pol-ul { margin: 0 0 14px; padding-left: 20px; }
.pol-ul > li { margin-bottom: 6px; padding-left: 2px; }
.pol-ul > li::marker { color: var(--ink-4); }

/* 확정 전 값 */
.pol-blank {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: #FFF4E5;
  color: #A8560A;
  font-size: .92em;
  font-weight: 700;
  border: 1px dashed #F0BE80;
}

.pol-note { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--ink-4); }

/* ── 초안 배너 ── */
.pol-draft {
  margin: 20px 0 36px; padding: 16px 18px;
  background: var(--tint);
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-2);
}
.pol-draft strong { display: block; color: var(--brand-600); font-weight: 800; margin-bottom: 4px; }

/* ── 강조 박스 ── */
.pol-callout {
  margin: 16px 0 20px; padding: 16px 18px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px; line-height: 1.7;
}
.pol-callout p { margin: 0; }
.pol-callout p + p { margin-top: 8px; }
.pol-callout--warn { background: #FFF8F0; border-color: #F3D9B8; }

/* ── 표 ── */
.pol-tb {
  width: 100%;
  margin: 14px 0 20px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.65;
}
.pol-tb th, .pol-tb td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.pol-tb th {
  background: var(--soft);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.pol-tb td { color: var(--ink-2); }
.pol-tb td b { color: var(--ink); }

/* 모바일 — 표를 카드 스택으로 전환 */
@media (max-width: 767px) {
  .pol-tb thead { display: none; }
  .pol-tb, .pol-tb tbody, .pol-tb tr, .pol-tb td { display: block; width: 100%; }
  .pol-tb tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 0;
    margin-bottom: 12px;
  }
  .pol-tb td { border: 0; padding: 8px 14px; }
  .pol-tb td + td { border-top: 1px solid var(--soft); }
  .pol-tb td::before {
    content: attr(data-th);
    display: block;
    margin-bottom: 3px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--ink-4);
  }
}

/* ── 문서 말미 사업자 정보 ── */
.pol-biz {
  margin-top: 48px; padding: 20px 22px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
}
.pol-biz h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.pol-biz p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════
   4. 푸터 — 루트 styles.css:246-263 발췌
   ══════════════════════════════════════════════════════════════ */
.foot { background: var(--footer); color: #fff; padding: 64px 0 36px; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.foot-logo { height: 30px; width: auto; margin-bottom: 20px; }
.foot-desc { max-width: 380px; font-size: 15px; line-height: 1.7; color: #94979C; font-weight: 500; }
.foot-phone { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.01em; }
.foot-phone svg { width: 22px; height: 22px; }
.foot-col h4 { margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--ink-4); letter-spacing: .02em; }
.foot-col a { display: block; font-size: 15px; color: #CECFD2; font-weight: 500; margin-bottom: 13px; }
.foot-col a:hover { color: #fff; }
.foot-biz { font-size: 13.5px; line-height: 1.85; color: #94979C; font-weight: 500; }
.foot-bottom { padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
.foot-links a { color: #CECFD2; }
.foot-links a.strong { font-weight: 700; }   /* estimate/styles.css 에서 누락된 규칙 */
.foot-links a:hover { color: #fff; }
.foot-links .sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .18); }
.foot-copy { font-size: 13.5px; color: var(--ink-3); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   5. 반응형 여백
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hdr-nav { display: none; }
  .pol-shell { padding-top: 28px; padding-bottom: 56px; }
  .pol-h1 { font-size: 24px; }
  .pol-doc { font-size: 15.5px; }
  .pol-doc h2 { margin-top: 36px; font-size: 18px; }
  .pol-doc h3 { margin-top: 24px; font-size: 15.5px; }
  .pol-doc:not([hidden]) + .pol-doc:not([hidden]) { margin-top: 48px; padding-top: 44px; }
  .foot-top { grid-template-columns: 1fr; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════════
   6. 인쇄 — 5개 문서를 모두 출력 (초안 배너 포함)
   ══════════════════════════════════════════════════════════════ */
@media print {
  .hdr, .foot, .pol-nav { display: none !important; }
  .pol-shell { display: block; padding: 0; max-width: none; }
  .pol-body { max-width: none; }
  /* script.js 가 비활성 문서에 부여한 hidden 을 인쇄에서는 무시 */
  .pol-doc[hidden] { display: block !important; }
  .pol-doc { break-after: page; page-break-after: always; }
  .pol-doc:last-child { break-after: auto; page-break-after: auto; }
  .pol-doc h2, .pol-doc h3 { break-after: avoid; page-break-after: avoid; }
  .pol-tb, .pol-callout, .pol-draft { break-inside: avoid; page-break-inside: avoid; }
  body { font-size: 11pt; color: #000; }
  a { color: #000 !important; text-decoration: none !important; }
}