/* Auto-generated bundle: v2_ui.bundle.css */
/* Source dir: /home/ymjeon/project/JJCTV/_jjctv/static/css/v2_ui */

/* =============================================================================
  00_tokens.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 00_tokens.css
============================================================================= */
:root{
  --bg:#f6f7f9;
  --paper:#fff;
  --ink:#111;
  --muted:#667085;
  --border:#e4e7ec;
  --primary:#111;
  --accent:#ff4d4f;
  --accent-ink:#fff;
  --chip:#f2f4f7;
  --side-panel-width-narrow:340px;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-1:0 10px 24px rgba(15,23,42,.06);
  --shadow-2:0 18px 42px rgba(15,23,42,.10);
  --ring:0 0 0 3px rgba(22,119,255,.18);
}


/* =============================================================================
  01_base.css
============================================================================= */
/* =============================================================================
  01_base.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 01_base.css
============================================================================= */

html { scrollbar-gutter: stable; }
body { overflow-y: scroll; }

*{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Spoqa Han Sans Neo","Noto Sans KR",system-ui,sans-serif;

  /* Theme background (v3 polish) */
  /* "하얀 종이" 대비가 너무 평면적이라 아주 은은한 그라데이션 */
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(22,119,255,.07), transparent 60%),
    radial-gradient(1000px 600px at 85% 10%, rgba(255,77,79,.06), transparent 55%),
    var(--bg);
}

/* Headings polish */
h2{ font-size:18px; letter-spacing:-.2px; }
h3{ letter-spacing:-.15px; }

/* Inputs / selects / textarea (global) */
input[type="text"],
input[type="number"],
textarea,
select{
  border:1px solid var(--border);
  border-radius: 12px;
  padding:8px 10px;
  font-size:13px;
  outline:none;
  background:#fff;
  transition: box-shadow .12s ease, border-color .12s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus{
  border-color: rgba(22,119,255,.55);
  box-shadow: var(--ring);
}

/* Scrollbar (supported browsers only) */
*::-webkit-scrollbar{ width: 10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(17,24,39,.16); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track{ background: transparent; }


/* =============================================================================
  02_layout.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 02_layout.css
============================================================================= */

.container{ max-width:1600px; width:min(1600px, 100%); margin:20px auto; padding:0 18px; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.toolbar-left{ display:flex; align-items:center; gap:8px; min-width:0; }
.toolbar-right{ display:flex; align-items:center; gap:8px; min-width:0; }
.title{ font-size:18px; font-weight:600; }

.card{
  background:var(--paper);
  border-radius: var(--radius-lg);
  border:1px solid rgba(228,231,236,.9);
  padding:16px;
  box-shadow: var(--shadow-1);
  /* grid 안에서 내용이 길어질 때 컬럼이 흔들리는 현상 방지 */
  min-width:0;
}

.grid{ display:grid; gap:16px; }

.cols-2{ 
  grid-template-columns:minmax(460px, 1.25fr) minmax(520px, 2fr); 
  align-items:start; 
}

/* form/modal용 2컬럼: 반반 */
.cols-2-eq{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 1100px){
  .cols-2{ grid-template-columns:1fr; }
  .preview-frame{ max-height:none; }
}

@media (max-width: 420px){
  .preview-frame{ max-height:none; }
}


/* =============================================================================
  03_buttons.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 03_buttons.css
============================================================================= */

.btn{
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap; /* 줄바꿈 방지 */
}
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

label.btn.toggle{ justify-content:center; }
label.btn.toggle input{ display:none; }
label.btn.toggle:has(input:checked){
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* v3 polish */
.btn{
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
.btn:active{ transform: translateY(0px); box-shadow: none; }
.btn.primary{
  background: linear-gradient(180deg, #111827, #0b1220);
  border-color:#0b1220;
}
.btn.accent{
  background: linear-gradient(180deg, #ff4d4f, #e11d48);
  border-color:#e11d48;
}
.btn.ghost:hover{
  background: rgba(17,24,39,.04);
}


/* =============================================================================
  04_tabs.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 04_tabs.css
============================================================================= */

.tab-strip{
  display:flex;
  gap:8px;
  margin:8px 0 12px;
  padding:4px;
  border-radius:999px;
  background: var(--chip);
  border:1px solid var(--border);
  width: fit-content;
}

.tab-btn{
  border:0;
  background: transparent;
  padding:8px 14px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:700;
  color:#475467;
}

.tab-btn.active{
  background:#fff;
  color:#111;
  box-shadow: 0 2px 10px rgba(15,23,42,.08);
}


/* =============================================================================
  05_utilities.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 05_utilities.css
============================================================================= */

.divider{ height:1px; background: rgba(228,231,236,.9); margin:12px 0; }

.kv{ display:flex; align-items:center; min-width:0; }
.muted{ color:var(--muted); font-size:12px; }
.hidden{ display:none!important; }

.badge{
  background:#fff;
  border:1px solid var(--border);
  padding:2px 8px;
  border-radius:8px;
  font-size:12px;
  color:#475467;
  white-space:nowrap; /* 줄바꿈 방지 */
}

.stack{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.help{ font-size:11px; color:var(--muted); line-height:1.4; }

/* cols-2 그리드 안에서 특정 항목을 2칸(한 줄)으로 확장 */
.span-2{
  grid-column: 1 / -1;
}

/* 공용: 그리드에서 "전체 줄" */
.grid-span-full{ 
  grid-column: 1 / -1; 
}

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


/* =============================================================================
  06_preview.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 06_preview.css
============================================================================= */

.preview-frame{
  position:relative;
  overflow:hidden;

  /* ✅ 자막뉴스: 16:9 고정 + 기준 폭(20% 업) + 좁아지면 줄어듦 */
  width: min(864px, 100%);
  aspect-ratio: 16 / 9;
  height: auto;

  margin-inline:auto;

  border-radius: var(--radius-md);
  border: 1px solid rgba(228,231,236,.9);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
}

#preview-img{
  width:100%;
  height:100%;
  object-fit:contain; /* ✅ 비율 유지, 잘림 방지 */
  display:block;
  z-index:10;
  position:relative;
  background:#000; /* 레터박스 영역 */
}

.preview-footer{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}

.preview-toolbar{
  display:flex;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.preview-toolbar .btn{ padding:6px 10px; font-size:12px; }

/* placeholder (공용) */
.preview-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-color:#1a1a1a;
  color:#fff;
  z-index:1;
}
/* placeholder typography (공통) */
.preview-placeholder .preview-placeholder-icon{
	font-size:32px;
	margin-bottom:8px;
	line-height:1;
}

.preview-placeholder .preview-placeholder-title{
	font-weight:600;
	font-size:14px;
	color:#fff;
	margin-bottom:4px;
}

.preview-placeholder .preview-placeholder-hint{
	font-size:12px;
	color:#98a2b3;
	line-height:1.4;
}

.preview-placeholder{
    background:
      radial-gradient(900px 400px at 30% 0%, rgba(255,77,79,.20), transparent 55%),
      radial-gradient(900px 400px at 80% 20%, rgba(22,119,255,.18), transparent 55%),
      linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.86));
}


/* =============================================================================
  07_articles.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 07_articles.css
============================================================================= */

.articles-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - 180px);
  overflow-y:auto;
  scrollbar-gutter: stable;
  min-width:0;
  padding-right:2px; /* 스크롤바로 인해 내용이 딱 붙어 보이는 현상 완화 */
}
.article-item{
  border-radius:12px;
  border:1px solid var(--border);
  padding:8px 10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}
.article-item-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  min-width:0;
}
.article-title{
  font-weight:500;
  font-size:13px;
  min-width:0;
}
.article-meta{ font-size:11px; color:var(--muted); white-space:nowrap; }
.article-body{ font-size:12px; color:#333; line-height:1.5; overflow-wrap:anywhere; word-break:break-word; }
.article-index-badge{
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  white-space:nowrap;
}

.caption-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin:6px 0 10px;
}
.caption-toolbar .caption-actions{ display:flex; gap:6px; flex-wrap:wrap; }


/* =============================================================================
  08_modals.css
============================================================================= */
/* =============================================================================
  08_modals.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 08_modals.css
============================================================================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(17,17,17,.35);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50000;
}

.modal{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  width:100%;
  max-width:900px;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;

  box-shadow: var(--shadow-2);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  gap:10px;
}
.modal-body{ padding:12px 16px; overflow:auto; }
.modal-footer{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  padding:12px 16px;
  border-top:1px solid var(--border);
}

.list{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:8px;
}
.news-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  border:1px solid #eee;
  border-radius:10px;
  padding:10px;
}
.news-title{ font-size:13px; }

.search{ display:flex; gap:8px; align-items:center; }
.search input{ flex:1; }

/* modal backdrop (v3 polish) */
.modal-backdrop{ backdrop-filter: none; }

.simple-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,0.35);
}
.simple-modal{
  width:min(560px, 92vw);
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,0.18);
  overflow:hidden;
}
.simple-modal-header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.simple-modal-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.simple-modal-icon{
  width:28px; height:28px;
  border-radius:10px;
  background:#fff5f5;
  border:1px solid #ffe3e3;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex:0 0 auto;
}
.simple-modal-body{ padding:14px 16px; }
.simple-modal-message{
  font-size:13px;
  color:#333;
  line-height:1.6;
  white-space:pre-line;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
}
.simple-modal-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:12px;
  flex-wrap:wrap;
}

