body {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	.header {
		background: #FFF;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		top: 0;
		box-sizing: border-box;
		border-bottom: 1px solid #DDD;
		z-index: 100;
	}
	.logo {
		margin-left: 15px;
	}
	.menu-btn {
		margin-right: 15px;
	}
	.nav {
		position: fixed;
		top: 0;
		right: -250px;
		width: 250px;
		height: 100%;
		background: white;
		padding-top: 60px;
		transition: right 0.3s ease-in-out;
		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
		text-align: center;
		z-index: 99;
	}
	.nav-menu1 { border-top: 1px solid #DDD; }
	.nav a { color: black; display: block; padding: 15px; text-decoration: none; border-bottom: 1px solid #DDD; }
	.nav a:hover { background: #C0C0C0; color: white; }
	.nav.open { right: 0; }
	.nav-overlay.active { display: block; }
	.nav-title { text-align: center; }
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 15px;
		margin-top: 30px;
		background-color: #F0F0F0;
	}
	.footer {
		background-color: #383838;
		color: #FFF;
		font-size: 0.8rem;
		padding: 10px;
	}

	.footer, .footer .logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0px;
    justify-content: center;
    flex-wrap: wrap;
	}

	.footer .copyright {
		text-align: center;
	}

	.search-container {
		text-align: center;
		width: 100%;
		max-width: 1200px;
		padding: 30px;
	}

	h1 {
		font-size: 1.75rem;
		font-weight: 700;
		color: #2c3e50;
		margin-bottom: 25px;
		letter-spacing: 0.5px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	}

	.search-bar {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.tab-menu {
		display: flex;
		width: 100%;
		max-width: 850px;
		background: #ffffff;
		border-radius: 30px;
		overflow: hidden;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
/*
	.tab-menu:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05);
	}
*/
	select.tab-item {
		padding: 20px 0px;
		text-align: center;      /* 텍스트 가운데 정렬 */
		text-align-last: center; /* 선택된 옵션 가운데 정렬 */
		appearance: none;        /* 브라우저 기본 스타일 제거 */
		-webkit-appearance: none;
		-moz-appearance: none;
	}

	select.tab-item {
		flex: 1;
	}

	input.tab-item {
		flex: 1.5;
	}

	.tab-item {
		padding: 20px 8px;
		border: none;
		border-right: 1px solid #e0e6ed;
		font-size: 1.125rem;
		color: #5c6b80;
		outline: none;
		background: #f7f9fc;
		cursor: pointer;
		transition: background 0.3s ease, color 0.3s ease;
		font-weight: bold;
	}

	.tab-item:hover {
		background: #e6ecf2;
		color: #2c3e50;
	}

	.tab-item:last-child {
		border-right: none;
	}

	.tab-item.input-text {
		background: #fff;
		cursor: text;
		font-size: 0.938rem;
		font-weight: 600;
		text-align: center;
	}

	.tab-item option {
		color: #2c3e50;
	}

	.search-btn {
		padding: 12px 25px;
		background: linear-gradient(45deg, #EC868C, #D80C18);
		border: none;
		border-radius: 0 30px 30px 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background 0.3s ease, transform 0.2s ease;
	}

	.search-btn:hover {
		background: linear-gradient(45deg, #D70C19, #D70C19);
/*		transform: scale(1.05);	*/
	}

	.search-btn:active {
		transform: scale(0.95);
	}

	.search-btn i {
		font-size: 1rem;
		color: #FFF;
	}

	/* 커스텀 회전 애니메이션 */
	.custom-spin {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.search-btn-text {
		display: none;
		padding-left: 10px;
		color: #FFF;
		font-size: 1rem;
		font-weight: bolder;
	}

	.search-product, .result {
		display: none;
		margin-top: 30px;
		padding: 20px;
		border-radius: 10px;
		background-color: #FFF;
	}

	#result_title {
		color: gray;
	}

	.search_keyword {
		color: #800000;
	}

	#result_guide {
		font-weight: 300;
		font-size: 0.875rem;
		margin:5px 0 20px;
		color: gray;
	}

	/* 기본 리스트 스타일 제거 및 정렬 */
	.custom-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center; /* 목록 가운데 정렬 */
		gap: 10px; /* 요소 간격 */
	}

	.custom-list li {
		white-space: nowrap; /* 텍스트 줄바꿈 방지 */
		position: relative;
		padding: 0 10px 0 0; /* 요소 간격 */
	}

	/* 기본적으로 " | " 추가 */
	.custom-list li::before {
		content: "|";
		position: absolute;
		left: -10px;
		color: #DDD !important;
		font-weight: 300 !important;
	}

	/* 첫 번째 요소 앞에는 " | " 제거 */
	.custom-list li:first-child::before {
		content: none;
	}

	/* 각 줄의 첫 번째와 마지막 요소에서 " | " 제거 */
		.custom-list .first-in-line::before,
		.custom-list .last-in-line::after {
		content: none !important;
	}

	.custom-list li {
		display: inline-block;
		margin: 5px 6px;
		padding: 0;
		text-decoration: none;
		color: #000;
		white-space: nowrap;
		color: black;
		border: none;
		background: none;
		transition: all 0.2s ease;
	}

	/* 마우스를 올렸을 때 버튼처럼 보이게 함 */
	.custom-list li:hover {
		background-color: #3367ED;
		color: white;
		margin: 0;
		padding: 5px 6px; /* 약간 커지는 효과 */
		border-radius: 5px;
		cursor: pointer;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	/* 클릭했을 때 버튼이 살짝 눌리는 효과 */
	.custom-list li:active {
		transform: scale(0.95); /* 크기를 살짝 줄여 눌린 느낌 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 그림자 줄임 */
	}

	table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
		text-align: center !important;
		white-space: nowrap;
		padding: 0 20px 20px;
	}

	table.dataTable tbody td:nth-child(1), table.dataTable tbody td:nth-child(4) {
		width: 25%;
	}

	table.dataTable tbody td:nth-child(2) {
		width: 50%;
		text-align: left;
		white-space: normal !important
	}

	table.dataTable tbody td {
		white-space: nowrap;
		padding: 20px !important;
	}

	/* 기본 테이블 스타일 */
	table.dataTable {
		width: 100%;
	}

	td.address, td.telno {
		cursor:pointer;
		line-height: 1.6;
	}

	td.address:hover, td.telno:hover {
		color: #007bff;
		text-decoration: underline;
	}

	/* 데스크톱 레이아웃 */
	@media screen and (min-width: 768px) {
		table.dataTable tbody td {
			display: table-cell;
		}

		.footer {
			gap: 5%;
		}
	}

	/* 모바일 레이아웃 */
	@media screen and (max-width: 767px) {
	/* 헤더 숨기기 */
		table.dataTable thead {
			display: none;
		}

		.address {
			text-align: left !important;
		}

		/* 각 행을 블록 요소로 */
		table.dataTable tbody tr {
			display: block;
			margin-bottom: 15px;
			border: 1px solid #ddd;
			padding: 10px;
		}

		/* 셀을 블록 요소로 변환하고 줄바꿈 */
		table.dataTable tbody td {
			display: block;
			text-align: left;
			padding: 5px 0;
			width: auto !important;
		}

		table.dataTable.row-border>tbody>tr>th, table.dataTable.row-border>tbody>tr>td, table.dataTable.display>tbody>tr>th, table.dataTable.display>tbody>tr>td {
			border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
		}

		/* 데이터 앞에 컬럼 이름 추가 */
		table.dataTable tbody td:before {
			content: attr(data-label) ": ";
			font-weight: bold;
			margin-right: 5px;
		}
	}

	/* 반응형 디자인 */
	@media (max-width: 768px) {
		h1 {
			font-size: 1.375rem;
		}

		.tab-menu {
			flex-direction: column;
			border-radius: 20px;
		}

		.tab-item {
			border-right: none;
			border-bottom: 1px solid #e0e6ed;
			padding: 15px;
		}

		.tab-item:last-child {
			border-bottom: none;
		}

		.search-btn {
			border-radius: 0 0 20px 20px;
			padding: 15px;
		}

		.search-btn-text {
			display: inline-block;
		}
	}

	@media (max-width: 480px) {
		h1 {
			font-size: 1.125rem;
		}

		.tab-item {
			font-size: 1rem;
		}

		.search-btn svg {
			width: 16px;
			height: 16px;
		}
	}