@import url('tokens.css');

*{margin:0;padding:0;box-sizing:border-box;}
html,body,#app{height:100%;}
body{
  /* 맥 시스템 글꼴을 그대로 쓴다. 커스텀 글꼴은 이유가 있을 때만(애플 §15) */
  font:var(--t-sm)/1.45 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  color:var(--text); background:var(--bg);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:default;}

/* 스크롤바 규칙 (값은 tokens.css)
   · 세로 = 아예 없앤다. 굴리면 되니까 막대가 없어도 안 헤맨다
   · 가로 = 남긴다. 옆으로 더 있다는 걸 모르는 사람이 있다
   ⛔ width:0 으로는 안 없어진다(실제로 해봤다). display:none 이어야 사라진다. */
::-webkit-scrollbar:vertical{display:none;}
::-webkit-scrollbar:horizontal{height:var(--sb-h);}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent;}
::-webkit-scrollbar-thumb{
  background:var(--sb);border-radius:6px;
  border:1px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--sb-on);background-clip:content-box;}

/* ── 창 머리 ── */
.titlebar{
  position:relative;
  height:var(--bar-h); display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--s4) 0 88px; -webkit-app-region:drag;
  border-bottom:1px solid var(--line);
  background:var(--chrome); backdrop-filter:blur(20px) saturate(180%);
}
/* ⭐ 창 이름은 한가운데 (맥 앱과 같다). 왼쪽에 붙어 있으면 신호등과 엉겨 붙어 보인다 */
.titlebar .path{
  position:absolute;left:50%;transform:translateX(-50%);
  max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-md);font-weight:400;color:rgba(255,255,255,.86);
}
.titlebar .spacer{flex:1;}
/* 폴더 칸 여닫기 — 신호등 바로 옆, 맥 앱이 사이드바 단추를 두는 자리다 */
.railbtn{
  -webkit-app-region:no-drag;flex:none;
  width:28px;height:28px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-3);transition:background 90ms ease-out,color 90ms ease-out;
}
.railbtn svg{display:block;width:18px;height:18px;}
.railbtn:hover{background:var(--hover);color:var(--text-2);}
/* 닫아 둔 동안에는 단추가 켜져 있다고 알린다 — 안 그러면 칸이 왜 없어졌는지 모른다 */
.railbtn[aria-pressed="true"]{background:var(--sel);color:var(--text);}

/* ── 3단 배치: 기둥 | 목록 | 상세 ── */
/* ⭐ 넓게 보기 — 가운데 파일 칸까지 접는다 (2026-08-27 시영).
   왼쪽 폴더 칸만 남고, 파일 칸이 접히면서 그 칸의 구분선도 같이 흐려진다.
   ⛔ 움직이는 값은 「파일 칸 너비」 하나다 — 여러 칸을 같이 움직이면 중간에 자리가 빈다. */
@property --railw { syntax: '<length>'; inherits: false; initial-value: 248px; }
@property --listw { syntax: '<length>'; inherits: false; initial-value: 320px; }
/* ⭐ 판 너비도 여기(.body)에 둔다 — 폴더를 바꾸면 오른쪽 화면은 통째로 다시 그려지는데,
   값이 그 안에 있으면 다시 그리는 순간 애니메이션이 끊기고 툭 튄다. .body 는 안 다시 그린다. */
@property --sidew { syntax: '<length-percentage>'; inherits: true; initial-value: 380px; }
.body{
  height:calc(100% - var(--bar-h));display:grid;
  --railw:var(--rail-w);
  --listw:var(--list-w);
  --sidew:clamp(340px,22vw,420px);
  grid-template-columns:var(--railw) var(--listw) 1fr;
  transition:--railw 460ms cubic-bezier(.22,1,.36,1),
             --listw 460ms cubic-bezier(.22,1,.36,1),
             --sidew 460ms cubic-bezier(.22,1,.36,1);
}
/* 폴더 칸을 손으로 접어 둔 상태 — 파일 칸은 그대로 두고 왼쪽만 없앤다 */
.body[data-side="false"]{--railw:0px;}
/* ⭐ 할 일 판은 영상이 있어야 쓸모가 있다 (2026-08-28 시영). 없으면 폭을 0 으로 접는다.
   창 머리 「내보내기」와 한 세트다 — 둘 다 「이제 뭘 할 수 있나」를 말하는 자리라
   하나만 남으면 앞뒤가 안 맞는다. --sidew 는 이미 460ms 로 움직여서
   왼쪽 미리보기 칸이 그만큼 부드럽게 넓어진다.
   ⛔ 이 줄은 넓게 보기보다 앞에 둔다 — 넓게 보기가 더 세다. */
.body[data-can="false"]{--sidew:0px;}
/* 넓게 보기 = 화면을 통째로 쓴다. 폴더 칸도 접는다 (2026-08-28 시영) —
   여기까지 온 사람은 고르는 일만 하러 온 것이라 옆 목록을 볼 일이 없다.
   ⛔ 이 줄이 위 줄보다 뒤에 있어야 한다 — 넓게 보기가 손으로 접은 것보다 세다. */
.body[data-wide="true"]{--railw:0px;--listw:0px;--sidew:100%;}

/* ── 왼쪽 기둥 ── */
/* 위 여백은 아래보다 얕다 — 창 머리 바로 밑에서 목록이 시작해야 사이드바로 읽힌다(애플 사이드바) */
.rail{border-right:0.5px solid var(--line-2);padding:var(--s2) var(--s2) var(--s3);display:flex;flex-direction:column;overflow:hidden;user-select:none;}
/* ⛔ 위의 user-select:none 은 안에 있는 입력칸까지 막는다 — 커서가 안 들어가고 글자도 안 잡힌다.
   읽는 글자만 막고 적는 칸은 풀어 준다. */
.rail input{user-select:text;-webkit-user-select:text;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav button{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  height:34px;padding:0 var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text);text-align:left;
}
.nav button:hover{background:var(--hover);}
.nav button[aria-selected="true"]{background:var(--sel);font-weight:590;}
.nav .ico{width:18px;height:18px;flex:none;color:var(--accent);}
.nav .ico svg{display:block;width:18px;height:18px;}

.rail-head{
  font-size:var(--t-xs);letter-spacing:var(--track-xs);color:var(--text-3);
  padding:0 var(--s2);margin:var(--s5) 0 var(--s2);
  display:flex;align-items:center;justify-content:space-between;
}
.rail-head button{width:20px;height:20px;border-radius:var(--r-sm);color:var(--text-2);font-size:var(--t-sm);}
.rail-head button:hover{background:var(--hover);color:var(--text);}
.tree{flex:1;overflow-y:auto;padding-bottom:var(--s5);}

/* ── 기둥 맨 아래 계정 ── */
/* 위의 .tree 가 flex:1 로 남은 자리를 다 먹는다. 그래서 이 줄은 저절로 바닥에 붙는다 */
.acct{
  display:flex;align-items:center;gap:var(--s2);width:100%;flex:none;
  height:38px;padding:0 var(--s2);margin-top:var(--s2);
  border-top:0.5px solid var(--line-2);border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:var(--t-sm);color:var(--text);text-align:left;
}
.acct:hover{background:var(--hover);}
.acct .av{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:0;
}
.acct .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 화살표는 이름에 바짝 붙인다. 남은 자리는 margin-right:auto 로 오른쪽에 몰아 준다 */
.acct .tw{width:14px;height:14px;flex:none;margin-left:-3px;margin-right:auto;color:var(--text-3);}
.node{}
.trow{
  display:flex;align-items:center;gap:var(--s2);width:100%;
  height:var(--row);padding-right:var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text-2);text-align:left;
}
.trow:hover{background:var(--hover);}
.trow[aria-selected="true"]{background:var(--sel);color:var(--text);}
/* ⛔ 줄에는 브라우저 기본 테두리(파란 네모)를 안 그린다 (2026-08-27 시영).
   눌렀던 줄에 그 테두리가 남아서, 고른 줄과 따로 노는 줄이 둘 다 도드라졌다.
   고른 줄 표시는 우리가 배경색으로 그리니까 테두리는 방해만 된다. */
.trow:focus,.trow:focus-visible,
.row:focus,.row:focus-visible,
.prow:focus,.prow:focus-visible{outline:none;}
/* ⭐ 방향키가 지금 어느 칸을 움직이는지 색으로 알려준다 (2026-08-27 시영, 파인더와 같다).
   움직이는 칸은 고른 줄이 파랗고, 쉬는 칸은 회색으로 남는다 — 고른 것은 그대로 보인다. */
.body[data-focus="rail"] .trow[aria-selected="true"]{background:var(--accent-weak);color:var(--text);}
/* 삼각형은 열린 방향으로 돈다. 닫힐 땐 같은 길로 되돌아온다(애플 §7) */
/* ⭐ 화살표는 칸 한가운데에 놓는다. 여기가 도는 축이라 어긋나면 돌 때 위치가 튄다 */
.tw{display:inline-flex;align-items:center;justify-content:center;flex:none;
  transition:transform 200ms cubic-bezier(.2,.8,.3,1),opacity 120ms ease-out;}
/* ⭐ 머리글 화살표는 손이 올라갔을 때만 보인다 (2026-08-27 시영) — + · ⋮ 와 같은 규칙이다.
   ⛔ 트리 행(.trow)의 화살표는 그대로 둔다. 그건 「안에 더 있다」는 정보라 늘 보여야 한다. */
/* 「최근 항목」 칸 — 다른 칸과 사이에 선을 긋지 않는다 (2026-08-28 시영).
   칸 이름만으로 충분히 갈린다. 선까지 그으면 왼쪽 기둥이 두 동강 나 보인다.
   ⛔ 지울 수 없는 칸이라 +·⋯ 가 없다. 손을 올려도 아무것도 안 나온다. */
.sect.pin{}

.sect-head .tw,.grp.fold .tw{opacity:0;}
.sect-head:hover .tw,.grp.fold:hover .tw{opacity:1;}
.tw svg{display:block;width:100%;height:100%;}
.trow .tw{width:12px;height:12px;color:var(--text-3);}
.trow[aria-expanded="true"] .tw{transform:rotate(90deg);}
.trow .ico{width:16px;height:16px;flex:none;color:var(--text);}
.trow .ico svg{display:block;width:16px;height:16px;}
/* ⭐ 아이콘을 눌러도 깜빡이지 않게 한다 (2026-08-27 시영).
   그림은 눌러도 잡히면 안 되고(끌면 반투명 그림자가 따라붙는다), 누름은 줄 전체가 받는다. */
