/* ========== COMMISSION SECTION ========== */
.commission {
  position: relative;
  padding: 80px 0 240px;
  background: var(--bg-page);
  overflow: hidden;
}

/* 배경 패널 이미지 (work-bg.png)
   work-bg: 3452×861px, 노치: x=1557-1788 (232px), y=0-62 (62px)
   inner 기준 절대 위치 — scrollbar vw 오차 없음:
   - 표시 높이 = 50vw
   - 표시 너비 = 50vw × (3452/861) ≈ 200.46vw
   - 노치 left (표시) = 50vw × (1557/861) ≈ 90.42vw
   - 탭1 left = inner padding-left = 32px
   - work-bg left = 탭1_left − 노치_left = 32px − 90.42vw */
.commission__work-bg {
  position: absolute;
  top: 0;
  left: calc(32px - 90.42vw);
  height: 50vw;
  width: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

/* 내부 컨테이너 */
.commission__inner {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  height: 50vw;   /* work-bg 높이와 동일 → CTA 절대 위치 기준 */
}

/* ── 탭 행 ── */
.commission__tabs {
  display: flex;
  gap: 0;
  justify-content: center;   /* 탭 중앙 정렬 */
  height: 3.60vw;   /* 50vw × (62/861) */
  margin-bottom: 0;
}

.commission__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 13.47vw;   /* 50vw × (232/861) */
  height: 3.60vw;
  cursor: default;
  flex-shrink: 0;
  z-index: 1;
}

/* 비활성 탭 배경 이미지 */
.commission__tab__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.commission__tab__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  color: #AAAACC;
  white-space: nowrap;
}

.commission__tab__paw {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* 활성 탭: 투명 (work-bg 노치가 시각 제공) */
.commission__tab--active {
  background: transparent;
}

.commission__tab--active .commission__tab__label {
  color: var(--c-purple);
  font-weight: 700;
}

/* ── 패널 바디 (Items.png) ── */
.commission__items-wrap {
  position: relative;
  top: 2vw;
  z-index: 1;
  height: calc(50vw - 15.60vw);   /* 패널 전체 − 탭 높이 */
  display: flex;
  justify-content: center;   /* Items.png 가운데 정렬 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(136, 147, 242, 0.35) transparent;
}

.commission__items-wrap::-webkit-scrollbar {
  height: 4px;
}

.commission__items-wrap::-webkit-scrollbar-thumb {
  background: rgba(136, 147, 242, 0.35);
  border-radius: 2px;
}

.commission__items {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

/* ── CTA 버튼: work-bg 하단 여백 중앙 ──
   items-wrap 하단 = 3.60vw(탭) + 2vw(top오프셋) + 34.4vw(높이) = 40vw
   work-bg 하단 = 50vw  →  여백 = 10vw
   버튼 중앙 = 40vw + 5vw - 22px(버튼높이/2) = 45vw - 22px */
.commission__cta {
  position: absolute;
  top: calc(45vw - 22px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.commission-intro-btn {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 200px;
  cursor: pointer;
  background: none;
  border: none;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.commission-intro-btn:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}

.commission-intro-btn__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.commission-intro-btn__text {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-light);
  white-space: nowrap;
}

/* ── 발자국 장식 ── */
.commission__paw {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}

.commission__paw--tr1 {
  top: 20px;
  right: 60px;
  width: 36px;
  transform: rotate(15deg);
}

.commission__paw--tr2 {
  top: 58px;
  right: 104px;
  width: 26px;
  transform: rotate(-10deg);
}

.commission__paw--bl1 {
  bottom: 30px;
  left: 60px;
  width: 32px;
  transform: rotate(-15deg);
}

.commission__paw--bl2 {
  bottom: 68px;
  left: 100px;
  width: 22px;
  transform: rotate(10deg);
}