export function LoginBox() {
    return (
        <div className="bg-white relative mb-4 border border-blue-primary">
            <div className="h-[43px] leading-[44px] text-sm text-blue-primary px-[18px]">
                <strong className="inline-block max-w-[153px] pr-0.5 align-top
                text-custom-blue-dark
                truncate whitespace-nowrap cursor-pointer overflow-hidden">
                    로그인해 주세요.
                </strong>
            </div>
            
            <div className="bg-[#f3f3f3] h-9 leading-9 text-center px-[18px] whitespace-nowrap 
            flex justify-center 
            *:not-first:before:content-['|'] 
            *:not-first:before:text-[11px]
            *:not-first:before:p-[0_10px_0_13px]
            *:not-first:before:text-[#ccc]
            ">
                <span>
                    <a className="text-gray-800 text-[12px] font-bold">
                        MY갤로그
                        <em className="bg-[url('/sp_loginout.png')] bg-no-repeat"></em>
                    </a>
                </span>
                <span>
                    <a className="text-gray-800  text-[12px] font-bold">
                        즐겨찾기
                        <span className="absolute overflow-hidden invisible m-[-1px] w-0 top-[-9999px] text-[0px]">리스트 보기</span>
                    </a>
                </span>
                <span>
                    <a className="text-gray-800 text-[12px] font-bold">
                        <em className="bg-[url('/sp_loginout.png')] bg-no-repeat inline-block w-[14px] h-[14px] mr-1.5 align-[-3px] bg-[0px_-27px]"></em>
                        알림
                    </a>
                </span>
            </div>
        </div>
    )
}