/* ==========================================================================
   Policy Pages CSS
   - privacy.html, terms.html, legal.html 공통 스타일
   - 가독성, 계층 구조, 접근성, 반응형 경험을 모두 최적화한 최종본입니다.
   ========================================================================== */

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

/* ===== [1. 전역 레이아웃 및 타이포그래피] =============================== */
.container {
  max-width: 50rem;
  margin-inline: auto;
  padding-inline: var(--space-lg);
  padding-bottom: max(var(--footer-safe-area, 8rem), 8rem); /* 푸터 안전 영역 확보 */
  min-height: calc(100vh - var(--header-height));
}

body.with-sticky-header {
  padding-top: var(--header-height);
}

/* 스크롤 시 헤더에 가려지지 않도록 상단 여백 확보 */
section[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* 긴 문서는 카드 자체의 여백으로 구분합니다. */
main.container > section:not(:first-of-type) {
  border-top: 0;
  padding-top: 0;
}

/* --- 페이지 헤더 --- */
.page-header {
  background-color: var(--color-primary-lighter);
  padding: var(--space-xl) var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.page-header h1 {
  font-size: clamp(2.125rem, 1.25rem + 3vw, 3rem); /* 존재감 있는 타이틀 */
  font-weight: var(--font-weight-bold); /* 명확한 위계 */
  color: var(--color-primary);
  margin-block: 0 var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  word-break: keep-all;
  letter-spacing: 0;
  line-height: 1.35;
}

.page-header h1 .emoji-icon {
  font-size: clamp(2.2rem, 3vw, 2.6rem);
  line-height: 1;
  opacity: .9;
  transform: translateY(0.03em);
}

.page-header .last-updated {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.page-header .last-updated .emoji-icon {
  font-size: 1.18em;
  line-height: 1;
}


/* ===== [2. 핵심 콘텐츠 카드 컴포넌트] ================================== */
.card {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-base);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  animation: fadeIn 0.5s ease-out forwards;
}

.card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-title {
  font-size: clamp(1.15rem, 1rem + 0.65vw, 1.45rem);
  font-weight: var(--font-weight-semibold); /* 본문 대비 강조 */
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0;
}

.toc-details > summary .emoji-icon,
.card-title .emoji-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  min-width: 1.8rem;
  margin-right: 0.45rem;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1;
  transform: translateY(0.08em);
}

.info-box-title .emoji-icon,
.alert-box .emoji-icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  min-width: 1.55rem;
  margin-right: 0.45rem;
  font-size: clamp(1.2rem, 1.55vw, 1.45rem);
  line-height: 1;
  transform: translateY(0.1em);
}

.card-body {
  padding: var(--space-lg);
  font-size: var(--font-size-base);
  line-height: 1.85; /* 기존 1.8에서 증가시켜 텍스트의 '호흡' 늘리기 */
}

/* ✨ [개선] 수직 리듬 강화: 카드 본문 내 요소들의 기본 상단 마진을 늘려 시각적 분리를 명확히 합니다. */
.card-body > *:not(:first-child) {
  margin-block-start: var(--space-lg); /* 기존 var(--space-md)에서 증가 */
}

/* ✨ [개선] 단락(p)과 다른 유형의 콘텐츠 블록(테이블, 리스트 등) 사이 여백을 더 확보하여 정보 그룹을 명확히 구분합니다. */
.card-body p + :is(div.table-wrapper, ul, ol, blockquote, div.info-box, details) {
  margin-block-start: var(--space-xl);
}
.card-body :is(div.table-wrapper, ul, ol, blockquote, div.info-box, details) + p {
  margin-block-start: var(--space-lg);
}

.card-body p + p {
  margin-top: var(--space-sm);
}

/* ✨ [개선] h3 부제목의 상단 여백을 크게 늘려, 이전 내용과 확실하게 단락을 구분 짓습니다. */
.card-body h3 {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
  line-height: 1.45;
  letter-spacing: 0;
  margin-block: var(--space-xxl) var(--space-xs); /* 상단 여백을 var(--space-xl)에서 var(--space-xxl)로 대폭 증가 */
}

