/* Version: v2.0.1 (2026-08-01) | White-first + global control borders */
/* Environment: HTML5 + Tailwind CDN + Vanilla JS */
/* Author: Cursor Agent (Approved by SHIN) */
@import url('control-borders.css?v=1000');
/*
  Ratio target: White 85–90% · Light Gray 8–10% · HOAM Blue 3–5% (accent only).
  Never use HOAM Blue / dark navy as full-page or large-section backgrounds.
*/

:root {
  /* Surfaces (primary) */
  --lx-color-surface: #FFFFFF;
  --lx-color-surface-soft: #F8FAFC;
  --lx-color-surface-muted: #F1F5F9;
  --lx-color-surface-warm: #FAFBFC;

  /* Text */
  --lx-color-ink-950: #0F172A;
  --lx-color-ink-900: #111827;
  --lx-color-ink-800: #1E293B;
  --lx-color-ink-700: #334155;
  --lx-color-muted: #64748B;
  --lx-color-muted-soft: #94A3B8;

  /* HOAM Blue — accent only */
  --lx-color-brand-700: #0F5C61;
  --lx-color-brand-600: #13777D;
  --lx-color-brand-500: #148A8F;
  --lx-color-brand-300: #5EEAD4;
  --lx-color-brand-100: #D9FAF5;
  --lx-color-brand-50: #F2FAF9;

  /* Legacy ink aliases (do NOT use as page backgrounds) */
  --lx-color-ink-legacy-950: #061416;
  --lx-color-ink-legacy-900: #0A2428;

  --lx-color-gold-500: #C9A227;
  --lx-color-gold-100: #FFF4CF;
  --lx-color-line: #E5E7EB;
  --lx-color-line-strong: #8795A8;
  --lx-color-control-border: #8795A8;
  --lx-color-success: #059669;
  --lx-color-warning: #D97706;
  --lx-color-danger: #DC2626;

  --lx-font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lx-text-xs: 0.75rem;
  --lx-text-sm: 0.875rem;
  --lx-text-md: 1rem;
  --lx-text-lg: 1.125rem;
  --lx-text-xl: 1.25rem;
  --lx-text-2xl: 1.5rem;
  --lx-text-3xl: 2rem;
  --lx-text-4xl: 2.75rem;
  --lx-text-5xl: 4rem;
  --lx-leading-tight: 1.12;
  --lx-leading-title: 1.22;
  --lx-leading-body: 1.65;
  --lx-letter-tight: -0.04em;
  --lx-letter-label: 0.08em;

  --lx-space-1: 0.25rem;
  --lx-space-2: 0.5rem;
  --lx-space-3: 0.75rem;
  --lx-space-4: 1rem;
  --lx-space-5: 1.25rem;
  --lx-space-6: 1.5rem;
  --lx-space-8: 2rem;
  --lx-space-10: 2.5rem;
  --lx-space-12: 3rem;
  --lx-space-16: 4rem;
  --lx-space-20: 5rem;
  --lx-space-24: 6rem;

  --lx-radius-sm: 0.625rem;
  --lx-radius-md: 0.875rem;
  --lx-radius-lg: 1.125rem;
  --lx-radius-xl: 1.25rem;
  --lx-radius-2xl: 1.5rem;
  --lx-radius-pill: 999px;

  --lx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --lx-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.05);
  --lx-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.07);
  --lx-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.09);
  --lx-shadow-brand: 0 8px 24px rgba(15, 92, 97, 0.18);
  --lx-shadow-inner-line: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --lx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lx-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --lx-duration-fast: 150ms;
  --lx-duration-base: 240ms;
  --lx-duration-slow: 520ms;

  --lx-page-max: 1440px;
  --lx-content-max: 1120px;
  --lx-header-h: 72px;
}

body {
  background: var(--lx-color-surface);
  color: var(--lx-color-ink-900);
  font-family: var(--lx-font-sans);
}

.lx-eyebrow {
  color: var(--lx-color-brand-700);
  font-size: var(--lx-text-sm);
  font-weight: 800;
  letter-spacing: var(--lx-letter-label);
  text-transform: uppercase;
}

