@charset "utf-8";
/* 기본설정 */
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
a {
    color: inherit;
}

/* ============================
   공통 / PC
============================ */
.header ul { list-style: none; margin: 0; padding: 0; }

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    padding: 0 9%;
    background: rgba(255,255,255,0.8);
    z-index: 10101;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.header .logo {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 150px;
    height: 85px;
    display: flex;
    align-items: center;
}
.header .logo a { display: block; width: 100%; }
.header .logo img { display: block; width: 100%; }

.gnb1 { display: flex; height: 85px; }

.gnb_Title {
    position: relative;
    height: 85px;
    padding: 0 36px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}
/* 메뉴별 배경색 */
.gnb_Title:nth-child(1) { --c: #D29C64; }
.gnb_Title:nth-child(2) { --c: #B97A7A; }
.gnb_Title:nth-child(3) { --c: #D2B258; }
.gnb_Title:nth-child(4) { --c: #699173; }
.gnb_Title:nth-child(5) { --c: #7E7463; }

.gnb_Title > span {
    display: block;
    font-family: "Marcellus", serif;
    line-height: 85px;
    font-size: 19px;
    color: var(--main-brown);
    white-space: nowrap;
}
/* v 화살표 */
.gnb_Title > span::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    position: relative;
    top: -3px;
    transition: transform .3s, top .3s;
}

/* 서브메뉴 */
ul.gnb2 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 8px 0 16px;
    background: var(--c);
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s linear .3s;
}
.gnb2 li a {
    position: relative;        
    display: inline-block;     
    padding: 6px 4px;
    color: #fff;
    font-size: 17px;
    letter-spacing: 0.05em;
    line-height: 1.5;
    /* white-space: nowrap; */
}
/* 가운데에서 양쪽으로 늘어나는 밑줄 */
.gnb2 li a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 0;
    height: 1px;
    background: #fff;
    transform: translateX(-50%);
    transition: width .3s ease;
}

/* 토글버튼 (PC에서는 숨김) */
.nav_toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 36px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.nav_toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #7E7463;
    transition: all .3s ease-in-out;
}
.nav_toggle span:nth-child(1) { top: 2px; }
.nav_toggle span:nth-child(2) { top: 12px; }
.nav_toggle span:nth-child(3) { top: 22px; }

/* 열렸을 때: 가운데 줄은 사라지고 위/아래 줄이 X로 */
.nav_toggle.active span:nth-child(1) { top: 50%; transform: rotate(30deg); }
.nav_toggle.active span:nth-child(2) { opacity: 0; }
.nav_toggle.active span:nth-child(3) { top: 50%; transform: rotate(-30deg); }

body.menu-open { overflow: hidden; }

/* PC : 호버 */
@media (min-width: 1201px) {
    .gnb_Title:hover {
        background: var(--c);
    }
    .gnb_Title:hover span {
        color: #fff;
    }
    
    .gnb_Title:hover > span::after {
        transform: rotate(-135deg);
        top: 1px;
    }
    .gnb_Title:hover .gnb2 {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .gnb2 li a:hover::after {
        width: 100%;
    }
}

/* ============================
   모바일 (전체화면 메뉴)
============================ */
@media (max-width: 1200px) {
    .header {
        height: 70px;
        padding: 0 20px;
        align-items: center;
        background: #fff;
    }
    .header .logo { width: 115px; height: 70px; }
    .nav_toggle { display: block; }

    .gnb {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 90px;
        background: #fff;
        overflow-y: auto;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s ease-in-out, visibility 0s linear .4s;
    }
    .gnb.active {
        opacity: 1;
        visibility: visible;
        transition: opacity .4s ease-in-out, visibility 0s linear 0s;
    }

    .gnb1 { display: block; height: auto; }

    .gnb_Title {
        height: auto;
        padding: 0;
        margin-bottom: 8px;
        text-align: center;
    }
    .gnb_Title > span {
        line-height: 80px;
        font-size: 28px;
        letter-spacing: .05em;
    }
    .gnb_Title > span::after {
        width: 12px;
        height: 12px;
        margin-left: 14px;
        top: -4px;
    }

    /* 서브메뉴 아코디언 */
    ul.gnb2 {
        position: static;
        width: auto;
        padding: 0;
        background: none;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease-in-out;
    }
    .gnb2 li:last-child { margin-bottom: 18px; }
    .gnb2 li a {
        padding: 9px 0;
        font-size: 17px;
    }

    /* 열린 메뉴 */
    .gnb_Title.active {
        background: var(--c);
    }
    .gnb_Title.active > span {
        color: #fff;
    }
    .gnb_Title.active > span::after {
        transform: rotate(-135deg);
        top: 2px;
    }
    .gnb_Title.active .gnb2 { max-height: 300px; }
}

@media (max-width: 768px) {
    .header { height: 60px; }
    .header .logo { width: 100px; height: 60px; }
    .gnb { padding-top: 80px; }
    .gnb_Title > span { line-height: 72px; font-size: 28px; }
    .gnb2 li a { font-size: 17px; }
}