/* 여기엔 윈도우 xp 테마 디자인 그 자체만 들어있음 */

    body {
    	font-family: Arial;
    	font-size: 12px;
    	color: #222
    }

    .surface {
    	background: #ece9d8
    }


    u {
    	text-decoration: none;
    	border-bottom: .5px solid #222
    }

    a {
    	color: #00f
    }

    a:focus {
    	outline: 1px dotted #00f
    }

    code,
    code * {
    	font-family: monospace
    }

    pre {
    	display: block;
    	padding: 12px 8px;
    	background-color: #000;
    	color: silver;
    	font-size: 1rem;
    	margin: 0
    }

    pre,
    pre * {
    	font-family: Perfect DOS VGA\ 437 Win
    }

    summary:focus {
    	outline: 1px dotted #000
    }

    .vertical-bar {
    	width: 4px;
    	height: 20px;
    	background: silver;
    	box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf
    }

    .status-bar {
    	margin: 0 1px;
    	display: flex;
    	gap: 1px;
		height: 22px;
    }

    .status-bar-field {
    	box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
    	flex-grow: 1;
    	padding: 2px 3px;
    	margin: 0
    }

    

    @keyframes sliding {
    	0% {
    		transform: translateX(-30px)
    	}

    	to {
    		transform: translateX(100%)
    	}
    }

/* ==========================================================================
   custom.css - windowsXP.css 테마를 덮어쓰거나, 추가적인 디자인을 정의하는 파일
   ========================================================================== */


/* ==========================================================================
   1. 전체 페이지 및 창 레이아웃
   ========================================================================== */

/* 전체 페이지 배경 및 기본 여백 */
body {
    background-color: #5A7EDC;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    padding: 20px;
}

/* 전체 페이지 배경 및 기본 여백 */
#desktop-body {
    padding: 20px;
    overflow: hidden; /* 이제 이 ID를 가진 body에만 적용됨 */
        /* ▼▼▼ 텍스트 선택(드래그) 방지 코드 추가 ▼▼▼ */
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* 표준 속성 */
}

/* 창 내부의 전체 콘텐츠 레이아웃을 감싸는 컨테이너 */
.window-content-wrapper {
    display: flex;
    align-items: stretch;
    margin-left: 1px;
    margin-right: 5px;
}

/* 폴더 내 왼쪽 탐색창 스타일 */
.navigation-pane {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #7ba2e7 linear-gradient(to bottom, #7ba2e7, #6375d6);
    border-right: 1px solid #000080;
}

.navigation-pane *,
.navigation-pane *:before,
.navigation-pane *:after {
    box-sizing: border-box;
}

.navigation-pane,
.navigation-pane * {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Verdana, sans-serif !important;
    font-size: 10pt !important;
    -webkit-font-smoothing: auto !important;
}

.navigation-pane .sidebar-section {
    padding: 12px;
}

.navigation-pane .sidebar-section:last-child {
    padding-bottom: 0;
}

.navigation-pane .sidebar-section>label {
    display: block;
    margin-bottom: 0;
}

.navigation-pane label b {
    display: block;
    padding: 6px 13px 6px 13px;
    font-weight: 600;
    color: #215dc6;
    border-radius: 5px 5px 0 0;
    background: #fff linear-gradient(to right, #fff, #fff, #c6d3f7);
    border: 1px solid #fff;
    border-bottom: 0;
}

.navigation-pane ul {
    padding: 6px 8px;
    margin: 0;
    list-style: none;
    background: #d6dff7;
    border: 1px solid #fff;
    border-top: 0;
}

.navigation-pane li {
    position: relative;
    margin: 4px 0;
}

.navigation-pane li a {
    display: flex;
    align-items: center;
    line-height: 16px;
    padding-left: 0;
    color: #215dc6;
    text-decoration: none;
}

.navigation-pane li a:hover {
    text-decoration: underline;
}

.navigation-pane li i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: center;
}


/* ==========================================================================
   2. 사이드바 메뉴 아이콘을 위한 <img> 태그 스타일

   ========================================================================== */

   .navigation-pane .sidebar-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px; /* 글자와의 간격 */
    vertical-align: middle; /* 텍스트와 세로로 중앙 정렬을 돕는 속성 */
}

/* ==========================================================================
   3. 메인 콘텐츠 영역 스타일
   ========================================================================== */

.main-panel {
    flex-grow: 1;
    display: flex;
    padding: 10px;
    gap: 10px;
    overflow-y: auto;
    border-left: 1px solid #000080;
}

.blog-posts {
    flex-grow: 1;
}

.post {
    margin-bottom: 25px;
}

.post-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.right-sidebar {
    width: 100px;
    flex-shrink: 0;
}




/* ==========================================================================
   4. 브라우저 호환성 및 특수 스타일
   ========================================================================== */

/* 파이어폭스용 스크롤바 */
@-moz-document url-prefix() {
    html {
        scrollbar-color: #c8d6fb #ecebe4;
        scrollbar-width: thin;
    }
}