/* news row hover (v3 polish) */
.news-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.07);
  border-color: rgba(208,213,221,.9);
}

/* =============================================================================
  Export modal (내보내기 전용)
============================================================================= */

/* 내보내기 모달 폭 */
.modal.export-modal{
  max-width: 800px;
}

.export-help{ margin-bottom:12px; }

.export-profile-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.export-profile-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  min-width:0;
}

.export-profile-card input{
  display:none; /* 체크박스 숨기고 카드 전체를 토글로 */
}

.export-profile-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  background:var(--chip);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
}

.export-profile-text{ min-width:0; }
.export-profile-title{ font-weight:700; font-size:13px; }
.export-profile-desc{ font-size:11px; line-height:1.3; }

.export-profile-card:has(input:checked){
  border-color: rgba(255,77,79,.55);
  box-shadow: 0 0 0 3px rgba(255,77,79,.12);
  background: linear-gradient(180deg, #ffffff, #fff7f7);
}
.export-profile-card:has(input:checked) .export-profile-icon{
  background:#fff0f0;
  border:1px solid #ffe3e3;
}

/* =============================================================================
  Export 모달 - 미리보기 "준비중" placeholder (보드 v2 스타일과 동일)
  ⚠️ 전역 .preview-placeholder 덮어쓰기 방지: #export-modal-overlay로 스코프 제한
============================================================================= */

.export-preview-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  position: relative;
}
/* [신규] 9:16 세로형 (쇼츠 전용) - 추가 */
/* HTML 사용법: <div class="export-preview-frame shorts-mode"> */
.export-preview-frame.shorts-mode {
  aspect-ratio: 9 / 16;   /* 비율 변경 */
  width: auto;            /* 가로 꽉 채움 해제 (너무 커짐 방지) */
  height: 100%;           /* 높이 기준 */
  max-height: 55vh;       /* 모달 밖으로 나가지 않게 높이 제한 */
  margin: 0 auto;         /* 중앙 정렬 */
}
.export-preview-frame video,
.export-preview-frame img,
.export-preview-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 메인 보드에서 쓰던 placeholder 스타일을 "모달 내부"에서만 적용 */
#export-modal-overlay .preview-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /* 보드 v2 느낌 */
  background: linear-gradient(135deg, rgba(97, 60, 123, 0.92), rgba(26, 45, 84, 0.96));
  color: #fff;
}

#export-modal-overlay .preview-placeholder .pp-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

#export-modal-overlay .preview-placeholder .pp-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff;
}

#export-modal-overlay .preview-placeholder .pp-sub {
  font-size: 12px;
  line-height: 1.35;
  color: #98a2b3;
}

#export-modal-overlay .preview-placeholder .pp-sub b {
  color: #fff;
  font-weight: 700;
}


/* =============================================================================
  08_caption_prompt.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 08_caption_prompt.css
============================================================================= */

/* =============================================================================
 * 캡션 프롬프트 카드(뉴스 선택 모달 내부)
 * ============================================================================= */
.caption-knobs-card {
    padding: 12px;
    margin-top: 10px;
  }
  
  .caption-knobs-head {
    justify-content: space-between;
    gap: 10px;
  }
  
  .caption-knobs-title {
    font-size: 13px;
  }
  
  .caption-knobs-summary {
    font-size: 12px;
    white-space: nowrap;
  }
  
  .caption-knobs-overwrite {
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  
  .caption-knobs-toggle {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .caption-knobs-help {
    margin-left: auto;
  }
  
  .caption-knobs-tabs {
    margin-top: 10px;
  }
  
  .caption-knobs-panel-help {
    line-height: 1.45;
  }
  
  /* 옵션 입력 정렬 */
  .caption-knobs-opt-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  
  .caption-knobs-divider {
    width: 1px;
    height: 18px;
    background: #eee;
    display: inline-block;
  }
  
  .caption-knobs-opt-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
  }
  
  .caption-knobs-opt-input {
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
  }
  
  .caption-knobs-opt-input-xs { width: 64px; }
  .caption-knobs-opt-input-sm { width: 72px; }
  .caption-knobs-opt-input-md { width: 92px; }
  
  .caption-knobs-opt-row-2 {
    margin-top: 10px;
  }
  
  .caption-knobs-help-2 {
    flex: 1;
    min-width: 220px;
  }
  
  /* 자율 프롬프트 textarea */
  .caption-knobs-custom {
    gap: 8px;
  }
  
  .caption-knobs-custom-ta {
    width: 100%;
    min-height: 220px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
  }
  
  .caption-knobs-custom-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .caption-knobs-custom-status {
    margin-right: auto;
    font-size: 12px;
  }


/* =============================================================================
  09_panels.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 09_panels.css
============================================================================= */

.template-panel-overlay,
.design-panel-overlay,
.caption-panel-overlay,
.layout-panel-overlay,
.background-panel-overlay,
.bgm-panel-overlay,
.tts-panel-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0);
  z-index:2005;
  transition:background .22s ease;
  overflow:hidden;
  pointer-events:none;
  display:flex;
  justify-content:flex-end;
}
.template-panel-overlay.open,
.design-panel-overlay.open,
.caption-panel-overlay.open,
.layout-panel-overlay.open,
.background-panel-overlay.open,
.bgm-panel-overlay.open,
.tts-panel-overlay.open{
  background:rgba(15,23,42,0.25);
  pointer-events:auto;
}

.template-panel,
.design-panel,
.caption-panel,
.layout-panel,
.background-panel,
.bgm-panel,
.tts-panel{
  position:absolute;
  top:0; bottom:0; right:0;
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow:-16px 0 32px rgba(15,23,42,.12);
  padding:16px;
  transform:translateX(100%);
  transition:transform .22s ease;
  overflow-y:auto;
  z-index:2001;
}

.template-panel-overlay.open .template-panel,
.design-panel-overlay.open .design-panel,
.caption-panel-overlay.open .caption-panel,
.layout-panel-overlay.open .layout-panel,
.background-panel-overlay.open .background-panel,
.bgm-panel-overlay.open .bgm-panel,
.tts-panel-overlay.open .tts-panel{
  transform:translateX(0);
}

/* 패널 섹션 박스(톤 통일) */
.template-panel .section,
.design-panel .section,
.caption-panel .section,
.layout-panel .section,
.background-panel .section,
.bgm-panel .section,
.tts-panel .section{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
  min-width:0;
}

/* 체크박스 라벨이 전체폭을 먹지 않게 */
.inline-check{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  width:auto;
  max-width:100%;
}

/* 패널 내부 grid 통일 */
.template-panel .grid,
.design-panel .grid,
.caption-panel .grid,
.layout-panel .grid,
.background-panel .grid,
.bgm-panel .grid,
.tts-panel .grid{
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}
.template-panel .grid.cols-2,
.design-panel .grid.cols-2,
.caption-panel .grid.cols-2,
.layout-panel .grid.cols-2,
.background-panel .grid.cols-2,
.bgm-panel .grid.cols-2,
.tts-panel .grid.cols-2{
  grid-template-columns:1fr 1fr;
}

/* overlay blur off (v3 polish) */
.template-panel-overlay.open,
  .design-panel-overlay.open,
  .caption-panel-overlay.open,
  .layout-panel-overlay.open,
  .background-panel-overlay.open,
  .bgm-panel-overlay.open,
  .tts-panel-overlay.open{
    backdrop-filter: none;
  }

/* panel section background (v3 polish) */
.template-panel .section,
  .design-panel .section,
  .caption-panel .section,
  .layout-panel .section,
  .background-panel .section,
  .bgm-panel .section,
  .tts-panel .section{
    background: linear-gradient(180deg, #ffffff, #fbfcfe);
    border-radius: var(--radius-md);
  }


/* =============================================================================
  10_custom_select.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 10_custom_select.css
============================================================================= */

.custom-select-wrapper{ position:relative; user-select:none; width:100%; }

.custom-select-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  font-size:13px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  min-height:40px;
  gap:10px;
}
.custom-select-trigger img{ height:24px; width:auto; object-fit:contain; }

