/* MERIDIAN BIO — 가상 회사 샘플. AXIOM AI(다크/모노스페이스/스티키히어로)와 의도적으로 반대되는
   레이아웃: 라이트 테마, 휴머니스트 서체, 정적 에디토리얼 히어로 + 풀블리드 영상 섹션. */

@font-face {
  font-family: "Pretendard Variable";
  src: url("assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --color-accent: #2f6fd9;
  --color-border: #e3e6ea;
  --color-light: #f4f6f9;
  --color-text-light: #5b6470;
  --radius-md: 12px;
  --radius-lg: 18px;
  --spacing-sm: .75rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 1.75rem;
  --spacing-xl: 2.5rem;
  --font-size-h1: clamp(32px, 5.5vw, 52px);
  --font-size-h2: 26px;
  font-family: "Pretendard Variable", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: #14181f; }
body { letter-spacing: -0.01em; line-height: 1.6; }
a { color: inherit; }

/* --- nav --- */
.nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--color-border);
}
.nav__logo { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.nav__links a { text-decoration: none; color: #444; }
.nav__links a:hover { color: var(--color-accent); }
.nav__cta { background: var(--color-accent); color: #fff; padding: 8px 18px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; }
.nav__toggle {
  display: none; background: none; border: 1px solid var(--color-border); color: #14181f;
  width: 34px; height: 34px; border-radius: 8px; font-size: 15px; cursor: pointer; margin-left: 10px;
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.is-nav-open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
    padding: 8px 0;
  }
  .nav.is-nav-open .nav__links a { padding: 14px 20px; }
}

/* --- hero: 정적 에디토리얼, 배경영상 없음 --- */
.hero { padding: 96px 32px 0; max-width: 760px; margin: 0 auto; text-align: left; }
.hero__inner { display: block; }
.eyebrow { display: inline-block; color: var(--color-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 14px; }
.hero h1 { font-size: clamp(32px, 5.5vw, 52px); line-height: 1.2; font-weight: 800; margin: 0 0 20px; letter-spacing: -0.02em; }
.hero p { font-size: 17px; color: #4a5058; max-width: 520px; margin: 0 0 28px; }
.btn-pill { display: inline-block; border: 1.5px solid #14181f; color: #14181f; padding: 11px 22px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; }
.btn-pill:hover { background: #14181f; color: #fff; }
.hero__note { max-width: 760px; margin: 28px auto 0; background: #fff7e0; color: #8a6a10; border: 1px solid #f0dca0; border-radius: 10px; padding: 10px 16px; font-size: 12.5px; }

/* --- 풀블리드 영상 섹션 --- */
.section-full { margin: 72px 0 0; }
.section-full video { width: 100%; display: block; max-height: 60vh; object-fit: cover; background: #0a0f18; }
.video-caption { text-align: center; color: var(--color-text-light); font-size: 12.5px; padding: 12px 32px; }

main { max-width: 1080px; margin: 0 auto; }
.section { padding: 88px 32px; }
.section h2 { font-size: 26px; margin: 8px 0 32px; font-weight: 800; letter-spacing: -0.01em; }

table.compare-table { width: 100%; border-collapse: collapse; background: #fff; }
table.compare-table th, table.compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14.5px; }
table.compare-table th { background: var(--color-light); font-weight: 700; }
.compare-note { color: var(--color-text-light); font-size: 12.5px; margin-top: 12px; }

.footer { border-top: 1px solid var(--color-border); padding: 32px; text-align: center; font-size: 12.5px; color: var(--color-text-light); }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .hero { padding: 72px 24px 0; }
  .section { padding: 64px 24px; }
}

@media (max-width: 560px) {
  .nav { padding: 14px 20px; }
  .hero { padding: 56px 20px 0; }
  .section { padding: 48px 20px; }
  table.compare-table th, table.compare-table td { padding: 10px 12px; font-size: 13px; }
}