.desktop-1 {
  	position: relative;
  	background-color: #87ceeb;
  	width: 100%;
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	text-align: left;
  	font-size: 96px;
  	color: #fff;
  	font-family: 'SUIT Variable';
    min-height: 0; /* 최소 높이 제약 해제 */
}
.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; /* Maintain aspect ratio */
    object-fit: cover;
    min-height: 0; /* 최소 높이 제약 해제 */ /* Fill the container's width, crop height if needed */
    transform: translateY(-100%); /* Start above the container */
    animation: revealFromTop 5s forwards; /* 5s duration, stay at end state */
    z-index: 1; /* 오버레이 이미지 아래에 배치 */
}

@keyframes revealFromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.desktop-1-child-overlay-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 원본 비율 유지, 잘리지 않음 */
    z-index: 2; /* 랜덤 이미지 위에 오버레이 */
}
.frame-parent {
  	align-self: stretch;
  	display: grid;
    grid-template-columns: min-content 1fr min-content; /* designer, image_wrapper(남은 공간 채움), frame_child 순서 */
    grid-template-rows: 120px; /* 행 높이 고정 */
    min-height: 0; /* 최소 높이 제약 해제 */
}
.designer-wrapper {
  	background-color: #ea5b5f;
  	overflow: hidden;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 10px 20px; /* 텍스트 크기에 맞춰 패딩 축소 */
    align-self: stretch; /* 그리드 셀 높이를 가득 채움 */
}

#typing-text-designer {
    font-size: 48px; /* 텍스트 크기 */
    font-weight: 900; /* 더 볼드하게 */
    color: #fff; /* 텍스트 색상 */
    font-family: 'SUIT Variable'; /* 폰트 유지 */
    display: inline-block; /* 너비/높이 적용을 위함 */
    overflow: hidden; /* 타이핑되지 않은 텍스트 숨김 */
    white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
    border-right: .15em solid orange; /* 깜빡이는 커서 */
}
.designer {
  	position: relative;
}
.image-6345755-wrapper {
  	height: 120px; /* 스케일 축소 */
  	background-color: #f6eccf;
  	overflow: hidden;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	padding: 20px 30px; /* 패딩 축소 */
  	box-sizing: border-box;
}
.image-6345755-icon {
  	width: 188px;
  	position: relative;
  	max-height: 100%;
  	object-fit: contain;
}
.frame-child {
  	height: 100%; /* 그리드 셀 높이를 채움 */
  	object-fit: cover;
    aspect-ratio: 1 / 1; /* 정사각형 유지 */
    margin-left: auto; /* 컨테이너 맨 오른쪽으로 */
    justify-self: end; /* 그리드 아이템을 오른쪽 끝으로 */
}
.wrapper {
  	align-self: stretch;
  	background-color: #589af6;
  	overflow: hidden;
  	display: flex;
  	align-items: flex-start; /* 자식 요소를 상단에 정렬 */
  	justify-content: center;
  	padding: 22px 67px;
    min-height: 0; /* 최소 높이 제약 해제 */
}
.clickable-text {
  	position: relative;
  	display: flex; /* 자식 요소들을 flexbox로 배치 */
    align-items: flex-start; /* 마지막 줄에 화살표와 텍스트를 상단 정렬 */
    justify-content: center; /* 전체 텍스트 블록 가운데 정렬 */
    flex-wrap: wrap; /* 내용이 넘치면 다음 줄로 */
    font-size: clamp(18px, 2.5vw, 48px); /* 모바일에서 최소 폰트 크기 확보 */
    font-weight: 900; /* 더 볼드하게 */
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 부모로부터 색상 상속 */
    cursor: pointer; /* 클릭 가능함을 나타냄 */
}

