/* 제작 스튜디오 (docs/HUMOR_PRESCRIPTED_SEASON_STUDIO_PLAN.md §7) — common.css 위에 얹는 페이지 전용 스타일.
   ImageEdit 히스토리 계열(.card 유사 카드)을 따르되 스튜디오 레이아웃(좌: 라운드, 우: 탭)을 정의한다. */

.hidden { display: none !important; }

/* common.css 오버라이드: 다크 배경 이미지·전폭 파란 버튼은 스튜디오(도구 성격)에 부적합 */
body {
  background-image: none;
  background-color: #f4f5f7;
  color: #222;
  margin: 0;
}
button { width: auto; padding: 6px 12px; font-size: 13px; font-weight: 600; background-color: #eee; color: #333; }
button:hover { background-color: #e0e0e0; }
#header-login-btn { background-color: #1976d2; color: #fff; }
#header-login-btn:hover { background-color: #125ea8; }

.studio-header {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #e0e0e0; background: #fff;
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.studio-header-left, .studio-header-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.studio-header h1 { font-size: 18px; margin: 0; }
.studio-back { text-decoration: none; font-size: 18px; color: #333; }
.studio-header select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 6px; max-width: 46vw; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: #eee; color: #444;
}
.badge.prescripted { background: #ede7f6; color: #5e35b1; }
/* 성인 레인(humor_adult_studio.html, ADULT_STUDIO_PLAN §7-1 ⑧) — 잘못된 페이지에서 작업하는 실수를 막는 시각 신호 */
.badge.lane-adult { background: #c62828; color: #fff; font-weight: 800; }
body[data-studio-lane="adult"] .studio-header { background: #fff0f3; border-bottom: 2px solid #ef9a9a; }
body[data-studio-lane="adult"] .admin-bar { background: #fce4ec; border-bottom-color: #f8bbd0; }
body[data-studio-lane="adult"] .admin-bar .admin-chip { color: #ad1457; }
.mt-badge.danger { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.badge.live { background: #e8f5e9; color: #2e7d32; }
.badge.st-ONGOING { background: #e3f2fd; color: #1565c0; }
.badge.st-PLANNING { background: #fff8e1; color: #b26a00; }
.badge.st-HOLDING, .badge.st-HALT { background: #fbe9e7; color: #c62828; }
.badge.st-COMPLETE { background: #eceff1; color: #546e7a; }

.admin-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 16px; background: #fff3e0; border-bottom: 1px solid #ffe0b2; font-size: 13px;
}
.admin-bar .admin-chip { font-weight: 700; color: #e65100; }

.studio-main { display: flex; gap: 0; min-height: calc(100vh - 60px); align-items: stretch; }
.round-list-pane {
  width: 300px; min-width: 240px; border-right: 1px solid #e0e0e0; background: #fafafa;
  overflow-y: auto; max-height: calc(100vh - 60px); position: sticky; top: 52px;
}
.pane-title { padding: 10px 12px; font-weight: 700; font-size: 13px; color: #666; }
.round-list { padding: 0 8px 16px; display: flex; flex-direction: column; gap: 6px; }

.round-item {
  border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; padding: 8px 10px;
  cursor: pointer; transition: border-color .15s;
}
.round-item:hover { border-color: #90caf9; }
.round-item.active { border-color: #1976d2; box-shadow: 0 0 0 1px #1976d2 inset; }
.round-item .ri-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.round-item .ri-no { font-weight: 700; font-size: 13px; }
.round-item .ri-title { font-size: 12px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-item .ri-status { font-size: 10px; color: #999; }
/* 발행 순번 배지(docs/HUMOR_PUBLISH_ORDER_PLAN.md §6) — 순서를 지정한 시즌에만 렌더된다.
   margin-right:auto 로 라운드 번호 옆에 붙여, ri-head 의 space-between 이 상태를 오른쪽에 유지하게 한다. */
.round-item .ri-seq {
  margin-right: auto; font-size: 10px; font-weight: 700; color: #6a1b9a;
  background: #f3e5f5; border-radius: 8px; padding: 1px 6px; white-space: nowrap;
}
.stage-chips { display: flex; gap: 2px; margin-top: 5px; font-size: 11px; line-height: 1; }
.stage-chips span { width: 14px; text-align: center; cursor: default; }
.chip-none { color: #ccc; }
.chip-PENDING { color: #f9a825; }
.chip-RUNNING { color: #1e88e5; }
.chip-REVIEW { color: #fb8c00; font-weight: 700; }
.chip-SCHEDULED { color: #8e24aa; }
.chip-APPROVED { color: #2e7d32; }
.chip-FAILED { color: #c62828; font-weight: 700; }
.chip-SKIPPED { color: #90a4ae; }

.round-detail-pane { flex: 1; min-width: 0; padding: 12px 16px 60px; }
.round-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }

.stage-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid #e0e0e0; margin-bottom: 12px; }
.stage-tabs button {
  border: none; background: none !important; padding: 8px 10px; font-size: 13px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; color: #555; white-space: nowrap;
  width: auto; flex: 0 0 auto; font-weight: 500; border-radius: 0;
}
.stage-tabs button:hover { background: #f5f5f5 !important; }
.stage-tabs button.active { border-bottom-color: #1976d2; color: #1976d2; font-weight: 700; }
.stage-tabs button .tab-glyph { margin-left: 3px; font-size: 11px; }

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

/* 히스토리 카드 — ImageEdit history 계열(.history-prompt-item 정신) */
.art-card {
  border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; padding: 10px 12px;
}
.art-card.selected { border-color: #2e7d32; box-shadow: 0 0 0 1px #2e7d32 inset; }
.art-card .ac-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #666; }
.art-card .ac-head .ac-model { font-weight: 700; color: #333; }
.art-card .ac-head .ac-flag { padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.art-card .ac-flag.SELECTED { background: #e8f5e9; color: #2e7d32; }
.art-card .ac-flag.CANDIDATE { background: #eeeeee; color: #666; }
.art-card .ac-flag.REJECTED { background: #ffebee; color: #c62828; }
.art-card .ac-flag.SUPERSEDED { background: #ede7f6; color: #5e35b1; }
.art-card .ac-body { margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.art-card .ac-media img, .art-card .ac-media video { max-width: 220px; max-height: 300px; border-radius: 6px; cursor: pointer; background: #000; }
.art-card .ac-media audio { width: 260px; }
.art-card .ac-refs { display: flex; gap: 4px; flex-wrap: wrap; }
.art-card .ac-refs img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; }
.art-card .ac-refs .ref-role { display: block; font-size: 9px; color: #999; text-align: center; }

details.prompt-box { margin-top: 6px; font-size: 12px; }
details.prompt-box summary { cursor: pointer; color: #1976d2; }
details.prompt-box pre {
  white-space: pre-wrap; word-break: break-word; background: #f7f7f7; border: 1px solid #eee;
  border-radius: 6px; padding: 8px; margin: 6px 0 0; max-height: 320px; overflow-y: auto; font-size: 12px;
}
.kv-json { font-size: 12px; color: #555; }
.kv-json b { color: #333; }

.entry-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.entry-table th, .entry-table td { border: 1px solid #e8e8e8; padding: 6px 8px; text-align: left; vertical-align: top; }
.entry-table th { background: #fafafa; }
.entry-table tr.selected-row { background: #f1f8e9; }

.scene-block { border-left: 3px solid #90caf9; padding-left: 10px; }
.scene-block h4 { margin: 0 0 6px; font-size: 13px; }

/* 모션 i2v 탭(docs/HUMOR_STUDIO_MOTION_I2V_PLAN.md §7) — 씬 헤더 배지 · 제출 프롬프트 · 조작 줄 */
.mt-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: #eef3f8; color: #4a6572; font-size: 10px; font-weight: 600; vertical-align: middle;
}
.mt-badge.ok { background: #e8f5e9; color: #2e7d32; }
.mt-badge.warn { background: #fff3e0; color: #ef6c00; }
.scene-block textarea.mt-prompt {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px; font-size: 12px;
  font-family: inherit; line-height: 1.5; border: 1px solid #cfd8dc; border-radius: 6px; resize: vertical;
}
.scene-block .mt-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin: 6px 0 2px; }
.scene-block .mt-ctl select { font-size: 12px; max-width: 260px; }
/* 아티팩트 실제 과금액 — 계획 대비 실적 비교용 */
.art-card .ac-head .ac-cost { color: #ad1457; font-weight: 700; }

/* 스테이지 시각(KST) — 상태 옆 보조 정보라 눈에 덜 띄게 */
.ap-status .ap-stamp { color: #90a4ae; font-size: 11px; }

/* 생성 중 카드(docs/HUMOR_STUDIO_SELECT_PLAN.md §6) — 눌린 즉시 보이는 진행 표시 */
.art-card.busy { border-style: dashed; background: #fbfdff; }
.art-card .ac-flag.RUNNING { background: #e3f2fd; color: #1565c0; }
.busy-bar { height: 6px; border-radius: 3px; background: #e8eef5; overflow: hidden; margin: 8px 0 2px; }
.busy-bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, #90caf9, #1976d2);
  animation: busy-slide 1.4s ease-in-out infinite;
}
@keyframes busy-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .busy-bar span { animation: none; width: 100%; opacity: 0.6; }
}

.dialogue-line { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed #eee; }
.dialogue-line .dl-speaker { font-weight: 700; min-width: 48px; color: #1565c0; }
.dialogue-line .dl-narr { color: #8e24aa; }
/* 더빙 문구 편집 — 줄 그 자리에서 고치고 그 줄만 재합성 */
.dialogue-line input.dl-text {
  flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; font-family: inherit;
  border: 1px solid #cfd8dc; border-radius: 6px;
}
.dialogue-line input.dl-text:focus { outline: none; border-color: #1976d2; }
.dialogue-line button {
  flex: 0 0 auto; font-size: 11px; padding: 4px 8px; cursor: pointer;
  border: 1px solid #d5dbe3; border-radius: 6px; background: #fff;
}
.dialogue-line button:hover { background: #f0f4ff; border-color: #90caf9; }
/* 합성 대기·진행 중인 줄 — 요청한 문구를 그대로 보여 주고 잠근다 */
.dialogue-line.busy { background: #f7fbff; border-radius: 6px; }
.dialogue-line.busy input.dl-text { background: #fff; color: #37474f; border-style: dashed; }
.dialogue-line .ac-flag.RUNNING { padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: 700; white-space: nowrap; }

.notice { font-size: 12px; color: #888; background: #fafafa; border: 1px dashed #ddd; border-radius: 6px; padding: 8px 10px; }
.empty-note { color: #999; font-size: 13px; padding: 24px 0; text-align: center; }

.preview-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.preview-modal .preview-body { max-width: 92vw; max-height: 90vh; }
.preview-modal img, .preview-modal video { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.preview-close {
  position: absolute; top: 12px; right: 16px; font-size: 28px; background: none; border: none; color: #fff; cursor: pointer;
}

/* ── P5 관리자 컨트롤 (§7-2 하단) ─────────────────────── */
.admin-bar button, .admin-panel button, .ac-actions button {
  width: auto; display: inline-block; font-size: 12px; padding: 4px 10px; margin: 0;
  background: #fff; color: #333; border: 1px solid #ccc; border-radius: 6px; cursor: pointer;
}
.admin-bar button:hover, .admin-panel button:hover, .ac-actions button:hover { background: #f0f4ff; border-color: #90caf9; }
.admin-bar button.on { background: #e8f5e9; border-color: #66bb6a; }
.admin-panel button.primary, .ac-actions button.primary { background: #1976d2; border-color: #1976d2; color: #fff; }
.admin-panel button.primary:hover { background: #135ba1; }
.admin-panel button.danger, .ac-actions button.danger { color: #c62828; border-color: #ef9a9a; }
.admin-panel button.danger:hover { background: #ffebee; }
.review-badge { font-size: 12px; padding: 2px 10px; border-radius: 10px; background: #eee; color: #666; margin-left: auto; }
.review-badge.hot { background: #fff3e0; color: #e65100; font-weight: 700; }

.admin-panel {
  margin-top: 14px; border-top: 2px solid #1976d2; background: #f8fbff;
  border-radius: 0 0 8px 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.admin-panel .ap-status { font-size: 13px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-panel .ap-status .ap-auto { margin-left: auto; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.admin-panel .ap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.admin-panel label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #444; }
.admin-panel input[type="text"], .admin-panel input[type="number"], .admin-panel select, .admin-panel textarea {
  font-size: 12px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; background: #fff; width: auto;
}
.admin-panel textarea { width: 100%; resize: vertical; font-family: inherit; }
.admin-panel .ap-upload { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 발행 순서 편집(docs/HUMOR_PUBLISH_ORDER_PLAN.md §6) — 발행 완료 행은 흐리게 고정 */
.admin-panel .po-list { display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto; }
.admin-panel .po-item {
  display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 6px;
  border: 1px solid #e3ecf5; border-radius: 6px; background: #fff;
}
.admin-panel .po-item.po-locked { opacity: 0.5; background: #f5f5f5; }
.admin-panel .po-seq { min-width: 20px; font-weight: 700; color: #6a1b9a; text-align: right; }
.admin-panel .po-no { min-width: 34px; font-weight: 700; }
.admin-panel .po-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }
.admin-panel .po-btns { display: flex; gap: 3px; flex: 0 0 auto; }
.admin-panel .po-btns button { padding: 1px 6px; font-size: 12px; line-height: 1.4; }
.admin-panel .po-done { font-size: 11px; color: #999; }
/* 조립 씬 컷 목록(ASSEMBLY_SELECT_PLAN §4-1) */
.admin-panel .asm-scenes { display: flex; flex-direction: column; gap: 4px; }
.admin-panel .asm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; padding: 4px 6px; border: 1px solid #e3ecf5; border-radius: 6px; background: #fff; }
.admin-panel .asm-row.excluded { opacity: 0.45; }
.admin-panel .asm-row .asm-inc { font-weight: 600; white-space: nowrap; }
.admin-panel .asm-thumb { height: 44px; width: auto; border-radius: 4px; object-fit: cover; }
.admin-panel .asm-meta { color: #666; white-space: nowrap; }
.admin-panel input[type="file"] { font-size: 11px; border: none; padding: 0; }

.ac-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.ac-actions a { text-decoration: none; }
/* 선택 상태(docs/HUMOR_STUDIO_SELECT_PLAN.md §1-1) — 버튼의 '부재'로 상태를 표현하지 않는다.
   picked = 지금 쓰이는 버전 / muted = 산출물이 없어 고를 수 없는 버전(사유는 title). */
.ac-actions button.picked {
  background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; font-weight: 700; cursor: default;
}
.ac-actions button.muted { background: #fafafa; border-color: #e0e0e0; color: #aaa; cursor: not-allowed; }
.ac-actions button.picked:hover { background: #e8f5e9; border-color: #a5d6a7; }
.ac-actions button.muted:hover { background: #fafafa; border-color: #e0e0e0; }

/* ── 앵커 참조(ref_male/ref_female) 스트립 + 내 이미지 선택 모달 ── */
.ref-row .ref-role-label { font-weight: 700; min-width: 64px; color: #444; }
.ref-thumbs { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ref-thumb { position: relative; display: inline-block; }
.ref-thumb img {
  width: 56px; height: 74px; object-fit: cover; border-radius: 6px;
  border: 2px solid #ddd; cursor: pointer; display: block;
}
.ref-thumb.selected img { border-color: #2e7d32; cursor: default; box-shadow: 0 0 0 2px #a5d6a7; }
.ref-thumb .ref-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  line-height: 15px; font-size: 12px; border-radius: 50%; background: #fff;
}
.ref-none { color: #999; font-size: 12px; }

.mypic-panel {
  background: #fff; border-radius: 10px; padding: 14px 16px;
  width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 10px;
}
.mypic-grid {
  overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; min-height: 120px;
}
.mypic-grid .mypic-thumb {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px;
  border: 2px solid #eee; cursor: pointer;
}
.mypic-grid .mypic-thumb:hover { border-color: #1976d2; }
.mypic-more {
  align-self: center; font-size: 12px; padding: 5px 18px;
  background: #fff; border: 1px solid #ccc; border-radius: 6px; cursor: pointer;
}
.mypic-more:hover { background: #f0f4ff; border-color: #90caf9; }

/* 프롬프트 한/영 번역 버튼(js/prompt-translate.js) — 입력창을 .prompt-tr-wrap 이 감싸고
   그 아래에 버튼 줄이 붙는다. 감싸기 때문에 .ap-row 의 flex 배분을 wrap 이 이어받아야 한다. */
.prompt-tr-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.prompt-tr-bar { display: flex; gap: 4px; align-self: flex-start; }
.admin-panel .prompt-tr-btn, .scene-block .prompt-tr-btn, .prompt-tr-btn {
  width: auto; display: inline-block; font-size: 11px; padding: 2px 8px; margin: 0;
  background: #fff; color: #555; border: 1px solid #ccc; border-radius: 6px; cursor: pointer;
}
.prompt-tr-btn:hover { background: #f0f4ff; border-color: #90caf9; }
.prompt-tr-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 760px) {
  .studio-main { flex-direction: column; }
  .round-list-pane { width: auto; max-height: 220px; position: static; border-right: none; border-bottom: 1px solid #e0e0e0; }
}