/* ==========================================================================
   1. 변수 및 테마 설정 (Variables & Themes)
   ========================================================================== */
:root {
  /* [Light Theme] 기본 설정 */
  --primary-color: #3d5afe;
  --bg-color: #f4f7f9;
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --text-main: #2c3e50;
  --text-sub: #000000;
  --border-color: #e0e6ed;
  --accent-gold: #f1c40f;

  --server-tab-color: #00000065;
  --server-tab-active-tab-color: #ffffff;
  --server-tab-active-tab-bg-color: #00000080;

  --btn-kakao: #FEE500; /* 카카오 노란색 */
  --btn-kakao-bg:  #3C1E1E;

  /* [요청] Light Theme 배경 이미지 */
  --main-bg-url: url('https://cdn-lostark.game.onstove.com/uploadfiles/banner/636058155268954735.jpg');
}

/* [Dark Theme] 다크 모드 설정 */
.dark-theme {
  --bg-color: #1a1c1e;
  --header-bg: #25282c00;
  --footer-bg: #25282c00;
  --card-bg: #2d3136;
  --text-main: #ececec;
  --text-sub: #b0b0b0;
  --border-color: #3f444a;

  --server-tab-color:var(--text-sub);
  --server-tab-active-tab-color: var(--accent-gold);
  --server-tab-active-tab-bg-color: #3d5afe45;


  /* [요청] Dark Theme 배경 이미지 */
  --main-bg-url: url('https://cdn-lostark.game.onstove.com/developer/assets/images/main_BG.jpg');
}

/* 다크 모드에서의 버튼 스타일 변경 */
/* 배경을 어둡게 하고, 테두리와 글자색으로 강조 */
.dark-theme .btn-header-primary {
  background-color: rgba(255, 255, 255, 0.05);
  /* 투명한 배경 */
  border: 1px solid var(--primary-color);
  /* 파란색 테두리 */
  color: var(--primary-color);
  /* 파란색 글씨 */
}

/* 다크 모드에서 호버 시 다시 채워짐 */
.dark-theme .btn-header-primary:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* ==========================================================================
   2. 전역 설정 및 기본 레이아웃 (Global & Layout)
   ========================================================================== */
* {
  box-sizing: border-box;
}

/* body 설정: Flex Layout, 최소 너비 1200px 고정 */
body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  transition: background 0.3s, color 0.3s;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 1200px;
  /* [요구사항] 최소 넓이 고정 */

  /* 화면 전체 배율을 90%로 축소 (브라우저 축소와 동일 효과) */
  zoom: 0.9;
  /* 축소된 비율만큼 높이를 늘려야 화면에 꽉 찹니다. (100 / 0.9 = 111.111...) */
  min-height: 111.12vh;
  /* Flex 구조를 명시하여 푸터가 바닥에 붙도록 함 (기존에 없다면 추가) */
  display: flex;
  flex-direction: column;
}

/* 배경 이미지 (20% 투명도 가상 요소) */
/* 배경 이미지 설정 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* CSS 변수로 URL 적용 */
  background-image: var(--main-bg-url);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  opacity: 0.5;
  /* 배경 흐림 정도 */
  z-index: -1;

  /* 배경 이미지가 바뀔 때 부드럽게 전환 */
  transition: background-image 0.5s ease-in-out;
}

/* 공통 컨테이너 레이아웃 (좌우 여백) */
.header-container,
.main-header,
.main-body,
.main-footer {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* ==========================================================================
   스크롤바 커스터마이징 (Webkit: Chrome, Edge, Safari 등)
   ========================================================================== */

/* 1. 스크롤바 전체 크기 설정 */
::-webkit-scrollbar {
  width: 5px;
  /* 세로 스크롤바 너비 */
  height: 10px;
  /* 가로 스크롤바 높이 */
}

/* 2. 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  /* 투명에 가까운 아주 연한 배경 */
  border-radius: 5px;
}

/* 3. 스크롤바 핸들 (움직이는 막대) */
::-webkit-scrollbar-thumb {
  background: #888;
  /* 기본 색상 (회색) */
  border-radius: 1px;
  /* 둥근 모서리 */
  border: 1px solid transparent;
  /* 트랙과의 간격을 위한 투명 테두리 */
  background-clip: content-box;
  /* 테두리 안쪽만 색칠 */
}

/* 4. 스크롤바 핸들 호버 (마우스 올렸을 때) */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* 좀 더 진한 회색 */
  border: 1px solid transparent;
  background-clip: content-box;
}

/* [선택] 다크 모드일 때 스타일 (필요시 추가) */
.dark-theme ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.dark-theme ::-webkit-scrollbar-thumb {
  background: #666;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* ==========================================================================
   3. 헤더 영역 (Header)
   ========================================================================== */
.main-header {
  height: 60px;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  flex-shrink: 0;
  /* 공간 부족 시 찌그러짐 방지 */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

/* 로고 영역 스타일 보완 */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 1.2rem;
}

/* 로고 이미지 크기 수정 */
.logo img {
  width: auto;
  /* 가로 크기는 이미지 비율에 맞게 자동 설정 */
  height: 40px;
  /* 세로 크기를 헤더(60px)에 들어갈 정도로 고정 (조절 가능) */
  object-fit: contain;
}

/* 새소식 슬라이더 */
.notice-slider {
  flex: 1;
  margin: 0 40px;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;

  width: 320px;
  overflow: visible;
}

.notice-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 헤더 도구 모음 */
.header-tools {
  display: flex;
  gap: 10px;
  align-items: center;
}

.header-tools select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-main);
  height: 32px;
}

/* 헤더 버튼 스타일 */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-main);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.tool-btn:hover {
  background: var(--border-color);
  color: var(--primary-color);
}

/* 헤더 전용 강조 버튼 (데이터 없을 때 노출) */
.btn-header-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  /* 애니메이션 부드럽게 */
}

.btn-header-primary:hover {
  background-color: #2c42d6;
}

/* ==========================================================================
   4. 메인 컨텐츠 영역 (Main Body)
   ========================================================================== */
.main-body {
  flex: 1;
  /* 남은 공간 모두 차지 */
  overflow-y: auto;
  /* 내부 스크롤 */
}

/* --- 계정 탭 (Account Tabs) --- */
.account-tabs {
  display: flex;
  gap: 8px; /* 탭 사이 간격 */
  margin: 15px 0 0 0;
  padding: 0 10px;
  border-bottom: 2px solid var(--border-color); /* 바닥에 라인을 깔아 안정감 부여 */
}

.tab-item {
  position: relative;
  color: var(--server-tab-color);
  padding: 5px 20px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  transition: all 0.2s ease;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 0;

    /* 테두리를 그려서 탭 느낌 강조 */
  border: 10px solid #ffffff00;
  border-top: 2px solid #ffffff00;
  border-right: 2px solid #ffffff00;
  border-bottom: 2px solid #ffffff00;
  margin: -10px 0px 0px -10px;
}

/* 호버 효과 */
.tab-item:hover {
  background-color: rgba(128, 128, 128, 0.1);
  color: var(--text-main);
}
/* 선택된 탭 (Active) */
.tab-item.active {
  color: var(--server-tab-active-tab-color);  
  background-color: var(--server-tab-active-tab-bg-color);
  /* 테두리를 그려서 탭 느낌 강조 */
  border: 10px solid #3d5afe;
  border-top: 2px solid #ffffff00;
  border-right: 2px solid #ffffff00;
  border-bottom: 2px solid #ffffff00;
  z-index: 1; /* 다른 선보다 위에 오게 */
}

.tab-item .fa-times {
  margin-left: 10px;
  font-size: 0.7rem;
}

.tab-item .fa-times:hover {
  color: #ff4d4f;
}

/*  탭 내부 갱신 아이콘 스타일 */
.tab-icon-refresh {
  margin-left: 10px;
  font-size: 1.0rem;
  /* 아이콘 크기 */
  color: var(--text-sub);
  transition: all 0.2s;
  cursor: pointer;
}

/* [핵심] 갱신 아이콘 호버 시 녹색 계열 변경 */
.tab-icon-refresh:hover {
  color: #2ecc71;
  /* Bright Green */
  transform: rotate(360deg);
  /* (선택사항) 회전 효과 */
}

/*  탭 내부 삭제(쓰레기통) 아이콘 스타일 */
.tab-icon-delete {
  margin-left: 8px;
  font-size: 1.0rem;
  /* 아이콘 크기 */
  color: var(--text-sub);
  transition: all 0.2s;
  cursor: pointer;
  opacity: 0.6;
}

