@charset "utf-8";

/* ============================================================
   [공통] 리셀러 서브 페이지 레이아웃 & 범용 스타일
   ============================================================ */
.img_holder { overflow: hidden; border-radius: 25px; line-height: 0; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.img_holder img { width: 100%; transition: transform 0.6s ease; object-fit: cover; }
.img_holder:hover img { transform: scale(1.05); }

/* 포인트 라벨 및 인포 카드 */
.point_label { display: inline-block; color: var(--point); font-weight: 700; font-size: 14px; letter-spacing: 2px; border-bottom: 2px solid var(--point); padding-bottom: 5px; margin-bottom: 15px; }
.info_card { flex: 1; padding: 40px 30px; border-radius: 20px; border: 1px solid #eee; border-left: 5px solid var(--point); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.info_card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(197, 160, 89, 0.15); background: #fffefb; }
.info_card i { font-size: 32px; color: var(--point); margin-bottom: 20px; display: block; }

/* 텍스트 하이라이트 (기존 sky 계열 제거 및 골드 통합) */
.marker_sky { box-shadow: inset 0px -.5em 0 rgba(197, 160, 89, 0.15) !important;}
.sky {background: linear-gradient(to bottom, var(--white) 30%, #fff7eb) !important;}
/* ============================================================
   [회원 안내] 인트로 플렉스 레이아웃 (반응형 완벽 대응)
   ============================================================ */
/* [회원 안내] 인트로 및 리스트 최종 수정본 */

.intro_flex_box { display: flex; align-items: flex-start; gap: 50px; margin-top: 50px; }
.intro_img_side { flex: 0 0 450px; position: sticky; top: 120px; }
.intro_txt_side { flex: 1; min-width: 0; }

.img_holder { overflow: hidden; border-radius: 25px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.img_holder img { width: 100%; height: auto; display: block; }

/* 리스트 정렬 핵심 */
.check_list { list-style: none; padding: 0; margin: 0; }
.check_list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px !important;
}

/* 아이콘 위치 고정 */
.check_list li i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 14px;
    color: var(--point);
}

/* 텍스트 묶음 */
.check_list li .txt_wrap {
    flex: 1;
    min-width: 0;
    line-height: 1.6;
}

.check_list li strong {
    display: inline-block;
    color: var(--gray_2);
    font-size: 16px;
    margin-right: 5px;
}

.check_list li span {
    color: var(--gray_4);
    font-size: 15px;
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 */
}

/* 모바일 대응 (900px 이하) */
@media (max-width: 900px) {
    .intro_flex_box { flex-direction: column; gap: 30px; }
    .intro_img_side { width: 100%; flex: none; position: static; }

    .info_card { padding: 20px !important; }

    /* 모바일에서는 제목과 설명을 세로로 배치해서 정렬 깨짐 방지 */
    .check_list li strong {
        display: block;
        margin-bottom: 4px;
        margin-right: 0;
    }

    .check_list li span {
        display: block;
        font-size: 14px;
    }

    .benefit_summary { flex-direction: column; gap: 20px; text-align: center; }
    .benefit_summary .line { display: none; }
}
/* ============================================================
   [회원 수익] 리셀러 수익 안내 섹션 (통합 및 정리)
   ============================================================ */

/* [1] 수익 발생 프로세스 */
.section_profit_process {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
}
.section_profit_process .icon_circle {
    width: 60px; height: 60px; border-radius: 50%; font-size: 24px;
    background: #f8f9fa; color: var(--gray_3);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.proc_step { width: 150px; text-align: center; }
.proc_step:hover .icon_circle { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); border-color: var(--point); }

/* [2] 수익 카드 (기초/확장/관리) */
.profit_card { border-radius: var(--br_l); transition: all 0.3s; border: 1px solid #eee; }
.profit_card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; }
.profit_card h4 { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: var(--gray_2); }
.profit_card p { font-size: 15px; color: var(--gray_5); line-height: 1.6; }

.price_tag { border-top: 1px solid #eee; padding-top: 20px; }
.price_tag strong { font-size: 28px; color: var(--gray_2); }

/* 카드 상단 보더 포인트 */
.border_t4_point { border-top: 4px solid var(--point) !important; }
.border_t4_gold { border-top: 4px solid var(--gold_dark) !important; }
.border_t4_gray { border-top: 4px solid var(--gray_5) !important; }

/* [3] 수익 시뮬레이션 테이블 */
.table_responsive { width: 100%; overflow-x: auto; border-radius: var(--br_l); border: 1px solid var(--gray_dd); }
.reseller_table { width: 100%; border-collapse: collapse; min-width: 950px; }
.reseller_table th, .reseller_table td { padding: 20px 15px; border-bottom: 1px solid var(--gray_ee); text-align: center; font-size: 15px; }

.reseller_table thead th { background: var(--gray_f9); font-weight: 700; color: var(--gray_2); border-bottom: 2px solid var(--point); }
.reseller_table tbody tr:hover { background: #fdfaf5; }

/* 테이블 내 강조 색상 */
.bg_lighter_point { background-color: rgba(197, 160, 89, 0.05) !important; }
.bg_dark_point { background-color: var(--gray_2) !important; color: #fff; }


/* ============================================================
   [반응형] 모바일 대응 (900px 이하)
   ============================================================ */
@media (max-width: 900px) {
    .intro_flex_box { flex-direction: column; text-align: center; gap: 30px; }
    .section_profit_process { flex-wrap: wrap; gap: 30px 10px; padding: 40px 20px !important; }
    .section_profit_process .fa-chevron-right { display: none; }
    .proc_step { width: 45%; }

    .section_profit_structure { flex-direction: column; gap: 20px; }
    .profit_card { padding: 30px 20px !important; }

    .sub_content_head .fs_40 { font-size: 28px !important; }

    /* 테이블 안내 가이드 */
    .table_responsive::after {
        content: '← 가로로 스크롤하여 수익을 확인하세요 →';
        display: block; text-align: center; padding: 12px; font-size: 12px;
        color: var(--point); background: #fdfaf5; border-top: 1px solid var(--gray_ee);
    }
}