.boss-wrap{
  max-width:1100px;
}

/* ---------- 캐릭터 조회 로딩 스피너 ---------- */
.boss-loading{
  margin-top:22px;
  padding:60px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.boss-loading-spinner{
  width:36px;
  height:36px;
  border:3px solid rgba(63,242,255,0.2);
  border-top-color:var(--cyan);
  border-radius:50%;
  animation:boss-spin 0.8s linear infinite;
}
@keyframes boss-spin{
  to{ transform:rotate(360deg); }
}
.boss-loading-text{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:#8fb6c9;
}

/* ---------- 선택한 캐릭터 전체 합산 (맨 위 총 수익 + 주간/월간 전환) ----------
   3분할 flex(빈 스페이서 - 가운데 금액 - 오른쪽 전환 버튼)로 짜서, 가운데
   금액은 항상 중앙 정렬 유지하면서 전환 버튼만 오른쪽 끝에 붙게 한다. */
.total-money-summary{
  margin-top:22px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(63,242,255,0.08);
  border:1px solid rgba(63,242,255,0.3);
  border-radius:8px;
  flex-wrap:wrap;
}
.total-money-spacer{
  flex:1;
}
.total-money-center{
  flex:none;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.total-money-label{
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.2em;
  color:#8fb6c9;
}
.total-money-value{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.6);
}
.total-money-period-switch{
  flex:1;
  display:flex;
  justify-content:flex-end;
  gap:4px;
}
.total-money-period-btn{
  padding:6px 14px;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.15em;
  color:#8fb6c9;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;
  cursor:pointer;
}
.total-money-period-btn.active{
  color:#04141a;
  background:var(--cyan);
  border-color:var(--cyan);
}

.boss-panel{
  margin-top:22px;
  padding:22px 24px;
  background:linear-gradient(180deg, rgba(63,242,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(63,242,255,0.18);
  border-radius:8px;
}

.field-label{
  font-size:11px;
  letter-spacing:.15em;
  color:var(--cyan-dim);
  margin-bottom:6px;
}
.text-input{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  color:#fff;
  font-size:15px;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.text-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(63,242,255,0.35);
}

/* ---------- API 키 설정 ---------- */
.api-key-panel{
  padding:0;
  overflow:hidden;
}
.api-key-toggle-btn{
  width:100%;
  text-align:left;
  padding:16px 20px;
  background:none;
  border:none;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.api-key-status{
  margin-left:8px;
  font-size:11px;
  color:var(--cyan-dim);
  font-weight:400;
}
.api-key-body{
  padding:0 20px 20px;
}
.api-key-desc{
  font-size:12px;
  color:#8fb6c9;
  line-height:1.6;
  margin-bottom:12px;
}
.api-key-desc a{
  color:var(--cyan);
}
/* type="password"를 쓰면 크롬이 이 필드를 로그인 비밀번호로 착각해서
   "비밀번호를 업데이트하시겠습니까?" 저장 팝업을 계속 띄운다(autocomplete="off"는
   크롬이 password 타입 필드에서는 그냥 무시함) -- type="text"로 바꾸고
   이 CSS로 대신 마스킹해서 화면엔 그대로 점으로 보이면서 브라우저는 더 이상
   이걸 비밀번호 입력으로 인식하지 않게 함. */
.api-key-mask{
  -webkit-text-security:disc;
  text-security:disc;
}

#bossMessage{
  margin-top:14px;
}

/* ---------- 조회 결과 ---------- */
.char-info-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.char-portrait{
  width:100px;
  height:100px;
  flex:none;
  /* 넥슨 character_image가 캐릭터 주변에 여백이 많이 남아있는 채로 와서,
     cover(100%)만으로는 박스 안에 캐릭터가 작게 떠 보임 -- 확대해서
     여백을 바깥으로 밀어내고 캐릭터가 박스를 꽉 채우게 함. 박스 크기
     자체는 그대로(요청: 박스가 아니라 안의 캐릭터를 키워달라는 것). */
  background-size:200%;
  background-position:center;
  background-repeat:no-repeat;
  background-color:rgba(63,242,255,0.05);
  border:1px solid rgba(63,242,255,0.25);
  border-radius:6px;
}
.char-info-main{
  flex:1;
  min-width:120px;
}
.char-name{
  font-family:'Orbitron',sans-serif;
  font-size:20px;
  font-weight:700;
  color:#fff;
}
.char-meta{
  margin-top:4px;
  font-size:13px;
  color:#8fb6c9;
}
.char-info-side{
  display:flex;
  align-items:center;
  gap:10px;
}
.clear-count-badge{
  padding:6px 12px;
  border-radius:14px;
  background:rgba(63,242,255,0.1);
  border:1px solid rgba(63,242,255,0.4);
  color:var(--cyan);
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:14px;
}

.money-summary{
  margin-top:14px;
  padding:10px 14px;
  background:rgba(255,210,63,0.08);
  border:1px solid rgba(255,210,63,0.3);
  border-radius:6px;
  color:var(--warn);
  font-weight:700;
  font-size:14px;
  text-align:center;
}

#partyEditToggleBtn.active{
  background:var(--cyan);
  color:#04141a;
  border-color:var(--cyan);
}

.boss-section{
  margin-top:22px;
}
.boss-section-title{
  font-family:'Orbitron',sans-serif;
  font-size:14px;
  letter-spacing:.1em;
  color:var(--cyan-dim);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(63,242,255,0.18);
}
.boss-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 보스 타일 ---------- */
.boss-tile{
  width:92px;
  text-align:center;
}
.boss-tile-icon{
  position:relative;
  width:92px;
  height:92px;
  overflow:hidden;
  background-color:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
}
/* 배경 이미지는 별도 자식 요소에 걸어서, 클리어했을 때 회색조 필터가 이
   요소에만 적용되고 형제 요소인 체크 표시/난이도 배지는 원래 색 그대로
   유지되게 한다(filter를 .boss-tile-icon 자체에 걸면 그 자식 렌더링
   결과까지 전부 회색이 돼버림). */
.boss-tile-icon-img{
  position:absolute;
  inset:0;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.boss-tile.cleared .boss-tile-icon-img{
  filter:grayscale(0.85) brightness(.55);
}
.boss-diff-badge{
  position:absolute;
  left:2px;
  bottom:2px;
  padding:1px 5px;
  border-radius:3px;
  font-size:9px;
  font-weight:700;
  background:rgba(0,0,0,0.65);
  color:#fff;
}
.boss-diff-badge.diff-easy{ color:#8fd6ff; }
.boss-diff-badge.diff-normal{ color:#8fffb0; }
.boss-diff-badge.diff-hard{ color:var(--warn); }
.boss-diff-badge.diff-chaos{ color:#c98fff; }
.boss-diff-badge.diff-extreme{ color:var(--danger); }
.boss-check-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  font-weight:900;
  color:var(--success);
  text-shadow:0 0 10px rgba(77,255,160,0.8);
}
.boss-tile-name{
  margin-top:6px;
  font-size:11px;
  color:#8fb6c9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.boss-party-row{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.boss-party-row.static{
  font-size:12px;
  color:var(--cyan-dim);
}
.party-step-btn{
  width:20px;
  height:20px;
  line-height:18px;
  font-size:12px;
  color:var(--cyan);
  background:rgba(63,242,255,0.1);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:3px;
  cursor:pointer;
  padding:0;
}
.party-step-btn:hover{
  background:var(--cyan);
  color:#04141a;
}
.party-count-label{
  font-size:12px;
  color:#fff;
  min-width:24px;
}

/* ---------- 내 캐릭터 목록 ---------- */
.my-characters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.character-checkbox-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:260px;
  overflow-y:auto;
  padding-right:4px;
}
.character-checkbox-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  font-size:13px;
  color:#e8f6ff;
  cursor:pointer;
}
.character-checkbox-item:hover{
  border-color:rgba(63,242,255,0.35);
}
.character-checkbox-item input{
  accent-color:var(--cyan);
  width:16px;
  height:16px;
  flex:none;
}
#loadSelectedBtn{
  margin-top:14px;
}

/* ---------- 보기 모드 툴바 ---------- */
.view-mode-toolbar{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.view-mode-switch{
  display:flex;
  gap:4px;
}
.view-mode-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.view-mode-btn{
  width:34px;
  height:34px;
  font-size:16px;
  color:#8fb6c9;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;
  cursor:pointer;
}
.view-mode-btn.active{
  color:#04141a;
  background:var(--cyan);
  border-color:var(--cyan);
}

.result-block{
  margin-top:18px;
}

/* ---------- 리스트 모드 ---------- */
.list-row{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
/* width를 고정값으로 줘야 함(min-width만 주면 flex:none 항목은
   flex-basis:auto라서 캐릭터별로 이름/직업 텍스트 길이에 따라 실제 너비가
   달라짐 -- 그러면 오른쪽 보스 그리드가 캐릭터마다 서로 다른 폭을 나눠
   가져서 배지 크기가 캐릭터마다 제각각으로 보이는 원인이 됐음). */
.list-row-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:none;
  width:260px;
}
.list-portrait{
  width:110px;
  height:110px;
  flex:none;
}
.list-row-info{
  flex:1;
  min-width:0;
}
.list-row-info .char-name{
  font-size:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-row-info .char-meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-row-info .clear-count-badge{
  margin-top:4px;
  font-size:11px;
  padding:3px 8px;
}
.list-row-right{
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.list-pill-section-label{
  font-size:10px;
  letter-spacing:.15em;
  color:var(--cyan-dim);
  margin-bottom:5px;
}
.boss-list-pill-grid{
  display:grid;
  /* minmax(0, 1fr)이 핵심 -- 그냥 1fr만 쓰면 그리드 트랙의 기본 최소
     크기가 内容(min-content)이라, 이름이 긴 보스가 있는 칸만 더 넓게
     늘어나서 캐릭터마다(심지어 같은 줄 안에서도) 박스 크기가 제각각이
     되는 문제가 있었음. 0으로 강제해야 4칸이 항상 완전히 균등해짐. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
}
.boss-list-pill{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:5px 8px 5px 4px;
  border-radius:4px;
  font-size:11px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.03);
  color:#c7dae6;
  overflow:hidden;
}
/* 클리어 표시는 이 배경/테두리로만 하고, 배지(아래)와 글씨 색은 절대 안
   바꾼다 -- 난이도 배지는 클리어 여부와 상관없이 항상 자기 색 그대로. */
.boss-list-pill.cleared{
  border-color:rgba(77,255,160,0.55);
  background:rgba(77,255,160,0.16);
}
.list-pill-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-diff-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:none;
  border-radius:3px;
  font-size:10px;
  font-weight:800;
  color:#fff;
}
/* 난이도별 배지 색 -- 클리어 여부와 무관하게 항상 이 색 그대로 유지. */
.list-diff-badge.diff-easy{ background:#4a5568; }
.list-diff-badge.diff-normal{ background:#3f8fff; }
.list-diff-badge.diff-hard{ background:#ff5a5a; }
.list-diff-badge.diff-chaos{ background:#000; color:#ffd23f; }
.list-diff-badge.diff-extreme{ background:#000; color:#ff5f7e; }
.list-row-money{
  flex:none;
  align-self:center;
  font-weight:700;
  color:var(--warn);
  font-size:13px;
  white-space:nowrap;
}

/* ---------- 순서 설정 모달 ---------- */
.order-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,4,10,0.75);
  backdrop-filter:blur(2px);
}
.order-modal{
  position:relative;
  width:100%;
  max-width:360px;
  max-height:80vh;
  display:flex;
  flex-direction:column;
  padding:22px 22px 24px;
  background:linear-gradient(180deg, rgba(63,242,255,0.1), rgba(4,5,10,0.97));
  border:1px solid rgba(63,242,255,0.25);
  border-radius:8px;
  box-shadow:0 0 40px rgba(0,0,0,0.6);
}
.order-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'Orbitron',sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:#fff;
}
.order-modal-close{
  width:26px;
  height:26px;
  background:none;
  border:none;
  color:#8fb6c9;
  font-size:16px;
  cursor:pointer;
  line-height:1;
}
.order-modal-close:hover{
  color:var(--cyan);
}
.order-modal-desc{
  margin-top:8px;
  font-size:12px;
  color:#8fb6c9;
}
.order-modal-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
}
.order-modal-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:6px;
  color:#e8f6ff;
  font-size:13px;
  cursor:grab;
}
.order-modal-item.dragging{
  opacity:0.4;
  border-color:var(--cyan);
}
.order-modal-handle{
  flex:none;
  color:var(--cyan-dim);
  font-size:14px;
}
.order-modal-item-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.order-modal-empty{
  padding:20px 0;
  text-align:center;
  font-size:12px;
  color:#8fb6c9;
}

@media (max-width:480px){
  .boss-panel{padding:16px 16px;}
  .boss-tile{width:76px;}
  .boss-tile-icon{width:76px;height:76px;}
  .list-row{flex-direction:column;align-items:flex-start;}
  .list-row-left{width:100%;}
  .boss-list-pill-grid{grid-template-columns:repeat(2, minmax(0, 1fr));width:100%;}
  .total-money-summary{justify-content:center;}
  .total-money-spacer{display:none;}
  .total-money-period-switch{flex:none;}
}