/* style.css */
:root { --table-gap: 28px; }
.board-wrap { background: transparent; }
.region-block { margin: var(--table-gap) 0; }
.region-title { font-weight: 700; font-size: 18px; margin: 8px 0; }
.trade-table { width: 700px; border-collapse: collapse; background: #fff; }
.trade-table th, .trade-table td { border: 1px solid #000; padding: 6px 8px; text-align: center; }
.trade-table th { background: #f6f6f6; }
/* darker 1px hatch */
.mat-strike { 
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.30) 0, rgba(0,0,0,0.30) 1px, transparent 1px, transparent 5px);
}
.subcell { text-align:left; }
.small { font-size:12px; color:#666; }
.checkbox-col { width: 42px; }
.price-col { width: 110px; }
.qty-select { width: 64px; }
.btn-bar { margin: 6px 0 14px; }
.btn { display:inline-block; border:1px solid #aaa; padding:4px 8px; cursor:pointer; background:#fff; }
.btn:hover { background:#f0f0f0; }

/* 테이블 글자 전체 중앙정렬 */
table th,
table td {
  text-align: center !important;
  vertical-align: middle;
}

/* 안쪽에 들어간 span, div 같은 것도 강제로 중앙 정렬 */
table th *,
table td * {
  text-align: center !important;
  margin: 0 auto !important;
  display: inline-block;  /* 혹시 block 요소여도 가운데 오게 */
}

/* 테이블을 화면 가운데 정렬 */
table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  text-align: center; /* 테이블 전체 글자 가운데 */
}

/* 테이블 헤더와 셀 글자 가운데 */
table th,
table td {
  text-align: center;
  vertical-align: middle;
}

/* 지역 타이틀(오아시스, 페라 화산 등) 가운데 정렬 */
.region-title {
  text-align: center !important;
  display: block;
  margin: 12px auto;
}

/* 버튼 전체 컨테이너 가운데 정렬 */
.button-container {
  display: flex;
  justify-content: center;  /* 수평 가운데 */
  margin: 15px 0;
  gap: 5px; /* 버튼 간격 */
}

/* 버튼 공통 스타일 */
.button-container button {
  background-color: #ffffff; /* 배경 흰색 */
  border: 1px solid #ccc;
  padding: 5px 10px; /* 내부 여백 */
  margin: 1px;       /* 외부 여백 */
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #a0a0a0;       /* 기본 글자색 */
  transition: all 0.2s ease-in-out;
}

/* hover 시 */
.button-container button:hover {
  background-color: #f0f0f0;
  color: #000000;
}

/* 폰트 색상을 바꿀 때는 버튼마다 개별 클래스 주기 */
.button-container .btn-blue {
  color: #0066cc;
}
.button-container .btn-red {
  color: #cc0000;
}
.button-container .btn-green {
  color: #009933;
}