/* =============================================
   1. 고정폭 전체 래퍼 중앙 정렬 (PC Only)
   ============================================= */
@media (min-width: 1320px) {
  body.postid-3031 .etf-analyzer-wrapper {
    width: 1320px !important;
    max-width: 1320px !important;

    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    margin-top: 30px;
    padding: 25px;
    background: #f8faff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    clear: both !important;
  }

  /* ✅ 스크롤 가능한 외부 래퍼 (표) (PC Only) */
  body.postid-3031 .etf-analyzer-wrapper .sector-grid-outer-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    margin: 0 auto !important; /* PC에서 중앙 정렬 */
  }
  body.postid-3031 .sector-grid-outer-wrapper {
    margin-bottom: 60px !important;
  }

  /* ✅ 그리드 본체 (PC Only) */
  body.postid-3031 .etf-analyzer-wrapper .sector-grid-container {
    display: grid !important;
    grid-template-columns: 80px repeat(25, 80px);
    grid-template-rows: auto repeat(12, minmax(60px, auto));
    gap: 1px;
    width: 2105px !important; /* 전체 그리드 너비 */
    max-width: 2105px !important;
    margin: 0 auto !important; /* PC에서 중앙 정렬 (outer-wrapper가 가려도 됨) */
    padding: 20px;
    background-color: #e6f7ff;
    border: 1px solid #e0e6ed;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }

  /* ✅ 분석기 내부 테이블 영역도 정렬 (PC Only) */
  body.postid-3031 .etf-analyzer-wrapper .etf-analyzer {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: #fdfdfd;
    border: 1px solid #dcdcdc;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    display: block;
    float: none;
    clear: both;
  }
}

/* =============================================
   2. 공통 및 내부 요소 스타일
   ============================================= */
.etf-analyzer-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.etf-analyzer-wrapper h2 {
  text-align: center;
  color: #007bff;
  margin-bottom: 30px;
  font-size: 2.2em;
  font-weight: 700;
}

.etf-analyzer > h2 {
  color: #34495e;
  font-size: 1.8em;
  margin-bottom: 20px;
  text-align: center;
}

/* =============================================
   3. 표 셀 스타일
   ============================================= */
.grid-header,
.grid-cell {
  padding: 6px 2px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  background-color: #fff;
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #f0f0f0;
  color: #333;
  display: flex; /* flex 컨테이너로 유지 */
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 자식 요소들을 세로 중앙으로 정렬하여 늘어짐 방지 */
}

.sector-name-text {
  font-weight: bold;
  font-size: 0.75em;
  margin-bottom: 1px;
}
.sector-value-text {
  font-size: 0.7em;
}

.grid-header {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  font-size: 0.85em;
  border: none;
}
.fixed-header-corner {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  left: 0;
  top: 0;
  background-color: #f0f0f0;
  z-index: 4;
  border-right: 1px solid #d0e0ff;
  border-bottom: 1px solid #d0e0ff;
  color: #333;
  min-width: 80px;
}
.grid-header.year-header {
  grid-row: 1;
  background-color: #0056b3;
  color: white;
  z-index: 1;
  border-bottom: 1px solid #fff;
  min-width: 80px;
}
.grid-header.rank-header,
.grid-header.sp500-header {
  grid-column: 1;
  position: sticky;
  left: 0;
  background-color: #e6f7ff;
  color: #333;
  font-weight: bold;
  z-index: 2;
  border-right: 1px solid #d0e0ff;
  min-width: 80px;
}
.grid-header.sp500-header {
  background-color: #e0faff;
}

/* 색상 */
.white-text {
  color: white !important;
}
.grid-cell .positive {
  color: #27ae60;
}
.grid-cell .negative {
  color: #e74c3c;
}
.white-text.positive {
  color: white !important;
}
.white-text.negative {
  color: white !important;
}

/* 호버 효과 */
.sector-grid-container .grid-cell.dim {
  opacity: 0.3;
  filter: grayscale(80%);
}
.sector-grid-container .grid-cell:hover {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 5;
  transform: scale(1.05);
}

/* =============================================
   4. ETF 분석기 테이블 스타일
   ============================================= */