.rail .ico{pointer-events:none;}
.rail svg,.rail .ico{-webkit-user-drag:none;user-drag:none;}
.trow .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 줄 오른쪽 ⋯ — 손이 올라갔을 때만 (섹션 머리글의 ⋮ 와 같은 규칙).
   ⭐ 오른쪽 단추를 안 쓰는 사람도 여기서 이름 바꾸기·휴지통을 다 할 수 있다 */
.trow .row-more{
  width:18px;height:18px;flex:none;margin-left:auto;border-radius:var(--r-sm);
  display:none;align-items:center;justify-content:center;color:var(--text-3);
}
.trow .row-more svg{display:block;width:18px;height:18px;}
.trow:hover .row-more,.trow[aria-selected="true"] .row-more{display:inline-flex;}
.trow .row-more:hover{background:rgba(255,255,255,.12);color:var(--text);}

/* ── 섹션 — 리니어처럼 작은 머리글 하나에 프로젝트가 따다닥 ──
   ⭐ 여닫는 삼각형은 오른쪽 끝이다. 왼쪽에 두면 이름 시작점이 밀려서 줄마다 흔들린다. */
.sect{margin-bottom:var(--s3);}
.sect-head{
  display:flex;align-items:center;gap:var(--s1);width:100%;
  height:28px;padding:0 var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-xs);font-weight:400;letter-spacing:var(--track-xs);color:var(--text-3);
  /* 두 번 눌러도 글자가 파랗게 잡히지 않는다 — 여기 글자는 읽는 것이지 고르는 것이 아니다 */
  user-select:none;
}
.sect-head:hover{background:var(--hover);color:var(--text-2);}
/* ⭐ 삼각형은 이름 바로 옆에 붙는다 — 오른쪽 끝으로 밀면 이름과 따로 노는 단추로 보인다.
   남는 자리는 빈 칸(.sect-gap)이 먹고, + 만 오른쪽 끝에 선다. */
.sect-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sect-gap{flex:1;}
.sect-head input.rn{flex:1;min-width:0;}
/* + 와 ⋮ 는 손이 올라갔을 때만 (슬랙과 같다). 늘 떠 있으면 머리글이 지저분하다.
   + = 바로 하나 만든다 / ⋮ = 나머지를 다 담은 차림표 */
.sect-add,.sect-more{
  width:18px;height:18px;flex:none;border-radius:var(--r-sm);
  display:none;align-items:center;justify-content:center;
  color:var(--text-3);line-height:1;
}
/* 화살표와 같은 18px 칸에 그린다 — 굵기도 같아진다(viewBox 24 · 1.5) */
.sect-add svg,.sect-more svg,.grpadd svg{display:block;width:18px;height:18px;}
.sect-head:hover .sect-add,.sect-head:hover .sect-more{display:inline-flex;}
.sect-add:hover,.sect-more:hover{background:rgba(255,255,255,.12);color:var(--text);}
/* ⭐ 열리면 아래, 닫히면 오른쪽. 작고 흐리면 있는지도 모른다 — 글자만 하게, 글자와 같은 색으로 */
.sect-head .tw{width:18px;height:18px;color:var(--text-3);transform:rotate(-90deg);}
.sect-head[aria-expanded="true"] .tw{transform:rotate(0deg);}
.sect-head:hover .tw{color:var(--text-2);}
.sect-none{padding:var(--s1) var(--s2);font-size:var(--t-xs);color:var(--text-3);}
/* 프로젝트 줄도 섹션 머리글과 같은 왼쪽 선에서 시작한다. 들여쓰면 줄이 계단처럼 어긋난다 */
.trow.proj{padding-left:var(--s2);color:var(--text);}

/* 아래로 열린다. 높이를 0fr→1fr 로 늘려서 내용 높이를 몰라도 부드럽다 */
.kids{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 220ms cubic-bezier(.2,.8,.3,1);}
.kids[data-open="true"]{grid-template-rows:1fr;}
.kids-in{overflow:hidden;min-height:0;}

/* ── 가운데 목록(트리) ── */
/* 위 여백은 왼쪽 기둥과 같은 값이어야 두 칸의 첫 줄이 나란히 선다 */
.list{border-right:0.5px solid var(--line-2);background:var(--bg);overflow-y:auto;padding:var(--s2) var(--s2) var(--s5);}
/* 접힐 때 글자와 구분선이 같이 스윽 사라진다 — 선만 남으면 그게 더 눈에 걸린다 */
.list{transition:opacity 300ms ease-out,border-right-color 300ms ease-out;}
.body[data-wide="true"] .list{opacity:0;border-right-color:transparent;pointer-events:none;}
/* 폴더 칸 옆 선도 같이 없앤다 (2026-08-27 시영) — 판이 모서리를 깎고 떠 있어서
   그 옆에 선이 하나 남으면 판과 따로 놀아 보인다. 접힐 때만 없애고 평소엔 그대로 둔다. */
.rail{transition:opacity 300ms ease-out,border-right-color 300ms ease-out;}
.body[data-wide="true"] .rail,
.body[data-side="false"] .rail{opacity:0;border-right-color:transparent;pointer-events:none;}
/* 끌어다 놓는 중 — 받는 칸을 보라 테두리로 감싼다. 글자는 안 넣는다.
   ⭐ 덮개는 fixed 로 그 칸 자리에 그린다 — 목록 안에 두면 스크롤을 따라 흘러내린다.
   자리 값은 tokens 의 칸 폭·창 머리 높이를 그대로 쓴다(따로 적으면 어긋난다). */
.list.over::after,.detail.over::after{
  content:'';position:fixed;z-index:50;pointer-events:none;
  top:calc(var(--bar-h) + var(--s1));left:calc(var(--rail-w) + var(--s1));
  width:calc(var(--list-w) - var(--s2));bottom:var(--s1);
  border:1px solid var(--accent);border-radius:var(--r-md);
}
/* 폴더 칸을 접어 두면 파일 칸이 왼쪽 끝으로 온다 — 덮개도 같이 따라온다 */
.body[data-side="false"] .list.over::after{left:var(--s1);}
/* 빈 편에서는 오른쪽 통 전체가 받는다 — 테두리도 그 통을 감싼다 */
.detail.over::after{width:auto;right:var(--s1);}
/* 자간까지 왼쪽 섹션 머리글(.sect-head)과 똑같이 맞춘다 — 하나만 달라도 크기가 달라 보인다 */
.grp{font-size:var(--t-xs);letter-spacing:var(--track-xs);color:var(--text-3);padding:var(--s5) var(--s2) var(--s1);}
/* ⛔ 맨 위에는 여백을 두지 않는다. 위에 아무것도 없는데 띄우면 그냥 빈 자리다.
   ⭐ 첫 머리글은 왼쪽 섹션 머리글과 같은 28px 칸에 넣는다. 그래야 두 칸의 첫 줄이 나란히 선다
      (2026-08-27 시영 — 높이가 다르면 몇 px 씩 어긋나 보인다). */
.list > .grp:first-child{padding-top:0;padding-bottom:0;height:28px;display:flex;align-items:center;}

/* 아직 편을 안 골랐을 때 — 위가 아니라 칸 한가운데에 놓는다 */
.listempty{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:0 var(--s4);font-size:var(--t-sm);color:var(--text-3);text-align:center;
}
/* 묶음 머리를 누르면 접힌다. 화살표 폭 16px + 사이 8px 이라 글자가 아래 줄 이름과
   같은 세로줄에 선다 — 아이콘 자리에 화살표가 들어앉는 셈이다. */
.grp.fold{display:flex;align-items:center;gap:var(--s1);width:100%;text-align:left;}
.grp.fold:hover{color:var(--text-2);}
/* 섹션 삼각형과 같은 것을 같은 크기로 쓴다 — 한 화면에 두 가지 화살표가 있으면 어설프다 */
.grp .tw{width:18px;height:18px;color:var(--text-3);transform:rotate(-90deg);}
.grp.fold[aria-expanded="true"] .tw{transform:rotate(0deg);}
.row{
  display:flex;align-items:center;gap:var(--s2);
  height:var(--row);padding:0 var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-sm);width:100%;text-align:left;
}
.row:hover{background:var(--hover);}
.row[aria-selected="true"]{background:var(--sel);}
.body[data-focus="list"] .row[aria-selected="true"],
.body[data-focus="list"] .prow[aria-selected="true"]{background:var(--accent-weak);}
.row .tw{width:12px;flex:none;color:var(--text-3);font-size:10px;line-height:1;}
/* ⭐ 왼쪽 폴더 아이콘과 같은 16px 다 (2026-08-28 시영). 전에는 18px 로 키워 뒀었다 —
   그때는 선 아이콘이라 같은 칸에 두면 가늘어서 작아 보였기 때문이다.
   속을 채운 지금은 반대로 혼자 커 보인다. 줄 높이·사이 여백은 폴더 줄과 이미 같다. */
/* ⭐ 아이콘 색은 --text-2 다 (2026-08-28 시영). 42% 투명(--text-3)으로 두면 얇은 선이
   바탕에 묻혀 깨져 보인다. 이름 글자(흰색)보다는 여전히 한 단 어둡다. */
.row .ico{width:16px;height:16px;flex:none;color:var(--text-2);}
.row .ico svg{display:block;width:16px;height:16px;}
/* 그림 파일 아이콘(프리미어 프로젝트) — 선 아이콘과 같은 자리에 선다.
   ⛔ 이 크기는 건드리지 않는다 (2026-08-28 시영). 틀을 18px→16px 로 줄였을 때 이것까지
      같이 작아져서 되돌렸다. 93% 는 그 18px 시절과 화면에서 같은 크기가 되는 값이다. */
.row .ico img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(.93);}
.row.indent{padding-left:var(--s5);}
.row .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 가운데 생략 — 앞쪽 이름만 줄이고 확장자는 끝까지 남긴다 (파인더와 같다) */
.lbl:has(.ext){display:flex;min-width:0;}
.lbl .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lbl .ext{flex:none;}
.row .tag{
  margin-left:auto;font-size:var(--t-xs);letter-spacing:var(--track-xs);
  padding:1px 5px;border-radius:var(--r-sm);
  color:var(--accent);background:var(--accent-weak);
}
.row .dur{margin-left:auto;font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}

/* ── 싱크가 맞은 묶음 ──
   한 묶음은 영상 하나 + 거기 붙은 소리들이다. 줄 사이를 띄우지 않고 딱 붙여서
   한 덩어리로 보이게 하고, 묶음과 묶음 사이만 벌린다.
   ⭐ 표시는 브랜드 보라 하나로 끝낸다. 선을 긋거나 짝마다 색을 달리하면 목록이 지저분해진다. */
