?�서?�리 ?�품 - ?�스지?�이�?/title> <meta name="description" content="?�서?�리 ?�품, ?�서관?�품, ?�서관물품"> <link rel="stylesheet" href="style.css?v=7"> <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .category-page { padding: 80px 0 100px; min-height: 800px; } .category-container { max-width: 1400px; margin: 0 auto; padding: 0 5%; } .category-header { text-align: center; margin-bottom: 60px; padding: 60px 5%; background-color: var(--color-surface); width: 100%; } .category-title { font-size: 2.5rem; color: var(--color-text); font-weight: 700; margin-bottom: 20px; } .subcategory-nav { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; } .subcategory-item { padding: 12px 30px; font-size: 1.1rem; font-weight: 600; color: var(--color-text-light); background: #fff; border: 1px solid var(--color-border); border-radius: 30px; cursor: pointer; transition: var(--transition-smooth); } .subcategory-item:hover, .subcategory-item.active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px; } .sub-content { display: none; animation: fadeIn 0.5s ease; } .sub-content.active { display: block; } </style> <link rel="stylesheet" href="cart.css"> <link rel="stylesheet" href="inquiry.css"> <link rel="stylesheet" href="auth.css"> <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.0/kakao.min.js" integrity="sha384-l+xbElFSnPZ2rOaPrU//2Kes5Q39MW1SI6zWzwA88yCfL9Mi9SbpS7cwjLxS7fJ6" crossorigin="anonymous"></script> </head> <body> <header class="header"> <div class="header-container"> <h1 class="logo"><a href="index.html"><img src="assets/logo.png" alt="에스지라이뮤"></a></h1> <nav class="gnb"> <ul>  </ul> </nav> <div class="header-utils"> <div class="search-wrapper"> <input type="text" class="search-input" placeholder="검?�어�??�력?�세??> <a href="#" class="search-btn" id="headerSearchBtn"><i class="fa-solid fa-magnifying-glass"></i></a> </div> <div class="user-auth-wrap" id="userAuthWrap"> <button class="login-trigger-btn" id="loginTriggerBtn"> <i class="fa-regular fa-user"></i> <span>로그??/span> </button> </div> <a href="#"><i class="fa-solid fa-cart-shopping"></i></a> </div> </div> </header> <main class="category-page"> <div class="category-header"> <h2 class="category-title">?�서?�리 ?�품</h2> <p>?�서관??체계?�인 ?�리�??�한 ?�수 ?�품?�니??</p> </div> <div class="category-container"> <ul class="subcategory-nav" id="subCategoryNav">  </ul> </div> </main> <footer class="footer"> <div class="footer-container"> <div class="footer-info"> <p><strong>(�??�스지?�이�?/strong> | Tel : 1544-5703 | ?�스 : 051-518-5985 | E-Mail : limu101@nate.com</p> <p class="copyright">Copyright(c)2023 www.sgperzoom.com. All right Reserved.</p> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> <script> window.CURRENT_PAGE_ID = 'arrange'; </script> <script type="module" src="script.js"></script> <script type="module" src="auth.js"></script> <aside class="right-fixed-banner"> <ul class="banner-menu"> <li><a href="#" class="banner-btn recent-btn-aside" title="최근 본 상품"><i class="fa-solid fa-clock-rotate-left"></i><span class="tooltip">최근본상품</span></a></li> <li><a href="#" class="banner-btn" title="주문배송"><i class="fa-solid fa-truck"></i><span class="tooltip">주문배송</span></a></li> <li><a href="#" class="banner-btn cart-btn-aside" title="장바구니"><i class="fa-solid fa-cart-shopping"></i><span class="tooltip">장바구니</span></a></li> <li><a href="#" class="banner-btn wishlist-btn-aside" title="관심상품"><i class="fa-regular fa-heart"></i><span class="tooltip">관심상품</span></a></li> <li><a href="#" class="banner-btn chat-trigger" id="chatTriggerBtn" title="실시간 채팅"><i class="fa-solid fa-comments"></i><span class="tooltip">실시간 채팅</span></a></li> <li class="scroll-btns"> <button class="banner-btn scroll-top" id="scrollTopBtn" title="위로"><i class="fa-solid fa-chevron-up"></i></button> <button class="banner-btn scroll-bottom" id="scrollBottomBtn" title="아래로"><i class="fa-solid fa-chevron-down"></i></button> </li> </ul> </aside>    <div class="chat-window" id="chatWindow"> <div class="chat-header"> <h4>실시간 문의</h4> <button class="chat-close" id="chatCloseBtn">×</button> </div> <div class="chat-body" id="chatBody"> <div class="message system-msg">안녕하세요! 무엇을 도와드릴까요?</div> </div> <div class="chat-footer"> <input type="text" id="chatInput" placeholder="메시지를 입력하세요..."> <button id="chatSendBtn"><i class="fa-solid fa-paper-plane"></i></button> </div> </div> </body> </html>