/* 쇼츠랩 셸 — 다크 + 골드/앰버. styles.css/studio.css 위에 로드되어 테마·레이아웃을 덮어씀 */
:root {
  --bg: #0e1015;
  --panel: #181b24;
  --panel2: #20242f;
  --card: #181b24;
  --card-soft: #20242f;
  --ink: #eceef4;
  --muted: #8b91a3;
  --line: #2a2f3d;
  --accent: #f5b301;   /* 골드 */
  --accent2: #ff8a1e;  /* 앰버 */
  --pink: #ff8a1e;     /* 기존 pink 사용처 → 앰버 */
  --violet: #f5b301;   /* 기존 violet 사용처 → 골드 */
  --green: #22c55e;
  --danger: #ef4444;
  --gold: linear-gradient(135deg, #f5b301, #ff7a18);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

body {
  display: block !important;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── 헤더 ── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line);
  max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px;
}
.app-brand { display: flex; align-items: center; gap: 12px; }
.app-brand .mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--gold);
  display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #1a1205;
}
.app-brand h1 { margin: 0; font-size: 18px; }
.app-brand h1 small { font-weight: 400; color: var(--muted); font-size: 13px; }
.app-brand p { margin: 0; font-size: 12px; color: var(--muted); }
.app-usage { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; }
.uchip { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; white-space: nowrap; }
.uchip b { color: var(--accent); }
.hbtn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 9px; padding: 8px 13px; font-size: 13px; cursor: pointer; }
.hbtn.gold { background: var(--gold); border: 0; color: #1a1205; font-weight: 800; }

/* ── 탭 ── */
.app-tabs {
  display: flex; gap: 4px; padding: 8px 20px; border-bottom: 1px solid var(--line);
  overflow-x: auto; max-width: 1180px; margin: 0 auto;
}
.app-tab {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px;
  color: var(--muted); font-size: 14px; white-space: nowrap; cursor: pointer; background: none; border: 0;
}
.app-tab:hover { color: var(--ink); }
.app-tab.on { background: var(--panel); color: var(--ink); font-weight: 700; }

/* ── 탭 패널 ── */
.app-main { max-width: 1180px; margin: 0 auto; padding: 20px; }
.tab-panel { display: none; }
.tab-panel.on { display: block; }

/* ── 홈 ── */
.home-hero { padding: 40px 24px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(1200px 400px at 50% -10%, rgba(245,179,1,0.08), transparent); }
.home-hero h2 { margin: 0 0 8px; font-size: 26px; }
.home-hero p { color: var(--muted); margin: 0 0 20px; }
.home-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.home-steps .st { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: left; }
.home-steps .st .n { color: var(--accent); font-weight: 800; font-size: 13px; }
.home-steps .st b { display: block; margin: 4px 0 4px; }
.home-steps .st span { color: var(--muted); font-size: 12px; }
@media (max-width: 820px) { .home-steps { grid-template-columns: 1fr 1fr; } }

/* ── 소재 발굴 (탭 안 2단) ── */
.discover-layout { display: grid; grid-template-columns: 250px 1fr; gap: 18px; }
.discover-side { display: flex; flex-direction: column; gap: 12px; align-content: start; }
@media (max-width: 820px) { .discover-layout { grid-template-columns: 1fr; } }

/* ── 제작 탭: 예전 studio-dialog 내용이 탭으로 ── */
#tab-studio .dialog-head { padding: 0 0 12px; }

/* ── 하드코딩된 라이트 배경 다크로 보정 ── */
.cp-card, .find-cand, .studio-block { background: var(--panel2) !important; }
.studio-block-head { background: #232838 !important; border-bottom-color: var(--line) !important; }
.studio-result-empty { border-color: var(--line) !important; color: var(--muted); }

/* 입력·셀렉트 다크 보정 */
.field input, .field select, .find-row input, .studio-render textarea, .studio-render input, .studio-render select,
input[type="text"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], select, textarea {
  background: var(--panel2); color: var(--ink); border-color: var(--line);
}
.status { background: var(--panel); border: 1px solid var(--line); color: var(--muted); }

/* ★발굴 화면에 라이트 테마 잔재가 남아 글자가 안 보이던 것들.
   원래는 흰 배경 위 진회색 글자였는데, 셸이 다크로 바뀌면서 배경만 어두워지고 글자색은 그대로 남았다. */
.check { color: var(--ink); }                       /* "쇼츠 후보만 보기" 등 — 배경 없이 #334155라 안 보였다 */
.check input { accent-color: var(--gold); }
.metrics div { background: var(--panel2); border-color: var(--line); }  /* 흰 카드 위 흰 글자 → 숫자가 안 보였다 */
.metrics span { color: var(--ink); }
.metrics small { color: var(--muted); }
.key-note { color: var(--muted); }

/* 빈 상태 정리: 숨긴 소재태그·빈 메시지 박스 안 보이게 */
.studio-source[hidden] { display: none !important; }
.studio-source { background: rgba(245, 179, 1, 0.06) !important; border-color: var(--accent) !important; }
.studio-source strong { color: var(--accent) !important; }
.source-message { background: transparent !important; border: 0 !important; padding: 2px 0 !important; color: var(--muted); }
.source-message:empty { display: none !important; }
.source-message.warning { color: #ff6b6b; }

/* .primary 버튼 골드 통일 */
button.primary, .primary.studio-wide-btn, #genScriptBtn, #searchBtn, #saveYtKey { background: var(--gold); border: 0; color: #1a1205; font-weight: 800; }
button.secondary { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }

/* ── 설정 페이지 ── */
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .settings { grid-template-columns: 1fr; } }
.set-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.set-card.locked { opacity: 0.7; grid-column: 1 / -1; }
.set-card h3 { margin: 0 0 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.set-tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; font-weight: 400; }
.soon { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 20px; padding: 2px 9px; }
.set-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.set-hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.set-status { display: flex; flex-direction: column; gap: 8px; }
.st-row { display: flex; align-items: center; justify-content: space-between; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 13px; }
.st-row b { font-weight: 700; }
.key-note { background: rgba(245,179,1,0.08); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--muted); }
.linklike { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }