/* 게임 할인충전 상품 상세 (buy 페이지) - 샘플 buy.css 기반 */
.g_container{padding-top:20px;}
#charge_top{margin:36px 0 30px; position: relative;}
#charge_top .charge_nav{text-align: right;}
#charge_top .charge_nav a{display:inline-block; width: 140px; line-height: 45px; font-size:15px; color:var(--color-gray11); margin-right:10px; text-align: center; background-color: var(--color-gray2); border-radius: 25px; font-weight: bold;}
#charge_top .charge_nav a:last-child{margin-right:0;}
#charge_top .charge_nav a.active{font-weight: bold; background-color:var(--color-blue6); color: var(--color-white);}

.game_info{width:100%; height:160px; position: relative; background: linear-gradient(135deg, #1a5f7a 0%, #159EFD 50%, #0d47a1 100%); border-radius: 10px; margin-bottom:70px; display: flex; align-items: center; background-size: cover; padding:20px;}
.game_info img{width:168px; height:168px; border-radius: 15px; overflow: hidden; position:absolute; top:30px; left:40px;box-shadow:1px 1px 6px rgba(0, 0, 0, 0.3); object-fit: cover;}
.game_info dl{margin-left:238px; width:100%;}
.game_info dt{font-size:28px; font-weight: bold; color:var(--color-white); margin-bottom:20px;}
.game_info dd{font-size:16px; color:var(--color-white); font-weight: bold; margin-left: 0% !important;}
/* 메인(#g_CONTENT) 내 게임 정보: 제작사(h5)·장르/플랫폼(h6) 글자 크기 확대 */
#g_CONTENT .game_info dl dd h5,
#g_CONTENT .game_info dl dd h6{
    margin:0 0 10px 0;
    color:var(--color-white);
    font-weight:bold;
    line-height:1.4;
    text-align: left;
}
#g_CONTENT .game_info dl dd h5{
    font-size:22px;
}
#g_CONTENT .game_info dl dd h5:last-child,
#g_CONTENT .game_info dl dd h6:last-child{
    margin-bottom:0;
}
#g_CONTENT .game_info dl dd h6{
    font-size:18px;
    font-weight:600;
}
#g_CONTENT .game_info dl dd h6 strong{
    font-weight:inherit;
}
.content_side_flex {display:flex;gap:20px;}

