/**
 * ITF Korea — drawer (tablet ≤1024 · mobile accordion)
 *
 * common.css nav-mode-auto 는 769px+ 에서 드로어를 숨김.
 * ITF 는 Figma 기준 ≤1024 토글 → 여기서 다시 연다.
 * 모바일/태블릿: 상위 행 탭 → 하위 펼침 (아코디언).
 */

/* —— Tablet 769–1024: 토글 드로어 복구 (풀폭 · mobile 패널) —— */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body.nav-mode-auto.itf-site .drawer-overlay.is-active {
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }

    body.nav-mode-auto.itf-site .drawer-menu.is-open {
        display: block !important;
        pointer-events: auto;
        top: var(--adminBarH);
        left: 0;
        right: auto;
        width: 100%;
        height: calc(100vh - var(--adminBarH));
        height: calc(100dvh - var(--adminBarH));
        box-shadow: none;
    }

    body.nav-mode-auto.itf-site .drawer-menu.is-open .drawer-menu__panel--desktop {
        display: none !important;
    }

    body.nav-mode-auto.itf-site .drawer-menu.is-open .drawer-menu__panel--mobile {
        display: block !important;
        width: 100%;
        overflow-y: auto;
        transform: translateY(0);
        opacity: 1;
    }

    body.nav-mode-auto.itf-site .drawer-menu .drawer-menu__inner {
        padding: calc(var(--hdH) + 1.2rem) var(--inPd) 3rem;
    }
}

/* 클로즈 = 헤더 토글과 동일 슬롯 (28×28 · 세로 중앙 · 우측 inPd) */
@media screen and (max-width: 1024px) {
    .itf-site .drawer-close {
        top: calc((var(--hdH) - 28px) / 2);
        right: var(--inPd);
        width: 28px;
        height: 28px;
    }
}

@media screen and (max-width: 768px) {
    .itf-site .drawer-close {
        top: calc((var(--hdH) - 26px) / 2);
        width: 26px;
        height: 26px;
    }
}

/* —— Accordion (mobile 패널 · ≤1024) —— */
@media screen and (max-width: 1024px) {
    .itf-site .drawer-menu-list--mobile {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .itf-site .drawer-menu-list--mobile > li {
        border-bottom: 1px solid var(--borderColor1);
    }

    .itf-site .drawer-menu-list--mobile > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.2rem;
        padding: 1.6rem 0;
        font-size: var(--midTxt);
        font-weight: 700;
        line-height: var(--titLine, 1.3);
        color: var(--txtBlack1);
        text-decoration: none;
        border-bottom: 0;
        transition: color 0.2s ease;
    }

    /* 하위 있는 상위 — 쉐브론 */
    .itf-site .drawer-menu-list--mobile > li.menu-item-has-children > a::after {
        content: '';
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
        transition: transform 0.2s ease;
    }

    .itf-site .drawer-menu-list--mobile > li.menu-item-has-children.is-open > a::after {
        transform: rotate(180deg);
    }

    .itf-site .drawer-menu-list--mobile .sub-menu {
        list-style: none;
        margin: 0;
        padding: 2rem 0;
        display: none;
        flex-direction: column;
        gap: 0;
    }

    .itf-site .drawer-menu-list--mobile > li.menu-item-has-children.is-open > .sub-menu {
        display: flex;
    }

    .itf-site .drawer-menu-list--mobile .sub-menu a {
        display: block;
        padding: 1rem 0 1rem 0.4rem;
        font-size: var(--txt);
        font-weight: 500;
        line-height: var(--txtLine, 1.5);
        color: var(--txtBlack1);
        text-decoration: none;
        border-bottom: 0;
        transition: color 0.2s ease;
    }

    .itf-site .drawer-menu-list--mobile .sub-menu .sub-menu {
        padding-left: 1.2rem;
    }
}

@media (hover: hover) {
    @media screen and (max-width: 1024px) {
        .itf-site .drawer-menu-list--mobile > li > a:hover {
            color: var(--primary);
        }

        .itf-site .drawer-menu-list--mobile .sub-menu a:hover {
            color: var(--primary);
        }
    }
}