/* ===== 내 공룡 페이지(renderMyDinoPage, my-dino-page.js) - 요약바/탭/VIP드롭다운/룬프리셋칩. 타이탄·공룡대전·아레나·허수아비에도 그대로 임베드됨 =====
   css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade 순서)가
   원본과 동일하게 유지되도록 주의할 것 ===== */

.vip-selected-value {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.67cqw, 10px);
  text-align: left;
  padding: clamp(0px, 0.5cqw, 2px) clamp(24px, 5.67cqw, 34px) clamp(0px, 0.5cqw, 2px) clamp(8px, 2cqw, 12px);
}

.vip-dropdown-list li.vip-option {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.67cqw, 10px);
  padding: clamp(4px, 1cqw, 6px) clamp(7px, 1.67cqw, 10px);
}

.vip-option-icon {
  position: relative;
  width: clamp(46px, 11.17cqw, 67px);
  height: clamp(46px, 11.17cqw, 67px);
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 평소(닫힌 상태)에 보이는 아이콘: 세로 패딩을 거의 없앤 만큼 박스 높이에 거의 꽉 차게 */
.vip-option-icon.small {
  width: clamp(30px, 7.33cqw, 44px);
  height: clamp(30px, 7.33cqw, 44px);
}

.vip-option-num {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 800;
  font-size: clamp(15px, 3.67cqw, 22px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.vip-option-icon.small .vip-option-num {
  font-size: clamp(12px, 2.83cqw, 17px);
}

.vip-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-width: 0;
}

.vip-option-title {
  font-weight: 700;
  font-size: clamp(10px, 2.17cqw, 13px);
  color: var(--text-main);
}

.vip-option-desc {
  font-size: clamp(9px, 1.83cqw, 11px);
  color: var(--text-sub);
  white-space: nowrap;
}

/* ===== 내 공룡: 요약바+탭을 한 패널로 통합 =====
   overflow:hidden을 쓰면 안의 드롭다운 목록(체력/공룡 수 등)이 카드 경계에 잘려서
   overflow는 안 씀. 대신 라운드 처리가 필요한 요소는 각자 border-radius로 처리. */
.dino-panel {
  padding: 0 !important;
}

.dino-summary-bar {
  /* 위아래 패딩을 최대한 줄임(사용자 확정) - 이 컴포넌트는 내 공룡 페이지(폭이 넓어 눈에 덜
     띔)뿐 아니라 공룡대전/아레나 좌우 사이드 패널(폭이 좁아 같은 위아래 여백이 훨씬 크게
     보임)에도 그대로 임베드되므로 공용으로 줄임 */
  padding: 8px var(--p-base);
  border-bottom: 1px solid var(--border-color);
  border-radius: 16px 16px 0 0;
}

.dino-summary-bar .stat-readout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.dino-summary-bar .stat-readout-item {
  align-items: center;
  /* 치확/치피 칸(라벨+값 두 쌍)이 다른 칸(한 쌍)보다 세로로 더 길어서, 그리드가 행 높이를 그
     큰 칸에 맞춰 늘림 - justify-content 없이 기본값(flex-start)이면 짧은 칸들 내용물이 위에
     붙고 밑에만 빈 공간이 남아 칸마다 여백이 안 맞았음(사용자 지적) - 세로 가운데 정렬로 모든
     칸이 행 안에서 위아래 여백이 똑같이 나뉘게 함 */
  justify-content: center;
  text-align: center;
  gap: 2px;
}

.dino-summary-bar .stat-readout-label {
  font-size: 10.5px;
  white-space: normal;
}

.dino-summary-bar .stat-readout-value {
  font-size: clamp(11px, 3.2cqw, 15px);
  /* 아래 .stat-roll-digit이 애니메이션 도중 쓰는 line-height(1.1em)와 정확히 맞춰서, 애니메이션이
     끝나고 일반 텍스트로 돌아갈 때 줄 높이 차이로 글자가 위아래로 튀는 걸 방지(1.2는 미세하게
     어긋나 있었음) */
  line-height: 1.1;
}

/* 치확/치피를 한 칸 안에 "라벨 위, 값 아래" 쌍 두 개로 세로로 쌓음(사용자 확정 - "치확/치피 한
   칸에 아래위로 나눠서") - stat-readout-label/value를 그대로 재사용해서 다른 칸의 라벨/값과 같은
   스타일(색/굵기)을 쓰되, 폰트 크기만 아래에서 살짝 더 작게 오버라이드함(사용자 확정 - 한 칸에
   두 쌍이 들어가다 보니 다른 칸보다 조금 작아도 자연스럽고, 오히려 옆 칸들과 시각적 위계가
   또렷해짐) */
.stat-readout-crit-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-readout-crit-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 치확/치피만 라벨·값 둘 다 옆 칸(레벨/공격력/체력 등)보다 살짝 작게(사용자 확정) */
.stat-readout-crit-pair .stat-readout-label {
  font-size: 9px;
}

.stat-readout-crit-pair .stat-readout-value {
  font-size: clamp(9.5px, 2.8cqw, 13px);
}

/* 설정을 바꿔서 요약바 숫자가 달라지면(js/ui/stat-roll-ui.js) 값이 커졌으면 초록, 작아졌으면
   빨강으로 잠깐 강조 - 이 저장소에 방향성(증가/감소) 색 변수가 따로 없어서 여기서만 쓰는
   전용 색을 둠(초록은 새로 도입, 빨강은 저장소에서 이미 "상대편"으로 쓰는 색과 통일) */
.stat-readout-value.stat-roll-up { animation: stat-roll-flash-up 0.9s ease; }
.stat-readout-value.stat-roll-down { animation: stat-roll-flash-down 0.9s ease; }
@keyframes stat-roll-flash-up {
  0% { color: #3ecf6d; text-shadow: 0 0 10px rgba(62, 207, 109, 0.6); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes stat-roll-flash-down {
  0% { color: #e0473f; text-shadow: 0 0 10px rgba(224, 71, 63, 0.6); }
  100% { color: inherit; text-shadow: none; }
}

/* 오도미터 방식 자릿수 롤링 - 바뀐 자릿수만 0~9 세로 스트립을 옛 값에서 새 값 위치로 트랜지션시켜
   그 사이 숫자들을 스치듯 지나가게 함(안 바뀐 자릿수/콤마/%/단위는 정적 텍스트 그대로 둠) */
.stat-roll-digit {
  display: inline-block;
  position: relative;
  height: 1.1em;
  overflow: hidden;
  vertical-align: bottom;
}
.stat-roll-strip {
  display: flex;
  flex-direction: column;
  /* 사용자 요청으로 카운트 모션 시간을 조금 늘림(0.55s -> 0.85s) - js/ui/stat-roll-ui.js의
     animateStatValue()가 텍스트를 원래 문자열로 되돌리는 setTimeout도 이 시간에 맞춰 같이 늘려야
     롤링이 덜 끝난 채로 텍스트가 끊겨 보이지 않음(항상 동기화 유지) */
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-roll-strip span {
  height: 1.1em;
  line-height: 1.1em;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .stat-roll-strip { transition: none; }
  .stat-readout-value.stat-roll-up, .stat-readout-value.stat-roll-down { animation: none; }
}

/* 친구와 함께(3단계): 상대 쪽 읽기 전용 요약 카드. 편집 폼과 구분되도록 점선 테두리 + 잠금 태그 */
.dino-panel-readonly {
  border: 1px dashed var(--border-color);
}

.dino-panel-readonly-tag {
  padding: 10px var(--p-base) 0;
  font-size: 11px;
  color: var(--text-sub);
}

/* 읽기 전용 모드의 기본 4개 탭(기본 스탯/별자리/둥지·알스킨/룬 조합) 안 콘텐츠 - 값은 그대로 잘
   보이게 두고(불투명도 안 낮춤 - 흐리면 정작 보려는 스탯이 안 보임) 클릭만 막음. 커스텀
   드롭다운(VIP/공룡 수/룬 레벨)은 이미 있는 .dropdown-locked(반투명+클릭막기)를 그대로 재사용함.
   extraTab(아레나 배치 등) 패널은 이 클래스가 안 붙으므로 항상 그대로 편집 가능함.
   .preset-btn은 여기 안 넣음 - 스냅샷(allowPresetSwitch:true)에서는 로컬 미리보기로 계속 클릭
   가능해야 하고, 그 여부는 CSS가 아니라 my-dino-page.js의 selectPreset() 안 JS 가드가
   단일 기준점으로 판단함(막아야 할 때는 그냥 아무 일도 안 일어남) */
.tab-panel-readonly .slot,
.tab-panel-readonly .rune-item {
  pointer-events: none;
}

.readonly-slot-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 10px var(--p-base) 16px;
}

.slot-readonly {
  cursor: default;
}


/* ===== 내 공룡: 탭 (슬라이딩 밑줄 인디케이터) ===== */
.dino-tabs {
  display: flex;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.dino-tab {
  flex: 1;
  padding: 14px 0;
  background: none;
  border: none;
  color: var(--text-sub);
  /* 카드 폭 비례 스케일링(사이트 공통 관례) - "기본 스탯/별자리/둥지·알스킨/룬 조합" 4개 탭이
     좁은 카드에서도 한 줄에 다 들어가야 하므로(사용자 확정) */
  font-size: clamp(10px, 2.17cqw, 13px);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.dino-tab.active {
  color: var(--primary);
}

.dino-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--primary);
  transition: transform 0.25s ease, width 0.25s ease;
}

.dino-tab-panel {
  padding: var(--p-base);
}