/* ------------------- 공통여백 마가기준 설명 - 다르게줄때는 _사이트코드에 재작성하기 */

.eb-inner {max-width:1400px; width:92%; margin:0 auto; height: 100%; position: relative;}

.eb-pd-visual       { padding:30px 0 30px 0 } /* 비주얼영역 ex) 마알메인 */
.eb-pd-visual_title { padding:0px 0 20px 0 }  /* 비주얼제목 */

.eb-pd-index     { padding:80px 0 0 0 } /* 인덱스의 큰영역별 간격 */
.eb-pd-section   { padding:50px 0 0 0 } /* 리스트등 영역 */
.eb-pd-section-m { padding:40px 0 0 0 } /* 뷰페이지기준 소개,코스,리뷰,댓글등 큰영역 */
.eb-pd-section-s { padding:30px 0 0 0 } /* 최소단위 */

.eb-pd-title   { padding:0 0 30px 0 } 
.eb-pd-title-m { padding:0 0 20px 0 } /* 뷰페이지기준 소개,코스,리뷰,댓글등 타이틀 */
.eb-pd-title-s { padding:0 0 10px 0 }

.eb-mg-section   { margin:50px 0 0 0 } /* 서브영역별 마진줘야할때 */
.eb-mg-section-m { margin:40px 0 0 0 }
.eb-mg-section-s { margin:30px 0 0 0 }

@media (max-width: 1023px) { /* 모바일,테블릿까지 */

	.eb-pd-visual       { padding:20px 0 20px 0 }
	.eb-pd-visual_title { padding:0px 0 0 0 }

	.eb-pd-index     { padding:50px 0 0 0 }
	.eb-pd-section   { padding:40px 0 0 0 }
	.eb-pd-section-m { padding:30px 0 0 0 } 
	.eb-pd-section-s { padding:20px 0 0 0 }

	.eb-pd-title   { padding:0 0 20px 0 } 
	.eb-pd-title-m { padding:0 0 15px 0 }

	.eb-mg-section   { margin:40px 0 0 0 } /* 서브영역별 마진줘야할때 */
	.eb-mg-section-m { margin:30px 0 0 0 }
	.eb-mg-section-s { margin:20px 0 0 0 }

}

.top-safe-area { /* 상단 노치 색상입히기 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: env(safe-area-inset-top, 0px);
	background: var(--color-basic, transparent);
	z-index: 9999;
	pointer-events: none;
}

.top-safe-height { /* 상단 노치 영역확보 */
    display: block; /* 공간 확실히 차지 */
	width: 100%;
    height: 0;
    height: env(safe-area-inset-top, 0px); 
}

.bottom-safe-area { /* 하단 노치 색상입히기 - 하단퀵이 없을때 bottom-safe-height 과 같이 사용하여 하단노치 투명안되게하고 공간 확보하기  */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
	background: var(--safe-color, transparent);
    z-index: 9999;
    pointer-events: none; 
}

.bottom-safe-height { /* 하단 노치 영역확보 */
    display: block;
    width: 100%;
	height: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 0px);
}

.bottom-safe-height-quick { /* 하단 노치 영역확보 - 모바일 퀵 대응 */
    display: block;
    width: 100%;
    height: calc(env(safe-area-inset-bottom, 0px) + 50px);
    position: relative;
}

.eb-pd-safe { /* 모달창등을 띄울때 아이프레임에 노치영역 공간확보해줘야함 */
    padding-top: 0;
    padding-bottom: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0px);
}


/* ------------------- 자주쓰는 */

.wsn  { white-space:nowrap; overflow: hidden;}
.tdlt { text-decoration: line-through;}

.flexww  {flex-wrap:Wrap }
.fsita   { font-style: italic; } 
.textac  { text-align: center; } 
.center  { text-align: center; } 
.textar  { text-align: right; } 
.wordbka { word-break: keep-all; } 
.wwbw    { word-wrap: break-word; } /* 영역초과시 글씨밑으로 */
.linebb  { border-bottom:1px solid  var(--color-gray-l); }
.linebt  { border-top:1px solid  var(--color-gray-l); }
.linebb0 { border-bottom: 0px !important; }
.linebl0 { border-left: 0px !important; }
.linebt0 { border-top: 0px !important; }
.cursorp { cursor:pointer; }
.bround  { border-radius: 10px !important; } /* 박스 보더 등 둥글게 */
.bround5  { border-radius: 5px !important; }
.form-ext{ margin-top:7px; color: red; }

.displayib { display:inline-block;}
.verticalat{ vertical-align : top; }
.textline1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
/*.textline1 { display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden;-webkit-box-orient: vertical;} 위에것으로 변경*/
.textspacings { letter-spacing: -0.02em; } /* 기존간격보다 조금더 넓게 old */

.ls-tight { letter-spacing: -0.02em; } /* 글씨간격 좀 줄임  */
.ls-wide  { letter-spacing:  0.02em; } /* 글씨간격 좀 늘림  */

.form-admin-bg { background: var(--color-gray-th); }

.jc-center { justify-content: center; }       /* 가로 정렬 가운데 */
.jc-start  { justify-content: flex-start; }   /* 가로 정렬 왼쪽 */
.jc-end    { justify-content: flex-end; }     /* 가로 정렬 오른쪽 */
.jc-between { justify-content: space-between; } /* 양끝 정렬 (메뉴 배치용) */

.scroll-x-auto { /* 가로스크롤 기본값이 없는데, 사용자들이 입력하는 컨텐츠공간등에 일부허용  */
  overflow-x: auto;
  width: 100%;
}

@keyframes blink-effect {
    70%{
        opacity:0;
    }
}

