/* ===== 건물 페이지 전용(building-page.js) - 육각형 4칸(공룡 1 + 성벽 3), 타격 이펙트, 최적
   조합 찾기 ===== css/style.css를 여러 파일로 분리한 것 중 하나 - index.html에 링크된 순서(cascade
   순서)가 원본과 동일하게 유지되도록 주의할 것 ===== */

/* ===== 건물 =====
   바닥은 Three.js(js/core/hex-scene3d.js)가 그리는 진짜 WebGL 3D - CSS rotateX+perspective
   가짜 3D를 쓰다가 이번 세션에서 여러 렌더링 버그를 겪은 뒤 사용자 확정으로 전면 교체함. 공룡/건물
   슬롯은 여전히 평범한 2D DOM - 위치만 hexScene.projectToScreen()으로 계산해서 심음. 타일이
   4개(공룡 1 + 건물 3)라 결합 좌표계(0~250, 0~173.2) 위에 각 슬롯을 world-coordinate로 배치함 -
   진영 구분이 없어서 formation-group은 하나면 충분함. 일자 대각선 체인이 아니라, 공룡 육각형
   하나를 중심으로 그 앞쪽에 정면·좌측·우측 3개 건물 육각형이 꽃잎처럼 붙는 배치(사용자 확정 -
   js/pages/building-page.js의 BUILDING_HEX_CENTERS/BUILDING_ADJACENCY 참고). */
.building-field-card {
  container-type: inline-size;
}

/* ===== 건물: 전투 설정 / 빠른 계산 / 시뮬레이션 / 조합 찾기 4탭(사용자 확정 - "타이탄처럼 해달라고"
   - titan.css의 .titan-mode-tabs-4와 완전히 같은 방식). 탭 폭이 전부 같아서 인디케이터도 순수
   CSS %로 처리하고, 이동은 #buildingModeTabs의 data-active-idx로 표시(buildingInitModeTabs,
   building-page.js) ===== */
.building-mode-tabs-4 .battle-mode-indicator {
  width: calc(25% - 5px);
}

.building-mode-tabs-4[data-active-idx="1"] .battle-mode-indicator { transform: translateX(calc(100% + 4px)); }
.building-mode-tabs-4[data-active-idx="2"] .battle-mode-indicator { transform: translateX(calc(200% + 8px)); }
.building-mode-tabs-4[data-active-idx="3"] .battle-mode-indicator { transform: translateX(calc(300% + 12px)); }

/* 전투 설정 탭(idx 0)만 파란색으로 표시(사용자 확정 - "전투 설정의 색깔은 파란색으로(타이탄 css
   참고)") - 타이탄의 #3cb4be를 그대로 씀. 나머지 3개(빠른 계산/시뮬레이션/조합 찾기)는 기본 골드
   그라디언트 그대로 유지 */
.building-mode-tabs-4[data-active-idx="0"] .battle-mode-indicator {
  background: linear-gradient(135deg, #3cb4be, color-mix(in srgb, #3cb4be 78%, black));
  box-shadow: 0 3px 10px color-mix(in srgb, #3cb4be 40%, transparent);
}

.building-mode-tabs-4[data-active-idx="0"] #buildingModeTabSettings.active {
  color: #eef4ff;
}

#buildingLiveModeCard .battle-controls {
  margin-top: 14px;
}

/* 전투 설정 탭: "건물까지의 거리"와 "연속 전투"를 한 행에서 정확히 반씩 나눠 차지하게 배치(사용자
   확정 - "중앙 기점으로 양 측이 자리를 반씩 전부 차지"). 각 절반 안에서는 "자연 구조물과 인접"
   행과 완전히 같은 스타일(라벨 왼쪽 끝 / 조작요소 오른쪽 끝, .titan-settings-row 그대로 재사용 -
   사용자 확정 "자연 구조물과 인접을 참고해서 스타일 똑같게")을 쓰므로, 이 컨테이너 자체는 그
   두 .titan-settings-row를 정확히 반씩 나눠 담는 2열 grid 역할만 함(가운데 정렬로 양옆에 빈
   공간이 남았던 이전 버전과 달리, 각 칸을 그 안의 titan-settings-row가 통째로 채움) */
