/* =============================================
   AI Service Page
   기준폭: 1920px  /  기준높이: 1882px
   전체 스케일: max(360/1920, min(1, vw/1920))
   JS(aiservice.js)가 transform·높이를 제어
   ============================================= */

/* ── 변수 ── */
:root {
  --item-min-margin: 10px;       /* 아이템 내부 title 위쪽·subText 아래쪽 최소 여백 */
  --subtext-wrap-vw: 480;        /* subText 2줄 전환 기준 뷰포트폭 (px, JS 사용) */
  --snap-threshold: 0.3;         /* 드래그 스냅 기준 비율 (JS 사용) */
  --snap-duration: 400;          /* 스냅 애니메이션 ms (JS 사용) */
}

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

/* 페이지 배경 — 스케일 축소 시 viewport 하단 빈 공간 채움 */
body { background: #4E4F5B; }

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

/* 1920×1882 기준 고정 레이아웃 컨테이너
   left: 50%; margin-left: -960px → 뷰포트 중앙 정렬
   transform-origin: top center → 스케일 시 중앙 유지 */
.aiservice-page {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  height: 1882px;
  background: #4E4F5B;
  transform-origin: top center;
  /* transform: scale(x) — JS 제어 */
}

/* ════════════════════════════════════════════
   AIServicepage_mainNotice (캐러셀 섹션)

   mainNotice 그룹: AIService 내 x=-158.67, y=209

   deco (PNG): absolute x=-158.67, y=233, 622.67×620
   viewport:   absolute x=260.14,  y=209, 1399.71×496.19
   dots:       absolute x=904.36,  y=736, 112.48×10.23
   ════════════════════════════════════════════ */

/* ── 블러 데코 이미지 ── */
.aiservice-notice__deco {
  position: absolute;
  left: -158.67px;
  top: 233px;
  width: 622.67px;
  height: 620px;
  pointer-events: none;
  user-select: none;
}

/* ── 캐러셀 뷰포트 (클립 영역) ── */
.aiservice-notice__viewport {
  position: absolute;
  left: 260.14px;
  top: 209px;
  width: 1399.71px;
  height: 496.19px;
  border-radius: 34.17px;
  overflow: hidden;
  background: rgba(66, 66, 66, 0.5); /* viewPoint_empty 배경 */
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.aiservice-notice__viewport:active {
  cursor: grabbing;
}

/* ── 캐러셀 트랙 (수평 flex) ── */
.aiservice-notice__track {
  display: flex;
  flex-direction: row;
  width: max-content;
  height: 100%;
  will-change: transform;
}

/* ════════════════════════════════════════════
   캐러셀 아이템 (1399.71×496.19px)
   content_01 구조
   ════════════════════════════════════════════ */

.aiservice-notice__item {
  flex: 0 0 1399.71px;
  width: 1399.71px;
  height: 496.19px;
  position: relative;
  overflow: hidden;
  border-radius: 34.17px;
}

/* ── 아이템 배경 이미지 ── */
.aiservice-notice__item-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /*draggable: false;*/
}

/* ── content_01_main 그룹 ──
   Figma: x=427.5, y=123, size=545×187.91
*/
.aiservice-notice__item-main {
  position: absolute;
  left: 427.5px;
  top: 123px;
  width: 545px;
  height: 187.91px;
}

/* ── content_01_title ──
   Figma: x=171.32, y=0, size=201.34×35.88, radius=17.94px
   배경: #FFFFFF / 텍스트: gradient
*/
.aiservice-notice__item-title {
  position: absolute;
  left: 171.32px;
  top: 0;
  width: 201.34px;
  height: 35.88px;
  border-radius: 17.94px;
  background: #FFFFFF;
  overflow: hidden;
}

/* ── COMMING SOON 텍스트 ──
   Figma: x=19.77, y=7.32, size=162×21
   A2Z 700 17.57px / gradient fill
*/
.aiservice-notice__item-title-text {
  position: absolute;
  left: 29.03px;
  top: 7.32px;
  width: 162px;
  height: 21px;
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 17.57px;
  line-height: 1.2em;
  background: linear-gradient(90deg, #8CCBE6 0%, #8E90F3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

/* ── content_01_mainText ("나만의 AI 캐릭터 비서") ──
   Figma: x=55.46, y=91.5, size=434×57
   A2Z 600 47.22px, #1A1A1A, center
*/
.aiservice-notice__item-mainText {
  position: absolute;
  left: 55.46px;
  top: 91.5px;
  width: 434px;
  height: 57px;
  font-family: 'A2Z', sans-serif;
  font-weight: 600;
  font-size: 47.22px;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  text-align: center;
  color: #1A1A1A;
  white-space: nowrap;
}

/* ── content_01_subText ──
   Figma: x=0, y=166.91, size=545×21
   A2Z 400 17.57px, #FFFFFF, center, 1줄
*/
.aiservice-notice__item-subText {
  position: absolute;
  left: 0;
  top: 166.91px;
  width: 545px;
  height: 21px;
  font-family: 'A2Z', sans-serif;
  font-weight: 400;
  font-size: 17.57px;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
}


/* ── subText 2줄 모드 (viewport < 480px, JS 제어) ── */
.aiservice-notice__item-subText--wrap {
  white-space: normal;
  width: 300px;
  left: 122.5px; /* (545-300)/2 = 122.5 */
  height: auto;
  overflow: visible;
}

/* ════════════════════════════════════════════
   페이지 인디케이터 도트

   Figma: absolute x=904.36, y=736, size=112.48×10.23
   row, gap=15.34, 도트 10.23×10.23
   active: fill #A7B9F0 / inactive: border #A7B9F0
   ════════════════════════════════════════════ */

.aiservice-notice__dots {
  position: absolute;
  left: 904.36px;
  top: 736px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15.34px;
  pointer-events: none;
}

.aiservice-notice__dot {
  width: 10.23px;
  height: 10.23px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #A7B9F0;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.aiservice-notice__dot--active {
  background: #A7B9F0;
  border-color: #A7B9F0;
}

/* ════════════════════════════════════════════
   AIServicepage_mainContent (Coming Soon 섹션)

   mainContent 그룹: AIService 내 x=-61.4, y=894.33, 2061.47×617.33
   Coming Soon 중심 x: -61.4 + 829.79 + 193 = 961.39 ≈ 960 (중앙)

   deco (PNG):   x=650.66,  y=894.33,  620×617.33
   leftDeco:     x=-61.4,   y=1210.22, 787.23×9.46
   mainText:     x=768.39,  y=1141.66, 386×68
   rightDeco:    x=1197.46, y=1219.68, 802.6×11.82
   subText:      x=109.99,  y=1240.95, 1702.13×26
   ════════════════════════════════════════════ */

/* ── 블러 데코 이미지 ── */
.aiservice-main__deco {
  position: absolute;
  left: 650.66px;
  top: 894.33px;
  width: 620px;
  height: 617.33px;
  pointer-events: none;
  user-select: none;
}

/* ── 왼쪽 데코 라인 ── */
.aiservice-main__leftDeco {
  position: absolute;
  left: -61.4px;
  top: 1210.22px;
  width: 787.23px;
  height: 9.46px;
  object-fit: fill;
  pointer-events: none;
}

/* ── Coming Soon 텍스트 ── */
.aiservice-main__mainText {
  position: absolute;
  left: 768.39px;
  top: 1180.66px;
  width: 386px;
  height: 68px;
  font-family: 'A2Z', sans-serif;
  font-weight: 700;
  font-size: 56.74px;
  line-height: 1.2em;
  text-align: center;
  color: #F8F8F8;
  text-shadow: 0px 0px 7.09px rgba(38, 45, 61, 0.25);
  white-space: nowrap;
}

/* ── 오른쪽 데코 라인 ── */
.aiservice-main__rightDeco {
  position: absolute;
  left: 1197.46px;
  top: 1219.68px;
  width: 802.6px;
  height: 11.82px;
  object-fit: fill;
  pointer-events: none;
}

/* ── 서브텍스트 ── */
/*
.aiservice-main__subText {
  position: absolute;
  left: 109.99px;
  top: 1240.95px;
  width: 1702.13px;
  height: 26px;
  font-family: 'A2Z', sans-serif;
  font-weight: 500;
  font-size: 21.28px;
  line-height: 1.2em;
  letter-spacing: 0.15em;
  text-align: center;
  color: #AEAEAE;
  white-space: nowrap;
}
*/


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

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