.tab-icon-delete:hover {
  color: #e74c3c;
  /* 삭제는 빨간색이 국룰이지만, 원치 않으시면 제거 가능 */
  opacity: 1;
}

/* 탭 내부 아이콘 */
.tab-icon-refresh, 
.tab-icon-delete {
  margin-left: 10px;
  font-size: 0.9rem;
  opacity: 0.6;
  transition: 0.2s;
}

.tab-item.active .tab-icon-refresh,
.tab-item.active .tab-icon-delete {
  opacity: 1;
}

/* --- 서버 섹션 (Server Section) --- */
.server-section {
  margin-bottom: 0px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.server-title {
  position: relative;
  font-size: 1.2rem;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  border-left: 4px solid var(--primary-color);
  color: var(--text-main);
}

/* 서버 헤더 버튼 그룹 */
.server-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
}

.gold-summary {
  font-size: 0.9rem;
  color: var(--accent-gold);
  margin-left: 10px;
  font-weight: normal;
}

/* --- 캐릭터 그리드 (Character Grid) --- */
.character-grid {
  display: grid;
  /* 1fr은 min-width: auto가 기본이라 내용이 길어지면 늘어납니다. */
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 0px;
}

/* 반응형: 화면이 좁아지면 컬럼 수 조절 */
@media (max-width: 1100px) {
  .character-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .character-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ==========================================================================
   5. 캐릭터 카드 (Character Card)
   ========================================================================== */
.char-card {
  background: var(--card-bg);
  border-radius: 0px;
  padding: 12px 5px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s, background-color 0.2s;
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;

  /* [핵심] Grid Item 내부 컨텐츠가 넘쳐도 카드가 늘어나지 않게 함 */
  min-width: 0;
  overflow: hidden;
}

@keyframes goldenGlow {
  0% {
    border-color: var(--accent-gold);
    box-shadow: 0 0 5px var(--accent-gold); /* 선택사항: 은은한 광채 */
  }
  50% {
    border-color: #ffeeb0; /* 더 밝은 금색 or 흰색 */
    box-shadow: 0 0 15px var(--accent-gold);
  }
  100% {
    border-color: var(--accent-gold);
    box-shadow: 0 0 5px var(--accent-gold);
  }
}

.char-card:hover {
  transform: translateY(0px);
  /* 애니메이션 적용: 1.5초 주기로 무한 반복 */
  animation: goldenGlow 1.5s infinite ease-in-out;
}

/* 캐릭터 이동 핸들 아이콘 */
.drag-handle-char-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  /* 오버레이보다 확실히 위 */

  color: #f00;

  background: rgba(0, 0, 0, 0.5);
  padding: 8px;
  /* 터치/클릭 영역 확보 */
  border-radius: 4px;
  opacity: 0;
  /* 기본 숨김 */
  transition: opacity 0.2s;

  /* [중요] 아이콘 자체가 드래그 대상이 되므로 이벤트를 받아야 함 */
  pointer-events: auto;
  cursor: grab;
}

/* 드래그 중인 상태 스타일 (선택사항) */
.drag-handle-char-icon:active {
  cursor: grabbing;
}

.char-card:hover .drag-handle-char-icon {
  opacity: 1;
}

/* 캐릭터 배경 이미지 */
.char-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
  z-index: 0;
  transition: transform 0.3s, opacity 0.3s, filter 0.3s;

  /* [Light Theme] 화이트 모드 설정 (수정됨) */
  /* 1. invert(1): 어두운 배경 -> 밝은 배경으로 반전 (글씨 가독성 확보) */
  /* 2. grayscale(1): 색상을 뺌 (반전시 피부색이 파랗게 되는 것 방지) */
  /* 3. contrast(0.8): 너무 쨍하지 않게 대비 조절 */
  filter: invert(1) grayscale(1) contrast(0.8);

  /* [핵심] 반전되어 배경이 밝아졌으므로, 투명도를 높여도(0.5~0.7) 글씨가 잘 보입니다. */
  /* 더 이상 '뿌옇게' 보이지 않고 선명한 연필 스케치처럼 보입니다. */
  opacity: 0.6;
}

/* [Dark Theme] 다크 모드 설정 */
.dark-theme .char-bg {
  opacity: 0.5;
  /* 다크모드는 원본 그대로 (흑백 제거, 밝기/대비 살짝 보정) */
  filter: grayscale(0) brightness(1.1) contrast(1.1);
}

/* [핵심] 캐릭터 카드에 마우스를 올렸을 때만 표시 */
.char-card:hover .char-header-actions {
  opacity: 1;
  pointer-events: auto;
}

.char-card:hover .char-bg {
  transform: scale(1.1);
  opacity: 0.3;
}

.char-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%);
  z-index: 1;
}

/* 캐릭터 카드 내부 컨텐츠 공통 */
.char-header,
.char-body {
  position: relative;
  z-index: 2;
  color: #fff;  
  padding: 10px 8px 15px 8px;
}

/* --- 캐릭터 헤더 정보 --- */
.char-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.char-info {
  margin-bottom: 15px;
}

/* 버튼 그룹 (왼쪽: 갱신/삭제, 오른쪽: 이동) */
.action-group-left,
.action-group-right {
  display: flex;
  gap: 4px;
}

.row-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 4px;
  opacity: 0.9;
}

.row-combat {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* 캐릭터 이름 (1줄 말줄임 처리) */
.row-name {
  min-width: 0;
  /* Flex item 축소 허용 */
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.char-name, .text-name {
  font-weight: 500;
  font-size: 1.1rem;
  /* 말줄임 필수 3요소 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Flex 부모 내에서 남은 공간만큼만 차지 */
  flex: 1;
  display: block;
}

.char-level {
  color: var(--accent-gold);
  font-weight: bold;
  font-size: 0.85rem;
}

.char-class {
  font-size: 0.8rem;
  color: var(--text-sub);
  margin-left: 5px;
}

/* --- 캐릭터 본문 (레이드 & 할 일) --- */
.char-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
  font-size: 0.85rem;
}

.section-title {
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--accent-gold);
  font-size: 1.1rem;
}

/* 레이드 리스트 */
.raid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.raid-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 5px;
  border-radius: 6px;

  /* [핵심] 세로(Column) 배치를 통해 2줄로 나눔 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 1줄과 2줄 사이 간격 */

  min-height: auto;
}

.raid-difficulty-nightmare {
  color: #D81B60;
  background-color: rgba(233, 30, 99, 0.12);
}
.raid-difficulty-hard {
  color: #E64A19;
  background-color: rgba(255, 87, 34, 0.12);
}
.raid-difficulty-normal {
  /* color: #317d2e; */
  color: #2ecc71;
  background-color: rgba(76, 175, 80, 0.12);
}
.raid-difficulty-single{
  color: #7c848a;
  background-color: rgba(158, 158, 158, 0.12);
}

/* 1번째 줄: 체크박스 + 이름 + 레벨 */
.raid-line-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* 레이드 이름 및 체크박스 영역 */
.raid-name-area {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  /* 말줄임 대응 */
}

/* 좌측: 체크박스 + 레이드명 */
.raid-left-group {
  display: flex;
  align-items: center;
  flex: 1;
  /* 남은 공간 차지 */
  min-width: 0;
  /* 말줄임 위해 */
}

/* 레이드 이름 (난이도 색상 적용될 곳) */
.raid-name-badge {
  font-weight: 500;
  border-radius: 4px;
  font-size: 1rem;
  white-space: nowrap;
}

.checkbox-wrapper:hover .raid-name-badge{
  font-weight: 1000;
}

/* 우측: 레벨 + 골드 정보 */
.raid-right-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 레벨 텍스트 */
.raid-level-text {
  font-size: 0.8rem;
  color: var(--text-sub);
  /* margin-left: 8px; */
  white-space: nowrap;
}

/* 2번째 줄: 골드 정보 (오른쪽 정렬) */
.raid-line-2 {
  display: flow;
  align-items: center;
  justify-content: flex-end;
  /* 오른쪽 정렬 */
  width: 100%;
  padding-top: 0px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  /* 구분선 (선택사항) */
}

/* 골드 정보 스타일 보정 */
.raid-gold {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-gold);
}

.gold-detail {
  font-size: 0.9rem;
  color: var(--text-sub);
  margin-left: 4px;
}

.raid-reward-gold {
  cursor:pointer;
  margin:0 2px;
}

.raid-reward-gold:hover{
  font-weight: 1000;
  color: #ffffff;
}

