/* =============================================
   Commission Detail Page
   기준폭: 1920px  /  페이지 높이: 2582px
   반응형: JS(commissionDetail.js) 가 개별 요소 스케일 제어
   ============================================= */

/* ── 변수 ── */
:root {
  --cd-base-w: 1920px;
  --cd-page-h: 2582px;
  --cd-min-margin: 60px; /* JS 의 MIN_MARGIN 과 동일 값 */
  --cd-bg: #f8f8f8;
  --cd-grad: linear-gradient(90deg, #9cd5f2 0%, #8e92f3 100%);
  --cd-btn-grad: linear-gradient(
    90deg,
    #8ccbe6 0%,
    rgba(142, 144, 243, 0.5) 100%
  );
  --cd-back-grad: linear-gradient(
    90deg,
    rgba(140, 203, 231, 1) 0%,
    rgba(177, 179, 244, 1) 83%
  );
  --cd-filter-active: var(--cd-btn-grad);
  --cd-filter-border: #acacac;
}

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

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

.cd-page__wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: var(--cd-page-h); /* JS 가 덮어씀 */
  margin-bottom: 0px;
}

.cd-page {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  min-height: var(--cd-page-h);
  background: var(--cd-bg);
  transform-origin: top center;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_commission_tag
   Figma: x=782, y=235.74, 356.48×81.06
   ════════════════════════════════════════════ */

.cd-tag {
  position: absolute;
  left: 782px;
  top: 235.74px;
  width: 356.48px;
  height: 81.06px;
  overflow: hidden;
  transform-origin: top center;
  pointer-events: none;
}

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

.cd-tag__text {
  position: absolute;
  top: 10px;
  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);
}

/* ════════════════════════════════════════════
   CommissionDetailpage_leftDeco
   Figma: x=-173.95, y=425.64, 566.64×564.01
   ════════════════════════════════════════════ */

.cd-left-deco {
  position: absolute;
  left: -173.95px;
  top: 425.64px;
  width: 566.64px;
  height: 564.01px;
  pointer-events: none;
  user-select: none;
}

/* CommissionDetailpage_leftDecoImage */
.cd-left-deco__image {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 566.64px;
  display: block;
  pointer-events: none;
}

/* CommissionDetailpage_leftDeco_cat 서브 그룹 */
.cd-left-deco__cat {
  position: absolute;
  top: 0;
  left: 110px;
  width: 100%;
  height: 100%;
}

/* cat 공통: PNG 에 rotation/blur 베이크됨 */
.cd-left-deco__cat-img {
  position: absolute;
  display: block;
  opacity: 0.6;
}

/* CommissionDetailpage_leftDeco_cat_01
   commissionHome 비율(0.751) 적용 추정치 — 프리뷰에서 natural 크기 확인 후 조정 */
.cd-left-deco__cat-img--01 {
  left: 223px;
  top: 80px;
  width: 72px;
  height: 70px;
}

