@import url(basic.css);

/*aurora */
:root {
  --bg: #b6b3b3;
  --clr-1: #00c2ff;
  --clr-2: #33ff8c;
  --clr-3: #ffc640;
  --clr-4: #e54cff;

  --blur: 1rem;
  --fs: clamp(3rem, 8vw, 7rem);
  --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

body {
  display: grid;
  place-items: center;
  background-color: var(--bg);
}


.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: darken;
  pointer-events: none;
}

.aurora__item {
  overflow: hidden;
  position: absolute;
  width: 60vw;
  height: 60vw;
  background-color: var(--clr-1);
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  filter: blur(var(--blur));
  mix-blend-mode: overlay;
}

.aurora__item:nth-of-type(1) {
  top: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
  background-color: var(--clr-3);
  right: 0;
  top: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
  background-color: var(--clr-2);
  left: 0;
  bottom: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
  background-color: var(--clr-4);
  right: 0;
  bottom: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
  0% {
    top: 0;
    right: 0;
  }

  50% {
    top: 100%;
    right: 75%;
  }

  75% {
    top: 100%;
    right: 25%;
  }

  100% {
    top: 0;
    right: 0;
  }
}

@keyframes aurora-2 {
  0% {
    top: -50%;
    left: 0%;
  }

  60% {
    top: 100%;
    left: 75%;
  }

  85% {
    top: 100%;
    left: 25%;
  }

  100% {
    top: -50%;
    left: 0%;
  }
}

@keyframes aurora-3 {
  0% {
    bottom: 0;
    left: 0;
  }

  40% {
    bottom: 100%;
    left: 75%;
  }

  65% {
    bottom: 40%;
    left: 50%;
  }

  100% {
    bottom: 0;
    left: 0;
  }
}

@keyframes aurora-4 {
  0% {
    bottom: -50%;
    right: 0;
  }

  50% {
    bottom: 0%;
    right: 40%;
  }

  90% {
    bottom: 50%;
    right: 25%;
  }

  100% {
    bottom: -50%;
    right: 0;
  }
}

@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }

  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
  }

  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
  }

  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
  }

  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
}

