/*
	준스디자인 신혼집 인테리어 안내 페이지
	파일명 : system_codingpage_19.css
*/

:root {
	--juns-navy: #143d5b;
	--juns-navy-deep: #0a2a40;
	--juns-blue: #2e678b;
	--juns-blue-light: #dbe9f1;
	--juns-sky: #edf5f8;
	--juns-cream: #f7f4ee;
	--juns-beige: #e8dfd2;
	--juns-brown: #a78e72;
	--juns-text: #20282d;
	--juns-gray: #68747b;
	--juns-line: #dce3e6;
	--juns-white: #ffffff;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

.juns_page {
	width: 100%;
	overflow: hidden;
	color: var(--juns-text);
	background: #ffffff;
	font-family:
		"Pretendard",
		"SUIT",
		"Noto Sans KR",
		"Apple SD Gothic Neo",
		"Malgun Gothic",
		Arial,
		sans-serif;
	word-break: keep-all;
}

.juns_page a {
	color: inherit;
	text-decoration: none;
}

.juns_page button {
	font-family: inherit;
}

.juns_page img {
	display: block;
	max-width: 100%;
}

.juns_inner {
	position: relative;
	width: calc(100% - 60px);
	max-width: 1320px;
	margin: 0 auto;
}


/* 나타남 효과 */

.juns_reveal {
	opacity: 0;
	transform: translateY(35px);
	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.juns_reveal.juns_visible {
	opacity: 1;
	transform: translateY(0);
}


/* 공통 제목 */

.juns_section_heading {
	max-width: 720px;
}

.juns_section_heading_center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.juns_section_eyebrow {
	margin: 0 0 18px;
	color: var(--juns-blue);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.17em;
}

.juns_section_heading h2,
.juns_space_title h2,
.juns_check_heading h2 {
	margin: 0;
	color: var(--juns-text);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.38;
	letter-spacing: -0.055em;
}

.juns_section_heading h2 strong,
.juns_space_title h2 strong {
	color: var(--juns-navy);
	font-weight: 750;
}

.juns_section_heading > p:last-child {
	margin: 25px 0 0;
	color: var(--juns-gray);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: -0.025em;
}


/* 메인 비주얼 */

.juns_visual {
	position: relative;
	min-height: 850px;
	padding: 115px 0 105px;
	overflow: hidden;
	background:
		linear-gradient(
			135deg,
			#f4f7f8 0%,
			#eef4f6 46%,
			#e4edf1 100%
		);
}

.juns_visual::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 43%;
	height: 100%;
	background: rgba(20, 61, 91, 0.035);
	content: "";
}

.juns_visual_shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.juns_visual_shape_01 {
	top: -240px;
	right: -130px;
	width: 650px;
	height: 650px;
	border: 1px solid rgba(20, 61, 91, 0.13);
}

.juns_visual_shape_02 {
	bottom: -270px;
	left: -180px;
	width: 580px;
	height: 580px;
	background: rgba(255, 255, 255, 0.47);
}

.juns_visual_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 75px;
	min-height: 630px;
}

.juns_visual_text {
	position: relative;
	z-index: 3;
	flex: 0 1 590px;
}

.juns_visual_brand {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 28px;
	color: var(--juns-navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.juns_visual_brand_line {
	width: 38px;
	height: 1px;
	background: var(--juns-navy);
}

.juns_visual_eyebrow {
	margin: 0 0 16px;
	color: var(--juns-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.24em;
}

.juns_visual_title {
	margin: 0;
	color: var(--juns-text);
	font-size: 62px;
	font-weight: 350;
	line-height: 1.22;
	letter-spacing: -0.07em;
}

.juns_visual_title span {
	position: relative;
	color: var(--juns-navy);
	font-weight: 750;
}

.juns_visual_title span::after {
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	z-index: -1;
	height: 10px;
	background: rgba(104, 160, 190, 0.18);
	content: "";
}

.juns_visual_description {
	max-width: 550px;
	margin: 30px 0 0;
	color: #59676f;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: -0.025em;
}

.juns_visual_buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 38px;
}

.juns_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 25px;
	height: 60px;
	padding: 0 27px;
	border: 1px solid transparent;
	font-size: 14px;
	font-weight: 750;
	letter-spacing: -0.025em;
	transition:
		transform 0.25s ease,
		background 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.juns_button:hover {
	transform: translateY(-3px);
}

.juns_button_primary {
	color: #ffffff !important;
	background: var(--juns-navy);
	box-shadow: 0 15px 30px rgba(20, 61, 91, 0.17);
}

.juns_button_primary:hover {
	background: var(--juns-navy-deep);
	box-shadow: 0 19px 34px rgba(20, 61, 91, 0.23);
}

.juns_button_primary i {
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	transition: transform 0.25s ease;
}

.juns_button_primary:hover i {
	transform: translateX(5px);
}

.juns_button_light {
	border-color: rgba(20, 61, 91, 0.22);
	color: var(--juns-navy) !important;
	background: rgba(255, 255, 255, 0.63);
}

.juns_button_light:hover {
	border-color: var(--juns-navy);
	background: #ffffff;
}

.juns_visual_keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 31px;
}

.juns_visual_keywords span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 13px;
	border: 1px solid rgba(20, 61, 91, 0.14);
	border-radius: 30px;
	color: #61727c;
	background: rgba(255, 255, 255, 0.48);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.juns_visual_image_wrap {
	position: relative;
	z-index: 2;
	flex: 0 1 645px;
	padding:29px 26px 45px 44px;
}

.juns_visual_image_wrap::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 82%;
	height: 89%;
	border: 1px solid rgba(20, 61, 91, 0.17);
	content: "";
}