.raid-top {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.raid-name {
  font-weight: bold;
  margin-left: 5px;
}

.raid-meta {
  font-size: 0.75rem;
  color: #ccc;
  margin-left: 24px;
}

/* 레이드 아이템 내부 골드 영역 */
.raid-gold {
  margin-top: 2px;
  font-size: 0.8rem;
  color: #ffeb3b;

  /* [핵심] 내용이 길어도 절대 줄바꿈 하지 않음 */
  white-space: nowrap;

  /* Flexbox로 아이콘과 텍스트 수직 중앙 정렬 */
  display: flex;
  align-items: center;
}

.gold-private {
  color: #aaa;
  margin-left: 5px;
  font-size: 0.75rem;
}

.gold-sub-text {
  font-size: 0.95rem;
  color: var(--accent-gold);
  margin-left: auto;
}

/* 게이지 바 */
.raid-status {
  font-size: 0.8rem;
}

/* --- Drag & Drop 스타일 --- */
.raid-slot {
  cursor: grab;
  transition: transform 0.2s, box-shadow 0.2s;
}

.raid-slot:active {
  cursor: grabbing;
}

/* 드래그 중인 요소가 드롭 가능한 영역 위에 있을 때 */
.raid-slot.drag-over {
  border: 2px dashed #f39c12; /* 노란색 점선 */
  background-color: rgba(243, 156, 18, 0.1);
  transform: scale(1.02);
}

/* 드래그 중인 원본 요소 */
.raid-slot.dragging {
  opacity: 0.5;
}

progress {
  width: 100%;
  height: 8px;
  appearance: none;
  margin-top: 5px;
}

progress::-webkit-progress-bar {
  background: var(--border-color);
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background: var(--primary-color);
  border-radius: 10px;
}

/* 할 일 리스트 */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* 0으로 변경 */
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  /* 패딩도 0으로 변경하여 간격 최소화 */
  min-height: 24px;
  /* 너무 좁아 클릭이 어려운 것을 방지하기 위한 최소 높이 */
}

/* 기본 할일과 일반 할일 구분선 */
.todo-separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

/* 기본 할일 스타일 (삭제/수정 불가 시각적 표현) */
.todo-content.default-todo {
  color: var(--accent-gold);
  /* 약간의 강조 색상 */
  font-weight: 400;
}
.todo-item:hover .todo-content {
  font-weight: 1000;
}

.todo-content {
  margin-left: 5px;
  word-break: break-all;
}

.todo-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.todo-item:hover .todo-actions {
  opacity: 1;
}

.todo-actions i {
  margin-left: 5px;
  cursor: pointer;
  color: #ccc;
}

.todo-actions i:hover {
  color: #fff;
}

/* ==========================================================================
   6. UI 컴포넌트 & 유틸리티 (UI Components & Utils)
   ========================================================================== */
/* 커스텀 체크박스 */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-wrapper input {
  display: none;
}

.checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid #aaa;
  border-radius: 1px;
  display: inline-block;
  position: relative;
  margin-right: 5px;
}

.checkmark.day-work.header {
  margin-left: 2px;
   margin-right: 4px;
}

.checkmark.day-work.tail {
  margin-left: 7px;
   margin-right: 4px;
}

.day-work.title {
    color: #ffffff;
    font-size: 15px; 
    font-weight: normal;
  }