.custom-options{
  position:absolute;
  top:100%;
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  z-index:9999;
  max-height:min(70vh, 720px);
  overflow-y:auto;
  overscroll-behavior: contain;
  display:none;
}
.custom-select-wrapper.open .custom-options{ display:block; }

.custom-option{
  padding:12px 10px !important;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-bottom:1px solid #f2f4f7;
}
.custom-option:hover{ background-color:#f6f7f9; }
.custom-option img{ width:100%; height:40px; object-fit:contain; }
.custom-option span{ font-size:11px; color:#333; }

/* 템플릿 셀렉트: 썸네일은 16:9 */
#wrapper-template-select .custom-option img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
#wrapper-template-select .custom-select-trigger img{
  height:40px;
  width:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* -----------------------------
   1) 트리거(닫힌 상태) - 그대로
----------------------------- */
#wrapper-font-header .custom-select-trigger,
#wrapper-font-body .custom-select-trigger{
  overflow:hidden;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

#wrapper-font-header .custom-select-trigger .selected-text,
#wrapper-font-body .custom-select-trigger .selected-text{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}

#wrapper-font-header .custom-select-trigger img,
#wrapper-font-body .custom-select-trigger img{
  width:30px;
  height:24px;
  flex:0 0 auto;
  display:block;
  object-fit:cover;
  object-position:left center;
  border-radius:6px;
}

#wrapper-font-header .custom-select-trigger .selected-text span,
#wrapper-font-body .custom-select-trigger .selected-text span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* -----------------------------
   2) 옵션(열린 목록) - 여기서부터 핵심
   - 옵션에서 img가 잘리는 걸 막고
   - 가운데 정렬로 보이게 함
----------------------------- */

/* 옵션 컨테이너 */
#wrapper-font-header .custom-options,
#wrapper-font-body .custom-options{
  padding:8px;              /* 필요하면 더 줄여도 됨 */
}

/* 옵션 한 줄 */
#wrapper-font-header .custom-options .custom-option,
#wrapper-font-body .custom-options .custom-option{
  display:block;
  padding:10px 12px;
}

/* ✅ 옵션 안의 "샘플 이미지"는 contain+center 로 덮어쓰기 */
#wrapper-font-header .custom-options .custom-option img,
#wrapper-font-body .custom-options .custom-option img{
  width:100%;
  height:28px;              /* 샘플 박스 높이(원하는 값으로) */
  display:block;
  object-fit:contain;       /* ✅ 안 잘리게 */
  object-position:center;   /* ✅ 가운데 */
  border-radius:10px;
}

/* (선택) 옵션의 샘플이 들어가는 박스가 따로 없어서
   이미지가 꽉 차 보이면, 살짝 패딩을 주고 싶을 때 */
#wrapper-font-header .custom-options .custom-option .sample-box,
#wrapper-font-body .custom-options .custom-option .sample-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
}

/* -----------------------------
   3) @media 부분 버그 수정
----------------------------- */
@media (max-width: 360px){
  #wrapper-font-header .custom-select-trigger img,
  #wrapper-font-body .custom-select-trigger img{
    width:24px;   /* 30 -> 24 같이 더 줄이는 게 맞음 */
  }
}


/* =============================================================================
  11_news_tools.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 11_news_tools.css
============================================================================= */

.news-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.news-tools-left{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }
.news-tools-right{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0; }

.news-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:#344054;
  background:#fff;
  white-space:nowrap;
}

.tag-new,
.tag-today{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  margin-left:6px;
  transform: translateY(-1px);
  white-space:nowrap;
}
.tag-new{ background:var(--accent); color:var(--accent-ink); }
.tag-today{ background:#1677ff; color:#fff; }

.crawl-status{
  margin-top:10px;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.crawl-status strong{ font-size:12px; white-space:nowrap; }
.crawl-status .muted{ font-size:12px; }


/* =============================================================================
  12_layout_panel.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 12_layout_panel.css
============================================================================= */

/* ---------------------------------------------------------------------------
  0) 안전장치: 레이아웃 패널은 가로 튐 방지
--------------------------------------------------------------------------- */
.layout-panel{
  overflow-x:hidden;
}

/* ---------------------------------------------------------------------------
  1) 섹션 컨테이너(공통)
--------------------------------------------------------------------------- */
.layout-box{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.layout-section-title{
  font-size:12px;
  font-weight:700;
  color:#111;
}

.layout-panel .stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.layout-panel select{
  width:100%;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:13px;
}

.layout-panel input[type="text"]{
  width:100%;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:13px;
}

/* ---------------------------------------------------------------------------
  2) "기본" 섹션 (레이아웃 타입 / 페이지 배분) - 핵심 정렬
--------------------------------------------------------------------------- */
.layout-box.layout-basic{
  padding:12px;

  /* ✅ 여기만 조절하면 전체 폭 밸런스가 같이 바뀜 */
  --seg-w: 95px;     /* 기본 seg 폭 */
  --mini-w: 62px;     /* 숫자+스피너(미니 스테퍼) 전체 폭 */
  --ctl-gap: 6px;     /* seg <-> mini-stepper 간격 */
}

/* 2줄 동일 그리드: [라벨 고정폭] [컨트롤] */
.layout-basic-row{
  display:grid;
  grid-template-columns: 82px 1fr;
  align-items:center;
  column-gap:5px;
}

.layout-basic-label{
  font-size:12px;
  font-weight:600;
  color:#344054;
  white-space:nowrap;
  line-height:1.2;
}

/* 오른쪽 컨트롤: 왼쪽 정렬 + 낑김 완화 */
.layout-basic-control{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--ctl-gap);
  flex-wrap:nowrap;
  min-width:0;
}
/* ✅ 컨트롤(오른쪽 영역) 총폭을 통일 (row1/row2 동일)
   - 패널이 좁아지면 100%로 줄어들어 튀어나가지 않음 */
   .layout-box.layout-basic .layout-basic-control{
  width: calc(var(--seg-w) + var(--ctl-gap) + var(--mini-w));
  max-width: 100%;
}

/* ✅ seg는 컨트롤 폭을 채우되, 좁아지면 줄어들 수 있게 */
.layout-box.layout-basic .layout-basic-control .seg{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;                 /* 기존 width:var(--seg-w) 제거 */
  justify-content: space-between;
}
.layout-box.layout-basic .layout-basic-control .seg .seg-btn{
  flex: 1 1 0;
}

/* ✅ row2의 숫자칸(mini-stepper)은 고정폭 유지 */
.layout-box.layout-basic .layout-basic-control .mini-stepper{
  flex: 0 0 var(--mini-w);
  width: var(--mini-w);
}

/* ---------------------------------------------------------------------------
  3) Segmented Chips (공통)
--------------------------------------------------------------------------- */
.seg{
  position:relative;
  display:inline-flex;
  gap:4px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--chip);
  white-space:nowrap;
  min-width:0;
  max-width:100%;
}

.seg input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.seg-tight .seg-btn{
  padding:6px 10px;
  border:0;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  line-height:1;
  background:transparent;
  color:#475467;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-width:0;
}

.seg input[type="radio"]:checked + .seg-btn{
  background:#fff;
  color:#111;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

/* ---------------------------------------------------------------------------
  4) mini numeric field (items-per-page) - 커스텀 스피너(항상 ▲▼ 표시)
--------------------------------------------------------------------------- */
.mini-field{
  display:inline-flex;
  align-items:center;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  min-height:30px;
  white-space:nowrap;
  flex:0 0 auto;
}

/* ✅ 네이티브 스피너 제거(커스텀 ▲▼로 통일) */
#items-per-page::-webkit-outer-spin-button,
#items-per-page::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
#items-per-page{
  -moz-appearance:textfield;
  appearance:textfield;
}

/* mini-stepper: 숫자+▲▼ 전체 폭 고정 */
.mini-stepper{
  position:relative;
  width:var(--mini-w);
  box-sizing:border-box;
  padding-right:18px; /* ▲▼ 영역 */
}

/* 숫자 입력 폭(조금만 슬림) */
.mini-stepper input{
  width:36px;
  min-width:36px;
  max-width:36px;
  border:0;
  outline:0;
  font-size:12px;
  font-weight:700;
  background:transparent;
  padding:0;
  text-align:center;
}

/* 커스텀 ▲▼ */
.mini-stepper .stepper{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.mini-stepper .step{
  width:14px;
  height:12px;
  line-height:12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fff;
  font-size:9px;
  padding:0;
  cursor:pointer;
}

.mini-stepper .step:active{
  transform:translateY(1px);
}

/* disabled */
.mini-field input:disabled{
  opacity:.45;
}


/* =============================================================================
  13_bgm_panel.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 13_bgm_panel.css
============================================================================= */

/* ===== BGM: Loop Toggle (checkbox -> toggle UI) ===== */
.toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle-ui{
  width:42px;
  height:24px;
  margin-right:8px; 
  border-radius:999px;
  border:1px solid var(--border);
  background:#f2f4f7;
  position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.toggle-ui::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.12);
  transition:transform .15s ease;
}
.toggle input:checked + .toggle-ui{
  background:var(--accent);
  border-color:var(--accent);
}
.toggle input:checked + .toggle-ui::after{
  transform:translateX(18px);
}


/* =============================================================================
  14_shorts.css
============================================================================= */
/* =============================================================================
  14_shorts.css
============================================================================= */

/* 
 * 목적: 쇼츠 UI 공용(토픽 탭/헤더 유틸/모달/프로그레스/공용 hidden)
 * 생성일: 260101
 * 수정일: 260102 (정리/통합)
 */

/* =============================================================================
 * topic 탭
 * - [data-role="topicTabs"]
 * ============================================================================= */
 [data-role="topicTabs"] .topic-tab,
 [data-role="topicTabs"] .tab-btn{
	 border:1px solid #cbd5e1;
	 background:#f8fafc;
	 color:#0f172a;
	 padding:8px 10px;
	 border-radius:10px;
	 font-size:13px;
	 font-weight:700;
	 cursor:pointer;
 }
 
 [data-role="topicTabs"] .topic-tab.active,
 [data-role="topicTabs"] .tab-btn.active{
	 background:#111827;
	 border-color:#111827;
	 color:#ffffff;
 }
 
 /* =============================================================================
  * 쇼츠: 토픽 헤더(목표시간/선택시간/시간순 버튼) UI
  * - shorts_candidates_topics.js ensureHeaderControls()에서 사용하는 클래스
  * ============================================================================= */
 .shorts-topic-time-info{
	 font-size:12px;
	 margin-right:6px;
	 color:var(--muted, #64748b);
	 font-weight:800;
 }
 /* 쇼츠 헤더: 제목(좌) + 컨트롤(우) 정렬 */
.shorts-topic-header-row{
	display:flex;
	align-items:center;
	gap:10px;
}

.shorts-topic-header-actions{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:8px;
}

 .shorts-topic-target-mmss{
	 width:64px;
	 font-size:12px;
	 padding:6px 8px;
	 border-radius:8px;
	 border:1px solid var(--border, #e2e8f0);
	 background:#fff;
	 color:#0f172a;
	 font-weight:900;
	 outline:none;
 }
 
 .shorts-topic-target-mmss::placeholder{
	 color:#94a3b8;
	 font-weight:800;
 }
 
 /* =============================================================================
  * preview-render modal open/close (no inline style)
  * ============================================================================= */
 #shorts-preview-render-modal-overlay{
	 display:none;
	 align-items:center;
	 justify-content:center;
 }
 
 #shorts-preview-render-modal-overlay.is-open{
	 display:flex;
 }
 
 /* =============================================================================
  * shorts_source_modal.js: inline style 제거용
  * ============================================================================= */
 
 /* 파일 리스트 row */
 #shorts-files-tbody tr.shorts-file-row{
	 cursor:pointer;
 }
 
 #shorts-files-tbody tr.shorts-file-row.is-clicked{
	 background:rgba(0,0,0,0.06);
 }
 
 #shorts-files-tbody tr.shorts-file-row.is-selected{
	 background:rgba(0,0,0,0.10);
	 outline:2px solid rgba(0,0,0,0.18);
	 outline-offset:-2px;
 }
 
 /* 파일 리스트 정렬 */
 #shorts-files-tbody td.col-size,
 #shorts-files-tbody td.col-mtime{
	 text-align:right;
 }
 
