/* 아일랜드 알림(IslandAlert) — 화면 위 가운데에 붙은 알약. 콘솔 모든 알림의 공통 부품(토스트·하단 고정 줄 대체).
   정본은 이 파일. 서버가 그리는 페이지(로그인·템플릿 데모 안내)는 같은 클래스(fx-island)와 같은 규칙을 쓴다.
   토큰은 --fxc-*. 토큰이 없는 페이지에서는 시스템 색(Canvas/CanvasText)으로 떨어진다. 새 색 값 없음, 그림자 없음 — 구분은 보더·배경. */
.fx-island{
  --isl-bg:var(--fxc-raised,Canvas);
  --isl-fg:var(--fxc-fg,CanvasText);
  --isl-line:var(--fxc-edge-strong,color-mix(in srgb,CanvasText 28%,transparent));
  --isl-hover:var(--fxc-hover,color-mix(in srgb,CanvasText 12%,transparent));
  --isl-tone:var(--isl-fg);
  --isl-dot:var(--fxc-lime,var(--fx-brand,CanvasText));
  position:fixed;z-index:140;top:calc(env(safe-area-inset-top,0px) + var(--isl-top,8px));left:50%;translate:-50% 0;
  --isl-sb:linear(0,0.022,0.079,0.163,0.264,0.374,0.487,0.597,0.701,0.795,0.877,0.948,1.005,1.05,1.084,1.107,1.12,1.126,1.125,1.119,1.11,1.098,1.084,1.07,1.056,1.042,1.03,1.019,1.01,1.002,0.996,0.991,0.987,0.985,0.984,0.984,0.985,0.986,0.987,0.989,0.991,0.992,0.994,0.996,0.997,0.998,0.999,1,1.001,1.001,1.002,1.002,1.002,1.002,1.002,1.002,1.002,1.001,1.001,1.001,1);--isl-ss:linear(0,0.01,0.037,0.075,0.122,0.173,0.228,0.283,0.337,0.391,0.442,0.491,0.537,0.58,0.62,0.657,0.692,0.723,0.751,0.777,0.801,0.822,0.841,0.859,0.874,0.888,0.901,0.912,0.922,0.931,0.939,0.946,0.952,0.958,0.963,0.967,0.971,0.975,0.978,0.98,0.983,0.985,0.987,0.988,0.99,0.991,0.992,0.993,0.994,0.995,0.995,0.996,0.996,0.997,0.997,0.998,0.998,0.998,0.998,0.999,1);
  box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);border-radius:18px;color:var(--isl-fg);
  font-family:inherit;font-size:13px;font-weight:400;line-height:1.5;text-align:left;
  transform:translateY(-12px) scale(.94);box-shadow:0 12px 32px rgba(0,0,0,0),0 2px 6px rgba(0,0,0,0);
  transition:transform .52s var(--isl-sb),box-shadow .12s linear}
@supports not (transition-timing-function:linear(0,1)){.fx-island{--isl-sb:cubic-bezier(.34,1.3,.64,1);--isl-ss:cubic-bezier(.2,.9,.3,1)}}
.fx-island__clip{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;min-height:28px;padding:6px 8px 6px 30px;border:1px solid var(--isl-line);border-radius:inherit;background:var(--isl-bg);color:inherit;
  clip-path:inset(0 calc(50% - 14px) calc(100% - 28px) calc(50% - 14px) round 14px);transition:clip-path .52s var(--isl-ss)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){.fx-island__clip{background:color-mix(in srgb,var(--isl-bg) 86%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8)}}
.fx-island[data-state=open]{transform:none;box-shadow:0 12px 32px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.14);transition:transform .52s var(--isl-sb),box-shadow .25s linear .28s}
.fx-island[data-state=open] .fx-island__clip{clip-path:inset(-12px round 18px)}
.fx-island[hidden]{display:none}
.fx-island[data-kind=warning]{--isl-line:var(--fxc-fg,CanvasText)}
.fx-island[data-kind=error]{--isl-line:var(--fxc-danger,CanvasText);--isl-tone:var(--fxc-danger,CanvasText);--isl-dot:var(--fxc-danger,CanvasText)}
.fx-island__mark{position:absolute;left:6px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--isl-tone)}
.fx-island__ico{position:absolute;inset:0;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s ease .1s}
.fx-island__dot{display:none}
.fx-island__body{flex:1 1 auto;min-width:0;opacity:1;transition:opacity .2s ease .1s,visibility 0s}
.fx-island__label{margin-right:6px;font-weight:700;color:var(--isl-tone)}
.fx-island__text{overflow-wrap:anywhere}
.fx-island__acts{display:inline-flex;flex:none;gap:4px;opacity:1;transition:opacity .2s ease .1s,visibility 0s}
.fx-island__act{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border:1px solid var(--isl-line);border-radius:12px;background:transparent;color:inherit;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}
.fx-island__act::after,.fx-island__close::after,.fx-island__open::after{content:"";position:absolute;inset:-10px -4px}
.fx-island__act:hover,.fx-island__close:hover{background:var(--isl-hover)}
.fx-island__n{flex:none;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--isl-fg)}
.fx-island__n:empty{display:none}
.fx-island__close,.fx-island__open{position:relative;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;transition:background-color .2s ease,opacity .2s ease .1s}
.fx-island__close{width:20px;height:20px;border-radius:50%}
.fx-island__close::after{inset:-12px}
.fx-island__close svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.fx-island__open{position:absolute;inset:0;border-radius:inherit;visibility:hidden}
.fx-island__open::after{inset:-8px}
.fx-island__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx-island :is(.fx-island__act,.fx-island__close,.fx-island__open):focus-visible{outline:2px solid var(--fxc-ring,var(--isl-fg));outline-offset:2px}
/* 콘솔 화면 — 상단바(검색·메뉴)를 가리지 않도록 상단바 바로 아래 가운데에 붙는다. 체험 띠가 있으면 그 아래. */
body:has(.fxc-top) .fx-island{--isl-top:calc(var(--fxc-top-h,0px) + var(--fhcd-h,0px) + 8px)}
/* 접힘 — 작은 점(대기 알림이 있으면 옆에 숫자) */
.fx-island[data-state=closed]{pointer-events:none}
.fx-island[data-state=closed] :is(.fx-island__body,.fx-island__acts,.fx-island__close,.fx-island__ico){opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s}
.fx-island:not([data-state=closed]) .fx-island__n::before{content:"+"}
.fx-island.is-init,.fx-island.is-init *{transition:none!important}
/* 움직임 줄이기 — 크기 변화 없이 페이드만 */
@media (prefers-reduced-motion:reduce){.fx-island,.fx-island *{transition:opacity .2s ease!important}.fx-island__clip{clip-path:none!important}.fx-island[data-state=closed]{opacity:0;transform:none}}
@media (min-width:783px){.admin-bar .fx-island{top:calc(env(safe-area-inset-top,0px) + 40px)}}
@media (max-width:782px){.admin-bar .fx-island{top:calc(env(safe-area-inset-top,0px) + 54px)}}
/* ===== 허브 테마 매핑 — 위 규칙은 콘솔 정본 그대로, 아래만 허브 토큰으로 이어 붙인다 =====
   알약은 라이트·다크 어느 면에서나 검정 계열. 새 색 값 없음(fx 토큰만, 토큰이 없는 옛 화면은 같은 값으로 폴백).
   라임은 접힌 점 8px 에만, 오류는 어두운 면용 --fx-alert. */