.juns_visual_image_frame {
	position: relative;
	overflow: hidden;
	border-radius:2px;
	background: #e8edef;
	box-shadow: 0 35px 65px rgba(31, 56, 70, 0.16);
}

.juns_visual_image_frame img {
	width:100%;
	height:500px;
	object-fit:cover;
	transition:transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.juns_visual_image_frame:hover img {
	transform: scale(1.035);
}

.juns_visual_image_overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(10, 42, 64, 0.03) 40%,
			rgba(10, 42, 64, 0.12) 100%
		);
	pointer-events: none;
}

.juns_visual_image_label {
	position: absolute;
	top: 25px;
	left: 26px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	padding: 13px 15px;
	color: var(--juns-navy);
	background: rgba(255, 255, 255, 0.83);
	backdrop-filter: blur(8px);
}

.juns_visual_image_label span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.juns_visual_image_label strong {
	margin-top: 3px;
	font-size: 15px;
	font-weight: 850;
	letter-spacing: 0.08em;
}

.juns_visual_floating_card {
	position: absolute;
	right: 0;
	bottom: 4px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 15px;
	min-width: 275px;
	padding: 21px 22px;
	color: #ffffff;
	background: var(--juns-navy);
	box-shadow: 0 17px 30px rgba(10, 42, 64, 0.22);
}

.juns_visual_floating_icon {
	position: relative;
	display: block;
	width: 39px;
	height: 39px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 50%;
}

.juns_visual_floating_icon i {
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ffffff;
}

.juns_visual_floating_icon i:nth-child(1) {
	top: 11px;
	left: 11px;
}

.juns_visual_floating_icon i:nth-child(2) {
	top: 11px;
	right: 11px;
}

.juns_visual_floating_icon i:nth-child(3) {
	right: 11px;
	bottom: 11px;
}

.juns_visual_floating_card strong {
	display: block;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.07em;
}

.juns_visual_floating_card p {
	margin: 5px 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	letter-spacing: -0.02em;
}

.juns_scroll_guide {
	position: absolute;
	bottom: 31px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
	color: rgba(20, 61, 91, 0.58);
	font-size: 9px;
	font-weight: 750;
	letter-spacing: 0.19em;
}

.juns_scroll_guide i {
	position: relative;
	display: block;
	width: 1px;
	height: 34px;
	overflow: hidden;
	background: rgba(20, 61, 91, 0.17);
}

.juns_scroll_guide i::after {
	position: absolute;
	top: -100%;
	left: 0;
	width: 1px;
	height: 100%;
	background: var(--juns-navy);
	animation: junsScrollLine 2s ease-in-out infinite;
	content: "";
}

@keyframes junsScrollLine {
	0% {
		top: -100%;
	}

	50% {
		top: 0;
	}

	100% {
		top: 100%;
	}
}


/* 소개 */

.juns_intro {
	padding: 135px 0 145px;
	background: #ffffff;
}

.juns_intro_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 23px;
	margin-top: 67px;
}

.juns_intro_card {
	position: relative;
	min-height: 345px;
	padding: 46px 40px 42px;
	border: 1px solid var(--juns-line);
	background: #ffffff;
	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.juns_intro_card:hover {
	z-index: 2;
	transform: translateY(-8px);
	border-color: rgba(20, 61, 91, 0.25);
	box-shadow: 0 25px 50px rgba(33, 55, 67, 0.09);
}

.juns_intro_number {
	position: absolute;
	top: 28px;
	right: 30px;
	color: #ced8dd;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.juns_intro_icon {
	position: relative;
	width: 70px;
	height: 70px;
	margin-bottom: 38px;
	border-radius: 50%;
	background: var(--juns-sky);
}

.juns_icon_talk span {
	position: absolute;
	top: 21px;
	left: 18px;
	width: 34px;
	height: 25px;
	border: 2px solid var(--juns-navy);
	border-radius: 4px;
}

.juns_icon_talk span::after {
	position: absolute;
	bottom: -7px;
	left: 7px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid var(--juns-navy);
	border-left: 2px solid var(--juns-navy);
	background: var(--juns-sky);
	transform: rotate(-45deg);
	content: "";
}

.juns_icon_plan span {
	position: absolute;
	top: 17px;
	left: 18px;
	width: 33px;
	height: 36px;
	border: 2px solid var(--juns-navy);
}

.juns_icon_plan span::before,
.juns_icon_plan span::after {
	position: absolute;
	background: var(--juns-navy);
	content: "";
}

.juns_icon_plan span::before {
	top: 9px;
	left: 7px;
	width: 17px;
	height: 2px;
	box-shadow: 0 7px 0 var(--juns-navy);
}

.juns_icon_plan span::after {
	right: 6px;
	bottom: 5px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.juns_icon_finish span {
	position: absolute;
	top: 17px;
	left: 17px;
	width: 36px;
	height: 36px;
	border: 2px solid var(--juns-navy);
	border-radius: 50%;
}

.juns_icon_finish span::before {
	position: absolute;
	top: 8px;
	left: 9px;
	width: 14px;
	height: 8px;
	border-bottom: 2px solid var(--juns-navy);
	border-left: 2px solid var(--juns-navy);
	transform: rotate(-45deg);
	content: "";
}

.juns_intro_card h3 {
	margin: 0;
	color: var(--juns-navy);
	font-size: 23px;
	font-weight: 750;
	letter-spacing: -0.04em;
}

.juns_intro_card p {
	margin: 17px 0 0;
	color: var(--juns-gray);
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: -0.025em;
}


/* 신혼집 인테리어 */

.juns_newlywed {
	position: relative;
	padding: 140px 0;
	background: var(--juns-cream);
}

.juns_newlywed::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 36%;
	height: 100%;
	background: rgba(226, 218, 205, 0.27);
	content: "";
}

.juns_newlywed_layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 0.77fr 1.23fr;
	gap: 105px;
}

