/*
  킹샷 셸(Shell) — 0단계 / M0b
  ────────────────────────────────────────────────────────────────────────────
  좌측 사이드바 + 슬림 Topbar + 콘텐츠 + 푸터의 4-구역 그리드 레이아웃.
  - lg(992px) 이상: 사이드바 240px 정적 노출
  - lg 미만:           사이드바는 Bootstrap offcanvas 드로어 (햄버거로 열기)

  로드 순서: bootstrap.min.css → bootstrap-icons.css → tokens.css → style.css → shell.css
  shell.css 가 가장 마지막 — 기존 .navbar / footer 스타일을 안전하게 덮어쓴다.
*/

/* ───────────────────────────────────────────────────────────────────────────
   1. 셸 그리드 컨테이너
   - grid-template-areas 로 topbar(전체 폭) / sidebar / main / footer 배치
   - 데스크톱: 사이드바 240px 정적
   - lg 미만: 사이드바 영역 제거(드로어로 전환)
   ─────────────────────────────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-areas:
        "topbar  topbar"
        "sidebar main"
        "sidebar footer";
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr auto;
    min-height: 100vh;
    background: var(--ks-bg);
}

.app-topbar { grid-area: topbar; }
.app-sidebar-wrap { grid-area: sidebar; }
.app-main { grid-area: main; }
.app-footer { grid-area: footer; }

@media (max-width: 991.98px) {
    .app-shell {
        grid-template-areas:
            "topbar"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }
}

/* 미인증 페이지(로그인/회원가입/에러)는 사이드바 자체가 렌더되지 않으므로
   그리드를 1열 풀폭으로 전환. :has() 미지원 브라우저에선 사이드바 빈 칸이
   드러날 수 있으나 동일 페이지에서 발생할 일이 거의 없다(현대 브라우저 모두 지원). */
.app-shell:not(:has(.app-sidebar)) {
    grid-template-areas:
        "topbar"
        "main"
        "footer";
    grid-template-columns: 1fr;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Topbar (56px 고정)
   ─────────────────────────────────────────────────────────────────────── */
.app-topbar {
    display: flex;
    align-items: center;
    gap: var(--ks-s-3);
    padding: 0 var(--ks-s-4);
    background: var(--ks-surface);
    border-bottom: 1px solid var(--ks-border);
    box-shadow: var(--ks-shadow-1);
    position: sticky;
    top: 0;
    z-index: 1030; /* offcanvas/dropdown 위에 */
}

.app-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--ks-s-2);
    min-width: 0;
}

.app-topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ks-s-2);
}

/* 사이드바 토글 — lg 이상은 사이드바가 항상 보이므로 숨김 */
.app-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ks-r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ks-text-muted);
    transition: background-color .15s ease, color .15s ease;
    font-size: 1.3rem;
}
.app-sidebar-toggle:hover {
    background: var(--ks-surface-2);
    color: var(--ks-text);
}
@media (min-width: 992px) {
    .app-sidebar-toggle { display: none; }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-s-2);
    font-weight: var(--ks-fw-bold);
    color: var(--ks-text);
    text-decoration: none;
    font-size: var(--ks-fs-md);
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.app-brand:hover { color: var(--ks-text); }
.app-brand i {
    color: var(--ks-primary);
    font-size: 1.2em;
}

/* Topbar 우측 토글들의 높이/모양 정렬 */
.app-topbar-right .btn,
.app-topbar-right .nav-link {
    height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--ks-r-md);
}
.app-topbar-right .nav-link {
    color: var(--ks-text-muted);
    padding: 0 12px;
}
.app-topbar-right .nav-link:hover {
    color: var(--ks-text);
    background: var(--ks-surface-2);
}

