/* --- 공통 설정 --- */
body { background-color: #1a1614; color: #fff; font-family: sans-serif; margin: 0; padding: 20px; }
h1 { color: #e5b044; }
.tab-menu { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { padding: 10px 20px; background: #333; color: #aaa; border: none; cursor: pointer; border-radius: 4px; }
.tab-btn.active { background: #e5b044; color: #000; font-weight: bold; }
.view-panel { display: none; background: #221d1a; border: 1px solid #444; border-radius: 8px; padding: 20px; min-height: 500px; }
.view-panel.active { display: block; }

/* --- 1. EGO 뷰 스타일 --- */
.sinner-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sinner-icon { padding: 10px; background: #333; border: 1px solid #555; color: #fff; cursor: pointer; border-radius: 4px; }
.sinner-icon.active { border-color: #e5b044; background: #5a4015; }
.filter-container { display: flex; gap: 20px; margin-bottom: 20px; }
.filter-group { display: flex; align-items: center; gap: 10px; }
.grade-btn { padding: 5px 10px; background: #333; color: #fff; border: 1px solid #555; cursor: pointer; }
.grade-btn.active { background: #e5b044; color: #000; }
.keyword-dropdown { padding: 5px; background: #333; color: #fff; border: 1px solid #555; }
.ego-card:hover { border-color: #e5b044 !important; }

/* --- 2. 이벤트 뷰 스타일 --- */
.mirror-dungeon-ui { display: flex; gap: 20px; }
.sidebar { width: 300px; background: #151110; border: 1px solid #444; display: flex; flex-direction: column; }
.search-header { padding: 10px; border-bottom: 1px solid #444; }
.search-header input { width: 100%; padding: 8px; box-sizing: border-box; background: #222; color: #fff; border: 1px solid #555; }
.event-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 400px; }
.event-list-item { padding: 10px; border-bottom: 1px solid #333; cursor: pointer; }
.event-list-item:hover { background: #2a2421; }
.event-list-item.active { background: #5a1919; color: #e5b044; font-weight: bold; }
.detail-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.section-title { margin: 0 0 10px 0; color: #e5b044; border-bottom: 1px solid #444; padding-bottom: 5px; }
.gift-display { display: flex; gap: 10px; flex-wrap: wrap; background: #151110; padding: 15px; border: 1px solid #444; min-height: 60px; }
.gift-item { display: flex; align-items: center; gap: 10px; background: #2a2421; padding: 5px 10px; border-radius: 4px; border: 1px solid #555; }
.gift-item img { width: 40px; height: 40px; object-fit: contain; }
.desc-content { background: #151110; padding: 15px; border: 1px solid #444; min-height: 200px; }
.choice-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.choice-btn { text-align: left; padding: 15px; background: #2a2421; color: #fff; border: 1px solid #555; cursor: pointer; border-radius: 4px; }
.choice-btn:hover { background: #3a322d; border-color: #e5b044; }

/* --- 3. 테마팩 뷰 스타일 --- */
.difficulty-tabs { display: flex; gap: 5px; margin-bottom: 15px; border-bottom: 2px solid #5a1919; padding-bottom: 5px; justify-content: flex-end; }
.diff-btn { background: transparent; color: #888; border: 1px solid #444; padding: 6px 20px; cursor: pointer; font-weight: bold; font-size: 14px; transition: all 0.2s; }
.diff-btn:hover { background: #333; color: #fff; }
.diff-btn.active { background: #5a1919; color: #fff; border-color: #ff4444; }

.theme-split-layout { display: flex; gap: 20px; align-items: stretch; }
.theme-info-panel { flex: 0 0 280px; background: #151110; border: 1px solid #444; padding: 15px; display: flex; flex-direction: column; gap: 20px; }
.info-section .red-title { color: #ff4444; font-size: 14px; margin: 0 0 10px 0; border-bottom: 1px solid #333; padding-bottom: 5px; }
.floor-display { font-size: 18px; font-weight: bold; color: #e5b044; padding-left: 5px; }

.boss-display { display: flex; align-items: center; gap: 10px; background: #2a2421; padding: 10px; border: 1px solid #333; min-height: 60px; }
.boss-display img { width: 50px; height: 50px; object-fit: cover; border: 1px solid #555; }
.boss-display span { font-size: 14px; color: #ddd; }

.theme-gift-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-gift-item { width: 45px; height: 45px; background: #000; border: 2px solid #e5b044; display: flex; align-items: center; justify-content: center; position: relative; }
.theme-gift-item img { max-width: 90%; max-height: 90%; object-fit: contain; }

.theme-list-panel { flex: 1; background: #1c1816; border: 1px solid #444; padding: 15px; display: flex; flex-direction: column; }
.theme-filter-bar { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.theme-filter-bar select { background: #111; color: #e5b044; border: 1px solid #444; padding: 5px 10px; outline: none; }

.theme-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; overflow-y: auto; max-height: 500px; }
.theme-card { background: #2a2421; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: all 0.2s; position: relative; padding-bottom: 30px; }
.theme-card img { width: 100%; height: 180px; object-fit: cover; border-bottom: 2px solid #444; }
.theme-card .theme-name { position: absolute; bottom: 5px; width: 90%; text-align: center; font-size: 13px; font-weight: bold; color: #7dd3e9; text-shadow: 1px 1px 2px #000; }
.theme-card:hover { border-color: #888; transform: translateY(-2px); }
.theme-card.active { border-color: #e5b044; box-shadow: 0 0 10px rgba(229, 176, 68, 0.4); }

/* --- 모달 스타일 --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal-content { background: #221d1a; padding: 30px; border-radius: 8px; border: 1px solid #e5b044; width: 400px; max-width: 90%; position: relative; }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #aaa; }
.close-btn:hover { color: #fff; }
#modal-img { width: 100%; height: 200px; object-fit: contain; margin-bottom: 15px; background: #111; border-radius: 4px; }
#modal-title { margin: 0 0 10px 0; color: #e5b044; }
.modal-tags { display: flex; gap: 10px; margin-bottom: 15px; }
.badge { background: #5a1919; padding: 3px 8px; border-radius: 4px; font-size: 12px; }
#modal-desc { white-space: pre-wrap; color: #ccc; line-height: 1.5; }