/* 찾는 중에 까는 빈 줄 — 곧 여기에 파일이 들어온다는 뜻이다.
   빛이 왼쪽에서 오른쪽으로 한 번씩 지나간다. 두 줄이 살짝 어긋나게 흘러야 살아 보인다. */
.skel{display:flex;flex-direction:column;gap:2px;padding:0 var(--s2);}
.skel i{
  height:var(--row);border-radius:var(--r-sm);
  background:linear-gradient(90deg,
    var(--hover) 20%, rgba(255,255,255,.18) 38%, var(--hover) 56%);
  background-size:300% 100%;
  animation:skel 1500ms ease-in-out infinite;
}
.skel i:nth-child(2){animation-delay:180ms;opacity:.6;}
@keyframes skel{from{background-position:120% 0;}to{background-position:-20% 0;}}

.pairset{margin:2px 0 var(--s3);}
.prow{
  display:flex;align-items:center;gap:var(--s2);
  height:var(--row);padding:0 var(--s2);border-radius:var(--r-sm);font-size:var(--t-sm);
}
.prow:hover{background:var(--hover);}
/* 지금 보고 있는 줄 — 묶음 안에서도 어느 것을 보는지 보여야 한다 (2026-08-27 시영) */
.prow[aria-selected="true"]{background:var(--sel);}
.prow .ico{width:18px;height:18px;flex:none;color:var(--accent);}
.prow .ico svg{display:block;width:18px;height:18px;}
.prow .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prow .dur{margin-left:auto;font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}

/* ── 미리보기 + 정보 — 파인더 미리보기 칸 ──
   ⭐ 틀은 늘 같은 자리·같은 높이다. 그 안에서 영상만 가로·세로로 바뀐다.
   그래서 아래 정보 줄이 파일을 바꿔도 위아래로 안 움직인다(파인더와 같다). */
.pv{display:flex;flex-direction:column;min-width:0;}
/* 아직 비었을 때 — 무엇을 얻는지 먼저 말하고, 넣는 길을 둘 다 준다(단추·끌어다 놓기).
   테두리는 안 친다. 글과 단추만으로도 여기가 시작점인 게 보인다. */
.pvdrop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);
  height:100%;padding:0 var(--s4);text-align:center;color:var(--text);
}
.pvdrop b{font-size:var(--t-xl);font-weight:640;letter-spacing:var(--track-lg);line-height:1.35;}
.pvdrop .hint{font-size:var(--t-sm);color:var(--text-3);}
.addbtn{
  display:inline-flex;align-items:center;gap:var(--s2);height:44px;padding:0 var(--s5);
  border-radius:999px;background:#fff;color:#000;font-size:var(--t-md);font-weight:590;
  transition:background 90ms ease-out;
}
.addbtn:hover{background:#e9e9ec;}
.addbtn:active{background:#d5d5da;}
.addbtn i{font-style:normal;font-size:var(--t-sm);color:rgba(0,0,0,.45);}
.pvbox{
  height:min(54vh,580px);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* ⭐ 기준은 세로 영상이다 (2026-08-27 시영). 틀 높이는 세로 영상이 꽉 차는 크기로
   못 박아 두고, 가로 영상은 그 안에서 작아진다 — 움직이는 건 영상뿐이고
   아래 재생줄·이름·정보는 파일을 바꿔도 늘 같은 자리에 있다(파인더와 같다).
   ⛔ 「가로일 때 빈 자리가 아깝다」고 틀을 auto 로 풀지 마라. 그러면 세로 영상이 잘리고
      파일을 넘길 때마다 아래 줄이 위아래로 뛴다. 한 번 그렇게 했다가 되돌렸다. */
/* 모서리를 살짝 깎는다. 각진 네모는 화면에 박힌 것처럼 보인다 (2026-08-27 시영) */
.pvbox .pvm{display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);}
/* 소리 파일 — 파인더와 같은 모양. 밝은 회색 정사각 판 위에 회색 음표 하나.
   틀 높이는 영상과 똑같이 두어서 파일을 바꿔도 아래 정보가 위아래로 안 뛴다. */
.pva-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);height:100%;}
/* ⭐ 판은 틀을 다 채우지 않는다 (2026-08-28 시영). 꽉 채우면 어두운 화면에 흰 정사각형이
   너무 크게 박힌다. 틀 자체는 100% 로 두고 판만 줄여 가운데에 놓으면 아래 정보도 안 뛴다. */
.pva-card{
  flex:0 1 auto;min-height:0;height:min(320px,55%);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--audio-card);border-radius:var(--r-md);
}
.pva-ico{width:38%;height:38%;color:var(--audio-note);}
.pva-ico svg{display:block;width:100%;height:100%;}
/* 소리 파일도 재생줄은 밖에 있다 — 재생기 자체는 안 보이게 두고 소리만 낸다 */
.pva{display:none;}

/* ── 재생줄 — 애플 뮤직처럼 그림 밖에 놓는다 (2026-08-27) ──
   기본 재생 단추는 영상 위에 검은 띠로 올라앉아 정작 봐야 할 아래쪽을 가린다.
   위는 그림만, 아래는 진행바 → 시간 → 단추 순으로 내려간다. */
.pvplay{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3);}
.pvbar{position:relative;height:4px;border-radius:2px;background:var(--tk-empty);}
/* 손이 닿는 자리를 위아래로 넓힌다 — 4px 짜리 선을 정확히 겨누게 하면 안 된다(애플 §10) */
.pvbar::before{content:'';position:absolute;inset:-10px 0;}
.pvbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--text);}
.pvtime{display:flex;justify-content:space-between;
  font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}
.pvctl{display:flex;align-items:center;justify-content:center;gap:var(--s5);}
.pvctl button{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:var(--text-2);
  transition:background 90ms ease-out;
}
.pvctl button svg{display:block;width:22px;height:22px;}
.pvctl button:hover{background:var(--hover);color:var(--text);}
.pvctl button:active{background:var(--sel);}
.pvctl .big{width:44px;height:44px;color:var(--text);}
.pvctl .big svg{width:30px;height:30px;}

/* 파일 이름과 종류 — 미리보기 바로 아래 */
.pvhead{display:flex;flex-direction:column;gap:2px;margin-top:var(--s5);}
.pvhead b{font-size:var(--t-md);font-weight:590;}
.pvhead i{font-style:normal;font-size:var(--t-sm);color:var(--text-2);}

/* 정보 표 — 왼쪽 라벨, 오른쪽 값. 줄마다 얇은 선 */
.fisec{font-size:var(--t-sm);font-weight:590;margin:var(--s5) 0 var(--s1);}
.fitable{display:flex;flex-direction:column;}
.firow{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  height:26px;font-size:var(--t-sm);border-top:1px solid var(--line);
}
.firow span{color:var(--text-2);}
.firow b{font-weight:400;text-align:right;font-variant-numeric:tabular-nums;}
.dim{color:var(--text-3);}

/* ── 오른쪽 상세 ── */
/* 판이 놓이는 바탕은 왼쪽 목록과 같은 어두운 색이다 — 바탕이 갈리면 방이 둘로 보인다 */
.detail{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);}
.detail-head{padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--line);}
.detail-head h1{font-size:var(--t-lg);font-weight:640;letter-spacing:var(--track-lg);line-height:1.15;}
.detail-head .meta{font-size:var(--t-sm);color:var(--text-2);margin-top:var(--s1);}
.detail-body{flex:1;overflow-y:auto;padding:var(--s5);}

.preview{
  aspect-ratio:16/9;border-radius:var(--r-lg);
  background:var(--video);position:relative;overflow:hidden;margin:0 auto;width:auto;
  /* ⛔ 테두리를 border 로 그리면 안 된다 — 안쪽이 2px 줄어서 글자 크기 비율이 그만큼 어긋난다.
     선은 안쪽 그림자로 그린다. 그러면 재는 높이가 화면 높이와 정확히 같다 */
  box-shadow:inset 0 0 0 1px var(--line);
  /* 안의 글자 크기를 틀 높이 기준(cqh)으로 잡으려면 이게 있어야 한다 */
  container-type:size;
}
.preview.vert{aspect-ratio:9/16;}
/* 이 안의 색·크기는 UI 가 아니라 영상 속 자막 값이다. 값 표에 넣지 않는다 */
.cap-demo{position:absolute;left:0;right:0;text-align:center;line-height:1.25;
  padding:0 6%;white-space:pre-wrap;}

.field{display:flex;align-items:center;justify-content:space-between;height:36px;font-size:var(--t-sm);}
.field + .field{border-top:1px solid var(--line);}
.field .k{color:var(--text-2);}
.field .v{font-variant-numeric:tabular-nums;}
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s2) var(--s4);margin-top:var(--s4);}
.card-title{font-size:var(--t-xs);color:var(--text-3);letter-spacing:var(--track-xs);padding-top:var(--s3);}

/* ── 스위치 ── */
.sw{position:relative;width:38px;height:22px;border-radius:11px;background:var(--sw-off);flex:none;
    transition:background 180ms ease-out;}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#f2f2f2;box-shadow:0 1px 2px rgba(0,0,0,.5);transition:transform 180ms ease-out;}
.sw[aria-checked="true"]{background:var(--accent);}
.sw[aria-checked="true"]::after{transform:translateX(16px);}
.sw:active::after{width:21px;}
.task{display:flex;align-items:center;gap:var(--s3);height:44px;}
.task + .task{border-top:1px solid var(--line);}
.task .tx{flex:1;}
.task .tt{font-size:var(--t-sm);}
.task .td{font-size:var(--t-xs);color:var(--text-3);}

/* ── 내보내기 ── */
.targets{display:flex;gap:var(--s1);min-width:0;overflow:hidden;}
.target{
  display:flex;align-items:center;gap:var(--s2);height:34px;padding:0 var(--s3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raised);
  font-size:var(--t-sm);color:var(--text);white-space:nowrap;flex:none;
}
.target[aria-selected="true"]{border-color:var(--accent);background:var(--accent-weak);color:var(--accent);}
.target[disabled]{opacity:.42;}
.target .lg{width:16px;height:16px;flex:none;display:block;}
.target .lg svg,.target .lg img{display:block;width:16px;height:16px;object-fit:contain;}
.run{margin-left:auto;flex:none;white-space:nowrap;height:34px;padding:0 var(--s4);border-radius:var(--r-sm);
  background:#fff;color:#000;font-size:var(--t-sm);font-weight:590;
  transition:background 90ms ease-out;}
