/*
 * BADGE-001 명예 뱃지 목록 / BADGE-002 상세 / GRADE-001 보안 등급 현황
 * RESULT-002 신규 뱃지 안내 / GRADE-002 등급 상승 안내
 *
 * 팝업은 목업 프레임(680x512)을 채운다. howto 와 같은 오버레이 방식.
 * 뱃지 그리드 5x3, 등급 5열은 목업 배치를 격자로 옮긴 것이다.
 */

.bg-back {
  font-family: var(--font-game);
  position: absolute; inset: 0;
  background: rgba(42,35,32,.28);
  display: flex; align-items: center; justify-content: center;
  z-index: 25; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bg-pop {
  color: var(--gs-text);
  position: relative;
  container-type: inline-size;
  width: min(90vw, calc(88vh * 680 / 512));
  aspect-ratio: 680 / 512;
  background: linear-gradient(145deg, #fffffff2, #fffffff8);
  border: 1px solid var(--gs-line);
  border-radius: 22px;
  box-shadow: 0 28px 70px #2a23203a;
  overflow: hidden;
}
.bg-pop > * { position: absolute; }

/* 제목 x=30 y=34 w=620 h=46 */
.bg-pop__title {
  left: 4.41%; top: 6.64%; width: 91.18%; height: 8.98%;
  display: flex; align-items: center;
  font-size: 3.53cqw; letter-spacing: -.02em;
  color: var(--gs-text);
}
.bg-pop__count { margin-left: 12px; font-size: 2.35cqw; color: var(--gs-muted); }

/* 팝업 헤드(발주처 요청 2026-09-08 슬라이드 6·8): 게임방법 팝업 제목과 같은 모양.
   .howto__title 의 왼쪽 시안 막대를 여기서도 쓴다. */
.pop-head { gap: .8cqw; font-weight: 800; }
.pop-head::before {
  content: ''; flex: none; width: .45cqw; height: 68%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--gs-cyan), #e9002d);
  box-shadow: 0 0 10px #e9002d66;
}

/* 닫기 x=522 y=464 w=120 h=32 */
.bg-pop__close {
  left: 76.76%; top: 90.63%; width: 17.65%; height: 6.25%;
  display: flex; align-items: center; justify-content: center;
  /* 발주처 0910 S2: 게임방법 '닫기'(.howto__btn) 와 같은 회색 버튼으로 통일. */
  border: 1px solid #d3c8c1;
  border-radius: 8px;
  background: #f0ebe7;
  color: var(--gs-text); font-family: inherit; font-weight: bold; font-size: 2.21cqw;
  text-shadow: none;
  cursor: pointer;
  box-shadow: none;
}
.bg-pop__close:active { transform: translateY(2px); box-shadow: none; }

/* ── BADGE-001 뱃지 그리드 ── */
/* 카드 영역: x=28~622 y=104~424 */
.badge-grid {
  left: 4.12%; top: 20.31%; width: 87.35%; height: 62.50%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px 16px;
}
.badge-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6cqw;
  border: 1px solid var(--gs-line);
  border-radius: 10px;
  background: #faf7f5cc;
  box-shadow: none;
  cursor: pointer;
  padding: .8cqw .4cqw;
}
/* 목록 아이콘. 발주처 요청 2026-09-08 슬라이드 6: 아이콘·명칭 중앙정렬, 그림이 잘리지 않게.
   낱장 그림이라 원형 배경·글자 스타일이 필요 없다(그림 안에 테두리가 있다). */