.blink {
    animation: blink-effect 1s step-end infinite;
    animation-name: blink-effect;       /* 키프레임 이름 */
    animation-duration: 1s;             /* 움직임 시간 */
    animation-iteration-count:infinite; /* infinite 무한반복, 숫자1은 한번반복 */
    animation-timing-function:step-end; /* 움직임 속도 */
}

/* <div class="eb-box"><div class="eb-item">좌측</div><div class="eb-item">우측</div></div> */
.eb-box { /* div 설정시 해당영역만큼만 차지하고, 가로로 정렬됨 */
	display: flex;
}
.eb-box.wrap { /* eb-box wrap 사용시 영역 줄바꿈 */
	flex-wrap: wrap;
}
.eb-box .eb-item { /* 공간분배, 영역하나에만 지정시 나머지공간차지함 */
	flex: 1 ;
}

.sr-only { /* h1, h2 동적일때 상단에 미리정의등에 사용 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* 옛날 브라우저 대응 */
    clip-path: inset(50%); /* 현대 브라우저 대응 */
    border: 0;
    white-space: nowrap; /* 줄바꿈 방지 */
}

.img-responsive {
    max-width: 100%; /* 부모보다 크면 부모에 맞추고, 작으면 자기 크기 유지 */
    height: auto;   /* HTML에 적힌 비율에 맞춰 높이를 자동 계산 */
    display: block; /* 이미지 아래쪽 미세한 빈 공간 제거 */
}

/* 비율 설정 figure class="ratio-3-2" 식으로 이미지등에 사용 */
.ratio-3-2 { aspect-ratio: 3 / 2; }   /* 기본 (300x200) */
.ratio-4-3 { aspect-ratio: 4 / 3; }   /* 약간 더 정사각에 가까운 */
.ratio-16-9 { aspect-ratio: 16 / 9; } /* 와이드형 */
.ratio-1-1 { aspect-ratio: 1 / 1; }   /* 정정사각형 */
.ratio-60-74 { aspect-ratio: 60 / 74; } 

/* ------------------- 투명, 불투명 막 */

.eb-overlay {
    position: relative !important; 
}
.eb-overlay::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 밝기 변경 */
    z-index: 68;
}
.eb-overlay .eb-overlay-btn { 
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 정중앙 */
    z-index: 69 !important;
}

/* ------------------- 밑줄 라인 */

/*
1. 회색바탕은 title-bottom-line 만 사용
2. 포인트색 이 필요하면 --line-w: 78px; --point-c: #333; 값을 넣으면 됨
3. 바닥색을 바꿀땐 --base-c: var(--color-text);
*/
.title-bottom-line {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    
    /* [수정할수 있는값] */
    --base-c: var(--color-gray-l); 
    --base-h: 1px;                 
    
    --point-c: var(--color-basic-b); 
    --point-h: 3px;               
    --line-w: 0; /* 기본값을 0으로 설정하여 클래스만 쓸 땐 안 보이게 함 */
}

.title-bottom-line::before {
    content: "";
    position: absolute; 
    left: 0; 
    bottom: 0;
    width: 100%; 
    height: var(--base-h);
    background-color: var(--base-c);
}

.title-bottom-line::after {
    content: "";
    position: absolute; 
    left: 0; 
    bottom: calc((var(--base-h) / 2) - (var(--point-h) / 2)); 
    width: var(--line-w);
    height: var(--point-h);
    background-color: var(--point-c);
}

/* ------------------- svg 아이콘 */

/* svg 기본크기 */
svg {
    width: 16px; 
    height: 16px;
    max-width: 100%;
}

/* symbol을 담고 있는 껍데기 SVG는 안보이게, 최초 로딩시 잠깐 보이는거 안보이게처리 */
svg[style*="display: none"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute;
    overflow: hidden;
}

.svg-icon {
	width: 16px;
	height: 16px;
	fill: currentColor; /* 부모 글자색 따라감 */
	vertical-align: -0.125em;
	display: inline-block;
	position: relative; /* 화살표 위치 기준점 */
	line-height: 1;
}

/* svg-icon 시작될땐 기존 스타일 제거 */
.svg-icon[class*="fa-"]::before,
.svg-icon[class*="bi-"]::before,
.svg-icon[class*="fa-"]::after,
.svg-icon[class*="bi-"]::after {
    content: none !important;
}

/* svg-icon 시작될땐 기존 스타일 제거 */
.svg-icon[class*="fa-"],
.svg-icon[class*="bi-"] {
    /* 사용자 지정 폰트를 유지하도록 다시 inherit으로 수정 */
    font-family: inherit !important; 
    font-weight: inherit !important;
    font-style: normal !important; /* i 태그 기울임만 방지 */
}

/* 빈 하트 svg 비율이 너무 안맞아서 이미지로처리*/
.svg-icon.fa-heart-o {
	background-image: url("/images/icon/heart-o.png?ver=1");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle; /* 텍스트와 높이 맞춤용 */
}

/* 꽉 찬 하트 */
.svg-icon.fa-heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FF0000' d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-79.9-64.9-144.7-144.7-144.7c-40.3 0-79 16.8-106.5 46.2L256 93.1l-4.8-5.1c-27.5-29.4-66.2-46.2-106.5-46.2C64.9 40.4 0 105.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* 기본 베이스 설정 */
.svg-icon.fa-angle-down {
    transition: transform 0.4s ease;
    background-image: none !important;
    position: relative;
    display: inline-block;
    /* 박스 크기가 너무 작으면 화살표가 잘릴 수 있으니 최소 크기 확보 */
    width: calc(var(--size, 7px) * 2); 
    height: calc(var(--size, 7px) * 2);
    vertical-align: middle;
}

