/* ═══════════════════════════════════════════════
   AI 광고 영상 디렉터 — 다크 Apple 디자인 시스템
   ═══════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────── */
:root {
  --bg:         #0C0E0F;
  --nav-bg:     #0E0E11;
  --surface-1:  #1C1C1E;
  --surface-2:  #2C2C2E;
  --surface-3:  #3A3A3C;
  --border:     rgba(255,255,255,0.10);
  --border-str: rgba(255,255,255,0.20);
  --fg:         #FFFFFF;
  --fg-sec:     #EBEBF5;
  --fg-muted:   #8E8E93;
  --fg-dis:     #636366;
  --accent:     #FFFFFF;
  --accent-dim: rgba(255,255,255,0.14);
  --accent-bdr: rgba(255,255,255,0.45);
  --accent-ink: #000000;  /* accent 배경 위 텍스트 (흰 배경엔 검정) */
  /* ── 포인트 컬러(태그·네비 활성 표시 전용) — 개선.md: #FF5F3B. 액션 버튼은 모노톤(--accent) 유지 ── */
  --point:      #FF5F3B;
  --point-deep: #E14A28;
  --point-ink:  #1c1c1e;  /* 주황 배경 위 텍스트(가독 위해 짙은 회색) */
  /* §F 색상 규칙: 유채색 금지. 빨강(--red)은 에러·위험 전용. 성공/완료/편집 등 나머지 상태는 전부 모노톤. */
  --red:        #FF453A;  /* 에러·위험(destructive) 전용 */
  /* 아래 3개는 구버전 유채색 상태 토큰 — §F에 따라 모노톤으로 중화(변수명은 호환 위해 유지) */
  --green:      #FFFFFF;  /* 구 성공색 → 모노톤(완료는 무채색 + 체크 아이콘으로 표현) */
  --yellow:     #EBEBF5;  /* 구 경고색 → 모노톤 */
  --purple:     #EBEBF5;  /* 구 편집색 → 모노톤 */
  --sep:        rgba(255,255,255,0.06);
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-pill:9999px;
  --nav-w: 68px;
}

/* ─── RESET ──────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html,body { height:100%; overflow:hidden }
body {
  font-family: 'Google Sans', 'Google Sans Text', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.2px;
}
button { cursor:pointer; background:none; border:none; color:inherit; font:inherit }
input,textarea { font:inherit; color:inherit; background:none; border:none; outline:none }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:var(--r-pill) }

/* ─── APP LAYOUT ─────────────────────────────── */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.main-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   STEP NAV (좌측 72px 수직 내비게이션)
   ═══════════════════════════════════════════════ */
.step-nav {
  width: var(--nav-w);
  min-width: var(--nav-w);
  max-width: var(--nav-w);
  flex-shrink: 0;
  background: var(--nav-bg);
  border-right: 1px solid var(--border-str);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.nav-logo {
  width: var(--nav-w);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--sep);
  flex-shrink: 0;
}
.nav-logo svg { width: 22px; height: 22px }

/* 스텝 목록 */
.nav-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  gap: 2px;
  width: var(--nav-w);
}

/* 각 스텝 버튼 */
.step-btn {
  position: relative;
  width: var(--nav-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 4px;
  border-radius: 0;
  color: var(--fg-muted);
  transition: color 180ms ease, background 180ms ease;
}

/* 활성 왼쪽 바 */
.step-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: height 200ms ease;
}
.step-btn.current::before { height: 30px }

.step-btn:hover  { background: rgba(255,255,255,0.05); color: var(--fg-sec) }
.step-btn.current { color: var(--fg) }
.step-btn.done    { color: var(--fg-sec) }

/* 아이콘 칸 */
.step-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background 180ms, border-color 180ms;
  position: relative;
}
.step-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  flex-shrink: 0;
  display: block;
}
/* 현재 단계: 흰 배경 + 검정 아이콘 */
.step-btn.current .step-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
}
/* 완료 단계: 흰 테두리 강조 */
.step-btn.done .step-icon {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}

/* 레이블 */
.step-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  line-height: 1;
}

/* hover 툴팁 */
.step-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-3);
  color: var(--fg);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
  z-index: 100;
  border: 1px solid var(--border-str);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.step-btn:hover .step-tooltip { opacity: 1 }

/* 하단 원장 버튼 */
.nav-bottom {
  padding: 10px 0;
  border-top: 1px solid var(--sep);
  width: var(--nav-w);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.ledger-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted);
  font-size: 15px;
  transition: background 150ms, color 150ms;
}
.ledger-btn:hover { background: var(--surface-2); color: var(--fg) }


/* ═══════════════════════════════════════════════
   CHAT PANEL
   ═══════════════════════════════════════════════ */
/* (v2) .chat-panel 제거 — 좌측 채팅 컬럼 없음. 규칙은 호환 위해 무력화. */
.chat-panel { display: contents; }

/* 인터랙션 피드 — 워크스페이스 중앙 컬럼 안에서 자연 흐름(카드·선택지·진행) */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.chat-messages:empty { display: none; }

/* AI 말풍선 */
.msg { display:flex; flex-direction:column; max-width:90% }
.msg.ai  { align-self:flex-start }
.msg.user { align-self:flex-end }

.bubble {
  padding: 10px 13px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
  white-space: pre-wrap;
}
.msg.ai .bubble {
  background: var(--surface-2);
  color: var(--fg-sec);
  border-radius: 2px var(--r-md) var(--r-md) var(--r-md);
}
.msg.user .bubble {
  background: #FFFFFF;
  color: #1C1C1E;
  border-radius: var(--r-md) 2px var(--r-md) var(--r-md);
  font-weight: 500;
}

/* 타이핑 커서 */
.typing-cursor {
  display: inline-block;
  width: 2px; height: 14px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 0.7s step-end infinite;
}
@keyframes blink { 50% { opacity:0 } }

/* ─── 단계 안내 메시지 (Step Notice) ─────────── */
.step-notice {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 12px;
  margin: 2px 0;
  border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
}
.step-notice-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
  letter-spacing: -0.05px;
}
.notice-icon { font-size: 12px; flex-shrink: 0; margin-top: 1px }
.notice-status {
  font-size: 10px;
  color: var(--green);
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 600;
}

/* ─── 선택지 카드 (Choice Card) ──────────────── */
.choice-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 560px;       /* v2: 워크스페이스 폭에서 선택지 카드 가독성 */
  align-self: flex-start;
}
.choice-card-text {
  font-size: 14px;
  color: var(--fg-sec);
  line-height: 1.5;
}
.choice-card-sub {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
}
.choice-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.choice-btn {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-str);
  background: var(--surface-3);
  color: var(--fg-sec);
  font-size: 13px;
  transition: border-color 150ms, background 150ms, transform 80ms;
  letter-spacing: -0.05px;
}
.choice-btn:hover  { border-color:var(--accent); background:var(--accent-dim) }
.choice-btn:active { transform:scale(0.95) }
.choice-btn.chosen {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.choice-btn:disabled { opacity:.4; cursor:default; transform:none }
.choice-card.resolved { opacity:.65; pointer-events:none }

/* ─── 인테이크 카드 (Step 1 5챕터 다중 입력) ─── */
.intake-card {
  align-self: flex-start; max-width: 640px; width: 100%;  /* v2: 넓은 워크스페이스에서 폼 가독성 유지 */
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-bdr);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--border-str);
  margin: 4px 0 6px;
}
.intake-head { font-size: 15px; font-weight:600; color: var(--fg); letter-spacing: 0.2px; }
.intake-hint { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin-top: -8px; }
.intake-body { display: flex; flex-direction: column; gap: 13px; }
.intake-field { display: flex; flex-direction: column; gap: 7px; }
.intake-label { font-size: 11px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.3px; }
.intake-subhint { font-size: 11px; color: var(--fg-dis); line-height: 1.4; }
.intake-input, .intake-area {
  width: 100%; background: var(--surface-1);
  border: 1px solid var(--border-str); border-radius: var(--r-sm);
  color: var(--fg); font-size: 13px; padding: 9px 11px;
  font-family: inherit; transition: border-color 150ms;
}
.intake-input:focus, .intake-area:focus { outline: none; border-color: var(--accent); }
.intake-area { resize: vertical; min-height: 60px; line-height: 1.5; }
/* 세그먼트(단일 선택) */
.intake-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-seg-btn {
  padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border-str); background: var(--surface-1);
  color: var(--fg-sec); font-size: 12px;
  transition: border-color 150ms, background 150ms, transform 80ms;
}
.intake-seg-btn:hover { border-color: var(--accent); }
.intake-seg-btn:active { transform: scale(0.95); }
/* 선택 상태 = 주황 솔리드 채움, 테두리·글로우 없음(개선 요청) */
.intake-seg-btn.on { font-weight: 600; background: var(--point); color: #fff; border-color: var(--point); box-shadow: none; }
/* 멀티 칩 */
.intake-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-chip {
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-str); background: var(--surface-1);
  color: var(--fg-sec); font-size: 12px;
  transition: border-color 150ms, background 150ms, transform 80ms;
}
.intake-chip:hover { border-color: var(--accent); }
.intake-chip:active { transform: scale(0.95); }
.intake-chip.on { background: rgba(255,255,255,0.88); color: #1c1c1e; border-color: rgba(255,255,255,0.70); box-shadow: none; }
/* 맞춤 예측 선택지 칩(§G) — 자유입력란 위 추천 보기. 클릭 시 입력란에 채워짐 */
.intake-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.intake-suggest-chip {
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-str); background: transparent;
  color: var(--fg-sec); font-size: 12px;
  transition: border-color 150ms, background 150ms, color 150ms, transform 80ms;
}
.intake-suggest-chip::before { content: '＋ '; color: var(--fg-muted); }
.intake-suggest-chip:hover { border-color: var(--accent); color: var(--fg); }
.intake-suggest-chip:active { transform: scale(0.96); }
.intake-suggest-chip.on { background: rgba(255,255,255,0.88); color: #1c1c1e; border-color: rgba(255,255,255,0.70); box-shadow: none; }
.intake-suggest-chip.on::before { content: '✓ '; }
/* 업로드 — 설명문·미리보기·버튼을 한 그룹 박스로 묶어 위계화 */
.intake-upload-box {
  display: flex; flex-direction: column; gap: 10px;
}
.intake-upload-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.intake-upload-row { display: flex; align-items: center; gap: 10px; }
.intake-upload {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--border-str); background: var(--surface-2);
  color: var(--fg-sec); font-size: 12px;
  transition: border-color 150ms, background 150ms;
}
.intake-upload::before { content: '+'; font-size: 14px; line-height: 1; color: var(--fg-muted); }
.intake-upload:hover { border-color: var(--accent); background: var(--accent-dim); }
.intake-upload:hover::before { color: var(--accent); }
.intake-upload-status { font-size: 11px; color: var(--fg-muted); }
.intake-upload-status.filled { color: var(--green); }
/* 박스 안 미리보기: 박스 자체 gap이 간격을 담당하므로 여백 제거 */
.intake-upload-box .staged-strip { margin: 0; }
/* BGM 없음 토글 + 상세 박스 */
.intake-bgmnone {
  align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-str); background: var(--surface-1);
  color: var(--fg-muted); font-size: 12px; margin-bottom: 4px;
}
.intake-bgmnone.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.intake-bgmbox { display: flex; flex-direction: column; gap: 11px; transition: opacity 150ms; }
.intake-bgmbox .intake-field { gap: 6px; }
/* 제출 버튼 */
.intake-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
.intake-submit {
  padding: 9px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink); font-size: 13px; font-weight: 600;
  transition: transform 80ms, opacity 150ms;
}
.intake-submit:hover { opacity: 0.9; }
.intake-submit:active { transform: scale(0.96); }
.intake-card.resolved { opacity: .6; pointer-events: none; }

/* ─── BGM 전용 선택기 (바이브·스타일·에너지·템포) ─── */
.bgm-selector {
  align-self: flex-start; max-width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--accent-bdr);
  border-radius: var(--r-lg);
  padding: 16px;
  /* 음악을 위한 '하나의 과정'임을 나타내는 바깥 테두리 한 겹 */
  box-shadow: 0 0 0 4px var(--surface-1), 0 0 0 5px var(--border-str);
  margin: 4px 0 6px;
}
.bgm-head, .cam-head { font-size:13px; font-weight:600; color:var(--fg); letter-spacing:0.2px; }
.bgm-group { display:flex; flex-direction:column; gap:7px; }
.bgm-group-label { font-size:11px; font-weight:600; color:var(--fg-muted); letter-spacing:0.3px; }
.bgm-chips, .bgm-toggles { display:flex; flex-wrap:wrap; gap:6px; }
.bgm-chip {
  padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--border-str); background:var(--surface-1);
  color:var(--fg-sec); font-size:12px;
  transition: border-color 150ms, background 150ms, transform 80ms;
}
.bgm-chip:hover { border-color:var(--accent) }
.bgm-chip:active { transform:scale(0.95) }
.bgm-chip.on { background:var(--accent-dim); border-color:var(--accent); color:var(--accent) }
.bgm-toggle {
  flex:1; min-width:64px; padding:9px 10px;
  border-radius:var(--r-md); border:1px solid var(--border-str);
  background:var(--surface-1); color:var(--fg-sec); font-size:12px;
  transition: border-color 150ms, background 150ms;
}
.bgm-toggle.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600 }
.bgm-actions, .cam-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }
.bgm-skip, .cam-cancel {
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--border-str); background:transparent; color:var(--fg-muted); font-size:13px;
}
.bgm-confirm, .cam-confirm {
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:600;
}
.bgm-selector.resolved, .cam-tags.resolved { opacity:.6; pointer-events:none }

/* ─── 카메라 효과 태그 팔레트 (영상 수정 단계) ─── */
.cam-tags {
  align-self: flex-start; max-width: 100%;
  display:flex; flex-direction:column; gap:12px;
  background: var(--surface-2); border:1px solid var(--border-str);
  border-radius: var(--r-lg); padding: 16px;
}
.cam-hint { font-size:11px; color:var(--fg-muted); line-height:1.5; margin-top:-6px; }
.cam-group { display:flex; flex-direction:column; gap:7px; }
.cam-group-label { font-size:11px; font-weight:600; color:var(--fg-muted); }
.cam-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cam-chip {
  padding:6px 11px; border-radius:var(--r-pill);
  border:1px solid var(--border-str); background:var(--surface-1);
  color:var(--fg-sec); font-size:12px; font-family:monospace;
  transition: border-color 150ms, background 150ms, transform 80ms;
}
.cam-chip:hover { border-color:var(--accent) }
.cam-chip:active { transform:scale(0.95) }
.cam-chip.on { background:var(--accent-dim); border-color:var(--accent); color:var(--accent) }
.cam-adv-toggle {
  align-self:flex-start; font-size:12px; color:var(--fg-muted);
  background:transparent; border:none; text-decoration:underline; padding:2px 0; cursor:pointer;
}
.cam-advanced { display:flex; flex-direction:column; gap:12px; }

/* 씬 다중 선택 (구간 수정) */
.cam-scene-pick { display:flex; flex-direction:column; gap:7px; }
.cam-scene-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cam-scene-chip {
  position:relative; width:74px; height:46px; padding:0; overflow:hidden;
  border-radius:var(--r-md); border:1px solid var(--border-str); background:var(--surface-1);
  cursor:pointer; transition: border-color 150ms, transform 80ms;
}
.cam-scene-chip:hover  { border-color:var(--accent) }
.cam-scene-chip:active { transform:scale(0.95) }
.cam-scene-chip img { width:100%; height:100%; object-fit:cover; display:block; opacity:.7 }
.cam-scene-chip .cam-scene-num {
  position:absolute; left:0; right:0; bottom:0; padding:2px 4px;
  font-size:10px; font-weight:600; color:#fff; text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.7));
}
.cam-scene-chip.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset }
.cam-scene-chip.on img { opacity:1 }

/* ─── 에셋 칩 (Asset Chip) ───────────────────── */
.asset-chips { display:flex; flex-direction:column; gap:5px; align-self:flex-start; width:100% }
.asset-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--fg-sec);
}
.asset-thumb {
  width: 34px; height: 34px;
  border-radius: 5px;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0; overflow: hidden;
}
.asset-thumb img { width:100%; height:100%; object-fit:cover }
.asset-info { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.asset-name {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px;
}
.asset-tag {
  display: inline-flex;
  align-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-size: 10px;
  padding: 1px 8px;
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0;
}
.asset-remove {
  color: var(--fg-dis);
  font-size: 13px;
  flex-shrink: 0;
  padding: 3px 5px;
  border-radius: 4px;
}
.asset-remove:hover { color:var(--red); background:rgba(255,69,58,0.1) }

/* ─── 타이핑 인디케이터 ──────────────────────── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 13px;
  background: var(--surface-2);
  border-radius: 2px var(--r-md) var(--r-md) var(--r-md);
  align-self: flex-start;
}
.thinking-label {
  font-size: 11px;
  color: var(--fg-muted);
  margin-left: 3px;
  letter-spacing: -0.1px;
}

/* ─── 생성 진행 행 (스피너 + 문구) ───────────────── */
.generating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  align-self: flex-start;
  background: var(--surface-2);
  border-radius: 2px var(--r-md) var(--r-md) var(--r-md);
  font-size: 12px;
  color: var(--fg-muted);
}
.spinner {
  width: 13px; height: 13px;
  border: 2px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.generating-text { line-height: 1.4 }

/* ─── 생성 결과 이미지 ───────────────────────────── */
.result-image {
  align-self: flex-start;
  max-width: 92%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.result-image img { width: 100%; display: block }
.result-caption {
  font-size: 11px; color: var(--fg-muted);
  padding: 6px 10px; border-top: 1px solid var(--sep);
}
.dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fg-muted);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay:.18s }
.dot:nth-child(3) { animation-delay:.36s }
@keyframes dot-bounce {
  0%,60%,100% { transform:translateY(0); opacity:.4 }
  30%          { transform:translateY(-5px); opacity:1 }
}

/* ─── 채팅 입력바 ────────────────────────────── */
.chat-input-bar {
  flex-shrink: 0;
  width: 100%;
  max-width: 1100px;        /* v2: ws-col과 동일 폭으로 중앙 도킹 */
  margin: 0 auto;
  padding: 10px 20px 14px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* ─── 전송 전 첨부 미리보기 (스테이징) ─── */
.chat-staging { flex-shrink: 0; width: 100%; max-width: 1100px; margin: 0 auto; padding: 10px 20px 0; }
.staged-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.staged-thumb {
  position: relative; width: 56px; height: 56px;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border-str); background: var(--surface-1);
}
.staged-thumb img { width: 100%; height: 100%; object-fit: cover; }
.staged-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.staged-remove:hover { background: var(--red); }
.intake-field .staged-thumb { width: 64px; height: 64px; }
.chat-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: 8px 10px;
  transition: border-color 150ms;
  min-height: 42px;
}
.chat-input-wrap:focus-within { border-color:var(--accent) }
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-textarea {
  flex: 1;
  font-size: 14px;
  background: none;
  color: var(--fg);
  resize: none;
  overflow: hidden;
  max-height: 120px;
  line-height: 1.5;
}
.chat-textarea::placeholder { color:var(--fg-dis) }
.attach-btn {
  color: var(--fg-muted); flex-shrink: 0; padding: 3px;
  display: flex; align-items: center; justify-content: center;
}
.attach-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.attach-btn:hover { color:var(--fg) }
.send-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 150ms, transform 80ms, background 150ms;
}
.send-btn:hover  { opacity:.85 }
.send-btn:active { transform:scale(0.92) }
.send-btn:disabled { background:var(--surface-3); opacity:.5; cursor:default }
.send-btn.stop { background:var(--red); color:#fff }

/* 업로드 프리뷰 */
.upload-preview {
  flex-shrink: 0;
  padding: 0 12px 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preview-item {
  position: relative;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
}
.preview-item img { width:100%; height:100%; object-fit:cover }
.preview-item .preview-rm {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  font-size: 9px; color:#fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════
   STAGE CANVAS
   ═══════════════════════════════════════════════ */
.stage-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}
.canvas-header {
  flex-shrink: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--sep);
  gap: 10px;
}
.canvas-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* ─── 상단 진행 스테퍼 (§C · step2.png 스타일 · 모노톤) ─── */
.progress-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;       /* 헤더 우측에 작게 배치 */
}
.progress-stepper .ps-pill {
  width: 26px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  display: block;
}
.progress-stepper .ps-pill i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  /* §F: 유채색 금지 — 흰~회색 그라데이션 채움 */
  background: linear-gradient(90deg, var(--fg-muted), var(--fg));
  transition: width 320ms ease;
}
.progress-stepper .ps-pill.done i    { width: 100%; }
.progress-stepper .ps-pill.current i { width: 100%; opacity: .9; }
.progress-stepper .ps-pill.current {
  box-shadow: 0 0 0 1px var(--accent-bdr);
}
/* 생성 엔진 토글 (입력박스 안, 메시지 입력란 아래) — 라운드 pill 세그먼트 */
.engine-toggle {
  display: flex;
  align-items: center;
  width: fit-content;
}
.engine-toggle .engine-opt {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.engine-toggle .engine-opt:first-of-type { border-radius: 999px 0 0 999px; }
.engine-toggle .engine-opt:last-of-type  { border-radius: 0 999px 999px 0; border-left: none; }
.engine-toggle .engine-opt:hover { color: var(--fg); }
.engine-toggle .engine-opt.active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.canvas-body {
  flex: 1;
  overflow-y: auto;          /* v2: 단일 워크스페이스 스크롤 */
  position: relative;
}
/* 워크스페이스 중앙 컬럼 — 결과물(canvas-mode)과 인터랙션 피드(chat-messages)가 한 흐름으로 쌓인다 */
.ws-col {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.canvas-mode {                /* v2: absolute → 자연 흐름 블록 */
  display: none;
}
.canvas-mode.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* §B: 수집 단계 브리프 요약 패널은 상시 노출하지 않는다(최종 확인 팝업으로만).
   step1 콘텐츠는 인테이크 카드(피드)가 담당. 필드 span은 DOM에 남겨 updateBriefForm 안전. */
.canvas-mode[data-mode="1"] { display: none !important; }

/* ─── 브리프 폼 (Canvas 1) ────────────────────── */
.brief-section-label {
  font-size: 11px;
  font-weight:600;
  color: var(--fg-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.brief-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.brief-fields.full { grid-template-columns: 1fr }
/* 각 정보 = 카드형 행 */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color 200ms, background 200ms;
}
.form-field:has(.brief-val.filled) {
  background: var(--surface-2);
  border-color: var(--border-str);
}
.form-label {
  font-size: 11px;
  color: var(--fg-muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.brief-val {
  font-size: 14px;
  color: var(--fg-dis);
  display: block;
  line-height: 1.5;
  word-break: keep-all;
  transition: color 200ms;
}
.brief-val.filled {
  color: var(--fg);
  font-weight: 500;
}

/* 에셋 업로드 존 — 태그 + 큰 이미지 중심 */
.asset-zones { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.asset-zone {
  background: var(--surface-1);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  display: flex; flex-direction: column;
  gap: 9px; cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.asset-zone:hover { border-color:var(--accent) }
.asset-zone-tag {
  font-size:11px; background:var(--surface-3); color:var(--fg-sec);
  border-radius:var(--r-pill); padding:3px 10px; font-family:monospace; letter-spacing:0;
  align-self:flex-start;
}
.zone-empty {
  flex:1; min-height:84px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--fg-dis);
}
.asset-zone.has-files  { border-style:solid; border-color:var(--border-str) }
.asset-zone.has-files .zone-empty { display:none }
/* 채워졌을 때: 이미지를 크게 */
.zone-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.zone-thumbs.single { grid-template-columns:1fr }
.zone-thumb  {
  width:100%; aspect-ratio:1/1; border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-3); position:relative; cursor:zoom-in;
  transition: transform 120ms;
}
.zone-thumb:hover { transform:scale(1.02) }
.zone-thumb img    { width:100%; height:100%; object-fit:cover }
.zone-thumb-badge {
  position:absolute; bottom:4px; right:4px;
  background:rgba(0,0,0,.75); color:#fff;
  font-size:9px; padding:2px 6px; border-radius:var(--r-pill); font-family:monospace;
}
/* 에셋 수량 안내 문구 */
.asset-hint {
  font-size:11px; line-height:1.5; color:var(--fg-muted);
  margin:9px 0 2px; word-break:keep-all;
}
.asset-hint b { color:var(--fg-sec); font-weight:600; }
/* 썸네일 삭제(×) 버튼 — 우상단, 호버 시 노출 */
.zone-thumb-del {
  position:absolute; top:4px; right:4px;
  width:18px; height:18px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.7); color:#fff;
  border:none; border-radius:50%; cursor:pointer;
  opacity:0; transition:opacity 120ms, background 120ms;
}
.zone-thumb:hover .zone-thumb-del { opacity:1; }
.zone-thumb-del:hover { background:var(--red, #e5484d); }

/* ─── 브리프 최종 확인 팝업 ──────────────────── */
.brief-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 210;
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
}
.brief-modal-overlay.open { display: flex }
.brief-modal {
  width: 560px; max-width: 100%; max-height: 88vh;
  background: var(--surface-1);
  border: 1px solid var(--border-str);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  box-shadow: 0 16px 56px rgba(0,0,0,0.6);
  overflow: hidden;
}
.brief-modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 4px;
}
.brief-modal-title { font-size: 17px; font-weight:600; color: var(--fg) }
.brief-modal-sub { font-size: 12px; color: var(--fg-muted) }
.brief-modal-body {
  flex: 1; overflow-y: auto; padding: 18px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.bm-field { display: flex; flex-direction: column; gap: 5px }
.bm-field label {
  font-size: 11px; font-weight:600; color: var(--fg-muted);
  letter-spacing: 0.3px; text-transform: uppercase;
}
.bm-field input, .bm-field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: 14px; color: var(--fg);
  transition: border-color 150ms;
  width: 100%;
}
.bm-field input:focus, .bm-field textarea:focus { border-color: var(--accent) }
.bm-field textarea { resize: vertical; min-height: 60px; line-height: 1.5 }
.brief-modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--sep);
  display: flex; justify-content: flex-end; gap: 10px;
}
.bm-btn-ghost {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--fg-sec); font-size: 13px;
}
.bm-btn-ghost:hover { background: var(--surface-2) }
.bm-btn-primary {
  padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight:600;
}
.bm-btn-primary:hover { opacity: .88 }

/* ─── 이미지 확대 팝업 (라이트박스) ─────────────── */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}
.lightbox.open { display: flex }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-str);
}
.lightbox-close:hover { background: var(--surface-3) }