.badge-card__icon {
  width: 9.4cqw; height: 9.4cqw;
  background-color: transparent;
}
.badge-card__diff {
  font-size: 1.35cqw; font-weight: 900; padding: 0 .8cqw; border-radius: .8cqw;
  border: 1px solid currentColor; line-height: 1.5;
}
.badge-card__diff--hard { color: #e9002d; }
.badge-card__diff--mid  { color: #d97706; }
.badge-card__diff--easy { color: #15a34a; }
.badge-card__name {
  width: 100%;
  font-size: 1.62cqw; text-align: center; line-height: 1.15; letter-spacing: -.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 획득 = 컬러 아이콘 + 뱃지명 */
.badge-card--earned { background: #fff3e8; border-color: #ffc99a; }
.badge-card--earned .badge-card__name { color: var(--gs-text); }
/* 미획득 = 비활성 아이콘 + '???' */
.badge-card--locked { background: #faf7f5cc; }
.badge-card--locked .badge-card__name { color: var(--gs-muted); }

/* ── BADGE-002 상세 ── */
/* 상세(발주처 요청 2026-09-08 슬라이드 7): 세로 스크롤 없이 고정 영역 안에 다 넣고,
   확인 버튼은 항상 같은 자리(바닥)에 둔다. 진행 막대가 1개든 5개든 높이가 변하지 않는다. */
/* 세로 배치(사용자 지시 2026-09-09)
     - 아이콘~조건(+진행 막대) 묶음은 세로 가운데
     - 상태 문구(획득 완료/미획득)는 항상 확인 버튼 바로 위
   예전에는 grid 의 1fr 칸이 다섯 번째 자리라, 진행 막대가 없는 뱃지에서는
   상태 문구가 그 칸에 들어가 조건 바로 아래에 붙어 위치가 제각각이었다.
   flex 로 바꾸고 auto 여백 두 개로 남는 공간을 반씩 나눠 갖게 했다. */
.badge-detail {
  left: 12%; top: 20%; width: 76%; height: 66%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6cqw;
  overflow: hidden;
  border: 1px solid var(--gs-line);
  border-radius: 12px;
  background: #faf7f5cc;
  box-shadow: 0 8px 22px rgba(42,35,32,.08);
  padding: 1.6cqw 2.4cqw;
  text-align: center;
}
/* 상세 아이콘. 낱장 그림이라 원형 배경을 씌우지 않는다(그림이 잘려 보인다). */
.badge-detail__icon {
  width: 12cqw; height: 12cqw; flex: none;
  background-color: transparent;
}
.badge-detail__name { font-size: 2.94cqw; color: var(--gs-text); }
.badge-detail__record { font-size: 1.91cqw; color: var(--gs-muted); }
.badge-detail__cond { font-size: 1.9cqw; line-height: 1.4; letter-spacing: -.02em; white-space: pre-line; }   /* 문구 안 줄바꿈을 살린다(0918) */
/* 진행 막대 묶음: 5개(오각형 플레이어)까지 두 줄로 접어 넣는다 */
.badge-detail__progress-wrap {
  width: 100%; flex: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: .4cqw 2cqw;
}
/* 누적 기록 뱃지의 현재 수치 + 진행 막대. 막대 색은 HUD 진행바와 같은 시안 계열로 맞췄다. */
.badge-detail__progress {
  width: 44%; display: flex; flex-direction: column; align-items: center; gap: .3cqw;
}
.badge-detail__progress-num {
  font-size: 1.6cqw; font-weight: bold; color: var(--gs-cyan-soft);
  font-variant-numeric: tabular-nums;
}
.badge-detail__progress i {
  display: block; width: 100%; height: .9cqw;
  border-radius: 99px; overflow: hidden; background: #1f24290e;
}
.badge-detail__progress i span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #e9002d, #ff7a01);
}
/* 확인 → BADGE-001 : 상세 하단 중앙 */
.badge-detail__ok {
  align-self: center; margin-top: .6cqw; flex: none;
  border: 1px solid var(--gs-line);
  border-radius: 8px;
  background: linear-gradient(135deg,#e9002d,#ff7a01);
  color: #ffffff; font-family: inherit; font-weight: bold; font-size: 2.21cqw;
  padding: 8px 26px; cursor: pointer;
  text-shadow: none;
  box-shadow: none;
}
.badge-detail__ok:active { transform: translateY(2px); box-shadow: none; }

/* ── GRADE-001 등급 5열 ── */
/* 카드 x=30~634 y=132~302 */
.grade-cols {
  left: 4.41%; top: 22%; width: 88.82%; height: 46%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.grade-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw;
  border: 1px solid var(--gs-line);
  border-radius: 10px;
  background: #faf7f5cc;
  box-shadow: none;
  padding: 1.6cqw .6cqw .8cqw;
  overflow: visible;   /* '나의 등급' 꼬리표가 칸 위로 걸친다 */
}
/* 등급 뱃지 아이콘(슬라이드 8): 등급 표기 위 */
.grade-col__icon { width: 9cqw; height: 9cqw; object-fit: contain; }
/* 지금 등급 표시 */
.grade-col__me {
  position: absolute; top: -1.4cqw; left: 50%; transform: translateX(-50%);
  padding: .2cqw 1cqw; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(135deg, #e9002d, #ff7a01);
  color: #ffffff; font-size: 1.5cqw; font-weight: 800;
}
.grade-col__level { font-size: 2.21cqw; color: var(--gs-text); }
.grade-col__name { font-size: 1.91cqw; letter-spacing: -.03em; text-align: center; }
.grade-col__req { font-size: 1.76cqw; color: var(--gs-muted); }
/* 현재 등급 강조(슬라이드 8: 테두리 + '나의 등급' 텍스트) */
.grade-col--current {
  background: linear-gradient(135deg, #f0ebe7, #ffffff);
  border: 2px solid #e9002d;
  box-shadow: 0 0 0 4px #e9002d22;
}
.grade-col--current .grade-col__level { color: #ff7a01; }
/* 현재 요약: 획득 개수 + 안내 문구(슬라이드 8) */
.grade-now {
  left: 4.41%; top: 72%; width: 88.82%; height: 13%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4cqw;
  color: var(--gs-text);
}
.grade-now__count { font-size: 2.6cqw; }
.grade-now__hint { font-size: 1.9cqw; color: var(--gs-muted); }


/* gs-primary-hover: 시안 주버튼 공통 hover */