/* 스크롤 가능한 외부 래퍼: 100% 너비, 가운데 정렬 */
.custom-tabs-scroll {
    width: 100%;
    overflow-x: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch; /* iOS 모멘텀 스크롤 */
    touch-action: pan-x;
}

/* WebKit 스크롤바 숨김 */
.custom-tabs-scroll::-webkit-scrollbar {
    display: none;
}

/* 내부 탭 컨테이너: inline-flex로 가운데 정렬 */
.custom-tabs-container {
    display: inline-flex;
    position: relative;
    flex-wrap: nowrap;
    white-space: nowrap;
    /* 더 이상 border-bottom을 사용하지 않습니다. */
}

/* 전체 하단 border: 첫 번째 탭 텍스트와 마지막 탭 텍스트에 맞춰 위치 */
.full-border {
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: #ccc;
}

/* 각 탭 스타일 */
.custom-tab {
    flex: 0 0 auto;
    padding: 10px 20px;
    cursor: pointer;
    color: #555;
    position: relative;
}

/* 활성 탭: 텍스트 색상을 #6f0e10으로 지정 */
.custom-tab.active {
    color: #6f0e10;
    font-weight: bold;
}

/* 탭 내부의 텍스트 */
.custom-tab span {
    display: inline-block;
    position: relative;
    font-size: 28px;
}

/* indicator: 선택된 탭의 border (애니메이션 적용) */
.indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: #6f0e10;
    transition: left 0.3s ease, width 0.3s ease;
}

/* 탭 호버 효과 */
.custom-tab:hover {
    color: #6f0e10;
}

/* 콘텐츠 영역 기본 숨김 */
.custom-tab-content {
    display: none;
    padding: 20px;
}

/* 활성 콘텐츠 표시 */
.custom-tab-content.active {
    display: block;
}