.info-hbg {
  --ih-bg-soft: #eaf6f9;
  --ih-row-tint: #d4eff6;
  --ih-lens-bg: #e9f5fa;
  --ih-table-row: clamp(54px, 8.75vw, 112px);
  --ih-gutter: clamp(20px, 3.75vw, 48px);
  --ih-section-pad: clamp(64px, 16vw, 240px);
  --ih-display: clamp(40px, 7.8vw, 100px);
  --ih-title: clamp(30px, 5.8vw, 75px);
  --ih-title-03: clamp(22px, 3.9vw, 50px);
  --ih-body: clamp(18px, 3.1vw, 40px);
  --ih-body-02: clamp(17px, 2.5vw, 32px);
  --ih-num: clamp(96px, 15.6vw, 200px);
  font-family: var(--font-pretendard);
  color: var(--surface-dark-blue-3);
  background: var(--surface-white);
}

.info-hbg .ih-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--ih-gutter);
}

.info-hbg .ih-accent {
  color: var(--surface-primary);
}

.info-hbg .ih-display {
  font-family: var(--font-pretendard);
  font-size: var(--ih-display);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
  text-align: center;
}

.info-hbg .ih-title {
  font-family: var(--font-pretendard);
  font-size: var(--ih-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
  text-align: center;
}

.info-hbg .ih-body {
  font-family: var(--font-pretendard);
  font-size: var(--ih-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
  text-align: center;
}

.info-hbg .ih-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.4vw, 44px);
  text-align: center;
}

.info-hbg .ih-intro {
  padding: clamp(112px, 12.5vw, 160px) 0 clamp(72px, 7.5vw, 96px);
  background: linear-gradient(-7deg, #5bdaee 21%, #001e38 72%);
}

.info-hbg .ih-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.info-hbg .ih-intro__logo {
  width: min(720px, 56%);
}

.info-hbg .ih-intro__motivation {
  font-family: var(--font-pretendard);
  font-size: var(--ih-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-white);
  text-align: center;
}

.info-hbg .ih-intro__product {
  width: min(1260px, 92%);
}

.info-hbg .ih-intro__slats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  width: 100%;
}

.info-hbg .ih-slat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: clamp(172px, 18vw, 236px);
  padding: clamp(22px, 2.5vw, 32px);
  border-radius: 16px;
  background: var(--surface-white);
  box-shadow: var(--drop-shadow-1);
}

.info-hbg .ih-slat__icon {
  width: clamp(44px, 4.7vw, 60px);
  height: auto;
  object-fit: contain;
}

.info-hbg .ih-slat__text {
  margin-top: clamp(28px, 4.2vw, 54px);
  font-family: var(--font-pretendard);
  font-size: var(--ih-body-02);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ir-dark-blue-01);
}

.info-hbg .ih-compare {
  padding: var(--ih-section-pad) 0;
  background: var(--ih-bg-soft);
}

.info-hbg .ih-compare__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 8.6vw, 110px);
}

.info-hbg .ih-table {
  display: grid;
  grid-template-columns: minmax(0, 280fr) minmax(0, 476fr) minmax(0, 476fr);
  grid-auto-rows: minmax(var(--ih-table-row), auto);
  align-items: stretch;
  position: relative;
  width: 100%;
  color: var(--surface-dark-blue-3);
}

.info-hbg .ih-table::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / 10;
  position: relative;
  z-index: 0;
  border-radius: 36px;
  background: var(--surface-white);
  box-shadow: var(--drop-shadow-1);
}

.info-hbg .ih-table__labels,
.info-hbg .ih-table__hagobogo,
.info-hbg .ih-table__hospital {
  display: contents;
}

.info-hbg .ih-table__labels > * {
  grid-column: 1;
}

.info-hbg .ih-table__hagobogo > * {
  grid-column: 2;
}

