/* =============================================
   Group_Homepage_works
   기준폭: 1920px  /  기준높이: 1388.11px
   스케일: max(0.8, vw/1920) — 20% 이상 축소 없음
   ============================================= */

:root {
  --works-base-w:   1920px;
  --works-base-h:   1388.11px;
  --works-panel-bg: #CCCEF8;
  --works-panel-bd: #989CE4;
  --works-tab-active-color:   #FFFFFF;
  --works-tab-inactive-color: #AAB0CA;
}

/* ── 섹션 래퍼 ── */
.works {
  position: relative;
  width: 100%;
  margin-top: 202px;
  overflow: hidden;
  background: #F8F8F8;
  height: var(--works-base-h); /* JS가 scale에 맞춰 덮어씀 */
}

/* ── 1920px 기준 내부 컨테이너 ── */
.works__inner {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: var(--works-base-w);
  height: var(--works-base-h);
  transform-origin: top center;
}

/* ── 발자국 장식 ── */
.works__deco-upper {
  position: absolute;
  left: 1179px;
  top: 0;
  width: 237.65px;
  height: 196.23px;
  pointer-events: none;
}

.works__deco-lower {
  position: absolute;
  left: 97px;
  top: 1015px;
  width: 251.58px;
  height: 373.11px;
  pointer-events: none;
}

/* ── Works 태그 ── */
.works__tag {
  position: absolute;
  top: 98px;
  left: 50%;
  transform: translateX(-50%);
  width: 299.46px;
  height: 79.9px;
  pointer-events: none;
}

.works__tag-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.works__tag-text {
  position: absolute;
  top: 15px;
  left: 0;
  right: 22px;
  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);
}

/* ── 패널 전체 영역 래퍼 (contentsGroup) ──
   Figma: y=228.33, height=767.9
*/
.works__panel-area {
  position: absolute;
  top: 228.33px;
  left: 0px;
  width: 1920px;
  height: 767.9px;
}

/* ── 메인 패널 박스 (Homepage_works_content_tab_back) ──
   Figma: y=74.56 in backImagesGroup, height=693.34
   탭 하단(75.2) ≈ 패널 상단(74.56) → 맞닿음
*/
.works__panel {
  position: absolute;
  top: 74.56px;
  left: -25px;
  width: 1970px;
  height: 693.34px;
  background: var(--works-panel-bg);
  border: 1.86px solid var(--works-panel-bd);
  border-radius: 27.97px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
}

/* ── selectDeco ── */
.works__select-deco {
  position: absolute;
  top: 0;
  left: 51.1%;
  margin-left: -465.13px;
  width: 43.88px;
  height: 44.31px;
  pointer-events: none;
  z-index: 3;
}

/* =============================================
   탭 — 이미지 기반
   Figma 좌표계: panel-area(=backImagesGroup) 기준
   selectBack(panel) = top: 17.4px within panel-area
   ============================================= */

/* ── 선택된 탭: Illustration ──
   Figma: 그룹 y=0 in backImagesGroup, size 220.13×82.2
*/
.works__tab-illust {
  position: absolute;
  left: 517.31px;
  top: 0;
  width: 220.13px;
  height: 82.2px;
  z-index: 2;
}

/* tab_back: 그룹 내 y=17.4 */
.works__tab-illust-back {
  position: absolute;
  left: 3.85px;
  top: 17.4px;
  width: 216.29px;
  height: 57.8px;
  pointer-events: none;
}

/* outlineHider: 그룹 내 y=24.4 (tab_back+7px) */
.works__tab-illust-hider {
  position: absolute;
  left: 3.85px;
  top: 24.4px;
  width: 216.29px;
  pointer-events: none;
  z-index: 1;
}

/* 탭 텍스트: tab_back 영역에 중앙 정렬 */
.works__tab-illust-text {
  position: absolute;
  left: 3.85px;
  top: 17.4px;
  width: 216.29px;
  height: 57.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: var(--works-tab-active-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}

/* ── 비선택 탭 공통 ──
   Figma: y=17.4 in backImagesGroup
*/
.works__tab-normal {
  position: absolute;
  top: 17.4px;
  width: 216.29px;
  height: 57.8px;
  z-index: 0;
}

.works__tab--cutscene { left: 749.56px; }
.works__tab--live2d   { left: 977.97px; }
.works__tab--spine    { left: 1206.37px; }

.works__tab-normal-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.works__tab-normal-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2em;
  letter-spacing: -0.05em;
  color: var(--works-tab-inactive-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  z-index: 1;
}

/* ── 캐러셀 뷰포트 ──
   Figma: y=135.86 in contents → 패널(74.56) 기준 상대값 61.3px
*/
.works__carousel-wrap {
  position: absolute;
  top: 61.3px;
  left: 0;
  width: 100%;
  height: 512.88px;
  overflow: hidden;
  cursor: grab;
}

.works__carousel-wrap:active {
  cursor: grabbing;
}

/* ── 캐러셀 트랙 ── */
.works__carousel-track {
  display: flex;
  align-items: flex-start;
  height: 100%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 슬라이드 세트 ── */
.works__set {
  position: relative;
  flex-shrink: 0;
  width: 2621.07px;
  height: 512.88px;
  margin-right: 18px;
}

/* ── 개별 콘텐츠 이미지 ── */
.works__set img {
  position: absolute;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/*17.35*/
.works__content-1 { left: 0px;       top: 0px; width: 258px;    height: 512px; }
.works__content-2 { left: 275.35px;  top: 0px; width: 500px;    height: 512px; }
.works__content-3 { left: 792.70px;  top: 0px; width: 744px;    height: 512px; }
.works__content-4 { left: 1554.05px; top: 0px; width: 340px;    height: 512px; }
.works__content-5 { left: 1911.40px; top: 0px; width: 392px;    height: 512px; }
.works__content-6 { left: 2320.75px; top: 0px; width: 292.07px; height: 512px; }

/* ── CTA 버튼 ──
   Figma: y=676.78 in contents → 패널(74.56) 기준 상대값 602.22px
*/
.works__btn {
  position: absolute;
  top: 602.22px;
  left: 50%;
  transform: translateX(-50%);
  width: 369.73px;
  height: 70.47px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*
  background: linear-gradient(90deg, #8CCBE6 0%, #8E90F3 100%);
  */

  background:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, #8CCBE6 0%, #8E90F3 100%);
    
  background-origin: border-box;
  background-clip: padding-box, border-box;

  border-radius: 35.24px;
  cursor: pointer;
  /*border: none;*/
  border: 4.58px solid transparent;
  padding: 0;
}

.works__btn-text {
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2em;
  color: #313131;
  white-space: nowrap;
  padding-left: 10px;
}