﻿/* 이펙터 · 2026-10 제작 · 노바셀릭스 공통 페이지 스타일 */

:root {
  --nv-sec: 4rem;
  --nv-sec-intro: var(--nv-sec);
  --nv-colgap: 2rem;
  --nv-r: 1.25rem;
  --nv-card-line: #e3eaec;
  --nv-h1: 2.5rem;
  --nv-kv-gap: 1.25rem;
  --nv-lead: 1.0625rem;
  --nv-list: 1.0625rem;
  --nv-step-t: 1.375rem;
  --nv-kv-h: min(calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 44rem);
}
@supports (height: 100svh) { :root { --nv-kv-h: min(calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 44rem); } }
@media (min-width: 576px) { :root { --nv-h1: 3.25rem; --nv-lead: 1.125rem; --nv-list: 1.125rem; --nv-step-t: 1.5rem; } }
@media (min-width: 768px) {
  :root { --nv-sec: 5.5rem; --nv-colgap: 3rem; --nv-h1: 4rem; --nv-kv-gap: 1.5rem; --nv-lead: 1.25rem; --nv-list: 1.25rem; --nv-step-t: 1.625rem; --nv-kv-h: min(calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 46rem); }
}
@supports (height: 100svh) { @media (min-width: 768px) { :root { --nv-kv-h: min(calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 46rem); } } }
@media (min-width: 992px) {
  :root { --nv-sec: 7.5rem; --nv-sec-intro: calc(var(--nv-sec) * 2); --nv-h1: 4.5rem; --nv-kv-h: clamp(32rem, calc(100vh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 58.3125rem); }
}
@supports (height: 100svh) { @media (min-width: 992px) { :root { --nv-kv-h: clamp(32rem, calc(100svh - var(--ss-header-h) - var(--ss-bar-h) - var(--ss-consult-h)), 58.3125rem); } } }
@media (min-width: 1200px) { :root { --nv-colgap: 4.5rem; --nv-h1: 5rem; } }
@media (min-width: 1400px) { :root { --nv-sec: 9rem; --nv-kv-gap: 2.5rem; --nv-h1: 5.375rem; --nv-lead: 1.375rem; --nv-list: 1.375rem; --nv-step-t: 1.875rem; } }

.nv-stem { --nv-acc: #4dacff; --nv-acc-soft: #d8edff; --nv-num: #0088ff; }
.nv-well { --nv-acc: #3492a2; --nv-acc-soft: #c0e5eb; --nv-num: #21636e; }
.nv-oxy  { --nv-acc: #93e1ee; --nv-acc-soft: #dff8fb; --nv-num: #43b8ca; --nv-badge: #43b8ca; }
.nv-mct  { --nv-acc: #111; --nv-acc-soft: #ccc; --nv-num: #111; }

.nv-sec { padding-top: var(--nv-sec); }
.nv-sec-intro { padding-top: var(--nv-sec-intro); }
.nv-sec-last { padding-bottom: var(--nv-sec); }
.nv-band { margin-top: var(--nv-sec); padding-block: var(--nv-sec); background: var(--ss-bg-soft); }
.nv-band + .nv-sec-last, .nv-band + .nv-sec { padding-top: var(--nv-sec); }

.nv-kv { position: relative; display: flex; align-items: flex-end; min-height: var(--nv-kv-h); overflow: hidden; background: var(--ss-bg-soft); color: var(--nv-kv-ink, var(--ss-ink)); }
.nv-kv-light { --nv-kv-ink: var(--ss-white); }
.nv-kv-bg { position: absolute; inset: 0; }
.nv-kv-bg > img, .nv-kv-bg > .img-ph { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; }
.nv-kv > .container { position: relative; z-index: 1; padding-block: 2.5rem 3rem; }
.nv-kv-eyebrow { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.4; }
.nv-kv-title { margin: var(--nv-kv-gap) 0 0; font-size: var(--nv-h1); font-weight: 700; line-height: 1.05; color: inherit; }
.nv-kv-desc { margin: var(--nv-kv-gap) 0 0; font-size: 1rem; font-weight: 500; line-height: 1.55; }
.nv-kv-logo { display: block; width: 12.5rem; height: auto; margin-top: calc(var(--nv-kv-gap) * 1.6); }
.nv-kv-logo.img-ph { height: auto; }
.nv-kv-logo-mo { display: block; }
@media (min-width: 768px) {
  .nv-kv { align-items: center; }
  .nv-kv > .container { padding-block: 3rem; }
  .nv-kv-eyebrow { font-size: 1.125rem; }
  .nv-kv-desc { font-size: 1.0625rem; }
  .nv-kv-logo { margin-top: calc(var(--nv-kv-gap) * 2.2); }
  .nv-kv-logo-mo { display: none; }
}
@media (min-width: 992px) { .nv-kv-logo { width: 15rem; } .nv-kv-desc { font-size: 1.125rem; } }
@media (min-width: 1400px) { .nv-kv-logo { width: 18.75rem; } .nv-kv-desc { font-size: 1.1875rem; } }

.nv-label { display: flex; align-items: center; gap: .375rem; margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--ss-weak); }
.nv-label::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: radial-gradient(circle, var(--nv-acc) 0 50%, var(--nv-acc-soft) 54%); }
.nv-h2 { margin: 0; font-size: var(--sp-h2); font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
.nv-h2-b { font-weight: 700; }
.nv-h2-c { text-align: center; }
.nv-lead { margin: 1.5rem 0 0; font-size: var(--nv-lead); font-weight: 400; line-height: 1.45; color: var(--ss-weak); }
.nv-lead-dk { color: var(--ss-text-2); }
.nv-lead-c { text-align: center; }

.nv-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.nv-keys { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--ss-line-strong); border-bottom: 1px solid var(--ss-line-strong); }
.nv-keys-i { padding: 1.25rem .5rem 1.25rem 1.5rem; border-top: 1px solid var(--ss-line-strong); }
.nv-keys-i:first-child { border-top: 0; }
.nv-keys-t { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.nv-keys-d { margin: .25rem 0 0; font-size: .875rem; font-weight: 400; line-height: 1.55; color: var(--ss-weak); }
@media (min-width: 576px) {
  .nv-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nv-keys-i { border-top: 0; border-left: 1px solid var(--ss-line-strong); }
  .nv-keys-i:first-child { border-left: 0; }
}
@media (min-width: 768px) { .nv-keys-t { font-size: 1.125rem; } .nv-keys-d { font-size: .9375rem; } .nv-keys-i { padding-block: 1.5rem; } }
@media (min-width: 992px) { .nv-intro-grid { grid-template-columns: minmax(0, 636fr) minmax(0, 664fr); gap: 0 var(--nv-colgap); } }

.nv-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.nv-split-pic { position: relative; margin: 0; overflow: hidden; background: var(--ss-bg-soft); }
.nv-split-pic::before { content: ""; display: block; padding-top: calc(var(--h, 523 / 600) * 100%); }
.nv-split-pic > img, .nv-split-pic > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; }
.nv-split-body { display: flex; flex-direction: column; min-width: 0; }
.nv-split-body > .nv-lead { margin-bottom: 2rem; }
@media (min-width: 992px) {
  .nv-split { grid-template-columns: minmax(0, 600fr) minmax(0, 628fr); column-gap: var(--nv-colgap); align-items: stretch; }
  .nv-split-body > .nv-rows { margin-top: auto; }
}
.nv-rows { margin: 0; padding: 0; border-top: 1px solid var(--ss-line-strong); }
.nv-rows-r { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: 1.25rem .5rem; border-bottom: 1px solid var(--ss-line-strong); }
.nv-rows-k { padding-right: .75rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.nv-rows-v { font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-text-2); }
@media (min-width: 576px) {
  .nv-rows-r { grid-template-columns: 7.75rem minmax(0, 1fr); gap: 0; align-items: center; padding-block: 1.75rem; }
  .nv-rows-wide .nv-rows-r { grid-template-columns: 9rem minmax(0, 1fr); }
  .nv-rows-k, .nv-rows-v { font-size: 1rem; }
}
@media (min-width: 1200px) { .nv-rows-wide .nv-rows-r { grid-template-columns: 10.875rem minmax(0, 1fr); } }

.nv-for-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.nv-checks { margin: 0; padding: 0; }
.nv-checks-i { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding: .75rem .5rem; border-bottom: 1px solid var(--ss-line-strong); font-size: var(--nv-list); font-weight: 600; line-height: 1.35; color: var(--ss-text-2); }
.nv-checks-i .ss-ico { width: 1.125rem; height: 1.125rem; color: var(--ss-text-2); }
@media (min-width: 992px) {
  .nv-for-grid { grid-template-columns: minmax(0, 563fr) minmax(0, 737fr); column-gap: var(--nv-colgap); }
  .nv-checks-i { min-height: 5.5rem; }
}
.nv-badges { margin: 0; padding: 0; }
.nv-badges-i { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem 1rem; padding: 1.25rem .5rem; border-bottom: 1px solid var(--ss-line-strong); }
.nv-badges-b { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--nv-badge, var(--ss-ink)); color: var(--ss-white); font-size: .75rem; font-weight: 600; line-height: 1; }
.nv-badges-t { margin: 0; font-size: var(--nv-list); font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
.nv-badges-d { margin: .5rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-weak); }
@media (min-width: 576px) { .nv-badges-i { padding-block: 1.75rem; } .nv-badges-d { font-size: 1rem; } }

.nv-steps-head { margin-bottom: 2.5rem; }
.nv-steps-head-split { display: grid; gap: 1.25rem; }
.nv-steps-head-split .nv-lead { margin: 0; }
.nv-steps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 0; padding: 0; background: var(--ss-line-strong); border-block: 1px solid var(--ss-line-strong); }
.nv-steps-c { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 2rem; background: var(--ss-white); transition: background-color .25s ease, color .25s ease; }
.nv-steps-n { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: var(--nv-num); }
.nv-steps-t { margin: 1.5rem 0 0; font-size: var(--nv-step-t); font-weight: 700; line-height: 1.2; color: var(--ss-ink); }
.nv-steps-d { margin: .75rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-weak); }
.nv-steps-more { margin-top: auto; padding-top: 1.5rem; }
.nv-btn-more { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding: 0 2.25rem; border: 1px solid var(--ss-line); background: var(--ss-white); font-size: 1rem; font-weight: 500; line-height: 1; color: var(--ss-text-2); transition: background-color .2s, border-color .2s, color .2s; }
.nv-btn-more:hover, .nv-btn-more:focus-visible { border-color: var(--ss-ink); background: var(--ss-ink); color: var(--ss-white); }
@media (min-width: 576px) { .nv-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nv-steps-d { font-size: 1rem; } .nv-steps-c { padding: 2rem 2rem 2.25rem; } .nv-steps-t { margin-top: 3rem; } }
@media (min-width: 768px) { .nv-steps-head { margin-bottom: 3.5rem; } .nv-steps-t { margin-top: 3.5rem; } }
@media (min-width: 992px) {
  .nv-steps-head-split { grid-template-columns: minmax(0, 737fr) minmax(0, 563fr); align-items: end; column-gap: var(--nv-colgap); }
  .nv-steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nv-steps-c { min-height: 20.625rem; }
}
@media (min-width: 1400px) { .nv-steps-head { margin-bottom: 4rem; } .nv-steps-t { margin-top: 4.5rem; } }
.nv-steps-head .nv-h2 { white-space: normal; }

