/* 전체 창 스타일 */
.skin-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 95vw;
  height: 520px;
  max-height: 90vh;
  border: 1px solid var(--skin-text-color-t);
  background: var(--skin-base-color);
  box-shadow: 0px 0px 18px 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'freesentation5';
}

/* 상단 타이틀바 */
.skin-titlebar {
	background: var(--skin-point-color);
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	border-bottom: 1px solid var(--skin-text-color);
}

/* 버튼 */
.skin-btns {
	display: flex;
	gap: 6px;
}

.skin-btn {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--skin-point-color);
	border: 1px solid var(--skin-text-color);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	color: var(--skin-text-color);
	transition: background 0.2s;
}

.skin-btn:hover {
  width: 50px;
	background: var(--skin-point-color-d);
}
.skin-btn-text { 
  display: none;
  margin-left: 5px;
}
.skin-btn:hover .skin-btn-text {
  display: flex;
}

/* 내부 iframe 영역 */
.skin-window-inner {
	flex: 1;
	background: var(--skin-base-color);
}

.skin-window-inner iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* 스크롤바 스타일 */
.skin-window ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.skin-window ::-webkit-scrollbar-track {
	background: var(--skin-base-color);
}
.skin-window ::-webkit-scrollbar-thumb {
	background: var(--skin-point-color);
	border-radius: 4px;
  border: 2px solid var(--skin-text-color);
}
.skin-window ::-webkit-scrollbar-thumb:hover {
	background: var(--skin-point-color-d);
}

/* 레트로윈도우UI 테마 */

.skin-window.window-ui {
	border-color: var(--skin-text-color);
	background: var(--skin-base-color);
	box-shadow: 4px 4px 0 var(--skin-text-color);
	color: var(--skin-text-color);
}

.skin-window.window-ui ::-webkit-scrollbar-track {
	background: var(--skin-base-color);
}

.skin-window.window-ui ::-webkit-scrollbar-thumb {
	background: var(--skin-point-color);
	border-color: var(--skin-text-color);
}

.skin-window.window-ui ::-webkit-scrollbar-thumb:hover {
	background: var(--skin-point-color-d);
}

.skin-btn.window-ui {
	border-color: var(--skin-text-color);
	background: var(--skin-point-color);
	color: var(--skin-text-color);
	box-shadow: 2px 2px 0 var(--skin-text-color);
}

.skin-btn.window-ui:hover {
	background: var(--skin-point-color-d);
	box-shadow: 1px 1px 0 var(--skin-text-color);
}

.skin-btn.window-ui:active {
	background: var(--skin-point-color-d);
	box-shadow: inset 2px 2px 2px var(--skin-text-color);
}