*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{background:#0e1117;color:#e2e8f0;font-family:system-ui,sans-serif;
     height:100%;display:flex;flex-direction:column;overflow:hidden}
#brandbar,#foot-mini{flex-shrink:0}
#intro{flex:1 1 auto;min-height:0;overflow-y:auto}
/* §13-1: 줄바꿈 대신 **넘침**으로 두어야 scrollWidth 로 잴 수 있다 —
   사다리가 넘침을 없애므로 실제로 잘리는 일은 없다(마지막 단계 = 드로어). */
#tb{display:flex;align-items:center;gap:8px;padding:8px 14px;flex-wrap:nowrap;
    background:#161b24;border-bottom:1px solid #2a3344;flex-shrink:0}
.btn{background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
     border-radius:6px;padding:5px 12px;cursor:pointer;font-size:13px}
.btn:hover{background:#2a3a50}
.btn:disabled{background:#161b24;color:#374151;border-color:#1e2530;
     cursor:not-allowed;opacity:.45;}
.btn:disabled:hover{background:#161b24;}
.btn.on{background:#1e3a5f;border-color:#3b82f6}
select{background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
       border-radius:6px;padding:5px 8px;font-size:13px}
#qry{background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
     border-radius:6px;padding:5px 10px;font-size:13px;width:150px}
#qry::placeholder{color:#546880}
#wrap{flex:1;overflow-y:auto;padding:10px}
#wrap::-webkit-scrollbar{width:6px}
#wrap::-webkit-scrollbar-thumb{background:#2a3344;border-radius:3px}
/* ① 전용 뷰: 그리드(좌) + 전체 목록 패널(우) 분할 */
#grid-scroll{display:contents}   /* 일반 뷰: 없는 셈 → #wrap 이 그리드를 스크롤 */
#wrap.heavy-split{display:flex;gap:10px;overflow:hidden;align-items:stretch}
/* 전용 뷰: grid-scroll 이 스크롤 컨테이너(고정높이). #grid 는 그 안에서 자연 높이(종횡비 보존) */
#wrap.heavy-split #grid-scroll{display:block;flex:1;min-width:0;overflow-y:auto;align-self:stretch}
#wrap.heavy-split #grid-scroll::-webkit-scrollbar{width:6px}
#wrap.heavy-split #grid-scroll::-webkit-scrollbar-thumb{background:#2a3344;border-radius:3px}
#heavy-list{width:340px;flex-shrink:0;overflow-y:auto;align-self:stretch;
  background:#12161d;border:1px solid #2a3344;border-radius:8px;padding:4px}
#heavy-list[hidden]{display:none}
#heavy-list::-webkit-scrollbar{width:6px}
#heavy-list::-webkit-scrollbar-thumb{background:#2a3344;border-radius:3px}
#hl-head{font-size:11px;color:#8fa0b8;padding:6px 8px 8px;border-bottom:1px solid #2a3344;position:sticky;top:0;background:#12161d}
.hl-item{padding:6px 8px;border-radius:6px;cursor:pointer;border-bottom:1px solid #1a2230}
.hl-item:hover{background:#1e2530}
.hl-item.cur{background:#1e3a5f}
.hl-name{font-size:12px;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-meta{font-size:11px;color:#8fa0b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.hl-meta .hl-fol{color:#93c5fd}
/* W-6 10항 ①②: 카드 미디어 영역은 **상태 무관 고정 종횡비**(--card-ar) —
   placeholder·poster·<video> 가 전부 같은 높이라 활성/해제가 레이아웃 높이를 바꾸지
   않는다. 높이가 흔들리면 브라우저 스크롤 앵커링이 위치를 보정해 휠이 되밀린다.
   비율은 필터 모드별로만 일정하게 바뀐다(세로형 = 세로 박스). */
#grid{display:grid;gap:8px;
      grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
      overflow-anchor:none;
      --card-ar:16/9}
#grid.ar-port{--card-ar:9/16}
.card{position:relative;background:#1e2530;border-radius:8px;
      overflow:hidden;cursor:default;border:2px solid transparent;
      transition:border-color .15s}
.card:hover{border-color:#3b82f6}
.card.waiting::after{content:'⏸ 대기 중';position:absolute;bottom:42px;left:6px;
  background:rgba(0,0,0,.72);color:#fff;
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:5}
/* W-6 1항: 영상 미부착 placeholder — 폴더를 열면 파일명만으로 이 상태의 카드를
   즉시 그리고, 뷰포트에 들어올 때 <video> 를 끼운다(어두운 박스 = 영상 자리).
   7항 ②: 정지 카드는 첫 프레임을 poster 로 깔아 "로딩 실패"처럼 보이지 않게 한다. */
/* 11항 ①: poster 박스는 항상 자리를 지키고, <video> 를 그 **위에 겹쳐** 놓는다.
   영상은 opacity:0 으로 시작 → 첫 프레임이 실제 표시된 순간에만 나타나므로
   부착~첫 프레임 사이의 검은 화면(약 0.2초)이 사라진다. 해제는 역순. */
.ph-box{position:relative;width:100%;aspect-ratio:var(--card-ar);display:block;
  background-color:#0f141c;background-size:contain;
  background-position:center;background-repeat:no-repeat}
/* W-6 12항 ②④: 헤비(전문 촬영 포맷) = 자동재생 제외 + 근거(Mbps) 표시.
   문구는 JS 가 data-heavy 에 넣는다(파일마다 비트레이트가 다르므로). */
.card.heavy-stop::after{content:'▶ ' attr(data-heavy);position:absolute;
  bottom:42px;left:6px;background:rgba(0,0,0,.72);color:#FAB82B;
  font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:5}
/* 지시 #112 ③: 문구를 JS 가 data-err 에 넣는다 — '미지원 코덱'과 '읽기 실패(재시도
   가능)'는 사용자가 할 일이 다르므로 한 문구로 뭉뚱그리지 않는다. */
.card.file-error::before{content:attr(data-err);position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.82);color:#ef4444;
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;
  pointer-events:none;z-index:5;white-space:nowrap}
/* 읽기 실패는 되살릴 수 있는 상태다 — 빨강(치명) 대신 주의색으로 구분한다 */
.card.file-error:not(.unsupported)::before{color:#FAB82B}
/* 지시 #116 ③: 디코드 밀기가 쌓인 파일 — 재인코딩 안내 1줄(문구는 JS 가 에디션에 맞춰
   data-decode 에 넣는다). 가운데는 오류 배지가 쓰는 자리라 **위쪽**에 얹고, 오류 카드에서는
   오류 쪽 문구를 우선한다(둘이 겹쳐 읽히지 않게). */
.card.decode-skip:not(.file-error)::before{content:attr(data-decode);position:absolute;
  top:6px;left:6px;right:6px;background:rgba(0,0,0,.82);color:#FAB82B;
  font-size:10px;font-weight:700;line-height:1.35;padding:4px 6px;border-radius:5px;
  pointer-events:none;z-index:5;white-space:normal;text-align:center}
/* 영상은 poster 박스를 정확히 덮는다 — 높이는 .ph-box 가 잡으므로(10항 ①) 영상이
   레이아웃에 관여하지 않는다. 내부 맞춤은 object-fit(contain — 세로 잘림 방지, 승인).
   .shown 이 붙기 전에는 투명이라 그 아래 poster 가 보인다(11항 ①). */
.card video.main-vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;cursor:default;
  opacity:0;transition:opacity .12s linear}
.card video.main-vid.shown{opacity:1}
/* 오류 카드는 첫 프레임 표시와 무관하게 흐리게 (기존 동작 유지) */
.card.file-error video.main-vid,
.card.file-error video.main-vid.shown{opacity:.15}
.ci{padding:6px 8px;background:#161b24;cursor:default}
.cn{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cbd5e1}
.cm{font-size:11px;color:#546880;margin-top:2px;display:flex;justify-content:space-between;gap:6px}
.ds-time{white-space:nowrap;flex-shrink:0}
/* 우측 하단: 해상도 · 비트레이트 · 용량 — 좁은 카드에서는 말줄임(넓은 전용 카드는 전부 표시) */
.ds-size{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:right}

/* ── 재생바 ── */
.pbar-wrap{position:absolute;bottom:0;left:0;right:0;height:36px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;padding-bottom:6px;cursor:default}
.card:hover .pbar-wrap{opacity:1}
.pbar-bg{flex:1;height:10px;background:rgba(255,255,255,.3);border-radius:5px;
  margin:0 8px;position:relative;cursor:pointer;transition:height .15s}
.pbar-bg:hover{height:12px}
.pbar-fill{height:100%;background:#f00;border-radius:5px;pointer-events:none}
.pbar-time{font-size:11px;color:#fff;white-space:nowrap;margin-right:6px;min-width:70px;text-align:right}
/* ── 썸네일 미리보기 ── */
.thumb-preview{position:absolute;bottom:36px;background:#000;border:2px solid #fff;
  border-radius:4px;overflow:hidden;pointer-events:none;z-index:50;
  display:none;flex-direction:column;align-items:center}
.thumb-preview video{display:block}
.thumb-time{font-size:11px;color:#fff;text-align:center;padding:2px 0;background:#000;width:100%}
/* 13항 ⑥: 새 창 상세 아이콘 — 카드 우상단. 헤비 파일은 같은 파일을 두 창이 동시에
   디코딩해 메모리가 폭주하므로 비활성(disabled). VOL 버튼은 그 왼쪽으로 밀린다. */
/* 개정 4차 9②: 카드 모서리별 아이콘 컨테이너 — 흐름 배치로 겹침 방지, 없으면 자리 미차지.
   좌상단(.card-badges) = 상태 배지(신규·초고화질), 우상단(.card-actions) = 액션(VOL·새창·구간). */
.card-badges{position:absolute;top:6px;left:6px;z-index:7;display:flex;gap:4px;
      flex-wrap:wrap;max-width:calc(100% - 12px);pointer-events:none}
.card-badges:empty{display:none}
.card-badges > *{pointer-events:auto}
.card-actions{position:absolute;top:6px;right:6px;z-index:6;display:flex;
      flex-direction:column;gap:4px;align-items:flex-end}
.card-actions:empty{display:none}
.bnew{background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;
      width:26px;height:24px;padding:0;border-radius:4px;cursor:pointer;border:none;
      opacity:0;line-height:1;transition:opacity .15s}
.card:hover .bnew{opacity:1}
.bnew:hover:enabled{background:rgba(30,90,180,.85)}
.bnew:disabled{color:#546880;cursor:not-allowed}
/* 지시 #112 ②: 오류 카드의 [다시 시도] — 되살릴 길이 화면에 있어야 하므로
   다른 카드 버튼과 달리 **호버 없이 항상 보인다**(자동 제외 해제도 이 버튼이 한다). */
.err-retry{background:rgba(0,0,0,.78);color:#FAB82B;border:1px solid #FAB82B;
      width:26px;height:24px;padding:0;border-radius:4px;cursor:pointer;
      line-height:1;display:flex;align-items:center;justify-content:center}
.err-retry:hover{background:rgba(250,184,43,.22)}
.bvol{background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:700;
      padding:3px 7px;border-radius:4px;cursor:pointer;border:none;opacity:0;
      transition:opacity .15s;line-height:1.4;white-space:nowrap}
.card:hover .bvol{opacity:1}
.bvol.on{background:rgba(30,90,180,.85);opacity:1}
.btim{background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:700;
      padding:3px 7px;border-radius:4px;cursor:pointer;border:none;opacity:0;
      transition:opacity .15s;white-space:nowrap;max-width:140px;overflow:hidden;
      text-overflow:ellipsis}
.card:hover .btim{opacity:1}
.btim.on{background:rgba(234,88,12,.85)}
.heavy-badge{background:rgba(234,88,12,.9);color:#fff;font-size:11px;font-weight:700;
      padding:1px 6px;border-radius:4px;pointer-events:none;white-space:nowrap}
.ds-time.custom{color:rgba(234,88,12,1);font-weight:bold}
/* ── 상세 화면 (그리드 대체) ── */
#detail{display:none;position:fixed;inset:0;background:#0b0f16;z-index:999;
        flex-direction:column}
#detail.show{display:flex}
/* 상세 오버레이가 뜨면 뒤에 남은 본문(브랜드바+#app 82vh+푸터)이 뷰포트를 넘겨 창 스크롤바가
   유지된다(오버레이가 가려도 스크롤은 남음 = 사용자가 원인 못 보는 두 번째 스크롤바). 오버레이가
   열린 동안 루트 스크롤을 잠근다. (지원 브라우저 = 크롬/엣지라 :has 사용 가능) */
html:has(#detail.show){overflow:hidden}
#dtools{display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:nowrap;
        background:#161b24;border-bottom:1px solid #2a3344;flex-shrink:0;flex-wrap:wrap}
#dtools .btn{background:#1e2530;color:#cbd5e1;border:1px solid #2a3344;border-radius:6px;
        padding:6px 12px;font-size:12px;cursor:pointer}
#dtools .btn:hover{background:#262f3d}
#dtools .btn.on{background:#3b82f6;color:#fff;border-color:#3b82f6}
#dtools .btn:disabled{background:#161b24;color:#546880;border-color:#1e2530;
        cursor:default;opacity:.6}
#dtools .btn:disabled:hover{background:#161b24}
.card.excluded .cn{text-decoration:line-through;color:#ef4444;opacity:.8;}
.card.excluded::after{content:'';position:absolute;inset:0;background:rgba(220,38,38,.18);
  border:2px solid rgba(220,38,38,.6);border-radius:inherit;pointer-events:none;z-index:2;}
#dtools label{font-size:12px;color:#8fa0b8;display:flex;align-items:center;gap:4px}
#dtools input[type=text]{width:54px;background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
        border-radius:4px;padding:3px 5px;font-size:12px;text-align:center}
#dbody{flex:1;min-height:0;display:flex;overflow:hidden}
#dp{flex:1;min-width:0;background:#000;display:flex;flex-direction:column;position:relative}
#dv{width:100%;flex:1;min-height:0;object-fit:contain;background:#000}
/* 지시 #116 ③: 상세의 디코드 안내 — 영상 위에 겹치는 오버레이가 아니라 **아래 띠**다
   (브라우저 기본 재생바를 가리지 않는다). flex 항목이라 영상이 그만큼 줄어든다. */
#d_decode_note{flex-shrink:0;margin:6px 12px 8px;padding:6px 10px;border-radius:6px;
  background:rgba(250,184,43,.12);color:#FAB82B;border:1px solid rgba(250,184,43,.45);
  font-size:12px;font-weight:700;line-height:1.4;text-align:center}
#d_decode_note[hidden]{display:none}
/* 개정 4차 9①: 영상 위쪽 배치 — 위/좌우 여백으로 창 테두리와 떨어뜨려 리사이즈 커서 겹침 해소 */
#dmarkbar{position:relative;height:14px;background:#1a1a1a;flex-shrink:0;cursor:pointer;margin:8px 12px 4px}
#dmark-fill{position:absolute;top:0;left:0;height:100%;background:rgba(59,130,246,.35);pointer-events:none}
#dmark-start{position:absolute;top:0;height:100%;width:8px;margin-left:-4px;background:#22c55e;
  cursor:ew-resize;z-index:2}
#dmark-end{position:absolute;top:0;height:100%;width:8px;margin-left:-4px;background:#f97316;
  cursor:ew-resize;z-index:2}
#dmark-start:hover,#dmark-end:hover{filter:brightness(1.3)}
#ds{width:380px;min-width:320px;display:flex;flex-direction:column;gap:8px;
    background:#1e2530;border-left:1px solid #2a3344;padding:14px;overflow-y:auto;
    transition:width .15s,min-width .15s,padding .15s,opacity .15s}
#dbody.theater #ds{width:0;min-width:0;padding:0;opacity:0;overflow:hidden;border-left:none}

/* W-6 9항 ③: 전문 촬영 포맷 상세 재생 가드 — #dp 위 오버레이 */
#heavy-guard{position:absolute;inset:0;z-index:10;display:flex;
  align-items:center;justify-content:center;background:rgba(11,15,22,.94);padding:24px}
#heavy-guard[hidden]{display:none}
.hg-card{max-width:460px;text-align:center;border:1px solid #2a3344;border-radius:12px;
  background:#121722;padding:26px 28px}
.hg-card h3{font-size:16px;color:#e2e8f0;margin-bottom:10px}
.hg-card p{font-size:13.5px;color:#8fa0b8;line-height:1.75;margin-bottom:20px}
.hg-card .hg-warn{font-size:12.5px;color:#f5c877;margin-top:-10px;margin-bottom:18px}
.hg-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hg-card .hg-cta{display:inline-block;background:#FAB82B;color:#3A2606;text-decoration:none;
  font-weight:700;font-size:13px;border-radius:7px;padding:10px 18px}
.hg-card .hg-cta:hover{background:#e9a821}
.hg-card .hg-alt{background:transparent;color:#cbd5e1;border:1px solid #2a3344;
  border-radius:7px;padding:10px 18px;font-size:13px;cursor:pointer}
.hg-card .hg-alt:hover{background:#1e2530;border-color:#3a4658}
#dtitle{font-size:14px;font-weight:700;word-break:break-all;color:#e2e8f0}
#dmeta{font-size:12px;color:#8fa0b8;line-height:1.4}
/* 다음 영상 목록 */
#dprev-label{font-size:12px;font-weight:700;color:#8fa0b8}
#dprev-box{margin-bottom:4px}
#dcur-label{font-size:12px;font-weight:700;color:#3b82f6;margin-top:6px;
  padding-top:10px;border-top:1px solid #2a3344}
#dnext-label{font-size:12px;font-weight:700;color:#8fa0b8;margin-top:6px;
  padding-top:10px;border-top:1px solid #2a3344}
#dnext-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex:1;min-height:0}
.dnext-item{display:flex;gap:8px;cursor:pointer;padding:4px;border-radius:6px;
  transition:background .15s}
.dnext-item:hover{background:#262f3d}
.dnext-item.active{background:#2563eb33;border:1px solid #3b82f6}
.dnext-item.current{cursor:default}
.dnext-item.current:hover{background:#2563eb33}
.dnext-thumb{width:96px;height:54px;flex-shrink:0;background:#000;border-radius:4px;
  overflow:hidden;position:relative}
.dnext-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.dnext-thumb.thumb-unsupported::after{content:'⚠';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  color:#f59e0b;font-size:18px;pointer-events:none}
.dnext-thumb.thumb-unsupported video{opacity:.1}
.dnext-now{position:absolute;bottom:3px;left:3px;background:#3b82f6;color:#fff;
  font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;pointer-events:none}
.dnext-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
.dnext-name{font-size:12px;color:#e2e8f0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dnext-meta{font-size:11px;color:#8fa0b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* P-UI-4 · P-UI-5 §6: 상태바 — 좌측 경로 / 우측 개수. 상세(#dsb)도 같은 규칙. */
#sb,#dsb{display:flex;align-items:center;gap:12px;
    padding:5px 14px;font-size:11px;color:#546880;background:#161b24;
    border-top:1px solid #2a3344;flex-shrink:0}
/* ★경로는 뒷부분(파일이 있는 폴더)이 남아야 쓸모 있다 → 박스를 rtl 로 두어 생략(…)이
   **앞쪽**에 붙게 한다. 문자열 자체의 방향은 unicode-bidi:plaintext 로 지켜 한글·슬래시
   순서가 뒤집히지 않는다. 전체 경로는 title(툴팁)에 그대로 남긴다. */
#sb-path,#dpath{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;direction:rtl;unicode-bidi:plaintext;text-align:left}
#sb-right{display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
#cnt{font-size:11px;color:#8fa0b8;white-space:nowrap}
#sb-fol{color:#546880}
#dprog{white-space:nowrap;flex-shrink:0;color:#8fa0b8}


/* ===== 반s 온라인 플레이어 추가 스타일 (W-2) ===== */
#brandbar{display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:nowrap;
  background:#0b0f16;border-bottom:1px solid #2a3344}
#brandbar .wordmark{font-size:16px;font-weight:700;color:#e2e8f0;letter-spacing:.02em}
#brandbar .wordmark em{font-style:normal;color:#FAB82B}
#brandbar .wordmark small{font-size:12px;font-weight:500;color:#8fa0b8;margin-left:4px}
#brandbar .spacer{flex:1}
.brand-btn{background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;border-radius:6px;
  padding:6px 12px;cursor:pointer;font-size:13px}
.brand-btn:hover{background:#2a3a50}
/* W-10 ③: 잠긴 [HTML로 저장](온라인 무료판) — 보이되 프로 전용임을 뮤티드로 알린다 */
.brand-btn.locked{color:#7d8ba0;border-style:dashed}
.brand-btn.locked:hover{background:#232c39}
/* W-10 개정 2차: 주입 모드 헤더 폴더명 + "폴더 변경은 앱에서" 안내 */
#brandbar .inj-folder{font-size:12px;color:#8fa0b8;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;max-width:60%;margin-left:4px}
/* W-10 개정 4차 5: 폴더 재동기화 요약 배너 + 신규 파일 배지 */
.resync-note{padding:7px 14px;background:#15304a;color:#cfe3ff;font-size:12.5px;
        border-bottom:1px solid #23405c;cursor:pointer}
.resync-note[hidden]{display:none}
/* 개정 4차 9②: 좌상단 상태 배지 그룹(.card-badges)의 흐름 항목 — 절대 위치 제거 */
.new-badge{background:#2563eb;color:#fff;font-size:11px;font-weight:700;
        padding:1px 6px;border-radius:4px;pointer-events:none;white-space:nowrap}
#brandbar .brand-link{color:#8fa0b8;font-size:12px;text-decoration:none}
#brandbar .brand-link:hover{color:#FAB82B}

/* 13항 ⑤: 팝업 차단 안내 토스트 (상단 고정, 닫기 가능) */
#popup-hint{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:12px;max-width:560px;width:calc(100% - 32px);
  padding:10px 14px;border-radius:8px;background:#1e1a12;border:1px solid #5a4620;
  color:#f5c877;font-size:12.5px;line-height:1.5;box-shadow:0 6px 24px rgba(0,0,0,.5)}
#popup-hint[hidden]{display:none}
#popup-hint-text{flex:1;min-width:0}
#popup-hint-close{background:transparent;border:none;color:#8a7a4a;cursor:pointer;
  font-size:13px;padding:2px 4px;line-height:1;flex-shrink:0}
#popup-hint-close:hover{color:#f5c877}

/* 인트로(폴더 선택) 화면 */
#intro{max-width:640px;margin:0 auto;padding:64px 24px;text-align:center}
#intro h1{font-size:24px;color:#e2e8f0;margin-bottom:12px}
#intro .lead{font-size:15px;color:#8fa0b8;line-height:1.7;margin-bottom:28px}
#intro .pick{background:#FAB82B;color:#3A2606;border:none;border-radius:8px;
  padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer}
#intro .pick:hover{background:#e9a821}
/* 최근 폴더 다시 열기 — 보조 버튼(핸들이 저장돼 있을 때만 표시) */
#intro .pick.recent{background:transparent;color:#cbd5e1;border:1px solid #2a3344;
  font-size:14px;padding:11px 20px;margin-left:10px}
#intro .pick.recent:hover{background:#1e2530;border-color:#3a4658}
#intro .opts{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin:20px 0 8px;font-size:13px;color:#cbd5e1}
#intro .opts label{display:flex;align-items:center;gap:6px}
#intro select{background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
  border-radius:6px;padding:5px 8px;font-size:13px}
#intro .perf-note{font-size:12.5px;color:#8fa0b8;margin-top:18px}
/* 12항 ①: 선행 인덱싱 진행 바 */
#index-prog{max-width:420px;margin:18px auto 0}
#index-prog[hidden]{display:none}
#index-prog .ip-track{height:6px;border-radius:3px;background:#1e2530;overflow:hidden}
#index-bar{height:100%;width:0;background:#FAB82B;transition:width .15s linear}
#index-text{display:block;margin-top:8px;font-size:12.5px;color:#8fa0b8}
/* 인덱싱 중 비활성 컨트롤 — 조기 클릭이 미판정 상태를 저장하지 않도록 */
#tb button:disabled,#tb select:disabled,#tb input:disabled{opacity:.4;cursor:not-allowed}
#intro-status{font-size:13px;color:#93c5fd;min-height:20px;margin-top:14px}
#intro .privacy{font-size:12px;color:#546880;margin-top:24px;line-height:1.6}
#intro-support{display:none;max-width:520px;margin:24px auto 0;padding:14px 18px;
  background:#1e1a12;border:1px solid #5a4620;border-radius:8px;
  color:#f5c877;font-size:13px;line-height:1.6;text-align:left}

/* 갤러리 앱 영역 — 페이지 스크롤 허용(하단 광고/콘텐츠 노출) */
/* 11-5: 예전엔 #app 이 82vh 고정이라 **페이지 스크롤 + 그리드 스크롤**이 겹쳤다(이중 스크롤).
   이제 body 가 뷰포트를 세로로 채우고 #app 이 남은 높이를 전부 가져간다 —
   스크롤은 그리드(#wrap) 하나뿐이고, 큰 푸터가 사라진 만큼 감상 영역이 넓어진다. */
#app{display:none;flex-direction:column;flex:1 1 auto;min-height:0}
/* 개정 4차 8: 주입(B) 모드는 하단 링크·광고가 없으므로 그리드가 화면을 꽉 채운다.
   body 를 세로 flex 로 두고 #app 을 flex:1 로 늘려(고정 82vh 해제) 하단 빈 띠를 없앤다.
   #brandbar 는 위 flex 항목, #intro/#detail 은 B 모드에서 각각 숨김/고정이라 영향 없음. */
body.injected{display:flex;flex-direction:column;min-height:100vh}
body.injected #app{height:auto;flex:1;min-height:0}

/* W-6 6항: 스캔 직후 규모 안내 배너 (닫기 가능) */
#scale-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 10px 8px;padding:8px 12px;border-radius:8px;
  background:#161d2a;border:1px solid #2a3344;font-size:12.5px;color:#cbd5e1}
#scale-banner[hidden]{display:none}
#sb-scale{font-weight:700;color:#e2e8f0}
#sb-auto{color:#8fa0b8}
#sb-auto[hidden]{display:none}
#sb-heavy{color:#FAB82B}
#sb-heavy[hidden]{display:none}
#sb-pro{margin-left:auto;color:#FAB82B;text-decoration:none;font-size:12px}
#sb-pro:hover{text-decoration:underline}
#sb-close{background:transparent;border:none;color:#546880;cursor:pointer;
  font-size:13px;padding:2px 4px;line-height:1}
#sb-close:hover{color:#cbd5e1}

/* ── W-6 13항 ①②: 초고화질 격리 ────────────────────────────────────
   메인 그리드에는 헤비가 한 장도 없고, 대신 이 전용 카드 1장만 들어간다.
   대표 이미지 = 폴더 내 첫 헤비 영상의 1프레임(JS 가 배경으로 깔아 준다).
   .card 가 아니므로 그리드의 재생·관찰(IO) 로직은 이 카드를 건드리지 않는다. */
.iso-card{position:relative;background:#1e2530;border-radius:8px;overflow:hidden;
  cursor:pointer;border:2px solid #FAB82B;transition:background .15s}
.iso-card:hover{background:#252d3b}
.iso-thumb{position:relative;width:100%;aspect-ratio:var(--card-ar);
  background-color:#0f141c;background-size:contain;background-position:center;
  background-repeat:no-repeat}
.iso-thumb::after{content:'▶';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);color:#FAB82B;font-size:26px;
  text-shadow:0 2px 10px rgba(0,0,0,.85);pointer-events:none}
.iso-info{padding:8px 10px;background:#161b24}
.iso-title{font-size:13px;font-weight:700;color:#FAB82B}
.iso-sub{font-size:11px;color:#8fa0b8;margin-top:3px}

/* 전용 뷰 상단 안내 — 감상용 갤러리와 편집 소재의 경계를 여기서 분명히 한다 */
#heavy-notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 10px 8px;padding:8px 12px;border-radius:8px;
  background:#1e1a12;border:1px solid #5a4620;font-size:12.5px;color:#f5c877}
#heavy-notice[hidden]{display:none}
#hn-text{flex:1;min-width:220px;line-height:1.6}
#hn-convert{color:#FAB82B;font-size:12px;font-weight:700;text-decoration:none}
#hn-convert:hover{text-decoration:underline}
/* ② 전용 뷰 페이지 컨트롤 */
#hn-pager{display:inline-flex;align-items:center;gap:8px}
#hn-pager[hidden]{display:none}
#hn-pager .btn{padding:3px 10px;font-size:13px;line-height:1}
#hn-pageinfo{font-size:12px;color:#f5c877;min-width:38px;text-align:center;font-weight:700}

/* 상세 화면 우측 목록 하단 광고(300×250) 자리 */
#ad-right{margin-top:12px;flex-shrink:0}

/* 하단 푸터 — 하우스 광고 · 광고 자리 · 자체 콘텐츠 링크 · 프라이버시 */
#foot{border-top:1px solid #2a3344;background:#0b0f16;padding:24px 16px 32px}
#foot .foot-inner{max-width:1080px;margin:0 auto}
.house-card{border:1px solid #2a3344;border-left:3px solid #FAB82B;border-radius:10px;
  background:#121722;padding:18px 20px;max-width:560px}
.house-card h3{font-size:15px;color:#e2e8f0;margin-bottom:6px}
.house-card p{font-size:13px;color:#8fa0b8;line-height:1.6;margin-bottom:12px}
.house-card a.cta{display:inline-block;background:#FAB82B;color:#3A2606;
  text-decoration:none;font-weight:700;font-size:13px;border-radius:7px;padding:9px 18px}
.house-card a.cta:hover{background:#e9a821}
.ad-slot{margin:18px auto 0;display:flex;align-items:center;justify-content:center;
  background:#12161d;border:1px dashed #2a3344;color:#3a4658;font-size:12px;border-radius:6px}
/* display:flex 가 hidden 속성(UA display:none)을 덮어써 승인 전에도 빈 박스가 보였다 —
   ADS_ENABLED=false 면 JS 가 DOM 에서 제거하지만, hidden 경로도 확실히 숨긴다(§W-5) */
.ad-slot[hidden]{display:none}
/* 개정 4차 8: 개발용 광고 자리 미리보기(?adpreview=1) — 실제 광고 없이 점선 자리표시자만 */
.ad-slot.ad-preview{border:2px dashed #3a4658;color:#546880}
.ad-728{max-width:728px;height:90px}
.ad-300{width:300px;height:250px}
.foot-links{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.foot-links a{color:#93c5fd;text-decoration:none}
.foot-links a:hover{color:#FAB82B}
.foot-privacy{margin-top:14px;font-size:12px;color:#546880;line-height:1.6}

/* ══════════════════════════════════════════════════════════════════════════
   M-1~M-3 온라인 플레이어 모바일 최적화 (ADR-37)
   원칙(M-5): **단일 코드베이스** — 미디어쿼리 + JS 조건부 렌더. 769px 이상은
   위쪽 규칙만 적용되므로 PC 동작은 그대로다(회귀 금지).
   ══════════════════════════════════════════════════════════════════════════ */

/* 토스트 — 모바일에 없는 hover 툴팁의 대체물(공간 점유 0). PC 에서도 쓸 수 있다. */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  max-width:min(92vw,520px);z-index:1200;background:rgba(17,22,30,.97);
  color:#e2e8f0;border:1px solid #2a3344;border-radius:10px;
  padding:11px 15px;font-size:13px;line-height:1.6;
  box-shadow:0 8px 28px rgba(0,0,0,.55);pointer-events:none;
  opacity:0;transition:opacity .18s}
#toast[hidden]{display:none}
#toast.show{opacity:1}

/* ⓘ 안내 버튼 — 긴 인라인 설명문을 대체. 모바일에서만 보인다. */
.tip-i{display:none;background:#1e2530;color:#8fa0b8;border:1px solid #2a3344;
  border-radius:50%;width:26px;height:26px;min-width:26px;font-size:13px;
  line-height:1;cursor:pointer;flex-shrink:0}
.tip-i:hover{color:#e2e8f0}

/* 더보기 드로어(하단 시트) — 모바일에서 툴바의 비필수 컨트롤을 담는다.
   PC 에서는 [더보기] 버튼과 함께 통째로 숨는다. */
#btn-more,#btn-more-d{display:none}
body.fit-drawer #btn-more,body.fit-drawer #btn-more-d{display:inline-block}
#mdrawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1100}
#mdrawer-scrim[hidden]{display:none}
/* ★§15-5: 예전에는 드로어 **전체**가 스크롤되고 제목줄만 sticky 였다 —
   그래서 스크롤한 내용이 제목줄 밑으로 비쳐 겹쳐 보였다.
   이제 드로어는 세로 flex 컨테이너로 두고 **본문만** 스크롤한다
   (제목줄은 스크롤 영역 밖 = 겹칠 수가 없다). */
#mdrawer{position:fixed;left:0;right:0;bottom:0;z-index:1101;
  background:#161b24;border-top:1px solid #2a3344;
  border-radius:14px 14px 0 0;max-height:76vh;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 -10px 30px rgba(0,0,0,.5)}
#mdrawer[hidden]{display:none}
#mdrawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #2a3344;font-size:14px;
  font-weight:700;color:#e2e8f0;flex-shrink:0;
  position:relative;z-index:2;background:#161b24}   /* 불투명 + 위층 */
#mdrawer-close{background:none;border:none;color:#8fa0b8;font-size:18px;
  cursor:pointer;padding:4px 8px;min-width:44px;min-height:44px}
/* 드로어 안에서는 컨트롤을 한 줄에 하나씩 — 터치로 고르기 쉽게 */
#mdrawer-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 26px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#mdrawer-body .btn,#mdrawer-body select,#mdrawer-body label{width:100%}
#mdrawer-body .btn{min-height:44px;font-size:14px;text-align:left;padding:10px 14px}
#mdrawer-body select{min-height:44px;background:#1e2530;color:#e2e8f0;
  border:1px solid #2a3344;border-radius:6px;padding:8px 10px;font-size:14px}
#mdrawer-body label{font-size:13px;color:#8fa0b8;display:flex;align-items:center;gap:8px}

/* M-3: 상세 재생목록 접기/펼치기 버튼 (모바일 전용) */
#ds-toggle{display:none;width:100%;min-height:44px;background:#1e2530;
  color:#cbd5e1;border:1px solid #2a3344;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer}

@media (max-width:768px){
  /* ── M-2 레이아웃: 영상 영역 최대 확보 ── */
  /* 1열 풀폭 고정. JS(applyGridColumns)도 같은 값을 쓰지만, 렌더 타이밍과 무관하게
     보장되도록 CSS 에서도 !important 로 못 박는다(슬라이더 값이 남아 있어도 1열). */
  #grid{grid-template-columns:1fr !important;gap:10px;padding:0 2px}
  #wrap{padding:8px 6px}
  /* 전용 뷰 분할 목록 = 숨김(M-2 명시). 카드 크기 슬라이더(#sz)는 P-UI-5 에서
     ▦ 표시 그룹 → 드로어로 내려가므로 여기서 숨기지 않는다(드로어에서 조작 가능). */
  #wrap.heavy-split{display:block;overflow-y:auto}
  #wrap.heavy-split #grid-scroll{overflow:visible;height:auto}
  #heavy-list{display:none !important}

  /* 툴바 슬림화 — 터치 44px 유지, 여백만 축소 */
  #tb{gap:6px;padding:6px 8px}
  #tb .btn{min-height:44px;padding:8px 12px;font-size:13px}
  #tb input[type=text]{min-height:44px}
  #qry{flex:1;min-width:0;min-height:40px}
  #intro{padding:24px 16px}
  .intro-card{padding:22px 16px 18px}
  /* M-2: 새 창으로 열기 = 모바일 필수 아님 + 팝업 동작 부적합 → 행 자체를 숨긴다.
     ★.intro-card .opt-row(0,2,0)를 이기려면 #상위 #id 로 특이도를 맞춰야 한다(실패기록 §6). */
  #intro #opt-appwin{display:none}
  .tip-i{display:inline-flex;align-items:center;justify-content:center}
  /* 인라인 안내문은 접고 ⓘ 토스트로 대체(공간 점유 0) */
  #hn-text,#sb-auto,#sb-heavy,#sb-pro,#hn-convert{display:none !important}
  #heavy-notice{gap:8px;padding:6px 8px;margin:0 6px 6px}
  #scale-banner{gap:8px}
  .perf-note,#intro .privacy{font-size:11px;line-height:1.5}

  /* 브랜드바도 좁게 — 링크는 숨기고 버튼만 */
  #brandbar{gap:6px;padding:6px 8px}
  #brandbar .brand-link{display:none}
  #brandbar .brand-btn{min-height:40px}

  /* ── M-3 상세 화면: ① 영상 → ② 컨트롤 → ③ 재생목록 ──
     DOM 순서는 JS(applyMobileLayout)가 #dtools 를 #dbody 안 #dp 뒤로 **이동**시켜
     맞춘다(복제 금지 — 같은 노드라 상태·핸들러가 그대로 따라온다). */
  #dbody{flex-direction:column}
  /* 영상 영역이 남은 높이를 흡수한다 — 컨트롤·목록이 자리를 잡은 뒤 나머지는 전부 영상.
     세로 영상에서 특히 이득이 크고, 가로 영상은 검은 여백으로 letterbox 된다
     (예전엔 아래쪽에 아무것도 없는 빈 공간이 남았다). */
  #dp{flex:1 1 auto;width:100%;min-height:0}
  #dv{width:100%;flex:1 1 auto;min-height:0;max-height:none}
  #dmarkbar{margin:6px 8px 4px}
  /* §17-2: 툴바가 다시 **상단**이다 — 경계선도 아래쪽으로 되돌린다 */
  #dtools{gap:5px;padding:6px 8px;border-bottom:1px solid #2a3344;border-top:none}
  #dtools .btn{min-height:44px;padding:8px 11px;font-size:13px}
  #dtools input[type=text]{min-height:44px;width:58px}
  /* P-UI-5 §3.2: 랜덤·이전/다음은 좁은 폭에서도 툴바에 남는다(한 손 조작).
     일회성은 ⏱ 구간 팝오버 안으로 들어갔고, #bt(목록 접기)는 #dbrand 로 옮겨졌다. */

  /* 재생목록 = 하단 시트. 접힘(기본)이면 토글 버튼만 보이고, 펼치면 수평 스크롤 썸네일. */
  #ds{width:auto;min-width:0;border-left:none;border-top:1px solid #2a3344;
      padding:8px;gap:6px;overflow:visible;flex:0 0 auto}
  #ds-toggle{display:block}
  #ds.collapsed > *:not(#ds-toggle){display:none !important}
  /* 펼친 상태 = 하단 시트: 목록을 **수평 스크롤 썸네일**로(세로 공간 절약).
     항목은 세로 적층(썸네일 위 / 파일명 아래)으로 바꿔야 좁은 폭에서 이름이 읽힌다.
     ★§19-3: 가로 배치 본문은 body.is-mobile 블록(파일 끝)으로 옮겼다 — 여기 미디어
       질의(≤768)와 JS 의 isMobile()(coarse ≤896 포함)이 어긋나면 목록만 세로로 남는다.
       여기에는 두 곳에서 갈리지 않는 스크롤바 치장만 남긴다. */
  #ds:not(.collapsed) #dnext-list::-webkit-scrollbar{height:6px}
  #ds:not(.collapsed) #dnext-list::-webkit-scrollbar-thumb{background:#2a3344;border-radius:3px}
  /* 시트가 화면을 다 먹지 않게 상한 — 영상이 우선이다 */
  #ds:not(.collapsed){max-height:44vh;overflow-y:auto}
  #ad-right{display:none}
  /* 영화관 모드가 남아 있어도 목록 폭 트랜지션이 어긋나지 않게 */
  /* ★§14-4 원인: 기본 규칙 `#dbody.theater #ds{…overflow:hidden}` 이 (2,1,0) 이라
     모바일의 `#ds:not(.collapsed){overflow-y:auto}` (1,1,0) 를 이겨, ▥ 가 눌린 채로
     시트를 열면 **터치 스크롤이 잠겼다**(실측: overflow-y 가 auto → hidden 으로 뒤집힘).
     ▥ 는 모바일에서 DOM 미생성이고 진입 시 theater 도 강제 해제하지만, 저장된 상태나
     PC→모바일 전환 잔재까지 막으려면 여기서도 풀어 둔다(이중 방어). */
  #dbody.theater #ds{width:auto;padding:8px;opacity:1;overflow-y:auto}

  /* 푸터·하우스 광고는 세로로 */
  #foot{padding:18px 12px 24px}
  .house-card{max-width:none}
  .foot-links{gap:12px;font-size:12px}

  /* ── 11-5: 축약 푸터(모바일) ── */
  /* 최대 2줄까지 자연 줄바꿈 — 1줄로 우겨넣어 글자를 못 읽게 만들지 않는다.
     겉보기 높이는 낮게 두되 링크의 **터치 판정은 44px**(패딩 + 음수 마진). */
  #foot-mini{gap:0 10px;padding:4px 10px;font-size:11px}
  /* 실측: 375px 에서 3줄이 됐다 — 가운뎃점 구분자를 접고(간격으로 대체) 고지 문구가
     제 안에서 또 줄바꿈하지 않게 막으면 **정확히 2줄**에 들어간다. */
  #foot-mini .fm-dot{display:none}
  #foot-mini .fm-note{white-space:nowrap}
  #foot-mini .fm-copy{display:none}       /* 2줄 안에 들어가도록 저작권 표기는 접는다 */
  /* 겉보기 줄 높이는 낮게, **터치 판정은 44px**(패딩 + 음수 마진) */
  #foot-mini a{display:inline-block;padding:14px 6px;margin:-14px 0}
}


/* ══════════════════════════════════════════════════════════════════════
   P-UI-1~5: 브랜드바 · 툴바 개편 (설계문서_플레이어_툴바개편)
   브레이크포인트 4단 — wide(1024+) / mid(768~1023) / narrow(767↓) / xs(560↓).
   narrow 판정은 JS 의 isMobile() 과 **한 곳**에서 나온다(body.is-mobile) —
   CSS 폭 조건과 JS 가 따로 판단하면 '드로어에 있는데 툴바에도 보이는' 어긋남이 난다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 라벨 축약 (§3.3 + §13-1) ──
   ★단계 판정은 **고정 px 이 아니라 실측**이다(JS `_fitToolbars` 가 넘칠 때만 한 칸 접는다).
     body.fit-short = 짧은 라벨 / body.fit-icon = 아이콘만. 모바일은 두 클래스가 함께 붙는다. */
.lb-s{display:none}
body.fit-short .btn:has(.lb-s) .lb{display:none}
body.fit-short .lb-s{display:inline}
body.fit-short .gtrig .lb{display:none}         /* 그룹 트리거부터 아이콘만 */

/* ── 브랜드바 ── */
#brandbar .wordmark{text-decoration:none}
a.wordmark:hover small{color:#FAB82B}
#brandbar .btn{font-size:13px}
.btn.fold.on{background:#1e3a5f;border-color:#3b82f6}   /* 접힘 = 색으로만 표시(§3.3) */
#brandslot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#pinslot,#pinslot-d{display:flex;align-items:center;gap:6px}
#pinslot:empty,#pinslot-d:empty{display:none}
.searchwrap{display:flex;align-items:center;gap:6px}
.searchwrap #qtoggle{display:none}              /* 🔍 아이콘은 xs 에서만 */

/* ── 툴바 공통 ── */
#tb{position:relative}
#tbwrap,#dtwrap{overflow:visible;transition:max-height .2s ease,opacity .2s ease}
#tbwrap.folded,#dtwrap.folded{max-height:0;opacity:0;overflow:hidden;pointer-events:none}
/* ★11-2: hover '엿보기'는 폐기했다(반스 실기기 판정 — 커서가 오갈 때마다 툴바가 들락거려
   조작을 방해). 접기/해제는 `☰` 클릭과 ESC 뿐이며, 모바일에서는 ⋯ 가 브랜드바로 올라온다. */
.tsep{border-left:1px solid #2a3344;height:18px;flex-shrink:0}
.grow{flex:1;min-width:0}
.seg{display:flex;gap:0}
.seg .btn{border-radius:0;margin-left:-1px}
.seg .btn:first-child{border-radius:6px 0 0 6px;margin-left:0}
.seg .btn:last-child{border-radius:0 6px 6px 0}
.seg .btn.on{position:relative;z-index:1}

/* ── 그룹 팝오버 (⏱ 구간 / ▦ 표시) ── */
.gbody{display:none;position:absolute;top:calc(100% + 6px);left:10px;z-index:60;
  background:#161b24;border:1px solid #2a3344;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);padding:10px;gap:8px;
  min-width:240px;flex-wrap:wrap;align-items:center}
.gbody.open{display:flex}
.gbody .gf{display:flex;align-items:center;gap:6px;font-size:12px;color:#8fa0b8}
.gbody input[type=text]{width:64px;background:#1e2530;color:#e2e8f0;
  border:1px solid #2a3344;border-radius:4px;padding:4px 6px;font-size:12px;text-align:center}
.gbody input[type=range]{width:110px;accent-color:#3b82f6;vertical-align:middle}
.gtrig{white-space:nowrap}
.gtrig.on{background:#1e3a5f;border-color:#3b82f6}

/* 지시 #129 ①(D1): 상세 구간 팝오버가 **폐기**됐다 — 진행바를 덮지 않게 영상 칸을 밀던
   `--rangepop-h`(지시 #108 ④)와 재생 목록 위로 뻗지 않게 폭을 재던 `--rangepop-max`
   (지시 #126 ⑷)도 함께 사라졌다. 중앙 모달은 화면 정중앙에 고정이라 **잴 것이 없다** —
   측정이 없으면 리사이즈 랙(249)도 없다. 관련 CSS 변수·클래스(.range-open)를 남기지 않는다. */

/* 드로어로 내려간 그룹 — 팝오버 껍데기를 벗고 세로 목록이 된다 */
.gbody.in-drawer{display:flex;position:static;flex-direction:column;align-items:stretch;
  box-shadow:none;border:none;background:transparent;padding:0;min-width:0;gap:10px}
.gbody.in-drawer .gf{justify-content:space-between;min-height:44px;font-size:13px}
.gbody.in-drawer input[type=text]{min-height:38px;width:84px}
.gbody.in-drawer input[type=range]{width:60%}

/* ── 드로어 섹션 슬롯 (§5.1 — id 로 한 번만 생성) ── */
.dsec{font-size:12px;color:#8fa0b8;font-weight:700;padding:2px 2px 0}
.dslot{display:flex;flex-direction:column;gap:10px}
/* 갤러리/상세가 드로어를 공유한다 — 지금 화면의 섹션만 보여 준다 */
#mdrawer[data-scope="gallery"] [data-scope="detail"],
#mdrawer[data-scope="detail"] [data-scope="gallery"]{display:none}

/* ── 상세 화면 브랜드 행 (§2.2) ── */
#dbrand{display:flex;align-items:center;gap:10px;padding:8px 14px;
  background:#0b0f16;border-bottom:1px solid #2a3344;flex-shrink:0}
#dbrand .wordmark{font-size:15px;font-weight:700;color:#e2e8f0}
#dbrand .wordmark em{font-style:normal;color:#FAB82B}
#dbrand .wordmark small{font-size:11px;font-weight:500;color:#8fa0b8;margin-left:4px}
#dbrand .spacer{flex:1}
#dtools{position:relative}

/* ── P-UI-3: 인트로 시작 카드 ── */
#intro{max-width:none;padding:48px 16px}
.intro-card{max-width:520px;margin:0 auto;background:#161b24;border:1px solid #2a3344;
  border-radius:14px;padding:28px 26px 24px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.intro-card h1{font-size:22px;margin-bottom:10px}
.intro-card .lead{margin-bottom:22px}
.intro-card .pick{display:block;width:100%;min-height:52px;margin:0 0 10px;
  font-size:16px;padding:14px 20px}
.intro-card .pick.recent{margin-left:0;min-height:48px;font-size:14px}
.intro-card .opts{display:flex;flex-direction:column;gap:0;margin:18px 0 4px;
  border-top:1px solid #2a3344}
.intro-card .opt-row{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:44px;padding:6px 2px;border-bottom:1px solid #232c39;
  font-size:14px;color:#cbd5e1;text-align:left;cursor:pointer}
.intro-card .opt-row:last-child{border-bottom:none}
.intro-card .opt-row input[type=checkbox]{width:20px;height:20px;accent-color:#FAB82B;flex-shrink:0}
.intro-card .perf-note{margin-top:16px;font-size:12px;line-height:1.6;color:#546880}
.intro-card #intro-support{margin:0 0 16px;text-align:left}
.intro-card #index-prog{max-width:none}

/* ── P-UI-2: 푸터 가운데 정렬 ── */
#foot .foot-inner{text-align:center}
#foot .house-card{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.house-card .house-soon{color:#f5c877;font-size:12.5px;margin-bottom:12px}
#foot .foot-links{justify-content:center}
#foot .foot-privacy{text-align:center}

/* ── mid (768~1023px): 그룹 트리거 아이콘만(위 라벨 규칙) + 여백 축소 ── */
@media (min-width:769px) and (max-width:1023px){
  #tb{gap:6px;padding:8px 10px}
  #brandbar{gap:8px;padding:8px 12px}
  #qry{width:120px}
}

/* ── xs (560px 이하): 브랜드바 버튼은 드로어로(JS), 검색은 아이콘, 워드마크 축약 ── */
/* §7 미결정 1 실측 결과: 375px 에서 `전체|가로형|세로형 + 미지원 + 제외 + ⋯` 가
   407px 를 먹어 ⋯ 가 다음 줄로 떨어졌다(문서가 예고한 지점). 문서가 정한 대비책대로
   [제외]를 아이콘(⊘)만으로 줄이고, 여기에 더해 ⋯ 도 아이콘만 남기고 가운데 여백
   스페이서(.grow)를 접어 한 줄에 들어가게 한다. */
body.fit-icon #bex .lb,body.fit-icon #bex .lb-s{display:none}   /* §12: 아이콘만 남는다 */
body.fit-icon #tb .grow,body.fit-icon #dtools .grow{display:none}
body.fit-icon #btn-more .lb,body.fit-icon #btn-more-d .lb{display:none}
/* 상세 툴바도 375px 한 줄에 넣는다 — 목록 복귀·이전·다음은 아이콘만으로 충분하다
   (§2.2 상세 화면 그림도 `← ⏮ ⏭` 형태). 라벨은 툴팁·넓은 폭에서 그대로 나온다. */
body.fit-icon #dtools #d_back .lb,
body.fit-icon #dtools #d_prev .lb,
body.fit-icon #dtools #d_next .lb{display:none}
body.fit-icon #tb{gap:5px;padding:6px 6px}
body.fit-icon #dtools{gap:5px;padding:6px 6px}
@media (max-width:560px){
  #brandbar .wordmark small,#dbrand .wordmark small{display:none}
  #brandbar #qwrap #qtoggle{display:inline-block}
  /* 접힌 검색: 아이콘만 두고 입력칸은 펼칠 때만 */
  #brandbar #qwrap:not(.open) #qry{display:none}
  #brandbar #qwrap.open{flex:1}
  #brandbar #qwrap.open #qry{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   §11 개정 1차 (2026-07-31 실기기 피드백)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 11-1: 인트로 카드 풀폭 버튼 2개의 좌우 기준 통일 ──
   ★원인은 옛 규칙 `#intro .pick.recent{margin-left:10px}`(특이도 1,2,0)가 카드용
     클래스 규칙(0,3,0)을 이겨 [최근 폴더]만 10px 오른쪽으로 밀린 것이었다(중심차 실측 10px).
     여기서 그 여백을 없애 두 버튼의 좌우 기준을 같게 만든다(실패기록 §6 특이도 함정). */
#intro .pick.recent{margin-left:0}
.intro-card .pick,.intro-card .pick.recent{padding-left:20px;padding-right:20px}

/* ── 11-3: 브랜드바 3버튼 두 줄 방지 (실측: 라벨 전체 표시에 약 840px 필요) ──
   840px 아래에서 두 줄이 되므로 그 전에 축약 → 더 좁으면 아이콘만. 560px 이하에서는
   드로어로 내려가고(§3.1), 드로어 안에서는 아래 규칙이 전체 라벨을 되살린다. */
body.fit-short #brandslot .lb{display:none}
body.fit-short #brandslot .lb-s{display:inline}
body.fit-icon #brandslot .lb-s{display:none}    /* 아이콘만 — 설명은 title 툴팁으로 */
body.fit-icon #brandslot .brand-btn{padding:6px 10px}
/* 드로어 안은 폭이 넉넉하다 — 축약을 풀고 전체 라벨을 보여 준다 */
#mdrawer-body .lb{display:inline}
#mdrawer-body .lb-s{display:none}
/* ── 11-4: 광폭(기본 1600px 이상) 구간·표시 인라인 노출 ──
   팝오버 껍데기를 벗고 툴바에 그대로 편다. 노드는 같은 것이 옮겨 다니므로(§5)
   인라인에서 바꾼 값이 축소 후 팝오버·드로어에 그대로 남는다. */
.inline-slot{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.inline-slot:empty{display:none}
.gbody.inline{display:flex;position:static;box-shadow:none;border:none;
  background:transparent;padding:0;min-width:0;gap:8px;flex-wrap:nowrap}
.gbody.inline .gf{white-space:nowrap}

/* ── 11-5: 축약 푸터 (상태바 아래 상시 고정) ── */
#foot-mini{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:4px 10px;padding:7px 12px;background:#0b0f16;border-top:1px solid #2a3344;
  font-size:12px;color:#546880;line-height:1.5}
#foot-mini a{color:#93c5fd;text-decoration:none}
#foot-mini a:hover{color:#FAB82B;text-decoration:underline}
#foot-mini .fm-dot{color:#2a3344}
#foot-mini .fm-soon{color:#8a7a4a;margin-left:3px}
#foot-mini .fm-copy{color:#3a4658;margin-left:4px}


/* ══════════════════════════════════════════════════════════════════════
   §12 아이콘 체계 · §11-6 로고
   ══════════════════════════════════════════════════════════════════════ */

/* 아이콘 — 색은 currentColor 상속(활성 .on·비활성 disabled·hover 색을 자동으로 따라간다) */
.ic{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle;
    stroke:currentColor;fill:none;pointer-events:none}
.ic-caret{width:13px;height:13px;opacity:.75}
/* 아이콘과 글자를 같은 줄 가운데에 맞춘다(버튼마다 vertical-align 을 손보지 않아도 되게) */
.btn,.brand-btn,#intro .pick,#foot-mini a{display:inline-flex;align-items:center;
    justify-content:center;gap:6px}
#tb .btn,#dtools .btn{line-height:1}
/* 아이콘만 있는 버튼은 정사각에 가깝게 — 좌우 여백이 글자 버튼과 같으면 헐렁해 보인다 */
.seg .btn,#btn-fold,#btn-fold-d,#bt,#qtoggle,#btn-more,#btn-more-d,
#d_back,#d_prev,#d_next,#d_loop,#d_shuffle,#btn-newwin,#btn-repick,
#popup-hint-close,#mdrawer-close,#sb-close,#hn-prev,#hn-next{padding-left:9px;padding-right:9px}
.tip-i{display:none;align-items:center;justify-content:center}
.tip-i .ic{width:15px;height:15px}

/* 정렬 셀렉트 — 아이콘을 앞에 세운다(셀렉트 자체에는 아이콘을 넣을 수 없다) */
.sort-wrap{display:inline-flex;align-items:center;gap:5px;color:#8fa0b8}

/* 인트로 버튼은 글자가 커서 아이콘도 한 치수 크게 */
#intro .pick .ic{width:19px;height:19px}

/* 카드 배지(소리·구간·새 창) — 이모지 대신 아이콘 */
.bvol,.btim,.bnew{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.bvol .ic,.btim .ic,.bnew .ic{width:15px;height:15px}
.bnew{width:auto;min-width:26px}

/* 드로어 안에서는 아이콘이 왼쪽, 글자가 그다음(터치 목록 형태) */
#mdrawer-body .btn{justify-content:flex-start}

/* §11-6: 워드마크 = 로고 이미지(data URI 인라인 — file:// 인 B·C 모드에서도 뜬다) */
#brandbar .wordmark,#dbrand .wordmark{display:inline-flex;align-items:center;gap:7px}
.wm-logo{height:18px;width:auto;display:block}
#dbrand .wm-logo{height:16px}
#dcur-label{display:flex;align-items:center;gap:5px}
#dcur-label .ic{width:14px;height:14px}

/* ★§13-1 전제: 툴바 자식이 **줄어들지 않아야** 넘침이 실제로 측정된다.
   flex 는 기본값(flex-shrink:1)으로 항목을 찌그러뜨려 폭을 맞추기 때문에,
   그대로 두면 버튼이 눌려 붙기만 하고 scrollWidth 는 clientWidth 를 넘지 않는다
   (사다리가 영영 발화하지 않는다 — 실측으로 잡은 함정).
   늘어나는 여백(.grow·.spacer)만 줄어들 수 있게 남긴다. */
#tb > *,#dtools > *,#brandbar > *,#dbrand > *{flex-shrink:0}
#tb .grow,#dtools .grow,#brandbar .spacer,#dbrand .spacer{flex-shrink:1;min-width:0}
#brandbar #qwrap{flex-shrink:1;min-width:0}


/* ══════════════════════════════════════════════════════════════════════
   §14 개정 3차 — 드로어(설정 더보기) 정렬 통일
   ══════════════════════════════════════════════════════════════════════ */

/* 14-1: 한 행 = **왼쪽 라벨 + 오른쪽 컨트롤**(인트로 카드 P-UI-3 과 같은 문법).
   예전에는 `justify-content:space-between` 이 아이콘·글자·입력칸을 3등분해
   "시작" 글자가 행 가운데에 떠 보였다. */
.gbody.in-drawer .gf{justify-content:flex-start;gap:8px;min-height:44px;
  font-size:14px;color:#cbd5e1;padding:0 2px}
.gbody.in-drawer .gf > input,
.gbody.in-drawer .gf > select{margin-left:auto}
.gbody.in-drawer .gf input[type=text]{width:96px;text-align:center}
.gbody.in-drawer .gf input[type=range]{width:55%;margin-left:auto}
.gbody.in-drawer .gf input[type=checkbox]{width:20px;height:20px;accent-color:#FAB82B}
.gbody.in-drawer .ic{width:16px;height:16px;opacity:.8}

/* 소제목 아래 한 묶음(카드)으로 — 시작·종료·적용·해제가 한 덩어리로 읽힌다 */
#mdrawer-body .dslot{background:#12161d;border:1px solid #232c39;border-radius:10px;
  padding:8px 12px 12px;gap:6px}
#mdrawer-body .dsec{padding:6px 2px 0}
/* 행 사이 옅은 구분선 — 카드 안에서 행 경계를 알아보게 */
.gbody.in-drawer .gf + .gf{border-top:1px solid #1c2431}
.gbody.in-drawer .btn{margin-top:6px}


/* ══════════════════════════════════════════════════════════════════════
   §15 개정 4차 — 모바일 드로어 마감
   ══════════════════════════════════════════════════════════════════════ */

/* 15-2: 묶음 박스를 드로어 배경(#161b24)보다 **한 단계 밝게** + 테두리 대비.
   새 색을 만들지 않고 기존 카드 톤(#1e2530 / #2a3344)을 그대로 쓴다. */
#mdrawer-body .dslot{background:#1e2530;border:1px solid #3a4658;border-radius:10px;
  padding:10px 12px 12px;gap:8px}

/* 15-3: 섹션 제목 = [아이콘][글자]. 항목 레벨 아이콘은 마크업에서 걷어냈다. */
#mdrawer-body .dsec{display:flex;align-items:center;gap:7px;
  padding:8px 2px 0;color:#cbd5e1;font-size:12.5px}
.ic-sec{width:15px;height:15px;opacity:.85}

/* 15-4: 시작·종료를 한 행에 — 좁은 폭에서도 각 44px 터치를 지킨다 */
.gbody.in-drawer{flex-flow:row wrap;align-items:stretch}
.gbody.in-drawer > *{flex:0 0 100%}
/* ★#mdrawer-body label{width:100%}(1,1,0)이 클래스 규칙(0,3,0)을 이겨 두 칸이
   한 줄에 못 앉았다 — id 를 앞에 붙여 특이도를 맞춘다(실패기록 §6 의 그 함정). */
/* ★basis 는 **컨테이너 gap 의 절반**을 빼야 한 줄에 앉는다 —
   gap:10px 인데 `50% - 4px` 로 잡았더니 2px 넘쳐 줄바꿈됐다(실측).
   gap 값이 바뀌어도 따라가도록 var 로 묶어 둔다. */
#mdrawer-body .gbody.in-drawer{--dgap:10px}
#mdrawer-body .gbody.in-drawer .gf-time{
  flex:1 1 calc(50% - var(--dgap) / 2 - 1px);width:auto;
  justify-content:space-between;gap:6px;padding:0 4px}
.gbody.in-drawer .gf-time + .gf-time{border-top:none}
.gbody.in-drawer .gf-time input[type=text]{width:72px;margin-left:0}


/* ══════════════════════════════════════════════════════════════════════
   §16·§17 — 모바일 UX · 상세 재설계
   ══════════════════════════════════════════════════════════════════════ */

/* 16-1: 배경(#161b24) < 박스(#1e2530) < 버튼 — 3단 명도로 버튼이 박스에 묻히지 않게.
   새 색을 만들지 않고 기존 톤(#2a3a50 hover 계열)에서 한 단계만 올린다. */
#mdrawer-body .dslot .btn{background:#2a3444;border-color:#4a5a72}
#mdrawer-body .dslot .btn:hover{background:#33405a}
#mdrawer-body .dslot .btn.on{background:#1e3a5f;border-color:#3b82f6}
#mdrawer-body .dslot input[type=text]{background:#12161d;border-color:#3a4658}

/* 16-2: 빈 입력 안내 — 죽은 버튼(비활성) 대신 이유를 말한다 */
.apply-hint{flex:0 0 100%;font-size:12.5px;color:#f5c877;padding:2px 2px 0}
.apply-hint[hidden]{display:none}

/* ★지시 #136 ③ⓑ: [공통 구간 일괄 적용]의 **대상 수·잠금 이유**를 누르기 전에 보이는 줄.
   16-2 의 안내(3초 뒤 사라짐)와 달리 **상시**다 — "몇 장에 닿는지"는 사라지면 안 된다. */
.apply-scope{flex:0 0 100%;font-size:12px;color:#8fa0b8;padding:2px 2px 0}
.apply-scope.warn{color:#f5c877}
.apply-scope:empty{display:none}
/* 인라인(넓은 툴바)에서는 한 줄 안에 들어가는 짧은 꼴 — 사다리를 흔들지 않는다 */
.gbody.inline .apply-scope{flex:0 1 auto;white-space:nowrap;padding:0}
#g_apply:disabled{opacity:.5;cursor:not-allowed}

/* 17-1: 구간 원탭 캡처 버튼(모바일 상세 브랜드바) */
#dbrand .btn.cap{background:#1e2530;border-color:#3a4658}
#dbrand .btn.cap.on{background:#1e3a5f;border-color:#3b82f6;color:#fff}
/* 마크바는 모바일에서 표시 전용 — 손가락으로 잡을 수 없는 핸들에 커서를 주지 않는다 */
body.is-mobile #dmark-start,body.is-mobile #dmark-end{cursor:default;pointer-events:none}
body.is-mobile #dmarkbar{cursor:default}

/* 17-3: 상세 접기 = 툴바 + 하단 [재생목록] 바까지 숨겨 영상 풀화면 */
#detail.dfold #ds-toggle{display:none}
body.is-mobile #detail.dfold #ds{display:none}
/* 캡처 버튼도 사다리(§13-1)의 축약 단계에 포함 — 좁아지면 아이콘만 남는다 */
body.fit-icon #dbrand .btn.cap .lb{display:none}


/* ══════════════════════════════════════════════════════════════════════
   §18 개정 6차 — 모바일 마감 2차
   ══════════════════════════════════════════════════════════════════════ */

/* 18-2: 캡처 버튼은 우측 끝(로고에서 분리) — 마크업에서 spacer 뒤로 옮겼다 */
#dbrand .btn.cap{margin-left:0}
#dbrand .btn.cap + .btn.cap{margin-left:-2px}

/* 18-3: 상태바 총 용량 */
#sb-size{color:#8fa0b8}

/* 18-4: 기본 2행 — 시작·종료 한 행, 적용·해제 2열 */
#mdrawer-body .gbody.in-drawer #g_apply,
#mdrawer-body .gbody.in-drawer #g_clear{flex:1 1 calc(50% - var(--dgap) / 2 - 1px)}
/* 실측으로 한 행에 들어가면 1행 압축(§13-1 원칙) — 터치 44px 는 그대로 */
#mdrawer-body .gbody.in-drawer.one-row{flex-wrap:nowrap}
#mdrawer-body .gbody.in-drawer.one-row > *,
#mdrawer-body .gbody.in-drawer.one-row #g_apply,
#mdrawer-body .gbody.in-drawer.one-row #g_clear{flex:0 0 auto}
#mdrawer-body .gbody.in-drawer.one-row .gf-time{flex:0 1 auto;width:auto}
#mdrawer-body .gbody.in-drawer.one-row .gf-time input[type=text]{width:64px}
/* ★또 `#mdrawer-body .btn{width:100%}`(1,1,0) 이다 — 1행 모드에서 폭을 풀지 않으면
   [적용]이 혼자 100% 를 먹어 늘 넘친다(압축이 영영 안 켜졌다). 세 번째 같은 함정. */
#mdrawer-body .gbody.in-drawer.one-row .btn{min-height:44px;width:auto}
/* ★§20-1 로 삭제: 1행 압축이 라벨까지 감췄다 — 드로어는 세로 나열이라 축약할 이유가
   없는데, 이 규칙(1,4,0)이 `#mdrawer-body .lb`(1,1,0)를 이겨 [구간 적용]이 ✓ 만
   남았다(가로 회전 신고의 실제 원인). 1행 여부는 **전체 라벨 상태로** 다시 잰다. */


/* ══════════════════════════════════════════════════════════════════════
   §19 개정 7차 — 모바일 단순화 마감
   ══════════════════════════════════════════════════════════════════════ */

/* 19-1: [반복 ON] 은 구간 설정 박스(슬롯) 안쪽 하단에 산다 — 구간을 반복하는
   기능이라 의미가 맞고, 박스 밖으로 나가지 않아야 소속이 읽힌다. */
#mdrawer-body #slot-g-range > #g_loop{margin-top:0}

/* 19-3: 재생목록 단일 가로 스크롤.
   이전/재생 중/다음으로 나눠 두면 같은 목록을 세 번 훑어야 했고 세로도 세 겹으로 먹었다.
   구분은 자리(레이블)가 아니라 **현재 항목의 테두리·체크**가 맡는다. */
body.is-mobile #dprev-label,
body.is-mobile #dprev-box,
body.is-mobile #dcur-label,
body.is-mobile #dnext-label{display:none}
body.is-mobile #ds:not(.collapsed) #dnext-list{
    display:flex;flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;
    max-height:none;padding-bottom:4px;flex:0 0 auto;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
body.is-mobile #ds:not(.collapsed) .dnext-item{flex:0 0 auto;width:150px;
    flex-direction:column;gap:4px;scroll-snap-align:center}
body.is-mobile #ds:not(.collapsed) .dnext-thumb{width:150px;height:84px}
body.is-mobile #ds:not(.collapsed) .dnext-info{width:100%}
/* 현재 재생 항목 — 테두리(레이아웃을 밀지 않게 box-shadow)와 체크 배지 */
.dnext-item.current{background:#2563eb33}
.dnext-item.current .dnext-thumb{box-shadow:0 0 0 2px #3b82f6}
.dnext-cur{display:none}
.dnext-item.current .dnext-cur{display:flex;align-items:center;justify-content:center;
    position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;
    background:#3b82f6;color:#fff;pointer-events:none}
.dnext-item.current .dnext-cur .ic{width:13px;height:13px}


/* 20-1: 드로어 안 버튼은 **라벨 축약 대상이 아니다**.
   툴바 사다리(fit-short·fit-icon)도, 구간 1행 압축도 여기까지 오면 안 된다 —
   드로어는 한 줄에 하나씩 세로로 나열되므로 글자를 줄여 얻을 것이 없고,
   아이콘만 남으면 무엇을 누르는지 알 수 없다. id 두 개분 특이도로 못 박는다. */
#mdrawer-body .btn .lb{display:inline}
#mdrawer-body .btn .lb-s{display:none}

/* ── 지시 #43: 가상 카드(다중 구간 = 카드 1장 = 구간 1개) ─────────────────────
   같은 원본에서 나온 카드끼리 **테두리**로 묶여 보이게 한다 — 카드가 늘어난 이유가
   한눈에 읽혀야 "왜 같은 영상이 여러 개지?"가 생기지 않는다(목업 준수). */
.v-badge{background:rgba(37,99,235,.9);color:#fff;font-size:11px;font-weight:700;
        padding:1px 6px;border-radius:4px;pointer-events:none;white-space:nowrap}
.card.vcard{outline:2px solid rgba(37,99,235,.55);outline-offset:-2px}
.card.vcard:hover{outline-color:rgba(37,99,235,.95)}
/* 상세 재생 목록의 가상 항목 — 원본 아래로 들여쓴다(세트 관계를 먼저 보여 준다) */
.dnext-name.dnext-virtual{padding-left:10px;border-left:2px solid rgba(37,99,235,.6)}

/* ── 지시 #48: 상세의 '이 영상의 구간 목록' ────────────────────────────────
   그리드와 **같은 기록**을 보는 창이다(형제 가상 카드). 지금 재생 중인 구간을 강조해
   "어느 구간을 보고 있는지"가 목록에서 바로 읽히게 한다. */
/* 지시 #108 ③: 이동(구간 클릭)과 삭제가 **비슷한 클릭**에 섞였다(실기기 244·257) —
   두 버튼 사이에 구분선과 여백을 넣어 히트 영역을 눈으로도 손으로도 갈라 놓는다
   (삭제는 JS 에서 한 번 더 확인을 받는다). */
.cliplist{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%}
.clipitem{display:inline-flex;align-items:stretch;gap:0;border:1px solid rgba(148,163,184,.45);
        border-radius:6px;padding:0;font-size:11px;white-space:nowrap;overflow:hidden}
.clipitem.current{border-color:rgba(234,88,12,.95);background:rgba(234,88,12,.16)}
.clipgo{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:4px 8px}
.clipgo:hover{background:rgba(148,163,184,.16)}
.clipitem.current .clipgo{font-weight:700}
.clipdel{background:none;border:0;border-left:1px solid rgba(148,163,184,.45);
        color:#8fa0b8;font:inherit;cursor:pointer;padding:4px 8px}
.clipdel:hover{color:#ff5c5c;background:rgba(255,92,92,.14)}
.clipnote{font-size:11px;color:#8fa0b8}


/* ══ 지시 #129(D1~D5·D7·D8·D16) — 상세 구간 설정 중앙 모달 ═══════════════════
   그리드 `#timepicker` 와 같은 문법: 정중앙 고정 · 어두운 배경 · 위치 추적 없음.
   ★색은 마커와 짝을 맞춘다(시작=초록 #4ade80 / 종료=주황 #f97316) — D16 의 "지금 어느
     색 마커가 움직이는가"를 색 하나로 잇는다(목업 v7 문법). */
#rmodal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998}
#rmodal-scrim[hidden]{display:none}
#rmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;
  background:#161b24;border:1px solid #2a3344;border-radius:10px;padding:18px 22px;
  color:#e2e8f0;min-width:340px;max-width:520px;width:calc(100vw - 24px);
  max-height:92vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.6)}
#rmodal[hidden]{display:none}
#rmodal h3{font-size:14px;font-weight:700;margin:0 0 2px}
#rm_file{color:#8fa0b8;font-size:12px;margin-bottom:8px;word-break:break-all}
#rm_pause{background:rgba(200,138,61,.12);border:1px solid #c88a3d;color:#e0b070;
  border-radius:6px;padding:4px 10px;font-size:12px;margin-bottom:10px}
#rm_guide{font-size:11px;color:#546880;margin-bottom:6px}
#rm_bar{height:8px;background:rgba(255,255,255,.2);border-radius:4px;position:relative;cursor:pointer}
#rm_fill{position:absolute;top:0;height:100%;background:rgba(59,130,246,.5);
  border-radius:4px;pointer-events:none}
.rm-h{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;
  transform:translateX(-50%);cursor:grab;touch-action:none;border:2px solid rgba(0,0,0,.4)}
.rm-h.s{background:#4ade80} .rm-h.e{background:#f97316}
.rm-h.actm.s{box-shadow:0 0 0 4px rgba(74,222,128,.3)}
.rm-h.actm.e{box-shadow:0 0 0 4px rgba(249,115,22,.3)}
#rm_cap{display:flex;justify-content:space-between;font-size:11px;color:#546880;margin-top:6px}
#rm_pv{color:#2563eb}
.rm-row2{display:flex;gap:12px;margin:12px 0 4px}
/* D16: 시작/종료 입력칸 = 마커 색 선택 박스(활성 박스 강조 + "선택됨" 표찰) */
#rmodal .fbox{flex:1;min-width:0;border:2px solid #2a3344;border-radius:8px;padding:8px 10px;
  cursor:pointer;background:#1e2530;transition:box-shadow .15s,border-color .15s}
#rmodal .fbox .fttl{font-size:12px;color:#8fa0b8;display:flex;align-items:center;gap:6px}
#rmodal .fbox .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
#rmodal .fbox.fs .dot{background:#4ade80} #rmodal .fbox.fe .dot{background:#f97316}
#rmodal .fbox.fs.act{border-color:#4ade80;background:rgba(74,222,128,.08);box-shadow:0 0 0 1px #4ade80}
#rmodal .fbox.fe.act{border-color:#f97316;background:rgba(249,115,22,.08);box-shadow:0 0 0 1px #f97316}
#rmodal .fbox .selb{display:none;font-size:10.5px;margin-left:auto;border-radius:4px;
  padding:0 6px;flex-shrink:0}
#rmodal .fbox.fs .selb{color:#4ade80;border:1px solid #4ade80}
#rmodal .fbox.fe .selb{color:#f97316;border:1px solid #f97316}
#rmodal .fbox.act .selb{display:inline-block}
#rmodal .fbox input[type=text]{width:100%;background:#0d1017;color:#e2e8f0;border-radius:4px;
  padding:5px 6px;font-size:13px;margin-top:6px;border:1px solid #2a3344;font-family:inherit;
  box-sizing:border-box}
#rmodal .fbox.fs.act input[type=text]{border-color:#4ade80}
#rmodal .fbox.fe.act input[type=text]{border-color:#f97316}
.rm-capbtn{margin-top:5px;width:100%;font-size:12px;padding:4px 6px;justify-content:center}
/* 이름표는 줄바꿈하지 않는다 — 표찰에 밀려 글자가 세로로 쪼개지던 자리(1280 실측) */
#rmodal .fbox .fttl{flex-wrap:wrap}
#rmodal .fbox .ftx{white-space:nowrap}
/* 안내 두 줄(무엇을 했는가 · 무엇이 적용 중인가)은 **각자 한 줄** — 팝오버에서는 flex 였다 */
#rmodal .apply-hint{display:block;flex:none;margin-top:6px;padding:0}
#rmodal .apply-hint[hidden]{display:none}
/* D4: 빨간 안내 — 이 줄이 보이는 동안 [구간 추가]·[적용]은 잠긴다 */
#rm_err{color:#ff6b64;font-size:12px;margin-top:6px}
#rm_err[hidden]{display:none}
.rm-cliphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px solid #2a3344;padding-top:12px;margin-top:12px}
.rm-cliphead > span:first-child{font-size:12px;color:#8fa0b8;flex:1;min-width:120px}
#rmodal #d_cliplist{margin-top:8px;max-height:190px;overflow:auto}
.rm-foot{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.rm-sp{flex:1}
#rmodal .btn[disabled],#tmodal .btn[disabled]{opacity:.4;cursor:not-allowed}
.rm-primary{background:#2563eb;border-color:#2563eb;color:#fff}
.rm-primary:hover{background:#1d4ed8}
.rm-danger{color:#f97316}
.rm-hint{font-size:11.5px;color:#546880;margin-top:10px;line-height:1.5}

/* ══ 지시 #133 ①②(D17·D18) — 프레임 칩 · 프레임 미세 조정 창 ═══════════════
   ★칩은 **시간 표기 옆**에만 산다(초 표기를 바꾸지 않는다는 D18 규칙의 시각적 표현).
   ★키프레임 경계는 ◆ **보라** 칩 — 일반 프레임 칩(파랑)과 색으로 갈린다. */
.fchip{display:inline-block;font-size:10.5px;font-weight:700;line-height:16px;
  padding:0 6px;border-radius:8px;flex-shrink:0;
  color:#93c5fd;border:1px solid #3b82f6;background:rgba(59,130,246,.12)}
.fchip[hidden]{display:none}
.fchip.kf{color:#c4b5fd;border-color:#8b5cf6;background:rgba(139,92,246,.16)}
/* [🎞 프레임 미세] — [지금 시점] 아래 같은 폭으로 선다 */
.rm-finebtn{margin-top:4px}

#rmfine-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999}
#rmfine-scrim[hidden]{display:none}
#rmfine{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;
  background:#161b24;border:1px solid #3b82f6;border-radius:10px;padding:18px 22px;
  color:#e2e8f0;min-width:340px;max-width:520px;width:calc(100vw - 24px);
  max-height:92vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.7)}
#rmfine[hidden]{display:none}
#rmfine h3{font-size:14px;font-weight:700;margin:0 0 10px}
.rmf-val{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.rmf-sec{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.rmf-note{font-size:11px;color:#546880}
.rmf-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:#8fa0b8;margin-bottom:10px}
.rmf-fps.warn,.rmf-kf.warn{color:#e0b070}
.rmf-spans{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rmf-spans > span{font-size:12px;color:#8fa0b8;margin-right:2px}
.rmf-spans .btn{font-size:12px;padding:3px 8px}
/* 전후 span 초 눈금 — 지금 자리(파랑)·경계(회색)·키프레임(보라) */
#rmf_bar{position:relative;height:26px;background:#0d1017;border:1px solid #2a3344;
  border-radius:6px;overflow:hidden}
.rmf-base{position:absolute;top:0;width:1px;height:100%;background:#546880}
.rmf-kt{position:absolute;top:0;width:2px;height:100%;background:#8b5cf6;opacity:.85}
.rmf-cur{position:absolute;top:0;width:2px;height:100%;background:#3b82f6;
  box-shadow:0 0 0 1px rgba(59,130,246,.4)}
#rmf_cap{font-size:11px;color:#546880;margin-top:6px;font-variant-numeric:tabular-nums}
.rmf-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.rmf-steps .btn{flex:1;min-width:96px;justify-content:center;font-size:12.5px;min-height:36px}
#rmf_say{margin-top:10px;font-size:12px;color:#e0b070;
  background:rgba(200,138,61,.10);border:1px solid #c88a3d;border-radius:6px;padding:4px 10px}
#rmf_say[hidden]{display:none}
#rmfine .btn[disabled]{opacity:.4;cursor:not-allowed}
/* D8: 마커 드래그 중 "지금 이 프레임을 보고 있다"는 표시 — 영상 위에 겹치는 알약 */
#rm_preview{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  background:rgba(37,99,235,.85);color:#fff;border-radius:6px;padding:3px 12px;
  font-size:13px;white-space:nowrap;pointer-events:none;z-index:5}
#rm_preview[hidden]{display:none}
/* D7: 설정 중 일시 정지 — 영상 위 오른쪽 위 알약 */
/* 상단 마커바(진행바)를 덮지 않게 한 줄 아래에 — 마커바는 #dp 맨 위에 있다 */
#rm_pausepill{position:absolute;top:22px;right:12px;background:rgba(200,138,61,.9);
  color:#12100e;border-radius:6px;padding:2px 10px;font-size:12px;pointer-events:none;z-index:5}
#rm_pausepill[hidden]{display:none}

/* ══ 지시 #129 ⑦(F1) — 재생 종료 타이머 ═════════════════════════════════ */
#tmodal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998}
#tmodal-scrim[hidden]{display:none}
#tmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;
  background:#161b24;border:1px solid #2a3344;border-radius:10px;padding:18px 22px;
  color:#e2e8f0;min-width:320px;max-width:440px;width:calc(100vw - 24px);
  box-shadow:0 8px 32px rgba(0,0,0,.6)}
#tmodal[hidden]{display:none}
#tmodal h3{font-size:14px;font-weight:700;margin:0 0 8px}
#tm_state{font-size:12px;color:#8fa0b8;margin-bottom:10px}
.tm-row{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;flex-wrap:wrap}
.tm-row label{color:#8fa0b8;min-width:56px}
.tm-row input[type=text]{width:80px;background:#1e2530;color:#e2e8f0;border:1px solid #2a3344;
  border-radius:4px;padding:5px 6px;font-size:13px;font-family:inherit}
/* 남은 시간 배지 — 상세 툴바에 상주(타이머가 걸린 동안만) */
.tbadge{font-size:11.5px;color:#e0b070;border:1px solid #c88a3d;border-radius:5px;
  padding:1px 7px;white-space:nowrap}
.tbadge[hidden]{display:none}

/* ⑨ 자동 제외된 구간1 카드 — 보일 때는 줄 그어진 채(제외임이 읽히게) */
.card.slot1-auto-exc .cn{text-decoration:line-through;color:#546880}

/* 지시 #129 ⑧(F2): 인트로 옵션의 텍스트 입력칸(ESC 탈출 주소) — 체크박스·셀렉트와 같은
   높이·색을 쓴다(옵션 행 하나에 두 문법이 섞이면 그 행만 튄다). */
.intro-card .opt-row input[type=text]{flex:1;min-width:0;max-width:230px;min-height:32px;
  background:#0d1017;color:#e2e8f0;border:1px solid #2a3344;border-radius:6px;
  padding:4px 8px;font-size:13px;font-family:inherit}


/* ══ 지시 #130 (3단계) — 재생 목록 칩 행 · 선택/이동 모드 · 순수 영상 · 순번 배지 ══ */

/* D13 칩 행 — 그리드 바로 위에 상주(스크롤과 함께 사라지지 않는다). */
#plbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 10px;background:#141a24;border-bottom:1px solid #223}
#plbar[hidden]{display:none}
#plbar .plgrow{flex:1}
#plchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plchip{background:#1e2530;color:#c8d4e4;border:1px solid #2c3646;border-radius:999px;
  padding:4px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.plchip:hover{border-color:#3b82f6}
.plchip.on{background:#1e3a5f;color:#fff;border-color:#3b82f6;font-weight:700}
.plchip.pl-mini{padding:3px 8px;font-size:11px;color:#8fa0b8;border-style:dashed}
.plchip.pl-danger:hover{border-color:#ef4444;color:#ef4444}
.plchip.pl-add{border-style:dashed;color:#8fa0b8}
#plnew{display:flex;align-items:center;gap:4px}
#plnew[hidden]{display:none}
#pl_name{background:#0f141c;color:#e2e8f0;border:1px solid #2c3646;border-radius:6px;
  padding:4px 8px;font-size:12px;width:150px}
#pl_hint{color:#8fa0b8;font-size:11px}

/* D12 선택 모드 — 고른 카드는 테두리와 좌상단 ✓ 로 표시(줄 그음=제외와 헷갈리지 않게). */
body.select-mode #grid .card{cursor:pointer}
.card.selected{border-color:#22c55e}
.card.selected:not(.file-error):not(.decode-skip)::before{content:'✓';position:absolute;top:6px;right:6px;z-index:6;
  width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;
  background:#22c55e;color:#08120a;font-size:13px;font-weight:800;pointer-events:none}

/* D14 이동 모드 — 순번 배지는 이 모드에서만 보인다. */
.ord-badge{display:none}
body.move-mode .ord-badge{display:inline-block;background:#3b82f6;color:#fff;
  font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px}
body.move-mode #grid .card{cursor:grab;touch-action:none}
body.move-mode #grid .card.dragging{cursor:grabbing;opacity:.6;outline:2px dashed #3b82f6}

/* F4 순수 영상 모드 — 정보는 **마우스를 올릴 때만** 잠깐(채택안). 자리는 그대로 두고
   투명도만 죽여서 카드 높이가 흔들리지 않게 한다(10항 ① 고정 종횡비 규칙 유지). */
body.pure-video .card .ci,
body.pure-video .card .card-badges,
body.pure-video .card .card-actions,
body.pure-video .card .pbar-wrap{opacity:0;pointer-events:none;transition:opacity .12s linear}
body.pure-video .card:hover .ci,
body.pure-video .card:hover .card-badges,
body.pure-video .card:hover .card-actions,
body.pure-video .card:hover .pbar-wrap{opacity:1;pointer-events:auto}
/* 순번·선택 표시는 순수 영상 모드에서도 보여야 한다 — 그것이 지금 하는 일의 대상이다 */
body.pure-video.move-mode .card .card-badges,
body.pure-video.select-mode .card .card-badges{opacity:1}