.payment-container {
/*
	padding-top:5px;
    padding-bottom: 5px;
*/
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-option {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.payment-option:hover {
    border-color: #007bff;
}

/* 기본 라디오 버튼 숨기기 */
.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* 선택 시 스타일 */
.payment-option input[type="radio"]:checked + .option-content {
    color: #007bff;
    border-color: #007bff;
}

.payment-option input[type="radio"]:checked {
    /* 실제 라디오 버튼은 숨겨져 있지만, label의 부모에 checked가 적용된 것처럼 동작 */
}

/* 커스텀 라디오 버튼 모양 (선택 시 체크 표시 등)은 option-content 내에 추가할 수 있음 */
.option-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 10px; /* 아이콘 등을 위한 여백 */
}

.option-title {
    font-weight: bold;
    font-size: 16px;
}

.option-desc {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* 선택된 옵션의 배경색 또는 테두리색 변경 */
.payment-option input[type="radio"]:checked ~ .option-content .option-title,
.payment-option input[type="radio"]:checked ~ .option-content .option-desc {
    color: #007bff;
}

.payment-option input[type="radio"]:checked {
    border-color: #007bff; /* 이 부분은 input이 숨겨져 있어 동작 안 함. JS로 제어하거나 다른 CSS 기법 필요 */
}

/* JavaScript 없이 CSS만으로 선택된 옵션 박스 스타일 변경 */
/* input과 label이 형제 관계이고 label이 뒤에 오므로, input:checked + label 로 스타일링 가능 */
/* 하지만 위 HTML 구조는 label이 input을 감싸고 있으므로 다른 접근이 필요 */

/* 간단한 방법으로, 선택된 label에 클래스를 추가하는 JS를 사용하거나, CSS appearance 속성을 사용할 수 있음 */
/* 여기서는 appearance 속성을 사용하지 않고 기본 라디오 버튼을 활용하는 예시로 수정 */
/* 위의 HTML 구조에서는 input:checked를 활용하기 어려움 */

/* 다음은 input이 label 내부에 있을 때, 선택된 상태를 표시하는 방법입니다 (CSS로만은 한계가 있음).
   가장 일반적인 방법은 input을 숨기고 span을 커스텀 체크박스/라디오로 활용하는 것입니다. */


/* JS 없이 input:checked 상태를 활용하여 부모 요소 스타일 변경 (불가능) */
/* 따라서 JS로직 추가를 권장하거나, input + label 구조로 변경해야 함 */


/* 여기서는 JS 없이 최대한 구현해봅니다 (라디오 버튼 자체 스타일링) */
.payment-option input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: all 0.3s ease;
    position: absolute; /* 절대 위치로 이동 */
    left: 15px; /* 왼쪽 패딩만큼 이동 */
    top: 50%;
    transform: translateY(-50%);
}

.payment-option input[type="radio"]:checked {
    border-color: #007bff;
    background-color: #007bff;
}

.payment-option:has(input[type="radio"]:checked) {
	background-color: #e9f5ff;
	border-color: #007bff; /* Change border color of the parent label */
}

.payment-option input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.payment-option .option-content {
    /* margin-left: 35px;  *//* 라디오 버튼 공간 확보 */
    margin-left: 5px;
}

/* 선택된 옵션의 배경색 */
.payment-option input[type="radio"]:checked + .option-content + .option-bg {
    background-color: #e9f5ff;
}


.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 25px;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #0056b3;
}

.payment-row {
    display: flex; /* 기본적으로 div들을 좌우(행)로 배치합니다. */
    flex-direction: row; /* 메인 축 방향을 행(row)으로 설정합니다 (기본값). */
    gap: 10px; /* div 사이의 간격 설정 (선택 사항) */
}

.payment-item {
    /* 각 항목의 스타일 (선택 사항) */
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    flex: 1; /* 컨테이너 내에서 사용 가능한 공간을 동일하게 나눕니다. */
}

/* 모바일 화면 (예: 화면 너비가 768px 이하일 때)을 위한 미디어 쿼리 */
@media screen and (max-width: 768px) {
    .payment-row {
        flex-direction: column; /* 화면이 작아지면 메인 축 방향을 열(column, 상하)로 변경합니다. */
    }
}

/* 우측 결제정보 */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #666;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
}

.h2 {
    color: #555;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 10px;
    padding-top: 20px;
}

.pt-10 {padding-top: 10px;}
.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pl-30 {padding-left: 30px;}
.pay-left-box {
	float:left; 
	width:48%;
	color: #6d6d6d;
    font-size: 1em;
}
          
.pay-right-box {
	display:inline-block; 
	width:48%;
	text-align:right;
	color: #007bff;
	font-weight: bold;
    font-size: 1.2em;
}  

.pay-line {
  border-bottom: 1px solid black;
}

/* 약관 체크 */
input[type="checkbox"] {
  display: none; /* 기본 체크박스를 숨김 */
}

/* 커스텀 체크박스 모양을 위한 가상 요소 */
.payment-terms label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* 체크되었을 때의 스타일 */
input[type="checkbox"]:checked + label::before {
  content: '\2713'; /* 체크 표시 */
  font-size: 14px;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  text-align: center;
  line-height: 18px;
}

label {
  cursor: pointer;
}

label[for="agree-terms"] {
	font-size: 15px;
}