/* ===== JustCut 모바일 완결 플로우 — 컷라이트(Cutlight) 테마 =====
   토큰은 scripts/ui/style.css :root에서 이식(동일 팔레트). 정본: docs/컬러-시스템-2026-07-11.md §B.
   발광 예산: 재생 중 카드 인디케이터 한 곳뿐 — 버튼·배지·스피너는 평시 무광(§7-0 준수). */
:root{
  --bg:#070d19; --panel:#0f1828; --panel2:#18243c; --panel3:#212f4b;
  --ink:#dbe3f0; --muted:#9fadc4; --line:#26344f;
  --acc:#b4e62f; --acc-dim:#8fbf22; --acc-hover:#c6f24d; --acc-text:#0f1500;
  --danger:#ff5f58; --danger-ink:#ff938c; --ok:#2ecc95;
  --scrim:rgba(4,7,15,.62);
  --hov:#243252; --hov-line:#3d5080;
  --radius:12px; --radius-sm:8px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --bar-h:66px;                                   /* 하단 재생 바 높이(safe-area 제외) */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{margin:0;min-height:100%;background-color:var(--bg);
  background-image:radial-gradient(120% 85% at 50% -8%,#0b1326 0%,#070d19 55%,#04070f 100%);
  background-attachment:fixed;color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;
  word-break:keep-all;                            /* 한국어 어절 단위 줄바꿈 — 전역 */
  overflow-x:hidden;                              /* 가로 스크롤 절대 금지 */
  overscroll-behavior-y:contain}                  /* 당겨서 새로고침 오작동 방지 */

/* ── 버튼 공통: 터치 타깃 ≥44px, :active 즉시 피드백, 평시 무광 ── */
button,.filepick,a.primary{font:inherit;color:var(--ink);background:var(--panel3);border:1px solid var(--line);
  border-radius:var(--radius-sm);min-height:44px;min-width:44px;padding:0 14px;cursor:pointer;
  touch-action:manipulation;transition:background .1s,transform .06s}
button:active,a.primary:active{transform:scale(.97);background:var(--hov)}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:active{transform:none;background:var(--panel3)}
button.primary,a.primary{background:var(--acc);color:var(--acc-text);border-color:transparent;font-weight:700}
button.primary:active,a.primary:active{background:var(--acc-dim);transform:scale(.97)}
button.big,a.primary.big{width:100%;min-height:52px;font-size:1.0625rem}
a.primary{display:flex;align-items:center;justify-content:center;text-decoration:none}
.iconbtn{min-width:44px;padding:0;font-size:1.25rem;background:transparent;border-color:transparent}
.iconbtn:active{background:var(--hov)}

/* ── 뷰 전환 (JS가 .on 토글) ── */
.view{display:none}
.view.on{display:block}

/* ── 상단 헤더 (sticky + safe-area 상단) ── */
.tophead{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  background:rgba(6,11,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
h1{font-size:1.125rem;font-weight:800;margin:0;letter-spacing:.01em;user-select:none;
  display:flex;align-items:center;gap:7px}
h1 .cut{color:var(--acc)}
h1 .sub{font-weight:500;color:var(--muted);font-size:.875rem;margin-left:4px}
/* 로고마크(섬광 J, 사용자 최종 확정) + 워드마크(JUST CUT 로고타입 실물 이미지) — 데스크톱과 통일 */
h1 .logomark{width:22px;height:22px;display:block;flex:0 0 auto;border-radius:6px}
h1 .wmimg{height:14px;width:auto;display:block}
.headinfo{flex:1;min-width:0}
.jtitle{font-size:.9375rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jstat{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── ① 홈 / 업로드 ── */
.homebox{max-width:460px;margin:0 auto;padding:20px calc(16px + env(safe-area-inset-right)) 32px calc(16px + env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:14px}
.hometag{margin:2px 0 6px;color:var(--muted);font-size:.9375rem;line-height:1.7}
.filepick{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;text-align:left}
.filepick:active{background:var(--hov)}
.fpicon{flex:0 0 auto;font-size:1.5rem;line-height:1}
.fpmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fplabel{font-weight:700;font-size:.9375rem}
.fplabel em{color:var(--muted);font-style:normal;font-weight:500;font-size:.8125rem}
.fpname{color:var(--muted);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uprog{display:flex;flex-direction:column;gap:6px}
.uplabel{font-size:.8125rem;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}

/* ── ② 분석 처리 중 ── */
.procbox{max-width:420px;margin:0 auto;padding:56px 20px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.procmsg{font-size:1.0625rem;font-weight:700}
.procsub{color:var(--muted);font-size:.875rem;line-height:1.7;margin-top:-6px}
.spinner{width:40px;height:40px;border-radius:50%;
  border:3px solid var(--panel3);border-top-color:var(--acc);
  animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.errmark{width:56px;height:56px;border-radius:50%;background:rgba(255,95,88,.12);
  border:1px solid rgba(255,95,88,.4);color:var(--danger);font-size:1.5rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* ── ③ 검수: 영상(단일 재생 소스, 항상 상단 고정) ── */
.reviewvid{position:sticky;top:calc(53px + env(safe-area-inset-top));z-index:15;background:#000;
  border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.reviewvid video{display:block;width:100%;max-height:34vh;background:#000}

/* ── ③ 검수: 카드 리스트 ── */
.cards{display:flex;flex-direction:column;gap:10px;
  padding:12px calc(12px + env(safe-area-inset-right))
          calc(var(--bar-h) + 24px + env(safe-area-inset-bottom))   /* 하단 고정 바에 안 가리게 */
          calc(12px + env(safe-area-inset-left));
  overscroll-behavior-y:contain}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;transition:border-color .15s,box-shadow .15s,opacity .2s}
.card:active{background:var(--panel2)}
.chead{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.cno{font-size:.75rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.card.edited .cno::after{content:" · 수정됨";color:var(--acc);font-weight:600}
.ctm{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.spacer{flex:1}
.cbtn{min-width:48px;min-height:44px;padding:0 12px;font-size:.8125rem;margin-left:8px}
.cbtn.dbtn{background:transparent;border-color:#5a3038;color:var(--danger-ink)}
.cbtn.dbtn:active{background:#3a2026;border-color:var(--danger)}
.ctext{font-size:.9375rem;line-height:1.55;padding:4px 2px;border-radius:6px;cursor:text;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}  /* 2줄 클램프 */
.card.editing .ctext{display:block;-webkit-line-clamp:unset;overflow:visible}            /* 수정 모드 해제 */
.ctext textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);resize:none;
  border:0;border-radius:6px;padding:8px 10px;outline:none;box-shadow:inset 0 0 0 1.5px var(--acc);
  line-height:1.55;overflow:hidden;word-break:keep-all}
/* 재생 인디케이터 — 이 앱 유일의 발광 */
.card.playing{border-color:var(--acc);
  box-shadow:0 0 0 1px rgba(180,230,47,.35),0 0 14px rgba(180,230,47,.22)}
.card.playing .cno{color:var(--acc)}
/* 삭제 카드: 흐리게 + 취소선 (리스트에서 즉시 제거하지 않음 — 실행취소 대기) */
.card.removed{opacity:.4;border-style:dashed}
.card.removed .ctext{text-decoration:line-through;color:var(--muted)}

/* ── 영상/오디오 로드 실패 안내 (error 이벤트 또는 타임아웃 — 무한 대기 방지) ── */
#mediaError{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:55;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;box-shadow:var(--shadow);text-align:center}
#mediaError[hidden]{display:none}
#mediaError p{margin:0 0 14px;font-size:.9375rem;line-height:1.6;color:var(--ink)}
#mediaError button{width:100%}

/* ── ③ 검수: 하단 고정 재생 바 (엄지존: 재생·저장·렌더) ── */
#playerBar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:8px;
  height:calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding:0 calc(10px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
  background:rgba(7,12,24,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.playbtn{flex:0 0 48px;min-width:48px;min-height:48px;border-radius:50%;font-size:1.125rem;padding:0}
.ptime{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.prow{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pbar{height:5px;background:var(--bg);border-radius:99px;overflow:hidden}
.pbar.wide{height:8px}
#pfill,#upfill,#renderFill{height:100%;width:0%;background:linear-gradient(90deg,var(--acc-dim),var(--acc));
  border-radius:99px;transition:width .2s}
#btnSave,#btnRender{flex:0 0 auto;min-height:48px;font-size:.875rem}
/* 소프트 키보드 표시 중(수정 포커스): 하단 바 숨겨 공간 확보 */
body.kbd #playerBar{display:none}

/* ── ④ 렌더 / 다운로드 (완료 패널 공용) ── */
.donebox{max-width:420px;margin:0 auto;padding:36px 20px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;text-align:center}
.donebox .pbar.wide{margin:4px 0}
.sumline{font-size:1.125rem;font-weight:700}
.sumline b{color:var(--acc);font-variant-numeric:tabular-nums}
.sumline.sub{font-size:.9375rem;color:var(--muted);font-weight:500}
.hint{color:var(--muted);font-size:.875rem;line-height:1.7;margin:2px 0 10px}
.okmark{width:64px;height:64px;margin:0 auto;border-radius:50%;background:rgba(46,204,149,.12);
  border:1px solid rgba(46,204,149,.4);color:var(--ok);font-size:1.75rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}

/* ── 실행취소 스낵바 (하단 고정, 재생 바 위) ── */
#snackbar{position:fixed;left:12px;right:12px;z-index:50;display:flex;align-items:center;gap:10px;
  bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom));
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 8px 6px 16px;box-shadow:var(--shadow);font-size:.875rem}
#snackbar[hidden]{display:none}
#snackMsg{flex:1;min-width:0}
#btnUndo{flex:0 0 auto;color:var(--acc);background:transparent;border-color:var(--acc-dim);font-weight:700}

/* ── 토스트 (fetch 에러 공통) ── */
#toast{position:fixed;left:50%;transform:translateX(-50%);z-index:60;max-width:86vw;
  bottom:calc(var(--bar-h) + 64px + env(safe-area-inset-bottom));
  background:var(--panel2);border:1px solid var(--acc);color:var(--ink);
  padding:10px 16px;border-radius:var(--radius);font-size:.8125rem;box-shadow:var(--shadow)}
#toast[hidden]{display:none}

.empty{padding:56px 20px;text-align:center;color:var(--muted);font-size:.9375rem;line-height:1.7}