.nv-prog-ttl { margin: 0 0 2rem; }
.nv-prog-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1rem; border: 1px solid var(--nv-card-line); border-radius: var(--nv-r); background: var(--ss-white); }
.nv-prog-tabs { min-width: 0; }
.nv-prog-tabs .ss-mtab-list { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: .625rem; }
.nv-ptab { display: flex; flex-direction: column; justify-content: center; gap: .125rem; width: 100%; min-height: 4.5rem; padding: .75rem 1.25rem; border: 1px solid var(--nv-card-line); border-radius: 1rem; background: var(--ss-white); text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.nv-ptab-t { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ss-weak); }
.nv-ptab-s { font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--ss-line-strong); }
.nv-ptab:hover { border-color: var(--ss-weak); }
.nv-ptab.is-active { border-color: var(--ss-ink); background: var(--ss-ink); }
.nv-ptab.is-active .nv-ptab-t { color: var(--ss-white); }
.nv-prog-stage { min-width: 0; }
.nv-prog-pic { position: relative; overflow: hidden; border-radius: var(--nv-r); aspect-ratio: 866 / 492; background: var(--ss-bg-soft); }
.nv-prog-pic > img, .nv-prog-pic > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; border-radius: 0; }
.nv-prog-cap { padding: 1.25rem .25rem .25rem; }
.nv-prog-cap[hidden] { display: none; }
.nv-prog-ct { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--ss-ink); }
.nv-prog-cd { margin: .75rem 0 0; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--ss-text-2); }
.nv-prog-tags { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.25rem 0 0; padding: 0; }
.nv-prog-tags li { display: inline-flex; align-items: center; height: 2.3125rem; padding: 0 1rem; border: 1px solid var(--ss-line-strong); border-radius: 1.25rem; background: var(--ss-white); font-size: .9375rem; font-weight: 500; line-height: 1; color: var(--ss-text-2); }
@media (min-width: 768px) {
  .nv-prog-box { padding: 1.5rem; gap: 1.5rem; }
  .nv-prog-tabs .ss-mtab-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nv-ptab { min-height: 5rem; padding: .75rem 1rem; border-radius: 1.25rem; }
  .nv-ptab-t { font-size: 1rem; }
  .nv-ptab-s { font-size: .75rem; }
  .nv-prog-stage { position: relative; border-radius: var(--nv-r); overflow: hidden; }
  .nv-prog-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 2rem 2rem; }
  .nv-prog-ct { font-size: 1.5rem; }
  .nv-prog-cd { font-size: 1rem; }
  .nv-prog-tags { margin-top: 1.25rem; }
}
@media (min-width: 992px) {
  .nv-prog-box { grid-template-columns: 16rem minmax(0, 1fr); column-gap: 2.5rem; }
  .nv-prog-tabs .ss-mtab-list { display: flex; flex-direction: column; }
  .nv-ptab { min-height: 6.125rem; padding: 1.25rem 1.5rem; border-radius: var(--nv-r); }
  .nv-ptab-t { font-size: 1.125rem; }
  .nv-ptab-s { font-size: .8125rem; }
  .nv-prog-cap { padding: 2rem 2.5rem 3rem; }
  .nv-prog-ct { font-size: 1.75rem; }
  .nv-prog-cd { font-size: 1.0625rem; }
}
@media (min-width: 1200px) { .nv-prog-box { grid-template-columns: 18rem minmax(0, 1fr); column-gap: 3.5rem; } }
@media (min-width: 1400px) {
  .nv-prog-box { grid-template-columns: 20.125rem minmax(0, 1fr); column-gap: 4rem; }
  .nv-ptab-t { font-size: 1.25rem; }
  .nv-prog-ct { font-size: 2rem; }
  .nv-prog-cd { font-size: 1.125rem; }
  .nv-prog-tags li { font-size: 1rem; }
}
@media (max-width: 767.98px) {
  :root .nv-prog-tabs .ss-mtab-list { flex-direction: row; }
  :root .nv-prog-tabs .nv-ptab { width: auto; min-width: 9.5rem; min-height: 4rem; }
}

