/* =========================================
   Grok 로컬 스튜디오 — Dark Theme (사이드바 레이아웃)
   ========================================= */

:root {
  --bg-main: #0a0b10;
  --bg-sidebar: #0d0e14;
  --bg-card: #14151c;
  --bg-card-2: #181922;
  --bg-card-hover: #1c1d27;
  --bg-input: #0f1017;

  --border-subtle: #1f2029;
  --border-medium: #2a2b35;
  --border-strong: #3a3b46;

  --text-primary: #e8e8ec;
  --text-secondary: #9a9ba6;
  --text-muted: #5e5f6a;
  --text-faint: #45464f;

  --green: #34d399;
  --orange: #f59e0b;
  --orange-strong: #fb923c;
  --violet: #a78bfa;
  --violet-strong: #8b5cf6;
  --violet-bg: rgba(167, 139, 250, 0.13);
  --pink: #fb7185;
  --blue: #60a5fa;
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.14);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.12);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.18);
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

code {
  font-family: "SF Mono", "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 0.85em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
}

/* =========================================
   App 레이아웃 (사이드바 + 메인)
   ========================================= */
.app {
  display: flex;
  min-height: 100vh;
}

/* ----- 사이드바 ----- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--violet), var(--orange-strong));
  color: white;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}
.logo-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-sub {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
}
.nav-group {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 12px 6px;
  margin: 0;
}
.nav-group:first-child { padding-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.nav-item:hover {
  background: var(--bg-card-2);
  color: var(--text-primary);
}
.nav-item.active {
  background: var(--violet-bg);
  color: #c4b5fd;
}
.nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nav-icon-orange,
.nav-icon-pink,
.nav-icon-green,
.nav-icon-violet {
  border-radius: 6px;
  color: white;
  font-size: 13px;
}
.nav-icon-orange { background: linear-gradient(135deg, #fb923c, #f59e0b); }
.nav-icon-pink   { background: linear-gradient(135deg, #fb7185, #ec4899); }
.nav-icon-green  { background: linear-gradient(135deg, #34d399, #10b981); }
.nav-icon-violet { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--border-subtle);
}
.auth-mini {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.auth-mini-text { flex: 1; min-width: 0; }
.auth-mini-status {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.auth-mini-status strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.auth-mini-status strong.status-ok { color: var(--green); }
.auth-mini-status strong.status-warn { color: var(--amber); }
.auth-mini-status strong.status-err { color: var(--red); }
.auth-mini-user {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- 메인 ----- */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  padding: 22px 32px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-main);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-crumb {
  margin: 0 0 4px 0;
  font-size: 11.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.topbar-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.topbar-actions {
  display: flex;
  gap: 8px;
}

.content {
  flex: 1;
  padding: 28px 32px;
  max-width: 1080px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* =========================================
   패널 (탭 전환)
   ========================================= */
.panel {
  display: none;
  flex-direction: column;
  gap: 22px;
  animation: fadeIn 0.18s ease-out;
}
.panel.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.panel-head-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  flex-shrink: 0;
}
.panel-head-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.panel-head-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* =========================================
   카드 / 폼 컨테이너
   ========================================= */
.form-card, .result-card, .stats-card, .card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
}
.card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* =========================================
   배지 / 칩 / 버튼
   ========================================= */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-amber {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.badge-violet {
  background: var(--violet-bg);
  color: var(--violet);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.chip {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.chip-violet {
  background: var(--violet-bg);
  border-color: rgba(167, 139, 250, 0.35);
  color: #c4b5fd;
}
.chip-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-lg {
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  width: 100%;
  margin-top: 6px;
}
.btn-ghost {
  background: transparent;
  border-color: var(--border-medium);
  color: var(--text-secondary);
}
.btn-ghost:hover {
  background: var(--bg-card-2);
  color: var(--text-primary);
}
.btn-violet {
  background: var(--violet-strong);
  border-color: var(--violet-strong);
  color: white;
}
.btn-violet:hover { background: #7c3aed; }
.btn-orange {
  background: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%);
  border: none;
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px rgba(251, 146, 60, 0.25);
}
.btn-orange:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-danger {
  background: var(--red-bg);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--red);
}

/* =========================================
   인증 / 사용량
   ========================================= */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-faint);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.dot-green { background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); }