/* progress bar track + fill (visual) */
.progress-bar-track,
#shorts-stt-progress-track,
#shorts-gpt-progress-track,
body.shorts-page .shorts-progress-track{
	height:8px;
	background:#eeeeee;
	border-radius:6px;
	overflow:hidden;
}

#shorts-stt-progress-fill,
#shorts-gpt-progress-fill,
#shorts-preview-progress-fill,
body.shorts-page .shorts-progress-fill{
	display:block;
	height:100%;
	width:0%;
	transition:width 0.15s linear;
}

#shorts-stt-progress-fill{
	background:#3b82f6;
}

#shorts-gpt-progress-fill{
	background:#10b981;
}

#shorts-preview-progress-fill{
	background:#111827;
}

/* shorts: box-style (title/caption) apply
 * - JS가 --shorts-header-box-image / --shorts-row-box-image 를 넣어줌
 * - JS가 data-box-style 을 title-view / cap-video-subtitle 에 붙임
============================================================================= */

#shorts-title-view[data-box-style]:not([data-box-style="default"]){
	background-image: var(--shorts-header-box-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#cap-video-subtitle[data-box-style]:not([data-box-style="default"]){
	background-image: var(--shorts-row-box-image);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* =============================================================================
 * shorts.html 인라인 스타일 제거(이 파일로 이동)
 * - 범위 제한: body.shorts-page
 * ============================================================================= */

body.shorts-page #shorts-source-modal-backdrop,
body.shorts-page #shorts-export-modal-overlay{
	display:none;
	align-items:center;
	justify-content:center;
}

body.shorts-page .shorts-preview-render-modal{
	max-width:980px;
}

/* ------- utilities (shorts-page only) ------- */
body.shorts-page .m-0{ margin:0 !important; }
body.shorts-page .mt-4{ margin-top:4px !important; }
body.shorts-page .mt-6{ margin-top:6px !important; }
body.shorts-page .mt-8{ margin-top:8px !important; }
body.shorts-page .mt-10{ margin-top:10px !important; }
body.shorts-page .mt-12{ margin-top:12px !important; }
body.shorts-page .mt-16{ margin-top:16px !important; }

body.shorts-page .mb-4{ margin-bottom:4px !important; }
body.shorts-page .mb-6{ margin-bottom:6px !important; }
body.shorts-page .mb-8{ margin-bottom:8px !important; }
body.shorts-page .mb-10{ margin-bottom:10px !important; }
body.shorts-page .mb-12{ margin-bottom:12px !important; }

body.shorts-page .my-10{ margin:10px 0 !important; }
body.shorts-page .my-12{ margin:12px 0 !important; }

body.shorts-page .gap-4{ gap:4px !important; }
body.shorts-page .gap-6{ gap:6px !important; }
body.shorts-page .gap-8{ gap:8px !important; }
body.shorts-page .gap-10{ gap:10px !important; }
body.shorts-page .gap-12{ gap:12px !important; }

body.shorts-page .fs-11{ font-size:11px !important; }
body.shorts-page .fs-12{ font-size:12px !important; }
body.shorts-page .fs-13{ font-size:13px !important; }

body.shorts-page .fw-500{ font-weight:500 !important; }
body.shorts-page .fw-600{ font-weight:600 !important; }

body.shorts-page .justify-between{ justify-content:space-between !important; }
body.shorts-page .justify-end{ justify-content:flex-end !important; }
body.shorts-page .items-center{ align-items:center !important; }
body.shorts-page .flex-wrap{ flex-wrap:wrap !important; }

body.shorts-page .minw-160{ min-width:160px !important; }
body.shorts-page .minw-180{ min-width:180px !important; }
body.shorts-page .minw-260{ min-width:260px !important; }

body.shorts-page .w-100{ width:100% !important; }
body.shorts-page .flex-1{ flex:1 1 auto !important; }

body.shorts-page .ta-left{ text-align:left !important; }
body.shorts-page .ta-right{ text-align:right !important; }

/* ------- preview card ------- */
body.shorts-page .shorts-preview-title{
	margin:0 0 8px;
}

body.shorts-page .shorts-preview-desc{
	margin:0 0 12px;
}

body.shorts-page #shorts-title-view{
	background:rgba(0,0,0,0.45);
	padding:10px 14px;
	border-radius:12px;
	max-width:100%;
	word-break:keep-all;
}

/* ✅ 텍스트 없으면 박스 자체를 숨김 */
body.shorts-page #shorts-title-view:empty{
	display:none !important;
}


/* body.shorts-page #shorts-caption-text{
	background:rgba(0,0,0,0.55);
	padding:10px 14px;
	border-radius:12px;
	max-width:100%;
	word-break:keep-all;
} */

