<!DOCTYPE html>
<!-- Default Layout Import-->
<!--라이브러리 참조 : Thymeleaf & Thymeleaf Layout -->
<html lang="ko">

<!--공통 JS / CSS 영역을 관리하는 환경 영역-->

<html lang="ko">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z7QT1YM292" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>
    <script nonce="xgAQ7Gr-iPX3ecPOw3qxsw">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-Z7QT1YM292');
    </script>

    <!-- 1. 기본 메타 설정 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0" />
    <meta name="robots" content="index, follow">
    <link rel="icon" type="image/png" sizes="32x32" href="/image/icon/favicon-32.png">
    <link rel="canonical" href="/">

    <!-- 2. SEO 및 공유용 메타 데이터 (Open Graph & Twitter) -->
    <meta name="keywords" content="세일정보,공구,인스타공구,패션,공동구매,핫딜,직구,할인코드">
    <meta name="description"
        content="공구, 세일 정보 여기서 다 해!">

    <!-- Open Graph -->
    <meta property="og:site_name" content="스냅업 - SNAPUP">
    <meta property="og:type"
        content="website" />
    <meta property="og:locale" content="ko_KR">
    <meta property="og:title" content="스냅업" />
    <meta property="og:description"
        content="공구, 세일 정보 여기서 다 해!" />
    <meta property="og:image"
        content="https://snapup.co.kr/image/icon/social-default-thumbnail.png" />
    <meta property="og:url"
        content="https://snapup.co.kr/" />

    <!-- Naver & Kakao Product Data -->
    

    <!-- Kakao Commerce (세일 상세 페이지 전용) -->
    

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="스냅업">
    <meta name="twitter:description"
        content="공구, 세일 정보 여기서 다 해!">
    <meta name="twitter:image"
        content="https://snapup.co.kr/image/icon/social-default-thumbnail.png">

    <!-- 게시물 메타 정보 (날짜 등) -->
    

    <!-- 3. 네트워크 연결 최적화 (Preconnect) -->
    <link rel="preconnect" href="https://gn100-bucket.s3.ap-northeast-2.amazonaws.com"> <!-- 이미지 서버 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> <!-- 폰트 서버 -->
    <link rel="preconnect" href="https://www.googletagmanager.com"> <!-- 구글 태그 매니저 -->
    <link rel="dns-prefetch" href="https://www.google-analytics.com"> <!-- 구글 애널리틱스 -->
    <link rel="dns-prefetch" href="https://pagead2.googlesyndication.com"> <!-- 광고 서버 -->
    <link rel="dns-prefetch" href="https://googleads.g.doubleclick.net"> <!-- 광고 서버 -->

    <!-- 4. 웹 폰트 최적화 (Pretendard Variable Dynamic Subset - 필요한 조각만 로드하여 속도 극대화) -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />




    <!-- 5. 핵심 CSS (상단 렌더링에 필수적인 항목들) -->
    <link rel="stylesheet" href="/lib/newCss/normalize.css">
    <link rel="stylesheet" href="/lib/newCss/theme.css">
    <link rel="stylesheet" href="/lib/newCss/base.css">
    <link rel="stylesheet" href="/lib/newCss/header.css">
    <link rel="stylesheet" href="/lib/newCss/footer.css">


    <!-- 6. 핵심 자바스크립트 (비동기 로드) -->
    <script defer type="module" src="/lib/newJs/header.js" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>
    <script defer src="/lib/newJs/common.js" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>
    <script defer src="https://unpkg.com/axios/dist/axios.min.js" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>
    <script type="module" src="/lib/newJs/axiosInterceptor.js" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>
    
    <!-- 7. XSS 방어용 JS (DOMPurify) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>

    <!-- 8. 기타 보안 및 설정 -->
    
        <meta name="_csrf" content="767dfecb-6c2b-4acb-87b1-5d537a561531" />
        <meta name="_csrf_header" content="X-XSRF-TOKEN" />
    
</head>

</html>

<body>
  <!--Header 영역을 참조합니다.-->
  <html class="no-js" lang="ko" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
</head>


