/* 안 되면 다시 여기로 button, input 추가 (reset code) */

.search-input {
    font-family: var(--font-base);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
}

.user-menu {
    display: flex;
    gap: var(--space-md);
}

.btn-txt {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.seller-btn {
    display: none; 
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: var(--space-xs);
    padding: var(--gnb-seller-btn-padding);

    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
}

.seller-btn:hover {
    background-color: var(--color-primary-hover); 
}

.seller-txt {
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--color-text-inverse);
}

.cart-btn,
.login-btn {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);

    gap: var(--icon-gap-sm);
    transition: color var(--transition-fast);
}

.cart-btn::before, 
.login-btn::before {
    content: "";
    width: var(--icon-lg);
    height: var(--icon-lg);

    background-size: contain;
    background-repeat: no-repeat;
}

.cart-btn:hover, 
.login-btn:hover {
    color: var(--color-primary);
}

.cart-btn::before { background-image: var(--icon-cart); } 
.cart-btn:hover::before { background-image: var(--icon-cart-2); }

.login-btn::before { background-image: var(--icon-user); }
.login-btn:hover::before { background-image: var(--icon-user-2); }

.dropdown-container {
    position: relative; 
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.dropdown-menu {
    display: none;      
    position: absolute; 
    top: 100%;          
    margin-top: var(--space-xs); 
    
    width: var(--gnb-dropdown-width);
    height: auto;
    padding: var(--space-xs);

    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    filter: drop-shadow(var(--gnb-dropdown-shadow));
    z-index: var(--z-dropdown);
}

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    
    /* 정사각형 생성 */
    width: var(--fs-xs); 
    height: var(--fs-xs); 
    background-color: var(--color-bg-primary);
    
    /* 왼쪽과 위쪽만 테두리를 줌 */
    border-top: 1px solid var(--color-border-light);
    border-left: 1px solid var(--color-border-light);
    
    /* 45도 회전시키고 모서리를 둥글게 함 */
    transform: translateX(-50%) rotate(45deg);
    border-top-left-radius: 0.4rem; /* 여기가 삼각형 꼭짓점이 됨 */
    
    z-index: 1;
}

/* 활성화 상태 */
.dropdown-menu.show {
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: flex;
    justify-content: center;
    cursor: pointer;

    width: 100%;
    height: auto;
    padding: var(--gnb-menu-item-padding);

    font-weight: var(--fw-medium); 
    font-size: var(--fs-md);

    color: var(--color-text-muted);
    background-color: var(--color-bg-primary);
    transition: all var(--transition-fast);
}

.menu-item:active,
.menu-item:hover {
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-text-muted);
}