:root {
  --commerce-seam: 1px;
  --commerce-surface: #e7e6e2;
}

html,
body.cases-commerce {
  background: var(--commerce-surface);
}

body.cases-commerce {
  overflow-x: hidden;
}

.commerce-wall {
  width: 100%;
  background: #d8d7d3;
}

.commerce-band {
  display: grid;
  width: 100%;
  gap: var(--commerce-seam);
  background: #d8d7d3;
}

.commerce-band--trio {
  height: clamp(26rem, 29vw, 54rem);
}

.commerce-band--trio-a { grid-template-columns: 36fr 34fr 30fr; }
.commerce-band--trio-b { grid-template-columns: 30fr 38fr 32fr; }
.commerce-band--trio-c { grid-template-columns: 37fr 28fr 35fr; }
.commerce-band--trio-d { grid-template-columns: 28fr 34fr 38fr; }

.commerce-band--quartet {
  height: clamp(20rem, 22vw, 42rem);
  grid-template-columns: repeat(4, 1fr);
}

.commerce-band--quartet-b { height: clamp(21rem, 24vw, 45rem); }
.commerce-band--quartet-c { height: clamp(20rem, 23vw, 43rem); }

.commerce-video-band {
  --video-parallax-scale: 1.18;
  --video-parallax-shift: 0px;
  position: relative;
  width: 100%;
  height: clamp(36rem, 56.25vw, 80rem);
  overflow: hidden;
  background: #030303;
}

.commerce-video-band--wide {
  height: clamp(24rem, 40.52vw, 64rem);
}

.commerce-video-band video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transform:
    translate3d(0, var(--video-parallax-shift), 0)
    scale(var(--video-parallax-scale));
  transform-origin: center;
  will-change: transform;
}

.commerce-video-toggle {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.commerce-video-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

.commerce-video-band::after {
  position: absolute;
  z-index: 2;
  top: 1.5rem;
  right: var(--header-gutter);
  padding: 0.65rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px;
  background: rgb(10 10 10 / 46%);
  color: rgb(255 255 255 / 78%);
  content: "클릭해 일시정지";
  font-size: 0.6rem;
  font-weight: 680;
  letter-spacing: 0.05em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.commerce-video-band.is-user-paused::after {
  content: "일시정지 · 다시 클릭해 재생";
  color: #fff;
}

.commerce-video-band > p {
  position: absolute;
  z-index: 2;
  bottom: 1.5rem;
  left: var(--header-gutter);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px;
  background: rgb(10 10 10 / 46%);
  color: rgb(255 255 255 / 78%);
  font-size: 0.65rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.commerce-video-band > p span {
  color: #fff;
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.capability-statement {
  position: relative;
  display: grid;
  min-height: clamp(42rem, 66vh, 72rem);
  grid-template-columns: 1fr;
  place-content: center;
  place-items: center;
  gap: 2.5rem;
  padding: clamp(6rem, 10vh, 10rem) var(--header-gutter);
  background: #e9e8e4;
  color: #111;
  text-align: center;
}

.capability-statement__eyebrow {
  position: absolute;
  top: 2.2rem;
  right: var(--header-gutter);
  left: var(--header-gutter);
  margin: 0;
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.13em;
  text-align: center;
}

.capability-statement h1 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(3.2rem, 5.2vw, 6.8rem);
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1.04;
  text-wrap: balance;
}

.capability-copy,
.capability-copy > span { display: block; }

.capability-copy--mobile { display: none; }

.capability-statement__note {
  position: absolute;
  right: var(--header-gutter);
  bottom: 2.2rem;
  left: var(--header-gutter);
  margin: 0;
  color: rgb(17 17 17 / 68%);
  font-size: 0.7rem;
  text-align: center;
}

.cases-cta {
  display: grid;
  min-height: clamp(42rem, 72vh, 76rem);
  place-content: center;
  place-items: center;
  padding: 6rem var(--header-gutter);
  background: #111;
  color: #fff;
  text-align: center;
}

.cases-cta > p {
  margin: 0 0 1.8rem;
  color: rgb(255 255 255 / 48%);
  font-size: 0.62rem;
  font-weight: 760;
  letter-spacing: 0.14em;
}

.cases-cta h2 {
  margin: 0;
  font-size: clamp(3.3rem, 5.7vw, 7.25rem);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.cases-mobile-break { display: none; }

.cases-cta a {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 0 1.25rem 0 1.4rem;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 0.78rem;
  font-weight: 720;
  transition: transform 260ms ease, background-color 260ms ease;
}

.cases-cta a:hover,
.cases-cta a:focus-visible {
  background: #e7e6e2;
  transform: translateY(-2px);
}

.cases-cta a span { font-size: 1rem; }

.commerce-tile {
  --image-shift: 0px;
  --image-scale: 1.02;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #ecebe7;
  outline: none;
  isolation: isolate;
}

.commerce-tile::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgb(17 17 17 / 2%), transparent 24%, transparent 76%, rgb(17 17 17 / 3%));
  content: "";
  pointer-events: none;
}

.commerce-tile::before {
  position: absolute;
  z-index: 3;
  bottom: 1rem;
  left: 1rem;
  padding: 0.56rem 0.7rem;
  border: 1px solid rgb(17 17 17 / 8%);
  border-radius: 999px;
  background: rgb(247 247 244 / 74%);
  color: rgb(17 17 17 / 72%);
  content: attr(data-case-label);
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.45rem);
  transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.commerce-tile img {
  position: absolute;
  z-index: 1;
  top: -12%;
  left: 0;
  display: block;
  width: 100%;
  height: 124%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--image-shift), 0);
  scale: var(--image-scale);
  transition: scale 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
  will-change: transform;
}

