/* ──────────────────────────────────────────────
   Everything 디자인 팔레트 (라이트 기본 / .theme-dark 에서 재정의)
   파란 강조색 · 플랫 카드 · 얇은 보더 · 미묘한 그림자
─────────────────────────────────────────────── */
:root {
	/* 앱 최대 폭 (Everything 기준 960px) */
	--app-max-width: 960px;
	/* 표면(패널/헤더/다이얼로그/리스트) */
	--bg: #ffffff;
	--page-bg: #f5f5f5;
	--background: #ffffff;
	--background-color: #ffffff;
	--surface-alt: #f9f9f9;
	/* 전경 텍스트 */
	--text: #222222;
	--text-strong: #1a1a1a;
	--button-text: #222222;
	/* 강조색 (파랑) */
	--accent: #1a73e8;
	--accent-hover: #1558b0;
	--accent-soft: rgba(26, 115, 232, 0.15);
	--link: #1a73e8;
	--focus-color: #1a73e8;
	/* 버튼/표면 */
	--button-bg: #ffffff;
	--button-bg-hover: #f0f6ff;
	/* 보더/구분선 (얇고 옅게) */
	--faint-contrast: #e0e0e0;
	--faint-contrast-trans: #e0e0e0;
	--mild-contrast: #cccccc;
	--grid-contrast: #e0e0e0;
	/* 보조 텍스트 (대비 향상: #888 → #6b7280) */
	--good-contrast: #6b7280;
	--comment-contrast: #6b7280;
	/* 줄무늬/호버 등 옅은 면 */
	--ghost-contrast: #f9f9f9;
	/* 그림자 */
	--shadow: rgba(0, 0, 0, 0.12);
	--shadow-strong: rgba(0, 0, 0, 0.22);
	--separator: " – ";
	--success: #ffffff;
	--warning: #ffffff;
	--deepprevew: rgba(0, 0, 0, 0.55);
}
:root .theme-dark {
	color-scheme: dark;
	background-color: #1a1d21;
	/* 표면 */
	--bg: #24282e;
	--page-bg: #1a1d21;
	--background: #24282e;
	--background-color: #24282e;
	--surface-alt: #2b3036;
	/* 전경 텍스트 */
	--text: #e3e6ea;
	--text-strong: #f0f2f5;
	--text-high-contrast: #f0f2f5;
	--button-text: #e3e6ea;
	/* 강조색 (밝은 파랑) */
	--accent: #4d9bff;
	--accent-hover: #6cb0ff;
	--accent-soft: rgba(77, 155, 255, 0.22);
	--link: #4d9bff;
	--focus-color: #4d9bff;
	/* 버튼/표면 */
	--button-bg: #2b3036;
	--button-bg-hover: #2f3a4a;
	/* 보더/구분선 */
	--faint-contrast: #3a4048;
	--faint-contrast-trans: #3a4048;
	--mild-contrast: #4a525c;
	--grid-contrast: #3a4048;
	/* 보조 텍스트 */
	--good-contrast: #9aa3ad;
	--comment-contrast: #9aa3ad;
	/* 옅은 면 */
	--ghost-contrast: rgba(255, 255, 255, 0.035);
	/* 그림자 */
	--shadow: rgba(0, 0, 0, 0.4);
	--shadow-strong: rgba(0, 0, 0, 0.6);
	--success: #24282eab;
	--warning: #24282eab;
}
:root .theme-dark .highlightedText,
:root .theme-dark .file-menu a:hover,
:root .file-menu .theme-dark a:hover {
	color: var(--button-text);
}
:root .theme-dark a {
	color: var(--button-text);
}
:root .theme-dark .dialog-backdrop {
	/*backdrop-filter:blur(1px);*/
  background-color:var(--deepprevew);
}
:root .theme-dark .error-msg {
	color:#b88;
	background-color:#623;
}
/*admin按鈕*/
:root .theme-dark button.toggled,
:root .theme-light button.toggled {
	color: var(--accent);
	border-color: var(--accent);
}

:root .toggled {
	background-color: var(--accent-soft);
	color: var(--accent);
}