.building-distance-continuous-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* 예전엔 "연속 전투"(라벨+토글 1줄)가 "건물까지의 거리"(라벨+입력칸 2줄)보다 키가 작아서
     align-items:center로 세로 중앙만 맞췄었는데, 그러면 토글이 입력칸과 다른 y좌표에 옴(중간
     어딘가) - 이제 js(building-page.js)에서 "연속 전투" 위에도 보이지 않는 라벨을 하나 더 둬서
     두 블록의 실제 높이 자체가 같아졌으므로 별도 정렬이 필요 없음 */
}

/* 전투 설정 탭 안에서 "타일풍" 설정(자연/부족점령/버프타워/캡)과 "전투풍" 설정(공격할 건물/투석기/
   거리)을 노란 강조선으로 구분(사용자 확정 - "레벨캡 밑이 노란선, 그 밑이 공격할 건물"). 타이탄의
   .titan-settings-levelblock + .titan-settings-fullstack(css/titan.css)은 "레벨블록 바로 다음이
   솔로 fullstack일 때만" 발동하는 전용 규칙이라 여기(레벨블록 바로 다음이 또 다른 레벨블록인
   경우)엔 안 맞아서, 위치에 얽매이지 않는 전용 마커 클래스로 새로 둠. building.css가 index.html에서
   titan.css보다 먼저 로드되므로(캐스케이드상 나중 파일이 우선) 순서 역전으로 titan.css의 인접
   레벨블록 규칙(border-top 제거)에 덮어써지지 않도록 ID로 특이도를 올려 확정적으로 이김 */
#buildingSettingsModeCard .titan-settings-levelblock:has(+ .building-settings-divider-before) {
  border-bottom: none;
}

#buildingSettingsModeCard .building-settings-divider-before {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid var(--accent);
}

/* 적 투석기 공격 레벨 드롭다운 - 어떤 탄종인지 한눈에 보이게 아이콘을 같이 보여줌(사용자 확정 -
   "해당 투사체 이미지 넣어") - VIP 드롭다운(css/my-dino.css .vip-option-icon 등)과 같은
   "아이콘 + 텍스트" 구조. .selected-value 기본은 display 지정이 없어서(base.css) 그냥 얹어도
   충돌 없이 flex로 바뀜 */
#buildingCatapultLevelSelectedValue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.building-catapult-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.building-catapult-ammo-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.building-field-wrap {
  position: relative;
  display: flex;
  /* 대기 공룡 체력바 목록(#buildingDinoReserveHpBars)을 육각형 무대 "아래"에 두려고 세로 방향으로
     바꿈(사용자 확정 - "대기 공룡도 밑에 체력바로 표시") - row(기본값)였을 때는 justify-content:
     center가 가로 중앙 정렬이었지만, column에서는 그 역할을 align-items가 대신함(스크린샷으로
     확인해보니 처음엔 대기 목록이 무대 "옆"에 나란히 붙어 보여서 바로잡음) */
  flex-direction: column;
  align-items: center;
  /* 맨 뒤 성벽(육각형 4번째, 화면상 가장 위쪽)일수록 체력바+수치 텍스트가 스택 위로 더 높이
     솟아서 탭 바와 겹치기 쉬움(실측 확인) - 위쪽 여백을 넉넉히 둠. 아래쪽엔 패딩을 안 줌 - 예전엔
     여기 패딩으로 다음 형제(#buildingDinoReserveHpBars)와의 간격까지 만들었는데, 그 목록 자신도
     margin-top을 가지고 있어서 위/아래 여백이 이중으로 겹쳐 육각형 쪽 간격만 유독 벌어져 보였음
     (사용자 지적 - "정확히 중간에 들어가도록") - 이제 그 목록의 위아래 대칭 margin(%)이 간격을
     전담함 */
  padding: clamp(34px, 11cqw, 56px) 0 0;
}

.building-stage {
  position: relative;
  /* 카드 폭이 넓은 화면에서도 420px에 막혀 여백만 남고 내용물은 작게 보이던 문제(사용자 지적 -
     "최대한 크게 볼 수 있어야 해") - 카드 자체 폭(실측 약 670px)에 맞춰 상한을 560px로 올림 */
  width: min(560px, 94cqw);
  aspect-ratio: 250 / 173.2;
  margin: 0 auto;
}

/* Three.js가 여기에 canvas를 붙임(js/core/hex-scene3d.js의 mount()) */
.building-tilt {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}

