/* ===========================================================
  [Custom Elements Styling]
    - 색상 커스텀 가능한 요소들의 스타일만 따로 모아 분리한 CSS 파일입니다.
    - 어드민에서 설정되는 속성들을 CSS 변수로 적용합니다.
    - '--primary_rgb'는 '--primary_active' 컬러의 알파값을 제어할 수 있도록 스크립트에서 RGB로 변환한 후 동적으로 설정한 변수입니다.
    - alpha 조절이 필요할 때 rgba(var(--primary_rgb), alpha) 형태로 사용
=========================================================== */

/* common */
.txt_primary{color:var(--primary_active)}

/* icons */
.ico_security path{fill:var(--primary_active)}
.ico_price_next path{fill:var(--primary_active)}
.ico_arrow_down path{stroke:var(--primary_active)}
.ico_status.primary{background:rgba(var(--primary_rgb), 0.12)}
.ico_complete_check path{stroke:var(--primary_active) !important}
.register_info_box .ico_check{background-color:var(--primary_active)}

/* btn */
.btn_point{background:var(--primary_active)}
.btn_point .txt{color:var(--text-color)}
.btn_point.is-press{background:var(--primary_active)}
@media (hover: hover) and (pointer: fine) {
    .btn_point:hover{background:var(--primary_active)}
}

/* input */
.input[type="text"].is-onfocus,
.input[type="number"].is-onfocus,
.input[type="text"].is-press,
.input[type="number"].is-press,
.input_box.is-complete .input[type="text"].is-press,
.input_box.is-complete .input[type="number"].is-press,
.input_box_embed.is-onfocus,
.input_box_embed.is-press{border-color:var(--primary_active)}
.input:checked + .txt_label .ico{border-color:var(--primary_active)}
.input:checked + .txt_label .ico_check{background:var(--primary_active)}
.input[type="radio"]:checked + .txt_label .ico_radio::after{background:var(--primary_active)}
.modify_input_box .modify_input{border-color:var(--primary_active)}
.modify_input_box.typing .btn_modify{background:var(--primary_active)}

/* select_wrap */
.select_wrap.is-selecting,
.select_wrap.is-press{border-color:var(--primary_active)}
.select_inner{border-right-color:var(--primary_active);border-bottom-color:var(--primary_active);border-left-color:var(--primary_active)}
@media (hover: hover) and (pointer: fine) {
    .select_wrap:hover{border-color:var(--primary_active)}
}

/* price_info_area */
.price_info_area::before{border-color:rgba(var(--primary_rgb), 0.27)}
.price_info_area .price_info_top{background:rgba(var(--primary_rgb), 0.12);border-color:rgba(var(--primary_rgb), 0.27)}
.price_item.type_benefit .item_name,
.price_item.type_benefit .item_price{color:var(--primary_active)}

/* pay_promotion_area */
.pay_promotion_area .sub_title{color:var(--text-color2)}

/* desc_item */
.desc_item em{color:var(--text-color2)}

/* info_item */
.info_item em{color:var(--text-color2)}

/* .section_register_info */
.register_info_box{background:rgba(var(--primary_rgb), 0.12);border-color:rgba(var(--primary_rgb), 0.16)}
.installment_select_box{border-color:rgba(var(--primary_rgb), 0.16)}

/* method list */
.method_list .method_item{background:var(--bg-color)}
.method_item.is-active{background:var(--primary_active)}
.method_item.is-active .txt{color:var(--text-color)}

/* guide list */
.guide_list .link{color:var(--primary_active)}

/* 비밀번호 입력 */
.alert_box{background:rgba(var(--primary_rgb), 0.08)}
.alert_box .txt_alert{color:var(--primary_active)}
.password_dot_wrap .password_dot.on{background:var(--primary_active)}
.key_area .key_item.is-active .btn_key{background:var(--primary_active)}

/* 로딩스피너 */
.loading_spinner_box{background:var(--primary_active)}