.run:hover{background:#e9e9ec;}
.run:active{background:#d5d5da;}

/* 어디로 내보낼지 고르는 줄 — 로고 하나 이름 하나. 더 얹지 않는다 */
/* ⭐ 내보낼 곳은 한 줄에 넷, 정사각으로 (2026-08-27). 세로로 쌓으면 창만 길어지고
   로고가 작아서 무엇인지 잘 안 보였다. 넷뿐이라 한눈에 다 들어오는 게 낫다. */
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);}
.picks .pick{
  flex-direction:column;justify-content:center;gap:var(--s3);
  height:auto;aspect-ratio:1;padding:var(--s3);
  border-radius:var(--r-md);text-align:center;
}
.picks .pick .lg,.picks .pick .lg svg,.picks .pick .lg img{width:56px;height:56px;}
.picks .pick b{font-size:var(--t-sm);line-height:1.3;}
/* 「준비 중」은 이름 아래로. 가로줄일 때처럼 오른쪽 끝으로 밀면 정사각 안에서 자리가 뜬다 */
.picks .pick i{margin:0;}
.pick{
  display:flex;align-items:center;gap:var(--s3);width:100%;height:48px;padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--raised);
  font-size:var(--t-sm);color:var(--text);text-align:left;
}
.pick:hover:not([disabled]){border-color:var(--accent);background:var(--accent-weak);}
.pick[disabled]{opacity:.42;}
.picks .pick[aria-selected="true"]{border-color:var(--accent);background:var(--accent-weak);}

/* 버전 고르기 — 편집툴을 누르면 아래로 열린다 (2026-08-27 시영).
   ⭐ 0fr → 1fr 로 늘린다. 픽셀을 재지 않아서 버전이 몇 개든 그대로 맞는다. */
.vers{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms cubic-bezier(.2,.7,.2,1);}
.vers[data-open="true"]{grid-template-rows:1fr;}
.vers-clip{overflow:hidden;min-height:0;}
.vers-pad{padding:0 var(--s5) var(--s5);}
.vers-t{margin-bottom:var(--s3);font-size:var(--t-sm);color:var(--text-2);}
.vers-row{display:flex;flex-wrap:wrap;gap:var(--s2);}
.verb{
  height:36px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raised);color:var(--text);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
}
.verb:hover{border-color:var(--accent);background:var(--accent-weak);color:var(--accent);}
.pick .lg{width:20px;height:20px;flex:none;display:block;}
.pick .lg svg,.pick .lg img{display:block;width:20px;height:20px;object-fit:contain;}
/* CapCut 공식 아이콘 = 흰 판 위 검정 표시. 모서리만 둥글린다 */
.lg-cc{background:#fff;border-radius:22%;}
.pick i{margin-left:auto;font-style:normal;font-size:var(--t-xs);color:var(--text-3);}

/* 움직임을 줄이라고 한 사람에겐 줄인다(애플 §14) */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;}
  button:active{transform:none;}
}


/* ══ 표 화면 (타임라인·단어장) ══ */
.body[data-view="words"] .list{display:none;}
/* ⛔ 여기서 --rail-w(고정값)를 쓰면 접어 둔 폴더 칸이 되살아난다 (2026-08-28 시영).
   움직이는 값은 --railw 다. 두 칸짜리 배치에서도 그 값을 그대로 써야 접힌 채로 남는다. */
.body[data-view="words"]{grid-template-columns:var(--railw) 1fr;}
/* 아직 원본이 없는 편 — 목록·미리보기·할 일을 한 통으로 합친다.
   보여 줄 게 없는 칸을 셋으로 나눠 두면 빈 칸만 셋이 된다. */
.body[data-empty="true"]{grid-template-columns:var(--railw) 1fr;}
.body[data-empty="true"] .list{display:none;}
.body[data-empty="true"] .detail{background:var(--bg);}
.body[data-empty="true"] .detail-body{padding:0;}
.body[data-view="timeline"] .detail-head,
.body[data-view="words"] .detail-head{display:none;}

.detail-body.studio{
  padding:var(--s3);overflow:hidden;
  display:flex;flex-direction:column;gap:var(--s3);
}
.pnl{
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;flex:1;
}
/* 비디오·오디오는 한 통에 붙어 있다. 각자 따로 굴러가고, 사이 손잡이로 높이를 바꾼다 */
/* ⭐ 비디오 칸은 「내용만큼만」 차지한다. 그래야 구분선이 V1 바로 밑에 붙는다.
   비디오를 늘려 놓으면 마지막 줄과 구분선 사이가 텅 비어서 어디가 끝인지 흐려진다.
   남는 자리는 오디오가 가져간다. */
.tlbox .vpane{flex:0 1 auto;min-height:80px;}
.tlbox .apane{flex:1 1 auto;min-height:60px;overflow:auto;}
.tlbox .pnl-head.sub{border-top:0;border-bottom:1px solid var(--line);}
/* 사이 선 — 어디까지가 비디오인지 보이되 튀지 않게 */
.tlsplit{
  flex:none;height:5px;background:var(--line);cursor:row-resize;
  border-top:1px solid var(--bg);border-bottom:1px solid var(--bg);
}
.tlsplit:hover{background:var(--accent);}
body.resizing{cursor:row-resize;user-select:none;}
.pnl-head{
  height:30px;flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s3);border-bottom:1px solid var(--line);
  font-size:var(--t-xs);color:var(--text-2);
}
.pnl-head .sp{flex:1;}
.pnl-head .dim{color:var(--text-3);}
.pnl-foot{height:34px;flex:none;display:flex;align-items:center;padding:0 var(--s2);
  border-top:1px solid var(--line);}
.sheet-wrap{flex:1;min-height:0;overflow:auto;}

/* 표 — 구글 시트를 그대로 옮긴 모양 */
.sheet{border-collapse:separate;border-spacing:0;font-size:var(--t-xs);width:max-content;}
.sheet th,.sheet td{
  height:26px;padding:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.sheet th{
  position:sticky;z-index:2;background:var(--raised);
  color:var(--text-2);font-weight:590;padding:0 var(--s2);text-align:center;
}
/* 머리줄 고정 — 묶음줄이 있는 표는 두 줄, 없는 표는 한 줄이다 */
.sheet thead tr:first-child th{top:0;}
.sheet thead tr:nth-child(2) th{top:26px;}
.sheet .grp th{z-index:3;color:var(--text-3);font-weight:500;}
/* 묶음 색 — 시트와 같은 뜻(트랜스폼 파랑 · 크롭 노랑 · 속도 보라) */
.sheet .g-tf{background:rgba(74,114,173,.14);}
.sheet .g-cr{background:rgba(184,128,44,.14);}
.sheet .g-sp{background:rgba(156,88,160,.14);}
.sheet tbody .g-tf,.sheet tbody .g-cr,.sheet tbody .g-sp{background:rgba(255,255,255,.015);}
.sheet .w-t{width:52px;} .sheet .w-n{width:150px;} .sheet .w-i{width:34px;}

.sheet .rowhead{
  position:sticky;left:0;z-index:1;background:var(--raised);
  color:var(--text);font-weight:590;text-align:center;font-variant-numeric:tabular-nums;
}
.sheet .rowhead.num-i{color:var(--text-3);font-weight:400;}
.sheet input{
  width:100%;height:26px;background:none;border:0;color:var(--text);
  font:inherit;font-size:var(--t-xs);padding:0 var(--s2);
}
.sheet input.num{text-align:right;font-variant-numeric:tabular-nums;min-width:62px;}
.sheet input:focus{outline:1px solid var(--accent);outline-offset:-1px;background:rgba(255,255,255,.05);}
.sheet tbody tr:hover td{background:rgba(255,255,255,.03);}

/* ══ 단어장 — 블록 · 반반 ══
   하는 일이 다른 둘을 한 통에 섞으면 뭘 보는지 흐려진다. 그래서 딱 반으로 가른다. */
.dict{
  flex:1;min-height:0;overflow-y:auto;padding:var(--s5);
  display:grid;grid-template-columns:1fr 1fr;align-content:start;
}
/* 가운데 선은 있는 듯 없는 듯. 갈라졌다는 것만 알면 된다.
   칸 테두리로 그으면 글자 있는 데까지만 그어진다 — 그래서 바탕에 세로선을 하나 깐다.
   그러면 내용이 짧아도 화면 아래까지 쭉 내려간다. */
.dict{background:linear-gradient(var(--line),var(--line)) 50% 0 / 1px 100% no-repeat;}
.dcol{min-width:0;padding-right:var(--s6);}
.dcol + .dcol{padding-left:var(--s6);padding-right:0;}
.dict-head{display:flex;align-items:center;gap:var(--s4);}
.dict-head h1{font-size:var(--t-lg);font-weight:640;letter-spacing:var(--track-lg);flex:1;}
.dict-note{font-size:var(--t-xs);color:var(--text-3);margin:var(--s1) 0 var(--s4);}

/* 흰 버튼 — 그 칸에서 제일 중요한 한 가지에만 쓴다 */
.cta{
  height:28px;padding:0 var(--s4);border-radius:999px;
  background:#f2f2f2;color:#0b0b0b;font-size:var(--t-xs);font-weight:590;
  transition:background 90ms ease-out;
}
.cta:hover{background:#fff;}
.cta:active{background:#d5d5da;}

.dict-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s2);}
.wblk{
  display:flex;align-items:center;gap:var(--s3);width:100%;min-height:38px;
  padding:0 var(--s3);text-align:left;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--t-sm);color:var(--text);
  transition:background 90ms ease-out,border-color 120ms ease-out;
}
.wblk:hover{border-color:rgba(255,255,255,.22);}
.wblk:active{background:var(--sel);}
.wblk.on{border-color:var(--accent);}
.wblk .wico{width:15px;height:15px;flex:none;color:var(--accent);}
.wblk .wico svg{display:block;width:15px;height:15px;}
.wblk .wtx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wblk .wtx i{color:var(--text-3);font-style:normal;}
.wblk .wi{
  flex:1;min-width:0;height:24px;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:var(--t-sm);
}
.wblk .warr{color:var(--text-3);flex:none;}
.dict-empty{font-size:var(--t-sm);color:var(--text-3);padding:var(--s3) 0;}

/* 목록 묶음 머리 — 폴더처럼 마우스 올리면 + 가 나온다 */
.grp.gh{display:flex;align-items:center;justify-content:space-between;}
.grp .grpadd{
  width:18px;height:18px;border-radius:var(--r-sm);
  display:none;align-items:center;justify-content:center;
  color:var(--text-3);line-height:1;cursor:default;
}
.grp.gh:hover .grpadd{display:inline-flex;}
.grp .grpadd:hover{background:var(--hover);color:var(--text);}
.row input.rn{
  flex:1;min-width:0;height:20px;padding:0 4px;
  background:var(--bg);border:1px solid var(--accent);border-radius:3px;
  color:var(--text);font:inherit;font-size:var(--t-sm);outline:none;
}