.commerce-tile:hover {
  --image-scale: 1.035;
  z-index: 2;
}

.commerce-tile:hover::before {
  opacity: 1;
  transform: translateY(0);
}

.has-reveal [data-reveal-band]:not(.commerce-band) {
  clip-path: inset(0 0 7% 0);
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 620ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.has-reveal [data-reveal-band]:not(.commerce-band).is-revealed {
  clip-path: inset(0);
  opacity: 1;
  transform: translateY(0);
}

.commerce-tile--wide img {
  object-position: center 48%;
}

.commerce-caption,
.commerce-index {
  position: fixed;
  z-index: 90;
  bottom: 1.35rem;
  margin: 0;
  border: 1px solid rgb(17 17 17 / 8%);
  border-radius: 999px;
  background: rgb(247 247 244 / 74%);
  color: rgb(17 17 17 / 62%);
  font-size: 0.58rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.commerce-caption {
  left: var(--header-gutter);
  padding: 0.72rem 0.88rem;
}

.commerce-index {
  right: var(--header-gutter);
  display: grid;
  min-width: 8rem;
  grid-template-columns: 1.4rem 1fr 1.4rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.commerce-index i {
  height: 1px;
  background: rgb(17 17 17 / 22%);
}

@media (max-width: 48rem) {
  .commerce-band--trio,
  .commerce-band--quartet {
    display: block;
    height: auto;
  }

  .commerce-band > .commerce-tile {
    width: 100%;
    height: 68vh;
  }

  .commerce-tile img {
    top: -9%;
    height: 118%;
  }

  .commerce-caption { display: none; }
  .commerce-video-band {
    --video-parallax-scale: 1.12;
    height: 70vh;
  }

  .capability-statement {
    display: block;
    min-height: 80vh;
    padding-top: 9rem;
  }

  .capability-statement h1 {
    width: 100%;
    font-size: clamp(1.75rem, 8.65vw, 3.2rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
  }

  .capability-copy--desktop { display: none; }
  .capability-copy--mobile { display: block; }

  .capability-statement__note {
    right: var(--header-gutter);
    bottom: 6rem;
    left: var(--header-gutter);
    line-height: 1.5;
  }

  .cases-cta h2 {
    font-size: clamp(2.15rem, 9vw, 4.2rem);
    letter-spacing: -0.045em;
    line-height: 1.04;
  }
  .cases-mobile-break { display: initial; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-video-band video {
    transform: none;
    will-change: auto;
  }

  .has-reveal [data-reveal-band] {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .commerce-tile img {
    transform: none;
    scale: 1.02;
    transition: none;
  }
}