/* ============================================================
   layout-table.css — DailyFinLab Table Style
   Features: Full-width table with horizontal scroll (mobile)
   ============================================================ */

/* Reset WordPress default table overflow — wp-block-library 코어 CSS
   보다 이 파일이 항상 나중에 로드되므로 !important 불필요 */
.wp-block-table {
  overflow-x: visible;
  overflow: visible;
}

/* ============================================================
   1) Table Wrapper - Horizontal scroll only for table
   ============================================================ */

figure.wp-block-table,
.has-fixed-layout {
  width: calc(100% + 0px);
  max-width: 100%;
  margin: 30px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  /* 표 외 영역에서 스크롤 방지 */
  position: relative;
  z-index: 1;
}

/* ============================================================
   2) Table Base Style
   ============================================================ */

.wp-block-table table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.97rem;
  color: var(--text);
  border: 1px solid var(--card-border);
}

/* ============================================================
   3) Cell Styling
   ============================================================ */

.wp-block-table th,
.wp-block-table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--divider);
  white-space: normal;
  word-break: break-word;
}

/* ============================================================
   4) Header Cell Styling
   ============================================================ */

.wp-block-table thead {
  background: var(--card-bg);
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}

.wp-block-table thead th {
  white-space: nowrap;
}

/* ============================================================
   5) Row Styling
   ============================================================ */

/* 짝수 행 배경 */
.wp-block-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

/* 마우스 오버 효과 */
.wp-block-table tbody tr:hover {
  background: #f3f6ff;
  transition: background-color 0.2s ease;
}

/* ============================================================
   6) Table Caption
   ============================================================ */

.wp-block-table figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 10px 0 5px;
}

/* ============================================================
   7) Mobile Optimization
   ============================================================ */

@media (max-width: 768px) {
  figure.wp-block-table,
  .has-fixed-layout {
    width: 100%;
    margin: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-table table {
    font-size: 0.9rem;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 10px;
    font-size: 0.9rem;
  }
}

/* ============================================================
   8) 모바일 추가 최적화 (640px 이하)
   - 테이블 폰트 축소
   - 패딩 축소
   - 가로 스크롤 더 개선
   ============================================================ */
@media (max-width: 640px) {
  figure.wp-block-table,
  .has-fixed-layout {
    width: 100%;
    max-width: 100%;
    margin: 16px auto;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    /* 스크롤 막대 숨기기 (iOS) */
    scrollbar-width: none;
    /* 표 외 영역에서 스크롤 방지 */
    box-sizing: border-box;
  }

  figure.wp-block-table::-webkit-scrollbar,
  .has-fixed-layout::-webkit-scrollbar {
    display: none;
  }

  /* 부모 요소 overflow 제거 */
  .entry-content figure.wp-block-table,
  .entry-content .has-fixed-layout {
    margin-left: auto;
    margin-right: auto;
  }

  .wp-block-table table {
    font-size: 0.85rem;
    min-width: 500px;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .wp-block-table thead th {
    white-space: normal;
    word-break: break-word;
  }

  /* 테이블 헤더 축소 */
  .wp-block-table thead {
    background: var(--card-bg);
  }

  /* 짝수 행 배경 명도 조정 */
  .wp-block-table tbody tr:nth-child(even) {
    background: rgba(250, 251, 252, 0.8);
  }

  /* 호버 효과 모바일에서 제거 */
  @media (hover: none) {
    .wp-block-table tbody tr:hover {
      background: inherit;
    }
  }
}

/* ============================================================
   9) 초소형 모바일 (480px 이하)
   - 극도로 축소된 테이블 표시
   ============================================================ */
@media (max-width: 480px) {
  .wp-block-table table {
    font-size: 0.75rem;
    min-width: 400px;
  }

  .wp-block-table th,
  .wp-block-table td {
    padding: 6px 8px;
    font-size: 0.75rem;
  }

  figure.wp-block-table,
  .has-fixed-layout {
    margin: 12px 0;
  }
}