:root {
    --vh: 100%;

	/*컬러값*/
	--main-color: black;
	--border-color: #cccccc;

}
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
html {
	/* Prevent font scaling in landscape */
	-webkit-text-size-adjust: 100%; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: 100%; /*Firefox*/
	-ms-text-size-adjust: 100%; /*Ie*/
	-o-text-size-adjust: 100%; /*old versions of Opera*/
	text-size-adjust: 100%;

}
* {
	/* Prevent font scaling in landscape */
	-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: none; /*Firefox*/
	-ms-text-size-adjust: none; /*Ie*/
	-o-text-size-adjust: none; /*old versions of Opera*/
	text-size-adjust: none;
	font-size:10px;
	box-sizing:border-box;
}
body *  {	/* Prevent font scaling in landscape */
	-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
	-moz-text-size-adjust: none; /*Firefox*/
	-ms-text-size-adjust: none; /*Ie*/
	-o-text-size-adjust: none; /*old versions of Opera*/
	text-size-adjust: none;
	margin: 0;
	line-height:1;
	font-family: "Noto Sans KR", sans-serif;
}
body {
	height: 100vh; /* 혹시나 Custom Property 지원 안하는 브라우저를 위한 복귀점(Fallback) */
	height: calc(var(--vh, 1vh) * 100);
	width: calc(var(--vw, 1vw) * 100);
	color: var(--main-color);
	margin: 0 auto;
	    overflow-x: hidden;
}
header {

	display: block;

}
a {
    text-decoration: none;
    color:unset;
}
a:visited {
    color:unset;
}
option {}
.top-area {
	max-width:1024px; }
.top-area .logo-box {
	display: flex;
	align-items: flex-end;
	}
	.top-area .logo-box .img_logo {width:135px}
	.top-area .logo-box .subtxt {
		font-size: 1.4rem;
		color: #888;
		margin-left: 5px;
	}
.user-menu {
	display: flex;
	align-items: center;
}
.user-menu .btn-search-sgn {
	cursor:pointer;
}
.user-menu .btn-search-sgn img {width:21px;}
/*hamberger menu*/
.menu-trigger {
margin-left:13px;
cursor:pointer;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .49s;
  box-sizing: border-box;
}

.menu-trigger {
  position: relative;
  width: 24px;
  height: 21px;
}

.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 3px;
}

.menu-trigger span:nth-of-type(1) {
  top: 0;
}

.menu-trigger span:nth-of-type(2) {
  top: 9px;
}

.menu-trigger span:nth-of-type(3) {
	bottom:0
}



