/* owlai.cloud 공개 사이트(소개 페이지 + 블로그) 공용 스타일 — 소개 사이트 시안(Figma OwlAI_리서치) 토큰: 네이비 GNB, 흰 지면, Pretendard, 18px 카드 · 28px 패널.
   순서: 토큰 → 기본 → GNB·언어 전환·블로그 둘째 줄 → 공용 컴포넌트(web/ui.py) → 블로그 → 푸터·드로어 → 반응형. 외부 자원 금지(CSP self). */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url(fonts/pretendard-400.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url(fonts/pretendard-500.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600 700; font-display: swap; src: url(fonts/pretendard-700.woff2) format("woff2"); }

:root {
  --ink: #0F0F1F;
  --ink-75: rgba(15, 15, 31, .75);
  --muted: #666978;
  --muted-70: rgba(102, 105, 120, .7);
  --line: #E3E3EB;
  --line-strong: #D1D4E5;
  --soft: #F4F4F8;
  --tint: #E3F0FF;
  --navy: #004591;
  --navy-deep: #002754;
  --blue: #147AF2;
  --blue-soft: #CCDEFA;
  --gnb: #001431;
  --code-bg: #0B1A33;
  --code-fg: #E3ECFA;
  --white: #FFFFFF;
  --shadow-panel: 0 24px 60px rgba(0, 26, 64, .10);
  --shadow-pop: 0 16px 40px rgba(0, 20, 49, .16);
  --backdrop: rgba(0, 15, 36, .6);   /* 시안 팝업 배경 #000f24 60% */
  --on-dark: rgba(255, 255, 255, .75);
  --on-dark-line: rgba(255, 255, 255, .18);

  --radius-btn: 10px;
  --radius-card: 18px;
  --radius-panel: 28px;
  --gnb-h: 64px;
  --ease: cubic-bezier(.42, 0, .58, 1);   /* 시안 동작 「ease-in-out」 */
  --dur: 150ms;

  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--gnb-h) + 24px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--white); color: var(--ink); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; }

/* GNB — 시안 2334:143(데스크톱) · 2465:139(모바일). 1024px 아래는 햄버거 + 드로어 */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--gnb); }
.gnb { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: linear-gradient(90deg, #00112B 0%, #00204A 55%, #00112B 100%); color: var(--white); }
.gnb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--gnb-h);
  padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
.gnb-logo { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.gnb-logo img { height: 32px; width: auto; }
.gnb-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gnb-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-btn); background: none;
  font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--on-dark); text-decoration: none; white-space: nowrap; cursor: pointer; }
.gnb-link:hover, .gnb-link[aria-expanded="true"] { color: var(--white); background: rgba(255, 255, 255, .08); }
.gnb-link[aria-current="page"], .gnb-link[data-current] { color: var(--white); font-weight: 600; }
.gnb-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.gnb-drawer-end { display: none; }
.gnb-burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-btn); background: none; color: var(--white); cursor: pointer; }
.gnb-burger .i-close { display: none; }
.gnb[data-open] .gnb-burger .i-menu { display: none; }
.gnb[data-open] .gnb-burger .i-close { display: block; }
.gnb-locked { overflow: hidden; }

/* 언어 전환 KO/EN — dark(GNB) · light(푸터) */
.lang-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--on-dark-line); }
.lang-seg-item { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: rgba(255, 255, 255, .55); text-decoration: none; }
.lang-seg-item:hover { color: var(--white); }
.lang-seg-item[aria-current="true"] { background: rgba(255, 255, 255, .12); color: var(--white); }
.lang-seg--light { border-color: var(--line); }
.lang-seg--light .lang-seg-item { color: var(--muted-70); }
.lang-seg--light .lang-seg-item:hover { color: var(--ink); }
.lang-seg--light .lang-seg-item[aria-current="true"] { background: var(--soft); color: var(--ink); }

/* 블로그 둘째 줄 */
.subnav { background: var(--white); border-bottom: 1px solid var(--line); }
.subnav-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.subnav-home { margin-right: auto; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.subnav-links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.subnav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.subnav-link:hover { color: var(--ink); }
.subnav-link[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--soft); }
.subnav-link .sl-short { display: none; }
.subnav-rss { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--muted); }
.subnav-rss:hover { color: var(--ink); background: var(--soft); }

/* ── 공용 컴포넌트 — 마크업은 web/ui.py ── */

/* 버튼: primary · secondary · ghost · light(어두운 바탕 위 흰 면) · on-dark(어두운 바탕 위 테두리), 크기 sm · lg, 폭 block */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-btn);
  font-size: 15px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--navy-deep); color: var(--white); }
.btn-primary:hover { background: var(--navy); }
.btn-secondary { background: var(--white); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--tint); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--tint); }
.btn-on-dark { background: rgba(255, 255, 255, .04); border-color: var(--on-dark-line); color: var(--white); }
.btn-on-dark:hover { background: rgba(255, 255, 255, .1); }

