/* 번들 폰트: Pretendard Variable (SIL OFL 1.1) — public/fonts/ */
@font-face {
  font-family: 'Pretendard';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  src: url('/fonts/PretendardVariable.woff2') format('woff2');
}

:root {
  --bg: #141414;
  --panel: #1f1f1f;
  --panel-2: #2a2a2a;
  --border: #383838;
  --text: #eee;
  --muted: #888;
  --pgm: #c33;
  --pgm-glow: #f55;
  --pvw: #2a7;
  --pvw-glow: #4d9;
  --btn: #2e2e2e;
  --btn-hover: #3a3a3a;
  --on-air: #c33;
  --next: #c93;
  --tie: #38c;
  --warn: #c93;
  --ok: #2a7;
  /* 레이아웃 / 정사각 버튼 시스템 */
  --sidebar-w: 168px;
  --btn-size: 54px;   /* 정사각 소스버튼 한 변 (유일한 크기 노브) */
  --btn-key: 72px;    /* 키어 버튼 (2줄이라 약간 큼) */
  --btn-gap: 4px;
  --btn-radius: 2px;  /* 버튼 곡률(작게) */
  --vcard-max: calc(var(--btn-size) * 5 + 70px); /* 세로형(T-bar·오디오) 높이 상한 ≈ 버튼 5개 */
  --vcard-w: calc(var(--btn-size) * 2 + var(--btn-gap) + 24px); /* 세로형 기준폭 = DSK 2버튼 폭 ≈136px */
  --card-radius: 8px;
  --card-bg: #222222;
  /* 통일 카드(오디오·미디어·슈퍼소스·팔레트) — 한 곳에서 일괄 수정. 배경/라인/그림자=설정카드, 굴곡=슈퍼소스 */
  --ucard-bg: #1e1e23;
  --ucard-line: #2d2d35;
  --ucard-radius: 6px;
  --ucard-shadow: 0 2px 10px rgba(0,0,0,0.35);
  --right-col-w: 154px; /* 액션카드(T-bar) = 마스터볼륨 공통 우측 폭 */
  /* 키캡(단색) — 그라데이션 없이 키보드처럼 박힌 느낌 */
  --key-face: #e3e3e6;
  --key-border: #b4b6ba;
  --key-text: #0a0a0a;
  --key-pgm: #e11d1d;
  --key-pvw: #1da838;
  --key-yellow: #f3c80f;
  --key-blue: #2b9fe6;
  /* 키캡 입체(솔리드): 위 하이라이트 + 측면 음영 + 바닥 그림자(눌러 박힌 느낌) */
  --key-shadow: inset 0 1.5px 0 rgba(255,255,255,0.95), inset 0 -3px 2px rgba(0,0,0,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.25), 0 2px 3px rgba(0,0,0,0.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  overflow: hidden; font-size: 14px; }
/* 폼컨트롤은 기본 폰트(브라우저 폼 폰트)를 써서 Pretendard를 상속 안 함 → 전역으로 상속 강제 */
button, input, select, textarea { font-family: inherit; }

/* 모바일 브라우저 툴바 보정: 100dvh(동적 뷰포트) 우선, 미지원 시 100vh */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  /* 가로 모드 노치/카메라(좌우 세이프에어리어) 회피. 세로에선 0이라 영향 없음 */
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
/* 헤더 아래: 사이드바 + 본문 (가로) */
.app-body { display: flex; flex-direction: row; flex: 1; min-height: 0; }

/* ===== Sidebar nav (메뉴만 감싸는 단색 라운드 카드, 상태는 카드 밖) ===== */
/* 우측 패딩 0 → 본문↔사이드바 간격 = 페이지 좌패딩(6px) = 카드 간격과 동일 */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg); padding: 6px 0 6px 6px; gap: 8px; z-index: 1001; min-height: 0; }
.sidebar-card { display: flex; flex-direction: column; background: transparent; border: none;
  border-radius: 14px; overflow: hidden; }
.sidebar-brand { padding: 14px 14px 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.3px;
  color: var(--text); }
.side-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 46px; width: 100%;
  padding: 0 12px; border: none; background: transparent; color: #4a9eff; font-family: inherit;
  font-size: 14px; font-weight: 600; text-align: left; border-radius: 9px; cursor: pointer; }
.nav-item.active { background: #2f6fd0; color: #fff; }
.nav-item:not(.active):active { background: rgba(255,255,255,0.06); }
/* 해당 모델이 지원 안 하는 기능 = 회색 + 클릭 불가 */
.nav-item.disabled { color: var(--muted); cursor: not-allowed; pointer-events: none; opacity: 0.55; }
.bottom-nav .nav-item.disabled { opacity: 0.5; pointer-events: none; }
.nav-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0; }
.nav-ico svg { width: 20px; height: 20px; }
.sidebar-foot { padding: 4px 10px; display: flex; flex-direction: column; gap: 4px; }
.status { font-size: 11px; color: var(--muted); }
.status.ok { color: var(--ok); }

.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; }
.scrim.show { display: block; }

/* ===== Main column ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 7px 14px; min-height: 48px;
  background: var(--bg); border-bottom: 1px solid #26262c; flex-shrink: 0;
  position: relative; transition: background 0.12s, border-color 0.12s; }
/* 상단 세이프에어리어 보정: 아이폰 노치 + 안드로이드 edge-to-edge 상태바 + 실 아이패드 상태바.
   .is-touch(터치 기기 = 실 iPhone/iPad·시뮬) 또는 .is-android 에 적용 → Mac(Designed for iPad, 비터치)은 제외(창 타이틀바라 불필요). */
.is-touch .topbar, .is-android .topbar { padding-top: calc(7px + env(safe-area-inset-top, 0px)); min-height: calc(48px + env(safe-area-inset-top, 0px)); }
/* ↑ min-height(border-box)에 inset을 더해 콘텐츠 영역을 항상 34px로 유지 → 우측 버튼 유무와 무관하게 헤더 높이 일정 */
.is-touch .tb-alert-msg, .is-android .tb-alert-msg { top: calc(50% + env(safe-area-inset-top, 0px) / 2); }
/* ─── 헤더 알림 (경고/안내 — 배경색 전환 + 중앙 메시지) ─── */
.tb-alert-msg { display: none; position: absolute; left: 50%;
  top: 50%; /* 폰은 노치 패딩만큼 아래 @media 에서 보정 */
  transform: translate(-50%, -50%); align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  pointer-events: none; z-index: 5; }
