/* 사이드바 상단 로고 블록 높이(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;

    /* 고른 탭의 옅은 면 — 폰 폭 약관 탭 머리줄(TermsAndConditions.razor #tabTerms · PrivacyConsent.razor #tabPrivacyConsent 의
       @media (max-width: 640px))에서 밑줄 대신 쓴다. 테마(tailwind) 고른 탭 글자 #4f46e5 와 대비 5.6:1(2026-10-06). */
    --sg-tab-active-soft: #eef2ff;
}

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

/* 폰 폭 제목 줄바꿈 — 한글 제목이 글자 중간에서 끊겨 한 글자만 다음 줄로 넘어가지 않게 낱말(띄어쓰기) 단위로만 감는다
   (예: 홈 히어로 「주소 하나에 담으세 / 요」, 소개 「5분이면 충분해 / 요」, 프로필 이름 h2).
   한 낱말이 칸보다 길면 overflow-wrap:anywhere 가 그 낱말 안에서 끊어 가로 넘침은 생기지 않는다 — break-word 가 아니라 anywhere 인 것은
   flex 줄 안의 제목이 최소 폭(min-content)을 가장 긴 낱말만큼 키워 옆 칸을 밀어내지 않게 하려는 것이다. 넓은 화면은 바꾸지 않는다(2026-10-06). */
@media (max-width: 640px) {
    h1, h2, h3, h4, h5, h6 {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}

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;
}

/* 폰 폭 설정 화면(ManageLayout.razor 의 .manage-content) — 빈 칸에서도 라벨을 위로 올려 두고 자리표시 글은 그 아래 왼쪽에 둔다.
   위 규칙은 자리표시 글을 칸 오른쪽 끝에 보이게 하는데, 빈 칸의 라벨은 칸 가운데 줄 왼쪽에 있어서
   폰 폭에서는 라벨과 긴 자리표시 글이 한 줄에서 겹친다(Manage/Index.razor 「휴대 전화번호」 + 「문자인증이 가능해야 해요.」).
   값은 bootstrap 이 값이 든 칸·입력 중인 칸에 쓰는 띄운 라벨 모양(padding·transform·opacity)과 같다.
   640.98px 는 MainLayout.razor.css 의 폰 분기와 같은 경계다. (2026-10-06) */
@media (max-width: 640.98px) {
    .manage-content .form-floating > .form-control:placeholder-shown {
        padding-top: 1.625rem;
        padding-bottom: .625rem;
    }

    .manage-content .form-floating > .form-control:placeholder-shown ~ label {
        opacity: .65;
        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    }

    /* 자리표시 글이 값 자리에 오므로 입력한 값과 구별되게 회색으로 둔다. 위 규칙의 --bs-secondary-color 는 bootstrap 5.3 토큰이라
       이 저장소의 bootstrap 5.1.0(wwwroot/bootstrap)에는 없어 글자색으로 물려받는다 — 그래서 5.1.0 의 자리표시 글 색인 --bs-gray-600 을 쓴다. (2026-10-06) */
    .manage-content .form-floating > .form-control::placeholder {
        color: var(--bs-gray-600);
        text-align: start;
    }
}