.juns_newlywed_heading {
	position: sticky;
	top:130px;
	align-self: start;
}

.juns_newlywed_heading h2 {
	margin: 0;
	color: var(--juns-text);
	font-size:34px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.055em;
}

.juns_newlywed_heading h2 strong {
	color: var(--juns-navy);
	font-weight: 750;
}

.juns_newlywed_heading > p:not(.juns_section_eyebrow) {
	margin: 26px 0 0;
	color: var(--juns-gray);
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: -0.025em;
}

.juns_text_link {
	display: inline-flex;
	align-items: center;
	gap: 19px;
	margin-top: 34px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--juns-navy);
	color: var(--juns-navy) !important;
	font-size: 14px;
	font-weight: 750;
}

.juns_text_link i {
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	transition: transform 0.25s ease;
}

.juns_text_link:hover i {
	transform: translate(4px, -4px);
}

.juns_newlywed_list {
	border-top: 1px solid rgba(20, 61, 91, 0.19);
}

.juns_newlywed_item {
	padding: 40px 0 45px;
	border-bottom: 1px solid rgba(20, 61, 91, 0.19);
}

.juns_newlywed_item_top {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.juns_newlywed_index {
	color: var(--juns-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.juns_newlywed_line {
	width: 31px;
	height: 1px;
	background: rgba(20, 61, 91, 0.42);
}

.juns_newlywed_item h3 {
	margin: 0;
	color: var(--juns-navy);
	font-size: 26px;
	font-weight: 750;
	letter-spacing: -0.045em;
}

.juns_newlywed_item > p {
	margin: 16px 0 0;
	color: #687178;
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: -0.02em;
}

.juns_newlywed_item ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.juns_newlywed_item li {
	position: relative;
	padding-left: 16px;
	color: #44545d;
	font-size: 12px;
	font-weight: 650;
}

.juns_newlywed_item li::before {
	position: absolute;
	top: 7px;
	left: 3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--juns-blue);
	content: "";
}


/* 디자인 스타일 */

.juns_style {
	padding: 140px 0 150px;
	background: #ffffff;
}

.juns_style_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 65px;
}

.juns_style_card {
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 15px 40px rgba(35, 52, 61, 0.07);
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
}

.juns_style_card:hover {
	transform: translateY(-9px);
	box-shadow: 0 25px 55px rgba(35, 52, 61, 0.13);
}

.juns_style_visual {
	position: relative;
	height: 310px;
	overflow: hidden;
}

.juns_style_visual::before,
.juns_style_visual::after {
	position: absolute;
	content: "";
}

.juns_style_visual_01 {
	background:
		linear-gradient(
			145deg,
			#f0ebe2 0%,
			#e1d2bf 100%
		);
}

.juns_style_visual_01::before {
	right: -25px;
	bottom: -35px;
	width: 260px;
	height: 185px;
	border-radius: 110px 0 0;
	background: #b79673;
	box-shadow: -140px -42px 0 -60px rgba(255, 255, 255, 0.85);
}

.juns_style_visual_01::after {
	top: 55px;
	left: 52px;
	width: 135px;
	height: 170px;
	border: 13px solid rgba(255, 255, 255, 0.75);
}

.juns_style_visual_02 {
	background:
		linear-gradient(
			145deg,
			#dfe5e8 0%,
			#b8c5cc 100%
		);
}

.juns_style_visual_02::before {
	right: 45px;
	bottom: 0;
	width: 215px;
	height: 145px;
	background: #5d6870;
	box-shadow: -98px 24px 0 -24px #eceff0;
}

.juns_style_visual_02::after {
	top: 0;
	left: 60px;
	width: 1px;
	height: 148px;
	background: rgba(40, 55, 64, 0.5);
	box-shadow: 44px 0 0 rgba(40, 55, 64, 0.5);
}

.juns_style_visual_03 {
	background:
		linear-gradient(
			145deg,
			#ece7db 0%,
			#d7d3bf 100%
		);
}

.juns_style_visual_03::before {
	right: 42px;
	bottom: 27px;
	width: 225px;
	height: 135px;
	border-radius: 68px 68px 8px 8px;
	background: #a8aa8f;
}

.juns_style_visual_03::after {
	top: 45px;
	left: 45px;
	width: 145px;
	height: 176px;
	border-radius: 100px 100px 0 0;
	background: rgba(248, 246, 238, 0.8);
}

.juns_style_visual_shape {
	position: absolute;
	top: 33px;
	right: 35px;
	z-index: 2;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(20, 61, 91, 0.28);
	border-radius: 50%;
}

.juns_style_visual_light {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 42%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.3),
		rgba(255, 255, 255, 0)
	);
}

