/* type_row.css — 유형 줄 둘레 (10-11 · 새 파일)
   ① 제목 줄 크럼 `영상 › 전체 EP CA CM` (type_bundles.js) — 작게 · 늘 같은 칸(최소 폭)을 쥐어 유형을 바꿔도 제목 줄·표가 안 움직인다
   ② 유형 줄 끝 퀵탭 ★ 칩 (quick_tabs.js) — 칸막이 + 칩 · 남는 폭만 쓴다(넘치면 칩 이름이 줄어든다 · 줄바꿈 없음) */

.type-crumb { display: inline-flex; align-items: center; gap: .3rem; flex: none; min-width: 17rem; height: 1.6rem; box-sizing: border-box;
  padding: 0 .5rem; border: 1px dashed var(--line); border-radius: .5rem; background: color-mix(in srgb, var(--muted) 7%, transparent);
  margin: 0 .2rem; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.type-crumb.hidden { display: none; }
.type-crumb.void { border-color: transparent; background: transparent; }       /* 종류가 하나뿐인 묶음은 칸도 안 보인다(자리만 쥠) */
.type-crumb .crumb-filter { display: inline-flex; align-items: center; gap: .15rem; color: var(--muted); font-size: .7rem; font-weight: 600; }
.type-crumb .crumb-filter .ic { width: .75rem; height: .75rem; }
.type-crumb .kind-x { margin-left: .25rem; font-weight: 400; opacity: .75; }
.type-crumb .kind-tab.on .kind-x:hover { opacity: 1; }
.type-crumb .crumb-name { font-weight: 700; color: var(--fg); }
.type-crumb .crumb-sep { color: var(--muted); margin: 0 .05rem; }
.type-crumb .kind-tab { appearance: none; display: inline-flex; align-items: center; margin: 0; padding: 0 .45rem; height: 1.35rem;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; }
.type-crumb .kind-tab:not(.kind-all) { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
.type-crumb .kind-tab:hover { border-color: var(--line); color: var(--accent); }
.type-crumb .kind-tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); }
.type-crumb .kind-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 제목 줄 — 크럼이 있으면 왼쪽부터 차례로(가운데로 벌어지지 않게) · 단추 묶음은 오른쪽 끝 */
.panel-head:has(> .type-crumb) { justify-content: flex-start; }
.panel-head:has(> .type-crumb) > .panel-actions { margin-left: auto; }

/* ② 퀵탭 */
.list-tabs > .pill-tabs.has-qt { margin-right: 0; }
.qt-bar { display: flex; align-items: center; gap: .3rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }   /* 모자라면 칩 이름이 줄고 · 그래도 모자라면 상태 알약이 다음 줄로 */
.qt-bar.void { flex: 0 0 0; }
.qt-bar.sorting { cursor: grabbing; }
.qt-sep { flex: none; width: 1px; height: 1.2rem; margin: 0 .25rem 0 .15rem; background: var(--line); }
.qt-chip { display: inline-flex; align-items: center; gap: .3rem; flex: 0 1 auto; min-width: 4.5rem; max-width: 16rem; box-sizing: border-box;
  padding: .15rem .3rem .15rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font-size: .8rem; font-weight: 600; line-height: 1.35; color: var(--fg); cursor: pointer; white-space: nowrap; user-select: none; touch-action: none; }
.qt-chip:hover { border-color: var(--accent); }
.qt-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); color: var(--accent); }
.qt-chip.dragging { opacity: .6; cursor: grabbing; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.qt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qt-star { flex: none; color: #d9a400; }
.qt-code { flex: none; font-family: ui-monospace, Consolas, monospace; font-weight: 700; }
.qt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qt-x { appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; opacity: .55; }
.qt-x .ic { width: .75rem; height: .75rem; }
.qt-chip:hover .qt-x { opacity: 1; }
.qt-x:hover { background: color-mix(in srgb, var(--danger, #d33) 16%, transparent); color: var(--danger, #d33); }

/* ③ 상태 알약(컷 상태 …)은 유형마다 길이가 달라(도서 = 한 칸 · 영상 = 일곱 칸) 좁은 창에서 어느 유형은 한 줄 · 어느 유형은 두 줄이 되어
      표가 오르내렸다 — 자리를 늘 같은 폭(34rem)으로 쥐고 글은 오른쪽으로 붙인다(유형을 바꿔도 줄 수가 같다) */
.list-tabs > .list-status { min-width: min(34rem, 100%); justify-content: flex-end; box-sizing: border-box; }