/* 릴스 스튜디오 전용 스타일 — 공통 변수(app/css/style.css)를 그대로 쓴다 */

.reels-page { background: var(--bg); }

/* ── 상단 바 ── */
.rl-top {
  display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.rl-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
}
.rl-back .ic { width: 20px; height: 20px; }
.rl-title { font-size: 16px; font-weight: 700; margin: 0; }
.rl-top-right { margin-left: auto; font-size: 12px; color: #8e8e8e; }

/* ── 본문 ── */
.rl-main { max-width: 935px; margin: 0 auto; padding: 24px 20px 80px; }
.rl-loading, .rl-empty { color: #8e8e8e; font-size: 14px; text-align: center; padding: 40px 0; }
.rl-empty-sm { color: #8e8e8e; font-size: 13px; margin: 6px 0; }
.rl-error { text-align: center; padding: 40px 0; font-size: 14px; }
.rl-hint { font-size: 13px; color: #8e8e8e; line-height: 1.6; margin: 4px 0 10px; }
.rl-hint b { color: var(--text); }

/* ── 목록 ── */
.rl-list-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.rl-list-head .rl-hint { flex: 1; margin: 0; }
.rl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.rl-card {
  text-align: left; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; cursor: pointer; color: var(--text);
  font: inherit; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.rl-card:hover { border-color: #a8a8a8; }
.rl-card-top { display: flex; align-items: center; gap: 8px; }
.rl-card-title {
  font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-card-meta { display: flex; gap: 12px; font-size: 12px; color: #8e8e8e; }
.rl-card-date { font-size: 11px; color: #8e8e8e; }

/* 상태 배지 */
.rl-status {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: #8e8e8e;
}
.st-script  { color: #b46a00; border-color: #b46a00; }
.st-voice   { color: #7b3fbf; border-color: #7b3fbf; }
.st-editing { color: var(--blue); border-color: var(--blue); }
.st-done    { color: #12a150; border-color: #12a150; }

/* 계정 표시 — 계정 색 점 + 핸들 */
.rl-acc { font-size: 12px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.rl-acc::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--acc, #8e8e8e); }

/* ── 상세 ── */
.rl-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rl-back-sm { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
.rl-id { font-size: 13px; color: #8e8e8e; }
.rl-del { margin-left: auto; }

.rl-sec {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-elev); padding: 16px; margin-bottom: 16px;
}
.rl-sec h2 { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.rl-count {
  font-size: 12px; font-weight: 600; color: #8e8e8e;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}

.rl-form { display: flex; flex-direction: column; gap: 10px; }
.rl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rl-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.rl-field input, .rl-field select, .rl-field textarea, .rl-script {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; width: 100%; box-sizing: border-box; resize: vertical;
}
.rl-field input:focus, .rl-field select:focus, .rl-field textarea:focus, .rl-script:focus {
  outline: none; border-color: #a8a8a8;
}
.rl-script { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.rl-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rl-limit { font-size: 12px; color: #8e8e8e; }
.rl-limit code { font-size: 11px; }
.rl-upbtn { position: relative; overflow: hidden; }

/* 파일 목록 */
.rl-files { display: flex; flex-direction: column; gap: 6px; }
.rl-file {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-soft); border-radius: 6px; padding: 7px 10px;
  background: var(--bg-soft); min-width: 0;
}
.rl-file.unknown { opacity: .55; }              /* 허용 목록 밖 확장자 */
.rl-ord { display: flex; flex-direction: column; }
.rl-mv {
  border: 0; background: none; cursor: pointer; color: #8e8e8e;
  font-size: 9px; line-height: 1.1; padding: 1px 4px;
}
.rl-mv:hover { color: var(--text); }
.rl-fname {
  font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-fmeta { font-size: 12px; color: #8e8e8e; white-space: nowrap; }
.rl-file .btn { padding: 4px 10px; font-size: 12px; }

.rl-video { width: 100%; max-height: 70vh; background: #000; border-radius: 6px; }

.rl-next { border-style: dashed; }

/* AI 작업 상태 */
.rl-job { font-size: 13px; color: #8e8e8e; }
.rl-job.bad { color: var(--danger); }

/* ── 단계 완료 배지 + 작업 배너 ── */
.rl-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.st-pill {
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: #8e8e8e; background: var(--bg-soft);
}
.st-pill.on { color: #12a150; border-color: #12a150; background: rgba(18,161,80,.07); }

/* 어디까지 스크롤했든 항상 보이도록 화면 상단에 고정 (2026-08-17 사용자 지시) */
.rl-banner {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
  width: min(700px, 92vw); z-index: 60;
  display: flex; align-items: center; gap: 10px;
  border-radius: 10px; padding: 12px 16px;
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
}
.rl-banner.busy { background: #eaf5ff; border: 1px solid var(--blue); color: #111; }
.rl-banner.bad  { background: #fdeaec; border: 1px solid var(--danger); color: #111; }
@media (prefers-color-scheme: dark) {
  .rl-banner.busy { background: #0b2a44; color: #f5f5f5; }
  .rl-banner.bad  { background: #3a1418; color: #f5f5f5; }
}
.rl-spin {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--blue); border-top-color: transparent;
  animation: rlspin .8s linear infinite;
}
@keyframes rlspin { to { transform: rotate(360deg); } }
.sc-renarr, .sc-narredit { padding: 3px 10px; font-size: 12px; }
.narr-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.narr-row b { padding-top: 8px; }
.narr-in {
  flex: 1; font: inherit; font-size: 13px; color: var(--text); resize: vertical;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;
}
a.sc-narredit { text-decoration: none; }

/* ⑤ 조립 옵션 — 흩어져 있던 설정(원본 소리·배경음악·자막 문구)을 한 박스로 (2026-08-17) */
.rl-optbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 10px 0; padding: 10px 14px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px;
}
.rl-optcap { font-size: 13px; white-space: nowrap; }
.rl-bgmq {
  font: inherit; font-size: 13px; color: var(--text); min-width: 170px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
}
.rl-bgmq:focus { outline: none; border-color: var(--blue); }

/* 접기 카드 — 참고 정보(벤치마크·발행 팁)는 평소에 접어둔다 */
.sc-fold {
  margin-bottom: 10px; padding: 10px 14px; font-size: 13px;
  background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 10px;
}
.sc-fold summary { cursor: pointer; font-weight: 600; }
.sc-fold p, .sc-fold ul { margin: 8px 0 0; }

/* 통합 카드 안 요소 */
.sc-hookline { font-weight: 700; margin: 2px 0 10px; }
/* 화면 위치(크롭) 편집 — 파란 창 = 캔버스에 담길 영역 */
.exv-vwrap {
  position: relative; width: 42%; overflow: hidden; border-radius: 8px;
  align-self: flex-start; background: #000;
}
.exv-vwrap .exv-video { width: 100%; max-height: 62vh; display: block; }
#exv-cropwin {
  position: absolute; border: 2px solid #4da3ff; border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; touch-action: none;
}
/* 최종 영상 보기 — 비율별 탭 */
.fv-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fv-tab { padding: 4px 14px; font-size: 13px; }

.rl-chk { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 13px; cursor: pointer; }
.exv-cr { padding: 3px 10px; font-size: 12px; }
.exv-cropbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px;
}
.exv-audio {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px;
}
.exv-audio select { max-width: 100%; }
.narr-audio {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px;
}
.sc-scenelist { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sc-tagline { margin-top: 10px; }
.narr-refit {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.narr-refit textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }
.narr-in:focus { outline: none; border-color: var(--blue); }

/* 소재 영상 뷰어 + 금지 구간 패널 */
.exv-wrap { display: flex; gap: 16px; align-items: flex-start; }
.exv-video { width: 42%; max-height: 62vh; background: #000; border-radius: 8px; }
.exv-side { flex: 1; min-width: 0; }
.exv-cur, .exv-sel { font-size: 14px; margin-bottom: 6px; }
.exv-sel b { color: var(--danger); }
@media (max-width: 700px) { .exv-wrap { flex-direction: column; } .exv-video { width: 100%; } }

/* 사용 금지 구간 */
.rl-exbtn.has-ex { color: var(--danger); border-color: var(--danger); font-weight: 700; }
.ex-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.ex-row .btn { padding: 3px 10px; font-size: 12px; }

/* 최종 영상 보기 — 완성되면 초록으로 활성화 */
#final-view:disabled { opacity: .45; cursor: not-allowed; }
.btn-final-on { background: #12a150; color: #fff; border-color: #12a150; font-weight: 700; }
.btn-final-on:hover { background: #0e8443; }
.sc-ver {
  font-size: 11px; font-weight: 700; color: var(--blue);
  border: 1px solid var(--blue); border-radius: 999px; padding: 1px 8px;
}
.sc-research { border-color: #b46a00; }
.sc-prev { margin-top: 8px; }
.sc-prev summary { font-size: 12px; color: #8e8e8e; cursor: pointer; }
.sc-old { opacity: .6; margin-top: 6px; }

/* ── ③ 대본 카드 뷰 ── */
.sc-card {
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--bg-soft); padding: 12px 14px; margin-bottom: 10px;
}
.sc-card h3 {
  font-size: 13px; font-weight: 700; margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sc-card p { font-size: 14px; line-height: 1.6; margin: 0; }
.sc-note { font-size: 11px; font-weight: 400; color: #8e8e8e; }
.sc-hook p { font-size: 16px; font-weight: 700; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-grid-one { grid-template-columns: 1fr; }   /* 자막 카드가 숨겨진 기본 모드 — 나레이션 카드 전체 폭 */
.sc-grid .sc-card { margin-bottom: 10px; }
.sc-list { margin: 0; padding-left: 4px; list-style: none; font-size: 13px; line-height: 1.7; }
.sc-list li { margin-bottom: 4px; }
.sc-block { white-space: pre-line; background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.sc-tablewrap { overflow-x: auto; }
.sc-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sc-table th, .sc-table td { border-bottom: 1px solid var(--line-soft); padding: 6px 8px; text-align: left; vertical-align: top; }
.sc-table th { color: #8e8e8e; font-weight: 600; white-space: nowrap; }
.sc-src { white-space: nowrap; color: #8e8e8e; }
.sc-chip {
  display: inline-block; font-size: 13px; font-weight: 600; color: #00376b;
  background: var(--bg-elev); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 3px 10px; margin: 2px 2px;
}
.sc-copy { padding: 3px 10px; font-size: 12px; margin-left: auto; }
.sc-tips { border-style: dashed; }
@media (max-width: 700px) { .sc-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { .sc-chip { color: #7ab8ff; } }

/* 배경음악 선택 */
.rl-bgm { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.rl-bgm select {
  font: inherit; font-size: 13px; font-weight: 400; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 8px; max-width: 240px;
}

@media (max-width: 600px) {
  .rl-row2 { grid-template-columns: 1fr; }
  .rl-list-head { flex-direction: column; }
}