@font-face {
            font-family: 'K_Quest';
            src: url('../fonts/K_Quest.TTF') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'K_Damage';
            src: url('../fonts/K_Damage.TTF') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'K_2002';
            src: url('../fonts/K_2002.TTF') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .site-btn.btn-success { background-color: #28a745 !important; } /* 초록색 */
        .site-btn.btn-danger { background-color: #c82333 !important; } /* 더 진한 빨간색 */

        .game-start-button-main {
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 15px;
            width: 300px;
            border-radius: 0 !important;
        }

        .install-notice {
            font-size: 12px;
            color: #aaa;
            margin-top: 10px;
        }

        @keyframes pulse-color {
            0% { color: white; }
            50% { color: #FFEB3B; } /* Amber 100 - slightly more prominent yellow */
            100% { color: white; }
        }

        /* Custom CSS for dropdown on hover (from previous steps, keep for now) */
        @media all and (min-width: 992px) {
            .navbar .nav-item .dropdown-menu { display: none; }
            .navbar .nav-item:hover .dropdown-menu { display: block; }
            .navbar .nav-item .dropdown-menu { margin-top: 0; }
        }

        /* Aggressive reset for fixed positioning issues */
        html, body {
            transform: none !important;
            perspective: none !important;
            filter: none !important;
            will-change: auto !important;
            margin: 0;
            padding: 0;
        }

        /* Ensure hero section is not pushed down */
        .hero-section {
            margin-top: 0 !important; /* Force no top margin */
        }

        /* Bookmark Menu Styles (Overlay) */
        #bookmark-menu {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw; /* Cover full viewport width */
            z-index: 99999;
            pointer-events: none; /* Clicks pass through the container unless it's open */
        }

        #bookmark-menu.is-open {
            pointer-events: auto; /* Allow interaction when open */
        }

        .bookmark-tab {
            background-color: rgba(239, 173, 12, 0.8);
            width: 45px;
            height: 45px;
            cursor: pointer;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            transition: background-color 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed; /* Use fixed positioning to stay relative to viewport */
            left: 0;
            top: 20px;
            pointer-events: auto;
            color: white;
            font-size: 22px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            z-index: 100000; /* Ensure tab is above the overlay content */
        }

        .bookmark-tab:hover {
            background-color: #c77e19;
        }

        .bookmark-content {
            background-color: rgba(10, 10, 20, 0.7); /* Dark, semi-transparent overlay - ADJUSTED */
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -100%; /* Off-screen by default */
            transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Smoother transition */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center items vertically */
            align-items: flex-start; /* Align items to the left */
            padding: 0 10%; /* Add horizontal padding to push content from the edge */
            box-sizing: border-box;
        }

        #bookmark-menu.is-open .bookmark-content {
            left: 0; /* Slide in to view */
        }

        /* Style for the links inside the overlay */
        .bookmark-content a,
        .bookmark-content span {
            color: #F5E6AB; /* WoW-like parchment color */
            padding: 10px 20px;
            text-decoration: none;
            display: inline-block; /* Let element shrink to content width */
            text-align: left;
            font-size: 1.5em;
            font-family: 'K_Quest', monospace;
            width: auto;
            border-left: 5px solid transparent; /* Placeholder for smooth transition */
            transition: border-left-color 0.3s ease, color 0.3s ease;
            margin: 5px 0;
        }

        .bookmark-content a:hover {
            color: #fff;
            border-left-color: #efad0c; /* Show border on hover */
        }
        
        /* Adjust social icons for overlay */
        .bookmark-content .social-icons {
            position: absolute;
            bottom: 40px;
            left: 10%;

            /* Use Flexbox for alignment */
            display: flex;
            justify-content: flex-start; /* Align icons to the left */
            width: 80%; /* Match parent's effective width */
            
            padding-left: 20px; /* Align with menu items' text */
            box-sizing: border-box;
        }

        .bookmark-content .social-icons a {
            display: inline-block;
            width: auto;
            padding: 0 15px 0 0; /* Adjust padding */
            font-size: 30px;
            line-height: 1;
            border-left: none; /* Remove border placeholder */
            margin: 0;
            transition: transform 0.2s ease; /* Add transition for hover effect */
        }

        /* Remove hover effect from social icons and add a new one */
        .bookmark-content .social-icons a:hover {
            border-left-color: transparent;
            color: #fff; /* Change color on hover */
            transform: scale(1.1); /* Add a different hover effect */
        }

        .bookmark-content a {
            color: white;
            padding: 0; /* Removed padding for a 'filled' look */
            text-decoration: none;
            display: block;
            text-align: left;
            line-height: 40px; /* Adjust line height to give vertical spacing */
            padding-left: 16px; /* Add back left padding for text alignment */
        }

        .bookmark-content a:hover {
            background-color: #c77e19; /* Solid color for 'filled' effect */
        }

        .equipment-slot {
            display: flex;
            align-items: center;
            width: 260px; /* Adjusted width */
            height: 56px;
            margin: 10px 5px; /* Increased vertical margin for all slots */
            position: relative;
        }
        .equipment-slot.align-right {
            flex-direction: row-reverse;
        }
        /* .equipment-slot::before {
            content: attr(data-slot-name);
            position: absolute;
            top: 50%;
            left: 34px; 
            transform: translate(-50%, -50%);
            font-size: 0.8em; 
            font-weight: bold;
            color: rgba(255, 255, 255, 0.6);
            pointer-events: none;
            z-index: 1;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        } */

        /* .equipment-slot.align-right::before {
            left: calc(100% - 34px); 
        } */

        .equipment-slot.has-item::before, .equipment-slot.has-item .icon-container {
            background-image: none !important; /* 와우헤드 아이콘이 로드되면 배경 이미지를 제거합니다. */
        }

        .equipment-slot .icon-container {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        #slot-1 .icon-container { background-image: url('../images/icon/s-1.jpg'); }
        #slot-2 .icon-container { background-image: url('../images/icon/s-2.jpg'); }
        #slot-3 .icon-container { background-image: url('../images/icon/s-3.jpg'); }
        #slot-16 .icon-container { background-image: url('../images/icon/s-16.jpg'); }
        #slot-5 .icon-container { background-image: url('../images/icon/s-5.jpg'); }
        #slot-4 .icon-container { background-image: url('../images/icon/s-4.jpg'); }
        #slot-19 .icon-container { background-image: url('../images/icon/s-19.jpg'); }
        #slot-9 .icon-container { background-image: url('../images/icon/s-9.jpg'); }
        #slot-10 .icon-container { background-image: url('../images/icon/s-10.jpg'); }
        #slot-6 .icon-container { background-image: url('../images/icon/s-6.jpg'); }
        #slot-7 .icon-container { background-image: url('../images/icon/s-7.jpg'); }
        #slot-8 .icon-container { background-image: url('../images/icon/s-8.jpg'); }
        #slot-11-1 .icon-container, #slot-11-2 .icon-container { background-image: url('../images/icon/s-11.jpg'); }
        #slot-12-1 .icon-container, #slot-12-2 .icon-container { background-image: url('../images/icon/s-12.jpg'); }
        #slot-main-hand .icon-container { background-image: url('../images/icon/s-13.jpg'); }
        #slot-off-hand .icon-container { background-image: url('../images/icon/s-14.jpg'); }
        #slot-ranged .icon-container { background-image: url('../images/icon/s-15.jpg'); }
        #slot-ammo .icon-container { background-image: url('../images/icon/s-15.jpg'); }

        .equipment-slot.has-item::before {
            display: none;
        }
        .equipment-slot:not(.has-item) .icon-container {
            border: 2px solid #555;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
        }
        .icon-container {
            width: 68px; /* Increased width */
            height: 68px; /* Increased height */
            border: 2px solid #555;
            border-radius: 4px;
            flex-shrink: 0;
            position: relative;
            background-color: #1a1a1a;
            box-shadow: inset 0 0 8px rgba(0,0,0,0.7);
            z-index: 2;
        }
        .icon-container a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative; /* Enable positioning */
            top: -2px; /* Adjust up */
            left: -2px; /* Adjust left */
        }
        .text-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            flex-grow: 1;
            background-color: transparent;
            border-radius: 4px;
            padding: 0 8px;
            overflow: hidden;
            z-index: 2;
        }

        @media (max-width: 767px) {
            .equipment-slot:not(.align-right) .text-container {
                position: relative;
                top: -14px;
            }
            .equipment-slot.align-right .text-container {
                position: relative;
                top: 14px;
            }
        }
        .equipment-slot:not(.align-right) .text-container {
            margin-left: 5px;
        }
        .equipment-slot.align-right .text-container {
            margin-right: 5px;
            text-align: right; /* Align text to the right */
        }
        .item-name-text {
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 1.0em; /* Increased font size */
            line-height: 1.2;
            text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000; /* Added text outline effect */
        }
        .item-enchant-gem-text {
            font-size: 0.8em;
            color: #9d9d9d; /* Default color */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }

        /* Item Quality Colors for Border and Text */
        .icon-container.quality-0 { border-color: #9d9d9d !important; }
        .item-name-text.quality-0 { color: #9d9d9d !important; }
        .icon-container.quality-1 { border-color: #ffffff !important; }
        .item-name-text.quality-1 { color: #ffffff !important; }
        .icon-container.quality-2 { border-color: #1eff00 !important; }
        .item-name-text.quality-2 { color: #1eff00 !important; }
        .icon-container.quality-3 { border-color: #0070dd !important; }
        .item-name-text.quality-3 { color: #0070dd !important; }
        .icon-container.quality-4 { border-color: #a335ee !important; }
        .item-name-text.quality-4 { color: #a335ee !important; }
        .icon-container.quality-5 { border-color: #ff8000 !important; }
        .item-name-text.quality-5 { color: #ff8000 !important; }
        .icon-container.quality-6 { border-color: #e6cc80 !important; }
        .item-name-text.quality-6 { color: #e6cc80 !important; }
        .icon-container.quality-7 { border-color: #e6cc80 !important; }
        .item-name-text.quality-7 { color: #e6cc80 !important; }

        /* Specific margins for weapon slots */
        #slot-main-hand, #slot-off-hand, #slot-ranged, #slot-ammo {
            margin-bottom: 40px; /* Increased margin for weapon slots only */
        }

        /* Server Status Alignment */
        .status-line {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .status-line .status-value {
            width: 80px;
            text-align: right;
            font-weight: bold;
        }
        .status-line .status-separator {
            margin: 0 5px;
        }
        .status-line .server-name {
            width: 120px;
            text-align: left;
        }

        .bookmark-content .social-icons {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
        }

        .bookmark-content .social-icons a {
            display: inline-block;
            padding: 0 10px;
            font-size: 24px;
            line-height: 1;
        }

        .bookmark-content .social-icons a:hover {
            background-color: transparent;
            color: #fff;
            transform: scale(1.1);
        }

        /* Widget Toggle Styles */
        .hidden-widget {
            display: none !important;
        }
        /* Master Widget Toggle Positioning */
        #master-widget-toggle-container.widgets-visible {
            right: 340px; /* Position to the left of the visible widget area */
        }
        #master-widget-toggle-container.widgets-hidden {
            right: 20px; /* Position to the far right when widgets are hidden */
        }

        /* Security Warning Styles */
        .security-warning {
            color: #a335ee; /* Purple warning color */
            font-weight: bold;
            animation: pulse-text 2s infinite;
            margin-top: -10px; /* Reduce space from welcome message */
            margin-bottom: 15px; /* Add some space below */
        }
        .security-ok {
            color: #28a745; /* Green success color */
        }
        .blinking-button {
            animation: blink-effect 1.2s linear infinite;
            border: 2px solid #a335ee;
        }
        @keyframes blink-effect {
            0% {
                box-shadow: 0 0 5px rgba(163, 53, 238, 0.5);
                transform: scale(1);
            }
            50% {
                opacity: 0.8;
                box-shadow: 0 0 25px #a335ee, 0 0 10px #a335ee inset;
                transform: scale(1.02);
            }
            100% {
                box-shadow: 0 0 5px rgba(163, 53, 238, 0.5);
                transform: scale(1);
            }
        }
        @keyframes pulse-text {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        /* Custom Scrollbar for Widget */
        #music-controls::-webkit-scrollbar {
          width: 8px;
        }
        #music-controls::-webkit-scrollbar-track {
          background: transparent;
        }
        #music-controls::-webkit-scrollbar-thumb {
          background-color: #4f4f4f;
          border-radius: 4px;
          border: 2px solid transparent;
          background-clip: content-box;
        }
        #music-controls::-webkit-scrollbar-thumb:hover {
          background-color: #777;
        }
        /* For Firefox */
        #music-controls {
          scrollbar-width: thin;
          scrollbar-color: #4f4f4f transparent;
        }

        /* Enhanced Modal Backdrop */
        .modal-backdrop.show {
            opacity: 0.85 !important; /* Make it darker and more opaque */
            background-color: #000 !important; /* Ensure it's black */
        }

        /* Enhanced Modal Content - Add subtle shadow */
        .modal-content {
            box-shadow: 0 0 15px rgba(239, 173, 12, 0.7); /* Subtle glow shadow */
        }

        /* Ensure close button is clearly visible */
        .modal-header .close {
            color: #F5E6AB !important; /* Ensure visibility against dark background */
            opacity: 1 !important; /* Ensure it's not faded */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Add shadow for better contrast */
        }

        .modal-header .close:hover {
            color: #fff !important; /* Brighter on hover */
        }

        /* Align modal header title and close button */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Ensure existing border-bottom is not overridden if it's important */
            border-bottom: 1px solid #efad0c; /* Keep existing border if present */
        }

        /* Adjust title margin if necessary after Flexbox */
        .modal-header .modal-title {
            font-size: 1.5rem; /* Standardize font size */
            margin-bottom: 0; /* Keep this from previous change */
            color: #FFFFFF !important; /* Ensure title is visible */
        }

        /* Ensure close button is clearly visible and aligned to the right */
        .modal-header .close {
            color: #F5E6AB !important; /* Ensure visibility against dark background */
            opacity: 1 !important; /* Ensure it's not faded */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Add shadow for better contrast */
            margin-left: auto; /* Push to the far right in flex container */
            font-size: 1.5rem; /* Make the icon larger for better visibility and clickability */
            padding: 0.5rem; /* Add padding for a larger clickable area */
            background: none; /* Remove any default button background */
            border: none; /* Remove any default button border */
        }

        .modal-header .close:hover {
            color: #fff !important; /* Brighter on hover */
            cursor: pointer; /* Indicate it's clickable */
        }

        .talent-icons-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .talent-icon {
            width: 48px;
            height: 48px;
            border: 2px solid #444;
            border-radius: 4px;
        }
        .spec-title {
            color: #ccc;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .spec-title.active-spec {
            color: #efad0c;
        }

        /* Faction Bar Animation */
        @keyframes fire-flicker {
            0% { box-shadow: 1px 0px 10px 3px rgba(255, 215, 0, 0.7); }
            20% { box-shadow: 2px 0px 12px 4px rgba(255, 180, 0, 0.8); }
            50% { box-shadow: 1px 0px 15px 5px rgba(255, 220, 50, 0.9); }
            80% { box-shadow: 2px 0px 12px 4px rgba(255, 180, 0, 0.8); }
            100% { box-shadow: 1px 0px 10px 3px rgba(255, 215, 0, 0.7); }
        }

        .faction-bar-alliance-animated {
            background-color: rgba(21, 60, 141, 0.8);
            height: 100%;
            position: relative;
            z-index: 1;
            animation: fire-flicker 2s ease-in-out infinite;
        }

        .sortable-header {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .sort-indicator {
            width: 1em; /* Reserve space for the sort icon */
            text-align: right;
        }

        #online-players-tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.1); /* A subtle light overlay */
            transition: background-color 0.3s ease; /* Smooth transition */
        }
        
        #character-modal .modal-dialog {
            max-width: 1000px !important; /* Further reduced width, added important */
            width: 90%; /* Ensure it's responsive */
        }
        .scroll-container {
            color: #ffd700;
            padding: 10px 0;
            overflow: hidden;
            white-space: nowrap;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100000;
        }

        .scroll-text {
            display: inline-block;
            padding-left: 100%;
            animation: scroll-left 30s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }
      .sidebar-card {
        width: 100%;
        box-sizing: border-box; /* 패딩과 테두리를 너비 계산에 포함시킵니다 */
        background-color: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 10px; /* Adjusted from 15px to 10px */
      }
      .sidebar-card:last-child {
        margin-bottom: 0;
      }
      .sidebar-card h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: #efad0c;
        font-family: 'K_Quest', monospace;
        font-size: 1.1em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding-bottom: 10px;
        text-transform: uppercase;
        text-align: left; /* 명시적으로 왼쪽 정렬 추가 */
      }