/* ===== 공통 기반 - :root 변수, 카드/버튼/입력칸/드롭다운/토글 등 사이트 전체 기본 컴포넌트. 페이지 전용 스타일은 넣지 말 것 =====
   css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade 순서)가
   원본과 동일하게 유지되도록 주의할 것 ===== */

:root {
  /* 공통 등급 색상 */
  --일반: #9e9e9e;
  --희귀: #4caf50;
  --에픽: #ff9800;
  --유니크: #eb5f0e;
  --전설: #ba0000;

  /* 베이스: 다크 사파이어 / 서브(인터랙티브) 컬러: 골드로 통일 */
  --primary: #d1a44f;
  --accent: #d1a44f;
  --accent-strong: #b98a37;
  --brand-blue: #3f66c9;

  /* 다크 모드 (기본) */
  --bg-color: #141b26;
  --card-bg: #1c2636;
  --input-bg: #263243;
  --text-main: #eef1f6;
  --text-sub: #949cb0;
  --border-color: rgba(255, 255, 255, 0.10);
  --slot-border: #303c50;
  --recessed-bg: rgba(0, 0, 0, 0.2);
  /* 화면 비율 설정 */
  --p-base: clamp(6px, 3vw, 24px);
  --container-max: 600px; 
  --card-max: 560px;
  /* 폰트 크기 설정 */
 --fs-notice: clamp(11px, 0.5vw + 10px, 14px);
  --m-notice: clamp(4px, 1vh, 12px);
  --fs-h2: clamp(16px, 1.2vw + 12px, 20px);
  --fs-label: clamp(12px, 0.5vw + 10px, 14px);
  --m-bottom: clamp(8px, 2vh, 20px);
}

