/* Shared typography for the related-treatment navigation on detail-v2 pages. */
html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > strong {
  font-family: "SUIT", "Pretendard", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.035em !important;
}

html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div > a {
  font-family: "SUIT", "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.025em !important;
}

html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div > a > span {
  font-size: 16px !important;
  line-height: 1 !important;
}

/* The card itself is the interaction cue. Removing the outbound-arrow glyph
   keeps compact Korean labels clean and avoids an ambiguous overlap. */
html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading) > a > span {
  display: none !important;
}

/* Related programs: fill the row according to the actual number of links. */
html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

html[data-abelle-site="true"] .ab-detail__related-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.ab-related-heading,
.ab-detail__related-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

html[data-abelle-site="true"] .ab-related-heading {
  margin-bottom: 18px !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-abelle-site="true"] .ab-related-heading > strong {
  margin: 0 !important;
}

html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading):not([data-ab-related-track]) > a {
  min-height: 60px !important;
  padding: 0 20px !important;
}

[data-ab-related-swipe] {
  display: none !important;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

[data-ab-related-swipe][hidden] { display: none !important; }

.ab-detail__related-head h3 { margin-bottom: 22px; }

/* Detail hero hierarchy: Korean title first, English eyebrow subdued. */
html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container p.point-font.font-30 {
  order: 1 !important;
  margin: 0 0 18px !important;
  color: rgba(255, 255, 255, 0.46) !important;
  font-family: "SUIT", "Pretendard", sans-serif !important;
  font-size: clamp(22px, 2.15vw, 32px) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.015em !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container > h1.font-60.bold700 {
  order: 2 !important;
  max-width: 1040px !important;
  padding: 0 0 30px !important;
  color: #fff !important;
  font-family: "SUIT", "Pretendard", sans-serif !important;
  font-size: clamp(52px, 5vw, 76px) !important;
  font-weight: 750 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.06em !important;
  word-break: keep-all !important;
}

html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container > p.font-20:not(.point-font) {
  order: 3 !important;
  max-width: 820px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: "SUIT", "Pretendard", sans-serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.035em !important;
}

/* Keep mobile detail heroes fully covered by their mobile image. */
@media (max-width: 767px) {
  /* Mammotome and anti-aging cards have a one-line label. Keep it centered
     in the full mobile tap target instead of reserving unused arrow space. */
  html[data-abelle-site="true"] :is(.ab-mtv2-related,.ab-aiv2-related,.ab-asv2-related,.ab-amv2-related,.ab-stv2-related) a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 16px !important;
    text-align: center !important;
  }

  [data-ab-related-swipe] { display: flex !important; }

  .ab-related-heading { margin-bottom: 24px; }

  .ab-related-heading > strong,
  .ab-detail__related-head h3 { margin-bottom: 0 !important; }

  html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading),
  html[data-abelle-site="true"] .ab-detail__related-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 0 18px 8px 0 !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading)::-webkit-scrollbar,
  html[data-abelle-site="true"] .ab-detail__related-list::-webkit-scrollbar {
    display: none;
  }

  html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not([data-ab-related-track]) > a,
  html[data-abelle-site="true"] .ab-detail__related-list > li {
    display: block !important;
    flex: 0 0 clamp(148px, 43vw, 178px) !important;
    scroll-snap-align: start;
  }

  /* Keep the label centered while reserving a fixed, separate space for
     the outbound arrow. Long Korean labels must not run into the arrow. */
  html[data-abelle-site="true"] main[class^="ab-"] nav[class^="ab-"][class*="-related"] > div > div:not(.ab-related-heading):not([data-ab-related-track]) > a {
    position: relative;
    display: grid !important;
    place-items: center;
    padding-inline: 0 !important;
    text-align: center;
  }

  /* Related-treatment cards show two complete cards at once. The edge
     controls already communicate that another card follows, so a clipped
     third card is not needed and makes the box line look broken. */
  html[data-abelle-site="true"] main[class^="ab-"] nav[class*="-related"] [data-ab-related-track] {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    scroll-padding-inline: 0;
  }

  html[data-abelle-site="true"] main[class^="ab-"] nav[class*="-related"] [data-ab-related-track] > a {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 64px;
    flex-basis: calc((100% - 10px) / 2) !important;
    min-width: 0;
    padding-inline: 12px !important;
    border: 0 !important;
    border-radius: 4px;
    background: #f2f5f6 !important;
    text-align: center;
  }

  html[data-abelle-site="true"] .ab-detail__related-list > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding-inline: 34px !important;
    text-align: center;
  }

  html[data-abelle-site="true"] .ab-detail__related-list > li > a::after {
    position: absolute;
    right: 16px;
  }

  html[data-abelle-site="true"] main[class^="ab-"] nav[class*="-related"] [data-ab-related-swipe].ab-mobile-swipe-controls {
    right: 4px !important;
    left: 4px !important;
  }

  [data-ab-related-swipe] button {
    display: grid;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 1px solid rgba(91, 83, 76, .28);
    border-radius: 50%;
    background: #fff;
    color: #615b56;
    font: 400 18px/1 "SUIT", "Pretendard", sans-serif;
    cursor: pointer;
    place-items: center;
  }

  [data-ab-related-swipe] button:disabled {
    opacity: .3;
    cursor: default;
  }

  html[data-abelle-site="true"].ab-mobile-progressive-ready .ab-detail .ab-detail__related-list > li.ab-detail__mobile-fold-item.is-mobile-folded[data-ab-mobile-extra] {
    display: block !important;
  }

  html[data-abelle-site="true"].ab-mobile-progressive-ready .ab-detail .ab-detail__related .ab-detail__mobile-more {
    display: none !important;
  }

  html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container p.point-font.font-30 {
    margin-bottom: 14px !important;
    color: rgba(255, 255, 255, 0.48) !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container > h1.font-60.bold700 {
    max-width: 100% !important;
    padding-bottom: 24px !important;
    font-size: clamp(36px, 10vw, 44px) !important;
    line-height: 1.12 !important;
  }

  html[data-abelle-site="true"][data-ab-page-type="procedure"] body #subtitle > .container > p.font-20:not(.point-font) {
    max-width: 340px !important;
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }

  html[data-abelle-site="true"]:not([data-ab-page-type="home"]) #subtitle .subtitle_bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
  }

  html[data-abelle-site="true"]:not([data-ab-page-type="home"]) #subtitle .subtitle_bg img.mo {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Shared mobile carousel controls: visible edge buttons replace passive ‹ › copy. */