body {
	background-size: contain;
	background-color:var(--page-bg);
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
/*body,
button,
select,
input {
font-family: poppins;
font-size:12pt;
}*/
header {
	/*按鈕欄*/
	/*background-image: -webkit-linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-image: -o-linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#1b1a19), color-stop(10%, #1b1a19), to(#1b1a19));
	background-image: linear-gradient(#1b1a19, #1b1a19 10%, #1b1a19);
	background-repeat: no-repeat;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
	-webkit-filter: none;*/
	filter: none;
	font-size: 14px;
	top: 0;
	padding: .35em;
	background-color: var(--bg);
	z-index: 3;
	border: 1px solid var(--faint-contrast);
	border-radius: 0.5em;
	position:sticky;
  box-shadow: 0 2px 8px var(--shadow);
}
kbd {
	background-color:var(--button-bg);
	border-radius:3px;
	border:1px solid var(--faint-contrast);
	color:var(--button-text);
	display:inline-block;
	font-size:.85em;
	font-weight:700;
	line-height:1;
	padding:2px 4px;
	white-space:nowrap;
	margin-right:.5em;
	box-shadow: 0 0 0px rgba(0, 0, 0, .2), 0 0 rgba(255, 255, 255, .1) inset;
}
#root {
	max-width: var(--app-max-width);
	margin: 0 auto;                    /*좌우만 가운데 (auto 면 위아래도 가운데 정렬돼 목록이 중앙에 뜸)*/
	min-height: auto !important;       /*HFS 기본 100vh 무력화*/
	height: auto !important;           /*height 로 늘리는 경우도 차단*/
	align-self: flex-start !important; /*body(flex)가 #root 를 세로로 늘리는 것 차단*/
	flex: 0 0 auto !important;          /*body 가 column flex 인 경우도 대비*/
	justify-content: flex-start !important;  /*목록을 상단(헤더 아래)에 붙임*/
	box-sizing: border-box;
	padding: 18px 14px 24px;
	display: flex;
	flex-direction: column;
	/*font-size: 14px;*/
}
#root>div {
	max-width: 100%;
	text-align: left;
	/*center會影響文件文字間距*/
	text-overflow: ellipsis;
	border-radius: 0.7em;
}
/* HFS가 목록 아래 넣는 빈 신축 스페이서(div[style="flex:1 1 0%"])
   → 박스를 화면 끝까지 늘리므로 제거 */
#root div[style*="flex"][style*="1 1 0"]:empty {
	display: none !important;
}
.list-wrapper {
	/*整個文件列表外框架*/
	max-width: 100%;
	min-height: 0 !important;   /*HFS 기본 min-height(약 840px) 무력화 → 내용 높이만큼만*/
	background-color: color-mix(in srgb, var(--bg) 90%, transparent);  /*90% 불투명 (살짝 비침)*/
	border: 1px solid var(--faint-contrast);
	border-radius: 0.7em;
	padding: 1.6em 1.8em;
	margin: 0;
	display:flex;
	flex-direction:column;
	box-shadow: 0 2px 12px var(--shadow);
}
.breadcrumb {
	padding:.2em .6em .2em;
	line-height:1.8em;
	border-radius:.3em;
	color:var(--button-text);
	/*日間home按鈕*/
	background-color: var(--button-bg);
	border: 1px solid var(--faint-contrast);
	margin: 1px 2px auto;
	margin-right:0.01em;
	/*路徑按鈕間隙*/
	display: inline-block;
	min-width: 10px;
	text-align: center;
	text-shadow: 0px 0px 2px var(--bg);
	word-break: break-word;
	transition: all 0.25s ease;
	/*backdrop-filter:blur(1px);模糊*/
	z-index: 10;
	height: 25px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 8em;
}
/*.breadcrumb:nth-child(-n+3) .icon { */
.breadcrumb:nth-child(-n+3) {
	/*home鍵 返回鍵*/
	padding:.2em;
	text-decoration: none;
	border-radius: .3em;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--faint-contrast);
	transition: all 0.25s ease;
}
.breadcrumb:hover {
	background-color: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}
