/* modals_relics.css - Relics Overlay System */

/* Relics (유물) */
#relics-content {
    width: 95%; max-width: 800px; max-height: 90%; padding: 20px;
    background: linear-gradient(145deg, #1a0a05, #000000);
    border: 3px solid #ff4500; border-radius: 20px 20px 10px 10px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative; border-top: 6px solid #ff4500;
}
#relics-header { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; border-bottom: 1px solid rgba(255, 69, 0, 0.3); padding-bottom: 10px; }
#relics-header h2 { color: #ff4500; margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 0 15px rgba(255, 69, 0, 0.6); text-align: center; }
#close-relics { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; color: #ff4500; font-size: 24px; cursor: pointer; font-weight: bold; }
#relics-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 8px; }
.relic-slot { aspect-ratio: 1/1; background: #111; border: 1px solid #333; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; transition: all 0.2s; position: relative; }
.relic-slot.empty { opacity: 0.2; cursor: default; }
.relic-slot.selected { border-color: #ff4500; box-shadow: 0 0 10px #ff4500; background: #1a0500; }
#relic-details { margin-top: 10px; height: 110px; display: flex; gap: 8px; }
#relic-info-pane { flex: 1.6; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 8px; border: 1px solid #444; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#relic-bonus-pane { flex: 1; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 8px; border: 1px solid #333; overflow-y: auto; }
.relic-bonus-title { color: #ff4500; font-size: 11px; font-weight: bold; text-align: center; margin-bottom: 6px; border-bottom: 1px solid #444; padding-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }

.relic-bonus-item {
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    font-size: 9px;
    background: rgba(255, 69, 0, 0.05);
    margin-bottom: 3px;
    border-left: 2px solid #ff4500;
    border-radius: 0 4px 4px 0;
    transition: background 0.2s;
}
.relic-bonus-item:hover { background: rgba(255, 69, 0, 0.1); }
.relic-bonus-item span:first-child { color: #aaa; }
.relic-bonus-item .val { color: #ff1744; font-weight: bold; }

.relic-detail-title { color: #fff; font-size: 12px; font-weight: bold; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2px; width: 100%; }
.relic-detail-effect { color: #00ff88; font-size: 9.5px; margin-bottom: 4px; line-height: 1.2; }
.relic-detail-lore { color: #aaa; font-size: 8.5px; font-style: italic; line-height: 1.3; opacity: 0.8; }