:root {
  --desktop-bg: #008080;
  --desktop-icon-text: #ffffff;
  --text-color: #222222;
  --text-color-input:#222222;
  --window-bg: #c0c0c0;
  --window-bg-yw: #ebe9c6;
  --window-border-light: #ffffff;
  --window-border-shadow: #808080;
  --window-border-dark: #222222;
  --title-active-start: #0a246a;
  --title-active-end: #a6caf0;
  --title-inactive-start: #808080;
  --title-inactive-end: #b5b5b5;
  --title-text-color: #ffffff;
  --taskbar-bg: #c0c0c0;
  --taskbar-border-light: #ffffff;
  --taskbar-border-shadow: #808080;
  --taskbar-border-dark: #000000;
  --taskbar-height: 4rem;
  --button-face: #c0c0c0;
  --button-highlight: #ffffff;
  --button-lowlight: #e0e0e0;
  --button-shadow: #808080;
  --button-dark-shadow: #555555;
  --button-text: #222222;
  --menu-bg: #c0c0c0;
  --menu-border-light: #ffffff;
  --menu-border-dark: #808080;
  --menu-hover-bg: #0a246a;
  --menu-hover-text: #ffffff;
  --accent-color: #0a246a;
  --content-bg: #ffffff;
  --field-bg: #ffffff;
  --window-frame: #0a0a0a;
  --start-side-bg: #1151ff;
  
  /* Borders */
  --border-width: 1rem;
  --border-raised-outer: inset -0.1rem -0.1rem var(--window-frame),
    inset 0.1rem 0.1rem var(--button-highlight);
  --border-raised-inner: inset -0.2rem -0.2rem var(--button-shadow),
    inset 0.2rem 0.2rem var(--button-lowlight);
  --border-sunken-outer: inset -0.1rem -0.1rem var(--button-highlight),
    inset 0.1rem 0.1rem var(--window-frame);
  --border-sunken-inner: inset -0.2rem -0.2rem var(--button-face),
    inset 0.2rem 0.2rem var(--button-shadow);
  --default-button-border-raised-outer: inset -0.2rem -0.2rem var(--window-frame), inset 0.1rem 0.1rem var(--window-frame);
  --default-button-border-raised-inner: inset 0.2rem 0.2rem var(--button-highlight), inset -0.3rem -0.3rem var(--button-shadow), inset 0.3rem 0.3rem var(--button-face);
  --default-button-border-sunken-outer: inset 0.2rem 0.2rem var(--window-frame), inset -0.1rem -0.1rem var(--window-frame);
  --default-button-border-sunken-inner: inset -0.2rem -0.2rem var(--button-highlight), inset 0.3rem 0.3rem var(--button-shadow), inset -0.3rem -0.3rem var(--button-face);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -0.1rem -0.1rem var(--button-highlight),
    inset 0.1rem 0.1rem var(--button-shadow), inset -0.2rem -0.2rem var(--button-face),
    inset 0.2rem 0.2rem var(--window-frame);
  --border-status-field: inset -0.1rem -0.1rem var(--button-face), inset 0.1rem 0.1rem var(--button-shadow), inset -0.2rem -0.2rem var(--button-highlight), inset 0.2rem 0.2rem var(--button-face);
  --border-toolbars: inset 0.1rem 0.1rem var(--button-shadow), 0.1rem 0.1rem var(--button-highlight), inset -0.1rem -0.1rem var(--button-shadow), inset 0.2rem 0.2rem var(--button-highlight);
  --border-toolbars-raised: inset 0.1rem 0.1rem var(--button-highlight), inset -0.1rem -0.1rem var(--button-shadow);
  --border-toolbars-sunken: inset -0.1rem -0.1rem var(--button-highlight), inset 0.1rem 0.1rem var(--button-shadow);

  /*뮤직 플레이어 버튼*/
  --music-player-btn-raised: inset 0.1rem 0.4rem var(--button-highlight), inset -0.1rem -0.4rem var(--button-shadow);
  --music-player-btn-sunken: inset -0.1rem -0.2rem var(--button-face), inset 0.1rem 0.5rem var(--button-dark-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -0.1rem -0.1rem var(--window-frame),
    inset 0.1rem 0.1rem var(--button-face);
  --border-window-inner: inset -0.2rem -0.2rem var(--button-shadow),
    inset 0.2rem 0.2rem var(--button-highlight);
};

@import url('https://cdn.jsdelivr.net/npm/galmuri/dist/galmuri.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
    font-family: 'YoonChoWooSan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaManSeh.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PerpetualSnow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-2@1.0/PermanentSnow.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,900&display=swap');

@font-face {
    font-family: 'Rimgul';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-4@1.1/Limgul12.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Rimgul', 'Segoe UI', -apple-system, BlinkMacSystemFont,
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.4rem;
  touch-action: pan-x pan-y;
}
li {
  list-style-type: none;
}

*::selection {
  color: var(--title-text-color);
  background-color: var(--menu-hover-bg);
}

html,
body {
  background-color: #d4cbbc;
  font-size: 62.5%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  pointer-events: auto;
}

body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  background: linear-gradient(135deg, #e2dacd, #a79a85);
  color: var(--text-color);
}

.pc-user {
  position: absolute;
  bottom: 4rem;
  left: 2%;
  font-size: 1.6rem;
  color: transparent;
  background-image: url(/images/mylogo3.svg);
  background-repeat: no-repeat;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto,
    'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR',
    'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    sans-serif !important;
  font-weight: 900;
}

.pc-postit {
  position: absolute;
  bottom: -3rem;
  left: 30%;
  width: 29rem;
  height: 10rem;
  padding: 2.3rem 2rem;
  transform: rotate(5deg);
  background: linear-gradient(0deg, #e2e46c 40%, #f0f078 45%);
  font-family: 'PerpetualSnow';
  font-size: 1.6rem;
  color: #222;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
  touch-action:none!important;
}

/* 종료 상태에서만 전체 비활성화 */
body.is-shutdown { pointer-events: none; }

/* 종료 상태에서도 전원 버튼만은 살려두기 */
body.is-shutdown .power-btn { pointer-events: auto; }

body.is-shutdown .power {
  background-image: radial-gradient(circle farthest-corner at 50% 100%, #222,#222), linear-gradient(315deg, #e2dacd, #5f5546)!important;
}

.power {
  width: 1rem;
  height: 1rem;
  position: relative;
  bottom: 3.4rem;
  right: 3rem;
  z-index: 9999;
  background: #6dff33;
  border: 0.2rem solid transparent;
  border-radius: 1em;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, #e7ffd9,#6dff33), linear-gradient(315deg, #e2dacd, #5f5546);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.power-btn {
  width: 5rem;
  height: 5rem;
  position: absolute;
  bottom: 2.5rem;
  right: 2%;
  z-index: 9999;
  border: 0.1rem solid #35312d;
  border-radius: 0.5em;
  background: linear-gradient(315deg, #c4baaa, #a79a85, #978a75);
  box-shadow: inset 0rem 0rem 1rem rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.power-btn img {
  pointer-events: none;
}

.power-btn:active,
.power-btn.is-pressed {
  background: linear-gradient(315deg, #c4baaa, #746958, #474033), radial-gradient(circle at 50%, #a7957c 50%, #35312d 100%);
  box-shadow: inset 1rem 1rem 1rem rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar {
  width: 18px;
}
::-webkit-scrollbar:horizontal {
  height: 18px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-image: url("/images/scrollbar-background.svg");
  background-size: 3px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--button-shadow);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  height: 19px;
  background-image: url("/images/button-up.svg");
  background-size: 18px;
}
::-webkit-scrollbar-button:vertical:end {
  height: 19px;
  background-image: url("/images/button-down.svg");
  background-size: 18px;
}
::-webkit-scrollbar-button:horizontal:start {
  width: 19px;
  background-image: url("/images/button-left.svg");
  background-size: 18px;
}
::-webkit-scrollbar-button:horizontal:end {
  width: 19px;
  background-image: url("/images/button-right.svg");
  background-size: 18px;
}

::-webkit-scrollbar-button:vertical:start:active {
  background-image: url("/images/button-up-active.svg");
}

::-webkit-scrollbar-button:vertical:end:active {
  background-image: url("/images/button-down-active.svg");
}

::-webkit-scrollbar-button:vertical:start:hover {
  cursor: pointer;
}

::-webkit-scrollbar-button:vertical:end:hover {
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
}


.no-select {
  user-select: none;
  -webkit-user-drag: none;
}

.allow-select {
  user-select: text;
}

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

/**screen bezel**/
.bezel {
  border: 2rem solid transparent;
  border-radius: 3rem;
  background-image: linear-gradient(#fff, #fff), linear-gradient(315deg, #d8d1c7, #8b8270);
  background-origin: border-box;
  background-clip: content-box, border-box;
  height: 90%;
  max-height: calc(100% - 10rem);
  position: fixed;
  top: 2%;
  left: 2%;
  width: 96%;
  z-index: 999;
  touch-action:none;
  -webkit-overflow-scrolling:none;
  overflow:hidden;
  overscroll-behavior:none;
}

.bezel-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0.5rem solid #000;
  border-radius: 0.9rem;
  background: #000;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 1);
  overflow: hidden;
}

.monitor-area {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#desktop {
  position: relative;
  width: 100%;
  height: calc(100% - var(--taskbar-height));
  background: var(--desktop-bg);
}

.desktop-icons {
  width: 100%;
  height: 100%;
  position: relative; /* 자식 아이콘들의 기준점 */
  display: block;     /* Grid 제거 */
  overflow: hidden;   /* 아이콘이 화면 밖으로 나가는 것 방지 */
}

.desktop-icon {
  position: absolute; /* 절대 위치 사용 */
  width: 64px;      /* 그리드 칸 너비와 맞춤 */
  height: 86px;     /* 그리드 칸 높이와 맞춤 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 상단 정렬 */
  padding-top: 1rem;
  color: var(--desktop-icon-text);
  text-align: center;
  cursor: pointer;
  gap: 0.5rem;
}

.desktop-icon .icon-image {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.desktop-icon .icon-label {
  font-size: 1.4rem;
  line-height: 1.6rem;
}

.folder-content .desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color);
  text-align: center;
  cursor: pointer;
  gap: 0.5rem;
}

.folder-content .desktop-icon .icon-image {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
}

.folder-content .desktop-icon .icon-label {
  font-size: 1.4rem;
  line-height: 1.4rem;
}

button:focus {
  outline: 0.1rem dotted var(--text-color);
  outline-offset: -0.4rem;
}

.desktop-icons.draggable-enabled {
  position: relative;
  display: block;
  height: 100%;
}

.desktop-icons.draggable-enabled .desktop-icon {
  position: absolute;
  width: 6.8rem;
  cursor: grab;
  user-select: none;
}

.desktop-icons.draggable-enabled .desktop-icon.is-dragging {
  cursor: grabbing;
}

.desktop-icon.is-active .icon-image {
  /* 1. 배경색 다시 활성화 (파란색) */
  background-color: var(--menu-hover-bg) !important;
  
  /* 2. 아이콘 이미지 모양대로 배경 잘라내기 (Mask) */
  -webkit-mask-image: var(--active-icon-url);
  mask-image: var(--active-icon-url);
  
  /* 3. 마스크 위치 및 크기 설정 (이미지와 동일하게 맞춤) */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.desktop-icon.is-active .icon-image img {
  opacity: 0.5; 

} 


.desktop-icon.is-active .icon-label {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  padding: 0;
  text-shadow: none;
  border: var(--title-text-color) dotted 0.1rem;
}

#taskbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--taskbar-height);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  background: var(--taskbar-bg);
  border-top: 0.2rem solid var(--taskbar-border-light);
  color: var(--text-color);
}

#start-button {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 6rem;
  height: calc(var(--taskbar-height) - 0.6rem);
  padding: 0 1.6rem;
  border: 0;
  border-radius: 0;
  background: var(--button-face);
  color: var(--button-text);
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  cursor: pointer;
  white-space: nowrap;
}

.min-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

#start-button.active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  outline: 0.1rem dotted var(--text-color);
  outline-offset: -0.5rem;
}

#task-buttons {
  display: flex;
  gap: 0.4rem;
  height: 100%;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

.task-button {
  text-align: left;
  min-width: 3.5rem;
  width: 18rem;
  height: 100%;
  padding: 0 1rem;
  gap: 0.6rem;
  border: 0;
  background: var(--menu-bg);
  color: var(--text-color);
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.task-button-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.task-button.inactive {
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  color: var(--text-color);
  background: var(--button-face);
}

body[data-theme='dark'] .task-button.inactive {
  background: var(--button-face);
}

.task-button:focus-visible {
  outline: 0.2rem dotted #000000;
  outline-offset: 0.2rem;
}

#clock {
  min-width: fit-content;
  height: 100%;
  text-align: right;
  line-height: 3rem;
  margin: 0 1rem;
}

.taskbar-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 1rem;
  box-shadow: var(--border-field);
}

.copyright {
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  mix-blend-mode: overlay;
  bottom: calc(var(--taskbar-height) + 0.8rem);
  right: 0.6rem;
  font-size: 1.4rem;
}

.window {
  position: absolute;
  width: 44rem;
  min-width: 26rem;
  min-height: 22rem;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background: var(--window-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-color);
  padding: 0.4rem;
}

.window-ghost {
  position: absolute;
  border: 0.25rem dotted #ffffff; 
  mix-blend-mode: difference;
  box-shadow: none;
  background: transparent;
  z-index: 999999;
  pointer-events: none;
  box-sizing: border-box;
}

.window.maximized {
  width: 100%;
  height: 100%;
  top: 0 !important;
  left: 0 !important;
}

.window.minimized {
  display: none;
}

.window.no-resize .window-resizer {
  display: none;
}

.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.4rem;
  padding: 0 0.2rem 0 0.5rem;
  color: var(--title-text-color);
  background: linear-gradient(to right, var(--title-inactive-start), var(--title-inactive-end));
  user-select: none;
  cursor: move;
  touch-action: none;
  
}

.window.active .title-bar {
  background: linear-gradient(to right, var(--title-active-start), var(--title-active-end));
}

.title {
  display: inline-flex;
  gap: 0.5rem;
}

/* Title bar control buttons rendered with SVG icons */
.title-controls {
  display: inline-flex;
  gap: 0;
}

.title-icon {
    display: flex;
    align-items: center;
}

.title-controls button {
  width: 18px;
  height: 1.6rem;
  border: 0;
  background: var(--button-face);
  color: var(--button-text);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.title-controls button img {
  object-fit: contain;
  pointer-events: none;
}

.title-controls button img[hidden] {
  display: none;
}

.btn-close {
  margin-left: 0.2rem;
}

.title-controls button:active {
  box-shadow: inset -0.1rem -0.1rem 0 var(--button-highlight), inset 0.1rem 0.1rem 0 var(--button-shadow);
}

.title-controls button:focus-visible {
  outline: 0.1rem dotted #ffffff;
  outline-offset: 0.1rem;
}

.window-menu {
  display: flex;
  padding: 0;
  font-size: 1.4rem;
  word-break: auto-phrase;
  box-shadow: var(--border-toolbars);
  margin-top: -0.1rem;
  word-break: keep-all;
}

.window-menu span {
  padding: 0.4rem 0.4rem;
  border-radius: 0.2rem;
}

.window-menu span:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

.window-content {
  flex: 1;
  background: var(--window-bg);
  color: inherit;
  /**padding: 1.6rem;**/
  overflow: auto;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /**gap: 1.2rem;**/
}

.window-content form {
  display: grid;
  gap: 0;
}

.window-content input,
.window-content textarea,
.window-content button {
  font-family: inherit;
  padding: 0.3rem 0.4rem;
  color: var(--text-color-input);
  box-shadow: var(--border-field);
  border: 0;
}

.window-content textarea {
  resize: vertical;
}

.window-content button {
  cursor: pointer;
  background: var(--button-face);
  color: var(--button-text);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border: 0.1rem solid var(--button-dark-shadow);
  width: 7rem;
  /*height: 2.5rem;*/
  margin-top: 1.4rem;
}

.window-content button:active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
}

.status-bar {
  background: var(--window-bg);
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 0.1rem;
}
.status-bar-field {
  box-shadow: var(--border-status-field);
  padding: 0.2rem;
  width: 100%;
}

.window-resizer {
  position: absolute;
  background: transparent;
}

.window-resizer.top,
.window-resizer.bottom {
  height: 0.6rem;
  left: 0;
  right: 0;
  cursor: ns-resize;
}

.window-resizer.left,
.window-resizer.right {
  width: 0.6rem;
  top: 0;
  bottom: 0;
  cursor: ew-resize;
}

.window-resizer.top {
  top: -0.3rem;
}

.window-resizer.bottom {
  bottom: -0.3rem;
}

.window-resizer.left {
  left: -0.3rem;
}

.window-resizer.right {
  right: -0.3rem;
}

.window-resizer.corner {
  width: 1.2rem;
  height: 1.2rem;
}

.window-resizer.top-left {
  top: -0.6rem;
  left: -0.6rem;
  cursor: nwse-resize;
}

.window-resizer.top-right {
  top: -0.6rem;
  right: -0.6rem;
  cursor: nesw-resize;
}

.window-resizer.bottom-left {
  bottom: -0.6rem;
  left: -0.6rem;
  cursor: nesw-resize;
}

.window-resizer.bottom-right {
  bottom: -0.6rem;
  right: -0.6rem;
  cursor: nwse-resize;
}

.start-menu {
  position: fixed;
  bottom: var(--taskbar-height);
  width: 21rem;
  background: var(--window-bg);
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  z-index: 1000;
  padding: 0.2rem;
}

.start-menu.hidden {
  display: none;
}

@keyframes menu-expand {
  0% {
    /* 기존의 width, height 조절 방식 대신 scale 사용 */
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.context-menu {
  transform-origin: top left;
  z-index: 999;
}

.context-menu:not(.hidden) {
  animation: menu-expand 0.2s forwards;
}

.context-menu {
  position: fixed;
  min-width: 16rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  background: var(--window-bg);
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  white-space: nowrap;
  overflow: hidden;
}

.context-menu.hidden {
  display: none;
}

.context-menu button {
  border: none;
  background: transparent;
  color: var(--text-color);
  text-align: left;
  padding: 0.4rem 1rem;
  font-size: 1.4rem;
  cursor: default;
}

.context-menu button:not([disabled]):hover,
.context-menu button:not([disabled]):focus-visible {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  outline: none;
}

.context-menu button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-theme='dark'] .context-menu button[disabled] {
  color: rgba(255, 255, 255, 0.65);
}

.start-menu-inner {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  min-height: 26rem;
}

.start-menu-sidebar {
  background: linear-gradient(180deg, var(--title-active-start) 70%, var(--start-side-bg) 100%);
  color: #ffffff;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  padding: 0.1rem 0.8rem;
}

.sidebar-title {
  transform: rotate(-90deg);
  font-size: 1.6rem;
  text-wrap: nowrap;
  font-family: 'Inter'!important;
  font-weight: 900;
  line-height: 1.8rem;
}

.start-menu-content {
  padding: 0 0.2rem;
  display: flex;
  flex-direction: column;
}

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.menu-item-button {
  width: 100%;
  text-align: left;
  padding: 0.5rem;
  font-size: 1.4rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-item-button div {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.menu-item-button span {
  font-size: 1.8rem;
}

.folder-wrapper:hover .folder-sub {
  display: block;
}

.folder-sub {
  position: absolute;
  top: 13.8rem;
  left: 20.5rem;
  width: max-content;
  height: fit-content;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background-color: var(--window-bg);
  z-index: 9999;
  padding: 0.2rem;
  display: none;
}

#program:hover .program {
  display: block;
}

.program {
  position: absolute;
  top: 5rem;
  left: 20.5rem;
  width: 16rem;
  height: fit-content;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background-color: var(--window-bg);
  z-index: 9999;
  padding: 0.2rem;
  color: var(--button-shadow);
  text-align: center;
  display: none;
}

#new-folder:hover .new-folder {
  display: block;
}

.new-folder {
  position: absolute;
  top: 9.4rem;
  left: 20.5rem;
  width: 12rem;
  height: 3.2rem;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background-color: var(--window-bg);
  z-index: 9999;
  padding: 0.2rem;
  color: var(--button-shadow);
  text-align: center;
  display: none;
  line-height: 3rem;
}

#project:hover .project {
  display: block;
}

.project {
  position: absolute;
  top: -18.2rem;
  left: 17.4rem;
  width: 16rem;
  height: fit-content;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background-color: var(--window-bg);
  z-index: 9999;
  padding: 0.2rem;
  color: var(--button-shadow);
  text-align: center;
  display: none;
}

#settings:hover .settings {
  display: block;
}