/*footer 개별 스타일*/
footer, body{
        background: #FEC80E;
    }
    main{background: #fff;}
    
    .footer_input03{
        background: #FFF4CD;
    }
    .footer_object{
        width: 200px;
        height: 200px;
        position: absolute;
        top: -150px;
        right: 0;
        background: url(images/icon/footer/main_footerIMG.svg)no-repeat 0 0;
        background-size: 100%;
    }

/*모바일 콘텐츠*/
.viewmanu_mobileBG{
    display: none;
}

    /*01-hero*/
    .main_01_hero{
        width: 100%;
        height: 150vh;
        max-height: 150vh;
        min-height: 150vh;
        padding: 0;
        background: url(images/main/hero_background_IMG1.png) no-repeat center center;
        background-size: cover;
        object-fit: cover;
        object-position: 50% 50%;
        background-attachment: fixed;
    }
    .hero{
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .hero_title{color: #fff;}
    .hero_subtitle{
        font-size: 1.5em;
        text-align: center;
        color: #fff;
    }
    .hero hgroup{
        margin-top: 25%;
        margin-bottom: 25%;
    }
    .hero hgroup p{
        font-size: 1..3em;
        font-weight: 600;
    }
    .hero_brandCopy{
        
        width: 100%;
        height: 600px; 
        position: relative;
        margin-top: auto;
        background: url(images/main/hero_background_IMG2.png)no-repeat 0 0;
        background-size: cover;
        border-radius: 50px 50px 0 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;
        padding: 0 20px;
        font-size: 4.17cqw !important;
        position: relative;
        line-height: 150px;
        z-index: 2;
        color: #fff;
    }
    .hero_brandCopy .aurora {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        mix-blend-mode: darken;
        pointer-events: none;
    }

    



    /*02-aboutbrand*/
    .aboutbrand{
        display: flex;
        gap: 45px;
        min-height: 650px;
        justify-content: space-between;
        position: relative;
    }
    .aboutbrand_left{
        flex-grow: 1;
        background: url(images/main/aboutbrand_left.png)no-repeat 0 0;
        background-size: cover;
        border-radius: 15px;
        height: 600px;
    }
    .aboutbrand_right{
        width: 60%; 
        display: flex;
        gap: 30px;
        flex-direction: column;
        justify-content: space-between;
        height: 600px;
    }
    
    .aboutbrand_title{
        color: #ff7AAA;
    }

    .aboutbrand_CTA{
        background: rgb(255, 158, 158);
    }
    .aboutbrand .btn{
        padding-top: 70px;
        text-align: right;
    }
    



    /*03viewmenu*/
    .main_03_viewmenu{
        padding-bottom: 350px;
    }

    .viewmenu_cards{
        position: relative; 
        height: max-content; 
        width: 100vw; 
        overflow: hidden;
    } 

    .viewmenu_cards ul{
        display: flex;
        width: max-content;
        gap: 30px;
    }

    .viewmenu_cards li{
        width: max-content;/*여백1/2까지 포함한 너비이어야 됨*/
    }
    .viewmenu_CTA{background: rgb(9, 255, 29)}
    .viewmenu .btn{text-align: right;}

    .track{
        display: flex;
    }
       



    /*05reservation*/
    .main_05_reservation{
        padding-top: 300px; 
    }

    .reservation_title{
        border-bottom: 1px black solid; 
        margin-bottom: 80px;
    }

    .reservation_cards{
        display: flex; 
        justify-content: space-between;
        width: 100%;
        height: max-content;
        gap: 30px;
    }

    .reservation_cards_store1,
    .reservation_cards_store2{
        display: flex;
        flex-direction: column;
        gap: 35px;
        max-width: 50%;
        height: max-content;
    }
    
    .reservation_CTA{background: #D10056; color: #fff;}
    .reservation .btn{text-align: right; padding-top: 100px;}














        
@media screen and (max-width: 1024px){


    /*hero*/

    .main_01_hero{
        height: 120vh !important;
        max-height: 120vh !important;
        min-height: 120vh !important;
    }

    .hero{
        height: 100%;
    }

    .hero_subtitle{
        font-size: 1.5em;
    }

    .hero hgroup{
        margin-top: 35vh !important;
    }

    .hero_brandCopy{
        width: 100%;
        height: 60vh !important;
        border-radius: 40px 40px 0 0;
        font-size: 5.37cqw !important;
    }







    /*aboutbrand*/
    .main_02_aboutbrand{padding: 70px 0 50px;}
    .aboutbrand{
        background: url(images/main/aboutbrand_left.png)no-repeat 0 0;
        background-size: cover;
        position: relative;
        min-height: 710px !important;
    }

    

    .aboutbrand_right{
        background: none;
        padding: 20px 20px;
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        height: max-content !important;
        top: 40px;
        right: 40px;
        gap: 10px !important;
        border-radius: 15px;
        min-width: 552px;
    }

    .aboutbrand .btn{
        padding-top: 110px !important;
    }


    


    /*viewmenu*/

    .main_03_viewmenu{
        padding-bottom: 150px !important;
        position: relative;
    }

    .viewmenu_cards{
        width: 100vw;
        height: max-content;
    }

    .viewmenu_cards ul{
        width: max-content;
        gap: 24px;
    }

    .viewmenu_cards li{
        width: max-content;
    }

    .viewmenu_cards img{
    width: 760px;          
    height: 60vh;
    object-fit: cover;
    }
    .viewmenu .btn{position: absolute; bottom: 150px; right: 60px;}






    /*05 RESERVATION */

    .main_05_reservation{
        padding-top: 130px !important;
    }

    .reservation_title{
        padding-bottom: 30px;
        margin-bottom: 64px;
    }

    .reservation_cards{
        flex-direction: column;
    }
    .reservation_cards img{
        max-height: 500px;
        object-fit: cover;
    }

    .reservation_cards_store1,
    .reservation_cards_store2{
        gap: 16px !important;
        max-width: 100% !important;
        height: max-content;
    }

    .reservation_cards_store1{
        padding-bottom: 70px;
        border-bottom: 1px solid gray;
    }
    .reservation_cards_store2{
        margin-top: 70px;
    }
    
    .reservation .btn{
        padding-top: 80px;
    }

}














@media screen and (max-width:768px){

    /* .inner{
        background: #ccc;
    } */

    /*footer개별 스타일*/
    .footer_object {
        width: 90px;
        height: 90px;
        top: -73px;
        background-position: 0 0;
        background: url(images/icon/footer/main_footerIMG.svg) no-repeat 0 0;
        background-size: 100%;
    }



    

    /*hero*/
    .hero{
        position: relative;
    }
    .main_01_hero{
        height: 125vh !important;
        max-height: 125vh !important;
        min-height: 125vh !important;
    }

    .hero_subtitle{
        font-size: 1.5em;
    }


    .hero_brandCopy{
        position: absolute;
        bottom: 0;
        border-radius: 8px 8px 0 0;
        font-size: 39px !important;
        line-height: 1.6;
        padding-bottom: 30px;
    }



    /*aboutbrand*/
    .main_02_aboutbrand{padding: 115px 0;}
    .aboutbrand{
        display: flex;
        gap: 45px;
        min-height: max-content !important;
        justify-content: space-between;
        position: relative;
        background: none;
    }

    .aboutbrand_left{
        display: none;
    }

    .aboutbrand_right{
        min-width: 100%;
        position: static;
        margin-left: 0;
        padding: 0;
        gap: 24px !important;
    }
    .aboutbrand_title{
        color: black;
        font-size: 20px;
        white-space: n;
    }
    .aboutbrand .btn{
        padding-top: 40px !important;
    }


    
    /*viewmenu*/
    
    .viewmenu_title span,
    .viewmenu_cards{
        display: none;
    }

    .main_03_viewmenu {
        padding-bottom: 0 !important;
        position: relative !important;
        padding-top: 0 !important;
    }
    .viewmenu_title {
        font-size: 17.2cqw;
        line-height: 1.2;
        text-align: center;
        margin: 0 !important;
        overflow: visible !important;
    }
    /* viewmenu 섹션 메인 컨테이너 */
    .main_03_viewmenu .viewmenu {
                width: 100% !important;
        margin: 0 !important;
        display: block;
        position: relative;
        height: auto;
    }

    /* 1. 하단 배경 (레이어 맨 아래: z-index 1) */
    .viewmanu_mobileBG {
        display: block;
        position: relative;
        z-index: 1;
    }
    .viewmanu_mobileBG > img {
        width: 100vw;
        display: block;
    }

    /* 2. 버튼 전체 컨테이너 (레이어 중간: z-index 5) */
    .viewmenu .btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* viewmenu 전체 높이를 덮음 */
        z-index: 5;
        pointer-events: none; /* 클릭 영역 투명화 (버튼 외 영역 터치 통과) */
        
        /* Flexbox로 버튼을 inner/viewmenu 기준 세로/가로 중앙에 초기 배치 */
        display: flex;
        justify-content: center;
        align-items: center; 
        margin: 0 !important;
    }

    /* 실제 고정되어 움직이는 CTA 버튼 */
    .viewmenu .btn .viewmenu_CTA {
        pointer-events: auto; /* 버튼만 클릭 가능하도록 복구 */
        position: sticky;
        top: 50vh; /* 화면(window) 중앙에 오면 고정 시작 */
        transform: translateY(-50%);
        background: #fff;
    }

    /* 3. 상단 덮개 bg2 (레이어 맨 위: z-index 10) */
    .viewmanu_mobileBG2 {
        position: absolute;
        background: url(images/mobile/main/viewmanu_mobileBG2.png) no-repeat 0 0;
        background-size: cover;
        width: 100vw;
        height: 300px;
        z-index: 10;
        left: 0;
        bottom: -1px;
        pointer-events: none; /* bg2 아래로 들어간 버튼 터치를 방해하지 않도록 처리 */
    }








    

    /*Reservation*/
    .reservation_cards{
        gap: 0;
    }
    
    .reservation_cards_store2{
        margin-top: 40px;
    }
    .reservation_cards_store1{
        padding-bottom: 30px;
        border:  none;
    }
    .reservation_title{
        padding-bottom: 8px;
        margin-bottom: 64px;
    }
}