@charset "utf-8";

.rarity_items { padding:16px 0 40px; }

/* 등급 탭 (가로 스크롤) */
.rarity_items .rar_tabs {
    display:flex;
    gap:8px;
    padding: 0 0 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.rarity_items .rar_tabs::-webkit-scrollbar { display:none; }
.rarity_items .rar_tabs .tab {
    flex:0 0 auto;
    padding:8px 16px;
    border:1.5px solid var(--rar, #ddd);
    border-radius:20px;
    background:#fff; color:var(--rar, #444);
    font-size:13px; font-weight:700;
    white-space:nowrap;
    transition:all 0.15s;
}
.rarity_items .rar_tabs .tab.on {
    background:var(--rar, #888);
    color:#fff;
    /* box-shadow:0 4px 10px var(--rar, rgba(0,0,0,0.18)); */
}
.rarity_items .rar_tabs .tab em {
    font-style:normal; margin-left:4px; opacity:0.8;
    font-size:11px; font-weight:700;
}

/* 빈 상태 */
.rarity_items .empty {
    padding:60px 16px; text-align:center; color:#aaa;
}

/* 상품 그리드 */
.rarity_items .item_grid {
    padding: 14px 0 0;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
}
@media (min-width:480px) {
    .rarity_items .item_grid { grid-template-columns:repeat(3, 1fr); }
}
@media (min-width:760px) {
    .rarity_items .item_grid { grid-template-columns:repeat(4, 1fr); }
}

.rarity_items .item_grid .card {
    position:relative;
    display:flex; flex-direction:column;
    background:#fff;
    border:2px solid var(--rar, #eee);
    border-radius:14px;
    overflow:hidden;
    transition:transform 0.18s, box-shadow 0.18s;
}
.rarity_items .item_grid .card:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 22px var(--rar, rgba(0,0,0,0.18));
}

.rarity_items .item_grid .thumb {
    position:relative;
    width:100%; aspect-ratio:1;
    background:#fafbfc;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.rarity_items .item_grid .thumb img { width:100%; height:100%; object-fit:cover; }
.rarity_items .item_grid .thumb .emoji { font-size:48px; opacity:0.4; }

.rarity_items .item_grid .rar_tag {
    position:absolute; top:8px; left:8px;
    padding:3px 9px;
    background:var(--rar, #888); color:#fff;
    font-size:10px; font-weight:800;
    border-radius:8px; letter-spacing:0.3px;
    box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

.rarity_items .item_grid .info { padding:10px 12px 12px; }
.rarity_items .item_grid .name {
    font-size:12.5px; font-weight:700; color:#222;
    line-height:1.35; margin-bottom:4px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; min-height:34px;
    word-break:keep-all;
}
.rarity_items .item_grid .price {
    font-size:13px; font-weight:800; color:var(--rar, #4834d4);
}