/* /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: 24px;
  padding-right: 24px;
}

/* —— 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 —— */
.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;
}

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

  .b26-br-sm {
    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;
  }
}

.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 280px;
  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(3, 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;
  }

  .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;
  }
}

/* —— 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;
}

.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;
  overflow: hidden;
}

/* 자유롭게 위치/크기 조정할 수 있는 컨트롤 레이어 (필요하면 값만 바꾸세요) */
.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: 0;
  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: opacity 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: 12px;
}

.b26-footer__biz > span {
  opacity: 0.5;
  font-weight: 500;
}

.b26-footer__muted {
  opacity: 0.2;
  font-weight: 400;
}

.b26-footer__copy {
  margin: 0;
  font-size: 14px;
  opacity: 0.5;
}

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

@media (max-width: 767px) {
  .b26-footer {
    padding: 48px 0 98px;
  }

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

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

  .b26-footer__links {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
  }

  .b26-footer__sep {
    display: none;
  }

  .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: 12px;
    white-space: nowrap;
  }

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

  /* mobile: hide only the separator bars between biz fields */
  .b26-footer__biz > .b26-footer__muted {
    display: none;
  }

  .b26-footer__copy {
    line-height: 1.25;
  }
}

/* —— 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;
  opacity: 0.95;
}

.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-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;
  }

  .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 {
    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 {
    padding-bottom: 80px;
  }

  .b26-upgrade__track {
    height: 300vh;
  }

  .b26-upgrade__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: flex-start;
  }

  .b26-upgrade__mhead {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    padding: 80px 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: 24px;
    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: 30vh;
    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;
  }

  .b26-devcard {
    width: 100%;
    max-width: 328px;
    margin: 0 auto;
    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;
    top: 92px;
    width: 100%;
    height: calc(100dvh);
    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: 92px;
    height: calc(100dvh - 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;
    background: #fff;
    box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.06);
    z-index: 902;
  }

  .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;
    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-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;
  }
}