/* Detail sections for service pages (feature icons, specs, comparison, uses, related) */
.gup-detail .gup-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.gup-detail h2 { margin: 0 0 12px; font-size: clamp(1.55rem, 3vw, 2.1rem); color: #3E516F; }
.gup-detail .gup-lead { margin: 0 0 28px; color: #556; line-height: 1.65; max-width: 760px; }
.gup-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gup-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gup-feat { background: #fff; border: 1px solid #e5e9ee; border-radius: 16px; padding: 22px; transition: transform .18s ease, box-shadow .18s ease; }
.gup-feat:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(62, 81, 111, .12); }
.gup-feat__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #fdeeee; color: #CA3A3A; margin-bottom: 14px; }
.gup-feat__ic--sm { width: 44px; height: 44px; margin: 0; flex: 0 0 44px; border-radius: 12px; }
.gup-feat h3 { margin: 0 0 6px; font-size: 1.05rem; color: #3E516F; }
.gup-feat p { margin: 0; font-size: .95rem; line-height: 1.6; color: #556; }

.gup-detail__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.gup-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #e5e9ee; border-radius: 14px; background: #fff; }
.gup-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gup-table th, .gup-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #eef1f5; line-height: 1.5; }
.gup-table tr:last-child th, .gup-table tr:last-child td { border-bottom: 0; }
.gup-table tbody th { width: 34%; color: #3E516F; font-weight: 700; background: #f8fafc; }
.gup-table--compare { min-width: 680px; }
.gup-table--compare thead th { background: #3E516F; color: #fff; font-weight: 700; }
.gup-table--compare thead th.is-this { background: #CA3A3A; }
.gup-table--compare tbody th { width: 16%; }
.gup-table--compare td.is-this { background: #fff7f7; font-weight: 600; }

.gup-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gup-tips li { display: flex; gap: 14px; background: #fff; border: 1px solid #e5e9ee; border-radius: 14px; padding: 16px; }
.gup-tip__n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: #CA3A3A; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gup-tips h3 { margin: 0 0 4px; font-size: 1rem; color: #3E516F; }
.gup-tips p { margin: 0; font-size: .93rem; line-height: 1.55; color: #556; }

.gup-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gup-use { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #e5e9ee; border-radius: 14px; padding: 16px; }
.gup-use h3 { margin: 0 0 3px; font-size: 1rem; color: #3E516F; }
.gup-use p { margin: 0; font-size: .92rem; line-height: 1.5; color: #556; }

.gup-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gup-rel { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e9ee; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.gup-rel:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(62, 81, 111, .14); }
.gup-rel__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #f4f6f8; padding: 14px; }
.gup-rel__img img { width: 100%; height: 100%; object-fit: contain; }
.gup-rel__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.gup-rel__body strong { color: #3E516F; font-size: 1.05rem; }
.gup-rel__body span { color: #556; font-size: .92rem; line-height: 1.5; }
.gup-rel__body em { color: #CA3A3A; font-style: normal; font-weight: 700; margin-top: 4px; }

@media (max-width: 960px) {
  .gup-feats, .gup-uses, .gup-rels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gup-detail__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .gup-feats, .gup-uses, .gup-rels { grid-template-columns: 1fr; }
  .gup-table th, .gup-table td { padding: 10px 12px; }
  .gup-table tbody th { width: 38%; }
}