/* =====================================================================
   요금제 카드 — 전체 요금제 페이지와 셀프개통 요금제 선택이 함께 쓴다.
   ⚠️ 예전에는 두 곳이 각자 카드를 그려서 모양이 서로 달라졌다.
      (셀프개통 쪽 .aplan-card) 카드 모양을 바꿀 일이 생기면 여기만 고칠 것.
   단위는 cqw — 컨테이너(.center-panel, container-type: inline-size) 기준이라
   두 페이지에서 같은 크기로 나온다.
   ===================================================================== */

.plan-card {
    width: 90.933cqw;
    /* 682px / 750px */
    background: #FFFFFF;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.05);
    border-radius: 5.333cqw;
    /* 40px */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plan-body {
    flex: 1;
    padding: 4.266cqw 4.533cqw;
    /* 32px 34px 추정 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    /* 우측 정렬 */
}

/* 뱃지 영역 */
.plan-badge-area {
    position: absolute;
    top: 4.266cqw;
    /* 32px */
    left: 4.133cqw;
    /* 31px */
    display: flex;
    flex-direction: column;
    gap: 1.333cqw;
    /* 10px */
}

.plan-badge-box {
    width: 13.2cqw;
    /* 99px */
    height: 6.266cqw;
    /* 47px */
    border-radius: 1.333cqw;
    /* 10px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-badge-box.tele {
    background: #DBC9FF;
}

/* 키즈워치 — 3G 자리를 물려받았다(3G 는 취급하지 않는다).
   화면 분류일 뿐이고 실제 망은 LTE 다. */
.plan-badge-box.network.kids {
    background: #FFF4E0;
    /* 연주황 */
}

.plan-badge-box.network.lte {
    background: #E8F5E9;
    /* LTE 연초록 */
}

.plan-badge-box.network.five-g {
    background: #E0F2FE;
    /* 5G 연파랑 */
}

.plan-badge-text {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 2.933cqw;
    /* 22px */
    color: #6A34FF;
}

.plan-badge-box.network.kids .plan-badge-text {
    color: #E07B00;
}

.plan-badge-box.network.lte .plan-badge-text {
    color: #43A047;
}

.plan-badge-box.network.five-g .plan-badge-text {
    color: #0284C7;
}

.plan-name {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 4.666cqw;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 2.666cqw;
    /* 20px */
    text-align: right;
    width: 100%;
    padding-left: 15cqw;
    /* 배지 너비(13.2cqw) + 여백 고려 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 요금제에 딸려 나가는 케어 서비스(학폭케어 등) — 대상 요금제에만 붙는다 */
.plan-care {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.066cqw;
    margin-bottom: 2.666cqw;
}

.plan-care-chip {
    font-size: 2.933cqw;
    font-weight: 700;
    color: #6A34FF;
    background: #EDE7FF;
    border-radius: 1.6cqw;
    padding: 0.8cqw 2.133cqw;
    white-space: nowrap;
}

.plan-details {
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 3.466cqw;
    /* 26px */
    color: #A4A4A4;
    margin-bottom: 2.666cqw;
    text-align: right;
}

.plan-details .label {
    color: #A4A4A4;
}

.plan-details .value {
    color: #000000;
}

.plan-price-area {
    text-align: right;
}

.plan-price {
    font-family: 'Montserrat';
    font-weight: 700;
    font-size: 5.333cqw;
    /* 55px / 750px */
    color: #6A34FF;
    line-height: 1.2;
}

/* 금액 옆 (VAT포함) — 금액 오른쪽, 글자 아랫선에 맞춰 작게(2026-09-28 시안).
   회색은 흰 카드 위 AA(4.5:1)를 넘기는 #767676 — 사양 줄의 #A4A4A4 는 이 크기에선 너무 흐리다. */
.plan-price-vat {
    margin-left: 1.066cqw;
    font-size: 2.666cqw;
    /* 20px / 750px */
    font-weight: 500;
    color: #767676;
    white-space: nowrap;
}

/* ===== Plan Card Clickable ===== */
.plan-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
}

.plan-card:focus-visible {
    /* ⚠️ --purple 은 plans.css 에만 있다. 이 파일은 셀프개통에서도 쓰므로 기본값을 함께 적는다
       (없으면 그쪽에서 선언이 통째로 무효가 되어 포커스 표시가 사라진다) */
    outline: 2px solid var(--purple, #6A34FF);
    outline-offset: 2px;
}