/* 기본 여백 제거 및 사이즈 측정 기준 통일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    /* 이제 줌과 스크롤을 허용하므로 min-height를 사용합니다. */
    min-height: 100vh; 
    
    /* 요청하신 전체 배경색 원복 */
    background-color: #F4B70F; 
    
    display: flex;
    justify-content: center;
    
    /* 애플의 산돌고딕 네오나 샌프란시스코 폰트처럼 깔끔하고 세련된 상업용 무료 폰트 'Pretendard' 적용 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    
    /* 스와이프 이벤트를 화면 전체로 잡기 위한 설정 */
    overscroll-behavior-x: none; /* 브라우저의 기본 뒤로가기/앞으로가기 스와이프 제스처 방지 */
    touch-action: pan-y; /* 수직 스크롤은 허용하되 수평 스와이프는 JS가 통제 */
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

/* 컨텐츠 영역 너비 제한 및 전체 배치 */
.mobile-container {
    width: 100%;
    max-width: 480px; /* PC에서는 최대 너비 고정 */
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
}

/* 중앙 정렬을 위한 래퍼 (아이콘, 정사각형, 버튼을 모두 포함) */
.content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 상단부터 차례대로 쌓임 */
    margin: 0; /* 세로 중앙 정렬을 위한 auto 마진 제거 */
    padding: 10px 0 20px 0; /* 상단 여백을 줄여 전체 컨텐츠를 위로 올림 */
    /* gap을 제거하고 개별 margin으로 간격을 정밀하게 통제합니다 */
}


.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    /* 플레이 버튼의 검은색(#282826 -> rgb(40,40,38))과 동일한 톤의 그라데이션 */
    background: linear-gradient(to top, rgba(40, 40, 38, 0.9), transparent);
    pointer-events: none;
    z-index: 5;
}

/* 미디어 내부 텍스트 및 액션 영역 (하단 정렬) */
.media-info-bar {
    position: absolute;
    bottom: 12px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 10;
}

/* 제목과 부제 컨테이너 */
.media-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin-right: 15px;
    overflow: hidden;
}

.app-title {
    font-size: 26px; /* 박스 내부에서 잘 어울리도록 살짝 조정 */
    font-weight: 900;
    color: #ffffff; /* 가독성을 위한 흰색 텍스트 */
    letter-spacing: 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* 강한 그림자 추가 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
}

.app-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85); /* 약간 투명한 흰색 */
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    display: none; /* 내용이 없으면 숨김, 스크립트에서 표시 */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: left;
}

.action-icons {
    display: flex;
    gap: 16px; /* 텍스트와 겹치지 않게 간격 넓힘 */
    user-select: none;
    align-items: flex-end; /* 아래쪽 정렬 */
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.action-count {
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.action-btn {
    font-size: 26px;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.1s ease;
    display: inline-block;
}

.action-btn:active {
    transform: scale(0.7);
}


/* 앱 바를 감싸는 영역 (좌우 화살표 포함) */
.carousel-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 36px; /* 아래 PLAY 버튼을 살짝 더 아래로 내리기 위해 간격 늘림 */
}

/* 앱 바 좌우 화살표 (투명도 있는 브랜드네임 폰트 스타일) */
.nav-arrow {
    position: absolute;
    color: rgba(50, 0, 0, 0.28); /* 투명도 28%로 조정 */
    font-size: 18px;
    font-weight: 800;
    user-select: none;
    z-index: 10;
    /* 위아래로 길쭉하게 늘리기 */
    transform: scaleY(1.6);
    /* button 태그 기본 스타일 리셋 */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
.arrow-left {
    left: 1px; /* 벽 쪽으로 최대한 밀착 (문자 자체의 여백 고려) */
}
.arrow-right {
    right: 1px; /* 벽 쪽으로 최대한 밀착 */
}

/* 정사각형 바로 위 앱 아이콘 영역 */
.top-nav {
    position: relative; /* 자식인 선택 커서의 절대 위치 기준점 */
    width: calc(100% - 40px); /* 정사각형과 동일한 너비 유지 */
    max-width: 400px; /* 정사각형의 최대 너비와 맞춤 */
    
    /* 앱 바를 감싸는 가로로 긴 검은 사각형 배경 원래대로 복구 */
    background-color: #282826;
    border-radius: 18px; /* 내부 아이콘과 어울리도록 곡률 미세조정 */
    /* 이 패딩(여백)만큼 검은색 테두리가 덮이게 됩니다 */
    padding: 6px 8px; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    
    /* wrapper에서 마진을 처리하므로 여기서는 0으로 제거 */
    margin-bottom: 0; 
    overflow: hidden; /* 영역 밖으로 나가는 앱 숨김 */
    touch-action: pan-y; /* 모바일에서 가로 스크롤은 JS가 처리, 세로 스크롤 허용 */
}

/* 앱들을 덮는 검은색 프레임 테두리 추가 (앱이 이 밑으로 슬라이드 됨) */
.top-nav::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 패딩 두께와 동일하게 설정하여 정확히 여백을 검은색으로 덮음 */
    border-top: 6px solid #282826;
    border-bottom: 6px solid #282826;
    border-left: 8px solid #282826;
    border-right: 8px solid #282826;
    border-radius: 18px;
    pointer-events: none; /* 클릭/터치 이벤트 무시 */
    z-index: 5; /* 앱들 위로 오도록 설정 */
}

/* 스와이프를 위한 트랙 (무한히 이어지는 구조) */
.carousel-track {
    display: flex;
    flex-direction: row;
    gap: 10px; /* 아이콘 간의 간격은 기존대로 10px 유지 */
    width: max-content;
    cursor: grab;
}

.carousel-track:active {
    cursor: grabbing;
}

/* 임시 앱 아이콘 스타일 */
.app-icon {
    width: 60px;
    height: 60px;
    background-color: #ffffff; /* 하얀색 배경 아이콘 */
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 트랙 안에서 아이콘이 찌그러지지 않도록 고정 */
    user-select: none; /* 드래그 시 텍스트 선택 방지 */
}

/* 중앙 고정형 선택 커서 (형광색 테두리) */
.selector-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; /* 앱 아이콘(60px)을 감싸는 약간 큰 크기 */
    height: 68px;
    border-radius: 20px; /* 앱 아이콘(16px)보다 약간 큰 곡률로 자연스럽게 감쌈 */
    border: 3px solid #39FF14; /* 형광 그린 테두리 */
    pointer-events: none; /* 클릭이나 드래그를 방해하지 않고 통과시킴 */
    z-index: 10; /* 앱 아이콘보다 무조건 위에 뜨도록 */
    animation: neonPulse 1.5s infinite ease-in-out;
}

