#wrap .inner { padding: 25px 10px;}

.not_found_wrap { text-align: center; padding: 50px 15px;}
.not_found_wrap img { max-width: 50%; margin-bottom: 30px;}
.not_found_wrap p { line-height: 1.3; font-weight: 600; color: #a0a0a0; font-size: 20px;}

.profileNoti_wrap { position: relative; width: fit-content; margin: 0 auto;}

.profile_wrap { position: relative; text-align: center; box-shadow: rgb(0 0 0) 0px 0px 8px;width: fit-content; margin: 0 auto; border-radius: 15px; overflow: hidden; display: flex;}
.profile_wrap:after { content: ''; width: 15px; height: 150%; transform: rotate(30deg); border-left: 10px solid #ffffff7a; border-right: 30px solid #ffffff7a; position: absolute; top: -23%; left: -50%; animation: glass 2 1s ; animation-delay: 3s; filter: blur(5px);}
.profile_wrap button { position: absolute; bottom: 5px; left: 10px; filter: drop-shadow(0px 0px 1px #ffffff90);}
.profile_wrap #reload { left: 50px;}

.re_noti { transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s ease; padding: 5px; font-size: 14px; border-radius: 15px; background: #fff; position: absolute; left: 30px; z-index: 30; width: fit-content; margin-top: 3px;}
.re_noti.on { opacity: 1; visibility: visible; transform: translateY(0);}
.re_noti * { font-size: 14px;}
.re_noti:before { content: ''; position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #fff; top: -9px; left: 30px;}

/* 프로필 애니메이션 */
@keyframes glass {
    0% { left: -30%;}
    100% { left: 130%;}
}

.resume_btn { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #464646; border-radius: 10px; max-width: 390px; margin: 15px auto;}
.resume_btn .left { display: flex; gap: 10px; align-items: center;}
.resume_btn .left img { max-width: 30px;}
.resume_btn .left p { color: #fff; font-weight: 600;}
.resume_btn .right { background: #fff; padding: 4px 10px; border-radius: 15px; font-size: 14px;}

/* 공통 스타일 ===================================================== */
.spec_wrap { margin-top: 15px; border-radius: 10px; overflow: hidden;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background: #fff;}
.spec_wrap .title_wrap { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--navy_dark); }
.spec_wrap .title_wrap p { font-weight: 600; color: #fff;}
.spec_wrap .title_wrap .set_btn { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; color: #fff; font-weight: 500; padding: 3px 6px; background: var(--orange); border-radius: 15px;}

/* 장비 ===================================================== */

.equi_wrap ul { padding: 15px 10px; }
.equi_wrap ul li .item_wrap { width: 60px; height: 60px; background: #DDDEE2; border-radius: 3px; display: flex; align-items: center; justify-content: center; position: relative;}
.equi_wrap ul li .item_wrap img { max-width: 40px;}

/* 등급 테두리 - 세트옵션, 장착템 */
.equi_wrap ul li.legendary .item_wrap { box-shadow: 0 0 0 2px var(--legendary) inset;}
.equi_wrap ul li.unique .item_wrap { box-shadow: 0 0 0 2px var(--unique) inset;}
.equi_wrap ul li.epic .item_wrap { box-shadow: 0 0 0 2px var(--epic) inset;}
.equi_wrap ul li.rare .item_wrap { box-shadow: 0 0 0 2px var(--rare) inset;}
.equi_wrap ul li.normal .item_wrap { box-shadow: 0 0 0 2px var(--normal) inset;}
.equi_wrap ul li.empty .item_wrap { box-shadow: 0 0 2px 1px #56575630 inset;}

/* 세트옵션 */
.equi_wrap ul.set_list { background: var(--navy_dark);  max-height: 0; transition: .3s; transition-timing-function: linear; overflow: hidden; padding: 0px 10px;}
.equi_wrap ul.set_list.on { max-height: 500px; padding: 15px 10px; border-top: 1px solid #fff;}
.equi_wrap ul.set_list li { display: flex; background: #D7DBE4; border-radius: 5px; align-items: center; gap: 15px; margin-bottom: 10px; padding: 0 10px 0 0;}
.equi_wrap ul.set_list li:nth-last-child(1) { margin-bottom: 0;}
.equi_wrap ul.set_list li .item_wrap { width: 40px; height: 40px; padding: 3px;}
.equi_wrap ul.set_list li .item_wrap img { max-width: 25px;}

.equi_wrap ul.set_list li .name { font-weight: 700;}
.equi_wrap ul.set_list li.legendary .name { color: var(--legendary);}
.equi_wrap ul.set_list li.unique .name { color: var(--unique);}
.equi_wrap ul.set_list li.epic .name { color: var(--epic);}
.equi_wrap ul.set_list li.rare .name { color: var(--rare);}

.equi_wrap ul.set_list li p:nth-child(3) { margin: 0 0 0 auto; font-weight: 500; color: var(--navy_dark); font-size: 14px;}

/* 등급 라벨 - 장착템 */
.equi_wrap ul.equipped li .item_wrap:before {position: absolute; top: 1px; left: 0; border-radius: 3px 0 3px 0; width: 12px; height: 13px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: 500; font-size: 8px;}
/* .equi_wrap ul.equipped li.legendary .item_wrap:before { content: 'L'; background: var(--legendary); }
.equi_wrap ul.equipped li.unique .item_wrap:before { content: 'U'; background: var(--unique);}
.equi_wrap ul.equipped li.epic .item_wrap:before { content: 'E'; background: var(--epic);}
.equi_wrap ul.equipped li.rare .item_wrap:before { content: 'R'; background: var(--rare);}
.equi_wrap ul.equipped li.normal .item_wrap:before,
.equi_wrap ul.equipped li.empty .item_wrap:before { content: unset;} */

.equi_wrap ul.equipped { max-height: 220px; overflow: hidden; transition: .3s; transition-timing-function: linear; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; position: relative;}
.equi_wrap ul.equipped:before { content: ''; width: 100%; height: 50px; background: linear-gradient(180deg, #ffffff00, #fff); position: absolute; bottom: 0; left: 0; z-index: 10; }
.equi_wrap ul.equipped.on { max-height: 1200px; }
.equi_wrap ul.equipped.on:before { content: unset;}
.equi_wrap ul.equipped li { display: flex; gap: 10px; align-items: center; width: calc(50% - 5px);}
.equi_wrap ul.equipped li .text_wrap { display: flex; flex-direction: column; gap: 5px;}
.equi_wrap ul.equipped li .text_wrap .cate { color: #888888; }
.equi_wrap ul.equipped li .text_wrap .name { font-weight: 700; }
.equi_wrap ul.equipped li.empty .text_wrap .name {color: #B7B7B7; font-weight: unset;}

.equi_wrap ul.equipped .more_btn { transition: 0.2s; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 5px 15px; background: #617B96; color: #fff; border-radius: 15px; z-index: 11;}
.equi_wrap ul.equipped.on .more_btn { opacity: 0;}

/* V매트릭스 ===================================================== */
.vmatrix_wrap { margin-top: 15px;}
.vmatrix_wrap .title_wrap { padding: 13px 10px; }
.vmatrix_wrap .skill_list { display: flex; flex-wrap: wrap; gap: 5px; padding: 15px 10px;}
.vmatrix_wrap .skill_list li { box-shadow: rgba(0, 0, 0, 0.7) 0px 1px 4px; padding: 5px 3px; width: calc((100% - 10px) / 3); margin-bottom: 10px; background: #4085A4; border: 5px solid #165775; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; text-align: center; gap: 5px;}
.vmatrix_wrap .skill_list li.enhancement { background: #577FBC; border: 5px solid #365583;} 
.vmatrix_wrap .skill_list li.special { background: #685CDA; border: 5px solid #4D42BC;} 
.vmatrix_wrap .skill_list li .level { color: #fff; font-size: 12px; padding: 1px 8px; background: #19475F; border-radius: 10px;}
.vmatrix_wrap .skill_list li .name { color: #fff; font-size: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%;}


/* 레벨 ===================================================== */
.level_wrap .chart_wrap { padding: 10px;}
.level_wrap .chart_wrap canvas { max-height: 300px; max-width: calc(100vw - 40px); margin: 0 auto;}
.level_wrap .title_wrap p { display: flex; align-items: center; gap: 5px; position: relative; }
.level_wrap .title_wrap p:after { content: '인게임 레벨업 일자(X) → 메모리 조회 일자(O) 레벨업 후 메모리를 꼭 찾아주세요(*´∪`)♥'; transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s ease; white-space:pre; background: #fff; padding: 3px 15px; border-radius: 15px; position: absolute; left: calc(100% + 10px);  color: #333;}
.level_wrap .title_wrap p.on:after { opacity: 1; visibility: visible; transform: translateY(0);}
.level_wrap .title_wrap p button { display: flex; align-items: center;}

@media screen and (max-width: 767px) {
    .equi_wrap ul.equipped { gap: 5px;}
    .equi_wrap ul.equipped.on { max-height: 700px; }
    .equi_wrap ul.equipped li {margin-bottom: 3px; gap: 5px;}
    .equi_wrap ul li .item_wrap { width: 45px; height: 45px;}
    .equi_wrap ul.equipped li .text_wrap { gap: 3px; justify-content: center; width: calc(100% - 5px - 45px);}
    .equi_wrap ul.equipped li .text_wrap .cate,
    .equi_wrap ul.equipped li .text_wrap .name { font-size: 12px;}

    .vmatrix_wrap .skill_list li { width: calc((100% - 15px) / 4);}

    .equi_wrap ul li .item_wrap img { max-width: 30px;}
    .level_wrap .title_wrap p:after { content: '인게임 레벨업 일자(X) → 메모리 조회 일자(O)\A레벨업 후 메모리를 꼭 찾아주세요(*´∪`)♥'; font-size: 12px;}
}


