@charset "utf-8";
@import url("https://use.typekit.net/voh3cfz.css");
/* 초기화 */
html { overflow-y: scroll; font-size: 10px;  }
body { margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; background: #fff }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
ul, dl, dt, dd { margin: 0; padding: 0; list-style: none }
legend { position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden }
label, input, button, select, img { vertical-align: middle; font-size: 1em }
input, button { margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; font-size: 1em }
input[type="submit"] { cursor: pointer }
button { cursor: pointer }
textarea, select { font-family: 'Pretendard', sans-serif; font-size: 1em }
select { margin: 0 }
p { margin: 0; padding: 0; word-break: break-all }
hr { display: none }
pre { overflow-x: scroll; font-size: 1.1em }
a { color: #000; text-decoration: none }
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text], input[type=password], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; }

html { scrollbar-width: none;     /* Firefox */ -ms-overflow-style: none;     /* IE and Edge */ }
html::-webkit-scrollbar { display: none;     /* Chrome, Safari, Opera */ }

body { scrollbar-width: none;     /* Firefox */ -ms-overflow-style: none;     /* IE and Edge */ }
body::-webkit-scrollbar { display: none;     /* Chrome, Safari, Opera */ }

#app {
	width: 100%;
	max-width: 500px;
	height: 100dvh;
	position: relative;
	background-color: #ECEFF4;
	/* margin: 0 auto; */
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;     /* IE and Edge */
}

#app::-webkit-scrollbar { display: none;     /* Chrome, Safari, Opera */ }

#app .header { position: absolute; left: 0; top: 0; width: 100%; height: 52px; padding: 10px 20px; background-color: #0D3D48; z-index: 9;}
#app .header .inner { display: grid; justify-content: space-between; align-items: center; height: 100%; width: 100%; grid-template-columns: repeat(3, 1fr); }

#app .header .inner .title { color: #fff; font-weight: 600; font-size: 16px; text-align: center;}
#app .header .inner .menu {
	display: flex;
	justify-content: flex-end;
	grid-gap: 6px;
    align-items: center;
}

#app .header .inner .menu > a{
    position: relative;
}
#app { overflow: hidden; }

#app .header-login { background-color: #fff; display: flex; align-items: center; padding: 0 2rem; }
#app .header-login .inner { display: grid; justify-content: space-between; align-items: center; height: 100%; width: 100%; grid-template-columns: repeat(2, 1fr); }


/* #app .wrapper { padding: 52px 0 64px; } */

#app .footer { position: absolute; left: 0; bottom: 0; width: 100%; font-size: 12px; font-weight: 500; letter-spacing: 0.025em; background-color: #fff; color: #989BA2; }
#app .footer > ul { display: flex; height: 64px; width: 100%; justify-content: space-between; padding: 9px 0;}
#app .footer > ul > li { padding: 0; display: flex; justify-content: center; width: 100%; align-items: center;}
#app .footer > ul > li > div { display: flex; flex-direction: column; grid-gap: 6px; align-items: center; }
#app .footer > ul > li > div > img {width: 24px; height: auto;}

#app .footer-main { z-index: 999; height: 62px; background: url(/img/Subtract.svg) center;     /* 가운데 고정 */ background-repeat: repeat-x; background-size: contain; }
#app .footer-main > div { position: relative; width: 100%; height: 100%; }
#app .footer-main > div .footer-ball { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); }
#app .footer-main > div .container { display: flex;     /* Flexbox 사용 */ width: 100%;     /* 전체 화면에 맞춤 */ height: 100%;     /* 원하는 높이 설정 */ }
#app .footer-main > div .side { flex: 1;     /* 남은 공간을 양쪽에 1:1 비율로 나눔 */ }
#app .footer-main > div .center { width: 105px;     /* 가운데 고정 크기 */ }
#app .footer-main > div .side ul { display: grid; grid-template-columns: repeat(2, 1fr); height: 100%; align-items: center; justify-content: center; }
#app .footer-main > div .side a { display: flex; justify-content: center; flex-direction: column; align-items: center; grid-gap: 10px; color: #fff; font-size: 12px; }

#app .footer-main > div .footer-ball{
    transition: transform 0.5s ease;
}

