:root {
    /* 상단 배너(MainLayout.razor.css .top-row)의 PC 높이 — 단일 정의.
       구성: .top-banner-row min-height 80px + .top-nav-row height 44px + .top-row border-bottom 1px
       (세 수치의 정본은 MainLayout.razor 의 <style> 블록). 배너 아래에 걸쳐 멈춰야 하는 sticky
       요소(ManageLayout .manage-nav)의 top 오프셋이 이 변수를 쓴다 — 숫자를 직접 적지 말 것.
       (≤640px 에서는 배너가 sticky 가 아니라 이 값을 쓰지 않는다.) */
    --topband-h: 125px;

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

    /* ═══ read1004 색 체계 — 밝은 리뉴얼(사용자 확정 2026-09-29 · 정본 doc 29 §2) ═══════════════
       원칙: 공식색 인디고(#4338CA)는 「바탕」이 아니라 로고·글자·선·선택 표시에 쓰고,
       바탕은 홈 샘플책에서 온 크림·살구 보조 팔레트를 쓴다. 새 색을 지어내지 말고 여기서 고른다.
       대비비는 doc 25 §2.2 기준(본문 4.5 : 1 · 큰 글씨·비텍스트 3 : 1)으로 잰 값이다. */
    --r4-indigo: #4338CA;       /* 공식색 — 흰 바탕 글자 7.90 : 1 */
    --r4-indigo-600: #4F46E5;
    --r4-indigo-400: #818CF8;
    --r4-indigo-200: #C7D2FE;
    --r4-indigo-100: #E0E7FF;
    --r4-indigo-50: #EEF2FF;
    --r4-ink: #1E1B4B;          /* 진한 제목 글자 */
    --r4-ink-2: #312E81;
    --r4-text: #3F4A6B;         /* 본문 */
    --r4-muted: #5F6A8A;        /* 보조 글자 — 흰 5.36 : 1 */
    --r4-cream: #FFF6E6;
    --r4-cream-2: #FFFAF3;
    --r4-peach: #FFE0B8;
    --r4-peach-2: #FFC98F;
    --r4-amber: #FFC15A;
    --r4-orange: #FF8F3F;       /* 버튼 바탕 전용(글자는 진한 갈색 #4a2b00) */
    --r4-orange-ink: #A84A17;   /* 주황 글자 — 흰 5.74 · 크림 #FFF6E6 5.35 · 연인디고 #EEF2FF 5.14 : 1 (종전 #B3541E 는 연인디고 위 4.47 로 미달) */
    --r4-orange-deep: #C2410C;  /* 주황 강조 글자·흰 글자 바탕 — 흰 5.2 : 1 */
    --r4-line: #EFE3D2;         /* 크림 계열 경계선 */

    /* 페이지 상단 히어로(타이틀 띠) 공통 — 종전 어두운 보라(#2c2354→#6a5bd8) 18곳이 같은 값을 쓴다 */
    --r4-hero-bg: linear-gradient(135deg, #EEF2FF 0%, #FDF4FF 60%, #FFF7EC 100%);
    --r4-hero-border: #E0E7FF;
    --r4-hero-ink: #1E1B4B;     /* 제목 */
    --r4-hero-sub: #4C5878;     /* 설명 */
    --r4-hero-accent: #C2410C;  /* 부제·강조 */
    --r4-hero-shadow: 0 6px 20px rgba(67, 56, 202, .08);
}

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

/* PC 뷰(641px 이상) — 사이트 셸이 아이패드 가로 폭(1180px)으로 고정 중앙 배치되므로(MainLayout.razor.css .page)
   셸 밖 여백은 은은한 배경으로 채운다 (사용자 지시 2026-07-11: 모바일뷰 + 패드 고정폭 PC뷰 2종). */
@media (min-width: 641px) {
    body {
        background: linear-gradient(180deg, #eef1f7 0%, #e7ebf4 100%);
    }
}

/* ═══ 버튼·링크 역할 색 — 쓰임에 따라 사이트 전체 통일(사용자 지시 2026-09-29 · 정본 doc 29 §2-3) ═══════════
   종전 값은 프로젝트 템플릿 기본(링크 #006bb7 · .btn-primary #1b6ec2 · 초점 링 #258cfb)과 Bootstrap 5.1 기본
   (hover #0b5ed7 · 체크 #0d6efd)이 섞여 있었다. 역할은 다섯이다 — 새 버튼은 여기서 역할을 골라 쓴다:
     주요 행동   .btn-primary            인디고 채움(흰 글자 7.90) · hover #4F46E5(6.29) · 누름 #3730A3
     보조         .btn-outline-primary    인디고 테두리·글자 · hover 인디고 채움
                  .btn-outline-secondary  취소·닫기·로그아웃 — 차분한 회청 글자(#5F6A8A 5.36) + 연한 테두리
     둘러보기·강조 .btn-explore            주황 그라디언트 #FFB648→#FF8F3F + 진한 갈색 글자 #4a2b00(5.65~7.35)
     학습방 들어가기 .btn-study            민트 그라디언트 #0E8263→#0E7C74 + 흰 글자(4.78~5.06)
     위험·삭제   .btn-danger / .btn-outline-danger  빨강 #C0343F(흰 5.52 · hover #A32B35 7.11)
     링크         a · .btn-link            인디고 · hover #312E81
   관리자 화면(ComponentsForAdmin)도 같은 Bootstrap 클래스를 쓰므로 함께 바뀐다(사용자: 관리자는 상관없음 — 색만 바뀌고 모양은 그대로). */
:root {
    --r4-primary-press: #3730A3;
    --r4-danger: #C0343F;
    --r4-danger-hover: #A32B35;
    --r4-mint: #0E8263;
    --r4-mint-2: #0E7C74;
    --r4-focus-ring: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(67, 56, 202, .75);   /* 흰 바탕 위 초점 링 4.41 : 1(비텍스트 3 : 1 기준 · 종전 #258cfb) */
}

a, .btn-link {
    color: var(--r4-indigo);
}

a:hover, .btn-link:hover {
    color: var(--r4-ink-2);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: var(--r4-focus-ring);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--r4-indigo-400);
}

.form-check-input:checked {
    background-color: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

/* 주요 행동 */
.btn-primary {
    color: #fff;
    background-color: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--r4-indigo-600);
    border-color: var(--r4-indigo-600);
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--r4-indigo-600);
    border-color: var(--r4-indigo-600);
    box-shadow: var(--r4-focus-ring);
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--r4-primary-press);
    border-color: var(--r4-primary-press);
}