/* 화살표 모양 (가상 요소) */
.svg-icon.fa-angle-down::before {
    content: "" !important;
    display: block;
    /* [변수 적용] 크기: --size, 두께: --border, 색상: --color */
	width: var(--final-size, var(--size, 7px));
    height: var(--final-size, var(--size, 7px));
    border-right: var(--border, 1px) solid var(--color, #333);
    border-bottom: var(--border, 1px) solid var(--color, #333);
    
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transition: transform 0.4s ease, border 0.4s ease;
    
    /* 기본 상태: 아래 방향 (V) */
    transform: translate(-50%, -75%) rotate(45deg);
}

/* 1. 처음부터 위를 보게 하고 싶을 때 (.up) */
.svg-icon.fa-angle-down.up::before {
    transform: translate(-50%, -25%) rotate(225deg);
}

/* 2. 열린 상태 (.open) 회전 로직 */

/* [기본형] 아래(V)였다가 open 붙으면 위(∧)로 */
.open .svg-icon.fa-angle-down:not(.up)::before,
.svg-icon.fa-angle-down.open:not(.up)::before {
    transform: translate(-50%, -25%) rotate(225deg);
}

/* [반대형] 위(∧)였다가 open 붙으면 아래(V)로 */
.open .svg-icon.fa-angle-down.up::before,
.svg-icon.fa-angle-down.up.open::before {
    transform: translate(-50%, -75%) rotate(45deg);
}

@media (max-width: 767px) {
    .svg-icon.fa-angle-down {
        --final-size: calc(var(--size, 7px) * 0.7) !important;
    }
}

.svg-icon.-sm {
    height: 14px;
    width: 14px;	    
}

/* 한 단계 위: 18px x 18px */
.svg-icon.-lg {
    height: 18px;
	width: 18px;
}


/* ------------------- 레이아웃 */

.detailWrap {display:flex;}
.detailContent {width: calc(100% - 386px);margin-right:47px;}

@media (max-width:1279px){ /* 노트북까지 */
	.detailContent {width:100%; margin-right:0;}

}


/* ------------------- 그누보드 게시글부분 웹뷰에서 이미지 리사이즈 정상작동안해서 추가 */

#bo_v_con img {
    max-width: 100%;
    height: auto;
}


/* ------------------- 더보기 로딩 */

#infscr-loading { font-size:1.0rem; opacity:0.8; background: #000; color: #fff; padding: 10px; border-radius: 10px; left: 50%; width:200px; min-width:200px; margin-left:-100px; text-align: center; bottom: 100px; position: fixed; z-index: 100; -webkit-border-radius: 10px; -moz-border-radius: 10px; white-space:nowrap;}
#infscr-loading div{ color: #fff;}
.label-noti-quick-m { position: absolute; top: 12%; right: 20px; text-align: center; font-size: 12px; font-weight:500; padding: 2px 3px; line-height: 0.9; border-radius: .25em !important; }


/* ------------------- 신 나리야 소스 */

.na-convert {font-size:16px;}

.list-group-item {padding-left:0;padding-right:0}
.list-group-item .col-form-label { font-weight: bold; }
.comment-list-photo { width:50px;border-radius: 50%;}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */

}

.commom-photo {width:50px;height:50px;border-radius: 10%;}
.commom-photo-big {width:60px;height:60px;border-radius: 50%;}


/* ------------------- 구 나리야 소스 */

.list-group-item.bb0 {border-bottom: 0px;}
.list-group-item.pl0 {padding-left:0px;margin-left:0px;}
.list-group-item.pr0 {padding-right:0px;margin-right:0px;}

