/* ─────────────────────────────────────────────────────────────
   상단 계정 이름 왼쪽 [업데이트 가능] 뱃지
     마크업: /include/html/updateBadge.html, 동작: /include/js/updateBadge.js
     크기·모양은 옆의 [AI 작업] 뱃지(aiJobs.css)와 맞췄다.
   ───────────────────────────────────────────────────────────── */

/* 헤더가 flex 든 아니든(회사별 head.css 가 다르다) 이름 왼쪽에 나란히 서도록 inline-flex */
.update-badge-wrap {
	position:relative;
	flex:0 0 auto;
	margin-left:8px;
	display:inline-flex;
	align-items:center;
	vertical-align:middle;
	line-height:1;
}

.update-badge {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	height:21px;
	padding:0 9px;
	border:1px solid #f0c36d;
	border-radius:11px;
	background:#fff5e0;
	color:#a25c00;
	font-size:11px;
	font-weight:700;
	line-height:1;
	cursor:pointer;
	white-space:nowrap;
	text-shadow:none;
	transition:background .15s ease, border-color .15s ease;
}
.update-badge:hover { background:#ffecc7; border-color:#e5b04f; }
.update-badge:focus { outline:2px solid rgba(242,169,0,.35); outline-offset:1px; }

/* 눈에 띄되 거슬리지 않을 정도의 점멸 */
.update-badge-dot {
	width:7px;
	height:7px;
	flex:0 0 auto;
	border-radius:50%;
	background:#f2a900;
	animation:updateBadgeBlink 1.6s ease-in-out infinite;
}
@keyframes updateBadgeBlink {
	0%,100% { opacity:1; }
	50%     { opacity:.25; }
}

/* 화면이 좁으면 글자는 접고 점만 남긴다 */
@media (max-width:1000px) {
	.update-badge-text { display:none; }
	.update-badge { padding:0 7px; }
}