@charset "UTF-8";
/* ==========================================================
 * RUTA LSV (R&D > RUTA LSV, mid=52)
 * 색상은 OKLCH 사용. 기존 사이트 포인트 컬러(#004F96, #00A7E3)에 맞춤
 * ========================================================== */
.lsv-page {
	--lsv-main: oklch(0.42 0.13 252);      /* #004F96 근사 */
	--lsv-point: oklch(0.68 0.14 232);     /* #00A7E3 근사 */
	--lsv-text: oklch(0.24 0.01 255);
	--lsv-sub: oklch(0.50 0.012 255);
	--lsv-line: oklch(0.90 0.006 255);
	--lsv-soft: oklch(0.97 0.006 255);
	--lsv-dark: oklch(0.19 0.02 255);
	--lsv-dark-line: oklch(1 0 0 / 0.14);
	--lsv-dark-sub: oklch(0.80 0.01 255);
	color: var(--lsv-text);
}
.lsv-page section {padding: var(--space150) 0;}
.lsv-page img {display: block; width: 100%; height: auto;}
.lsv-label {display: block; margin-bottom: 18rem; font-family: var(--lang-ko); font-size: var(--kr-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lsv-main);}
.lsv-head {margin-bottom: var(--space80);}
.lsv-head h4 {color: var(--lsv-text);}
.lsv-head p {margin-top: 20rem; font-size: var(--kr-m); line-height: 1.7; color: var(--lsv-sub);}
.lsv-sub-title {margin: var(--space100) 0 30rem; font-size: var(--kr-xl); font-weight: 700; color: var(--lsv-text);}
.lsv-note {margin-top: 30rem; font-size: var(--kr-xs); line-height: 1.6; color: var(--lsv-sub);}

/* 1. 소개 */
.lsv-intro {padding-top: 0 !important;}
.lsv-intro .page-title-wrap p {font-size: var(--kr-m); color: var(--lsv-sub);}
.lsv-intro .page-title-wrap p span {display: block; margin-bottom: 8rem; font-size: var(--kr-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--lsv-main);}
.lsv-intro__con {display: grid; grid-template-columns: 1.45fr 1fr; gap: 70rem; align-items: center;}
.lsv-intro__img {overflow: hidden; border-radius: 20rem;}
.lsv-intro__facts {border-top: 2px solid var(--lsv-text);}
.lsv-intro__facts li {display: flex; justify-content: space-between; align-items: baseline; gap: 20rem; padding: 26rem 0; border-bottom: 1px solid var(--lsv-line);}
.lsv-intro__facts dt, .lsv-intro__facts em {font-size: var(--default); color: var(--lsv-sub);}
.lsv-intro__facts strong {font-size: var(--kr-xl); font-weight: 700; color: var(--lsv-text); text-align: right;}
.lsv-intro__facts strong small {margin-left: 4rem; font-size: var(--default); font-weight: 500; color: var(--lsv-sub);}

/* 2. 개발 배경 */
.lsv-bg {background: var(--lsv-soft);}
.lsv-issue {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--lsv-line); border-bottom: 1px solid var(--lsv-line);}
.lsv-issue li {padding: 45rem 40rem 50rem;}
.lsv-issue li + li {border-left: 1px solid var(--lsv-line);}
.lsv-issue__no {display: block; font-size: var(--kr-xs); font-weight: 700; color: var(--lsv-main);}
.lsv-issue__tit {display: block; margin-top: 10rem; font-size: var(--kr-lg); font-weight: 700; color: var(--lsv-text);}
.lsv-issue__num {display: block; margin: 30rem 0 6rem; font-size: 56rem; font-weight: 800; line-height: 1.1; color: var(--lsv-main);}
.lsv-issue__num small {margin-left: 4rem; font-size: 26rem; font-weight: 700;}
.lsv-issue__cap {display: block; font-size: var(--kr-sm); color: var(--lsv-sub);}
.lsv-issue p {margin-top: 24rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-text);}
.lsv-law {display: grid; grid-template-columns: 1fr 1.4fr; gap: 60rem; align-items: start; margin-top: var(--space100);}
.lsv-law h5 {font-size: var(--kr-2xl); color: var(--lsv-text);}
.lsv-law > div > p {margin-top: 16rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-sub);}
.lsv-table {width: 100%; border-collapse: collapse; border-top: 2px solid var(--lsv-text);}
.lsv-table th, .lsv-table td {padding: 20rem 24rem; font-size: var(--default); text-align: left; border-bottom: 1px solid var(--lsv-line);}
.lsv-table thead th {font-size: var(--kr-sm); font-weight: 700; color: var(--lsv-sub);}
.lsv-table tbody th {font-weight: 600; color: var(--lsv-text);}
.lsv-table td {color: var(--lsv-text);}
.lsv-law__result {margin-top: 24rem; font-size: var(--kr-m); font-weight: 700; color: var(--lsv-main);}