.juns_style_content {
	padding: 31px 30px 35px;
}

.juns_style_number {
	color: var(--juns-blue);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.15em;
}

.juns_style_content h3 {
	margin: 12px 0 0;
	color: var(--juns-navy);
	font-size: 25px;
	font-weight: 720;
	letter-spacing: -0.035em;
}

.juns_style_content p {
	margin: 14px 0 0;
	color: var(--juns-gray);
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: -0.02em;
}


/* 공간별 안내 */

.juns_space {
	padding: 140px 0 145px;
	background: #eef4f6;
}

.juns_space_top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 70px;
}

.juns_space_title {
	flex: 0 1 660px;
}

.juns_space_description {
	flex: 0 1 450px;
	margin: 0 0 8px;
	color: var(--juns-gray);
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: -0.02em;
}

.juns_space_tabs {
	display: flex;
	align-items: center;
	margin-top: 57px;
	border-bottom: 1px solid rgba(20, 61, 91, 0.17);
}

.juns_space_tab {
	position: relative;
	min-width: 120px;
	height: 55px;
	padding: 0 20px;
	border: 0;
	color: #7c898f;
	background: transparent;
	font-size: 14px;
	font-weight: 650;
	cursor: pointer;
	transition: color 0.25s ease;
}

.juns_space_tab::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--juns-navy);
	transform: scaleX(0);
	transition: transform 0.25s ease;
	content: "";
}

.juns_space_tab:hover,
.juns_space_tab.active {
	color: var(--juns-navy);
}

.juns_space_tab.active::after {
	transform: scaleX(1);
}

.juns_space_contents {
	margin-top: 40px;
}

.juns_space_content {
	display: none;
	grid-template-columns: 1.2fr 0.8fr;
	min-height: 460px;
	background: #ffffff;
	box-shadow: 0 25px 55px rgba(35, 58, 70, 0.09);
}

.juns_space_content.active {
	display: grid;
	animation: junsContentShow 0.45s ease;
}

@keyframes junsContentShow {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.juns_space_mockup {
	position: relative;
	min-height: 460px;
	overflow: hidden;
}

.juns_space_info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px 57px;
}

.juns_space_info_number {
	color: var(--juns-blue);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.15em;
}

.juns_space_info h3 {
	margin: 20px 0 0;
	color: var(--juns-navy);
	font-size: 30px;
	font-weight: 730;
	line-height: 1.45;
	letter-spacing: -0.05em;
}

.juns_space_info p {
	margin: 20px 0 0;
	color: var(--juns-gray);
	font-size: 15px;
	line-height: 1.85;
	letter-spacing: -0.025em;
}

.juns_space_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 30px;
}

.juns_space_tags span {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--juns-line);
	color: #607078;
	background: #ffffff;
	font-size: 11px;
	font-weight: 650;
}


/* 거실 모형 */

.juns_space_mockup_living {
	background:
		linear-gradient(
			180deg,
			#e9e5dc 0%,
			#ddd4c5 100%
		);
}

.juns_room_window {
	position: absolute;
	top: 45px;
	left: 55px;
	width: 225px;
	height: 220px;
	border: 13px solid rgba(255, 255, 255, 0.78);
	background:
		linear-gradient(
			135deg,
			#dbe9ed,
			#f6f8f8
		);
	box-shadow:
		inset 1px 0 rgba(70, 95, 106, 0.13),
		inset -1px 0 rgba(70, 95, 106, 0.13);
}

.juns_room_window::after {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: rgba(70, 95, 106, 0.2);
	content: "";
}

.juns_room_sofa {
	position: absolute;
	right: 65px;
	bottom: 76px;
	width: 360px;
	height: 130px;
	border-radius: 42px 42px 10px 10px;
	background: #a5aa9c;
	box-shadow:
		-145px 31px 0 -40px #a5aa9c,
		0 18px 25px rgba(61, 68, 60, 0.12);
}

.juns_room_table {
	position: absolute;
	right: 275px;
	bottom: 38px;
	width: 165px;
	height: 42px;
	border-radius: 50%;
	background: #997c5e;
	box-shadow: 0 11px 20px rgba(74, 57, 40, 0.18);
}

