/* Terms of Service (TOS) page only styles */
/* Scope everything to .policy-page to avoid conflicts */

.policy-page {
  --doc-max-width: 1100px;
  --doc-side-padding: clamp(16px, 4vw, 32px);
  --doc-bg: #ffffff;
  --doc-text: #222222;
  --doc-muted: #6b6b6b;
  --doc-border: #e6e6e6;
  --doc-heading: #111111;
  --doc-code-bg: #f8f8fa;

  width: 1100px;
  color: var(--doc-text);
  background: var(--doc-bg);
  margin: 0 auto;
  padding: 48px var(--doc-side-padding) 80px;
  max-width: calc(var(--doc-max-width) + var(--doc-side-padding) * 2);
}

.policy-page .policy-title {
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 12px 0 18px;
  color: var(--doc-heading);
  font-weight: 700;
}

.policy-page .policy-meta {
  color: var(--doc-muted);
  font-size: 14px;
  margin-bottom: 26px;
}

.policy-page .doc-card {
  background: #fff;
  border: 1px solid var(--doc-border);
  border-radius: 12px;
  padding: clamp(18px, 2.8vw, 28px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* Preformatted text wrapper to preserve original line breaks but make it readable */
.policy-page pre.tos-content {
  white-space: pre-wrap; /* preserve line breaks and wrap long lines */
  word-wrap: break-word;
  word-break: keep-all; /* Korean-friendly line breaking */
  line-height: 1.6;
  font-size: 14px;
  color: var(--doc-text);
  margin: 0;
}

/* Make headings inside the pre-styled text a bit bolder if they appear as lines starting with specific patterns (optional visual aid) */
.policy-page pre.tos-content b,
.policy-page pre.tos-content strong {
  font-weight: 700;
}

/* Section divider utility */
.policy-page .divider {
  height: 1px;
  background: var(--doc-border);
  margin: 24px 0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .policy-page {
    width: 90%;
    padding: 32px var(--doc-side-padding) 56px;
  }
  .policy-page .doc-card {
    border-radius: 10px;
  }
  .policy-page pre.tos-content {
    font-size: 15px;
    line-height: 1.7;
  }
}