/* ==================================================================
   알림 목록 (/alarms)
   ------------------------------------------------------------------
   대구(dg-front)의 re100-renewal.css 에서 이 화면이 쓰는 규칙만 옮겼다.
   색은 여수 variables.css 토큰으로 바꿔 적었다(myDeal.css 와 같은 방침).

   ★ 이 화면은 KpiStrip · SearchFilter · ChoiceButtons 를 함께 쓴다.
     그 세 개의 CSS 는 myDeal.css 에 있고, index.html 이 둘 다 읽는다.
   ================================================================== */

.al-list { border-top: 1px solid var(--color-gray-100); }

.al-list > li { border-bottom: 1px solid var(--color-gray-100); }

.al-list > li > button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .8rem .5rem;
  border: 0; background: none; text-align: left; cursor: pointer; }

.al-list > li > button:hover, .al-list > li > button:focus-visible { background: var(--color-gray-50); }

/* 읽지 않은 줄은 배경이 아주 옅게 다르다. 그것만으로 구분하지 않고 점과 라벨을 함께 쓴다 */
.al-list > li.unread > button { background: var(--md-tint, #eaf1f7); }

.al-list .ico { display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border: 1px solid var(--color-gray-200); border-radius: 50%;
  background: var(--color-white); color: var(--color-gray-600); }

.al-list .ico.k-ot { color: var(--color-primary); }

.al-list .body { display: flex; flex: 1; flex-direction: column; gap: .2rem; min-width: 0; }

.al-list .meta { display: flex; align-items: center; gap: .4rem; }

.al-list .meta .tit-badge { margin-left: 0; }

.al-list .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-btn-error); }

.al-list .txt { font-size: .78rem; line-height: 1.5; color: var(--color-gray-800); white-space: pre-line; }

.al-list li:not(.unread) .txt { color: var(--color-gray-600); }

.al-list .date { flex: none; font-size: .68rem; color: var(--color-gray-500); }

.al-empty { padding: 2.5rem 0; text-align: center; font-size: .75rem; color: var(--color-gray-500); }

/* myDeal.css 의 틴트는 .md-page 안에서만 선다. 이 화면에도 같은 값을 둔다 */
.al-page { --md-tint: #f4f8fb; }