ul.dir {
	/*小播放按鈕 時間日期 標簽*/
	flex: none;
	padding: 1px;
	overflow: hidden;
	margin: 0 auto 18px;        /*마지막 항목 아래 여백 = 로고 위 간격(18px)*/
	min-width: 100%;
	max-width: 100%;
	font-size: 14px;
	/*text-shadow: 0px 0px 2px var(--bg);*/;
}
ul.dir li {
	/*小圖標列表*/
	display: block;
	min-height:1.8em;
	list-style-type: none;
	padding: .2em;
	/*列表上下間距*/
	border-bottom: 0.5px solid var(--faint-contrast);
	/*下劃綫*/;
}
ul.dir li:nth-of-type(odd) {
	background-color:var(--ghost-contrast);
}
ul.dir li:hover {
	background-color: var(--button-bg-hover);
}
ul.dir li input[type=checkbox] {
	z-index: 1;
	margin-right:0.8em;
}
/* 파일별 ⋯ 메뉴(삭제·이름변경 등)를 항상 노출 — 데스크탑 hover/터치 숨김 해제 */
ul.dir li .link-wrapper .popup-menu-button {
	display: inline-block;
}
@media (hover: hover) {
	ul.dir li .link-wrapper:hover {
		padding:1em;
		margin:-1em;
	}
}
ul.dir li .link-wrapper a:last-of-type {
	/*列表顯示的文件名*/
	overflow: hidden;
	/*white-space: nowrap;*/
	text-overflow: ellipsis;
	/*以上超出則隱藏*/
	word-break:break-word;
	padding-right:.3em;
	color: var(--link);
}
ul.dir li .link-wrapper a .icon {
	margin-right:.3em;
	display:inline-block;
	text-align:center;
}
ul.dir li .link-wrapper a img.icon {
	vertical-align:bottom;
	position:relative;
	align-items:center;
	/*後加*/
	top:1px;
}
ul.dir li .link-wrapper a:hover {
	text-decoration:underline;
}
ul.dir li .entry-panel {
	float:right;
	padding-top:.3em;
	display:flex;
	align-items:center;
}
ul.dir li .entry-panel .file-menu-button {
	margin:-3px 0 -3px .4em;
}
ul.dir li .entry-panel .entry-details {
	color:var(--good-contrast);
	/*附加时间内容颜色*/
	font-size: 80%;
	margin-left: 2px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
ul.dir li .entry-panel .entry-details .entry-size-unit {
	margin-left:.3em;
}
ul.dir li>div:last-of-type {
	clear:both;
}
ul.dir li.page-separator {
	margin-top:1.25em;
	position:relative;
}
ul.dir li.page-separator:before {
	content:attr(label);
	position:absolute;
	top:-1.65em;
	font-size:smaller;
	margin-left:calc(50% - 1em);
	opacity:.9;
  animation: blink 0.8s step-start 0s infinite;
}
#paging button.toggled {
	border: 1px solid var(--good-contrast);
 border-radius: 0.4em;
animation: blink 1.6s infinite;
}
.entry-comment {
	/*小標簽*/
	font-size:10px;
	color: var(--comment-contrast);
}
.entry-comment:after {
	/*font-family:serif;*/
	line-height:1px;
	position:relative;
}
.entry-comment:before {
	content:"“";
	margin-left:.5em;
	margin-right:.1em;
	top:.2em;
}
.entry-comment:after {
	content:"”";
	top:.2em;
	margin-left:.1em;
}
#menu-bar {
	margin-bottom:.1em;/*按鈕上下行間距*/
	display:flex;
	justify-content:space-evenly;
	flex-wrap:wrap;
}
#menu-bar>* {
	flex:1;
	margin:.1em;
}
#menu-bar>*:first-child {
	margin-left:0;
}
#menu-bar>*:last-child {
	margin-right:0;
}
#menu-bar button {
	padding:min(1vh,.5em) 0;
}
#searched {
	margin:.2em;
}
#user-panel {
	display:flex;
	flex-direction:column;
	gap:1em;
}
#user-panel a>button {
	width:100%;
}
button .label {
	/*font-family:poppins;*/
	cursor:inherit;
	margin-left:.4em;
}
button .icon {
	margin: -.1em 0 auto;
}

button#user-button.toggled .icon {
	animation: blink 1.6s step-start 0s infinite;
}
button#select-button.toggled .icon {
	animation: blink 1s step-start 0s infinite;
}

