.site-header {
    position: relative;
    background: #fff;
    /* 검은 1px 선 대신 옅게 번지는 그림자로 경계를 만든다 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
}

.header-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

.site-branding {
    flex-shrink: 0;
}

.site-title {
    margin: 0;
    line-height: 0;
}

.site-title a {
    display: inline-block;
}

.site-logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
}

.header-search {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: auto;
}

.header-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 220px;
    max-width: 100%;
}

.header-search-field {
    width: 100%;
    padding: 0.55rem 2.75rem 0.55rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: #fafafa;
    font-family: inherit;
    font-size: 0.9rem;
    color: #000;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.header-search-field::placeholder {
    color: #999;
}

.header-search-field:focus {
    outline: none;
    border-color: #000;
    background: #fff;
}

.header-search-submit {
    position: absolute;
    right: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #555;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-search-submit:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

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

.main-navigation {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.main-navigation #primary-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    color: #000;
    text-decoration: none;
}

/* ------------------------------ 최상위 ------------------------------ */
.main-navigation #primary-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.main-navigation #primary-menu > li > a:hover,
.main-navigation #primary-menu > li:focus-within > a {
    background: #f2f2ef;
}

/* 현재 보고 있는 메뉴 */
.main-navigation #primary-menu > li.current-menu-item > a,
.main-navigation #primary-menu > li.current-menu-parent > a,
.main-navigation #primary-menu > li.current-menu-ancestor > a,
.main-navigation #primary-menu > li.current_page_parent > a {
    background: #111;
    color: #fff;
}

/* 하위가 있는 항목에는 방향 표시를 붙인다 — 눌러볼 곳인지 알 수 있게 */
.main-navigation .menu-item-has-children > a::after {
    content: "";
    flex-shrink: 0;
    width: 0.32em;
    height: 0.32em;
    margin-left: 0.1em;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-0.05em, -0.1em);
    opacity: 0.45;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.main-navigation #primary-menu > li.menu-item-has-children:hover > a::after,
.main-navigation #primary-menu > li.menu-item-has-children:focus-within > a::after {
    opacity: 0.8;
    transform: rotate(225deg) translate(-0.05em, -0.1em);
}

/* ----------------------------- 하위 메뉴 ----------------------------- */
.main-navigation ul.sub-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    min-width: 13rem;
    margin: 0;
    padding: 0.4rem;
    border: 1px solid #ececE8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);

    /* display 를 바꾸는 대신 서서히 나타나게 한다 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* 방아쇠와 메뉴 사이의 빈틈에서도 hover 가 끊기지 않도록 다리를 놓는다 */
.main-navigation ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
}

.main-navigation li:hover > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.main-navigation .sub-menu li {
    width: 100%;
}

.main-navigation .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu li:focus-within > a {
    background: #f4f4f1;
    color: #111;
    text-decoration: none;
}

.main-navigation .sub-menu .current-menu-item > a {
    color: #111;
    font-weight: 700;
}

/* ---------------------------- 2단 하위 메뉴 ---------------------------- */
.main-navigation .sub-menu .sub-menu {
    top: -0.4rem;
    /* 1단과 살짝 겹쳐 두면 마우스가 지나갈 때 끊기지 않는다 */
    left: calc(100% - 0.25rem);
    transform: translateX(-6px);
}

.main-navigation .sub-menu li:hover > .sub-menu,
.main-navigation .sub-menu li:focus-within > .sub-menu {
    transform: translateX(0);
}

.main-navigation .sub-menu ::before {
    display: none;
}

/* 2단을 가진 항목은 화살표를 오른쪽으로 */
.main-navigation .sub-menu .menu-item-has-children > a::after {
    transform: rotate(-45deg) translate(-0.05em, 0);
}

.main-navigation .sub-menu .menu-item-has-children:hover > a::after,
.main-navigation .sub-menu .menu-item-has-children:focus-within > a::after {
    opacity: 0.8;
    transform: rotate(-45deg) translate(0.1em, 0);
}

.header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.header-user {
    color: #000;
    font-size: 0.9rem;
}

.header-link {
    display: inline-block;
    padding: 0.4rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    color: #000;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.header-link-signup {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.header-link-signup:hover {
    background-color: #333;
    color: #fff;
}