<!--<h1>Authenticated DTO:</h1>
<h1 sec:authentication="principal" id="sec-principal"></h1>
-->
<!-- CustomerContext.java에서 설정해준 것을 사용하는 것임 -->
<!--
<div sec:authorize="isAuthenticated()" sec:authentication="principal.nickName"></div>
-->


<div class="headerContainer" id="header_container">


    <header class="appHeader" id="app_header">



        <div class="header-top">
            <div class="logo-container">
                <a href="/" class="logo-link-container">
                    <img class="header-main-logo" src="/image/icon/header-logo.png" alt="스냅업 로고" width="38"
                        height="38">
                    <span class="header-name">스냅업</span>
                </a>
            </div>
            <div class="appNavigation menu">
                <ul class="menu__list">
                    <li class="menu__item mobile--show login mobile-login-container">
                        <a href="/login" class="menu__link login"><img src="/image/icon/login-default-profile.png"
                                alt="기본 프로필 이미지" class="" width="40" height="40" loading="lazy">로그인 및 회원가입</a>
                    </li>
                    <!-- menu__link + login 하면 마우스 오버시 강조 안됨-->
                    
                    <!-- 모바일에서 로그인 했을 때만 보이는 메뉴 -->
                    
                    <!-- 모바일에서만 보이는 메뉴 시작 -->
                    <li class="menu__item nav-menu mobile--show">
                        <a href="http://pf.kakao.com/_xlacxoxj" class="menu__link main-menu" target="_blank"
                            rel="noopener">
                            <img class="mobile-menu-icon" src="/image/icon/kakaotalk_sharing_btn_small.png"
                                alt="카카오톡 문의 아이콘" loading="lazy">카톡 문의
                        </a>
                    </li>
                    <li class="menu__item nav-menu mobile--show">
                        <a href="/sale/write" class="menu__link main-menu">
                            <div class="mobile-menu-icon" id="mobile_menu_post_icon"><svg
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="12" y1="5" x2="12" y2="19" />
                                    <line x1="5" y1="12" x2="19" y2="12" />
                                </svg></div>
                            세일 등록
                        </a>
                    </li>
                    <!-- 모바일에서만 보이는 메뉴 끝 -->

                    <li class="menu__item nav-menu has-submenu"><a href="/sale" class="menu__link main-menu"
                            data-postDvs="sale">세일정보<span class="header-dropDown-icon"><svg
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                    <polyline points="6 9 12 15 18 9" />
                                </svg></span></a>
                        <ul class="submenu">
                            <li><a href="/sale" class="submenu__link" data-postCategory="ALL">전체</a></li>
                            <li><a href="/sale?postAttribute=popular" class="submenu__link"
                                    data-postCategory="popular">인기정보</a></li>
                            <li><a href="/sale?postCategory=CLOTHING" class="submenu__link"
                                    data-postCategory="CLOTHING">의류</a></li>
                            <li><a href="/sale?postCategory=BEAUTY" class="submenu__link"
                                    data-postCategory="BEAUTY">뷰티</a></li>
                            <li><a href="/sale?postCategory=FOOD" class="submenu__link"
                                    data-postCategory="FOOD">식품</a></li>
                            <li><a href="/sale?postCategory=SPORTS" class="submenu__link"
                                    data-postCategory="SPORTS">스포츠</a></li>
                            <li><a href="/sale?postCategory=LIVING" class="submenu__link"
                                    data-postCategory="LIVING">리빙</a></li>
                            <li><a href="/sale?postCategory=KIDS" class="submenu__link"
                                    data-postCategory="KIDS">키즈</a></li>
                            <li><a href="/sale?postCategory=ETC" class="submenu__link"
                                    data-postCategory="ETC">기타</a></li>
                        </ul>
                    </li>

                    <li class="menu__item nav-menu"><a href="/influencer" class="menu__link main-menu"
                            data-postDvs="influencer">인플루언서</a></li>

                    <li class="menu__item nav-menu has-submenu"><a href="/community" class="menu__link main-menu"
                            data-postDvs="community">커뮤니티<span class="header-dropDown-icon"><svg
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                    <polyline points="6 9 12 15 18 9" />
                                </svg></span></a>
                        <ul class="submenu">
                            <li><a href="/community" class="submenu__link" data-postCategory="ALL">전체</a>
                            </li>
                            <li><a href="/community?postCategory=TALKING" class="submenu__link"
                                    data-postCategory="TALKING">일상</a></li>
                            <li><a href="/community?postCategory=KOR_REVIEW" class="submenu__link"
                                    data-postCategory="KOR_REVIEW">국내 구매후기</a></li>
                            <li><a href="/community?postCategory=FRN_REVIEW" class="submenu__link"
                                    data-postCategory="FRN_REVIEW">해외 구매후기</a></li>
                            <li><a href="/community?postCategory=REVIEW" class="submenu__link"
                                    data-postCategory="REVIEW">공구후기</a></li>
                            <li><a href="/community?postCategory=QNA" class="submenu__link"
                                    data-postCategory="QNA">질문응답</a></li>
                        </ul>
                    </li>

                    <li class="menu__item nav-menu has-submenu"><a href="/management" class="menu__link main-menu"
                            data-postDvs="management">공지사항<span class="header-dropDown-icon"><svg
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                    <polyline points="6 9 12 15 18 9" />
                                </svg></span></a>
                        <ul class="submenu">
                            <li><a href="/management" class="submenu__link" data-postCategory="ALL">전체</a>
                            </li>
                            <li><a href="/management?postCategory=NOTICE" class="submenu__link"
                                    data-postCategory="NOTICE">공지사항</a></li>
                        </ul>
                    </li>

                    <!-- 관리자/매니저만 보이는 메뉴 -->
                    

                </ul>
            </div>

            <div class="header-top-right">
                <ul class="header-right-icon-list-box">
                    <li class="header-right-icon-container only-desktop">
                        <form class="searchForm" id="searchForm" action="#">
                            <button type="button" class="search--button search--button--trigger header-right-icon-box" id="desktopSearchTrigger" title="검색 열기">
                                <svg class="fontawesomesvg search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="11" cy="11" r="8" />
                                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                                </svg>
                            </button>
                            <div class="searchForm__expandable" id="desktopSearchExpandable">
                                <div class="searchForm__filters">
                                    <select class="searchForm__select" id="desktopSearchTarget" title="검색 대상">
                                        <!-- TODO: 전체 검색 기능 구현 후 주석 해제 -->
                                        <!-- <option value="ALL">전체</option> -->
                                        <option value="sale">세일/핫딜</option>
                                        <option value="community">커뮤니티</option>
                                        <option value="management">공지사항</option>
                                    </select>
                                    <select class="searchForm__select" id="desktopSearchType" title="검색 타입">
                                        <option value="A">전체</option>
                                        <option value="SC">제목+내용</option>
                                        <option value="S">제목</option>
                                        <option value="C">내용</option>
                                        <option value="U" style="display: none;">링크</option>
                                    </select>
                                </div>
                                <div class="formInput searchForm__group" id="search_form_group">
                                    <input id="search" class="formInput__input" type="search" placeholder="검색어를 입력하세요" name="search" autocomplete="off" />
                                </div>
                                <button type="submit" class="search--button search--button--fill" title="검색">
                                    <svg class="fontawesomesvg search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <circle cx="11" cy="11" r="8" />
                                        <line x1="21" y1="21" x2="16.65" y2="16.65" />
                                    </svg>
                                </button>
                                <button type="button" class="search--button search--button--close" id="desktopSearchClose" title="닫기">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                                </button>
                            </div>
                        </form>
                    </li>
                    <li class="header-right-icon-container mobile--show">
                        <div id="mobileSearchTrigger" class="header-right-icon-box" style="cursor: pointer;">
                            <svg class="header-right-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8" />
                                <line x1="21" y1="21" x2="16.65" y2="16.65" />
                            </svg>
                        </div>
                    </li>
                    <li class="header-right-icon-container">
                        <a id="top_notify_area">
                            <div id="header_right_notify_icon" class="header-right-icon-box top-notify-area">
                                <!--<div class="fa-regular fa-bell notify-icon button-icon header-right-icon"></div>-->
                                <svg class="notify-icon button-icon header-right-icon"
                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                                    <path d="M13.73 21a2 2 0 0 1-3.46 0" />
                                </svg>
                                <span class="notify-number" id="notify_number" style="display :none"></span>
                            </div>
                            <span class="header-right-item-text only-desktop" style="display: none;">알림</span>
                        </a>
                    </li>


                    <li class="header-right-icon-container only-desktop">
                        <a href="/sale/write">
                            <div class="header-right-icon-box" id="header_right_post_icon">
                                <svg class="header-right-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="12" y1="5" x2="12" y2="19" />
                                    <line x1="5" y1="12" x2="19" y2="12" />
                                </svg>
                            </div>
                            <span class="header-right-item-text" style="display: none;">세일 등록</span>
                        </a>
                    </li>
                    <li class="header-right-icon-container only-desktop">
                        <!--<a href="/login"> -->
                        <a href="#" id="header_login_button">
                            <div class="header-right-icon-box" id="header_right_singUp_icon">
                                <svg class="header-right-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                                    <circle cx="12" cy="7" r="4" />
                                </svg>
                            </div>
                            <span class="header-right-item-text" style="display: none;">로그인</span>
                        </a>
                    </li>

                    

                </ul>
            </div>
            <!--모바일 모드 알림 버튼 -->
            <!--모바일 모드 버거 버튼 -->
            <!-- <i class="fa-solid fa-bars button--none button--burger fa-2x" aria-label="메뉴 열기"></i> -->
            <div class="buttonWrapper">
                <button class="button--none button--burger" aria-label="메뉴 열기">
                    <svg class="fontawesomesvg burger-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="3" y1="12" x2="21" y2="12" />
                        <line x1="3" y1="6" x2="21" y2="6" />
                        <line x1="3" y1="18" x2="21" y2="18" />
                    </svg>
                </button>

            </div>
        </div>


        <!--</div> -->


        <!-- 모바일 검색 오버레이 추가 -->
        <div id="mobileSearchOverlay" class="search-overlay">
            <div class="search-overlay-header">
                <button id="closeSearchX" class="overlay-back-btn" aria-label="닫기">
                    <svg viewBox="0 0 24 24" width="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></svg>
                </button>
                <form id="mobileSearchForm" class="overlay-search-form">
                    <input type="search" id="mobileSearchInput" placeholder="검색어를 입력하세요" autocomplete="off">
                </form>
            </div>
            <div class="search-overlay-filter">
                <select id="mobileSearchTarget" class="overlay-search-select" title="검색 대상">
                    <!-- TODO: 전체 검색 기능 구현 후 주석 해제 -->
                    <!-- <option value="ALL">전체 게시판</option> -->
                    <option value="sale">세일/핫딜</option>
                    <option value="community">커뮤니티</option>
                    <option value="management">공지사항</option>
                </select>
                <select id="mobileSearchType" class="overlay-search-select" title="검색 타입">
                    <option value="A">전체</option>
                    <option value="SC">제목+내용</option>
                    <option value="S">제목</option>
                    <option value="C">내용</option>
                    <option value="U">링크</option>
                </select>
            </div>
        </div>
    </header>


    <nav class="header-sub-nav">
        <div class="header-sub-nav-inner">
            <!-- 데스크탑 전용 좌측 스크롤 버튼 -->
            <button class="sub-nav-scroll-btn left only-desktop" id="subNavLeftBtn" aria-label="왼쪽으로 스크롤">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
            </button>

            <div class="header-sub-nav-viewport" id="subNavViewport">
                <ul class="header-sub-nav-items" id="subNavItems">
                    <li class="header-sub-nav-item">
                        <h4 class="header-sub-nav-headline">
                            <span class="header-sub-nav-headlineText">카테고리</span>
                            <span></span>
                        </h4>
                    </li>
                    <!-- 세일 정보 섹션 -->
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale" data-postDvs="sale"><span class="sub-nav-icon"><span class="sub-nav-all-text">ALL</span></span><span class="sub-nav-text">세일/핫딜</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postAttribute=popular" data-postAttribute="popular"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span><span class="sub-nav-text">인기정보</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=CLOTHING" data-postCategory="CLOTHING"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46L16 2 12 5.5 8 2 3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a2 2 0 0 0 1.99 1.67H6v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V10.83h1.15a2 2 0 0 0 1.99-1.67l.58-3.47a2 2 0 0 0-1.34-2.23z"></path></svg></span><span class="sub-nav-text">의류</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=BEAUTY" data-postCategory="BEAUTY"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></span><span class="sub-nav-text">뷰티</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=FOOD" data-postCategory="FOOD"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg></span><span class="sub-nav-text">식품</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=SPORTS" data-postCategory="SPORTS"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></span><span class="sub-nav-text">스포츠</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=LIVING" data-postCategory="LIVING"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></span><span class="sub-nav-text">리빙</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=KIDS" data-postCategory="KIDS"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span><span class="sub-nav-text">키즈</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/sale?postCategory=ETC" data-postCategory="ETC"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></span><span class="sub-nav-text">기타</span></a></li>
                    
                    <!-- 구분선 (데스크탑 전용) -->
                    <li class="header-sub-nav-item separator only-desktop">|</li>
                    
                    <!-- 커뮤니티 섹션 (JS 스크롤 타겟) -->
                    <li class="header-sub-nav-item" id="nav_community_start"><a class="header-sub-nav-link" href="/community" data-postDvs="community"><span class="sub-nav-icon"><span class="sub-nav-all-text">ALL</span></span><span class="sub-nav-text">커뮤니티</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/community?postCategory=TALKING" data-postCategory="TALKING"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span><span class="sub-nav-text">일상</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/community?postCategory=KOR_REVIEW" data-postCategory="KOR_REVIEW"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></span><span class="sub-nav-text">국내 구매후기</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/community?postCategory=FRN_REVIEW" data-postCategory="FRN_REVIEW"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg></span><span class="sub-nav-text">해외 구매후기</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/community?postCategory=REVIEW" data-postCategory="REVIEW"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg></span><span class="sub-nav-text">공구후기</span></a></li>
                    <li class="header-sub-nav-item"><a class="header-sub-nav-link" href="/community?postCategory=QNA" data-postCategory="QNA"><span class="sub-nav-icon"><svg class="sub-nav-svg-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span><span class="sub-nav-text">질문응답</span></a></li>
                </ul>
            </div>

            <!-- 데스크탑 전용 우측 스크롤 버튼 -->
            <button class="sub-nav-scroll-btn right only-desktop" id="subNavRightBtn" aria-label="오른쪽으로 스크롤">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
            </button>
        </div>
    </nav>

