/* 성과 (src/performance.js) — 예전 VES 성과 탭 이식. 원본 색 이름을 워크스페이스 토큰에 잇고, 원본 공용 클래스(.card·.pill·.tile·표)를
   이 페이지 안에서만 워크스페이스 모양으로 다시 그린다. */
.perf-page{--accent-ink:var(--on-accent);--serious:var(--accent);--good:var(--status-ok);--info:color-mix(in srgb,var(--accent) 22%,var(--surface));--warn:var(--status-warn);--crit:var(--status-error);
 --line:var(--track);--surface-2:var(--inset);--ink-2:var(--secondary);--ring:var(--track);font-size:13px}
:root[data-theme="dark"] .perf-page{--info:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.perf-page .card{background:var(--surface);border-radius:var(--layout-panel-radius);padding:22px 24px;margin:0 0 var(--layout-gap)}
.perf-page .card>h2{font:var(--type-panel-title);letter-spacing:var(--track-panel-title);margin:0 0 14px}
.perf-page .empty{color:var(--muted);font:var(--type-meta);padding:18px 0;text-align:center}
.perf-page button{font:inherit;cursor:pointer}
.perf-page button.mini{border:0;border-radius:9px;padding:0 12px;height:34px;background:var(--surface);color:var(--secondary);font-size:12px}
.perf-page button.mini.on{background:var(--solid);color:var(--on-solid)}
.perf-page .filters button.mini{background:var(--inset)}
.perf-page .filters button.mini.on{background:var(--solid)}
.perf-page .pill{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:var(--radius-pill);background:var(--surface);color:var(--secondary);font-size:11px;white-space:nowrap}
.perf-page .filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--surface);border-radius:var(--layout-panel-radius);padding:14px 16px;margin:0 0 var(--layout-gap)}
.perf-page .tile{background:var(--surface);border-radius:15px;padding:18px 18px 16px;min-width:0}
.perf-page .tile .v{font-weight:700;letter-spacing:-.8px;line-height:1.1}
.perf-page .tile .k{font-size:11px;color:var(--secondary);margin-top:8px}
.perf-page .tblwrap{overflow:auto}
.perf-page table{width:100%;border-collapse:collapse;font-size:12px}
.perf-page th{font-weight:500;color:var(--muted);font-size:11px;text-align:left;padding:0 10px 10px;white-space:nowrap}
.perf-page th.sortable{cursor:pointer}.perf-page th.sortable:hover{color:var(--ink)}
.perf-page td{padding:10px;border-top:1px solid var(--inset);vertical-align:middle}
.perf-page tr[onclick]:hover td{background:var(--hover)}
.perf-page th.num{text-align:right}
.perf-page td.nowrap{white-space:nowrap}
/* 채널 요약 — 표가 옆으로 넘어가도 채널 칸은 왼쪽에 고정 */
.perf-page .pf-sticky th:first-child,.perf-page .pf-sticky td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--inset)}
.perf-page .pf-sticky tr.selrow td:first-child{background:var(--inset)}
.perf-page .pf-sticky tr[onclick]:hover td:first-child{background:var(--hover)}
.perf-page td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.perf-page tr.selrow td{background:var(--inset)}
.perf-page .sub{display:inline-block;font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--radius-pill);background:var(--dot-ok-bg);color:var(--dot-ok-text);vertical-align:1px}
.perf-page td.vdcell{border-radius:12px}
.perf-page .pf-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.perf-page .pf-ctl .sp{flex:1}
.perf-page .pf-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;
    background:var(--surface-2)}
.perf-page .pf-seg button{border:none;border-radius:0;background:none;padding:6px 14px;
    color:var(--ink-2);font-weight:600}
.perf-page .pf-seg button+button{border-left:1px solid var(--line)}
.perf-page .pf-seg button.on{background:var(--accent);color:var(--accent-ink)}
.perf-page .pf-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin:0 0 14px}
.perf-page .pf-kpi .tile .v{font-size:25px}
.perf-page .pf-kpi .tile .d{font-size:11.5px;color:var(--muted);margin-top:4px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
.perf-page .pf-kpi .tile .d.up{color:var(--good)}
.perf-page .pf-kpi .tile .d.dn{color:var(--crit)}
.perf-page .pf-chart svg{width:100%;height:auto;display:block;overflow:visible}
.perf-page .pf-chart .gl{stroke:var(--line)}
.perf-page .pf-chart .ax{fill:var(--muted);font-size:11px}
.perf-page .pf-chart .hit:hover{fill:rgba(128,128,128,.16)}
.perf-page .pf-lg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:0 0 8px}
.perf-page .pf-lg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
    vertical-align:-1px}