.dot-red   { background: var(--red); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12); }
.dot-amber { background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12); }

/* 통계 카드 */
.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.stats-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}
.stats-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.stat-item {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.stat-label {
  margin: 0 0 4px 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.stat-value {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-value span:last-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 3px;
}
.stat-success .stat-value > span:first-child { color: var(--green); }
.stat-fail .stat-value > span:first-child { color: var(--text-muted); }

.stats-footer {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
}
.stats-footer strong { color: var(--text-primary); font-weight: 600; }

/* =========================================
   히어로 (홈 패널)
   ========================================= */
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-text { position: relative; z-index: 1; }

.hero-title {
  margin: 14px 0 12px 0;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.accent {
  background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #fb923c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-desc {
  margin: 0 0 20px 0;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-preview {
  position: relative;
  z-index: 1;
  background: radial-gradient(circle at 40% 30%, rgba(167, 139, 250, 0.18), transparent 60%),
              linear-gradient(135deg, #1a1b24 0%, #11121a 100%);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  min-height: 180px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}
.hero-preview-title {
  margin: 0 0 4px 0;
  font-size: 12.5px;
  font-weight: 600;
}
.hero-preview-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

/* =========================================
   워크스페이스 (홈 빠른 진입)
   ========================================= */
.workspace { display: flex; flex-direction: column; gap: 14px; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.link-sub {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}
.link-sub:hover { color: var(--text-primary); }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ws-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow-card);
}
.ws-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.ws-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
  color: white;
}
.ws-icon-orange { background: linear-gradient(135deg, #fb923c, #f59e0b); }
.ws-icon-pink   { background: linear-gradient(135deg, #fb7185, #ec4899); }
.ws-icon-green  { background: linear-gradient(135deg, #34d399, #10b981); }
.ws-icon-violet { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }

.ws-card-title {
  margin: 0 0 4px 0;
  font-size: 14.5px;
  font-weight: 600;
}
.ws-card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* =========================================
   라벨 / 인풋 / 폼
   ========================================= */
.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.block-label {
  margin: 4px 0 -2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.input, .select, .textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--violet);
  background: #11121a;
}
.textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
.textarea-code {
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%239a9ba6' d='M2 4l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.input-with-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-with-buttons .input,
.input-with-buttons .select { flex: 1; }

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

/* 라디오 카드 */
.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.radio-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.15s;
}
.radio-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}
.radio-card input[type="radio"] {
  margin: 4px 0 0 0;
  accent-color: var(--violet);
  flex-shrink: 0;
}
.radio-card-active {
  background: var(--violet-bg);
  border-color: rgba(167, 139, 250, 0.45);
}
.radio-card-title { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; }
.radio-card-desc { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

/* kbd (키보드 단축키 표시) */
kbd {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 500;
}

/* 드랍존 */
.drop-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.drop-zone:hover {
  border-color: var(--violet);
  background: rgba(167, 139, 250, 0.04);
}
.drop-title { margin: 0 0 4px 0; font-size: 13.5px; font-weight: 600; }
.drop-sub   { margin: 0; font-size: 12px; color: var(--text-secondary); }
.drop-empty { margin: 8px 0 0 0; font-size: 12px; color: var(--text-muted); text-align: center; }

/* 프리뷰 모드 드랍존 */
.image-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.image-input-actions {
  align-items: center;
  gap: 12px;
}
.drop-zone.has-preview {
  position: relative;
  min-height: 180px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-zone.has-preview .dz-empty {
  text-align: center;
}
.drop-zone.has-preview .dz-preview {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: contain;
  box-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.drop-zone.has-preview .dz-clear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.drop-zone.has-preview .dz-clear:hover {
  background: rgba(248, 113, 113, 0.85);
  transform: scale(1.08);
}
.drop-zone.has-preview.is-loaded {
  border-style: solid;
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.03);
  padding: 16px;
}
.drop-zone.has-preview.is-clipboard-empty {
  border-color: var(--amber);
  animation: shake 0.4s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* 서브 아코디언 */
.sub-acc {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.sub-acc summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  list-style: none;
  user-select: none;
}
.sub-acc summary::-webkit-details-marker { display: none; }
.sub-acc summary:hover { color: var(--text-primary); }
.sub-acc[open] summary {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.sub-acc-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.check-row input { accent-color: var(--violet); }

/* 헬프 텍스트 */
.muted    { color: var(--text-secondary); font-size: 13px; margin: 0; }
.muted-sm { color: var(--text-secondary); font-size: 12px; }
.hint {
  margin: 0;
  padding: 8px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* =========================================
   결과 / 빈 상태
   ========================================= */
.result-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.01);
}

.empty-state {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.empty-sub {
  margin: 0 0 12px 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* =========================================
   라이브러리 필터 / 그리드
   ========================================= */
.filter-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.filter-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-tab:hover {
  background: var(--bg-card-2);
  color: var(--text-primary);
}
.filter-tab.active {
  background: var(--violet-bg);
  color: #c4b5fd;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  min-height: 160px;
}
.library-grid .empty-state {
  grid-column: 1 / -1;
}

/* =========================================
   info-list (설정 패널)
   ========================================= */
.info-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.info-list > div:last-child { border-bottom: none; }
.info-list dt {
  color: var(--text-secondary);
  font-weight: 500;
}
.info-list dd {
  margin: 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================================
   토글 스위치
   ========================================= */
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.toggle-label {
  font-size: 13px;
  font-weight: 500;
}
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  display: inline-block;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-medium);
  border-radius: 999px;
  transition: 0.2s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle input:checked + .toggle-slider {
  background: var(--violet-strong);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* =========================================
   결과 그리드 (T2I/I2I/I2V 결과)
   ========================================= */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  min-height: 100px;
}
.result-grid .result-empty {
  grid-column: 1 / -1;
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
}
.result-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  aspect-ratio: 3 / 4;
}
.result-item:hover {
  transform: translateY(-2px);
  border-color: var(--violet);
}
.result-item img, .result-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.result-item-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  font-size: 11px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.result-item-badge {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.35);
  border: 1px solid rgba(167, 139, 250, 0.5);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.result-item-badge.is-mock {
  background: rgba(251, 191, 36, 0.35);
  border-color: rgba(251, 191, 36, 0.55);
}

/* 폼 상태 메시지 */
.form-status {
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-2);
  color: var(--text-secondary);
}
.form-status-pending {
  border-color: var(--violet);
  color: var(--violet);
}
.form-status-ok {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
}
.form-status-err {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--red);
}

/* =========================================
   테스트 결과 박스 (설정 패널)
   ========================================= */
.test-result {
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card-2);
  color: var(--text-secondary);
}
.test-result-pending {
  border-color: var(--border-medium);
  color: var(--text-secondary);
}
.test-result-ok {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  color: var(--green);
}
.test-result-err {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
  color: var(--red);
}

/* 모델 ID 칩 (테스트 결과) */
.model-group {
  margin-top: 8px;
}
.model-group-title {
  margin: 0 0 4px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.model-group-title-orange { color: var(--orange-strong); }
.model-group-title-violet { color: var(--violet); }
.model-group-title-gray   { color: var(--text-muted); }

.model-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.model-chip {
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}
.model-chip-t2i {
  background: rgba(251, 146, 60, 0.16);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fdba74;
}
.model-chip-t2i:hover {
  background: rgba(251, 146, 60, 0.28);
  border-color: rgba(251, 146, 60, 0.65);
  transform: translateY(-1px);
}
.model-chip-i2v {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
}
.model-chip-i2v:hover {
  background: rgba(167, 139, 250, 0.32);
  border-color: rgba(167, 139, 250, 0.65);
  transform: translateY(-1px);
}
.model-chip-lang {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-medium);
  color: var(--text-muted);
  opacity: 0.7;
}
.model-chip-lang:hover {
  opacity: 1;
  border-color: var(--border-strong);
}

/* =========================================
   작업 큐 카드 (병렬 I2V)
   ========================================= */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-card {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  align-items: center;
  transition: all 0.2s;
}
.job-card.is-active {
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.05);
}
.job-card.is-done {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.05);
}
.job-card.is-failed {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.05);
}
.job-thumb {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.job-info { flex: 1; min-width: 0; }
.job-status-line {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.job-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: var(--violet);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.job-meta {
  margin: 4px 0 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.job-prompt {
  margin: 4px 0 0 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-error {
  margin: 6px 0 0 0;
  font-size: 11.5px;
  color: var(--red);
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
}

/* =========================================
   사용량 카드 (xAI 잔여)
   ========================================= */
.usage-card .stats-desc { line-height: 1.6; }
.usage-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.usage-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.usage-row:last-child { border-bottom: none; }
.usage-row dt { color: var(--text-secondary); margin: 0; }
.usage-row dd { margin: 0; color: var(--text-primary); }
.usage-raw {
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px;
  background: var(--bg-card-2);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}
.usage-empty {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.usage-progress-wrap {
  margin: 8px 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.usage-progress-bg {
  height: 10px;
  background: var(--bg-card-2);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.usage-progress-fill {
  height: 100%;
  transition: width 0.3s ease-out;
  background: var(--green);
}
.usage-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.usage-progress-labels strong { color: var(--text-primary); }

/* =========================================
   전역 작업 트레이 (모든 탭에서 보임)
   ========================================= */
.global-jobs-tray {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 900;
  overflow: hidden;
  transition: transform 0.18s, opacity 0.18s;
}
.global-jobs-tray[hidden] {
  display: none;
}
.global-jobs-tray.is-collapsed .gjt-body { display: none; }
.global-jobs-tray.is-collapsed .gjt-collapse { transform: rotate(180deg); }

.gjt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(251, 146, 60, 0.1));
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  user-select: none;
}
.gjt-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.gjt-spin {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(167, 139, 250, 0.3);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
.gjt-count {
  background: var(--violet-strong);
  color: white;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.gjt-collapse {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.15s;
}

.gjt-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gjt-mini {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.gjt-mini:hover {
  border-color: var(--violet);
  transform: translateX(-2px);
}
.gjt-mini-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--bg-card);
  flex-shrink: 0;
  object-fit: cover;
}
.gjt-mini-info { flex: 1; min-width: 0; }
.gjt-mini-status {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gjt-mini-progress-msg {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: var(--text-muted);
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.gjt-mini-meta {
  margin: 2px 0 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
}
.gjt-mini.is-done .gjt-mini-status { color: var(--green); }
.gjt-mini.is-failed .gjt-mini-status { color: var(--red); }
/* 상단 글로벌 진행바 (모든 화면 최상단) */
.global-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2000;
  overflow: visible;
}
.global-top-bar[hidden] { display: none; }
.global-top-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--orange-strong), var(--violet));
  background-size: 200% 100%;
  animation: globalBarShimmer 2s linear infinite;
  transition: width 0.4s ease-out;
  width: 0%;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
}
@keyframes globalBarShimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.global-top-bar-label {
  position: fixed;
  top: 8px;
  right: 12px;
  background: var(--bg-card);
  border: 1px solid var(--violet);
  color: var(--text-primary);
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  z-index: 2001;
}

.gjt-progress {
  margin: 4px 0;
  height: 4px;
  background: var(--bg-card);
  border-radius: 2px;
  overflow: hidden;
}
.gjt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--orange-strong));
  transition: width 0.4s ease-out;
  border-radius: 2px;
}
.gjt-mini-cancel {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--red);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 700;
}
.gjt-mini-cancel:hover {
  background: rgba(248, 113, 113, 0.4);
  transform: scale(1.08);
}

/* =========================================
   토스트 알림 (우상단)
   ========================================= */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  pointer-events: auto;
  animation: toastIn 0.22s ease-out;
  min-width: 280px;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast.is-leaving {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast-ok {
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), var(--bg-card));
}
.toast-err {
  border-color: rgba(248, 113, 113, 0.45);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), var(--bg-card));
}
.toast-thumb {
  width: 44px; height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bg-card-2);
}
.toast-text { flex: 1; min-width: 0; }
.toast-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.toast-sub {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}

/* =========================================
   영상 선택 모달 그리드
   ========================================= */
.video-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.video-pick-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card-2);
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.15s;
  aspect-ratio: 9 / 16;
}
.video-pick-item:hover {
  border-color: var(--violet);
  transform: translateY(-2px);
}
.video-pick-item.is-selected {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}
.video-pick-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-pick-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
  font-size: 11px;
  color: white;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-pick-num {
  position: absolute;
  top: 8px; left: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  z-index: 2;
}