.settings {
  position: absolute;
  top: 18.8rem;
  left: 20.5rem;
  width: 16rem;
  height: fit-content;
  box-shadow: var(--border-window-outer), var(--border-window-inner), 0.1rem 0.1rem 1rem -0.2rem #00000050;
  background-color: var(--window-bg);
  z-index: 9999;
  padding: 0.2rem;
  color: var(--button-shadow);
  text-align: center;
  display: none;
}


.folder-wrapper:hover > .menu-item-button {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

#project:hover > .menu-item-button {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

#new-folder:hover > .menu-item-button {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

#settings:hover > .menu-item-button {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

#program:hover > .menu-item-button {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

.menu-item-button:hover,
.menu-item-button:focus-visible {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  outline: none;
}

.photo-viewer {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: 100%;
  flex: 1;
  color: var(--text-color);
}

.user-info-window {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.6rem;
  background: var(--content-bg);
  border: 0.2rem solid var(--button-dark-shadow);
  box-shadow:
    inset 0.1rem 0.1rem 0 var(--button-highlight),
    inset -0.1rem -0.1rem 0 var(--button-shadow);
  padding: 1.6rem;
  height: 100%;
}

.user-info-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--window-bg);
  border: 0.2rem solid var(--button-dark-shadow);
  box-shadow:
    inset 0.1rem 0.1rem 0 var(--button-highlight),
    inset -0.1rem -0.1rem 0 var(--button-shadow);
}

