@import url(/molds.css);
/* 멀티 AI 공통 스타일 */
@font-face { font-family: Pretendard; font-weight: 500; src: url(/fonts/Pretendard-Medium.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Pretendard; font-weight: 700; src: url(/fonts/Pretendard-Bold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Pretendard; font-weight: 800; src: url(/fonts/Pretendard-ExtraBold.woff2) format('woff2'); font-display: swap; }
:root {
  --bg: #0e0f12; --panel: #16181d; --panel2: #1d2027; --line: #2a2e37; --line2: #3a404c;
  --text: #e9ebef; --muted: #8b919c; --soft: #c3c7ce; --orange: #ff7a1a; --orange2: #ffb27a;
  --blue: #3ea6ff; --green: #34c77b; --red: #ff5c5c; --yellow: #f6c120;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font-family: Pretendard, "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { vertical-align: -3px; flex-shrink: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.muted { color: var(--muted); } .soft { color: var(--soft); } .sp { flex: 1; }

header.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .brand { display: flex; align-items: center; gap: 8px; font-size: 16px; } header.top .brand .ic { color: var(--orange); }
header.top nav { display: flex; gap: 2px; }
header.top nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); }
header.top nav a:hover { color: var(--text); background: var(--panel2); }
header.top nav a.on { color: var(--text); background: var(--panel2); font-weight: 700; }
header.top .crumb { color: var(--muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; white-space: nowrap; }
.btn:hover { border-color: var(--line2); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #111; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 4px 9px; font-size: 12.5px; border-radius: 6px; }
.btn.big { padding: 12px 20px; font-size: 16px; border-radius: 10px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .45; cursor: default; filter: none; }
.btn.danger-fill { background: var(--red); border-color: var(--red); color: #fff; }
.field, select { width: 100%; background: #0b0c0f; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; }
.field:focus, select:focus { border-color: var(--orange); }
textarea.field { resize: vertical; line-height: 1.5; }
label.lb { display: block; color: var(--muted); font-size: 12.5px; margin: 12px 0 5px; }
.seg { display: inline-flex; background: #0b0c0f; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.seg button { background: transparent; border: 0; border-radius: 6px; padding: 5px 12px; color: var(--muted); }
.seg button.on { background: var(--panel2); color: var(--text); font-weight: 700; }
input[type=range] { width: 100%; accent-color: var(--orange); }

/* 팝업 · 알림 (dialog.js) */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.modal .card { width: 100%; max-width: 440px; }
.dlg { z-index: 30; animation: dlgFade .12s ease-out; }
.dlg .card { max-width: 480px; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.dlg .dlg-title { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.dlg .dlg-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,122,26,.12); color: var(--orange); }
.dlg .dlg-ic.danger { background: rgba(255,92,92,.12); color: var(--red); }
.dlg .dlg-body { color: var(--soft); white-space: pre-wrap; line-height: 1.6; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }
.dlg textarea.field { min-height: 120px; }
.dlg .dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.field.shake { border-color: var(--red); animation: dlgShake .3s; }
@keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dlgShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: #fff; color: #111; font-weight: 700; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .18s; z-index: 40; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.err { background: var(--red); color: #fff; }

/* 홈 */
.home { max-width: 1080px; margin: 0 auto; padding: 36px 20px 60px; }
.home h1 { font-size: 26px; } .home .lead { color: var(--soft); margin: 8px 0 28px; font-size: 15px; }
.shelf h2 { font-size: 15px; color: var(--muted); margin: 26px 0 10px; font-weight: 700; }
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tool { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-height: 148px; }
a.tool:hover { border-color: var(--orange); }
.tool .ti { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,122,26,.12); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.tool h3 { font-size: 16px; } .tool p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }
.tool .need { font-size: 12px; color: var(--soft); display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--soft); }
.tag.on { color: var(--green); border-color: rgba(52,199,123,.4); } .tag.soon { color: var(--muted); }
.tool.soon { opacity: .55; }

/* 영상 넣기 */
.drop { max-width: 760px; margin: 48px auto; padding: 0 20px; }
.dropzone { border: 2px dashed var(--line2); border-radius: 18px; padding: 54px 24px; text-align: center; background: var(--panel); transition: .15s; }
.dropzone.over { border-color: var(--orange); background: rgba(255,122,26,.06); }
.dropzone h2 { font-size: 22px; margin: 14px 0 6px; } .dropzone p { color: var(--muted); margin: 0 0 20px; }
.dropzone .big-ic { color: var(--orange); }
.kinds { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.notes { margin: 18px 4px 0; color: var(--muted); font-size: 13px; line-height: 1.7; padding-left: 18px; }
.recent { margin-top: 26px; } .recent h3 { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.recent .row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: var(--panel); color: var(--soft); font-size: 13px; }

/* 진행 */
.steps { max-width: 560px; margin: 60px auto; padding: 0 20px; }
.steps h2 { font-size: 20px; margin-bottom: 4px; } .steps .file { color: var(--muted); margin-bottom: 22px; overflow-wrap: anywhere; }
.step { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.step .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; flex-shrink: 0; }
.step.on .dot { border-color: var(--orange); color: var(--orange); } .step.done .dot { border-color: var(--green); background: var(--green); color: #111; }
.step .nm { flex: 1; } .step.on .nm { font-weight: 700; }
.step .pc { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.bar { height: 4px; background: var(--panel2); border-radius: 2px; overflow: hidden; margin-top: 6px; } .bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s; }
.errbox { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(255,92,92,.5); background: rgba(255,92,92,.08); border-radius: 10px; color: #ffc9c9; line-height: 1.6; }

/* 작업 화면 */
.work { display: grid; grid-template-columns: 330px minmax(300px, 1fr) 400px; height: calc(100vh - 52px); }
.work > section { min-height: 0; display: flex; flex-direction: column; }
.col-l { border-right: 1px solid var(--line); } .col-r { border-left: 1px solid var(--line); }
.col-h { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col-h h2 { font-size: 15px; }
.scroll { overflow: auto; flex: 1; min-height: 0; }
.cand { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cand:hover { background: var(--panel); } .cand.on { background: var(--panel2); box-shadow: inset 3px 0 0 var(--orange); }
.cand .t1 { font-weight: 700; } .cand .t1 .y { color: var(--yellow); }
.cand .meta { display: flex; gap: 8px; color: var(--muted); font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; align-items: center; }
.cand .hook { color: var(--soft); font-size: 12.5px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.score { color: var(--green); font-weight: 700; } .warnc { color: var(--orange2); }
.empty { padding: 26px 18px; color: var(--muted); line-height: 1.7; }
.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; background: #08090b; }
.stage canvas { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.transport { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.transport .now { font-variant-numeric: tabular-nums; color: var(--soft); min-width: 96px; }
.track { flex: 1; height: 8px; background: var(--panel2); border-radius: 4px; position: relative; cursor: pointer; } .track i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--orange); border-radius: 4px; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 11px 6px; color: var(--muted); }
.tabs button.on { color: var(--text); border-bottom-color: var(--orange); font-weight: 700; }
.pane { padding: 14px; }
.chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chip { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; line-height: 1.4; }
.chip:hover { border-color: var(--orange); } .chip .y { color: var(--yellow); }
.ln { display: flex; gap: 8px; padding: 6px 12px 6px 8px; border-bottom: 1px solid rgba(255,255,255,.04); align-items: flex-start; }
.ln .tm { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 44px; padding-top: 2px; cursor: pointer; }
.ln .tm:hover { color: var(--orange); }
.ln .tx { flex: 1; line-height: 1.75; }
.ln.out { opacity: .38; } .ln.cut .tx { text-decoration: line-through; color: var(--muted); }
.tg { background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); padding: 1px 7px; font-size: 12px; white-space: nowrap; }
.tg:hover { border-color: var(--orange); color: var(--text); }
.w { cursor: pointer; border-radius: 3px; padding: 0 1px; } .w:hover { background: rgba(255,122,26,.25); }
.w.off { text-decoration: line-through; color: var(--muted); } .w.off[data-r=retake] { color: #b08cff; } .w.off[data-r=filler], .w.off[data-r=stutter] { color: #6fb7ff; } .w.off[data-r=user] { color: var(--red); }
.edge { display: flex; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.cardrow { display: flex; gap: 8px; align-items: center; padding: 5px 12px; }
.cardrow .tm { color: var(--muted); font-size: 12px; min-width: 40px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cardrow input { flex: 1; background: #0b0c0f; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; outline: none; }
.cardrow input:focus { border-color: var(--orange); }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.legend b { font-weight: 500; text-decoration: line-through; }
.prog { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 25; display: flex; align-items: center; justify-content: center; padding: 16px; }
.prog .card { width: 100%; max-width: 460px; } .prog h2 { font-size: 18px; margin-bottom: 4px; } .prog .big { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 10px 0 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin-top: 12px; color: var(--soft); font-size: 13px; } .kv span:nth-child(odd) { color: var(--muted); }
.set { max-width: 680px; margin: 0 auto; padding: 30px 20px 60px; } .set h1 { font-size: 22px; margin-bottom: 18px; }
.set section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 14px; } .set h2 { font-size: 16px; margin-bottom: 6px; } .set p { color: var(--muted); margin: 0 0 6px; font-size: 13px; line-height: 1.65; }
.rowb { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) { .work { grid-template-columns: 1fr; height: auto; } .work > section { min-height: 60vh; } header.top .crumb { display: none; } }

/* 시키기(작업창) */
.ask { display: grid; grid-template-columns: 1fr; height: calc(100vh - 52px); }
.ask.split { grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.15fr); }
.ask-main { display: flex; flex-direction: column; min-height: 0; width: 100%; max-width: 900px; margin: 0 auto; }
.ask.split .ask-main { max-width: none; }
.ask-top { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ask #log { padding: 18px 16px; }
.ask-empty { text-align: center; padding: 8vh 10px 0; } .ask-empty h2 { font-size: 22px; margin-bottom: 6px; } .ask-empty .chip { text-align: center; }
.msg { display: flex; flex-direction: column; margin-bottom: 18px; } .msg.me { align-items: flex-end; }
.bub { max-width: 100%; line-height: 1.75; overflow-wrap: anywhere; }
.msg.me .bub { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 9px 14px; max-width: 85%; }
.msg.ai .bub p { margin: 0 0 10px; } .msg.ai .bub h3, .msg.ai .bub h4, .msg.ai .bub h5 { margin: 16px 0 6px; font-size: 15.5px; } .msg.ai .bub h3 { font-size: 17px; color: var(--orange2); }
.msg.ai .bub ul, .msg.ai .bub ol { margin: 0 0 10px; padding-left: 22px; } .msg.ai .bub li { margin: 2px 0; } .msg.ai .bub hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.msg.ai .bub code { background: var(--panel2); border-radius: 4px; padding: 1px 5px; font-family: Consolas, monospace; font-size: 13px; }
.msg.ai .bub a { color: var(--blue); text-decoration: underline; }
.tbl { overflow: auto; margin: 0 0 10px; } .tbl table { border-collapse: collapse; font-size: 13.5px; } .tbl th, .tbl td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; } .tbl th { background: var(--panel2); white-space: nowrap; }
.code { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 10px; background: #0b0c0f; }
.code-h { display: flex; gap: 6px; align-items: center; padding: 6px 8px 6px 12px; background: var(--panel2); color: var(--muted); font-size: 12.5px; }
.code pre { margin: 0; padding: 12px; max-height: 260px; overflow: auto; font: 12.5px/1.55 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.acts { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 12.5px; flex-wrap: wrap; }
img.gen { max-width: 380px; width: 100%; border-radius: 10px; cursor: pointer; display: block; }
.composer { padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--panel); }
.chipsrow { display: flex; gap: 6px; flex-wrap: wrap; } .chipsrow:not(:empty) { margin-bottom: 8px; }
.xbtn { background: transparent; border: 0; color: var(--muted); padding: 0 0 0 2px; display: inline-flex; } .xbtn:hover { color: var(--red); }
.ask-side { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.pv { flex: 1; min-height: 0; background: #2a2e37; display: flex; justify-content: center; overflow: auto; }
.pv iframe { border: 0; height: 100%; background: #fff; } .pv img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.home-ask { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 8px; }
.home-ask:focus-within { border-color: var(--orange); }
.home-ask textarea { width: 100%; background: transparent; border: 0; outline: none; resize: none; font-size: 16px; line-height: 1.6; padding: 4px 6px; }
@media (max-width: 1000px) { .ask.split { grid-template-columns: 1fr; height: auto; } .ask-side { height: 80vh; border-left: 0; border-top: 1px solid var(--line); } .ask-main { height: calc(100vh - 52px); } }