#app .footer-main > div .footer-ball.rotated {
    transform: translateX(-50%) rotate(360deg);
}

#app .footer-main.new{
    /* background: none; */
    border-top: 1px solid var(--Line-Normal-Neutral, rgba(112, 115, 124, 0.16));
    background: var(---primary, #0D3D48);
    height: auto;
    padding: ;
}

#app .footer.new > ul{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
    padding: 7px 0;
}

#app .footer.new > ul > li > a{
    display: flex;
    flex-direction: column;
    color: #fff;
    grid-gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#app .footer.new > ul > li > a p{
    font-size: 10px;
}

button { background-color: transparent; border: none; }

/* 공통 버튼 */
.cmn_tab_btn { color: var(--gray-80, #282D2F); font-size: 12px; font-weight: 500; padding: 6px 8px; border-radius: 1000px; border: 1px solid var(--gray-20, #E1E6E8); display: flex; justify-content: center; align-items: center; }
.cmn_tab_btn.on { border-radius: 1000px; border: 1px solid var(--gray-20, #E1E6E8); background: var(--gray-80, #282D2F); color: #fff; }

.cmn_copy_btn { color: #FFF; text-align: center; font-size: 12px; font-weight: 400; display: flex; justify-content: center; align-items: center; padding: 2px 3px; background-color: #AEB8BC; border-radius: 3px; line-height: 1; cursor: pointer; }

.cmn_qty_box { display: flex; width: 84px; height: 30px; padding: 0px 10px; justify-content: space-between; align-items: center; border-radius: 99px; border: 1px solid var(--gray-20, #E1E6E8); }
.cmn_qty_box > span { color: #212B34; text-align: center; font-size: 14px; font-weight: 500; }
.cmn_qty_box > button { width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; }

.cmn_reservation_btn { display: flex; height: 50px; width: 100%; padding: 14px 8px; justify-content: center; align-items: center; background: #FFF; border-radius: 10px; border: 1px solid var(--Enford-Main-Color, #0D3D48); color: var(---primary, var(--Enford-Main-Color, #0D3D48)); font-size: 16px; font-weight: 600; }

.cmn_delete_btn { display: flex; padding: 4px 9px; justify-content: center; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid #DFE4EA; color: var(--gray-90, #172225); font-size: 12px; font-style: normal; font-weight: 500; }

.cmn_order_btn { display: flex; width: 100%; padding: 14px 8px; justify-content: center; align-items: center; color: #FFF; border-radius: 10px; background: var(--Enford-Main-Color, #0D3D48); font-size: 16px; font-weight: 600; }



.cmn_checkbox { display: inline-block; position: relative; cursor: pointer; }
.cmn_checkbox > div { display: flex; position: relative; cursor: pointer; align-items: center; justify-content: flex-start; grid-gap:8px}
.cmn_checkbox .cmn_checkbox_chk { position: absolute; opacity: 0; cursor: pointer; width: 0; height: 0; }
.cmn_checkbox .cmn_checkmark { width: 24px; height: 24px; background-image: url('/img/platform/unchecked.svg'); display: inline-block; transition: background-image 0.3s; }
.cmn_checkbox .cmn_checkbox_chk:checked + .cmn_checkmark { background-image: url('/img/platform/checked.svg'); }
.cmn_checkbox .cmn_checkbox_text { color: var(--gray-90, #172225); font-size: 14px; font-weight: 500; }


.cmn_icon_btn { display: flex; height: 29px; padding: 0px 6px; align-items: center; gap: 2px; border-radius: 23px; border: 1px solid #99ADB2; color: var(---primary, #0D3D48); text-align: center; font-size: 12px; font-style: normal; font-weight: 400; }




/* 공통 레이아웃 */


.cmn_custom_details { background-color: #fff; border-radius: 10px;}
.cmn_custom_details summary { display: flex; padding: 20px 10px; justify-content: space-between; align-items: center; color: var(--gray-90, #172225); font-size: 16px; font-weight: 600; }
.cmn_custom_details summary .title { width: 100%; flex: 1; }
.cmn_custom_details summary .icon { width: 20px; transition: transform 0.3s ease;}
.cmn_custom_details[open] summary .icon { transform: rotate(180deg); }
.cmn_custom_details > div { border-top: 1px solid #ECEFF4; padding: 20px 10px; color: #323232; font-size: 14px; font-weight: 400; line-height: 130%; white-space: pre-line; word-break: keep-all; }

.cmn_opt_box { width: 100%; padding: 14px 12px 12px 12px; border-radius: 10px; background: var(--gray-10, #FFF); }
.cmn_opt_box > .title { color: var(--gray-90, #172225); font-size: 16px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid #172225;width: 100%; }
.cmn_opt_box > .opt_list { padding-top: 12px; display: flex; flex-direction: column; grid-gap: 12px; }
.cmn_opt_box > .opt_list > div { display: flex; justify-content: space-between; align-items: center; grid-gap: 20px;}
.cmn_opt_box > .opt_list > div .custom-radio input[type="radio"] { display: none; }
.cmn_opt_box > .opt_list > div .custom-radio { display: flex; align-items: center; cursor: pointer; flex: 1; width: 100%; }
.cmn_opt_box > .opt_list > div .radio-label { color: var(--gray-90, #172225); font-size: 16px; font-weight: 400; display: flex; align-items: center; line-height: 1; flex: 1; }
.cmn_opt_box > .opt_list > div .custom-radio .radio-label::before { content: ""; width: 22px; min-width: 22px; height: 22px; border: 2px solid #000; border-radius: 50%; display: inline-block; margin-right: 8px; box-sizing: border-box; }
.cmn_opt_box > .opt_list > div .custom-radio input[type="radio"]:checked + .radio-label::before { background-color: #000; border-color: #000; box-shadow: inset 0 0 0 4px white; }
.cmn_opt_box > .opt_list > div > .price { color: var(--gray-90, #172225); font-size: 16px; font-weight: 600; line-height: 1;}

.cmn_round_box { padding: 16px; border-radius: 10px; background: #FFF; }

.cmn_orderbox { padding: 20px 2rem; background-color: #fff; }
.cmn_orderbox > .price_list { display: flex; flex-direction: column; grid-gap: 10px; padding-bottom: 10px;}
.cmn_orderbox > .price_list > div { display: flex; align-items: center; justify-content: space-between; }
.cmn_orderbox > .price_list > div > span:first-child { color: #1C1C1E; font-size: 14px; font-weight: 400; }
.cmn_orderbox > .price_list > div > span:last-child { color: #222; font-size: 16px; font-weight: 600; }
.cmn_orderbox > .price_list > div > span.discount { color: #FA6230; }
.cmn_orderbox > .total_price_box { display: flex; align-items: center; padding: 10px 0; justify-content: space-between; border-top: 1px solid #ECEFF4; }
.cmn_orderbox > .total_price_box > span:first-child { color: #1C1C1E; font-size: 14px; font-weight: 400; }
.cmn_orderbox > .total_price_box > span:last-child { color: #222; font-size: 22px; font-style: normal; font-weight: 700; }

.cmn_order_btn_box { display: flex; padding: 10px 2rem; background-color: #fff; flex-direction: column; grid-gap: 8px; box-shadow: 0px 0px 7px 0px rgba(143, 175, 183, 0.30); }
.cmn_order_btn_box > div { color: #868F98; font-size: 12px; font-style: normal; font-weight: 600; text-align: center;}
.cmn_order_btn_box > div span { color: #E46A41; }



.cmn_input { display: flex; height: 38px; width: 100%; padding: 8px 10px; align-items: center; gap: 8px; align-self: stretch; border-radius: 4px; border: 1px solid var(--gray-20, #E1E6E8); background: #FFF; color: var(--gray-70, #40474A); font-size: 14px; font-weight: 400; }


  
/* 버거 */
.burger { position: relative; width: 24px; height: 24px; padding: 0; border: none; background-color: transparent; }
.burger__bar { height: 2px; border-radius: 0; width: 18px; background-color: white; display: block; position: absolute; left: 50%; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.burger__bar:nth-child(1) { top: 15%; transform: translate(-50%, 0%); }
.burger__bar:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
.burger__bar:nth-child(3) { bottom: 15%; transform: translate(-50%, 0%); }
.burger.close .burger__bar { animation-direction: reverse; }
.burger.open .burger__bar { -webkit-animation-direction: normal; animation-direction: normal; }
.burger.animate .burger__bar { -webkit-animation-play-state: running; animation-play-state: running; }
.burger.animate .burger__bar:nth-child(1) { -webkit-animation-name: default-top; animation-name: default-top; }
.burger.animate .burger__bar:nth-child(2) { -webkit-animation-name: default-middle; animation-name: default-middle; }
.burger.animate .burger__bar:nth-child(3) { -webkit-animation-name: default-bottom; animation-name: default-bottom; }
.burger--merge.animate .burger__bar { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-timing-function: ease; animation-timing-function: ease; }
.burger--merge.animate .burger__bar:nth-child(1) { -webkit-animation-name: merge-top; animation-name: merge-top; }
.burger--merge.animate .burger__bar:nth-child(2) { -webkit-animation-name: merge-middle; animation-name: merge-middle; }
.burger--merge.animate .burger__bar:nth-child(3) { -webkit-animation-name: merge-bottom; animation-name: merge-bottom; }
.burger--rotate.animate .burger__bar:nth-child(1) { -webkit-animation-name: rotate-top; animation-name: rotate-top; }
.burger--rotate.animate .burger__bar:nth-child(2) { -webkit-animation-name: rotate-middle; animation-name: rotate-middle; }
.burger--rotate.animate .burger__bar:nth-child(3) { -webkit-animation-name: rotate-bottom; animation-name: rotate-bottom; }
.burger--spin.animate .burger__bar { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; }
.burger--spin.animate .burger__bar:nth-child(1) { -webkit-animation-name: spin-top; animation-name: spin-top; }
.burger--spin.animate .burger__bar:nth-child(2) { -webkit-animation-name: spin-middle; animation-name: spin-middle; }
.burger--spin.animate .burger__bar:nth-child(3) { -webkit-animation-name: spin-bottom; animation-name: spin-bottom; }
@-webkit-keyframes default-top {
50% { top: 50%; transform: translate(-50%, -50%) rotate(0); }
100% { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
}
@keyframes default-top {
50% { top: 50%; transform: translate(-50%, -50%) rotate(0); }
100% { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
}
@-webkit-keyframes default-middle {
50%, 100% { visibility: hidden; }
}
@keyframes default-middle {
50%, 100% { visibility: hidden; }
}
@-webkit-keyframes default-bottom {
50% { bottom: 50%; transform: translate(-50%, -50%) rotate(0deg); }
100% { bottom: 50%; transform: translate(-50%, 50%) rotate(45deg); }
}
@keyframes default-bottom {
50% { bottom: 50%; transform: translate(-50%, -50%) rotate(0deg); }
100% { bottom: 50%; transform: translate(-50%, 50%) rotate(45deg); }
}



#top_hd_cart_count { position: absolute; top: -6px; right: -6px; display: flex; justify-content: center; align-items: center; background-color: #30FFDA; border-radius: 50%; font-size: 12px; line-height: 1; font-weight: 500; color: #0D3D48; width: 16px; height: 16px; }
#top_hd_cart_count:empty { display: none;     /* 내용이 없으면 숨김 */ }






#main_ball_div { position: absolute; bottom: -100%;     /* 화면 밖으로 숨김 */ left: 0; background-color: #041D22; transition: bottom 0.3s ease;     /* 애니메이션 */ z-index: 10; display: flex; width: 100%; height: auto; padding: 20px 2rem 100px; flex-direction: column; align-items: center; gap: 30px; border-radius: 16px 16px 0px 0px; }
#main_ball_div.active { bottom: 0;     /* 화면에 보이게 */ }
#main_ball_div ul { display: grid; grid-gap: 3px; grid-template-columns: repeat(4, 1fr); width: 100%; }
#main_ball_div ul a { width: 100%; height: 135px; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 16px; }
#main_ball_div ul a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
#main_ball_div ul a p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 14px; font-weight: 400; width: 100%; text-align: center; }

body{
    background: url(/img/platform_bg.jpg) center no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body > div{
    width: 100%;
}

@media (max-width:900px) {
body{
    display: flex;
    justify-content: center;
}
body > div{
    display: none;
}

body  #app{
    display: block;
}
}