@charset "utf-8";

:root {
    --geumo-primary:#b39f6c;
    --geumo-primary-dark:#8e7a4b;
    --geumo-primary-soft:#f4f0e6;
    --geumo-text:#222;
    --geumo-sub:#666;
    --geumo-line:#e8e4da;
    --geumo-bg:#fff;
    --geumo-container:1440px;

    --font-base:18px;
    --font-util:16px;
    --font-gnb:23px;
    --font-submenu:17px;
    --font-mobile-main:18px;
    --font-mobile-sub:16px;
}

html {
    font-size:100%;
}

body {
    font-size:var(--font-base);
    line-height:1.7;
    color:var(--geumo-text);
}

#skip-nav {
    position:relative;
    z-index:99999;
}

#skip-nav a {
    position:absolute;
    top:-60px;
    left:0;
    min-width:180px;
    padding:12px 20px;
    background:#111;
    color:#fff;
    font-size:16px;
    text-align:center;
    text-decoration:none;
}

#skip-nav a:focus {
    top:0;
}

#hd_h1 {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* 상단 util */
.header-util {
    background:#fff;
    border-bottom:1px solid #eee;
}

.header-util-inner {
    width:calc(100% - 80px);
    max-width:var(--geumo-container);
    height:46px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.header-font-control {
    display:flex;
    align-items:center;
    gap:6px;
}

.header-font-label {
    margin-right:6px;
    color:#666;
    font-size:var(--font-util);
    line-height:1;
}

.header-font-control button {
    width:28px;
    height:28px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d9d9d9;
    border-radius:50%;
    background:#fff;
    color:#555;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,color .2s ease;
}

.header-font-control button:hover,
.header-font-control button:focus-visible {
    border-color:var(--geumo-primary);
    background:var(--geumo-primary);
    color:#fff;
}

.header-font-control button svg {
    width:15px;
    height:15px;
    stroke-width:2;
}

.header-util-nav ul {
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    list-style:none;
}

.header-util-nav li {
    position:relative;
}

.header-util-nav li+li {
    margin-left:28px;
}

.header-util-nav li+li:before {
    position:absolute;
    top:50%;
    left:-14px;
    width:1px;
    height:12px;
    background:#ddd;
    content:"";
    transform:translateY(-50%);
}

.header-util-nav a {
    color:#666;
    font-size:var(--font-util);
    line-height:1;
    text-decoration:none;
    transition:color .2s ease;
}

.header-util-nav a:hover,
.header-util-nav a:focus-visible {
    color:var(--geumo-primary-dark);
}

.header-util-nav .admin a {
    color:var(--geumo-primary-dark);
    font-weight:600;
}

/* 헤더 */
#header {
    position:relative;
    z-index:2000;
    width:100%;
    height:104px;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.header-inner {
    position:relative;
    z-index:20;
    width:calc(100% - 80px);
    max-width:var(--geumo-container);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
}

.header-logo {
    flex:0 0 auto;
    margin:0;
}

.header-logo a {
    display:block;
}

.header-logo img {
    display:block;
    width:auto;
    max-width:310px;
    max-height:72px;
}

/* GNB */
#gnb {
    flex:1;
    height:100%;
    margin-left:70px;
}

.gnb-list {
    height:100%;
    margin:0;
    padding:0;
    display:flex;
    align-items:stretch;
    justify-content:flex-end;
    list-style:none;
}

.gnb-item {
    position:relative;
    height:100%;
}

.gnb-link {
    position:relative;
    height:100%;
    padding:0 29px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--geumo-text);
    font-size:var(--font-gnb);
    font-weight:700;
    letter-spacing:-.045em;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    transition:color .2s ease;
}

.gnb-link:after {
    position:absolute;
    left:50%;
    bottom:18px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--geumo-primary);
    content:"";
    opacity:0;
    transform:translate(-50%,5px) scale(.6);
    transition:opacity .2s ease,transform .25s ease;
}

.gnb-item:hover>.gnb-link,
.gnb-item:focus-within>.gnb-link {
    color:var(--geumo-primary-dark);
}

.gnb-item:hover>.gnb-link:after,
.gnb-item:focus-within>.gnb-link:after {
    opacity:1;
    transform:translate(-50%,0) scale(1);
}

/* GNB 서브메뉴 */
.gnb-sub {
    position:absolute;
    top:94px;
    left:50%;
    z-index:50;
    width:230px;
    padding-top:10px;
    display:none;
    transform:translateX(-50%);
}

.gnb-sub ul {
    margin:0;
    padding:12px;
    list-style:none;
    background:#fff;
    border:1px solid var(--geumo-line);
    border-top:4px solid var(--geumo-primary);
    border-radius:0 0 10px 10px;
    box-shadow:0 18px 40px rgba(0,0,0,.09);
}

