:root {
	--gap: 8px; --bg: #0b0f14; --surface: #111722; --line: rgba(255,255,255,.16);
	--text: #e8eaee; --muted: rgba(255,255,255,.7); --accent: #80c1eb; --folder: #e9b949; --side-width: 320px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; color: var(--text); font-family: Segoe UI, system-ui, -apple-system, Roboto, Arial, "Malgun Gothic", sans-serif; }

.sr-only {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.logo--floating {
	display: inline-flex; align-items: center; position: fixed; z-index: 30; top: 8px; left: 8px; padding: 6px;
	text-decoration: none; transition: transform .15s ease;
}
.logo--floating:hover { transform: translateY(-1px); }
.logo--floating .logo__img { display: block; width: 24px; height: 24px; }

.pl-unsupported { display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 2rem; text-align: center; color: var(--muted); }
.pl-unsupported[hidden] { display: none; }

.pl-app {
	display: grid; grid-template-columns: var(--side-width) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
	height: 100vh; min-width: 1024px;
}
.pl-app[hidden] { display: none; }
.pl-app--side-collapsed { grid-template-columns: minmax(0, 1fr); }
.pl-app--side-collapsed .pl-side { display: none; }

.pl-bar {
	display: flex; align-items: center; gap: var(--gap); grid-column: 1 / -1; padding: 8px 12px 8px 52px;
	border-bottom: 1px solid var(--line); background: var(--surface);
}
.pl-bar__title { margin: 0 8px 0 0; font-size: 1rem; font-weight: 700; white-space: nowrap; }
.pl-search {
	width: 240px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
	background: var(--bg); color: var(--text); font: inherit; font-size: .9rem;
}
.pl-search:disabled { opacity: .5; }
.pl-status { overflow: hidden; margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; text-overflow: ellipsis; }

.pl-btn {
	display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
	background: transparent; color: var(--text); font: inherit; font-size: .85rem; white-space: nowrap; cursor: pointer;
}
.pl-btn:hover:not(:disabled), .pl-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.pl-btn:disabled { opacity: .4; cursor: default; }
.pl-btn--primary { border-color: var(--accent); }
.pl-btn--icon { justify-content: center; width: 32px; padding: 0; }
.pl-btn[hidden] { display: none; }

/* 최근 재생과 폴더 목록이 따로 스크롤 — 폴더 목록을 내려도 최근 재생이 위에 남음 */
.pl-side { display: flex; flex-direction: column; overflow: hidden; padding: var(--gap); border-right: 1px solid var(--line); background: var(--surface); }
.pl-tree { flex: 1; min-height: 0; overflow-y: auto; }
.pl-side__title { margin: 4px 4px 6px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.pl-recent { flex: none; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pl-recent[hidden] { display: none; }
.pl-side__head { display: flex; flex: none; align-items: center; justify-content: space-between; }
.pl-side__head[hidden] { display: none; }
.pl-side__actions { display: flex; gap: 2px; }
.pl-text-btn {
	padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted);
	font: inherit; font-size: .8rem; cursor: pointer;
}
.pl-text-btn:hover:not(:disabled), .pl-text-btn:focus-visible { color: var(--accent); }
.pl-text-btn:disabled { opacity: .4; cursor: default; }
.pl-recent__list, .pl-tree__list { margin: 0; padding: 0; list-style: none; }
/* 최대 20개까지 쌓여도 트리를 밀어내지 않게 6줄 높이에서 스크롤 */
.pl-recent__list { max-height: 9rem; overflow-y: auto; }
.pl-tree__list .pl-tree__list { padding-left: 14px; }
.pl-tree__folder[hidden], .pl-tree__file[hidden] { display: none; }

.pl-tree__summary { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: .9rem; list-style: none; cursor: pointer; }
.pl-tree__summary:hover { background: rgba(255,255,255,.06); }
.pl-tree__icon { flex: none; width: 1.2em; color: var(--folder); text-align: center; }
.pl-tree__name { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.pl-tree__video, .pl-recent__video {
	display: block; position: relative; overflow: hidden; width: 100%; padding: 4px 6px 4px 28px; border: 0; border-radius: 6px;
	background: transparent; color: var(--text); font: inherit; font-size: .88rem; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
.pl-recent__video { padding-left: 22px; }
/* 시청 표시는 이름 왼쪽 여백에 아이콘으로(이름 글자는 그대로) */
.pl-tree__video[data-watch]::before, .pl-recent__video[data-watch]::before {
	position: absolute; top: 50%; left: 7px; color: var(--muted); font: var(--fa-font-solid); font-size: .72rem; transform: translateY(-50%);
}
.pl-tree__video[data-watch="progress"]::before, .pl-recent__video[data-watch="progress"]::before { content: "\f042"; color: var(--accent); }
.pl-tree__video[data-watch="done"]::before, .pl-recent__video[data-watch="done"]::before { content: "\f00c"; }
.pl-tree__video:hover, .pl-recent__video:hover { background: rgba(255,255,255,.06); }
.pl-tree__video:focus-visible, .pl-recent__video:focus-visible, .pl-tree__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pl-tree__video[aria-current="true"] { background: rgba(128,193,235,.18); color: var(--accent); font-weight: 700; }

.pl-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pl-stage { position: relative; display: flex; align-items: center; flex: 1; min-height: 0; background: #000; container-type: size; }
.pl-video { display: block; width: 100%; height: 100%; background: #000; }
/* 기본 전체 화면은 controlslist=nofullscreen으로 꺼 두면 흐린 비활성 버튼으로 남아(Chromium 149·Chrome 154 실측) 숨김 — 전체 화면은 조작줄 버튼 */
.pl-video::-webkit-media-controls-fullscreen-button { display: none; }
/* Chrome은 자막을 <video> 상자 맨 아래에 그려, 상자가 영상보다 높으면 자막이 영상 아래 검은 여백으로 내려감
   — 상자 높이를 영상 비율(--pl-video-ratio, player.js가 .pl-app에 설정)에 맞춰 위아래 여백을 없앰(컨테이너 단위 미지원 브라우저는 기존 높이) */
@supports (height: 1cqh) {
	.pl-video { height: min(100cqh, 100cqw / var(--pl-video-ratio, 1.7778)); }
}

/* 자막 크기 4단계 — %의 기준은 Chromium 기본 자막 크기(영상 상자 짧은 변의 약 5%, Chromium 149·Chrome 154 실측)
   라 창 높이가 아니라 영상 크기(전체 화면 포함)에 비례 */
.pl-video--cue-s::cue { font-size: 70%; }
.pl-video--cue-m::cue { font-size: 85%; }
.pl-video--cue-l::cue { font-size: 100%; }
.pl-video--cue-xl::cue { font-size: 120%; }

.pl-empty { display: grid; place-content: center; gap: .5rem; position: absolute; inset: 0; padding: 2rem; background: var(--bg); text-align: center; }
.pl-empty[hidden] { display: none; }
.pl-empty__title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.pl-empty__hint { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.pl-error {
	position: absolute; z-index: 2; top: 16px; left: 50%; margin: 0; padding: 10px 14px; border-radius: 8px;
	background: rgba(160, 40, 40, .9); font-size: .9rem; transform: translateX(-50%);
}
.pl-error[hidden] { display: none; }
.pl-notice {
	display: flex; position: absolute; z-index: 2; top: 16px; left: 50%; align-items: center; gap: 8px; max-width: calc(100% - 32px);
	padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(17, 23, 34, .94); font-size: .88rem; transform: translateX(-50%);
}
.pl-notice[hidden] { display: none; }

.pl-keys {
	position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 290px; max-height: calc(100% - 24px); overflow-y: auto; padding: 12px 14px;
	border: 1px solid var(--line); border-radius: 10px; background: rgba(17, 23, 34, .97); font-size: .85rem;
}
.pl-keys[hidden] { display: none; }
.pl-keys__title { margin: 0 0 8px; font-size: .9rem; }
.pl-keys__list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.pl-keys__list dt { color: var(--accent); font-weight: 700; white-space: nowrap; }
.pl-keys__list dd { margin: 0; color: var(--muted); }

.pl-controls {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 12px;
	border-top: 1px solid var(--line); background: var(--surface);
}
.pl-now { overflow: hidden; flex: 1 1 200px; min-width: 0; font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; }
.pl-group { display: inline-flex; align-items: center; gap: 6px; }
.pl-group[hidden] { display: none; }
.pl-select {
	max-width: 240px; height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px;
	background: var(--bg); color: var(--text); font: inherit; font-size: .85rem;
}
.pl-select:disabled { opacity: .5; }
.pl-sync-value { min-width: 3.6em; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; text-align: center; }
.pl-resume { color: var(--muted); font-size: .85rem; }

/* 세로로 긴 화면: 영상·조작줄을 위, 목록을 아래에 */
@media (orientation: portrait) {
	.pl-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
	.pl-main { grid-row: 2; }
	.pl-side { grid-row: 3; border-right: 0; border-top: 1px solid var(--line); }
	/* 영상 비율대로 높이를 잡되 목록 자리가 남도록 화면 높이 60%까지 */
	.pl-stage { flex: none; height: min(100vw / var(--pl-video-ratio, 1.7778), 60vh); }
	.pl-app--side-collapsed { grid-template-rows: auto minmax(0, 1fr); }
	.pl-app--side-collapsed .pl-stage { flex: 1; height: auto; }
}

/* 전체 화면(재생 영역+조작줄) — 세로 화면 규칙의 높이 제한을 풀고 남은 높이 전부를 재생 영역으로 */
.pl-main:fullscreen { background: var(--bg); }
.pl-main:fullscreen .pl-stage { flex: 1; height: auto; }
/* 재생 중 움직임이 없으면 조작줄을 숨겨 영상 영역을 넓힘(player.js showFullscreenUi) */
.pl-main:fullscreen.pl-main--idle .pl-controls { display: none; }
.pl-main:fullscreen.pl-main--idle .pl-stage { cursor: none; }

/* 멀티뷰 iframe 안 축소 모드(player.js EMBED_MODE) — 클래스 2단계라 세로 화면 media query보다 우선 */
.pl-embed .logo--floating { display: none; }
.pl-embed .pl-app { min-width: 0; }
/* pick: 추가 창 안 폴더 목록 — 상단 바 + 목록만 */
.pl-embed--pick .pl-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.pl-embed--pick .pl-main, .pl-embed--pick #pl-side-toggle, .pl-embed--pick .pl-bar__title { display: none; }
.pl-embed--pick .pl-bar { flex-wrap: wrap; padding-left: 12px; }
.pl-embed--pick .pl-search { flex: 1 1 160px; width: auto; }
.pl-embed--pick .pl-side { grid-row: auto; border: 0; }
/* tile: 타일 안 기본 재생 — 재생 영역만 */
.pl-embed--tile .pl-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pl-embed--tile .pl-bar, .pl-embed--tile .pl-side, .pl-embed--tile .pl-controls { display: none; }
.pl-embed--tile .pl-main { grid-row: 1; }
.pl-embed--tile .pl-stage { flex: 1; height: auto; }
.pl-empty__action { justify-self: center; }
.pl-tile-cc { position: absolute; z-index: 2; top: 8px; right: 8px; background: rgba(17, 23, 34, .8); }
.pl-tile-cc[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }