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


      /* ✅ 비디오 카드 전체 컨테이너 스타일 */
      .video-box {
        background: white;                      /* 콘텐츠 배경은 흰색으로 가독성 유지 */
        padding: 30px;                          /* 내부 여백 충분히 확보 */
        border-radius: 12px;                    /* 카드의 모서리를 둥글게 처리하여 부드러운 느낌 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 가벼운 그림자 효과로 카드가 떠 있는 느낌 연출 */
        max-width: 800px;                       /* 너무 넓어지지 않도록 최대 너비 제한 */
        margin: 0 auto;                         /* 좌우 자동 여백으로 가운데 정렬 */
      }


        /* ✅ 채팅방 전체 영역 스타일 - 처음에는 숨겨진 상태로 시작 */
        .chat-room {
          display: none; /* JavaScript로 선택되기 전까지는 보이지 않도록 설정 */
          margin-top: 20px; /* 위쪽에 여백을 주어 콘텐츠와 간격 확보 */
          border: 1px solid #ccc; /* 회색 테두리 추가로 영역 구분 */
          border-radius: 8px; /* 모서리를 부드럽게 둥글게 처리 */
          padding: 15px; /* 내부 여백 추가 */
          background-color: #f9f9f9; /* 채팅방 배경을 밝은 회색으로 설정해 가독성 확보 */
        }

        /* ✅ 공통 채팅 메시지 박스 스타일 - 모든 채팅 메시지에 적용 */
        .chat-box {
          padding: 10px; /* 메시지 텍스트와 박스 테두리 사이에 여백 추가 */
          margin: 10px 0; /* 위/아래 간격을 줘서 메시지 간 간격 유지 */
          border-radius: 10px; /* 메시지 박스 모서리 둥글게 */
          max-width: 80%; /* 채팅 창 너비의 80%로 제한해 너무 넓지 않게 */
          word-wrap: break-word; /* 긴 단어나 링크가 줄 바꿈되도록 설정 */
          line-height: 1.4; /* 줄 간격을 살짝 늘려서 가독성 향상 */
        }

        /* ✅ 내가 보낸 메시지 스타일 - 오른쪽 정렬 + 연한 녹색 배경 */
        .mine {
          background-color: #d1e7dd; /* 연녹색 계열로 내 메시지 강조 */
          text-align: right; /* 텍스트 및 내부 요소 우측 정렬 */
          margin-left: auto; /* 오른쪽 정렬 유지를 위한 자동 마진 설정 */
        }

        /* ✅ 상대방 메시지 스타일 - 왼쪽 정렬 + 연한 분홍 배경 */
        .other {
          background-color: #f8d7da; /* 연분홍 배경으로 시각적 구분 */
          text-align: left; /* 텍스트 좌측 정렬 */
          margin-right: auto; /* 왼쪽 정렬 유지를 위한 자동 마진 설정 */
        }

        /* ✅ 채팅 메시지 내부 버튼 스타일 - 수정/삭제 버튼 등 */
        .chat-box button {
          margin-left: 5px; /* 버튼 간격 확보 */
          font-size: 0.8rem; /* 작은 버튼에 적합한 작은 글자 크기 */
          padding: 2px 6px; /* 버튼 내부 여백 (너무 작지 않게) */
          border-radius: 4px; /* 버튼 모서리 부드럽게 */
          border: none; /* 기본 테두리 제거 */
          cursor: pointer; /* 마우스 오버 시 클릭 가능한 커서 표시 */
        }

        /* ✅ 버튼에 마우스를 올렸을 때 스타일 변경 */
        .chat-box button:hover {
          background-color: black; /* 연한 회색 배경으로 hover 시 시각적 피드백 제공 */
        }

        /* ✅ 채팅방 왼쪽의 채팅 목록 스타일 */
        .chat-list {
          max-height: 800px; /* 너무 길어지지 않도록 최대 높이 제한 */
          overflow-y: auto; /* 내용이 넘칠 경우 세로 스크롤바 표시 */
          padding: 0; /* 기본 padding 제거 */
          border: 1px solid #ddd; /* 옅은 테두리로 영역 구분 */
          border-radius: 4px; /* 모서리 부드럽게 */
        }

        /* ✅ 채팅방 리스트의 각 항목 스타일 */
        .chat-list .list-group-item {
          cursor: pointer; /* 항목을 클릭할 수 있음을 시각적으로 표시 */
        }

        /* ✅ 마우스를 올렸거나 선택된 채팅 항목에 대한 스타일 */
        .chat-list .list-group-item:hover,
        .chat-list .list-group-item.active {
          background-color: #e2e6ea; /* 연한 회색으로 강조 */
        }

        /* ✅ 채팅 메시지 출력 영역 (채팅 내용 리스트) */
        .chat-content {
          list-style: none; /* 리스트 스타일 제거 (불릿 없앰) */
          padding: 0; /* 내부 여백 제거 */
          max-height: 400px; /* 너무 길어질 경우 스크롤 가능하도록 제한 */
          overflow-y: auto; /* 세로 스크롤 가능하도록 설정 */
          margin-bottom: 10px; /* 아래쪽 여백 추가 */
        }

        /* ✅ 채팅 입력창 스타일 - 기본 테두리 제거 */
        #chat-input {
          border-radius: 0; /* 각진 형태 유지 (필요 시 조절 가능) */
        }

         /* 채팅 목록에서 클릭한 항목이 마우스를 떼어도 계속 강조 */
        .list-group-item.active {
          background-color: #0d6efd;  /* 파란 배경 유지 */
          color: black;               /* ✅ 글자색을 검정으로 유지 */
          font-weight: bold;          /* (선택) 강조를 위해 글자 두껍게 */
        }


       /* 📱 [모바일 화면: 가로 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;              /* 높이를 내용에 따라 자동 조절 */
          }
            /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }        
        }

        /* 📱💻 [태블릿 화면: 가로 577px ~ 768px] */
        @media (min-width: 577px) and (max-width: 768px) {
          body {
            background-color: whitesmoke; /* 태블릿 전용 배경색 */
          }
          .product {
            width: 90%;                /* 상품 카드 너비를 90%로 설정 (좌우 여백 확보) */
            margin: auto;              /* 가운데 정렬 */
          }
            /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
          .right-content img {
              max-width: 300px;
              width: 100%;
            }        
          
        }

        /* 💻 [노트북/중간 해상도: 가로 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;     /* 텍스트 보이도록 설정 */
          }
        }