</div>

</html>

  <!--Content 내용 영역을 참조합니다-->
  <html lang="ko">

<head>
    <title>스냅업 - 오류 발생</title>
    <!-- 외부 CSS 파일 연결 -->
    <link rel="stylesheet" href="/lib/newCss/content.css">
    <style>
        .error-section {
            text-align: center;
            padding: 80px 20px;
        }
        .error-icon {
            width: 120px;
            height: 120px;
            margin-bottom: 30px;
            color: var(--point-color-blue);
        }
        .error-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #333;
            margin-bottom: 20px;
        }
        .error-msg {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 40px;
            line-height: 1.6;
        }
        .technical-box {
            margin: 50px auto;
            max-width: 600px;
            padding: 24px;
            background-color: #f8f9fa;
            border: 1px solid #eee;
            border-radius: 12px;
            text-align: left;
            font-size: 0.9rem;
            color: #777;
        }
        .technical-box h3 {
            margin-top: 0;
            font-size: 1rem;
            color: #444;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .home-btn {
            display: inline-flex;
            align-items: center;
            padding: 14px 32px;
            background-color: #2980b9;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: transform 0.2s, background-color 0.2s;
        }
        .home-btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
    </style>
</head>

<body>
<main>
    <div class="content_container content lg">
        <div class="error-section">
            <!-- 고품질 SVG 아이콘 -->
            <svg class="error-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="8" x2="12" y2="12"></line>
                <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
            
            <h1 class="error-title">오류가 발생했습니다</h1>
            <p class="error-msg">예기치 못한 오류가 발생했습니다. 서비스 이용에 불편을 드려 죄송합니다.</p>
            
            <div class="technical-box">
                <h3>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                    운영자 확인용 정보
                </h3>
                <ul style="list-style: none; padding-left: 0; margin-bottom: 0;">
                    <li style="margin-bottom: 8px;"><strong>발생 시각:</strong> <span id="error-time"></span></li>
                    <li style="margin-bottom: 8px;"><strong>접속 URL:</strong> <span id="error-url"></span></li>
                    <li><strong>브라우저:</strong> <span id="error-ua"></span></li>
                </ul>
            </div>
            
            <a href="/" class="home-btn">메인으로 돌아가기</a>
        </div>
    </div>

    <script>
        document.getElementById('error-time').textContent = new Date().toLocaleString();
        document.getElementById('error-url').textContent = window.location.href;
        document.getElementById('error-ua').textContent = navigator.userAgent;
    </script>