/* 3. 안전 설계 */
.lsv-pillar {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40rem;}
.lsv-pillar figure {overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16rem; background: var(--lsv-soft);}
.lsv-pillar figure img {height: 100%; object-fit: cover;}
.lsv-pillar__no {display: block; margin-top: 28rem; font-size: var(--kr-xs); font-weight: 700; color: var(--lsv-main);}
.lsv-pillar h5 {margin-top: 6rem; font-size: var(--kr-lg); color: var(--lsv-text);}
.lsv-pillar ul {margin-top: 14rem;}
.lsv-pillar li {font-size: var(--default); line-height: 1.7; color: var(--lsv-sub);}
.lsv-feature {display: grid; grid-template-columns: 1fr 1fr; column-gap: 70rem; border-top: 2px solid var(--lsv-text);}
.lsv-feature li {display: grid; grid-template-columns: 60rem 1fr; padding: 30rem 0; border-bottom: 1px solid var(--lsv-line);}
.lsv-feature li > span {font-size: var(--kr-m); font-weight: 700; color: var(--lsv-main);}
.lsv-feature strong {display: block; font-size: var(--kr-m); font-weight: 700; color: var(--lsv-text);}
.lsv-feature p {margin-top: 8rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-sub);}

/* 4. 승하차·적재·활용 */
.lsv-use {background: var(--lsv-soft);}
.lsv-use__con {display: grid; grid-template-columns: 1.3fr 1fr; gap: 70rem; align-items: center;}
.lsv-use__con figure {overflow: hidden; border-radius: 20rem;}
.lsv-use__spec > div {padding: 34rem 0; border-bottom: 1px solid var(--lsv-line);}
.lsv-use__spec > div:first-child {padding-top: 0;}
.lsv-use__spec strong {display: block; font-size: 52rem; font-weight: 800; line-height: 1.1; color: var(--lsv-main);}
.lsv-use__spec strong small {margin-left: 4rem; font-size: 24rem; font-weight: 700;}
.lsv-use__spec em {display: block; margin-top: 12rem; font-size: var(--kr-m); font-weight: 700; color: var(--lsv-text);}
.lsv-use__spec p {margin-top: 10rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-sub);}
.lsv-field {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rem;}
.lsv-field figure img {aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; border-radius: 16rem; background: var(--lsv-line);}
.lsv-field figcaption {margin-top: 16rem; font-size: var(--kr-m); font-weight: 700; color: var(--lsv-text);}

/* 5. 설계 기술 (어두운 섹션) */
.lsv-design {background: var(--lsv-dark); color: oklch(1 0 0);}
.lsv-design .lsv-label {color: var(--lsv-point);}
.lsv-design .lsv-head h4 {color: oklch(1 0 0);}
.lsv-design .lsv-head p {color: var(--lsv-dark-sub);}
.lsv-design__img {overflow: hidden; margin-bottom: var(--space80); border-radius: 20rem;}
.lsv-tech {display: grid; grid-template-columns: 1fr 1fr; column-gap: 70rem; border-top: 1px solid var(--lsv-dark-line);}
.lsv-tech li {padding: 30rem 0; border-bottom: 1px solid var(--lsv-dark-line);}
.lsv-tech strong {display: block; font-size: var(--kr-lg); font-weight: 700; color: oklch(1 0 0);}
.lsv-tech p {margin-top: 10rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-dark-sub);}
.lsv-design .lsv-sub-title {color: oklch(1 0 0);}
.lsv-step {display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: lsvstep;}
.lsv-step li {position: relative; padding: 34rem 30rem 0 0; border-top: 2px solid var(--lsv-dark-line);}
.lsv-step li::before {position: absolute; top: -7rem; left: 0; content: ''; width: 12rem; height: 12rem; border-radius: 50%; background: var(--lsv-point);}
.lsv-step span {display: block; font-size: var(--kr-xs); font-weight: 700; color: var(--lsv-point);}
.lsv-step strong {display: block; margin-top: 8rem; font-size: var(--kr-m); font-weight: 700; color: oklch(1 0 0);}
.lsv-step p {margin-top: 10rem; font-size: var(--kr-sm); line-height: 1.7; color: var(--lsv-dark-sub);}

