/* style.css(layout-app/4040 원본, 그대로 복사해 재사용)에 없는 것만 최소 추가.
   - login-card 계열: basic-admin/auth.freeitm.com 등에서 이미 쓰던 로그인 카드 컨벤션 재사용
   - badge-green/red/gray: style.css에 badge-blue만 있어 상태표시용 색상만 추가
   - top_bar-logout-form: 로그아웃을 POST form 버튼으로 만들며 top_bar-logout 배치가 깨지지 않게 보정 */
.top_bar-logout-form { margin: 0; display: flex; }
.top_bar-logout-form button.top_bar-logout { background: none; border: none; font: inherit; cursor: pointer; }

.badge-green { background: #dcfce7; color: #15803d; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-gray { background: #f1f5f9; color: #64748b; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--clr-bg, #f5f6f8); padding: 20px; }
.login-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.1); padding: 40px 36px; width: 100%; max-width: 380px; position: relative; }
#loginLangBtn { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 5px; background: none; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #64748b; cursor: pointer; line-height: 1; }
#loginLangBtn:hover { background: #f8fafc; }
.login-remember-row { display: flex; align-items: center; gap: 6px; margin: -8px 0 16px; font-size: .8rem; color: #64748b; cursor: pointer; user-select: none; }
.login-remember-row input { margin: 0; cursor: pointer; }
.login-logo { text-align: center; margin-top: 28px; margin-bottom: 28px; }
.login-logo-text { font-size: 1.4rem; font-weight: 800; color: #1c2536; }
.login-label { display: block; font-size: .8rem; font-weight: 600; color: #64748b; margin-bottom: 5px; }
.login-input { width: 100%; box-sizing: border-box; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: .9rem; line-height: 1.5; outline: none; transition: border-color .2s; margin-bottom: 16px; background-color: #fff; }
.login-input:focus { border-color: var(--clr-primary-hover, #0042aa); }
.login-btn { width: 100%; background: #1c2536; color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.login-btn:hover { background: #2d3a4f; }
.action-notice { color: #dc2626; font-size: .82rem; margin-bottom: 12px; }
.success-notice { color: #15803d; font-size: .85rem; margin-bottom: 12px; }
.login-hint { color: #94a3b8; font-size: .75rem; text-align: center; margin-top: 16px; line-height: 1.6; }

.metric-grid-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }

/* 표준 추이 그래프(SVG area+line, 축/그리드 없는 미니멀 스타일) - smartoffice-info.js의
   렌더 패턴과 동일한 마크업(svg.chart-svg 안에 path.chart-area/path.chart-line/circle.chart-dot)
   에 대응하는 공용 클래스. 계열별 색상은 --chart-color-N 커스텀 프로퍼티로 svg에 지정. */
.chart-svg { width: 100%; height: 160px; display: block; }
.chart-area { stroke: none; }
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { stroke: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .75rem; color: var(--clr-text-sub); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chart-empty { font-size: .8125rem; color: #cbd5e1; text-align: center; padding: 40px 0; }
.log-box { background: #0f172a; color: #cbd5e1; font-family: ui-monospace, monospace; font-size: .75rem; line-height: 1.6; padding: 14px 16px; border-radius: 8px; max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; }
.section-gap { margin-top: 28px; }

/* um-photo-wrap 등 — freeitm_webmail(views/admin-domains-user-body.ejs)의 사용자 사진
   업로드 위젯과 동일한 클래스/값 그대로 재사용(이 프로젝트군 전체에서 이미 정착된 컨벤션). */
.um-photo-wrap {
  width: 170px; height: 220px; border-radius: 4px; overflow: hidden; flex-shrink: 0;
  cursor: pointer; position: relative; border: 2px dashed var(--clr-border);
  background: #f8fafc; display: flex; align-items: center; justify-content: center;
  color: var(--clr-text-sub); transition: border-color .15s;
}
.um-photo-wrap:hover { border-color: var(--clr-primary); }
.um-photo-wrap img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.um-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.um-profile-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.um-profile-fields { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* 이메일/전화/기념일 등 "여러개 등록 가능" 반복 입력 행 */
.multi-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.multi-row .field-input { margin-bottom: 0; }
.multi-row-label { max-width: 110px; flex-shrink: 0; }
.multi-row-value { flex: 1; min-width: 0; }
.multi-row-primary { display: flex; align-items: center; gap: 4px; font-size: .75rem; color: #64748b; flex-shrink: 0; white-space: nowrap; }
.multi-row-primary input { margin: 0; }

/* 저장 상태 텍스트("저장되었습니다" 등) - 142.44.163.80:3031(basic-template)의
   .cb-autosave-status 스타일을 그대로 가져와 재사용. footer-text로 쓰던 저장 상태
   문구들을 이 클래스로 교체한다. */
.save-status-text { font-size: 11px; flex-shrink: 0; transition: color .2s; min-width: 60px; text-align: right; }