.juns_room_table::after {
	position: absolute;
	top: 31px;
	left: 80px;
	width: 5px;
	height: 52px;
	background: #735e49;
	content: "";
}

.juns_room_light {
	position: absolute;
	top: 0;
	right: 145px;
	width: 2px;
	height: 105px;
	background: #6c777c;
}

.juns_room_light::after {
	position: absolute;
	right: -29px;
	bottom: -28px;
	width: 60px;
	height: 29px;
	border-radius: 50% 50% 7px 7px;
	background: #536169;
	content: "";
}

.juns_room_rug {
	position: absolute;
	right: 85px;
	bottom: -34px;
	width: 420px;
	height: 130px;
	border-radius: 50%;
	background: rgba(238, 232, 217, 0.72);
}


/* 주방 모형 */

.juns_space_mockup_kitchen {
	background:
		linear-gradient(
			145deg,
			#e5e2da 0%,
			#c9c6bd 100%
		);
}

.juns_kitchen_wall {
	position: absolute;
	top: 55px;
	right: 75px;
	width: 460px;
	height: 260px;
	background: #e9e8e3;
	box-shadow: -170px 50px 0 -110px rgba(255, 255, 255, 0.7);
}

.juns_kitchen_cabinet {
	position: absolute;
	right: 75px;
	bottom: 70px;
	width: 465px;
	height: 145px;
	background:
		repeating-linear-gradient(
			90deg,
			#9f8a73 0,
			#9f8a73 113px,
			#806e5d 114px,
			#806e5d 115px
		);
}

.juns_kitchen_island {
	position: absolute;
	right: 115px;
	bottom: 20px;
	width: 380px;
	height: 115px;
	background: #f1efea;
	box-shadow:
		inset 0 8px #d3c7b7,
		0 18px 28px rgba(60, 57, 50, 0.15);
	transform: skewY(-1deg);
}

.juns_kitchen_light {
	position: absolute;
	top: 0;
	left: 205px;
	width: 2px;
	height: 110px;
	background: #5f696e;
	box-shadow: 150px 0 #5f696e;
}

.juns_kitchen_light::before,
.juns_kitchen_light::after {
	position: absolute;
	bottom: -16px;
	width: 38px;
	height: 20px;
	border-radius: 50% 50% 8px 8px;
	background: #445158;
	content: "";
}

.juns_kitchen_light::before {
	left: -18px;
}

.juns_kitchen_light::after {
	left: 132px;
}

.juns_kitchen_chair {
	position: absolute;
	bottom: 5px;
	width: 54px;
	height: 66px;
	border: 5px solid #6c5e4e;
	border-bottom: 0;
	border-radius: 25px 25px 0 0;
}

.juns_kitchen_chair_01 {
	right: 180px;
}

.juns_kitchen_chair_02 {
	right: 285px;
}


/* 침실 모형 */

.juns_space_mockup_bedroom {
	background:
		linear-gradient(
			145deg,
			#d9d2c7 0%,
			#bfb6aa 100%
		);
}

.juns_bedroom_wall {
	position: absolute;
	top: 30px;
	left: 65px;
	width: 190px;
	height: 240px;
	border: 12px solid rgba(245, 241, 232, 0.74);
	background: #c5d1d2;
}

.juns_bedroom_bed {
	position: absolute;
	right: 55px;
	bottom: 30px;
	width: 440px;
	height: 190px;
	border-radius: 15px 15px 3px 3px;
	background: #eee9df;
	box-shadow:
		inset 0 23px #d9cfc0,
		0 22px 35px rgba(76, 66, 55, 0.16);
	transform: skewX(-2deg);
}

.juns_bedroom_pillow {
	position: absolute;
	z-index: 3;
	bottom: 157px;
	width: 125px;
	height: 57px;
	border-radius: 8px 18px 8px 18px;
	background: #f6f3eb;
	box-shadow: 0 7px 13px rgba(82, 71, 58, 0.09);
}

.juns_bedroom_pillow_01 {
	right: 265px;
	transform: rotate(4deg);
}

.juns_bedroom_pillow_02 {
	right: 130px;
	transform: rotate(-4deg);
}

.juns_bedroom_table {
	position: absolute;
	right: 30px;
	bottom: 72px;
	width: 75px;
	height: 83px;
	background: #8d735b;
}

.juns_bedroom_light {
	position: absolute;
	top: 62px;
	right: 48px;
	width: 2px;
	height: 103px;
	background: #63594e;
}

.juns_bedroom_light::after {
	position: absolute;
	right: -25px;
	bottom: -17px;
	width: 52px;
	height: 27px;
	border-radius: 50% 50% 6px 6px;
	background: #77695b;
	content: "";
}


/* 수납 모형 */

.juns_space_mockup_storage {
	background:
		linear-gradient(
			145deg,
			#e5ded3 0%,
			#c7bba9 100%
		);
}

.juns_storage_wall {
	position: absolute;
	top: 38px;
	right: 75px;
	bottom: 28px;
	left: 75px;
	background: rgba(244, 240, 232, 0.82);
}

