/* ─────────────────────────────────────────────
   APP SHELL — SLUR Design System × slur-guidelines (patterns 층)
   대시보드 앱 셸 layout_app: l_side(사이드바) / l_head(상단 바) / l_main(본문).
   레이아웃 블록 규칙대로 내부는 l_로 자족한다 — nav_side·btn 같은 공유
   컴포넌트를 셸 안에 직접 두지 않고, 컴포넌트는 l_main 안의 페이지가 조합한다.
   데스크톱(1024+)은 2열 고정, 그 아래에서 l_side는 드로어가 된다 —
   열림은 data-state="open", 배경 inert·Esc·포커스 복귀는 slur.js(drawer).
   현재 페이지의 정본은 aria-current="page". 구조 간격은 px(레이아웃 값).
   로드 순서: global → tokens → components → 이 파일 → 페이지 CSS.
   ───────────────────────────────────────────── */

.layout_app { display: grid; min-height: 100vh; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "side head" "side main"; background: var(--color-surface-sunken); }

/* 사이드바 — l_side(드로어 껍데기) > l_panel(패널) + l_dim(모바일 딤) */
.layout_app .l_side { height: 100vh; grid-area: side; position: sticky; top: 0; }
.layout_app .l_panel { display: flex; width: 100%; height: 100%; padding: 16px 12px; border-right: 1px solid var(--color-border-subtle); background: var(--color-surface-card); flex-direction: column; gap: 2px; overflow-y: auto; }
.layout_app .l_dim { display: none; }
.layout_app .l_brand { display: flex; align-items: center; gap: var(--space-8); height: 2.5rem; margin-bottom: 12px; padding: 0 var(--space-12); font-weight: var(--weight-bold); color: var(--color-text-primary); text-decoration: none; }
.layout_app .l_brand svg { width: 1.5rem; height: 1.5rem; color: var(--color-brand); flex: none; }
.layout_app .l_group { padding: var(--space-8) var(--space-12) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); text-transform: uppercase; }
.layout_app .l_nav { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.layout_app .l_item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.layout_app .l_item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.layout_app .l_item[aria-current="page"] { background: var(--color-brand-soft); font-weight: var(--weight-semibold); color: var(--color-text-brand); }
.layout_app .l_item svg { width: 1.125em; height: 1.125em; flex: none; }
.layout_app .l_count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; margin-left: auto; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--color-surface-hover); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.layout_app .l_divider { height: 1px; margin: var(--space-8) var(--space-4); background: var(--color-border-subtle); }
.layout_app .l_foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-border-subtle); }
.layout_app .l_user { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); font-size: var(--text-sm); color: var(--color-text-primary); text-decoration: none; }
.layout_app .l_user:hover { background: var(--color-surface-hover); }
.layout_app .l_avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-brand-soft); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-brand); flex: none; }
.layout_app .l_user_meta { display: flex; flex-direction: column; line-height: 1.3; }
.layout_app .l_user_meta small { font-size: var(--text-xs); color: var(--color-text-muted); }
.layout_app .l_close { display: none; }

/* 상단 바 — 제목·브레드크럼 자리(l_title) + 오른쪽 액션(l_actions). 모바일 햄버거(l_menu)는 여기 */
.layout_app .l_head { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-card); grid-area: head; position: sticky; top: 0; z-index: var(--z-sticky); }
.layout_app .l_title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.layout_app .l_actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.layout_app .l_menu { display: none; }

/* 본문 — 페이지(page_*)가 들어온다. min-width:0은 그리드 안 표·차트의 가로 넘침 방지 */
.layout_app .l_main { min-width: 0; padding: 24px 16px; grid-area: main; }

/* 모바일 — 사이드바는 드로어. l_side는 전체 화면 껍데기(딤 포함), l_panel이 왼쪽에서 들어온다 */
@media (max-width: 1023px) {
  .layout_app { grid-template-columns: 1fr; grid-template-areas: "head" "main"; }
  .layout_app .l_side { display: none; height: auto; position: fixed; inset: 0; z-index: var(--z-modal); transition: display var(--duration-slow) allow-discrete; }
  .layout_app .l_side[data-state="open"] { display: block; }
  .layout_app .l_panel { width: 280px; max-width: 85vw; border-right: none; position: relative; z-index: 1; box-shadow: var(--shadow-lg); transition: transform var(--duration-slow) var(--ease-standard); }
  @starting-style { .layout_app .l_side[data-state="open"] .l_panel { transform: translateX(-100%); } }
  .layout_app .l_dim { display: block; background: var(--color-surface-overlay); position: absolute; inset: 0; }
  .layout_app .l_close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: var(--radius-8); background: transparent; color: var(--color-text-muted); position: absolute; top: 20px; right: 12px; cursor: pointer; }
  .layout_app .l_close svg { width: 1.125em; height: 1.125em; }
  .layout_app .l_menu { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-left: -12px; border: none; background: transparent; color: inherit; cursor: pointer; }
  .layout_app .l_menu svg { width: 1.875rem; height: 1.875rem; }
  .layout_app .l_head { padding: 0 16px; }
  .layout_app .l_main { padding: 16px; }
}

/* 브랜드 로고 — assets/brand/logo.svg(라이트) · logo-white.svg(다크)를 img 두 장으로 두고 테마에 따라 하나만 보인다.
   (mask로 칠하면 한 장으로 되지만 CORS 이미지라 file://로 열었을 때 안 그려진다.) 비율 416:109. 이름은 l_logo가 role="img"로 갖는다 */
.layout_app .l_logo { display: inline-flex; height: 22px; }
.layout_app .l_logo img { display: block; height: 100%; width: auto; }
.layout_app .l_logo .l_logo_dark { display: none; }
[data-theme="dark"] .layout_app .l_logo .l_logo_light { display: none; }
[data-theme="dark"] .layout_app .l_logo .l_logo_dark { display: block; }