/* 선명해졌다가 흐려지는 형광 애니메이션 */
@keyframes neonPulse {
    0%, 100% { 
        opacity: 0.3;
        box-shadow: 0 0 5px #39FF14;
    }
    50% { 
        opacity: 1;
        box-shadow: 0 0 15px #39FF14, inset 0 0 5px #39FF14;
    }
}

/* 1:1 비율의 정사각형 상자 */
.square-box {
    /* 좌우 작은 여백(20px씩 총 40px)을 남기도록 calc 사용 */
    width: calc(100% - 40px);
    
    /* PC 브라우저에서 너무 커지지 않도록 최대폭 제한 */
    max-width: 400px;
    
    /* 화면 너비에 맞추되 높이를 무조건 너비와 똑같이 1:1 비율(정사각형)로 유지 */
    aspect-ratio: 1 / 1;
    
    /* 내부 이미지/영상이 박스 크기를 임의로 늘리지 못하도록 강제 고정 */
    overflow: hidden;
    position: relative; /* 자식인 action-icons의 절대 위치 기준점 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 요청하신 검은색 계열 사각형 색상 */
    background-color: #282826; 
    
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px; /* 아래 앱 캐러셀(top-nav)과의 간격 */
}

/* PLAY 버튼 스타일 */
.play-btn {
    /* gap 설정으로 인해 기존 margin-top 제거 */
    margin-bottom: 40px; /* 아래 브랜드 배지와 간격 늘림 */
    
    /* 배경은 검은색, 글씨는 기존 바탕색으로 원복 */
    background-color: #282826;
    color: #F4B70F;
    
    border: none;
    /* 앱 아이콘/정사각형과 동일한 느낌을 주도록 둥근 사각형으로 변경 */
    border-radius: 20px;
    /* 좌우 너비를 더 늘려달라는 요청 반영 */
    padding: 24px 80px; 
    font-size: 28px; /* 앱 제목(app-title)과 동일한 크기로 확대 */
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.play-btn:active {
    transform: scale(0.95); /* 눌렀을 때 살짝 작아지는 애니메이션 */
}

/* 상단 화살표 스타일 */
.down-arrow {
    /* 폰트 기본 컬러를 투명하게 하고 테두리 선(Stroke)만 그려서 선 두께를 커스텀 */
    color: transparent; 
    -webkit-text-stroke: 1.5px rgba(50, 0, 0, 0.35); /* 두껍고 진한 다크 버건디 선 */
    
    font-size: 16px;
    font-weight: 900; /* 가장 굵은 글씨체 */
    line-height: 1; /* 간격에 딱 맞게 설정 */
    margin-bottom: 6px; /* 사각형에 바짝 붙임 */
    user-select: none;
    
    /* 좌우로 더 넓게 퍼지도록 가로 크기만 1.8배 확장 */
    display: inline-block; 
    transform: scaleX(1.8);
}

/* 브랜드 배지 스타일 */
.brand-badge {
    color: rgba(50, 0, 0, 0.28); /* 투명도 28%로 조정 */
    border: 2px solid rgba(50, 0, 0, 0.28);
    border-radius: 50px; /* 완전 둥글게 (알약 형태) */
    /* 위아래, 좌우 패딩을 대폭 줄여 글자와 테두리를 타이트하게 붙임 */
    padding: 2px 10px 3px 10px; 
    font-size: 16px; /* 로그인 폰트 크기와 동일하게 확대 */
    font-weight: 800;
    letter-spacing: 0.5px;
    /* 맨 아래로 내려왔으므로 하단 여백 제거 */
    margin-bottom: 0; 
    user-select: none;
}

/* 사각형 바로 윗단 유틸리티(로그인) 바 */
.top-util-bar {
    width: calc(100% - 40px);
    max-width: 400px;
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    /* 사각형 박스의 모서리 곡률을 고려해 좌우 패딩을 살짝 넓힘 (26px -> 16px) */
    padding: 0 16px; 
    margin-top: 2px;
    margin-bottom: 10px;
}

/* 로그인 버튼 */
.login-btn {
    color: rgba(50, 0, 0, 0.28); /* 투명도 28%로 조정 */
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.login-btn:hover {
    opacity: 0.4;
}

/* 로고 그룹 */
.logo-group {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.logo-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: rgba(50, 0, 0, 0.28); /* 로그인과 동일한 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

/* 아이콘 내부 잘려나간 눈 부분 */
.logo-icon::before, .logo-icon::after {
    content: "";
    width: 6px;
    height: 2px;
    /* JS에서 설정된 --bg-color 변수를 사용해 배경색과 맞춤 (투명하게 뚫린 효과) */
    background-color: var(--bg-color, #F4B70F); 
}

.logo-text {
    color: rgba(50, 0, 0, 0.28);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* 스크롤바 숨기기 유틸리티 클래스 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}