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

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


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

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


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

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


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

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


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


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

      /* ✅ 다크모드 - 카드 스타일 */
      .dark-mode .post-card {
          background-color: #1e1e1e;     /* 다크 카드 배경 */
          border-color: #444;            /* 어두운 테두리 */
      }

      /* ✅ 다크모드 - 입력창, 드롭다운 */
      .dark-mode .form-control,
      .dark-mode .form-select {
          background-color: #2c2c2c;     /* 입력창 배경 */
          color: #fff;                   /* 입력 텍스트 */
          border-color: #555;            /* 테두리 */
      }

      /* ✅ 다크모드 - 링크 색상 */
      .dark-mode a {
          color: #a3d8ff;                /* 하늘색 계열 링크 */
      }   

        .container {
          max-width: 600px;
          margin: 0 auto;
          padding: 20px;
          background: #ffffff;
          border-radius: 12px;
          box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }

        form {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        label {
          font-weight: bold;
          margin-bottom: 5px;
        }

        input[type="text"],
        input[type="tel"],
        input[type="date"],
        input[type="file"],
        textarea {
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 6px;
          font-size: 16px;
        }

        textarea {
          resize: vertical;
          height: 100px;
        }

        /* ✅ 버튼 스타일: 고유 클래스 사용 */
        .as-submit-btn {
          background-color: #28a745;
          color: white;
          border: none;
          padding: 12px;
          font-size: 16px;
          border-radius: 6px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }

        .as-submit-btn:hover {
          background-color: #218838;
        }

        .info {
          font-size: 16px;
          color: #555;
          margin-top: 20px;
        }

        @media (max-width: 576px) {
          .container {
            padding: 15px;
          }

          input, textarea, button {
            font-size: 16px;
          }
        }      


      /* 모달 배경 */
        .modal-overlay {
          display: none;
          position: fixed;
          z-index: 9999;
          top: 0; left: 0; width: 100%; height: 100%;
          background: rgba(0, 0, 0, 0.7);
          justify-content: center;
          align-items: center;
        }

        /* 모달 이미지 */
       .modal-content {
          max-width: 520px;    /* 또는 width: 500px; */
          max-height: 520px;
          padding: 10px;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 0 20px #000;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .modal-content img {
          width: 100%;
          height: auto;
          border-radius: 6px;
        }


        .modal-overlay.active {
          display: flex;
        }

        /* 닫기 버튼 */
        .modal-close {
          position: fixed;
          top: 20px;
          right: 30px;
          font-size: 30px;
          color: white;
          cursor: pointer;
          z-index: 10000;
        }

        /* 테이블 스타일 */
        .as-table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 20px;
          background-color: #f9fff9;
          font-size: 16px;
        }

        .as-table th, .as-table td {
          border: 1px solid #ccc;
          padding: 10px;
          text-align: center;
          vertical-align: middle;
        }

        .as-table thead {
          background-color: #3366cc;
          color: white;
        }

        .as-table tbody tr:nth-child(even) {
          background-color: #f2f2f2;
        }

        .as-table tbody tr:hover {
          background-color: #e6f7ff;
        }

        /* 이미지 미리보기 */
        .image-preview {
          width: 100px;
          height: 100px;
          object-fit: cover;
          margin: 3px;
          border-radius: 4px;
          cursor: pointer;
          border: 1px solid #ccc;
        }  
        
        .as-table {
          table-layout: fixed; /* colgroup 폭 기준으로 테이블 배치 */
          width: 100%;
          }
          .as-table th, .as-table td {
          white-space: normal;
          word-break: break-word;
          vertical-align: top;
          }

          /* 첨부 사진: 가로 스크롤 썸네일 */
          .photo-scroll{
            display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
            padding:6px 4px; max-width:100%; -webkit-overflow-scrolling:touch;
            scroll-snap-type:x mandatory; /* 선택 */
          }
          .photo-scroll img, .photo-scroll .image-preview{
            flex:0 0 auto; width:120px; height:100px; object-fit:cover;
            border-radius:6px; border:1px solid #e5e7eb; cursor:pointer;
            scroll-snap-align:start; /* 선택 */
          }
          /* (선택) 스크롤바 스타일 */
          .photo-scroll::-webkit-scrollbar{ height:8px; }
          .photo-scroll::-webkit-scrollbar-thumb{ background:#c7ccd1; border-radius:6px; }

          
          /* 상태 대기중, 진행중, 완료 색깔 표시 */
          .status-badge{
            display:inline-block; padding:4px 10px; border-radius:12px;
            font-weight:700; font-size:.9rem; color:#fff;
          }
          .badge-pending{ background:#f0ad4e; }   /* 대기중: 주황 */
          .badge-progress{ background:#0275d8; }  /* 진행중: 파랑 */
          .badge-done{ background:#28a745; box-shadow:0 0 0 3px rgba(40,167,69,.15) inset; } /* 종료: 초록 강조 */

          /* 종료된 행 전체도 은은하게 강조하고 싶다면 */
          .row-done td{ background: #eaf7ec !important; }

  

          
    

      /* 📱 [모바일 화면: 가로 576px 이하] */
      @media (max-width: 576px) {
        body {
          background-color: snow; /* 밝은 배경색으로 가독성 향상 (모바일 전용) */
        }
        .navbar .btn {
          font-size: 1rem;         /* 버튼 텍스트 크기 작게 조정 */
          padding: 0.3rem 0.6rem;    /* 버튼 안쪽 여백 줄여서 공간 확보 */
        }
        #searchInput {
          width: 100%;               /* 검색창을 전체 너비로 확장 */
        }  

        .post-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; /* 태블릿 전용 배경색 */
        } 
        
        .post-card {
          width: 100%;
          max-width: 300px;
          margin: auto;
        }
        /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
        .right-content img {
            max-width: 300px;
            width: 100%;
          }

          .as-table, .as-table thead, .as-table tbody, .as-table th, .as-table td, .as-table tr {
          display: block;
        }

        .as-table thead {
          display: none; /* 테이블 헤더 숨김 */
        }

        .as-table tr {
          margin-bottom: 15px;
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 10px;
          background-color: #fff;
        }

        .as-table td {
          text-align: left;
          padding: 8px;
          position: relative;
          padding-left: 50%;
        }

        .as-table td::before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          width: 45%;
          white-space: nowrap;
          font-weight: bold;
          color: #333;
        }

        .image-preview {
          width: 100px;
          height: auto;
          margin: 5px 0;
        }
      }

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

      /* 🖥️ [데스크탑/대형 화면: 가로 1200px 이상] */
      @media (min-width: 1200px) {
        body {
          background-color: honeydew; /* 데스크탑 전용 배경색 */
        }  
        
        .post-card {
          width: 100%;
          max-width: 400px;
          margin: auto;
        }
        .navbar-text {
          font-size: 1rem;           /* 네비게이션 텍스트 크기 조정 */
          display: inline-block;     /* 텍스트 보이도록 설정 */
        }
        /* 📌📌📌 추가 📌📌📌광고 배너 이미지 크기 조절하기 공통 이미지 제한 */
        .right-content img {
            max-width: 300px;
            width: 100%;
          }
      }