/* ===== Journey Slab Modal ===== */

.journeySlabWrap{
  width:100%;
  max-width: 800px;     /* 석판 원본 800px 이상 커지지 않게 */
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow:hidden;      /* 이 영역 자체 스크롤 금지 */
}

.journeySlabTop{
  display:flex;
  align-items:center;
  gap: 12px;
}

.journeySlabStat{
  display:flex;
  align-items:baseline;
  gap: 8px;
  font-weight: 800;
  -webkit-user-select:none;
  user-select:none;
  white-space:nowrap;
}

.journeySlabPct{
  opacity:0.85;
  font-size: 0.95em;
}

.journeySlabProgress{
  flex: 1 1 auto;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,0.08);
  overflow:hidden;
  min-width: 220px;
}

.journeySlabProgressBar{
  height:100%;
  width:0%;
  background: rgba(195,169,224,0.85);
  border-radius:999px;
  transition: width 220ms ease;
}

/* ===== Board: 가로 꽉(단, max 800), 정사각 유지 ===== */
.journeySlabBoard{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;

  /* 보드가 너무 커져서 info가 밀려 스크롤 생기는 걸 방지 */
  max-height: calc(88vh - 260px);
  /* 안전장치(너무 작거나 너무 커지는 거 방지) */
  min-height: 320px;
  max-width: 800px;

  position: relative;
}

.journeySlabBase{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-select:none;
  user-select:none;
}

/* ===== Info (below slab) ===== */
.journeySlabInfoCard{
  width:100%;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;

  overflow:hidden; /* 스크롤 금지 */
}

.journeySlabInfoLeft{
  width:140px;
  height:140px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(95, 95, 95, 0.22);
  border: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.journeySlabInfoImg{
  /* 업스케일 금지: 원본보다 커지지 않고, 필요하면 줄어들기만 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  display:none;
}

.journeySlabInfoImgEmpty{
  opacity:0.75;
  font-size:12px;
  -webkit-user-select:none;
  user-select:none;
}

.journeySlabInfoRight{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 8px;
  overflow:hidden;
}

.journeySlabInfoName{
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select:none;
  user-select:none;
}

/* 스토리: 최대 5줄, 스크롤 없이 생략 */
.journeySlabInfoStory{
  opacity:0.92;
  font-size:13px;
  line-height:1.5;

  white-space: pre-line;
  
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-user-select:none;
  user-select:none;
}

.journeySlabBase{
  pointer-events: none; /* ✅ 베이스 이미지가 클릭을 먹지 않게 */
  z-index: 0;
}


/* Boot / guide */
.journeySlabBoard{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;

  /* ✅ 모달 높이(96vh) 안에서:
     헤더+진행바+정보패널+닫기버튼+패딩을 빼고 남는 높이만 보드가 차지 */
  max-height: calc(96vh - 320px);

  /* 너무 작아지면 조작성 떨어지니 안전장치 */
  min-height: 300px;

  position: relative;
}

.journeySlabBoot{
  text-align: center;
}

.journeySlabInfo{
  color: aqua;
}

.journeySlabHint{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.8;
}

/* ✅ 셀 내부 어떤 요소를 눌러도 셀 클릭으로 처리되게 */

/* hover 시 위치가 살짝 움직이면 "안 맞는 느낌" + 클릭 체감도 나빠짐 -> 제거 추천 */

@media (max-width: 860px){
  .journeySlabWrap{ max-width: 720px; }
  .journeySlabInfoCard{ grid-template-columns: 120px 1fr; }
  .journeySlabInfoLeft{ width:120px; height:120px; }
}


/* 클릭 커서 제어 */
.journeySlabBoard{ cursor: default; }
.journeySlabBase{ cursor: default; }
.journeySlabCell{ cursor: pointer; }

/* ===== SVG HitMap ===== */
.journeySlabHitMap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
  overflow: visible; /* 글로우 잘림 방지 */
}

/* 보유 조각 표시용(clipPath로 잘린 image) */
.journeySlabHitMap image{
  pointer-events: none;
}

/* 클릭 대상 path (공통) */
.journeySlabHitMap path{
  cursor: pointer;
  transition: filter .12s ease, stroke .12s ease, fill .12s ease, opacity .12s ease, stroke-width .12s ease;
  vector-effect: non-scaling-stroke; /* 확대/축소 시 선 두께 유지 */
}

/* ===== 기본 상태 ===== */

/* 미보유(잠김) 조각 */
.journeySlabHitMap path.locked{
  fill: rgba(0, 0, 0, 0.22);
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1.2;
  filter: none;
}

/* 보유(획득) 조각 - 기본 상태 */
.journeySlabHitMap path.collected{
  fill: rgba(0, 0, 0, 0.0);
  stroke: rgba(195, 169, 224, 0.18);
  stroke-width: 1.4;
  filter: none;
}

/* ===== 호버(선택된 조각에는 절대 적용되지 않게) ===== */

/* 일반 호버: 선택 아닌 애들만 */
.journeySlabHitMap path:not(.selected):hover{
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 2.4;
  fill: rgba(120, 170, 255, 0.06);
  filter:
    drop-shadow(0 0 4px  rgba(220, 245, 255, 0.45))
    drop-shadow(0 0 10px rgba( 30,  70, 170, 0.40));
}

/* 잠김 조각 호버는 더 약하게(선택 아닌 애들만) */
.journeySlabHitMap path.locked:not(.selected):hover{
  stroke: rgba(255, 255, 255, 0.40);
  stroke-width: 1.8;
  fill: rgba(120, 170, 255, 0.03);
  filter: drop-shadow(0 0 5px rgba(90, 150, 255, 0.25));
}

/* ===== 선택됨(hover보다 우선, 선택 조각은 hover 무시) ===== */
.journeySlabHitMap path.selected{
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 3.2;
  fill: rgba(120, 170, 255, 0.06);
  filter:
    drop-shadow(0 0 2px rgba(220, 245, 255, 0.70))   /* 얇은 달빛 라인 */
    drop-shadow(0 0 6px rgba( 95, 155, 255, 0.55))   /* 블루 글로우(중) */
    drop-shadow(0 0 10px rgba( 20,  60, 160, 0.40)); /* 밤하늘(짧게) */
}

/* 선택 + 보유 조각이면 약간 더 또렷하게(선택) */
.journeySlabHitMap path.selected.collected{
  stroke: rgba(255, 255, 255, 1);
}

/* 안전장치: 선택된 조각은 hover 적용 자체가 안 되지만, 혹시 몰라 명시 */
.journeySlabHitMap path.selected:hover{
  /* intentionally no hover override */
}

/* ===== 여정의 석판일 때만 모달 바디 높이 확장 ===== */
/* .modalBody.modalBody--journeySlab{
  max-height: 82vh !important;
  overflow-y: auto !important;
} */