/* 화면엔 안 보이지만 스크린리더/문서 개요(document outline)에는 잡히는 텍스트 - 타이탄/건물/
   허수아비/다이노배틀/아레나 페이지가 내부 섹션 제목(예: "관련 수치", "타일 설정")은 있어도 "이
   페이지 자체가 뭔지" 알려주는 헤딩이 없었음(사이트 전체 점검에서 발견). 각 페이지 콘텐츠 최상단에
   이 클래스를 쓴 <h2>를 하나씩 추가해서 시맨틱 구조만 채우고 기존 디자인/레이아웃은 전혀 안 건드림
   (사용자 확정 - "디자인이나 스타일이 달라지지 않게") */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 라이트 모드 클래스
   예전엔 배경/카드/입력칸이 다 거의 흰색 한 덩어리라(#f1f3f7/#ffffff/#edf0f5) 층 구분이 안 되고
   눈부심만 있었음. 페이지 배경을 확실히 더 어둡게 잡아서 카드가 그 위에 "떠 보이게" 하고,
   테두리/보조 텍스트도 더 진하게 해서 흰 바탕 위에서도 구획이 또렷하게 보이도록 다시 잡음. */
body.light-mode {
  --primary: #a8762a;
  --accent: #a8762a;
  --accent-strong: #8f6120;
  --brand-blue: #2c4a92;
  --bg-color: #e4e9f1;
  --card-bg: #ffffff;
  --input-bg: #edf1f7;
  --text-main: #1a2130;
  --text-sub: #576079;
  --border-color: rgba(15, 25, 55, 0.16);
  --slot-border: #c7cee0;
  --recessed-bg: rgba(15, 25, 55, 0.06);
}

/* 사이트 전체(HTML, BODY) 스크롤 바 숨기기 */
html, body {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* 모바일(주로 Chrome/Safari)에서 버튼·링크·탭 등을 터치할 때 기본으로 뜨는 회색/파란색 반투명
   하이라이트 박스 제거 - 이 사이트는 버튼마다 이미 자체 active/hover 스타일이 있어서 브라우저
   기본 하이라이트가 그 위에 뜨면 색만 어긋나 보임(사용자 지적) */
html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Pretendard", sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  padding: clamp(10px, 3vh, 30px) clamp(4px, 1vw, 10px);
  display: flex;
  flex-direction: column;
  /* 세로 방향으로 쌓이게 */
  align-items: center;
  /* 가로축 중앙 정렬 */
  margin: 0;
  min-height: 100vh;
  transition: background 0.5s, color 0.5s;
  overflow-x: hidden;
  /* 가로 스크롤 방지 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;  /* Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE/Edge */
  user-select: none;          /* 표준 */
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.container {
  /* 인라인 스타일 30px 대신 아래와 동일한 변수 사용 */
  margin-top: var(--m-notice);
  width: min(100%, 600px);
  margin-left: auto;
  margin-right: auto;
  /* 아래쪽 여백이 없으면 맨 마지막 카드 하단부가 화면 끝에 딱 붙어서 터치하기 불편하고,
     그 안의 드롭다운이 아래로 펼쳐질 공간도 없어짐 - 넉넉한 하단 여백을 확보 */
  padding: 0 var(--p-base) clamp(32px, 10vh, 80px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* 페이지 콘텐츠(#app)가 카드 여러 개로 구성될 때 카드 사이 간격을 일괄 적용 */
#app {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* PC 화면은 카드 폭이 조금 더 늘어나도 괜찮다는 사용자 확정 - 모든 페이지 공통으로 살짝 넓힘
   (모바일은 기존 그대로 600px). 내 공룡 페이지는 입력 항목이 유독 많아 그보다 더 넓게(860px)
   써야 해서 별도로 더 큰 값을 줌 - 선택자 우선순위상 body[data-page="my-dino"] 쪽이 더 구체적이라
   이 공통 규칙보다 항상 이김 */
@media (min-width: 860px) {
  .container {
    width: min(100%, 720px);
  }

  body[data-page="my-dino"] .container {
    width: min(100%, 860px);
  }
}

.card {
  container-type: inline-size;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: var(--p-base); 
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.warning {
  text-align: center;
  color: var(--text-sub);
  font-size: var(--fs-notice);
  margin: var(--m-notice) 0;
  line-height: 1.3;
  word-break: keep-all;
}

/* .card 안에 있는 h2라고 명시하여 우선순위를 높입니다 */
.card h2 {
  display: block;
  width: 100%;
  font-size: clamp(10px, 4cqw, 20px);
  font-weight: 500;
  color: var(--text-main);
  margin-top: 0;
  margin-bottom: calc(var(--m-notice) + 10px) !important;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  word-break: keep-all;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* 내 공룡 탭 패널 전용 여백 조정(타이탄 페이지의 .input-grid는 위에 h2가 있어서 건드리지 않음).
   패널 자체가 이미 위쪽 padding(--p-base)을 갖고 있어서, 각 패널의 첫 행 label까지 추가로
   margin-top을 주면 다른 여백보다 이중으로 커짐 -> 첫 행만 0으로. */
.dino-tab-panel .input-grid > div:first-child label {
  margin-top: 0;
}

/* 첫 자식이 VIP처럼 한 줄을 통째로 차지(.full-width)하는 게 "아니라" 별자리/둥지·알스킨처럼
   처음부터 두 칸이 나란히 첫 행을 이루는 경우엔, 옆 칸(둘째 자식)도 같은 첫 행이라 0으로 맞춤 */
.dino-tab-panel .input-grid > div:first-child:not(.full-width) + div label {
  margin-top: 0;
}

/* 기본 스탯 패널의 VIP(첫 행) 바로 다음 행(체력/공격력)은 전역 label 여백이 과해서 스코프 축소.
   별자리/둥지·알스킨 패널의 2·3번째 행은 원래 여백을 그대로 둬야 다른 행과 정렬이 맞음. */
.dino-tab-panel[data-panel="base"] .input-grid > div:nth-child(2) label,
.dino-tab-panel[data-panel="base"] .input-grid > div:nth-child(3) label {
  margin-top: 6px;
}

.custom-dropdown .selected-value {
  font-weight: 400;
}

label {
  display: block;
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 18px;
  margin-bottom: 6px;
  font-weight: 500;
}

input, select {
  width: 100%;
  /* 카드 폭(cqw) 기준으로 PC 화면 값(48px)을 상한선 삼아 그대로 비례 축소됨 */
  height: clamp(34px, 8cqw, 48px);
  padding: clamp(8px, 2cqw, 12px) clamp(10px, 2.33cqw, 14px);
  background: var(--input-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: clamp(11px, 2.5cqw, 15px);
  color: var(--text-main);
  box-sizing: border-box;
  outline: none;
  transition: background 0.2s, border 0.2s;
}

input:focus, select:focus {
  border-color: var(--primary);
}

/* +값 / +값% 형태로 표시하는 접두/접미 입력창 (별자리, 둥지·알스킨에서 사용) */
.affix-input {
  position: relative;
}

.affix-input input {
  padding-left: 26px;
}

.affix-input.has-suffix input {
  padding-right: 28px;
}

.affix-input .affix-prefix,
.affix-input .affix-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-sub);
  font-size: 15px;
  pointer-events: none;
}

.affix-input .affix-prefix {
  left: 14px;
}

.affix-input .affix-suffix {
  right: 14px;
}

/* 기본 스탯/둥지·알스킨 - 입력칸 왼쪽에 아이콘만 붙임(사용자 확정, 배지 스타일 없이 기존 입력칸
   그대로 유지). 입력칸 자체는 손 안 대서 전역 input 스타일(자기 배경/둥근 테두리)을 그대로 씀. */
.field-icon-row,
.const-badge {
  display: flex;
  align-items: center;
  /* 이미지와 다음 내용(Lv./수치) 사이는 넉넉히 띄움(사용자 확정 - "이미지와 Lv를 더 떨어뜨려야") */
  gap: clamp(8px, 2.2cqw, 14px);
  background: var(--input-bg);
  border-radius: 10px;
  height: clamp(34px, 8cqw, 48px);
  padding: 0 clamp(10px, 2.33cqw, 14px);
  box-sizing: border-box;
}

.field-icon-row:focus-within,
.const-badge:focus-within {
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}

.field-icon,
.const-badge-icon {
  width: clamp(18px, 5cqw, 24px);
  height: clamp(18px, 5cqw, 24px);
  flex: 0 0 auto;
  object-fit: contain;
}

/* 기본 스탯처럼 접두사 없는 단독 입력(field-icon-row 바로 밑 input) */
.field-icon-row > input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  height: auto;
  /* 공룡 수/현재 체력 드롭다운(.selected-value)이 이미 가운데 정렬이라 나머지도 맞춤(사용자 확정) */
  text-align: center;
}

/* 레벨표가 있는 별자리 6종 - 값 입력 대신 레벨을 고르는 드롭다운("Lv. 33 (+270)", 사용자 확정).
   .const-badge가 이미 사각형(배경/테두리)을 담당하므로, 안의 selected-value는 배경 없이 남는
   폭을 다 차지하며 가운데 정렬(사용자 확정 - "드롭다운 내에서 가운데 정렬"). 펼쳐지는 목록
   (dropdown-list)은 사이트 공용 드롭다운 팝업이라 그대로 자기 배경/테두리를 유지함. */
.const-badge-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

.const-badge-dropdown .selected-value {
  background: transparent;
  border: none;
  /* 오른쪽에 화살표(▼) 자리 확보 - 안 그러면 텍스트랑 겹침 */
  padding: 0 16px 0 0;
  height: auto;
  line-height: normal;
  text-align: center;
  cursor: pointer;
}

/* 화살표는 그대로 유지(사용자 확정 - "역삼각형 없으니까 드롭다운인지 모르겠다") - 다만 이 사각형
   자체가 좁아서 기본 15px 오프셋 대신 상자 오른쪽 끝에 붙임 */
.const-badge-dropdown .selected-value::after {
  right: 0;
}

.const-badge-dropdown .dropdown-list li {
  text-align: center;
}

/* "+" + 수치(+ 있으면 "%") - 실제 <input>은 박스 전체를 차지하지만 글자색을 투명하게 만들어
   안 보이게 하고(커서만 보임 - 드롭다운과 동일한 넓은 클릭/포커스 영역 확보, 사용자 확정 -
   "지금의 드롭다운 범위만큼이 다 입력창이어야 해"), 그 위에 겹친 .plus-value-display가 "+"(기본
   글자색)와 숫자(강조색)를 붙여서 보여줌(사용자 확정 - "+와 수치를 붙이고... 수치 부분은
   노란색으로"). 이 표시 레이어는 pointer-events:none이라 클릭은 그대로 밑의 입력칸에 전달됨.
   정렬은 justify-content로: 둥지·알스킨은 오른쪽(기본값), 별자리의 레벨표 없는 3종(이동속도/보스
   피해 감소·증가)은 가운데(.plus-value-group-center 모디파이어). */
.plus-value-group {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
}

.plus-value-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}

.plus-value-group-center .plus-value-display {
  justify-content: center;
}

.plus-value-display-prefix {
  color: var(--text-main);
  font-size: clamp(11px, 2.3cqw, 15px);
}

.plus-value-display-number {
  color: var(--text-main);
  font-weight: 700;
  font-size: clamp(12px, 2.5cqw, 15px);
}

.plus-value-display-number.value-changed {
  color: var(--accent);
}

.plus-value-display-suffix {
  color: var(--text-sub);
  font-size: clamp(11px, 2.3cqw, 15px);
}

.plus-value-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  color: transparent;
  caret-color: var(--text-main);
  text-align: right;
}

/* 입력칸을 눌러 편집 중일 때는 "+수치" 표시 레이어를 완전히 숨기고(사용자 확정 - "입력창을
   클릭하면 +랑 수치가 다 안보여야 해"), 실제로 타이핑하는 내용은 입력칸 자기 글자색으로 보여줌 -
   편집을 마치고(blur) 값이 확정되면 다시 표시 레이어가 "+수치"를 색깔 입혀서 보여줌 */
.plus-value-group:focus-within .plus-value-display {
  visibility: hidden;
}

.plus-value-input:focus {
  color: var(--text-main);
}

.plus-value-group-center .plus-value-input {
  text-align: center;
}

.const-badge .value-changed,
.field-icon-row .value-changed {
  color: var(--accent);
}

.full-width {
  grid-column: 1 / -1;
}

.btn-apply {
  width: 100%;
  padding: 13px;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}

/* 장착/장착해제를 세로로 쌓는 대신 나란히 절반씩 - .btn-apply-row 안에서는 width:100%
   대신 flex:1로 폭을 나눠 갖고, 자기 자신의 margin-top 대신 행 쪽 margin-top을 씀 */
.btn-apply-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-apply-row .btn-apply {
  width: auto;
  flex: 1;
  margin-top: 0;
}

.btn-apply:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* 장착 해제처럼 "장착"보다는 약하지만 존재감은 있어야 하는 보조 버튼 - 옅은 회색 테두리 대신
   본문 글자색을 그대로 써서 눈에 띄되, 브랜드 골드색(장착)보다는 확실히 덜 도드라지게 함 */
.btn-apply-secondary {
  color: var(--text-main);
  border-color: var(--text-main);
  opacity: 0.8;
}

.btn-apply-secondary:active {
  background: color-mix(in srgb, var(--text-main) 12%, transparent);
}

.btn-simulate {
  width: 100%;
  font-size: clamp(16px, 1.2vw + 12px, 20px);
  padding: 1em 0;
  min-height: 3em;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #1a1206;
  border: none;
  border-radius: 8px; /* 8px 혹은 0.5em */
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-simulate:active {
  transform: scale(0.98);
  background: color-mix(in srgb, var(--accent-strong) 85%, black);
}

/* 계산 중(진행률 %)일 때 버튼 배경 자체가 왼쪽에서 오른쪽으로 차오르는 효과 - JS가
   --progress(0~100) 커스텀 프로퍼티를 매 단계마다 갱신함 */
.btn-simulate.btn-progress {
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) calc(var(--progress, 0) * 1%),
    var(--input-bg) calc(var(--progress, 0) * 1%),
    var(--input-bg) 100%);
  color: var(--text-main);
  transition: background 0.15s linear;
}

/* 전투가 진행 중일 때(전투 시작 버튼을 누른 뒤) 버튼이 계속 눌려있는 상태처럼 보이도록 함.
   ":active"는 마우스를 누르고 있는 그 순간만 적용되는 데 반해, 이건 battlePhase가 idle을
   벗어나 있는 동안 JS로 계속 유지되는 상태 */
.btn-simulate.is-pressed {
  background: color-mix(in srgb, var(--accent-strong) 88%, black);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* .report-box는 .card와 함께 붙어서 카드와 동일한 배경/테두리를 쓰고, 표시 여부만 제어함 */
.report-box {
  display: none;
  line-height: 1.6;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.67cqw, 10px);
}

.report-tile {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: clamp(7px, 1.83cqw, 11px) clamp(10px, 2.5cqw, 15px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-value.accent {
  color: var(--accent);
}

.report-chart-section {
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.report-chart-label {
  color: var(--text-main);
  font-size: 14px;
  margin-bottom: 10px;
}

.report-chart-box {
  background: var(--recessed-bg);
  border-radius: 8px;
  padding: 10px;
  height: clamp(150px, 45cqw, 240px);
  position: relative;
}

.chart-tooltip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.chart-tooltip-time {
  font-size: 10px;
  color: var(--text-sub);
}

.chart-tooltip-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.report-survival {
  text-align: center;
  margin-top: 10px;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.1em;
}

.app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.3s;
}

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

.menu-btn {
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

.app-title {
  text-decoration: none;
  cursor: pointer;
}

.app-title .brand {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-blue);
}

.app-title .sub {
  font-size: 11px;
  color: var(--text-main);
}

/* ===== 설정 목록 행 (아이콘 + 라벨 + 컨트롤) ===== */
.setting-list {
  margin-top: 20px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

/* 타일 설정 안에서 한 "블록"(토글 행 하나, 또는 드롭다운 페어 하나)씩 위아래 구분선으로 나뉨.
   :where()로 블록 종류를 묶어서 "서로 인접한 블록 사이에만" 선을 긋게 하면(카드 제목의 밑줄
   바로 아래 첫 블록은 인접한 형제가 없어서 자동으로 제외됨 - +는 원래 첫 자식과 매치하지 않음)
   맨 위 첫 블록에 괜히 선이 하나 더 겹치는 문제(사용자 지적)가 애초에 생길 여지가 없음 */
.setting-list > :where(.setting-row, .setting-stack-pair) + :where(.setting-row, .setting-stack-pair) {
  border-top: 1px solid var(--border-color);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

/* 드롭다운 항목 2개를 "라벨 위 / 드롭다운 아래"로 쌓고 나란히 배치하는 페어(타이탄 페이지의
   .titan-settings-stack/.titan-settings-levelblock과 같은 모양 - 사용자 확정: "타일 설정을
   기본 스탯 하듯이 약간 작게 글자 넣고 그 아래쪽에 드롭다운을... 공격력 버프 타워, 체력 버프
   타워 / 서버 레벨캡, 서버 별자리캡 이렇게"). 짝이 없는 항목(예: 허수아비의 공격력 버프
   타워처럼 체력 버프 타워가 없는 경우)은 .setting-stack 하나만 이 클래스 없이 홀로 두면 자연스럽게
   전체 폭을 씀 */
.setting-stack-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 14px 0;
}

.setting-stack .setting-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.setting-stack .custom-dropdown,
.setting-stack .affix-input {
  width: 100%;
}

.setting-stack .selected-value {
  font-size: clamp(9.5px, 2cqw, 13px);
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  color: var(--text-main);
}

.setting-control {
  width: auto;
  max-width: 140px;
}

.setting-control input {
  padding-right: 40px;
}

/* ===== 내 공룡 페이지 전용: 공통 스탯 리드아웃 ===== */
.stat-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
}

.stat-readout-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-readout-label {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

.stat-readout-value {
  font-size: clamp(14px, 4.2cqw, 19px);
  font-weight: 600;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.stat-readout-value.accent {
  color: var(--accent);
}

/* 사이드바 애니메이션 및 스타일 */
.side-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: var(--card-bg);
  z-index: 2000;
  transition: 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.side-menu.open {
  left: 0;
}

.side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
  flex-shrink: 0;
}

/* 정체성(닉네임)+주 내비게이션은 위, 설정류(테마/로그)는 항상 맨 아래로 고정 -
   흔히 쓰는 앱 사이드바 구성(계정 → 메뉴 → 설정) */
.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* overflow-y만 auto로 두면 CSS 스펙상 overflow-x도 자동으로 auto가 됨(한쪽 축이 visible이 아니면
     반대 축도 visible일 수 없음) - 언어 드롭다운을 열었을 때 몇 px 정도의 미세한 가로 오버플로우
     (서브픽셀 반올림 등)만 생겨도 이 메뉴 안에 원치 않는 가로 스크롤바가 나타났음(사용자 지적) -
     세로 스크롤만 필요하므로 가로는 명시적으로 막음
  */
  overflow-x: hidden;
  padding-top: 10px;
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

.menu-content::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.menu-bottom {
  margin-top: auto;
}

.menu-footer-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border: none;
  border-top: 1px solid var(--border-color);
  background: none;
  color: var(--text-sub);
  font-size: 11px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}


.menu-footer-link:hover {
  color: var(--text-main);
}

/* 토글 스위치 디자인 */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin: 0; /* 전역 label { margin-top:18px; margin-bottom:6px } 상속 차단 - .switch도 label이라 안 막으면 밀림 */
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 22px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* ON 상태일 때의 배경색을 골드 악센트로 변경 */
input:checked + .slider {
  background-color: var(--accent);
}

/* ON 상태일 때 동그라미(before)가 이동하는 로직 */
input:checked + .slider:before {
  transform: translateX(22px);
}

/* 선택지가 아니라 항상 고정된 값임을 보여줘야 할 때(예: 허수아비의 "부족 점령 상태" - 부족이
   점령한 타일에만 설치 가능해서 끌 수 없음) - 흐릿하게 표시하고 커서를 no-drop으로 바꿔서
   조작 불가능한 상태임을 알림 */
.switch input:disabled + .slider {
  opacity: 0.6;
  cursor: not-allowed;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 20px;
  cursor: pointer;
}

.custom-dropdown {
  position: relative;
  width: 100%;
}

.selected-value {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  /* input/select와 같은 기준으로 카드 폭에 비례해서 줄어듦(PC 값이 상한선) */
  height: clamp(34px, 8cqw, 48px);
  padding: clamp(8px, 2cqw, 12px) clamp(10px, 2.33cqw, 14px);
  line-height: clamp(16px, 3.67cqw, 22px);
  font-size: clamp(11px, 2.5cqw, 15px);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--text-main);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.selected-value::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-sub);
}

.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  padding: 0;
  margin: 0;
  list-style: none;
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
}

.dropdown-list::-webkit-scrollbar {
  display: none;
}

/* 아래로 펼치면 화면/카드 밖으로 잘리는 위치의 드롭다운은 toggleDropdownList()가 이 클래스를
   붙여서 위쪽으로 펼침(top/bottom과 둥근 모서리 방향만 뒤집으면 됨) */
.dropdown-list.dropdown-list-up {
  top: auto;
  bottom: 100%;
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.dropdown-list li {
  padding: clamp(7px, 1.67cqw, 10px);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: clamp(11px, 2.33cqw, 14px);
}

.dropdown-list li:hover {
  background: var(--input-bg);
  color: var(--primary);
}

/* VIP 드롭다운: 항목마다 배지 이미지 + 설명 텍스트가 함께 들어감.
   닫힌 상태 박스는 다른 입력칸/드롭다운과 높이를 맞춰야 해서 세로 패딩을 거의 없애고
   그만큼 아이콘이 박스 안을 거의 꽉 채우도록 함. 모든 크기는 카드 폭(cqw) 기준으로
   PC 화면 값을 상한선 삼아 비례 축소되어, 폭이 좁아져도 세로만 뚱뚱해지지 않음 */
/*피해 감소량, 흡혈량 표시 전환*/
#resRed,
#resVamp {
  position: relative;
  display: inline-block;
  padding-right: 18px;
}

#resRed:active::after,
#resVamp:active::after {
  opacity: 1;
  color: var(--accent);
}


#hpChart {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  cursor: crosshair;
}
.dropdown-locked {
  pointer-events: none;
  opacity: 0.55;
}

/* ===== 업데이트 알림 배너 - 새 배포가 감지되면(js/core/update-check.js) 화면 하단에 뜸.
   모달/오버레이(z-index 2100)보다는 낮게 둬서 팝업 사용 중엔 그 위를 가리지 않게 함 */
.update-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1900;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 16px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: update-banner-in 0.25s ease;
}

@keyframes update-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.update-banner-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.update-banner-refresh {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #1a1206;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.update-banner-dismiss {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  cursor: pointer;
}

.update-banner-dismiss:hover {
  background: var(--input-bg);
}