.dialog-backdrop
.working {
	font-size:5em;
	animation:1s fade-in;
}
.dialog-content {
	padding:.8em /*上傳框等各種*/;
}
.dialog-alert .dialog-content {
	text-align:center;
}
.dialog-alert .dialog-content p {
	text-align:left;
	display:inline-block;
}
.dialog {
	min-width:11em;
	font-size: 80%;
	/*--color: var(--button-bg)*/
	background-color:var(--bg);
}
.dialog-icon .icon {
	margin-left:-1px;
	font-size:95%;
	margin-top:.2em;
	border-radius:.6em 0;
}
/*下頁面導航按鈕*/
#paging {
	/* align-items: left;
	overflow: auto;
	max-width: 80%;*/
	position:sticky;
	bottom:0;
	display:flex;
	gap:.1em;
	background-color: var(--bg);
	padding:0 .1em .1em;
}
#paging>button {
	z-index:1;
}
#paging button {
    box-shadow: 0 0 .3em .3em rgba(0, 0, 0, .0);
}
#paging #paging-middle {
	padding:0 .4em;
	margin:0 -.3em;
	display:flex;
	gap:.1em;
	flex:1;
	overflow-x:auto;
}
#paging #paging-middle>button {
	/*font-family: poppins;*/
	flex:1;
	padding-top:0;
	padding-bottom:0;
}
#paging button {
	background:var(--button-bg);
	text-align:center;
	white-space:nowrap;
	padding:.1em;
}
.upload-toolbar {
	position:sticky;
	top:-4px;
}
.upload-progress:before {
	content:var(--separator);
}
.entry-size:after {
	content:var(--separator);
}
.upload-progress {
	min-width:4em;
	display:inline-block;
	margin-left:.5em;
}
.upload-list {
	font-size: 12px;
	margin-top:.5em;
}
.upload-list td:nth-child(1) {
	width:0;
}
.upload-list td:nth-child(2) {
	text-align:right;
	width:0;
	white-space:nowrap;
	padding-left:.5em;
}
.upload-list td:nth-child(3) {
	padding:.2em .5em;
	word-break:break-word;
}
.nowrap {
	white-space:nowrap;
}
.dialog-login form {
	display:flex;
	flex-direction:column;
	gap:1.2em;
}
.dialog-login label {
	display:block;
	margin-bottom:.5em;
	margin-left:.1em;
}
.miss-perm {
	margin:0 .3em;
}
.popup-menu-button {
	background: none;
	border: none;
	outline: none;
	border-radius: .3em;
	font-size:.8em;
	padding:.2em .6em .3em .3em;
	position:absolute;
	opacity:.8;
	white-space:nowrap;
}
.popup-menu-button:hover {
	opacity:1;
}
.file-dialog .dialog {
	min-width:13em;
}
.file-dialog-properties {
	word-break:break-word;
	line-height:1.5em;
	margin:0;
}
.file-dialog-properties dt {
	font-weight:700;
}
.file-dialog-properties dd {
	margin-left:1.5em;
}
.file-menu {
	/*文件詳細頁面*/
	z-index: 10;
	margin-top:1em;
	padding-top:1em;
	border-top:1px solid var(--faint-contrast);
	display:flex;
	flex-direction:column;
	gap:.4em 1em;
	justify-content:space-between;
}
.file-menu a {
	z-index: 10;
	font-size: 15px;
	display:flex;
	align-items:center;
	border: 1px solid var(--faint-contrast);
  border-radius: 0.4em;
  height: 2.2em;
  min-width: 12em;
}
.file-menu a label {
	margin-top:.1em;
}
.file-menu a label small {
	display:block;
}
.file-menu a .icon {
	margin-right:.5em;
}
.unauthorized {
	text-align:center;
}
#clipBar {/*剪切欄*/
	position:sticky;
	bottom:0;
	background:var(--bg);
	display:flex;
	align-items:center;
	gap:.5em;
	z-index: 3;
	backdrop-filter: blur(2px);
}
.tiles-mode {
	/*大圖標間距*/
	max-width:none;
	--tile-size: 2;
	--name-lines: 3;
  --name-height: calc(4.8em + var(--tile-size) * 1.6em + 1em * var(--name-lines));
  --tile-width: calc(5em + 1.4em * var(--tile-size));
}
.tiles-mode ul.dir {
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(var(--tile-width),1fr));
	grid-auto-rows:calc(var(--name-height) + 1.3em);
	gap:0 2px;
	row-gap:2px;
}
.tiles-mode ul.dir li {
	text-align:center;
	position:relative;
	display:flex;
	flex-direction:column;
	/*border-bottom:1px solid #27272a;*/
	overflow-x:clip;
	padding:.1em 0 0;
	border: 1px solid var(--grid-contrast);/*縮略圖框框*/
	border-radius: 0.4em;
	justify-content: space-evenly;
}
.tiles-mode ul.dir li .link-wrapper:not(:hover) {
	max-height:var(--name-height);
	display:block;
	display:-webkit-box;
	overflow:hidden;
	-webkit-line-clamp:calc(var(--name-lines) + 1);/*文件名行數？*/
	-webkit-box-orient:vertical;
}
.tiles-mode ul.dir li .link-wrapper a:last-of-type {
	padding:0;
}
.tiles-mode ul.dir li .link-wrapper a span {
	display:block;
}
.tiles-mode ul.dir li .link-wrapper a img.icon {
	width:100%;
	height:2.9em;/*縮略圖占比*/
	object-fit: cover;
	padding:0em;/*拉滿裁切*/
}
.tiles-mode ul.dir li .link-wrapper a .icon {
	font-size:4rem;
	display:block;
	margin:auto;
}
.tiles-mode ul.dir li .link-wrapper:hover {
	overflow:visible;
	display:block;
	z-index:1;
}
.tiles-mode ul.dir li .link-wrapper:hover .icon:before {
	text-decoration:none;
}
.tiles-mode ul.dir li .link-wrapper:hover {
	padding:0;
	margin:0;
}
/*.tiles-mode ul.dir li:nth-of-type(odd):not(:hover) {
background-color:#18181b
}*/
.tiles-mode ul.dir li:hover {/*去掉縮略圖hover的背景*/
    --bg: var(--bg);
}
.tiles-mode ul.dir li .entry-panel {
	justify-content:center;
	font-size:10pt;
}
.tiles-mode ul.dir li {
	font-size:100%;
}
.tiles-mode ul.dir li.page-separator:before {
	content:"";
}
.tiles-mode ul.dir li input[type=checkbox] {
	margin:0;
	position:absolute;
	top:.3em;
	right:1em;
}
.tiles-mode ul.dir li .link-wrapper a {
	display:inline;
}
.tiles-mode ul.dir li:hover {
	/*--bg: #1717171e;*/
	background:var(--bg);
}
.tiles-mode ul.dir li:hover .link-wrapper,
.tiles-mode ul.dir li:hover .entry-panel {
	z-index:0;
	background:var(--bg);
}
.tiles-mode ul.dir li:hover input[type=checkbox] {
	z-index:3;
}
.tiles-mode ul.dir li:hover .entry-panel {
	padding-bottom:.3em;
}
.tiles-mode .entry-size:after {
	content:none;
}
.tiles-mode .entry-ts {
	display:none;
}
.tiles-mode .popup-menu-button {
	position:absolute;
	top:0;
	left:0;
}
.tiles-mode #filter-bar {
	margin-bottom:1em;
}
.tiles-mode #paging {
	z-index:1;
}
#root .file-show {
	font-size: 10px;
	/*控制預覽標題文字*/
	--nav-size: min(25vh, 25vw, 13em)/* --nav-size: min(25vh, 25vw)*/;
		backdrop-filter:blur(2px);
}
.fullWidth {
	.showing-container, .showing {
		width: 100%;
	}
}
#root .file-show .showing-container {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
backdrop-filter:blur(4px);
background-color:var(--deepprevew);
}
#root .file-show .showing {
	/*留邊縫修正max-width:calc(100% - var(--nav-size) * 0.1);*/
	z-index: 0;
	max-width:100%;
	max-height:100%;
}
#root .file-show audio.showing {
	min-width:60%;
}
#root .file-show audio.showing,
#root .file-show img.showing {
	max-width:100%;
}
#root .file-show .main {
	flex:1;
	position:relative;
	max-height:100%;
	overflow:hidden;
}
#root .file-show .freeY .main,
#root .file-show .fullWidth .main {
	overflow-y:auto;
}
#root .file-show .freeY .showing,
#root .file-show .fullWidth .showing {
	max-height:initial;
	margin:auto;
}
#root .file-show .freeY .showing-container,
#root .file-show .fullWidth .showing-container {
	overflow:auto;
	align-items:flex-start;
}
#root .file-show .fullWidth .showing-container,
#root .file-show .fullWidth .showing {
	width:100%;
}
#root .file-show .nav {
	position:absolute;
	width:1.0em;
	font-size:4em;
	/*font-size:var(--nav-size);*/
	cursor:pointer;
	opacity:0.0;
	color: rgb(80, 80, 80);
	user-select:none;
	transition:opacity .5s;
	z-index:10;
}
#root .file-show .nav:hover {
	opacity:.3;
	z-index:10;
}
#root .file-show .nav.nav-hidden {
	opacity:.00;
	z-index:10;
}
#root .file-show .bar {
	padding:.2em;
	opacity:.8;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:.2em .2em;
	backdrop-filter:blur(2px);