/*
  모바일(<= sm) 토파바 폭 절약 — 라벨은 숨기고 아이콘만 노출.
  - 테마 토글 텍스트 숨김(.nav-theme-toggle 의 텍스트 span)
  - 언어 드롭다운의 현재 언어 라벨 숨김
  - 사용자 드롭다운의 닉네임 라벨 숨김
  드롭다운 토글 화살표(::after)도 같이 숨겨 깔끔하게.
*/
@media (max-width: 575.98px) {
    .app-topbar-right .nav-theme-toggle [data-role="themeToggleText"] { display: none; }
    .app-topbar-right .nav-theme-toggle { padding: 0 10px; }

    /* 언어/사용자 드롭다운: 텍스트 라벨과 화살표 숨김 — 아이콘만 남김 */
    .app-topbar-right .dropdown > .nav-link.dropdown-toggle > span { display: none; }
    .app-topbar-right .dropdown > .nav-link.dropdown-toggle::after { display: none; }
    .app-topbar-right .dropdown > .nav-link.dropdown-toggle > i { margin-right: 0 !important; }
    .app-topbar-right .dropdown > .nav-link { padding: 0 10px; }

    /* 비로그인 상태의 로그인/회원가입 링크는 라벨 그대로 두되 좌우 패딩 살짝 줄임 */
    .app-topbar-right > .nav-link { padding: 0 8px; font-size: var(--ks-fs-sm); }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. Sidebar (Bootstrap offcanvas-lg 활용 — lg 이상 정적, 미만 드로어)
   ─────────────────────────────────────────────────────────────────────── */
.app-sidebar {
    background: var(--ks-surface);
    border-right: 1px solid var(--ks-border);
    overflow-y: auto;
}

@media (min-width: 992px) {
    /* offcanvas-lg 의 transform/visibility 등을 정적 사이드바에 맞게 무력화 */
    .app-sidebar.offcanvas-lg {
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        transform: none !important;
        visibility: visible !important;
        width: 240px !important;
        border-right: 1px solid var(--ks-border);
        box-shadow: none;
    }
}

.app-nav {
    padding: var(--ks-s-3) var(--ks-s-2);
}
.app-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 각 사이드바 항목 — 호버/활성 상태 */
.app-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ks-s-3);
    padding: 10px 12px;
    border-radius: var(--ks-r-md);
    color: var(--ks-text-muted);
    text-decoration: none;
    font-size: var(--ks-fs-base);
    font-weight: var(--ks-fw-med);
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease;
    line-height: 1.3;
}
.app-nav-item:hover {
    background: var(--ks-surface-2);
    color: var(--ks-text);
}
.app-nav-item.active {
    background: var(--ks-primary-soft);
    color: var(--ks-primary-on-soft);
    border-left-color: var(--ks-primary);
}
.app-nav-item i {
    font-size: 1.1em;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.app-nav-item > span {
    flex: 1;
    min-width: 0;
}

/* Collapsible 섹션 토글 (도구·관리) */
.app-nav-section-toggle {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.app-nav-section-toggle .bi-chevron-down {
    margin-left: auto;
    font-size: .85em;
    transition: transform .2s ease;
    width: auto;
}
.app-nav-section-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* 하위 항목 들여쓰기 */
.app-nav-section-items {
    list-style: none;
    margin: 4px 0 4px 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--ks-border);
    padding-left: 8px;
}
.app-nav-subitem {
    font-size: .94em;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. Main 콘텐츠 영역
   ─────────────────────────────────────────────────────────────────────── */
.app-main {
    padding: var(--ks-s-5);
    background: var(--ks-bg);
    min-width: 0; /* 그리드 자식 폭 폭주 방지 */
}

/* lg 미만에서는 콘텐츠 좌우 패딩을 약간 줄임 */
@media (max-width: 767.98px) {
    .app-main {
        padding: var(--ks-s-4) var(--ks-s-3);
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. Footer (기존 어두운 푸터 → 라이트 셸 톤으로)
   기존 style.css 의 footer { ... !important } 를 덮기 위해 selector 특이도 ↑
   ─────────────────────────────────────────────────────────────────────── */
.app-shell > .app-footer {
    background: var(--ks-surface) !important; /* 기존 !important 덮기용 */
    box-shadow: none !important;
    border-top: 1px solid var(--ks-border);
    padding: var(--ks-s-3) var(--ks-s-4);
    text-align: center;
    color: var(--ks-text-muted);
    font-size: var(--ks-fs-sm);
}
.app-shell > .app-footer small {
    color: var(--ks-text-muted);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. 기존 body 배경 그라디언트 무력화 (셸 컨테이너가 페이지 톤을 결정)
   기존 style.css 의 body { background: ... } 가 라이트 톤 그라디언트라
   새 회색 페이지 배경과 충돌 → 셸이 있을 땐 셸이 배경을 책임진다.
   ─────────────────────────────────────────────────────────────────────── */
body:has(.app-shell) {
    background: var(--ks-bg) !important;
}