.user-info-avatar span {
  font-size: 6.4rem;
}

.user-info-details {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.user-info-details h2 {
  font-size: 1.8rem;
}

.user-info-intro {
  font-size: 1.4rem;
  line-height: 1.5;
}

.user-info-list {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.8rem 1.2rem;
  font-size: 1.4rem;
}

.user-info-list dt {
  font-weight: bold;
}

.user-info-list dd {
  margin: 0;
}

.user-info-window a {
  color: var(--text-color);
  text-decoration: underline;
}

.user-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.user-info-footnote {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6);
}

body[data-theme='dark'] .user-info-footnote {
  color: rgba(255, 255, 255, 0.6);
}

.photo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.8rem 1rem;
  border: 0.2rem solid var(--button-dark-shadow);
  background: var(--window-bg);
  box-shadow: inset 0.1rem 0.1rem 0 var(--button-highlight), inset -0.1rem -0.1rem 0 var(--button-shadow);
}

.photo-toolbar-group {
  display: flex;
  gap: 0.6rem;
}

.photo-toolbar button {
  min-width: 8rem;
  padding: 0.6rem 1rem;
  font-weight: bold;
  background: var(--button-face);
  border: 0.2rem solid var(--button-dark-shadow);
  box-shadow: inset 0.1rem 0.1rem 0 var(--button-highlight), inset -0.1rem -0.1rem 0 var(--button-shadow);
  color: var(--button-text);
  cursor: pointer;
}

