/* /branding/ — Figma 1920 랜딩 (Pretendard, b26) */

.b26 {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #222222;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.b26 *,
.b26 *::before,
.b26 *::after {
  box-sizing: border-box;
}

.b26 img {
  height: auto;
  display: block;
}

.b26-br-mobile {
  display: none;
}

@media (max-width: 767px) {
  .b26-br-mobile {
    display: block;
  }
}

.b26-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* —— header full-bleed: Figma 1920 기준 좌우 320px 패딩 ——
   Sticky with negative top equal to the topbar's height so the promo
   bar scrolls away while the navigation row stays pinned at the top. */
.b26-head {
  position: sticky;
  top: -48px;
  z-index: 900;
  background: #ffffff;
}

@media (max-width: 1023px) {
  .b26-head {
    top: 0;
  }
}

.b26-head .b26-inner {
  max-width: none;
  padding-left: clamp(20px, calc((100vw - 1280px) / 2), 320px);
  padding-right: clamp(20px, calc((100vw - 1280px) / 2), 320px);
}

/* —— top promo —— */
.b26-topbar {
  background: #fff9cf;
  height: 48px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;

}

.b26-topbar__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #222222;
}

.b26-topbar__text strong {
  font-weight: 700;
}

/* 개인정보 유출 안내 띠(임시). 내릴 때 nav.html 블록과 함께 지운다. */
.b26-topbar--notice {
  background: #222222;
}

.b26-topbar--notice .b26-topbar__text {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
}

.b26-topbar--notice .b26-topbar__more {
  margin-left: 12px;
  font-weight: 400;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* —— nav —— */
.b26-navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.b26-navrow.is-scrolled {
  border-bottom-color: #EEEEEE;
}

.b26-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.b26-logo img {
  width: 59px;
  height: auto;
}

.b26-gnb {
  margin-left: 68px;
}

@media (max-width: 1279px) {
  .b26-gnb {
    margin-left: clamp(0px, 18vw, 230px);
  }
}

.b26-gnb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.b26-gnb__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #666666;
  text-decoration: none;
}

.b26-gnb__link--on {
  color: #222222;
}

.b26-gnb__link:hover {
  color: #222222;
}

.b26-navactions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.b26-lang {
  display: flex;
  align-items: center;
  gap: 0;
}

.b26-lang__link {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #666666;
  text-decoration: none;
}

.b26-lang__link--on {
  font-weight: 600;
  color: #222222;
}

.b26-lang__bar {
  width: 1px;
  height: 12px;
  background: #666666;
}

.b26-cta {
  height: 44px;
  padding: 8px 20px;
  border: none;
  border-radius: 12px;
  background: #222222;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.b26-cta:hover {
  opacity: 0.92;
}

.b26-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
}

.b26-menu-btn img {
  width: 24px;
  height: 24px;
}

.b26-menu-btn span {
  width: 12px;
  height: 1.5px;
  background: #222;
  border-radius: 1px;
}

.b26-cta__label-mobile {
  display: none;
}

.b26-mnav {
  display: none;
}

body.b26-menu-open .b26-float-dock,
body.b26-menu-open .b26-sticky-cta,
body.b26-menu-open .b27-float-cta {
  display: none !important;
}

/* —— hero (Figma: #101119, radius 20, img 861×575 @ top -59, opacity .22, 카피 top 120/170) —— */
.b26-hero-wrap {
  padding: 0cqb 20px 0;
  max-width: 1920px;
  margin: 0 auto;
  background: #fff;
}

.b26-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 457px;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #101119;
}

.b26-hero__bgimg {
  position: absolute;
  left: 50%;
  top: -59px;
  z-index: 0;
  width: 861px;
  max-width: min(861px, 115%);
  height: auto;
  aspect-ratio: 861 / 575;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
  opacity: 0.22;
  pointer-events: none;
}

.b26-hero__copy {
  position: absolute;
  left: 50%;
  top: 120px;
  z-index: 1;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 720px;
  padding: 0 24px;
  box-sizing: border-box;
}

.b26-hero__eyebrow {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  color: #ffffff;
  opacity: 0.8;
}

.b26-hero__title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  color: #ffffff;
}

@media (max-width: 900px) {
  .b26-hero {
    min-height: clamp(380px, 85vw, 457px);
  }

  .b26-hero__bgimg {
    width: min(861px, 130%);
    height: auto;
    aspect-ratio: 861 / 575;
    top: clamp(-36px, -8vw, -59px);
  }

  .b26-hero__copy {
    top: clamp(72px, 14vw, 120px);
  }

  .b26-hero__eyebrow {
    font-size: clamp(16px, 3.2vw, 24px);
    line-height: 1.25;
  }

  .b26-hero__title {
    font-size: clamp(22px, 5.2vw, 40px);
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .b26-hero {
    border-radius: 16px;
    min-height: 320px;
  }
}

/* —— type —— */
.b26-section {
  padding-bottom: 54px;
  background: #fff;
}

.b26-kicker {
  margin: 0 0 0px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #666666;
}

.b26-h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1px;
  color: #222222;
}

.b26-h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #222222;
}

.b26-text-center {
  text-align: center;
}

.b26-lead {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #3a3a3a;
}

.b26-br-lg {
  display: none;
}

.b26-br-sm {
  display: inline;
}

/* content variants (desktop/mobile) */
.b26-only-desktop {
  display: none;
}
.b26-only-mobile {
  display: block;
}

@media (min-width: 960px) {
  .b26-br-lg {
    display: inline;
  }

  .b26-br-sm {
    display: none;
  }

  .b26-only-desktop {
    display: block;
  }
  .b26-only-mobile {
    display: none;
  }
}

.b26-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #3a3a3a;
}

.b26-body strong {
  font-weight: 700;
}

/* —— standard (Figma: 흰 배경 · 카피 + #F5F5F5 패널 · 통계 행) —— */
.b26-standard {
  background: #ffffff;
  overflow-x: visible;
}

/* Figma 1920px 기준: 좌우 320px 여백, 콘텐츠 폭 1280px.
   좁아지면 (100vw - 1280) / 2 로 자연 축소되고 최소 20px 유지. */
.b26-standard .b26-inner {
  --b26-side: clamp(20px, calc((100vw - 1280px) / 2), 320px);
  max-width: none;
  padding-left: var(--b26-side);
  padding-right: var(--b26-side);
}

.b26-standard__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}

