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


      

      /* ✅ 메인 컨테이너: 좌우 2단 레이아웃 구성 */
      .main-container { 
        display: flex; 
        gap: 20px; 
      }

      /* ✅ 화면 너비 768px 이하일 경우 세로 배치 */
      @media (max-width: 768px) { 
        .main-container { 
          flex-direction: column; 
        } 
      }

      /* ✅ 왼쪽 콘텐츠 영역 비율 3 */
      .left-content { 
        flex: 3; 
      }

      /* ✅ 오른쪽 콘텐츠 영역 비율 1 및 스타일링 */
      .right-content { 
        flex: 1; 
        background-color: #f8f9fa; 
        padding: 15px; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
      }

      /* ✅ 상품 대표 이미지 (상단 큰 이미지) */
      .detail-pic { 
        width: 100%; 
        height: 500px; 
        background-size: cover; 
        background-position: center; 
        margin-bottom: 20px; 
        border-radius: 10px; 
      }

      /* ✅ 썸네일 이미지 컨테이너: 가로 스크롤 + 간격 */
      .thumbnail-container { 
        display: flex; 
        flex-wrap: nowrap; 
        overflow-x: auto; 
        gap: 10px; 
        padding-bottom: 5px; 
        margin-top: 15px; 
      }

      /* ✅ 개별 썸네일 이미지 스타일 */
      .thumbnail { 
        width: 200px; 
        height: 200px; 
        object-fit: cover; 
        border: 2px solid transparent; 
        border-radius: 5px; 
        cursor: pointer; 
        flex-shrink: 0; 
        transition: 0.2s; 
        margin: 4px; 
      }

      /* ✅ 썸네일 선택 시 강조 효과 */
      .thumbnail.selected { 
        border-color: #007bff; 
        box-shadow: 0 0 5px rgba(0,0,0,0.3); 
      }

      /* ✅ 상품 정보 카드 (제목, 가격, 내용 등) */
      .info { 
        display: flex; 
        flex-direction: column; 
        gap: 15px; 
        padding: 20px; 
        border-radius: 8px; 
        background: #f9f9f9; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
      }

      /* ✅ 개별 정보 블록 (ex. 제목, 가격 등) */
     .info-box {
        display: flex;
        flex-direction: row; /* ❗기존 column → row */
        align-items: center;
        gap: 8px;
      }


      /* ✅ 라벨 스타일 (ex. "가격:") */
      .info-box label { 
        font-weight: bold; 
        color: #333; 
        margin-bottom: 5px; 
      }

      /* ✅ 정보 텍스트 (ex. 30,000원) 제목, 가격, 올린사람 크기 조정*/
      .info-box p { 
        margin: 0; 
        font-size: 18px; 
        color: #555; 
      }

      /* ✅ 수정 버튼 */
      #edit { 
        background-color: navy; 
      }

      /* ✅ 채팅 버튼 */
      #chat { 
        background-color: yellowgreen; 
      }

      /* ✅ 삭제 버튼 */
      #delete { 
        background-color: red; 
      }

      /* ✅ 모든 버튼 공통 스타일 */
      #edit, #chat, #delete { 
        display: inline-block; 
        margin-top: 10px; 
        padding: 10px 20px; 
        border: none; 
        border-radius: 5px; 
        color: white; 
        cursor: pointer; 
      }

      /* ✅ info-box 안의 <p> 요소에 적용될 스타일 */
      .info-box p {
        word-wrap: break-word;            /* 📌 긴 단어가 박스 너비를 넘을 경우 강제로 줄바꿈 */
        overflow-wrap: break-word;        /* 📌 최신 표준 브라우저용 줄바꿈 */
        white-space: pre-wrap;            /* 📌 엔터(줄바꿈)와 공백 유지하면서 자동 줄바꿈 */
        max-width: 100%;                  /* 📌 부모 박스 안에서만 출력되도록 강제 */
        font-size: 18px;                  /* 📌 글자 크기를 18px로 설정  */
      }    

     
      /* 뒤로 가기 */
       .back-button {
        background-color: #f8f9fa;        /* 밝은 회색 배경 (Bootstrap 'light') */
        color: #333;                      /* 글자색 */
        border: 1px solid #ced4da;        /* 연한 테두리 */
        padding: 8px 16px;                /* 상하좌우 여백 */
        border-radius: 6px;               /* 버튼 둥글게 */
        font-size: 16px;                  /* 글자 크기 */
        font-weight: 500;                 /* 글자 굵기 */
        cursor: pointer;                 /* 마우스 오버 시 손 모양 */
        transition: background-color 0.2s, color 0.2s; /* 부드러운 전환 효과 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 살짝 그림자 */
      }

      .back-button:hover {
        background-color: #e2e6ea;       /* 마우스 올렸을 때 색 변화 */
        color: #000;                     /* 글자 더 진하게 */
      }

      .back-button:active {
        transform: scale(0.98);          /* 클릭 시 살짝 눌리는 효과 */
      }

      
       /* 📱 [모바일 화면: 가로 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%;
            }       
        }

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

        /* 💻 [노트북/중간 해상도: 가로 769px ~ 1199px] */
        @media (min-width: 769px) and (max-width: 1199px) {
          body {
            background-color: seashell; /* 중간 화면 전용 배경색 */
          }         
          .navbar-text {
            display: none;             /* 텍스트 요소 숨김 (공간 절약) */
          }
        }

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



    /* ✅ 썸네일 이미지 컨테이너 */
    .thumbnail-container { 
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 20px auto 0 auto;
    }


    /* ✅ 개별 썸네일 이미지 */
    .product-detail-image {
      width: 100%;
      height: auto;
      display: block;
      margin: 0 auto 20px auto;
      border-radius: 8px;
    }

    @media (max-width: 576px) {
      .thumbnail-container {
        width: 100%;
        max-width: 100%;
      }

      .product-detail-image {
        width: 100%;
        height: auto;
        margin-bottom: 16px;
      }
    }