/*
  components/chips.css (Ver.0800)
  - Policy: color is allowed ONLY on chips/tags/labels.
  - No layout changes; purely visual tokens + safe padding/border.
*/

/* Base chip */
.u-chip,
.search-chip,
.category_label,
.scope-chip,
.tag-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .35rem;
  padding: .24rem .62rem;
  border-radius: var(--chip-radius);
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* Keep legacy bracket labels readable (e.g. [board]) */
.category_label{
  letter-spacing: .2px;
}

/* Scope variants (only chip UI uses secondary colors)
   - WORKS 결과가 한 종류(VR/JAV)로만 나올 경우, UI에서 WORKS 대신 VR/JAV 텍스트로 표시한다.
   - 스타일은 WORKS와 동일한 톤(works chip 토큰)으로 유지하여 시각적 정합을 유지한다.
*/
.scope-chip--works,
.scope-chip--vr,
.scope-chip--jav{
  border-color: color-mix(in oklab, var(--chip-works) 38%, var(--line));
  background: color-mix(in oklab, var(--chip-works) 14%, transparent);
  color: color-mix(in oklab, var(--chip-works) 70%, var(--text));
}
.scope-chip--actors{
  border-color: color-mix(in oklab, var(--chip-actors) 38%, var(--line));
  background: color-mix(in oklab, var(--chip-actors) 14%, transparent);
  color: color-mix(in oklab, var(--chip-actors) 70%, var(--text));
}
.scope-chip--posts{
  border-color: color-mix(in oklab, var(--chip-posts) 38%, var(--line));
  background: color-mix(in oklab, var(--chip-posts) 14%, transparent);
  color: color-mix(in oklab, var(--chip-posts) 70%, var(--text));
}
.scope-chip--neutral{
  border-color: var(--chip-neutral);
  background: color-mix(in oklab, var(--chip-neutral) 12%, transparent);
  color: color-mix(in oklab, var(--text) 78%, var(--chip-neutral));
}

/* Hover: subtle glow only (no padding/size shift) */
.search-chip:hover,
.category_label:hover,
.scope-chip:hover,
.tag-chip:hover{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent);
}

@supports not (color: color-mix(in oklab, white 50%, black)){
  .scope-chip--works,
  .scope-chip--vr,
  .scope-chip--jav{ border-color: rgba(34,211,238,.35); background: rgba(34,211,238,.10); color: rgba(34,211,238,.95); }
  .scope-chip--actors{ border-color: rgba(251,113,133,.35); background: rgba(251,113,133,.10); color: rgba(251,113,133,.95); }
  .scope-chip--posts{ border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.10); color: rgba(139,92,246,.95); }
  .scope-chip--neutral{ border-color: rgba(100,116,139,.40); background: rgba(100,116,139,.10); color: rgba(100,116,139,.95); }
}