@font-face {
  font-family: 'KOTRA Hope';
  src: url('fonts/KOTRAHOPE.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── 프로젝트 전체: Shift/Tab 포커스 시 흰색 outline 제거 ──────────────── */
*:focus,
*:focus-visible {
  outline: none !important;
}

:root {
  --orange: #ff7a00;
  --teal: #0bbfa5;
  --blue: #5c7cff;
  --radius: 14px;
}

[data-theme] {
  --accent: var(--orange);
  --shadow-1: var(--shadow);
  --scrollbar-track: rgba(134, 157, 189, 0.14);
  --scrollbar-thumb: rgba(134, 157, 189, 0.44);
  --scrollbar-thumb-hover: rgba(160, 181, 210, 0.62);
  --studio-hero-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--panel) 94%, var(--bg) 6%),
    color-mix(in srgb, var(--bg-2) 86%, var(--panel) 14%)
  );
  --studio-toolbar-bg: color-mix(in srgb, var(--panel) 78%, var(--bg-2) 22%);
  --studio-soft-bg: color-mix(in srgb, var(--panel) 72%, var(--bg-2) 28%);
  --studio-input-bg: color-mix(in srgb, var(--panel) 88%, var(--bg) 12%);
  --studio-accent-bg: linear-gradient(
    160deg,
    rgba(255, 140, 0, 0.12),
    color-mix(in srgb, var(--panel) 82%, var(--bg-2) 18%)
  );
}

[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="light"] {
  color-scheme: light;
}

[data-theme] * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme] *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme] *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

[data-theme] *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 84%, #5c6f8d 16%));
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme] *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--scrollbar-thumb-hover) 84%, #7086a6 16%));
  background-clip: padding-box;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-2: #0b1224;
  --bg-3: #1e2030;
  --card: #121d35;
  --panel: #0d152a;
  --border: #1b2845;
  --text: #e9edf7;
  --text-2: #b4c3dc;
  --text-3: #6478a0;
  --muted: #8aa0c3;
  --input-bg: #0f1624;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --bg-glow1: rgba(255, 122, 0, 0.08);
  --bg-glow2: rgba(11, 191, 165, 0.12);
  --bg-grad1: #0c1326;
  --bg-grad2: #0f172a;
  --bg-grad3: #0a0f1f;
  --layer-soft: rgba(255, 255, 255, 0.04);
  --layer-strong: rgba(255, 255, 255, 0.06);
  --progress-bg: rgba(255, 255, 255, 0.05);
  --chip-border: rgba(255, 255, 255, 0.15);
  --pill-border: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] {
  --bg: #f7f9fd;
  --bg-2: #eef2fb;
  --bg-3: #dce6f5;
  --card: #ffffff;
  --panel: #ffffff;
  --border: #cbd6ea;
  --text: #0d172f;
  --text-2: #3a4d6e;
  --text-3: #7a8fa8;
  --muted: #51617f;
  --input-bg: #f0f4fb;
  --shadow: 0 10px 26px rgba(13, 23, 47, 0.1);
  --bg-glow1: rgba(255, 122, 0, 0.08);
  --bg-glow2: rgba(11, 191, 165, 0.1);
  --bg-grad1: #f7f9fd;
  --bg-grad2: #eef2fa;
  --bg-grad3: #e8edf8;
  --layer-soft: rgba(13, 23, 47, 0.04);
  --layer-strong: rgba(13, 23, 47, 0.06);
  --progress-bg: rgba(13, 23, 47, 0.08);
  --chip-border: rgba(13, 23, 47, 0.12);
  --pill-border: rgba(13, 23, 47, 0.12);
}

[data-theme="dark"][data-theme-variant="dark-midnight"] {
  --bg: #050714;
  --bg-2: #070a19;
  --card: #0d1226;
  --panel: #0a1022;
  --border: #2f3f7a;
  --text: #eaf0ff;
  --muted: #8aa0d8;
  --shadow: 0 16px 48px rgba(1, 4, 13, 0.56);
  --bg-glow1: rgba(91, 128, 255, 0.2);
  --bg-glow2: rgba(0, 221, 255, 0.16);
  --bg-grad1: #050713;
  --bg-grad2: #0c1230;
  --bg-grad3: #120f2d;
}

[data-theme="dark"][data-theme-variant="dark-forest"] {
  --bg: #06130f;
  --bg-2: #071811;
  --card: #0d211a;
  --panel: #0a1a15;
  --border: #206649;
  --text: #e7fff4;
  --muted: #7bc2a3;
  --shadow: 0 16px 46px rgba(2, 14, 9, 0.52);
  --bg-glow1: rgba(0, 255, 163, 0.18);
  --bg-glow2: rgba(0, 190, 255, 0.12);
  --bg-grad1: #05110d;
  --bg-grad2: #0c231b;
  --bg-grad3: #102419;
}

[data-theme="dark"][data-theme-variant="dark-slate"] {
  --bg: #050505;
  --bg-2: #0b0b0b;
  --card: #121212;
  --panel: #0e0e0e;
  --border: #3a3a3a;
  --text: #f7f7f7;
  --muted: #b4b4b4;
  --shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
  --bg-glow1: rgba(255, 255, 255, 0.07);
  --bg-glow2: rgba(0, 255, 234, 0.08);
  --bg-grad1: #050505;
  --bg-grad2: #151515;
  --bg-grad3: #070707;
}

[data-theme="dark"][data-theme-variant="dark-royal"] {
  --bg: #13061f;
  --bg-2: #1a0a2a;
  --card: #25123b;
  --panel: #1c0f31;
  --border: #5d3e9a;
  --text: #ffe9ff;
  --muted: #c8a8f2;
  --shadow: 0 16px 48px rgba(14, 4, 22, 0.52);
  --bg-glow1: rgba(255, 72, 193, 0.22);
  --bg-glow2: rgba(104, 92, 255, 0.2);
  --bg-grad1: #140820;
  --bg-grad2: #2a0f3f;
  --bg-grad3: #0d1237;
}

[data-theme="light"][data-theme-variant="light-sky"] {
  --bg: #eef5ff;
  --bg-2: #dcecff;
  --card: #ffffff;
  --panel: #fdfeff;
  --border: #a8c7f2;
  --text: #0b2144;
  --muted: #3f6498;
  --shadow: 0 10px 30px rgba(8, 50, 117, 0.16);
  --bg-glow1: rgba(38, 140, 255, 0.18);
  --bg-glow2: rgba(0, 221, 255, 0.16);
  --bg-grad1: #f1f6ff;
  --bg-grad2: #ddedff;
  --bg-grad3: #d4e6ff;
}

[data-theme="light"][data-theme-variant="light-sand"] {
  --bg: #fff6ea;
  --bg-2: #ffe7cd;
  --card: #fffdf8;
  --panel: #fff9f0;
  --border: #e8bc86;
  --text: #352313;
  --muted: #8d6540;
  --shadow: 0 10px 28px rgba(123, 67, 12, 0.14);
  --bg-glow1: rgba(255, 151, 51, 0.2);
  --bg-glow2: rgba(255, 88, 45, 0.12);
  --bg-grad1: #fff8ef;
  --bg-grad2: #ffe8cc;
  --bg-grad3: #ffdcb1;
}

[data-theme="light"][data-theme-variant="light-mint"] {
  --bg: #ebfff8;
  --bg-2: #d4f9ee;
  --card: #fcfffe;
  --panel: #f6fffb;
  --border: #98e2c8;
  --text: #073229;
  --muted: #327369;
  --shadow: 0 10px 26px rgba(6, 96, 68, 0.14);
  --bg-glow1: rgba(0, 210, 163, 0.18);
  --bg-glow2: rgba(72, 242, 197, 0.14);
  --bg-grad1: #effff9;
  --bg-grad2: #d8fbef;
  --bg-grad3: #caf5e7;
}

[data-theme="light"][data-theme-variant="light-rose"] {
  --bg: #fff2f7;
  --bg-2: #ffe1ee;
  --card: #fffdff;
  --panel: #fff8fb;
  --border: #efb3d0;
  --text: #4a1630;
  --muted: #9f4f77;
  --shadow: 0 10px 26px rgba(151, 36, 98, 0.14);
  --bg-glow1: rgba(255, 75, 147, 0.2);
  --bg-glow2: rgba(255, 154, 204, 0.18);
  --bg-grad1: #fff4f8;
  --bg-grad2: #ffe4ef;
  --bg-grad3: #ffd8e9;
}

* {
  box-sizing: border-box;
}

select option {
  color: #111;
  background: #fff;
}

html,
body {
  margin: 0;
  font-family: 'Space Grotesk', 'Pretendard', 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 20% 20%, var(--bg-glow1), transparent 28%),
    radial-gradient(circle at 80% 0%, var(--bg-glow2), transparent 30%),
    linear-gradient(145deg, var(--bg-grad1) 0%, var(--bg-grad2) 45%, var(--bg-grad3) 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.015) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.015) 75%);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
  opacity: 0.7;
  z-index: 0;
}

.nk-dialog-root {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 20, 0.64);
  z-index: 10000;
}

.nk-dialog-root.is-open {
  display: flex;
}

.nk-dialog-panel {
  width: min(640px, 100%);
  max-height: min(84vh, 760px);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #ffffff 8%) 0%, var(--panel) 100%);
  box-shadow: var(--shadow);
  padding: 16px;
}

.nk-dialog-title {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
}

.nk-dialog-message {
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent 28%);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}

.nk-dialog-input {
  display: none;
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.nk-dialog-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.app.no-sidebar {
  grid-template-columns: 1fr;
}

#stage-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

/* 캐시된 비활성 stage iframe (id가 없으면 hidden) */
.stage-iframe:not(#stage-iframe) {
  display: none !important;
}

.stage-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
  z-index: 2;
}
.stage-overlay.is-active {
  opacity: 1;
}

.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  min-height: 100vh;
  padding: 22px 20px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

html[data-embed="1"],
body[data-embed="1"] {
  background: transparent !important;
  overflow: auto;
}

[data-embed="1"] .main {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

[data-embed="1"] .main-body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

[data-page="index"] .main-body,
[data-page="ai-video"] .main-body {
  height: auto;
  max-height: none;
  overflow: visible;
}
[data-page="ai-image"].layout-fixed .app {
  height: 100vh;
  min-height: 100vh;
}
[data-page="ai-image"] .app {
  height: 100vh;
}
[data-page="ai-image"] .main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-page="ai-image"] .main-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
[data-page="ai-image"] .content {
  flex: 1 1 auto;
  min-height: 0;
}
[data-page="ai-image"] #ai-image-root {
  height: 100%;
  min-height: 0;
}
[data-page="ai-image"] .main {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0b1224;
  background-image: url('./images/logo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.page-shell-brand .brand-mark {
  background-image: url('./images/icon-ai-branding.png');
}

body.page-shell-video .brand-mark {
  background-image: url('./images/icon-ai-cinema.png');
}

body.page-shell-image .brand-mark {
  background-image: url('./images/icon-ai-image.png');
}

body.page-shell-videogen .brand-mark {
  background-image: url('./images/icon-ai-video.png');
}

body.page-shell-ai-doc .brand-mark {
  background-image: url('./images/icon-ai-doc.png');
}

body.page-shell-ai-sound .brand-mark {
  background-image: url('./images/icon-ai-sound.png');
}

.brand-text .title {
  display: block;
  font-weight: 700;
}

.brand-text .subtitle {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  transition: 0.15s ease;
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.nav-item.disabled:hover {
  background: transparent;
  color: var(--muted);
}


.nav-item:hover {
  background: var(--layer-soft);
  color: var(--text);
}

.nav-item.active {
  background: rgba(255, 122, 0, 0.15);
  color: var(--text);
  border: 1px solid rgba(255, 122, 0, 0.25);
}

.nav-item.active {
  justify-content: flex-start;
  gap: 10px;
}

.nav-toggle {
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .nav-toggle {
  border-color: #d0d8ea;
  background: #eef2fb;
  color: #0d172f;
}

[data-theme="light"] .nav-toggle:hover {
  background: #e1e8f7;
}

.nav-sub {
  margin: -4px 0 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-sub .nav-sub-item {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}

.nav-sub .nav-sub-item:hover {
  color: var(--text);
  background: var(--layer-soft);
}

.nav-sub-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  justify-content: space-between;
}

.nav-sub-delete {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  transition: none;
  margin-left: -15px;
  /* keeps icon closer */
  transform: translateX(-15px);
}

.nav-sub-delete:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* Pipeline page scrolling for scene cards */
#pipeline-card {
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  overflow: hidden;
}

#pipeline-scenes {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

#pipeline-scenes::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lib-content {
  width: 70vw;
  height: 70vh;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lib-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* .card 의 overflow:hidden(뒤에 정의돼 우선됨)이 .lib-content 의 overflow:auto 를
   덮어써 라이브러리가 스크롤되지 않던 문제 — 명시도를 높여 스크롤 복원(스크롤바는 숨김). */
.card.lib-content {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card.lib-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lib-content .card-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.lib-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.lib-title {
  font-weight: 600;
}

.lib-selection-count {
  font-size: 12px;
  min-width: 0;
}

.lib-header-spacer {
  flex: 1;
}

.lib-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lib-toolbar #lib-select-btn.active {
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.12);
  color: #f97316;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px;
}

.lib-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
}

.lib-item.selected,
.lib-item.lib-selected {
  outline: 4px solid #f97316; /* 진한 주황 테두리 */
  outline-offset: 0;
  background: rgba(255, 122, 0, 0.08);
}

.lib-item.lib-multi-select {
  cursor: pointer;
}

.lib-thumb {
  width: 100%;
  display: block;
  object-fit: cover;
}

.lib-item img.lib-thumb {
  aspect-ratio: 1 / 1;
}

.lib-item video.lib-thumb {
  aspect-ratio: 16 / 9;
}

.lib-meta {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-empty {
  min-height: 240px;
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

[data-theme="light"] .nav-sub-delete {
  border-color: #d0d8ea;
  background: #eef2fb;
  color: #51617f;
}

[data-theme="light"] .nav-sub-delete:hover {
  background: #e1e8f7;
  color: #0d172f;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}

.sidebar-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.main {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.main-body {
  flex: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.content {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 임베드된(아이프레임 내부) 페이지의 메인 영역은 패딩 유지 */
[data-embed="1"] .main {
  padding: 16px 24px 24px;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.app.no-sidebar .main-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app.no-sidebar .main-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Brand Studio shell: page scroll 비활성화 */
.bsf-app.no-sidebar .main-body {
  overflow: hidden;
}

.main::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(12, 19, 38, 0.95), rgba(10, 17, 32, 0.92));
}

[data-theme="light"] .topbar {
  background: linear-gradient(135deg, #f8fbff, #e7eef8);
  border-color: #d7e1f3;
  box-shadow: 0 10px 24px rgba(13, 23, 47, 0.08);
}

.main-body {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.content {
  height: 100%;
  width: 100%;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.project-picker label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.select {
  background: var(--layer-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-version {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* 사이드바 하단 앱 런처 — 랜딩 상단 메뉴(앱 아이콘)를 사이드바에서 바로 전환.
   테두리/배경 없이 아이콘만 노출하고, 현재 앱은 불투명도로만 강조한다. */
.sidebar-launcher {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  align-items: center;
}

.sidebar-launcher-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0.55;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.sidebar-launcher-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

a.sidebar-launcher-item:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.sidebar-launcher-item.is-active {
  opacity: 1;
}

.sidebar-launcher-item.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* 홈(옵션) 버튼 — 사이드바 상단 우측 모서리에 작게 고정. 가로=세로 정사각형.
   파일 뒤쪽 .btn-ghost(min-height/padding) 규칙을 확실히 덮기 위해 .sidebar로 명시도를 올린다. */
.sidebar .sidebar-home-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-height: 28px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  z-index: 5;
}

.sidebar .sidebar-home-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.sidebar .sidebar-home-btn:hover {
  color: var(--text);
}

.search input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
}

.search input::placeholder {
  color: var(--muted);
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
}

.lang-toggle {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.mode-toggle {
  display: flex;
  background: var(--layer-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.mode-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: 0.15s ease;
}

.mode-btn.active {
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

a.btn-primary,
a.btn-secondary,
a.btn-ghost {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(255, 122, 0, 0.25);
}

.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ─── 구글 로그인 버튼 (아이콘 전용, 로그인 버튼 우측) ─────────── */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dadce0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-google:hover {
  background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

.btn-google:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-google-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.btn-secondary {
  background: rgba(11, 191, 165, 0.12);
  color: #0b0b0b;
  border: 1px solid rgba(11, 191, 165, 0.3);
  padding: 10px 14px;
}

.btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

[data-theme="dark"] .btn-secondary {
  color: #9df1e2;
}

.btn-ghost {
  background: var(--layer-soft);
  color: var(--text);
  padding: 10px 12px;
  border: 1px solid var(--border);
}

/* 프리프로덕션 상단 초기화 버튼을 저장하기와 동일 스타일로 맞춤 */
.caption-actions .btn-ghost[form="scenario-form"][type="reset"] {
  background: rgba(11, 191, 165, 0.12);
  color: #0b0b0b;
  border: 1px solid rgba(11, 191, 165, 0.3);
}
[data-theme="dark"] .caption-actions .btn-ghost[form="scenario-form"][type="reset"] {
  color: #9df1e2;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  transform: none;
}

#confirm-scenes {
  background: #fb9a33;
  background-image: none;
  color: #0b0b0b;
}

a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
  color: #0b0b0b;
}

.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-ghost:disabled:hover {
  transform: none;
}

.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  text-align: center;
  font-size: 0;
}

.theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

[data-theme="dark"] .theme-toggle::before {
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='moonHalf' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffe071'/%3E%3Cstop offset='100%25' stop-color='%23f4c33a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 8 A24 24 0 1 1 32 56 L32 8 Z' fill='url(%23moonHalf)' stroke='%23d8aa32' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .theme-toggle::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='sunCore2' cx='50%25' cy='45%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23fff6c9'/%3E%3Cstop offset='55%25' stop-color='%23ffd44f'/%3E%3Cstop offset='100%25' stop-color='%23ffb300'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='16' fill='url(%23sunCore2)' stroke='%23ffb300' stroke-width='2'/%3E%3C/svg%3E");
}

[data-theme="light"] .theme-toggle {
  background-color: var(--layer-soft);
  border-color: var(--border);
}

.sidebar-actions .theme-toggle,
.sidebar-actions .screen-toggle,
.sidebar-actions .lang-toggle,
.sidebar-actions .icon-btn {
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.12) 22%);
  background:
    radial-gradient(circle at 24% 22%, rgba(255, 159, 63, 0.2), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.03) 18%), color-mix(in srgb, var(--bg-2) 92%, rgba(255, 255, 255, 0.02) 8%));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;
}

.sidebar-actions .lang-toggle {
  color: #aeb7c7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-actions .theme-toggle::before,
.sidebar-actions .screen-toggle::before,
.sidebar-actions .icon-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0.9;
}

[data-theme="dark"] .sidebar-actions .theme-toggle::before {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.75a8.25 8.25 0 1 1 0 16.5V3.75Z' fill='%23AEB7C7'/%3E%3Cpath d='M12 3.75a8.25 8.25 0 1 1 0 16.5a8.25 8.25 0 0 1 0-16.5Z' stroke='%23AEB7C7' stroke-width='1.45' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .sidebar-actions .theme-toggle::before {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4.25' stroke='%2351617F' stroke-width='1.55'/%3E%3Cpath d='M12 2.75v2.1M12 19.15v2.1M5.47 5.47l1.48 1.48M17.05 17.05l1.48 1.48M2.75 12h2.1M19.15 12h2.1M5.47 18.53l1.48-1.48M17.05 6.95l1.48-1.48' stroke='%2351617F' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar-actions .screen-toggle {
  color: transparent;
}

.sidebar-actions .screen-toggle::before {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 3.75H4.75V7M20 8V4.75h-3.25M16 20.25h3.25V17M4 16v3.25H7.25' stroke='%23AEB7C7' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sidebar-actions .screen-toggle.is-fullscreen::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.25 9.25H4.75V4.75M9.25 9.25 4.75 4.75M14.75 9.25H19.25V4.75M14.75 9.25 19.25 4.75M14.75 14.75H19.25V19.25M14.75 14.75 19.25 19.25M9.25 14.75H4.75V19.25M9.25 14.75 4.75 19.25' stroke='%23AEB7C7' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sidebar-actions .icon-btn {
  color: transparent;
}

.sidebar-actions .icon-btn::before {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 11.25 12 4l9 7.25' stroke='%23AEB7C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.25 10.5v8.75h11.5V10.5' stroke='%23AEB7C7' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 19.25v-3.25a2 2 0 0 1 4 0v3.25' stroke='%23AEB7C7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar-actions .theme-toggle:hover,
.sidebar-actions .screen-toggle:hover,
.sidebar-actions .lang-toggle:hover,
.sidebar-actions .icon-btn:hover {
  border-color: rgba(255, 140, 0, 0.4);
  box-shadow:
    0 16px 30px rgba(255, 122, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sidebar-actions .theme-toggle:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3.75a8.25 8.25 0 1 1 0 16.5V3.75Z' fill='%23F5F7FD'/%3E%3Cpath d='M12 3.75a8.25 8.25 0 1 1 0 16.5a8.25 8.25 0 0 1 0-16.5Z' stroke='%23F5F7FD' stroke-width='1.45' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"] .sidebar-actions .theme-toggle:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4.25' stroke='%23F5F7FD' stroke-width='1.55'/%3E%3Cpath d='M12 2.75v2.1M12 19.15v2.1M5.47 5.47l1.48 1.48M17.05 17.05l1.48 1.48M2.75 12h2.1M19.15 12h2.1M5.47 18.53l1.48-1.48M17.05 6.95l1.48-1.48' stroke='%23F5F7FD' stroke-width='1.55' stroke-linecap='round'/%3E%3C/svg%3E");
}

.sidebar-actions .lang-toggle:hover {
  color: #f5f7fd;
}

[data-theme="light"] .sidebar-actions .lang-toggle {
  color: #51617f;
}

.sidebar-actions .icon-btn:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 11.25 12 4l9 7.25' stroke='%23F5F7FD' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.25 10.5v8.75h11.5V10.5' stroke='%23F5F7FD' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 19.25v-3.25a2 2 0 0 1 4 0v3.25' stroke='%23F5F7FD' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Light theme: keep sidebar bottom icons stable on hover (no brightening) */
[data-theme="light"] .sidebar-actions .theme-toggle:hover,
[data-theme="light"] .sidebar-actions .screen-toggle:hover,
[data-theme="light"] .sidebar-actions .icon-btn:hover {
  border-color: color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.12) 22%);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .sidebar-actions .icon-btn:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 11.25 12 4l9 7.25' stroke='%23AEB7C7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.25 10.5v8.75h11.5V10.5' stroke='%23AEB7C7' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 19.25v-3.25a2 2 0 0 1 4 0v3.25' stroke='%23AEB7C7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="light"] .sidebar-actions .theme-toggle:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='sunCore2' cx='50%25' cy='45%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23fff6c9'/%3E%3Cstop offset='55%25' stop-color='%23ffd44f'/%3E%3Cstop offset='100%25' stop-color='%23ffb300'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='16' fill='url(%23sunCore2)' stroke='%23ffb300' stroke-width='2'/%3E%3C/svg%3E");
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #5c7cff, #9bc5ff);
  display: grid;
  place-items: center;
  color: #0b0b0b;
  font-weight: 700;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
}

.scenario-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.scenario-grid {
  display: grid;
  grid-template-columns: 0.3fr 0.7fr;
  grid-template-rows: auto 1fr;
  gap: 10px;
  align-items: start;
  height: 100%;
  min-height: 0;
}

.section-caption {
  grid-column: 1 / -1;
  grid-row: 1;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 0 4px;
  line-height: 30px;
}

.section-caption span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
}

.section-caption.left-caption {
  grid-column: 1 / 2;
}

.section-caption.right-caption {
  grid-column: 2 / 3;
}

.caption-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.caption-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-self: end;
}

.caption-left {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
}

/* 가운데 정렬되는 펼침/접기/포커스 토글 그룹 */
.caption-fold-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: center;
}

.caption-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.btn-icon-sm {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.btn-icon-sm:hover {
  border-color: rgba(255, 122, 0, 0.5);
  background: rgba(255, 122, 0, 0.10);
}
.btn-icon-sm.active {
  border-color: #ff7a00;
  background: rgba(255, 122, 0, 0.15);
  color: #ff7a00;
}

.ratio-group {
  display: inline-flex;
  gap: 8px;
}

.caption-actions > .ratio-group {
  margin-right: 6px;
}

/* 시나리오 생성 + 초기화 버튼 묶음 간격 조정 */
.caption-actions > .btn-primary,
.caption-actions > .btn-ghost[form="scenario-form"][type="reset"] {
  margin-right: 0;
}
.caption-actions > .btn-primary + .btn-ghost[form="scenario-form"][type="reset"] {
  margin-left: -6px;
}

.ratio-group .ratio-btn {
  padding: 10px 14px;
}

.scenario-form .scenario-ratio-group {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  flex-wrap: nowrap;
}

.scenario-form .scenario-ratio-group .ratio-btn {
  min-width: 0;
  width: 100%;
}

.ratio-group .ratio-btn.active {
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
}

.results-card {
  grid-column: 2 / 3;
  grid-row: 2;
}

.scenario-form {
  grid-column: 1 / 2;
  grid-row: 2;
}

.card.scenario-form {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  min-height: 0;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.card.scenario-form::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.results-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

.scenario-form .form-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.scenario-form label {
  color: #ff7a00;
  font-size: 15px;
  font-weight: 700;
  min-width: 100px;
  flex-shrink: 0;
}

.scenario-form .scenario-form-label-row {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-areas:
    "label label"
    "ai toggle";
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
  width: 100px;
  min-width: 100px;
  flex: 0 0 100px;
}

.scenario-form .scenario-form-label-row label {
  min-width: 0;
  grid-area: label;
}

.scenario-form .scenario-form-label-row .scenario-story-ai-btn {
  grid-area: ai;
  justify-self: start;
}

.scenario-form .scenario-form-label-row .scenario-story-toggle-btn {
  grid-area: toggle;
  justify-self: start;
}

.scenario-form .scenario-story-controls {
  flex: 1 1 auto;
  display: flex;
}
.scenario-form .scenario-story-field {
  flex: 1 1 auto;
}

[data-theme="light"] .scenario-form label {
  color: #0d172f;
}

.scenario-form input,
.scenario-form select,
.scenario-form textarea {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  flex: 1;
  font-family: inherit;
  min-width: 0;
  width: 100%;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.scenario-form input:focus,
.scenario-form select:focus,
.scenario-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, #ff9a3d 34%, var(--border) 66%);
  box-shadow: 0 0 0 2px rgba(255, 148, 46, 0.14);
}

.scenario-form select option {
  color: var(--text);
  background: var(--bg-2);
}

[data-theme="light"] .scenario-form select option {
  background: #ffffff;
  color: #0f172a;
}

.scenario-form textarea {
  resize: vertical;
  min-height: calc(1.45em * 5 + 16px);
  scrollbar-width: none; /* Firefox */
}
.scenario-form textarea::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

textarea::-webkit-resizer {
  width: 14px;
  height: 14px;
  border: 0;
  background-color: transparent;
  background-image:
    linear-gradient(135deg, transparent 0 54%, color-mix(in srgb, var(--muted) 78%, transparent 22%) 54% 62%, transparent 62% 100%),
    linear-gradient(135deg, transparent 0 68%, color-mix(in srgb, var(--muted) 78%, transparent 22%) 68% 76%, transparent 76% 100%);
  background-position: bottom right, bottom right;
  background-repeat: no-repeat;
  background-size: 14px 14px, 10px 10px;
  box-shadow: none;
}

textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.scenario-form input::placeholder,
.scenario-form textarea::placeholder {
  color: var(--muted);
  font-style: normal;
}

.scenario-form .scenario-inline-controls {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.scenario-form .scenario-story-controls {
  flex: 1;
  display: flex;
  gap: 0;
  align-items: stretch;
  min-width: 0;
}

.scenario-form .scenario-story-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.scenario-form .scenario-story-field.is-loading textarea {
  opacity: 0.64;
}

.scenario-form .scenario-story-controls textarea {
  flex: 1;
  min-height: calc(1.45em * 10 + 16px);
}

.scenario-form .scenario-story-field.has-token-buttons textarea {
  padding-bottom: 76px;
}

.scenario-form .scenario-story-loading {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  z-index: 2;
}

.scenario-form .scenario-story-loading[hidden] {
  display: none;
}

.scenario-form .scenario-story-loading .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.scenario-form .scenario-story-token-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  align-content: center;
  min-height: 58px;
  max-height: 58px;
  overflow-y: auto;
  padding: 0;
  background: transparent;
  scrollbar-width: none;
}

.scenario-form .scenario-story-token-bar::-webkit-scrollbar {
  display: none;
}

.scenario-form .scenario-story-token-bar[hidden] {
  display: none;
}

.scenario-form .scenario-story-token-btn {
  min-height: 18px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #9f7aea;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.scenario-form .scenario-story-token-btn:hover {
  color: #b794f4;
}

.scenario-form .scenario-story-token-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white 28%);
  outline-offset: 2px;
}

.scenario-form .scenario-story-ai-btn,
.scenario-form .scenario-story-toggle-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid var(--pill-border);
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scenario-form .scenario-story-ai-btn:hover,
.scenario-form .scenario-story-toggle-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.scenario-form .scenario-story-ai-btn:focus-visible,
.scenario-form .scenario-story-toggle-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white 28%);
  outline-offset: 2px;
}

.scenario-form .scenario-story-ai-icon {
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
}

.scenario-form .scenario-story-ai-icon::before,
.scenario-form .scenario-story-ai-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: linear-gradient(180deg, #8bd8ff 0%, #5da2ff 100%);
  clip-path: polygon(50% 0%, 66% 34%, 100% 50%, 66% 66%, 50% 100%, 34% 66%, 0% 50%, 34% 34%);
}

.scenario-form .scenario-story-ai-icon::before {
  width: 14px;
  height: 14px;
}

.scenario-form .scenario-story-ai-icon::after {
  width: 6px;
  height: 6px;
  right: -7px;
  top: -7px;
  inset: auto;
  opacity: 0.95;
}

[data-theme="light"] .scenario-form .scenario-story-ai-btn:hover,
[data-theme="light"] .scenario-form .scenario-story-toggle-btn:hover {
  background: color-mix(in srgb, #4b8dff 10%, transparent);
  border-color: color-mix(in srgb, #4b8dff 22%, transparent);
}

.scenario-form .scenario-story-toggle-btn .icon {
  width: 16px;
  height: 16px;
  display: block;
}

.scenario-form .scenario-form-label-row {
  justify-content: start;
}

.scenario-form .scenario-story-ai-icon::after {
  display: none;
}

[data-theme="light"] .scenario-form .scenario-story-token-bar {
  background: transparent;
}

[data-theme="light"] .scenario-form .scenario-story-token-btn {
  background: transparent;
  color: #7c3aed;
  box-shadow: none;
}

[data-theme="light"] .scenario-form .scenario-story-token-btn:hover {
  color: #8b5cf6;
}

.scenario-form .scenario-inline-controls select {
  flex: 1 1 52%;
}

.scenario-form .scenario-inline-controls input {
  flex: 1 1 48%;
}

.scenario-label-spacer {
  min-width: 100px;
  flex-shrink: 0;
}

.inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tag-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px;
  justify-content: flex-end;
}

.scenario-form .tag-checkboxes {
  flex: 1;
  width: 100%;
  justify-content: flex-end;
}

.scenario-form .character-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  padding: 0;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.scenario-character-empty {
  margin: 0;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent 20%);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

[data-theme="dark"] .knowledge-character-personality {
  color: #93c5fd;
}

[data-theme="light"] .knowledge-character-personality {
  background: #ffffff;
  border-color: rgba(115, 147, 196, 0.3);
}

.scenario-switches {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.scenario-form .scenario-knowledge-group {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.scenario-knowledge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.scenario-form .scenario-knowledge-group label {
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}

.scenario-circle-toggle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.scenario-circle-toggle:hover {
  border-color: rgba(255, 122, 0, 0.5);
  background: rgba(255, 122, 0, 0.12);
}

.scenario-form .scenario-knowledge-group.is-collapsed .scenario-knowledge-panel {
  display: none;
}

.scenario-knowledge-panel {
  flex: 1 1 auto;
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  min-height: 76px;
}

.scenario-knowledge-item {
  display: grid;
  gap: 2px;
}

.scenario-knowledge-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.scenario-knowledge-item strong {
  font-size: 12px;
  line-height: 1.3;
}

.scenario-knowledge-item span,
.scenario-knowledge-empty {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.scenario-flag-toggle {
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.12s ease;
}

.scenario-flag-toggle.active {
  border-color: rgba(255, 122, 0, 0.8);
  background: rgba(255, 122, 0, 0.16);
  color: #b35400;
  box-shadow: 0 8px 20px rgba(255, 122, 0, 0.22);
}


.tag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: 0.12s ease;
}

.tag-toggle.active {
  border-color: rgba(255, 122, 0, 0.8);
  background: rgba(255, 122, 0, 0.16);
  color: #b35400;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(255, 122, 0, 0.22);
}

.duration-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  min-width: 40px;
  transition: 0.12s ease;
}

#duration-tags {
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

.duration-toggle.active {
  border-color: rgba(255, 122, 0, 0.8);
  background: rgba(255, 122, 0, 0.16);
  color: #b35400;
  box-shadow: 0 8px 20px rgba(255, 122, 0, 0.22);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.scenario-results {
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.error-banner {
  background: rgba(220, 53, 69, 0.16);
  border: 1px solid rgba(220, 53, 69, 0.4);
  color: #f8d7da;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

[data-theme="light"] .error-banner {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.5);
  color: #b02a37;
}

.error-banner.hidden {
  display: none;
}

.scenario-cards {
  display: grid;
  gap: 4px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
}

.scenario-cards::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scenario-cards.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  height: 100%;
}

.video-stage-empty-card {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.scenario-cards.empty .empty-center {
  width: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.center-empty {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 240px;
  text-align: center;
}

/* 로딩 오버레이(.loading-overlay)가 카드 영역을 정확히 덮도록 컨테이너를 기준으로 삼는다.
   (position 규칙이 없으면 absolute 오버레이가 엉뚱한 조상 기준이 되어 일부 대시보드에서
   스피너가 안 보였음 — 브랜드 스튜디오 등) */
.projects {
  position: relative;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(12, 19, 38, 0.65);
  color: var(--text);
  backdrop-filter: blur(2px);
  z-index: 5;
}

.loading-overlay.hidden {
  display: none;
}

.page-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.45);
  backdrop-filter: blur(4px);
  z-index: 2000;
  text-align: center;
}
.page-loading.hidden {
  display: none;
}
.page-loading .loading-box {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.page-loading .spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.main.loading-blur {
  filter: blur(6px);
  pointer-events: none;
}

.blurred-content {
  filter: blur(4px);
}

.voice-block audio[disabled] {
  opacity: 0.4;
}

.voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.voice-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.voice-controls {
  margin-top: 2px;
}

#pipeline-scenes .scene-cell.story {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 170px; /* 공간 확보해 하단 고정 보이스 블록 겹침 방지 */
}

#pipeline-scenes .scene-cell.story .story-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#pipeline-scenes .story-lines {
  margin-bottom: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--layer-soft);
  white-space: pre-wrap;
  line-height: 1.45;
}
#pipeline-scenes .dialogue-speaker {
  color: #3b82f6;
  font-weight: 600;
  font-size: 12px;
}

#pipeline-scenes .scene-cell.story .voice-block {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  margin-top: 0;
}

.voice-block {
  background: linear-gradient(135deg, rgba(28, 38, 68, 0.6), rgba(18, 26, 46, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
}

.voice-block.disabled {
  opacity: 0.78;
  border-style: dashed;
}

.voice-select {
  background: radial-gradient(circle at 20% 20%, rgba(120, 170, 255, 0.15), rgba(27, 38, 66, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  height: 42px;
  min-width: 150px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.7) 50%), linear-gradient(135deg, rgba(255,255,255,0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  scrollbar-width: thin;
}

.voice-select:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(120, 170, 255, 0.35);
  border-color: rgba(120, 170, 255, 0.6);
}

.voice-select option {
  background: #0f172a;
  color: #f5f7ff;
}
.voice-select optgroup {
  background: #0f172a;
  color: #9fb7ff;
}

[data-theme="light"] .voice-select option {
  background: #ffffff;
  color: #0b0f1c;
}
[data-theme="light"] .voice-select optgroup {
  background: #ffffff;
  color: #24324e;
}
 .hidden {
  display: none !important;
}
 .ai-image-panel-left .ai-image-field > label {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
  margin: 10px 0 4px;
}
 .ai-image-panel-left .ai-image-field.source-field > label {
  margin-top: 16px;
}
 .ai-image-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
 .ai-image-header {
  flex: 0 0 auto;
}
 .ai-image-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.2fr) minmax(320px, 0.9fr);
  grid-template-rows: 1fr;
  gap: 10px;
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 0;
  align-items: stretch;
  align-content: stretch;
 }
 .card.ai-image-panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  min-height: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
 .ai-image-panel-left,
 .ai-image-panel-right {
  height: 100%;
  min-height: 0;
}
 /* 좌측 프롬프트/우측 히스토리를 같은 행에 배치 */
 .ai-image-panel-left { grid-column: 1; grid-row: 1; }
 .ai-image-panel-history { grid-column: 3; grid-row: 1; }
 .ai-image-panel-left .scenario-form,
 .ai-image-panel-right .ai-image-preview-layout {
  flex: 1 1 auto;
  min-height: 0;
}
 .card.ai-image-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
 .ai-image-panel-right {
  display: flex;
  flex-direction: column;
}
 .ai-image-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
 .ai-image-panel-left .scenario-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: auto;
}
 .ai-image-workspace {
  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
 .card.ai-image-panel {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 100%;
  min-height: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
 .card.ai-image-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

[data-theme="light"] .voice-block {
  background: linear-gradient(135deg, #f6f8ff, #e9efff);
  border-color: #d8e3ff;
}

[data-theme="light"] .voice-select {
  background: #fff;
  border-color: #c7d6ff;
  color: #1a2336;
}

/* Voice select scrollbar theming (WebKit) */
.voice-select::-webkit-scrollbar {
  width: 8px;
}
.voice-select::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}
.voice-select::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 84%, #5c6f8d 16%));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
[data-theme="light"] .voice-select::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
[data-theme="light"] .voice-select::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 84%, #5c6f8d 16%));
}


.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ff7a00;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.scenario-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px 14px;
  background: var(--panel);
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  /* min-height 제거: 콘텐츠 (장소가 헤더로 이동, 화면/행동/나레이션/대사 4 줄) 에 맞춰 자동 */
  --scene-field-height: 36px;
  --scene-shot-height: 74px;
  --scene-dialogue-height: 36px;
  cursor: pointer;
}

.scenario-card.scenario-card-common {
  flex: 0 0 auto;
  height: 46px;
  min-height: 0;
  min-height: 46px;
  max-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  cursor: default;
}

.scenario-card {
  transition: min-height 0.28s ease, padding 0.28s ease;
}
.scenario-card.is-collapsed {
  box-sizing: border-box;
  min-height: 46px;
  max-height: 46px;
  padding: 0 12px;
  overflow: hidden;
  justify-content: center;
}

.scenario-card.is-collapsed .card-top {
  min-height: 100%;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  align-items: center;
  cursor: pointer;
}

.scenario-card.is-collapsed .card-title-row {
  min-height: 28px;
  align-items: center;
}

.scenario-card.is-collapsed h5,
.scenario-card.is-collapsed .est-input,
.scenario-card.is-collapsed .scenario-card-toggle {
  align-self: center;
}

.scenario-card .card-top {
  flex: 0 0 auto;
  margin-top: -2px;
  margin-bottom: 6px;
}

.scenario-card .scene-visual-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  /* 펼친 상태에서는 콘텐츠 길이만큼 자연스럽게 확장. 접힘 시에만 max-height: 0 으로 닫음. */
  max-height: none;
  overflow: visible;
  opacity: 1;
  transition: max-height 0.24s ease, opacity 0.18s ease, margin-top 0.24s ease;
}

.scenario-card.is-collapsed .scene-visual-grid {
  flex: 0 0 0;
  min-height: 0;
  max-height: 0;
  opacity: 0;
  gap: 0;
  margin-top: 0;
  pointer-events: none;
}

.scenario-card.is-collapsed.active-card {
  box-shadow: none;
}

/* Shot grid (Pass 2 — 콘티 단위 분해) */
.scenario-card .scene-shot-grid {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  color: var(--text);
}
.scenario-card.is-collapsed .scene-shot-grid {
  display: none;
}
.scenario-card .shot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-card .shot-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--layer-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.scenario-card .shot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}
.scenario-card .shot-id {
  color: var(--accent);
  min-width: 36px;
}
.scenario-card .shot-type,
.scenario-card .shot-move {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--layer-strong);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.scenario-card .shot-dur {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.scenario-card .shot-body p {
  margin: 0;
  display: flex;
  gap: 6px;
  color: var(--text);
}
.scenario-card .shot-comp,
.scenario-card .shot-act {
  color: var(--text);
}
.scenario-card .shot-tag {
  flex: 0 0 auto;
  min-width: 32px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}

/* 같은 부모 씬의 cut2~cutN 라벨에서 "Scene N " 부분은 보이지 않게 하되 너비는 유지하여
   첫 컷의 "Scene N cut1" 과 좌측 정렬을 맞춘다. */
.label-scene-spacer {
  visibility: hidden;
}
.label-scene { white-space: pre; }
/* cutN 텍스트는 하늘색으로 강조 (시나리오/프로덕션 공통) */
.label-cut {
  color: #38bdf8;
  font-weight: 600;
}

/* 시나리오 카드 헤더의 카메라 칩 (Scene 1 - 1 옆 [3s] 다음에 [EWS] [static]) */
.scenario-card .card-title-row .card-camera-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--layer-strong);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  align-self: center;
  white-space: nowrap;
}

