/* 뇌새김 TOEIC — 교안 검수 웹앱 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#EEF0F3; --surf:#fff; --surf2:#F7F8FA;
  --ink:#33383E; --ink2:#4E5968; --ink3:#8B95A1; --ink4:#B0B8C1;
  --line:#E1E4E9;
  /* 🚩 주색 = 파랑(#2F6BFF). 파비콘의 곰 판과 같은 값입니다.
     🚨 --am(주 강조)과 --jd(논의 필요)를 **맞바꾼 것**입니다 — 둘 다 파랑이면
        PD 기입란의 「논의 필요」가 주색에 묻힙니다. 지금은
        파랑(주 강조) · 앰버(논의 필요) · 초록(반영 완료) · 빨강(수정 필요)으로 갈립니다. */
  --am:#2F6BFF; --am-soft:#E8EFFF; --am-ink:#1B47B8;
  --ok:#14AD6D; --ok-soft:#E4F5EC; --ok-ink:#0B7A4C;
  --jd:#F59E0B; --jd-soft:#FEF1DD; --jd-ink:#B45309;
  --pk:#FF6EA8; --pk-soft:#FFE9F1; --pk-ink:#B72E63;
  --ng:#FF5454; --ng-soft:#FFEDED; --ng-ink:#B32B2B;
  --sans:'Pretendard','Pretendard Variable','Noto Sans KR',-apple-system,sans-serif;
  --mono:'Roboto Mono',monospace;
  --rail:340px;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.65}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--am);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* 🚩 들어오는 문 — 암호를 맞히기 전에는 이것만 보입니다. */
.gate{position:fixed;inset:0;z-index:99;background:rgba(20,24,28,.42);
  display:flex;align-items:center;justify-content:center;padding:20px}
/* 🚨 `display:flex` 가 브라우저 기본 `[hidden]{display:none}` 을 이깁니다 —
      이 한 줄이 없으면 암호를 맞혀도 문이 화면을 덮은 채 남습니다. */
.gate[hidden]{display:none}
.gbox{display:flex;flex-direction:column;gap:9px;width:100%;max-width:330px;
  background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:28px 26px;
  box-shadow:0 8px 30px rgba(0,0,0,.07)}
.gbox h1{font-size:16px;font-weight:900;letter-spacing:-.025em;line-height:1.4}
.grow{display:flex;gap:7px}
.grow button{flex:1}
.gcancel{background:var(--surf2)!important;color:var(--ink3)!important;
  border:1px solid var(--line)!important;font-weight:400!important;flex:0 0 auto!important}
.gbox p{font-size:12.5px;color:var(--ink3);line-height:1.6;margin-bottom:5px}
.gbox input{background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:9px 12px;font-size:14px}
.gbox button{background:var(--am);border:none;border-radius:6px;padding:9px;
  font-size:13.5px;font-weight:700;color:#fff;cursor:pointer}
.gbox button:hover{filter:brightness(.96)}
.gerr{font-size:12px;color:var(--ng-ink);min-height:16px}
.gnote{font-size:11px;color:var(--ink4);line-height:1.5}

.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;align-items:start}
@media(max-width:1000px){.app{grid-template-columns:1fr}}

/* 🚩 왼쪽 판 접기 — 접으면 **좁은 레일**로 남습니다(관리자 콘솔 식).
   🚨 통째로 감추지 않습니다. 계열 사이를 오갈 길이 없어집니다. */
.shd{display:flex;align-items:flex-start;gap:6px}
.shd .ttl{flex:1;min-width:0}
.sbt{flex:0 0 auto;width:28px;height:28px;line-height:1;border:1px solid var(--line);
  background:var(--surf);color:var(--ink3);border-radius:7px;cursor:pointer;font-size:11px}
.sbt:hover{border-color:var(--am);color:var(--am-ink)}

#rail{display:none;flex-direction:column;gap:6px;align-items:center}
.ri{position:relative;width:38px;height:38px;border:1px solid var(--line);background:var(--surf);
  color:var(--ink2);border-radius:9px;cursor:pointer;font-family:var(--mono);
  font-size:14px;font-weight:700}
