:root {
  color-scheme: light;
  --bg: #fbfbfa;
  --text: #202124;
  --muted: #575b60;
  --line: #dedfdf;
  --accent: #4f98f3;
  --max: 1120px;
  --nav-height: 68px;
  --header-height: 68px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; }
html:lang(ko) { word-break: keep-all; }
html:lang(ko) h1 { text-wrap: balance; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: #175ea9; }
a:focus-visible, summary:focus-visible { outline: 3px solid #175ea9; outline-offset: 4px; border-radius: 3px; }
.shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 30; top: 8px; inset-inline-start: 8px; padding: 10px 14px; background: white; color: var(--text); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 20; top: 0; min-height: var(--nav-height); background: rgb(251 251 250 / .96); border-bottom: 1px solid var(--line); }
.nav { min-height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .footer-brand { min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.brand img, .footer-brand img { flex: 0 0 auto; }
.brand img { border-radius: 9px; }
.brand span, .footer-brand span { min-width: 0; overflow-wrap: anywhere; }
.nav-links, .footer-links { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; }
.nav-links a, .footer-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; }
.nav-links a[aria-current="page"] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.language-picker { position: relative; max-width: 100%; font-size: 14px; }
.language-picker summary { min-height: 44px; padding-block: 10px; cursor: pointer; overflow-wrap: anywhere; }
.language-links { position: absolute; z-index: 25; inset-inline-end: 0; width: max-content; max-width: calc(100vw - 32px); max-height: min(60svh, 480px); overflow-y: auto; display: grid; padding: 8px 16px; background: var(--bg); border: 1px solid var(--line); }
.language-links a { padding-inline: 8px; overflow-wrap: anywhere; }
.language-picker:not([open]) .language-links { display: none; }
.hero { min-height: 475px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; padding-block: 76px 82px; }
.hero-copy { max-width: 690px; }
.eyebrow { margin: 0 0 12px; color: #175ea9; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 20px; font-size: clamp(52px, 7vw, 82px); line-height: 1.02; letter-spacing: -.055em; font-weight: 650; }
.lead { max-width: 660px; margin-bottom: 30px; color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.button { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; gap: 20px; padding: 0 20px; border: 1px solid #2876ca; border-radius: 5px; font-weight: 650; text-decoration: none; }
.button.primary { background: var(--accent); color: #111c29; }
.button.primary:hover { background: #3788e8; color: #111c29; }
.hero-icon { display: block; width: clamp(112px, 16vw, 168px); border-radius: 24%; }
.hero-icon img { width: 100%; height: auto; border-radius: inherit; }
section { scroll-margin-top: calc(var(--header-height) + 16px); }
.screenshots { padding-block: 64px 70px; background: #f0f1ef; }
.section-heading { margin-bottom: 30px; }
h2 { margin-bottom: 0; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -.035em; font-weight: 620; }
.screen-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(20px, 5vw, 68px); }
.screen { min-width: 0; margin: 0; }
.screen img { width: min(100%, 280px); height: auto; margin-inline: auto; border-radius: 4px; }
.screen figcaption { max-width: 280px; margin: 16px auto 0; display: grid; gap: 3px; line-height: 1.45; }
.screen figcaption strong { font-size: 16px; }
.screen figcaption span { color: var(--muted); font-size: 14px; }
.features { padding-block: 86px 90px; }
.feature-list { margin: 0; border-top: 1px solid var(--line); }
.feature-list > div { display: grid; grid-template-columns: minmax(210px, .7fr) 1.3fr; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.feature-list dt { font-size: 18px; font-weight: 650; }
.feature-list dd { max-width: 660px; margin: 0; color: var(--muted); }
.sources-section { padding-block: 68px 76px; background: #f0f1ef; }
.sources-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.source-list { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.source-list li { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.source-note { max-width: 700px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
footer { border-top: 1px solid var(--line); padding-block: 22px; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.footer-brand { gap: 8px; }
.footer-brand img { border-radius: 7px; }
.copyright { color: var(--muted); font-size: 13px; }
.policy { max-width: 828px; padding-block: 58px 82px; }
.policy h1 { margin-bottom: 8px; font-size: clamp(42px, 6vw, 58px); }
.policy .eyebrow { margin-bottom: 10px; }
.policy .meta { margin-bottom: 32px; color: var(--muted); font-size: 14px; }
.policy h2 { margin: 38px 0 14px; font-size: 25px; }
.policy h3 { margin: 24px 0 8px; font-size: 18px; }
.policy p, .policy li { color: #35393d; }
.policy p { margin-bottom: 16px; }
.policy li { padding-inline-start: 4px; margin-block: 8px; }
.policy a { color: #175ea9; }
.policy code { overflow-wrap: anywhere; }
.policy .notice { padding: 14px 0 14px 18px; border-left: 3px solid var(--accent); }
@media (max-width: 760px) {
  :root { --nav-height: 64px; --header-height: 64px; }
  .shell { width: min(var(--max), calc(100% - 36px)); }
  .nav { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: 10px 7px; }
  .site-header { position: sticky; }
  .nav-links { position: relative; width: 100%; gap: 8px 20px; }
  .nav-links a { min-height: 44px; }
  .language-picker { position: static; }
  .language-links { inset-inline: 0; top: 100%; width: auto; max-width: 100%; }
  .hero { min-height: auto; grid-template-columns: 1fr auto; gap: 18px; padding-block: 54px 58px; }
  h1 { font-size: clamp(44px, 11vw, 64px); }
  .hero-icon { width: clamp(70px, 19vw, 120px); }
  .screenshots { padding-block: 48px; }
  .screen-stage { grid-template-columns: 1fr; gap: 34px; }
  .screen img { width: min(100%, 300px); }
  .features { padding-block: 60px; }
  .feature-list > div { grid-template-columns: 1fr; gap: 4px; }
  .sources-layout { grid-template-columns: 1fr; gap: 8px; }
  .policy { padding-block: 40px 64px; }
}
@media (max-width: 390px) {
  .shell { width: calc(100% - 32px); }
  .brand { font-size: 17px; }
  .nav-links { gap: 0 13px; }
  .nav-links a { font-size: 13px; }
  .hero { grid-template-columns: 1fr; }
  .hero-icon { grid-row: 1; width: 72px; }
  .hero-copy { grid-row: 2; }
  .button { width: 100%; justify-content: space-between; }
}
@media (max-height: 560px) { body.mobile-story .screen-track { height: auto; } }
@media (max-width: 600px) and (min-height: 561px) {
  body.mobile-story .screen-track { position: relative; height: 300svh; }
  body.mobile-story .screen-stage { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); display: block; padding-block: 10px; }
  body.mobile-story .screen { position: absolute; inset: 10px 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-content: center; opacity: 0; visibility: hidden; transition: opacity 180ms ease; }
  body.mobile-story .screen.is-active { opacity: 1; visibility: visible; }
  body.mobile-story .screen img { width: auto; height: 100%; max-width: 100%; min-height: 0; object-fit: contain; }
  body.mobile-story .screen figcaption { width: min(100%, 360px); margin: 8px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.mobile-story .screen { transition: none; }
}