/**
 * v7/menu/index.css - v7 전체 메뉴 페이지 스타일
 *
 * v6 page/menu/all.php 디자인을 v7으로 이식.
 * Web Awesome Pro CSS 변수 사용, Bootstrap 미사용.
 */

/* 페이지 전체 */
.v7-menu-page {
    padding-top: var(--wa-space-m);
    padding-bottom: var(--wa-space-2xl);
}

/* 페이지 헤더 */
.menu-page-header {
    margin: var(--wa-space-l) 0 var(--wa-space-xl);
}

.menu-page-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--wa-color-text-normal);
    margin: 0 0 var(--wa-space-xs);
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

.menu-page-title i {
    font-size: 0.85em;
}

.menu-page-desc {
    font-size: 0.85em;
    color: var(--wa-color-text-subtler);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

/* 메뉴 그리드 — 반응형 카드 레이아웃 (.v7-menu-page 스코핑으로 header-desktop .menu-grid 충돌 방지) */
.v7-menu-page .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--wa-space-l);
}

/* 섹션 카드 */
.v7-menu-page .menu-section {
    border: 1px solid var(--wa-color-neutral-90);
    border-radius: var(--wa-border-radius-l);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v7-menu-page .menu-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* 섹션 헤더 */
.v7-menu-page .menu-section-header {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wa-color-text-subtler);
    padding: var(--wa-space-s) var(--wa-space-m);
    background: var(--wa-color-neutral-95);
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

/* 메뉴 리스트 */
.v7-menu-page .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 메뉴 아이템 */
.v7-menu-page .menu-item {
    transition: background 0.15s ease, padding-left 0.15s ease;
}

.v7-menu-page .menu-item:hover {
    background: var(--wa-color-neutral-97);
    padding-left: var(--wa-space-xs);
}

/* 메뉴 링크 */
.v7-menu-page .menu-link {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    text-decoration: none;
    color: var(--wa-color-text-normal);
}

/* 메뉴 아이콘 */
.v7-menu-page .menu-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: var(--wa-border-radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
}

/* 메뉴 텍스트 */
.v7-menu-page .menu-text {
    min-width: 0;
}

.v7-menu-page .menu-name {
    font-weight: 500;
    font-size: 0.9em;
    line-height: 1.3;
    color: var(--wa-color-text-normal);
}

.v7-menu-page .menu-name-danger {
    color: var(--wa-color-red-50);
}

.v7-menu-page .menu-name-primary {
    color: var(--wa-color-blue-50);
}

.v7-menu-page .menu-desc {
    font-size: 0.78em;
    color: var(--wa-color-text-subtlest);
    line-height: 1.3;
    margin-top: 1px;
}

/* 반응형: 모바일에서 1열 */
@media (max-width: 640px) {
    .v7-menu-page .menu-grid {
        grid-template-columns: 1fr;
    }
}

/* 반응형: 태블릿에서 2열 */
@media (min-width: 641px) and (max-width: 991px) {
    .v7-menu-page .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 반응형: 데스크톱에서 3열 */
@media (min-width: 992px) {
    .v7-menu-page .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}