.photo-toolbar button:active {
  box-shadow: inset -0.1rem -0.1rem 0 var(--button-highlight), inset 0.1rem 0.1rem 0 var(--button-shadow);
}

.photo-zoom-indicator {
  min-width: 7.2rem;
  text-align: right;
  font-weight: bold;
}

.photo-stage {
  position: relative;
  flex: 1;
  box-shadow: inset 0.1rem 0.1rem 0 var(--button-highlight), inset -0.1rem -0.1rem 0 var(--button-shadow);
  background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.photo-stage.is-draggable {
  cursor: grab;
}

.photo-stage.dragging {
  cursor: grabbing;
}

.photo-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  will-change: transform;
}

.photo-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.shutdown-overlay {
  position: absolute;
  display: flex;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  text-align: center;
  background: #090909;
  color: #f5f5f5;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  z-index: 0;
}

.shutdown-overlay p, .bouncing-logo div  {
  margin: 0;
  animation: nosignal 0.1s infinite;
}

body.is-shutdown #shutdown-overlay {
  display: flex;
}

.display-preview-monitor {
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  width: 23rem;
  height: 18rem;
  border-radius: 0.3rem;
  margin: 0 auto;
  padding: 2rem;
}

.display-preview-screen {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  width: 100%;
  height: 100%;
  background-color: #008080;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-text-color);
  background-position: center;
  background-repeat: no-repeat;
}

select {
  padding: 3px 4px;
  border: none;
  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding-right: 32px;
  background-image: url("/images/button-down.svg");
  background-size: 18px;
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  border-radius: 0;
}

select:focus {
  outline: none;
}

select:focus option {
  color: #000;
  background-color: #fff;
}

.display-settings__form {
  display: flex;
  justify-content: space-between;
}

fieldset {
  width: 100%;
  padding: 1rem;
}

.ctr-container {
  pointer-events: auto;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  content: " ";
  z-index: 10;
  animation: turn-on1 0.5s 1;
  animation-fill-mode: forwards;
}

[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    accent-color: var(--title-text-color);
}

input[type="checkbox"]:disabled {
  background-color: #000 !important;
}


.display-settings__preview {
  margin-bottom: 3rem;
  text-align: center;
  font-size: 1.2rem;
}

@keyframes turn-on1 {
  100% { transform: scale(1,1); filter: brightness(1) blur(0px);}
  50% { transform: scale(1,1); filter: brightness(1.15) blur(0px);}
  35% { transform: scale(1,1); filter: brightness(0.8) blur(2px);}
  14% { transform: scale(1,1);}
  13% { transform: scale(1.2,0.8);}
  10% { transform: scale(1.5,0.3);}
  0% { transform: scale(0.8,0.0); filter: brightness(0.4) blur(4px);}
}

@keyframes flicker {
  0% { opacity: 0.3; }
  100% { opacity: 0.35; }
}

.ctr-container.turn-off {
  animation: turn-off 0.1s forwards;
}

@keyframes turn-off {
  0% { transform: scale(1,1);}
  10% { transform: scale(1,1);}
  20% { transform: scale(1.1,1.1);}
  30% { transform: scale(1.2,1.2);}
  40% { transform: scale(1.3,1);}
  50% { transform: scale(1.4,0.7);}
  60% { transform: scale(1.5,0.3);}
  100% { transform: scale(0.0,0.0);}
}

@keyframes nosignal {
  0% { opacity: 0.8; }
  100% { opacity: 0.9; }
}

.screen {
  width: 100%;
  height: 100%;
  margin: 0;
}

.screen {
  animation: turn-on1 1s linear;
  animation-fill-mode: forwards;
  z-index: 1;
}

.monitor-area .filter {
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(10, 10, 10, 0.25) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
  background-size: 100% 2px, 3px 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: flicker 0.1s infinite;
  z-index: 99999;
  box-shadow: inset 0rem 0rem 5rem rgba(0, 0, 0, 1);
}

body[data-effect-flicker='off'] .filter {
  animation: none !important;
}

body[data-effect-crt='off'] .ctr-container {
  animation: none !important;
}

.greeting {
  position: fixed;
  bottom: calc(0.7rem + var(--taskbar-height));
  right: 0.7rem;
  width: 32rem;
  min-height: fit-content;
  border: 0.1rem solid #000;
  border-radius: 0.5rem;
  padding: 1.2rem;
  background: var(--window-bg-yw);
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.28);
  transform-origin: 100% 100%;
  transform: scale(0);
  opacity: 1;
  pointer-events: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 280ms ease-out;
  will-change: transform, opacity;
  z-index: 1200;
}