/* ══════════════════════════════════════════════
   편집 모달 (§H · 이미지·콘티·영상 공용 풀스크린)
   ══════════════════════════════════════════════ */
.edit-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 300;
  display: none;
  flex-direction: column;
}
.edit-modal.open { display: flex; }
.em-topbar {
  flex-shrink: 0; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--sep);
}
.em-tabs { display: flex; gap: 6px; }
.em-tab {
  font-size: 13px; font-weight: 600; color: var(--fg-muted);
  padding: 7px 16px; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.em-tab:hover { color: var(--fg); }
.em-tab.on { color: var(--fg); background: var(--surface-2); border-color: var(--border-str); }
.em-close {
  background: none; border: none; font-size: 20px; color: var(--fg-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px;
}
.em-close:hover { color: var(--fg); }

.em-body { flex: 1; overflow: hidden; position: relative; }
.em-pane { display: none; position: absolute; inset: 0; }
.em-pane.on { display: flex; }

/* Media 탭 */
.em-pane[data-pane="media"] { padding: 18px; gap: 14px; }
.em-main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.em-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden; position: relative;
}
.em-main img, .em-main video {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--r-md);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
/* 인-플레이스 재생성 로딩 오버레이 — 모달을 닫지 않고 그 자리에서 생성 */
.em-loading {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(12,12,14,0.72); backdrop-filter: blur(3px);
  color: var(--fg); font-size: 13px; font-weight: 600; border-radius: var(--r-md);
}
.em-loading .dots-loader .dot { width: 8px; height: 8px; }
/* 생성 중에는 닫기·전송·재생성·페이지 이동 비활성화 시각화 */
#editModal.em-busy #emClose,
#editModal.em-busy #emApply,
#editModal.em-busy #emSend,
#editModal.em-busy #emPromptRegen,
#editModal.em-busy #emPagePrev,
#editModal.em-busy #emPageNext { opacity: .4; pointer-events: none; }
/* 모달 내부 에러 배너 */
.em-error-banner {
  margin: 0 auto 8px; max-width: 760px; width: 100%;
  padding: 9px 13px; border-radius: var(--r-sm);
  background: rgba(255,90,90,0.12); border: 1px solid rgba(255,90,90,0.4);
  color: #ff9a9a; font-size: 12.5px; line-height: 1.4;
}
/* 스타일 프레임 타이틀 옆 엔진 토글 */
.style-frame-head-left { display: flex; align-items: center; gap: 10px; }
/* (…) 메뉴 */
.em-dots-wrap { position: absolute; top: 6px; right: 6px; z-index: 5; }
.em-dots {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.5); color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-str); backdrop-filter: blur(6px);
}
.em-dots:hover { background: rgba(0,0,0,0.7); }
.em-menu {
  position: absolute; top: 38px; right: 0;
  background: var(--surface-2); border: 1px solid var(--border-str);
  border-radius: var(--r-md); padding: 5px; min-width: 120px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.em-menu[hidden] { display: none; }
.em-menu button {
  text-align: left; font-size: 13px; color: var(--fg-sec);
  padding: 8px 11px; border-radius: var(--r-sm);
}
.em-menu button:hover { background: var(--surface-3); color: var(--fg); }
.em-menu button.danger:hover { background: rgba(255,69,58,.15); color: var(--red); }

/* 하단 인풋바 (인풋바.png 패키징) */
.em-inputbar {
  flex-shrink: 0; margin-top: 4px;
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border-str);
  border-radius: var(--r-lg); padding: 10px 12px;
  width: 100%;
}
.em-input {
  flex: 1; resize: none; max-height: 120px;
  font-size: 14px; color: var(--fg); line-height: 1.5;
}
.em-engine { display: flex; flex-shrink: 0; }
.em-eng-opt {
  font-size: 11px; font-weight: 600; padding: 4px 11px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--fg-muted);
}
.em-eng-opt:first-of-type { border-radius: 999px 0 0 999px; }
.em-eng-opt:last-of-type { border-radius: 0 999px 999px 0; border-left: none; }
.em-eng-opt.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.em-send {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
}
.em-send:hover { opacity: .88; }

/* 우측 히스토리 썸네일 */
.em-history {
  flex-shrink: 0; width: 96px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px;
}
.em-hist-thumb {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-sm);
  overflow: hidden; border: 1.5px solid var(--border);
  cursor: pointer; position: relative; background: var(--surface-2);
}
.em-hist-thumb img, .em-hist-thumb video { width: 100%; height: 100%; object-fit: cover; }
.em-hist-thumb:hover { border-color: var(--border-str); }
.em-hist-thumb.current { border-color: var(--accent); }
.em-hist-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 9px; text-align: center; padding: 2px;
  background: rgba(0,0,0,0.6); color: var(--fg-sec);
}

/* Prompt 탭 */
.em-pane[data-pane="prompt"] { padding: 24px; overflow-y: auto; justify-content: center; }
.em-prompt-col { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.em-prompt-meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--fg-muted);
}
.em-prompt-meta .em-meta-chip {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 11px; color: var(--fg-sec);
}
.em-prompt-area {
  width: 100%; min-height: 320px; resize: vertical;
  background: var(--surface-1); border: 1px solid var(--border-str);
  border-radius: var(--r-md); padding: 16px 18px;
  font-size: 13px; line-height: 1.8; color: var(--fg);
  font-family: -apple-system, system-ui, sans-serif;
}
.em-prompt-area:focus { border-color: var(--accent); }
.em-prompt-actions { display: flex; justify-content: flex-end; }
.em-prompt-regen {
  font-size: 13px; font-weight:600; padding: 9px 20px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.em-prompt-regen:hover { opacity: .88; }

/* ─── 캔버스 빈 상태 안내 ─────────────────────── */
.canvas-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 40px 20px;
  color: var(--fg-dis);
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* ─── 기획안 문서 카드 (오른쪽 패널) ───────────── */
.scenario-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.scenario-doc-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.scenario-doc-title {
  font-size: 15px; font-weight:600; color: var(--fg);
  margin-bottom: 8px;
}
.scenario-doc-body {
  font-size: 13.5px; color: var(--fg-sec); line-height: 1.8;
  white-space: pre-wrap; word-break: keep-all; letter-spacing: -0.1px;
}
.scenario-doc-card { box-shadow: rgba(0,0,0,0.25) 0 2px 10px; }

/* ─── 프롬프트 문서 뷰 (콘티/씬 프롬프트 + 번역) ── */
.prompt-doc {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prompt-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--sep);
}
.prompt-doc-title { font-size: 13px; font-weight:600; color: var(--fg) }
/* 기획안 선택 안내문 — 단계 타이틀이 아니라 보조 안내이므로 더 얇게 */
.scn-pick-hint { font-weight: 400; color: var(--fg-sec); }
/* 기획안 3종 위 섹션 타이틀(개선 요청) */
.scn-doc-heading { font-size: 16px; font-weight: 700; color: var(--fg); letter-spacing: -0.2px; }
/* 생성 전/중 플레이스홀더 — 어두운 캔버스에서도 보이도록 옅은 회색(씬·캐릭터 시트 공통) */
.scene-placeholder.scene-ph-dim,
.scene-placeholder.skeleton-shimmer,
.char-sheet-thumb.skeleton-shimmer { background: #3a3a40; }
.scene-ph-dim .scene-num { color: #9a9aa2; }
/* 콘티 프롬프트(시나리오) 내 PART → 시트 구분 소제목 */
.scn-conti-prompt .cp-part { font-size: 14.5px; font-weight: 800; color: var(--fg); margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--sep); }
.scn-conti-prompt .cp-part:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prompt-doc-translate {
  font-size: 12px; color: var(--accent-ink); background: var(--accent);
  border-radius: var(--r-pill); padding: 5px 13px; font-weight: 600;
}
.prompt-doc-translate:hover { opacity: .85 }
.prompt-doc-body {
  margin: 0; padding: 18px 20px;
  font-size: 13px; color: var(--fg-sec); line-height: 1.8; letter-spacing: -0.1px;
  white-space: pre-wrap; word-break: break-word;
  font-family: -apple-system, system-ui, sans-serif;
  max-height: 62vh; overflow-y: auto;
}
.prompt-doc-body.ko { color: var(--fg); line-height: 1.85; }
.prompt-doc-body.ko { color: var(--fg) }

/* ─── 기획안 카드 (Canvas 2) ──────────────────── */
.scenario-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color 150ms;
}
.scenario-card:hover { border-color:var(--border-str) }
.scenario-card.ssot  { border-color:var(--point); border-width:1.5px }
.scenario-head { display:flex; align-items:center; gap:10px }
.scenario-id {
  font-size:11px; font-weight:600; color:var(--fg-muted);
  letter-spacing:0.4px; text-transform:uppercase;
}
.scenario-title { font-size:15px; font-weight:600; color:var(--fg); flex:1 }
.ssot-badge {
  font-size:10px; background:var(--accent); color:var(--accent-ink);
  border-radius:var(--r-pill); padding:2px 8px; font-weight:600;
  letter-spacing:0; flex-shrink:0;
}
.scenario-meta { display:flex; flex-wrap:wrap; gap:6px }
.s-chip {
  font-size:11px; background:var(--surface-3); color:var(--fg-muted);
  border-radius:var(--r-pill); padding:2px 9px;
}
.scenario-beats { display:flex; flex-direction:column; gap:5px }
.beat-row { display:flex; align-items:baseline; gap:8px }
.beat-key {
  font-size:10px; font-weight:600; color:var(--fg-dis);
  letter-spacing:0.5px; text-transform:uppercase; min-width:36px;
}
.beat-text { font-size:13px; color:var(--fg-sec); line-height:1.45 }

/* ─── 기획안 인터랙티브 카드 (P2 · PICK · 개별 재생성 · 연필) ─── */
.scenario-card { cursor: default; }   /* 카드 클릭 선택 폐기 — 버튼이 담당 */
.scenario-doc-head .scn-head-actions { display:flex; align-items:center; gap:8px; margin-left:auto } /* 전체 재생성 항상 우측(개선.md 기획#1) */
.scn-regen-all {
  font-size:12px; color:var(--fg-sec); background:var(--surface-2);
  border:1px solid var(--border-str); border-radius:var(--r-pill); padding:5px 13px;
}
.scn-regen-all:hover { color:var(--fg); border-color:var(--accent); }
.scenario-card-head { display:flex; align-items:center; gap:10px; }
.scenario-card-id {
  font-size:11px; font-weight:600; color:var(--fg-muted);
  letter-spacing:0.4px; text-transform:uppercase; flex-shrink:0;
}
.scenario-card-title { font-size:15px; font-weight:600; color:var(--fg); flex:1; }
.scn-edit {
  flex-shrink:0; width:28px; height:28px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--fg-muted); border:1px solid var(--border);
  transition: color .12s, border-color .12s, background .12s;
}
.scn-edit:hover { color:var(--fg); border-color:var(--accent); background:var(--accent-dim); }
.scenario-card-body { display:flex; flex-direction:column; gap:7px; max-height:46vh; overflow-y:auto; }
.scn-sec { display:flex; flex-direction:column; gap:2px; }
.scn-sec-label {
  font-size:10px; font-weight:600; color:var(--fg-muted);
  letter-spacing:0.4px; text-transform:uppercase;
}
.scn-sec-text { font-size:13.5px; color:var(--fg-sec); line-height:1.7; word-break:keep-all; }
.scn-line { font-size:13px; color:var(--fg-sec); line-height:1.7; word-break:keep-all; }
.scenario-card-actions { display:flex; gap:8px; padding-top:4px; justify-content: flex-end; }
.scn-pick {
  font-size:13px; font-weight:600; padding:8px 18px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
}
.scn-pick:hover { opacity:.88; }
.scn-regen, .scn-save, .scn-cancel {
  font-size:13px; font-weight:600; padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--fg-sec); border:1px solid var(--border-str);
}
.scn-regen:hover, .scn-cancel:hover { color:var(--fg); border-color:var(--accent); }
.scn-save { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.scn-save:hover { opacity:.88; }
.scn-edit-area {
  width:100%; min-height:160px; resize:vertical;
  background:var(--surface-2); border:1px solid var(--border-str); border-radius:var(--r-md);
  padding:12px 14px; font-size:13px; line-height:1.7; color:var(--fg);
  font-family:-apple-system, system-ui, sans-serif;
}
.scn-edit-area:focus { border-color:var(--accent); }

/* ─── 콘티 보드 (Canvas 3) ────────────────────── */
.conti-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size:12px; color:var(--fg-muted);
}
.conti-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.conti-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 150ms;
  display: flex; flex-direction: column;
}
.conti-panel:hover   { border-color:var(--border-str) }
.conti-panel.active  { border-color:var(--accent) }
.conti-sketch {
  aspect-ratio: 4/3;
  background: var(--surface-2);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.conti-desc {
  font-size: 11px; color:var(--fg-muted); text-align:center;
  padding: 0 8px; line-height:1.3; z-index:1;
}
.cam-arrow {
  position: absolute;
  color: var(--red);
  font-size: 18px; font-weight: bold;
  opacity: .85;
}
.cam-arrow.tl  { top:7px; left:7px }
.cam-arrow.tr  { top:7px; right:7px }
.cam-arrow.br  { bottom:7px; right:7px }
.cam-arrow.ct  { /* center */ }
.conti-meta {
  padding: 5px 8px;
  border-top: 1px solid var(--sep);
  display: flex; align-items: center; gap:5px;
}
.conti-num  { font-size:10px; font-weight:600; color:var(--fg-muted); min-width:14px }
.conti-shot {
  font-size:10px; background:var(--surface-3); color:var(--fg-muted);
  border-radius:3px; padding:1px 5px;
}
.conti-pace { font-size:10px; color:var(--fg-dis); margin-left:auto }

/* ─── 이미지 갤러리 (Canvas 4) ────────────────── */
.gallery-header {
  display: flex; justify-content:space-between; align-items:center;
  margin-bottom: 4px;
}
.gallery-ver {
  font-size:12px; color:var(--fg-muted);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:3px 10px;
}
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.scene-card { display:flex; flex-direction:column; gap:5px; cursor:pointer }
.scene-img-wrap {
  aspect-ratio: 16/9;            /* 씬 칸은 항상 16:9 가로형 (기본 생성 비율에 정합) */
  background: #000;              /* 정방형·세로 이미지는 contain + 검정 레터박스(양옆 여백) */
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0,0,0,0.45) 0 4px 20px;
  transition: transform 150ms;
}
.scene-img-wrap img { width:100%; height:100%; object-fit:contain; background:#000 }
.scene-img-wrap:hover { transform:scale(1.025) }
.scene-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
}
.scene-num { display:none }   /* 씬 박스의 3·4·5… 번호 라벨 숨김(요청) */
.scene-status {
  position:absolute; top:8px; right:8px;
}
.status-chip {
  font-size:12px; border-radius:var(--r-pill); padding:4px 11px;
  font-weight:600; letter-spacing:0;
}
/* §F: 상태 칩 모노톤 — 완료는 무채색 강조(밝게), 대기/편집은 무채색 약하게 */
.s-done   { background:rgba(255,255,255,.18); color:var(--fg);     border:1px solid rgba(255,255,255,.32) }
.s-wait   { background:var(--surface-3);      color:var(--fg-muted); border:1px solid var(--border) }
.s-edit   { background:rgba(255,255,255,.10); color:var(--fg-sec); border:1px solid var(--border) }
.s-prog   { background:rgba(255,255,255,.16); color:var(--accent); border:1px solid rgba(255,255,255,.3) }
.scene-label-row {
  display:flex; align-items:center; justify-content:space-between; padding:0 2px;
}
.scene-lbl { font-size:11px; color:var(--fg-muted); font-weight:500 }
/* 씬 재생성 버튼 (이미지 위 좌하단) */
.scene-regen {
  position:absolute; bottom:8px; left:8px;
  width:28px; height:28px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.65); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 150ms;
}
.scene-img-wrap:hover .scene-regen { opacity:1 }
.scene-regen:hover { background:rgba(0,0,0,.85) }
/* 콘티 시트 재생성 버튼 (씬과 동일 패턴) */
.conti-regen {
  position:absolute; bottom:8px; left:8px;
  width:28px; height:28px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.65); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 150ms;
}
.conti-sketch:hover .conti-regen { opacity:1 }
.conti-regen:hover { background:rgba(0,0,0,.85) }

/* 실패한 씬 박스 — 점선 테두리 제거(요청), "다시 생성"은 빨간 박스 + 어두운 글씨 */
.scene-failed { border:none; border-radius:var(--r-md); box-sizing:border-box }
/* 아직 생성 안 된 씬(중단 후 재접속) — 쉬머 대신 점선 대기 상태 + '생성' 버튼 */
.scene-empty { width:100%; height:100%; background:var(--surface-2); border:1px solid var(--border-str); border-radius:var(--r-md); box-sizing:border-box; }
/* 대기(아직 생성 시작 안 함) — 쉬머 없는 회색 박스. 실제 생성 중인 것만 skeleton-shimmer가 붙는다 */
.scene-placeholder.scene-pending { width:100%; height:100%; background:var(--surface-2); }
.char-sheet-thumb.char-sheet-pending { background:var(--surface-2); }
.scene-regen-text {
  /* 원형 화살표(재생성) 아이콘만 — 테두리 없음, 콘텐츠 박스 회색 톤 */
  margin-top:6px; padding:4px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--fg-muted); border:none;
  cursor:pointer; transition:color 150ms;
}
.scene-regen-text svg { width:20px; height:20px; }
.scene-regen-text:hover { color:var(--fg); }
.scene-regen-text:hover { filter:brightness(1.08) }

/* 생성 중지(■)/재개(▶) 아이콘 박스 — 생성 중인 콘텐츠 박스/진행행 위에 노출 */
.gen-stop {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  background:rgba(0,0,0,.62); color:#fff; border:1px solid rgba(255,255,255,.22);
  cursor:pointer; transition:background 150ms, filter 150ms; flex-shrink:0;
}
.gen-stop:hover { background:rgba(0,0,0,.82) }
.gen-stop .ic-play { display:none }
.gen-stop.paused { background:var(--accent); color:var(--accent-ink); border-color:transparent }
.gen-stop.paused .ic-stop { display:none }
.gen-stop.paused .ic-play { display:block }
/* 콘텐츠 박스(씬·콘티·영상) 위에 얹힐 때: 박스 정중앙 + 호버 시에만 노출 */
.scene-img-wrap .gen-stop,
.conti-sketch .gen-stop,
.conti-main .gen-stop,
.video-wrap .gen-stop {
  position:absolute; top:50%; left:50%; z-index:5;
  width:46px; height:46px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.9);
  opacity:0; pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
.scene-img-wrap:hover .gen-stop,
.conti-sketch:hover .gen-stop,
.conti-main:hover .gen-stop,
.video-wrap:hover .gen-stop {
  opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
}
/* 콘티 스켈레톤(생성 중)일 때는 호버 없이도 ■를 보이게 — 사용자가 바로 멈출 수 있도록 */
.conti-main .conti-main-skel + .scene-status + .gen-stop { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }

/* 진행률 바 */
.gen-progress-bar {
  background: var(--surface-2); border-radius: var(--r-pill);
  height: 3px; overflow: hidden; margin-top: 2px;
}
.gen-progress-fill {
  height: 100%; background: var(--accent); border-radius:var(--r-pill);
  transition: width 400ms ease;
}

/* ─── 영상 플레이어 (Canvas 5) ─────────────────── */
.video-wrap {
  aspect-ratio: 16/9;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  box-shadow: rgba(0,0,0,.5) 0 8px 32px;
  display: flex; align-items: center; justify-content: center;
}
.video-wrap video { width:100%; height:100%; object-fit:contain }
.video-play-icon  { font-size:44px; opacity:.35 }
.video-ctrl {
  display: flex; align-items: center; gap: 10px; padding: 0 2px;
}
.vid-time  { font-size:12px; color:var(--fg-muted); letter-spacing:0; min-width:80px }
.ctrl-btn  { font-size:13px; color:var(--fg-muted); padding:4px }
.ctrl-btn:hover { color:var(--fg) }
.progress-bar {
  flex: 1; height: 3px; background: var(--surface-3);
  border-radius: 2px; cursor: pointer; position:relative;
}
.progress-fill { height:100%; background:var(--accent); border-radius:2px; width:0% }
.beat-track {
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 14px; display:flex; flex-direction:column; gap:8px;
}
.beat-track-lbl {
  font-size:10px; color:var(--fg-dis); font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
}
.beat-markers {
  display:flex; align-items:flex-end; height:36px;
  border-bottom:1px solid var(--sep); padding-bottom:6px; gap:2px;
}
.beat-mark {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
}
.beat-bar  { width:2px; background:var(--surface-3); border-radius:1px; transition:background 150ms }
.beat-bar.played { background:var(--accent) }
.beat-mark:hover .beat-bar { background:rgba(255,255,255,.6) }
.beat-num  { font-size:9px; color:var(--fg-dis) }

/* ─── 원본 vs 수정본 비교 (오른쪽 영상 패널) ─── */
.panel-compare { display:flex; flex-direction:column; gap:14px; }
.panel-compare .pc-item { display:flex; flex-direction:column; gap:6px; }
.panel-compare .pc-label { font-size:12px; font-weight:600; color:var(--fg-sec); letter-spacing:0.2px; }

/* ─── 구간 수정 통합 패널 (영상 패널: 씬·슬라이더·효과) ─── */
.seg-edit {
  margin-top:14px; display:flex; flex-direction:column; gap:12px;
  background:var(--surface-1); border:1px solid var(--border-str);
  border-radius:var(--r-lg); padding:16px;
}
.seg-edit.resolved { opacity:.6; pointer-events:none }
.seg-crop-head { font-size:13px; font-weight:600; color:var(--fg) }
.seg-crop-sub  { font-size:11px; color:var(--fg-muted); line-height:1.5; margin-top:-6px }
.seg-track {
  position:relative; height:22px; margin:8px 11px;
  background:var(--surface-3); border-radius:11px;
}
.seg-range {
  position:absolute; top:0; bottom:0; left:0; width:0;
  background:var(--accent-dim); border-radius:11px;
}
.seg-handle {
  position:absolute; top:50%; width:16px; height:28px; margin-left:-8px;
  transform:translateY(-50%); border-radius:5px;
  background:var(--accent); border:2px solid var(--accent-ink);
  cursor:ew-resize; touch-action:none; box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.seg-times {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--fg-sec); margin-top:-2px;
}
.seg-times .seg-dur { color:var(--accent); font-weight:600 }
.seg-preview-link {
  align-self:flex-start; font-size:12px; color:var(--fg-muted);
  background:transparent; border:none; padding:2px 0; cursor:pointer;
}
.seg-preview-link:hover { color:var(--fg) }
.seg-confirm {
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:600;
}


/* ═══════════════════════════════════════════════
   BRIEF LEDGER DRAWER
   ═══════════════════════════════════════════════ */
.ledger-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:40; opacity:0; pointer-events:none;
  transition:opacity 220ms;
}
.ledger-overlay.open { opacity:1; pointer-events:all }

.ledger-drawer {
  position:fixed;
  left: var(--nav-w); top:0; bottom:0;
  width: 280px;
  /* '최종본 다운로드' 팝오버(.vdf-pop) 톤 참고 — 어두운 배경·은은한 라인·깊은 그림자 (개선.md 좌측네비) */
  background: #161618;
  border-right: 1px solid rgba(255,255,255,0.10);
  box-shadow: 12px 0 40px rgba(0,0,0,0.55);
  z-index: 62;   /* #canvasGuide(단계 타이틀/소개, z-index:50) 위로 — 드로어가 가이드 문구를 덮도록(겹침 오류 해결) */
  display: flex; flex-direction: column;
  /* 닫힘: nav 너비까지 포함해 완전히 화면 밖으로 (nav 아이콘을 가리지 않도록) */
  transform: translateX(calc(-100% - var(--nav-w)));
  visibility: hidden;
  transition: transform 220ms cubic-bezier(.25,.46,.45,.94), visibility 0s linear 220ms;
}
.ledger-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms cubic-bezier(.25,.46,.45,.94), visibility 0s;
}

