/* jira-bridge — App shell (사이드바 레이아웃)
   기존 .header/.nav 는 그대로 두고 추가된 레이어입니다. 인증 화면은 .auth 를 계속 사용합니다. */

/* ---------- shell ---------- */
.app { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; }
.app.is-collapsed { grid-template-columns:var(--side-w-collapsed) minmax(0,1fr); }
.app-main { min-width:0; display:flex; flex-direction:column; }

/* ---------- sidebar ---------- */
.side { position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--border); }
.side-brand { height:var(--bar-h); flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 12px 0 16px; border-bottom:1px solid var(--border); }
/* ⚠ display 는 여기(CSS)서만 다룰 것 — 마크업 인라인 display 는 접힘의 display:none 을
   이겨서 접힌 레일에 로고가 남고 펼치기 버튼을 가린다(2026-08-14 실사고) */
.side-brand .brand-name { flex:1; display:flex; align-items:center; gap:7px; min-width:0; }
.side-collapse { width:24px; height:24px; border-radius:5px; border:1px solid transparent; background:none; color:var(--text-3); cursor:pointer; font-size:var(--fs-body); line-height:1; flex-shrink:0; }
.side-collapse:hover { background:var(--surface-2); color:var(--text); }
.side-nav { flex:1; overflow-y:auto; padding:12px 10px 16px; display:flex; flex-direction:column; gap:1px; }
.side-group { display:flex; align-items:center; gap:6px; font-size:var(--fs-micro); font-weight:700; color:var(--text-3);
  letter-spacing:.04em; padding:0 8px; margin:14px 0 5px; }
.side-group:first-child { margin-top:0; }
.side-group-tag { font-size:var(--fs-micro); font-weight:600; padding:1px 5px; border-radius:4px; background:var(--muted-soft); color:var(--muted-fg); letter-spacing:0; white-space:nowrap; flex-shrink:0; }
.side-link { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--radius);
  font-size:var(--fs-table); font-weight:600; color:var(--text-2); text-decoration:none; white-space:nowrap; transition:background .12s, color .12s; }
.jb .side-link:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.jb .side-link.active { background:var(--accent-soft); color:var(--accent); }
.side-link svg { flex-shrink:0; }
.side-link .side-label { flex:1; overflow:hidden; text-overflow:ellipsis; }
.side-count { font-size:var(--fs-micro); font-weight:700; padding:1px 6px; border-radius:999px; background:var(--warn-soft); color:var(--warn-fg); }
.side-foot { flex-shrink:0; display:flex; align-items:center; gap:9px; padding:10px 12px; border-top:1px solid var(--border); }
.side-foot .user-meta { flex:1; text-align:left; min-width:0; }
.is-collapsed .side-brand .brand-name, .is-collapsed .side-label, .is-collapsed .side-count,
.is-collapsed .side-group, .is-collapsed .side-foot .user-meta { display:none; }
/* 접힘: 로고를 숨기고 펼치기(›) 버튼만 레일 중앙에 — 버튼이 레일(56px) 밖으로 나가 appbar 에 가려지던 문제 */
.is-collapsed .side-brand { padding:0; justify-content:center; }
.is-collapsed .side-brand img { display:none; }
.is-collapsed .side-link { justify-content:center; padding:8px 0; }
.is-collapsed .side-foot { justify-content:center; }

/* ---------- app bar (사이드바 우측 상단) ---------- */
.appbar { position:sticky; top:0; z-index:9; height:var(--bar-h); flex-shrink:0; display:flex; align-items:center; gap:12px;
  padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); }
.appbar .spacer { flex:1; }
.appbar .search { width:260px; }
.appbar .input { padding:6px 10px; font-size:var(--fs-table); }

/* ---------- content width tiers ---------- */
.content { padding:24px 24px 64px; margin:0 auto; width:100%; }
.content.w-wide   { max-width:var(--maxw-wide); }
.content.w-form   { max-width:var(--maxw-form); }
.content.w-narrow { max-width:var(--maxw-narrow); }

/* ---------- breadcrumb ---------- */
.crumbs { display:flex; align-items:center; gap:6px; font-size:var(--fs-label); color:var(--text-3); min-width:0; }
.jb .crumbs a { color:var(--text-2); font-weight:600; text-decoration:none; }
.jb .crumbs a:hover { color:var(--accent); }
.crumbs .sep { color:var(--text-3); opacity:.7; }
.crumbs .current { color:var(--text); font-weight:600; }

/* ---------- page head (표준) ---------- */
.page-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.page-bar h1 { font-size:var(--fs-page-title); font-weight:700; margin-bottom:3px; }
.page-bar p { margin:0; color:var(--text-2); font-size:var(--fs-table); }
.page-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

@media (max-width:900px) {
  .app, .app.is-collapsed { grid-template-columns:var(--side-w-collapsed) minmax(0,1fr); }
  .side .brand-name, .side .side-label, .side .side-count, .side .side-group, .side-foot .user-meta { display:none; }
  .side-link { justify-content:center; padding:8px 0; }
}