/* 카메라 용어 안내 모달 */
#camera-vocab-modal .camera-vocab-modal-box {
  width: min(880px, 92vw);
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.vocab-modal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.vocab-modal-title {
  margin: 0;
  font-size: 18px;
  color: var(--text);
  flex: 1 1 auto;
}
.vocab-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex: 0 0 auto;
}
.vocab-modal-close:hover {
  background: var(--layer-strong);
}
.vocab-section { margin-top: 16px; }
.vocab-section-title {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.vocab-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--layer-soft);
  padding: 8px 10px;
}
.vocab-item-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.vocab-code {
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.vocab-ko {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.vocab-en { font-size: 11px; }
.vocab-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* 시나리오 생성 진단 모달 */
#scenario-diag-modal .scenario-diag-modal-box {
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow: auto;
  padding: 20px 22px;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
#scenario-inject-modal .scenario-inject-modal-box {
  width: min(680px, 94vw);
  max-height: 86vh;
  overflow: auto;
  padding: 20px 22px;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.scenario-inject-title {
  margin: 0 0 6px;
  font-size: 16px;
}
.scenario-inject-help {
  margin: 0 0 12px;
  line-height: 1.5;
}
.scenario-inject-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.scenario-inject-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
/* 공통 프롬프트 일괄 편집 모달 */
.cpbm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
}
.cpbm-box {
  width: min(720px, 94vw);
  max-height: 88vh;
  overflow: auto;
  padding: 22px 24px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.cpbm-title {
  margin: 0 0 6px;
  font-size: 17px;
}
.cpbm-help {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #888);
}
.cpbm-textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cpbm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.scenario-diag-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.scenario-diag-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1 auto;
}
.scenario-diag-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex: 0 0 auto;
}
.scenario-diag-close:hover { background: var(--layer-strong); }
.scenario-diag-content {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  background: var(--layer-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
}
.scenario-diag-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* 모든 씬에 공통으로 적용된 배경 (공통 prefix) 배지 — 시나리오 카드들 위 한 줄 */
.scenario-common-prefix-badge {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--layer-soft);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-size: 12px;
}
.scenario-common-prefix-badge .badge-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scenario-common-prefix-badge .badge-value {
  flex: 1 1 auto;
  color: var(--text);
}

/* 헤더의 장소 인풋 — est-input 다음, 카메라 칩 이전. 2배 넓이 + 왼쪽 정렬 */
.scenario-card .card-title-row .location-input {
  flex: 2 1 auto;
  min-width: 240px;
  text-align: left;
  font-size: 12px;
  padding: 4px 10px;
  background: var(--layer-soft);
  border: 1px solid var(--chip-border);
  color: var(--text);
  border-radius: 4px;
}
.scenario-card .card-title-row .location-input::placeholder {
  color: var(--muted);
  text-align: left;
}

/* 프로덕션 페이지 scene-row 헤더의 카메라 셋업 칩 */
.scene-row-chip.chip-shot-type,
.scene-row-chip.chip-camera-move {
  background: var(--layer-strong);
  border: 1px solid var(--chip-border);
  color: var(--text);
}
/* prompt 셀 안의 camera 메타 */
.scene-row .prompt-shot-meta { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.scene-row .prompt-shot-meta .shot-meta-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--layer-strong);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
}
.scene-row .prompt-composition,
.scene-row .prompt-action {
  margin: 2px 0 0;
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.scene-row .prompt-composition .shot-tag,
.scene-row .prompt-action .shot-tag {
  flex: 0 0 auto;
  min-width: 28px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}

/* ── 프로덕션 페이지 (scene-row) shot 섹션 ── */
.scene-row .scene-shot-section {
  margin: 10px 12px 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--layer-soft);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-row.is-collapsed .scene-shot-section { display: none; }
.scene-row .scene-shot-section.is-collapsed .shot-row-list { display: none; }
.scene-row .scene-shot-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
}
.scene-row .scene-shot-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scene-row .scene-shot-section-title {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
}
.scene-row .scene-shot-batch-btn {
  min-width: 140px;
}
.scene-row .shot-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-row .shot-row {
  display: grid;
  grid-template-columns: auto 132px 1fr auto;
  grid-template-areas:
    "head   thumbs  body  actions";
  gap: 8px 12px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--layer-strong);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}
