/* §34-5 플랫폼 이름 벽(.hb-wall · 11-05 사장님 "쇼피파이 통으로 · 모션 똑같이") — 그쪽 '앱으로 모든 것을 맞춤화하세요' 구간 결
   그쪽 실측(1440): 바탕 #000a1e(남색) · 제목 56/330/60.48(−0.03em) · 설명 16 회색 · 벽 = 높이 457 띠가 240초에 한 바퀴 옆으로(scroll-x · translate(−100%) → 0)
   우리 벽 = 플랫폼 이름표(글자만 · 로고 0) 일곱 줄 · 줄마다 두 벌 이어 붙여 끊김 없이 · 양 끝 흐림 · 화면 밖·모션 줄이기 = 멈춤 */
.hb.hb-wall { position: relative; padding: 120px 0 128px; background: radial-gradient(70% 60% at 70% 100%, rgba(30, 52, 110, .45), rgba(30, 52, 110, 0) 70%), #000a1e; color: #fff; overflow: hidden; }
.wal-wrap { width: min(1260px, calc(100% - 2 * var(--am-gutter, 40px))); margin: 0 auto; }
.wal-t { max-width: 640px; margin: 0; text-wrap: balance; font-family: var(--font); font-size: 56px; font-weight: 330; line-height: 1.08; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.wal-p { max-width: 560px; margin: 24px 0 0; font-size: 16px; font-weight: 420; line-height: 24px; color: rgba(214, 222, 240, .66); text-wrap: pretty; }
.wal-wall { position: relative; margin-top: 64px; height: 450px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wal-rows { display: flex; flex-direction: column; gap: 12px; width: max-content; }
.wal-row { display: flex; gap: 12px; width: max-content; padding-right: 12px; margin-left: calc(var(--off, 0) * 1px); }
.wal-row > span { flex: none; display: grid; place-items: center; height: 54px; padding: 0 20px; border-radius: 14px; border: 1px solid rgba(190, 210, 255, .1); background: var(--bg, linear-gradient(160deg, #0f1a33, #0a1226)); font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: rgba(226, 234, 255, .82); white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .7); }
.wal-row > span.hi { border-color: rgba(220, 232, 255, .5); color: #fff; background: linear-gradient(160deg, #1d2d55, #121d3b); }
.wal-row > span.us { border-color: rgba(255, 196, 166, .55); background: linear-gradient(160deg, #ff7a3d, #e0531b); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  html.anim .hb-wall .wal-row { animation: wal-x 240s linear infinite; }
  html.anim .hb-wall:not(.is-vis) .wal-row { animation-play-state: paused; }
}
@keyframes wal-x { from { transform: translateX(-25%); } to { transform: translateX(0); } }
@media (max-width: 1180px) { .wal-t { font-size: 48px; } }
@media (max-width: 1023px) { .hb.hb-wall { padding: 96px 0 96px; } .wal-t { font-size: 44px; } }
@media (max-width: 767px) {
  .hb.hb-wall { padding: 72px 0 72px; }
  .wal-wrap { width: calc(100% - 2 * var(--am-gutter, 12px)); }
  .wal-t { font-size: 32px; line-height: 1.12; letter-spacing: -.02em; }
  .wal-p { margin-top: 16px; font-size: 14px; line-height: 20px; }
  .wal-wall { margin-top: 40px; height: 280px; }
  .wal-rows, .wal-row { gap: 8px; }
  .wal-row { padding-right: 8px; }
  .wal-row > span { height: 40px; padding: 0 14px; border-radius: 11px; font-size: 12px; }
}