/* 검색 및 속보 섹션 */
.search-section { padding: 15px; background: #fff; }
.search-btn { background: #eee; padding: 15px; border-radius: 5px; margin-bottom: 10px; display: block; text-decoration: none; color: #333; font-weight: bold; }

/* 가로 스크롤 카드 섹션 (TODAY 추천물건) */
.recommend-section { padding: 15px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.card-container { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.card { flex: 0 0 250px; background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; scroll-snap-align: start; }
.card img { width: 100%; height: 150px; background: #ccc; }
.card-info { padding: 10px; font-size:1.4rem; }
.card-price { color: #d32f2f; font-weight: bold; }

/* 하단 푸터 */
footer { background: #333; color: #ccc; padding: 20px; font-size: 12px;     position: absolute;
    bottom: 0;    width: 100%;}


/* 사이드 메뉴 */
.side-menu {
position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
    z-index: 1002;
    overflow-y: auto;
    padding: 0 25px;

    /* 핵심: display 대신 transform 사용 */
    transform: translateX(105%); /* 100%보다 살짝 더 밀어서 그림자까지 숨김 */
    transition: transform 0.3s ease-in-out; /* 들어오고 나갈 때 모두 적용 */

    /* 레이아웃은 미리 잡아둠 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.side-menu * {
		font-size:1.6rem;
}
/* 메뉴가 열린 상태에 붙는 클래스 */
.side-menu.open {
transform: translateX(0);
}
.side-menu.open .gnb {
list-style:none;
    width: 85%;
    margin: 0 auto;
}
.side-menu.open .gnb li {
	border: solid 1px #ccc;
    padding: 0.7rem 0rem;
    text-align: center;
	margin-bottom:0.8rem;
}
.side-menu.open .gnb li a {
	display: flex;
    align-items: center;
    justify-content: center;
	color:#999;
}
.side-menu.open .side-menu-logo_img {
width:40%;
margin-right:0.5rem;
}
.logo .logo_img, .logo .logo_imgsub {
cursor:pointer;
}

.title-wrap {}
.side-section {width: 100%;}
.side-section-wrap {
width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.side-section-top {width: 100%;}
.side-section-top div {text-align:left; line-height: 1.6;}
.side-section-top .loca {color:#0070c0;}
.side-section-top .date {color:#ff0000;font-weight:600;}

/* 로그인 전*/
	.side-section-top .login-box.before {
		background-color: #fff;
		padding: 5px 5px;
		width: 100%;
		margin-bottom: 20px;
	}
		.side-section-top .login-box.before .login-prompt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			font-size: 18px;
			color: #333;
			margin-bottom: 10px;
			border-bottom: 0px solid #ddd;
			flex-direction: column;
		}
		.side-section-top .login-box.before .login-links a {
			font-size: 14px;
			color: #999;
		}
		.side-section-top .login-box.before .login-links a.login-join {
			font-weight: 600;
			color: #000;
		}
		.side-section-top .login-box.before .login-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 0px 0 20px 0;
		}
			.side-section-top .login-box.before .login-left .material-symbols-outlined {
				font-size: 64px;
				color: #d5d5d5;
				margin-bottom: 1rem;
			}
				.side-section-top .login-box.before .login-left span {
					color: #777;
				}
		.side-section-top .login-box.before .login-buttons {
			display: flex;
			gap: 5px;
			flex-direction: column;
				width: 100%;
		}
			.side-section-top .login-box.before .login-buttons .login-buttons-box {
				display: flex;
				width: 100%;
				gap: 5px;
				flex-direction: column;
			}
			.side-section-top .login-buttons .btn {
				padding: 12px 12px;
				border: none;
				border-radius: 5px;
				font-size: 15px;
				cursor: pointer;
				transition: background-color 0.2s ease;
				display: flex;
				align-items: center;
				font-weight: 600;
				justify-content: center;
			}
	.side-section-top .btn.primary-btn {
		background-color: #0070C0;
		color: #fff;
	}
	.side-section-top .btn.naver-btn {
		background-color: #03C75A;
		color: #fff;
	}
		.side-section-top .login-buttons .naver-btn::before {
			content: '';
			background: url(/commonV2/images/icon/ico_naver_brown_24.png);
			background-repeat: no-repeat;
			background-size: 12px 12px;
			display: block;
			width: 12px;
			height: 12px;
			margin-right: 5px;
		}
	.side-section-top .btn.kakao-btn {
		background-color: #FEE500;
		color: #3C1E1E;
	}
		.side-section-top .login-buttons .kakao-btn::before {
			content: '';
			background: url(/commonV2/images/icon/ico_kakao_brown_24.png);
			background-repeat: no-repeat;
			background-size: 16px 16px;
			display: block;
			width: 16px;
			height: 16px;
			margin-right: 5px;
		}

	.side-section-top .mainlogin.used-last-wrap {
		position: relative;
		width: 100%;
		height: 1px;
	}
		.side-section-top .mainlogin.used-last-wrap .used-last-icon {
			position: absolute;
			right: 14px;
			border-radius: 5px 5px;
			align-items: center;
			display: none;
		}
			.side-section-top .mainlogin.used-last-wrap .used-last-icon-triangle {
				width: 0px;
				height: 0px;
				border-right: 6px solid #000;
				border-top: 3px solid transparent;
				border-bottom: 3px solid transparent;
			}
			.side-section-top .mainlogin.used-last-wrap .used-last-icon-before {
				background-color: #000000;
				padding: 2px 5px;
				border-radius: 5px 5px;
				color: #fff;
				font-size: 12px;
				line-height: 1.4;
			}
				.side-section-top .mainlogin.used-last-wrap .used-last-icon.sys-id {
					top: 15px;
					display: flex;
				}
				.side-section-top .mainlogin.used-last-wrap .used-last-icon.sys-naver {
					top: 60px;
					display: flex;
				}
				.side-section-top .mainlogin.used-last-wrap .used-last-icon.sys-kakao {
					top: 104px;
					display: flex;
				}


.name {}
.locadate {}
.submenu {margin:15px 0;}
.submenu a {color:#777}
.submenu a::before {
content:'l';
margin:0 5px;
color:#ccc;
}

.submenu a:first-child::before {
	display:none
}
.side-section-menu {
	background: #f2f2f2;
	padding: 10px 10px;
	border-radius: 5px 5px;
	width: 100%;
	display: inline-flex;
	align-items: center;
}
	.side-section-menu .home {
		display: inline-flex;
		width: 100%;
		align-items: center;
	}
		.side-section-menu .home img {
			width:23px;
			margin-right:15px;
		}

.side-section-list {

	margin-top:20px;
}

.side-section-list .left-menu {
    display: flex;
    align-items: center;
	padding:5px 10px;
}
.side-section-list .left-menu .material-symbols-outlined {color:#777; margin-right:15px;}

.logo-row {
	display: flex;
	align-items: center;
	height: 57px;
	padding:15px;
	justify-content: space-between;
	    width: 100%;
}
.logo {
	font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}
.logo .logo_img {
	width:22%;
}
.logo_shape {
	font-size:1.3rem;
	color:#bbbbbb;
	margin:0 0px;
}
.logo_imgsub {
	width:12%;
}


.nav-row {display:none}
.nav-row nav .gnb-mb_wrap {gap:15px;align-items: center; display:none}
.nav-row nav .gnb-mb_wrap li {
    color: #fff;
    font-size: 18px;
}
.nav-row nav .gnb-mb_wrap li a {
	color:#fff;
	font-size: 18px;
}

.menu-more-box {}

/*사건번호검색*/
    .sagun-search-content {
        background: #fff;
        width: 100%;
        max-height: 80vh;
        margin-top: 0px;
        border-radius: 8px;
        position: relative;
        overflow-y: auto;
        padding: 13px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    .sagun-search-content .saguns-cont-box {
        height: 1000px;
        background: #fff;
        padding: 0px;
    }
	    .saguns-cont-box .num-input-box {
        display: flex;
        align-items: center;
        width: 100%;
        background: #f3f3f3;
        border-radius: 25px 25px;
        padding: 8px 5px;
        justify-content: center;
        margin-bottom: 10px;
    }
	    .saguns-cont-box .num-input-box .search_simple {
            padding: 0px;
			border: 0px solid #ddd;
			border-radius: 4px;
			font-size: 1.6rem;
			color: #333;
			background-color: unset;
			margin-right:5px;

		}
	    .saguns-cont-box .num-input-box .search_simple option {
			font-size: 1.6rem;
			}
	    .saguns-cont-box .num-input-box .sagunsearch-select {
        border: 0;
        background: #f3f3f3;
        font-size:1.6rem;
        width: 25%;
        margin: 0 7px 0 0px;
    }
	    .saguns-cont-box .num-input-box .sagunsearch-select option {
        font-size:1.6rem;
    }
	    .saguns-cont-box .num-input-box span {
        font-weight: 600;
        font-size:1.6rem;
        color: #232284;
    }
	    .saguns-cont-box .num-input-box .sagunsearch-input {
        border: 0;
        background: #f3f3f3;
        font-size:1.6rem;
        width: 42%;
        border-bottom: solid 1px #ccc;
        height: 26px;
        margin: 0 10px 0 7px;
    }
	    .saguns-cont-box .num-input-box .sagun-s-go img {
        width: 15px;
    }
	    .recently-view {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
	    .recently-view .list-title {
        margin-bottom: 10px;
        margin-top: 10px;
        font-size: 1.8rem;
    }
	    .recently-view .list-list {
        gap: 0px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: row;
        width: 100%;
    }
	    .list-list .list-listcont a {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        width: 99px;
        margin-bottom: 15px;
    }
	    .list-list .list-listcont img {
        width: 94px;
        border-radius: 7px 7px;
        height: 77px;
    }
	    .list-listcont .sagun-num-txt {
        font-size: 1.4rem;
        margin: 3px 0 0 0;
    }


/*모달 컨텐츠*/
.modal-overlay {
	position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.modal, .fav-detail-wrap, .popup-notice-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 0px;
    border-radius: 5px;
    z-index: 1001;
    width: 90%;
    max-width: 900px;
    min-width: 260px;
	/*height: calc(var(--vh, 1vh) * 100 - 20%);*/
}
.modal.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); /* 제자리로 올라오며 나타남 */
}
.modal h3{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
	padding-bottom:15px;
}
.modal h3 span {
	font-size:1.8rem;
}
.modal-content {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative; /* 닫기 버튼 위치 지정을 위해 */
}
.side-close-button {
    background: none;
    border: solid 0px #ccc;
    border-radius: 35px 35px;
    cursor: pointer;
    /* padding: 0.4rem; */
    width: 35px;
    height: 35px;
    margin: 10px 0;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
}
.close-button {
    background: none;
    cursor: pointer;
    font-size: 2rem;

}
/* 오버레이 */
.menu-overlay {
	position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.menu-overlay.show { opacity: 1;
opacity: 1;
    visibility: visible;
	}

/*footer*/
#footer-section {
    background: #404040;
    color: #D9D9D9;
	padding: 20px 0 20px 0;
    width: 100%;
    min-width: 1200px;
}
.footer-item {
    width: 100%;
    max-width: 1200px;
    min-width: 1200px;
    margin: 15px auto;
    display: flex;
    align-items: flex-start;
    padding: 0px;
    font-size:1.4rem;
    font-family: sans-serif;footer-menu
    border-radius: 15px 15px;
    justify-content: space-between;
    gap: 15px;
	    flex-direction: column;
}
#footer-section-respn {
    background: #404040;
    color: #D9D9D9;
	padding: 20px 20px;
    width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	        box-sizing: border-box;
}
#footer-section-respn ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-item-respn {max-width:1024px;}
	.footer-item-respn .footer-menu-respn {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0px;
		font-size:1.4rem;
		font-family: sans-serif;footer-menu
		border-radius: 15px 15px;
		justify-content: space-between;
		gap: 15px;
		flex-direction: column;
		margin-bottom:30px;
	}
		.footer-item-respn .footer-menu-respn select {
			width: 100%;
			background: #7f7f7f;
			border: 0;
			border-radius: 5px 5px;
			text-align:center;
			color:#fff;
			padding:5px;
			font-size: 1.6rem;
		}
		.footer-item-respn .footer-menu-respn select option {

			font-size: 1.6rem;
		}
		.footer-info-respn {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap:24px;
			width: 100%;
		}
			.footer-info-respn .logo-gray-respn {
				width: 15%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
				.footer-info-respn .logo-gray-respn img {width:90px;}
				.footer-info-respn .cmpany-info-respn {}
				.footer-info-respn .cmpany-info-respn .title-respn {}
				.footer-info-respn .cmpany-info-respn .contt-respn {font-size:1.4rem; padding-top: 15px; line-height:1.4;   text-align: left;}
				.footer-info-respn .cmpany-info-respn .copyright-respn {    text-align: left;}
    .footer-info-respn .logo-gray-respn img {
        width: 90px;
    }

    #footer-section-respn {
        background: #404040;
        color: #D9D9D9;
        padding: 20px 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }


/*공통*/
button {border:0; background:unset;padding:0; margin:0; cursor:pointer;}
/* 글자색 */
.txtred {color:red }
.txtblack {color:#000000;}
.txtblue {color:#0000ff !important;}
.txtgray {color:#7f7f7f;}
.txtunder {text-decoration:underline}
/*라디오 체크박스*/
label {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

[type="radio"] {
		appearance: none;
		border: max(1px, 1px) solid gray;
		border-radius: 50%;
		width:18px ;
		height: 18px;
		transition: border 0.2s ease-in-out;
		transition: background 0.2s ease-in-out;
		margin-right:5px;
		margin-left: 0;
		cursor: pointer;
	}
[type="radio"]:checked {
		border: 5px solid #0066ff;
	}


input[type="checkbox"] {
		display: inline-block;
		width: 16px;
		height: 16px;
		background-color: transparent;
		border: 1px solid red;
		position: relative;
		cursor: pointer;
		margin-right: 5px;
	}
	input[type="checkbox"]::before, input[type="checkbox"]::after {
	  content: '';
	  display: inline-block;
	  width: 1px;
	  height: 0;
	  background-color: red;
	  position: absolute;
	  transform-origin: left top;
	}
	input[type="checkbox"]::before {
	  top: 9px;
	  left: 2px;
	  transform: rotate(-45deg);
	}
	input[type="checkbox"]::after {
  top: 16px;
  left: 9px;
  transform: rotate(-135deg);
}
input[type="radio"]:checked + label {
    font-weight:600;
    color: #0066ff !important;
}
/* 기본 스타일 (모바일) */
    ::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        height: 0;
        background: transparent;
        -webkit-appearance: none;
    }

/* Custom, iPhone Retina : 320px ~ */
@media only screen and (min-width : 320px) {

}
/*  : 360px ~ */
@media only screen and (min-width : 360px) {

}
/* Extra Small Devices, Phones : 480px ~ */
@media only screen and (min-width : 480px) {
.side-menu.open{width: 300px;}
}
/* Small Devices, Tablets : 768px ~ */
@media only screen and (min-width : 768px) {
.side-menu.open{width: 300px;}
}
/* Medium Devices, Desktops : 992px ~ */
@media only screen and (min-width : 992px) {
.side-menu.open{width: 300px;}
}
/* Large Devices, Wide Screens : 1200px ~ */
@media only screen and (min-width : 1024px) {
.side-menu.open{width: 300px;}
}


@media only screen and (max-width : 700px) {
	.nav-row nav .gnb-mb_wrap li:last-child {
		margin-right:40px;
	}
}

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

	.width1024{display:none !important;}
}