/* StartView additions on top of the cloned design system.
   Keeps the original look (zinc neutrals, hairlines, no shadows, articulat/Inter);
   only adds Korean glyph coverage and the few layouts the source CSS was purged of. */

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

/* Latin stays in the original families; Hangul falls through to Pretendard per-glyph. */
:root {
  --font-inter: "Inter", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-heading-family-fallback: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
html { word-break: keep-all; overflow-x: clip; }
body { overflow-x: clip; }
.font-heading { font-family: "articulat-cf", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; }
:lang(ko) .font-heading { font-weight: 400; }

/* ---- layout helpers (source CSS is JIT-purged, so these are named, not utility) ---- */
.sv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 40rem) { .sv-grid-2, .sv-grid-3, .sv-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .sv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-grid-2 { gap: 2rem; }
}
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .sv-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; } .sv-split.sv-split--rev > :first-child { order: 2; } }

/* Section titles (Korean headings need a slightly smaller step than the English originals). */
.sv-h2 { font-size: 2rem; line-height: 1.1; }
@media (min-width: 48rem) { .sv-h2 { font-size: 2.5rem; } }
@media (min-width: 80rem) { .sv-h2 { font-size: 3.25rem; } }
.sv-h1 { font-size: 2.125rem; line-height: 1.1; }
@media (min-width: 48rem) { .sv-h1 { font-size: 2.75rem; } }
@media (min-width: 80rem) { .sv-h1 { font-size: 3.25rem; } }