/* Our Standard / 제목 / 인용 — Figma 타이포 */
.b26-standard .b26-kicker {
  margin: 0;
  color: #666666;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-standard .b26-h2 {
  margin: 0;
  color: #222222;
  font-family: inherit;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-standard__grid {
  display: grid;
  gap: 32px;
  align-items: start;
  /* Figma 1920px 기준 히어로와의 간격 201px. 좁아지면 vw 비율로 축소. */
  padding-top: clamp(60px, 10.5vw, 201px);
  padding-bottom: 0;
}

@media (min-width: 960px) {
  .b26-standard__grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
}

@media (max-width: 959px) {
  .b26-standard .b26-h2 {
    font-size: clamp(26px, 6.5vw, 40px);
    line-height: clamp(32px, 8vw, 50px);
  }
}

.b26-standard__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b26-standard__quote p {
  margin: 0;
  color: #3a3a3a;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-standard__by {
  margin: 0;
  color: #3a3a3a;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.5px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 회색 패널: Figma와 동일 — 내부 div 100%×100% #F5F5F5, 좌측 라운드 20 · 이미지 517×383 absolute left 29 top -64 */
.b26-standard__media {
  position: relative;
  width: 100%;
  max-width: 910px;
  justify-self: end;
  margin-right: 0;
  margin-top: -37px;
  box-sizing: border-box;
}

/* 데스크톱: 패널을 뷰포트 우측 끝까지 풀블리드 — inner의 우측 padding(--b26-side)만큼 박스를 확장.
   음수 margin-right로 오른쪽 edge를 viewport 0에 맞춰 배경도 함께 확장됨. */
@media (min-width: 960px) {
  .b26-standard__media {
    max-width: none;
    width: calc(100% + var(--b26-side));
    margin-right: calc(-1 * var(--b26-side));
  }
}

.b26-standard__mediabox {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f5f5f5;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  height: 319px;
}

.b26-standard__mediabox img {
  position: absolute;
  left: 29px;
  top: -64px;
  width: 517px;
  max-width: min(517px, calc(100% - 58px));
  height: auto;
  aspect-ratio: 517 / 383;
  object-fit: contain;
}

.b26-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  /* Figma: 김동훈 대표 사진 bottom 과 stats top 사이 142px */
  padding: 142px 0 48px;
}

.b26-stats__item {
  flex: 1 1 140px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: 0px 12px;
  text-align: center;
}

/* 통계 숫자 / + · st / 설명 — Figma 타이포 */
.b26-stats__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1px;
  color: #222222;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-stats__plus,
.b26-stats__st {
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  line-height: 35px;
  color: #222222;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-stats__desc {
  margin: 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #666666;
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b26-stats__rule {
  width: 1px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 119px;
  height: 119px;
  margin: auto 0;
  background: #e3e3e3;
}

@media (max-width: 720px) {
  .b26-stats__rule {
    display: none;
  }

  .b26-standard__media {
    justify-self: stretch;
    height: auto;
    min-height: 280px;
    padding-top: 48px;
  }

  .b26-standard__mediabox {
    min-height: 240px;
    height: 240px;
    border-radius: 20px 20px 0 0;
  }

  .b26-standard__mediabox img {
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    max-width: min(517px, calc(100% - 48px));
  }

  .b26-standard__grid {
    padding-top: 32px;
    padding-bottom: 24px;
  }
}

/* —— develop —— */
.b26-develop__head {
  text-align: center;
  padding: 146px 0 0px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* flex gap(16)과 .b26-kicker 기본 margin-bottom(16)이 합쳐지는 문제 제거 */
.b26-develop__head .b26-kicker {
  margin: 0;
}

.b26-develop__head .b26-h2 {
  max-width: 900px;
}

.b26-develop__head .b26-lead {
  max-width: 900px;
}

.b26-timeline {
  position: relative;
  padding: 76px 0 48px;
}

.b26-timeline__line {
  position: absolute;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  /* 카드 상단(=padding-top 80) + 카드 내 원 중심 243 = 323 */
  top: 319px;
  height: 1px;
  background: #cccccc;
  display: none;
}

@media (min-width: 960px) {
  .b26-timeline__line {
    display: block;
  }
}

.b26-devcards {
  display: grid;
  gap: 48px;
  position: relative;
  z-index: 1;
}

@media (min-width: 960px) {
  .b26-devcards {
    grid-template-columns: repeat(3, minmax(0, 260px));
    justify-content: center;
    gap: clamp(40px, 14vw, 180px);
    align-items: start;
  }
}

/* 960~1199px 에서는 위 gap(14vw)이 커서 3열 총폭이 뷰포트를 넘고 가로 스크롤이
   생긴다(카드 260*3 + gap*2). 사용 가능한 폭에서 역산한 값으로 제한한다.
   1200px 이상은 위 규칙 그대로라 데스크톱 레이아웃은 바뀌지 않는다. */
@media (min-width: 960px) and (max-width: 1199px) {
  .b26-devcards {
    gap: clamp(20px, calc((100vw - 840px) / 2), 180px);
  }
}

.b26-devcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* 원 중심을 수평선에 정확히 맞추기 위해 카드 내부 gap 제거 */
  max-width: 260px;
  margin: 0 auto;
}

/* 이미지 + dots 묶음 블록 — 이미지와 SVG 붙임 */
.b26-devcard__imgblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* imgbottom(카드 2)만 1px 위로 올려 라인 정렬 */
.b26-devcard--imgbottom .b26-devcard__imgblock {
  transform: translateY(2px);
}

/* 제목 + 설명 묶음 블록 — 두 카드 타입의 원 중심이 같은 y(=243)에 오도록 min-height 231 고정 */
/*   imgtop 원 중심 y = image(208) + SVG flip 후 원 오프셋(35) = 243                           */
/*   imgbottom 원 중심 y = text(231) + SVG 원 오프셋(12) = 243                                 */
.b26-devcard__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  min-height: 231px;
  justify-content: flex-start;
}

/* imgbottom: 텍스트가 원 바로 위에 오도록 텍스트 블록 내부에서 끝 정렬 */
.b26-devcard--imgbottom .b26-devcard__text {
  justify-content: flex-end;
  padding-top: 6px;
}

.b26-devcard__imgwrap {
  width: 208px;
  height: 208px;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f5;
}

.b26-devcard__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 24 × 47 점 마커 — doytPoint.svg (원 위 24px + 점선 아래 29px) */
/* imgbottom(카드 2): SVG를 상하 반전 — 점선이 텍스트 쪽(위), 원이 이미지 쪽(아래) */
/* imgtop(카드 1,3): 원본 — 원이 이미지 쪽(위), 점선이 텍스트 쪽(아래) */
.b26-devcard__dots {
  width: 24px;
  height: 47px;
  background: url("/static/css/doytPoint.svg") no-repeat center / 24px 47px;
  flex-shrink: 0;
  transform: scaleY(-1);
}

.b26-devcard__dots span {
  display: none;
}

.b26-devcard--imgtop .b26-devcard__dots {
  transform: none;
}

.b26-devcard__title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #222222;
  margin-top: 25px;
}

.b26-devcard__desc {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.45px;
  width: 200px;
  white-space: nowrap;
  color: #3a3a3a;
}

.b26-devcard--imgbottom .b26-devcard__desc {
  width: 250px;
}

.b26-devcards .b26-devcard:nth-child(3) .b26-devcard__desc {
  width: 250px;
}

/* 2번째 카드(imgbottom, POS)만 설명 아래 25px 추가 여백 */
.b26-devcard--imgbottom .b26-devcard__desc {
  margin-bottom: 23px;
}

/* —— rental —— */
/* Figma: rental 컨텐츠는 1280px 컨테이너 안에서 중앙 정렬 */
.b26-rental .b26-inner {
  max-width: 1280px;
}

.b26-rental__head {
  text-align: center;
  padding: 124px 0 58px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.b26-rental__head .b26-lead {
  max-width: 720px;
}

.b26-rental__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 24px 0 8px;
  padding-left: clamp(0px, 4vw, 84px);
}

/* 두 번째 행: 카피(왼쪽) → 이미지(오른쪽), PDF/피그마와 동일 */
.b26-rental__row--second {
  flex-direction: row;
  padding-left: 0;
  padding-right: clamp(0px, 4vw, 84px);
}

.b26-rental__media {
  flex: 1 1 208px;
  max-width: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: #f5f5f5;
  min-height: 200px;
}

@media (min-width: 960px) {
  .b26-rental__media {
    flex: 0 0 480px;
    height: 322px;
    min-height: 322px;
  }
}

.b26-rental__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b26-rental__text {
  flex: 1 1 280px;
  max-width: 688px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.b26-rental__text--right {
  align-items: flex-end;
  text-align: right;
}

/* 아이콘 + 제목 묶음 (Figma: gap 8) */
.b26-rental__titlegroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.b26-rental__text--right .b26-rental__titlegroup {
  align-items: flex-end;
}

.b26-rental__icon {
  width: 37px;
  height: 36px;
  display: block;
}

.b26-rental__logo {
  width: 86px;
  height: 36px;
  display: block;
}

/* Figma: H5 — 24/Bold 1.25 -0.6 */
.b26-rental__text .b26-h3 {
  margin: 0;
  letter-spacing: -0.6px;
}

/* Figma: Title/XS — 18/Regular 1.4 -0.45 */
.b26-rental__text .b26-body {
  margin: 0;
  letter-spacing: -0.45px;
}

/* —— service —— */
.b26-service__head {
  text-align: center;
  padding: 142px 0 52px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.b26-service__head .b26-lead {
  max-width: 720px;
}

.b26-service__cards {
  display: grid;
  gap: 24px;
  justify-items: center;
}

.b26-service__indicator {
  display: none;
}

@media (min-width: 1024px) {
  .b26-service__cards {
    grid-template-columns: repeat(2, 408px);
    justify-content: center;
  }
}

.b26-svcard {
  width: 100%;
  max-width: 408px;
  min-height: 438px;
  padding: 56px 24px 32px;
  background: #fff;
  border-radius: 20px;
  text-align: center;
}

.b26-svcard__img {
  width: 208px;
  height: 208px;
  margin: 0 auto 32px;
  border-radius: 16px;
  object-fit: cover;
}

.b26-svcard__phone {
  width: 208px;
  height: 208px;
  margin: 0 auto 32px;
  border-radius: 16px;
  outline: 1px solid #eeeeee;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.b26-svcard__phone img {
  width: 208px;
  height: auto;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
}

.b26-svcard__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #222222;
}

.b26-svcard__desc {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #3a3a3a;
}

/* gradient band (full-width card) */
.b26-service__panel {
  margin: 0 20px;
  padding: 48px 0 100px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 34%);
  overflow: hidden;
}

