@charset "utf-8";

/* ===== 축제 팔레트 (재정의용) ===== */
:root {
    --color1      : #0f1c2d;
    --color2      : #cf5c1e;
    --color3      : #e8954e;
    --color4      : #fff7ee;
    --color-gold  : #f5c842;
    --color-border: #e8d9c8;
    --header-h    : 80px;
}

@media all and (max-width: 900px) {

    /* ===== 헤더 ===== */
    header {
        height: 60px;
        --header-h: 60px;
        position: sticky;
        top: 0;
    }
    .header-inner {
        padding: 0 16px;
        position: relative;
    }
    .site-name { font-size: 18px; }
    .site-logo  { height: 36px; }

    /* 햄버거 버튼 표시 */
    .hamburger-btn { display: flex; }

    /* 네비게이션 - 세로 드롭다운 */
    .site-nav {
        position: static;
        height: 100%;
        align-items: center;
    }

    header .menu-list {
        display: none;
        flex-direction: column;
        height: auto;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--c-header-bg2);
        z-index: 999;
        border-top: 2px solid var(--c-header-color2);
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 8px 0;
    }
    header .menu-list.open { display: flex; }

    header .menu-list li {
        flex-shrink: 0;
        width: 100%;
        height: auto;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    header .menu-list li a,
    header .menu-list li button {
        height: 50px;
        justify-content: flex-start;
        padding: 0 20px;
        width: 100%;
        font-size: 15px;
    }
    header .menu-list li a::after,
    header .menu-list li button::after { display: none; }

    /* auth 항목 모바일 */
    header .menu-list li.auth-item a,
    header .menu-list li.auth-item button {
        border: none;
        border-radius: 0;
        height: 50px;
        margin: 0;
        padding: 0 20px;
        color: var(--c-header-color2);
        background: rgba(255, 255, 255, 0.06);
        opacity: 1;
    }

    /* 데스크탑 호버 효과 제거 */
    header .menu-list li:hover > .sub-menu,
    .sub-menu li:hover > .sub-menu { display: none; }

    /* ===== 서브메뉴 (아코디언) ===== */
    .sub-menu {
        position: static;
        display: none;
        min-width: unset;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background: var(--c-header-bg2);
        filter: none;
    }
    .sub-menu.open { display: block; }

    .sub-menu > li > a,
    .sub-menu > li > button {
        padding-left: 36px;
        background: rgba(0,0,0,0.15);
        color: var(--c-header-color);
        height: 44px;
        font-size: 14px;
    }
    .sub-menu > li > a:hover,
    .sub-menu > li > button:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--c-header-color2);
    }
    /* 3차 */
    .sub-menu .sub-menu {
        position: static;
        left: unset;
        top: unset;
        background: transparent;
    }
    .sub-menu .sub-menu > li > a,
    .sub-menu .sub-menu > li > button { padding-left: 52px; }
    /* 4차 */
    .sub-menu .sub-menu .sub-menu > li > a,
    .sub-menu .sub-menu .sub-menu > li > button { padding-left: 68px; }
    /* 5차 */
    .sub-menu .sub-menu .sub-menu .sub-menu > li > a,
    .sub-menu .sub-menu .sub-menu .sub-menu > li > button { padding-left: 84px; }

    /* ===== 페이지 콘텐츠 ===== */
    .page-content {
        padding: 20px 14px;
        min-height: calc(100vh - 60px - 180px);
    }

    /* ===== 검색폼 ===== */
    [name=searchForm] { width: 100%; flex-direction: column; gap: 8px; }
    [name=searchForm] div { width: 100%; }
    [name=searchForm] div input,
    [name=searchForm] select,
    [name=searchForm] div button { width: 100%; }

    /* ===== 테이블 ===== */
    .table { width: 100%; }
    .table.list colgroup { display: none; }
    .table.list tr {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 6px solid var(--color-border);
    }
    .table.list tr th,
    .table.list tr td {
        flex-grow: 1;
        flex-basis: 50%;
        font-size: 13px;
    }

    /* ===== 페이징 ===== */
    .paging { width: 100%; flex-wrap: wrap; }

    /* ===== 버튼 영역 ===== */
    .btn-area { width: 100%; }

    /* ===== 푸터 ===== */
    .footer-inner {
        flex-direction: column;
        gap: 24px;
    }
    .footer-copy { text-align: left; }

    /* ===== 갤러리 ===== */
    .gallery li { flex-basis: 100%; max-width: 100%; }
}