/* collabo 앱 레이아웃 — 키트 치수 준수(사이드바 248·톱바 60·본문패딩 28). */
.hidden{display:none!important}
.mono{font-family:var(--mono);font-feature-settings:'tnum' 1}
.ey{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--sub);font-size:13px}

/* ── 버튼 ── */
.btn{width:100%;padding:12px;border:0;border-radius:var(--au-radius-sm);font-weight:700;font-size:14px;
  background:var(--au-primary);color:var(--au-primary-ink)}
.btn:hover{background:var(--brand-d)}
.btn.line{background:var(--surface);border:1px solid var(--line2);color:var(--ink)}
.btn.line:hover{background:var(--surface2)}
.btn.sm{width:auto;padding:8px 14px;font-size:13px}

/* ── 로그인 게이트 ── */
#auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{background:var(--au-primary);color:var(--on-brand);padding:56px 52px;
  display:flex;flex-direction:column;justify-content:space-between}
.auth-brand .wm{font-size:26px;font-weight:800;letter-spacing:-.02em}
.auth-brand .wm b{border-bottom:3px solid var(--au-accent);padding-bottom:2px}
.auth-brand .lead{font-size:30px;line-height:1.28;font-weight:700;max-width:15ch;margin:0}
.auth-brand .lead span{color:var(--au-accent)}
.auth-brand .foot{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--on-brand-soft);text-transform:uppercase}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-form{width:360px;max-width:100%}
.auth-form .ey{margin-bottom:14px}
.auth-form h1{font-size:23px;font-weight:800;margin:0 0 4px}
.auth-form .sub{color:var(--sub);font-size:13px;margin:0 0 24px}
.orline{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:11px;margin:18px 0;
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.orline::before,.orline::after{content:'';flex:1;height:1px;background:var(--line)}
.f{margin-bottom:14px}
.f label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-bottom:6px}
.f input{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);font-size:14px;background:var(--surface);outline:none}
.f input:focus{border-color:var(--au-primary)}
.fine{color:var(--faint);font-size:11px;line-height:1.7;margin-top:20px}

/* ── 앱 셸 (키트 치수) ── */
#app{display:grid;grid-template-columns:var(--au-sidebar-w) 1fr;min-height:100vh}
.side{background:var(--surface2);border-right:1px solid var(--line);padding:20px 0;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .wm{font-size:18px;font-weight:800;padding:0 22px 18px}
.side .wm b{color:var(--au-primary)}
#nav{flex:1 1 auto;overflow-y:auto;padding:0 12px}
#nav a{display:block;padding:9px 12px;border-radius:var(--au-radius-sm);color:var(--ink2);font-size:13.5px;margin:2px 0}
#nav a:hover{background:var(--surface)}
#nav a.on{background:var(--au-primary-weak);color:var(--brand-d);font-weight:700}
.side-foot{flex:0 0 auto;padding:14px 16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.org-picker{font-size:12px;color:var(--sub)}
.org-picker select{width:100%;padding:7px 9px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface);font:inherit}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--au-topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:0 var(--au-content-pad);border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h2{margin:0;font-size:20px;font-weight:800}   /* §3: 페이지 제목 전 페이지 동일 20 */
.topbar-right{margin-left:auto;color:var(--sub)}
.content{flex:1 1 auto;overflow-y:auto;padding:var(--au-content-pad);max-width:var(--au-content-max)}

/* ── 상태 배지 (§4 의미색) ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--au-radius-pill)}
.badge.ok{background:#e4f1ea;color:var(--au-ok)}
.badge.warn{background:#f6ecd7;color:var(--au-warn)}
.badge.danger{background:#f6e3e0;color:var(--au-danger)}
.badge.info{background:#e3ecf7;color:var(--au-info)}
.badge.muted{background:var(--surface2);color:var(--sub)}

/* ── 카드·쿼터 미터 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius);padding:16px 18px;margin:0 0 var(--au-gap,20px)}
.card h3{margin:0 0 12px;font-size:16px;font-weight:800}
.qrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow .qlabel{flex:0 0 140px;font-size:13px}
.qrow .qbar{flex:1;height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.qrow .qbar>i{display:block;height:100%;background:var(--au-primary)}
.qrow .qbar>i.over{background:var(--au-danger)}
.qrow .qnum{flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--sub)}

@media(max-width:1024px){
  #app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  #nav{display:flex;flex-wrap:wrap}
  #auth{grid-template-columns:1fr}
  .auth-brand{padding:32px 24px}
}