/**
 * 배지 획득 AA 바텀시트 - 행동 완료 화면 위 보상형 시트
 *
 * 마크업 = fragments/badgeAcquiredSheet.html (.modal.bottom 공용 골격 위에 내용만 얹는다)
 * 기부완료 외 진입점(참여기부·봉사·재단·일회성)에서도 같은 프래그먼트를 쓰므로
 * 페이지별 css 가 아니라 별도 파일로 두고 사용하는 화면에서 링크한다
 *
 * 수치는 Figma AA_바텀시트 #2313:10630 실측 (컨테이너 #2309:10097)
 */

/* 겹침 순서 - 참여기부 안내 토스트(.footer--msg = z-index 10000) 위에 둔다
   공용 .modal.on 은 9999 !important 라 그대로 두면 댓글·응원·공유 완료 토스트가 시트를 덮는다
   토스트를 낮추는 대신 이 시트만 올린다 - 토스트는 모달 안에서 띄우는 안내로도 쓰여
   전역으로 낮추면 그쪽이 모달 뒤로 숨는다 */
.modal.badge-acquired-modal.on {
    z-index: 10001 !important;
}

/* 시트 컨테이너 - 공용 bottom(radius 26)과 달리 30, 좌우 24 */
.badge-acquired-modal .modal--sec.bottom {
    padding: 20px 24px 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

/* 닫기 - 공용 .close-btn(24 원형 + gray-050 + X 아이콘)이 이미 Figma 와 동일. 우측 여백만 맞춘다 */
.badge-acquired-modal .close-btn {
    top: 20px;
    right: 24px;
}

/* 본문 블록 #2309:10104 - 헤드라인/배지/텍스트/칩 사이 20, 하단 34 */
.badge-acquired-modal .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    /* 공용 .line-header .inner 의 47px 20px 0 을 덮는다 - 좌우 여백은 시트 padding 이 담당 */
    padding: 34px 0 0 !important;
}

/* 헤드라인 #2313:10747 - 배지와 무관하게 항상 같은 문구 */
.badge-acquired-modal .badge-acquired-headline {
    color: #000;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* 배지 프레임 #2313:10627 - 130 고정 */
.badge-acquired-modal .badge-acquired-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 130px;
    height: 130px;
}

/* 글린트 배지 사본 스케일을 <img>(height:130/width:auto)와 동일하게 - 상세/넛지와 동일한 정합 처리
   래퍼 기준 contain 을 쓰면 flex 정렬 서브픽셀 반올림으로 사본이 어긋나 이중 윤곽이 생긴다 */
.badge-acquired-modal .badge-acquired-icon.badge-glint {
    --badge-glint-bg-size: auto 130px;
}

/* 세로 130 기준, 가로 auto - 비정사각 배지도 잘리지 않는다 */
.badge-acquired-modal .badge-acquired-icon img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* 배지명 + 설명 묶음 #2309:10107 - 사이 12 */
.badge-acquired-modal .badge-acquired-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* 배지명 #2309:10109 */
.badge-acquired-modal .badge-acquired-name {
    color: var(--primary5-color);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.0236em;
    text-align: center;
}

/* 배지 설명 #2309:10111 - DB 저장 개행(\n) 반영 */
.badge-acquired-modal .badge-acquired-desc {
    color: var(--gray-700);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    white-space: pre-line;
}

/* 획득 조건 칩 #2313:11959 - 배지 상세의 달성 조건 칩과 동일 규격 */
.badge-acquired-modal .badge-acquired-condition {
    padding: 8px 14px;
    border-radius: 10px;
    background-color: var(--gray-000);
    color: var(--gray-500);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

/* CTA #2309:10112 - 시트 폭에서 좌우 패딩 뺀 342 */
.badge-acquired-modal .btn-wrap {
    width: 100%;
    margin-top: 14px;
}

.badge-acquired-modal .btn-wrap .btn.ok {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 14px;
    border-radius: 12px;
    background-color: var(--primary-color);
    color: #F8F8F8;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.02em;
}