/* ───────────────────────────────────────────────
   포인트 컬러 — 빨강
   무채색 화면 위에서 빨강은 세 가지 뜻에만 쓴다. 한 화면에 여러 군데 넓게 칠하지 않는다.
     1. 지금      녹화등(로고의 점·녹화 버튼·검수 중), 재생 헤드, 지금 보고 있는 메뉴
     2. 꼭 고칠 것 필수 수정 모양(■)과 '수정' 도장 — 붉은 인주처럼
     3. 행동      주요 버튼에 손을 올렸을 때, 글자를 고를 때
   이 파일만 고치면 빨강이 쓰이는 자리를 한 번에 바꿀 수 있다.
   ─────────────────────────────────────────────── */

:root {
  --rec-ink: color-mix(in srgb, var(--rec) 13%, transparent);
}

/* ── 1. 지금 ── */

/* 녹화등이 너무 흐려지지 않게 — 빨강이 늘 보이도록 */
@keyframes rec-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 지금 보고 있는 메뉴 */
.nav a[aria-current="page"]::after {
  background: var(--rec);
  height: 2px;
}

/* 화면 왼쪽 세로 표지의 작은 사각형 */
.vtag::before {
  background: var(--rec);
}

/* 재생 헤드 — 편집기의 빨간 플레이헤드 */
.lanes__head {
  border-left-color: var(--rec);
}

.lanes__head span {
  background: var(--rec);
  color: #fff;
}

.player__bar .player__tc [data-tc] {
  color: var(--fg);
}

/* 실시간 검수: 지금 진행 중인 단계 */
.rail__bar b {
  color: var(--rec);
  opacity: 0.9;
}

/* 링크를 확인해 녹화 준비가 끝나면 입력창의 크롭 마크가 빨갛게 */
.slate > .crops {
  transition: color var(--t-slow);
}

.slate[data-state="ready"] > .crops {
  color: var(--rec);
}

/* ── 2. 꼭 고칠 것 ── */

.sev[data-sev="must"] {
  color: var(--rec);
}

.sevs .zero .sev[data-sev="must"] {
  color: var(--fg-4);
}

.stamp[data-kind="fail"] {
  --c: var(--rec);
  background: var(--rec-ink);
  border-color: var(--rec);
  color: var(--rec);
}

/* 검수 결과 숫자: 필수 수정이 있을 때만 */
.verdict__nums div:first-child dd:not([data-count="0"]),
.nt__stats dd[data-count]:not([data-count="0"]) {
  color: var(--rec);
}

/* ── 3. 행동 ── */

.btn--ink::before {
  background: var(--rec);
}

.btn--ink:not([disabled]):not([aria-disabled="true"]):hover {
  color: #fff;
}

::selection {
  background: var(--rec);
  color: #fff;
}

/* ── 세이프 존 아이콘 (플랫폼 화면에서 가려지는 자리를 줄여 그린 것) ── */

.zico {
  flex: none;
  overflow: visible;
}

.zico .o {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.85;
}

.zico .z {
  fill: currentColor;
  opacity: 0.2;
}

.zico .u {
  fill: currentColor;
}

.zico .l {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
}

.zico .f {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-dasharray: 1.4 1.2;
}

.seg button:has(.zico),
.chip:has(.zico) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seg button .zico,
.chip .zico {
  display: inline-block;
}

.seg button[aria-pressed="true"] .zico .z {
  opacity: 0.32;
}