/* web/fx/ 런타임이 쓰는 최소 CSS. 페이지 토큰(tokengo.css)은 건드리지 않는다. */

/* 테마 배경은 페이지 전체에 깔린다. --ev-* 는 themes.js 의 applyTheme 가 넣는다. */
/* 카드 면의 바탕. 페이지 --surface 를 쓰면 안 된다 — 라이트 페이지에 다크 테마를
   깔면 흰 카드 + 흰 글자가 되어 안 읽힌다. applyTheme 가 찍는 data-theme 을 따른다.
   (.fx-theme 에 걸면 안 된다: 테마 노드와 .fx-theme 노드가 다를 수 있고,
    그때 .fx-theme 선언이 상속돼 내려온 다크 값을 도로 덮는다.) */
:root, [data-theme="light"] { --ev-surface-base: #FFFFFF; }
[data-theme="dark"] { --ev-surface-base: #202127; }

.fx-theme {
  background-color: var(--ev-tint, var(--bg));
  background-image: var(--ev-bg-layers, none);
  background-size: var(--ev-bg-size, auto);
  background-attachment: fixed;
  background-repeat: repeat;
  color: var(--ev-ink, var(--ink));
}

/* 이펙트 캔버스 — 내용 뒤, 클릭 통과. */
.fx-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* 테마 위에 얹는 카드 면. 스트록 없음 — 그림자 토큰만. */
.fx-surface {
  background: color-mix(in srgb, var(--ev-surface-base, var(--surface)) calc(var(--ev-surface-alpha, .86) * 100%), transparent);
  color: var(--ev-ink, var(--ink));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* 한국어 줄바꿈 — 어절이 쪼개지지 않게. */
.fx-theme, .fx-surface { word-break: keep-all; }

/* 스와치·썸네일 (패널·데모 공용) */
.fx-swatch {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--ev-tint);
  background-image: var(--ev-bg-layers);
  background-size: var(--ev-bg-size, auto);
  box-shadow: var(--shadow);
}
.fx-swatch[aria-pressed="true"] { outline: 2px solid var(--action, #454653); outline-offset: 2px; }
.fx-swatch .fx-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 8px; font-size: 11px; font-weight: 700; line-height: 1.2;
  color: var(--ev-ink); text-align: left; word-break: keep-all;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ev-tint) 85%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .fx-theme { background-attachment: scroll; }
}