.kscc-comparison {
  margin: 36px 0 48px;
}

.kscc-title {
  margin: 0 0 28px;
  text-align: center;
}

.kscc-intro {
  margin: 0 0 24px;
}

.kscc-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kscc-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  line-height: 1.8;
}

.kscc-table th,
.kscc-table td {
  padding: 14px 16px;
  border: 1px solid #dddddd;
  vertical-align: top;
}

.kscc-table thead th {
  background: #f5f5f5;
  text-align: left;
  white-space: nowrap;
}

.kscc-table tbody th {
  text-align: left;
}

.kscc-table a {
  font-weight: 700;
}

.kscc-col-rank,
.kscc-col-score,
.kscc-col-comments,
.kscc-col-sweetness,
.kscc-col-price,
.kscc-cell-rank,
.kscc-cell-score,
.kscc-cell-comments,
.kscc-cell-price {
  text-align: center !important;
}

.kscc-col-rank { width: 62px; }
.kscc-col-score { width: 92px; }
.kscc-col-comments { width: 86px; }
.kscc-col-sweetness { width: 92px; }
.kscc-col-price { width: 145px; }

.kscc-note {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.8;
}

.kscc-empty { margin: 24px 0; }

.kscc-upper {
  padding-top: 28px;
  padding-bottom: 10px;
}

.kscc-last-reviewed {
  margin: 0 0 16px;
  text-align: right;
  font-size: 13px;
  color: #666;
}

.kscc-supervisor {
  margin: 20px 0 36px;
  padding: 20px 24px;
  border: 1px solid #ddd;
  background: #fff;
}

.kscc-supervisor p:last-child { margin-bottom: 0; }
.kscc-supervisor-name { margin-bottom: 8px; font-weight: 700; }

.kscc-top3 { margin: 34px 0 42px; }
.kscc-top3 > h2 { text-align: center; }

.kscc-top3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.kscc-top3-card {
  position: relative;
  padding: 18px;
  border: 1px solid #ddd;
  background: #fff;
}

.kscc-top3-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  margin: 0;
  padding: 4px 10px;
  background: rgba(0,0,0,.76);
  color: #fff;
  font-size: 13px;
}

.kscc-top3-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f3;
}

.kscc-top3-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kscc-top3-noimage {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #777;
}

.kscc-top3-card h3 { margin: 16px 0 8px; font-size: 18px; }
.kscc-top3-score { margin-bottom: 8px; }
.kscc-top3-score strong { font-size: 20px; }

.kscc-lower-content {
  margin-top: 56px;
  padding-top: 12px;
}

.kscc-seo-section { margin: 0 0 56px; }
.kscc-seo-section > h2 { margin-top: 0; }

.kscc-faq-list { border-top: 1px solid #ddd; }
.kscc-faq-item { border-bottom: 1px solid #ddd; }
.kscc-faq-item summary {
  position: relative;
  padding: 18px 42px 18px 8px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.kscc-faq-item summary::-webkit-details-marker { display: none; }
.kscc-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
}
.kscc-faq-item[open] summary::after { content: "−"; }
.kscc-faq-answer { padding: 0 8px 18px; }
.kscc-faq-answer p:last-child { margin-bottom: 0; }

.kscc-admin-box .kscc-editor-field { margin: 26px 0 34px; }
.kscc-admin-box .form-table th { width: 180px; }
.kscc-faq-admin-table input,
.kscc-faq-admin-table textarea { width: 100%; }

@media screen and (max-width: 767px) {
  .kscc-comparison { margin: 28px 0 36px; }
  .kscc-title { margin-bottom: 20px; }
  .kscc-table { min-width: 760px; font-size: 13px; }
  .kscc-table th,
  .kscc-table td { padding: 11px 12px; }
  .kscc-upper { padding-top: 20px; }
  .kscc-last-reviewed { text-align: left; }
  .kscc-supervisor { padding: 16px; }
  .kscc-top3-grid { grid-template-columns: 1fr; }
  .kscc-lower-content { margin-top: 40px; }
  .kscc-seo-section { margin-bottom: 44px; }
}