/* ✅ 모든 요소 공통 설정 */
        * {
          box-sizing: border-box;   /* padding, border 포함해서 width 계산 */
          margin: 0;                /* 브라우저 기본 여백 제거 */
          padding: 0;               /* 브라우저 기본 안쪽 여백 제거 */
        }

        /* ✅ 전체 페이지에 적용할 기본 스타일 */
        body {
          background-color: #f8f9fa;             /* 연회색 배경 (Bootstrap 기본톤) */
          font-family: Arial, sans-serif;        /* 기본 폰트 (웹 안전 폰트) */
          padding: 0px;                         /* 페이지 바깥 여백 */
          font-size: 16px;                       /* 기본 글자 크기 */
          line-height: 1.6;                      /* 줄 간격 */
          color: #212529;                        /* 본문 글자 색상 (어두운 회색) */
        }

        /* ✅ a 태그(링크)의 기본 스타일 */
        a {
          color: #007bff;              /* 파란색 링크 */
          text-decoration: none;       /* 밑줄 제거 */
        }
        a:hover {
          text-decoration: underline;  /* 마우스 오버 시 밑줄 표시 */
        }

        /* ✅ 기본 제목 태그 (h1~h6) 여백 조정 */
        h1, h2, h3, h4, h5, h6 {
          margin-bottom: 0.75em;       /* 제목 아래 여백으로 글자와 글자 사이 공백 확보 */
          font-weight: bold;           /* 기본적으로 굵게 */
        }

        /* ✅ 단락(p) 기본 여백 설정 */
        p {
          margin-bottom: 1em;
        }

        /* ✅ 반응형 폰트 크기 조정 */
        /* 기본 (모바일 기준) */
        html {
          font-size: 16px;
        }
        body {
          font-size: 16px;
        }

        /* 📱 모바일 (최대 576px) 화면에 글자 크기  */
         @media (max-width: 576px) {  
          html {
            font-size: 16px;
          }
          body {
            font-size: 16px;
          }
          
        }

        /* 📱 모바일 (최대 767px) 화면에 글자 크기  */
        @media (max-width: 767px) {
          html {
            font-size: 16px;
          }
          body {
            font-size: 16px;
          }
        }

        /* 💻 태블릿 (768px ~ 1199px) 화면에 글자 크기  */
        @media (min-width: 768px) and (max-width: 1199px) {
          html {
            font-size: 17px;
          }
          body {
            font-size: 17px;
          }          
        }

        /* 🖥️ 데스크탑 (1200px 이상) 화면에 글자 크기 */
        @media (min-width: 1200px) {
          html {
            font-size: 18px;
            /* 웹 페이지 전체의 기준 글자 크기를 설정 모든 글꼴의 기준 크기가 18px로 설정됨 */
          }
          body {
            font-size: 18px; 
            /* body css로  안 일반 글자 18px에 적용을 받음 */
          }
          .navbar-nav {
            flex-wrap: nowrap;        /* 🔑 메뉴 항목 줄바꿈 방지 */
            overflow-x: auto;         /* 넘칠 경우 가로 스크롤 생성 */
          }
        }
        
         /* 네비게이션 메뉴 항목 글자 크기 */
        .navbar-nav .nav-link {
          font-size: 1rem;    /* 필요에 따라 0.8rem, 12px 등으로 조정 */
        }
      
        /* 상단 사용자 이름 표시 영역 글자 크기 */
        .navbar-text {
          font-size: 1rem;
        }

        /* 버튼 내 글자 크기 (선택적으로 적용) */
        .navbar .btn {
          font-size: 1rem;
        }

        /* 관리자 추천 방범 제품 목록 글자 크기 */
        #popularAbcPostList li {
          font-size: 16px;    /* 원하는 글자 크기로 조정 */
        }

        #popularAbcPostList a {
          font-size: 16px;    /* 링크 글자 크기도 따로 조정 */
        }


        /* 일반 추천 방범 제품 목록 글자 크기 */
        #popularProductList li {
          font-size: 16px;
        }

        #popularProductList a {
          font-size: 16px;
        }


        /* 유튜브 동영상 목록 글자 크기 */
        #popularVideoList li {
          font-size: 16px;
        }

        #popularVideoList a {
          font-size: 16px;
        }


        /* 업로드 동영상 목록 글자 크기 */
        #popularVideoUploadList li {
          font-size: 16px;
        }

        #popularVideoUploadList a {
          font-size: 16px;
        }


         /* ✅ 유튜브, 게시물, 상품 외곽 박스 강조 스타일 */
        .border-box {
          border: 1px solid #007bff;           /* 파란색 외곽선 */
          border-radius: 12px;                 /* 둥근 테두리 */
          background-color: #fff;              /* 배경은 흰색 */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* 부드러운 그림자 효과 */
          margin-bottom: 30px;                 /* 아래쪽 공간 */
        }



        /* ✅ 메인 레이아웃 컨테이너 설정
        - Flexbox를 사용해 콘텐츠를 가로로 나열
        - 줄바꿈 허용 (wrap)
        - 콘텐츠 사이에 여백(gap) 설정 */
        .main-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        }

        /* ✅ 상품들을 감싸는 컨테이너 영역
        - Flexbox로 구성하여 상품들을 가로로 정렬
        - 줄바꿈 허용, 간격 조정
        - `justify-content: center` 설정으로 화면이 작아졌을 때도 중앙 정렬 유지 */
        #productContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        }

        /* ✅ 우측 콘텐츠 영역
        - 예: 추천 콘텐츠, 광고, 필터 등
        - 배경색은 연회색 계열
        - 패딩, 테두리 둥글게, 그림자 효과로 입체감 부여 */
        .right-content {
        flex: 1;
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.8);
        }

        /* ✅ 상품 카드 스타일
        - 고정 너비 260px
        - 하얀 배경, 둥근 테두리, 테두리 그림자
        - hover 시 약간 확대되어 인터랙티브한 느낌 제공 */
        .product {
        width: 260px;
        flex: 0 0 auto;
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
        background: white;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        transition: transform 0.3s;
        }
        .product:hover {
        transform: scale(1.02);
        }

        /* ✅ 상품 이미지 및 캐러셀 이미지 스타일
        - 이미지가 카드에 꽉 차게 표시
        - 비율 유지하며 채우기 (object-fit: cover)
        - 테두리 둥글게 + 하단 테두리 추가 */
        .product img,
        .carousel-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-bottom: 1px solid #ddd;
        border-radius: 10px;
        cursor: pointer;
        }

        /* ✅ 캐러셀 이미지 전용 스타일
        - 이미지 높이 약간 더 큼
        - hover 시 부드럽게 확대되는 효과 제공 */
        .carousel-image {
        height: 250px;
        transition: transform 0.3s ease;
        }
        .carousel-image:hover {
        transform: scale(1.05);
        }

        /* ✅ 상품 제목 텍스트 스타일 */
        .title {
        font-size: 1rem;
        font-weight: bold;
        margin: 10px 0;
        }
        .product .title {
        margin-top: 0.5rem;
        }
        .title a {
        color: #333;
        text-decoration: none;
        }
        .title a:hover {
        text-decoration: underline;
        }

        /* ✅ 가격 및 등록일 텍스트 스타일 */
        .product .price {
        font-size: 16px;
        font-weight: 600;
        }
        .product .date {
        font-size: 13px;
        color: grey;
        }

        /* ✅ 일부 요소 숨김 처리
        - 필요시 보여주거나 JS로 토글 예정
        - 대표 이미지 썸네일 목록, 가격/날짜 등 */
        .content,
        .date,
        .price,
        .thumbnail-container {
        display: none !important;
        }

        /* ✅ 대표 이미지 썸네일 스타일
        - 대표 이미지 표시용 박스
        - 정사각형 비율 유지, 배경 이미지로 채움 */
        .thumbnail {
        width: 350px;
        height: 350px;
        background-size: cover;
        background-position: center;
        border: 1px solid #ddd;
        border-radius: 10px;
        margin-bottom: 10px;
        }

        /* ✅ 썸네일 리스트 컨테이너
        - 여러 썸네일을 가로 스크롤로 볼 수 있게 구성 */
        .thumbnail-container {
        display: flex;
        gap: 10px;
        overflow-x: scroll;
        }
        .thumbnail-container img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 5px;
        }

        /* ✅ 이미지 미리보기 영역 (업로드 시 사용자 확인용) */
        .image-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        }
        .image-preview img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 5px;
        }

        /* ✅ 상세페이지 대표 이미지 스타일
        - 상품 상세보기 등에서 크게 표시되는 대표 이미지 */
        .detail-pic {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        }

        /* ✅ 필터 옵션 드롭다운(셀렉트박스) 최소 너비 설정 */
        .form-select.w-auto {
        min-width: 160px;
        }

        /* ✅ 유튜브, 게시물, 상품 외곽 박스 강조 스타일 */
        .border-box {
        border: 2px solid #007bff;
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        }

        /* ✅ 다크 모드 전체 설정
        - 배경/텍스트/버튼 등 어두운 색상으로 변경 */
        body.dark-mode {
        background-color: #121212;
        color: #e0e0e0;
        }
        body.dark-mode .form-select,
        body.dark-mode .btn,
        body.dark-mode .list-group-item,
        body.dark-mode .product {
        background-color: #1e1e1e;
        color: #ffffff;
        border-color: #444;
        }

        /* ✅ 다크 모드일 때 링크 색상 변경 */
        body.dark-mode a {
        color: #80cbc4;
        }

        /* ✅ 제목 길이 제한 - 10자까지만 보이고 말줄임 표시 */
        .title-truncate {
        display: inline-block;
        max-width: 15em;            /* 글자 수 기준 폭 제한 (1em ≈ 1글자) */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: middle;
        }

        /* ✅ 상품 목록 출력 영역 (상품 카드 컨테이너) id: productContaine*/
        #productContainer {

          /* 위에 떠 있는 float 요소 아래로 이 컨테이너가 배치되도록 처리 */
          clear: both;

          /* 자식 요소들의 position:absolute 기준을 이 컨테이너로 지정 */
          position: relative;

          /* 위쪽(정렬/필터 영역)과의 여백 확보 */
          margin-top: 1rem;
        }       

       /* 상품 게시물 조회수, 좋아요 등의  글자 크기 주정하기 */
      .like-btn  {
        font-size: 14px;           /* 하트 크기 */
        width: 20px;               /* 가로 */
        height: 20px;              /* 세로 (가로와 같게) */
        padding: 0;                /* 내부 여백 제거 (텍스트 중앙 배치) */
        text-align: center;        /* 텍스트 중앙 정렬 */
        line-height: 15px;         /* 버튼 높이와 같게 설정해 텍스트 세로 중앙 배치 */
        border-radius: 4px;        /* 사각형. 둥글게 하려면 값 증가 */
      }

       /* ✅ 팝업의 전체 외부 레이아웃 박스 설정  ------------------  */
        .popup {
          position: fixed;                /* ✅ 스크롤과 관계없이 화면에 고정됨 */
          top: 40px;                      /* ✅ 화면 상단에서 40px 아래 위치 */
          left: 0;                        /* ✅ 화면 왼쪽 끝부터 시작 */
          width: 100vw;                   /* ✅ 전체 뷰포트 너비 차지 (화면 너비 전체) */
          height: auto;                   /* ✅ 내부 콘텐츠 높이에 따라 자동 조절 */
          /* background-color: rgba(0,0,0,0.1);  */
          display: flex;                  /* ✅ 가운데 정렬을 위한 flex 컨테이너 */
          justify-content: center;       /* ✅ 수평 중앙 정렬 */
          align-items: flex-start;       /* ✅ 수직 방향 상단 정렬 (top 기준) */
          z-index: 9999;                  /* ✅ 다른 요소 위에 표시 (맨 위로 올라옴) */
          padding: 40px 0;                /* ✅ 위아래 여백을 추가해서 콘텐츠가 눌리지 않도록 */
        }

        /* ✅ 팝업 내부 콘텐츠 상자 (실제 창처럼 보이는 부분) */
        .popup-content {
          background: #FAF3E0;               /* ✅ 하얀 배경 */
          padding: 40px 50px;             /* ✅ 상하 40px, 좌우 50px 여백으로 넉넉하게 */
          border-radius: 12px;            /* ✅ 모서리 둥글게 처리 */
          width: 600px;                   /* ✅ 팝업 너비를 넓게 지정 (중간 크기) */
          box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* ✅ 부드러운 그림자 (입체감) */
          text-align: center;            /* ✅ 내부 텍스트 가운데 정렬 */
        }

        /* ✅ 하단 버튼 영역 (체크박스 + 닫기 버튼 포함) */
        .popup-actions {
          margin-top: 20px;               /* ✅ 버튼과 본문 사이에 간격 줌 */
          display: flex;                  /* ✅ 가로 정렬을 위한 flex 사용 */
          justify-content: space-between; /* ✅ 좌우로 요소 분배 (양쪽 정렬) */
          align-items: center;            /* ✅ 수직 가운데 정렬 */
        }

        /* ✅ 닫기 버튼 스타일 */
        .popup-actions button {
          background-color: #007BFF;      /* ✅ 파란색 배경 (Bootstrap 색상 계열) */
          color: white;                   /* ✅ 흰색 글자 */
          border: none;                   /* ✅ 테두리 없음 */
          padding: 8px 14px;              /* ✅ 버튼 크기 조정 (상하/좌우 여백) */
          border-radius: 6px;             /* ✅ 버튼 둥글게 */
          cursor: pointer;                /* ✅ 마우스 올렸을 때 커서 변경 */
        }

        /* ✅ 닫기 버튼 hover 시 효과 */
        .popup-actions button:hover {
          background-color: #0056b3;      /* ✅ 더 진한 파란색으로 변경 */
        }
        /* ✅ 팝업의 전체 외부 레이아웃 박스 설정  ------------------  */


        


      




         /* 📱 [모바일 화면: 가로 576px 이하] */
        @media (max-width: 576px) {
          body {
            background-color: snow; /* 밝은 배경색으로 가독성 향상 (모바일 전용) */
          }
          .navbar .btn {
            font-size: 0.8rem;         /* 버튼 텍스트 크기 작게 조정 */
            padding: 0.3rem 0.6rem;    /* 버튼 안쪽 여백 줄여서 공간 확보 */
          }
          #searchInput {
            width: 100%;               /* 검색창을 전체 너비로 확장 */
          }

          .product {
            width: 100%;
            max-width: 400px;
            margin: auto;
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }

           #productContainer {
                justify-content: center;
            }
          
        }

        /* 📱💻 [태블릿 화면: 가로 577px ~ 768px] */
        @media (min-width: 577px) and (max-width: 768px) {
          body {
            background-color: whitesmoke; /* 태블릿 전용 배경색 */
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }

          .product {
            width: 100%;
            max-width: 300px;
            margin: auto;
          }
         
          
        }

        /* 💻 [노트북/중간 해상도: 가로 769px ~ 1199px] */
        @media (min-width: 769px) and (max-width: 1199px) {
          body {
            background-color: seashell; /* 중간 화면 전용 배경색 */
          }
          .product {
            width: 100%;
            max-width: 300px;
            margin: auto;
          }
         
           /* 텍스트 요소 숨김 (공간 절약) */
          /* .navbar-text {
            display: none;            
          } */
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }
        }

        /* 🖥️ [데스크탑/대형 화면: 가로 1200px 이상] */
        @media (min-width: 1200px) {
          body {
            background-color: honeydew; /* 데스크탑 전용 배경색 */
          }
          .product {
            width: 100%;
            max-width: 300px;
            margin: auto;
          }
        
          .navbar-text {
            font-size: 1rem;           /* 네비게이션 텍스트 크기 조정 */
            display: inline-block;     /* 텍스트 보이도록 설정 */
          }
          /* 회원가입 보이지 않게 위치도 사라지게 하기 */
          #signupBtn {
            display: none !important;    /* 🔥 해당 화면 크기에서는 숨기기 */
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }
        }

        /* ✅ 팝업 X 버튼 */
        #mainPopup-index8 .popup-content {
          position: relative;
        }

        .popup-close-btn {
          position: absolute;
          top: 12px;
          right: 12px;

          width: 52px;
          height: 52px;

          border: none;
          border-radius: 50%;

          background: #0d6efd;
          color: #fff;

          font-size: 34px;
          font-weight: 700;

          display: flex;
          align-items: center;
          justify-content: center;

          cursor: pointer;
          z-index: 10000;
        }

        .popup-close-btn:hover {
          background: #0b5ed7;
        }