/* 안내 띠 · 뱃지 - 규칙은 claude_common/ui/notice.md, 닫기·개수 도우미는 notice.js
   띠 = 뜻 색 옅은 바탕 + 왼쪽 그림 + (×)  (2026-09-27, 통바탕 흰 글자 쓰지 않음)
   상태 뱃지 = 뜻 색 진한 바탕 + 흰 글자 알약 (2026-09-27 결정) */
:root {
  --nt-info: var(--uk-brand);  --nt-info-bg: var(--uk-brand-light);
  --nt-warn: var(--uk-warn);   --nt-warn-bg: var(--uk-warn-light);  --nt-warn-fg: var(--uk-warn-fg);
  --nt-ok: var(--uk-ok);       --nt-ok-bg: var(--uk-ok-light);      --nt-ok-fg: var(--uk-ok-fg);
  --nt-danger: var(--uk-danger); --nt-danger-bg: var(--uk-danger-light); --nt-danger-fg: var(--uk-danger-fg);
}

/* ── 안내 띠 ── */
.notice {
  --nt-c: var(--nt-info);
  position: relative; margin: 0 0 12px; padding: .8rem 1rem .8rem 2.75rem;
  border-radius: var(--uk-r-md); background: var(--nt-info-bg); color: var(--uk-fg);
  box-shadow: var(--uk-up-sm); font-size: 14px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
.notice::before {
  content: ""; position: absolute; left: 1rem; top: .85rem; width: 20px; height: 20px; background: var(--nt-c);
  -webkit-mask: var(--nt-ic) center / contain no-repeat; mask: var(--nt-ic) center / contain no-repeat;
  --nt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E");
}
.notice.is-warning, .notice.is-warn { --nt-c: var(--nt-warn); background: var(--nt-warn-bg); color: var(--nt-warn-fg); }
.notice.is-warning::before, .notice.is-warn::before { --nt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.notice.is-danger { --nt-c: var(--nt-danger); background: var(--nt-danger-bg); color: var(--nt-danger-fg); }
.notice.is-danger::before { --nt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5h.01'/%3E%3C/svg%3E"); }
.notice.is-success, .notice.is-ok { --nt-c: var(--nt-ok); background: var(--nt-ok-bg); color: var(--nt-ok-fg); }
.notice.is-success::before, .notice.is-ok::before { --nt-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); }
.notice.is-plain { background: var(--uk-surface); color: var(--uk-muted); padding-left: 1rem; }
.notice.is-plain::before { display: none; }
/* 목록·칸 위에 꽉 붙는 띠(탐색기 검색 결과·휴지통 안내·연결 끊김, 2026-10-23) - 모서리 0·그림자 없음·바깥 여백 0, 위아래를 좁게 */
.notice.is-band { flex: none; margin: 0; padding: .5rem 1rem .5rem 2.5rem; border-radius: 0; box-shadow: none; font-size: 13px; line-height: 1.5; }
.notice.is-band::before { left: .9rem; top: .6rem; width: 17px; height: 17px; }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.notice:has(> .notice-x) { padding-right: 2.6rem; }
/* 닫기 X = 작은 떠 있는 칸 닫기와 같은 28 칸 · SVG 그림 16(modal.md 닫기 X 크기 표 .side-panel-close.is-small) - CSS 막대로 그리지 않는다(2026-10-23).
   그림은 마크업에 넣는다(<svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg>), 빈 단추면 notice.js가 같은 그림을 채운다 */
.notice-x {
  position: absolute; top: .55rem; right: .55rem; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--uk-r-sm); cursor: pointer;
  background: transparent; color: inherit; opacity: .65;
}
.notice-x > svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice.is-band .notice-x { top: 50%; right: .4rem; margin-top: -14px; }
.notice-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.notice-x:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 1px; opacity: 1; }

/* ── 상태 뱃지 - 진한 바탕 + 흰 글자 ── */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 .6rem; border-radius: var(--uk-r-pill); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--uk-on-strong); background: var(--tone, var(--uk-muted)); vertical-align: middle; }
/* 뜻 이름은 is-ok · is-warn(예전 이름 is-success · is-warning도 받는다). data-tone="ok|warn|danger|brand|muted"도 같다(tone.css) */
.badge:not([data-tone]) { --tone: var(--uk-muted); }
.badge.is-brand { --tone: var(--uk-brand); }
.badge.is-ok, .badge.is-success { --tone: var(--nt-ok); }
.badge.is-warn, .badge.is-warning { --tone: var(--nt-warn); }
.badge.is-danger { --tone: var(--nt-danger); }
.badge.is-muted { --tone: var(--uk-muted); }
/* 글 줄 안(목록 줄 둘째 줄 등)에 끼우는 작은 뱃지 - 줄 높이(18px 안팎)를 늘리지 않는다(2026-10-23) */
.badge.is-sm { height: 18px; padding: 0 .5rem; font-size: 11.5px; }

/* ── 개수 뱃지 - 0이면 숨김(notice.js setCount) ── */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 7px; border-radius: var(--uk-r-pill); background: var(--uk-sunk); color: var(--uk-fg); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.count[hidden] { display: none; }
.count.is-alert { min-width: 18px; height: 18px; padding: 0 5px; background: var(--uk-danger); color: var(--uk-on-strong); box-shadow: 0 0 0 2px var(--uk-surface); font-size: 10.5px; font-weight: 700; }

/* ── 표시 뱃지 - 색 동그라미 + 흰 속모양, 꺼짐은 회색조 ── */
.mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mark-c, var(--nt-warn)); color: var(--uk-on-strong); font-size: 12px; line-height: 1; }
.mark.is-off { filter: grayscale(1); opacity: .45; }

/* 버튼 한 번의 결과(flashButton) */
.is-flashed { color: var(--nt-ok-fg) !important; }