.greeting.is-visible {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

.btn-cookie {
  border: 0.1rem solid #8d8c74;
  border-radius: 0.3rem;
  background-color: transparent;
  padding: 0.2rem 0.4rem;
  color: #8d8c74;
}

.btn-cookie:hover {
  background-color: #fffedb;
  color: var(--text-color);
}

/*노트북 & 태블릿 가로 : 1024px-1279px*/
@media all and (min-width:1024px) and (max-width:1279px){
  html, body{
    font-size: 63%;
  }
  
  .bezel {
    border: 1rem solid transparent;
    border-radius: 2rem;
    background-image: linear-gradient(#fff, #fff), linear-gradient(315deg, #d8d1c7, #8b8270);
    height: 90%;
    position: fixed;
    top: 1%;
    left: 1%;
    width: 98%;
  }

  .pc-postit {
    font-size: 1.2rem;
    width: 23rem;
    bottom: -3rem;
  }
}

/*태블릿 가로 : 768px-1023px*/
@media all and (min-width:768px) and (max-width:1023px){
  html, body{
    font-size: 63.5%;
  }
  
  .pc-postit {
      font-size: 1.2rem;
      width: 23rem;
      bottom: -3rem;
    }

  .bezel {
    border: 1rem solid transparent;
    border-radius: 2rem;
    background-image: linear-gradient(#fff, #fff), linear-gradient(315deg, #d8d1c7, #8b8270);
    height: 90%;
    position: fixed;
    top: 1%;
    left: 1%;
    width: 98%;
  }

  .ie-content-cover {
    width: 20rem;
  }
}

/*모바일 가로 & 태블릿 세로 : 480px-767px*/
@media all and (min-width:480px) and (max-width:767px){
  html, body{
    font-size: 64%;
  }

  .desktop-icon .icon-image {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 2.6rem;
  }

  .taskbar-right {
    display: none;
  }

  .bezel {
    border: 1rem solid transparent;
    border-radius: 2rem;
    background-image: linear-gradient(#fff, #fff), linear-gradient(315deg, #d8d1c7, #8b8270);
    height: 90%;
    position: fixed;
    top: 1%;
    left: 1%;
    width: 98%;
  }

  .pc-postit {
    font-size: 1.2rem;
    width: 23rem;
    bottom: -3rem;
  }
}

/*모바일 : -479px*/
@media all and (max-width:479px){
  html, body{
    font-size: 65%;
  }

  .taskbar-right {
    display: none;
  }
  .bezel {
    border: 0.5rem solid transparent;
    border-radius: 1.4rem;
    background-image: linear-gradient(#fff, #fff), linear-gradient(315deg, #d8d1c7, #8b8270);
    height: 95%;
    max-height: calc(100% - 2rem);
    position: fixed;
    top: 1%;
    left: 1%;
    width: 98%;
  }
  .window-menu {
    margin-right: 0!important;
  }
  .window-branding {
    display: none!important;
  }
  .mail__body .field-row {
    flex-direction: column;
    align-items: flex-start!important;
  }
  .mail__body input {
    width: 100%;
    border-radius: 0;
  }

  .power-btn {
    display: none;
  }

  .pc-user {
    display: none;
  }

  .pc-postit {
    display: none;
  }

  .monitor-area .filter {
    box-shadow: inset 0rem 0rem 0rem rgba(0, 0, 0, 0.0);
  }

  .greeting {
    width: calc(100% - 1.4rem);
  }

  .line {
    display: none;
  }
}

.internet-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.window-content.window-content--internet {
  padding: 0;
}

.browser-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.browser-toolbar .window-menu {
  display: flex;
  align-items: center;
}

.browser-menu-row span {
  padding: 0.2rem 0.6rem;
}

.browser-nav-row .menu-button {
  min-width: 1rem;
  text-align: left;
}

.address-form {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
  padding: 0.3rem;
}

.browser-address-row {
  gap: 0.5rem;
}

.browser-address-row .address-label {
  min-width: 3.5rem;
}

.address-label {
  font-size: 1.4rem;
}

.address-input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0.5rem 0.8rem;
  box-shadow: var(--border-field);
}

.address-input:focus-visible {
  outline: none;
}

.go-button {
  min-width: 7.2rem;
}

.menu-button {
  border: none;
  background: transparent;
  padding: 0.2rem 0.8rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.menu-button:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
}

.menu-button:focus-visible {
  outline: 0.1rem dotted currentColor;
  outline-offset: 0.1rem;
}

.menu-button.is-disabled,
.menu-button[aria-disabled='true'] {
  color: rgba(0, 0, 0, 0.5);
  cursor: default;
  pointer-events: none;
}

.tool-button {
  border: 0.2rem solid var(--button-dark-shadow);
  box-shadow: inset 0.1rem 0.1rem 0 var(--button-highlight), inset -0.1rem -0.1rem 0 var(--button-shadow);
  background: var(--button-face);
  color: var(--button-text);
  font-weight: bold;
  cursor: pointer;
}

.tool-button:active:not(:disabled) {
  box-shadow: inset -0.1rem -0.1rem 0 var(--button-highlight), inset 0.1rem 0.1rem 0 var(--button-shadow);
}

.tool-button:disabled {
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  box-shadow: inset 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.5), inset -0.1rem -0.1rem 0 rgba(0, 0, 0, 0.2);
}

.browser-content {
  flex: 1;
  background: var(--content-bg);
  box-shadow: var(--border-field);
  padding: 0.2rem;
  overflow: hidden;
}

.browser-loading {
  font-size: 1.4rem;
  color: var(--text-color);
}

.browser-error {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
}

.browser-error h3 {
  font-size: 1.6rem;
}

.browser-error code {
  background: rgba(0, 0, 0, 0.08);
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
}

.update-note {
  overflow-y: auto;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.display-settings__body {
  flex: 1;
  overflow: hidden;
  background: var(--window-bg);
  padding: 0.6rem;
}

.folder_body {
  flex: 1;
  background: var(--content-bg);
  box-shadow: var(--border-field);
  padding: 0.2rem;
  overflow: hidden;
  display: flex;
}

.folder-info {
  width: 30rem;
  height: 30rem;
  overflow: hidden;
  background-image: linear-gradient(135deg, rgba(255,255,255,0) 0% 2% , rgba(255,255,255,1) 35% 100%), url(/images/6NSAwHardEpPu3I6cbwfNmYYlj8SXKzkdP7XJ1AnWmA.webp);
  background-repeat: no-repeat;
  background-size: 35rem;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.folder-content {
  width: 100%;
  padding: 1.6rem;
  overflow-y: auto;
  height: 100%;
  color: var(--menu-hover-bg);
  position: relative;
  overflow-x: hidden;
  display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 9rem));
  grid-template-rows: repeat(auto-fill, minmax(9rem, 9rem));
  gap: 1rem;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.guide-content {
  padding: 1.6rem;
  overflow-y: auto;
  height: 100%;
  background: var(--window-bg-yw);
  color: var(--button-text);
  position: relative;
  overflow-x: hidden;
}

.cookie-policy {
  padding: 1.6rem;
  overflow-y: auto;
  height: 100%;
  background: var(--window-bg);
  color: var(--button-text);
  position: relative;
  overflow-x: hidden;
}

.photoshop-content {
  background-color: var(--button-shadow);
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
}

.photoshop-content .menu{
  width: 10rem;
  border-right: 0.1rem solid var(--button-face);
}

.photoshop-content .project{
  width: 100%;
}

.display-actions {
  display: flex;
  justify-content: end;
  gap:1rem;
}

.handle {
  border-top: 0.2rem solid var(--button-lowlight);
  border-bottom: 0.2rem solid var(--menu-border-dark);
  width: 2.3rem;
  height: 0.3rem;
  margin: auto;
}

.line {
  border-left: 0.1rem solid var(--button-shadow);
  border-right: 0.1rem solid var(--button-highlight);
  width: 0.2rem;
  height: calc(var(--taskbar-height) - 1rem);
}

.intro-content {
  padding: 0;
}
.intro-content img{
  width: 100%;
}

table {
  border-collapse: collapse;
  position: relative;
  text-align: left;
  white-space: nowrap;
}

thead {
  display: table-header-group;
  vertical-align: middle;
  unicode-bidi: isolate;
  border-color: inherit;
}

tr {
  display: table-row;
  vertical-align: inherit;
  unicode-bidi: isolate;
  border-color: inherit;
}

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: -internal-center;
  unicode-bidi: isolate;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  unicode-bidi: isolate;
  border-color: inherit;
}

table>tbody>tr.highlighted {
  background-color: navy;
  color: #fff;
}

table.interactive>tbody>tr {
  cursor: pointer;
}

table>tbody>tr>* {
  height: 14px;
  padding: 0 6px;
}

table>thead>tr>* {
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a,
  inset 1px 1px #fff,
  inset -2px -2px grey,
  inset 2px 2px #dfdfdf;
  box-sizing: border-box;
  font-weight: 400;
  height: 17px;
  padding: 0 6px;
  position: sticky;
  top: 0;
}

.window-updatenote {
  flex: 1;
  background: var(--window-bg);
  padding: 0.2rem;
  overflow: hidden;
  box-shadow: inset -1px -1px #fff,
    inset 1px 1px grey,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.window-updatenote-content {
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  position: relative;
  overflow-x: hidden;
}

.handle-group {
  margin: 0.1rem 0;
}

/* 1. 업데이트 노트 내 테이블을 윈도우 너비에 꽉 차게 설정 */
.update-note table {
  width: 100%;
  table-layout: fixed; /* 셀 너비를 고정하여 텍스트 오버플로우 제어 (선택 사항) */
}

/* 2. 각 컬럼(열)의 너비 비율 조정 */
/* No. (번호) - 좁게 고정 */
.update-note th:nth-child(1) {
  width: 3rem;
}

/* Title (제목) - 적당한 비율 */
.update-note th:nth-child(2) {
  width: 40%;
}

/* Date (날짜) - 날짜가 들어갈 만큼 고정 */
.update-note th:nth-child(3) {
  width: 8rem;
}

/* Description (설명) - 나머지 공간 모두 차지 */
.update-note th:nth-child(4) {
  width: auto;
}

.update-note td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbars {
  margin: 0.3rem 0;
}

.toolbar-items {
  box-shadow: var(--border-toolbars);
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.2rem;
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 48px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1.2rem;
  background-color: transparent;
  border: 1px solid transparent; /* 기본은 투명 */
  gap: 0.4rem;
  color: var(--text-color);
  cursor: default;
  word-break:keep-all;
}

.tool-btn:disabled {
  color: var(--button-shadow);
  text-shadow: 1px 1px 0px var(--button-highlight);
}

.tool-btn:not(:disabled):not(.is-disabled):hover {
  box-shadow: var(--border-toolbars-raised);
}

.tool-btn:not(:disabled):not(.is-disabled):hover .icon{
  background-image: url(/images/browse-ui-icons.png);
}

.tool-btn:not(:disabled):not(.is-disabled):active {
  box-shadow: var(--border-toolbars-sunken);
  transform: translate(1px, 1px);
}

.tool-btn:disabled,
.tool-btn.is-disabled {
  color: var(--button-shadow);
  text-shadow: 0.1rem 0.1rem 0 var(--button-highlight);
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  opacity: 0.5;
}

.tool-btn:disabled:hover .icon,
.tool-btn.is-disabled:hover .icon {
  background-image: url(/images/browse-ui-icons-grayscale.png);
}

.tool-btn .icon {
  width: 20px;
  height: 20px;
  background-image: url(/images/browse-ui-icons-grayscale.png);
  background-repeat: no-repeat;
}

.tool-separator {
  height: 32px;
  display: block;
  width: 0;
  margin: 0 2px;
  border: 0;
  border-left: 1px solid var(--window-border-shadow);
  border-right: 1px solid var(--button-highlight);
  flex-shrink: 0;
}

.window-menu, .toolbar-items {
  flex-wrap: nowrap !important; /* 줄바꿈 방지 */
  overflow: hidden; /* 넘치는 내용 숨김 */
  position: relative;
  padding: 0.2rem;
}

/* 2. 숨겨진 항목 클래스 */
.is-overflow-hidden {
  display: none !important;
  visibility: hidden !important;
}

/* 3. 모어 버튼 (>>) 스타일 */
.chevron-btn {
  display: flex;       /* 내부 텍스트(>>) 정렬을 위해 flex 사용 */
  align-items: flex-start; /* 텍스트 수직 중앙 정렬 */
  justify-content: center; /* 텍스트 수평 중앙 정렬 */
  width: 16px;         /* 너비 고정 (좁게) */
  /* [핵심] 부모의 높이에 강제로 맞춤 (align-items: center 무시) */
  align-self: stretch; 
  height: auto;        
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-color);
  font-family: 'sys', 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  
  /* 오버플로우 로직에 의해 오른쪽 끝으로 밀어짐 */
  margin-left: auto; 
  z-index: 10;
  padding: 0;
  box-shadow: none;
}

.chevron-btn:hover {
  box-shadow: var(--border-toolbars-raised);
}

.chevron-btn:active {
  box-shadow: var(--border-toolbars-sunken);
}

/* 화면 보호기 배경 */
.screensaver-overlay {
  position: absolute;
  inset: 0;
  background-color: #000000;
  z-index: 99999; 
  display: none; 
  overflow: hidden;
  cursor: none; 
}

/* 활성화 시 보임 */
.screensaver-overlay.visible {
  display: block;
}

/* [수정] 튕기는 로고: 무조건 왼쪽 위를 기준으로 잡음 */
.bouncing-logo {
  position: absolute;
  top: 0;   /* 추가: 중앙 정렬 무시하고 0,0 기준 */
  left: 0;  /* 추가 */
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
  user-select: none;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

/* [수정] 셧다운 텍스트: 중앙 정렬 무시 */
.shutdown-overlay p {
  position: absolute;
  top: 0;   /* 추가 */
  left: 0;  /* 추가 */
  margin: 0;
  white-space: nowrap;
  will-change: transform, color;
  /* 기존 animation: nosignal... 은 JS가 시작되면 덮어씌워짐 */
}

/* 셧다운 오버레이 자체는 flex 정렬을 해제해야 함 (애니메이션 시작 시) */
.shutdown-overlay.animating {
  display: block; /* flex -> block */
}

.logo-icon {
  width: 150px;  /* 기존 이미지 크기 */
  height: 68px; /* 기존 이미지 크기 (비율에 맞춰 조절) */
  
  /* [핵심] 배경색을 부모(.bouncing-logo)의 현재 글자색(color)으로 채움 */
  background-color: currentColor; 
  
  /* [핵심] SVG 파일을 마스크(모양)로 사용 */
  -webkit-mask-image: url('/images/mylogo3.svg');
  mask-image: url('/images/mylogo3.svg');
  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  
  -webkit-mask-position: center;
  mask-position: center;
  
  -webkit-mask-size: contain;
  mask-size: contain;
}

.window-welcome {
  width: 100%;
  background: var(--window-bg-yw);
  padding: 0.2rem;
  overflow: hidden;
  box-shadow:
    inset -1px -1px #fff,
    inset 1px 1px grey,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.window-welcome-content {
  padding: 0.8rem;
  height: 16.5rem;
  overflow-y: auto;
  position: relative;
  overflow-x: hidden;
}

ul.tree-view {
  display: block;
  padding: 0.2rem;
  margin: 0;
  overflow-y: auto;
  height: 100%;
}

ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: var(--dialog-blue);
  color: var(--button-highlight);
}

ul.tree-view ul,
ul.tree-view li {
  margin-top: 3px;
}

ul.tree-view ul {
  margin-left: 16px;
  padding-left: 16px;
  /* Goes down too far */
  border-left: 1px dotted #808080;
}

ul.tree-view ul > li {
  position: relative;
}
ul.tree-view ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 10px;
  width: 12px;
  border-bottom: 1px dotted #808080;
}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 11px;
  bottom: 0px;
  width: 8px;
  background: var(--button-highlight);
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: -22px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 9px;
  height: 10px;
  line-height: 10px;
  margin-left: 3px;
  margin-right: 4px;
  padding-left: 1px;
  background-color: #fff;
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

ul.tree-view details > summary::marker,
ul.tree-view details > summary::-webkit-details-marker {
  content: "";
}

ul.tree-view summary {
  display: flex;
  align-items: center;
}

.window-help {
  flex: 1;
  background: var(--window-bg);
  padding: 0.2rem;
  overflow: hidden;
  box-shadow: inset -1px -1px #fff,
    inset 1px 1px grey,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
}

.window-help-content {
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  position: relative;
  overflow-x: hidden;
}

/* 트리 메뉴 아이템 커서 및 여백 */
.tree-item {
  cursor: pointer;
  padding: 0 0.2rem;
  /* 텍스트가 줄바꿈되지 않도록 설정 */
  white-space: nowrap; 
}

.tree-item:hover {
  text-decoration: underline;
}

/* 선택된 아이템 하이라이트 (Windows 98 스타일) */
.tree-item.selected {
  text-decoration: underline;
  font-weight: 900;
}

.taskbar-right img {
  cursor: pointer;
}

.mail__body {
  padding-top: 0.8rem;
}

.mail__body .container {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mail__body .field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mail__body .field-row label{
  padding-left: 0.6rem;
}

.mail__body input {
  min-width: 80%;
  padding: 0.6rem 0.4rem;
  outline: transparent solid 0px !important;
}

.mail__body textarea {
  outline: transparent solid 0px !important;
}

/* -------------------------------- */
/* [수정] 뮤직 플레이어 버튼 스타일    */
/* -------------------------------- */
.music-player-btn {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-shadow: var(--border-field);
  padding: 0.2rem;
}

.music-player-btn button {
  width: 100%;
  margin: 0;
  box-shadow: var(--music-player-btn-raised);
  /* 버튼 내부 요소 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 눌린 상태 (Pressed & Active) 공통 스타일 */
.music-player-btn button.pressed,
.music-player-btn button:active {
  box-shadow: var(--music-player-btn-sunken);
  background-color: var(--button-shadow); /* 약간 어두운 배경 */
  outline: none;
  transform: none !important; /* 버튼 자체 이동 방지 */
}

/* [핵심] 버튼이 눌렸을 때 내부 이미지만 오른쪽 아래로 1px 이동 */
.music-player-btn button.pressed img,
.music-player-btn button:active img {
  transform: translate(0, 2px); 
  position: relative;
}

/* 1. 기본 스타일 초기화 */
#music-progress,
#music-volume {
  -webkit-appearance: none; /* 크롬, 사파리 기본 스타일 제거 */
  width: 100%;
  background: transparent;  /* 배경 투명 */
  margin: 5px 0;
}

#music-progress:focus,
#music-volume:focus {
  outline: none; /* 포커스 아웃라인 제거 */
}

/* 2. 트랙(막대) 스타일 - Chrome/Safari/Edge */
#music-progress::-webkit-slider-runnable-track{
  width: 100%;
  height: 4px; /* 막대 두께 */
  cursor: pointer;
  background: linear-gradient(to right, #00ff00 var(--progress, 0%), #222222 var(--progress, 0%));
  border: 0;
}
#music-volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* 막대 두께 */
  cursor: pointer;
  background: linear-gradient(to right, #2d2dff var(--progress, 0%), #222222 var(--progress, 0%));
  border: 0;
}

/* 3. 썸(손잡이) 스타일 - Chrome/Safari/Edge */
#music-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 0px; /* 손잡이 높이 */
  width: 0px;
}
#music-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px; /* 손잡이 높이 */
  width: 10px;  /* 손잡이 너비 */
  background: var(--button-face);
  cursor: pointer;
  margin-top: -7px; /* 트랙 중앙에 오도록 위치 조정 ( (트랙높이 - 썸높이) / 2 ) */
  
  /* 윈도우 98 버튼 스타일 (양각) */
  box-shadow: 
    inset 1px 1px #fff, 
    inset -1px -1px #000, 
    inset -2px -2px #808080; 
}

/* 4. 트랙(막대) 스타일 - Firefox */
#music-progress::-moz-range-track,
#music-volume::-moz-range-track {
  width: 100%;
  height: 4px; /* 막대 두께 */
  cursor: pointer;
  background: linear-gradient(to right, #2d2dff var(--progress, 0%), #222222 var(--progress, 0%));
  border: 0;
}

/* 5. 썸(손잡이) 스타일 - Firefox */
#music-progress::-moz-range-thumb,
#music-volume::-moz-range-thumb {
  height: 16px;
  width: 10px;
  border: 0;
  background: var(--button-face);
  cursor: pointer;
  border-radius: 0; /* 둥글게 되는 것 방지 */
  
  /* 윈도우 98 버튼 스타일 */
  box-shadow: 
    inset 1px 1px #fff, 
    inset -1px -1px #000, 
    inset -2px -2px #808080; 
}