/* ✨ [유지] 요청하신 '단락 끝 단어 잘림 방지'를 위해 text-wrap: pretty 속성을 유지합니다. */
.card-body p,
.card-body li {
  text-wrap: pretty; /* 브라우저가 자동으로 마지막 줄의 외톨이 단어(orphan)를 방지하도록 최적화 */
  overflow-wrap: break-word;
}


/* ===== [3. 목차 (Table of Contents)] ==================================== */
.table-of-contents {
  background-color: var(--color-surface);
  padding: var(--space-lg);
  border-radius: var(--border-radius-base);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.toc-details > summary {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  font-weight: var(--font-weight-bold); /* 페이지 제목과 동일한 위계 */
  color: var(--color-primary);
  margin-block: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-primary-lighter);
  list-style: none;
}

.toc-details > summary::-webkit-details-marker {
  display: none;
}

.table-of-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 2;
  column-gap: var(--space-lg);
}

.table-of-contents li a {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
  text-decoration: none !important;
  line-height: 1.7;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-sm);
}

/* 목차 상호작용 강화 */
@media (any-hover: hover) {
  .table-of-contents li a:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    transform: translateX(3px);
  }
}

.table-of-contents li a.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-primary-lighter);
}


/* ===== [4. 테이블 스타일] =============================================== */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: fixed;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-base);
  overflow: hidden;
}

th, td {
  padding: calc(var(--space-sm) + 2px) var(--space-md);
  line-height: 1.8;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: top;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

thead th {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

th:first-child, td:first-child {
  width: 30%;
}

/* 라이트/다크 모드에 모두 대응하는 동적 배경색 */
tbody tr:nth-child(even) {
  background-color: hsla(0, 0%, 0%, 0.02);
}
@media (prefers-color-scheme: dark) {
  tbody tr:nth-child(even) {
    background-color: hsla(0, 0%, 100%, 0.05);
  }
}

tbody tr:last-child td {
  border-bottom: 0;
}


/* ===== [5. 기타 UI 컴포넌트] ============================================= */
.info-box {
  background-color: var(--color-primary-lighter);
  padding: var(--space-lg);
  border-radius: var(--border-radius-base);
  border: 1px solid var(--color-primary-light);
}

.info-box-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin-block: 0 var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.info-box p {
  margin: 0;
}

.info-box p + p {
  margin-top: var(--space-sm);
}

.alert-box {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--border-radius-base);
  border: 1px solid var(--color-border-light);
  background-color: var(--color-primary-lighter);
  color: var(--color-text);
}
.alert-box .emoji-icon {
  color: var(--color-primary);
}

.toggle-buttons-container {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-md);
}

.faq-item { border-bottom: 1px solid var(--color-border-light); }
.faq-item:last-child { border-bottom: none; }
details summary {
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '⌄';
  font-family: inherit;
  font-weight: 700;
  color: var(--color-primary);
  transition: transform var(--transition-fast);
}
details[open] > summary::after { transform: rotate(180deg); }
.faq-content { padding: 0 0 var(--space-md) 0; }


/* ===== [6. 유틸리티 & 애니메이션] ======================================== */
.highlight {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-primary-lighter);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
}
.attention {
  color: var(--color-danger);
  font-weight: var(--font-weight-semibold);
  background-color: var(--color-danger-bg);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}


/* ===== [7. 반응형 디자인] ================================================= */
@media (max-width: 768px) {
  /* 모바일에서 목차는 1열로 표시 */
  .table-of-contents ul {
    column-count: 1;
  }
  /* 모바일에서 본문 행간을 늘려 가독성 확보 */
  .card-body p, .card-body li {
    line-height: 1.95;
  }
}