/* 육각형 타일(4칸 전부 - 중앙 포함) 클릭으로 건물 선택 모달을 염 - 예전엔 바닥 SVG의 polygon
   자체가 클릭 대상이었는데, 바닥이 Three.js(캔버스)로 바뀌면서 그 자리를 대신하는 투명 히트박스.
   실제 육각형 모양 그대로 clip-path로 잘라내되(buildingPositionSlots() 참고), 꼭짓점 쪽만 살짝
   (1.15배) 바깥으로 벌려서 꼭짓점 근처를 못 누르는 문제를 완화함(옆 타일과 아주 살짝 겹치는 건
   허용 - 완전히 못 누르는 것보다 사용성에 낫다고 판단) */
.building-hex-hitbox-layer {
  position: absolute;
  inset: 0;
}

.building-hex-hitbox {
  position: absolute;
  /* 여기 크기/모양은 씬이 마운트되기 전(잠깐) 쓰이는 사각형 폴백일 뿐 - 실제로는
     buildingPositionSlots()(js/pages/building-page.js)가 타일마다 실제 투영된 육각형 경계와
     clip-path를 매번 계산해서 심어줌(타일 4개가 화면상 크기·모양이 서로 달라서 고정값 하나로는
     안 맞음 - 예전엔 이 고정 38%×48% 사각형을 그대로 써서 육각형이 아닌 그 바운딩 박스 크기로
     옆 타일과 크게 겹쳐, 중앙 타일 안쪽인데도 옆 타일이 클릭되는 버그가 있었음, 사용자 지적) */
  width: 38%;
  height: 48%;
  transform: translate(-50%, -50%);
}

.building-hex-tile {
  cursor: pointer;
}

/* 호버/선택 시각 효과는 이 사각형 히트박스 자체를 칠하는 대신(사용자 지적 - "갑자기 네모로 표시가
   되니까 보기 안 좋네", "선택하거나 마우스를 올리는 해당 육각형 타일이 선택 효과를 받는 정도면
   충분해") js(buildingInitSelectModal)가 hexScene.setTileTint()로 실제 육각형 메시의 테두리
   색을 바꿈 - 그래야 육각형 모양 그대로 강조됨(예전 SVG :hover{fill:...} 시절과 같은 모양) */

.building-formation-group {
  position: absolute;
  inset: 0;
  /* 이 그룹 안엔 클릭 대상이 없음(공룡 아바타는 장식, 건물 이미지는 pointer-events:none) - 그런데
     기본값(auto)이면 전체를 덮은 채로 위에 얹혀서 그 밑의 .building-hex-hitbox(타일 클릭 영역)를
     가로채버림(실측 확인 - Playwright 클릭이 이 div에 막혀 타임아웃남). 통째로 투명 처리해서
     클릭이 그대로 아래 히트박스까지 뚫고 지나가게 함 */
  pointer-events: none;
}

/* 공룡/건물 슬롯 - "세계좌표의 그 지점"을 나타내는 2D 앵커점(hexScene.projectToScreen()이 계산한
   화면 좌표를 그대로 받음). 폭·높이를 0으로 둬서 이 요소 자체엔 면적이 없음 - 실제 보이는 이미지
   (.building-dino-avatar/.building-sprite-frame)는 이 앵커의 자식으로 넣고 거기서 순수 2D
   translate만으로 정확한 지점이 이 점에 오도록 오프셋을 줌(사용자 확정 - "육각형 바닥 위에
   올려줘") */
.building-dino-slot {
  position: absolute;
  width: 0;
  height: 0;
  /* 이동 버튼으로 타겟을 바꾸면 left/top이 바뀌는데, 순간이동보다 걸어가는 느낌이 나도록 부드럽게
     전환(사용자 확정 - 공룡은 반드시 공격할 타일에 직접 가있어야 함) */
  transition: left 0.4s ease, top 0.4s ease;
  /* z-index는 이제 건물(.building-wall-slot)과 같은 공식(js의 buildingUpdateDinoPosition,
     Math.round(10000 - distance))으로 매번 동적 계산됨 - 한때 공룡을 항상 최상단 고정값
     (10001)으로 뒀었는데(사용자 확정이었으나, 중앙 타일에 있을 땐 어차피 카메라에 제일 가까워서
     티가 안 났을 뿐), 다른 타일로 이동하면 공룡이 카메라에서 더 먼데도 앞쪽 건물보다 계속 위에
     그려지는 게 부자연스럽다는 지적으로 정정함(사용자 - "카메라 시점을 기준으로 거리를 계산해서
     누가누가 앞에 있고 뒤에 있는지 해봐야겠는데") - 여기 값은 씬이 마운트되기 전(잠깐) 쓰이는
     폴백일 뿐 */
  z-index: 1;
}

