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

.nv-mct { --nv-m-body: .9375rem; --nv-m-sub: 1rem; }
@media (min-width: 768px) { .nv-mct { --nv-m-body: 1rem; --nv-m-sub: 1.125rem; } }
@media (min-width: 992px) { .nv-mct { --nv-m-body: 1.0625rem; --nv-m-sub: 1.25rem; } }
@media (min-width: 1400px) { .nv-mct { --nv-m-body: 1.125rem; --nv-m-sub: 1.3125rem; } }
.nv-mct .nv-lead-s { margin-top: 1rem; font-size: var(--nv-m-body); line-height: 1.45; color: var(--ss-text); }

.nv-mct-intro { padding-block: var(--nv-sec); border-bottom: 1px solid var(--ss-line-strong); text-align: center; }

.nv-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.nv-meta-pic { order: -1; margin: 0; }
.nv-meta-pic > img, .nv-meta-pic > .img-ph { width: 100%; height: auto; border-radius: .5rem; }
.nv-meta-label { margin: 0 0 .5rem; font-size: var(--nv-m-sub); font-weight: 400; line-height: 1.5; color: var(--ss-ink); }
.nv-tl { position: relative; margin-top: 2rem; padding: 0; }
.nv-tl::before { content: ""; position: absolute; left: .4375rem; top: .75rem; bottom: 0; width: 1px; background: var(--ss-line-strong); }
.nv-tl-i { position: relative; padding: 0 0 1.125rem 2.5rem; }
.nv-tl-i::before { content: ""; position: absolute; left: 0; top: .5rem; width: .9375rem; height: .9375rem; border: 1px solid var(--ss-line-strong); border-radius: 50%; background: var(--ss-white); }
.nv-tl-t { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.nv-tl-d { margin: 0; font-size: var(--nv-m-body); line-height: 1.5; color: var(--ss-text-2); }
.nv-tl-p { position: relative; margin: 1.5rem 0 0; padding-left: 2.5rem; font-size: var(--nv-m-body); line-height: 1.45; color: var(--ss-text-2); }
@media (min-width: 768px) { .nv-tl-t { font-size: 1.25rem; } .nv-tl-i, .nv-tl-p { padding-left: 3.125rem; } .nv-tl-p { margin-top: 2.5rem; } }
@media (min-width: 992px) {
  .nv-meta { grid-template-columns: minmax(0, 628fr) minmax(0, 600fr); column-gap: var(--nv-colgap); align-items: center; }
  .nv-meta-pic { order: 0; }
  .nv-tl { margin-top: 3rem; }
}

.nv-banner { position: relative; display: flex; align-items: center; height: 9.375rem; margin-top: var(--nv-sec); color: var(--ss-white); }
.nv-banner > .container { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.nv-banner-t { margin: 0; font-size: 1.625rem; font-weight: 600; line-height: 1.2; color: inherit; }
.nv-banner-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 6.25rem; height: 1.875rem; border-radius: .3125rem; background: var(--ss-white); font-size: .75rem; font-weight: 600; line-height: 1; color: var(--ss-ink); transition: background-color .2s, color .2s; }
.nv-banner-btn:hover, .nv-banner-btn:focus-visible { background: var(--ss-ink); color: var(--ss-white); }
@media (min-width: 768px) { .nv-banner { height: 10.5rem; } .nv-banner > .container { align-items: center; } .nv-banner-t { font-size: 1.75rem; line-height: 1.3; } .nv-banner-btn { width: 12rem; height: 2.75rem; border-radius: .5rem; font-size: 1.0625rem; } }
@media (min-width: 992px) { .nv-banner { height: 11.25rem; } .nv-banner-t { font-size: 2rem; } .nv-banner-btn { width: 15.625rem; height: 3.125rem; font-size: 1.25rem; } }

.nv-about { position: relative; margin-top: var(--nv-sec); border-block: 1px solid var(--ss-line-strong); overflow-x: clip; }
.nv-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.nv-about-l { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.5rem 0; }
.nv-about-l > img, .nv-about-l > .img-ph { width: 100%; max-width: 31.25rem; height: auto; border-radius: .5rem; }
.nv-about-l::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--ss-line-strong); }
.nv-about-r { display: grid; grid-template-rows: auto auto; padding-left: 1.5rem; border-left: 1px solid var(--ss-line-strong); }
.nv-about-t { position: relative; align-self: end; margin: 0; padding: 4.5rem 0 1.5rem; font-size: 1.625rem; font-weight: 300; line-height: 1; color: var(--ss-ink); }
.nv-about-t::before, .nv-about-t::after { content: ""; position: absolute; }
.nv-about-t::after { left: -100vw; width: 200vw; bottom: -1px; height: 1px; background: var(--ss-line-strong); }
.nv-about-t::before { z-index: 1; left: calc(-1.5rem - .28rem); bottom: -.28rem; width: .5rem; height: .5rem; background: var(--ss-text-2); }
.nv-about-p { align-self: end; margin: 0; padding: 4.5rem 0 .75rem; font-size: var(--nv-m-body); line-height: 1.45; color: var(--ss-text-2); }
@media (min-width: 768px) { .nv-about-t { font-size: 3rem; } }
@media (min-width: 992px) {
  .nv-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 34.4375rem; }
  .nv-about-l { padding: 0 0 0 1.5rem; }
  .nv-about-l::after { display: none; }
  .nv-about-r { grid-template-rows: 1fr 1fr; padding-left: 3.5rem; }
  .nv-about-t { padding: 0 0 3rem; font-size: 3.75rem; }
  .nv-about-t::after { left: 0; width: 100vw; }
  .nv-about-t::before { left: calc(-3.5rem - .28rem); }
  .nv-about-p { padding: 2.75rem 0 .75rem; }
}