.checkbox-wrapper input:checked+.checkmark {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.checkbox-wrapper input:checked+.checkmark::after {
  content: '✔';
  position: absolute;
  font-size: 10px;
  color: white;
  top: -2px;
  left: 2px;
}

/* 기타 유틸리티 클래스 */
.strike-through {
  text-decoration: line-through;
  /* 전체적으로 흐릿하게 */
  opacity: 0.8;
  /* 글자색 강제 변경 */
  color: #fffefe80 !important;
}

/* 완료된 레이드의 뱃지 취소선 처리 */
.raid-name-badge.strike-through {
  opacity: 1;

}

/* [기존 활용] 회색 처리 */
.text-muted {
  /* color: #666 !important; */
  color: #fffefe80 !important;
}

.btn-icon-small {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.empty-msg {
  font-size: 0.8rem;
  color: #777;
  text-align: center;
  padding: 10px;
}

.help-link {
  margin-left: 6px;
  color: var(--text-sub);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.help-link:hover {
  color: var(--primary-color);
}

/* ==========================================================================
   7. 드래그 앤 드롭 (Drag & Drop)
   ========================================================================== */
.draggable-item {
  cursor: grab;
}

.draggable-item:active {
  cursor: grabbing;
}

.drag-over {
  border: 2px dashed var(--primary-color) !important;
  opacity: 0.7;
}

/* 드롭 타겟 시각화 (녹색) */
.drag-target-active {
  background-color: rgba(46, 204, 113, 0.2) !important;
  border: 2px dashed #27ae60 !important;
}

/* 서버 헤더 드래그 타겟 스타일 (떨림 방지 및 점선 테두리 적용) */
.server-title.drag-target-active {
  background-color: rgba(46, 204, 113, 0.2) !important;

  /* [핵심] outline을 사용하면 레이아웃(크기)에 영향을 주지 않아 화면 떨림이 발생하지 않습니다.
     border 대신 outline을 사용하여 점선(dashed) 테두리를 표현합니다.
  */
  outline: 1px dashed #27ae60 !important;
  outline-offset: -2px;
  /* 테두리를 요소 안쪽으로 그려서 잘림 방지 */
}

/* 캐릭터 이동 핸들 */
.drag-handle-char {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  /* 오버레이보다 위 */
  opacity: 0;
  cursor: grab;
}

.drag-handle-char:hover {
  color: #fff;
  background: var(--primary-color);
}

/* 서버 이동 핸들 */
.drag-handle-server {
  cursor: grab;
  padding: 5px 10px;
  font-size: 1.1rem;
}

.drag-handle-server:hover {
  color: var(--primary-color);
}

/* ==========================================================================
   8. 모달 및 로딩 (Modal & Loading)
   ========================================================================== */
/* 모달 오버레이 및 창 */
.ui-modal-overlay {
  display: flex;
  justify-content: center;
  align-items: baseline;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  padding: 70px 0 0 0;
}

.ui-modal {
  background: var(--card-bg);
  /* border-radius: 12px; */
  border-radius: 0px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.modal-header .fa-times {
  cursor: pointer;
  color: var(--text-sub);
}

.modal-header .fa-times:hover {
  color: var(--text-main);
}

.modal-body {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* 스크롤바는 내부 컨테이너에서 처리 */
}

/* 폼 입력 요소 */
.input-group {
  margin-bottom: 15px;
}

.input-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: var(--text-sub);
}

.full-width-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-color);
  color: var(--text-main);
  outline: none;
}

.full-width-input:focus {
  border-color: var(--primary-color);
}

.modal-footer {
  flex-shrink: 0;
  /* 푸터 크기 고정 (찌그러짐 방지) */
  border-top: 1px solid var(--border-color);
  background: var(--card-bg);
  z-index: 10;
}

.btn-verify,
.btn-add {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-verify {
  background: var(--text-sub);
  color: white;
}

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

.btn-verify.active {
  background: var(--primary-color);
}

.btn-add {
  background: var(--accent-gold);
  color: #333;
  font-weight: bold;
}

.btn-add:disabled {
  background: var(--border-color);
  color: var(--text-sub);
  cursor: not-allowed;
}

/* 로딩 마스크 */
.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.2rem;
}

.loading-spinner {
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top: 5px solid var(--primary-color);
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

/* 애니메이션 키프레임 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   9. 푸터 영역 (Footer)
   ========================================================================== */
.main-footer {
  text-align: center;
  padding: 5px 0;
  color: var(--text-sub);
  font-size: 0.85rem;
  flex-shrink: 0;
  background-color: var(--footer-bg);
  border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   10. 애니메이션 (Graceful Transitions)
   ========================================================================== */

/* 캐릭터 카드가 이동하거나 생성될 때의 부드러운 전환 */
.char-card.ng-move,
.char-card.ng-enter,
.char-card.ng-leave {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. 위치 이동 (Move) - 순서 변경 시 */
.char-card.ng-move {
  opacity: 0.5;
  transform: scale(0.95);
}

.char-card.ng-move.ng-move-active {
  opacity: 1;
  transform: scale(1);
}

/* 2. 새로 추가 (Enter) */
.char-card.ng-enter {
  opacity: 0;
  transform: translateY(20px);
}

.char-card.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}

/* 3. 삭제 (Leave) - 드래그로 다른 서버로 이동 시 등 */
.char-card.ng-leave {
  opacity: 1;
  transform: scale(1);
  position: absolute;
  /* 자연스럽게 사라지도록 레이아웃에서 띄움 */
}

.char-card.ng-leave.ng-leave-active {
  opacity: 0;
  transform: scale(0.8);
}


/* ==========================================================================
   11. UI 개선 (Text Selection & Server Header)
   ========================================================================== */

/* 1. 텍스트 드래그(선택) 방지: 기본적으로 선택 불가 */
body {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

/* 입력 필드나 텍스트 선택이 꼭 필요한 곳은 허용 */
input,
textarea,
.selectable-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  cursor: auto;
}

/* 드래그 핸들은 그랩 커서 유지 */
.drag-handle-char-icon,
.drag-handle-server,
.draggable-title {
  cursor: grab;
}

/* 2. 서버 헤더 섹션 우측 정렬 및 스타일 개선 */
.server-section .server-title {
  display: flex;
  justify-content: space-between;
  /* 좌우 배분 */
  align-items: center;
  border-left: 4px solid var(--primary-color);
  padding-left: 10px;
  background: rgba(0, 0, 0, 0.02);
  /* 헤더 영역 구분감 */
  /* padding-right: 10px; */
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 0 4px 4px 0;
}

/* 서버 이름 (좌측) */
.server-name-area {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
}

/* 우측 정보 영역 (골드 합계 + 설정 버튼) */
.server-info-area {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 골드 합계: Bold + 크기 증가 */
.gold-summary {
  font-size: 1.1rem;
  /* 크기 증가 */
  font-weight: 800;
  /* Bold 강화 */
  color: var(--accent-gold);
  margin-left: 0;
  /* 기존 여백 제거 (flex gap 사용) */
}

/* 설정 버튼 (톱니바퀴) */
.btn-server-settings {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-server-settings:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* ==========================================================================
   12. 레이드 설정 모달 (Raid Config Modal)
   ========================================================================== */

/* 대형 모달 (레이드 설정용) */
.ui-modal.modal-large {
  width: 95%;
  max-width: 1600px;
  /* 넓은 화면 대응 */
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.ui-modal.modal-large .modal-body {
  flex: 1;
  overflow-y: auto;
  /* 내부 스크롤 */
  background: var(--bg-color);
}

/* 모달 내부 그리드 (메인 화면과 동일하게 6열 배치) */
.raid-config-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 20px;
  /* 0 20px 20px 20px; */
  /* padding-bottom: 20px; */
}

/* 모달 내 캐릭터 컬럼 */
.raid-config-col {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  /* border-radius: 8px; */
  border-radius: 0px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 모달 내 캐릭터 헤더 (기존 char-header 재사용 + 높이 고정) */
.raid-config-col .char-header {
  flex-shrink: 0;
  background: #222;
  /* 살짝 어둡게 */
}

/* 레이드 선택 리스트 영역: 스크롤 기능은 유지하되 스크롤바는 숨김 */
.raid-select-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  max-height: 600px;

  /* Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* IE 10+ */
}

/* Chrome, Safari, Edge */
.raid-select-list::-webkit-scrollbar {
  display: none;
}

/* 개별 레이드 그룹 */
.raid-group {
  margin-bottom: 15px;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 10px;
}

.raid-group-title {
  font-weight: bold;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 5px;
  display: block;
}

/* 난이도 선택 라디오 박스 스타일 */
.difficulty-option {
  display: flex;
  flex-direction: column;
  /* 위아래 배치로 변경 */
  margin-bottom: 8px;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  /* 구분을 위해 아주 연한 배경 */
}

.difficulty-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.difficulty-option.selected {
  background: rgba(61, 90, 254, 0.1);
  border: 1px solid var(--primary-color);
}

/* 라디오 인풋 숨김 & 커스텀 디자인 */
.difficulty-option input[type="checkbox"] {
  margin-top: 3px;
  margin-right: 6px;
  accent-color: var(--primary-color);
}

.diff-info {
  display: flex;
  flex-direction: column;
}

.diff-name {
  font-weight: bold;
  color: var(--text-main);
}

.diff-gate-rewards {
  font-size: 0.75rem;
  color: var(--text-sub);
  margin-top: 2px;
}

.reward-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 2px;
  color: #ddd;
}

/* 반응형 처리:  6열 유지 */
/* 노트북 등 일반적인 해상도에서도 6개를 유지하기 위해 중간 브레이크포인트 제거 */
@media (max-width: 1000px) {

  /* 화면이 매우 좁을 때만 3개로 줄임 */
  .raid-config-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {

  /* 모바일 환경 */
  .raid-config-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* ==========================================================================
   13. 직업 아이콘 스타일 (Class Logo) - 색상 보정 추가
   ========================================================================== */

/* 우측 상단 그룹 (아이콘 + 직업명) 정렬 */
.row-top .class-info-group {
  display: flex;
  align-items: center;
}

/* 직업 아이콘 이미지 */
.class-logo-img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  object-fit: contain;
  transition: filter 0.3s;

  /* [Light Theme] 기본: 무조건 검은색(Black) */
  filter: brightness(0);
  opacity: 0.7;
}

/* [Dark Theme] 다크 모드: 무조건 흰색(White) */
.dark-theme .class-logo-img {
  /* 검은색으로 만든 뒤(brightness 0) -> 색상 반전(invert 1) = 흰색 */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ==========================================================================
   14. 관문별 보상 UI (Gate Rewards)
   ========================================================================== */

/* 관문 보상 컨테이너 */
.gate-reward-container {
  display: inline-flex;
  align-items: center;

  /* 간격을 좁혀서 3개 이상의 관문도 한 줄에 들어오게 함 */
  gap: 2px;

  font-size: 0.8rem;
  /* 기존에 있던 margin-left를 제거하거나 최소화하여 공간 확보 */
  margin-left: 4px;
}

/* 골드 아이콘 스타일 */
.gate-reward-container .fa-coins {
  font-size: 0.9em;
  margin-right: 3px;
  /* 아이콘과 대괄호 사이 간격 */
}

/* 개별 관문 보상 아이템 */
.gate-reward-item {
  cursor: pointer;
  padding: 0 1px;
  /* 좌우 패딩 최소화 */
  border-radius: 3px;
  transition: all 0.2s;
  position: relative;
}

/* 마우스 오버 시 강조 */
.gate-reward-item:hover {
  background-color: rgba(255, 235, 59, 0.2);
  color: #fff;
}

/* 완료된 관문 (취소선 + 투명도) */
.gate-reward-item.strike-through {
  text-decoration: line-through;
  opacity: 0.5;
  color: #aaa;
}

/* 구분자 (|) 스타일 */
.gate-separator {
  color: #555;
  font-size: 0.75rem;
  margin: 0 1px;
  /* 구분자 좌우 간격 최소화 */
}

/* ==========================================================================
   15. 골드 수령 캐릭터 설정 (Gold Earner)
   ========================================================================== */

/* 캐릭터 헤더 내 골드 수령 버튼 위치 (전투력 우측) */
.gold-earner-toggle {
  margin-left: auto;
  /* 우측 끝으로 밀기 */
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 5px;
  transition: color 0.2s, transform 0.2s;
}

/* 비활성 상태 (회색) */
.gold-earner-toggle.disabled {
  color: #555;
  /* 어두운 회색 (잘 안 보이게) */
  opacity: 0.5;
}

/* 활성 상태 (금색) */
.gold-earner-toggle.active {
  color: #ffeb3b;
  /* 골드 색상 */
  opacity: 1;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
  /* 빛나는 효과 */
}

.gold-earner-toggle:hover {
  transform: scale(1.1);
}


/* ==========================================================================
   16. 레이드 설정 모달 레이아웃 (줄바꿈 방지)
   ========================================================================== */

/* 상단: 체크박스 + 난이도 이름 */
.diff-row-top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

/* 하단: 골드 정보 (들여쓰기 없이 꽉 채워서 사용) */
.diff-row-bottom {
  display: flex;
  align-items: center;
  padding-left: 4px;
  /* 살짝만 띄움 */
}

/* 골드 보상 텍스트 (줄바꿈 절대 금지) */
.diff-gate-rewards {
  font-size: 0.8rem;
  color: var(--text-sub);
  white-space: nowrap;
  /* 핵심: 줄바꿈 방지 */
}

/* ==========================================================================
   17. 모달 헤더 버튼 및 골드 아이콘 스타일
   ========================================================================== */

/* 모달 헤더: 버튼 그룹을 우측으로 배치하기 위한 스타일 보강 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  /* 패딩 조정 */
  height: 60px;
  /* 높이 고정 */
}

/* 모달 헤더 내부 버튼 그룹 */
.modal-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 모달 헤더 내부 버튼 스타일 재정의 (작고 깔끔하게) */
.modal-header-actions button {
  padding: 6px 14px;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

/* 캐릭터 카드 헤더: 골드 수령 표시 아이콘 (전투력 옆) */
.gold-status-icon {
  color: #ffeb3b;
  /* 골드 색상 */
  margin-left: 8px;
  font-size: 0.9rem;
  text-shadow: 0 0 5px rgba(255, 235, 59, 0.3);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 레이드 리스트: 회색 코인 아이콘 (골드 미수령 캐릭터용) */
.fa-coins.grey-icon {
  color: #7f8c8d !important;
  /* 회색 강제 적용 */
  opacity: 0.7;
}

/* 등장 애니메이션 */
@keyframes popIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 캐릭터 카드 내 빈 상태 안내 문구 */
.char-empty-msg {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;

  padding: 0px 0;

  font-weight: normal;
  user-select: none;
}

/* ==========================================================================
   18. 데이터 관리 및 헤더 도구 (Data Management)
   ========================================================================== */

.ui-modal.data-modal-open {
  width: 500px !important;
}

   /* 헤더 구분선 (알림 아이콘과 데이터 아이콘 사이) */
.header-separator {
  width: 1px;
  height: 24px;
  background-color: var(--border-color);
  margin: 0 8px;
}

/* 데이터 관리 버튼 공통 */
.btn-data {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.9rem;
}

/* 파일 버튼 (초록색 계열) */
.btn-data-file:hover {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border-color: #2ecc71;
}

/* 클라우드 버튼 (파란색 계열) */
.btn-data-cloud:hover {
  background: rgba(52, 152, 219, 0.1);
  color: #3498db;
  border-color: #3498db;
}

/* 데이터 관리 모달 스타일 */
.data-section {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.data-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.data-section-title {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 0px 12px;
}

/* 클라우드 설정 입력폼 */
.cloud-config-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.02);
  padding: 10px;
  border-radius: 6px;
}

.cloud-label {
  font-size: 0.85rem;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cloud-input-group {
  display: flex;
  gap: 5px;
}

.cloud-input {
  flex: 1;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-color);
  color: var(--text-main);
  font-size: 0.85rem;
}

/* 백업/복원 액션 버튼 영역 */
.backup-actions {
  display: flex;
  gap: 10px;
}

.btn-action {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.btn-action i {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.btn-action:hover {
  background: var(--border-color);
}

/* 구글/원드라이브 색상 강조 */
.btn-google:hover {
  color: #DB4437;
  border-color: #DB4437;
  background: rgba(219, 68, 55, 0.05);
}

.btn-onedrive:hover {
  color: #0078D4;
  border-color: #0078D4;
  background: rgba(0, 120, 212, 0.05);
}

/* ==========================================================================
   19. 도움말 및 마크다운 뷰어 (Help & Markdown)
   ========================================================================== */

/* 도움말 아이콘 (섹션 타이틀 옆) */
.help-icon {
  margin-left: 8px;
  color: var(--text-sub);
  cursor: pointer;
  transition: color 0.2s;
  font-size: 1rem;
}

.help-icon:hover {
  color: var(--primary-color);
}

/* 마크다운 컨텐츠 영역 스타일 */
.markdown-body {
  padding: 10px;
  line-height: 1.6;
  color: var(--text-main);
  font-size: 0.95rem;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.3em;
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--text-main);
}

.markdown-body h1 {
  font-size: 1.5em;
}

.markdown-body h2 {
  font-size: 1.3em;
}

.markdown-body h3 {
  font-size: 1.1em;
}

.markdown-body p {
  margin-bottom: 16px;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
  margin-bottom: 16px;
}

.markdown-body code {
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: monospace;
  padding: 0.2em 0.4em;
  font-size: 85%;
}

/* 코드 블록 스타일 */
.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
  margin-bottom: 16px;
}

.dark-theme .markdown-body pre {
  background-color: #161b22;
  /* 다크모드 대응 */
  border: 1px solid var(--border-color);
}

.markdown-body pre code {
  background-color: transparent;
  padding: 0;
  font-size: 100%;
  white-space: pre;
}

.markdown-body a {
  color: var(--primary-color);
  text-decoration: none;
}

.markdown-body a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   20. 통합 도움말 모달 (Split Layout Help)
   ========================================================================== */

/* 모달 바디: 꽉 찬 높이 사용 */
.modal-body.full-height {
  padding: 0;
  /* 패딩 제거 (내부에서 처리) */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 2분할 컨테이너 */
.split-container {
  display: flex;
  flex: 1;
  height: 100%;
  overflow: hidden;
}

/* [왼쪽] 도움말 목록 */
.split-left {
  background: rgba(0, 0, 0, 0.02);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  flex-shrink: 0;
  /* 크기 자동 축소 방지 */
  display: flex;
  flex-direction: column;
}

.help-list-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  color: var(--text-sub);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-list-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.help-list-item.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* [중간] 리사이저 (구분선) */
.split-resizer {
  width: 5px;
  background: var(--border-color);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.2s;
  z-index: 10;
}

.split-resizer:hover,
.split-resizer.resizing {
  background: var(--primary-color);
}

/* [오른쪽] 컨텐츠 뷰어 */
.split-right {
  flex: 1;
  /* 남은 공간 차지 */
  overflow-y: auto;
  background: var(--bg-color);
  padding: 20px;
  position: relative;
}

/* 컨텐츠 타입별 스타일 */
.viewer-content {
  width: 100%;
  height: auto;
}

/* 이미지 뷰어 */
.img-viewer {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 비디오 뷰어 */
.video-viewer {
  width: 100%;
  max-height: 100%;
  border-radius: 8px;
  background: #000;
}

/* 마크다운 뷰어 (기존 스타일 활용 + 보정) */
.markdown-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 복사 버튼 아이콘 */
.btn-copy {
  margin-left: 8px;
  color: var(--text-sub);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.btn-copy:hover {
  color: var(--primary-color);
  transform: scale(1.1);
}

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

/* ==========================================================================
   21. 계정 추가 마법사 (Account Wizard)
   ========================================================================== */

.ui-modal.wizard-modal {
  /* 높이 자동 */
  max-height: none !important;
  /* 최대 높이 제한 해제 */
  display: flex;
  flex-direction: column;
}
.ui-modal.wizard-modal.update-characters {
  width: 800px !important;
}

/* 상단 단계 표시기 */
.wizard-steps {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.step-indicator {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 0.9rem;
  color: var(--text-sub);
  font-weight: bold;
}

.step-indicator:not(:last-child)::after {
  content: '';
  width: 60px;
  /* 간격 넓힘 */
  height: 2px;
  background: var(--border-color);
  margin: 0 15px;
}

.step-circle {
  width: 28px;
  height: 28px;
  /* 크기 약간 증가 */
  border-radius: 50%;
  background: var(--border-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 0.9rem;
}

.step-indicator.active {
  color: var(--primary-color);
}

.step-indicator.active .step-circle {
  background: var(--primary-color);
}

.step-indicator.completed .step-circle {
  background: #2ecc71;
}

/* 마법사 본문 영역 */
.wizard-content {
  flex: 1;
  /* body 내에서도 남은 공간 차지 */
  overflow-y: auto;
  /* 스크롤은 여기서 발생 */
  padding: 15px;

  max-height: 720px;
}

/* --- 로딩 마스크 수정 (위치 오류 해결) --- */
.wizard-loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* 반투명 배경 */
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  backdrop-filter: blur(2px);
}

/* --- 캐릭터 선택 리스트 --- */
.wizard-char-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
  /* 스크롤바 스타일링 */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.wizard-server-group {
  margin-bottom: 20px;
}

.wizard-server-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-main);
  border-left: 4px solid var(--primary-color);
  padding-left: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.02);
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  cursor: default;
}

.server-count {
  font-size: 0.85rem;
  color: var(--text-sub);
  margin-left: 10px;
  font-weight: normal;
}

/* 그리드 레이아웃: 3열 배치, 간격 축소 */
.wizard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3개 단위 */
  gap: 6px;
  /* 간격 줄임 */
}

/* --- 신규 캐릭터 카드 디자인 --- */
.wizard-char-card {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  background: var(--card-bg);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: row;
  /* 좌우 배치 */
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  position: relative;
}

/* 카드 호버 효과 변경: 파란색 보더 제거, 배경만 살짝 밝게 */
.wizard-char-card:hover {
  /* border-color 변경 제거 (기본값 유지) */
  border-color: var(--border-color);

  /* 배경을 살짝 환하게 처리 (투명한 흰색 오버레이 효과) */
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), var(--card-bg);

  /* 입체감 추가 (선택사항) */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 서버 전체 선택 트리거 (숫자) 스타일 */
.clickable-count {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  /* 점선 밑줄 */
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.clickable-count:hover {
  color: var(--text-main);
  text-decoration-style: solid;
  /* 호버 시 실선 */
  font-weight: bold;
}

/* 선택된 상태 스타일 (테두리 파란색, 배경 약간) */
.wizard-char-card.selected {
  border: 2px solid var(--primary-color);
  /* 테두리 강조 */
  background: rgba(61, 90, 254, 0.08);
  padding: 9px;
  /* 테두리 두께만큼 패딩 보정 */
}

/* [좌측] 정보 영역 */
.w-card-info-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  margin-right: 10px;
}

/* 상단: 이름(좌) + 직업(우) */
.w-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 4px;
}

.dark-theme .w-info-top {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.w-char-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-class-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 마법사 내 직업 아이콘 스타일 (테마 반응형 적용) */
.w-class-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: filter 0.3s;

  /* [Light Theme] 기본: 검은색 */
  filter: brightness(0);
  opacity: 0.7;
}

.w-class-name {
  font-size: 0.8rem;
  color: var(--text-sub);
}

/* [Dark Theme] 다크 모드: 흰색 (반전) */
.dark-theme .w-class-icon {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* 하단: 레벨 | 템렙 | 전투력 */
.w-info-bottom {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-sub);
  gap: 6px;
  white-space: nowrap;
}

.w-stat-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.w-divider {
  color: var(--border-color);
  font-size: 0.7rem;
}

.w-item-level {
  color: var(--accent-gold);
  font-weight: bold;
  font-size: 0.9rem;
}

/* [우측] 체크박스 영역 */
.w-card-check-area {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 체크박스 크기 키움 */
.wizard-char-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

/* --- 버튼 스타일 수정 --- */
/* 재조회 버튼: 파스텔 그린 */
.btn-reload {
  background-color: #a8e6cf !important;
  /* 파스텔 그린 */
  color: #2c3e50 !important;
  border: 1px solid #8fd9c0 !important;
  font-weight: bold;
}

.btn-reload:hover {
  background-color: #8fd9c0 !important;
}

/* 닫기 버튼 (X) 강조 */
.modal-header .fa-times {
  font-size: 1.5rem !important;
  /* 크기 증가 */
  color: #e74c3c !important;
  /* 빨간색 */
  font-weight: 900 !important;
  /* 진하게 */
  transition: transform 0.2s;
  padding: 5px;
}

.modal-header .fa-times:hover {
  transform: scale(1.2);
  color: #c0392b !important;
}

/* ==========================================================================
   상세 비교 테이블 스타일 (6개 항목 비교)
   ========================================================================== */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

/* 헤더 고정 */
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  /* 배경색 지정 필수 */
  z-index: 10;
  padding: 10px 5px;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  font-weight: bold;
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  /* 헤더 구분감 */
}

.compare-table td {
  padding: 8px 5px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
  /* 상단 정렬 */
}

/* 셀 내부 행 (항목별 줄맞춤) */
.info-row {
  height: 24px;
  /* 높이 고정 */
  line-height: 24px;
  /* 수직 중앙 */
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
  /* 은은한 구분선 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-theme .info-row {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

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

/* 테이블 레이아웃 고정 (너비 준수) */
.compare-table {
  table-layout: fixed;
  /* 헤더 너비를 강제 적용 */
}

/* 말줄임 처리 (내용이 길 경우) */
.compare-table td,
.compare-table .info-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 헤더 텍스트 정렬 */
.compare-table th {
  text-align: center;
  vertical-align: middle;
}

/* 캐릭터 정보 컬럼 */
.char-info-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-top: 20px;
  /* 중앙 정렬 보정 */
}

/* 변경된 값 하이라이트 */
.val-changed {
  color: #e67e22;
  font-weight: bold;
  background: rgba(230, 126, 34, 0.1);
  padding: 0 4px;
  border-radius: 3px;
}

/* ==========================================================================
   22. 데이터 관리 모달 테이블 (Data Table) & UI 보정
   ========================================================================== */

/* 데이터 관리 테이블 스타일 */
.data-manage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
}

.data-manage-table th {
  text-align: center;
  padding: 8px;
  color: var(--text-sub);
  border-bottom: 1px solid var(--border-color);
  font-weight: normal;
  font-size: 0.85rem;
}

.data-manage-table td {
  padding: 12px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dark-theme .data-manage-table td {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* 첫 번째 컬럼 (지원 항목 이름) */
.col-name {
  text-align: left;
  font-weight: bold;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 나머지 컬럼 (버튼들) */
.col-action {
  text-align: center;
  width: 80px;
  /* 버튼 영역 고정 폭 */
}

/* 테이블 내 버튼 스타일 (아이콘만 표시) */
.btn-table-action {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-main);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-table-action:hover {
  background: var(--border-color);
  color: var(--primary-color);
  transform: translateY(-2px);
}

.btn-table-label {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-main);
  /* cursor: pointer; */
  font-size: 1.1rem;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 계정 추가 마법사 - 툴팁 아이콘 스타일 */
.tooltip-icon {
  margin-left: 6px;
  color: var(--text-sub);
  cursor: help;
  font-size: 0.9rem;
}

.tooltip-icon:hover {
  color: var(--primary-color);
}

/* 계정 추가 마법사 - 카드 선택 시 테두리 강조 (체크박스 제거 대체) */
.wizard-char-card {
  /* 기존 스타일 유지하되, 체크박스가 빠진 공간 활용 */
  justify-content: flex-start;
}

.wizard-char-card .w-card-info-area {
  margin-right: 0;
  /* 우측 여백 제거 */
}

/* ==========================================================================
   캐릭터 카드 헤더 기능 버튼
   ========================================================================== */
.char-header-actions {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
  padding: 0 8px;
  /* 좌우 여백 */

  /* [핵심] 평소에는 숨김 */
  opacity: 0;
  pointer-events: none;
  /* 숨겨진 상태에서 클릭 방지 */
  transition: opacity 0.2s;

  /* [핵심] 좌우 정렬을 위한 Flex 설정 */
  display: flex;
  justify-content: space-between;
  z-index: 50;
}

/* 버튼 공통 스타일 (기존 유지) */
.btn-char-action {
  background: rgba(0, 0, 0, 0.7);
  /* 배경을 좀 더 진하게 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ddd;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-char-action:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.1);
}

/* 개별 버튼 색상 */
.btn-refresh:hover {
  color: #2ecc71;
  border-color: #2ecc71;
}

.btn-delete {
  color: #ff6b6b;
}

.btn-delete:hover {
  background: #c0392b;
  border-color: #e74c3c;
  color: white;
}

.btn-move {
  cursor: grab;
  color: #aaa;
}

.btn-move:active {
  cursor: grabbing;
}

.btn-move:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ==========================================================================
   업데이트(갱신) 마법사 비교 테이블
   ========================================================================== */
.update-table-container {
  height: 525px !important;
  /* 요청하신 고정 높이 */
  max-height: none !important;
  /* 기존 제한 해제 */
  overflow-y: auto;
  /* 내부 스크롤 허용 */
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.update-table {
  width: 100%;
  border-collapse: separate;
  /* sticky header를 위해 separate */
  border-spacing: 0;
  font-size: 0.85rem;
}

/* 헤더 고정 */
.update-table thead th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 10;
  padding: 10px 8px;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  font-weight: bold;
  color: var(--text-main);
}

.update-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  vertical-align: middle;
}


/* 컬럼별 스타일 */
.col-current {
  color: var(--text-sub);
  background: rgba(0, 0, 0, 0.02);
}

.col-server {
  color: var(--text-main);
  font-weight: 500;
}

.col-result {
  font-weight: bold;
}

/* 상태 뱃지 */
.badge-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-right: 5px;
}

.status-new {
  background: #2ecc71;
  color: #fff;
}

/* 신규 */
.status-del {
  background: #e74c3c;
  color: #fff;
}

/* 삭제 */
.status-change {
  background: #f39c12;
  color: #fff;
}

/* 변경 */
.status-same {
  background: #95a5a6;
  color: #fff;
  opacity: 0.7;
}

/* 유지 */

/* 변경된 값 하이라이트 */
.val-diff {
  color: #e67e22;
  font-weight: bold;
  text-decoration: underline;
}

/* 삭제된 행 스타일 */
.row-deleted {
  background: rgba(231, 76, 60, 0.05);
}

.row-deleted .col-server,
.row-deleted .col-result {
  color: #e74c3c;
  text-decoration: line-through;
}

/* 신규 행 스타일 */
.row-new {
  background: rgba(46, 204, 113, 0.05);
}

/* ==========================================================================
    데이터 삭제 모달 및 버튼
   ========================================================================== */
.ui-modal.delete-data-modal-open {
  width: 800px !important;
  /* height: 600px !important; */
}

/* 헤더 삭제 버튼 (빨간색 계열) */
.btn-delete-storage {
  background-color: transparent;
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.5);
  margin-left: 5px;
}

.btn-delete-storage:hover {
  background-color: #e74c3c;
  color: white;
}

/* 삭제 모달 테이블 */
.delete-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.delete-table th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  padding: 10px;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  font-weight: bold;
  z-index: 10;
}

.delete-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

/* 긴 텍스트 말줄임 처리 (정보 컬럼) */
.text-truncate {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   갱신 아이콘 시각화 (녹색 + 회전 애니메이션) - HTML 클래스 매칭
   ========================================================================== */

/* 1. 서버 탭: [갱신] 버튼 (.btn-icon-small) 내부의 아이콘(i) */
.server-actions .btn-icon-small i {
  transition: transform 0.4s ease, color 0.3s ease;
  display: inline-block;
  /* 회전을 위해 블록 속성 부여 */
}

/* 마우스를 버튼에 올렸을 때 -> 아이콘이 회전하고 녹색이 됨 */
.server-actions .btn-icon-small:hover i {
  color: #2ecc71 !important;
  /* 녹색 강제 적용 */
  transform: rotate(360deg);
}


/* 2. 캐릭터 창: [갱신] 버튼 (.btn-refresh) 내부의 아이콘(i) */
.btn-refresh i {
  transition: transform 0.4s ease, color 0.3s ease;
  display: inline-block;
}

/* 마우스를 버튼에 올렸을 때 -> 아이콘이 회전하고 녹색이 됨 */
.btn-refresh:hover i {
  color: #2ecc71 !important;
  /* 녹색 강제 적용 */
  transform: rotate(360deg);
}

/* (옵션) 캐릭터 창 버튼 자체 테두리도 녹색으로 하고 싶다면 아래 주석 해제 */
/*
.btn-refresh:hover {
  border-color: #2ecc71 !important;
}
*/


/* =============================================================
Open API 호출 모니터링 및 시각화
============================================================= */

/*  API Rate Limit Indicator 스타일 */
.api-limit-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 10px; /* 계정 추가 버튼과의 간격 */
  font-weight: bold;
  font-size: 0.9rem;
  background: rgba(0,0,0,0.05); /* 연한 배경 */
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
}

.dark-theme .api-limit-indicator {
  background: rgba(255,255,255,0.05);
  color: var(--text-main);
}

/* 신호등 원형 램프 */
.signal-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: background-color 0.3s, box-shadow 0.3s;
}

/* 상태별 색상 정의 */
.signal-red {
  background-color: #ff4d4f;
  box-shadow: 0 0 6px #ff4d4f;
}
.signal-yellow {
  background-color: #f1c40f;
  box-shadow: 0 0 6px #f1c40f;
}
.signal-green {
  background-color: #2ecc71;
  box-shadow: 0 0 6px #2ecc71;
}
.signal-blue {
  background-color: #3d5afe;
  box-shadow: 0 0 6px #3d5afe;
}

.fas.signal-red {
  color: #ff4d4f;
  background-color: #ffffff10;
  box-shadow: 0 0 6px #ff4d4f;
}
.fas.signal-yellow {
  color: #f1c40f;
  background-color: #ffffff10;
  box-shadow: 0 0 6px #f1c40f;
}
.fas.signal-green {
  color: #2ecc71;
  background-color: #ffffff10;
  box-shadow: 0 0 6px #2ecc71;
}
.fas.signal-blue {
  color: #3d5afe;
  background-color: #ffffff10;
  box-shadow: 0 0 6px #3d5afe;
}

.label.signal-red {
  color: #ff4d4f;
  font-weight: bold;
  background-color: #ff4d4f00;
  box-shadow: 0 0 0px #ffffff
}
.label.signal-yellow {
  color: #f1c40f;
  font-weight: bold;
  background-color: #f1c40f00;
  box-shadow: 0 0 0px #ffffff
}
.label.signal-green {
  color: #2ecc71;
  font-weight: bold;
  background-color: #2ecc7100;
  box-shadow: 0 0 0px #ffffff
}
.label.signal-blue {
  color: #3d5afe;
  font-weight: bold;
  background-color: #3d5afe00;
  box-shadow: 0 0 0px #ffffff
}

/* ==========================================================================
    카카오톡 플로팅 팝업 스타일
   ========================================================================== */
.kakao-wrapper {
  display: inline-flex;
  align-items: center;
}

.kakao-popover {
  position: absolute;
  top: 45px; /* 버튼 아래로 배치 */
  right: -50px; /* 화면 오른쪽 잘림 방지를 위해 약간 조정 (필요시 수정) */
  width: 220px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  animation: popIn 0.2s ease-out;
}

/* 말풍선 화살표 (상단) */
.kakao-popover .popover-arrow {
  position: absolute;
  top: -6px;
  right: 60px; /* 버튼 위치에 맞게 조정 */
  width: 12px;
  height: 12px;
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}

.kakao-popover .popover-content {
  padding: 15px;
  text-align: center;
  position: relative; /* z-index 보장 */
  background-color: var(--card-bg);
  border-radius: 8px;
}

.kakao-popover .popover-desc {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 팝업 내부 입장 버튼 */
.btn-kakao-link {
  display: block;
  width: 100%;
  padding: 8px 0;
  background-color: #FEE500; /* 카카오 옐로우 */
  color: #3C1E1E; /* 카카오 브라운 */
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}

.btn-kakao-link:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #3C1E1E;
}

/* 팝업 등장 애니메이션 */
@keyframes popIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
    의견 보내기 플로팅 팝업 스타일
   ========================================================================== */
.feedback-wrapper {
  display: inline-flex;
  align-items: center;
}

.feedback-popover {
  position: absolute;
  top: 45px;
  right: -50px; /* 화면 배치에 따라 조정 */
  width: 220px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  animation: popIn 0.2s ease-out; /* 카카오톡 때 정의한 애니메이션 재사용 */
}

/* 말풍선 화살표 */
.feedback-popover .popover-arrow {
  position: absolute;
  top: -6px;
  right: 60px;
  width: 12px;
  height: 12px;
  background-color: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}

.feedback-popover .popover-content {
  padding: 15px;
  text-align: center;
  background-color: var(--card-bg);
  border-radius: 8px;
  position: relative;
}

.feedback-popover .popover-desc {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 팝업 내부 버튼 스타일 */
.btn-feedback-link {
  display: block;
  width: 100%;
  padding: 8px 0;
  background-color: var(--primary-color); /* 메인 테마 색상 사용 */
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-feedback-link:hover {
  opacity: 0.9;
}


/* ==========================================================================
   경매 버튼 자동 색상 변경 애니메이션
   ========================================================================== */

/* 1. 색상이 흐르는 애니메이션 정의 (Keyframes) */
@keyframes rainbow-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 2. 버튼에 적용할 클래스 */
.btn-auction-anim {
  /* 원하는 색상들을 순서대로 나열 (빨강->노랑->파랑->보라 등) */
  background: linear-gradient(270deg, #ff6b6b, #feca57, #1dd1a1, #54a0ff, #5f27cd);
  background-size: 400% 400%; /* 배경을 4배로 키워서 이동할 공간 확보 */
  
  /* 애니메이션 실행: 10초 동안 부드럽게 무한 반복 */
  animation: rainbow-move 10s ease infinite;
  
  /* 기존 tool-btn 스타일 덮어쓰기 (글씨 잘 보이게) */
  color: #ffffff !important; 
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 아이콘 그림자 */
  transition: transform 0.2s; /* 호버 효과 유지 */
}

/* 호버 시 살짝 커지는 효과 */
.btn-auction-anim:hover {
  transform: scale(1.1);
  filter: brightness(1.1); /* 살짝 더 밝게 */
}

/* ==========================================================================
   경매 아이콘 색상 변경 애니메이션
   ========================================================================== */

/* 1. 아이콘 색상이 변하는 애니메이션 정의 */
@keyframes icon-rainbow {
  0% { color: #ff6b6b; }   /* 빨강 (Red) */
  20% { color: #feca57; }  /* 노랑 (Yellow) */
  40% { color: #2ecc71; }  /* 초록 (Green) */
  60% { color: #54a0ff; }  /* 파랑 (Blue) */
  80% { color: #5f27cd; }  /* 보라 (Purple) */
  100% { color: #ff6b6b; } /* 다시 빨강 */
}

/* 2. 버튼 내부의 아이콘(i)에 애니메이션 적용 */
.btn-auction-anim i {
  animation: icon-rainbow 4s linear infinite; /* 4초 간격으로 무한 반복 */
  font-weight: bold; /* 아이콘을 좀 더 선명하게 */
}

/* (선택) 마우스 올렸을 때 애니메이션 속도를 빠르게 하려면 */
.btn-auction-anim:hover i {
  animation-duration: 1s; /* 호버 시 1초로 빨라짐 */
}

/* ==========================================================================
   XX. 기타 이것저것
   ========================================================================== */
.popup-window {
  cursor: pointer;
}

footer.main-footer>p>span.footer-link:hover {
  background-color: #2c42d6;
}

/* 1. 아직 방문하지 않은 링크 (기본 파란색 수정) */
a:link {
  /* color: #b89447; */
  color: inherit;
  text-decoration: none;
}

/* 2. 이미 방문한 링크 (보라색 제거) */
a:visited {
  /* color: #b89447; */
  color: inherit;
  text-decoration: none;
}

/* 3. 마우스를 올렸을 때 (옵션) */
a:hover {
  color: #dabeb5;
  text-decoration: underline;
  text-decoration-thickness: auto;
}

/* 4. 클릭하는 순간 (옵션) */
a:active {
  color: #c59f9f;
}

/* 아이콘 색상 유틸리티 */
.icon-maintenance {
  color: #f39c12;
}

/* 오렌지 */
.icon-notice {
  color: #3498db;
}

/* 블루 */
.icon-shop {
  color: #f1c40f;
}

/* 골드 */
.icon-event {
  color: #ff6b6b;
}

/* 코랄 핑크 */

/* (선택) 다크 모드에서도 잘 보이도록 명도 조절이 필요하다면 */
.dark-theme .icon-maintenance {
  color: #e67e22;
}

/* 카카오 버튼 텍스트 색상은 검정/갈색이어야 잘 보임 */
.btn-kakao { 
  background-color: var(--btn-kakao); 
  color: var(--btn-kakao-bg);
}
.tool-btn.btn-kakao:hover {
  background: var(--btn-kakao-bg);
  color: var(--btn-kakao);
  border: 1px solid var(--btn-kakao);
  border-radius: 4px;
}

/* ====================================== */
/* -------------------------------------- */
/* 캐릭터 이미지 보여주기 */
.tool-btn.show-my-character {
  animation: goldenGlow 1.5s infinite ease-in-out;
}

.tool-btn.show-my-character.show-character-image {
  color: var(--accent-gold) !important;
  animation: goldenGlow 1.5s infinite ease-in-out;
}
.tool-btn.show-my-character:hover {
  color: var(--accent-gold) !important;
  /* 녹색 강제 적용 */
  transform: rotate(360deg);
}

.char-bg.show-character-image {
  z-index: 999;
  opacity: 1;
}
/* -------------------------------------- */
/* ====================================== */

/* ====================================== */
/* -------------------------------------- */


@keyframes loginGlow {
  0% {
    border-color: var(--accent-gold);
    box-shadow: 0 0 5px var(--accent-gold); /* 선택사항: 은은한 광채 */
  }
  50% {
    border-color: #ffeeb0; /* 더 밝은 금색 or 흰색 */
    box-shadow: 0 0 15px var(--accent-gold);
  }
  100% {
    border-color: var(--accent-gold);
    box-shadow: 0 0 5px var(--accent-gold);
  }
}
/* 로그인/로그아웃  */
.tool-btn.login {
  color: var(--accent-gold) !important;
  animation: loginGlow 1.5s infinite ease-in-out;
}

@keyframes logoutGlow {
  0% {
    border-color: var(--text-sub);
    box-shadow: 0 0 5px var(--text-sub); /* 선택사항: 은은한 광채 */
  }
  50% {
    border-color: #ffeeb0; /* 더 밝은 금색 or 흰색 */
    box-shadow: 0 0 15px var(--text-sub);
  }
  100% {
    border-color: var(--text-sub);
    box-shadow: 0 0 5px var(--text-sub);
  }
}
.tool-btn.logout {
  color: var(--text-sub) !important;
  animation: logoutGlow 1.5s infinite ease-in-out;
  padding: 0px;
  margin: 0px;
}
/* -------------------------------------- */
/* ====================================== */


/* ### 🎨 LoaJoa Brand Color Palette : "Royal Intelligence"

이 팔레트는 **선명함(Vivid)**과 **가독성(Readability)**을 최우선으로 하며, 개발자 도구스러운 딱딱함보다는 **현대적인 웹 앱**의 느낌을 지향합니다.

#### 1. Primary Colors (브랜드 정체성)
가장 많이 사용되는 핵심 색상입니다.

* **Royal Blue (Core)**: `#4169E1`
* 용도: 로고, 헤더, 주요 버튼(Primary Button), 활성화된 탭, 강조 텍스트.

* **Royal Dark (Hover)**: `#2B4BB5`
* 용도: 버튼 호버(Hover) 상태, 클릭 상태, 짙은 배경.

* **Royal Light (Background)**: `#EFF4FF`
* 용도: 연한 배경, 선택된 리스트의 배경, 배지(Badge) 배경.


#### 2. Secondary & AI Gradient (AI/스마트 감성)

단조로움을 피하고 'AI/지능형' 느낌을 주는 보조 색상입니다.

* **Electric Violet**: `#7B61FF`
* 용도: 로얄블루와 함께 그라데이션으로 사용하거나, '특별한 기능(예: 스마트 동기화)' 강조용.

* **AI Gradient**: `linear-gradient(135deg, #4169E1 0%, #7B61FF 100%)`
* 용도: **LoaJoa 로고**, 강조하고 싶은 카드 헤더, 로딩 인디케이터.


#### 3. Functional Colors (상태 표시 - 신호등)

직관적인 인지가 필요한 부분입니다. 기존 코드의 색상을 로얄블루와 어울리도록 살짝 채도를 조정했습니다.

* **Success (완료/충분)**: `#2ECC71` (에메랄드)
* **Warning (휴식/주의)**: `#F1C40F` (선플라워)
* **Danger (미완료/삭제)**: `#FF4D4F` (소프트 레드 - 눈이 덜 아픈 빨강)
* **Info (정보)**: `#3498DB` (소프트 블루)

#### 4. Neutral Colors (배경 및 텍스트)

다크 모드와 라이트 모드를 아우르는 무채색입니다.

* **Text Main**: `#2C3E50` (진한 네이비 그레이 - 완전 검정보다 눈이 편함)
* **Text Sub**: `#7F8C8D` (회색 - 설명 문구)
* **Bg Light**: `#F8F9FA` (라이트 모드 배경)
* **Bg Dark**: `#1E272E` (다크 모드 배경 - 로얄블루와 잘 어울리는 딥 블루 그레이) */

:root {
  /* 1. Brand Identity */
  --primary-color: #4169E1;       /* Main Royal Blue */
  --primary-dark:  #2B4BB5;       /* Hover Action */
  --primary-light: #EFF4FF;       /* Light Backgrounds */
  
  /* 2. AI / Accent */
  --accent-color:  #7B61FF;       /* Electric Violet */
  --brand-gradient: linear-gradient(135deg, #4169E1 0%, #7B61FF 100%);

  /* 3. Functional (Traffic Lights) */
  --success-color: #2ECC71;
  --warning-color: #F1C40F;
  --danger-color:  #FF4D4F;
  --info-color:    #3498DB;

  /* 4. Text & Background (Light Mode Default) */
  --text-main:   #2C3E50;
  --text-sub:    #7F8C8D;
  --bg-color:    #F8F9FA;
  --card-bg:     #FFFFFF;
  --border-color:#E0E0E0;
}

/* 다크 모드 오버라이드 */
.dark-theme {
  --text-main:   #ECF0F1;
  --text-sub:    #BDC3C7;
  --bg-color:    #1E272E;       /* Deep Blue Grey */
  --card-bg:     #2F3640;       /* Lighter Blue Grey */
  --border-color:#485460;
  
  /* 다크모드에서는 배경이 어두우므로 Primary Light를 조금 더 투명하게 */
  --primary-light: rgba(65, 105, 225, 0.15); 
}