/* 편 화면에서 고른 스타일 — 눌러서 바꾸러 간다 */
.stylecard{
  display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s3) var(--s4);transition:background 90ms ease-out;
}
.stylecard:hover{background:var(--hover);}
.stylecard:active{background:var(--sel);}
.stylecard .preview{flex:none;height:116px;}
.sc-tx{display:flex;flex-direction:column;gap:3px;flex:1;}
.sc-tx b{font-size:var(--t-sm);font-weight:590;}
.sc-tx i{font-style:normal;font-size:var(--t-xs);color:var(--text-3);}
.sc-go{font-size:var(--t-xs);color:var(--text-2);}

/* ══ 피드백 보내기 ══ */
/* 창 오른쪽 위. 창을 끄는 자리라 끌기(drag)에서 빼 준다 */
.fbbtn{
  -webkit-app-region:no-drag;
  height:32px;padding:0 var(--s4);border-radius:var(--r-sm);
  border:1px solid var(--line);font-size:var(--t-sm);color:var(--text-2);
  transition:background 90ms ease-out;
}
.fbbtn:hover{background:var(--hover);color:var(--text);}
.fbbtn:active{background:var(--sel);color:var(--text);}

/* 내보내기 — 창 머리 오른쪽 끝. 제일 세게 눌리는 자리라 흰 바탕에 검은 글씨 */
/* ── 창 머리 단추 — 「내보내기」와 「인식하기」가 한 자리를 쓴다 (2026-08-27 시영) ──
   ⭐ 단추를 하나 더 만들지 않는다. 마지막 행동이 두 곳으로 갈라지면 매번 어느 걸 누를지 고른다.
   반복 촬영을 지우려면 NG·OK 를 사람이 골라야 해서, 그 상태에서는 바로 내보낼 수가 없다.
   ⭐ 바뀐 걸 놓치지 않게 셋이 같이 움직인다 — 글자가 굴러 올라오고, 바탕이 흰색에서 파랑으로
      번지고, 테두리에서 빛이 한 번 퍼진다. 빛은 「바뀌는 순간」에만 준다. */
.expbtn{
  -webkit-app-region:no-drag;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  /* ⭐ 폭을 못 박는다 (2026-08-28 시영). 「내보내기」·「인식하기」 둘 다 네 글자라 안 튀고,
     폭이 정해져 있어야 빠질 때 0 까지 줄어드는 길이 생긴다 — auto 는 못 줄인다. */
  width:96px;overflow:hidden;white-space:nowrap;
  height:32px;padding:0 var(--s4);border-radius:var(--r-sm);
  background:#fff;color:#000;font-size:var(--t-sm);font-weight:590;
  transition:background 220ms cubic-bezier(.2,.9,.25,1),color 220ms cubic-bezier(.2,.9,.25,1),
             transform 340ms cubic-bezier(.22,1,.36,1),opacity 260ms ease-out,
             width 340ms cubic-bezier(.22,1,.36,1),
             padding 340ms cubic-bezier(.22,1,.36,1),
             margin-left 340ms cubic-bezier(.22,1,.36,1);
}
/* ⛔ [hidden] 만으로는 안 사라진다 — 위에서 display 를 정해 두어서 기본값을 이긴다 (2026-08-28 시영) */
.expbtn[hidden]{display:none;}
/* ⭐ 내보낼 게 없으면 오른쪽으로 슥 빠진다. 들어올 때도 같은 길로 미끄러져 들어온다.
   폭과 안쪽 여백을 0 까지 같이 줄이고, 창 머리 사이 여백(--s3)만큼 왼쪽으로 당긴다 —
   그래야 「피드백 보내기」가 툭 튀지 않고 그 자리로 부드럽게 흘러 들어온다. */
.expbtn[data-in="false"]{
  transform:translateX(14px);opacity:0;pointer-events:none;
  width:0;padding-left:0;padding-right:0;margin-left:calc(var(--s3) * -1);
}
.expbtn:hover{background:#e9e9ec;}
.expbtn:active{background:#d5d5da;}
.expbtn[data-mode="find"]{background:var(--accent);color:var(--on-accent);}
.expbtn[data-mode="find"]:hover{background:#57a6ff;}
.expbtn[data-mode="find"]:active{background:#2f7bf0;}
/* 글자 두 장을 한 칸에 세워 두고 위로 굴린다. 「내보내기」·「인식하기」는 둘 다 네 글자라 폭이 안 튄다 */
.exp-roll{display:block;height:18px;overflow:hidden;}
.exp-stack{display:block;transition:transform 280ms cubic-bezier(.2,.9,.25,1);}
.expbtn[data-mode="find"] .exp-stack{transform:translateY(-18px);}
.exp-stack i{display:block;height:18px;line-height:18px;font-style:normal;}
/* 빛 한 번 — 켜고 끄는 그 순간에만. 계속 남아 있으면 시끄럽다 */
.expbtn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
}
.expbtn.pulse::after{animation:expPulse 520ms ease-out;}
@keyframes expPulse{
  0%{opacity:.55;box-shadow:0 0 0 0 var(--accent);}
  100%{opacity:0;box-shadow:0 0 0 9px var(--accent);}
}

/* 앞을 어둡게 깔고 그 위에 띄운다 — 이 일에 집중하라는 뜻 (애플 §12) */
.modal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);
}
.sheetbox{
  width:min(460px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden;
}
.mhead{
  display:flex;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);font-size:var(--t-md);font-weight:590;
}
/* 내보내기 창 — 정사각 넷이 한 줄에 들어가려면 폭이 필요하다. 구분선도 지운다 */
.exsheet{width:min(680px,94vw);}
.exsheet .mhead{border-bottom:none;padding:var(--s5) var(--s5) 0;font-size:var(--t-lg);
  letter-spacing:var(--track-lg);}
.exsheet .mbody{
  padding:var(--s4) var(--s5) var(--s5);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
}
.mhead .dim{font-size:var(--t-xs);font-weight:400;color:var(--text-3);}
.mbody{padding:var(--s4) var(--s5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);}
.mfoot{
  display:flex;justify-content:flex-end;gap:var(--s2);
  padding:var(--s3) var(--s5) var(--s4);border-top:1px solid var(--line);
}
/* 발에 놓인 단추는 오른쪽에 나란히 붙는다. 하나만 저쪽 끝으로 밀려 있으면 짝이 아닌 것처럼 보인다 */
.mfoot .run{margin-left:0;}
.mfoot .ghost{padding:0 var(--s4);}

/* 피드백 창 — 묻는 게 하나뿐이라 칸을 나누지 않는다. 머리·발의 구분선을 지우고
   글 하나, 스위치 하나, 버튼 둘만 남긴다(애플 §16-6 — 단순함은 덜어내기) */
.fbsheet{position:relative;width:min(600px,94vw);}
/* 닫기는 오른쪽 위. 발에 「취소」를 두면 정작 눌러야 할 「보내기」와 나란히 놓여 헷갈린다 */
.mx{
  position:absolute;top:var(--s4);right:var(--s4);
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;color:var(--text-3);
  transition:background 90ms ease-out;
}
.mx svg{display:block;width:16px;height:16px;}
.mx:hover{background:var(--hover);color:var(--text);}
.mx:active{background:var(--sel);}
.fbsheet .mbody{padding:var(--s5) var(--s5) var(--s4);gap:var(--s4);}
.mtitle{font-size:var(--t-lg);font-weight:590;letter-spacing:var(--track-lg);line-height:1.25;}
/* ⭐ 종류 고르기 — 하나로 붙은 칸 둘. 떨어뜨려 두면 「둘 중 하나」가 아니라 단추 둘로 보인다.
   ⛔ 보라를 쓰지 않는다 (2026-08-27 시영). 이 창에서 보라는 켜진 스위치 하나로 족하다 —
      테두리·글칸·단추까지 보라면 어디를 봐야 하는지 알 수 없다. 고른 칸은 한 단 밝은 회색. */
/* ⭐ 깊이 순서를 바로 세운다 (2026-08-27 시영). 적는 칸이 시트보다 밝으면 그게 제일 도드라져서
   먼저 정해야 할 버그·아이디어가 묻힌다. 맥과 같게 — 넣는 곳은 파여서 어둡고, 고른 칸은 올라와서 밝다.
   통 = 시트보다 어둡게 / 고른 칸 = 그 위로 떠오르게. */
.fbsheet .seg{display:flex;width:100%;padding:3px;gap:3px;border:0;
  background:var(--bg);border-radius:var(--r-md);}
.fbsheet .segb{flex:1;height:40px;padding:0;border-radius:var(--r-sm);}
.fbsheet .segb[aria-selected="true"]{box-shadow:0 1px 3px rgba(0,0,0,.5);}
/* 적는 칸이 이 창의 주인공이다. 넓고 깊게, 글자도 한 단 크게 */
.fbsheet textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);font:inherit;font-size:var(--t-md);padding:var(--s4);outline:none;
  min-height:220px;line-height:1.7;resize:none;transition:border-color 120ms ease-out;
}
.fbsheet textarea::placeholder{color:var(--text-3);}
.fbsheet textarea:focus{border-color:var(--text-3);}
/* 사진·설명·스위치가 한 줄에서 가운데로 맞는다. 줄이 어긋나면 그게 어설픔이다(애플 §16-7) */
.fbshot{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-sm);}
.fbshot img{width:76px;border:1px solid var(--line);border-radius:var(--r-sm);display:block;}
.fbshot span{flex:1;min-width:0;}
.fbsheet .mfoot{border-top:none;padding:0 var(--s5) var(--s5);}

/* ── 정말 지울까요 ──
   맥 기본 confirm 은 단추가 OK·Cancel 로 고정이라 무엇을 누르는지 안 보인다.
   그래서 우리 창으로 만든다 — 단추에 「휴지통으로」처럼 할 일을 적고, 되돌리기 어려우면 빨갛게. */
