/* =============================================
   Commission Home Page
   기준폭: 1920px  /  기준높이: 1449px
   반응형: --ch-clip-margin(60px) 남기 전까지
           좌우 클립 → 이후 스케일 축소
   JS(commissionHome.js)가 transform·높이 제어
   ============================================= */

/* ── 변수 ── */
:root {
  --ch-base-w:      1920px;
  --ch-base-h:      1449px;
  --ch-clip-margin: 60px;   /* 클립 → 스케일 전환 시 콘텐츠 최소 여백 (JS 참조) */
  --ch-bg:          #F8F8F8;
  --ch-grad:        linear-gradient(90deg, #9CD5F2 0%, #8E92F3 100%);
  --ch-btn-grad:    linear-gradient(90deg, #8CCBE6 0%, rgba(142, 144, 243, 0.5) 100%);
}


/* ════════════════════════════════════════════
   래퍼 + 페이지 컨테이너
   ════════════════════════════════════════════ */

/* 페이지 배경 — 스케일 축소 시 viewport 하단 빈 공간 채움 */
body { background: var(--ch-bg); }

.commission-page__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* height: JS 제어 */
}

/* 1920×1449 기준 고정 레이아웃 컨테이너
   left: 50%; margin-left: -960px → 뷰포트 중앙 정렬
   transform-origin: top center  → 스케일 시 중앙 기준 */
.commission-page {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  height: 1449px;
  background: var(--ch-bg);
  transform-origin: top center;
}


/* ════════════════════════════════════════════
   장식 요소
   ════════════════════════════════════════════ */

/* ── Commissionpage_leftDeco — 그룹 래퍼 ──
   Figma: x=-139.78, y=330.99, 754.29×750.33
*/
.commission__leftDeco {
  position: absolute;
  left: -139.78px;
  top: 330.99px;
  width: 754.29px;
  height: 750.33px;
  pointer-events: none;
  user-select: none;
}

/* Commissionpage_leftDecoImage
   그라디언트+blur PNG, 그룹 너비 맞춤, 세로 중앙 정렬
   (블러 익스포트로 PNG 높이가 그룹보다 큰 1027px → 중앙 정렬 처리) */
.commission__leftDeco__image {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 754.29px;
  display: block;
  pointer-events: none;
}

/* Commissionpage_leftDeco_cat — 서브 그룹 컨테이너
   left:0, top:0 로 leftDeco 기준 좌표계 유지 */
.commission__leftDeco__cat {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* cat 공통
   PNG에 rotation/blur가 베이크됨 → transform 재적용 없음
   opacity만 Figma 값 적용 */
.commission__leftDeco__cat-img {
  position: absolute;
  display: block;
  opacity: 0.6;
}

/* Commissionpage_leftDeco_cat_01
   Figma: left=297.21px, top=25px, 95.65×93.48px (within leftDeco) */
.commission__leftDeco__cat-img--01 {
  left: 297.21px;
  top: 25px;
  width: 95.65px;
  height: 93.48px;
}

/* Commissionpage_leftDeco_cat_02
   Figma: left=162px, top=48.08px, 95.65×93.48px (within leftDeco) */
.commission__leftDeco__cat-img--02 {
  left: 162px;
  top: 48.08px;
  width: 95.65px;
  height: 93.48px;
}

/* ── 오른쪽 데코 (블러 엘립스) ──
   Figma: x=1615.38, y=810.99, 541.98×539.34
*/
.commission__rightDeco {
  position: absolute;
  left: 1615.38px;
  top: 810.99px;
  width: 541.98px;
  height: 539.34px;
  pointer-events: none;
  user-select: none;
}


/* ════════════════════════════════════════════
   타이틀 태그
   Figma: x=782, y=235.74, 356.48×81.06
   ════════════════════════════════════════════ */

.commission__titleTag {
  position: absolute;
  left: 782px;
  top: 235.74px;
  width: 356.48px;
  height: 81.06px;
  pointer-events: none;
}

.commission__titleTag-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.commission__titleTag-text {
  position: absolute;
  top: 6.46px;
  left: 0;
  right: 28px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2em;
  color: #F8F8F8;
  text-shadow: 0px 0px 4.41px rgba(38, 45, 61, 0.25);
}


/* ════════════════════════════════════════════
   메인 콘텐츠 (선택 카드 컨테이너)
   Figma: x=460.78, y=504, 1012.48×369.16
   border-radius: 86.31px (컨테이너 clip)
   ════════════════════════════════════════════ */

.commission__mainContents {
  position: absolute;
  left: 460.78px;
  top: 504px;
  width: 1012.48px;
  height: 369.16px;
  border-radius: 86.31px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 23.92px;
}

/* ── 카드 공통 ──
   각 카드: 1012.48×172.62px
*/
.commission__mainContent {
  position: relative;
  width: 1012.48px;
  height: 172.62px;
  flex-shrink: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
}

/* 배경 이미지 */
.commission__mainContent-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}


/* ════════════════════════════════════════════
   아티스트 선택 카드 (selectCreator) — 좌측 텍스트
   ════════════════════════════════════════════ */

/* 소문자 한글 ("← 아티스트 선택하여 발주")
   Figma: x=90.44, y=44.24, 250×28, A2Z 300 23.21px #FFFFFF */
.commission__mainContent--creator .commission__mainContent-mainText {
  position: absolute;
  left: 75px;
  top: 45px;
  width: 250px;
  height: 28px;
  font-family: 'A2Z', sans-serif;
  font-weight: 300;
  font-size: 23.21px;
  line-height: 1.2em;
  color: #FFFFFF;
  white-space: nowrap;
  pointer-events: none;
}

/* 대형 그라디언트 영문 ("Select creators")
   Figma: x=47.87, y=71.8, 358×56, A2Z 700 46.42px, grad */
.commission__mainContent--creator .commission__mainContent-subText {
  position: absolute;
  left: 70px;
  top: 72.56px;
  width: 358px;
  padding-bottom: 0.2em; /* background-clip:text 시 descender 클리핑 방지 */
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 46.42px;
  line-height: 1.2em;
  background: var(--ch-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px #fff;
  background-clip: text;
  white-space: nowrap;
  filter: drop-shadow(0px 1.45px 1.45px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* hover 효과 */
.commission__mainContent--creator {
  transition: filter 0.2s ease;
}
.commission__mainContent--creator:hover {
  filter: brightness(1.08);
  cursor: pointer;
}


/* ════════════════════════════════════════════
   회사 소속 카드 (selectCompany) — 우측 텍스트
   ════════════════════════════════════════════ */

/* 소문자 한글 ("회사 소속 전문가에게 발주 →")
   Figma: x=690.2, y=44.24, 279×28, A2Z 300 23.21px #FFFFFF */
.commission__mainContent--company .commission__mainContent-mainText {
  position: absolute;
  left: 658.96px;
  top: 45px;
  width: 279px;
  height: 28px;
  font-family: 'A2Z', sans-serif;
  font-weight: 300;
  font-size: 23.21px;
  line-height: 1.2em;
  color: #FFFFFF;
  white-space: nowrap;
  pointer-events: none;
}

/* 대형 그라디언트 영문 ("Comming soon")
   Figma: x=613.23, y=71.8, 355×56, A2Z 700 46.42px, grad */
.commission__mainContent--company .commission__mainContent-subText {
  position: absolute;
  left: 628px;
  top: 72.56px;
  width: 355px;
  padding-bottom: 0.2em; /* background-clip:text 시 descender 클리핑 방지 */
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 46.42px;
  line-height: 1.2em;
  background: var(--ch-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px #fff;
  background-clip: text;
  white-space: nowrap;
  filter: drop-shadow(0px 1.45px 1.45px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* 미동작 — 포인터 이벤트 없음 */
.commission__mainContent--company {
  cursor: default;
}


/* ════════════════════════════════════════════
   메인 버튼
   Figma: x=796, y=1117, 328.66×161
   세로 flex (버튼 2개 스택)
   ════════════════════════════════════════════ */

.commission__mainButtons {
  position: absolute;
  left: 796px;
  top: 1117px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 버튼 공통
   Figma: padding 15px 80px, radius 89.93px,
          A2Z 700 18px #FFFFFF, grad bg, icon+text row */
.commission__btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px 80px;
  border-radius: 89.93px;
  background: var(--ch-btn-grad);
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2em;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.commission__btn:hover {
  opacity: 0.85;
}

/* 아이콘 크기 */
.commission__btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.commission__btn-icon--apply {
  height: 21px;
}


/* ════════════════════════════════════════════
   360px 이하: 최소 고정 + 좌우 잘림
   ════════════════════════════════════════════ */

@media (max-width: 360px) {
  .commission-page__wrapper {
    min-width: 360px;
    overflow-x: hidden;
  }
}