/* candidates card */
body.shorts-page .shorts-edit-title{
	margin:0;
}

/* table */
body.shorts-page .shorts-file-table{
	width:100%;
	border-collapse:collapse;
}

body.shorts-page .shorts-error-text{
	color:#b42318;
}

/* progress tracks */
body.shorts-page .shorts-progress-track{
	height:8px;
	background:#eeeeee;
	border-radius:6px;
	overflow:hidden;
}

body.shorts-page .shorts-progress-fill{
	height:8px;
	background:#3b82f6;
}

body.shorts-page .shorts-progress-fill--gpt{
	background:#10b981;
}

/* panel headers */
body.shorts-page .shorts-panel-title{
	margin:0;
	font-size:14px;
}

body.shorts-page .shorts-panel-close-btn{
	padding:4px 8px;
	font-size:12px;
}

/* h4 */
body.shorts-page .shorts-h4{
	margin:4px 0 8px;
	font-size:13px;
}

body.shorts-page .shorts-h4--tight{
	margin:8px 0;
	font-size:13px;
}

/* small button */
body.shorts-page .shorts-btn-sm{
	padding:6px 10px;
	font-size:12px;
}

/* inline checkbox label near color input */
body.shorts-page .shorts-color-chip{
	width:40px;
	height:30px;
	padding:0;
	border:none;
}

body.shorts-page .shorts-inline-check{
	font-size:11px;
	cursor:pointer;
	display:flex;
	align-items:center;
	margin:0;
	color:#666666;
}

body.shorts-page .mr-4{
	margin-right:4px !important;
}

body.shorts-page .shorts-color-full{
	width:100%;
	height:30px;
}

body.shorts-page .is-hidden{
	display:none !important;
}

/* background preview */
body.shorts-page .shorts-bg-preview{
	width:100%;
	height:auto;
	border-radius:8px;
	border:1px solid var(--border);
}

/* file input size */
body.shorts-page .shorts-file-input{
	font-size:12px;
}

/* help accent (bg/bgm status) */
body.shorts-page .shorts-help-accent{
	color:var(--accent);
}

/* pre boxes */
body.shorts-page .shorts-prebox{
	background:#f1f1f1;
	border-radius:8px;
	margin:0;
	overflow:auto;
}

body.shorts-page .shorts-prebox--cap{
	padding:8px;
	font-size:11px;
	min-height:90px;
}

body.shorts-page .shorts-prebox--log{
	padding:8px;
	font-size:11px;
	height:90px;
}

body.shorts-page .shorts-prebox--gen{
	padding:8px;
	font-size:11px;
	height:90px;
	margin:8px 0 0;
}

body.shorts-page .shorts-prebox--render{
	padding:8px;
	font-size:11px;
	height:90px;
	margin:10px 0 0;
}

body.shorts-page .shorts-prebox--export{
	padding:6px;
	font-size:10px;
	height:60px;
	overflow-y:auto;
	margin-top:8px;
	border-radius:4px;
}

/* audio preview */
body.shorts-page .shorts-audio-preview{
	width:100%;
	height:32px;
}

/* export progress area */
body.shorts-page .shorts-export-progress-area{
	margin-top:16px;
	border-top:1px solid var(--border);
	padding-top:12px;
}

body.shorts-page .shorts-export-progress-title{
	font-size:12px;
	font-weight:600;
}

body.shorts-page .shorts-export-progress-percent{
	font-size:12px;
	color:var(--accent);
}

body.shorts-page .shorts-export-progress-bar{
	width:100%;
	height:6px;
}

/* =============================================================================
  * shorts: size badge number input
============================================================================= */
#shorts-caption-panel-overlay input.badge.size-num{
	width:64px;
	text-align:center;
	padding:2px 6px;
	border:1px solid #e2e8f0;
	border-radius:999px;
	background:#f1f5f9;
	color:#0f172a;
  }
  

/* =============================================================================
  15_shorts_preview.css
============================================================================= */
/* =============================================================================
  15_shorts_preview.css
============================================================================= */

/* 
 * 목적: 쇼츠 미리보기 커스텀 플레이바 스타일 (인라인 제거)
 * 생성일: 260102
 */

#shorts-preview-playbar-host{
	margin-top:10px;
}

.shorts-preview-playbar{
	display:flex;
	align-items:center;
	gap:10px;
	user-select:none;
}

.shorts-preview-playbar__btn{
	flex:0 0 auto;
}

.shorts-preview-playbar__time{
	font-size:12px;
	font-weight:800;
	color:#0f172a;
	white-space:nowrap;
}

.shorts-preview-playbar__bar{
	position:relative;
	height:12px;
	border-radius:999px;
	background:rgba(15, 23, 42, 0.10);
	flex:1 1 auto;
	cursor:pointer;
	overflow:hidden;
}

.shorts-preview-playbar__ranges{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

.shorts-preview-playbar__range{
	position:absolute;
	top:0;
	bottom:0;
	background:rgba(37, 99, 235, 0.28);
}

.shorts-preview-playbar__range.is-active{
	background:rgba(37, 99, 235, 0.42);
}

.shorts-preview-playbar__head{
	position:absolute;
	top:0;
	bottom:0;
	width:2px;
	background:rgba(37, 99, 235, 0.95);
	left:0%;
	pointer-events:none;
}
/* =============================================================================
 * caption editor: video subtitle overlay
============================================================================= */
.cap-video-wrap{
	position:relative;
	width:100%;
	aspect-ratio:9/16;
	overflow:hidden;
}

.cap-video-subtitle{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:10%;
	max-width:92%;
	padding:10px 14px;
	border-radius:14px;
	background:rgba(0,0,0,0.55);
	text-align:center;
	white-space:pre-line;
	pointer-events:none;
	text-shadow:0 2px 10px rgba(0,0,0,0.35);
}

/* =============================================================================
 * shorts preview frame (9:16) - ONLY HERE
 * ============================================================================= */
.shorts-preview-frame{
	position:relative;
	overflow:hidden;

	/* ✅ W/H 고정 (9:16) */
	width:405px;
	height:720px;
	margin-inline:auto;

	/* 레터박스 배경(기존 overrides에 있던 것 합침) */
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;

	/* 프레임 톤 */
	background: linear-gradient(180deg, #f8fafc, #eef2f7);
	border-radius: var(--radius-md, 12px);
	border: 1px solid rgba(228,231,236,.9);
	box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

/* 내부(비디오/이미지)는 프레임을 100% 채움 */
.shorts-preview-frame video,
.shorts-preview-frame img{
	width:100%;
	height:100%;
	display:block;
	object-fit:contain;
}

/* placeholder 스타일은 06_preview.css의 .preview-placeholder 공통 규칙을 사용 */

/* 기존 absolute/translateY 방식 제거: 9:16 컨테이너에서 안정적으로 표시 */
#shorts-preview-video{
	width:100%;
	height:100%;
	display:block;
	object-fit:contain;
	background:transparent;
}

@media (max-width: 520px){
	.shorts-preview-frame{
		/* ✅ 모바일에서는 더 작은 고정값 */
		width:360px;
		height:640px;
	}
}
/* =============================================================================
 * shorts: preview overlays (title/caption) positioning
============================================================================= */
#shorts-title-overlay,
#shorts-caption-overlay{
	position:absolute;
	z-index:40;
	pointer-events:none;
}

/* 기본값(슬라이더 기본값과 동일) */
#shorts-title-overlay{
	left:10%;
	top:12%;
	width:80%;

	display:flex;
	justify-content:center;
	align-items:center;

	background:transparent;
	padding:0;
}

#shorts-title-view{
	display:block;
	position:relative;

	width:100%;
	max-width:calc(100% - 24px);
	height:100%;
	max-height:100%;
	box-sizing:border-box;

	text-align:center;
	border-radius:18px;

	overflow:visible;
}

/* 폭 초과(overflow)에서도 중앙 기준 유지 */
#shorts-title-view > *{
	display:block;
	position:static;
	left:auto;
	transform:none;
	max-width:100%;
	width:auto;
	text-align:center;
	white-space:pre;
	word-break:normal;
}


#shorts-caption-overlay{
	left:50%;
	top:70%;
	width:92%;
	transform:translateX(-50%);
}
/* caption overlay: title과 동일하게 컨테이너가 X/Y/W 담당, 박스는 내부만 */
#shorts-caption-overlay{
	display:flex;
	justify-content:center;
	align-items:center;
	background:transparent;
	padding:0;
}