.scene-row .shot-row-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 70px;
}
.scene-row .shot-row .shot-id {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
}
.scene-row .shot-row .shot-type-chip,
.scene-row .shot-row .shot-move-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--layer-soft);
  border: 1px solid var(--chip-border);
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
  align-self: flex-start;
}
.scene-row .shot-row .shot-dur {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.scene-row .shot-thumbs {
  grid-area: thumbs;
  display: flex;
  gap: 6px;
}
.scene-row .shot-thumb {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}
.scene-row .shot-thumb.empty { font-weight: 600; }
.scene-row .shot-thumb.loading,
.scene-row .shot-thumb.error { color: var(--muted); }
.scene-row .shot-thumb.error { color: #ff6b6b; font-weight: 700; font-size: 18px; }
.scene-row .shot-thumb img,
.scene-row .shot-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scene-row .shot-thumb .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.scene-row .shot-row-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.scene-row .shot-row-body p {
  margin: 0;
  display: flex;
  gap: 6px;
  color: var(--text);
}
.scene-row .shot-row .shot-tag {
  flex: 0 0 auto;
  min-width: 28px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.scene-row .shot-row-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}
.scene-row .shot-row-actions .btn-secondary,
.scene-row .shot-row-actions .btn-ghost {
  font-size: 11px;
  padding: 3px 8px;
  min-width: 100px;
}

.scenario-card.scenario-card-common .scene-visual-grid {
  flex: 0 0 auto;
  overflow: visible;
  max-height: none;
  min-height: 100%;
  height: 100%;
  justify-content: center;
}

.scenario-card .field-block {
  min-height: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.scenario-card.scenario-card-common .field-block {
  min-height: 100%;
  align-items: center;
}

.scenario-card .field-label {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: flex-end;
  text-align: right;
  line-height: 1.3;
  white-space: nowrap;
  padding-right: 8px;
}

.scenario-card.scenario-card-common .field-label {
  align-self: center;
}

.scenario-card.scenario-card-common .view-common-style-lines {
  min-height: 36px;
  max-height: 36px;
}

.scenario-card .view-lines,
.scenario-card .view-shot-lines,
.scenario-card .view-dialogue-lines {
  min-height: var(--scene-field-height);
  max-height: var(--scene-field-height);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--layer-soft);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.35;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scenario-card .view-shot-lines {
  min-height: var(--scene-shot-height);
  max-height: var(--scene-shot-height);
}

.scenario-card .view-location-lines,
.scenario-card .view-narration-lines,
.scenario-card .view-dialogue-lines {
  min-height: var(--scene-dialogue-height);
  max-height: var(--scene-dialogue-height);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.scenario-card .view-shot-lines {
  overflow-y: auto;
  overflow-x: hidden;
}

.scenario-card .view-lines[contenteditable="true"],
.scenario-card .view-shot-lines[contenteditable="true"],
.scenario-card .view-dialogue-lines[contenteditable="true"] {
  outline: none;
}

.scenario-card .view-lines[contenteditable="true"]:focus,
.scenario-card .view-shot-lines[contenteditable="true"]:focus,
.scenario-card .view-dialogue-lines[contenteditable="true"]:focus {
  border-color: color-mix(in srgb, #ff9a3d 34%, var(--border) 66%);
  box-shadow: 0 0 0 2px rgba(255, 148, 46, 0.14);
}

.scenario-card .dialogue-block {
  align-items: start;
}

.scenario-card .dialogue-list {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scenario-card .dialogue-row {
  display: grid;
  grid-template-columns: 120px 1fr 32px;
  align-items: center;
  gap: 4px;
}

.scenario-card .dialogue-speaker,
.scenario-card .dialogue-line {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--layer-soft);
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
}

.scenario-card .dialogue-del {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.scenario-card .dialogue-del:hover {
  color: var(--text);
  border-color: rgba(255, 122, 0, 0.6);
}

.scenario-card .dialogue-add {
  grid-column: 2 / 3;
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 9px;
}

.scenario-card .dialogue-add:hover {
  color: var(--text);
  border-color: rgba(255, 122, 0, 0.6);
}

.common-info-row {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  margin-bottom: 0;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="light"] .common-info-row {
  background: rgba(13, 23, 47, 0.05);
}

.common-info-play {
  width: 28px;
  height: 28px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid var(--pill-border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
[data-theme="light"] .common-info-play {
  background: #f0f4ff;
}
.common-info-play:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.common-info-row .tiny {
  line-height: 1.3;
}
.scenario-card .view-lines::-webkit-scrollbar,
.scenario-card .view-shot-lines::-webkit-scrollbar,
.scenario-card .view-dialogue-lines::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scenario-card .scene-visual-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scenario-card .muted {
  flex: 0 0 auto;
}

.scenario-card .actions {
  flex: 0 0 auto;
}

.scenario-card.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scenario-card.placeholder .card-top,
.scenario-card.placeholder .actions {
  display: none;
}

.scenario-card.active-card {
  border-color: #ff7a00;
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.25);
}

.chip-input {
  border: 1px solid var(--chip-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 16px;
  width: 64px;
  text-align: center;
  font-size: 12px;
}

.chip-input:focus {
  outline: 1px solid rgba(255, 122, 0, 0.4);
  color: var(--text);
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.edit-form label {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.edit-form input,
.edit-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.edit-form .actions {
  justify-content: flex-start;
  padding-top: 4px;
  margin-top: 4px;
}

.scenario-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.scenario-card .card-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scenario-card h5 {
  margin: 0;
}

.scenario-card p {
  margin: 4px 0;
}

.scenario-card .est-input {
  width: 52px;
  padding: 4px 6px;
}

.scenario-card .scenario-card-toggle {
  flex: 0 0 auto;
  font-weight: 700;
}

.scenario-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.channel-left h4 {
  margin: 0 0 6px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-filter {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: #dfe7ff;
  font-size: 13px;
  cursor: pointer;
  transition: 0.12s ease;
}

.chip-filter.active {
  border-color: rgba(255, 122, 0, 0.8);
  background: rgba(255, 122, 0, 0.16);
  color: #ffb86a;
  box-shadow: 0 8px 22px rgba(255, 122, 0, 0.25);
}

[data-theme="light"] .chip-filter {
  background: rgba(13, 23, 47, 0.05);
  border-color: #cbd6ea;
  color: #0d172f;
}

[data-theme="light"] .chip-filter.active {
  background: rgba(255, 122, 0, 0.18);
  border-color: rgba(255, 122, 0, 0.8);
  color: #b35400;
  box-shadow: 0 10px 26px rgba(255, 122, 0, 0.18);
}

[data-theme="light"] .top-actions .btn-ghost {
  border-color: #cbd6ea;
  color: #0d172f;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

[data-theme="light"] .card {
  border-color: #d7e1f3;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.card.hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.card.hero h2,
.card.hero h3 {
  margin: 4px 0;
}

.card.hero.accent-orange {
  background: linear-gradient(145deg, rgba(255, 122, 0, 0.18), rgba(255, 122, 0, 0.05)), var(--card);
  border-color: rgba(255, 122, 0, 0.35);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.project {
  padding-top: 16px;
}

.card-accent {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: var(--border);
}

.card-accent.orange {
  background: linear-gradient(90deg, #ff7a00, #ffaf45);
}

.card-accent.teal {
  background: linear-gradient(90deg, #0bbfa5, #60ffd8);
}

.card-accent.blue {
  background: linear-gradient(90deg, #5c7cff, #9bb3ff);
}

.project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.chip {
  background: var(--layer-strong);
  border: 1px solid var(--chip-border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

[data-theme="light"] .chip {
  background: rgba(13, 23, 47, 0.06);
  color: #0d172f;
}

.chip.pale {
  color: #0b7f6c;
  border-color: rgba(11, 191, 165, 0.3);
}

[data-theme="dark"] .chip.pale {
  color: #a4fff2;
}

.chip.warn {
  color: #b85700;
  border-color: rgba(255, 122, 0, 0.4);
}

[data-theme="dark"] .chip.warn {
  color: #ffd89a;
}

.chip.alert {
  color: #c13b26;
  border-color: rgba(255, 96, 73, 0.5);
  background: rgba(255, 96, 73, 0.08);
}

[data-theme="dark"] .chip.alert {
  color: #ffb3a5;
}

.chip.neutral {
  color: var(--muted);
  border-color: var(--chip-border);
}

.progress {
  height: 10px;
  background: var(--progress-bg);
  border-radius: 999px;
  margin: 12px 0 8px;
  overflow: hidden;
}

.progress.thin {
  height: 6px;
}

.fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #ff7a00, #ffaf45);
  border-radius: inherit;
}

.fill.teal {
  background: linear-gradient(90deg, #0bbfa5, #73ffd7);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text);
}

.pipeline-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
}

.pipeline-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.pipeline-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  text-align: right;
}

.pipeline-meta-line .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.pipeline-meta-line .meta-label {
  color: var(--muted);
  font-size: 13px;
}

.pipeline-meta-line .meta-sep {
  color: var(--muted);
  margin: 0 2px;
}

.pipeline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.pipeline-actions.video-model-bar {
  justify-content: space-between;
  align-items: center;
}
.pipeline-fold-center {
  display: flex;
  gap: 4px;
  align-items: center;
}

.side-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: 100%;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}

[data-theme="light"] .panel {
  border-color: #d7e1f3;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.activity {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity li {
  background: var(--layer-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--layer-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.queue-row.active-step {
  border-color: rgba(255, 122, 0, 0.6);
  box-shadow: 0 10px 24px rgba(255, 122, 0, 0.18);
  background: linear-gradient(90deg, rgba(255, 122, 0, 0.15), transparent);
}

.proj-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.2fr 1.2fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--layer-strong);
  font-size: 14px;
}

.proj-row.head {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
}

.rules {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text);
}

.rules li {
  background: var(--layer-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}

.flow-hint {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.btn-secondary.full {
  width: 100%;
  text-align: center;
}

.pill {
  background: var(--layer-strong);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 12px;
  border: 1px solid var(--pill-border);
}

.pill.warn {
  border-color: rgba(255, 122, 0, 0.45);
  color: #b85700;
}

[data-theme="dark"] .pill.warn {
  color: #ffcba3;
}

.pill.neutral {
  border-color: rgba(11, 191, 165, 0.4);
  color: #0b7f6c;
}

[data-theme="dark"] .pill.neutral {
  color: #a4fff2;
}

.storage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-grid button,
.project button,
.queue button {
  align-self: flex-start;
}

/* Responsive */
@media (max-width: 1280px) {
  .app {
    grid-template-columns: 90px 1fr;
  }

  .sidebar {
    padding: 20px 12px;
  }

  .nav-item {
    padding: 10px 8px;
    font-size: 14px;
  }

  .nav-item:not(.active) {
    color: #c7d3f0;
  }

  .brand-text {
    display: none;
  }
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-grid .card:nth-child(1) {
    grid-column: span 2;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .side-panels {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .side-panels .panel {
    flex: 1 1 260px;
  }

  .scenario-grid {
    grid-template-columns: 1fr;
  }

  .section-caption.left-caption,
  .section-caption.right-caption,
  .results-card,
  .scenario-form {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 780px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .nav-item {
    flex: 1 1 40%;
    justify-content: center;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .scenario-grid {
    grid-template-columns: 1fr;
  }
}

.nav-sub.hidden {
  display: none;
}



/* Scene pipeline table override (restored) */
.scene-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.scene-row {
  display: table-row;
  background: var(--panel);
}

.scene-row.head {
  background: transparent;
}

.scene-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}

.scene-row.head .scene-cell {
  font-weight: 700;
  color: var(--text);
  text-align: left;
}

.scene-cell p {
  margin: 0;
}

.prompt-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt-common {
  color: #2f56b5;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
}

.image-placeholder.tall {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}

.image-placeholder.tall {
  font-size: 0;
}

.image-placeholder.tall::before {
  content: "+";
  font-size: 24px;
  font-weight: 700;
  color: var(--muted);
  position: absolute;
}

.image-placeholder.no-plus::before {
  display: none;
}

.image-placeholder.no-plus {
  font-size: 12px;
  color: var(--muted);
}

.image-placeholder.loading {
  font-size: 12px;
  color: var(--muted);
  flex-direction: column;
  gap: 10px;
}

.image-placeholder.loading::before {
  display: none;
}

.image-placeholder.error-state {
  font-size: 12px;
  color: #ff7a7a;
}

.view-title[contenteditable="true"],
.view-lines[contenteditable="true"],
.view-shot[contenteditable="true"] {
  outline: 1px solid var(--border);
  border-radius: 4px;
}

.image-placeholder.error-state::before {
  display: none;
}

.scene-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.error-text {
  color: #ff7a7a;
  margin: 6px 0 0;
  font-size: 12px;
}

.image-placeholder.loading span {
  font-size: 12px;
  color: var(--muted);
}

.scene-media-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.image-slot,
.video-slot {
  width: 100%;
  min-height: 160px;
}

.video-box {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--layer-strong);
  aspect-ratio: 16 / 9;
}

.scene-video {
  display: block;
  width: 100%;
  height: auto;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
}

.video-placeholder.loading {
  color: var(--muted);
  flex-direction: column;
  gap: 10px;
}

.video-placeholder.error-state {
  color: #ff7a7a;
  border-color: rgba(255, 122, 0, 0.5);
}

.img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.img-modal.hidden {
  display: none;
}

.img-modal img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.img-modal video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.img-modal__inner.common-modal-box {
  background: var(--card);
  color: var(--text);
  padding: 18px 20px;
  border-radius: 14px;
  max-width: 720px;
  width: 90vw;
  max-height: 80vh;
  overflow: auto;
  box-shadow: var(--shadow);
  position: relative;
}

.img-modal-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-block;
  box-shadow: none;
}
.img-modal-trigger:focus {
  outline: none;
  box-shadow: none;
}
.img-modal-trigger img {
  display: block;
}

.card.ai-image-panel.ai-image-panel-preview {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ai-image-panel-preview .ai-image-preview-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.ai-image-preview-stage {
  display: grid;
  grid-template-rows: 75% 25%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.ai-image-preview-stage .img-modal-trigger {
  grid-row: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.ai-image-preview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* 미리보기 카드 내에서는 현재 높이의 80%로 축소(세로 기준) */
.ai-image-panel-preview .ai-image-preview-image {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

:root {
  --ai-preview-lh: 1.4;
  --ai-preview-meta-lines: 4;
  --ai-preview-meta-h: calc(var(--ai-preview-meta-lines) * var(--ai-preview-lh) * 1em + 8px);
  --ai-preview-actions-h: 56px;
}
.ai-image-preview-meta {
  line-height: var(--ai-preview-lh);
  padding: 6px 0 0 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: hidden;
}
.ai-image-preview-meta p {
  margin: 0;
}
.ai-image-preview-meta p:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-image-preview-meta p:last-child {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-image-inline-actions {
  height: var(--ai-preview-actions-h);
  display: flex;
  align-items: center;
}

/* 레이아웃 위치 및 높이 비율 고정 */
.ai-image-panel-preview { grid-column: 2; grid-row: 1; min-height: 0; }
.ai-image-panel-meta { grid-column: 2; grid-row: 2; min-height: 0; display:none; }

.ai-image-preview-foot {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 12px;
  align-items: start;
}
.ai-image-preview-foot .ai-image-inline-actions {
  grid-column: 1;
  display: block;
  height: auto;
}
.ai-image-preview-foot .ai-image-inline-actions-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 44px;
  gap: 10px;
}
.ai-image-preview-foot .ai-image-inline-actions .btn-primary,
.ai-image-preview-foot .ai-image-inline-actions .btn-secondary {
  width: 100%;
  justify-content: center;
}
.ai-image-preview-foot .ai-image-brand-actions {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.ai-image-preview-foot .ai-image-preview-meta {
  grid-column: 2;
  max-height: none;
}
.ai-image-panel.ai-image-panel-meta {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: 12px;
  align-items: start;
}
.ai-image-panel.ai-image-panel-meta .ai-image-inline-actions {
  grid-column: 1;
  display: block;
  height: auto;
  align-content: start;
}
.ai-image-panel.ai-image-panel-meta .ai-image-inline-actions-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 44px;
  gap: 10px;
}
.ai-image-panel.ai-image-panel-meta .ai-image-inline-actions .btn-primary,
.ai-image-panel.ai-image-panel-meta .ai-image-inline-actions .btn-secondary {
  width: 100%;
  justify-content: center;
}
.ai-image-panel.ai-image-panel-meta .ai-image-brand-actions {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.ai-image-panel.ai-image-panel-meta .ai-image-preview-meta {
  grid-column: 2;
  max-height: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 우선순위 충돌 방지를 위한 워크스페이스 규칙 재정의(파일 후반 배치) */
.ai-image-workspace {
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.2fr) minmax(320px, 0.9fr);
  grid-template-rows: 7fr 3fr;
}

.ai-image-size-field .ai-image-size-label {
  display: block;
  text-align: center;
}
.ai-image-size-field .ai-image-size-row {
  display: flex;
  justify-content: center;
}

/* 버튼형 컨트롤은 호버/포커스 시 위로 뜨는 모션을 전면 차단 */
:is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .theme-toggle,
  .screen-toggle,
  .lang-toggle,
  .icon-btn,
  .scenario-story-token-btn,
  .scenario-story-ai-btn,
  .scenario-circle-toggle,
  .favorite-form-toggle,
  .subscription-toggle,
  .theme-preset-toggle,
  .theme-preset-btn,
  .edit-btn,
  .inline-trash,
  .trash-btn,
  .action-trash,
  .favorite-delete-btn,
  .favorite-link-btn,
  .knowledge-character-remove,
  .character-sheet-overlay-btn,
  .source-remove-fab,
  .ai-image-history-delete
):is(:hover, :focus, :focus-visible) {
  transform: none !important;
}

.common-modal-box .close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.common-modal-box pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

/* Common Prompt Detail (cpd) */
.cpd-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.01em;
}
.cpd-section {
  margin-bottom: 18px;
}
.cpd-section:last-child {
  margin-bottom: 0;
}
.cpd-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cpd-section-marker {
  color: var(--accent);
  font-size: 8px;
  line-height: 1;
  opacity: 0.8;
}
.cpd-header-block {
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}
.cpd-header-block p {
  margin: 0 0 6px 0;
}
.cpd-header-block p:last-child {
  margin-bottom: 0;
}
.cpd-empty {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}
.cpd-fields {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cpd-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13.5px;
}
.cpd-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 1px;
  white-space: nowrap;
}
.cpd-value {
  color: var(--text);
  line-height: 1.55;
  word-break: break-word;
}
.cpd-list {
  margin: 0;
  padding-left: 16px;
  color: var(--text);
  line-height: 1.65;
}
.cpd-list li {
  margin-bottom: 2px;
}
.cpd-list li:last-child {
  margin-bottom: 0;
}

.action-buttons.vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.action-buttons.vertical .btn-secondary {
  width: 160px;
  text-align: center;
  white-space: nowrap;
}

/* Scene table sticky header */
#pipeline-scenes {
  position: relative;
}

.scene-table {
  display: block;
  width: 100%;
}

.scene-row.head {
  display: grid !important;
  grid-template-columns: 1.2fr 2fr 0.9fr 0.7fr;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.scene-cell {
  border: 1px solid var(--border);
  padding: 10px;
}

.scene-cell {
  position: relative;
}
.scene-cell.active-cell {
  border: 1px solid #ff7a00 !important;
  box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.25);
}

.cell-actions.br {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

/* ── Scene row collapse / expand ── */
.scene-row:not(.head) {
  display: flex !important;
  flex-direction: column;
}
.scene-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  min-height: 40px;
}
.scene-row-toggle {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.scene-row-toggle:hover {
  border-color: rgba(255, 122, 0, 0.5);
  background: rgba(255, 122, 0, 0.12);
}
.scene-row-title {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.scene-row-preview {
  flex: 1;
  min-width: 0;
  color: var(--text-muted, #888);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scene-row-chips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.scene-row-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.scene-row-chip.chip-image { background: rgba(59,130,246,0.15); color: #3b82f6; }
.scene-row-chip.chip-video { background: rgba(16,185,129,0.15); color: #10b981; }
.scene-row-chip.chip-loading { background: rgba(255,122,0,0.15); color: #ff7a00; }

.scene-row-body-wrap {
  overflow: hidden;
}
.scene-row.is-collapsed .scene-row-body-wrap {
  height: 0;
  overflow: hidden;
}
.scene-row-body {
  display: grid;
  grid-template-columns: 1.2fr 2fr 0.9fr 0.7fr;
  min-height: 0;
}
.scene-row.is-collapsed {
  border-bottom: 1px solid var(--border);
}
.scene-row.active-row {
  position: relative;
  z-index: 1;
}
.scene-row.active-row::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #ff7a00;
  pointer-events: none;
  z-index: 100;
}
.scene-row.is-collapsed .scene-row-header {
  border-bottom: none;
  cursor: pointer;
}

/* head row stays as grid, no header */
.scene-row.head {
  display: grid !important;
  flex-direction: unset;
  grid-template-columns: 1.2fr 2fr 0.9fr 0.7fr;
}

.prompt-text[contenteditable="true"] {
  outline: 1px solid var(--border);
  border-radius: 4px;
}

.story-lines[contenteditable="true"] {
  outline: 1px solid var(--border);
  border-radius: 4px;
}

/* @ 멘션 자동완성 드롭다운 (브랜드 허브 자산 선택) */
.mention-pop {
  position: absolute;
  z-index: 10050;
  min-width: 168px;
  max-width: 280px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 4px;
  display: none;
  scrollbar-width: none;
}
.mention-pop::-webkit-scrollbar { width: 0; height: 0; }
.mention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}
.mention-item.is-active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.mention-token { font-weight: 600; white-space: nowrap; }
.mention-kind {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* 더빙 대본 인라인 편집: 클릭 가능함을 알리는 어포던스 */
#pipeline-scenes .story-lines.is-editable {
  cursor: text;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#pipeline-scenes .story-lines.is-editable:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%);
}
#pipeline-scenes .story-lines.is-editable:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent 65%);
}

.prompt-common[contenteditable="true"],
.prompt-aspect[contenteditable="true"],
.prompt-visual[contenteditable="true"],
.prompt-duration[contenteditable="true"] {
  outline: 1px solid var(--border);
  border-radius: 4px;
}

/* 프롬프트 인라인 편집 어포던스 (레이아웃 시프트 없이 hover/focus 만 표시) */
#pipeline-scenes .scene-cell.prompt p[data-prompt-edit] {
  cursor: text;
  border-radius: 4px;
  transition: background 0.12s, box-shadow 0.12s;
}
#pipeline-scenes .scene-cell.prompt p[data-prompt-edit]:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
#pipeline-scenes .scene-cell.prompt p[data-prompt-edit]:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent 70%);
}

.favorite-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 42px;
}

.user-lock-message {
  margin: 8px 0 0;
  text-align: center;
}

.user-dashboard-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 2px;
}

.user-widget {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent 12%);
  padding: 12px;
}

.user-widget.subscription-widget {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

html.page-shell-image #sidebar-project-card {
  display: none !important;
}

.user-widget.theme-preset-widget {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.user-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.user-widget-head h4 {
  margin: 0;
  font-size: 14px;
}

#subscription-widget .user-widget-head h4,
#favorite-form .user-widget-head h4 {
  color: #3f8dd6;
  font-weight: 400;
}

#theme-preset-widget .user-widget-head h4 {
  color: #3f8dd6;
  font-weight: 400;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.subscription-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.subscription-item {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.subscription-item strong {
  font-size: 16px;
  line-height: 1.3;
}

.user-widget-help {
  margin: 10px 0 12px;
  font-size: 12px;
}

#subscription-manage-btn {
  margin-top: 2px;
}

.profile-ui-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  margin-bottom: 8px;
}

.profile-ui-row label {
  font-size: 13px;
  color: var(--muted);
}

.profile-ui-row input,
.profile-ui-row select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
}

.profile-ui-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.favorite-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-2) 90%, transparent 10%);
}

.user-widget.favorite-widget.favorite-form {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.favorite-form-toggle,
.subscription-toggle,
.theme-preset-toggle {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent 14%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.favorite-form-toggle:hover,
.subscription-toggle:hover,
.theme-preset-toggle:hover {
  background: color-mix(in srgb, var(--panel) 72%, transparent 28%);
}

.favorite-form-toggle::after,
.subscription-toggle::after,
.theme-preset-toggle::after {
  content: "▾";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  background: color-mix(in srgb, var(--layer-strong) 84%, transparent 16%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.favorite-form.is-collapsed .favorite-form-toggle::after,
.subscription-widget.is-collapsed .subscription-toggle::after,
.theme-preset-widget.is-collapsed .theme-preset-toggle::after {
  transform: rotate(-90deg);
}

.subscription-body,
.favorite-form-body,
.theme-preset-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: max-height 0.28s ease, opacity 0.2s ease, transform 0.2s ease, margin-top 0.2s ease, visibility 0s linear 0s;
}

.subscription-widget.is-collapsed .subscription-body,
.favorite-form.is-collapsed .favorite-form-body,
.theme-preset-widget.is-collapsed .theme-preset-body {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: max-height 0.24s ease, opacity 0.16s ease, transform 0.16s ease, margin-top 0.16s ease, visibility 0s linear 0.24s;
}

.subscription-widget.is-collapsed .user-widget-head,
.favorite-form.is-collapsed .user-widget-head,
.theme-preset-widget.is-collapsed .user-widget-head {
  margin-bottom: 0;
}

.fav-form-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.fav-form-row label {
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}

.fav-form-row input,
.fav-form-row textarea,
.fav-form-row select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
}

.fav-form-row input[type="file"] {
  padding: 6px 8px;
  cursor: pointer;
}

.fav-form-row input[type="file"]::file-selector-button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-right: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent 12%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.fav-form-row input[type="file"]::-webkit-file-upload-button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-right: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent 12%);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.fav-form-row textarea {
  min-height: 42px;
  resize: vertical;
}

.favorite-form-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.theme-preset-body {
  gap: 10px;
}

.theme-preset-group {
  display: grid;
  gap: 8px;
}

.theme-preset-label {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.theme-preset-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.theme-preset-btn {
  --theme-swatch-a: #1f2a44;
  --theme-swatch-b: #0f172a;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  background: linear-gradient(135deg, var(--theme-swatch-a) 0%, var(--theme-swatch-b) 100%);
  cursor: pointer;
  position: relative;
}

.theme-preset-btn:hover {
  filter: brightness(1.06);
}

.theme-preset-btn.is-selected {
  border-color: var(--border);
  box-shadow: none;
}

.theme-preset-btn.is-selected::after {
  content: "V";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #2f7dff;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(27, 67, 153, 0.38);
}

.theme-preset-help {
  margin: 2px 0 0;
  font-size: 11px;
  color: color-mix(in srgb, var(--muted) 88%, transparent 12%);
  line-height: 1.4;
}

.favorite-list {
  --favorite-icon-size: clamp(36px, 3.8vh, 42px);
  --favorite-cell-size: clamp(48px, 4.8vh, 56px);
  --favorite-col-gap: 10px;
  --favorite-visible-category-count: 4;
  margin-top: 0;
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--favorite-visible-category-count), minmax(0, 1fr));
  row-gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-right: 2px;
}

.favorite-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 10px;
}

.favorite-page-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.favorite-page-dot {
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent 18%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 60%, transparent 40%);
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.favorite-page-dot:hover {
  transform: scale(1.06);
  border-color: color-mix(in srgb, #7fc8ff 56%, var(--border) 44%);
}

.favorite-page-dot.is-active {
  border-color: color-mix(in srgb, #7fc8ff 72%, transparent 28%);
  background: #7fc8ff;
  transform: scale(1.08);
}

.favorite-transfer-box {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent 22%);
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, #ffffff 14%, transparent 86%) 0, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, transparent 6%) 0%, color-mix(in srgb, var(--bg-2) 90%, transparent 10%) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent 86%),
    inset 0 0 0 1px color-mix(in srgb, var(--layer-strong) 28%, transparent 72%);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.favorite-transfer-box::before {
  content: "";
  position: absolute;
}

.favorite-transfer-box::before {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent 70%);
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent 90%) 0%, transparent 100%),
    color-mix(in srgb, var(--panel) 96%, transparent 4%);
  box-shadow:
    4px -4px 0 -1px color-mix(in srgb, var(--panel) 92%, transparent 8%),
    4px -4px 0 0 color-mix(in srgb, var(--text) 22%, transparent 78%);
}

.favorite-transfer-box.is-drop-target {
  border-color: color-mix(in srgb, #7fc8ff 72%, transparent 28%);
  background:
    radial-gradient(circle at 30% 28%, color-mix(in srgb, #ffffff 20%, transparent 80%) 0, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, #7fc8ff 20%, var(--panel) 80%) 0%, color-mix(in srgb, #7fc8ff 12%, var(--bg-2) 88%) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent 82%),
    inset 0 0 0 1px color-mix(in srgb, #7fc8ff 22%, transparent 78%);
  transform: scale(1.06);
}

.favorite-card .favorite-list.empty {
  min-height: 100%;
}

.favorite-card .favorite-list.empty::before {
  content: "즐겨찾기 아이콘을 등록해주세요.";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  color: #7fc8ff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  z-index: 2;
}

.favorite-category {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 0;
  min-height: 0;
}

.favorite-category-head {
  --favorite-category-tone: color-mix(in srgb, var(--muted) 40%, transparent 60%);
  --favorite-category-line-tone: color-mix(in srgb, var(--muted) 16%, transparent 84%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.favorite-category-line {
  flex: 1 1 auto;
  min-width: 0;
  border-top: 1px solid var(--favorite-category-line-tone);
}

.favorite-category-name-btn {
  border: none;
  background: transparent;
  color: var(--favorite-category-tone);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}

.favorite-category-name-btn:hover {
  color: color-mix(in srgb, var(--muted) 72%, #7fc8ff 28%);
}

.favorite-category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--favorite-col-gap);
  row-gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding-block: clamp(12px, 1.8vh, 18px);
  justify-content: center;
  align-content: center;
}

.favorite-item {
  position: relative;
  margin: 0;
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  cursor: grab;
}

.favorite-item.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.favorite-item.is-drop-target .favorite-icon-wrap {
  outline: 1px dashed color-mix(in srgb, #7fc8ff 70%, transparent 30%);
  outline-offset: 2px;
}

.favorite-item.is-empty-slot {
  cursor: default;
}

.favorite-empty-slot {
  width: var(--favorite-icon-size);
  height: var(--favorite-icon-size);
  min-width: var(--favorite-icon-size);
  min-height: var(--favorite-icon-size);
  max-width: var(--favorite-icon-size);
  max-height: var(--favorite-icon-size);
  margin: 0 auto;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--border) 72%, transparent 28%);
  background: color-mix(in srgb, var(--panel) 32%, transparent 68%);
}

.favorite-item.is-empty-slot.is-drop-target .favorite-empty-slot {
  border-color: color-mix(in srgb, #7fc8ff 74%, transparent 26%);
  background: color-mix(in srgb, #7fc8ff 16%, transparent 84%);
}

.favorite-delete-btn {
  position: absolute;
  top: -3px;
  left: calc(50% + (var(--favorite-icon-size) / 2) - 10px);
  right: auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 85%, transparent 15%);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.favorite-item:hover .favorite-delete-btn {
  opacity: 1;
  pointer-events: auto;
}

.favorite-delete-btn:hover {
  background: color-mix(in srgb, var(--panel) 65%, transparent 35%);
}

.favorite-link-btn {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.favorite-link-btn:hover {
  background: transparent;
}

.favorite-icon-wrap {
  width: var(--favorite-icon-size);
  height: var(--favorite-icon-size);
  min-width: var(--favorite-icon-size);
  min-height: var(--favorite-icon-size);
  max-width: var(--favorite-icon-size);
  max-height: var(--favorite-icon-size);
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  background: transparent;
}

.favorite-icon-wrap img {
  width: var(--favorite-icon-size);
  height: var(--favorite-icon-size);
  min-width: var(--favorite-icon-size);
  min-height: var(--favorite-icon-size);
  max-width: var(--favorite-icon-size);
  max-height: var(--favorite-icon-size);
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.favorite-item-title {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

@media (max-width: 1280px) {
  .option-card-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}

@media (max-width: 900px) {
  .option-card-grid {
    grid-template-columns: minmax(300px, 1fr);
  }

  .option-card {
    min-height: 0;
  }

  .subscription-grid {
    grid-template-columns: 1fr;
  }
}

.option-card .form-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 10px;
  align-items: center;
  width: 300px;
  margin: 0 auto 10px;
}

.option-card .form-row label {
  font-weight: 700;
  text-align: left;
}

.option-card .form-row input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.favorite-file-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.favorite-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.favorite-file-trigger {
  flex: 0 0 auto;
  min-width: 108px;
  padding: 8px 14px;
}

.favorite-file-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.option-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.option-card label {
  font-weight: 600;
}

.option-card input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

.option-actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.option-actions .btn-primary,
.option-actions .btn-secondary {
  width: 160px;
}

/* 로그인 카드: 로그인 버튼 + 구글 아이콘 버튼을 한 행에 두고,
   전체 폭을 입력칸(.form-row, 300px)과 동일하게 맞춰 오른쪽 끝을 넘지 않게 한다. */
#login-card .option-actions {
  width: 300px;
  box-sizing: border-box;
  padding-left: 70px; /* .form-row 의 라벨(60px) + 간격(10px) = 입력칸 시작점에 맞춤 */
  margin: 6px auto 0;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
}

#login-card .option-actions .btn-primary {
  width: auto;
  flex: 1 1 auto; /* 남는 폭을 채움 — 로그인/로그아웃 텍스트가 바뀌어도 폭은 행 기준으로 고정 */
  min-width: 0;
}

#login-card .option-actions .btn-google {
  flex: 0 0 auto;
  width: 46px;       /* 아이콘 전용 고정 폭 */
  align-self: stretch; /* 로그인 버튼과 같은 높이 */
}

/* 로그인 후: 구글 버튼이 숨겨지므로 들여쓰기를 풀고 로그아웃 버튼을 가운데 정렬. */
#login-card .option-actions.is-authed {
  padding-left: 0;
}

#login-card .option-actions.is-authed .btn-primary {
  flex: 0 0 auto;
  width: 160px;
}

#project-overlay .option-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

#project-overlay .option-actions .btn-primary,
#project-overlay .option-actions .btn-secondary {
  width: 120px;
}

/* 프로젝트 생성 오버레이 스타일 확장 */
#project-overlay .auth-card {
  padding: 40px 40px 34px;
  min-width: 320px;
  width: min(800px, 80vw);
  max-width: 800px;
  min-height: 470px;
}

#project-overlay .auth-title {
  font-size: 22px;
  margin: 0;
  padding-bottom: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

#project-overlay .form-row {
  width: 100%;
  justify-content: center;
}

#project-overlay .form-row label {
  flex: 0 0 70px;
  font-size: 15px;
}

#project-overlay .form-row input {
  width: 260px;
  max-width: 260px;
  font-size: 16px;
  padding: 14px 14px;
  border-radius: 12px;
}

#project-overlay .form-row select {
  width: 260px;
  max-width: 260px;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
}

#project-overlay .project-create-input-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--border);
}

#project-overlay .project-create-input-line .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
}

#project-overlay .project-create-input-line .form-row label {
  flex: none;
  width: auto;
  font-size: 13px;
  color: var(--muted);
}

#project-overlay .project-create-input-line .form-row input,
#project-overlay .project-create-input-line .form-row select {
  width: 100%;
  max-width: none;
}

#project-overlay .project-create-profile-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 18px;
}

#project-overlay .project-create-profile-line .form-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
}

#project-overlay .form-row.is-disabled {
  opacity: 0.32;
}

#project-overlay .form-row.is-disabled label {
  color: color-mix(in srgb, var(--muted) 80%, transparent 20%);
}

#project-overlay .form-row.is-disabled input,
#project-overlay .form-row.is-disabled select,
#project-overlay .form-row.is-disabled textarea {
  opacity: 0.5;
}

#project-overlay .form-row input:disabled,
#project-overlay .form-row select:disabled,
#project-overlay .form-row textarea:disabled,
#project-overlay .project-create-mode .mode-btn-item:disabled {
  cursor: not-allowed;
}

#project-overlay .project-create-mode .mode-btn-item:disabled {
  opacity: 0.42;
}

#project-overlay .project-create-profile-line .project-create-brand-summary-row {
  grid-column: 2 / span 1;
}

#project-overlay .project-create-profile-line .project-create-core-message-row {
  grid-column: 1 / span 2;
}

#project-overlay .project-create-profile-line .form-row label {
  flex: none;
  width: auto;
  font-size: 13px;
  color: var(--muted);
}

#project-overlay .project-create-profile-line input,
#project-overlay .project-create-profile-line select,
#project-overlay .project-create-profile-line textarea {
  width: 100%;
  max-width: none;
}

#project-overlay .project-create-profile-line textarea {
  min-height: 92px;
  resize: vertical;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#project-overlay .project-create-profile-line textarea::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

#project-overlay .project-create-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 18px;
}

#project-overlay .project-create-mode .mode-btn-item {
  width: 100%;
  height: 40px;
  font-size: 13px;
  font-weight: 700;
}

#project-overlay .project-create-mode .mode-btn-item.active {
  background: linear-gradient(135deg, rgba(255, 122, 0, 0.9), rgba(255, 159, 58, 0.9));
  border-color: rgba(255, 122, 0, 0.6);
  color: #0b0f1c;
}

#project-overlay .project-create-hint {
  margin: 8px 0 10px;
  font-size: 13px;
  color: var(--muted);
}

#project-overlay .option-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}

#project-overlay .option-actions .btn-primary,
#project-overlay .option-actions .btn-secondary {
  width: 132px;
}