#music-title-text {
  display: inline-block;
  position: relative;
  will-change: transform; 
}

/* ------------------------------------------------------------- */
/* [추가] 메뉴바 오른쪽 브랜딩 이미지 영역                            */
/* ------------------------------------------------------------- */
.window-branding {
  width: 40px; 
  height: 27px;
  box-shadow: var(--border-toolbars); /* 입체 테두리 */
  background: var(--button-dark-shadow);
  
  /* Flex 아이템 설정 */
  flex-shrink: 0; /* 공간이 부족해도 찌그러지지 않음 */
  
  /* 내부 이미지 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.window-branding img {
  object-fit: contain;
  display: block;
}

/* 1. 애니메이션 방향 수정: 왼쪽 아래에서 오른쪽 위로 펼쳐짐 */
#task-context-menu {
  transform-origin: bottom left;
}

/* 2. 메뉴 호버 시 내부 SVG 아이콘 흰색으로 변경 */
/* 이미지 태그(img)는 fill 속성이 안 먹히므로 filter를 사용하여 색상을 반전시킵니다. */
#task-context-menu button:hover {
  color: var(--title-text-color);
}
#task-context-menu button:hover img {
  filter: brightness(0) invert(1);
}

#desktop-context-menu button:hover {
  color: var(--title-text-color);
}

