:root{
--bg:#050505;
--panel:#101010;
--panel2:#171717;
--line:rgba(255,255,255,.18);
--text:rgba(255,255,255,.92);
--muted:rgba(255,255,255,.68);
--muted2:rgba(255,255,255,.55);
--accent:#ff00d6; /* 이미지의 핑크/마젠타 */
}

/* dim */
.modal_dim{
position:fixed; inset:0;
background:rgba(0,0,0,.55);
backdrop-filter: blur(1px);
}
/* wrapper */
.modal_wrap.hiphop-modal{
display:none;
position:fixed; inset:0;
z-index:9999;
}


/* 켤 때만 보이기 */
.modal_wrap.hiphop-modal.is-open{
display:block;
}

/* modal */
.modal_cnt_hiphop{
position: relative;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
width:640px;
background:#000000;
border:2px solid rgba(255,0,214,.55);
border-radius:26px;
padding:40px;
color:var(--text);
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.close_btn{
position:absolute; right:18px; top:14px;
background:transparent; border:0; color:rgba(255,255,255,.7);
cursor:pointer;
}
.close_btn .material-icons-outlined{ font-size:26px; }

.modal_body{ display:flex; flex-direction:column; gap:10px; }

.modal_title{
    margin: 0;
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: .5px;
}
.modal_subtitle{
    margin:-6px 0px 36px !important;
    text-align:center !important;
    color:#EBEBEB !important;
    font-size:16px !important;
}

/* info box */
.info_box{
    background: #141414;
    border-radius: 16px;
    padding: 30px 22px;
    color: var(--muted);
}
.info_box ul{ margin:0; padding-left:18px; }
.info_box li{ 
    font-size: 16px;
    list-style: disc;
    font-weight: 300;
}

/* purchase brief */
.purchase-brief{
display:grid;
grid-template-columns: 84px 1fr auto;
gap:16px;
align-items:center;
padding:36px 0px;
}
.thumb{
width:90px; height:90px;
border-radius:12px;
object-fit:cover;
background:#222;
}
.song_title{
font-size:24px;
font-weight:800;
line-height:1.1;
margin-bottom:6px;
}
.badge{
display:inline-flex;
align-items:center;
height:26px;
padding:0 10px;
border:1px solid #999999;
border-radius:999px;
font-size:12px;
color:#ebebeb;
}
.tags{
margin-top:8px;
font-size:10px;
color:#999999;
}
.purchaseBeatMusic-btn-wrap{
    width: 100%;
    height: 56px;
    margin: 0 auto;
    display: flex;
    background-color: #EB00EB;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 36px;
}

.tags span{
    margin-right: 8px;
}

.brief_price{
    font-size:24px;
    font-weight:900;
    white-space:nowrap;
    color: #ebebeb;
}

/* sections */
.section{ margin-top:2px; }
.section_title{
font-size:22px;
font-weight:900;
}
.section_row{
display:flex;
align-items:center;
justify-content:space-between;
padding: 12px 0px;

}
.divider{
margin:12px 0 14px;
height:1px;
background:#666666;
}

.amount{
font-size:24px;
font-weight:900;
color:var(--accent);
}

/* payment grid */
.pay_grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap:14px 26px;
align-items:center;
}
@media (max-width:700px){
.modal_cnt_hiphop{
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
    padding-top: 50px;
    padding-bottom: 30px;
}

.brief_price{
    display: none;
}

.modal_body {
    width: 90%;
    margin: 0 auto;
}
.modal_title{
    font-size: 28px;
}

.modal_subtitle{
    font-size: 14px !important;
}
.song_title{
    font-size: 16px;
    font-weight: bold;
}
.badge{
    font-size: 10px;
}
.pay_grid{
    font-size: 13px;
    gap: 15px 10px;
}
.amount{
    font-size: 20px;
}
.agree-check .text{
    font-size: 15px !important;
}
.info_box li{
    font-size: 15px;
}

}

.agree-check{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
user-select:none;
font-weight:800;
color:rgba(255,255,255,.9);
}

.agree-check input{
display:none;
}

.agree-check .box{
width:24px; height:24px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.04);
position:relative;
}

.agree-check input:checked + .box{
background:#CD07FC;
border-color:#CD07FC;
display: flex;
justify-content: center;
    align-items: center;
}

.agree-check input:checked + .box::after{
content:"";
position:absolute;
width:5px; height:10px;
border:2px solid #fff;
border-top:0; border-left:0;
transform:rotate(45deg);
}

.agree-check .text{
font-size:16px;
color:#ebebeb;
}

/* custom radio */
.radio{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
user-select:none;
color:rgba(255,255,255,.88);
font-weight:700;
}
.radio input{ display:none; }
.radio .dot{
width:20px; height:20px;
border-radius:999px;
border:2px solid rgba(255,255,255,.35);
position:relative;
flex:0 0 auto;
}
.radio input:checked + .dot{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(255,0,214,.15);
}
.radio input:checked + .dot::after{
content:"";
position:absolute; inset:4px;
border-radius:999px;
background:var(--accent);
}

/* brand text */
.brand-payco{ color:#ff2d2d; font-weight:900; letter-spacing:.2px; }
.brand-kakaopay, .brand-npay{ display:inline-flex; align-items:center; gap:6px; font-weight:900; }
.pill.kakao{
width:26px; height:18px; border-radius:999px;
background:#ffe100;
display:inline-block;
position:relative;
}
.pill.kakao::after{
content:"";
position:absolute; left:9px; top:4px;
width:8px; height:8px; border-radius:50%;
background:#111;
opacity:.9;
}
.n_circle{
width:18px; height:18px; border-radius:50%;
background:#22c55e; /* 네이버 느낌 */
display:inline-flex; align-items:center; justify-content:center;
font-size:12px; font-weight:1000; color:#0b0b0b;
}

/* policy */
.policy_row{
display:flex;
align-items:center;
gap:16px;
margin-bottom:12px;
}
.policy_link{
color:rgba(255,255,255,.6);
text-decoration:underline;
font-weight:bold;
font-size: 14px;
}
.policy_link:hover{ color:rgba(255,255,255,.85); }

.check{
display:flex; align-items:center; gap:10px;
cursor:pointer; user-select:none;
font-weight:800;
}
.check input{ display:none; }
.check .box{
width:18px; height:18px;
border-radius:4px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.04);
position:relative;
}
.check input:checked + .box{
background:var(--accent);
border-color:var(--accent);
}
.check input:checked + .box::after{
content:"";
position:absolute;
left:5px; top:2px;
width:5px; height:10px;
border:2px solid #fff;
border-top:0; border-left:0;
transform:rotate(45deg);
}

.policy_text{
color:#ebebeb;
font-size:15px;
line-height:1.45;
}

/* CTA button */
.cta{
margin-top:10px;
width:100%;
height:64px;
border:0;
border-radius:12px;
background:linear-gradient(90deg, #ff00d6 0%, #ff00d6 60%, #ff00d6 100%);
color:#fff;
font-size:18px;
font-weight:900;
cursor:pointer;
box-shadow:0 18px 40px rgba(255,0,214,.18);
}
.cta:active{ transform:translateY(1px); }

.hidden-input{ display:none; }