/* ==========================================================================
   5. 바탕화면 아이콘 스타일
   ========================================================================== */

.desktop-icons {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 10px;
    display: grid;
    grid-template-rows: repeat(8, 75px); /* 8개씩 한 열, 아이콘+텍스트+여백 고려 */
    grid-auto-flow: column;
    gap: 8px 24px; /* 세로, 가로 간격 */
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65px;
    height: 65px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: none; /* 클릭 시 점선 테두리 제거 */
}

.desktop-icon img {
    width: 32px;
    height: 32px;
}

.desktop-icon span {
    color: white;
    text-shadow: 1px 1px 2px black;
    padding: 3px;
    margin-top: 2px;
    border: 1px solid transparent;
}

.desktop-icon.selected span {
    background-color: #0b61ff;
    color: white;
    border: none;
}
.desktop-icon.selected img {
    opacity: 0.75;
    filter: drop-shadow(0 0 blue);
}

/* ==========================================================================
   5-1. 폴더 내 아이콘 스타일
   ========================================================================== */

.folder-content {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto;
}

.folder-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
    gap: 10px;
    padding: 10px;
}

.folder-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65px;
    height: 65px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: 5px;
    border: 1px solid transparent;
    outline: none; /* 클릭 시 점선 테두리 제거 */
    /* border-radius 제거하여 바탕화면과 동일하게 */
}

.folder-icon:hover {
    /* 바탕화면과 동일하게 hover 시 배경 변경하지 않음 */
}

.folder-icon.selected {
    /* 바탕화면과 동일하게 전체 배경은 변경하지 않음 */
}

.folder-icon.selected span {
    background-color: #0c57e2;
    color: white;
    border: none;
}

.folder-icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.folder-icon span {
    color: #000;
    font-size: 11px;
    line-height: 1.2;
    word-wrap: break-word;
    max-width: 100%;
    padding: 3px;
    margin-top: 2px;
    border: 1px solid transparent;
}




/* ==========================================================================
   폴더 창 내부 툴바 스타일
   ========================================================================== */

/* 툴바 전체 컨테이너 */
.folder-toolbars {
    background-color: #f0f0f0;
    border-bottom: 1px solid #c5c5c5;
    padding-bottom: 2px;
}

/* 메뉴 표시줄 (File, Edit...) */
.menu-bar {
    display: flex;
    background-color: #e2e2e2;
    padding: 2px 4px;
    border-bottom: 1px solid #c5c5c5;
}
/* 메뉴 표시줄 (File, Edit...) */
.menu-bar {
    display: flex;
    background-color: #e2e2e2;
    padding: 2px 4px;
    border-bottom: 1px solid #c5c5c5;
}

/* 상위 메뉴 아이템 (File, Edit 등) 컨테이너 */
.menu-item {
    position: relative; /* 하위 메뉴의 기준점 */
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid transparent;
}
.menu-item u {
    text-decoration: underline;
}

/* 마우스를 올렸을 때와 클릭했을 때의 하이라이트 효과 */
.menu-item:hover,
.menu-item.active {
    background-color: #2f71cd;
    border: 1px solid #2f71cd;
}

.menu-item:hover > span,
.menu-item.active > span {
    color: #fff;
}

/* 하위 메뉴 (평소에는 숨겨져 있음) */
.dropdown-menu {
    display: none; /* 평소에는 숨김 */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #f0f0f0;
    border: 1px solid #808080;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    padding: 2px;
    z-index: 10;
    min-width: 150px;
    list-style: none;
}

/* 상위 메뉴가 활성화(.active)되면 하위 메뉴를 보여줌 */
.menu-item.active .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 3px 20px;
    white-space: nowrap;
}
.dropdown-menu li:hover {
    background-color: #2f71cd;
    color: #fff;
}
.dropdown-menu li.separator {
    height: 1px;
    background-color: #d3d3d3;
    margin: 3px 1px;
    padding: 0;
}

.menu-bar u {
    text-decoration: underline;
}

/* 표준 단추 모음 (뒤로, 검색...) */
.standard-buttons-bar {
    display: flex;
    align-items: center;
    padding: 2px;
}

.toolbar-button {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid transparent;
    padding: 2px 5px;
    border-radius: 3px;
}
.toolbar-button:hover {
    border: 1px solid #3399ff;
    background-color: #cce5ff;
}
.toolbar-button:active {
    background-color: #99ccff;
}
.toolbar-button img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.toolbar-button span {
    font-size: 11px;
}

/* 툴바 구분선 */
.toolbar-separator {
    width: 1px;
    height: 24px;
    background-color: #c5c5c5;
    margin: 0 4px;
}

/* 주소 표시줄 */
.address-bar {
    display: flex;
    align-items: center;
    padding: 2px 4px;
}
.address-bar label {
    color: grey;
    margin-right: 5px;
}
.address-bar input {
    flex-grow: 1; /* 남는 공간 모두 차지 */
    border: 1px solid #7f9db9;
    padding: 2px 4px;
    font-size: 11px;
}