/* ------------------------------------------------------------- */
/* [수정] iOS/모바일 대응: 체크박스 커스텀 스타일 (Windows 98 스타일)     */
/* ------------------------------------------------------------- */

input[type="checkbox"] {
  /* 1. 브라우저/OS 기본 스타일 제거 */
  -webkit-appearance: none;
  appearance: none;
  
  /* 2. 크기 및 배치 설정 */
  width: 1.6rem;    /* 터치하기 편하게 약간 키움 (기존 1.4rem -> 1.6rem) */
  height: 1.6rem;
  margin: 0;
  margin-right: 0.6rem; /* 텍스트와의 간격 */
  vertical-align: middle; /* 텍스트와 높이 맞추기 */
  
  /* 3. 윈도우 98 스타일: 흰색 배경 + 3D 음각 테두리 */
  background-color: #fff;
  border: none;     /* 기본 border 제거 */
  border-radius: 0; /* iOS의 둥근 모서리 강제 제거 */
  box-shadow: var(--border-field); /* main.css에 정의된 음각 변수 사용 */
  
  /* 4. 커서 설정 */
  cursor: pointer;
  position: relative;
  
  /* 깜빡임 방지 */
  flex-shrink: 0;
}

/* 체크된 상태 (Checked) */
input[type="checkbox"]:checked {
  background-color: #fff; /* 배경은 계속 흰색 */
  
  /* 5. 체크 표시 (SVG 아이콘 사용) */
  /* 윈도우 98의 검은색 체크 표시를 SVG로 그려 넣습니다 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6 L5 8 L9 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90%; /* 체크 표시 크기 조절 */
}