background-color:var(--bg);

}
#root .file-show .bar .entry-ts {
	display:inherit;
	font-size: 8px;/*控制預覽標題文字*/
}
#root .file-show .bar .entry-size:after {
	display:none;
}
.file-show-help kbd {
	margin:.5em;
}
.file-show-help kbd:first-of-type {
	margin-top:1em;
}
#root .file-show .meta-tags {
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    text-shadow: 0 0 black;
    color: var(--link);
}
button {
	/*上工具欄*/
	background-color: var(--button-bg);
	color: var(--button-text);
	padding: .5em 1em;
	text-decoration: none;
	border-radius: .4em;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid var(--faint-contrast);
	font-size: 14px;
	font-weight: 600;
	transition: all 0.15s ease;

}
button:hover {
	background-color: var(--accent-soft);
	color: var(--accent);
	border-color: var(--accent);
	outline: none;
}
button[disabled] {
	/*border: 1px solid var(--faint-contrast);*/
	color:var(--faint-contrast);
	background-color: var(--button-bg);
	border-inline: #f0f8ff00;
}
button.toggled {
	/*圖標活動顔色例如admin*/
	color: var(--accent);
	border-color: var(--accent);
}
button:focus-visible,
.breadcrumb:focus-visible {
	outline:2px solid var(--accent);
	outline-offset: 1px;
}
a {
	/*圖標文字*/
	text-decoration: none;
	color: var(--button-text);
	font-size: 14px;
	vertical-align: middle;
}
a>button {
	width:100%;
	height:100%;
}
input:focus-visible,
select:focus-visible,
ul a:focus-visible {
	border-radius:.4em;
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px var(--accent-soft);
}
@media (min-width: 1900px) {
	#player {
		position: fixed;
		top: auto;
		bottom: 2px;
		left: 2px;
		padding: .5%;
		min-width: calc((100vw - 800px) / 1.2);
		box-sizing: border-box;
		background: var(--bg);
		border-radius: 8px;
		border: 1px solid var(--faint-contrast);
		z-index: 3;
	}
}
@media (max-width: 42em) {
	.breadcrumb .icon {
		font-size: 18px;
	}
}
#player-title {
	/*color: var(--button-text);*/
	padding: .5em 1em;
	text-decoration: none;
	border-radius: .5em;
	vertical-align: middle;
	text-shadow: 0px 0px 2px var(--bg);
	font-size: 90%;
	font-weight: bold;
}
body,
input {
	color:var(--text);
}
code {
	font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
}
input:not([type=checkbox],
[type=range]),
select,
textarea {
	/*輸入框選項框内框*/
	padding:.4em .6em;
	border-radius:.4em;
	background:var(--bg);
	border:1px solid var(--mild-contrast);
	color:var(--text);
	max-width:100%;
	font-size: 14px;
	box-sizing:border-box;
	width:100%;
}
input[type=range] {
	width:calc(100% - 1px);
}
input[type=checkbox] {
	transform:scale(1.7);
	accent-color:var(--accent);
}
textarea {
	font-size:14pt;
}
label input[type=checkbox] {
	margin-right:.8em;
}
select {
	text-align:center;
}
.hidden {
	display:none!important;
}
[class^=fa-]:before,
[class*=" fa-"]:before {
	margin:0;
}
.icon {
	font-size:1.2em;
	height:1.4em;/*1.2圖標壓迫名字*/
	width:1.4em;
	display:inline-block;
	text-align:center;
}


