/* 화면 제목 옆 「안내」·「개인정보」 배지 — info-guide.js 와 짝 (2026-10-18) */

/* 안내문이 접혀 있을 때도 제목과 아래 카드 사이 간격을 지킨다(제목의 인라인 margin-bottom:4px 를 덮음) */
h2.ig-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 12px !important; }

.ig-badge,
.ig-privacy {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; margin-left: 8px; padding: 0 9px;
  border-radius: 11px; font-size: 11.5px; font-weight: 600; line-height: 1;
  white-space: nowrap; vertical-align: middle;
}
.ig-badge i, .ig-privacy i { font-size: 11px; }

.ig-badge { border: 1px solid var(--border, #dde5ef); background: #fff; color: #5b6b80; cursor: pointer; font-family: inherit; transition: background-color .15s ease, color .15s ease; }
.ig-badge:hover { background: #f1f5fa; color: #1e3a5f; }
.ig-badge.ig-on { border-color: #1e3a5f; background: #1e3a5f; color: #fff; }
.ig-badge:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; }

/* 개인정보 배지 — 누르는 버튼이 아니라 항상 보이는 주의 표시 */
.ig-privacy { margin-left: 6px; border: 1px solid #f3c9a4; background: #fff4ea; color: #b4530f; cursor: help; }

/* 자기 모양을 가진 상자(예: 십일금 누계 설명)는 모양 그대로 보이기·숨기기만 한다 */
.ig-more:not(.ig-open) { display: none; }

/* 제목 옆에 늘 보이는 화면 고유 배지(예: 십일금 기준월)의 간격 */
h2.ig-title .tt-title-badge,
h2.ig-title .tt-warn { margin-left: 6px; font-size: 11.5px; }

/* 안내문: 평소엔 접고, 펼치면 옅은 상자 안에 보인다 */
.ig-guide { display: none; }
.ig-guide.ig-open {
  display: block; margin-top: -4px; padding: 10px 14px;
  border: 1px solid var(--border, #dde5ef); border-radius: 10px; background: #f8fafc;
  line-height: 1.7;
}