.arrow-icon {
    font-size: 1.2em; /* 텍스트보다 약간 크게 */
    margin-left: 0.5em; /* 텍스트와 간격 */
    display: inline-block;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

.clickable-text:hover .arrow-icon {
    transform: translateX(5px); /* 호버 시 오른쪽으로 이동 */
}

.clickable-text-content {
    white-space: pre-line; /* <br> 태그에 의한 줄 바꿈은 유지 */
    text-align: center; /* 각 줄을 가운데 정렬 */
    line-height: 1.2em; /* 줄 간격 */
}






.desktop-1-item {
  	align-self: stretch;
  	height: 80px; /* 세로 길이 줄임 */
  	position: relative;
  	background-color: #fff;
  	overflow: hidden;
  	flex-shrink: 0;
    min-height: 0; /* 최소 높이 제약 해제 */
}
.frame-container {
  	align-self: stretch;
  	display: flex;
  	align-items: center; /* 수직 중앙 정렬 */
  	justify-content: space-between; /* 아이템들을 양 끝으로 밀어냄 */
  	gap: 0px;
    width: 100%; /* 부모 너비 가득 채움 */
    aspect-ratio: 18 / 7; /* 1440x560 비율 유지 */
    min-height: 0; /* 최소 높이 제약 해제 */
}
.frame-inner {
    flex: 1; /* 유연하게 공간을 차지하도록 */
  	object-fit: cover;
    object-position: center; /* 이미지 중앙 기준으로 크롭 */
    aspect-ratio: 1 / 1; /* 정사각형 비율 유지 */
    min-height: 0; /* 최소 높이 제약 해제 */
}
.frame-icon {
    flex: 1; /* 유연하게 공간을 차지하도록 */
    height: auto; /* 높이는 자동으로 */
    position: relative; /* 기존 속성 유지 */
    overflow: hidden; /* 기존 속성 유지 */
    object-fit: cover; /* 확대되어 채움 */
    object-position: center; /* 이미지 중앙 기준으로 크롭 */
    min-height: 0; /* 최소 높이 제약 해제 */
}
.icon {
  	position: relative;
    max-width: 100%; /* 부모 너비를 넘지 않도록 */
    height: auto; /* 비율에 맞춰 높이 자동 조절 */
  	object-fit: contain; /* 원본 비율 유지, 잘리지 않음 */
    margin-bottom: 0; /* 푸터와의 여백 제거 */
    min-height: 0; /* 최소 높이 제약 해제 */
}

/* New Frame Group Structure */
.new-frame-group {
  	align-self: stretch; /* desktop-1 내에서 너비 채움 */
    width: 100%;
    aspect-ratio: 1440 / 558; /* 전체 컨테이너 비율 유지 */
    display: flex;
    justify-content: flex-start; /* 아이템 시작점 정렬 */
    align-items: stretch; /* 아이템들이 높이를 채우도록 */
    overflow: hidden;
    position: relative; /* 자식 요소 absolute의 기준 */
    min-height: 0;
}

.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;
}
.new-frame-group-left-panel img.frame-item { /* 이미지 자체 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 채우고 크롭 */
    object-position: center; /* 중앙 기준으로 크롭 */
    display: block;
}

.new-frame-group-right-panel {
    flex: 1; /* 오른쪽 절반 차지 */
    background-color: #FF78DD;
    position: relative;
    overflow: hidden;
    min-width: 0; /* 축소 가능하도록 */
}

/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
    .frame-container {
        height: 0; /* padding-bottom 트릭을 위해 높이를 0으로 설정 */
        width: 100%; /* 부모 너비에 맞춤 */
        padding-bottom: 38.89%; /* 18:7 비율 유지 (7/18 * 100%) */
        aspect-ratio: unset; /* 모바일에서는 padding-bottom이 비율을 제어하므로 해제 */
        position: relative; /* 자식 요소 absolute 포지셔닝 기준 */
        display: block; /* flex 대신 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 {
        padding: 22px 20px; /* 모바일에서 좌우 패딩 축소 */
    }
}