section {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

/* 코인 표시 바 */
.coin-bar {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
    background: var(--site-color-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 16px;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.coin-bar .coin-amount {
    color: #065f46;
    min-width: 60px;
    text-align: center;
}

/* 패시브 수입 배너 */
.passive-banner {
    text-align: center;
    padding: 7px 16px;
    font-size: 18px;
    color: #444;
    background: var(--site-color-2);
    border-bottom: 1px solid #a8edd4;
}

/* 탭 바 */
.item-tab-bar {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    background: #fff;
    position: sticky;
    top: calc(var(--header-height) + 44px);
    z-index: 9;
}

.item-tab-btn {
    flex: 1;
    padding: 14px 8px;
    font-size: 22px;
    font-weight: 700;
    color: #9ca3af;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}

.item-tab-btn.active {
    color: #059669;
    border-bottom-color: #059669;
}

/* 페이지 래퍼 */
.item-page {
    padding: 12px 14px 80px;
    max-width: 600px;
    margin: 0 auto;
}

/* 컬렉션 통계 */
.collection-stats {
    font-size: 20px;
    color: #666;
    text-align: center;
    padding: 6px 0 10px;
}

/* 필터 버튼 */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

.filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
    border: 2px solid #e5e7eb;
    color: #6b7280;
    background: #fff;
    transition: all 0.15s;
    cursor: pointer;
}

.filter-btn.active {
    background: #059669;
    color: #fff;
    border-color: #059669;
}

/* 아이템 그리드 */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

@media (max-width: 600px) {
    .collection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 360px) {
    .collection-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.item-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: transform 0.15s;
    padding: 4px;
    overflow: hidden;
}

.item-cell:active {
    transform: scale(0.93);
}

.item-cell.locked {
    opacity: 0.45;
}

.item-cell.grade-common {
    border-color: #d1d5db;
}

.item-cell.grade-rare {
    border-color: #93c5fd;
}

.item-cell.grade-epic {
    border-color: #c4b5fd;
}

.item-cell.grade-legendary {
    border-color: #fcd34d;
}

.item-cell.grade-god {
    border-color: #f43f5e;
}

.item-emoji {
    font-size: 50px;
    line-height: 1;
}

.item-name {
    font-size: 17px;
    color: #374151;
    text-align: center;
    word-break: keep-all;
    line-height: 1.2;
}

.item-count {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 9px;
    font-weight: 900;
    color: #ef4444;
}

/* 등급 배지 */
.grade-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
    margin: 4px 0;
}

.grade-badge.grade-common {
    background: #e5e7eb;
    color: #374151;
}

.grade-badge.grade-rare {
    background: #dbeafe;
    color: #1d4ed8;
}

.grade-badge.grade-epic {
    background: #ede9fe;
    color: #6d28d9;
}

.grade-badge.grade-legendary {
    background: #fef3c7;
    color: #b45309;
}

.grade-badge.grade-god {
    background: #ffe4e6;
    color: #be123c;
}

/* 가챠 그리드 */
.gacha-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.gacha-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    transition: border-color 0.15s;
}

.gacha-card:has(.gacha-btn:active) {
    border-color: var(--site-color-1);
}

.gacha-emoji {
    font-size: 38px;
    flex-shrink: 0;
}

.gacha-info {
    flex: 1;
    min-width: 0;
}

.gacha-name {
    font-size: 22px;
    font-weight: 700;
}

.gacha-desc {
    font-size: 18px;
    color: #666;
    margin-top: 4px;
}

.gacha-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.rate-badge {
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 10px;
    font-weight: 700;
    margin-top: 1px;
}

.rate-badge.grade-common {
    background: #e5e7eb;
    color: #374151;
}

.rate-badge.grade-rare {
    background: #dbeafe;
    color: #1d4ed8;
}

.rate-badge.grade-epic {
    background: #ede9fe;
    color: #6d28d9;
}

.rate-badge.grade-legendary {
    background: #fef3c7;
    color: #b45309;
}

.rate-badge.grade-god {
    background: #ffe4e6;
    color: #be123c;
}

.gacha-btn {
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--site-color-1);
    font-size: 22px;
    font-weight: 700;
    color: #065f46;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
    cursor: pointer;
    line-height: 1.4;
    text-align: center;
}

.gacha-btn:active {
    background: #6ee7b7;
    transform: scale(0.96);
}

/* 모달 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: #fff;
    border-radius: 20px;
    padding: 24px 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: modalIn 0.2s ease;
}

@keyframes modalIn {
    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.btn-modal-close {
    margin-top: 16px;
    padding: 12px 32px;
    border-radius: 12px;
    background: var(--site-color-1);
    font-size: 16px;
    font-weight: 700;
    color: #065f46;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-modal-close:active {
    background: #6ee7b7;
}

/* 아이템 상세 */
.item-detail-emoji {
    font-size: 64px;
    display: block;
    margin-bottom: 8px;
}

