/* ==========================================================================
   6. 작업표시줄 (Taskbar) 스타일
   ========================================================================== */

.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:30px;
    background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
    border-top: 1px solid #0831d9;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

/* --- 시작 버튼 스타일 (최종 정리본) --- */
.start-button {
    width: 104px;
    height: 30px;
    background-image: url('./image/start.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    box-shadow: none;
    background-color: transparent;
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
    margin-left: -4px;
}

button.start-button:hover {
    box-shadow: none;
    filter: brightness(120%);
    background-size: 100% 100%;
}

button.start-button:active {
    background-image: url('./image/start.png');
    box-shadow: none;
    filter: brightness(85%);
    transition: none;
    background-size: 100% 100%;
}

button.start-button:focus {
    outline: none;
    box-shadow: none;
    background-size: 100% 100%;
}

.taskbar-windows {
    flex-grow: 1;
    height: 100%;
    display: flex; /* 자식 요소들을 가로로 나열 */
    align-items: center; /* 탭들을 세로 중앙에 정렬 */
}

.taskbar-notification-area {
    background: linear-gradient(
        to bottom,
        #0c59b9 1%,
        #139ee9 6%,
        #18b5f2 10%,
        #139beb 14%,
        #1290e8 19%,
        #0d8dea 63%,
        #0d9ff1 81%,
        #0f9eed 88%,
        #119be9 91%,
        #1392e2 94%,
        #137ed7 97%,
        #095bc9 100%
    );
    color: #fff;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
    font-weight: lighter;
    height: 30px;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-left: 10px;
    border-left: 1px solid #1042af;
    box-shadow: inset 1px 0 1px #18bbff;
    text-shadow: none;
    letter-spacing: 0.5px;
}
#taskbar-clock {
    color: #fff;
    text-shadow: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.taskbar-notification-area .notification-icon {
    display: flex;
    align-items: center;
    height: 100%;
}
.taskbar-notification-area .notification-icon img {
    width: 13px;
    height: 13px;
    margin-top: 2px;
}
.taskbar-notification-area img.notification-icon {
    width: 13px;
    height: 13px;
    margin-top: 2px;
    margin-right: -5px;
}
.taskbar-notification-area img[src*="good.png"] {
    margin-left: -10px;
}
.taskbar-notification-area img[src*="printer.png"] {
    margin-left: -4px;
}


/* ==========================================================================
   12. 시작 메뉴 스타일 (Windows XP Luna 테마)
   ========================================================================== */
.start-menu {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 380px; /* 너비 조절 */
    height: 480px; /* 높이 조절 */
    background: #205cce linear-gradient(to bottom, #1162d8, #4288e7);
    border: 1px solid #0831d9;
    border-radius: 4px 4px 0 0;
    box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden;
}
.start-menu.show { display: flex; }

.start-menu-header {
    display: flex;
    align-items: center;
    padding: 6px 5px;
    background: linear-gradient(to bottom, #1868ce, #1b6cd3, #2476dc, #3786e5, #4791eb);
    color: #fff;
    border-bottom: 1px solid #385de7;
}
.user-avatar { width: 42px; height: 42px; margin-right: 8px; border: 2px solid rgba(255,255,255,0.7); }
.user-name { font-size: 14px; font-weight: 700; text-shadow: 1px 1px #0f1089; }

.start-menu-body { display: flex; flex-grow: 1; overflow: hidden; }
.start-menu-left { width: 50%; background-color: #fff; overflow-y: auto; padding: 6px 0; }
.start-menu-right { width: 50%; background-color: #d6e8ff; overflow-y: auto; padding: 6px 0; }

/* 시작 메뉴 아이템 공통 스타일 */
.start-menu-item {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    text-decoration: none;
    color: #000;
    cursor: pointer;
}
.start-menu-item:hover {
    background-color: #2f71cd;
    color: #fff;
}
.start-menu-item:hover span, 
.start-menu-item:hover small {
    color: #fff;
}

/* 메뉴 아이템 안의 아이콘 이미지 스타일 */
.start-menu-item img {
    width: 20px;
    height: 20px;
}
.start-menu-left .start-menu-item img {
    width: 32px;
    height: 32px;
}

/* 메뉴 아이템 텍스트 래퍼 */
.start-menu-item .text-wrapper {
    display: flex;
    flex-direction: column;
}

/* 메뉴 아이템 보조 텍스트 (예: Internet Explorer) */
.start-menu-item small {
    font-size: 10px;
    color: grey;
}

.start-menu-separator {
    height: 1px;
    background-color: rgba(0,0,0,0.1);
    margin: 6px 1px;
    box-shadow: 0 1px rgba(255,255,255,0.5);
}
.start-menu-right .start-menu-separator { background-color: #87b3e2b5; box-shadow: 0 1px #fff; }

.start-menu-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5px;
    background: linear-gradient(to bottom, #4282d6, #2e7ee1, #176bd8, #0f61cb);
    border-top: 1px solid #385de7;
}
.start-menu-footer button {
    background: none; border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; padding: 5px;
}
.start-menu-footer button:hover { filter: brightness(1.2); }
.start-menu-footer button img { width: 22px; height: 22px; margin-right: 5px; }
.footer-icon-placeholder {
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
}


/* ==========================================================================
   작업표시줄 탭 스타일 (Windows XP Luna 테마 최종)
   ========================================================================== */

/* 탭 버튼의 기본적인 레이아웃과 글꼴 설정 */
.taskbar .taskbar-tab {
    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 텍스트 왼쪽 정렬 */
    
    width: 160px; /* 모든 탭의 너비를 160px로 고정 */
    height: 23px;
    margin: 0 2px;
    padding: 0 8px; /* 좌우 여백 */
    
    font-family: "Tahoma", sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000000a0;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    cursor: pointer;
    border-radius: 3px;
    outline: none;
}

/* 탭 - 평소 상태 (비활성) */
.taskbar .taskbar-tab {
    color: #fff;
    background: linear-gradient(to bottom, #2d73e1 0%, #175fd3 15%, #1257d0 18%, #1459d1 56%, #1960d5 79%, #1e66da 86%, #246bdd 89%, #276de1 93%, #2264d8 100%);
    border: 1px solid #002c9c;
    box-shadow: inset 1px 1px #59a6f8, 1px 1px 1px #00000050;
}

/* 탭에 마우스를 올렸을 때 */
.taskbar .taskbar-tab:hover {
    background: linear-gradient(to bottom, #3988f3 0%, #206be5 15%, #1963e1 18%, #1965e1 56%, #216be5 79%, #2772e9 86%, #2e77ec 89%, #327bef 93%, #2a6ee8 100%);
    box-shadow: inset 1px 1px #80c2f9, 1px 1px 1px #00000050;
}

/* 탭 - 활성 상태 (눌린 모양) */
.taskbar .taskbar-tab.active {
    color: white;
    background: linear-gradient(to bottom, #1152a8 0%, #1056b3 3%, #1459b7 6%, #165bb9 10%, #185ebe 15%, #1b63c4 24%, #1e67c8 48%, #1d65c4 53%, #195cb9 76%, #1754ac 91%, #12489c 100%);
    box-shadow: inset 1px 1px 1px #0e428c;
    border-color: #082b8c;
}

/* 작업표시줄 탭 내부 아이콘 스타일 */
.taskbar .taskbar-tab-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px; /* 아이콘과 텍스트 사이의 간격 */
}


/* ==========================================================================
   알림 영역 아이콘 및 볼륨 팝업 스타일
   ========================================================================== */

.notification-icon {
    position: relative;
    padding: 0 4px;
    height: 100%;
    display: flex;
    align-items: center;
}
.notification-icon img {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.volume-popup {
    display: none;
    position: absolute;
    bottom: 28px;
    right: 0;
    width: 220px;
    z-index: 10001;
    background-color: #f7f6f2;
    /* .window의 스타일을 상속받으므로, 여기서는 위치와 관련된 것만 정의 */
}

.volume-popup.show {
    display: block;
}

/* 볼륨 팝업 안의 '음소거' 라벨 글자색 변경 */
.volume-popup .field-row label {
    color: #000000; /* 원하는 색상으로 변경하세요 */

}