/**
 * Site-wide layer on top of tokens.css + components.css:
 * legacy variable aliases for older page scripts/styles, policy language switching,
 * and restyling of legacy page classes (style.css era) to the same system.
 */
html { overflow-y: scroll; }

body.ls {
  --bg-primary: var(--ls-bg);
  --bg-secondary: var(--ls-card);
  --bg-tertiary: var(--ls-card-2);
  --text-primary: var(--ls-text);
  --text-secondary: var(--ls-muted);
  --accent: var(--ls-accent);
  --border: var(--ls-border);
  --bg: var(--ls-bg);
  --bg2: var(--ls-bg-elevated);
  --card: var(--ls-card);
  --card2: var(--ls-card-2);
  --text: var(--ls-text);
  --muted: var(--ls-muted);
  --accent-ink: var(--ls-accent-ink);
  --ok: var(--ls-ok);
  --warn: var(--ls-warn);
  --over: var(--ls-danger);
  --radius: var(--ls-radius);
  background: var(--ls-bg);
  color: var(--ls-text);
  font-family: var(--ls-font);
}
body.ls::before { display: none; }
body.ls main > section { opacity: 1; transform: none; animation: none; }

/* Policy pages show one language section at a time */
html[data-site-lang] .ls-policy > section[id="ko"],
html[data-site-lang] .ls-policy > section[id="en"],
html[data-site-lang] .ls-policy > section[id="ja"] { display: none; }
html[data-site-lang="ko"] .ls-policy > section[id="ko"],
html[data-site-lang="en"] .ls-policy > section[id="en"],
html[data-site-lang="ja"] .ls-policy > section[id="ja"] { display: block; }
.ls-policy { max-width: var(--ls-wrap); }
.ls-policy p, .ls-policy li { word-break: normal; overflow-wrap: anywhere; }
.ls-policy .lang-switch { display: none; }
.ls-policy .short { padding: 16px 20px; border-radius: var(--ls-radius); background: var(--ls-card); box-shadow: var(--ls-lift); }
.ls-policy table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.ls-policy th, .ls-policy td { min-width: 8rem; padding: 8px 12px; border-bottom: 1px solid var(--ls-border); text-align: left; vertical-align: top; color: var(--ls-muted); }
.ls-policy th { color: var(--ls-text); font-weight: 500; }
.ls-policy hr { border: 0; border-top: 1px solid var(--ls-border); margin: 40px 0; }

/* Legacy containers from the old style.css pages */
body.ls .ls-card, body.ls .project-card, body.ls .ad-card, body.ls .mvp-card,
body.ls .contact-section, body.ls .app-container, body.ls .selected-color, body.ls .short {
  background: var(--ls-card); border: 0; border-radius: var(--ls-radius); box-shadow: var(--ls-lift); color: var(--ls-text);
}
body.ls .project-card::before, body.ls .mvp-card::before { display: none; }
body.ls .project-card:hover, body.ls .ad-card:hover, body.ls .mvp-card:hover { transform: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.06); }
body.ls .mvp-card { opacity: 1; animation: none; }
body.ls .tag, body.ls .mvp-category, body.ls .mvp-status, body.ls .mvp-tag {
  background: var(--ls-bg-elevated); border: 0; border-radius: var(--ls-radius-pill); color: var(--ls-muted); font-size: 12px; font-weight: 500;
}
body.ls .cta-button, body.ls .ad-btn, body.ls .btn-primary {
  background: var(--ls-accent); color: var(--ls-accent-ink); border: 0; border-radius: var(--ls-radius-sm); box-shadow: none; font-weight: 500;
}
body.ls .cta-button:hover, body.ls .ad-btn:hover, body.ls .btn-primary:hover { background: var(--ls-accent-hover); transform: none; box-shadow: none; }
body.ls .btn-secondary, body.ls .slider-value, body.ls .value-input {
  background: var(--ls-card); border: 1px solid var(--ls-border); color: var(--ls-text); border-radius: var(--ls-radius-sm);
}
body.ls .back-home, body.ls .project-link { color: var(--ls-link); }

.ls-table-scroll::before, .table-wrap::before { content: none; }
.table-wrap { max-width: 100%; overflow-x: auto; }

.page-ads .ads-container { max-width: var(--ls-wrap-wide); margin: 0 auto; padding: 56px 24px; }
.page-ads .ads-hero { margin-bottom: 40px; }
.page-ads .ads-grid { gap: 16px; }
.page-ads .ad-card { display: flex; flex-direction: column; padding: 24px; }
.page-ads .ad-features { flex: 1; }
.page-ads .contact-box { margin: 24px 0; padding: 16px; border-radius: var(--ls-radius-sm); background: var(--ls-bg-elevated); }
.page-ads #email-copy { color: var(--ls-link); cursor: pointer; font-weight: 500; text-decoration: underline; }

.page-color-picker .tool-stage { padding: 40px 24px; }
.page-color-picker .app-container { max-width: 440px; margin: 0 auto; padding: 24px; }
.page-color-picker .app-title { color: var(--ls-text); background: none; -webkit-text-fill-color: currentColor; font-weight: 600; }
.page-color-picker .app-subtitle, .page-color-picker .value-label, .page-color-picker .history-title { color: var(--ls-muted); }
.page-color-picker .toast { background: var(--ls-text); color: #fff; border: 0; border-radius: var(--ls-radius-sm); }
.page-color-picker .toast:empty { display: none; }

@media (max-width: 720px) {
  .page-ads .ads-container, .page-color-picker .tool-stage { padding-left: 16px; padding-right: 16px; }
  .page-ads .ads-grid { grid-template-columns: minmax(0, 1fr); }
  .page-color-picker .color-values { grid-template-columns: minmax(0, 1fr); }
}