/* 새 디자인(피그마 2026-10-20 사본 hrkV · 디자인 변경이력 10.16~10.19) 덧붙임 — 퍼블리싱 · 개발이 같이 씀
   10B 가입: B-02 갈래 4개 · B-11 계정 만들기 · B-11A 학년 펼침 · B-12 보호자 동의 · B-13/13A 기관 코드 · B-14 완료
             B-21 선생님 학년 「선생님」 고정 · B-22/22A · B-23 · B-51/52 개인
   pub-1013.css 다음에 붙입니다. */

/* 계정 만들기 카드 — 640 · 단계 표시 아래 26 (B-11 1721:7673) */
.auth-card--flow.auth-card--640 { width: min(640px, 100%); }
.auth-card--flow .auth-card__desc + .org-steps { margin-top: 14px; }
.auth-card--flow .auth-card__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--vb-color-brand-green, #228a4f); }
.auth-card--flow .auth-card__body { width: 100%; }

/* 개발 쪽 닉네임 칸(디자인에 없음 · 2026-10-12 사용자 결정) — 한 칸 전체 폭 */
.auth-grid--one { grid-template-columns: 1fr; }

/* 만 14세 미만 안내 (B-11 1721:7716) */
.auth-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #7a887f; }

/* 학년 고르기 — 닫힌 칸 + 펼친 알약 묶음 (B-11 1820:7613 · B-11A 1820:7683) */
.grade-pick { position: relative; }
.grade-pick > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.grade-pick__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 20px 0 17px; border-radius: 8px;
    font-size: 16px; line-height: 26px; text-align: left; color: var(--vb-color-text-primary, #1f3326); cursor: pointer; }
.grade-pick__btn::after { content: ""; flex: none; width: 16px; height: 16px; background: url("../images/icons/chevron-down.svg") no-repeat center / 13.8px 7.8px; transition: none; }
.grade-pick__btn.is-empty { color: var(--vb-color-text-muted, #6b766f); font-size: 14px; }
.grade-pick.is-open .grade-pick__btn { border: 1.5px solid var(--vb-color-brand-green, #228a4f); }
.grade-pick.is-open .grade-pick__btn::after { transform: rotate(180deg); }
.grade-pick__btn.input--error { border-color: var(--vb-color-semantic-error, #c8402c); }
.grade-pick__panel { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 10px 16px 12px; border: 1px solid var(--vb-color-border-default, #e1e6e3);
    border-radius: 12px; background: #fff; box-shadow: 0 14px 30px rgba(16, 69, 47, 0.12); }
.grade-pick__panel[hidden] { display: none; }
.grade-pick__group { display: flex; flex-direction: column; gap: 6px; }
.grade-pick__group > span { font-size: 12px; color: var(--vb-color-text-muted, #6b766f); }
.grade-pick__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.grade-pick__opt { height: 32px; padding: 0 13px; border: 1px solid var(--vb-color-border-default, #e1e6e3); border-radius: 999px; background: #fff;
    font: inherit; font-size: 13.5px; color: var(--vb-color-text-secondary, #5a6a5f); cursor: pointer; }
.grade-pick__opt:hover { border-color: var(--vb-color-brand-green, #228a4f); }
.grade-pick__opt:disabled { border-color: #eef1ef; background: #f5f6f5; color: #b6bfba; cursor: not-allowed; }
.grade-pick__opt[aria-pressed="true"] { border-color: var(--vb-color-brand-green, #228a4f); background: var(--vb-color-brand-green, #228a4f); font-weight: 600; color: #fff; }
.grade-pick__line { height: 1px; background: #eef1ef; }

/* 선생님 갈래 — 학년 칸 「선생님」 고정 + 「기관 선생님으로 가입」 칩 (B-21 1820:7844) */
.grade-fixed { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 12px 0 17px;
    border: 1px solid var(--vb-color-border-default, #e1e6e3); border-radius: 8px; background: #fff; font-size: 16px; line-height: 26px; color: var(--vb-color-text-primary, #1f3326); }
.grade-fixed__chip { padding: 2px 10px; border-radius: 999px; background: #eaf7ec; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--vb-color-brand-green, #228a4f); }

/* 기관 코드 — 정원 가득일 때만 「나중에 입력할게요」 (B-13A · B-22A) */
.auth-later { margin: 18px 0 0; text-align: center; font-size: 14px; line-height: 1.5; }
.auth-later a { font-weight: 600; color: var(--vb-color-brand-green, #228a4f); text-decoration: underline; text-underline-offset: 3px; }
.auth-later + .auth-more--flow { margin-top: 14px; }

/* 도서 범위 고르기 — 라디오 카드 둘 (B-31 · B-51 · B-52) · 고른 카드 = 초록 테두리 1.5 · 연초록 */
.book-scope { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.book-scope[hidden] { display: none; }
/* 만 14세 미만 — 보여 주되 고를 수 없게(보호자가 다음 단계에서 고름) */
.book-scope.is-locked .book-scope__opt { opacity: .5; cursor: not-allowed; }
.book-scope.is-locked .book-scope__opt input { cursor: not-allowed; }
.book-scope.is-locked .book-scope__note { color: var(--vb-color-brand-green, #228a4f); font-weight: 600; }
.book-scope + .auth-agree, .book-scope + ul { margin-top: 16px; }
/* 입력 칸 묶음 바로 아래(보호자 동의 B-52 · 인증번호 칸 아래)에 올 때 사이 24 — 붙어 보였음 (2026-10-20 사용자 「코딩 이상해」) */
.auth-fields + .book-scope { margin-top: 24px; }
.auth-fields .book-scope { margin-top: 8px; }
.org-seat + .book-scope { margin-top: 24px; }
.book-scope + .org-agrees { margin-top: 16px; }
.book-scope__title { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--vb-color-text-primary, #1f3326); }
.book-scope__opt { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--vb-color-border-default, #e1e6e3); border-radius: 14px; background: #fff; cursor: pointer; }
.book-scope__opt:has(input:checked) { padding: 15.5px 17.5px; border: 1.5px solid var(--vb-color-brand-green, #228a4f); background: #f7fcf8; }
.book-scope__opt input { flex: none; appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; background: url("../images/icons/radio-off-20.svg") no-repeat center / 20px 20px; cursor: pointer; }
.book-scope__opt input:checked { background-image: url("../images/icons/radio-on-20.svg"); }
.book-scope__opt input:focus-visible { outline: 2px solid var(--vb-color-brand-green, #228a4f); outline-offset: 2px; border-radius: 50%; }
.book-scope__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.book-scope__text b { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--vb-color-text-title, #0f381f); }
.book-scope__text b em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--vb-color-brand-green, #228a4f); }
.book-scope__text > span { font-size: 13px; line-height: 20px; color: var(--vb-color-text-muted, #6b766f); }
.book-scope__note { margin: 0; font-size: 13px; color: var(--vb-color-text-muted, #6b766f); }

/* 보호자 전용 도서 범위 안내 (STU-13 1821:7898 · 기관 학생 STU-13B 1821:7978 회색 · 토글 흐림) */
.mb-scope-note { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--vb-color-brand-green-surface, #f1faee); font-size: 14px; line-height: 20px; color: var(--vb-color-text-primary, #1f3326); }
.mb-scope-note.is-locked { background: #f5f6f5; }
.mb-list--setting li.is-locked { opacity: .55; }
.mb-list--setting li.is-locked .mb-toggle { cursor: default; }

/* 기관 등록 담당자 — 인증 안내 줄은 칸 바로 아래 왼쪽 · 「인증 완료 ✓」 단추 (2026-10-20 사용자 「인증되었다고 나오는 부분 이상해」 · org.css 의 가운데 안내 줄을 이 화면 칸 묶음 안에서만 바꿈) */
.org-fields .org-verify-note { margin: -4px 0 0; text-align: left; }
.org-card .btn--ok, .org-card .btn--ok:disabled { background: #f0f7f2; box-shadow: inset 0 0 0 1px var(--vb-color-brand-green, #228a4f); border-color: transparent; color: var(--vb-color-brand-green, #228a4f); font-weight: 600; opacity: 1; cursor: default; }

@media (max-width: 640px) {
    .grade-pick__panel { padding: 10px 12px 12px; }
}