@font-face {
    font-family: 'SUIT Variable';
    src: url('/font/suit/SUIT-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

/* =========================
   index.css (전체)
   ========================= */

/* --- Page Root --- */
.desktop-1 {
  position: relative;
  background-color: #87ceeb;
  width: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 자식 요소들을 왼쪽 정렬 (가로 여백 제거) */
  justify-content: center;

  text-align: left;
  font-size: clamp(3rem, 10vw, 6rem);
  color: #fff;
  font-family: 'SUIT Variable';
  min-height: 0;
}

/* --- Top Asset Container --- */
.desktop-1-child-container {
  align-self: stretch;
  height: 274px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: contain;
  min-height: 0;
}

.desktop-1-child-random-asset {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  min-height: 0;
  z-index: 1;
}

.desktop-1-child-overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}

/* =========================================================
   ✅ Row: Designer / Rive / Right Image
   - 데스크탑에서도 부모 높이를 주고
   - 자식(빨강/살구/오른쪽 이미지)이 height:100%로 꽉 차게
   ========================================================= */
.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  /* ✅ 데스크탑도 stretch */
  align-items: stretch;

  min-height: 0;

  /* ✅ 데스크탑에서 폭이 줄수록 높이도 줄게 */
  height: clamp(140px, 12vw, 260px);
}

/* ✅ 자식들이 부모 높이를 채우게 (데스크탑 포함) */
.designer-wrapper,
.image-6345755-wrapper,
.frame-child {
  height: 100%;
  box-sizing: border-box;
}

/* --- Left Red Box --- */
.designer-wrapper {
  background-color: #ea5b5f;
  overflow: hidden;
  display: flex;
  align-items: center;

  padding: clamp(1rem, 2.5vw, 3rem) clamp(1rem, 3vw, 5rem);
  flex-shrink: 0;
}

/* --- Middle Peach Box --- */
.image-6345755-wrapper {
  flex: 1;
  background-color: #f6eccf;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 28px);

  padding: clamp(0.75rem, 2vw, 2rem) clamp(1rem, 3vw, 8rem);
}

#app-icon-rive{
  width: min(100%, 260px);
  display: block;
  flex-shrink: 0;        /* ✅ 부모 Flexbox에 의해 찌그러지는 것 방지 */
}

/* 오른쪽 이미지 */
.frame-child {
  width: auto;
  object-fit: cover;
  margin-left: auto;
  flex-shrink: 1;
  max-width: 266px;
  display: block;
}

/* --- 2001 Text Block --- */
.wrapper {
  align-self: stretch;
  background-color: #589af6;
  overflow: hidden;

  display: grid;
  place-items: center;

  padding: 30px 67px;
  min-height: 0;
}

.clickable-text {
  position: relative;
  display: block;
  font-size: clamp(18px, 2.5vw, 48px);
  font-weight: 900;
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  margin: 0;
  padding: 0;
  line-height: 1.2;
  transform: translateY(-0.08em);
}

.clickable-text-content {
  text-align: center;
  margin: 0;
  padding: 0;
  display: block;
}

/* --- White Spacer --- */
.desktop-1-item {
  align-self: stretch;
  height: 80px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  min-height: 0;
  padding: 0; /* Remove padding-bottom */
  display: flex;
  align-items: center; /* Revert to center alignment */
}

.ticker-wrap {
  width: 100%;
  height: 100%;
}

.ticker-move {
  display: inline-flex;
  height: 100%;
  animation: marquee 60s linear infinite;
}

.ticker-item {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  margin-right: 20px;
  box-sizing: content-box;
}

.ticker-item img {
  height: 100%;
  width: auto;
  display: block;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* =========================================================
   ✅ Two Image Strip (VPD / YIDA)
   - 데스크탑에서 “가운데 기준”으로 크롭/움직이게
   ========================================================= */
.frame-container {
  align-self: stretch;
  display: flex;
  align-items: stretch;           /* ✅ height:100%가 먹게 */
  gap: 0px;

  width: 100%;
  aspect-ratio: 18 / 7;
  min-height: 0;
}

/* ✅ 링크가 칸 자체가 되도록 */
.frame-container > a {
  flex: 1;
  height: 100%;
  display: flex;
}

/* ✅ 이미지는 칸을 꽉 채우고 center 기준으로 */
.frame-container > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 기존 클래스가 남아있어도 높이 꼬이지 않게 안전장치 */
.frame-inner,
.frame-icon {
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* --- Bottom Icon --- */
.icon {
  position: relative;
  width: 100%; /* 너비를 100%로 강제하여 여백 제거 */
  height: auto;
  object-fit: contain;
  margin-bottom: 0;
  min-height: 0;
}

/* =========================================================
   ✅ Night Glow Run Container
   - 폭이 줄수록 높이도 줄게
   ========================================================= */
.new-frame-group {
  align-self: stretch;
  width: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  min-height: 0;

  height: clamp(140px, 30vw, 558px);
  aspect-ratio: auto; /* height와 충돌 방지 */
}

.new-frame-group-left-panel {
  flex: 1;
  background-color: #FFFF00;
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.new-frame-group-left-panel a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 0;
}

.new-frame-group-left-panel img.frame-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  min-width: 0;
}

.new-frame-group-right-panel {
  flex: 1;
  background-color: #FF78DD;
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.new-frame-group-right-panel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* =========================
   Mobile (<= 768px)
   ========================= */
@media (max-width: 768px) {

  .new-frame-group {
    height: clamp(120px, 30vw, 200px);
    z-index: 10;
    background-color: purple !important; /* 테스트 끝나면 지워도 됨 */
  }

  /* 모바일에서 VPD/YIDA 비율 트릭 유지(너 코드 유지) */
  .frame-container {
    height: 0;
    width: 100%;
    padding-bottom: 38.89%;
    aspect-ratio: unset;
    position: relative;
    display: block;
    z-index: 10;
  }

  .frame-container .frame-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .frame-container .frame-icon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* 모바일 wrapper 패딩 */
  .wrapper {
    padding: 20px 0px;
  }

  .desktop-1 {
    overflow: visible !important;
  }

  /* 모바일 frame-parent 더 얇게(원하면 조절) */
  .frame-parent {
    height: clamp(100px, 10vw, 220px);
  }
}