// ─── 상단 바 ───────────────────────────────
function TopBar({ coloredCount, totalCount, onMenu, isCalculatorActive, onCalcExit }) {
  return (
    <div style={appStyles.topBar}>
      <IconButton icon="menu" size={22} onClick={onMenu} label="메뉴" extraStyle={appStyles.menuBtn} />
      <div style={appStyles.topBarMark}>
        <i data-lucide="map" style={{ width: 18, height: 18, color: '#2F7D4F' }}></i>
      </div>
      <div style={appStyles.topBarText}>
        <div style={appStyles.topBarTitle}>보구곶리 지적편집도</div>
        <div style={appStyles.topBarMeta}>
          <span style={{ color: '#2F7D4F', fontVariantNumeric: 'tabular-nums' }}>
            {coloredCount}
          </span>
          <span style={{ color: '#8E8B82' }}> / {totalCount} 지정</span>
        </div>
      </div>
      {isCalculatorActive && (
        <div style={appStyles.calcBadge}>
          <i data-lucide="calculator" style={{ width: 14, height: 14 }}></i>
          <span>계산기</span>
          <button style={appStyles.calcExitBtn} onClick={onCalcExit}>종료</button>
        </div>
      )}
    </div>
  );
}