/* Font Face */
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/assets/fonts/NanumSquareNeo-aLt.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/assets/fonts/NanumSquareNeo-bRg.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/assets/fonts/NanumSquareNeo-cBd.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/assets/fonts/NanumSquareNeo-dEb.ttf') format('truetype');
    font-weight: 700;
}

/* Global Variables */
:root {
    --phoenix-body-bg: #faf8f5;
    --phoenix-body-color: #272828;
    --phoenix-secondary:  #252525;
    --phoenix-secondary-rgb: 37, 37, 37;
    --phoenix-secondary-bg: #ebe7e6;
    --phoenix-secondary-bg-rgb: 235, 231, 230;
    --phoenix-primary: #996f25;
    --phoenix-primary-subtle: #be954d;
    --phoenix-link-color: #be954d;
    --phoenix-link-hover-color: #be954d;
    --phoenix-emphasis-color: #272828;
    --phoenix-primary-rgb: 153, 111, 37;
    --phoenix-quaternary-color: rgb(165, 165, 165);
    --phoenix-quaternary-color-rgb: 165, 165, 165;
    --phoenix-secondary-bg: #eeecea;
    --phoenix-body-bg-rgb: 250, 248, 245;
    --phoenix-secondary-bg-subtle: #f3f3f2;
    --phoenix-secondary-bg-subtle-rgb: 243, 243, 242;
    --phoenix-secondary-lighter: #ebebeb;
    --phoenix-secondary-lighter-rgb: 235, 235, 235;
    --phoenix-secondary-light: #dfdfdf;
    --phoenix-secondary-light-rgb: 223, 223, 223;
    --phoenix-secondary-color: rgb(87, 87, 86);
    --phoenix-secondary-color-rgb: 87, 87, 86;
    --phoenix-secondary-darker: rgb(54, 54, 53);
    --phoenix-secondary-darker-rgb: 54, 54, 53;
    --phoenix-border-color: #dfdad4;
    --phoenix-link-color-rgb: 153, 111, 37;
    --phoenix-link-hover-color-rgb: 141, 99, 26;
    --phoenix-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(255, 152, 56, 0.25);
    --phoenix-tertiary-color: #796e64;
    --gnb-height: 160px;
    --transition-default: all 0.3s ease;
}

/* Base Styles */
*, body {
    font-family: 'NanumSquareNeo', sans-serif;
    font-weight: 500;
    font-size: 18px;
}
input, button, select, optgroup, textarea, label, .alert, .badge, .blockquote-footer, .btn, .mapbox-container .mapbox-control-btn .zoomIn, .mapbox-container .mapbox-control-btn .zoomOut, .mapbox-container .mapbox-control-btn .fullScreen, .google-map-control-btn .zoomIn, .google-map-control-btn .zoomOut, .tox .tox-dialog__footer .tox-button:last-child, .tox .tox-dialog__footer .tox-button--secondary, .tox .tox-button-secondary, .tox .tox-button, [data-list] .page, .table-list .page, .navbar, .pagination, .valid-feedback, .invalid-feedback{
    font-family: 'NanumSquareNeo', sans-serif;
}
.footer {
    padding: 0;
}
a:hover {text-decoration: none;}
.word-keep {
    word-break: keep-all;
}
.btn-primary, .tox .tox-dialog__footer .tox-button:last-child, .tox .tox-button {
    --phoenix-btn-bg: var(--phoenix-primary);
    --phoenix-btn-hover-bg: #7a5617;
    --phoenix-btn-active-bg: #704b0b;
    --phoenix-btn-disabled-bg: var(--phoenix-primary);
    border: none;
}

.form-control:focus{
    border-color: var(--phoenix-primary);
}

.h-screen {
    height: 100vh;
}

.transition {
    transition: all 0.3s;
}