@media (max-width: 780px) {
  #project-overlay .auth-card {
    width: min(96vw, 620px);
    min-height: 0;
    padding: 28px 24px;
  }
  #project-overlay .project-create-input-line {
    grid-template-columns: 1fr;
  }
  #project-overlay .project-create-profile-line {
    grid-template-columns: 1fr;
  }
  #project-overlay .project-create-profile-line .project-create-brand-summary-row,
  #project-overlay .project-create-profile-line .project-create-core-message-row {
    grid-column: auto;
  }
}

.app.blur-target {
  transition: filter 0.2s ease;
}

.main.blur-active,
.sidebar.blur-active {
  filter: blur(5px);
}

#dashboard-drafts.blur-active {
  filter: blur(5px);
}

.main.loading-blur,
.sidebar.loading-blur {
  filter: blur(7px);
  pointer-events: none;
}

#project-overlay .auth-card {
  position: relative;
}

#project-overlay .project-create-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 12px;
  background: rgba(8, 12, 22, 0.58);
  backdrop-filter: blur(2px);
  z-index: 2;
}

#project-overlay .project-create-loading .spinner {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

#project-overlay .project-create-loading p {
  margin: 0;
  color: #f5f7fd;
  font-size: 13px;
  font-weight: 600;
}

#project-overlay.is-creating .project-create-loading {
  display: flex;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.auth-overlay.hidden {
  display: none;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
  min-width: 260px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.auth-title {
  margin: 0 0 16px;
  font-weight: 700;
}

.blur-target.blurred {
  filter: blur(6px);
  pointer-events: none;
}

.no-underline {
  text-decoration: none;
}

.action-buttons.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.action-buttons.grid .btn-secondary.compact {
  padding: 6px 8px;
  font-size: 12px;
  width: 100%;
  text-align: center;
}

.action-buttons.grid .btn-secondary.compact.span2 {
  grid-column: 1 / 3;
}

.action-buttons.grid.video-actions {
  margin-top: 63px; /* 요청: 3px 추가 하단 이동 */
}

.cut-ref-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  padding: 5px 4px;
  white-space: nowrap;
}

.cut-ref-check-label input[type="checkbox"] {
  accent-color: var(--accent, #f90);
  cursor: pointer;
  flex-shrink: 0;
}

.cut-ref-select {
  width: 100%;
  font-size: 12px;
  padding: 5px 4px;
  background: var(--input-bg, #1a1a2e);
  color: var(--text-primary, #eee);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  cursor: pointer;
}

.cut-ref-select:disabled {
  opacity: 0.4;
  cursor: default;
}


/* Scene Media Constraints */
.scene-media-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.image-box,
.video-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--layer-strong);
  border-radius: 8px;
  overflow: hidden;
  /* Ensure container doesn't force full width on children if they are tall */
  aspect-ratio: 16 / 9;
}

.scene-img,
.video-card video {
  max-width: 100%;
  max-height: 280px;
  /* Constrain vertical height for 9:16/1:1 content */
  width: auto;
  /* Allow width to shrink */
  height: auto;
  /* Maintain aspect ratio */
  object-fit: contain;
  border-radius: 4px;
}

/* Post Production */
.postprod-section {
  flex: 1;
  height: 100%;
  min-height: 0;
}

.postprod-page-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 12;
  padding: 0;
  flex: 0 0 auto;
}

.postprod-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
}

.postprod-editor-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.postprod-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 12px;
  height: 100%;
  min-height: 0;
}

.postprod-player-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  gap: 10px;
  padding: 12px;
}

.postprod-panel-header {
  grid-column: 1 / 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.postprod-panel-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.postprod-time-readout {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.postprod-preview-stage {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  flex: 1;
  min-height: 280px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #05070d;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postprod-preview-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0);
}

.postprod-preview-video-host {
  position: absolute;
  inset: 0;
}

.postprod-video,
.postprod-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  outline: none;
  border: none;
}

.postprod-preview-stack .postprod-video,
.postprod-preview-stack .postprod-preview-video-host,
.postprod-preview-stack .postprod-motion-wrapper,
.postprod-preview-stack .postprod-preview-gap,
.postprod-preview-stack .postprod-preview-empty {
  position: absolute;
  inset: 0;
}

.postprod-motion-wrapper {
  overflow: hidden;
}

.postprod-motion-wrapper .postprod-image {
  will-change: transform;
  transform-origin: center center;
}

.postprod-preview-stack .postprod-preview-video-host .postprod-video {
  will-change: transform;
  transform-origin: center center;
}

.postprod-preview-gap {
  display: none;
  background: #000;
}

.postprod-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d8dde8;
  font-size: 14px;
}

/* 미리보기 로딩 오버레이 — video readyState < HAVE_METADATA(1)일 때 표시 (metadata 로드 후 즉시 사라짐) */
.postprod-preview-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 7;
  pointer-events: none;
}
.postprod-preview-loading.is-loading {
  display: flex;
}
.postprod-render-video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.postprod-render-video-wrap .postprod-render-video {
  width: 100%;
  height: 100%;
  display: block;
}
.postprod-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  animation: postprod-spinner-rotate 0.85s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
@keyframes postprod-spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.postprod-preview-empty p {
  margin: 0;
  color: #c5cedf;
}

.postprod-play-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.postprod-play-overlay:focus,
.postprod-play-overlay:focus-visible {
  outline: none;
  box-shadow: none;
}

.postprod-preview-stack:hover .postprod-play-overlay {
  opacity: 1;
}

.postprod-play-overlay svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.postprod-time-inlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 9;
  pointer-events: none;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.card.postprod-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.postprod-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.postprod-toolbar-group label {
  color: var(--muted);
  font-size: 12px;
}

.postprod-cycle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.postprod-toolbar select {
  background: var(--layer-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 4px;
  min-width: 0;
  font-size: 11px;
}

.postprod-toolbar select.postprod-select-narrow {
  max-width: 52px;
}

.postprod-toolbar #postprod-snap-step {
  min-width: 56px;
}

.postprod-toolbar #postprod-snap-step option {
  color: #111;
  background: #fff;
}

.motion-group select {
  min-width: 80px;
}

.history-group {
  margin-left: 0;
}

.postprod-history-btn {
  min-width: 32px;
}

.postprod-history-btn.icon-btn {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.postprod-history-btn.icon-btn svg {
  width: 20px;
  height: 20px;
}

.postprod-history-btn.danger {
  border-color: rgba(255, 95, 95, 0.55);
  color: #ffd7d7;
}

.postprod-save-btn {
  min-width: 86px;
}

.postprod-render-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  min-height: 0;
}

.postprod-render-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
}

.postprod-render-head h3 {
  margin: 0;
  font-size: 15px;
  flex: 0 0 auto;
}

.postprod-render-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}

.postprod-render-badge.done {
  color: #53e6b3;
  border-color: rgba(83, 230, 179, 0.4);
  background: rgba(83, 230, 179, 0.12);
}

.postprod-render-badge.running {
  color: #ffd500;
  border-color: rgba(255, 213, 0, 0.42);
  background: rgba(255, 213, 0, 0.13);
}

.postprod-render-badge.failed {
  color: #ff8b8b;
  border-color: rgba(255, 139, 139, 0.4);
  background: rgba(255, 139, 139, 0.12);
}

.postprod-render-badge.needs-save {
  color: #8dc6ff;
  border-color: rgba(141, 198, 255, 0.46);
  background: rgba(141, 198, 255, 0.14);
}

.postprod-render-actions {
  display: grid;
  gap: 8px;
}

.postprod-render-actions.top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.postprod-render-actions.bottom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.postprod-save-state,
.postprod-render-progress,
.postprod-render-info {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
}

.postprod-save-state {
  color: var(--muted);
}

.postprod-render-progress {
  color: #ffd500;
  font-weight: 700;
}

.postprod-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.postprod-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.postprod-progress-fill {
  height: 100%;
  background: #ffd500;
  border-radius: 3px;
  transition: width 0.2s ease;
}

.postprod-progress-text {
  font-size: 12px;
  font-weight: 700;
  color: #ffd500;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}

.postprod-save-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.postprod-save-overlay p {
  margin: 0;
}

.postprod-save-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffd500;
  border-radius: 50%;
  animation: postprod-spin 0.7s linear infinite;
}

@keyframes postprod-spin {
  to { transform: rotate(360deg); }
}

.postprod-render-info {
  color: #9fd4ff;
}

.postprod-resource-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.postprod-resource-card .title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.postprod-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.postprod-resource-grid div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.16);
}

.postprod-resource-grid span {
  font-size: 11px;
  color: var(--muted);
}

.postprod-resource-grid strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.postprod-download-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.postprod-download-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.postprod-download-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.postprod-download-item span {
  font-size: 11px;
  color: var(--muted);
}

.postprod-download-item strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.postprod-download-item.primary {
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(255, 122, 0, 0.25);
}

.postprod-download-item.primary:hover {
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  border-color: transparent;
}

.postprod-download-item.primary span,
.postprod-download-item.primary strong {
  color: #0b0b0b;
}

.postprod-download-item.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── 렌더 저장소 모달 ───────────────────────────────────────────── */
.postprod-storage-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.postprod-storage-overlay.is-open {
  display: flex;
}
.postprod-storage-dialog {
  width: min(960px, 100%);
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  background: var(--card, #0d1226);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.postprod-storage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
  flex-shrink: 0;
}
.postprod-storage-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e8edf8);
}
.postprod-storage-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.postprod-storage-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.postprod-storage-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
}
.postprod-storage-loading,
.postprod-storage-empty {
  margin: 20px 0;
  text-align: center;
  color: var(--text-muted, rgba(255,255,255,0.45));
  font-size: 13px;
}
.postprod-storage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.postprod-storage-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.postprod-storage-preview-wrap {
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.postprod-storage-preview-video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  max-height: 60vh;
  display: block;
  object-fit: contain;
}
.postprod-storage-item-thumb {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.postprod-storage-item-thumb:hover {
  background: rgba(255, 200, 0, 0.15);
  color: rgba(255, 200, 0, 0.9);
  border-color: rgba(255, 200, 0, 0.4);
}
.postprod-storage-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.postprod-storage-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8edf8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postprod-storage-item-meta {
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.45));
}
.postprod-storage-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.postprod-version-card {
  margin-top: 4px;
}
.postprod-version-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.postprod-version-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 7px);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  min-width: 64px;
}
.postprod-version-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--primary, #5c6bc0);
}
.postprod-version-btn.is-active {
  background: var(--primary, #5c6bc0);
  border-color: var(--primary, #5c6bc0);
  color: #fff;
}
.postprod-version-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.postprod-version-del {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.postprod-version-del:hover {
  background: rgba(220, 80, 80, 0.35);
  color: #ff8080;
}
.postprod-version-btn.is-active ~ .postprod-version-del,
.postprod-version-item:has(.postprod-version-btn.is-active) .postprod-version-del {
  color: rgba(255,255,255,0.65);
}
.btn-danger {
  background: rgba(220, 53, 69, 0.12);
  color: #e05555;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: var(--radius-sm, 7px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  transition: background 0.15s, color 0.15s;
}
.btn-danger.compact {
  padding: 4px 10px;
  font-size: 12px;
}
.btn-danger:hover {
  background: rgba(220, 53, 69, 0.24);
  color: #ff6b6b;
}
/* ── 미디어 브라우저 모달 ────────────────────────────────────────────── */
.postprod-media-browser-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.postprod-media-browser-modal.is-open { display: flex; }
.postprod-media-browser-inner {
  width: min(960px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--card, #0d1226);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.75);
  overflow: hidden;
}
.postprod-mb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
  flex-shrink: 0;
}
.postprod-mb-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text, #e8edf8); }
.postprod-mb-header-actions { display: flex; align-items: center; gap: 8px; }
.postprod-mb-insert {
  /* btn-primary 기본 스타일 + 상단 위치 강조 */
  min-width: 64px;
}
.postprod-mb-insert:disabled { opacity: 0.4; cursor: not-allowed; }
.postprod-mb-close {
  background: none; border: none; color: rgba(255,255,255,0.45);
  font-size: 16px; cursor: pointer; padding: 6px 10px; border-radius: 6px; line-height: 1;
}
.postprod-mb-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.postprod-mb-body {
  flex: 1; overflow-y: auto; padding: 14px 16px 18px;
  display: flex; flex-direction: column; gap: 18px;
}
.postprod-mb-section { display: flex; flex-direction: column; gap: 8px; }
.postprod-mb-section-title {
  margin: 0; font-size: 12px; font-weight: 700;
  color: var(--text-muted, rgba(255,255,255,0.55));
  text-transform: uppercase; letter-spacing: 0.06em;
}
.postprod-mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.postprod-mb-empty {
  margin: 8px 0; text-align: center;
  color: var(--text-muted, rgba(255,255,255,0.45)); font-size: 12px;
}
.postprod-mb-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.03);
  cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, transform 0.1s ease;
}
.postprod-mb-tile:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }
.postprod-mb-tile:focus-visible { outline: 2px solid rgba(122,183,255,0.7); outline-offset: 2px; }
.postprod-mb-tile.is-selected {
  border-color: rgba(122,183,255,0.9);
  background: rgba(122,183,255,0.12);
  box-shadow: 0 0 0 2px rgba(122,183,255,0.4);
}
.postprod-mb-tile-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
}
.postprod-mb-tile-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.postprod-mb-tile-vidicon {
  position: absolute; right: 6px; bottom: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.65); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; pointer-events: none;
}
.postprod-mb-tile-zoom {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(0,0,0,0.6); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
.postprod-mb-tile:hover .postprod-mb-tile-zoom,
.postprod-mb-tile.is-selected .postprod-mb-tile-zoom {
  opacity: 1;
}
.postprod-mb-tile-zoom:hover { background: rgba(0,0,0,0.85); }
.postprod-mb-thumb-badge {
  position: absolute; left: 6px; top: 6px;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(56,189,120,0.18); color: #5ae09f;
  border: 1px solid rgba(56,189,120,0.3);
}
.postprod-mb-tile-label {
  font-size: 11px; color: var(--text, #e8edf8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 2px;
}

/* ── 라이트박스: 썸네일 돋보기 클릭 시 원본 표시 ── */
.postprod-mb-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 32px;
}
.postprod-mb-lightbox.is-open { display: flex; }
.postprod-mb-lightbox-content {
  max-width: 92vw; max-height: 86vh;
  display: flex; align-items: center; justify-content: center;
}
.postprod-mb-lightbox-img,
.postprod-mb-lightbox-video {
  max-width: 92vw; max-height: 86vh;
  display: block;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}
.postprod-mb-lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
}
.postprod-mb-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ── 클립 우클릭 컨텍스트 메뉴 ────────────────────────────────────── */
.postprod-clip-context-menu {
  position: fixed;
  z-index: 10001;
  min-width: 180px;
  background: var(--card, #131a2e);
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.6);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.postprod-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--text, #e8edf8);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.postprod-ctx-item:hover,
.postprod-ctx-item:focus-visible {
  background: rgba(255,255,255,0.07);
  outline: none;
}
.postprod-ctx-item.is-on .postprod-ctx-label { color: #ffd500; font-weight: 600; }
.postprod-ctx-check {
  width: 14px;
  text-align: center;
  color: #ffd500;
  font-weight: 700;
}
.postprod-ctx-label { flex: 1; }
.postprod-ctx-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 4px;
}
/* 효과음 생성 액션 버튼 — 체크박스형이 아닌 액션형 강조 스타일 */
.postprod-ctx-item.postprod-ctx-action .postprod-ctx-label {
  color: #7ab7ff;
  font-weight: 600;
}
.postprod-ctx-item.postprod-ctx-action:hover .postprod-ctx-label {
  color: #a8d0ff;
}
.postprod-ctx-item.postprod-ctx-action:disabled {
  opacity: 0.55;
  cursor: default;
}
/* ──────────────────────────────────────────────────────────────── */

.postprod-render-preview {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #05070d;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postprod-render-video,
.postprod-render-image {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

.postprod-render-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--muted);
}

.nk-copy-alert {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 18, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.nk-copy-alert.is-open {
  display: flex;
}

.nk-copy-alert-dialog {
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  /* 다이얼로그 배경 — 뒤 영상이 비치지 않도록 완전 불투명 */
  background: #161b2c;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
  padding: 14px;
}

body.theme-light .nk-copy-alert-dialog {
  background: #ffffff;
}

.nk-copy-alert-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.nk-copy-alert-text {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(10, 14, 26, 0.75);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
}

.nk-copy-alert-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.postprod-pill {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 999px;
  height: 30px;
  min-width: 50px;
  padding: 0 10px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.postprod-pill.active {
  background: #ffd500;
  border-color: #ffd500;
  color: #111;
}

.postprod-pill-square {
  width: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: 8px;
}

.postprod-pill-square svg {
  display: block;
}

.postprod-color-input {
  width: 28px;
  height: 28px;
  padding: 1px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.postprod-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.postprod-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.postprod-pos-range {
  width: 50px;
  accent-color: #ffd500;
}

.zoom-group {
  gap: 4px;
}

.zoom-group input[type="range"] {
  width: 50px;
  accent-color: #ffd500;
}

#postprod-zoom-text {
  min-width: 30px;
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.postprod-zoom-step {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.postprod-fit-btn {
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.postprod-fit-btn.is-active {
  border-color: rgba(255, 213, 0, 0.62);
  background: rgba(255, 213, 0, 0.18);
}

[data-theme="dark"] .postprod-fit-btn.is-active {
  color: #ffef9d;
}

[data-theme="light"] .postprod-fit-btn.is-active {
  color: #1b2c47;
}

.card.postprod-timeline-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 8px 10px 4px;
}

.postprod-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.postprod-timeline-head h3 {
  margin: 0;
  font-size: 15px;
}

.postprod-scrub-wrap {
  flex: 1;
  min-width: 280px;
}

.postprod-scrub-wrap input[type="range"] {
  width: 100%;
}

.postprod-timeline-scroll {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(6, 10, 20, 0.72);
  overflow-x: auto;
  user-select: none;
  overflow-y: hidden;
  padding: 6px 6px 2px 0; /* left 0: sticky track-label이 좌 경계에 바짝 붙도록 */
  flex: 0 0 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.postprod-timeline-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.postprod-timeline-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

.postprod-timeline-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 84%, #5c6f8d 16%));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.postprod-timeline-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--scrollbar-thumb-hover) 84%, #7086a6 16%));
  background-clip: padding-box;
}

.postprod-ruler-row,
.postprod-track-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: stretch;
}

.postprod-track-label {
  position: sticky;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: rgba(6, 10, 20, 0.96);
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.postprod-track-label.ruler-label {
  font-weight: 700;
}

.track-badge {
  font-weight: 700;
  color: var(--text);
}

.postprod-ruler {
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.postprod-ruler-mark {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.18);
}

.postprod-ruler-mark span {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--muted);
  font-size: 11px;
}

.postprod-track-lane {
  position: relative;
  height: 34px;
  border-bottom: 1px solid var(--border);
  background-color: rgba(255, 255, 255, 0.02);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 0);
  background-size: 80px 100%; /* JS에서 pxPerSecond에 맞게 인라인으로 재설정됨 */
  cursor: pointer;
}

.postprod-clip {
  position: absolute;
  top: 3px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 8px 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.postprod-clip-text {
  position: relative;
  z-index: 2;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.postprod-clip-motion {
  position: relative;
  z-index: 2;
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.7;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 4px;
  padding-right: 4px;
}

.postprod-clip-extra {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  min-width: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.36) 0 6px,
      rgba(255, 255, 255, 0.06) 6px 12px
    );
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  z-index: 1;
}

.postprod-clip-handle {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  background: rgba(0, 0, 0, 0.16);
  cursor: ew-resize;
  z-index: 2;
}

.postprod-clip-handle.left {
  left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.postprod-clip-handle.right {
  right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

/* ── Reorder 드래그 시각 효과 ────────────────────────────
 * postprod-reordering: 순차 트랙 move 모드일 때만 적용 (resize 드래그는 제외)
 * 형제 클립이 부드럽게 슬라이드하고, 드래그 클립은 떠오르는 리프트 효과 */

/* 형제(비드래그) 클립: 자리 이동 시 smooth slide + 디밍 */
body.postprod-reordering .postprod-clip:not(.is-dragging) {
  transition:
    left 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease;
  opacity: 0.78;
  will-change: left;
}

/* 드래그 클립: 리프트 효과 + slot 스냅 애니메이션. 이동(move) 모드는 파란색 강조 */
body.postprod-reordering .postprod-clip.is-dragging {
  transition:
    left 110ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 110ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 140ms ease,
    box-shadow 140ms ease;
  transform: translateY(-3px) scale(1.025);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(122, 183, 255, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  opacity: 0.96;
  z-index: 20;
}

/* 교체(swap) 모드 — 1.5초 hold 후 활성화 시 주황색 강조로 변경 */
body.postprod-reordering .postprod-clip.is-dragging.is-swap-mode,
.postprod-clip.is-dragging.is-swap-mode {
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(255, 165, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* 기본 .is-dragging (resize 포함한 모든 드래그에 적용되는 기본 강조) — 파란색 */
.postprod-clip.is-dragging {
  opacity: 0.96;
  box-shadow: 0 0 0 2px rgba(122, 183, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.postprod-clip.is-selected {
  box-shadow: inset 0 0 0 2px rgba(122, 183, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.postprod-track-overlays .postprod-clip {
  background: rgba(99, 179, 255, 0.34);
  border-color: rgba(99, 179, 255, 0.54);
}

.postprod-track-subtitles .postprod-clip {
  background: rgba(255, 198, 55, 0.36);
  border-color: rgba(255, 198, 55, 0.55);
}

.postprod-track-visuals .postprod-clip {
  background: rgba(54, 186, 157, 0.34);
  border-color: rgba(54, 186, 157, 0.54);
}

.postprod-track-audio .postprod-clip {
  background: rgba(255, 136, 54, 0.36);
  border-color: rgba(255, 136, 54, 0.56);
}

.postprod-track-music .postprod-clip {
  background: rgba(130, 99, 255, 0.34);
  border-color: rgba(130, 99, 255, 0.54);
}

[data-theme="light"] .postprod-timeline-scroll {
  background: rgba(255, 255, 255, 0.86);
  border-color: #cdd9ef;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme="light"] .postprod-timeline-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

[data-theme="light"] .postprod-timeline-scroll::-webkit-scrollbar-thumb {
  border-color: transparent;
}

[data-theme="light"] .postprod-track-label {
  background: #eef3ff;
  border-right-color: #cfdcf3;
  color: #223351;
}

[data-theme="light"] .track-badge {
  color: #1a2b49;
}

[data-theme="light"] .postprod-ruler {
  background: rgba(13, 23, 47, 0.06);
  border-bottom-color: #d5e1f4;
}

[data-theme="light"] .postprod-ruler-mark {
  background: rgba(13, 23, 47, 0.28);
}

[data-theme="light"] .postprod-ruler-mark span {
  color: #334765;
}

[data-theme="light"] .postprod-track-lane {
  background-color: rgba(13, 23, 47, 0.04);
  background-image: linear-gradient(90deg, rgba(13, 23, 47, 0.12) 1px, transparent 0);
  border-bottom-color: #d8e3f6;
}

[data-theme="light"] .postprod-clip {
  color: #13233f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .postprod-clip-extra {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(20, 37, 66, 0.2) 0 6px,
      rgba(20, 37, 66, 0.04) 6px 12px
    );
  border-left-color: rgba(20, 37, 66, 0.35);
}

.postprod-clip.is-empty {
  border-style: dashed;
  opacity: 0.72;
  background: rgba(255, 255, 255, 0.1);
}

.postprod-clip.is-empty .postprod-clip-handle {
  background: rgba(255, 255, 255, 0.12);
}

.postprod-track-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 12px;
}

.postprod-track-action-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.postprod-track-action-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.postprod-track-action-btn.is-gen {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.28);
  color: rgba(168, 85, 247, 0.8);
}

.postprod-track-action-btn.is-gen:hover {
  background: rgba(168, 85, 247, 0.2);
  color: rgba(168, 85, 247, 1);
}

[data-theme="light"] .postprod-track-action-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .postprod-track-action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.postprod-playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ffd500;
  box-shadow: 0 0 10px rgba(255, 213, 0, 0.45);
  pointer-events: none;
  z-index: 3; /* track-label(z-index:4) 아래에 위치 — 라벨 위로 올라오는 어색함 방지 */
}

.postprod-playhead.ruler-playhead {
  height: 24px;
}

/* 플레이헤드 삼각형 핸들 (ruler 하단에서 타임라인으로 이어지는 시각적 핸들) */
.postprod-playhead.ruler-playhead::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #ffd500;
  filter: drop-shadow(0 2px 4px rgba(255, 213, 0, 0.5));
}

/* ── 렌더 범위 하이라이트 (In–Out) ── */
.postprod-render-range-bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(251, 191, 36, 0.13);
  border-top: 2px solid rgba(251, 191, 36, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* ── 렌더 In/Out 마커 ── */
.postprod-render-marker {
  position: absolute;
  top: 0;
  width: 14px;
  height: 100%;
  cursor: ew-resize;
  z-index: 5;
  user-select: none;
  touch-action: none;
}

/* In 마커: 왼쪽 대괄호 [ — 컨테이너 왼쪽 끝(left=0)이 정확히 In 위치 */
.postprod-render-in-marker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #fbbf24;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.7);
}
.postprod-render-in-marker::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 3px;
  background: #fbbf24;
  border-radius: 0 2px 0 0;
}

/* Out 마커: 오른쪽 대괄호 ] — 컨테이너 오른쪽 끝(right=0)이 정확히 Out 위치 */
.postprod-render-out-marker {
  transform: translateX(-100%);
}
.postprod-render-out-marker::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #fbbf24;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.7);
}
.postprod-render-out-marker::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 3px;
  background: #fbbf24;
  border-radius: 2px 0 0 0;
}

/* 마커 호버 강조 */
.postprod-render-marker:hover::before {
  background: #fff;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}
.postprod-render-marker:hover::after {
  background: #fff;
}

/* ── Blade(자르기) 모드 ── */
#postprod-timeline-scroll.is-blade-mode .postprod-clip {
  cursor: crosshair;
}

#postprod-timeline-scroll.is-blade-mode .postprod-clip:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 70, 70, 0.9);
}

/* 블레이드 모드에서 클립 위에 커서 위치를 나타내는 수직선 */
#postprod-timeline-scroll.is-blade-mode .postprod-clip::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--blade-x, 50%);
  width: 2px;
  height: 100%;
  background: rgba(255, 70, 70, 0.0);
  pointer-events: none;
  z-index: 10;
}

#postprod-timeline-scroll.is-blade-mode .postprod-clip:hover::after {
  background: rgba(255, 70, 70, 0.75);
}

.postprod-dragging {
  user-select: none;
  cursor: grabbing !important;
}
.postprod-dragging * {
  cursor: grabbing !important;
}

.postprod-empty {
  height: 100%;
  min-height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
}

.postprod-empty h2,
.postprod-empty p {
  margin: 0;
}

.postprod-empty p {
  color: var(--muted);
}

/* Portrait mode (세로 모드) */
.postprod-workspace.is-portrait {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}

/* ── 좌측: 9:16 편집 패널 ── */
.postprod-portrait-left {
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
}

.postprod-portrait-left .postprod-player-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.postprod-portrait-left .postprod-panel-header {
  grid-column: unset;
  grid-row: unset;
  flex-shrink: 0;
}

.postprod-portrait-left .postprod-preview-stage {
  grid-column: unset;
  grid-row: unset;
  flex: 1;
  min-height: 0;
}

/* ── 우측 컬럼: 제어바 → 타임라인 → 렌더링 ── */
.postprod-portrait-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

/* 제어바: 2행 줄바꿈 — 캡션 그룹이 1행 전체, 나머지가 2행 */
.postprod-portrait-right .postprod-toolbar {
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px 10px;
}

.postprod-portrait-right .postprod-toolbar-group {
  flex-shrink: 0;
}

/* 캡션 그룹이 1행 전체 점유 → 나머지 그룹이 2행으로 내려감 */
.postprod-portrait-right .postprod-toolbar-group:first-child {
  flex-basis: 100%;
}

/* 타임라인: 자연 높이 사용, 최대 40%로 여유 확보 */
.postprod-portrait-right .postprod-timeline-panel {
  flex: 0 0 auto;
  min-height: 150px;
  max-height: 40%;
}

/* 렌더링 패널: 미리보기(좌) + 컨트롤(우) 3열 그리드 — 하단은 컴퓨팅/다운로드 2분할
   actions(2×2 버튼) 우측에 version 카드 배치 — download 영역과 겹침 방지 */
.postprod-portrait-right .postprod-render-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-areas:
    "preview head      head"
    "preview actions   version"
    "preview save      save"
    "preview progress  progress"
    "preview info      info"
    "preview compute   download";
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}

/* 미리보기: 좌측 열 전체 높이, 9:16 비율 */
.postprod-portrait-right .postprod-render-preview {
  grid-area: preview;
  align-self: stretch;
  aspect-ratio: 9 / 16;
  min-width: 80px;
  min-height: 0;
  height: auto;
  padding: 0;
  flex: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.postprod-portrait-right .postprod-render-video,
.postprod-portrait-right .postprod-render-image {
  width: 100%;
  height: 100%;
  max-height: unset;
  aspect-ratio: unset;
  object-fit: contain;
}

/* 우측 열 항목 배치 */
.postprod-portrait-right .postprod-render-head { grid-area: head; }
/* actions: 2×2 그리드 — 4개 버튼이 2행으로 배치되며 우측에 version 카드 공간 확보 */
.postprod-portrait-right .postprod-render-actions.top {
  grid-area: actions;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.postprod-portrait-right .postprod-save-state { grid-area: save; }
.postprod-portrait-right .postprod-render-progress { grid-area: progress; }
.postprod-portrait-right .postprod-render-info { grid-area: info; }
/* 편집 버전 카드: actions 우측 셀 — download와 겹침 방지 */
.postprod-portrait-right .postprod-version-card {
  grid-area: version;
  margin-top: 0;
  align-self: stretch;
  min-width: 0;
}

/* 컴퓨팅 리소스: 하단 좌측 (숨김 해제), 다운로드 카드와 높이 동일 */
.postprod-portrait-right .postprod-compute-card {
  display: block;
  grid-area: compute;
  align-self: stretch;
}

/* 다운로드: 하단 우측, 컴퓨팅 리소스 카드와 높이 동일.
   버전 카드(postprod-version-card)는 자체 grid-area:version을 갖도록 제외 */
.postprod-portrait-right .postprod-resource-card:not(.postprod-compute-card):not(.postprod-version-card) {
  grid-area: download;
  align-self: stretch;
}

/* 다운로드 버튼: 4행 세로 배치 */
.postprod-portrait-right .postprod-download-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}

.postprod-portrait-right .postprod-download-item {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
}

/* Orient toggle buttons */
.postprod-orient-btn {
  opacity: 0.55;
  transition: opacity 0.15s;
}

.postprod-orient-btn.active {
  opacity: 1;
}

@media (max-width: 960px) {
  .postprod-workspace {
    grid-template-columns: 1fr;
  }

  .postprod-shell {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .postprod-render-actions.top {
    grid-template-columns: 1fr;
  }

  .postprod-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .postprod-scrub-wrap {
    width: 100%;
    min-width: 0;
  }

  .postprod-track-label {
    min-width: 120px;
    padding: 0 8px;
  }
}

/* Fixed desktop layout mode */
html.layout-fixed:not([data-embed="1"]),
html.layout-fixed:not([data-embed="1"]) body.layout-fixed {
  min-width: 1440px;
  overflow-x: auto;
}

body.layout-fixed .app {
  width: 100%;
  min-width: 1440px;
  margin: 0;
  grid-template-columns: 250px minmax(0, 1fr);
}

body.layout-fixed .app.no-sidebar {
  grid-template-columns: 1fr;
}

html.layout-fixed:not([data-embed="1"]) body.layout-fixed .app.no-sidebar {
  width: 100%;
  min-width: 1440px;
  margin: 0;
}

html.layout-fixed[data-embed="1"] body.layout-fixed .app {
  width: 100%;
  min-width: 0;
  margin: 0;
}

body.layout-fixed .sidebar {
  position: sticky;
  top: 0;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  padding: 22px 20px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 26px;
  overflow-x: hidden;
  overflow-y: hidden;
}

body.layout-fixed #sidebar-project-card {
  grid-row: 3;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.layout-fixed #sidebar-project-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.layout-fixed .sidebar-footer {
  grid-row: 4;
  margin-top: 0;
  flex-shrink: 0;
}

body.layout-fixed .sidebar.has-project-selection {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

body.layout-fixed .sidebar.has-project-selection #sidebar-project-card {
  grid-row: 3;
}

body.layout-fixed .sidebar.has-project-selection .nav {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

body.layout-fixed .sidebar.has-project-selection .nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body.layout-fixed .sidebar-actions {
  flex-wrap: nowrap;
}

body.layout-fixed .brand-text {
  display: block;
}

body.layout-fixed .nav {
  flex-direction: column;
  flex-wrap: nowrap;
}

body.layout-fixed .nav-item {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 10px 12px;
  font-size: 16px;
}

@media (max-width: 1024px) {
  .draft-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }

  .draft-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .draft-actions .action-trash {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .draft-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .draft-top {
    flex-direction: column;
  }

  .draft-thumb {
    width: 100%;
    height: 180px;
  }

  .draft-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.layout-fixed .hero-grid {
  grid-template-columns: 1.2fr 1fr 1fr;
}

body.layout-fixed .scenario-grid {
  grid-template-columns: 0.3fr 0.7fr;
}

body.layout-fixed .section-caption.left-caption {
  grid-column: 1 / 2;
}

body.layout-fixed .section-caption.right-caption {
  grid-column: 2 / 3;
}

body.layout-fixed .results-card {
  grid-column: 2 / 3;
  grid-row: 2;
}

body.layout-fixed .scenario-form {
  grid-column: 1 / 2;
  grid-row: 2;
}

body.layout-fixed .option-card-grid {
  width: 1320px;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
}

body.layout-fixed .subscription-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.layout-fixed #project-overlay .auth-card {
  width: 800px;
  max-width: 800px;
}

body.layout-fixed .postprod-workspace {
  grid-template-columns: minmax(0, 1fr) 360px;
}

body.layout-fixed .postprod-shell {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

body.layout-fixed .postprod-render-actions.top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.layout-fixed .postprod-toolbar {
  flex-direction: row;
  align-items: center;
}

body.layout-fixed .postprod-scrub-wrap {
  min-width: 280px;
}

body.layout-fixed .postprod-track-label {
  padding: 0 12px;
}

body.layout-fixed .lib-content {
  width: 1280px;
  height: 760px;
}

.content-library-page {
  display: grid;
  gap: 12px;
  padding: 10px 0 24px;
}

.content-library-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(10, 16, 34, 0.88));
  box-shadow: var(--shadow-1);
}

.content-library-hero.empty {
  display: grid;
  justify-content: stretch;
}

.content-library-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.content-library-hero h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.content-library-description {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.6;
}

.content-library-hero-actions,
.content-library-toolbar-actions,
.content-library-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-library-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.content-library-summary-card {
  padding: 10px;
  border-radius: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: grid;
  gap: 8px;
}

.content-library-summary-card span {
  font-size: 12px;
  color: var(--muted);
}

.content-library-summary-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.content-library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(10, 18, 34, 0.55);
}

.content-library-toolbar span {
  color: var(--muted);
}

.content-library-section {
  display: grid;
  gap: 8px;
}

.content-library-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-library-section-head h3 {
  margin: 0;
  font-size: 20px;
}

.content-library-section-head span {
  color: var(--muted);
  font-size: 13px;
}

.content-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.content-library-item,
.content-library-empty-group {
  min-height: 156px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.content-library-item {
  display: grid;
  gap: 8px;
}

.content-library-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.content-library-badge,
.content-library-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.content-library-badge {
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.content-library-status {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
}

.content-library-status.is-ready {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.content-library-item h4 {
  margin: 0;
  font-size: 17px;
}

.content-library-item p,
.content-library-empty-group {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 980px) {
  .content-library-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-library-hero,
  .content-library-toolbar {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .content-library-summary-grid {
    grid-template-columns: 1fr;
  }
}

.brand-studio-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18, 24, 44, 0.96), rgba(12, 20, 38, 0.88));
  box-shadow: var(--shadow-1);
}

.brand-studio-hero.empty {
  display: grid;
}

.brand-studio-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.brand-studio-hero h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.brand-studio-description {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.6;
}

.brand-studio-hero-actions,
.brand-studio-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-studio-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.brand-studio-context-bar,
.knowledge-hub-context-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.brand-studio-context-bar-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-studio-context-item,
.knowledge-hub-context-item,
.analytics-overview-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--studio-soft-bg);
  display: grid;
  gap: 4px;
}

