/* /public/css/adventure.css */

/* 모험 탭 스타일 */

/* 모험 카드 그리드 */
.adventure-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* 모험 카드 */
.adventure-card {
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.9));
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.adventure-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(100, 100, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.adventure-card:hover::before {
  opacity: 1;
}

.adventure-card:hover {
  transform: translateY(-2px);
  border-color: rgba(150, 150, 255, 0.5);
  box-shadow: 0 4px 20px rgba(100, 100, 255, 0.2);
}

.adventure-card.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.adventure-card.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 카드 아이콘 */
.card-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(100, 100, 255, 0.2), rgba(150, 100, 255, 0.2));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #a0a0ff;
}

/* 카드 콘텐츠 */
.card-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #e0e0ff;
  margin-bottom: 0.5rem;
}

.card-description {
  font-size: 0.9rem;
  color: #b0b0d0;
  line-height: 1.5;
  margin-bottom: 0;
}

.card-note {
  font-size: 0.8rem;
  color: #8080a0;
  font-style: italic;
  margin-top: 0.5rem;
}

/* 카드 화살표 */
.card-arrow {
  flex-shrink: 0;
  color: #a0a0ff;
  font-size: 1.5rem;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.adventure-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* 쿨타임 정보 */
.cooldown-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 8px;
  color: #ffaaaa;
  font-size: 0.9rem;
}

.cooldown-info i {
  font-size: 1rem;
}

