/* ✅ 모든 요소 공통 설정 */
        * {
          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;
        }

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


        /* ✅ 전체 레이아웃 박스 (좌우 분할 레이아웃) */
        .container {
          display: flex;               /* 좌우 배치 (플렉스 레이아웃) */
          width: 90%;                  /* 화면 폭의 90% 사용 */
          max-width: 1400px;           /* 최대 폭 제한 (대형 화면 대비) */
          margin: 30px auto;           /* 가운데 정렬 */
          padding: 20px;               /* 내부 여백 */
          background: #fff;            /* 흰 배경 */
          border-radius: 8px;          /* 박스 모서리 둥글게 */
          box-shadow: 0 0 10px rgba(0,0,0,0.05); /* 박스 그림자 효과 */
        }


        /* ✅ 왼쪽 사이드바 */
        .sidebar {
          width: 200px;                /* 고정 너비 */
          border-right: 1px solid #ddd;/* 오른쪽 구분선 */
          padding-right: 20px;         /* 오른쪽 내부 여백 */
        }


        /* ✅ 사이드바 내 제목 스타일 */
        .sidebar h3 {
          font-size: 18px;
          margin-bottom: 10px;
        }


        /* ✅ 카테고리 버튼 스타일 */
        .category-btn {
          display: block;              /* 한 줄 전체 차지 */
          padding: 10px;
          margin-bottom: 5px;
          background: #f1f1f1;         /* 기본 배경색 */
          border: none;                /* 테두리 없음 */
          width: 100%;                 /* 버튼을 부모 영역에 꽉 차게 */
          text-align: left;
          cursor: pointer;
          border-radius: 4px;
          transition: 0.3s;
        }


        /* ✅ 카테고리 버튼 hover 및 활성화(active) 스타일 */
        .category-btn:hover,
        .category-btn.active {
          background-color: #007bff;   /* 파란색 배경 */
          color: white;                /* 흰 글자 */
        }


        /* ✅ 오른쪽 콘텐츠 영역 */
        .content {
          flex: 1;                     /* 남은 공간 모두 차지 */
          padding-left: 30px;          /* 왼쪽 여백 */
        }


        /* ✅ 테이블 전체 스타일 */
        table {
          width: 100%;
          border-collapse: collapse;
          margin-bottom: 30px;
        }


        /* ✅ 테이블 셀 스타일 */
        th, td {
          padding: 12px;
          border-bottom: 1px solid #eee;
          text-align: left;
        }


        /* ✅ 테이블 헤더 스타일 */
        th {
          background-color: #f2f2f2;
        }


        /* ✅ 테이블 행 hover 효과 */
        tr:hover td {
          background-color: #f9f9f9;
        }


        /* ✅ 기본 링크 스타일 */
        a {
          color: #007bff;
          text-decoration: none;
        }
        a:hover {
          text-decoration: underline;
        }


        /* ✅ 글쓰기 버튼 스타일 */
        .write-link {
          margin-top: 20px;
          display: inline-block;
          padding: 8px 12px;
          background: #28a745;
          color: white;
          text-decoration: none;
          border-radius: 4px;
        }


        /* ✅ 게시글 출력 영역 */
        #categorySection {
          min-height: 500px;             /* 최소 높이 확보 */
          padding: 20px 10px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }


        /* ✅ 메인 레이아웃 양쪽 여백 설정 */
        .main-container {
          padding: 0 15px;
        }

        /* 테이블 폰트 크기 */
        .board-table th,
        .board-table td,
        .board-title,
        .board-author,
        .board-date {
          font-size: 1rem;     /* rem 단위로 통일 */
        }

        .board-table {
          width: 100%;
           table-layout: fixed;  /* ← fixed 로 바꿔주세요 (말줄임 동작 안정화) */
        }

        .board-table th:nth-child(2),
        .board-table td:nth-child(2),
        .board-table th:nth-child(3),
        .board-table td:nth-child(3) {
          white-space: nowrap;
          text-align: center;
        }

        .board-table th:nth-child(2),
        .board-table td:nth-child(2) {
          min-width: 80px;
        }

        .board-table th:nth-child(3),
        .board-table td:nth-child(3) {
          min-width: 100px;
        }

        /* 카타고리 반응형 만들기 */
        h4.category-title {
          font-size: 36px;
        }



        /* ✅ 반응형 (모바일 및 태블릿) 광고 배너 이미지 제한 */

        /* 📱 모바일 (최대 576px) */
        @media (max-width: 576px) {
          body {
            background-color: snow;
          }
          .navbar .btn {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
          }
          #searchInput {
            width: 100%;
          }
          /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
          }
            h4.category-title {
            font-size: 20px;
          }
        }


        /* 📱💻 태블릿 (577px ~ 768px) */
        @media (min-width: 577px) and (max-width: 768px) {
          body {
            background-color: whitesmoke;
          }
           /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
         .right-content img {
              max-width: 300px;
              width: 100%;
          }   
          h4.category-title {
            font-size: 20px;
          }        
        }


        /* 💻 노트북 / 중간 해상도 (769px ~ 1199px) */
        @media (min-width: 769px) and (max-width: 1199px) {
          body {
            background-color: seashell;
          }
          .navbar-text {
            display: none;
          }
           /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
         .right-content img {
              max-width: 300px;
              width: 100%;
          }   
          h4.category-title {
            font-size: 28px;
          }    
        }


        /* 🖥️ 데스크탑 (1200px 이상) */
        @media (min-width: 1200px) {
          body {
            background-color: honeydew;
          }
          .navbar-text {
            font-size: 1rem;
            display: inline-block;
          }
           /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
                max-width: 300px;
                width: 100%;
            }
            h4.category-title {
            font-size: 36px;
          }  
        }


        /* 제목 한 줄 말줄임(…) */
.table.board-table td .board-title{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* 날짜는 너무 넓지 않게(선택) */
.table.board-table .board-date{ width:110px; }

/* 모바일: 작성자(2번째 열) 숨김 */
@media (max-width:576px){
  .table.board-table thead th:nth-child(2),
  .table.board-table tbody td:nth-child(2){
    display:none;
  }
  /* 제목이 남은 공간 최대 사용 */
  .table.board-table .board-date{ width:96px; }
}