/* 섹션과 섹션 머리(eyebrow · 제목 · 리드) */
.sec { padding: 112px 0; }
.sec--soft { background: var(--soft); }
.sec--tint { background: var(--tint); }
.sec--navy { background: linear-gradient(180deg, #00112B 0%, #00204A 100%); color: var(--white); }
.sec--hero { padding: 96px 0 112px; }
.sec-head { max-width: 760px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head + * { margin-top: 48px; }
.sec-eyebrow { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--navy); }
.sec-title { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; }
.sec-eyebrow + .sec-title { margin-top: 10px; }
.sec-head > .sec-title:first-child { margin-top: 0; }
h1.sec-title { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.2; letter-spacing: -0.03em; }
.sec-lede { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.sec-head--dark .sec-eyebrow { color: #8CC0FF; }
.sec-head--dark .sec-title { color: var(--white); }
.sec-head--dark .sec-lede { color: var(--on-dark); }
.sec-head--dark .sec-title em { font-style: normal; color: #8CC0FF; }
/* 404 — 갈 곳 버튼 아래 추천 글(blog.recommended) */
.sec--nf-more { padding-top: 0; }
.nf-more { margin: 0 0 20px; font-size: 20px; font-weight: 700; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sec-head--center + .hero-actions { justify-content: center; }

/* 카드 그리드 · 패널 */
.cgrid { display: grid; gap: 24px; }
.cgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccard { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); color: var(--ink); min-width: 0; }
.ccard--link { text-decoration: none; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ccard--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.ccard-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--navy); }
.ccard-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
.ccard-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.panel { padding: 40px; border-radius: var(--radius-panel); background: var(--white); box-shadow: var(--shadow-panel); }

/* 탭 — 기본(밑줄) · pill */
.tab-list { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab-list::-webkit-scrollbar { display: none; }
.tab { flex: none; margin-bottom: -1px; padding: 14px 18px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--muted); white-space: nowrap; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tabs--pill .tab-list { gap: 8px; border-bottom: 0; }
.tabs--pill .tab { margin: 0; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.tabs--pill .tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tab-panel { padding-top: 32px; }
.tab-panel:focus-visible { outline-offset: 4px; }

/* 아코디언 — 하나만 열림 */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.acc-head::-webkit-details-marker { display: none; }
.acc-head .i-chevron { flex: none; width: 20px; height: 20px; color: var(--muted); transition: transform var(--dur) var(--ease); }
.acc-item[open] > .acc-head .i-chevron { transform: rotate(180deg); }
.acc-body { padding: 0 4px 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.acc-body > :first-child { margin-top: 0; }
.acc-body > :last-child { margin-bottom: 0; }

/* 드롭다운 — GNB 리소스 메뉴와 ui.dropdown() */
.dropdown { position: relative; }
.dropdown-toggle .i-chevron { transition: transform var(--dur) var(--ease); }
.dropdown-toggle[aria-expanded="true"] .i-chevron { transform: rotate(180deg); }
.dropdown-panel { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 25; transform: translateX(-50%); min-width: 320px; padding: 8px;
  border-radius: 14px; background: var(--white); box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
.dropdown-panel[hidden] { display: none; }
.dropdown-group { margin: 0; padding: 10px 14px 4px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--muted-70); }
.dropdown-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.dropdown-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus-visible, .dropdown-item[aria-current] { background: var(--soft); }
.dropdown-item[aria-current] .dropdown-title { color: var(--navy); }
.dropdown-title { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.dropdown-desc { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* 「준비 중」 — 주소가 아직 없는 자리(common.pending · soon_badge). 링크가 아닌 span 이라 포커스·호버가 없다 */
.soon-badge { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--tint); color: var(--navy);
  font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; vertical-align: middle; }
.is-pending { color: var(--muted); cursor: default; text-decoration: none; }
/* 글처럼 흘려 쓴다 — 긴 문구는 낱말 사이에서 줄을 바꾸고, 배지는 마지막 낱말에 붙어 다닌다(common.pending) */
span.is-pending[aria-disabled] { display: inline; color: var(--muted); }  /* 각 자리의 링크 모양(inline-flex·네이비 등)보다 앞선다 */
.soon-tail { white-space: nowrap; }
.soon-tail .soon-badge { margin-left: 2px; }
.dropdown-item.is-pending { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 2px; }
.dropdown-item.is-pending:hover { background: none; }
.dropdown-item.is-pending .dropdown-title { color: var(--muted); }
/* 글 링크 모양 <button> — 도입 문의 주소가 없을 때 같은 자리에서 팝업을 연다(common.contact_link) */
.link-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

/* 모달(<dialog>) — 배경 #000f24 60%, 닫힘 150ms */
.has-modal { overflow: hidden; }
.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-pop); overflow: auto; }
.modal::backdrop { background: var(--backdrop); }
.modal[open] { animation: modal-in var(--dur) var(--ease); }
.modal[open]::backdrop { animation: fade-in var(--dur) var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } }
.modal-body { padding: 40px 32px 32px; }
.modal-body--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.modal-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--tint); color: var(--navy); margin-bottom: 16px; }
.modal-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.4; }
.modal-text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.modal-actions { display: flex; gap: 8px; margin-top: 32px; width: 100%; }
.modal-body--center .modal-actions { justify-content: center; }
.modal-body--center .modal-actions .btn-block { width: auto; min-width: 170px; }
.modal-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.modal-x:hover { background: var(--soft); color: var(--ink); }

/* 맨 위로(C12) */
.to-top { position: fixed; right: max(28px, env(safe-area-inset-right, 0px)); bottom: max(28px, env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: grid; place-items: center; width: 49px; height: 49px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-pop); cursor: pointer; transition: background-color var(--dur) var(--ease); }
.to-top:hover { background: var(--tint); }
.to-top[hidden] { display: none; }

/* 라벨·칩 */
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; }
.kicker { margin: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.kicker-technical { color: var(--blue); }

/* 페이지 머리 — /updates 시안 */
.page-head { padding: 64px 0 24px; }
.page-head h1 { margin: 10px 0 10px; font-size: clamp(32px, 4.4vw, 44px); font-weight: 600; line-height: 1.24; letter-spacing: -0.025em; }
.page-lede { margin: 0; font-size: 18px; color: var(--muted); max-width: 720px; line-height: 1.6; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.pill span { font-size: 12px; color: var(--muted); }
.pill:hover { border-color: var(--ink); }
.pill[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; }
.pill[aria-current="page"] span { color: rgba(255,255,255,.7); }

/* 카드 */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.card-link { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.thumb { aspect-ratio: 1200 / 630; background: var(--soft); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb { border-bottom: 1px solid var(--line); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; min-width: 0; flex: 1; }
.card-title { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; }
.card-sum { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta, .byline-meta { margin: 0; margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--muted-70); display: flex; gap: 6px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }

/* 홈 */
.home-hero { background: linear-gradient(180deg, #00112B 0%, #00204A 100%); color: var(--white); padding: 72px 0 80px; position: relative; overflow: hidden; }
.home-hero::after { content: ""; position: absolute; left: 50%; bottom: -260px; width: 1100px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(20,122,242,.45), rgba(20,122,242,0)); pointer-events: none; }
.home-hero .chip { background: rgba(255,255,255,.08); color: #CFE3FF; border: 1px solid rgba(255,255,255,.18); }
.home-title { margin: 18px 0 0; font-size: clamp(34px, 5.2vw, 56px); font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; color: var(--white); }
.home-title em { font-style: normal; color: #8CC0FF; }
.home-lede { margin: 16px 0 0; font-size: 18px; color: rgba(255,255,255,.75); max-width: 640px; }
.home-body { background: linear-gradient(180deg, var(--soft) 0%, var(--tint) 100%); padding-bottom: 96px; }
.feature { position: relative; z-index: 1; margin-top: -40px; background: var(--white); border-radius: 28px; box-shadow: var(--shadow-panel); overflow: hidden; }
.feature-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; text-decoration: none; }
.feature-link .thumb { height: 100%; aspect-ratio: auto; min-height: 320px; }
.feature-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 48px; min-width: 0; }
.feature-title { margin: 0; font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.feature-sum { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.6; }
.section { padding: 64px 0 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.4; }
.section-head a { font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.series-tile { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.8); border: 1px solid var(--line); text-decoration: none; }
.series-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.tile-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--navy); }
.tile-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile-text strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.tile-text span { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* 시리즈 목록 */
.index-body { background: linear-gradient(180deg, var(--white) 0%, var(--soft) 30%, var(--tint) 100%); padding-bottom: 96px; }
.part { scroll-margin-top: 88px; padding-top: 56px; }
.part-head { margin-bottom: 20px; max-width: 760px; }
.part-head h2 { margin: 6px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.part-intro { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* 글 */
.post-head { padding: 64px 0 36px; }
.post-head-inner { max-width: calc(1032px + var(--gutter-l) + var(--gutter-r)); display: flex; flex-direction: column; gap: 16px; }
.post-head-inner > * { max-width: 820px; }
.post-title { margin: 0; font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; line-height: 1.3; letter-spacing: -0.025em; }
.post-deck { margin: 0; font-size: 19px; line-height: 1.65; color: var(--muted); }
.byline { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.byline-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--tint); }
.byline-mark img { width: 24px; height: auto; }
.byline-name { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.4; }
.byline-meta { margin-top: 0; padding-top: 0; }
.cover { max-width: 1032px; margin: 0 auto 56px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); }
.post-layout { display: grid; grid-template-columns: minmax(0, 720px) 240px; gap: 72px; justify-content: center; align-items: start; }
.prose { min-width: 0; color: #2B2D3A; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.4em 0 .7em; font-size: 26px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; position: relative; color: var(--ink); }
.prose h3 { margin: 2em 0 .5em; font-size: 20px; font-weight: 600; line-height: 1.45; position: relative; color: var(--ink); }
.anchor { position: absolute; left: -1.1em; color: var(--muted-70); text-decoration: none; opacity: 0; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.25em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--muted-70); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose a.ref { font-size: .88em; font-weight: 600; text-decoration: none; padding: .1em .45em; border-radius: 6px; background: var(--tint); color: var(--navy); }
.prose blockquote { margin: 1.6em 0; padding: 14px 20px; border-radius: 12px; background: var(--soft); color: #2B2D3A; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--soft); border: 1px solid var(--line); padding: .1em .38em; border-radius: 6px; }
.prose pre.code { position: relative; margin: 1.6em 0; background: var(--code-bg); color: var(--code-fg); border-radius: 14px; padding: 20px 22px; overflow-x: auto; font-size: 14px; line-height: 1.65; }
.prose pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 8px; right: 14px; font-family: var(--mono); font-size: 11px; color: #7F95B8; text-transform: uppercase; letter-spacing: .06em; }
.prose pre.code code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.table-wrap { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--line); border-radius: 14px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 110px; }
.prose th { background: var(--soft); color: var(--ink); font-weight: 600; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.fig { margin: 2.2em 0; }
.fig-link { display: block; }
.fig img { width: 100%; border-radius: 14px; }
.fig figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.fig-num { font-weight: 600; color: var(--ink); }

.toc { position: sticky; top: 104px; font-size: 14px; line-height: 1.5; max-height: calc(100vh - 128px); overflow-y: auto; padding: 18px; border-radius: 18px; background: var(--soft); }
.toc-h { margin: 0 0 12px; font-weight: 600; font-size: 13px; color: var(--navy); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.toc a { color: var(--muted); text-decoration: none; display: block; }
.toc a:hover, .toc a.is-active { color: var(--ink); }
.toc a.is-active { font-weight: 600; }
.toc-l3 { padding-left: 12px; font-size: 13px; }

.share { display: flex; flex-wrap: wrap; gap: 8px; margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.share-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 500 14px var(--sans); text-decoration: none; cursor: pointer; }
.share-btn:hover { border-color: var(--ink); }
.post-after { background: linear-gradient(180deg, var(--white) 0%, var(--soft) 40%, var(--tint) 100%); padding-top: 24px; padding-bottom: 96px; margin-top: 48px; }
.after-block { padding: 48px 0 0; }
.after-h { margin: 0 0 20px; font-size: 22px; font-weight: 600; }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.8); text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.5; }
.pager a span { font-size: 13px; color: var(--muted); font-weight: 500; }
.pager a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-panel); }
.pager-next { text-align: right; }

/* 푸터 F1–F8 — 시안 2334:1317 · 모바일 2465:1587 */
.site-footer { background: var(--white); }
.site-footer > .wrap { border-top: 1px solid var(--line); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-top: 64px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand img { width: 120px; height: auto; }
.footer-brand p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.5; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; }
.footer-h { margin: 0; font-weight: 700; color: var(--ink); }
.footer-col a, .footer-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1.5; text-decoration: none; cursor: pointer; text-align: left; }
.footer-col a:hover, .footer-link:hover, .footer-col a[aria-current] { color: var(--ink); }
.footer-col a[aria-current] { font-weight: 600; }
.footer-info { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; padding-top: 28px; padding-bottom: 64px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.footer-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.footer-facts div { display: flex; gap: 10px; }
.footer-facts dt { font-weight: 500; color: var(--ink-75); }
.footer-facts dd { margin: 0; color: var(--muted); }
.footer-copy { margin: 0; color: var(--muted-70); }

/* 드로어 — 1024px 아래 GNB 메뉴가 헤더 아래 전체 화면으로 열린다 */
@media (max-width: 1023px) {
  .gnb-row { grid-template-columns: auto 1fr; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  .gnb-end > .lang-seg, .gnb-end > .gnb-contact { display: none; }
  .gnb-burger { display: grid; }
  .gnb-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + var(--gnb-h)); z-index: 19;
    padding: 8px var(--gutter-r) max(32px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); background: #00153A; overflow-y: auto; overscroll-behavior: contain; }
  .gnb[data-open] .gnb-nav { display: block; }
  .gnb-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .gnb-menu > li { border-bottom: 1px solid var(--on-dark-line); }
  .gnb-link { width: 100%; justify-content: space-between; min-height: 56px; padding: 0 4px; font-size: 17px; border-radius: 0; }
  .gnb-link:hover, .gnb-link[aria-expanded="true"] { background: none; }
  .gnb .dropdown-panel { position: static; transform: none; min-width: 0; padding: 0 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .gnb .dropdown-item { padding: 10px 12px; color: var(--white); }
  .gnb .dropdown-item:hover, .gnb .dropdown-item:focus-visible { background: rgba(255, 255, 255, .06); }
  .gnb .dropdown-desc { color: var(--on-dark); }
  .gnb .dropdown-group { padding-left: 12px; color: rgba(255, 255, 255, .55); }
  .gnb .dropdown-group:not(:first-child) { border-top-color: var(--on-dark-line); }
  .gnb .dropdown-item[aria-current] { background: rgba(255, 255, 255, .08); }
  .gnb .dropdown-item[aria-current] .dropdown-title { color: var(--white); }
  .gnb .dropdown-item.is-pending:hover { background: none; }
  .gnb .dropdown-item.is-pending .dropdown-title { color: var(--on-dark); }
  .gnb-drawer-end .lang-seg-item { height: 36px; min-width: 48px; font-size: 13px; }
  .gnb-drawer-end .btn { min-height: 44px; }
  .gnb-drawer-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
}
@media (max-width: 400px) {
  .gnb-logo img { height: 26px; }
  .gnb-end { gap: 8px; }
}

@media (max-width: 1180px) {
  .post-layout { grid-template-columns: minmax(0, 720px); }
  .post-head-inner { max-width: calc(720px + var(--gutter-l) + var(--gutter-r)); }
  .cover { max-width: 720px; }
  .toc { display: none; }
}
@media (max-width: 960px) {
  .grid, .cgrid-3, .cgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-link { grid-template-columns: minmax(0, 1fr); }
  .feature-link .thumb { aspect-ratio: 1200 / 630; min-height: 0; }
  .feature-body { padding: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid, .grid-2, .series-grid, .pager, .cgrid { grid-template-columns: minmax(0, 1fr); }
  .home-hero { padding: 48px 0 64px; }
  .page-head, .post-head { padding-top: 40px; }
  .cover { border-radius: 18px; margin-bottom: 36px; }
  .feature { border-radius: 20px; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 18px; }
  .post-deck { font-size: 17px; }
  .pager-next { text-align: left; }
  .subnav-link { padding: 0 10px; }
  .subnav-link .sl-full { display: none; }
  .subnav-link .sl-short { display: inline; }
  .footer-top { flex-direction: column; gap: 32px; padding-top: 40px; }
  .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-facts { flex-direction: column; gap: 10px; }
  .footer-info { padding-bottom: 40px; }
  .sec { padding: 72px 0; }
  .sec--hero { padding: 56px 0 72px; }
  .sec-head + * { margin-top: 32px; }
  .sec-lede { font-size: 16px; }
  .panel { padding: 24px; border-radius: var(--radius-card); }
  .ccard { padding: 22px; }
  .modal-body { padding: 32px 20px 20px; }
  .to-top { right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::backdrop { transition: none !important; animation: none !important; } }

/* 그림 확대 창 */
.fig-link { cursor: zoom-in; }
.has-lightbox { overflow: hidden; }
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: transparent; color: var(--white); }
.lightbox::backdrop { background: rgba(0, 12, 30, .86); }
.lightbox-body { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)) var(--gutter-r) max(24px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); overflow: auto; touch-action: pinch-zoom; }
.lightbox-body img { display: block; width: min(1200px, 100%); max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 12px; background: var(--white); }
.lightbox-cap { margin: 0; max-width: 820px; text-align: center; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.lightbox-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--white); cursor: pointer; }
.lightbox-close:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 640px) {
  .lightbox-body img { max-height: calc(100dvh - 140px); border-radius: 8px; }
  .lightbox-cap { font-size: 14px; }
}

/* ── /pricing — 시안 2351:2 · FAQ 2412:262 · 모바일 2466:5. 하단 배너는 /download 의 .dl-banner 와 같은 꼴 ── */
/* 배지(✦ 요금제) — /download 히어로도 쓴다 */
.pg-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(140, 192, 255, .32);
  background: rgba(20, 122, 242, .14); color: #CFE3FF; font-size: 13px; font-weight: 600; line-height: 1.4; }
.pg-badge--light { border-color: transparent; background: var(--tint); color: var(--navy); }
.sec-head--center .pg-badge { margin: 0 auto; }
.pg-badge + .sec-title { margin-top: 20px; }
.pr-hero { position: relative; padding: 88px 0 72px; background-color: #00204A;
  background-image: radial-gradient(60% 70% at 50% 0%, rgba(20, 122, 242, .28), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(180deg, #00112B 0%, #00204A 100%);
  background-size: auto, 56px 56px, 56px 56px, auto; }
.pr-hero .sec-head { max-width: 820px; }
.pr-hero h1.sec-title { font-weight: 500; }
.pr-plans-sec { padding: 0 0 72px; background: linear-gradient(180deg, #00204A 0, #00204A 170px, var(--soft) 170px); }
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pr-plan { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--white); min-width: 0; }
.pr-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.pr-plan-tag { font-size: 13px; font-weight: 500; color: var(--muted); }
.pr-badge-rec { padding: 2px 9px; border-radius: 999px; background: var(--blue); color: var(--white); font-size: 12px; font-weight: 600; line-height: 1.5; }
.pr-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 28px 0 0; }
.pr-amount { font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.pr-unit { font-size: 14px; color: var(--muted); }
.pr-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pr-cta { margin-top: 24px; }
.pr-cta .btn { width: 100%; }
.pr-grant { margin: 20px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); text-align: center; font-size: 13px; line-height: 1.5; }
.pr-grant strong { font-weight: 700; }
.pr-grant > span { display: block; }
.pr-grant .pr-grant-note { margin-top: 4px; font-size: 12px; color: var(--muted); }
.pr-list-title { margin: 24px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-feats { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
.pr-feats li { display: flex; gap: 10px; align-items: flex-start; }
.pr-feats .pr-mark { flex: none; margin-top: 1px; }
.pr-mark--y { color: var(--navy); }
.pr-mark--n { color: var(--line-strong); }
.pr-plan--onprem .pr-amount { font-size: 32px; }
.pr-plan--onprem .btn-primary { background: var(--ink); }
.pr-plan--onprem .btn-primary:hover { background: var(--navy-deep); }
.pr-plan--team { border-color: rgba(20, 122, 242, .7); background: linear-gradient(180deg, #001431 0%, #001A3D 100%); color: var(--white);
  box-shadow: 0 0 0 1px rgba(20, 122, 242, .25), 0 24px 60px rgba(20, 122, 242, .22); }
.pr-plan--team .pr-plan-name, .pr-plan--team .pr-amount { color: var(--white); }
.pr-plan--team .pr-plan-tag, .pr-plan--team .pr-unit, .pr-plan--team .pr-note, .pr-plan--team .pr-grant .pr-grant-note { color: var(--on-dark); }
.pr-plan--team .pr-grant { border-color: var(--on-dark-line); }
.pr-plan--team .pr-list-title { color: #8CC0FF; }
.pr-plan--team .pr-mark--y { color: #8CC0FF; }
.pr-plan--team .btn-primary { background: var(--blue); }
.pr-plan--team .btn-primary:hover { background: #3A8FF5; }
.pr-price-note { margin: 24px 0 0; text-align: center; font-size: 13px; color: var(--muted-70); }

.pr-usage-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; align-items: start; }
.pr-usage .sec-title { font-size: clamp(24px, 2.6vw, 30px); }
.pr-usage .sec-lede { font-size: 15px; }
.pr-usage .sec-head strong, .pr-usage-card strong { color: var(--ink); font-weight: 700; }
.pr-usage-grid > .sec-head + * { margin-top: 0; }
.pr-usage-cards { display: flex; flex-direction: column; gap: 14px; }
.pr-usage-card { display: flex; gap: 18px; align-items: center; padding: 26px 24px; border-radius: 18px; background: var(--soft); }
.pr-usage-card h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.pr-usage-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pr-usage-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--navy); }

.pr-compare-title { margin: 0 0 32px; font-size: clamp(24px, 2.6vw, 30px); }
.pr-table-wrap { border: 1px solid var(--line); border-radius: 22px; background: var(--white); padding: 4px 28px 16px; overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.pr-table th, .pr-table td { padding: 12px 8px; text-align: center; vertical-align: middle; font-weight: 400; }
.pr-table thead th { padding: 20px 8px 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.pr-table thead th:first-child { font-size: 13px; font-weight: 500; color: var(--muted); }
.pr-table th[scope="row"], .pr-table thead th:first-child { text-align: left; width: 46%; }
.pr-table thead th:not(:first-child) { width: 18%; }
.pr-group th { padding: 24px 8px 6px; text-align: left; font-size: 13px; font-weight: 700; color: var(--navy); }
.pr-table td .pr-mark { display: inline-block; vertical-align: middle; }
.pr-cell-note { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }

.pr-faq-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
.pr-faq-side .sec-title { margin: 0; font-size: clamp(24px, 2.6vw, 30px); }
.pr-faq-side .sec-lede { font-size: 15px; }
.pr-more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.pr-more:hover { text-decoration: underline; }
.pr-faq .acc-body strong { color: var(--ink); font-weight: 700; }
.pr-banner, .dl-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 96px; padding: 44px 48px; border-radius: var(--radius-panel);
  background: radial-gradient(60% 120% at 85% 50%, rgba(20, 122, 242, .45), transparent 70%), linear-gradient(90deg, #001431 0%, #00204A 100%); color: var(--white); }
.pr-banner h2, .dl-banner h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.4; color: var(--white); }
.pr-banner p, .dl-banner p { margin: 8px 0 0; font-size: 15px; color: var(--on-dark); }
.pr-banner-actions, .dl-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 960px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
  .pr-usage-grid, .pr-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .pr-hero { padding: 48px 0 48px; }
  .pr-hero h1.sec-title { font-size: 32px; }
  .pr-plans-sec { background: linear-gradient(180deg, #00204A 0, #00204A 120px, var(--soft) 120px); padding-bottom: 56px; }
  .pr-plan { padding: 24px 22px; border-radius: var(--radius-card); }
  .pr-usage-card { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 20px; }
  .pr-table-wrap { padding: 0 14px 10px; border-radius: var(--radius-card); }
  .pr-table { font-size: 14px; }
  .pr-table th, .pr-table td { padding: 10px 4px; }
  .pr-table th[scope="row"], .pr-table thead th:first-child { width: auto; }
  .pr-table thead th { font-size: 13px; }
  .pr-cell-note { font-size: 11px; word-break: keep-all; }
  .pr-banner, .dl-banner { margin-top: 64px; padding: 28px 24px; border-radius: var(--radius-card); }
  .pr-banner h2, .dl-banner h2 { font-size: 20px; }
}

/* ── /download — 시안 2515:2(데스크톱 · 모바일 360) ── */
.dl-hero { padding: 88px 0; background: radial-gradient(50% 60% at 70% 100%, rgba(20, 122, 242, .35), transparent 70%), linear-gradient(180deg, #000D22 0%, #00163A 100%); overflow: hidden; }
.dl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 48px; align-items: center; }
.dl-hero .pg-badge + .sec-title { margin-top: 18px; }
.dl-hero h1.sec-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.3; }
.dl-hero .sec-lede { font-size: 16px; }
.dl-actions > span[hidden] { display: none; }
.dl-actions .btn-primary { background: var(--blue); }
.dl-actions .btn-primary:hover { background: #3A8FF5; }
.dl-actions .btn svg { width: 18px; height: 18px; }
.dl-unavailable[disabled] { opacity: .6; cursor: not-allowed; }
.dl-web { display: inline-block; margin-top: 20px; font-size: 14px; color: var(--on-dark); text-decoration: none; }
.dl-web:hover { color: var(--white); text-decoration: underline; }
.dl-web[hidden] { display: none; }

/* 앱 목업(장식) — 글은 언어마다 바뀌고 크기는 목업 폭(cqw)을 따른다 */
.dl-mockup { position: relative; width: 100%; aspect-ratio: 600 / 420; container-type: inline-size; }
.dl-laptop { position: absolute; left: 4%; top: 8%; width: 80%; }
.dl-screen { display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border: 1.4cqw solid #1A2233; border-bottom-width: 2cqw; border-radius: 2.4cqw 2.4cqw 0 0; background: var(--white); }
.dl-chrome { position: relative; display: flex; align-items: center; gap: .9cqw; height: 4cqw; padding: 0 1.6cqw; background: var(--soft); border-bottom: 1px solid var(--line); }
.dl-chrome i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #FF5F57; }
.dl-chrome i:nth-child(2) { background: #FEBC2E; }
.dl-chrome i:nth-child(3) { background: #28C840; }
.dl-chrome span { position: absolute; left: 0; right: 0; text-align: center; font-size: 1.5cqw; line-height: 4cqw; color: var(--muted); }
.dl-app { flex: 1; display: grid; grid-template-columns: 22% 1fr; min-height: 0; }
.dl-side { display: flex; flex-direction: column; gap: 1.3cqw; padding: 1.8cqw 1.4cqw; background: #F7F8FB; border-right: 1px solid var(--line); }
.dl-mk-logo { width: 55%; height: 1.4cqw; border-radius: .6cqw; background: var(--navy); margin-bottom: .8cqw; }
.dl-mk-line { height: .9cqw; border-radius: .5cqw; background: var(--line); }
.dl-mk-line:nth-child(odd) { width: 80%; }
.dl-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2cqw; text-align: center; }
.dl-mk-prompt { margin: 0; font-size: 2cqw; font-weight: 600; line-height: 1.4; color: var(--ink); }
.dl-mk-input { width: 82%; margin-top: 1.8cqw; padding: 1.2cqw 1.6cqw; border: 1px solid var(--line); border-radius: 1.6cqw; box-shadow: 0 .6cqw 1.6cqw rgba(0, 26, 64, .08);
  font-size: 1.5cqw; line-height: 1.4; color: var(--muted); text-align: left; }
.dl-mk-note { margin: 1cqw 0 0; font-size: 1.2cqw; line-height: 1.4; color: var(--muted-70); }
.dl-base { height: 2.2cqw; margin: 0 -7%; border-radius: 0 0 2cqw 2cqw; background: linear-gradient(180deg, #D5DAE6 0%, #9AA3B5 100%); }
.dl-phone { position: absolute; right: 2%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 28%; aspect-ratio: 9 / 18.5;
  padding: 2cqw; border: 1.2cqw solid #1A2233; border-radius: 5cqw; background: var(--white); box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, .35); text-align: center; }
.dl-notch { position: absolute; top: 1.2cqw; left: 50%; width: 38%; height: 2.2cqw; transform: translateX(-50%); border-radius: 2cqw; background: #1A2233; }
.dl-phone .dl-mk-prompt { font-size: 1.9cqw; }
.dl-phone .dl-mk-input { width: 100%; font-size: 1.4cqw; }
.dl-phone .dl-mk-note { font-size: 1.1cqw; }

.dl-wrap { max-width: calc(1200px + var(--gutter-l) + var(--gutter-r)); }
.dl-title { margin: 0 0 32px; text-align: center; font-size: clamp(22px, 2.4vw, 28px); }
.dl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dl-card { position: relative; display: flex; flex-direction: column; padding: 26px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); min-width: 0; }
.dl-card.is-this { border: 2px solid var(--blue); padding: 25px 19px 19px; box-shadow: 0 12px 32px rgba(20, 122, 242, .14); }
.dl-this { position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--navy); font-size: 11px; font-weight: 700; line-height: 1.5; }
.dl-this[hidden] { display: none; }
.dl-os-icon { display: block; height: 28px; color: var(--ink); }
.dl-os-name { margin: 18px 0 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.dl-req { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dl-card-cta { margin-top: auto; padding-top: 20px; }
.dl-card-cta .btn { width: 100%; min-height: 40px; font-size: 14px; }
.dl-card .btn-primary { background: var(--ink); }
.dl-card .btn-primary:hover { background: var(--navy-deep); }
.dl-card.is-this .btn-primary { background: var(--blue); }
.dl-soon[disabled], .dl-card .dl-unavailable[disabled] { cursor: not-allowed; color: var(--muted); background: var(--soft); border-color: var(--line); opacity: 1; }
.dl-alt { display: block; margin-top: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--navy); text-decoration: none; }
.dl-alt:hover { text-decoration: underline; }
.dl-foot { min-height: 3em; margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted-70); }
.dl-qr { display: flex; align-items: center; gap: 24px; margin-top: 16px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
.dl-qr[hidden] { display: none; }
.dl-qr-code { flex: none; width: 112px; }
.dl-qr-code svg { display: block; width: 100%; height: auto; }
.dl-qr h3 { margin: 0; font-size: 16px; font-weight: 600; }
.dl-qr p { margin: 6px 0 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.dl-banner { margin-top: 40px; }

@media (max-width: 1180px) {
  .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .dl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .dl-mockup { max-width: 560px; }
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dl-hero { padding: 48px 0 0; }
  .dl-hero h1.sec-title { font-size: 26px; }
  .dl-actions > span { flex: 1 1 100%; }
  .dl-actions .btn { width: 100%; }
  .dl-grid { gap: 10px; }
  .dl-card { padding: 20px 14px 14px; }
  .dl-card.is-this { padding: 19px 13px 13px; }
  .dl-this { top: 10px; right: 10px; }
  .dl-os-name { margin-top: 14px; font-size: 16px; }
  .dl-req { font-size: 12px; }
  .dl-qr { display: none; }
  .dl-banner { margin-top: 24px; }
}

/* ── /updates — 시안 2352:2 · 모바일 2466:532 ── */
.up-top { padding: 72px 0 40px; }
.up-top h1.sec-title { font-size: clamp(30px, 3.4vw, 40px); }
.up-top .sec-lede { font-size: 17px; }
.up-body { padding: 0 0 112px; }
.up-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.up-aside { position: sticky; top: calc(var(--gnb-h) + 24px); }
.up-aside-title { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.up-vers { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
.up-ver { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.up-ver span + span { font-size: 13px; color: var(--muted-70); }
.up-ver:hover { background: var(--soft); }
.up-ver[aria-current="true"] { background: var(--soft); font-weight: 600; }
.up-manual { margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #F7F9FC; }
.up-manual h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; }
.up-manual p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.up-manual-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.up-manual-link:hover { text-decoration: underline; }
.up-filters { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.up-filters[hidden] { display: none; }
.up-filter { min-height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.up-filter:hover { border-color: var(--ink); }
.up-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 600; }
.up-empty { margin: 32px 0 0; color: var(--muted); font-size: 15px; }
.up-release { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 30px; padding: 36px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--gnb-h) + 16px); }
.up-release[hidden], .up-release.is-collapsed { display: none; }
.up-release-meta h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.up-release-meta p { margin: 6px 0 0; font-size: 13px; color: var(--muted-70); }
.up-latest { padding: 2px 8px; border-radius: 999px; background: var(--blue); color: var(--white); font-size: 11px; font-weight: 700; line-height: 1.5; }
.up-release-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.up-head { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
.up-head[hidden] { display: none; }
.up-head-img { border-radius: 12px; overflow: hidden; background: #EEF4FD; }
.up-head-img img { width: 100%; height: auto; }
.up-head-text { padding: 6px 10px 6px 0; }
.up-head h3, .up-row h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; }
.up-head p { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.up-label { padding: 1px 7px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); font-size: 11px; font-weight: 600; line-height: 1.6; color: var(--ink-75); }
.up-group:empty, .up-group[hidden] { display: none; }
.up-group-title { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--muted); }
.up-rows { margin: 0; padding: 4px 18px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); }
.up-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.up-row:last-child { border-bottom: 0; }
.up-row[hidden] { display: none; }
.up-row h3 { font-size: 15px; }
.up-row p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.up-row-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--tint); color: var(--navy); }
.up-more { margin-top: 32px; }
.up-more[hidden] { display: none; }

@media (max-width: 960px) {
  .up-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .up-aside { position: static; }
  .up-vers { max-height: none; }
}
@media (max-width: 640px) {
  .up-top { padding: 40px 0 24px; }
  .up-body { padding-bottom: 72px; }
  .up-release { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 0; }
  .up-head { grid-template-columns: minmax(0, 1fr); }
  .up-head-text { padding: 2px 4px 6px; }
  .up-rows { padding: 2px 14px; }
}

/* ── /overview ── 시안 KO 2334:2 · EN 2415:2 · 모바일 2465:2, 모션 명세 2393:3. 마크업 web/pages.py _ov_*. 이 절의 색은 시안 값 그대로(어두운 무대·장식용) */
.page-overview { --ov-night: #000F24; --ov-sky: #8CBFFF; --ov-sky-2: #7AB8FF; --ov-dim: #A3AFC4; --ov-dim-2: #7C89A3; --ov-ok: #1F8C54; --ov-ok-bg: #E0F5E8;
  --ov-warn: #BF6B0D; --ov-warn-bg: #FFF2DB; --ov-no: #CC4047; --ov-no-bg: #FCEBEB; --ov-gray: #F4F6F9; --ov-sub: #8E90A0;
  --ov-in: cubic-bezier(.2, .7, .2, 1); --ov-move: cubic-bezier(.16, .8, .2, 1); }
.page-overview main { overflow-x: clip; }
.page-overview .sec { position: relative; }
.page-overview .sec > .wrap { position: relative; }
.ov-ico { width: 16px; height: 16px; flex: none; }
.page-overview .dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.page-overview .dot--ok { color: #1FA666; }

/* 공통: 배지 · 섹션 머리 */
.ov-badge { gap: 6px; }
.ov-badge span { font-size: 12px; font-weight: 700; }
.ov-badge--dark { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--ov-sky-2); }
.ov-head { max-width: 640px; }
.ov-head--center { margin: 0 auto; text-align: center; }
.ov-head .ov-title { margin-top: 20px; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.24; letter-spacing: -0.025em; }
.ov-head .ov-lede { margin-top: 20px; font-size: 17px; line-height: 1.5; }
.ov-title em, .ov-price-title em { font-style: normal; color: var(--navy); }
.ov-lede strong, .ov-row-lede strong { font-weight: 600; color: var(--ink); }
.ov-head--dark .ov-title { color: var(--white); }
.ov-db .ov-title, .ov-jobs-sec .ov-title, .ov-security .ov-title, .ov-faq .ov-title { font-size: clamp(30px, 3vw, 40px); }
.ov-security > .wrap, .ov-features > .wrap, .ov-jobs-sec > .wrap { position: static; }
.ov-security > .wrap > :not(i), .ov-features > .wrap > :not(i), .ov-jobs-sec > .wrap > :not(i) { position: relative; }
.ov-head--dark .ov-title em { color: var(--ov-sky-2); }
.ov-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.ov-row-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-align: right; }
.ov-row-lede--dark { font-size: 17px; color: var(--ov-dim); }
.ov-row-lede--dark strong { color: var(--white); }
.ov-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
.ov-row-acts { display: flex; align-items: center; gap: 20px; margin: 0; }
.ov-link-dk { padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--ov-sky-2); cursor: pointer; }
.ov-link-dk:hover { color: var(--white); }
.ov-arrow-link { font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.ov-arrow-link:hover { text-decoration: underline; }

/* 배경 장식 — 격자 · 점 · 빛 덩어리 */
.ov-grid { position: absolute; pointer-events: none; background-image: linear-gradient(to right, rgba(0, 39, 84, .12) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 39, 84, .12) 1px, transparent 1px); }
.ov-grid--feat { left: 50%; top: 0; width: 1100px; height: 520px; transform: translateX(-50%); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000 20%, transparent 75%); }
.ov-grid--dark { inset: 0; background-size: 48px 48px; background-image: linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px); }
.ov-grid--cta { inset: 0; background-size: 48px 48px; background-image: linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000, transparent 80%); mask-image: radial-gradient(ellipse 50% 100% at 50% 0, #000, transparent 80%); }
.ov-dots { position: absolute; pointer-events: none; width: 144px; height: 108px; background-image: radial-gradient(rgba(255, 255, 255, .55) 1px, transparent 1.4px); background-size: 14px 14px; opacity: .5; }
.ov-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.ov-blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(70px); }

/* 1 히어로 */
.ov-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ov-night); color: var(--white); padding: 84px 0 104px; }
.ov-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ov-glow--a { left: calc(50% - 500px); top: -300px; width: 1000px; height: 520px; background: radial-gradient(closest-side, rgba(20, 122, 242, .42), transparent); animation: ov-drift1 16s ease-in-out infinite alternate; }
.ov-glow--b { left: calc(50% - 310px); top: 560px; width: 620px; height: 320px; background: radial-gradient(closest-side, rgba(20, 122, 242, .3), transparent); animation: ov-drift2 19s ease-in-out infinite alternate; }
.ov-beam { position: absolute; top: -120px; width: 220px; height: 1000px; background: linear-gradient(rgba(255, 255, 255, .1), transparent); filter: blur(20px); opacity: .55; transform-origin: 50% 0; }
.ov-beam--l { left: calc(50% - 300px); transform: rotate(-32deg); animation: ov-beam-on 1.5s linear .1s both, ov-sway-l 11s ease-in-out 1.6s infinite alternate; }
.ov-beam--r { left: calc(50% + 80px); transform: rotate(32deg); animation: ov-beam-on 1.5s linear .25s both, ov-sway-r 13s ease-in-out 1.75s infinite alternate; }
.ov-bloom { position: absolute; left: calc(50% - 550px); top: -4px; width: 1100px; height: 560px; border-radius: 50%; opacity: .45;
  background: radial-gradient(closest-side, rgba(20, 122, 242, .55), rgba(20, 122, 242, .12) 60%, transparent); animation: ov-bloom 2.6s ease-out .7s both, ov-breathe 7s ease-in-out 3.3s infinite alternate; }
.ov-shock { position: absolute; left: calc(50% - 100px); top: 60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(140, 191, 255, .7);
  box-shadow: 0 0 30px rgba(122, 184, 255, .5), inset 0 0 30px rgba(122, 184, 255, .3); opacity: 0; animation: ov-shock 1.8s cubic-bezier(.15, .7, .3, 1) .5s both; }
.ov-shock--2 { animation-delay: .85s; }
.ov-floor { position: absolute; left: 0; right: 0; top: 450px; bottom: 0; overflow: hidden; perspective: 380px; perspective-origin: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 55% 120% at 50% 0, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 55% 120% at 50% 0, #000 30%, transparent 85%); }
.ov-plane { position: absolute; left: -60%; right: -60%; top: 0; height: 2000px; overflow: hidden; transform-origin: 50% 0; transform: rotateX(76deg); animation: ov-unfold 1.8s cubic-bezier(.2, .8, .2, 1) .45s both; }
.ov-plane::before { content: ""; position: absolute; inset: -68px 0 0; background-size: 68px 68px;
  background-image: linear-gradient(to right, rgba(122, 184, 255, .44) 1px, transparent 1px), linear-gradient(to bottom, rgba(122, 184, 255, .44) 1px, transparent 1px);
  animation: ov-flow 2.4s linear 2.25s infinite; }
.ov-horizon { position: absolute; left: calc(50% - 600px); top: 449px; width: 1200px; height: 2px; box-shadow: 0 0 40px 6px rgba(20, 122, 242, .35);
  background: radial-gradient(closest-side, rgba(180, 215, 255, .95), rgba(122, 184, 255, .35) 45%, transparent); animation: ov-fade 1.4s ease .9s both; }
.ov-dots--1 { left: calc(50% - 600px); top: 266px; }
.ov-dots--2 { left: calc(50% + 460px); top: 236px; }
.ov-dots--3 { left: calc(50% - 470px); top: 636px; height: 56px; }
.ov-dots--4 { left: calc(50% + 340px); top: 626px; height: 56px; }
.ov-dots { animation: ov-twinkle 4s ease-in-out infinite alternate; }
.ov-dots--2, .ov-dots--4 { animation-duration: 5.5s; animation-delay: -2s; }
.ov-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(122, 184, 255, .10), transparent 60%); }
.ov-hero:hover .ov-spot { opacity: 1; }

.ov-hero-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.ov-hbadge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .06); font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.ov-hbadge span { font-size: 13px; font-weight: 700; color: var(--ov-sky); }
.ov-h1 { margin: 0; font-size: clamp(40px, 5vw, 72px); font-weight: 400; line-height: 1.22; letter-spacing: -0.025em; color: var(--white); }
.ov-h1 .w { display: inline-block; }
.ov-h1 em { font-style: normal; font-weight: 700; background: linear-gradient(90deg, #80C2FF, #DBEDFF, #80C2FF) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ov-shine 5s linear infinite; }
.ov-hlede { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.ov-hlede strong { font-weight: 600; color: var(--white); }
.ov-hnote { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .5); transition: opacity .4s; }
.ov-hnote.is-hidden { opacity: 0; }

.ov-prompt { position: relative; width: 100%; max-width: 1160px; min-height: 250px; text-align: left; }
.ov-ghost { position: absolute; left: calc(50% - 350px); top: 22px; width: 700px; height: 206px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; background: rgba(255, 255, 255, .03); }
.ov-aura { position: absolute; left: calc(50% - 384px); top: -4px; width: 768px; height: 200px; border-radius: 26px; filter: blur(34px); opacity: .3;
  background: conic-gradient(from 90deg, #147AF2, #7AB8FF 25%, #8B7BFF 50%, #65A3FF 62%, #3ECBFF 75%, #147AF2); transition: opacity 1s, transform 1s var(--ov-move);
  animation: ov-aura 4s ease-in-out 2.6s infinite alternate; }
.ov-aura.is-typing { animation: none; opacity: .55; transform: scale(1.01); }
.ov-aura.is-sent { animation: ov-aura-flash 1.4s var(--ov-in); }
.ov-ibox { position: relative; display: flex; flex-direction: column; gap: 14px; width: 760px; max-width: 100%; margin: 0 auto; padding: 18px; border: 1px solid #147AF2; border-radius: 20px;
  background: rgba(5, 31, 61, .92); box-shadow: 0 20px 70px rgba(0, 39, 84, .35); color: var(--white); text-decoration: none; animation: ov-rise 1.2s var(--ov-move) 1.75s both, ov-ignite 2s ease-out 1.9s both; }
.ov-ibox::before { content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; opacity: .45; pointer-events: none;
  background: conic-gradient(from var(--ov-ang, 0deg), #147AF2, #7AB8FF, #8B7BFF, #3ECBFF, #147AF2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ov-spin 6s linear infinite; }
.ov-ibox:hover { box-shadow: 0 20px 70px rgba(0, 39, 84, .35), 0 0 0 4px rgba(20, 122, 242, .25); }
.ov-ibox:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.ov-ibox-field { display: flex; align-items: flex-start; gap: 10px; min-height: 104px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, .04); font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.ov-spark { flex: none; font-size: 15px; font-weight: 700; color: var(--ov-sky); }
.ov-caret { flex: none; width: 2px; height: 22px; margin-top: 2px; background: #147AF2; animation: ov-blink 1s steps(1) infinite; }
.ov-ibox-bar, .ov-ibox-l, .ov-ibox-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-ibox-r { gap: 12px; }
.ov-round { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .05); font-size: 18px; color: rgba(255, 255, 255, .8); }
.ov-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .8); }
.ov-pill .ov-ico { width: 14px; height: 14px; }
.ov-model { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .5); }
.ov-model b { font-weight: 500; color: rgba(255, 255, 255, .85); }
.ov-ibox-r > .ov-ico { width: 18px; height: 18px; opacity: .75; }
.ov-send { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--white); color: var(--navy-deep); box-shadow: 0 6px 20px rgba(77, 153, 255, .35); }
.ov-send .ov-ico { width: 18px; height: 18px; }
.ov-send.is-ping::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 2px solid rgba(140, 191, 255, .9); animation: ov-ping .7s ease-out; }
.ov-hchips { position: absolute; top: 22px; display: flex; flex-direction: column; gap: 103px; }
.ov-hchips--l { left: 0; align-items: flex-start; }
.ov-hchips--r { right: 0; align-items: flex-end; }
.ov-hchips--l .ov-hchip:last-child { margin-top: 0; }
.ov-hchip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(255, 255, 255, .05);
  font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .82); white-space: nowrap; transition: box-shadow .9s, border-color .9s; animation: ov-fade 1s ease 2.3s both; }
.ov-hchip .ov-ico { color: var(--ov-sky); }
.ov-hchip-sq { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(90deg, #002754, #8CBFFF); }
.ov-hchip.is-lit { border-color: rgba(140, 191, 255, .7); box-shadow: 0 0 24px rgba(20, 122, 242, .55); }
.ov-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: rgba(140, 191, 255, .35); stroke-width: 1; }
.ov-wires path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: ov-draw 1s ease 2.3s forwards; }
.ov-wires circle { fill: #8CBFFF; stroke: none; animation: ov-fade 1s ease 2.3s both; }

/* 히어로 답변 미리보기(H13, 2391:2) */
.ov-hans { position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% - 44px); width: 760px; max-width: 100%; margin: 0 auto; opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0 round 16px);
  transition: opacity .5s, transform .7s var(--ov-move), clip-path .7s var(--ov-move); }
.ov-hans.is-open { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); }
.ov-hans-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(5, 31, 61, .9); }
.ov-hans-text { grid-column: 1 / -1; display: flex; gap: 8px; margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.ov-hans-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.ov-hbar { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.ov-hbar i { width: 100%; height: 0; border-radius: 4px 4px 0 0; background: rgba(140, 191, 255, .35); transition: height .9s var(--ov-move); }
.ov-hbar:first-child i { background: #147AF2; }
.ov-hbar em { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .6); }
.ov-hans-sql { display: block; align-self: start; min-height: 84px; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #BFC4FF; white-space: pre-wrap; word-break: break-word; }
.ov-hans-src { grid-column: 2; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.ov-hans-src b { font-weight: 600; color: var(--ov-sky); }

/* 2 답변 화면 */
.ov-show { position: relative; padding: 0 0 96px; background: linear-gradient(180deg, var(--ov-night) 0, var(--ov-night) 200px, var(--soft) 200px); }
.ov-waves { position: absolute; left: 0; top: 200px; width: 100%; height: 420px; fill: none; stroke: rgba(0, 69, 145, .14); stroke-width: 1; pointer-events: none; }
.ov-stage { position: relative; max-width: 1040px; margin: 0 auto; }
.ov-persp { perspective: 1800px; }
.ov-screen { transform-origin: 50% 0; will-change: transform; }
.ov-float { position: absolute; z-index: 2; border-radius: 16px; background: var(--white); box-shadow: 0 16px 40px rgba(0, 26, 64, .14); animation: ov-bob var(--bob, 7s) ease-in-out infinite alternate; }
.ov-float-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
.ov-float--db { left: -140px; top: 96px; padding: 14px 16px; --bob: 7.5s; }
.ov-float--db ul { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.ov-float--db li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ov-float--db li .ov-ico { width: 26px; height: 26px; padding: 6px; border-radius: 7px; background: #E5F0FF; color: var(--navy); }
.ov-float--db li span { font-size: 12px; color: #9499A3; }
.ov-float--done { left: -164px; top: 500px; padding: 18px 20px; background: #001A33; box-shadow: 0 20px 50px rgba(0, 26, 64, .3); color: rgba(255, 255, 255, .9); --bob: 8.5s; }
.ov-float--done .dot { color: #4DD98C; }
.ov-float--done ol { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: #BFC4FF; }
.ov-float--share { right: -50px; top: 140px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 13px; font-weight: 500; --bob: 9s; }
.ov-float-ar { color: var(--navy); }
.ov-float-ar .ov-ico { width: 14px; height: 14px; stroke-width: 1.6; }

/* 앱 화면 목업(2 답변 화면 · 핵심 기능 탭 1) */
.ov-app { display: flex; min-height: 650px; overflow: hidden; border-radius: 16px; background: var(--white); box-shadow: 0 30px 80px rgba(0, 26, 64, .2); color: #202124; font-size: 10px; line-height: 1.45; text-align: left; }
.ov-app-side { display: flex; flex: none; flex-direction: column; width: 205px; padding: 12px 6px; border-right: 1px solid #E8EAED; background: #F8F9FA; }
.ov-app-brand { display: flex; align-items: center; gap: 9px; margin: 0; padding: 3px 9px 12px; }
.ov-app-brand img { height: 17px; width: auto; }
.ov-app-brand span { font-size: 7px; font-weight: 500; letter-spacing: .08em; color: #80868B; }
.ov-app-nav { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.ov-app-nav li { display: flex; align-items: center; gap: 9px; height: 29px; padding: 0 12px; border-radius: 6px; }
.ov-app-nav .ov-ico { width: 14px; height: 14px; color: #5F6368; }
.ov-app-recent { margin: 0; padding: 14px 12px 6px; font-size: 8.5px; color: #80868B; }
.ov-app-item { display: flex; flex-direction: column; margin: 0; padding: 6px 12px; }
.ov-app-item span { font-size: 8.5px; color: #80868B; }
.ov-app-new { display: grid; place-items: center; height: 29px; margin: auto 0 6px; border-radius: 4px; background: var(--navy-deep); font-weight: 500; color: var(--white); }
.ov-app-user { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 9px 3px; border-top: 1px solid #E8EAED; }
.ov-app-user i { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #5F6368; font-style: normal; font-size: 9px; font-weight: 700; color: var(--white); }
.ov-app-user span { display: flex; flex-direction: column; font-weight: 500; }
.ov-app-user small { font-size: 8.5px; font-weight: 400; color: #80868B; }
.ov-app-main { display: flex; flex: 1; flex-direction: column; align-items: center; min-width: 0; padding: 0 24px; }
.ov-app-thread { display: flex; flex: 1; flex-direction: column; align-items: flex-end; gap: 17px; width: 100%; max-width: 556px; padding-top: 52px; }
.ov-app-q { max-width: 70%; margin: 0; padding: 9px 12px; border-radius: 12px; background: #F1F3F4; font-size: 11px; }
.ov-app-status { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0; font-weight: 500; color: #5E6369; }
.ov-app-dot { width: 6px; height: 6px; border-radius: 50%; background: #1AA666; }
.ov-app-busy { display: none; }
.ov-app-a { width: 100%; margin: 0; font-size: 11.5px; line-height: 1.5; color: #212124; }
.ov-app-a strong { font-weight: 600; }
.ov-app-chart { width: 100%; margin: 0; padding: 16px; border: 1px solid #E8EBED; border-radius: 9px; }
.ov-app-chart figcaption { font-size: 9.5px; font-weight: 600; }
.ov-app-chart ul { display: flex; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.ov-app-chart li { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 7px; height: 128px; text-align: center; font-size: 8.5px; color: #5E6369; }
.ov-bar { display: block; width: 100%; height: 96px; overflow: hidden; border-radius: 4px 4px 0 0; fill: var(--blue-soft); }
.ov-bar rect { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s var(--ov-move); }
.ov-bar--top { fill: #147AF2; }
.ov-app-compose { width: 100%; max-width: 556px; margin-top: 24px; padding: 12px 12px 9px; border: 1px solid #DADCE0; border-radius: 12px; box-shadow: 0 1px 2px rgba(23, 38, 58, .06), 0 7px 10px rgba(23, 38, 58, .06); }
.ov-app-compose p { margin: 0; font-size: 11.5px; color: #9AA0A6; }
.ov-app-compose .ov-app-tools { display: flex; align-items: center; gap: 6px; padding-top: 10px; }
.ov-app-plus { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; background: #F1F3F4; font-size: 16px; color: #3C4043; }
.ov-app-deep { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 1px solid #DADCE0; border-radius: 10px; font-size: 8.5px; color: #3C4043; }
.ov-app-deep .ov-ico { width: 10px; height: 10px; }
.ov-app-note { margin: 10px 0 17px; font-size: 8px; color: #80868B; text-align: center; }

/* 답변 재생(S2-0) — site.js 가 .ov-app--play 에 is-armed 를 붙이면 단계가 숨고, 단계마다 is-on 으로 나타난다 */
.is-armed [data-step], .ov-show.is-armed .ov-float { opacity: 0; transform: scale(.96) translateY(10px); filter: blur(6px); }
.ov-show.is-armed .ov-float { transform: scale(.92) translateY(12px); filter: blur(8px); }
[data-step] { transition: opacity .5s var(--ov-in), transform .6s var(--ov-move), filter .5s var(--ov-in); }
.is-armed [data-step].is-on, .ov-show.is-armed .ov-float.is-on { opacity: 1; transform: none; filter: none; }
.is-armed .ov-app-a[data-step] { opacity: 1; transform: none; filter: none; }
.is-armed .ov-app-a .ov-word { opacity: 0; transition: opacity .35s; }
.is-armed .ov-app-a .ov-word.is-on { opacity: 1; }
.is-armed .ov-app-status.is-busy .ov-app-busy { display: inline; }
.is-armed .ov-app-status.is-busy .ov-app-done, .is-armed .ov-app-status.is-busy b { display: none; }
.is-armed .ov-app-status.is-busy .ov-app-dot { background: #147AF2; animation: ov-blink 1s steps(1) infinite; }
.is-armed .ov-bar rect { transform: scaleY(0); }
.is-armed .ov-app-chart li.is-on .ov-bar rect { transform: none; }
.ov-float--db.is-ping { box-shadow: 0 16px 40px rgba(0, 26, 64, .14), 0 0 0 3px rgba(20, 122, 242, .35); }

/* 3 DB 연결 */
.ov-db::before { content: ""; position: absolute; right: 0; top: 0; width: 760px; height: 520px; pointer-events: none;
  background-image: linear-gradient(to right, rgba(0, 39, 84, .09) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 39, 84, .09) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(225deg, #000 0, transparent 70%); mask-image: linear-gradient(225deg, #000 0, transparent 70%); }
.ov-db-top { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.ov-db-top .ov-head { flex: 0 1 460px; }
.ov-dbs { flex: 0 1 640px; display: flex; flex-direction: column; gap: 12px; }
.ov-dbs-h { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: #9499A3; }
.ov-dbs-h:first-child { margin-top: 0; }
.ov-dbs-h--tmax { color: var(--navy); }
.ov-dbs-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.ov-dbs-logo { display: flex; align-items: center; justify-content: center; width: 205px; padding: 22px 20px; border: 1px solid #E3E5ED; border-radius: 16px; background: var(--white); box-shadow: 0 6px 18px rgba(0, 20, 51, .08); }
.ov-dbs-logo img { width: 150px; height: auto; }
.ov-dbs-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ov-dbs-row li { display: flex; align-items: center; gap: 10px; min-width: 152px; height: 54px; padding: 0 14px; border: 1px solid #E3E5ED; border-radius: 12px; background: var(--white); font-size: 14px; font-weight: 600; }
.ov-dbs-row .ov-ico { width: 28px; height: 28px; padding: 7px; border-radius: 8px; background: #E5F0FF; color: var(--navy); }
.ov-dbs-row .ov-dbs-files { flex: 1 1 280px; border-color: transparent; background: var(--ov-gray); }
.ov-dbs-files .ov-ico { background: var(--white); color: var(--muted); }
.ov-steps { display: flex; align-items: stretch; margin: 48px 0 0; padding: 0; list-style: none; }
.ov-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 20px; background: var(--ov-gray); }
.ov-step-ar { display: grid; place-items: center; flex: none; width: 48px; color: var(--navy); }
.ov-step-ar .ov-ico { width: 22px; height: 22px; }
.ov-step-h { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.5; }
.ov-step-h span { font-size: 14px; font-weight: 600; color: var(--navy); }
.ov-step-h b { font-size: 18px; font-weight: 700; }
.ov-step-h em { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #E5F0FF; font-style: normal; font-size: 12px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.ov-step-t { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ov-step-mock { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 14px; background: var(--white); box-shadow: 0 2px 8px rgba(0, 20, 51, .05); font-size: 12.5px; }
.ov-step-mock ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ov-step-mock li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; border-radius: 8px; background: var(--ov-gray); }
.ov-step-mock li > span:first-child { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ov-step-mock li .ov-ico { width: 22px; height: 22px; padding: 5px; border-radius: 6px; background: #E5F0FF; color: var(--navy); }
.ov-step-mock b { font-weight: 600; }
.ov-step-mock em { font-style: normal; font-size: 12px; color: #9499A3; }
.ov-step-mh { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.ov-step-mh span { margin-right: 4px; color: #9499A3; }
.ov-check { width: 14px; height: 14px; border-radius: 3px; background: #147AF2; box-shadow: inset 0 0 0 3px #147AF2, inset 0 0 0 5px var(--white); }
.ov-st { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ov-st:not(:has(.dot)) { padding: 3px 10px; border-radius: 999px; }
.ov-st--ok { color: var(--ov-ok); }
.ov-st--ok:not(:has(.dot)) { background: var(--ov-ok-bg); }
.ov-st--warn { color: var(--ov-warn); background: var(--ov-warn-bg); }
.ov-st--deny { color: var(--ov-no); background: var(--ov-no-bg); }
.ov-st .dot { width: 6px; height: 6px; }
.ov-step-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font-size: 12px; line-height: 1.5; }
.ov-step:nth-child(3) .ov-step-foot { padding: 8px 10px; border: 1px solid #E3E5ED; border-radius: 8px; }
.ov-step-foot b { font-size: 11px; font-weight: 600; color: var(--navy); }
.ov-step:last-child .ov-step-foot { flex-direction: row; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.lift { transition: transform .5s var(--ov-move); }
.lift:hover { transform: translateY(-4px); }

/* 4 문제와 해결 */
.ov-problem { overflow: hidden; }
.ov-problem::after { content: ""; position: absolute; right: -60px; top: -120px; width: 560px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(20, 122, 242, .14), transparent); }
.ov-problem > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.ov-problem .sec-head + *, .ov-problem .ov-head + * { margin-top: 0; }
.ov-problem .ov-head { flex: 0 1 540px; }
.ov-problem .ov-lede { max-width: 520px; }
.ov-cmp { flex: 0 1 580px; display: flex; flex-direction: column; gap: 16px; }
.ov-cmp-box { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px; border-radius: 20px; background: var(--soft); }
.ov-cmp-box--owl { border: 1px solid rgba(0, 39, 84, .25); background: linear-gradient(90deg, var(--tint), #EDFAFF); }
.ov-cmp-h { display: flex; align-items: center; gap: 10px; margin: 0; }
.ov-cmp-h b { font-size: 17px; font-weight: 700; }
.ov-cmp-box--owl .ov-cmp-h b { color: var(--navy); }
.ov-cmp-h span { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 12px; font-weight: 600; color: var(--muted); }
.ov-cmp-box--owl .ov-cmp-h span { border-color: transparent; background: var(--navy-deep); color: var(--white); }
.ov-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0; }
.ov-flow > span:not(.ov-flow-ar) { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 14px; font-weight: 500; line-height: 1.5; }
.ov-cmp-box--owl .ov-flow > span:not(.ov-flow-ar) { border-color: transparent; background: var(--navy-deep); font-weight: 600; color: var(--white); }
.ov-flow-ar { font-size: 14px; color: rgba(102, 105, 120, .6); }

/* 5 핵심 기능 */
.ov-features { background: linear-gradient(180deg, var(--soft), var(--tint)); overflow: hidden; }
.ov-features::after { content: ""; position: absolute; left: -200px; top: 700px; width: 700px; height: 300px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(20, 122, 242, .12), transparent); }
.ov-feat-tabs { margin-top: 48px; }
.page-overview .tabs--ov .tab-list { gap: 0; border-bottom: 1px solid var(--line-strong); overflow: visible; }
.page-overview .tabs--ov .tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; margin-bottom: -1px; padding: 18px 8px; border-bottom: 3px solid transparent; font-size: 18px; font-weight: 500; color: var(--muted); }
.page-overview .tabs--ov .tab b { font-weight: inherit; }
.page-overview .tabs--ov .tab span { font-size: 14px; font-weight: 400; color: rgba(102, 105, 120, .8); }
.page-overview .tabs--ov .tab[aria-selected="true"] { border-bottom-color: var(--navy-deep); font-weight: 700; color: var(--ink); }
.page-overview .tabs--ov .tab[aria-selected="true"] span { color: var(--muted); }
.ov-prog-on .tabs--ov .tab[aria-selected="true"] { border-bottom-color: rgba(0, 39, 84, .2); }
.ov-prog-on .tabs--ov .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--navy); transform-origin: 0 0; animation: ov-prog var(--ov-auto, 6s) linear both; }
.page-overview .tabs--ov .tab-panel { padding-top: 32px; }
.ov-feat { display: flex; gap: 56px; min-height: 544px; padding: 48px; }
.ov-feat-copy { flex: 0 0 420px; display: flex; flex-direction: column; gap: 20px; }
.ov-feat-copy h3 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.5; }
.ov-feat-copy > p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.ov-feat-copy strong { font-weight: 600; color: var(--ink); }
.ov-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ov-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.ov-checks span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tint); font-size: 12px; font-weight: 700; color: var(--navy); }
.ov-feat-copy > .ov-feat-ex { display: flex; flex-direction: column; gap: 4px; margin: auto 0 0; padding: 14px 18px; border-radius: 12px; background: var(--soft); font-size: 14px; font-weight: 500; line-height: 1.5; }
.ov-feat-ex b { font-size: 12px; font-weight: 700; color: var(--navy); }
.ov-feat-mock { flex: 1; min-width: 0; height: 448px; overflow: hidden; border: 1px solid #E3E5EB; border-radius: 20px; background: #F7FAFC; }
.ov-feat-mock .ov-app { min-height: 100%; height: 100%; border-radius: 0; box-shadow: none; font-size: 11px; }
.ov-feat-mock .ov-app-side { display: none; }
.ov-feat-mock .ov-app-thread { padding-top: 32px; gap: 18px; }
.ov-feat-mock .ov-app-compose, .ov-feat-mock .ov-app-note { display: none; }
.tab-panel:not([hidden]) .ov-feat-copy, .tab-panel:not([hidden]) .ov-feat-mock { animation: ov-panel .6s ease both; }
.ov-mock { display: flex; height: 100%; font-size: 12px; line-height: 1.5; color: var(--ink); }
.ov-mock-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.ov-mock-h .ov-ico { color: var(--navy); }
.ov-mock-h span, .ov-mock-h small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.ov-pb-list { flex: 1; min-width: 0; padding: 22px; background: var(--white); }
.ov-pb-list ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ov-pb-list li { padding: 10px 12px; border: 1px solid #EEF0F4; border-radius: 10px; }
.ov-pb-list li.is-sel { border-color: #CFDBFF; background: #F5F8FF; }
.ov-pb-list li p { display: flex; align-items: center; gap: 8px; margin: 0; }
.ov-pb-list li p + p { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.ov-pb-list li small { margin-left: auto; font-size: 11px; color: var(--ov-sub); }
.ov-pb-list .ov-st { padding: 1px 8px; font-size: 11px; }
.ov-pb-info { flex: 0 0 44%; display: flex; flex-direction: column; gap: 4px; padding: 22px; border-left: 1px solid #E3E5EB; }
.ov-pb-k { margin: 10px 0 0; font-size: 11px; font-weight: 600; color: var(--ov-sub); }
.ov-pb-k:first-child { margin-top: 0; }
.ov-pb-v { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--white); font-weight: 500; }
.ov-pb-v .ov-ico { width: 12px; height: 12px; color: var(--navy); }
.ov-pb-info ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ov-pb-info ol li { padding: 8px 10px; border-radius: 8px; background: var(--white); font-weight: 500; }
.ov-pb-acts { display: flex; gap: 6px; margin: auto 0 0; }
.ov-pb-acts span { flex: 1; padding: 7px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--white); text-align: center; font-weight: 500; }
.ov-pb-acts .is-pri { border-color: var(--navy-deep); background: var(--navy-deep); color: var(--white); }
.ov-mt { flex-direction: column; gap: 12px; padding: 22px; background: var(--white); }
.ov-mt-tabs { display: flex; gap: 16px; margin: 0; border-bottom: 1px solid var(--line); }
.ov-mt-tabs span { padding-bottom: 8px; color: var(--muted); }
.ov-mt-tabs .is-sel { margin-bottom: -1px; border-bottom: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.ov-mt-bar { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.ov-mt-bar b { font-weight: 600; }
.ov-mt-bar span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #CFDBFF; border-radius: 999px; color: var(--navy); font-weight: 500; }
.ov-mt-bar .ov-ico { width: 13px; height: 13px; }
.ov-mt-doc { flex: 1; overflow: hidden; padding: 16px 18px; border-radius: 12px; background: var(--ov-gray); }
.ov-mt-doc p { margin: 0; }
.ov-mt-title { font-size: 14px; font-weight: 700; }
.ov-mt-meta { color: var(--muted); }
.ov-mt-topic { margin-top: 12px !important; font-weight: 700; }
.ov-mt-doc ul { margin: 4px 0 0; padding-left: 16px; }
.ov-mt-concl { margin-top: 6px !important; }
.ov-mt-concl b { margin-right: 6px; color: var(--navy); }
.ov-more { margin-top: 48px; }
.ov-more-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 20px; }
.ov-more-h b { font-size: 20px; font-weight: 600; line-height: 1.4; }
.ov-more-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.ov-more .cgrid { gap: 16px; }
.ov-more .ccard { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 16px; padding: 22px; background: rgba(255, 255, 255, .8); }
.ov-more .ccard-icon { grid-row: 1 / 3; }
.ov-more .ccard-icon .ov-ico { width: 20px; height: 20px; }
.ov-more .ccard-title { font-size: 16px; line-height: 1.5; }
.ov-more .ccard-text { font-size: 14px; line-height: 1.5; }

/* 6 직무별 활용 */
.ov-jobs-sec { overflow: hidden; }
.ov-blob--jobs { left: -160px; top: 420px; width: 620px; height: 420px; background: radial-gradient(closest-side, rgba(20, 122, 242, .1), transparent); }
.ov-jobs { margin-top: 40px; }
.page-overview .ov-jobs .tab { padding: 10px 20px; border-color: var(--line); font-size: 15px; font-weight: 500; color: var(--muted); }
.page-overview .ov-jobs .tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); font-weight: 600; color: var(--white); }
.page-overview .ov-jobs .tab-panel { padding-top: 40px; }
.ov-job { display: flex; gap: 40px; padding: 40px; border-radius: var(--radius-panel); background: var(--soft); }
.ov-job-l { flex: 0 0 380px; display: flex; flex-direction: column; padding: 8px 0; }
.ov-job-role { margin: 0; font-size: 14px; font-weight: 600; color: var(--navy); }
.ov-job-l h3 { margin: 10px 0 0; font-size: 26px; font-weight: 600; line-height: 1.36; letter-spacing: -0.015em; }
.ov-job-t { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ov-job-k { margin: 28px 0 10px; font-size: 13px; font-weight: 600; color: var(--ov-sub); }
.ov-qs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ov-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; font-size: 15px; font-weight: 500;
  line-height: 1.5; color: var(--muted); text-align: left; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ov-q span { flex: 1; }
.ov-q .ov-ico { color: #B3B6C4; }
.ov-q:hover { background: rgba(255, 255, 255, .6); }
.ov-q[aria-pressed="true"] { border-color: var(--line); background: var(--white); box-shadow: 0 10px 15px rgba(0, 26, 64, .05); font-weight: 600; color: var(--ink); }
.ov-q[aria-pressed="true"] .ov-ico { color: var(--navy); }
.ov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ov-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 500; line-height: 1.5; }
.ov-chips .ov-ico { width: 14px; height: 14px; }
.ov-chips--line li { border: 1px solid var(--line); background: var(--white); }
.ov-job-start { margin-top: auto; padding-top: 28px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.ov-job-start:hover { text-decoration: underline; }
.ov-job-r { flex: 1; min-width: 0; }
.ov-ans { display: flex; flex-direction: column; gap: 20px; min-height: 621px; height: 100%; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 10px 15px rgba(0, 26, 64, .06); }
.ov-ans:not([hidden]) { animation: ov-panel .45s ease both; }
.ov-ans[hidden], .ov-hbar[hidden] { display: none; }
.ov-ans-q { align-self: flex-end; max-width: 80%; margin: 0; padding: 12px 18px; border-radius: 16px 4px 16px 16px; background: #EEF3FB; font-size: 15px; font-weight: 500; line-height: 1.5; }
.ov-ans-row { display: flex; flex: 1; gap: 12px; }
.ov-ans-mark { flex: none; width: 28px; height: 28px; }
.ov-ans-body { display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; padding-top: 2px; }
.ov-ans-a { margin: 0; font-size: 15px; line-height: 1.6; }
.ov-ans-a b { font-weight: 700; }
.ov-vis { display: flex; flex: 1; flex-direction: column; gap: 14px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 14px; }
.ov-vis figcaption { font-size: 13px; font-weight: 600; line-height: 1.5; }
.ov-hbars { display: grid; flex: 1; align-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ov-hbars li { display: grid; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.ov-hbars svg { display: block; width: 100%; height: 20px; fill: #CFDBFF; }
.ov-hbars svg.is-top { fill: #147AF2; }
.ov-hbars b { font-weight: 500; }
.ov-hbars li:first-child b { font-weight: 600; color: var(--ink); }
.ov-tbl { overflow-x: auto; }
.ov-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.ov-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ov-tbl td { padding: 9px 10px; border-bottom: 1px solid #F0F1F5; white-space: nowrap; }
.ov-tbl tr:last-child td { border-bottom: 0; }
.ov-tbl td:first-child { font-weight: 600; }
.ov-plan { margin: 0; padding: 14px 16px; overflow-x: auto; border-radius: 10px; background: var(--code-bg); font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--code-fg); }
.ov-plan-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tint); font-size: 13px; line-height: 1.55; color: var(--navy); }
.ov-lines { width: 100%; height: auto; }
.ov-lines polyline { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.ov-lines text { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.ov-ln--0 { stroke: var(--navy-deep); fill: var(--navy-deep); }
.ov-ln--1 { stroke: #8EA6D9; fill: #8EA6D9; }
.ov-ln--2 { stroke: #147AF2; fill: #147AF2; }
polyline.ov-ln--0, polyline.ov-ln--1, polyline.ov-ln--2 { fill: none; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.ov-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ov-legend i { width: 10px; height: 3px; border-radius: 2px; background: currentColor; }
.ov-legend i.ov-ln--0 { background: var(--navy-deep); }
.ov-legend i.ov-ln--1 { background: #8EA6D9; }
.ov-legend i.ov-ln--2 { background: #147AF2; }
.ov-legend b { font-weight: 600; color: var(--ink); }
.ov-ans-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.ov-ans-follow p { margin: 0 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ov-sub); }
.ov-ans-follow ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ov-ans-follow li { padding: 7px 14px; border: 1px solid #CFDBFF; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--navy); }

/* 7 보안과 도입 방식 */
.ov-security { overflow: hidden; background: var(--ov-night); color: var(--white); }
.ov-glow--sec { right: -100px; top: -220px; width: 760px; height: 420px; background: radial-gradient(closest-side, rgba(20, 122, 242, .35), transparent); }
.ov-flowbox { margin-top: 56px; padding: 32px 32px 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: rgba(255, 255, 255, .04); }
.ov-flowbox-h { margin: 0 0 20px; font-size: 16px; font-weight: 600; }
.ov-flowtrack { position: relative; }
.ov-comet { position: absolute; left: 0; top: 50%; width: 160px; height: 2px; background: linear-gradient(90deg, transparent, rgba(122, 184, 255, .9), var(--white));
  box-shadow: 0 0 18px 2px rgba(122, 184, 255, .6); animation: ov-comet 4.2s cubic-bezier(.45, 0, .25, 1) infinite; }
.ov-flowsteps { position: relative; display: flex; justify-content: space-between; gap: 30px; margin: 0; padding: 0; list-style: none; }
.ov-flowstep { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
  background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), #0A192D; }
.ov-flowstep.is-key { border-color: rgba(122, 184, 255, .6); background: linear-gradient(rgba(20, 122, 242, .16), rgba(20, 122, 242, .16)), #0A192D; }
.ov-flowstep:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ov-dim-2); animation: ov-arw 4.2s ease-in-out infinite; }
.ov-flowstep:nth-child(2)::after { animation-delay: .85s; }
.ov-flowstep:nth-child(3)::after { animation-delay: 1.7s; }
.ov-flowstep:nth-child(4)::after { animation-delay: 2.55s; }
.ov-flowstep p { display: flex; align-items: center; gap: 10px; margin: 0; line-height: 1.5; }
.ov-flowstep p span { font-size: 12px; font-weight: 600; color: var(--ov-dim-2); }
.ov-flowstep p b { font-size: 16px; font-weight: 600; }
.ov-flowstep-t { display: block !important; font-size: 13px; color: var(--ov-dim); }
.ov-dk-ic { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--ov-sky-2); }
.ov-dk-ic .ov-ico { width: 18px; height: 18px; }
.ov-dk-ic--lg { width: 44px; height: 44px; }
.ov-dk-ic--lg .ov-ico { width: 22px; height: 22px; }
.ov-audit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 20px 0 0; padding: 12px 16px; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.5; }
.ov-audit .ov-ico { color: var(--ov-sky-2); }
.ov-audit b { font-weight: 600; }
.ov-audit span { color: var(--ov-dim); }
.ov-sec-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
.ov-sec-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; background: rgba(255, 255, 255, .04); }
.ov-sec-card h3 { margin: 0; color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.5; }
.ov-sec-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ov-dim); }
.ov-sec-card strong { font-weight: 600; color: var(--white); }
.glow::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgba(122, 184, 255, .16), transparent 65%); }
.glow:hover::after { opacity: 1; }
.ov-compare { display: flex; gap: 64px; margin-top: 56px; padding: 36px 40px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; background: rgba(255, 255, 255, .04); }
.ov-compare-l { flex: 0 0 300px; padding-top: 4px; }
.ov-compare-l h3 { margin: 0; color: var(--white); font-size: 22px; font-weight: 600; line-height: 1.5; }
.ov-compare-l p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ov-dim); }
.ov-compare-t { flex: 1; min-width: 0; overflow-x: auto; }
.ov-compare table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.ov-compare th, .ov-compare td { padding: 13px 12px 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; vertical-align: top; }
.ov-compare tr:last-child > * { border-bottom: 0; }
.ov-compare thead th { font-weight: 600; color: var(--ov-dim); }
.ov-compare thead th:nth-child(2) { color: var(--ov-sky-2); }
.ov-compare tbody th { width: 140px; font-weight: 400; color: var(--ov-dim-2); }
.ov-compare td { font-weight: 500; }

/* 8 요금제 요약 */
.ov-price { position: relative; overflow: hidden; padding: 80px 0; border-top: 1px solid #E0E8F5; border-bottom: 1px solid #E0E8F5; background: linear-gradient(90deg, #F5F9FF, #DBEBFF); }
.ov-price-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ov-price-title { margin: 14px 0 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; line-height: 1.5; }
.ov-plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ov-plans li { display: inline-flex; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; line-height: 1.5; color: var(--muted); }
.ov-plans b { font-weight: 700; color: var(--ink); }
.ov-price-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ov-price-acts .btn-primary { box-shadow: 0 8px 24px rgba(0, 39, 84, .4); }
.ov-rings { position: absolute; left: calc(50% + 80px); top: -287px; width: 1000px; height: 1000px; pointer-events: none; }
.ov-rings::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(0, 69, 145, .12); border-radius: 50%; }
.ov-rings i { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border: 1px solid rgba(0, 69, 145, .18); border-radius: 50%; animation: ov-ripple 6s cubic-bezier(.2, .6, .3, 1) infinite; }
.ov-rings i + i { animation-delay: 3s; }

/* 9 FAQ */
.ov-faq { display: flex; gap: 80px; }
.ov-faq > .ov-head { flex: 0 0 360px; }
.ov-faq > .ov-head .ov-lede { font-size: 16px; }
.ov-faq > .ov-head .ov-arrow-link { display: inline-block; margin-top: 20px; }
.ov-faq > div:last-child { flex: 1; min-width: 0; }
.page-overview .ov-faq .accordion { border-top: 0; }
.page-overview .ov-faq .acc-item { border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease); }
.page-overview .ov-faq .acc-item[open] { border-bottom-color: transparent; border-radius: 16px; background: var(--soft); }
.page-overview .ov-faq .acc-head { padding: 24px; font-size: 18px; }
.page-overview .ov-faq .acc-head .i-chevron { display: none; }
.page-overview .ov-faq .acc-head::after { content: "+"; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); font-size: 18px; font-weight: 500;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), background var(--dur) var(--ease); }
.page-overview .ov-faq .acc-item[open] > .acc-head::after { content: "−"; background: var(--navy-deep); color: var(--white); transform: rotate(180deg); }
.page-overview .ov-faq .acc-body { padding: 0 24px 24px; font-size: 16px; line-height: 1.5; }
.page-overview .ov-faq .acc-body strong { font-weight: 600; color: var(--ink); }
.page-overview .ov-faq .acc-item[open] > .acc-body { animation: ov-faq .45s cubic-bezier(.2, .8, .2, 1); }

/* 10 하단 CTA */
.ov-cta-sec { padding-top: 0; }
.ov-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 96px 80px; border-radius: 32px; background: var(--ov-night); color: var(--white); text-align: center; }
.ov-cta > i { z-index: -1; }
.ov-dots--c1 { left: 60px; top: 40px; }
.ov-dots--c2 { right: 56px; bottom: 42px; }
.ov-glow--cta { left: calc(50% - 400px); top: -220px; width: 800px; height: 380px; background: radial-gradient(closest-side, rgba(20, 122, 242, .45), transparent); }
.ov-cta-title { margin: 0; color: var(--white); font-size: clamp(30px, 3.3vw, 44px); font-weight: 600; line-height: 1.24; letter-spacing: -0.025em; }
.ov-cta-title em { font-style: normal; color: var(--ov-sky); }
.ov-cta-lede { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.ov-cta-box { position: relative; display: flex; align-items: center; gap: 8px; width: 720px; max-width: 100%; padding: 10px 10px 10px 24px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px;
  background: rgba(255, 255, 255, .08); box-shadow: 0 16px 50px rgba(0, 39, 84, .35); color: rgba(255, 255, 255, .75); text-decoration: none; text-align: left; }
.ov-cta-box:hover { background: rgba(255, 255, 255, .12); }
.ov-ring2 { position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ov-ang, 0deg), transparent 0 65%, rgba(140, 191, 255, .95) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ov-spin 5s linear infinite; }
.ov-cta-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.ov-cta-box .ov-caret { height: 20px; margin: 0 auto 0 0; }
.ov-cta-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 14px 22px; border-radius: 12px; background: var(--white); box-shadow: 0 8px 28px rgba(77, 153, 255, .3); font-size: 15px; font-weight: 600; color: var(--navy-deep); }
.ov-cta-btn .ov-ico { width: 15px; height: 15px; }
.ov-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 0; }
.ov-cta-links a, .ov-cta-links .link-btn { font-size: 15px; font-weight: 500; color: #B2D4FF; text-decoration: none; }
.ov-cta-links a:hover, .ov-cta-links .link-btn:hover { color: var(--white); text-decoration: underline; }

/* 스크롤 등장(G1 · G2) — site.js 가 동작 줄이기 설정이 꺼져 있을 때 html.ov-motion 을 붙인다 */
.ov-motion .rv { opacity: 0; transform: translateY(36px); filter: blur(14px);
  transition: opacity 1s var(--ov-in), transform 1.2s var(--ov-move), filter 1s var(--ov-in); transition-delay: var(--rv-d, 0s); }
.ov-motion .rv.ttl { clip-path: inset(0 0 100% 0); }
.ov-motion .rv.vis { opacity: 1; transform: none; filter: none; }
.ov-motion .rv.ttl.vis { clip-path: inset(0 0 -20% 0); transition: opacity 1s var(--ov-in), transform 1.2s var(--ov-move), filter 1s var(--ov-in), clip-path 1.1s var(--ov-in); transition-delay: var(--rv-d, 0s); }
.ov-motion .ov-h1 .w { animation: ov-land 1.8s ease-out both; animation-delay: var(--w-d, .95s); }
.ov-motion .ov-hbadge, .ov-motion .ov-hlede { animation: ov-in 1.1s var(--ov-move) both; }
.ov-motion .ov-hbadge { animation-delay: .85s; }
.ov-motion .ov-hlede { animation-delay: 1.65s; }
.ov-motion .ov-hnote { animation: ov-fade 1s ease 2.6s both; }
.is-idle *, .is-idle::before, .is-idle::after { animation-play-state: paused !important; }

/* 일시정지 버튼(WCAG 2.2.2) — 히어로 질문 순환 · 핵심 기능 · 직무 탭 자동 전환이 같은 모양을 쓴다. 누르면 aria-pressed=true 로 멈춘다 */
.ov-pause { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--muted); cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ov-pause[hidden] { display: none; }
.ov-pause:hover { border-color: var(--ink); color: var(--ink); }
.ov-pause:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ov-pause-i { width: 12px; height: 12px; fill: currentColor; }
.ov-pause-i--play, .ov-pause[aria-pressed="true"] .ov-pause-i--pause { display: none; }
.ov-pause[aria-pressed="true"] .ov-pause-i--play { display: block; }
.ov-pause--dark { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); }
.ov-pause--dark:hover { border-color: rgba(255, 255, 255, .6); color: var(--white); }
.ov-pause--dark:focus-visible { outline-color: var(--white); }
.ov-hero-body > .ov-pause { position: absolute; right: 0; bottom: -64px; }
.ov-feat-tabs, .ov-jobs { position: relative; }
.ov-feat-tabs > .ov-pause { position: absolute; right: 0; top: -44px; }
.ov-jobs > .ov-pause { position: absolute; right: 0; top: 6px; }

/* 동작 줄이기(prefers-reduced-motion: reduce) — 「줄이되 없애지 않는다」. site.js 가 html.ov-motion-reduced 를 붙이면
   등장 · 답변 재생 단계가 투명도만 짧게 바뀐다(이동 · 흐림 · 확대 · 가림막 · 반복 없음). 전역 규칙(애니메이션 · 전환 끔)을
   이 페이지의 투명도 전환에서만 이긴다 — 다른 페이지의 동작 줄이기는 그대로다. */
.ov-motion-reduced .rv { opacity: 0; transform: none; filter: none; clip-path: none; transition: opacity .3s ease !important; }
.ov-motion-reduced .rv.vis { opacity: 1; }
.ov-motion-reduced .is-armed [data-step], .ov-motion-reduced .ov-show.is-armed .ov-float { transform: none; filter: none; transition: opacity .3s ease !important; }
.ov-motion-reduced .is-armed [data-step].is-on, .ov-motion-reduced .ov-show.is-armed .ov-float.is-on { opacity: 1; }
.ov-motion-reduced .is-armed .ov-app-a .ov-word { transition: opacity .3s ease !important; }
.ov-motion-reduced .is-armed .ov-bar rect { transform: none; }
.ov-motion-reduced .ov-spot { display: none; }

@property --ov-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ov-spin { to { --ov-ang: 360deg; } }
@keyframes ov-drift1 { to { transform: translate(90px, 40px) scale(1.08); } }
@keyframes ov-drift2 { to { transform: translate(-110px, -30px) scale(1.12); } }
@keyframes ov-twinkle { to { opacity: .12; } }
@keyframes ov-beam-on { 0% { opacity: 0; } 12% { opacity: .95; } 20% { opacity: .1; } 32% { opacity: .85; } 40% { opacity: .25; } 100% { opacity: .55; } }
@keyframes ov-sway-l { from { transform: rotate(-35deg); opacity: .45; } to { transform: rotate(-28deg); opacity: .7; } }
@keyframes ov-sway-r { from { transform: rotate(35deg); opacity: .45; } to { transform: rotate(28deg); opacity: .7; } }
@keyframes ov-bloom { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; transform: scale(1.05); } 100% { opacity: .45; transform: none; } }
@keyframes ov-breathe { from { opacity: .45; } to { opacity: .7; } }
@keyframes ov-shock { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
@keyframes ov-unfold { from { transform: rotateX(90deg); opacity: 0; } }
@keyframes ov-flow { to { transform: translateY(68px); } }
@keyframes ov-fade { from { opacity: 0; } }
@keyframes ov-shine { to { background-position: -200% 0; } }
@keyframes ov-land { from { opacity: 0; transform: translateY(70px) scale(.9); filter: blur(26px); } 45% { text-shadow: 0 0 36px rgba(140, 191, 255, .95), 0 0 80px rgba(20, 122, 242, .6); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ov-in { from { opacity: 0; transform: translateY(36px); filter: blur(14px); } }
@keyframes ov-rise { from { opacity: 0; transform: translateY(70px) scale(.94); filter: blur(14px); } }
@keyframes ov-ignite { 30% { box-shadow: 0 0 0 1px rgba(140, 191, 255, .6), 0 0 90px rgba(20, 122, 242, .7); } }
@keyframes ov-aura { from { opacity: .22; } to { opacity: .36; } }
@keyframes ov-aura-flash { 20% { opacity: .8; transform: scale(1.04); filter: blur(34px) brightness(1.3); } 100% { opacity: .3; } }
@keyframes ov-blink { 50% { opacity: 0; } }
@keyframes ov-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes ov-draw { to { stroke-dashoffset: 0; } }
@keyframes ov-bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
@keyframes ov-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ov-panel { from { opacity: 0; transform: scale(.985) translateY(10px); filter: blur(6px); } }
@keyframes ov-comet { 0% { transform: translateX(0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translateX(var(--ov-track, 974px)); opacity: 0; } }
@keyframes ov-arw { 0%, 100% { opacity: .5; transform: translateY(-50%); } 10% { opacity: 1; transform: translate(3px, -50%); } 25% { opacity: .5; transform: translateY(-50%); } }
@keyframes ov-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(3.7); opacity: 0; } }
@keyframes ov-faq { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 1180px) {
  .ov-float--db, .ov-float--done { left: -24px; }
  .ov-float--share { right: -24px; }
  .ov-hchips { display: none; }
  .ov-wires { display: none; }
  .ov-feat-copy { flex-basis: 360px; }
  .ov-job-l { flex-basis: 320px; }
}
@media (max-width: 960px) {
  .ov-float { display: none; }
  .ov-app { min-height: 560px; }
  .ov-app-side { display: none; }
  .ov-db-top, .ov-problem > .wrap, .ov-faq, .ov-compare { flex-direction: column; align-items: stretch; gap: 40px; }
  .ov-db-top .ov-head, .ov-dbs, .ov-problem .ov-head, .ov-cmp, .ov-faq > .ov-head, .ov-compare-l { flex: none; }
  .ov-steps { flex-direction: column; }
  .ov-step-ar { width: auto; height: 40px; transform: rotate(90deg); }
  .ov-feat { flex-direction: column; gap: 32px; padding: 32px; }
  .ov-feat-copy { flex: none; }
  .ov-feat-copy > .ov-feat-ex { margin-top: 0; }
  .ov-feat-mock { flex: none; height: 400px; }
  .ov-row-head { flex-direction: column; align-items: flex-start; }
  .ov-row-lede { text-align: left; }
  .ov-row-side { align-items: flex-start; }
  .ov-job { flex-direction: column; padding: 28px; }
  .ov-job-l { flex: none; }
  .ov-ans { min-height: 0; }
  .ov-flowsteps { flex-direction: column; gap: 26px; }
  .ov-flowstep:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; transform: translateX(-50%); animation: none; }
  .ov-comet { display: none; }
  .ov-sec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-price-in { flex-direction: column; align-items: flex-start; }
  .ov-rings { left: 40%; }
}
@media (max-width: 640px) {
  .ov-hero { padding: 48px 0 64px; }
  .ov-hero-body { gap: 20px; }
  .ov-hbadge { font-size: 13px; padding: 6px 12px; }
  .ov-h1 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -0.03em; }
  .ov-hlede { font-size: 16px; }
  .ov-floor { top: 470px; }
  .ov-horizon { top: 469px; }
  .ov-ghost, .ov-dots--1, .ov-dots--2 { display: none; }
  .ov-aura { left: 0; width: 100%; }
  .ov-ibox { padding: 12px; gap: 10px; }
  .ov-ibox-field { min-height: 88px; padding: 14px; font-size: 15px; }
  .ov-ibox-bar { flex-wrap: wrap; row-gap: 10px; }
  .ov-ibox-r { flex: 1 0 100%; justify-content: flex-start; }
  .ov-ibox-r .ov-model { margin-right: auto; }
  .ov-prompt { min-height: 0; }
  .ov-hans { display: none; }
  .ov-hero-body > .ov-pause { bottom: -48px; }
  .ov-feat-tabs > .ov-pause, .ov-jobs > .ov-pause { top: -42px; }
  .ov-show { padding-bottom: 72px; background: linear-gradient(180deg, var(--ov-night) 0, var(--ov-night) 120px, var(--soft) 120px); }
  .ov-waves { top: 120px; }
  .ov-app { min-height: 0; font-size: 10.5px; }
  .ov-app-main { padding: 0 14px; }
  .ov-app-thread { padding-top: 24px; gap: 14px; }
  .ov-app-chart li { height: 110px; }
  .ov-bar { height: 78px; }
  .ov-app-chart ul { gap: 6px; }
  .ov-head .ov-title { margin-top: 16px; }
  .ov-head .ov-lede { font-size: 16px; }
  .ov-head .ov-title, .ov-db .ov-title, .ov-jobs-sec .ov-title, .ov-security .ov-title, .ov-faq .ov-title, .ov-cta-title { font-size: 26px; line-height: 1.3; }
  .ov-dbs-row li { flex: 1 1 calc(50% - 5px); min-width: 0; height: 46px; gap: 8px; padding: 0 12px; font-size: 13px; }
  .ov-dbs-row .ov-ico { width: 24px; height: 24px; padding: 5px; }
  .ov-dbs-row .ov-dbs-files { flex-basis: 100%; height: auto; min-height: 46px; }
  .ov-dbs-logo { flex: 1 1 0; width: auto; min-width: 0; padding: 14px 16px; }
  .ov-dbs-logo img { width: 100%; max-width: 130px; }
  .ov-flow { flex-direction: column; }
  .ov-flow-ar { transform: rotate(90deg); }
  .page-overview .tabs--ov .tab span { display: none; }
  .ov-more .ccard { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 6px; padding: 16px; }
  .ov-more .ccard-icon { grid-row: auto; width: 36px; height: 36px; margin-bottom: 4px; }
  .page-overview .ov-jobs .tab-list { gap: 6px; }
  .page-overview .ov-jobs .tab { padding: 7px 11px; font-size: 13px; }
  .page-overview .ov-jobs .tab-panel { padding-top: 24px; }
  .ov-job { display: flex; gap: 0; }
  .ov-job-l { display: contents; }
  .ov-job-r { order: 1; margin-top: 24px; }
  .ov-job-start { order: 2; padding-top: 20px; text-align: center; }
  .ov-flowsteps { gap: 22px; }
  .ov-flowstep { gap: 8px; padding: 14px 16px; }
  .ov-flowstep:not(:last-child)::after { bottom: -21px; }
  .ov-flowstep .ov-dk-ic { width: 32px; height: 32px; border-radius: 9px; }
  .ov-flowstep-t br { display: none; }
  .ov-sec-card { gap: 10px; padding: 20px; }
  .ov-sec-card h3 { font-size: 17px; }
  .page-overview .ov-faq .acc-head { padding: 18px 16px; font-size: 16px; }
  .page-overview .ov-faq .acc-body { padding: 0 16px 18px; font-size: 15px; }
  .ov-feat { padding: 22px; }
  .ov-feat-copy h3 { font-size: 24px; }
  .ov-feat-mock { height: 360px; }
  .page-overview .tabs--ov .tab { padding: 14px 4px; font-size: 15px; }
  .page-overview .tabs--ov .tab span { font-size: 12px; }
  .ov-pb-info { display: none; }
  .ov-job { padding: 20px 16px; border-radius: 20px; }
  .ov-job-l h3 { font-size: 22px; }
  .ov-ans { padding: 18px; }
  .ov-ans-mark { display: none; }
  .ov-hbars li { grid-template-columns: minmax(44px, max-content) minmax(0, 1fr) 34px; gap: 8px; }
  .ov-sec-cards { grid-template-columns: minmax(0, 1fr); }
  .ov-flowbox { padding: 22px 18px; }
  .ov-compare { padding: 24px 20px; }
  .ov-compare tbody th { width: 84px; }
  .ov-price { padding: 64px 0; }
  .ov-cta { padding: 56px 20px; border-radius: 24px; }
  .ov-cta-lede { font-size: 16px; }
  .ov-cta-box { flex-wrap: wrap; gap: 12px 8px; padding: 16px; }
  .ov-cta-q { flex: 1; font-size: 15px; white-space: normal; }
  .ov-cta-btn { flex-basis: 100%; justify-content: center; padding: 12px 14px; }
  .ov-cta-box .ov-caret { display: none; }
}

/* 휴대폰 — 큰 blur · 글로우를 여러 겹 겹친 등장과 반복 섬광은 작은 화면에서 깜빡임으로 보인다(모바일 GPU 가 매 프레임
   다시 그리지 못해 끊기기도 한다). 등장은 위로 살짝 떠오르는 페이드 하나로, 반복 섬광 · 회전 테두리 · 반짝이는 점은 멈춘다.
   타이핑 · 커서 · 질문 순환과 데스크톱 연출은 그대로다. */
@keyframes ov-up { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 640px) {
  .ov-beam--l, .ov-beam--r { animation: ov-fade 1s ease .1s both; }
  .ov-bloom { animation: ov-fade 1.2s ease .3s both; }
  .ov-shock { display: none; }
  .ov-dots { animation: none; }
  .ov-motion .ov-h1 .w { animation: ov-up .8s var(--ov-move) both; animation-delay: calc(var(--w-d, .95s) - .5s); }
  .ov-motion .ov-hbadge, .ov-motion .ov-hlede { animation-name: ov-up; animation-duration: .8s; }
  .ov-motion .ov-hbadge { animation-delay: .2s; }
  .ov-motion .ov-hlede { animation-delay: .9s; }
  .ov-motion .ov-hnote { animation-delay: 1.6s; }
  .ov-ibox { animation: ov-up .8s var(--ov-move) 1.1s both; }
  .ov-ibox::before { animation: none; }
  .ov-aura, .ov-aura.is-typing, .ov-aura.is-sent { animation: none; transition: none; transform: none; opacity: .3; }
  .ov-send.is-ping::after { display: none; }
  .ov-motion .rv { filter: none; transform: translateY(16px); }
  .ov-motion .rv.vis { transform: none; }
  .is-armed [data-step], .ov-show.is-armed .ov-float { filter: none; }
}