/* 디자인 변경이력 2026.10.13 반영분 — 개발 쪽 덧붙임 (피그마 2026-10-14 사본 T2R5…)
   디자인 저장소(veribooks_design)의 css 는 고치지 않고, 바뀐 모양만 여기서 덮어씁니다.
   디자이너가 디자인 저장소에 같은 내용을 넣으면 그 묶음은 여기서 지웁니다. */
@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css");

/* ① 풀이 팝업 딤 — 리딩레이스 · 씽킹레이스 · 레벨테스트 · 문항 오류 신고 (#101418 90% · Overlay/Dim) */
.r-modal__dim,
.r-modal--v2 .r-modal__dim,
.tf-modal__dim,
.qr-modal__dim { background: rgba(16, 20, 24, .9); }
/* 문항 오류 신고 창 · 시험 중 화면(리딩레이스 응시 · 씽킹레이스 작성 · 고쳐 쓰기 · 레벨테스트 = body[data-exam])의 팝업 — 모두 디자인 변경이력대로 #101418 90%
   (2026-10-14 사용자 「/race/112 … 디자인처럼 해줘 · 레벨테스트하고 동일해야 해」 · 오전엔 사용자 요청으로 100% 완전히 가렸다가 디자인대로 되돌림)
   q-report.css 를 늦게 불러와도 이기게 한 단계 더 세게 */
.qr-modal .qr-modal__dim,
body[data-exam] .r-modal__dim,
body[data-exam] .r-modal--v2 .r-modal__dim,
body[data-exam] .tf-modal__dim,
body[data-exam] .qr-modal .qr-modal__dim { background: rgba(16, 20, 24, .9); }

/* ② 페이지 제목 서체 — 나눔스퀘어 네오 ExtraBold 34px (Brand/H1/34 · 고객지원 · 정책 · 나의 독서 · 개인메뉴) */
.sp__title,
.my-title,
.mb__title {
    font-family: "NanumSquareNeoExtraBold", "NanumSquareNeoVariable", "NanumSquare Neo", "Pretendard Variable", sans-serif;
    font-weight: 800;
}