.perf-page .pf-note{font-size:11.5px;color:var(--muted);margin-top:8px}
.perf-page .pf-note .pf-warn{color:var(--warn);font-weight:600}
.perf-page .pf-ctl .pill.bad{border-color:var(--warn);color:var(--warn)}
.perf-page .pf-warnbar{border-color:var(--serious);background:var(--surface-2);margin-top:0;
    font-size:12.5px;color:var(--ink-2);line-height:1.6}
.perf-page .pf-warnbar b{color:var(--serious)}
.perf-page .pf-warnbar.crit{border-color:var(--crit)}
.perf-page .pf-warnbar.crit b{color:var(--crit)}
.perf-page .pf-heat{display:grid;grid-template-columns:minmax(74px,132px) 1fr;gap:3px 8px;align-items:center;
    font-size:12px}
.perf-page .pf-heat .nm{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    cursor:pointer}
.perf-page .pf-heat .nm:hover{color:var(--ink);text-decoration:underline}
.perf-page .pf-heat .nm.sel{color:var(--ink);font-weight:700}
.perf-page .pf-heat .row{display:grid;gap:2px}
.perf-page .pf-heat .c{height:15px;border-radius:3px;background:var(--surface-2);border:1px solid transparent}
.perf-page .pf-heat .c.up{background:var(--accent)}
.perf-page .pf-heat .c.today{border-color:var(--muted)}
.perf-page .pf-heat .hd{color:var(--muted);font-size:10.5px;text-align:center;
    overflow:hidden;white-space:nowrap}
.perf-page .pf-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 16px}
.perf-page .pf-duo.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.perf-page .pf-duo.two{grid-template-columns:1fr}}
.perf-page .pf-cap{font-size:11.5px;color:var(--muted);margin:0 0 4px}
.perf-page .pf-cap i.lg{display:inline-block;width:10px;height:10px;border-radius:3px;
    margin:0 5px 0 8px;vertical-align:-1px}
.perf-page .pf-sum{float:right;font-size:12px;font-weight:700;text-transform:none;letter-spacing:0}
.perf-page .pf-dates{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);
    border:1px solid var(--line);border-radius:9px;padding:2px 7px;background:var(--surface-2)}
