.table-container {
width: 100%;
overflow-x: auto;
margin-bottom: 20px;
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 30px;
min-width: 600px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.section-title {
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}
.subtitle {
text-align: left;
font-style: italic;
}
.size-xs{
background-color: #f4f9de !important;
}
.size-s{
background-color: #eef9b6 !important;
}
.size-m{
background-color: #c8dfaf !important;
}
.size-l{
background-color: #a8d291 !important;
}
.size-xl{
background-color: #61b6d4 !important;
}
.size-ml{
background-color: #8a9bcf !important;
}
.size-ll{
background-color: #5387d9 !important;
}
@media (min-width: 768px) {
.table-container {
overflow-x: visible;
}
table {
min-width: 0;
}
}

.measurement {
display: flex;
position: relative;
}

.measurement::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
transform: rotate(-15deg);
}

.measurement-item {
flex: 1;
text-align: center;
padding: 10px;
}
.size-chart-selector {
margin: 20px 0;
}

.size-chart-selector label {
margin-right: 10px;
font-weight: bold;
}

.size-chart-selector select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f8f8f8;
}

/* 默认隐藏所有表格 */
.table-container {
display: none;
}

/* 显示选中的表格 */
.table-container.active {
display: block;
}