.ri:hover{border-color:var(--am);color:var(--am-ink);background:var(--surf2)}
.ri.on{background:var(--am-soft);border-color:var(--am);color:var(--am-ink)}
.ri i{position:absolute;top:-4px;right:-4px;font-style:normal;font-family:var(--mono);
  font-size:9px;background:var(--am);color:#fff;border-radius:8px;padding:0 4px;
  line-height:14px;border:1.5px solid var(--surf)}

body.side-off .app{grid-template-columns:58px 1fr}
/* 🚨 `.side` 는 내용 높이만큼만 섭니다 — 접으면 버튼 몇 개뿐이라 면과 선이 중간에 끊깁니다.
      화면 끝까지 끌어내려야 참고 콘솔처럼 한 판으로 보입니다. */
body.side-off .side{padding:10px 9px 16px;overflow:visible;
  height:100vh;background:var(--surf2)}
body.side-off .ttl,body.side-off #nav{display:none}
body.side-off #rail{display:flex;margin-top:9px}
body.side-off .shd{justify-content:center}
body.side-off .sbt{width:38px;height:30px}
@media(max-width:1000px){body.side-off .app{grid-template-columns:1fr}
  body.side-off #rail{flex-direction:row;flex-wrap:wrap;margin-top:0}}

/* ── 좌측 ─────────────────────────────── */
.side{position:sticky;top:0;max-height:100vh;overflow:auto;background:var(--surf);
  border-right:1px solid var(--line);padding:18px 14px 40px}
@media(max-width:1000px){.side{position:static;max-height:none;border-right:none;
  border-bottom:1px solid var(--line)}}
.side h1{font-size:15px;font-weight:900;letter-spacing:-.03em;line-height:1.3}
.side .s1{font-size:11px;color:var(--ink3);margin:2px 0 13px}
.home{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;
  border:none;border-radius:6px;padding:8px 8px;cursor:pointer;font-size:12.5px;
  font-weight:700;color:var(--ink2);margin-bottom:4px}
.home:hover{background:var(--surf2);color:var(--am-ink)}
.home.on{background:var(--am-soft);color:var(--am-ink)}
.home .ic{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;background:var(--am);color:#fff;font-family:var(--mono);
  font-size:10px;font-weight:700}
.guide{width:100%;height:100vh;border:none;background:var(--surf);display:block}
/* 🚩 홈일 때는 위쪽 것들을 통째로 걷어내고 사용법만 남깁니다. */
body.home-on .top,body.home-on .bar,body.home-on .note{display:none}
body.home-on .main{padding:0;min-height:100vh}
@media(max-width:1000px){body.home-on .guide{height:calc(100vh - 60px)}}
.ser{border-top:1px solid var(--line)}
.ser:first-child{border-top:none}
.sh2{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;
  border:none;padding:11px 6px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink)}
.sh2:hover{color:var(--am-ink)}
.sh2 .ar{font-size:10px;color:var(--ink4);transition:transform .12s;display:inline-block}
.ser.op .sh2 .ar{transform:rotate(90deg)}
.sh2 .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh2 .ct{font-family:var(--mono);font-size:10px;color:var(--ink4);font-weight:400}
/* 🚩 검수 완료 비율 — 분모는 「검수판에 실린 강의」입니다(아직 안 올린 것 제외). */
.sh2 .pct{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ok-ink);
  background:var(--ok-soft);border-radius:9px;padding:0 6px;line-height:16px}
.sh2 .pct.full{background:var(--ok);color:#fff}
.bar2{height:3px;background:var(--line);border-radius:2px;margin:0 6px 8px;overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--ok);border-radius:2px;
  transition:width .2s}
.sh2 .b,.lk .b{font-family:var(--mono);font-size:10px;background:var(--am);color:#fff;
  border-radius:9px;padding:0 6px;line-height:16px;font-weight:700}
.lst{padding:0 0 8px 4px;border-left:2px solid var(--line);margin-left:9px}
.flt{display:flex;gap:4px;padding:3px 0 6px 7px;flex-wrap:wrap}
.fc{border:1px solid var(--line);background:var(--surf);border-radius:11px;padding:1px 9px;
  font-size:10.5px;cursor:pointer;color:var(--ink3);line-height:1.7}
.fc:hover{border-color:var(--am);color:var(--am-ink)}
.fc.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700}
.empty2{font-size:11px;color:var(--ink4);padding:6px 8px}
.lk{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;
  border:none;border-radius:5px;padding:5px 7px;cursor:pointer;font-size:12.5px}
