/* layout.css — Notion-style shell */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ── 사이드바 ── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  min-width: 180px;
  max-width: 400px;
}
.sidebar-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
}
.sidebar-resize:hover,
.sidebar-resize.is-dragging {
  background: var(--c-primary);
  opacity: 0.3;
}
.sidebar-top {
  flex-shrink: 0;
  height: var(--panel-head-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.sidebar-menu {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar-menu:hover { scrollbar-color: rgba(0,0,0,0.15) transparent; }
.sidebar-menu::-webkit-scrollbar { width: 4px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.sidebar-menu:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }

/* 사이드바 — 링크/그룹헤드 (ERP 스타일 — 4px 라운드) */
.sidebar-link,
.sidebar-group-head {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 32px;
  padding: 0 var(--sp-3);
  margin: 1px var(--sp-2);
  color: var(--c-text-sub);
  font-size: var(--font-size);
  font-weight: var(--fw);
  border: none; background: none;
  width: calc(100% - var(--sp-4));
  border-radius: 4px;
  text-align: left; cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-link:hover,
.sidebar-group-head:hover { background: var(--c-bg-hover); color: var(--c-text); }
.sidebar-link.is-active {
  background: var(--c-bg-active);
  color: var(--c-text);
  font-weight: var(--fw-medium);
}
.sidebar-link.is-active svg { color: var(--c-primary); }
/* 아이콘/글씨 크기 통일 */
.sidebar-link svg,
.sidebar-group-head svg:first-child {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  flex-shrink: 0;
  color: var(--c-text-muted);
}
/* 맨 하위 메뉴(서브그룹 내 링크)는 아이콘 숨김 */
.sidebar-subgroup-body .sidebar-link svg:not(.sidebar-chevron),
.sidebar-subgroup-body .sidebar-link i.ph:not(.sidebar-chevron) { display: none; }
.sidebar-link-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-num {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sidebar-count { font-size: var(--font-size-sm); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.sidebar-link.is-active .sidebar-num,
.sidebar-link.is-active .sidebar-count { color: var(--c-primary); font-weight: var(--fw-medium); }
/* Phosphor 아이콘 — 사이드바 */
.sidebar-link i.ph,
.sidebar-group-head i.ph,
.sidebar-subgroup i.ph { font-size: var(--icon-md); color: var(--c-text-muted); }
.sidebar-link.is-active i.ph { color: var(--c-primary); }

/* 아코디언 그룹 */
.sidebar-group { margin: var(--sp-3) 0 0; }
.sidebar-group-head { font-weight: var(--fw-bold); }

/* 섹션별 은은한 색 — 대분류 헤드 아이콘에 살짝 틴트 (활성 시에는 active 규칙이 덮어씀) */
.sidebar-group[data-group="입력"]       > .sidebar-group-head i.ph { color: #2f9e6b; }
.sidebar-group[data-group="현황"]       > .sidebar-group-head i.ph { color: #c08a2b; }
.sidebar-group[data-group="조회"]       > .sidebar-group-head i.ph { color: #4a6cb5; }
.sidebar-group[data-group="행정/설정"]  > .sidebar-group-head i.ph { color: #7a6aa8; }
.sidebar-chevron {
  margin-left: auto;
  transition: transform var(--t-normal);
  color: var(--c-text-muted);
}
.sidebar-group.is-open .sidebar-chevron { transform: rotate(180deg); }
.sidebar-group-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-normal) ease;
}
.sidebar-group.is-open .sidebar-group-body { max-height: 1000px; }
/* 대분류 직속 자식 = 중분류 레벨과 동일 들여쓰기 */
.sidebar-child { padding-left: 24px !important; }

/* 서브그룹 (중분류) */
.sidebar-subgroup-wrap { position: relative; }
.sidebar-subgroup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 32px;
  /* 사이드바 링크와 동일한 영역 — padding으로만 들여쓰기 */
  padding: 0 var(--sp-3) 0 24px;
  margin: 1px var(--sp-2);
  border-radius: 4px;
  font-size: var(--font-size);
  font-weight: var(--fw);
  color: var(--c-text-sub);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-subgroup svg:first-child {
  width: var(--ctrl-icon);
  height: var(--ctrl-icon);
  flex-shrink: 0;
  color: var(--c-text-muted);
}
.sidebar-subgroup:hover { background: var(--c-bg-hover); color: var(--c-text); }
.sidebar-subgroup-wrap:has(.sidebar-link.is-active) .sidebar-subgroup {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}
/* 셰브론 통일 — 동일 크기/색/회전 */
.sidebar-subgroup-chevron,
.sidebar-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--t-normal);
  color: var(--c-text-muted);
  opacity: 0.6;
}
.sidebar-group.is-open > .sidebar-group-head .sidebar-chevron,
.sidebar-subgroup-wrap.is-open .sidebar-subgroup-chevron {
  transform: rotate(180deg);
}
/* 서브그룹 body */
.sidebar-subgroup-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-normal) ease;
  position: relative;
}
.sidebar-subgroup-wrap.is-open .sidebar-subgroup-body { max-height: 500px; }
/* 서브그룹 내 링크는 들여쓰기 (가로선 + 여백 확보) */
.sidebar-subgroup-body .sidebar-child { padding-left: 54px !important; }

/* ── 활성 항목만 파란색 + glow ── */
.sidebar-link.is-active {
  background: var(--c-bg-active);
  color: var(--c-primary);
  font-weight: var(--fw-medium);
}
.sidebar-link.is-active i.ph {
  color: var(--c-primary);
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

/* 활성 경로 부모 — 굵게 + 아이콘에 glow */
.sidebar-group:has(.sidebar-link.is-active) > .sidebar-group-head {
  color: var(--c-text);
  font-weight: var(--fw-bold);
}
.sidebar-group:has(.sidebar-link.is-active) > .sidebar-group-head i.ph {
  color: var(--c-primary);
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.4));
  opacity: 1;
}
.sidebar-subgroup-wrap:has(.sidebar-link.is-active) > .sidebar-subgroup {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}
.sidebar-subgroup-wrap:has(.sidebar-link.is-active) > .sidebar-subgroup i.ph {
  color: var(--c-primary);
  filter: drop-shadow(0 0 3px rgba(59, 130, 246, 0.4));
  opacity: 1;
}

.sidebar-bottom {
  border-top: 1px solid var(--c-border);
  height: var(--panel-head-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
}
.sidebar-kbd {
  font-size: var(--font-size-xs);
  color: var(--c-text-muted);
  background: var(--c-bg-hover);
  padding: 1px 4px;
  margin-left: auto;
}

.sidebar-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text-sub);
  letter-spacing: 0.5px;
}
.sidebar-divider::before,
.sidebar-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
.sidebar-divider:empty {
  margin: var(--sp-3);
}
.sidebar-divider:empty::before { display: block; }
.sidebar-divider:empty::after { display: none; }

/* ── 탑바 ── */
.topbar {
  height: var(--panel-head-h);
  display: flex; align-items: center;
  padding: 0 var(--panel-head-px);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
  gap: var(--sp-3);
  position: relative;
}
.topbar-title {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}
.topbar-page-actions {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-left: auto;
}
.topbar-page-actions:empty { display: none; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-3); }

/* 검색창 */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  width: 240px;
  transition: border-color var(--t-fast);
}
.search-box:focus-within { border-color: var(--c-border-strong); }
.search-box svg { color: var(--c-text-muted); flex-shrink: 0; }
.search-box input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--c-text);
  width: 100%;
  height: 100%;
}
.search-box input::placeholder { color: var(--c-text-muted); }

