/* =====================================================================================================
   Contact CTA — shared component
   =====================================================================================================
   Measured from Figma node 469:20592 (the button that used to read
   "B2B서비스 로그인"; CEO item 5 relabels it to 문의하기 / Contact Us).

   Spec: padding 18/24, gap 16, radius 4, background #000, label
   NEXON Lv1 Gothic Regular 20px / line-height 1.5 in white, and a 30x30
   exported icon asset. Height therefore resolves to 18 + 30 + 18 = 66px.

   There is deliberately NO separate mobile size: the desktop frame
   (1719:19907) and the mobile frame (469:19701) both render this button at
   66px tall, so it is one shared component rather than two responsive
   variants. Korean and English come from the label span's data-lang
   attributes — which must stay on the SPAN, never on the <a>, because
   qr_language.js switches copy with node.textContent and would otherwise
   delete the icon.

   Lives here rather than in a page stylesheet because it is used on both
   QR_Plan and B2B. Link it before the page's own stylesheet.
   ===================================================================================================== */

@font-face {
  font-family: 'NEXON Lv1 Gothic OTF';
  src: url('../fonts/NEXON_Lv1_Gothic/NEXON Lv1 Gothic_OTF_TTF/OTF/NEXON Lv1 Gothic OTF.otf')
    format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  padding: 18px 24px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
}

.contact-cta-label {
  font-family: 'NEXON Lv1 Gothic OTF', 'NanumSquare', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

/* Fixed, not relative: the asset is a fixed-size leaf and must keep its
   designed 30x30 box. The white circle and the black arrow are both inside
   this one file — it is not a CSS circle with an icon in it. */
.contact-cta-icon {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
}

.contact-cta:hover {
  background: #1c1c1c;
}

.contact-cta:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* =====================================================================================================
   B2B hero placement
   =====================================================================================================
   The hero is a single flat image whose lower third is empty background, and
   the copy it ends with ("지금 문의주세요!" / "Contact us now!") leads straight
   into this button. So the button is positioned over that empty area rather
   than after the image in flow.

   `top` is a percentage so it tracks the image as it scales — the image is
   width-responsive with a fixed aspect ratio per variant, so a percentage
   stays put where a fixed pixel offset would drift. 74% clears the last line
   of text in all four variants: the copy ends at 65.5% (desktop KO), 65.4%
   (desktop EN), 65.9% (mobile KO) and 68.1% (mobile EN) of image height, the
   EN mobile image being taller because its copy wraps to more lines. */
.section_1 {
  position: relative;
}

.section_1 .contact-cta {
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 549px) {
  .section_1 .contact-cta {
    top: 74%;
  }
}