.g_content2 {flex:1;}
.select_gift{margin-bottom:40px;}
.select_gift h4{font-size:20px; color:#2e2e2e; font-weight: bold; margin-bottom: 15px;}
.select_gift .gift_list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px;}
.select_gift .gift_list .list{position: relative; width:100%; padding:20px; border-radius: 10px; cursor: pointer; overflow: hidden; min-height: 130px;box-shadow:1px 1px 6px rgba(0, 0, 0, 0.3);}
.select_gift .gift_list .list.selected{background-color: #f2faff; border-color:transparent;}
.select_gift .gift_list .list:hover{background-color: #f2faff;  border-color:transparent;}
.select_gift .gift_list .list .border_gradient{display: flex; align-items: center; margin-top:20px;}
.select_gift .gift_list .list .border_gradient > p{width:60px; height:60px;}
.select_gift .gift_list .list .border_gradient > p img{width:100%; height:100%; object-fit: contain;}
.select_gift .gift_list .list.selected .border_gradient:after,
.select_gift .gift_list .list:hover .border_gradient:after {position:absolute;content:'';border:2px solid transparent; border-radius:10px; background:linear-gradient(to left, #159EFD 0%, #B197FC 100%) border-box; inset:0; mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite:exclude;}
.select_gift .gift_list .list .border_gradient dl{text-align: right; margin-left:auto; flex:1; padding-right:10px;}
.select_gift .gift_list .list .border_gradient dt{font-size:17px; font-weight: bold; margin-bottom:5px; max-width: 270px; text-overflow: ellipsis; text-align: right;}
.select_gift .gift_list .list .border_gradient dd{font-size:14px; text-align: right;}
.select_gift .gift_list .list .border_gradient dd.explain{margin-bottom:5px;}
.select_gift .gift_list .list .border_gradient dd.sale_info,
.select_gift .gift_list .list .border_gradient dd.info{font-size:14px; font-weight: bold;}
.select_gift .gift_list .list .border_gradient dd.sale_info span.decoline{text-decoration:line-through; color:var(--color-gray6); font-weight: 500;}
.select_gift .gift_list .list .border_gradient dd.sale_info span.red{color:var(--color-red6); font-size: 18px;}
.select_gift .gift_list .list .border_gradient dd.sale_info span.won{font-size:16px;}
.select_gift .gift_list .list .sale_badge{position: absolute;top:0;left:0; border-bottom-right-radius: 15px; display: inline-block; padding:6px 13px; border-top-left-radius: 10px; background-color: #f03f52; color:#fff; font-size:16px; font-weight: bold;}
.gift_info h4{font-size:20px; color:#2e2e2e; font-weight: bold; margin-bottom: 15px;}
.gift_info .info_wrapper{padding:20px; border:1px solid #95a0b7; border-radius: 10px; font-size:16px;}
.gift_info .info_wrapper img{max-width: 100%;}
.payment_info {position:sticky;top:200px;align-self:flex-start;flex-shrink:0;width:330px;padding:2px;background:linear-gradient(#159efd, #00bb16); border-radius: 10px; z-index: 2; margin-top:40px;}
.payment_info.static{position:static;}
.payment_info .payment_content{width:100%;height:100%;background:#FFF;border-radius: 7px; padding-top:30px;}
.payment_info .payment_content .sub_info_area{margin:0 20px 30px;}
.payment_info .payment_content .sub_info_area .sub_title{font-size:18px; color:#2e2e2e; font-weight: bold; margin-bottom:15px;}
.payment_info .payment_content .sub_info_area .sub_title > div{font-size:16px; font-weight: 500;}
.payment_info .payment_content .sub_info_area.line{padding-bottom:30px; border-bottom:1px solid #e9edf0;}
.payment_info .payment_content .sub_info_area.full{margin:0; background-color: #f9f9f9;}
.payment_info .input_txt{width:100%; height:40px; padding:5px 20px; font-size: 16px; line-height: 24px; color:#2e2e2e; font-weight: bold; border-width: 1px; border-color: #95a0b7; border-radius: 10px;}
.payment_info .input_txt::placeholder{color:#b7b7b7;}
/* 경고 문구: absolute 제거 — 이전 영역의 빈 경고 레이어가 아래 체크박스를 가리는 문제 방지 */
.payment_info .warning_txt{font-size:13px; color:#f00; margin-top:5px; position: relative; display: block; min-height: 0;}
.payment_info .warning_has{position: relative; padding-bottom: 4px;}
.payment_info .warning_has .warning_txt{position: absolute; left: 0; top: 100%; margin-top: 4px; white-space: nowrap;}
.payment_info .payment_content .sub_info_area .method_wrapper{display: flex; flex-wrap: wrap; gap:10px; justify-content: space-evenly;}
.payment_info .payment_content .sub_info_area .method_wrapper label{width:135px; height:40px;display: flex; justify-content: center; align-items: center; margin:0; font-size:15px; font-weight: bold; color:#2e2e2e; border:1px solid #b7b7b7; cursor: pointer; border-radius: 10px; gap:5px;}
.payment_info .payment_content .sub_info_area .method_wrapper label input[type=radio]{appearance: none;}
.payment_info .payment_content .sub_info_area .method_wrapper label:has(input:checked){border:2px solid #159EFD;}
.payment_info .payment_content .sub_info_area .price_wrapper{display: flex; align-items: center; padding-top:20px;}
.payment_info .payment_content .sub_info_area .price_wrapper#my_mile{display: none;}
.payment_info .payment_content .sub_info_area .price_wrapper:first-child{padding-top:40px;}
.payment_info .payment_content .sub_info_area .price_wrapper span:first-child{font-size:16px; font-weight: bold;}
.payment_info .payment_content .sub_info_area .price_wrapper span#goods_name{ font-size:17px; text-align: right; color:var(--color-gray11); font-weight: bold; flex:1; overflow: hidden;text-overflow: ellipsis;}
.payment_info .payment_content .sub_info_area .price_wrapper span:last-child{font-size:16px;  color:#f00; }
.payment_info .payment_content .sub_info_area .price_wrapper span#total_price{font-size:28px; color:#f00; margin-left:auto; font-weight: bold;}
.payment_info .payment_content .sub_info_area .check_wrapper {padding:20px; display: flex; flex-direction: column; gap:15px; position: relative;}
#check_warn_txt{padding-left:20px;}
.game_charge_check_warn{position: relative !important; padding-left: 20px; margin-top: 0;}
.btn_wrapper{text-align: center; padding-bottom: 30px; }
#purchase_btn{width:290px; line-height: 70px; margin:0 auto; background-color: #159EFD; border-radius: 10px; text-align: center; color:#fff; font-size: 21px; font-weight: bold; border:0; cursor:pointer; display:block;}

/* 동의 체크: 네이티브 체크박스 + label[for] (PC/모바일 공통, 클릭·체크 표시 모두 브라우저 기본) */
.game_charge_agree_row{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:0;
}
.game_charge_cb_native{
    flex-shrink:0;
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
    margin:2px 0 0;
    padding:0;
    cursor:pointer;
    accent-color:#159EFD;
    box-sizing:border-box;
}
.game_charge_agree_label{
    flex:1;
    margin:0;
    padding:0;
    font-size:14px;
    line-height:1.45;
    color:#2e2e2e;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.game_charge_cb_native:focus{
    outline:2px solid #159EFD;
    outline-offset:2px;
}

.game_charge_mileage_info{font-size:16px;color:#2e2e2e;margin:0 0 14px;padding:12px 14px;background:#f5f9ff;border-radius:1px; #cfe8ff;text-align: center;}
.game_charge_mileage_info a{color:#159EFD;font-weight:bold;}