/* Lingomere S03 design tokens — light default, dark via prefers-color-scheme */
:root {
  --ink: #0f172a;
  --paper: #f8fafc;
  --surface: #ffffff;
  --navy: #0f3460;
  --copper: #c9a227;
  --muted: #475569;
  --line: #d6e4f5;
  --success: #0f766e;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;
  --fs-48: 3rem;

  --lh-tight: 1.15;
  --lh-body: 1.65;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-full: 999px;

  --maxw: 1200px;
  --prose: 72ch;
  --gutter: 32px;

  --font-serif: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  --font-sans: "Inter", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-sans);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-4);
}

h1 { font-size: clamp(var(--fs-34), 4vw, var(--fs-48)); }
h2 { font-size: var(--fs-26); }
h3 { font-size: var(--fs-20); }

p { margin: 0 0 var(--sp-4); max-width: var(--prose); }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sp-6);
  border-radius: var(--r-8); border: 1px solid transparent;
  font: 600 var(--fs-16)/1 var(--font-sans);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary { background: var(--copper); color: #fff; }
.btn-primary:hover { filter: brightness(.92); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: color-mix(in srgb, var(--navy) 8%, transparent); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-6);
}
.card:hover { border-color: var(--muted); }

.tag {
  display: inline-flex; align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  color: var(--muted);
}

.section { padding: var(--sp-24) 0; }
@media (max-width: 767px) { .section { padding: var(--sp-16) 0; } }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .btn { width: 100%; min-height: 52px; }
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); text-align: left; }
@media (max-width: 767px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: 640px; }
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--r-12); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ===== 移动端兼容性补丁 ===== */
@media (max-width: 767px) {
  /* P4 字号：强制最小 16px */
  body, p, span, a, li, td, th, label, div, h1, h2, h3, h4, h5, h6,
  nav a, header a, footer a, .nav-links a, .nav a, .menu a,
  .site-header a, .m-hdr a, .main-header a {
    font-size: 16px !important;
  }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  input, select, textarea, button {
    font-size: 16px !important;
  }
  /* P3 触控目标 */
  a, button, input, select, textarea, [role="button"], .btn,
  .nav-toggle, .menu-toggle, .mobile-menu-toggle, .float,
  .chat, .cookie-bar, .back-to-top, .whatsapp-float, .lx-chat,
  .m-chat, .live-chat, .skip-link {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  /* P9 浮层：降低 z-index */
  #cookieBanner, .cookie-bar, .m-cookie, #s28CookieBanner,
  .cookie-consent, .cookie-banner {
    z-index: 999 !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  #lingoFloatLeft, .float-r, .whatsapp-float, .wa-float,
  .back-to-top, .float-chat, .chat-widget {
    z-index: 998 !important;
    width: 48px !important;
    height: 48px !important;
  }
  /* P12 hero 窄列修复 */
  .m-hero, .hero, .hero-premium, .subhero-premium, .page-head {
    display: block !important;
  }
  .m-hero .wrap, .hero .wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* P2 横向溢出 */
  body { overflow-x: hidden !important; }
  img, table, .table-scroll {
    max-width: 100% !important;
  }
}


/* ===== 移动端兼容性补丁（最终版） ===== */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body, p, span, a, li, td, th, label, div, h1, h2, h3, h4, h5, h6,
  nav a, header a, footer a, .nav-links a, .nav a, .menu a,
  .site-header a, .m-hdr a, .main-header a, .skip-link {
    font-size: 16px !important;
  }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  input, select, textarea, button { font-size: 16px !important; }
  a, button, input, select, textarea, [role="button"], .btn,
  .nav-toggle, .menu-toggle, .mobile-menu-toggle, .float,
  .chat, .cookie-bar, .back-to-top, .whatsapp-float, .lx-chat,
  .m-chat, .live-chat, .skip-link {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
  #cookieBanner, .cookie-bar, .m-cookie, #s28CookieBanner,
  .cookie-consent, .cookie-banner {
    z-index: 999 !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  #lingoFloatLeft, .float-r, .whatsapp-float, .wa-float,
  .back-to-top, .float-chat, .chat-widget {
    z-index: 998 !important;
    width: 48px !important;
    height: 48px !important;
  }
  .m-hero, .hero, .hero-premium, .subhero-premium, .page-head {
    display: block !important;
  }
  .m-hero .wrap, .hero .wrap { width: 100% !important; max-width: 100% !important; }
  body { overflow-x: hidden !important; }
  img, table, .table-scroll { max-width: 100% !important; }
}


/* ===== 移动端字号修复（覆盖 polish） ===== */
@media (max-width: 767px) {
  body, body * {
    font-size: 16px !important;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: 16px !important;
  }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
}
/* UI-PATCH-20261111-A2A3A6 reduced-motion */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* UI-PATCH-20261111-A2A3A6 focus-visible */
:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
:focus{outline:2px solid #1d4ed8;outline-offset:2px}