/* alerts.css — 알림. app.css 에서 주제별로 나눔; layout.html 이 base → … 순서로 전부 링크한다. */
  .bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--navy); text-decoration: none; line-height: 1; border-radius: 50%; }
  .bell:hover { background: var(--bg); }
  .bell .dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid #fff; }
  .alist .al { display: grid; grid-template-columns: 60px minmax(0, 1fr) 64px 118px 84px; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; } /* 배지 / 내용 / 판정 / 값 / 시각 — 모든 행이 같은 열 */
  .alist .al .vl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .alist .al .vl.pos { color: var(--green); }
  .alist .al .vl.neg { color: var(--red); }
  .alist .al .vl small { font-weight: 600; color: var(--text); }
  .alist .al .ak { width: 100%; box-sizing: border-box; min-width: 0; }
  .alist .al .ts { text-align: right; }
  .alist .al.new { background: #fff8e6; }
  .alist .al[hidden] { display: none; }
  .alist .al .tx { flex: 1; min-width: 0; }
  .alist .al .ts { color: var(--muted); font-size: 12px; white-space: nowrap; }
  .alist .al .tx b { color: var(--navy); }
  .alist .al .tx b.pos { color: var(--green); }
  .alist .al .tx b.neg { color: var(--red); }
  .alist .al .tx .jt { margin-left: 2px; }
  .ak { display: inline-block; min-width: 44px; text-align: center; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: var(--r-sm); white-space: nowrap; }
  /* 필터 = 단일 선택 세그먼트(.seg)와 같은 모양: 알약 테두리 안에 칸, 켜짐 = 네이비 채움 — 색 태그(.ak.rec 등)는 목록 행에서만 */
  .afilter { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; background: #fff; }
  .afilter a, .afilter a.ak { display: inline-flex; align-items: center; height: 100%; min-width: 0; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
  .afilter a.on, .afilter a.ak.on { background: var(--navy); color: #fff; }
  @media (max-width: 700px) { .afilter { height: 28px; } .afilter a, .afilter a.ak { padding: 0 9px; font-size: 12px; } }
  .ak.all { background: var(--hover); color: var(--text); }
  .ak.rec { background: #fff1d6; color: #a95900; }
  .ak.res { background: #e6f0ff; color: var(--blue); }
  .ak.my { background: #e4f5ea; color: #1d7a3e; }
  .ak.sp, .ak.mv { background: var(--amber-bg); color: var(--amber); }   /* 선발 변경·배당 급변 — 카드 경고와 같은 호박색 */
  .ak.bot { background: #efe9ff; color: #5b3fc4; }   /* 전략·AI 적중 — 랭킹의 AI 배지와 같은 보라 계열 */
  .afilter a[data-k="bot"] { white-space: nowrap; }
  .alist .al .tx { overflow-wrap: anywhere; } /* 배지 + 금액은 한 덩어리로 (좁은 화면에서 '−2 / 만' 처럼 끊기지 않게) */
  @media (max-width: 700px) {
    .alist .al { grid-template-columns: 46px minmax(0, 1fr) max-content max-content; padding: 10px 8px; gap: 6px; font-size: 13px; }
    .alist .al .ts { grid-column: 2 / -1; font-size: 11px; text-align: left; margin-top: -2px; }
    .alist .al .vl { font-size: 13px; }
    .ak { min-width: 38px; font-size: 11px; padding: 2px 4px; }
  } /* 모바일: 시각은 내용 아래 줄 */
/* 알림 개편: 날짜 머리줄 · 4칸(종류 | 내용 | 금액 | 시각) · 안 본 알림은 왼쪽 점 · 필터는 밑줄 탭 */
  .alist .ad { padding: 10px 14px 6px; font-size: 13px; font-weight: 800; color: var(--muted); background: #f7f8fb; border-bottom: 1px solid var(--line); }
  .alist .ad[hidden] { display: none; }
  .alist .al { grid-template-columns: 56px minmax(0, 1fr) max-content 44px; position: relative; cursor: pointer; }
  .alist .al.new, .alist .ai.new > .al { background: transparent; }
  .alist .ai.new > .al::before, .alist a.ai.new::before { content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--blue); }
  .alist .al .tx small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
  .alist .al .tx small b.pos { color: var(--green); } .alist .al .tx small b.neg { color: var(--red); }
  .alist .al .ts { text-align: right; }
  .alist .al .chev { position: absolute; right: 4px; top: 50%; margin-top: -8px; font-style: normal; font-size: 11px; color: var(--muted); transition: transform .15s; }
  .alist details.ai > summary { list-style: none; }
  .alist details.ai > summary::-webkit-details-marker { display: none; }
  .alist details.ai[open] > summary .chev { transform: rotate(90deg); }
  .alist details.ai[hidden] { display: none; }
  .alist .asubs { background: var(--surface); border-bottom: 1px solid var(--line); }
  /* 이름 | 배당 | 금액 | 이동 — 숫자 두 칸은 폭을 고정해 위아래가 줄을 선다 (10/9) */
  .alist .asub { display: grid; grid-template-columns: minmax(0, 1fr) 62px 96px max-content; align-items: center; gap: 10px; padding: 9px 14px 9px 80px; border-top: 1px dashed var(--line); color: var(--text); font-size: 14px; }
  .alist .asub .tx small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
  .alist .asub .od { text-align: right; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .alist .asub .vl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .alist .asub .vl.pos { color: var(--green); } .alist .asub .vl.neg { color: var(--red); }
  .alist .asub .go { font-size: 13px; color: var(--blue); font-weight: 700; }
  @media (max-width: 700px) {
    .alist .al { grid-template-columns: 46px minmax(0, 1fr) max-content 38px; padding: 10px 10px 10px 14px; }
    .alist .al .ts { grid-column: auto; margin-top: 0; text-align: right; font-size: 12px; }
    .alist .asub { grid-template-columns: minmax(0, 1fr) 52px 84px max-content; gap: 6px; padding: 9px 10px 9px 62px; font-size: 13px; }
    .alist .asub .od { font-size: 12px; }
  }
  .alist .al { padding-right: 24px; } /* 펼침 화살표 자리를 모든 줄에 같이 비워 둠 — 화살표 있는 줄만 시각이 왼쪽으로 밀려 줄마다 어긋나던 것 */
  @media (max-width: 700px) { .alist .al { padding-right: 22px; } }
  /* 받기로 해 뒀는데 등록된 기기가 없을 때 (10/11: 이틀간 조용히 안 왔다) */
  .alist + .note.apush, .card > .notice.pushoff { display: block; }
  .notice.pushoff { margin: 10px 12px; padding: 11px 13px; border-radius: 8px; background: var(--amber-bg); border: 1px solid #f0d9b5; color: var(--amber); font-size: 13.5px; line-height: 1.6; text-decoration: none; }
  .notice.pushoff b { color: var(--amber); }
  .card > .notice.pushoff { display: flex; align-items: center; gap: 10px; line-height: 1.35; }   /* 아이콘 | 제목·이유 두 줄 | 등록 버튼 (10/13) */
  .notice.pushoff .pi { flex: none; font-style: normal; font-size: 18px; }
  .notice.pushoff .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .notice.pushoff .pt b { font-size: 14px; color: #8a4b06; }
  .notice.pushoff .pt small { font-size: 12.5px; color: #9a6a2c; }
  .notice.pushoff .pb { flex: none; padding: 6px 11px; border-radius: var(--r-pill); background: #c77a12; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .notice.pushoff:hover .pb { background: #a8650c; }
/* 모바일 (10/13): 안 본 점이 배지에 붙고, '전략·AI' 배지가 칸을 넘쳐 내용 시작 자리가 줄마다 달랐다 — 점 자리를 따로 두고 배지 칸 폭 고정 */
  @media (max-width: 700px) {
    .alist .al { grid-template-columns: 50px minmax(0, 1fr) max-content max-content; padding-left: 16px; }
    .alist .al .ak { min-width: 0; padding: 2px 2px; font-size: 10.5px; letter-spacing: -.3px; overflow: hidden; }
    .alist .ai.new > .al::before, .alist a.ai.new::before { left: 6px; }
    .alist .asub { padding-left: 72px; }
  }
  @media (max-width: 400px) { .notice.pushoff { gap: 8px; padding: 10px 11px; } .notice.pushoff .pt b { font-size: 13px; letter-spacing: -.3px; } .notice.pushoff .pt small { font-size: 12px; letter-spacing: -.3px; } .notice.pushoff .pi { font-size: 16px; } .notice.pushoff .pb { padding: 6px 9px; font-size: 12px; } }