/* 안내 띠 · 뱃지 - 규칙은 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; }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.notice:has(> .notice-x) { padding-right: 2.6rem; }
.notice-x {
  position: absolute; top: .7rem; right: .7rem; width: 24px; height: 24px; border: 0; border-radius: var(--uk-r-sm); cursor: pointer;
  background: transparent; color: inherit; opacity: .65;
}
.notice-x::before, .notice-x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.notice-x::after { transform: rotate(-45deg); }
.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); }

/* ── 개수 뱃지 - 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; }