.nv-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.nv-proof-card { position: relative; min-width: 0; border: 1px solid var(--nv-card-line); border-radius: var(--nv-r); background: var(--ss-white); overflow: hidden; }
.nv-proof-txt { padding: 1.5rem; }
.nv-proof-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 2rem 0 0; padding: 0; }
.nv-proof-chips li { display: flex; align-items: center; justify-content: center; min-height: 3.125rem; padding: .5rem; border: 1px solid var(--nv-card-line); border-radius: .5rem; background: var(--ss-bg-soft); font-size: .875rem; font-weight: 600; line-height: 1.35; text-align: center; color: var(--ss-text-2); }
.nv-proof-note { margin: 1.5rem 0 0; font-size: .8125rem; font-weight: 400; line-height: 1.7; color: var(--ss-weak); }
.nv-proof-pic { aspect-ratio: 623 / 600; }
.nv-proof-bg { position: absolute; inset: 0; }
.nv-proof-bg > img, .nv-proof-bg > .img-ph { width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; border: 0; }
.nv-proof-n { position: absolute; z-index: 1; left: 1.5rem; top: 1.5rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--ss-ink); color: var(--ss-white); font-size: 1.125rem; font-weight: 700; line-height: 1; }
.nv-proof-cert { position: absolute; z-index: 1; left: 24.7%; top: 14.7%; width: 50.6%; margin: 0; }
.nv-proof-cert > img, .nv-proof-cert > .img-ph { width: 100%; height: auto; }
@media (min-width: 576px) { .nv-proof-chips li { font-size: 1rem; } .nv-proof-txt { padding: 2rem; } .nv-proof-n { left: 2rem; top: 2rem; width: 4rem; height: 4rem; font-size: 1.25rem; } }
@media (min-width: 992px) {
  .nv-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4375rem; }
  .nv-proof-txt { padding: 2.875rem; }
  .nv-proof-chips { gap: .9375rem; }
  .nv-proof-n { left: 2.875rem; top: 2.875rem; width: 4.625rem; height: 4.625rem; font-size: 1.375rem; }
}
@media (min-width: 1200px) { .nv-proof-grid { gap: 3.4375rem; } }

