/*
 * 가입 안내 페이지(fan-clubs/membership/index) 전용.
 *
 * 원래 index.blade.php 의 인라인 <style> 에 있던 규칙 중 팬클럽 색을 쓰지 않는 것을 옮겼다
 * (뷰 파일이 18KB 를 넘어서). 팬클럽 색({{ $fanClub->primary_color }})이 들어가는 규칙은
 * Blade 변수가 필요해 뷰에 남아 있다 — .benefit-yes / .benefit-partial / .benefit-condition 의 색 등.
 *
 * 공용 fanclub-membership.css 에 합치지 않은 이유: 결제·업그레이드 등 다른 화면도 그 파일을
 * 읽는데 이 규칙들은 이 페이지에서만 쓰고, 합치면 그 파일도 18KB 를 넘는다.
 * 뷰에서 인라인 <style> 이 있던 자리(다른 CSS 링크 뒤)에서 읽어 겹치는 규칙의 우선순위를 그대로 둔다.
 */

/* 등급 비교표 */
.benefit-matrix-scroll {
    /* 좁은 화면에서 표가 본문을 밀지 않도록 자기 안에서만 가로 스크롤 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.benefit-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.benefit-matrix-table th,
.benefit-matrix-table td {
    border: 1px solid #e6e6e6;
    padding: 10px 12px;
    vertical-align: middle;
}

/* 특전명 열: 가로 스크롤 중에도 어느 줄인지 잃지 않도록 왼쪽에 고정.
   배경을 깔지 않으면 스크롤된 칸이 글자 아래로 비쳐 겹쳐 보인다 — 페이지와 같은 흰색.
   keep-all: 특전명은 benefit-matrix.blade.php 가 넣은 단어 경계(<wbr>)와 공백에서만 끊는다.
   걸지 않았을 때는 좁은 칸에서 단어 끝 한 글자가 다음 줄로 떨어졌다. */
.benefit-matrix-table .benefit-matrix-name {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    font-weight: 600;
    min-width: 10em;
    background-color: #fff;
    word-break: keep-all;
    line-break: strict;
}

/* 등급명은 nowrap 을 걸지 않는다. 명칭을 정하지 않은 팬클럽의 기본 명칭은 괄호까지 붙어
   길어서, 한 줄로 붙들면 좁은 화면에서 표가 통째로 밀린다.
   대신 keep-all 로 가타카나 단어 한가운데서는 끊지 않는다(스마트폰에서 5자 등급명이 글자
   중간에서 두 줄로 끊겼다). 괄호 앞과 단어 경계(<wbr>, 특전명과 같은 규칙)에서는 줄을 바꿀 수 있다.
   line-break: strict 는 장음 기호·작은 가나가 줄 머리에 오지 않게 한다. */
.benefit-matrix-table thead .benefit-matrix-name,
.benefit-matrix-table .benefit-matrix-plan {
    background-color: #f7f7f7;
    text-align: center;
    font-weight: 700;
    word-break: keep-all;
    line-break: strict;
}

/* 범례 항목은 한 덩어리 — 항목 사이 공백에서만 줄을 바꾼다(benefit-matrix.blade.php 참고).
   CSS 만으로는 안 됐다: text-wrap: pretty 는 일본어에 효과가 없었고, keep-all 은 「＝」 뒤에서
   여전히 끊겼다. */
.benefit-matrix .benefit-legend-item {
    white-space: nowrap;
}

.benefit-matrix-notes {
    line-break: strict;
}

.benefit-matrix-table .benefit-matrix-cell {
    text-align: center;
    min-width: 5em;
}

.benefit-matrix-table .benefit-no {
    color: #bbb;
}

.benefit-matrix-table .benefit-note-ref {
    font-size: .7em;
    margin-left: 1px;
}

.benefit-matrix-notes {
    list-style: none;
    padding-left: 0;
}

/* 표 아래 범례(○＝… / △＝… / ×＝…)·주석(※1 …)은 표에 딸린 작은 글씨.
   마크업의 Bootstrap .small 은 뒤에 로드되는 .benefits-text(.95rem)에 덮여 본문 크기(15.2px)로
   나왔다 — 스마트폰에서는 표 안 글자(12.8px)보다 컸다. 표 글자 크기에 맞춘다(스마트폰은 아래). */
.benefit-matrix .benefits-text.small {
    font-size: .85rem;
}

/* 스마트폰. 등급명을 keep-all 로 끊지 않으니 등급 열 3개가 폭을 먼저 가져간다.
   글자·좌우 여백을 조금 줄여 특전명 열에 폭을 돌려준 값이다(실측, 3등급 기준):
     360px 가로 스크롤 0 / 375px 두 줄 특전명 1개 / 414px 두 줄 없음.
   .85rem·여백 5px 로는 360px 에서 7px 만 넘쳐, 잘린 것처럼 보이는 스크롤이 생겼다.
   320px 은 여전히 표 안 가로 스크롤이다(특전명 열 고정으로 받는 설계). */
@media (max-width: 767.98px) {
    .benefit-matrix-table {
        font-size: .8rem;
    }

    .benefit-matrix-table th,
    .benefit-matrix-table td {
        padding: 8px 4px;
    }

    .benefit-matrix-table .benefit-matrix-name {
        min-width: 7em;
    }

    .benefit-matrix-table .benefit-matrix-cell {
        min-width: 3.6em;
    }

    .benefit-matrix .benefits-text.small {
        font-size: .8rem;
    }
}

/* 회비·유효기간·결제방법 — 줄마다 글머리 기호를 매달아 줄바꿈된 둘째 줄이 글자 시작에 선다 */
.fee-lines {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    line-break: strict;
}

.fee-lines > li {
    position: relative;
    padding-left: 1.3em;
}

.fee-lines > li + li {
    margin-top: 2px;
}

.fee-lines .fee-bullet {
    position: absolute;
    left: 0;
    top: 0;
}

/* 라벨 | 값 두 칸. 값 칸 안의 둘째 줄(예시)과 줄바꿈이 모두 값 시작 위치에 선다 */
.fee-lines .fee-line-split {
    display: flex;
}

.fee-lines .fee-line-split .fee-label {
    flex: none;
}

.fee-lines .fee-line-split .fee-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* 토글 버튼: 기본 tf-btn보다 작게 */
.plan-toggle-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    padding: 12px 18px !important;
    min-height: 0 !important;
    border-radius: 5px !important;
    transition: background-color .2s ease, color .2s ease;
}