/* cap-video-subtitle이 cap-video-subtitle(absolute/bottom) 규칙에 끌려가지 않도록 무력화 + 박스 내 세로 중앙정렬 */
#shorts-caption-overlay #cap-video-subtitle{
	position:relative !important;
	left:auto !important;
	transform:none !important;

	top:auto !important;
	right:auto !important;
	bottom:auto !important;

	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	justify-content:center !important;
	text-align:center !important;

	overflow:visible !important;

	height:100% !important;
	max-height:100% !important;
}

/* 캡션 내용이 div/span 등으로 들어와도 "항상 중앙 기준" 유지 */
#shorts-caption-overlay #cap-video-subtitle > *{
	display:block !important;
	position:static !important;
	left:auto !important;
	transform:none !important;

	max-width:100% !important;
	width:auto !important;

	text-align:center !important;
}


/* =============================================================================
  16_shorts_topics.css
============================================================================= */
/* =============================================================================
  16_shorts_topics.css (수정본: 공통 스타일 적용)
============================================================================= */

/* ===============================
 * playing highlight (공용)
 * =============================== */
 .sentence-row {
    position: relative; /* ::before, offsetTop 기준 안정화 */
}

.sentence-row.is-playing {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.22), 0 10px 24px rgba(2,6,23,0.08);
    background: rgba(37,99,235,0.06);
}

.sentence-row.is-playing::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 6px;
    border-radius: 6px;
    background: #2563eb;
}

.word-token.is-playing {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.25);
}

/* ===============================
 * 스크롤: "문장 리스트"만 스크롤되게
 * =============================== */
#shorts-candidates-list {
    overflow: hidden;
    min-height: 0;
}
#shorts-candidates-list .layout-box {
    overflow: hidden;
    min-height: 0;
}

#shorts-candidates-panel-overlay .layout-panel {
    overflow: hidden;
    min-height: 0;
}
#shorts-candidates-panel-overlay .layout-panel .layout-box {
    overflow: hidden;
    min-height: 0;
}

/* 왼쪽 탭 전용 리스트 스타일 */
[data-role="segmentList"] .sentence-list {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: min(520px, 56vh);
    max-height: none;
    padding-right: 6px;
    padding-bottom: 24px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sentence-row {
    scroll-margin-bottom: 24px;
}

/* ===============================
 * 박스(토픽/세그먼트, 문장) - 공용으로 변경
 * =============================== */
.shorts-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    margin: 0 0 10px 0;
}

.shorts-box .box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.shorts-box .box-title {
    font-size: 12px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.shorts-box .box-body {
    padding: 10px;
}

.shorts-box.topic-box.is-collapsed .box-body {
    display: none;
}

.shorts-box.topic-box.is-collapsed .box-head {
    border-bottom: none;
}

.btn-box-toggle {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 10px;
}

/* ===============================
 * 컨트롤(토픽/세그먼트) - 공용
 * =============================== */
.topic-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.topic-controls-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topic-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-controls .btn {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 10px;
}

.topic-controls .ctrl {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topic-controls .ctrl .lbl {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}

.topic-controls input {
    height: 28px;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 10px;
    width: 88px;
}

/* ===============================
 * 문장/단어 토큰 - ⭐ 핵심 수정 (제한 해제) ⭐
 * =============================== */
.sentence-row {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 10px 8px 10px;
    margin: 0 0 8px 0;
    background: #ffffff;
    cursor: pointer;
}

/* 자막 편집기에서 선택된 Row 강조 (파란 배경) */
.sentence-row[style*="border-color: #0ea5e9"],
.sentence-row[style*="border-color: rgb(14, 165, 233)"] {
    background: rgba(14, 165, 233, 0.04) !important;
}

.sentence-row:hover {
    background: #f8fafc;
}

.sentence-row.disabled {
    opacity: 0.55;
}

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

.seg-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.seg-toggle input {
    transform: translateY(1px);
}

.seg-no {
    font-weight: 800;
    font-size: 12px;
    color: #0f172a;
}

.seg-rank {
    font-size: 11px;
    font-weight: 800;
    color: #2563eb;
}

.time {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.text {
    font-size: 12px;
    color: #111827;
    font-weight: 600;
    line-height: 1.4;
}

.words {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px dashed #f1f5f9;
}

.word-token {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.1;
    color: #0f172a;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    transition: all 0.1s;
}

.word-token:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.word-token.disabled {
    opacity: 0.35;
    text-decoration: line-through;
    background: #f1f5f9;
    border-color: transparent;
}

/* 자막 편집기: 수정된 단어 강조 */
.word-token.highlight {
    background: #111827;
    color: #fff;
    border-color: #111827;
    font-weight: 600;
}

.silence-token {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.1;
    cursor: pointer;
    user-select: none;
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    color: #64748b;
    margin: 0 2px; /* 간격 살짝 조정 */
}/* static/css/v2_ui/16_shorts_topics.css (또는 v2_ui.bundle.css) */


/* 제거됨 (무음 구간) - 빨간색 + 취소선 */
.silence-token.removed {
    background: rgba(180,83,9,0.08);
    border-color: rgba(180,83,9,0.35);
    color: #b45309;
    text-decoration: line-through; /* ★ 취소선 추가 */
    opacity: 0.75;                 /* 살짝 흐리게 */
}

/* 유지됨 (오버라이드) - 파란색 */
.silence-token.kept {
    background: rgba(2,132,199,0.06);
    border-color: rgba(2,132,199,0.25);
    color: #0369a1;
    text-decoration: none;
    font-weight: 600;
}

/* =============================================================================
 * 토픽/세그먼트 전체 접기 (탭/버튼/리스트 포함)
 * ============================================================================= */
[data-role="topicBoxWrap"].is-collapsed [data-role="topicBoxBody"] {
    display: none;
}

/* caption editor playhead highlight */
#cap-lines .badge.is-playing {
    box-shadow: 0 0 0 2px rgba(37,99,235,0.35);
}

#cap-lines div[data-line-index].is-playing {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.22), 0 10px 24px rgba(2,6,23,0.08);
    background: rgba(37,99,235,0.06);
}

/* =============================================================================
 * 자막 편집 탭 박스 (기존 유지)
 * ============================================================================= */
#tab-edit-panel .cap-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
}

#tab-edit-panel .cap-box .box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
}

#tab-edit-panel .cap-box .box-title {
    font-size: 12px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

#tab-edit-panel .cap-box .box-body {
    padding: 10px;
}

#tab-edit-panel .cap-box.is-collapsed .box-body {
    display: none;
}

#tab-edit-panel .btn-box-toggle {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 10px;
}
/* 자막 2줄 보기 모드용 스타일 (위아래 연결) */
.sentence-row.group-start {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 1px dashed #e2e8f0; /* 점선으로 구분 */
    margin-bottom: 0;
}
.sentence-row.group-end {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    margin-top: 0;
}



.cap-edit-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}

.cap-edit-line + .cap-edit-line{
  margin-top:12px;
}

.cap-label{
  min-width:92px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}

.cap-input{
  height:32px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.cap-input-sm{
  width:76px;
  text-align:center;
}

.cap-btn{
  height:32px;
  padding:0 12px;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.cap-edit-line{
  justify-content:flex-start;
}

.cap-right-group{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* 줄바꿈 그룹 모양 통일 */
.cap-wrap-host,
.cap-wrap-inner{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}


/* =============================================================================
  17_shorts_highlight.css
============================================================================= */
/* =============================================================================
  17_shorts_highlight.css
============================================================================= */
/* 1) highlight 폰트 드롭다운도 body/header와 동일한 룩으로 */
#wrapper-font-highlight .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
  }
  
  #wrapper-font-highlight .custom-select-trigger .selected-text {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  #wrapper-font-highlight .custom-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    max-height: 360px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    display: none;
    z-index: 999;
  }
  
  #wrapper-font-highlight.open .custom-options {
    display: block;
  }
  
  #wrapper-font-highlight .custom-option {
    padding: 10px;
    border-radius: 14px;
    cursor: pointer;
  }
  
  #wrapper-font-highlight .custom-option:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  
  /* 2) 노래방(누적) 강조: 레이아웃이 흔들리지 않도록 font-size 대신 scale 사용 */
  #cap-video-subtitle .cap-word {
    display: inline-block;
    transform-origin: center bottom;
    color: var(--cap-body-color, inherit);
    transition: transform 60ms linear, color 60ms linear;
    will-change: transform;
  }
  
  #cap-video-subtitle .cap-word.is-read {
    color: var(--cap-hi-color, inherit);
    font-family: var(--cap-hi-font, inherit);
    transform: scale(var(--cap-hi-scale, 1));
  }
  
  #cap-video-subtitle .cap-word.is-active {
    color: var(--cap-hi-color, inherit);
    font-family: var(--cap-hi-font, inherit);
    transform: scale(calc(var(--cap-hi-scale, 1) * 1.06));
  }
  

