@charset "utf-8";

:root {
    --main-color: #EE2B4B;
    --radius: 16px;
    --transition: 0.2s ease;
}
input[type="checkbox"] + label:before {top:50%;transform:translateY(-50%)}
input[type="checkbox"] + label:after {top:50%;transform:translateY(-50%) rotate(45deg);}
:where(select, label) {cursor:pointer;}
::placeholder {color:#ccc;}
.btn_top {position: fixed;right: 30px;bottom: 30px;background: var(--main-color);color: #fff;border-radius: 50%;width: 54px;height: 54px;display: flex;align-items: center;justify-content: center;font-size: 28px;z-index: 999;}

header {display: flex;justify-content: center;align-items: center;padding: 20px 0;max-width:960px;margin:10px auto;}
header h1 {font-size: 30px;font-weight: 700;}
header h1 span {color:var(--main-color);}
header .utile button {background:var(--main-color);color:#fff;border:none;padding: 8px 16px;border-radius: 8px;}
header .my_btn_wrap {position:absolute;top:0;right:0;}
html {scroll-behavior: smooth;}
body {font-size:16px;}
section {position:relative;}
#sec01 {border-radius:var(--radius);overflow:hidden;}
#sec01 .img_wrap {width:100%;height:auto;aspect-ratio: 16 / 9;}
#sec01 .swiper-slide {width:100%;height:100%;}
#sec01 .swiper-slide :where(img, video) {width:100%;height:100%;object-fit: cover;}
#sec01 .text_wrap {background:rgba(0,0,0,0.3);color:#fff;width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px;}
#sec01 .text_wrap h2 {font-size:60px;font-weight:600;}
#sec01 .text_wrap h2 + p {font-size:16px;font-weight:100;}
#sec01 .text_wrap a {display:block;padding:10px 20px;background:var(--main-color);color:#fff;border-radius:calc(var(--radius)/2);font-size:16px;}

#sec02 {margin-top:50px;}
#sec02 .tab_menu {display:flex;gap:10px;margin:20px 0 20px 0;flex-wrap:wrap;}
#sec02 .tab_menu a {display:block;background:#F3E7E9;padding:8px 16px;border-radius:100px;transition:var(--transition)}
#sec02 .tab_menu .active a {background:var(--main-color);color:#fff;}
#sec02.search_mode .tab_menu {display:none;}
#sec02 .tab_view {display:none;}
#sec02 .tab_view.active {display:block;}
#sec02.search_mode .tab_view_wrap {display:none;}
#sec02 .search_result_wrap ul {display:flex;gap:20px 10px;flex-wrap:wrap;}
#sec02 .search_result_wrap ul li {flex:0 0 calc(33.33% - (20px / 3));}
#sec02 .search_result_wrap ul li .img_wrap {border-radius:var(--radius);overflow:hidden;aspect-ratio: 1 / 1;position:relative;}
#sec02 .search_result_wrap ul li .img_wrap img {width:100%;height:100%;object-fit: cover;}
#sec02 .search_result_wrap ul li .text_wrap {margin-top:10px;}
#sec02 .search_result_wrap ul li .text_wrap .text01 {font-size:18px;font-weight:600;}
#sec02 .search_result_wrap ul li .text_wrap .text01 span {color:#aaa;float:right;}
#sec02 .search_result_wrap ul li .text_wrap .text02 {color:#BA848D;margin-top:8px;}
#sec02 .search_result_wrap ul li .text_wrap .text03 {color:#BA848D;margin-top:8px;font-weight:600;}
#sec02 .tab_view ul {display:flex;gap:20px 10px;flex-wrap:wrap;}
#sec02 .tab_view ul li {flex:0 0 calc(33.33% - (20px / 3));}
#sec02 .tab_view ul li .img_wrap {border-radius:var(--radius);overflow:hidden;aspect-ratio: 1 / 1;position:relative;}
#sec02 .tab_view ul li .img_wrap img {width:100%;height:100%;object-fit: cover;}
#sec02 .tab_view ul li .text_wrap {margin-top:10px;}
#sec02 .tab_view ul li .text_wrap .text01 {font-size:18px;font-weight:600;}
#sec02 .tab_view ul li .text_wrap .text01 span {color:#aaa;float:right;}
#sec02 .tab_view ul li .text_wrap .text02 {color:#BA848D;margin-top:8px;}
#sec02 .tab_view ul li .text_wrap .text03 {color:#BA848D;margin-top:8px;font-weight:600;}
#sec02 .spicy {position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,0.6);border-radius:100px;color:var(--main-color);display:flex;gap:4px;padding:2px 8px;text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;}
#sec02.spicy_active :where(.tab_view, .search_result_wrap) li {display:none;}
#sec02.vegetarian_active :where(.tab_view, .search_result_wrap) li {display:none;}
#sec02.spicy_active :where(.tab_view, .search_result_wrap) li.spicy_view {display:block;}
#sec02.vegetarian_active :where(.tab_view, .search_result_wrap) li.vegetarian_view {display:block;}

#sec03 {margin-top:50px;}
#sec03 .swiper-wrapper {transition-timing-function: linear !important;}
#sec03 .swiper-slide {padding: 20px;border-radius: 8px;border: 1px solid #ddd;}
#sec03 .flex_wrap {display:flex;gap:20px;}
#sec03 .flex_wrap .user {display:flex;justify-content:center;align-items:center;width:40px;height:40px;border-radius:100%;background:#eee;color:#ccc;font-size:20px;}
#sec03 .flex_wrap .text_wrap {font-size:16px;}
#sec03 .flex_wrap .rating_stars {color:var(--main-color);}
#sec03 .flex_wrap + p {margin-top:20px;color:#666;font-size:16px;line-height:1.2;word-break:keep-all;}

#sec04 h2 {font-size:30px;font-weight:600;margin:50px 0 20px 0;text-align:center;}
#sec04 .flex_box_wrap {display:flex;gap:30px;}
#sec04 > .w100 {margin-bottom:30px;}
#sec04 .input_wrap {flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;margin-bottom:30px;}
#sec04 .input_wrap > input {flex:auto;width:100%;}
#sec04 :where(input[type=text], #datetime, select, textarea) {height: 40px;padding: 5px 10px;border-radius: 8px;border: 1px solid #ddd;width:100%;}
#sec04 :where(input[type=text], #datetime, select, textarea).input-error {border-color:#ff6b35;}
#sec04 textarea {height:150px;}
#sec04 .checkbox_wrap {margin-top:8px;}
#sec04 .checkbox_wrap input[type=checkbox] {margin:0;}
#sec04 .error_tooltip {display:flex;align-items:center;gap:8px;position:absolute;top:100%;left:0;margin-top:4px;z-index:10;}
#sec04 .error_tooltip i {color:#ff6b35;font-size:20px;flex-shrink:0;}
#sec04 .error_tooltip .tooltip_text {background:#fff;padding:8px 12px;border-radius:6px;font-size:14px;color:#333;box-shadow:0 2px 8px rgba(0,0,0,0.1);white-space:nowrap;}
#sec04 .btn_feedback {text-align:center;margin:30px 0;}
#sec04 .btn_feedback button {background:var(--main-color);color:#fff;border:none;padding: 8px 50px;border-radius: 8px;}

/* 이미지 레이어 팝업 */
.image_popup {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;}
.image_popup.active {display:flex;justify-content:center;align-items:center;}
.popup_overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);cursor:pointer;}
.popup_content {position:relative;max-width:90%;max-height:90%;z-index:10000;}
.popup_content img {max-width:100%;max-height:90vh;object-fit:contain;border-radius:var(--radius);}
.popup_close {position:absolute;top:-40px;right:0;background:transparent;border:none;color:#fff;font-size:30px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.popup_close:hover {transform:scale(1.2);}
#sec02 .tab_view ul li .img_wrap {cursor:pointer;}

/* 추천 메뉴 팝업 */
.recommended_menu_popup {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;}
.recommended_menu_popup.active {display:flex;justify-content:center;align-items:center;}
.recommended_menu_popup .popup_content {position:relative;max-width:600px;width:90%;background:#fff;border-radius:var(--radius);padding:40px;z-index:10000;max-height:90vh;overflow-y:auto;}
.recommended_menu_popup .popup_content h3 {font-size:28px;font-weight:600;text-align:center;margin-bottom:30px;color:var(--main-color);}
.recommended_menu_popup .recommended_filter_wrap {display:flex;flex-direction:column;gap:15px;margin-bottom:30px;padding:20px;background:#f9f9f9;border-radius:var(--radius);}
.recommended_menu_popup .recommended_filter_wrap .checkbox_wrap {display:flex;align-items:center;gap:8px;}
.recommended_menu_popup .recommended_filter_wrap .checkbox_wrap input[type="checkbox"] {width:18px;height:18px;cursor:pointer;}
.recommended_menu_popup .recommended_filter_wrap .checkbox_wrap label {cursor:pointer;font-size:16px;}
.recommended_menu_popup .recommended_filter_wrap .btn_get_recommendation {background:var(--main-color);color:#fff;border:none;padding:12px 24px;border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:var(--transition);margin-top:10px;}
.recommended_menu_popup .recommended_filter_wrap .btn_get_recommendation:hover {background:#d6203d;transform:translateY(-2px);box-shadow:0 4px 12px rgba(238,43,75,0.3);}
.recommended_menu_popup .recommended_menu_wrap {display:flex;flex-direction:column;gap:20px;}
.recommended_menu_popup .recommended_menu_wrap .img_wrap {position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;}
.recommended_menu_popup .recommended_menu_wrap .img_wrap img {width:100%;height:100%;object-fit:cover;}
.recommended_menu_popup .recommended_menu_wrap .img_wrap .spicy {position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,0.6);border-radius:100px;color:var(--main-color);display:flex;gap:4px;padding:2px 8px;text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;}
.recommended_menu_popup .recommended_menu_wrap .text_wrap {text-align:center;}
.recommended_menu_popup .recommended_menu_wrap .text_wrap .text01 {font-size:24px;font-weight:600;margin-bottom:10px;}
.recommended_menu_popup .recommended_menu_wrap .text_wrap .text01 span {color:#aaa;margin-left:10px;}
.recommended_menu_popup .recommended_menu_wrap .text_wrap .text02 {color:#BA848D;margin-bottom:10px;line-height:1.6;}
.recommended_menu_popup .recommended_menu_wrap .text_wrap .text03 {color:#BA848D;font-weight:600;font-size:20px;}
.recommended_menu_popup .popup_close {color:#333;}

footer {display:flex;flex-direction:column;gap:10px;padding:30px 0;margin-top:30px;border-top:1px solid #ddd;text-align:center;color:#888}

@media all and (max-width: 768px) {
    #sec01 .img_wrap {aspect-ratio: 4 / 3;}
    #sec01 .text_wrap h2 {font-size:50px;}
    #sec02 .tab_view ul li {flex:0 0 calc(50% - 10px)}
    #sec02 .tab_menu li {flex:auto;text-align:center;}
}
@media all and (max-width: 600px) {
    #sec01 .text_wrap h2 {font-size:8vw;}
    #sec03 .box ul {gap:0;}
    #sec03 .box ul li {flex:100%;border-bottom:1px solid #ddd;margin-bottom:20px;padding-bottom:20px;}
    #sec03 .box ul li:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0;}
    #sec04 .flex_box_wrap {flex-wrap:wrap;}
    #sec04 .input_wrap {flex:100%;}
}

@media all and (max-width: 480px) {

    :root {
        --radius: 3.3333vw;
    }
    .btn_top {width:11.25vw;height:11.25vw;font-size:5.8vw;right:6.25vw;bottom:6.25vw;}
    #wrap {padding-bottom:10.4167vw;padding:0 4.1667vw;font-size:3.3333vw;}
    header {padding: 4.1667vw 0;margin:2.0833vw auto;}
    header h1 {font-size: 6.25vw;}
    header .utile button {padding: 1.6667vw 3.3333vw;border-radius: 1.6667vw;}

    #sec01 .text_wrap h2 + p {font-size:3.3333vw;}
    #sec01 .text_wrap .input_wrap {margin-top:6.25vw;width:83.3333vw;}
    #sec01 .text_wrap .input_wrap i {margin:0 2.0833vw 0 4.1667vw;}
    #sec01 .text_wrap .input_wrap button {padding: 1vw 3vw;border-radius: 1.6667vw;margin:2.0833vw;}
    #sec01 .search_checkbox_wrap .checkbox_wrap {padding:0.8333vw 4.1667vw;gap:0.8333vw;}

    #sec02 {margin-top:10.4167vw;}
    #sec02 .tab_menu {gap:2.0833vw;margin:4.1667vw 0;}
    #sec02 .tab_menu a {padding:1.6667vw 3.3333vw;border-radius:20.8333vw;}
    #sec02 .search_result_wrap ul {gap:4.1667vw 2.0833vw;}
    #sec02 .search_result_wrap ul li {flex:0 0 calc(33.33% - (4.1667vw / 3));}
    #sec02 .search_result_wrap ul li .text_wrap {margin-top:2.0833vw;}
    #sec02 .search_result_wrap ul li .text_wrap .text01 {font-size:3.75vw;}
    #sec02 .search_result_wrap ul li .text_wrap .text02,
    #sec02 .search_result_wrap ul li .text_wrap .text03 {margin-top:1.6667vw;}

    #sec02 .tab_view ul {gap:4.1667vw 2.0833vw;}
    #sec02 .tab_view ul li {flex:0 0 calc(50% - (2.0833vw / 2));}
    #sec02 .tab_view ul li .text_wrap {margin-top:2.0833vw;}
    #sec02 .tab_view ul li .text_wrap .text01 {font-size:3.75vw;}
    #sec02 .tab_view ul li .text_wrap .text02,
    #sec02 .tab_view ul li .text_wrap .text03 {margin-top:1.6667vw;}

    #sec02 .spicy {right:2.0833vw;bottom:2.0833vw;gap:0.8333vw;padding:2px 1.6667vw;}

    #sec03 .recommended_menu_btn_wrap {margin-bottom:6.25vw;}
    #sec03 .btn_recommended_menu {padding:2.5vw 5vw;font-size:3.5vw;gap:1.6667vw;}
    #sec03 .btn_recommended_menu i {font-size:4.1667vw;}
    #sec03 h2 {font-size:6.25vw;margin:10.4167vw 0 4.1667vw 0;}
    #sec03 h3 {font-size:3.75vw;margin-bottom:4.1667vw;}
    #sec03 .box {padding:6.25vw;}
    #sec03 .box ul li {margin-bottom:4.1667vw;padding-bottom:4.1667vw;}

    #sec04 h2 {font-size:6.25vw;margin:10.4167vw 0 4.1667vw 0;}
    #sec04 .flex_box_wrap {gap:6.25vw;margin-bottom:6.25vw;}
    #sec04 :where(input[type=text], #datetime, select, textarea) {height: 8.3333vw;padding: 1.0417vw 2.0833vw;border-radius: 1.6667vw;}
    #sec04 textarea {height:31.25vw;}
    #sec04 input[type=checkbox] + label {margin-top:1.6667vw;}
    #sec04 input[type=checkbox] + label::before {margin-right:0.8333vw;}
    #sec04 .btn_feedback {margin:6.25vw 0;}
    #sec04 .checkbox_wrap input[type=checkbox] {width:2.7vw;height:2.7vw;}

    .popup_close {top:-8.3333vw;font-size:6.25vw;width:8.3333vw;height:8.3333vw;}

    .recommended_menu_popup .popup_content {padding:6.25vw;max-width:90%;}
    .recommended_menu_popup .popup_content h3 {font-size:5.5vw;margin-bottom:6.25vw;}
    .recommended_menu_popup .recommended_filter_wrap {gap:3.3333vw;padding:4.1667vw;margin-bottom:6.25vw;}
    .recommended_menu_popup .recommended_filter_wrap .checkbox_wrap input[type="checkbox"] {width:4.1667vw;height:4.1667vw;}
    .recommended_menu_popup .recommended_filter_wrap .checkbox_wrap label {font-size:3.5vw;}
    .recommended_menu_popup .recommended_filter_wrap .btn_get_recommendation {padding:2.5vw 5vw;font-size:3.5vw;margin-top:2.0833vw;}
    .recommended_menu_popup .recommended_menu_wrap {gap:4.1667vw;}
    .recommended_menu_popup .recommended_menu_wrap .text_wrap .text01 {font-size:4.5vw;margin-bottom:2.0833vw;}
    .recommended_menu_popup .recommended_menu_wrap .text_wrap .text02 {margin-bottom:2.0833vw;font-size:3.5vw;}
    .recommended_menu_popup .recommended_menu_wrap .text_wrap .text03 {font-size:4.1667vw;}

}