.desktop {
  background-color: #3D5F0D;
}
.taskbar {
	outline: 1px solid var(--ButtonLight);
	border-top: 1px solid var(--ButtonHilight);
	background: var(--ButtonFace);
	color: var(--ButtonText);
	--button-normal-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E") 64 / 2px;
	--ButtonShadow: rgb(128, 128, 128);

}
.taskbar-divider {
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
}
.taskbar-time {
	font-family: "PFStardust";
	font-size: 12px;
}
.start-menu-titlebar {
/*	background-image: url("images/start-menu-side.png");*/
	background-repeat: no-repeat;
	background-position: bottom left;
/*	background-color: #000080;*/
}
.start-menu li a,
.start-menu .back-link {
	display: block;
	padding: 5px 0;
	color: blue !important; /* regardless of :visited */
}
.start-menu li a:before,
.start-menu .back-link:before,
.the-thing-heading:before {
	content: "»";
	text-decoration: none;
	display: inline-block;
	margin-right: 5px;
}
.start-menu .back-link:before {
	content: "«"
}
.the-thing-heading {
	/* font-size: 1em; */
}
.windows-cant-do-it-you-can {
	margin-top: 2em;
	/* background: white;
	padding: 5px;
	border: inset 1px; */
}
.task.selected {
	font-weight: bold;
	border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E") 64 / 2px !important;
}
.desktop-icon .title {
	margin-top: 5px;
        font-family: "argent-pixel-cf";
	font-size: 10px;
	background: var(--Background);
	color: white;
	position: relative;
}
.folder-view.focused .desktop-icon.selected .title {
	background: var(--Hilight);
	color: var(--HilightText);
}
.folder-view.focused .desktop-icon.focused .title::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
}
.desktop-icon .selection-effect {
	display: none;
}
.folder-view.focused .desktop-icon.selected .selection-effect {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	filter: drop-shadow(32px 0 0 var(--Hilight));
	transform: translateX(-32px);
	clip-path: polygon(100% 0, 200% 0, 200% 100%, 100% 100%);
	opacity: 0.5;
}
.desktop-icon.shortcut .icon-wrapper {
	position: relative;
}
.desktop-icon.shortcut .icon-wrapper:after {
/*	content: url("images/icons/Documents-32x32.png"); */
	position: absolute;
	left: 0;
	vertical-align: bottom;
}
.folder-view .marquee {
	border: 1px dotted #ffffff;
	mix-blend-mode: exclusion;
	/* TODO: fallback for browsers that don't support mix-blend-mode (something like #FF7F7F)... Edge doesn't support @supports either :/ */
	z-index: 1;
}

.help-window .item {
	font-family: 'argent-pixel-cf';
	font-size: 12px;
	padding: 0 2px;
	position: relative; /* for ::after */
}
.help-window .item:hover {
	text-decoration: underline;
	color: #0000FF;
	cursor: pointer;
}
.help-window li:before {
	background-image: url("../../images/help-icons.png");
}
.help-window:not(.focused) .item.selected {
	background-color: var(--ButtonFace);
	color: var(--ButtonText); /* ?? */
}
.help-window.focused .item.selected {
	background-color: var(--Hilight);
	color: var(--HilightText);
	/* @TODO: separate focus state of the item */
	outline: 1px dotted black;
	outline-offset: -1px;
}

/* ── Audio Player 스타일 ── */
.audio-info .current-time,
.audio-info .total-time {
  font-size: 12px;    /* 재생 시간 부분: 기존 크기 */
  font-family: argent-pixel-cf;
  white-space: nowrap;
}

.audio-info .file-name {
  font-size: 14px;    /* 파일명만 더 크게 설정 */
  font-family: argent-pixel-cf;
  font-weight: bold; 
}

.seek-bar, .vol-bar {
  -webkit-appearance: none;
  appearance: none;
  background: #EBF9D3;          /* 바탕 트랙 색 */
  height: 10px;                 /* 트랙 높이 */
  margin: 6px 0;                /* 위아래 여백 */
}

.seek-bar {
  width: 90%;                   /* 플레이바 길이 */
}

.vol-bar {
  width: 60px;                  /* 볼륨바 길이 */
}

/* 트랙(슬라이더 러너블) 스타일 */
.seek-bar::-webkit-slider-runnable-track,
.vol-bar::-webkit-slider-runnable-track {
  background: #679722;
  height: 3px;
}

.seek-bar::-moz-range-track,
.vol-bar::-moz-range-track {
  background: #679722;
  height: 3px;
}

/* 썸(조절 노브) 스타일 */
.seek-bar::-webkit-slider-thumb,
.vol-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: #3D5F0D;
  border-radius: 50%;
  margin-top: -2px; /* 트랙 중앙 정렬 */
  cursor: pointer;
}

.seek-bar::-moz-range-thumb,
.vol-bar::-moz-range-thumb {
  width: 8px;
  height: 8px;
  background: #3D5F0D;
  border-radius: 50%; 
  cursor: pointer;
}

.window-button {
	background-color: #679722 !important;
	color: #679722 !important;
	outline: 1px solid #EBF9D3 !important;
	border-radius: 1px;
	border-image: var(--button-normal-border-image) !important;
	border: 2px;
}

.os-window:not(.focused) .window-button {
        background-color: rgb(181, 181, 181) !important;
        color: rgb(181, 181, 181) !important;
        outline: 1px solid #EBF9D3 !important;
        border-radius: 1px;
}

/* @TODO: separate focus state of the item; while mouse down, the main highlight does not move with the arrow keys but this does, among other differences */
/* .help-window.focused .item.selected::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 1px dotted white;
	mix-blend-mode: difference;
} */

* {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}