/*
 * CREYON 목업 — 데스크톱 AppShell 셸(사이드바 + 상단바).
 * 데스크톱 8화면(01·02·02b·02c·03·04·05·06)에 바이트 단위로 동일하게 반복되던 블록이었다
 * — 화면마다 손으로 옮겨 적으면서 하나라도 갈릴 위험을 여기서 없앤다.
 * tokens.css 뒤에 <link>한다(변수를 참조하므로 순서가 의미를 가진다).
 */

.shell{display:grid;grid-template-columns:230px 1fr;height:900px;}

/* ---- 사이드바 ---- */
.side{background:var(--sunken);border-right:1px solid var(--bd);display:flex;flex-direction:column;}
.brand{height:56px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--bd);}
/* 심볼 — imagelogo.png(원형, 배경 투명). 그 자체로 형태가 완결돼 있어 배경 칩을 두지 않는다
   (2026-08-30, docs/board/design.md "로고 심볼 인수" 참조). 40px는 실측 결과다 —
   25px에서는 중앙 게코 실루엣이 뭉개져 뭉뚝한 얼룩으로 보였다 */
.mark{width:40px;height:40px;display:block;flex:0 0 auto;}
/* 브랜드 로고 — 배경 투명 PNG. 사이드바 폭에 맞춰 높이로 고정한다 */
.blogo{height:19px;width:auto;display:block;}
.bname{font-weight:800;color:var(--tx-strong);letter-spacing:-0.01em;font-size:14px;}
.nav{display:flex;flex-direction:column;gap:2px;padding:12px 10px;}
.ni{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-sm);
  color:var(--tx);font-size:13.5px;font-weight:500;position:relative;}
.ni svg{flex:0 0 auto;color:var(--tx-muted);}
.ni.on{background:var(--surface);color:var(--accent-hover);font-weight:700;box-shadow:var(--shadow-xs);}
.ni.on svg{color:var(--accent);}
.ni.on::before{content:"";position:absolute;left:-10px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);}
.ni .lock{margin-left:auto;color:var(--tx-subtle);}
.sep{height:1px;background:var(--bd);margin:10px 12px;}
.side-foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--bd);
  font-size:11.5px;color:var(--tx-subtle);line-height:1.6;display:flex;align-items:center;gap:7px;}
.side-foot .sdot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto;box-shadow:0 0 0 3px var(--ok-sub);}

/* ---- 본문 셸 ---- */
.main{display:flex;flex-direction:column;min-width:0;}
.top{height:56px;background:var(--surface);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:12px;padding:0 20px;}
.branch{display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;border:1px solid var(--bd);
  border-radius:var(--r-sm);background:var(--surface);font-size:13px;color:var(--tx-strong);font-weight:600;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.spacer{flex:1;}
.icbtn{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--tx-muted);position:relative;}
.badge{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;
  background:var(--dang);border:1.5px solid var(--surface);}
.acct{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx-strong);font-weight:600;}
.av{width:27px;height:27px;border-radius:50%;background:linear-gradient(155deg,#dfe6e5,var(--bd-strong));
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--tx-strong);
  border:1px solid var(--bd);}