/* 좁은 화면에서는 하위 메뉴가 화면 밖으로 나가지 않도록 오른쪽에 붙인다 */
@media (max-width: 900px) {
    .main-navigation ul.sub-menu {
        left: auto;
        right: 0;
        min-width: 12rem;
        max-width: min(88vw, 20rem);
    }

    /*
     * 2단을 옆에 나란히 두면 375px 화면에서는 자리가 없어 반대쪽으로 넘친다.
     * 좁은 화면에서는 상위 항목 아래에 들여써서 펼친다. 닫힌 상태가 자리를
     * 차지하지 않아야 하므로 여기서는 display 로 여닫는다.
     */
    .main-navigation .sub-menu .sub-menu {
        display: none;
        position: static;
        left: auto;
        right: auto;
        min-width: 0;
        max-width: none;
        margin: 0.2rem 0 0.35rem 0.7rem;
        padding: 0.2rem;
        border: 0;
        border-left: 2px solid #ececE8;
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .main-navigation .sub-menu li:hover > .sub-menu,
    .main-navigation .sub-menu li:focus-within > .sub-menu {
        display: flex;
        transform: none;
    }

    /* 아래로 펼치므로 화살표도 아래를 보게 */
    .main-navigation .sub-menu .menu-item-has-children > a::after,
    .main-navigation .sub-menu .menu-item-has-children:hover > a::after {
        transform: rotate(45deg) translate(-0.05em, -0.1em);
    }

    .main-navigation .sub-menu a {
        white-space: normal;
        word-break: keep-all;
    }
}

/* ============================ 모바일 메뉴 ============================ */
.suji-burger,
.suji-drawer,
.suji-drawer-backdrop {
    display: none;
}

.suji-burger {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #111;
    cursor: pointer;
}

.suji-burger:hover {
    background: #f2f2ef;
}

.suji-burger-bars {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.suji-burger-bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.suji-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.24s ease;
}

.suji-drawer-backdrop.is-open {
    opacity: 1;
}

.suji-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 301;
    width: min(84vw, 20rem);
    padding: 1rem 1.15rem 2.5rem;
    overflow-y: auto;
    background: #fff;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.16);
    transform: translateX(100%);
    transition: transform 0.24s ease;
}

.suji-drawer.is-open {
    transform: translateX(0);
}

.suji-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid #ececE8;
}

.suji-drawer-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.suji-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: #444;
    cursor: pointer;
}

.suji-drawer-close:hover {
    background: #f2f2ef;
    color: #111;
}

.suji-drawer-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.suji-drawer-user {
    font-size: 0.88rem;
    color: #666;
}

.suji-drawer-search {
    position: relative;
    display: flex;
    margin-bottom: 1.25rem;
}

.suji-drawer-search input[type="search"] {
    width: 100%;
    padding: 0.6rem 2.6rem 0.6rem 1rem;
    border: 1px solid #e0e0da;
    border-radius: 999px;
    background: #fafaf8;
    font-family: inherit;
    font-size: 0.9rem;
    color: #111;
}

.suji-drawer-search input[type="search"]:focus {
    outline: none;
    border-color: #111;
    background: #fff;
}

.suji-drawer-search button {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #555;
    cursor: pointer;
}

/* ---------------------------- 서랍 메뉴 ---------------------------- */
.suji-drawer-menu,
.suji-drawer-menu .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.suji-drawer-menu li {
    position: relative;
}

.suji-drawer-menu > li {
    border-bottom: 1px solid #f2f2ef;
}

.suji-drawer-menu a {
    display: block;
    padding: 0.8rem 2.75rem 0.8rem 0.35rem;
    color: #222;
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
}

.suji-drawer-menu a:hover {
    color: #111;
}

.suji-drawer-menu .current-menu-item > a,
.suji-drawer-menu .current-menu-ancestor > a {
    color: #111;
    font-weight: 700;
}

/* 하위 메뉴 펼침 단추 — 제목을 누르면 이동, 화살표를 누르면 펼침 */
.suji-drawer-toggle {
    position: absolute;
    top: 0.3rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #999;
    cursor: pointer;
}

.suji-drawer-toggle:hover {
    background: #f4f4f1;
    color: #111;
}

.suji-drawer-toggle svg {
    transition: transform 0.2s ease;
}

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

/* 닫힌 하위 메뉴는 자리를 차지하지 않는다 */
.suji-drawer-menu .sub-menu {
    display: none;
    margin: 0 0 0.5rem 0.6rem;
    padding-left: 0.7rem;
    border-left: 2px solid #ececE8;
}

.suji-drawer-menu li.is-open > .sub-menu {
    display: block;
}

.suji-drawer-menu .sub-menu a {
    padding: 0.6rem 2.75rem 0.6rem 0.35rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #555;
}

.suji-drawer-menu .sub-menu .sub-menu {
    margin-bottom: 0.35rem;
}

/* ---------------------- 좁은 화면 전환 ---------------------- */
@media (max-width: 900px) {
    .header-inner {
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .site-logo {
        height: 38px;
    }

    /* 메뉴 · 검색 · 로그인은 서랍으로 옮긴다 */
    .main-navigation,
    .header-search,
    .header-actions {
        display: none;
    }

    .suji-burger {
        display: flex;
    }

    .suji-drawer,
    .suji-drawer-backdrop {
        display: block;
    }

    .suji-drawer[hidden],
    .suji-drawer-backdrop[hidden] {
        display: none;
    }

    /* 서랍이 열려 있는 동안 본문이 밀려 스크롤되지 않게. 넓은 화면에서는
       규칙 자체가 없으므로 잠금이 서랍보다 오래 남을 수 없다. */
    body.suji-drawer-on {
        overflow: hidden;
    }
}