?�서?��??�품 - ?�스지?�이�?/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>  <div class="auth-overlay" id="authOverlay"> <div class="auth-modal"> <div class="auth-close" id="authClose">×</div> <div class="auth-tabs"> <div class="auth-tab active" data-target="loginPane">로그인</div> <div class="auth-tab" data-target="signupPane">회원가입</div> </div> <div class="auth-content"> <div class="auth-pane active" id="loginPane"> <div class="auth-header"><h2>환영합니다!</h2><p>간편로그인으로 빠르게 시작하세요.</p></div> <div class="social-login-grid"> <button class="social-btn btn-kakao" id="kakaoLoginBtn"><i class="fa-solid fa-comment"></i> 카카오 로그인</button> <button class="social-btn btn-naver" id="naverLoginBtn"><i class="fa-solid fa-n" style="font-size: 0.8rem;"></i> 네이버 로그인</button> <div id="naverIdLogin" style="display:none;"></div> <button class="social-btn btn-google" id="googleLoginBtn"><i class="fa-brands fa-google"></i> Google 로그인</button> </div> <div class="auth-divider"><span>또는</span></div> <form id="loginForm"> <div class="auth-form-group"><label>이메일</label><input type="email" id="loginEmail" class="auth-input" placeholder="example@email.com" required></div> <div class="auth-form-group"><label>비밀번호</label><input type="password" id="loginPassword" class="auth-input" placeholder="비밀번호를 입력하세요" required></div> <button type="submit" class="auth-submit-btn">로그인</button> </form> <div id="loginMsg" class="auth-message"></div> <div class="auth-sub-links"> <a id="linkFindId">아이디 찾기</a> <span class="divider">|</span> <a id="linkFindPw">비밀번호 찾기</a> </div> </div>  <div class="auth-pane" id="findIdPane"> <div class="auth-header"><h2>아이디 찾기</h2><p>가입 시 입력한 이름과 전화번호를 입력해주세요.</p></div> <form id="findIdForm"> <div class="auth-form-group"><label>이름</label><input type="text" id="findIdName" class="auth-input" placeholder="이름을 입력하세요" required></div> <div class="auth-form-group"><label>전화번호</label><input type="tel" id="findIdPhone" class="auth-input" placeholder="010-0000-0000" required></div> <button type="submit" class="auth-submit-btn">아이디 찾기</button> </form> <div id="findIdMsg" class="auth-message"></div> <div id="findIdResult" class="auth-result-box"> <h4>아이디 찾기 완료</h4> <p>회원님의 아이디(이메일)는 다음과 같습니다.</p> <div class="found-email" id="foundEmailDisplay"></div> <button class="auth-submit-btn" id="btnGoToLoginFromId">로그인하러 가기</button> </div> <div class="auth-sub-links"> <a class="back-to-login">로그인으로 돌아가기</a> </div> </div>  <div class="auth-pane" id="findPwPane"> <div class="auth-header"><h2>비밀번호 찾기</h2><p>가입된 이메일과 이름, 전화번호를 입력하시면<br>비밀번호 재설정 링크를 보내드립니다.</p></div> <form id="findPwForm"> <div class="auth-form-group"><label>이메일(아이디)</label><input type="email" id="findPwEmail" class="auth-input" placeholder="example@email.com" required></div> <div class="auth-form-group"><label>이름</label><input type="text" id="findPwName" class="auth-input" placeholder="이름을 입력하세요" required></div> <div class="auth-form-group"><label>전화번호</label><input type="tel" id="findPwPhone" class="auth-input" placeholder="010-0000-0000" required></div> <button type="submit" class="auth-submit-btn">재설정 링크 발송</button> </form> <div id="findPwMsg" class="auth-message"></div> <div id="findPwResult" class="auth-result-box"> <h4>이메일 발송 완료</h4> <p>입력하신 이메일로 비밀번호 재설정 링크가 발송되었습니다.<br>이메일을 확인해주세요.</p> <button class="auth-submit-btn back-to-login">로그인으로 돌아가기</button> </div> <div class="auth-sub-links"> <a class="back-to-login">로그인으로 돌아가기</a> </div> </div>  <div class="auth-pane" id="resetPwPane"> <div class="auth-header"><h2>비밀번호 재설정</h2><p>새로운 비밀번호를 입력해주세요.</p></div> <form id="resetPwForm"> <div class="auth-form-group"><label>새 비밀번호</label><input type="password" id="resetPwInput" class="auth-input" placeholder="6자 이상 입력" minlength="6" required></div> <div class="auth-form-group"><label>새 비밀번호 확인</label><input type="password" id="resetPwConfirm" class="auth-input" placeholder="다시 한 번 입력" minlength="6" required></div> <button type="submit" class="auth-submit-btn">비밀번호 변경</button> </form> <div id="resetPwMsg" class="auth-message"></div> </div>  <div class="auth-pane" id="signupPane"> <div class="auth-header"><h2>회원가입</h2><p>간단한 정보 입력으로 더 많은 혜택을 누리세요.</p></div> <div class="auth-social-signup"> <div class="auth-social-signup-header"><span>간편 회원가입</span></div> <div class="social-login-grid"> <button class="social-btn btn-kakao social-signup-btn" data-provider="kakao"><i class="fa-solid fa-comment"></i> 카카오로 시작</button> <button class="social-btn btn-naver social-signup-btn" data-provider="naver"><i class="fa-solid fa-n" style="font-size: 0.8rem;"></i> 네이버로 시작</button> <button class="social-btn btn-google social-signup-btn" data-provider="google"><i class="fa-brands fa-google"></i> Google로 시작</button> </div> </div> <div class="auth-divider"><span>또는 이메일로 가입</span></div> <div class="auth-type-selector" id="userTypeSelector"> <div class="auth-type-btn active" data-type="individual">개인 회원</div> <div class="auth-type-btn" data-type="business">기관 / 사업자</div> </div> <form id="signupForm"> <div class="auth-row"> <div class="auth-form-group"><label>이름 *</label><input type="text" id="signupName" class="auth-input" placeholder="홍길동" required></div> <div class="auth-form-group"><label>전화번호 *</label><input type="tel" id="signupPhone" class="auth-input" placeholder="010-0000-0000" required></div> </div> <div class="auth-form-group"><label>이메일 *</label><input type="email" id="signupEmail" class="auth-input" placeholder="example@email.com" required></div> <div class="auth-row"> <div class="auth-form-group"><label>비밀번호 *</label><input type="password" id="signupPassword" class="auth-input" placeholder="6자 이상" minlength="6" required></div> <div class="auth-form-group"><label>비밀번호 확인 *</label><input type="password" id="signupPasswordConfirm" class="auth-input" placeholder="한 번 더 입력" required></div> </div> <div class="auth-form-group" id="orgGroup"><label>소속기관 / 학교 / 도서관명</label><input type="text" id="signupOrg" class="auth-input" placeholder="예: 한국대학교 도서관"></div> <div class="auth-form-group" id="bizGroup" style="display: none;"><label>사업자 등록번호</label><input type="text" id="signupBizNumber" class="auth-input" placeholder="000-00-00000"></div> <div class="auth-form-group"><label>배송/방문용 주소</label><input type="text" id="signupAddress" class="auth-input" placeholder="전체 주소를 입력하세요"></div> <button type="submit" class="auth-submit-btn">가입하기</button> </form> <div id="signupMsg" class="auth-message"></div> </div>  <div class="auth-pane" id="completeProfilePane"> <div class="auth-header"><h2>추가 정보 입력</h2><p>원활한 서비스 이용을 위해 필수 정보를 입력해 주세요.</p></div> <form id="completeProfileForm"> <div class="highlight-box"> <div class="auth-form-group"><label>전화번호 *</label><input type="tel" id="completePhone" class="auth-input" placeholder="010-0000-0000" required></div> <div class="auth-form-group"><label>소속기관 / 학교 / 도서관명 *</label><input type="text" id="completeOrg" class="auth-input" placeholder="예: 한국대학교 도서관" required></div> <div class="auth-form-group"><label>배송/방문용 주소</label><input type="text" id="completeAddress" class="auth-input" placeholder="전체 주소를 입력하세요"></div> </div> <button type="submit" class="auth-submit-btn">정보 저장 및 시작하기</button> </form> <div id="completeMsg" class="auth-message"></div> </div>  <div class="auth-pane" id="myProfilePane"> <div class="auth-header"> <h2>내 정보 관리</h2> <p>회원 정보를 확인하고 수정할 수 있습니다.</p> </div> <form id="myProfileForm"> <div class="auth-form-group"> <label>이름</label> <input type="text" id="myProfileName" class="auth-input" placeholder="이름" required> </div> <div class="auth-form-group"> <label>연락처</label> <input type="tel" id="myProfilePhone" class="auth-input" placeholder="010-0000-0000" required> </div> <div class="auth-form-group"> <label>소속 기관 / 학교명</label> <input type="text" id="myProfileOrg" class="auth-input" placeholder="예: 시립도서관" required> </div> <div class="auth-form-group"> <label>주소</label> <input type="text" id="myProfileAddress" class="auth-input" placeholder="주소를 입력하세요" required> </div> <button type="submit" class="auth-submit-btn">정보 수정하기</button> </form> <div id="myProfileMsg" class="auth-message"></div> </div> </div> </div> </div> <script type="module" src="script.js"></script> <script src="cart.js"></script> <script type="module" src="inquiry.js"></script> <script type="module" src="auth.js"></script> </body> </html>