/* (옵션) 체크박스를 눌렀을 때 약간 눌린 효과 */
input[type="checkbox"]:active {
  background-color: #e0e0e0;
}

/* (옵션) 비활성화(Disabled) 상태 스타일 */
input[type="checkbox"]:disabled {
  background-color: var(--button-face)!important;
  cursor: not-allowed;
}

/* 라벨(글자) 클릭 시 커서 처리 */
label {
  cursor: pointer;
  vertical-align: middle;
  user-select: none; /* 더블 클릭 시 텍스트 선택 방지 */
}

/* ------------------------------------------------------------- */
/* [추가] 커스텀 셀렉트 박스 (iOS 네이티브 피커 대체용)                 */
/* ------------------------------------------------------------- */

/* 기존 select 숨김 */
select.replaced {
  display: none;
}

.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
  font-family: 'Rimgul', sans-serif;
  font-size: 1.4rem;
}

/* 1. 트리거 (선택된 값 표시 박스) */
.custom-select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 2px 6px;
  height: 21px;
  background: #ffffff;
  color: #000000;
  box-shadow: var(--border-field); /* 기본 음각 상태 */
  cursor: pointer;
  line-height: 20px;
}

/* 2. 화살표 버튼 */
.custom-select-arrow {
  width: 18px;
  height: 18px;
  background: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner); /* 기본: 튀어나온 상태 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: none; /* 반응 속도를 위해 트랜지션 제거 */
}

.custom-select-arrow::after {
  content: '';
  display: block;
  width: 0; 
  height: 0; 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000;
}

/* [수정 1] 메뉴가 열려있어도(.open) 버튼은 튀어나온 상태 유지 */
/* 오직 마우스를 누르고 있는 순간(:active)에만 들어간 효과 적용 */
.custom-select-trigger:active .custom-select-arrow {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  padding-top: 2px;
}

/* 3. 드롭다운 옵션 목록 (애니메이션 적용) */
.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 9999;
  overflow: hidden; /* 애니메이션 중 내용 넘침 방지 */
  /* [수정 2] 펼쳐지는 애니메이션 (Height 0 -> Content) */
  max-height: 0;               /* 닫힌 상태 높이 */                /* 투명하게 */
  border: 0 solid #000;        /* 테두리도 숨김 */
  
  /* 부드러운 전환 효과 (0.2초) */
  transition: all 0.2s ease-out;
  
  /* 그림자 */
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

.custom-option::after {
  content: "";
  position: absolute;
  inset: 0; /* 상하좌우 0으로 꽉 채움 */
  border: 1px dotted #ffffff; /* 흰색 점선 (difference로 반전됨) */
  mix-blend-mode: difference; /* 배경색과 차이값을 계산하여 대비되는 색상 표시 */
  pointer-events: none; /* 마우스 클릭 방해 금지 */
  opacity: 0; /* 평소에는 숨김 */
}

.custom-option.selected {
  background-color: #000080;
  color: #ffffff;
}

.custom-options:hover .custom-option.selected:not(:hover) {
  background-color: #ffffff;
  color: #000000;
}
/* 5. 마우스 오버 상태 (호버된 항목은 무조건 하이라이트 + 점선 표시) */
.custom-option:hover {
  background-color: #000080; /* 파란 배경 */
  color: #ffffff;            /* 흰색 글씨 */
}

/* 마우스 오버 시에만 점선 아웃라인 표시 */
.custom-option:hover::after {
  opacity: 1;
}

/* 메뉴가 열렸을 때 (.open) */
.custom-select-wrapper.open .custom-options {
  max-height: 200px;           /* 충분히 큰 값 (내용만큼만 열림) */                 /* 불투명 */
  border: 1px solid #000;      /* 테두리 표시 */
  overflow: hidden;            /* 내용이 많으면 스크롤 */
}

/* 4. 개별 옵션 */
.custom-option {
  padding: 2px 6px;
  cursor: pointer;
  color: #000;
  white-space: nowrap;
  
  /* [핵심 수정] 점선(::after)이 이 박스를 기준으로 위치를 잡도록 설정 */
  position: relative; 
}

/* 갤러리 스크롤 영역 (오른쪽 1.7fr) */
.gallery-scroll-area {
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* 스크롤바 숨김 */
  overflow-y: hidden;
  cursor: grab;
}

.gallery-scroll-area.active {
  cursor: grabbing;
}

.gallery-track {
  display: flex;
  align-items: center; 
  gap: 5rem;
  width: max-content;
  height: 100%;
  pointer-events: auto;
}

.gallery-item {
  position: relative;
  /* 기본 너비 설정 (이 값이 커지면서 옆을 밀어냄) */
  width: 400px;
  /* 비율 유지를 위한 설정 (필요시 조정) */
  aspect-ratio: 3 / 4;
  flex-shrink: 0; /* 공간 부족해도 줄어들지 않음 */
  cursor: pointer;

  /* 4. 너비가 부드럽게 변하는 애니메이션 */
  transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: width;
}

/* 4. 마우스 오버 시 너비 2배 확장 (주변을 밀어냄) */
.gallery-item:hover {
  width: 500px;
}

.item-image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.item-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
  /* 1. 기본 흑백 상태 */
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

/* 4. 호버 시 컬러로 변경 */
.gallery-item:hover .item-image-wrapper img {
  filter: grayscale(0%);
}

/* 텍스트 스타일 (선택사항: 기본적으로 숨겼다가 호버시 표시 등) */
.item-text {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.item-text.top { top: -3rem; left: 0; font-weight: bold; }
.item-text.bottom { bottom: -3rem; left: 0; font-size: 1.2rem; color: #000; }

.gallery-item:hover .item-text { opacity: 1; }