/* 모든 장비 페이지가 공유하는 상단 GNB 스타일. 페이지 본문 CSS(각 페이지의
   :root 변수 등)는 이 파일보다 먼저 주입되어야 var(--*) 값들이 해석된다. */
body{padding-top:var(--gnb-height, 52px);}
.gnb{position:fixed; top:0; left:0; right:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--border);}
.gnb-inner{max-width:840px; margin-inline:auto; padding:9px 20px; display:flex; align-items:center; gap:14px;}
.gnb-progress{position:absolute; left:0; bottom:-1px; height:3px; width:0%; background:linear-gradient(90deg,var(--accent),var(--gold)); opacity:0; transition:width .3s ease, opacity .2s ease; pointer-events:none;}
.gnb-progress.active{opacity:1;}
.gnb-home{flex-shrink:0; width:32px; height:32px; padding:0; border:none; border-radius:9px; background:transparent; color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.gnb-home:hover{background:var(--surface-2);}
.gnb-home img{width:28px; height:28px; object-fit:contain; pointer-events:none;}
.gnb-search{position:relative; flex:0 1 auto; width:50%; max-width:360px; min-width:140px; margin:0 auto;}
.gnb-search-input{width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; padding:6px 72px 6px 16px; font-size:13px; font-family:'Noto Sans KR',sans-serif; color:var(--ink);}
.gnb-search-input::placeholder{color:var(--ink-faint);}
.gnb-search-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.gnb-search-icons{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:2px;}
.gnb-icon-btn{width:28px; height:28px; padding:0; border:none; background:transparent; color:var(--ink-faint); cursor:pointer; border-radius:999px; display:flex; align-items:center; justify-content:center;}
.gnb-icon-btn[hidden]{display:none;}
.gnb-icon-btn:hover{background:var(--surface); color:var(--ink);}
.gnb-icon-btn svg{width:15px; height:15px;}
.gnb-profile-wrap{position:relative; flex-shrink:0;}
.gnb-profile{width:32px; height:32px; padding:0; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:999px;}
.gnb-profile:hover{border-color:var(--accent-soft); color:var(--accent);}
.gnb-profile svg{width:16px; height:16px;}
.gnb-profile-avatar{border-color:transparent; background:var(--accent); color:#fff; font-family:'Noto Sans KR',sans-serif; font-weight:700; font-size:14px; line-height:1;}
.gnb-profile-avatar:hover{background:var(--accent-soft); color:#fff;}
.gnb-profile-menu{position:absolute; top:calc(100% + 8px); right:0; min-width:150px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.14); padding:6px; z-index:50; display:flex; flex-direction:column; gap:2px;}
.gnb-profile-menu[hidden]{display:none;}
.gnb-profile-menu-item{text-align:left; padding:9px 12px; border:none; background:transparent; border-radius:8px; font-family:'Noto Sans KR',sans-serif; font-size:13.5px; color:var(--ink); cursor:pointer;}
.gnb-profile-menu-item:hover{background:var(--surface-2);}
.gnb-dropdown{position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.14); padding:6px; z-index:50;}
.gnb-dropdown-list{list-style:none; margin:0; padding:0; overflow-y:auto; transition:max-height .15s ease;}
.gnb-dropdown-item{height:38px; padding:0 12px; display:flex; align-items:center; font-size:13.5px; color:var(--ink); border-radius:8px; cursor:default; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gnb-dropdown-item:hover{background:var(--accent); color:#fff;}
.gnb-dropdown-empty{height:38px; padding:0 12px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--ink-faint);}
@keyframes gnbDropdownFlash{
  0%, 100% { box-shadow:0 12px 32px rgba(0,0,0,.14); border-color:var(--border); }
  50% { box-shadow:0 0 0 3px var(--accent-soft), 0 12px 32px rgba(0,0,0,.14); border-color:var(--accent); }
}
.gnb-dropdown.flash{ animation:gnbDropdownFlash .4s ease-in-out 2; }
@media (max-width:520px){
  .gnb-inner{padding:7px 14px; gap:10px;}
}