.lk:hover{background:var(--surf2)}
.lk.on{background:var(--am-soft);color:var(--am-ink);font-weight:700}
.lk.todo{color:var(--ink4);cursor:not-allowed}
.lk.todo:hover{background:none}
.lk .ck{flex:0 0 11px;color:var(--ok);font-weight:900;font-size:12px;line-height:1}
.lk .fxd{flex:0 0 8px;color:var(--ng);font-size:9px;line-height:1}
.lk .n{font-family:var(--mono);font-size:10px;color:var(--ink4);flex:0 0 18px}
.lk.fin .t{color:var(--ink3)}
/* 🚩 담당자 색 — T1 파랑 · T2 분홍. 목록에서 두 사람 몫이 눈으로 갈리게. */
.lk .ow{font-family:var(--mono);font-size:9.5px;font-weight:700;background:var(--jd-soft);
  color:var(--jd-ink);border-radius:3px;padding:1px 4px;flex:0 0 auto}
.lk .ow.t2{background:var(--pk-soft);color:var(--pk-ink)}
.lk.on .ow{background:#fff}
.lk .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk .sc{font-size:9.5px;color:var(--ink3);background:var(--surf2);border-radius:3px;
  padding:1px 4px;flex:0 0 auto}
.lk.on .sc{background:#fff;color:var(--am-ink)}
.lk.todo .sc{background:none;color:var(--ink4)}

/* ── 상단 ─────────────────────────────── */
.main{padding:18px 20px 70px;min-width:0}
.top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:5px}
.top h2{font-size:19px;font-weight:900;letter-spacing:-.025em}
.top .m{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 14px}
.me{width:150px;background:var(--surf);border:1px solid var(--line);border-radius:5px;
  padding:6px 10px;font-size:13px}
.btn{border:1px solid var(--line);background:var(--surf);border-radius:5px;padding:6px 13px;
  font-size:12px;cursor:pointer;color:var(--ink2)}
.btn:hover{border-color:var(--am);color:var(--am-ink)}
.btn.on{background:var(--am-soft);border-color:var(--am);color:var(--am-ink);font-weight:700}
.btn.fix{margin-left:auto;border-color:var(--ng);color:var(--ng-ink);font-weight:700}
.btn.fix:hover{background:var(--ng-soft)}
.btn.fix.on{background:var(--ng);border-color:var(--ng);color:#fff}
.btn.done{border-color:var(--ok);color:var(--ok-ink);font-weight:700}
.btn.done:hover{background:var(--ok-soft)}
.btn.done.on{background:var(--ok);border-color:var(--ok);color:#fff}
.owsel{display:inline-flex;gap:4px;align-items:center;margin-left:6px;
  font-family:var(--sans);font-size:11px;color:var(--ink3)}
.top .ow{font-family:var(--mono);font-size:10px;font-weight:700;background:var(--jd-soft);
  color:var(--jd-ink);border-radius:3px;padding:1px 6px}
.top .ow.t2{background:var(--pk-soft);color:var(--pk-ink)}
.fc.on.t1{background:var(--jd);border-color:var(--jd)}
.fc.on.t2{background:var(--pk);border-color:var(--pk)}
.p{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:4px 12px;
  font-size:11.5px;color:var(--ink2)}
.p b{font-family:var(--mono);color:var(--ink);margin-left:3px}
.p.a{border-color:var(--am);background:var(--am-soft);color:var(--am-ink)}
.p.o{border-color:var(--jd);background:var(--jd-soft);color:var(--jd-ink)}
.p.x{border-color:var(--ng);background:var(--ng-soft);color:var(--ng-ink)}
.p.d{border-color:var(--ok);background:var(--ok);color:#fff}
.p.d b{color:#fff}
.note{background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--am);
  border-radius:0 6px 6px 0;padding:10px 14px;font-size:12.5px;color:var(--ink2);
  line-height:1.6;margin:0 0 14px}
.note.err{border-left-color:var(--ng);color:var(--ng-ink)}
.note b{color:var(--ink)}

/* ── 슬라이드 + 우측 레일 ─────────────── */
.row{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:14px;margin-bottom:24px;
  align-items:start}
@media(max-width:1180px){.row{grid-template-columns:minmax(0,1fr)}}
.slab{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.slab .no{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.stage{position:relative;background:var(--surf);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 6px 20px rgba(0,0,0,.06)}
.sl{position:relative;width:1279.968px;height:720px;transform-origin:top left}
.sh{position:absolute}
.tx{position:absolute;display:flex;flex-direction:column;white-space:pre-wrap;word-break:keep-all}
.sl>.no{position:absolute;right:10px;bottom:8px;font-family:var(--sans);font-size:11px;
  color:#AFAFAF;letter-spacing:.08em;z-index:5}
.stage.pick{cursor:crosshair}
.stage.pick .sl .sh:not(.deco):hover,.stage.pick .sl .tx:hover{
  outline:2px solid var(--am);outline-offset:1px;background-color:rgba(47,107,255,.10)}
.ov{position:absolute;inset:0;pointer-events:none;z-index:8}
.mk{position:absolute;transform:translate(-50%,-50%);background:var(--am);color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3);
  pointer-events:auto;cursor:pointer}
.mk.done{background:var(--ok);color:#fff;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.3)}
.mk.old{background:var(--ink4);color:#fff}
.hl{position:absolute;border:2px solid var(--am);border-radius:3px;background:rgba(47,107,255,.12)}

/* ── 댓글 레일 ────────────────────────── */
.rail{background:var(--surf);border:1px solid var(--line);border-radius:8px;
  padding:12px 13px;min-height:120px}
/* 🚩 이 강의에 쓰인 문항 — 접기 상자 */
.qbox{background:var(--surf);border:1px solid var(--line);border-radius:8px;margin-bottom:14px}
.qh{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:none;padding:11px 14px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink)}
.qh:hover{color:var(--am-ink)}
.qh .ar{font-size:10px;color:var(--ink4);transition:transform .12s;display:inline-block}
.qbox.op .qh .ar{transform:rotate(90deg)}
.qh b{font-family:var(--mono);color:var(--am-ink);background:var(--am-soft);
  border-radius:9px;padding:0 7px;font-size:11px}
.qh .hint{margin-left:auto;font-size:11px;font-weight:400;color:var(--ink4)}
.qlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;
  padding:0 14px 14px}
.qit{background:var(--surf2);border:1px solid var(--line);border-radius:7px;padding:11px 13px}
.qu{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.qmeta{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}
.qid{font-family:var(--mono);font-size:9.5px;background:var(--surf);border:1px solid var(--line);
  border-radius:3px;padding:1px 6px;color:var(--ink3)}
.qm{font-size:9.5px;background:var(--line);border-radius:3px;padding:1px 6px;color:var(--ink3)}
.qst{font-size:12.5px;line-height:1.6;margin-bottom:6px;word-break:break-word}
ul.qop{list-style:none;font-size:12px;line-height:1.65}
ul.qop li{color:var(--ink2)}
ul.qop li b{font-family:var(--mono);font-size:10.5px;color:var(--ink4);margin-right:3px}
ul.qop li.ok{color:var(--ok-ink);font-weight:700}
ul.qop li.ok b{color:var(--ok)}
.ansmark{font-family:var(--mono);font-size:9px;background:var(--ok-soft);color:var(--ok-ink);
  border-radius:3px;padding:0 5px}
.qatom{font-family:var(--mono);font-size:9.5px;color:var(--ink4);margin-top:7px;
  padding-top:6px;border-top:1px solid var(--line);word-break:break-all}

/* 🚩 강의 전체 의견 — 장표 위에 한 칸. 왼쪽은 쓰는 자리, 오른쪽은 쌓인 의견.
   🚨 클래스 이름을 `top` 으로 쓰지 마십시오 — 화면 머리(`.top`)와 부딪혀 flex 가 새어 듭니다. */
.rail.whole{min-height:0;margin-bottom:24px;border-left:3px solid var(--ng);
  display:grid;grid-template-columns:340px minmax(0,1fr);gap:0 20px;
  grid-template-areas:"head list" "tags list" "form list" "msg list";align-content:start}
@media(max-width:900px){.rail.whole{grid-template-columns:minmax(0,1fr);
  grid-template-areas:"head" "tags" "form" "msg" "list"}}
/* 🚨 격자 칸을 안 주면 태그가 「남기기」 아래로 밀립니다 — 자리를 못 찾아 새 줄에 앉습니다. */
.rail.whole .tags{grid-area:tags}
.rail.whole .rh{grid-area:head;font-size:13.5px;color:var(--ink2);font-weight:700}
.rail.whole .rh b{color:var(--ng-ink)}
.rail.whole .cf{grid-area:form}
.rail.whole .cmsg{grid-area:msg}
.rail.whole ul.cl,.rail.whole .empty{grid-area:list;margin-top:0}
.rail.whole ul.cl>li:first-child{border-top:none;padding-top:0}
.rail.whole .cf textarea{min-height:56px}
.rh{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink3);margin-bottom:9px}
.rh b{font-family:var(--mono);color:var(--am-ink)}
.rh .btn{margin-left:auto;padding:4px 10px}
.cf textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:8px 10px;font-size:13px;min-height:62px;resize:vertical;line-height:1.55}
.cf .go{background:var(--am);color:#fff;border:none;border-radius:5px;padding:7px 15px;
  font-size:12.5px;font-weight:700;cursor:pointer;margin-top:6px}
.cf .go:disabled{opacity:.45;cursor:not-allowed}
/* 🚩 의견 태그 — **선택 사항**. 고르면 색이 차고, 의견에도 같은 색 뱃지가 붙습니다.
   색은 갈래로 묶었습니다 — 말한 것(파랑) · 보이는 것(보라) · 틀린 것(빨강·주황) ·
   소리(분홍) · 짜임(초록) · 물음(회색). */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px;
  /* 🚨 격자 칸 안에서는 칩이 칸 높이만큼 늘어납니다 — 위에 붙여 둡니다. */
  align-items:flex-start;align-content:flex-start}
.tg{flex:0 0 auto}
.tg{border:1px solid var(--line);background:var(--surf);border-radius:11px;padding:1px 8px;
  font-size:10.5px;cursor:pointer;color:var(--ink3);line-height:1.75}
.tg:hover{border-color:var(--ink3);color:var(--ink2)}
.ch .tg{cursor:default;padding:0 6px;font-size:9.5px;line-height:1.65}
.tg.t0.on{background:#E8EFFF;border-color:#2F6BFF;color:#1B47B8;font-weight:700}
.tg.t1.on{background:#E4F4FD;border-color:#0EA5E9;color:#0369A1;font-weight:700}
.tg.t2.on{background:#E1F6F3;border-color:#14B8A6;color:#0F766E;font-weight:700}
.tg.t3.on{background:#F3E9FF;border-color:#8B5CF6;color:#6D28D9;font-weight:700}
.tg.t4.on{background:#F8EBFF;border-color:#A855F7;color:#7E22CE;font-weight:700}
.tg.t5.on{background:#FFEDED;border-color:#FF5454;color:#B32B2B;font-weight:700}
.tg.t6.on{background:#FEF1DD;border-color:#F59E0B;color:#9A6206;font-weight:700}
.tg.t7.on{background:#FFEBDD;border-color:#EA580C;color:#B4470D;font-weight:700}
.tg.t8.on{background:#FFE9F1;border-color:#EC4899;color:#B72E63;font-weight:700}
.tg.t9.on{background:#E4F5EC;border-color:#14AD6D;color:#0B7A4C;font-weight:700}
.tg.t10.on{background:#EDF0F3;border-color:#64748B;color:#445061;font-weight:700}
.tgt{display:inline-block;background:var(--am-soft);color:var(--am-ink);border-radius:4px;
  padding:3px 8px;font-size:11.5px;margin-bottom:6px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tgt .x{margin-left:6px;cursor:pointer;font-weight:700}
.cmsg{font-size:11.5px;color:var(--ink3);margin-top:5px}
.cmsg.err{color:var(--ng-ink)}
ul.cl{list-style:none;margin-top:11px}
ul.cl>li{border-top:1px solid var(--line);padding:10px 0}
ul.cl>li.hi{background:var(--am-soft);border-radius:6px;padding-left:8px;padding-right:8px}
.ch{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);margin-bottom:3px}
.ch .who{font-weight:700;color:var(--ink2)}
.ch .i{background:var(--am);color:#fff;border-radius:50%;width:15px;height:15px;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px}
.ch .sp{margin-left:auto;display:flex;gap:4px}
.mini{border:1px solid var(--line);background:var(--surf2);color:var(--ink2);font-size:11px;
  font-weight:700;cursor:pointer;padding:2px 8px;border-radius:4px;line-height:1.5}
.mini:hover{border-color:var(--am);background:var(--am-soft);color:var(--am-ink)}
.mini.del:hover{border-color:var(--ng);background:var(--ng-soft);color:var(--ng-ink)}
.el{display:inline-block;font-family:var(--mono);font-size:10px;background:var(--surf2);
  color:var(--ink3);border-radius:3px;padding:1px 6px;margin-bottom:4px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.cb{font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.old{font-family:var(--mono);font-size:10px;color:var(--ng-ink);background:var(--ng-soft);
  border-radius:3px;padding:1px 6px;display:inline-block;margin-top:4px}
.bd{font-family:var(--mono);font-size:10px;border-radius:4px;padding:2px 7px;
  display:inline-block;margin-top:5px}
.bd.a{background:var(--jd-soft);color:var(--jd-ink)}
.bd.r{background:var(--ng-soft);color:var(--ng-ink)}
.bd.done{background:var(--ok);color:#fff;font-weight:700}
.anote{font-size:11px;color:var(--ok-ink);background:var(--ok-soft);border-radius:4px;
  padding:5px 8px;margin-top:5px;line-height:1.5}
.jd{display:flex;gap:5px;margin-top:6px}
.jd button{border:1px solid var(--line);background:var(--surf);border-radius:5px;
  padding:3px 10px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--ink2)}
.jd button.on-a{background:var(--jd-soft);border-color:var(--jd);color:var(--jd-ink)}
.jd button.on-r{background:var(--ng-soft);border-color:var(--ng);color:var(--ng-ink)}
ul.re{list-style:none;margin:8px 0 0 12px;padding-left:10px;border-left:2px solid var(--line)}
ul.re li{padding:7px 0}
.rbtn{border:none;background:none;color:var(--am-ink);font-size:11.5px;cursor:pointer;
  padding:3px 0;margin-top:4px}
.empty{color:var(--ink4);font-size:12.5px;padding:14px 0}
.todoBox{background:var(--surf);border:1px dashed var(--line);border-radius:8px;
  padding:40px 24px;text-align:center;color:var(--ink3);font-size:13.5px}

/* ══════════════════════════════════════════════════════════
   강의 검수판 — 영상 · 타임라인 띠 · 자동 검사 · 캡처
   ══════════════════════════════════════════════════════════ */
.gh{font-family:var(--mono);font-size:10px;color:var(--ink4);letter-spacing:.1em;
  margin:12px 0 5px;padding-top:9px;border-top:1px solid var(--line)}
body.side-off .gh{display:none}

.stage2{background:var(--surf);border:1px solid var(--line);border-radius:10px;
  padding:12px;margin-bottom:16px}
.vwrap{position:relative;background:#111;border-radius:8px;overflow:hidden;
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
#vd{width:100%;height:100%;display:block;background:#111}
.drop{color:#E8EDEA;text-align:center;padding:24px;font-size:13.5px;line-height:1.7}
.drop b{font-size:15px}
.drop p{color:#9AA4AD;font-size:12.5px;margin:8px 0 14px}
.drop code{font-family:var(--mono);font-size:11px;background:#000;padding:2px 7px;border-radius:4px}
.pick{display:inline-block;background:var(--am);color:#fff;font-weight:700;font-size:13px;
  padding:9px 18px;border-radius:7px;cursor:pointer}

.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.vb{border:1px solid var(--line);background:var(--surf);border-radius:6px;padding:5px 10px;
  font-size:12px;cursor:pointer;color:var(--ink2)}
.vb:hover{border-color:var(--am);color:var(--am-ink)}
select.vb{padding:5px 6px}
.tcin{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:6px;
  padding:5px 9px;background:var(--bg)}
.vname{font-size:11px;color:var(--ink4);max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cap-btn{margin-left:auto;background:var(--am);border:none;border-radius:6px;padding:7px 15px;
  font-size:13px;font-weight:700;color:#fff;cursor:pointer}
.cap-btn:hover{filter:brightness(.96)}

/* ── 타임라인 띠 ─────────────────────────── */
.tl{position:relative;margin-top:12px;padding-bottom:4px}
.tlrow{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tlab{flex:0 0 62px;font-size:10.5px;color:var(--ink4);text-align:right}
.trk{position:relative;flex:1;height:16px;background:var(--surf2);border-radius:4px;overflow:hidden}
.trk.wave{height:26px}
.trk i{position:absolute;top:0;bottom:0;display:block}
/* 🚩 「화면 넘김」은 신호가 아니라 **리듬 바탕**입니다 — 주색이 파랑이 되면서
      진하면 바로 아래 「짚은 구간」의 소리(하늘색) 표시를 잡아먹습니다. 옅게 깝니다. */
.trk i.sl{background:var(--am);opacity:.28;border-right:1px solid var(--surf)}
.trk.wave i{width:2px;bottom:0;top:auto;background:var(--ink3);border-radius:1px}
.trk i.mk{width:4px;border-radius:2px;cursor:pointer;pointer-events:auto}
.trk i.mk.scr{background:#8B5CF6}
.trk i.mk.snd{background:#0EA5E9}
.trk i.mk.rq{background:var(--ng);width:5px}
.trk i.mk.rq.done{background:var(--ok)}
.trk i.mk:hover{outline:2px solid var(--ink);z-index:2}
.cur{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.play{position:absolute;top:0;bottom:4px;left:0;width:2px;background:var(--ink);
  pointer-events:none;margin-left:70px}

/* ── 기계가 짚은 구간 ────────────────────── */
details.qbox{background:var(--surf);border:1px solid var(--line);border-radius:8px;
  margin-bottom:16px}
details.qbox summary{list-style:none;cursor:pointer}
details.qbox summary::-webkit-details-marker{display:none}
details[open] .qh .ar{transform:rotate(90deg)}
.auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px;
  padding:0 14px 14px}
.ai{display:flex;align-items:baseline;gap:8px;text-align:left;background:var(--surf2);
  border:1px solid var(--line);border-left-width:3px;border-radius:6px;padding:8px 11px;
  cursor:pointer;font-size:12px}
.ai:hover{border-color:var(--am)}
.ai.scr{border-left-color:#8B5CF6}
.ai.snd{border-left-color:#0EA5E9}
.ai .t{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:0 0 auto}
.ai .k{font-weight:700;flex:0 0 auto}
.ai .w{color:var(--ink3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 캡처 · 수정 요청 ────────────────────── */
.shotbox{margin-bottom:8px}
.shotbox img{width:100%;border-radius:6px;border:1px solid var(--line);display:block}
img.cap{width:100%;max-width:420px;border-radius:6px;border:1px solid var(--line);
  margin:5px 0;display:block}
.jt{font-family:var(--mono);font-size:10.5px;background:var(--ink);color:#fff;border:none;
  border-radius:4px;padding:1px 6px;cursor:pointer}
.jt:hover{background:var(--am);color:#fff}
.tcnow{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink4)}


/* ── 재생바 ─────────────────────────────── */
.scrub{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:10px 0 2px;
  background:var(--line);border-radius:3px;cursor:pointer}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--am);border:2px solid var(--surf);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.scrub::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--am);
  border:2px solid var(--surf)}
.trk{cursor:pointer}

/* ── AI가 짚어둔 구간 ────────────────────── */
.ai{display:flex;align-items:stretch;gap:0;background:var(--surf2);border:1px solid var(--line);
  border-left-width:3px;border-radius:6px;overflow:hidden}
.ai.taken{opacity:.55}
.aigo{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;text-align:left;
  background:none;border:none;padding:8px 11px;cursor:pointer;font-size:12px}
.aigo:hover{background:var(--am-soft)}
.aiadd{flex:0 0 auto;border:none;border-left:1px solid var(--line);background:var(--surf);
  color:var(--am-ink);font-size:11.5px;font-weight:700;padding:0 11px;cursor:pointer}
.aiadd:hover{background:var(--am);color:#fff}
.aidone{flex:0 0 auto;display:flex;align-items:center;padding:0 11px;font-size:11px;
  color:var(--ok-ink);background:var(--ok-soft);font-weight:700}

/* ── 쓰는 자리 (한 행) ───────────────────── */
.wbox{display:grid;grid-template-columns:160px minmax(0,1fr) 118px;gap:12px;
  background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--ng);
  border-radius:8px;padding:12px 14px;margin-bottom:16px;align-items:start}
@media(max-width:900px){.wbox{grid-template-columns:minmax(0,1fr)}}
.wshot{position:relative;aspect-ratio:16/9;background:var(--surf2);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wshot img{width:100%;height:100%;object-fit:cover;display:block}
.wshot .ph{font-size:11px;color:var(--ink4);text-align:center;line-height:1.7}
.wshot .x{position:absolute;top:4px;right:5px;background:rgba(0,0,0,.55);color:#fff;
  width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;cursor:pointer}
.wtop{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:7px}
.tcin.now{font-weight:700}
.wmid textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:8px 10px;font-size:13px;min-height:62px;resize:vertical;line-height:1.55}
.wgo .go{width:100%;background:var(--am);color:#fff;border:none;border-radius:6px;
  padding:12px 8px;font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.4}
.wgo .cmsg{margin-top:6px}

/* ── 최종 수정 요청 ─────────────────────── */
.finbox{background:var(--surf);border:1px solid var(--line);border-radius:8px;padding:12px 14px 16px}
.finh{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:700;
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.finh b{font-family:var(--mono);color:var(--ng-ink)}
.finh .hint{margin-left:auto;font-size:11px;font-weight:400;color:var(--ink4)}

/* ══════════════════════════════════════════════════════════
   최종 수정 요청 — **한 줄 = 한 건** · 오른쪽은 PD 기입란
   🚩 두 칸을 나란히 둔 까닭: 「무엇을 고쳐 달라」와 「그래서 어떻게 하기로 했다」가
      같은 높이에서 짝지어야 목록만 훑고도 남은 일을 셀 수 있습니다.
   ══════════════════════════════════════════════════════════ */
.finbox ul.cl{margin-top:6px}
.finbox ul.cl>li{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;
  align-items:start;border-top:1px solid var(--line);border-left:3px solid transparent;
  padding:12px 0 12px 9px}
@media(max-width:900px){.finbox ul.cl>li{grid-template-columns:minmax(0,1fr)}}
.finbox ul.cl>li.hold{border-left-color:var(--jd);background:var(--jd-soft)}
.finbox ul.cl>li.ok{border-left-color:var(--ok);background:var(--ok-soft)}
/* 🚩 반영이 끝난 건은 흐리게 — 다 본 것이 눈을 붙들지 않게 합니다. */
.finbox ul.cl>li.ok .rqc{opacity:.62}
.rqc{min-width:0}
.rqc img.cap{max-width:340px}

.pd{background:var(--surf);border:1px solid var(--line);border-radius:7px;padding:9px 10px}
.pdh{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink4);
  margin-bottom:6px}
.pdb{display:flex;gap:5px}
.pdb button{flex:1;border:1px solid var(--line);background:var(--surf2);border-radius:5px;
  padding:6px 4px;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer;line-height:1.4}
.pdb button:hover{border-color:var(--ink3);color:var(--ink)}
.pdb .ph.on{background:var(--jd-soft);border-color:var(--jd);color:var(--jd-ink)}
.pdb .po.on{background:var(--ok);border-color:var(--ok);color:#fff}
.pd .anote{margin-top:7px}
.pd ul.re{margin:8px 0 0;padding-left:8px}
.pd ul.re li{padding:5px 0}
.pd .cf{margin-top:7px}
.pd .cf textarea{min-height:52px;font-size:12.5px}
.pd .rbtn{margin-top:5px}

/* ── 영상이 그 영상이 맞는지 ────────────────
   🚨 이름이 같아도 다른 파일일 수 있습니다 — 수정본을 덮어썼다면 타임코드가 통째로 어긋납니다. */
.vwarn{background:var(--ng-soft);border:1px solid var(--ng);border-radius:7px;
  padding:9px 12px;margin-bottom:10px;font-size:12.5px;line-height:1.6;color:var(--ng-ink)}
.vwarn[hidden]{display:none}
.pick.again{border:1px solid rgba(255,255,255,.35);background:transparent;color:#E8EDEA;
  font-weight:700;margin-right:7px}
/* 🚨 `.pick` 의 `display:inline-block` 이 브라우저 기본 `[hidden]{display:none}` 을 이깁니다 —
      이 한 줄이 없으면 지난 파일이 없는데도 「다시 열기」가 남아 있습니다. */
.pick.again[hidden]{display:none}
.pick.again:hover{background:rgba(255,255,255,.12)}
.dnote{color:#7E8A93;font-size:11.5px;margin-top:10px}
.dnote code{font-family:var(--mono);font-size:10.5px;background:#000;padding:1px 6px;
  border-radius:3px;color:#C9D1D6}