/* ==========================================================================
   메뉴 하위표시 — 좌측 목록(LNB) + 상단 탭
   설계서: docs/메뉴_탭_LNB_설계.md

   - 구조: .wm-page 가 콘텐츠 영역의 그리드. LNB 가 있을 때만 2단이 됩니다.
   - LNB 가 없는 화면은 단일 컬럼이라 기존과 완전히 같게 보입니다(회귀 없음).
   - 모바일(<992px): LNB 는 <select> 로 접히고 탭은 가로 스크롤.
   - 테마/테넌트 CSS 와 충돌하지 않도록 토큰은 .wm-page 스코프에 둡니다.
     (뷰에 인라인 <style> 을 넣지 말 것 — 화면마다 색이 갈라집니다)
   ========================================================================== */

.wm-page {
    --wm-line: #e6e9ee;
    --wm-line-soft: #f1f3f5;
    --wm-ink: #1a1f27;
    --wm-ink-2: #495057;
    --wm-muted: #868e96;
    --wm-accent: #2c3e77;
    --wm-accent-soft: #eef1f9;
    --wm-surface: #fff;
    --wm-radius: 10px;
    --wm-aside: 220px;
    --wm-gap: 32px;

    color: var(--wm-ink);
}

/* LNB 가 있을 때만 2단. 없으면 이 규칙 자체가 붙지 않아 예전 그대로 흐릅니다. */
@media (min-width: 992px) {
    .wm-page--with-lnb {
        display: grid;
        grid-template-columns: var(--wm-aside) minmax(0, 1fr);
        gap: var(--wm-gap);
        align-items: start;
    }
}

/* 그리드 자식이 넘치는 표·이미지 때문에 본문이 밀려나지 않도록 */
.wm-page__main {
    min-width: 0;
}

/* ── 좌측 목록 ──────────────────────────────────────────────────────── */

.wm-lnb__title {
    margin: 0;
    padding: 22px 16px;
    background: var(--wm-accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    border-radius: var(--wm-radius) var(--wm-radius) 0 0;
}

.wm-lnb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wm-line);
    border-top: 0;
    border-radius: 0 0 var(--wm-radius) var(--wm-radius);
    overflow: hidden;
    background: var(--wm-surface);
}

.wm-lnb__item + .wm-lnb__item {
    border-top: 1px solid var(--wm-line-soft);
}

.wm-lnb__link {
    display: block;
    padding: 14px 18px;
    color: var(--wm-ink-2);
    text-decoration: none;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease;
}

.wm-lnb__link:hover,
.wm-lnb__link:focus-visible {
    background: var(--wm-accent-soft);
    color: var(--wm-accent);
}

/* 현재 위치. 탭 안(말단)에 있어도 켜져 있어야 하므로 판정은 서버가 조상 체인으로 합니다. */
.wm-lnb__link.is-active {
    color: var(--wm-ink);
    font-weight: 700;
    background: var(--wm-accent-soft);
    box-shadow: inset 3px 0 0 var(--wm-accent);
}

/* 갈 곳이 없는 항목(폴더 등) — 눌리지 않는다는 것이 보여야 합니다 */
.wm-lnb__link.is-plain,
.wm-subtabs__link.is-plain {
    color: var(--wm-muted);
    cursor: default;
}

/* 화면 폭에 따라 목록과 셀렉트 중 하나만 보입니다 */
.wm-lnb__mobile { display: block; margin-bottom: 20px; }

@media (min-width: 992px) {
    .wm-lnb__mobile { display: none; }
}

@media (max-width: 991.98px) {
    .wm-lnb__title,
    .wm-lnb__nav { display: none; }
}

/* ── 상단 탭 ────────────────────────────────────────────────────────── */

.wm-subtabs {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--wm-line);
}

.wm-subtabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    /* 항목이 많아도 줄바꿈하지 않는다 — 두 줄이 되면 본문이 첫 화면 밖으로 밀린다 */
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.wm-subtabs__item {
    flex: 0 0 auto;
}

.wm-subtabs__link {
    display: block;
    padding: 12px 22px;
    color: var(--wm-muted);
    text-decoration: none;
    font-size: .95rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--wm-radius) var(--wm-radius) 0 0;
    transition: color .15s ease, background-color .15s ease;
}

.wm-subtabs__link:hover,
.wm-subtabs__link:focus-visible {
    color: var(--wm-accent);
    background: var(--wm-line-soft);
}

.wm-subtabs__link.is-active {
    color: var(--wm-ink);
    font-weight: 700;
    background: var(--wm-surface);
    border-color: var(--wm-line);
    /* 아래 테두리를 지워 탭이 본문과 이어져 보이게 */
    border-bottom-color: var(--wm-surface);
    margin-bottom: -1px;
}

@media (max-width: 575.98px) {
    .wm-subtabs__link { padding: 10px 16px; font-size: .9rem; }
}