.asksheet{width:min(400px,92vw);}
.asksheet .mbody{padding:var(--s5) var(--s5) var(--s4);gap:var(--s2);}
.asksheet .mtitle{font-size:var(--t-md);line-height:1.45;letter-spacing:0;}
.asktx{font-size:var(--t-sm);color:var(--text-2);line-height:1.6;}
.asksheet .mfoot{border-top:none;padding:0 var(--s5) var(--s5);}
.askin{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--text);font:inherit;font-size:var(--t-sm);padding:0 var(--s3);
  height:40px;outline:none;transition:border-color 120ms ease-out;
}
.askin::placeholder{color:var(--text-3);}
.askin:focus{border-color:var(--text-3);}
.run.danger{background:var(--danger-bg);color:#fff;}
.run.danger:hover{background:var(--danger-hi);}
.run.danger:active{background:var(--danger-lo);}

/* 아직 안 만든 갈래 — 있다는 것만 보인다 */
.nav button[disabled]{cursor:default;}
.nav button[disabled] .ico,.nav button[disabled]{color:var(--text-3);}
.nav button[disabled]:hover{background:none;}
.nav .soon{
  margin-left:auto;font-size:var(--t-xs);color:var(--text-3);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 5px;
}

/* ══ 폴더 다루기 ══ */
.rail-head button[data-newroot]{width:20px;height:20px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--t-sm);}
.rail-head button[data-newroot]:hover{background:var(--hover);color:var(--text);}

/* + 는 마우스를 올렸을 때만 나온다. 늘 떠 있으면 목록이 지저분하다 */
.trow .rowadd{
  margin-left:auto;width:18px;height:18px;flex:none;border-radius:var(--r-sm);
  display:none;align-items:center;justify-content:center;
  color:var(--text-3);font-size:var(--t-sm);line-height:1;
}
.trow:hover .rowadd{display:inline-flex;}
.trow .rowadd:hover{background:rgba(255,255,255,.12);color:var(--text);}

/* 이름 바꾸기 — 파인더처럼 그 자리에서 고친다 */
.trow input.rn{
  flex:1;min-width:0;height:20px;padding:0 4px;
  background:var(--bg);border:1px solid var(--accent);border-radius:3px;
  color:var(--text);font:inherit;font-size:var(--t-sm);outline:none;
}

/* 오른쪽 눌렀을 때 뜨는 차림표 */
.menu{
  position:fixed;z-index:100;min-width:172px;padding:var(--s1);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.menu button{
  display:block;width:100%;text-align:left;height:28px;padding:0 var(--s3);
  border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text);
}
.menu button:hover{background:var(--hover);}
.menu button.danger{color:var(--danger);}
.menu .sep{height:1px;margin:var(--s1) var(--s2);background:var(--line);}
/* 차림표 맨 위 이름표 — 누를 수 없는 줄이라 button 이 아니다 */
.menu .mhead{
  padding:var(--s2) var(--s3) var(--s1);font-size:var(--t-xs);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 아이콘이 붙은 줄만 가로로 세운다 — 글자만 있는 기존 차림표는 그대로 둔다 */
.menu button:has(.mi){display:flex;align-items:center;gap:var(--s3);}
.menu .mi{width:16px;height:16px;flex:none;color:var(--text-2);}
.menu .mi svg{display:block;width:100%;height:100%;}

.toast{
  position:fixed;left:50%;bottom:64px;transform:translate(-50%,8px);
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s2) var(--s4);font-size:var(--t-sm);color:var(--text);
  opacity:0;pointer-events:none;transition:opacity 160ms ease-out,transform 160ms ease-out;
  box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.ghost{flex:none;white-space:nowrap;height:34px;padding:0 var(--s3);border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--raised);font-size:var(--t-sm);color:var(--text);
  transition:background 90ms ease-out;}
.ghost.sm{height:26px;padding:0 var(--s3);font-size:var(--t-xs);color:var(--text-2);}
.ghost:hover{background:var(--hover);}
.ghost:active{background:var(--sel);}
.listbar{display:flex;gap:var(--s2);padding:var(--s4) var(--s2) var(--s2);}
.listbar .ghost{flex:1;}

/* ══ 자막 스타일 편집기 ══
   고치는 값 옆에 결과를 둔다 — 미리보기가 왼쪽에 붙어 따라다닌다 (애플 §16)
   줄마다 라벨·칸 자리를 똑같이 맞춘다 — 자리가 흔들리면 그게 어설픔이다 */
/* 미리보기 크기를 실제 영상 비율대로 크게 잡는다 — 「이만큼 들어가는구나」가 바로 보여야 한다.
   숏폼(세로)은 왼쪽에 붙이고 오른쪽을 통째로 설정에 쓰고,
   롱폼(가로)은 영화처럼 위를 꽉 채우고 그 아래에 설정을 편다. */
.capedit{display:grid;gap:var(--s5);align-items:start;}
.capedit[data-g="숏폼"]{grid-template-columns:auto minmax(292px,1fr);}
.capedit[data-g="숏폼"] .preview{height:min(76vh,880px);}
/* 숏폼은 설정을 세로 한 줄로만 세운다 — 남는 자리를 미리보기가 가져간다 */
.capedit[data-g="숏폼"] .fields{grid-template-columns:minmax(0,420px);}
.capedit[data-g="롱폼"]{grid-template-columns:1fr;}
.capedit[data-g="롱폼"] .pv-col{position:static;}
.capedit[data-g="롱폼"] .preview{width:100%;max-width:calc(50vh * 16 / 9);}
.pv-col{position:sticky;top:0;display:flex;flex-direction:column;gap:var(--s3);align-items:center;}
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--raised);
  border:1px solid var(--line);border-radius:var(--r-sm);}
.segb{height:30px;padding:0 var(--s5);border-radius:4px;font-size:var(--t-sm);color:var(--text-2);
  transition:background 90ms ease-out;}
.segb i{font-style:normal;font-size:var(--t-xs);color:var(--text-3);margin-left:6px;}
.segb[aria-selected="true"] i{color:var(--accent);}
.segb:active{background:var(--sel);}
.segb[aria-selected="true"]{background:var(--sel);color:var(--text);font-weight:590;}

/* 한 줄로 세우면 오른쪽이 통째로 빈다. 자리가 나는 만큼 옆으로 벌린다 */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s4);align-items:start;}
.fgroup{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.fgroup h3{
  font-size:var(--t-xs);font-weight:500;color:var(--text-3);letter-spacing:var(--track-xs);
  padding:var(--s3) var(--s4) var(--s2);
}
.frow{
  display:grid;grid-template-columns:1fr 136px;align-items:center;gap:var(--s3);
  min-height:38px;padding:0 var(--s4);border-top:1px solid var(--line);
}
.frow.wide{grid-template-columns:1fr;padding:var(--s3) var(--s4);}
.frow .k{font-size:var(--t-sm);color:var(--text);white-space:nowrap;}
.frow .k .unit{color:var(--text-3);}
.frow .sv{
  width:100%;height:26px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);
  font:inherit;font-size:var(--t-xs);padding:0 var(--s2);outline:none;
  text-align:right;font-variant-numeric:tabular-nums;
}
.frow select.sv{text-align:left;padding:0 4px;}
.frow .sv:focus{border-color:var(--accent);background:rgba(255,255,255,.09);}
.frow textarea.sv{height:auto;min-height:52px;padding:var(--s2);text-align:left;line-height:1.5;resize:vertical;}
.colcell{display:flex;align-items:center;gap:var(--s2);}
.colcell .sw{
  width:26px;height:26px;flex:none;padding:2px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:var(--r-sm);
}
.colcell .hex{flex:1;min-width:0;text-align:left;text-transform:lowercase;}

/* ══ 편(EP) 화면 — 할 일 세 가지와 그 옵션 ══
   전에는 스위치 세 개만 있고 아래가 텅 비었다. 자막 스타일도 딴 데 떨어져 있어서
   「어디서 뭘 정하는지」가 안 보였다. 이제 한 가지 일 = 한 칸이고, 그 안에 다 들어 있다. */
.detail-head{display:flex;align-items:flex-start;gap:var(--s4);}
.dh-tx{flex:1;min-width:0;}

/* 왼쪽 = 무엇이 얹히는가(타임라인). 오른쪽 = 무엇을 할까(할 일).
   보는 자리와 정하는 자리를 갈라 둔다. 창이 좁아지면 아래로 접힌다. */
/* 타임라인 · 할 일 셋을 위에서 아래로. 하나하나가 가로를 다 쓴다 */
/* 가로 영상은 위아래로 — 미리보기가 가로로 넓어서 옆에 뭘 두면 둘 다 좁아진다.
   세로 영상은 좌우로 — 미리보기가 세로로 길어서 옆이 남는다. 그 자리에 할 일 카드를 둔다. */
/* ⭐ 화면은 네 칸이다 — 기둥 · 목록 · 미리보기 · 할 일.
   앞의 세 칸은 같은 어두운 바탕이고 맨 오른쪽 할 일 칸만 밝은 판이다.
   칸과 칸 사이는 선 하나로 가른다. 그래서 미리보기 칸은 바탕을 따로 칠하고 여백도 스스로 갖는다. */
.body[data-view="folder"] .detail-body{padding:0;}
/* ⭐ 넓게 보기 (2026-08-27 시영) — 할 일 판이 미리보기 자리까지 밀고 나온다.
   반복 촬영에서 OK·NG 를 고르려면 자리가 넓어야 한다. 왼쪽 두 칸(폴더·파일)은 그대로 둔다.
   ⭐ 늘어나는 일은 CSS 가 한다 — 칸 너비 하나만 바꾸면 안이 다 따라온다. 460ms 로 쭉 밀린다. */
/* ⭐ 움직이는 값은 「할 일 판의 너비」 하나뿐이다. 왼쪽 칸은 남는 만큼 알아서 줄어든다.
   ⛔ 두 칸을 같이 움직이면 처음 몇 프레임에 오른쪽이 빈다 — 실측으로 잡았다(612px 자리에 479px). */
.epcols{
  display:grid;grid-template-columns:minmax(0,1fr) var(--sidew);
  align-items:stretch;min-height:100%;
}
.epcols > .pv{background:var(--bg);padding:var(--s5);min-height:100%;overflow:hidden;
  transition:opacity 240ms ease-out,padding 460ms cubic-bezier(.22,1,.36,1);}
.body[data-wide="true"] .epcols > .pv{opacity:0;padding:0;pointer-events:none;}
/* 쓸 수 없는 판은 오른쪽으로 빠진다 — 안 보이는 자리에 자리만 남기지 않는다 */
.body[data-can="false"] .epside{
  opacity:0;transform:translateX(28px);pointer-events:none;margin-right:0;
}
/* 넓게 보기는 화면 한 판에 딱 맞는다 — 넘치면 자막·재생줄이 아래로 밀려나 안 보인다 */
.body[data-wide="true"] .detail-body{overflow:hidden;}
.body[data-wide="true"] .epcols{height:100%;min-height:0;}
.body[data-wide="true"] .epside{min-height:0;}
/* 폴더 칸이 사라지면 왼쪽에도 같은 틈을 준다 — 판이 화면 끝에 붙으면 얹힌 느낌이 죽는다 */
.body[data-wide="true"] .epside{margin-left:var(--s3);}
/* ⭐ 할 일 칸은 바탕 위에 얹힌 판이다 (2026-08-27 시영, 리니어 참고).
   벽처럼 화면 끝까지 붙어 있지 않고, 사방에 틈을 두고 모서리를 깎아 한 단 위로 띄운다. */