@media (max-width: 768px) {
  .b26-service__panel {
    margin: 0 16px;
    padding: 32px 0 72px;
    border-radius: 20px;
  }

  .b26-service__head {
    padding: 48px 0 28px;
    gap: 8px;
  }

  .b26-service__head .b26-lead {
    max-width: 328px;
  }

  .b26-service__cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    justify-items: initial;
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
  }

  .b26-service__cards::-webkit-scrollbar {
    display: none;
  }

  .b26-svcard {
    flex: 0 0 278px;
    width: 278px;
    max-width: 278px;
    min-height: 388px;
    padding: 40px 24px 24px;
    border-radius: 20px;
    scroll-snap-align: center;
  }

  .b26-svcard__img,
  .b26-svcard__phone {
    width: 208px;
    height: 208px;
    margin-bottom: 24px;
  }

  .b26-svcard__title {
    font-size: 17px;
    letter-spacing: -0.425px;
    margin-bottom: 6px;
  }

  .b26-svcard__desc {
    font-size: 15px;
    letter-spacing: -0.375px;
  }

  .b26-service__indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }

  .b26-service__dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #cccccc;
    padding: 0;
  }

  .b26-service__dot.is-active {
    background: #666666;
  }
}

/* —— video (Figma: #F5F5F5 풀폭 띠 · 영상 960×540 · 위아래 70) —— */
.b26-video {
  margin: 24px 0 68px;
  padding: 70px var(--b26-side, 20px);
  background: #f5f5f5;
}

/* FAQ 가 빠진 뒤 로고 띠 → 오더패드 간격 (Figma 기준). 해외판은 사이에 FAQ 가 있어 해당 없음 */
@media (min-width: 768px) {
  .b26-marquee + .b26-orderpad {
    margin-top: 140px;
  }
}

.b26-video__frame {
  position: relative;
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
}

.b26-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .b26-video {
    margin: 0 0 40px;
    padding: 40px 20px;
  }
}

/* —— review —— */
.b26-review {
  --b26-side: clamp(20px, calc((100vw - 1280px) / 2), 320px);
  position: relative;
  padding-bottom: 80px;
  overflow: hidden;
}

.b26-review .b26-inner {
  max-width: none;
  padding-left: var(--b26-side);
  padding-right: var(--b26-side);
}

.b26-review__headwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  padding: 100px 0 24px;
}

.b26-review__head {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 280px;
  max-width: 720px;
}

.b26-review__controls {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-top: auto;
}

@media (max-width: 768px) {
  .b26-review__headwrap {
    padding: 32px 0 16px;
  }

  .b26-review__controls {
    width: 100%;
    justify-content: flex-end;
  }
}

.b26-review__arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #222;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.b26-review__arrow svg {
  display: block;
}

.b26-review__arrow:hover:not(:disabled) {
  background: #f5f5f5;
}

.b26-review__arrow:disabled {
  color: #999;
  cursor: default;
}

.b26-review__page {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #222222;
  min-width: 32px;
  text-align: right;
}

.b26-review__scroller {
  overflow: hidden;
  margin-top: 34px;
}

