/* ✅ 모든 요소 공통 설정 */
        * {
          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: 15px;    /* 원하는 글자 크기로 조정 */
        }

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


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

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


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

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


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

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


         /* ✅ 유튜브, 게시물, 상품 외곽 박스 강조 스타일 */
        .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;                 /* 아래쪽 공간 */
        }

        /* ------------------------------------------------------------------------- */

        /* ✅ 메인 레이아웃 - 좌우 분할 구조 (ex: 사이드바 + 콘텐츠) */
        .main-container {
          display: flex;          /* 가로 정렬 */
          gap: 20px;              /* 좌우 영역 간격 */
          }
          @media (max-width: 768px) {
          .main-container {
              flex-direction: column;  /* 모바일에서는 세로로 쌓이도록 */
          }
        }

        /* ✅ 오른쪽 콘텐츠 영역 (예: 본문) */
        .right-content {
        flex: 1;                        /* 남은 공간 전체 차지 */
        background-color: #f8f9fa;     /* 밝은 회색 배경 */
        padding: 15px;                 /* 내부 여백 */
        border-radius: 10px;           /* 모서리 둥글게 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* 진한 그림자 */
        }

        /* ✅ 상품 목록 전체 컨테이너 */
        .container {
        display: flex;
        flex-wrap: wrap;              /* 넘치면 다음 줄로 */
        justify-content: center;      /* 가운데 정렬 */
        gap: 20px;
        max-width: 960px;
        margin-top: 50px;
        }

        /* 게시물 크기 조정하기  */
        /* ✅ 개별 카드 박스 (.product) */
        .product {
          display: flex;                            /* ➤ 내부 요소를 Flexbox로 배치 */
          flex-direction: column;                  /* ➤ 세로 방향으로 정렬 */
          justify-content: center;                 /* ➤ 세로 방향 가운데 정렬 */
          align-items: center;                     /* ➤ 가로 방향 가운데 정렬 */
          padding: 5px;                            /* ➤ 내부 전체 여백 (테두리와 내용 사이) */
          width: 200px;                            /* ➤ 카드 너비 고정 */
          height: 250px;                           /* ➤ 카드 높이 고정 */
          border: 1px solid #ddd;                   /* ➤ 카드 외곽 빨간 테두리 (디버깅용 또는 강조) */
          border-radius: 5px;                      /* ➤ 모서리를 부드럽게 만듦 */
          box-shadow: 0 4px 8px rgba(0,0,0,0.5);    /* ➤ 카드에 그림자 효과 (입체감) */
          overflow: hidden;                        /* ➤ 내부 콘텐츠가 넘칠 경우 숨김 처리 */
          text-align: center;                      /* ➤ 텍스트 가운데 정렬 */
          margin-bottom: 20px;                     /* ➤ 아래쪽 카드와의 간격 */
        }

        /* ✅ index8.html과 유튜브 보여주기 카드 내부 구조 외곽선 (.card) */
        .card {
          border: 1px solid #ddd;                  /* ➤ 파란색 테두리 (디버깅용 또는 강조) */
          border: 1px solid red;
          padding: 5px;                          /* ➤ 내부 여백 (이미지와 콘텐츠를 안쪽으로 밀어냄) */
          margin: 0 auto;                          /* ➤ 수평 가운데 정렬 */
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);    /* ➤ 부드러운 그림자 효과 */
          box-sizing: border-box;                  /* ➤ padding, border 포함해서 width 계산 */
          width: 100%;                             /* ➤ .product 안에서 너비 최대 사용 */
          height: auto;                            /* ➤ 높이는 내용에 따라 유동적으로 설정 */
        }

        /* ✅ 카드 안의 대표 이미지 (.card-img-top) 현재는 적용안됨 */
        .card-img-top {
          border: 1px solid #ddd;            /* ➤ (선택적) 이미지에 분홍 테두리 디버깅용 */
          border: 0;                               /* ➤ 테두리 제거 (기본적으로) */
          width: 100%;                             /* ➤ 부모 요소(.card)에 맞게 꽉 채움 */
          height: 250px;                           /* ➤ 고정된 높이 지정 (비율 통일) */
          object-fit: cover;                       /* ➤ 이미지 비율 유지하며 꽉 채우되 잘림 */
          object-position: center;                 /* ➤ 잘릴 때 중앙 기준 */
          display: block;                          /* ➤ 이미지 아래 여백 제거를 위한 block 설정 */
          box-sizing: border-box;                  /* ➤ border, padding 포함해서 width 계산 */
        }

        /* ✅ 상품 메인 이미지 캐러셀 */
        /* .carousel { 
          border: 25px solid firebrick;         
        position: relative;
        width: 100%;
        height: 200px;
        display: flex;
        align-items: start;
        overflow: hidden;
        }
        .carousel-image,
        .carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;  
        border-radius: 5px;
        position: absolute;
        transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
        }
        .carousel-image:hover {
        transform: scale(1.05); 
        } */


        /* ✅ 썸네일 이미지 목록 */
        /* .thumbnail-container {
         border: 15px solid firebrick;
        display: flex;
        gap: 10px;
        max-width: 100%;
        overflow: auto;
        justify-content: center;
        margin-top: 10px;
        }
        .thumbnail-container img,
        .thumbnail {
          border: 15px solid firebrick;
          width: 60px;
          height: 60px;
          border-radius: 5px;
          object-fit: cover;
          cursor: pointer;
          border: 1px solid #ddd;
        }
        .thumbnail {
          border: 15px solid firebrick;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border: 2px solid transparent;
        transition: transform 0.2s ease-in-out;
        } */


        /* ✅ 상품 정보 숨기기용 클래스 */
        /* ✅ .info-hide 클래스는 특정 요소를 화면에서 숨기는 데 사용됩니다 */
        .info-hide {
          display: none;  /* 요소를 보이지 않게 함 (공간도 차지하지 않음) */
        }



        /* ✅ 상품 상세 정보 표시 영역 */
        /* .info-box {
        display: flex;
        align-items: start;
        justify-content: space-between;
        background: white;
        padding: 5px;
        border-radius: 5px;
        }
        .info-title {
        font-weight: bold;
        color: #333;
        width: 80px;
        }
        .info-content {
        flex-grow: 1;
        text-align: left;
        color: #555;
        }
        .info-content a {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        } */


        /* ✅ 이미지 캡션 */
        /* .carousel-item {
        position: relative;
        text-align: center;
        }
        .image-caption {
        font-size: 14px;
        color: #666;
        background: rgba(255,255,255,0.8);
        padding: 5px;
        margin-top: 5px;
        display: block;
        border-radius: 5px;
        } */


        /* ✅ 동영상 카드 레이아웃: 각 동영상 항목의 박스 스타일 */
        .video-card {
          border: 1px solid #ddd;                    /* 옅은 회색 테두리 */
          border: 1px solid #ddd;  
          border-radius: 10px;                       /* 모서리를 둥글게 */
          padding: 3px;                             /* 내부 여백 */
          margin-bottom: 15px;                       /* 카드 아래 간격 */
          box-shadow: 2px 2px 10px rgba(0,0,0,0.5);   /* 그림자 효과 */
          text-align: center;                        /* 안의 텍스트 가운데 정렬 */
        }

        /* ✅ 동영상 썸네일이나 iframe을 표시하는 영역 */
        .video-container {
          width: 100%;        /* 부모 너비에 맞춤 */
          height: 200px;      /* 고정 높이 (썸네일/iframe 비율 유지) */
        }

        /* ✅ 동영상 하단의 액션 버튼들 (삭제, 수정 등) 영역 */
        .video-actions {
          margin-top: 10px;   /* 위쪽과의 간격 */
        }

        /* ✅ 동영상 상단의 툴바: 필터/정렬 드롭다운, 버튼 등 */
        .video-toolbar {
          display: flex;           /* 가로 정렬 플렉스박스 */
          flex-wrap: wrap;         /* 줄바꿈 허용 (좁은 화면 대응) */
          align-items: center;     /* 수직 가운데 정렬 */
          gap: 10px;               /* 요소 간 간격 */
        }



        /* ✅ 다크 모드 전체 적용 */
        body.dark-mode {
          background-color: #121212;   /* 어두운 배경색 */
          color: #f0f0f0;              /* 밝은 글자색 */
        }

        /* ✅ 다크 모드에서 동영상 카드 배경색 변경 */
        .dark-mode .video-card {
          background-color: #1e1e1e;   /* 카드의 어두운 배경색 */
        }

        /* ✅ 동영상 카드 내부의 링크 기본 스타일 */
        .video-card a {
          text-decoration: none;       /* 밑줄 제거 */
          color: inherit;              /* 부모 요소의 색상 상속 (다크모드에서도 자연스럽게) */
        }

        /* ✅ 마우스 오버 시 링크에 밑줄 표시 */
        .video-card a:hover {
          text-decoration: underline;  /* 링크 강조를 위한 밑줄 */
        }

        /* ✅ 이미지가 없을 경우 표시될 텍스트에 대한 스타일 */
        .bd-placeholder-img {
          font-size: 1.125rem;         /* 기본 글자 크기 설정 */
          text-anchor: middle;         /* SVG에서 가운데 정렬 */
          user-select: none;           /* 사용자가 텍스트 드래그 못하도록 설정 */
        }

        /* ✅ 큰 화면에서 대체 이미지 글자 크기 조정 */
        @media (min-width: 768px) {
          .bd-placeholder-img-lg {
            font-size: 3.5rem;         /* 더 큰 글자 크기 */
          }
        }

        /* ✅ 가격 영역 헤더 및 카드 전체 폭 제한 */
        .pricing-header {
          max-width: 1500px;       /* 최대 너비를 1500px로 제한 (가로 폭이 너무 넓어지는 것을 방지) */
        }

        /* ✅ 카드 데크 내부 카드들의 최소 너비 설정 */
        .card-deck .card {
          min-width: 220px;        /* 각 카드가 너무 좁아지지 않도록 최소 너비 설정 */
        }

        /* ✅ 기본 마진 제거 클래스(my-0)에 텍스트 색상 부여 */
        .my-0 {
          color: black;            /* 글자색을 검정색으로 지정 */
        }

        /* ✅ strong 태그 강조 텍스트 색상 설정 */
        strong {
          color: navy;             /* 진한 파란색으로 강조 텍스트 표현 */
        }

        

        /* ✅ 게시물 카드에 마우스 올리면 살짝 확대되는 효과 (abcblog 등에서 사용) */
        .product_2 {
          width: 200px;                        /* 고정 가로 너비 */
          flex: 0 0 auto;                      /* flex 항목이 늘어나지 않도록 고정 */
          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;         /* 변형 시 부드러운 애니메이션 */
          margin: 10px;                       /* 바깥 여백 */
        }

        /* ✅ 마우스를 올렸을 때 카드 확대 효과 */
        .product:hover {
          transform: scale(1.02);             /* 약간 확대 */
        }

        /* ✅ abcblog 이미지 또는 캐러셀 내부 이미지 공통 스타일 */
        .product_2 img,
        .carousel-image_2 {
          width: 100%;                        /* 카드 가로 전체 차지 */
          height: 150px;                      /* 고정 높이 */
          object-fit: cover;                  /* 비율 유지하면서 채움 */
          border-bottom: 1px solid #ddd;      /* 이미지 아래 구분선 */
          border-radius: 10px;                /* 이미지도 둥근 모서리 */
          cursor: pointer;                    /* 클릭 가능한 커서 */
        }

        /* ✅ 일반 캐러셀 이미지 (추가 강조 스타일) */
        .carousel-image {
          height: 150px;                      /* 고정 높이 */
          transition: transform 0.3s ease;    /* 마우스 오버 시 부드러운 확대 */
        }

        /* ✅ 캐러셀 이미지에 마우스를 올렸을 때 확대 효과 */
        .carousel-image:hover {
          transform: scale(1.05);             /* 5% 확대 */
        }

        /* ✅ 게시물 제목 기본 스타일 */
        .title {
          font-size: 1rem;           /* 제목 폰트 크기 (16px 정도) */
          font-weight: bold;         /* 글자 두껍게 */
          margin: 10px 0;            /* 위아래 여백 10px, 좌우는 없음 */
        }

        /* ✅ 상품(card) 내에서 사용하는 제목의 경우 상단 여백 조정 */
        .product .title {
          margin-top: 0.5rem;        /* 위쪽 여백만 0.5rem (약 8px) */
        }

        /* ✅ 제목 내부 링크의 색상 및 밑줄 제거 */
        .title a {
          color: #333;               /* 어두운 회색 글씨 */
          text-decoration: none;     /* 밑줄 제거 */
        }

        /* ✅ 마우스 오버 시 링크에 밑줄 표시 */
        .title a:hover {
          text-decoration: underline;  /* 마우스를 올리면 밑줄 표시 */
        }

        /* ✅ 블로그 섹션의 전체 컨테이너 설정 */
        #blogSection {
          margin-left: 0;                 /* 왼쪽 바깥 여백 없음 */
          margin-right: 0;                /* 오른쪽 바깥 여백 없음 */
          gap: 10px;                      /* 내부 아이템 간격 10px */
          display: flex;                 /* 가로 정렬을 위한 flex 레이아웃 */
          flex-wrap: wrap;               /* 줄바꿈 허용 (너무 많으면 다음 줄로 내려감) */
          justify-content: center;       /* 아이템을 중앙 정렬 */
        }

        /* ✅ blogSection 내부 각 자식 div에 내부 여백 적용 */
        #blogSection > div {
          padding: 5px;                   /* 안쪽 여백 5px */
        }

        /* ✅ 왼쪽 콘텐츠 박스에 좌우 padding 적용 */
        .left-content {
          padding-left: 15px;             /* 왼쪽 안쪽 여백 15px */
          padding-right: 15px;            /* 오른쪽 안쪽 여백 15px */
        }

        /* ✅ abcblog 단일 카드 스타일 */        
        .post-card {
          border: 1px solid #ddd;         /* ✅ 카드 전체에 두꺼운 보라색 테두리 추가 */
            border: 1px solid blue; 
          background-color: #fff;           /* ✅ 카드 배경은 흰색으로 설정 */
          border-radius: 8px;               /* ✅ 모서리를 둥글게 처리해 부드러운 인상 제공 */
          padding: 15px;                    /* ✅ 카드 내부 콘텐츠와 테두리 사이 여백 */
          margin-bottom: 20px;              /* ✅ 카드 아래쪽 여백 (카드 간 간격 확보) */
          text-align: center;               /* ✅ 카드 안의 텍스트를 중앙 정렬 */
          box-shadow: 0 0 8px rgba(0,0,0,0.1); /* ✅ 약간의 그림자 효과로 카드 입체감 부여 */
          max-width: 100%;                  /* ✅ 부모 컨테이너 너비를 넘지 않도록 제한 */
          box-sizing: border-box;           /* ✅ padding과 border를 포함해 width 계산 (overflow 방지) */
        }

        .post-card img {
          width: 100%;                      /* ✅ 카드 너비 전체를 이미지가 차지하도록 설정 */
          max-height: 150px;                /* ✅ 이미지의 세로 크기를 최대 250px로 제한 (높이 제한) */
          object-fit: cover;                /* ✅ 이미지 비율 유지하며 잘라내어 카드에 꽉 차게 맞춤 */
          object-position: center;          /* ✅ 자를 때 기준을 이미지 중앙으로 설정 */
          border-radius: 6px;               /* ✅ 이미지 모서리를 둥글게 처리 */
          margin-bottom: 10px;              /* ✅ 이미지 아래 여백 (제목이나 내용과 간격 확보) */
          display: block;                   /* ✅ 이미지를 블록 요소로 설정 (줄바꿈 포함, 여백 문제 해결) */
          border: 1px solid #ddd;         /* ✅ 이미지 자체에 노란색 테두리 추가 (시각적 강조) */
          box-sizing: border-box;           /* ✅ 테두리를 포함해 전체 너비 계산 (넘침 방지) */
          border: 1px solid yellow; 
        }
        

       
        /* ✅ "더 보기" 버튼 기본 스타일 */
        /* #moreBlogBtn {
          font-size: 1.8rem;  
        } */

        /* ✅ 화면 너비 768px 이하 (태블릿 이하)일 때 글자 크기 줄이기 */
        /* @media (max-width: 768px) {
          #moreBlogBtn {
            font-size: 1.4rem;  
          }
        } */

        /* ✅ 화면 너비 576px 이하 (스마트폰 화면)일 때 더 작게 */
        /* @media (max-width: 576px) {
          #moreBlogBtn {
            font-size: 1.2rem;  
          }
        } */

        /* ✅ 게시물 제목 스타일 상세 */
        .post-title {
          font-size: 1.1rem;           /* 🔹 제목의 글자 크기 설정 */
          font-weight: bold;          /* 🔹 글자를 굵게 (볼드체) */
          margin: 10px 0;             /* 🔹 위아래 여백 10px */
          text-align: center;         /* 🔹 제목 가운데 정렬 */

          word-break: break-word;     /* 🔹 긴 단어가 있을 경우 단어 중간에서 줄바꿈 허용 (영어 등) */
          overflow-wrap: break-word;  /* 🔹 긴 단어가 영역을 벗어나지 않도록 줄바꿈 처리 */
          white-space: normal;        /* 🔹 줄바꿈 허용 (기본 값으로 여러 줄 표시 가능) */

          max-height: 3.6em;          /* 🔹 최대 높이를 3줄로 제한 (line-height 기준) */
          line-height: 1.2em;         /* 🔹 한 줄의 높이 설정 (1.2배) → 3줄이면 3.6em */
          overflow: hidden;           /* 🔹 넘치는 텍스트는 보이지 않게 숨김 (말줄임 효과 포함) */
        }     


        /* 광고 배너 이미지 크기 조절하기 공통 이미지 제한 */


      
        /* ✅✅✅✅  반응형 설정 ✅✅✅✅ */
        /* ✅ 화면 너비 576px 이하 - 초소형 모바일 기기 대응 */
        @media (max-width: 576px) {  
          body {
            background-color: snow; /* 📌 모바일에서 밝고 가독성 높은 배경색(snow)으로 변경 */
          }
          .navbar .btn {
            font-size: 1rem;          /* 글자 크기 약 16px (기본 크기 유지) */
            padding: 0.5rem 1rem;     /* 위아래 0.5rem, 좌우 1rem (버튼도 안정적 크기) */
          }
          
          #searchInput {
            width: 100%;             /* 📌 검색창의 너비를 100%로 설정하여 모바일 화면 전체를 활용 */
          }
         .product {
            width: 100%; 
            max-width: 250px;     /* 📌 상품 카드 너비를 500px로 고정하여 콘텐츠가 너무 넓어지지 않도록 제한 */
            margin: auto;     /* 📌 카드 요소를 가로 중앙 정렬 */
          }
          .post-card {
            width: 100%; 
            max-width: 250px;     /* 📌 블로그/게시글 카드도 동일하게 500px 고정 너비 설정 */
            margin: auto;     /* 📌 가로 중앙 정렬 적용 */
          }
          .video-card {
            width: 100%; 
            max-width: 250px;     /* 📌 동영상 카드도 동일한 고정 너비를 적용하여 디자인 일관성 유지 */
            margin: auto;     /* 📌 가운데 정렬 */
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }
          }

        /* ✅ 화면 너비 577px ~ 768px - 일반 모바일 가로 및 소형 태블릿 대응 */
        @media (min-width: 577px) and (max-width: 768px) {
          body {
            background-color: whitesmoke; /* 📌 배경색을 연한 회색(whitesmoke)으로 설정하여 부드러운 인상 제공 */
          }
          .product {
            width: 100%; 
            max-width: 250px;     /* 📌 상품 카드 너비를 500px로 고정하여 콘텐츠가 너무 넓어지지 않도록 제한 */
            margin: auto;     /* 📌 카드 요소를 가로 중앙 정렬 */
          }
          .post-card {
            width: 100%; 
            max-width: 250px;     /* 📌 블로그/게시글 카드도 동일하게 500px 고정 너비 설정 */
            margin: auto;     /* 📌 가로 중앙 정렬 적용 */
          }
          .video-card {
            width: 100%; 
            max-width: 250px;     /* 📌 동영상 카드도 동일한 고정 너비를 적용하여 디자인 일관성 유지 */
            margin: auto;     /* 📌 가운데 정렬 */
          }
          #moreBlogBtn {
            font-size: 1.4rem; /* 📌 "더 보기" 버튼의 폰트 크기를 기본보다 약간 축소해 중간 화면에 적합하게 조정 */
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 250px;
              width: 100%;
            }
          }

        /* ✅ 화면 너비 769px ~ 1199px - 태블릿 및 작은 데스크탑 전용 스타일 */
        @media (min-width: 769px) and (max-width: 1199px) {
          body {
            background-color: seashell; /* 📌 은은한 베이지톤(seashell) 배경으로 설정하여 부드럽고 따뜻한 느낌 제공 */
          }
          .product {
            width: 100%; 
            max-width: 250px;     /* 📌 상품 카드 너비를 500px로 고정하여 콘텐츠가 너무 넓어지지 않도록 제한 */
            margin: auto;     /* 📌 카드 요소를 가로 중앙 정렬 */
          }
          .post-card {
            width: 100%; 
            max-width: 250px;     /* 📌 블로그/게시글 카드도 동일하게 500px 고정 너비 설정 */
            margin: auto;     /* 📌 가로 중앙 정렬 적용 */
          }
          .video-card {
            width: 100%; 
            max-width: 250px;     /* 📌 동영상 카드도 동일한 고정 너비를 적용하여 디자인 일관성 유지 */
            margin: auto;     /* 📌 가운데 정렬 */
          }
          
           /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 250px;
              width: 100%;
            }
        }

        /* ✅ 화면 너비 1200px 이상 - 데스크탑 및 대형 화면 전용 스타일 */
        @media (min-width: 1200px) {          
          body {
            background-color: honeydew; /* 📌 배경색을 연녹색(honeydew)으로 설정하여 큰 화면에서 시각적으로 부드러운 느낌 제공 */
          }
          .product {
            width: 100%; 
            max-width: 250px; /* 📌 제품 카드 하나의 고정 너비를 400px로 설정하여 동일한 크기의 카드 정렬 유지 */
          }
          .post-card {
            width: 100%; 
            max-width: 250px; /* 📌 블로그/게시글 카드도 같은 400px 너비로 설정하여 디자인 일관성 유지 */
          }
          .video-card {
            width: 100%; 
            max-width: 250px;   /* 📌 동영상 카드도 동일한 너비 설정으로 레이아웃 통일 */
            margin: auto;   /* 📌 좌우 여백을 자동으로 설정하여 중앙 정렬 효과 */
          }
          .navbar-text {
            font-size: 1rem;       /* 📌 내비게이션 바에 들어가는 텍스트의 기본 크기를 1rem(기본 글자 크기)로 설정 */
            display: inline-block; /* 📌 텍스트 요소를 inline-block으로 표시하여, 아이콘 옆에 자연스럽게 배치됨 */
            /*  작은 화면에서는 이 요소를 숨기고 큰 화면에서만 노출하는 데 유용 */
          }
           /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 250px;
              width: 100%;
            }
        }

        /* ✅ + 더 보기 버튼 기본 스타일 - 대형 화면(1200px 이상)에서 사용할 버튼 폰트 크기 설정 */
        #viewMoreBtn {
            font-size: 1.6rem;  /* 대형 디스플레이(데스크탑 등)에서 크게 보이도록 설정 */
        }
        /* ✅ 중간 화면 (최대 너비 1199px) - 일반적인 노트북, 태블릿 가로 방향 */
        @media (max-width: 1199px) {
            #viewMoreBtn {
                font-size: 1rem;  /* 중간 크기 화면에 맞게 약간 작게 조정 */
            }
        }
        /* ✅ 작은 화면 (최대 너비 768px) - 태블릿 세로 방향 또는 작은 노트북 */
        @media (max-width: 768px) {
            #viewMoreBtn {
                font-size: 1.0rem;  /* 작은 화면에서는 버튼 폰트 크기를 더 축소하여 공간 절약 */
            }
        }
        /* ✅ 모바일 화면 (최대 너비 576px) - 스마트폰 세로 화면 등 */
        @media (max-width: 576px) {
            #viewMoreBtn {
                font-size: 1.0rem;  /* 모바일 화면에서는 동일한 1.0rem 유지 */
                /* 중복 설정이지만 명시적으로 모바일용으로 지정한 것 */
            }
        }

        /* ✅ 팝업의 전체 외부 레이아웃 박스 설정  ------------------  */
        .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;      /* ✅ 더 진한 파란색으로 변경 */
        }
        /* ✅ 팝업의 전체 외부 레이아웃 박스 설정  ------------------  */

        /* ✅ 두 번째 팝업 위치 다르게 설정 (mainPopup2 전용) */
        #mainPopup2 {
          top: auto;
          bottom: 0px;
          left: 0;
          width: 100vw;
          height: auto;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          z-index: 9999;
          padding: 10px 0;
        }

        /* ❷ 로딩하기 만들기 스켈레톤(섹션 자리잡기) */
        .skel{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:8px}
        @keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
        .skel-card{height:220px}