/* 🍂 「가을 청명」 라이트 테마 — 2026-09-04 표준
   맑은 하늘 바탕 · 흰 카드 · 감색 강조 · 글자 17px 이상 · 폰 360px 먼저.
   🔴 스토어클립 CSS 는 어두운 테마라 그대로 못 가져온다. 뼈대(카드·단추·칩)는 같은 이름으로 맞춘다. */
:root{
  --sky1:#eaf3fb; --sky2:#f7fbff;
  --ink:#1b2733; --dim:#5b6b7c; --line:#d8e4ef;
  --card:#ffffff; --navy:#1f3d6b; --navy2:#2d5aa0;
  --plum:#5b2a86;                 /* 이 앱의 색 — 파비콘과 같은 진보라 */
  --ok:#1a7f52; --warn:#b06a00; --bad:#b3261e;
  --shadow:0 2px 10px rgba(31,61,107,.08), 0 8px 28px rgba(31,61,107,.06);
}
*{box-sizing:border-box}
/* 🔴 `hidden` 은 무슨 일이 있어도 숨긴다 — 아래 클래스 규칙(display:…)이 브라우저 기본값을
   덮어써서 «숨긴 것이 보이는» 일이 실제로 있었다 (2026-09-21 «수정됨» 점) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); font-size:17px; line-height:1.65;
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif;
  background:linear-gradient(180deg,var(--sky1) 0,var(--sky2) 320px,var(--sky2) 100%);
  min-height:100vh;
}
a{color:var(--navy2)}
h1{font-size:25px;margin:0 0 6px}
h2{font-size:20px;margin:22px 0 10px}
h3{font-size:18px;margin:0 0 6px}
small,.hint{font-size:15px;color:var(--dim)}

/* ── 상단바 ── */
header.top{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
.brand{font-weight:800;font-size:19px;color:var(--plum);text-decoration:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.modeltag{font-size:13px;font-weight:500;color:var(--dim)}
.topright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
nav a{margin-left:12px;text-decoration:none;color:var(--dim);font-size:16px}
nav a.on{color:var(--navy);font-weight:700}
nav a.ghost{color:#93a3b3}

/* 크레딧 칩 */
.hfchip{display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;
  background:#f0f6fc;border:1px solid var(--line);font-size:15px}
.hfchip .c b{font-size:16px}
.hfchip.low{background:#fdecea;border-color:#f3c2bd;color:var(--bad)}
.hfchip.warn{background:#fff6e6;border-color:#f0d9a8;color:var(--warn)}
.hfchip.stale{opacity:.65}
.hfchip .bar{display:inline-block;width:56px;height:6px;border-radius:3px;background:#dce7f2;vertical-align:middle;overflow:hidden}
.hfchip .bar i{display:block;height:100%;background:var(--navy2)}

/* 🖥 PC 기본 — 2026-09-21 사장님 지시 msg 5682 *"PC를 기본으로 해서, 화면을 좀 넓게 써"*
   폰(≤980px)에서는 지금까지처럼 한 줄이다(아래 @media 가 넓을 때만 두 칸으로 편다). */
main{max-width:1440px;margin:0 auto;padding:18px 14px 60px}
header.top{padding:12px 20px}
footer{text-align:center;color:var(--dim);font-size:15px;padding:24px 14px 40px}

/* ── 카드 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.lead{color:var(--dim);margin:0 0 14px}
label.f{display:block;font-weight:700;margin:14px 0 6px;font-size:17px}
input[type=text],input[type=password],input[type=url],input[type=file],textarea,select{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  background:#fbfdff;color:var(--ink);font:inherit;font-size:17px}
input[type=file]{padding:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border:0;border-radius:12px;background:var(--navy);color:#fff;
  font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--navy2)}
.btn.wide{width:100%}
.btn.sub{background:#eef4fa;color:var(--navy)}
.btn.plum{background:var(--plum)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chkline{display:flex;gap:10px;align-items:flex-start}
.err{background:#fdecea;border:1px solid #f3c2bd;color:var(--bad);
  padding:12px 14px;border-radius:11px;margin:10px 0;font-size:16px}
.note{background:#f0f6fc;border:1px solid var(--line);padding:12px 14px;border-radius:11px;margin:10px 0}
.note.warn{background:#fff6e6;border-color:#f0d9a8}
.or{text-align:center;color:var(--dim);margin:16px 0 4px;font-size:16px}

/* ── 단계 띠 ── */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.steps .s{flex:1 1 140px;min-width:130px;padding:10px 12px;border-radius:11px;
  background:#eef4fa;border:1px solid var(--line);font-size:15.5px;color:var(--dim)}
.steps .s.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.steps .s.done{background:#e6f5ee;border-color:#bfe3d2;color:var(--ok)}

/* ── Shot 카드 ── */
.shotwrap{display:grid;grid-template-columns:1fr;gap:14px}
.shot{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.shot>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;gap:12px;align-items:center}
.shot>summary::-webkit-details-marker{display:none}
.shot .thumb{width:104px;height:62px;object-fit:cover;border-radius:9px;background:#dce7f2;flex:0 0 auto}
.shot .hd{flex:1 1 auto;min-width:0}
.shot .no{font-weight:800;color:var(--plum);font-size:17px}
.shot .tc{font-size:15.5px;color:var(--dim)}
.shot .body{padding:0 16px 16px;border-top:1px solid var(--line)}
.rows{margin:12px 0 0}
.rowi{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px dashed var(--line)}
.rowi b{font-size:15.5px;color:var(--navy)}
.rowi span{font-size:17px}
.tagc{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  font-size:13.5px;background:#eef1f4;color:#6b7b8c;border:1px solid #dfe6ee;font-weight:600}
.tagc.guess{background:#fff6e6;color:var(--warn);border-color:#f0d9a8}
.advice{margin-top:14px;background:#f7faff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.advice .a{padding:7px 0;font-size:16.5px}
.advice .a b{color:var(--plum);font-size:15.5px;display:block}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:700;
  background:#eef4fa;color:var(--navy);border:1px solid var(--line)}
.badge.hi{background:#fdecea;color:var(--bad);border-color:#f3c2bd}
.badge.mid{background:#fff6e6;color:var(--warn);border-color:#f0d9a8}
.badge.lo{background:#e6f5ee;color:var(--ok);border-color:#bfe3d2}

video{width:100%;border-radius:13px;background:#000}
.joblist a{display:block;padding:11px 12px;border:1px solid var(--line);border-radius:11px;
  margin-bottom:8px;text-decoration:none;color:var(--ink);background:#fbfdff;font-size:16.5px}
.joblist a:hover{background:#f2f8ff}
.st{font-size:14.5px;padding:1px 9px;border-radius:999px;border:1px solid var(--line);color:var(--dim)}
.st.done{background:#e6f5ee;color:var(--ok);border-color:#bfe3d2}
.st.err{background:#fdecea;color:var(--bad);border-color:#f3c2bd}
.st.run{background:#eef4fa;color:var(--navy);border-color:#cfe0f0}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ══════════ ② 수정 화면 ══════════ (2026-09-21 · 폰 360px 먼저 · 17px 이상) */
.note.ok{background:#e6f5ee;border-color:#bfe3d2;color:var(--ok)}
.note.small{font-size:15.5px;padding:9px 12px;margin:8px 0 0}

/* 올려 둔 사진 */
.refnow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.refnow img{width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.refnow.small img{width:74px;height:74px;border-radius:10px}

/* Shot 머리 — 썸네일 + 자동 판정 */
.shotedit .sehead{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.shotedit .thumb{width:112px;height:66px;object-fit:cover;border-radius:10px;background:#dce7f2;flex:0 0 auto}
.shotedit .sehd{flex:1 1 220px;min-width:0}
.shotedit .no{color:var(--plum);font-size:18px;margin-right:8px}
.shotedit .tc{color:var(--dim);font-size:15.5px}
.verdict{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
.verdict .cost{font-weight:700;color:var(--navy);font-size:16px}
.verdict .why{display:block;flex:1 1 100%;color:var(--dim);font-size:15px;font-style:normal}
.badge.m-keep{background:#eef1f4;color:#5b6b7c;border-color:#dfe6ee}
.badge.m-fx{background:#f3e9fb;color:var(--plum);border-color:#dcc6ee}
.badge.m-genjutsu_replace{background:#e6f5ee;color:var(--ok);border-color:#bfe3d2}
.badge.m-genjutsu_motion{background:#e6f0fb;color:var(--navy2);border-color:#c7ddf4}
.badge.m-first_frame_video{background:#fff6e6;color:var(--warn);border-color:#f0d9a8}

/* 교체표 — 폰에서는 줄마다 카드처럼 쌓인다 */
.rtable{width:100%;border-collapse:collapse;margin-top:14px}
.rtable thead{display:none}
.rtable tr{display:block;border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:10px;background:#fbfdff}
.rtable th[scope=row]{display:block;text-align:left;color:var(--navy);font-size:16px;padding:0 0 3px}
.rtable td{display:block;padding:0}
.rtable td.seen{font-size:15.5px;color:var(--dim);margin-bottom:9px}
.rtable td.seen small{display:block;font-size:13.5px;color:#93a3b3}
.hows{display:flex;gap:7px;flex-wrap:wrap}
.hchip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px}
.hchip input{margin:0}
.hchip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.hbody{margin-top:9px}
.hbody .htext input{font-size:16.5px}

/* ✨ 특수효과 고르기 */
details.fxpick{margin-top:14px;border:1px solid var(--line);border-radius:13px;background:#faf7fd;padding:11px 13px}
details.fxpick>summary{cursor:pointer;font-weight:700;font-size:17px;color:var(--plum)}
details.fxpick .fxnow{display:block;font-size:15.5px;color:var(--navy);font-weight:600}
.fxcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.fxcard{display:block;border:1px solid var(--line);border-radius:13px;background:#fff;
  padding:9px;cursor:pointer;position:relative}
.fxcard input{position:absolute;top:9px;left:9px;z-index:2;width:20px;height:20px}
.fxcard video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#0b0b10;margin-bottom:6px}
.fxcard .fh{display:flex;gap:5px;align-items:baseline;flex-wrap:wrap}
.fxcard .fh i{font-style:normal;font-size:17px}
.fxcard .fh b{font-size:15.5px}
.fxcard .fh em{margin-left:auto;font-style:normal;font-size:13.5px;color:var(--dim)}
.fxcard small{display:block;font-size:13.5px;color:var(--dim);line-height:1.5}
.fxcard small.fw{margin-top:4px;color:#93a3b3}
.fxcard:has(input:checked){border-color:var(--plum);background:#f6eefc;box-shadow:0 0 0 2px #e0cdf2}
.fxcard.none{display:flex;flex-direction:column;justify-content:center;min-height:118px;padding-left:36px}

/* 값 셈 */
.summary{position:sticky;bottom:0;z-index:5}
.sumline{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;font-size:16px}
.sumline .total{font-size:17px}
.sumline .total.over{color:var(--bad);font-weight:700}
.meter{height:9px;border-radius:5px;background:#dce7f2;overflow:hidden;margin:9px 0}
.meter i{display:block;height:100%;background:var(--navy2)}

@media (min-width:760px){
  .rowi{grid-template-columns:200px 1fr;gap:12px;align-items:baseline}
  .split{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
  .split .sticky{position:sticky;top:78px}
  .rtable tr{display:grid;grid-template-columns:96px 1fr 320px;gap:14px;align-items:start}
  .rtable td.seen{margin-bottom:0}
}

/* ═══════ 🖥 PC 기본 넓은 화면 (msg 5682) ═══════
   1080px 부터 두 칸, 1360px 부터 ① 보고서 Shot 카드가 2열이 된다. */
@media (min-width:1080px){
  /* 🔴 ① 보고서·③ 완료는 머리가 화면 전폭이다 — 원본 영상까지 1440px 로 늘리면
     첫 화면이 영상 하나로 꽉 차 아무것도 안 보인다. 재생기만 가운데로 묶는다. */
  .jobhead>.player{max-width:780px;margin:0 auto 12px}
  .split{grid-template-columns:400px 1fr;gap:20px}
  /* ② 수정 — 왼쪽(원본 영상 + 흐름 띠)은 붙박이, 오른쪽에서 고친다 */
  .editsplit{grid-template-columns:430px 1fr}
  .editsplit>.sticky{position:sticky;top:78px;max-height:calc(100vh - 92px);
    overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
  .homesplit{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
}
@media (min-width:1360px){
  /* ① 보고서 — Shot 카드 2열 (오른쪽 칸이 넓어진 만큼)
     🔴 `align-items:start` — 이게 없으면 접힌 카드가 옆의 펼친 카드 높이만큼 늘어나
        «속이 빈 기다란 상자»가 된다 */
  .shotwrap{grid-template-columns:1fr 1fr;align-items:start}
  .cuts{grid-template-columns:1fr 1fr;align-items:start}
}

/* ═══ ③ 만들기 · 공통 머리(원본 영상 + 퍼센트 띠) — 2026-09-21 사장님 지시 msg 5671 ═══ */
/* 🔴 폰 360px 에서 폭 100% 가 기본이다. 넓은 화면에서만 위쪽 여백을 조금 준다. */
.jobhead{padding-bottom:14px}
.jobhead .player{margin-bottom:12px}
.jobhead .player video{width:100%;max-width:100%;display:block;border-radius:12px;background:#0b0b10}
.ytbox{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0b10}
.ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prog{display:flex;gap:12px;align-items:center;flex-wrap:nowrap}
.prog .pnum{display:flex;align-items:baseline;gap:1px;color:var(--navy);flex:0 0 auto}
.prog .pnum b{font-size:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.prog .pnum i{font-style:normal;font-size:19px;font-weight:700}
.prog .ptxt{min-width:0;flex:1 1 auto}
.prog .ptxt b{display:block;font-size:17px;color:var(--ink)}
.prog .ptxt small{display:block;color:var(--dim)}
.prog.run .pnum{color:var(--navy2)}
.prog.bad .pnum{color:var(--bad)}
.meter.big{height:13px;border-radius:7px;margin:10px 0 0}
.meter.big i{background:linear-gradient(90deg,var(--navy2),var(--plum));transition:width .6s ease}
.prog.bad ~ .meter.big i{background:var(--bad)}

/* ③ 만들기 단추 상자 */
.makebox{border-color:#dcc6ee;background:linear-gradient(180deg,#faf5ff 0,#fff 90px)}

/* ③ 컷별 결과 */
.cuts{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.cut{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
     border-radius:13px;padding:11px 13px;background:#fbfdff}
.cut.fail{border-color:#f3c2bd;background:#fffaf9}
.cut .thumb{width:104px;height:62px;object-fit:cover;border-radius:9px;background:#dce7f2;flex:0 0 auto}
.cut .cbody{flex:1 1 auto;min-width:0}
.cut .no{color:var(--plum);font-size:17px;margin-right:8px}
.cut .tc{color:var(--dim);font-size:15px}
.cline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cstate{font-size:15.5px;font-weight:700;color:var(--navy)}
.cut.fail .cstate{color:var(--bad)}
.cut .cost{font-size:15px;color:var(--dim);margin-left:auto}
.cut .why{margin:6px 0 0;font-size:15px;color:var(--dim)}
.cut .cnote{margin:5px 0 0;font-size:15px;color:var(--ink);background:#fff;border:1px dashed var(--line);
            border-radius:9px;padding:7px 10px;word-break:break-word}
.bad{color:var(--bad)}

/* ═══ ✍️ Shot 프롬프트 (msg 5675) · 🌍 영상 전체 수정 (msg 5677) ═══ */
.shotprompt{margin-top:14px;border-top:1px dashed var(--line);padding-top:6px}
.shotprompt textarea{font-size:17px;width:100%}
.globalbox{border-color:#c7ddf4;background:linear-gradient(180deg,#f3f8ff 0,#fff 110px)}
.globalbox textarea{font-size:17px;width:100%}
/* ═══ 🏷 Shot 짧은 제목 · 🎞 흐름 띠 · 접이식 카드 — 2026-09-21 사장님 지시 msg 5682 ═══ */

/* 🏷 제목 — 번호 옆에 굵게. 좁은 화면에서 잘리지 않게 줄을 넘긴다 */
.stitle{font-size:17px;color:var(--ink);font-weight:800;word-break:keep-all}
.shot .stitle{margin-left:2px}
.cut .stitle{font-size:16.5px;margin-right:6px}

/* 🎞 흐름 띠 */
.flowcard{padding:13px 14px}
.flowhd{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.flowhd b{font-size:17px;color:var(--plum)}
.btn.tiny{padding:6px 13px;font-size:15px;border-radius:9px}
.flowstrip{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.fitem{flex:1 1 0;min-width:106px;max-width:260px;scroll-snap-align:start;
  display:block;text-decoration:none;color:var(--ink);background:#fbfdff;
  border:1px solid var(--line);border-radius:11px;padding:6px;cursor:pointer}
.fitem:hover{background:#f2f8ff;border-color:#c7ddf4}
.fitem.on{border-color:var(--plum);background:#f8f2fd;box-shadow:0 0 0 2px #e0cdf2}
.fitem img,.fitem .ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:8px;background:#dce7f2;margin-bottom:5px}
.fitem .ph{display:flex;align-items:center;justify-content:center;color:#93a3b3;font-weight:800}
.fitem .ft{display:block;min-width:0}
.fitem .n{display:inline-block;min-width:20px;font-size:14px;font-weight:800;color:var(--plum)}
/* 🔴 제목은 두 줄까지 보여 준다 — 한 줄로 잘라 「미디엄 클…」 이 되면 제목 구실을 못 한다 */
.fitem .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  font-size:14px;line-height:1.3;font-weight:700;min-height:2.6em;
  overflow:hidden;word-break:keep-all}
.fitem small{display:block;font-size:13px;color:var(--dim)}
.fitem .dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--plum);margin-left:4px;vertical-align:middle;font-style:normal}

/* 접이식 카드 공통 — 여닫이 꺾쇠 */
.caret{flex:0 0 auto;align-self:center;color:#93a3b3;font-size:16px;transition:transform .15s ease}
details[open]>summary .caret{transform:rotate(180deg)}

/* ② 수정 — 카드 머리(요약)는 늘 보이고 본문만 접힌다 */
details.shotedit{padding:0}
details.shotedit>summary{list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;gap:12px;align-items:flex-start;flex-wrap:nowrap}
details.shotedit>summary::-webkit-details-marker{display:none}
details.shotedit>summary:hover{background:#f8fbff;border-radius:16px}
details.shotedit[open]>summary{border-bottom:1px solid var(--line);border-radius:16px 16px 0 0}
details.shotedit .sebody{padding:0 16px 16px}
.editdot{font-style:normal;font-size:13.5px;font-weight:700;color:var(--plum);
  background:#f6eefc;border:1px solid #dcc6ee;border-radius:999px;padding:1px 9px;margin-left:6px}

.grefs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:6px 0 10px}
.gref{border:1px solid var(--line);border-radius:12px;padding:7px;background:#fff}
.gref img,.gref video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;background:#dce7f2;display:block}
.gref .chkline{margin-top:6px;font-size:14.5px}