.supplement-card {
width: 100%;
min-width: 500px;
margin: 25px 0;
padding: 20px 25px;
background: #fcfffe;
color: #222;
border: 1px solid #dae4dd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
font-family: "Pretendard", "Noto Sans KR", sans-serif;
line-height: 2;
}
.supplement-card h2 {
font-size: 22px;
margin-bottom: 12px;
font-weight: 700;
color: #111827;
display: flex;
align-items: center;
gap: 6px;
}
@media (max-width: 640px) {
.supplement-card {
width: 100%;
margin: 25px 0;
min-width: auto;
}
}
.supplement-section {
margin-bottom: 45px;
}
.table-wrapper {
display: flex;
justify-content: center;
margin-bottom: 45px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.post-entry table.supplement-info {
margin: 25px 10px;
width: fit-content;
min-width: 550px;
border-collapse: collapse;
font-size: 15px;
text-align: left;
border: 1px solid #d0e2d5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.post-entry table.supplement-info th,
.post-entry table.supplement-info td {
padding: 12px 15px;
border: 1px solid #d0e2d5;
vertical-align: top;
}
.post-entry table.supplement-info thead th {
background-color: #a5d6a7;
color: #222;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.post-entry table.supplement-info tbody td {
background-color: #f9fdfb;
}
.post-entry table.supplement-info th {
background-color: #e0f4e9;
color: #222;
font-weight: 700;
}
.supplement-info-mobile-header {
display: none;
}
@media (max-width: 640px) {
.post-entry table.supplement-info {
width: calc(100% - 20px);
min-width: auto;
border-collapse: collapse;
font-size: 15px;
text-align: left;
border: none;
box-shadow: none;
}
.post-entry table.supplement-info,
.post-entry table.supplement-info thead,
.post-entry table.supplement-info tbody,
.post-entry table.supplement-info th,
.post-entry table.supplement-info td,
.post-entry table.supplement-info tr {
display: block;
}
.post-entry table.supplement-info thead {
display: none;
}
.post-entry table.supplement-info tr {
margin-bottom: 18px;
border: 1px solid #d0e2d5;
border-radius: 12px;
background-color: #f9fdfb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.post-entry table.supplement-info tbody td {
text-align: left;
position: relative;
background-color: transparent;
border: none;
border-bottom: 1px solid #d0e2d5;
padding: 20px 15px;
}
.post-entry table.supplement-info td:last-child {
border-bottom: none;
}
.post-entry table.supplement-info td::before {
content: attr(data-label);
position: absolute;
left: 15px;
width: 45%;
white-space: nowrap;
font-weight: 600;
text-align: left;
color: #111827;
}
.supplement-info-mobile-header {
display: block;
font-weight: bold;
margin-bottom: 15px;
font-size: 1.1em;
}
}
.post-entry table.product-info {
width: fit-content;
min-width: 550px;
border-collapse: collapse;
margin: 25px 10px;
font-size: 16px;
color: #222;
border: solid 1px #d0e2d5;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, .06);
}
.post-entry table.product-info tr {
border-bottom: 1px solid #d0e2d5;
}
.post-entry table.product-info tr:last-child {
border-bottom: none;
}
.post-entry table.product-info th,
.post-entry table.product-info td {
padding: 14px 18px;
border: none;
}
.post-entry table.product-info th {
width: fit-content;
min-width: 100px;
background: #e0f4e9;
font-weight: 600;
text-align: center;
}
.post-entry table.product-info td {
background: #f9fdfb;
}
.post-entry table.product-info tr:nth-child(even) td {
background: #f3faf6;
}
.post-entry table.product-info tr:hover td {
background: #e4efea;
transition: background-color .25s ease;
}
.post-entry table.product-info tr:hover th {
background: #d4eddf;
transition: background-color .25s ease;
}
@media (max-width: 640px) {
.post-entry table.product-info {
width: calc(100% - 20px);
min-width: auto;
}
}
.post-entry table.product-info th.dark,
.post-entry table.product-info td.dark {
background: #1b5e20 !important;
color: #fff !important;
}