/* ==========================================================================
  File: layout.css
  Purpose: 앱 전역 레이아웃(헤더/사이드바/콘텐츠/푸터/반응형), 사이드바 접힘 동작
  Contains:
    - Header 영역
    - Main Grid(사이드바 + 콘텐츠)
    - Sidebar(접기/펼치기 상태)
    - Content Grid / Table / Footer
    - 반응형 규칙
  Depends on: base.css (토큰 사용)
  Import order: 2 / 3
========================================================================== */

/* ===== Header ===== */
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0)), var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand { display: flex; gap: 12px; align-items: center; }
.logo {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}
.titles h1 { font-size: 18px; margin: 0; letter-spacing: .2px; }
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .1px; }
.actions { display: flex; align-items: center; gap: 8px; }
.search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-2); padding: 8px 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
}
.search-wrap input {
  width: clamp(220px, 35vw, 560px); border: none; outline: none; background: transparent; color: var(--fg);
}

/* ===== Main Layout ===== */
.app-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  padding: 18px;
  transition: grid-template-columns .25s ease;
}
.app-main.is-collapsed { grid-template-columns: 48px 1fr; }

/* ===== Sidebar ===== */
.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: calc(100dvh - 100px);
  position: sticky; top: 78px;
  display: flex; flex-direction: column;
}

/* 통합된 사이드바 헤더 */
.sidebar-head {
  height: 10%; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head .sidebar-meta,
.sidebar-head .sidebar-tools,
.sidebar-head .sidebar-ctrls,
.sidebar-head .right,
.sidebar-head .actions {
  display: flex; align-items: center; gap: 8px;
}

/* 접힘 상태에서 사이드바 내부 정리 */
.app-main.is-collapsed .sidebar {
  width: 48px; padding: 8px 6px;
  overflow: hidden; transition: width .25s ease, padding .25s ease;
  border: 1px solid var(--border);
}
.app-main.is-collapsed .sidebar > :not(.sidebar-head) { display: none !important; }
.app-main.is-collapsed .sidebar .sidebar-head {
  display: flex; justify-content: center; align-items: center;
  padding: 6px; border-bottom: 0;
}
.app-main.is-collapsed .sidebar .sidebar-head > *:not(#sidebarToggle) { display: none !important; }

/* ===== Content ===== */
.content { min-height: 60dvh; display: grid; gap: 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-soft); }
.stat-k { color: var(--muted); font-size: 12px; }
.stat-v { font-size: 21px; font-weight: 800; letter-spacing: .2px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* ===== Table ===== */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: auto; }
table { border-collapse: collapse; width: 100%; }
thead th {
  position: sticky; top: 0; background: var(--surface-2);
  border-bottom: 1px solid var(--border); z-index: 1;
}
td, th { padding: 12px 12px; border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--surface-2); }
th[data-sort] { cursor: pointer; }
th[data-sort]::after { content: " ⬍"; font-size: 12px; color: var(--muted); }

/* ===== Footer ===== */
.app-footer { padding: 14px 18px; color: var(--muted); border-top: 1px solid var(--border); }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .app-main { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: 0; height: auto; }
  .app-main.is-collapsed { grid-template-columns: 1fr; }
  .app-main.is-collapsed .sidebar {
    position: fixed; left: 8px; top: 70px;
    width: 40px; padding: 4px; background: transparent; border: 0; z-index: 20;
  }
}
@media (min-width: 1600px) {
  .app-main {
    /*
    padding-left: calc((100vw - 1400px) / 2); 
    padding-right: calc((100vw - 1400px) / 2); 
    */
  }
}