/* =============================================================================
  18_shorts_caption_panel.css
============================================================================= */
/* =============================================================================
  18_shorts_caption_panel.css
============================================================================= */
/* Shorts caption panel을 News 캡션 패널 룩앤필로 맞추는 전용 오버라이드 */

#shorts-caption-panel-overlay .panel-head-h3{
  margin:0;
  font-size:14px;
}

#shorts-caption-panel-overlay .panel-close-btn{
  padding:4px 8px;
  font-size:12px;
}

#shorts-caption-panel-overlay .section{
  margin-bottom:12px;
}

#shorts-caption-panel-overlay .design-h4{
  margin:4px 0 8px;
  font-size:13px;
  font-weight:700;
}

#shorts-caption-panel-overlay label{
  font-size:12px;
  font-weight:600;
}

#shorts-caption-panel-overlay .custom-select-trigger{
  font-size:12px;
}

#shorts-caption-panel-overlay .caption-color-input{
  width:100%;
  height:30px;
}

#shorts-caption-panel-overlay .caption-highlight-toggle-row{
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
}

#shorts-caption-panel-overlay .format-box{
  gap:12px;
  padding:12px;
}

#shorts-caption-panel-overlay .format-title-label{
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:6px;
}

#shorts-caption-panel-overlay .format-btn-row{
  gap:8px;
  flex-wrap:wrap;
}

#shorts-caption-panel-overlay .format-toggle-btn{
  min-width:44px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
}

#shorts-caption-panel-overlay .format-toggle-btn input{
  display:none;
}

#shorts-caption-panel-overlay .format-toggle-btn-italic{
  font-style:italic;
  font-weight:600;
}

#shorts-caption-panel-overlay .format-toggle-btn-underline{
  text-decoration:underline;
  font-weight:600;
}


/* =============================================================================
  19_caption_effect.css
============================================================================= */
/* =============================================================================
  19_caption_effect.css
============================================================================= */

/* =============================================================================
  * shorts: size badge number input
============================================================================= */
#shorts-caption-panel-overlay input.badge.size-num{
    width:64px;
    text-align:center;
    padding:2px 6px;
    border:1px solid #e2e8f0;
    border-radius:999px;
    background:#f1f5f9;
    color:#0f172a;
  }
  
  
  /* =============================================================================
    * shorts: caption effects tab
  ============================================================================= */
  #shorts-caption-panel-overlay .caption-tab-strip{
    margin-top:6px;
  }
  
  #shorts-caption-panel-overlay #caption-tab-effects-panel .layout-box{
    padding-top:10px;
  }
  
  #shorts-caption-panel-overlay #caption-tab-effects-panel .layout-box strong{
    letter-spacing:-0.2px;
  }
  
  .cap-fx-stroke-apply{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
  }
  
  .cap-fx-stroke-apply-item{
    display:flex;
    align-items:center;
    gap:8px;
  }
  

/* =============================================================================
  20_shorts_modal.css
============================================================================= */
/* =============================================================================
  20_shorts_modal.css
============================================================================= */
/* 소스 선택 모달: 높이 고정, 파일 탐색기 높이 고정(옵션 열림/닫힘 영향 없음) */
#shorts-source-modal-backdrop.modal-backdrop {
    align-items: center;
    padding-top: 16px;
}

#shorts-source-modal-backdrop .modal.shorts-source-modal {
    height: 760px;
    max-height: calc(100vh - 32px);
}

/* 모달 바디는 스크롤 가능(옵션이 길어지면 여기서 스크롤) */
#shorts-source-modal-backdrop .shorts-source-modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 파일 리스트 박스: 고정 높이(대략 15개 내외 가시), 여기만 스크롤 */
#shorts-source-modal-backdrop .shorts-files-box {
    height: 420px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    display: block;
    align-content: flex-start;
}

/* 테이블 컬럼 고정 + row 높이 안정화 */
#shorts-source-modal-backdrop .shorts-files-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

#shorts-source-modal-backdrop .shorts-files-table thead th {
    padding: 8px 10px;
}

#shorts-source-modal-backdrop .shorts-files-table tbody td {
    padding: 6px 10px;
}

#shorts-source-modal-backdrop .shorts-files-table tbody tr {
    height: 24px;
}

#shorts-source-modal-backdrop .shorts-files-table th.col-name,
#shorts-source-modal-backdrop .shorts-files-table td.col-name {
    width: auto;
}

#shorts-source-modal-backdrop .shorts-files-table th.col-size,
#shorts-source-modal-backdrop .shorts-files-table td.col-size {
    width: 110px;
    white-space: nowrap;
}

#shorts-source-modal-backdrop .shorts-files-table th.col-mtime,
#shorts-source-modal-backdrop .shorts-files-table td.col-mtime {
    width: 170px;
    white-space: nowrap;
}

#shorts-source-modal-backdrop .shorts-files-table td.col-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 재생성 옵션 토글 */
#shorts-source-modal-backdrop .shorts-options-toggle-row {
    justify-content: space-between;
    align-items: center;
}

#shorts-source-modal-backdrop .shorts-options-collapsible {
    display: none;
}

#shorts-source-modal-backdrop .shorts-options-collapsible.is-open {
    display: block;
}

/* 프로그레스바 */
#shorts-source-modal-backdrop .progress-bar-track {
    display: block;
    width: 100%;
    height: 8px;
    background: #eeeeee;
    border-radius: 6px;
    overflow: hidden;
}

#shorts-stt-progress-fill,
#shorts-gpt-progress-fill,
#shorts-preview-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    transition: width 0.15s linear;
}

#shorts-stt-progress-fill {
    background: #3b82f6;
}
#shorts-gpt-progress-fill {
    background: #10b981;
}
#shorts-preview-progress-fill {
    background: #f59e0b;
}


/* =============================================================================
  21_shorts_template_select_overrides.css
============================================================================= */
/* =============================================================================
  21_shorts_template_select_overrides.css
============================================================================= */
/* =========================
 * Template select (shorts)
 * - 트리거(닫힌 상태): 슬림 + 수직 중앙정렬
 * - "선택 안 함" 상태도 썸네일 슬롯(placeholder) 유지
 * - 옵션(열린 목록): 9:16 길게
 * ========================= */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger{
  height: 44px;
  min-height: 44px;
  padding: 0 10px;
  gap: 10px;
  border-radius: 14px;
  font-size: 12px;
  align-items: center;
}

/* selected-text를 flex로 만들어서 텍스트가 아래로 처지는 현상 제거 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger .selected-text{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 100%;
  line-height: 1;
}

/* "선택 안 함" 같은 상태에서도 썸네일 자리(placeholder) 확보 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger .selected-text::before{
  content: "";
  width: 26px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
}

/* 실제 img가 들어오면 placeholder는 숨김 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger:has(img) .selected-text::before{
  display: none;
}

/* 트리거 썸네일(실제 img) */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger img{
  height: 32px;
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}

/* 텍스트 말줄임 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-select-trigger .selected-text span{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 드롭다운 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-options{
  max-height: min(72vh, 728px);
  padding: 10px;
  border-radius: 16px;
}

/* 옵션 카드 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-option{
  padding: 12px 10px !important;
  border-radius: 16px;
  gap: 8px;
}

/* 옵션 썸네일: 9:16 “길게” */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-option img{
  width: 100%;
  height: 220px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 16px;
}

/* 옵션 텍스트 */
body.shorts-page #shorts-template-panel-overlay #wrapper-template-select .custom-option span{
  font-size: 12px;
  line-height: 1.2;
}


/* =============================================================================
  22_shorts_export_modal.css
============================================================================= */
/* =============================================================================
  Shorts export modal (9:16) - styles (remove inline dependence)
============================================================================= */

body.shorts-page #shorts-export-modal-overlay{
	display:none;
	align-items:center;
	justify-content:center;
}

body.shorts-page #shorts-export-modal-overlay.is-open{
	display:flex;
}

body.shorts-page #shorts-export-modal-overlay .modal.export-modal{
	width:1120px;
	max-width:1120px;

	/* ✅ 모달을 위/아래로 더 크게(거의 꽉 차게) */
	height:min(860px, calc(100vh - 16px));
	max-height:min(860px, calc(100vh - 16px));

	/* ✅ 상하 여백도 줄여서 실사용 높이 확보 */
	margin:8px auto;

	overflow:hidden;
	display:flex;
	flex-direction:column;
}