/* CommissionDetailpage_leftDeco_cat_02 */
.cd-left-deco__cat-img--02 {
  left: 122px;
  top: 225px;
  width: 72px;
  height: 70px;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_rightDecoImage
   Figma: x=1417.93, y=1856.75, 628.58×625.94
   ════════════════════════════════════════════ */

.cd-right-deco {
  position: absolute;
  left: 1417.93px;
  top: 1556.75px;
  width: 628.58px;
  height: 625.94px;
  pointer-events: none;
  user-select: none;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainContent
   Figma: centered, top=407, width=1339
   mainContent left = (1920-1339)/2 = 290.5
   ════════════════════════════════════════════ */

.cd-main-content {
  position: absolute;
  left: 290.5px;
  top: 407px;
  width: 1339px;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainContent_filter
   Figma: x=0(rel), y=0, 1261.33×38.67
   ════════════════════════════════════════════ */

.cd-filter {
  /* mainContent(left=290.5) 내부에서 페이지 중앙(960px) 기준 정렬
     (1920 - 1200) / 2 - 290.5 = 69.5px */

  position: absolute;
  left: 69.5px;
  top: 0;
  width: 1200px;
  transform-origin: top center;
}

.cd-filter__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 75px;
  flex-wrap: nowrap;
}

/* 필터 버튼 공통 — 비선택: 테두리 없음 + 외부 그림자 */
.cd-filter__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 25px;
  border-radius: 100px;
  font-family: "A2Z", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2em;
  color: #ACACAC;
  background: transparent;
  border: 2.5px solid transparent;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, box-shadow 0.2s;
}

.cd-filter__btn:hover:not(.cd-filter__btn--active) {
  color: #313131;
}

/* 활성 필터 버튼 — 그라디언트 테두리 + 흰 배경 + bold */
.cd-filter__btn--active {
  background:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #8ccbe6 0%, #8e90f3 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 2.5px solid transparent;
  box-shadow: none;
  color: #313131;
  font-weight: 700;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainContent_search
   Figma: x=1039(rel), y=8(rel), w=300
   ════════════════════════════════════════════ */

.cd-search {
  position: absolute;
  left: 205.5px;
  top: 94.67px;
  width: 300px;
  height: 35px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1.5px solid #dcdcdc;
  border-radius: 100px;
  box-sizing: border-box;
}

.cd-search__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.cd-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: "A2Z", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #313131;
  min-width: 0;
}

.cd-search__input::placeholder {
  color: #878787;
}

.cd-search__clear {
  display: none; /* 검색어 있을 때 JS 가 보여줌 */
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: #acacac;
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.cd-search__clear:hover {
  background: #878787;
}

.cd-search__clear--visible {
  display: flex;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainContent_itemViewPoint
   Figma: x=0(rel), y=142(rel)
   2열 그리드, 아이템 453.75×253px, gap 22px
   ════════════════════════════════════════════ */

.cd-iv-wrap {
  position: absolute;
  top: 142px;
  left: 0;
  width: 100%;
  transform-origin: top center;
}

.cd-item-viewport {
  display: grid;
  grid-template-columns: repeat(2, 453.75px);
  gap: 22px;
  margin: 0 auto;
  width: fit-content;
}

/* ════════════════════════════════════════════
   아이템 카드 (JS 생성)
   Figma: 453.75×253px, radius 5.936px
   ════════════════════════════════════════════ */

.cd-item {
  position: relative;
  width: 453.75px;
  height: 253px;
  border-radius: 5.936px;
  background: linear-gradient(
    129deg,
    rgba(239, 246, 255, 1) 20%,
    rgba(236, 215, 255, 1) 96%
  );
  box-shadow: 0px 0px 2.899px 0px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  flex-shrink: 0;
}

/* ── 아이템 내용 영역 ── */
.cd-item__content {
  position: absolute;
  inset: 0;
}

/* ── 미리보기 뷰포트
   Figma: x=2.17, y=2.17, 449.36×159.45, radius top 5.027 ── */
.cd-item__preview {
  position: absolute;
  left: 2.17px;
  top: 2.17px;
  width: 449.36px;
  height: 159.45px;
  border-radius: 5.027px 5.027px 0 0;
  overflow: hidden;
  background: #dcdcdc;
}

.cd-item__preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ── 좌우 화살표 (프리뷰 내)
   Figma: 화살표 컨테이너 x=21.18,y=68 (카드기준) 411.5×27.5 ── */
.cd-item__arrow {
  position: absolute;
  top: calc(68px - 2.17px); /* 카드 y 68 - 프리뷰 오프셋 2.17 */
  width: 27.5px;
  height: 27.5px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  z-index: 2;
}

.cd-item__arrow:hover {
  opacity: 1;
}

.cd-item__arrow--left {
  left: calc(21.18px - 2.17px);
}
.cd-item__arrow--right {
  right: calc(21.18px - 2.17px);
}

.cd-item__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── 구분선 (decoLine) ── */
.cd-item__deco-line {
  position: absolute;
  left: 2.17px;
  top: 165.55px;
  width: 449.36px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ── 크리에이터 아이콘
   Figma: left=12, bottom=10, 90×87 ── */
.cd-item__creator-icon {
  position: absolute;
  left: 12px;
  bottom: 10px;
  width: 90px;
  height: 90px;
  border-radius: 44.04px;
  /*border: 2px solid #ffffff;*/
  background: #ffffff;
  object-fit: fill;
  display: block;
  z-index: 1;
}

/* ── 크리에이터 이름
   Figma: left=114, bottom=50, 222×24, A2Z 500 20px ── */
.cd-item__creator-name {
  position: absolute;
  left: 114px;
  bottom: 50px;
  width: 222px;
  font-family: "A2Z", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: #313131;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 플랫폼 아이콘 그룹
   Figma: right=11.75, bottom=47, 72×31 ── */
.cd-item__platforms {
  position: absolute;
  right: 11.75px;
  bottom: 47px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* 플랫폼 링크 래퍼 */
.cd-item__platform-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

/* 플랫폼 아이콘 개별
   Figma: 31×31 circle ── */
.cd-item__platform-icon {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── 태그 뷰포트
   Figma: right=11.75, bottom=17, 328×20 ── */
.cd-item__tags {
  position: absolute;
  right: 11.75px;
  bottom: 17px;
  width: 328px;
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}

/* ── 태그 공통 베이스 ── */
.cd-item__tag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
  height: 20px;
  border-radius: 50px;
  flex-shrink: 0;
  font-family: "A2Z", sans-serif;
  font-weight: 600;
  font-size: 9px;
  line-height: 11px;
  color: #ffffff;
  white-space: nowrap;
}

/* ── 태그 5종 ── */
.cd-item__tag--characterArt  { background: linear-gradient(90deg, #E68CD0 0%, #F38E90 100%); }
.cd-item__tag--live2DArt     { background: linear-gradient(90deg, #C1D97E 0%, #6FD99B 100%); }
.cd-item__tag--spineAnime    { background: linear-gradient(90deg, #8CB0E6 0%, #BC8EF3 100%); }
.cd-item__tag--live2DRigging { background: linear-gradient(90deg, #8CE6CD 0%, #8EBAF3 100%); }
.cd-item__tag--backgroundArt { background: linear-gradient(90deg, #E6AE8C 0%, #F3DB8E 100%); }

/* ── 빈 슬롯 상태 (commissionDetailpage_mainContent_item_empty)
   아이템 데이터 없을 때 표시 ── */
.cd-item__empty {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    129deg,
    rgba(239, 246, 255, 0.4) 20%,
    rgba(236, 215, 255, 0.4) 96%
  );
  border-radius: 5.936px;
}

/* 빈 슬롯 활성화 */
.cd-item--empty .cd-item__content {
  display: none;
}

.cd-item--empty .cd-item__empty {
  display: block;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainContent_page (페이지네이션)
   Figma: x=349(rel), y=1803(rel), flex row, gap 30.484px
   ════════════════════════════════════════════ */

.cd-pagination {
  position: absolute;
  top: 1803px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30.484px;
}

.cd-pagination__btn {
  font-family: "A2Z", sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: opacity 0.15s;
}

/* 활성 페이지 버튼 */
.cd-pagination__btn--active {
  font-weight: 700;
  color: #272727;
  cursor: default;
}

/* 비활성 페이지 버튼 */
.cd-pagination__btn--inactive {
  font-weight: 300;
  color: #acacac;
}

.cd-pagination__btn--inactive:hover {
  color: #272727;
  opacity: 0.7;
}

/* 점 구분자 */
.cd-pagination__dot {
  font-family: "A2Z", sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #acacac;
  user-select: none;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_mainButtons
   Figma: x=796, y=2352, 328.66×161
   ════════════════════════════════════════════ */

.cd-main-btns {
  position: absolute;
  left: 796px;
  top: 2352px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform-origin: top center;
}

/* 버튼 공통 */
.cd-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px 80px;
  border-radius: 89.93px;
  background: var(--cd-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;
}

.cd-btn:hover {
  opacity: 0.85;
}

.cd-btn__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.cd-btn__icon--apply {
  height: 21px;
}

/* ════════════════════════════════════════════
   CommissionDetailpage_backSpaceButton
   Figma: x=100, y=2352
   ════════════════════════════════════════════ */

.cd-back-btn {
  position: absolute;
  left: 100px;
  top: 2352px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  /*border-radius: 100px;*/
  /*background: var(--cd-back-grad);*/

  background:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #8ccbe6 0%, #8e90f3 100%);

  background-origin: border-box;
  background-clip: padding-box, border-box;

  border: 1.6px solid transparent; /* 테두리 두께 여기서 조정 */
  border-radius: 28.19px;

  box-shadow: 0px 0px 3.795px 0px rgba(64, 97, 180, 0.25);
  font-family: "A2Z", sans-serif;
  font-weight: 700;
  font-size: 14.4px;
  line-height: 1.2em;
  color: #313131;
  text-decoration: none;
  white-space: nowrap;
  transform-origin: top center;
  transition: opacity 0.2s;
}

.cd-back-btn:hover {
  opacity: 0.85;
}

/* ════════════════════════════════════════════
   360px 이하
   ════════════════════════════════════════════ */

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