.juns_storage_cabinet {
	position: absolute;
	top: 65px;
	bottom: 40px;
	width: 165px;
	background:
		repeating-linear-gradient(
			90deg,
			#a89073 0,
			#a89073 80px,
			#8c755c 81px,
			#8c755c 82px
		);
}

.juns_storage_cabinet_01 {
	left: 95px;
}

.juns_storage_cabinet_02 {
	right: 95px;
}

.juns_storage_shelf {
	position: absolute;
	left: 290px;
	width: 200px;
	height: 15px;
	background: #9c8265;
	box-shadow:
		0 56px #9c8265,
		0 112px #9c8265;
}

.juns_storage_shelf_01 {
	top: 92px;
}

.juns_storage_shelf_02 {
	top: 260px;
}

.juns_storage_bench {
	position: absolute;
	right: 245px;
	bottom: 37px;
	width: 270px;
	height: 62px;
	background: #b9a58d;
	box-shadow: inset 0 9px rgba(255, 255, 255, 0.17);
}


/* 진행 절차 */

.juns_process {
	padding: 140px 0 150px;
	background: #ffffff;
}

.juns_process_list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
	margin-top: 72px;
}

.juns_process_list::before {
	position: absolute;
	top: 48px;
	right: 9%;
	left: 9%;
	height: 1px;
	background: var(--juns-line);
	content: "";
}

.juns_process_item {
	position: relative;
	z-index: 2;
	text-align: center;
}

.juns_process_circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 97px;
	height: 97px;
	margin: 0 auto;
	border: 1px solid var(--juns-line);
	border-radius: 50%;
	background: #ffffff;
	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
}

.juns_process_circle span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 67px;
	height: 67px;
	border-radius: 50%;
	color: var(--juns-navy);
	background: var(--juns-sky);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	transition:
		color 0.3s ease,
		background 0.3s ease;
}

.juns_process_item:hover .juns_process_circle {
	border-color: var(--juns-navy);
	transform: translateY(-5px);
}

.juns_process_item:hover .juns_process_circle span {
	color: #ffffff;
	background: var(--juns-navy);
}

.juns_process_item h3 {
	margin: 25px 0 0;
	color: var(--juns-navy);
	font-size: 18px;
	font-weight: 750;
	letter-spacing: -0.035em;
}

.juns_process_item p {
	margin: 13px 0 0;
	color: var(--juns-gray);
	font-size: 13px;
	line-height: 1.75;
	letter-spacing: -0.02em;
}


/* 상담 전 체크 */

.juns_check {
	padding: 0 0 145px;
	background: #ffffff;
}

.juns_check_box {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 85px;
	padding: 75px 80px;
	background: var(--juns-cream);
}

.juns_check_heading h2 {
	font-size: 35px;
	line-height: 1.5;
}

.juns_check_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.juns_check_item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	min-height: 104px;
	padding: 23px 20px;
	background: rgba(255, 255, 255, 0.72);
}

.juns_check_icon {
	display: flex;
	flex: 0 0 39px;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	border-radius: 50%;
	color: #ffffff;
	background: var(--juns-navy);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.juns_check_item strong {
	display: block;
	color: var(--juns-navy);
	font-size: 14px;
	font-weight: 750;
}

.juns_check_item p {
	margin: 8px 0 0;
	color: var(--juns-gray);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.02em;
}


/* 하단 상담 */

.juns_contact {
	position: relative;
	padding: 135px 0 140px;
	overflow: hidden;
	color: #ffffff;
	background:
		linear-gradient(
			135deg,
			#0c3048 0%,
			#164966 100%
		);
	text-align: center;
}

.juns_contact::before {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		),
		linear-gradient(
			rgba(255, 255, 255, 0.025) 1px,
			transparent 1px
		);
	background-size: 50px 50px;
	content: "";
}

.juns_contact_circle {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.juns_contact_circle_01 {
	top: -230px;
	left: -150px;
	width: 530px;
	height: 530px;
}

.juns_contact_circle_02 {
	right: -180px;
	bottom: -310px;
	width: 650px;
	height: 650px;
}

.juns_contact_content {
	position: relative;
	z-index: 2;
	max-width: 820px;
	margin: 0 auto;
}

.juns_contact_eyebrow {
	margin: 0 0 25px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.2em;
}

.juns_contact h2 {
	margin: 0;
	color: #ffffff;
	font-size: 47px;
	font-weight: 450;
	line-height: 1.4;
	letter-spacing: -0.055em;
}

.juns_contact_content > p:not(.juns_contact_eyebrow) {
	margin: 25px 0 0;
	color: rgba(255, 255, 255, 0.68);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: -0.025em;
}

.juns_contact_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 42px;
	min-width: 290px;
	height: 64px;
	margin-top: 42px;
	padding: 0 27px;
	color: var(--juns-navy) !important;
	background: #ffffff;
	font-size: 14px;
	font-weight: 800;
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.juns_contact_button:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}

.juns_contact_button i {
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	transition: transform 0.25s ease;
}

.juns_contact_button:hover i {
	transform: translateX(5px);
}