@media (max-width: 48rem) {
  .container {
    padding-inline: var(--space-md);
  }
  .page-header {
    padding: var(--space-xl) var(--space-sm);
  }
  .card-body, .card-header {
    padding: var(--space-md);
  }

  .table-of-contents {
    padding: var(--space-md);
  }

  .toc-details > summary {
    min-height: 2.75rem;
    margin-block-end: 0;
    padding-bottom: 0;
    border-bottom: 0;
    cursor: pointer;
    justify-content: space-between;
  }

  .toc-details > summary::after {
    content: '⌄';
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    transition: transform var(--transition-fast);
  }

  /* .table-of-contents's background is pinned to a fixed light literal on
     policy pages (see body.site-policy-page rules above), so this chevron
     must stay fixed too rather than flip light in dark mode. */
  body.site-policy-page .toc-details > summary::after {
    color: #4A6C8C;
  }

  .toc-details[open] > summary {
    margin-block-end: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-primary-lighter);
  }

  .toc-details[open] > summary::after {
    transform: rotate(180deg);
  }

  /* --- 반응형 테이블 스타일 --- */
  table, thead, tbody, th, td, tr { display: block; }
  table { border: none; box-shadow: none; }
  thead tr { position: absolute; top: -9999px; left: -9999px; }
  tr {
    margin-bottom: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
  td {
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    padding-inline-start: 7.5rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
  }
  td:before {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    width: 6.5rem;
    padding-inline: var(--space-md);
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    background-color: var(--color-primary-lighter);
    height: 100%;
    display: flex;
    align-items: center;
    border-inline-end: 1px solid var(--color-border);
  }
  tr td:last-child { border-bottom: 0; }
}

@media (max-width: 37.5rem) {
  td {
    display: block;
    min-height: 0;
    padding: var(--space-md);
  }

  td::before {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: var(--space-xs);
    padding: 0;
    transform: none;
    border-inline-end: 0;
    background: transparent;
  }
}


/* ===== [8. 접근성 강화 (Accessibility Overrides)] ======================= */

/* 키보드 포커스 가시성 극대화 (WCAG 2.2 준수) */
:is(.table-of-contents a, details > summary):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus-ring-color) 25%, transparent);
  background: var(--color-primary-lighter);
  border-radius: var(--border-radius-sm);
}

/* 동작 줄이기 모드 대응 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .table-of-contents li a:hover {
    transform: none !important;
  }
}

/* 프린트 모드 최적화 */
@media print {
  body {
    color: #000;
    background: #fff;
    padding-top: 0 !important;
  }
  .table-of-contents, .toggle-buttons-container, .btn, i.fas, .emoji-icon {
    display: none !important;
  }
  main.container {
    max-width: 100%;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-header {
    padding: 0 0 1rem 0 !important;
    margin: 0 0 1rem 0 !important;
    background: none !important;
    color: #000 !important;
    text-align: left !important;
  }
  .page-header .last-updated {
    display: block !important;
    color: #333 !important;
  }
  .card, .info-box {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    padding: 1.5rem !important;
    margin: 0 0 1.5rem 0 !important;
    break-inside: avoid; /* 카드 내용이 페이지 중간에 잘리는 현상 방지 */
  }
  a {
    text-decoration: none !important;
    color: inherit !important;
  }
  .table-wrapper, table {
    overflow: visible !important;
    display: table !important; /* 모바일 블록 스타일 해제 */
  }
  tr {
    display: table-row !important; /* 모바일 블록 스타일 해제 */
  }
  th, td {
    display: table-cell !important; /* 모바일 블록 스타일 해제 */
  }
  td:before {
    display: none !important; /* data-label 숨김 */
  }
}

/* 2026-07-13 audit follow-up: quieter reading surfaces and a visible desktop
   contents overview. */
body.site-policy-page .card,
body.site-policy-page .table-of-contents {
  border: 0;
  box-shadow: 0 0.35rem 1.25rem rgba(60, 76, 92, 0.07);
}

body.site-policy-page .card-header {
  border-bottom: 0;
  background: #F7F9FB;
}

body.site-policy-page .table-of-contents {
  background: #F7F9FB;
}

/* Fixed light background above never flips dark (unlike .card-header, which
   site-chrome.js rescues with an !important var(--color-primary-lighter)
   rule) -- pin the paired text/border colors so they don't flip either. */
body.site-policy-page .toc-details > summary {
  color: #4A6C8C;
  border-bottom-color: #E4ECF3;
}

body.site-policy-page .table-of-contents li a:not(:hover):not(.active) {
  color: #2A2A2A;
}