.gnb-sub li+li {
    margin-top:2px;
}

.gnb-sub a {
    display:block;
    padding:11px 14px;
    border-radius:5px;
    color:#555;
    font-size:var(--font-submenu);
    line-height:1.5;
    text-align:center;
    text-decoration:none;
    transition:background .2s ease,color .2s ease;
}

.gnb-sub a:hover,
.gnb-sub a:focus-visible {
    background:var(--geumo-primary-soft);
    color:var(--geumo-primary-dark);
}

.gnb-background {
    position:absolute;
    top:104px;
    left:0;
    width:100%;
    height:0;
    background:#fff;
    border-bottom:1px solid #eee;
    opacity:0;
    pointer-events:none;
}

.header-actions {
    display:none;
    flex:0 0 auto;
}

.all-menu-btn {
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    color:#222;
    cursor:pointer;
}

.all-menu-btn svg {
    width:30px;
    height:30px;
}

/* 모바일 메뉴 */
.mobile-menu,
.mobile-menu-dim {
    display:none;
}

@media (max-width:1200px) {
    .header-util-inner,
    .header-inner {
        width:calc(100% - 48px);
    }

    #gnb {
        margin-left:30px;
    }

    .gnb-link {
        padding:0 18px;
        font-size:21px;
    }
}

@media (max-width:1024px) {
    .header-util {
        display:none;
    }

    #header {
        height:78px;
    }

    .header-inner {
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }

    .header-logo img {
        max-width:230px;
        max-height:56px;
    }

    #gnb {
        display:none;
    }

    .header-actions {
        margin-left:auto;
        display:block;
    }

    .mobile-menu {
        position:fixed;
        top:0;
        right:-360px;
        z-index:5000;
        width:360px;
        max-width:90vw;
        height:100vh;
        display:block;
        background:#fff;
        overflow-y:auto;
        transition:right .3s ease;
    }

    .mobile-menu.is-open {
        right:0;
    }

    .mobile-menu-inner {
        min-height:100%;
    }

    .mobile-menu-head {
        height:78px;
        padding:0 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:1px solid #eee;
        box-sizing:border-box;
    }

    .mobile-logo img {
        display:block;
        max-width:215px;
        max-height:52px;
    }

    .mobile-menu-close {
        width:42px;
        height:42px;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        border:0;
        background:transparent;
        color:#222;
        cursor:pointer;
    }

    .mobile-menu-close svg {
        width:28px;
        height:28px;
    }

    .mobile-member {
        padding:16px 20px;
        display:flex;
        gap:10px;
        border-bottom:1px solid #eee;
    }

    .mobile-member a {
        flex:1;
        padding:11px 8px;
        border:1px solid #ddd;
        border-radius:5px;
        color:#555;
        font-size:16px;
        line-height:1.4;
        text-align:center;
        text-decoration:none;
    }

    .mobile-member a:last-child {
        border-color:var(--geumo-primary);
        background:var(--geumo-primary);
        color:#fff;
    }

    .mobile-gnb>ul {
        margin:0;
        padding:0;
        list-style:none;
    }

    .mobile-gnb>ul>li {
        border-bottom:1px solid #eee;
    }

    .mobile-gnb-toggle {
        width:100%;
        min-height:64px;
        padding:0 22px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border:0;
        background:#fff;
        color:#222;
        font-size:var(--font-mobile-main);
        font-weight:700;
        text-align:left;
        cursor:pointer;
    }

    .mobile-gnb-toggle svg {
        width:20px;
        height:20px;
        transition:transform .2s ease;
    }

    .mobile-gnb-toggle[aria-expanded="true"] {
        color:var(--geumo-primary-dark);
    }

    .mobile-gnb-toggle[aria-expanded="true"] svg {
        transform:rotate(180deg);
    }

    .mobile-gnb-sub {
        display:none;
        background:#f8f7f3;
    }

    .mobile-gnb-sub ul {
        margin:0;
        padding:10px 0;
        list-style:none;
    }

    .mobile-gnb-sub a {
        display:block;
        padding:11px 28px;
        color:#555;
        font-size:var(--font-mobile-sub);
        line-height:1.55;
        text-decoration:none;
    }

    .mobile-gnb-sub a:hover,
    .mobile-gnb-sub a:focus-visible {
        color:var(--geumo-primary-dark);
    }

    .mobile-menu-dim {
        position:fixed;
        inset:0;
        z-index:4900;
        display:block;
        background:rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transition:opacity .3s ease,visibility .3s ease;
    }

    .mobile-menu-dim.is-open {
        opacity:1;
        visibility:visible;
    }

    body.mobile-menu-open {
        overflow:hidden;
    }
}

@media (max-width:640px) {
    body {
        font-size:17px;
    }

    .header-inner {
        padding:0 16px;
    }

    .header-logo img {
        max-width:195px;
    }
}