/* =====================================================================
   루루 꿀벌 · 공통 모바일/터치 보정
   - 모든 페이지에서 인라인 <style> 뒤에 로드되어 우선 적용됨
   - v13
   ===================================================================== */

/* 커스텀 아이콘(벌·벌침·꿀 — 이모지 대체). 같은 박스에서 비율 유지·중앙정렬 → 짝 균형 */
.beeic{width:1.4em;height:1.4em;object-fit:contain;vertical-align:-.36em;display:inline-block;flex:none;}

/* 전반 가독성: 작게 보이던 보조 텍스트 소폭 확대(값은 모두 증가만 → 레이아웃 안전) */
.sub{font-size:14px;}
.hint{font-size:12.5px;}
.lb{font-size:13.5px;}
.rl,.kid-rl{font-size:12.5px;}
.rd,.rn{font-size:13px;}
.bal{font-size:13px;}
.note{font-size:14.5px;}
.cap{font-size:12.5px;}
.meta{font-size:13px;}
/* 내비는 8개 항목이 한 줄에 들어가도록 컴팩트하게 유지(가독성 확대 대상에서 제외) */
.nav a{font-size:14.5px;padding:8px 12px;}
.chip{white-space:nowrap;flex:0 0 auto;}
.lead small{font-size:13.5px;}
.badge{font-size:11.5px;}
/* 통계 카드(현황/자녀 현황) 라벨·단위 — 더 구체적 선택자라 별도 상향 */
.stat .lb,.big .lb{font-size:13.5px;}
.stat .un,.big .un{font-size:14px;}
.kid-rl{font-size:12.5px;}
.legend{font-size:12.5px;}

/* 브랜드 "루루 꿀벌"은 어떤 폭에서도 세로로 쪼개지지 않게(항상 적용) */
.brand b,.brand span{white-space:nowrap;}

/* 상단 브랜드·메뉴를 '현황(대시보드)' 기준으로 전 페이지 통일 */
.brand b{font-size:16px;letter-spacing:-.01em;}
.brand span{font-size:11px;font-weight:700;color:var(--ink-soft);display:block;margin-top:-2px;}
.nav{gap:3px;margin-left:6px;}

/* iOS 등에서 버튼 연타 시 발생하는 더블탭 확대 방지
   (일반 스크롤/핀치 줌은 유지, 300ms 더블탭 줌만 제거) */
html{touch-action:manipulation;background:#F7F4FB;}  /* 콘텐츠보다 짧을 때 하단 경계선/밴드 방지 */
a,button,.user,.key,.back,.nav a,.chip,.logout,.kedit,.ae,.cc{touch-action:manipulation;}

/* ---------- 상단 메뉴 재배치: 8개 메뉴가 한 줄에 안 들어가는 폭(≤960)에서
   브랜드 한 줄 + 내비 전체폭 가로스크롤. >960 에서는 인라인 한 줄. ---------- */
@media (max-width:960px){
  /* 부모(.topbar-in) / 자녀(.topbar) 공통 flex 컨테이너 */
  .topbar-in,.topbar{flex-wrap:wrap;row-gap:9px;padding-left:14px;padding-right:14px;}

  /* 브랜드: 한 줄 고정, 글자 세로 쪼개짐 방지 */
  .brand{flex:0 0 auto;order:1;}
  .brand img{width:34px;height:34px;}
  .brand b{font-size:15.5px;white-space:nowrap;}
  .brand span{white-space:nowrap;}

  /* 우측 사용자칩 + 로그아웃은 브랜드와 같은 줄 오른쪽으로 */
  .spacer{order:2;flex:1 1 auto;}
  .chip{order:3;font-size:12.5px;padding:6px 11px;}
  .logout{order:4;width:38px;height:38px;}

  /* 내비게이션: 전체 폭 차지 + 가로 스크롤(줄바꿈 없이 한 줄) */
  .nav{order:5;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;
       gap:6px;padding:2px 0 3px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav a{flex:0 0 auto;white-space:nowrap;font-size:14px;padding:8px 14px;border-radius:11px;}
}

@media (max-width:380px){
  /* 부제(부모 화면/자녀 화면)는 세로로 붙어 폭에 영향 없으므로 좁은 화면에서도 표시 */
  .chip{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}