.nv-sys-h { text-align: left; }
.nv-mct .nv-sys-sub { margin-top: .5rem; font-size: var(--nv-m-sub); line-height: 1.5; color: var(--ss-ink); }
.nv-cards { display: flex; gap: 1.25rem; margin: 2rem calc(var(--ss-edge) * -1) 0; padding: 0 var(--ss-edge); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--ss-edge); scrollbar-width: none; }
.nv-cards::-webkit-scrollbar { display: none; }
.nv-card { flex: 0 0 17.75rem; display: flex; flex-direction: column; scroll-snap-align: start; border-radius: .5rem; overflow: hidden; }
.nv-card-fig { margin: 0; aspect-ratio: 414 / 257; background: var(--ss-bg-soft); }
.nv-card-fig > img, .nv-card-fig > .img-ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; border: 0; }
.nv-card-b { flex: 1; padding: 1.5rem 1.25rem 1.75rem; background: var(--ss-white); color: var(--ss-ink); transition: background-color .25s ease, color .25s ease; }
.nv-card-t { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: inherit; }
.nv-card-d { margin: .625rem 0 0; font-size: var(--nv-m-body); line-height: 1.45; color: var(--ss-text-2); transition: color .25s ease; }
.nv-card:hover .nv-card-b, .nv-card:focus-within .nv-card-b { background: var(--ss-ink); color: var(--ss-white); }
.nv-card:hover .nv-card-d, .nv-card:focus-within .nv-card-d { color: var(--ss-white); }
@media (min-width: 768px) {
  .nv-sys-h { text-align: center; }
  .nv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; overflow: visible; }
  .nv-card { flex: none; }
  .nv-card-b { padding: 1.5rem 1.25rem 1.75rem; }
  .nv-card-t { font-size: 1.0625rem; }
}
@media (min-width: 992px) { .nv-cards { gap: 1.5rem; } .nv-card-t { font-size: 1.125rem; } }
@media (min-width: 1400px) { .nv-cards { gap: 2rem; } .nv-card-t { font-size: 1.25rem; } .nv-card-b { padding: 1.75rem 1.5rem 2rem; } }

.nv-rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.nv-rec-list { margin: 1.5rem 0 0; padding: 0; }
.nv-rec-list li { display: flex; align-items: center; gap: .75rem; font-size: 1rem; line-height: 1.75; color: var(--ss-ink); }
.nv-rec-list li + li { margin-top: .5rem; }
.nv-rec-list .ss-ico { width: 1rem; height: 1rem; }
.nv-rec-vid { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ss-ink); }
.nv-rec-vid > img, .nv-rec-vid > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; border: 0; }
.nv-rec-v { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 768px) { .nv-rec-list { margin-top: 2rem; } .nv-rec-list li { font-size: 1.125rem; } .nv-rec-list li + li { margin-top: .75rem; } }
@media (min-width: 992px) { .nv-rec { grid-template-columns: minmax(0, 628fr) minmax(0, 600fr); column-gap: var(--nv-colgap); } .nv-rec-list li { font-size: 1.25rem; } .nv-rec-list li + li { margin-top: 1rem; } }

.nv-proc-ttl { margin-bottom: 2rem; }
.nv-proc-row { border-top: 1px solid var(--ss-line-strong); }
.nv-proc-row:last-child { border-bottom: 1px solid var(--ss-line-strong); }
.nv-proc-cells { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 calc(var(--ss-edge) * -1); padding: 0; }
.nv-proc-c { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 12.75rem; padding: 1.5rem var(--ss-edge) 1.5rem; transition: background-color .25s ease; }
.nv-proc-c + .nv-proc-c { border-top: 1px solid var(--ss-line-strong); }
.nv-proc-ic { position: absolute; top: 1.5rem; right: 1.25rem; width: 6.25rem; margin: 0; }
.nv-proc-ic > img, .nv-proc-ic > .img-ph { width: 100%; height: auto; }
.nv-proc-t { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: var(--ss-ink); transition: color .25s ease; }
.nv-proc-d { margin: .125rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--ss-text); transition: color .25s ease; }
.nv-proc-c:focus-within, .nv-proc-c:hover { background: var(--ss-ink); }
.nv-proc-c:focus-within .nv-proc-t, .nv-proc-c:hover .nv-proc-t, .nv-proc-c:focus-within .nv-proc-d, .nv-proc-c:hover .nv-proc-d { color: var(--ss-white); }
@media (min-width: 768px) {
  .nv-proc-ttl { margin-bottom: 3rem; }
  .nv-proc-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .nv-proc-c { min-height: 16rem; padding: 1.5rem 1.75rem 2rem; }
  .nv-proc-c + .nv-proc-c { border-top: 0; border-left: 1px solid var(--ss-line-strong); }
  .nv-proc-c:first-child { border-left: 1px solid var(--ss-line-strong); }
  .nv-proc-ic { top: 2.375rem; right: 2.5rem; width: 7.5rem; }
  .nv-proc-d { font-size: var(--nv-m-body); }
}
@media (min-width: 992px) { .nv-proc-c { min-height: 20rem; } .nv-proc-ic { width: 9.375rem; right: 3rem; } .nv-proc-d { font-size: 1.125rem; line-height: 1.45; } }

.nv-back { position: relative; height: 9.375rem; }
.nv-back .nv-fx-img { opacity: .4; }
@media (min-width: 768px) { .nv-back { height: 14rem; } }
@media (min-width: 992px) { .nv-back { height: 18.75rem; } }

/* 1018 수정(W-14): MCT 아이콘 비율 */
.nv-proc-ic > img { aspect-ratio: 150 / 155; object-fit: contain; }
.nv-proc-ic > img.d-md-none { aspect-ratio: 116 / 160; }