.info-hbg .ih-table__hospital > * {
  grid-column: 3;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(1) {
  grid-row: 1;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(2) {
  grid-row: 2;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(3) {
  grid-row: 3;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(4) {
  grid-row: 4;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(5) {
  grid-row: 5;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(6) {
  grid-row: 6;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(7) {
  grid-row: 7;
}

.info-hbg .ih-table :is(.ih-table__labels, .ih-table__hagobogo, .ih-table__hospital) > :nth-child(8) {
  grid-row: 8;
}

.info-hbg .ih-table__head,
.info-hbg .ih-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: var(--ih-table-row);
  height: 100%;
  padding: clamp(6px, 1.7vw, 22px);
  font-family: var(--font-pretendard);
  font-size: clamp(12px, 3.9vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.info-hbg .ih-table__head {
  background: transparent;
}

.info-hbg .ih-table__labels .ih-table__cell {
  opacity: 0.75;
}

.info-hbg .ih-table__labels .ih-table__cell.is-striped,
.info-hbg .ih-table__hospital .ih-table__cell.is-striped {
  background: var(--ih-row-tint);
}

.info-hbg .ih-table__hagobogo .ih-table__head,
.info-hbg .ih-table__hagobogo .ih-table__cell {
  color: var(--surface-dark-blue-3);
  background: var(--surface-white);
}

.info-hbg .ih-table__hagobogo .ih-table__head {
  border-radius: 36px 36px 0 0;
}

.info-hbg .ih-table__hagobogo .ih-table__cell.is-striped {
  background: var(--ih-bg-soft);
}

.info-hbg .ih-table__hospital .ih-table__head,
.info-hbg .ih-table__hospital .ih-table__cell {
  opacity: 0.75;
}

.info-hbg .ih-table__hospital > :last-child {
  border-radius: 0 0 48px 0;
}

.info-hbg .ih-table__space {
  grid-column: 2;
  grid-row: 9;
  position: relative;
  z-index: 1;
  height: clamp(24px, 4.7vw, 60px);
  border-radius: 0 0 36px 36px;
  background: var(--surface-white);
}

.info-hbg .ih-lens,
.info-hbg .ih-clarity,
.info-hbg .ih-macro,
.info-hbg .ih-zoom,
.info-hbg .ih-app {
  padding: var(--ih-section-pad) 0;
  background: var(--surface-white);
}

.info-hbg .ih-lens__inner,
.info-hbg .ih-clarity__inner,
.info-hbg .ih-macro__inner,
.info-hbg .ih-zoom__inner,
.info-hbg .ih-app__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6.25vw, 80px);
}

.info-hbg .ih-lens__desc {
  width: min(1120px, 100%);
  text-align: center;
}

.info-hbg .ih-lens__desc-strong {
  width: 100%;
  padding: clamp(14px, 2.2vw, 28px) clamp(18px, 3vw, 38px);
  border-radius: clamp(12px, 1.6vw, 20px);
  background: var(--surface-primary);
  font-family: var(--font-pretendard);
  font-size: var(--ih-title-03);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-white);
}

.info-hbg .ih-lens__desc-normal {
  margin-top: clamp(18px, 2.5vw, 32px);
  font-family: var(--font-pretendard);
  font-size: var(--ih-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
}

.info-hbg .ih-lens__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  width: min(860px, 100%);
}

.info-hbg .ih-lens__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 18px);
  color: var(--surface-dark-blue-3);
}

.info-hbg .ih-lens__num {
  font-family: var(--font-barlow);
  font-size: var(--ih-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.info-hbg .ih-lens__unit {
  font-family: var(--font-pretendard);
  font-size: var(--ih-title-03);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.info-hbg .ih-lens__divider {
  width: 1px;
  height: clamp(100px, 18vw, 230px);
  background: linear-gradient(180deg, rgba(121, 170, 179, 0), rgba(121, 170, 179, 0.9), rgba(121, 170, 179, 0));
}

.info-hbg .ih-lens__img {
  width: min(1160px, 100%);
  aspect-ratio: 1160 / 1173;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ih-lens-bg);
}

.info-hbg .ih-lens__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.info-hbg .ih-clarity__pair,
.info-hbg .ih-app__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: var(--container-max);
  gap: 0;
}

.info-hbg .ih-compare-card {
  min-width: 0;
  background: var(--surface-white);
}

.info-hbg .ih-compare-card img,
.info-hbg .ih-compare-card video {
  display: block;
  width: 100%;
}

.info-hbg .ih-clarity .ih-compare-card img,
.info-hbg .ih-clarity .ih-compare-card video,
.info-hbg .ih-app__pair .ih-compare-card video {
  aspect-ratio: 1280 / 1417;
  object-fit: cover;
  outline: 1px solid #ffffff;
  outline-offset: -1px;
}

.info-hbg .ih-compare-card figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(54px, 8vw, 104px);
  padding: clamp(8px, 2vw, 24px);
  background: var(--surface-white);
  font-family: var(--font-pretendard);
  font-size: var(--ih-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
  text-align: center;
}

.info-hbg .ih-macro__img,
.info-hbg .ih-zoom__img {
  width: min(1190px, 92%);
  height: auto;
  display: block;
}

.info-hbg .ih-app__mockup {
  width: min(1234px, 96%);
}

.info-hbg .ih-app__compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  width: 100%;
  margin-top: clamp(40px, 6.25vw, 80px);
}

.info-hbg .ih-app__compare-desc {
  font-family: var(--font-pretendard);
  font-size: var(--ih-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--surface-dark-blue-3);
  text-align: center;
}

.info-hbg .ih-compare-card--app figcaption {
  min-height: clamp(54px, 7.5vw, 96px);
  font-size: clamp(24px, 5.2vw, 66px);
}

@media (max-width: 768px) {
  .info-hbg .ih-intro__logo {
    width: min(420px, 80%);
  }

  .info-hbg .ih-intro__product {
    width: 100%;
  }

  .info-hbg .ih-intro__slats {
    grid-template-columns: 1fr;
  }

  .info-hbg .ih-slat {
    min-height: 150px;
  }

  .info-hbg .ih-table {
    --ih-table-row: clamp(50px, 14vw, 76px);
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .info-hbg .ih-table__head,
  .info-hbg .ih-table__cell {
    padding: 5px;
    font-size: clamp(10px, 3.4vw, 22px);
    line-height: 1.15;
  }

  .info-hbg .ih-table::before {
    border-radius: 20px;
  }

  .info-hbg .ih-table__hagobogo .ih-table__head {
    border-radius: 20px 20px 0 0;
  }

  .info-hbg .ih-table__hospital > :last-child {
    border-radius: 0 0 24px 0;
  }

  .info-hbg .ih-lens__stats {
    width: 100%;
  }

  .info-hbg .ih-lens__stat {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}