</main>
</body>
</html>

  <!-- Footer 영역을 참조합니다.-->
  <html lang="ko">
<head>


</head>

<footer class="footer">

    <div class="footer__container">
        <h1 class="a11yHidden">Footer 영역입니다.</h1>
        <address class="address">
            <span>주소 : 서울시 강남구 </span><br>
            <span>이메일 : snapup.admin@gmail.com</span><br>
            <a target="_blank" href ="http://pf.kakao.com/_xlacxoxj" rel="noopener"><span>카카오 문의</span></a>
        </address>
        <small class="copyright">Copyright since &copy; 2024 by SNAPUP CORPORATION ALL RIGHTS RESERVED.</small>
        <ul class="footer__menu__list">
            <li class="footer__menu__item"><a href="/management?postCategory=NOTICE" class="footer__menu__link">공지사항</a></li>
            <li class="footer__menu__item"><a href="/agreement" class="footer__menu__link">이용약관</a></li>
            <li class="footer__menu__item">
                <a href="https://pf.kakao.com/_xlacxoxj" target="_blank" rel="noopener" class="footer__menu__link footer__kakao-link">
                    <img src="/image/icon/kakaotalk_sharing_btn_small.png" alt="카카오" class="footer__kakao-icon">
                    <span>카톡문의</span>
                </a>
            </li>
            <li class="footer__menu__item"><a href="/privacy" class="footer__menu__link">개인정보 처리방침</a></li>
        </ul>
    </div>
