.technology-core {
  padding-top: clamp(48px, 6vw, 72px);
}

.technology-sub-hero {
  background-image: none;
}

.technology-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.technology-card,
.technology-card:nth-child(even) {
  box-sizing: content-box;
  position: static;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: visible;
}

.technology-card > .technology-card-copy {
    box-sizing: content-box;
    display: block;
  width: auto;
}

.technology-card-copy > p {
    box-sizing: content-box;
  margin: 0 0 10px;
  color: #2c4434;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.technology-card-copy > span {
  display: block;
  line-height: normal;
}

.technology-card > .technology-card-media {
    box-sizing: content-box;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f0eee8;
}

.technology-card-media > img,
.technology-card-media > .technology-placeholder {
    box-sizing: content-box;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    object-fit: cover;
}

/* BUG-D-271 · DEV-REQ-139 N-3730 — 대표 이미지는 <picture> 안에 있어 위 「> img」 규칙이 닿지 않았다. 이미지가 원래 비율 높이로만 서서
   4:3 이미지 칸보다 낮으면 칸 배경(#f0eee8)이 이미지 아래에 띠로 보였다. picture 와 img 가 칸을 채우게 한다(cover · 위 기준 —
   세로로 긴 이미지는 지금처럼 위쪽이 보인다). 767px 이하의 「min-height: 220px」 도 여기서 0 으로 덮는다(칸이 4:3 이라 필요 없다). */
.technology-card-media > picture {
    display: block;
    width: 100%;
    height: 100%;
}

.technology-card-media > picture > img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center top;
}

.technology-patent-chips {
    box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.technology-patent-chips span {
    box-sizing: content-box;
    display: block;
    padding: 3px 10px;
  margin: 0;
  overflow: visible;
  border: 1px solid #c9c5ba;
  border-radius: 3px;
  color: #8a877e;
  font-family: "Pretendard Variable", sans-serif;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  line-height: normal;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.technology-related-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
}

.technology-related-products strong {
  /* BUG-D-277 · DEV-REQ-139 N-3736 — 「연관 제품」 라벨은 한 줄을 차지하고 칩은 다음 줄부터. */
  flex-basis: 100%;
  color: #8a877e;
  font-weight: 600;
}

.technology-related-products a {
  padding: 4px 12px;
  border: 1px solid #c9c5ba;
  border-radius: 14px;
  color: #2c4434;
  font-weight: 600;
}

@media (max-width: 1023.98px) {
  .technology-card,
  .technology-card:nth-child(even) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .technology-sub-hero {
    height: 300px;
    padding-bottom: 28px;
  }
}