.form-label{
    padding-left: 0.25rem;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-primary-subtle {
    color: var(--phoenix-secondary-bg-subtle) !important;
}

.page-link.active, .active>.page-link {
    color: var(--phoenix-pagination-active-color);
    background-color: var(--phoenix-primary);
    border-color: var(--phoenix-primary);
}
.page-link:focus{
    box-shadow: 0 0 0 0.25rem rgba(243, 155, 72, 0.25);;

}
.text-hover-primary-subtle:hover {color: var(--phoenix-primary-subtle) !important;}
.text-hover-white:hover {color: var(--phoenix-secondary-bg-subtle) !important;}
.text-hover-secondary-subtle:hover {color: var(--phoenix-secondary-bg-subtle) !important;}
.text-hover-secondary:hover {color: var(--phoenix-secondary-color) !important;}
.text-hover-quaternary:hover {color: var(--phoenix-quaternary-color) !important;}
.bg-hover-primary-light:hover {background: #ece4d3 !important;}
/* Header Styles */
header {
    transition: var(--transition-default);
}

header .gnb-bg {
    height: 75px;
    transition: all 0.5s;
}

header.on .gnb-bg,
header.hover .gnb-bg {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
}

header.hover .gnb-bg {
    height: 240px;
}

header .logo {
    height: 40px;
}

/* GNB Styles */
header .gnb .gnb-item .btn {
    height: 75px;
    line-height: 75px;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    font-weight: 600;
    transition: var(--transition-default);

}

header.nav-open .gnb .gnb-item .btn{
    color: var(--phoenix-body-bg);
}

/* Dropdown Menu */
header .gnb .gnb-item .depth {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
    opacity: 0;
}

header.hover .gnb .gnb-item .depth {
    height: var(--gnb-height);
    opacity: 1;
    transition: all 0.3s 0.1s;
}

header .gnb .gnb-item .depth li a {
    line-height: 40px;
    color: var(--phoenix-secondary-darker);
    transition: var(--transition-default);
    font-weight: 600;
    font-size: 16px;
}

header .gnb .gnb-item .depth li a:hover {
    color: var(--phoenix-primary);
}

.more-btn {
    border: 2px solid var(--phoenix-quaternary-color);
    border-radius: 3.125rem;
    padding: 0.625rem 1.875rem;
    letter-spacing: 1.5px;
    transition: all 0.3s;
    font-weight: 600;
    text-decoration: none;
  }
  
.more-btn:hover {
border: 0.125rem solid var(--phoenix-primary);
color: var(--phoenix-primary);
}


@media screen and (min-width: 991px) {
    header .gnb .gnb-item:hover .btn {
        color: var(--phoenix-primary);
        border-bottom: 2px solid var(--phoenix-primary);
        font-weight: 600 !important;
    }
    header.on .gnb .gnb-item .btn,
    header.hover .gnb .gnb-item .btn {
        color: var(--phoenix-body-color);
        font-weight: 600;
    }
}

/* Tablet Styles */
@media screen and (max-width: 991px) {
    header .logo {
        height: 32px;
    }
    header .gnb-bg{
        height: 60px;
    }
    header .gnb-wrap {
        transform: translateX(100%);
        position: fixed;
        right: 0;
        top: 0;
        width: 100vw;
        background: #222;
        height: 100%;
        padding: 5rem 0 0;
        display: flex;
        justify-content: center;
        transition: var(--transition-default);
        z-index: 30;
    }

    header.nav-open .gnb-wrap {
        transform: translateX(0);
    }

    header.open .gnb-wrap {
        transform: translateX(0);
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    header .gnb {
        overflow: auto;
        width: 100%;
    }

    header .gnb .gnb-item .depth {
        position: static;
        display: block;
        height: 0;
        overflow: hidden;
    }

    header .gnb .gnb-item.on .depth {
        height: auto;
        padding: 0.5rem 0;
        opacity: 1;
    }

    header .gnb .gnb-item .btn{
        font-weight: 500 !important;
    }

    header .gnb .gnb-item.on .btn {
        color: white;
        border-bottom: 2px solid var(--phoenix-primary);
    }

    header .gnb .gnb-item.on span.material-symbols-outlined{
        transform: rotate(180deg);
    }

    header .gnb .gnb-item .depth li a {
        padding: 0.5rem 1rem;
        font-weight: 500;
        color: var(--phoenix-secondary-bg);
    }

    header .gnb .gnb-item .link-arrow {
        display: inline-block;
    }

    header .gnb .gnb-item.active .link-arrow {
        transform: rotate(180deg);
    }

    /* hamburger */
    header .hamburger {
        width: 30px; 
        height: 30px; 
        display: inline-block; 
        padding: 0; 
        position: relative; 
        z-index: 99;
    }
    :is(header .hamburger) span, span::before, span::after { 
        position: absolute; 
        top: 50%; left: 50%; 
        width: calc(100% - 4px);
        transform: translateX(-50%); 
        height: 2px; 
        background: var(--phoenix-body-color); 
        transition: all 0.3s ease-in;
    }
    header .hamburger span::before {content: ''; top: -9px; width: 100%;}
    header .hamburger span::after {content: ''; top: 9px; width: 100%;}
    header.nav-open .hamburger span {transform: translate(-50%) rotate(135deg);}
    header.nav-open .hamburger span::before {top: 0; transform: translate(-50%, 0%) rotate(180deg) ; background: var(--phoenix-body-bg);}
    header.nav-open .hamburger span::after {top: 0; transform: translate(-50%, 0) rotate(90deg); background: var(--phoenix-body-bg);}


    header.on .hamburger span, header.on .hamburger span::before, header.on .hamburger span::after{
        background: var(--phoenix-body-color)
    }

    header.on.nav-open .hamburger span, header.on.nav-open .hamburger span::before, header.on.nav-open .hamburger span::after{
        background: var(--phoenix-body-bg)
    }

    header .log-out span {color: var(--phoenix-secondary-bg-subtle);}

}


.slide-up:not(.slide-group){
    overflow: hidden;
}
.slide-up:not(.slide-group).h > *{
transform: translateY(120%) rotate(5deg);
}
.slide-up:not(.slide-group) > *{
transform: translateY(100%);
}
.slide-up:not(.slide-group).on > * {
transform: translateY(0) rotate(0deg) !important;
opacity: 1 !important;
}
.slide-up:not(.slide-group).on > *:first-child {
transition: all 0.7s;
}
.slide-up:not(.slide-group).on > *:nth-child(2) {
transition: all 0.7s 0.1s;
}
.slide-up:not(.slide-group).on > *:nth-child(3) {
transition: all 0.7s 0.2s;
}
.slide-up:not(.slide-group).on > *:nth-child(4) {
transition: all 0.7s 0.3s;
}
.slide-up:not(.slide-group).on > *:nth-child(5) {
transition: all 0.7s 0.4s;
}

/* ---------- */
.slide-up.slide-group > *{
    overflow: hidden;
}
.slide-up.slide-group > * > *{
transform: translateY(100%);
}
.slide-up.slide-group.on > * > * {
transform: translateY(0) rotate(0deg) !important;
opacity: 1 !important;
}
.slide-up.slide-group.on > *:first-child > * {
transition: all 0.7s;
}
.slide-up.slide-group.on > *:nth-child(2) > * {
transition: all 0.7s 0.1s;
}
.slide-up.slide-group.on > *:nth-child(3) > * {
transition: all 0.7s 0.2s;
}
.slide-up.slide-group.on > *:nth-child(4) > * {
transition: all 0.7s 0.3s;
}
.slide-up.slide-group.on > *:nth-child(5) > * {
transition: all 0.7s 0.4s;
}

/* -------show----- */
.show-up:not(.show-group) > * {
    opacity: 0;
}
.show-up:not(.show-group).on > *:first-child {
    opacity: 1;
    transition: all 0.7s;
}

.show-up:not(.show-group).on > *:nth-child(2) {
    opacity: 1;
    transition: all 0.7s 0.1s;
}
.show-up:not(.show-group).on > *:nth-child(3) {
    opacity: 1;
    transition: all 0.7s 0.2s;
}
.show-up:not(.show-group).on > *:nth-child(4) {
    opacity: 1;
    transition: all 0.7s 0.3s;
}
.show-up:not(.show-group).on > *:nth-child(5) {
    opacity: 1;
    transition: all 0.7s 0.4s;
}
.show-up:not(.show-group).on > *:nth-child(6) {
    opacity: 1;
    transition: all 0.7s 0.5s;
}
/* ------------ */
.show-up.show-group > * > * {
    opacity: 0;
}
.show-up.show-group.on > *:first-child > * {
    opacity: 1;
    transition: all 0.7s;
}

.show-up.show-group.on > *:nth-child(2) > * {
    opacity: 1;
    transition: all 0.7s 0.1s;
}
.show-up.show-group.on > *:nth-child(3) > * {
    opacity: 1;
    transition: all 0.7s 0.2s;
}
.show-up.show-group.on > *:nth-child(4) > * {
    opacity: 1;
    transition: all 0.7s 0.3s;
}
.show-up.show-group.on > *:nth-child(5) > * {
    opacity: 1;
    transition: all 0.7s 0.4s;
}
.show-up.show-group.on > *:nth-child(6) > * {
    opacity: 1;
    transition: all 0.7s 0.5s;
}

/* -------open-up----- */
.open-up{
    width: 0%;
    transition: width 0.2s ease-out;
    overflow: hidden;
}


/* swiper slide */
.swiper-pagination-bullet {
    background: #646464;
    opacity: 0.7;
    width: 10px;
    height: 10px;
}
.swiper-pagination-bullet-active {
    background: var(--phoenix-primary);
}

.toastui-editor-mode-switch .tab-item{
    font-size: 0.8rem;
}

.form-control{
    font-size: 1rem;
}

.form-control::placeholder{
    font-weight: 500;
}

.productsInfo img {max-width: 100%;}