/* ③ 안내 박스 — 제목 바로 아래 (문의하기 1633:5217 · 오류 제보 · 독서 리포트 · 이달의 추천도서) */
.vb-infobox {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 50px 0 48px;
    padding: 24px 28px;
    border: 1px solid var(--vb-color-brand-green-line, #d5e8d5);
    border-radius: 16px;
    background: var(--vb-color-brand-green-surface, #f1faee);
}
.vb-infobox__icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--vb-color-brand-green, #228a4f);
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    color: var(--vb-color-surface-white, #fff);
}
.vb-infobox__body { flex: 1 0 0; min-width: 0; }
.vb-infobox__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--vb-color-text-title, #0f381f); }
.vb-infobox__list { margin: 0; padding: 0; list-style: none; }
.vb-infobox__list li { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--vb-color-text-primary, #1f3326); }
.vb-infobox__list li::before { content: "• "; }
.vb-infobox__btn {
    flex: none;
    padding: 10px 18px;
    border: 1px solid var(--vb-color-brand-green, #228a4f);
    border-radius: 999px;
    background: var(--vb-color-surface-white, #fff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vb-color-brand-green-dark, #17633f);
    white-space: nowrap;
}
@media (max-width: 720px) {
    .vb-infobox { flex-wrap: wrap; margin: 28px 0 32px; padding: 20px; }
    .vb-infobox__body { flex-basis: calc(100% - 48px); }
    .vb-infobox__list li { white-space: normal; }
}

/* ④ 문의하기 — FAQ 는 3개만 · 「질문 더보기 (n)」 ↔ 「접기」 (1633:5227) */
.sp-faq-more { display: flex; justify-content: flex-end; margin-top: 12px; }
.sp-faq-more button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--vb-color-brand-green, #228a4f);
    cursor: pointer;
}
.sp-faq-more img { width: 14px; height: 14px; transition: transform .25s; }
.sp-faq-more button[aria-expanded="true"] img { transform: rotate(180deg); }

/* ⑤ 필터 「초기화」 — 글자 대신 아이콘 단추 (버튼/아이콘 초기화 1632:5224 · 36 = 인증도서 찾기 · 44 = 홈 상세검색) */
.vb-reset {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vb-color-border-default, #e1e6e3);
    border-radius: 999px;
    background: var(--vb-color-surface-white, #fff);
    cursor: pointer;
}
.vb-reset img { display: block; width: 18px; height: 18px; }
.vb-reset--44 { width: 44px; height: 44px; }
.vb-reset--44 img { width: 22px; height: 22px; }
.vb-reset:disabled { opacity: .4; cursor: default; }
.vb-reset:not(:disabled):hover { border-color: var(--vb-color-brand-green, #228a4f); }
.vb-reset::after {
    content: "초기화";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--vb-color-text-title, #0f381f);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .15s;
    pointer-events: none;
}
.vb-reset:not(:disabled):hover::after,
.vb-reset:not(:disabled):focus-visible::after { opacity: 1; }

/* ⑥ 인증 엠블럼 — 리본 대신 흰 원 + 그림자 (인증 엠블럼 1649:107 · 원 32 · 8px 겹침 · 앞 원이 위)
      기관 원 안은 기관 로고 이미지 자리 — 로고가 없는 동안은 기관 이름 첫 글자 */
.vb-emblem { position: absolute; z-index: 2; display: flex; align-items: flex-start; isolation: isolate; }
.vb-emblem > span {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: -8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 40, 28, .22);
}
.vb-emblem > span:nth-child(1) { z-index: 3; }
.vb-emblem > span:nth-child(2) { z-index: 2; }
.vb-emblem > span:nth-child(3) { z-index: 1; }
.vb-emblem__vb i {
    display: block;
    width: 21px;
    height: 17px;
    background: var(--vb-color-brand-green, #228a4f);
    -webkit-mask: url("/images/emblem-logo-mask.png") 0 0 / 102px 16.8px no-repeat;
    mask: url("/images/emblem-logo-mask.png") 0 0 / 102px 16.8px no-repeat;
}
.vb-emblem__org i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #e0912f;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.vb-emblem__org img { display: block; width: 24px; height: 24px; border-radius: 12px; object-fit: cover; }
.vb-emblem__more { font-size: 12px; font-weight: 700; line-height: 1; color: #10452f; }
/* 도서 상세 — 표지 왼쪽 아래 경계에 걸침 (표지 왼쪽 10px · 원의 아래 8px 이 표지 밖) */
.bd-cover { position: relative; overflow: visible; }
.bd-cover .vb-emblem { left: 10px; bottom: -8px; }
/* 나의 인증 목록 카드 */
.my-card__cover { position: relative; overflow: visible; }
.my-card__cover .vb-emblem { left: 10px; bottom: -8px; }

/* ⑦ 배지 등급 그림 — 육각 배지 그림으로 (디자인 변경이력 10.12 「배지 이미지 첨부」 · STU-16 1066:2699 · STU-09A 1123:485)
      그림 안에 포인트 숫자가 들어 있어 카드의 「씨앗 · +10p」 칩은 디자인에서 빠짐 · 잠긴 배지는 등급별 회색 그림 */
.bx-grade img { width: 72px; height: 72px; }
.bx-grades::before { top: 35px; }
.bx-card__icon { width: 72px; height: 72px; }
.bx-card--current .bx-card__icon { width: 88px; height: 88px; }
.bx-card .bx-chip { display: none; }
.bx-earned__icon { width: 150px; height: 150px; }
/* 목록 카드 — 이달의 추천도서 · 인증도서 찾기 · 위시리스트 (표지 왼쪽 10px · 원의 아래 8px 이 표지 밖) */
.b-card__cover, .r-card__cover { position: relative; overflow: visible !important; }
.my-card__cover { overflow: visible !important; }
.b-card__cover .vb-emblem, .r-card__cover .vb-emblem { left: 10px; bottom: -8px; }

/* ⑧ 표지가 없는 책 — 어디서나 「표지 준비 중」 같은 글 (2026-10-14 사용자 요청)
      카드 · 상세 표지 칸은 디자인이 이미 가운데 글자 모양이고, 그림을 배경으로 까는 두 곳만 여기서 맞춤 */
.vb-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 18px;
    color: var(--vb-color-text-muted, #8a968e);
}

/* ⑨ 도서 상세 정보 카드 — 피그마 PUB-07 「도서 상세_상태 5종」(20:1961 · 2026-10-14 다시 맞춤)
      ② 리딩레이스 줄 끝 「›」 결과 보기 · ③ 인증 완료면 초록 단추 「인증 완료 · 상세 보기」 */
.bd-row__link { color: inherit; text-decoration: none; }
.bd-row__link:hover { color: var(--vb-color-rr-blue, #2f6fd6); text-decoration: underline; }
.d-action--done { background: var(--vb-color-brand-green, #228a4f); border-color: var(--vb-color-brand-green, #228a4f); color: #fff; }
.d-action--done:hover { background: var(--vb-color-brand-green-dark, #17633f); color: #fff; }

/* ⑩ 로그인 뒤 프로필 메뉴 — 「기관 관리」(관리자 계정만)를 피그마 드롭다운/프로필 20:180 · 1112:2 자리대로
      계정 정보(y22) → 기관 관리(y74 · 사이 32) → 구분선(y112 · 18) → 로그아웃(y126) · 상자 200 × 160 (2026-10-14 사용자 「피그마에 디자인이 되어 있을 텐데」)
      「기관 관리」가 없는 회원은 전과 같음 */
.gnb__dropdown a:nth-child(2):not(.gnb__logout) { margin-top: 32px; line-height: 20px; }
.gnb__dropdown a:nth-child(2):not(.gnb__logout) + .gnb__logout { margin-top: 18px; }
.gnb__dropdown:has(a:nth-child(2):not(.gnb__logout)) { padding-bottom: 14px; }
.gnb__dropdown:has(a:nth-child(2):not(.gnb__logout)) > a:first-child { line-height: 20px; }

/* ⑪ 도서 상세 — 장르 칩 「대분류 › 소분류」가 너무 길면 말줄임(전체는 title) · 제목 여백은 detail.html 이 칩 너비만큼 (2026-10-14) */
.bd-info__chips .chip-status { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⑫ 「문항 오류 신고 ›」 — 피그마에서 빨간 글씨인 화면만(semantic-error #c8402c): 리딩레이스 응시(1084:2708 · 1130:3633 …) · 씽킹레이스 첫 작성(1084:2710 · 1604:5193)
   레벨테스트(1084:2714) · 씽킹레이스 고쳐 쓰기(1084:2712 · 1523:5284)는 회색 그대로 (2026-10-14 사용자 「디자인에서 빨강색이면 다 처리해 줘」) */
.rp-q__report,
.tf-report--alert { color: var(--vb-color-semantic-error, #c8402c); }

/* ⑬ 나의 독서 「배지 상세」 창 배경 — 피그마 STU-02 배지 상세 오버레이(20:6036 · 555:3361)는 「짙은 그레이 80%」 rgba(26,26,26,.8)
   디자인 폴더 my.css 는 나의 독서 창 모두 짙은 초록 94% — 배지 창만 피그마대로 (2026-10-14 사용자 「디자인이 맞는지 확인해 줘」) */
.my-modal__dim { background: rgba(26, 26, 26, .8); }   /* 배지 상세 · 보호자 비밀번호(20:5726 · 555:3360) 둘 다 피그마 짙은 그레이 80% */
/* 보호자 비밀번호 창 — 피그마(20:6026)는 자물쇠 · 제목 · 안내 글 가운데 · 제목 나눔스퀘어 네오 24 */
.gd-modal .my-modal__card { text-align: center; }
.gd-modal__lock { margin: 0 auto 12px; }
.gd-modal .my-modal__title { font-family: 'NanumSquareNeoExtraBold', 'NanumSquare Neo', 'NanumSquareNeo', var(--vb-font-family, sans-serif); font-weight: 800; font-size: 24px; line-height: 1.5; }
.gd-modal .input, .gd-modal .my-modal__actions { text-align: left; }
/* 배지 그림(도감과 같은 그림) — 목록 96 · 상세 창 120 */
.badge-item__circle .vb-badge-icon { position: absolute; inset: 0; width: 96px; height: 96px; object-fit: contain; }
.bd-modal__circle img.vb-badge-icon { left: 0; top: 0; width: 120px; height: 120px; object-fit: contain; }

/* ⑭ 토스트 — 피그마 「토스트/전환 완료」(459:3816): 가운데 · 위 144 · 480×56 · brand-green-dark · 모서리 12 · 그림자 0 24 30 · 흰 글 14/600 (2026-10-14) */
.vb-toast { position: fixed; z-index: 900; top: 144px; bottom: auto; right: auto; height: auto; max-height: none; left: 50%; box-sizing: border-box; transform: translateX(-50%); width: min(480px, calc(100% - 32px)); min-height: 56px; margin: 0;
            display: flex; align-items: center; padding: 0 20px; border-radius: 12px; background: var(--vb-color-brand-green-dark, #17633f);
            box-shadow: 0 24px 30px rgba(0, 0, 0, .25); color: #fff; font-size: 14px; font-weight: 600; line-height: 20px; white-space: pre-wrap; }
.vb-toast[hidden] { display: none; }

/* ⑮ 배지 도감 — 카드 줄 사이에 끼는 접힌 줄(카드 0장인 주제)도 상자끼리처럼 16px 띄움 (디자인 badges.css .bx-group + .bx-group 와 같은 값 · 2026-10-14) */
.bx-group + .bx-folds, .bx-folds + .bx-group, .bx-branches + .bx-folds, .bx-folds + .bx-branches { margin-top: 16px; }

/* ⑯ 배지 도감 카드 줄 — 피그마 v4(STU-16 · 1096:2908) 값 (2026-10-14 사용자 「피그마를 보면 이동 버튼이 녹색 · 잠김도 텍스트가 아니야 · 3/7 · 시작 전 묶음 보기」)
   제목 18/600 · 오른쪽 위 「받은 수/전체」 18 · 좌우 단추 44 흰 원(갈 수 있으면 초록 테두리 · 아니면 회색) · 잠긴 카드는 자물쇠 16 */
.bx-group__title { font-size: 18px; line-height: 28px; }
.bx-group__head { position: relative; padding-right: 96px; }
.bx-group__count { position: absolute; right: 23px; top: 21px; font-size: 18px; font-weight: 400; line-height: 22px; color: var(--vb-color-text-title); }
.bx-arrow { position: relative; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--vb-color-brand-green, #228a4f); background: var(--vb-color-surface-white); }
.bx-arrow img { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.bx-arrow .bx-arrow__off { display: none; }
.bx-arrow:disabled { border-color: var(--vb-color-border-strong, #c7d1c9); }
.bx-arrow:disabled .bx-arrow__on { display: none; }
.bx-arrow:disabled .bx-arrow__off { display: block; }
.bx-card__lock { display: flex; justify-content: center; }
.bx-card__lock img { display: block; width: 16px; height: 16px; }
/* 「아직 시작 전 묶음 n개 보기 ›」 (1096:3100) — 접힌 묶음은 처음엔 감추고 링크로 엶 */
.bx-more { display: inline-block; margin-top: 20px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; line-height: 20px; color: var(--vb-color-text-secondary); cursor: pointer; }
.bx-folds[hidden], .bx-fold-label[hidden] { display: none; }
/* 카드 줄 한 줄 5장 — 피그마 v4 는 5장(168 × 4 + 가운데 232). 단추를 44 로 키워 줄 폭이 badges.js 의 5장 기준(1000)에 모자라 3장이 되던 것 → 단추 옆 여백만큼 줄을 넓힘 */
.bx-carousel .bx-track { margin: 0 -12px; }
/* ⑰ 접힌 줄 · 가지 줄을 누르면 펼쳐지는 카드 줄 (2026-10-14 업체 도감 1,732종 넣기) — 카드 줄 묶음(bx-group)과 같은 상자 */
.bx-fold-body { border: 1px solid var(--vb-color-border-default); border-radius: 12px; background: var(--vb-color-surface-white); }
.bx-fold-body[hidden] { display: none; }
.bx-branches .bx-fold-body { margin: 8px 0; }
[data-bx-toggle] { cursor: pointer; }
.bx-fold.is-open .bx-fold__chev { transform: rotate(180deg); }
/* ⑱ 기관 등록 — 사업자번호 「조회」가 맞을 때도 오류 글과 같은 자리 · 초록 (2026-10-14 사용자 「맞아도 화면이 이상해」) */
.org-field-ok { display: block; color: var(--vb-color-brand-green); }
.org-field-ok[hidden] { display: none; }
/* ⑲ 마우스 오버 — 피그마 Components(사본 qevFE…) BookCard · Shortcut 「State=Hover」 (2026-10-15 사용자 캡처)
   책 카드: 표지에 1.5px 초록 테두리 + 카드 2px 위로(위로 뜨는 것은 motion.css) — motion.css 는 카드(.b-card)에 테두리 색만 줘서 테두리 없는 카드엔 안 보였음
   바로가기: 흰 바탕 그대로 테두리만 초록 — my.css 의 연한 초록 바탕 · 연한 테두리를 덮음 */
.b-card__cover { box-sizing: border-box; border: 1.5px solid transparent; transition: border-color 0.2s ease; }
.b-card:hover .b-card__cover { border-color: var(--vb-color-brand-green); }
.rd-shortcuts .rd-shortcut:hover { border-color: var(--vb-color-brand-green); background: var(--vb-color-surface-white, #fff); }

/* ⑳ 「먼저 레벨테스트를 해주세요」 창(독서 현황 lv-modal) — 빈 동그라미 아이콘 빼고 리딩레이스 「시작할까요?」 창(race.css r-modal--v2)과 같은 모양 (2026-10-15 사용자 요청 R-294)
   카드 480 · 위 50 / 옆 36 / 아래 40 · 제목 브랜드 글꼴 24 · 단추 둘 같은 폭(왼쪽 나중에 · 오른쪽 시작) · 글과 단추 사이 36 */
.lv-modal .my-modal__card { width: 480px; max-width: 100%; padding: 50px 36px 40px; border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
.lv-modal .my-modal__title { margin-top: 0; font-family: var(--vb-font-brand); font-weight: 800; font-size: 24px; line-height: 1.5; }
.lv-modal .my-modal__desc { margin-top: 10px; }
.lv-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.lv-modal__actions .btn:first-child, .lv-modal__actions .btn + .btn { width: 100%; padding: 0 12px; }
@media (max-width: 560px) { .lv-modal__actions { grid-template-columns: 1fr; } .lv-modal__actions .btn--secondary { order: 1; } }
/* ㉑ 화면이 열릴 때부터 떠 있는 팝업(「먼저 레벨테스트를 해주세요」 등) — 본문 진입 효과(motion.css vb-page-in · 0.3s 동안 transform)가 도는 동안엔
   팝업 배경이 본문 안에만 깔리고 효과가 끝난 뒤에야 메뉴까지 덮여 두 번에 나눠 뜨던 것 → 팝업이 열린 채로 시작하는 화면은 진입 효과를 뺌 (2026-10-15 사용자 요청 R-297) */
.main:has(> .my-modal:not([hidden])), .main:has(> * > .my-modal:not([hidden])) { animation: none; }
/* ㉒ 보호자 전용 안내(기관 소속 · 학생이 아닌 회원) — 잠금 상자 안 단추가 설명 글에 붙어 있던 것 → 디자인 잠금 화면(입력칸 줄 margin-top 24)과 같은 간격 (2026-10-15 사용자 요청 R-301) */
.mb-gate > .btn { margin-top: 24px; }
.mb-gate > .btn + .mb-gate__link { display: block; width: fit-content; }
/* ㉓ 나의 인증 목록 기간 — 휴대폰에서 「적용」이 다음 줄로 혼자 내려가던 것 → 날짜 칸이 남은 폭을 나눠 한 줄에 (2026-10-15 사용자 요청 R-304) */
@media (max-width: 560px) {
    .ct-period { flex-wrap: nowrap; }
    .ct-period__date { flex: 1 1 0; width: auto; min-width: 0; padding: 0 8px; }
    .ct-period__apply { flex: none; }
}
/* ㉔ 로그인 카드 아래 「기관으로 이용하고 싶으신가요? 기관 이용 신청 ›」 (피그마 10B B-01 1719:7537 · 카드 아래 22 · 14px · 회색 / 초록 굵게 · 6px 사이 · 2026-10-15) */
.auth-org-link { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--vb-color-text-secondary, #5a6a5f); }
.auth-org-link a { font-weight: 700; color: var(--vb-color-brand-green, #228a4f); text-decoration: none; }
.auth-org-link a:hover { text-decoration: underline; }
/* ㉕ 기관 계정 프로필 메뉴 (피그마 10B B-41 · B-42 1724:7598 · 2026-10-15) — 폭 248 · 위 20 옆 20 아래 12 · 사이 10 · 둥근 16 · 그림자 0 8 24 10%
   이름 16 굵게 · 역할 칩(연초록 · 13 굵게) + 기관명 14 회색 · 구분선 · 「관리자 페이지」 15 초록 굵게 + ↗ 18 · 계정 정보 15 · 구분선 · 로그아웃 15 회색 */
.gnb__dropdown--staff { width: 248px; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 12px; border: 1px solid #e1e6e3; border-radius: 16px; box-shadow: 0 8px 24px rgba(8, 26, 15, 0.1); }
.gnb__dropdown--staff[hidden] { display: none; }
.gnb__dropdown--staff .gnb__who { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef2ef; }
.gnb__dropdown--staff .gnb__who b { font-size: 16px; line-height: 1.5; color: var(--vb-color-text-title, #0f381f); }
.gnb__dropdown--staff .gnb__who-row { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: #7a887f; }
.gnb__dropdown--staff .gnb__role { padding: 3px 10px; border-radius: 999px; background: #eaf7ec; font-size: 13px; font-weight: 700; color: var(--vb-color-brand-green, #228a4f); }
/* 기관 계정 프로필 메뉴 — 기관 이름이 길면 칩이 세로로 찌그러지던 것: 칩은 한 줄 고정 · 기관 이름은 두 줄까지 「…」 · 전체는 마우스를 올리면 (2026-10-20 사용자 「기관명이 길 경우 이상해」) */
.gnb__dropdown--staff .gnb__who-row { align-items: flex-start; }
.gnb__dropdown--staff .gnb__role { flex: none; white-space: nowrap; }
.gnb__dropdown--staff .gnb__org { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; padding-top: 2px; }
.gnb__dropdown--staff .gnb__who > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnb__dropdown--staff a { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 15px; line-height: 1.5; color: var(--vb-color-text-primary, #1f3326); }
.gnb__dropdown--staff .gnb__admin { font-weight: 700; color: var(--vb-color-brand-green, #228a4f); }
.gnb__dropdown--staff .gnb__logout { margin-top: 0; padding-top: 10px; border-top: 1px solid #eef2ef; color: #7a887f; }
/* ㉖ 메인 홈 검색창 「상세검색」 — 글자 단추 → 필터 아이콘 단추 (피그마 STU-01 S1 · 닫힘 1695:8317 흰 원 56 · 열림 1695:8322 연초록 + 초록 테두리 1.5 · 아이콘 24 · 2026-10-15) */
.hm-search__toggle.hm-filter-btn { width: 56px; height: 56px; padding: 0; justify-content: center; gap: 0; border: 1.5px solid transparent; background: #fff; }
.hm-search__toggle.hm-filter-btn img { width: 24px; height: 24px; transform: none; }
.hm-search__toggle.hm-filter-btn .hm-filter-btn__on { display: none; }
.hm-search__toggle.hm-filter-btn.is-open { background: #eaf7ec; border-color: #228a4f; }
.hm-search__toggle.hm-filter-btn.is-open .hm-filter-btn__on { display: block; }
.hm-search__toggle.hm-filter-btn.is-open .hm-filter-btn__off { display: none; }
@media (max-width: 640px) { .hm-search__toggle.hm-filter-btn { width: 44px; height: 44px; } }
/* ㉗ 메인 홈 프로필 — 레벨테스트를 다시 볼 수 있을 때 레벨 줄이 연초록 상자 + 「다시 보기」 (피그마 STU-01 LA 1693:8367 · 높이 56 · 왼 16 오 10 · 둥근 14 · 값 26 브랜드 글꼴 · 단추 36 초록 · 2026-10-15) */
.hm-profile__line.hm-level-box { padding: 10px 10px 10px 16px; border-radius: 14px; background: #e3f4e6; }
.hm-profile__line.hm-level-box .hm-profile__label { font-size: 15px; font-weight: 600; color: #1c5a37; }
.hm-level-box__val { display: inline-flex; align-items: center; gap: 14px; }
.hm-level-box__btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--vb-color-brand-green, #228a4f); font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; }
.hm-level-box__btn:hover { filter: brightness(0.92); }
/* ㉘ 메인 홈 할 일 1 ~ 2개 — 남은 자리에 「이런 책은 어떤가요?」 (피그마 STU-01 R1 1693:8553 · 1693:8554 · 소제목 15 굵게 · 연초록 줄 128 · 표지 67×96 · 단계 15 초록 · 제목 22 · 「시작하기」 흰 단추 120×44) */
.hm-more__head { display: flex; align-items: flex-end; height: 44px; padding: 0 0 10px 4px; border-top: 1px solid #e8eeea; font-size: 15px; font-weight: 700; color: #2c4a36; list-style: none; }
.hm-more__item { display: flex; align-items: center; gap: 24px; height: 128px; padding: 0 4px; background: #f6fbf4; list-style: none; }
.hm-more__item + .hm-more__item { border-top: 0; }
.hm-more__cover { flex: none; width: 67px; height: 96px; border-radius: 5px; overflow: hidden; background: #e8eeea; }
.hm-more__cover img { width: 100%; height: 100%; object-fit: cover; }
.hm-more__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-more__stage { margin: 0; font-size: 15px; font-weight: 700; color: var(--vb-color-brand-green, #228a4f); }
.hm-more__name { margin: 0; font-size: 22px; font-weight: 700; color: var(--vb-color-text-title, #0f381f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-more__name a { color: inherit; text-decoration: none; }
.hm-more__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 44px; border: 1px solid var(--vb-color-border-default, #e1e6e3); border-radius: 999px; background: #fff; font-size: 14px; color: var(--vb-color-text-secondary, #5a6a5f); text-decoration: none; }
.hm-more__btn:hover { border-color: var(--vb-color-brand-green, #228a4f); color: var(--vb-color-brand-green, #228a4f); }
@media (max-width: 640px) { .hm-more__item { gap: 12px; height: auto; padding: 12px 4px; } .hm-more__name { font-size: 17px; } .hm-more__btn { width: auto; padding: 0 14px; height: 36px; } }
.hm-profile__line.hm-level-box { align-items: center; margin: 28px 0 26px; }
/* ㉚ 도서 상세 정보 카드 — 「이 책으로 N명이 인증을 마쳤어요」 + 「나의 인증」 / 로그인 전 「이 책으로 인증하는 방법」 (피그마 PUB-07 상태 6종 1735:7507 … · PUB-07B 1735:7814 · 2026-10-15)
   인원 줄 14 회색 + 숫자 굵게 · 묶음 #f6f9f7 둥근 14 · 위 16 옆 18 · 제목 13 굵게 · 줄 9px 위아래 · 번호 22 원 · 레이스 15 굵게 86 폭 · 상태 14 · 칩 12 굵게 */
.bd-count { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: #5a6a5f; }
.bd-count b { color: #1f3326; }
.bd-mine { margin: 12px 0 0; padding: 16px 18px; border-radius: 14px; background: #f6f9f7; }
.bd-mine__title { margin: 0 0 4px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #5a6a5f; }
.bd-mine__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.bd-mine__row + .bd-mine__row { border-top: 1px solid #e6ece8; }
.bd-mine__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 700; color: #fff; }
.bd-mine__no.is-rr { background: #4580c4; }
.bd-mine__no.is-tr { background: #6b4fc8; }
.bd-mine__no.is-off { background: #c9d1cc; }
.bd-mine__race { flex: none; width: 86px; font-size: 15px; font-weight: 700; line-height: 1.5; }
.bd-mine__race.is-rr { color: #13529a; }
.bd-mine__race.is-tr { color: #381a93; }
.bd-mine__state { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.5; color: #5a6a5f; text-decoration: none; }
a.bd-mine__state:hover { text-decoration: underline; }
.bd-mine__chip { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.bd-mine__chip.is-start.is-rr { background: #e8f0fa; color: #13529a; }
.bd-mine__chip.is-start.is-tr { background: #eee9f8; color: #381a93; }
.bd-mine__chip.is-pass, .bd-mine__chip.is-done { background: #eaf7ec; color: #1c6e3f; }
.bd-mine__chip.is-fail { background: #fff1e6; color: #b4600f; }
.bd-mine__chip.is-lock, .bd-mine__chip.is-end, .bd-mine__chip.is-wait { background: #eef2ef; color: #7a887f; }
.bd-login-btn { background: var(--vb-color-brand-green, #228a4f); color: #fff; }
/* ㉕-1 기관 계정 프로필 메뉴 — 일반 메뉴의 「두 번째 줄 위 32」 규칙(위 218행)이 「관리자 페이지」에 걸리지 않게 (B-41 사이 10) */
.gnb__dropdown--staff a:nth-child(2):not(.gnb__logout), .gnb__dropdown--staff a:nth-child(2):not(.gnb__logout) + .gnb__logout { margin-top: 0; }
.gnb__dropdown--staff:has(a:nth-child(2):not(.gnb__logout)) { padding-bottom: 12px; }
/* ㉚ 기관 이용 신청 4단계 (새 디자인 10.14 피그마 10B B-31 1722:7809 · B-32 1722:7872 · 2026-10-15)
   단계 표시 — 원 22 · 사이 6 · 구분선 18×1 · 글 13 굵게 · 지난 단계 연초록 원 + 체크 · 지금 초록 원 · 남은 회색 원 */
.org-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.org-steps li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.5; color: #9aa8a0; white-space: nowrap; }
.org-steps li + li::before { content: ""; width: 18px; height: 1px; margin-right: 2px; background: #dce3de; }
.org-steps__no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 11px; background: #eef2ef; font-size: 12px; line-height: 1; color: #7a887f; }
.org-steps li.is-done .org-steps__no { background: #eaf7ec; }
.org-steps li.is-now .org-steps__no { background: var(--vb-color-brand-green, #228a4f); color: #fff; }
.org-steps li.is-now { color: #0f381f; }
.org-steps + .org-desc { margin-top: 14px; }
/* ③ 서류 · 동의 — 카드 640 · 위 48 옆 48 아래 44 · 둥근 22 */
.org-card--docs { width: min(640px, 100%); padding: 48px 48px 44px; border-radius: 22px; box-shadow: 0 10px 26px rgba(8, 26, 15, 0.08); }
.org-card--docs .org-steps { margin-bottom: 26px; }
.org-label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: #2c3e33; }
.org-card--docs .org-steps + .org-label, .org-card--docs .org-desc--error + .org-label { margin-top: 0; }
.org-card--docs .org-desc--error { margin: 0 0 14px; }
.org-file { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--vb-color-border-default, #e1e6e3); border-radius: 10px; background: #fff; cursor: pointer; }
.org-file.has-file { border-color: #cfe8d6; background: #f4fbf2; }
.org-file img { flex: none; }
.org-file__name { flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.5; color: #1f3326; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-file:not(.has-file) .org-file__name { color: var(--vb-color-state-disabled-text, #9aa8a0); }
.org-file__btn { flex: none; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--vb-color-brand-green, #228a4f); }
.org-file:focus-within { outline: 2px solid var(--vb-color-brand-green, #228a4f); outline-offset: 2px; }
.org-seat { position: relative; }
.org-seat .input { width: 100%; height: 56px; padding-right: 44px; }
.org-seat__unit { position: absolute; right: 19px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #5a6a5f; }
.org-agrees { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f4fbf2; }
.org-agrees .checkbox span { font-size: 14px; line-height: 1.5; color: #2c3e33; }
.org-agrees__row { display: flex; align-items: center; gap: 10px; }
.org-agrees__row .checkbox { flex: 1 1 0; min-width: 0; }
.org-agrees__view { flex: none; font-size: 13px; line-height: 1.5; color: #7a887f; text-decoration: none; }
.org-agrees__view:hover { color: var(--vb-color-brand-green, #228a4f); }
.org-submit--docs { margin-top: 22px; }
/* ④ 신청 완료 — 카드 560 · 위 48 옆 48 아래 44 · 단계 표시가 맨 위 · 제목 26 · 안내 15 회색 · 줄 3개(이름 14 회색 / 값 14 굵게) · 위아래 선 */
.org-card--done { width: min(560px, 100%); padding: 48px 48px 44px; border-radius: 22px; box-shadow: 0 10px 26px rgba(8, 26, 15, 0.08); }
.org-card--done .org-steps { margin: 0; }
.org-title--done { margin-top: 68px; font-size: 26px; }
.org-done-desc { margin: 12px 0 0; font-size: 15px; line-height: 25px; text-align: center; color: #5a6a5f; }
.org-done-list { display: flex; flex-direction: column; gap: 20px; margin: 40px 0 0; padding: 18px 2px; border-top: 1px solid #eef2ef; border-bottom: 1px solid #eef2ef; }
.org-done-list div { display: flex; justify-content: space-between; gap: 16px; }
.org-done-list dt { font-size: 14px; line-height: 1.5; color: #7a887f; }
.org-done-list dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: #1f3326; text-align: right; word-break: break-all; }
.org-submit--done { margin-top: 28px; }
@media (max-width: 640px) {
    .org-card--docs, .org-card--done { padding: 32px 20px 28px; }
    .org-steps { gap: 6px; }
    .org-steps li + li::before { width: 10px; }
    .org-steps__name { font-size: 12px; }
    .org-title--done { margin-top: 36px; font-size: 22px; }
}
/* ㉛ 회원가입 갈래 · 코드 먼저 (새 디자인 10.14 피그마 10B B-02 1719:7607 · B-11 1721:7577 · B-11A · B-14 · B-21~23 · 2026-10-15)
   카드 560 · 위 48 옆 48 아래 44 · 둥근 22 · 갈래 줄 = 테두리 · 둥근 14 · 안쪽 16/20 · 아이콘 상자 56 연초록 둥근 16 · 제목 17 굵게 · 설명 14 회색 · › 20 */
.auth-card--flow { width: min(560px, 100%); padding: 48px 48px 44px; border-radius: 22px; box-shadow: 0 10px 26px rgba(8, 26, 15, 0.08); }
.auth-card--flow .auth-card__title { margin: 0; }
.auth-card--flow .org-steps { margin: 16px 0 26px; }
.auth-flow-desc { margin: 4px 0 28px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--vb-color-brand-green, #228a4f); }
.signup-kinds { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.signup-kind { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid #e1e6e3; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.signup-kind:hover { border-color: var(--vb-color-brand-green, #228a4f); }
.signup-kind__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #f1faee; }
.signup-kind__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.signup-kind__text b { font-size: 17px; line-height: 1.5; color: #0f381f; }
.signup-kind__text span { font-size: 14px; line-height: 1.5; color: #5a6a5f; }
.signup-kind__go { flex: none; font-size: 20px; line-height: 1.5; color: #9aa8a0; }
.auth-more--flow { margin-top: 24px; }
/* 코드 입력 — 칸 56 · 기관 상자(연초록 · 테두리 · 둥근 12 · 안쪽 12/16 · 흰 아이콘 상자 40) · 정원 가득 참이면 연분홍 · 빨강 */
.signup-code__input { width: 100%; height: 56px; border-radius: 10px; padding: 0 19px; }
.signup-org { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 16px; border: 1px solid #cfe8d6; border-radius: 12px; background: #f4fbf2; }
.signup-org[hidden] { display: none; }
.signup-org.is-full { border-color: #f3c9c2; background: #fdf3f1; }
.signup-org__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; }
.signup-org__text { display: flex; flex-direction: column; gap: 2px; }
.signup-org__text b { font-size: 15px; line-height: 1.5; color: #0f381f; }
.signup-org__text span { font-size: 13px; line-height: 1.5; color: #5a6a5f; }
.signup-code__msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
.signup-code__msg.is-ok { color: var(--vb-color-brand-green, #228a4f); }
.signup-code__msg.is-bad { color: var(--vb-color-semantic-error, #c8402c); }
.signup-code__next { width: 100%; margin-top: 24px; }
.signup-code__next:disabled { background: #eceeed; color: #a3aca7; cursor: default; }
.auth-card--flow .auth-more--flow:last-child { margin-top: 18px; }
.auth-card--done .org-steps { margin: 0; }
@media (max-width: 640px) {
    .auth-card--flow { padding: 32px 20px 28px; }
    .signup-kind { gap: 12px; padding: 14px 14px; }
    .signup-kind__icon { width: 48px; height: 48px; }
}
/* ㉛-1 갈래 · 코드 화면 아래 안내 — 설명 글은 회색 보통 · 링크만 초록 굵게 (B-02 「이미 계정이 있나요? 로그인」 · B-11 「기관 코드는 선생님께 받을 수 있어요.」) · 코드 칸 글 14 */
.auth-more--flow { gap: 6px; font-size: 14px; }
.auth-more--flow span { font-weight: 400; color: #5a6a5f; }
.auth-more--flow a { font-weight: 700; color: var(--vb-color-brand-green, #228a4f); }
.signup-code__input { font-size: 14px; }
.auth-more--flow span + a { margin-left: 6px; }
/* ㉛-2 가입 완료 · 승인 대기 제목 — 회원가입 화면은 org.css 를 안 불러 가운데 정렬 · 색을 따로 (B-14 · B-23) */
.auth-card--done .org-title { margin-bottom: 0; text-align: center; font-weight: 700; line-height: 1.5; color: var(--vb-color-text-title, #0f381f); }
/* ㉛-3 뒤로 가기 「‹ 이전으로」 — 보호자 동의(B-13)와 같은 초록 굵은 글 · 바로 위 안내와 사이 12 (2026-10-15 사용자 「뒤로 가는 버튼들이 없네?」) */
.auth-back { margin-top: 12px; }
.auth-back a { font-weight: 700; color: var(--vb-color-brand-green, #228a4f); text-decoration: none; }

/* 친구 목록 정렬 고르는 목록 — 디자인 「이번 달 km 순 ⌄」를 누르면 펼침 · 도서 목록 정렬(.b-sort__menu)과 같은 모양 (2026-10-15 사용자 「이번달 km순 이런게 이상한데」) */
.fr-sortbox { position: relative; }
.fr-sort__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 132px; margin: 0; padding: 6px; border: 1px solid var(--vb-color-border-default); border-radius: 16px; background: var(--vb-color-surface-white); box-shadow: 0 8px 24px rgba(15, 56, 31, 0.1); list-style: none; }
.fr-sort__menu[hidden] { display: none; }
.fr-sort__menu a { display: block; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 20px; white-space: nowrap; color: var(--vb-color-text-primary); text-decoration: none; }
.fr-sort__menu a:hover { background: var(--vb-color-surface-subtle, #f5f7f5); }
.fr-sort__menu a[aria-selected="true"] { background: var(--vb-color-brand-green-surface); font-weight: 600; color: var(--vb-color-brand-green); }

/* 도서 상세 씽킹레이스 칩 「확정 전」 — 채점은 끝났고 확정 제출 전 · 지금 시작(is-start) 과 같은 보라 (2026-10-15) */
.bd-mine__chip.is-feedback.is-tr { background: #eee9f8; color: #381a93; }

/* 독서 현황 바로가기 — 휴대폰에서 「보호자 전용」이 글자 중간에서 줄이 바뀌던 것 (개발 덧붙임 · 2026-10-26 모바일 점검) */
.rd-shortcut__label { word-break: keep-all; }