.b26-review__track {
  display: flex;
  gap: 28px;
  padding: 8px 0 32px;
  padding-left: calc(var(--b26-side) + 205px);
  padding-right: var(--b26-side);
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s ease;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.b26-review__track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.b26-review__track.is-dragging a,
.b26-review__track.is-dragging img {
  pointer-events: none;
}

.b26-rcard {
  position: relative;
  flex: 0 0 340px;
  scroll-snap-align: start;
  padding: 28px;
  background: #f5f5f5;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  box-sizing: border-box;
  min-height: 221px;
}

.b26-rcard__body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.b26-rcard__badge {
  position: absolute;
  left: 28px;
  top: 165px;
  padding: 4px 10px;
  border-radius: 16px;
  background: #ff7863;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.35px;
  line-height: 1.4;
}

.b26-rcard__badge--alt {
  background: #ff6249;
}

.b26-rcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.b26-rcard__id {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.35px;
  color: #666666;
}

.b26-rcard__score {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.4;
  color: #999999;
}

.b26-rcard__star {
  width: 25px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

.b26-rcard__score strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: #ff4c30;
}

.b26-rcard__text {
  align-self: stretch;
  max-width: 284px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #222222;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b26-rcard__idx {
  align-self: stretch;
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.35px;
  color: #999999;
}

.b26-rnaver {
  flex: 0 0 340px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 221px;
  padding: 0 28px;
  border-radius: 20px;
  border: 4px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #38db86 0%, #7b72d1 100%) border-box;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.b26-rnaver__ico {
  width: 64px;
  height: 64px;
  background: url("/static/image/naver.svg") no-repeat center / 64px 64px;
  flex-shrink: 0;
}

.b26-rnaver__txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.b26-rnaver__row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.b26-rnaver__row--more {
  gap: 4px;
}

.b26-rnaver__star {
  width: 25px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

.b26-rnaver__rating {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: #ff4c30;
}

.b26-rnaver__slash {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: #666;
}

.b26-rnaver__cnt {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: #666;
}

.b26-rnaver__more {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #222;
  white-space: nowrap;
}

.b26-rnaver__chev {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .b26-review__track {
    padding-left: var(--b26-side);
    padding-right: var(--b26-side);
    gap: 16px;
  }
  .b26-rcard,
  .b26-rnaver {
    flex: 0 0 calc(100vw - (var(--b26-side) * 2));
    max-width: calc(100vw - (var(--b26-side) * 2));
  }
  .b26-rcard__text {
    max-width: 100%;
  }
}

/* —— upgrade —— */
.b26-upgrade {
  position: relative;
  background: #fff;
}

.b26-upgrade__track {
  position: relative;
  /* 3 slides × 100vh of scroll (plus initial buffer) */
  height: 300vh;
}

.b26-upgrade__sticky {
  position: sticky;
  top: 48px;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.b26-upgrade .b26-inner {
  max-width: 1280px; /* 309 + 127 + 844 — matches Figma content box */
  padding-left: 24px;
  padding-right: 24px;
}

.b26-upgrade__grid {
  display: grid;
  gap: 40px;
  width: 100%;
}

@media (min-width: 1024px) {
  .b26-upgrade__grid {
    grid-template-columns: 309px 1fr;
    align-items: start;
    gap: 127px; /* matches Figma: left col ends at 629, right starts at 756 */
  }
}

.b26-upgrade__copy .b26-kicker {
  margin: 0 0 16px;
}

.b26-upgrade__copy .b26-h2 {
  margin: 0;
}

.b26-upgrade-title__br {
  display: inline;
}

.b26-upgrade__copy .b26-lead {
  margin-top: 16px;
}

.b26-upgrade__mhead {
  display: none;
}

/* stage where city/store text crossfades */
.b26-upgrade__stage {
  position: relative;
  margin-top: 36px;
  min-height: 90px;
}

.b26-upgrade__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.b26-upgrade__slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.b26-upgrade__loc {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 18px;
  color: #222;
  letter-spacing: -0.45px;
  line-height: 1.4;
}

.b26-upgrade__pin {
  width: 24px;
  height: 24px;
  background: url("/static/image/장소filled.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.b26-upgrade__store {
  margin: 8px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.7px;
  color: #222;
}

/* mosaic stage (right column) */
.b26-upgrade__mstage {
  position: relative;
  width: 100%;
  max-width: 844px; /* 408 + 28 + 408 */
  margin-left: auto;
  min-height: 668px; /* 400 + 28 + 240 */
}

.b26-upgrade__mslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.b26-upgrade__mslide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.b26-upgrade__mosaic {
  display: grid;
  grid-template-columns: 408px 408px;
  grid-template-rows: 240px 132px 240px;
  gap: 28px;
  justify-content: end;
  width: 100%;
  height: 100%;
}

.b26-upimg {
  border-radius: 20px;
  overflow: hidden;
  background: #f2f2f2;
}

.b26-upimg--tl { grid-column: 1; grid-row: 1 / span 2; } /* 400h */
.b26-upimg--tr { grid-column: 2; grid-row: 1; }         /* 240h */
.b26-upimg--bl { grid-column: 1; grid-row: 3; }         /* 240h */
.b26-upimg--br { grid-column: 2; grid-row: 2 / span 2; }/* 400h */

.b26-upimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  /* override legacy stacked-mobile rules */
  .b26-upgrade__slide + .b26-upgrade__slide,
  .b26-upgrade__mslide + .b26-upgrade__mslide {
    margin-top: 0;
  }

  .b26-upgrade-title__br {
    display: none;
  }

  .b26-upgrade__track {
    height: auto;
  }
  .b26-upgrade__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .b26-upgrade__stage,
  .b26-upgrade__mstage {
    min-height: 0;
  }
  .b26-upgrade__slide,
  .b26-upgrade__mslide {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* stack slides vertically on mobile */
  .b26-upgrade__slide + .b26-upgrade__slide {
    margin-top: 0cqi;
  }
  .b26-upgrade__mslide + .b26-upgrade__mslide {
    margin-top: 0px;
  }
  .b26-upgrade__mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .b26-upimg--tl,
  .b26-upimg--br {
    grid-row: auto;
  }
  .b26-upimg {
    aspect-ratio: 1 / 1;
  }
}

/* —— marquee —— */
.b26-marquee {
  padding: 48px 0 100px;
  overflow: hidden;
  background: #fff;
}

.b26-marquee__inner {
  display: flex;
  width: max-content;
  animation: b26-marquee 40s linear infinite;
}

.b26-marquee__inner:hover {
  animation-play-state: paused;
}

@keyframes b26-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.b26-marquee__inner img {
  width: auto;
  height: clamp(160px, 22vw, 326px);
  max-width: min(3067px, 95vw);
  flex-shrink: 0;
  object-fit: cover;
}

/* —— faq —— */
.b26-faq .b26-inner {
  max-width: 1200px;
}

.b26-faq__grid {
  display: grid;
  gap: 40px;
  padding: 48px 0 100px;
}

@media (min-width: 960px) {
  .b26-faq__grid {
    grid-template-columns: minmax(0, 1fr) 640px;
    align-items: start;
    column-gap: 120px;
    row-gap: 40px;
    white-space: nowrap;
  }
  .b26-faq__head {
    grid-column: 1;
    grid-row: 1;
  }
  .b26-faq__list {
    padding-top: 44px;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .b26-faq__cats {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }
}

.b26-faq__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.b26-faq__list {
  display: flex;
  flex-direction: column;
}

.b26-faq__item {
  border-bottom: 1px solid #e3e3e3;
}

/* 답변 열림/닫힘: height 트랜지션은 픽셀만 보간 가능 → 실제 높이는 JS가 설정
   닫힌 details는 UA가 summary 외 자식에 display:none → block !important */
.b26-faq__panel {
  display: block !important;
  overflow: hidden;
  box-sizing: border-box;
  transition: height 0.3s ease;
  white-space: normal;
}

.b26-faq__item:not([open]) .b26-faq__panel {
  height: 0;
}

.b26-faq__panel > .b26-faq__a {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .b26-faq__panel {
    transition: none;
  }
}

.b26-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.b26-faq__q::-webkit-details-marker {
  display: none;
}

.b26-faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.b26-faq__item[open] .b26-faq__q {
  color: #ff4c30;
}

.b26-faq__item[open] .b26-faq__q::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.b26-faq__a {
  display: block;
  padding: 0 16px 18px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #222;
}

.b26-faq__a p {
  margin: 0;
}

.b26-faq__a strong {
  font-weight: 700;
}

.b26-faq__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 12px;
  background: #ff4c30;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.45px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.b26-faq__cta:hover,
.b26-faq__cta:focus-visible {
  opacity: 0.9;
  color: #fff;
}

.b26-faq__cats {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #222;
}

.b26-faq__cats p {
  margin: 0;
}

@media (max-width: 959px) {
  .b26-faq__cats {
    display: none;
  }
}

/* —— orderpad —— */
.b26-orderpad {
  padding-bottom: 179px;
}

.b26-orderpad__panel {
  position: relative;
  max-width: 1880px;
  margin: 0 auto;
  border-radius: 20px;
  background: #ffffff;
}

/* 자유롭게 위치/크기 조정할 수 있는 컨트롤 레이어 (필요하면 값만 바꾸세요) */
.b26-orderpad__control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 34%, #F6F6F6 100%);
  border-radius: 20px;
}

.b26-orderpad__head,
.b26-orderpad__visual {
  position: relative;
  z-index: 1;
}

@media (max-width: 1919px) {
  .b26-orderpad__panel {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.b26-orderpad__head {
  text-align: center;
  padding: 100px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.b26-orderpad__head .b26-kicker,
.b26-orderpad__head .b26-h2,
.b26-orderpad__head .b26-lead {
  margin: 0;
}

.b26-orderpad__head .b26-lead {
  max-width: 720px;
}

@media (min-width: 768px) {
  .b26-orderpad__head .b26-lead {
    max-width: none;
    white-space: nowrap;
  }
}

.b26-orderpad__visual {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 583px;
  margin: 0 auto;
  overflow: hidden;
}

.b26-orderpad__device {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  z-index: 1;
}

@media (max-width: 1279px) {
  .b26-orderpad__visual {
    height: clamp(360px, 46vw, 588px);
  }
  .b26-orderpad__device {
    width: clamp(480px, 62vw, 787px);
  }
}

.b26-orderpad__btn {
  position: absolute;
  left: 50%;
  bottom: 0px;
  margin-top: 63px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 25px 32px 25px 44px;
  border-radius: 28px;
  background: #222;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.55px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 0.2s ease;
  z-index: 5;
}

@media (max-width: 767px) {
  .b26-orderpad__chev {
    width: 24px;
    height: 24px;
  }
}

.b26-orderpad__btn:hover,
.b26-orderpad__btn:focus-visible {
  color: #fff;
  opacity: 0.95;
}

.b26-orderpad__chev {
  display: block;
  flex-shrink: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.b26-orderpad__btn--mobile {
  display: none;
}

@media (max-width: 767px) {
  .b26-orderpad__btn--desktop {
    display: none;
  }
  .b26-orderpad__btn--mobile {
    display: inline-flex;
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin: -80px auto 0;
    padding: 14px 12px 14px 20px;
    border-radius: 12px;
    gap: 4px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.425px;
    justify-content: center;
    background: #222;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 767px) {
  .b26-orderpad__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }
  .b26-orderpad__head {
    padding: 80px 16px 0;
    gap: 8px;
  }
  .b26-orderpad__visual {
    height: 444px;
  }
  .b26-orderpad__device {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    max-width: 870px;
    width: 870px;
  }
}
/* —— footer —— */
.b26-footer {
  background: #222222;
  color: #fff;
  padding: 48px 0 136px;
  margin-bottom: -24px;
}

@media (min-width: 1024px) {
  .b26-footer .b26-inner {
    max-width: none;
    padding-left: clamp(20px, calc((100vw - 1280px) / 2), 320px);
    padding-right: clamp(20px, calc((100vw - 1280px) / 2), 320px);
  }
}

.b26-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 32px;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .b26-footer__top {
    flex-wrap: nowrap;
  }
}

.b26-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.b26-footer__links a {
  color: #cccccc;
  text-decoration: none;
  padding: 6px 4px;
}

.b26-footer__links a:hover {
  color: #fff;
}

.b26-footer__sep {
  opacity: 0.3;
  color: #fff;
  user-select: none;
}

.b26-footer__biz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.35px;
  margin-bottom: 0;
}

.b26-footer__biz > span {
  font-weight: 500;
  color: #999;
}

.b26-footer__muted {
  font-weight: 400;
  color: #666666;
}

.b26-footer__copy {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.35px;
  color: #999999;
  opacity: 1;
}

.b26-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.b26-footer__link-label--mobile {
  display: none;
}

.menuit-ai-notice {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.35px;
  margin-top: 32px;
  color: #999999;
}

footer.container .menuit-ai-notice,
.footer-section .menuit-ai-notice {
  margin-top: 12px;
  color: #bababa;
}

.box1000 .menuit-ai-notice,
#wrap .menuit-ai-notice {
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .b26-footer__biz {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .b26-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 48px 0 98px;
    margin-bottom: 0;
  }

  .b26-footer .b26-inner {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-footer__top {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    margin-bottom: 0;
  }

  .b26-footer__links {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
  }

  .b26-footer__links a {
    padding: 6px 4px;
    color: #cccccc;
  }

  .b26-footer__sep {
    display: none;
  }

  .b26-footer__link-label--desktop {
    display: none;
  }

  .b26-footer__link-label--mobile {
    display: inline;
  }

  .b26-footer__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .b26-footer__biz {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin-bottom: 0;
    white-space: normal;
  }

  .b26-footer__biz > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .b26-footer__biz > .b26-footer__muted {
    display: none;
  }

  .b26-footer__copy {
    line-height: 1.25;
    letter-spacing: -0.35px;
    color: #999999;
    opacity: 1;
  }

  .b26-footer .menuit-ai-notice {
    margin: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.35px;
    color: #999999;
    word-break: keep-all;
  }
}

/* —— toast (copy feedback) —— */
.b26-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(34, 34, 34, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.35px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 2000;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}

.b26-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* —— floating —— */
.b26-float-dock {
  position: fixed;
  left: 50%;
  bottom: 98px;
  transform: translateX(-50%);
  z-index: 900;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.b26-float-dock.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

/* Single pill element — animates between collapsed (40x40 N only)
   and expanded (full promo message + close button). */
.b26-float-review {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 12px;
  border-radius: 8px;
  background: #222222;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.25),
    0 4px 24px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  transition: padding 0.35s ease, gap 0.35s ease, box-shadow 1.85s ease;
}

.b26-float-review__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #ffffff;
}

.b26-float-review__iconbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.b26-float-review__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.b26-float-review__text {
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: #ffffff;
  max-width: 520px;
  opacity: 1;
  overflow: hidden;
  transition: max-width 1.15s ease, opacity 0.75s ease 0.1s;
}

.b26-float-review__text--mobile {
  display: none;
}

.b26-float-review__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
  opacity: 1;
  overflow: hidden;
  transition: max-width 0.75s ease, opacity 0.25s ease 0.1s,
    margin 0.35s ease;
}

.b26-float-review__close:hover {
  opacity: 0.7;
}

/* Collapsed — only the 16px N icon inside a 40×40 #222 square. */
.b26-float-review.is-collapsed {
  gap: 0;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.b26-float-review.is-collapsed .b26-float-review__link {
  gap: 0;
}

.b26-float-review.is-collapsed .b26-float-review__text,
.b26-float-review.is-collapsed .b26-float-review__close {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.35s ease, opacity 0.2s ease;
}

.b26-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 901;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px 16px 44px;
  border-radius: 28px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.55px;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.b26-sticky-cta {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.b26-sticky-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

.b26-float-review {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
    padding 0.35s ease, gap 0.35s ease, box-shadow 1.85s ease;
}

.b26-float-review.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
}

.b26-sticky-cta:hover {
  color: #fff;
  background-color: #222;
  opacity: 1;
}

.b26-sticky-cta__chev {
  font-size: 24px;
  line-height: 1;
}

.b26-sticky-cta--mobile {
  display: none;
}

@media (max-width: 768px) {
  .b26-head {
    top: 0;
  }

  .b26-head .b26-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-topbar {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
    transition: max-height 0.2s ease, padding 0.2s ease;
  }

  .b26-head.b26-head--scrolled .b26-topbar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .b26-topbar__text {
    font-size: 13px;
    line-height: 1.4;
  }

  .b26-topbar--notice .b26-topbar__text {
    letter-spacing: 0;
  }

  .b26-topbar--notice .b26-topbar__more {
    margin-left: 8px;
  }

  .b26-gnb {
    display: none;
  }

  .b26-navrow {
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 4px;
    flex-wrap: nowrap;
  }

  .b26-logo img {
    width: 34px;
  }

  .b26-logo {
    height: 44px;
    padding: 4px 6px;
    overflow: hidden;
  }

  .b26-navactions {
    gap: 5px;
  }

  .b26-menu-btn {
    display: inline-flex;
  }

  .b26-cta {
    height: 42px;
    padding: 8px 4px;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.375px;
  }

  .b26-cta__label-desktop {
    display: none;
  }

  .b26-cta__label-mobile {
    display: inline;
  }

  .b26-hero-wrap {
    padding: 0 16px;
  }

  .b26-hero {
    height: calc(100dvh - 170px);
    max-height: 700px;
    border-radius: 20px;
  }

  /* 해외판은 크기는 한국어와 같게 두되 dvh 대신 svh 를 쓴다.
     dvh 는 주소창이 접힐 때 값이 바뀌어 스크롤 중 히어로가 늘었다 줄었다 하고,
     하단의 스크롤 유도 표시(.b26-hero__scrollcue)가 함께 흔들린다.
     다음 섹션이 안 보이는 문제는 축소 대신 스크롤 유도 표시로 푼다. */
  html[lang="en"] .b26-hero,
  html[lang="ja"] .b26-hero,
  html[lang="es"] .b26-hero {
    height: calc(100svh - 170px);
  }

  .b26-hero__bgimg {
    left: 50%;
    top: 50%;
    width: auto;
    min-width: 100%;
    height: 100%;
    max-width: 200%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center center;
  }

  .b26-hero__copy {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 328px;
    padding: 0;
  }

  .b26-hero__eyebrow {
    margin-bottom: 8px;
    font-size: 14px;
  }

  .b26-hero__title {
    font-size: 24px;
    letter-spacing: -0.6px;
  }

  .b26-section {
    padding-bottom: 80px;
  }

  .b26-kicker {
    font-size: 15px;
    letter-spacing: -0.375px;
  }

  .b26-h2 {
    font-size: 24px;
    letter-spacing: -0.6px;
  }

  .b26-lead,
  .b26-body {
    font-size: 15px;
    letter-spacing: -0.375px;
    line-height: 1.4;
  }

  .b26-standard__grid,
  .b26-develop__head,
  .b26-rental__head,
  .b26-service__head,
  .b26-review__head,
  .b26-upgrade__copy,
  .b26-orderpad__head {
    text-align: center;
  }

  /* —— faq (mobile, Figma 360:2289) —— */
  .b26-faq .b26-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-faq__grid {
    padding: 80px 0 80px;
    gap: 35px;
    max-width: 328px;
    margin: 0 auto;
  }

  .b26-faq__head {
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .b26-faq__q {
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #222;
  }

  .b26-faq__q::after {
    width: 24px;
    height: 24px;
    margin-right: 0;
    border: none;
    background: url("/static/image/img_product/다음.svg") no-repeat center / 16px 16px;
    transform: rotate(90deg);
  }

  .b26-faq__item[open] .b26-faq__q::after {
    transform: rotate(-90deg);
  }

  .b26-faq__a {
    padding: 0 16px 16px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
  }

  .b26-standard .b26-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-standard {
    overflow-x: hidden;
  }

  .b26-standard__grid {
    padding-top: 80px;
    gap: 20px;
    text-align: left;
  }

  .b26-standard__copy {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
    gap: 8px;
  }

  .b26-standard .b26-kicker {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
  }

  .b26-standard .b26-h2 {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.6px;
  }

  .b26-standard__quote {
    gap: 2px;
  }

  .b26-standard__quote p,
  .b26-standard__by {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
  }

  .b26-standard__media {
    margin-top: 18px;
    min-height: 189px;
    padding-top: 0;
  }

  .b26-standard__mediabox {
    width: 100%;
    height: 149px;
    min-height: 149px;
    border-radius: 20px 0 0 20px;
    margin-left: 44px;
    overflow: visible;
  }

  .b26-standard__mediabox img {
    width: 262px;
    max-width: none;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
  }

  .b26-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 8px;
    padding: 28px 0 0;
  }

  .b26-stats__rule {
    display: none;
  }

  .b26-stats__item {
    max-width: none;
    gap: 19px;
    padding: 0;
  }

  .b26-stats__item--left {
    border-right: 1px solid #e3e3e3;
  }

  .b26-stats__num {
    font-size: 28px;
    letter-spacing: -0.7px;
    gap: 2px;
  }

  .b26-stats__plus,
  .b26-stats__st {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.45px;
  }

  .b26-stats__desc {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
  }

  .b26-review {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;
  }

  .b26-upgrade__track {
    height: 300vh;
  }

  .b26-upgrade__sticky {
    position: sticky;
    top: 174px;
    display: flex;
    align-items: flex-start;
    background: #fff;
    z-index: 809;
  }

  .b26-upgrade__mhead {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 0px 16px 0;
  }

  .b26-upgrade__mkicker {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.375px;
    color: #666666;
  }

  .b26-upgrade__mtitle {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.6px;
    color: #222222;
  }

  .b26-upgrade__mlead {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.375px;
    color: #3a3a3a;
  }

  .b26-upgrade__copy .b26-kicker,
  .b26-upgrade__copy .b26-h2 {
    display: none;
  }

  .b26-upgrade .b26-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-upgrade__grid {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0px;
    padding-top: 0;
  }

  .b26-upgrade__copy .b26-kicker,
  .b26-upgrade__copy .b26-h2,
  .b26-upgrade__copy .b26-lead {
    display: none;
  }

  .b26-upgrade__copy .b26-kicker {
    font-weight: 400;
  }

  .b26-upgrade__copy .b26-lead {
    margin-top: 8px;
  }

  .b26-upgrade__stage {
    position: relative;
    margin-top: 44px;
    padding-top: 43px;
    min-height: 56px;
  }

  .b26-upgrade__slide,
  .b26-upgrade__mslide {
    position: absolute;
    margin-top: 0px;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }
  .b26-upgrade__mslide {
    margin-top: 0px;
  }

  .b26-upgrade__slide.is-active,
  .b26-upgrade__mslide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .b26-upgrade__loc {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 14px;
    letter-spacing: -0.35px;
  }

  .b26-upgrade__pin {
    width: 16px;
    height: 16px;
  }

  .b26-upgrade__store {
    margin-top: 2px;
    color: #222222;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .b26-upgrade__mstage {
    position: relative;
    max-width: 328px;
    min-height: 271px;
    margin: 0 auto;
  }

  .b26-upgrade__mosaic {
    grid-template-columns: 158px 158px;
    /* keep the same structure as desktop (tl/br are 2-row tiles),
       but scale row heights for mobile */
    grid-template-rows: 93px 63px 93px;
    gap: 11px;
    justify-content: center;
  }

  .b26-upimg {
    border-radius: 12px;
    aspect-ratio: auto;
  }

  .b26-upimg--tl,
  .b26-upimg--tr,
  .b26-upimg--bl,
  .b26-upimg--br {
    grid-row: auto;
    grid-column: auto;
  }

  .b26-upimg--tl {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .b26-upimg--tr {
    grid-column: 2;
    grid-row: 1;
  }

  .b26-upimg--bl {
    grid-column: 1;
    grid-row: 3;
  }

  .b26-upimg--br {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .b26-review .b26-inner {
    --b26-side: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .b26-review__headwrap {
    padding: 80px 0 0;
    gap: 8px;
  }

  .b26-review__head {
    max-width: 328px;
    gap: 8px;
  }

  .b26-review__controls {
    display: none;
  }

  .b26-review__scroller {
    margin-top: 62px;
    margin-left: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .b26-review__scroller::-webkit-scrollbar {
    display: none;
  }

  .b26-review__track {
    gap: 14px;
    padding: 0 16px 0 0;
    transform: none !important;
    transition: none;
    touch-action: pan-x;
    cursor: grab;
  }

  .b26-rcard,
  .b26-rnaver {
    flex: 0 0 260px;
    max-width: 260px;
    min-height: 184px;
    padding: 20px;
    border-radius: 20px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .b26-rnaver {
    justify-content: center;
    gap: 8px;
    padding: 0 28px;
  }

  .b26-rnaver__ico {
    width: 54px;
    height: 54px;
    background-size: 54px 54px;
  }

  .b26-rnaver__star {
    width: 25px;
    height: 24px;
  }

  .b26-rnaver__rating {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }

  .b26-orderpad__control {
    height: 502px;
  }
  .b26-rnaver__slash {
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 1.12px;
  }

  .b26-rnaver__cnt {
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: -0.35px;
  }

  .b26-rnaver__more {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.4px;
  }

  .b26-rnaver__chev {
    width: 16px;
    height: 16px;
  }

  .b26-rcard {
    gap: 24px;
  }

  .b26-rcard__top {
    gap: 8px;
  }

  .b26-rcard__id {
    font-size: 14px;
    letter-spacing: -0.35px;
  }

  .b26-rcard__score {
    font-size: 16px;
    letter-spacing: 1.28px;
  }

  .b26-rcard__star {
    width: 18px;
    height: 18px;
  }

  .b26-rcard__score strong {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.45px;
  }

  .b26-rcard__text {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .b26-rcard__idx {
    font-size: 14px;
    letter-spacing: -0.35px;
  }

  .b26-rcard__badge {
    left: 28px;
    top: 140px;
    font-weight: 600;
  }

  .b26-develop__head {
    padding: 80px 0 0;
    gap: 8px;
  }

  .b26-develop__head .b26-lead {
    max-width: 328px;
  }

  .b26-timeline {
    padding: 39px 0 0;
  }

  .b26-devcards {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
  }

  .b26-devcard {
    width: 100%;
    max-width: 328px;
    margin: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
  }

  .b26-devcard--imgbottom {
    flex-direction: row;
  }

  .b26-devcard__imgblock {
    width: 134px;
    flex: 0 0 134px;
  }

  .b26-devcard__imgwrap {
    width: 134px;
    height: 134px;
    border-radius: 16px;
  }

  .b26-devcard__dots {
    display: none;
  }

  .b26-devcard__text {
    min-height: 134px;
    max-width: 182px;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-top: 0;
  }

  .b26-devcard--imgbottom .b26-devcard__text {
    align-items: flex-end;
    text-align: right;
    justify-content: center;
  }

  .b26-devcard__title {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.425px;
    text-align: inherit;
  }

  .b26-devcard__desc,
  .b26-devcard--imgbottom .b26-devcard__desc,
  .b26-devcards .b26-devcard:nth-child(3) .b26-devcard__desc {
    width: auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.375px;
    text-align: inherit;
  }

  .b26-menu-open {
    overflow: hidden;
  }

  .b26-mnav {
    position: fixed;
    left: 0;
    /* 헤더 높이는 상단 띠 유무에 따라 다르다(국내 92px / 해외 53px).
       nav.html 의 스크립트가 실측해 --b26-head-h 에 넣는다. */
    top: var(--b26-head-h, 92px);
    width: 100%;
    height: calc(100dvh - var(--b26-head-h, 92px));
    background: #fff;
    z-index: 899;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 16px 20px;
  }

  .b26-mnav.is-open {
    display: flex;
  }

  body.b26-menu-open .b26-head {
    top: 0;
  }

  body.b26-menu-open .b26-topbar {
    display: flex;
    max-height: 80px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.b26-menu-open .b26-head.b26-head--scrolled .b26-topbar {
    max-height: 80px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.b26-menu-open .b26-navrow .b26-cta {
    display: none;
  }

  body.b26-menu-open .b26-mnav {
    top: var(--b26-head-h, 92px);
    height: calc(100dvh - var(--b26-head-h, 92px));
  }

  .b26-mnav__menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .b26-mnav__link {
    display: block;
    padding: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.425px;
    color: #666;
    text-decoration: none;
  }

  .b26-mnav__link--on {
    color: #222;
  }

  .b26-mnav__bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 모바일 드로어에는 언어 전환을 노출하지 않는다. */
  .b26-mnav .b26-lang {
    gap: 0;
    display: none;
  }

  .b26-mnav .b26-lang__link {
    font-size: 16px;
    letter-spacing: -0.4px;
    padding: 10px;
  }

  .b26-mnav .b26-lang__link--on {
    font-weight: 600;
    color: #222;
  }

  .b26-mnav .b26-lang__link:not(.b26-lang__link--on) {
    color: #666;
    font-weight: 500;
  }

  .b26-mnav .b26-lang__bar {
    background: #666;
  }

  .b26-mnav__cta {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 12px;
    background: #222;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.425px;
  }

  .b26-float-dock {
    left: 0;
    right: 0;
    /* Chrome Android 등: 주소창 표시 시 layout/visual 뷰포트 차이 보정 (--b26-vv-bottom-offset 는 nav 스크립트에서 설정) */
    bottom: var(--b26-vv-bottom-offset, 0px);
    transform: none;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 18px;
    background: #fff;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.06);
    z-index: 902;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .b26-float-dock.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
  }

  .b26-float-review {
    visibility: inherit;
    width: 80px;
    height: 52px;
    border-radius: 8px;
    padding: 8px 12px 8px 8px;
    gap: 2px;
    box-shadow: none;
    flex-shrink: 0;
  }

  .b26-float-review .b26-float-review__link {
    width: 100%;
    justify-content: center;
    gap: 4px;
  }

  /* On mobile we keep the pill "collapsed" state,
     so override the desktop collapsed gap=0 rule. */
  .b26-float-review.is-collapsed .b26-float-review__link {
    gap: 4px;
  }

  .b26-float-review .b26-float-review__close {
    display: none;
  }

  .b26-float-review__text--desktop {
    display: none;
  }

  .b26-float-review__text--mobile {
    display: inline;
    max-width: none;
    opacity: 1;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.425px;
  }

  .b26-float-review.is-collapsed {
    gap: 2px;
    padding: 8px 12px 8px 8px;
    box-shadow: none;
  }

  .b26-float-review.is-collapsed .b26-float-review__text--mobile {
    max-width: none;
    opacity: 1;
    pointer-events: auto;
  }

  .b26-sticky-cta {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 0;
    height: 52px;
    flex: 1 0 0;
    gap: 4px;
    width: auto;
    max-width: none;
    border-radius: 12px;
    padding: 8px 20px 8px 20px;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.425px;
    background: #222;
    box-shadow: none;
  }

  .b26-sticky-cta--desktop {
    display: none;
  }

  .b26-sticky-cta--mobile {
    display: inline-flex;
  }

  .b26-sticky-cta__chev {
    font-size: 22px;
  }

  .b26-rental {
    padding-bottom: 80px;
  }

  .b26-rental__head {
    padding: 80px 0 0;
    gap: 8px;
  }

  .b26-rental__head .b26-lead {
    max-width: 328px;
  }

  .b26-rental__row,
  .b26-rental__row--second {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 64px 0 0;
    padding-left: 0;
    padding-right: 0;
  }
  .b26-faq__list {
    max-width: 328px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .b26-rental__row--second {
    flex-direction: column-reverse;
    padding: 45px 0 0;
  }

  .b26-rental__media {
    width: 100%;
    max-width: 328px;
    min-height: 208px;
    height: 208px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .b26-rental__text,
  .b26-rental__text--right {
    width: 100%;
    max-width: 328px;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
    margin-left: auto;
    margin-right: auto;
    flex: 1 1 45px;
  }

  .b26-rental__titlegroup,
  .b26-rental__text--right .b26-rental__titlegroup {
    gap: 4px;
    align-items: flex-start;
  }

  .b26-rental__icon {
    width: 24px;
    height: 24px;
  }

  .b26-rental__logo {
    width: 57px;
    height: 24px;
  }

  .b26-rental__text .b26-h3 {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.45px;
  }

  .b26-rental__text .b26-body {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }
}

html.b26-success-open,
body.b26-success-open {
  overflow: hidden;
  touch-action: none;
}

.b26-success-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.b26-success-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.b26-success-modal__panel {
  padding: 56px 32px 32px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.02);
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 25px rgba(0, 0, 0, 0.35);
}

.b26-success-modal__title {
  margin: 0;
  color: #222;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-align: center;
}

.b26-success-modal__confirm {
  margin-top: 36px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: #ff4c30;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.45px;
  cursor: pointer;
}

@media (max-width: 767px) {
  .b26-success-modal {
    padding: 16px;
  }

  .b26-success-modal__panel {
    width: 100%;
    padding: 56px 20px 24px;
    border-radius: 20px;
  }

  .b26-success-modal__title {
    font-size: 20px;
  }

  .b26-success-modal__confirm {
    margin-top: 32px;
    height: 52px;
    font-size: 18px;
  }
}

/* ===== 데스크톱 언어 스위처 (b26-navactions 내부, >768px) ===== */
/* i18n: 언어 전환 셀렉트.
   링크를 나열하면 가로 자리를 170px 먹어 769~1023px 에서 GNB 가 두 줄로
   접혔다. 자주 쓰는 기능이 아니므로 셀렉트로 접어 자리를 줄인다. */
.b26-langsel {
  flex: none;
  width: 104px;
  min-width: 0;
  height: 44px;
  margin-right: 10px;
  padding: 0 30px 0 14px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1.25L5 5.25L9 1.25' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #444;
  cursor: pointer;
}
.b26-langsel:hover { border-color: #cfcfcf; color: #111; }
.b26-langsel:focus-visible { outline: 2px solid #222; outline-offset: 1px; }

/* 1280px 미만에서는 이 셀렉트가 GNB 를 두 줄로 접는다.
   한국어(4항목)는 960px 부터, 해외판(5항목)은 1280px 부터 문제가 된다. */
@media (max-width: 1279px) {
  .b26-langsel { display: none; }
}

/* ===== i18n: 아래 세 블록은 한국어 조판을 그대로 두기 위해 해외판에만 건다.
   한국어는 이 폭/줄길이에 맞춰 nowrap 으로 맞춰져 있다. ===== */

/* 하단 독이 긴 번역 문구에서도 뷰포트를 넘지 않도록 */
@media (max-width: 768px) {
  html[lang="en"] .b26-float-dock,
  html[lang="ja"] .b26-float-dock,
  html[lang="es"] .b26-float-dock {
    max-width: calc(100vw - 16px);
  }
  html[lang="en"] .b26-sticky-cta--mobile,
  html[lang="ja"] .b26-sticky-cta--mobile,
  html[lang="es"] .b26-sticky-cta--mobile {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
}

/* .b26-develop 카드는 한국어에서도 960~1023px 구간에서 뷰포트를 밀어낸다
   (master 부터 있던 문제). 이미 깨져 있는 구간이므로 언어 무관하게 푼다. */
@media (max-width: 1023px) {
  .b26-devcard__desc,
  .b26-devcard__title,
  .b26-lead,
  .b26-svcard__desc {
    white-space: normal;
  }
}

/* 해외판은 번역문이 길어 전 폭에서 줄바꿈을 허용한다. */
html[lang="en"] .b26-devcard__desc,
html[lang="ja"] .b26-devcard__desc,
html[lang="es"] .b26-devcard__desc,
html[lang="en"] .b26-devcard__title,
html[lang="ja"] .b26-devcard__title,
html[lang="es"] .b26-devcard__title,
html[lang="en"] .b26-lead,
html[lang="ja"] .b26-lead,
html[lang="es"] .b26-lead,
html[lang="en"] .b26-svcard__desc,
html[lang="ja"] .b26-svcard__desc,
html[lang="es"] .b26-svcard__desc {
  white-space: normal;
}

/* 푸터 사업자 정보 줄바꿈 허용.
   한국어도 포함한다. 이 줄은 1279px 폭이라 1024~1278px 구간에서 뷰포트를
   밀어내 가로 스크롤을 만들고 있었다(master 부터 있던 문제). 1300px 이상에서는
   한 줄에 들어가므로 기존 렌더링과 동일하다. */
.b26-footer__biz {
  flex-wrap: wrap;
  white-space: normal;
}
.b26-footer__biz > span {
  white-space: nowrap;
}

/* ===== i18n: 해외판 B2B 섹션 CTA (orderpad__btn 은 absolute 라 재사용 불가) ===== */
.b26-b2b-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px 20px 36px;
  border-radius: 28px;
  background: #222222;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.b26-b2b-cta:hover { background: #000000; }
.b26-b2b-cta__chev { flex: none; }
@media (max-width: 768px) {
  .b26-b2b-cta {
    gap: 8px;
    padding: 15px 20px 15px 26px;
    border-radius: 22px;
    font-size: 16px;
  }
}

/* ===== i18n: 해외판 B2B 섹션 ===== */
.b26-b2b__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.b26-b2b__card {
  padding: 36px 32px;
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 20px;
  text-align: left;
}
.b26-b2b__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 15px;
  background: #fdece8;
  color: #e8442a;
}
.b26-b2b__card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #111111;
}
.b26-b2b__card p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.3px;
  color: #666666;
}
.b26-b2b__proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 64px;
  padding: 32px 24px;
  background: #fafafa;
  border-radius: 20px;
}
.b26-b2b__proof-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #9a9a9a;
  text-transform: uppercase;
}
.b26-b2b__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.b26-b2b__logo { height: 30px; width: auto; }
/* `.b26 img { height: auto }`(0,1,1)가 `.b26-b2b__logo`(0,1,0)를 이기므로
   높이를 주려면 특정성을 맞춰야 한다. SVG(ADT캡스)는 width/height 속성으로
   비율이 유지돼 문제가 없었지만, PNG 는 원본 크기(683x120)로 나왔다. */
.b26 .b26-b2b__logo { height: 30px; width: auto; }

/* SK쉴더스 가로형은 획이 얇아, 같은 높이면 ADT캡스보다 작아 보인다. */
.b26 .b26-b2b__logo--sk { height: 26px; }

@media (max-width: 768px) {
  .b26 .b26-b2b__logo { height: 24px; }
  .b26 .b26-b2b__logo--sk { height: 21px; }
}



/* B2B 카드 -> API·AI 상세 페이지 링크 */
.b26-b2b__more {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #e8442a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.b26-b2b__more::after { content: " \203A"; }
.b26-b2b__more:hover { border-bottom-color: #e8442a; }
.b26-b2b__logo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #333333;
}
@media (max-width: 768px) {
  .b26-b2b__cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
  }
  .b26-b2b__card { padding: 26px 22px; border-radius: 16px; }
  .b26-b2b__ico { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; }
  .b26-b2b__card h3 { font-size: 17px; }
  .b26-b2b__card p { font-size: 14px; }
  .b26-b2b__proof { margin-top: 40px; padding: 24px 16px; }
  .b26-b2b__logo { height: 24px; }
  .b26-b2b__logo-name { font-size: 14px; }
}

/* ===== i18n: 모바일에서 긴 번역 주소가 페이지 폭을 밀지 않도록 ===== */
@media (max-width: 768px) {
  .b26-footer__biz > span { white-space: normal; }
}

/* i18n: 해외판은 본문 텍스트 드래그/복사를 허용한다.
   home.css의 `html { user-select: none }`(드래그 방지)이 이메일·주소·회사
   정보까지 복사할 수 없게 만들어 B2B 문의에 불리하다. 캐러셀 트랙·버튼 등
   드래그 UI는 각자 user-select:none을 유지하므로 영향 없음. */
html[lang="ja"],
html[lang="en"],
html[lang="es"] {
  -ms-user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}

/* ===== 모바일 가로 스크롤 메뉴바 (해외판 전용) =====
   햄버거는 열기 전까지 안에 무엇이 있는지 보이지 않아 발견성이 낮았다.
   항목을 그대로 노출하고 넘치면 가로로 스크롤한다. 순서는 데스크톱 GNB 와 같다.
   이에 따라 햄버거와 헤더 우측 CTA 는 모바일에서 감춘다.
   - CTA: 하단에 따라다니는 플로팅 버튼과 중복이다.
   한국어는 기존 햄버거 헤더를 그대로 유지한다. */
.b26-mbar { display: none; }

@media (max-width: 768px) {
  /* 로고 옆 남는 폭을 메뉴가 쓴다. 로고만 있는 줄을 따로 두면 세로 공간이 아깝다. */
  html[lang="en"] .b26-navrow,
  html[lang="ja"] .b26-navrow,
  html[lang="es"] .b26-navrow {
    gap: 12px;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 58px;
  }

  html[lang="en"] .b26-logo,
  html[lang="ja"] .b26-logo,
  html[lang="es"] .b26-logo {
    flex: none;
    align-self: center;
  }

  html[lang="en"] .b26-mbar,
  html[lang="ja"] .b26-mbar,
  html[lang="es"] .b26-mbar {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    /* navrow 의 우측 여백(16px)까지 넘겨 화면 끝까지 스크롤되게 한다.
       여백이 남으면 페이드가 끝에 닿지 않아 잘린 것처럼 보인다. */
    margin-right: -16px;
  }

  .b26-mbar__track {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 20px;
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 스크롤이 가능하다는 신호를 주려고 우측 끝을 넓게 흐린다.
       페이드가 마지막 64px 을 덮으므로, 끝까지 스크롤했을 때 마지막 항목이
       흐림 구간을 벗어나도록 그보다 큰 우측 패딩을 준다. */
    padding-right: 76px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  }

  .b26-mbar__track::-webkit-scrollbar { display: none; }

  .b26-mbar__link {
    flex: none;
    display: flex;
    align-items: center;
    height: 100%;
    border-bottom: 2px solid transparent;
    color: #8a8a8a;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-decoration: none;
    white-space: nowrap;
  }

  .b26-mbar__link--on {
    color: #111;
    border-bottom-color: #222;
  }

  /* 해외판은 햄버거·드로어·상단 CTA 를 모바일에서 쓰지 않는다. */
  html[lang="en"] .b26-menu-btn,
  html[lang="ja"] .b26-menu-btn,
  html[lang="es"] .b26-menu-btn,
  html[lang="en"] .b26-mnav,
  html[lang="ja"] .b26-mnav,
  html[lang="es"] .b26-mnav,
  html[lang="en"] .b26-navrow .b26-cta,
  html[lang="ja"] .b26-navrow .b26-cta,
  html[lang="es"] .b26-navrow .b26-cta {
    display: none !important;
  }

}

/* 해외판 GNB 는 API & AI 까지 항목이 4개라 769~1023px 에서 두 줄로 접혔다
   (en/es 는 ~900px, ja 는 1023px 까지). 이 구간에서는 한국어용
   margin-left: 18vw 를 없애고 글자·패딩을 줄여 한 줄을 유지한다. */
@media (min-width: 769px) and (max-width: 1023px) {
  html[lang="en"] .b26-gnb,
  html[lang="ja"] .b26-gnb,
  html[lang="es"] .b26-gnb {
    margin-left: 0;
  }

  html[lang="en"] .b26-gnb__link,
  html[lang="ja"] .b26-gnb__link,
  html[lang="es"] .b26-gnb__link {
    min-width: 0;
    padding: 10px 8px;
    font-size: 15px;
    letter-spacing: -0.3px;
  }
}

/* ===== i18n: 히어로 서브카피 + "MENU.IT 이란" 소개 띠 (해외판 전용) ===== */
.b26-hero__sub {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.3px;
}

/* 히어로가 화면을 거의 채워 다음 섹션이 보이지 않으므로,
   아래에 내용이 있음을 하단의 튀는 셰브론으로 알린다. */
.b26-hero__scrollcue {
  position: absolute;
  left: 50%;
  bottom: 16px;
  margin-left: -14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 0;
  pointer-events: none;
  animation: b26-scrollcue-bounce 2s ease-in-out infinite;
}

@keyframes b26-scrollcue-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(8px); opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .b26-hero__scrollcue { animation: none; }
}

/* .b26-section 의 기본 여백이 아래쪽에만 있어 히어로와 바로 붙는다. */
.b31 { padding-top: 96px; }

/* 다른 카드 섹션(.b26-b2b__cards 1248px)과 폭을 맞춘다.
   기본 .b26-inner 를 그대로 쓰면 1408px 이라 혼자 넓어 보인다. */
.b31-inner {
  max-width: 1248px;
  margin: 0 auto;
}

.b31-head { max-width: 640px; }

.b31-h2 {
  margin: 12px 0 0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.9px;
  color: #111;
}

.b31-lead {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: #666;
}

.b31-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  margin-top: 48px;
}

.b31-visual {
  border-radius: 20px;
  overflow: hidden;
  background: #0d0d0f;
}

.b31-visual img { width: 100%; height: auto; display: block; }

.b31-list { display: flex; flex-direction: column; gap: 26px; }

.b31-item { display: flex; gap: 16px; }

.b31-item__ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fdf0ed;
  color: #e8442a;
}

.b31-item h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: #111;
}

.b31-item p { margin: 0; font-size: 15px; line-height: 1.7; color: #666; }

.b31-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 16px 22px 16px 26px;
  border-radius: 24px;
  background: #222;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.b31-cta:hover { background: #000; }

@media (max-width: 1023px) {
  .b31-body { grid-template-columns: 1fr; gap: 36px; }
  .b31-h2 { font-size: 28px; letter-spacing: -0.6px; }
}

@media (max-width: 768px) {
  .b26-hero__sub { font-size: 15px; margin-top: 10px; }
  .b31 { padding-top: 56px; }
  .b31-h2 { font-size: 24px; }
  .b31-lead { font-size: 15px; }
  .b31-body { margin-top: 32px; gap: 28px; }
  .b31-visual { border-radius: 16px; }
  .b31-list { gap: 22px; }
  .b31-item__ico { width: 38px; height: 38px; border-radius: 10px; }
  .b31-item h3 { font-size: 16px; }
}

/* ===== 해외판 하단 고정 CTA (두 버튼) =====
   상단 문의 버튼을 없앤 뒤 문의로 가는 상시 동선이 사라졌다.
   제품을 더 볼 사람과 바로 문의할 사람을 함께 잡는다.
   JS 가 .b26-sticky-cta--desktop 으로 표시/숨김을 제어하므로 그 클래스는
   래퍼가 갖고, 안쪽 버튼은 고정 위치를 버리고 나란히 놓인다. */
/* 모바일용·데스크톱용 두 벌이 있고 원래는 .b26-sticky-cta--mobile/--desktop 의
   display 로 하나만 보였다. 래퍼의 display:flex 가 같은 특정성이면서 뒤에 와
   그 숨김을 이겨 둘 다 보였다. 래퍼에도 같은 분기를 명시한다. */
.b26-stickypair.b26-sticky-cta--mobile { display: none; }

@media (max-width: 768px) {
  .b26-stickypair.b26-sticky-cta--mobile { display: flex; }
  .b26-stickypair.b26-sticky-cta--desktop { display: none; }
}

.b26-stickypair {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 901;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.b26-stickypair.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);
}

.b26-stickypair .b26-sticky-cta {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  min-width: 0;
  padding: 15px 24px;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 보조: 제품 보기. 문의 버튼이 주인공이 되도록 대비를 낮춘다. */
.b26-stickypair .b26-sticky-cta--sub {
  background: rgba(255, 255, 255, 0.92);
  color: #222;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
}

.b26-stickypair .b26-sticky-cta--sub:hover {
  background: #fff;
  color: #111;
}

.b26-stickypair .b26-sticky-cta--sub .b26-sticky-cta__chev { display: none; }

/* 주: 문의 */
.b26-stickypair .b26-sticky-cta--primary {
  background: #e8442a;
  color: #fff;
}

.b26-stickypair .b26-sticky-cta--primary:hover { background: #d13a22; }

@media (max-width: 768px) {
  .b26-stickypair {
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    max-width: none;
  }
  .b26-stickypair.is-hidden { transform: translateY(20px); }
  .b26-stickypair .b26-sticky-cta {
    flex: 1 1 0;
    justify-content: center;
    padding: 15px 12px;
    font-size: 15px;
  }
}

/* 해외판은 상단 띠가 없어 헤더가 메뉴 한 줄뿐이다. 그런데 sticky top 이
   -48px 로 잡혀 있어(띠를 숨기려던 값) 스크롤하면 메뉴가 76px 중 28px 만
   남고 잘렸다. 숨길 띠가 없으므로 0 으로 둔다. */
html[lang="en"] .b26-head,
html[lang="ja"] .b26-head,
html[lang="es"] .b26-head {
  top: 0;
}

/* PC 는 헤더에 문의 버튼이 늘 떠 있어 하단바의 문의 버튼은 중복이다.
   모바일은 헤더 CTA 를 없앴으므로 그대로 둔다. */
@media (min-width: 769px) {
  .b26-stickypair .b26-sticky-cta--primary { display: none; }
}