/********************************************************************************************************************************************************************
	페이지상단
********************************************************************************************************************************************************************/
.pageNav {display:flex; align-items:center; justify-content:flex-end; gap:4px; margin:40px 0; color:#666;}
.pageNav a.material-symbols-outlined {font-size:1.125rem;}
.pageNav .next__bt {color:#878787; font-size:1.25rem;}
.pageNav a.page__ {margin-top:2px;}
.pageNav a.page__.active {color:var(--primary);}

/********************************************************************************************************************************************************************
	클럽리스트 페이지
********************************************************************************************************************************************************************/
.clubList-area .menu-view {display:flex; align-items:center; margin-bottom:32px;}
.clubList-area .menu-view a {color:#666;}
.clubList-area .menu-view a:first-child {margin-right:20px;}
.clubList-area .menu-view a.menu-active {color:var(--primary); font-weight:600;}
.clubList-area .menu-view a.menu-active:after {content:""; display:block; width:100%; height:1px; border-bottom:1px solid var(--primary);}

.clubList-wrap {display:flex; flex-wrap:wrap; gap: 50px 20px;}

.clubList-wrap .clubList-item {width:calc(25% - 15px); }
.clubList-wrap .clubList-item .item-thumbnail {width:100%; /*height:305px;*/padding-bottom:100%;/*1:1비율*/ border-radius:12px; overflow:hidden; position:relative;}

.clubList-wrap .clubList-item .item-thumbnail .item-soldOut {
	/* width:100%;
	height:100%;
	background:rgba(250,244,247,0.8); */
	position: absolute;
	top: 10px;
	left: 10px;
	/* display:flex;
	align-items:center;
	justify-content:center; */
}
.clubList-wrap .clubList-item .item-thumbnail .soldOut-tag {
	display: inline-block;
	padding: 6px 10px;
	box-sizing: border-box;
	background: var(--primary);
	color: #fff;
	border-radius: 4px;
	box-shadow: 1px 1px 20px rgb(90 90 90 / 0.8);
}
.clubList-wrap .clubList-item .item-thumbnail .soldOut-tag > span {font-size:1.1rem; vertical-align:middle;}
.clubList-wrap .clubList-item .item-thumbnail .soldOut-tag.sub {position: absolute; padding: 0 5px; top: 5px; left: 5px;}
.clubList-wrap .clubList-item .item-thumbnail .soldOut-tag.sub > span {font-size: 1rem;}
.clubList-wrap .clubList-item .item-title-wrap { display: flex; justify-content: space-between; min-height: 54px; gap: 8px; align-items: center; }
.clubList-wrap .clubList-item .item-title-wrap .title { font-size:1.125rem; font-weight:700; color:#222;display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden; }
.clubList-wrap .clubList-item .item-title { min-height: 54px; margin: 12px 0; font-size:1.125rem; font-weight:700; color:#222; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden; }
.clubList-wrap .clubList-item .product-info .item-title { margin: 0; font-size: 1.5rem; }
.clubList-wrap .clubList-item .product-data {display: flex; }
.clubList-wrap .clubList-item .product-data .tit { width: 100px; font-size: 1.125rem; font-weight: 600; line-height: 2; }
.clubList-wrap .clubList-item .product-data .cont { font-size: 1.125rem; line-height: 2; }

.clubList-wrap .mo { display: none; }

.clubList-wrap .clubList-item .both {display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e1e1e1; padding-top:12px;}
.clubList-wrap .clubList-item .both .item-place {font-weight:700; color:#333; width:50%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.clubList-wrap .clubList-item .both .item-price {display:flex; align-items:center; gap:6px; justify-content:flex-end; width:50%;}
.clubList-wrap .clubList-item .both .item-price .number__ {font-weight:700; color:#333; }
.clubList-wrap .clubList-item .both .item-price .price__ {font-weight:700; color:var(--primary);}

.clubList-wrap .clubList-item .item-memo {margin-top:6px; color:#707070;}


/*위css에서 찜한클럽 css수정*/
.clubList-wrap.myfavorite__ .clubList-item {width:calc(33.33% - 15px);}
.clubList-wrap.myfavorite__ .clubList-item .item-title {min-height:52px;}

/********************************************************************************************************************************************************************
	클럽멤버
********************************************************************************************************************************************************************/
.member-list .memberBox:first-child {margin-bottom:40px;}
.member-list .memberBox .member-status {font-size:1.25rem; font-weight:700; color:#333; margin-bottom:6px; display:flex; align-items:center; gap:8px;}

.member-item {border:1px solid #e1e1e1; border-radius:12px; padding:16px 24px; box-sizing:border-box;}
.member-item:not(:last-child) {margin-bottom:10px;}

/*기존 메인 리뷰에서 css수정*/
.member-item.review-box .user-info .user-profile {display:flex; align-items:center;}
.member-item.review-box .user-info .user-profile .user {margin-bottom:0;}
/*.member-item.review-box .user-info .user-profile .user .age:after {content:""; display:inline-block; width:1px; height:1rem; border-right:1px solid #ddd; margin:0 8px; vertical-align:middle;}*/
.member-item.review-box .user-info .user-profile .user-job {font-size:1.125rem;}
.member-item.review-box .user-info .user-thumbnail {width:50px; height:50px;}

.member-list .memberBox .user-info-ment {margin-top:10px; color:#707070;}


/********************************************************************************************************************************************************************
	클럽뷰페이지
********************************************************************************************************************************************************************/
.view-top {display:flex; justify-content:space-between; margin:80px 0;}
.view-top .product-thumb {width:600px;}


.view-top .product-info {width:calc(100% - 660px);}
.view-top .product-info .product-title {
	font-size:1.5rem;
	font-weight:600;
	color:#222; display: -webkit-box;
	/* word-break:break-word;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	overflow:hidden; */
}
/*.view-top .product-info .product-smallMent {margin:32px 0; color:#707070; display: -webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden;}*/
.view-top .product-info .product-smallMent {margin:32px 0; color:#707070;}
.view-top .product-info .product-memo {font-weight:600; color:#333; padding:32px 0; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;}
.view-top .product-info .product-option {margin:32px 0;}

.view-top .product-info .product-option .total-price {display:flex; align-items:center; justify-content:flex-end; gap:8px; font-weight:700; border-top:1px solid #4A4A4A; padding-top:24px; margin-top:32px;}
.view-top .product-info .product-option .total-price span {font-size: 26px;}



.view-top .product-info .product-btnBox .payBtn__ {display:block; width:100%; padding:12px; box-sizing:border-box; font-size:1.125rem; text-align:center; color:#fff; background:var(--primary); border:1px solid var(--primary); border-radius:4px;}
.view-top .product-info .product-btnBox .payBtn__:hover {background:#fff; color:var(--primary); font-weight:600; transition:.2s;}
.view-top .product-info .product-btnBox .payBtn__.soldOut__ {background:#707070; border:1px solid #707070;}
.view-top .product-info .product-btnBox .payBtn__.soldOut__:hover {color:#fff; font-weight:500;}
.view-top .product-info .product-btnBox .btn-both {display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
.view-top .product-info .product-btnBox .btn-both a {display:flex; align-items:center; justify-content:center; gap:8px; width:calc(50% - 8px); border:1px solid #707070; border-radius:4px; box-sizing:border-box; padding:12px; font-size:1.125rem; color:#707070;}
.view-top .product-info .product-btnBox .btn-both a > span {font-size:1.25rem;}
.view-top .product-info .product-btnBox .btn-both a:hover {border:1px solid #222; color:#222;  transition:.2s;}

/*폼 셀렉트 ul*/
.form-select-wrap {position:relative; height:44px; margin:12px 0 32px;}
.form-select {position:absolute; width:100%;}
.form-select .select-ul {position: relative; width:100%; height:44px; line-height:44px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.30); overflow:hidden; background:#fff;}
.form-select .select-ul:before {content:""; display:block; width:16px; height:8px; background:url("/images/common/sl_arrow.svg")no-repeat; position:absolute; top:20px; right:14px; transform:translateY(-50%);}
.form-select .select-ul.active {height:auto; border:1px solid #000; transition:.5s;}
.form-select .select-ul li {background:#fff; padding:0 16px; font-size:0.875rem; font-weight:600; cursor:pointer;}
.form-select .select-ul li.selected {background:#f1f1f1;}
.form-select .select-ul li:hover{background:#f5f5f5; transition:.2s;}


/*쇼핑 옵션*/
.optionBox {background:#F5F5F5; padding:20px; box-sizing:border-box;}
.optionBox:not(:last-child) {margin-bottom:12px;}
.optionBox .optionDel {display:flex; justify-content:flex-end; font-size:1.5rem;}
.optionBox .option-item {display:flex; align-items:center; justify-content:space-between; margin-top:12px;}
.optionBox .optionCount {display:flex; align-items:center;}
.optionBox .optionCount .optionBtn {width:26px; height:26px; border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.optionBox .optionCount .optionBtn i {font-size:1.125rem; color:#707070;}
.optionBox .optionCount input {width:52px; height:26px; outline:none; border:none; border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; background:#fff; box-sizing:border-box; text-align:center; border-radius:0;}
.optionBox .option-item .optionPrice {font-weight:600; color:#333;}



.img-box-wrap .slick-track {width:100% !important; height:100% !important; padding-bottom:100%; display:flex;}
.img-box-wrap .img-box {width: 100% !important; /*height: 600px;*/height:100%; padding-bottom:100%;/*1:1*/ position:absolute !important; left:0 !important; background-position: center center; background-repeat:no-repeat; background-size: cover; }

/*썸네일 이미지들 배경처리*/
/* .img-tab-box .img-box01 {background-image:url("/images/common/sample.jpg");}
.img-tab-box .img-box02 {background-image:url("/images/common/sample02.jpg");}
.img-tab-box .img-box03 {background-image:url("/images/common/sample03.jpg");}
.img-tab-box .img-box04 {background-image:url("/images/common/sample04.jpg");}
.img-tab-box .img-box05 {background-image:url("/images/common/sample05.jpg");} */


/*slick dot 커스텀*/
.img-tab-wrap .slick-dots{-webkit-box-pack: justify; -ms-flex-pack: justify; gap:8px; /*bottom:-128px !important; */position:relative; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important;}
.img-tab-wrap .slick-dots li {width: 19% !important; /*height: 120px !important; */ height:auto !important; margin: 0 !important; box-sizing:border-box;}
.img-tab-wrap .slick-dots li button {width: 100% !important; /*height: 100% !important; padding:0 !important;*/height:auto; padding-bottom:100%; background-repeat:no-repeat !important; background-position: center center !important; background-size: cover !important;}
.img-tab-wrap .slick-dots li button:focus:before, .img-tab-wrap .slick-dots li button:hover:before {background-color: transparent;}
.img-tab-wrap .slick-dots li button:before {display:none; content: ""; margin:0;}

/*slick dot 이미지처리*/
/* .img-tab-box .slick-dots li:nth-child(1) button {background-image:url("/images/common/sample.jpg");}
.img-tab-box .slick-dots li:nth-child(2) button {background-image:url("/images/common/sample02.jpg");}
.img-tab-box .slick-dots li:nth-child(3) button {background-image:url("/images/common/sample03.jpg");}
.img-tab-box .slick-dots li:nth-child(4) button {background-image:url("/images/common/sample04.jpg");}
.img-tab-box .slick-dots li:nth-child(5) button {background-image:url("/images/common/sample05.jpg");} */

.img-tab-wrap .slick-dots li:hover {border:1px solid var(--primary);} /*dot 이미지를 hover시*/
.img-tab-wrap .slick-dots li.slick-active {border:2px solid var(--primary);} /*dot이 active될 때*/





.product-detail .section-tab {display:flex; justify-content:center; border-bottom:1px solid #ddd;}
.product-detail .section-tab li {font-size:1.125rem; font-weight:600; color:#878787; width:33.33%;}
.product-detail .section-tab li.active a {border-bottom:2px solid #4a4a4a; color:#222; font-weight:700;}
.product-detail .section-tab li a {display:block; width:100%; padding:20px; box-sizing:border-box; text-align:center;}

.product-detail .page-box {padding-top:40px; display: none;}
.product-detail .page-box.active {display: block;}

.caution_subcont {
	margin-top: 30px;
}
.caution_subcont .caution_title {
	width: fit-content;
	border-radius: 3px 3px 0px 0px;
	box-sizing: border-box;
	padding: 5px 10px;
	font-size: 1.250rem;
	background-color: var(--primary);
	color: #fff;
}
.caution_subcont .caution_content {
	background-color: #f5f5f5;
	padding: 20px;
}
.caution_subcont .caution_sub_title {
	margin-bottom: 10px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--primary);
}
.caution_subcont .caution_depth {
	padding-left: 15px;
}
.caution_subcont .caution_depth01 {
	margin-bottom: 20px;
}
.caution_subcont .caution_depth02 {
	padding-left: 20px;
	box-sizing: border-box;
}
.caution_subcont .caution_depth03 {
	padding-left: 40px;
	box-sizing: border-box;
}

/********************************************************************************************************************************************************************
	클럽주문하기페이지
********************************************************************************************************************************************************************/
.order-layout {display:flex; justify-content:space-between; margin-top:80px;}
.order-layout .order-info {max-width:768px; width:100%;}
.order-layout .orderPay-info {width:calc(100% - 768px); padding-left:20px; box-sizing:border-box;}
.order-layout .order-depth {margin-bottom:40px;}
.order-layout .depth-tit {font-size:1.5rem; font-weight:600; color:#222; margin-bottom:10px; letter-spacing:-0.03rem;}

/*클럽정보박스*/
.product-info-box {display:flex; gap:20px; padding:20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px;}
.product-info-box .pd-thumb {width:150px; height:150px; border-radius:12px; overflow:hidden;}
.product-info-box .pd-info {width:calc(100% - 170px);}
.product-info-box .pd-tit {display:block; width:100%; font-size: 20px; font-weight:600; color:#222; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.product-info-box .product-memo {margin-top:20px;}
.product-info-box .product-memo .product-place {margin-bottom:5px;}
.product-info-box .product-memo i {font-size:1.25rem; vertical-align:sub; margin-right:4px; color:#CDDBEA;}

/*참여정보박스*/
.person-info-box {padding:20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px;}

.person-info-box .pd-option-item {border-bottom:1px dotted #ddd; padding-bottom:20px; margin-bottom:20px;}
.person-info-box .pd-option-item i {font-size:1.25rem; vertical-align:sub; margin-right:4px; color:#CDDBEA;}
.person-info-box .pd-option-item .pd-option {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.person-info-box .pd-option-item .pd-select {display:flex; justify-content:space-between; margin-top:12px;}
.person-info-box .pd-option-item .pd-select .pd-option-price {font-weight:700; color:#333;}

.person-info-box .totalPrice {font-size:1.125rem; font-weight:700; color:#222; display:flex; justify-content:flex-end;}


/*참여자(회원/주문자)정보박스*/
.person-user-box {padding:20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px;}

/*최종결제금액박스*/
.orderPay-info-inner.fixedBox__ {position:fixed; top:20px; width:492px;}/*스크롤시 addClass*/

.total-pay-box {padding:20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px;}
.total-pay-box .both {display:flex; align-items:center; justify-content:space-between; font-weight:600;}
.total-pay-box .both:not(:last-child) {border-bottom:1px dotted #ddd; padding-bottom:12px; margin-bottom:12px;}
.total-pay-box .both strong {font-size:1.25rem; font-weight:700; color:var(--primary);}
.order-layout .accountBtn {margin-top:20px; display:block; width:100%; padding:12px; box-sizing:border-box; font-size:1.125rem; text-align:center; background:var(--primary); border:1px solid var(--primary); color:#fff; border-radius:4px;}
.order-layout .accountBtn:hover {background:#fff; color:var(--primary); font-weight:600; transition:.2s;}
.total-pay-box label:not(:last-child){margin-right:20px;}

/********************************************************************************************************************************************************************
	리뷰전체보기
********************************************************************************************************************************************************************/
h2.content-tit {
	display: flex;
	justify-content: space-between;
	width: 100%; padding: 10px; font-size: 2rem; color:var(--blk2); font-weight: 700; line-height: 1.2; position: relative; margin-bottom: 10px;
}
h2.content-tit .new { position: absolute; top: 0; font-size: 1.125rem; color: #FF0000; }


.review-wrap { max-height: 650px; min-height: 220px; padding: 40px 90px; background: rgba(217, 217, 217, 0.3); border-top: 2px solid #707070; border-bottom: 2px solid #707070; overflow-y: auto; }
.review-wrap::-webkit-scrollbar { width: 16px; }
.review-wrap::-webkit-scrollbar-thumb { background: #E9ECEF; border-radius: 999px; }
.review-wrap::-webkit-scrollbar-track { background: var(--wht); border-radius: 999px; }
.review-wrap::-webkit-scrollbar-button { display: none; }
.reviewAll-pagetit {font-size:1.5rem; color:var(--blk2); font-weight:600; padding-bottom:20px; border-bottom:1px solid #4a4a4a; margin-bottom:40px;}
.reviewAll-pagetit small {font-size:1.125rem; color:#707070;}

.review-listBox {width: 100%; padding: 20px; background: var(--wht); border: 1px solid #E1E1E1; border-radius: 20px;}
.review-listBox:not(:first-child) {
	margin-top: 40px;
}
.review-listBox .r-product-title {font-weight:600; color:#4a4a4a;}
.review-listBox .r-product-title a:hover {color:#7c7c7c}
.review-listBox .r-board-title {font-size:1.125rem; font-weight:700; color:var(--blk2); margin:8px 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.review-listBox .r-board-post {color:var(--blk2); line-height:1.5; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden; font-size:1rem;margin:1.5rem 0;}


.review-listBox .r-board-pub {margin-top:0; position:relative;}

.review-listBox .review-updateBtn .material-symbols-outlined {
  font-size: 1.5rem;
  position: relative;
  top: 0;
  left: 5px;
  color: var(--primary);
}
.review-listBox .review-updateBtn .material-symbols-outlined:hover {
  color: #bc2c68;
}
/*기존 메인 리뷰에서 css수정*/
.r-board-pub.review-box .user-info {align-items:center; gap:12px;}
.r-board-pub.review-box .user-info .user-profile {width:auto; padding-left:0; display:flex; align-items:center;}
.r-board-pub.review-box .user-info .user-profile .user {margin-bottom:0;}
.r-board-pub.review-box .user-info .user-thumbnail {width:40px; height:40px; margin-right:8px;}
.r-board-pub.review-box .user-info .user-profile .user .name, .r-board-pub.review-box .user-info .user-profile .user .age {font-size:1rem;}
.r-board-pub.review-box .user-info .user-profile .user .age:after, .user-profile .user .age:after {content:""; display:inline-block; width:1px; height:1rem; border-right:1px solid #ddd; margin:0 8px; vertical-align:middle;}
.user-profile .user-job:before{content:""; display:inline-block; width:1px; height:1rem; border-right:1px solid #ddd; margin:0 8px; vertical-align:middle; display:none;}


.r-board-pub.review-box .user-info-review {display:flex; position: relative; }
.r-board-pub.review-box .user-info-review {align-items:center; gap:12px;}
.r-board-pub.review-box .user-info-review .user-profile {width:auto; padding-left:0; display:flex; align-items:center;}
.r-board-pub.review-box .user-info-review .user-profile .user {display:flex; margin-bottom:0; gap: 1rem;}
.r-board-pub.review-box .user-info-review .user-thumbnail {width:40px; height:40px; border-radius:50%;}
.r-board-pub.review-box .user-info-review .user-profile .user .name {font-size:1rem; font-weight:700; color:var(--blk2);}
.r-board-pub.review-box .user-info-review .r-post-date { position: absolute; right: 0; font-size: 0.875rem; }

.review-slide .review-thumbnail {text-align: center;}
.review-slide .review-thumbnail img {height: 120px;}

@media (max-width: 540px){
  .review-slide .review-thumbnail {height: 90px;}
}


/*밑에 직업들어갈때는 안나옴*/
.blog_wrap li > .text_cell .post_user .user-profile .user-job:before {display:none;}

.boardView-btn-wrap .reviewModal-btn {display:flex; align-items:center; justify-content:center; padding:6px 24px; border: 1px solid var(--primary);background: var(--primary);color: #fff; border-radius:4px; box-sizing:border-box;}
.boardView-btn-wrap .reviewModal-btn .material-symbols-outlined {font-size:1.25rem;}
.boardView-btn-wrap .reviewModal-btn:hover {background-color:#fff; color:var(--primary); transition:.2s;}

/********************************************************************************************************************************************************************
	리뷰전체보기 > 후기모달
********************************************************************************************************************************************************************/
.review-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99992;  max-width:1024px; width:100%; /*height:800px;*/height:80vh; overflow:hidden; background:#fff; border-radius:12px; padding:32px; box-sizing:border-box; overflow-y:scroll; display:none;}

.review-modal::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}
.review-modal::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #d1d1d1; /* 스크롤바의 색상 */
    border-radius: 10px;
}
.review-modal::-webkit-scrollbar-track {
    background: #eee;  /*스크롤바 뒷 배경 색상*/
}

.review-modal .Modal-close.viewCase {position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; font-size:1.5rem; cursor:pointer;}
.modal-cont .user-info {margin-top:32px;}
.review-modal .r-product-title {font-weight:600; color:#4a4a4a;}
.review-modal .r-board-title {font-size:1.125rem; font-weight:700; color:#222; margin:8px 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.review-modal .r-board-post {color:#707070; line-height:1.5; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden; font-size:0.9rem;}
.review-modal .reviewModa-ment {margin-top:32px;}

/********************************************************************************************************************************************************************
	후기 작성하기 모달
********************************************************************************************************************************************************************/

.review-modal.write__ h3 {font-size:1.5rem; font-weight:700; border-bottom:1px solid #e1e1e1; padding-bottom:12px;}
.review-modal.write__ .write-input  {margin:12px 0 8px;}
.review-modal.write__ .write-input input[type="text"] {width:100%; height:40px; border:0; outline:none; border-bottom:1px solid #e1e1e1; font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif; font-size:1rem;}
.review-modal.write__ .write-input input[type="text"]::placeholder {font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif; color:rgba(135, 135, 135, 1); font-size:1rem;}

/*썸머노트 삽입부분*/
.review-modal.write__ .reviewModa-ment.editer__ {width:100%; margin-top:0px;}

.review-modal.write__ .modalBtn-box {display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px;}
.review-modal.write__ .modalBtn-box a{display:inline-block; padding:8px 42px; box-sizing:border-box; border-radius:4px; text-align:center;}
.review-modal.write__ .modalBtn-box a.writeCancel {border:1px solid #878787;}
.review-modal.write__ .modalBtn-box a.writeCancel:hover {border:1px solid #333; color:#333; font-weight:600; transition:.2s;}
.review-modal.write__ .modalBtn-box a.writeSummit {border:1px solid var(--primary); background:var(--primary); color:#fff;}
.review-modal.write__ .modalBtn-box a.writeSummit:hover {background:#fff; color:var(--primary); font-weight:600; transition:.2s;}



/********************************************************************************************************************************************************************
	클럽 뷰페이지 - 게시판 (list)
********************************************************************************************************************************************************************/
.board-list { position: relative; }
.board-list .cade { position: absolute; right: 0; top: -50px; }
.board-list .cade ul { display: flex; gap: 10px; }
.board-list .cade ul li { width: 120px; height: 36px; background: #F2F2F2; border-radius: 999px; font-size: 1.3rem; font-weight: 600; color: var(--black); }
.board-list .cade ul li.active { background-color: var(--primary); color: #fff;}
.board-list .cade ul li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  }

.board-wrap .category { width: 32px; }
.board-wrap .writer { width: 120px; }
.board-wrap .date,
.board-wrap .hit,
.board-wrap .favorite { width: 74px; }

.board-wrap .top { display: flex; gap: 12px; padding: 10px; background: #F2F2F2; border-top: 2px solid var(--black); border-bottom: 1px solid var(--black); }
.board-wrap .top > div { display: flex; justify-content: center; align-items: center; font-size: 1.1rem; font-weight: 500; color: var(--black); }
.board-wrap .top .tit { width: calc(100% - 390px); }

.board-wrap .item { display: flex; gap: 12px; padding: 15px 10px; border-bottom: 1px solid var(--black); }
.board-wrap .item > div { display: flex; justify-content: center; align-items: center; font-size: 1rem; font-weight: 500; color: var(--black); }
.board-wrap .item .tit { justify-content: flex-start; gap: 10px; width: calc(100% - 434px); }
.board-wrap .item .tit .txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.board-wrap .item .tit .txt:hover { text-decoration: underline; color: var(--primary); }
.board-wrap .item .tit .comment { color: #FF0000; }
.board-wrap .item .tit .img { width: 36px; height: 100%; background: url("/images/common/img.svg") no-repeat 50% 50%; }
.board-wrap .item .category { font-size: 1.125rem; color: #707070; }

.board-wrap .item .writer,
.board-wrap .item .date,
.board-wrap .item .hit,
.board-wrap .item .favorite { font-weight: 400; color: #878787; }

.board-wrap .item.nn { background: #FFEDED; }
.board-wrap .item.nn .category,
.board-wrap .item.n .category { background: url("/images/common/pin.svg") no-repeat 50% 50%; }


.board-wrap .mo { display: none; }


/********************************************************************************************************************************************************************
	클럽 뷰페이지 - 게시판 (view)
********************************************************************************************************************************************************************/

.board-view-wrap .top { display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px; padding: 20px 10px; border-top: 2px solid var(--black); border-bottom: 1px solid var(--black); }
.board-view-wrap .top .line01 { display: flex; justify-content: space-between; }
.board-view-wrap .top .line02 { display: flex; flex-direction: column; gap: 5px; }
.board-view-wrap .top .line01 .category { font-size: 1.125rem; font-weight: 600; color: #878787; }
.board-view-wrap .top .line01 .date { font-size: 1.125rem; color: #878787; text-align: right; }
.board-view-wrap .top .line02 .tit { display: flex; align-items: center; gap: 10px; flex: 1 0 auto; font-size: 1.5rem; color: var(--black); }
.board-view-wrap .top .line02 .tit .txt {
	overflow: hidden;
	/* white-space: nowrap;
	text-overflow: ellipsis;
	word-break: break-all; */
}
.board-view-wrap .top .line02 .tit .comment { font-size: 1.125rem; color: #FF0000; }
.board-view-wrap .top .line02 .info { display: flex; gap: 50px; font-size: 1.125rem; justify-content: flex-end;}
.board-view-wrap .top .line02 .info > div { display: flex; gap: 20px; }
.board-view-wrap .top .line02 .info > div span { font-weight: 700; }

.board-view-wrap .copy-link { display: flex; justify-content: flex-end; align-items: center; gap: 15px; margin-bottom: 46px; padding: 0 10px; font-weight: 500; font-size: 0.875rem; color: var(--black); }

.board-view-wrap .copy-link span.icon { width: 24px; height: 24px; background: url("/images/common/copy.svg") no-repeat 50% 50%; cursor: pointer; }
.board-view-wrap .content { padding: 20px 0 40px; position: relative; }

.board-view-wrap .copy-link .copy-link-uri {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.board-view-wrap .copy-link	.copy-link-uri::-webkit-scrollbar {
	display: none;
}

.content iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.board-view-wrap .layer { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-weight: 700; font-size: 4rem; position: absolute; left: 0; top: 0; }

.board-view-wrap .share { display: flex; justify-content: center; gap: 30px; padding-bottom: 40px; border-bottom: 1px solid #DDD; }
.board-view-wrap .share a { display: flex; justify-content: center; align-items: center; gap: 10px; width: 160px; padding: 10px 0; background: var(--primary); border: 1px solid var(--primary); border-radius: 6px; font-size: 1.3rem; color: #FFF; }
.board-view-wrap .share a:hover { background: #FFF; color: var(--primary); transition: .2s; }
.board-view-wrap .share a.red span.icon { width: 24px; height: 24px; background: url("/images/common/favorite.svg") no-repeat 50% 50%; }
.board-view-wrap .share a.red:hover span.icon { background: url("/images/common/favorite_on.svg") no-repeat 50% 50%; transition: .2s; }
.board-view-wrap .share a.green { background: #4FBA9A; border: 1px solid #4FBA9A; }
.board-view-wrap .share a.green:hover { background: #FFF; color: #4FBA9A; transition: .2s; }
.board-view-wrap .share a.green span { width: 24px; height: 24px; background: url("/images/common/share.svg") no-repeat 50% 50%; }
.board-view-wrap .share a.green:hover span { background: url("/images/common/share_on.svg") no-repeat 50% 50%; transition: .2s; }
.board-view-wrap .btn { display: flex; justify-content: flex-end; margin-top: 32px; }
.board-view-wrap .btn a { padding: 12px 40px; background: #333; border: 1px solid #333; border-radius: 6px; font-size: 1.5rem; color: #FFF; }
.board-view-wrap .btn a:hover { background: #FFF; color: var(--black); transition: .2s; }


/********************************************************************************************************************************************************************
	공유하기 모달
********************************************************************************************************************************************************************/

.share-modal {max-width:380px; width:100%; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99992; overflow:hidden; background:#fff; border-radius:12px; padding:32px; box-sizing:border-box; display:none;}
.share-modal .Modal-close {position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; font-size:1.5rem; cursor:pointer;}

.share-modal .share-box {display:flex; flex-wrap:wrap; justify-content:center; margin-top:12px;}
.share-modal .share-box a {width:calc(33.33% - 10px); text-align:center; margin:12px 0;}
.share-modal .share-box a:hover {color:#707070; transition:.2s;}
.share-modal .share-box a .icons {width:42px; height:42px; background:#f1f1f1; border-radius:50%; margin:0 auto;}
.share-modal .share-box a .icons.url__ {display:flex; align-items:center; justify-content:center;}
.share-modal .share-box a .icons.url__ .material-symbols-outlined {transform:rotate(-45deg); color:#878787;}

.share-modal .share-box a .icons.kakao__ {background:url("/images/common/s_kakao.jpg")no-repeat center center / cover;}
.share-modal .share-box a .icons.kakaoS__ {background:url("/images/common/s_kakao_s.jpg")no-repeat center center / cover;}
.share-modal .share-box a .icons.band__ {background:url("/images/common/s_band.jpg")no-repeat center center / cover;}
.share-modal .share-box a .icons.facebook__ {background:url("/images/common/s_facebook.jpg")no-repeat center center / cover;}
.share-modal .share-box a .icons.twiter__ {background:url("/images/common/s_twiter.jpg")no-repeat center center / cover;}

.share-modal .share-box a p {font-size:0.9rem; font-weight:600; margin-top:8px;}



/********************************************************************************************************************************************************************
	멤버 //마이페이지
********************************************************************************************************************************************************************/
/*마이페이지 사이드메뉴*/
.mySnb-wrap {width:250px;}
.mySnb-wrap .welcome-ment {font-size:1.25rem; font-weight:600; color:#4a4a4a; margin-bottom:36px;}
.mySnb-wrap .mySnb li {border-bottom:1px solid #e1e1e1;}
.mySnb-wrap .mySnb li a {display:block; width:100%; padding:20px 0; color:#222;}
.mySnb-wrap .mySnb li a:hover {color:#707070;}
.mySnb-wrap .mySnb li.s-active a {font-weight:700; color:#222;}



.mypage-layout {display:flex; justify-content:space-between;}
.mypage-layout .mypage-cont {width:calc(100% - 290px);}
.mypage-layout .mypage-cont h3.cont-tit {font-size:1.25rem; font-weight:700; color:#222; border-bottom:1px solid #4a4a4a; padding-bottom:14px; margin-bottom:34px;}

/********************************************************************************************************************************************************************
	회원가입
********************************************************************************************************************************************************************/
.signUp-wrap {width:100%; height:100%;}
.signUp-wrap .signUp {width:100%; height:100%; display:flex; align-items:center; justify-content:center; margin:40px 0;}
.signUp-wrap .signUp .signUp-box {max-width:440px; width:100%; /*max-height:calc(100vh - 100px);*/ border-radius:6px; border:1px solid #e1e1e1; box-sizing:border-box; margin:0 auto; padding:0 42px 62px; /*overflow:auto; */}



.signUp-wrap .signUp .signUp-box .logo {display:block; max-width:155px; width:100%; margin:42px auto;}

.signUp-wrap .profile {width:100px; height:100px; background:rgba(248, 249, 251, 1); border-radius:100px; display:flex; align-items:center; justify-content:center; position:relative; left:50%; transform:translateX(-50%);}
.signUp-wrap .profile span.no-img {color:#CDDBEA; font-size:3rem;}
.signUp-wrap .profile a {width:42px; height:42px; background:var(--primary); color:#fff; border-radius:50%; outline:none; border:none; position:absolute; bottom:-10px; right:-10px; display:flex; align-items:center; justify-content:center;}


.signTop-notice {font-size:0.875rem; color:#707070; display:flex; align-items:center; justify-content:flex-end; margin:40px 0 20px;}
.eqDot {display:inline-block; width:5px; height:5px; background:var(--primary); border-radius:50%;}

.signUp-input-box { box-sizing:border-box;}
/*.signUp-input-box .input-box:first-child {margin-top:40px;}*/
.signUp-input-box .input-box:not(:last-child) {margin-bottom:24px;}

.input-box label.field .labels {font-size:0.875rem; font-weight:600; color:#222; margin-bottom:12px; position:relative;}
.input-box label.field .labels:not(.option):before {content:""; display:block; width:5px; height:5px; background:var(--primary); position:absolute; top:-3px; left:-6px; border-radius:50%;}
.input-box label.field input[type="text"], .input-box label.field input[type="tel"] {width:100%; padding:16px; box-sizing:border-box; border:1px solid #ddd; border-radius:4px; outline:none;}
.input-box label.field input[type="date"] {width:100%; padding:16px; box-sizing:border-box; border:1px solid #ddd; border-radius:4px; outline:none;}
.input-box label.field textarea {width:100%; height:160px; border-radius:4px; border:1px solid #ddd; padding:16px; box-sizing:border-box; outline:none; resize:none;}


.input-box label.field input[type="text"],
.input-box label.field input[type="tel"],
.input-box label.field textarea {font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif;}

.input-box label.field input[type="text"]::placeholder,
.input-box label.field input[type="tel"]::placeholder,
.input-box label.field textarea::placeholder {color:rgba(135, 135, 135, 1);}

.input-box label.field input[type="text"]:focus,
.input-box label.field input[type="tel"]:focus,
.input-box label.field textarea:focus {border:1px solid #333; transition:.2s;}

.input-box label.field > .insert.flex__ {display:flex; align-items:center; justify-content:space-between;}
.input-box label.field > .insert.flex__ .dep1 {width:calc(100% - 106px);}

.input-radio {display:flex; align-items:center; gap:4px; position:relative;}
.input-radio input.radio {position:absolute; left:-9999px; width:0; height:0;}
.input-radio input.radio+label {display:flex; align-items:center; justify-content:center;  width:50px; height:50px; font-weight: 600; border:1px solid #ddd; border-radius:4px; box-sizing:border-box; cursor:pointer;}

.input-radio input.radio:checked+label {background:var(--primary); color: #fff;}


.signUp-wrap .signUp .signUp-box .signUp-notice {font-size:0.875rem; color:rgba(112, 112, 112, 1); margin-top:12px;}
.signUp-wrap .signUp .signUp-box .signUp-notice span {font-size:1rem; vertical-align:middle; color:var(--primary);}

.signUp-wrap .signUp .signUp-box .summitBtn {display:block; width:100%; border:1px solid var(--primary); background:var(--primary); padding:14px 0; text-align:center; font-weight:600; color:#fff; border-radius:4px; margin-top:42px; box-sizing:border-box;}
.signUp-wrap .signUp .signUp-box .summitBtn:hover {background:#fff; color:var(--primary); transition:.2s;}

.signUp-agree {margin-top:24px;}
.signUp-agree p {font-weight:600; border-bottom:1px solid #ddd; padding-bottom:12px;}

.agreerow .agree-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.agreerow .agree-wrap > div {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 24px;
}
.agreerow .agree-wrap > div label {
  color: #333;
}
.more-link {
  color: #878787;
}

.more-link:hover {text-decoration:underline;}



/********************************************************************************************************************************************************************
	회원정보수정
********************************************************************************************************************************************************************/
.myinfo-edit {border-radius: 6px; background: #FFF; box-shadow: 0px 0px 20px 0px rgba(9, 15, 22, 0.10); padding:42px; box-sizing:border-box;}

/*기존 회원가입css일부수정*/
.myinfo-edit .signUp-wrap .signUp {margin:0;}
.myinfo-edit .signUp-wrap .signUp .signUp-box {max-width:100%; border:none; border-radius:0; padding:0;}

.myinfo-edit .signUp-wrap .profile {left:42px; margin-bottom:40px;}
.myinfo-edit .signUp-wrap .signUp .signUp-box .summitBtn {width:356px;}

.myinfo-edit .user-resign {display:inline-block; margin-top:42px; font-size:0.875rem; color:#4a4a4a; text-decoration:underline;}
.myinfo-edit .user-resign:hover {color:var(--primary); transition:.2s;}


@media screen and (max-width:460px) {
	.signUp-wrap .signUp .signUp-box {max-width:100%; border-radius:0; border:none; padding:0 24px 42px;}
}



/*.mypage-cont .clubList-wrap .clubList-item .item-title {min-height:auto;}*/
.mypage-cont .clubList-wrap .clubList-item .both, .clubList-wrap .clubList-item .item-memo {font-size:0.875rem;}




/********************************************************************************************************************************************************************
	클럽신청내역(주문내역)
********************************************************************************************************************************************************************/
/*기존 shop 클럽리스트 css에서 일부수정*/
.clubList-wrap.orderList__ {}
.clubList-wrap.orderList__ .clubList-item {width:100%; border-bottom:1px solid #e1e1e1; padding: 30px 0; display:flex; justify-content:space-between;}
.clubList-wrap.orderList__ .item-thumbnail {width:180px; height:180px; padding:0;}
.clubList-wrap.orderList__ .product-infoWrap {width:calc(100% - 240px); display:flex; justify-content:space-between;}
.clubList-wrap.orderList__ .product-info { display: flex; flex-direction: column; justify-content: center; gap: 10px; width:75%; padding: 10px 20px; }

.clubList-wrap.orderList__ .product-info .product-place {
	color:#333;
    display: flex;
    justify-content: space-between;
}
.clubList-wrap.orderList__ .product-info .product-option {font-size:0.9rem; color:#707070;}


.clubList-wrap.orderList__ .order-status {width:25%; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; padding-left:20px; box-sizing:border-box;}
.clubList-wrap.orderList__ .order-status a {display:flex; align-items:center; justify-content:center; gap:4px; padding:8px 24px; border-radius:4px; box-sizing:border-box; margin:4px 0; font-size:0.9rem;}
.clubList-wrap.orderList__ .order-status a > .material-symbols-outlined {font-size:1rem;}
.clubList-wrap.orderList__ .order-status a.pay-chkBtn {border:1px solid #333; color:#333;}
.clubList-wrap.orderList__ .order-status a.pay-chkBtn:hover {background:#333; color:#fff; transition:.2s;}
.clubList-wrap.orderList__ .order-status a.review-writeBtn {border:1px solid var(--primary); background:var(--primary); color:#fff;}
.clubList-wrap.orderList__ .order-status a.review-writeBtn:hover {background:#fff; color:var(--primary); transition:.2s;}
.clubList-wrap.orderList__ .order-status a.sub-writeBtn {border:1px solid var(--primary); background:var(--primary); color:#fff;}
.clubList-wrap.orderList__ .order-status a.sub-writeBtn:hover {background:#fff; color:var(--primary); transition:.2s;}
.clubList-wrap.orderList__ .order-status a.review-updateBtn {background:#fff; color:var(--primary);border:1px solid var(--primary);}
.clubList-wrap.orderList__ .order-status a.review-updateBtn:hover {background:var(--primary); color:#fff;transition:.2s;}
.clubList-wrap.orderList__ .order-status a.write-chkBtn {border:1px solid #878787; color:#878787;}
.clubList-wrap.orderList__ .order-status a.write-chkBtn:hover {background:#878787; color:#fff; transition:.2s;}
.clubList-wrap.orderList__ .order-status p { display:flex; align-items:center; justify-content:center; gap:4px; width: 100%; padding:8px; background: #8F8F8F; border-radius:4px; box-sizing:border-box; color: var(--wht); margin:4px 0; font-size:1.125rem; }
.clubList-wrap.orderList__ .order-status p.cancel { background: #EAEAEA; color: var(--black); }

.clubList-wrap .product-detail { display: flex; flex-direction: column; width: 100%; margin: 0 auto 80px; }
.clubList-wrap .product-detail .detail-box { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 40px; border-bottom: 1px solid #D0D0D0; }
.clubList-wrap .product-detail .detail-box h2.date { padding: 10px; font-size: 1.125rem; line-height: 1.5; }
.clubList-wrap .product-detail .detail-box h2.date span { font-size: 2.25rem; color: var(--primary); }
.clubList-wrap .product-detail .detail-box h3 { padding: 10px; font-size: 2.25rem; line-height: 1; }
.clubList-wrap .product-detail .detail-box .item { display: flex; justify-content: space-between; padding: 10px; }
.clubList-wrap .product-detail .detail-box .item .tit { font-size: 1.215rem; font-weight: 600; line-height: 1.5; }
.clubList-wrap .product-detail .detail-box .item .cont { font-size: 1.125rem; line-height: 2; }
.clubList-wrap .product-detail .detail-box .item .product { text-align: right; font-size: 1.025rem; }

.clubList-wrap .btn-box { display: flex; justify-content: center; gap: 40px; width: 100%; }
.clubList-wrap .btn-box a { padding: 16px 50px; background: #333; border: 1px solid #333; border-radius: 10px; font-size: 1.215rem; font-weight: 700; color: #FFF; line-height: 1.25rem; }
.clubList-wrap .btn-box a:hover { background: #555; transition: .2s; }
.clubList-wrap .btn-box a.del { background: #FFF; color: #333; border: 1px solid #333; }
.clubList-wrap .btn-box a.del:hover { background: #f5f5f5;}

.clubList-wrap .cancel-detail { display: flex; flex-direction: column; width: 100%; margin: 0 auto 40px; }
.clubList-wrap .cancel-detail .detail-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; border-bottom: 1px solid #D0D0D0; }
.clubList-wrap .cancel-detail .detail-box h3 { padding: 10px; font-size: 2rem; line-height: 1; }
.clubList-wrap .cancel-detail .detail-box h3.gray { color: #AAA; }

.clubList-wrap h4 { width: 100%; margin-bottom: 34px; font-size: 1.25rem; text-align: center; }
.clubList-wrap .btn-box.primary { display: flex; justify-content: center; gap: 40px; width: 100%; }
.clubList-wrap .btn-box.primary a { padding: 18px 40px; background: var(--primary); border: 1px solid var(--primary); border-radius: 10px; font-size: 1.315rem; font-weight: 700; color: #FFF; line-height: 1.25rem; }
.clubList-wrap .btn-box.primary a:hover { background: var(--wht); color: var(--primary); transition: .2s; }


/********************************************************************************************************************************************************************
	구독취소 모달
********************************************************************************************************************************************************************/

.cancelModal__wrap {
	/* display: none; */
}
.cancel-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99992;  max-width:780px; width:100%; /*height:800px;*/height:80vh; overflow:hidden; background:#fff; border-radius:12px; padding:40px; box-sizing:border-box; overflow-y:scroll; display:none;}

.cancel-modal .mo { display: none; }

.cancel-modal::-webkit-scrollbar {
	width: 8px;  /* 스크롤바의 너비 */
}
.cancel-modal::-webkit-scrollbar-thumb {
	height: 30%; /* 스크롤바의 길이 */
	background: #d1d1d1; /* 스크롤바의 색상 */
	border-radius: 10px;
}
.cancel-modal::-webkit-scrollbar-track {
	background: #eee;  /*스크롤바 뒷 배경 색상*/
}

.cancel-modal .Modal-close.viewCase {position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; font-size:1.5rem; cursor:pointer;}
.modal-cont .user-info {margin-top:32px;}
.cancel-modal .r-product-title {font-weight:600; color:#4a4a4a;}
.cancel-modal .r-board-title {font-size:1.125rem; font-weight:700; color:#222; margin:8px 0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.cancel-modal .r-board-post {color:#707070; line-height:1.5; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:break-word; overflow:hidden; font-size:0.9rem;}

.modal-cont { display: flex; flex-direction: column; gap: 0; padding-top: 5px; }
.modal-cont .clubList-wrap.orderList__ .clubList-item { justify-content: space-evenly; }
.modal-cont .clubList-wrap.orderList__ .item-thumbnail {width:100px; height:100px; padding:0;}
.modal-cont .clubList-wrap .clubList-item { padding: 0 0 20px 0; }
.modal-cont .clubList-wrap .clubList-item .product-infoWrap { width: calc(100% - 190px); }
.modal-cont .clubList-wrap .clubList-item .product-infoWrap .product-info { width: 100%; }
.modal-cont .box { display: flex; flex-direction: column; gap: 10px; padding: 20px 10px; border-bottom: 1px solid #D0D0D0; }
.modal-cont .box.center { align-items: center; }
.modal-cont .box.b { font-weight: 700; }
.modal-cont .box.gap10 { gap: 10px; }
.modal-cont .box.noBorder { border-bottom: none; }
.modal-cont .box p { font-size: 1.5rem; line-height: 1.5; text-align: center; }
.modal-cont .box p span { font-size: 2.25rem; }
.modal-cont .box h3 { font-size: 1.5rem; text-align: center; }
.modal-cont .box .input { display: flex; align-items: center; gap: 10px; }
.modal-cont .box .input input[type="radio"] { width: 16px; height: 16px; margin: 0; }
.modal-cont .box .input label { font-size: 1.215rem; line-height: 1.5; }
.modal-cont .box textarea { margin-left: 26px; padding: 6px 12px; font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif; font-size: 1rem; border: 1px solid #D1D1D1; border-radius: 6px; }

.modal-cont .modalBtn-box { display: flex; justify-content: center; gap: 30px; width: 100%; padding: 20px 10px;}
.modal-cont .modalBtn-box .modal--btn {
	padding: 18px 60px;
	background: #333;
	border: 1px solid #333;
	border-radius: 10px;
	font-size: 1.215rem;
	font-weight: 500;
	color: #FFF;
	line-height: 1.25rem;
	cursor: pointer;
	font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif;
}
.modal-cont .modalBtn-box .modal--btn:hover { background: #555; transition: .2s; }
.modal-cont .modalBtn-box .modal--btn.outline { background: var(--wht); color: #333; }
.modal-cont .modalBtn-box .modal--btn.outline:hover { background: #f5f5f5; }


/********************************************************************************************************************************************************************
	결제정보확인
********************************************************************************************************************************************************************/
.pay-modal {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99993;  max-width:768px; width:100%; height:800px; overflow:hidden; background:#fff; border-radius:12px; padding:32px; box-sizing:border-box; overflow-y:scroll; display:none;}

.pay-modal::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}
.pay-modal::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #d1d1d1; /* 스크롤바의 색상 */
    border-radius: 10px;
}
.pay-modal::-webkit-scrollbar-track {
    background: #eee;  /*스크롤바 뒷 배경 색상*/
}

.pay-modal i.Modal-close {position:absolute; top:12px; right:12px; display:flex; justify-content:flex-end; font-size:1.5rem; cursor:pointer;}

.pay-modal h3 {font-size:1.25rem; font-weight:700;}
.pay-modal .modal-cont {background:#F8F9FB; padding:20px 12px; box-sizing:border-box; border-radius:6px;}

.pay-modal .modal-cont .orderPay-info {display:flex; gap:42px; background:#fff; padding:12px 20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px;}
.pay-modal .modal-cont .orderPay-info .inr .inr-tit {margin-right:12px;}

.orderPay .order-depth {margin-top:24px;}
.orderPay .product-info-box, .orderPay .person-info-box, .orderPay .person-user-box {background:#fff;}
.orderPay .person-user-box {display:flex; align-items:center;}
.orderPay .person-user-box p:not(:last-child):after {content:""; display:inline-block; width:1px; height:14px; border-right:1px solid #e1e1e1; margin:0 12px; vertical-align:middle;}

.orderPay .payment-box {padding:10px 20px; box-sizing:border-box; border:1px solid #e1e1e1; border-radius:6px; background:#fff;}
.orderPay .payment-box .inr {display:flex; align-items:center; gap:24px; padding: 5px 0; justify-content: space-between;}

/********************************************************************************************************************************************************************
	내 작성 글
********************************************************************************************************************************************************************/

.myPost.tab { display: flex; width: 100%; margin-bottom: 25px; }
.myPost.tab li { width: 50%; }
.myPost.tab li a { display: flex; justify-content: center; width: 100%; padding: 14px 0; background: #F0F0F0; font-size: 1.125rem; color: #878787; line-height: 1.5; cursor: pointer; }
.myPost.tab li.active a { background: rgba(230, 54, 127, 0.6); color: #FFF; }
.myPost.tab li:hover a { background: rgba(230, 54, 127, 0.6); color: #FFF; transition: .2s; }

.count { display: flex; margin-bottom: 30px; font-size: 1.3rem; font-weight: 700; line-height: 1.7rem; }
.count span { width: 100px; font-weight: 500; }

.board-wrap.myPost .top { gap: 26px; border-top: none; }
.board-wrap.myPost .top .tit { width: calc(100% - 300px); }

.board-wrap.myPost > div > div > div { display: flex; justify-content: center; font-size: 1.1rem; font-weight: 500; color: var(--black); }
.board-wrap.myPost > div > div > .date,
.board-wrap.myPost > div > div > .hit,
.board-wrap.myPost > div > div > .favorite { width: 74px; }

.board-wrap.myPost .item { flex-direction: column; gap: 10px; align-items: flex-start; }
.board-wrap.myPost .item .club-title { display: block; width: fit-content; max-width: 380px; padding: 2px 14px; background: #EAEAEA; border-radius: 999px; font-weight: 700; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.board-wrap.myPost .item .club-title:hover { background: #ccc; transition: .2s; }
.board-wrap.myPost .item > div .tit { display: flex; gap: 10px; width: calc(100% - 300px); padding-left: 20px;}
.board-wrap.myPost .item > div:nth-child(2) { display: flex; justify-content: flex-start; align-items: center; gap: 26px; width: 100%; font-size: 1.3rem; font-weight: 500; color: var(--black); }
.board-wrap.myPost .item > div:nth-child(2) .txt { max-width: calc(100% - 97px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.board-wrap.myPost .item > div:nth-child(2) .comment { color: #FF0000; }
.board-wrap.myPost .item > div:nth-child(2) .img { width: 36px; height: auto; background: url("/images/common/img.svg") no-repeat 50% 50%; }
.board-wrap.myPost .item > div .mo { display: none; }

/********************************************************************************************************************************************************************
	내 댓글
********************************************************************************************************************************************************************/
.board-wrap.myReply .top { gap: 26px; border-top: none; }
.board-wrap.myReply .top .tit { width: calc(100% - 126px); }
.board-wrap.myReply .top .date { width: 100px; }

.board-wrap.myReply > div > div > div { display: flex; justify-content: center; font-size: 1.1rem; font-weight: 500; color: var(--black); }
.board-wrap.myReply > div > div > .date { width: 100px; }

.board-wrap.myReply .item { flex-direction: column; gap: 20px; align-items: flex-start; }
.board-wrap.myReply .item .club-title { display: block; width: fit-content; max-width: 300px; padding: 2px 14px; background: #EAEAEA; border-radius: 999px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.board-wrap.myReply .item .club-title:hover { background: #ccc; transition: .2s; }
.board-wrap.myReply .item > div .tit { display: flex; gap: 10px; width: calc(100% - 230px); }
.board-wrap.myReply .item > div:nth-child(1) { display: flex; justify-content: flex-start; align-items: center; gap: 20px; width: 100%; }
.board-wrap.myReply .item > div:nth-child(1) .txt { max-width: calc(100% - 97px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }
.board-wrap.myReply .item > div:nth-child(1) .comment { color: #FF0000; }
.board-wrap.myReply .item > div:nth-child(1) .img { width: 36px; height: auto; background: url("/images/common/img.svg") no-repeat 50% 50%; }
.board-wrap.myReply .item > div:nth-child(2) { display: flex; justify-content: flex-start; align-items: center; gap: 50px; width: 100%; }
.board-wrap.myReply .item > div:nth-child(2) .comment { display: block; width: calc(100% - 150px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; padding-left: 20px;}
.board-wrap.myReply .item > div:nth-child(2) .comment span { display: inline-block; margin-right: 10px; color: #868686; }

	.board-wrap.myReply .item > div .mo { display: none; }

/********************************************************************************************************************************************************************
	클럽제안하기
********************************************************************************************************************************************************************/
.propose-wrap .propose-pageTit  {font-size:2rem; font-weight:700; color:#333; margin-bottom:24px; letter-spacing:-0.03rem;}
.propose-wrap .formWrap .both {display:flex; justify-content:space-between; margin:32px 0;}
.propose-wrap .formWrap .both .input-box {width:calc(50% - 20px);}
.propose-wrap .formWrap .input-box label.field .labels {font-size:1rem;}

.propose-wrap .formWrap .formSummit {display:inline-block; padding:12px 62px; background:var(--primary); border:1px solid var(--primary); color:#fff; border-radius:4px; font-size:1.125rem;}
.propose-wrap .formWrap .formSummit:hover {background:#fff; color:var(--primary); font-weight:600; transition:.2s;}

.agree-ok {margin-top:20px;}


.refund-wrap {text-align:center; margin-top:20px;}
.refund-wrap .refund-btn {display:inline-block; padding:6px 12px; box-sizing:border-box; background:var(--primary); border:1px solid var(--primary); color:#fff; border-radius:4px; font-size:0.875rem;}
.refund-wrap .refund-btn:hover {background:#fff; color:var(--primary); transition:.2s;}
.refund-txt {margin-top:12px; background:#fff; border-radius:6px; border:1px solid #e1e1e1; padding:20px; box-sizing:border-box; display:none;}
.refund-txt p {text-align:left; }
.refund-txt input[type="text"] {width:100%; height:48px; background:transparent; border:0; outline:none; border-bottom:1px solid #e1e1e1; font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif; font-size:0.875rem;}
.refund-txt input[type="text"]:focus {border-bottom:1px solid #222; transition:.2s;}
.refund-txt .dp_end {display:flex; align-items:flex-end; flex-direction:column; margin:12px 0;}
.refund-txt .dp_end .refund-summit {display:inline-block; padding:4px 8px; background:#666; border:1px solid #666; color:#fff; border-radius:2px; font-size:0.875rem;}
.refund-txt .dp_end .refund-summit:hover {background:#fff; color:#666; transition:.2s;}
.refund-txt .dp_end .f14 {margin-top:4px; color:#666;}



/* 태그 필터 스타일 */
.club-tags {
	display: flex;
	margin-bottom: 20px;
	overflow-x: auto;
	gap: 8px;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

.club-tag {
	padding: 8px 16px;
	background-color: #f1f3f5;
	border-radius: 24px;
	color: #495057;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.club-tag:hover {
	background-color: #e9ecef;
}

.club-tag.active {
	background-color: #e63e7f;
	color: #fff;
}

.clubListContainer {
	position: relative;
	min-height: 200px; /* 최소 높이 설정 */
}

/* 로딩 표시 스타일 */
.club-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.club-loading.active {
	visibility: visible;
	opacity: 1;
}

.club-loading .spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(230, 54, 127, 0.2);
	border-top-color: #e63e7f;
	border-radius: 50%;
	animation: spin 1s ease-in-out infinite;
}

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

.clubList-wrap {
	transition: opacity 0.3s ease;
}

/* 클럽 없을 때 스타일 */
.club-empty {
	width: 100%;
	padding: 40px;
	text-align: center;
	background: #f8f9fa;
	border-radius: 8px;
	color: #868e96;
	font-size: 1.1rem;
}

@media screen and (max-width: 480px) {
	.club-tags {
		padding-bottom: 6px;
	}

	.club-tag {
		padding: 6px 12px;
		font-size: 14px;
	}
}