.plan-toggle-btn .plan-toggle-label {
    font-size: 1rem;
    opacity: .92;
    /* 등급명을 글자 중간에서 끊지 않는다. 좁으면 아이콘과 이름 사이에서만 줄바꿈 */
    word-break: keep-all;
    line-break: strict;
}

.plan-toggle-btn .plan-toggle-icon {
    margin-right: 6px;
    font-size: 1.35em;
    vertical-align: -2px;
}

.plan-toggle-btn .plan-toggle-price {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .2px;
    /* 「¥」 만 혼자 한 줄로 떨어지지 않게 금액은 한 덩어리로 */
    white-space: nowrap;
}

.plan-toggle-btn .plan-toggle-per {
    font-size: .6em;
    font-weight: 400;
    margin-left: 1px;
    opacity: .9;
}

/* 스마트폰: 버튼 폭(320px 폰에서 약 110px)에 들어가는 크기로, 화면 폭에 비례(clamp).
   고정 1.35rem / 1.7rem(2026-08 모바일 가독성 확대)은 폭을 넘쳐 등급명이 글자 중간에서, 금액이
   엔 기호와 숫자 사이에서 끊겼다.
   아이콘은 이름 위 한 줄에 둔다 — 이름 옆에 두면 좁은 폰에서 아이콘만 윗줄에 떨어진다.
   그 한 줄 때문에 버튼이 데스크톱보다 높아져(390px 114px) 글자·아이콘·여백을 줄였다
   (390px 93px, 등급명 16.4px / 금액 21.1px — 데스크톱 16px / 25.6px 와 비슷한 크기). */
@media (max-width: 767.98px) {
    .plan-toggle-btn {
        padding: 10px 8px !important;
        gap: 2px;
    }
    .plan-toggle-btn .plan-toggle-label {
        font-size: clamp(.95rem, 4.2vw, 1.15rem);
    }
    .plan-toggle-btn .plan-toggle-icon {
        display: block;
        margin: 0 auto 2px;
        font-size: 1.1em;
    }
    .plan-toggle-btn .plan-toggle-price {
        font-size: clamp(1.1rem, 5.4vw, 1.45rem);
    }
}

/* tf-btn의 hover 흰색 스윕(::after) 제거 → 토글 선택 상태가 hover에도 유지됨 */
.plan-toggle-btn::after {
    display: none !important;
}

/* 선택 안 된 버튼: 팬클럽 컬러(인라인)를 무시하고 회색으로 → 가독성 확보 */
.plan-toggle-btn:not(.active) {
    background-color: #f1f3f5 !important;
    border-color: #dee2e6 !important;
    color: #868e96 !important;
    box-shadow: none !important;
}

.plan-toggle-btn:not(.active):hover {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

.plan-toggle-btn:not(.active) .text {
    color: inherit !important;
}

/* 선택된 버튼: 팬클럽 컬러(인라인) 유지 + 강조, hover에도 흰 글자 유지 */
.plan-toggle-btn.active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-weight: 700;
}

.plan-toggle-btn.active,
.plan-toggle-btn.active:hover,
.plan-toggle-btn.active .text {
    color: #fff !important;
}