/* Aurora UX–themed styles for post #3142
   - 모든 색/그림자/경계는 토큰 변수 사용
   - 토큰 미주입 환경 대비해 var(..., fallback)로 안전장치
*/

/* ========== 1) 중앙 정렬/컨테이너 레이아웃 유지 ========== */
@media (min-width: 1320px) {
  .postid-3142 #ethereum-table-container-3142,
  .postid-3142 #ethereum-stats-3142,
  .postid-3142 #ethereum-chart-section-3142 {
    width: 1280px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 1319px) {
  .postid-3142 #ethereum-table-container-3142,
  .postid-3142 #ethereum-stats-3142,
  .postid-3142 #ethereum-chart-section-3142 {
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 15px;
  }
}

/* ========== 2) 공통 박스 스타일 (토큰화) ========== */
#ethereum-table-container-3142,
#ethereum-price-stats-3142 .stats-box,
#ethereum-stats-3142 .stats-box,
.chart-container {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(2,6,23,0.08));
  background-color: var(--surface, #ffffff);
  padding: 16px;
  margin-bottom: 20px;
}
#ethereum-table-container-3142 { overflow-x: auto; }

/* 누적 투자 성과 강조 박스 */
#ethereum-price-stats-3142 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
#ethereum-price-stats-3142 .stats-box {
  padding: 24px 36px;
  background: color-mix(in oklab, var(--primary, #2563eb) 10%, var(--surface, #fff));
  border: 1px solid color-mix(in oklab, var(--primary, #2563eb) 35%, var(--border, #e2e8f0));
  box-shadow: var(--shadow-md, 0 10px 30px rgba(2,6,23,0.08));
}
#ethereum-price-stats-3142 .stats-box-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #1f2937);
  margin-bottom: 16px;
}
#ethereum-price-stats-3142 .stats-table {
  font-size: 18px;
  font-weight: 700;
}
#ethereum-price-stats-tbody-3142 td:first-child {
  background-color: var(--surface-2, #f1f5f9);
  color: var(--muted-text, #64748b);
  text-align: left;
  border-right: 1px solid var(--border, #e2e8f0);
  padding-right: 12px;
}
#ethereum-price-stats-tbody-3142 td:last-child {
  color: var(--text, #1f2937);
  text-align: right;
  padding-left: 12px;
}
/* 총 수익률 행 강조 (±에 따라 success/danger) */
#ethereum-price-stats-tbody-3142 tr:last-child td {
  font-size: 22px;
  color: var(--primary, #2563eb);
}
#ethereum-price-stats-tbody-3142 tr:last-child td.positive { color: var(--success, #22c55e); }
#ethereum-price-stats-tbody-3142 tr:last-child td.negative { color: var(--danger, #ef4444); }

/* ========== 3) 메인 테이블 (월별 수익률) ========== */
.bitcoin-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text, #1f2937);
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
}
.bitcoin-table thead th {
  background: var(--primary, #2563eb);
  color: var(--primary-foreground, #ffffff);
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  white-space: nowrap;
}
.bitcoin-table tbody td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid var(--border, #e2e8f0);
  white-space: nowrap;
}
.bitcoin-table tbody tr:nth-child(even) {
  background-color: color-mix(in oklab, var(--table-hover, rgba(2,6,23,0.03)) 60%, var(--surface, #fff));
}
.bitcoin-table tbody tr:hover {
  background-color: var(--table-hover, rgba(2,6,23,0.03));
}
.bitcoin-table td:nth-child(1) {
  font-weight: 700;
  color: var(--text, #1f2937);
}

/* 포지티브/네거티브/결측 표시 */
.bitcoin-table td.positive, .stats-table td.positive { color: var(--success, #22c55e); font-weight: 700; }
.bitcoin-table td.negative, .stats-table td.negative { color: var(--danger, #ef4444); font-weight: 700; }
.bitcoin-table td.na-data { color: var(--muted-text, #94a3b8); font-style: italic; }

/* ========== 4) 통계 및 차트 섹션 ========== */
#ethereum-stats-3142, #ethereum-chart-section-3142 { margin-top: 40px; }
.section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #1f2937);
  margin-bottom: 16px;
  border-bottom: 2px solid var(--primary, #2563eb);
  padding-bottom: 8px;
}
.stats-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.stats-box {
  flex: 1;
  min-width: 300px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(2,6,23,0.06));
}
.stats-box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #1f2937);
  margin-bottom: 12px;
  text-align: center;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}
.stats-table thead th {
  background: color-mix(in oklab, var(--primary, #2563eb) 90%, black 0%);
  color: var(--primary-foreground, #ffffff);
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.stats-table tbody tr:nth-child(even) {
  background-color: color-mix(in oklab, var(--table-hover, rgba(2,6,23,0.03)) 50%, var(--surface, #ffffff));
}
.stats-table tbody td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

/* ========== 5) 차트 상자 ========== */
.chart-container {
  height: 400px;
  padding: 16px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(2,6,23,0.08));
}

/* ========== 6) 포커스 가시성(접근성) ========== */
:where(#ethereum-container-3142 button, #ethereum-container-3142 a, #ethereum-container-3142 table):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #2563eb) 45%, transparent);
  border-radius: 6px;
}