/* ═════════ me.css — 이름 차림표 한 벌 (2026-08-31a) ═════════
   학생·선생님·본사 세 화면이 같이 쓴다.

   ── 왜 묶었나 ──
   위 띠에 딱지·동그라미·이름·로그아웃이 다 나와 있어 지저분했다
   (원장님이 짚으심 — 2026-08-31). 이름 하나로 묶고 눌러서 펼친다.

   ── 동그라미 색 ──
   남색 하나로 통일한다. 금색은 「완료·장기기억」을 뜻하므로
   사람 표시에 쓰면 헷갈린다. 역할은 **그림**으로 가른다:
   학생=연필 · 선생님=넓은 칠판 · 총관리자=받침대 있는 칠판 */
.meWrap{position:relative}
.meBtn{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;
  border:1px solid transparent;border-radius:22px;background:none;
  cursor:pointer;font-family:inherit}
.meBtn:hover{background:#F2F6FB;border-color:#D6E0EF}
.meBtn.open{background:#F2F6FB;border-color:#D6E0EF}
.meAv{width:32px;height:32px;border-radius:50%;background:#002060;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.meAv svg{width:19px;height:19px;display:block}
.meAv.ph{overflow:hidden;background:#EEF1F6}.meAv img{width:100%;height:100%;object-fit:cover;display:block}
.meNm small{font-weight:600;color:#657189;font-size:12px;margin-left:2px}
.meNm{font-size:13px;font-weight:700;color:#0C1930;white-space:nowrap}
.meAr{font-size:9px;color:#657189;transition:transform .15s}
.meBtn.open .meAr{transform:rotate(180deg)}

.meMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:80;
  min-width:190px;background:#fff;border:1px solid #D6E0EF;border-radius:12px;
  box-shadow:0 10px 30px rgba(12,25,48,.14);padding:6px;display:none}
.meMenu.on{display:block}
.meMenu .hd{padding:10px 12px 9px;border-bottom:1px solid #F1F5FA;margin-bottom:5px}
.meMenu .hd b{display:block;font-size:13.5px;color:#0C1930}
.meMenu .hd span{display:block;font-size:11.5px;color:#657189;margin-top:2px}
.meMenu button{display:block;width:100%;text-align:left;border:none;background:none;
  padding:9px 12px;border-radius:8px;font-size:13.5px;font-family:inherit;
  color:#33415C;cursor:pointer}
.meMenu button:hover{background:#F2F6FB;color:#002060}
.meMenu button.out{color:#657189;border-top:1px solid #F1F5FA;
  margin-top:5px;padding-top:11px}
.meMenu button.out:hover{color:#C4372F;background:#FDF1F0}
@media(max-width:600px){ .meNm{display:none} }