/* Proof numbers */
.sv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 64rem) { .sv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.sv-stat { border-left: 1px solid #D9D9DD; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.sv-stat b { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-weight: 400; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; color: #040406; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) { .sv-stat b { font-size: 3.25rem; } }
.sv-stat span { font-size: .9375rem; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; }
.sv-stat small { font-size: .75rem; color: #9A9CA6; }

/* Product frame */
.sv-frame { border: 1px solid #D9D9DD; background: #fff; overflow: hidden; }
.sv-frame img { display: block; width: 100%; height: auto; }
.sv-frame--crop { aspect-ratio: 16 / 10; }
.sv-frame--crop img { height: 100%; object-fit: cover; object-position: top left; }

/* Step list */
.sv-steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid #D9D9DD; }
@media (min-width: 40rem) { .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
@media (min-width: 64rem) { .sv-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sv-steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-step { border-bottom: 1px solid #D9D9DD; padding: 1.5rem 0 1.75rem; display: flex; flex-direction: column; gap: .75rem; }
.sv-step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-mono); font-size: .8125rem; color: #6B6E7B; letter-spacing: .02em; }
.sv-step h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; }
.sv-step p { font-size: .9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; }
/* 단계 그림 — 테두리도 바탕도 두지 않는다. 흰 종이 위에 그림만 얹힌 것처럼 보여야
   네 칸이 상자 나열로 읽히지 않는다. margin-top:auto 로 글 길이가 달라도 아랫줄을 맞춘다. */
.sv-step .fig { margin-top: auto; padding-top: 1.25rem; }
.sv-step .fig img { display: block; width: 100%; height: auto; }

/* 숏폼 띠 — sv-reel 은 이미 다른 카드가 쓰고 있어 sv-short 로 따로 둔다.
   숏폼 띠 — 브랜드 로고 마퀴와 같은 장치를 쓰되 카드가 세로다. animate-logos 가
   목록 하나 너비(-50%)만큼 미므로 같은 목록을 두 벌 둔다. 양 끝은 마스크로 흐려
   잘린 카드가 생기지 않게 한다. 그림자는 쓰지 않는다. */
.sv-shorts { overflow-x: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.sv-shorts__track { display: flex; width: max-content; }
.sv-shorts__track:hover { animation-play-state: paused; }
.sv-shorts__list { display: flex; align-items: flex-start; gap: .75rem; padding-right: .75rem; margin: 0; list-style: none; }
.sv-short { flex: none; width: 10.5rem; aspect-ratio: 9 / 16; border-radius: .625rem;
  overflow: hidden; background: #ECECEF; }
.sv-short img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) { .sv-short { width: 12.5rem; } .sv-shorts__list { gap: 1rem; padding-right: 1rem; } }
@media (min-width: 64rem) { .sv-short { width: 14.5rem; } }

/* Problem list (quotes) */
.sv-problem { background: #F6F6F6; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 11rem; }
.sv-problem .who { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6E7B; }
.sv-problem p { font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.01em; color: #040406; }

/* Case cards */
.sv-case { background: #F6F6F6; padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative; overflow: hidden; }
.sv-case .tag { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; color: #6B6E7B; letter-spacing: .04em; }
.sv-case .num { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em; color: #040406; }
.sv-case .num small { font-size: 1.125rem; letter-spacing: 0; color: #6B6E7B; margin-left: .25rem; }
.sv-case p { font-size: .9375rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.sv-case .corner { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; }

/* Pricing */
.sv-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .sv-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-tier { border: 1px solid #D9D9DD; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; background: #fff; }
.sv-tier--hl { background: #F6F6F6; }
.sv-tier .name { font-family: var(--font-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6E7B; }
.sv-tier .price { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; color: #040406; }
.sv-tier .price small { font-size: 1rem; color: #6B6E7B; letter-spacing: 0; margin-left: .25rem; }
.sv-tier ul { display: flex; flex-direction: column; gap: .625rem; padding-top: 1.25rem; border-top: 1px solid #D9D9DD; font-size: .9375rem; color: #1C1D22; letter-spacing: -0.01em; }
.sv-tier ul li { display: flex; gap: .625rem; align-items: flex-start; }
.sv-tier ul li::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .45rem; background: #040406; }
.sv-tier ul li.off { color: #9A9CA6; } .sv-tier ul li.off::before { background: #D9D9DD; }
.sv-tier .cta { margin-top: auto; }

/* Table */
.sv-table { width: 100%; border-collapse: collapse; font-size: .9375rem; letter-spacing: -0.01em; }
.sv-table th, .sv-table td { text-align: left; padding: .875rem 1rem .875rem 0; border-bottom: 1px solid #D9D9DD; vertical-align: top; }
.sv-table th { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6E7B; font-weight: 500; }
.sv-table td:last-child, .sv-table th:last-child { text-align: right; padding-right: 0; }
.sv-table td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .sv-table--stack thead { display: none; } .sv-table--stack tr { display: grid; grid-template-columns: 1fr auto; padding: .75rem 0; border-bottom: 1px solid #D9D9DD; } .sv-table--stack td { border: 0; padding: .125rem 0; } .sv-table--stack td:first-child { grid-column: 1 / -1; font-weight: 500; color: #040406; } }

/* Timeline */
.sv-tl { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #D9D9DD; }
.sv-tl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid #D9D9DD; }
.sv-tl .y { font-family: var(--font-mono); font-size: .8125rem; color: #6B6E7B; padding-top: .2rem; }
.sv-tl p { font-size: 1rem; color: #040406; letter-spacing: -0.01em; line-height: 1.5; }
.sv-tl p span { color: hsl(var(--muted-foreground)); }

/* FAQ (native details, same look as the Radix accordion) */
.sv-faq { border-top: 1px solid hsl(var(--border)); }
.sv-faq details { border-bottom: 1px solid hsl(var(--border)); }
.sv-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .875rem 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; }
@media (min-width: 48rem) { .sv-faq summary { padding: 1.5rem 0; font-size: 1.25rem; } }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: ""; flex: none; width: 1.5rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23040406' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq .a { padding: 0 0 1.5rem; max-width: 46rem; font-size: 1rem; line-height: 1.6; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; }

/* Inquiry form */
.sv-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40rem) { .sv-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-form .full { grid-column: 1 / -1; } }
.sv-field { display: flex; flex-direction: column; gap: .5rem; }
.sv-field label { font-size: .8125rem; font-weight: 500; letter-spacing: -0.01em; color: #1C1D22; }
.sv-field label i { font-style: normal; color: #6B6E7B; font-weight: 400; }
.sv-field input, .sv-field select, .sv-field textarea { appearance: none; width: 100%; min-height: 2.75rem; padding: .625rem .875rem; font: inherit; font-size: .9375rem; letter-spacing: -0.01em; color: #040406; background: #fff; border: 1px solid #D9D9DD; border-radius: 6px; outline: none; transition: border-color .2s; }
.sv-field textarea { min-height: 7rem; resize: vertical; }
.sv-field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath stroke='%23040406' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3.5 5.25 7 8.75l3.5-3.5'/%3E%3C/svg%3E") right .875rem center no-repeat; padding-right: 2.25rem; }
.sv-field input:focus-visible, .sv-field select:focus-visible, .sv-field textarea:focus-visible { border-color: #040406; }
.sv-field input[aria-invalid="true"], .sv-field select[aria-invalid="true"] { border-color: #E40014; }
.sv-field .err { display: none; font-size: .75rem; color: #BF000F; }
.sv-field[data-error] .err { display: block; }
.sv-check { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; color: #1C1D22; letter-spacing: -0.01em; line-height: 1.45; }
.sv-check input { appearance: auto; width: 1rem; height: 1rem; margin-top: .2rem; accent-color: #040406; }
.sv-form-done { display: none; padding: 2rem; background: #F6F6F6; font-size: 1rem; line-height: 1.6; color: #040406; }
.sv-form[data-done] { display: none; }
.sv-form[data-done] + .sv-form-done { display: block; }

/* Mobile fixed CTA dock */
.sv-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; gap: .5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-top: 1px solid #D9D9DD; }
.sv-dock a { flex: 1; }
@media (min-width: 64rem) { .sv-dock { display: none; } }
@media (max-width: 63.98rem) { body { padding-bottom: 5rem; } }

/* Case reel */
.sv-reel { width: 16rem; height: 25rem; }
@media (min-width: 48rem) { .sv-reel { width: 18rem; height: 28rem; } }
.sv-reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-reel > div { position: relative; z-index: 10; margin-top: auto; }

/* 6-col feature grid (docs' g-lg / g-md / g-sm spans) */
.sv-grid6 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40rem) { .sv-grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 64rem) { .sv-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .g-lg { grid-column: span 4; } .g-md { grid-column: span 2; } .g-sm { grid-column: span 3; } }
.sv-card { position: relative; overflow: hidden; background: #F6F6F6; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 64rem) { .sv-card { padding: 1.75rem; } }
.sv-card .corner { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; }
.sv-card .badge { align-self: flex-start; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6E7B; }
.sv-card h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; color: #040406; padding-right: 1.5rem; }
@media (min-width: 80rem) { .sv-card h3 { font-size: 1.5rem; } }
.sv-card ul { display: flex; flex-direction: column; gap: .5rem; }
.sv-card li { display: flex; gap: .625rem; font-size: .9375rem; line-height: 1.5; color: #1C1D22; letter-spacing: -0.01em; }
.sv-card li::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .5rem; background: #040406; }
.sv-card .foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid #D9D9DD; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .875rem; color: #6B6E7B; letter-spacing: -0.01em; }
.sv-card .foot a { color: #040406; font-weight: 500; }
.sv-card .shot { margin-top: .5rem; }

/* Hero figure card */
.sv-figure { border: 1px solid #D9D9DD; background: #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 64rem) { .sv-figure { padding: 2rem; min-width: 22rem; } }
.sv-figure .k { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6B6E7B; }
.sv-figure .n { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-size: 3.5rem; line-height: 1; letter-spacing: -0.03em; color: #040406; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
@media (min-width: 64rem) { .sv-figure .n { font-size: 4.5rem; } }
.sv-figure .n em { font-style: normal; font-size: 1.25rem; letter-spacing: 0; color: #6B6E7B; }
.sv-figure p { font-size: .9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; max-width: 30rem; }
.sv-figure hr { border: 0; border-top: 1px solid #D9D9DD; margin: .25rem 0; }
.sv-figure small { font-size: .75rem; color: #6B6E7B; line-height: 1.5; }
.sv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: end; }
@media (min-width: 64rem) { .sv-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 4rem; } }

/* 요금 항목 — 흰 화면에 흰 상자를 테두리로만 세우니 평평했다.
   카드와 같은 회색 면에 모서리 그라데이션을 얹고, 숫자를 키우고,
   설명은 헤어라인 아래로 내려 읽는 순서를 만든다. */
.sv-rate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .sv-rate { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 64rem) { .sv-rate { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-rateitem { position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: #F6F6F6; border-radius: .625rem; padding: 1.75rem 1.5rem 1.5rem; }
.sv-rateitem .corner { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; }
.sv-rateitem b { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-weight: 400;
  font-size: 2.75rem; line-height: 1; letter-spacing: -0.03em; color: #040406; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) { .sv-rateitem b { font-size: 3rem; } }
.sv-rateitem .lbl { margin-top: .75rem; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; }
.sv-rateitem p { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid #D9D9DD;
  font-size: .875rem; line-height: 1.6; letter-spacing: -0.01em; color: hsl(var(--muted-foreground)); }
.sv-tiers--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .sv-tiers--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sv-tiers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Callout */
.sv-callout { background: #F6F6F6; padding: 1.25rem 1.5rem; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; max-width: 52rem; }
.sv-callout b { color: #040406; font-weight: 500; }
.sv-callout a { color: #040406; text-decoration: underline; text-underline-offset: 4px; }

/* Timeline grouped by year */
.sv-tly { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid #D9D9DD; }
.sv-tly > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid #D9D9DD; }
@media (min-width: 48rem) { .sv-tly > div { grid-template-columns: 8rem minmax(0, 1fr); gap: 2rem; } }
.sv-tly .y { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; color: #040406; }
.sv-tly ul { display: flex; flex-direction: column; gap: .625rem; }
.sv-tly li { font-size: 1rem; line-height: 1.5; color: hsl(var(--muted-foreground)); letter-spacing: -0.01em; display: flex; gap: .75rem; }
.sv-tly li b { color: #040406; font-weight: 500; }
.sv-tly li em { font-style: normal; font-family: var(--font-mono); font-size: .75rem; color: #9A9CA6; flex: none; width: 2rem; padding-top: .3rem; }

/* GNB dropdown */
.sv-dd { position: relative; }
.sv-dd > a svg { transition: transform .2s; }
/* The wrapper's top padding bridges the gap between the tab and the panel, so the
   pointer never leaves .sv-dd on the way down and the menu stops vanishing. */
.sv-dd__wrap { position: absolute; left: 0; top: 100%; padding-top: .5rem; display: none; z-index: 60; }
.sv-dd:hover .sv-dd__wrap, .sv-dd:focus-within .sv-dd__wrap { display: block; }
.sv-dd__menu { min-width: 17rem; background: #fff; border: 1px solid #D9D9DD; padding: .5rem; box-shadow: 0 10px 28px rgba(4,4,6,.10); }
.sv-dd:last-of-type .sv-dd__wrap { left: auto; right: 0; }
.sv-dd:hover > a svg, .sv-dd:focus-within > a svg { transform: rotate(180deg); }
.sv-dd__menu a { display: block; padding: .625rem .75rem; font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; transition: background-color .2s; }
.sv-dd__menu a:hover { background: #F6F6F6; }
.sv-dd__menu a span { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 400; color: #6B6E7B; }
.sv-dd__menu a[aria-current="page"] { background: #F6F6F6; }
.sv-lnbbar { border-bottom: 1px solid #ECECEE; background: #fff; }
.sv-lnbbar .sv-lnb { padding: .75rem 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sv-lnbbar .sv-lnb::-webkit-scrollbar { display: none; }
.sv-lnbbar .sv-lnb a { white-space: nowrap; }
body[data-mode="lp"] .sv-lnbbar { display: none; }
.sv-menu-grp { font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: #6B6E7B; padding: 1.25rem 0 .25rem; }
.sv-menu-sub { padding-left: 1rem; }
.sv-dock p { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.35; color: #6B6E7B; letter-spacing: -0.01em; align-self: center; }
.sv-dock a { flex: none; width: auto !important; }
.sv-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-filter button { min-height: 2.5rem; padding: 0 1rem; border: 1px solid #D9D9DD; background: transparent; font: inherit; font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; border-radius: 999px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.sv-filter button[aria-pressed="true"] { background: #040406; border-color: #040406; color: #fff; }
.sv-case[hidden] { display: none; }

/* Hero logo marquee — text wordmarks in place of the clone's SVG logos */
.sv-mark { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; color: #9A9CA6; }
@media (min-width: 64rem) { .sv-mark { font-size: 1.25rem; } }
.animate-logos:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .animate-logos { animation: none !important; } }

.sv-plat { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; white-space: nowrap; }
.sv-plat img { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: .375rem; }

/* Small bits */
.sv-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border: 1px solid #D9D9DD; background: rgba(244,244,245,.5); font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; }
.sv-chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.sv-note { font-size: .8125rem; color: #6B6E7B; letter-spacing: -0.01em; line-height: 1.5; }
.sv-eyebrow-badge { display: inline-flex; align-items: center; padding: .25rem .625rem; background: #F6F6F6; border: 1px solid #D9D9DD; font-size: .75rem; font-weight: 500; letter-spacing: -0.01em; color: #6B6E7B; margin-left: .75rem; vertical-align: middle; }
.sv-logos { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; }
.sv-logos span { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; color: #9A9CA6; white-space: nowrap; }
.sv-quote { border-left: 1px solid #D9D9DD; padding-left: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sv-quote blockquote { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01em; color: #040406; }
.sv-quote blockquote span { background: #FBE2D7; }
.sv-quote cite { font-style: normal; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.sv-door { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; background: #F6F6F6; min-height: 16rem; position: relative; overflow: hidden; color: inherit; transition: background-color .2s; }
.sv-door:hover { background: #EFEFF1; }
.sv-door .k { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; color: #6B6E7B; letter-spacing: .04em; }
.sv-door h3 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; color: #040406; }
.sv-door p { font-size: .9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.sv-door .go { margin-top: auto; font-size: .9375rem; font-weight: 500; color: #040406; display: inline-flex; gap: .25rem; align-items: center; }
.sv-door .corner { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; }
.sv-hero-media { position: relative; overflow: hidden; background: #F6F6F6; aspect-ratio: 16 / 9; }
@media (min-width: 48rem) { .sv-hero-media { aspect-ratio: 1536 / 620; } }
.sv-hero-media > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-hero-media .shot { position: relative; margin: 3rem auto 0; width: min(88%, 62rem); border: 1px solid rgba(0,0,0,.08); border-bottom: 0; background: #fff; overflow: hidden; }
.sv-hero-media .shot img { display: block; width: 100%; height: auto; }
@media (max-width: 47.98rem) { .sv-hero-media .shot { margin-top: 1.5rem; width: 92%; } }
.sv-lnb { display: flex; gap: .5rem; flex-wrap: wrap; }
.sv-lnb a { padding: .5rem .875rem; border: 1px solid #D9D9DD; font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: #040406; border-radius: 999px; transition: background-color .2s, border-color .2s; }
.sv-lnb a[aria-current="page"] { background: #040406; border-color: #040406; color: #fff; }
.sv-lnb a:hover { border-color: #040406; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; animation: none !important; } }

/* Footer: fixed info column + sitemap that spreads across the remaining width */
.sv-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 64rem) { .sv-foot { grid-template-columns: 20rem minmax(0, 1fr); gap: 5rem; align-items: start; } }
.sv-footnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
@media (min-width: 40rem) { .sv-footnav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sv-footnav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 2rem; } }
.sv-footnav h3 { white-space: nowrap; }
.sv-footnav li a { white-space: nowrap; }

/* Channel logo row */
.sv-plats { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.sv-plats .sv-plat { font-size: .9375rem; color: #1C1D22; }
.sv-plats .sv-plat img { width: 1.25rem; height: 1.25rem; }

/* Case card service tags */
.sv-case .foot-tags { margin-top: auto; padding-top: .875rem; border-top: 1px solid #D9D9DD; display: flex; flex-wrap: wrap; gap: .375rem; }
.sv-case .foot-tags span { font-size: .75rem; letter-spacing: -0.01em; color: #6B6E7B; background: #fff; border: 1px solid #D9D9DD; padding: .1875rem .5rem; border-radius: 999px; }
.sv-case p { min-height: 1.4em; }

/* PB 브랜드 워드마크 띠 (현재 미사용) */
.sv-brandmark { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.sv-brandmark img { width: 15rem; height: auto; }

/* 원페이지 GNB — 하위 항목을 누르면 해당 섹션으로 미끄러진다.
   동작 최소화를 켠 사용자에게는 기존처럼 즉시 이동한다. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 앵커로 멈춰 선 자리가 고정 머리말(53px) 밑에 깔리지 않게 여유를 둔다 */
html { scroll-padding-top: 4.5rem; }

/* 요금 4갈래(구독·대행·브랜드·정부지원금)를 한 줄에 — 3갈래는 기본 규칙 그대로 */
@media (min-width: 48rem) { .sv-rate--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sv-rate--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 헤어라인으로 나눈 전폭 행 — 글만 있는 섹션이 카드 격자로만 보이지 않게.
   상자도 그림자도 없이, 왼쪽 제목과 오른쪽 근거를 수평선으로만 가른다. */
.sv-principles { border-bottom: 1px solid #D9D9DD; }
.sv-principle { display: grid; gap: .875rem; padding: 1.75rem 0; border-top: 1px solid #D9D9DD; }
@media (min-width: 64rem) {
  .sv-principle { grid-template-columns: 19rem minmax(0, 1fr); gap: 4rem; align-items: start; padding: 2.25rem 0; }
}
.sv-principle .lede { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.sv-principle h3 { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-weight: 400; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.02em; color: #040406; }
@media (min-width: 64rem) { .sv-principle h3 { font-size: 1.5rem; } }
.sv-principle .mark { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; letter-spacing: 0; text-transform: uppercase; color: #6B6E7B; }
.sv-principle ul { display: flex; flex-direction: column; gap: .5rem; }
.sv-principle li { position: relative; padding-left: 1rem; font-size: 1rem; line-height: 1.6; letter-spacing: -0.01em; color: #1C1D22; }
.sv-principle li::before { content: ""; position: absolute; left: 0; top: .8em; width: .4375rem; height: 1px; background: #8A8D9A; }

/* 분기 안내 목록 — 고르는 자리는 상자보다 규칙선 위의 행이 훑기 쉽다.
   행 전체가 하나의 영역이자 링크라 무엇이 한 덩어리인지가 선으로 드러난다. */
.sv-index { border-top: 1px solid #D9D9DD; }
.sv-index > a, .sv-index > div {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: baseline; gap: .375rem 1rem; padding: 1.375rem 0;
  border-bottom: 1px solid #D9D9DD;
}
.sv-index > a { transition: color .2s cubic-bezier(.4,0,.2,1); }
.sv-index .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: #8A8D9A; }
.sv-index .name { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-weight: 400;
  font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; color: #040406; }
.sv-index .desc { grid-column: 2 / -1; font-size: .9375rem; line-height: 1.55; letter-spacing: -0.01em; color: #6B6E7B; }
.sv-index .tag { grid-column: 2 / -1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem; letter-spacing: 0; color: #8A8D9A; }
.sv-index .tag:empty { display: none; }
.sv-index .go { grid-row: 1; grid-column: 3; color: #040406; }
.sv-index .go svg { width: 1.125rem; height: 1.125rem; }
.sv-index > a:hover .name, .sv-index > a:hover .go { color: #8A8D9A; }

@media (min-width: 64rem) {
  .sv-index > a, .sv-index > div {
    grid-template-columns: 2.5rem 17rem minmax(0, 1fr) 9rem auto;
    align-items: center; gap: 0 2rem; padding: 1.625rem 0;
  }
  .sv-index .desc { grid-column: 3; }
  .sv-index .tag { grid-column: 4; text-align: right; }
  .sv-index .go { grid-column: 5; }
}

/* 문장이 들어가는 비교표는 마지막 열도 왼쪽 정렬 — 기본 규칙은 숫자용이다 */
.sv-table--left td:last-child, .sv-table--left th:last-child { text-align: left; }

/* 비교표의 좁은 화면 — 기본 stack 규칙은 마지막 열이 짧은 값일 때를 가정한다.
   문장 두 개가 나란히 놓이면 서로 밀리므로, 아래로 쌓고 열 이름을 값 위에 붙인다. */
@media (max-width: 40rem) {
  .sv-table--left tr { grid-template-columns: minmax(0, 1fr); }
  .sv-table--left td { grid-column: 1 / -1; }
  .sv-table--left td:not(:first-child) { text-align: left; }
  .sv-table--left td:not(:first-child)::before {
    content: attr(data-label); display: block; margin-top: .5rem; margin-bottom: .125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .625rem;
    text-transform: uppercase; letter-spacing: .04em; color: #A0A3B0;
  }
}

/* 한 줄을 통째로 쓰는 카드 — 이미지가 없는 카드가 이미지 카드와 높이를 맞추려다
   안쪽에 빈 공간을 만드는 걸 피하려고, 자기 줄을 갖게 한다. */
@media (min-width: 64rem) { .sv-grid6 > .g-full { grid-column: 1 / -1; } }

/* 같은 줄의 이미지 카드보다 내용이 짧은 카드 — 높이를 억지로 맞추면 상자 안에
   빈 공간이 생긴다. 제 높이에서 끝내고 아래는 바탕으로 둔다. */
@media (min-width: 64rem) { .sv-grid6 > .g-fit { align-self: start; } }

/* 요금 플랜 — 어두운 바탕에 카드 넷. 추천 플랜만 흰 테두리와 상단 1px 라인으로 든다.
   나머지 규칙(무그림자·좌측 정렬·헤어라인)은 사이트와 같다. */
.sv-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .sv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sv-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sv-plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem;
  background: #0A0A0C; border: 1px solid rgba(255,255,255,.08); border-radius: .75rem;
  transition: border-color .2s cubic-bezier(.4,0,.2,1); }
.sv-plan:hover { border-color: rgba(255,255,255,.16); }
.sv-plan--hl { background: #050506; border-color: rgba(255,255,255,.26); }
.sv-plan--hl::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; background: #fff; }

.sv-plan .head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sv-plan .name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; }
.sv-plan .badge { flex: none; background: #fff; color: #040406; border-radius: 999px; padding: .1875rem .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .625rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; }
.sv-plan .desc { margin-top: .5rem; font-size: .875rem; line-height: 1.5; letter-spacing: -0.01em; color: #8C90A0; }
.sv-plan .price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: .3125rem; }
.sv-plan .price b { font-family: "articulat-cf", "Pretendard Variable", sans-serif; font-weight: 400;
  font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sv-plan .price span { font-size: .875rem; font-weight: 500; letter-spacing: -0.01em; color: #7A7E8C; }

.sv-plan .cta { margin-top: 1.5rem; }
.sv-plan .cta a { display: flex; align-items: center; justify-content: center; gap: .375rem; height: 2.5rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: .375rem; color: #fff;
  font-size: .875rem; font-weight: 500; letter-spacing: -0.01em;
  transition: background-color .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); }
.sv-plan .cta a:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.sv-plan--hl .cta a { background: #fff; border-color: #fff; color: #040406; }
.sv-plan--hl .cta a:hover { background: #E4E5EA; border-color: #E4E5EA; }
.sv-plan .cta a svg { width: 1rem; height: 1rem; }

.sv-plan .rule { margin-top: 1.5rem; height: 1px; background: rgba(255,255,255,.08); }
.sv-plan ul { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .875rem; }
.sv-plan li { display: flex; gap: .625rem; font-size: .875rem; line-height: 1.5; letter-spacing: -0.01em; color: #C9CCD6; }
.sv-plan li svg { flex: none; margin-top: .1875rem; color: #6B6E7B; }
.sv-plan--hl li svg { color: #fff; }

.sv-plans-note { margin-top: 2.5rem; display: flex; align-items: flex-start; gap: .625rem;
  max-width: 52rem; font-size: .875rem; line-height: 1.6; letter-spacing: -0.01em; color: #8C90A0; }
.sv-plans-note::before { content: ""; flex: none; margin-top: .5rem; width: .375rem; height: .375rem;
  border-radius: 999px; background: #4A4D58; }

/* 히어로 이미지 — 전폭이면 세로로 너무 커진다. 기존 히어로 미디어와 같은 폭으로 묶는다. */
.sv-frame--art { max-width: 62rem; margin-left: auto; margin-right: auto; }

/* 미디어 프레임 모서리 — 일러스트와 제품 화면이 각진 상자에 담기면 무겁다.
   히어로 미디어(.sv-hero-media .shot)는 아래가 잘려 나가는 연출이라 제외한다. */
.sv-frame { border-radius: .625rem; }
.sv-frame--crop { border-radius: .5rem; }


/* 전폭 이미지를 받치는 옅은 바탕 — 어두운 화면이 흰 종이에 떠 있지 않도록.
   위에서 아래로 사라지는 한 겹이라 경계가 드러나지 않는다. */
.sv-artband { padding: 1.5rem .625rem; border-radius: 1rem;
  background: radial-gradient(120% 120% at 50% 0%, #FFF1E8 0%, #FFF9F5 48%, #FFFFFF 100%); }
@media (min-width: 48rem) { .sv-artband { padding: 2.25rem 1.5rem; border-radius: 1.25rem; } }
@media (min-width: 64rem) { .sv-artband { padding: 3rem 2rem; } }

/* 도식이 붙은 문제 카드 — 글만 있을 때의 최소 높이는 그림이 채우므로 풀어 준다 */
.sv-problem--img { min-height: 0; }
.sv-problem--img .shot { margin-top: auto; }

/* 히어로 오른쪽 칸에 들어가는 작은 이미지 — 수치 박스 아래에 붙는다 */
.sv-heroart { overflow: hidden; border: 1px solid #D9D9DD; border-radius: .625rem; background: #fff;
  display: flex; align-items: center; justify-content: center; }
.sv-heroart img { display: block; width: 100%; height: auto; }
@media (min-width: 64rem) { .sv-heroart { height: 100%; padding: 1rem; } }
@media (min-width: 64rem) { .sv-hero-grid--top { align-items: stretch; } }

/* 왼쪽 글 아래로 내려온 수치 — 상자를 벗고 헤어라인 하나로만 구분한다 */
.sv-figure--flat { border: 0; background: transparent; padding: 0; min-width: 0;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid #D9D9DD; gap: .375rem; }
.sv-figure--flat .n { font-size: 3rem; }
@media (min-width: 64rem) { .sv-figure--flat .n { font-size: 3.5rem; } }
.sv-figure--flat hr { display: none; }
.sv-figure--flat p { max-width: 36rem; }
.sv-figure--flat small { margin-top: .375rem; }

/* 삽화는 테두리도 바탕도 두지 않는다 — 흰 종이 위에 그림만 얹힌 것처럼 보여야 한다.
   .shot 뒤에 두고 클래스를 둘 겹쳐 .shot 의 테두리를 확실히 덮는다. */
.sv-frame--bare, .shot.sv-frame--bare { border: 0; background: transparent; }