.epside{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s4);min-width:0;
  /* 접힐 때 오른쪽으로 미끄러져 나간다. 사방 틈도 같이 줄어야 왼쪽 칸이 끝까지 넓어진다 */
  transition:opacity 260ms ease-out,
             transform 340ms cubic-bezier(.22,1,.36,1),
             margin 460ms cubic-bezier(.22,1,.36,1);
  /* 위에서 아래까지 꽉 찬다. 내용만큼만 차지하면 판이 위에 얹힌 쪽지처럼 보인다 */
  margin:var(--s3) var(--s3) var(--s3) 0;
  transition:margin-left 460ms cubic-bezier(.22,1,.36,1);
  padding:var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* ── 타임라인 미리보기 ── */
/* 타임라인 — 오른쪽 칸 안에 그대로 둔다. ⛔ 칸 밖으로 내보내지 않는다(2026-08-26 시영).
   대신 그 안에서 크게 쓴다 — 제목을 키우고 막대를 두껍게 한다. */
.tl{margin-top:var(--s5);}
.tl-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3);}
.tl-head b{font-size:var(--t-md);font-weight:590;}
.tl-head em{margin-left:auto;font-style:normal;font-size:var(--t-xs);color:var(--text-2);font-variant-numeric:tabular-nums;}
.tl-lanes{display:flex;flex-direction:column;gap:4px;}

.lane{display:flex;align-items:center;gap:var(--s2);}
.lane-n{flex:none;width:24px;text-align:right;font-size:10px;color:var(--text-3);
  font-variant-numeric:tabular-nums;}