body.shorts-page #shorts-export-modal-overlay .modal-body{
	flex:1;
	min-height:0;
	overflow:hidden;
	padding:0 14px 14px 14px;
}

body.shorts-page #shorts-export-columns{
	display:grid;
	grid-template-columns: 1fr 560px;
	gap:0;
	height:100%;
	min-height:0;
	overflow:hidden;
	background:#fff;
}

body.shorts-page #shorts-export-left{
	display:flex;
	flex-direction:column;
	min-height:0;
	overflow:hidden;
	padding-right:0;
}

body.shorts-page #shorts-export-left-scroll{
	flex:1 1 auto;
	overflow-y:scroll;
	overflow-x:hidden;
	scrollbar-gutter:stable;
	min-height:0;
	-webkit-overflow-scrolling:touch;
	padding-right:12px;
}

body.shorts-page #shorts-export-left-footer{
	flex:0 0 auto;
	margin-top:auto;
	background:#fff;
	padding-right:12px;
	padding-top:10px;
}

body.shorts-page #shorts-export-right{
	min-height:0;
	overflow:hidden;
	padding-left:12px;
	padding-right:4px;
	border-left:1px solid rgba(0,0,0,0.10);
	background:#fff;
}

body.shorts-page .shorts-export-right-scroll{
	overflow-y:scroll;
	overflow-x:hidden;
	padding-right:2px;
	padding-bottom:10px;
	-webkit-overflow-scrolling:touch;
}

/* action buttons */
body.shorts-page .shorts-export-actions{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding-top:14px;
}

body.shorts-page .shorts-export-action-row{
	display:flex;
	gap:8px;
}

body.shorts-page .shorts-export-action-row .btn{
	flex:1 1 0;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* anchor disabled look */
body.shorts-page a.btn.is-disabled{
	opacity:0.45;
	cursor:not-allowed;
	pointer-events:none;
	text-decoration:none;
}

/* =============================================================================
  Shorts export viewer modal
============================================================================= */

body.shorts-page #shorts-export-viewer-overlay{
	display:none;
	align-items:center;
	justify-content:center;
}

body.shorts-page #shorts-export-viewer-overlay.is-open{
	display:flex;
}

body.shorts-page .modal.shorts-export-viewer-modal{
	max-width:900px;
	height:min(85vh, 820px);
	max-height:85vh;
}

body.shorts-page .shorts-export-viewer-body{
	overflow:hidden;
}

body.shorts-page .shorts-export-viewer-frame{
	width:100%;
	height:100%;
	aspect-ratio:9/16;
	max-height:70vh;
	background:#000;
	border-radius:12px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}

body.shorts-page .shorts-export-viewer-frame video{
	width:100%;
	height:100%;
	object-fit:contain;
	background:#000;
	display:block;
}
body.shorts-page #shorts-export-right-grid{
	display:grid;

	/* ✅ 미리보기 영역도 조금 더 키우고(상단), 하단 버튼줄은 max-content로 */
	grid-template-rows: clamp(360px, 58vh, 640px) max-content minmax(0, 1fr) max-content;

	height:100%;
	overflow:hidden;
}

body.shorts-page .shorts-export-preview-frame{
	position:relative;
	height:100%;
	width:auto;
	aspect-ratio:9/16;
	max-height:100%;
	max-width:100%;
	background:#000;
	border-radius:12px;
	overflow:hidden;
}

body.shorts-page #shorts-export-progress-bar{
	display:none;
}


/* =============================================================================
  89_shorts_inline.css
============================================================================= */
/* =============================================================================
  89_shorts_inline.css
============================================================================= */
/* /static/css/89_shorts_inline.css */
/* Extracted from inline styles in shorts.html (keep visual behavior)
 * 정리 원칙:
 * - 전역(#shorts-*, .preview-*) 스타일 금지 (14/15에서 관리)
 * - 유틸만 남기되 shorts-page 스코프로 제한
 */

/* -----------------------------
  Common small utilities (shorts-page only)
----------------------------- */
body.shorts-page .u-m0{margin:0;}
body.shorts-page .u-mb4{margin-bottom:4px;}
body.shorts-page .u-mb6{margin-bottom:6px;}
body.shorts-page .u-mb8{margin-bottom:8px;}
body.shorts-page .u-mb10{margin-bottom:10px;}
body.shorts-page .u-mb12{margin-bottom:12px;}
body.shorts-page .u-mt4{margin-top:4px;}
body.shorts-page .u-mt6{margin-top:6px;}
body.shorts-page .u-mt8{margin-top:8px;}
body.shorts-page .u-mt10{margin-top:10px;}
body.shorts-page .u-mt12{margin-top:12px;}
body.shorts-page .u-mt16{margin-top:16px;}
body.shorts-page .u-my10{margin:10px 0;}
body.shorts-page .u-my12{margin:12px 0;}
body.shorts-page .u-my8{margin:8px 0;}
body.shorts-page .u-mx0{margin-left:0;margin-right:0;}

body.shorts-page .u-gap4{gap:4px;}
body.shorts-page .u-gap6{gap:6px;}
body.shorts-page .u-gap8{gap:8px;}
body.shorts-page .u-gap10{gap:10px;}
body.shorts-page .u-gap12{gap:12px;}

body.shorts-page .u-wrap{flex-wrap:wrap;}
body.shorts-page .u-ai-center{align-items:center;}
body.shorts-page .u-jc-between{justify-content:space-between;}
body.shorts-page .u-jc-end{justify-content:flex-end;}

body.shorts-page .u-fs10{font-size:10px;}
body.shorts-page .u-fs11{font-size:11px;}
body.shorts-page .u-fs12{font-size:12px;}
body.shorts-page .u-fs13{font-size:13px;}
body.shorts-page .u-fs14{font-size:14px;}
body.shorts-page .u-fs32{font-size:32px;}

body.shorts-page .u-fw500{font-weight:500;}
body.shorts-page .u-fw600{font-weight:600;}

body.shorts-page .u-pad4x8{padding:4px 8px;}
body.shorts-page .u-pad6{padding:6px;}
body.shorts-page .u-pad6x10{padding:6px 10px;}
body.shorts-page .u-pad8{padding:8px;}
body.shorts-page .u-pad8x{padding:8px;}
body.shorts-page .u-pad10x14{padding:10px 14px;}

body.shorts-page .u-w100{width:100%;}
body.shorts-page .u-h32{height:32px;}

body.shorts-page .u-hidden{display:none;}
.u-hidden{display:none;}


/* =============================================================================
  90_overrides.css
============================================================================= */
/* =============================================================================
  v2 UI CSS (분리본) — 90_overrides.css
  - (index.html 하단 <style> 이동)
============================================================================= */

:root {
  --side-panel-width: 320px;
}

.template-panel,
.layout-panel,
.design-panel,
.caption-panel,
.background-panel,
.bgm-panel,
.tts-panel {
  width: var(--side-panel-width);
  max-width: calc(100vw - 24px);
}

.template-panel input,
.template-panel select,
.template-panel textarea,
.layout-panel input,
.layout-panel select,
.layout-panel textarea,
.design-panel input,
.design-panel select,
.design-panel textarea,
.caption-panel input,
.caption-panel select,
.caption-panel textarea,
.background-panel input,
.background-panel select,
.background-panel textarea,
.bgm-panel input,
.bgm-panel select,
.bgm-panel textarea,
.tts-panel input,
.tts-panel select,
.tts-panel textarea {
  box-sizing: border-box;
  width: 100%;
}

#shorts-caption-panel-overlay input.caption-knobs-opt-input-sm{
  width:72px;
}

.template-panel input[type="range"],
.layout-panel input[type="range"],
.design-panel input[type="range"],
.caption-panel input[type="range"],
.bgm-panel input[type="range"] {
  width: 100%;
  display: block;
}

/* =============================================================================
   Export modal: no horizontal scroll
============================================================================= */
#export-modal-overlay .modal-body {
  overflow-x: hidden;
}

#export-modal-overlay .grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#export-modal-overlay .grid.cols-2 > * {
  min-width: 0;
}

#export-modal-overlay input,
#export-modal-overlay select,
#export-modal-overlay textarea {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

#export-modal-overlay .help {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* =============================================================================
   Export modal: 해상도/FPS 한 줄 정렬
============================================================================= */
#export-modal-overlay .export-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; /* 화면 좁으면 줄바꿈 */
}

#export-modal-overlay .export-inline-key {
  font-size: 12px;
  font-weight: 600;
  color: #111;
}

#export-modal-overlay .export-inline-input {
  width: 110px; /* 필요하면 90~140 사이로 조절 */
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}