/* 탐험 준비 화면 */
.explore-setup-container {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.back-btn {
  background: rgba(100, 100, 200, 0.2);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: #e0e0ff;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 1rem;
}

.back-btn:hover {
  background: rgba(100, 100, 200, 0.3);
  border-color: rgba(150, 150, 255, 0.5);
}

.setup-section {
  margin-bottom: 2rem;
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

.setup-section h3 {
  font-size: 1.25rem;
  color: #e0e0ff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(100, 100, 200, 0.3);
}

.required {
  color: #ff6b6b;
  font-weight: bold;
}

.section-description {
  font-size: 0.9rem;
  color: #9090b0;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.empty-message {
  color: #8080a0;
  font-style: italic;
  text-align: center;
  padding: 1rem;
}

/* 선택 드롭다운 */
.setup-select {
  width: 100%;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #e0e0ff;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.setup-select:focus {
  outline: none;
  border-color: #6c63ff;
}

.setup-select option {
  background: #1a1a2e;
  color: #e0e0ff;
}

/* 선택된 아이템 표시 */
.selected-items {
  margin-bottom: 1rem;
}

.selected-items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.selected-item-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(108, 99, 255, 0.2);
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.selected-item-chip .item-name {
  color: #d0d0ff;
}

.selected-item-chip .item-rarity {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.remove-item-btn {
  background: transparent;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.remove-item-btn:hover {
  color: #ff5252;
}

/* 가방 아이템 선택 모달 */
.bag-item-selection {
  padding: 1rem;
}

.selection-info {
  text-align: center;
  font-size: 1rem;
  color: #d0d0f0;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.3);
  border-radius: 8px;
}

.selection-info span {
  color: #6c63ff;
  font-weight: bold;
}

.item-card.selectable {
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.item-card.selectable:hover {
  border-color: rgba(108, 99, 255, 0.5);
  transform: translateY(-2px);
}

.item-card.selectable.selected {
  border-color: #6c63ff;
  background: rgba(108, 99, 255, 0.15);
}

.selection-indicator {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.item-card.selectable.selected .selection-indicator {
  opacity: 1;
}

.selection-indicator i {
  color: #6c63ff;
  font-size: 1.5rem;
}

.item-category {
  font-size: 0.85rem;
  color: #9090b0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 캐릭터 선택 */
.character-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.character-option {
  background: rgba(40, 40, 60, 0.5);
  border: 2px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.character-option:hover {
  border-color: rgba(150, 150, 255, 0.5);
  background: rgba(50, 50, 70, 0.7);
}

.character-option.selected {
  border-color: #6c63ff;
  background: rgba(108, 99, 255, 0.2);
}

.character-option img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

.character-option span {
  display: block;
  font-size: 0.9rem;
  color: #e0e0ff;
}

/* 장소 그리드 */
.location-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.worldview-section h4 {
  font-size: 1.1rem;
  color: #d0d0ff;
  margin-bottom: 1rem;
}

.locations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.location-card {
  background: rgba(40, 40, 60, 0.5);
  border: 2px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.location-card:hover {
  border-color: rgba(150, 150, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(100, 100, 255, 0.2);
}

.location-card.selected {
  border-color: #6c63ff;
  box-shadow: 0 0 20px rgba(108, 99, 255, 0.4);
}

.location-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.location-info {
  padding: 1rem;
}

.location-info h5 {
  font-size: 1rem;
  color: #e0e0ff;
  margin-bottom: 0.5rem;
}

.location-info .description {
  font-size: 0.85rem;
  color: #b0b0d0;
  line-height: 1.4;
  margin-top: 0.5rem;
}

/* 난이도 표시 */
.difficulty {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.difficulty-easy {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.difficulty-normal {
  background: rgba(33, 150, 243, 0.2);
  color: #64b5f6;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

.difficulty-hard {
  background: rgba(255, 152, 0, 0.2);
  color: #ffb74d;
  border: 1px solid rgba(255, 152, 0, 0.4);
}

.difficulty-extreme {
  background: rgba(244, 67, 54, 0.2);
  color: #e57373;
  border: 1px solid rgba(244, 67, 54, 0.4);
}

.difficulty-impossible {
  background: rgba(156, 39, 176, 0.2);
  color: #ba68c8;
  border: 1px solid rgba(156, 39, 176, 0.4);
}

/* 설정 액션 */
.setup-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.primary-btn {
  background: linear-gradient(135deg, #6c63ff, #5a52d5);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c73ff, #6a62e5);
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.4);
}

.primary-btn:disabled {
  background: rgba(100, 100, 100, 0.3);
  cursor: not-allowed;
  opacity: 0.5;
}

/* 탐험 진행 화면 */
.explore-view-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

.explore-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.danger-btn {
  background: rgba(244, 67, 54, 0.2);
  color: #e57373;
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.danger-btn:hover {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.6);
}

/* 상태 바 */
.explore-status {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hp-bar, .stamina-bar {
  flex: 1;
}

.hp-bar label, .stamina-bar label {
  display: block;
  font-size: 0.9rem;
  color: #b0b0d0;
  margin-bottom: 0.25rem;
}

.bar {
  width: 100%;
  height: 20px;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #81c784);
  transition: width 0.3s ease;
}

.stamina-bar .bar .fill {
  background: linear-gradient(90deg, #2196f3, #64b5f6);
}

/* 탐험 로그 */
.explore-log {
  flex: 1;
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 12px;
  padding: 1rem;
  overflow-y: auto;
  margin-bottom: 1rem;
  color: #e0e0ff;
  line-height: 1.6;
}

/* 탐험 액션 */
.explore-actions {
  display: flex;
  gap: 0.5rem;
}

#action-input {
  flex: 1;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #e0e0ff;
  font-size: 1rem;
}

#action-input:focus {
  outline: none;
  border-color: #6c63ff;
}

#action-submit {
  padding: 0.75rem 1.5rem;
}

/* 로그 엔트리 스타일 */
.log-entry {
  background: rgba(40, 40, 60, 0.6);
  border-left: 3px solid rgba(100, 100, 200, 0.5);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.log-entry:hover {
  background: rgba(50, 50, 70, 0.7);
  border-left-color: rgba(150, 150, 255, 0.7);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #9090b0;
}

.log-turn {
  font-weight: 600;
  color: #b0b0ff;
}

.log-time {
  opacity: 0.7;
}

.log-content {
  color: #d0d0f0;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 로그 타입별 색상 */
.log-battle {
  border-left-color: rgba(244, 67, 54, 0.7);
}

.log-encounter {
  border-left-color: rgba(76, 175, 80, 0.7);
}

.log-discovery {
  border-left-color: rgba(255, 193, 7, 0.7);
}

.log-story {
  border-left-color: rgba(33, 150, 243, 0.7);
}

.log-hazard {
  border-left-color: rgba(255, 152, 0, 0.7);
}

/* 액션 입력 그룹 */
.action-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.action-input {
  flex: 1;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #e0e0ff;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.action-input:focus {
  outline: none;
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.action-hint {
  font-size: 0.85rem;
  color: #9090b0;
  text-align: center;
  padding: 0.5rem;
  word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */
  overflow-wrap: break-word; /* 긴 단어는 필요시 줄바꿈 */
  line-height: 1.5;
}

/* 전투 UI */
.battle-ui {
  background: rgba(30, 30, 50, 0.6);
  border: 1px solid rgba(244, 67, 54, 0.3);
  border-radius: 12px;
  padding: 1rem;
}

.battle-info {
  margin-bottom: 1rem;
}

.monster-info h3 {
  color: #ff6b6b;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.monster-hp {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.monster-hp label {
  font-size: 0.9rem;
  color: #b0b0d0;
}

.hp-bar-small {
  width: 100%;
  height: 12px;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #f44336, #e57373);
  transition: width 0.5s ease;
}

.battle-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.action-section {
  background: rgba(40, 40, 60, 0.4);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.action-section h4 {
  color: #d0d0ff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(100, 100, 200, 0.2);
}

.skill-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skill-btn {
  background: rgba(108, 99, 255, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skill-btn:hover {
  background: rgba(108, 99, 255, 0.3);
  border-color: rgba(108, 99, 255, 0.6);
  transform: translateX(4px);
}

.secondary-btn {
  background: rgba(100, 100, 200, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(100, 100, 200, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.secondary-btn:hover {
  background: rgba(100, 100, 200, 0.3);
  border-color: rgba(100, 100, 200, 0.6);
}

.other-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* NPC 조우 UI */
.npc-encounter-ui {
  background: rgba(30, 30, 50, 0.6);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 12px;
  padding: 1rem;
}

.npc-info {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(100, 100, 200, 0.2);
}

.npc-info h3 {
  color: #81c784;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.npc-description {
  color: #d0d0f0;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.npc-details {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.npc-personality,
.npc-occupation {
  font-size: 0.85rem;
  color: #b0b0d0;
  padding: 0.25rem 0.75rem;
  background: rgba(40, 40, 60, 0.5);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.npc-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

/* 아이템 목록 */
.item-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  max-height: 500px;
  overflow-y: auto;
  padding: 0.5rem;
}

.item-card {
  background: rgba(40, 40, 60, 0.6);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.3s ease;
}

.item-card:hover {
  border-color: rgba(150, 150, 255, 0.5);
  background: rgba(50, 50, 70, 0.7);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.item-header h4 {
  color: #e0e0ff;
  font-size: 1rem;
  margin: 0;
}

.item-rarity {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}

/* common - 회색 */
.rarity-common {
  background: rgba(158, 158, 158, 0.2);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.4);
}

/* uncommon - 초록색 */
.rarity-uncommon {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

/* rare - 파란색 */
.rarity-rare {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

/* epic - 남색 */
.rarity-epic {
  background: rgba(63, 81, 181, 0.2);
  color: #3f51b5;
  border: 1px solid rgba(63, 81, 181, 0.4);
}

/* unique - 보라색 */
.rarity-unique {
  background: rgba(156, 39, 176, 0.2);
  color: #9c27b0;
  border: 1px solid rgba(156, 39, 176, 0.4);
}

/* legendary - 노란색 */
.rarity-legendary {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.4);
}

/* mythic - 빨간색 */
.rarity-mythic {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.4);
}

/* transcendent (초월) - 흰색 배경, 검은 글씨 */
.rarity-transcendent {
  background: #ffffff;
  color: #000000;
  border: 1px solid #cccccc;
  font-weight: 600;
}

/* primordial (태초) - 검은 배경, 흰 글씨, 카키색 강조, 애니메이션 */
.rarity-primordial {
  background: linear-gradient(135deg, #000000, #1a1a1a);
  color: #ffffff;
  border: 1px solid #f0e68c;
  font-weight: 700;
  animation: primordial-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(240, 230, 140, 0.5);
  position: relative;
  overflow: hidden;
}

.rarity-primordial::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(240, 230, 140, 0.1), transparent);
  animation: primordial-shimmer 3s linear infinite;
}

@keyframes primordial-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(240, 230, 140, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(240, 230, 140, 0.8), 0 0 30px rgba(240, 230, 140, 0.4);
  }
}

@keyframes primordial-shimmer {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

/* divine (신성) - 금색/오렌지색 배경, 흰 글씨, 빛나는 이펙트 */
.rarity-divine {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #ffffff;
  border: 1px solid #FFD700;
  font-weight: 700;
  animation: divine-glow 3s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.rarity-divine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  animation: divine-sparkle 2s ease-in-out infinite;
}

.rarity-divine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  animation: divine-shine 3s linear infinite;
}

@keyframes divine-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 35px rgba(255, 165, 0, 0.6), 0 0 45px rgba(255, 215, 0, 0.3);
  }
}

@keyframes divine-sparkle {
  0%, 100% {
    opacity: 0.3;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate3d(-50%, -50%, 0) scale(1.2);
  }
}

@keyframes divine-shine {
  0% {
    transform: translateX(-100%) translateY(-100%);
  }
  100% {
    transform: translateX(100%) translateY(100%);
  }
}

.item-description {
  font-size: 0.85rem;
  color: #b0b0d0;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.item-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.effect-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: rgba(108, 99, 255, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(108, 99, 255, 0.3);
  border-radius: 4px;
}

.use-item-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9rem;
}

/* 퀘스트 정보 */
.quest-info {
  padding: 1rem;
}

.quest-info h3 {
  color: #ffd54f;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.quest-description {
  color: #d0d0f0;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.quest-objectives,
.quest-rewards {
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(40, 40, 60, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(100, 100, 200, 0.2);
}

.quest-objectives h4,
.quest-rewards h4 {
  color: #b0b0ff;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.quest-objectives ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quest-objectives li {
  color: #d0d0f0;
  padding: 0.25rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.quest-objectives li::before {
  content: '•';
  position: absolute;
  left: 0.5rem;
  color: #6c63ff;
  font-weight: bold;
}

.quest-rewards p {
  color: #d0d0f0;
  margin: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quest-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.quest-actions button {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

/* 탐험 종료 화면 */
.exploration-end {
  padding: 1rem;
  text-align: center;
}

.exploration-end h3 {
  color: #81c784;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.exploration-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  background: rgba(40, 40, 60, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-item i {
  font-size: 1.5rem;
  color: #6c63ff;
}

.stat-item span {
  color: #d0d0f0;
  font-size: 0.95rem;
}

.success-message {
  color: #81c784;
  font-size: 1.1rem;
  font-weight: 600;
}

.info-message {
  color: #64b5f6;
  font-size: 1.1rem;
}

/* 인벤토리 스타일 */
.inventory-container {
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.inventory-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(40, 40, 60, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.item-count {
  font-size: 1.1rem;
  color: #d0d0ff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inventory-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-section label {
  font-size: 0.9rem;
  color: #b0b0d0;
  white-space: nowrap;
}

.inventory-select {
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  color: #e0e0ff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.inventory-select:focus {
  outline: none;
  border-color: #6c63ff;
}

.inventory-select option {
  background: #1a1a2e;
  color: #e0e0ff;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.inventory-item-card {
  background: rgba(40, 40, 60, 0.6);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1rem;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.inventory-item-card:hover {
  border-color: rgba(150, 150, 255, 0.5);
  background: rgba(50, 50, 70, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(100, 100, 255, 0.2);
}

/* 고등급 아이템 카드 강조 효과 */
/* Note: :has() selector requires modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+) */
.inventory-item-card:has(.rarity-legendary) {
  border-color: rgba(255, 193, 7, 0.3);
}

.inventory-item-card:has(.rarity-legendary):hover {
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
}

.inventory-item-card:has(.rarity-mythic) {
  border-color: rgba(244, 67, 54, 0.3);
}

.inventory-item-card:has(.rarity-mythic):hover {
  border-color: rgba(244, 67, 54, 0.6);
  box-shadow: 0 4px 20px rgba(244, 67, 54, 0.3);
}

.inventory-item-card:has(.rarity-transcendent) {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(50, 50, 60, 0.6);
}

.inventory-item-card:has(.rarity-transcendent):hover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}

.inventory-item-card:has(.rarity-primordial) {
  border-color: rgba(240, 230, 140, 0.3);
  background: rgba(20, 20, 25, 0.8);
}

.inventory-item-card:has(.rarity-primordial):hover {
  border-color: rgba(240, 230, 140, 0.6);
  box-shadow: 0 4px 20px rgba(240, 230, 140, 0.3);
}

.inventory-item-card:has(.rarity-divine) {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(50, 45, 30, 0.7);
}

.inventory-item-card:has(.rarity-divine):hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4), 0 8px 30px rgba(255, 165, 0, 0.2);
}

.item-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 기존 item-rarity-badge 스타일 제거 (더 이상 사용하지 않음) */
/*
.item-rarity-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}
*/

.item-category-badge {
  font-size: 0.8rem;
  color: #9090b0;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(100, 100, 200, 0.1);
  border-radius: 4px;
  display: inline-block;
}

.item-name {
  font-size: 1.1rem;
  color: #e0e0ff;
  margin: 0;
  flex: 1;
  font-weight: 600;
}

.item-description-short {
  font-size: 0.85rem;
  color: #b0b0d0;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.item-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-view {
  flex: 1;
  background: rgba(108, 99, 255, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.btn-view:hover {
  background: rgba(108, 99, 255, 0.3);
  border-color: rgba(108, 99, 255, 0.6);
}

/* 아이템 상세 모달 */
.item-detail-modal {
  padding: 1rem;
  max-height: 70vh;
  overflow-y: auto;
}

.item-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(100, 100, 200, 0.3);
}

.item-detail-header h3 {
  color: #e0e0ff;
  font-size: 1.3rem;
  margin: 0;
}

.item-detail-info {
  background: rgba(40, 40, 60, 0.5);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(100, 100, 200, 0.1);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: #9090b0;
  font-size: 0.9rem;
}

.info-value {
  color: #d0d0f0;
  font-weight: 600;
}

.item-detail-description {
  margin-bottom: 1rem;
}

.item-detail-description h4,
.item-detail-effects h4,
.item-detail-flags h4 {
  color: #b0b0ff;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.item-detail-description p {
  color: #d0d0f0;
  line-height: 1.6;
  font-size: 0.95rem;
}

.item-detail-effects {
  margin-bottom: 1rem;
}

.effects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.item-detail-flags {
  margin-bottom: 1rem;
}

.flags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flag-tag {
  font-size: 0.85rem;
  padding: 0.25rem 0.75rem;
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.item-detail-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(100, 100, 200, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, #6c63ff, #5a52d5);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #7c73ff, #6a62e5);
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.4);
}

.btn-danger {
  background: rgba(244, 67, 54, 0.2);
  color: #e57373;
  border: 1px solid rgba(244, 67, 54, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-danger:hover {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.6);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .adventure-cards {
    padding: 0.5rem;
  }

  .adventure-card {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
  }

  .card-arrow {
    transform: rotate(90deg);
  }

  .adventure-card:hover .card-arrow {
    transform: rotate(90deg) translateY(4px);
  }

  .locations {
    grid-template-columns: 1fr;
  }

  .character-select {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* 전투 액션 그리드는 모바일에서도 가로 유지 */
  .battle-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
  }
  
  .npc-actions-grid {
    grid-template-columns: 1fr;
  }

  .exploration-stats {
    grid-template-columns: 1fr;
  }

  .item-list {
    grid-template-columns: 1fr;
  }

  .quest-actions {
    flex-direction: column;
  }

  .quest-actions button {
    width: 100%;
  }
}

/* 첫 탐험 경험치 분배 모달 스타일 */
.first-time-exp-modal {
  padding: 10px 0;
}

.first-time-exp-modal .modal-description {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.first-time-exp-modal .modal-description p {
  margin: 8px 0;
  font-size: 16px;
}

.first-time-exp-modal .modal-description strong {
  font-weight: 700;
}

.first-time-exp-modal .remaining-exp {
  font-size: 18px;
  font-weight: 700;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.first-time-exp-modal .remaining-exp span {
  font-size: 24px;
}

.proficiency-distribution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.proficiency-item {
  background: #f5f5f5;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s;
}

.proficiency-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.proficiency-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.proficiency-header i {
  color: #667eea;
  font-size: 18px;
}

.proficiency-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.proficiency-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: #666;
}

.exp-btn:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.exp-btn:active {
  transform: scale(0.95);
}

.exp-input {
  flex: 1;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.exp-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.quick-distribute {
  background: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-distribute p {
  font-weight: 600;
  margin: 0;
  color: #666;
}

.quick-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.quick-btn:hover {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

@media (max-width: 768px) {
  .proficiency-distribution-grid {
    grid-template-columns: 1fr;
  }

  .quick-distribute {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-distribute p {
    text-align: center;
  }

  .quick-btn {
    width: 100%;
  }
}

/* ========================================
   던전 시스템 스타일
   ======================================== */

/* 던전 준비 화면 */
.dungeon-setup-container {
  padding: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.ticket-info-box {
  background: linear-gradient(135deg, rgba(100, 100, 255, 0.2), rgba(150, 100, 255, 0.2));
  border: 1px solid rgba(150, 150, 255, 0.4);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  color: #e0e0ff;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ticket-info-box i {
  font-size: 2rem;
  color: #a0a0ff;
}

.setup-section {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  color: #e0e0ff;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(100, 100, 200, 0.3);
}

.character-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.character-select-card {
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.9));
  border: 2px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.character-select-card:hover:not(.disabled) {
  border-color: rgba(150, 150, 255, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(100, 100, 255, 0.3);
}

.character-select-card.selected {
  border-color: #ffc107;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
}

.character-select-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.character-select-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
  border: 2px solid rgba(100, 100, 200, 0.4);
}

.character-select-info h4 {
  font-size: 1rem;
  color: #e0e0ff;
  margin: 0.5rem 0;
}

.character-worldview {
  font-size: 0.85rem;
  color: #b0b0d0;
  margin: 0.25rem 0;
}

.dungeon-exp {
  font-size: 0.85rem;
  color: #ffc107;
  margin: 0.25rem 0;
}

.status-text {
  font-size: 0.8rem;
  color: #f44336;
  margin-top: 0.5rem;
}

.dungeon-select-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dungeon-select-card {
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.9));
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
}

.dungeon-header h4 {
  font-size: 1.25rem;
  color: #e0e0ff;
  margin-bottom: 0.5rem;
}

.dungeon-description {
  font-size: 0.9rem;
  color: #b0b0d0;
  margin-bottom: 1rem;
}

.floor-select h5 {
  font-size: 1rem;
  color: #d0d0ff;
  margin-bottom: 0.75rem;
}

.floor-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.floor-btn {
  background: rgba(108, 99, 255, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.floor-btn:hover:not(.disabled) {
  background: rgba(108, 99, 255, 0.3);
  border-color: rgba(108, 99, 255, 0.6);
  transform: translateY(-2px);
}

.floor-btn.selected {
  background: rgba(255, 193, 7, 0.3);
  border-color: #ffc107;
  color: #ffc107;
}

.floor-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.required-exp {
  font-size: 0.75rem;
  color: #8080a0;
  margin-top: 0.25rem;
}

.dungeon-start-section {
  text-align: center;
  padding: 2rem 0;
}

.hint-text {
  font-size: 0.9rem;
  color: #b0b0d0;
  margin-top: 1rem;
}

/* 던전 진행 화면 */
.dungeon-view-container {
  padding: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.dungeon-stats {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stat-bar label {
  font-size: 1rem;
  color: #d0d0ff;
  font-weight: 600;
}

.bar-container {
  width: 100%;
  height: 24px;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 12px;
}

.hp-fill {
  background: linear-gradient(90deg, #f44336, #e57373);
}

.stamina-fill {
  background: linear-gradient(90deg, #4caf50, #81c784);
}

.stat-value {
  font-size: 0.9rem;
  color: #b0b0d0;
  text-align: right;
}

.dungeon-map-container {
  background: rgba(20, 20, 40, 0.9);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dungeon-map-grid {
  display: grid;
  gap: 4px;
  max-width: 500px;
  margin: 0 auto;
}

.map-cell {
  aspect-ratio: 1;
  background: rgba(40, 40, 60, 0.6);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.map-cell.fog {
  background: rgba(20, 20, 30, 0.9);
  color: #505070;
}

.map-cell.revealed {
  background: rgba(60, 60, 80, 0.7);
  color: #a0a0ff;
}

.map-cell.investigated {
  background: rgba(80, 80, 100, 0.7);
  border-color: rgba(150, 150, 255, 0.4);
}

.map-cell.current-position {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 152, 0, 0.3));
  border: 2px solid #ffc107;
  color: #ffc107;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
  }
}

.map-cell:hover:not(.fog):not(:disabled) {
  border-color: rgba(150, 150, 255, 0.6);
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(150, 150, 255, 0.4);
}

.map-cell:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.map-cell.selectable {
  cursor: pointer;
  border-color: rgba(255, 193, 7, 0.6);
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

.dungeon-actions {
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dungeon-actions h3 {
  font-size: 1.25rem;
  color: #e0e0ff;
  margin-bottom: 1rem;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.action-btn {
  background: rgba(108, 99, 255, 0.2);
  color: #b0b0ff;
  border: 1px solid rgba(108, 99, 255, 0.4);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0; /* 텍스트 오버플로우 방지 */
  overflow: hidden; /* 텍스트 삐져나옴 방지 */
  text-align: center;
  word-wrap: break-word; /* 긴 텍스트 줄바꿈 */
}

.action-btn:hover:not(:disabled) {
  background: rgba(108, 99, 255, 0.3);
  border-color: rgba(108, 99, 255, 0.6);
  transform: translateY(-2px);
}

.action-btn.selected {
  background: rgba(255, 193, 7, 0.3);
  border-color: #ffc107;
  color: #ffc107;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-btn i {
  font-size: 1.5rem;
  flex-shrink: 0; /* 아이콘 크기 고정 */
}

.action-btn span {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.dungeon-event-log {
  background: rgba(20, 20, 40, 0.9);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.dungeon-event-log h3 {
  font-size: 1.25rem;
  color: #e0e0ff;
  margin-bottom: 1rem;
}

.event-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-message {
  padding: 0.75rem;
  background: rgba(60, 60, 80, 0.5);
  border-left: 3px solid rgba(100, 100, 255, 0.5);
  border-radius: 4px;
  color: #b0b0d0;
  font-size: 0.9rem;
}

/* 퀘스트 화면 */
.quest-container {
  padding: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quest-card {
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.9), rgba(20, 20, 40, 0.9));
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.quest-card.complete {
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
}

.quest-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.quest-title {
  font-size: 1.25rem;
  color: #e0e0ff;
  margin: 0;
}

.quest-badges {
  display: flex;
  gap: 0.5rem;
}

.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.bonus-badge {
  background: rgba(255, 193, 7, 0.3);
  color: #ffc107;
  border: 1px solid #ffc107;
}

.complete-badge {
  background: rgba(76, 175, 80, 0.3);
  color: #4caf50;
  border: 1px solid #4caf50;
}

.quest-description {
  font-size: 0.9rem;
  color: #b0b0d0;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.quest-info {
  margin-bottom: 1rem;
}

.quest-info p {
  font-size: 0.85rem;
  color: #9090b0;
  margin: 0.25rem 0;
}

.quest-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.progress-bar-container {
  flex: 1;
  height: 20px;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.9rem;
  color: #b0b0d0;
  font-weight: 600;
  white-space: nowrap;
}

.quest-rewards {
  background: rgba(40, 40, 60, 0.5);
  border: 1px solid rgba(100, 100, 200, 0.2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.quest-rewards h4 {
  font-size: 1rem;
  color: #d0d0ff;
  margin-bottom: 0.5rem;
}

.reward-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(60, 60, 80, 0.5);
  border-radius: 6px;
  color: #a0a0ff;
  font-size: 0.85rem;
}

.reward-item i {
  color: #ffc107;
}

.quest-actions {
  display: flex;
  gap: 1rem;
}

.quest-actions button {
  flex: 1;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #8080a0;
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state p {
  font-size: 1.25rem;
  margin: 0.5rem 0;
}

.modal-textarea {
  width: 100%;
  min-height: 100px;
  padding: 0.75rem;
  background: rgba(40, 40, 60, 0.8);
  border: 1px solid rgba(100, 100, 200, 0.3);
  border-radius: 8px;
  color: #e0e0ff;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  margin-top: 1rem;
}

.modal-textarea:focus {
  outline: none;
  border-color: rgba(150, 150, 255, 0.5);
}

/* 모바일 최적화 */
@media (max-width: 768px) {
  .character-select-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .floor-buttons {
    flex-direction: column;
  }
  
  .dungeon-map-grid {
    max-width: 100%;
  }
  
  .action-buttons {
    grid-template-columns: 1fr;
  }
  
  .quest-actions {
    flex-direction: column;
  }
}