/* =========================================
   미디어 라이트박스 모달
   ========================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modalFade 0.18s ease-out;
}
.modal[hidden] { display: none; }
@keyframes modalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
}
.modal-content {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 95vw);
  max-height: 94vh;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: modalPop 0.2s ease-out;
}
@keyframes modalPop {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.05);
}
.modal-media-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  max-height: 80vh;
  background: #000;
  overflow: hidden;
}
.modal-media-wrap img,
.modal-media-wrap video {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.modal-footer {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card-2);
  flex-wrap: wrap;
}
.modal-meta { flex: 1; min-width: 0; }
.modal-filename {
  margin: 0 0 4px 0;
  font-size: 12.5px;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-prompt {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modal-prompt:empty { display: none; }
.modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* =========================================
   Welcome / 로그인 페이지
   ========================================= */
.welcome-body {
  background:
    radial-gradient(circle at 20% 10%, rgba(167, 139, 250, 0.12), transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(251, 146, 60, 0.1), transparent 50%),
    var(--bg-main);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-shell {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.welcome-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.welcome-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.welcome-logo-mark {
  width: 48px;
  height: 48px;
  font-size: 22px;
  border-radius: 12px;
}
.welcome-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.welcome-sub {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.welcome-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-input {
  font-size: 16px;
  padding: 14px 16px;
}
.welcome-meta {
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}
.welcome-footer {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

/* =========================================
   설정 패널 추가 UI (로그아웃 / 저장 프롬프트 / 태그)
   ========================================= */
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.saved-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.saved-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.saved-item-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.saved-item-snippet {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 최근 프롬프트 칩 (I2V) */
.recent-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.recent-chip {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.recent-chip:hover {
  background: var(--violet-bg);
  border-color: rgba(167, 139, 250, 0.45);
  color: #c4b5fd;
}
.recent-chip-clear {
  background: transparent;
  border: 1px dashed var(--border-medium);
  color: var(--text-muted);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}
.recent-chip-clear:hover { color: var(--red); border-color: var(--red); }

/* 도움말 모달 (복사 가능) */
.help-modal-body h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 700;
}
.help-modal-body h3 {
  margin: 22px 0 8px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--violet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.help-modal-body p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.help-modal-body ol, .help-modal-body ul {
  margin: 8px 0 8px 20px;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.copy-line {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 8px 0;
}
.copy-line code {
  flex: 1;
  background: transparent;
  padding: 0;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-primary);
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}
.copy-btn {
  flex-shrink: 0;
  background: var(--violet-bg);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 60px;
}
.copy-btn:hover {
  background: rgba(167, 139, 250, 0.3);
  border-color: var(--violet);
}
.copy-btn.copied {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

/* 페이지네이션 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.pagination[hidden] { display: none; }
.page-btn {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 36px;
}
.page-btn:hover:not([disabled]) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.page-btn.is-current {
  background: var(--violet-strong);
  color: white;
  border-color: var(--violet-strong);
  font-weight: 700;
}
.page-btn[disabled] { opacity: 0.4; cursor: default; }
.page-info {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 6px;
}

/* 캐릭터 카드 바 (T2I/I2I/I2V 폼 상단) */
.character-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px dashed rgba(167, 139, 250, 0.4);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.char-clear-btn {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--red);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
}
.char-clear-btn:hover { background: rgba(248, 113, 113, 0.28); }

/* 라이브러리 그룹 배지 */
.group-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(96, 165, 250, 0.4);
  letter-spacing: 0.03em;
}
.result-item.is-grouped { border-color: rgba(96, 165, 250, 0.4); }
.result-item.is-grouped:hover { border-color: #60a5fa; }

/* 시네마 영상 액션바 */
.cinema-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.18), rgba(251, 146, 60, 0.12));
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
}
.cinema-bar-text {
  font-size: 13px;
  font-weight: 600;
  color: #c4b5fd;
}

/* 스토리보드 액션바 (항상 표시) */
.sb-add-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sb-add-bar-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  margin-right: auto;
}

/* 스토리보드 필름 스트립 (sb 그리드 안 sb-slot) */
.sb-slot {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
}
.sb-slot:hover {
  border-color: var(--orange-strong);
  transform: translateY(-1px);
}
.sb-slot-header {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.12));
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fdba74;
}
.sb-slot-handle {
  color: var(--text-muted);
  cursor: move;
  font-size: 14px;
}
.sb-slot-img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  background: var(--bg-card);
}
.sb-slot-prompt {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 38px;
  max-height: 60px;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
}
.sb-slot-actions {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
}
.sb-slot-btn {
  flex: 1;
  padding: 5px 4px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
  min-width: 24px;
}
.sb-slot-btn:hover:not([disabled]) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.sb-slot-btn[disabled] { opacity: 0.3; cursor: default; }
.sb-slot-btn-danger:hover { color: var(--red); border-color: rgba(248, 113, 113, 0.4); }