/* 바탕화면 클릭 및 드래그를 위한 영역 스타일 */
#desktop-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 30px); /* 작업 표시줄 높이를 제외한 전체 영역 */
    background-color: #5A7EDC; /* 배경색 직접 지정 */
    background-image: url('./image/wallpaper.bmp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}


/* ==========================================================================
   바탕화면 드래그 선택 사각형 스타일
   ========================================================================== */
.selection-rectangle {
    position: absolute;
    border: 1px dotted #000000; /* 흰색 점선 테두리 */
    z-index: 15; /* 아이콘 위에, 창보다는 아래에 위치 */
    pointer-events: none; /* 사각형 자체가 마우스 이벤트를 방해하지 않도록 설정 */
}

/* 드래그 선택 시 아이콘 하이라이트 효과 */
.desktop-icon.drag-selected {
    position: relative;
}
.desktop-icon.drag-selected img {
    opacity: 0.75;
    filter: drop-shadow(0 0 blue);
}
.desktop-icon.drag-selected span {
    background-color: #0b61ff;
    color: white;
}

/* 드래그 선택 완료 후 유지되는 선택 상태 */
.desktop-icon.drag-selected-final {
    position: relative;
}
.desktop-icon.drag-selected-final img {
    opacity: 0.75;
    filter: drop-shadow(0 0 blue);
}
.desktop-icon.drag-selected-final span {
    background-color: #0b61ff;
    color: white;
}


/* ==========================================================================
   창 드래그 시 화면 전체를 덮는 오버레이 스타일
   ========================================================================== */
.drag-overlay {
    position: fixed; /* 화면 전체에 고정 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999; /* 다른 모든 창보다 위에 있지만, 드래그 중인 창보다는 아래에 위치 */
    cursor: move;  /* 화면 전체에서 '이동' 커서 모양 표시 */
}

.desktop-icon,
.folder-icon {
    outline: none;
}

.desktop-icon:focus,
.folder-icon:focus,
.desktop-icon:focus-visible,
.folder-icon:focus-visible {
    outline: none;
}

/* Shutdown prompt button image effects */
.img-button {
    transition: filter 0.1s ease-in-out;
}
.img-button:hover {
    filter: brightness(1.25);
}
.img-button:active {
    filter: brightness(0.5);
}

#shutdown-prompt-overlay {
    display: none;
    position: absolute; /* fixed에서 absolute로 변경 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(64, 64, 64, 0.1);
    z-index: 99999;
}

#shutdown-prompt-overlay.active {
    display: flex;
    justify-content: center;
    /* align-items: center; 제거 */
}

#shutdown-prompt {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right, #5A7EDC, #90a9e9, #5A7EDC);
    border: 1px solid black;
    width: 320px;
    height: 200px;
    margin-top: 26vh; /* 수직 위치 조정을 위해 추가 */
}

#shutdown-prompt-header {
    width: 100%;
    height: 20%;
    background-color: #00309C;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
}

#shutdown-prompt-header span {
    font-size: 18px;
    text-shadow: 0px 0px white;
}

#shutdown-prompt-header > *:first-child {
    margin-left: 10px;
}

#shutdown-prompt-header > *:last-child {
    margin-right: 10px;
}

#logo-small {
    height: 30px;
    width: 30px;
}

#shutdown-prompt-header-stripe {
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, #466DCD, #C7DDFF, #B0C9F7, #5A7EDC);
}

#shutdown-prompt-options {
    font-size: 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    color: white;
}

.shutdown-prompt-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.shutdown-prompt-option > *:first-child {
    margin-bottom: 8px;
}

.shutdown-prompt-option .img-button {
    height: 32px;
}

#shutdown-prompt-footer {
    width: 100%;
    height: 20%;
    background-color: #00309C;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

#shutdown-prompt-footer > *:last-child {
    margin-right: 10px;
}

#shutdown-cancel-button-outline {
    width: min-content;
    height: min-content;
    padding: 1px;
    border-radius: 2px;
    background: linear-gradient(170deg, #043292 35%, #C3C3DF);
}

#shutdown-cancel-button-border {
    width: min-content;
    height: min-content;
    padding: 1px;
    border: solid 1px #003C74;
    border-radius: 3px;
    background: linear-gradient(#FFFFFF, #D6D0C5);
}

#shutdown-cancel-button-border:hover {
    background: linear-gradient(#FFF0CF, #E59700);
}

#shutdown-cancel-button-border:active {
    background: linear-gradient(#CEE7FF, #6982EE);
}

#shutdown-cancel-button {
    color: black;
    font-size: 12px;
    outline: none;
    border: none;
    padding: 0px 8px 0px 8px;
    background: linear-gradient(180deg, #F7F3EF, #E5F0E2 90%, #D6D3C6 95%);
    text-shadow: none;
}

#grayscale-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: grayscale(90%);
    z-index: 99998; /* 종료 창 바로 아래 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease-in-out; /* 2초 동안 부드럽게 */
}

#grayscale-overlay.active {
    opacity: 1;
    pointer-events: auto;
}