.tb-alert-ico { display: inline-flex; line-height: 0; }
.tb-alert-ico:empty { display: none; }
.topbar.tb-alert-warn { background: #a81e1e; border-bottom-color: #821616; }      /* 경고 = 빨강(조금 밝게) */
.topbar.tb-alert-info { background: #1a3554; border-bottom-color: #102540; }      /* 안내 = 파랑(어두움) */
.topbar.tb-alert-edit { background: #e3a532; border-bottom-color: #c0871f; }      /* 버튼 초기화 = 버튼편집모드 앰버 */
.topbar.tb-alert-layout { background: #3f8bd6; border-bottom-color: #2c6aa8; }    /* 레이아웃 초기화 = 레이아웃편집모드 파랑 */
.topbar.tb-alert .tb-alert-msg { display: flex; animation: tb-alert-pop 0.16s ease; }
@keyframes tb-alert-pop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 4px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* 알림 상태(모든 변형 공통, base 클래스 tb-alert): 로고 아이콘·글씨 검은색, 나머지 요소 숨김 → 메시지만 남김 */
.topbar.tb-alert .tb-brand,
.topbar.tb-alert .tb-brand-a,
.topbar.tb-alert .tb-logo-ico { color: #161616; }
.topbar.tb-alert .tb-brand-svg .cp-cast,
.topbar.tb-alert .tb-brand-svg .cp-pad { fill: #161616; }
.topbar.tb-alert #atem-status,
.topbar.tb-alert .tb-div,
.topbar.tb-alert .tb-clock,
.topbar.tb-alert .tb-stat,
.topbar.tb-alert .topbar-right { opacity: 0; pointer-events: none; transition: none; animation: none; }
/* 알림 중 ON/REC 확실히 숨김 — phase opacity보다 우선 + 즉시(전환 없이) */
.topbar.tb-alert .tb-stat { opacity: 0 !important; transition: none !important; }
.topbar h1 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.nav-toggle { display: none; background: var(--btn); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; font-size: 16px; padding: 6px 12px; cursor: pointer; }
.topbar-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* 브랜드 로고 — 아이콘 + 워드마크 + 작은 for ATEM. 헤더 좌측, 그 뒤로 장비 이름 */
.tb-logo { display: flex; align-items: center; gap: 8px; padding-left: 4px; margin-right: 6px; } /* 로고 시작을 사이드바 nav 아이콘(좌측 18px)에 맞춤: topbar 14 + 4 = 18 */
.tb-logo-ico { display: inline-flex; align-items: center; color: #4a9eff; flex-shrink: 0; }
.tb-logo-ico svg { width: 30px; height: 30px; }
.tb-brand { font-size: 16px; font-weight: 800; letter-spacing: 0.2px; color: var(--text); white-space: nowrap; }
.tb-brand-a { color: #4a9eff; }
/* 헤더 워드마크(castpad.svg) — 디자인 그대로, 색만 Cast=파랑 / Pad=흰색 */
.tb-brand-svg { height: 28px; width: auto; display: block; flex-shrink: 0; }
.tb-brand-svg .cp-cast { fill: #4a9eff; }
.tb-brand-svg .cp-pad { fill: var(--text); }
.tb-brand-for { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); align-self: flex-end; padding-bottom: 3px; white-space: nowrap; }

/* 헤더 상태(모델명) — 한 줄, 길면 말줄임 */
.topbar #atem-status { width: auto; max-width: 340px; align-items: center; padding: 5px 8px; }
.topbar #atem-status-text { line-height: 1.2; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; word-break: normal; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; } /* ON/REC와 폰트 통일(모든 상태 공통) */
.topbar #atem-status .status-dot { margin-top: 0; }
.topbar #atem-status.mock #atem-status-text { font-size: 11px; } /* 데모 모델명은 작게 */
.topbar #atem-status .status-short { display: none; font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; } /* 짧은 라벨(연결/미연결): 모바일에서만 표시 · 폰트는 ON/REC(.tb-stat)와 통일 */
/* 중계 보조: ON AIR등 / 녹화 / 시계 */
/* 라이브/녹화 상태 — 시계 옆. ● ON(붉은) · ● REC(주황), 은은한 글로우 깜빡임 */
.tb-stats { display: flex; align-items: center; gap: 8px; }
/* ON/REC 둘 다 꺼지면 컨테이너 숨김 — 좁은 화면 아랫줄 빈 공간 방지 */
.tb-stats:not(:has(.tb-stat:not([hidden]))) { display: none; }
.tb-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.5px; animation: tbPulse 1.7s ease-in-out infinite; }
.tb-stat-dot { width: 8px; height: 8px; border-radius: 50%; }
.tb-on { color: #ff5a5f; }
.tb-on .tb-stat-dot { background: #ff3b30; box-shadow: 0 0 6px 1.5px rgba(255,59,48,0.85); }
.tb-rec { color: #ffa53b; }
.tb-rec .tb-stat-dot { background: #ff9500; box-shadow: 0 0 6px 1.5px rgba(255,149,0,0.85); }
.tb-div { color: #44464d; font-weight: 400; font-size: 14px; user-select: none; }
.tb-clock { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px; cursor: pointer; }
.tb-clock:hover { color: #4a9eff; }
.tb-stat[hidden], .tb-clock[hidden] { display: none; }
@keyframes tbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 크로스페이드 중에도 도트가 글로우로 깜빡(요소 opacity와 충돌 안 나게 box-shadow만 펄스) */
@keyframes tbGlowOn { 0%, 100% { box-shadow: 0 0 7px 2px rgba(255,59,48,0.95); } 50% { box-shadow: 0 0 2px 0 rgba(255,59,48,0.35); } }
@keyframes tbGlowRec { 0%, 100% { box-shadow: 0 0 7px 2px rgba(255,149,0,0.95); } 50% { box-shadow: 0 0 2px 0 rgba(255,149,0,0.35); } }
/* 편집 메뉴(⚙▾) */
.tb-edit-wrap { position: relative; }
.tb-edit-wrap[hidden] { display: none; }
.tb-edit-btn { display: inline-flex; align-items: center; gap: 6px; background: #2f6fd0;
  border: none; color: #fff; border-radius: 8px; padding: 7px 13px; font-size: 12.5px;
  font-weight: 700; font-family: inherit; cursor: pointer; }
.tb-edit-btn:hover { background: #3b7ae0; }
.tb-edit-btn.open { background: #255bb0; }
.tb-caret { font-size: 10px; opacity: 0.8; }
.tb-edit-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  background: #1f1f25; border: 1px solid #3a3a40; border-radius: 9px; padding: 5px;
  display: flex; flex-direction: column; gap: 2px; min-width: 168px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.tb-edit-pop[hidden] { display: none; }
.tb-edit-item { display: flex; align-items: center; gap: 11px; text-align: left; background: transparent;
  border: none; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 10px 12px; border-radius: 7px; cursor: pointer; }
.tb-edit-item svg { width: 18px; height: 18px; flex-shrink: 0; color: #9aa0aa; }
.tb-edit-item:hover { background: rgba(255,255,255,0.08); }
.tb-edit-item:hover svg { color: #4a9eff; }
.tb-edit-item.primary svg { color: #4a9eff; } /* 카드 추가 = 주 동작 강조 */
.tb-edit-sep { height: 1px; background: #34343c; margin: 5px 9px; }
/* 버튼편집 버튼 */
/* 평소: 주황 글씨 / 완료(editing): 주황 바탕 */
.edit-btn { display: inline-flex; align-items: center; gap: 6px;
  background: var(--btn); border: 1px solid var(--border); color: #e8951f;
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700;
  font-family: inherit; white-space: nowrap; user-select: none; touch-action: none; }
.edit-btn.editing { background: #e8951f; border-color: #e8951f; color: #1a1200; }
.edit-ico { display: inline-flex; align-items: center; width: 15px; height: 15px; }
.edit-ico svg { width: 15px; height: 15px; }
/* 편집모드 좌측 액션 버튼 (JS가 display 제어) — 색 채우기 */
.edit-actions { display: none; gap: 6px; align-items: center; }
.edit-act-btn { border: none; color: #fff; padding: 11px 18px; border-radius: 9px;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.edit-act-btn.on { background: #2a9d4f; }
.edit-act-btn.done { background: #2a9d4f; }   /* 완료 = 초록 */
.edit-act-btn.off { background: #555; }
.edit-act-btn.cancel { background: #c0392b; }
/* M/E 세그먼트 토글 (카드 헤더 우측에 작게) */
.me-tabs { display: inline-flex; gap: 0; background: #33333c; border-radius: 7px; padding: 2px; }
.me-tab { background: transparent; border: none; color: var(--muted); min-width: 0;
  padding: 3px 7px; border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 700;
  font-family: inherit; transition: color 0.1s; white-space: nowrap; }
.me-tab.active { background: #2f6fd0; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
/* 프로그램 카드의 M/E 탭은 크게(처음처럼) — 나머지(다음트랜지션/트랜지션유형)는 위 기본(작게) */
.pgm-head-row .me-tabs { border-radius: 8px; padding: 3px; }
.pgm-head-row .me-tab { min-width: 52px; padding: 6px 16px; font-size: 12px; border-radius: 6px; }
/* 헤더 줄: 카드이름 좌 · M/E 탭/표시 우. 좁으면 탭이 아래 줄로 내려감(글씨 세로깨짐 방지) */
.pgm-head-row, .ts-head-row { display: flex; align-items: center; justify-content: space-between;
  gap: 6px 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pgm-head-row .card-head, .ts-head-row .card-head { margin-bottom: 0; white-space: nowrap; }
/* 프로그램 헤드: M/E 탭(32px) 유무와 무관하게 높이 고정 → 카드 높이 일정 */
.pgm-head-row { min-height: 32px; }
/* 키어·트랜지션·DSK 헤드: M/E 탭(작은, 22px) 유무·DSK(탭없음) 모두 같은 높이로 고정 */
.ts-head-row { min-height: 22px; flex-wrap: nowrap; } /* 4 M/E라도 한 줄 유지(줄바꿈 금지) */
.ts-head-row .me-tabs { flex-shrink: 0; }             /* 탭은 안 줄고 */
.ts-head-row .card-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 공간 부족시 제목만 …처리 */
[data-card="dsk"] .card-head { min-height: 22px; display: flex; align-items: center; }
/* 탭은 항상 오른쪽 끝 (줄바꿈돼 아래로 내려가도 우측 정렬 유지) */
.pgm-head-row .me-tabs, .ts-head-row .me-tabs { margin-left: auto; }
/* T-bar 카드: 두 '길이' 사이 현재 M/E 표시(텍스트 표시, 버튼 아님 → 파랑 아닌 회색계) */
.me-ind { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #fff;
  background: #2f6fd0; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
/* T-bar 표시는 회색계(버튼 오인 방지) — .me-ind 보다 특정도 높여 확실히 덮음.
   가운데 정렬 + 내용 너비(0:25 배경보다 크지 않게) */
.me-ind.tbar-me-ind { text-align: center; margin: 0;
  background: #33333a; color: #a7adb6; font-size: 9px; padding: 2px 6px; }
/* 두 '길이' 사이 빈 공간을 채워, 그 안에서 M/E 표시를 세로·가로 중앙 정렬.
   (슬롯이 ftb-rate+FTB 를 아래로 밀어줌 → 단일 M/E 모델도 FTB 하단 고정 유지) */
.tbar-me-slot { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* 가로형: M/E 표시를 카드 우상단으로 (다음 트랜지션처럼) */
.switcher-action-card.is-horizontal .tbar-me-slot { position: absolute; top: 8px; right: 10px;
  flex: none; min-height: 0; z-index: 3; }
/* 하단 우측 액션바 (상단바 대체) */
/* 레이아웃/버튼편집 트리거: 카드 아래 좌측(흐름 안, 스크롤하여 접근) */
.sw-edit-triggers { display: none; } /* 헤더 ＋카드 메뉴로 통합 — 카드 아래 트리거 숨김(핸들러·액션바 와이어링은 DOM 유지) */
/* 카드추가 버튼 — 청록(레이아웃/편집과 색 구분) */
.addcard-btn { color: #2dd4bf; }
.addcard-btn:active { background: #14b8a6; border-color: #14b8a6; color: #042b27; }
/* 카드 추가 메뉴 */
.addcard-list { display: flex; flex-direction: column; gap: 8px; min-width: 230px;
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); } /* 내용 길면 이 영역만 스크롤(제목 고정), 모바일 dvh */
.addcard-item { padding: 12px 14px; border-radius: 10px; border: 1px solid #34343d; background: #1b1b22;
  color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; font-family: inherit; }
.addcard-item:hover:not([disabled]) { background: #24242c; border-color: #2dd4bf; }
.addcard-item[disabled] { opacity: 0.4; cursor: default; }
.addcard-sub { font-size: 11px; color: var(--muted); margin: 6px 2px 2px; }
.addcard-cur { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 9px; background: #15151a; font-size: 13px; }
.addcard-name { min-width: 0; line-height: 1.3; }
.addcard-del { background: #3a1a1e; border: 1px solid #6b2630; color: #ff9a9a; border-radius: 7px;
  padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap; flex-shrink: 0; } /* 이름이 길어도 '제거'가 줄바꿈되지 않게 */
.addcard-del:hover { background: #4a1f24; }
/* 카드추가 항목 보조 태그(준비중/추가됨/이 장비 미지원) — 작고 가는 글자 */
.addcard-tag { font-size: 11px; font-weight: 600; color: #a7a7b3; }
/* '준비중/Coming soon'만 튀는 앰버 pill */
.addcard-tag.soon { color: #1d1405; background: #f0a92a; padding: 2px 8px; border-radius: 999px; font-weight: 800; letter-spacing: 0.2px; }
/* 카드 정리: 사용자가 숨긴 기본 카드 — no-onair 와 같은 display:none(그리드가 빈자리 없이 재배치) */
.card-hidden-user { display: none !important; }
/* 카드 정리 행: 기본 카드 이름 + 표시/숨김 스위치(.macro-switch 재사용, 켜짐=초록=표시) */
.cardorg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 9px; border: 1px solid #2a2a32; background: #15151a; cursor: pointer; }
.cardorg-row:hover { border-color: #3a3a44; }
.cardorg-name { min-width: 0; font-size: 13px; line-height: 1.3; }
.cardorg-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.cardorg-row input:checked + .macro-switch { background: #2faa55; border-color: #36c062; }
.cardorg-row input:checked + .macro-switch::after { transform: translateX(16px); background: #fff; }
/* ── 소스 라벨/이름 편집 모달(풀스크린) ── */
.srclabel-modal { position: fixed; inset: 0; z-index: 2040; background: rgba(8,8,12,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.srclabel-box { width: min(760px, 100%); max-height: 86vh; max-height: 86dvh; background: var(--bg, #1b1b22); border: 1px solid #2b2b33; border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,0.6); display: flex; flex-direction: column; overflow: hidden; }
.srclabel-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #26262c; flex-shrink: 0; }
.srclabel-title { font-size: 16px; font-weight: 800; color: var(--text); }
.srclabel-tabs { display: inline-flex; gap: 0; background: #2a2a31; border-radius: 8px; padding: 3px; margin-left: auto; }
.srclabel-tab { padding: 7px 18px; border: none; background: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; border-radius: 6px; cursor: pointer; }
.srclabel-tab.active { background: #3f8bd6; color: #fff; }
.srclabel-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: #2a2a31; border: 1px solid var(--border, #2d2d35); border-radius: 8px; color: var(--text); cursor: pointer; flex-shrink: 0; }
.srclabel-close:hover { background: #34343c; }
.srclabel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; align-content: start; }
.srclabel-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* min-width:0 = grid 칸이 콘텐츠보다 작게 줄도록(WebView에서 입력칸 안 줄던 문제) */
.srclabel-colhead, .srclabel-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.srclabel-colhead { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 2px; padding: 0 2px; }
.srclabel-colhead .h-num { width: 24px; flex-shrink: 0; }
.srclabel-colhead .h-lbl { width: 64px; flex-shrink: 0; }
.srclabel-colhead .h-name { flex: 1; }
.srclabel-num { width: 24px; text-align: right; color: var(--muted); font-size: 12px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.srclabel-lbl, .srclabel-name { background: #1a1a1f; border: 1px solid #34343c; color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.srclabel-lbl { width: 64px; flex-shrink: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; }
.srclabel-name { flex: 1; min-width: 0; }
.srclabel-lbl:focus, .srclabel-name:focus { outline: none; border-color: #4a9eff; }
.srclabel-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #26262c; flex-shrink: 0; }
.srclabel-hint { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; line-height: 1.4; }
.srclabel-reset { background: #33333a; border: 1px solid #45454f; color: #d8d8de; border-radius: 7px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.srclabel-reset:hover { background: #3c3c44; }
.srclabel-save { background: #3f8bd6; border: 1px solid #2c6aa8; color: #fff; border-radius: 7px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.srclabel-save:hover { background: #4a97e0; }
.srclabel-save.done { background: #2faa55; border-color: #36c062; } /* 저장 직후 '반영됨' 피드백 */
@media (max-width: 720px) { .srclabel-body { grid-template-columns: 1fr; } .srclabel-col:nth-child(2) .srclabel-colhead { display: none; } } /* 단일 칸일 땐 둘째 칸 '라벨/이름' 헤더 중복 숨김 */
/* 하이퍼덱 카드 */
.hd-body { display: flex; flex-direction: column; gap: 7px; }
/* 1줄: 녹화 남은/녹화 시간(2줄) + 슬롯 */
.hd-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hd-rectime { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hd-rectime-lab { font-size: 11px; font-weight: 700; color: #9a9aa6; letter-spacing: 0.3px; }
.hd-rectime-val { font-size: 16px; font-weight: 700; letter-spacing: 0.8px; font-variant-numeric: tabular-nums; color: #c7cad2; line-height: 1.15; }
/* 미설정 상태: '녹화 남은 시간' 라벨 숨기고 '설정 필요'를 가운데 작게 */
.hd-noset .hd-toprow { justify-content: center; }
.hd-noset .hd-rectime { align-items: center; }
.hd-noset .hd-rectime-lab { display: none; }
.hd-noset .hd-rectime-val { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #9a9aa6; }
/* 슬롯 버튼(SSD/SD 아이콘 + 'SD 1' 라벨) — 테두리 없이 배경이 선택 시 밝아짐 */
.hd-slots { display: flex; gap: 5px; flex-shrink: 0; }
.hd-slot-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 38px; padding: 5px 6px; border: none; border-radius: 8px; background: #1b1b22; color: #6f6f7a;
  cursor: pointer; font-family: inherit; transition: background .12s, color .12s; }
.hd-slot-btn svg { width: 18px; height: 18px; }
.hd-slot-btn span { font-size: 9px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }
.hd-slot-btn:hover { background: #24242c; }
.hd-slot-btn.cur { background: #2f4a37; color: #c7f5d6; }
.hd-slot-btn[disabled] { opacity: 0.35; cursor: default; background: #16161b; }
/* 2줄: 원형 5버튼 — 입체 노브 스타일 */
.hd-cbtns { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 2px; margin: 3px 0;
  width: 100%; max-width: 360px; align-self: center; } /* 전체폭에서 버튼이 너무 벌어지지 않게 최대폭+가운데 */
.hd-cbtn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid #1c1c22; color: #c7cad2; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #3a3a43, #262630);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.4); }
.hd-cbtn svg { width: 22px; height: 22px; }
.hd-cbtn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } /* 눌림=그림자 줄임(내부그림자 X) */
.hd-cbtn-rec { color: #ff6a6a; }
/* 활성 상태도 같은 입체 스타일 유지 + 색 글로우 + 은은한 깜빡 */
.hd-cbtn-rec.rec { color: #ff5555; border-color: #6e2730;
  background: radial-gradient(circle at 50% 35%, #5a2228, #321419);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 9px 1px rgba(255,59,59,0.5); animation: onair-blink 1.6s ease-in-out infinite; }
.hd-cbtn-play.on { color: #6ee08a; border-color: #285c39;
  background: radial-gradient(circle at 50% 35%, #1f3d28, #142a1b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 9px 1px rgba(74,214,126,0.5); animation: onair-blink 1.6s ease-in-out infinite; }
.hd-cbtn-loop.on { color: #9cc4ff; border-color: #355a93;
  background: radial-gradient(circle at 50% 35%, #243c5e, #16203a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 7px 1px rgba(63,140,255,0.4); }
/* 3줄: 길이 | 경과 | 잔여 (프레임까지) */
.hd-clipinfo3 { display: flex; flex-direction: column; gap: 1px; width: 100%; max-width: 360px; align-self: center; } /* 버튼 행과 폭 맞춤 */
.hd-ci3-head, .hd-ci3-val { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.hd-ci3-head > span { text-align: center; font-size: 11px; font-weight: 700; color: #9a9aa6; border-left: 1px solid #2a2a31; }
.hd-ci3-head > span:first-child { border-left: none; }
.hd-ci3-val > span { text-align: center; font-size: 12px; font-weight: 600; color: #c7cad2; font-variant-numeric: tabular-nums; }
.hd-transport { display: flex; gap: var(--btn-gap); }
.hd-tbtn { flex: 1; height: var(--btn-size); display: flex; align-items: center; justify-content: center;
  border: 1px solid #34343c; border-radius: 7px; color: #c7cad2; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #2c2c33, #232329); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.hd-tbtn svg { width: 20px; height: 20px; }
.hd-tbtn:active { transform: translateY(1px); }
.hd-tbtn.on { border-color: #3f8cff; color: #9cc4ff; background: linear-gradient(180deg, #1e2c44, #16203a); }
/* 조그/셔틀 스크럽 — 핸들 탭=모드토글, 드래그=스크럽 */
.hd-scrub { display: flex; flex-direction: column; gap: 3px; margin: 3px 0 2px; }
.hd-scrub-track { position: relative; height: 30px; border-radius: 9px; background: #141418; border: 1px solid #303038;
  overflow: hidden; touch-action: none; }
.hd-scrub-ridges { position: absolute; inset: 0; opacity: 0; transition: opacity .15s;
  background: repeating-linear-gradient(90deg, #2a2a32 0 1px, transparent 1px 8px); }
.hd-scrub-track.jog .hd-scrub-ridges { opacity: 0.9; }
.hd-scrub-center { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: #4a4a55; border-radius: 1px; }
.hd-scrub-tick { position: absolute; top: 9px; bottom: 9px; width: 1px; margin-left: -0.5px; background: #3a3a44; }
.hd-scrub-track.jog .hd-scrub-center, .hd-scrub-track.jog .hd-scrub-tick { opacity: 0; }
/* 납작한 핸들(가운데), 모드 아이콘 */
.hd-scrub-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #2a3a5e; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 50% 30%, #3f5a8e, #25304a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 3px rgba(0,0,0,0.45); }
/* 셔틀 놓을 때만: 가운데로 부드럽게 복귀 */
.hd-scrub-handle.returning { transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.hd-scrub-track.jog .hd-scrub-handle { border-color: #6b4a28; background: radial-gradient(circle at 50% 30%, #8a5e2c, #4a3318); }
.hd-scrub-ico { display: flex; color: #cfe0ff; }
.hd-scrub-track.jog .hd-scrub-ico { color: #ffd9a6; }
.hd-scrub-ico svg { width: 18px; height: 18px; }
.hd-scrub-readout { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; height: 10px; font-variant-numeric: tabular-nums; }
.hd-clipline { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -3px; }
.hd-cliplist { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; overflow-x: hidden; }
.hd-clip { display: flex; align-items: center; gap: 8px; }
.hd-clip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-clip-dur { flex-shrink: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hd-clip.cur { border-color: #4ad67e !important; color: #aef0c6; }
.hd-curclip { font-size: 11px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 슬롯 행: 선택 버튼 + 포맷 버튼 */
.hd-slotrow { display: flex; gap: 6px; }
.hd-slotrow .hd-slot { flex: 1; min-width: 0; }
.hd-slot-fmt { flex-shrink: 0; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 700; font-family: inherit;
  color: #ff9a9a; background: #2a1417; border: 1px solid #5a2630; cursor: pointer; }
.hd-slot-fmt:hover { background: #3a1a1e; }
/* 재생목록 비우기/불러오기 — 보조(아웃라인) 스타일 */
.hd-clipactions { display: flex; gap: 8px; margin-top: 2px; }
.hd-clipbtn { flex: 1; padding: 9px 8px; border-radius: 9px; font-size: 12px; font-weight: 700; font-family: inherit;
  color: var(--muted); background: transparent; border: 1px solid #3a3a44; cursor: pointer; }
.hd-clipbtn:hover:not([disabled]) { background: #1f1f26; color: var(--text); border-color: #4a4a55; }
.hd-clipbtn[disabled] { opacity: 0.45; cursor: default; }
.hd-recset-on { color: #ffb3b3; border-color: #8a3038; background: #3a171b; }
.hd-recset-on:hover:not([disabled]) { color: #ffd0d0; border-color: #a83a44; background: #4a1c22; }
.hd-rec-ts { display: flex; align-items: center; justify-content: flex-start; gap: 10px; font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.hd-rec-ts-lbl { flex: 0 0 auto; }
/* 녹화 설정 화면: 라벨 + 셀렉트 행 */
.hd-set-row { display: flex; align-items: center; gap: 10px; }
.hd-set-lab { flex: 0 0 84px; font-size: 12px; font-weight: 700; color: #9a9aa6; }
.hd-set-sel { flex: 1; min-width: 0; padding: 8px 9px; border-radius: 8px; background: #15151a; color: var(--text);
  border: 1px solid #34343c; font-size: 13px; font-family: inherit; }
.hd-head-left { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.hd-head-left > [data-hdtitle] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-model { font-size: 11px; color: var(--muted); margin: 1px 2px 7px; display: flex; align-items: center; gap: 6px; }
.hd-mock { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: #d6b04a; border: 1px solid #6b5a28;
  border-radius: 4px; padding: 0 4px; line-height: 14px; }
/* 장비 카드 등록(스캔→모델선택) */
.hd-reg { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; width: 300px; max-width: 86vw; }
.hd-reg-scan { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; color: var(--muted); padding: 10px 0; }
.hd-spin { width: 15px; height: 15px; flex-shrink: 0; box-sizing: border-box; display: inline-block; vertical-align: middle;
  border: 2px solid #3a3a44; border-top-color: #b88fd6; border-radius: 50%; animation: hd-spin 0.7s linear infinite; }
#hd-scan-status { display: flex; align-items: center; gap: 7px; }
@keyframes hd-spin { to { transform: rotate(360deg); } }
.hd-reg-none { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.hd-reg-select { width: 100%; padding: 9px 10px; border-radius: 9px; background: #15151a; color: var(--text);
  border: 1px solid #34343c; font-size: 13px; font-family: inherit; }
.hd-reg-actions { display: flex; gap: 6px; }
.hd-reg-actions .addcard-item { flex: 1; text-align: center; white-space: nowrap; padding: 10px 6px; font-size: 13px; }
.hd-reg-add { color: #d8b4fe; border-color: #5a3d77 !important; }
.hd-reg-sub { font-size: 12px; font-weight: 700; color: #9a9aa6; margin: 3px 2px 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hd-found { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-ip { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hd-ip.nodisk { color: #d98a8a; font-weight: 700; letter-spacing: 0.5px; }
.hd-reg-input { width: 100%; padding: 9px 10px; border-radius: 9px; background: #15151a; color: var(--text);
  border: 1px solid #34343c; font-size: 13px; font-family: inherit; }
.hd-conn { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; color: #d6913a; border: 1px solid #6b4a28;
  border-radius: 4px; padding: 0 4px; line-height: 14px; }
.hd-conn.on { color: #4ad67e; border-color: #28683f; }
.hd-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-slot.cur { border-color: #4ad67e !important; color: #aef0c6; background: #16241b; }
.hd-slot.cur::before { content: '●'; color: #4ad67e; margin-right: 4px; font-size: 10px; }
/* 추가한 카드(카드추가로 등록)는 제목을 자주색으로 구분 (ON AIR / AUDIO N 등) */
#sw-cols > [data-extra] .card-head { color: #b88fd6; }
/* ON AIR 카드: 방송 행 + 녹화 행 (LED + 상태 + 시간). 행이 카드 높이를 균등히 채움 */
[data-card="onair"] .onair-body { display: flex; flex-direction: column; gap: var(--btn-gap); }
.onair-row { height: var(--btn-size); display: flex; align-items: center; gap: 11px; padding: 0 13px;
  border: 1px solid #34343c; border-radius: 7px; cursor: pointer; font-family: inherit; color: #c7cad2;
  background: linear-gradient(180deg, #2c2c33, #232329);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.35);
  transition: background .15s, border-color .15s, color .15s; }
.onair-row:active { transform: translateY(1px); }
.onair-info { display: flex; flex-direction: column; gap: 1px; line-height: 1.12; flex: 1; min-width: 0; }
.onair-st { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; }
/* ISO REC는 길어서 글자 축소 + 한 줄 유지 */
.onair-st.iso-rec { font-size: 11.5px; letter-spacing: 0.2px; white-space: nowrap; }
.onair-time { font-size: 11px; font-weight: 600; color: #757580; letter-spacing: 0.4px; font-variant-numeric: tabular-nums; }
/* LED — 크게, 꺼짐(회색)은 사방으로 균등하게 퍼지는 그림자 */
.onair-dot { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 38% 30%, #63636d, #2e2e34);
  box-shadow: 0 0 5px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.18); }
/* 방송 ON = 붉은색, 은은하게 깜빡 */
.onair-row.live { background: linear-gradient(180deg, #3a1619, #2a1013); border-color: #7a2c34; color: #ff9a9a; }
.onair-row.live .onair-time { color: #e3a6a6; }
.onair-row.live .onair-dot { background: radial-gradient(circle at 35% 30%, #ff7a7a, #ff2b2b);
  box-shadow: 0 0 10px 2px rgba(255,59,59,0.8), inset 0 1px 1px rgba(255,255,255,0.4);
  animation: onair-blink 1.6s ease-in-out infinite; }
/* 방송 연결중(Connecting) = 호박색, 점멸로 시도 중 표시 */
.onair-row.connecting { background: linear-gradient(180deg, #3a2e13, #2a210e); border-color: #7a6228; color: #ffe0a0; }
.onair-row.connecting .onair-time { color: #e6cf98; }
.onair-row.connecting .onair-dot { background: radial-gradient(circle at 35% 30%, #ffd86a, #ffaa14);
  box-shadow: 0 0 9px 2px rgba(255,184,43,0.7), inset 0 1px 1px rgba(255,255,255,0.4);
  animation: onair-blink 0.9s ease-in-out infinite; }
/* 녹화 ON = 주황색, 은은하게 깜빡 */
.onair-row.rec { background: linear-gradient(180deg, #3a2913, #2a1d0e); border-color: #7a5628; color: #ffcb8a; }
.onair-row.rec .onair-time { color: #e6c298; }
.onair-row.rec .onair-dot { background: radial-gradient(circle at 35% 30%, #ffc06a, #ff9314);
  box-shadow: 0 0 10px 2px rgba(255,157,43,0.8), inset 0 1px 1px rgba(255,255,255,0.4);
  animation: onair-blink 1.6s ease-in-out infinite; }
@keyframes onair-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* 녹화 디스크 없음 = 비활성 + NO DISK */
.onair-row.nodisk { opacity: 0.45; pointer-events: none; }
.onair-row.nodisk .onair-time { color: #d98a8a; letter-spacing: 1px; font-weight: 700; }
.onair-row.nodisk .onair-dot { box-shadow: 0 0 4px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.1); }
/* Streaming Encoder 카드 (rail 크기): 방송 버튼 한 줄 안에 상태+시간 | 플랫폼/Mbps */
.enc-body { display: flex; flex-direction: column; gap: var(--btn-gap); }
.enc-body .onair-row { flex: 1; min-height: var(--btn-size); }
/* 왼쪽: 상태 라벨(윗줄, 줄바꿈 금지) + 시간(아랫줄) — 2줄 세로 */
.enc-main { display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.2; flex: 1; min-width: 0; }
.enc-main .onair-st { white-space: nowrap; }
.enc-main .onair-time { font-size: 12px; }
/* LED 원 좌우 여백 더 */
.enc-stream .onair-dot { margin-left: 5px; margin-right: 7px; }
/* 전체폭(모바일 stack)에서는 상태+시간을 한 줄로 */
.sw-stack .enc-main { flex-direction: row; align-items: baseline; gap: 9px; }
/* 오른쪽: 플랫폼(윗줄) + 비트레이트(아랫줄), 2줄 */
.enc-meta2 { display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 1px; line-height: 1.2; text-align: right; flex: 0 0 auto; min-width: 0; }
.enc-plat { font-size: 11px; font-weight: 600; color: #9a9aa6; max-width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enc-mbps { font-size: 11px; color: #8a8a94; font-variant-numeric: tabular-nums; }
.onair-row.live .enc-plat, .onair-row.live .enc-mbps { color: #e3a6a6; }
.onair-row.connecting .enc-plat, .onair-row.connecting .enc-mbps { color: #e6cf98; }
.hd-enc-sel { flex: 1; min-width: 0; padding: 8px 9px; border-radius: 8px; background: #15151a; color: var(--text);
  border: 1px solid #34343c; font-size: 13px; font-family: inherit; }
.hd-enc-sel:disabled { opacity: 0.5; }
/* ON AIR 옵션 ISO 녹화 체크박스 */
.oa-iso { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; }
.oa-iso input { width: 15px; height: 15px; accent-color: #ff6a6a; }
.oa-hint { font-size: 11px; color: var(--muted); margin: -2px 2px 2px; line-height: 1.3; }
/* ON AIR 설정: 스트리밍/녹화 섹션 헤더(분리) */
.oa-sect { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: #c7cad2; margin: 2px 2px 7px; display: flex; align-items: center; gap: 6px; }
.oa-sect.sep { margin-top: 14px; padding-top: 13px; border-top: 1px solid #34343c; }
.oa-sect svg { flex-shrink: 0; }
/* 녹화 체크박스(모든 카메라 / ISO) — 전체폭 한 줄 */
.oa-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; padding: 3px 2px; }
.oa-chk input { width: 15px; height: 15px; accent-color: #ff6a6a; flex-shrink: 0; }
.oa-chk input:disabled { cursor: default; }
.oa-chk:has(input:disabled) { color: var(--muted); cursor: default; }
/* 모바일(stack): 한 행을 방송|녹화 반반으로, 라벨·시간 한 줄 */
.sw-stack [data-card="onair"] .onair-body { flex-direction: row; gap: var(--btn-gap); }
.sw-stack [data-card="onair"] .onair-row { flex: 1; min-width: 0; gap: 13px; padding: 0 12px; }
/* 점(아이콘)을 행 양 끝에 고정 → 라벨이 1줄↔2줄로 바뀌어도 점은 제자리(숫자만 라벨 옆에서 약간 이동). 방송=왼쪽 끝, 녹화=오른쪽 끝 */
.sw-stack [data-card="onair"] .onair-row.stream { justify-content: flex-start; }
.sw-stack [data-card="onair"] .onair-row.record { justify-content: flex-end; }
/* 방송 라벨에 고정 폭 슬롯 → "OFF"든 두 줄 "ON/AIR"든 같은 폭 차지 → 옆의 시간이 항상 같은 X에 고정. 녹화 라벨(REC/ISO REC)은 우측앵커라 그대로 둠 */
.sw-stack [data-card="onair"] .onair-row.stream .onair-st { flex: 0 0 34px; text-align: center; }
.sw-stack [data-card="onair"] .onair-info { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.sw-stack [data-card="onair"] .onair-time { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; }
/* 편집모드 액션바: 평소 숨김, 편집/레이아웃 모드에서만 우하단에 떠 있음 */
.bottom-bar { display: none; align-items: center; gap: 6px; }
body.edit-mode .bottom-bar, body.layout-mode .bottom-bar { display: inline-flex; }
/* 편집/레이아웃 모드: 헤더 색이 바뀌고, 평소 우측(상태·시계·＋카드)은 숨겨 액션바만 */
body.layout-mode .topbar { background: #3f8bd6; }  /* 레이아웃 편집 = 파랑(선명) */
body.edit-mode .topbar { background: #e3a532; }    /* 버튼 편집 = 앰버(선명) */
/* 헤더가 밝아지므로 좌측 브랜드·로고 아이콘·모델명을 전부 검은색으로 */
body.layout-mode .tb-brand, body.edit-mode .tb-brand,
body.layout-mode .tb-brand-a, body.edit-mode .tb-brand-a,
body.layout-mode .tb-logo-ico, body.edit-mode .tb-logo-ico,
body.layout-mode #atem-status-text, body.edit-mode #atem-status-text { color: #161616 !important; }
body.layout-mode .tb-brand-svg .cp-cast, body.edit-mode .tb-brand-svg .cp-cast,
body.layout-mode .tb-brand-svg .cp-pad, body.edit-mode .tb-brand-svg .cp-pad { fill: #161616 !important; }
body.layout-mode #atem-status .status-dot, body.edit-mode #atem-status .status-dot { background: #161616 !important; }
body.layout-mode .tb-edit-wrap, body.edit-mode .tb-edit-wrap,
body.layout-mode .tb-stat, body.edit-mode .tb-stat,
body.layout-mode .tb-clock, body.edit-mode .tb-clock,
body.layout-mode .tb-div, body.edit-mode .tb-div { display: none; }
/* 액션 버튼 — 헤더 높이에 맞게 작게 + 기본=어두운 회색 */
.topbar .edit-act-btn { padding: 7px 14px; font-size: 12.5px; border-radius: 7px;
  background: #1b1b21; color: #e4e4e7; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.topbar .edit-act-btn:hover { background: #27272e; }
/* 완료 = 다른 버튼과 같은 어두운 배경, 글씨색만 상단바(모드) 색 */
.topbar .edit-act-btn.done { background: #1b1b21; }
body.layout-mode .topbar .edit-act-btn.done { color: #3f8bd6; }   /* 레이아웃 = 파랑 글씨 */
body.edit-mode .topbar .edit-act-btn.done { color: #e3a532; }     /* 버튼편집 = 앰버 글씨 */
.topbar .edit-act-btn.off { background: #1b1b21; }  /* 기본 = 어두운 배경 그대로, 글씨만 상단바 색 */
body.layout-mode .topbar .edit-act-btn.off { color: #3f8bd6; }   /* 레이아웃 = 파랑 글씨 */
body.edit-mode .topbar .edit-act-btn.off { color: #e3a532; }     /* 버튼편집 = 앰버 글씨 */
.topbar .edit-act-btn.cancel { background: #1b1b21; color: #fff; } /* 취소 = 흰 글씨 */
/* 편집모드: M/E 전환 비활성 */
/* 편집모드: M/E 탭 숨겨 좌측 공간 확보 */
/* 편집모드: 프로그램/프리뷰 카드 헤더 하늘색 */
body.edit-mode .pgm-row .card-head,
body.edit-mode .pvw-row .card-head,
body.edit-mode [data-card="outputs"] .card-head { color: #e3a532; } /* 버튼편집 = 상단바(앰버)색 */

/* 편집 −/+ 아이콘 (버튼 우측 상단) + 어두운 처리 */
/* 어둡게: 오버레이(z-index 1)로 덮음 → +/− 아이콘(z-index 2)은 밝게 유지 */
.src-btn.edit-hidden::after,
.aux-out-btn.edit-hidden::after { content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.62); border-radius: inherit; z-index: 1; pointer-events: none; }
.edit-toggle { position: absolute; top: 1px; right: 1px; width: 17px; height: 17px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; line-height: 1; z-index: 2; color: #000;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.edit-toggle.minus { background: #e3a532; }   /* 상단바(앰버)색 + 검은 − */
.edit-toggle.plus { background: #e3a532; }     /* 상단바(앰버)색 + 검은 + */

/* 토스트 안내 (상단에서 내려옴) */
.toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%) translateY(-16px);
  background: #222; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px;
  font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.5); z-index: 2000;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.page-stack { flex: 1; min-height: 0; display: flex; }
.page { display: none; flex: 1; padding: 10px; gap: 6px; flex-direction: column;
  overflow: auto; min-height: 0; } /* 평소엔 gutter 예약 안 함 → 오른쪽 여백 없음. 스크롤바는 필요할 때만 자기 폭 차지 */
.page.active { display: flex; }
/* SS/DVE 박스 드래그 중(body.dragging-lock): 활성 페이지 스크롤 잠금 → 끌다 페이지가 같이 스크롤돼 위치 못 잡는 것 방지.
   overflow:auto→hidden 은 현재 scrollTop 을 유지. */
body.dragging-lock .page.active { overflow: hidden; }
/* 잠금 직전 스크롤바가 실제로 있던 페이지만 gutter 예약(.drag-keep-gutter, JS가 측정해 부여) → 스크롤바 사라져도 가로 안 튐.
   스크롤바 없던(다 들어오는) 페이지는 예약 안 함 → 드래그 중 시프트 없음. 평소엔 어느 경우든 여백 없음. */
body.dragging-lock.drag-keep-gutter .page.active { scrollbar-gutter: stable; }
/* media page needs grid layout when active — higher specificity overrides default flex */
.page.media-page.active { display: flex; flex-direction: column; padding: 10px; overflow-y: auto; }
.media-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.audio-card { flex: 1; min-height: 0; display: flex; padding: 14px; }

/* ===== Card primitive (모든 카드 동일 여백) ===== */
.card { background: var(--card-bg); border: 1px solid #000; border-radius: var(--card-radius);
  padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.5); }
/* 카드 제목 — 영어·한글 같은 크기(12px/800). line-height 고정으로 헤드 박스 높이 일정 */
.card-head { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted);
  font-weight: 800; margin-bottom: 8px; line-height: 12px; }
/* ── 스택(전체폭) 레이아웃 편집: 카드 맨 위 풀폭 파랑 바(드래그 핸들) + 우측 위/아래 화살표 ── */
.lay-bar { display: none; }
/* 스택 레이아웃모드: 카드 전체 grab/touch-none 해제(본문 스크롤 가능), 바만 드래그/클릭 활성 */
body.layout-mode #page-switcher.sw-stack #sw-cols .card { position: relative; cursor: default; touch-action: auto; }
body.layout-mode #page-switcher.sw-stack #sw-cols .card > .lay-bar { pointer-events: auto; }
/* 바는 헤드 위에 '덮어쓰기'(absolute) — 카드 높이 안 변함. 높이는 JS가 헤드 크기에 맞춰 지정. */
body.layout-mode #page-switcher.sw-stack #sw-cols .lay-bar {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  min-height: 30px; padding: 0 6px 0 10px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: #3f8bd6; color: #08233c; font-weight: 800; font-size: 12px;
  cursor: grab; touch-action: none; user-select: none; }
body.layout-mode #page-switcher.sw-stack #sw-cols .card:active > .lay-bar { cursor: grabbing; }
.lay-bar .lay-grip { letter-spacing: 2px; opacity: 0.85; }
.lay-bar .lay-bar-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.lay-bar .lay-move { display: flex; gap: 6px; flex: 0 0 auto; }
.lay-bar .lay-move button { width: 34px; height: 24px; border-radius: 5px; border: none;
  background: rgba(8,35,60,0.28); color: #08233c; font-size: 12px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; }
.lay-bar .lay-move button:active { background: rgba(8,35,60,0.5); }
.lay-bar .lay-move button:disabled { opacity: 0.35; cursor: default; }
/* PROGRAM/PREVIEW 카드는 버튼 높이만큼만 (남는 공간으로 늘어나지 않음) */
.pgm-row, .pvw-row { flex: 0 0 auto; }
/* PROGRAM+PREVIEW 한 카드: 위(PGM)/아래(PVW) 두 섹션 + 구분선 */
.pgm-pvw-card { display: flex; flex-direction: column; }
.pgm-pvw-divider { height: 1px; background: var(--border); margin: 10px 0; flex: 0 0 auto; }

.row-label { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 4px;
  font-weight: 600; text-transform: uppercase; }
.panel { background: linear-gradient(180deg, #232323, #1a1a1a); border: 1px solid #000;
  border-radius: 6px; padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 14px rgba(0,0,0,0.5); }

/* ===== Source buttons (PGM/PVW/Aux) — 정사각, 늘어나지 않고 개수만 reflow ===== */
/* CAM 그룹이 먼저(줄바꿈하며 채움), 내부(SS/BLK/COL/MP/ME) 그룹은 다음 줄에 따로 */
.source-groups { display: flex; flex-direction: column; align-items: flex-start; gap: var(--btn-gap); }
/* 출력 카드: OUT행↔소스행 간격을 키어(다음 트랜지션) 카드와 동일하게(var(--btn-gap)) */
.outputs-section .source-groups { margin-top: var(--btn-gap); }
/* 출력 카드는 버튼을 트랜지션 크기로 줄였으니(refreshSpans의 txBtn) 라벨도 살짝 작게 */
.outputs-section .src-btn { font-size: 11px; }
.outputs-section .src-btn .src-sub { font-size: 9px; }
.outputs-section .aux-out-num { font-size: 10px; }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--btn-size));
  gap: var(--btn-gap); justify-content: start; width: 100%; }
/* 숨김 버튼 (그리드/OUT 마지막 칸) — 기본 회색. 누르면 숨겨진 버튼 팝업.
   .src-btn / .aux-out-btn 보다 특정도를 높여(두 클래스) 흰색 배경을 확실히 덮음 */
.src-btn.hidden-btn, .aux-out-btn.hidden-btn {
  background: #44444c; border: 1px solid #55555e; color: #d2d2d8;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.src-btn.hidden-btn:hover, .aux-out-btn.hidden-btn:hover { background: #51515a; color: #fff; }
.hidden-btn .hb-plus { font-size: 19px; font-weight: 700; color: inherit; }
/* 빈 숨김 버튼(+0): 편집 가능한 줄(data-group)은 항상 표시(드래그-숨김 타깃), 그 외엔 숨김 */
.hidden-btn.empty { display: none; }
.hidden-btn.empty[data-group] { display: flex; }
/* 드래그 중 드롭존: 진한 검정(테두리로 구분). 도달(hover) 시 살짝 커짐 */
body.dragging-hide .hidden-btn.drop-show { display: flex; background: #0d0d10; color: #d2d2d8;
  border-color: #5a5a62; transition: transform 0.08s ease, background 0.08s ease; }
.hidden-btn.drop-active { background: #000; border-color: #8a8a92; transform: scale(1.14); z-index: 2; }
/* 드래그 중 원본/고스트 */
body.dragging-hide { user-select: none; -webkit-user-select: none; }
.src-btn.drag-source, .aux-out-btn.drag-source { opacity: 0.3; }
/* 고스트는 fixed로 커서를 따라옴. .src-btn(position:relative)을 이기도록 특정도 ↑ */
.drag-ghost { left: 0; top: 0; z-index: 1000; pointer-events: none;
  margin: 0; transform: translate(-50%, -50%) scale(1.05); opacity: 0.95;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55); }
.src-btn.drag-ghost, .aux-out-btn.drag-ghost { position: fixed; }
/* 팝업에서 꺼내 제자리로 날아가는 클론 (.src-btn position:relative를 이기도록 특정도↑) */
.fly-clone { z-index: 1000; margin: 0; pointer-events: none;
  transform-origin: top left; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.src-btn.fly-clone, .aux-out-btn.fly-clone { position: fixed; }
/* 드래그-숨김 대상(data-ctx 있음)만 네이티브 스크롤 차단 → JS 수동 스크롤.
   PVW 등 숨김 안 하는 버튼은 그대로 네이티브 스크롤(관성 O). */
.src-btn[data-ctx], .aux-out-btn[data-ctx] { touch-action: none; }
.src-btn { position: relative; background: var(--key-face); border: 1px solid var(--key-border); color: #0a0a0a;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;  /* 길게눌러 콜아웃/선택 메뉴 차단 */
  width: var(--btn-size); aspect-ratio: 1 / 1; min-height: 0;
  padding: 2px; border-radius: var(--btn-radius); font-size: 13px; font-weight: 800; cursor: pointer;
  text-transform: uppercase; transition: transform 0.05s; text-align: center; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; line-height: 1.05; box-shadow: var(--key-shadow); }
.src-btn > div { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.src-btn .src-sub { font-size: 9px; color: #555; font-weight: 600;
  display: block; margin-top: 1px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.src-btn.active .src-sub { color: rgba(255,255,255,0.85); }
/* 라벨+이름 둘 다 표시할 때 라벨을 한 단계 더 두껍게 */
.src-btn:has(.src-sub) > div:first-child { font-weight: 900; }
.src-btn:active { transform: scale(0.95); }
.pgm-row .src-btn.active { background: var(--key-pgm); border-color: #c00; color: #fff;
  text-shadow: none;
  box-shadow: var(--key-shadow), 0 0 14px 1px rgba(255,50,50,0.78); }
.pvw-row .src-btn.active { background: var(--key-pvw); border-color: #1d9e2a; color: #fff;
  text-shadow: none;
  box-shadow: var(--key-shadow), 0 0 14px 1px rgba(60,210,90,0.68); }

/* ===== Switcher 메인: 좌4줄 + 우(액션 상2줄 / 음향 하2줄), 행 정렬 그리드 ===== */
/* ── 스위처 카드 배치 = CSS Grid + grid-auto-flow:dense ──
   셀=고정 2px(간격6 → 스텝8px). 카드는 내용 크기만큼 칸(span)을 차지하고 dense가 2D로 빈칸을 메움
   → 세로 긴 카드 아래/옆 빈칸을 다른 카드가 채워 올라감. (튐의 진짜 원인은 PGM폭 계산 반올림이었고
   refreshSpans에서 'PGM칸=전체칸−레일칸'으로 고쳐 레일이 항상 옆에 맞음 → dense여도 안 튐.)
   버튼은 카드 안에서 auto-fill로 reflow → 버튼 크기는 항상 고정(셀이 % 아님). */
#sw-cols.card-deck { display: grid; background: transparent;
  grid-template-columns: repeat(auto-fill, 2px); grid-auto-rows: 2px; gap: 6px;
  grid-auto-flow: row dense; justify-content: start; align-content: start; }
.card-deck > .card { box-sizing: border-box; margin: 0;
  grid-column: span var(--cw, 60); grid-row: span var(--ch, 30); }
/* 세로카드 높이상한 무관 */
.ct-vertical, .ct-vertical.is-horizontal { max-height: none; }
/* aux 출력이 없는 모델: 출력 카드 숨김 */
.outputs-section.no-outputs { display: none; }
/* 방송 기능 없는 모델: ON AIR 카드 숨김 */
.onair-card.no-onair { display: none; }
/* 좁은 화면(.sw-stack): 모든 카드 한 줄 풀폭 세로 스택 */
#page-switcher.sw-stack .card-deck { display: flex; flex-direction: column; gap: 8px; }
#page-switcher.sw-stack .card-deck > .card { width: 100%; }
/* 레일 카드(키어·트랜지션·DSK)는 내용폭으로 — 전체폭 늘여 오른쪽 빈 공간 생기지 않게(좌측 정렬) */
#page-switcher.sw-stack [data-card="keyer"],
#page-switcher.sw-stack [data-card="transition"],
#page-switcher.sw-stack [data-card="dsk"] { width: fit-content; max-width: 100%; align-self: flex-start; }

/* ===== 카드 레이아웃(재배치) 모드 — 드래그로 이동 ===== */
.layout-actions { display: none; gap: 6px; align-items: center; }
body.layout-mode .layout-actions { display: inline-flex; }
/* 레이아웃 모드: 카드 외곽선 + 내부 컨트롤 비활성(카드를 드래그). touch-action:none → 터치 스크롤 대신 드래그 */
body.layout-mode #sw-cols .card { cursor: grab; outline: 2px solid rgba(90,160,232,0.5); outline-offset: -2px;
  touch-action: none; user-select: none; will-change: transform; }
body.layout-mode #sw-cols .card > * { pointer-events: none; }
body.layout-mode #sw-cols .card:active { cursor: grabbing; }
/* 드래그 중: 원본은 자리표시(흐리게+점선), 손가락 따라다니는 고스트 */
#sw-cols .card.drag-src { opacity: 0.3; outline-style: dashed; }
.card.card-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; transform: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); outline: 2px solid #5aa0e8; outline-offset: -2px;
  border-radius: var(--card-radius); opacity: 0.95; }

.switcher-action-card { display: flex; flex-direction: row; gap: 8px; align-items: stretch; justify-content: center; }
/* 음향 카드: TRS + 마스터 (세로형) */
.sw-audio-card { display: flex; flex-direction: column; gap: 6px; overflow: hidden; min-height: 0; }
/* 오디오 카드 헤더: 제목 + 우측 톱니(채널 설정) */
.sw-audio-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sw-audio-cfg { background: none; border: none; color: var(--muted); cursor: pointer; padding: 1px 2px;
  display: inline-flex; align-items: center; }
.sw-audio-cfg:hover { color: var(--text); }
/* 채널 선택 팝업 행 */
.audio-cfg-rows { display: flex; flex-direction: column; gap: 12px; min-width: 220px; }
.audio-cfg-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.audio-cfg-row > span { min-width: 44px; }
.audio-cfg-row select { flex: 1; padding: 9px 10px; background: #14141a; color: var(--text);
  border: 1px solid #34343d; border-radius: 9px; font-size: 14px; font-family: inherit; cursor: pointer; }
.sw-mixer { flex: 1; display: flex; gap: 8px; align-items: stretch; justify-content: space-around;
  overflow: hidden; background: transparent; padding: 0; min-height: 0; }
/* 스위처 오디오 카드: 채널 1개 = 버튼 1칸 폭(피치 58) → N채널 = N칸으로 그리드에 딱 맞음.
   간격도 버튼 간격(4px)으로 → 채널 피치 = 54+4 = 58 = 셀. */
.sw-audio-card .sw-mixer { gap: var(--btn-gap); justify-content: center; }
.sw-audio-card .channel.sw-ch { flex: 0 0 var(--btn-size); width: var(--btn-size); }
/* 오디오 페이지: 같은 모듈을 전체 채널로 — 가로 스크롤, 채널 고정폭·고정높이(전체로 안 늘어남) */
.sw-mixer.audio-full { justify-content: flex-start; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 10px;
  background: var(--panel); border-radius: 6px; }
.audio-full .channel.sw-ch { flex: 0 0 64px; height: 440px; }
/* 채널: 라벨 → 페이더(미터 내장) → dB pill → ON/AFV → 잠금. .channel(뒤 선언) override(명시도↑) */
.channel.sw-ch { display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 1 1 0; min-width: 0; padding: 0; background: transparent; }
/* 이름(라벨) — ON 버튼처럼 풀폭+여백 (테두리 없음) */
.sw-ch .channel-label { width: 100%; font-size: 11px; font-weight: 800; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-align: center;
  background: #000; color: #fff; border-radius: 3px; padding: 5px 4px; }
/* 페이더 — 트랙 안: 게인만큼 흐린 하늘색 배경(가득). L/R 미터는 넓은 칸(라인 아님)으로
   배경 위에 '레벨만큼 차오름'. 위쪽(레벨~게인)은 하늘색이 비치고, 게인 위는 어두움. 핸들은 좌우 돌출 */
.sw-ch .fader-track { position: relative; width: 22px; flex: 1; min-height: 96px; cursor: pointer; }
.sw-ch .fbar { position: absolute; inset: 0; overflow: hidden; border-radius: 3px;
  background: #0a0a0a; border: 1px solid #1e1e1e; }
.sw-ch .fader-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: rgba(127,212,255,0.30); } /* 올린 게인만큼 흐린 하늘색(트랙 폭 가득) */
/* L/R 미터 — 트랙 고정 이산 색구간(녹/노/빨). clip-path로 레벨까지만 드러냄
   (녹색 ≤ -20dB=66.7%, 노랑 -20~-9dB=85%, 빨강 -9~0dB) */
.sw-ch .fmeter { position: absolute; top: 0; bottom: 0;
  background: linear-gradient(to top,
    #1eb01e 0%, #1eb01e 66.67%, #ecc019 66.67%, #ecc019 85%, #e53327 85%, #e53327 100%);
  clip-path: inset(100% 0 0 0); transition: clip-path 70ms linear; }
.sw-ch .fmeter.l { left: 1px; width: calc(50% - 2px); }
.sw-ch .fmeter.r { right: 1px; width: calc(50% - 2px); }
/* ON·AFV 둘 다 꺼진(믹스 OFF) 채널: 미터 채도 확 낮춰 비활성 표시 */
.sw-ch.mix-off .fmeter { filter: saturate(0.15) brightness(0.8); }
/* ===== 오디오 카드 가로형(.is-horizontal): 채널 = 가로 행 [이름·ON/AFV·가로페이더+미터·dB·잠금] ===== */
.sw-audio-card.is-horizontal .sw-mixer { flex-direction: column; gap: 6px;
  justify-content: flex-start; align-items: stretch; overflow-y: auto; overflow-x: hidden; }
.sw-audio-card.is-horizontal .channel.sw-ch { flex: 0 0 auto; flex-direction: row; align-items: center;
  gap: 8px; width: 100%; min-height: 34px; }
.sw-audio-card.is-horizontal .channel-label { order: -2; flex: 0 0 50px; width: 50px; padding: 3px 4px; }
.sw-audio-card.is-horizontal .sw-ch-top { order: -1; flex: 0 0 auto; width: auto; flex-direction: row; gap: 4px; }
.sw-audio-card.is-horizontal .sw-ch-top .audio-btn { width: 40px; }
/* 가로 페이더 트랙 — 내부: 게인(하늘색 왼→오른) + L/R 미터(상/하, 왼→오른 차오름) + 핸들(세로막대) */
.sw-audio-card.is-horizontal .fader-track { flex: 1; width: auto; height: 24px; min-height: 0; }
.sw-audio-card.is-horizontal .fader-fill { left: 0; right: auto; top: 0; bottom: 0; width: 0; height: auto; }
.sw-audio-card.is-horizontal .fmeter { left: 0; right: 0; top: auto; bottom: auto; width: auto;
  background: linear-gradient(to right, #1eb01e 0%, #1eb01e 66.67%, #ecc019 66.67%, #ecc019 85%, #e53327 85%, #e53327 100%); }
.sw-audio-card.is-horizontal .fmeter.l { left: 0; right: 0; width: auto; top: 1px; bottom: auto; height: calc(50% - 1.5px); }
.sw-audio-card.is-horizontal .fmeter.r { left: 0; right: 0; width: auto; bottom: 1px; top: auto; height: calc(50% - 1.5px); }
.sw-audio-card.is-horizontal .fader-handle { left: 0; right: auto; top: -4px; bottom: -4px; width: 12px; height: auto; }
.sw-audio-card.is-horizontal .fader-value { flex: 0 0 auto; text-align: right; padding: 0 2px; min-width: 58px; }
.sw-audio-card.is-horizontal .sw-lock { flex: 0 0 auto; width: auto; padding: 4px 6px; }
.sw-ch .fader-handle { position: absolute; left: -5px; right: -5px; bottom: 0; height: 12px;
  background: #ededed; border-radius: 2px; z-index: 3; box-shadow: 0 1px 3px rgba(0,0,0,0.75); }
.sw-ch:not(.fader-unlocked) .fader-handle { opacity: 0.5; } /* 잠금 시 크기 그대로, 살짝 흐리게만 */
/* dB — 배경/테두리 없이 하늘색 텍스트만. 꾹 누르면 조절 팝업(터치 타깃 위해 padding) */
.sw-ch .fader-value { font-size: 11px; font-weight: 600; color: #7fd4ff;
  cursor: pointer; line-height: 1.1; padding: 3px 8px; }
/* 상단 ON/AFV 버튼 — 라운드 더, 테두리 없음. 둘 다 있으면 사이 간격 */
.sw-ch-top { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.sw-ch-top .audio-btn { width: 100%; min-width: 0; padding: 6px 2px; font-size: 9px; font-weight: 700;
  border: none; border-radius: 7px; }
/* 채널별 잠금(ON 아래) — 단순 아이콘. 잠금=muted, 해제=하늘색. 터치 타깃 여백 */
.sw-lock { display: flex; align-items: center; justify-content: center; width: 100%;
  background: none; border: none; cursor: pointer; color: var(--muted); padding: 4px 2px; }
.sw-ch.fader-unlocked .sw-lock { color: #7fd4ff; }
.sw-lock:active { transform: scale(0.92); }
/* dB 조절 팝업 (±0.2, 실시간) — 화면 중앙 */
.db-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 1200; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #1b1e23; border: 1px solid #2b3038; border-radius: 16px; padding: 18px 22px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65); min-width: 160px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); } /* 모바일 주소창 대응: dvh(폴백 vh) */
.db-popup-name { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.db-popup-val { display: flex; align-items: baseline; gap: 5px; }
.db-popup-val b { font-size: 34px; font-weight: 800; color: #7fd4ff; font-variant-numeric: tabular-nums; line-height: 1; }
.db-popup-val span { font-size: 13px; font-weight: 700; color: var(--muted); }
.db-popup-input { width: 120px; font-size: 30px; font-weight: 800; text-align: center;
  color: #7fd4ff; background: #0d2230; border: 1px solid #2a5a78; border-radius: 8px;
  padding: 2px 4px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield; } /* 기본 스피너 숨김 */
.db-popup-input::-webkit-outer-spin-button,
.db-popup-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.db-popup-steps { display: flex; gap: 10px; }
.db-popup .db-step { width: 74px; height: 46px; font-size: 26px; font-weight: 700; color: #cfeaff;
  background: #22384a; border: none; border-radius: 12px; cursor: pointer; line-height: 1; }
.db-popup .db-step:active { background: #2b485e; transform: scale(0.95); }
/* 토스트 안의 자물쇠 아이콘 정렬 */
.toast .toast-ico { display: inline-flex; vertical-align: -4px; margin-right: 5px; }
/* 팝업 내 인라인 에러 (중복 IP 등) */
.hd-reg-err { color: #ff5a5f; font-size: 12px; font-weight: 600; padding: 4px 2px; }

/* ===== Switcher: 하단(다음 트랜지션 / 트랜지션 유형 / DSK = 약 40/40/20) ===== */
.switcher-bottom { display: grid; grid-template-columns: 1fr 1fr 0.55fr;
  gap: 8px; flex: 0 0 auto; align-items: start; }
.dsk-card { min-width: 0; }

.keyer-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--btn-size));
  gap: var(--btn-gap); justify-content: start; }
/* 키어 쌍 셀: ON AIR(위)+KEY(아래)를 세로로 묶고, 쌍들을 가로 한 줄로 나열(기능박스=줄바꿈 없음) */
.keyer-units { display: flex; flex-direction: row; flex-wrap: wrap;
  gap: var(--btn-gap); justify-content: start; align-items: flex-start; }
.keyer-unit { display: flex; flex-direction: column; gap: var(--btn-gap); }
.keyer-spacer { width: var(--btn-size); aspect-ratio: 1 / 1; }
/* DSK 가로형: DSK수 줄 × [라벨][TIE][길이(1fr 여백)][ON AIR][AUTO]. 그리드로 줄 간 열 정렬 */
.dsk-cols { display: block; width: 100%; }
/* DSK 5열 그리드 — [DSK n][TIE][길이][ON AIR][AUTO], 한 줄 */
.dsk-rows { display: grid; grid-template-columns: repeat(5, var(--btn-size));
  gap: var(--btn-gap); align-items: center; justify-content: start; }
.dsk-row-head { font-size: 10px; letter-spacing: 0.5px; color: var(--muted);
  font-weight: 700; text-align: center; white-space: nowrap; width: var(--btn-size);
  height: var(--btn-size); display: flex; align-items: center; justify-content: center; }
.dsk-rows .dsk-rate-pill { width: var(--btn-size); }
.dsk-col .keyer-btn.dsk-on.on-air { background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(255,50,50,0.75); }
.dsk-rows .keyer-btn.dsk-on.on-air { background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(255,50,50,0.75); }
.keyer-btn { background: var(--key-face); border: 1px solid var(--key-border); color: #0a0a0a;
  width: var(--btn-size); aspect-ratio: 1 / 1; min-height: 0;
  padding: 3px 2px; border-radius: var(--btn-radius); font-size: 11px; cursor: pointer; font-weight: 800;
  text-transform: uppercase; text-align: center; line-height: 1.15; display: flex; flex-direction: column;
  gap: 2px; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--key-shadow); }
.keyer-btn .keyer-src { font-size: 8px; color: #555; font-weight: 700; text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  min-height: 9px; line-height: 1; }
.keyer-btn .keyer-src:empty::before { content: '—'; color: #999; }
.keyer-btn:active { transform: scale(0.96); }
.keyer-btn.on-air { background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(255,50,50,0.72); }
.keyer-btn.on-air .keyer-src { color: rgba(255,255,255,0.9); }
.keyer-btn.next { background: var(--key-yellow); border-color: #c9a300; color: #2a2200;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(245,205,40,0.7); }
.keyer-btn.tie { background: var(--key-yellow); border-color: #c9a300; color: #2a2200;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(245,205,40,0.7); }

/* 트랜지션 유형: 1행(유형 버튼) + 2행(PREV TRANS·CUT·AUTO·길이) */
.transition-styles { display: flex; flex-direction: column; gap: var(--btn-gap); align-items: flex-start; }
/* 5열 그리드(버튼 1칸 폭) — row1 유형5개, row2 PREV·빈칸·CUT·AUTO·길이 가 열 정렬 */
.ts-row1, .ts-row2 { display: grid; grid-template-columns: repeat(5, var(--btn-size));
  gap: var(--btn-gap); align-items: center; justify-content: start; }
.ts-spacer { width: var(--btn-size); }  /* 빈 칸(col2) */
.ts-btn { background: var(--key-face); border: 1px solid var(--key-border); color: #0a0a0a;
  width: var(--btn-size); aspect-ratio: 1 / 1; padding: 3px; border-radius: var(--btn-radius);
  font-size: 12px; cursor: pointer; font-weight: 800; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--key-shadow); }
.ts-btn:active { transform: scale(0.96); }
.ts-btn.active { background: var(--key-yellow); border-color: #c9a300; color: #2a2200;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(245,205,40,0.7); }
.ts-btn.on-air { background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(255,50,50,0.74); }

/* ===== T-bar (세로 = 기본) ===== */
.tbar-wrap { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; } /* 카드 남은 폭 채움(기준폭 안에서) */
/* overflow:hidden + 핸들을 트랙 안에 가둠 → 라벨 안 가림, 잘리지도 않음 */
.tbar-track { position: relative; flex: 1; min-height: 100px; background: #0a0a0a;
  border-radius: 4px; margin-top: 4px; cursor: pointer; overflow: hidden;
  border: 1px solid #1e1e1e; }
.tbar-fill { position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  height: 0%; background: #22a355; }
/* 핸들: JS가 top/left를 트랙 안쪽 범위로만 설정(0 ~ 트랙-16px) */
.tbar-handle { position: absolute; left: 0; right: 0; height: 16px; top: 0;
  border-radius: 3px; background: #d5d5d5; border: 1px solid #888; z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.55);
  touch-action: none; cursor: grab; } /* 핸들만 드래그 시작(트랙 스크롤 방해 X) */
/* 잡기 쉽게 보이지 않는 hit 영역 확대 */
.tbar-handle::before { content: ''; position: absolute; left: -8px; right: -8px; top: -10px; bottom: -10px; }
.tbar-handle::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%;
  height: 2px; transform: translateY(-50%); background: #888; border-radius: 1px; }
.tbar-head { margin-bottom: 4px; text-align: center; } /* AUDIO 헤더처럼: T-bar 카드 이름 */
.tbar-label { font-size: 9px; color: var(--muted); display: flex; flex-direction: column;
  align-items: center; gap: 1px; flex: 0 0 auto; white-space: nowrap; }
/* % 값이 0%↔100% 바뀌어도 폭 고정 → 가로 T-bar 위치가 안 흔들림 */
#tbar-value { display: inline-block; min-width: 30px; text-align: right; }

/* ─── 세로형(T-bar) 카드가 wrap되어 한 줄을 독차지 → 가로형 (.is-horizontal, JS가 부여) ─── */
.switcher-action-card.is-horizontal { position: relative; flex-direction: column; width: 100%; gap: 10px; }
.switcher-action-card.is-horizontal .cut-auto-ftb { flex-direction: row; align-items: center; gap: 8px; }
.switcher-action-card.is-horizontal .cut-auto-ftb .rate-pill { margin-top: 0; height: var(--btn-size); justify-content: center; }
.switcher-action-card.is-horizontal .big-btn.ftb { margin-top: 0; }
/* 얇은 가로 T-bar */
.switcher-action-card.is-horizontal .tbar-wrap {
  width: 100%; flex-direction: row; align-items: center; gap: 10px; flex: none;
  position: relative; padding-right: 44px; /* 오른쪽 % 값 자리 */
}
.switcher-action-card.is-horizontal .tbar-head { margin-bottom: 0; align-self: center; white-space: nowrap; } /* 가로형: 이름 왼쪽 */
.switcher-action-card.is-horizontal .tbar-label { flex-direction: row; gap: 6px; white-space: nowrap; }
/* T-BAR 글씨는 왼쪽(라벨), 100% 값은 오른쪽 끝 */
.switcher-action-card.is-horizontal #tbar-value { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.switcher-action-card.is-horizontal .tbar-track { flex: 1; height: 24px; min-height: 0; margin-top: 0; }
/* fill 좌→우 */
.switcher-action-card.is-horizontal .tbar-fill {
  top: 0; bottom: 0; left: 0; right: auto; height: auto; width: 0%;
}
/* 핸들: 세로 막대(트랙 안쪽) */
.switcher-action-card.is-horizontal .tbar-handle {
  top: 0; bottom: 0; left: 0; right: auto; width: 16px; height: auto;
}
.switcher-action-card.is-horizontal .tbar-handle::after {
  left: 50%; right: auto; top: 5px; bottom: 5px; width: 2px; height: auto;
  transform: translateX(-50%); }

/* CUT/AUTO는 위, FTB는 아래(margin-top:auto). CAM과 같은 정사각 */
.cut-auto-ftb { display: flex; flex-direction: column; gap: var(--btn-gap); flex-shrink: 0; }
.big-btn { background: var(--key-face); border: 1px solid var(--key-border); color: var(--key-text);
  width: var(--btn-size); aspect-ratio: 1 / 1; padding: 2px; border-radius: var(--btn-radius);
  font-size: 13px; font-weight: 800; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--key-shadow); }
.big-btn.cut { background: var(--key-pgm); border-color: #b00; color: #fff; }
.big-btn.auto { background: var(--key-yellow); border-color: #c9a300; color: #2a2200; }
/* T-bar 카드의 CUT·AUTO는 다른 버튼처럼 흰색(.ts-btn/FTB 기본과 동일). 설정·오프라인의 auto/cut은 영향 없음 */
.cut-auto-ftb .big-btn.cut, .cut-auto-ftb .big-btn.auto {
  background: var(--key-face); border-color: var(--key-border); color: var(--key-text); }
/* AUTO 전환 진행 중에만 빨강 발광(끝나면 자동 해제) */
.cut-auto-ftb .big-btn.auto.transitioning {
  background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 14px 1px rgba(255,50,50,0.78); }
.big-btn.ftb.active { background: #1a1a1a; border-color: #f00; color: #f55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 14px 1px rgba(255,0,0,0.72); }
.big-btn:active { transform: scale(0.97); }

/* 길이 표시: 검정 배경 + 주황 글씨 둥근 pill */
.rate-pill[data-rate] { cursor: pointer; } /* 꾹 눌러 길이 입력 가능 표시 */
.rate-pill { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; flex-shrink: 0; width: var(--btn-size); }
.rate-pill .rate-label { font-size: 11px; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; }
.rate-pill .rate-val { background: #111; color: #e8951f; font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 3px 10px; line-height: 1.25; white-space: nowrap;
  min-width: 36px; text-align: center; }
/* FTB 길이는 하단(FTB 바로 위)으로 밀기 */
/* ftb-rate 의 하단 밀기는 위 .tbar-me-slot(flex:1)이 대신함 → margin-top:auto 불필요 */
.cut-auto-ftb .ftb-rate-pill { margin-top: 0; }
/* 트랜지션 카드 길이: 세로 중앙 정렬 */
.rate-pill.rate-square { justify-content: center; }

/* ===== Outputs (Aux) page — 현재 메뉴 미연결(숨김). display는 .page.active가 제어 ===== */
.aux-page { overflow: auto; gap: 8px; }
#aux-rows { display: flex; flex-direction: column; gap: 8px; }
/* OUT 버튼 행 */
.aux-out-card { flex: 0 0 auto; }
.aux-out-row { display: flex; flex-wrap: wrap; gap: var(--btn-gap); }
.aux-out-btn { position: relative; background: var(--key-face); border: 1px solid var(--key-border); color: #0a0a0a;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  width: var(--btn-size); aspect-ratio: 1/1; border-radius: var(--btn-radius);
  font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: var(--key-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 2px; overflow: hidden; }
.aux-out-btn.on-air { background: var(--key-pgm); border-color: #b00; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(255,50,50,0.74); }
.aux-out-num { font-size: 11px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.aux-out-src { font-size: 9px; font-weight: 600; color: #555; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1; }
.aux-out-btn.on-air .aux-out-src { color: rgba(255,255,255,0.75); }

/* ===== 매크로 카드 (실행·녹화) ===== */
/* 헤더: 제목은 다른 추가카드 헤더와 같은 상단 위치(위로 정렬). 버튼은 세로 중앙 */
.macro-card .macro-head { display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: var(--btn-gap); }
/* 녹화 중: 카드 테두리만 살짝 강조(주 표시는 상단바) */
.macro-card.macro-rec-mode { outline: 1px solid rgba(220,70,70,0.55); outline-offset: -1px; border-radius: 8px; }
/* 카드 이름 — 다른 추가카드 헤더(800·대문자·자간0.5)와 통일, 상단 정렬. 클릭하면 이름 변경 */
.macro-title { align-self: flex-start; flex: 1; min-width: 0; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 14px; color: #b88fd6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.macro-title:empty::before { content: 'MACRO'; opacity: 0.6; }
/* 즉시 재생: 그래픽 토글 스위치. 그리드와 여백을 줌 */
.macro-imm-row { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px;
  cursor: pointer; user-select: none; -webkit-user-select: none; }
.macro-imm-lbl { font-size: 11px; font-weight: 700; color: #9a9aa6; letter-spacing: 0.3px; } /* "녹화 남은 시간"과 동일 */
.macro-imm-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.macro-switch { position: relative; width: 34px; height: 18px; flex: 0 0 auto; border-radius: 999px;
  background: #3a3a42; border: 1px solid #4a4a52; transition: background .15s, border-color .15s; }
.macro-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: #cfcfd6; transition: transform .15s, background .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.macro-imm-row input:checked + .macro-switch { background: #2faa55; border-color: #36c062; }
.macro-imm-row input:checked + .macro-switch::after { transform: translateX(16px); background: #fff; }
.macro-imm-row input:focus-visible + .macro-switch { box-shadow: 0 0 0 2px rgba(99,160,232,0.5); }
.macro-ctrls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.macro-cbtn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #3a3a42; background: #2a2a30;
  color: #cfcfd6; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.macro-cbtn svg { width: 14px; height: 14px; }
.macro-cbtn:hover { background: #34343c; color: #fff; }
.macro-cbtn:active { transform: scale(0.94); }
.macro-cbtn.macro-play { color: #6fcf7f; }
.macro-cbtn.macro-stop { color: #e57373; }
.macro-cbtn.on { background: #e3a532; border-color: #c98e1f; color: #1a1400; } /* 반복 활성 */
/* 매크로 카드 그리드: 3열, 쓰는 만큼 줄이 늘어 카드가 커짐 (클래스는 매크로 '페이지'와 분리: mc-) */
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--btn-gap); width: 100%; }
/* 매크로 버튼: ON AIR처럼 살짝 볼록(상단 하이라이트+드롭섀도) + 슬레이트-블루 색으로 구분 */
.mc-btn { position: relative; height: 40px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #2d3140, #232732); border: 1px solid #3b4150; color: #cdd3e0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
  font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; padding: 2px 6px; overflow: hidden; line-height: 1.1;
  -webkit-user-select: none; user-select: none; touch-action: none;
  transition: background .12s, border-color .12s; }
.mc-btn:hover { background: linear-gradient(180deg, #343a4c, #282d3a); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mc-btn-wait { font-size: 8px; font-weight: 700; letter-spacing: 0.3px; color: #ffcf6a; text-transform: uppercase; }
.mc-btn.selected { border-color: #e3a532; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px #e3a532; }
.mc-btn.running { background: linear-gradient(180deg, #45161a, #321015); border-color: #7a2c34; color: #ff9a9a;
  animation: macroPulse 1.1s ease-in-out infinite; }
.mc-btn.running.waiting { background: linear-gradient(180deg, #3a2e13, #2a210e); border-color: #7a6228; color: #ffe0a0;
  animation: macroPulseAmber 1.1s ease-in-out infinite; }
@keyframes macroPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 8px 1px rgba(255,60,60,0.4); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px 3px rgba(255,60,60,0.8); } }
@keyframes macroPulseAmber { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 8px 1px rgba(245,190,60,0.4); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px 3px rgba(245,190,60,0.85); } }
/* 매크로 없을 때 안내(만들기는 헤더 ＋) */
.mc-empty { grid-column: 1 / -1; padding: 10px 4px; text-align: center; font-size: 11px; color: #5a5a64; }
/* 드래그 재배치: 집기(살짝 키움) / 원본(드래그 중 흐림) / 손가락 따라가는 고스트 */
.mc-btn.mc-lift { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,0.5); border-color: #e3a532; z-index: 2; }
.mc-btn.mc-dragging { opacity: 0.3; }
.mc-btn.mc-ghost { position: fixed; z-index: 1200; pointer-events: none; opacity: 0.92;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55); transform: scale(1.04); }
/* 끝의 숨김(+N) 버튼 — 출력 카드의 숨김 버튼과 동일한 회색. 드래그해서 올리면 초록(숨기기) */
.mc-btn.mc-hidden-btn { background: #44444c; border: 1px solid #55555e; color: #d2d2d8; box-shadow: none; }
.mc-btn.mc-hidden-btn:hover { background: #51515a; color: #fff; }
.mc-btn.mc-hidden-empty { background: #1d1d21; border: 1px dashed #3a3a42; color: #5a5a64; }
.mc-btn.mc-hidden-btn.drop-hot { background: #2faa55; border-color: #36c062; color: #fff; transform: scale(1.06); }
.mc-hidden-btn .hb-plus { font-size: 17px; font-weight: 700; }
/* 숨긴 매크로 펼침(모달) — 카드와 똑같은 .mc-btn 그리드. 누르면 다시 표시 */
.mc-hidden-grid { margin-top: 6px; max-height: 50vh; overflow: auto; }
.macro-cbtn.macro-play.waiting { background: #e3a532; border-color: #c98e1f; color: #1a1400;
  animation: macroPulseAmber 1.1s ease-in-out infinite; }
@keyframes macroDotBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* ===== 상단바 녹화 바: 녹화 중이면 상단바 전체를 단색 빨강으로(레이아웃 편집 모드와 동일 방식) ===== */
.topbar.tb-macro-mode { background: #d23b34; border-bottom-color: #a82a25; }
.tb-macro-rec { display: none; position: absolute; inset: 0; z-index: 6; align-items: center; gap: 8px;
  padding: 0 14px; background: #d23b34; }
.topbar.tb-macro-mode .tb-macro-rec { display: flex; }
.tb-macro-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; flex: 0 0 auto;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.5); animation: macroDotBlink 1.1s ease-in-out infinite; }
.tb-macro-txt { font-size: 13px; font-weight: 800; letter-spacing: 0.3px; color: #fff;
  flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 대기 추가 카운트(✓N) — 추가될 때마다 팝 애니메이션 */
.tb-macro-count { font-size: 12px; font-weight: 800; color: #fff; background: rgba(255,255,255,0.22);
  border-radius: 11px; padding: 2px 9px; flex: 0 0 auto; }
.tb-macro-count[hidden] { display: none; }
.tb-macro-count.flash { animation: macroCountPop 0.45s ease; }
@keyframes macroCountPop { 0% { transform: scale(1); background: #2faa55; }
  35% { transform: scale(1.28); background: #36c062; } 100% { transform: scale(1); background: rgba(255,255,255,0.22); } }
/* [스테퍼 + 단위]를 한 단위로 가깝게(보이는 박스 없음) */
.tb-macro-val { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.tb-macro-unit { color: rgba(255,255,255,0.92); font-weight: 700; font-size: 11px; }
/* 지속시간 ↔ 명령대기 구분 세로줄 */
.tb-macro-div { width: 1px; height: 22px; flex: 0 0 auto; align-self: center; margin: 0 2px;
  background: rgba(255,255,255,0.35); }
/* 초·프레임 세그먼트 스테퍼 [−│값│+] */
.tb-macro-stepper { display: inline-flex; align-items: center; height: 24px; border-radius: 7px; overflow: hidden;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.28); }
.tb-macro-step { width: 24px; height: 100%; border: none; background: none; color: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.tb-macro-step:hover { background: rgba(255,255,255,0.18); }
.tb-macro-step:active { background: rgba(255,255,255,0.3); }
.tb-macro-stepper input { width: 30px; height: 100%; background: none; color: #fff; text-align: center;
  font-size: 13px; font-weight: 700; border: none; border-left: 1px solid rgba(255,255,255,0.22);
  border-right: 1px solid rgba(255,255,255,0.22); -moz-appearance: textfield; appearance: textfield; }
.tb-macro-stepper input::-webkit-outer-spin-button, .tb-macro-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 지속시간·명령대기 — 레이아웃 편집 버튼과 같은 언어(라운드·볼드·솔리드), 빨강 위라 프로스티드 흰색 */
.tb-macro-wbtn { height: 32px; font-size: 12.5px; font-weight: 700; line-height: 1; color: #fff; white-space: nowrap;
  display: inline-flex; align-items: center; background: rgba(255,255,255,0.17); border: none; border-radius: 8px;
  padding: 0 13px; cursor: pointer; flex: 0 0 auto; transition: background .12s; }
.tb-macro-wbtn:hover { background: rgba(255,255,255,0.32); }
.tb-macro-wbtn:active { transform: translateY(1px); }
.tb-macro-wbtn.flash-ok { animation: macroBtnFlashOk 0.5s ease; }
@keyframes macroBtnFlashOk { 0%,70% { background: #2faa55; color: #fff; } 100% { background: rgba(255,255,255,0.17); } }
/* 정지 — 솔리드 흰색으로 가장 또렷하게. 앞 버튼과 같은 높이(32px), ■는 좀 크게 */
.tb-macro-stop { height: 32px; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800;
  color: #c0392b; background: #fff; border: none; border-radius: 8px; padding: 0 15px; cursor: pointer;
  white-space: nowrap; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.tb-macro-stop-sq { width: 12px; height: 12px; flex: 0 0 auto; background: currentColor; border-radius: 2px; }
.tb-macro-stop:hover { background: #ffeae8; }
.tb-macro-stop:active { transform: translateY(1px); }
/* 이름 입력 모달(만들기·이름변경) */
.macro-modal-ov { position: fixed; inset: 0; z-index: 2030; background: rgba(8,8,12,0.34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.macro-modal { width: min(320px, 90vw); background: #1b1e23; border: 1px solid #2b3038;
  border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,0.6); padding: 18px; }
.macro-modal-title { font-size: 15px; font-weight: 700; color: var(--text, #e6e6ea); margin-bottom: 12px; }
.macro-modal-msg { font-size: 14px; color: #c7c7cf; line-height: 1.5; }
.macro-modal-input { width: 100%; box-sizing: border-box; background: #1a1a1f; border: 1px solid #45454f;
  color: #f0f0f4; border-radius: 6px; padding: 9px 10px; font-size: 14px; }
.macro-modal-input:focus { outline: none; border-color: #e3a532; }
.macro-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.macro-modal-btn { height: 36px; padding: 0 16px; border-radius: 6px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 700; background: var(--btn, #2a2a30); border: 1px solid var(--border, #2d2d35); color: var(--text, #fff); }
.macro-modal-btn:hover { background: #3c3c44; }
.macro-modal-btn.primary { background: #c0392b; border-color: #e74c3c; color: #fff; }
.macro-modal-btn.primary:hover { background: #d0432f; }
.macro-menu { position: fixed; z-index: 1000; background: #26262c; border: 1px solid #3a3a42;
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: flex; flex-direction: column;
  min-width: 120px; overflow: hidden; }
.macro-menu button { background: none; border: none; color: #e6e6ea; text-align: left;
  padding: 9px 12px; font-size: 12px; cursor: pointer; }
.macro-menu button:hover { background: #33333a; }
.macro-menu button.danger { color: #e57373; }
/* 출력 소스 버튼: 선택된 OUT에 라우팅된 소스 = 파랑 (PGM/PVW 소스는 data-prefix 없음 → 영향X) */
.src-btn[data-prefix].active { background: var(--key-blue); border-color: #1d86c8; color: #fff;
  box-shadow: var(--key-shadow), 0 0 13px 1px rgba(60,160,230,0.68); }
/* 스위처 인라인 출력: 기본 source-groups(줄바꿈 wrap) 사용 → 버튼 많으면 아래로 */

/* ===== Audio page ===== */
.audio-page { overflow: auto; }
.mixer { display: flex; gap: 6px; align-items: flex-end; padding: 12px;
  background: var(--panel); border-radius: 6px; min-height: 360px; }
.channel { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; background: var(--panel-2); border-radius: 4px; min-width: 56px; }
.channel.master { background: #2a3a5a; min-width: 70px; }
.channel-label { font-size: 11px; font-weight: 700; }
.fader-track { position: relative; width: 30px; height: 220px; background: #0a0a0a;
  border-radius: 4px; border: 1px solid #222; cursor: pointer; }
.fader-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--pvw), #195); }
.fader-handle { position: absolute; left: -6px; right: -6px; height: 14px; background: #ccc;
  border-radius: 3px; border: 1px solid #444; pointer-events: none; }
.fader-value { font-size: 10px; color: var(--muted); }
.audio-btn { background: var(--btn); border: 1px solid var(--border); color: var(--text);
  padding: 4px 6px; border-radius: 3px; font-size: 10px; cursor: pointer; font-weight: 600;
  min-width: 48px; }
.audio-btn.on { background: var(--on-air); border-color: var(--pgm-glow); }
.audio-btn.afv { background: #38c; border-color: #6af; }

/* ===== Media page ===== */
/* media-page grid sizing handled in .page.media-page.active above */
.media-player { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.media-type-tabs { display: flex; gap: 4px; }
.media-type-tab { background: var(--btn); border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.media-type-tab.active { background: #555; border-color: #888; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
  flex: 0 0 auto; align-content: start; }
.media-slot { box-sizing: border-box; background: var(--btn); border: 1px solid var(--border); border-radius: 5px;
  aspect-ratio: 16 / 9; min-height: 0; padding: 4px; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; font-size: 10px; overflow: hidden; }
.media-slot.empty { opacity: 0.4; }
.mp-transport { display: flex; gap: 6px; padding: 4px 0; }
.mp-transport.hidden { display: none; }
.mp-transport .audio-btn { flex: 1; padding: 8px 6px; font-size: 11px; min-width: auto; }
.mp-transport .mp-play.on { background: var(--ok); border-color: #4d9; }
.mp-transport .mp-loop.on { background: #38c; border-color: #6af; }
.media-slot-index { font-weight: 700; }
.media-slot-name { color: var(--muted); font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 미디어 페이지: 플레이어 행 + 공유 풀 ===== */
/* 미디어 플레이어: 16:9 카드, 로드된 스틸 썸네일을 배경 미리보기로. 아래 클립/스틸과 구분선·간격 */
.media-players { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto;
  padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.media-mp { box-sizing: border-box; flex: 0 0 auto; width: 230px; max-width: 47%; aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  background: #1d1d22 center / cover no-repeat; border: 2px solid var(--mp-color, #444); border-radius: 8px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 0; transition: box-shadow .12s, transform .12s; }
/* 끌어다 놓는 대상 MP는 초록 강조 + 살짝 커져서 어디 들어갈지 명확 */
.media-mp.drop-target { box-shadow: 0 0 0 3px #2a9d4f inset, 0 0 10px #2a9d4f; transform: scale(1.07); z-index: 2; }
.media-mp-name { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #1a1018;
  background: var(--mp-color, rgba(0,0,0,0.6)); padding: 2px 8px; border-radius: 0 0 7px 0; z-index: 1; }
.media-mp-bottom { display: flex; flex-direction: column; gap: 4px; padding: 6px; z-index: 1;
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.media-mp-src { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-mp-transport { display: flex; gap: 4px; }
.media-mp-transport.hidden { display: none; }
.mp-tbtn { flex: 1; min-width: 0; height: 24px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.14);
  color: #fff; border-radius: 5px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.mp-tbtn svg { width: 15px; height: 15px; display: block; } /* 4개 아이콘 크기 통일 */
.mp-tbtn:hover { background: rgba(255,255,255,0.26); }
.mp-tbtn:active { transform: scale(0.94); }
.mp-tbtn[data-act="play"].on { background: #2a9d4f; border-color: #4d9; }
.mp-tbtn[data-act="loop"].on { background: #2f7fd0; border-color: #6af; }
/* 라벨 통일(스틸 / 클립 N) — 같은 폰트·대소문자(타이틀케이스) */
.media-label, .media-clip-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--text);
  text-transform: none; margin: 0; }
/* 사용 안내(미디어 플레이어 위) */
.media-hint { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #b88fd6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-hint:empty { display: none; }
/* 풀 헤더 */
.media-pool-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.media-pool-head .media-upload-btn { margin-left: auto; }
/* 클립 섹션(상단, 클립 있는 모델만). 클립 = 영상 + 오디오 한 쌍 */
.media-clips-sec { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.media-clips-sec[hidden] { display: none; }
.media-clips-row { display: flex; flex-wrap: wrap; gap: 14px; }
.media-clip-note { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: #9a9aa6; margin-top: 2px; }
.media-note-ico { display: inline-flex; flex: 0 0 auto; color: #9a9aa6; }
.media-note-ico svg { width: 14px; height: 14px; }
/* 상단 안내(드래그) 아이콘 */
.media-hint { display: flex; align-items: center; gap: 5px; }
.media-hint-ico { display: inline-flex; flex: 0 0 auto; }
.media-hint-ico svg { width: 15px; height: 15px; }
.media-clip { display: flex; flex-direction: column; gap: 4px; }
.media-clip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.media-clip-pair { display: flex; gap: 4px; }
.media-clip .clip-video, .media-clip .clip-audio { width: 132px; aspect-ratio: 16 / 9; }
.media-clip .clip-video { cursor: default; }
.media-clip .clip-audio { cursor: default; }
.media-clip-ico { color: #4a4a52; display: inline-flex; }
.media-clip-ico svg { width: 30px; height: 30px; }
.media-clip:not(.empty) .media-clip-ico { color: #8a8a92; }
.media-clip:not(.empty) .clip-video:hover { border-color: #5a6cff; }
/* 슬롯 → MP 드래그: 원본 흐림 / 손가락 따라가는 고스트 / MP 드롭타겟 강조 */
.media-slot.lift { transform: scale(1.06); border-color: #e3a532; z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.media-slot.drag-src { opacity: 0.35; }
.media-slot.media-ghost { position: fixed; z-index: 1200; pointer-events: none; opacity: 0.92; margin: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55); transform: scale(1.05); }
.media-mp.drop-target { border-color: #2a9d4f !important; box-shadow: 0 0 0 2px #2a9d4f inset; background: #1c2a20; }
/* 슬롯: 비우기(✕) + 로드 뱃지 */
.media-slot { position: relative; }
.media-slot-clear { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; border-radius: 4px;
  border: none; background: rgba(0,0,0,0.45); color: #ffb4b4; font-size: 10px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0; }
.media-slot:hover .media-slot-clear { display: inline-flex; }
.media-slot.loaded .media-slot-clear { display: none !important; } /* MP에 로드된 스틸은 삭제 금지 */
.media-slot-clear:hover { background: #c0392b; color: #fff; }
.media-slot-badges { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 2px; min-height: 0; }
.media-mp-badge { font-size: 7px; font-weight: 800; color: #161616; background: #b88fd6; border-radius: 3px; padding: 0 3px; line-height: 1.4; }
/* 썸네일이 깔린 슬롯: 배경 이미지 + 인덱스(좌상)·이름(하단 그라데이션)·뱃지(우하) 오버레이 */
.media-slot.has-thumb { background-size: cover; background-position: center; justify-content: flex-end; gap: 0; padding: 0; }
.media-slot.has-thumb .media-slot-index { position: absolute; top: 2px; left: 3px; z-index: 1; font-size: 9px;
  color: #fff; background: rgba(0,0,0,0.55); border-radius: 3px; padding: 0 4px; }
.media-slot.has-thumb .media-slot-name { width: 100%; box-sizing: border-box; color: #fff; font-size: 9px;
  padding: 10px 4px 3px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); text-shadow: 0 1px 2px #000; }
.media-slot.has-thumb .media-slot-badges { position: absolute; bottom: 2px; right: 3px; z-index: 1; margin: 0; }
/* 업로드 버튼(풀 헤더) — 초록 프라이머리 */
.media-upload-btn { background: #2a9d4f; border: 1px solid #36c062; color: #fff; padding: 5px 12px;
  border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.media-upload-btn:hover { background: #34b35c; }
.media-upload-btn:active { transform: translateY(1px); }
/* 빈 스틸 슬롯 = 업로드 자리(점선 + 큰 ＋) */
.media-slot.upload-slot { border-style: dashed; opacity: 0.6; color: #888; }
.media-slot.upload-slot:hover { opacity: 1; border-color: #2a9d4f; color: #6fcf7f; }
.media-slot.upload-slot .media-slot-name { font-size: 20px; font-weight: 400; line-height: 1; color: inherit; }
/* 업로드 중 오버레이 + 스피너 */
.media-slot.uploading { pointer-events: none; }
.media-slot.uploading::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); border-radius: inherit; z-index: 1; }
.media-slot.uploading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%;
  animation: mediaSpin 0.7s linear infinite; z-index: 2; }
@keyframes mediaSpin { to { transform: rotate(360deg); } }

/* ===== SuperSource page ===== */
/* 스크롤은 바깥 .page(#page-ss)가 담당(스위처와 동일). 상하좌우 여백은 .page 10px 패딩으로 통일. */
.ss-page { display: flex; flex-direction: column; gap: 12px;
  flex: 0 0 auto; min-width: 0; }
/* 슈퍼소스: 스크린(ss-fieldwrap)·프리셋(ss-presets-sec)은 통 카드. 박스별은 묶지 않고 내부 영역 각각 카드(아래 ucard 변수) */
.ss-fieldwrap, .ss-presets-sec { background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 12px; }
.ss-canvas-wrap { background: transparent; border: none; border-radius: 0;
  padding: 0; display: flex; flex-direction: column;
  gap: 6px; min-width: 0; min-height: 0; overflow: hidden; }
/* 캔버스 영역: 가로폭 기준 16:9, 너무 크면 max-height로 제한(중앙 정렬) */
.ss-canvas-area { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; min-width: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* 캔버스 자체는 JS가 정확히 16:9로 픽셀 사이즈를 설정 (CSS aspect-ratio 의존 X) */
.ss-canvas { background-color: #000; background-size: cover; background-position: center;
  border: 2px solid #333; border-radius: 0; overflow: hidden; position: relative; }
/* 박스 — 색은 --bc(인라인). 테두리+배경은 .ss-box-fill에 두어 크롭 clip이 테두리까지 함께 자름(핸들은 .ss-box에 있어 안 잘림) */
.ss-box { position: absolute; background: transparent; border: none; border-radius: 0; cursor: move;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  gap: 2px; padding: 4px; user-select: none; touch-action: none; box-sizing: border-box; }
.ss-box-fill { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-sizing: border-box;
  background: color-mix(in srgb, var(--bc, #5af) 34%, transparent); transition: background 0.12s; }
.ss-box .ss-box-title { pointer-events: none; white-space: nowrap; max-width: 100%; z-index: 1;
  overflow: hidden; text-overflow: ellipsis; color: #fff; }
.ss-box .ss-box-coord { pointer-events: none; font-size: 10px; font-weight: 600; z-index: 1;
  color: #fff; white-space: nowrap; opacity: 0; }
/* 표시 꺼진 박스: 흐리게 + 클릭이 뒤 박스로 통과(가로채지 않음). 선택은 박스 리스트에서 */
.ss-box.disabled { opacity: 0.3; pointer-events: none; }
.ss-box.disabled .ss-box-fill { background: color-mix(in srgb, var(--bc, #5af) 16%, transparent); }
/* 선택 = 테두리 없이 밝아짐(불투명도↑ + 안쪽 흰 글로우) */
.ss-box.selected .ss-box-fill { background: color-mix(in srgb, var(--bc, #5af) 72%, transparent); box-shadow: inset 0 0 24px rgba(255,255,255,0.34); }
.ss-box.selected .ss-box-coord { opacity: 0.95; }
/* 박스 잠금 */
.ss-box-lock { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; display: none; z-index: 2; color: #ffd24a; }
.ss-box-lock svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.85)); }
.ss-box.locked { cursor: default; }
.ss-box.locked .ss-box-lock { display: block; }

/* 핸들 오버레이 — 선택 박스 위 최상단(박스가 가려져도 핸들은 항상 클릭됨). JS가 위치/표시 제어 */
.ss-handles { position: absolute; box-sizing: border-box; pointer-events: none; z-index: 100; display: none; }
.ss-handles > * { pointer-events: auto; }
/* 크기(코너) 핸들 — ㄱ자(L) 모양을 크롭 막대 디자인(둥근 막대 2개+그림자)으로. 박스 안쪽, 색만 다름(시안 / BR 앰버) */
.ss-rz { position: absolute; width: 18px; height: 18px; touch-action: none; }
.ss-rz-tl { top: 4px; left: 4px; cursor: nwse-resize; }
.ss-rz-tr { top: 4px; right: 4px; cursor: nesw-resize; }
.ss-rz-bl { bottom: 4px; left: 4px; cursor: nesw-resize; }
.ss-rz-br { bottom: 4px; right: 4px; cursor: nwse-resize; }
.ss-rz::before, .ss-rz::after { content: ''; position: absolute; border-radius: 2px;
  box-shadow: 0 0 3px rgba(0,0,0,0.7); background: #22d3ee; }
.ss-rz-br::before, .ss-rz-br::after { background: #fbbf24; }
.ss-rz::before { width: 14px; height: 4px; }  /* 가로 팔 */
.ss-rz::after { width: 4px; height: 14px; }    /* 세로 팔 */
.ss-rz-tl::before { top: 0; left: 0; } .ss-rz-tl::after { top: 0; left: 0; }
.ss-rz-tr::before { top: 0; right: 0; } .ss-rz-tr::after { top: 0; right: 0; }
.ss-rz-bl::before { bottom: 0; left: 0; } .ss-rz-bl::after { bottom: 0; left: 0; }
.ss-rz-br::before { bottom: 0; right: 0; } .ss-rz-br::after { bottom: 0; right: 0; }
/* 크롭 핸들 — 사각형 안쪽에. JS가 top/bottom/left/right를 잘린 위치(%)로 설정 */
.ss-crophandle { position: absolute; touch-action: none; }
.ss-ch-top, .ss-ch-bottom { left: 12%; right: 12%; height: 12px; cursor: ns-resize; }
.ss-ch-left, .ss-ch-right { top: 12%; bottom: 12%; width: 12px; cursor: ew-resize; }
.ss-ch-top { top: 0; } .ss-ch-bottom { bottom: 0; }
.ss-ch-left { left: 0; } .ss-ch-right { right: 0; }
.ss-crophandle::after { content: ''; position: absolute; inset: 0; margin: auto;
  background: #fff; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,0.7); }
.ss-ch-top::after, .ss-ch-bottom::after { width: 26px; height: 4px; }
.ss-ch-left::after, .ss-ch-right::after { width: 4px; height: 26px; }

/* 필드 래퍼: 탭로우 + 패널(캔버스) */
.ss-fieldwrap { display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; }
/* 탭로우: SS 탭(좌) + 스냅/전체잠금(우). 탭이 아래 패널 테두리에 1px 겹쳐 이어지게 */
.ss-tabrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; row-gap: 6px; margin-bottom: -1px; position: relative; z-index: 1; }
/* SS 1개: 탭 없음 → 빈 탭로우 숨기고 필드를 완전한 둥근 패널로 */
.ss-notab .ss-tabrow { display: none; }
.ss-notab .ss-canvas-wrap { border-radius: 6px; }
/* 스냅/전체잠금: topbar 우측(SuperSource 전용) */
.tb-ss-btns { display: flex; align-items: center; gap: 6px; }
.tb-ss-btns[hidden] { display: none; }
.ss-globallock, .ss-snaptoggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 8px; background: var(--btn); border: none; color: var(--text);
  font-size: 12px; font-weight: 700; cursor: pointer; } /* 곡률 8px = 카드추가 버튼과 통일 */
.ss-globallock .ss-gl-ico, .ss-snaptoggle .ss-snap-ico { display: inline-flex; }
.ss-globallock svg, .ss-snaptoggle svg { width: 16px; height: 16px; }
.ss-globallock.on { background: #ffd24a; color: #1a1a1a; }  /* 전체잠금 ON = 캔버스 자물쇠와 같은 주황 */
.ss-snaptoggle.on { background: #2dd4bf; color: #1a1a1a; }  /* 스냅 ON = 밝은 틸 + 검은 텍스트(전체잠금과 톤 통일) */
/* 스냅 가이드선 (드래그 중 표시) */
.ss-snaplines { position: absolute; inset: 0; pointer-events: none; z-index: 90; }
.ss-snap-guide { position: absolute; background: #ff3b6b; }
.ss-snapline-v { top: 0; bottom: 0; width: 1px; }
.ss-snapline-h { left: 0; right: 0; height: 1px; }

/* 캔버스 중앙 가이드선 */
.ss-guide { position: absolute; background: rgba(255,255,255,0.15); pointer-events: none; }
.ss-guide-h { left: 0; right: 0; top: 50%; height: 1px; }
.ss-guide-v { top: 0; bottom: 0; left: 50%; width: 1px; }

/* ---- 설정: 2단(박스 리스트 | 선택 박스 편집) ---- */
/* 2×2 그리드: (박스리스트 | 그래픽) / (박스편집+복사 | 프리셋). 같은 행은 자동으로 높이 일치(stretch) */
.ss-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 0 0 auto; }
.ss-leftcol2 { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 프리셋 관리 패널(그래픽 아래, 우측 단) */
.ss-preset-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 10px; }
.ss-boxlist { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 10px; }
/* 박스 행: [순서] [잠금] [BOX N] [소스] [표시] */
.ss-boxrow { display: grid; grid-template-columns: 22px 30px auto minmax(60px, 1fr) 36px; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px; background: var(--btn); border: 1px solid var(--border); cursor: pointer; }
.ss-boxrow.active { border-color: var(--bc); box-shadow: inset 0 0 0 1px var(--bc); }
.ss-boxrow.off { opacity: 0.5; }
.ss-boxrow.dragging { opacity: 0.4; }
.ss-boxrow.drop-target { box-shadow: 0 -2px 0 #2a9d4f; }
.ss-boxrow.drop-end { box-shadow: 0 2px 0 #2a9d4f; }
.ss-rowdrag { display: flex; align-items: center; justify-content: center; height: 28px; width: 22px;
  background: transparent; border: none; color: var(--muted); font-size: 14px; cursor: grab; touch-action: none; padding: 0; }
.ss-rowlock { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 4px;
  background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; padding: 0; }
.ss-rowlock svg { width: 16px; height: 16px; }
.ss-rowlock.locked { color: #ffd24a; border-color: #ffd24a; }
.ss-rowlabel { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px; white-space: nowrap;
  background: transparent; border: none; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.ss-rowdot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; background: var(--bc); }
.ss-rowsrc { height: 28px; padding: 0 8px; border-radius: 4px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); cursor: pointer; font-size: 11.5px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 그래픽 토글 스위치(즉시재생 .macro-switch과 동일, 켜짐=초록) — 표시/애니메이션/가속도 공용 */
.ss-rowshow { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ss-rowshow input, .ss-opt input, .ss-crop-sw input, .na-switch input, .ss-preset-srcsw input { position: absolute; opacity: 0; width: 0; height: 0; }
.na-switch { display: inline-flex; align-items: center; cursor: pointer; }
.ss-crop-sw { display: inline-flex; align-items: center; cursor: pointer; }
.ss-rowsw { position: relative; width: 34px; height: 18px; flex: 0 0 auto; border-radius: 999px;
  background: #3a3a42; border: 1px solid #4a4a52; transition: background .15s, border-color .15s; }
.ss-rowsw::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px;
  border-radius: 50%; background: #cfcfd6; transition: transform .15s, background .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
input:checked + .ss-rowsw { background: #2faa55; border-color: #36c062; }
input:checked + .ss-rowsw::after { transform: translateX(16px); background: #fff; }
input:focus-visible + .ss-rowsw { box-shadow: 0 0 0 2px rgba(99,160,232,0.5); }
.ss-boxedit { display: flex; flex-direction: column; gap: 8px;
  background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 10px; }
.ss-edit-head { display: flex; align-items: center; gap: 8px; }
.ss-edit-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.ss-edit-title { font-weight: 800; font-size: 14px; }
.ss-edit-lock { color: #ffd24a; } .ss-edit-lock svg { width: 15px; height: 15px; vertical-align: middle; }
.ss-boxedit.locked .ss-fields, .ss-boxedit.locked .ss-crop-head,
.ss-boxedit.locked .ss-crop-fields { pointer-events: none; opacity: 0.4; }
/* 프리셋 섹션(가로 전체) */
.ss-presets-sec { flex: 0 0 auto; } /* 테두리/패딩은 통일 카드(.ss-presets-sec ucard 규칙)가 담당 */
/* 소스 선택 팝업 */
.ss-srcpop-bg { position: fixed; inset: 0; z-index: 2000; }
.ss-srcpop-bg[hidden] { display: none; }
.ss-srcpop { position: fixed; z-index: 2001; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px; width: 300px; max-width: 92vw; max-height: 60vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6); }
.ss-srcpop[hidden] { display: none; }
/* 재사용 소스 피커(sourcepicker.js) — 투명 오버레이 + .ss-srcpop 그리드 재사용. .sp-pop 은 left/top JS 지정 */
.sp-overlay { position: fixed; inset: 0; z-index: 2100; }
.sp-pop { z-index: 2101; }
/* 팔레트 소스/색 선택 버튼 (드롭다운 대신 팝업 피커 호출) */
.pal-srcbtn { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--btn); color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-srcbtn:active { background: #2a2e36; }
.pal-srcbtn.ss-color-btn { flex: 0 0 auto; width: 72px; }
.pal-colorwrap { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
/* 컬러 제너레이터 한 줄: COL라벨 + 색스와치 + H/S/L 직접입력 */
.pal-colorrow .pal-srcbtn.ss-color-btn { width: 64px; min-height: 30px; }
.pal-hslgrp { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.pal-hslcell { display: flex; align-items: center; gap: 5px; }
.pal-hsllbl { font-size: 12px; color: var(--muted); font-weight: 700; }
.pal-hslnum { width: 56px; flex: 0 0 auto; text-align: center; }
/* SuperSource 탭 — 크롬 탭처럼: 활성 탭은 크게 올라오고 아래 필드 패널과 이어짐, 비활성은 낮고 어둡게 */
.ss-tabs { display: flex; gap: 4px; align-items: flex-end; }
.ss-tab { min-height: 34px; padding: 0 28px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 700;
  background: #0e0e12; color: #7c7c86; border: 1px solid var(--border); border-bottom: none; cursor: pointer; }
.ss-tab:hover { color: #b5b5bf; }
/* 비활성: 아래에 라인(닫힌 탭) + 안쪽 그림자로 뒤에 깔린 느낌, 약간 낮음 */
.ss-tab:not(.active) { border-bottom: 1px solid var(--border); box-shadow: inset 0 3px 6px -3px rgba(0,0,0,0.9); }
/* 활성: 더 높게(올라온 느낌) + 패널과 같은 배경 + 위 파란 강조선 → 외곽 프레임과 하나로 이어짐 */
.ss-tab.active { min-height: 42px; background: var(--panel); color: #fff; box-shadow: inset 0 3px 0 #2a5bd7; }
.ss-boxchips { display: flex; gap: 6px; }
.ss-chipcol { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ss-chip { min-height: 38px; border-radius: 5px; cursor: pointer; color: #fff; font-size: 16px; font-weight: 800;
  background: color-mix(in srgb, var(--bc) 22%, var(--btn));
  border: 2px solid color-mix(in srgb, var(--bc) 45%, transparent); }
.ss-chip.active { background: var(--bc); border-color: #fff; }
.ss-chip.off { opacity: 0.45; }
.ss-chiplock { height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  background: var(--btn); border: 1px solid var(--border); color: var(--muted); cursor: pointer; padding: 0; }
.ss-chiplock svg { width: 18px; height: 18px; }
.ss-chiplock.locked { background: #3a2c0a; border-color: #ffd24a; color: #ffd24a; }
.ss-sheet { display: flex; flex-direction: column; gap: 8px; }
.ss-sheet-head { display: flex; align-items: center; gap: 8px; }
.ss-sheet-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.ss-sheet-title { font-weight: 800; font-size: 14px; }
.ss-sheet-lock { color: #ffd24a; }
.ss-sheet-lock svg { width: 15px; height: 15px; vertical-align: middle; }
.ss-enable { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ss-layer { display: flex; align-items: center; gap: 6px; }
.ss-layer-pos { font-size: 12px; font-weight: 800; color: var(--text); margin-right: auto; }
.ss-layer-up, .ss-layer-dn { height: 26px; padding: 0 8px; font-size: 11px; border-radius: 4px;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.ss-layer-up:disabled, .ss-layer-dn:disabled { opacity: 0.35; cursor: default; }
.ss-sheet.locked .ss-src-grid, .ss-sheet.locked .ss-fields, .ss-sheet.locked .ss-crop-head,
.ss-sheet.locked .ss-crop-fields, .ss-sheet.locked .ss-copy, .ss-sheet.locked .ss-enable {
  pointer-events: none; opacity: 0.4; }
.ss-field-label { font-size: 12px; color: var(--text); font-weight: 700; }   /* "그래픽" — "크롭" 헤더와 동일 크기 */
.ss-src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.ss-src-opt { min-height: 30px; padding: 3px 4px; font-size: 11px; border-radius: 3px;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-src-opt.on { background: var(--pvw); border-color: var(--pvw); color: #07210f; font-weight: 700; }
.ss-fields, .ss-crop-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ss-crop-fields.dim { opacity: 0.4; }   /* 크롭 꺼짐: 숨기지 말고 비활성(입력은 render에서 disabled) */
/* 라벨 칸 고정폭(우측정렬) → 글자수 달라도 −칸·입력칸 위치 통일(박스편집·크롭·그래픽 모두 일치). 스텝퍼는 테두리 없이 가볍게 */
.ss-field { display: grid; grid-template-columns: 38px 24px 1fr 24px; gap: 4px; align-items: center; }
.ss-field-name { font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; }
/* 보더 외부/내부 폭: 라벨 오른쪽 정렬(클리핑/게인과 통일). 길면(영어 'Outer width') 2줄로 줄바꿈, 이름칸 줄여 입력칸 확대 */
.ss-borderopt-fields { padding-right: 2px; } /* 오른쪽 끝(+버튼)이 딱 붙지 않게 살짝 여백 */
.ss-borderopt-fields .ss-field { grid-template-columns: 40px 22px minmax(0, 1fr) 22px; gap: 3px; }
.ss-borderopt-fields .ss-field-name { white-space: normal; text-align: right; line-height: 1.1; }
.ss-step { height: 28px; border-radius: 5px; background: rgba(255,255,255,0.05); color: var(--muted);
  border: none; font-size: 15px; font-weight: 600; cursor: pointer; line-height: 1; padding: 0; }
.ss-step:hover { background: rgba(255,255,255,0.11); color: var(--text); }
.ss-step:active { background: rgba(255,255,255,0.16); }
.ss-num { width: 100%; min-width: 0; height: 28px; text-align: center; padding: 0 2px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 12px; }
.ss-num::-webkit-outer-spin-button, .ss-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ss-num { -moz-appearance: textfield; appearance: textfield; }
.ss-crop-head, .ss-pos-head { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; font-weight: 700; }
.ss-pos-head { margin-bottom: 4px; }
.ss-crop-reset, .ss-pos-reset { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0;
  border-radius: 4px; margin-left: auto; background: var(--btn); color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.ss-crop-reset:hover, .ss-pos-reset:hover { color: var(--text); }
.ss-crop-reset:active, .ss-pos-reset:active { background: #2a2e36; }
/* 복사: 박스 리스트 아래 패널. [● N번 위치·크기·크롭 복사 →] [대상 박스 버튼들] */
.ss-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 10px; }
.ss-copy-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text); }
.ss-copy-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.ss-copy-text { white-space: nowrap; }
.ss-copy-targets { display: flex; gap: 4px; }
.ss-copy-tgt { width: 30px; height: 28px; border-radius: 4px; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--bc) 28%, var(--btn));
  border: 1px solid color-mix(in srgb, var(--bc) 50%, transparent); cursor: pointer; }
.ss-art { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
/* 그래픽(ART) 섹션 — 좌측 단 패널(박스리스트/복사 아래). SuperSource 전체 공통 */
.ss-graphic { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); padding: 10px; }
.ss-art-row { display: grid; grid-template-columns: 32px 1fr; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.ss-art-row select { width: 100%; padding: 5px; background: var(--btn); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }
.ss-art-row.dim { display: none; }          /* Key 소스: 전경일 때만 */
.ss-border-toggle.dim { display: none; }    /* 보더: 배경일 때만 */
.ss-fgbg { display: flex; gap: 4px; }
.ss-fgbg button { flex: 1; height: 30px; border-radius: 4px; font-size: 12px;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.ss-fgbg button.on { background: var(--pvw); border-color: var(--pvw); color: #07210f; font-weight: 700; }
.ss-border-toggle { height: 26px; font-size: 11px; border-radius: 4px;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.ss-border-toggle.on { background: var(--pvw); border-color: var(--pvw); color: #07210f; }
/* 키 옵션(전경)·보더 옵션(배경) — 비활성 시 dim */
.ss-keyopts, .ss-borderopts { display: flex; flex-direction: column; gap: 6px; }
.ss-keyopts.dim, .ss-borderopts.dim { display: none; }   /* 안 쓰는 모드의 옵션은 접어서 숨김 */
.ss-keyopt-btns { display: flex; gap: 4px; }
.ss-premult, .ss-invertkey { flex: 1; height: 26px; font-size: 11px; border-radius: 4px;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer; }
.ss-premult.on, .ss-invertkey.on { background: var(--pvw); border-color: var(--pvw); color: #07210f; font-weight: 700; }
.ss-border-color { width: 100%; height: 28px; padding: 2px; background: var(--btn); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
/* 보더 색 한 줄: 스와치 + H/S/L 직접입력 */
.ss-art-row.ss-border-colorrow { display: flex; align-items: center; gap: 10px; }
.ss-border-colorrow .ss-border-color { width: 56px; flex: 0 0 auto; }
.ss-border-hsl { display: flex; gap: 8px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.ss-hslcell { display: flex; align-items: center; gap: 4px; }
.ss-hslcell > span { font-size: 11px; color: var(--muted); font-weight: 700; }
.ss-border-hsl .ss-hslnum.ss-num { width: 50px; flex: 0 0 auto; }

/* 프리셋 옵션(애니메이션/가속도) */
.ss-preset-opts { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.ss-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ss-opt input:disabled ~ span { opacity: 0.4; }
/* 프리셋 전환 속도 5단계 세그먼트 */
.ss-speed { display: flex; align-items: center; gap: 6px; }
.ss-speed-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
/* 속도 슬라이더(토글형 가로 트랙 + 녹색 핸들, 가운데=기본값 마크) + 현재값 표시 */
.ss-speed-val { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 26px; font-variant-numeric: tabular-nums; }
.pal-dve-presethead .ss-speed { margin-left: auto; } /* 속도 그룹 오른쪽 정렬 */
.ss-speed-slider { -webkit-appearance: none; appearance: none; width: 132px; height: 20px; padding: 0; margin: 0; border-radius: 999px;
  background: var(--btn); border: 1px solid var(--border); outline: none; cursor: pointer;
  background-image: linear-gradient(#6b7280, #6b7280); background-size: 2px 8px; background-position: center; background-repeat: no-repeat; }
.ss-speed-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #36c062; border: none; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.ss-speed-slider::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: #36c062; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.55); }
.ss-speed-slider:disabled { opacity: 0.45; cursor: default; }
.ss-speed-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--btn); }
.ss-speed-btn { min-width: 30px; height: 28px; padding: 0; border: none; border-left: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.ss-speed-btn:first-child { border-left: none; }
.ss-speed-btn:hover { background: rgba(255,255,255,0.06); }
.ss-speed-btn.active { background: #2a5bd7; color: #fff; }
.ss-speed.dim { opacity: 0.4; pointer-events: none; }

/* 프리셋(레이아웃 템플릿) — 가로 스크롤 대신 아래로 줄바꿈 */
.ss-presets { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 2px; }
/* 최근 프리셋 칸: 화면 바로 아래, 같은 너비. 6열 가득(좁으면 3열 2줄). 이름 없음, 항상 6칸 */
.ss-recent-sec { margin-top: 8px; }
.ss-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ss-recent { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; padding: 3px; } /* padding: 선택 아웃라인 안 잘리게 */
.ss-recent-hint { font-size: 11px; color: var(--muted); margin-top: 6px; padding: 0 3px; }
.ss-recent-card { position: relative; cursor: pointer; isolation: isolate; } /* isolate: 박스 z-index 위에 자물쇠가 오게 */
.ss-recent-card .ss-preset-thumb { width: 100%; border-radius: 4px; }
.ss-recent-card.sel { outline: 2px solid var(--pvw); outline-offset: 1px; border-radius: 6px; }
.ss-recent-empty-box { aspect-ratio: 16 / 9; background: #16161b; border: 1px dashed var(--border); border-radius: 5px; } /* 빈 자리(미디어 빈박스 느낌) */
.ss-recent-lock { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ss-recent-lock svg { width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9)); } /* 작게·배경없이·흰색 */
.ss-actpop .ss-popup-acts { justify-content: center; }
.ss-popup-pin { height: 36px; padding: 0 16px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid #e8922a; background: #b5751a; color: #fff; }
@media (max-width: 760px) { .ss-recent { grid-template-columns: repeat(3, 1fr); } } /* 좁아지면 3열 2줄 */

/* ── SuperSource 추가 카드 (스위처) — 프리셋 6개 슬롯 + 가져오기/＋프리셋 ── */
.sw-ss-card { display: flex; flex-direction: column; gap: 6px; overflow: hidden; min-height: 0; }
.sw-ss-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: nowrap; }
.sw-ss-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-ss-acts { display: flex; gap: 4px; flex: 0 0 auto; }
/* DEMO 뱃지(.hd-mock) 스타일: 작은 외곽선 pill. 활성=녹색 / 비활성=회색 */
.sw-ss-import, .sw-ss-add { font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: 5px; padding: 0 6px; line-height: 16px; background: none; cursor: pointer; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--border); } /* DEMO 뱃지 스타일 + 살짝 크게. font-family:inherit=Pretendard 상속(button 기본폰트 방지) */
.sw-ss-import.on, .sw-ss-add.on { color: #34d399; border-color: #2f7d5e; }
.sw-ss-import:active, .sw-ss-add:active { background: #2a2e36; }
.sw-ss-slot.applied .ss-preset-thumb { outline: 2px solid var(--pvw); outline-offset: 1px; } /* 적용된 프리셋 강조 */
.sw-ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* 가로형: 3열 2행 */
.sw-ss-slot { position: relative; cursor: pointer; }
.sw-ss-slot .ss-preset-thumb { width: 100%; border-radius: 4px; }
.sw-ss-slot-name { font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-ss-slot:active .ss-preset-thumb { outline: 2px solid var(--pvw); outline-offset: 1px; }
.sw-ss-empty { aspect-ratio: 16 / 9; background: #16161b; border: 1px dashed var(--border); border-radius: 5px; cursor: default; }

/* ＋프리셋 선택 팝업 (저장된 프리셋 전체, 최대 6개 선택, 많으면 스크롤) */
.sscard-pick { width: 92%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.sscard-pick-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); }
.sscard-pick-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sscard-pick-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.sscard-pick-item { position: relative; isolation: isolate; cursor: pointer; border: 2px solid transparent; border-radius: 6px; padding: 2px; } /* isolate: 박스 z-index 위에 순서 뱃지가 오게 */
.sscard-pick-item .ss-preset-thumb { width: 100%; border-radius: 4px; }
.sscard-pick-item.on { border-color: var(--pvw); background: rgba(45,212,191,0.08); }
.sscard-pick-num { position: absolute; top: 4px; left: 4px; display: none; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #000; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; z-index: 10; } /* 검은 바탕·흰 글씨 */
.sscard-pick-item.on .sscard-pick-num { display: block; } /* 선택된 것만 순서 번호 표시 */
.sscard-pick-reset { margin-right: auto; height: 34px; padding: 0 14px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--btn); color: var(--text); }

/* ── USK DVE 추가 카드 (스위처) ── */
.sw-dve-card { display: flex; flex-direction: column; gap: 6px; overflow: hidden; min-height: 0; }
.sw-dve-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.sw-dve-sel { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-dve-key { display: flex; gap: 3px; } /* M/E(.sw-dve-me)는 me-tabs 스타일 사용 */
.sw-dve-keybtn { height: 20px; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer;
  background: var(--btn); color: var(--muted); border: 1px solid var(--border); }
.sw-dve-keybtn.on { background: #ffd24a; border-color: #ffd24a; color: #1a1a1a; } /* 켜짐=노랑+검은 글씨 */
.sw-dve-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sw-dve-src { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border-radius: 6px; cursor: pointer; text-align: left;
  background: var(--btn); color: var(--text); border: 1px solid var(--border); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-dve-exits { display: flex; gap: 4px; flex: 0 0 auto; }
.sw-dve-exit { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: none; border: 1px solid var(--border); color: #e0483d; cursor: pointer; } /* 사라지기=붉은 화살표, 원형 */
.sw-dve-exit:active { background: #2a2e36; }
.sw-dve-keyrow { display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* KEY 버튼들 + ＋프리셋(우측) */
.sw-dve-add { font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
  border-radius: 5px; padding: 0 6px; line-height: 16px; background: none; color: var(--muted); border: 1px solid var(--border); }
.sw-dve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sw-dve-slot { cursor: pointer; }
.sw-dve-slot svg { width: 100%; height: auto; display: block; border-radius: 4px; }
.sw-dve-empty { aspect-ratio: 16 / 9; background: #16161b; border: 1px dashed var(--border); border-radius: 5px; cursor: default; }
.sscard-pick-name { font-size: 10px; color: var(--muted); text-align: center; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sscard-pick-acts { display: flex; justify-content: flex-end; gap: 8px; }
.sscard-pick-cancel, .sscard-pick-ok { height: 34px; padding: 0 16px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); }
.sscard-pick-cancel { background: var(--btn); color: var(--text); }
.sscard-pick-ok { background: #1f8f6e; border-color: #2bb88c; color: #fff; }
/* 저장 행: [이름 입력] [저장] */
.ss-preset-save-row { display: flex; gap: 6px; align-items: center; }
/* 소스 포함 토글(이름칸 옆): 켜면 박스 소스까지 저장, 끄면 레이아웃만 */
.ss-preset-srcsw { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.ss-preset-srcsw-lbl { font-size: 11px; font-weight: 600; color: var(--muted); }
/* 소스/그래픽 토글 행(이름·저장 아래 / 수정 버튼 아래) — 각각 독립 토글 */
.ss-preset-opts-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
/* 새 프리셋 저장 영역의 토글은 오른쪽(저장 버튼 쪽)으로 붙이고 위 간격도 좁힘 */
.ss-preset-panel > .ss-preset-opts-row { justify-content: flex-end; margin-top: 4px; }
.ss-preset-nameinp { flex: 1; min-width: 0; height: 36px; padding: 0 8px; border-radius: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); font-size: 12px; }
.ss-preset-save { flex: 0 0 auto; padding: 0 12px; height: 36px; border-radius: 6px;
  border: 1px dashed var(--border); background: var(--btn); color: var(--text);
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ss-preset-save:hover { border-color: var(--pvw); color: var(--pvw); }
.ss-preset-plus { font-size: 16px; line-height: 1; }
.ss-preset-card { position: relative; flex: 0 0 auto; width: 96px; cursor: pointer; }
.ss-preset-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.ss-preset-box { position: absolute; border-radius: 1px; }
.ss-preset-name { font-size: 10px; color: var(--text); margin-top: 3px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 이름 색으로 구분: 내가 만든 것=앰버, 기본 프리셋=차분한 청회색 */
.ss-preset-card:not(.builtin) .ss-preset-name { color: #e8b860; }
.ss-preset-card.builtin .ss-preset-name { color: #7d8aa0; }
.ss-preset-nameinput { width: 100%; box-sizing: border-box; font-size: 10px; margin-top: 3px; text-align: center;
  background: var(--btn); color: var(--text); border: 1px solid #5a6cff; border-radius: 3px; }
.ss-preset-ren, .ss-preset-del, .ss-preset-upd { position: absolute; top: 2px; width: 18px; height: 18px; border-radius: 4px;
  background: rgba(8,8,12,0.34); color: #fff; border: none; font-size: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.ss-preset-ren { left: 2px; }
.ss-preset-upd { left: 50%; transform: translateX(-50%); font-size: 12px; }
.ss-preset-del { right: 2px; }
.ss-preset-upd:hover { background: var(--pvw); color: #07210f; }
.ss-preset-del:hover { background: #c0392b; }
/* 선택된 프리셋(우측 패널) — [작은 썸네일][이름·버튼·토글(+기본이면 안내문구)] 가로 배치(높이 절약, 좌측 박스설정과 맞춤) */
.ss-preset-savenote { font-size: 11px; color: var(--muted); }
.ss-preset-sel { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.ss-preset-sel[hidden] { display: none; }
.ss-preset-sel-thumbcol { flex: 0 0 auto; width: 116px; display: flex; flex-direction: column; gap: 3px; }
.ss-preset-sel-thumb { width: 100%; }
.ss-preset-sel-toast { min-height: 14px; font-size: 11px; font-weight: 700; color: #5ec27a; text-align: center;
  opacity: 0; transition: opacity 0.3s ease; }
.ss-preset-sel-toast.show { opacity: 1; }
.ss-preset-sel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-preset-sel-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.ss-preset-sel-name { width: 100%; height: 30px; padding: 0 8px; border-radius: 5px; background: var(--bg); color: var(--text); border: 1px solid var(--border); font-size: 12px; font-weight: 700; }
.ss-preset-sel-name:disabled { color: var(--muted); }
.ss-preset-sel-acts { display: flex; gap: 6px; }
.ss-psa { flex: 1; height: 30px; border-radius: 5px; background: var(--btn); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-size: 12px; font-weight: 700; }
.ss-psa:hover:not(:disabled) { border-color: var(--pvw); color: var(--pvw); }
.ss-psa-del:hover:not(:disabled) { border-color: #e74c3c; color: #e74c3c; }
.ss-psa:disabled { opacity: 0.4; cursor: default; }
.ss-preset-card.sel { outline: 2px solid var(--pvw); outline-offset: 1px; }
/* 확인 팝업(삭제 등) */
.ss-popup-bg { position: fixed; inset: 0; z-index: 2020; background: rgba(8,8,12,0.34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; }
.ss-popup { background: #1b1e23; border: 1px solid #2b3038; border-radius: 16px; padding: 18px;
  max-width: 320px; width: 86%; box-shadow: 0 12px 44px rgba(0,0,0,0.6); } /* addcard 팝업(.db-popup)과 곡률·배경 통일 */
.ss-popup-msg { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 16px; word-break: keep-all; }
.ss-popup-acts { display: flex; gap: 8px; justify-content: flex-end; }
.ss-popup-cancel, .ss-popup-ok { height: 36px; padding: 0 16px; border-radius: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); }
.ss-popup-cancel { background: var(--btn); color: var(--text); }
.ss-popup-ok { background: #c0392b; border-color: #e74c3c; color: #fff; }

/* ===== Macros page ===== */
.macros-page { overflow: auto; }
.macros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.macro-btn { background: var(--btn); border: 1px solid var(--border); color: var(--text);
  padding: 18px 12px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: left; min-height: 72px; }
.macro-btn .macro-index { font-size: 10px; color: var(--muted); display: block; }
.macro-btn.empty { opacity: 0.4; cursor: default; }
.macro-btn.running { background: var(--on-air); border-color: var(--pgm-glow);
  animation: pulse 0.8s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,80,80,0.4); }
  50% { box-shadow: 0 0 20px rgba(255,80,80,0.8); }
}

/* ===== Stream/Record page ===== */
.stream-page { overflow: auto; }
.broadcast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.broadcast-card { background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.broadcast-title { font-size: 16px; font-weight: 700; }
.broadcast-status { font-size: 12px; color: var(--muted); }
.broadcast-status.live { color: #f55; font-weight: 700; }
.broadcast-status.live::before { content: '● '; }
.broadcast-info { color: var(--muted); font-size: 12px; }
.broadcast-toggle { background: var(--btn); border: 1px solid var(--border); color: var(--text);
  padding: 14px; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; }
.broadcast-toggle.active { background: #b22; border-color: #f55; }

/* ===== Settings page ===== */
.settings-page { overflow: auto; padding: 10px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; align-items: start; max-width: 940px; margin: 0; width: 100%; }
/* 각 열은 독립적으로 위로 쌓이는 flex 스택 — 한 열의 카드가 길어도 옆 열이 벌어지지 않음 */
.settings-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.settings-col > .card { min-width: 0; }
/* 설정 카드: 부드러운 다크 카드 + 구분선 헤더 */
.settings-page .card { background: #1e1e23; border: 1px solid #2d2d35; border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.settings-page .card-head { font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: none; color: #d6d9e0; margin-bottom: 14px; padding-bottom: 11px;
  border-bottom: 1px solid #2d2d35; }
.settings-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-row label { font-size: 13px; color: var(--muted); min-width: 78px; flex-shrink: 0; }
.settings-row input, .settings-row select { flex: 1; min-width: 0; padding: 11px 12px;
  background: #14141a; color: var(--text); border: 1px solid #34343d; border-radius: 9px;
  font-size: 14px; font-family: inherit; transition: border-color .12s, box-shadow .12s; }
.settings-row input:focus, .settings-row select:focus { outline: none; border-color: #4a9eff;
  box-shadow: 0 0 0 3px rgba(74,158,255,0.18); }
.settings-row select { cursor: pointer; }
/* 설정 선택 — 네이티브 드롭다운 대신 앱 팝업(버튼은 기존 select 모양 유지) */
.settings-pick { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; background: #14141a; color: var(--text); border: 1px solid #34343d; border-radius: 9px;
  font-size: 14px; font-family: inherit; cursor: pointer; text-align: left; }
.settings-pick::after { content: '▾'; color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.settings-pick:active { border-color: #4a9eff; }
.settings-pick-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-pick-pop { width: 86%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.settings-pick-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.settings-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.settings-pick-opt { font-family: inherit; text-align: left; padding: 11px 12px; border-radius: 8px; font-size: 14px; cursor: pointer;
  background: #14141a; color: var(--text); border: 1px solid #34343d; }
.settings-pick-opt.on { border-color: #4a9eff; background: rgba(74,158,255,0.12); color: #fff; font-weight: 700; }
.settings-pick-opt:active { background: #20202a; }
/* 설정 내 버튼: 정사각(.big-btn 기본) 무효화 → 일반 가로 버튼 */
.settings-page .big-btn { width: auto; aspect-ratio: auto; min-height: 0; height: auto;
  padding: 11px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; }
.scan-results { margin-top: 10px; max-height: 200px; overflow: auto;
  background: #101015; border: 1px solid #26262e; border-radius: 9px; padding: 6px; }
.scan-result-row { display: flex; gap: 8px; align-items: center; padding: 8px 10px;
  border-radius: 7px; cursor: pointer; }
.scan-result-row:hover { background: #24242c; }
.scan-result-ip { flex: 1; font-family: monospace; }
.settings-msg { margin-top: 10px; padding: 9px 11px; border-radius: 8px; min-height: 0;
  font-size: 12px; }
.settings-msg:empty { display: none; }
.settings-msg.ok { background: rgba(40,170,120,0.15); color: var(--ok); }
.settings-msg.err { background: rgba(200,50,50,0.15); color: #f55; }
.settings-msg.info { background: rgba(60,140,210,0.15); color: #6af; }
.settings-hint { font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.offline-active { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding: 10px 14px; border-radius: 10px;
  background: rgba(220,170,40,0.14); color: #e8c14a; }
.offline-active-label { font-size: 13px; }
.offline-active .big-btn { min-width: 80px; }
.big-btn:disabled { opacity: 0.45; pointer-events: none; }
/* 초기화 카드: 위험(빨강) 버튼 + 설명 */
.settings-reset-row { display: flex; flex-direction: column; gap: 10px; }
.settings-reset-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; padding: 12px 15px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: #2a1316; border: 1px solid #6b2630; color: #ff9a9a; text-align: left;
  transition: background .12s; }
.settings-reset-btn:hover { background: #3a191d; }
.settings-reset-btn b { font-size: 14px; font-weight: 700; }
.settings-reset-btn span { font-size: 11px; color: #d9a3a3; opacity: 0.9; font-weight: 500; }
/* 장비에 기록(시작 상태 저장) — 리셋(빨강)과 구분되는 파란 저장 버튼 */
.settings-save-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; padding: 12px 15px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: #15304d; border: 1px solid #2c6aa8; color: #9cc8f5; text-align: left; transition: background .12s; }
.settings-save-btn:hover { background: #1b3c61; }
.settings-save-btn b { font-size: 14px; font-weight: 700; }
.settings-save-btn span { font-size: 11px; color: #9cc8f5; opacity: 0.85; font-weight: 500; }

/* 설정 → 하위 페이지 진입 버튼 (AUX 출력 설정 등) */
.settings-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 15px; border-radius: 10px; cursor: pointer; font-family: inherit;
  background: transparent; border: none; color: var(--text); text-align: left;
  transition: background .12s; }
.settings-nav-btn:hover { background: rgba(255,255,255,0.05); }
.settings-nav-ico { display: inline-flex; color: #4a9eff; flex-shrink: 0; }
.settings-nav-ico svg { width: 22px; height: 22px; }
.settings-nav-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.settings-nav-txt b { font-size: 14px; font-weight: 700; }
.settings-nav-txt span { font-size: 11px; color: var(--muted); }
.settings-nav-arrow { color: var(--muted); flex-shrink: 0; }

/* 하위 페이지(설정에서 진입) 헤더 + 뒤로가기 */
.subpage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.subpage-back { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px 7px 9px;
  border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--btn); border: 1px solid var(--border); color: var(--text);
  transition: background .12s; }
.subpage-back:hover { background: #27272e; }
.subpage-title { font-size: 16px; font-weight: 800; }

/* ===== 사이드바 하단: 연결 상태 + 장비 변경 ===== */
#atem-status { display: flex; align-items: flex-start; gap: 7px; width: 100%;
  background: transparent; border: none; padding: 6px 6px; border-radius: 6px;
  font-size: 12px; color: var(--muted); cursor: pointer; text-align: left; }
#atem-status:hover { background: rgba(255,255,255,0.06); }
#atem-status .status-dot { width: 9px; height: 9px; border-radius: 50%;
  background: #888; flex-shrink: 0; margin-top: 3px; }
/* 모델명이 길면 2줄로 줄바꿈하여 다 보이게 (말줄임 없음) */
#atem-status-text { flex: 1; min-width: 0; line-height: 1.35; word-break: break-word; }
#atem-status .demo-tag { font-weight: 800; }
/* 실제 온라인 = 녹색, 목업/데모 = 파랑 */
#atem-status.connected .status-dot { background: var(--ok); }
#atem-status.connected #atem-status-text { color: var(--ok); }
#atem-status.mock .status-dot { background: #9ca3af; }
#atem-status.mock #atem-status-text { color: #9ca3af; }
#atem-status.connecting .status-dot { background: var(--warn); }
#atem-status.connecting #atem-status-text { color: var(--warn); }
#atem-status.disconnected .status-dot { background: #ef4444; }
#atem-status.disconnected #atem-status-text { color: #ef4444; }

.conn-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  background: rgba(255,255,255,0.05); border: 1px solid #3a3a40; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 7px 8px; border-radius: 7px; margin-top: 2px; }
.conn-link:hover { background: rgba(255,255,255,0.1); color: var(--text); border-color: #4a4a52; }
.conn-link svg { flex-shrink: 0; }

/* 장비 선택 모달 (중앙) */
.device-modal { position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); padding: 20px; }
.device-modal-card { background: #232327; border: 1px solid #3a3a40; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65); width: 380px; max-width: 100%;
  max-height: 82vh; overflow: auto; padding: 0 14px 14px; }
.dm-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800;
  padding: 12px 4px 12px; position: sticky; top: 0; background: #232327; z-index: 1;
  border-bottom: 1px solid #313137; margin-bottom: 4px; }
.dm-head > span:first-child { flex: 1; }
.dm-rescan, .dm-close { background: transparent; border: none; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.dm-rescan:hover, .dm-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.dm-close { font-size: 16px; }
.dm-group { font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; padding: 10px 6px 4px; }
.dm-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text); font-size: 13px;
  padding: 9px 10px; border-radius: 6px; cursor: pointer; }
.dm-item:hover { background: rgba(255,255,255,0.08); }
.dm-item .dm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dm-item.dm-device .dm-dot { background: var(--ok); }       /* 실제 연결가능 = 녹색 */
.dm-item.dm-model .dm-dot { background: #4a9eff; }          /* 데모 = 파랑 */
.dm-item.active { background: rgba(74,158,255,0.18); }
.dm-item.dm-device.active { background: rgba(40,170,120,0.20); }
.dm-scanning { font-size: 12px; color: var(--muted); padding: 8px 10px; }
/* 기타 장비(하이퍼덱·엔코더): 연결 불가, 안내만 — 클릭/호버 비활성 */
.dm-item.dm-other { justify-content: space-between; cursor: default; }
.dm-item.dm-other:hover { background: transparent; }
.dm-item.dm-other .dm-other-name { color: var(--muted); }
.dm-item.dm-other .dm-other-hint { font-size: 11px; color: #4a9eff; flex-shrink: 0; }
.dm-rescan.spinning svg { animation: dm-spin 0.8s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ===== 하단 메뉴바 (좁은 화면에서만) — 스크롤 없이 균등 분할 ===== */
.bottom-nav { display: none; flex-shrink: 0; align-items: stretch; justify-content: space-between;
  background: #0f0f0f; border-top: 1px solid var(--border); padding: 4px 2px; gap: 1px;
  /* iPhone 홈 인디케이터와 안 겹치게 하단 세이프에어리어 추가. 없으면 0 */
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  overflow: hidden; }
.bottom-nav .nav-item { flex: 1 1 0; min-width: 0; width: auto; min-height: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 1px; border-radius: 8px; background: transparent; color: var(--muted); overflow: hidden; }
.bottom-nav .nav-item.active { background: transparent; color: #2f6fd0; }
.bottom-nav .nav-ico { width: 25px; height: 25px; flex-shrink: 0; }
.bottom-nav .nav-ico svg { width: 25px; height: 25px; stroke-width: 1.7px; } /* 아이콘 크게 + 선 살짝 얇게 */
.bnav-label { font-size: 11px; font-weight: 600; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; }
/* 더보기(+) 버튼 — 평소 숨김, 좁을 때만 표시 */
.bnav-more { display: none; flex: 1 1 0; min-width: 0; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 6px 1px; border: none;
  background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; }
.bnav-more .nav-ico { width: 21px; height: 21px; }
.bnav-more .nav-ico svg { width: 21px; height: 21px; }
/* 더보기 팝업 (하단바 위로 올라옴) */
.bnav-popup { display: none; position: fixed; right: 6px; bottom: 66px; z-index: 1500;
  background: #1c1c1d; border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  flex-direction: column; gap: 2px; box-shadow: 0 6px 20px rgba(0,0,0,0.55); }
.bnav-popup.show { display: flex; }
.bnav-popup .nav-item { flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 11px; min-width: 150px; min-height: 0; width: auto; padding: 11px 14px; border-radius: 9px;
  background: transparent; color: var(--muted); }
.bnav-popup .nav-item.active { color: #2f6fd0; }
.bnav-popup .nav-ico { width: 20px; height: 20px; }
.bnav-popup .nav-ico svg { width: 20px; height: 20px; }
.bnav-popup .bnav-label { font-size: 14px; font-weight: 600; }

/* ===== 좁은 화면: 사이드바 → 하단 메뉴바 (가로폭 기준만 — 세로로 길어도 폭 넓으면 사이드바 유지) ===== */
@media (max-width: 750px) {
  /* 녹화 바: 좁아서 글씨가 잘리므로 글씨만 숨기고 flex 스페이서는 유지 → 점은 왼쪽, 컨트롤은 우측 정렬 */
  .tb-macro-txt { font-size: 0; }
  /* 정사각 버튼은 유지(개수만 reflow) — 그리드 컬럼 override 하지 않음 */
  .switcher-bottom { grid-template-columns: 1fr; }
  .page.media-page.active { grid-template-columns: 1fr; }
  /* SuperSource: 사이드바 숨는 시점엔 캔버스 클리핑만 방지. 설정은 2단 유지(폭이 늘어남), 1단은 더 좁아질 때(560px) */
  .ss-canvas-wrap { overflow: visible; }

  .sidebar { display: none; }    /* 좌측 메뉴 숨김 */
  .bottom-nav { display: flex; } /* 하단 메뉴 표시 */
  .bottom-bar { bottom: 72px; }  /* 편집 액션바를 하단 메뉴 위로 (겹침 방지) */

  /* 사이드바가 숨겨지는 시점: 모델명을 숨겨 자리 절약(연결상태만 표시).
     ＋카드는 topbar-right(margin-left:auto)로 우측 유지, ON/REC는 인라인 유지. */
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-left: 8px; }
  .tb-logo { padding-left: 8px; gap: 5px; margin-right: 2px; } /* 로고 간격 좁게(너무 붙지 않게 약간 띄움) */
  .topbar #atem-status { padding-left: 4px; max-width: none; } /* 데모/상태 왼쪽 간격 좁힘 */
  .topbar #atem-status .status-model { display: none; }
  .topbar #atem-status .status-short { display: inline; } /* 모바일: 짧은 라벨(연결/미연결/연결 중) */
  /* 헤더 알림 문구: 모바일에선 가운데 팝 애니메이션 없이 우측에 고정(특정도 맞춰 애니메이션 끔) */
  .topbar.tb-alert .tb-alert-msg {
    left: auto; right: 12px; transform: translateY(-50%); animation: none; /* top 은 기본/.is-phone 규칙에서 (폰만 노치 보정) */
  }
  /* ON·REC 둘 다 켜짐 → (모바일에서만, 헤더 좁음) 같은 자리 겹쳐 부드럽게 크로스페이드 */
  .tb-stats.both { display: grid; align-items: center; justify-items: start; }
  .tb-stats.both .tb-stat { grid-area: 1 / 1; animation: none; opacity: 0; transition: opacity 1s ease-in-out; }
  .tb-stats.both.phase-on .tb-on { opacity: 1; }
  .tb-stats.both.phase-rec .tb-rec { opacity: 1; }
  /* 크로스와 동시에 깜빡(펄스): 도트는 글로우, 글씨는 opacity — 같은 타이밍 */
  .tb-stats.both .tb-on .tb-stat-dot { animation: tbGlowOn 1.5s ease-in-out infinite; }
  .tb-stats.both .tb-rec .tb-stat-dot { animation: tbGlowRec 1.5s ease-in-out infinite; }
  .tb-stats.both .tb-stat-lbl { animation: tbPulse 1.5s ease-in-out infinite; }
}
/* 더 좁아지면: 하단바는 5개 + 더보기(+), 나머지는 팝업으로 */
@media (max-width: 560px) {
  .bottom-nav .nav-item:nth-child(n+7) { display: none; } /* 7번째 항목부터 숨김(6개까진 다 표시) */
  .bnav-more { display: flex; }
  /* 모바일 전체폭: 시계·구분선 제거(자리 더 절약) */
  .topbar .tb-clock, .topbar .tb-div { display: none; }
  /* SuperSource·일반 설정: 여기서 단일 컬럼(모바일 전체폭) — 사이드바는 750px에서 이미 숨겨짐 */
  .ss-settings { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .ss-settings .ss-leftcol2 { order: 1; }
  .ss-settings .ss-graphic { order: 2; }
  .ss-settings .ss-preset-panel { order: 3; }
  /* 팔레트 USK·트랜지션: 좁은 화면에선 스위처 버튼이 윗줄(우측 정렬), 선택 탭은 아랫줄을 고르게 채움 */
  .pal-usk-toprow .pal-key-acts { order: -1; }
  .pal-usk-toprow .pal-key-tabs,
  .pal-usk-toprow .pal-seg { flex: 1 1 100%; }
  .pal-usk-toprow .pal-key-tab { flex: 1; }
  /* 좁은 화면에선 M/E 버튼 가로 여백 축소 → 섹션 제목이 한 줄로 */
  .pal-sec-head .me-tab { min-width: 40px; padding: 6px 9px; }
  /* 모바일 위치/크기/마스크 X·Y 행: 행 라벨(위치/크기)을 윗줄로 올려 왼쪽 여백 제거
     → X·Y 셀이 좌측부터 시작해 입력칸이 넓어짐(큰 숫자도 안 잘림). 입력칸 크기는 줄이지 않음.
     (베이스 규칙이 파일 뒤쪽에 있어 .pal-card 한정으로 우선순위를 높임) */
  .pal-card .pal-pair { flex-wrap: wrap; gap: 4px 8px; }
  .pal-card .pal-prow-lbl { flex: 1 1 100%; width: auto; }
  /* 마스크 행은 라벨이 비어 있음 → 빈 줄 제거해 셀이 좌측부터(위치/크기와 정렬 일치) */
  .pal-card .pal-prow-lbl:empty { display: none; }
  /* 입력칸은 남는 공간을 채워 더 넓게(축소 아님) */
  .pal-pair .pal-numin { flex: 1 1 auto; width: auto; min-width: 0; }
  .pal-pair .pal-pcell .pal-stepwrap { flex: 1 1 auto; min-width: 0; }
  /* 슬라이더 행: 라벨 고정폭(88px)을 줄여 라벨~슬라이더 간격 축소 (색상/게인 등 모든 탭 공통) */
  .pal-card .pal-label { flex: 0 0 60px; }
  /* 색상 행(컬러 제너레이터/보더): 스와치 축소 + HSL 칸을 가변폭으로 균등 분배
     → 절대 넘치지 않아 H가 스와치를 덮는 겹침이 사라짐. (기존 flex-end는 넘칠 때 왼쪽으로 밀려 겹쳤음) */
  .pal-colorrow .pal-srcbtn.ss-color-btn { width: 44px; }
  .pal-hslgrp { gap: 8px; justify-content: flex-start; }
  .pal-hslcell { gap: 4px; flex: 1 1 0; min-width: 0; }
  .pal-hsllbl { font-size: 11px; }
  /* .pal-numin(1998행, 미디어쿼리보다 뒤·동일 specificity)가 width:58px로 덮어쓰므로 specificity를 높임 */
  .pal-hslgrp .pal-hslnum { width: auto; flex: 1 1 auto; min-width: 30px; }
}

/* 안드로이드 스플래시(검정+로고+이름) — native-android.js가 숨김 */
#na-splash { position: fixed; inset: 0; z-index: 9999; background: #0a0a0c;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: opacity 0.5s ease; }
#na-splash.na-hide { opacity: 0; pointer-events: none; }
/* CastPad 워드마크 스플래시(4-card 애니 대체): 검정 + 가운데 워드마크. 종료 시(na-hide) Cast 왼쪽 / Pad 오른쪽으로 살짝 갈라지며 페이드 → 메인 오버랩 */
.na-wordmark { display: flex; align-items: center; height: 120px; opacity: 0; transition: opacity 0.3s ease; }
#na-splash.na-go .na-wordmark { opacity: 1; }   /* 검정 안정 후(첫 페인트+rAF×2+130ms) 페이드인 → 검정→로고 깜빡임 제거 */
html.na-skip-splash .na-wordmark { opacity: 1; transition: none; } /* :3000은 부팅셸서 이미 봤으니 즉시(재페이드 없음) */
.na-wordmark svg { height: 100%; width: auto; display: block; }
.na-wordmark .na-cast { fill: #4a9eff; }   /* Cast = 파랑 */
.na-wordmark .na-pad  { fill: #fff; }       /* Pad = 흰색 */
.na-wordmark .na-cast, .na-wordmark .na-pad { transition: transform 0.5s cubic-bezier(.4,0,.2,1); will-change: transform; }
#na-splash.na-hide .na-cast { transform: translateX(-20px); }
#na-splash.na-hide .na-pad  { transform: translateX(20px); }

/* 안드로이드 커스텀 종료 확인 팝업 */
.na-exit-bg { position: fixed; inset: 0; z-index: 10000; background: rgba(8,8,12,0.34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; }
.na-exit { background: #1b1e23; border: 1px solid #2b3038;
  border-radius: 16px; padding: 22px 20px 16px; width: 80%; max-width: 320px; box-shadow: 0 16px 50px rgba(0,0,0,0.6); } /* addcard 팝업과 통일 */
.na-exit-msg { color: var(--text, #fff); font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 18px; }
.na-exit-acts { display: flex; gap: 10px; }
.na-exit-btn { flex: 1; height: 44px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--border, #2d2d35); }
.na-exit-cancel { background: var(--btn, #2a2a30); color: var(--text, #fff); }
.na-exit-ok { background: #c0392b; border-color: #e74c3c; color: #fff; }

/* 장비선택 모달 — IP 직접 입력 */
.dm-manual { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.dm-manual-row { display: flex; gap: 8px; margin-top: 6px; }
.dm-ip-input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg, #15151a); color: var(--text, #fff); font-size: 14px; }
.dm-ip-input:focus { outline: none; border-color: #4a9eff; }
.dm-ip-btn { padding: 0 16px; border-radius: 7px; border: 1px solid #2a5bd7; background: #2a5bd7;
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; flex: 0 0 auto; }
.dm-ip-btn:active { transform: scale(0.97); }
.dm-ip-msg { font-size: 12px; margin-top: 6px; min-height: 14px; }
.dm-ip-msg.err { color: #ef6b6b; } .dm-ip-msg.ok { color: #43c463; } .dm-ip-msg.info { color: var(--muted, #9a9aa6); }


/* AUX 출력 — 팝업 모달 */
.aux-modal { position: fixed; inset: 0; z-index: 2010; display: flex; align-items: center; justify-content: center; background: rgba(8,8,12,0.34); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.aux-modal-card { background: var(--panel, #1c1c22); border: 1px solid var(--border); border-radius: 12px;
  width: 92%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 14px 16px 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.aux-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.aux-modal-title { font-size: 15px; font-weight: 800; color: var(--text, #fff); }

/* 그래픽 Fill/Key 소스 선택 버튼(박스 입력처럼 팝업 picker 열림) */
.ss-art-srcbtn { width: 100%; min-width: 0; text-align: left; padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--btn, #2a2a30); color: var(--text, #fff);
  font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-art-srcbtn:hover { border-color: #4a9eff; }
.ss-art-srcbtn:disabled { opacity: 0.45; cursor: default; }
/* 보더 색 스와치 버튼 — 클릭 시 커스텀 색상 피커 오픈 */
.ss-color-btn { width: 64px; height: 28px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.28);
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); flex: 0 0 auto; }
.ss-color-btn:disabled { opacity: 0.45; cursor: default; }

/* 카드 설정 팝업(addcard-popup) 전용 블러 백드롭 — .db-popup의 transform이 backdrop-filter 기준을
   가두므로 가상요소로는 페이지가 안 흐려진다. body 직속 별도 요소(#addcard-backdrop)를 두고,
   팝업이 display:flex일 때만 :has()로 표시. 블러는 다른 팝업(7px)의 반(3.5px). z-index는 팝업(1200)의 바로 아래. */
#addcard-backdrop { display: none; position: fixed; inset: 0; z-index: 1199;
  background: rgba(8,8,12,0.16); backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); }
body:has(#addcard-popup[style*="flex"]) #addcard-backdrop { display: block; }

/* 커스텀 색상 피커 (colorpicker.js) — 네이티브 input[type=color] 대체. 투명 오버레이(블러X) → 뒤 캔버스 라이브 프리뷰가 보임 */
.cp-overlay { position: fixed; inset: 0; z-index: 3000; }
.cp-panel { position: absolute; width: 268px; background: #1c1c22; border: 1px solid #34343c;
  border-radius: 14px; padding: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.6); touch-action: none;
  display: flex; flex-direction: column; gap: 10px; }
.cp-sv { position: relative; width: 100%; height: 150px; border-radius: 8px; overflow: hidden;
  cursor: crosshair; touch-action: none; }
.cp-sv::before, .cp-sv::after { content: ''; position: absolute; inset: 0; }
.cp-sv::before { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cp-sv::after { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.cp-sv-cur { position: absolute; width: 16px; height: 16px; border-radius: 50%; z-index: 1;
  transform: translate(-50%, -50%); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.6); pointer-events: none; }
.cp-hue { position: relative; width: 100%; height: 20px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cp-hue-cur { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); pointer-events: none; }
.cp-row { display: flex; align-items: center; gap: 8px; }
.cp-preview { width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.18); }
.cp-hex { flex: 1 1 auto; min-width: 0; background: #111116; border: 1px solid #34343c; border-radius: 7px;
  color: #fff; font-size: 13px; font-family: ui-monospace, monospace; padding: 7px 8px; }
/* 아템식 HSL 값 — 읽기전용 한 칸 표시(클릭/키보드 없음). 색 변경은 2D/슬라이더/프리셋으로 */
.cp-hslview { flex: 1 1 auto; min-width: 0; background: #111116; border: 1px solid #34343c; border-radius: 7px;
  color: #e8e8ee; font-size: 12px; font-family: ui-monospace, monospace; padding: 7px 6px;
  text-align: center; white-space: nowrap; overflow: hidden; user-select: none; -webkit-user-select: none; }
.cp-done { flex: 0 0 auto; background: #6d3fb0; border: none; border-radius: 7px; color: #fff;
  font-size: 13px; font-weight: 700; padding: 7px 14px; cursor: pointer; }
.cp-done:active { background: #5b3494; }
.cp-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cp-sw { aspect-ratio: 1/1; border-radius: 6px; border: 1px solid rgba(255,255,255,0.16); cursor: pointer; padding: 0; }
.cp-sw:active { transform: scale(0.92); }

/* ===== 팔레트(Palettes) 페이지 ===== */
.palettes-page.active { display: block; overflow-y: auto; }
/* 팔레트 전체폭 2열 — 왼쪽(USK·컬러) / 오른쪽(트랜지션·DSK). 각 열은 섹션 세로 스택 */
#pal-root { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } /* 여백은 .page 10px 패딩으로 통일 */
.pal-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* 슈퍼소스 카드 간격(12px)과 통일 */
@media (max-width: 1100px) { #pal-root { grid-template-columns: 1fr; } } /* 1100px부터 1열 */
/* 접이식 섹션 */
/* 통일 카드 — 변수(--ucard-*)만 바꾸면 오디오·미디어·슈퍼소스·팔레트 전부 일괄 변경 */
.ucard, .pal-section { background: var(--ucard-bg); border: 1px solid var(--ucard-line); border-radius: var(--ucard-radius); box-shadow: var(--ucard-shadow); }
.pal-section { overflow: hidden; }
.pal-sec-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: transparent; cursor: pointer; min-height: 50px; } /* 좌우 12=내용(pal-sec-body)과 동일, 두께 통일 */
.pal-sec-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none;
  color: var(--text); font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; text-align: left; padding: 0; }
.pal-sec-head:hover { background: rgba(255,255,255,0.04); border-radius: 8px; }
.pal-sec-title { white-space: nowrap; color: #4a9eff; } /* 섹션 제목 파란 글씨로 구분 */
/* 트랜지션·USK 공통: me-tabs 직접 자식 → 우측 정렬 */
.pal-sec-head > .me-tabs { margin-left: auto; border-radius: 8px; padding: 3px; }
.pal-sec-head .me-tab { min-width: 52px; padding: 6px 16px; font-size: 12px; border-radius: 6px; }
/* pal-sec-head: 좁아지면 extras 아래로 줄 바꿈(오른쪽 정렬) */
.pal-sec-head { flex-wrap: wrap; row-gap: 6px; }
.pal-caret { display: inline-block; transition: transform .15s; color: #4a9eff; } /* 제목과 같은 파랑 */
.pal-section:not(.collapsed) .pal-caret { transform: rotate(90deg); }
.pal-sec-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; } /* 헤더 아래 10px 여백 */
/* DSK 여러 개일 때 카드 사이 구분선 + 위/아래 여백 */
.pal-dsk-card:not(:first-child) { border-top: 1px solid var(--ucard-line); margin-top: 5px; padding-top: 14px; }
/* 키타입/스타일 세그먼트 */
.pal-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.pal-seg-btn { flex: 1; min-width: 60px; padding: 8px 6px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--btn); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
/* lit = 장비에서 현재 켜진(다음 트랜지션) 스타일 → 항상 진한 노랑 배경 */
.pal-seg-btn.lit { background: #574918; border-color: #d9b300; color: #ffe04d; }
/* 키어 선택(좌) + 액션 버튼(우) 한 줄 */
.pal-usk-toprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px; }
/* 키어 탭 — 좌측 정렬, 넓게 늘이지 않고 내용 폭만. 높이는 트랜지션 버튼과 동일 */
.pal-key-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.pal-key-tab { min-width: 52px; padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--btn); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; position: relative; }
/* 온에어 = 항상 진한 빨강 배경 */
.pal-key-tab.onair { background: #d6303a; border-color: #d6303a; color: #000; } /* 온에어=솔리드 빨강(테두리·배경 같은 색)+검은 글씨. 1px 테두리라 옆 버튼 안 밀림 */
/* 선택 = 맨 외곽의 두꺼운 파랑 테두리 — lit/onair 보다 뒤에 두어 테두리색 항상 우선 (위/아래 통일) */
.pal-seg-btn.on, .pal-key-tab.on { border-color: #3f8bd6; box-shadow: inset 0 0 0 2px #3f8bd6; } /* 파랑 3px띠 = 테두리두께 고정(레이아웃 불변) */
/* 액션 버튼(BKGD·선택 KEY·ON AIR) — 우측 정렬, 스위처 keyer-btn 정사각 스타일 */
.pal-key-acts { display: flex; gap: 5px; margin-left: auto; }
.pal-key-acts .keyer-btn { width: 52px; aspect-ratio: auto; height: 46px; font-size: 11px; font-weight: 900; letter-spacing: 0.2px; line-height: 1.1; }
/* 트랜지션 액션(PREV/적용/AUTO) — 탭 위, 우측 정렬(우측 여백=탭과 동일) */
.pal-trans-acts { align-self: flex-end; margin-bottom: 6px; }
/* 현재 장비 트랜지션 스타일(노란불) 탭 — 배경·글씨만 노랑(테두리 등 기존대로) */
.pal-type-tabs .ss-tab.lit { background: var(--key-yellow); color: #2a2200; }              /* 현재 스타일=선명한 노랑+검은 글씨(상단 MIX 버튼과 동일) */
.pal-type-tabs .ss-tab.lit.active { background: var(--key-yellow); color: #2a2200; }       /* 보는 탭이면서 현재 스타일 — 노랑 유지(파랑 상단줄은 .active 에서) */
/* WIPE 방향(정/역 버튼) + 플립플롭(토글) 한 줄 — 위/아래 구분선 + 여백 */
/* gap 10px = .pal-row 과 동일 → 라벨↔seg 정렬이 다른 행과 일치. seg↔플립플롭 분리는 ss-opt margin 으로 */
.pal-wipe-dir { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; }
.pal-wipe-dir .ss-opt { margin-left: 12px; }
.pal-dve-dir { border-top: none; border-bottom: none; padding: 0; } /* DVE 방향행: 구분선은 효과 위 pal-divider로 분리 */
/* DVE 스타일 그리드(푸시/스퀴즈 8방향) — 페이지 헤더 + 3×3, 사각형+굵은 화살표 */
.pal-dvegrid-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.pal-dvegrid-arrow { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 6px; }
.pal-dvegrid-arrow:hover { color: var(--text); }
.pal-dvegrid-title { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 60px; text-align: center; }
/* DVE 셀(100:46) — aspect-ratio·padding% 가 iOS WebKit 그리드에서 불안정 → 고정 행높이로 확실하게.
   grid-auto-rows 로 셀 높이를 직접 주면 셀에 명확한 높이가 생겨 svg(height:100%)가 채워짐. */
/* width:100% 필수 — 없으면 그리드가 shrink-to-fit 돼 1fr 컬럼이 0으로 붕괴(셀이 세로막대로 보임) */
/* 고정 컬럼 폭 — 1fr/width:100%는 2열 그리드 등 컨테이너에서 폭 해석이 불안정해 collapse(세로막대/사라짐).
   고정 px + justify-content:center 면 어떤 컨텍스트에서도 셀 크기 보장. */
.pal-dvegrid { display: grid; grid-template-columns: repeat(3, 106px); grid-auto-rows: 50px; gap: 4px; justify-content: center; }
.pal-paticon.pal-dvegrid-cell { height: auto; padding: 1px; } /* base 의 height:0/padding-bottom 해제 — 높이는 그리드 행이 결정. 패딩 줄여 아이콘 크게 */
.pal-dvegrid-cell svg { display: block; position: static; inset: auto; top: auto; left: auto; width: 100%; height: 100%; }
.pal-dvegrid-empty { height: auto; padding: 0; }
.pal-effect-btn { width: 46px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } /* 스타일은 .pal-dir-btn 상속, 크기만 지정 */
.pal-dir-btn.pal-effect-btn svg { width: 26px; height: 26px; } /* 효과 아이콘은 더 크게(방향 svg 규칙보다 우선) */
.pal-effwrap { display: flex; flex-direction: column; gap: 8px; } /* 감싼 행들도 pal-card와 같은 간격 */
.pal-divider { height: 1px; background: var(--border); }
.pal-dir-group { display: flex; align-items: center; gap: 8px; }
/* 방향 버튼 — 붙은 세그먼트, 패턴 버튼처럼 gradient + 눌리면 주황·오목, 화살표 크게(두껍게) */
/* 세그먼트를 고정폭 div 로(iOS가 버튼 width 는 무시해도 div width 는 존중) + 안의 버튼 2개를 flex:1 로 반반.
   이래야 두 번째 버튼이 안 잘림(iOS 버튼 flex 사이즈 버그 우회). */
.pal-dir-seg { display: inline-flex; border: 1px solid #14141a; border-radius: 6px; overflow: hidden; }
/* 방향(▶◀) seg(버튼2개): 고정폭 96px div + 버튼 flex:1 반반(iOS 버튼 width 무시 우회).
   dir-group 래퍼 제거(평탄화)해서 seg 가 .pal-wipe-dir 직속 → 순서대로 배치되어 플립플롭과 안 겹침. 효과 seg(버튼1개)는 제외. */
.pal-wipe-dir .pal-dir-seg { display: flex; width: 96px; flex: 0 0 96px; }
.pal-wipe-dir .pal-dir-seg .pal-dir-btn { flex: 1 1 0; min-width: 0; width: auto; }
.pal-dir-btn { width: 48px; height: 34px; border: none; border-radius: 0; background: linear-gradient(180deg, #2a2a30, #1e1e23); color: var(--muted); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.pal-dir-btn svg { width: 20px; height: 20px; }
.pal-dir-btn + .pal-dir-btn { border-left: 1px solid #14141a; }
.pal-dir-btn.on { color: #e8922a; background: linear-gradient(180deg, #18181d, #121216); box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); }
/* DSK 길이 행: 길이(여백 채움) + TIE/ON AIR/AUTO */
.pal-dsk-raterow { display: flex; align-items: stretch; gap: 6px; }
.pal-dsk-raterow > .pal-row { flex: 1; min-width: 0; align-items: center; }
.pal-dsk-act { width: 50px; aspect-ratio: auto; height: auto; flex: 0 0 auto; font-size: 11px; font-weight: 900; line-height: 1.1; }
/* 카드 + 행 */
.pal-card { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pal-card-head { font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.pal-row { display: flex; align-items: center; gap: 10px; }
.pal-label { flex: 0 0 88px; font-size: 12.5px; color: var(--muted); }
.pal-slider { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; }
.pal-slider input[type=range] { flex: 1; min-width: 0; accent-color: #3f8bd6; }
.pal-num { flex: 0 0 56px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: #c7cad2; }
.pal-select { flex: 1; min-width: 0; padding: 8px 9px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--btn); color: var(--text); font-size: 12.5px; }
.pal-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.pal-toggle { padding: 8px 12px; border-radius: 7px; border: 1px solid var(--border); background: var(--btn);
  color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.pal-toggle.on { background: #28a878; border-color: #28a878; color: #fff; }
.pal-swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); }
/* 플라이 키프레임 (저장 A/B · 실행 A/B/Full) */
.pal-kf { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pal-kf-lbl { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 64px; }
.pal-kf-btn { min-width: 40px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--btn); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.pal-kf-btn:active { background: #2a2e36; }
.pal-kf-btn.on { background: #28a878; border-color: #28a878; color: #fff; }       /* 키프레임 저장됨 */
.pal-kf-btn:disabled, .pal-kf-btn.pal-disabled { opacity: 0.4; cursor: default; } /* 미저장 → Run To 비활성 */
/* 길이(rate) 그룹 — 우측 정렬 */
.pal-lengrp { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pal-lengrp .pal-kf-lbl { min-width: auto; }
/* USK 타입 탭 (루마/크로마/패턴/DVE) — 크롬 탭처럼 카드와 한 몸:
   탭 높이 통일 + 간격 0(인접 테두리 1px 겹침) + 비활성 탭 하단선 = 카드 상단선(연속),
   활성 탭만 그 선을 카드색으로 덮어 끊고 카드와 이어짐 */
.pal-type-tabs { gap: 0; margin: 2px 0 0; }
.pal-type-tabs .ss-tab { flex: 1; min-height: 34px; padding: 0 14px; font-size: 12.5px;
  border-radius: 7px 7px 0 0; position: relative; z-index: 1; }
.pal-type-tabs .ss-tab + .ss-tab { margin-left: -1px; }              /* 인접 세로 테두리 1px로 겹침 */
.pal-type-tabs .ss-tab:not(.active) { border-bottom: 1px solid var(--border); box-shadow: none; } /* 선반(shelf) */
.pal-type-tabs .ss-tab.active { min-height: 38px; z-index: 2; background: var(--ucard-bg);
  border-bottom: 1px solid var(--ucard-bg); box-shadow: inset 0 4px 0 #2a5bd7; }  /* 상단 파랑 줄 4px + 그만큼(34→38) 위로 솟음(바닥정렬이라 위로 자람) */
/* 카드: 부모 gap(10px)+1px 상쇄해 탭과 붙임. 카드 상단선이 비활성 탭 하단선과 연속, 활성 탭 아래만 끊김 */
.pal-type-tabs + .pal-card { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* 통합 필드: 슬라이더 + 값입력 + 스테퍼 */
.pal-field { display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0; }
.pal-fslider { flex: 1 1 auto; min-width: 40px; }
.pal-step { width: 26px; min-height: 30px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--border);
  background: var(--btn); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; padding: 0; }
.pal-step:active { background: #2a2e36; }
.pal-numin { width: 58px; flex: 0 0 auto; min-height: 30px; text-align: center; background: #111116;
  border: 1px solid var(--border); border-radius: 6px; color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pal-numin::-webkit-outer-spin-button, .pal-numin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pal-stepwrap { display: flex; align-items: center; gap: 4px; }
/* 활성 토글 = 주황/회색 점 헤더 */
.pal-dot-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 4px; margin-top: 6px;
  background: none; border: none; border-top: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pal-dot { width: 11px; height: 11px; border-radius: 50%; background: #555; flex: 0 0 auto; }
.pal-dot-head.on .pal-dot { background: #e8922a; box-shadow: 0 0 6px rgba(232,146,42,0.6); }
/* 두 칸 한 줄 (상/하, 좌/우, X/Y) */
.pal-pair { display: flex; align-items: center; gap: 10px; }
.pal-pcell { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.pal-plabel { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 16px; }
.pal-link { width: 30px; min-height: 30px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--border);
  background: var(--btn); cursor: pointer; padding: 0; font-size: 13px; }
.pal-link.on { background: #28527a; border-color: #4a83c0; }
/* 축소 소멸 3x3 방향 그리드 */
.pal-dirgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 4px; }
.pal-dirbtn { min-height: 44px; border-radius: 7px; border: 1px solid var(--border); background: var(--btn);
  color: var(--text); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.pal-dirbtn svg { display: block; }
.pal-dirbtn:active { background: #2a2e36; }
/* 행라벨/가운데(링크) 고정슬롯 → 마스크·위치·크기 X/Y 정렬 통일 */
.pal-prow-lbl { width: 88px; flex: 0 0 auto; font-size: 12px; color: var(--muted); } /* 일반 행 라벨(88px)과 동일 → 위치 X가 슬라이더 시작과 정렬 */
.pal-mid { width: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } /* X/Y 사이 고정슬롯(링크 등) */
.pal-pair .pal-plabel { width: 14px; min-width: 14px; text-align: center; }
.pal-pcell .pal-stepwrap { flex: 1 1 auto; }
/* 회전 = 비활성 표시 (회전 [box] × [N°]) */
.pal-disabled { opacity: 0.55; pointer-events: none; } /* 비활성 — 회색 + 클릭 차단 */
/* DVE 프리셋(PiP 4모서리 + 좌/우 절반) — 16:9 아이콘 버튼 6개 + 애니메이션 토글 */
.pal-dve-presetwrap { margin-bottom: 8px; }
.pal-dve-presethead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pal-dve-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
/* 애니 진행 중 — 클릭한 버튼만 밝게, 나머지는 흐리게 + 입력 차단 */
.pal-dve-presets.pal-dve-busy { pointer-events: none; }
.pal-dve-busy .pal-dve-preset { opacity: 0.4; transition: opacity .12s; }
.pal-dve-busy .pal-dve-preset.pal-dve-active { opacity: 1; }
.pal-dve-preset { aspect-ratio: 16 / 9; padding: 0; border-radius: 4px; border: none; background: var(--btn); cursor: pointer; overflow: hidden; box-sizing: border-box; }
.pal-dve-preset:active { filter: brightness(1.3); }
.pal-dve-preset svg { display: block; width: 100%; height: 100%; }
/* 빈 스냅칸 — CSS 점선 테두리(모서리까지 이어짐) */
.pal-dve-snap-empty { border: 1.5px dashed #8a93a1; }
.pal-dve-snaphint { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 6px; text-align: right; opacity: 0.8; }
/* 스내핑 가이드선(중앙 수직/수평) — 드래그 중 중앙 스냅 시 녹색 표시 */
.pal-dve-guide { position: absolute; background: #36c062; opacity: 0; pointer-events: none; transition: opacity .07s; z-index: 6; }
.pal-dve-guide-v { left: 50%; top: 0; width: 1px; height: 100%; margin-left: -0.5px; }
.pal-dve-guide-h { top: 50%; left: 0; height: 1px; width: 100%; margin-top: -0.5px; }
.pal-dve-guide.show { opacity: 0.85; box-shadow: 0 0 4px #36c062; }
/* DVE 편집 캔버스(16:9) + 박스 */
.pal-dve-canvas { position: relative; aspect-ratio: 16 / 9; background: #0e0e12; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; margin-bottom: 8px; touch-action: none;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 12.5% 16.667%; }
.pal-dve-box { position: absolute; border: 2px dashed rgba(42,91,215,0.7); background: transparent; box-sizing: border-box;
  cursor: grab; touch-action: none; user-select: none; }
.pal-dve-box:active { cursor: grabbing; }
/* 마스크 적용된 '보이는 영역' — 박스 안쪽, 소스명 표시 */
.pal-dve-fill { position: absolute; background: rgba(42,91,215,0.28); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff;
  overflow: hidden; text-align: center; padding: 2px; pointer-events: none; }
/* 리사이즈(ss-rz)·크롭(ss-crophandle) 핸들은 슈퍼소스 스타일 재사용. fill 안 크롭 핸들은 클릭 가능하게 */
.pal-dve-fill .ss-crophandle { pointer-events: auto; }
.pal-dve-box > .ss-rz { z-index: 5; }
/* DVE는 모든 모서리가 같은 동작(중심 고정)이라 색도 통일 — br도 청록 */
.pal-dve-box .ss-rz-br::before, .pal-dve-box .ss-rz-br::after { background: #22d3ee; }
/* DVE 그림자 광원 dial — 원 안 점을 옮겨 각도/높이 설정 */
.pal-shadow-dial { position: relative; width: 108px; height: 108px; margin: 4px auto 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #30303a, #15151a); border: 1px solid var(--border); touch-action: none; cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.pal-shadow-sun { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 15px; color: #7a7a86; pointer-events: none; }
.pal-shadow-dot { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #e8922a; border: 2px solid #fff;
  transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(232,146,42,0.7); pointer-events: none; }
/* 패턴 아이콘 그리드 (6×3) — 버튼 한 겹(2중 라인 없음). 기본 볼록 / 누르면·선택되면 들어간 느낌 */
.pal-patgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 2px;
  align-items: start; } /* stretch면 행높이에 맞춰 세로로 늘어나 버튼이 찌그러짐 → start로 aspect-ratio가 높이 결정 */
/* 정사각: aspect-ratio 가 iOS WebKit <button> 에서 불안정 → padding-bottom 비율 트릭(모든 브라우저 보장).
   height:0 + padding-bottom:100%(=너비의 100%) → 정사각. 내부 SVG는 absolute 로 채움. */
.pal-paticon { position: relative; width: 100%; height: 0; padding: 0 0 100% 0; border-radius: 6px; border: 1px solid #14141a;
  background: linear-gradient(180deg, #34343d, #25252c); color: #c6c6d0; cursor: pointer; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.45); }
.pal-paticon:active { background: linear-gradient(180deg, #1a1a1f, #222229);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); }
.pal-paticon.on { color: #e8922a; background: linear-gradient(180deg, #18181d, #121216);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7); }       /* 선택: 패턴 색만 주황, 바탕 진하게 + 들어감 */
.pal-paticon svg { display: block; position: absolute; top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.pal-rotwrap { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pal-rotn { width: 42px; flex: 0 0 auto; }
.pal-rotwrap .pal-stepwrap { flex: 1 1 auto; }
.pal-axis { color: var(--muted); font-size: 12.5px; flex: 0 0 auto; }
.pal-numin:disabled { background: #16181d; color: #777; cursor: default; }
/* 축소 소멸 가운데 2버튼 + 실행 피드백 */
.pal-dircenter { display: flex; gap: 4px; }
.pal-dirbtn.pal-dirc { flex: 1 1 0; min-width: 0; }
.pal-dirbtn.running, .pal-kf-btn.running { background: #2a5bd7; border-color: #4a83e0; color: #fff; }
.pal-empty { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }
/* 고급 크로마 — 섹션 소제목 + 리셋 */
.pal-subhead { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.pal-subhead-lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; }
.pal-reset-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--border); background: var(--btn); color: var(--muted); cursor: pointer; }
.pal-reset-btn:hover { color: var(--text); }
.pal-reset-btn:active { background: #2a2e36; }
/* 고급 크로마 — 크로마샘플 토글 + 샘플색 + 미리보기 한 줄 */
.pal-sample-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pal-sample-toprow .pal-dot-head { flex: 0 0 auto; width: auto; margin-top: 0; }
.pal-sample-headright { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.pal-sample-sw { width: 44px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.3); flex: 0 0 auto; }
.pal-sample-wrap { display: flex; gap: 8px; align-items: stretch; }
.pal-sample-pad { position: relative; flex: 1 1 auto; aspect-ratio: 16/9; background: #0e0e12; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden; touch-action: none; cursor: crosshair;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 25% 33.333%; }
.pal-sample-box { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1/1; border: 2px solid #ffcc00;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.6); pointer-events: none; }
.pal-sample-size { writing-mode: vertical-lr; direction: rtl; width: 26px; flex: 0 0 auto; padding: 0; } /* 위=큰박스(max), 아래=작은박스(min) — ATEM SC 동일 */