</footer>
    <div id="toast-container"></div>
</body>
</html>

  <!-- 유저 세션 정보 (전역 사용) -->
  <div id="userData">
  </div>

  <!-- CSRF, Logout 처리를 위한 공용 form -->
  <form id="logoutForm" action="/logout" method="post" style="display: none;"><input type="hidden" name="_csrf" value="767dfecb-6c2b-4acb-87b1-5d537a561531"/></form>

  <!-- 게시판 검색 조건 전역화 (Thymeleaf 모델의 객체를 JS 변수로 변환) -->
  <script nonce="xgAQ7Gr-iPX3ecPOw3qxsw">
    /*<![CDATA[*/
    window.postSearchCondition = null;
    /*]]>*/
  </script>

  <!-- 구글 애드센스 (지연 로딩 및 LCP 최적화: Body 하단 배치) -->
  <script async defer
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5679158351186692"
    crossorigin="anonymous" nonce="xgAQ7Gr-iPX3ecPOw3qxsw"></script>

  <!-- Speculation Rules API: 제외 규칙 강화 버전 -->
  <script type="speculationrules" nonce="xgAQ7Gr-iPX3ecPOw3qxsw">
{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "or": [
              { "selector_matches": ".post-card > a" },
              { "href_matches": "/sale/*" },
              { "href_matches": "/index*postDvs=sale*" }
            ]
          },
          { "not": { "href_matches": "*write*" } },
          { "not": { "href_matches": "*modify*" } }
        ]
      },
      "eagerness": "conservative"
    }
  ]
}
</script>

</body>

</html>