.topbar-status {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-xl);
  color: var(--c-text-muted);
  pointer-events: none;
}
/* topbar-center 안에 있을 땐 일반 흐름 (이중 absolute 방지) */
.topbar-center .topbar-status {
  position: static;
  transform: none;
  font-size: inherit;
  color: inherit;
}

.main { display: flex; flex-direction: column; overflow: hidden; }

/* ── 워크스페이스 ── */
.workspace {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
}
.workspace.layout-1 { flex-direction: column; }
.workspace.layout-1 > .panel { flex: 1; min-height: 0; }
.workspace.layout-55 > :first-child { flex: 1; min-width: 0; }
.workspace.layout-55 > :last-child  { flex: 1; min-width: 0; }
.workspace.layout-37 > :first-child { flex: 3; min-width: 0; }
.workspace.layout-37 > :last-child  { flex: 7; min-width: 0; }
.workspace.layout-66 > :first-child { flex: 6; min-width: 0; }
.workspace.layout-66 > :last-child  { flex: 4; min-width: 0; }
/* 3패널 (목록:입력:컨텍스트) — 목록 고정, 입력:이력 = 5:5 */
.workspace.layout-254 > .panel:nth-of-type(1) { flex: 0 0 220px; min-width: 0; }
.workspace.layout-254 > .panel:nth-of-type(2) { flex: 1 1 0; min-width: 0; }
.workspace.layout-254 > .panel:nth-of-type(3) { flex: 1 1 0; min-width: 0; }

/* 패널 사이 세로 구분선 (리사이즈 없을 때) */
.workspace > .panel + .panel { border-left: 1px solid var(--c-border); }

/* ── 패널 리사이즈 ── */
.panel-resize-handle {
  width: 1px;
  cursor: col-resize;
  flex-shrink: 0;
  background: var(--c-border);
  position: relative;
}
.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -4px; right: -4px;
}
.panel-resize-grip { display: none; }
body.is-resizing { cursor: col-resize; user-select: none; }
body.is-resizing * { pointer-events: none; }
body.is-resizing .panel-resize-handle { pointer-events: auto; }

/* ── 프로필 페이지 ── */
.profile-page {
  max-width: 400px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.profile-header {
  text-align: center;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.profile-avatar {
  width: 56px; height: 56px;
  background: var(--c-bg-active);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-3);
}
.profile-name { font-size: var(--font-size); font-weight: var(--fw-bold); }
.profile-email { font-size: var(--font-size); color: var(--c-text-muted); margin-top: 2px; }
.profile-section {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.profile-section:last-child { border-bottom: none; }
.profile-section-title { font-size: var(--font-size); font-weight: var(--fw-bold); }
.profile-section .btn { width: 100%; justify-content: center; }

/* ── 빈 상태 ── */
.empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-3);
  height: 100%;
  color: var(--c-text-muted);
  font-size: var(--font-size);
}