@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
:root { --ink:#111; --sub:#555; --line:#e6e6e6; --red:#ff0033; --red2:#c9002a; --bg:#f7f7f7; --field:#f1f1f1; --ok:#11873b; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
body { font-family:'Pretendard','Malgun Gothic',sans-serif; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--ink); font-size:19px; line-height:1.5; min-height:100vh; }
button, select, input { font:inherit; color:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
.disp { font-weight:800; letter-spacing:-1px; }
.say { color:var(--sub); }
.msg { margin-top:14px; text-align:center; font-weight:700; color:var(--red); min-height:1.5em; font-size:17px; }
.msg.ok { color:var(--ok); }

.logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }
.logo .genie { width:44px; height:44px; object-fit:contain; margin:0 2px 0 4px; }
.logo i { width:30px; height:21px; background:var(--red); border-radius:6px; position:relative; flex:none; }
.logo i::after { content:''; position:absolute; left:12px; top:5px; border-left:9px solid #fff; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; }

/* ---------- 로그인 ---------- */
.login { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:#fff; }
.brand { background:#111; color:#fff; padding:48px 56px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.brand h2 { font-size:clamp(40px,4.4vw,62px); line-height:1.05; word-break:keep-all; margin:auto 0 18px; position:relative; }
.brand h2 em { font-style:normal; color:var(--red); }
.brand p { font-size:19px; color:#bbb; max-width:420px; position:relative; }
.brand .foot { font-size:16px; color:#777; margin-top:36px; }
.cube { position:absolute; right:-40px; top:120px; width:360px; height:360px; border-radius:48px; background:linear-gradient(145deg,#2a2a2a,#0a0a0a); box-shadow:0 40px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); transform:rotate(-8deg); }
.cube::before { content:''; position:absolute; left:50%; top:50%; width:220px; height:150px; transform:translate(-50%,-50%); border-radius:40px; background:linear-gradient(180deg,#ff3355,#d10029); box-shadow:0 20px 50px rgba(255,0,51,.45), inset 0 2px 0 rgba(255,255,255,.35); }
.cube::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-left:54px solid #fff; border-top:34px solid transparent; border-bottom:34px solid transparent; }
.form { display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.lcard { width:min(440px,100%); }
.lcard h1 { font-size:44px; line-height:1.1; margin-bottom:6px; }
.lcard .say { margin-bottom:34px; }
.lcard label { display:block; font-weight:700; font-size:16px; margin:0 0 8px; }
.lcard input:not([type=checkbox]) { width:100%; height:62px; border:2px solid var(--line); border-radius:14px; padding:0 18px; font-size:20px; background:#f5f5f5; margin-bottom:18px; }
.lcard input:focus { outline:none; border-color:var(--ink); background:#fff; }
.chk { display:flex !important; align-items:center; gap:10px; font-size:17px !important; font-weight:400 !important; color:var(--sub); margin:2px 0 26px !important; cursor:pointer; }
.chk input { width:22px; height:22px; accent-color:#111; }
.btn { width:100%; height:68px; border:0; border-radius:16px; background:var(--red); color:#fff; font-weight:800; font-size:26px; box-shadow:0 12px 30px rgba(255,0,51,.3); }
.btn:hover:not(:disabled) { background:var(--red2); }
.help { text-align:center; margin-top:18px; color:var(--sub); font-size:16px; }
.help b { color:var(--ink); }

/* ---------- 영상 만들기 ---------- */
.bar { height:68px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 32px; gap:14px; position:sticky; top:0; z-index:5; }
.who { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:17px; }
.chip { font-size:16px; font-weight:700; color:var(--red); background:#ffe9ee; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.ghost { color:var(--sub); border:0; font-size:16px; padding:8px 14px; border-radius:999px; background:var(--field); }
.ghost.big { height:68px; border-radius:16px; font-size:20px; font-weight:700; }

.wrap { max-width:760px; margin:48px auto; padding:0 24px; }
.wrap > h1 { font-size:46px; line-height:1.1; }
.wrap > .say { margin:6px 0 26px; }
.pc { font-size:16px; margin:-10px 0 18px; color:var(--sub); }
.pc b { color:var(--ok); }
.pc.off b { color:var(--red); }
.card { background:#fff; border-radius:24px; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,.06); }
.mode { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--field); border-radius:14px; padding:4px; margin-bottom:22px; }
.mode button { height:52px; border:0; border-radius:11px; background:transparent; font-size:19px; font-weight:700; color:var(--sub); }
.mode button.on { background:#111; color:#fff; }
.auto { border:2px solid var(--line); border-radius:18px; padding:22px 24px; display:flex; align-items:center; gap:16px; }
.auto .set { font-size:28px; font-weight:700; letter-spacing:-.5px; }
.auto .set span { color:#ccc; margin:0 8px; font-weight:400; }
.auto .say { font-size:16px; margin-top:4px; }
.change { margin-left:auto; height:52px; padding:0 20px; border:2px solid var(--ink); border-radius:12px; background:#fff; font-weight:700; font-size:18px; flex:none; }

.rows { display:flex; flex-direction:column; gap:10px; }
.row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr .8fr 44px; gap:8px; align-items:end; }
.row.one { grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 26px; }
.row label { display:block; font-size:17px; color:var(--sub); font-weight:700; margin-bottom:4px; }
.row select { width:100%; height:54px; border:2px solid var(--line); border-radius:12px; background:#fff; padding:0 10px; font-size:18px; }
.row select:disabled { background:var(--field); color:#aaa; }
.row .x { height:54px; border:0; border-radius:12px; background:var(--field); font-size:22px; color:var(--sub); }
.add { margin-top:12px; width:100%; height:52px; border:2px dashed var(--line); border-radius:12px; background:#fff; font-weight:700; color:var(--sub); font-size:18px; }

.start { width:100%; height:92px; margin-top:26px; border:0; border-radius:18px; background:var(--red); color:#fff; font-weight:800; font-size:34px; box-shadow:0 14px 36px rgba(255,0,51,.3); }
.start:hover:not(:disabled) { background:var(--red2); }
.eta { margin-top:12px; text-align:center; color:var(--sub); font-size:16px; }

.sec { font-size:30px; margin:44px 0 14px; }
.jobs { display:flex; flex-direction:column; gap:10px; }
.empty { color:var(--sub); background:#fff; border-radius:16px; padding:22px; text-align:center; }
.job { background:#fff; border-radius:16px; padding:18px 20px; border:1px solid var(--line); }
.job .top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.job .name { font-weight:700; font-size:19px; }
.job .when { color:var(--sub); font-size:17px; }
.job .st { margin-left:auto; font-size:16px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--field); color:var(--sub); }
.job .st.진행 { background:#111; color:#fff; }
.job .st.끝 { background:#e5f5ea; color:var(--ok); }
.job .st.실패 { background:#ffe9ee; color:var(--red); }
.job .barline { height:10px; border-radius:99px; background:var(--field); margin-top:12px; overflow:hidden; }
.job .barline i { display:block; height:100%; background:var(--red); border-radius:99px; transition:width .4s; }
.job .log { color:var(--sub); font-size:17px; margin-top:6px; }
.job .acts { display:flex; gap:8px; margin-top:10px; }
.job .acts button, .job .acts a { height:42px; padding:0 16px; border-radius:10px; border:2px solid var(--ink); background:#fff; font-weight:700; font-size:16px; text-decoration:none; display:inline-flex; align-items:center; }
.job .acts .soft { border-color:var(--line); color:var(--sub); }

.dim { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20; }
.sheet { background:#fff; border-radius:24px; padding:30px; width:min(560px,100%); }
.sheet h2 { font-size:32px; }
.sheetBtns { display:grid; grid-template-columns:1fr 2fr; gap:10px; }

@media (max-width:900px){ .login{grid-template-columns:1fr;} .brand{min-height:320px; padding:32px 24px;} .brand h2{font-size:44px;} .cube{display:none;} }
@media (max-width:700px){
  .bar{padding:0 16px;} .bar .logo{font-size:0; gap:0;} .wrap{margin:28px auto; padding:0 16px;}
  .row{grid-template-columns:1fr 1fr; } .row .x{grid-column:span 2;}
  .auto{flex-wrap:wrap;} .change{margin-left:0;} .auto .set{font-size:22px;}
}
.who b, .ghost { white-space:nowrap; }
@media (max-width:560px){ .who b{display:none;} .bar{gap:8px;} }
body { word-break:keep-all; }
.brand p.one { max-width:none; white-space:nowrap; font-size:clamp(15px,1.45vw,19px); }