/* 거래소 카드 기본 스타일 */
.exchange-card {
    background-color: var(--dt-surface, #1e2026);
    border: 1px solid var(--dt-border, rgba(0,0,0,0.125));
    border-radius: 0.5rem;
    /* transition:transform removed from base rule — it causes mobile Chrome/Brave to
       speculatively promote every card to a GPU compositing layer. When a card's top
       edge crosses the viewport top while scrolling, layer boundary management triggers
       visible repaint jitter. Hover effects are only meaningful on pointer devices, so
       the transition is now gated behind @media (hover:hover) below. */
    height: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 1rem;
}

/* Hover lift effect only on real pointer/hover devices (desktops).
   Touch screens never fire :hover persistently, so this block is
   effectively inactive on Android/iOS and does not create GPU layers. */
@media (hover: hover) {
    .exchange-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
}

/* Top Pick 카드 강조 테두리 */
.exchange-card.is-top-pick {
    border: 2px solid #f0b90b !important;
    box-shadow: 0 0 16px rgba(240,185,11,0.18) !important;
}

/* 초대코드 복사 버튼 — 기본 (다크 카드) */
.copy-code-btn {
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.copy-code-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}
/* 노란/골드 배경 카드 — 어두운 복사 버튼 */
.binance-card .copy-code-btn,
.bitrue-card .copy-code-btn {
    color: rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.1);
    border-color: rgba(0,0,0,0.25);
}
.binance-card .copy-code-btn:hover,
.bitrue-card .copy-code-btn:hover {
    color: #000;
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.45);
}

.exchange-card-header {
    padding: 1rem;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    text-align: center;
    position: relative;
}

.exchange-card-body {
    padding: 1rem;
    position: relative;
}

/* 거래소 카드 타이틀 스타일 강화 */
.exchange-card .card-title {
    font-weight: 900; /* 최대 두께로 설정 */
    font-size: 1.3rem; /* 약간 크게 설정 */
    letter-spacing: 0.02em; /* 자간 살짝 넓게 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 약간의 텍스트 그림자 추가 */
}