#thumbnailsPreview {/*去掉右下角預覽*/
    position: fixed;
    bottom: 0;
    right: 0;
    height: 0px;
    width: 0px;
}

img.file-icon {
	height:1em;
}
.file-icon {
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	vertical-align:text-bottom;
}
.icon
.mirror:before {
	transform:scaleX(-1);
}


.icon-button,
ul.dir li .entry-panel .file-menu-button {
	/*文件菜單小按鈕*/
	padding:.3em;
	margin-left:.1em;
	height: fit-content;
	vertical-align:middle;
}
button.small {
	padding: .5em;
	height: 30px;
}
.error-msg {
	background-color:#faa;
	color:#833;
	padding:.5em 1em;
}
.hide-back,
.upload-toolbar,
header {
	background-color:var(--bg);
}
@keyframes blink {
	0% {
		opacity:1;
	}
	50% {
		opacity:.5;
	}
}
@keyframes spin {
	to {
		transform:rotate(360deg);
	}
}
@keyframes fade-in {
	0% {
		opacity:0.4;
	}
	to {
		opacity:1;
	}
}

.spinner,.icon.spinner:before {
	animation:1.5s spin infinite linear;
	display:inline-flex;
	justify-content:center;
	align-items:center;
}
#folder-stats,
#filter-bar>span {
	font-size:80%;
	padding: .1em;
}
#folder-stats {
	margin-left:.5em;
	line-height:2em;
	float:right;
}
#folder-stats .icon {
	margin-right:.3em;
}
#filter {
	flex:1;
	box-sizing:border-box;
}
#filter-bar {
	display:flex;
	align-items:center;
	gap:.8em;
	margin:.2em 0 0;
	padding:2px 0 1px 3px;
	height:1.8em;
}
#filter-bar input[type=checkbox] {
	margin-top:.3em;
}
#filter-bar span:empty {
	display:none;
}
:root .theme-dark #root .dialog-backdrop {
    background: var(--deepprevew);
}
.dialog-backdrop {
	position:fixed;
	inset:0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display:flex;
	justify-content:center;
	align-items:center;
	z-index:1000;
}
.dialog {
	padding:max(.5em,1vw,2vh);
	padding-top:0;
	border: 1px solid var(--faint-contrast);
	border-radius:0.75em;
	position:relative;
	margin:0 3vw;
	overflow:hidden;
	max-height:calc(100vh - 2em);
	display:flex;
	flex-direction:column;
	justify-content:center;
	overflow: visible;
	font-size: 90%;
	z-index:10;
	box-shadow: 0 8px 32px var(--shadow-strong);
}
.dialog-icon {
	color:var(--button-text);
	background-color:var(--color);
	position:absolute;
	top:0px;
	width:2em;
	height:1.8em;
	text-align:center;
	border-radius:.65em 0 .5em 0;
}
.dialog-alert-info .dialog-icon,
.dialog-alert-warning .dialog-icon,
.dialog-alert-error .dialog-icon {
	color: #fff;
}
.dialog-icon-text {
	display:flex;
	align-items:center;
	justify-content:center;
}
.dialog-title {
	font-size:105%;
	font-weight:700;
	color:var(--text-strong);
	margin:0 0 .2em;
	padding:.6em .6em .55em;
	min-height:1.2em;
	border-bottom:1px solid var(--faint-contrast);
}
.dialog-closer~
.dialog-title {
	margin-right:2em;
}
.dialog-type~
.dialog-title {
	margin-left:2em;
}
.dialog-icon~
.dialog-title {
	text-align:center;
}
.dialog-closer {
	border: none;
	border-radius:0 .7em 0 .4em;
	right:0;
	padding:0;
	width:2em;
	height:1.9em;
	font-size:95%;
	background-color: var(--surface-alt);
	color: var(--good-contrast);
	transition: all 0.15s ease;
}
.dialog-closer:hover {
	background-color: rgba(211, 47, 47, 0.92);
	color: #fff;
}
.dialog-icon~
.dialog-content {
	margin-top:1em;
}
.dialog-type {
	left:0;
	top:0;
	overflow:hidden;
	opacity:.7;
}
.dialog-content {
	overflow:auto;
	max-height:calc(100vh - 4.5em);
}
.dialog-content p {
	white-space:pre-wrap;
	margin:.5em 0;
}
.dialog-confirm .dialog-content button {
	margin-top:1em;
}
.dialog-alert-info {
	--color: var(--accent);
}
.dialog-alert-warning {
	--color: #c8911e;
}
.dialog-alert-error {
	--color: #d33;
}
input[type=checkbox]:focus {
	outline: 1px dotted var(--accent);
	outline-offset: -2px;
}
input[type=checkbox]:checked {
	color: var(--accent);
	outline: 1px dotted var(--accent);
	outline-offset: -2px;
}


