/* ═══ 워드마크 — PBL · Project-based learning (2026-09-07) ═══
   design/drafts/brand/pbl-lockup.html 시안 01(Space Grotesk) · 짜임은 「나 옆에」.
   바깥 <a> 는 페이지마다 제 색을 갖고, 두 조각은 여기서 한 벌로 잡는다.

   ⚠ 선택자를 a.tb-brand 로 쓴 까닭 — 페이지마다 <style> 안에 .tb-brand/.brand 가
     이미 있고 그것이 이 파일보다 **뒤에** 실린다. 요소 이름을 붙여 무게를 올려야
     여기 값이 이긴다 (안 그러면 페이지 쪽 font-size·letter-spacing 이 그대로 남는다).
   ⚠ 세로는 align-items: center 로 잡는다. baseline 은 쓰지 말 것 —
     한 줄 flex 에서 baseline 은 글자를 상자 **맨 위**로 밀어붙인다. 상단바 42px 안에서
     잉크 중심이 23px 에 놓여, 33px 인 아바타·Classes 와 10px 어긋났다 (2026-09-07).
   ⚠ 두 조각은 **밑선이 아니라 가운데**로 맞춘다. 한때 .bs 를 5.5px 내려 밑선을 붙여
     봤는데, 크기 차가 22px 대 13px 이라 큰 글이 위로 떠 보였다. 가운데를 맞추면
     PBL 잉크 중심 = 아랫글 잉크 중심 = 아바타 중심(33px)이 한 줄로 떨어진다.
     그러니 .bs 에 transform 을 다시 넣지 말 것 (2026-09-07).

   ── 2단으로 되돌리려면 ──
   flex-direction: row → column · align-items: baseline → flex-start ·
   gap 10px → 5px · .bs 를 { font-size:10px; font-weight:600; letter-spacing:.095em;
   text-transform:uppercase } 로. 그 밖에는 손댈 것이 없다 (마크업 그대로) */

a.tb-brand, a.brand {
  display: inline-flex; flex-direction: row;
  align-items: center; justify-content: flex-start;
  gap: 10px; line-height: 1;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  text-decoration: none; white-space: nowrap;
}
/* 엠블럼 — 쌓은 P (블록 셋). 세 조각이 모여 글자가 된다 = 스스로 만들어 보는 배움.
   색은 유닛 색 셋(터쿼이즈·머스터드·코랄) · 잉크 높이를 글자(22px)보다 살짝 크게 잡아
   나란히 놓았을 때 무게가 맞는다 (2026-09-10 · drafts/brand/pbl-emblem-b.html B안).
   ⚠ 배경 이미지로 넣은 까닭 — 로고가 21개 페이지에 흩어져 있어 마크를 마크업으로 넣으면
     그 전부를 고쳐야 한다. 여기 한 줄이면 교사·학생·로그인이 함께 따라온다. */
a.tb-brand::before, a.brand::before {
  content: ""; flex: none;
  width: 20px; height: 26px; margin-right: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 25 32'%3E%3Crect x='13' y='9' width='9' height='30' rx='4.5' fill='%233FB8C4'/%3E%3Crect x='25' y='9' width='11' height='9' rx='4.5' fill='%23E8B33C'/%3E%3Crect x='25' y='21' width='11' height='9' rx='4.5' fill='%23F0796B'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.tb-brand .bm, a.brand .bm { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
a.tb-brand .bs, a.brand .bs {
  font-size: 13px; font-weight: 500; letter-spacing: -0.008em;
  color: #3F4B5C;
}
/* 어두운 판 — 로그인·가입·비밀번호 왼쪽 판, admin·edits 상단바 */
a.tb-brand.on-dark .bs, a.brand.on-dark .bs { color: rgba(255,255,255,.62); }
/* 손이 닿을 때는 앞 글자만 움직인다 — 뒤따르는 설명까지 밝아지면 둘의 무게가 뒤집힌다 */
a.tb-brand:hover .bs, a.brand:hover .bs { color: #3F4B5C; }
a.tb-brand.on-dark:hover .bs, a.brand.on-dark:hover .bs { color: rgba(255,255,255,.62); }