@media (min-width: 1320px) {
  .postid-3069 #stock-table-header-3069,
  .postid-3069 #treasury-stock-table-container-3069,
  .postid-3069 .entry-content {
    width: 1380px !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
}

/* 1320px 미만 (모바일, 태블릿 포함) */
@media (max-width: 1319px) {
  .postid-3069 #stock-table-header-3069,
  .postid-3069 #treasury-stock-table-container-3069,
  .postid-3069 .entry-content {
    width: 100% !important; /* 모바일에서 100% 너비 사용 */
    max-width: unset !important; /* 최대 너비 제한 해제 */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    /* position, left, transform은 데스크탑에서만 필요하므로 여기서는 삭제하거나 unset */
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
}

/* ========== 2. 필터 컨트롤 스타일 ========== */
/* 모든 select 요소 공통 스타일 */
#stock-table-header-3069 .filter-controls select {
  appearance: none;
  padding: 10px 16px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #6FB1FC 0%, #4364F7 100%);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(67, 100, 247, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 120px; /* 최소 너비 설정 */
  text-align: center; /* 텍스트 중앙 정렬 */
  /* flex-grow 제거: 모바일에서 너비가 고정되도록 */
}

/* 드롭다운 목록 글자색 수정 */
#stock-table-header-3069 .filter-controls select option {
  color: #000; /* 검은색으로 변경 (원하는 색상으로 변경 가능) */
  background-color: #fff; /* 배경색을 흰색으로 설정 */
}

#stock-table-header-3069 .filter-controls select:hover {
  background: linear-gradient(135deg, #4364F7 0%, #6FB1FC 100%);
}

/* 활성 필터 스타일 */
#stock-table-header-3069 .filter-controls select.filter-active {
  background: linear-gradient(135deg, #FFC371 0%, #FF5F6D 100%); /* 활성 필터 배경색 변경 */
  box-shadow: 0 4px 12px rgba(255, 95, 109, 0.6);
  color: #fff;
}
#stock-table-header-3069 .filter-controls select.filter-active:hover {
  background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);
}

/* 검색창 스타일 (흰색 배경 유지) */
#etf-search-input-3069 {
  padding: 10px 16px;
  border: 1px solid #ccc; /* 테두리 추가 */
  border-radius: 30px;
  background-color: white; /* 흰색 배경 유지 */
  color: #333; /* 텍스트 색상 */
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 그림자 약하게 */
  transition: all 0.3s ease;
  /* flex-grow 제거 */
  min-width: 150px; /* 검색창 최소 너비 */
  box-sizing: border-box; /* 패딩 및 테두리 포함 너비 계산 */
}

#etf-search-input-3069::placeholder { /* 플레이스홀더 텍스트 색상 */
  color: #888;
}

#etf-search-input-3069:focus { /* 포커스 시 테두리 색상 변경 */
  border-color: #4a69bd;
  outline: none;
  box-shadow: 0 2px 8px rgba(74, 105, 189, 0.3);
}

/* ========== 3. 테이블 컨테이너 ========== */
#treasury-stock-table-container-3069 {
  overflow-x: auto; /* 가로 스크롤바 추가 */
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0,0,0,0.05);
  background-color: #fff;
  padding: 10px;
  width: 100%; /* 부모 너비에 맞춤 */
  box-sizing: border-box; /* 패딩 포함 너비 계산 */
}

/* ========== 4. 테이블 스타일 ========== */
.stock-table {
  width: 100%; /* 컨테이너 너비에 맞춤 */
  min-width: 1000px; /* 테이블의 최소 너비 설정 (수수료 컬럼 추가로 증가) */
  border-collapse: collapse;
  font-size: 14px;
  color: #333;
}

.stock-table thead th {
  background: #4a69bd;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 12px;
  border-bottom: 2px solid #ccc;
  white-space: nowrap; /* 헤더 텍스트 줄바꿈 방지 */
}

.stock-table tbody td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #e9ecef;
  white-space: nowrap; /* 셀 내용 줄바꿈 방지 */
}

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

.stock-table tbody tr:hover {
  background-color: #e8f0ff;
}

/* 첫 번째 열 - 번호 */
.stock-table td:nth-child(1) {
  font-weight: bold;
  color: #4a69bd;
}

/* 두 번째 열 - 카테고리 */
.stock-table td:nth-child(2) {
  font-weight: bold;
  color: #4a69bd;
}

/* 종목명 왼쪽 정렬 */
.stock-table td:nth-child(4) { /* 번호 열 추가로 nth-child 변경 */
  text-align: left;
  font-weight: 500;
}

/* 수수료 스타일 */
.stock-table td:nth-child(8) { /* 수수료 컬럼 */
  color: #666;
  font-size: 13px;
  font-weight: 500;
}

/* 수익률 강조 */
.stock-table td.positive {
  color: #e74c3c;
  font-weight: bold;
}
.stock-table td.negative {
  color: #3498db;
  font-weight: bold;
}

/* 숫자 오른쪽 정렬 */
.stock-table td.align-right {
  text-align: right !important;
}

/* 필터 상단 박스 UI */
#stock-table-header-3069 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap; /* 모바일에서 요소들이 줄바꿈되도록 */
  gap: 10px;
  width: 100%; /* 부모 너비에 맞춤 */
  box-sizing: border-box; /* 패딩 포함 너비 계산 */
}

#stock-table-header-3069 .header-left-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-grow: 1; /* 남은 공간을 채우도록 허용 */
}

#stock-table-header-3069 .info-text {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

#stock-table-header-3069 .filter-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-grow: 1; /* 남은 공간을 채우도록 허용 */
  justify-content: flex-end; /* 필터 컨트롤을 오른쪽으로 정렬 */
}

/* 모바일 반응형 조정 */
@media (max-width: 768px) {
  #stock-table-header-3069 {
    flex-direction: row; /* 기존 행 방향 유지 */
    align-items: center; /* 중앙 정렬 유지 */
    flex-wrap: wrap; /* 요소들이 여전히 줄바꿈되도록 */
    justify-content: flex-start; /* 왼쪽 정렬 */
  }

  #stock-table-header-3069 .header-left-controls,
  #stock-table-header-3069 .filter-controls {
    width: auto; /* 너비 자동 조정 */
    flex-grow: unset; /* flex-grow 해제 */
    justify-content: flex-start; /* 왼쪽 정렬 */
  }

  #stock-table-header-3069 .filter-controls select,
  #stock-table-header-3069 .header-left-controls input[type="text"] {
    width: auto; /* 너비 자동 조정 */
    min-width: unset; /* 최소 너비 제한 해제 */
    flex-grow: 1; /* 다시 flex-grow를 적용하여 남은 공간을 채우도록 */
  }
}

@media (max-width: 480px) {
  #stock-table-header-3069 .filter-controls select,
  #stock-table-header-3069 .header-left-controls input[type="text"] {
    width: 100%; /* 작은 화면에서 한 개씩 한 줄에 오도록 */
    max-width: none; /* 최대 너비 제한 해제 */
  }
  #stock-table-header-3069 .filter-controls {
      flex-direction: column; /* 세로로 쌓이도록 변경 */
      align-items: stretch; /* 아이템들을 늘려 전체 너비 차지 */
  }
  #stock-table-header-3069 .header-left-controls {
      flex-direction: column; /* 세로로 쌓이도록 변경 */
      align-items: stretch; /* 아이템들을 늘려 전체 너비 차지 */
  }
}