<style type="text/css">

@media (min-width: 1024px) {
	.contents_wrap .contents {max-width:100%;}
	.guide_wrap .box_con1 {}
}

/* 1. 결제 섹션 전체: 어두운 배경과 테두리로 구분 */
.payment-dark-theme {
    background-color: #222222; /* 어두운 배경 */
    color: #ffffff; /* 기본 폰트 색상을 흰색으로 */
    border: 0px solid #333333; /* 어두운 테두리 */
    padding: 40px 0; /* 상하 여백 */
    margin-top: 20px !important;; /* 상단 콘텐츠와의 분리 */
}

/* 1번 영역 (아이콘 목록)의 하단 마진 제거 */
.dotima-style-links {
    margin-bottom: 0px !important; 
	padding-bottom: 0px !important; /* 혹시 모를 내부 패딩도 제거 */
}

/* ⭐ 1번 영역 내부 ul 요소의 브라우저 기본 마진/패딩을 강제 제거 */
.dotima-style-links ul {
    margin: 0 !important;
    padding: 0 !important; 
}

/* 2. 결제 섹션의 제목 스타일 (col-lg-3) */
.payment-dark-theme .study_tit {
    !* border-left: 5px solid #ff9900; */ /* 금색/주황색 세로선으로 강조 */
    border-left: none; /* 금색/주황색 세로선으로 강조 */
    padding-left: 25px;
    margin-left: 20px; 
	font-size: 1.8em;
}
.payment-dark-theme .study_tit strong {
    color: #ff9900; /* 강사명(종산) 색상 */
    font-size: 1.8em;
}
/* '결제안내' 텍스트 색상 */
.payment-dark-theme .study_tit h3, .payment-dark-theme .study_tit span {
    color: #ff9900; /* 주황색으로 통일 */
}

/* 3. LM_list 테이블 스타일 오버라이드 (결제 목록) */
.payment-dark-theme .payment_list table {
    background-color: #333333; /* 테이블 배경색을 어둡게 */
    border: 1px solid #444444;
    color: #ffffff;
}

/* 테이블 헤더 ('서비스명', '기간금액', '신청') 색상 */
.payment-dark-theme .payment_list thead th {
    background-color: #1a1a1a; /* 헤더 배경색을 더 어둡게 */
    color: #ff9900; /* 텍스트 색상을 금색/주황색으로 변경 */
    border-bottom: 2px solid #ff9900;
}

/* 테이블 내용 ('종산' 및 기타 텍스트) 색상 */
.payment-dark-theme .payment_list tbody td {
    color: #ffffff; /* 텍스트 색상을 흰색으로 변경 */
    border-top: 1px solid #444444;
}

/* ✅ 금액 개별 색상 지정 영역 */
/* LM_list의 각 행(<tr>)을 순서대로 선택하여 금액(td.period_amount)에 색상 적용 */
.payment-dark-theme .payment_list tbody tr:nth-child(1) .period_amount,
.payment-dark-theme .payment_list tbody tr:nth-child(1) .txt_red {
    color: #FF0000 !important; 
    font-weight: bold;
}
.payment-dark-theme .payment_list tbody tr:nth-child(2) .period_amount,
.payment-dark-theme .payment_list tbody tr:nth-child(2) .txt_red {
    color: #ff9900 !important;
    font-weight: bold;
}
.payment-dark-theme .payment_list tbody tr:nth-child(3) .period_amount,
.payment-dark-theme .payment_list tbody tr:nth-child(3) .txt_red {
    color: #00FF00 !important;
    font-weight: bold;
}

/* 마우스 오버 시 색상 변경 */
/*
.payment-dark-theme .payment_list tbody tr:hover {
    background-color: #444444; 
}
*/
/* 4. 신청 버튼 스타일 (highlight 클래스) */
.payment-dark-theme .btnA.highlight {
    background-color: #ff9900; /* 버튼 배경 금색/주황색 */
    color: #000000 !important; /* 버튼 텍스트 검은색 */
    border: none;
}
.payment-dark-theme .btnA.highlight span {
    color: #000000 !important;
}

/* 5. payment_info (무통장 안내) 스타일 */
.payment-dark-theme .payment_info {
    padding-top: 15px;
    border-top: 1px solid #444444; /* 어두운 구분선 */
    margin-top: 20px;
}
.payment-dark-theme .payment_info li {
    color: #cccccc; /* 안내 텍스트를 밝은 회색으로 */
}

/* 2_offline.php에 버튼 섹션을 추가하면서 생긴 스타일 */
.class_wrap {
    margin-top: 30px; 
    text-align: center;
}
.class_wrap ul {
    display: inline-block; 
    list-style: none; 
    padding: 0;
}
.class_wrap ul li {
    display: inline-block;
    margin: 0 5px;
}
/* [⭐ 수정] 버튼 공통 넓이 및 중앙 정렬 적용 */
.class_wrap ul li a {
    min-width: 130px; /* 버튼의 최소 너비를 확보 */
    text-align: center; /* 텍스트 중앙 정렬 */
    line-height: 40px; 
    padding: 0 15px; /* 내부 패딩 조정 */
}

/* [⭐ 수정] 녹화방송 주황색 버튼: 텍스트 색상을 흰색으로 변경 */
.class_wrap .btn.btn_orange {
    background-color: #ff9900; /* 주황색 배경 */
    color: #ffffff !important; /* 텍스트는 흰색으로 변경 */
    border: 1px solid #ff9900;
}
.class_wrap .btn.btn_orange:hover {
    background-color: #cc7a00; /* 호버 시 색상 어둡게 */
    color: #ffffff !important;
}


/* 모바일 환경 (화면 폭 767px 이하)에서 버튼을 세로로 배치 */
/* [⭐ 새로 추가/수정] 모바일 환경(767px 이하)에서 버튼 유연하게 배치 */
@media (max-width: 767px) {
    /* ul 컨테이너에 Flexbox 적용 */
    .class_wrap ul {
        display: flex;
        flex-wrap: wrap; /* ⭐ 공간이 부족하면 자동으로 줄 바꿈 (핵심) */
        justify-content: center; /* 버튼들을 중앙으로 정렬 */
        padding: 0;
        margin: 0 auto;
    }
    /* li (버튼 하나하나) 스타일 조정 */
    .class_wrap ul li {
        /* display: block; 대신 flex-item으로 동작하며 */
        display: inline-block;
        margin: 5px; /* 버튼 사이의 간격 */
        flex-grow: 1; /* 남는 공간을 어느정도 채우도록 설정 */
    }
    /* a 태그 (버튼 본체) 스타일 조정 */
    .class_wrap ul li a {
        /* 원래 설정된 130px을 모바일에서는 더 작게 설정하여 2개가 들어갈 수 있도록 합니다. */
        min-width: 115px; 
        padding: 0 10px; /* 내부 패딩을 약간 줄여 공간 확보 */
        width: 100%;
        box-sizing: border-box;
    }
}
</style>

