/* 에이드리븐 ERP — 아직 디자인 시스템으로 옮기지 못한 화면 CSS.
*
* ## 왜 파일이 하나인가
*
* `dashboard.css`와 `accounting.css`로 나뉘어 있었는데, 그 경계가 실제
* 화면과 맞지 않았다. `.error-banner`가 dashboard.css의 **로그인 섹션**에
* 정의돼 있는데 전 모듈이 쓰고 있었고, 표·패널은 accounting.css에 있는데
* 판매 화면도 같은 것을 썼다. 그래서 화면마다 ``를 하나 더 붙이고
* 있었다(네 곳).
*
* 겹치는 선택자는 `.btn-link` 하나뿐이었고 선언도 같았다 — 합치는 데
* 위험이 없다는 뜻이다.
*
* ## 이 파일은 임시다
*
* **레이어 밖**이라 adriven-ui.css의 모든 규칙을 이긴다(그게 이행 중에
* 화면이 깨지지 않는 장치다 — adriven-ui.css 머리말 참고). 부품이 하나씩
* 옮겨갈 때마다 여기서 지운다. 다 옮기면 이 파일이 사라진다.
*
* 새 규칙은 여기 넣지 않는다. 디자인 시스템(`ds/<버전>/adriven-ui.css`)의
* `ad.component` 레이어에 넣는다.
*/
/* ==========================================================================
대시보드 · 로그인 (옛 dashboard.css)
========================================================================== */
/* Portal-specific styles layered on top of vendor/erp-design-tokens/tokens.css.
Only new, domain-specific rules live here — never redefine a --token
name from tokens.css locally (see that submodule's README). */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--font-size-base);
background: var(--bg-primary);
color: var(--text-primary);
}
.muted { color: var(--text-secondary); }
.btn {
display: inline-block;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
border: none;
font-family: inherit;
font-size: inherit;
cursor: pointer;
text-decoration: none;
transition: var(--transition-fast);
}
.btn-primary {
background: var(--primary);
color: var(--text-inverse);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-link {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
font-size: inherit;
text-decoration: underline;
}
/* --- Login --- */
.login-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-8);
width: 100%;
max-width: 360px;
text-align: center;
}
.login-card h1 { margin: 0 0 var(--space-2); font-size: 1.25rem; }
.login-card .btn { margin-top: var(--space-6); width: 100%; }
.error-banner {
background: var(--danger-bg);
color: var(--danger);
border-radius: var(--radius-sm);
padding: var(--space-3);
margin-top: var(--space-4);
font-size: 0.875rem;
}
/* --- Dashboard --- */
.topbar {
background: var(--header-bg);
border-bottom: 1px solid var(--header-border);
color: var(--header-text);
padding: var(--space-4) var(--space-6);
display: flex;
justify-content: space-between;
align-items: center;
}
/* .topbar-title은 _ui.html의 logo() 매크로로 대체됐다(.ad-logo). */
.topbar { min-height: var(--ad-topbar-h); box-sizing: border-box; }
.topbar-user { display: flex; align-items: center; gap: var(--space-3); }
/* 카드 다섯이 한 줄에 들어가는 폭. 1040px이면 4+1로 끊겨서, 없앤 묶음이
다시 생긴 것처럼 보였다. */
.dashboard-shell { padding: var(--space-6); max-width: 1200px; margin: 0 auto; }
/* 카드 안 아이콘 칩은 글자 위에 자리를 잡는다(칩 -> 이름 -> 설명).
칩이 세로로 늘어나지 않게 자기 크기만 차지한다. */
.tile > .ad-tile-icon { margin-bottom: var(--space-1); }
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
}
.tile {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.tile-name { font-weight: 600; }
.tile-disabled { opacity: 0.5; }
/* --- 카드 위의 「지금 상태」 ------------------------------------------------
카드가 링크 다섯 개였을 때는 이름과 설명뿐이었다. 이제 **숫자가 먼저
읽혀야** 이 화면을 여는 이유가 생긴다(SAP Fiori 홈 지침).
숫자를 크게, 이름표를 작게. 두 칸이 나란히 서고, 좁아지면 아래로 내려간다. */
.tile-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin-top: var(--space-1);
}
.tile-stat { display: flex; flex-direction: column; gap: 1px; }
.tile-stat__value {
font-size: 1.125rem; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
color: var(--text-primary);
}
.tile-stat__label { font-size: 0.75rem; color: var(--text-secondary); }
/* **조치가 필요한 것에만** 색이 붙는다. 정상 건까지 물들이면 색이 정보를
잃는다 — 알약(.pill)에 쓰는 규칙과 같다. */
.tile-stat--urgent .tile-stat__value { color: var(--danger); }
.tile-stat--urgent .tile-stat__label { color: var(--danger); }
/* 카드 전체가 클릭 대상이다(「열기」 버튼 없음). 와