.file-dialog-properties {
	word-break: break-word;
	line-height: 1.5em;
	margin: 0;
	font-size: 14px;
}
/*播放器内標題*/
@supports (width: min(1px,2px)) {
	#root .file-show {
		--nav-size: min(25vh, 25vw, 13em);
		font-size: 12px;
/*color: var(--mild-contrast);		fixtemp*/
		
	}

}
/*
#preview-content {
background: #18181b;
border: 19px solid #27272a;
padding: 2em 2em;
border-radius: 0.5em;
}*/

.toasts {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /*padding: 0.3em;*/
  gap: 0.3em;
  z-index: 1001;
  max-width: 100%; /* 确保容器不超过视口宽度 */
}

.toast {
  background-color: var(--bg);
  color: var(--button-text);
  transition: all 0.2s ease-in;
  display: flex;
  align-items: center;
  padding: 0.6em;
  border: 1px solid var(--button-text);
  border-radius: 0.4em;
  box-shadow: 0 0 0.3em rgba(136, 136, 136, 0);
  backdrop-filter: blur(2px);
  font-size: 90%;
  transform: translateX(0);
  /* 新增：防止内容过长溢出 */
  max-width: 350px; /* 限制最大宽度（可调整） */
  width: auto;      /* 自动宽度，但不超过 max-width */
  word-break: break-word; /* 长单词或URL强制换行 */
  overflow-wrap: break-word; /* 更智能的换行处理 */
}