.fx-island{
  --fxc-raised:var(--fx-s3,#25252b);
  --fxc-fg:var(--fx-t1,#f7f7f5);
  --fxc-edge-strong:var(--fx-edge-ink-strong,rgba(255,255,255,.22));
  --fxc-hover:color-mix(in srgb,var(--fx-t1,#f7f7f5) 14%,transparent);
  --fxc-danger:var(--fx-alert,#ff7a6b);
  --fxc-lime:var(--fx-brand,#c8f05a);
  --fxc-ring:var(--fx-brand,#c8f05a);
  z-index:100020;font-family:var(--fx-face,inherit)}
html[data-fx-surface="light"] .fx-island{--fxc-raised:var(--fx-k1,#111111)}
/* 고정 헤더(위에서 12~76px) 아래에 놓아 메뉴를 가리지 않는다 */
.fx-island{--isl-top:84px}
@media (min-width:783px){.admin-bar .fx-island{top:calc(env(safe-area-inset-top,0px) + 116px)}}
@media (max-width:782px){.admin-bar .fx-island{top:calc(env(safe-area-inset-top,0px) + 130px)}}
/* ===== 알약 모양(시안 v2) — 어두운 유리 알약 · 24px 아이콘 칩 · 14px 글자 · 28px 버튼. 위 규칙 뒤에서 값만 덮는다 ===== */
.fx-island{--isl-bg:#1c1d22;--isl-fg:#fff;--isl-line:rgba(255,255,255,.16);--isl-hover:rgba(255,255,255,.12);--isl-tone:#fff;border-radius:22px;width:max-content;max-width:min(520px,calc(100vw - 24px))}
.fx-island,.fx-island *{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif}
.fx-island__clip{min-height:44px;gap:10px;padding:12px 14px 12px 44px;border:0;box-shadow:inset 0 0 0 .5px var(--isl-line)}
.fx-island[data-state=open] .fx-island__clip{clip-path:inset(-12px round 22px)}
.fx-island__mark{left:10px;top:10px;width:24px;height:24px;margin-top:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:#fff}
.fx-island__ico{position:static;width:14px;height:14px;stroke-width:2.2}
.fx-island[data-kind=success] .fx-island__mark{background:var(--fxc-lime,#c8f05a);color:#111216}
.fx-island[data-kind=warning] .fx-island__mark{background:none;box-shadow:inset 0 0 0 1.5px #fff}
.fx-island[data-kind=error] .fx-island__mark{background:#ff5a4e;color:#fff}
.fx-island__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx-island__text{font-size:14px;font-weight:600;line-height:20px;color:#fff}
.fx-island__act{min-height:28px;padding:0 12px;border:0;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;font-size:13px}
.fx-island__act:hover{background:rgba(255,255,255,.22)}
.fx-island__close{align-self:flex-start;margin-top:-4px;width:28px;height:28px;background:rgba(255,255,255,.10);color:#fff}
.fx-island__close svg{width:10px;height:10px}
.fx-island__n{color:rgba(255,255,255,.72)}
/* 알약 모바일 — 버튼이 있으면 글은 윗줄(닫기 옆), 버튼은 아랫줄에 넓게 */
@media (max-width:600px){
.fx-island__clip{flex-wrap:wrap;padding:12px 48px 12px 44px;row-gap:10px}
.fx-island__body{flex:1 1 100%;min-width:0}
.fx-island__text{word-break:keep-all}
.fx-island__close{position:absolute;top:8px;right:8px;margin-top:0}
.fx-island__acts{flex:1 1 100%;gap:8px;justify-content:flex-start}
.fx-island__act{flex:0 0 auto;justify-content:center;min-height:32px;padding:0 14px;border-radius:16px}
.fx-island__acts:empty{display:none}
}