@media (max-width: 767px) {
  .ab-mobile-swipe-root {
    position: relative !important;
  }

  .ab-mobile-swipe-controls,
  [data-ab-related-swipe].ab-mobile-swipe-controls {
    position: absolute !important;
    top: var(--ab-mobile-swipe-y, 50%) !important;
    right: -13px !important;
    left: -13px !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    margin: 0 !important;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .ab-mobile-swipe-controls[hidden] {
    display: none !important;
  }

  .ab-mobile-swipe-controls button,
  [data-ab-related-swipe].ab-mobile-swipe-controls button {
    display: grid !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border: 1px solid rgba(82, 86, 89, .2) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 3px 12px rgba(31, 38, 42, .14) !important;
    color: #46555d !important;
    font: 500 24px/1 "SUIT", "Pretendard", sans-serif !important;
    cursor: pointer;
    pointer-events: auto;
    place-items: center;
  }

  .ab-mobile-swipe-controls button:disabled,
  [data-ab-related-swipe].ab-mobile-swipe-controls button:disabled {
    opacity: .3 !important;
    cursor: default;
  }

  .ab-eyev3__comparison > header::after,
  .ab-eyev3__method > header::after,
  .ab-ndv3-assessment .ab-ndv3-heading::after,
  .ab-ndv3-types .ab-ndv3-heading::after,
  .ab-ndv3-methods .ab-ndv3-heading::after,
  .ab-ndv3-recovery .ab-ndv3-heading::after,
  .ab-ndv3-concept .ab-ndv3-heading::after,
  .ab-ndv3-guide .ab-ndv3-heading::after,
  .ab-phv3-types .ab-phv3-heading::after,
  .ab-phv3-daily .ab-phv3-heading::after {
    content: none !important;
  }
}
@media(max-width:767px){
  .ab-detail--route-surgery-eye-correction,
  .ab-detail--route-surgery-canthoplasty,
  .ab-spv2--lower-eye{overflow:hidden!important}
}