.brand-studio-context-item span,
.knowledge-hub-context-item span,
.analytics-overview-card span {
  font-size: 12px;
  color: var(--muted);
}

.brand-studio-context-item strong,
.knowledge-hub-context-item strong,
.analytics-overview-card strong { font-size: 15px; line-height: 1.35; }

/* Inline context label/value styling for 1-line bars */
.context-line { margin: 0; }
.context-line .ctx-label { color: var(--muted); font-weight: 400; }
.context-line .ctx-sep { color: var(--muted); }
.context-line .ctx-value { color: var(--text); font-weight: 700; }

.brand-studio-context-item p,
.analytics-overview-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.brand-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-knowledge-card {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 6px;
}

.brand-knowledge-card span {
  font-size: 12px;
  color: var(--muted);
}

.brand-knowledge-card strong { font-size: 14px; line-height: 1.45; }

.brand-content-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-content-type-card {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.55);
  color: var(--text);
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.brand-content-type-card:hover { border-color: rgba(255, 140, 0, 0.4); }

.brand-content-type-card.is-active {
  border-color: rgba(255, 140, 0, 0.75);
  box-shadow: 0 18px 36px rgba(255, 140, 0, 0.12);
  background: linear-gradient(160deg, rgba(255, 140, 0, 0.12), rgba(10, 18, 34, 0.76));
}

.brand-content-type-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.brand-content-type-state,
.brand-studio-selection-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-content-type-card.is-active .brand-content-type-state {
  color: rgba(255, 160, 60, 0.9);
}

.brand-content-type-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 140, 0, 0.85);
  flex-shrink: 0;
  position: relative;
}

.brand-content-type-check::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.brand-content-type-card strong {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.brand-content-type-card p {
  margin: 0 0 auto;
  color: var(--muted);
  line-height: 1.52;
  font-size: 13px;
}

.brand-content-type-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-content-type-output-chip {
  font-size: 11px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.4;
}

.brand-content-type-card.is-active .brand-content-type-outputs {
  border-top-color: rgba(255, 140, 0, 0.15);
}

.brand-content-type-card.is-active .brand-content-type-output-chip {
  background: rgba(255, 140, 0, 0.08);
  border-color: rgba(255, 140, 0, 0.2);
  color: rgba(255, 170, 60, 0.85);
}

.brand-studio-selection-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.52);
}

.brand-studio-selection-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.brand-studio-selection-summary p {
  margin: 8px 0 0;
  color: var(--muted);
}

.brand-studio-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-asset-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-asset-filter {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--studio-soft-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-asset-filter.is-active {
  border-color: rgba(255, 140, 0, 0.75);
  background: rgba(255, 140, 0, 0.14);
}

.brand-asset-filter strong {
  font-size: 12px;
  color: var(--text);
}

.brand-asset-selection-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.52);
}

.brand-asset-selection-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
}

.brand-asset-selection-summary p {
  margin: 8px 0 0;
  color: var(--muted);
}

.brand-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.brand-asset-grid-scrollable {
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}

.brand-asset-grid-scrollable,
.brand-publish-channel-list,
.brand-publish-result-grid,
.knowledge-reference-grid-scrollable,
.knowledge-hub-field textarea,
.knowledge-reference-textarea,
.brand-caption-textarea,
.brand-publish-note {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.brand-asset-grid-scrollable::-webkit-scrollbar,
.brand-publish-channel-list::-webkit-scrollbar,
.brand-publish-result-grid::-webkit-scrollbar,
.knowledge-reference-grid-scrollable::-webkit-scrollbar,
.knowledge-hub-field textarea::-webkit-scrollbar,
.knowledge-reference-textarea::-webkit-scrollbar,
.brand-caption-textarea::-webkit-scrollbar,
.brand-publish-note::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.brand-asset-grid-scrollable::-webkit-scrollbar-track,
.brand-publish-channel-list::-webkit-scrollbar-track,
.brand-publish-result-grid::-webkit-scrollbar-track,
.knowledge-reference-grid-scrollable::-webkit-scrollbar-track,
.knowledge-hub-field textarea::-webkit-scrollbar-track,
.knowledge-reference-textarea::-webkit-scrollbar-track,
.brand-caption-textarea::-webkit-scrollbar-track,
.brand-publish-note::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.brand-asset-grid-scrollable::-webkit-scrollbar-thumb,
.brand-publish-channel-list::-webkit-scrollbar-thumb,
.brand-publish-result-grid::-webkit-scrollbar-thumb,
.knowledge-reference-grid-scrollable::-webkit-scrollbar-thumb,
.knowledge-hub-field textarea::-webkit-scrollbar-thumb,
.knowledge-reference-textarea::-webkit-scrollbar-thumb,
.brand-caption-textarea::-webkit-scrollbar-thumb,
.brand-publish-note::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 84%, #5c6f8d 16%));
  border: 2px solid transparent;
  background-clip: padding-box;
}

.brand-asset-grid-scrollable::-webkit-scrollbar-thumb:hover,
.brand-publish-channel-list::-webkit-scrollbar-thumb:hover,
.brand-publish-result-grid::-webkit-scrollbar-thumb:hover,
.knowledge-reference-grid-scrollable::-webkit-scrollbar-thumb:hover,
.knowledge-hub-field textarea::-webkit-scrollbar-thumb:hover,
.knowledge-reference-textarea::-webkit-scrollbar-thumb:hover,
.brand-caption-textarea::-webkit-scrollbar-thumb:hover,
.brand-publish-note::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--scrollbar-thumb-hover) 84%, #7086a6 16%));
  background-clip: padding-box;
}

.brand-asset-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 8px;
}

.brand-asset-card.is-selected {
  border-color: rgba(255, 140, 0, 0.75);
  box-shadow: 0 18px 36px rgba(255, 140, 0, 0.12);
  background: linear-gradient(160deg, rgba(255, 140, 0, 0.1), rgba(10, 18, 34, 0.76));
}

.brand-asset-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.brand-asset-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.brand-asset-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.brand-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-asset-empty {
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed var(--border);
  color: var(--muted);
}

.brand-caption-generator {
  display: grid;
  gap: 10px;
}

.brand-caption-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-caption-meta > div {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 6px;
}

.brand-caption-meta-label {
  font-size: 12px;
  color: var(--muted);
}

.brand-caption-textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
}

.brand-caption-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-caption-help {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.brand-hashtag-generator {
  display: grid;
  gap: 10px;
}

.brand-hashtag-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-hashtag-meta > div {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 6px;
}

.brand-hashtag-textarea {
  min-height: 120px;
}

.brand-channel-summary {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.52);
  display: grid;
  gap: 6px;
}

.brand-channel-summary-label,
.brand-channel-formats,
.brand-channel-badge {
  font-size: 12px;
  color: var(--muted);
}

.brand-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.brand-channel-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 8px;
  min-width: 0;
}

.brand-channel-card.is-connected {
  border-color: rgba(255, 140, 0, 0.55);
  box-shadow: 0 18px 36px rgba(255, 140, 0, 0.08);
}

.brand-channel-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.brand-channel-card h4 {
  margin: 6px 0 0;
  font-size: 18px;
}

.brand-channel-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.brand-channel-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
}

.brand-channel-actions {
  display: flex;
  justify-content: flex-end;
}

.brand-publish-planner {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.brand-publish-summary {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.52);
  display: grid;
  gap: 6px;
}

.brand-publish-fields {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
  max-width: 420px;
}

.brand-publish-field {
  display: grid;
  gap: 8px;
}

.brand-publish-channel-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.brand-publish-channel-option {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
}

.brand-publish-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
}

.brand-publish-empty {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  color: var(--muted);
}

.brand-publish-result-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-publish-note {
  min-height: 120px;
  grid-column: 1 / -1;
}

.brand-publish-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  grid-column: 1 / -1;
}

.brand-publish-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.brand-publish-result-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 8px;
}

.brand-publish-result-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.brand-publish-result-card strong {
  font-size: 17px;
  line-height: 1.45;
}

.brand-publish-result-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.brand-publish-result-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-publish-result-metrics span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.brand-studio-summary-card,
.brand-studio-panel,
.brand-studio-op-card {
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.brand-studio-summary-card {
  padding: 14px;
  display: grid;
  gap: 6px;
}

.brand-studio-summary-card span {
  font-size: 12px;
  color: var(--muted);
}

.brand-studio-summary-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.brand-auto-suggestion-panel {
  background: linear-gradient(160deg, rgba(255, 140, 0, 0.08), rgba(10, 18, 34, 0.76));
}

.brand-auto-suggestion-card {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 140, 0, 0.35);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 8px;
}

.brand-auto-suggestion-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.brand-auto-suggestion-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.brand-auto-suggestion-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-auto-suggestion-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.brand-studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 10px;
}

.brand-studio-panel {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.brand-studio-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 10px;
}

.brand-studio-main,
.brand-studio-side {
  display: grid;
  gap: 10px;
  align-self: start;
  min-width: 0;
}

.brand-studio-side {
  position: sticky;
  top: 14px;
}

.brand-studio-composer-panel {
  gap: 10px;
}

.brand-studio-panel-embedded {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-studio-disclosure,
.knowledge-hub-disclosure {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-2);
  overflow: clip; /* clip ≠ hidden: visually clips at border-radius but does NOT create a scroll container, so wheel events pass through to .main-body */
  min-width: 0;
}

.brand-studio-disclosure::before,
.knowledge-hub-disclosure::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9f3a, #ff7a00);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.12);
  pointer-events: none;
  z-index: 1;
}

.brand-studio-disclosure::before {
  top: 4px;
  left: 4px;
}

.knowledge-hub-disclosure::before {
  top: 4px;
  left: 4px;
}

.brand-studio-disclosure > summary,
.knowledge-hub-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 14px 34px;
}

.brand-studio-disclosure > summary::-webkit-details-marker,
.knowledge-hub-disclosure > summary::-webkit-details-marker {
  display: none;
}

.brand-studio-disclosure > summary strong,
.knowledge-hub-disclosure > summary strong {
  display: block;
  font-size: 17px;
}

.brand-studio-disclosure > summary span,
.knowledge-hub-disclosure > summary span {
  font-size: 12px;
  color: var(--muted);
}

.brand-studio-disclosure-body,
.knowledge-hub-disclosure-body {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease;
  min-width: 0;
}

details[open] > .brand-studio-disclosure-body,
details[open] > .knowledge-hub-disclosure-body {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.disclosure-inner {
  overflow: clip; /* clip: visually clips content at 0fr height for grid animation, but does NOT create a scroll container — prevents wheel-event absorption when disclosure is open */
  min-height: 0;
  padding: 12px 16px 16px;
}

.brand-studio-disclosure-meta,
.knowledge-hub-disclosure-meta {
  white-space: nowrap;
}

.brand-studio-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand-studio-panel-head h3 {
  margin: 0;
  font-size: 20px;
}

.brand-studio-panel-head span {
  font-size: 13px;
  color: var(--muted);
}

.brand-studio-checklist,
.brand-studio-ops-grid {
  display: grid;
  gap: 10px;
}

.brand-studio-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
}

.brand-studio-check-mark,
.brand-studio-op-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.brand-studio-check.is-ready .brand-studio-check-mark {
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
}

.brand-studio-check.is-pending .brand-studio-check-mark,
.brand-studio-op-status {
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.brand-studio-check h4,
.brand-studio-op-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

.brand-studio-check p,
.brand-studio-op-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.brand-studio-op-card {
  padding: 14px;
  display: grid;
  gap: 8px;
}

.brand-studio-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(10, 18, 34, 0.55);
}

.brand-studio-toolbar span {
  color: var(--muted);
}

.knowledge-hub-page {
  display: grid;
  gap: 10px;
  padding: 8px 0 20px;
}

.knowledge-hub-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(16, 26, 48, 0.96), rgba(10, 18, 34, 0.88));
  box-shadow: var(--shadow-1);
}

.knowledge-hub-hero.empty {
  display: grid;
}

.knowledge-hub-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.knowledge-hub-hero h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

.knowledge-hub-description {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}

.knowledge-hub-hero-actions,
.knowledge-hub-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-hub-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-hub-summary-card,
.knowledge-hub-panel {
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.knowledge-hub-summary-card {
  padding: 14px;
  display: grid;
  gap: 6px;
}

.knowledge-hub-summary-card span {
  font-size: 12px;
  color: var(--muted);
}

.knowledge-hub-summary-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.knowledge-hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 10px;
}

.knowledge-hub-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 10px;
}

.knowledge-hub-main,
.knowledge-hub-side {
  display: grid;
  gap: 10px;
  align-self: start;
}

.knowledge-hub-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.knowledge-hub-panel-embedded {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.knowledge-hub-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.knowledge-hub-panel-head h3 {
  margin: 0;
  font-size: 18px;
}

.knowledge-hub-panel-head span {
  font-size: 13px;
  color: var(--muted);
}

.knowledge-hub-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-hub-field {
  display: grid;
  gap: 8px;
}

.knowledge-hub-field-fill {
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.knowledge-hub-field span {
  font-size: 13px;
  color: var(--muted);
}

.knowledge-character-field {
  align-content: start;
}

.knowledge-character-input-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.knowledge-character-input {
  flex: 1 1 70%;
  width: auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.knowledge-ip-library-btn {
  flex: 0 1 30%;
  width: auto;
  min-width: 120px;
  min-height: 48px;
}

.knowledge-character-chips {
  display: grid;
  gap: 8px;
  min-height: 48px;
}

.knowledge-character-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.knowledge-character-token,
.knowledge-character-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--layer-soft);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.knowledge-character-remove {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.knowledge-character-remove:hover {
  color: var(--text);
  border-color: rgba(255, 122, 0, 0.55);
}

.knowledge-character-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* 배경·소품(환경) 자산 */
.knowledge-environment-field {
  display: grid;
  gap: 10px;
}

.knowledge-environment-input-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.knowledge-environment-input-row .knowledge-character-input {
  flex: 1 1 auto;
}

.knowledge-environment-kind-select {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 48px;
}

.knowledge-environment-cards {
  display: grid;
  gap: 10px;
  min-height: 32px;
}

.knowledge-environment-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--layer-soft);
}

.knowledge-environment-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.knowledge-environment-kind-badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.knowledge-environment-kind-badge[data-kind="prop"] {
  border-color: rgba(255, 122, 0, 0.55);
  color: var(--text);
}

.knowledge-environment-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-environment-kind-toggle {
  flex: 0 0 auto;
}

.knowledge-environment-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.knowledge-environment-remove:hover {
  color: var(--text);
  border-color: rgba(255, 122, 0, 0.55);
}

.knowledge-environment-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-environment-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}

.knowledge-environment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knowledge-environment-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
}

.knowledge-environment-thumb-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-style: dashed;
  color: var(--muted);
  font-size: 24px;
}

.knowledge-environment-thumb-upload input[type="file"] {
  display: none;
}

@media (max-width: 720px) {
  .knowledge-environment-input-row {
    flex-direction: column;
  }

  .knowledge-environment-kind-select {
    width: 100%;
  }
}

[data-theme="light"] .knowledge-character-input {
  background: #ffffff;
  border-color: rgba(115, 147, 196, 0.3);
}

@media (max-width: 720px) {
  .knowledge-character-input-row {
    flex-direction: column;
  }

  .knowledge-character-input,
  .knowledge-ip-library-btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .knowledge-ip-library-btn {
    min-width: 0;
  }
}

.knowledge-hub-field textarea {
  width: 100%;
  min-height: 128px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
}

#knowledge-world-setting {
  min-height: 0;
  height: 100%;
}

.knowledge-reference-builder {
  grid-column: 1 / -1;
}

.knowledge-reference-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.knowledge-reference-input,
.knowledge-reference-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
  font: inherit;
}

.knowledge-reference-input {
  min-height: 44px;
  padding: 0 14px;
}

.knowledge-reference-textarea {
  min-height: 120px;
  resize: vertical;
  padding: 12px 14px;
  grid-column: 1 / -1;
}

.knowledge-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-reference-grid-scrollable {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.knowledge-reference-card,
.knowledge-reference-empty {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
}

.knowledge-reference-card {
  display: grid;
  gap: 8px;
}

.character-manager-modal-box {
  width: min(1080px, calc(100vw - 40px));
  max-height: min(88vh, 920px);
}

.character-manager-modal-content {
  position: relative;
  max-height: min(82vh, 860px);
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.character-manager-shell {
  position: relative;
}

.character-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.character-manager-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.character-manager-head h3 {
  margin: 0 0 4px;
  font-size: 22px;
}

.character-manager-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.character-manager-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.character-manager-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent 12%);
}

.character-manager-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-2) 92%, var(--panel) 8%);
  padding: 14px 14px;
}

.character-manager-card-row {
  display: grid;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.character-manager-card-info {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.character-manager-card-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.character-manager-card-name strong {
  font-size: 18px;
  line-height: 1.2;
}

.character-sheet-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 82px));
  gap: 8px;
}

.character-props-disclosure {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.character-props-disclosure > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary, #999);
  user-select: none;
  list-style: none;
  padding: 2px 0;
}
.character-props-disclosure > summary::-webkit-details-marker { display: none; }
.character-props-disclosure[open] > summary { color: var(--text, #f0f0f0); }
.character-props-form {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 220ms ease;
}

.character-props-disclosure[open] > .character-props-form {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

/* .disclosure-inner 래퍼가 실제 flex 레이아웃과 패딩을 담당 */
.character-props-form > .disclosure-inner {
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.character-props-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}
.character-props-hint {
  font-size: 11px;
  opacity: 0.65;
}
.character-props-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  box-sizing: border-box;
}
.character-props-textarea {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}

.character-sheet-upload {
  position: relative;
  display: inline-flex;
}

.character-sheet-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.character-sheet-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.2;
}

.character-sheet-slot {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 86%, transparent 14%);
  overflow: hidden;
  width: 82px;
  height: 82px;
}

.character-sheet-slot.is-empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--bg) 80%, transparent 20%);
}

.character-sheet-slot.is-filled {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.character-sheet-thumb-button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  background: color-mix(in srgb, var(--bg) 84%, transparent 16%);
}

.character-sheet-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
  display: block;
}

.character-sheet-overlay-btn {
  position: absolute;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  z-index: 1;
  background: rgba(8, 14, 28, 0.86);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.character-sheet-overlay-btn.is-primary {
  left: 4px;
}

.character-sheet-overlay-btn.is-primary.is-active {
  background: rgba(255, 122, 0, 0.92);
  border-color: rgba(255, 170, 102, 0.9);
  color: #ffffff;
}

.character-sheet-overlay-btn.is-delete {
  right: 4px;
}

.character-sheet-overlay-btn:hover {
  transform: translateY(-1px);
}

.character-sheet-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 18, 0.82);
  cursor: zoom-out;
}

.character-sheet-preview-surface {
  max-width: min(92vw, 1320px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-sheet-preview-image {
  max-width: 100%;
  max-height: 88vh;
  display: block;
  border-radius: 18px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1040px) {
  .character-manager-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .character-manager-card-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .character-manager-card-info {
    width: 100%;
  }

  .character-manager-card-name {
    min-height: auto;
  }

  .character-sheet-slot-grid {
    grid-template-columns: repeat(2, minmax(0, 82px));
  }

  .character-sheet-slot {
    width: 82px;
    height: 82px;
  }
}

.knowledge-reference-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.knowledge-reference-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.knowledge-reference-card strong {
  font-size: 17px;
  line-height: 1.45;
}

.knowledge-reference-card p,
.knowledge-reference-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.knowledge-hub-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-hub-pill {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
  display: grid;
  gap: 6px;
}

.knowledge-hub-pill span {
  font-size: 12px;
  color: var(--muted);
}

.knowledge-hub-pill strong {
  font-size: 18px;
}

.knowledge-hub-help {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.knowledge-hub-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(10, 18, 34, 0.55);
}

.knowledge-hub-toolbar span {
  color: var(--muted);
}

.analytics-page {
  display: grid;
  gap: 10px;
  padding: 8px 0 20px;
}

.analytics-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(12, 28, 48, 0.96), rgba(8, 20, 36, 0.88));
  box-shadow: var(--shadow-1);
}