.perf-page .pf-dates.on{border-color:var(--accent);color:var(--ink-2)}
.perf-page .pf-dates input{padding:3px 6px;font-size:12px;border-radius:6px;color-scheme:inherit}
.perf-page td.vdcell{background:var(--surface-2);padding:12px 14px}
.perf-page .pf-vd{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap}
.perf-page .pf-vd .th{width:160px;border-radius:8px;flex:none;background:var(--surface)}
.perf-page .pf-vd .meta{flex:1 1 320px;min-width:0}
.perf-page .pf-vd .t{font-size:15px;font-weight:700;line-height:1.3}
.perf-page .pf-vd .m{font-size:12px;color:var(--muted);margin:4px 0 9px}
.perf-page .pf-vd .m a{color:var(--accent)}
.perf-page .pf-vd .kpis{display:flex;gap:8px;flex-wrap:wrap}
.perf-page .pf-vd .kpis span{background:var(--surface);border:1px solid var(--ring);border-radius:9px;
    padding:5px 10px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.perf-page .pf-vd .kpis b{display:block;font-size:16px;color:var(--ink);
    font-variant-numeric:tabular-nums;font-weight:700}
.perf-page .pf-cb{display:grid;grid-template-columns:minmax(74px,140px) 1fr auto;gap:4px 10px;
    align-items:center;font-size:12px}
.perf-page .pf-cb .nm{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    cursor:pointer}
.perf-page .pf-cb .nm:hover{color:var(--ink);text-decoration:underline}
.perf-page .pf-cb .nm.sel{color:var(--ink);font-weight:700}
.perf-page .pf-cb .bar{display:flex;height:13px;background:var(--surface-2);border-radius:4px;
    overflow:hidden}
.perf-page .pf-cb .bar i{background:var(--info)}
.perf-page .pf-cb .bar b{background:var(--accent)}
.perf-page .pf-cb .n{font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
/* 워크스페이스 모양 덮어쓰기 — 원본 .pf-* 규칙 뒤에 둔다 */
.perf-page .pf-seg{border:0;background:var(--surface);border-radius:10px;padding:3px}
.perf-page .pf-seg button{border-radius:8px;height:30px;padding:0 13px}
.perf-page .pf-seg button+button{border-left:0}
.perf-page .pf-seg button.on{background:var(--solid);color:var(--on-solid)}
.perf-page .pf-dates{border:0;background:var(--surface);border-radius:10px;height:36px;padding:0 8px}
.perf-page .pf-dates.on{outline:1px solid var(--accent)}
.perf-page .pf-dates input{border:0;background:var(--inset);color:var(--ink);height:26px}
.perf-page .pf-warnbar{border:0;background:var(--dot-warn-bg);color:var(--dot-warn-text)}
.perf-page .pf-warnbar.crit{background:var(--danger-bg);color:var(--danger)}
.perf-page .pf-kpi{gap:12px;margin:0 0 var(--layout-gap)}
.perf-page .pf-sum{float:right}
/* 워크스페이스 공용 svg 규칙(아이콘용 stroke:currentColor)이 차트에 새지 않게 — 원본 차트는 획을 요소마다 직접 준다 */
.perf-page svg{stroke:none;stroke-width:initial}
.perf-page svg .hit{stroke:none}
.perf-page .pf-chart .gl{stroke:var(--line);stroke-width:1}
.perf-page .pf-chart .ax{stroke:none}
/* 영상 상세(표 행 아래)의 차트 — 지표 카드 밖에서도 같은 규칙 */
.perf-page .pf-duo svg{width:100%;height:auto;display:block;overflow:visible}
.perf-page .pf-duo .gl{stroke:var(--line);stroke-width:1}
.perf-page .pf-duo .ax{fill:var(--muted);font-size:11px}
.perf-page .pf-duo .hit:hover{fill:rgba(128,128,128,.16)}
/* 채널 표 '최근 흐름' — 막대 + 최근 합계 + 직전 대비 */
.perf-page th small{font-weight:400;color:var(--muted);margin-left:4px}
.perf-page .pf-trend{display:flex;align-items:center;gap:10px;white-space:nowrap}
.perf-page .pf-trend svg{flex:none;display:block;width:120px;height:30px}
.perf-page .pf-trend span{display:flex;flex-direction:column;line-height:1.2;min-width:46px}
.perf-page .pf-trend b{font-size:13px;font-variant-numeric:tabular-nums}
.perf-page .pf-trend small{font-size:10px;color:var(--muted)}
.perf-page .pf-trend em{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);min-width:52px}
.perf-page .pf-trend em.up{color:var(--good)}.perf-page .pf-trend em.dn{color:var(--crit)}
/* 영상 표 — 10편씩 넘기기 */
.perf-page .pf-vhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.perf-page .pf-vhead h2{margin:0;font:var(--type-panel-title);letter-spacing:var(--track-panel-title)}
.perf-page .pf-vhead h2 small{font:var(--type-meta);color:var(--muted);margin-left:6px}
.perf-page .pf-pager{display:flex;align-items:center;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
.perf-page .pf-pager small{color:var(--muted)}
.perf-page .pf-pager button.mini{width:34px;padding:0;background:var(--inset);font-size:16px}
.perf-page .pf-pager button:disabled{opacity:.35;cursor:default}
.perf-page .pf-vfoot{display:flex;justify-content:center;margin-top:4px}
/* 채널별 영상 개수 범례 · 안내 띠 — 참고 안내는 차분한 회색, 문제일 때만 빨강 */
.perf-page .pf-cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.perf-page .pf-cardhead h2{margin:0;font:var(--type-panel-title);letter-spacing:var(--track-panel-title)}
.perf-page .pf-legend{display:flex;gap:14px;font-size:11px;color:var(--secondary)}
.perf-page .pf-legend span{display:flex;align-items:center;gap:6px}
.perf-page .pf-legend i{width:10px;height:10px;border-radius:3px;background:var(--accent)}
.perf-page .pf-legend i.old{background:var(--info)}
.perf-page .pf-warnbar{background:var(--surface);color:var(--secondary)}
.perf-page .pf-warnbar b{color:var(--ink)}
.perf-page .pf-warnbar.crit{background:var(--danger-bg);color:var(--danger)}
.perf-page .pf-warnbar.crit b{color:var(--danger)}
/* 성과 보완 안내 — 연한 회색 상자(토큰 --toast-bg/--toast-ink), 보완이 멈췄을 때만 빨강 */
.perf-page .pf-notice{margin:0 0 var(--layout-gap);padding:14px 18px;border-radius:var(--radius-lg);background:var(--toast-bg);color:var(--toast-ink);font:var(--type-meta)}
.perf-page .pf-notice p{margin:0}
.perf-page .pf-notice b{color:var(--ink);font-weight:600}
.perf-page .pf-notice blockquote{margin:10px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--accent);display:flex;flex-direction:column;gap:3px}
.perf-page .pf-notice em{font-style:normal;font-weight:700;color:var(--accent)}
/* 보완이 일부 실패해도 상자 전체를 빨갛게 하지 않는다 — 실패한 줄만 빨간 글씨 */
.perf-page .pf-notice .pf-stop{color:var(--danger)}
.perf-page .pf-notice .pf-stop em{color:var(--danger)}
/* 제목 옆 인덱스 — 설명 문장 대신 짧은 꼬리표 */
.perf-page .pf-idx{font:var(--type-meta);color:var(--muted);margin-left:6px;letter-spacing:0;font-weight:400}
.perf-page p.pf-idx{margin:0 0 10px}

/* 영상별 성과 — 좁은 화면(760px 이하)에선 표 대신 세 줄 카드: 제목(두 줄) / 작품 · 채널 / 숫자. 옆으로 넘기지 않는다 */
.perf-page .pf-vcards{display:none}
@media(max-width:760px){
 .perf-page .pf-vhead + .tblwrap{display:none}
 .perf-page .pf-vcards{display:block}
 .perf-page .pf-vhead .pf-idx{display:none}
}
.perf-page .pf-vsort{margin:0 0 4px}
.perf-page .pf-vsort select{font:inherit;font-size:12px;border:0;border-radius:8px;background:var(--inset);padding:7px 10px;color:var(--secondary)}
.perf-page .pf-vcard{padding:12px 4px;border-top:1px solid var(--inset);cursor:pointer;border-radius:8px}
.perf-page .pf-vcard:first-of-type{border-top:0}
.perf-page .pf-vcard:hover{background:var(--hover)}
.perf-page .pf-vcard.sel{background:var(--inset)}
.perf-page .pf-vc-t{font-size:14px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.perf-page .pf-vc-m{font-size:12px;color:var(--secondary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perf-page .pf-vc-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:6px;font-size:12px;font-variant-numeric:tabular-nums}
.perf-page .pf-vc-n small{color:var(--muted);margin-right:3px;font-size:11px}
.perf-page .pf-vc-new{margin-left:auto;font-size:11px;font-weight:600;color:var(--accent)}
.perf-page .pf-vc-d{margin-left:auto;font-size:11px;color:var(--muted)}
.perf-page .pf-vc-detail{background:var(--surface-2,var(--inset));border-radius:12px;padding:12px;margin:4px 0 8px}
/* 영상 표 칸 폭 고정 — 쪽을 넘겨도 칸이 옆으로 움직이지 않게 */
.perf-page .pf-vtable{table-layout:fixed;width:100%;min-width:640px}
.perf-page .pf-vtable .c-work{width:18%}.perf-page .pf-vtable .c-ch{width:11%}.perf-page .pf-vtable .c-n{width:78px}.perf-page .pf-vtable .c-pub{width:128px}
.perf-page .pf-vtable td{overflow:hidden;text-overflow:ellipsis}
.perf-page .pf-vtable td.vdcell{overflow:visible}
/* 게시일 — 날짜는 늘 같은 자리(오른쪽 끝), '신규'는 날짜 앞 고정 칸에(없으면 빈칸) */
.perf-page .pf-vtable td.pf-pub{white-space:nowrap;font-variant-numeric:tabular-nums}
.perf-page .pf-new{display:inline-block;width:30px;margin-right:8px;text-align:center;font-size:10px;font-weight:700;padding:2px 0;border-radius:999px;background:color-mix(in srgb,var(--status-ok) 14%,transparent);color:var(--status-ok);vertical-align:1px}
.perf-page .pf-new.off{visibility:hidden}

/* 채널 필터 화살표 — 다른 드롭다운과 같은 그림 · 글자에서 6 · 끝까지 12 · 중간 회색 (10/27) */
.perf-page .mini .pf-chev{width:16px;height:16px;flex:none;color:var(--secondary);stroke:none;fill:none;margin:0 -6.8px 0 -4.8px}.perf-page .mini .pf-chev path{stroke:currentColor}
.perf-page .mini .pf-chev path{stroke-width:1.75}