/* =========================================================
   orderpad.css — 오더패드 제품 페이지 (/orderpad)
   프리픽스: b27-* (b26-* 는 nav/footer/float 공용 유지)
   참고: 메뉴잇 철학(branding.html) 페이지 구조/토큰 차용
   ========================================================= */

   .b27 {
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.4;
    color: #222222;
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    /* overflow-x: hidden; */
  }
  
  .b27 *,
  .b27 *::before,
  .b27 *::after {
    box-sizing: border-box;
  }
  
  .b27 img {
    height: auto;
    display: block;
  }
  
  @media (max-width: 767px) {
    .b27-br-pc-only {
      display: none;
    }
  }
  
  @media (min-width: 768px) {
    .b27-br-mobile-only {
      display: none;
    }
  }
  
  .b27-battery__stat-note--mobile-only {
    display: none;
  }
  
  .b27-inner {
    width: 100%;
    margin: 0 auto;
    padding-left: 320px;
    padding-right: 320px;
  }
  
  @media (max-width: 1679px) {
    .b27-inner {
      padding-left: 80px;
      padding-right: 80px;
    }
  }
  
  @media (max-width: 1023px) {
    .b27-inner {
      padding-left: 24px;
      padding-right: 24px;
    }
  }
  
  /* —— 공통 타이포 —— */
  .b27-kicker {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #666666;
  }
  
  .b27-h2 {
    white-space: nowrap;
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    color: #222222;
  }
  
  .b27-lead {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #3a3a3a;
  }
  
  .b27-section {
    width: 100%;
    padding-bottom: 0;
  }
  
  /* —— Hero ——
     패널 높이 457px 고정; 가로는 영역에 맞추고 배경 이미지는 cover 로 채움 */
  .b27-hero {
    padding: 0 20px;
  }
  
  .b27-hero__panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 1908px;
    margin-inline: auto;
    height: 457px;
    border-radius: 20px;
    background: #000000;
    overflow: hidden;
  }
  
  /* .b27 img { max-width:100%; height:auto } 보다 우선해 패널 전체를 덮도록 */
  .b27 .b27-hero__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
  }
  
  .b27 .b27-hero__bg--mobile {
    display: none;
  }
  
  .b27-hero__copy {
    position: absolute;
    left: clamp(24px, 12.5%, 240px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  
  .b27-hero__eyebrow {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.6px;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .b27-hero__title {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1.2px;
    color: #ffffff;
  }
  
  @media (max-width: 1023px) {
    .b27-hero__panel {
      width: 100%;
      max-width: none;
      height: 457px;
    }
    .b27 .b27-hero__bg {
      object-position: center center;
    }
    .b27-hero__copy {
      left: 24px;
      gap: 10px;
    }
    .b27-hero__title {
      font-size: clamp(22px, 3.1vw, 32px);
      letter-spacing: -0.8px;
    }
    .b27-hero__eyebrow {
      font-size: clamp(12px, 1.6vw, 16px);
    }
  }
  
  /* mobile hero banner (Figma node 1:3890) */
  @media (max-width: 767px) {
    .b27-hero {
      padding: 0 16px;
    }
  
    .b27-hero__panel {
      height: calc(100dvh - 170px);
      max-height: 700px;
      border-radius: 20px;
      background: #000;
      overflow: hidden;
    }
  
    .b27 .b27-hero__bg--desktop {
      display: none !important;
    }
  
    .b27 .b27-hero__bg--mobile {
      display: block;
      inset: 0;
      left: 0;
      top: 40px;
      width: 100%;
      height: 100%;
      max-width: none;
      transform: none;
      object-fit: contain;
      object-position: center bottom;
      pointer-events: none;
    }
  
    .b27-hero__copy {
      left: 0;
      right: 0;
      top: 60px;
      transform: none;
      width: 328px;
      margin: 0 auto;
      align-items: center;
      text-align: center;
      gap: 8px;
    }
  
    .b27-hero__eyebrow {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: 0;
      opacity: 0.8;
    }
  
    .b27-hero__title {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.7px;
    }
  }
  
  /* —— Problems (고객 페인포인트 7-열 정적 행, Figma node 1:2712) ——
     Figma 스펙: 7 아이템 × 188px + 6 gap × 148px = 2204px 고정 폭.
     데스크탑에서는 자연스럽게 좌우로 오버플로우되어 보이고(Figma 시각과 동일),
     1440px 미만에서는 gap 을 유동 축소, 모바일에서는 가로 스크롤로 전환. */
  .b27-problems {
    padding: 130px 0 0;
    position: relative;
    overflow: hidden;
  }
  
  .b27-problems__viewport {
    width: 100%;
    overflow: hidden;
  }
  
  /* 원본 7개 + 복제 7개 = 14개 아이템.
     translateX(-50%) → 0 으로 움직이면 시각적으로 좌→우 흐름, 이음새 없이 루프된다. */
  .b27-problems__track {
    display: flex;
    gap: 148px;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: max-content;
    padding: 0 148px 0 0;
    animation: b27-problems-scroll 40s linear infinite;
    will-change: transform;
  }
  
  .b27-problems:hover .b27-problems__track {
    animation-play-state: paused;
  }
  
  @keyframes b27-problems-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .b27-problems__track {
      animation: none;
      transform: none;
    }
  }
  
  .b27-problems__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 188px;
    flex-shrink: 0;
  }
  
  .b27-problems__icon {
    width: 40px;
    height: 40px;
    color: #222222;
    flex-shrink: 0;
    object-fit: contain;
  }
  
  .b27-problems__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.45px;
    text-align: center;
    color: #222222;
    white-space: pre-line;
  }
  
  @media (max-width: 1439px) {
    .b27-problems__track {
      gap: clamp(40px, 8vw, 148px);
      padding: 0 clamp(40px, 8vw, 148px) 0 0;
    }
  }
  
  @media (max-width: 767px) {
    .b27-problems {
      padding-top: 80px;
    }
    .b27-problems__track {
      gap: 40px;
      padding: 0 40px 0 0;
      animation-duration: 28s;
    }
    .b27-problems__item {
      width: 160px;
    }
    .b27-problems__text {
      font-size: 15px;
      letter-spacing: -0.375px;
    }
  }
  
  /* —— Section break ("10년간의 목소리에 집중, 그리고 혁신.")
     스크롤 핀 + '혁신' 포인트 컬러 전환 트리거
     외부 컨테이너를 180vh 로 잡고, 내부 .b27-break__pin 을 sticky 로
     뷰포트에 고정. JS 가 스크롤 진행률 30% 시점에 .is-triggered 토글. */
  .b27-break {
    position: relative;
    height: 390vh;
    padding: 0;
    background: #ffffff;
  }
  
  .b27-break__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
  }
  
  .b27-break__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    color: #222222;
    text-align: center;
    white-space: nowrap;
  }
  
  .b27-break__accent {
    color: inherit;
    transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .b27-break.is-triggered .b27-break__accent {
    color: #ff4c30;
  }
  
  @media (max-width: 1023px) {
    .b27-break {
      height: 330vh;
    }
    .b27-break__title {
      font-size: 28px;
      white-space: normal;
    }
  }
  
  @media (max-width: 540px) {
    .b27-break {
      height: 300vh;
    }
    .b27-break__title {
      font-size: 24px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .b27-break {
      height: auto;
      padding: 180px 0;
    }
    .b27-break__pin {
      position: static;
      height: auto;
    }
    .b27-break__accent {
      transition: none;
    }
  }
  
  /* —— Overview (Amazing) ——
     Figma 1920px 프레임 기준:
     - 좌우 320px 패딩, 콘텐츠 1280px
     - 상단: [타이틀 408] (gap 28) [히어로 842×396]
     - 하단: [408×240] (28) [408×240] (28) [408×240] */
  .b27-overview {
    padding: 100px 0;
  }
  
  .b27-overview__layout {
    margin: 0 auto;
    padding: 0 320px;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  
  .b27-overview__top {
    display: grid;
    grid-template-columns: 408px minmax(0, 842px);
    gap: 28px;
    align-items: stretch;
  }
  
  .b27-overview__bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  
  .b27-overview__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: center;
  }
  
  .b27-overview__copy .b27-lead {
    white-space: pre-line;
  }
  
  .b27-overview__copy-leads {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
    width: 100%;
  }
  
  .b27-overview__card {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fbfbfb;
    height: 240px;
    --b27-overview-blur: 3.5px;
  }
  
  .b27-overview__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(var(--b27-overview-blur));
    -webkit-backdrop-filter: blur(var(--b27-overview-blur));
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
    pointer-events: none;
  }
  
  .b27-overview__card--hero {
    height: 396px;
    background: #f5f5f5;
    --b27-overview-blur: 7px;
  }
  
  .b27-overview__media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
  }
  
  /* Figma crop: image is absolutely positioned with exact width/height/left/top
     percentages so the same focal region is shown at any card size. */
  .b27-overview__media img {
    display: block;
    position: absolute;
    max-width: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
  }
  
  /* 감각적인 곡선 (node 1:2739) — img07A1 3044×1712에서 top-left 커브 */
  .b27-overview__card--hero .b27-overview__media img {
    width: 361.47%;
    height: 432.32%;
    left: -98.55%;
    top: -159.6%;
    object-fit: fill;
  }
  
  /* 원터치 탈부착 배터리 (node 1:2738) — img051 */
  .b27-overview__card[data-focus="battery"] .b27-overview__media img {
    width: 172.55%;
    height: 165%;
    left: -13.24%;
    top: -38.75%;
    object-fit: fill;
  }
  
  /* 안전한 조립 (node 1:2737) — img07A1 하단 거치부 크롭 */
  .b27-overview__card[data-focus="assembly"] .b27-overview__media img {
    width: 262.25%;
    height: 250.78%;
    left: -79.41%;
    top: -125.39%;
    object-fit: fill;
  }
  
  /* 깔끔한 주문 화면 (node 1:2740) — img011 */
  .b27-overview__card[data-focus="screen"] .b27-overview__media img {
    width: 223.83%;
    height: 214.04%;
    left: -50.06%;
    top: -33.75%;
    object-fit: fill;
  }
  
  .b27-overview__card figcaption {
    position: absolute;
    left: 28px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 2;
  }
  
  .b27-overview__cap-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #222222;
  }
  
  .b27-overview__cap-title::before {
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    background: #222222;
  }
  
  .b27-overview__cap-desc {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #3a3a3a;
    white-space: nowrap;
    transition: opacity 0.75s ease, max-height 0.75s ease, margin-top 0.15s ease;
  }
  
  .b27-overview__card--hero .b27-overview__cap-desc {
    white-space: normal;
  }
  
  @media (hover: hover) and (pointer: fine) {
    .b27-overview__card:hover::after {
      opacity: 1;
    }
    .b27-overview__card:hover figcaption {
      bottom: 24px;
    }
    .b27-overview__card--hero:hover figcaption {
      bottom: 24px;
    }
    .b27-overview__card:hover .b27-overview__cap-desc {
      margin-top: 8px;
      max-height: 72px;
      opacity: 1;
    }
  }
  
  @media (max-width: 1679px) {
    .b27-overview__layout {
      padding: 0 80px;
    }
    .b27-overview__top {
      grid-template-columns: minmax(320px, 408px) minmax(0, 1fr);
    }
  }
  
  @media (max-width: 1279px) {
    .b27-overview__layout {
      padding: 0 40px;
    }
    .b27-overview__top {
      grid-template-columns: 1fr;
    }
    .b27-overview__card--hero {
      height: 360px;
    }
  }
  
  @media (max-width: 1023px) {
    .b27-overview__layout {
      padding: 0 24px;
    }
    .b27-overview__bottom {
      grid-template-columns: 1fr 1fr;
    }
    .b27-overview__card--hero {
      height: 280px;
    }
    .b27-overview__card {
      height: 220px;
    }
  }
  
  @media (max-width: 540px) {
    .b27-overview__bottom {
      grid-template-columns: 1fr;
    }
    .b27-overview__card--hero {
      height: 240px;
    }
  }
  
  /* Overview — mobile (Figma node 1:3920) */
  @media (max-width: 767px) {
    .b27-overview {
      padding: 80px 0;
    }
  
    .b27-overview__layout {
      padding: 0 16px;
      gap: 0;
    }
  
    .b27-overview__top {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 48px;
    }
  
    .b27-overview__copy {
      width: 100%;
      max-width: 328px;
      margin: 0 auto;
      text-align: center;
      align-items: center;
      gap: 8px;
      align-self: center;
    }
  
    .b27-overview__copy .b27-kicker {
      margin: 0;
      color: #666666;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
    }
  
    .b27-overview__copy .b27-h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.6px;
      color: #222222;
    }
  
    .b27-overview__copy-leads {
      align-items: stretch;
      text-align: center;
    }
  
    .b27-overview__copy .b27-lead {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #3a3a3a;
      text-align: center;
    }
  
    .b27-overview__bottom {
      display: flex;
      flex-direction: column;
      gap: 48px;
      margin-top: 48px;
    }
  
    .b27-overview__card,
    .b27-overview__card--hero {
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background: transparent;
      overflow: visible;
      border-radius: 0;
    }
  
    .b27-overview__card::after {
      display: none;
    }
  
    .b27-overview__media {
      position: relative;
      inset: auto;
      height: 208px;
      width: 100%;
      flex-shrink: 0;
      border-radius: 20px;
      overflow: hidden;
    }
  
    .b27-overview__card--hero .b27-overview__media {
      background: #f6f6f6;
    }
  
    .b27-overview__card:not(.b27-overview__card--hero) .b27-overview__media {
      background: #f2f2f2;
    }
  
    .b27-overview__card figcaption {
      position: static;
      left: auto;
      bottom: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 0;
      z-index: auto;
    }
  
    .b27-overview__cap-title {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.4px;
      color: #222222;
    }
  
    .b27-overview__cap-title::before {
      height: 14px;
    }
  
    .b27-overview__cap-desc {
      margin-top: 0;
      max-height: none;
      opacity: 0.7;
      overflow: visible;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.4px;
      color: #000000;
      white-space: normal;
    }
  }
  
  /* —— Battery —— */
  .b27-battery {
    padding: 0 20px 100px;
  }
  
  /* Battery panel: locks the original 1880×672 design proportions at ANY
     viewport width via aspect-ratio + container queries.
     All inner px values below are expressed in cqw (1% of panel width),
     so text, gaps, icons, and the image scale together. */
  .b27-battery__panel {
    position: relative;
    width: 100%;
    max-width: 1880px;
    margin: 0 auto;
    aspect-ratio: 1880 / 672;
    border-radius: 20px;
    overflow: visible;
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 26%);
    container-type: inline-size;
  }
  
  .b27-battery__copy {
    position: absolute;
    left: 50%;
    top: 5.532cqw;         /* 104px */
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.851cqw;         /* 16px */
    align-items: center;
    text-align: center;
    max-width: 38.298cqw;  /* 720px */
  }
  
  /* Scope global typography overrides to the battery panel only */
  .b27-battery__panel .b27-kicker {
    font-size: 1.064cqw;         /* 20px */
    letter-spacing: -0.027cqw;
  }
  .b27-battery__panel .b27-h2 {
    font-size: 2.128cqw;         /* 40px */
    letter-spacing: -0.053cqw;
  }
  .b27-battery__panel .b27-lead {
    font-size: 1.064cqw;         /* 20px */
    letter-spacing: -0.027cqw;
  }
  
  .b27-battery__stats {
    position: absolute;
    left: 29.521cqw;       /* 555px */
    top: 18.936cqw;        /* 356px */
    display: flex;
    flex-direction: column;
    gap: 3.564cqw;         /* 67px */
  }
  
  .b27-battery__stat {
    display: flex;
    flex-direction: column;
    gap: 0.213cqw;         /* 4px */
    position: relative;
  }
  
  .b27-battery__stat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.319cqw;         /* 6px */
    font-size: 1.064cqw;   /* 20px */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.027cqw;
    color: #222222;
  }
  
  .b27-battery__stat-label .b27-battery__stat-icon {
    width: 1.064cqw;
    height: 1.064cqw;
    flex-shrink: 0;
    display: block;
    max-width: none;
    object-fit: contain;
  }
  
  .b27-battery__stat-value {
    margin: 0;
    font-size: 2.128cqw;   /* 40px */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.053cqw;
    color: #222222;
  }
  
  .b27-battery__stat-note {
    margin: 0.426cqw 0 0;  /* 8px */
    font-size: 0.851cqw;   /* 16px */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.021cqw;
    color: #222222;
  }
  
  .b27-battery__image {
    position: absolute;
    right: 3.255cqw; 
    top: 11.564cqw;        /* 255px */
    width: 58cqw;          /* 940px */
    height: 34.043cqw;     /* 640px */
    object-fit: cover;
    object-position: left center;
  }
  
  @media (max-width: 1279px) {
    /* Fall back to a vertical stack below the desktop range; drop the
       locked-proportion container so fonts remain legible. */
    .b27-battery__panel {
      aspect-ratio: auto;
      height: auto;
      padding: 80px 32px 60px;
      container-type: normal;
    }
    .b27-battery__panel .b27-kicker,
    .b27-battery__panel .b27-h2,
    .b27-battery__panel .b27-lead,
    .b27-battery__stat-label,
    .b27-battery__stat-value,
    .b27-battery__stat-note {
      font-size: revert;
      letter-spacing: revert;
    }
    .b27-battery__stat-label .b27-battery__stat-icon {
      width: 20px;
      height: 20px;
    }
    .b27-battery__copy {
      position: static;
      transform: none;
      max-width: none;
      margin-bottom: 48px;
      gap: 16px;
    }
    .b27-battery__stats {
      position: static;
      margin-bottom: 40px;
      gap: 32px;
    }
    .b27-battery__stat {
      gap: 4px;
    }
    .b27-battery__stat-label {
      gap: 6px;
    }
    .b27-battery__stat-note {
      margin-top: 8px;
    }
    .b27-battery__image {
      position: static;
      width: 100%;
      height: auto;
      max-width: 720px;
      margin: 0 auto;
      object-fit: contain;
    }
  }
  
  /* Battery — mobile (Figma node 1:3961) */
  @media (max-width: 767px) {
    .b27-battery {
      padding: 0 16px 80px;
      overflow-x: hidden;
    }
  
    .b27-battery__stat-note--desktop-only {
      display: none;
    }
  
    .b27-battery__stat-note--mobile-only {
      display: block;
      margin: 8px 0 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #222222;
    }
  
    .b27-battery__panel {
      min-height: 688px;
      padding: 0;
      background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 26%);
    }
  
    .b27-battery__copy {
      position: relative;
      z-index: 2;
      top: auto;
      left: auto;
      transform: none;
      padding: 80px 16px 0;
      max-width: 328px;
      margin: 0 auto;
      gap: 8px;
    }
  
    .b27-battery__panel .b27-kicker {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #666666;
    }
  
    .b27-battery__panel .b27-h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.6px;
      color: #222222;
    }
  
    .b27-battery__panel .b27-lead {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #3a3a3a;
    }
  
    .b27-battery__stats {
      position: absolute;
      z-index: 2;
      left: 16px;
      top: 288px;
      right: auto;
      margin: 0;
      gap: 48px;
    }
  
    .b27-battery__stat-label {
      gap: 4px;
      font-size: 15px;
      letter-spacing: -0.375px;
    }
  
    .b27-battery__stat-value {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.65px;
    }
  
    .b27-battery__image {
      position: absolute;
      z-index: 1;
      left: -60px;
      right: auto;
      top: 436px;
      width: 618px;
      max-width: 760px;
      height: 390px;
      margin: 0;
      object-fit: cover;
      object-position: 72% center;
    }
  }
  
  /* —— System (All-in-One · 스크롤 핀 3슬라이드)
     외부 컨테이너 300vh(슬라이드당 100vh)로 잡고 __stage 를 sticky 로 고정.
     이미지/타이틀/리드는 stack 된 상태로 opacity 전환. JS 가 .is-active 토글. */
  .b27-system {
    position: relative;
    height: 675vh;
    background: #ffffff;
  }
  
  .b27-system__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  
  .b27-system__inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 910px) minmax(360px, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 114px);
    padding-right: clamp(40px, 10vw, 320px);
  }
  
  .b27-system__card {
    position: relative;
    width: 100%;
    height: 319px;
    background: #fbfbfb;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  /* Image-wrap is now a child of .b27-system__card.
     `right` + `bottom` anchor it 100px inside from the card's right edge,
     with the image's bottom flush with the card's bottom (image spills
     upward above the card, matching the original visual). */
  .b27-system__image-wrap {
    position: absolute;
    right: -40px;
    bottom: 0;
    width: 590px;
    height: 430px;
    pointer-events: none;
  }
  
  .b27-system__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .b27-system__image.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  
  .b27-system__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .b27-system__titles,
  .b27-system__leads {
    position: relative;
    width: 100%;
  }
  
  .b27-system__titles {
    min-height: 50px;
  }
  
  .b27-system__leads {
    min-height: 56px;
  }
  
  .b27-system__title {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1px;
    color: #222222;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .b27-system__title.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  
  .b27-system__lead {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #3a3a3a;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease 0.05s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
  }
  
  .b27-system__lead.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  
  @media (max-width: 1679px) {
    .b27-system__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      padding-right: clamp(24px, 5vw, 80px);
    }
    .b27-system__image-wrap {
      width: clamp(420px, 38vw, 590px);
      height: clamp(320px, 28vw, 430px);
    }
    .b27-system__title {
      font-size: clamp(28px, 2.4vw, 40px);
    }
    .b27-system__lead {
      font-size: clamp(16px, 1.2vw, 20px);
      white-space: normal;
    }
  }
  
  @media (max-width: 1023px) {
    /* All-in-One — Figma 1:3979 모바일 프레임 + PC와 동일한 스크롤 연동 3슬라이드(300vh) */
    .b27-system {
      height: 500vh;
      background: #ffffff;
    }
  
    .b27-system__stage {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 460px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
      padding: 0;
    }
  
    .b27-system__inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      gap: 0;
      padding: 0 16px;
      box-sizing: border-box;
      grid-template-columns: unset;
    }
  
    .b27-system__copy {
      order: -1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      max-width: 328px;
      width: 100%;
      margin: 0 auto;
      padding: 25vh 0 0;
      flex-shrink: 0;
    }
  
    .b27-system__copy .b27-kicker {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #666666;
    }
  
    .b27-system__titles {
      min-height: 64px;
      width: 100%;
    }
  
    .b27-system__title {
      left: 0;
      right: 0;
      width: 100%;
      text-align: center;
      white-space: normal;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.6px;
      color: #222222;
    }
  
    .b27-system__leads {
      min-height: 92px;
      width: 100%;
    }
  
    .b27-system__lead {
      left: 0;
      right: 0;
      width: 100%;
      text-align: center;
      white-space: normal;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #3a3a3a;
    }
  
    .b27-system__card {
      position: relative;
      width: 100%;
      max-width: 344px;
      min-width: 344px;
      height: 160px;
      margin: 64px 0 0;
      margin-left: auto;
      margin-right: auto;
      flex-shrink: 0;
      align-self: flex-start;
    }
  
    .b27-system__image-wrap {
      position: absolute;
      left: 38px;
      top: -79px;
      right: auto;
      bottom: auto;
      width: 328px;
      max-width: calc(100% - 38px);
      height: 239px;
      margin: 0;
      pointer-events: none;
    }
  
    .b27-system__image {
      object-fit: contain;
      object-position: center bottom;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .b27-system {
      height: auto;
    }
    .b27-system__stage {
      position: static;
      height: auto;
      min-height: 0;
      padding: 80px 0;
      overflow: visible;
    }
    .b27-system__image,
    .b27-system__title,
    .b27-system__lead {
      transition: none;
    }
  }
  
  /* —— Product (Figma node 1:3570 — 선불/후불 비교) —— */
  .b27-product {
    padding: 100px 0;
    text-align: center;
  }
  
  .b27-product__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-bottom: 40px;
  }
  
  /* Step 탭 — width 600px, height 64px, radius 16px */
  .b27-product__steps {
    display: inline-flex;
    width: 600px;
    max-width: 100%;
    height: 64px;
    margin: 0 auto 56px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e3e3e3;
  }
  
  .b27-product__step {
    flex: 1 0 0;
    height: 100%;
    padding: 10px;
    border: 0;
    background: #ffffff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.45px;
    color: #222222;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
  
  .b27-product__step.is-active {
    background: #3a3a3a;
    color: #ffffff;
    font-weight: 700;
  }
  
  .b27-product__viewport {
    width: 100%;
    overflow: visible;
  }
  
  .b27-product__track {
    display: grid;
    grid-template-columns: repeat(2, 460px);
    gap: 28px;
    justify-content: center;
  }
  
  .b27-product__grid {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .b27-product__grid.is-active {
    display: flex;
    animation: b27-product-fade 0.35s ease;
  }
  
  .b27-product__grid--install .b27-product__track {
    grid-template-columns: repeat(3, 408px);
  }
  
  .b27-product__pagination {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0 16px;
  }
  
  .b27-product__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e3e3e3;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  
  .b27-product__dot.is-active {
    background: #3a3a3a;
  }
  
  .b27-product__dot:focus-visible {
    outline: 2px solid #3a3a3a;
    outline-offset: 2px;
  }
  
  @keyframes b27-product-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .b27-product__card {
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  
  /* 이미지 영역 — 460×288, 내부 사진은 460→321 폭으로 오버플로우
     Figma: left:80px, top:-55px, width:321, height:481, shadow(5,4,100,.2) */
  .b27-product__card-img {
    position: relative;
    width: 100%;
    height: 288px;
    background: #f5f5f5;
    overflow: hidden;
  }
  
  .b27-product__card-img img {
    position: absolute;
    object-fit: cover;
    pointer-events: none;
  }
  
  .b27-product__card-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-bottom: 1px solid #e3e3e3;
  }
  
  .b27-product__card-title > p:first-child {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #222222;
  }
  
  .b27-product__card-title > p:last-child {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #3a3a3a;
  }
  
  /* 가격 영역 — 20px 40px 28px, 행간 10px */
  .b27-product__card-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 40px 28px;
    text-align: left;
  }
  
  /* 1행 (보조 — 광고 미적용가): 라벨·값 모두 #666 */
  .b27-product__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666666;
    white-space: nowrap;
  }
  
  .b27-product__price .b27-product__price-label {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.45px;
    line-height: 1.4;
    color: inherit;
  }
  
  .b27-product__price .b27-product__price-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
  }
  
  .b27-product__price strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.7px;
    line-height: 1.25;
    color: inherit;
  }
  
  .b27-product__price .unit {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.4;
    color: inherit;
  }
  
  /* 프라이머리 (광고 적용가): 라벨 #ff4c30(Bold), 값 #3a3a3a 36px */
  .b27-product__price--primary .b27-product__price-label {
    color: #ff4c30;
    font-weight: 700;
  }
  
  .b27-product__price--primary .b27-product__price-value {
    color: #3a3a3a;
  }
  
  .b27-product__price--primary strong {
    font-size: 36px;
    letter-spacing: -0.9px;
  }
  
  /* —— Step 2: 설치 형태 카드 (Figma node 1:3611) —— */
  /* 408×546 카드, 이미지 영역 408×401, 구분선 없음 */
  .b27-product__card--install {
    height: 546px;
  }
  
  .b27-product__card-img--install {
    position: relative;
    height: 401px;
    width: 100%;
    background: #ffffff;
    border-bottom: 0;
    overflow: hidden;
  }
  
  .b27-product__card-img--install img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
    left: auto;
    top: auto;
  }
  
  .b27-product__card-title--install {
    padding: 28px 20px 0;
    border-bottom: none;
    gap: 8px;
  }
  
  .b27-product__card-title--install > p:first-child {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.4;
    color: #222222;
  }
  
  .b27-product__card-title--install > p:last-child {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 1.4;
    color: #3a3a3a;
  }
  
  @media (max-width: 1439px) {
    .b27-product__grid--install .b27-product__track {
      grid-template-columns: repeat(3, minmax(0, 360px));
    }
  }
  
  @media (max-width: 1023px) {
    .b27-product__track {
      grid-template-columns: 1fr;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 24px;
    }
    .b27-product__grid--install .b27-product__track {
      grid-template-columns: 1fr;
    }
    .b27-product__card--install {
      height: auto;
    }
    .b27-product__card-img--install {
      height: 320px;
    }
    /* 카드 이미지: 카드 폭에 맞춰 중앙 정렬되도록 재배치 */
    .b27-product__card-img img {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  
  /* Product — 모바일 가로 캐러셀 (Figma 1:3986 결제 / 1:2905 설치) */
  @media (max-width: 767px) {
    .b27-product {
      padding: 80px 0 64px;
    }
  
    .b27-product__head {
      gap: 8px;
      margin-bottom: 24px;
      max-width: 328px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .b27-product__head .b27-kicker {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.375px;
      line-height: 1.4;
      color: #666666;
    }
  
    .b27-product__head .b27-h2 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.6px;
      line-height: 1.25;
      color: #222222;
    }
  
    .b27-product__steps {
      width: 288px;
      max-width: calc(100% - 32px);
      height: 44px;
      margin-bottom: 24px;
      border-radius: 12px;
    }
  
    .b27-product__step {
      font-size: 14px;
      letter-spacing: -0.35px;
      padding: 10px;
    }
  
    .b27-product__step.is-active {
      font-weight: 600;
    }
  
    .b27-product__viewport {
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      width: 100%;
      padding: 0 0 0 16px;
      box-sizing: border-box;
    }
  
    .b27-product__viewport::-webkit-scrollbar {
      display: none;
    }
  
    /* 첫 번째 캐러셀(결제 방식): 화면 기준 왼쪽 16px 마진 */
    .b27-product__grid[data-step="0"] .b27-product__viewport {
      margin-left: 16px;
      width: calc(100% - 16px);
      max-width: calc(100% - 16px);
      padding-left: 0;
    }
    .b27-product__grid[data-step="1"] .b27-product__viewport {
      margin-left: 16px;
      width: calc(100% - 16px);
      max-width: calc(100% - 16px);
      padding-left: 0;
    }
  
    .b27-product__track {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 14px;
      width: max-content;
      max-width: none;
      margin: 0;
      padding: 0 16px 0 0;
      grid-template-columns: unset;
      justify-content: flex-start;
    }
  
    .b27-product__grid--install .b27-product__track {
      grid-template-columns: unset;
    }
  
    .b27-product__grid .b27-product__card,
    .b27-product__grid .b27-product__card--install {
      flex: 0 0 308px;
      width: 308px;
      max-width: 308px;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
  
    .b27-product__pagination {
      display: flex;
    }
  
    .b27-product__card-img {
      height: 208px;
    }
  
    .b27-product__card-img--install {
      height: 323px;
    }
  
    .b27-product__card--install {
      min-height: 440px;
      height: auto;
    }
  
    .b27-product__card-title > p:first-child {
      font-size: 18px;
      letter-spacing: -0.45px;
    }
  
    .b27-product__card-title > p:last-child {
      font-size: 15px;
      letter-spacing: -0.375px;
    }
  
    .b27-product__card-title--install {
      padding: 20px 16px 24px;
      gap: 4px;
    }
  
    .b27-product__card-title--install > p:first-child {
      font-size: 17px;
      letter-spacing: -0.425px;
    }
  
    .b27-product__card-title--install > p:last-child {
      font-size: 15px;
      letter-spacing: -0.375px;
    }
  
    .b27-product__card-prices {
      padding: 16px 20px 24px;
      gap: 4px;
    }
  
    .b27-product__price .b27-product__price-label {
      font-size: 15px;
      letter-spacing: -0.375px;
    }
  
    .b27-product__price--primary .b27-product__price-label {
      font-weight: 500;
    }
  
    .b27-product__price--primary strong {
      font-size: 28px;
      letter-spacing: -0.7px;
    }
  
    .b27-product__price strong {
      font-size: 24px;
      letter-spacing: -0.6px;
    }
  
    .b27-product__price .unit {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.4px;
    }
  }
  
  /* —— FAQ —— */
  .b27-faq {
    padding: 100px 0;
  }
  
  .b27-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 640px;
    gap: 80px;
    margin: 0 auto;
    padding: 0 320px;
  }
  
  @media (max-width: 1679px) {
    .b27-faq__layout {
      padding: 0 80px;
    }
  }
  
  @media (max-width: 1279px) {
    .b27-faq__layout {
      grid-template-columns: 1fr;
      padding: 0 24px;
      gap: 40px;
    }
  }
  
  .b27-faq__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .b27-faq__list {
    display: flex;
    flex-direction: column;
  }
  
  .b27-faq__item {
    border-bottom: 1px solid #e3e3e3;
    padding: 18px 16px;
  }
  
  .b27-faq__item > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #222222;
  }
  
  .b27-faq__item > summary::-webkit-details-marker {
    display: none;
  }
  
  .b27-faq__item > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    transform: rotate(45deg);
    flex-shrink: 0;
    transition: transform 0.25s ease;
    margin-right: 8px;
    margin-top: -4px;
  }
  
  .b27-faq__item[open] > summary {
    color: #ff4c30;
    font-weight: 500;
  }
  
  .b27-faq__item[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  
  .b27-faq__answer {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.45px;
    color: #222222;
  }
  
  .b27-faq__answer p {
    margin: 0 0 4px;
  }
  
  .b27-faq__answer p + p {
    margin-top: 2px;
  }
  
  .b27-faq__answer strong {
    font-weight: 700;
  }
  
  .b27-faq__answer-head {
    display: block;
    font-weight: 700;
    margin-top: 14px;
  }
  
  .b27-faq__answer-head:first-child {
    margin-top: 0;
  }
  
  .b27-faq__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 9.5px 20px;
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    background: #ffffff;
    color: #222222;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    text-decoration: none;
  }
  
  .b27-faq__cta:hover {
    background: #f5f5f5;
    color: #222222;
  }
  
  /* —— Apply form —— */
  /* Apply section — same two-column grid as the branding FAQ
     (.b26-faq .b26-inner + .b26-faq__grid). */
  .b27-apply {
    padding: 0;
  }
  
  .b27-apply .b26-inner {
    max-width: 1200px;
  }
  
  .b27-apply__layout {
    display: grid;
    gap: 40px;
    padding: 48px 0 100px;
  }
  
  @media (min-width: 960px) {
    .b27-apply__layout {
      grid-template-columns: minmax(0, 1fr) 640px;
      align-items: start;
      column-gap: 120px;
      row-gap: 40px;
    }
    .b27-apply__head {
      grid-column: 1;
      grid-row: 1;
    }
    .b27-apply__form {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }
  
  .b27-apply__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .b27-apply__consent {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.35px;
    color: #3a3a3a;
  }
  
  .b27-apply__consent > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 4px 0;
  }
  
  .b27-apply__consent > summary::-webkit-details-marker {
    display: none;
  }
  
  .b27-apply__consent > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #3a3a3a;
    border-bottom: 1.5px solid #3a3a3a;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  
  .b27-apply__consent[open] > summary::after {
    transform: rotate(-135deg);
  }
  
  .b27-apply__consent-body {
    margin-top: 10px;
    max-width: 420px;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
    font-weight: 400;
  }
  
  .b27-apply__consent-body p {
    margin: 0;
  }
  
  .b27-apply__consent-more {
    color: #222222;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: inherit;
  }
  
  .b27-apply__consent--desktop {
    display: block;
  }
  
  .b27-apply__consent--mobile {
    display: none;
  }
  
  .b27-apply__form {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  
  .b27-apply__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .b27-apply__label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.45px;
    color: #222222;
  }
  
  .b27-apply__label em {
    color: #e8442a;
    font-style: normal;
  }
  
  .b27-apply__input {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    background: #ffffff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.45px;
    color: #222222;
    line-height: 1.4;
    transition: border-color 0.2s ease;
  }
  
  .b27-apply__input::placeholder {
    color: #999999;
  }
  
  .b27-apply__input:focus {
    outline: 0;
    border-color: #ff4c30;
  }
  
  .b27-apply__submit {
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 16px;
    background: #ffa496;
    color: #ffffff;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  .b27-apply__submit:not(:disabled) {
    background: #ff4c30;
  }
  
  .b27-apply__submit:disabled {
    background: #ffa496;
    cursor: not-allowed;
  }
  
  .b27-apply__submit:not(:disabled):hover,
  .b27-apply__submit:not(:disabled):focus-visible {
    background: #ff4c30;
  }
  
  /* Apply — 모바일 (Figma node 1:4033) */
  @media (max-width: 767px) {
    .b27-apply__layout {
      padding: 80px 16px 80px;
      gap: 32px;
    }
  
    .b27-apply__head {
      align-items: center;
      text-align: center;
      gap: 8px;
      max-width: 328px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .b27-apply__head .b27-kicker {
      display: none;
    }
  
    .b27-apply__head .b27-h2 {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.6px;
      color: #222222;
    }
  
    .b27-apply__head .b27-lead {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: -0.375px;
      color: #3a3a3a;
    }
  
    .b27-apply__head .b27-lead strong {
      font-weight: 700;
    }
  
    .b27-apply__form {
      max-width: 328px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      gap: 30px;
    }
  
    .b27-apply__field {
      gap: 8px;
    }
  
    .b27-apply__label {
      font-size: 16px;
      letter-spacing: -0.4px;
    }
  
    .b27-apply__input {
      height: 52px;
      padding: 16px;
      border-radius: 12px;
      font-size: 16px;
      letter-spacing: -0.4px;
      box-sizing: border-box;
    }
  
    .b27-apply__input::placeholder {
      color: #666666;
    }
  
    .b27-apply__consent--desktop {
      display: none !important;
    }
  
    .b27-apply__consent--mobile {
      display: block;
      margin-top: 0;
      max-width: 257px;
      align-self: flex-start;
    }
  
    .b27-apply__consent--mobile > summary {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -0.35px;
    }
  
    .b27-apply__consent--mobile .b27-apply__consent-body {
      max-width: none;
      font-size: 14px;
      line-height: 1.4;
      letter-spacing: -0.35px;
      color: #666666;
    }
  
    .b27-apply__consent--mobile .b27-apply__consent-more {
      font-size: 14px;
      color: #222222;
    }
  
    .b27-apply__submit {
      height: 56px;
      border-radius: 12px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.425px;
    }
  }
  
  /* —— Float CTA (오더패드 하단 고정 pill — Figma node 1:2867) ——
     818x78 rounded 28, rgba(0,0,0,0.7) + backdrop-blur 5
     absolute children: 텍스트 left:44 top:16, 폼 left:344 top:50% */
  .b27-float-cta {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 901;
    width: 818px;
    height: 78px;
    max-width: calc(100vw - 32px);
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  
  .b27-float-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(20px);
  }
  
  .b27-float-cta__text {
    position: absolute;
    left: 44px;
    top: 16px;
    margin: 0;
    color: #ffffff;
    font-family: "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.45px;
    white-space: nowrap;
  }
  
  .b27-float-cta__text p {
    margin: 0;
    line-height: 1.25;
  }
  
  .b27-float-cta__form {
    position: absolute;
    left: 344px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  
  .b27-float-cta__input {
    width: 315px;
    height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    font-family: "Pretendard", inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #222222;
  }
  
  .b27-float-cta__input::placeholder {
    color: #666666;
    font-weight: 400;
  }
  
  .b27-float-cta__input:focus {
    outline: 0;
  }
  
  .b27-float-cta__submit {
    height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 12px;
    background: #ff4c30;
    color: #ffffff;
    font-family: "Pretendard", inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.45px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  
  .b27-float-cta__submit:hover {
    background: #ff3a1b;
  }
  
  .b27-float-cta__submit:active {
    transform: translateY(1px);
  }
  
  /* 타블릿: 818px 가 못 들어가면 좌우 여백 축소 + 인풋 유연 */
  @media (max-width: 860px) {
    .b27-float-cta {
      width: auto;
      left: 16px;
      right: 16px;
      transform: none;
      max-width: none;
    }
    .b27-float-cta.is-hidden {
      transform: translateY(20px);
    }
    .b27-float-cta__form {
      position: static;
      transform: none;
      padding: 17px 20px;
      gap: 8px;
    }
    .b27-float-cta__text {
      position: static;
      padding: 16px 20px 0;
    }
    .b27-float-cta__input {
      flex: 1;
      width: auto;
      min-width: 0;
    }
    .b27-float-cta {
      height: auto;
      padding-bottom: 4px;
    }
  }
  
  /* 모바일: 2행으로 스택 */
  @media (max-width: 540px) {
    .b27-float-cta {
      bottom: 12px;
      border-radius: 20px;
    }
    .b27-float-cta__text {
      font-size: 14px;
      letter-spacing: -0.35px;
    }
    .b27-float-cta__text p {
      line-height: 1.3;
    }
    .b27-float-cta__input {
      font-size: 14px;
      padding: 10px 14px;
      height: 40px;
    }
    .b27-float-cta__submit {
      padding: 10px 14px;
      font-size: 14px;
      height: 40px;
    }
  }
  
  /* —— B26 compatibility — 오더패드에선 네이버 float 만 사용, sticky CTA 는 숨김 —— */
  .b27 ~ .b26-sticky-cta,
  body:has(.b27) .b26-sticky-cta {
    display: none;
  }
  
  /* Orderpad page: keep Naver floating at original position */
  .b27 ~ .b26-float-dock,
  body:has(.b27) .b26-float-dock {
    bottom: 116px;
  }
  
  .b27-float-cta-mini {
    display: none;
  }
  
  html.b27-success-open,
  body.b27-success-open {
    overflow: hidden;
    touch-action: none;
  }
  
  .b27-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;
  }
  
  .b27-success-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .b27-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);
  }
  
  .b27-success-modal__title {
    margin: 0;
    color: #222;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    text-align: center;
  }
  
  .b27-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) {
    .b27-success-modal {
      padding: 16px;
    }
  
    .b27-success-modal__panel {
      width: 100%;
      padding: 56px 20px 24px;
      border-radius: 20px;
    }
  
    .b27-success-modal__title {
      font-size: 20px;
    }
  
    .b27-success-modal__confirm {
      margin-top: 32px;
      height: 52px;
      font-size: 18px;
    }
  }
  
  @media (max-width: 768px) {
    .b27-float-cta {
      display: none;
    }
  
    .b27 ~ .b26-float-dock,
    body:has(.b27) .b26-float-dock {
      left: 0;
      right: 0;
      bottom: var(--b26-vv-bottom-offset, 0px);
      transform: none;
      width: 100vw;
      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;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review,
    body:has(.b27) .b26-float-dock .b26-float-review {
      width: 80px;
      height: 52px;
      border-radius: 8px;
      padding: 8px 12px 8px 8px;
      gap: 2px;
      box-shadow: none;
      flex-shrink: 0;
      overflow-x: hidden;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review .b26-float-review__link,
    body:has(.b27) .b26-float-dock .b26-float-review .b26-float-review__link {
      width: 100%;
      justify-content: center;
      gap: 4px;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review .b26-float-review__close,
    body:has(.b27) .b26-float-dock .b26-float-review .b26-float-review__close {
      display: none;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review__text--desktop,
    body:has(.b27) .b26-float-dock .b26-float-review__text--desktop {
      display: none;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review__text--mobile,
    body:has(.b27) .b26-float-dock .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;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review.is-collapsed,
    body:has(.b27) .b26-float-dock .b26-float-review.is-collapsed {
      gap: 2px;
      padding: 8px 12px 8px 8px;
      box-shadow: none;
    }
  
    .b27 ~ .b26-float-dock .b26-float-review.is-collapsed .b26-float-review__text--mobile,
    body:has(.b27) .b26-float-dock .b26-float-review.is-collapsed .b26-float-review__text--mobile {
      max-width: none;
      opacity: 1;
      pointer-events: auto;
    }
  
    .b27-float-cta-mini {
      display: inline-flex;
      height: 52px;
      flex: 1 0 0;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 12px;
      background: #ff4c30;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: -0.425px;
    }
  }
  
  /* 오더패드 전용: 프로모 바 + GNB 가 함께 항상 뷰포트 상단에 붙음
     (브랜딩 데스크톱의 top:-48px 로 탑바만 스크롤 아웃되는 동작 비활성화)
     z-index: 상담 모달(1000) 아래 · 하단 플로팅(902) 위 */
  .b26:has(main.b27) .b26-head {
    position: sticky;
    top: 0;
    z-index: 960;
  }