:root {
  --primary-color: #3A6FE8;
  --primary-color-hover:#2355C9;
  --red-color:#f54545;
  --black-color:#282828;
  --sky-bg:#EAF2FF;
  --blue-color:#278EEF;
  --blue-color2:#526CA8;
}

/*

--primary-color: #3A6FE8;
  --primary-color-hover:#2355C9;

*/

.header{position:absolute; top:0; left:0; width:100%; padding:10px 0; border-bottom:1px solid #ddd; background-color:#fff; z-index:99}
.header .logo{display:flex; align-items:center; justify-content:start; gap:0 10px;}
.header .logo img{max-width:65px;}
.header .logo span{font-size:1.25rem; font-weight:600}

.header .inner{display:flex; justify-content:space-between;}
.header .check-booking{display:flex; padding:6px 8px; align-items:center; gap:0 5px; border:1px solid #96b6d3; border-radius:10px; color:var(--blue-color); }
.header .check-booking:hover{color:var(--primary-color)}
.header .check-booking img{max-width:25px;}
.header .check-booking span{font-size:1rem; font-weight:600}

.booking .badge{display:inline-block; padding:3px 6px; font-size:13px; background-color:var(--sky-bg); color:var(--primary-color); font-weight:600; border-radius:5px;}
.booking .badge.badge-02{background-color:var(--blue-color); color:#fff;}

.inner{width:1400px; margin:0 auto}
.sub-con{margin-top:60px; padding:45px 0; }


.booking .top-con{display:flex; gap:0 30px;}
.booking .top-con .thumb,.booking .main-con .left-wrap{width:760px;}

.footer{margin-top:30px; background:#f9f9f9; padding:30px 0; }
.footer .inner{text-align:center;}
.footer .img-wrap img{mix-blend-mode:multiply; filter: grayscale(100%); opacity:.5; max-width:120px}
.footer .txt-wrap ul{display:flex; padding-top:5px; gap:0 15px; justify-content:center; font-size:.938rem}
.footer .txt-wrap li{font-size:1.063rem; color:#888; font-size:.938rem}
.footer .copy{padding-top:2px; color:#888; font-size:.938rem}



@media only screen and (max-width:1400px){
	.inner{width:92%; left:4%}
	.booking .top-con .thumb,.booking .main-con .left-wrap{width:700px;}
}
@media only screen and (max-width:1300px){
	.booking .top-con .thumb,.booking .main-con .left-wrap{width:55%;}
}
@media only screen and (max-width:1024px){
	.footer{display:none;}
}
@media only screen and (max-width:560px){
	.sub-con{padding: 20px 0 40px;}
}




.ui-dim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9998;}
.login-pop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999;padding:24px;}
.login-pop__box{position:relative;width:min(420px,92vw);background:#fff;border-radius:16px;padding:25px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.login-pop__close{position:absolute;right:18px;top:18px;width:36px;height:36px;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;}
.login-pop__title{margin:0 0 20px;font-size:1.375rem;font-weight:600;color:#333;}
.login-pop__desc{margin:0 0 14px;font-size:.938rem;color:#6b7280;}
.login-pop__field{margin:0 0 10px;}
.login-pop__label{display:block;font-size:.938rem;color:#374151;margin:0 0 4px;}
.login-pop__input{width:100%; border:1px solid #ddd;border-radius:10px;padding:10px 12px;outline:none;}
.login-pop__input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);}
.login-pop__input::placeholder{color:#aaa; font-size:.875rem}
.login-pop__submit{width:100%; margin-top:8px; padding:12px 0; border:0;border-radius:12px;background:var(--primary-color,#2563eb);color:#fff;font-weight:700;cursor:pointer; text-align:center;}
.login-pop__submit:hover{background:var(--primary-color-hover)}
.ui-dim.is-open{opacity:1;visibility:visible;}
.login-pop.is-open{opacity:1;visibility:visible;}
body.no-scroll{overflow:hidden;}





.main+footer{display:none;}
.main-bg{position:fixed; width:100%; height:100%; left:0; top:0; background:url(/assets/img/visual.png) no-repeat center / cover; transform:scale(1.8); animation:bgZoomOut 12s ease-out forwards; z-index:1}
.main-bg:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.39); z-index:1}

@keyframes bgZoomOut{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}


.main-con-wrap{position:relative; display:flex; align-items:center; justify-content:center; flex-flow:column; height:100vh; color:#fff; z-index:10}
.main-con-wrap .sub-tit{font-size:1.688rem;}
.main-con-wrap h1{padding:12px 0 30px; font-size:4.875rem}
.main-inner-con-wrap .main-con{margin-top:20px; display:flex; align-items:stretch; background-color:#fff; border-radius:20px; color:#333; width:1000px; box-shadow:0 5px 10px rgba(0,0,0,.15)}
.main-inner-con-wrap .main-con .img-wrap{display:flex; width:350px; height:220px; flex-shrink:0;}
.main-inner-con-wrap .main-con .img-wrap img{flex:1; width:100%; height:100%; object-fit:cover; border-radius:20px 0 0 20px;}
.main-inner-con-wrap .main-con .txt-wrap{padding:40px 40px 30px; flex-grow:1 }
.main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.625rem; font-weight:600}
.main-inner-con-wrap .main-con .txt-wrap .txt{padding-top:3px; font-size:1.125rem; color:#777; word-break:break-all; line-height:1.4}
.main-inner-con-wrap .main-con .bottom{display:flex; padding-top:30px; align-items:center; justify-content:space-between;}
.main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.313rem; font-weight:600;}
.main-inner-con-wrap .main-con .txt-wrap .main-btn{padding:10px 20px; background:var(--primary-color); color:#fff; border-radius:13px; font-weight:600; font-size:1.063rem}
.main-inner-con-wrap .main-con .txt-wrap .main-btn.two{}

.main-inner-con-wrap .main-con .txt-wrap .main-btn:hover{background-color:var(--primary-color-hover)}

@media only screen and (max-width:1024px){
	.main-con-wrap .sub-tit{font-size:1.25rem}
	.main-con-wrap h1{padding:10px 0 15px; font-size:3.25rem}
	.main-inner-con-wrap{align-self:stretch;}
	.main-inner-con-wrap .main-con{margin-top:15px; width:90%; justify-self:center;}	
	.main-inner-con-wrap .main-con .bottom{padding-top:12px;}
	.main-inner-con-wrap .main-con .img-wrap{width:230px; height:170px}
	.main-inner-con-wrap .main-con .txt-wrap{padding:30px 30px 25px}
	.main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.5rem;}
	.main-inner-con-wrap .main-con .txt-wrap .txt{font-size:1.063rem;}
	.main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.25rem}
}

@media only screen and (max-width:768px){
	.main-inner-con-wrap .main-con .img-wrap{width:200px; }
	.main-inner-con-wrap .main-con .txt-wrap{padding:30px 25px 15px;}
}
@media only screen and (max-width:650px){
	.main-con-wrap h1{padding:7px 0 15px; font-size:2.5rem}
	.main-inner-con-wrap .main-con{width:100%;}
	.main-inner-con-wrap .main-con .img-wrap{width:120px; height:auto;}
	.main-inner-con-wrap .main-con .txt-wrap{padding:20px 20px 15px}
	.main-inner-con-wrap .main-con .bottom{padding-top:7px;}
	.main-inner-con-wrap .main-con .txt-wrap .tit{font-size:1.25rem; font-weight:600}
	.main-inner-con-wrap .main-con .txt-wrap .txt{font-size:1rem;}
	.main-inner-con-wrap .main-con .txt-wrap .price{font-size:1.125rem}
}



.booking .main-con .left-wrap{padding-top:25px;}
.booking .top-con .thumb .swiper{width:100%; aspect-ratio:1.5 / 1; height:auto;}
.booking .top-con .thumb .swiper-wrapper,.booking .top-con .thumb .swiper-slide{height:100%;}
.booking .top-con .thumb .swiper-wrapper,.booking .top-con .thumb .swiper-slide img{border-radius:20px;}
.booking .top-con .thumb :where(.swiper-button-next,.swiper-button-prev){padding:17px 25px; width:auto; height:auto; background-color:rgba(0,0,0,.6); color:#fff; border-radius:7px;}
.booking .top-con .thumb .swiper-button-next:after,.booking .top-con .thumb .swiper-button-prev:after{font-size:1.475rem}
.booking .top-con .txt-wrap{padding-top:25px; }
.booking .top-con .txt-wrap .tag{display:flex; align-items:center; gap:0 10px;}
.booking .top-con .txt-wrap .code-wrap{display:flex; align-items:center; gap:0 5px; font-size:14px;}
.booking .top-con .txt-wrap .code-wrap .name{color:#777;}
.booking .top-con .txt-wrap .code-wrap .num{color:#484848}
.booking h1{padding-top:20px; font-size:1.5rem; font-weight:600; line-height:1.3}
.booking .sub-tit{padding-top:10px; font-size:.938rem; color:#666; }
.booking .price{padding-top:25px; font-size:1.625rem; font-weight:700}


.booking .main-con{display:flex; gap:0 50px; }


/* ✅ 상단 탭(스티키) */
.booking .main-con .top-tabs { position: sticky; top: 0; z-index: 50; background: #fff;  }
.booking .main-con .tabs { display: flex;  height: var(--tabH); align-items: flex-end; }
.booking .main-con .tab { flex:1; padding: 18px 2px 14px; cursor: pointer; border: 0; background: transparent; font-size: 16px; color: #888; position: relative; border-bottom: 1px solid #ddd;}
.booking .main-con .tab.is-active { color: var(--text); font-weight: 700; border-bottom:2px solid var(--black-color); }
.booking .main-con .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px; }


@media only screen and (max-width:1024px){
	.booking .top-con .thumb,.booking .main-con .left-wrap{width:100%;}
	.booking .top-con{display:block}
	.booking .main-con{display:block}
}


/* ✅ 날짜 스와이퍼 */
.booking .main-con .date-row { padding: 18px 0 10px; }
.booking .main-con .date-head { display: flex; align-items: center; justify-content: space-between; margin: 35px 0 12px; }
.booking .main-con .date-head h2 { margin: 0; font-size: 1.375rem; }
.booking .main-con .date-head .mini { font-size: .938rem; color: var(--muted); display: flex; gap: 7px; align-items: center; cursor:pointer;}
.booking .main-con .date-head .mini .cal { width: 19px; display: flex; align-items:center; }
.booking .main-con .date-head .mini .cal img{max-width:100%}
.booking .main-con .date-swiper-wrap { padding-top:22px; display: flex; align-items: center; gap: 0; }
.booking .main-con .nav-btn {position:relative;  width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.booking .main-con .nav-btn .icon{position:absolute; width:100%; height:100%; left:50%; top:15px; transform:translate(-50%,-50%);}
.booking .main-con .nav-btn .icon:before{content:''; position:absolute; width:13px; height:2px; background-color:var(--black-color); transform:rotate(-45deg)}
.booking .main-con .nav-btn .icon:after{content:''; position:absolute; top:9px; width:13px; height:2px; background-color:var(--black-color); transform:rotate(45deg)}
.booking .main-con .nav-btn.prev .icon{top:30px; left:0;}
.booking .main-con .nav-btn.next .icon{transform:scaleX(-1)}
.booking .main-con .nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.booking .main-con .swiper { width: 100%; }
.booking .main-con .swiper-slide { width: auto; }
.booking .main-con .date-pill { min-width: 115px; border: 2px solid #fff; background: #F5F6F7; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; cursor: pointer; user-select: none; text-align:center;}
.booking .main-con .date-pill .d { font-size: .938rem; color: #444; }
.booking .main-con .date-pill .p { font-size: .875rem; color: #777; }

.booking .main-con .date-pill.is-active { border: 2px solid var(--primary-color); background: #fff; }
.booking .main-con .date-pill.is-active .d{ font-weight: 700; }
.booking .main-con .date-pill.is-active .d,.booking .main-con .date-pill.is-active .p { color: var(--primary-color);}

.booking .main-con .card{display:flex; margin-top:18px; border: 1px solid #ddd; border-radius: 18px; padding: 25px 40px 25px; background: #fff; transition:all .3s}
.booking .main-con .card:hover{border-color:var(--primary-color); cursor:pointer; box-shadow:0 0 10px rgba(0,0,0,.1)} 
.booking .main-con .card-info-wrap{flex-grow:1;}

.booking .main-con .card .card-top{display:flex; gap:0 12px; align-items:center}
.booking .main-con .card .card-top .status{display:flex; gap:0 12px; align-items:center}
.booking .main-con .card .card-top .status b{color:var(--blue-color); font-weight:500}
.booking .main-con .card .card-top .status :where(.current,.remain,.min){font-size:.938rem; color:#666;}
.booking .main-con .card .card-top .status .current{position:relative; padding-right:12px;}
.booking .main-con .card .card-top .status .current:before{content:''; position:absolute; top:50%; right:0; width:1px; height:70%; transform:translateY(-50%); background-color:#ddd;}

.booking .main-con .option-tit{display:flex; align-items:center; padding-top:15px; gap:0 7px;}
.booking .main-con .option-tit img{max-height:18px;}
.booking .main-con .option-tit .name{font-size:.938rem; color:#555;}
.booking .main-con .option-tit .date{font-size:1.125rem; color:#3d3d3d; font-weight:600}
.booking .main-con .option-desc{padding-top:3px; color:#777;}
.booking .main-con .option-cta{display:flex; flex-flow:column; gap:7px 0}/*  align-items:center; justify-content:space-between; */
.booking .main-con .option-price{padding-top:5px; font-size:1.438rem; font-weight:600; color:var(--black-color)}

.booking .main-con .option-btn{display:none; border:1px solid #96989E; border-radius:7px;}
.booking .main-con .option-btn .inner-btn{display:flex; align-items:center; justify-content:center; padding:8px 0 6px; width:100%; border-radius:7px; font-size:1.063rem; color:var(--primary-color); background-color:#fff; font-weight:500; border:none;}
.booking .main-con .option-btn .inner-btn .arrow-down{position:relative; display:inline-block; margin-left:3px; width:13px; height:25px;}
.booking .main-con .option-btn .inner-btn .arrow-down:before{content:''; position:absolute; top:8px; left:7px; width:7px; height:7px; border-top:1px solid var(--primary-color); border-right:1px solid var(--primary-color); transform:translateX(-50%) rotate(45deg)}




.opt-modal .c-type{padding:10px 0; }
.opt-modal .c-type ul{display:grid; grid-template-columns:repeat(3,1fr); gap:15px 0;}
.opt-modal .c-type ul li{text-align:center;}
.opt-modal .c-type ul li .tit{color:#333; font-weight:500}
.opt-modal .c-type ul li .txt{font-size:13px; color:#777;}
.opt-modal .c-type ul li .per-price{padding:2px 0 9px; font-size:.875rem; color:var(--black-color); font-weight:500; opacity:.8}
.opt-modal .c-type .count-box { display:inline-flex; align-items:center; border:1px solid #e5e5ea; border-radius:12px; height:44px; overflow:hidden; background:#fff; }
.opt-modal .c-type .count-box .btn { width:40px; height:40px; border:0; background:transparent; font-size:20px; font-weight:400; color:#555; cursor:pointer; }
.opt-modal .c-type .count-box .btn:active { background:#f2f2f6; }
.opt-modal .c-type .count-box .num { width:44px; text-align:center; font-size:16px; font-weight:700; color:var(--black-color); }

.opt-modal-summary{display:flex; gap:0 8px; flex-wrap:wrap; align-items:center; padding:10px 25px; border-bottom:1px solid #eee; background-color:#eff5fb}
.opt-modal-summary .s-badge{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; }
.opt-modal-summary .s-title{font-weight:700; line-height:1.3; }
.opt-modal-summary .s-desc{width:100%; font-size:13px; color:#666; margin-bottom:10px;}
.opt-modal-summary .s-price{font-weight:900; font-size:16px;}



.opt-modal .c-type .go-cart{display:block; margin-top:25px;  padding:10px; border-radius:10px; width:100%; background:var(--primary-color); color:#fff; font-weight:500; border:none; font-size:1.125rem}
.opt-modal .c-type .go-cart:hover{background-color:var(--primary-color-hover)}

.booking .main-con .option-btn .c-type { display:none; }
.booking .main-con .option-btn.open .arrow-down { transform:rotate(180deg); }
.booking .main-con .option-btn .arrow-down { display:inline-block; transition:transform .2s ease; }


.booking .main-con .option-btn .arrow-down { display:inline-block; transition:transform .25s ease; }
.booking .main-con .option-btn.open .arrow-down { transform:rotate(180deg); }


.booking .prod-info-wrap{margin-top:80px;}
.booking .prod-info-wrap .d-img-wrap{padding:25px 0 50px;}
.booking .prod-info-wrap .d-img-wrap img{max-width:100%;}



.opt-modal{position:fixed; inset:0; z-index:99999; display:none;}
.opt-modal.is-open{display:block;}
.opt-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.opt-modal-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw, 520px); max-height:min(78vh, 640px); background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.18);}
.opt-modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 7px; border-bottom:1px solid #eee;}
.opt-modal-head .title{font-weight:700;}
.opt-modal-head .x{width:36px; height:36px; border:0; background:transparent; font-size:22px; cursor:pointer;}
.opt-modal-body{padding:14px 16px; overflow:auto; max-height:calc(min(78vh, 640px) - 56px);}
#optModalSummary .s-desc{display:none;}



@media only screen and (max-width:560px){
	.booking .main-con .card{display:block}
	.booking .main-con .card .card-top{gap:0 8px;}
	.booking .main-con .option-cta{flex-flow:row; justify-content:end; align-items:center; gap:0 5px;}
	.booking .main-con .option-price{font-size:1.25rem}
	.booking .main-con .option-btn .inner-btn{padding:4px 8px;font-size:.938rem; padding:4px 8px;}
	.booking .main-con .option-btn .inner-btn .hidden{display:none}
	.booking .main-con .option-tit{padding-top:10px}
	.booking .main-con .option-desc{padding-top:0}
	.booking .main-con .option-btn .inner-btn .arrow-down{height:15px; margin-left:0; }
	.booking .main-con .option-btn .inner-btn .arrow-down:before{top:4px;}
}




/* 달력 */
.main-cal-layer{position:fixed; inset:0; z-index:99999; display:none;}
.main-cal-layer.is-open{display:block;}
.main-cal-layer .cal-dim{position:absolute; inset:0; background:rgba(0,0,0,.65); z-index:1;}

/* 달력 패널은 dim 위 */
.main-cal-layer .panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;}
.main-cal-layer .panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(920px, calc(100% - 36px)); background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden;}
.main-cal-layer .head{display:flex; align-items:center; justify-content:space-between; padding:10px 18px 5px; border-bottom:1px solid #eee;}
.main-cal-layer .head .title{font-weight:800; font-size:1.125rem; text-align:center}
.main-cal-layer .head .x{position:absolute; top:5px; right:15px; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer; font-size:25px; background:none;}
.main-cal-layer .head .sp{width:36px; height:36px;}
.main-cal-layer .body{display:flex; align-items:stretch; gap:10px; padding:14px 14px 10px;}
.main-cal-layer .nav{display:flex; align-items:center; justify-content:center; width:40px; border:0; border-radius:12px; cursor:pointer; font-size:30px; font-weight:800; background:none;}
.main-cal-layer .nav .icon{display:block; position:relative; width:13px; height:13px; border-top:1px solid var(--black-color); border-right:1px solid var(--black-color); transform:rotate(45deg)}
.main-cal-layer .nav.prev .icon{transform:rotate(-135deg)}
.main-cal-layer .nav:disabled{opacity:.25}
.main-cal-layer .months{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:360px;}
.main-cal-layer .month{padding:6px 4px;}
.main-cal-layer .m-head{display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; margin:10px 0 14px;}
.main-cal-layer .dow{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; font-size:12px; color:#666; padding:0 8px 10px; border-bottom:1px solid #eee;}
.main-cal-layer .dow span{text-align:center; padding:4px 0;}
.main-cal-layer .grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:12px 8px 6px;}
.main-cal-layer .cell{height:46px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; user-select:none;}
.main-cal-layer .cell .d{font-weight:800; font-size:14px; line-height:1;}
.main-cal-layer .cell .p{font-size:12px; margin-top:4px; color:#333; }
.main-cal-layer .cell.disabled{opacity:.25; cursor:not-allowed;}
.main-cal-layer .cell:not(.disabled):hover{background:#f5f7ff;}
.main-cal-layer .cell.sel{outline:2px solid #2563eb; background:#fff;}
.main-cal-layer .foot{padding:14px; border-top:1px solid #eee;}
.main-cal-layer .ok{width:100%; height:52px; border:0; border-radius:14px; background:var(--primary-color); color:#fff; font-weight:700; font-size:1.25rem; cursor:pointer;}
.main-cal-layer .ok:disabled{background:#e5e7eb; color:#9ca3af; cursor:not-allowed;}

/* 달력 주말 컬러 */
.main-cal-layer .cell.sun .d { color:#4285ff; } /* 일요일 */
.main-cal-layer .cell.sat .d { color:#ff7373; } /* 토요일 */


@media (max-width:1024px){
  .main-cal-layer .nav{ display:none !important; }
  .main-cal-layer .months{display:block; max-height: 62vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right: 6px;}

  /* 두달 동시 출력 대신 1개 컨테이너만 사용 */
  .main-cal-layer .month#m2{ display:none;}

  /* 달 간격 */
  .main-cal-layer .month .m-head{position: sticky; top: 0; background:#fff; padding: 12px 0 8px; z-index: 2;}
  .main-cal-layer .month + .month{ margin-top: 18px; }
}

@media (max-width: 720px){
  .main-cal-layer .panel{top:auto; bottom:12px; transform:translate(-50%,0); border-radius:18px;}
  .main-cal-layer .months{grid-template-columns:1fr;}
  .main-cal-layer #m2{display:none;}
  .main-cal-layer .nav{width:44px;}
}

@media only screen and (max-width:560px){
	.main-cal-layer .cell .p{font-size:10px; color:#666;}
	.booking .main-con .nav-btn{width:25px; height:36px; flex-shrink:0;}

	.booking .main-con .nav-btn .icon:before,.booking .main-con .nav-btn .icon:after{width:10px;}
	.booking .main-con .nav-btn .icon:after{top:6px}
}


.booking .right-wrap{position:relative; flex-grow:1;}
.booking .right-wrap .box{position:sticky; top:20px; padding:35px 45px; border-radius:15px; background-color:#fff; box-shadow:0 0 20px rgba(0,0,0,.1)}
.booking .right-wrap .tit{font-size:1.313rem; font-weight:600}
.booking .right-wrap .txt{font-size:.875rem; color:#777}
.booking .right-wrap .prod-list{margin-top:10px; max-height:70vh; overflow-y:auto}
.booking .right-wrap .prod-list li{position:relative; margin-top:12px; padding:15px 25px; box-shadow: inset 0 0 0 1px #ddd; border-radius:12px; cursor:pointer;}
.booking .right-wrap .prod-list li .del{background:none; position:absolute; top:9px; right:12px; border:none; font-size:24px; }
.booking .right-wrap .prod-list li .del img{max-width:18px; opacity:.5}
.booking .right-wrap .prod-list li.active{box-shadow: inset 0 0 0 3px var(--primary-color);}
.booking .right-wrap .prod-list li .info-wrap{display:flex; gap:0 8px;}
.booking .right-wrap .prod-list li .info-wrap .icon{padding-top:1.5px;}
.booking .right-wrap .prod-list li .info-wrap .icon img{max-width:18px}
.booking .right-wrap .prod-list li .info-wrap .date{font-weight:500; color:#353535;}
.booking .right-wrap .prod-list li .info-wrap .person .tit{font-size:14px; color:var(--black-color);}
.booking .right-wrap .prod-list li .info-wrap .person .txt{color:#555;}
.booking .right-wrap .prod-list li .price-wrap{display:flex; align-items:center; justify-content:end; gap:0 8px; }
.booking .right-wrap .prod-list li .price-wrap .txt{font-size:14px;color:var(--black-color)}
.booking .right-wrap .prod-list li .price-wrap .tit{font-size:16px;color:var(--black-color)}

.booking .right-wrap .total-price{padding:25px 0 15px; display:flex; align-items:center; justify-content:space-between;}
.booking .right-wrap .total-price .txt{font-size:1.063rem; color:var(--black-color); font-weight:500}
.booking .right-wrap .total-price .tit{font-size:1.438rem; color:var(--primary-color); font-weight:600}
.booking .right-wrap .go-pay{display:block; padding:12px; background-color:var(--primary-color); color:#fff; border-radius:10px; text-align:center; font-size:1.125rem; font-weight:500}
.booking .right-wrap .go-pay:hover{background:var(--primary-color-hover)}


.sheet-dim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; display:none;}
.sheet-dim.is-open{display:block;}
.booking .right-wrap .box .m-hidden{position:relative; z-index:9999;}


.btn-close-icon{display:none;}

@media only screen and (max-width:1400px){
	.booking .right-wrap .box{padding:35px;}		
}

@media only screen and (max-width:1024px){
	.booking .right-wrap .box .m-hidden{display:none; }
	.booking .right-wrap .box{position:fixed; padding:15px 20px; width:100%; top:auto;  left:0; bottom:0px; z-index:100; border-radius:15px 15px 0 0; z-index:9999}
	.booking .right-wrap .prod-list{max-height:240px;}
	.booking .right-wrap .prod-list li:first-child{margin-top:20px;}

	.btn-close-icon{position:absolute; right:15px; width:38px; height:38px; border:0; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.15s; background:none;}
	.btn-close-icon svg{width:18px; height:18px; color:#222;}
	.btn-close-icon:hover{background:#e9ecef;}
	.btn-close-icon:active{transform:scale(.95);}

	.booking .right-wrap .total-price{padding:20px 0 10px;}
}


@media only screen and (max-width:560px){
	.header .logo img{max-width:50px;}

	.booking h1{font-size:1.375rem}
	.booking .price{padding-top:10px;}
	.booking .main-con .date-pill{min-width:auto}
	.booking .main-con .date-swiper-wrap{gap:0;}
	.booking .main-con .card{margin-top:13px; padding:20px 22px 17px;}

	.btn-close-icon{right:-10px}
	.booking .main-con .card .card-top .status{gap:0 7px;}
	.booking .main-con .card .card-top .status .current{padding-right:7px;}
	.opt-modal .c-type{padding:10px 15px;}
	.opt-modal .c-type ul{grid-template-columns:repeat(1,1fr)}
	.opt-modal .c-type ul li{display:flex; justify-content:space-between;}
	.opt-modal .c-type ul li > div{display:flex; align-items:center; gap:0 3px; flex-wrap:wrap;}
	.opt-modal .c-type ul li > div p{text-align:left;}
	.opt-modal .c-type ul li > div p:nth-child(3){flex: 0 0 100%} 
	.opt-modal .c-type ul li .txt{font-size:12px}
	.opt-modal .c-type ul li .per-price{padding:2px 0 0; text-align:left; }
	.opt-modal .c-type .count-box{width:110px; flex-shrink:0;}
	.opt-modal .c-type .count-box .btn{width:35px;}
	.opt-modal .c-type .count-box .num{width:30px}	
	.booking .prod-info-wrap{margin-top:65px;}
	.booking .prod-info-wrap .d-img-wrap{padding:15px 0 50px;}
	.booking .right-wrap .prod-list li{padding:15px 22px;}
	.booking .right-wrap .prod-list li .price-wrap .tit{font-weight:500px; opacity:.8; font-size:15px;}
	.booking .right-wrap .total-price .tit{font-size:1.563rem}

	.booking h1{font-size:1.375rem; line-height:1.35}
	.booking .price{font-size:1.5rem}
}




.pay .main-con .left-wrap{width:900px;}
.pay .top-con{align-items:start; gap:0 20px;}
.pay .pay-thumb{width:80px; aspect-ratio:1/1; overflow:hidden; flex-shrink:0; border-radius:10px;}
.pay .pay-thumb img{width:100%; height:100%; object-fit:cover;}
.pay .top-con .txt-wrap{padding:0; padding-right:10px;}
.pay .top-con .txt-wrap .info{display:flex; flex-wrap:wrap; gap:0 12px; padding-top:5px; font-size:.938rem; color:#868895}
.pay .top-con .txt-wrap .info span{position:relative; }
.pay .top-con .txt-wrap .info span:after{content:''; position:absolute; top:10px; right:-6px; width:2px; height:2px; border-radius:100px; background:var(--primary-color)}
.pay .top-con .txt-wrap .info span:last-child:after{display:none}
.pay .txt-wrap h1{word-break:break-all; padding-top:0; font-size:1.125rem; color:#374151; font-weight:500; line-height:1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}


.pay .prod-con{position:relative; margin-top:13px; padding:25px 28px 20px; border:1px solid #e5e5e5; border-radius:15px;}
.pay .prod-con.first{margin-top:0}

.pay .top-header{padding-bottom:7px; display:flex; justify-content:space-between;}
.pay .top-header .name{font-size:1rem; color:var(--primary-color); font-weight:500}
.pay .btn-close-x{position:relative; width:18px; height:18px; background:none; border:none;}
.pay .btn-close-x:before{content:""; position:absolute; left:50%; top:50%; width:15px; height:1px; background:#ccc; transform:translate(-50%,-50%) rotate(45deg);}
.pay .btn-close-x:after{content:""; position:absolute; left:50%; top:50%; width:15px; height:1px; background:#ccc; transform:translate(-50%,-50%) rotate(-45deg);}

.pay .prod-con .item-price{margin-top:12px; display:flex; justify-content:end; align-items:center; gap:0 8px}
.pay .prod-con .item-price .tit{font-size:.938rem; color:#8c9199; }
.pay .prod-con .item-price .txt{font-size:1.25rem; font-weight:600}

.pay .schedule{margin-top:13px; padding:14px 30px; display:flex; align-items:center; justify-content:center; background-color:#eff5fb; border-radius:12px; gap:0 35px;} /* #EEF5FE */
.pay .schedule .detail{text-align:center;}
.pay .schedule .detail .txt{color:#555; font-size:.938rem; line-height:1.3}
.pay .schedule .detail .date{font-size:1rem; color:#3f3f3f; line-height:1.4; font-weight:600}
.pay .schedule .detail .txt-02{font-size:.938rem; color:var(--blue-color2)}
.pay .schedule .duration{text-align:center;}
.pay .schedule .duration .badge{padding:3px 8px; background:#a3b7cb; color:#fff; border-radius:100px; font-weight:400;} /* #6E8AC7 */
.pay .schedule .duration .kind{padding-top:3px; display:flex; align-items:center; gap:0 5px;}
.pay .schedule .duration .kind img{max-width:25px;}
.pay .schedule .duration .kind span{font-size:.938rem; color:var(--black-color); font-weight:500;}

.pay .info-wrap{margin-top:20px; }
.pay .info-wrap ul{display:flex; align-items:center; padding:12px 5px; border-bottom:1px solid #eee;}
.pay .info-wrap ul li.tit{width:90px; flex-shrink:0; font-size:1rem; color:#333; font-weight:500;}
.pay .info-wrap ul li.txt{font-size:.938rem; color:#666;}
.pay .info-wrap ul li.txt.point{color:var(--black-color); font-weight:500}
.pay .info-wrap ul.sch li.txt{}
.pay .info-wrap ul.sch li span{}
.pay .info-wrap ul.sch li span strong{font-weight:500; color:var(--black-color)}
.pay .info-wrap ul.sch li span.color{display:block; color:var(--primary-color)}
.pay .info-wrap .summary{display:flex; align-items:center; gap:0 10px}

.pay .list-sub-tit{margin-bottom:25px; padding-bottom:15px; font-size:1.5rem; font-weight:600; border-bottom:1px solid #555;}

.pay .sub-space{margin-top:50px;}
.pay .boarding-list .cont{margin-top:25px; padding-bottom:35px; border-bottom:1px solid #ddd;}
.pay .boarding-list .cont:last-child{padding-bottom:0; border-bottom:0;}
.pay .boarding-list .cont > .tit{padding-bottom:8px; font-size:1.125rem; color:var(--primary-color); font-weight:500}
.pay .boarding-list .cont ul{display:grid; grid-template-columns:repeat(2,1fr); gap:15px 15px}
.pay .boarding-list .cont ul li{width:100%}
.pay .boarding-list .cont ul li label{display:block; padding-bottom:7px;}
.pay .boarding-list .cont ul li input{width:100%; border-radius:10px;}
.pay .boarding-list .cont ul li input::placeholder{color:#aaa}

.pay .question textarea{border-radius:13px; min-height:150px;}
.pay .question textarea::placeholder{color:#aaa;}

.pay .caution ul.main-c{padding:25px 30px; border-radius:10px; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.1)}
.pay .caution ul.main-c li{position:relative; margin:2px 0; padding:0 0 0 15px; font-size:1rem; color:var(--primary-color); font-weight:500}
.pay .caution ul.main-c li:before{content:''; position:absolute; top:8px; left:0; width:6px; height:6px; border-radius:100px; border:1px solid var(--primary-color);}
.pay .caution ul.sub-c{margin-top:15px; }
.pay .caution ul.sub-c li{position:relative; margin:2px 0; padding:0 0 0 15px; font-size:.938rem; color:#666;}
.pay .caution ul.sub-c li:before{content:''; position:absolute; top:10px; left:0; width:5px; height:1px;  background-color:#aaa;}


.pay .agree{margin-top:18px;}
.pay .agree-all{display:flex; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer; user-select:none;}
.pay .agree-list{display:flex; flex-direction:column; gap:10px;}
.pay .agree-list li{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px; border:1px solid #e5e7eb; border-radius:12px; background:#fff;}
.pay .agree-row{display:flex; align-items:center; padding:12px 0;gap:8px; width:100%; cursor:pointer; user-select:none;}
.pay .agree-item{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
.pay .agree input{position:absolute; opacity:0; width:0; height:0;}

/* 위(전체동의) 체크는 그대로 원형 */
.pay .agree-all .chk{width:22px; height:22px; border:2px solid #bdbdbd; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px;}
.pay .agree-all .chk:before{content:""; width:10px; height:6px; border-left:2px solid transparent; border-bottom:2px solid transparent; transform:rotate(-45deg); margin-top:-2px;}
.pay .agree-all input:checked + .chk{border-color:var(--primary-color);}
.pay .agree-all input:checked + .chk:before{border-left-color:var(--primary-color); border-bottom-color:var(--primary-color);}

/* 아래(리스트) 체크는 연한 체크 -> 파란 체크 */
.pay .agree-list .chk{width:18px; height:18px; border:0; border-radius:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px;}
.pay .agree-list .chk:before{content:""; width:10px; height:6px; border-left:2px solid #cbd5e1; border-bottom:2px solid #cbd5e1; transform:rotate(-45deg); margin-top:-2px;}
.pay .agree-list input:checked + .chk:before{border-left-color:var(--primary-color); border-bottom-color:var(--primary-color);}

.pay .agree .txt{font-size:15px; color:#333;}
.pay .agree-link{font-size:14px; color:#6b7280; text-decoration:none; white-space:nowrap;}
.pay .agree-link:hover{text-decoration:underline;}
.pay .agree-hint{margin-top:10px; font-size:13px; color:#9ca3af;}

.pay .pay-method{display:flex; flex-direction:column; gap:16px;}
.pay .pay-method .pm-item{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
.pay .pay-method .pm-item input{position:absolute; opacity:0; width:0; height:0;}
.pay .pay-method .pm-radio{width:20px; height:20px; border:1px solid #d1d5db; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px;}
.pay .pay-method .pm-radio:before{content:""; width:8px; height:8px; border-radius:999px; background:transparent;}
.pay .pay-method .pm-item input:checked + .pm-radio{border-color:#2563eb; border-width:5px;}
/*.pay .pay-method .pm-item input:checked + .pm-radio:before{background:#2563eb;}*/
.pay .pay-method .pm-txt{font-size:1rem; color:var(--black-color); font-weight:500;}

.pay .pay-method .pm-detail{display:none; padding-left:28px; margin-top:-6px; gap:10px; flex-direction:column;}
.pay .pay-method .pm-detail.is-open{display:flex;}
.pay .pay-method .pm-select{height:44px; padding:0 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; width:100%;}

.pay .pm-drop{position:relative;}
.pay .pm-drop-btn{width:100%; height:48px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 16px; font-size:15px; cursor:pointer;}
.pay .pm-drop-btn .val{color:#333; }
.pay .pm-drop-btn .arrow{font-size:12px; color:#9ca3af;}

.pay .pm-drop-list{position:absolute; left:0; top:52px; width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); padding:6px 0; display:none; z-index:50;}
.pay .pm-drop-list li{padding:12px 16px; font-size:14px; cursor:pointer; color:#111827;}
.pay .pm-drop-list li:hover{background:#f3f4f6;}
.pay .pm-drop.is-open .pm-drop-list{display:block;}

.pay .final-price li{display:flex; justify-content:space-between; align-items:center; padding:5px; }
.pay .final-price li .kind{color:#666;}
.pay .final-price li .num{font-size:1.063rem; color:var(--black-color;); font-weight:500}

.pay .right-wrap .total-price{margin-top:15px; padding:15px 0 ; border-top:1px solid #ddd;}


.gender-radio{display:flex; gap:10px;}
.gender-radio input{position:absolute; opacity:0; width:0; height:0;}
.pay .boarding-list .cont ul li .gender-radio label{display:flex; align-items:center; min-width:50px; height:46px; padding:0 18px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#9ca3af; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; transition:.15s;}
.gender-radio input:checked + label{border-color:#111827; color:#111827;}
.gender-radio input:focus-visible + label{outline:3px solid rgba(37,99,235,.25); outline-offset:2px;}


@media only screen and (max-width:1400px){
	.pay .main-con .left-wrap{flex-grow:1; width:auto; }
	.pay .right-wrap{width:350px; flex-shrink:0;}
}
@media only screen and (max-width:1024px){
	.pay .top-con{display:flex;}
	.pay .main-con .left-wrap{padding-top:0}
	.pay .schedule{gap:0 50px}
	.pay .schedule .detail .date .hidden{display:none}
	.pay .right-wrap{margin-top:50px; }
	.pay .right-wrap .box{position:relative; padding:0; box-shadow:none; }
	.pay .right-wrap{width:100%;}
	.pay .right-wrap .tit{font-size:1.5rem; margin-bottom:25px; padding-bottom:15px; border-bottom:1px solid #555;}
	.pay .right-wrap .go-pay{position:fixed; width:calc(100% - 8%); bottom:20px}
	.pay .right-wrap .total-price .tit{margin-bottom:0; padding-bottom:0; border:none}
}

@media only screen and (max-width:560px){
	.pay .schedule{gap:0 10px}
	.pay .top-con{gap:0 15px;}
	.pay .txt-wrap h1{font-size:1.125rem}
	.pay .schedule{padding:15px 5px;}
	.pay .schedule .detail .date{font-size:1rem}
	.pay .schedule .duration .kind span{font-size:.875rem;}
	.pay .schedule .duration .badge{font-weight:500; font-size:11px;}
	.pay .boarding-list .cont ul{gap:15px 10px}
	.pay .boarding-list .cont ul li label{padding-bottom:3px;}
	.pay .boarding-list .cont ul li input{padding:10px 15px;}
	.pay .boarding-list .cont{margin-top:20px; padding-bottom:30px; }
	.pay .caution ul.main-c{padding:20px}

	.pay .list-sub-tit{margin-bottom:15px; font-size:1.375rem}
	
	.sub-con{margin-bottom:50px;}
	.pay .pay-thumb{width:50px;}
	.pay .prod-con{padding:17px 20px 15px;}

	.pay .sub-space{margin-top:45px;}
	
}





.dim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998;}
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; z-index:999;}
.modal[hidden], .dim[hidden]{display:none;}
.modal-box{width:min(420px, 100%); background:#fff; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.18); overflow:hidden;}
.modal-top{padding:20px 25px 20px;}
.modal-title{display:block; font-size:1.25rem; font-weight:700; color:#111827; line-height:1.3;}
.modal-desc{margin-top:6px; font-size:13px; color:#6b7280; line-height:1.4;}
.modal-btns{display:flex; gap:10px; padding:14px 25px 18px;}
.btn{flex:1; height:44px; border-radius:12px; font-size:14px; font-weight:600; border:1px solid transparent; cursor:pointer;}
.btn-ghost{background:#f3f4f6; color:#111827; border-color:#e5e7eb;}
.btn-danger{background:var(--primary-color); color:#fff;}
.btn:active{transform:translateY(1px);}



.modal-terms{width:min(720px, 100%);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #eee;}
.modal-head .modal-title{font-size:1.125rem;}
.modal-body{max-height:min(65vh, 560px); overflow:auto; padding:18px 20px; line-height:1.6; color:#374151;}
.modal-body h3{margin:0 0 10px; font-size:1rem;}
.modal-body p{margin:0 0 10px;}
.layer-close{position:relative; width:28px; height:28px; background:none; border:0; cursor:pointer;}
.layer-close:before{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(45deg);}
.layer-close:after{content:""; position:absolute; left:50%; top:50%; width:16px; height:2px; background:#9ca3af; transform:translate(-50%,-50%) rotate(-45deg);}



#dim{ z-index: 2147483 !important; }
#delModal, #layerModal{ z-index: 2147487 !important; }




/* 마이페이지 */

/* =========================
     마이페이지 스타일 (mypage 네임스페이스)
     ========================= */
  .mypage{background-color:#f8fafc;}
  .mypage .mypage-head{margin-bottom:25px;}
  .mypage .mypage-title{font-size:2.125rem;margin:0 0 8px;}
  .mypage .mypage-sub{margin:10px 0 0 ;color:#6b7280;font-size:1rem;}
  .mypage .mypage-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:25px;box-shadow:0 0 17px rgba(0,0,0,.06);}
  .mypage .mypage-profile{margin-bottom:25px;}
  .mypage .profile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px;}
  .mypage .profile-top h2{padding-bottom:5px; margin:0;font-size:1rem; font-weight:500}
  .mypage .profile-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .mypage .btn-line{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;cursor:pointer;}
  .mypage .profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
  .mypage .profile-grid .item{border:1px solid #e0e8f1;background:#f1f5f9;border-radius:12px;padding:15px;}
  .mypage .profile-grid .label{margin:0 0 3px;font-size:.875rem;color:#6b7280;}
  .mypage .profile-grid .value{margin:0;font-size:1rem;font-weight:600;color:var(--black-color);}
  .mypage .profile-note{display:none; margin-top:10px;font-size:.813rem;color:#6b7280;}
  .mypage .mono{/*font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;*/}
  .mypage .mypage-orders .orders-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 12px;}
  .mypage .mypage-orders h2{flex-grow:1; margin:0; padding:20px 0 7px; font-size:1.375rem; font-weight:600; color:var(--black-color)}
  .mypage .orders-filter{display:flex;gap:8px;flex-wrap:wrap;}
  .mypage .chip{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:7px 10px;font-size:12px;cursor:pointer;}
  .mypage .chip.is-active{border-color:var(--primary-color,#2563eb);color:var(--primary-color,#2563eb);background:#eff6ff;}

  .mypage .order-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:25px;display:flex; align-items:start; justify-content:space-between;gap:30px;margin-bottom:12px;box-shadow:0 0 17px rgba(0,0,0,.06); align-items:center;}
  .mypage .order-left{position:relative; display:flex;gap:20px;min-width:0;flex:1 1 auto; align-items:center;}
  .mypage .order-right{width:240px;flex:0 0 240px;display:flex;flex-direction:column;gap:10px; justify-content:center;}

  .mypage .order-card.disabled .prod-name{}
  .mypage .order-card.disabled .meta-line .date{color:#374151}

  .mypage .order-card.cancel .badge.red{background:#ffdfdf; color:#fb7878}
  .mypage .order-card.cancel .prod-name{text-decoration:line-through; color:#aaa;}
  .mypage .order-card.cancel .meta-line .v{color:#6b7280}
  .mypage .order-card.cancel .price .value{color:#6b7280; text-decoration:line-through}



  .mypage .thumb{width:150px; aspect-ratio:4/3.5; border-radius:14px;overflow:hidden;background:#f3f4f6;flex:0 0 120px; align-self:start;}
  .mypage .thumb img{width:100%;height:100%;object-fit:cover;display:block;}

  .mypage .info-wrap{display:flex; align-items:center; flex-grow:1;}

  .mypage .order-info{min-width:0; flex-grow:1}
  .mypage .row-top{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
  .mypage .order-no{font-size:.813rem;color:#6b7280;}
  .mypage .prod-name{margin:12px 0 7px;font-size:1.188rem; line-height:1.35; color:var(--black-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-weight:600}

  .mypage .meta{padding:2px 0; display:flex;flex-direction:column;gap:4px; }
  .mypage .meta-line{display:flex;gap:8px;align-items:flex-start;}
  .mypage .meta-line .k{font-size:.938rem;color:#6b7280;width:44px;flex:0 0 44px;}
  .mypage .meta-line .v{font-size:.938rem;color:#374151;min-width:0;}
  .mypage .meta-line .date{color:var(--primary-color)}

  .mypage .badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:999px;font-size:.813rem;font-weight:600;}
  .mypage .badge.blue{background:var(--blue-color,#2563eb);color:#fff;}
  .mypage .badge.gray{background:#eef2f7;color:#475569;}
  .mypage .badge.red{background:#fb7878;color:#fff;}
  .mypage .badge.complate{}

  .mypage .price{display:flex; align-items:center; padding-top:10px; gap:0 10px; flex-flow:column;}
  .mypage .price .label{display:block;font-size:.875rem;color:#6b7280;}
  .mypage .price .value{font-size:1.25rem;font-weight:600;color:var(--black-color)}

  .mypage .btns{display:flex;flex-direction:column;gap:8px;}
  .mypage .btn-primary,.mypage .btn-ghost,.mypage .btn-danger,.mypage .btn-complete{display:inline-flex;align-items:center;justify-content:center;height:40px;border-radius:10px;font-size:.938rem;font-weight:700;cursor:pointer;text-decoration:none; }
  .mypage .btn-primary{color:#fff; border:1px solid var(--primary-color); background:none; color:var(--primary-color)}
  .mypage .btn-primary:hover{background:var(--primary-color-hover); color:#fff;}
  .mypage .btn-ghost{background:#fff;color:#111827;border:1px solid #e5e7eb;}
  .mypage .btn-danger{background:#fff;color:#f58787;border:1px solid #ffa4a4;}
  .mypage .btn-danger:disabled{border:none; color:#888; }
  .mypage .btn-complete{background:#fff;color:#888;border:1px solid #ccc; border:none!important}
   

  .mypage .empty{border:1px dashed #e5e7eb;border-radius:16px;padding:18px;background:#fff;text-align:center;}
  .mypage .empty .t{margin:0 0 6px;font-weight:800;}
  .mypage .empty .s{margin:0;color:#6b7280;font-size:13px;}

  /* ✅ 추가: 주문 요약바(예약번호+총결제+결제상세 버튼) */
  .mypage .order-summary{background:#fff;border:1px solid var(--primary-color);border-radius:16px;padding:20px 25px;box-shadow:0 0 17px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;}
  .mypage .order-summary-left{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;}
  .mypage .order-summary-title{font-size:1rem;color:#6b7280;font-weight:700;}
  .mypage .order-summary-kv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .mypage .order-summary-item{display:flex;align-items:center;gap:6px;white-space:nowrap;}
  .mypage .order-summary-item .k{font-size:.938rem;color:#6b7280;}
  .mypage .order-summary-item .v{font-size:.938rem;color:var(--black-color);font-weight:600;}
  .mypage .order-summary-total .v{font-size:1rem;color:var(--primary-color,#2563eb);font-weight:800;}
  .mypage .order-summary-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .mypage .order-summary-btn{padding:10px 12px;border-radius:10px;border:1px solid #d5d8dd;background:#fff;color:#111827;font-weight:800;font-size:13px;cursor:pointer;}
  .mypage .order-summary-badge{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;background:#eff6ff;color:var(--primary-color,#2563eb);border:1px solid #dbeafe;}
  .mypage .order-summary-sep{width:1px;height:12px;background:#e5e7eb;display:inline-block;}

  /* ✅ pay-detail-modal (중복 제거한 최종본) */
  .pay-detail-modal{position:fixed; inset:0; z-index:9999; display:none;}
  .pay-detail-modal.active{display:block;}
  .pay-detail-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.25s;}
  .pay-detail-modal-box{position:absolute; left:50%; top:50%; transform:translate(-50%,-45%); width:520px; max-width:92%; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25); opacity:0; transition:.25s;}
  .pay-detail-modal.active .pay-detail-modal-dim{opacity:1;}
  .pay-detail-modal.active .pay-detail-modal-box{opacity:1; transform:translate(-50%,-50%);}
  .pay-detail-modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee;}
  .pay-detail-modal-head h3{font-size:18px; font-weight:800; margin:0;}
  .pay-detail-modal-close{border:0; background:none; font-size:20px; cursor:pointer;}
  .pay-detail-modal-body{padding:18px 20px; max-height:62vh; overflow-y:auto;}
  .pay-detail-modal-foot{padding:14px 20px; border-top:1px solid #eee;}
  .pay-detail-modal-ok{width:100%; height:46px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:800; cursor:pointer;}
  .pay-detail-section{padding:14px 14px; border:1px solid #f0f2f5; border-radius:14px; background:#fafbfc; margin-bottom:12px;}
  .pay-detail-section-title{font-size:.875; font-weight:700; color:#111; margin-bottom:10px;}
  .pay-detail-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed #e8eaee;}
  .pay-detail-row:last-child{border-bottom:0;}
  .pay-detail-label{font-size:14px; color:#667085;}
  .pay-detail-sub{font-size:12px; color:#98a2b3; margin-left:6px;}
  .pay-detail-value{font-size:14px; color:#111; font-weight:500; text-align:right;}
  .pay-detail-divider{height:1px; background:#e8eaee; margin:10px 0;}
  .pay-detail-minus{color:#e11d48;}
  .pay-detail-total .pay-detail-label{color:var(--black-color); font-weight:700;}
  .pay-detail-total .pay-detail-value{font-size:16px; font-weight:800; color:#2563eb;}
  .pay-detail-status{font-weight:700;}
  .pay-detail-status.done{color:#2563eb;}
  .pay-detail-status.cancel{color:#e11d48;}

  .pay-detail-prodline{align-items:flex-start;}
  .pay-detail-prodname{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; line-height:1.35; max-width:70%;}



.prod-detail-modal{position:fixed; inset:0; z-index:9999; display:none;}
.prod-detail-modal.active{display:block;}
.prod-detail-modal-dim{position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.25s;}
.prod-detail-modal-box{position:absolute; left:50%; top:50%; transform:translate(-50%,-45%); width:520px; max-width:92%; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25); opacity:0; transition:.25s;}
.prod-detail-modal.active .prod-detail-modal-dim{opacity:1;}
.prod-detail-modal.active .prod-detail-modal-box{opacity:1; transform:translate(-50%,-50%);}

.prod-detail-modal-head{display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee;}
.prod-detail-modal-head h3{font-size:18px; font-weight:800; margin:0;}
.prod-detail-modal-close{border:0; background:none; font-size:20px; cursor:pointer;}

.prod-detail-modal-body{padding:18px 20px; max-height:62vh; overflow-y:auto;}
.prod-detail-modal-foot{padding:14px 20px; border-top:1px solid #eee;}
.prod-detail-modal-ok{width:100%; height:46px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-weight:800; cursor:pointer;}

.prod-detail-section{padding:14px 14px; border:1px solid #f0f2f5; border-radius:14px; background:#fafbfc; margin-bottom:12px;}
.prod-detail-section-title{font-size:13px; font-weight:800; color:#111; margin-bottom:10px;}

.prod-detail-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:1px dashed #e8eaee;}
.prod-detail-row:last-child{border-bottom:0;}
.prod-detail-row.last{border-bottom:1px solid #ddd;}

.prod-detail-row .k{font-size:14px; color:#667085;}
.prod-detail-row .v{font-size:14px; color:#111; font-weight:500; text-align:right;}
.prod-detail-row .v.light{font-weight:400}

.prod-detail-divider{height:1px; background:#e8eaee; margin:10px 0;}
.prod-detail-row .minus{color:#e11d48;}
.prod-detail-row.total .k{color:#111; font-weight:800;}
.prod-detail-row.total .v{font-size:16px; font-weight:900; color:#2563eb;}
.prod-detail-row.refund-strong .v{color:#2563eb;font-weight:800;}

.prod-detail-refund-title{display:block;margin:14px 0 10px;font-size:14px;font-weight:700;color:#111827;}



#pd_cancel_state{font-weight:800;color:#ef4444;}
.cancel-state{color:#ef4444;font-weight:800;}

.minus{color:#e11d48;}
.total .k{color:#111; font-weight:800;}
.total .v{font-size:16px; font-weight:900; color:#2563eb;}









  @media (max-width:1024px){
    .mypage .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
   
    .mypage .order-right{flex:0 0 auto; width:auto;}
    
    .mypage .order-summary{flex-direction:column;align-items:flex-start;}
    .mypage .order-summary-right{width:100%;}
    .mypage .order-summary-btn{width:100%;}
	.mypage .order-card .btns{align-items:flex-end; }
	.mypage .order-card .btns button{flex:0 0 auto; width:150px;}
	
	.mypage .info-wrap{flex-flow:column; flex-grow:1; align-items:start;}
	
	.mypage .order-left{}
	.mypage .order-left .price{flex-flow:row; gap:0 7px;}
	.mypage .order-left .price .label{order:2; display:none;}
	.mypage .order-left .price .value{order:1}
  }
  @media only screen and (max-width:768px){
  	.mypage .order-card{flex-direction:column;}
  	.mypage .btns{flex-direction:row;flex-wrap:wrap;}
    .mypage .btn-primary,.mypage .btn-ghost,.mypage .btn-danger{flex:1 1 120px;}

	.mypage .order-card{align-items:start;}
	.mypage .order-right{width:100%;}
	.mypage .order-card .btns button{flex:1 1 auto}

	.mypage .order-card .btns button:nth-child(1){order:2}
	.mypage .order-card .btns button:nth-child(2){order:1}
  }
  @media (max-width:560px){
    .mypage .thumb{width:96px;height:72px;flex-basis:96px;}
    .mypage .meta-line .k{width:38px;flex-basis:38px;}

	.mypage .thumb{width:70px; flex-basis:70px; aspect-ratio:1/1; height:auto; }
	
	.mypage .row-top{}
	.mypage .order-card{gap:15px;}
	.mypage .order-left{gap:0 16px;}

	.mypage .mypage-head{margin:15px 0 15px;}
	.mypage .mypage-title{font-size:1.75rem; font-weight:700}
	.mypage .mypage-sub{margin:3px 0 0}
	.mypage .profile-grid{gap:8px;}
	.mypage .mypage-orders h2{padding-bottom:2px; font-size:1.375rem;}
	.mypage .order-summary{gap:15px 0;}
	.mypage .order-summary-sep{display:none;}
	.mypage .order-summary-kv{gap:4px 0}
	.mypage .order-summary-kv .order-summary-item:first-child{width:100%;}
	.mypage .order-summary-item .k{width:70px;}
	.mypage .order-summary-badge{margin-left:5px; height:23px; padding:0 6px; font-weight:500; font-size:11px}
	.mypage .order-summary-title{font-size:1.063rem}
	
	.mypage .order-card{padding:23px}

	.mypage .badge{padding:3px 8px 1px;}
	.mypage .prod-name{margin:8px 0 5px; }
	.mypage .meta{gap:3px;}
	.mypage .meta-line{gap:3px;}
	.mypage .meta-line .v{line-height:1.4}
  }




 /* 메인 */