/* 거래소별 타이틀 색상 조정 — 모든 카드 다크 배경이므로 통일 */
.binance-card .card-title,
.bybit-card .card-title,
.upbit-card .card-title,
.bithumb-card .card-title {
    color: var(--dt-text, #eaecef);
}

/* 거래소 로고 스타일 */
.exchange-logo {
    width: clamp(50px, 8vw, 80px);
    height: clamp(50px, 8vw, 80px);
    object-fit: contain;
    padding: clamp(6px, 1.2vw, 10px);
    background-color: var(--dt-surface2, #252930);
    border-radius: 12px;
}

/* 거래소 타이틀 이미지 스타일 - 더 선명하게 */
.exchange-title-image {
    height: clamp(22px, 4vw, 40px);
    max-width: min(160px, 60%);
    object-fit: contain;
    margin-bottom: 5px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); /* 이미지에 그림자 효과 추가 */
}

/* 거래소 특징 태그 스타일 */
.exchange-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.feature-tag {
    background-color: var(--dt-surface2, rgba(255,255,255,0.1));
    color: var(--dt-muted, #848e9c);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* 거래소 설명 스타일 */
.exchange-description {
    color: #333;
    line-height: 1.5;
    margin: 1rem 0;
}

/* 국가 플래그 아이콘 */
.country-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    width: clamp(18px, 2.5vw, 24px);
    height: clamp(18px, 2.5vw, 24px);
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* 버튼 스타일 */
.visit-exchange-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-top: 15px;
}

.visit-exchange-btn:hover {
    background: linear-gradient(135deg, #0b5ed7 0%, #094bab 100%);
    color: white;
}

/* 안내 알림 스타일 */
.announcement-card {
    border-left: 4px solid #0d6efd;
    background-color: #f0f7ff;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* 채굴 앱 카드 스타일 */
.mining-app-card {
    background-color: white;
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 0.5rem;
    overflow: hidden;
    height: 100%;
    /* transition:transform removed — same GPU layer jitter reason as .exchange-card above */
}

@media (hover: hover) {
    .mining-app-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
}

.mining-app-image {
    width: clamp(50px, 8vw, 80px);
    height: clamp(50px, 8vw, 80px);
    object-fit: contain;
    border-radius: 12px;
    margin-right: 1rem;
    padding: clamp(5px, 1.2vw, 10px);
    background-color: white;
}

/* 채굴 앱 기능 목록 스타일 */
.mining-features {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.mining-features li {
    margin-bottom: 0.5rem;
}

/* 초대 혜택 및 초대 코드 공통 스타일 */
.referral-item {
    font-weight: 600;
    margin-top: 10px;
    color: inherit;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    line-height: 1.2 !important;
    word-break: keep-all !important; /* 단어 단위로 줄바꿈 (CJK 언어에 효과적) */
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.4 !important; /* 줄간격 증가 */
    display: flex !important;
    flex-wrap: wrap !important; /* 내용이 길면 줄바꿈 */
}

/* 초대 혜택 스타일 */
.referral-bonus {
    background-color: rgba(240, 185, 11, 0.1);
    margin-bottom: 10px;
}

/* 초대 코드 스타일 */
.referral-code {
    background-color: rgba(240, 185, 11, 0.07);
    /* letter-spacing 제거하여 가입 혜택과 동일한 글꼴로 통일 */
}

/* 이모지와 텍스트 사이 간격 조정 */
.referral-item .emoji {
    margin-right: 6px;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.875rem, 1.8vw, 1rem); /* 이모지 크기 약간 키움 */
    line-height: 1;
    width: 1.25em; /* 폰트 크기 기준 상대 너비 */
    vertical-align: middle;
    margin-right: 8px !important;
    flex-shrink: 0 !important; /* 이모지 크기 고정 */
}

/* 텍스트 영역이 넘치지 않도록 처리 */
.referral-item-text {
    flex: 1 !important;
    min-width: 0 !important; /* 텍스트가 parent 영역을 넘치지 않게 함 */
}

/* 방문하기 버튼 스타일 */
.exchange-button {
    margin-top: 15px;
    width: 100%;
    border: none;
}

/* 바이낸스 스타일 - 노란색 */
.binance-card {
    background-color: #F0B90B;
    border-top: none;
    color: #1a1a1a;
}
.binance-card .card-title,
.binance-card .card-text,
.binance-card .referral-item { color: #1a1a1a; }
.binance-card .feature-tag { background-color: rgba(0,0,0,0.12); color: #1a1a1a; }
.binance-card .exchange-logo { background-color: rgba(255,255,255,0.25); }
.binance-card .exchange-button {
    background-color: #1E2026;
    color: #F0B90B;
}
.binance-card .exchange-button:hover { background-color: #000; color: #F0B90B; }

/* 바이빗 스타일 - 주황색 (border accent only) */
.bybit-card {
    background-color: var(--dt-surface, #1e2026);
    border-top: 3px solid #ff6f2c;
    color: var(--dt-text, #eaecef);
}
.bybit-card .exchange-button {
    background-color: #00C076;
    color: #fff;
}
.bybit-card .exchange-button:hover { background-color: #00A865; }

/* 업비트 스타일 - 파란색 (border accent only) */
.upbit-card {
    background-color: var(--dt-surface, #1e2026);
    border-top: 3px solid #0062DF;
    color: var(--dt-text, #eaecef);
}
.upbit-card .exchange-button {
    background-color: #0062DF;
    color: #fff;
}
.upbit-card .exchange-button:hover { background-color: #004EB0; }

/* 빗썸 스타일 - 주황색 */
.bithumb-card {
    background-color: #f05822;
    border-top: none;
    color: #fff;
}
.bithumb-card .card-title,
.bithumb-card .card-text,
.bithumb-card .referral-item { color: #fff; }
.bithumb-card .feature-tag { background-color: rgba(255,255,255,0.2); color: #fff; }
.bithumb-card .exchange-logo { background-color: rgba(255,255,255,0.2); }
.bithumb-card .exchange-button {
    background-color: #c44416;
    color: #fff;
}
.bithumb-card .exchange-button:hover { background-color: #a33410; }

/* BitFlyer 스타일 - 파란색 */
.bitFlyer-card {
    background-color: #1a73e8;
    border-top: none;
    color: #fff;
}
.bitFlyer-card .card-title,
.bitFlyer-card .card-text,
.bitFlyer-card .referral-item { color: #fff; }
.bitFlyer-card .feature-tag { background-color: rgba(255,255,255,0.2); color: #fff; }
.bitFlyer-card .exchange-logo { background-color: rgba(255,255,255,0.2); }
.bitFlyer-card .exchange-button {
    background-color: #1558b0;
    color: #fff;
}
.bitFlyer-card .exchange-button:hover { background-color: #104690; }

/* Coincheck 스타일 - 티얼 */
.coincheck-card {
    background-color: #00b9a7;
    border-top: none;
    color: #fff;
}
.coincheck-card .card-title,
.coincheck-card .card-text,
.coincheck-card .referral-item { color: #fff; }
.coincheck-card .feature-tag { background-color: rgba(255,255,255,0.2); color: #fff; }
.coincheck-card .exchange-logo { background-color: rgba(255,255,255,0.2); }
.coincheck-card .exchange-button {
    background-color: #008f80;
    color: #fff;
}
.coincheck-card .exchange-button:hover { background-color: #006f64; }

/* OKJ 스타일 — 다크 네이비, 골드 버튼 */
.okj-card {
    background-color: #0d1b2e;
    border-top: 3px solid #2563eb;
    color: var(--dt-text, #eaecef);
}
.okj-card .card-title,
.okj-card .card-text,
.okj-card .referral-item { color: var(--dt-text, #eaecef); }
.okj-card .feature-tag { background-color: rgba(37,99,235,0.2); color: #93c5fd; }
.okj-card .exchange-logo { background-color: rgba(255,255,255,0.1); }
.okj-card .exchange-button {
    background-color: #b6ff1a;
    color: #0d1b2e;
}
.okj-card .exchange-button:hover { background-color: #9fe600; color: #0d1b2e; }

/* Bitrue 스타일 — 골드 배경, 어두운 텍스트 */
.bitrue-card {
    background-color: #c49d1a;
    border-top: none;
    color: #1a1a1a;
}
.bitrue-card .card-title,
.bitrue-card .card-text,
.bitrue-card .referral-item { color: #1a1a1a; }
.bitrue-card .feature-tag { background-color: rgba(0,0,0,0.15); color: #1a1a1a; }
.bitrue-card .exchange-logo { background-color: rgba(255,255,255,0.25); }
.bitrue-card .exchange-button { background-color: #1a1a1a; color: #f3bd2a; }
.bitrue-card .exchange-button:hover { background-color: #000; color: #f3bd2a; }

/* Bitget 스타일 — 딥 틸 배경, 흰 텍스트 */
.bitget-card {
    background-color: #0b5566;
    border-top: none;
    color: #fff;
}
.bitget-card .card-title,
.bitget-card .card-text,
.bitget-card .referral-item { color: #fff; }
.bitget-card .feature-tag { background-color: rgba(255,255,255,0.2); color: #fff; }
.bitget-card .exchange-logo { background-color: rgba(255,255,255,0.2); }
.bitget-card .exchange-button { background-color: #1da2b4; color: #fff; }
.bitget-card .exchange-button:hover { background-color: #17939a; }

/* Phemex 스타일 — 딥 퍼플 배경, 시안 액센트 */
.phemex-card {
    background-color: #141030;
    border-top: 3px solid #3ceaf3;
    color: #fff;
}
.phemex-card .card-title,
.phemex-card .card-text,
.phemex-card .referral-item { color: #fff; }
.phemex-card .feature-tag { background-color: rgba(60,234,243,0.15); color: #3ceaf3; }
.phemex-card .exchange-logo { background-color: rgba(255,255,255,0.1); }
.phemex-card .exchange-button { background-color: #3ceaf3; color: #000; }
.phemex-card .exchange-button:hover { background-color: #2bd0da; color: #000; }

/* OKX 스타일 (border accent only) */
.okx-card {
    background-color: var(--dt-surface, #1e2026);
    border-top: 3px solid #eaecef;
    color: var(--dt-text, #eaecef);
}
.okx-card .exchange-button { background-color: #eaecef; color: #000; }
.okx-card .exchange-button:hover { background-color: #c8ccd2; color: #000; }

/* Gate.io 스타일 - 파란색 */
.gateio-card {
    background-color: #2354e6;
    border-top: none;
    color: #fff;
}
.gateio-card .card-title,
.gateio-card .card-text,
.gateio-card .referral-item { color: #fff; }
.gateio-card .feature-tag { background-color: rgba(255,255,255,0.2); color: #fff; }
.gateio-card .exchange-logo { background-color: rgba(255,255,255,0.2); }
.gateio-card .exchange-button { background-color: #1a44c9; color: #fff; }
.gateio-card .exchange-button:hover { background-color: #1436a8; }

/* 카드 내 텍스트 줄바꿈 스타일 개선 - 단어 단위 줄바꿈 */
.card-text, 
.card-title, 
.feature-tag, 
.referral-bonus {
    word-break: keep-all; /* 단어 단위로 줄바꿈 (CJK 언어에 효과적) */
    overflow-wrap: break-word; /* 단어가 너무 길 경우에만 줄바꿈 */
    word-wrap: break-word; /* IE 지원 */
}

/* 카드 설명 텍스트 스타일 - 전체 텍스트 표시 */
.card-text {
    /* 텍스트 제한 속성 제거 */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* max-height: 4.5em; */
    
    /* 대신 간단한 텍스트 스타일만 유지 */
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* 기능 태그 내 텍스트도 단어 단위 줄바꿈 */
.feature-tag {
    white-space: normal; /* 필요시 줄바꿈 허용 */
    hyphens: auto; /* 자동 하이픈 처리 - 지원하는 브라우저에서만 적용 */
    text-align: center; /* 태그 내 텍스트 중앙 정렬 */
    word-break: keep-all; /* 단어 단위 줄바꿈 추가 */
}

/* 안내 메시지 텍스트 단어별 줄바꿈 스타일 */
.alert-info .d-flex div {
    word-break: keep-all;
    white-space: normal;
    line-height: 1.8;
    overflow-wrap: break-word; /* 텍스트가 영역을 벗어나지 않도록 설정 */
    word-wrap: break-word; /* 구형 브라우저 지원 */
    overflow: hidden; /* 컨테이너 영역 밖으로 넘치는 내용 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트는 생략 부호로 표시 */
    hyphens: auto; /* 필요할 경우 자동 하이픈 적용 */
    max-width: 100%; /* 최대 너비를 부모 요소로 제한 */
}

/* 초대 코드 강조 */
.alert-info strong {
    display: inline-block;
    margin-right: 0.25rem;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    /* .exchange-logo, .exchange-title-image, .country-flag, .mining-app-image:
       크기 clamp()로 자동 조정됨 — 별도 오버라이드 불필요 */

    .exchange-card-header {
        padding: 0.75rem;
    }
    
    .exchange-card-body {
        padding: 0.75rem;
    }
    
    .feature-tag {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
    
    .exchange-description {
        font-size: 0.9rem;
        margin: 0.75rem 0;
    }
    
    /* 타블렛에서 패널 간격 조정 */
    .exchange-card {
        margin-bottom: 0.75rem; /* 더 좁게 조정 */
    }
    
    /* 타블렛에서 row 하단 여백 조정 */
    .row {
        margin-bottom: 0.6rem; /* 1rem에서 0.6rem으로 줄임 */
    }
    
    /* 컬럼 간격 조정 */
    .col-md-6.col-lg-4.mb-4 {
        margin-bottom: 0.75rem !important; /* 부트스트랩 기본값 재정의 */
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    
    /* 알림 박스 상단 여백 조정 */
    .alert.mt-4 {
        margin-top: 0.6rem !important; /* 1rem에서 0.6rem으로 줄임 */
    }
    
    /* 안내 문구 글자 크기 조정 */
    .alert-info .d-flex div {
        font-size: 0.9rem; /* 태블릿에서의 글자 크기 */
        line-height: 1.6;
    }
    
    /* 알림 박스 패딩 줄임 */
    .alert-info {
        padding: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    /* .exchange-logo, .exchange-title-image, .country-flag, .mining-app-image:
       크기 clamp()로 자동 조정됨 — 별도 오버라이드 불필요 */

    .exchange-card-header {
        padding: 0.5rem;
    }
    
    .exchange-card-body {
        padding: 0.5rem;
    }
    
    .feature-tag {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
    
    .exchange-description {
        font-size: 0.8rem;
        margin: 0.5rem 0;
        line-height: 1.4;
    }
    
    .country-flag {
        top: 8px;
        right: 8px;
    }

    .mining-app-image {
        margin-right: 0.5rem;
    }

    .mining-features {
        margin: 0.5rem 0;
        padding-left: 1.25rem;
    }
    
    .mining-features li {
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }
    
    .visit-exchange-btn {
        font-size: 0.8rem;
        padding: 6px 12px;
        margin-top: 10px;
    }
    
    /* 거래소/채굴 페이지 타이틀 크기 조정 */
    .trading-title {
        font-size: 1.2rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .feature-tag {
        font-size: 0.7rem;
        padding: 4px 8px;
    }
    
    .card-text {
        font-size: 0.9rem;
        /* 모바일 텍스트 제한 속성 제거 */
        /* -webkit-line-clamp: 2; */
        /* max-height: 3em; */
    }
    
    .referral-bonus {
        font-size: 0.9rem;
    }
    
    .referral-bonus, .referral-code {
        font-size: 0.85rem;
        padding: 6px;
    }
    
    .referral-item .emoji {
        font-size: 0.875rem;
        margin-right: 4px;
    }
    
    /* 모바일에서 패널 간격 더 줄임 */
    .exchange-card {
        margin-bottom: 0.0rem; /* 훨씬 더 좁게 조정 */
    }
    
    /* 컬럼 간격 조정 */
    .col-md-6.col-lg-4.mb-4 {
        margin-bottom: 0.4rem !important; /* 부트스트랩 기본값 재정의 */
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    
    /* 카드 내부 패딩도 모바일에서 축소 */
    .card-body {
        padding: 0.75rem !important; /* 부트스트랩 기본값 재정의 */
    }
    
    /* 모바일에서 row 하단 여백 조정 */
    .row {
        margin-bottom: 0.3rem; /* 0.5rem에서 0.3rem으로 줄임 */
    }
    
    /* 알림 박스 상단 여백 조정 */
    .alert.mt-4 {
        margin-top: 0.3rem !important; /* 0.5rem에서 0.3rem으로 줄임 */
        margin-bottom: 0.3rem !important; /* 0.5rem에서 0.3rem으로 줄임 */
    }
    
    /* 페이지 컨테이너 하단 여백 조정 */
    .container.page-container {
        padding-bottom: 0.3rem; /* 0.5rem에서 0.3rem으로 줄임 */
    }
    
    /* 작은 화면에서 안내 문구 글자 크기 더 축소 */
    .alert-info .d-flex div {
        font-size: 0.85rem; /* 모바일에서의 글자 크기 */
        line-height: 1.5;
    }
    
    /* 알림 박스 패딩 추가 축소 */
    .alert-info {
        padding: 0.5rem !important;
    }
}

@media (max-width: 375px) {
    /* .exchange-title-image, .mining-app-image: clamp()로 자동 조정됨 */

    .exchange-card-header {
        padding: 0.4rem;
    }
    
    .exchange-card-body {
        padding: 0.4rem;
    }
    
    .feature-tag {
        font-size: 0.65rem;
        padding: 2px 5px;
    }
    
    .exchange-description {
        font-size: 0.75rem;
        line-height: 1.3;
    }
    
    /* 거래소/채굴 페이지 타이틀 크기 추가 축소 */
    .trading-title {
        font-size: 1rem !important;
    }
    
    /* 알림 텍스트 크기 조정 */
    .alert-info {
        font-size: 0.75rem !important;
    }
    
    .exchange-card {
        margin-bottom: 0.2rem; /* 0.5rem에서 0.2rem으로 줄임 */
    }
    
    .col-md-6.col-lg-4.mb-4 {
        margin-bottom: 0.2rem !important; /* 0.5rem에서 0.2rem으로 줄임 */
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }
    
    .alert.mt-4 {
        margin-top: 0.15rem !important; /* 0.25rem에서 0.15rem으로 줄임 */
        margin-bottom: 0.15rem !important; /* 0.25rem에서 0.15rem으로 줄임 */
        padding: 0.5rem; /* 0.75rem에서 0.5rem으로 줄임 */
    }
    
    .referral-bonus, .referral-code {
        font-size: 0.8rem;
        padding: 4px;
    }
    
    .referral-item .emoji {
        font-size: 0.75rem;
    }
    
    /* 초미니 화면에서 상하단 패딩 추가 감소 */
    .container.page-container {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    
    /* 카드 내부 패딩 감소 */
    .card-body {
        padding: 0.5rem !important;
    }
    
    /* 매우 작은 화면에서 안내 문구 글자 크기 더 축소 */
    .alert-info .d-flex div {
        font-size: 0.8rem; /* 작은 모바일에서의 글자 크기 */
        line-height: 1.4;
    }
    
    /* 참조 표시 크기 축소 */
    .referral-item, .referral-bonus, .referral-code {
        font-size: 0.75rem;
    }
}

/* ── 전환 인트로 문구 ──────────────────────────────────────── */
.exchange-intro-text {
    color: var(--dt-muted, #848e9c);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* ── 추천 1위 배지 ─────────────────────────────────────────── */
.exchange-top-pick-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #F0B90B;
    color: #1a1a1a;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0 0.5rem 0 0.5rem;
    z-index: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* 바이낸스 카드는 이미 노란 배경 — 배지는 어두운 색으로 반전 */
.exchange-card.binance-card .exchange-top-pick-badge {
    background: #1a1a1a;
    color: #F0B90B;
}

/* ── 국내/참고용 거래소 secondary 섹션 ─────────────────────── */
.exchange-secondary-section {
    border-top: 1px solid var(--dt-border, rgba(255,255,255,0.08));
    padding-top: 1rem;
    margin-top: 0.25rem;
}
.exchange-secondary-title {
    color: var(--dt-muted, #848e9c);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
/* secondary 카드: opacity 제거 — 섹션 위치 + 헤더로 충분히 낮은 우선순위 전달.
   opacity:0.8은 Bitrue 등 제휴 카드가 비활성화된 것처럼 보이는 오해를 유발했음. */

/* ══════════════════════════════════════════════════════════════
   브랜드 카드 강제 적용 — custom.css !important 오버라이드
   (specificity 2,0,0 + !important 로 dark-theme 기본값 무력화)
   ══════════════════════════════════════════════════════════════ */

/* Binance — 노란 배경, 어두운 텍스트 */
.exchange-card.binance-card { background-color: #F0B90B !important; color: #1a1a1a !important; border-top: none !important; }
.exchange-card.binance-card .card-title,
.exchange-card.binance-card .card-text,
.exchange-card.binance-card .card-body,
.exchange-card.binance-card .referral-item { color: #1a1a1a !important; }
.exchange-card.binance-card .feature-tag { background-color: rgba(0,0,0,0.12) !important; color: #1a1a1a !important; }
.exchange-card.binance-card .exchange-logo { background-color: rgba(255,255,255,0.25) !important; }
/* Binance disclaimer — dark overlay for readability on yellow background */
.exchange-card.binance-card .disclaimer-block { background: rgba(0,0,0,0.25) !important; border-left-color: rgba(0,0,0,0.3) !important; }
.exchange-card.binance-card .disclaimer-block p { color: rgba(0,0,0,0.75) !important; }

/* Bithumb — 주황 배경, 흰 텍스트 */
.exchange-card.bithumb-card { background-color: #f05822 !important; color: #fff !important; border-top: none !important; }
.exchange-card.bithumb-card .card-title,
.exchange-card.bithumb-card .card-text,
.exchange-card.bithumb-card .card-body,
.exchange-card.bithumb-card .referral-item { color: #fff !important; }
.exchange-card.bithumb-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.bithumb-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* BitFlyer — 파란 배경, 흰 텍스트 */
.exchange-card.bitFlyer-card { background-color: #1a73e8 !important; color: #fff !important; border-top: none !important; }
.exchange-card.bitFlyer-card .card-title,
.exchange-card.bitFlyer-card .card-text,
.exchange-card.bitFlyer-card .card-body,
.exchange-card.bitFlyer-card .referral-item { color: #fff !important; }
.exchange-card.bitFlyer-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.bitFlyer-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* Coincheck — 티얼 배경, 흰 텍스트 */
.exchange-card.coincheck-card { background-color: #00b9a7 !important; color: #fff !important; border-top: none !important; }
.exchange-card.coincheck-card .card-title,
.exchange-card.coincheck-card .card-text,
.exchange-card.coincheck-card .card-body,
.exchange-card.coincheck-card .referral-item { color: #fff !important; }
.exchange-card.coincheck-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.coincheck-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* Gate.io — 파란 배경, 흰 텍스트 */
.exchange-card.gateio-card { background-color: #2354e6 !important; color: #fff !important; border-top: none !important; }
.exchange-card.gateio-card .card-title,
.exchange-card.gateio-card .card-text,
.exchange-card.gateio-card .card-body,
.exchange-card.gateio-card .referral-item { color: #fff !important; }
.exchange-card.gateio-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.gateio-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* Upbit — 진한 파란 배경, 흰 텍스트 */
.exchange-card.upbit-card { background-color: #002D9C !important; color: #fff !important; border-top: none !important; }
.exchange-card.upbit-card .card-title,
.exchange-card.upbit-card .card-text,
.exchange-card.upbit-card .card-body,
.exchange-card.upbit-card .referral-item { color: #fff !important; }
.exchange-card.upbit-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.upbit-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* Bitrue — 골드 배경, 어두운 텍스트 */
.exchange-card.bitrue-card { background-color: #c49d1a !important; color: #1a1a1a !important; border-top: none !important; }
.exchange-card.bitrue-card .card-title,
.exchange-card.bitrue-card .card-text,
.exchange-card.bitrue-card .card-body,
.exchange-card.bitrue-card .referral-item { color: #1a1a1a !important; }
.exchange-card.bitrue-card .feature-tag { background-color: rgba(0,0,0,0.15) !important; color: #1a1a1a !important; }
.exchange-card.bitrue-card .exchange-logo { background-color: rgba(255,255,255,0.25) !important; }

/* Bitget — 딥 틸 배경, 흰 텍스트 */
.exchange-card.bitget-card { background-color: #0b5566 !important; color: #fff !important; border-top: none !important; }
.exchange-card.bitget-card .card-title,
.exchange-card.bitget-card .card-text,
.exchange-card.bitget-card .card-body,
.exchange-card.bitget-card .referral-item { color: #fff !important; }
.exchange-card.bitget-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.bitget-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }

/* Phemex — 딥 퍼플 배경, 흰 텍스트 */
.exchange-card.phemex-card { background-color: #141030 !important; color: #fff !important; border-top: 3px solid #3ceaf3 !important; }
.exchange-card.phemex-card .card-title,
.exchange-card.phemex-card .card-text,
.exchange-card.phemex-card .card-body,
.exchange-card.phemex-card .referral-item { color: #fff !important; }
.exchange-card.phemex-card .feature-tag { background-color: rgba(60,234,243,0.15) !important; color: #3ceaf3 !important; }
.exchange-card.phemex-card .exchange-logo { background-color: rgba(255,255,255,0.1) !important; }

/* Pi Network (채굴) — 보라 배경, 흰 텍스트 */
.exchange-card.pi-card { background-color: #6741d9 !important; color: #fff !important; }
.exchange-card.pi-card .card-title,
.exchange-card.pi-card .card-text,
.exchange-card.pi-card .card-body,
.exchange-card.pi-card .referral-item { color: #fff !important; }
.exchange-card.pi-card .feature-tag { background-color: rgba(255,255,255,0.2) !important; color: #fff !important; }
.exchange-card.pi-card .exchange-logo { background-color: rgba(255,255,255,0.2) !important; }
.exchange-card.pi-card .exchange-button { background-color: #5231c8; color: #fff; }
.exchange-card.pi-card .exchange-button:hover { background-color: #3f24a0; }

/* Affiliate section header badge — dark text on warning yellow */
.affiliate-section-header .badge {
    color: #1a1a1a !important;
}

/* Bitrue: remove referral overlay — gold card already has full contrast */
.exchange-card.bitrue-card .referral-bonus,
.exchange-card.bitrue-card .referral-code {
    background: transparent !important;
}

/* ── Disclaimer block 카드별 색상 ──────────────────────────── */
/* 노란/골드 배경 카드: 어두운 overlay + 어두운 텍스트 */
.exchange-card.binance-card .disclaimer-block,
.exchange-card.bitrue-card .disclaimer-block {
    background: rgba(0,0,0,0.2) !important;
    border-left-color: rgba(0,0,0,0.3) !important;
}
.exchange-card.binance-card .disclaimer-block p,
.exchange-card.bitrue-card .disclaimer-block p {
    color: rgba(0,0,0,0.65) !important;
}
/* 컬러 배경 카드 (dark): 밝은 overlay + 밝은 텍스트 */
.exchange-card.bybit-card .disclaimer-block,
.exchange-card.bitget-card .disclaimer-block,
.exchange-card.phemex-card .disclaimer-block,
.exchange-card.upbit-card .disclaimer-block,
.exchange-card.bithumb-card .disclaimer-block,
.exchange-card.okx-card .disclaimer-block,
.exchange-card.gateio-card .disclaimer-block,
.exchange-card.okj-card .disclaimer-block {
    background: rgba(255,255,255,0.1) !important;
    border-left-color: rgba(255,255,255,0.3) !important;
}
.exchange-card.bybit-card .disclaimer-block p,
.exchange-card.bitget-card .disclaimer-block p,
.exchange-card.phemex-card .disclaimer-block p,
.exchange-card.upbit-card .disclaimer-block p,
.exchange-card.bithumb-card .disclaimer-block p,
.exchange-card.okx-card .disclaimer-block p,
.exchange-card.gateio-card .disclaimer-block p,
.exchange-card.okj-card .disclaimer-block p {
    color: rgba(255,255,255,0.6) !important;
}

/* Binance: referral row needs dark background overlay for contrast on bright yellow */
.exchange-card.binance-card .referral-bonus,
.exchange-card.binance-card .referral-code {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 6px;
}
.exchange-card.binance-card .referral-item-text {
    color: #1a1a1a !important;
}