/* Skin-clinic hero identity: bright clinical imagery without warm brown cast. */
:is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle {
  background:#edf3f3!important;
}

/* The legacy shared palette brightens procedure heroes. Preserve the
   skin-booster portrait's native highlights and texture instead. */
html[data-abelle-site=true].ab-sbv2-active #subtitle .subtitle_bg img {
  filter:none!important;
}

/* The pigment-laser portrait already has sufficient natural highlights.
   Avoid the shared procedure filter washing out skin texture. */
html[data-abelle-site=true]:is(
  .ab-scv3-tone-whitening,
  .ab-scv3-tone-acne,
  .ab-scv3-tone-hair-removal
) #subtitle .subtitle_bg img {
  filter:none!important;
}

:is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle:after {
  background:
    linear-gradient(180deg,rgba(22,34,39,.32) 0,rgba(22,34,39,.07) 16%,rgba(22,34,39,0) 30%),
    linear-gradient(90deg,rgba(229,239,239,.88) 0,rgba(229,239,239,.68) 34%,rgba(229,239,239,.10) 66%,rgba(229,239,239,0) 100%)!important;
}

@media (min-width:768px) {
  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container {
    left:max(48px,calc((100vw - 1320px)/2))!important;
    width:min(43vw,570px)!important;
    align-items:flex-start!important;
    padding:0!important;
    text-align:left!important;
    transform:translateY(-50%)!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container>* {
    max-width:100%!important;
    text-align:left!important;
  }
}

:is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container,
:is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container * {
  color:#17282f!important;
  -webkit-text-fill-color:#17282f!important;
  text-shadow:none!important;
}

:is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container:after {
  border-color:rgba(23,40,47,.78)!important;
}

:is(html.ab-sbv2-active,html.ab-scv3-active) #subtitle .ab-hero-disclaimer {
  color:rgba(23,40,47,.68)!important;
  text-shadow:none!important;
}

/* Keep the staged-image notice quiet but crisp on the selected skin heroes.
   Integer font sizes and neutral tracking prevent small Korean text smearing. */
html:is(
  .ab-sbv2-active,
  .ab-scv3-tone-whitening,
  .ab-scv3-tone-acne,
  .ab-scv3-tone-hair-removal
) body #subtitle .subtitle_bg > p.ab-hero-disclaimer {
  left:max(24px,calc((100vw - 1320px)/2))!important;
  bottom:16px!important;
  color:rgba(23,40,47,.76)!important;
  font:500 12px/1.35 "Pretendard","Noto Sans KR",sans-serif!important;
  letter-spacing:0!important;
  text-shadow:0 1px 1px rgba(255,255,255,.5)!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}

@media (max-width:767px) {
  html:is(
    .ab-sbv2-active,
    .ab-scv3-tone-whitening,
    .ab-scv3-tone-acne,
    .ab-scv3-tone-hair-removal
  ) body #subtitle .subtitle_bg > p.ab-hero-disclaimer {
    left:16px!important;
    bottom:14px!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle:after {
    background:linear-gradient(180deg,rgba(20,34,40,.34) 0,rgba(20,34,40,.03) 18%,rgba(236,244,244,.12) 54%,rgba(236,244,244,.34) 100%)!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container {
    top:34%!important;
    left:22px!important;
    width:calc(100% - 44px)!important;
    align-items:flex-start!important;
    padding:0!important;
    text-align:left!important;
    transform:translateY(-50%)!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container>* {
    max-width:min(78vw,300px)!important;
    text-align:left!important;
  }

  :is(
    html[data-abelle-site="true"][data-ab-page-type="procedure"].ab-sbv2-active,
    html[data-abelle-site="true"][data-ab-page-type="procedure"].ab-scv3-active,
    html[data-abelle-site="true"][data-ab-page-type="procedure"].ab-slh2-active
  ) body #subtitle>.container>p.font-20:not(.point-font) {
    max-width:205px!important;
    font-size:14px!important;
    line-height:1.65!important;
    word-break:keep-all!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle>.container:after {
    align-self:flex-start!important;
    margin-top:28px!important;
    margin-left:8px!important;
  }

  :is(html.ab-sbv2-active,html.ab-scv3-active,html.ab-slh2-active) #subtitle .subtitle_bg img.mo {
    object-position:center center!important;
  }
}