.etf-analyzer .controls {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.etf-analyzer label {
  font-weight: 500;
  color: #555;
  display: flex;
  align-items: center;
  gap: 8px;
}
.etf-analyzer select {
  padding: 10px 15px;
  border: 1px solid #aebfd1;
  border-radius: 8px;
  background-color: #eef7ff;
  color: #333;
  font-size: 1.05em;
  cursor: pointer;
}

.etf-analyzer table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 25px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.etf-analyzer th,
.etf-analyzer td {
  padding: 10px 15px;
  text-align: center;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.9em;
  white-space: nowrap;
}
.etf-analyzer th {
  background-color: #007bff;
  color: white;
  font-weight: 600;
}
.etf-analyzer tbody tr:nth-child(even) {
  background-color: #f8fbfd;
}
.etf-analyzer tbody tr:hover {
  background-color: #e6f7ff;
}
.etf-analyzer .highlight {
  font-weight: bold;
  color: #e67e22;
}
.etf-analyzer .positive {
  color: #27ae60;
  font-weight: bold;
}
.etf-analyzer .negative {
  color: #c0392b;
  font-weight: bold;
}
.etf-analyzer .highlight-rank {
  font-weight: bold;
  color: #007bff;
}

/* =============================================
   5. 반응형 디자인 (모바일 전용) - 대폭 수정됨
   ============================================= */
@media (max-width: 768px) {
  /* PC에서 강제했던 중앙 정렬 속성들을 모바일에선 초기화하거나 재정의 */
  /* etf-analyzer-wrapper 및 그 하위 주요 요소들을 모바일에 맞춰 조정 */
  body.postid-3031 .etf-analyzer-wrapper,
  body.postid-3031 .etf-analyzer-wrapper .sector-grid-outer-wrapper,
  body.postid-3031 .etf-analyzer-wrapper .etf-analyzer {
    width: 100% !important; /* 모바일 화면 너비에 맞춰 100% 사용 */
    max-width: 100% !important; /* 최대 너비도 100%로 제한 */
    margin-left: auto !important; /* 중앙 정렬 */
    margin-right: auto !important; /* 중앙 정렬 */
    position: static !important; /* position 속성 초기화 */
    left: auto !important; /* left 속성 초기화 */
    transform: none !important; /* transform 속성 초기화 */
    float: none !important; /* float 속성 초기화 */
    padding: 10px !important; /* 모바일 패딩 조정 */
    box-sizing: border-box !important; /* 패딩이 너비에 포함되도록 */
  }

  /* 1번 표 (.sector-grid-container) */
  body.postid-3031 .etf-analyzer-wrapper .sector-grid-container {
    /* 모바일 그리드 총 너비 재계산 (80px + 25*50px + 25*1px = 80 + 1250 + 25 = 1355px) */
    width: 1355px !important; 
    max-width: 1355px !important;
    grid-template-columns: 80px repeat(25, 50px); /* 모바일 셀 너비 조정 */
    /* 행 높이를 명시적으로 고정하여 늘어짐 방지 */
    grid-template-rows: auto repeat(12, 55px); /* 행 높이 55px로 고정 (조금 더 넓게) */
    gap: 1px; /* 갭 유지 */
    padding: 10px !important; /* 모바일 패딩 조정 */
    margin: 0 auto !important; /* 그리드 자체도 중앙 정렬 */
  }

  /* 그리드 헤더 및 셀 폰트, 패딩 조정 (모바일) */
  .grid-header,
  .grid-cell {
    padding: 4px 1px !important; /* 모바일에서 패딩 더 줄임 */
    font-size: 0.65em !important; /* 모바일에서 폰트 크기 더 줄임 */
    /* display: flex 속성은 유지하고 align-items로 수직 정렬 */
    align-items: center !important; 
  }
  .sector-name-text {
    font-size: 0.6em !important;
  }
  .sector-value-text {
    font-size: 0.55em !important;
  }
  /* 스티키 헤더/코너 셀의 너비 조정 (모바일) */
  .fixed-header-corner,
  .grid-header.rank-header,
  .grid-header.sp500-header {
    min-width: 60px !important; /* 모바일에서 고정 헤더 너비 */
    width: 60px !important; 
    padding: 4px 1px !important; 
  }
  .grid-header.year-header {
    min-width: 50px !important; /* 연도 헤더 너비 */
    width: 50px !important; 
  }

  /* 분석기 테이블 (2번 표) */
  .etf-analyzer table {
    width: 100% !important; /* 모바일 화면에 맞춤 */
    min-width: 600px !important; /* 가로 스크롤을 위한 최소 너비 설정 */
    display: block !important; /* 블록 요소로 변경하여 overflow-x 작동 */
    overflow-x: auto !important; /* 가로 스크롤 적용 */
    -webkit-overflow-scrolling: touch !important;
    margin: 0 auto !important; /* 테이블 자체도 중앙 정렬 */
  }
  .etf-analyzer th,
  .etf-analyzer td {
    padding: 8px 10px !important; /* 모바일 테이블 패딩 조정 */
    font-size: 0.8em !important; /* 모바일 테이블 폰트 크기 조정 */
    white-space: nowrap !important; /* 줄바꿈 방지 유지 */
  }
}