.btn-primary:disabled, .btn-primary.disabled {
    color: #fff;
    background-color: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

/* 보조 — 인디고 테두리 */
.btn-outline-primary {
    color: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

.btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active {
    color: #fff;
    background-color: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: var(--r4-focus-ring);
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled {
    color: var(--r4-indigo);
    background-color: transparent;
}

/* 보조 — 취소·닫기·로그아웃(중립) */
.btn-outline-secondary {
    color: var(--r4-muted);
    border-color: #C9CFDF;
    background-color: #fff;
}

.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active {
    color: var(--r4-ink);
    background-color: #F1F3F9;
    border-color: #AEB6CC;
}

.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
    box-shadow: var(--r4-focus-ring);
}

/* 위험·삭제 */
.btn-danger {
    color: #fff;
    background-color: var(--r4-danger);
    border-color: var(--r4-danger);
}

.btn-danger:hover, .btn-danger:active, .btn-danger.active {
    color: #fff;
    background-color: var(--r4-danger-hover);
    border-color: var(--r4-danger-hover);
}

.btn-outline-danger {
    color: var(--r4-danger);
    border-color: var(--r4-danger);
}

.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active {
    color: #fff;
    background-color: var(--r4-danger);
    border-color: var(--r4-danger);
}

.btn-check:focus + .btn-danger, .btn-danger:focus, .btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(192, 52, 63, .5);
}

/* 둘러보기·강조 */
.btn-explore {
    color: #4a2b00;
    background: linear-gradient(120deg, #FFB648, var(--r4-orange));
    border: none;
    font-weight: 700;
}

.btn-explore:hover, .btn-explore:focus {
    color: #4a2b00;
    filter: brightness(1.04);
}

/* 학습방 들어가기 */
.btn-study {
    color: #fff;
    background: linear-gradient(120deg, var(--r4-mint), var(--r4-mint-2));
    border: none;
    font-weight: 700;
}

.btn-study:hover, .btn-study:focus {
    color: #fff;
    filter: brightness(1.06);
}

/* Syncfusion(테일윈드 테마) 주 버튼 — 테마 기본은 #4F46E5 채움 · hover #4338CA 로 위 .btn-primary 와 명암이 반대라 맞춘다 */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background: var(--r4-indigo);
    border-color: var(--r4-indigo);
}

.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover, .e-btn.e-primary:focus, .e-css.e-btn.e-primary:focus {
    background: var(--r4-indigo-600);
    border-color: var(--r4-indigo-600);
}

.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;
}
/* ── 계정(로그인 흐름) 보조 화면 공통 카드 ─────────────────────────────────────
   비밀번호 초기화·재설정, 이메일 확인 재발송, 이중 인증, 복구 코드 화면이 함께 쓴다.
   Account/Login(.nb-login-wrap 480px)·Account/Register(.rg-wrap 640px)가 세운 중앙 카드
   생김새를 그대로 따르되, 이 다섯은 각자 <style> 을 복제하지 않고 여기 한 곳을 참조한다.
   종전에는 col-md-4(=930px 중 299px)만 써서 오른쪽 611px 를 왼쪽 정렬로 버렸다. */
.nb-auth-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 16px 48px;
}

.nb-auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 4px 16px rgba(30, 40, 80, .09);
    margin-top: 12px;
}

/* 카드 아래 보조 안내(복구 코드 안내 등) */
.nb-auth-foot {
    margin-top: 14px;
    font-size: 0.9rem;
    color: #5a6584;
}

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