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

      /* ✅ 페이지 전체 콘텐츠를 좌우로 나누기 위한 컨테이너 */
      .main-container {
        display: flex;       /* Flexbox 레이아웃으로 좌우 정렬 가능하게 함 */
        gap: 20px;           /* 좌우 영역 사이 간격 */
      }



      /* ✅ 오른쪽 사이드 영역 (예: 추천 상품, 광고 등) */
      .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;                /* 상품 간 간격 */
        margin-top: 50px;         /* 위쪽 여백 */
      }

      /* ✅ 개별 상품 카드 스타일 */
      .product {
        display: inline-block;                        /* 줄 바꿈 허용하면서 가로 배치 */
        width: 300px;                                 /* 고정 너비 */
        height: 400px;                                /* 고정 높이 */
        border: 1px solid #ddd;                       /* 얇은 테두리 */
        border-radius: 5px;                           /* 모서리 둥글게 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);     /* 부드러운 그림자 */
        overflow: hidden;                             /* 내용 넘칠 경우 자르기 */
        text-align: center;                           /* 텍스트 가운데 정렬 */
      }

      /* ✅ 대표 이미지 또는 슬라이드 이미지 표시 영역 */
      .carousel {
        position: relative;          /* 내부 이미지들을 절대 위치로 배치하기 위한 기준 */
        width: 100%;
        height: 200px;               /* 고정 높이 */
        display: flex;
        align-items: start;
        overflow: hidden;            /* 넘치는 이미지 숨김 */
      }

      /* ✅ 숨겨야 할 부가정보에 사용되는 클래스 */
      .info-hide {
        display: none;               /* 감춤 */
      }

      /* ✅ 캐러셀에 삽입될 이미지 스타일 (애니메이션 효과 포함) */
      .carousel-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;                    /* 비율 유지하며 채우기 */
        transition: transform 0.3s, opacity 0.5s; /* 확대/투명도 애니메이션 */
      }

      /* ✅ 일반 캐러셀 이미지 스타일 */
      .carousel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        position: absolute;
        transition: opacity 0.5s ease-in-out;
      }

      /* ✅ 하단 썸네일 이미지 리스트 (좌우 스크롤 가능) */
      .thumbnail-container {
        display: flex;
        gap: 10px;
        max-width: 100%;
        overflow: auto;                /* 썸네일 많을 경우 좌우 스크롤 */
        justify-content: center;       /* 가운데 정렬 */
        margin-top: 10px;
      }

      /* ✅ 각 썸네일 이미지 스타일 */
      .thumbnail-container img {
        width: 60px;
        height: 60px;
        border-radius: 5px;           /* 살짝 둥글게 */
        object-fit: cover;            /* 잘림 없이 채움 */
        cursor: pointer;              /* 클릭 가능하게 커서 변경 */
        border: 1px solid #ddd;       /* 테두리 */
      }

      /* ✅ 썸네일 이미지의 일반적인 스타일 (선택 시 효과용 등) */
      .thumbnail {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border: 2px solid transparent;     /* 기본은 투명 */
        transition: transform 0.2s ease-in-out; /* 확대 전환 효과 */
      }

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

      /* ✅ 상품 설명 박스 (예: 가격, 설명 등) */
      .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-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* 진한 그림자 */
        text-align: center;
      }

      /* ✅ 동영상 영역 크기 설정 */
      .video-container {
        width: 100%;
        height: 200px;
      }

      /* ✅ 동영상 하단 버튼 영역 */
      .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;
      }


      /* 📱 [모바일 화면: 가로 576px 이하] */
      @media (max-width: 576px) {
        body {
          background-color: snow; /* 밝은 배경색으로 가독성 향상 (모바일 전용) */
        }
        .navbar .btn {
          font-size: 0.8rem;         /* 버튼 텍스트 크기 작게 조정 */
          padding: 0.3rem 0.6rem;    /* 버튼 안쪽 여백 줄여서 공간 확보 */
        }
        #searchInput {
          width: 100%;               /* 검색창을 전체 너비로 확장 */
        }
        .video-card {
          width: 100%;
          max-width: 300px;   /* 최대 너비 제한 */
          margin: auto;       /* 가운데 정렬 */
        }
        /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
        .right-content img {
            max-width: 300px;
            width: 100%;
          }
      }

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

      /* 💻 [노트북/중간 해상도: 가로 769px ~ 1199px] */
      @media (min-width: 769px) and (max-width: 1199px) {
        body {
          background-color: seashell; /* 중간 화면 전용 배경색 */
        }
        .video-card {
          width: 100%;
          max-width: 300px;   /* 최대 너비 제한 */
          margin: auto;       /* 가운데 정렬 */
        }
        .navbar-text {
          display: none;             /* 텍스트 요소 숨김 (공간 절약) */
        }
         /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
        .right-content img {
            max-width: 300px;
            width: 100%;
          }
      }

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


      /* ==================================================
   📱💻 모바일·태블릿 햄버거 메뉴
   모든 버튼을 개별적으로 가로 배치하고
   공간이 부족하면 자연스럽게 다음 줄로 이동
  ================================================== */
  @media (max-width: 1199.98px) {

    /* ================================================
      ✅ 네비게이션 전체
    ================================================ */
    .navbar {
      position: relative;
    }

    .navbar .container-fluid {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    /* ✅ 햄버거 버튼 오른쪽 배치 */
    .navbar-toggler {
      margin-left: auto;
    }

    /* ================================================
      ✅ 햄버거를 눌렀을 때 펼쳐지는 영역
    ================================================ */
    #navbarNav {
      position: static !important;

      width: 100% !important;
      min-width: 0;
      max-width: none;

      margin-top: 8px;
      padding: 0;

      background-color: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;

      z-index: auto;
    }

    /* ✅ 펼쳐진 메뉴 전체 */
    #navbarNav.navbar-collapse.show {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;

      align-items: center;
      justify-content: flex-start;
      align-content: flex-start;

      /* ✅ 모든 버튼의 일정한 간격 */
      column-gap: 8px !important;
      row-gap: 8px !important;
    }

    /* ✅ 펼쳐지는 애니메이션 중 */
    #navbarNav.navbar-collapse.collapsing {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;

      align-items: center;
      justify-content: flex-start;
      align-content: flex-start;

      width: 100% !important;
      min-height: 0 !important;
      height: auto !important;

      column-gap: 8px !important;
      row-gap: 8px !important;
    }

    /* ================================================
      ✅ ul과 li의 묶음 박스를 제거
      커뮤니티·시공사례도 각각 독립된 Flex 항목으로 처리
    ================================================ */
    #navbarNav > .navbar-nav {
      display: contents !important;
    }

    #navbarNav > .navbar-nav > .nav-item {
      display: contents !important;
    }

    /* ================================================
      ✅ 커뮤니티·시공사례 버튼
    ================================================ */
    #navbarNav .navbar-nav .nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;

      flex: 0 0 auto !important;

      margin: 0 !important;
      padding: 8px 14px !important;

      background-color: royalblue;
      color: white !important;

      border-radius: 6px;

      font-size: 16px;
      font-weight: 600;
      line-height: 1.35;

      text-align: center;
      white-space: nowrap;

      overflow: visible;
      text-overflow: clip;
    }

    #navbarNav .navbar-nav .nav-link:hover {
      background-color: #3455c5;
      color: white !important;
      text-decoration: none;
    }

    /* ================================================
      ✅ 관리자페이지·로그아웃·나의 페이지 버튼
    ================================================ */
    #navbarNav > .btn,
    #navbarNav > a.btn,
    #navbarNav > button.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: auto !important;
      min-width: 0 !important;

      flex: 0 0 auto !important;

      margin: 0 !important;
      padding: 8px 14px !important;

      font-size: 16px;
      font-weight: 600;
      line-height: 1.35;

      border-radius: 6px;

      white-space: nowrap;
    }

    /* ✅ Bootstrap me-1, me-2 등의 여백 제거 */
    #navbarNav .btn,
    #navbarNav .nav-link,
    #navbarNav .navbar-text {
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    /* ================================================
      ✅ 사용자 이름
    ================================================ */
    #navbarNav .navbar-text {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: auto !important;
      flex: 0 0 auto !important;

      padding: 6px 4px;

      font-size: 16px;
      font-weight: 500;

      white-space: nowrap;
    }

    /* ================================================
      ✅ visibility:hidden 요소가 빈 공간을 차지하지 않게 함
    ================================================ */
    #navbarNav .btn[style*="visibility: hidden"],
    #navbarNav a[style*="visibility: hidden"],
    #navbarNav button[style*="visibility: hidden"] {
      display: none !important;
    }
  }