.toast.before {
  transform: translateX(100%);
}

.toast.after {
  height: 0;
  padding: 0;
  margin-top: -0.6em;
  opacity: 0;
  transition: all 0.2s ease-in;
}

body  {
  background:
    radial-gradient(circle at 1px 1px, var(--ghost-contrast) 1px, transparent 1px),
    var(--page-bg);
  background-size: 8px 8px;
}


* {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

/* ──────────────────────────────────────────────
   Everything 스타일 로고 헤더 (frontend_js 로 beforeHeader 주입)
─────────────────────────────────────────────── */
.ev-logo-header {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 12px 14px;
	text-align: center;
}
.ev-controls {
	position: absolute;
	top: 8px;
	right: 6px;
	display: flex;
	gap: 6px;
}
.ev-icon-btn {
	width: 34px;
	height: 34px;
	min-width: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	padding: 0;
	background: var(--bg);
	border: 1px solid var(--faint-contrast);
	border-radius: 8px;
	color: var(--text);
	cursor: pointer;
	transition: all 0.15s ease;
}
.ev-icon-btn:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}
.ev-logo {
	width: 64px;
	height: 64px;
	background: var(--accent);
	color: #fff;
	font-size: 36px;
	font-weight: bold;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px var(--shadow);
}
.ev-title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--text-strong);
	line-height: 1.2;
}
.ev-subtitle {
	margin: 0;
	font-size: 14px;
	color: var(--good-contrast);
}
@media (max-width: 640px) {
	.ev-logo-header { padding: 12px 10px 10px; }
	.ev-logo { width: 52px; height: 52px; font-size: 30px; border-radius: 14px; }
	.ev-title { font-size: 23px; }
}

/* ──────────────────────────────────────────────
   유형 아이콘을 Everything 방식 emoji 로 교체
   - logo.js 가 파일명을 읽어 data-ev-icon 속성에 emoji 를 넣어줌
   - 여기서는 원본 폰트 글리프를 숨기고 그 emoji 를 렌더
   - 이미지/영상 썸네일(img.icon)과 필터 아이콘(#filter-bar)은 영향 없음
─────────────────────────────────────────────── */
ul.dir li .icon.font-icon[data-ev-icon] {
	font-size: 0 !important;           /* 원본 글리프(텍스트) 숨김 */
	color: transparent !important;
	background: none !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	margin-right: .5rem !important;    /* 이름과 간격 (em 은 font-size:0 때문에 0이 되므로 rem) */
}
ul.dir li .icon.font-icon[data-ev-icon]::before {
	content: attr(data-ev-icon) !important;   /* logo.js 가 넣은 emoji */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
	font-weight: normal !important;
	font-size: 1.15rem !important;
	line-height: 1.4rem;
	color: initial !important;
	display: inline-block;
}

/* ──────────────────────────────────────────────
   NEW 표시: 기존 new.png 이미지를 빨간 점으로 치환 (이름 바로 뒤)
─────────────────────────────────────────────── */
ul.dir li a:has(> img[src*="new.png"]) {
	font-size: 0;            /* 뒤따르는   등 텍스트 숨김 */
	vertical-align: middle !important;
	margin-left: 9px;        /* em 은 font-size:0 때문에 0이 되므로 px 사용 */
}
ul.dir li a:has(> img[src*="new.png"]) img {
	display: none;           /* 원본 NEW 이미지 숨김 */
}
ul.dir li a:has(> img[src*="new.png"])::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e53935;     /* 빨간색 */
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.18);
	vertical-align: middle;
}