/* =====================================================================
   망 구분 탭 — 전체 요금제 페이지와 셀프개통 요금제 선택이 함께 쓴다.
   (전체 / 키즈워치 전용 / 5G / LTE) 밑줄 위치·폭은 JS 가 활성 탭을 재서 맞춘다.
   ⚠️ 원래 plans.css 에 있던 것을 그대로 옮겼다. 모양을 바꿀 일이 생기면 여기만 고칠 것.
   변수(--purple 등)는 plans.css 에만 있으므로 기본값을 같이 적는다 — 셀프개통 쪽에는 그 파일이 없다.
   단위는 cqw — 컨테이너(.center-panel) 기준이라 두 페이지에서 같은 크기로 나온다.
   ===================================================================== */

.carrier-tabs-area {
    position: relative;
    margin-bottom: 0;
    /* 하단 마진 제거 */
    padding: 0 6.133cqw;
    /* 디자인 기준 패딩 */
}

.carrier-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.933cqw;
    /* 37px / 750px */
    margin-bottom: 16px;
    /* 탭과 인디케이터 사이 간격 */
}

.carrier-tab {
    background: none;
    border: none;
    font-size: 4cqw;
    /* 30px / 750px */
    /* 칸을 퍼센트로 나눈다. 네 칸을 똑같이 25% 로 두면 '키즈워치 전용'이 칸을 꽉 채워
       간격이 28/32/59px 로 어긋났고, 글자 폭에 맞추면 이번엔 밑줄이 '전체'·'5G' 에서
       26px·20px 로 너무 짧아 잘 안 보였다. 그래서 긴 탭만 넓게 준다. */
    flex: 0 0 20%;
    padding: 0;
    font-weight: 400;
    color: var(--text-grey, #4E4E4E);
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.carrier-tab.disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* 글자가 긴 탭 — 나머지 셋(20% × 3)과 합쳐 100% 가 된다 */
.carrier-tab--wide {
    flex-basis: 40%;
}

.carrier-tab.active {
    color: var(--text-dark, #000000);
    font-weight: 600;
}

.carrier-indicator {
    position: absolute;
    bottom: 0px;
    /* 16px 정렬 */
    height: 1.066cqw;
    /* 8px 디자인 반영 */
    background: var(--purple, #6A34FF);
    transition: all 0.3s;
    /* width 설정은 JS에서 동적으로 처리하거나 패딩 내에서 계산 */
}