/* ═══ 헤더 체계 A안 '한 띠' — 전역 토큰 ══════════════════════════════════════
   사이드바 로고 블록(NavMenu·AdminMenu)과 상단 배너(MainLayout .top-row)가 같은 높이라
   두 하단선이 같은 y 에서 만나 화면을 가로지르는 어두운 띠 하나가 된다.

   ★ 높이는 여기 --sidebar-header-h 한 곳에서만 정의한다. 로고 블록·상단 배너·메뉴 스크롤
     높이(NavMenu.razor.css / AdminMenu.razor.css 의 calc)가 모두 이 변수를 참조하므로,
     값을 바꿀 때 다른 파일을 함께 고칠 필요가 없다. 계산식에 숫자를 직접 적지 말 것
     — 로고만 키우고 메뉴 calc 를 두고 가면 사이드바가 뷰포트보다 길어진다(형제 리포 실발생).
   CSS 커스텀 속성은 스코프 CSS 경계를 넘어 DOM 으로 상속되므로 .razor.css 에서도 쓸 수 있다. */
:root {
    --sidebar-header-h: 120px;   /* 사이드바 브랜드 락업 블록의 높이(하단 경계선 포함) */
    --topband-h: var(--sidebar-header-h); /* 상단 배너 높이 — 같은 선에서 만나야 하므로 별도 수치를 두지 않는다 */
    --hs-gold: #FFD54A;          /* 브랜드 강조 금색(.com · 별 · 띠 이음매) */

    /* ═══ 쌓임 순서(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;
}

/* 해시 앵커(#id) 이동 보정 — ≥641px 에서만.
   상단 배너가 sticky 라 `href="#id"` 로 이동하면 대상의 윗부분이 배너 뒤에 숨는다.
   배너 높이만큼 미리 띄워 멈추게 한다. 사용처: 서비스 랜딩의 '요금·패스 보기' 앵커
   (AiAgentLanding #agl-grades · Ideal16Landing #i16l-passes · LoveMoneyLanding #lml-passes ·
    PvsNpLanding #pn-passes). ≤640px 에서는 배너가 sticky 가 아니라 보정하지 않는다. */
@media (min-width: 641px) {
    article [id] {
        scroll-margin-top: var(--topband-h);
    }
}

/* ═══ 사이드바 브랜드 락업(A안) ════════════════════════════════════════════
   회원(NavMenu)·관리자(AdminMenu) 사이드바가 같은 마크·같은 조판·같은 높이를 쓰도록
   여기 한 벌만 둔다(스코프 CSS 로 나누면 두 화면이 어긋난다). 두 화면의 차이는
   .hs-tagline 문구뿐이다(회원 HYPER SERVICE MARKETPLACE / 관리자 ADMIN CONSOLE).
   마크는 브랜드 정본 SVG(_로고등\HYPSVC표준로고\HYPSVC-mark_dark.svg)를 크기만 조절해 쓴다
   — 반전·회전·색변경 금지, 최소 사용 크기 48px. */
.nav-logo-container {
    /* 블록 높이를 변수로 못 박는다. 안의 <a> 가 block-level flex 라 baseline 디센더 여백이
       생기지 않지만, 인라인 요소가 섞여 들어와도 선언 높이가 어긋나지 않도록 line-height 를 0 으로
       두고 락업 안에서 다시 되살린다. */
    height: var(--sidebar-header-h);
    line-height: 0;
    overflow: hidden;
}

.hs-lockup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: 13px 12px 9px;
    line-height: normal;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.hs-lockup-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.hs-lockup-mark {
    display: block;
    flex: none;
    width: 66px;
    height: 66px;
}

.hs-lockup-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 워드마크·태그라인 서체: 폭이 좁은 Bahnschrift 우선(윈도우), 없으면 Segoe UI → Arial.
   리눅스(App Service) 에서는 Arial 로 떨어지며 250px 사이드바 안에 여전히 들어온다. */
.hs-wordmark,
.hs-tld,
.hs-tagline {
    font-family: 'Bahnschrift', 'Segoe UI', Arial, sans-serif;
}

.hs-wordmark {
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.005em;
    /* GalaxyCore 로고에서 가져온 흰→연보라 그라데이션 */
    background-image: linear-gradient(96deg, #FFFFFF 0%, #F2EDFF 40%, #BBC8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FFFFFF; /* background-clip 미지원 브라우저 폴백 */
}

.hs-tld {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    margin-top: 3px;
    color: var(--hs-gold);
}

/* 오리지널 로고의 구분선 + 가운데 금색 4점 별 */
.hs-divrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.hs-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 221, 255, 0.9) 45%, rgba(214, 221, 255, 0.9) 55%, transparent);
}

.hs-star {
    flex: none;
    display: block;
    width: 11px;
    height: 11px;
    fill: var(--hs-gold);
}

.hs-tagline {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 8.6px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.155em;
    text-transform: uppercase;
    background-image: linear-gradient(90deg, #B27BFF 0%, #9AA6FF 46%, #4EA3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #B27BFF; /* 폴백 */
}

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