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

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


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

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


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

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


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

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


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

        /* ✅ 왼쪽 사이드바 레이아웃 */
        .sidebar {
          min-height: 100vh;                       /* 화면 전체 높이 채움 */
          background-color: #fff;                  /* 배경 흰색 */
          border-right: 1px solid #ccc;            /* 오른쪽 구분선 */
          padding: 20px;                           /* 안쪽 여백 */
        }

        /* ✅ 사이드바 링크 기본 스타일 */
        .sidebar .nav-link {
          color: #333;                             /* 텍스트 색상: 어두운 회색 */
          transition: background-color 0.3s ease;  /* hover 시 부드럽게 전환 */
        }

        /* ✅ 사이드바 링크 hover 시 배경 강조 */
        .sidebar .nav-link:hover {
          background-color: #f0f0f0;               /* 연한 회색 배경 */
        }

        /* ✅ 사이드바 active 상태 (선택된 메뉴) 스타일 */
        .sidebar .nav-link.active {
          font-weight: bold;                       /* 강조용 글자 굵게 */
          color: #0d6efd;                          /* 파란 텍스트 */
          background-color: #e9f3ff;               /* 연한 파란 배경 */
          border-radius: 5px;                      /* 둥근 테두리 */
        }

        /* ✅ 프로필 이미지 스타일 */
        .profile-img {
          width: 100px;
          height: 100px;
          object-fit: cover;                       /* 비율 유지하면서 채우기 */
          border-radius: 50%;                      /* 원형 이미지 */
          border: 2px solid #ddd;                  /* 연한 테두리 */
        }

        /* ✅ 본문 콘텐츠 영역 스타일 */
        .content-area {
          padding: 20px;
          background-color: #fafafa;               /* 밝은 회색 배경 */
          min-height: 100vh;                       /* 세로 전체 높이 확보 */
        }

        /* ✅ 탭 콘텐츠 내 게시물 카드 (기본형) */
        .tab-content .item-card {
          border: 1px solid #ccc;            /* 카드 테두리 */
          border-radius: 8px;                /* 모서리 둥글게 */
          padding: 16px;                     /* 카드 내부 여백 */
          margin-bottom: 12px;               /* 카드 아래 여백 */
          background: #fff;                  /* 카드 배경색 */
          display: flex;                     /* 가로 정렬 (플렉스 박스) */
          align-items: center;               /* 수직 가운데 정렬 */
          gap: 15px;                         /* 내부 요소 간 간격 */
        }

        /* ✅ 카드 썸네일 이미지 */
        .item-card img {
          width: 80px;                       /* 이미지 너비 고정 */
          height: 80px;                      /* 이미지 높이 고정 */
          object-fit: cover;                 /* 이미지 비율 유지하며 채우기 */
          border-radius: 8px;                /* 이미지 모서리 둥글게 */
        }

        /* ✅ 카드 안의 버튼 스타일 */
        .item-card button {
          margin-left: auto;                 /* 오른쪽 끝으로 이동 */
          margin-right: 5px;                 /* 오른쪽 여백 */
          padding: 6px 12px;                 /* 버튼 내부 여백 */
          font-size: 14px;                   /* 버튼 글자 크기 */
        }

        /* ✅ 다크모드 설정 - 전체 배경 및 텍스트 반전 */
        body.dark-mode {
          background-color: #121212;         /* 어두운 배경색 */
          color: #eee;                       /* 밝은 글자색 */
        }

        /* ✅ 다크모드 - 사이드바, 콘텐츠 영역, 카드 배경 및 텍스트 색상 반전 */
        body.dark-mode .sidebar,
        body.dark-mode .content-area,
        body.dark-mode .tab-content .item-card {
          background-color: #1e1e1e;         /* 더 어두운 배경색 */
          color: #eee;                       /* 밝은 글자색 */
        }

        /* ✅ 다크모드 - 활성화된 메뉴 강조 */
        body.dark-mode .sidebar .nav-link.active {
          background-color: #2c2c2c;         /* 활성화된 메뉴 배경 강조 */
        }

        /* ✅ 게시글 제목 링크 스타일 */
        .post-title-link {
          color: #007bff;                    /* 파란색 링크 */
          text-decoration: none;             /* 밑줄 제거 */
        }

        .post-title-link:hover {
          text-decoration: underline;        /* 마우스 오버 시 밑줄 표시 */
        }

        /* ✅ 내가 본 상품 목록용 카드 레이아웃 (간단형) */
        .item-card {
          display: flex;                     /* 가로 정렬 */
          align-items: center;               /* 수직 가운데 정렬 */
          gap: 10px;                         /* 내부 요소 간 간격 */
          margin-bottom: 10px;               /* 카드 아래 여백 */
        }

        /* ✅ 내가 본 상품 이미지 스타일 */
        .item-card img {
          width: 80px;                       /* 고정 너비 */
          height: auto;                      /* 비율 유지하며 자동 높이 */
          object-fit: cover;                 /* 이미지 비율 유지하며 채우기 */
          border: 1px solid #ccc;            /* 테두리 */
          border-radius: 6px;                /* 모서리 둥글게 */
        }

        /* ✅ 마이페이지 링크 스타일 (회원정보, 비밀번호 변경, 탈퇴 등) */
        .mypage-links a {
          display: block;                    /* 링크를 블록 요소로 만들어 한 줄 차지 */
          margin-bottom: 10px;               /* 링크 아래 간격 */
          text-decoration: none;             /* 밑줄 제거 */
          color: #333;                       /* 어두운 글자색 */
        }

        /* ✅ 마이페이지 마지막 링크는 하단 여백 제거 */
        .mypage-links a:last-child {
          margin-bottom: 0;
        }

        /* ✅ 내가 쓴 글 ~ 사용자 통계까지 왼쪽 정렬 스타일 */
        .nav-link {
          display: block;                    /* 블록 요소로 전환 (좌측 정렬) */
          padding: 8px 12px;                 /* 내부 여백 */
          margin-bottom: 4px;                /* 아래 여백 */
          color: #333;                       /* 글자색 */
          text-decoration: none;             /* 밑줄 제거 */
        }

        .nav-link:hover {
          background-color: #f0f0f0;         /* 마우스 오버 시 배경 강조 */
          border-radius: 5px;                /* 모서리 둥글게 */
        }

        /* ✅ 판매제품확인 ~ 신고하기까지 왼쪽 정렬 스타일 */
        .mypage-link {
          display: block;                    /* 블록 요소로 좌측 정렬 */
          padding: 8px 16px;                 /* 내부 여백 */
          color: #000;                       /* 글자색 */
          text-decoration: none;             /* 밑줄 제거 */
        }

        .mypage-link:hover {
          background-color: #f0f0f0;         /* 마우스 오버 시 배경 강조 */
        }

        /* 내가 쓴글 css ------- (1) */
        .item-card {
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 16px;
          margin-bottom: 20px;
          background-color: #fff;
          box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .item-card .post-title-link {
          font-size: 18px;
          font-weight: bold;
          color: #007bff;
          text-decoration: none;
        }

        .item-card .post-title-link:hover {
          text-decoration: underline;
        }

        .item-card p {
          margin-bottom: 6px;
        }

        .item-card .small.text-muted {
          font-size: 13px;
          color: #666;
        }

        .item-card .btn {
          padding: 3px 8px;
          font-size: 13px;
        }
        /* 내가 쓴글 css -------(2) */


        


        

        /* 📱 [모바일 화면: 가로 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% !important;    /* 상품 카드 너비를 화면 전체로 */
            height: auto;              /* 높이를 내용에 따라 자동 조절 */
          }
        }

        /* 📱💻 [태블릿 화면: 가로 577px ~ 768px] */
        @media (min-width: 577px) and (max-width: 768px) {
          body {
            background-color: whitesmoke; /* 태블릿 전용 배경색 */
          }
          .product {
            width: 90%;                /* 상품 카드 너비를 90%로 설정 (좌우 여백 확보) */
            margin: auto;              /* 가운데 정렬 */
          }
          
        }

        /* 💻 [노트북/중간 해상도: 가로 769px ~ 1199px] */
        @media (min-width: 769px) and (max-width: 1199px) {
          body {
            background-color: seashell; /* 중간 화면 전용 배경색 */
          }
          .product {
            width: 90%;                /* 상품 카드 너비를 90%로 설정 */
            margin: auto;              /* 가운데 정렬 */
          }
          .navbar-text {
            display: none;             /* 텍스트 요소 숨김 (공간 절약) */
          }
        }

        /* 🖥️ [데스크탑/대형 화면: 가로 1200px 이상] */
        @media (min-width: 1200px) {
          body {
            background-color: honeydew; /* 데스크탑 전용 배경색 */
          }
          .product {
            width: 300px;              /* 상품 카드 고정 너비 설정 */
          }
          .navbar-text {
            font-size: 1rem;           /* 네비게이션 텍스트 크기 조정 */
            display: inline-block;     /* 텍스트 보이도록 설정 */
          }
        }