.ledger-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px 12px;
  border-bottom:1px solid var(--sep);
}
.ledger-title { font-size:13px; font-weight:600; color:var(--fg) }
/* 닫기(X) — 원형 테두리/배경 제거, X 크기 살짝 키움 (개선.md 좌측네비) */
.ledger-close {
  width:28px; height:28px; border-radius:var(--r-sm);
  background:transparent; color:var(--fg-muted);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ledger-close svg { width:15px; height:15px; }
.ledger-close:hover { color:var(--fg); background:rgba(255,255,255,0.06); }
.ledger-body { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:13px }
.l-section { display:flex; flex-direction:column; gap:4px }
.l-key {
  font-size:10px; font-weight:600; color:var(--fg-dis);
  letter-spacing:0.6px; text-transform:uppercase;
}
.l-val { font-size:13px; color:var(--fg-sec); line-height:1.4 }
.l-empty { font-size:12px; color:var(--fg-dis); font-style:italic }
.l-sep { height:1px; background:var(--sep) }
.l-tag-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-muted) }
.l-tag-thumb {
  width:34px; height:34px; flex-shrink:0; border-radius:6px; object-fit:cover;
  background:var(--surface-3); border:1px solid var(--border);
}
.l-tag-thumb-empty { display:inline-block; }
.l-tag-code {
  font-family:monospace; font-size:11px;
  background:rgba(255,95,59,0.14); border-radius:4px; padding:1px 6px; color:var(--point);
}
.l-tag-cat { color:var(--fg-muted); font-size:11.5px; }

/* ─── shimmer 로딩 ────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0%   { background-position:200% 0 }
  100% { background-position:-200% 0 }
}

/* ─── 유틸리티 ───────────────────────────────── */
.divider { height:1px; background:var(--sep); margin:2px 0 }
.badge-blue {
  font-size:10px; background:var(--accent-dim); color:var(--accent);
  border-radius:var(--r-pill); padding:2px 7px; font-weight:600;
  border:1px solid var(--accent-bdr);
}
.error-msg {
  font-size:13px; color:var(--red);
  background:rgba(255,69,58,.08); border:1px solid rgba(255,69,58,.25);
  border-radius:var(--r-md); padding:10px 13px;
  align-self:flex-start;
}

/* ─── §E 에러 표시 표준 (페인 좌상단 경고 박스 + 하단 빨간 재생성) ─── */
.error-box {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 12;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(420px, calc(100% - 28px));
  padding: 10px 13px;
  font-size: 13px;
  color: var(--red);
  background: rgba(255,69,58,.10);
  border: 1px solid rgba(255,69,58,.30);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}
.error-box-icon { flex-shrink: 0; margin-top: 1px; }
.error-box-msg  { color: var(--fg-sec); line-height: 1.45; }
.error-retry-bar {
  display: flex;
  justify-content: center;
  padding: 14px 0 18px;
}
.error-retry-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--red);
  border: 1px solid var(--red);
  transition: filter .12s ease;
}
.error-retry-btn:hover { filter: brightness(1.08); }

/* ══════════════════════════════════════════════
   랜딩 / 프로젝트 관리 (§D · 목업)
   ══════════════════════════════════════════════ */
.landing {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.landing.hidden { display: none; }
.landing-inner { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 48px 32px 120px; }
.landing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.landing-logo {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-str);
  display: flex; align-items: center; justify-content: center;
}
.landing-title { font-size: 22px; font-weight:600; letter-spacing: -0.4px; }
.landing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.proj-card {
  position: relative; aspect-ratio: 16/10; border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color .15s, transform .12s;
}
.proj-card:hover { border-color: var(--border-str); transform: translateY(-2px); }
.proj-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-thumb.placeholder { background: linear-gradient(135deg, #2a2a2c, #161618); }
/* hover 그라데이션 + 날짜·이름 */
.proj-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
  opacity: 0; transition: opacity .15s;
}
.proj-card:hover .proj-meta { opacity: 1; }
.proj-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.proj-date { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
/* hover (…) 메뉴 */
.proj-dots {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-str); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .15s;
}
.proj-card:hover .proj-dots { opacity: 1; }
.proj-dots:hover { background: rgba(0,0,0,0.75); }
.proj-menu {
  position: absolute; top: 40px; right: 8px; z-index: 4;
  background: var(--surface-2); border: 1px solid var(--border-str);
  border-radius: var(--r-md); padding: 5px; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.proj-menu[hidden] { display: none; }
.proj-menu button { text-align: left; font-size: 13px; color: var(--fg-sec); padding: 7px 11px; border-radius: var(--r-sm); }
.proj-menu button:hover { background: var(--surface-3); color: var(--fg); }
.proj-menu button.danger:hover { background: rgba(255,69,58,.15); color: var(--red); }
/* 새 프로젝트 — 하단 중앙 sticky */
.landing-new {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 410; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight:600; padding: 13px 26px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.landing-new:hover { opacity: .9; }

/* ─── 확인 다이얼로그 (§D 의존성 가드 등 · 모노톤) ─── */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.confirm-box {
  width: 100%; max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--border-str);
  border-radius: var(--r-lg); padding: 22px 22px 16px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.6);
}
.confirm-msg { font-size: 14px; line-height: 1.65; color: var(--fg-sec); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.confirm-cancel {
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--fg-sec); border: 1px solid var(--border-str);
}
.confirm-cancel:hover { color: var(--fg); border-color: var(--accent); }
.confirm-ok {
  font-size: 13px; font-weight:600; padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.confirm-ok:hover { opacity: .9; }

/* ══════════════════════════════════════════════
   §I 로딩 쉬머 (gradient2.png · 다크 그레이 + 은빛 스윕, 모노톤)
   ══════════════════════════════════════════════ */
@keyframes shimmer-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
/* 생성 중 콘텐츠 박스 스켈레톤: 다크 매트 그레이 베이스 + 은은한 은빛 하이라이트 스윕 */
.skeleton-shimmer {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #232325, #161618);
}
.skeleton-shimmer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 28%,
    rgba(225,230,242,0.10) 45%,
    rgba(245,248,255,0.20) 50%,
    rgba(225,230,242,0.10) 55%,
    transparent 72%);
  transform: translateX(-100%);
  animation: shimmer-sweep 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
/* 인풋바 테두리 쉬머 (수정/생성 중) — 테두리만 은빛이 흐르도록 마스크 처리 */
@keyframes shimmer-edge-move { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.shimmer-edge::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(100deg, transparent 30%, rgba(244,247,255,0.55) 50%, transparent 70%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shimmer-edge-move 1.9s linear infinite;
}
.chat-input-bar, .em-inputbar { position: relative; }

/* ─── 수집 오프닝 히어로 (채팅 말풍선 대체) ─── */
.ws-hero {
  text-align: center;
  padding: 11vh 20px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ws-hero-title { font-size: 32px; font-weight:600; line-height: 1.32; letter-spacing: -0.6px; color: var(--fg); }
.ws-hero-sub { font-size: 14px; color: var(--fg-muted); line-height: 1.75; }

/* ══════════════════════════════════════════════
   v3 조정 — 헤더 타이틀 제거·스테퍼 중앙 / 랜딩 풀블리드 / Genera Flow 브랜드
   ══════════════════════════════════════════════ */
/* 상단: 단계 타이틀 텍스트 숨김, 진행 스테퍼를 화면 중앙에 */
.canvas-label { display: none; }
.canvas-header { justify-content: center; height: 46px; }
.progress-stepper { margin-left: 0; }
.progress-stepper .ps-pill { width: 32px; height: 4px; }

/* 랜딩: 3개 프로젝트가 화면 양옆에 꽉 차게 (image 47 풀블리드) */
.landing-inner { max-width: none; padding: 30px 28px 130px; }
.landing-head { margin-bottom: 26px; }
.landing-brand {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--fg);
}
.landing-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj-card { aspect-ratio: 16/10.5; border-radius: 16px; }
.proj-name { font-size: 15px; }
.proj-date { font-size: 12px; }

/* ══════════════════════════════════════════════
   인풋바 (gradient2.png) — 다크 라운드 박스 + 하단 컨트롤 행
   ══════════════════════════════════════════════ */
.chat-input-bar {
  flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 22px; padding: 14px 16px 12px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.chat-input-bar .chat-textarea {
  width: 100%; background: transparent; border: none; resize: none;
  font-size: 15px; color: var(--fg); line-height: 1.5; max-height: 160px; padding: 2px 4px;
}
.chat-input-bar .chat-textarea::placeholder { color: var(--fg-muted); }
.inbar-row { display: flex; align-items: center; gap: 8px; }
.inbar-plus {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-sec); border: 1px solid var(--border-str); background: transparent; flex-shrink: 0;
}
.inbar-plus:hover { color: var(--fg); border-color: var(--accent); }
/* (1-5) FAL 단일 엔진 — Higgsfield↔Fal 선택 토글 전부 숨김(힉스필드 휴면). 되살리려면 이 한 줄 제거. */
.engine-pop-wrap, .engine-toggle { display: none !important; }
.engine-pop-wrap { position: relative; }
.engine-pill {
  font-size: 13px; font-weight: 500; padding: 7px 17px; border-radius: 999px;
  background: #fff; color: #000; border: none;
}
.engine-pill:hover { opacity: .9; }
.engine-pop {
  position: absolute; bottom: 44px; left: 0; z-index: 30;
  background: var(--surface-2); border: 1px solid var(--border-str); border-radius: 12px;
  padding: 5px; min-width: 132px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.engine-pop[hidden] { display: none; }
#vvEnginePop { bottom: auto; top: 44px; }   /* 영상 단계 헤더 팝오버는 페이지 하단이 아니라 상단 근처라 아래로 열어야 잘리지 않음 */
.engine-pop-opt { text-align: left; font-size: 13px; color: var(--fg-sec); padding: 8px 11px; border-radius: 8px; background: transparent; }
.engine-pop-opt:hover, .engine-pop-opt.active { background: var(--surface-3); color: var(--fg); }
.inbar-spacer { flex: 1; }
.chat-input-bar .send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #000; display: flex; align-items: center; justify-content: center;
  border: none; flex-shrink: 0;
}
.chat-input-bar .send-btn:hover { opacity: .88; }

/* ─── 챗봇 사이드시트 (수정 단계 · 우측 슬라이드인) ─── */
.chat-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 260;
  width: 360px; max-width: 86vw;
  background: var(--surface-1); border-left: 1px solid var(--border-str);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  box-shadow: -12px 0 40px rgba(0,0,0,.4);
}
.chat-sheet.open { transform: translateX(0); }
.chat-sheet-head {
  flex-shrink: 0; height: 50px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--sep);
}
.chat-sheet-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.chat-sheet-close {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-sec); border: 1px solid var(--border-str); background: transparent;
}
.chat-sheet-close:hover { color: var(--fg); background: var(--surface-2); }
.chat-sheet-body {
  flex: 1; overflow-y: auto; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ══════════════════════════════════════════════
   v4 조정 — LNB 블랙·라벨제거 / 라운드 축소 / 16:9 cover / 비디오카드 정리 / 기획 여백
   ══════════════════════════════════════════════ */
/* 박스 라운드 전반 축소 (pill 제외) */
:root { --r-lg: 10px; --r-md: 8px; --r-sm: 6px; }

/* LNB 레일 — 블랙 + 아이콘 하단 텍스트 제거 */
.step-nav { background: #000; border-right: 1px solid var(--border); }
.step-label { display: none !important; }
.step-btn { padding: 15px 4px; }
.nav-logo { border-bottom: 1px solid var(--border); }

/* 콘텐츠 박스 16:9 고정 + 이미지 전체가 잘리지 않고 보이도록(contain) */
.scene-img-wrap { aspect-ratio: 16/9; width: 100%; border-radius: var(--r-md); overflow: hidden; background:#000; position: relative; }
.scene-img-wrap img { width: 100%; height: 100%; object-fit: contain !important; }
.scene-card { display: flex; flex-direction: column; gap: 8px; }
/* 콘티 — 하얀 테두리 제거 + 16:9 안에 전체 표시(contain) */
.conti-panel { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.conti-sketch { aspect-ratio: 16/9 !important; width: 100%; border-radius: var(--r-md); overflow: hidden; background:#000; border: none !important; }
.conti-sketch img { width: 100%; height: 100%; object-fit: contain !important; }
/* 비디오 카드 — 하얀 테두리/버전 텍스트 제거 + 16:9 cover */
.video-version { border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; }
.video-version .vv-head { display: none !important; }
.video-version .video-wrap { aspect-ratio: 16/9 !important; width: 100%; border-radius: var(--r-md); overflow: hidden; background:#000; }
.video-version video { width: 100%; height: 100%; object-fit: cover; }
/* 비디오 액션 — 텍스트가 아니라 버튼으로 */
.vv-actions { gap: 8px; margin-top: 10px; }
.vv-act {
  font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: var(--r-md);
  border: 1px solid var(--border-str); background: var(--surface-2); color: var(--fg-sec);
}
.vv-act:hover { color: var(--fg); border-color: var(--accent); }
.vv-act[data-act="edit-modal"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.vv-seg, .vv-seg-regen, .vv-seg-edit { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-sec); }

/* 기획안 카드 사이 여백 더 */
#scn-cards { display: flex; flex-direction: column; gap: 24px; }
.scenario-card { border-radius: var(--r-lg); }

/* 인풋바·랜딩카드 라운드 축소 */
.chat-input-bar { border-radius: 14px; }
.proj-card { border-radius: 10px; }

/* 씬/콘티 하단 라벨 + 재생성 버튼 (호버 아이콘 → 하단 버튼) */
.scene-foot, .conti-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px;
}
.scene-lbl, .conti-lbl { font-size: 12px; color: var(--fg-muted); font-weight: 500; text-align: left; }
.scene-regen-btn {
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-str); background: var(--surface-2); color: var(--fg-sec);
}
.scene-regen-btn:hover { color: var(--fg); border-color: var(--accent); }
/* 호버 아이콘식 재생성 제거 */
.scene-regen, .conti-regen { display: none !important; }

/* 이미지 그리드 상단 — 전체 재생성(우측) */
.image-grid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
/* 이미지 단계 전체 재생성 — 기획 단계(.scn-regen-all)와 동일 디자인(개선.md 이미지#3) */
.regen-all-btn {
  font-size: 12px; color: var(--fg-sec); background: var(--surface-2);
  border: 1px solid var(--border-str); border-radius: var(--r-pill); padding: 5px 13px;
}
.regen-all-btn:hover { color: var(--fg); border-color: var(--accent); }

/* 편집 모달 — 탭을 상단 중앙에 크게 (잘 보이게) */
.em-topbar { justify-content: center; position: relative; }
.em-tab { font-size: 14px; padding: 8px 20px; }
.em-close { position: absolute; right: 18px; top: 9px; }

/* 편집 모달 인풋바 = 워크스페이스 인풋바와 동일(gradient2) */
.em-inputbar {
  flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px 12px; max-width: 760px; width: 100%; align-self: center;
}
.em-inputbar .em-input { width: 100%; background: transparent; border: none; resize: none; font-size: 15px; color: var(--fg); line-height: 1.5; max-height: 120px; padding: 2px 4px; }
.em-inputbar .em-input::placeholder { color: var(--fg-muted); }
.em-inputbar .send-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; border: none; }
.em-inputbar .send-btn:hover { opacity: .88; }

/* Prompt 탭 — Tap.png처럼 정돈 */
.em-prompt-section-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); letter-spacing: .3px; text-transform: uppercase; }
.em-prompt-meta .em-meta-chip { background: var(--surface-2); }

/* ══════════════════════════════════════════════
   v5 — 콘텐츠 박스 호버 패널(after.png) / 영상 아이콘(before.png) / LNB 브랜드 / 콘티 여백
   ══════════════════════════════════════════════ */
/* LNB 최상단 브랜드 텍스트 (랜딩과 동일, 클릭→목록) */
.nav-logo { cursor: pointer; }
.lnb-brand {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; line-height: 1.12; color: var(--fg);
  text-align: center; letter-spacing: -0.2px;
}
.nav-logo:hover .lnb-brand { opacity: .75; }

/* 호버 패널 (좋아요·재생성·다운로드·Edit) — after.png */
.scene-img-wrap, .conti-sketch, .video-version .video-wrap { position: relative; }
.box-hover {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  display: flex; gap: 2px; padding: 4px;
  /* 어두운 글래스 + 그림자 — 흰색(밝은) 콘텐츠 위에서도 버튼이 항상 또렷하게 보이도록 */
  background: rgba(20,22,28,0.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.scene-img-wrap:hover .box-hover,
.conti-sketch:hover .box-hover,
.video-version .video-wrap:hover .box-hover { opacity: 1; transform: none; pointer-events: auto; }
.bh-act {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; border: none; cursor: pointer;
  /* 아이콘 자체에도 미세한 그림자 — 어떤 배경에서도 윤곽이 살아있게 */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.bh-act:hover { background: rgba(255,255,255,0.25); }
.bh-act.on { background: rgba(255,255,255,0.32); }

/* 영상 박스 좌상단 영상 아이콘 — before.png */
.box-vid-icon {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(4px);
}

/* 콘티 — 박스 약간 축소 + 박스/라벨 여백 */
.conti-panel { display: flex; flex-direction: column; gap: 12px; }
.conti-sketch { max-width: 940px; margin: 0 auto; width: 100%; }
.conti-foot { max-width: 940px; margin: 0 auto; width: 100%; }

/* 비디오 세그먼트 seek 버튼 정리 */
.vv-segs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vv-seg { text-align: left; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-sec); }

/* 한 판 설문 */
.survey-card { max-width: 700px; }
.survey-sec-label {
  font-size: 12px; font-weight: 600; color: var(--fg-muted); letter-spacing: .3px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sep);
}
.survey-card .intake-body > .survey-sec-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.attach-limit-msg { font-size: 12.5px; color: var(--red); margin-top: 8px; font-weight: 500; }
.attach-limit-msg[hidden] { display: none; }

/* ══════════════════════════════════════════════
   v6 — 로고 분리/위치 · 랜딩 검색·카드호버 · 연속 그라데이션 · 탭 스타일 · 모달 확대
   ══════════════════════════════════════════════ */
/* 프로젝트 로고 — 레일과 분리, 좌측 상단(랜딩과 동일 위치) */
.app-logo {
  position: absolute; top: 20px; left: 22px; z-index: 40;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 18px; font-weight: 600; color: var(--fg); cursor: pointer; letter-spacing: -0.3px;
}
.app-logo:hover { opacity: .8; }
.nav-steps { padding-top: 60px; }     /* 상단 로고 자리 확보 → 단계 아이콘과 분리 */

/* 랜딩 로고 위로 + 검색 */
.landing-inner { padding-top: 20px; }
.landing-head { display: flex; align-items: center; gap: 22px; }
.landing-brand { font-size: 18px; }
.landing-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-pill);
  padding: 8px 14px; color: var(--fg-muted); min-width: 240px;
}
.landing-search input { flex: 1; background: transparent; border: none; color: var(--fg); font-size: 13px; }
.landing-search input::placeholder { color: var(--fg-muted); }

/* 랜딩 카드 호버 패널(after.png) + 빨간 삭제 */
.proj-card:hover .box-hover { opacity: 1; transform: none; pointer-events: auto; }
.bh-del:hover { background: rgba(255,69,58,0.22); color: var(--red); }

/* 상단 진행 스테퍼 — 막대별로 끊기지 않고 하나의 그라데이션 흐름 */
.progress-stepper .ps-pill i {
  background: linear-gradient(90deg, var(--fg-muted), var(--fg));
  background-size: 180px 100%; background-repeat: no-repeat;
}
.progress-stepper .ps-pill:nth-of-type(1) i { background-position-x: 0; }
.progress-stepper .ps-pill:nth-of-type(2) i { background-position-x: -37px; }
.progress-stepper .ps-pill:nth-of-type(3) i { background-position-x: -74px; }
.progress-stepper .ps-pill:nth-of-type(4) i { background-position-x: -111px; }
.progress-stepper .ps-pill:nth-of-type(5) i { background-position-x: -148px; }

/* 편집 모달 — 탭(버튼 아님) 스타일 + 더 잘 보이게 */
.em-topbar { height: 58px; }
.em-tab {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  color: var(--fg-muted); padding: 10px 4px !important; font-size: 15px;
  border-bottom: 2px solid transparent !important;
}
.em-tab:hover { color: var(--fg); }
.em-tab.on { color: var(--fg) !important; background: transparent !important; border-bottom: 2px solid var(--fg) !important; }
.em-tabs { gap: 22px; }

/* 편집 모달 콘텐츠 더 크게 (수정 진입 시 콘텐츠 작던 문제) */
.em-pane[data-pane="media"] { padding: 14px; gap: 12px; }
.em-history { width: 84px; }
.em-main { min-height: 0; }
.em-main img, .em-main video { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 60vh; object-fit: contain; }

/* ══════════════════════════════════════════════
   v7 — 설문 중앙/배경제거/가독성 · 인풋바 위치 · 레일 라인 그라데이션 · 프로필
   ══════════════════════════════════════════════ */
/* 설문 — 중앙 정렬 + 배경 제거 + 타이틀 + 가독성 */
.survey-card {
  align-self: center; margin: 0 auto; background: transparent !important;
  border: none !important; box-shadow: none !important; padding: 8px 4px 40px;
}
.survey-title { font-size: 19px; font-weight: 400; line-height: 1.55; color: var(--fg); text-align: center; margin-bottom: 26px; letter-spacing: -0.2px; }
.survey-title strong { font-weight: 700; }
.survey-sec-label { font-size: 13.5px; font-weight: 600; color: var(--fg); margin-top: 20px; padding-top: 16px; }
.survey-card .intake-field { margin-bottom: 6px; }
.survey-card .intake-label { font-size: 13px; font-weight: 500; color: var(--fg-sec); margin-bottom: 6px; }
.survey-card .intake-input, .survey-card .intake-area { font-size: 14px; }

/* 워크스페이스 하단 그라데이션 — 아래 내용 더 있음을 암시 */
.canvas-body::after {
  content: ''; position: sticky; bottom: 0; left: 0; right: 0; display: block;
  height: 40px; margin-top: -40px; pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}

/* 오프닝 인풋바 — 히어로 바로 아래 중앙, 엔진 선택 없이 첨부·전송만 */
.chat-input-bar.opening { margin: 22px auto 0; max-width: 600px; }
.chat-input-bar.opening .engine-pop-wrap { display: none; }

/* 편집 모달 인풋바 — 살짝 위로 */
.em-inputbar { margin-bottom: 18px; }

/* LNB 우측 라인 — 로고 닿는 상단부는 투명, 아래로 그라데이션 */
.step-nav { border-right: none !important; }
.step-nav::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, transparent 56px, var(--border) 96px, var(--border) 100%);
}

/* 랜딩 우측 상단 프로필 + 호버 툴팁 */
.landing-profile {
  position: absolute; top: 20px; right: 26px; z-index: 5;
  width: 38px; height: 38px;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center; color: var(--fg-sec);
}
.landing-profile:hover { color: var(--fg); }
.landing-profile .profile-tip {
  position: absolute; top: 46px; right: 0; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-sm);
  padding: 7px 11px; font-size: 12.5px; color: var(--fg);
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.landing-profile:hover .profile-tip { opacity: 1; transform: none; }
.landing-profile { cursor: pointer; }

/* 작업화면 설정 톱니 — 랜딩 톱니와 동일 외형, 우상단 상시 노출 */
.app-settings {
  position: absolute; top: 20px; right: 26px; z-index: 70;
  width: 38px; height: 38px;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--fg-sec);
}
.app-settings:hover { color: var(--fg); }
.app-settings .profile-tip {
  position: absolute; top: 46px; right: 0; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-sm);
  padding: 7px 11px; font-size: 12.5px; color: var(--fg);
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.app-settings:hover .profile-tip { opacity: 1; transform: none; }

/* 설정(연결) 패널 — 영상 단계 '최종본 다운로드' 팝오버(.vdf-pop) 톤 참고:
   어두운 배경(#161618) · 은은한 10% 라인 · r-md 라운드 · 깊은 그림자 (개선.md 환경설정) */