/* 빈 트랙도 바탕을 깔아 둔다 — 클립이 어디까지 차 있는지 견줄 자가 된다 */
.lane-tk{flex:1;min-width:0;background:var(--tk-empty);border-radius:var(--r-sm);}
.clip{
  display:flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s2);
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.16);
  background:var(--tk-clip);color:#fff;overflow:hidden;
}
.clip.cam,.clip.aud{background:var(--tk-audio);}
.clip b{font-size:var(--t-xs);font-weight:590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.clip i,.clip em{font-style:normal;font-size:10px;color:rgba(255,255,255,.62);white-space:nowrap;flex:none;}
.clip em{margin-left:auto;font-variant-numeric:tabular-nums;}

/* ── 할 일 — 이름 하나, 스위치 하나 ──
   칸(카드)에 가두지 않는다. 줄 사이 얇은 선만으로 나눈다 — 테두리가 셋씩 겹치면 지저분해진다.
   설명 줄은 안 쓴다. 이름이 곧 하는 일이라 두 번 말할 필요가 없다(애플 §6·§16). */
/* 판 오른쪽 아래 둥근 흰 단추. 넓혀 두면 + 가 45° 돌아 × 가 된다 — 다시 누르면 줄어든다는 뜻 */
.grow{
  position:absolute;right:var(--s5);bottom:var(--s5);
  width:36px;height:36px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#000;box-shadow:0 4px 14px rgba(0,0,0,.4);
  transition:transform 320ms cubic-bezier(.22,1,.36,1),background 90ms ease-out;
}
.grow:hover{background:#e9e9ec;}
.grow:active{background:#d5d5da;}
.grow svg{display:block;width:20px;height:20px;}
.grow[data-wide="true"]{transform:rotate(45deg);}

/* ⭐ 넓게 보면 스위치는 감추고 반복 촬영 고르는 화면만 남는다 (2026-08-27 시영).
   넓히는 까닭이 「고르기」라서, 그 자리에 스위치가 같이 있으면 눈이 두 군데로 갈린다. */
.quest{display:none;}
.body[data-wide="true"] .opts{display:none;}
/* ── 왼쪽 「남은 편집」 ── 폴더 목록과 같은 자리·같은 폭이라 눈이 안 헤맨다 */
.body[data-wide="true"] .quest{
  display:grid;
  /* 왼쪽 칸은 폴더 목록보다 조금 넓다 — 항목 글자가 덜 잘린다 (2026-08-28 시영) */
  grid-template-columns:300px minmax(0,1fr) clamp(300px,26%,420px);
  gap:var(--s5);flex:1;min-height:0;
}
.qwait{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:var(--text-2);}
/* ⭐ 뿌연 효과 대신 실선 하나 (2026-08-28 시영). 흐린 자국은 지저분해 보인다 */
.qside{
  display:flex;flex-direction:column;gap:var(--s3);min-height:0;
  border-right:0.5px solid var(--line-2);padding-right:var(--s5);
  /* ⭐ 선은 판 위아래 끝까지 쭉 긋는다 — 판 여백만큼 넘겨 그린다.
     여백 안에서 끊기면 선이 어중간하게 떠 보인다 (2026-08-28 시영). */
  margin-block:calc(var(--s5) * -1);padding-block:var(--s5);
}
/* ⭐ 보기 고르개는 왼쪽 칸 맨 위에 붙박이다 (2026-08-28 시영).
   가운데에 두면 대본 칸이 붙고 빠질 때마다 단추가 좌우로 움직여서 매번 눈으로 찾아야 한다. */
.qside .seg{align-self:flex-start;margin-bottom:var(--s2);}
/* 무슨 상황인지 → 뭘 하면 되는지 → 그러면 나머지는 어떻게 되는지. 이 순서로 내려간다 */
.qhead{display:flex;flex-direction:column;gap:var(--s1);padding:0 var(--s2);}
.qhead b{font-size:var(--t-mdl);font-weight:590;line-height:1.45;}
/* 마지막 한 줄은 약속이다 — 골라도 되나 망설이는 마음을 여기서 푼다 */
.qhead i{font-size:var(--t-xs);font-style:normal;color:var(--text-3);}
.qlist{display:flex;flex-direction:column;gap:2px;overflow-y:auto;min-height:0;}
.qrow{
  display:flex;align-items:center;gap:var(--s3);width:100%;
  min-height:38px;padding:var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--text-2);text-align:left;
}
.qrow:hover{background:var(--hover);}
.qrow[aria-selected="true"]{background:var(--accent-weak);color:var(--text);}
.qrow:focus,.qrow:focus-visible{outline:none;}
.qi{
  width:20px;height:20px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:var(--text-3);
  font-size:var(--t-xs);font-variant-numeric:tabular-nums;
}
.qi svg{display:block;width:14px;height:14px;}
.qrow[data-done="true"] .qi{background:var(--accent);color:var(--on-accent);}
.qrow[data-done="true"] .qt{color:var(--text-3);}
.qt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qn{margin-left:auto;flex:none;font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums;}

/* ── 가운데 — 보기 고르개 · 카드 · 자막 · 재생줄 ── */
.qmain{position:relative;display:flex;flex-direction:column;gap:var(--s3);min-width:0;min-height:0;}
/* ⭐ 오른쪽 끝 눈금 — 지금 몇 번째를 보고 있는지. 누르면 그리로 부드럽게 간다.
   막대 하나가 카드 하나다. 지금 것만 길고 밝다 (2026-08-28 시영). */
.tdots{
  position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.tnum{
  margin-bottom:var(--s2);font-size:var(--t-xs);color:var(--text-3);
  font-variant-numeric:tabular-nums;letter-spacing:var(--track-xs);
}
.tnum b{color:var(--text);font-weight:590;}
.tdot{
  position:relative;display:block;width:10px;height:3px;border-radius:2px;
  background:var(--text-3);opacity:.5;cursor:default;
  transition:width 180ms cubic-bezier(.22,1,.36,1),opacity 180ms ease-out,background 180ms ease-out;
}
/* ⛔ 막대가 3px 이라 그대로면 못 누른다 — 눈에 안 보이는 넉넉한 누름 자리를 덧댄다 */
.tdot::before{content:'';position:absolute;inset:-5px -8px -5px -4px;}
/* 손을 올리면 눈금이 다 같이 커지고, 짚은 것만 몇 번인지 알려준다 (2026-08-28 시영) */
.tdots:hover .tdot{width:16px;opacity:.75;}
.tdots:hover .tdot:hover,.tdots:hover .tdot[aria-selected="true"]{width:26px;opacity:1;background:var(--text);}
.tdot[aria-selected="true"]{width:20px;opacity:1;background:var(--text);}
.tdot::after{
  content:attr(data-n);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  padding:2px 8px;border-radius:var(--r-sm);
  background:rgba(20,20,20,.94);border:1px solid var(--line);
  color:var(--text);font-size:var(--t-xs);font-variant-numeric:tabular-nums;
  opacity:0;pointer-events:none;transition:opacity 120ms ease-out;
}
.tdot:hover::after{opacity:1;}

/* ⭐ 위아래로 넘긴다 (2026-08-28 시영). 마우스 휠이 그대로 먹어서 배울 게 없다.
   ⛔ 막대는 안 띄운다 — 옆에 딱 붙는 자리라 화면이 지저분해진다.
   ⭐ 카드 크기는 「이 칸의 높이(cqh)」로 잡는다. 폭으로 잡으면 창이 낮을 때 위가 잘리고,
      한 화면에 몇 줄이 보일지를 못 정한다. 높이로 잡아야 「위아래에 더 있다」를 만들 수 있다.
   ⭐ 스냅은 mandatory — 굴리면 줄 단위로 딱딱 걸린다. proximity 는 어중간한 데서 멈춘다. */
.takes{
  container-type:size;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scroll-behavior:smooth;
}
.takes::-webkit-scrollbar{display:none;}
.takecol{position:relative;flex:0 0 auto;width:auto;}
.take{
  height:100%;width:auto;aspect-ratio:9/16;
  border:2px solid transparent;border-radius:var(--r-md);overflow:hidden;
  background:#000;padding:0;
}
.take video{display:block;width:100%;height:100%;object-fit:cover;}
/* ⛔ 브라우저 기본 테두리(흰 링)를 안 그린다 — 파란 테두리와 겹쳐 두 겹으로 보인다 */
.take:focus,.take:focus-visible{outline:none;}
/* 지금 보는 카드 = 흰 테두리 · 고른 카드 = 파란 테두리. 둘은 다르다 (2026-08-28 시영) */
.takecol[data-cursor="true"] .take{border-color:rgba(255,255,255,.55);}
.takecol[aria-selected="true"] .take{border-color:var(--accent);}
/* 몇 번째 테이크인지 — 넘기다 보면 지금 어디쯤인지 놓친다 */
.takeno{
  position:absolute;left:var(--s2);top:var(--s2);z-index:1;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:var(--t-xs);font-variant-numeric:tabular-nums;
}
.takecol[data-cursor="true"] .takeno{background:rgba(255,255,255,.9);color:#000;}
.takecol[aria-selected="true"] .takeno{background:var(--accent);color:var(--on-accent);}

/* 릴스 — 한 줄에 셋. 둘째 줄이 아래에 살짝 걸쳐 보여서 더 있다는 걸 안다 */
/* ⭐ 카드 폭 = 칸의 1/4. 그래서 좌우가 늘 꽉 차고, 정렬을 고민할 일이 없다 (2026-08-28 시영).
   ⛔ 가운데 정렬은 안 쓴다 — 두 개짜리 묶음이 한가운데로 몰려서 우스워진다.
   ⛔ 카드를 높이로 잡으면 폭이 남아 오른쪽이 빈다. 네 칸으로 나누면 그 문제가 아예 없다. */
.quest[data-view="reels"] .takes{
  display:grid;grid-template-columns:repeat(4,1fr);justify-items:start;align-content:start;
  /* ⭐ 위 여백은 없다 (2026-08-28 시영). 첫 줄 카드가 옆 칸 「전체 / 한 장」 스위치와
     같은 높이에서 시작해야 세 칸이 한 줄로 맞는다. 아래 여백만 남긴다. */
  gap:var(--s4);padding:0 0 var(--s4);scroll-padding-block:0 var(--s4);
}
.quest[data-view="reels"] .takecol{width:100%;height:auto;scroll-snap-align:start;}
.quest[data-view="reels"] .take{width:100%;height:auto;aspect-ratio:9/16;}
/* 가로 영상 — 카드도 가로로 눕고, 한 줄에 둘만 놓는다 (2026-08-28 시영).
   셋으로 줄이면 한 칸이 좁아져서 표정도 손짓도 안 보인다. 고르려고 보는 화면이다. */
.quest[data-ratio="wide"] .take{aspect-ratio:16/9;}
.quest[data-ratio="wide"][data-view="reels"] .takes{grid-template-columns:repeat(2,1fr);}

/* 대본 — 크게 하나씩. 위아래 이웃이 한 뼘씩 보여서 더 있다는 걸 안다 */
.quest[data-view="script"] .takes{
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  scroll-padding-block:12cqh;
}
.quest[data-view="script"] .takes::before,
.quest[data-view="script"] .takes::after{content:'';flex:none;height:12cqh;}
.quest[data-view="script"] .takecol{height:74cqh;scroll-snap-align:center;}
/* ⭐ 가로 한 장 보기 — 폭으로 잡는다 (2026-08-28 시영).
   세로처럼 높이(74cqh)로 잡으면 폭이 1.78배라 칸을 넘겨 좌우가 잘린다.
   50cqh 어치 높이가 되는 폭으로 묶어 두면 위아래 이웃이 한 뼘씩 보인다. */
.quest[data-ratio="wide"][data-view="script"] .takecol{
  height:auto;width:min(100%, calc(50cqh * 16 / 9));}
.quest[data-ratio="wide"][data-view="script"] .take{
  width:100%;height:auto;aspect-ratio:16/9;}

/* ── 노래방 자막 — 지나간 말은 밝게, 지금 말은 파랗게 ── */
.capw{color:var(--text-3);transition:color 120ms ease-out;}
.capw[data-on="past"]{color:var(--text);}
.capw[data-on="now"]{color:var(--accent);}
.qmain .pvplay{flex:none;width:min(560px,100%);margin:0 auto;}

/* ── 오른쪽 대본 — 이 영상에서 한 말을 통째로 편다 ── */
.script{
  overflow-y:auto;min-height:0;padding-left:var(--s5);
  border-left:0.5px solid var(--line-2);
  margin-block:calc(var(--s5) * -1);padding-block:var(--s5);
}
/* ⭐ 두 칸의 줄 높이를 하나로 묶는다 (--lh). 시각은 13px, 말은 15px 이라 그냥 두면
   글자 크기대로 줄 높이가 달라져서 빨간 줄이 계단처럼 어긋난다.
   ⭐ 사이 여백(gap)도 없앤다 — 여백에는 배경이 안 깔려 줄이 두 도막으로 끊긴다.
   그만큼을 시각 칸 너비에 넣어 두면 선이 한 줄로 이어진다. */
.sl{--slt:40px; --lh:24px;
  display:flex;gap:0;align-items:flex-start;padding:var(--s2);border-radius:var(--r-sm);
  font-size:var(--t-sm);line-height:var(--lh);}
.sl[data-mark="keep"]{background:var(--accent-weak);}
/* ⭐ 안 고른 컷은 빨간 줄로 그어 둔다 — 고르는 순간 무엇이 잘려 나가는지 바로 보인다.
   ⛔ text-decoration 을 쓰지 않는다 (2026-08-28 시영) — 시각과 말이 다른 칸이라 줄이 가운데서
      끊겨 두 도막으로 보이고, 애니메이션도 안 먹는다. 줄 하나를 위에 덮어 왼쪽부터 긋는다. */
.sl[data-mark="cut"]{color:var(--text-3);}
/* ⭐ 줄은 시각에서 시작해 말이 끝나는 데서 멈춘다 (2026-08-28 시영).
   ⭐ 덧대는 막대 하나로는 두 줄짜리 말에서 가운데를 관통해 버린다. 그래서 배경으로 긋는다 —
      한 줄 높이(--lh)마다 가운데에 선이 하나 있는 그림을 세로로 되풀이해 깔면
      말이 몇 줄이 되든 줄마다 하나씩 그어진다.
   ⭐ 가로 폭(0%→100%)을 늘려서 왼쪽부터 그어지게 한다. 시각 칸을 먼저 짧게 긋고
      말 칸이 이어받아 긋는다 — 길이에 맞춰 시간을 나눠야 한 자루로 그은 속도가 된다. */
.sl[data-mark="cut"] .slt,
.sl[data-mark="cut"] .slw{
  background-image:linear-gradient(to bottom,
    transparent calc(50% - .75px), var(--danger) calc(50% - .75px),
    var(--danger) calc(50% + .75px), transparent calc(50% + .75px));
  background-size:0% var(--lh);
  /* 펜으로 긋는 곡선 — 천천히 눌러 시작해 미끄러지고 끝에서 길게 멎는다.
     줄마다 조금씩 늦게 시작해서 위에서 아래로 죽 그어 내려간다 */
  animation:cutline 620ms cubic-bezier(.45,.05,.25,1) both;
}
/* 시각 칸은 늘 한 줄이다 — 되풀이하면 말이 두 줄일 때 빈자리에까지 선이 생긴다 */
.sl[data-mark="cut"] .slt{
  background-repeat:no-repeat;
  animation-duration:120ms;
  animation-delay:calc(var(--i, 0) * 55ms);
}
.sl[data-mark="cut"] .slw{
  background-repeat:repeat-y;
  animation-duration:500ms;
  animation-delay:calc(var(--i, 0) * 55ms + 120ms);
}
@keyframes cutline{ to{ background-size:100% var(--lh); } }
.sl[data-mark="cut"] .capw{color:var(--text-3);}
.slt{flex:none;width:calc(var(--slt) + var(--s3));color:var(--text-3);font-size:var(--t-xs);font-variant-numeric:tabular-nums;line-height:var(--lh);}
.slw{min-width:0;}

.opts{display:flex;flex-direction:column;}
/* 영상이 없으면 이름도 스위치도 안 보인다. 줄 나눔만 남아 뼈대가 유지된다 */
.opts[data-empty="true"] .opt-row{visibility:hidden;}
.opt{padding:var(--s4) 0;}
.opt-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s1) var(--s2);margin:0 calc(var(--s2) * -1);border-radius:var(--r-sm);
}
.opt-row:hover{background:var(--hover);}
.opt-row b{font-size:var(--t-md);font-weight:590;}
.opt-sub{margin-top:var(--s3);transition:opacity 160ms ease-out;}
/* 꺼 둔 것은 흐려진다 — 지금 안 쓴다는 뜻이 한눈에 보인다 */
.opt[data-on="false"] .opt-sub{opacity:.32;}

/* 자세히 — 눌렀을 때만 값이 나온다. 평소엔 작은 글자 하나로 조용히 있는다 */
.advsw{
  display:flex;align-items:center;gap:2px;margin-top:var(--s2);height:22px;
  cursor:pointer;color:var(--text-3);font-size:var(--t-xs);
}
.advsw:hover{color:var(--text-2);}
.advsw .tw{width:14px;height:14px;transform:rotate(90deg);}
.advsw[aria-expanded="true"] .tw{transform:rotate(-90deg);}

.orow{display:flex;align-items:center;gap:var(--s3);min-height:34px;}
.orow + .orow{border-top:1px solid var(--line);}
.orow .ok{flex:1;min-width:0;font-size:var(--t-sm);color:var(--text-2);}
.osub{font-size:var(--t-xs);color:var(--text-3);padding:var(--s3) 0 var(--s2);}
.ohint{font-size:var(--t-xs);color:var(--text-3);line-height:1.6;padding-top:var(--s2);}

.ov{display:inline-flex;align-items:center;gap:4px;}
.ov i{font-style:normal;font-size:var(--t-xs);color:var(--text-3);}
.oi{
  width:84px;height:26px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);
  font:inherit;font-size:var(--t-xs);padding:0 var(--s2);outline:none;
  text-align:right;font-variant-numeric:tabular-nums;
}
select.oi{width:auto;min-width:104px;text-align:left;padding:0 4px;}
.oi:focus{border-color:var(--accent);}

/* 문장부호 — 네 개를 나란히 두고 글자 자체를 크게 보여준다 */
.marks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);}
.mark{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.mark b{font-size:var(--t-md);width:12px;text-align:center;color:var(--text-3);}
.mark span{font-size:var(--t-xs);color:var(--text-2);}
.mark[data-on="true"]{border-color:var(--accent);}
.mark[data-on="true"] b{color:var(--accent);}

/* 작은 스위치 */
.sw.sm{width:30px;height:18px;border-radius:9px;}
.sw.sm::after{width:14px;height:14px;}
.sw.sm[aria-checked="true"]::after{transform:translateX(12px);}

/* 자막 칸 안의 스타일 고르기 */
.stylepick{
  display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:var(--s2);margin-top:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:background 90ms ease-out;
}
.stylepick:hover{background:var(--hover);}
.stylepick:active{background:var(--sel);}
.stylepick .preview{flex:none;height:84px;}