.item-detail-name {
    font-size: 22px;
    font-weight: 700;
}

.item-detail-cat {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

.item-detail-bonus {
    font-size: 18px;
    font-weight: 700;
    color: #d97706;
    margin-top: 12px;
}

.item-detail-count {
    font-size: 16px;
    color: #888;
    margin-top: 4px;
}

/* ─── 가챠 결과 이모지 등장 애니메이션 ──────────────────────────────
   모달이 열릴 때 .gacha-result-emoji에 두 애니메이션이 순서대로 실행된다.

   1) resultEmojiIn  : 작고 기울어진 상태에서 튕기며 원래 크기로 등장
   2) resultEmojiFloat: 등장 후 계속 위아래로 떠다니는 루프

   .gacha-result-emoji는 showGachaResult()에서 innerHTML로 매번 새로
   만들어지므로, 모달을 닫고 다시 열 때도 애니메이션이 항상 처음부터
   재생된다.
─────────────────────────────────────────────────────────────────── */

/* 등장 애니메이션
   scale(0.1): 거의 안 보일 정도로 작게 시작
   rotate(-20deg): 약간 반시계 방향으로 기울어진 상태에서 출발
   55% : 목표 크기보다 크게(1.25배) 튀어오르며 회전이 반대 방향으로 지나침
   75% : 다시 살짝 작아지며(0.9) 반대로 기울어짐
   90% : 조금 커지며(1.08) 거의 수직에 가까워짐
   100%: 정확히 1배 크기, 기울기 0으로 안착 */
@keyframes resultEmojiIn {
    0% {
        transform: scale(0.1) rotate(-20deg);
        opacity: 0;
    }

    55% {
        /* scale(1.25) → scale(1.0): 1.0 초과 확대 시 GPU 텍스처가 늘어나 흐려지므로 상한을 1.0으로 제한한다. */
        transform: scale(1.0) rotate(6deg);
        opacity: 1;
    }

    75% {
        transform: scale(0.9) rotate(-3deg);
    }

    90% {
        transform: scale(1.0) rotate(1deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* 등장 후 떠다니기 루프 애니메이션
   translateY(-10px): 위로 10px 올라갔다가 원래 자리로 내려오기를 반복
   ease-in-out: 올라갈 때/내려올 때 모두 자연스럽게 가속·감속 */
@keyframes resultEmojiFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* 가챠 결과 */
.gacha-result-emoji {
    font-size: 160px;
    display: block;
    margin-bottom: 10px;
    will-change: transform;
    /* 두 애니메이션을 콤마로 연결해 동시에 등록한다.
       ┌ resultEmojiIn
       │  · 0.5s        : 등장 애니메이션 재생 시간
       │  · cubic-bezier: 과하게 튕기는 탄성 커브 (0.36·0.07 진입, 0.19·0.97 종료)
       │  · 0s delay    : 모달이 열리자마자 바로 시작
       │  · both        : delay 중에도 0% keyframe 상태를 유지해 깜빡임 방지
       └ resultEmojiFloat
          · 2.4s        : 한 번 위아래 왕복에 걸리는 시간
          · ease-in-out : 부드러운 가속·감속
          · 0.5s delay  : 등장 애니메이션이 끝난 뒤 시작
          · infinite    : 모달이 열려있는 동안 계속 반복 */
    animation:
        resultEmojiIn 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s both;
    /* 떠 있는 효과는 주지 않는다. */
    /* resultEmojiFloat 2.4s ease-in-out 0.5s infinite; */

}

.gacha-result-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
}

.gacha-result-bonus {
    font-size: 20px;
    font-weight: 700;
    color: #d97706;
    margin-top: 10px;
}

.gacha-result-new {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
    margin-top: 8px;
}

.gacha-result-dup {
    font-size: 18px;
    color: #f97316;
    margin-top: 8px;
}

/* 가챠 스핀 오버레이 */
.gacha-spin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gacha-spin-box {
    text-align: center;
    padding: 40px;
}

.gacha-spin-label {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.gacha-spin-emoji {
    font-size: 160px;
    line-height: 1;
    display: block;
    min-height: 1.2em;
    will-change: transform;
}

.gacha-spin-emoji.pop {
    animation: gachaPop 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes gachaPop {
    0% {
        transform: scale(0.5);
        opacity: 0.3;
    }

    55% {
        /* scale(1.35) → scale(1.0): 1.0 초과 확대 시 GPU 텍스처가 늘어나 흐려지므로 상한을 1.0으로 제한한다. */
        transform: scale(1.0);
        opacity: 1;
    }

    80% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}

/* 토스트 */
.item-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 20px;
    z-index: 200;
    white-space: nowrap;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

@media (max-width: 600px) {
    .item-detail-emoji {
        font-size: 100px;
    }

    .gacha-result-emoji,
    .gacha-spin-emoji {
        font-size: 100px;
    }
}