/* 한글 글꼴 (MudBlazor 기본 Roboto 대신) */
html, body, .mud-typography, .mud-input, .mud-input-label, .mud-button, .mud-table, .mud-nav-link, .mud-chip, .mud-snackbar {
    font-family: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif !important;
}

body { margin: 0; background: #f5f7fa; }

/* Blazor 연결 오류 표시줄 */
#blazor-error-ui {
    background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 2000;
}
#blazor-error-ui .reload { margin-left: .5rem; }

/* ── 로그인 화면 (정적 렌더링) ── */
.account-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 380px; background: #fff; border-radius: 12px; padding: 32px 28px; box-shadow: 0 2px 12px rgba(0,0,0,.08); box-sizing: border-box; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; color: #1F4E79; }
.login-sub { margin: 0 0 20px; color: #666; font-size: 14px; }
.login-card label { display: block; margin: 14px 0 6px; font-size: 14px; color: #333; }
.login-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 15px; border: 1px solid #c8ccd2; border-radius: 6px; }
.login-input:focus { outline: none; border-color: #2E75B6; box-shadow: 0 0 0 3px rgba(46,117,182,.15); }
.login-remember { display: flex !important; align-items: center; gap: 6px; }
.login-button { width: 100%; margin-top: 20px; padding: 11px; font-size: 15px; color: #fff; background: #1F4E79; border: 0; border-radius: 6px; cursor: pointer; }
.login-button:hover { background: #2E75B6; }
.login-error { background: #fdecea; color: #b71c1c; padding: 10px 12px; border-radius: 6px; font-size: 14px; margin-bottom: 8px; }
.login-validation { color: #b71c1c; font-size: 13px; }
.login-help { margin: 20px 0 0; font-size: 13px; color: #888; }

/* ── 결재선 입력 행: 번호 | 구분 | 결재자 | 버튼 을 고정 폭 격자로 배치 ── */
.line-row {
    display: grid;
    grid-template-columns: 28px 120px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}
.line-row .mud-input-control { margin-top: 0 !important; min-width: 0; }
.line-row .line-user .mud-select-input,
.line-row .line-user .mud-input-slot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-actions { display: flex; white-space: nowrap; }

/* ── 사용자 선택기: [부서] [이름] ── */
.user-picker {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 8px;
    align-items: center;
}
.user-picker .mud-input-control { margin-top: 0 !important; min-width: 0; }
.user-picker .user-picker-name input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 휴대폰: 결재자 칸을 다음 줄 전체 폭으로, 부서·이름은 위아래로 */
@media (max-width: 600px) {
    .line-row { grid-template-columns: 28px 1fr auto; }
    .line-row .line-user { grid-column: 1 / -1; grid-row: 2; }
    .user-picker { grid-template-columns: 1fr; }
}

/* ── 서명 미리보기: PDF 결재란 한 칸과 비슷한 비율 ── */
.sign-preview {
    width: 140px; height: 90px; border: 1px solid #9e9e9e; border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff;
}
.sign-preview img { max-width: 120px; max-height: 60px; object-fit: contain; }
.sign-preview-name { font-size: 11px; color: #616161; margin-top: 2px; }
.sign-preview-empty { font-size: 12px; color: #9e9e9e; text-align: center; line-height: 1.4; }