hr.hr::before { width:100%; height:1px; content: ""; position:absolute; left:0; bottom:1px; line-height:1px; background-color:#ddd; }
hr.hr { display:block; position:relative; height:3px; border: none; line-height:1px; padding:0;	margin:0; opacity: 1;}
hr.hr::after { width:4.0rem; height:3px; content: ""; position:absolute; left:0; bottom:0; line-height:1px; background-color:  var(--color-basic-b)}

@media all and (max-width:575px) {
	.responsive h3.h3 {	padding-left:1.0rem; padding-right:1.0rem; }
	.responsive hr.hr::after { left:1.0rem;	}
}

/* SLY 분류탭 */
.sly-tab { border:0; overflow:hidden; }
.sly-tab .d-flex { border-left:1px solid  var(--color-gray-l); }
.sly-tab li a {	display:block; text-align:center; border:1px solid  var(--color-gray-l);	border-left:0; color:#333; background:#fafafa; }
.sly-tab li.active a { font-weight:bold; background:#fff; border-bottom:1px solid #fff; }
.sly-tab .sly-btn {	display:none; text-align:center; border:1px solid  var(--color-gray-l); color:#333; background:#fff; }
.sly-tab .sly-btn:hover { background:#fafafa; }
.sly-tab .sly-btn.sly-next { border-left:0; }
.sly-tab hr { display:block; border-top:1px solid  var(--color-gray-l); height:1px; margin:0; margin-top:-1px; padding:0; }

/* 모달 */
#clipContent, 
#setupContent {	display: block; border: none; width:100%; }
#clipModal .btn { border-radius:0; }


/* ------------------- 부트스크랩 수정,추가 */

.form-check-input {width:20px; height:20px; border-radius:5px; } /* 체크박스 기본크기키우기 */
.form-check-label {padding-left:3px; line-height:28px }

/* 부트스크랩 규격 - 해상도 1200 일떄 1140 나타냄 */
.modal-xl { max-width: 1140px; }   /* 부트스크랩에 정의되어있으나 다시정의 */
.modal-xxl { max-width: 1320px; }  /* 부트스크랩에 xxl 정의안되어있어 추가정의 */ 
.modal-xxxl { max-width: 1480px; } /* 부트스크랩에 xxxl 정의안되어있어 추가정의 */ 


/* ------------------- 비쥬얼 타이틀, 인기검색어, 검색 부분 */

.comPopWrap {display:flex; align-items:center; justify-content:space-between; cursor:pointer;margin-top:20px}
.comPopTit {display:flex;flex-wrap: wrap; align-items:center; gap:0px; }
.comPopTit ul {display:flex;flex-wrap: wrap; gap:10px; align-items:center;padding-bottom:3px}
.comPopTit ul li span { font-size:16px; font-weight:var(--font-m);}
.comPopTit span { width:95px; font-size:var(--font-size_18); font-weight:var(--font-b);}
.comPopWrap_downArr { right:0px; background:#fff;width:25px;text-align:right; } /* position:absolute; 제거 */

.comPopTermInputWrap {margin-top:20px;}
.comPopTermInputBox {position:relative;     max-width: 500px;  margin: 0 auto; }
.comPopTermInputBox button {position:absolute; right:15px; top:45%; transform:translateY(-45%);}
.comPopTermInput {border:none; width:100%; border: 2px solid var(--color-basic-b); border-radius: 50px; height: 50px; line-height: 50px; padding: 0 20px; font-weight:var(--font-b);}
.comPopTermInput::placeholder {font-weight:var(--font-b); color:#999; font-size:var(--font-size_14);}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comPopTermInputWrap {margin-top:}
	.comPopTermInput{border: 2px solid var(--color-basic-b);border-radius: 5px; height: 45px; line-height: 45px; padding: 0 20px ;}
}

.comPopTerm {display:none;}

.comSelBox {display:flex;}
.comSelBox .comSelBox_list {display:flex;justify-content : space-between; }
.comSelBox .comSelBox_list .item {padding-left:5px;}
.comSelBox .comSelBox_list .item:nth-child(1) {padding-left:0px;}
.comSelBox .comSelBox_list .item span {display:block; border-radius:20px; border:1px solid #d4d4d4; color:#000; padding:9px 29px; font-weight:var(--font-sb);}
.comSelBox .comSelBox_list .item.on span {background:#333333; border-radius:20px; border:1px solid #333333; color:#fff;}
.comSelBox .comSelBox_list .item.on span {color:#fff}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comSelBox .comSelBox {gap:4px;}
	.comSelBox .comSelBox_list .item span { padding:6px 19px;}
}

.visual-sub-title-wrap {display:flex; align-items:center; justify-content:space-between;}
.visual-sub-title      {font-size:22px; font-weight:700; line-height:1; padding:11px 0} /* 우측번튼과 높이 맞추기위해 패딩11 */

.comSearchList {width:calc(100% - 230px); margin-right:11px;display:flex; gap:11px; }
.comSearchList li {width:100%; position:relative;}
.comSearchList li:nth-of-type(2) {margin-right:0;}
.comSearchInputBox {position:relative; width:100%; cursor:pointer;}
.comSearchInputBox i {position:absolute; right:28px; top:50%; transform:translateY(-50%);}
.comSearchInput {width:100%; border:none; height:100%; background:#f5f5f5; border-radius:15px; padding: 20px 89px 20px 28px; text-align:right; font-size:var(--font-size_17); font-weight:var(--font-b);}
.comSearchInput::placeholder {text-align:left; font-size:var(--font-size_17); color:#a4a4a4; font-weight:var(--font-r);} 
.comDeTit {font-size:var(--font-size_18); font-weight:var(--font-sb);}
.comSearchBar_mo {display:none;}

@media (min-width: 1023px) { /* 모바일,테블릿이상 */
}

@media (max-width:1279px){ /* 노트북까지 */
	.comSearchBar_mo .comSearchInputBox { box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.1); border-radius:15px; border:1px solid #ebebeb;}
	.comSearchBar_mo {display:block;}
}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.comSearchBar_mo {padding-bottom:23px; border-bottom:1px solid #f2f2f2;}
}


/* ------------------- 리스트상단 */

.msRoof {display:flex; justify-content:space-between;}
.roofMore {font-size: var(--font-size_16); font-weight: var(--font-r); color:var(--color-basic-b);}
.LinkBox {margin-top:17px; display:flex;}


/* ------------------- header 모바일상단*/

.moRoadWrap {display:none;}
.moRoadWrap {background:#fff; border-top:1px solid #ebebeb;  padding-top:13px ; margin-top: -px; }
.moRoadWrap .faviriteBtnBox .serBtn02 {border:none;}

.moRoadBox {display: flex;  align-items: center; justify-content: space-between;}
.moRoadCate {font-size: var(--font-size_22);font-weight: var(--font-b); line-height:22px;width:70%;min-width:250px;text-align:center}
.backBtn img {width:16px;}

.mobileBtnBox {display:none; width: 22px; height: 17px;}
.nav_btn {width: 100%; height: 100%; position:relative;}
.nav_btn>span {display: block;width: 100%; height: 3px;background: #000;position: absolute; transition: .3s;}
.nav_btn>span:nth-of-type(1) {transform: translateY(7px);}
.nav_btn>span:nth-of-type(2) {transform: translateY(0px);}
.nav_btn>span:nth-of-type(3) {transform: translateY(-7px);}

@media (max-width:1279px){ /* 노트북까지 */
	.mobileBtnBox {display:block;}
}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.moRoadWrap {display:block; }
}


/* ------------------- sidebar */

.mobileWrap {width:100%; height:100vh; background:#f7f8fa; z-index:999; position:fixed; top:0; left:0; padding: 20px 0; display:none; overflow-y:scroll; overflow-y:scroll; -ms-overflow-style: none;}
.mobileWrap::-webkit-scrollbar { display: none;}
.mbLogo {width:50%;}
.mbLogo img {max-width:100%;}
.mobileWrapInner {max-width:1280px; width:92%; margin:0 auto;}
.mbCloseBtn { display: flex;align-items: center;justify-content: center;}
.mbTop {display:flex; justify-content:space-between; margin-bottom:55px}
.mbCloseBtn button { position: relative; width: 24px; height: 24px;  background: none; border: none; cursor: pointer;padding: 0;}
.mbCloseBtn button span {position: absolute;  display: block;  width: 100%; height: 2px;  background-color: #666; /* 선 색상 */  top: 50%; left: 0; transform: translateY(-50%);}
.mbCloseBtn button span:first-child { transform: rotate(45deg); }
.mbCloseBtn button span:last-child { transform: rotate(-45deg); }

.mbSmWrap {max-width:550px; margin:0 auto; width:100%; }
.mbLoginArea {width:100%; padding:20px; border-radius:20px; background:#fff; text-align:center;}
.mbLoginArea span {font-size:var(--font-size_20); font-weight:var(--font-m); line-height:1.5em;}
.mbLoginArea span b {font-weight:var(--font-b); color:var(--color-basic);}
.mbLoginBox {display:flex; gap:15px; justify-content:center; margin-top:0px;}
.mbLoginBox a {display:block; width:200px; height:60px; border-radius:20px; border:1px solid  var(--color-basic-b); line-height:60px; color: var(--color-basic-b); font-size:var(--font-size_20); font-weight:var(--font-b);}
.mbLoginBox a.mbReg {background: var(--color-basic-b); color:#fff;} 

.mbLoginHelpBox {font-size:var(--font-size_18); font-weight:var(--font-l); color:#aaaaaa; display:flex; gap:20px; justify-content:center; margin-top:20px;}

.mbInfo {width:100%; padding:20px; border-radius:20px; background:#fff; margin-top:20px;}
.infoDesc {text-align:center; }
.infoDesc span {font-size:var(--font-size_18); font-weight:var(--font-m); color: var(--color-gray); }
.infoDesc a {font-size:var(--font-size_18); font-weight:var(--font-m);  background:#ddf7fb; color:#07afcd; width:100%; height:50px; text-align:center; line-height:50px; border-radius:15px; display:block; margin-top:20px;}
.mbSchArea {position:relative; height:50px; margin:10px 0;}
.mbSchArea input {width:100%;padding:15px 20px; border:1px solid #ebebeb; border-radius:15px; background:#fff;}
.mbSchArea input::placeholder {font-size:var(--font-size_18); font-weight:var(--font-m); color:#b6b6b6;}
.mbSchBtn {position:absolute; right:20px; top:50%; transform:translateY(-50%); width:21px; height:21px;}

.mbSchTag {display:flex; align-items:center; gap:14px;}
.mbSchTag li a {font-size:var(--font-size_14); font-weight:var(--font-r); color:#545454; letter-spacing:-0.02em; display:block; position:relative;}
.mbSchTag li a:after {content:''; position:absolute; width:1px; height:1px; border-radius:50%; background:#545454; top:50%; right:-7px; }
.mbSchTag li:last-child a:after {display:none;}

.mbAcorWrap {background:#fff; border-radius:15px; padding:15px; margin:0px 0 20px 0; }
.mbAcorList {cursor:pointer;}
.mbAcorTit {display:flex; align-items:center; font-size:var(--font-size_18); font-weight:var(--font-sb); justify-content:space-between; padding:0px 0 10px 0px; cursor:pointer; position:relative;}

.mbAcorTit i img {display:block;}

.mbAcorbox {padding-left:5px}
.sidebar-menu-ul { display: flex; flex-wrap: wrap; width:100%; font-weight: var(--font-sb);}
.sidebar-menu-ul li {width:50%}
.sidebar-menu-ul li a {display:block; padding:8px 0 8px 0; }
.sidebar-menu-ul li.full-width {width:100%}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
.sidebar-menu-ul li.mobile-full {width:100%}
}

.mbSiteLink {padding:25px 0;}
.mbSiteLink li + li {margin-top:25px;}
.mbSiteLink li a {font-size:var(--font-size_16); font-weight:var(--font-r); color:#434343; }


@media (max-width:1279px){ /* 노트북까지 */
	.mbLoginBox {gap:6px;}
	.mbLoginBox a {height:45px; line-height:45px; width:145px; font-size:14px;} 
	.mbLoginHelpBox {font-size:12px;}
	.infoDesc span {font-size:14px; text-align:left;}
	.mbSchTag li a {font-size:12px;}
	.mbAcorTit {font-size:18px;}
	.mobileWrap {overflow-y:scroll; -ms-overflow-style: none;}
	.mobileWrap::-webkit-scrollbar { display: none;}
	.mbSiteLink li a {font-size:14px;}
	.mbSiteLink {padding:15px 0;}
}


/* ------------------- sidebar 로그인시 */

.userArea {background:#fff; border-radius:15px; padding:15px;}
.mbUserInfo {display:flex; align-items:start;justify-content: space-between; flex-wrap:wrap}
.mbUserIcon {display:flex; gap:17px;}
.mbUserName {font-size:var(--font-size_18); font-weight:var(--font-l);}
.mbUserName b {font-weight:var(--font-eb);}
.mbTxt {margin-top:9px;}
.mbInfoMor { font-weight: 500; color:#999999; }

.userLev {display:flex; align-items:center; width:100%; border-radius:15px; background:#f3f4f6; padding:20px; justify-content:space-between;}
.userlevel {display:flex; align-items:center; gap:7px;}
.userlevel h4 { font-weight:var(--font-l);}
.mbUserPoint  {display:flex; align-items:center; gap:12px;}
.mbUserPoint span {color:#07afcd; font-weight:var(--font-b);padding-left:10px}
.userLevRemain { font-weight:var(--font-l); color:#07afcd; margin:10px 0;} 


.mbUserFavBox {cursor:pointer; position:relative;}
.mbUserFavTit {display:flex; padding:10px 20px; border-radius:15px; background:#07afcd; color:#fff; justify-content:space-between;position:relative;}
.mbUserFavTit.difc {background: var(--color-basic-b); margin-top:10px;}

.mbUserFavBoxDepth02 {display:none;width:100%;padding-top:5px}
.mbUserFavBoxDepth02 li {display:flex; justify-content:space-between; padding:5px 5px}
.mbUserFavBoxDepth02 li > a {display:block; padding:5px 0px; font-weight:700;  transition:0.28s;}
.mbUserFavBoxDepth02 li:hover a {color: var(--color-basic-b);}

.stListAdd {display:flex; gap:3px; align-items:center;}
.stListAdd img {width:16px;}

.userUtillList {display:flex; flex-wrap:wrap;}
.userUtillList li {width:calc((100% - 10px*3)/4); height:50px; margin-right:10px;}
.userUtillList li:nth-of-type(4n) {margin-right:0;}
.userUtillList li:nth-of-type(n + 5) {margin-top:20px;}
.userUtillList li a {display:flex; align-items:center; gap:10px; font-size:14px; font-weight:var(--font-r);}
.userUtillList i{color:#ff4500;}

.usertype02 {margin:20px 0;}

.userLinkTxt { font-weight:var(--font-m); color: var(--color-gray)}
.userAreaLink {display:block; width:100%; padding:20px; text-align:center; background:#fff6d9; color:#e78200; font-weight:var(--font-m); border-radius:15px; margin-top:10px; }
.userAreaLink.link_vs02 {background:#ddf7fb; color:#07afcd;}
.userAreaLink.mg {background: var(--color-mg-l); color: var(--color-mg-b);}
.userAreaLink.ma {background: var(--color-ma-l); color: var(--color-ma-b);}
.userAreaLink.im {background: var(--color-im-l); color: var(--color-im-b);}
.userAreaLink.eb {background: var(--color-eb-l); color: var(--color-eb-b);}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.mbUserName {font-size:18px;}
	.mbTxt {font-size:18px;}

	.userUtillList li {width:50%; margin-right:0;}
	.userUtillList li a {font-size:16px;}
	.userUtillList li:nth-of-type(n + 3) {margin-top:20px;}

}


/* ------------------- 탑 notice app */

.top-notice-app { width: 100%; height: 45px; background: #fafafa; position: relative; } 
.top-notice-app.close { display: none; } 
.top-notice-app p { letter-spacing: -0.01em; line-height: 40px; } 
.top-notice-app p i { display: inline-block; vertical-align: middle; margin-right: 6px; } 
.top-notice-app p b { font-weight: 700; } 

.top-notice-app-close { position: absolute; top: 50%; right: 0; width: 11px; height: 11px; transform: translateY(-50%); border:0} 
.top-notice-app-close span { width: 100%; height: 2px; display: block; position: relative; } 
.top-notice-app-close span:after,
.top-notice-app-close span:before { position: absolute; content: ""; height: 2px; width: 100%; background-color: #2e2d26; left: 0; } 
.top-notice-app-close span:after { transform: rotate(45deg); } 
.top-notice-app-close span:before { transform: rotate(-45deg); } 

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
 .top-notice-app p {font-size:15px;}
 .top-notice-app p i { margin-right: 0; } 
 .top-notice-app p i img {  } 

 }


/* ------------------- 탑 notice guide */

.top-notice-guide.close { display: none; } 

.top-notice-guide-content {background: linear-gradient(to right, var(--color-basic-r), var(--color-basic-l)); width:100%; position:relative; height:45px; text-align:center; line-height:45px; }

.top-notice-guide-close { width: 14px; height: 15px;position: absolute; top:50%; right:30%; transform:translateY(-50%); cursor:pointer;}
.top-notice-guide-close span {display: block;width: 100%; height: 1px;background-color: black; /* X자 표시를 위한 색상 */ position: absolute; top: 50%; left: 0;transform-origin: center;}
.top-notice-guide-close span:nth-of-type(1) {transform: rotate(45deg);}
.top-notice-guide-close span:nth-of-type(2) {transform: rotate(-45deg);}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
	.top-notice-guide-content {padding:0 20px;  text-align:unset;}
	.top-notice-guide-close {right:20px;}
}


/* ------------------- 스토어리뷰폼 */

.reviewForm {display:flex; margin-top:25px; }
.reviewForm li {width:calc((100%)/2); padding:0px 1px;}


/* ------------------- 퀵메뉴 */

#sky{display: block;}
#sky2{display: block;}
@media screen and (max-width: 1480px){
	#sky{display: none;}
	#sky2{display: none;}
}


/* ------------------- 퀵메뉴 gps설정부분 */

#actionSheet {
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	transition: 1s;

	/* 서서히 나타나는 효과 */
	visibility: hidden;
	opacity: 0;
}
#actionSheet.active {
	z-index:100;
	/* 서서히 나타나는 효과 */
	visibility: visible;
	opacity: 1;
}

.action-options {
	background-color: #fff;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
	overflow: auto;

	max-height: 300px;
	/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
	position: relative;
	bottom: -300px;

	transition: 1s;
}
#actionSheet.active .action-options {
	/* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
	bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}
.action-option {
	width: 100%;
	padding: 15px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.action-option-close {
	text-align: center;
}

.action-option:hover {
	background-color: #f2f2f2;
}


/* ------------------- 카카오맵 */

#postcode-wrap {
    height: 380px; /* 주소검색 창 높이 설정 */
    position: relative; /* 닫기 버튼을 절대 위치로 고정하기 위한 기준 부모 설정 */
}

#postcode-wrap .btn.bg-basic.btn-sm {
    position: absolute; /* 절대 위치로 설정 */
    bottom: 10px; /* 창 하단에서 10px 여유 두기 */
    left: 50%; /* 수평 중앙 정렬 */
    transform: translateX(-50%); /* 중앙 정렬 */
}


/* ------------------- 사이드바 조절 */

#memberOffcanvas { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);}
#menuOffcanvas   { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);}
#newOffcanvas    { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);}
#notiOffcanvas   { width:550px; background:#f7f8fa; padding-top: calc(env(safe-area-inset-top, 0px) + 0px ); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);}


/* ------------------- 필수입력 - 셀렉트에서 required 사용시 부트스크랩 화살표가 사라짐 */

.required-select, 
textarea.required-select {

  /* 화살표 + 빨강 별 이미지 */
  background-image: 
    var(--bs-form-select-bg-img), 
    url('/board/theme/Marigold/img/require.png'); 
  
  /* 위치 지정: 첫 번째가 화살표, 두 번째가 빨강 별 */
  background-position: right 0.75rem center, right top; 
  
}


/* ------------------- 소셜로그인부분 텍스트 정렬 */

#sns_offcanvas .sns-wrap .txt {
    padding-top: 4px;
}


/* ------------------- 모바일하단바 */

#mo_float_bar{display: block;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fbfbfb;z-index: 1046;border-top: 1px solid #e4e3e3;padding: 7px 0 5px 0;
	box-shadow: 0 -3px 3px rgba(0,0,0,.02);
	-webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.02);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
}

#mo_float_bar ul{display: flex;justify-content: space-between;}
#mo_float_bar ul li{width: 20%;}
#mo_float_bar ul li figure{text-align: center;height: 11px;}
#mo_float_bar ul li figure i{font-size: 24px; color:#999fa7;}
#mo_float_bar ul li p{text-align: center;font-size: 12px;font-weight: 700; color:#999fa7;}
#mo_float_bar ul li i.on, #mo_float_bar ul li p.on{color: var(--color-basic);}

#mo_float_bar.svg-ver { 
    padding-top: 2px;
}

#mo_float_bar.svg-ver ul li figure { 
    height: 18px; /* 바뀐 높이 적용 */
    font-size: 24px; 
}

#mo_float_bar.svg-ver .svg-icon { 
    font-size: 24px; color:#999fa7; 
}

#mo_float_bar.svg-ver .svg-icon.on, 
#mo_float_bar.svg-ver p.on { 
    color: var(--color-basic); 
    fill: var(--color-basic) !important; 
}

/* ------------------- 모바일우측 gps아이콘 */

.floBanMob1 {
	position: fixed;
	bottom: calc(80px + env(safe-area-inset-bottom, 0px)); /* 아래 끝에서부터의 거리 */
	right: 15px; /* 오른쪽 끝에서부터의 거리 */
	background-color: #fff;
	z-index: 90;
	width:40px;
	height:40px;
	text-align:center;
	padding-top:6px;
	border-radius:10px;
	border : solid 1px  var(--color-gray-l);
}

/* ------------------- 기본리스트 레이아웃 */

.maga-list-wrap{width:100%;display:flex;flex-direction:column;}
.maga-list-wrap .head,
.maga-list-wrap .body{display:flex;width:100%;align-items:stretch;justify-content:space-between;margin:0 0 8px;box-sizing:border-box;}

.maga-list-wrap .head{background:var(--color-mg-gray-el);border-radius:10px;overflow:hidden;border:1px solid transparent;font-weight:var(--font-b);}
.maga-list-wrap .body{background:#fff;border:1px solid var(--color-mg-gray-r);border-radius:10px;overflow:hidden;flex-wrap:wrap;}
.maga-list-wrap .body.has-shadow { border-color: var(--color-mg-gray-l) !important; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04); } /* 보더 그라데이션주기 */

.maga-list-wrap .item{display:flex;align-items:center;justify-content:center;padding:5px;}

.maga-list-wrap .left-wrap{display:flex;flex:1;align-items:center;min-width:0;padding:10px;}
.maga-list-wrap .col-no{flex:0 0 60px;}
.maga-list-wrap .col-cate{flex:0 0 100px;}
.maga-list-wrap .body .col-no{font-size:14px}

.maga-list-wrap .col-thumb{flex:0 0 80px;}
.maga-list-wrap .thumb-box{background:#eee;border-radius:5px;overflow:hidden;}
.maga-list-wrap .thumb-box img{width:100%;height:100%;object-fit:cover;}
.maga-list-wrap .col-info{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;min-width:0;}
.maga-list-wrap .body .col-info{justify-content:flex-start;padding-left:20px;}
.maga-list-wrap .info-title,
.maga-list-wrap .info-desc{display:block;}

.maga-list-wrap .right-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:10px;}
.maga-list-wrap .right-wrap .item.col-date{flex:none;width:120px;}
.maga-list-wrap .right-wrap .item.col-hit{flex:none;width:80px;}
.maga-list-wrap .right-wrap .item.col-action{flex:none;width:100px;}
.maga-list-wrap .right-wrap .item.col-status{flex:none;width:90px;}
.maga-list-wrap .right-wrap .item.col-price{flex:none;width:130px; font-weight:var(--font-b);}
.maga-list-wrap .right-wrap .item.col-more{flex:none;width:100px;}
.maga-list-wrap .right-wrap .item{flex:1;display:flex;align-items:center;justify-content:center;}

.maga-list-wrap .info-bottom{width:100%;padding:10px 20px;background:var(--color-gray-th);border-top:1px solid var(--color-gray-l);box-sizing:border-box;}

@media (max-width:1023px){
	.maga-list-wrap .head{display:none;}
	.maga-list-wrap:not(.gallery) .left-wrap{flex:1;}
	.maga-list-wrap:not(.gallery) .col-no{display:none;}
	.maga-list-wrap:not(.gallery) .col-thumb{flex:0 0 60px;}
	.maga-list-wrap .thumb-box{width:60px;height:60px;}
	.maga-list-wrap:not(.gallery) .col-info{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding-left:10px;}
	.maga-list-wrap:not(.gallery) .right-wrap{flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
	.maga-list-wrap:not(.gallery) .right-wrap .item{padding:0;flex:none;width:auto !important;}
}

.maga-list-wrap .left-wrap.flex-col { /* left-wrap flex-col 사용시 item 줄바꿈시키기 */
    flex-direction: column !important;
    align-items: flex-start !important;
}
.maga-list-wrap .right-wrap.flex-col { /* right-wrap flex-col 사용시 item 줄바꿈시키기 */
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right;
}
.maga-list-wrap .right-wrap.flex-col .item {
    justify-content: flex-end !important;
}

.maga-list-cate-btn {display:flex; margin-bottom:10px; flex-wrap: wrap; gap: 1px;}
.maga-list-cate-btn li.on a {border-color: var(--color-basic); background: var(--color-basic); color:#fff;}
.maga-list-cate-btn li {margin-right:5px;margin-bottom:5px;}
.maga-list-cate-btn li a {display:block; padding:10px; border-radius:10px; border: 1px solid var(--color-gray-l); font-weight:500;}

/* ------------------- 그누리스트 head li에 넣는 레이아웃 */

.maga-list-wrap-g5 { background: var(--color-mg-gray-el); border-radius: 5px !important; overflow: hidden !important; border: 1px solid var(--color-mg-gray-el); font-weight: var(--font-b);    padding: 15px !important; border-bottom: 0 !important; }

/* ------------------- 기본갤러리 레이아웃 */

.maga-gallery-wrap { letter-spacing:-0.04em; font-size:0; width:100%; }
.maga-gallery-wrap ul { list-style:none; padding:0; margin:0; font-size:0; }

.maga-gallery-wrap ul li { width:calc((100% - 24px*3)/4); margin-right:24px; display:inline-block; vertical-align:top; box-sizing:border-box; }
.maga-gallery-wrap ul li { overflow: hidden; border: 2px solid #f4f4f4; transition: 0.5s; box-shadow: 0px 12px 21px 0px rgba(0, 0, 0, 0.04); cursor: pointer; border-radius: 10px; padding: 10px 15px}
.maga-gallery-wrap ul li figure { position:relative; overflow:hidden; border-radius:15px; }
.maga-gallery-wrap ul li figure img { width:100%; max-width: 100%; height: auto; aspect-ratio: 300 / 200; object-fit: cover; transition:0.28s; }
[class*="ratio-"] img {
    aspect-ratio: auto !important;
    height: 100% !important;
}
.maga-gallery-wrap ul li figure:hover > img { transform:scale(1.1); }
.maga-gallery-wrap ul li:nth-of-type(4n) { margin-right:0; }
.maga-gallery-wrap ul li:nth-of-type(n + 5) { margin-top:27px; }

.maga-gallery-wrap ul li .title { padding:0px 0 8px 0px; font-size:20px; font-weight: var(--font-b); white-space:nowrap; overflow: hidden; }
.maga-gallery-wrap ul li .desc { font-size:16px; color: var(--color-gray);  }

@media (max-width:1279px) {
    .maga-gallery-wrap ul li { width:calc((100% - 24px)/2); margin-right:24px; }
    .maga-gallery-wrap ul li:nth-of-type(2n) { margin-right:0; }
    .maga-gallery-wrap ul li:nth-of-type(4n) { margin-right:24px; }
    .maga-gallery-wrap ul li:nth-of-type(n + 3) { margin-top:24px; }
}

@media (max-width: 1023px) {
    .maga-gallery-wrap ul li { width:calc((100% - 13px)/2); margin-right:13px; }
    .maga-gallery-wrap ul li:nth-of-type(2n) { margin-right:0; }
    .maga-gallery-wrap ul li:nth-of-type(n + 3) { margin-top:35px; }
}

.maga-gallery-wrap ul li .detail { margin-top:10px; font-size:16px; color: #808080;}
.maga-gallery-wrap ul li .detail .left{ color: inherit; }
.maga-gallery-wrap ul li .detail .right { color: inherit; }

@media (min-width: 1024px) { /* 테블릿이상 */
	.maga-gallery-wrap ul li .detail {display:flex; align-items: flex-end;justify-content: space-between; }
	.maga-gallery-wrap ul li .detail .right { padding-top:5px; }
}

/* ------------------- 기본뷰페이지 레이아웃 */

.maga-view-wrap{width:100%;display:flex;flex-direction:column;}
.maga-view-wrap .head{display:flex;width:100%;align-items:stretch;justify-content:space-between;margin:0 0 8px;box-sizing:border-box;}
.maga-view-wrap .head{background:var(--color-mg-gray-el);border-radius:10px;border:1px solid transparent;font-weight:var(--font-b);}
.maga-view-wrap .item{display:flex;align-items:center;justify-content:center;padding:5px;}
.maga-view-wrap .left-wrap{display:flex;flex:1;align-items:center;min-width:0;padding:10px;white-space:nowrap;}
.maga-view-wrap .right-wrap{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:10px;background:var(--color-mg-gray-el);}
.maga-view-wrap .right-wrap .item{flex:1;display:flex;align-items:center;justify-content:center;}

@media (max-width:1023px){
	.maga-view-wrap {font-size:14px}
	.maga-view-wrap .left-wrap{padding:10px 5px;}
	.maga-view-wrap .right-wrap{padding:10px 5px 10px 10px;}
	.maga-view-wrap:not(.gallery) .left-wrap{flex:1;}
	.maga-view-wrap:not(.gallery) .right-wrap{flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
	.maga-view-wrap:not(.gallery) .right-wrap .item{padding:0;flex:none;width:auto !important;}
}