/* 6. 주요 사양 */
.lsv-spec__con {display: grid; grid-template-columns: 1fr 1fr; gap: 70rem; align-items: center;}
.lsv-spec__con figure {overflow: hidden; border-radius: 20rem; background: oklch(0.98 0.004 90);}
.lsv-spec .lsv-table th {width: 38%;}

/* 7. 로드맵 */
.lsv-road {background: var(--lsv-soft);}
.lsv-road__list {position: relative; max-width: 1000rem;}
.lsv-road__list::before {position: absolute; top: 10rem; bottom: 10rem; left: 27rem; content: ''; width: 2px; background: var(--lsv-line);}
.lsv-road__list li {position: relative; display: grid; grid-template-columns: 56rem 1fr; gap: 30rem; padding-bottom: 46rem;}
.lsv-road__list li:last-child {padding-bottom: 0;}
.lsv-road__list li > span {position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; width: 56rem; height: 56rem; border-radius: 50%; font-size: var(--kr-lg); font-weight: 700; color: oklch(1 0 0); background: var(--lsv-main);}
.lsv-road__list li:last-child > span {background: var(--lsv-point);}
.lsv-road__list strong {display: block; padding-top: 12rem; font-size: var(--kr-lg); font-weight: 700; color: var(--lsv-text);}
.lsv-road__list p {margin-top: 10rem; font-size: var(--default); line-height: 1.7; color: var(--lsv-sub);}
.lsv-road__goal {margin-top: 50rem; font-size: var(--kr-m); font-weight: 700; color: var(--lsv-main);}

/* 8. 하단 */
.lsv-bottom {position: relative; display: flex; justify-content: center; align-items: center; height: 760rem; padding: var(--space120) 20rem !important; text-align: center; background: url(../img/sub/lsv/lsv-bottom.jpg) no-repeat center / cover;}
.lsv-bottom::before {position: absolute; inset: 0; content: ''; background: oklch(0 0 0 / 0.55);}
.lsv-bottom > div {position: relative;}
.lsv-bottom h6 {color: oklch(1 0 0);}

@media all and (max-width:1200px){
	.lsv-intro__con, .lsv-use__con, .lsv-spec__con {gap: 40rem;}
	.lsv-issue li {padding: 40rem 26rem;}
	.lsv-law {grid-template-columns: 1fr; gap: 30rem;}
	.lsv-feature, .lsv-tech {column-gap: 40rem;}
}

@media all and (max-width:1023px){
	.lsv-page section {padding: var(--space100) 0;}
	.lsv-intro__con, .lsv-use__con, .lsv-spec__con {grid-template-columns: 1fr;}
	.lsv-issue {grid-template-columns: 1fr;}
	.lsv-issue li + li {border-left: 0; border-top: 1px solid var(--lsv-line);}
	.lsv-issue li {padding: 34rem 0;}
	.lsv-pillar {grid-template-columns: 1fr; gap: 50rem;}
	.lsv-feature, .lsv-tech {grid-template-columns: 1fr;}
	.lsv-field {grid-template-columns: 1fr 1fr;}
	.lsv-step {grid-template-columns: 1fr 1fr; row-gap: 40rem;}
	.lsv-bottom {height: 560rem;}
}

@media all and (max-width:540px){
	.lsv-head {margin-bottom: 40rem;}
	.lsv-head p br {display: none;}
	/* 하단 문구: PC와 같은 비율(48px/1440px)로 축소, 2줄 유지 */
	.lsv-bottom h6 {font-size: 13rem; line-height: 1.5;}
	.lsv-sub-title {margin-top: 60rem;}
	/* 모바일 제목·큰 숫자 축소 (본문·안내 문구는 가독성 위해 유지) */
	.lsv-page .lsv-intro .page-title-wrap h3 {font-size: 22rem;}
	.lsv-page .lsv-head h4 {font-size: 18rem;}
	.lsv-page .lsv-sub-title, .lsv-page .lsv-law h5 {font-size: 16rem;}
	.lsv-issue__num, .lsv-use__spec strong {font-size: 30rem;}
	.lsv-issue__num small, .lsv-use__spec strong small {font-size: 15rem;}
	.lsv-intro__facts strong {font-size: 16rem;}
	.lsv-table th, .lsv-table td {padding: 16rem 12rem;}
	.lsv-feature li {grid-template-columns: 44rem 1fr;}
	.lsv-step {grid-template-columns: 1fr;}
	.lsv-road__list::before {left: 21rem;}
	.lsv-road__list li {grid-template-columns: 44rem 1fr; gap: 20rem;}
	.lsv-road__list li > span {width: 44rem; height: 44rem;}
	.lsv-road__list strong {padding-top: 8rem;}
	.lsv-bottom {height: 480rem;}
}