/* 상단 메뉴바 */
.top-navbar {position: fixed;top: 0;left: 0;width: 100%;height: 60px;opacity: 0.9;background-color: #0b1220;display: flex;justify-content: flex-start;align-items: center;padding: 0 30px;box-shadow: 0 2px 10px rgba(0,0,0,0.5);z-index: 1000}

/* 버튼 공통 */
.menu-btn {margin: auto 0px;background: none;border: none;font-size: 2.5rem;color: #aab3c6;cursor: pointer}
.menu-btn:hover {color: #d1b3ff}

/* 좌측 메뉴 */
.nav-left-btn {margin-right: auto}
.nav-left-btn a {position: relative;margin-right: 25px;color: #aab3c6;text-decoration: none;font-size: 20px;font-weight: 500;transition: color 0.3s}
.nav-left-btn a::after {content: "";position: absolute;left: 0;bottom: -4px;width: 100%;height: 2px;background: currentColor;transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease}
.nav-left-btn a:hover {color: #fff}
.nav-left-btn a:hover::after {transform: scaleX(1)}
/* 화면 넓이가 작아지면 */
@media (max-width: 758px) {
   .nav-left-btn {
      display: none;
   }
}

/* 우측 메뉴 햄버거 버튼 */
.menu-container {position: relative;margin-left: auto}
.dropdown-menu {position: absolute;top: 60px;right: 0;background-color: #0f1724;border: 1px solid #554cfa;border-radius: 8px;overflow: hidden;flex-direction: column;min-width: 150px;z-index: 1000;max-height: 0;opacity: 0;transform: translateY(-10px);transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;pointer-events: none}
.dropdown-menu.show {max-height: 500px;opacity: 0.925;transform: translateY(0);overflow-y: auto;pointer-events: auto}
/* 스크롤바 */
.dropdown-menu.show::-webkit-scrollbar {width: 6px}
.dropdown-menu.show::-webkit-scrollbar-track {background: #0f1724; border-radius: 8px}
.dropdown-menu.show::-webkit-scrollbar-thumb {background: var(--accent); border-radius: 6px; transition: background 0.35s}
.dropdown-menu.show::-webkit-scrollbar-thumb:hover {background: #d1b3ff}
.dropdown-menu a {padding: 10px 20px;color: #aab3c6;text-decoration: none;display: block;transition: background 0.3s}
.dropdown-menu a:hover {background-color: #1b2230;color: #d1b3ff}

body {
   padding-top: 60px;
   background-color: #0b1220;
   color: #aab3c6;
}

.home-btn {font-size: 22px;font-weight: bold;color: white;text-decoration: none}
.home-btn:hover {color: var(--accent-hover); font-weight: 500}

.brand{display:flex;align-items:center;font-size: 24px}
.top-navbar .nav-left-btn {display: flex;align-items: center;gap: 20px}
.logo{width:48px;height:48px;border-radius:8px;object-fit:cover;cursor: pointer}
.logo:active{transform: scale(0.92); opacity: 0.7}
.logo:hover {transform: scale(1.05);opacity: 0.85}

/* jar 화면 */
#jar-search.card {background-color: var(--card, #0f1724);border: 1px solid #554cfa;border-radius: 15px;padding: 20px;max-width: 600px;width: 90%;max-height: 600px;margin: auto auto;box-shadow: 0 4px 15px rgba(0, 150, 150, 0.5);color: var(--muted, #aab3c6);transition: transform 0.2s ease, box-shadow 0.2s ease}
/* 카드 제목 */
#jar-search.card h2 {color: var(--accent, #5a4bff);font-size: 1.5rem;border-bottom: 1px solid #554cfa;padding-bottom: 20px}
/* 라벨 */
#jar-search label {display: block;font-size: 1rem;margin-top: 20px;margin-bottom: 10px;color: var(--muted, #aab3c6)}
/* select, input 스타일 */
#jar-search select.jql-input,
#jar-search input.jql-input {width: 100%;padding: 8px 10px;border: 1px solid #554cfa;border-radius: 12px;background-color: #0b1220;color: var(--muted, #aab3c6);font-size: 0.95rem;outline: none;transition: border 0.2s, background 0.2s}
#jar-search select.jql-input:focus,
#jar-search input.jql-input:focus {border-color: var(--accent, #5a4bff);background-color: #0f1724;color: #fff}
/* 다운로드 버튼 */
#jar-search button#jar-download {padding: 10px 16px;background-color: transparent;color: #fff;font-weight: bold;border: 1px solid rgba(107, 108, 125, 0.5);border-radius: 8px;cursor: pointer;transition: background 0.3s, transform 0.2s}
#jar-search button#jar-download:hover {opacity: 0.7;border-color: var(--accent-light)}

/* 버전 리스트 */
#version-list {list-style: none;margin: 4px 0 0 0;padding: 0;max-height: 250px;overflow-y: auto;border: 1px solid #554cfa;border-radius: 6px;background-color: #0f1724}
#version-list li {padding: 6px 10px;cursor: pointer;color: var(--muted, #aab3c6);transition: background 0.2s}
#version-list li:hover {background-color: #1b2230;color: #d1b3ff}

.version-list::-webkit-scrollbar {width: 10px}
.version-list::-webkit-scrollbar-track {background: #0f1724; border-radius: 2px}
.version-list::-webkit-scrollbar-thumb {background: var(--accent); border-radius: 2px; transition: background 0.35s}
.version-list::-webkit-scrollbar-thumb:hover {background: #d1b3ff}