.settings-box {
  max-width: 480px; position: relative;
  background: #161618; border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md); box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  padding-top: 20px;
}
/* 내 계정 자리표시(로그인 도입 전) — 아바타 + 이름 + 안내 */
.account-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 14px 8px 22px; }
.account-avatar { color: var(--fg-muted); opacity: 0.9; }
.account-name { font-size: 17px; font-weight: 700; color: var(--fg); }
.account-note { font-size: 13px; line-height: 1.7; color: var(--fg-muted); }
/* 닫기(X) — 창 우측 상단으로 이동(원형 테두리 없이 X만). 타이틀 위 여백 제거 */
.settings-x {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); border-radius: var(--r-sm); padding: 0;
}
.settings-x:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.settings-x svg { width: 20px; height: 20px; }
/* 헤더: 타이틀(좌) — 우상단 여백 제거(X가 absolute라 별도 공간 불필요) */
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-right: 34px; }
.settings-head-text { min-width: 0; }
.settings-head .settings-sub { margin-bottom: 0; }
.settings-recheck-btn { flex-shrink: 0; }
.settings-recheck-btn[hidden] { display: none; }
.settings-title { font-size: 15px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.settings-sub { font-size: 12.5px; color: var(--fg-muted); margin-bottom: 16px; }
.settings-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--border);
}
.settings-row:first-of-type { border-top: none; }
.settings-svc { display: flex; align-items: center; gap: 7px; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.settings-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-muted); flex-shrink: 0; }
.settings-dot.on  { background: #36c08a; }
.settings-dot.off { background: #d8635f; }
.settings-row .settings-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.settings-key {
  width: 260px; font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--surface-1); border: 1px solid var(--border-str); color: var(--fg);
}
.settings-btn {
  font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface-1); color: var(--fg-sec); border: 1px solid var(--border-str); white-space: nowrap;
}
.settings-btn:hover { color: var(--fg); border-color: var(--accent); }
.settings-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.settings-guide {
  font-size: 12px; line-height: 1.6; color: var(--fg-muted);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 11px; margin: 2px 0 0; width: 100%;
}
.settings-guide code { color: var(--fg-sec); background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
/* 연결(로그인) 후 상태 갱신 줄 — Electron 전용 */
.settings-recheck { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.settings-hint { font-size: 11.5px; color: var(--fg-muted); line-height: 1.5; }
/* 연결 안내 — 설명/복사코드 단계 블록 */
.guide-intro { font-size: 11.5px; color: var(--fg-muted); line-height: 1.55; margin-bottom: 11px; }
.guide-intro code { font-size: 11px; }
.guide-step { margin-bottom: 10px; }
.guide-step:last-child { margin-bottom: 0; }
.guide-desc { font-size: 12px; color: var(--fg-sec); margin-bottom: 5px; line-height: 1.5; }
.guide-code {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 6px 6px 11px;
}
.guide-code code {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg); background: none; padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all;
}
.guide-copy {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-sec); background: var(--surface-1); border: 1px solid var(--border-str); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.guide-copy:hover { color: var(--fg); border-color: var(--accent); }
.guide-copy.copied { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ══════════════════════════════════════════════
   §5 영상 편집 도구 — 타임라인·슬라이더·프레임박스·카메라칩·페이지슬라이드
   ══════════════════════════════════════════════ */
.em-video-tools { flex-shrink: 0; padding: 10px 6px 0; }
/* 필름스트립 타임라인 (영상 재생바.png) — 썸네일 몽타주 위에 흰 선택박스(좌/우 두꺼운 핸들), 바깥은 dim */
.em-timeline { position: relative; height: 54px; background: var(--surface-3); border-radius: var(--r-sm); margin: 10px 0; overflow: hidden; touch-action: none; }
.em-filmstrip { position: absolute; inset: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-color: #000; }
.em-filmstrip.loading { background-image: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: em-strip-shimmer 1.4s ease infinite; }
@keyframes em-strip-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.em-dim { position: absolute; top: 0; bottom: 0; background: rgba(0,0,0,0.62); z-index: 1; pointer-events: none; }
.em-dim-left { left: 0; } .em-dim-right { right: 0; }
/* 선택 구간 박스 — 흰 라운드 테두리(상/하 얇게), 좌/우는 핸들이 덮는다 */
.em-range { position: absolute; top: 0; bottom: 0; z-index: 2; box-sizing: border-box; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.35); background: transparent; }
/* 스타트/엔드 핸들 — 박스 좌/우 엣지에 얹힌 두꺼운 흰 바(이미지 크롭 핸들과 동일 두께감) */
.em-handle { position: absolute; top: -2px; bottom: -2px; width: 12px; z-index: 3; background: #fff; cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.em-handle::after { content: ''; width: 2px; height: 18px; border-radius: 2px; background: rgba(0,0,0,0.45); }
.em-handle-start { left: 0; border-radius: 6px 0 0 6px; }
.em-handle-end { right: 0; border-radius: 0 6px 6px 0; }
/* 핸들이 타임라인 밖으로 클리핑되지 않도록 살짝 안쪽으로(엔드 핸들 잡기 보장) */
.em-handle:hover { background: #f0f3ff; }
.em-time-labels { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--fg-muted); }
.em-tl-hint { color: var(--fg-dis); }
.em-scene-reselect { margin-top: 10px; }
.em-reselect-lbl { font-size: 11px; color: var(--fg-muted); }
.em-reselect-row { display: flex; gap: 6px; margin-top: 6px; overflow-x: auto; }
.em-reselect-thumb { width: 56px; height: 32px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border-str); cursor: pointer; flex-shrink: 0; }
.em-reselect-thumb:hover { border-color: var(--accent); }
.em-frames { display: flex; gap: 12px; margin-bottom: 10px; }
.em-frame { display: flex; flex-direction: column; gap: 3px; }
.em-frame-lbl { font-size: 10px; color: var(--fg-muted); }
.em-frame-box { width: 84px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); border: 1px solid var(--border-str); }
.em-frame-box img { width: 100%; height: 100%; object-fit: cover; }
/* 프레임 삭제(x) 후엔 img를 숨겨 깨진-이미지 아이콘이 아니라 빈 공간으로(개선.md 영상#2) */
.em-frame-box:not(.has-img) img { display: none; }
.cam-pop-wrap { position: relative; }
.cam-pill { background: var(--surface-2) !important; color: var(--fg-sec) !important; border: 1px solid var(--border-str) !important; }
.cam-pill:hover { color: var(--fg) !important; }
.cam-pop { position: absolute; bottom: 44px; left: 0; z-index: 30; width: 290px; max-height: 210px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.cam-pop[hidden] { display: none; }
.cam-chip { font-size: 12px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--border); color: var(--fg-sec); }
.cam-chip:hover { border-color: var(--accent); color: var(--fg); }
.cam-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
/* 수정 페이지 좌우 이전/다음 버튼 제거 — 버전 이동은 하단 히스토리 썸네일로 (개선.md 영상) */
.em-page { display: none !important; }
.em-page:hover { background: rgba(0,0,0,0.78); }
.em-page-prev { left: 8px; } .em-page-next { right: 8px; }
.em-page[hidden] { display: none; }

/* ══════════════════════════════════════════════
   v8 — 기획 3열 · 설문 위계 · 모달 aspect · 프로젝트네임 · 카메라 라이브러리 사이드탭
   ══════════════════════════════════════════════ */
/* 기획안 — 세로 카드 3개를 좌우로 */
#scn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scenario-card { max-width: none; }
.scenario-card-body { max-height: 44vh; }

/* 수집 설문 — 카테고리 타이틀 위계 강화 */
.survey-title { font-size: 20px !important; }
.survey-sec-label { font-size: 17px !important; font-weight: 600 !important; color: var(--fg) !important; margin-top: 26px !important; padding-top: 18px !important; }
.survey-card .intake-label { font-size: 13px; font-weight: 500; color: var(--fg-sec); }

/* 편집 모달 콘텐츠 — 원본 비율 유지(16:9가 9:16로 바뀌던 문제 수정) */
.em-main { min-height: 64vh; }
.em-main img, .em-main video { max-width: 100% !important; max-height: 64vh !important; width: auto !important; height: auto !important; min-height: 0 !important; object-fit: contain !important; }

/* 프로젝트 네임 (로고 우측) */
/* 로고는 코너 유지. 프로젝트명이 네비 우측 솔기(68px)에 바짝 붙지 않도록 여유를 두고,
   호버 박스를 솔기와 충돌하던 회색 박스 대신 옅은 톤으로(개선 요청). */
.app-logo-row { position: absolute; top: 20px; left: 22px; z-index: 40; display: flex; align-items: baseline; gap: 14px; }
.app-logo { position: static; top: auto; left: auto; }
/* 로고와 이름 사이 옅은 구분점 — 한 묶음으로 읽히게 */
.app-proj-name { font-size: 14px; color: var(--fg-muted); font-weight: 500; cursor: text; padding: 1px 6px; border-radius: 4px; position: relative; }
.app-proj-name::before { content: '/'; position: absolute; left: -10px; color: var(--fg-dis); }
.app-proj-name:empty::before { content: none; }
.app-proj-name:hover { color: var(--fg-sec); background: rgba(255,255,255,0.06); }
.app-proj-name[contenteditable="true"] { outline: 1px solid var(--accent); color: var(--fg); background: var(--surface-1); }
/* 편집 중 밑줄 — 텍스트 폭에 맞춰 짧게(카드 전체 폭이 아니라) (개선.md 랜딩) */
.proj-name.editing { outline: none; display: inline-block; max-width: 100%; border-bottom: 1.5px solid rgba(255,255,255,0.55); border-radius: 0; cursor: text; padding-bottom: 1px; }
.proj-name.editing::selection { background: rgba(255,95,59,0.35); }

/* 카메라 효과 라이브러리 — 사이드탭 팝오버(좌 카테고리 / 우 카드 그리드) */
.cam-pop { width: 520px; max-height: 320px; padding: 0; overflow: hidden; }
.cam-lib { display: flex; height: 320px; }
.cam-cats { width: 152px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 8px; gap: 2px; background: var(--surface-1); }
.cam-cat { text-align: left; font-size: 13px; padding: 9px 11px; border-radius: var(--r-sm); color: var(--fg-muted); }
.cam-cat:hover { color: var(--fg); background: var(--surface-3); }
.cam-cat.on { color: var(--fg); background: var(--surface-3); font-weight: 600; }
.cam-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; align-content: start; }
.cam-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-1); text-align: left; }
.cam-card:hover { border-color: var(--accent); }
.cam-card.on { border-color: var(--accent); background: var(--accent-dim); }
.cam-card-vis { width: 100%; height: 42px; border-radius: var(--r-sm); background: linear-gradient(135deg, #2a2a2c, #161618); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); margin-bottom: 4px; }
.cam-card-name { font-size: 12.5px; font-weight: 600; color: var(--fg); }
.cam-card-desc { font-size: 11px; color: var(--fg-muted); }

/* 하단 그라데이션 — 수집 단계 + 기획(2)·콘티(3) 단계의 플로팅 버튼 아래에도 깔아줌 */
.canvas-body::after { display: none; }
.stage-canvas[data-step="1"] .canvas-body::after { display: block; }
.stage-canvas[data-step="2"] .canvas-body::after,
.stage-canvas[data-step="3"] .canvas-body::after {
  display: block; height: 120px; margin-top: -120px;
}

/* 프레임 박스(시작/끝)는 영상 편집에서만 — display:flex가 hidden을 덮어쓰던 버그 수정 */
.em-frames[hidden] { display: none !important; }

/* 기획안 단계 — 카드 폭 더 넓게(양쪽 여백 축소) */
.stage-canvas[data-step="2"] .ws-col { max-width: 1340px; }
#scn-cards { gap: 18px; }

/* ══════════════════════════════════════════════
   v9 — 단계 이름 좌상단 · 기획 카드 더 넓게 · 슬레이트 로딩 애니메이션
   ══════════════════════════════════════════════ */
/* 단계 이름 — 워크스페이스 좌상단(로고 아래), 헤더/스테퍼와 분리 */
.canvas-header { position: relative; }
.stage-canvas { position: relative; }
.canvas-label {
  display: block !important; position: absolute; left: 24px; top: 56px; z-index: 8;
  font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.2px; text-transform: none;
}

/* 기획안 카드 더 넓게 */
.stage-canvas[data-step="2"] .ws-col { max-width: 1460px; }

/* 슬레이트(클래퍼보드) 로딩 애니메이션 */
.slate-loader { display: flex; justify-content: center; margin-bottom: 16px; }
.slate-arm { transform-box: fill-box; transform-origin: left bottom; animation: slate-clap 1.15s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes slate-clap {
  0%   { transform: rotate(-30deg); }
  28%  { transform: rotate(0deg); }
  40%  { transform: rotate(-9deg); }
  52%  { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}

/* ══════════════════════════════════════════════
   v10 — 업로드 정방형 / 슬레이트 화이트·스냅 / 카메라 4열 / 영상 크게·인풋바 고정 / 단계 타이틀
   ══════════════════════════════════════════════ */
/* 제품 사진 첨부 — 정방형 박스, '+'만, 점선 제거 */
.intake-upload {
  width: 64px; height: 64px; padding: 0; border-radius: var(--r-sm);
  border: 1px solid var(--border-str); background: var(--surface-2);
  justify-content: center; gap: 0; font-size: 0;
}
.intake-upload::before { font-size: 26px; color: var(--fg-muted); }
.intake-upload-row { align-items: flex-end; }

/* 슬레이트 — 흰색 아웃라인, 더 작게, '탁!' 스냅 */
.slate-loader svg { color: #fff; }
.slate-arm { transform-box: fill-box; transform-origin: left bottom; animation: slate-clap 1s cubic-bezier(.3,0,.2,1) infinite; }
@keyframes slate-clap {
  0%, 100% { transform: rotate(0deg); }
  22%      { transform: rotate(-32deg); }
  38%      { transform: rotate(0deg); }   /* 탁! 닫힘 */
  48%      { transform: rotate(-5deg); }  /* 살짝 반동 */
  56%      { transform: rotate(0deg); }
}

/* 카메라 라이브러리 — 4열, 가로로 더 길게 */
.cam-pop { width: 700px; }
.cam-grid { grid-template-columns: repeat(4, 1fr); }

/* 단계 타이틀 — 워크스페이스 콘텐츠 상단(좌측 정렬) */
.ws-step-title { font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: -0.2px; margin: 2px 0 10px 2px; align-self: flex-start; }

/* 영상 모달 — 영상 크게 + 도구/인풋바 잘림 방지 */
.em-main-wrap { min-height: 0; }
#editModal.em-video .em-main { min-height: 0; flex: 1 1 0; }
#editModal.em-video .em-main img, #editModal.em-video .em-main video {
  width: 100% !important; height: 100% !important; max-height: 100% !important;
  aspect-ratio: auto !important; object-fit: contain !important; background: #000;
}
.em-pane[data-pane="media"] { overflow: hidden; }

/* ══════════════════════════════════════════════
   v11 — 옵션2: 전 단계 좌측 기준선 통일 (폭 통일 + 설문 좌측 정렬)
   ══════════════════════════════════════════════ */
.ws-col { max-width: 1200px; }                          /* 전 단계 동일 폭 → 좌측 모서리 일치 */
.stage-canvas[data-step="2"] .ws-col { max-width: 1200px; }   /* 기획도 동일 폭(좌측 라인 통일) */
.survey-card { align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; }
.ws-step-title { margin-left: 0; }

/* ══════════════════════════════════════════════
   v12 — feedback.html 반영
   ① 영상 16:9 ② 사이드시트 슬라이드+콘텐츠 좌측 이동 ③ 인풋바 확장/엔터
   ④ 사이드시트 재디자인+인풋바 ⑤ 히스토리 카드 재디자인 ⑥ 메시/오로라 로딩 ⑦ 설문 중앙/확대
   ══════════════════════════════════════════════ */

/* ── ① 영상 편집 모달 16:9 (세로로 길어 보이던 문제) ── */
#editModal.em-video .em-main { min-height: 0; flex: 1 1 0; padding: 0; }
#editModal.em-video .em-main video {
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 100% !important;
  aspect-ratio: 16 / 9 !important; object-fit: contain !important;
  background: #000; border-radius: var(--r-md);
}

/* ── ② 사이드시트가 열리면 편집모달/워크스페이스 콘텐츠가 시트 폭만큼 왼쪽으로 ── */
:root { --sheet-w: 360px; }
.chat-sheet { z-index: 340; }   /* 편집모달(300) 위로 */
.edit-modal { transition: right .26s cubic-bezier(.4,0,.2,1); }
.main-area  { transition: margin-right .26s cubic-bezier(.4,0,.2,1); }
body:has(.chat-sheet.open) .edit-modal.open { right: var(--sheet-w); }
body:has(.chat-sheet.open) .main-area { margin-right: var(--sheet-w); }
/* 공간이 줄어든 만큼 살짝 축소(콘텐츠/히스토리/타임라인이 자연스럽게 재배치) */
body:has(.chat-sheet.open) #editModal.em-video .em-main video { max-height: 92% !important; }

/* ── ③ 인풋바 우측 상단 확장 버튼 + 확장 모드 ── */
.chat-input-bar, .em-inputbar { position: relative; }
.inbar-expand {
  position: absolute; top: 8px; right: 10px; z-index: 4;
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); background: transparent; border: 1px solid transparent;
}
.inbar-expand:hover { color: var(--fg); background: var(--surface-2); border-color: var(--border); }
.chat-input-bar .chat-textarea, .em-inputbar .em-input { padding-right: 30px; }
.chat-input-bar.expanded .chat-textarea,
.sheet-inputbar.expanded .chat-textarea,
.em-inputbar.expanded .em-input { max-height: 50vh !important; }
/* 확장 버튼 아이콘: 펼침 ↔ 접힘 */
.inbar-expand.but-collapse svg { transform: rotate(180deg); }

/* ── ④ 사이드시트 재디자인 (도우미 텍스트 제거 → 닫기 버튼만, 하단 인풋바) ── */
.chat-sheet-head { justify-content: flex-end; height: 44px; border-bottom: 1px solid var(--sep); }
.chat-sheet-body { padding-bottom: 8px; }
/* 시트 하단 인풋바 — 워크스페이스 인풋바 축소판 */
.chat-sheet .sheet-inputbar {
  flex-shrink: 0; width: auto; max-width: none;
  border-radius: 12px; padding: 10px 12px 9px; gap: 8px;
  margin: 0 12px 12px;
}
.chat-sheet .sheet-inputbar .chat-textarea { font-size: 14px; max-height: 120px; }
.chat-sheet .sheet-inputbar .inbar-plus { width: 30px; height: 30px; }
.chat-sheet .sheet-inputbar .send-btn { width: 32px; height: 32px; }
.chat-sheet .sheet-inputbar .inbar-expand { top: 7px; right: 9px; }

/* ── ⑤ 히스토리 카드 재디자인 (history_1.png / history_2.png) ── */
.em-history {
  width: 230px; flex-shrink: 0; padding: 0;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.em-hist-list {
  flex: 1; overflow-y: auto; padding: 8px 4px 4px;
  display: flex; flex-direction: column; justify-content: flex-end;  /* 최신=아래, 위로 쌓임 */
  gap: 10px; min-height: 0;
}
/* 위로 넘친 히스토리 암시 — 상단 어두운 그라데이션 */
.em-hist-topfade {
  position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, #000 6%, rgba(0,0,0,0.82) 42%, transparent);
}
.em-hist-item {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 9px 9px 9px;
}
.em-hist-item.current { border-color: var(--accent); }
.em-hist-head { display: flex; flex-direction: column; gap: 5px; }
.em-hist-label { font-size: 10px; font-weight: 600; color: var(--fg-muted); letter-spacing: .3px; }
.em-hist-prompt-wrap { position: relative; }
.em-hist-prompt {
  font-size: 11.5px; line-height: 1.55; color: var(--fg-sec);
  white-space: pre-wrap; word-break: break-word; padding-right: 16px;
}
.em-hist-prompt.clamp {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.em-hist-noprompt { color: var(--fg-dis); font-style: italic; padding-right: 0; }
.em-hist-expand {
  position: absolute; top: -1px; right: -3px;
  width: 18px; height: 18px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); background: transparent;
}
.em-hist-expand:hover { color: var(--fg); background: var(--surface-3); }
.em-hist-expand.open svg { transform: rotate(180deg); }
.em-hist-media {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden;
  background: #000; cursor: pointer; border: 1px solid var(--border);
}
.em-hist-media img, .em-hist-media video { width: 100%; height: 100%; object-fit: cover; }
.em-hist-item.current .em-hist-media { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 영상 수정 단계: 동일 디자인 (타임라인 위에서부터 위로 쌓임 — 우측 컬럼에서 하단 정렬로 표현) */
.em-history.em-history-video .em-hist-list { justify-content: flex-end; }

/* ── ⑥ 모노톤 메시/오로라 그라데이션 애니메이션 (loading.png) ── */
/* 위치뿐 아니라 크기(스케일)까지 함께 변형 → '원이 미끄러지는' 느낌 대신 유기적으로 뭉쳤다 퍼지는 모핑 */
@keyframes mesh-aurora-shift {
  0%   { background-position: 0% 50%, 100% 50%, 50% 0%,  50% 100%;  background-size: 200% 200%, 220% 220%, 200% 200%, 220% 220%, 100% 100%; }
  25%  { background-position: 58% 16%, 40% 84%, 16% 64%, 84% 26%;   background-size: 290% 240%, 200% 290%, 260% 200%, 200% 260%, 100% 100%; }
  50%  { background-position: 100% 50%, 0% 50%, 50% 100%, 50% 0%;   background-size: 230% 290%, 290% 230%, 200% 270%, 290% 200%, 100% 100%; }
  75%  { background-position: 40% 84%, 60% 16%, 84% 42%, 16% 74%;   background-size: 260% 200%, 200% 260%, 290% 230%, 230% 290%, 100% 100%; }
  100% { background-position: 0% 50%, 100% 50%, 50% 0%,  50% 100%;  background-size: 200% 200%, 220% 220%, 200% 200%, 220% 220%, 100% 100%; }
}
.mesh-aurora {
  background:
    radial-gradient(42% 60% at 22% 32%, rgba(150,152,162,0.40), transparent 62%),
    radial-gradient(46% 56% at 78% 42%, rgba(96,98,106,0.42), transparent 62%),
    radial-gradient(52% 52% at 50% 78%, rgba(176,178,188,0.26), transparent 60%),
    radial-gradient(48% 48% at 38% 70%, rgba(96,98,108,0.42), transparent 62%),
    #131315;
  background-size: 200% 200%, 220% 220%, 200% 200%, 220% 220%, 100% 100%;
  animation: mesh-aurora-shift 9s ease-in-out infinite;
}
/* 생성 중 콘텐츠 박스 스켈레톤 = 메시/오로라(선형 스윕 대체)
   베이스를 배경(#131315)보다 한 단계 밝게 올려 스켈레톤이 배경에 묻히지 않게 한다(무드 유지). */
/* 경계선 없이 은은하게 번지는 메시/오로라 — inset 음수로 박스 밖까지 채우고 큰 블러를 얹어
   원형 경계를 완전히 녹인다(부모 overflow:hidden이 박스 가장자리를 깔끔히 컷). */
.skeleton-shimmer { background: #202023; position: relative; overflow: hidden; }
.skeleton-shimmer::after {
  content: ''; position: absolute; inset: -32%; pointer-events: none;
  background:
    radial-gradient(40% 54% at 24% 30%, rgba(178,180,192,0.40), transparent 72%),
    radial-gradient(44% 50% at 76% 44%, rgba(120,122,134,0.40), transparent 74%),
    radial-gradient(50% 48% at 50% 78%, rgba(200,202,214,0.28), transparent 74%),
    radial-gradient(46% 46% at 36% 66%, rgba(92,94,106,0.38), transparent 74%);
  background-size: 230% 230%, 250% 250%, 230% 230%, 250% 250%;
  filter: blur(38px);
  animation: mesh-aurora-shift 12s ease-in-out infinite;
  transform: none;
}
/* 카드 배열마다 애니메이션 위상을 차등 부여 → 동시에 맥동하지 않고 fluid하게 흐른다 */
#scn-cards .skeleton-shimmer:nth-child(2)::after { animation-delay: -2.4s; }
#scn-cards .skeleton-shimmer:nth-child(3)::after { animation-delay: -4.8s; }
#scn-cards .skeleton-shimmer:nth-child(4)::after { animation-delay: -7.2s; }
/* 수집 진입 로딩 — 워크스페이스에 은은한 메시/오로라(테두리는 배경색으로 페이드) + 중앙 작은 텍스트 */
.ws-hero-loading {
  position: relative; width: 100%; max-width: 860px; min-height: 320px;
  border-radius: 20px; margin: 4vh auto 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  /* 테두리를 배경색으로 페이드 → 은은하게 깔림 */
  -webkit-mask: radial-gradient(120% 120% at 50% 50%, #000 52%, transparent 92%);
          mask: radial-gradient(120% 120% at 50% 50%, #000 52%, transparent 92%);
}
.ws-hero-loading-text {
  position: relative; z-index: 2;
  font-size: 13.5px; color: var(--fg-sec); letter-spacing: -0.1px;
}

/* ── ⑦ 수집 설문 — 중앙 정렬 + 살짝 확대 ── */
.survey-card {
  align-self: center !important; margin-left: auto !important; margin-right: auto !important;
  max-width: 760px !important; width: 100%;
}
.survey-title { text-align: center; }
.survey-card .intake-label { font-size: 13.5px; }
.survey-card .intake-input, .survey-card .intake-area { font-size: 14.5px; padding: 11px 13px; }
.survey-card .intake-seg-btn, .survey-card .intake-chip { font-size: 13.5px; padding: 8px 14px; }
/* 질문(=intake-field) 사이 간격을 넓혀 한 질문 묶음(라벨·태그·입력)이 또렷이 구분되게.
   질문 내부 간격(gap:7px)의 ~3배 → 질문 간 위계가 분명해짐. 모든 설문 카테고리에 공통 적용. */
.survey-card .intake-field { margin-bottom: 20px; }
/* '직접 입력' 보조 입력칸은 별도 질문이 아니라 바로 위 카테고리/타겟 선택의 일부 → 위로 당겨 붙임 */
.survey-card .intake-field:has(> input[data-key="categoryOther"]),
.survey-card .intake-field:has(> input[data-key="targetOther"]) { margin-top: -13px; }
.survey-section { scroll-margin-top: 40vh; }
.survey-section + .survey-section { margin-top: 4px; }

/* ══════════════════════════════════════════════
   v13 — feedback 2차
   사이드시트 채팅(chat_1/chat_2) · 크레딧 승인 · 확장버튼 · 설문 로딩 풀블리드
   · 설문 첨부 행 · 브리프 모달 재구성 · 카메라 팝오버 여백 · 히스토리 위치/박스 제거 · 콘텐츠 확대
   ══════════════════════════════════════════════ */

/* ── ⑥ 설문 진입 로딩 — 워크스페이스 전체에 다크·은은한 메시(경계 안 보이게) ── */
.ws-hero-loading { display: none !important; }   /* 구 박스형 로딩 폐기 */
.survey-loading {
  position: absolute; inset: 0; z-index: 6; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #050506;   /* 어두운 베이스 — 위에서 무채색 오로라 블롭이 각자 떠돈다 */
}
/* ── 무채색 오로라: CSS morphing blob ─────────────────────────────────
   원형 radial-gradient 대신 border-radius를 변형(morph)해 비정형 유기체 형태를
   만들고 블러를 얹으면, 블롭끼리 원으로 충돌하지 않고 자연스럽게 이어진다.
   JS 위치 이동 없음 — 순수 CSS 애니메이션으로만 구동. */
.aurora-field {
  position: absolute; inset: -25%; width: 150%; height: 150%;
  z-index: 0; pointer-events: none;
  filter: blur(42px);   /* 필드 전체 블러: 블롭 간 잔여 경계까지 소멸 */
}
.aurora-blob {
  position: absolute;
  background: rgba(148,150,162,0.36);   /* 무채색 — 밝기만 인지(살짝 더 또렷하게) */
  mix-blend-mode: screen;
  filter: blur(52px);   /* 개별 블러 + 필드 블러 합산 ~94px */
}

/* 모핑 keyframes — 각도·비율이 모두 달라 원처럼 보이지 않음 */
@keyframes morph-1 {
  0%,100%{ border-radius:62% 38% 46% 54%/60% 44% 56% 40%; }
  25%    { border-radius:44% 56% 62% 38%/52% 62% 38% 48%; }
  50%    { border-radius:56% 44% 36% 64%/38% 56% 44% 62%; }
  75%    { border-radius:36% 64% 58% 42%/58% 36% 64% 42%; }
}
@keyframes morph-2 {
  0%,100%{ border-radius:50% 50% 66% 34%/40% 70% 30% 60%; }
  30%    { border-radius:70% 30% 44% 56%/60% 40% 70% 30%; }
  60%    { border-radius:36% 64% 50% 50%/50% 36% 64% 50%; }
}
@keyframes morph-3 {
  0%,100%{ border-radius:72% 28% 38% 62%/52% 68% 32% 48%; }
  40%    { border-radius:38% 62% 72% 28%/32% 52% 68% 48%; }
  70%    { border-radius:56% 44% 54% 46%/66% 34% 54% 46%; }
}
@keyframes morph-4 {
  0%,100%{ border-radius:44% 56% 58% 42%/68% 44% 56% 32%; }
  33%    { border-radius:64% 36% 42% 58%/40% 62% 38% 60%; }
  66%    { border-radius:36% 64% 68% 32%/56% 36% 64% 44%; }
}
@keyframes morph-5 {
  0%,100%{ border-radius:60% 40% 44% 56%/36% 60% 40% 64%; }
  50%    { border-radius:40% 60% 60% 40%/62% 38% 58% 42%; }
}
/* 미세 float — 형태 변형에 가려 이동이 거의 안 보임 */
@keyframes float-1 { 0%,100%{transform:translate(  0%,  0%)}  50%{transform:translate(  4%, -5%)} }
@keyframes float-2 { 0%,100%{transform:translate(  0%,  0%)}  50%{transform:translate( -5%,  4%)} }
@keyframes float-3 { 0%,100%{transform:translate(  0%,  0%)}  50%{transform:translate(  3%,  6%)} }
@keyframes float-4 { 0%,100%{transform:translate(  0%,  0%)}  50%{transform:translate( -4%, -4%)} }
@keyframes float-5 { 0%,100%{transform:translate(  0%,  0%)}  50%{transform:translate(  6%,  2%)} }

/* 각 블롭: 다른 크기·위치·속도·딜레이 */
.aurora-blob[data-idx="0"]{width:72%;height:68%;top: 4%;left: 6%;opacity:.30;animation:morph-1 11s ease-in-out infinite,float-1 15s ease-in-out infinite;animation-delay:0s,-3s}
.aurora-blob[data-idx="1"]{width:65%;height:76%;top:22%;left:32%;opacity:.27;animation:morph-2 14s ease-in-out infinite,float-2 18s ease-in-out infinite;animation-delay:-6s,-10s}
.aurora-blob[data-idx="2"]{width:78%;height:62%;top:38%;left:14%;opacity:.25;animation:morph-3 11s ease-in-out infinite,float-3 16s ease-in-out infinite;animation-delay:-3s,-7s}
.aurora-blob[data-idx="3"]{width:60%;height:72%;top:10%;left:52%;opacity:.28;animation:morph-4 15s ease-in-out infinite,float-4 20s ease-in-out infinite;animation-delay:-9s,-4s}
.aurora-blob[data-idx="4"]{width:70%;height:66%;top:52%;left:42%;opacity:.26;animation:morph-5 12s ease-in-out infinite,float-5 14s ease-in-out infinite;animation-delay:-4s,-12s}
.survey-loading .ws-hero-loading-text {
  position: relative; z-index: 2;
  font-size: 13.5px; color: var(--fg-sec); letter-spacing: -0.1px;
}

/* ── ④/⑨ 사이드시트 채팅 (chat_1 레이아웃 · chat_2 다크) ── */
.chat-sheet { background: #161618; }
.chat-sheet-body .msg { max-width: 100%; }
.chat-sheet-body .msg.ai .bubble { background: #232325; color: var(--fg-sec); }
.chat-sheet-body .msg.user .bubble { background: var(--surface-3); color: var(--fg); }
/* 선택 카드 = 어두운 박스 + 풀폭 옵션 행(chat_1) */
.chat-sheet-body .choice-card {
  background: #1c1c1e; border: 1px solid var(--border-str); max-width: 100%;
}
.chat-sheet-body .choice-card-text { font-size: 14px; color: var(--fg); font-weight: 600; }
.chat-sheet-body .choice-btns { flex-direction: column; gap: 6px; }
.chat-sheet-body .choice-btn {
  width: 100%; text-align: left; padding: 11px 13px; border-radius: 10px;
  background: #232325; border: 1px solid var(--border); color: var(--fg-sec); font-size: 13.5px;
}
.chat-sheet-body .choice-btn:hover { border-color: var(--accent); background: #2a2a2c; }
.chat-sheet-body .choice-btn.chosen { background: #fff; color: #000; border-color: #fff; }
/* 진행/대기 행 (생성을 기다리는 중...) */
.chat-sheet-body .generating-row { background: transparent; padding: 8px 2px; color: var(--fg-muted); }
.dots-loader { display: inline-flex; align-items: center; gap: 4px; }
.dots-loader .dot { width: 5px; height: 5px; }

/* ── ⑩ 영상 크레딧 승인 카드 (chat_2) ── */
.credit-approval {
  background: #1c1c1e; border: 1px solid var(--border-str); border-radius: 14px;
  padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 12px; max-width: 100%;
}
.credit-approval.resolved { opacity: .7; }
.ca-q { font-size: 14px; color: var(--fg); line-height: 1.5; }
.ca-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ca-btn { padding: 7px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.ca-reject { background: transparent; color: var(--fg-muted); border: 1px solid var(--border-str); }
.ca-reject:hover { color: var(--fg); }
.ca-approve { background: #fff; color: #000; border: 1px solid #fff; }
.ca-approve::before { content: '✓ '; }
.ca-approve:hover { opacity: .9; }
.ca-btn:disabled { opacity: .45; cursor: default; }
.ca-dontask {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center;
  border-top: 1px solid var(--sep); padding-top: 10px; cursor: pointer;
}
.ca-dontask-cb { grid-row: span 2; align-self: start; margin-top: 2px; accent-color: #fff; }
.ca-dontask-main { font-size: 12.5px; color: var(--fg-sec); }
.ca-dontask-desc { font-size: 11px; color: var(--fg-muted); line-height: 1.45; grid-column: 2; }

/* ── ⑬ 설문 첨부 행 — 썸네일 옆에 '＋' 박스 ── */
.survey-card .intake-upload-row, .intake-upload-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.intake-upload-row .staged-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.intake-upload-field .staged-thumb { width: 64px; height: 64px; }

/* ── ⑭ 브리프 확인 모달 — 더 어둡게 + 섹션 그룹으로 보기 쉽게 ── */
.brief-modal { background: #121214; border-color: var(--border); }
.brief-modal-head { background: #0e0e10; }
.brief-modal-body { gap: 12px; }
.bm-group {
  display: flex; flex-direction: column; gap: 9px;
  background: #1a1a1c; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 14px;
}
.bm-group-title {
  font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: -0.2px;
  padding-bottom: 8px; border-bottom: 1px solid var(--sep);
}
.bm-group .bm-field label { text-transform: none; font-size: 11.5px; color: var(--fg-muted); letter-spacing: 0; }
.bm-group .bm-field input, .bm-group .bm-field textarea { background: #242426; border-color: var(--border); }
.bm-group .bm-field textarea { min-height: 44px; }

/* ── ⑮ 카메라 라이브러리 팝오버 — 오른쪽 빈 여백 제거(lib가 폭을 꽉 채우도록) ── */
.cam-lib { width: 100%; }

/* ── ⑮ 히스토리 — 상단부터 채우고(너무 아래로 처지지 않게), 감싸는 박스 제거, 썸네일 위·프롬프트 아래(3줄) ── */
.em-history { width: 210px; }
.em-hist-list { justify-content: flex-start; padding: 10px 4px 4px; gap: 16px; }
.em-hist-item {
  background: transparent; border: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.em-hist-item.current { border: none; }
.em-hist-media {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden;
  background: #000; cursor: pointer; border: 1px solid var(--border);
}
.em-hist-item.current .em-hist-media { outline: 2px solid var(--accent); outline-offset: -2px; }
.em-hist-prompt-wrap { position: relative; padding-right: 2px; }
.em-hist-prompt { font-size: 11.5px; line-height: 1.55; color: var(--fg-sec); white-space: pre-wrap; word-break: break-word; padding-right: 16px; }
.em-hist-prompt.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 펼친 프롬프트가 너무 길면 자체 스크롤 — 닫기(접기) 버튼이 화면 밖으로 밀려 안 보이던 문제 해소 */
.em-hist-prompt:not(.clamp) { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.em-hist-noprompt { color: var(--fg-dis); font-style: italic; padding-right: 0; }
.em-hist-expand { position: absolute; top: 0; right: -3px; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); background: transparent; }
.em-hist-expand:hover { color: var(--fg); background: var(--surface-3); }
.em-hist-expand.open svg { transform: rotate(180deg); }
/* 프롬프트 복사 아이콘 — 프롬프트 칸 안쪽 우측 하단(생략 표시 영역) */
.em-hist-copy { position: absolute; bottom: 0; right: -3px; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); background: transparent; cursor: pointer; }
.em-hist-copy:hover { color: var(--fg); background: var(--surface-3); }
/* 상단 그라데이션은 유지하되 배경색에 맞춤 */
.em-hist-topfade { background: linear-gradient(to bottom, #000 6%, rgba(0,0,0,0.7) 40%, transparent); }

/* ── ⑮ 콘티/이미지 수정 콘텐츠 박스 크게 ── */
#editModal:not(.em-video) .em-main { min-height: 0; flex: 1 1 0; }
#editModal:not(.em-video) .em-main img {
  max-width: 100% !important; max-height: 82vh !important;
  width: auto !important; height: auto !important; object-fit: contain !important;
}

/* ══════════════════════════════════════════════
   v14 — feedback 3차
   ══════════════════════════════════════════════ */

/* ── 사이드시트 헤더: 'Agent' 타이틀 + 닫기(양끝 정렬) ── */
.chat-sheet-head { justify-content: space-between; }
.chat-sheet-title { font-size: 13px; font-weight: 600; color: var(--fg); }

/* ── 인풋바 확장 버튼이 실제로 동작하도록: flex:1(basis:0)이 height를 무시하던 문제 해제 ──
   텍스트영역을 flex 비신축으로 바꿔 인라인 height/min-height가 그대로 적용되게 한다. */
.chat-input-bar .chat-textarea,
.em-inputbar .em-input,
.chat-sheet .sheet-inputbar .chat-textarea { flex: 0 0 auto; }
/* 확장 시: 줄 수에 맞춰 위로 늘어나되 최소 높이를 보장(접힘/펼침이 항상 눈에 보이게) */
.chat-input-bar.expanded .chat-textarea,
.sheet-inputbar.expanded .chat-textarea,
.em-inputbar.expanded .em-input { min-height: 160px !important; max-height: 50vh !important; }

/* ── 설문 진입 로딩 그라데이션 — 밝은 부분을 더 밝게(움직임이 보이도록) ── */
.survey-loading {
  background:
    radial-gradient(40% 55% at 24% 34%, rgba(196,200,214,0.42), transparent 60%),
    radial-gradient(46% 52% at 78% 44%, rgba(150,156,172,0.40), transparent 60%),
    radial-gradient(56% 56% at 52% 82%, rgba(214,218,230,0.30), transparent 62%),
    radial-gradient(44% 46% at 40% 68%, rgba(120,126,142,0.38), transparent 62%),
    #000;
  background-size: 220% 220%, 240% 240%, 220% 220%, 240% 240%, 100% 100%;
  animation: mesh-aurora-shift 8s ease-in-out infinite;
}

/* ── 히스토리 — 썸네일/프롬프트가 '하단'에 쌓이고 바닥과 약간의 거리 ── */
.em-hist-list { justify-content: flex-end; padding-bottom: 18px; padding-top: 10px; }
.em-history.em-history-video .em-hist-list { justify-content: flex-end; padding-bottom: 18px; }

/* ── 설문 마지막 '브리프 확인' = 하단 중앙 플로팅 버튼(마지막 문항 보이면 등장) ── */
.survey-card .survey-float-actions {
  position: fixed; left: 50%; bottom: 30px; z-index: 60;
  transform: translateX(-50%) translateY(16px);
  opacity: 0; pointer-events: none; margin: 0; justify-content: center;
  transition: opacity .25s ease, transform .25s ease;
}
.survey-card .survey-float-actions.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
.survey-card .survey-float-actions .intake-submit {
  font-size: 16px; font-weight: 600; padding: 15px 44px; border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* ── 좌측 네비 단계별 타이틀(아이콘 아래) ── */
.step-label {
  display: block !important;
  font-size: 10px; font-weight: 500; color: var(--fg-muted);
  text-align: center; letter-spacing: -0.2px; line-height: 1.1; margin-top: 1px;
}
.step-btn.current .step-label { color: var(--fg); font-weight: 600; }
.step-btn.done .step-label { color: var(--fg-sec); }
.step-btn { padding: 12px 4px; gap: 4px; }

/* ══════════════════════════════════════════════
   v15 — feedback 4차
   ══════════════════════════════════════════════ */

/* ── ① 편집 모달 인풋바 확장 = 레이아웃을 밀지 않고 윗 레이어로 오버레이(콘텐츠를 가림) ── */
.em-inputbar.expanded {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 20;
  max-width: 760px; margin-left: auto; margin-right: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.6);
}

/* ── ② 콘티/이미지 수정 탭 메인 콘텐츠 더 크게 ── */
.em-pane[data-pane="media"] { padding: 12px; gap: 10px; }
.em-history { width: 184px; }
#editModal:not(.em-video) .em-main { min-height: 0; flex: 1 1 0; }
#editModal:not(.em-video) .em-main img {
  max-width: 100% !important; max-height: 90vh !important;
  width: auto !important; height: auto !important; object-fit: contain !important;
}

/* ── ③ 브리프(원장) 드로어 — 상단 로고 안 가리게 + 네비게이션 아래 레이어 ── */
.step-nav { position: relative; z-index: 60; }   /* 네비가 드로어 위에 오도록 */
.ledger-drawer { top: 52px; z-index: 58; }        /* 로고 아래에서 시작. 상단 단계 타이틀·설명(#canvasGuide z:50) 위, 네비(z:60) 아래 */
.ledger-overlay { z-index: 54; }                   /* 오버레이도 상단 텍스트(50) 위 → 드로어 열릴 때 상단 문구가 위로 삐져나오지 않음 */

/* ── ④ 설문 로딩 그라데이션 — 중앙 위주로 움직이고 테두리(네비 경계 포함)는 배경색과 맞춤 ──
   베이스는 #000, 오로라는 ::before에서 가운데로 모으고 가장자리를 마스크로 페이드 → 끊김 없음 */
.survey-loading { background: #000 !important; animation: none !important; overflow: hidden; }
.survey-loading::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 42% 40%, rgba(200,204,216,0.50), transparent 60%),
    radial-gradient(42% 46% at 60% 56%, rgba(150,156,172,0.46), transparent 60%),
    radial-gradient(46% 46% at 52% 70%, rgba(214,218,230,0.32), transparent 62%);
  background-size: 170% 170%;
  animation: mesh-aurora-shift 9s ease-in-out infinite;
  -webkit-mask: radial-gradient(115% 100% at 50% 50%, #000 34%, transparent 80%);
          mask: radial-gradient(115% 100% at 50% 50%, #000 34%, transparent 80%);
}

/* ── ⑤ 설문 자석 스크롤(스냅) — 자동 스크롤 대신 각 카테고리가 탁탁 정렬 ── */
.stage-canvas[data-step="1"] .canvas-body {
  scroll-snap-type: y proximity;
  scroll-padding-top: 84px;
}
.survey-section {
  scroll-snap-align: start;
  scroll-margin-top: 84px;   /* 헤더/단계 타이틀 아래에서 정렬되도록 */
}

/* ══════════════════════════════════════════════
   v16 — feedback 5차
   ══════════════════════════════════════════════ */

/* ── 프로젝트 화면 좌측 상단 로고가 네비(z60)에 가려지던 문제 → 로고를 더 위로 ── */
.app-logo-row { z-index: 70; }

/* ── 마지막 '금지 사항'이 플로팅 버튼과 겹치지 않게 하단 여백 확보(더 스크롤 가능) ── */
.survey-card .intake-body { padding-bottom: 150px; }

/* ── 설문 로딩 — 그라데이션을 더 작게·중앙에 모으고 움직임을 소극적으로, 테두리까지 안 가게 ── */
@keyframes aurora-soft {
  0%   { background-position: 46% 44%, 54% 56%, 50% 62%; }
  50%  { background-position: 54% 50%, 46% 50%, 50% 70%; }
  100% { background-position: 46% 44%, 54% 56%, 50% 62%; }
}
.survey-loading::before {
  background:
    radial-gradient(26% 32% at 46% 44%, rgba(202,206,218,0.55), transparent 64%),
    radial-gradient(28% 30% at 56% 56%, rgba(150,156,172,0.50), transparent 64%),
    radial-gradient(30% 30% at 50% 64%, rgba(214,218,230,0.34), transparent 66%);
  background-size: 130% 130%;
  animation: aurora-soft 10s ease-in-out infinite;
  -webkit-mask: radial-gradient(86% 78% at 50% 52%, #000 18%, transparent 64%);
          mask: radial-gradient(86% 78% at 50% 52%, #000 18%, transparent 64%);
}

/* ── 레퍼런스 영상 URL + [분석] 버튼 + 인라인 분석 결과 ── */
.ref-video-row { display: flex; gap: 8px; align-items: stretch; }
.ref-video-row .intake-input { flex: 1; }
.ref-analyze-btn {
  flex-shrink: 0; padding: 0 18px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--point), var(--point-deep)); color: white; border: 1px solid var(--border-str);
  font-size: 13px; font-weight: 600;
}
.ref-analyze-btn:hover { filter: brightness(1.12); border-color: var(--accent); }
.ref-analyze-btn:disabled { opacity: .5; cursor: default; }
.ref-video-result {
  margin-top: 10px; display: flex; flex-direction: column; gap: 10px;
  padding: 13px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
}
.ref-video-result[hidden] { display: none; }
.ref-video-loading, .ref-video-fail { font-size: 12.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.ref-video-sheet { font-size: 12.5px; color: var(--fg-sec); line-height: 1.6; white-space: pre-wrap; }
.ref-video-pick-label { font-size: 12px; color: var(--fg-muted); }
.ref-trait-apply {
  align-self: flex-start; padding: 8px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.ref-trait-apply:hover { opacity: .9; }
.ref-trait-saved { font-size: 12px; color: var(--green); margin-left: 8px; }

/* ══════════════════════════════════════════════
   v17 — feedback 6차
   ══════════════════════════════════════════════ */

/* ── 설문 로딩: 움직임이 확실히 보이도록(테두리는 여전히 배경색) ── */
@keyframes aurora-move {
  0%   { background-position: 22% 28%, 78% 62%, 50% 80%; }
  25%  { background-position: 62% 40%, 38% 70%, 66% 52%; }
  50%  { background-position: 78% 68%, 22% 32%, 38% 74%; }
  75%  { background-position: 42% 78%, 66% 28%, 58% 46%; }
  100% { background-position: 22% 28%, 78% 62%, 50% 80%; }
}
.survey-loading::before {
  background:
    radial-gradient(30% 36% at 50% 50%, rgba(206,210,222,0.60), transparent 62%),
    radial-gradient(32% 34% at 50% 50%, rgba(150,156,172,0.52), transparent 62%),
    radial-gradient(34% 34% at 50% 50%, rgba(214,218,230,0.38), transparent 64%);
  background-size: 200% 200%, 210% 210%, 200% 200%;
  animation: aurora-move 7s ease-in-out infinite;
  -webkit-mask: radial-gradient(82% 74% at 50% 50%, #000 22%, transparent 62%);
          mask: radial-gradient(82% 74% at 50% 50%, #000 22%, transparent 62%);
}

/* ── 제작 브리프 모달: 뒷 배경(설문·첨부 썸네일)이 비치지 않게 불투명 처리 ── */
.brief-modal-overlay { background: rgba(0,0,0,0.97); backdrop-filter: blur(6px); }

/* ── 기획안 채택/재생성 버튼을 카드 하단으로 정렬(가장 긴 카드 기준 높이 통일) ── */
#scn-cards { align-items: stretch; }
.scenario-card { height: 100%; }
.scenario-card-actions { margin-top: auto; }

/* 레퍼런스 분석 실패 사유 텍스트 */
.ref-video-fail-reason { color: var(--fg-sec); font-size: 12px; }

/* ══════════════════════════════════════════════
   v18 — feedback 7차
   ══════════════════════════════════════════════ */

/* ── 랜딩: 프로젝트 네임/날짜 키우기 ── */
.proj-name { font-size: 19px; }
.proj-date { font-size: 14px; margin-top: 3px; }

/* ── 랜딩: +새 프로젝트 버튼 크게 + 위로 ── */
.landing-new {
  bottom: 56px; font-size: 16px; font-weight: 600; padding: 16px 34px; gap: 10px;
}
.landing-new svg { width: 18px; height: 18px; }

/* ── 이미지 단계 최상단 캐릭터 시트 섹션 ── */
.char-sheet-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.char-sheet-label { font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: -0.3px; }
/* 씬(스타일 프레임) 단계 타이틀 — 캐릭터 시트 타이틀과 동급 위계 */
.style-frame-title { font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: -0.3px; }
.char-sheet-row { display: flex; gap: 12px; flex-wrap: wrap; }
.char-sheet-thumb {
  width: 260px; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background: #000; border: 1px solid var(--border); position: relative; cursor: zoom-in;
}
.char-sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
.char-sheet-badge {
  position: absolute; left: 8px; top: 8px; font-size: 10px; padding: 2px 8px;
  border-radius: var(--r-pill); background: rgba(0,0,0,0.6); color: #fff;
}

/* ══════════════════════════════════════════════
   v19 — feedback 8차 (레퍼런스 영상 파일 첨부 폴백)
   ══════════════════════════════════════════════ */
.ref-video-alt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--fg-muted); }
.ref-upload-btn {
  padding: 7px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); color: var(--fg-sec); border: 1px solid var(--border-str);
}
.ref-upload-btn:hover { color: var(--fg); border-color: var(--accent); }
.ref-upload-btn:disabled { opacity: .5; cursor: default; }

/* ── 캐릭터 시트 박스도 호버 액션(재생성·다운로드·편집) 노출 ── */
.char-sheet-thumb:hover .box-hover { opacity: 1; transform: none; pointer-events: auto; }
.char-sheet-thumb-wrap { display: flex; flex-direction: column; gap: 6px; }

/* ── 로케이션 배경(플레이트) 섹션 — 캐릭터 시트와 동일 위계로 그 아래 표시 ── */
.location-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.loc-thumb-wrap { display: flex; flex-direction: column; gap: 6px; }
.loc-thumb {
  width: 260px; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background: #000; border: 1px solid var(--border); position: relative; cursor: default;
}
.loc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.loc-thumb.skeleton-shimmer { background: #3a3a40; }
.loc-thumb:hover .box-hover { opacity: 1; transform: none; pointer-events: auto; }
/* 플레이트는 총 1장(보드)이므로 칸이 보이도록 크게 표시 */
.loc-thumb[data-board] { width: 100%; max-width: 520px; }
.loc-caption { font-size: 12px; line-height: 1.6; color: var(--fg-muted); }
.char-sheet-prompt {
  font-size: 11px; line-height: 1.5; color: var(--fg-muted);
  max-width: 260px; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ══════════════════════════════════════════════
   v20 — feedback 9차
   ══════════════════════════════════════════════ */

/* 영상 편집 타임라인/도구 폭을 영상 가로폭과 비슷하게(인풋바 폭에 맞춰 중앙 정렬) */
#editModal .em-video-tools { max-width: 760px; width: 100%; margin: 0 auto; }

/* 콘티/이미지 메인 이미지 더 크게 — 히스토리 폭·패딩 축소 + 높이 상향 */
.em-history { width: 168px; }
.em-pane[data-pane="media"] { padding: 10px; gap: 10px; }
#editModal:not(.em-video) .em-main img { max-height: 94vh !important; }

/* 히스토리 항목 간 간격 */
.em-hist-list { gap: 14px; }

/* 콘티 단계 상단 스토리 흐름(씬 목차) */
.conti-scene-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.conti-scene-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); letter-spacing: -0.1px; }
.conti-scene-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conti-scene-step {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-sec);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 5px 13px 5px 6px;
}
.conti-scene-num {
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3);
  color: var(--fg); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.conti-scene-arrow { color: var(--fg-dis); font-size: 12px; }

/* ══════════════════════════════════════════════
   v21 — feedback 10차
   ══════════════════════════════════════════════ */

/* 히스토리 폭 원복(줄인 것 되돌림) + 오른쪽에 너무 붙던 것 왼쪽으로 */
.em-history { width: 220px; margin-right: 16px; }

/* 수정탭의 세로 (…) 메뉴 버튼 제거(이미지·영상 공통) */
.em-dots-wrap { display: none !important; }

/* 영상 편집: 메인 영상·타임라인을 살짝 더 크게 + 위로(개선.md 영상#3) */
#editModal.em-video .em-main video { max-height: 88vh !important; max-width: 95% !important; }
#editModal.em-video .em-main-wrap { justify-content: flex-start; padding-top: 8px; }
#editModal.em-video .em-timeline { height: 64px; }
#editModal .em-video-tools { max-width: 860px; }

/* 레퍼런스 분석 실패 — 한 줄, 빨간 글씨 */
.ref-video-fail-line { color: var(--red); font-size: 12.5px; font-weight: 500; line-height: 1.5; }

/* ══════════════════════════════════════════════
   v22 — feedback 11차
   ══════════════════════════════════════════════ */

/* 사이드시트(자체 인풋바 보유)가 열리면 편집모달 하단 인풋바는 숨김 → 닫으면 다시 노출(:has 자동 복귀) */
body:has(.chat-sheet.open) #editModal .em-inputbar { display: none !important; }

/* 콘티 단계 상단 '자세한 시나리오' 패널(컷별 스크립트 전문) */
.conti-scenario {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
.conti-scenario-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.conti-scenario-title { font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: -0.2px; }
.conti-scenario-toggle {
  font-size: 12px; color: var(--fg-muted); background: transparent;
  border: 1px solid var(--border-str); border-radius: var(--r-pill); padding: 4px 13px;
}
.conti-scenario-toggle:hover { color: var(--fg); }
.conti-scenario-body {
  font-size: 13px; line-height: 1.8; color: var(--fg-sec);
  white-space: pre-wrap; word-break: keep-all; max-height: 360px; overflow-y: auto;
  transition: max-height .2s ease;
}
.conti-scenario-body.collapsed { max-height: 0; overflow: hidden; }
.conti-scenario-body strong { color: var(--fg); font-weight: 600; }

/* ══════════════════════════════════════════════
   v23 — feedback 12차
   ══════════════════════════════════════════════ */

/* 기획안 3개 아래 — 선택한 기획안의 '자세한 시나리오' + 콘티 생성 버튼 */
.scenario-detail {
  margin-top: 22px; background: var(--surface-1); border: 1px solid var(--border-str);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.scenario-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sep);
}
.scenario-detail-title { font-size: 17.5px; font-weight: 800; color: var(--fg); letter-spacing: -0.3px; }
.scn-detail-edit-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); border: 1px solid var(--border); background: transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.scn-detail-edit-btn:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-dim); }
.scn-detail-actions { display: flex; align-items: center; gap: 8px; }
.scn-detail-regen-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill);
  color: var(--fg-sec); background: transparent; border: 1px solid var(--border-str); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.scn-detail-regen-btn:hover { color: var(--fg); border-color: var(--accent); background: var(--accent-dim); }
.scenario-detail-conti {
  font-size: 14px; font-weight: 600; padding: 10px 26px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
.scenario-detail-conti:hover { opacity: .9; }
.scenario-detail-body { font-size: 13.5px; line-height: 1.85; color: var(--fg-sec); white-space: pre-wrap; word-break: keep-all; }
.scenario-detail-body strong { color: var(--fg); font-weight: 600; }

/* 히스토리 더 왼쪽으로(오른쪽 끝에 붙던 것) */
.em-history { margin-right: 26px; }

/* 영상 편집 — 영상+타임라인을 위쪽으로 정렬(개선.md 영상#3: 위로 살짝) */
#editModal.em-video .em-main-wrap { justify-content: flex-start; }
#editModal.em-video .em-main { flex: 0 1 auto; min-height: 0; }
/* 영상 잘림 방지(원본 비율 유지) — 충돌하던 16:9 강제·100%×100% 규칙을 덮어씀 */
#editModal.em-video .em-main video {
  width: auto !important; height: auto !important;
  max-width: 92% !important; max-height: 72vh !important;
  aspect-ratio: auto !important; object-fit: contain !important; background: #000;
}
body:has(.chat-sheet.open) #editModal.em-video .em-main video { max-height: 62vh !important; max-width: 86% !important; }

/* 인풋바 입력칸이 사라지지 않도록 최소 높이 보장 */
.em-inputbar .em-input { min-height: 24px; }

/* ══════════════════════════════════════════════
   v24 — feedback 13차
   ══════════════════════════════════════════════ */

/* ① 설문 — 카테고리별 여백↑ + 중앙 스냅으로 위계 강제 */
.stage-canvas[data-step="1"] .canvas-body { scroll-snap-type: y proximity; scroll-padding-top: 0; }
.survey-section { scroll-snap-align: center; scroll-margin-top: 0; padding: 26px 0; }
.survey-section + .survey-section { margin-top: 0; }   /* 카테고리 사이 구분선 제거(개선 요청) */
.survey-sec-label { font-size: 18px !important; }
/* 카테고리 타이틀과 첫 질문이 붙어 보이던 문제 — 라벨 아래 간격 확보 */
.survey-card .survey-sec-label { margin-bottom: 16px; }

/* ⑧ 단계 바(상단 progress-stepper) 제거 */
.canvas-header { display: none !important; }

/* ③ 기획안 ↔ 시나리오 간격 + 콘티 생성 버튼을 시나리오 하단에 */
.scenario-detail { margin-top: 40px; }
.scenario-detail-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sep); }

/* ⑥ 콘티 = 메인 크게 + 썸네일 + ‹ › */
.conti-viewer { display: flex; flex-direction: column; gap: 12px; max-width: 1040px; margin: 0 auto; width: 100%; }
.conti-order { font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: -0.2px; margin-bottom: 4px; }
.conti-main-wrap { position: relative; }
.conti-main { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: #000; position: relative; cursor: pointer; }
.conti-main img { width: 100%; height: 100%; object-fit: contain; }
.conti-main:hover .box-hover { opacity: 1; transform: none; pointer-events: auto; }
.conti-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid var(--border-str); display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; backdrop-filter: blur(6px);
}
.conti-nav:hover { background: rgba(0,0,0,0.8); }
.conti-nav.prev { left: 10px; } .conti-nav.next { right: 10px; }
.conti-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.conti-thumb { position: relative; width: 132px; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--border); background: #000; padding: 0; }
.conti-thumb img { width: 100%; height: 100%; object-fit: cover; }
.conti-thumb.on { border-color: var(--accent); }
.conti-thumb-num { position: absolute; left: 6px; top: 4px; font-size: 10px; color: #fff; background: rgba(0,0,0,0.6); border-radius: var(--r-pill); padding: 1px 7px; }

/* ⑤ 콘티/이미지 수정탭: 사이드시트 열릴 때 콘텐츠가 아래로 내려가지 않게 위로 정렬 */
body:has(.chat-sheet.open) #editModal:not(.em-video) .em-main { align-items: flex-start; }

/* ⑥ 영상 수정 메인 영상 크게 + (타임라인 폭은 JS가 영상 폭에 맞춰 동기화) */
#editModal.em-video .em-main video { max-height: 80vh !important; max-width: 95% !important; }
body:has(.chat-sheet.open) #editModal.em-video .em-main video { max-height: 70vh !important; max-width: 88% !important; }

/* ══════════════════════════════════════════════
   v25 — feedback 14차
   ══════════════════════════════════════════════ */

/* ① 상단 단계 바 복구(없앤 것 → 다시 띄움) */
.canvas-header { display: flex !important; }

/* ④ 콘티/기타 페이지 하단에 설문(#chatMessages)이 새어 보이던 문제 — 수집 단계 외에는 숨김 */
.stage-canvas:not([data-step="1"]) #chatMessages { display: none; }

/* ② 콘티 생성 = 하단 중앙 플로팅 버튼(설문 브리프 버튼과 동일) + 텍스트 안 가리게 하단 여백 */
.scn-conti-float {
  /* 워크스페이스(.stage-canvas, position:relative) 기준 중앙 — fixed(뷰포트)면 좌측 네비 폭만큼 왼쪽으로 치우친다. */
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;
  font-size: 16px; font-weight: 600; padding: 15px 44px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.scn-conti-float:hover { opacity: .92; }
.stage-canvas[data-step="2"] .ws-col { padding-bottom: 130px; }
/* 콘티 단계: 하단 '이미지 생성' 플로팅 버튼과 겹치지 않도록 여백 + 스크롤 여유 */
.stage-canvas[data-step="3"] .ws-col { padding-bottom: 130px; }
/* 이미지·영상 단계도 동일 — 하단 플로팅 버튼과 콘텐츠가 겹치지 않게 여백 확보(콘티처럼 스크롤) */
.stage-canvas[data-step="4"] .ws-col,
.stage-canvas[data-step="5"] .ws-col { padding-bottom: 130px; }
/* 콘티 플레이스홀더(생성 대기 시트) */
.conti-main-skel { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-md); }
.conti-thumb.pending { border-style: solid; }
.conti-thumb-skel { position: absolute; inset: 0; }
/* 콘티 생성 오류 — 스켈레톤 대신 메시지 + 재생성 버튼 */
.conti-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 280px; aspect-ratio: 16/9; max-height: 60vh;
  background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-md);
}
.conti-error-msg { font-size: 14px; color: var(--fg-sec); text-align: center; padding: 0 24px; }
.conti-retry-btn {
  font-size: 13.5px; font-weight: 600; padding: 11px 26px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); cursor: pointer;
}
.conti-retry-btn:hover { opacity: .92; }

/* ③ 콘티 — 메인 크게 중앙, ‹ ›는 박스 '밖', 썸네일은 한 줄로 */
.conti-main-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; }
.conti-main { flex: 0 1 920px; max-width: 920px; width: 100%; }
.conti-nav { position: static !important; transform: none !important; flex-shrink: 0; }
.conti-thumbs { flex-wrap: nowrap !important; overflow-x: auto; justify-content: center; padding-bottom: 4px; }
.conti-thumb { flex-shrink: 0; }

/* ⑤ 영상 편집 — 더미 포스터(img)도 영상과 동일 크기로 크게 보이게 */
#editModal.em-video .em-main img,
#editModal.em-video .em-main video {
  width: auto !important; height: auto !important;
  max-width: 95% !important; max-height: 80vh !important;
  aspect-ratio: auto !important; object-fit: contain !important; background: #000; border-radius: var(--r-md);
}
body:has(.chat-sheet.open) #editModal.em-video .em-main img,
body:has(.chat-sheet.open) #editModal.em-video .em-main video { max-height: 70vh !important; max-width: 88% !important; }

/* ══════════════════════════════════════════════
   v26 — feedback 15차 (콘티 메인 크게)
   ══════════════════════════════════════════════ */
/* 콘티 — 영상 탭(영상 스테이지)의 영상 콘텐츠와 동일한 폭(워크스페이스 1200 기준) */
.stage-canvas[data-step="3"] .ws-col { max-width: 1200px; }
/* (버그 수정) .conti-grid가 3열 그리드라 뷰어가 왼쪽 1/3 칸만 차지하던 문제 → 단일 블록으로 */
.conti-grid { display: block !important; grid-template-columns: none !important; }
.conti-viewer { max-width: none; margin: 0 auto; }
/* 메인 = 뷰어 폭을 채우되(화살표 제외) 영상 콘텐츠 크기와 동일 */
.conti-main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
/* 이어서 제작된 콘티 썸네일은 좌측부터 나열 */
.conti-thumbs { justify-content: flex-start !important; }

/* ══════════════════════════════════════════════
   v27 — feedback 16차
   ══════════════════════════════════════════════ */
/* 콘티 — 메인을 뷰어 전체 폭으로(타이틀/영상/썸네일 좌측 정렬 + 워크스페이스 중앙 정렬).
   화살표는 레이아웃을 밀지 않도록 박스 위 오버레이로(정렬 기준 X) */
.conti-main-wrap { display: block !important; position: relative; }
.conti-main { flex: none !important; width: 100% !important; max-width: none !important; }
.conti-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; }
.conti-nav.prev { left: 10px !important; }
.conti-nav.next { right: 10px !important; }

/* 상단 단계 표시는 숨기되 공간은 유지(투명도만 0) */
.progress-stepper { opacity: 0; }

/* ══════════════════════════════════════════════
   v28 — feedback 17차
   ══════════════════════════════════════════════ */

/* 설문 로딩 그라데이션 — 1초 동안 서서히 사라짐 */
.survey-loading { transition: opacity 1s ease; }
.survey-loading.fade-out { opacity: 0; }

/* 설문 카드 — 아래서 위로 살짝 등장 */
@keyframes survey-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.survey-card { animation: survey-in .5s cubic-bezier(.2,.7,.3,1) both; }

/* 시나리오 = 씬 단위 카드(콘티 제작용 프롬프트 한국어 정리) — 기획안과 구분되는 레이아웃 */
.scn-intro { font-size: 13px; color: var(--fg-muted); line-height: 1.7; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sep); }
.scn-intro strong { color: var(--fg-sec); }
.scn-scenes { display: flex; flex-direction: column; }
.scn-scene { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--sep); }
.scn-scene:last-child { border-bottom: none; }
.scn-scene-num { flex-shrink: 0; width: 52px; font-size: 13px; font-weight: 700; color: var(--fg); padding-top: 1px; }
.scn-scene-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.scn-scene-act { font-size: 14.5px; line-height: 1.6; color: var(--fg-sec); }
.scn-scene-meta { font-size: 11.5px; color: var(--fg-muted); }
.scn-scene-group { font-size: 12px; font-weight: 700; color: var(--fg-sec); letter-spacing: .02em; margin: 16px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--sep); }
.scn-scene-group:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════
   v29 — feedback 19차
   ══════════════════════════════════════════════ */

/* ① 선택지를 인풋바 바로 위에 노출(사이드 패널 대체) */
.inbar-choices { display: none; flex-direction: column; gap: 8px; margin: 0 auto 8px; max-width: 760px; width: 100%; }
.inbar-choices.show { display: flex; }
.inbar-choices-head { font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; }
.inbar-choices-btns { display: flex; flex-direction: column; gap: 6px; }
.inbar-choices .choice-btn { width: 100%; text-align: left; padding: 11px 13px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-str); color: var(--fg-sec); font-size: 13.5px; }
.inbar-choices .choice-btn:hover { border-color: var(--accent); background: var(--surface-3); }

/* ② 편집 모달 '이 버전 사용' 버튼 */
.em-topbar-right { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.em-topbar-right .em-close { position: static !important; right: auto !important; top: auto !important; }
.em-apply { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.em-apply:hover { opacity: .9; }

/* ③ 시나리오 = 콘티 프롬프트 로딩/정리 */
.scn-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); padding: 14px 0; }
.scn-conti-prompt { font-size: 13.5px; line-height: 1.85; color: var(--fg-sec); white-space: pre-wrap; word-break: keep-all; }
.scn-conti-prompt strong { color: var(--fg); font-weight: 600; }

/* ⑤ 씬 이미지 시작/끝 선택 팝오버 */
.em-reselect-item { position: relative; flex-shrink: 0; }
/* 시작/끝 선택 팝오버 — position:fixed로 띄워 가로 스크롤 행(overflow)에 잘리지 않게 한다.
   좌표는 JS가 클릭한 썸네일 기준으로 지정. translate로 썸네일 위·가운데 정렬. */
.em-reselect-pop { position: fixed; transform: translate(-50%, -100%); display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-md); padding: 4px; z-index: 1000; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.em-reselect-pop[hidden] { display: none; }
.em-reselect-pop button { font-size: 12px; padding: 5px 13px; border-radius: var(--r-sm); color: var(--fg-sec); background: var(--surface-1); border: 1px solid var(--border); }
.em-reselect-pop button:hover { color: var(--fg); border-color: var(--accent); }

/* ══════════════════════════════════════════════
   v30 — feedback 20차
   ══════════════════════════════════════════════ */
/* 설문 로딩 문구 중앙 정렬(잠시만 기다려 주세요 포함) */
.ws-hero-loading-text { text-align: center; }
/* 영상 단계 갤러리 — 메인/썸네일 영상이 박스를 채우게 */
.conti-main.video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.conti-thumb video { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════
   v31 — feedback 22차 (콘티 프롬프트 한국어 위계 정리)
   ══════════════════════════════════════════════ */
.scn-conti-prompt { font-size: 13.5px; color: var(--fg-sec); }
.scn-conti-prompt .cp-h { font-size: 15px; font-weight: 700; color: var(--fg); margin: 16px 0 6px; }
.scn-conti-prompt .cp-h:first-child { margin-top: 0; }
.scn-conti-prompt .cp-sub { font-size: 13px; font-weight: 600; color: var(--fg); margin: 12px 0 4px; }
.scn-conti-prompt .cp-p { font-size: 13.5px; line-height: 1.75; color: var(--fg-sec); margin: 3px 0; white-space: pre-wrap; word-break: keep-all; }

/* ══════════════════════════════════════════════
   v32 — 인풋바 플로팅 + 선택지 인풋바 내부 패키징
   ══════════════════════════════════════════════ */

/* ① 워크스페이스 하단 여백 확보 — 플로팅 인풋바가 미디어를 가리지 않도록 */
.em-main-wrap { padding-bottom: 130px; }

/* ② 인풋바를 absolute 플로팅 최상위 레이어로 */
.em-inputbar {
  position: absolute !important;
  bottom: 34px;
  left: 0; right: 0;
  margin: 0 auto !important;
  margin-top: 0 !important;
  width: calc(100% - 32px) !important;
  max-width: 760px;
  align-self: unset;
  z-index: 50;
  box-shadow: 0 -24px 48px rgba(0,0,0,0.42), 0 6px 20px rgba(0,0,0,0.22);
}

/* ③ 선택지 — 인풋바 내부 첫 번째 자식. 표시 시 하단 구분선으로 입력 영역과 분리 */
.em-inputbar .inbar-choices {
  margin: 0 0 0;
  max-width: none;
  width: 100%;
}
.em-inputbar .inbar-choices.show {
  border-bottom: 1px solid var(--border-str);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.scn-conti-prompt .cp-p strong { color: var(--fg); font-weight: 600; }

/* ══════════ 우측 상단 토스트 안내창 (사이드시트 대체 · 오류/안내) ══════════ */
.toast-host {
  position: fixed; top: 16px; right: 16px; z-index: 1200;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none; max-width: min(360px, 86vw);
}
.toast {
  pointer-events: auto;
  background: var(--surface-2, #1c1c1e); color: var(--fg, #fff);
  border: 1px solid var(--border-str, #3a3a40); border-radius: 10px;
  padding: 11px 14px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease;
  word-break: break-word;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { border-left: 3px solid var(--red, #ff5a5a); }
.toast-info  { border-left: 3px solid var(--accent, #6aa0ff); }

/* 편집 모달 히스토리 — 생성 중 스켈레톤 항목(하단에 쌓임) */
.em-hist-skel .em-hist-media { border-color: var(--border, #2a2a2e); }
.em-hist-skel .em-hist-prompt { color: var(--fg-dis, #888); }

/* 사이드시트 제거 — 잔존 호출 대비 완전 비표시 */
.chat-sheet { display: none !important; }
body:has(.chat-sheet.open) .edit-modal.open { right: 0 !important; }
body:has(.chat-sheet.open) .main-area { margin-right: 0 !important; }

/* ══════════════════════════════════════════════
   v33 — UI 개편 v2 (feedback 23차)
   #2 빈상태 NEW PROJECT · #3 영상 썸네일 · #4 첨부 인풋바 내부 · #5 스냅 제거
   #6/#14 상단 그라데이션·블랙 헤더 확장 · #7 AI 태그 재생성·FF5C26
   #8 textarea 자동 확장 · #9 단계 네비 [아이콘|영문명] · #10 스토리라인 태그
   #13 미선택 기획안 딤 · #16 수정 메인 이미지 잘림
   ══════════════════════════════════════════════ */

/* ── #9 단계 네비: 가로 [아이콘 | 영문명] (ui.png 좌측 사이드바) ── */
:root { --nav-w: 156px; }
.step-nav { background: #000 !important; }
.nav-steps { width: 100%; padding: 66px 12px 12px; gap: 4px; }
.step-btn {
  flex-direction: row !important; justify-content: flex-start; align-items: center;
  gap: 12px; width: 100%; padding: 9px 12px; border-radius: 10px;
}
.step-btn:hover { background: rgba(255,255,255,0.06); }
.step-btn.current { background: rgba(255,255,255,0.10); }
.step-btn::before { display: none; }                       /* 좌측 막대 → 배경 강조로 대체 */
.step-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.step-label {
  display: block !important;
  font-size: 13px !important; font-weight: 500 !important;
  text-align: left !important; letter-spacing: 0 !important; line-height: 1.15 !important;
  margin: 0 !important; color: inherit !important;
}
.step-btn.current .step-label { color: var(--fg) !important; font-weight: 600 !important; }
.step-tooltip { display: none !important; }                /* #9 호버 스텝 설명 제거 */
.nav-bottom { width: 100%; }

/* ── #6/#14 상단 고정 블랙 헤더 영역 확장 (로고/타이틀/설정 뒤 배경) ── */
.stage-canvas::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 104px;
  background: linear-gradient(to bottom, var(--bg) 0, var(--bg) 56%, rgba(0,0,0,0.45) 78%, transparent);
  z-index: 6; pointer-events: none;
}

/* ── #5 설문 스크롤 스냅 제거 ── */
.stage-canvas[data-step="1"] .canvas-body { scroll-snap-type: none !important; scroll-padding-top: 0 !important; }
.survey-section { scroll-snap-align: none !important; scroll-margin-top: 0 !important; }

/* ── #8 사용자 입력 textarea 자동 확장(스크롤 없이 작성분 전체 노출) ── */
.intake-area { resize: none !important; overflow: hidden; }

/* ── #4 첨부 이미지(스테이징)를 인풋바 내부 최상단에 ── */
#chatInputBar .chat-staging {
  width: 100%; max-width: none; margin: 0; padding: 0 2px 2px; order: -1;
}

/* ── #7 AI 추천 태그 — 맨 앞 재생성 아이콘 + FF5C26 색상 ── */
.intake-suggests { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.intake-suggest-chips { display: contents; }
.suggest-regen {
  position: relative; flex-shrink: 0;
  width: 31px; height: 31px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  border: none; color: var(--fg-muted); background: transparent;
}
.suggest-regen:hover { background: rgba(255,255,255,0.08); color: var(--fg-sec); }
.suggest-regen.spinning svg { animation: suggest-spin .8s linear infinite; }
@keyframes suggest-spin { to { transform: rotate(360deg); } }
.suggest-regen-tip {
  position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--surface-3); color: var(--fg); border: 1px solid var(--border-str);
  border-radius: 6px; padding: 5px 9px; font-size: 11.5px;
  opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.suggest-regen:hover .suggest-regen-tip { opacity: 1; }
/* AI로 생성한 태그 박스 테두리·텍스트 = FF5C26 */
.intake-suggest-chip { border: 1px solid var(--point) !important; color: var(--point) !important; background: rgba(255,95,59,0.15) !important; }
.intake-suggest-chip::before { content: '＋ ' !important; color: var(--point) !important; }
.intake-suggest-chip:hover { background: rgba(255,95,59,0.14) !important; color: #fff !important; border-color: #fff !important; }
.intake-suggest-chip:hover::before { color: #fff !important; }
.intake-suggest-chip.on { background: var(--point) !important; border-color: var(--point) !important; color: #fff !important; box-shadow: none !important; }
.intake-suggest-chip.on::before { content: '✓ ' !important; color: #1c1c1e !important; }

/* ── #10 스토리라인 = 모노톤 태그 + 단계별 줄바꿈 ── */
.scn-story-list { display: flex; flex-direction: column; gap: 7px; margin-top: 3px; }
.scn-story-step { display: flex; gap: 9px; align-items: flex-start; }
.scn-stage-tag {
  flex-shrink: 0; min-width: 66px; text-align: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--fg-sec); background: var(--surface-3); border: 1px solid var(--border-str);
  border-radius: 5px; padding: 3px 8px;
}
/* 단계의 한글 의미(개선.md 기획#2) — 영문 단계명 아래 작게 */
.scn-stage-ko { font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--fg-muted); white-space: nowrap; }
.scn-story-text { font-size: 13px; color: var(--fg-sec); line-height: 1.55; word-break: keep-all; }

/* ── #13 기획안 선택 시 미선택 카드 딤 처리 ── */
#scn-cards.picked .scenario-card:not(.ssot) { opacity: .4; transition: opacity .25s ease; }
#scn-cards.picked .scenario-card:not(.ssot):hover { opacity: .6; }

/* ── #16 수정 메인 이미지 잘림 수정 — 히스토리 유무와 무관하게 컨테이너에 온전히 맞춤 ── */
#editModal:not(.em-video) .em-main { overflow: hidden; width: 100%; aspect-ratio: 16/9; }
#editModal:not(.em-video) .em-main img {
  max-height: 100% !important; max-width: 100% !important;
  width: auto !important; height: auto !important; object-fit: contain !important;
}

/* ── #2 빈상태 'NEW PROJECT' 카드(점선 제거) + 영상 썸네일 ── */
.proj-thumb-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-card-new { text-align: left; padding: 0; }
.proj-new-thumb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: var(--surface-1); color: var(--fg-muted);
}
.proj-new-thumb .proj-new-label { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; }
.proj-card-new:hover .proj-new-thumb { background: var(--surface-2); color: var(--fg); }
.proj-card-new:hover { border-color: var(--accent); }

/* ══════════════════════════════════════════════
   v34 — UI 개편 v2 (feedback 24차)
   #1 단계 타이틀 내림 · #2 네비 아이콘 테두리 제거·간격 축소 · #3 브리프 좌측
   #5 기획안 박스 스크롤 제거 · #6 시나리오 자동 스크롤 · #7 기획안 A/B/C 주황 태그
   #10 스토리라인 태그 텍스트폭 · #8 선택 버튼을 콘텐츠 박스 내부로
   ══════════════════════════════════════════════ */

/* ── #1 단계 타이틀(수집/기획 등) — 단계 설명·콘텐츠 박스를 위로 올림(개선.md 공통) ── */
.ws-col { padding-top: 16px; }

/* ── #2 좌측 네비 아이콘 네모 테두리·배경 제거 + 버튼 간격 축소 ── */
.step-icon {
  border: none !important; background: transparent !important; box-shadow: none !important;
  width: 26px !important; height: 26px !important; border-radius: 0 !important;
}
.step-btn.current .step-icon { background: transparent !important; color: var(--fg) !important; box-shadow: none !important; }
.step-btn.done .step-icon { background: transparent !important; border: none !important; }
.nav-steps { gap: 2px !important; padding-top: 70px; }
.step-btn { padding: 7px 12px !important; gap: 10px !important; }

/* ── #3 네비 하단 브리프 버튼 좌측 정렬 ── */
.nav-bottom { justify-content: flex-start !important; padding-left: 16px; }

/* ── #5 기획안 카드 본문 — 스크롤 없이 전체 노출(박스가 내용만큼 늘어남) ── */
.scenario-card-body { max-height: none !important; overflow: visible !important; }

/* ── #6 시나리오 제작 클릭 후 시나리오 영역으로 스크롤될 때 헤더에 가리지 않게 여백 ── */
.scenario-detail { scroll-margin-top: 104px; }

/* ── #7 기획안 A/B/C 식별자 = 주황 배경 채움 + 짙은 회색 텍스트(반전) ── */
.scenario-card-id {
  color: #1c1c1e !important; border: 1px solid var(--point) !important; background: var(--point) !important;
  border-radius: 6px; padding: 2px 9px; font-weight: 700; letter-spacing: .3px;
}
/* 타이틀이 여러 줄로 늘어나도 기획안 태그·연필은 상단 정렬(중앙정렬 금지) */
.scenario-card-head { align-items: flex-start !important; }

/* ── #10 스토리라인 단계 태그 — 텍스트 길이에 맞춰(고정폭 제거) ── */
.scn-stage-tag { min-width: 0 !important; }

/* ── #8 편집 모달: '선택' 버튼을 메인 콘텐츠 박스(실제 미디어) 안쪽 우측 상단으로 ── */
/* top/right는 positionEmApply()가 실제 표시 미디어 박스에 맞춰 동적으로 지정(레터박스 여백 제외) */
.em-main-wrap > .em-apply {
  position: absolute; top: 14px; right: 14px; z-index: 8; margin: 0;
}
.em-dots-wrap { top: 6px; right: auto !important; left: 6px; }   /* (…) 메뉴를 좌상단으로 — 선택 버튼과 겹치지 않게 */
.em-dots-wrap .em-menu { right: auto; left: 0; }

/* ── 좌측 네비: 선택된 단계 박스 강조 — 선택 태그와 유사한 밝은 톤 */
.step-btn.current {
  background: rgba(232,234,240,0.13) !important;
  border: 1px solid rgba(232,234,240,0.55) !important;
  color: #e8eaf0 !important;
}
.step-btn.current .step-label { color: #e8eaf0 !important; }
.step-btn.current .step-icon  { color: #e8eaf0 !important; }
.step-btn.current .step-icon svg { stroke: #e8eaf0 !important; }

/* ── 콘티·이미지(비영상) 수정페이지: 메인 콘텐츠 박스를 상단 방향으로 최대한 크게 ──
   히스토리 하단 시작점부터 상단까지 채우는 큰 박스. object-fit:contain 으로 어떤 비율이
   생성되어도 박스 높이는 동일하게 유지되고 좌우 여백만 남는다(상단 입력창과 안 겹치게 여백 확보). */
#editModal:not(.em-video) .em-main {
  align-items: center; justify-content: center;
}
#editModal:not(.em-video) .em-main img,
#editModal:not(.em-video) .em-main video {
  max-width: 100% !important;
  max-height: calc(100vh - 210px) !important;
  width: auto !important; height: auto !important;
  object-fit: contain !important;
}

/* ── 영상 수정: 인풋바 시작/끝 프레임 박스의 삭제(X) 버튼 ── */
.em-frame-box { position: relative; }
.em-frame-del {
  position: absolute; top: 3px; right: 3px; z-index: 3;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.62); color: #fff; border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px); cursor: pointer; padding: 0;
}
.em-frame-del:hover { background: rgba(0,0,0,0.85); border-color: #fff; }
.em-frame-box:not(.has-img) .em-frame-del { display: none; }

/* ── 영상 수정: 씬 이미지 팝오버(카메라 팝오버와 동일 레이아웃 — 좌 콘티 카테고리 / 우 3×3 그리드) ── */
.scene-pop { position: absolute; bottom: 44px; left: 0; z-index: 30; width: 560px; max-height: 360px; padding: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.scene-pop[hidden] { display: none; }
.scene-lib { display: flex; height: 360px; }
.scene-cats { width: 132px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 8px; gap: 2px; background: var(--surface-1); overflow-y: auto; }
.scene-cat { text-align: left; font-size: 13px; padding: 9px 11px; border-radius: var(--r-sm); color: var(--fg-muted); white-space: nowrap; }
.scene-cat:hover { color: var(--fg); background: var(--surface-3); }
.scene-cat.on { color: var(--fg); background: var(--surface-3); font-weight: 600; }
.scene-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; align-content: start; }
/* 주의: 이미지 생성 페이지(step4)도 .scene-card를 쓰므로, 팝오버 카드는 반드시 .scene-pop 하위로 스코프한다. */
.scene-pop .scene-card { position: relative; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-1); overflow: hidden; padding: 0; aspect-ratio: 16/9; }
.scene-pop .scene-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-pop .scene-card:hover { border-color: var(--accent); }
.scene-pop .scene-card-num { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.6); border-radius: 4px; padding: 1px 5px; }
.scene-pop .scene-card.is-start::after { content: 'Start'; position: absolute; bottom: 4px; left: 4px; font-size: 10px; font-weight: 700; color: #fff; background: var(--point); border-radius: 4px; padding: 1px 6px; }
.scene-pop .scene-card.is-end::after { content: 'End'; position: absolute; bottom: 4px; right: 4px; left: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--point); border-radius: 4px; padding: 1px 6px; }
.scene-pop .scene-card.is-start.is-end::after { content: 'Start·End'; }
/* z-index 600 — 편집 모달(z 300) 위로(개선.md 영상#2: START/END 팝오버 안 뜨던 버그 원인) */
.scene-pick-pop { position: fixed; z-index: 600; transform: translateX(-50%) translateY(-100%); display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border-str); border-radius: var(--r-md); padding: 5px; box-shadow: 0 8px 28px rgba(0,0,0,.6); }
.scene-pick-pop[hidden] { display: none; }
.scene-pick-pop button { font-size: 12px; font-weight: 600; color: var(--fg-sec); padding: 6px 12px; border-radius: var(--r-sm); white-space: nowrap; }
.scene-pick-pop button:hover { background: var(--surface-3); color: var(--fg); }

/* 영상 수정: 버전 1개(최초 생성)뿐이면 우측 히스토리 패널 숨김 → 메인 영상이 넓게 표시됨 */
.em-history.em-history-empty { display: none !important; }

/* ── 영상 단계: 분할 구간 썸네일(최종본 아래 앞/뒤 구간 미리보기) ── */
.vv-segs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; width: 100%; max-width: 940px; margin-left: auto; margin-right: auto; }
.vv-segs-lbl { font-size: 12px; color: var(--fg-muted); }
.vv-seg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vv-seg-card { width: 150px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.vv-seg-thumb { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); border: 1px solid var(--border-str); }
.vv-seg-thumb img, .vv-seg-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vv-seg-card:hover .vv-seg-thumb { border-color: var(--accent); }
.vv-seg-regen { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(4px); }
.vv-seg-regen:hover { background: rgba(0,0,0,0.85); border-color: #fff; }
.vv-seg-cap { font-size: 11.5px; color: var(--fg-sec); }

/* ── 영상 단계: 마무리 플로팅 바(다운로드 팝오버 + 목록으로) — 다른 단계 플로팅과 동일 위치 ── */
.video-done-float {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 60;
  display: flex; gap: 10px; align-items: center;
}
.video-done-float .vdf-dl-wrap { position: relative; }
.video-done-float .vdf-btn {
  font-size: 16px; font-weight: 600; padding: 15px 32px; border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); white-space: nowrap;
}
.video-done-float .vdf-btn:hover { opacity: .92; }
.video-done-float .vdf-btn.ghost { background: var(--surface-2); color: var(--fg); border-color: var(--border-str); }
.vdf-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 0; min-width: 248px; padding: 4px;
  background: #161618; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
}
.vdf-pop[hidden] { display: none; }
.vdf-pop button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  text-align: left; font-size: 13px; color: var(--fg-sec); padding: 12px 13px;
  border-radius: var(--r-sm); white-space: nowrap;
}
.vdf-pop button svg { flex-shrink: 0; color: var(--fg-muted); }
.vdf-pop button + button { border-top: 1px solid rgba(255,255,255,0.07); border-radius: 0; }
.vdf-pop button:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
.vdf-pop button:hover svg { color: var(--fg); }
/* 영상 단계: 하단 플로팅과 겹치지 않도록 여백 */
.stage-canvas[data-step="5"] .ws-col { padding-bottom: 120px; }

/* ══════════════════════════════════════════════
   v36 — feedback (설문/플랜/스토리보드/이미지/영상 다듬기 일괄)
   ══════════════════════════════════════════════ */

/* ── #22 단계 타이틀 위계: 단계 타이틀을 내용 타이틀보다 확실히 크게 ── */
.ws-step-title { font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.4px; margin-bottom: 2px !important; }
/* ── #23 단계 안내 문구(타이틀 바로 아래) ── */
.ws-step-guide { font-size: 14px; color: var(--fg-muted); font-weight: 500; margin: 0 0 14px 2px; letter-spacing: -0.1px; }
.ws-step-guide strong { font-weight: 800; color: var(--fg); letter-spacing: .3px; }

/* ── #2 사운드 영역(나레이션+BGM)을 영상 사이즈/길이와 분리 + 그룹 라벨 ── */
.survey-soundgroup { margin-top: 30px; padding-top: 20px; }
.survey-subgroup-label { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 14px; }
.survey-soundgroup .intake-field:last-child { margin-bottom: 0; }

/* ── #24 설문 메인 텍스트 뒤 은은한 안개 그라데이션(아주 느리게 일렁이다 사라지는 모션) ── */
.survey-title { position: relative; }
.survey-title-text { position: relative; z-index: 2; }
.survey-title-fog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 480px; max-width: 92%; height: 190px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(42% 56% at 36% 42%, rgba(150,156,172,0.22), transparent 66%),
    radial-gradient(46% 52% at 64% 56%, rgba(108,114,132,0.20), transparent 66%),
    radial-gradient(40% 48% at 52% 66%, rgba(198,202,216,0.16), transparent 68%);
  background-size: 180% 180%, 200% 200%, 170% 170%;
  filter: blur(28px);
  animation: title-fog-drift 16s ease-in-out infinite, title-fog-breathe 9s ease-in-out infinite;
}
@keyframes title-fog-drift {
  0%, 100% { background-position: 0% 50%, 100% 50%, 50% 0%; }
  50%      { background-position: 100% 50%, 0% 50%, 50% 100%; }
}
@keyframes title-fog-breathe {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) { .survey-title-fog { animation: none; opacity: 0.3; } }

/* ── #4 스토리보드 상단 라벨: 모노톤 PART 태그 + 옆에 시간 ── */
.conti-order { display: flex; align-items: center; gap: 10px; }
.conti-part-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--fg-sec); background: var(--surface-3); border: 1px solid var(--border-str);
  border-radius: 6px; padding: 3px 9px;
}
.conti-order-time { font-size: 16px; font-weight: 800; color: var(--fg); letter-spacing: -0.2px; }

/* ── #5a 콘티/영상 ‹›(원형) 버튼 — SVG가 박스 정중앙에 오도록 ── */
.conti-nav { font-size: 0; }
.conti-nav svg { display: block; }

/* ── #5b 설문 첨부 + 버튼 / X 버튼 정중앙 ── */
.intake-upload::before { content: none !important; }   /* 글리프 '+' 폐기 → SVG로 대체(정중앙 보장) */
.intake-upload { align-items: center; justify-content: center; }
.intake-upload-plus { display: block; color: var(--fg-muted); flex-shrink: 0; }
.intake-upload:hover .intake-upload-plus { color: var(--accent); }
.survey-card .intake-upload .intake-upload-txt { display: none; }   /* 정사각 박스에서는 + 아이콘만 */
.staged-remove svg { display: block; }

/* ── #10/#15/#16 AI 심볼(스파클) ── */
.ai-symbol { width: 13px; height: 13px; flex-shrink: 0; }
/* AI 추천 태그 — '+' 글리프 대신 AI 심볼, 칩을 svg+텍스트 정렬 */
.intake-suggest-chip { display: inline-flex; align-items: center; gap: 5px; }
.intake-suggest-chip::before { content: none !important; }
.intake-suggest-chip .ai-symbol { color: var(--point); }
.intake-suggest-chip:hover .ai-symbol { color: #fff; }
.intake-suggest-chip.on .ai-symbol { display: none; }   /* 선택 시 ✓(::before)가 대신 표시 */
/* 분석 버튼 좌측 AI 심볼 */
.ref-analyze-btn { display: inline-flex; align-items: center; gap: 6px; }
.ref-analyze-btn .ai-symbol { color: currentColor; }

/* ── #14 AI 추천 무드 키워드 ── */
.mood-kw-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin-bottom: 9px; }
.mood-kw-tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.mood-kw-sub { display: contents; }
.mood-kw-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px;
  border: 1px solid var(--point); background: rgba(255,95,59,0.12); color: var(--point);
  transition: background .15s, color .15s, border-color .15s, transform 80ms;
}
.mood-kw-tag .ai-symbol { color: var(--point); }
.mood-kw-tag:hover { background: rgba(255,95,59,0.18); color: #fff; border-color: #fff; }
.mood-kw-tag:hover .ai-symbol { color: #fff; }
.mood-kw-tag:active { transform: scale(0.96); }
.mood-kw-tag.on { background: rgba(255,95,59,0.24); border-style: solid; color: #fff; }
.mood-kw-tag.on .ai-symbol { color: #fff; }
.mood-kw-tag.sub { border-style: solid; opacity: 0.95; }
.mood-kw-loading { font-size: 12px; color: var(--fg-muted); }

/* ── #8 첨부 한도 초과 — 각 첨부 박스 상단 텍스트·테두리 3초간 빨간 경고 ── */
.intake-upload-box.attach-flash { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); transition: border-color .2s, box-shadow .2s; }
.intake-upload-desc.attach-warn { color: var(--red); font-weight: 600; }

.ai-prefill-hint {
  display: inline-block;
  font-size: 11px;
  color: #3b82f6;
  background: rgba(255,95,59,0.12);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════
   개선.md 수집 — 칩 선택형/인라인 편집/스크롤 리빌/레퍼런스 영상 박스
   ══════════════════════════════════════════════ */

/* #1 스크롤 리빌 — 섹션이 뷰에 들어올 때 1회 등장 */
.survey-section.reveal-init { opacity: 0; transform: scale(0.95); }
.survey-section.reveal-init.revealed {
  opacity: 1; transform: scale(1);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .survey-section.reveal-init { opacity: 1; transform: none; }
}

/* #5·#6 칩 선택형 열린 질문 */
.intake-chippick .intake-chips { margin-top: 2px; }
.chip-pick-label { display: inline-flex; align-items: center; gap: 4px; }
.intake-chip .chip-txt { vertical-align: middle; }
.intake-chip.chip-ai .ai-symbol { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--point); }
.intake-chip.chip-ai { border-color: var(--point); }
.intake-chip.chip-ai.on .ai-symbol { color: #fff; }
.intake-chip.chip-direct { border-style: solid; color: var(--fg-muted); }
.intake-chip.chip-direct:hover { color: var(--fg); border-color: var(--accent); }
.chip-direct-input { margin-top: 8px; width: 100%; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-1); border: 1px solid var(--border-str); }
/* 타이틀 우측 새로고침(#8·#14) */
.suggest-regen.chip-title-regen {
  position: relative; width: auto; height: auto; padding: 0 2px; margin-left: 4px;
  display: inline-flex; align-items: center; background: none; border: none;
  color: var(--fg-muted); vertical-align: middle; cursor: pointer;
}
.suggest-regen.chip-title-regen svg { width: 14px; height: 14px; }
.suggest-regen.chip-title-regen:hover { color: var(--point); }
.suggest-regen.chip-title-regen.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* URL 분석 행 — 칩 리스트 바로 아래 */
.ref-url-row { margin-top: 10px; }

/* #7 인라인 편집(브랜드명·제품 소개) */
.inline-edit { position: relative; display: flex; align-items: center; gap: 6px; min-height: 30px; }
.inline-edit-view {
  font-size: 14px; color: var(--fg); line-height: 1.5; cursor: text;
  white-space: pre-wrap; word-break: break-word; padding: 4px 2px; border-radius: 4px;
}
.inline-edit.is-empty .inline-edit-view { color: var(--fg-dis); }
.inline-edit-view:hover { background: rgba(255,255,255,0.04); }
.inline-edit-pencil { display: inline-flex; color: var(--fg-dis); opacity: 0.55; cursor: pointer; flex-shrink: 0; padding: 2px; }
.inline-edit:hover .inline-edit-pencil { opacity: 0.9; color: var(--fg-muted); }
.inline-edit.editing .inline-edit-input { width: 100%; }

/* #13·#15 레퍼런스 영상 — 첨부+링크 박스 */
.ref-video-box { background: var(--surface-1); border: 1px solid var(--border-str); border-radius: var(--r-md); padding: 11px 13px; }
.ref-video-box-hint { font-size: 12px; color: var(--fg-muted); margin-bottom: 9px; }
.ref-video-box-row { display: flex; align-items: center; gap: 8px; }
.ref-video-add {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border-str); color: var(--fg-muted);
}
.ref-video-add:hover { color: var(--fg); border-color: var(--accent); }
.ref-video-link { flex: 1; min-width: 0; padding: 8px 11px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border-str); }
/* #13 분석 결과 — 구분선 + 작고 연한 메타 + 칩(페이드인) */
.ref-video-divider { height: 1px; background: var(--sep); margin: 12px 0 9px; }
.ref-video-meta { font-size: 11px; color: var(--fg-dis); line-height: 1.5; margin-bottom: 9px; white-space: pre-wrap; }
.ref-video-chips.fade-in { animation: refchips-fade 0.5s ease-out; }
@keyframes refchips-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.landing-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12vh 20px;
  color: var(--fg-muted);
}
.landing-empty-icon {
  width: 64px;
  height: 64px;
  opacity: 0.32;
}
.landing-empty-text {
  font-size: 14px;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════
   개선.md (2026-06-30) — UI/사용성 일괄 개선
   (파일 끝 = 최종 우선순위. 기존 !important 규칙을 덮기 위해 동등/상위 명시도로 작성)
   ══════════════════════════════════════════════════════════════════ */

/* ── [공통] #1 로고-프로젝트명 사이 '/' 삭제 ── */
.app-proj-name::before { content: none !important; }

/* ── [공통] #3 프로젝트 페이지 상단 그라데이션 삭제(기획·콘티·이미지·영상) ── */
.stage-canvas:not([data-step="1"])::before { display: none !important; }

/* ── [좌측네비] 로고 크게 + 프로젝트 타이틀을 로고 하단으로 ── */
.app-logo-row { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; }
.app-logo { font-size: 24px !important; letter-spacing: -0.4px !important; }
.app-proj-name { font-size: 13px !important; margin-left: 1px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-steps { padding-top: 92px !important; }   /* 커진 로고+타이틀 자리 확보 */

/* ── [랜딩] 로고를 좌측네비 로고만큼 크게 ── */
.landing-brand { font-size: 24px !important; letter-spacing: -0.4px; }

/* ── [설문수집전] #1 타이틀 살짝 축소 · #2 콘텐츠(텍스트+인풋바) 중앙 배치 ── */
.ws-hero { padding: 0 20px 40px !important; min-height: calc(100vh - 210px); justify-content: center; }
.ws-hero-title { font-size: 27px !important; }

/* ── [설문수집전] #3 로딩 그라데이션 — 영역 고정, 수집 단계 상단 안개처럼 부드럽게 ── */
.survey-loading::before {
  background:
    radial-gradient(34% 40% at 48% 46%, rgba(176,180,196,0.30), transparent 66%),
    radial-gradient(36% 38% at 56% 56%, rgba(132,138,156,0.26), transparent 66%),
    radial-gradient(38% 38% at 50% 64%, rgba(198,202,216,0.18), transparent 70%);
  background-size: 150% 150%;
  animation: aurora-move 13s ease-in-out infinite;
  -webkit-mask: radial-gradient(86% 78% at 50% 52%, #000 20%, transparent 66%);
          mask: radial-gradient(86% 78% at 50% 52%, #000 20%, transparent 66%);
}

/* ── [수집] #0 태그 박스 높이 축소(너무 동글지 않게) ── */
.survey-card .intake-seg-btn, .survey-card .intake-chip { padding: 5px 14px !important; }

/* ── [수집] #1 질문 카테고리 사이 가로 선 삭제 ── */
.survey-sec-label { border-top: none !important; padding-top: 0 !important; }

/* ── [수집] #2 위계: 설문 '타이틀'(광고 소재/소재 이미지/사운드 등) = 카테고리.png의 #737A8E ── */
.survey-subgroup { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.survey-subgroup-label { color: #737A8E !important; }

/* ── [수집] #4 선택 안 된 태그 색상 일괄(내부 1E1F27 / 테두리 2A2C34 / 텍스트 7A7FA0) ── */
.survey-card .intake-chip:not(.on):not(:hover),
.survey-card .intake-seg-btn:not(.on):not(:hover) {
  background: #1E1F27 !important; border-color: #2A2C34 !important; color: #7A7FA0 !important;
}
.survey-card .intake-chip:not(.on) .chip-txt { color: inherit; }

/* ── [수집] #9 분석 버튼 = 별표(AI 심볼)만, 살짝 크게 ── */
.ref-analyze-btn { padding: 0 14px !important; }
.ref-analyze-btn .ai-symbol { width: 18px !important; height: 18px !important; }

/* ── [수집] #6 레퍼런스 영상 첨부 버튼을 스타일 레퍼런스 첨부 박스처럼 ── */
.ref-video-add { width: auto !important; min-width: 44px; height: 38px !important; border-radius: var(--r-pill) !important; background: var(--surface-2) !important; }

/* ── [수집] #7 레퍼런스 영상 분석 결과 = 태그만(텍스트 정보/가로선 없음) + 더 어두운 박스 ── */
.ref-video-result.has-tags { background: #131419 !important; border-color: #2A2C34 !important; }

/* ── [수집] #10 질문 사이 여백 ≥ 질문-답변 여백 ── */
.survey-card .intake-field { margin-bottom: 14px !important; }

/* ── [수집] #11 브랜드/제품(인라인 편집) 답변 하단 얇은 라인 ── */
.survey-subgroup .intake-field:has(> .inline-edit) { border-bottom: 1px solid var(--sep); padding-bottom: 12px; }

/* ── [기획] 선택 기획안 주황 박스 라인 삭제(선택은 미선택 카드 딤으로 표현) ── */
.scenario-card.ssot { border-color: var(--border) !important; border-width: 1px !important; }

/* ── [기획] 전략/스토리라인 등 라벨 텍스트 색상 = #737A8E ── */
.scn-sec-label { color: #737A8E !important; }

/* ── [기획] 내부 태그(스토리라인 단계 등) = 설문 미선택 태그 색상 반영 ── */
.scn-stage-tag { background: #1E1F27 !important; border-color: #2A2C34 !important; color: #7A7FA0 !important; }

/* ── [기획] 시나리오 박스: 내부 더 어둡게(1E1F27) / 테두리(2A2C34) ── */
.scenario-detail { background: #1E1F27; border: 1px solid #2A2C34; border-radius: var(--r-lg); padding: 18px 20px; }

/* ── [기획] 시나리오↔[STYLE NOTE]↔SCENE 사이 가로선 삭제 ── */
.scenario-detail .scn-intro { border-bottom: none !important; padding-bottom: 4px !important; }
.scn-scene-group { border-bottom: none !important; }

/* ── [콘티] #2 PART = 박스 태그가 아니라 '0 ~ 15s'와 동일 크기/색(#737A8E) 텍스트 ── */
.conti-part-tag {
  background: none !important; border: none !important; padding: 0 !important;
  color: #737A8E !important; font-size: 16px !important; font-weight: 800 !important;
  letter-spacing: -0.2px !important; text-transform: none !important;
}
.conti-order-time { color: #737A8E !important; }

/* ── [콘티·이미지] 수정 페이지 메인 콘텐츠 좌우 여백 일치(메인 박스 살짝 축소) ── */
.em-pane[data-pane="media"] { padding: 12px !important; gap: 12px !important; }

/* ── [이미지] 스타일 프레임 '모델 변경(엔진)' 태그 높이 = 우측 '전체 재생성' 태그 높이 ── */
.style-frame-head-left .engine-pill { font-size: 12px !important; font-weight: 500 !important; padding: 5px 13px !important; }

/* ── [영상] #2 전체 화면 시 메인 영상이 너무 작아 보이지 않게 크게 ── */
#editModal.em-video .em-main video { max-height: 84vh !important; max-width: 96% !important; }

/* ══════════════════════════════════════════════════════════════════
   개선.md (2026-06-30, 2차) — UI/사용성 일괄 개선
   파일 끝 = 최종 우선순위. 앞선 !important 규칙을 덮기 위해 동등 명시도 + !important로 작성.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* 선택된 태그용 '머드(muted) 오렌지' — 기존 --point(#FF5F3B)는 채도가 높아 배경 대비 과하게 튐.
     채도↓·명도 살짝↓ 한 톤으로 선택 태그 배경에만 사용(테두리·아이콘 라인은 --point 유지 가능). */
  --point-soft: #C2583E;
  --nav-w: 224px;   /* [공통] 좌측 네비 영역(172→224, 약 30% 넓힘 · 요청). BRIEF 드로어·플로팅버튼·가이드가 var(--nav-w) 기준이라 자동 정렬 */
}

/* ─────────── [공통] 로고·타이틀·상단바·정렬 ─────────── */
/* #1 로고 아주 살짝 축소 + 랜딩/프로젝트 동일(크기·디자인·위치) */
.app-logo, .landing-brand { font-size: 22px !important; font-weight: 600; letter-spacing: -0.4px !important; }
/* #2 정렬 해결: 로고·프로젝트 타이틀·단계 아이콘을 모두 같은 좌측 기준선(24px)에 맞춤.
   (단계 버튼 콘텐츠 left = nav-steps padding 12 + step-btn padding 12 = 24px) */
.app-logo-row { top: 24px !important; left: 24px !important; }
.app-proj-name { margin-left: 0 !important; max-width: 132px; }
.nav-steps { padding-top: 86px !important; }   /* 축소된 로고+타이틀 자리 */
/* 랜딩 로고도 동일 좌표(좌 24px·상단 ≈24px)에 오도록 — 프로젝트 로고와 위치 일치 */
.landing-inner { padding: 18px 24px 130px !important; }

/* #3 상단 어두운 바: '끊긴 듯' 보이던 그라데이션 → 아래로 더 채운 솔리드 다크(검은 네비와 연속),
   분리선(밝은 라인) 제거. 모든 단계에 적용(설정 톱니/로고는 그 위에 표시). */
.stage-canvas::before,
.stage-canvas:not([data-step="1"])::before {
  display: block !important;
  height: 132px !important;
  background: linear-gradient(to bottom, #000 0, #000 60px, rgba(0,0,0,0.55) 96px, transparent 132px) !important;
}
.canvas-header { border-bottom: none !important; }   /* 상단 분리 표시였던 밝은 라인 제거 */

/* ─────────── [공통] #4 경고창 — 빨간 반투명 박스 + 우상단 X ─────────── */
.toast {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(255,69,58,0.50) !important;     /* 빨강 50% 투명 */
  border: 1px solid var(--red) !important;          /* 테두리는 100% */
  border-left: 1px solid var(--red) !important;     /* 기존 border-left 강조 무력화 */
  border-radius: var(--r-md) !important;
  color: #fff !important; font-weight: 500;
  padding: 13px 14px !important; padding-right: 38px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}
.toast .toast-msg { flex: 1; min-width: 0; line-height: 1.45; }
.toast-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: #fff; background: transparent; padding: 0; flex-shrink: 0;
}
.toast-close:hover { background: rgba(255,255,255,0.18); }

/* ─────────── [공통] #6 브리프 팝업 = '최종본 다운로드' 팝오버 톤(#161618) ─────────── */
.brief-modal { background: #161618 !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.7) !important; position: relative; }
.brief-modal-head { background: transparent !important; border-bottom: none !important; padding: 22px 24px 6px !important; }
.brief-modal-title { letter-spacing: .4px; font-weight: 700; }
.brief-modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--fg-muted); border-radius: var(--r-sm); padding: 0; background: transparent;
}
.brief-modal-x:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.brief-modal-foot { border-top: none !important; padding: 8px 24px 22px !important; }
/* #4 브리프: 박스 제거 → 텍스트 위계(라벨=연한 톤 / 값=흰색), 설문 타이틀 색 참고(#737A8E) */
.brief-modal-body { gap: 30px !important; }
.bm-group { display: flex; flex-direction: column; gap: 10px; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; }
.bm-group-title { font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .6px !important; text-transform: uppercase !important; color: #b2bac8 !important; padding-bottom: 0 !important; border-bottom: none !important; }
.bm-line { display: flex; gap: 14px; align-items: baseline; }
.bm-line-label { flex-shrink: 0; width: 144px; min-width: 144px; font-size: 12.5px; color: #737A8E; font-weight: 700; }
.bm-line-val { flex: 1; font-size: 14px; color: var(--fg); line-height: 1.55; word-break: break-word; }
.bm-assets { display: flex; flex-wrap: wrap; gap: 10px; }
.bm-asset { position: relative; width: 76px; }
.bm-asset img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border-str); display: block; }
.bm-asset-tag { display: block; margin-top: 4px; font-size: 9.5px; color: var(--fg-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-assets-grouped { display: flex; flex-direction: column; gap: 14px; }
.bm-asset-cat-group { display: flex; flex-direction: column; gap: 8px; }
.bm-asset-cat-label { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #737A8E; }

/* ─────────── [공통] #1 타이틀 편집 중 말줄임 해제(타이틀 손실 버그) ─────────── */
.app-proj-name.editing {
  max-width: none !important; overflow: visible !important; text-overflow: clip !important;
  white-space: nowrap;
}

/* ─────────── [좌측네비] #3 BRIEF 드로어 상단 빈틈 제거(상단 라인까지 채움) ─────────── */
.ledger-drawer { top: 0 !important; }

/* ─────────── [설문수집전]·[수집] 로딩 그라데이션 — 영역 축소(중앙) + B8BCD2 톤 ─────────── */
.aurora-field { inset: 16% 24% !important; width: auto !important; height: auto !important; }
.aurora-blob { background: rgba(184,188,210,0.34) !important; }

/* ─────────── [수집] #1 선택 태그 머드 오렌지(채도↓) + 직접입력 텍스트 흰색 ─────────── */
.survey-card .intake-chip.on, .survey-card .intake-seg-btn.on, .survey-card .intake-suggest-chip.on {
  background: #e8eaf0 !important; border-color: rgba(255,255,255,0.55) !important; color: #1c1c1e !important;
}
.survey-card .intake-chip.chip-direct.on { color: #1c1c1e !important; }
.survey-card .intake-chip.chip-ai.on .chip-txt { color: #1c1c1e !important; }
.survey-card .intake-suggest-chip.on::before { content: '✓ ' !important; color: #1c1c1e !important; }

/* ─────────── [수집] #2 위계: 간격 시스템(질문>서브그룹>필드>라벨) ─────────── */
.survey-section { margin-bottom: 44px; }
.survey-section:last-child { margin-bottom: 0; }
.survey-sec-label { margin-top: 6px !important; margin-bottom: 16px; }
.survey-subgroup { display: flex; flex-direction: column; gap: 0 !important; margin-bottom: 30px; }
.survey-subgroup:last-child { margin-bottom: 0; }
.survey-subgroup-label { margin-bottom: 10px !important; }   /* 서브그룹 타이틀은 자기 콘텐츠와 가깝게 */
.survey-card .intake-field { margin-bottom: 18px !important; }
.survey-subgroup > .intake-field:last-child { margin-bottom: 0 !important; }
.survey-soundgroup { margin-top: 30px !important; }

/* ─────────── [수집] #11 브랜드/제품 답변 밑줄 = 텍스트 폭 + 글자에 가깝게 ─────────── */
.survey-subgroup .intake-field:has(> .inline-edit) { border-bottom: none !important; padding-bottom: 0 !important; }
.survey-subgroup .inline-edit-view {
  display: inline-block; border-bottom: 1px solid var(--border-str); padding: 0 0 2px 0 !important; border-radius: 0;
}

/* ─────────── [수집] #36 URL 분석 입력+버튼 / #38 레퍼런스 영상 박스 = 태그 색 + 정사각/별표 박스 ─────────── */
/* 분석 버튼(핵심광고포인트·레퍼런스영상 공용) = 어두운 태그 박스 + 머드오렌지 별표 */
.ref-analyze-btn {
  background: #1E1F27 !important; border: 1px solid #2A2C34 !important; color: var(--point-soft) !important;
  border-radius: var(--r-sm) !important;
}
.ref-analyze-btn:hover { border-color: var(--accent) !important; filter: none !important; }
.ref-analyze-btn .ai-symbol { color: var(--point-soft) !important; }
.ref-analyze-btn:hover .ai-symbol { color: var(--fg) !important; }
/* URL 분석 입력 박스도 태그 팔레트로 */
.ref-url-row .intake-input { background: #1E1F27 !important; border-color: #2A2C34 !important; color: var(--fg) !important; }
/* 레퍼런스 영상: 바깥 박스 테두리 제거(독립 정사각 첨부 박스처럼) */
.ref-video-box { background: none !important; border: none !important; padding: 0 !important; }
.ref-video-box-row { align-items: center !important; gap: 8px !important; }
.ref-video-add {
  width: 40px !important; min-width: 40px !important; height: 40px !important;
  border-radius: var(--r-sm) !important; background: #1E1F27 !important; border: 1px solid #2A2C34 !important; color: var(--fg-muted) !important;
}
.ref-video-add:hover { color: var(--fg) !important; border-color: var(--accent) !important; }
.ref-video-box-row .ref-video-link { background: #1E1F27 !important; border-color: #2A2C34 !important; color: var(--fg) !important; }
.ref-video-box-row .ref-analyze-btn { width: 40px; min-width: 40px; height: 40px; padding: 0 !important; display: flex; align-items: center; justify-content: center; }

/* ─────────── [기획] 카드/태그/시나리오 ─────────── */
/* #51 기획안 3종 박스 = 시나리오와 유사한 어두운 톤(#1E1F27 / 테두리 #2A2C34) */
.scenario-card { background: #1E1F27 !important; border-color: #2A2C34 !important; }
.scenario-card.ssot { border-color: #2A2C34 !important; border-width: 1px !important; }
/* #55 기획안 A/B/C 식별 태그 = 주황 → 흰색(전환 배경 제거) */
.scenario-card-id {
  background: transparent !important; border: 1px solid var(--border-str) !important;
  color: var(--fg) !important; border-radius: 6px; padding: 2px 9px; font-weight: 700;
}
/* #52·#53 재생성 = 연필과 같은 크기의 아이콘 박스(둥근 화살표) */
.scn-edit svg { width: 15px !important; height: 15px !important; }
.scn-detail-head, .scenario-detail-head { border-bottom: none !important; }   /* #58 시나리오↔STYLE NOTE 가로선 삭제 */
.scn-detail-regen-btn.scn-ico-btn {
  width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: var(--r-sm) !important;
  display: flex; align-items: center; justify-content: center; font-size: 0;
  background: transparent !important; border: 1px solid var(--border) !important; color: var(--fg-muted) !important;
}
.scn-detail-regen-btn.scn-ico-btn:hover { color: var(--fg) !important; border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.scn-detail-regen-btn.scn-ico-btn svg, .scn-detail-edit-btn svg { width: 15px; height: 15px; }
/* #64 '기획안' 타이틀 = 콘티 'PART n' 위치/색과 동일(흰색·동일 크기) */
.scn-doc-heading { font-size: 16px !important; font-weight: 800 !important; color: var(--fg) !important; letter-spacing: -0.2px; }
/* #57 [STYLE NOTE → Keyframe] 라벨/내용 줄바꿈 위계 */
.scn-stylenote { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 12px; }
.scn-stylenote-label { font-size: 11.5px; font-weight: 700; color: #737A8E; letter-spacing: .02em; }
.scn-stylenote-text { font-size: 13px; color: var(--fg-sec); line-height: 1.6; }
/* #61 시나리오 상세 스펙 = 항목별 배지(카메라/사운드/전환) */
.scn-scene-meta { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.scn-spec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-sec); background: #1E1F27; border: 1px solid #2A2C34; border-radius: var(--r-sm); padding: 3px 8px 3px 6px; }
.scn-spec-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #737A8E; text-transform: none; }
.scn-spec-val { color: var(--fg-sec); }
/* #60 컷→CUT 폭 확보 */
.scn-scene-num { width: 58px !important; }
/* #63 씬(SCENE) 카테고리 = 낮은 높이의 경계 박스(14151F)로 씬 사이 분리, 탭 너비 일치 */
.scn-scene-group {
  display: block; width: 100%; box-sizing: border-box;
  background: #14151F !important; border: 1px solid #2A2C34 !important; border-radius: var(--r-sm);
  color: var(--fg-sec) !important; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 7px 12px !important; margin: 18px 0 10px !important;
}
.scn-scene-group:first-child { margin-top: 0 !important; }

/* ─────────── [콘티] #68 'PART 1' 타이틀 = 투명도 없는 흰색(시간은 #737A8E 유지) ─────────── */
.conti-part-tag { color: var(--fg) !important; }

/* ─────────── [영상] PART 썸네일·진행·헤더 정렬 ─────────── */
.video-grid-head { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; }
.video-viewer { align-items: stretch; }
.vv-status { font-size: 13px; color: var(--fg-muted); margin-bottom: 10px; }
/* PART 썸네일 strip — 콘티 하단 썸네일과 동일하게 메인 영상 좌측부터 정렬 */
.vv-segs { width: 100% !important; max-width: none !important; margin: 14px 0 0 !important; }
.vv-seg-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; }
.vv-seg-card { width: 168px; }
.vv-seg-thumb { position: relative; }
.vv-seg-part {
  position: absolute; top: 5px; left: 5px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: rgba(0,0,0,0.62); border-radius: 4px; padding: 2px 7px; backdrop-filter: blur(3px);
}
.vv-seg-skel { width: 100%; height: 100%; }
.vv-seg-card.pending { cursor: default; }
.vv-seg-cap { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════
   개선.md (2026-06-30, 3차) — UI/사용성 정교화
   ══════════════════════════════════════════════════════════════════ */

/* ─────────── [공통] #7·#8 로고 = 가로 행(로고 + 프로젝트명), 랜딩/프로젝트 위치 일치 ─────────── */
.app-logo-row {
  flex-direction: column !important; align-items: flex-start !important; gap: 1px !important;
  top: 24px !important; left: 28px !important;
}
.app-proj-name {
  max-width: 140px !important; font-size: 13px !important;
  margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-steps { padding-top: 108px !important; }   /* 로고+프로젝트명과 단계 사이 간격 확보(겹침 방지) */
/* 랜딩 로고도 동일 좌표(좌 28px). 세로 위치는 프로젝트 로고(top 26)와 맞춤 */
.landing-inner { padding: 22px 28px 130px !important; }
.landing-head { align-items: center; }

/* ─────────── [공통] #9 상단 어두운 바 = 솔리드(그라데이션 X) + 깔끔하게 잘림 ─────────── */
/* 상단 바 = 워크스페이스 배경색(가려지는 마스크). 로고/좌측 네비 영역은 .step-nav(#000)가 담당하므로
   stage-canvas(워크스페이스)만 배경색으로 → 나브는 블랙, 워크스페이스 상단은 배경과 매끈하게 이어짐 */
.stage-canvas::before,
.stage-canvas:not([data-step="1"])::before {
  display: block !important;
  height: 78px !important;
  background: var(--bg) !important;
}
/* 상단바(스테퍼) 영역 축소 → 단계별 콘텐츠를 위로 올림(스테퍼는 opacity:0 이라 빈 공간) */
.canvas-header { height: 28px !important; }

/* ─────────── [좌측네비] #13 브리프 슬라이드 배경 = #14151F ─────────── */
.ledger-drawer { background: #14151F !important; }

/* ─────────── [수집] #22 브랜드/제품 답변(밑줄)을 질문 오른쪽에 배치 ─────────── */
/* 답변(밑줄)을 다시 질문 하단으로(세로) — 라벨 위, 답변 아래 */
.survey-subgroup .intake-field:has(> .inline-edit) {
  display: flex; flex-direction: column !important; align-items: flex-start; gap: 6px; border-bottom: none !important; padding-bottom: 0 !important;
}
.survey-subgroup .intake-field:has(> .inline-edit) > .intake-label { min-width: 0; }
.survey-subgroup .intake-field:has(> .inline-edit) > .inline-edit { flex: none; }

/* ─────────── [수집] #24 레퍼런스 영상 첨부 = 다른 첨부 박스와 동일한 정사각(64×64) ─────────── */
.ref-video-box { background: none !important; border: none !important; padding: 0 !important; }
.ref-video-add-row { display: flex; }
.ref-video-add {
  width: 64px !important; min-width: 64px !important; height: 64px !important;
  border-radius: var(--r-sm) !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2) !important; border: 1px solid var(--border-str) !important; color: var(--fg-muted) !important;
}
.ref-video-add:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.ref-video-add .intake-upload-plus { color: inherit; }

/* ─────────── [수집] 레퍼런스 분석중/결과 = 박스·들여쓰기 제거 → 첨부 박스 아래 가까이, 좌측 정렬 ─────────── */
.ref-video-result {
  background: none !important; border: none !important; padding: 0 !important; margin-top: 8px !important; gap: 8px !important;
}
.ref-video-result.has-tags { background: none !important; border: none !important; padding: 0 !important; }
.ref-video-result .intake-chips { margin: 0 !important; padding: 0 !important; }
.ref-video-analyzing { display: flex; flex-direction: column; gap: 8px; margin-top: 0 !important; }
.ref-video-analyzing .ref-anim-line { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.ref-video-analyzing .ai-symbol { width: 15px; height: 15px; color: var(--point); animation: ref-spark-pulse 1.1s ease-in-out infinite; }
@keyframes ref-spark-pulse { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
/* 분석중 텍스트 = 빛이 지나가는 그라데이션(주황 → 밝은 톤 → 주황 이동) */
.ref-video-analyzing .ref-anim-text {
  background: linear-gradient(100deg, var(--point) 30%, #FFE2D6 50%, var(--point) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ref-text-shine 1.5s linear infinite;
}
@keyframes ref-text-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* 레퍼런스 영상 첨부 썸네일(정지 프레임) — 다른 첨부 이미지와 동일 크기/형태 */
.ref-video-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border-str); background: #000; }
.ref-video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ref-video-thumb .staged-remove { position: absolute; top: 3px; right: 3px; z-index: 2; }

/* ─────────── [수집] #28 '+직접 입력' 칩 = 다른 태그보다 밝은 톤(살짝 구분) ─────────── */
.survey-card .intake-chip.chip-direct:not(.on),
.survey-card .intake-chip.chip-direct:not(.on):not(:hover) {
  background: #2E3142 !important; border-color: #3B3F52 !important; color: #B6BAD2 !important;
}
.survey-card .intake-chip.chip-direct:not(.on):hover { color: #fff !important; border-color: var(--accent) !important; }

/* ─────────── [콘티] 시나리오 레이아웃 정교화 ─────────── */
/* #39 카메라/사운드/전환 = '라벨'만 테두리 태그, 내용은 평문 */
.scn-scene-meta { display: flex !important; flex-wrap: wrap; gap: 8px 14px; margin-top: 7px; align-items: baseline; }
.scn-spec { display: inline-flex !important; align-items: baseline; gap: 7px; background: none !important; border: none !important; padding: 0 !important; font-size: 13px; }
.scn-spec-tag {
  border: 1px solid #2A2C34 !important; background: #1E1F27 !important; border-radius: var(--r-sm);
  padding: 2px 8px; font-size: 11px; font-weight: 700; color: #7F89B0 !important; letter-spacing: .02em;
}
.scn-spec-val { color: var(--fg-sec); font-size: 13px; }
/* 레이아웃 = 원복: CUT 1(좌, 고정폭) 우측에 컷 설명 + 태그. CUT 하단엔 텍스트 없음(가로 배치) */
.scn-scene { flex-direction: row !important; gap: 16px !important; }
.scn-scene-num { width: 58px !important; flex-shrink: 0; padding-top: 1px !important; color: var(--fg) !important; }   /* CUT 색 = 흰색 */
.scn-scene-body { width: auto !important; flex: 1; min-width: 0; }
/* 씬(SCENE) 카테고리 = 어두운 박스 제거(평문 헤더로). 씬 사이 여백만 */
.scn-scene-group {
  margin: 18px 0 6px !important; border: none !important; background: none !important;
  border-radius: 0 !important; padding: 0 !important; color: #7F89B0 !important; font-size: 12px; font-weight: 700;
}
.scn-scene-group:first-child { margin-top: 0 !important; }
/* #38 STYLE NOTE → Keyframe 라벨/내용 줄바꿈 위계(콜론 없어도 적용) */
.scn-stylenote { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 14px; }
.scn-stylenote-label { font-size: 12px; font-weight: 700; color: #7F89B0; }
.scn-stylenote-text { font-size: 13px; color: var(--fg-sec); line-height: 1.6; }

/* ─────────── [영상] #47 마무리 버튼 = 화면 중앙이 아니라 워크스페이스(메인) 중앙 ─────────── */
.video-done-float { left: calc(50% + var(--nav-w) / 2) !important; }

/* ═══════════════════════════════════════════════════════
   Round 4 개선
   ═══════════════════════════════════════════════════════ */

/* ── 섹션(전략/스토리) 내부 라벨↔텍스트 간격 ── */
.scn-sec { gap: 6px !important; }
/* ── 전략↔스토리 섹션 사이 여백 확대 ── */
.scenario-card-body { gap: 18px !important; }

/* ── 기획안 A/B/C 태그: 밝은 채움 배경, 테두리 없음, 어두운 텍스트 ── */
.scenario-card-id {
  background: #e8eaf0 !important;
  border: none !important;
  color: #1c1c1e !important;
  border-radius: 6px; padding: 0 10px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; height: 28px;
}

/* ── 기획안 카드 헤드: 태그+버튼 한 줄, 타이틀 아래 별도 줄 ── */
.scenario-card-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: flex-start !important;
}
.scn-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.scn-edit-btns { display: flex; gap: 6px; }
.scn-title-group { display: flex; flex-direction: column; gap: 4px; }
.scn-title-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: #737A8E;
}
.scenario-card-title {
  font-size: 16px; font-weight: 600; color: var(--fg);
  line-height: 1.4; word-break: keep-all;
}

/* ── 기획안 툴바(전체 재생성 버튼 행) — 우측 고정 ── */
.scn-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  min-height: 26px;
}

/* ── 단계 안내 문구: 앱 상단 헤더 레벨, 콘텐츠 좌측 시작점에 맞춤 ── */
#canvasGuide {
  position: absolute;
  top: 31px;
  /* ws-col(max 1200px, margin:auto) 의 실제 좌측 패딩 시작점에 맞춤
     · 소형 화면: nav-w + 20px(ws-col padding)
     · 대형 화면: 50vw + nav-w/2 - 580px (ws-col 가로 중앙 정렬 시) */
  left: max(calc(var(--nav-w) + 20px), calc(50vw + var(--nav-w) / 2 - 580px));
  z-index: 50;
  font-size: 13px; color: var(--fg-muted); font-weight: 500;
  letter-spacing: -0.1px; white-space: nowrap;
  margin: 0; pointer-events: none;
}
#canvasGuide strong { font-weight: 800; color: var(--fg); letter-spacing: .3px; }

/* ── 단계 타이틀이 비어있으면 숨김(공백 방지) ── */
.ws-step-title:empty { display: none !important; }

/* ── 전 단계: 상단 고정 오버레이(78px) 아래에 콘텐츠가 시작되도록 여백 확보 ── */
.stage-canvas[data-step="1"] .ws-col,
.stage-canvas[data-step="2"] .ws-col,
.stage-canvas[data-step="3"] .ws-col,
.stage-canvas[data-step="4"] .ws-col,
.stage-canvas[data-step="5"] .ws-col {
  padding-top: 52px !important;
}