.analytics-hero.empty {
  display: grid;
}

.analytics-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.analytics-hero h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

.analytics-description {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}

.analytics-hero-actions,
.analytics-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.analytics-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analytics-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.analytics-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analytics-summary-card,
.analytics-panel {
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}

.analytics-summary-card {
  padding: 10px;
  display: grid;
  gap: 6px;
}

.analytics-summary-card span {
  font-size: 12px;
  color: var(--muted);
}

.analytics-summary-card strong {
  font-size: 16px;
  line-height: 1.4;
}

.analytics-panel {
  padding: 12px;
  display: grid;
  gap: 10px;
}

/* 신규 버튼 세로 가운데 정렬 보정 */
.series-create-btn { align-self: center; }

/* 공유 버튼: 신규 버튼과 동일한 높이(btn-primary 기반) + 아이콘만 키워 정사각형 */
.series-share-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding-left: 0;
  padding-right: 0;
}
.series-share-btn svg { width: 22px; height: 22px; display: block; }

.analytics-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analytics-view-tab {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--studio-soft-bg);
  color: var(--text);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  cursor: pointer;
}

.analytics-view-tab.is-active {
  border-color: rgba(255, 140, 0, 0.75);
  background: rgba(255, 140, 0, 0.14);
}

.analytics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.analytics-panel-head h3 {
  margin: 0;
  font-size: 20px;
}

.analytics-panel-head span {
  font-size: 13px;
  color: var(--muted);
}

.analytics-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analytics-filter-field {
  display: grid;
  gap: 8px;
}

.analytics-filter-field span {
  font-size: 12px;
  color: var(--muted);
}

.analytics-filter-select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.62);
  color: var(--text);
}

.analytics-filter-select option {
  background: var(--bg-2);
  color: var(--text);
}

[data-theme="light"] .analytics-filter-select option {
  background: #ffffff;
  color: #0f172a;
}

.analytics-filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
}

.analytics-filter-summary span {
  font-size: 12px;
  color: var(--muted);
}

.analytics-filter-summary strong {
  font-size: 16px;
}

.analytics-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-hashtag-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.analytics-channel-card,
.analytics-type-card,
.analytics-hashtag-card,
.analytics-recommendation-card,
.analytics-suggestion-card,
.analytics-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(10, 18, 34, 0.45);
}

.analytics-channel-card,
.analytics-type-card,
.analytics-hashtag-card,
.analytics-recommendation-card,
.analytics-suggestion-card {
  display: grid;
  gap: 12px;
}

.analytics-recommendation-card h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.analytics-recommendation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.analytics-recommendation-card strong {
  font-size: 14px;
  line-height: 1.6;
}

.analytics-suggestion-card h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.analytics-suggestion-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.analytics-suggestion-card strong {
  font-size: 14px;
  line-height: 1.6;
}

.analytics-suggestion-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.analytics-suggestion-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.analytics-channel-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.analytics-channel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 140, 0, 0.12);
  color: var(--accent);
}

.analytics-channel-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.analytics-channel-metrics span {
  font-size: 12px;
  color: var(--muted);
}

.analytics-channel-metrics strong {
  font-size: 18px;
  line-height: 1.35;
}

.analytics-channel-note,
.analytics-empty {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.analytics-channel-meta {
  margin-top: -2px;
}

.analytics-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(10, 18, 34, 0.55);
}

.analytics-toolbar span {
  color: var(--muted);
}

.content-library-hero {
  background: var(--studio-hero-bg);
  box-shadow: var(--shadow-1);
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, rgba(255, 140, 0, 0.42) 68%, var(--border) 32%);
  background:
    radial-gradient(circle at top right, rgba(255, 152, 59, 0.2), transparent 34%),
    radial-gradient(circle at bottom left, rgba(94, 170, 255, 0.08), transparent 30%),
    var(--studio-hero-bg);
  box-shadow: 0 18px 36px rgba(255, 140, 0, 0.12);
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero {
  box-shadow:
    0 18px 36px rgba(255, 140, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.brand-studio-eyebrow,
.knowledge-hub-eyebrow,
.analytics-eyebrow {
  color: color-mix(in srgb, var(--accent) 86%, #ffffff 14%);
}

.brand-studio-hero h2,
.knowledge-hub-hero h2,
.analytics-hero h2 {
  color: color-mix(in srgb, var(--text) 88%, #ffffff 12%);
}

.content-library-toolbar,
.brand-studio-toolbar,
.knowledge-hub-toolbar,
.analytics-toolbar {
  background: var(--studio-toolbar-bg);
}

.brand-knowledge-card,
.brand-content-type-card,
.brand-studio-selection-summary,
.brand-asset-selection-summary,
.brand-asset-card,
.brand-asset-empty,
.brand-caption-meta > div,
.brand-hashtag-meta > div,
.brand-channel-summary,
.brand-channel-card,
.brand-publish-summary,
.brand-publish-channel-option,
.brand-publish-result-card,
.brand-auto-suggestion-card,
.brand-studio-check,
.knowledge-reference-card,
.knowledge-reference-empty,
.knowledge-hub-pill,
.analytics-filter-summary,
.analytics-channel-card,
.analytics-type-card,
.analytics-hashtag-card,
.analytics-recommendation-card,
.analytics-suggestion-card,
.analytics-empty {
  background: var(--studio-soft-bg);
}

.brand-caption-textarea,
.brand-channel-input,
.brand-publish-input,
.analytics-filter-select,
.knowledge-hub-field textarea,
.knowledge-reference-input,
.knowledge-reference-textarea {
  background: var(--studio-input-bg);
}

.brand-asset-selection-summary strong,
.brand-asset-card strong,
.analytics-filter-summary strong {
  color: var(--text);
}

.brand-content-type-card.is-active,
.brand-auto-suggestion-panel {
  background: var(--studio-accent-bg);
}

@media (max-width: 1100px) {
  .series-filter-bar {
    padding: 16px;
  }

  .series-filter-title {
    font-size: 20px;
  }

  .brand-studio-context-bar,
  .knowledge-hub-context-bar,
  .analytics-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-studio-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-content-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-asset-grid {
    grid-template-columns: 1fr;
  }

  .brand-knowledge-grid {
    grid-template-columns: 1fr;
  }

  .brand-caption-meta {
    grid-template-columns: 1fr;
  }

  .brand-hashtag-meta {
    grid-template-columns: 1fr;
  }

  .brand-channel-grid {
    grid-template-columns: 1fr;
  }

  .brand-publish-fields {
    grid-template-columns: 1fr;
  }

  .brand-publish-result-form,
  .brand-publish-result-grid,
  .brand-publish-metric-grid {
    grid-template-columns: 1fr;
  }

  .brand-asset-selection-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-studio-layout {
    grid-template-columns: 1fr;
  }

  .brand-studio-workspace,
  .knowledge-hub-workspace {
    grid-template-columns: 1fr;
  }

  .brand-studio-side {
    position: static;
  }

  .knowledge-hub-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knowledge-hub-layout {
    grid-template-columns: 1fr;
  }

  .knowledge-hub-form-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-reference-form,
  .knowledge-reference-grid {
    grid-template-columns: 1fr;
  }

  .analytics-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-filter-grid {
    grid-template-columns: 1fr;
  }

  .analytics-channel-grid {
    grid-template-columns: 1fr;
  }

  .analytics-type-grid {
    grid-template-columns: 1fr;
  }

  .analytics-hashtag-grid {
    grid-template-columns: 1fr;
  }

  .analytics-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .analytics-suggestion-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .series-filter-bar {
    grid-template-columns: 1fr;
  }

  .series-filter-main {
    order: 1;
  }

  .series-filter-header {
    align-items: stretch;
  }

  .series-create-btn {
    justify-self: start;
  }

  .series-filter-title {
    font-size: 18px;
  }

  .brand-studio-context-bar,
  .brand-studio-context-bar-compact,
  .knowledge-hub-context-bar,
  .analytics-overview-grid {
    grid-template-columns: 1fr;
  }

  .brand-studio-summary-grid {
    grid-template-columns: 1fr;
  }

  .brand-content-type-grid {
    grid-template-columns: 1fr;
  }

  .brand-studio-hero,
  .brand-studio-toolbar,
  .brand-studio-selection-summary {
    flex-direction: column;
  }

  .knowledge-hub-summary-grid,
  .knowledge-hub-pill-grid {
    grid-template-columns: 1fr;
  }

  .knowledge-hub-hero,
  .knowledge-hub-toolbar {
    flex-direction: column;
  }

  .analytics-summary-grid {
    grid-template-columns: 1fr;
  }

  .analytics-hero,
  .analytics-toolbar {
    flex-direction: column;
  }

  .analytics-filter-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .analytics-channel-metrics {
    grid-template-columns: 1fr;
  }
}

html,
body {
  font-family: 'Pretendard', 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #ff9f3f 0%, #ff7a00 48%, #ff5c00 100%);
  color: #160d05;
  box-shadow: 0 14px 34px rgba(255, 122, 0, 0.22);
}

.btn-secondary {
  background: color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.04) 18%);
  border: 1px solid color-mix(in srgb, var(--border) 72%, rgba(255, 255, 255, 0.18) 28%);
  color: var(--text);
}

[data-theme="dark"] .btn-secondary {
  color: color-mix(in srgb, var(--text) 86%, #9df1e2 14%);
}

.btn-ghost {
  background: color-mix(in srgb, var(--panel) 74%, rgba(255, 255, 255, 0.04) 26%);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  transform: none;
}

.btn-secondary.compact,
.btn-primary.compact {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.brand-studio-page,
.knowledge-hub-page,
.analytics-page,
.content-library-page {
  width: min(1560px, calc(100vw - 32px));
  margin: 0 auto;
  gap: 18px;
  padding: 18px 0 36px;
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero,
.content-library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
  gap: 20px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.14) 22%);
  background:
    radial-gradient(circle at top right, rgba(255, 173, 92, 0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(90, 149, 255, 0.12), transparent 28%),
    linear-gradient(160deg, color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.03) 8%), color-mix(in srgb, var(--bg-2) 86%, var(--panel) 14%));
  box-shadow:
    0 24px 60px rgba(6, 12, 24, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero {
  border: 1px solid rgba(147, 197, 253, 0.28);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.22), transparent 28%),
    radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.18), transparent 24%),
    linear-gradient(150deg, #1d4ed8 0%, #2563eb 45%, #1e40af 100%);
  box-shadow:
    0 26px 60px rgba(20, 49, 124, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.studio-page-hero-main,
.studio-page-hero-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.studio-page-hero-side {
  align-content: stretch;
}

.brand-studio-eyebrow,
.knowledge-hub-eyebrow,
.analytics-eyebrow,
.content-library-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 82%, #ffffff 18%);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-theme="dark"] .brand-studio-eyebrow,
[data-theme="dark"] .knowledge-hub-eyebrow,
[data-theme="dark"] .analytics-eyebrow {
  color: rgba(219, 234, 254, 0.9);
}
[data-theme="light"] .brand-studio-eyebrow,
[data-theme="light"] .knowledge-hub-eyebrow,
[data-theme="light"] .analytics-eyebrow,
[data-theme="light"] .content-library-eyebrow {
  color: var(--accent);
}

.brand-studio-hero h2,
.knowledge-hub-hero h2,
.analytics-hero h2,
.content-library-hero h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  max-width: 12ch;
  font-family: 'Space Grotesk', 'Pretendard', 'Inter', system-ui, sans-serif;
}

.brand-studio-hero h2,
.knowledge-hub-hero h2,
.analytics-hero h2 {
  color: #f8fbff;
}

.brand-studio-description,
.knowledge-hub-description,
.analytics-description,
.content-library-description {
  margin: 0;
  max-width: 760px;
  color: color-mix(in srgb, var(--muted) 84%, #ffffff 16%);
  font-size: 16px;
  line-height: 1.72;
}

.brand-studio-description,
.knowledge-hub-description,
.analytics-description {
  color: rgba(226, 232, 240, 0.86);
}

.studio-hero-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.studio-hero-pill {
  display: inline-grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, rgba(255, 255, 255, 0.2) 28%);
  background: color-mix(in srgb, var(--panel) 80%, rgba(255, 255, 255, 0.04) 20%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.studio-hero-pill em {
  margin: 0;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.studio-hero-pill strong {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.brand-studio-hero .studio-hero-pill,
.knowledge-hub-hero .studio-hero-pill,
.analytics-hero .studio-hero-pill {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-studio-hero .studio-hero-pill em,
.knowledge-hub-hero .studio-hero-pill em,
.analytics-hero .studio-hero-pill em {
  color: rgba(226, 232, 240, 0.78);
}

.brand-studio-hero .studio-hero-pill strong,
.knowledge-hub-hero .studio-hero-pill strong,
.analytics-hero .studio-hero-pill strong {
  color: #f8fbff;
}

.studio-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
}

.studio-kpi-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 152px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, rgba(255, 255, 255, 0.18) 28%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, rgba(255, 255, 255, 0.02) 14%), color-mix(in srgb, var(--bg-2) 92%, rgba(255, 255, 255, 0.02) 8%));
  box-shadow: 0 12px 32px rgba(6, 12, 24, 0.16);
}

.studio-kpi-card:first-child {
  grid-column: span 3;
  grid-row: span 2;
  justify-content: end;
}

.studio-kpi-card:nth-child(2),
.studio-kpi-card:nth-child(3),
.studio-kpi-card:nth-child(4) {
  grid-column: span 1;
}

.studio-kpi-card.is-accent {
  background:
    radial-gradient(circle at top right, rgba(255, 170, 80, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 122, 0, 0.16), color-mix(in srgb, var(--panel) 88%, rgba(255, 255, 255, 0.02) 12%));
  border-color: rgba(255, 157, 61, 0.42);
}

.studio-kpi-card span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.studio-kpi-card strong {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text);
  font-family: 'Space Grotesk', 'Pretendard', 'Inter', system-ui, sans-serif;
}

.studio-kpi-card p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 82%, #ffffff 18%);
  line-height: 1.58;
}

.brand-studio-hero .studio-kpi-card,
.knowledge-hub-hero .studio-kpi-card,
.analytics-hero .studio-kpi-card {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(191, 219, 254, 0.08));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.brand-studio-hero .studio-kpi-card span,
.knowledge-hub-hero .studio-kpi-card span,
.analytics-hero .studio-kpi-card span {
  color: rgba(226, 232, 240, 0.76);
}

.brand-studio-hero .studio-kpi-card strong,
.knowledge-hub-hero .studio-kpi-card strong,
.analytics-hero .studio-kpi-card strong {
  color: #ffffff;
}

.brand-studio-hero .studio-kpi-card p,
.knowledge-hub-hero .studio-kpi-card p,
.analytics-hero .studio-kpi-card p {
  color: rgba(226, 232, 240, 0.82);
}

.brand-studio-hero-actions,
.knowledge-hub-hero-actions,
.analytics-hero-actions,
.content-library-hero-actions,
.content-library-toolbar-actions,
.brand-studio-selection-actions,
.brand-caption-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-studio-context-bar,
.knowledge-hub-context-bar,
.analytics-summary-grid,
.content-library-summary-grid {
  gap: 12px;
}

.analytics-summary-grid,
.content-library-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-studio-context-item:first-child,
.knowledge-hub-context-item:first-child {
  grid-column: span 2;
}

.brand-studio-context-item,
.knowledge-hub-context-item,
.analytics-summary-card,
.content-library-summary-card,
.analytics-overview-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, rgba(255, 255, 255, 0.12) 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.02) 18%), color-mix(in srgb, var(--bg-2) 90%, rgba(255, 255, 255, 0.02) 10%));
  box-shadow: 0 14px 36px rgba(5, 10, 22, 0.14);
}

.brand-studio-context-item span,
.knowledge-hub-context-item span,
.analytics-summary-card span,
.content-library-summary-card span,
.analytics-overview-card span {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-studio-context-item strong,
.knowledge-hub-context-item strong,
.analytics-summary-card strong,
.content-library-summary-card strong,
.analytics-overview-card strong {
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text);
}

.brand-studio-context-item p,
.knowledge-hub-context-item p,
.analytics-summary-card p,
.content-library-summary-card p,
.analytics-overview-card p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, #ffffff 16%);
  line-height: 1.58;
}

.brand-studio-panel,
.knowledge-hub-panel,
.analytics-panel,
.content-library-section,
.brand-studio-disclosure,
.knowledge-hub-disclosure {
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.14) 22%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 84%, rgba(255, 255, 255, 0.02) 16%), color-mix(in srgb, var(--bg-2) 92%, rgba(255, 255, 255, 0.02) 8%));
  box-shadow: 0 20px 48px rgba(5, 10, 22, 0.16);
}

.brand-studio-panel,
.knowledge-hub-panel,
.analytics-panel {
  padding: 20px;
  gap: 16px;
}

.content-library-section {
  padding: 18px;
  gap: 14px;
}

.brand-studio-panel-head,
.knowledge-hub-panel-head,
.analytics-panel-head,
.content-library-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.brand-studio-panel-head h3,
.knowledge-hub-panel-head h3,
.analytics-panel-head h3,
.content-library-section-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.brand-studio-panel-head span,
.knowledge-hub-panel-head span,
.analytics-panel-head span,
.content-library-section-head span {
  font-size: 13px;
  color: var(--muted);
}

.content-library-section-head div {
  display: grid;
  gap: 6px;
}

.content-library-section-head p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 84%, #ffffff 16%);
  line-height: 1.55;
}

.brand-studio-workspace,
.knowledge-hub-workspace {
  gap: 14px;
}

.brand-studio-main,
.brand-studio-side,
.knowledge-hub-main,
.knowledge-hub-side {
  gap: 14px;
}

.brand-studio-side {
  top: 18px;
}

.brand-studio-composer-panel,
.brand-auto-suggestion-panel {
  background:
    radial-gradient(circle at top right, rgba(255, 170, 80, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(255, 122, 0, 0.08), color-mix(in srgb, var(--panel) 90%, rgba(255, 255, 255, 0.02) 10%));
}

.brand-studio-selection-summary,
.brand-asset-selection-summary,
.analytics-filter-summary,
.content-library-toolbar {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.12) 22%);
  background: color-mix(in srgb, var(--panel) 80%, rgba(255, 255, 255, 0.04) 20%);
}

.brand-knowledge-card,
.brand-content-type-card,
.brand-asset-card,
.brand-asset-empty,
.brand-caption-meta > div,
.brand-hashtag-meta > div,
.brand-channel-summary,
.brand-channel-card,
.brand-publish-summary,
.brand-publish-channel-option,
.brand-publish-result-card,
.knowledge-reference-card,
.knowledge-reference-empty,
.knowledge-hub-pill,
.analytics-channel-card,
.analytics-type-card,
.analytics-hashtag-card,
.analytics-recommendation-card,
.analytics-suggestion-card,
.analytics-empty,
.content-library-item,
.content-library-empty-group {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, rgba(255, 255, 255, 0.14) 24%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.02) 18%), color-mix(in srgb, var(--bg-2) 90%, rgba(255, 255, 255, 0.02) 10%));
  box-shadow: 0 14px 36px rgba(5, 10, 22, 0.12);
}

.content-library-grid,
.brand-knowledge-grid,
.brand-content-type-grid,
.brand-asset-grid,
.analytics-channel-grid,
.analytics-type-grid,
.analytics-hashtag-grid,
.analytics-recommendation-grid,
.analytics-suggestion-grid,
.knowledge-reference-grid {
  gap: 12px;
}

.brand-knowledge-grid,
.analytics-recommendation-grid,
.analytics-suggestion-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.brand-content-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-knowledge-card,
.analytics-recommendation-card,
.analytics-suggestion-card {
  grid-column: span 3;
}

.brand-knowledge-card:first-child,
.analytics-recommendation-card:first-child,
.analytics-suggestion-card:first-child {
  grid-column: span 6;
}

.brand-knowledge-card:first-child strong,
.analytics-recommendation-card:first-child h4,
.analytics-suggestion-card:first-child h4 {
  font-size: 20px;
}

.content-library-item,
.content-library-empty-group {
  min-height: 184px;
  padding: 16px;
}

.content-library-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.content-library-section:first-of-type .content-library-item:first-child,
.content-library-section:nth-of-type(3) .content-library-item:first-child,
.content-library-section:nth-of-type(4) .content-library-item:first-child {
  grid-column: span 2;
  min-height: 220px;
}