/* 실제로는 최대 7마리가 동시에 공격하지만(building-page.js의 BUILDING_MAX_DINO_COUNT), 한
   타일에 공 7개를 다 그리면 너무 빽빽해서 3마리만 보여주고 나머지 4마리는 화면엔 안 보이되
   대미지 계산엔 그대로 포함되는 "숨김 처리"로 함(사용자 확정) - 한 줄로 나란히 서되 가운데가
   더 아래(카메라 쪽)로 튀어나온 곡선 대형(사용자 확정 - "가운데 공룡이 더 아래쪽으로 튀어나와
   있어야 해... 육각형의 바깥 테두리를 따르면 되긴 해" - 육각형의 정면 변이 가운데는 튀어나오고
   양 옆은 안쪽으로 들어간 모양이라 그 윤곽을 흉내냄). 가로 폭이 건물 스프라이트보다 넓어서(3개
   폭 합 > 건물 폭) 건물 앞쪽에 서도 양옆 2마리는 건물 뒤로 안 가려짐 */
.building-dino-cluster {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* 가운데(2번째) 슬롯을 튀어나오게 하는 오프셋 - 예전엔 공(.building-dino-avatar) 자신에 직접
   걸었지만, 이제 그 공을 감싸는 래퍼(.building-dino-avatar-slot)가 클러스터의 직계 자식이 됐으므로
   같은 효과를 래퍼에 걸어야 함 */
.building-dino-cluster .building-dino-avatar-slot:nth-child(2) {
  transform: translateY(22%);
  /* 카메라 쪽으로 더 튀어나온(앞쪽) 공룡이 양옆보다 위에 그려져야 함(사용자 확정 - "공룡끼리도
     앞쪽에 위치한 공룡이 위쪽에 위치해야 함") */
  z-index: 1;
}

/* 공(.building-dino-avatar) 하나만 순수 in-flow 자식으로 두고 체력바/이름은 절대 위치로 그 위/
   아래에 얹음 - 이렇게 해야 래퍼의 박스 크기가 공 하나와 완전히 같아져서, 기존에 실측으로 맞춰둔
   클러스터의 align-items:flex-end 접지 계산(공 밑면이 바로 지면)을 전혀 안 건드림(사용자 확정
   "공룡 밑에 이름도 넣고" 전에 이미 완성된 3D 배치라 이 부분은 절대 흔들면 안 됨) */
.building-dino-avatar-slot {
  position: relative;
}

.building-dino-avatar {
  /* 육각형 크기 기준 통일 크기(js/core/hex-scene3d.js의 projectDiameterPx) -
     buildingUpdateDinoPosition()이 #buildingDinoSlot에 --avatar-diam-px로 심어줌(자식으로 상속).
     clamp()는 씬이 아직 마운트되기 전(탭이 열리기 직전) 잠깐 쓰이는 폴백일 뿐 */
  width: var(--avatar-diam-px, clamp(24px, 9cqw, 40px));
  height: var(--avatar-diam-px, clamp(24px, 9cqw, 40px));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, white), var(--accent-strong) 75%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* 죽은 공룡(체력 0) - 건물이 파괴됐을 때(.building-destroyed)와 같은 방식으로 흑백 처리 */
.building-dino-avatar.building-dino-dead {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.5;
}

.building-dino-hpbar {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  /* 다이노 배틀(.battle-hp-bar-mini, css/dino-battle.css)과 같은 공용 규칙으로 통일(사용자 확정
     - "이건 공룡 자체 로직에 들어가야 하는거야... 모든 페이지에서 사용해야 한다는거지") - 가로를
     공룡 실제 지름과 정확히 맞추고, 세로는 원래 바의 비율(가로 46px일 때 세로 4px)을 유지 */
  width: var(--avatar-diam-px, clamp(24px, 9cqw, 40px));
  height: max(2px, calc(var(--avatar-diam-px, clamp(24px, 9cqw, 40px)) * 4 / 46));
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.building-dino-hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

.building-dino-avatar-name {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  font-size: 9px;
  /* "내 공룡" 이름표 색 - 다이노 배틀의 #myFormationGroup .battle-team-slot-name과 통일(사용자
     지적 - "어느 페이지는 초록색이고 어떤 페이지는 하얀색이고") */
  color: #4ade80;
  white-space: nowrap;
  /* 로그인 닉네임은 길이가 제각각이라(사용자가 직접 정함) 다이노 배틀의 .battle-team-slot-name과
     같은 방식으로 잘라냄 - 안 그러면 옆 공룡 이름표와 겹침(실측 확인 - 6자짜리 닉네임도 겹쳤음) */
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 화면에 안 보이는 나머지 공룡(최대 7 - 표시 3 = 4마리)의 체력바 - 타이탄의
   .titan-hex-hpbar-list와 같은 개념, 건물은 세로 사이드바 대신 무대 아래 가로 줄. 위(육각형)/
   아래(이동 버튼) 항목 정확히 중간에 오도록 위아래 여백을 같은 %(카드 폭 기준, 고정 px 대신 -
   사용자 확정 "여백을 px로 주지 말고... 퍼센트로 해줘")로 동일하게 줌 - 아래쪽 이웃인
   .building-move-controls 자신의 margin-top은 0으로 빼서(flex 형제 간 마진은 안 겹쳐지므로 그대로
   두면 이 여백에 그만큼 더해져 아래쪽이 위쪽보다 더 벌어짐) 이 마진만으로 위아래가 정확히
   같아지게 함 */
.building-dino-reserve-hpbar-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 3% 0;
}

.building-dino-reserve-hpbar {
  position: relative;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.building-dino-reserve-hpfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 999px;
}

/* 건물 슬롯 - .building-dino-slot과 같은 2D 앵커점(폭·높이 0, hexScene.projectToScreen()이 계산한
   화면 좌표를 그대로 받음). Three.js가 바닥을 진짜 3D로 그리게 되면서, 예전에 CSS 3D 특유의
   테두리선 파묻힘 버그를 피하려고 실측으로 튜닝했던 translateZ 보정값이 더 이상 필요 없어짐 */
.building-wall-slot {
  position: absolute;
  width: 0;
  height: 0;
  /* 공룡(.building-dino-slot, z-index:10)보다는 항상 아래에 있어야 공룡이 건물에 가려지지 않음 -
     여기 1은 씬이 마운트되기 전(잠깐) 쓰이는 폴백일 뿐, 실제로는 buildingPositionSlots()
     (js/pages/building-page.js)가 카메라 실제 깊이(projectToScreen의 distance) 기반으로 매번
     심어줌 - 건물끼리 DOM 순서(중앙→정면→좌→우)대로 나중에 그려진 게 이겨서 더 먼 정면 건물이
     더 가까운 중앙 건물을 가리던 버그(사용자 지적 - "제일 앞쪽에 있는 건물이 뒤에 있는 건물에
     가려지는데")를 다이노 배틀과 같은 방식으로 통일해서 고침 */
  z-index: 1;
}

/* 스프라이트 프레임 - 이미지 자기 자신 크기로 꽉 차는 래퍼(자식 img 하나뿐이라 자연스럽게
   이미지 렌더 크기와 같아짐). translate(-anchorX%, -anchorY%)로 "이 이미지에서 육각형 중심에
   와야 하는 지점"(BUILDING_TYPES의 anchorX/anchorY, 사용자가 직접 측정해서 준 좌표)을 정확히
   3D 앵커점에 맞춤 - translate %는 항상 요소 자기 자신의 크기 기준이라 프레임=이미지 크기이므로
   이미지 좌표를 그대로 쓸 수 있음. 예전엔 발밑 정렬(-50%,-100%) 기준으로 알파채널 여백/그림자
   방향/원근감을 사진마다 어림짐작으로 보정했는데, 그건 결국 다 "이미지 좌표를 모르는 상태에서
   근사"였을 뿐이라 부정확했음 - 실제 좌표를 알면 이 방식이 정확하고 사진마다 특별 처리도 필요 없음 */
.building-sprite-frame {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(calc(var(--anchor-x, 50%) * -1), calc(var(--anchor-y, 100%) * -1));
}

.building-sprite {
  display: block;
  /* Lv1/Lv2 등 원본 비율이 서로 달라서 허수아비처럼 aspect-ratio를 고정값으로 박아두면 안 됨
     (사용자 지적 - 원본 비율 그대로) - width%+height:auto만 써서 이미지마다 자기 natural size
     비율을 그대로 따르게 함. 타입별 배율(--size-scale, buildingRenderWalls가 심어줌)을 clamp()
     전체에 곱함 - 벽은 1(원본 그대로), 투석기는 2, 나머지 건물은 1.5(사용자 확정 - "벽을
     제외하고 나머지 건물들 크기 0.5배 증가, 투석기는 원본에서 크기 2배로 증가") */
  width: calc(clamp(48px, 17cqw, 84px) * var(--size-scale, 1));
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 체력바+텍스트 - 프레임(=스프라이트 렌더 크기) 바로 위에 겹침. x좌표는 이미지 가로 중앙(50%)이
   아니라 앵커 x좌표(--anchor-x, 프레임의 인라인 커스텀 프로퍼티가 자식인 여기까지 그대로
   상속됨)에 맞춤 - 그래야 체력바가 "육각형 중심과 실제로 맞닿은 지점" 바로 위에 오고, 비대칭
   이미지(앵커가 50%에서 먼 경우)에서도 어긋나지 않음(사용자 확정 - "체력바와 체력 텍스트를
   내가 준 좌표의 x좌표를 일치시켜줘"). y는 그대로 프레임 바로 위(bottom:100%)로 이미지 위에
   자동으로 붙음 - 프레임 자체엔 preserve-3d가 없어서(순수 2D translate만 있음) bottom:100%
   (부모 박스 밖으로 나가는 음수 방향 오프셋)를 써도 중첩 preserve-3d 렌더링 버그(피격 이펙트/
   팝업을 결국 position:fixed로 우회했던 그 문제)가 재발하지 않음(실측 확인) */
.building-hp-overlay {
  position: absolute;
  left: var(--anchor-x, 50%);
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.building-hpbar {
  width: clamp(44px, 15cqw, 74px);
  height: 6px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.building-hpfill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.building-hp-text {
  font-size: clamp(7px, 2cqw, 9px);
  color: var(--text-sub);
  white-space: nowrap;
}

/* 파괴된 건물 - 다이노 배틀의 .defeated와 같은 처리(회색조 + 살짝 어둡게), 더 이상 타겟이 아님을
   시각적으로 표시 */
.building-sprite.building-destroyed {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.85;
}

/* 피격 시 좌우로 흔들림 - 허수아비(발밑을 축으로 한 rotate)와 다르게 회전 없이 이미지 자체가
   좌우로 이동함(사용자 확정 - "흔들림의 기준이 밑에 있으면 안 되고 이미지 자체가 좌우로
   흔들려야 함"). 앵커 정렬은 부모 .building-sprite-frame이 담당하므로 여기선 순수 translateX만
   쓰면 됨(서로 다른 요소라 간섭 없음) - 다이노 배틀의 .battle-avatar.hit-shake와 같은 패턴 */
.building-sprite.building-shaking {
  animation: building-shake 0.35s ease-in-out;
}

/* 피격 흔들림 폭을 절반으로(사용자 확정 - "사이트의 모든 피격 시 떨림 정도를 절반으로 줄여") -
   밝기 플래시(filter)는 흔들림 자체가 아니라서 그대로 둠 */
@keyframes building-shake {
  0%, 100% { transform: translateX(0); filter: brightness(1); }
  20% { transform: translateX(-4px); filter: brightness(1.6); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1.5px); }
}

/* 피격 이펙트/대미지 팝업 - 다이노 배틀/타이탄/허수아비와 같은 이유로 3D 컨텍스트를 아예 우회해서
   화면 좌표(position:fixed)로 직접 띄움(피격 흔들림이 filter를 쓰는 요소는 preserve-3d가 강제로
   무시돼서 translateZ 깊이가 소용없어짐 + 중첩 preserve-3d에서 형제 요소 DOM 순서가 깨지는
   렌더링 버그 - 다이노 배틀/타이탄/허수아비에서 이미 실측으로 확인된 문제, 여기도 동일하게 회피) */
.building-hit-effect-fixed,
.building-dmg-popup-fixed {
  position: fixed;
  z-index: 999;
}

/* 적 캐터펄트 투사체 - 공격 중인 건물에서 내 공룡 쪽으로 날아오는 애니메이션(사용자 확정 - "상대의
   투석기 공격 켜져있으면 해당 투사체 날아오는 애니메이션도 해주고"). 피격 이펙트와 같은 이유로
   position:fixed 화면 좌표를 씀 - --proj-dx/dy(도착지 - 출발지, px)를 JS가 인라인으로 넣어주면
   transform으로 그 거리만큼 이동하며 날아감(자전하는 회전은 순수 연출용). 크기 2배(사용자 확정 -
   "투사체 이미지 크기를 2배로") */
.building-projectile-fixed {
  position: fixed;
  width: 52px;
  height: 52px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  animation: building-projectile-fly 0.45s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}

/* 위에서 일직선으로 뚝 떨어지는 대신(사용자 확정 - "왼쪽에서 곡선을 그리며 떨어져야 함") 중간
   지점(50%)에서 직선 보간보다 왼쪽·위로 더 벌어지게 오프셋을 줘서 포물선처럼 휘어지게 함 - 시작점
   자체도 js(buildingSpawnCatapultProjectile)에서 건물보다 왼쪽/위로 당겨져 있어서, 화면 바깥
   왼쪽에서 곡선을 그리며 날아드는 느낌이 남. 오프셋 폭은 사용자 피드백으로 좀 더 완만하게 줄임
   (-60px/-50px → -30px/-25px). opacity는 처음부터 끝까지 안 건드림 - 나타나거나 사라지는 페이드
   모션 없이 순간 나타났다가(애니메이션 시작) 순간 사라지도록(animationend 시점에 JS가 바로 제거)
   함(사용자 확정 - "나타나는 모션이나 사라지는 모션이 아예 없어야 해") */
@keyframes building-projectile-fly {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  50% { transform: translate(calc(-50% + var(--proj-dx) * 0.35 - 30px), calc(-50% + var(--proj-dy) * 0.35 - 25px)) rotate(150deg); }
  100% { transform: translate(calc(-50% + var(--proj-dx)), calc(-50% + var(--proj-dy))) rotate(360deg); }
}

/* 건물로 이동 버튼 - 공룡은 타이탄과 달리 인접 칸 공격이 안 되고 반드시 같은 타일에 가있어야
   공격할 수 있어서(사용자 확정) 육각형 클릭(건물 선택용)과는 별개로 이동 전용 버튼을 3D 장면
   바깥에 평범한 2D 버튼 행으로 둠 - 3D 배치와 얽히지 않아서 단순하고 안정적 */
.building-move-controls {
  display: flex;
  gap: 8px;
  /* 위쪽 여백은 이제 .building-dino-reserve-hpbar-list의 margin(위아래 대칭 %)이 전담함 - 여기
     margin-top까지 남아있으면 flex 형제 마진은 안 겹쳐지므로 그 위 여백에 그대로 더해져서
     위(육각형 쪽)보다 아래쪽이 더 벌어짐 */
  margin-top: 0;
}

.building-move-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.building-move-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.building-move-btn.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== 건물 선택 모달(friend-picker-modal 재사용, 안쪽 목록만 그리드로 교체) - 대부분 정사각형
   UI 아이콘이라 텍스트 리스트보다 그리드가 자연스러움(사용자 지적) ===== */
.building-select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.building-select-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}

.building-select-item:hover {
  background: var(--input-bg);
  border-color: var(--border-color);
}

.building-select-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
}

.building-select-item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.building-select-item span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.building-select-item .building-select-hp {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-sub);
}

/* 잠긴 건물(인게임 미출시) - 흐리게 처리 + 클릭 막음(building-page.js에서 data-id를 빈 값으로 둬서
   클릭해도 아무 반응 없게 하는데, 커서/명도로도 "고를 수 없다"는 걸 바로 알 수 있게 함 */
.building-select-item.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.building-select-item.locked:hover {
  background: none;
  border-color: transparent;
}

.building-select-lock {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-sub);
  background: var(--input-bg);
  border-radius: 999px;
  padding: 1px 6px;
}

.building-select-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px dashed var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-sub);
}

/* ===== 건물 "최적 조합 찾기" - 허수아비와 완전히 같은 마크업/클래스를 재사용(dummy.css 참고) -
   여기선 카드 폭 계산 기준(container-type)만 이 파일의 .building-field-card로 다시 잡아주면
   되고, 나머지 grid/row/name/level 스타일은 이름이 dummy- 접두사라도 클래스 자체는 공용이라
   dummy.css에 이미 있는 규칙이 그대로 적용됨(타이탄 페이지도 같은 방식으로 재사용 중) ===== */