/* 모바일 */

@media screen and (max-width: 768px) {

	.juns_inner {
		width: calc(100% - 36px);
	}

	.juns_section_heading h2,
	.juns_space_title h2,
	.juns_check_heading h2 {
		font-size: 30px;
		line-height: 1.45;
	}

	.juns_section_heading > p:last-child {
		margin-top: 18px;
		font-size: 14px;
		line-height: 1.75;
	}

	.juns_section_eyebrow {
		margin-bottom: 13px;
		font-size: 10px;
	}


	/* 모바일 비주얼 */

	.juns_visual {
		padding: 70px 0 80px;
	}

	.juns_visual::before {
		display: none;
	}

	.juns_visual_inner {
		display: block;
		min-height: auto;
	}

	.juns_visual_text {
		max-width: none;
	}

	.juns_visual_brand {
		margin-bottom: 21px;
		font-size: 9px;
	}

	.juns_visual_eyebrow {
		font-size: 10px;
		letter-spacing: 0.18em;
	}

	.juns_visual_title {
		font-size:30px;
		line-height: 1.28;
	}

	.juns_visual_description {
		margin-top: 22px;
		font-size: 14px;
		line-height: 1.8;
	}

	.juns_visual_buttons {
		align-items: stretch;
		margin-top: 30px;
	}

	.juns_button {
		flex: 1;
		height: 56px;
		padding: 0 16px;
		font-size: 12px;
	}

	.juns_button_primary {
		gap: 13px;
	}

	.juns_button_light {
		display: none;
	}

	.juns_visual_keywords {
		margin-top: 23px;
	}

	.juns_visual_keywords span {
		height: 28px;
		padding: 0 10px;
		font-size: 10px;
	}

	.juns_visual_image_wrap {
		margin-top: 48px;
		padding: 16px 10px 37px 20px;
	}

	.juns_visual_image_frame img {
		height: auto;
		min-height: 300px;
		object-fit: cover;
	}

	.juns_visual_image_label {
		top: 15px;
		left: 15px;
		padding: 9px 10px;
	}

	.juns_visual_image_label span {
		font-size: 8px;
	}

	.juns_visual_image_label strong {
		font-size: 11px;
	}

	.juns_visual_floating_card {
		right: 0;
		bottom: 0;
		min-width: 235px;
		padding: 15px 16px;
	}

	.juns_visual_floating-icon {
		width: 34px;
		height: 34px;
	}

	.juns_scroll_guide {
		display: none;
	}


	/* 소개 */

	.juns_intro {
		padding: 90px 0 95px;
	}

	.juns_intro_grid {
		grid-template-columns: 1fr;
		gap: 13px;
		margin-top: 42px;
	}

	.juns_intro_card {
		min-height: auto;
		padding: 32px 26px 31px;
	}

	.juns_intro_icon {
		width: 60px;
		height: 60px;
		margin-bottom: 25px;
		transform: scale(0.88);
		transform-origin: left top;
	}

	.juns_intro_card h3 {
		font-size: 20px;
	}

	.juns_intro_card p {
		margin-top: 12px;
		font-size: 13px;
		line-height: 1.75;
	}


	/* 신혼집 */

	.juns_newlywed {
		padding: 90px 0;
	}

	.juns_newlywed::before {
		width: 100%;
		height: 350px;
	}

	.juns_newlywed_layout {
		display: block;
	}

	.juns_newlywed_heading {
		position: relative;
		top: auto;
	}

	.juns_newlywed-heading h2 {
		font-size:20px;
	}

	.juns_newlywed_heading > p:not(.juns_section_eyebrow) {
		margin-top: 19px;
		font-size: 14px;
		line-height: 1.8;
	}

	.juns_text_link {
		margin-top: 25px;
		font-size: 12px;
	}

	.juns_newlywed_list {
		margin-top: 55px;
	}

	.juns_newlywed_item {
		padding: 31px 0 34px;
	}

	.juns_newlywed_item h3 {
		font-size: 22px;
	}

	.juns_newlywed_item > p {
		font-size: 13px;
		line-height: 1.75;
	}

	.juns_newlywed_item ul {
		display: block;
	}

	.juns_newlywed_item li + li {
		margin-top: 8px;
	}


	/* 스타일 */

	.juns_style {
		padding: 90px 0 95px;
	}

	.juns_style_grid {
		grid-template-columns: 1fr;
		gap: 17px;
		margin-top: 42px;
	}

	.juns_style_visual {
		height: 245px;
	}

	.juns_style_content {
		padding: 25px 24px 28px;
	}

	.juns_style_content h3 {
		font-size: 22px;
	}


	/* 공간 */

	.juns_space {
		padding: 90px 0 95px;
	}

	.juns_space_top {
		display: block;
	}

	.juns_space_description {
		margin-top: 20px;
		font-size: 13px;
		line-height: 1.75;
	}

	.juns_space_tabs {
		overflow-x: auto;
		margin-top: 35px;
		-webkit-overflow-scrolling: touch;
	}

	.juns_space_tab {
		flex: 0 0 84px;
		min-width: 84px;
		height: 49px;
		padding: 0 10px;
		font-size: 12px;
	}

	.juns_space_contents {
		margin-top: 25px;
	}

	.juns_space_content,
	.juns_space_content.active {
		grid-template-columns: 1fr;
	}

	.juns_space_mockup {
		min-height: 290px;
	}

	.juns_space_info {
		padding: 34px 25px 38px;
	}

	.juns_space_info h3 {
		margin-top: 14px;
		font-size: 23px;
	}

	.juns_space_info p {
		margin-top: 15px;
		font-size: 13px;
		line-height: 1.75;
	}

	.juns_room_window {
		top: 28px;
		left: 25px;
		width: 135px;
		height: 145px;
		border-width: 8px;
	}

	.juns_room_sofa {
		right: 20px;
		bottom: 47px;
		width: 220px;
		height: 80px;
		box-shadow:
			-75px 20px 0 -27px #a5aa9c,
			0 12px 18px rgba(61, 68, 60, 0.12);
	}

	.juns_room_table {
		right: 125px;
		bottom: 24px;
		width: 105px;
		height: 28px;
	}

	.juns_room_table::after {
		top: 22px;
		left: 51px;
		height: 31px;
	}

	.juns_room_light {
		right: 80px;
		height: 67px;
	}

	.juns_room_rug {
		right: 15px;
		width: 270px;
	}

	.juns_kitchen_wall {
		top: 35px;
		right: 25px;
		width: 280px;
		height: 160px;
	}

	.juns_kitchen_cabinet {
		right: 25px;
		bottom: 42px;
		width: 280px;
		height: 90px;
	}

	.juns_kitchen_island {
		right: 43px;
		width: 235px;
		height: 72px;
	}

	.juns_kitchen_light {
		left: 100px;
		height: 68px;
		box-shadow: 100px 0 #5f696e;
	}

	.juns_kitchen-light::after {
		left: 82px;
	}

	.juns_kitchen_chair_01 {
		right: 90px;
	}

	.juns_kitchen_chair_02 {
		right: 160px;
	}

	.juns_bedroom_wall {
		top: 25px;
		left: 25px;
		width: 110px;
		height: 150px;
		border-width: 8px;
	}

	.juns_bedroom_bed {
		right: 15px;
		width: 275px;
		height: 120px;
	}

	.juns_bedroom_pillow {
		bottom: 110px;
		width: 78px;
		height: 37px;
	}

	.juns_bedroom_pillow_01 {
		right: 155px;
	}

	.juns_bedroom_pillow_02 {
		right: 73px;
	}

	.juns_bedroom_table {
		right: 8px;
		bottom: 43px;
		width: 48px;
		height: 57px;
	}

	.juns_storage_wall {
		top: 22px;
		right: 24px;
		bottom: 18px;
		left: 24px;
	}

	.juns_storage_cabinet {
		top: 37px;
		bottom: 25px;
		width: 90px;
	}

	.juns_storage_cabinet_01 {
		left: 35px;
	}

	.juns_storage_cabinet_02 {
		right: 35px;
	}

	.juns_storage_shelf {
		left: 140px;
		width: 95px;
	}

	.juns_storage_bench {
		right: 107px;
		width: 135px;
	}


	/* 절차 */

	.juns_process {
		padding: 90px 0 95px;
	}

	.juns_process_list {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 45px;
	}

	.juns_process_list::before {
		top: 30px;
		bottom: 30px;
		left: 35px;
		width: 1px;
		height: auto;
	}

	.juns_process_item {
		display: grid;
		grid-template-columns: 70px 1fr;
		grid-template-rows: auto auto;
		column-gap: 20px;
		padding: 15px 0;
		text-align: left;
	}

	.juns_process_circle {
		grid-row: 1 / 3;
		width: 70px;
		height: 70px;
		margin: 0;
	}

	.juns_process_circle span {
		width: 50px;
		height: 50px;
		font-size: 10px;
	}

	.juns_process_item h3 {
		align-self: end;
		margin: 4px 0 0;
		font-size: 16px;
	}

	.juns_process_item p {
		margin: 7px 0 0;
		font-size: 12px;
	}


	/* 체크 */

	.juns_check {
		padding-bottom: 90px;
	}

	.juns_check_box {
		display: block;
		padding: 43px 22px;
	}

	.juns_check_heading h2 {
		font-size: 27px;
	}

	.juns_check_list {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-top: 35px;
	}

	.juns_check_item {
		min-height: auto;
		padding: 19px 17px;
	}


	/* 상담 */

	.juns_contact {
		padding: 90px 0 95px;
	}

	.juns_contact h2 {
		font-size: 32px;
		line-height: 1.45;
	}

	.juns_contact_content > p:not(.juns_contact_eyebrow) {
		margin-top: 19px;
		font-size: 13px;
		line-height: 1.75;
	}

	.juns_contact_button {
		width: 100%;
		min-width: 0;
		height: 59px;
		margin-top: 32px;
		font-size: 13px;
	}

}


/* 모션 최소화 환경 */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.juns_reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.juns_scroll_guide i::after {
		animation: none;
	}

}