.content-library-item h4,
.brand-asset-card strong,
.brand-knowledge-card strong,
.knowledge-reference-card strong,
.analytics-recommendation-card h4,
.analytics-suggestion-card h4 {
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.content-library-item p,
.brand-asset-card p,
.knowledge-reference-card p,
.analytics-channel-note,
.analytics-empty,
.analytics-recommendation-card p,
.analytics-suggestion-card p {
  line-height: 1.62;
}

.content-library-item-actions {
  margin-top: auto;
}

.brand-content-type-card,
.brand-asset-card {
  padding: 16px;
}

.brand-content-type-card {
  min-height: 170px;
}

.brand-studio-selection-summary strong,
.brand-asset-selection-summary strong,
.analytics-filter-summary strong {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.brand-content-type-card.is-active,
.brand-asset-card.is-selected,
.analytics-view-tab.is-active,
.brand-asset-filter.is-active {
  border-color: rgba(255, 157, 61, 0.62);
  box-shadow:
    0 18px 40px rgba(255, 122, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand-asset-filter,
.analytics-view-tab {
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, rgba(255, 255, 255, 0.03) 18%);
  border: 1px solid color-mix(in srgb, var(--border) 76%, rgba(255, 255, 255, 0.12) 24%);
}

.analytics-view-tabs {
  gap: 10px;
}

.analytics-view-tab {
  font-weight: 600;
}

.brand-studio-disclosure > summary strong,
.knowledge-hub-disclosure > summary strong {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand-studio-disclosure > summary span,
.knowledge-hub-disclosure > summary span {
  font-size: 13px;
}

.brand-caption-textarea,
.brand-channel-input,
.brand-publish-input,
.analytics-filter-select,
.knowledge-hub-field textarea,
.knowledge-reference-input,
.knowledge-reference-textarea,
.knowledge-character-input,
.knowledge-character-personality {
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, rgba(255, 255, 255, 0.12) 22%);
  background: color-mix(in srgb, var(--panel) 86%, rgba(255, 255, 255, 0.02) 14%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-hub-page .knowledge-hub-field textarea,
.knowledge-hub-page .knowledge-reference-input,
.knowledge-hub-page .knowledge-reference-textarea,
.knowledge-hub-page .knowledge-character-input,
.knowledge-hub-page .knowledge-character-personality {
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.brand-studio-page .brand-caption-textarea,
.brand-studio-page .brand-channel-input,
.brand-studio-page .brand-publish-input {
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

.knowledge-hub-page .knowledge-hub-field textarea:focus,
.knowledge-hub-page .knowledge-reference-input:focus,
.knowledge-hub-page .knowledge-reference-textarea:focus,
.knowledge-hub-page .knowledge-character-input:focus,
.knowledge-hub-page .knowledge-character-personality:focus {
  outline: none;
  border-color: color-mix(in srgb, #ff9a3d 34%, var(--border) 66%);
  box-shadow: 0 0 0 2px rgba(255, 148, 46, 0.14);
}

.brand-studio-page .brand-caption-textarea:focus,
.brand-studio-page .brand-channel-input:focus,
.brand-studio-page .brand-publish-input:focus {
  outline: none;
  border-color: color-mix(in srgb, #ff9a3d 34%, var(--border) 66%);
  box-shadow: 0 0 0 2px rgba(255, 148, 46, 0.14);
}

.knowledge-hub-field textarea,
.knowledge-reference-textarea,
.brand-caption-textarea {
  min-height: 156px;
}

.knowledge-character-input,
.analytics-filter-select,
.knowledge-reference-input,
.brand-channel-input,
.brand-publish-input,
.knowledge-character-personality {
  min-height: 48px;
}

.knowledge-character-personality {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  font: inherit;
  color: var(--text);
}

.brand-studio-disclosure > summary,
.knowledge-hub-disclosure > summary {
  padding: 18px 20px;
  background: color-mix(in srgb, var(--panel) 78%, rgba(255, 255, 255, 0.03) 22%);
}

.brand-studio-disclosure-body .disclosure-inner,
.knowledge-hub-disclosure-body .disclosure-inner {
  padding: 0 20px 20px;
}

.analytics-filter-grid,
.knowledge-hub-form-grid {
  gap: 12px;
}

.analytics-channel-top,
.brand-asset-card-top,
.knowledge-reference-top,
.content-library-item-top {
  align-items: flex-start;
}

.content-library-status,
.brand-channel-badge,
.analytics-channel-badge,
.knowledge-reference-badge,
.content-library-badge {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
}

@media (max-width: 1200px) {
  .brand-studio-hero,
  .knowledge-hub-hero,
  .analytics-hero,
  .content-library-hero {
    grid-template-columns: 1fr;
  }

  .studio-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .studio-kpi-card:first-child {
    grid-column: span 4;
    grid-row: auto;
  }

  .studio-kpi-card:nth-child(2),
  .studio-kpi-card:nth-child(3),
  .studio-kpi-card:nth-child(4) {
    grid-column: span 2;
  }

  .analytics-summary-grid,
  .content-library-summary-grid,
  .brand-studio-context-bar,
  .knowledge-hub-context-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-knowledge-grid,
  .brand-content-type-grid,
  .analytics-recommendation-grid,
  .analytics-suggestion-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-knowledge-card,
  .analytics-recommendation-card,
  .analytics-suggestion-card,
  .brand-knowledge-card:first-child,
  .analytics-recommendation-card:first-child,
  .analytics-suggestion-card:first-child {
    grid-column: span 1;
  }
}

@media (max-width: 980px) {
  .brand-studio-page,
  .knowledge-hub-page,
  .analytics-page,
  .content-library-page {
    gap: 14px;
    padding-top: 14px;
  }

  .brand-studio-hero,
  .knowledge-hub-hero,
  .analytics-hero,
  .content-library-hero {
    padding: 22px;
    border-radius: 26px;
  }

  .studio-kpi-grid,
  .analytics-summary-grid,
  .content-library-summary-grid,
  .brand-studio-context-bar,
  .knowledge-hub-context-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-studio-context-item:first-child,
  .knowledge-hub-context-item:first-child {
    grid-column: span 2;
  }

  .brand-studio-workspace,
  .knowledge-hub-workspace,
  .analytics-overview-grid {
    grid-template-columns: 1fr;
  }

  .content-library-section:first-of-type .content-library-item:first-child,
  .content-library-section:nth-of-type(3) .content-library-item:first-child,
  .content-library-section:nth-of-type(4) .content-library-item:first-child {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .brand-studio-hero,
  .knowledge-hub-hero,
  .analytics-hero,
  .content-library-hero {
    padding: 18px;
  }

  .studio-kpi-grid,
  .analytics-summary-grid,
  .content-library-summary-grid,
  .brand-studio-context-bar,
  .knowledge-hub-context-bar,
  .analytics-overview-grid,
  .analytics-recommendation-grid,
  .analytics-suggestion-grid {
    grid-template-columns: 1fr;
  }

  .studio-kpi-card {
    min-height: 0;
  }

  .studio-kpi-card:first-child,
  .studio-kpi-card:nth-child(2),
  .studio-kpi-card:nth-child(3),
  .studio-kpi-card:nth-child(4),
  .brand-studio-context-item:first-child,
  .knowledge-hub-context-item:first-child {
    grid-column: span 1;
  }

  .brand-studio-panel,
  .knowledge-hub-panel,
  .analytics-panel,
  .content-library-section {
    padding: 16px;
  }

  .brand-studio-panel-head,
  .knowledge-hub-panel-head,
  .analytics-panel-head,
  .content-library-section-head {
    flex-direction: column;
  }

  .brand-knowledge-grid,
  .brand-content-type-grid,
  .analytics-recommendation-grid,
  .analytics-suggestion-grid {
    grid-template-columns: 1fr;
  }
}

.btn-primary,
.btn-secondary,
.btn-ghost {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 12px;
}

.btn-secondary.compact,
.btn-primary.compact {
  min-height: 32px;
  padding: 6px 10px;
}

.brand-studio-disclosure > summary,
.knowledge-hub-disclosure > summary {
  padding: 14px 16px;
}

/* padding은 .disclosure-inner에만 적용 — 그리드 컨테이너에 패딩이 있으면 0fr 상태에서도 높이가 남음 */

.brand-studio-selection-summary,
.brand-asset-selection-summary,
.analytics-filter-summary,
.content-library-toolbar {
  padding: 12px 14px;
  border-radius: 16px;
}

.brand-studio-selection-summary strong,
.brand-asset-selection-summary strong,
.analytics-filter-summary strong {
  font-size: 18px;
}

.content-library-toolbar {
  align-items: flex-start;
}

.content-library-toolbar-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.content-library-type-tabs {
  gap: 8px;
}

.content-library-section-foot {
  display: flex;
  justify-content: center;
}

.analytics-panel-embedded {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand-studio-quickstart-panel .brand-studio-check {
  padding: 12px;
  border-radius: 16px;
}

.brand-studio-hero-actions .btn-primary {
  box-shadow: 0 10px 24px rgba(255, 122, 0, 0.18);
}

.brand-caption-actions,
.brand-studio-selection-actions,
.content-library-toolbar-actions,
.analytics-view-tabs,
.brand-asset-filter-row {
  gap: 8px;
}

@media (max-width: 980px) {
  .brand-studio-page,
  .knowledge-hub-page,
  .analytics-page,
  .content-library-page {
    width: 100%;
    padding-top: 0;
  }

  .brand-studio-hero,
  .knowledge-hub-hero,
  .analytics-hero,
  .content-library-hero {
    padding: 16px;
  }
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero,
.content-library-hero,
.brand-studio-panel,
.knowledge-hub-panel,
.analytics-panel,
.content-library-section,
.brand-studio-disclosure,
.knowledge-hub-disclosure,
.brand-knowledge-card,
.brand-content-type-card,
.brand-asset-card,
.brand-asset-empty,
.brand-caption-meta > div,
.brand-hashtag-meta > div,
.brand-channel-summary,
.brand-channel-card,
.brand-publish-summary,
.brand-publish-channel-option,
.brand-publish-result-card,
.knowledge-reference-card,
.knowledge-reference-empty,
.analytics-channel-card,
.analytics-type-card,
.analytics-hashtag-card,
.analytics-recommendation-card,
.analytics-suggestion-card,
.analytics-empty,
.content-library-item,
.content-library-empty-group,
.studio-kpi-card {
  border-radius: 10px;
}

.brand-studio-hero,
.knowledge-hub-hero,
.analytics-hero,
.content-library-hero {
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(5, 10, 22, 0.16);
}

.brand-studio-context-item,
.knowledge-hub-context-item,
.analytics-summary-card,
.content-library-summary-card,
.analytics-overview-card {
  padding: 10px 0 10px 14px;
  border-radius: 0;
  border: 0;
  border-left: 3px solid color-mix(in srgb, var(--border) 58%, var(--accent) 42%);
  background: transparent;
  box-shadow: none;
}

.brand-studio-context-item:first-child,
.knowledge-hub-context-item:first-child,
.analytics-summary-card:first-child,
.content-library-summary-card:first-child {
  border-left-color: var(--accent);
}

.brand-studio-context-bar,
.knowledge-hub-context-bar,
.analytics-summary-grid,
.content-library-summary-grid {
  padding: 2px 0;
}

.knowledge-hub-context-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: start;
}

.brand-studio-context-bar,
.analytics-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: start;
}

.brand-studio-context-item:first-child {
  grid-column: auto;
}

.knowledge-hub-context-item:first-child {
  grid-column: auto;
}

.brand-studio-context-item,
.knowledge-hub-context-item {
  grid-template-rows: auto auto 1fr;
  align-content: start;
  align-items: start;
  min-height: 132px;
  height: 100%;
}

.analytics-summary-card {
  grid-template-rows: auto auto 1fr;
  align-content: start;
  align-items: start;
  min-height: 132px;
  height: 100%;
}

.brand-studio-context-item span,
.brand-studio-context-item strong,
.brand-studio-context-item p,
.knowledge-hub-context-item span,
.knowledge-hub-context-item strong,
.knowledge-hub-context-item p,
.analytics-summary-card span,
.analytics-summary-card strong,
.analytics-summary-card p {
  align-self: start;
}

.studio-kpi-grid {
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}

.studio-kpi-card {
  min-height: 0;
  padding: 12px;
  gap: 6px;
  justify-items: end;
  text-align: right;
  box-shadow: none;
  background: color-mix(in srgb, var(--panel) 86%, rgba(255, 255, 255, 0.02) 14%);
}

.studio-kpi-card:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
  padding: 14px;
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 122, 0, 0.08), color-mix(in srgb, var(--panel) 92%, rgba(255, 255, 255, 0.01) 8%));
  box-shadow: 0 10px 26px rgba(255, 122, 0, 0.1);
}

.studio-kpi-card:nth-child(2),
.studio-kpi-card:nth-child(3),
.studio-kpi-card:nth-child(4) {
  grid-column: 2;
}

.knowledge-hub-hero .studio-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-studio-hero .studio-kpi-grid,
.analytics-hero .studio-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-studio-hero .studio-kpi-card,
.analytics-hero .studio-kpi-card,
.knowledge-hub-hero .studio-kpi-card {
  min-height: 102px;
  align-content: start;
  justify-items: end;
}

.brand-studio-hero .studio-kpi-card:first-child,
.analytics-hero .studio-kpi-card:first-child,
.knowledge-hub-hero .studio-kpi-card:first-child {
  grid-column: auto;
  grid-row: auto;
  padding: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(191, 219, 254, 0.08));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.brand-studio-hero .studio-kpi-card:nth-child(2),
.brand-studio-hero .studio-kpi-card:nth-child(3),
.brand-studio-hero .studio-kpi-card:nth-child(4),
.analytics-hero .studio-kpi-card:nth-child(2),
.analytics-hero .studio-kpi-card:nth-child(3),
.analytics-hero .studio-kpi-card:nth-child(4),
.knowledge-hub-hero .studio-kpi-card:nth-child(2),
.knowledge-hub-hero .studio-kpi-card:nth-child(3),
.knowledge-hub-hero .studio-kpi-card:nth-child(4) {
  grid-column: auto;
}

.brand-studio-workspace {
  grid-template-columns: minmax(420px, 0.94fr) minmax(0, 1.06fr);
  gap: 12px;
}

.brand-studio-side {
  position: static;
  top: auto;
  order: -1;
}

.brand-studio-composer-panel {
  border-left: 3px solid var(--accent);
  box-shadow: 0 14px 32px rgba(255, 122, 0, 0.12);
}

.brand-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-modal-overlay.hidden { display: none; }
.brand-modal-box {
  background: var(--surface, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 24px;
  width: 480px;
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
}
.brand-modal-box h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
.brand-modal-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.brand-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
}
.brand-modal-label small {
  font-size: 11px;
  opacity: 0.7;
}
.brand-modal-label input,
.brand-modal-label textarea {
  margin-top: 2px;
}

.sidebar-actions .screen-toggle:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 3.75H4.75V7M20 8V4.75h-3.25M16 20.25h3.25V17M4 16v3.25H7.25' stroke='%23F5F7FD' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sidebar-actions .screen-toggle.is-fullscreen:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.25 9.25H4.75V4.75M9.25 9.25 4.75 4.75M14.75 9.25H19.25V4.75M14.75 9.25 19.25 4.75M14.75 14.75H19.25V19.25M14.75 14.75 19.25 19.25M9.25 14.75H4.75V19.25M9.25 14.75 4.75 19.25' stroke='%23F5F7FD' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ================================================
   BSF — Brand Studio Flow (2-card layout)
   ================================================ */

.brand-studio-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 24px;
}

#brand-studio-root {
  padding: 0 24px;
  box-sizing: border-box;
}

/* ── Brand Studio 초기 진입 스피너 ─────────────────────────────────────── */
.bsf-init-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.bsf-init-spinner-ring {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bsf-spin 0.75s linear infinite;
}
.bsf-save-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 12, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  animation: bsfSaveOverlayIn 0.18s ease both;
}
.bsf-save-overlay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.bsf-save-overlay-ring {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bsf-spin 0.75s linear infinite;
}
.bsf-save-overlay-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@keyframes bsfSaveOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 콘텐츠 등장 — translateY 없이 opacity 페이드만 (레이아웃 이동 0) ─── */
.brand-studio-page {
  animation: bsfPageIn 0.22s ease forwards;
}
@keyframes bsfPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Top card: Flow ---- */
.bsf-flow-card {
  position: relative;
  border: 1px solid color-mix(in srgb, rgba(255, 140, 0, 0.42) 68%, var(--border) 32%);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 152, 59, 0.2), transparent 34%),
    radial-gradient(circle at bottom left, rgba(94, 170, 255, 0.08), transparent 30%),
    var(--studio-hero-bg);
  box-shadow: 0 18px 36px rgba(255, 140, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.bsf-flow-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 12px;
}

.bsf-flow-title-group {
  flex-shrink: 0;
}

.bsf-title {
  margin: 4px 0 6px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

.bsf-desc {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  max-width: 520px;
}

.bsf-flow-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
  align-self: stretch;
}

.bsf-head-btn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 4px;
  white-space: normal;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 12px;
  min-width: unset !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Timeline ---- */
.bsf-timeline {
  display: flex;
  align-items: center;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.bsf-timeline::-webkit-scrollbar { display: none; }

.bsf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px 10px;
  min-width: 80px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 10px;
  color: var(--text-3);
  position: relative;
}
.bsf-step:hover { background: var(--bg-3); }

.bsf-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-3);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bsf-step-dot::before { content: attr(data-num); }

.bsf-step-name {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.bsf-step-val {
  font-size: 10px;
  font-style: normal;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.bsf-step.is-done .bsf-step-dot {
  border-color: var(--accent);
  background: transparent;
  color: var(--accent);
}
.bsf-step.is-done .bsf-step-dot::before { content: '✓'; font-size: 12px; }
.bsf-step.is-done { color: var(--text); }

.bsf-step.is-active .bsf-step-dot {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent 75%);
}
.bsf-step.is-active { color: var(--text); }
.bsf-step.is-active .bsf-step-name { color: var(--accent); }

.bsf-step-line {
  width: 40px;
  min-width: 16px;
  max-width: 60px;
  height: 2px;
  background: var(--border);
  align-self: center;
  margin: 0 2px;
  border-radius: 1px;
  flex-shrink: 1;
}

/* ---- Control bar ---- */
.bsf-ctrl-bar {
  padding: 8px 16px;
  background: var(--bg);
}

.bsf-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bsf-ctrl-hint {
  font-size: 12px;
  color: var(--text-3);
  flex: 1;
}

.bsf-ctrl-info {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.bsf-ctrl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bsf-ctrl-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ---- Bottom card: Detail ---- */
.bsf-detail-card {
  border: none;
  border-radius: 20px;
  background: var(--bg-2);
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  min-height: 320px;
}

.bsf-detail {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  opacity: 0;
  transition: opacity 0.18s ease;
  position: relative;
}

/* 탭 전환 로딩 스피너 */
.bsf-step-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 50;
  border-radius: 14px;
  pointer-events: none;
}
.bsf-step-spinner-ring {
  width: 34px;
  height: 34px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bsf-spin 0.75s linear infinite;
}
@keyframes bsf-spin {
  to { transform: rotate(360deg); }
}
.bsf-detail.is-active {
  display: flex;
  opacity: 1;
}
/* 패널 진입 애니메이션 — translateY 제거: 레이아웃 흔들림 없이 opacity만 */
@keyframes bsfPanelIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bsf-detail.is-active {
  animation: bsfPanelIn 0.14s ease forwards;
}

.bsf-detail-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.bsf-detail-head strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.bsf-detail-head span {
  font-size: 12px;
  color: var(--text-3);
}

/* Step 1 — asset header with clear button spanning title+subtitle height */
.bsf-detail-head-asset {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
}
.bsf-detail-head-asset > strong { grid-column: 1; grid-row: 1; }
.bsf-detail-head-asset > span   { grid-column: 1; grid-row: 2; }
.bsf-detail-head-asset > button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}

/* Step 3 — draft header with inline tabs */
.bsf-detail-head-draft { gap: 8px; }
.bsf-draft-head-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.bsf-draft-head-row > strong {
  grid-column: 1;
  justify-self: start;
}
.bsf-draft-head-row > .bsf-draft-tabs {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding-bottom: 0;
  margin: 0;
}

/* Step 3 — Draft regen button in header */
.bsf-draft-regen-head {
  grid-column: 3;
  justify-self: end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-3, #1e2030);
  border: 1px solid rgba(255,255,255,0.08);
  color: #60a5fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.bsf-draft-regen-head:hover {
  background: rgba(96,165,250,0.15);
  box-shadow: 0 0 0 2px rgba(96,165,250,0.3);
}
.bsf-draft-regen-head:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Step 3 — Per-card AI refine bar */
.bsf-refine-bar {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
}
.bsf-refine-input-wrap {
  position: relative;
  flex: 1;
}
.bsf-refine-input {
  width: 100%;
  height: 32px;
  padding: 0 40px 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.bsf-refine-input:focus { border-color: var(--accent); }
.bsf-refine-input::placeholder { color: var(--text-3); }
.bsf-refine-btn {
  position: absolute;
  right: 2px;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.bsf-card-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border: none;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  color: #0b0b0b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.bsf-refine-btn:hover,
.bsf-card-gen-btn:hover { opacity: 0.85; }
.bsf-refine-btn:disabled,
.bsf-card-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Step 3 — Draft media preview */
.bsf-draft-media-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.bsf-dmp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bsf-dmp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 3px;
  min-width: 38px;
}
.bsf-dmp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bsf-dmp-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.bsf-dmp-vid-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bsf-dmp-vid {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}
.bsf-dmp-vid-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}
.bsf-dmp-story {
  align-items: flex-start;
}
.bsf-dmp-story-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

/* Step 3 — Blog structure preview */
.bsf-blog-struct {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bsf-blog-struct-head { margin-bottom: 2px; }
.bsf-blog-img-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bsf-blog-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.bsf-blog-para {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.bsf-caption-tall { min-height: 160px; }
.bsf-caption-tall { min-height: 160px; }

/* ── AI 재생성 스켈레톤 로딩 ──────────────────────────────────────────── */
.bsf-ce.bsf-skeleton,
input.bsf-skeleton,
textarea.bsf-skeleton {
  color: transparent !important;
  background: linear-gradient(90deg, #1a2133 25%, #2d3a50 50%, #1a2133 75%);
  background-size: 200% 100%;
  animation: bsf-shimmer 1.2s linear infinite;
  pointer-events: none;
  user-select: none;
  border-color: transparent !important;
}
.bsf-ce.bsf-skeleton { min-height: 48px; }
[data-theme="light"] .bsf-ce.bsf-skeleton,
[data-theme="light"] input.bsf-skeleton,
[data-theme="light"] textarea.bsf-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
  background-size: 200% 100%;
}
@keyframes bsf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── D단계 추가 필드 공통 ──────────────────────────────────────────────── */
.bsf-input-textarea {
  width: 100%;
  min-height: 72px;
  background: var(--input-bg, #0f1624);
  border: 1px solid var(--border, #2d3748);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 13px;
  padding: 8px 10px;
  margin-top: 4px;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
}
.bsf-input-textarea:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}
.bsf-input-textarea::placeholder { color: var(--muted); }

.bsf-select,
.bsf-input-text,
.bsf-input-url,
.bsf-input-datetime {
  width: 100%;
  background: var(--input-bg, #0f1624);
  border: 1px solid var(--border, #2d3748);
  border-radius: 6px;
  color: var(--text, #e2e8f0);
  padding: 6px 10px;
  font-size: 13px;
  margin-top: 4px;
  box-sizing: border-box;
}
.bsf-select:focus,
.bsf-input-text:focus,
.bsf-input-url:focus,
.bsf-input-datetime:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}
.bsf-input-text::placeholder,
.bsf-input-url::placeholder,
.bsf-input-datetime::placeholder { color: var(--muted); }

/* ── Custom DateTime Picker ───────────────────────────────────────────────── */
.bsf-dt-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bsf-dt-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--input-bg, #0f1624);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.14s;
}
.bsf-dt-trigger:hover,
.bsf-dt-picker.is-open .bsf-dt-trigger { border-color: var(--accent); }
.bsf-dt-txt { flex: 1; }
.bsf-dt-del {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 5px;
  transition: color 0.12s;
  line-height: 1;
}
.bsf-dt-del:hover { color: #ef4444; }

/* Popup — position/top/bottom/left are overridden to fixed via JS for smart placement */
.bsf-dt-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg-2, #141a2b);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  min-width: 270px;
}
.bsf-dt-picker.is-open .bsf-dt-popup { display: block; }

/* Month navigation */
.bsf-dt-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bsf-dt-nav-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 16px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bsf-dt-nav-btn:hover { background: var(--bg-3, #1e2030); color: var(--text); }
.bsf-dt-mo-lbl { font-size: 13px; font-weight: 700; color: var(--text); }

/* Day headers + grid */
.bsf-dt-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.bsf-dt-dow > span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 0;
}
.bsf-dt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 12px;
}
.bsf-dt-empty { aspect-ratio: 1; }
.bsf-dt-day {
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.bsf-dt-day:hover:not(:disabled) { background: var(--bg-3, #1e2030); color: var(--text); }
.bsf-dt-day.is-today { color: var(--accent); font-weight: 700; }
.bsf-dt-day.is-sel { background: var(--accent) !important; color: #fff !important; }
.bsf-dt-day.is-past { opacity: 0.35; cursor: not-allowed; }

/* Time picker */
.bsf-dt-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 10px;
}
.bsf-dt-time-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bsf-dt-spin {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-3);
  font-size: 8px;
  width: 38px; height: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.bsf-dt-spin:hover { background: var(--bg-3, #1e2030); color: var(--text); }
.bsf-dt-tinp {
  width: 44px;
  background: var(--bg-3, #1e2030);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 5px 0;
  -moz-appearance: textfield;
}
.bsf-dt-tinp::-webkit-inner-spin-button,
.bsf-dt-tinp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bsf-dt-tinp:focus { outline: none; border-color: var(--accent); }
.bsf-dt-time-sep { font-size: 22px; font-weight: 700; color: var(--text-2); }

/* Footer */
.bsf-dt-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.bsf-dt-foot-del {
  font-size: 12px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  transition: color 0.12s;
}
.bsf-dt-foot-del:hover { color: #ef4444; }
.bsf-dt-foot-today {
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  padding: 4px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.bsf-dt-foot-today:hover { background: rgba(255,154,61,0.1); }
.bsf-dt-foot-now {
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff7a00, #ff9f3a);
  border: none;
  color: #0b0b0b;
  border-radius: 5px;
  padding: 4px 14px;
  cursor: pointer;
  transition: opacity 0.12s;
}
.bsf-dt-foot-now:hover { opacity: 0.85; }
/* 라디오 그룹 */
.bsf-radio-group { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.bsf-radio-group label { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.bsf-radio-group label:hover { color: var(--text); }
.bsf-radio-group input[type="radio"] { accent-color: var(--accent, #6366f1); cursor: pointer; }
/* 토글 스위치 */
.bsf-toggle-wrap { margin-left: auto; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; }
.bsf-toggle-input { display: none; }
.bsf-toggle {
  width: 36px; height: 20px;
  background: #3a3a4a;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}
.bsf-toggle::after {
  content: '';
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: left 0.2s;
}
.bsf-toggle-input:checked + .bsf-toggle { background: #22c55e; }
.bsf-toggle-input:checked + .bsf-toggle::after { left: 19px; }
/* 예약 datetime 조건부 */
.bsf-scheduled-row { display: none; }

/* ── Step 3 — 3-tier field system ─────────────────────────────────────── */
.bsf-preview-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.bsf-preview-legend .bsf-legend-txt {
  font-size: 11px;
  font-weight: 600;
  color: #4a90c4;
  letter-spacing: 0.03em;
  margin-right: 10px;
}
.bsf-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}
.bsf-badge-auto    { background: #14391f; color: #4ade80; }
.bsf-badge-copy    { background: #3d2200; color: #fbbf24; }
.bsf-badge-preview { background: #1e293b; color: #94a3b8; }

/* Field wrappers */
.bsf-field { margin-bottom: 16px; }
.bsf-field-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.bsf-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bsf-field-auto    { border-left: 2px solid #4ade80; padding-left: 10px; }
.bsf-field-preview { border-left: 2px solid #475569; padding-left: 10px; }
.bsf-field-copy {
  border-left: 2px solid #f59e0b;
  padding-left: 10px;
  background: rgba(245, 158, 11, 0.04);
  border-radius: 0 6px 6px 0;
}

/* COPY 티어 복사 버튼 */
.bsf-field-copy .bsf-field-hd { margin-bottom: 6px; }
.bsf-copy-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid #f59e0b;
  border-radius: 4px;
  color: #fbbf24;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.bsf-copy-btn:hover {
  background: #f59e0b;
  color: #000;
}
.bsf-copy-btn.copied {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* Contenteditable fields */
.bsf-ce {
  width: 100%;
  min-height: 64px;
  padding: 8px 11px;
  background: var(--input-bg, #0f1624);
  border: 1px solid var(--border, #2d3748);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.bsf-ce:focus { border-color: var(--accent, #f97316); }
.bsf-ce:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.bsf-ce[data-rows="1"] { min-height: 38px; }
.bsf-ce[data-rows="2"] { min-height: 56px; }
.bsf-ce[data-rows="4"] { min-height: 96px; }
.bsf-ce[data-rows="5"] { min-height: 120px; }
.bsf-ce[data-rows="6"] { min-height: 144px; }
.bsf-ce[data-rows="8"] { min-height: 192px; }

/* Character count (X/Threads) */
.bsf-charcount-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.bsf-charcount      { font-size: 11px; color: var(--muted); }
.bsf-charcount.warn { color: #fbbf24; }
.bsf-charcount.over { color: #ef4444; }

/* ── Format guide button ─────────────────────────────────────────────── */
.bsf-format-guide-btn {
  background: transparent;
  border: none;
  padding: 3px;
  cursor: pointer;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  transition: color 0.15s;
}
.bsf-format-guide-btn:hover { color: var(--accent); }

/* ── Format guide modal ───────────────────────────────────────────────── */
#bsf-format-guide-modal .bsf-fg-modal-box {
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.bsf-fg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.bsf-fg-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--layer-soft);
  padding: 10px 12px;
}
.bsf-fg-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.bsf-fg-item-conds {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: disc;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ── Platform mockup base ─────────────────────────────────────────────── */
.bsf-mockup {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a1a;
  max-width: 100%;
}
.bsf-mock-media-empty {
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: 22px; background: #fafafa;
}

/* Instagram */
.bsf-mock-ig { background: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; width: 100%; margin: 0; max-height: calc(100cqh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.bsf-mock-ig-hd { display: flex; align-items: center; padding: 10px 12px; gap: 10px; border-bottom: 1px solid #efefef; flex-shrink: 0; }
.bsf-mock-ig-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border: 2px solid #fff; outline: 2px solid #e1306c; flex-shrink: 0; }
.bsf-mock-ig-uname { font-size: 13px; font-weight: 600; color: #111; flex: 1; }
.bsf-mock-ig-follow { font-size: 13px; font-weight: 600; color: #0095f6; }
.bsf-mock-ig-dots { font-size: 18px; color: #111; margin-left: 8px; cursor: default; }
.bsf-mock-ig-slider { flex: 1; min-height: 0; overflow: hidden; position: relative; cursor: grab; user-select: none; }
.bsf-mock-ig-slider:active { cursor: grabbing; }
.bsf-mock-ig-slides { display: flex; height: 100%; transition: transform 0.3s ease; will-change: transform; }
.bsf-mock-ig-slide { width: 100%; flex-shrink: 0; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bsf-mock-ig-slide-empty { background: #fafafa; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #dbdbdb; }
.bsf-mock-ig-dot { width: 5px; height: 5px; border-radius: 50%; background: #dbdbdb; flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.bsf-mock-ig-dot.active { background: #0095f6; }
.bsf-mock-ig-dots-row { display: flex; justify-content: center; gap: 4px; padding: 4px 0 2px; flex-shrink: 0; }
.bsf-mock-ig-actions { display: flex; align-items: center; padding: 6px 12px 2px; gap: 12px; flex-shrink: 0; }
.bsf-mock-ig-action-icon { color: #111; cursor: default; display: flex; align-items: center; line-height: 1; }
.bsf-mock-ig-save { margin-left: auto; color: #111; display: flex; align-items: center; line-height: 1; }
.bsf-mock-ig-likes { padding: 2px 12px; font-size: 12px; font-weight: 600; color: #111; flex-shrink: 0; }
.bsf-mock-ig-caption { padding: 2px 12px 4px; font-size: 12px; color: #111; line-height: 1.4; flex-shrink: 0; }
.bsf-mock-ig-caption strong { margin-right: 4px; }
.bsf-mock-ig-caption .more { color: #8e8e8e; }
.bsf-mock-ig-comment { padding: 2px 12px 4px; font-size: 11px; color: #8e8e8e; flex-shrink: 0; }
.bsf-mock-ig-time { padding: 0 12px 8px; font-size: 10px; color: #8e8e8e; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0; }

/* YouTube */
.bsf-mock-yt { background: #fff; }
.bsf-mock-yt-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #0f0f0f; overflow: hidden; }
.bsf-mock-yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsf-mock-yt-player { width: 100%; height: 100%; display: block; background: #000; }
.bsf-mock-yt-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); color: #fff; font-size: 11px; font-weight: 600; padding: 1px 4px; border-radius: 3px; }
.bsf-mock-yt-meta { display: flex; gap: 10px; padding: 10px 12px 8px; align-items: flex-start; }
.bsf-mock-yt-ch-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e0e0e0; flex-shrink: 0; }
.bsf-mock-yt-info { flex: 1; min-width: 0; }
.bsf-mock-yt-title { font-size: 13px; font-weight: 600; color: #0f0f0f; line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bsf-mock-yt-ch-name { font-size: 12px; color: #606060; margin-bottom: 1px; }
.bsf-mock-yt-stats { font-size: 12px; color: #606060; }

/* TikTok */
.bsf-mock-tiktok { position: relative; aspect-ratio: 9/16; max-height: calc(100cqh - 40px); background: #000; border-radius: 12px; overflow: hidden; }
.bsf-mock-tiktok-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsf-mock-tiktok-vid-empty { width: 100%; height: 100%; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.bsf-mock-tiktok-sidebar { position: absolute; right: 10px; bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bsf-mock-tiktok-sidebar-item { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; }
.bsf-mock-tiktok-avatar { width: 40px; height: 40px; border-radius: 50%; background: #fe2c55; border: 2px solid #fff; flex-shrink: 0; }
.bsf-mock-tiktok-sub-btn { width: 18px; height: 18px; background: #fe2c55; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; margin-top: -10px; line-height: 1; }
.bsf-mock-tiktok-sidebar-icon { display: flex; align-items: center; justify-content: center; }
.bsf-mock-tiktok-sidebar-count { font-size: 11px; font-weight: 600; }
.bsf-mock-action-item { display: inline-flex; align-items: center; gap: 4px; }
.bsf-mock-tiktok-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
.bsf-mock-tiktok-username { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.bsf-mock-tiktok-caption { font-size: 13px; color: #fff; line-height: 1.4; }
.bsf-mock-tiktok-music { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #fff; }
.bsf-mock-tiktok-music-note { flex-shrink: 0; }
.bsf-mock-tiktok-music-track { flex: 1; min-width: 0; overflow: hidden; }
.bsf-mock-tiktok-music-text { white-space: nowrap; animation: bsf-marquee 8s linear infinite; display: inline-block; }
@keyframes bsf-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-60px); } }

/* YouTube Shorts */
.bsf-mock-shorts { position: relative; aspect-ratio: 9/16; max-height: calc(100cqh - 40px); background: #000; border-radius: 12px; overflow: hidden; }
.bsf-mock-shorts-vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.bsf-mock-shorts-vid-empty { width: 100%; height: 100%; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; }
.bsf-mock-shorts-sidebar { position: absolute; right: 8px; bottom: 80px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bsf-mock-shorts-sidebar-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; }
.bsf-mock-shorts-avatar { width: 36px; height: 36px; border-radius: 50%; background: #ff0000; border: 2px solid #fff; flex-shrink: 0; }
.bsf-mock-shorts-sub-btn { width: 18px; height: 18px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #ff0000; margin-top: -10px; line-height: 1; }
.bsf-mock-shorts-sidebar-icon { display: flex; align-items: center; justify-content: center; }
.bsf-mock-shorts-sidebar-count { font-size: 11px; font-weight: 600; color: #fff; }
.bsf-mock-shorts-overlay { position: absolute; bottom: 0; left: 0; right: 56px; padding: 40px 12px 16px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.bsf-mock-shorts-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.bsf-mock-shorts-ch-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bsf-mock-shorts-ch { font-size: 13px; font-weight: 600; color: #fff; }
.bsf-mock-shorts-sub { background: #fff; color: #000; border: none; border-radius: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; cursor: default; flex-shrink: 0; }
.bsf-mock-shorts-music { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.bsf-mock-shorts-music > svg { flex-shrink: 0; }
.bsf-mock-shorts-music-track { flex: 1; min-width: 0; overflow: hidden; }
.bsf-mock-shorts-music-text { white-space: nowrap; animation: bsf-marquee 8s linear infinite; display: inline-block; }

/* X / Threads */
.bsf-mock-x { background: #fff; padding: 14px; }
.bsf-mock-x-hd { display: flex; gap: 10px; margin-bottom: 4px; }
.bsf-mock-x-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1d9bf0; flex-shrink: 0; }
.bsf-mock-x-meta { flex: 1; }
.bsf-mock-x-name { font-size: 14px; font-weight: 700; color: #0f1419; }
.bsf-mock-x-handle { font-size: 13px; color: #536471; }
.bsf-mock-x-body { font-size: 15px; color: #0f1419; line-height: 1.55; margin-bottom: 10px; padding-left: 50px; }
.bsf-mock-x-media { margin: 0 0 10px 50px; border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; display: grid; gap: 2px; }
.bsf-mock-x-media--1 { grid-template-columns: 1fr; }
.bsf-mock-x-media--2 { grid-template-columns: 1fr 1fr; }
.bsf-mock-x-media--3 { grid-template-columns: 1fr 1fr; }
.bsf-mock-x-media--4 { grid-template-columns: 1fr 1fr; }
.bsf-mock-x-media--3 .bsf-mock-x-media-el:first-child { grid-row: span 2; }
.bsf-mock-x-media-el { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 280px; background: #000; }
.bsf-mock-x-media--1 .bsf-mock-x-media-el { max-height: 320px; }
.bsf-mock-x-actions { display: flex; gap: 20px; padding-left: 50px; font-size: 13px; color: #536471; margin-bottom: 6px; align-items: center; }
.bsf-mock-x-action { display: inline-flex; align-items: center; gap: 4px; }
.bsf-mock-x-counter { font-size: 11px; color: #536471; text-align: right; padding-top: 6px; border-top: 1px solid #eff3f4; }
/* Threads 이미지 캐러셀 */
.bsf-mock-x-carousel { margin: 0 0 10px 50px; }
.bsf-mock-x-slider { border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; position: relative; cursor: grab; user-select: none; height: 280px; background: #000; }
.bsf-mock-x-slider:active { cursor: grabbing; }
.bsf-mock-x-slides { display: flex; height: 100%; transition: transform 0.3s ease; will-change: transform; }
.bsf-mock-x-slide { width: 100%; flex-shrink: 0; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.bsf-mock-x-dots-row { display: flex; justify-content: center; gap: 4px; padding: 6px 0 2px; }
.bsf-mock-x-dot { width: 5px; height: 5px; border-radius: 50%; background: #cfd9de; flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.bsf-mock-x-dot.active { background: #1d9bf0; }

/* Facebook */
.bsf-mock-fb { background: #fff; }
.bsf-mock-fb-hd { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 8px; }
.bsf-mock-fb-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1877f2; flex-shrink: 0; }
.bsf-mock-fb-meta { flex: 1; }
.bsf-mock-fb-name { font-size: 14px; font-weight: 600; color: #050505; }
.bsf-mock-fb-sub { font-size: 12px; color: #65676b; }
.bsf-mock-fb-body { padding: 0 14px 10px; font-size: 14px; color: #050505; line-height: 1.5; }
.bsf-mock-fb-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f0f2f5; }
.bsf-mock-fb-reactions { padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e4e6eb; border-bottom: 1px solid #e4e6eb; font-size: 13px; color: #65676b; }
.bsf-mock-fb-actions { display: flex; padding: 0 10px; }
.bsf-mock-fb-action-btn { flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 8px 0; font-size: 13px; font-weight: 600; color: #65676b; }

/* LinkedIn */
.bsf-mock-li { background: #fff; }
.bsf-mock-li-hd { display: flex; gap: 10px; padding: 8px 14px 4px; }
.bsf-mock-li-avatar { width: 40px; height: 40px; border-radius: 50%; background: #0077b5; flex-shrink: 0; }
.bsf-mock-li-meta { flex: 1; line-height: 1.3; }
.bsf-mock-li-name { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.9); }
.bsf-mock-li-title { font-size: 12px; color: rgba(0,0,0,0.6); }
.bsf-mock-li-sub { display: none; }
.bsf-mock-li-headline { padding: 0 14px 2px; font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.9); }
.bsf-mock-li-body { padding: 0 14px 6px; font-size: 14px; color: rgba(0,0,0,0.9); line-height: 1.45; }
.bsf-mock-li-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f3f2ef; }
.bsf-mock-li-reactions { padding: 4px 14px; font-size: 12px; color: rgba(0,0,0,0.6); border-top: 1px solid #e0dfdc; }
.bsf-mock-li-actions { display: flex; padding: 0 10px; border-top: 1px solid #e0dfdc; }
.bsf-mock-li-action-btn { flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; padding: 6px 0; font-size: 13px; font-weight: 600; color: rgba(0,0,0,0.6); }

/* Kakao */
.bsf-mock-kakao { background: #fff; }
.bsf-mock-kakao-hd { background: #fee500; padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.bsf-mock-kakao-ch-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(0,0,0,0.15); flex-shrink: 0; }
.bsf-mock-kakao-ch-name { font-size: 13px; font-weight: 700; color: #191919; }
.bsf-mock-kakao-badge { margin-left: auto; background: rgba(0,0,0,0.12); font-size: 10px; color: #333; padding: 2px 6px; border-radius: 20px; }
.bsf-mock-kakao-card { border: 1px solid #e8e8e8; border-radius: 8px; margin: 10px; overflow: hidden; }
.bsf-mock-kakao-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f5f5f5; min-height: 80px; }
.bsf-mock-kakao-card-body { padding: 12px; }
.bsf-mock-kakao-card-title { font-size: 14px; font-weight: 700; color: #191919; margin-bottom: 4px; }
.bsf-mock-kakao-card-desc { font-size: 13px; color: #555; line-height: 1.45; margin-bottom: 10px; }
.bsf-mock-kakao-btn { display: block; text-align: center; background: #fee500; border-radius: 6px; padding: 8px; font-size: 13px; font-weight: 600; color: #191919; }
.bsf-mock-kakao-foot { padding: 6px 14px 10px; font-size: 12px; color: #999; display: flex; gap: 12px; }

/* Pinterest */
.bsf-mock-pin { background: #fff; display: flex; flex-direction: row; min-height: 160px; }
.bsf-mock-pin-img-wrap { position: relative; width: 44%; flex-shrink: 0; }
.bsf-mock-pin-img { width: 100%; height: 100%; object-fit: cover; display: block; background: #efefef; border-radius: 12px 0 0 12px; }
.bsf-mock-pin-img-empty { width: 100%; height: 100%; min-height: 160px; background: #efefef; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #ccc; border-radius: 12px 0 0 12px; }
.bsf-mock-pin-save-btn { position: absolute; top: 8px; right: 8px; background: #e60023; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.bsf-mock-pin-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bsf-mock-pin-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; }
.bsf-mock-pin-desc { font-size: 13px; color: #555; line-height: 1.4; margin-bottom: 8px; }
.bsf-mock-pin-author { display: flex; align-items: center; gap: 6px; }
.bsf-mock-pin-author-avatar { width: 24px; height: 24px; border-radius: 50%; background: #e60023; }
.bsf-mock-pin-author-name { font-size: 12px; color: #111; font-weight: 600; }

/* Naver Blog */
.bsf-mock-nblog { background: #fff; }
.bsf-mock-nblog-topbar { background: #03c75a; padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
.bsf-mock-nblog-topbar-logo { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.bsf-mock-nblog-topbar-name { font-size: 12px; color: rgba(255,255,255,0.85); }
.bsf-mock-nblog-title { padding: 14px 16px 8px; font-size: 18px; font-weight: 700; color: #191919; line-height: 1.35; border-bottom: 1px solid #f0f0f0; }
.bsf-mock-nblog-author { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.bsf-mock-nblog-author-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e0e0e0; flex-shrink: 0; }
.bsf-mock-nblog-author-name { font-size: 13px; font-weight: 600; color: #333; }
.bsf-mock-nblog-author-date { font-size: 12px; color: #999; margin-left: auto; }
.bsf-mock-blog-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f5f5f5; margin: 12px 0; }
.bsf-mock-blog-para { padding: 0 16px; font-size: 14px; color: #333; line-height: 1.8; margin-bottom: 12px; }
.bsf-mock-nblog-reactions { padding: 12px 16px; display: flex; gap: 16px; border-top: 1px solid #f0f0f0; font-size: 13px; color: #999; }

/* Naver Post */
.bsf-mock-npost { background: #fff; }
.bsf-mock-npost-hd { background: #03c75a; padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
.bsf-mock-npost-logo { font-size: 13px; font-weight: 800; color: #fff; }
.bsf-mock-npost-ch-name { font-size: 12px; color: rgba(255,255,255,0.85); }
.bsf-mock-npost-sub-btn { margin-left: auto; background: rgba(255,255,255,0.25); font-size: 11px; color: #fff; padding: 3px 8px; border-radius: 20px; }
.bsf-mock-npost-card { margin: 8px; border-radius: 8px; overflow: hidden; border: 1px solid #efefef; }
.bsf-mock-npost-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f5f5f5; min-height: 60px; }
.bsf-mock-npost-card-overlay { background: rgba(0,0,0,0.55); padding: 8px 12px; margin-top: -48px; position: relative; }
.bsf-mock-npost-card-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.bsf-mock-npost-card-body { font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.4; }
.bsf-mock-npost-foot { padding: 6px 14px; font-size: 12px; color: #999; display: flex; gap: 12px; border-top: 1px solid #f0f0f0; }

/* Band */
.bsf-mock-band { background: #fff; }
.bsf-mock-band-topbar { background: #5c4aff; padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
.bsf-mock-band-topbar-logo { font-size: 13px; font-weight: 800; color: #fff; }
.bsf-mock-band-topbar-name { font-size: 12px; color: rgba(255,255,255,0.85); }
.bsf-mock-band-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
.bsf-mock-band-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e0e0e0; flex-shrink: 0; }
.bsf-mock-band-name { font-size: 13px; font-weight: 600; color: #222; }
.bsf-mock-band-badge { background: #5c4aff; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; }
.bsf-mock-band-date { font-size: 11px; color: #999; margin-left: auto; }
.bsf-mock-band-body { padding: 10px 14px; font-size: 14px; color: #222; line-height: 1.6; }
.bsf-mock-band-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #f5f5f5; }
.bsf-mock-band-foot { padding: 8px 14px; font-size: 13px; color: #999; display: flex; gap: 16px; border-top: 1px solid #f0f0f0; }

/* Step 3 — Draft two-column layout */
.bsf-draft-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .bsf-draft-layout { grid-template-columns: 1fr; }
}

.bsf-draft-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Step 2 — Format grid */
.bsf-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .bsf-format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bsf-format-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bsf-format-card:hover { border-color: var(--accent); }
.bsf-format-card.is-selected {
  border-color: var(--accent);
  background: rgba(255, 122, 0, 0.07);
}
.bsf-format-card.is-unavailable {
  opacity: 0.35;
}
.bsf-format-card.is-unavailable:hover { border-color: var(--border); opacity: 0.55; }
/* ── 3-state modifier (recommended / available / unavailable) ─────────── */
/* 추천 강조(주황 테두리·글로우)는 선택된 상태에서만 적용 — 사용자가
   추천 카드를 다시 눌러 해제하면 일반 카드 외형으로 되돌아간다 */
.bsf-format-card--recommended.is-selected {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18);
}
.bsf-format-card--recommended.is-selected:hover { border-color: #f59e0b; }
.bsf-format-card--available { opacity: 1; }
.bsf-format-card--unavailable {
  opacity: 0.38;
  cursor: not-allowed !important;
  pointer-events: none;
  filter: grayscale(55%);
}
.bsf-format-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--border); /* 기본: 일반 테두리 색 (해제 상태) */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bsf-format-card__badge svg { display: block; }
/* 선택된 추천 카드만 별을 주황으로 */
.bsf-format-card--recommended.is-selected .bsf-format-card__badge {
  color: #f59e0b;
}
.bsf-format-card__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.bsf-format-card { position: relative; }
.bsf-fmt-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.bsf-fmt-card-icon {
  flex-shrink: 0;
  display: block;
  color: var(--text);
  opacity: 0.92;
}
.bsf-fmt-badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bsf-format-card strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.bsf-format-card p {
  font-size: 12px;
  color: #5db8e8;
  line-height: 1.45;
  margin: 0;
}

/* Step 3 — Draft tabs */
.bsf-draft-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.bsf-draft-tab {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bsf-draft-tab:hover { border-color: var(--accent); color: var(--text); }
.bsf-draft-tab.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 122, 0, 0.1);
}
.bsf-draft-tab.has-draft::after { content: ' ·'; color: var(--accent); }

/* ── Brand Studio root: 뷰포트 고정 레이아웃 체인 ────────────────────── */
#brand-studio-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#brand-studio-root .brand-studio-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#brand-studio-root .brand-studio-page::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#brand-studio-root .bsf-flow-card {
  flex-shrink: 0;
}

#brand-studio-root .bsf-detail-card:has(.bsf-detail-draft.is-active) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bsf-detail-draft.is-active {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── 드래프트 패널 컨테이너: 높이 채우기 + 컨테이너 쿼리 기준 ────────── */
.bsf-format-draft-panels {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.bsf-format-draft-panel { display: none; }
.bsf-format-draft-panel.is-active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  align-items: start;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bsf-format-draft-panel.is-active::-webkit-scrollbar { display: none; }

.bsf-format-draft-panel > .bsf-field-preview {
  grid-column: 2;
  grid-row: 1 / span 30;
  position: sticky;
  top: 0;
  max-height: 100cqh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bsf-format-draft-panel > .bsf-field-preview::-webkit-scrollbar { display: none; }

.bsf-draft-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bsf-draft-title-row .brand-caption-meta-label { white-space: nowrap; }
.bsf-draft-title-row .brand-publish-input { flex: 1; }

/* Step 4 — Deploy summary */
.bsf-deploy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bsf-deploy-format-row {
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
.bsf-deploy-platform-icon {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-right: 1px solid var(--border);
}
.bsf-deploy-platform-icon svg {
  width: 28px;
  height: 28px;
}
.bsf-deploy-format-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 12px 13px 14px;
}
.bsf-deploy-format-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bsf-deploy-format-head strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  line-height: 1.2;
}
.bsf-deploy-fmt-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Uniform height for inline head items */
.bsf-deploy-card-dt .bsf-dt-trigger,
.bsf-deploy-status-badge,
.bsf-deploy-connect-badge {
  height: 26px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}
.bsf-deploy-status-badge {
  flex-shrink: 0;
  font-size: 11px;
}
.bsf-deploy-one-btn {
  flex-shrink: 0;
  align-self: stretch;
  margin: 5px;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
.bsf-deploy-one-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Deploy tab header — global schedule picker + 전체 배포 button */
.bsf-detail-head-deploy > .bsf-deploy-head-right {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bsf-deploy-global-dt-label {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.bsf-detail-head-deploy .bsf-dt-trigger {
  font-size: 12px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* Per-card schedule picker — inline in header row */
.bsf-deploy-card-dt {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.bsf-deploy-card-dt .bsf-dt-trigger {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
}
.bsf-deploy-card-dt .bsf-dt-del {
  font-size: 11px;
  padding: 3px 5px;
}
.bsf-deploy-card-dt .bsf-dt-popup {
  left: auto;
  right: 0;
}

/* SNS connection status badge */
.bsf-deploy-connect-badge {
  font-size: 11px;
  white-space: nowrap;
  gap: 4px;
  justify-content: center;
  line-height: 1;
}
.bsf-deploy-connect-badge svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.bsf-deploy-connect-badge.is-connected {
  color: #fff;
  padding: 0 8px;
  border-radius: 50px;
  background: #8b5cf6;
  border: 1px solid #8b5cf6;
  font-weight: 600;
}
.bsf-deploy-connect-badge.is-disconnected {
  color: var(--text-3);
  opacity: 0.45;
}
.bsf-deploy-connect-badge.is-paused {
  color: #f59e0b;
}
.bsf-deploy-done-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  line-height: 1;
  border-radius: 5px;
  background: transparent;
  color: rgba(34, 197, 94, 0.4);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.bsf-deploy-done-badge:hover {
  opacity: 0.75;
}
.bsf-deploy-done-badge.is-done {
  background: #22c55e;
  color: #fff;
  border: 1px solid #22c55e;
  border-radius: 50px;
}
.bsf-deploy-done-badge svg {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.bsf-deploy-one-btn.is-deploying,
.bsf-deploy-all-btn.is-deploying {
  pointer-events: none;
  opacity: 0.8;
  min-width: 56px;
}
.bsf-deploy-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bsf-spin 0.75s linear infinite;
  vertical-align: middle;
}
/* ---- 캐러셀 힌트 ---- */
.bsf-carousel-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-2) 80%, rgba(255, 122, 0, 0.12) 20%);
  border: 1px solid color-mix(in srgb, var(--border) 60%, var(--accent) 40%);
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}
.bsf-carousel-hint svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* ---- 자산 트리오 (스토리·이미지·영상 카드) ---- */
.bsf-asset-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bsf-asset-type-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  transition: border-color 0.15s, background 0.15s;
  cursor: default;
}

.bsf-asset-type-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg-2) 88%, rgba(255, 122, 0, 0.08) 12%);
}

.bsf-story-card[data-action] {
  cursor: pointer;
  user-select: none;
}
.bsf-story-card[data-action]:hover:not(.is-selected) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
}

.bsf-asset-type-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bsf-asset-type-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 122, 0, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.bsf-clear-type-btn {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.bsf-clear-type-btn:hover {
  background: rgba(239,68,68,0.1);
  border-color: #ef4444;
  color: #ef4444;
}
.bsf-asset-type-head em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-3);
  margin-left: auto;
}

.bsf-asset-story-body {
  flex: 1;
  overflow: hidden;
}

.bsf-asset-story-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bsf-asset-empty-hint {
  color: var(--text-3) !important;
  font-size: 12px !important;
  text-align: center;
  padding: 20px 0;
}

.bsf-story-meta {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  display: grid;
  gap: 5px;
}

.bsf-story-meta li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.bsf-story-meta li span {
  color: var(--accent);
  flex-shrink: 0;
  min-width: 56px;
}

.bsf-story-meta li strong {
  color: #5b9cf6;
  font-weight: 500;
}

.bsf-asset-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
}

.bsf-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-3);
  display: block;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.bsf-thumb-img.is-loaded {
  opacity: 1;
}

.bsf-thumb-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bsf-thumb-placeholder span {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  padding: 4px;
}

.bsf-asset-video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bsf-video-thumb-item {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  background: var(--bg-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}

.bsf-thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.bsf-thumb-video.is-loaded {
  opacity: 1;
}

.bsf-video-thumb-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 1;
}

.bsf-video-thumb-icon {
  font-size: 18px;
  opacity: 0.5;
}

.bsf-video-thumb-title {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  font-size: 10px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  z-index: 1;
}

.bsf-asset-type-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent 20%);
}

/* ── Thumb wrap (image selection) ─────────────────────────────────────── */
.bsf-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 0px var(--accent);
  transition: box-shadow 0.15s;
}
.bsf-thumb-wrap:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent 40%); }
.bsf-thumb-wrap.is-selected { box-shadow: 0 0 0 2.5px var(--accent); }
.bsf-thumb-wrap .bsf-thumb-img { border-radius: 0; }

/* ── Video thumb selection ────────────────────────────────────────────── */
.bsf-video-thumb-item { cursor: pointer; }
.bsf-video-thumb-item.is-selected { box-shadow: 0 0 0 2.5px var(--accent); }
.bsf-video-thumb-item:hover:not(.bsf-video-thumb-empty) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent 40%); }
.bsf-video-thumb-item.is-selected:hover { box-shadow: 0 0 0 2.5px var(--accent); }

/* ── Checkmark overlay ────────────────────────────────────────────────── */
.bsf-thumb-check {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.14s, transform 0.14s;
  pointer-events: none;
  z-index: 3;
}
.bsf-thumb-wrap.is-selected .bsf-thumb-check,
.bsf-video-thumb-item.is-selected .bsf-thumb-check {
  opacity: 1;
  transform: scale(1);
}

/* ── Zoom (magnifier) button ──────────────────────────────────────────── */
.bsf-thumb-zoom {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.14s, background 0.12s;
  z-index: 4;
  padding: 0;
  line-height: 1;
}
.bsf-thumb-wrap:hover .bsf-thumb-zoom,
.bsf-video-thumb-item:hover .bsf-thumb-zoom { opacity: 1; }
.bsf-thumb-zoom:hover { background: rgba(0, 0, 0, 0.8); }

/* ── Media popup / lightbox ───────────────────────────────────────────── */
.bsf-media-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: bsfPopupIn 0.18s ease;
}
@keyframes bsfPopupIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bsf-media-popup-inner {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bsf-media-popup-img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
  border-radius: 14px;
}
.bsf-media-popup-video {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 14px;
  background: #000;
}
.bsf-media-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.12s;
  line-height: 1;
  padding: 0;
}
.bsf-media-popup-close:hover { background: rgba(0, 0, 0, 0.9); }

@media (max-width: 900px) {
  .bsf-asset-trio { grid-template-columns: 1fr; }
}

/* ---- */
.bsf-deploy-caption-preview {
  font-size: 12px;
  color: #60a5fa;
  line-height: 1.45;
  margin: 0;
}

/* ── 세션 만료 로그아웃 팝업 ─────────────────────────────────────────────────── */
.nk-logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: nk-logout-fadein 0.22s ease;
}
@keyframes nk-logout-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nk-logout-modal {
  background: var(--card, #121d35);
  border: 1px solid var(--border, #1b2845);
  border-radius: 18px;
  padding: 36px 40px 32px;
  text-align: center;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
  max-width: 360px;
  width: 90%;
  animation: nk-logout-slideup 0.22s ease;
}
@keyframes nk-logout-slideup {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.nk-logout-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 16px;
  display: block;
}
.nk-logout-msg {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #e9edf7);
  margin: 0 0 8px;
}
.nk-logout-sub {
  font-size: 13px;
  color: var(--text-3, #6478a0);
  margin: 0 0 28px;
  line-height: 1.5;
}
.nk-logout-confirm {
  display: block;
  width: 100%;
  background: var(--accent, #ff7a00);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.14s;
}
.nk-logout-confirm:hover { opacity: 0.85; }

/* ═══════════════════════════════════════
   SNS Settings Page
═══════════════════════════════════════ */

.sns-settings-page {
  width: min(1560px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 18px 0 36px;
  display: grid;
  gap: 16px;
}

/* outer card — shares .bsf-detail-card visual */
.sns-settings-card {
  /* inherits border-radius/bg/shadow from .bsf-detail-card */
}

/* inner padding wrapper (mirrors .bsf-detail padding) */
.sns-settings-inner {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── 4×3 플랫폼 그리드 ───────────────── */

.sns-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ── 플랫폼 카드 (가로 레이아웃) ───────── */

.sns-pcard {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color 0.18s;
}

.sns-pcard--connected {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
}

.sns-pcard--soon {
  opacity: 0.45;
}

.sns-pcard-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--text-2);
}

.sns-pcard--connected .sns-pcard-icon {
  color: var(--accent);
}

.sns-pcard-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sns-pcard-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sns-pcard-status {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.sns-pcard--connected .sns-pcard-status {
  color: var(--accent);
}
.sns-pcard--paused .sns-pcard-status {
  color: var(--muted, #888);
}
/* 토큰 만료/취소 → 재연결 필요:
   주황 '채움(fill)' 대신 하늘색 '라인(outline)' 모드로 표현해 연결 해제 상태를 구분한다.
   (Pre-Prod 같은 아웃라인 스타일 — 채움 없음, 연한 하늘색 테두리) */
.sns-pcard--reconnect .sns-pcard-status {
  color: #5db8e8;
  font-weight: 600;
}
/* 연결 체크박스: 주황 채움 제거 → 투명 배경 + 하늘색 라인 */
.sns-pcard--reconnect .sns-connect-box.is-connected {
  background: transparent;
  border-color: #5db8e8;
  color: #5db8e8;
}
/* 사용 토글(ON): 주황 채움 제거 → 투명 배경 + 하늘색 라인, 노브도 하늘색 */
.sns-pcard--reconnect .sns-toggle input:checked + .sns-toggle-track {
  background: transparent;
  border-color: #5db8e8;
}
.sns-pcard--reconnect .sns-toggle input:checked + .sns-toggle-track::before {
  background: #5db8e8;
  box-shadow: none;
}

/* 카드 우측 액션 영역: 연결 체크박스 + 사용 토글 */
.sns-pcard-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 프로필 링크 버튼 — 연결됐을 때 connect-box 왼쪽에 표시 */
.sns-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted, #888);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sns-profile-link:hover {
  border-color: var(--accent, #5eaaff);
  color: var(--accent, #5eaaff);
}
.sns-profile-link:active {
  transform: scale(0.94);
}

/* 연결 체크박스 (V 표시) — 좌측 액션 */
.sns-connect-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sns-connect-box:hover {
  border-color: var(--accent, #5eaaff);
}
.sns-connect-box:active {
  transform: scale(0.94);
}
.sns-connect-box.is-connected {
  background: var(--accent, #5eaaff);
  border-color: var(--accent, #5eaaff);
  color: #fff;
}
.sns-check-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.sns-pcard-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 사용 토글 — 연결 안 된 상태에서는 비활성 처리 */
.sns-toggle.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sns-toggle.is-disabled .sns-toggle-track {
  background: var(--bg-2, #d0d0d0);
}

/* ── iOS 스타일 토글 스위치 ──────────── */

.sns-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sns-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sns-toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--bg-2, #d0d0d0);
  border: 1.5px solid var(--border);
  transition: background 0.22s, border-color 0.22s;
}

.sns-toggle-track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.sns-toggle input:checked + .sns-toggle-track {
  background: var(--accent, #5eaaff);
  border-color: var(--accent, #5eaaff);
}

.sns-toggle input:checked + .sns-toggle-track::before {
  transform: translateX(18px);
}

.sns-soon-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── 저장 상태 표시 ──────────────────── */

.sns-save-status {
  font-size: 13px;
}

.sns-save-status--pending { color: var(--muted); }
.sns-save-status--success { color: #4ade80; }
.sns-save-status--error   { color: #f87171; }

/* ═══════════════════════════════════════
   End SNS Settings Page
═══════════════════════════════════════ */