/* poe2-trial-mobile.css */
/* 모바일용 아코디언 스타일 - 기존 디자인 유지 */

/* ===========================================
   모바일 뷰 기본 설정
   =========================================== */

/* 데스크톱에서 모바일 뷰 숨김 */
.poe2-trial-mobile-view {
  display: none;
}

/* 모바일에서만 표시 */
@media (max-width: 768px) {
  .poe2-trial-mobile-view {
    display: block !important;
  }
}

/* ===========================================
   모바일 아코디언 컨테이너
   =========================================== */

.poe2-trial-mobile-accordion {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ===========================================
   아코디언 아이템 스타일
   =========================================== */

.poe2-trial-mobile-item {
  margin-bottom: 1px; /* 기존과 동일한 간격 */
  background-color: transparent;
  border-radius: 0;
}

.poe2-trial-mobile-item:first-child .poe2-trial-mobile-header {
  border-top: 1px solid #383838; /* 첫 번째 아이템 상단 선 */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.poe2-trial-mobile-item:last-child .poe2-trial-mobile-header {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.poe2-trial-mobile-item.poe2-trial-mobile-active:last-child .poe2-trial-mobile-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ===========================================
   아코디언 헤더 스타일 (기존 디자인 유지)
   =========================================== */

.poe2-trial-mobile-header {
  width: 100%;
  padding: 15px; /* 기존 패딩 유지 */
  background-color: #2c2c2c; /* 기존 배경색 유지 */
  border: none;
  border-bottom: 1px solid #383838; /* 기존 구분선 유지 */
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  transition: background-color 0.2s ease-in-out;
  outline: none;
  display: block;
  min-height: 44px; /* iOS 권장 최소 터치 타겟 */
}

.poe2-trial-mobile-header:hover {
  background-color: #3a3a3a; /* 기존 호버 색상 유지 */
}

.poe2-trial-mobile-header:focus {
  outline: 2px solid #00bcd4;
  outline-offset: -2px;
}

.poe2-trial-mobile-header.touch-active {
  background-color: #3a3a3a; /* 터치 피드백 */
}

/* 헤더 내부 콘텐츠 레이아웃 */
.poe2-trial-mobile-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

/* ===========================================
   모바일 별점 스타일 (기존과 동일)
   =========================================== */

.poe2-trial-mobile-stars {
  flex: 0 0 auto;
  margin-right: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.poe2-trial-mobile-stars .poe2-trial-star {
  font-size: 1.2em;
  line-height: 1;
}

.poe2-trial-mobile-stars .poe2-trial-star.filled {
  color: #ffd700; /* 기존 별점 색상 유지 */
}

.poe2-trial-mobile-stars .poe2-trial-star.empty {
  color: #5f5f5f; /* 기존 빈 별 색상 유지 */
}

/* ===========================================
   모바일 선택지 이름 스타일 (기존과 동일)
   =========================================== */

.poe2-trial-mobile-name {
  flex-grow: 1;
  font-weight: bold;
  color: #e1cd6e; /* 기존 선택지 이름 색상 유지 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ===========================================
   확장 아이콘 스타일 (기존과 동일)
   =========================================== */

.poe2-trial-mobile-expand-icon {
  flex: 0 0 auto;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poe2-trial-expand-symbol {
  font-size: 1.2em;
  color: #aaa; /* 기존 아이콘 색상 유지 */
  transition: transform 0.3s ease, color 0.2s ease;
  line-height: 1;
}

.poe2-trial-mobile-active .poe2-trial-expand-symbol {
  transform: rotate(180deg);
  color: #e1cd6e; /* 활성 상태에서 색상 변경 */
}

/* ===========================================
   아코디언 콘텐츠 스타일 (기존 디자인 유지)
   =========================================== */

.poe2-trial-mobile-content {
  display: none; /* 기본적으로 숨김 */
  background-color: #252525; /* 기존 콘텐츠 배경색 유지 */
  border-bottom: 1px solid #383838;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}

.poe2-trial-mobile-item:last-child .poe2-trial-mobile-content {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* ===========================================
   노트 섹션 스타일 (기존 디자인 완전 유지)
   =========================================== */

.poe2-trial-mobile-note-section {
  padding: 15px;
  padding-bottom: 0; /* 효과 섹션과의 간격 조정 */
}

.poe2-trial-mobile-note-container {
  background-color: #3a3415; /* 기존 노트 컨테이너 배경색 유지 */
  border: 1px solid #e1cd6e; /* 기존 테두리 색상 유지 */
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.poe2-trial-mobile-note-content {
  color: #e1cd6e; /* 기존 노트 텍스트 색상 유지 */
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0;
}

/* ===========================================
   효과 섹션 스타일 (기존 디자인 유지)
   =========================================== */

.poe2-trial-mobile-effect-section {
  padding: 15px;
}

.poe2-trial-mobile-effect-content {
  color: #ccc; /* 기존 효과 텍스트 색상 유지 */
  font-size: 0.9em;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0;
}

/* 노트가 있는 경우 효과 섹션 상단 패딩 제거 */
.poe2-trial-mobile-note-section + .poe2-trial-mobile-effect-section {
  padding-top: 0;
}

/* ===========================================
   모바일 상태 메시지 스타일
   =========================================== */

.poe2-trial-mobile-loading,
.poe2-trial-mobile-error,
.poe2-trial-mobile-no-results {
  padding: 20px;
  text-align: center;
  background-color: #2c2c2c;
  border-radius: 4px;
  margin: 10px 0;
}

.poe2-trial-mobile-message-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.poe2-trial-mobile-message-content {
  color: #aaa;
  font-size: 0.9em;
}

.poe2-trial-mobile-error .poe2-trial-mobile-message-content {
  color: #ff6b6b;
}

/* ===========================================
   모바일 스켈레톤 UI 스타일
   =========================================== */

.poe2-trial-mobile-skeleton {
  display: block;
}

.poe2-trial-mobile-skeleton-item {
  background-color: #2c2c2c;
  margin-bottom: 1px;
  padding: 15px;
  border-bottom: 1px solid #383838;
  border-radius: 0;
}

.poe2-trial-mobile-skeleton-item:first-child {
  border-top: 1px solid #383838;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.poe2-trial-mobile-skeleton-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.poe2-trial-mobile-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.poe2-trial-mobile-skeleton-header .poe2-trial-skeleton-content {
  background-color: #444;
  border-radius: 4px;
  height: 16px;
  animation: poe2-mobile-skeleton-pulse 1.5s ease-in-out infinite alternate;
}

.poe2-trial-mobile-skeleton-header .poe2-trial-skeleton-stars {
  width: 80px;
}

.poe2-trial-mobile-skeleton-header .poe2-trial-skeleton-name {
  flex-grow: 1;
  max-width: 150px;
}

.poe2-trial-mobile-skeleton-header .poe2-trial-skeleton-icon {
  width: 20px;
}

@keyframes poe2-mobile-skeleton-pulse {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* ===========================================
   작은 모바일 기기 대응 (iPhone SE 등)
   =========================================== */

@media (max-width: 400px) {
  .poe2-trial-mobile-header {
    padding: 12px;
  }
  
  .poe2-trial-mobile-header-content {
    gap: 8px;
  }
  
  .poe2-trial-mobile-stars {
    margin-right: 8px;
  }
  
  .poe2-trial-mobile-stars .poe2-trial-star {
    font-size: 1.1em;
  }
  
  .poe2-trial-mobile-name {
    font-size: 0.9em;
  }
  
  .poe2-trial-mobile-note-section,
  .poe2-trial-mobile-effect-section {
    padding: 12px;
  }
  
  .poe2-trial-mobile-note-container {
    padding: 10px;
  }
}

/* ===========================================
   접근성 향상
   =========================================== */

/* 포커스 시각화 개선 */
.poe2-trial-mobile-header:focus-visible {
  outline: 3px solid #00bcd4;
  outline-offset: -3px;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .poe2-trial-mobile-header {
    border: 2px solid #fff;
  }
  
  .poe2-trial-mobile-content {
    border: 2px solid #fff;
  }
  
  .poe2-trial-mobile-note-container {
    border: 2px solid #ffff00;
    background-color: #000;
  }
  
  .poe2-trial-mobile-note-content {
    color: #ffff00;
  }
  
  .poe2-trial-mobile-stars .poe2-trial-star.filled {
    color: #ffff00;
  }
  
  .poe2-trial-mobile-name {
    color: #ffff00;
  }
}

/* 다크모드 추가 지원 */
@media (prefers-color-scheme: dark) {
  .poe2-trial-mobile-header {
    background-color: #1a1a1a;
  }
  
  .poe2-trial-mobile-content {
    background-color: #151515;
  }
  
  .poe2-trial-mobile-header:hover {
    background-color: #2a2a2a;
  }
}

/* 애니메이션 감소 설정 지원 */
@media (prefers-reduced-motion: reduce) {
  .poe2-trial-expand-symbol,
  .poe2-trial-mobile-header {
    transition: none;
  }
  
  .poe2-trial-mobile-skeleton-header .poe2-trial-skeleton-content {
    animation: none;
    opacity: 0.8;
  }
  
  /* 아코디언 애니메이션 비활성화 */
  .poe2-trial-mobile-content {
    transition: none !important;
  }
}

/* ===========================================
   터치 최적화
   =========================================== */

/* 터치 스크롤 개선 */
.poe2-trial-mobile-accordion {
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

/* 터치 영역 확장 */
.poe2-trial-mobile-header {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari 줌 방지 */
.poe2-trial-mobile-header,
.poe2-trial-mobile-content {
  -webkit-text-size-adjust: 100%;
}

/* ===========================================
   인쇄 스타일
   =========================================== */

@media print {
  .poe2-trial-mobile-view {
    display: none !important;
  }
}

/* ===========================================
   큰 모바일/작은 태블릿 (768px 이하)
   =========================================== */

@media (max-width: 768px) and (min-width: 601px) {
  .poe2-trial-mobile-header {
    padding: 18px;
  }
  
  .poe2-trial-mobile-name {
    font-size: 1.05em;
  }
  
  .poe2-trial-mobile-note-section,
  .poe2-trial-mobile-effect-section {
    padding: 18px;
  }
}

/* ===========================================
   가로 모드 최적화
   =========================================== */

@media (max-width: 768px) and (orientation: landscape) {
  .poe2-trial-mobile-header {
    padding: 12px 15px;
  }
  
  .poe2-trial-mobile-note-section,
  .poe2-trial-mobile-effect-section {
    padding: 12px 15px;
  }
}