@charset "utf-8";

html {
  overflow-y: scroll; /* 항상 세로 스크롤바 표시 */
}

/*마이페이지*/
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

/*추가 수정 */

.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {box-shadow: 0 0, 0 0 0 0 rgba(82, 118, 237, 0.5);}
.btn-primary.disabled, .btn-primary:disabled {border: 1px solid #d2d2d2; background-color: #e9e9e9;color: #d2d2d2;}

/*card는 마이페이지 이름 가입일 나오는 흰색바탕 배경에 border-radius 적용한 공통 클래스,*/
.card{word-wrap: break-word; background-clip: border-box; background-color: #fff;  border: 0 solid #f1f4f8; border-radius: 1.3rem; display: flex;
    flex-direction: column; min-width: 0;}
.MyPage .card{margin-bottom:2rem;}

/*마이페이지 card cont1 영역*/
.flex-column {flex-direction: column;}
.card-header{padding:1.88rem; color:#666666;}
.ott-l {width: 40px; height: 40px; display:block;}
.ott-s {width: 60px; height: 60px; display:block;}
.change-i {width: 20px; height: 20px; display:block; margin-top:0.3rem;}
.icon-i {height: 25px; display:block; margin-right: 8px; }

.card-header h3{display:inline-block;font-weight:600; margin-right:0.75rem; font-size:2rem; line-height:2.5rem; letter-spacing:-0.05rem; color:#000; margin-top:1rem;}
.card-header span{}
.card-header p{margin-top:1rem; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem;}
.card-body{display:flex; align-items:flex-end; padding:1.88rem; gap: 0.75rem;}

.btn-gift{background-color:#fee500; color:#392020; font-size:1rem;}
.gift-btn{
	display:inline-block; 
	border-radius: 7px; 
	font-weight:400; 
	width: 7.6rem; 
	text-align:center;
	background-color:#5d5d5d; 
	color:#fff; 
	font-size:0.8rem;
	letter-spacing: -0.02em;
	margin-left: auto;
	}

.mypage-btn {
	display:inline-block; 
	border-radius: 10px; 
	font-weight:900; 
	line-height: 1.5rem; 
	padding: 1.25rem 1.56rem; 
	width: 12rem; 
	text-align:center;
	}
.btn-My {
	background-color:#3772ff; 
	color:#fff !important; 
	font-size:0.9rem;
	border-radius: 10px; 
	padding: 0.6rem 1rem;
	font-weight:500;
	}
.btn-kakao {
	background-color:#fee500; 
	font-size:0.9rem;
	border-radius: 10px; 
	padding: 0.6rem 1rem;
	font-weight:500;
	}

.btn-kakao-my {
	display:inline-block; 
	background-color:#fee500; 
	border-radius: 10px; 
	font-weight:900; 
	line-height: 1.5rem; 
	padding: 1.25rem 1.56rem; 
	width: 12rem; 
	text-align:center;
	border:1px solid #dbc86b;
	}

.btn-gray{background-color:#f1f1f1; border:1px solid #d2d2d2; color:#666666; font-size:1rem;}
.btn-gray:focus, .btn-gray:hover {background-color:#e0e0e0;}

/*마이페이지 card cont2 영역*/
.MyPage .cont2 ul{width:48%;}
.MyPage .cont2 li{background-clip: border-box; background-color: #fff;  border: 0 solid #f1f4f8; border-radius: 1.25rem; width:100%; margin-bottom:0.75rem;}
.MyPage .cont2 li a{display:flex; justify-content:space-between; padding: 1.15rem 1.75rem; line-height: 2.13rem; font-weight:600; align-items: center;}
.MyPage .cont2 li span{}
.MyPage .cont2 li i{font-style:normal; font-family:"Font Awesome 6 Free"; margin-left: auto;}
.MyPage .cont2 li {border-radius: 1.25rem;}
.MyPage .cont2 li div{background-clip: border-box; background-color: #3772ff; border-radius: 1.25rem; width:100%;}
.mp-btn-pp {color: #fff;}


/*마이페이지 로그아웃*/
.MyPage .cont3{justify-content:flex-end; display:flex; margin-top:1.5rem;}
.MyPage .cont3 > a >i{margin-right: 0.75rem;}
@media (max-width:768px){
    .MyPage .cont2 li {border-radius: 1.25rem;}
    .card-header{padding: 1.25rem 1.25rem 0;}
    .ott-l {width: 40px; height: 40px;}
	.ott-s {width: 40px; height: 40px;}
    .card-header h3{font-size:1.5rem; letter-spacing: -0.08em; line-height: 2.25rem;}
    .card-header p{font-size: 0.8rem; line-height: 1rem; letter-spacing: -0.06rem;}
    .card-body{padding: 1.25rem;}
    .mypage-btn {box-shadow: 0 0; display: flex;align-items: center;  justify-content: center; border-radius: 10px; font-size: 1rem; line-height: 1.5rem;
        padding: 1rem 1.56rem; width: 100%;margin: 0;}
    .MyPage .cont2 ul{width:100%;}
}

/*결제카드 관리*/
.Pay_card, .bankA{background-color:#fff; color:#666;}
.titleA{text-align: center; border-top-left-radius: calc(0.5rem - 1px); padding:0 1.88rem;}
.titleA h2{color: #000; font-weight: 600; font-size: 1.25rem;  width: 100%; margin:0 auto; padding:1.25rem 0; border-bottom: 1px solid #d2d2d2;}
.infoA{padding: 1.25rem 1.88rem;}
.infoA h3{margin:1rem 0 1em;}
.form-border { border: 1px solid #d2d2d2; background-color: #fff; border-radius: 0.94rem;  font-size: 1rem; font-weight: 600; line-height: 1.6;
    padding: 0.75rem 1.25rem; margin-bottom:1rem;}
.infoA p{padding: 0.5rem 0;}
.infoA .btn-gray{padding: 0.5rem 5rem; border-radius: 10px; }
@media (max-width:768px){
    .infoA .btn-gray{padding: 0.5rem 2rem;}
    .titleA{padding:0 1.25rem;}
    .infoA{padding: 1.25rem 1.25rem;}
    .infoA h3{margin:1rem 0 0.5em;}
    .form-border{margin-bottom:0;}
}
@media (max-width:651px){
    .infoA .btn-gray{padding: 0.5rem 1rem;}
}
@media (max-width:491px){
    .form-border{padding: 0.75rem 1rem; display:block; margin-bottom:0;}
    .infoA p{text-align:center;  margin:0 auto 10px;}
    .infoA .btn-gray{padding: 0.3rem 0; display:block; width:80%; margin:0 auto 10px; text-align:center;}
}
/*정산계좌 관리*/

@media (max-width:768px){
    .bankA > .form-border{padding: 0.75rem 1rem; display:block; margin-bottom:0;}
    .bankA > .infoA p{text-align:center;  margin:0 auto 10px;}
    .bankA > .infoA .btn-gray{padding: 0.3rem 0; display:block; width:80%; margin:0 auto 10px; text-align:center;}
}

/*정산계좌관리 은행 선택*/
.bank_Select .infoA h3{font-size: 1.125rem; margin:0; color:#000; line-height:1.4;}
.infoA h4{color:#666;}
.allBank{flex-wrap:wrap; display:flex; gap: 0.5rem; margin-top:1rem;}
.allBank > .bank {background-color:#f1f1f1;border-radius: 1rem;text-align: center;padding: 0.63rem 0;flex-basis: 18%;border:1px solid #fff;flex-shrink: 1;}
.allBank > .bank:hover, .allBank > .bank:focus, .allBank > .bank:active {border:1px solid #3772FF}
.allBank > .bank > p{font-size: 0.8rem; line-height: 1rem; font-weight:900; color:#666;  letter-spacing: -0.06rem; padding:0; margin-top:0.25rem;}

@media (max-width:768px){
    .allBank > .bank > p{font-size:14px;}
}

/*정산계좌 은행입력페이지*/



/*입력폼 스타일1*/
.form-group label{font-size: 1rem; letter-spacing: -0.05rem; display: inline-block; width:100px;}

.form-group > .form-control{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    border: 1px solid #d2d2d2;
    border-radius: 0.94rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 0.75rem 1.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 80%;
    color: #3772ff;
    font-size:1rem;
}/*수정*/

.form-group > .form-control::placeholder {
    color: #D2D2D2;
}

.form-group > .select{
    width: 84.8%;
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
    box-sizing: border-box;
    background:transparent;
    background:url('/img/sub/chevron-down.svg') no-repeat 97% 50%/1rem auto;
}

select::-ms-expand{
    display:none;/*for IE10,11*/
}
.form-group > .form-control:active,
.form-group > .form-control:focus,
.form-group > .form-control:hover,
.form-group > .select:active,
.form-group > .select:focus,
.form-group > .select:hover {
    outline:none;
    border: 1px solid #3772ff;
}


/*입력폼 스타일2 - 기프트카드 별도사용*/
.form-group1 label{font-size: 1rem; letter-spacing: -0.05rem; display: inline-block; width:140px;}

.form-group1 > .form-control{
    flex-wrap:wrap;
    align-items:center;
    border: 1px solid #d2d2d2;
    border-radius: 0.94rem;
    font-weight: 400;
    line-height: 1.6;
    padding: 0.75rem 1.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 78%;
    color: #3772ff;
    font-size:1rem;
}

.form-group1 > .form-control::placeholder {
    color: #D2D2D2;
}

.form-group1 > .select{
    width: 84.8%;
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
    box-sizing: border-box;
    background:transparent;
    background:url('/img/sub/chevron-down.svg') no-repeat 97% 50%/1rem auto;
}

select::-ms-expand{
    display:none;/*for IE10,11*/
}
.form-group1 > .form-control:active,
.form-group1 > .form-control:focus,
.form-group1 > .form-control:hover,
.form-group1 > .select:active,
.form-group1 > .select:focus,
.form-group1 > .select:hover {
    outline:none;
    border: 1px solid #3772ff;
}
/*입력폼 스타일2 - 기프트카드 별도사용* ---- 종료/


/*넷플 초대정보*/
.form-group-net {margin: 1rem 0; font-size: 1rem; display: flex;justify-content: flex-start; align-items: center; color:#000;}
.form-group-net p {margin: 1rem 0; font-size: 1rem; width:100px; font-weight: 600;}

@media (max-width:768px){
    .form-group-net {font-size: 0.9rem; }
}

/*###################모달 팝업창######################## */
.popup-wrap {
	background-color:rgba(0,0,0,.3); 
	justify-content:center; 
	align-items:center; 
	position:fixed;
    top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	display:flex; 
	padding:15px; 
}
.popup-s { 
	width:100%; 
	border-radius:0px; 
	height:auto; 
	overflow:hidden; 
	background-color:#fff; 
	box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); 
}

.popup { 
	width:100%; 
	border-radius:0px; 
	height:auto; 
	overflow:hidden; 
	background-color:#fff; 
	box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3); 
}
.modal-content {
	background-clip: padding-box;  
	background-color: #fff; 
	border-radius: 1.25rem;  
	display: flex; 
	flex-direction: column; 
	outline: 0;
    pointer-events: auto; 
	position: relative; 
	width: 100%;
}

.modal-content-s {
	background-clip: padding-box;  
	background-color: #fff; 
	border-radius: 1.25rem;  
	display: flex; 
	flex-direction: column; 
	outline: 0;
    pointer-events: auto; 
	position: relative; 
	width: 100%;
	max-height: 600px;
	height: 90vh;        /* ✅ 팝업 자체 제한 */
}

.modal-header { 
	align-items: center; 
	border-top-left-radius: calc(0.5rem - 1px); 
	border-top-right-radius: calc(0.5rem - 1px); 
	display: flex;
    flex-shrink: 0; 
	justify-content: flex-end; 
	padding: 1.25rem 1.88rem; 
	border-bottom: 1px solid #d2d2d2;
}

.modal-title { 
	margin-bottom: 0;
	color:#333;
	font-weight: 600; 
	font-size: 1.25rem; 
	display: flex;
	justify-content: center;
	width: 100%;
}
.modal-body { 
	flex: 1 1 auto; 
	padding: 1.25rem 1.88rem;  
	position: relative; 
	height: 100%;
}
.modal-body-s { 
	flex: 1 1 auto; 
	padding: 1rem 2rem 2rem 2rem;  
	position: relative; 
	height: 100%;
}
.modal-body-c { 
	flex: 1 1 auto; 
	padding: 0 1rem 1rem;  
	position: relative; 
	overflow: hidden;
}

@media (min-width: 576px){
    .popup-s {
		margin: 1.75rem auto; 
		max-width:400px; 
		border-radius:15px;
	}
    .popup {
		margin: 1.75rem auto; 
		max-width:500px;
		border-radius:10px;
	}	
    .modal-body .step {margin-bottom: 2.5rem;}	
}
@media (max-width: 575px){
	.modal-body-s { 
		height: 100vh;
		padding: 1rem 1.5rem 2rem 1.5rem;
	}
	.modal-body-c { 
		overflow: hidden; /* 스크롤은 내부 요소에서 처리 */
		padding: 1rem;  
	}		
}


.btn-close { border: 0; border-radius: 0.375rem;  box-sizing: content-box; opacity: 0.5;  padding: 0.25em; background-color: var(--bs-white);}
.btn-close i { width: 1rem;  height: 1rem; font-size:20px;}/*수정*/
.btn-close:hover { color: #869ab8; opacity: 0.75;  text-decoration: none;}
.btn-close:focus {box-shadow: 0 0; opacity: 1; outline: 0;}
.btn-close.disabled,
.btn-close:disabled {opacity: 0.25;  pointer-events: none;  -webkit-user-select: none; -moz-user-select: none; user-select: none;}


.modal-body .step h3{margin:1rem 0 .5rem; color:#444; line-height:1.4; letter-spacing:-0.01em; font-weight:400;}

@media (max-width: 991.98px){
    .modal-body .step h3{font-size:1rem;}
}
/*기존 form group, form border*/
.InfoArea{border: 1px solid #d2d2d2; background-color: #fff; border-radius: 0.94rem; box-shadow: 0 0; font-size: 1rem; font-weight: 600; line-height: 1.6;
    padding: 0.75rem 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;}
.InfoArea > .Flex > p{color:#333; display:flex; align-items:center;}

.InfoArea > a{border-radius:0.63rem; font-size:1rem; padding:0.5rem 0;font-size:14px; width:70px; text-align:center; line-height:1.25rem; letter-spacing:-0.05rem; display:inline-block;}

@media (max-width:496px){
    .InfoArea > .Flex > p > span{font-size:14px;}
}

/*정산계좌관리 모달팝업*/
.selectBank h3{font-size: 1.125rem; margin:0; color:#000; line-height:1.4;}
.selectBank h4{color:#666;}
.selectBank > .allBank > .bank{/* flex-basis: 18%; */}
@media (max-width: 991.98px) {
    .selectBank > .allBank > .bank >p{font-size: 0.8rem; line-height: 1rem; letter-spacing: -0.06rem; font-weight:400;}
}
.modal-footer { align-items: center;  border-bottom-left-radius: calc(0.5rem - 1px); border-bottom-right-radius: calc(0.5rem - 1px); display: flex;
    flex-shrink: 0; flex-wrap: wrap; justify-content: space-between;}

@media (max-width:768px){
    .popup-wrap{background-color:#fff;position:static; }
}
@media (max-width:630px){
    .popup{margin:0 auto;}
}
@media (max-width:615px){
    .popup-wrap{padding:0;}
    .popup{ box-shadow:none;}
}

@media (max-width:550px){
    .selectBank > .allBank > .bank{flex-basis:31%;}
}
@media (max-width:398px){
    .selectBank > .allBank > .bank{flex-basis: 47.6%;}
}
@media (max-width:350px){
    .selectBank > .allBank > .bank{flex-basis: 100%;}
}
@media (max-width:768px){
    .InfoArea > a{border-radius: 0.5rem; padding: 0.5rem 0; width:45px; }
}

/*##################### 파티 만들기 #######################*/
.bgf{
	background-color:#fff; 
	border: 1px solid #f1f4f8; 
	box-sizing:border-box; 
	border-radius: 1.88rem; 
	color:#666;
	}

/*############# 파티찾기(신규) ###############*/
.stepbg{
	background-color:#fff; 
	border: 1px solid #f1f4f8; 
	box-sizing:border-box; 
	border-radius: 1.88rem; 
	padding: 1rem 0 0 0;
	
	display: flex;
    justify-content: center;  /* 가로 중앙 */
    align-items: flex-start;  /* 세로 맨 위 */
	padding-bottom: 25px;
	}
	
/*############# 좁은 파티상세 (내파티 > 유뷰브 상세 케이스) ###############*/
.ytbg{
	max-width:500px;
	background-color:#fff; 
	border: 1px solid #f1f4f8; 
	box-sizing:border-box; 
	border-radius: 1.88rem; 
	padding: 1rem 0 0 0;
	
	display: flex;
    justify-content: center;  /* 가로 중앙 */
    align-items: flex-start;  /* 세로 맨 위 */
	}	


/* 파티만들기,파티찾기 메인 타이틀*/
.mtit{margin-bottom: 3rem; color:#0f103f; line-height:1.3; font-weight:600; text-align:center; font-size: 2.3125rem;}
@media (max-width: 991.98px){
    .mtit{font-size: 1.875rem;}
}

@media (max-width:768px){
    .bgArea{padding:2rem 0;}
    .mtit{margin-bottom:2rem;}
}/*수정 간격*/

#leaderSubHelp{
    margin-bottom: 1rem;
    padding: 1.5rem 1.5rem;
    width: 100%;
    height: auto;
}
#leaderSubHelp ul{
    display:flex;
    align-items:center;
    justify-content: flex-start;
    flex-wrap:wrap;
    font-size: 1rem;
    letter-spacing: -0.05rem;
    padding: 0 2rem;
    margin:1.5rem 0 1rem; margin:1.5rem 0 1rem;}
#leaderSubHelp li{margin-bottom:0.25rem;}
#leaderSubHelp li:nth-child(2){margin:0 7%;}
#leaderSubHelp li > span{color:#3772ff; font-weight:600;}
.help-content {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex-direction: column;
    gap:0.75rem;
    width: 100%;
}

.leader_1{
    background: rgba(55, 114, 255, 0.05);
    border: 1px solid #D2D2D2;
    border-radius: 15px;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding: 1.5rem;
    width: 100%;
    height: auto;
    gap: 1rem;
    box-sizing: border-box;
}

/*뉴넷플릭스 관련*/
.netflix_1{
    background: rgba(55, 114, 255, 0.05);
    border: 1px solid #D2D2D2;
    border-radius: 15px;
    display:flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.netflix_2{
    background: #fff7f5;
    border: 1px solid #D2D2D2;
    border-radius: 15px;
    display:flex;
    align-items: center;
    flex-direction: column;
    padding: 0rem .5rem .8rem;
    width: 100%;
    box-sizing: border-box;
}

.red-bak{
    background: #fff8f7;
}


.leader_tit {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    color: #000;
}

.leader_tit h1{
    margin-top:0.5rem;
    font-weight:600;
    font-size: 1.5rem;
    text-align: center;
}

.leader_tit h1 span{
    color:#0050f1;
}


.leader_img {
    max-width: 36.75rem;
    margin-bottom:1rem;
}


.member_tit {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    color: #000;
}

.member_tit h1{
    margin-top:0.5rem;
    font-weight:600;
    font-size: 1.5rem;
    text-align: center;
}

.member_tit h1 span{
    color:#ff6142;
}


.member_img {
    max-width: 36.75rem;
    margin-bottom:1rem;
}



.leader_img_2 {
    width: 13rem;
    margin-bottom:0.5rem;
}


.leader_img img,
.leader_img_2 img {
    width: 100%;
}

.leader-label {
    background: #3d3d3d;
    border-radius: 15px;
    font-size: .875rem;
    font-weight: 700;
    font-style: italic;
    padding: .6rem 1.5rem;
    color: #fff;
}

.titArea {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    flex-direction: column;
    gap: 0.75rem;
}

.tit-sub {
    text-align: center;
}

.titArea h2{
    font-size: 1.5rem;
    font-weight: 500;
    color: #585858;
}

.titArea h2 span{
    color: #0050f1;
}

.titArea p {
    font-style: italic;
    color: #585858;
    line-height:1.6;
}

.help-list {
    display: flex;
    flex-direction: column;

}

.listArea {
    padding: 2.5rem 3rem;
    border-bottom: 1px solid #D2D2D2;
}

.listCon {
    display: flex;
    gap: 2.625rem;
    align-items: center;
}

.listCon img {
    width: 3rem;
}




.CheckCon img {
    width: 7rem;
}

.listtxt p {
    font-size: 1.25rem;
    color: #000;
    line-height: 1.5rem;
}

.listtxt p span {
    font-weight: 700;
}

/*넷플릭스*/
.listCon-net {
    display: flex;
    gap: 1rem;
}
.listCon-net img {
    width: 1.7rem;
}

.listtxt_net p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.25rem;
}

.listtxt_net p span {
    font-weight: 800;
}
.listtxt_s p {
    font-size: 1rem;
    color: #333;
    line-height: 1.2rem;
}

.listtxt_s p span {
    font-weight: 500;
}


.listCon-net1 {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.listtxt_net1 p {
    font-size: 1.3rem;
    color: #000;
    line-height: 1.25rem;
}

.listtxt_net1 p span {
    font-weight: 800;
}



.makePartyBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2rem;
}

.make_txt {font-weight:300; font-size:0.8rem; color:#484848;}

.check_log a {
    width: 14rem;
    padding: 0.94rem 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color:#fff;
    background-color:#484848;
    border-color:#484848;
    border-radius:0.63rem;
    font-size:1.0625rem;
    font-weight:600;
    line-height:1.6;
    display:inline-block;
    text-align:center;
}

.start_log .check_log{display:flex; align-items:center; justify-content:center;}
.start_log a{
    width: 14rem;
    padding: 0.94rem 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color:#fff;
    background-color:#084aea;
    border-color:#084aea;
    border-radius:0.63rem;
    font-size:1.0625rem;
    font-weight:600;
    line-height:1.6;
    display:inline-block;
    text-align:center;
}
.start_log a:hover, .start_log a:focus{background-color:#0041DD;}

/*이용료팝업 버튼*/
.start_log3 .check_log{display:flex; align-items:center; justify-content:center;}
.start_log3 a{
    width: 14rem;
    padding: 0.94rem 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color:#fff;
    background-color:#ff6142;
    border-color:#ff6142;
    border-radius:0.63rem;
    font-size:1.0625rem;
    font-weight:600;
    line-height:1.6;
    display:inline-block;
    text-align:center;
}
.start_log3 a:hover, .start_log3 a:focus{background-color:#FF3D17;}



.start_log2 .check_log{display:flex; align-items:center; justify-content:center;}
.start_log2 a{
    width: 14rem;
    padding: 0.94rem 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color:#fff;
    background-color:#ff6142;
    border-color:#ff6142;
    border-radius:0.63rem;
    font-size:1.0625rem;
    font-weight:600;
    line-height:1.6;
    display:inline-block;
    text-align:center;
}
.start_log2 a:hover, .start_log2 a:focus{background-color:#FF3D17;}

@media (max-width:1270px){
    #leaderSubHelp li:nth-child(2){margin:0 5% 0.25rem;}
}
@media (max-width:1250px){
    #leaderSubHelp li{width:50%;}
    #leaderSubHelp li:nth-child(2){margin:0 0 0.25rem;}
    .leader_1{
        width: 100%;
        /* flex-basis: 16.88rem;  */
        flex-grow: 1;
        flex-shrink: 1;
        flex-direction: column;
        display:flex;
        padding: 2rem;
    }
}
@media (max-width:991.8px){
    #leaderSubHelp ul, .ott_choice span{line-height: 1.13rem; letter-spacing: -0.06rem;} /*display7*/
    .leader_tit span{
        line-height: 1.5rem;
        letter-spacing: -0.06rem;
    } /*display8*/
}

@media (max-width:775px){
    #leaderSubHelp li{width:100%; margin:0.25rem 0;}
    #leaderSubHelp li:nth-child(2){margin:0.25rem 0;}
    #leaderSubHelp ul{padding:0;}
}

@media (max-width:830px){
    /* .leader_1{flex-direction:row;} */
    .leader_1 p{margin-top:0;}
    .em-leader{margin-right:15px;}

}

@media (min-width:769px){
    .leader_img .mobile {
        display: none;
    }
}

@media (max-width:768px){

    .leader_tit h1 {
        font-size: 1.25rem;

    }
    .leader_tit h1 span {
        display: block;
    }

    .member_tit h1 {
        font-size: 1.25rem;

    }
    .member_tit h1 span {
        display: block;
    }

    .leader-label {
        background: #3d3d3d;
        border-radius: 10px;
        font-size: .7rem;
        font-weight: 700;
        font-style: italic;
        padding: .4rem 1rem;
        color: #fff;
    }

    .leader_tit {
        gap: 1rem;
    }

    .titArea h2 {
        font-size: 1.125rem;
    }
    .leader_img {
        width: 90%;
    }
    .leader_img .pc {
        display: none;
    }

    .listArea {
        padding: 2.5rem 1.5rem;
        border-bottom: 1px solid #D2D2D2;
    }

    .listCon {
        gap: 1.5rem;
    }

    .listCon img {
        width: 35px;
    }

    .CheckCon img {
        width: 70px;
    }

    .listtxt p {
        font-size: 1.125rem;
        color: #000;
    }

    .listtxt_net p {
        font-size: 1.1rem;
        color: #000;
    }

    .listtxt_net1 p {
        font-size: 1.1rem;
        font-weight: 500;
        color: #000;
        text-align:center;
    }

    .listtxt_s p {
        font-size: .8rem;
        color: #000;
    }

    .ottA {
        height: 10rem;
    }

    .help-content{padding:0;}
    .em-leader{border-radius: 0.8em; font-size: 0.8rem; font-weight: 600;padding: 0.5rem 0.65rem;}
    .em-member{border-radius: 0.8em; font-size: 0.8rem; font-weight: 600;padding: 0.5rem 0.65rem;}

    .makePartyBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap:1rem;
        width: 100%;
    }

    .check_log, .start_log, .start_log2 {
        width: 60%;
    }

    .check_log a {
        width: 100%;
        border-radius: 0.8rem;
        font-size: 0.8rem;
        vertical-align: middle;
    }

    .start_log a{
        width: 100%;
        border-radius: 0.8rem;
        font-size: 0.8rem;
        vertical-align: middle;}

    .start_log2 a{
        width: 100%;
        border-radius: 0.8rem;
        font-size: 0.8rem;
        vertical-align: middle;}
}

@media (max-width:430px){
    .leader_1{padding:2rem 0.8rem;}
    .em-leader{margin-right:10px;}
    .em-member{margin-right:10px;}
    .leader_1 p{font-size:14px;}
    .listtxt p {
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #000;
    }

    .listArea {
        padding: 2rem 1rem;
    }
    .InfoArea > .Flex > p{color:#333; font-size: 14px; display:flex; align-items:center;}

}

/*넷플릭스 파티생성 완료*/
.helpFive1 {border-radius:1.88rem; padding:0 15rem 2rem;}


/*공유할 ott 선택하기*/
.stepTit{align-items: center; border-radius: 1.88rem;color: #161c2d; display: flex; font-size: 1.0625rem; padding: 1.5rem 2rem; position: relative;
    text-align: left;}

.stepTit .em-leader{margin-right:0.75rem; border-radius: 0.8em; padding: 0.8rem 1.25rem;}
.stepTit .em-member{margin-right:0.75rem; border-radius: 0.8em; padding: 0.8rem 1.25rem;}
.stepTit span{margin-right: 1rem; font-weight: 600; font-size: 1.1875rem; color:#161c2d;}/*수정*/

.helpFive{border-radius:1.88rem; padding:0 2rem 2rem;}
.ottArea{
    margin-top:0.75rem;
    padding:0 1rem;
    display:flex; 
	/*justify-content:space-between;*/
    gap:1.93rem;
    flex-wrap:wrap;
}

.helpFive .ottA{
    justify-content:space-between;
    flex-wrap:wrap;
    gap:0.75rem;
    /* margin-top:0.75rem; */
}/*수정 flex 지우기*/
.ott_choice-placeholder{flex-basis: 7.5rem; flex-grow: 1; flex-shrink: 1; gap: 0.5rem; flex-basis: 7.5rem; flex-grow: 1; flex-shrink: 1; display:flex; flex-direction: column;}

.ott_choice{border-radius: 1.5rem; width:85px; padding: 1.19rem 1.2rem 1.2rem; border: 0; background-color:#fff; align-items:center; text-align:cetner; align-items: center; display: flex;


    flex-direction: column; box-shadow: 0 0 20px rgb(0 40 183 / 20%);}
.ott{width: 50px; display:block; margin:0 auto 0.7rem; }
.ott_choice span{text-align:center;}
/*.ott_choice:hover{outline:1px solid #084aea;}*/

/*파티만들기 이용중 추가 수정*/
.usingA{
    text-align:center;
    color:#3772ff;
    margin-top: .75rem;
    font-size: .875rem;
}

.waitingA {
    text-align:center;
    color:#00c4b3;
    margin-top: .75rem;
    font-size: .875rem;
}

/*파티찾기 이용중 추가 수정*/
.usingB{
    text-align:center;
    color:#ff7437;
    margin-top: .75rem;
    font-size: .875rem;
}

.waitingB {
    text-align:center;
    color:#00c4b3;
    margin-top: .75rem;
    font-size: .875rem;
}

.waitingC {
    text-align:center;
    color:#ff6000;
    margin-top: .75rem;
    font-size: .875rem;
}


.selectBtn{display:flex; align-items:center; justify-content:center; }
.selectBtn a , .selectBtn button{width: 48%; padding: 0.94rem 0; margin-top: 2rem; color:#fff; background-color:#084aea; border:1px solid #084aea; border-radius:0.63rem;
    font-size:1.0625rem; font-weight:600; line-height:1.6; display:inline-block; text-align:center; font-family: inherit;}/*수정*/
.selectBtn a:hover, .selectBtn a:focus{background-color:#0041DD;}
.selectBtn button:hover, .selectBtn button:focus{background-color:#0041DD;}


/*추가 disabled*/
.selectBtn button:disabled , .selectBtn a:disabled{pointer-events: none; border:1px solid #d2d2d2; background-color:#e9e9e9; color:#d2d2d2;}

@media (max-width:1050px){
    .ottArea{gap:1rem;}
}
@media (max-width:865px){
    .ottArea{padding:0;}
}
@media (max-width:768px){
    .ottArea{padding: 0 2rem; }
    .stepTit .em-leader{border-radius: 0.6em;  font-size: 1.0625rem;  font-weight: 600; padding: 0.35rem 0.8rem;
        vertical-align: middle;}
    .stepTit .em-member{border-radius: 0.6em;  font-size: 1.0625rem;  font-weight: 600; padding: 0.35rem 0.8rem;
        vertical-align: middle;}
}



@media (max-width:768px){
    .stepTit span{font-size:1rem;}
    .ott_choice {border-radius: 0.94rem; padding: 1rem 1.13rem; width: 5rem; box-shadow: 0 0 20px rgb(0 40 183 / 20%);}
    .ott {width: 35px;}
}
@media (max-width:650px){
    .ottArea{justify-content: space-between;}
}
@media (max-width:460px){
    .ott_choice{width:4.8rem; padding:1rem;}
    .ottArea{padding:0 0.8rem;}
	
	.usingA{margin-top: .55rem;}
	.waitingA {margin-top: .55rem;}
	.usingB{margin-top: .55rem;}
	.waitingB {margin-top: .55rem;}		
}
@media (max-width:768px){
    .stepTit{padding: 1rem 1.5rem;}
    .helpFive{padding:0 1.5rem 2rem;}
    .selectBtn a{font-size:0.8rem; border-radius:0.8rem; line-height:1.6;}
}

@media (max-width:1100px){
    .helpFive1{padding:0 1.5rem 2rem;}
}

.mbt1r{margin-bottom:1rem;}

/*파티만들기 이용권*/
@media (min-width: 768px){
    .ott_con {padding-left: 2rem; padding-right: 2rem; }
}


/*이용권*/
.helpFive .ott_con{flex-wrap:nowrap;}
.leftA {flex:0 0 auto; width:50%; }
.rightA{flex:0 0 auto; width:47%;}

.helpFive1 .ott_con{flex-wrap:nowrap;}
.leftA {flex:0 0 auto; width:50%; }
.rightA{flex:0 0 auto; width:47%;}

@media (max-width: 1060px){
    .rightA{width:45%;}
    .leftA{width:52%;}
}
@media (max-width: 1030px){
    .rightA{width:42%;}
    .leftA{width:54%;}
}
@media (min-width: 576px){
    .leftA{padding-right:1.5rem;}
}

.leftA > div{align-items:center;}
.leftA > div > h4{font-size:1.13rem; letter-spacing:-0.05rem; color:#666; font-weight:600;}
.leftA > div > ul{gap: 0.5rem; flex-wrap:nowrap;}
.leftA > div > ul{flex: 0 0 auto; width: 75%;}
.btn-s{padding: 0.75rem 1rem; border-radius: 0.9rem; cursor: pointer; box-shadow: 0 0 20px rgb(0 40 183 / 20%); text-align:center;}
.emoji_s {width: 24px;}
.leftA > div:nth-child(2){margin-top:0.75rem;}
.leftA > div > li{height:50px; color:#666; flex: 1 1 auto; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; border: 1px solid #084aea;}
.leftA .btn-s{flex: 1 1 auto; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; text-align:center;}
.leftA .btn-s:hover{outline:1px solid #084aea;}
.rightA p{background-color:#eaf0ff; color:#084aea; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; width:100%;}
.rightA > p{padding: 0.88rem 0; border-radius: 0.9rem; text-align: center;}
.rightA > p:nth-child(2){margin-top:0.75rem;}

@media (max-width:991px){
    .helpFive .ott_con{flex-wrap:wrap; margin-top:0.75rem;}
    .helpFive1 .ott_con{flex-wrap:wrap; margin-top:0.75rem;}
    .leftA{width:100%;}
    .rightA{width:100%; margin-top:1.5rem;}
    /*.leftA > div{display:block;} 수정 파티찾기 에서 반응형일때 ott 박스 flex 필요*/

}
@media (max-width:768px){

    .emoji_s {width: 16px;}
    .leftA .btn-s{padding: 1rem 1rem; border-radius: 0.9rem; cursor: pointer; box-shadow: 0 0 20px rgb(0 40 183 / 20%);}
    .rightA > p{padding: 0.75rem 0;border-radius: 0.9rem; text-align: left; font-size: 0.8rem; text-indent:15px;}
    .selectBtn a{padding: 0.94rem 3.13rem; width: 100%;}
    .leftA > div{display:block;}
    .leftA > div > h4{margin-bottom:0.5rem; font-size: 0.88rem; letter-spacing: -0.05rem; line-height: 1.13rem;}

}

/*파티만들기 완료페이지*/
.InfoBoxA .emoji_l {width: 150px; margin:0 auto; display:block;}
.InfoBoxA h3{font-size:2.6875rem; line-height:1.2; text-align:center; font-weight:600; margin-top:1.5rem;}
.InfoBoxA h3 strong{color:#084aea;}
.info_box{border: 1px solid #d2d2d2; padding: 1rem 1.25rem; border-radius: 1rem; box-sizing: border-box; width:48%; margin:2rem auto 0; font-size:1rem;
    letter-spacing:-0.05rem;}

.info_box li{display:flex; justify-content:space-between; font-weight:600; color:#0f103f; padding-bottom:0.5rem; align-items: center;}
.border-bottom{border-bottom:1px solid #d2d2d2;}

.info_box li.mt{padding-bottom:0; margin:0.75rem 0;}
.info_box li.mt2{padding-bottom:0; margin:0.75rem 0; font-weight:400;}

.info_box li.last-child1{color:#084aea; font-weight:600; padding-top:1rem; border-top:1px solid #d2d2d2;}
.info_box li.last-child2{color:#dd7865; font-weight:400; }

.info_box li.last-child3{color:#ff6142; font-weight:600; padding-top:1rem; border-top:1px solid #d2d2d2;}




@media (max-width:991px){
    .info_box{font-size: 0.9rem; line-height: 1.13rem; letter-spacing: -0.03rem;}
    .InfoBoxA h3{font-size:2rem;}
}
@media (max-width:767px){
    .info_box{width:100%;}
    .InfoBoxA .emoji_l {width: 100px;}

}
@media (max-width:660px){
    .InfoBoxA h3{font-size:30px;}
}
@media (max-width:470px){
    .InfoBoxA h3{font-size:27px;}
}
@media (max-width:398px){
    .InfoBoxA h3{font-size:23px;}
}

/*파티만들기 기존팝업창1 party5*/
@keyframes progress-bar-stripes {0% {
    background-position-x: 1rem;
}
}
.progress-area{padding: 1.5rem 2rem;}
.progress {background-color: #f1f4f8; border-radius: 0.375rem; box-shadow: inset 0 1px 2px rgba(22, 28, 45, 0.075); font-size: 0.79688rem;
    height: 1rem; width: 100%;}

.progress,.progress-bar {display: flex;overflow: hidden;}

.progress-bar {background-color:#3772ff; color: #fff; flex-direction: column; justify-content: center;text-align: center; transition: width 0.6s ease; white-space: nowrap;}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {transition: none;}
}
.progress-bar-striped {background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 75%, transparent 0, transparent);background-size: 1rem 1rem;}
.progress-bar-animated {-webkit-animation: progress-bar-stripes 1s linear infinite;animation: progress-bar-stripes 1s linear infinite;}
@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {-webkit-animation: none; animation: none; }
}
/*파티만들기 기존 팝업 progress 하단 내용*/
.infoTit{align-items: center; color: #161c2d; display: flex; font-size: 1.0625rem; padding-bottom:1rem; margin:1rem 2rem 1.5rem; position: relative;
    text-align: left; border-bottom:1px solid #d2d2d2;}
.infoTit span{font-weight:400; font-size: 1.2rem; color:#666; line-height:1.4; letter-spacing:-0.01rem;}/*수정*/

/*파티해산 정산시작 전 팝업*/
.infoTit1 {align-items: center; color: #161c2d; font-size: 1.0625rem; text-align: center; margin-top:0.5rem;}


/*파티만들기 추가 팝업 공통영역에서 떼어냄 수정*/
.makePartyPop .infoTit span , .findParty .infoTit span{color:#000;}/*컬러변경*/
.makePartyPop .make1 .form-group > .form-control , .findParty .make1 .form-group > .form-control{color:#666; font-weight:600; font-size: 0.9rem;}/*은행계좌부분 컬러변경*/
.iml{display:inline-block; margin-left:0.25rem;}/*파티만들기 팝업 ott 이름 옆에 화살표*/

.infoText{padding:1rem; border-radius:1rem; background-color:#eaf0ff;}
.ott_con .form-group label{font-size:1.13rem;}
.infoText li{display:flex; align-items:center; margin-bottom:0.25rem;}
.infoText li img{margin-right:0.5rem;}
.infoText li p{font-size:1rem; line-height:1.25rem; letter-spacing:-0.05rem;}

@media (max-width: 991.98px){
    .infoText li p{font-size:0.8rem; line-height:1rem; letter-spacing:-0.06rem;}
    .infoTit span{font-size:1.125rem;}
    .ott_con .form-group label{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}
}
.form-control:disabled, .form-control[readonly]{background-color:#f1f1f1; color:#3772ff; }
@media (max-width: 767px){
    .progress-area{padding:1rem 0;}
    .infoTit{margin:1rem 0;}
    .infoTit span > span{display:block;}
    .form-control{font-size:0.9rem;}
    .form-group > .form-control{width:80%;}
    .form-group > .select {
        width:86%;
    }
    .ott_con .form-group label{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}
}
@media (max-width: 767px){
    .ott_con .form-control > span > span{display:inline-block; text-indent:34px;}
    .ott_con .form-group > .form-control{padding: 0.6rem 0.8rem;}
    .form-group1 > .form-control{width:50%; padding: 0.6rem 0.8rem;}
}
@media (max-width:430px){
    .ott_con .form-group > .form-control{width:90%; padding: 0.6rem 0.8rem;}
    .form-group1 > .form-control{width:35%; padding: 0.6rem 0.8rem;}
}

.d-space{justify-content:space-between; margin-bottom:1.25rem;}
.d-space a{width:46%; margin-left:1%; margin-right:1%;}
.d-space a.prev{margin-left:0; margin-right:2%; background-color:#e0e0e0; outline:1px solid #d2d2d2; color:#666; border-color:#d2d2d2;}

.d-space1{margin-bottom:1.25rem;}
.d-space1 a{width:46%; margin-left:1%; margin-right:1%;}
.d-space1 a.prev{margin-left:0; margin-right:2%; background-color:#e0e0e0; outline:1px solid #d2d2d2; color:#666; border-color:#d2d2d2;}


/* 파티만들기 기존팝업 이메일계정*/
.mr1{margin-right:1rem; display:inline-block;}/*웨이브,티빙 등 이미지 margin right*/
.justify-space{justify-content:space-between;}

.btn-outline-primary {background-color: #fff; border-color: #3772ff; border:1px solid #3772ff;color: #3772ff; border-radius: 0.63rem; padding: 0.5rem 2rem;
    font-size: 0.88rem; font-weight: 600; line-height: 1.6; display:inline-block;}
a.btn-outline-primary{color: #3772ff;}
.btn-outline-primary:hover {background-color: #3772ff;color: #fff;}
.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {background-color:#3772ff;border-color: #3772ff;color: #fff;}
.btn-outline-primary img:hover {background-image: url(/img/sub/right-arrow-w.svg);}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {background-color: transparent;color: #3772ff;}
.infoTit > a > i{font-weight:400; }

.infoText li > p > a{margin-left:1rem;}
.makePartyPop .infoText{margin-top:1.5rem;}

/*POPUP 상단의 마진 적용*/
.marginPOPt{margin-top:1rem;}

/*프로필명 margintop 적용하기*/
.marginbt{margin-top:2rem;}

/*할인코드*/
.Subtext_blue{text-align: center; margin-top:1.5rem;}
.Subtext_blue > span{color:#0e9fea; font-weight:400; font-size:1rem; letter-spacing:-0.05rem; }
.Subtext_red{text-align: center; margin-top:1.5rem;}
.Subtext_red > span{color:#ff1200; font-weight:400; font-size:1rem; letter-spacing:-0.05rem; }
.Subtext_green{text-align: center; margin-top:1.5rem;}
.Subtext_green > span{color:#00ac31; font-weight:400; font-size:1rem; letter-spacing:-0.05rem; }

@media (max-width:768px){
    .Subtext_blue{text-align: center; margin-top:1.5rem;}
    .Subtext_blue > span{color:#0e9fea; font-weight:400; font-size:0.9rem; letter-spacing:-0.05rem; }
    .Subtext_red{text-align: center; margin-top:1.5rem;}
    .Subtext_red > span{color:#ff1200; font-weight:400; font-size:0.9rem; letter-spacing:-0.05rem; }
    .Subtext_green{text-align: center; margin-top:1.5rem;}
    .Subtext_green > span{color:#00ac31; font-weight:400; font-size:0.9rem; letter-spacing:-0.05rem; }
}


a.btn-link {display:inline-block; color:#3772ff; font-weight: 400; text-decoration: none;font-size: 0.88rem; padding: 0;}
a.btn-link:hover {color: #3772ff;}
a.btn-link:focus, a.btn-link:hover {text-decoration: underline;}
a.btn-link.disabled, a.btn-link:disabled {color: #869ab8;}
@media (max-width:768px){
    .bgf {border-radius:0.88rem;}
    .stepbg {border-radius:0.88rem;}	
    .justify-space > p{display:flex;}
    .mr1{margin-right: 0.5rem;}
    .btn-outline-primary{padding: 0.4rem 0.5rem;}
}
@media (max-width:430px){
    .infoTit span{font-size:1rem; letter-spacing: -0.01rem;}
    .btn-outline-primary{font-size:0.5rem;}
    .makepop .infoText{padding:1rem 0.5rem;}
    .makepop .infoText li img{margin-right:3px; width:20px; height:20px;}
    .makepop .infoText li p.Flex{display:block; width:100%; line-height:9px;}
    .makepop .infoText li p > span{padding-top:10px; display:block;}
    .makepop .infoText li > p > a{float:right; margin-left:0; font-size:0.8rem;}

}

/*파티만들기 팝업 내용확인*/
.checkboxA{}
.checkbox-wrapper{width:100%; display:inline-block;}
.checkbox-input, .checkbox-input1{clip: rect(0 0 0 0);-webkit-clip-path: inset(100%); clip-path: inset(100%); overflow: hidden; position: absolute;white-space: nowrap;
    width: 1px; height: 1px;}
.checkbox-input:checked + .checkbox-tile {border-color: #3772ff; color: #3772ff; background-color: #eaf0ff;}
.checkbox-input:checked + .checkbox-tile:before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; background-color: #3772ff;border-color: #3772ff;}
.checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label { color: #3772ff;}
.checkbox-input:focus + .checkbox-tile { border-color: #3772ff;}
/*.checkbox-input:focus + .checkbox-tile:before { -webkit-transform: scale(1); transform: scale(1); opacity: 1;}

*/.checkbox-tile { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
      flex-direction: column; -webkit-box-align: center;-ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;border: 1px solid #d2d2d2;
      color:#666; padding:1.25rem; border-radius: 1rem; -webkit-transition: 0.15s ease; transition: 0.15s ease; cursor: pointer;position: relative;}

.checkbox-tile:before {content: ""; position: absolute; display: block;width: 1.55rem; height: 1.55rem;border: 2px solid #d2d2d2;background-color: #fff; border-radius: 50%;
    top: 1.25em; right: 1.25rem; opacity:1; transform: scale(1); -webkit-transform: scale(1);transform: scale(1); -webkit-transition: 0.25s ease;  transition: 0.25s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 16px; background-repeat: no-repeat; background-position: 50% 50%;}
	
/*.checkbox-tile:hover {border-color: #d2d2d2;}
.checkbox-tile:hover:before{ -webkit-transform: scale(1);  transform: scale(1); opacity: 1;}*/

.checkbox-tile > div{flex: 0 0 auto; width: 88%;}
.checkbox-tile > div > p{font-weight:600; font-size:1.13rem; letter-spacing:-0.05rem;}
.checkbox-label {color:#666; -webkit-transition: .375s ease; transition: .375s ease;}
.checkbox-tile ul {padding-left: 1.25rem; margin-top:0.5rem; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem;}
.checkbox-tile li {margin-bottom: 0.5rem;list-style: disc;}
.checkbox-tile li:last-child {margin-bottom: 0px;}
.mt07{margin-top:0.75rem;}

/* 추가 수정 파티탈퇴 팝업 */
.leavePartyPop2 .btn-close{padding:0;}

@media (max-width:768px){
    .checkbox-tile > div > p{font-size: 0.88rem;letter-spacing: -0.05rem; line-height: 1.13rem;}/*{여는태그없어서 수정*/
    .checkbox-tile:before {width: 1.25rem; height: 1.25rem;}
    .checkbox-tile > div > p{font-size: 0.88rem; letter-spacing: -0.05rem; line-height: 1.13rem;}
    .checkbox-tile li{font-size: 0.8rem; line-height: 1rem; letter-spacing: -0.06rem; /*동그라미체크간격에 맞춰서 새로 추가 검토받아야함*/width:115%;}
}

/*파티만들기 완료 페이지*/
.sucA{height:auto;}
.sucA > .lottarea{display:block; margin:20px auto 0; width:160px; height:160px;}
.sucA > h2{font-weight:600; text-align:center; padding:0 0 1rem; color:#000;}


@media (max-width:991px){
    .sucA > h2{font-size:1.5rem; color:#000;}
}
@media (max-width:768px){
    .sucA > h2{font-size:20px; color:#000;}
    .sucA > h3{font-size:14px; font-weight:400;}
    .sucArea{}
}
.sucA > div.ottImg_a{margin-top:0.8rem;}
div.ottImg_a > p{border-radius: 1.88rem; padding: 1rem 1rem; box-shadow: 0 0 20px rgb(0 40 183 / 20%); width:117px; height:auto; margin:0 auto; }
div.ottImg_a > p > span{display:block; margin:0.75rem 0.5rem 0; font-szie:1rem; letter-spacing:-0.05rem; text-align:center;}

.sucA > h3{font-weight:400; text-align:center;}
.sucA .selectBtn > a{margin:0.5rem;}

/*파티찾기*/
#leaderSubHelp li > span.orange{color:#ff6142;}
.findParty .em-leader{background-color:#ff6142;}
.findParty .leader_1{background-color:rgba(255, 97, 66, 0.05);}
.findParty .leader_1 p strong{color:#ff6142;}
.findParty .start_log a{background-color:#ff6142; border-color:#ff6142;}
.findParty .start_log a:focus + .findParty .start_log a,
.findParty .start_log a:focus,
.findParty .start_log a:hover {background-color: #FF3D17; border-color: #FF3D17; color: #fff;}

/*파티찾기2,3,4*/
/*.findParty .ott_choice{box-shadow:0 0 20px rgb(255 97 66 / 33%);}수정*/
.findParty .ott_choice:active{outline:1px solid #FF3D17; border-color:#ff6142;}
/*.findParty .ott_choice:hover{outline:1px solid #FF3D17; border-color:#ff6142;}*/
.findParty .selectBtn a, .findParty .selectBtn button{background-color:#ff6142; border-color:#ff6142;}
.findParty .selectBtn a:active, .findParty .selectBtn a:hover, .findParty .selectBtn a:focus{background-color:#FF3D17;}
.findParty .selectBtn button:hover, .findParty .selectBtn button:focus{background-color:#FF3D17;;}
.findParty .btn-s{/*box-shadow:0 0 20px rgb(255 97 66 / 33%);*/ outline: 1px solid #ff6142;}/*수정 boxshadow 주석*/
.findParty  .leftA .btn-s:hover{outline: 1px solid #ff6142;}
.findParty .InfoBoxA h3 strong , .findParty .info_box li:last-child {color:#ff6142;}
.line-through{text-decoration: line-through;}
.findParty .leftA{width:50%;}

@media (max-width:1210px){
    /*반응형 일때 추가 수정*/
    .findParty  .leftA{width:50%;}
}
@media (max-width:1000px){
    /*반응형 일때 추가 수정*/
    .findParty  .leftA{width:60%;}
}
@media (max-width:430px){
    .leftA > div > ul{width:100%;}
}

.bgOrange{
	background-color:#ffeeeb; 
	padding: 0.88rem; 
	border-radius: 0.9rem; 
	text-align: center; 
	margin-top:1.5rem; 
	font-size:0.93rem; 
	letter-spacing:-0.03rem; 
	color:#666;
	width: 45%;
	}	
.bgOrange > span{
	color:#ff6142; 
	font-weight:600;
	}
	
@media (max-width:991px){
    .bgOrange{line-height:1.13rem; letter-spacing:-0.06rem; font-size: 0.8rem; width: 45%;}
}
@media (max-width:768px){
    .bgOrange{padding: 0.75rem; border-radius: 0.9rem; font-size: 0.8rem; width: 100%;}
    .findParty .leftA{width:100%;}
}

/*파티찾기 기존팝업*/
.findParty .progress-bar{background-color:#ff6142;}
.findParty .infoText{background-color:#ffeeeb;}
.findParty .d-space a.prev{background-color:#e0e0e0; border:1px solid #d2d2d2;}

.txt{font-size:1.13rem; letter-spacing:-0.05rem; font-weight:600;}

.checkbox-input1:checked + .checkbox-tile {border-color: #ff6142; color: #ff6142; background-color: #ffeeeb;}
.checkbox-input1:checked + .checkbox-tile:before { -webkit-transform: scale(1); transform: scale(1); opacity: 1; background-color:#ff6142;border-color: #ff6142;}
.checkbox-input1:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label { color: #ff6142;}
.checkbox-input1:focus + .checkbox-tile { border-color: #ff6142;}

/*내파티 로그인페이지*/
.padding5r{padding:3rem 0 5rem;}
.slideArea{width:100%; overflow:hidden; position:relative; margin-bottom:2.5rem;}
.banner-slide{width:200%;}
.banner-slide li{width:50%; float:left;}
.banner-slide li img{display:block; width:100%; }
.slideBtn{overflow:hidden; position:absolute; bottom:10px; left:50%;}
.slideBtn > span{width:6px; height:6px; display:inline-block; margin:0 3px; background-color:#3772ff;}
.slideBtn > span.nextBtn{background-color:#ccc;}
.emoji_l { width: 150px; display:block; margin:0 auto;}
.banner-slide > li > .pcImg{display:block;}
.banner-slide > li > .mbImg{display:none;}
.txcenter{text-align:center; font-weight:600; margin:0.75rem 0 1rem; color:#000;}
.login-btnA{padding:1.5rem;}
.login-btn{display:block; margin:0 auto; background-color:#3772ff; border-color:#3772ff; color:#fff; font-weight:600; width:auto; border:none;
    border-radius:0.63rem; padding:1rem 5rem; font-size:1.1875rem;}
.login-btn:hover{background-color:#195CFD;}
@media (max-width: 768px){
    .emoji_l {width: 100px;}
    .banner-slide > li > .mbImg{display:block;}
    .banner-slide > li > .pcImg{display:none;}
    .txcenter{width:85%; margin:0.75rem auto;}
    .login-btn{font-size:1.0625rem; padding:1rem 4.85rem;}
}

/*내파티*/

.use-ott{}
.use-ott > div{display:flex; flex-wrap:wrap; margin-top:1rem;}

.myparty-card{
    box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2);
    border-radius: 20px;
    background: #fff;
    padding:1.6%;
    font-size: 1rem;
    cursor: pointer;
    width:28%;
    margin-right:2%;
    margin-bottom:1rem;
}
.use-ott .myparty-card{background-color:#084aea;}/*추가 수정*/
.myparty-card:hover {box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2);}
.use-ott .myparty-card{background-color:#084aea; display:flex; align-items:center; }/*추가수정*/
.use-ott .myparty-card > span{padding:0.5rem;}
.use-ott .myparty-card > span > i{color:#fff;}
.myparty-card li.Flex{align-items:center;}
.use-ott .myparty-card li.Flex{justify-content:unset;}
.use-ott .myparty-card li:nth-child(2){margin-top:1rem;}
.myparty-card li.Flex > div{align-items:center;}
.myparty-card li.Flex > div p img{margin-right:0.75rem;}
.myparty-card li.Flex > div strong{color:#fff;}
.n-use-ott .myparty-card li.Flex > div strong{color:#161c2d;}/*색상변경 수정*/
.myparty-card li.Flex span{padding: 0.5rem 0.63rem; /*box-shadow: 0 0 0 1px #3772ff inset; */background-color: #eaf0ff; border-radius: 0.63rem;
    color: #3772ff; font-size: 0.88rem; font-weight: 600; line-height: 1.13rem;}/*수정*/
.myparty-card li.Flex span.tag{box-shadow: 0 0 0 1px #3772ff inset;}/*추가 수정*/
.myparty-card li.Flex span.tag-leader{padding: 0.5rem 0.63rem; background-color:#fff; border-radius: 0.63rem; color:#3772ff;font-size: 0.88rem;font-weight: 600; line-height: 1.13rem; margin-right:0.5rem;}
.myparty-card li.Flex span.tag-member{padding: 0.5rem 0.63rem; background-color:#fff; border-radius: 0.63rem; color:#ff6142;font-size: 0.88rem;font-weight: 600; line-height: 1.13rem; margin-right:0.5rem;}
.emoji_xs{width:16px;}
.myparty-card li.Flex span.tag-price{padding: 0.5rem 0.63rem; background-color:#000; border-radius: 0.63rem; color:#fff;font-size: 0.88rem;font-weight: 600; line-height: 1.13rem; margin-right:0.5rem;}
.myparty-card li.Flex span.tag-matching{background:none; box-shadow: 0 0 0 1px #fff inset; color:#fff;}
.tag-matching{padding: 0.5rem 0.63rem; background:none;  box-shadow: 0 0 0 1px #fff inset; border-radius: 0.63rem; color:#fff;font-size: 0.88rem;font-weight: 600; line-height: 1.13rem;}
.myparty-card li.price{background-color: #f1f1f1; border-radius: 0.63rem; text-align: center; padding: 0.38rem 0; margin-top:1rem; color:#000;}/*색상변경 수정*/
.n-use-ott{border-top:1px solid #d2d2d2; color:#666;}
.n-use-ott > h2{margin:3rem 0 0; text-align:center; color:#161c2d; font-weight:400; line-height:1.5rem; font-size:1rem;}
.use-ott > div{display:flex; flex-wrap:wrap; margin-top:1rem;}
.use-ott > div > ul:nth-child(3){margin-right:0;}
.n-use-ott > div{display:flex; flex-wrap:wrap; margin-top:1rem;}
.n-use-ott > div > ul:nth-child(3){margin-right:0;}
.myparty-help{background-color:#fff; color:#666; padding:0.75rem; text-align:center; border-radius:1rem; margin-top:1rem;}
.myparty-help > span{color:#3772ff; font-weight:600;}


.party-choice {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 55px;
    gap: .75rem;
    margin-top: .5rem;
}

.party-choice p {
    font-size: .75rem;
    font-weight: 400;
}

.make-party, .find-party {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .375rem;
    flex: 1 0 0;
}

.party-choice a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.13rem;
}

.make-party p {
    color: #3772ff;
}

.find-party p {
    color: #FF6142;
}

.make-partyBtn {

    padding: 0.5rem 0.63rem;
    box-shadow: 0 0 0 1px #3772ff inset;
    background-color: #eaf0ff;
    border-radius: 0.63rem;
    color: #3772ff !important;
}

.find-partyBtn {
    padding: 0.5rem 0.63rem;
    box-shadow: 0 0 0 1px #FF6142 inset;
    background-color: #FFEEEB;
    border-radius: 0.63rem;
    color: #FF6142 !important;
}



@media (max-width: 1160px){
    .myparty-card{width:45%;}
    .use-ott > div > ul:nth-child(2) , .n-use-ott > div > ul:nth-child(2){margin-right:0;}
    .use-ott > div > ul:nth-child(3) , .n-use-ott > div > ul:nth-child(3){margin-right:2%;}
    .use-ott > div > ul:nth-child(4) , .n-use-ott > div > ul:nth-child(4){margin-right:0;}
    .use-ott > div > ul:nth-child(5) , .n-use-ott > div > ul:nth-child(5){margin-right:2%;}
    .use-ott > div > ul:nth-child(6) , .n-use-ott > div > ul:nth-child(6){margin-right:0;}
}

@media (max-width: 768px){
    .myparty-card{width:100%; padding:20px;}
    .use-ott > div > ul , .n-use-ott > div > ul{margin-right:0;}
    .use-ott > div > ul:nth-child(3) , .n-use-ott > div > ul:nth-child(3){margin-right:0;}
    .myparty-help{margin-top:2rem;}
}

/*내파티*/
.myPartyA .card{flex-direction: row; margin-bottom:2.5rem;}
.myPartyA .card-header h2{font-weight:600; font-size:2rem; line-height:2.5rem; letter-spacing:-0.05rem; color:#000;}/*수정*/
/*수정
@media (min-width: 576px){
.myPartyA .card-header h2{margin-top:1.5rem;}
}*/
@media (max-width: 991.98px){
    .myPartyA .card-header h2{font-size:1.5rem; letter-spacing:-0.08rem;}
}/*수정*/
.myPartyA .card-header .Flex{align-items:flex-start; margin-top:1rem; justify-content: start;}
.mr075{margin-right:0.75rem;}
.mr05{margin-right:0.5rem;}
.myPartyA .card-header span{color:#666; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem;}

.myPartyA .card-cont{width:auto; position:relative; flex:1 1 auto; padding:1.88rem;}


/*넷플용*/
.myPartyA .card-cont1{
	width:auto; 
	position:relative; 
    display: flex;
    align-items: center;
    gap: 12px;
	padding:1.88rem;
} 

.mt1r{margin-top:0.5rem;}

.myPartyA .card-cont > div{width:20%; height: 160px;}
.myPartyA .card-cont .detail-card-leader p > a , .myPartyA .card-cont .detail-card-member p > a{font-size:1rem; letter-spacing:0.05rem; font-weight:600; margin-top:1rem; color:#fff; display:block;}
.myPartyA .card-cont .detail-card-leader p > a > i , .myPartyA .card-cont .detail-card-member p > a > i{font-weight:400; font-size:1.1em;margin-left:0.5rem;}
.myPartyA .card-cont .detail-card-common p > a{font-size:1rem; letter-spacing:0.05rem; font-weight:600; margin-top:1rem; color:#000; display:block;}
.myPartyA .card-cont .detail-card-common p > a > i{font-weight:400; font-size:.875em;margin-left:0.5rem;}/*수정부분*/

/*넷플용*/
.myPartyA .card-cont1 > div{
	width:120px;
    height: 150px;
	}
.myPartyA .card-cont1 .detail-card-leader p > a , .myPartyA .card-cont1 .detail-card-member p > a{font-size:1rem; letter-spacing:0.05rem; font-weight:600; margin-top:1rem; color:#fff; display:block;}
.myPartyA .card-cont1 .detail-card-leader p > a > i , .myPartyA .card-cont1 .detail-card-member p > a > i{font-weight:400; font-size:.875em;margin-left:0.5rem;}
.myPartyA .card-cont1 .detail-card-common p > a{font-size:1rem; letter-spacing:0.05rem; font-weight:600; margin-top:1rem; color:#000; display:block;}
.myPartyA .card-cont1 .detail-card-common p > a > i{font-weight:400; font-size:.875em;margin-left:0.5rem;}/*수정부분*/


.detail-card-date {font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); margin:0.25rem 0; }
.detail-card-date > span{color:#fff;}
.detail-card-date-common{font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); margin:0.25rem 0;}/*수정*/
.orange{color:#ff6142;}
.detail-card-leader {box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2); border-radius: 1.25rem; background:#084aea;  padding: 0.75rem;
    color:#fff; font-size: 1rem;  text-align: center;}

.detail-card-member {box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2); border-radius: 1.25rem; background:#FF6142;
    padding: 0.75rem; color:#fff; font-size: 1rem; text-align: center;}
.detail-card-common { box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2); border-radius: 1.25rem;background: #fff;padding: 0.75rem;
    color:#000; font-size: 1rem; text-align: center;}

.detail-card-common > .mb{color:#666; margin-top:0.5rem; font-size:0.88rem; line-height:1.25em; letter-spacing:-0.05rem; text-align:left;}
.mt15r{margin-top:0.8rem;}
.detail-card-date-common{ font-size: 0.88rem; color:#000; margin:0.25rem 0;}/*수정*/

/* 파티원일때  닉네임*/
.mt1rnick{margin-top:1rem; font-weight:600;}
.detail-card-lock{box-shadow: 0px 0px 20px rgba(0, 40, 183, 0.2); border-radius: 1.25rem; background:#d2d2d2; padding: 0.75rem;
    color:#666; font-size: 1rem; text-align: center;}

.detail-card-lock > .mb{color:#666; margin-top:0.5rem; font-size:0.88rem; line-height:1.25em; letter-spacing:-0.05rem;  text-align:left;}
.detail-card-lock > .Flex{align-items:center; justify-content:center; height:80%;}
.detail-card-lock i {line-height: 2rem;}

@media (max-width:1200px){
    .myPartyA .card{flex-direction:column; flex-wrap: unset;}
}


@media (max-width:660px){
    .detail_ottA{
        flex-direction: row !important;
        gap: 16px !important;
    }
    .myPartyA .card-header h2{margin-top:0;}
}


.detail_ottA {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
    gap: 24px;
}

.platform {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*내파티*/
.mydetail{
	width:48%; 
	display:flex; 
	flex-direction:column; 
	color:#000;
	gap: 40px;
}
.infoLogin{
	width:100%; 
}

/*공통 영역*/
.mydetail h2 , .etiq h2{margin-bottom:0.75rem; font-weight:400;}/*수정*/
.mydetail h2 > strong , .etiq h2 > strong{font-size:1.25rem; font-weight:600}

.mydetail h2 > span > a{
    color:#666;
    font-size:1rem;
    letter-spacing:-0.05rem;
}

.etiq span a {
    color:#666;
    font-size:1rem;
    letter-spacing:-0.05rem;
}

.notice ul {
    box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.05);
    background-color: #fff;
    margin-bottom: 1rem;
}


.mydetail h2 > span > a:hover{color:#3772FF;}
@media (max-width:991.8px){
    .mydetail h2 > span > a{margin-bottom:0.75rem; font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}/*수정*/
}
.mydetail h2 > span > a > i{font-weight:900; margin-left:0.5rem;}



.detail-body {
    padding:1.25rem;
    line-height: 1.5rem;

}


/*넷플릭스 파티만들기 완료*/
.detail-body1 {
    padding:1rem;
    line-height: 2.13rem;
}
.infoLogin li{margin-bottom:0.75rem; box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.05); background-color:#fff;}
.infoLogin li.detail-body div{display:flex; justify-content:space-between; align-items:center;}

.infoLogin li.detail-body p > span{
    width:80px;
    display:inline-block;
    color:#333;}/*수정*/

.infoLogin li.detail-body p > strong{
    width:130px;
    display:inline-block;
    color:#333;}/*수정*/

.infoLogin li.detail-body .copyBtn{background-color:#f1f1f1; color:#666; border:1px solid #d2d2d2; border-radius:0.63rem; padding:0.3rem 0.63rem; line-height:1.6;
    font-weight:600; font-size:0.88rem;}
.infoLogin li.detail-body .copyBtn:hover{background-color:#e0e0e0;} /*수정*/
.infoLogin li.detail-body .copyBtn > i{margin-right:0.25rem;display:inline-block;}
.infoLogin > p {
	margin-bottom:1.5rem; 
	width:100%;
	}
.infoLogin > p > .btn-outline-orange { 
	width:100%; 
	font-size:1rem; 
	letter-spacing:-0.05rem; 
	font-weight:500;
	padding:0.8rem;
	align-items:center;
	}

/*넷플릭스 파티만들기 완료*/
.infoLogin1 li{margin-bottom:0.75rem; box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.05); background-color:#fff; border:1px solid #d5d5d5;}
.infoLogin1 li.detail-body1 div{display:flex; justify-content:space-between; align-items:center;}

.infoLogin1 li.detail-body1 p > span{
    width:68px;
    font-size:0.8rem;
    display:inline-block;
    color:#555;}

.infoLogin1 li.detail-body1 p > strong{
    width:130px;
    font-size:0.88rem;
    display:inline-block;
    color:#084aea;}
.infoLogin1 li.detail-body1 .copyBtn{background-color:#f1f1f1; color:#666; border:1px solid #d2d2d2; border-radius:0.63rem; padding:0.3rem 0.4rem; line-height:1.6;
    font-weight:500; font-size:0.88rem;}
.infoLogin1 li.detail-body1 .copyBtn:hover{background-color:#e0e0e0;} /*수정*/
.infoLogin1 li.detail-body1 .copyBtn > i{margin-right:0.25rem;display:inline-block;}
.infoLogin1 > p{margin-bottom:1.5rem; width:100%;}
.infoLogin1 > p > .btn-outline-orange {
	width:100%; 
	font-size:1rem; 
	letter-spacing:-0.05rem; 
	font-weight:500;
	padding:0.8rem;
	align-items:center;
	}


.btn-outline-gray {
	background-color: #484848; 
	border: 0px solid;  
	box-shadow: 0 0; 
	color: #fff;  
	border-radius: 0.88rem;  
	padding: 0.5rem;
	}
.btn-outline-blueB {
	background-color: #084AEA; 
	border: 0px solid;  
	box-shadow: 0 0; 
	color: #fff;  
	border-radius: 0.88rem;  
	padding: 0.5rem;
	}
.btn-outline-orange {
	background-color: #ff6142; 
	border: 0px solid;  
	box-shadow: 0 0; 
	color: #fff;  
	border-radius: 0.88rem;  
	padding: 0.5rem;
	}

.btn-check:focus + .btn-outline-orange, .btn-outline-orange:focus, .btn-outline-orange:hover { background-color: #FF3D17;  border-color: #FF3D17; color: #fff;}
.btn-outline-orange.disabled, .btn-outline-orange:disabled { background-color:#e9e9e9; border-color:#d2d2d2; color:#d2d2d2;}

/*파티원일때 detail-body를 detail-body-member로 변경*/
.detail-body-member{padding:1rem; line-height:2.13rem;}
.detailA > div ul.detail-body-member li{padding:0; line-height:25px; height:25px;}

@media (min-width:768px){
    .infoLogin li{ border-radius:1.25rem;}
    .infoLogin > p{width:100%;}

    .infoLogin li.detail-body p > span{
        width:100px;
        display:inline-block;
        color:#333;}/*수정*/

    .infoLogin li.detail-body p > strong{
        width:200px;
        display:inline-block;
        color:#333;}/*수정*/

    .infoLogin1 li{ border-radius:1.25rem;}
    .infoLogin1 > p{width:100%;}

    .infoLogin1 li.detail-body1 p > span{
        width:100px;
        display:inline-block;
        font-size:1rem;
        color:#555;}/*수정*/

    .infoLogin1 li.detail-body1 p > strong{
        width:200px;
        font-size:1rem;
        display:inline-block;
        color:#084aea;}/*수정*/

}
.detailA{margin-top:0.25rem;}
.detailA > div{border-radius:1.25rem; box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.05); background-color:#fff; margin-bottom:1rem;}
.detailA > div ul li > span{color:#666; display:inline-block; width:90px; line-height:2.13;}/*수정*/
.detailA > div ul li{line-height:1.5rem; padding:0.4rem 0;}/*수정*/
.detailA > div ul li > strong{font-weight:600; padding-left:2rem; display:inline-block;}

.detailA ul {
    margin-bottom: 2rem;
}



.detail-body {
    border-radius:1.25rem;
}


.tx-blue{color:#3772ff;}
.tx-orange{color:#ff6142;}
.tx-green{color:#00ad60;}

.bg-orange{background-color:#ff6142;}

.tx-blue-blod {color:#3772ff; weight:500;}

/*파티원페이지일때 a에 hover하면 오렌지 색상 수정 추가*/
.mydetail-member h2 > span > a:hover{color:#ff6142;}

/*수정 추가 내파티 정산예정액 상세*/
.btn-detail {background-color: #f1f1f1; border: 1px solid #d2d2d2; box-shadow: 0 0; color: #666666; border-radius: 0.63rem; padding: 0.3rem 0.63rem;
    font-size: 0.88rem; margin-left:1rem; font-family: inherit; font-weight:600;}
.btn-detail:hover, .btn-detail:focus {background-color: #e0e0e0;}
@media (max-width:768px){
    .btn-detail{border-radius: 0.8rem; font-size: 0.8rem; line-height: 1.6;}
    .infoLogin li.detail-body .copyBtn{border-radius:0.8rem; font-size:0.8rem;} /*수정 추가*/
    .infoLogin1 li.detail-body1 .copyBtn{border-radius:0.8rem; font-size:0.7rem;} /*넷플 추가*/
}

/*오른쪽 파티장 에티켓*/

.etiq{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    color:#000;
}
.etiq div{border-radius:1.25rem; box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, 0.05); background-color:#fff; margin-bottom:1rem;}
.etiq div > ul{display:flex; flex-direction:column; gap:0.75rem; font-size:1rem; letter-spacing:-0.05rem;}
.etiq div > ul > li{background-color:#f0f0f0; color:#666; padding:1rem; border-radius:1rem; line-height:1.38rem; font-size:1rem; letter-spacing:-0.05rem; align-self:stretch;}

.etiq div > ul > li > span{font-weight:600;}

.myptHelp > p{margin-top:1rem; text-align:center; background-color:#084aea; font-size:1rem; letter-spacing:-0.05rem; border-radius:1rem; color:#fff; cursor:pointer; padding:0.75rem;}
.myptHelp > p.bg-orange{background-color:#ff6142;}
.paddingbt6{padding-bottom:6rem;}

@media (min-width:959px) and (max-width:1080px){
    .mydetail{width:44%;}
}

@media (min-width:769px) and (max-width:958px){
    .mydetail{flex-direction:row; width:100%;}
    .infoLogin, .notice, .etiq {width:48%;}
    .infoLogin li{margin-bottom:30px;}

    .infoLogin1, .notice, .etiq {width:48%;}
    .infoLogin1 li{margin-bottom:30px;}

    .detailA{width:48%;}
    .mydetail-member .infoLogin li{margin-bottom:0.75rem;}/*수정 추가*/
}

@media (min-width:769px) and (max-width:792px){
    .detailA > div .detail-body-member li > strong{padding-left:20px;}
} /*수정 추가*/

@media (max-width:768px){

    .detail-body {
        border-radius:0;
    }

    .detail-body1 {
        border-radius:1rem;
    }

    .mydetail{width:100%;}
    .infoLogin{width:100%; margin-bottom:2rem;}/*수정*/
    .infoLogin > p > .btn-outline-orange {
		font-size: 0.9rem; 
		line-height: 1.13rem; 
		letter-spacing: -0.06rem;
		padding:1rem;
		}

    .infoLogin1 {width:100%; margin-bottom:2rem;}/*수정*/
    .infoLogin1 > p > .btn-outline-orange {
		font-size: 0.9rem; 
		line-height: 1.13rem; 
		letter-spacing: -0.06rem;
		padding:1rem;
		}

    .detailA{width:100%;}
    .etiq{width:100%;}
    /*프로필 파티장,파티원,lock된 상태 간격 크기*/
    .myPartyA .card-cont > div{
        width: 43%;
        margin-bottom: 1rem;
        height: 160px;
    }

    /*넷플용*/
	.myPartyA .card-cont1{
		width:auto; 
		position:relative; 
		display: flex;
		align-items: center;
		gap: 0px;
		padding:1.88rem;
	} 

    .myPartyA .card-cont1 > div{
        /*width: 45%;*/
        margin-bottom: 1rem;
        height: 9.5rem;
    }


    .detail-card-lock > .Flex{
        height:auto;
        margin-top: 3rem;
    }
    .etiq div > ul > li{font-size:0.9rem; letter-spacing:-0.06rem;}
    .myptHelp > p{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}
}

@media (max-width:660px){
    .ctrArea1{width:100%;}
    .ctrArea1 .myPartyA .card{border-radius:0;}
    .infoLogin > p{width:auto; padding:0 1.88rem;}
    .infoLogin1 > p{width:auto; padding:0 1.88rem;}
    .ctrArea1 .mydetail h2, .etiq h2{padding:0 1.4rem;}
    .detailA > div , .etiq div{border-radius:0;}
    .myptHelp{padding:0 1.25rem;}

}

/*넷플*/
@media (max-width:430px){
    .infoLogin1 > p{width:auto; padding:0 5rem;}
    .detailA > div , .etiq div{border-radius:10;}
}


@media (max-width:520px){
    .myPartyA .card-cont > div{width:40%;}
    .myPartyA1 .card-cont1 > div{width:40%;} /*넷플용*/
}

/*id/pw 변경 팝업*/
.modal-body .infoTit{margin:0;}
.modal-body .ott_con{padding:0;}
.modal-body .infoText li p{color:#666;}/*수정*/
.modal-body .infoText li p span{color:#3772ff; font-weight:600;}
#changeInfo .form-control{font-size:1rem; font-weight:600; color:#3772ff;}

/*공통 버튼*/
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {cursor: pointer;}

@media (prefers-reduced-motion: reduce) {

    .form-control[type="button"] {text-align: left; color: #d2d2d2;}
    .form-control[type="file"] {overflow: hidden;}
    .form-control[type="file"]:not(:disabled):not([readonly]) {cursor: pointer;}
    .form-control:focus { background-color: #fff; border-color: #3772ff; box-shadow: 0 0, 0 0;color: #161c2d; outline: 0;}
    .form-control::-webkit-date-and-time-value { height: 1.6em;}
    .form-control::-moz-placeholder {color:#828282; opacity: 1;}
    .form-control::placeholder {color: #ccc; opacity: 1;}
    .form-control[readonly]::placeholder {color: #3772ff; opacity: 1;}
    .form-control:disabled,
    .form-control[readonly] {background-color: #eee; opacity: 1; color: 3772ff; font-weight: 600;}
    .form-control::file-selector-button {-webkit-margin-end: 1.25rem; background-color: #f9fbfd; border: 0 solid; border-color: inherit;
        border-inline-end-width: 1px; border-radius: 0; color: #3772ff ; margin: -0.8125rem -1.25rem; margin-inline-end: 1.25rem;
        padding: 0.8125rem 1.25rem; pointer-events: none; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
}
/*취소버튼*/
.d-space button , .d-space a{background-color:#3772ff; border-color:#3772ff;}
@media (max-width:768px){
    .selectBtn button , .selectBtn a{width:47%; padding:0.8125rem 0; font-size:0.8rem;}
}
.selectBtn button.canc{background-color:#f1f1f1; border:1px solid #d2d2d2; color:#666;}
.selectBtn .canc.active, .selectBtn .canc:focus, .selectBtn .canc:hover{ background-color: #e0e0e0; color: #666666;  border: 1px solid #d2d2d2;}


/*파티찾기 페이지 선택완료버튼*/
.findParty .selectBtn button, .selectBtn a{width:100%;}/*수정*/

/*파티해산하기 팝업*/
.break_pop  div.Flex{margin:1.5rem 0 1rem; padding:0 1rem;}
.break_pop > div strong{letter-spacing:-0.06rem; line-height:1.25rem; font-weight:600; color:#666;}
.break_pop > div span{letter-spacing:-0.06rem; line-height:1.25rem;}/*수정*/
.break_pop p{font-size:1rem; line-height:1.13rem; letter-spacing:-0.06rem; color:#666; padding:0 0.5rem; margin:0.7rem 0 0}
.break_pop .selectBtn{width:100%; }

/*파티해산 하기 모바일일때, 버튼 가장 아래로 위치*/
@media (max-width:615px){
    .modal-ftr{position:fixed; bottom:0; width:100%; left:0;}
    .modal-ftr > div.selectBtn{padding:1.25rem; background-color:#fff;}/*추가 수정*/
    .break_pop p{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem; color:#666; padding:0 0.5rem; margin:0.7rem 0 0}
}

/*파티해산 완료*/
.br_comp{display:flex; flex-direction:column; align-items:center; margin-bottom:0.5rem;}
.br_comp > h2{font-weight:600; margin-top:0.75rem; font-size:1.2rem; text-align:center; color:#000;}
.br_comp > h3{font-weight:600; margin-top:0.75rem; font-size:1rem; text-align:center; color:#000;}
.br_comp > p{color:#666; margin-top:1rem; margin-bottom:1rem; text-align:center;}
.br_comp > .selectBtn > a{background-color:#3772ff; border-color:#3772ff;}

.br_comp1 {display:flex; flex-direction:column; align-items:center; margin-bottom:0.5rem;}
.br_comp1 > p{color:#000; margin-top:1rem; text-align:center; font-weight:400; line-height:1.5rem;}
.br_comp1 > .selectBtn > a{background-color:#3772ff; border-color:#3772ff;}


/*회원탈퇴 텍스트*/
.br_comp2 {color:#000; text-align:center; font-weight:400; line-height:1.5rem;}
.br_comp2 > .selectBtn > a{background-color:#3772ff; border-color:#3772ff;}


@media (max-width:768px){
    .br_comp > .selectBtn{width:100%; align-items: center;}
}


/*프로파티장 신청팝업*/
.modal-info-bak1{background-color:#eaf0ff; border-radius:1rem; margin:1.5rem auto 0; }
.modal-info1 {padding:1.5rem;}
.modal-info1 li{justify-content:normal;}
.modal-info1 li > img{margin-right:0.5rem; display:inline-block;}
.modal-info1-txt1 {color:#0050ff; font-size:1rem; line-height:1.25rem; font-weight:500;}
.modal-info1-txt2 {color:#515151; font-size:0.9rem; line-height:1.25rem; font-weight:400; margin-top:0.5rem; margin-left:1rem;}

/*프로파티장 신청 팝업에서만 사용*/
.modal-info1-txt3 {color:#ff3d17; font-size:1rem; line-height:1.25rem; font-weight:500;}


/*매칭완료팝업*/
.borderN{border:none;}
.match_suc{color:#000;}
.match_suc .sucA > p{text-align:center; margin-top:2rem; font-color:#000}
.match_suc .sucA > .lottarea{margin:0 auto;}

/*매칭중일때*/
.modal-info-bak{background-color:#eaf0ff; border-radius:1rem; margin:1.5rem auto 0; }
.modal-info{padding:1rem;}
.modal-info li{justify-content:normal;}
.modal-info li > img{margin-right:0.5rem; display:inline-block;}
.match_suc .sucA .modal-info li > p{color:#666; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; margin-top:0;}
.selectBtn button.bg-orange{background-color:#ff6142; border-color:#ff6142; }
.selectBtn button.bg-orange:hover{background-color:#FF3D17; border-color:#FF3D17;}
/*매칭완료팝업 하단 공유박스*/
.shareBox{border:1px solid #d2d2d2; border-radius:1.25rem; padding:1rem; margin-top:2rem;  justify-content:center;}
.shareBox > img{width:30%; height:108px;}
.shareBox .main-share{width:68%;}
.shareBox .main-share p{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem; color:#666;}
.shareBox .main-share h3{font-size:1rem; color:#000; font-weight:600;}
.shareBox .main-share h3 > span{color:#3772ff;}
.shareBox .btnArea{margin-top:0.5rem; display:flex;}
.shareBox .btnArea button{display:inline-block;  width:48%;  padding:1rem 0; margin-right:1rem; background-color:#f1f1f1;
    color:#666666;border:1px solid #d2d2d2; border-radius:10px;}
.shareBox .btnArea button.btn-kakao{background-color:#fee500; color:#392020; align-items: center; margin-right:0;}
.shareBox .btnArea button.btn-kakao > img{display:inline-block; width:1rem;}
.shareBox .btnArea button.btn-kakao:hover{background-color:#FFD600;}

@media (max-width:768px){
    .shareBox > img{display:none;}
    .shareBox .main-share{width:100%;}
}
@media (max-width:430px){
    .shareBox .btnArea button{padding:0.7rem 0;}
}

/*매칭완료 페이지인경우*/
@media (min-width:768px){
    .helpFive .shareBox{width:70%; margin:2rem auto;}
    .helpFive1 .shareBox{width:70%; margin:2rem auto;}
}
@media (max-width:430px){
    .helpFive .shareBox .btnArea button{font-size:12px;}
    .helpFive1 .shareBox .btnArea button{font-size:12px;}
}
/*정산계좌관리 추가*/
.selectBtn .mt0{margin-top:0;}

/*문제해결요청 팝업*/
.helpPop .infoTit{flex-direction:column; text-align:left; align-items:normal;}
.infoTit > p{color:#666; margin-bottom:0.5rem; align-items:center;}/*수정*/
.infoTit > h3{font-size:1.3125rem; line-height:1.4; letter-spacing:-0.01em; font-weight:400;}
.infoTit > h3 > span{color:#3772ff; font-weight:600; font-size:1.3125rem; }

@media (max-width:992px){
    .infoTit > h3 , .infoTit > h3 > span{font-size:1.125rem;}
}

@media (max-width:390px){
    .infoTit > h3 , .infoTit > h3 > span{font-size:17px;}
}

.helpText li{padding:1rem 0; border-bottom:1px solid #d2d2d2;}
.helpText li:last-child {border-bottom: none;}  /* ✅ 마지막 항목은 보더 제거 */

.helpText li p{display:flex; flex-wrap:wrap; align-items:center;}
.helpText li p img.emoji_s{width:24px; margin-right:0.5rem;}
.helpText li p span{color:#666; font-size:1rem; letter-spacing:-0.05rem;}
.helpText li button{background-color:#eaf0ff; border:1px solid #eaf0ff; color:#3772ff; padding:0.63rem; font-size:0.88rem; line-height:1.25rem;
    letter-spacing:-0.05rem; cursor:pointer; border-radius:0.63rem; font-weight:600; font-family: Spoqa Han Sans Neo;}
.helpPop > p{background-color:#3772ff; color:#fff; padding:0.75rem; text-align:center; border-radius:1rem; margin:1rem 0 3rem; font-size:0.88rem;
    line-height:1.25rem; letter-spacing:-0.05rem;}

@media (max-width: 768px){
    .helpText li p{margin-bottom:0.5rem;}
    .helpText li p span{font-size:0.9rem; lin-height:1.13rem; letter-spacing:-0.06rem;}
    .helpText li button{width:100%; font-size:0.8rem; line-height:1rem; letter-spacing:-0.06rem;}
    .helpPop > p{font-size:0.8rem; line-height:1rem; letter-spacing:-0.06rem;}
    .helpText li p img.emoji_s{width:16px;}
}


/*파티탈퇴하기 팝업*/
.pt05{padding-top:0.5rem;}
.leaveParty li{align-items:center; padding:1rem; border-radius:1.25rem; border:1px solid #d2d2d2;}
.leaveParty li p{font-weight:600; margin-bottom:0.2rem; color:#000;}
.leaveParty li p span{color:#3772ff;}
.leaveParty li div > span{font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; color:#666;}
.leaveParty li > button{width:20%; color:#fff; border:none; background-color:#3772ff; border-color:#3772ff; padding:1.2rem 1rem; border-radius:0.9rem;
    font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem; cursor:pointer;}
.leaveParty li > button:hover{background-color:#195CFD; border-color:#195CFD;}

.leaveParty li:nth-child(2){margin:0.75rem 0 0.75rem;}
.leaveParty li > button.Orangebtn{background-color:#ff6142; border-color:#ff6142;}
.leaveParty li > button.Orangebtn:hover{background-color:#FF3D17; border-color:#FF3D17;}
.leaveParty li > button.Greenbtn{background-color:#40c046; border-color:#40c046;}
.leaveParty li > button.Greenbtn:hover{background-color:#2da833; border-color:#2da833;}

@media (max-width: 768px){
    .leaveParty li > span{font-size:0.8rem; line-height:1rem; letter-spacing:-0.06rem;}
    .leaveParty li > button{font-size:0.8rem; line-height:1rem; letter-spacing:-0.06rem; width:100%; margin-top:1rem;}
}

/*파티탈퇴하기 팝업2 환불예정액*/
.refundA h3{font-weight:600; font-size:1.25rem; letter-spacing:-0.05rem; color:#000; margin:1rem 0 0.5rem;}
.refundA h3 > span{margin-bottom:0.75rem;}
.refundA > div.info{border-radius:1rem; background-color:#f1f1f1; padding:1rem; margin-bottom:1rem;}

.refundA > .info > ul{}
.refundA > .info li{margin-bottom:0.5rem; color:#666;}
.refundA > .info li:last-child{margin-bottom:0;}
.refundA > .info li > span{color:#161c2d; line-height:1.5rem;}/*수정*/
.refundA > .info li > span:nth-child(2){color:#666;}/*추가 수정*/
.refundA > p{color:#666; padding:0 0.5rem; margin:0.4rem 0 0; font-size:0.9rem; letter-spacing:-0.05rem;}
.refundA > p.mbt1_5{margin-bottom:1.3rem;}
.refundA > .infoBox{margin-bottom:0.75rem; border-top:1px solid #d2d2d2}
.refundA > .infoBox > h3{font-weight:600; margin-bottom:0.5rem; font-size:1rem; padding-left:0;}/*수정*/

.refundA .checkbox-tile h4{font-size:1.13rem; letter-spacing:-0.05rem; font-weight:600;}
.refundA .checkbox-tile > ul{ margin-top:0.5rem; font-size:0.88rem; line-height:1.25rem; letter-spacing:-0.05rem;}

@media (max-width: 768px){
    .refundA h3{font-size:1.1rem; letter-spacing:-0.06rem; line-height:1.25rem;}
    .refundA > p{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}
    .refundA .checkbox-tile h4{font-size:0.88rem; letter-spacing:-0.05rem; line-height:1.13rem;}
}
@media(max-width: 768px){
    /*.refundA{min-height:500px}*/
}
.leavePartyPop2 .d-space{margin-bottom:0;}
.leavePartyPop2 .selectBtn a , .selectBtn button{margin:0;}
/*사용법*/
@media (min-width: 100px) and (max-width: 768px){
    .guideA{width:90%;}
}
.guideA .bgf{margin-bottom:1rem;}
.useInfoCont{padding:2.25rem 1.88rem;}
.useInfoCont > .Flex{flex-direction: column; align-items:center;}
.useInfoCont > .Flex > h3{text-align:center; margin-bottom:1.5rem; font-size:1.125rem; font-weight:400; line-height:1.4; letter-spacing:-0.01em;}
.useInfoCont > .Flex > h3 > b{font-weight:700; color:#000;}
.useInfoCont > .Flex > .guide-btn p{gap:0.75rem;}


.useInfoCont > .Flex > .guide-btn p > button{
    width:180px;
	cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: Spoqa Han Sans Neo;
    padding: 0.5rem 1rem;
} /*수정*/


/*파티만들기 파티찾기 넘버??*/

.em-leader {
    border: 1px solid #084aea;
    border-radius: 0.8em;
    background-color: #084aea;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin-right:1rem;
}

.em-member {
    border: 1px solid #ff6142;
    border-radius: 0.8em;
    background-color: #ff6142;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin-right:1rem;
}



/*사용법*/
.em-everyview1 {
    border: 1px solid #00c4b3;
    border-radius: 0.8em;
    background-color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #00c4b3;
}

.em-everyview1:hover,
.em-everyview1:active,
.em-everyview1:focus {
    background-color:#00c4b3;
    color: #fff;
}


.em-leader1 {
    border: 1px solid #084aea;
    border-radius: 0.8em;
    background-color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #084aea;
}


.em-leader1:hover,
.em-leader1:active,
.em-leader1:focus {
    background-color:#023cdc;
    color: #fff;
}
.em-member1 {
    border: 1px solid #ff6142;
    border-radius: 0.8em;
    background-color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #ff6142;
}
.em-member1:hover,
.em-member1:active,
.em-member1:focus {
    background-color:#fc4724;
    color: #fff;
}




.useInfoCont > .Flex > .guide-btn p > button > img{display:block; width:40px; margin-left:0.5rem;}

.useInfoCont > .SubHelpA{margin-top:1rem;}
.useInfoCont > .SubHelpA > ul{justify-content:space-between; padding:1rem;}
.useInfoCont > .SubHelpA li{margin-bottom:0.25rem;}
.useInfoCont > .SubHelpA li > i{color: #3772ff; font-style:normal; display:inline-block;}/*수정*/
.useInfoCont > .M-Subhelp li > i{color:#ff6142;}
.infoBox > .mt075{margin-top:0.75rem;}
@media (max-width: 991.98px){
    .useInfoCont > .SubHelpA > li{font-size:0.9rem; line-height:1.13; letter-spacing:-0.06rem;}

}
@media (min-width: 768px){
    .useInfoCont > .SubHelpA > ul{padding:1rem;}
}
.useInfoCont > .SubHelpA li > span {color:#3772ff; font-weight:600;}
@media (max-width:768px){
    .useInfoCont {padding:1.25rem;}
    .em-leader{font-size:0.8rem; padding: 0.5rem 0.65rem;}

    .em-member {
        padding: 0.5rem 0.65rem;

    }/*수정*/


    .useInfoCont > .Flex > .guide-btn p > button > img{width:24px;}

    .useInfoCont > .Flex > .guide-btn{width:100%;}
    .useInfoCont > .Flex > .guide-btn p {
        width:100%;
        display:flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .useInfoCont > .Flex > .guide-btn p > button {
        width:30%;
        float:left;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size:0.8rem;
    }

    .useInfoCont > .Flex > .guide-btn p > button:last-child {
        margin-right: 0;
    }

    .useInfoCont > .Flex > .guide-btn p > button > img {
        margin: 0;
    }

    .useInfoCont > .SubHelpA > ul{padding:1rem 0;}
    .useInfoCont > .SubHelpA li{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}/*수정*/
    .useInfoCont > .SubHelpA li > i{margin-right:8px;}/*수정*/
}
@media (max-width:379px){
    .useInfoCont > .S-ubHelpA li{font-size:15px;}
}
.useInfoCont > .M-Subhelp{display:none;}
.useInfoCont > .M-Subhelp li > span{color:#ff6142;}

/*useInfoText*/
.useInfoText{margin-bottom:1.5rem;}

/* 아코디언기능 버튼클릭하면 내용 나오기 */
.useInfoText > div{background-color:#fff; border:1px solid #f1f4f8; margin-bottom:1rem; border-radius:1.88rem; }

.useInfoText > div > .Accordion-button{padding:1.5rem 2rem; display:flex; font-size:1.0625rem; color:#161c2d; align-items:center; cursor:pointer; border-radius:0.9rem; }
.Accordion-button i{margin-right:0.75rem; color:#161c2d; display:inline-block;}
.Accordion-button strong{color:#161c2d; font-weight:400;}
@media (max-width: 768px){
    .Accordion-button strong{font-size:1rem;}
    .useInfoText > div{border-radius:0.9rem;}
    .useInfoText > div > .Accordion-button{padding:1rem 1.5rem;}
}
@media (min-width: 576px){
    .Accordion-button strong{ margin-right:2rem;}
}

.Accordion-button span{color:#666; margin-left:auto; background-repeat: no-repeat; background-size: 0.85rem; content: "";flex-shrink: 0;height: 0.85rem; margin-left: auto; width: 0.85rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23869AB8'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");}

.Accordion-body{padding:0 1.5rem 2rem; display:none;}
.Accordion-body > div{background-color:#eaf0ff; text-align:left; font-size:1rem; letter-spacing:-0.05rem; padding:0.88rem; border-radius:0.9rem;}
.Accordion-body > div > ul{padding-left:1.5rem;}
.Accordion-body li{list-style:disc; margin-bottom:0.754em; color:#161c2d;}
.Accordion-body li:last-child{margin-bottom:0;}

@media (max-width: 992px){
    .Accordion-body li{font-size:0.9rem; line-height:1.13rem; letter-spacing:-0.06rem;}
	.Accordion-body > div{
		background-color:#eaf0ff; 
		text-align:left; 
		font-size:1rem; 
		letter-spacing:-0.05rem; 
		padding:10px 25px 10px 15px; 
		border-radius:0.9rem;
		}
}
@media (max-width: 768px){
    .Accordion-body li{font-size:0.8rem;}
	.Accordion-body > div{
		background-color:#eaf0ff; 
		text-align:left; 
		font-size:1rem; 
		letter-spacing:-0.05rem; 
		padding:10px 25px 10px 15px; 
		border-radius:0.9rem;
		}
}

.memberInfo{display:none;}

/*정산 예정액 팝업*/
@media (min-width: 370px){
    .estimatePop{max-width: 370px; box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);}
}
.estimatePop .modal-header{border-bottom:none; padding-bottom:0;}
.estimateArea h3 > strong{color:#000; font-size:1.25rem; letter-spacing:-0.05rem;}
.estimateArea > div{background-color:#f1f1f1; border-radius:1rem; padding:1.5rem; color:#161c2d; margin-top:0.75rem;}
.estimateArea > div > ul li{display:flex; margin-bottom:0.5rem; justify-content:space-between;}
.estimateArea > p{color:#666; text-align:right; margin-top:0.75rem; font-size:1rem; letter-spacing:-0.05rem;}
.estimateArea > p > span{font-weight:600;}

/*파티해산팝업 추가*/
.break_pop > div.Flex strong {font-size:1.25rem; letter-spacing:-0.05rem; font-weight:600; color:#000;}
.break_pop > div.Flex span {font-size:1.25rem; letter-spacing:-0.05rem; font-weight:600;}/*수정*/
@media (max-width: 991.98px){/*수정*/
    .break_pop > div.Flex strong {font-size:1rem; letter-spacing:-0.06rem;}
    .break_pop > div.Flex span {font-size:1.1rem; }
}
.break_pop .adBoxa{background-color:#f1f1f1; border-radius:1rem; padding:1.5rem; color:#161c2d; margin-top:0.75rem;}
.break_pop .adBoxa > ul li{display:flex; margin-bottom:0.5rem; justify-content:space-between;}
.break_pop .adBoxa > ul li:last-child{margin-bottom:0;}/*수정*/
/*사용법 addclass*/
.active1{display:block;}

/*추가 버튼 수정*/
.btn-common a{ width: 15.63rem; padding: 0.94rem 0;}

@media (max-width:768px){
    .btn-common a{padding: 0.94rem 3.13rem; width: 100%;}
}

.join-btnA{padding:1rem; align-items: center;}
.join-btn{display:block; margin:0 auto; background-color:#fee500; color:#000000; font-weight:600; width:auto; border:none;
    border-radius:0.63rem; padding:1rem 3rem; font-size:1.1875rem;}
.join-btn:hover{background-color:#FFD600;}
.join-btn{font-size:1.0625rem;}

.infoTit2 span{color:#2d2d2d;}

@media (max-width: 767px) {
    .infoTit2 {
        margin: 1rem 0;
    }

    .infoTit2 span > span {
        display: block;
    }
}


/*광고링크페이지*/

.bgAD > div{
    justify-content: center;
    align-items: center;
}

@media (max-width:768px){
    .bgAD > div{
        padding:1.2rem 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
}
@media (max-width:520px){
    .bgAD > div{
        padding:1.2rem 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
}
@media (max-width:400px){
    .bgAD > div{
        padding:1.2rem 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
}



/* 240512수정 */

.form-group {
    margin: 1rem 0;  
    display: flex;
    justify-content: space-between;
    align-items: center; 
    color:#666;
}

.coupon_btn {
    border: 1px solid #d2d2d2; 
    width: 100px; 
    flex-shrink: 0;
    align-self: stretch;
    border-radius:0.9rem; 
    font-size: 1rem;
    background-color: #f1f1f1;
    color: #666;

}

.coupon_btn:hover, .cupon_btn:active, .cupon_btn:focus {
    border-color: #3772ff;
    color: #3772ff;
    background: #EAF0FF;
}






#card-modal {
    height: auto;
}

#card-modal .step {
    margin-bottom: 0;
}

@media (max-width: 575px){
    .popup .modal-content {
        height: 100vh;
    }

    .modal-body {
        max-height:100vh !important;
    }
    .form-group > .form-control {
        font-size: 1rem;
        border-radius: 12px;
    }
	.modal-content-s {
		height: 100dvh;     /* ✅ 동적 뷰포트 높이 사용 */
		max-height: 100dvh;
	}	
}




/* 영상플레이어 관련 */
.media-hidden {
    display: none;
}


/* Dimmed 배경 */
#video-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1002;
    flex-direction: column; /* 세로 방향으로 배치 */
}


/* 영상 컨테이너 */
.video-container {
    display: flex;
    position: relative; /* 버튼의 위치를 기준으로 설정 */
    width: 90%; /* 필요에 따라 조정 */
    max-width: 960px;
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    border-radius: 15px; /* 둥근 모서리 */
    overflow: hidden;
}

#youtube-player {
	width: 100%;
	height: 100%;
}


/* 닫기 버튼 */
#close-button {
    background: transparent; /* 배경 제거 */
    border: none;
    padding: 0;
    margin-top: 20px; /* 버튼과 영상 사이에 여백 추가 */
    cursor: pointer;
    z-index: 1000; /* 영상 위에 표시되도록 설정 */
}

#close-button img {
    width: 30px; /* 버튼 이미지 크기 조절 */
    height: 30px;
}

/* 플레이어 상단의 정보나 버튼을 숨기기 위한 CSS */
.ytp-chrome-top {
    display: none;
}








/* 볼래전용 메인 */

/* Dimmed overlay style */
.dimmed {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9000;
}

/* Popup style */
.popup_tv {
    position: relative;
	border-radius: 30px;
}

#banner-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Close button style */
.close-btn2 {
	position: absolute;
	top: 15px;
	right: 20px;
	cursor: pointer;
	z-index: 1001; /* 이미지 위에 보이도록 설정 */
}
#close-btn2 img {
    width: 35px; /* 버튼 이미지 크기 조절 */
    height: 35px;
}

/* 모바일에서 다른 이미지 적용 */
@media (max-width: 768px) {
    .popup_tv {
        width: 94%;
		border-radius: 20px;
		box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1); /* 약한 그림자 적용 */
    }
	.close-btn2 {
	position: absolute;
	top: 0px;
	right: 10px;
	cursor: pointer;
	z-index: 1001; /* 이미지 위에 보이도록 설정 */
	}
	#close-btn2 img {
		width: 20px; /* 버튼 이미지 크기 조절 */
		height: 20px;
	}

}





/* 메인배너 */

#banner-img-pc, #banner-img-mo {
    transition: opacity 1s ease-in-out; /* 1초 동안 부드럽게 전환 */
    opacity: 1;
}

.hide #banner-img-pc, .hide #banner-img-mo {
    opacity: 0;
}

.banner {
	position: fixed;
	bottom: -280px; /* 배너 높이와 동일 */
    left: calc(50% - 300px); /* 가로 600px로 설정한 배너를 화면 중앙에 배치 */

	border-radius: 30px;
	border:0px solid #5e4cc1;
	z-index: 9999999999;
	transition: bottom 0.5s ease-in-out;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 약한 그림자 적용 */
}

.banner img {
	max-width: 600px; /* 최대 가로 크기를 800px로 제한 */
	width: 100%; /* 화면 가로 크기에 맞게 줄어듦 */
	height: auto; /* 가로 크기에 비례해 자동으로 높이 설정 */
	display: block;
	margin: 0 auto; /* 이미지를 가운데 정렬 */
	object-fit: cover;
}

.banner.show {
	bottom: 30px;
}

.banner.hide {
    bottom: -280px; /* 배너 높이와 동일한 값으로 설정 */
}

.close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 20px; /* 화면 가로 크기에 맞게 줄어듦 */
	cursor: pointer;
	z-index: 1001; /* 이미지 위에 보이도록 설정 */
}

/* 모바일에서 다른 이미지 적용 */
@media (max-width: 768px) {
	.banner img.pc-img {
		display: none;
	}
	.banner img.mobile-img {
		display: block;
	}
    .banner {
        left: 3%;
        width: 94%;
		border-radius: 15px;
		box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1); /* 약한 그림자 적용 */
    }
	.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 15px; /* 화면 가로 크기에 맞게 줄어듦 */
	cursor: pointer;
	z-index: 1001; /* 이미지 위에 보이도록 설정 */
	}
	.banner.show {
		bottom: 15px;
	}
	.banner.hide {
		bottom: -200px; /* 배너 높이와 동일한 값으로 설정 */
	}
}

/* PC에서 다른 이미지 적용 */
@media (min-width: 769px) {
	.banner img.pc-img {
		display: block;
	}
	.banner img.mobile-img {
		display: none;
	}
}




/* 메인 이벤트/인기컨텐츠 박스 스타일 */
.event-box-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px; /* 박스 간 간격 */
    margin: 20px 0;
	max-width: 1000px;
    margin: 50px auto; /* 화면 가운데 정렬 */
}

.event-box1 {
    flex: 1; /* 동일한 크기로 맞추기 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6dde7;
    border-radius: 20px;
    padding: 25px 35px 25px 40px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.event-box1:hover {
    background-color: #e9ecef;
}

.event-content1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.event-box2 {
    flex: 1; /* 동일한 크기로 맞추기 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #d5cef1;
    border-radius: 20px;
    padding: 25px 35px 25px 40px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.event-box2:hover {
    background-color: #e9ecef;
}

.event-content2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.event-text {
    display: flex;
    flex-direction: column; /* 세로로 쌓이게 */
}

.event-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
	margin-bottom: 5px;
}

.event-description {
    font-size: 0.9rem; /* 필요에 따라 크기 조정 */
    font-weight: 400;
    color: #666; /* 설명 텍스트 색상 */
}

.event-icon img {
    width: 50px; /* 이미지 크기 조정 */
    height: auto; /* 비율 유지 */
}

.navbar-logo-normal img {
    width: 130px; /* 이미지 크기 조정 */
    height: auto; /* 비율 유지 */
}


.logo-wrap {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  list-style: none;
}

.nav-menu li a {
  font-size: 18px;
  color: #000;
  font-weight: 600;
  text-decoration: none;
}


/* 모바일에서 다른 이미지 적용 */
@media (max-width: 768px) {

	.nav-menu {
	  display: flex;
	  gap: 0rem;
	  list-style: none;
	}

	.nav-menu li a {
	  font-size: 15px;
	  color: #000;
	  font-weight: 600;
	  text-decoration: none;
	}
}



/* 하단 탭바 */

.bottom-navbar {
    position: fixed;
    bottom: 0;
    width: 100%;
	max-width: 500px;
	height: 60px;
    background-color: #f9f9f9;
    border-top: 1px solid #d1d1d1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease-in-out;
    z-index: 2000;
}

.nav-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600; 
  color: #aaaaaa !important; 
}

.nav-button i {
  font-size: 20px;
  color: #aeaeae;
  margin-bottom: 2px;
}

.nav-button.active span,
.nav-button.active i {
  color: #094bea;
}

/* 중간 nav-button에만 배지 스타일 적용 */
.bottom-navbar .nav-button:nth-child(2) .badge {
    position: absolute;
    top: 15%; /* 이미지 상단에서 10% 아래 */
    right: 42%; /* 이미지 오른쪽에서 10% 왼쪽 */
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
}


@media (min-width: 500px) {
    .bottom-navbar {
        display: none;
    }
}


@media (max-width: 499px) {
    .container {
        padding: 0;
    }
    .event-box-container {
        display: none;
    }

}



/* 브리오 소스 추가 */

.fs-1{
font-size:.625rem!important}

.fs-2{
font-size:.75rem!important}

.fs-3{
font-size:.875rem!important}

.fs-4{
font-size:1rem!important}

.fs-5{
font-size:1.125rem!important}

.fs-6{
font-size:1.25rem!important}

.fs-7{
font-size:calc(1.275rem + .3vw)!important}

.fs-8{
font-size:calc(1.3125rem + .75vw)!important}

.fs-9{
font-size:calc(1.35rem + 1.2vw)!important}

.fs-10{
font-size:calc(1.375rem + 1.5vw)!important}

.fs-11{
font-size:calc(1.40625rem + 1.875vw)!important}

.fs-12{
font-size:calc(1.425rem + 2.1vw)!important}

.fs-13{
font-size:calc(1.46875rem + 2.625vw)!important}

.fst-italic{
font-style:italic!important}

.fst-normal{
font-style:normal!important}

.fw-lighter{
font-weight:300!important}

.fw-light{
font-weight:300!important}

.fw-light2{
font-weight:350!important}

.fw-normal{
font-weight:400!important}

.fw-medium{
font-weight:500!important}

.fw-semibold{
font-weight:600!important}

.fw-bold{
font-weight:500!important}

.fw-bolder{
font-weight:700!important}

.mt-0{
margin-top:0!important}

.mt-1{
margin-top:.25rem!important}

.mt-2{
margin-top:.5rem!important}

.mt-3{
margin-top:1rem!important}

.mt-3-xx {
margin-top: 10px;!important }

.mt-4{
margin-top:1.5rem!important}

.mt-5{
margin-top:3rem!important}

.mt-6{
margin-top:12px!important}

.mt-7{
margin-top:30px!important}

.mt-8{
margin-top:10px!important}

.mt-9{
margin-top:20px!important}

.mt-auto{
margin-top:auto!important}

.me-0{
margin-right:0!important}

.me-1{
margin-right:.2rem!important}

.me-2{
margin-right:.5rem!important}

.me-3{
margin-right:1rem!important}

.me-4{
margin-right:1.5rem!important}

.me-5{
margin-right:3rem!important}

.me-6{
margin-right:12px!important}

.me-7{
margin-right:30px!important}

.me-8{
margin-right:10px!important}

.me-9{
margin-right:20px!important}

.me-auto{
margin-right:auto!important}

.mb-0{
margin-bottom:0!important}

.mb-1{
margin-bottom:.25rem!important}

.mb-2{
margin-bottom:.5rem!important}

.mb-3{
margin-bottom:1rem!important}

.mb-4{
margin-bottom:1.5rem!important}

.mb-5{
margin-bottom:3rem!important}

.mb-6{
margin-bottom:12px!important}

.mb-7{
margin-bottom:30px!important}

.mb-8{
margin-bottom:10px!important}

.mb-9{
margin-bottom:20px!important}

.mb-auto{
margin-bottom:auto!important}

.ms-0{
margin-left:0!important}

.ms-1{
margin-left:.25rem!important}

.ms-2{
margin-left:.5rem!important}

.ms-3{
margin-left:1rem!important}

.ms-4{
margin-left:1.5rem!important}

.ms-5{
margin-left:3rem!important}

.ms-6{
margin-left:12px!important}

.ms-7{
margin-left:30px!important}

.ms-8{
margin-left:10px!important}

.ms-9{
margin-left:20px!important}

.ms-auto{
margin-left:auto!important}

.m-n1{
margin:-.25rem!important}

.m-n2{
margin:-.5rem!important}

.m-n3{
margin:-1rem!important}

.m-n4{
margin:-1.5rem!important}

.m-n5{
margin:-3rem!important}

.m-n6{
margin:-12px!important}

.m-n7{
margin:-30px!important}

.m-n8{
margin:-10px!important}

.m-n9{
margin:-20px!important}

.pt-0{
padding-top:0!important}

.pt-1{
padding-top:.25rem!important}

.pt-2{
padding-top:.5rem!important}

.pt-3{
padding-top:1rem!important}

.pt-4{
padding-top:1.5rem!important}

.pt-5{
padding-top:3rem!important}

.pt-6{
padding-top:12px!important}

.pt-7{
padding-top:30px!important}

.pt-8{
padding-top:10px!important}

.pt-9{
padding-top:20px!important}

.pe-0{
padding-right:0!important}

.pe-1{
padding-right:.25rem!important}

.pe-2{
padding-right:.5rem!important}

.pe-3{
padding-right:1rem!important}

.pe-4{
padding-right:1.5rem!important}

.pe-5{
padding-right:3rem!important}

.pe-6{
padding-right:12px!important}

.pe-7{
padding-right:30px!important}

.pe-8{
padding-right:10px!important}

.pe-9{
padding-right:20px!important}

.pb-0{
padding-bottom:0!important}

.pb-1{
padding-bottom:.25rem!important}

.pb-2{
padding-bottom:.5rem!important}

.pb-3{
padding-bottom:1rem!important}

.pb-4{
padding-bottom:1.5rem!important}

.pb-5{
padding-bottom:3rem!important}

.pb-6{
padding-bottom:12px!important}

.pb-7{
padding-bottom:30px!important}

.pb-8{
padding-bottom:10px!important}

.pb-9{
padding-bottom:20px!important}

.ps-0{
padding-left:0!important}

.ps-1{
padding-left:.25rem!important}

.ps-2{
padding-left:.5rem!important}

.ps-3{
padding-left:1rem!important}

.ps-4{
padding-left:1.5rem!important}

.ps-5{
padding-left:3rem!important}

.ps-6{
padding-left:12px!important}

.ps-7{
padding-left:30px!important}

.ps-8{
padding-left:10px!important}

.ps-9{
padding-left:20px!important}

.gap-0{
gap:0!important}

.gap-1{
gap:.25rem!important}

.gap-2{
gap:.5rem!important}

.gap-3{
gap:1rem!important}

.gap-4{
gap:1.5rem!important}

.gap-5{
gap:3rem!important}

.gap-6{
gap:12px!important}

.gap-7{
gap:30px!important}

.gap-8{
gap:10px!important}

.gap-9{
gap:20px!important}

.row-gap-0{
row-gap:0!important}

.fs-1{
font-size:.625rem!important}

.fs-2{
font-size:.75rem!important}

.fs-3{
font-size:.875rem!important}

.fs-4{
font-size:1rem!important}

.fs-5{
font-size:1.125rem!important}

.fs-6{
font-size:1.25rem!important}

.fs-7{
font-size:calc(1.275rem + .3vw)!important}

.fs-8{
font-size:calc(1.3125rem + .75vw)!important}

.fs-9{
font-size:calc(1.35rem + 1.2vw)!important}

.fs-10{
font-size:calc(1.375rem + 1.5vw)!important}

.fs-11{
font-size:calc(1.40625rem + 1.875vw)!important}

.fs-12{
font-size:calc(1.425rem + 2.1vw)!important}

.fs-13{
font-size:calc(1.46875rem + 2.625vw)!important}

.fc-gray1 {color: #d6d6d6!important;}
.fc-gray2 {color: #aeaeae!important;}
.fc-gray3 {color: #858585!important;}
.fc-gray4 {color: #656565!important;}
.fc-gray5 {color: #333333!important;}


/* 메인 가격노출 박스영역 */
.btn-start {
	background-color: #484848; 
	color: #FFF;  
	border-radius: 0.6rem; 
	border: 0px solid #d2d2d2; 
	padding: 0.5rem 0.7rem;
	width: 100%; /* 버튼 전체 가로 확장 */
	text-align: center;
	}
	
.txt-ott-title1 {color: #272727!important;}
.txt-ott-title2 {color: #3772ff!important;}

.info-ott {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-grow: 1;
	}
	
/* '인기' 뱃지 스타일 */
.badge-popular {
	background: #fff5f5;
	color: #f03e3e;
	font-size: 10px;
	font-weight: bold;
	padding: 4px 8px;
	border-radius: 10px;
	position: absolute;
	top: 5px;  /* 상단에 붙임 */
    right: 5px; /* 오른쪽에 완전히 붙임 */
	}	
.badge-container {
	margin-bottom: 15px;
    gap: 5px;  /* 뱃지 간격 */
}	
.badge1 {
	background: #ffe6e6;
	color: #c32a2a;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}		
.badge2 {
	background: #ffefe6;
	color: #b75823;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}	
.badge3 {
	background: #e6edff;
	color: #3e66cb;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}	
.badge4 {
	background: #d3f6f6;
	color: #009595;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}		
.badge5 {
	background: #faec9c;
	color: #816e00;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}	
.badge6 {
	background: #f1deff;
	color: #7634d8;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}	
	
.badge_newmsg {
	background: #faec9c;
	color: #816e00;
	font-size: 11px;
	font-weight: 400;
	padding: 3px 7px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	}	
	
	
/* 파티 탈퇴 시, 체크박스 영역 UI : Start */
/* ✅ 체크박스 컨테이너 */
.e-checkbox-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ✅ 체크박스와 텍스트 정렬 */
.e-checkbox-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 4px; /* 체크박스와 텍스트 사이 간격 추가 */
}

/* ✅ 기존 체크박스를 숨기고 새로운 디자인 적용 */
.e-checkbox-input {
    display: none;
}

/* ✅ 원형 체크박스 (찌그러짐 방지) */
.e-custom-checkbox {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    aspect-ratio: 1/1;
    border: 2px solid #ccc;
    background-color: white;
    display: inline-block;
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 10px; /* ✅ 체크박스와 텍스트 간격 추가 */
}

.e-checkbox-input:checked + .e-custom-checkbox::after {
    content: "✔";
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.e-checkbox-input:checked + .e-custom-checkbox {
    background-color: #007bff;
    border-color: #007bff;
}

/* ✅ 텍스트 스타일 변경 */
.e-checkbox-text h4 {
    font-size: 15px;
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.e-checkbox-text ul {
    padding-left: 0;
    margin: 0;
}

.e-checkbox-text li {
    font-size: 12px;
    color: #555;
    list-style: none;
}

/* 파티 탈퇴 시, 체크박스 영역 UI : End */


/* 메인 유튜브 영상섹션 : Start */
.video-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.video-container {
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    position: relative;
}

/* 제목 가리기 (오버레이) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12%;
    background: black;
    opacity: 0.9;
    z-index: 2;
    pointer-events: none;
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    .video-container {
        width: 90vw;
        max-width: 90vw;
    }
}

/* 메인 유튜브 영상섹션 : End */



.Flex-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.between {
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.align-center {
    align-items: center;
    display: flex;
}


.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 10px; }
.mt-24 { margin-top: 12px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 10px; }
.ml-4 { margin-left: 12px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 10px; }
.mr-4 { margin-right: 12px; }

.mb-1 { margin-bottom: 2px; }
.mb-2 { margin-bottom: 4px; }
.mb-3 { margin-bottom: 8px; }

.txt-color-darkgray { color: #333!important }
.txt-001 { color: #fff; }
.txt-002 { color: #fff; }

.fs-18 { font-size:18px!important }
.fs-17 { font-size:17px!important }
.fs-16 { font-size:16px!important }
.fs-15 { font-size:15px!important }
.fs-14 { font-size:14px!important }
.fs-13 { font-size:13px!important }
.fs-12 { font-size:12px!important }
.fs-11 { font-size:11px!important }
.fs-10 { font-size:10px!important }


.tag-price {
	padding: 0.5rem 0.63rem; 
	background-color:#000; 
	border-radius: 0.63rem; 
	color:#fff;
	font-size: 0.88rem;
	font-weight: 600; 
	line-height: 1.13rem; 
	margin-right:0.5rem;
	}
.tag-member {
	padding: 0.5rem 0.63rem; 
	background-color:#fff; 
	border-radius: 0.63rem; 
	color:#ff6142;
	font-size: 0.88rem;
	font-weight: 600; 
	line-height: 1.13rem;
	}
	
.e-mail {
    color:  #FEE500;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.5px;
}

.dot-yellow {
    width: 4px;
    height: 4px;
    background-color: #FFD700; /* 노란색 */
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
	margin-bottom: 3px;
}

.btn-chat-orange {
	width:100%;
	padding: 1rem
	font-size:1rem; 
	letter-spacing:-0.05rem; 
	font-weight:600;
}

.length-center {
  align-items: center;
}


/* 채팅리스트 관련 */
.guide-txt {
	background: #eff4f8;
	color: #484848;
	font-size: 13px;
	font-weight: 400;
	padding: 12px 25px;
	}
	
.list-item-clickable {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid #d2d2d2;
	cursor: pointer;
	transition: background-color 0.2s;
}
.item-left {
	display: flex;
	align-items: center;
}

.item-left img {
	margin-right: 0.75rem;
}

.item-left .name {
	font-weight: 600;
	color: #555;
	margin-right: 0.5rem;
}	

.badge_newmsg1 {
	display: flex;
	background: #f331d2;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	height: 19px;
	padding: 2px 10px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	align-items: center;
	}	
	
.badge_newmsg3 {
	position: absolute;
    top: 12px;
    right: 10%;
	
	display: flex;
	background: #f331d2;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	height: 19px;
	padding: 2px 8px;
	border-radius: 14px;
	white-space: nowrap;  /* 줄바꿈 방지 */
	align-items: center;
	}	

.new-msg-btn {
  position: relative; /* 버튼을 기준으로 absolute 동작하도록 */
  align-items: center;
  gap: 6px;
}

@media (max-width: 575px){
	.badge_newmsg3 {
		position: absolute;
		top: -6px;
		right: 12px;
	}	
}

/* 채팅리스트 관련 */

.txt-color-darkgray { color: #333!important }
.txt-color-gray { color: #888!important }


.fw-light{
font-weight:300!important}

.fw-light2{
font-weight:350!important}

.fw-normal{
font-weight:400!important}

.fw-medium{
font-weight:500!important}

.fw-semibold{
font-weight:600!important}

.fw-bold{
font-weight:500!important}

.fw-bolder{
font-weight:700!important}




.material-symbols--crown-outline-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 20q-.425 0-.712-.288T5 19t.288-.712T6 18h12q.425 0 .713.288T19 19t-.288.713T18 20zm.7-3.5q-.725 0-1.287-.475t-.688-1.2l-1-6.35q-.05 0-.112.013T3.5 8.5q-.625 0-1.062-.437T2 7t.438-1.062T3.5 5.5t1.063.438T5 7q0 .175-.038.325t-.087.275L8 9l3.125-4.275q-.275-.2-.45-.525t-.175-.7q0-.625.438-1.063T12 2t1.063.438T13.5 3.5q0 .375-.175.7t-.45.525L16 9l3.125-1.4q-.05-.125-.088-.275T19 7q0-.625.438-1.063T20.5 5.5t1.063.438T22 7t-.437 1.063T20.5 8.5q-.05 0-.112-.012t-.113-.013l-1 6.35q-.125.725-.687 1.2T17.3 16.5zm0-2h10.6l.65-4.175l-1.15.5q-.65.275-1.325.1t-1.1-.75L12 6.9l-2.375 3.275q-.425.575-1.1.75t-1.325-.1l-1.15-.5zm5.3 0'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--home-outline-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--stars-2-outline-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m8.85 16.825l3.15-1.9l3.15 1.925l-.825-3.6l2.775-2.4l-3.65-.325l-1.45-3.4l-1.45 3.375l-3.65.325l2.775 2.425zm3.15.45l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15zm7.25-11.45l-1.5.875q-.15.075-.288-.013t-.087-.262l.4-1.65l-1.325-1.1q-.125-.125-.075-.262t.225-.163l1.75-.15l.675-1.575q.05-.15.225-.15t.225.15L20.15 3.1l1.75.15q.175.025.225.163t-.075.262l-1.325 1.1l.4 1.65q.05.175-.087.263t-.288.012zM12 11.975'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--digital-wellbeing-outline-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 9q-1.45 0-2.475-1.025T8.5 5.5t1.025-2.475T12 2t2.475 1.025T15.5 5.5t-1.025 2.475T12 9m0-2q.625 0 1.063-.437T13.5 5.5t-.437-1.062T12 4t-1.062.438T10.5 5.5t.438 1.063T12 7m-1.425 13.575L6 16q-.5-.5-.75-1.125T5 13.5q0-1.475 1.013-2.488T8.5 10q.725 0 1.338.275t1.112.775L12 12.1l1.05-1.05q.5-.5 1.113-.775T15.5 10q1.475 0 2.488 1.013T19 13.5q0 .75-.25 1.375T18 16l-4.575 4.575q-.3.3-.675.45t-.75.15t-.75-.15t-.675-.45M12 19.15l4.55-4.55q.225-.225.338-.512T17 13.5q0-.6-.425-1.05T15.5 12q-.3 0-.537.088t-.463.312L12 14.9l-2.5-2.5q-.15-.15-.387-.275T8.5 12q-.65 0-1.075.45T7 13.5q0 .3.125.563t.325.487zm0-3.575'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--arrow-back-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--add-circle-outline-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm1 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--graph-2 {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 22q-1.25 0-2.125-.875T2 19q0-.975.563-1.75T4 16.175V14q0-1.25.875-2.125T7 11h4V7.825q-.875-.3-1.437-1.075T9 5q0-1.25.875-2.125T12 2t2.125.875T15 5q0 .975-.562 1.75T13 7.825V11h4q1.25 0 2.125.875T20 14v2.175q.875.3 1.438 1.075T22 19q0 1.25-.875 2.125T19 22t-2.125-.875T16 19q0-.975.563-1.75T18 16.175V14q0-.425-.288-.712T17 13h-4v3.175q.875.3 1.438 1.075T15 19q0 1.25-.875 2.125T12 22t-2.125-.875T9 19q0-.975.563-1.75T11 16.175V13H7q-.425 0-.712.288T6 14v2.175q.875.3 1.438 1.075T8 19q0 1.25-.875 2.125T5 22m0-2q.425 0 .713-.288T6 19t-.288-.712T5 18t-.712.288T4 19t.288.713T5 20m7 0q.425 0 .713-.288T13 19t-.288-.712T12 18t-.712.288T11 19t.288.713T12 20m7 0q.425 0 .713-.288T20 19t-.288-.712T19 18t-.712.288T18 19t.288.713T19 20M12 6q.425 0 .713-.288T13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.material-symbols--lock-person-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 18q.625 0 1.063-.437T19.5 16.5t-.437-1.062T18 15t-1.062.438T16.5 16.5t.438 1.063T18 18m0 3q.75 0 1.4-.35t1.075-.975q-.575-.35-1.2-.513T18 19t-1.275.162t-1.2.513q.425.625 1.075.975T18 21M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6zm3.25 14H6q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v1.3q-.45-.15-.937-.225T18 11v-1H6v10h5.3q.2.6.4 1.038t.55.962M18 23q-2.075 0-3.537-1.463T13 18t1.463-3.537T18 13t3.538 1.463T23 18t-1.463 3.538T18 23M6 10v10z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.nav-menu li.nav-dot {
  padding: 0 0.3rem;
  color: #d1d1d1;
  font-size: 30px;
  user-select: none;
  pointer-events: none;
}

.placeholder1 {
    width: 24px; /* 뒤로가기 버튼과 균형을 맞추기 위해 추가 */
}



.content-meta {
  padding: 8px 4px;
  font-size: 14px;
  color: #333;
}
.content-meta .badge {
  display: inline-block;
  background: #eee;
  border-radius: 12px;
  padding: 2px 8px;
  margin-right: 5px;
  font-size: 12px;
}



/* 볼거리 컨텐츠 관련 */

.modal-overlay-content {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay-content.hidden-content {
  display: none;
}

.modal-box-content {
  background: white;
  padding: 20px 24px;
  width: 90%;
  max-width: 400px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  color: #333;
  font-size: 14px;
  line-height: 1.6;
  box-sizing: border-box;
}

.modal-title-content {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

/* 이미지 영역 */
.modal-image-content {
  text-align: center;
  margin: 16px 0;
}
.modal-image-content img {
  max-width: 70%;
  height: auto;
  border-radius: 8px;
}

/* 설명 */
.modal-description-content {
  margin-bottom: 15px;
  font-size: 14px;
}

/* 정보 항목들 */
.modal-info-line-content {
  color: #333;
  font-size: 14px;
  margin: 6px 0;
}
.modal-info-line-content .dot-content {
  margin-right: 6px;
  font-weight: bold;
}

/* 버튼 영역 */
.modal-btns-content {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}

.btn-close-content,
.btn-action-content {
  flex: 1;
  padding: 10px;
  font-size: 15px;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-close-content {
  background-color: #666;
}

.btn-action-content {
  background-color: #3772ff;
}


#modal-platforms-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 15px;
}

#modal-platforms-content span {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap;
  line-height: 1;
}

#modal-platforms-content img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  flex-shrink: 0;
}

.no-scroll {
  overflow: hidden;
  height: 100vh;
}



/* 모바일에서 모달 풀스크린 */
@media (max-width: 768px) {
    .modal-overlay-content {
        align-items: flex-start;
        padding: 0;
    }
    
    .modal-box-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        margin: 0;
        padding: 20px 20px 0px 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* 부드러운 스크롤 */
    }
    
    /* 모달 이미지 크기 조정 */
    .modal-image-content img {
        max-height: 40vh;
        width: auto;
        margin: 0 auto;
        display: block;
    }
    
    /* 평가 버튼 모바일 최적화 */
    .rating-btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    /* 하단 버튼 고정 */
    .modal-btns-content {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 16px 0;
        margin-top: 20px;
        border-top: 1px solid #eee;
    }
}

/* 아주 작은 모바일 (아이폰 SE 등) */
@media (max-width: 400px) {
    .rating-btn span:nth-child(2) {
        font-size: 12px;
    }
    
    .rating-title {
        font-size: 13px;
    }
}









/* lazy 이미지 스타일 (선택적 효과용) */
img.lazy {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
img.lazy-loaded {
  opacity: 1;
}




/* 볼거리 필터 */
.ott-filter-bar {
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 20px 3px;
  background: #fff;
  padding-top: 90px;
  margin: 0 auto;
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

.ott-filter-bar::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

.ott-filter-track {
  display: flex;
  gap: 8px;
  justify-content: flex-start;  /* 기본은 좌측 정렬 */
}

.ott-filter-track::after {
  content: '';
  flex: 0 0 15px; /* ✅ 마지막 버튼 뒤에 공간 */
}

.ott-filter-btn {
  flex: 0 0 auto;
  border: none;
  background: #f2f2f2;
  padding: 6px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  cursor: pointer;
}

.ott-filter-btn.active {
  background-color: #3772ff;
  color: #fff;
}

.ott-filter-btn img {
  height: 18px;
}


/* ✅ 700px 이상일 때 필터 영역 가운데 정렬 */
@media (min-width: 700px) {
  .ott-filter-track {
    justify-content: center;
  }
}

	/* 파티만들기 STEP1 뱃지 */
	.choosed{outline:1px solid #084aea;}
	.share-type-badge {
		display: inline-block;
		background-color: #f0f4ff;
		color: #084aea;
		border-radius: 15px;
		padding: 3px 10px;
		font-size: 11px;
		font-weight: 500;
		text-align: center;
		border: 1px solid #d0d8ff;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		text-size-adjust: none;
	}
	.share-type-badge-purple {
	display: inline-block;
	background-color: #f5f0ff;      /* 연한 보라 배경 */
	color: #7b3fe4;                 /* 진한 보라 텍스트 */
	border-radius: 15px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 500;
	text-align: center;
	border: 1px solid #d8ccff;      /* 경계선도 보라톤 */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	}
    .share-type-badge-gary {
     display: inline-block;
     background-color: #ededed;      /* 연한 회색 배경 */
     color: #767676;                 /* 진한 회색 텍스트 */
     border-radius: 15px;
     padding: 3px 10px;
     font-size: 11px;
     font-weight: 500;
     text-align: center;
     border: 1px solid #c1c1c1;      /* 경계선도 회색통 */
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     -ms-text-size-adjust: none;
     text-size-adjust: none;
    }
	

	
/* 새로 추가된 파티만들기 STEP1 활용용 팝업 */
/* dimmed 배경 */
.modal-dimmed-new {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* 모달 박스 */
.modal-box-new {
  width: 350px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  max-height: 90vh; /* ✅ 화면 넘지 않도록 */
}



/* 모달 헤더 */
.modal-header-new {
  padding: 16px 20px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.modal-title-new {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  color: #333;
  flex: 1;
}

.modal-close-new {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #333;
  cursor: pointer;
}

/* 본문 영역 */
.modal-body-new {
  padding: 30px;
  overflow-y: auto;
  flex: 1;  
}

.share-buttons-new {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;  
  flex-direction: column;
}

/* 각 버튼 */
.share-btn-new {
  flex: 1;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 20px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn-new label {
  display: block;
  width: 100%;
  cursor: pointer;
}

/* 라디오 버튼 + 제목 */
.share-top-new {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.share-top-new input[type="radio"] {
  margin-top: 1px;
}

.title-new {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.desc-new {
  font-size: 13px;
  color: #666;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* 모바일 대응 */
@media (max-width: 575px) {
  .modal-box-new {
    width: 90%;
    margin: 0 16px;
	max-height: 90vh;
	
  }
  .modal-body-new {
  padding: 20px;
  }

  .share-buttons-new {
    flex-direction: column;
  }
}

/* 선택된 스타일 */
.share-btn-new.selected-new {
  border: 1px solid #084aea;
  background: #f0f4ff;
}

.share-btn-new.selected-new .title-new {
  color: #084aea;
}

.share-btn-new.selected-new .desc-new {
  color: #333;
}

/* ✅ 좌/우 영역 정렬용 */
.share-wrap-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ✅ 왼쪽 콘텐츠 영역 (기존 텍스트 부분) */
.share-left-new {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ✅ 오른쪽 가격 박스 */
.price-badge-new {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 10px;
  border-radius: 6px;
  white-space: nowrap;
  margin-left: 2px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}


/* 파티개설 STEP1 - OTT설명 팝업 */

.action-btn-wrap-ottdesc {
  text-align: center;
  margin-top: 20px;
}

.confirm-btn-ottdesc {
  background-color: #666;
  color: #fff;
  font-size: 15px;
  padding: 10px 60px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.confirm-btn-ottdesc:hover {
  background-color: #555;
}

.desc-area-ottdesc {
  padding: 10px 5px 20px;
}

.desc-text-ottdesc {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 14px;
  text-align: left;
  word-break: keep-all;
}

  .hide-for-week-btn {
    background-color: #fff;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
  }

  /* ✅ 모바일일 때 텍스트 크기 축소 */
  @media (max-width: 768px) {
    .hide-for-week-btn {
      font-size: 12px;
      padding: 6px 12px;
    }
  }



.info-box-3m ul {
  padding: 0;
  margin: 0;
}

.info-line-3m {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 1rem;
}
.info-line2-3m {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: -0.5rem;
  font-size: 1rem;
}

.title1-3m {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #0f103f;
  font-weight: 600;
  gap: 8px;
  white-space: nowrap;
  margin-bottom: 20px;
}

.title2-3m {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #0f103f;
  font-weight: 400;
  gap: 8px;
  white-space: nowrap;
  margin-bottom: 20px;
}

.icon-3m {
  width: 25px;
  height: auto;
}

.price-3m {
  text-align: right;
}

.price-main1-3m {
  font-size: 1rem;
  color: #0f103f;
  font-weight: 600;
}
.price-main2-3m {
  font-size: 1rem;
  color: #0f103f;
  font-weight: 400;
}

.line-through-3m {
  font-size: 1rem;
  color: #0f103f;
  font-weight: 400;
}

.price-sub-3m {
  font-size: 0.9rem;
  color: #888;
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0em; /* ✅ 자간 조정 */
}

.vat-3m {
  font-size: 0.875rem;
  color: #999;
  margin-left: 4px;
}
.priceF-3m {
  font-size: 1.4rem;
  color: #ff6142;
  font-weight: 600;
}

.total-3m {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.final-3m {
  color: #ff6142;
  font-weight: bold;
}

 .financial_icon {
	width: 20px;
 }
 
 .blue_txt {
  color: #1566ff;
} 
 .orange_txt {
  color: #ff6142;
}

.payment {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 1 0 0;
}

.payment-btn{
    display: flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    border: 1px solid #084AEA;
    background:#EAF0FF;
    color:  #084AEA !important;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: normal;
}


   @media (max-width: 768px) {
	.price-main1-3m {
	  font-size: 0.9rem;
	}
	.price-main2-3m {
	  font-size: 0.9rem;
	}
	.line-through-3m {
	  font-size: 0.9rem;
	}
	.price-sub-3m {
	  font-size: 0.8rem;
	}
	.title1-3m {
	  font-size: 0.9rem;
	}
	.title2-3m {
	  font-size: 0.9rem;
	}
	.priceF-3m {
	  font-size: 1.2rem;
	}	
  }
  

.ok-txt-small {
  font-size: 14px;
  color: #3184ef;
  font-weight: 500;
  text-decoration: underline;
  margin-right: 5px;
}  
  
.btn-outline-gray {
	background-color: #484848; 
	border: 0px solid;  
	box-shadow: 0 0; 
	color: #fff;  
	border-radius: 0.88rem;  
	padding: 0.5rem;
	}
.btn-outline-blue {
	background-color: #084AEA; 
	border: 0px solid;  
	box-shadow: 0 0; 
	color: #fff;  
	border-radius: 0.88rem;  
	padding: 0.5rem;
	}	  

 
.chat-buttons-container {
	display: flex;
	justify-content: center; /* 중앙 정렬 */
	align-items: center;
	gap: 15px; /* 버튼 사이 간격 */
	width: 100%;
}

/* 버튼 균등 분할 스타일 */
.chat-buttons-container .new-msg-btn {
	flex: 1; /* 균등 분할 */
	min-width: 150px; /* 최소 너비 보장 */
	text-align: center;
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */
	padding: 14px 16px;
}
 
 

  
/* 태블릿 화면 (768px 이하) */
@media (max-width: 768px) {
	.chat-buttons-container {
		gap: 15px;
		margin: 15px 0;
	}
	
	.chat-buttons-container .new-msg-btn {
		min-width: 120px;
		font-size: 14px;
	}
}

/* 모바일 화면 (480px 이하) */
@media (max-width: 480px) {
	.chat-buttons-container {
		gap: 10px;
		margin: 15px 0;
	}
	
	.chat-buttons-container .new-msg-btn {
		max-width: none; /* 최대 너비 제한 해제 */
		min-width: 100px;
		font-size: 13px;
	}
	
	/* 텍스트가 길 경우 줄바꿈 허용 */
	.chat-buttons-container .new-msg-btn {
		white-space: normal;
		line-height: 1.3;
	}
}

/* 매우 작은 화면 (400px 이하) */
@media (max-width: 400px) {
	.chat-buttons-container {
		flex-direction: column; /* 세로 배치로 변경 */
		gap: 10px;
	}
	
	.chat-buttons-container .new-msg-btn {
		width: 90%; /* 전체 너비 */
		max-width: none;
		flex: none;
	}
}

/* 아이콘과 배지 간격 조정 */
.chat-buttons-container .new-msg-btn i {
	margin-left: 8px;
}

.chat-buttons-container .new-msg-btn .badge_newmsg {
	margin-left: 5px;
}  






/* 인기컨텐츠 추천 관련 */

/* 이미지 우측 상단 배지 */
.rating-badge {
    position: absolute;
    top: 8px;
    right: 118px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 3px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}
.rating-badge.positive {
    background: rgba(76, 175, 80, 0.9);
}
.rating-badge.negative {
    background: rgba(244, 67, 54, 0.9);
}

/* 평가 섹션 */
.rating-section {
    background: #f8f8f8;
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}
.rating-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    text-align: center;
}
.rating-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.rating-btn {
    flex: 1;
    padding: 10px 20px 10px 13px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rating-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.rating-btn.recommend {
    border-color: #4CAF50;
    color: #4CAF50;
}
.rating-btn.recommend.active {
    background: #4CAF50;
    color: white;
}
.rating-btn.not-recommend {
    border-color: #f44336;
    color: #f44336;
}
.rating-btn.not-recommend.active {
    background: #f44336;
    color: white;
}
.rating-count {
    font-size: 14px;
    background: rgba(0,0,0,0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

/* imgArea에 relative 포지션 추가 (배지 배치를 위해) */
.imgArea {
    position: relative;
}




/* 유튜브 관련 추가 css*/
/* 유튜브 포함 파티 선택 화면 스타일 (yt- 접두사) */

.yt-service-selection {
    width: 100%;
    padding: 2rem;
}

.yt-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* 서비스 그리드 레이아웃 */
.yt-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* 서비스 카드 */
.yt-service-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e8eb;
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.yt-service-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* 선택된 카드 */
.yt-service-card.choosed {
    outline: 2px solid #ff6142;
}

/* 이용중 카드 (회색 처리) */
.yt-service-card-using {
    position: relative;
    /* 회색 처리는 유지하되 클릭 가능하도록 변경 */
    background: #cfcfcf;
    opacity: 0.8;
    cursor: pointer; /* 클릭 가능으로 변경 */
}

.yt-service-card-using:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    opacity: 0.9;
}


/* 배지 */
.yt-badge1 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #FF6A00;
    animation: yt-badge-blink 0.5s ease-in-out 6;
}
.yt-badge-new {
    background: linear-gradient(135deg, #FFEABC, #FFEAB9);
}

.yt-badge2 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #AF2E2E;
    animation: yt-badge-blink 0.5s ease-in-out 6;
}
.yt-badge-hot {
    background: linear-gradient(135deg, #FFCACA, #FFCAC9);
}

/* 배지 깜빡임 애니메이션 (3번만) */
@keyframes yt-badge-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* 이용중 라벨 */
.yt-using-label {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #222;
    background: #fff;
}

/* 카드 헤더 */
.yt-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* 서비스 로고 */
.yt-service-logo {
    width: 72px;
    object-fit: contain;
    flex-shrink: 0;
	border-radius: 1.2rem;
}

/* 서비스 정보 */
.yt-service-info {
    flex: 1;
    display: flex;
    flex-direction: column;
	gap: 0.25rem;
}

.yt-service-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #222;
    margin: 0;
}

/* 가격 영역 */
.yt-price-area {
    display: flex;
    flex-direction: column;
}

.yt-original-price {
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
}

.yt-discount-price {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* 태그 영역 */
.yt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.yt-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #efefef;
    border-radius: 1rem;
    font-size: 0.75rem;
    color: #3C3C3C;
}

/* 이벤트 배지 (파란색 하트) */
.yt-event-badge {
    display: flex;
    align-items: center;
	justify-content: center;  /* 가로 중앙 정렬 추가 */
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #e3f2fd;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #1976d2;
}

.yt-heart-icon {
    font-size: 1rem;
}

/* 할인 배지 (초록색 체크) */
.yt-discount-badge {
    display: flex;
    align-items: center;
	justify-content: center;  /* 가로 중앙 정렬 추가 */
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: #e8f5e9;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #2e7d32;
}

.yt-check-icon {
    font-size: 1rem;
}

/* 선택완료 버튼 */
.yt-submit-btn {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 2rem auto 0;
    padding: 1.1rem 2rem;
    background: #ff6142;
    color: #fff;
    border: none;
    border-radius: 0.63rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}

.yt-submit-btn:hover {
    background: #ff4422;
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .yt-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .yt-service-selection {
        padding: 1.5rem;
    }

    .yt-title {
        font-size: 1rem;
        margin-bottom: 1.3rem;
    }

    .yt-service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .yt-service-card {
        padding: 1.25rem;
    }

    .yt-service-logo {
        width: 60px;
        height: 60px;
		border-radius: 0.8rem;
    }

    .yt-service-name {
        font-size: 1.125rem;
    }

    .yt-discount-price {
        font-size: 1rem;
    }

    .yt-tag {
        font-size: 0.688rem;
        padding: 0.3rem 0.6rem;
    }

    .yt-event-badge,
    .yt-discount-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .yt-submit-btn {
        font-size: 0.938rem;
        padding: 0.875rem 1.5rem;
    }
}

/* 반응형 - 작은 모바일 */
@media (max-width: 480px) {
    .yt-service-grid {
        grid-template-columns: 1fr;
    }
}







/* ============================================
   유튜브 상세 페이지 스타일 - 피그마 디자인 정확히 반영 (ytd- 접두사)
   ============================================ */

/* ============================================
   0. 전역 스타일
   ============================================ */
.ytd-detail-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* 공통 섹션 스타일 */
.ytd-section {
    padding: 50px 150px 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.ytd-section.ytd-animate {
    opacity: 1;
    transform: translateY(0);
}

.ytd-section-badge {
    display: inline-block;
    padding: 8px 24px;
	width: 400px;
    background: #FFDEDE;
    border-radius: 30px;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    margin-bottom: 40px;
}

.ytd-section-badge2 {
    display: inline-block;
    padding: 8px 24px;
	width: 400px;
    background: #006FFF;
    border-radius: 30px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    margin-bottom: 40px;
}

.ytd-section-title {
    font-size: 32px;
    font-weight: 700;
	letter-spacing: -0.02em;
    color: #222;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 30px;
}

.ytd-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: #333;
}

.ytd-title-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-bottom: 8px;
}

.ytd-title-icon-small {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: 4px;
}

/* ============================================
   1. 히어로 섹션 (상단 유튜브 프리미엄 소개)
   ============================================ */
.ytd-hero-section {
    padding: 50px 20px;
}

.ytd-hero-content {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.ytd-hero-left {
    flex: 1;
}

.ytd-youtube-logo img {
    width: 64px;
    margin-bottom: 15px;
}

.ytd-service-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
}

.ytd-service-badge {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #ff6142;
    font-weight: 500;
}

.ytd-badge-icon {
    width: 17px;
    height: 17px;
    margin-right: 2px;
}

/* 구분선 */
.ytd-divider-line {
    width: 30px;
    height: 1px;
    background: #999;
    margin: 22px 0;
}

.ytd-price-info {
    margin-bottom: 32px;
}

.ytd-original-price {
    display: block;
    font-size: 15px;
    color: #999;
    text-decoration: line-through;
}

.ytd-discount-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 8px;
}

.ytd-current-price {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.ytd-price-note {
    font-size: 14px;
	font-weight: 400;
    color: #666;
}

.ytd-event-text {
    font-size: 14px;
    color: #4285f4;
    margin-top: 8px;
}

.ytd-action-buttons {
    display: flex;
    gap: 12px;
}

.ytd-btn-primary {
    flex: 2;
    padding: 14px 32px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ytd-btn-primary:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ytd-btn-share {
    flex: 1;
	padding: 14px 32px;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ytd-btn-share:hover {
    background: #3367d6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

/* 우측 기능 박스 */
.ytd-hero-right {
    flex: 1;
}

.ytd-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* ⭐ 수정: 옅은 회색 그라데이션 배경 추가 */
.ytd-feature-box {
    width: 120px;
    height: 120px;
	padding: 24px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #e5e8eb;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

/* 순차적 등장 애니메이션 */
.ytd-feature-box.ytd-show {
    opacity: 1;
    transform: translateY(0);
}

.ytd-feature-icon {
    width: 48px;
    height: 48px;
    margin: 5px auto 13px;
}

.ytd-feature-icon img {
    width: 100%;
    height: 100%;
}

.ytd-feature-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin-bottom: 6px;
}

.ytd-feature-desc {
    font-size: 12px;
    color: #666;
}

/* ============================================
   2. 가격 비교 섹션 1
   ============================================ */
.ytd-price-compare-1 {
    text-align: center;
    background: #fff;
    position: relative;
}

.ytd-chart-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* 60% 절약 배지 - 떠다니는 효과 */
.ytd-discount-floating-badge {
    position: absolute;
    top: 15px;
    right: 125px;
    z-index: 10;
    
    /* 위아래 떠다니는 애니메이션 */
    animation: ytd-float-badge 2.5s ease-in-out infinite;
}

@keyframes ytd-float-badge {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.ytd-badge-image {
    width: 120px;
	height: auto;
    filter: drop-shadow(0 4px 12px rgba(255, 97, 66, 0.25));
}

.ytd-chart-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

.ytd-chart-image {
    width: 470px;
    height: auto;
    max-width: 100%;
}

.ytd-banner-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.ytd-banner-image {
    width: 550px;
    height: auto;
    max-width: 100%;
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .ytd-discount-floating-badge {
        right: 60px;
        top: 20px;
    }
    
    .ytd-badge-image {
        width: 120px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .ytd-discount-floating-badge {
        position: static;
        margin: 0 auto 20px;
        animation: ytd-float-badge-mobile 2.5s ease-in-out infinite;
    }
    
    @keyframes ytd-float-badge-mobile {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
    
    .ytd-badge-image {
        width: 110px;
    }
}

/* ============================================
   3. 가격 비교 섹션 2
   ============================================ */
.ytd-price-compare-2 {
    text-align: center;
}

.ytd-dual-chart-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;  /* 하단 정렬로 변경 */
    gap: 70px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* ⭐ 수정: 순차 등장 애니메이션 추가 */
.ytd-chart-item {
    flex: 1;
    max-width: 270px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 첫 번째 차트 (왼쪽) */
.ytd-chart-item:nth-child(1) {
    transition-delay: 0s;
}

/* 두 번째 차트 (오른쪽) */
.ytd-chart-item:nth-child(2) {
    transition-delay: 0.3s;
}

/* 등장 상태 */
.ytd-chart-item.ytd-chart-show {
    opacity: 1;
    transform: translateX(0);
}

.ytd-dual-chart-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;  /* 이미지 하단 여백 제거 */
}

/* 반응형 - 태블릿 */
@media (max-width: 1024px) {
    .ytd-dual-chart-container {
        gap: 30px;
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .ytd-dual-chart-container {
        flex-direction: column;
        align-items: center;  /* 모바일에서는 중앙 정렬 */
        gap: 30px;
    }
    
    .ytd-chart-item {
        max-width: 100%;
    }
}


/* ============================================
   ★ 4. 기간 선택 섹션 (수정됨)
   ============================================ */
.ytd-period-select {
    text-align: center;
    background: #fff;
}

.ytd-period-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* ★ 추가: 컨테이너 - PC에서 좌우 배치 */
.ytd-period-container {
    display: flex;
    flex-direction: row;  /* ★ PC: 좌우 배치 */
    align-items: center;
    justify-content: center;
}

/* ★ 추가: 개별 옵션 */
.ytd-period-option {
    flex: 1;
    max-width: 450px;
}

/* ★ 추가: 개별 이미지 */
.ytd-period-option-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ★ 추가: OR 텍스트 */
.ytd-period-divider {
    font-size: 28px;
    font-weight: 700;
    color: #999;
    padding: 0 20px;
    flex-shrink: 0;
}

/* ★ 기존 이미지는 삭제 또는 주석 처리 */
.ytd-period-image {
    display: none;  /* ★ 기존 통이미지 숨김 */
}

/* ============================================
   ★ 5. 쿠폰 섹션 (수정됨)
   ============================================ */
.ytd-coupon-section {
    text-align: center;
}

.ytd-coupon-title {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    margin-bottom: 12px;
    line-height: 1.3;
}

.ytd-coupon-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: #4285f4;
}

.ytd-coupon-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* ★ 추가: 컨테이너 - PC에서 좌우 배치 */
.ytd-coupon-container {
    display: flex;
    flex-direction: row;  /* ★ PC: 좌우 배치 */
    align-items: center;
    justify-content: center;
}

/* ★ 추가: 개별 옵션 */
.ytd-coupon-option {
    flex: 1;
    max-width: 450px;
}

/* ★ 추가: 개별 이미지 */
.ytd-coupon-option-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ★ 추가: OR 텍스트 */
.ytd-coupon-divider {
    font-size: 28px;
    font-weight: 700;
    color: #999;
    padding: 0 20px;
    flex-shrink: 0;
}

/* ★ 기존 이미지는 삭제 또는 주석 처리 */
.ytd-coupon-image {
    display: none;  /* ★ 기존 통이미지 숨김 */
}

/* ============================================
   6. 서비스 비교 섹션
   ============================================ */
.ytd-compare-section {
    text-align: center;
    background: #fff;
}

.ytd-vs-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.ytd-vs-card {
    flex: 1;
    max-width: 400px;
    padding: 40px 32px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.ytd-vs-card:hover {
    transform: scale(1.03);
}

.ytd-vs-left {
    background: #f5f5f5;
}

.ytd-vs-right {
    background: #2d2d2d;
}

.ytd-vs-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ytd-vs-left .ytd-vs-title {
    color: #222;
}

.ytd-vs-right .ytd-vs-title {
    color: #fff;
}

.ytd-vs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ytd-vs-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    text-align: left;
    line-height: 1.6;
}

.ytd-vs-left .ytd-vs-list li {
    color: #666;
}

.ytd-vs-right .ytd-vs-list li {
    color: #fff;
}

/* ⭐ 수정: 서브메이트 항목 순차 등장 애니메이션 */
.ytd-vs-right .ytd-vs-list li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 각 항목별 딜레이 설정 */
.ytd-vs-right .ytd-vs-list li:nth-child(1) {
    transition-delay: 0.2s;
}

.ytd-vs-right .ytd-vs-list li:nth-child(2) {
    transition-delay: 0.4s;
}

.ytd-vs-right .ytd-vs-list li:nth-child(3) {
    transition-delay: 0.6s;
}

.ytd-vs-right .ytd-vs-list li:nth-child(4) {
    transition-delay: 0.8s;
}

.ytd-vs-right .ytd-vs-list li:nth-child(5) {
    transition-delay: 0.9s;
}

/* 등장 상태 */
.ytd-vs-right .ytd-vs-list li.ytd-vs-item-show {
    opacity: 1;
    transform: translateX(0);
}

.ytd-vs-check {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 4px;
}

.ytd-vs-divider {
    font-size: 28px;
    font-weight: 700;
    color: #999;
    padding: 0 20px;
}


/* ============================================
   7. 이용방법 섹션
   ============================================ */
.ytd-steps-section {
    position: relative;
}

.ytd-steps-section .ytd-section-title {
    color: #222;
}

.ytd-steps {
    max-width: 700px;
    margin: 0 auto;
}

.ytd-step {
    /* 그라데이션 배경을 박스 안에 적용 */
    background: linear-gradient(135deg, #F0F0F0 0%, #F9F9F9 100%);
    border: 2px solid #e5e8eb;
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    
    /* 초기 상태: 숨김 */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

/* 등장 애니메이션 */
.ytd-step.ytd-step-show {
    opacity: 1;
    transform: translateY(0);
}

/* 호버 효과는 애니메이션 후에만 */
.ytd-step.ytd-step-show:hover {
    transform: translateX(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: #ff6142;
}

.ytd-step-number {
    padding: 12px 20px;
    background: #333;
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;  /* 자간 조정 */
}

.ytd-step-content {
    font-size: 20px;
    color: #222;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.02em;  /* 자간 조정 */
}

/* ★ 추가: STEP 1 텍스트 구조 - PC에서는 한 줄 */
.ytd-step-text-main {
    display: inline;  /* ★ PC: 인라인 (한 줄) */
}

.ytd-step-text-sub {
    display: inline;  /* ★ PC: 인라인 (한 줄) */
    margin-left: 4px;  /* 약간의 간격 */
}

.ytd-step-arrow {
    text-align: center;
    font-size: 26px;
    color: #999;
    margin: -7px 0 5px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* 화살표도 순차적으로 표시 */
.ytd-step-arrow.ytd-arrow-show {
    opacity: 1;
}



/* ============================================
   8. 생생 고객 후기 (슬라이더)
   ============================================ */
/* ⭐ 수정: 스크롤 애니메이션 없이 즉시 보이게 */
.ytd-reviews-section {
    background: #fff;
    overflow: hidden;
    padding: 50px 50px 30px !important;
    /* 즉시 보이게 설정 */
    opacity: 1 !important;
    transform: none !important;
}

.ytd-reviews-slider {
    overflow: hidden;
    padding: 0 80px;
}

.ytd-reviews-track {
    display: flex;
    gap: 20px;
    will-change: transform;
}

.ytd-review-card {
    flex: 0 0 250px; 
    padding: 28px 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e5e8eb;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.ytd-review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ytd-review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.ytd-review-name {
    font-size: 15px;
    font-weight: 400;
    color: #222;
}

.ytd-review-badge {
    padding: 4px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 12px;
    color: #1976d2;
    font-weight: 500;
}

.ytd-review-title {
    font-size: 21px;
    font-weight: 700;
    color: #222;
    margin-bottom: 14px;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.ytd-review-text {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    letter-spacing: -0.01em;
}



/* ============================================
   9. FAQ 섹션 (부드러운 아코디언)
   ============================================ */
.ytd-faq-section {
    background: #fff;
    opacity: 1 !important;
    transform: none !important;
}

.ytd-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.ytd-faq-item {
    border-bottom: 1px solid #e5e8eb;
    overflow: hidden;  /* ⭐ 추가: 부드러운 높이 변화를 위해 */
}

.ytd-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 17px;
    font-weight: 500;
    color: #222;
    transition: color 0.3s ease;
}

.ytd-faq-question:hover {
    color: #ff6142;
}

.ytd-faq-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
    /* ⭐ 수정: 부드러운 회전 애니메이션 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ⭐ 수정: 부드러운 높이 애니메이션 */
.ytd-faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* cubic-bezier로 자연스러운 easing 적용 */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ytd-faq-item.ytd-active .ytd-faq-answer {
    max-height: 500px;  /* ⭐ 높이 증가 (400px → 500px) */
    opacity: 1;
    padding-bottom: 24px;
}

.ytd-faq-answer p {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin: 0;
    /* ⭐ 추가: 텍스트도 부드럽게 나타나게 */
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   10. 상담 섹션
   ============================================ */
.ytd-contact-section {
    background: #f5f7fa;
    /* ⭐ 즉시 보이게 설정 */
    opacity: 1 !important;
    transform: none !important;
}

.ytd-contact-box {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 40px;
    background: linear-gradient(135deg, #ff6142 0%, #ff8566 100%);
    border-radius: 20px;
    text-align: center;
    color: #fff;
}

.ytd-contact-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.ytd-contact-desc {
    font-size: 14px;
    margin-bottom: 25px;
    font-weight: 400;
    opacity: 0.9;
}

.ytd-btn-kakao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    background: #FEE500;
    color: #333;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ytd-btn-kakao:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.ytd-kakao-icon {
    width: 20px;
    height: 20px;
}

/* ============================================
   11. 아코디언 정보 섹션
   ============================================ */
.ytd-info-section {
    padding: 0px 150px 10px;
    background: #f5f7fa;
    /* ⭐ 즉시 보이게 설정 */
    opacity: 1 !important;
    transform: none !important;
}

.ytd-accordion-item {
    max-width: 900px;
    margin: 0 auto 16px;
    border: 1px solid #e5e8eb;
    border-radius: 12px;
    overflow: hidden;
}

.ytd-accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: #eff2f5;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    transition: background 0.3s ease;
}

.ytd-accordion-icon {
    width: 20px;
    height: 20px;
    color: #777;
    transition: transform 0.3s ease;
}

.ytd-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.ytd-accordion-item.ytd-active .ytd-accordion-content {
    max-height: 600px;
    background: #eff2f5;
}

.ytd-info-list {
    list-style: none;
    background: #eff2f5;
    margin: 0;
}

.ytd-info-list li {
    font-size: 15px;
    color: #777;
    line-height: 2;
}

/* ============================================
   12. 안내사항 섹션
   ============================================ */
.ytd-notice-section {
    background: #f5f7fa;
    padding: 10px 150px 40px;
    /* ⭐ 즉시 보이게 설정 */
    opacity: 1 !important;
    transform: none !important;
}

.ytd-notice-title {
    font-size: 16px;
    font-weight: 600;
    color: #777;
    margin-bottom: 10px;
}

.ytd-notice-text {
    font-size: 14px;
    color: #777;
    line-height: 1.8;
}

/* ============================================
   13. 하단 버튼 + 말풍선 (호버 시 나타남)
   ============================================ */
.ytd-bottom-actions {
    position: sticky;
    bottom: 0;
    display: flex;
	background: #fff;
    gap: 12px;
    padding: 16px 150px;
    border-top: 1px solid #e5e8eb;
    z-index: 100;
    max-width: 100%;
}

.ytd-btn-back {
    flex: 1;
    padding: 16px;
    background: #e1e1e1;
    color: #666;
    border: 1px solid #cbcbcb;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ytd-btn-back:hover {
    background: #e5e8eb;
    transform: translateY(-2px);
}

.ytd-btn-submit {
    flex: 3;
    padding: 16px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ytd-btn-submit:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ⭐ 수정: 기본 상태에서는 숨김 */
.ytd-btn-bubble {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);  /* 살짝 아래에서 시작 */
    background: linear-gradient(135deg, #4285f4 0%, #5a9fff 100%);
    color: #fff;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
    z-index: 10;
    /* 기본 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 부드러운 전환 효과 */
    transition: opacity 0.3s ease, 
                transform 0.3s ease, 
                visibility 0.3s;
}

/* ⭐ 새로 추가: 버튼 호버 시 말풍선 나타남 */
.ytd-btn-submit:hover .ytd-btn-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);  /* 제자리로 이동 */
    /* 호버 시에만 깜빡이는 효과 */
    animation: ytd-bubble-glow 1.5s ease-in-out infinite;
}

/* 말풍선 꼬리 (아래쪽 삼각형) */
.ytd-btn-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #5a9fff;
}

/* 그림자 강도만 변화하는 애니메이션 */
@keyframes ytd-bubble-glow {
    0%, 100% {
        box-shadow: 0 1px 5px rgba(66, 133, 244, 0.4);
    }
    50% {
        box-shadow: 0 2px 10px rgba(66, 133, 244, 0.8);
    }
}

/* 반응형 - 모바일 */
@media (max-width: 768px) {
    .ytd-bottom-actions {
        padding: 12px 16px !important;
        flex-direction: row !important;  /* 가로 배치 */
        gap: 10px !important;
        /* 초기 숨김 */
        opacity: 0 !important;
        transform: translateY(100%) !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }
    
    /* 스크롤 후 표시 */
    .ytd-bottom-actions.ytd-show-button {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    .ytd-btn-back {
        flex: 1 !important;
        padding: 14px 12px !important;
        font-size: 14px !important;
    }
    
    .ytd-btn-submit {
        flex: 3 !important;
        padding: 14px 12px !important;
        font-size: 15px !important;
    }
    
    .ytd-btn-bubble {
        font-size: 11px !important;
        padding: 8px 16px !important;
        bottom: calc(100% + 8px) !important;
    }
    
    .ytd-btn-bubble::after {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #5a9fff;
    }
    
    /* 모바일에서는 터치 시 말풍선 나타남 */
    .ytd-btn-submit:active .ytd-btn-bubble {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}


/* ============================================
   14. 링크 복사 알림
   ============================================ */
.ytd-copy-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    padding: 24px 48px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10000;
}

.ytd-copy-alert.ytd-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}






/* ============================================
   전체 모바일 최적화 (768px 이하)
   ============================================ */
@media (max-width: 768px) {
    /* 전역 섹션 패딩 조정 */
    .ytd-section {
        padding: 40px 0 30px !important;
    }
    
    /* 섹션 타이틀 */
    .ytd-section-title {
        font-size: 21px;
        line-height: 1.4;
    }
    
    .ytd-subtitle {
        font-size: 16px;
    }
    
    .ytd-section-badge,
    .ytd-section-badge2 {
        width: 100% !important;  /* 400px 제거 */
        max-width: 320px !important;  /* 최대 크기 제한 */
        padding: 10px 20px !important;
        font-size: 13px !important;
        text-align: center;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* 아이콘 크기 */
    .ytd-title-icon {
        width: 28px;
        height: 28px;
    }
    
    .ytd-title-icon-small {
        width: 17px;
        height: 17px;
    }
    
    /* ===== 섹션 1: 히어로 ===== */

    .ytd-hero-section {
        padding: 30px 24px !important;  /* 20px → 16px */
        background: #fff;
    }
    
    /* ⭐⭐⭐ 컨텐츠 컨테이너 - 제한 완전 제거 */
    .ytd-hero-content {
        max-width: none !important;  /* 700px 제거 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-direction: column;
        gap: 30px;
    }
    
    /* ⭐⭐⭐ 좌측 영역 - 100% 사용 */
    .ytd-hero-left {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
    
    .ytd-youtube-logo img {
        width: 60px;
    }
    
    .ytd-service-title {
        font-size: 26px;
    }
    
    .ytd-service-badge {
        font-size: 14px;
    }
    
    .ytd-original-price {
        font-size: 14px;
    }
    
    .ytd-current-price {
        font-size: 20px;
    }
    
    .ytd-price-note {
        font-size: 13px;
    }
    
    .ytd-event-text {
        font-size: 13px;
    }
    
    /* 버튼 영역 */
    .ytd-action-buttons {

        gap: 10px;
        width: 100%;
    }
    
    .ytd-btn-primary,
    .ytd-btn-share {
        width: 100% !important;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    /* ⭐⭐⭐ 우측 영역 - 100% 사용 */
    .ytd-hero-right {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }
    
    /* ⭐⭐⭐ 그리드 - 100% 폭 사용 */
    .ytd-feature-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
    }
    
    /* ⭐⭐⭐ 박스 - 그리드 셀에 맞춰 확장 */
    .ytd-feature-box {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        min-height: 140px;
        padding: 20px 16px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }
    
    .ytd-feature-icon {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 12px !important;
        flex-shrink: 0;
    }
    
    .ytd-feature-icon img {
        width: 100%;
        height: 100%;
    }
    
    .ytd-feature-title {
        font-size: 15px !important;
        margin-bottom: 6px;
        line-height: 1.3;
        text-align: center;
    }
    
    .ytd-feature-desc {
        font-size: 12px !important;
        line-height: 1.4;
        text-align: center;
    }
    
    /* ===== 섹션 2: 가격비교1 ===== */
    /* 전체 컨테이너 */
    .ytd-price-compare-1 {
        padding: 40px 16px 30px !important;
    }
    
    /* ⭐⭐⭐ 차트 컨테이너 - position: relative 추가 */
    .ytd-chart-container {
        position: relative !important;
        padding: 10px 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* ⭐⭐⭐ 떠다니는 배지 - 그래프 위에 절대 위치 */
    .ytd-discount-floating-badge {
        position: absolute !important;  /* static → absolute */
        top: 15% !important;  /* 그래프 중간 높이 */
        right: 5% !important;  /* 오른쪽에서 10% */
        transform: translateY(-50%) !important;  /* 수직 중앙 정렬 */
        margin: 0 !important;
        z-index: 10 !important;
        animation: ytd-float-badge-mobile 2.5s ease-in-out infinite;
    }
    
    /* 떠다니는 애니메이션 수정 (위치 고려) */
    @keyframes ytd-float-badge-mobile {
        0%, 100% {
            transform: translateY(-50%);
        }
        50% {
            transform: translateY(calc(-50% - 10px));  /* 살짝만 위로 */
        }
    }	
	
    .ytd-badge-image {
        width: 80px !important;  /* 110px → 80px */
        height: auto !important;
    }
    
    /* 그래프 이미지 - 최대한 크게 */
    .ytd-chart-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        position: relative !important;
    }
    
    .ytd-chart-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .ytd-banner-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
        position: relative !important;
    }

    .ytd-banner-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* ===== 섹션 3: 가격비교2 ===== */
    .ytd-price-compare-2 {
        padding: 40px 16px 30px !important;
    }
    
    /* ⭐⭐⭐ 그래프 컨테이너 - 여백 최소화 */
    .ytd-dual-chart-container {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .ytd-chart-item {
        max-width: 65% !important;
        width: 65% !important;
    }
    
    /* ⭐⭐⭐ 그래프 이미지 - 최대한 크게 */
    .ytd-dual-chart-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ===== 섹션 4: 기간 선택 ===== */
    .ytd-period-select {
        padding: 40px 16px 30px !important;
    }
    
    .ytd-period-wrapper {
        padding: 10px !important;
    }
    
    /* ★ 모바일: 상하 배치 */
    .ytd-period-container {
        flex-direction: column !important;  /* ★ 세로 배치 */
        gap: 10px !important;
    }
    
    .ytd-period-option {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ytd-period-option-image {
        width: 85% !important;
		margin: 0 auto;  /* 중앙 정렬 */
    }
    
    /* ★ OR 텍스트 - 모바일에서는 세로 배치 */
    .ytd-period-divider {
        font-size: 24px !important;
        padding: 10px 0 !important;
        transform: none !important;  /* 회전 없음 */
    }
    
    /* ===== 섹션 5: 쿠폰 ===== */
    .ytd-coupon-section {
        padding: 40px 16px 30px !important;
    }
    
    .ytd-coupon-title {
        font-size: 22px !important;
    }
    
    .ytd-coupon-subtitle {
        font-size: 18px !important;
    }
    
    .ytd-coupon-wrapper {
        padding: 10px !important;
    }
    
    /* ★ 모바일: 상하 배치 */
    .ytd-coupon-container {
        flex-direction: column !important;  /* ★ 세로 배치 */
        gap: 10px !important;
    }
    
    .ytd-coupon-option {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ytd-coupon-option-image {
        width: 85% !important;
		margin: 0 auto;  /* 중앙 정렬 */
    }
    
    /* ★ OR 텍스트 - 모바일에서는 세로 배치 */
    .ytd-coupon-divider {
        font-size: 24px !important;
        padding: 10px 0 !important;
        transform: none !important;  /* 회전 없음 */
    }
    
    /* ===== 섹션 6: 서비스 비교 ===== */
    .ytd-compare-section {
        padding: 40px 16px 30px !important;
    }
    
    /* ★ 컨테이너 - 좌우 여백 추가 */
    .ytd-vs-container {
        flex-direction: column;
        gap: 10px !important;
        padding: 0 16px !important;  /* ★ 좌우 여백 */
    }
    
    /* ★ 카드 - 100% 폭, 좌우 여백 유지 */
    .ytd-vs-card {
        max-width: 100% !important;
        width: 88% !important;
        padding: 32px 24px !important;
    }
    
    /* ★ VS 텍스트 - 회전 제거 */
    .ytd-vs-divider {
        font-size: 24px !important;
        padding: 15px 0 !important;
        transform: none !important;  /* ★ 회전 제거 */
    }
    
    /* 타이틀 크기 조정 */
    .ytd-vs-title {
        font-size: 18px !important;
        margin-bottom: 24px !important;
    }
    
    /* 리스트 아이템 크기 조정 */
    .ytd-vs-list {
        gap: 16px !important;
    }
    
    .ytd-vs-list li {
        font-size: 14px !important;
    }
    
    /* ===== 섹션 7: STEP ===== */
    .ytd-steps-section {
        padding: 40px 16px 30px !important;
    }
	
	.ytd-steps {
        max-width: 100%;
    }
    
    .ytd-step {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
        gap: 16px;
    }
    
    .ytd-step-number {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .ytd-step-content {
        font-size: 16px;
    }

    /* ★ 추가: STEP 1 텍스트 - 모바일에서는 두 줄 */
    .ytd-step-text-main {
        display: block !important;  /* ★ 모바일: 블록 (줄바꿈) */
    }
    
    .ytd-step-text-sub {
        display: block !important;  /* ★ 모바일: 블록 (줄바꿈) */
        margin-left: 0 !important;  /* 간격 제거 */
        margin-top: 4px;  /* 위쪽 간격 추가 */
    }	
	
    .ytd-step.ytd-step-show:hover {
        transform: translateY(-4px) translateX(0);
    }
    
    .ytd-step-arrow {
        font-size: 22px;
        margin: -5px 0 3px;
    }
    
    /* ===== 섹션 8: 고객 후기 ===== */
    .ytd-reviews-section {
        padding: 40px 0 30px !important;
    }
    
    .ytd-reviews-slider {
        padding: 0 20px;
    }
    
    .ytd-review-card {
        flex: 0 0 220px;
        padding: 24px 20px;
    }
    
    .ytd-review-title {
        font-size: 18px;
    }
    
    .ytd-review-text {
        font-size: 13px;
    }
    
    /* ===== 섹션 9: FAQ ===== */
    .ytd-faq-list {
        max-width: 100%;
    }
    
    .ytd-faq-question {
        font-size: 15px;
        padding: 20px 0;
    }
    
    .ytd-faq-answer p {
        font-size: 14px;
    }
    
    /* ===== 섹션 10: 상담 ===== */
    .ytd-contact-box {
        max-width: 100%;
        padding: 24px 20px;
    }
    
    .ytd-contact-title {
        font-size: 20px;
    }
    
    .ytd-contact-desc {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .ytd-btn-kakao {
        width: 100%;
        padding: 14px 32px;
        font-size: 15px;
    }
    
    /* ===== 섹션 11: 아코디언 ===== */
    .ytd-info-section {
        padding: 0 16px 10px !important;
    }
    
    .ytd-accordion-item {
        max-width: 100%;
    }
    
    .ytd-accordion-header {
        font-size: 15px;
        padding: 18px 20px;
    }
    
    .ytd-info-list li {
        font-size: 14px;
    }
    
    /* ===== 섹션 12: 안내사항 ===== */
    .ytd-notice-section {
        padding: 10px 16px 40px !important;
    }
    
    .ytd-notice-title {
        font-size: 15px;
    }
    
    .ytd-notice-text {
        font-size: 13px;
    }
    
    /* ===== 섹션 13: 하단 버튼 ===== */
    .ytd-bottom-actions {
        padding: 20px 16px !important;
        flex-direction: row !important;  /* column → row */
        gap: 10px !important;
    }
    
    .ytd-btn-back {
        flex: 1 !important;  /* 1:3 비율 유지 */
        padding: 14px 12px !important;
        font-size: 14px !important;
    }
    
    .ytd-btn-submit {
        flex: 3 !important;  /* 1:3 비율 유지 */
        padding: 14px 12px !important;
        font-size: 15px !important;
    }
    
    .ytd-btn-bubble {
        font-size: 11px !important;
        padding: 8px 16px !important;
        bottom: calc(100% + 8px) !important;
    }
    
    .ytd-btn-bubble::after {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #5a9fff;
    }
    
    /* 모바일에서는 터치 시 말풍선 나타남 */
    .ytd-btn-submit:active .ytd-btn-bubble {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}



/* ============================================
   소형 모바일 최적화 (480px 이하)
   ============================================ */
@media (max-width: 480px) {
    .ytd-hero-section {
        padding: 14px 24px !important;
    }
    
    .ytd-service-title {
        font-size: 24px;
    }
    
    .ytd-current-price {
        font-size: 22px;
    }
    
    /* 그리드 유지 */
    .ytd-feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* 박스 크기 조정 */
    .ytd-feature-box {
        min-height: 130px;
        padding: 18px 12px !important;
    }
    
    .ytd-feature-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px !important;
    }
    
    .ytd-feature-title {
        font-size: 14px !important;
    }
    
    .ytd-feature-desc {
        font-size: 11px !important;
    }
	
    /* 배지 크기 축소 */
    .ytd-section-badge,
    .ytd-section-badge2 {
        max-width: 280px !important;
        font-size: 12px !important;
        padding: 8px 16px !important;
    }

    /* 떠다니는 배지 - 위치 조정 */
    .ytd-discount-floating-badge {
        right: 3% !important;
        top: 17% !important;  /* 약간 위로 */
    }
	
    /* 떠다니는 배지 더 작게 */
    .ytd-badge-image {
        width: 80px !important;
    }
    
    /* 섹션 패딩 축소 */
    .ytd-price-compare-1,
    .ytd-price-compare-2 {
        padding: 30px 12px 20px !important;
    }	
	
    .ytd-bottom-actions {
        padding: 20px 12px !important;
        gap: 8px !important;
    }
    
    .ytd-btn-back,
    .ytd-btn-submit {
        padding: 12px 10px !important;
        font-size: 15px !important;
    }	
	
    .ytd-period-select,
    .ytd-coupon-section {
        padding: 30px 12px 20px !important;
    }
    
    .ytd-period-divider,
    .ytd-coupon-divider {
        font-size: 20px !important;
    }
    
    .ytd-coupon-title {
        font-size: 20px !important;
    }
    
    .ytd-coupon-subtitle {
        font-size: 16px !important;
    }	
    .ytd-compare-section {
        padding: 30px 0 20px !important;
    }
    
    .ytd-vs-container {
        padding: 0 12px !important;
    }
    
    .ytd-vs-card {
        padding: 28px 20px !important;
    }
    
    .ytd-vs-divider {
        font-size: 20px !important;
        padding: 12px 0 !important;
    }
    
    .ytd-vs-title {
        font-size: 16px !important;
    }
    
    .ytd-vs-list li {
        font-size: 14px !important;
    }	
	
    .ytd-steps-section {
        padding: 30px 0 20px !important;
    }
    
    .ytd-step {
        padding: 18px 12px;
    }
    
    .ytd-step-content {
        font-size: 15px;
    }	
}


/* ============================================
   매우 작은 화면 (360px 이하) - 여전히 2x2
   ============================================ */
@media (max-width: 360px) {
    .ytd-hero-section {
        padding: 14px 10px !important;
    }
    
    .ytd-feature-grid {
        gap: 8px !important;
    }
    
    .ytd-feature-box {
        min-height: 120px;
        padding: 16px 10px !important;
    }
    
    .ytd-feature-icon {
        width: 36px !important;
        height: 36px !important;
    }
    
    .ytd-feature-title {
        font-size: 13px !important;
    }
    
    .ytd-feature-desc {
        font-size: 10px !important;
    }
    /* 섹션 타이틀 */
    .ytd-section-title {
        font-size: 19px;
        line-height: 1.4;
    }
    .ytd-section-badge,
    .ytd-section-badge2 {
        max-width: 260px !important;
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    /* 떠다니는 배지 - 더 작게 */
    .ytd-discount-floating-badge {
        right: 5% !important;
        top: 17% !important;
    }
	
    .ytd-badge-image {
        width: 70px !important;
    }
    
    .ytd-price-compare-1,
    .ytd-price-compare-2 {
        padding: 24px 0 16px !important;
    }
	
    .ytd-btn-back,
    .ytd-btn-submit {
        padding: 12px 8px !important;
    }	
    .ytd-step-content {
        font-size: 14px;
    }	
}

/* ============================================
   가로로 넓은 모바일 (landscape)
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .ytd-discount-floating-badge {
        right: 15% !important;
        top: 50% !important;
    }
}


/* ============================================
   태블릿 최적화 (769px ~ 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .ytd-section {
        padding: 40px 60px 30px;
    }
    
    .ytd-hero-content {
        gap: 40px;
    }
    
    .ytd-feature-grid {
        gap: 14px;
    }
    
    .ytd-vs-container {
        flex-direction: row;
        gap: 20px;
    }
    
    .ytd-bottom-actions {
        padding: 20px 60px;
    }
    
    .ytd-info-section {
        padding: 0 60px 10px;
    }
    
    .ytd-notice-section {
        padding: 10px 60px 40px;
    }
    .ytd-period-container,
    .ytd-coupon-container {
        gap: 20px;
    }
    
    .ytd-period-option,
    .ytd-coupon-option {
        max-width: 400px;
    }	
	
    .ytd-vs-container {
        gap: 20px;
        padding: 20px;
    }
    
    .ytd-vs-card {
        padding: 36px 28px;
    }	
}





/* ============================================
   유튜브 결제확인 페이지 스타일
   Prefix: ytp- (YouTube Payment)
   ============================================ */

/* ===================================== */
/* 공통 컨테이너 */
/* ===================================== */
.ytp-wrapper {
	display: block;
	width: 100%;
	padding-bottom: 25px;
}

.ytp-payment-container {
	max-width: 450px;
	margin: 0 auto;
	padding: 40px 20px;
	background: #fff;
}

/* ===================================== */
/* 섹션 공통 스타일 */
/* ===================================== */
.ytp-section {
	margin-bottom: 40px;
}

.ytp-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.ytp-section-title {
	font-size: 18px;
	font-weight: 700;
	color: #222;
	margin-bottom: 15px;
}

/* ===================================== */
/* 1. 이용권 선택 섹션 */
/* ===================================== */
.ytp-plan-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ytp-plan-option {
	display: block;
	position: relative;
	cursor: pointer;
	border: 2px solid #e5e5e5;
	border-radius: 12px;
	padding: 20px;
	transition: all 0.3s ease;
	background: #fff;
	min-width: 0; /* Flexbox 가로폭 고정 */
	width: 100%;
	box-sizing: border-box;
}

.ytp-plan-option:hover {
	border-color: #ff6b00;
	box-shadow: 0 2px 8px rgba(255, 107, 0, 0.1);
}

.ytp-plan-option.ytp-active {
	border-color: #ff6b00;
	background: #fff8f4;
	box-shadow: 0 2px 12px rgba(255, 107, 0, 0.15);
}

.ytp-plan-option input[type="radio"] {
	display: none;
}

.ytp-plan-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.ytp-plan-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

/* 로고 wrapper로 선택 시 로고 변경 */
.ytp-plan-logo-wrapper {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.ytp-plan-logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	object-fit: contain;
	transition: opacity 0.3s ease;
}

/* 기본 상태: gray 로고만 표시 */
.ytp-plan-option .ytp-logo-active {
	opacity: 0;
}

.ytp-plan-option .ytp-logo-inactive {
	opacity: 1;
}

/* 선택 상태: 컬러 로고 표시 */
.ytp-plan-option.ytp-active .ytp-logo-active {
	opacity: 1;
}

.ytp-plan-option.ytp-active .ytp-logo-inactive {
	opacity: 0;
}

.ytp-plan-name {
	font-size: 16px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ytp-plan-check {
	position: relative;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.ytp-check-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 28px;
	transition: opacity 0.3s ease;
}

.ytp-plan-option .ytp-checked {
	opacity: 0;
}

.ytp-plan-option .ytp-unchecked {
	opacity: 1;
}

.ytp-plan-option.ytp-active .ytp-checked {
	opacity: 1;
}

.ytp-plan-option.ytp-active .ytp-unchecked {
	opacity: 0;
}

/* ===================================== */
/* 2. 결제정보 섹션 */
/* ===================================== */
.ytp-payment-info {
	background: #fafafa;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
}

.ytp-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	font-size: 15px;
}

.ytp-info-label {
	color: #333;
	font-weight: 400; /* 얇은 폰트 */
	display: flex;
	align-items: center;
	gap: 6px;
}

.ytp-info-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ytp-info-value {
	color: #222;
	font-weight: 400;
}
.ytp-info-value.ytp-discount {
	color: #ff6b00;
	font-weight: 400;
}

.ytp-price1 {
    color: #222;
    font-weight: 400;
    text-decoration: line-through;
}
.ytp-price2 {
    color: #222;
    font-weight: 400;
}

.ytp-btn-select {
	padding: 4px 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.ytp-btn-select:hover {
	border-color: #ff6b00;
	color: #ff6b00;
	background: #fff8f4;
}

/* 총 결제금액 */
.ytp-info-total {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed #bbbbbb;
}

.ytp-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.ytp-total-label {
	font-size: 18px;
	font-weight: 700; /* 두꺼운 검정색 */
	color: #000;
}

.ytp-total-value {
	font-size: 21px;
	font-weight: 700; /* 두꺼운 검정색 */
	color: #000;
}

.ytp-total-sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 17px;
	color: #007bff; /* 파란색 */
	font-weight: 400;
}

.ytp-monthly-amount {
	font-weight: 400;
	color: #007bff; /* 파란색 */
}

/* OTT 쿠폰 배너 */
.ytp-ott-banner {
    margin-top: 20px;
    margin-bottom: 50px;
	padding: 16px;
	background: linear-gradient(135deg, #DFFFE0 0%, #F3E3FF 100%);
	border: 1px solid #d0e0ff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s ease;
}

.ytp-ott-banner.ytp-hidden {
	display: none;
}

.ytp-banner-icon {
	font-size: 28px;
	flex-shrink: 0;
	line-height: 1;
	margin-bottom: 6px;
	margin-left: 10px;
}

.ytp-banner-content {
	flex: 1;
}

.ytp-banner-title {
	font-size: 15px;
	letter-spacing:-0.05rem
	font-weight: 400;
	color: #222;
	margin: 0 0 4px 0;
	line-height: 1.4;
}

.ytp-banner-title strong {
	color: #007bff;
	font-weight: 700;
}

.ytp-banner-subtitle {
	font-size: 12px;
	color: #666;
	margin: 0;
	line-height: 1.4;
}

/* ===================================== */
/* 3. 결제수단 섹션 */
/* ===================================== */
.ytp-payment-widget {
	background: #fafafa;
	border: 2px dashed #ddd;
	border-radius: 12px;
	padding: 40px;
	text-align: center;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.ytp-widget-placeholder {
	font-size: 16px;
	color: #999;
	font-weight: 600;
}

.ytp-payment-box {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	width: 100%;
	box-sizing: border-box;
}


.ev-payple-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 16px 24px;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    background: #ffffff;
}

.ev-payple-card__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ev-payple-card__bank {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}

.ev-payple-card__number {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ev-payple-card__btn {
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #2f2f2f;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ev-payple-card__note {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #666;
}


/* ===================================== */
/* 4. 확인사항 섹션 */
/* ===================================== */
.ytp-confirm-box {
	background: #fafafa;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
}

.ytp-confirm-text {
	font-size: 14px;
	color: #333;
	line-height: 1.6;
	margin-bottom: 16px;
}

.ytp-input-phone {
	width: 100%;
	max-width: 100%; /* 가로폭 고정 */
	box-sizing: border-box; /* 패딩 포함 */
	padding: 16px;
	border: 2px solid #e5e5e5;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 600;
	color: #222;
	text-align: center;
	transition: all 0.2s ease;
	background: #fff;
}

.ytp-input-phone:focus {
	outline: none;
	border-color: #ff6b00;
	box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.1);
}

.ytp-notice-list {
	list-style: none;
	padding: 0;
	margin: 20px 0;
}

.ytp-notice-list li {
	font-size: 13px;
	color: #666;
	line-height: 1.8;
	padding-left: 0;
}

.ytp-refund-section {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}

.ytp-refund-title {
	font-size: 14px;
	font-weight: 700;
	color: #666;
	margin-bottom: 12px;
}

.ytp-refund-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ytp-refund-list li {
	font-size: 14px;
	color: #666;
	line-height: 1.8;
	padding-left: 0;
}

/* ===================================== */
/* 하단 버튼 영역 */
/* ===================================== */
.ytp-bottom-actions {
	display: block;
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	padding: 16px 0;
	z-index: 1000;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

/* 데스크톱에서는 항상 표시 */
@media (min-width: 769px) {
	.ytp-bottom-actions {
		transform: translateY(0);
	}
}

/* 모바일에서 버튼 표시 클래스 */
.ytp-bottom-actions.ytp-show-button {
	transform: translateY(0);
}

.ytp-bottom-actions-inner {
	display: flex;
	gap: 12px;
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.ytp-btn-back {
	flex: 1;
	padding: 16px;
	background: #e1e1e1;
	color: #666;
	border: 1px solid #cbcbcb;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.ytp-btn-back:hover {
	background: #e5e8eb;
	transform: translateY(-2px);
}

/* 유튜브 상세화면과 동일한 버튼 스타일 */
.ytp-btn-submit {
	flex: 3;
	padding: 16px;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.ytp-btn-submit:hover {
	background: #000;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.ytp-btn-submit:active {
	transform: translateY(0);
}

/* 말풍선 효과 (선택사항) */
.ytp-btn-bubble {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: linear-gradient(135deg, #4285f4 0%, #5a9fff 100%);
	color: #fff;
	padding: 10px 24px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, 
	            transform 0.3s ease, 
	            visibility 0.3s;
}

.ytp-btn-submit:hover .ytp-btn-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	animation: ytp-bubble-glow 1.5s ease-in-out infinite;
}

.ytp-btn-bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #5a9fff;
}

/* ===================================== */
/* 반응형 - 모바일 (768px 이하) */
/* ===================================== */
@media (max-width: 768px) {
	.ytp-wrapper {
		padding-bottom: 20px;
	}
	
	.ytp-payment-container {
		padding: 16px;
	}
	
	.ytp-section {
		margin-bottom: 24px;
	}
	
	.ytp-section:last-of-type {
		margin-bottom: 0;
	}
	
	.ytp-section-title {
		font-size: 16px;
		margin-bottom: 16px;
	}
	
	/* 이용권 선택 */
	.ytp-plan-option {
		padding: 16px;
	}
	
	.ytp-plan-logo-wrapper {
		width: 28px;
		height: 28px;
	}
	
	.ytp-plan-logo {
		width: 28px;
		height: 28px;
	}
	
	.ytp-plan-name {
		font-size: 14px;
	}
	
	.ytp-check-icon {
		width: 24px;
		height: 24px;
	}
	
	.ytp-plan-check {
		width: 24px;
		height: 24px;
	}
	
	/* 결제정보 */
	.ytp-payment-info {
		padding: 16px;
	}
	
	.ytp-info-row {
		font-size: 14px;
		margin-bottom: 14px;
	}
	
	.ytp-total-label {
		font-size: 15px;
	}
	
	.ytp-total-value {
		font-size: 20px;
	}
	
	.ytp-total-sub {
		font-size: 14px;
		
	}
	
	/* 결제수단 */
	.ytp-payment-widget {
		padding: 30px 20px;
		min-height: 150px;
	}
	
	/* OTT 배너 */
	.ytp-ott-banner {
		padding: 12px;
		gap: 10px;
	}
	
	.ytp-banner-icon {
		font-size: 24px;
	}
	
	.ytp-banner-title {
		font-size: 13px;
	}
	
	.ytp-banner-subtitle {
		font-size: 11px;
	}
	
	/* 확인사항 */
	.ytp-confirm-box {
		padding: 16px;
	}
	
	.ytp-confirm-text {
		font-size: 13px;
	}
	
	.ytp-input-phone {
		padding: 14px;
		font-size: 15px;
	}
	
	/* 하단 버튼 */
	.ytp-bottom-actions {
		padding: 12px 0;
	}
	
	.ytp-bottom-actions-inner {
		gap: 8px;
		padding: 0 16px;
	}
	
	.ytp-btn-back {
		padding: 14px;
		font-size: 14px;
	}
	
	.ytp-btn-submit {
		padding: 14px;
		font-size: 15px;
	}
	
	.ytp-btn-bubble {
		font-size: 11px;
		padding: 8px 16px;
		bottom: calc(100% + 8px);
	}
	
	.ytp-btn-bubble::after {
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #5a9fff;
	}
}

/* ===================================== */
/* 반응형 - 작은 모바일 (480px 이하) */
/* ===================================== */
@media (max-width: 480px) {
	.ytp-wrapper {
		padding-bottom: 10px;
	}
	
	.ytp-payment-container {
		padding: 16px;
	}
	
	.ytp-plan-name {
		font-size: 14px;
	}
	
	.ytp-info-row {
		font-size: 13px;
	}
	
	.ytp-btn-select {
		padding: 5px 12px;
		font-size: 12px;
	}
	
	.ytp-total-label {
		font-size: 14px;
	}
	
	.ytp-total-value {
		font-size: 18px;
	}
}

/* ===================================== */
/* 애니메이션 */
/* ===================================== */
@keyframes ytp-fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ytp-bubble-glow {
	0%, 100% {
		box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4);
	}
	50% {
		box-shadow: 0 6px 20px rgba(66, 133, 244, 0.8);
	}
}

.ytp-section {
	animation: ytp-fadeIn 0.4s ease-out;
}

/* ===================================== */
/* 유틸리티 클래스 */
/* ===================================== */
.ytp-hidden {
	display: none !important;
}









/* ============================================
   유튜브 결제완료 페이지 스타일
   Prefix: ytc- (YouTube Complete)
   ============================================ */

/* ===================================== */
/* 공통 컨테이너 */
/* ===================================== */
.ytc-complete-container {
	max-width: 450px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
}

/* ===================================== */
/* 로티 애니메이션 */
/* ===================================== */
.ytc-lottie-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

/* ===================================== */
/* 제목 */
/* ===================================== */
.ytc-title {
	font-size: 24px;
	font-weight: 700;
	color: #222;
	text-align: center;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ytc-title-icon {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* ===================================== */
/* 결제 정보 박스 */
/* ===================================== */
.ytc-info-box {
	background: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 30px 40px 0;
	margin-bottom: 20px;
}

.ytc-info-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 14px;
	font-size: 14px;
	line-height: 1.6;
}

.ytc-info-row:last-of-type {
	margin-bottom: 0;
}

.ytc-info-label {
	color: #666;
	font-weight: 400;
	min-width: 90px;
	flex-shrink: 0;
}

.ytc-info-value {
	color: #222;
	font-weight: 600;
	flex: 1;
}

.ytc-info-value.ytc-price {
	font-weight: 600;
	color: #000;
}

/* ===================================== */
/* 구분선 */
/* ===================================== */
.ytc-divider {
	width: 100%;
	height: 1px;
	background: #ddd;
	margin: 24px 0;
}

/* ===================================== */
/* 다음 단계 안내 */
/* ===================================== */
.ytc-next-steps {
	margin-bottom: 24px;
}

.ytc-steps-title {
	font-size: 16px;
	font-weight: 700;
	color: #222;
	margin-bottom: 16px;
	text-align: center;
}

.ytc-steps-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ytc-step-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.ytc-step-item:last-child {
	margin-bottom: 0;
}

.ytc-step-number {
	color: #666;
	font-weight: 400;
	min-width: 20px;
	flex-shrink: 0;
}

.ytc-step-text {
	color: #222;
	font-weight: 400;
	flex: 1;
}

/* ===================================== */
/* GUDOK PARTNER 카드 */
/* ===================================== */
.ytc-partner-cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	margin-top: 20px;
}

.ytc-partner-card {
	width: 80%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* ===================================== */
/* 하단 버튼 */
/* ===================================== */
.ytc-bottom-button {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 50px;
}

.ytc-btn-submit {
	width: 100%;
	max-width: 60%;
	padding: 18px;
	background: #333;
	color: #fff !important;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	display: block;
}

.ytc-btn-submit:hover {
	background: #000;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.ytc-btn-submit:active {
	transform: translateY(0);
}

/* ===================================== */
/* 반응형 - 모바일 (768px 이하) */
/* ===================================== */
@media (max-width: 768px) {
	.ytc-complete-container {
		padding: 16px;
	}
	
	.ytc-lottie-wrapper {
		margin-bottom: 16px;
	}
	
	.ytc-title {
		font-size: 20px;
		margin-bottom: 24px;
	}
	
	.ytc-title-icon {
		width: 20px;
		height: 20px;
	}
	
	.ytc-info-box {
		padding: 30px 30px 0;
		margin-bottom: 16px;
	}
	
	.ytc-info-row {
		font-size: 13px;
		margin-bottom: 12px;
	}
	
	.ytc-info-label {
		min-width: 80px;
	}
	
	.ytc-divider {
		margin: 20px 0;
	}
	
	.ytc-steps-title {
		font-size: 15px;
		margin-bottom: 14px;
	}
	
	.ytc-step-item {
		font-size: 13px;
		margin-bottom: 8px;
	}
	
	.ytc-bottom-button {
		margin-top: 24px;
	}
	
	.ytc-btn-submit {
		padding: 16px;
		font-size: 15px;
	}
}

/* ===================================== */
/* 반응형 - 작은 모바일 (480px 이하) */
/* ===================================== */
@media (max-width: 480px) {
	.ytc-complete-container {
		padding: 16px;
	}
	
	.ytc-title {
		font-size: 18px;
		margin-bottom: 20px;
	}
	
	.ytc-title-icon {
		width: 18px;
		height: 18px;
	}
	
	.ytc-info-box {
		padding: 30px 30px 0;
	}
	
	.ytc-info-row {
		font-size: 12px;
		margin-bottom: 10px;
	}
	
	.ytc-info-label {
		min-width: 75px;
	}
	
	.ytc-steps-title {
		font-size: 14px;
	}
	
	.ytc-step-item {
		font-size: 12px;
	}
	
	.ytc-btn-submit {
		padding: 14px;
		font-size: 14px;
	}
}

/* ===================================== */
/* 애니메이션 */
/* ===================================== */
@keyframes ytc-fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ytc-complete-container {
	animation: ytc-fadeIn 0.5s ease-out;
}

/* ===================================== */
/* 유틸리티 클래스 */
/* ===================================== */
.ytc-hidden {
	display: none !important;
}












/* ============================================
   내파티 유튜브 상세 페이지 스타일
   Prefix: ytm- (YouTube MyParty)
   ============================================ */


/* ytm 하위 모든 요소에 box-sizing 적용 */
.ytm-wrapper *,
.ytm-wrapper *::before,
.ytm-wrapper *::after {
    box-sizing: border-box;
}

/* Main Container - 500px 고정폭, 가운데 정렬 */
.ytm-detail-container {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 1.88rem;
    padding: 45px 70px;
}

/* Header */
.ytm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
}

/* Product Section - 상하 정렬 */
.ytm-product-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Logo */
.ytm-logo {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ytm-logo img {
    width: 85%;
    height: 100%;
    object-fit: contain;
}

/* Product Info */
.ytm-product-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ytm-product-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

/* 서브메이트 배지 - 주황색 그라데이션 */
.ytm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    border-radius: 20px;
    width: fit-content;
}

.ytm-badge-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.ytm-badge-text {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* 문의 버튼 - 노란색 */
.ytm-inquiry-btn {
    display: flex;
    align-items: center;
    max-width: 100px;
	gap: 4px;
    padding: 10px 14px;
    background-color: #fee500;
    border: none;
    border-radius: 13px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    transition: all 0.2s;
    height: fit-content;
    white-space: nowrap;
}

.ytm-inquiry-btn:hover {
    background-color: #fdd835;
    transform: translateY(-1px);
}

.ytm-inquiry-btn:active {
    transform: translateY(0);
}

.ytm-kakao-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Payment Info */
.ytm-payment-info {
    margin-bottom: 30px;
}

.ytm-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #d9d9d9;
}

/* Info Box */
.ytm-info-box {
    border-radius: 12px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ytm-info-row {
    display: flex;
    gap: 20px;
    font-size: 15px;
    line-height: 1.5;
}

.ytm-info-label {
    color: #666;
    min-width: 90px;
    flex-shrink: 0;
    flex: 0 0 auto;
}

.ytm-info-value {
    color: #000;
    font-weight: 500;

    flex: 1 1 auto;
    min-width: 0;         /* ⭐ flex 말줄임의 핵심 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ytm-price {
    font-weight: 700;
    color: #ff6b35;
}

.ytm-remaining-days {
    color: #ff6b35;
    font-weight: 600;
    margin-top: 4px;
}

/* Bottom Buttons - 가로폭 동일 */
.ytm-bottom-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ytm-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.ytm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ytm-btn:active {
    transform: translateY(0);
}

/* 후기 버튼 - 파란색 */
.ytm-btn-review {
    background-color: #006FFF;
    color: #fff;
}

.ytm-btn-review:hover {
    background-color: #1976d2;
}



/* 연장 버튼 - 검은색 */
.ytm-btn-extend {
    background-color: #222;
    color: #fff;
}

.ytm-btn-extend:hover {
    background-color: #000;
}

/* Review Popup */
.ytm-review-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.ytm-review-popup *,
.ytm-review-popup *::before,
.ytm-review-popup *::after {
    box-sizing: border-box;
}

.ytm-review-popup.active {
    display: block;
}

.ytm-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
}

.ytm-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s;
}

.ytm-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.ytm-popup-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
}

.ytm-popup-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 36px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
	margin-bottom: 5px;
}

.ytm-popup-close:hover {
    background-color: #f3f4f6;
    color: #222;
}

.ytm-popup-body {
    padding: 15px 24px 24px 24px;
}

/* Point Notice */
.ytm-point-notice {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 8px;
    border-radius: 12px;
    text-align: center;
    font-size: 15px;
    color: #92400e;
    margin-bottom: 20px;
}

.ytm-point-notice strong {
    font-size: 18px;
    font-weight: 700;
    color: #ff6b35;
}

/* Rating Section */
.ytm-rating-section {
    margin-bottom: 24px;
}

.ytm-rating-section label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}

.ytm-stars {
    display: flex;
    gap: 8px;
}

.ytm-star {
    font-size: 36px;
    color: #fbbf24;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.ytm-star:hover {
    transform: scale(1.2);
}

/* Review Section */
.ytm-review-section {
    margin-bottom: 24px;
}

.ytm-review-section label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

.ytm-review-textarea {
    width: 100%;
    min-height: 150px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s;
}

.ytm-review-textarea:focus {
    outline: none;
    border-color: #2196f3;
}

.ytm-char-count {
    text-align: right;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 8px;
}

/* Submit Button */
.ytm-submit-btn {
    width: 100%;
    padding: 16px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.ytm-submit-btn:hover {
    background-color: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.ytm-submit-btn:active {
    transform: translateY(0);
}


.ytm-btn-modify {
    background: #555;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    min-width: 60px;
}



/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translate(-50%, -45%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* ============================================
   Responsive - 반응형 (가로 레이아웃 유지)
   ============================================ */
   
@media (max-width: 768px) {
    .ytm-wrapper {
        padding: 20px 0;
    }
    
    .ytm-detail-container {
        width: calc(100% - 40px);
        max-width: 100%;
        margin: 0 auto;
        padding: 30px 24px;
        border-radius: 1.5rem;
    }
    
    .ytm-header {
        gap: 12px;
        margin-bottom: 35px;
    }
    
    .ytm-product-section {
        gap: 10px;
    }
    
    .ytm-logo {
        width: 65px;
        height: 65px;
    }
    
    .ytm-inquiry-btn {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .ytm-kakao-icon {
        width: 14px;
        height: 14px;
    }
    
    .ytm-product-title {
        font-size: 20px;
    }
    
    .ytm-badge {
        padding: 5px 10px;
    }
    
    .ytm-badge-icon {
        width: 12px;
        height: 12px;
    }
    
    .ytm-badge-text {
        font-size: 12px;
    }
    
    .ytm-section-title {
        font-size: 16px;
    }
    
    .ytm-info-box {
        gap: 12px;
    }
    
    .ytm-info-row {
        font-size: 14px;
        gap: 50px;
    }
    
    .ytm-info-label {
        min-width: 75px;
        font-size: 15px;
    }
    
    .ytm-info-value {
        font-size: 15px;
    }
    .ytm-btn-modify {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        max-width: 44px;
    }
    
    .ytm-btn {
        font-size: 15px;
        padding: 14px;
    }
    
    .ytm-popup-content {
        width: 95%;
    }
    
    .ytm-popup-header,
    .ytm-popup-body {
        padding: 20px;
    }
    
    .ytm-star {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .ytm-wrapper {
        padding: 16px 0;
    }
    
    .ytm-detail-container {
        width: calc(100% - 32px);
        margin: 0 auto;
        padding: 24px 20px;
        border-radius: 1.25rem;
    }
    
    .ytm-header {
        gap: 10px;
        margin-bottom: 28px;
    }
    
    .ytm-product-section {
        gap: 8px;
    }
    
    .ytm-logo {
        width: 55px;
        height: 55px;
    }
    
    .ytm-inquiry-btn {
        padding: 7px 10px;
        font-size: 13px;
    }
    
    .ytm-product-title {
        font-size: 18px;
    }
    
    .ytm-badge {
        padding: 4px 8px;
    }
    
    .ytm-badge-icon {
        width: 11px;
        height: 11px;
    }
    
    .ytm-badge-text {
        font-size: 11px;
    }
    
    .ytm-section-title {
        font-size: 15px;
    }
    
    .ytm-info-row {
        font-size: 15px;
        gap: 20px;
    }
    
    .ytm-info-label {
        min-width: 80px;
        font-size: 12px;
    }
    
    .ytm-info-value {
        font-size: 13px;
    }

    .ytm-btn-modify {
        padding: 6px 10px;
        border-radius: 20px;
        font-size: 11px;
    }
    
    .ytm-btn {
        font-size: 14px;
        padding: 13px;
    }
    
    .ytm-popup-header h3 {
        font-size: 17px;
    }
    
    .ytm-star {
        font-size: 28px;
    }
}

@media (max-width: 360px) {
    .ytm-wrapper {
        padding: 12px 0;
    }
    
    .ytm-detail-container {
        width: calc(100% - 24px);
        margin: 0 auto;
        padding: 20px 16px;
    }
    
    .ytm-logo {
        width: 48px;
        height: 48px;
    }
    
    .ytm-product-title {
        font-size: 16px;
    }
    
    .ytm-badge-text {
        font-size: 10px;
    }
    
    .ytm-section-title {
        font-size: 14px;
    }
    
    .ytm-info-row {
        font-size: 12px;
    }
    
    .ytm-info-label {
        min-width: 60px;
        font-size: 11px;
    }
    
    .ytm-info-value {
        font-size: 12px;
    }
    
    .ytm-btn {
        font-size: 13px;
        padding: 12px;
    }
}