/* 프롬프트 카드 리스트 */
.prompt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
}
.prompt-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.prompt-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--violet);
  transform: translateX(2px);
}
.prompt-card-info { flex: 1; min-width: 0; }
.prompt-card-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.prompt-card-kind {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--violet-bg);
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}
.prompt-card-text {
  margin: 4px 0 0 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.prompt-card-edit, .prompt-card-del {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prompt-card-edit:hover {
  background: var(--violet-bg);
  border-color: rgba(167, 139, 250, 0.5);
  color: #c4b5fd;
}
.prompt-card-del:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.4);
  color: var(--red);
}

/* 스토리보드 캐릭터 카드 그리드 */
.storyboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.storyboard-grid .result-empty {
  grid-column: 1 / -1;
}
.sb-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
}
.sb-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.sb-card-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-card);
  display: block;
}
.sb-card-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.sb-card-desc {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-card-actions {
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* 즐겨찾기 배지 (등록된 항목에만 표시) */
.fav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fbbf24;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 2;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}

/* 즐겨찾기 해제된 항목은 호버 시 빈별만 보임 */
.result-item .ri-act[data-action="lib-fav"] {
  font-size: 13px;
}
.result-item .ri-act.is-fav {
  background: rgba(251, 191, 36, 0.85);
  border-color: rgba(251, 191, 36, 1);
  color: white;
}

/* 새 항목 배지 */
.new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #fb923c, #f59e0b);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(251, 146, 60, 0.5);
  animation: newBadgePulse 1.5s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 라이브러리 항목 액션 */
.result-item-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.result-item:hover .result-item-actions { opacity: 1; }
.ri-act {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.ri-act:hover { background: rgba(167, 139, 250, 0.85); transform: scale(1.1); }
.ri-act-danger:hover { background: rgba(248, 113, 113, 0.85); }
.ri-act.is-fav { background: rgba(251, 191, 36, 0.85); }

/* 검색 입력 */
.library-search {
  margin-bottom: 8px;
}

/* MP4 큐 리스트 */
.mp4-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp4-queue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.mp4-queue-num {
  width: 22px;
  height: 22px;
  background: var(--violet-bg);
  color: var(--violet);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.mp4-queue-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
}
.mp4-queue-actions {
  display: flex;
  gap: 4px;
}
.mp4-q-btn {
  width: 24px; height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.mp4-q-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* 사이드바 로그아웃 버튼 */
.sidebar-logout {
  margin-top: 10px;
  width: 100%;
  font-size: 11.5px;
}

/* =========================================
   푸터
   ========================================= */
.page-footer {
  padding: 24px 32px 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* =========================================
   반응형
   ========================================= */
@media (max-width: 1000px) {
  .ws-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-preview { min-height: 130px; }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 64px; }
  .logo-text, .logo-sub { display: none; }
  .nav-group { display: none; }
  .nav-label { display: none; }
  .nav-item {
    justify-content: center;
    padding: 10px 0;
  }
  .auth-mini-text { display: none; }
  .auth-mini { justify-content: center; padding: 8px; }
  .topbar, .content { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 600px) {
  .ws-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .radio-cards { grid-template-columns: 1fr; }
  .topbar-title { font-size: 18px; }
  .hero-title { font-size: 22px; }
  .hero { padding: 22px; }
  .info-list > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============== 캐릭터셋 (사진 1장 → 4방향) ============== */
.charset-card {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), var(--shadow-card);
}
.charset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.cs-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: all 0.15s;
}
.cs-card:hover { border-color: var(--border-strong); }
.cs-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cs-card-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.cs-card-desc {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.cs-card-err {
  margin: 8px 0 0 0;
  font-size: 11.5px;
  color: var(--red);
  line-height: 1.4;
}
.cs-status { font-size: 11px; font-weight: 500; margin-left: 6px; }
.cs-status-gen { color: var(--amber); }
.cs-status-err { color: var(--red); }
.cs-views {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.cs-view {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.cs-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-view-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 10px;
  text-align: center;
  padding: 2px 0;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-secondary);
}
.cs-view-sm { width: 52px; flex: 0 0 52px; }

/* ============== 캐스트 세팅 (SB 인물/배경) ============== */
.cast-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 4px;
}
.cast-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cast-tabs { display: flex; gap: 4px; }
.cast-tab {
  background: var(--bg-input);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.cast-tab.active {
  color: var(--violet);
  border-color: var(--violet);
  background: rgba(167, 139, 250, 0.08);
}
.cast-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cast-slot {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cast-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cast-slot-num {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--violet);
  flex: 0 0 auto;
  min-width: 38px;
}
.cast-slot-select { flex: 1; min-width: 120px; }
.cast-use {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}
.cast-slot-preview { display: flex; gap: 6px; }
.cast-slot-extra { font-size: 12.5px; }
.cast-empty { margin: 4px 0 8px 0; }

/* ============== 다중 레퍼런스 (콜라주 모드) ============== */
.extra-refs {
  background: var(--bg-card-2);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 4px 0;
}
.extra-refs .field-label { margin-bottom: 6px; }
.extra-refs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.extra-ref-item {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-medium);
}
.extra-ref-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.extra-ref-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.extra-ref-x:hover { background: var(--red); color: #fff; }

@media (max-width: 768px) {
  .charset-grid { grid-template-columns: 1fr; }
  .cast-slot-row { flex-wrap: wrap; }
}