@import url("/privacy-assets/tokens.css");

@font-face {
  font-family: Pretendard;
  src: url("/privacy-assets/Pretendard-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Pretendard;
  src: url("/privacy-assets/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root { color-scheme: light; --page-width: 1064px; --page-inset: var(--space-space40); }
* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-space24); }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-textPrimary);
  font-family: var(--font-family);
  font-size: var(--type-subTypography10-size);
  line-height: var(--type-subTypography10-leading);
  font-weight: var(--type-subTypography10-weight);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--color-blue600); text-underline-offset: 4px; }
a:hover { color: var(--color-blue900); }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: var(--space-space4);
  border-radius: var(--radius-radius4);
}
.container { width: min(var(--page-width), calc(100% - var(--page-inset) * 2)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--color-divider); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-space24); }
.brand { display: flex; align-items: center; gap: var(--space-space8); text-decoration: none; color: var(--color-textPrimary); }
.brand img { width: 48px; height: 48px; }
.brand span { font-size: var(--type-screenTitle-size); font-weight: var(--type-screenTitle-weight); }
.languages { display: flex; flex-wrap: wrap; gap: var(--space-space16); font-size: var(--type-body-size); }
.languages a { display: inline-flex; min-height: 44px; align-items: center; color: var(--color-textSecondary); text-decoration: none; }
.languages a[aria-current="page"] { color: var(--color-textPrimary); font-weight: 700; text-decoration: underline; }
.hero { padding-block: var(--space-space48) var(--space-space40); max-width: 720px; }
.eyebrow { color: var(--color-primary); font-size: var(--type-fieldLabel-size); font-weight: var(--type-fieldLabel-weight); margin-bottom: var(--space-space12); }
h1 { font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: 1.3; }
.intro { margin-top: var(--space-space20); color: var(--color-textSecondary); }
.updated { margin-top: var(--space-space16); font-size: var(--type-bodySmall-size); color: var(--color-textSecondary); }
.key-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-space16); margin-bottom: var(--space-space48); }
.key-point { padding: var(--space-space24); border: 1px solid var(--color-border); border-radius: var(--radius-radius12); }
.key-point h2 { font-size: var(--type-bodyLarge-size); font-weight: 700; margin-bottom: var(--space-space8); }
.key-point p { color: var(--color-textSecondary); font-size: var(--type-subTypography11-size); line-height: var(--type-subTypography11-leading); }
.document-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: var(--space-space48); align-items: start; padding-bottom: var(--space-space48); }
.contents { position: sticky; top: var(--space-space24); padding-block: var(--space-space8); }
.contents h2 { font-size: var(--type-body-size); margin-bottom: var(--space-space16); }
.contents ol { list-style: none; padding: 0; display: grid; gap: var(--space-space4); }
.contents a { display: flex; gap: var(--space-space8); padding-block: var(--space-space8); color: var(--color-textSecondary); font-size: var(--type-body-size); text-decoration: none; }
.contents a:hover { color: var(--color-primary); }
.section-number { color: var(--color-textTertiary); min-width: 20px; font-variant-numeric: tabular-nums; }
.policy-section { padding-top: var(--space-space32); margin-top: var(--space-space40); border-top: 1px solid var(--color-divider); }
.policy-section:first-child { margin-top: 0; }
.policy-section h2 { display: flex; gap: var(--space-space12); margin-bottom: var(--space-space20); font-size: var(--type-sectionTitle-size); line-height: var(--type-subTypography9-leading); font-weight: var(--type-sectionTitle-weight); }
.policy-section h2 .section-number { color: var(--color-primary); }
.policy-section h3 { margin-top: var(--space-space24); margin-bottom: var(--space-space12); font-size: var(--type-bodyLarge-size); }
.policy-section p + p, .policy-section p + ul, .policy-section ul + p { margin-top: var(--space-space16); }
.policy-section ul { padding-left: var(--space-space24); }
.policy-section li + li { margin-top: var(--space-space8); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--type-subTypography11-size); line-height: var(--type-subTypography11-leading); margin-block: var(--space-space20); table-layout: fixed; }
.data-table th, .data-table td { padding: var(--space-space16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-divider); }
.data-table th { font-weight: 700; background: var(--color-grey50); }
.data-table th:first-child { width: 25%; }
.callout { background: var(--color-primaryMuted); border-radius: var(--radius-radius12); padding: var(--space-space20); margin-block: var(--space-space20); }
.contact-box { margin-top: var(--space-space24); border: 1px solid var(--color-border); border-radius: var(--radius-radius12); padding: var(--space-space24); }
.contact-box .button { margin-top: var(--space-space16); }
.button { display: inline-flex; min-height: var(--buttonHeight); align-items: center; justify-content: center; padding: var(--space-space12) var(--space-space24); border-radius: var(--buttonRadius); background: var(--color-primary); color: var(--color-textOnPrimary); font-size: var(--type-button-size); font-weight: var(--type-button-weight); text-decoration: none; }
.button:hover { background: var(--color-blue600); color: var(--color-textOnPrimary); }
.site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-space24); color: var(--color-textSecondary); font-size: var(--type-bodySmall-size); }
.footer-inner { display: flex; justify-content: space-between; gap: var(--space-space16); flex-wrap: wrap; }
.skip-link { position: absolute; top: -100px; left: var(--space-space16); background: var(--color-white); padding: var(--space-space12); z-index: 1; }
.skip-link:focus { top: var(--space-space8); }

@media (max-width: 760px) {
  :root { --page-inset: var(--space-space24); }
  .header-inner { min-height: 76px; gap: var(--space-space12); }
  .hero { padding-block: var(--space-space32); }
  .key-points { grid-template-columns: 1fr; gap: var(--space-space12); margin-bottom: var(--space-space32); }
  .key-point { padding: var(--space-space20); }
  .document-layout { grid-template-columns: 1fr; gap: var(--space-space32); }
  .contents { position: static; padding: var(--space-space20); background: var(--color-grey50); border-radius: var(--radius-radius12); }
  .contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-space16); }
  .contents a { min-height: 44px; }
  .policy-section { margin-top: var(--space-space32); }
  /* 같은 표를 작은 화면에서는 행별 목록으로 보여줘요. */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding-block: var(--space-space16); border-bottom: 1px solid var(--color-divider); }
  .data-table td { border: 0; padding: var(--space-space4) 0; }
  .data-table td::before { content: attr(data-label); display: block; color: var(--color-textSecondary); font-size: var(--type-caption-size); }
  .data-table td:first-child { font-weight: 700; }
  .contact-box .button { width: 100%; }
}
@media print {
  .site-header, .contents, .site-footer, .button, .skip-link { display: none; }
  .container { width: 100%; }
  .document-layout { display: block; }
  .policy-section, .key-point { break-inside: avoid; }
  a { color: inherit; }
}