:root {
		--white: #fff;
		--black: #000;
		--gray: #333;
		--gray6: #666;
		--gray9: #eae9e9;
		--blue: #2f79d9;
		--blue60: #bed0f0;
		--darkblue: #008080; 
		--purple:#8b00ff;   /*보라색*/
		--sky: #f4f6fa;
		--font-size-base: 1em;
		--font-size-6xs: calc(var(--font-size-base) * 0.25);
		--font-size-5xs: calc(var(--font-size-base) * 0.3125);
		--font-size-4xs: calc(var(--font-size-base) * 0.375);
		--font-size-3xs: calc(var(--font-size-base) * 0.5);
		--font-size-2xs: calc(var(--font-size-base) * 0.625);
		--font-size-xs: calc(var(--font-size-base) * 0.75);
		--font-size-sm: calc(var(--font-size-base) * 0.875);
		--font-size-md: var(--font-size-base);
		--font-size-lg: calc(var(--font-size-base) * 1.25);
		--font-size-xl: calc(var(--font-size-base) * 1.5);
		--font-size-2xl: calc(var(--font-size-base) * 2);
		--font-size-3xl: calc(var(--font-size-base) * 2.5);
		--font-size-4xl: calc(var(--font-size-base) * 3);
		--font-size-5xl: calc(var(--font-size-base) * 3.75);
		--font-size-6xl: calc(var(--font-size-base) * 4.5);
}
*, *::before, *::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		zoom: 100%;
}

html {
		width: 100%;
		height: 100%
}

body {
		position: relative;
		font-family: 'Pretendard Variable', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;
		font-size: var(--font-size-base);
		letter-spacing: -0.2px;
		color: var(--gray);
		height: 100%;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		line-height: 1.1;
		scroll-behavior: smooth;
		text-rendering: optimizespeed;
}		
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {
		margin: 0;
		padding: 0 ;
	 
}			
ul, ol, li {
		list-style: none;
		line-height: 2;
}			
input::placeholder {
		color: var(--gray6)!important; /* Use a lighter shade of gray */
		opacity: 0.5!important; /* Ensure the placeholder text is fully visible */
}			
.no-mg {
	padding-left: 0!important ;
	padding-right: 0!important ;
}
.step-box {
	width: 100%;
	position: relative;
	border-radius: 5px;
	padding: 5px;
	background-color: var(--gray9);
}
.step-text {
	position: absolute;
	left:20px;
	font-size: var(--font-size-xs);
}
.title-text {
	font-size: var(--font-size-sm);
}
.detail-text {
	font-size: var(--font-size-2xs);
}
.address-text {
	font-size: var(--font-size-xs);
}
.contact-text {
	font-size: var(--font-size-3xs);
}
.form-readonly {
	background-color: var(--gray9);
}
.form-checkbox {
	font-size: var(--font-size-2xl);
}
.inverse-text {
	background-color: var(--blue)!important;
	color: var(--white)!important;
}
#price-table {
	border : var(--blue) 1px solid;
	text-align: center;
}
#addressResult li {
    background-color: var(--white); /* 기본 배경색 */
    color: var(--black); /* 기본 글자색 */
    padding: 10px; /* 여백 */
    border: 1px solid var(--gray9); /* 경계선 */
    border-radius: 5px; /* 모서리 둥글게 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 부드러운 전환 효과 */
}

#addressResult li:hover {
    background-color: var(--gray9); /* 마우스 올렸을 때 배경색 */
    color: var(--blue); /* 마우스 올렸을 때 글자색 */
    cursor: pointer; /* 마우스 포인터 변경 */
}
#addressResult .list-group-item.selected {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
.bottom-fixed-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px;
		background-color: var(--blue);
		color: white;
		text-align: center;
		z-index: 1000;
}			
.bottom-fixed-btn-r {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		padding: 15px;
		color: white;
		text-align: center;
		z-index: 1000;
}			
.step {
	background-color: var(--white);
}
#page1 .contact {
		background-color: var(--sky);
		padding: 10px;
}
#page1 .contact ul {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
}
#page1 .contact ul li:nth-child(1) {
		line-height: 1.2;
		font-size: var(--font-size-sm);
}
#page1 .contact ul li:nth-child(2) {
		font-size: var(--font-size-2xl);
		font-weight: 800;
}			
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 부모 요소 설정 */
.input-with-unit {
    position: relative;
    display: inline-block;
	width: 100%;
}

/* "원" 위치 조정 */
.input-with-unit .unit {
    position: absolute;
    top: 50%;
    right: 10px; /* 여백 설정 */
    transform: translateY(-50%);
    pointer-events: none; /* 클릭 이벤트 방지 */
    color: #6c757d; /* 부드러운 색상 */
    font-size: 0.875rem; /* 적절한 크기 */
}
/* 공통 스타일로 label 폭 고정 */
.fixed-label {
    width: 90px; /* 모든 label 요소 동일 폭 */
    flex-shrink: 0; /* label의 축소 방지 */
}