/* 사이드바 상단 로고 블록 높이(PC, 641px 이상) — 단일 정의.
   NavMenu.razor.css / AdminMenu.razor.css 가 .nav-logo-container 의 height 와
   .nav-scrollable 의 height 계산식에서 이 변수를 함께 쓴다.
   값 근거: 로고 images/suggestly_MenuLogo06.png(원본 230 × 132)를 사이드바 폭 250px
   (MainLayout.razor.css .sidebar)에 맞춘 렌더 높이 = 250 × 132 ÷ 230 ≒ 143px.
   로고 이미지를 바꾸면 이 값 하나만 고친다(계산식이 같은 변수를 참조하므로 어긋나지 않는다). */
:root {
    --sidebar-header-h: 143px;

    /* 상단 배너(MainLayout.razor.css .top-row)의 PC 높이 — 단일 정의.
       .top-row 의 height 와 배너 아래에 걸쳐 멈춰야 하는 sticky 요소(ManageLayout .manage-nav)의
       top 오프셋이 이 변수를 함께 쓴다. 숫자를 직접 적지 말 것.
       (≤640px 에서는 MainLayout.razor <style> 이 height:auto 로 풀고 배너도 sticky 가 아니다.) */
    --topband-h: 3.5rem;

    /* ═══ 쌓임 순서(z-index) 층 체계 — 전역 단일 정의 ═══════════════════════
       화면은 아래 네 층뿐이다. 새 z-index 를 만들 때 숫자를 새로 지어내지 말고 이 중 하나를 고른다.
       팀이 나중에 팝업을 하나 더 만들 때 다른 파일을 뒤져 숫자를 맞추지 않게 하려는 것이 목적이다.

         0 ~ 99         본문(article) 안의 페이지 요소 — 히어로 오버레이·배지·장식·
                        캐러셀 내비게이터·표 머리행 등. 본문은 배너 아래로 스크롤되어
                        가려져야 하므로 100 이상을 쓰지 않는다.
         --z-topband    상단 배너(MainLayout.razor.css 의 .top-row)
         --z-sidebar    사이드바(.sidebar) — PC 든 모바일이든 같은 값. 사이트 크롬이다.
         --z-popup      팝업 계열 전부 — 모달·다이얼로그·드로어·전면 오버레이·확인창·
                        처리 중 오버레이·전체화면 인수 화면. 값이 하나뿐이라 새 팝업을 만들 때
                        기존 팝업의 숫자를 찾아볼 필요가 없다.
                        배경막 위에 패널을 올리는 짝에만 예외로
                        배경막 var(--z-popup) · 패널 calc(var(--z-popup) + 1) 을 쓴다.
         --z-popup-top  팝업 위에 떠야 하는 소수 — 전역 오류 표시(#blazor-error-ui),
                        앱 갱신·네트워크 배너, 토스트, 로그인 직후 차단 게이트,
                        서버 점검 인수 화면. 여기에 넣기 전에 정말 모달보다 위여야
                        하는지 먼저 따진다. 여기까지가 전부다 — 다섯 번째 층을 만들지 않는다.

       ★ 숫자를 이렇게 정한 이유 — Syncfusion 팝업 때문이다.
         Syncfusion(e-dialog·e-popup·드롭다운·달력)은 z-index 를 CSS 가 아니라 런타임에
         계산해 인라인 style 로 박는다(popup.min.js 의 getZindexPartial):
           (팝업의 조상들 + document.body 직계 자식들 + 형제들 의 z-index) 와
           리터럴 999 중 최댓값 + 1.
         따라서 우리 값이 모두 999 미만이면 Syncfusion 팝업은 항상 정확히 1000 으로
         계산되어 우리 모든 층 위에 뜬다 — 배너에 가릴 수 없다. 반대로 우리가 1000 이상을
         쓰면 Syncfusion 값도 그만큼 같이 올라가 순서가 그때그때 달라진다.
         그래서 최상단인 --z-popup-top 도 999 미만으로 둔다.

       ★ 상단 배너·사이드바는 ≥641px 에서 position:sticky 라 그 자체로 쌓임 맥락을 만든다.
         쌓임 맥락 안의 값은 밖과 겨루지 않으므로, 본문에 새 쌓임 맥락(z-index·transform·
         filter·isolation)을 만들어 가두는 방식은 쓰지 않는다 — 그 안의 모달까지 함께 갇힌다. */
    --z-topband: 200;
    --z-sidebar: 210;
    --z-popup: 900;
    --z-popup-top: 950;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}