.nv-pc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0; padding: 0; }
.nv-pc-c { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ss-line-strong); border-radius: var(--nv-r); overflow: hidden; background: var(--ss-white); }
.nv-pc-fig { position: relative; margin: 0; aspect-ratio: 309 / 161; background: var(--ss-bg-soft); }
.nv-pc-fig > img, .nv-pc-fig > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; border: 0; }
.nv-pc-b { padding: 1.5rem 1.25rem 1.75rem; }
.nv-pc-t { margin: 0; font-size: var(--nv-step-t); font-weight: 700; line-height: 1.2; color: var(--ss-ink); }
.nv-pc-d { margin: .75rem 0 0; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: var(--ss-weak); }
@media (min-width: 576px) { .nv-pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nv-pc-d { font-size: 1rem; } .nv-pc-b { padding: 2rem 1.25rem 2.25rem; } }
@media (min-width: 992px) { .nv-pc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nv-faq .ss-faq-btn { font-weight: 400; }
@media (min-width: 992px) { .nv-faq .ss-faq-btn { min-height: 5rem; } }
@media (min-width: 1400px) { .nv-faq .ss-faq-btn { font-size: 1.1875rem; } }
.nv-faq-ttl { margin: 0 0 2rem; text-align: center; font-size: var(--sp-h2); font-weight: 600; line-height: 1.3; color: var(--ss-ink); }
@media (min-width: 768px) { .nv-faq-ttl { margin-bottom: 3rem; } }
@media (min-width: 992px) { .nv-faq-ttl { margin-bottom: 4.5rem; } }

.nv-fx-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto !important; border: 0; }
.nv-kv-bg { overflow: hidden; }
@media (min-width: 1200px) and (max-width: 1399.98px) { .nv-lead br.d-xl-inline { display: none; } }
@media (min-width: 1400px) { .nv-lead.is-flow br { display: none; } }

/* 1018 수정(W-14): 노바셀릭스 */
@media (max-width: 767.98px) { .nv-steps-t { margin-top: 1.5rem; } }
.nv-prog-pic > img[hidden] { display: none; }