.lx-display {
  color: var(--lx-color-ink-950);
  font-size: clamp(2.5rem, 6vw, var(--lx-text-5xl));
  font-weight: 850;
  letter-spacing: var(--lx-letter-tight);
  line-height: var(--lx-leading-tight);
}

.lx-title {
  color: var(--lx-color-ink-950);
  font-size: clamp(2rem, 4vw, var(--lx-text-4xl));
  font-weight: 820;
  letter-spacing: -0.035em;
  line-height: var(--lx-leading-title);
}

.lx-subtitle {
  color: var(--lx-color-muted);
  font-size: clamp(1.05rem, 2vw, var(--lx-text-xl));
  font-weight: 560;
  line-height: var(--lx-leading-body);
}

.lx-body {
  color: var(--lx-color-ink-700);
  font-size: var(--lx-text-md);
  font-weight: 520;
  line-height: var(--lx-leading-body);
}

.lx-section {
  padding: var(--lx-space-20) var(--lx-space-6);
  background: var(--lx-color-surface);
}

.lx-section--soft {
  background: var(--lx-color-surface-soft);
}

.lx-container {
  max-width: var(--lx-page-max);
  margin: 0 auto;
}

.lx-content {
  max-width: var(--lx-content-max);
  margin: 0 auto;
}

.lx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lx-space-2);
  min-height: 3rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--lx-radius-pill);
  font-size: var(--lx-text-sm);
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--lx-duration-base) var(--lx-ease-out),
    box-shadow var(--lx-duration-base) var(--lx-ease-out),
    background var(--lx-duration-base) var(--lx-ease-smooth),
    border-color var(--lx-duration-base) var(--lx-ease-smooth),
    color var(--lx-duration-base) var(--lx-ease-smooth);
}

.lx-btn:hover { transform: translateY(-1px); }

.lx-btn-primary {
  background: var(--lx-color-brand-700);
  color: #fff;
  box-shadow: var(--lx-shadow-brand);
}

.lx-btn-primary:hover {
  background: var(--lx-color-brand-500);
}

.lx-btn-secondary {
  background: var(--lx-color-surface);
  border-color: var(--lx-color-control-border);
  color: var(--lx-color-ink-950);
  box-shadow: var(--lx-shadow-xs);
}

.lx-btn-secondary:hover {
  border-color: var(--lx-color-brand-700);
  color: var(--lx-color-brand-700);
}

.lx-btn-ghost {
  background: var(--lx-color-surface);
  border-color: var(--lx-color-control-border);
  color: var(--lx-color-ink-800);
}

.lx-btn-ghost:hover {
  border-color: var(--lx-color-brand-700);
  color: var(--lx-color-brand-700);
  background: var(--lx-color-brand-50);
}

.lx-card {
  background: var(--lx-color-surface);
  border: 1px solid var(--lx-color-line);
  border-radius: var(--lx-radius-xl);
  box-shadow: var(--lx-shadow-xs);
  transition: transform var(--lx-duration-base) var(--lx-ease-out), box-shadow var(--lx-duration-base) var(--lx-ease-out);
}

.lx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lx-shadow-md);
}

.lx-card-premium {
  background: var(--lx-color-surface);
  border: 1px solid var(--lx-color-line);
  border-radius: var(--lx-radius-2xl);
  box-shadow: var(--lx-shadow-sm);
}

/* Deprecated for page chrome — keep only for rare dark widgets with SHIN approval */
.lx-card-dark {
  background: var(--lx-color-surface-soft);
  border: 1px solid var(--lx-color-line);
  color: var(--lx-color-ink-900);
  border-radius: var(--lx-radius-2xl);
  box-shadow: var(--lx-shadow-sm);
}

.lx-link {
  color: var(--lx-color-brand-700);
  text-decoration: none;
  font-weight: 650;
}

.lx-link:hover { color: var(--lx-color-brand-500); text-decoration: underline; }

.lx-accent {
  color: var(--lx-color-brand-700);
}

.lx-icon-accent {
  color: var(--lx-color-brand-700);
}