/* ============================================================
   삼국지(가제) 2단계 — 가로 성 화면 (placeholder)
   * 가로 고정 + 반응형. 아트는 전부 placeholder(나중 교체).
   * 건물/아이콘은 .building / .res 등 구조만 잡아두고,
     배경이미지만 갈아끼우면 실제 아트로 전환되게 설계.
   ============================================================ */

:root {
  --top-h: 104px;        /* 상단바 높이 (윗줄 46 + 자원 2줄 — 폰 기종 무관) */
  --nav-h: 58px;         /* 하단 메뉴 높이 */
  /* 시스템 안전영역 (상태바·홈바) — 앱(Capacitor 8)이 주입하는 변수 우선, 브라우저 표준 env() 폴백.
     안드 16부터 전체화면이 강제라 앱이 이만큼 스스로 비켜야 함 (2026-06-08 확정 해법) */
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --gold: #f5c542;
  --panel-bg: #2b2118;
  --bar-bg: rgba(30, 22, 14, 0.92);
  --accent: #c9a35b;
  --text: #f3e9d2;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%;
  background: #0d0b08;
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--text);
  overflow: hidden;
  user-select: none;
}

/* ===== 게임 컨테이너 — ★세로 전환 (2026-06-08 확정)
   고정 비율 박스 폐기: 폰 화면 전체 사용 (검은 띠 제거).
   - 세로 폰 (9:16~20:9): 꽉 채움 — 길수록 콘텐츠가 더 보임
   - 폴드 펼침/태블릿 (정사각형 근처): 그대로 채움 — "남는 공간 = 더 보여주기"
   - PC 가로 모니터: 폰 기둥 모양으로 중앙 클램프 ===== */
#game {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100vw;
  height: 100dvh;            /* dvh = 모바일 주소창 수축 대응 */
  background: #0f0c08;   /* 어두운 흙갈색 — 가장자리·안전영역에 비쳐도 톤 유지 (구 녹색 폐기) */
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  overflow: hidden;
}
@media (min-aspect-ratio: 21/20) {
  /* 가로가 더 긴 화면(PC 모니터) — 세로 게임은 기둥으로 */
  #game { width: calc(100dvh * 0.75); }
}

/* ===== 상단 자원바 (반투명 오버레이 — 손삼풍) ===== */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--top-h) + var(--sat));   /* 상태바만큼 키우고 내용은 그 아래부터 */
  display: flex; flex-direction: column;
  padding: var(--sat) 1.2% 0;   /* ⚠️단축 padding이 padding-top을 덮는 사고 — 안전영역은 반드시 여기 합쳐 쓸 것 (2026-06-08 캡처로 확정) */
  /* 붉은 나무 텍스처 기각(2026-06-08 사용자 — 칩과 따로 놂) → 어두운 반투명 단색 */
  background: linear-gradient(180deg, rgba(22,15,8,.97), rgba(22,15,8,.9));
  border-bottom: 1px solid rgba(212,175,91,.35);
  box-shadow: 0 2px 8px #00000070;
  transition: transform .25s ease;   /* 스와이프 접기/펴기 — 세로 스와이프만 감지 (가로는 자원바 스크롤) */
  touch-action: pan-x;
  z-index: 10; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.tb-top { display: flex; align-items: center; gap: 8px; height: 46px; flex: none; }
.profile { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.avatar {   /* 나라 메달 아트 (avatar_wei·shu·wu.png — 이미지는 main.js가 GAME.nation 따라 지정) 2026-06-12 */
  width: 36px; height: 36px; flex: none;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.profile-info { font-size: 11px; line-height: 1.3; }
.profile-info .lv { font-weight: 700; color: var(--gold); }
.exp-bar { width: 54px; height: 5px; background: #00000055; border-radius: 3px; overflow: hidden; margin-top: 2px; border: 1px solid #00000060; }
.exp-fill { height: 100%; width: 35%; background: linear-gradient(90deg, #8fd14f, #4caf50); }

/* 성 이름·좌표 드롭다운 */
.city-select {
  flex-shrink: 1; min-width: 0; max-width: 42%;
  padding: 4px 12px; border-radius: 8px; cursor: pointer;
  background: linear-gradient(180deg, #14100a, #241a10); border: 1px solid #7a5c30;
  color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 1px 2px #00000080;
}
.city-select .coord { color: #b09a78; font-weight: 400; font-size: 11px; }

/* 윗줄 우측: 무훈·원보·홈 */
.tb-top-right { display: flex; align-items: center; gap: 9px; margin-left: auto; padding-right: 4px; flex-shrink: 0; }   /* 주공의성 제거로 생긴 여유 — 간격 넉넉히 (2026-06-08) */
.mini-res {
  display: flex; align-items: center; gap: 3px; font-size: 11px; color: #f3e9d2;
  background: linear-gradient(180deg, #14100a, #241a10); border: 1px solid #7a5c30;
  border-radius: 12px; padding: 2px 8px 2px 5px; box-shadow: inset 0 1px 2px #00000080;
}
.mini-res .mr-icon { font-size: 13px; }
.mini-res .gem-icon { width: 21px; height: 21px; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* 자원바 = 3칩 × 2줄 (2026-06-08 사용자 확정 — 정확한 수치 표시, 스크롤·잘림 없음) */
.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 4px; flex: none; padding-bottom: 3px; }
.res {
  display: flex; align-items: center; gap: 3px;
  min-width: 0;
  background: linear-gradient(180deg, #14100a, #241a10);
  border: 1px solid #7a5c30;
  border-radius: 13px; padding: 3px 6px 3px 3px;
  font-size: 11px; white-space: nowrap;
  box-shadow: inset 0 1px 2px #00000090, 0 1px 1px #ffffff10;
}
.res .res-icon {
  flex: none;
  font-size: 15px; width: 20px; height: 20px;
  display: grid; place-items: center;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.res .res-val { font-variant-numeric: tabular-nums; color: #f3e9d2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }

.topbar-btns { display: flex; gap: 4px; flex-shrink: 0; }
.icon-btn, .float-btn {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--accent);
  background: #00000050; color: var(--text); font-size: 15px; cursor: pointer;
}
.icon-btn:active, .float-btn:active { background: var(--accent); }
/* 홈버튼 = 성문 메달 아트 (btn_home.png) 2026-06-12 — 눌림은 축소 효과로 (배경색 덮어쓰기 방지) */
.icon-btn.home-btn, .icon-btn.home-btn:active {
  border: none; font-size: 0;
  background: url('../assets/ui/btn_home.png') center / contain no-repeat;
}
.icon-btn.home-btn:active { transform: scale(.9); }

/* ===== 중앙 성 뷰 — 상·하단 바 "사이"에 배치 (2026-06-08: 바가 불투명 아트가 되어
   뒤에 깔 이유 없어짐 + 무대가 바에 가려지던 문제(관아 가림) 근본 해결) ===== */
#cityview {
  position: absolute; left: 0; right: 0;
  top: calc(var(--top-h) + var(--sat));
  bottom: calc(var(--nav-h) + var(--sab));
  z-index: 1; overflow: hidden;
  transition: top .25s ease, bottom .25s ease;
}
/* ★바 스와이프 접기 (2026-06-08): 하단바 아래로 훑기=숨김/위로=복귀, 상단바 위로=숨김/아래로=복귀.
   14px 손잡이만 남겨 다시 훑을 수 있게. 성 뷰가 그만큼 넓어짐 */
#game.top-hidden #topbar { transform: translateY(-100%); }   /* 흔적 없이 전부 (복귀 = 화면 위쪽 아래로 훑기) */
#game.top-hidden #cityview { top: 0; }
/* 상태바 가림막 — 항상 존재 (바 있을 땐 같은 색이라 안 보이고, 바를 올리면 시계 뒤 어두운 띠로 작동) */
#game::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: var(--sat); z-index: 300; pointer-events: none;
  background: rgba(6, 4, 2, .98);
}
#game.nav-hidden #bottomnav { transform: translateY(calc(100% - 14px)); }
#game.nav-hidden #cityview { bottom: calc(14px + var(--sab)); }
/* ★성 = 고정 비율 "무대" (2026-06-08 잘림 근본 해결)
   cover(화면에 맞춰 자르기)는 기기마다 다르게 잘리고 이름표가 어긋남
   → 아트 비율(863:1822) 그대로, 화면 안에 통째로 들어가게(contain) 중앙 배치.
   건물 이름표 좌표(%)는 이 무대 기준이라 어느 기기서든 그림과 일치.
   ★아트 교체 시 파일명 버전업 (그림 하루 캐시) + 비율 다르면 aspect-ratio 갱신 */
#cityview { background: #14100a; }
/* ★가로 꽉 채움 모드 (2026-06-08 — v5 아트 전제):
   그림 구도 자체가 "성 = 가운데 절반 / 위아래 = 잘려도 되는 성 밖 풍경"이라
   가로를 어느 폰이든 꽉 채우고, 기기 비율에 따라 위아래 풍경만 더/덜 보임.
   검은 띠·흐림 띠 없음. ★아트 교체 시 파일명 버전업 + 같은 구도 유지할 것 */
#city-ground {
  /* cover 동작: 화면(성 영역)이 어떤 모양이 되든 그림이 늘어나 빈틈 없이 덮음
     (바 접힘으로 세로가 길어지면 가로 풍경이 살짝 잘림 — 위아래·좌우 가장자리는 버려도 되는 구도) */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: auto; height: auto; min-width: 100%; min-height: 100%;
  aspect-ratio: 863 / 1822;
  background-image: url('../assets/bg/city_main_v5.jpg');
  background-size: 100% 100%;
  background-color: #b9a06a;
}
#buildings { position: absolute; inset: 0; }

/* 건물 — 배경 위 절대좌표 배치, 일러스트 스프라이트 */
.building {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(14% * var(--scale, 1));
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform .1s;
}
/* 배경에 이미 그려진 건물: 투명 클릭영역(건물 크기) + 중앙 이름표
   ★클릭영역 = 구역 전체 크기로 넓게 (2026-06-08 사용자: 이름 주위만 눌려서 좁음) */
.building.label-only { width: calc(30% * var(--scale, 1)); }
.building.label-only .b-art {
  display: block; background: none; filter: none;     /* 투명한 클릭영역 */
}
.building.label-only .b-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 3px 11px;
}
.building.label-only:hover .b-label { box-shadow: 0 0 8px #ffe9a8, 0 2px 5px #00000070; }
.building.label-only:active { transform: translate(-50%, -50%) scale(0.94); }
.building:hover { z-index: 5; }
.building:active { transform: translate(-50%, -50%) scale(0.95); }
.building .b-art {
  width: 100%; aspect-ratio: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.4));
  transition: filter .1s;
}
.building:hover .b-art { filter: drop-shadow(0 0 8px #ffe9a8) drop-shadow(0 5px 5px rgba(0,0,0,0.4)); }
/* ===== 카테고리 탭 (심플: 반투명 띠 + 흰글씨, 활성만 파랑) ===== */
.ptab-bar {
  display: flex; gap: 2px; margin: 8px 2px 8px; flex: none;
  background: rgba(20,12,4,.3); border-radius: 8px; padding: 3px;
}
.ptab {
  flex: 1; text-align: center; min-width: 52px;
  padding: 7px 6px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: #e8dcc2;
  font-size: 13px; font-weight: 600;
  transition: all .1s;
}
.ptab:hover { background: rgba(255,255,255,.06); }
.ptab.active {
  background: linear-gradient(180deg, #4f93dc, #2c66ab);
  color: #fff; font-weight: 700;
  box-shadow: 0 1px 3px #00000050;
}
.ptab-content { min-height: 120px; }
/* 페이지 분할(스크롤0) — 가변목록을 가용높이에 맞춰 페이지로 나눔. .paged면 탭내용이 남은 높이를 꽉 채우고 안쪽 스크롤 없이 현재 페이지만 표시 */
.ptab-content.paged { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pg-head { flex: none; }
.pg-list { flex: 1 1 0; min-height: 0; position: relative; overflow: hidden; }
.pg-bar { flex: none; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 4px; }
.pg-bar button {
  background: linear-gradient(180deg, #3a2c1a, #241a10); color: var(--gold);
  border: 1px solid #7a5c30; border-radius: 8px; width: 54px; height: 30px;
  font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px 2px #00000060;
}
.pg-bar button:disabled { opacity: .32; }
.pg-bar .pg-now { font-size: 13px; font-weight: 700; color: var(--text); min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
/* 등급 구분헤더 (끼리끼리 묶기) */
.rank-div { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .5px; margin: 7px 2px 2px; padding-bottom: 2px; border-bottom: 1px solid; }
.rank-div .rd-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tab-placeholder {
  display: grid; place-items: center; min-height: 160px;
  text-align: center; color: #b09a78; font-size: 14px; line-height: 1.8;
}
.tab-placeholder small { color: #8a7659; font-size: 11px; }

/* ===== 시설 리스트 (손삼 1.PNG 구조) ===== */
.facility-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
/* ★폰 밀도 압축 (2026-06-08 세로 전환 — "생산소 4시설이 스크롤 없이" 사용자 지적)
   좁은 화면에선 아이콘·여백·글자를 줄여 줄 높이를 낮춤 */
@media (max-width: 599px) {
  .srow { gap: 7px; padding: 6px 8px; }
  .facility-list { gap: 5px; }
  .fac-art { width: 44px; height: 44px; }
  .srow-title { font-size: 13px; }
  .srow-prod, .srow-prod b { font-size: 11px; margin-top: 1px; }
  .srow-desc { font-size: 11px; margin-top: 1px; }
  ul.cost { gap: 7px; }
  ul.cost li, ul.cost li.time, .time { font-size: 11.5px; }
  .srow-act { min-width: 64px; gap: 3px; }
  .fac-btn { padding: 5px 12px; font-size: 12px; }
  .ptab { font-size: 12px; padding: 6px 4px; min-width: 44px; }
  #panel-body h2 { font-size: 15px; }
  /* 지도: 폰에선 화살표 버튼 숨김 + 지도 축소 — 좌표·찾기까지 스크롤 없이 (2026-06-08 재조정) */
  .map-nav [data-mv] { display: none; }
  .map-btns { margin: 3px 0; }
  .map-side .sec-title { margin-top: 2px; font-size: 12px; }
  .map-grid { max-height: min(38vh, 420px); max-width: min(38vh, 420px); }
  #find-res .find-row { margin: 1px 0; font-size: 11px; }
}

/* ★넓은 화면(폴드 펼침·태블릿) = "남는 공간엔 더 보여주기" (2026-06-08 확정 원칙) */
@media (min-width: 600px) {
  .facility-list { display: grid; grid-template-columns: 1fr 1fr; }
  .map-wrap { flex-direction: row; align-items: flex-start; }
  .map-wrap .map-grid { order: 0; }
  .map-grid { width: auto; height: min(72vh, 590px); }
  .map-side { flex: 1; }
}
.facility {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #3a2c1d, #2a2014);
  border: 1px solid #6b4f2e; border-radius: 10px; padding: 8px;
}
/* 건물/병종 아이콘 — 손삼처럼 프레임 없이 배경에 바로 (일러스트 투명배경) */
.fac-art {
  position: relative; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 6px;
  background-size: contain; background-position: center bottom; background-repeat: no-repeat;
  border: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
/* 기술 아이콘 — 투명 PNG, 줄 위에 바로 (손삼 techicon 방식) */
.fac-art.tech-icon {
  background-size: contain; background-position: center;
  width: 52px; height: 52px;
}

/* 병사 타일 — 손삼 병사 썸네일 방식: 밝은 바탕이 통째로 들어간 정사각 썸네일 + 테두리 */
.fac-art.sol-tile {
  border: 2px solid #4a3a22;
  box-shadow: 0 1px 3px #00000080;
  border-radius: 5px;
  filter: none;
  background-size: cover;
  background-position: center;
}
.fac-art.no-art {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, #4a3a26, #4a3a26 6px, #413222 6px, #413222 12px);
  font-size: 9px; color: #b09a78;
}
.fac-lv {
  position: absolute; top: -6px; left: -6px;
  background: var(--gold); color: #3a2a10; font-weight: 700;
  font-size: 9px; border-radius: 8px; padding: 0 5px; border: 1px solid #00000050;
}
.fac-info { flex: 1; min-width: 0; }
.fac-name { font-weight: 700; color: var(--gold); font-size: 14px; }
.fac-name small { color: #d8c9a8; font-weight: 400; font-size: 11px; }
.fac-prod { font-size: 12px; margin-top: 3px; }
.fac-time { font-size: 11px; opacity: .7; margin-top: 2px; }
/* 버튼 — 손삼 funcbutton 1:1: 빨간 버튼 + 흰 글씨 (제일 눈에 띄는 요소) */
.fac-btn {
  flex-shrink: 0; padding: 6px 16px; border-radius: 7px;
  border: 1px solid #6e0f08;
  background: linear-gradient(180deg, #e85a3a 0%, #c4321c 50%, #9c1f10 100%);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: inset 0 1px 0 #ff9d7a60, 0 1px 3px #00000080;
  text-shadow: 0 1px 2px #00000090;
}
.fac-btn:active { transform: scale(0.95); }

/* 건물 라벨 (배경 위, 레벨뱃지 포함) */
.building .b-label {
  margin-top: -8px; position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: clamp(10px, 1.5vw, 14px); font-weight: 800; color: var(--gold);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  background: linear-gradient(180deg, rgba(45,33,20,.96), rgba(28,20,11,.96));
  padding: 3px 11px; border-radius: 12px; white-space: nowrap;
  border: 1px solid #8a6a3a; box-shadow: 0 2px 6px #000000aa;
}
.building .b-lv {
  flex-shrink: 0;
  width: 17px; height: 17px; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffe07a, #e0a93c);
  color: #2a1c08; font-weight: 900; font-size: 11px;
  border-radius: 50%; border: 1.5px solid #4a3416;
  text-shadow: none; box-shadow: 0 1px 2px #000000aa;
}

/* 사이드 플로팅 */
#side-float { position: absolute; right: 1%; top: 8%; display: flex; flex-direction: column; gap: 6px; }

/* ===== 하단 메뉴 네비 (반투명 오버레이 — 손삼 아이콘 10개) ===== */
#bottomnav {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + var(--sab));   /* 고정 높이 + 홈바 안전영역 */
  min-height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1px; padding: 2px 4px calc(2px + var(--sab));   /* ⚠️단축 padding 덮어쓰기 주의 — 홈바 안전영역 포함 */
  /* 어두운 반투명 단색 (상단과 통일 — 붉은 텍스처 기각) */
  background: linear-gradient(180deg, rgba(22,15,8,.9), rgba(22,15,8,.97));
  border-top: 1px solid rgba(212,175,91,.35);
  z-index: 10;
  transition: transform .25s ease;   /* 스와이프 접기/펴기 (2026-06-08) */
  touch-action: none;
}
.nav-item {
  flex: 1; height: 100%; min-width: 0; cursor: pointer; border: none;
  background-color: transparent;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transition: transform .08s;
}
.nav-item:active { transform: scale(0.92); }
.nav-item:hover { filter: brightness(1.12); }

/* ===== 건물 진입 시: 자원 2행만 숨김 (1행·하단메뉴는 유지) ===== */
.in-building .resources { display: none; }
.in-building #topbar {
  background:
    repeating-linear-gradient(90deg, rgba(255,220,150,.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #302213f5, #221810);
  border-bottom: 2px solid var(--gold);
}

/* ===== 건물 화면 (1열 아래 ~ 하단메뉴 위) ===== */
#panel-overlay {
  position: absolute; inset: 0;   /* 부모(#cityview)가 이미 바 사이 영역 */
  z-index: 100;
  /* 양피지 세로판 (2026-06-08 아트) */
  background:
    linear-gradient(rgba(20,12,4,.04), rgba(20,12,4,.1)),
    url('../assets/ui/panel_bg_v.jpg');
  background-size: cover; background-position: center;
  display: flex; flex-direction: column;
  animation: panel-in .18s ease-out;
  box-shadow: inset 0 2px 0 #6b4f2e, inset 0 0 50px #00000050;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#panel-overlay.hidden { display: none; }
#panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 6px 14px 10px; position: relative; overflow: hidden;
  margin: 0; border: none;
  background: transparent;
}
/* 헤더 = [← 성으로][제목] 한 줄 (2026-06-08 공간 절약) */
#panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; flex: none; }
#panel-close {
  flex: none;
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--accent);
  background: linear-gradient(180deg, #4a3622, #33260f); color: var(--text);
  cursor: pointer; font-size: 12px; font-weight: 600;
}
#panel-close:active { transform: scale(0.96); }
/* 제목 = 양피지 위에 직접 떠서 금색은 묻힘 → 진한 갈색 음각 느낌(밝은 하이라이트)로 대비 확보 */
#panel-title { color: #2a1808; font-size: 17px; margin: 0; font-weight: 800; text-shadow: 0 1px 0 rgba(255,246,222,.5); }
#panel-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
#panel-body h2 { color: #2a1808; margin-bottom: 4px; font-size: 17px; font-weight: 800; text-shadow: 0 1px 0 rgba(255,246,222,.5); }
#panel-body h2 small { color: #6b4a22 !important; }   /* 제목 옆 'Lv N' — 양피지에서 읽히게 진갈색 */
#panel-body .desc { font-size: 12px; opacity: .85; margin-bottom: 12px; line-height: 1.5; }
#panel-body .row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #ffffff15; }
#panel-body .btn {
  margin-top: 14px; width: 100%; padding: 10px; border-radius: 8px;
  background: linear-gradient(180deg, #e0b961, #b8893c); border: none;
  color: #3a2a10; font-weight: 700; font-size: 14px; cursor: pointer;
}

/* ============================================================
   건물 화면 공통 컴포넌트 (손삼 구조 — 심플·반투명)
   ============================================================ */

/* 손삼 tooltip2 풍 줄 — 거의 불투명한 진갈색 판 (원본 가독성 1:1) */
.srow {
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(180deg, rgba(52, 30, 12, .92), rgba(35, 20, 8, .94));
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .08);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 6px;
}
.srow.dim { opacity: .62; }
.srow-body { flex: 1; min-width: 0; }
/* 이름 = 흰색(눈에 띄게), 수치만 노랑 강조 */
.srow-title { font-size: 15px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000; }
.srow-title b { color: #ffe14d; }
.srow-title b:first-of-type { color: #fff; }
.srow-prod { font-size: 13px; margin-top: 3px; color: #fff; text-shadow: 0 1px 2px #000; }
.srow-prod b { color: #ffe14d; font-size: 13.5px; }
/* 설명 = 줄 수 제한 없이 전부 자동 줄바꿈 (자르기 전면 폐기 — 2026-06-08 사용자 확정) */
.srow-desc { font-size: 12px; margin-top: 3px; color: #fff; opacity: .92; line-height: 1.4; white-space: normal; word-break: break-word; text-shadow: 0 1px 2px #000; }
.srow-desc.lack, .lack b, .lack { color: #FFD17A; }
/* 임의 설계 수치 표식 — 회수 원본이 아니라 임시값(추후 밸런싱)임을 인게임에 명시 (2026-06-08 사용자) */
.tmp-tag { font-size: 10px; color: #e7b24a; background: rgba(231,178,74,.12); border: 1px solid rgba(231,178,74,.45);
  border-radius: 4px; padding: 0 4px; margin-left: 3px; white-space: nowrap; vertical-align: middle; font-weight: 400; }
.todo-tag { font-size: 10px; color: #c98a8a; background: rgba(201,138,138,.12); border: 1px solid rgba(201,138,138,.45);
  border-radius: 4px; padding: 0 4px; margin-left: 3px; white-space: nowrap; vertical-align: middle; font-weight: 400; }
.srow-act {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  min-width: 76px;
}

/* 자원 인라인 아이콘 (아트) */
.ri {
  display: inline-block; width: 25px; height: 25px; vertical-align: -7px; margin-right: 3px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ri-pop { font-style: normal; font-size: 13px; width: auto; }
.ri-clock { width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }

/* 비용 줄: 식량·목재·철·동전 + 시간 (부족 = #FFD17A) */
ul.cost { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 13px; align-items: center; }
ul.cost li { display: flex; align-items: center; }
ul.cost li .r-name { margin: 0 5px 0 2px; }   /* 보상 자원 이름 — flex가 공백을 먹어 "식량50"으로 붙는 것 방지 (2026-06-12) */
ul.cost li b { color: #fff; text-shadow: 0 1px 2px #000; }
ul.cost li.lack b { color: #FFD17A; }
ul.cost li.time, .time { color: #6fc8ff; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; text-shadow: 0 1px 2px #000; }
ul.cost.center { justify-content: center; }

/* 쿨다운(남은시간) 표시 — 노란색 */
.cd-box {
  background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 235, 190, .25);
  border-radius: 6px; padding: 4px 9px; font-size: 13px; font-weight: 700; color: #ffd24a;
  font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 1px 2px #000;
}
.cd-text, #enh-cd { font-size: 12px; color: #ffd24a; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 작은 버튼/보조 버튼 */
.fac-btn.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.fac-btn.btn-dim { background: linear-gradient(180deg, #8a7659, #5c4c35); border-color: #463a28; color: #f0e6d0; }

/* 섹션 제목 (손삼 iphonetitle 풍 띠) */
.sec-title {
  font-size: 13px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000;
  background: rgba(28, 16, 6, .85); border-radius: 6px;
  padding: 7px 10px; margin: 10px 0 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sec-title b { color: #ffd54a; }
.sec-title .sec-cols { margin-left: auto; display: flex; gap: 46px; font-weight: 700; color: #fff; }
.canvas-box {
  background: rgba(35, 20, 8, .9); border: none;
  border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
.center { text-align: center; }
.center-btn { text-align: center; margin: 10px 0 4px; }
.dim-text { color: #fff; opacity: .8; font-size: 11.5px; font-style: normal; text-shadow: 0 1px 2px #000; }
.ex-row, .troop-row, .hero-row, .enh-item { color: #fff; text-shadow: 0 1px 2px #000; }

/* 표 (생산계획·현황·정보) */
.s-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; background: rgba(35,20,8,.9); border-radius: 6px; }
.s-table th { font-size: 12px; color: #fff; font-weight: 700; padding: 6px; text-align: left; background: rgba(20,11,4,.9); }
.s-table td > b:first-child { color: #fff; }
.s-table td { padding: 7px 6px; border-bottom: 1px solid rgba(255, 235, 190, .1); vertical-align: middle; }
.s-table b { color: #ffd54a; }
.s-table input { width: 44px; }
.info-table td { border-bottom: none; padding: 3px 8px; }
.fac-table .fac-ops { text-align: right; white-space: nowrap; }
.more-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--accent);
  background: #00000050; color: var(--text); cursor: pointer; font-size: 13px; margin-left: 6px;
}
.ops { display: inline-flex; gap: 5px; }

/* 입력/select 공통 */
.s-input, .spinner input, .plan-per, .s-select {
  background: rgba(0, 0, 0, .5); border: 1px solid #7a5c30; border-radius: 5px;
  color: #ffe9b8; font-size: 12.5px; padding: 4px 6px; width: 110px;
}
.s-input.num { width: 52px; text-align: center; }
.plan-per { width: 42px; text-align: center; }
.s-select { width: auto; max-width: 230px; }

/* 스피너 [-][입력][+][MAX] */
.spinner { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; }
.spinner input { width: 64px; text-align: center; }
.spin-btn {
  width: 26px; height: 24px; border-radius: 5px; border: 1px solid #7a5c30;
  background: linear-gradient(180deg, #4a3622, #33260f); color: #ffe9b8;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.spin-btn.spin-max { width: auto; padding: 0 8px; font-size: 10.5px; font-weight: 700; }
.spin-btn:active { background: var(--accent); color: #2a1c08; }

/* 교환 줄 */
.s-head4, .s-headN {
  display: flex; gap: 10px; font-size: 12px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000;
  background: rgba(28, 16, 6, .85); border-radius: 6px; padding: 6px 10px; margin: 8px 0 6px;
}
.s-head4 span { flex: 1; }
.s-headN span { flex: 1; text-align: center; }
.ex-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(255,235,190,.08); font-size: 12.5px; flex-wrap: wrap; }
.ex-row .spinner { margin-top: 0; }
.ex-give, .ex-get { display: inline-flex; align-items: center; min-width: 64px; }
.ex-have { color: #a8987a; font-size: 11.5px; }
.ex-arrow { color: #9fd8ff; font-weight: 700; }
.ex-get b { color: #8fd14f; }

/* 확인 대화상자 / 팝업 */
#popup-overlay, #promo-overlay {
  position: absolute; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .55);
}
/* 확인창은 항상 최상위 (+상점 위에서 물어봄 — 손삼 동일 흐름) */
#confirm-overlay {
  position: absolute; inset: 0; z-index: 400; display: none;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .55);
}
/* 경고 팝업 (거부·경고류) — 확인창 위에서도 뜰 수 있게 한 단계 더 위 */
#warn-overlay {
  position: absolute; inset: 0; z-index: 450; display: none;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .55);
}

/* 로그인 화면 (net.js — ★구도: 제갈량 위(얼굴 보이게), 로그인 상자 아래 (2026-06-08 사용자 확정)) */
#login-overlay {
  position: absolute; inset: 0; z-index: 350;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6%;
  background: url('../assets/ui/login_bg_v2.jpg') center / cover no-repeat;   /* 코에이풍 — 제갈량 위·로그인 아래 구도 (파일명 버전업 규칙) */
}
.login-box {
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  background: linear-gradient(180deg, rgba(42, 31, 18, .88), rgba(26, 18, 9, .92));
  border: 1px solid #8a6a3a; border-radius: 12px; box-shadow: 0 8px 30px #000c;
  padding: 24px 30px; width: 270px;
  backdrop-filter: blur(2px);
}
.login-title { font-size: 22px; font-weight: 700; color: var(--gold); letter-spacing: 2px; }
.login-title small { font-size: 12px; color: #b89b6a; font-weight: 400; }
.login-server { font-size: 12px; color: #d8c49a; background: rgba(0, 0, 0, .3); padding: 2px 12px; border-radius: 10px; border: 1px solid #6b4f2e; }
.login-box .s-input { width: 100%; box-sizing: border-box; text-align: left; }
.login-btns { display: flex; gap: 10px; margin-top: 4px; }
.login-msg { font-size: 12px; color: #ffd17a; min-height: 16px; text-align: center; }

/* 나라 선택 (첫 로그인 — 위/촉/오 1택) */
#nation-overlay {
  position: absolute; inset: 0; z-index: 360;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 5% 4%;
  background: radial-gradient(120% 90% at 50% 30%, #2a1f12 0%, #160d05 70%, #0b0703 100%);
}
.nation-head { text-align: center; }
.nation-title { font-size: 21px; font-weight: 700; color: var(--gold); letter-spacing: 2px; }
.nation-sub { font-size: 11.5px; color: #c9b487; margin-top: 4px; }
.nation-cards { display: flex; gap: 10px; width: 100%; max-width: 460px; justify-content: center; }
.nation-card {
  position: relative; flex: 1 1 0; max-width: 132px; aspect-ratio: 341 / 1000;
  border: 1.5px solid #6b4f2e; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #1a120a; padding: 0; transition: transform .12s, border-color .12s, box-shadow .12s;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.nation-card:active { transform: scale(0.97); }
.nation-art { position: absolute; inset: 0; background-size: cover; background-position: center top; }
/* 아트 없을 때(도착 전)도 나라색이 보이게 — 아트가 위에 덮음 */
.nation-wei { background: linear-gradient(180deg, #1c3b6e, #0d1c34); }
.nation-shu { background: linear-gradient(180deg, #1c5e3a, #0c2a1a); }
.nation-wu  { background: linear-gradient(180deg, #7a1f1c, #350c0b); }
.nation-cap {
  position: relative; z-index: 1; text-align: center; padding: 14px 4px 8px;
  font-size: 13px; color: #fff; line-height: 1.35;
  background: linear-gradient(0deg, rgba(0,0,0,.92) 30%, rgba(0,0,0,0));
}
.nation-kr { font-size: 16px; color: #fff; text-shadow: 0 1px 3px #000; }   /* 한글 나라명 = 헤드라인 (위/촉/오 한자 못 읽는 사용자 기준) */
.nation-cap small { font-size: 11px; color: #c9b487; margin-left: 3px; }
.nation-lord { font-size: 11px; color: #ffd9a0; }
.nation-card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 6px 20px #000a; transform: translateY(-3px); }
.nation-pick-desc { font-size: 12.5px; color: #ffd17a; min-height: 18px; text-align: center; }
#nation-overlay .fac-btn { padding: 9px 26px; font-size: 14px; }

/* 대화 (채팅) */
.chat-line { margin: 4px 0; font-size: 12.5px; line-height: 1.45; word-break: break-all; }

/* 공지 띠 (운영자 공지 — 자원바 아래 상시 표시, 팝업들보다는 아래) */
/* 연결 끊김 띠 (자동 재연결 중 — net.js connBar) 2026-06-12 */
#conn-bar {
  position: absolute; top: var(--top-h); left: 0; right: 0; z-index: 295;
  text-align: center; font-size: 12px; color: #ffd9c9; padding: 4px 12px;
  background: linear-gradient(90deg, transparent, rgba(90, 22, 14, .9) 15%, rgba(90, 22, 14, .9) 85%, transparent);
  text-shadow: 0 1px 2px #000; pointer-events: none;
}
#notice-bar {
  position: absolute; top: var(--top-h); left: 0; right: 0; z-index: 290;
  text-align: center; font-size: 12px; color: #ffe1a0; padding: 4px 12px;
  background: linear-gradient(90deg, transparent, rgba(40, 24, 8, .85) 15%, rgba(40, 24, 8, .85) 85%, transparent);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

.confirm-box {
  background: linear-gradient(180deg, #3a2c1d, #241a10);
  border: 1px solid #8a6a3a; border-radius: 10px; box-shadow: 0 6px 24px #000c;
  padding: 18px 22px; max-width: 78%; font-size: 13px; line-height: 1.6; color: #f0e6d0;
}
.confirm-box b { color: var(--gold); }
.confirm-btns { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }

/* 강화/합성 */
.sub-bar { margin: 0 0 8px; }
.ptab.sub { font-size: 12px; padding: 5px 4px; min-width: 40px; }
.enh-wrap { display: flex; gap: 10px; align-items: flex-start; }
.enh-list { flex: 1; min-width: 0; }
.enh-detail { flex: 1.2; }
.enh-item {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 3px; background: rgba(20,12,4,.3);
}
.enh-item.sel { border-color: var(--gold); background: rgba(60, 44, 20, .55); }
.enh-item input { accent-color: #e0b961; }
.enh-item.locked { opacity: .35; pointer-events: none; }
.fuse-tier { margin-left: auto; font-size: 11px; color: #c9b98e; white-space: nowrap; }
.item-icon { border-radius: 6px; flex-shrink: 0; display: block; }
.enh-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.enh-btns { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* 강화/합성 결과 아트 배너 */
.result-art {
  position: relative; margin: 12px auto 0; max-width: 200px;
  border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px #000a;
  animation: enhPop .28s ease-out;
}
.result-art img { display: block; width: 100%; height: auto; }
.result-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 6px 6px;
  text-align: center; font-size: 16px; font-weight: 800; line-height: 1.2;
  text-shadow: 0 2px 4px #000, 0 0 6px #000;
  background: linear-gradient(transparent, #000b);
}
.result-cap b { font-size: 19px; }
.result-cap.ok   { color: #ffe08a; }
.result-cap.fail { color: #d9b3b0; }
@keyframes enhPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trend-up { color: #8fd14f; font-weight: 700; }
.trend-down { color: #ff8a7a; font-weight: 700; }
.fuse-boxes { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.fuse-box {
  width: 64px; height: 64px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .5); border: 1px dashed #7a5c30;
  font-size: 20px; color: #7a6a4a; text-align: center; padding: 2px;
}
.fuse-box.filled { font-size: 12px; font-weight: 700; border-style: solid; padding: 0; overflow: hidden; cursor: pointer; position: relative; }
.fuse-box.filled .item-icon { width: 100%; height: 100%; border-radius: 8px; }
.fuse-x {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 18px;
  text-align: center; font-size: 12px; color: #fff; background: #b03a2eee;
  border-radius: 50%; opacity: 0; transition: opacity .15s;
}
.fuse-box.filled:hover .fuse-x { opacity: 1; }
.fuse-box.filled:hover { box-shadow: 0 0 8px #ff8a7a99; }

/* 아이템 획득 결과 팝업 (합성 성공 등) */
.gain-title { text-align: center; font-size: 18px; font-weight: 900; color: #ffe08a; text-shadow: 0 2px 4px #000; margin-bottom: 8px; }
.gain-art { display: block; width: 190px; max-width: 70%; margin: 0 auto; border-radius: 10px; box-shadow: 0 3px 10px #000a; animation: enhPop .28s ease-out; }
.gain-item { text-align: center; margin-top: -34px; position: relative; }
.gain-item.no-art { margin-top: 6px; }
.gain-item .item-icon { margin: 0 auto 6px; border: 2px solid #ffd24a; box-shadow: 0 2px 8px #000; }
.gain-item p { margin: 2px 0; }

/* 무장 */
/* 통합 이미지 — 자리지킴(각 요소의 배경)이 로딩 중 보이고, 로드되면 이미지가 덮음. 캐시는 브라우저 네이티브(재렌더 깜빡임 없음).
   thumb=작게 쓰는 곳은 썸네일 우선(없으면 onerror로 원본 폴백) */
.gimg { display: block; object-fit: cover; }
.gimg.round { border-radius: 50%; }
/* 무장 포커 카드 (네모 + 등급 테두리색 + 좌하단 등급/문양 뱃지) */
.hero-card {
  position: relative; display: inline-block; flex-shrink: 0; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #5a4a32, #2c2014);   /* 로딩 중 자리지킴 */
}
.hero-card .hero-face {
  width: 100%; height: 100%; display: block; border: 0; border-radius: 0;
  object-fit: cover; object-position: center top;
}
/* 좌상단 나라 깃발 + 하단 등급 별 */
.hero-flag {
  position: absolute; left: 1%; top: 1%; z-index: 2; pointer-events: none;
  width: 30%; height: auto;
  filter: drop-shadow(0 1px 2px #000b);
}
.hero-stars {
  position: absolute; left: 0; right: 0; bottom: 4%; z-index: 2; pointer-events: none;
  display: flex; justify-content: center; gap: 2%;
}
.hero-stars img { width: 17%; height: auto; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000); }   /* 11→17% (2026-06-12 사용자 — 별이 작아 안 보임) */
/* 둥근 얼굴(구버전) — ?? 자리표시·기타 호환 */
.hero-face {
  display: inline-block; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #5a4a32, #2c2014);
  border: 2px solid #fff; object-fit: cover; object-position: center top; overflow: hidden;
  flex-shrink: 0;
}
/* 미지의 무장 자리(?? 텍스트) — img가 아니라 글자라 그리드 가운데정렬 복구 */
.hero-face.unknown { display: inline-grid; place-items: center; width: 56px; height: 56px; font-size: 22px; font-weight: 800; border-color: #7a6a4a; color: #7a6a4a; }
.hero-row { align-items: center; font-size: 12px; }
.hero-row > span { flex: 1; text-align: center; }
.hero-row b { color: #ffe9b8; }
.hero-pick-row { cursor: pointer; align-items: center; }
.hero-pick-row:hover { border-color: var(--gold); }
.hero-detail { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.hd-left { flex: 1.1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hd-stats { width: 100%; font-size: 12.5px; line-height: 1.7; }
.hd-stats b { color: #ffe9b8; }
.hd-btns { display: flex; gap: 6px; }
.hd-right { flex: 1; }
/* 장비 패널 (아트) — 십자 5슬롯 핫스팟 */
.equip-panel {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 2 / 3;
  margin: 6px auto 8px;
  background-image: url('../assets/ui/equip_panel.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* 주사위(자질 리롤) 패널 */
.enl-wrap { margin-top: 6px; }
.enl-cols { display: flex; gap: 10px; }
.enl-col {
  flex: 1; font-size: 14px; line-height: 1.55;
  padding: 8px 12px; min-height: 0;
}
.enl-col .sec-title { font-size: 14px; padding: 4px 8px; }
.enl-col b { color: #ffd54a; font-size: 16.5px; }
.enl-col .dim-text { font-size: 13px; }
.enl-col .dim-text b { font-size: 15px; }
.enl-grade {   /* 자질 등급 메달 아트 (grade_s·a·b·c.png) 2026-06-12 */
  width: 28px; height: 28px; vertical-align: middle; margin-left: auto;
}
.enl-wrap .confirm-btns .fac-btn { padding: 9px 20px; font-size: 14px; }
.enl-opt {
  display: block; text-align: center; margin-top: 10px;
  font-size: 12.5px; color: #e8dcc2; text-shadow: 0 1px 2px #000; cursor: pointer;
}
.enl-opt input { accent-color: #e0b961; vertical-align: -2px; }
.hd-right { display: flex; flex-direction: column; }
.hd-right #hd-mode { align-self: flex-end; }
.eq-spot {
  position: absolute; cursor: pointer; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4%;
  font-size: 11px; text-align: center; text-shadow: 0 1px 2px #000;
}
.eq-spot .item-icon { width: 48%; height: auto; border-radius: 8px; }
.eq-spot:hover { box-shadow: 0 0 10px #ffe9a8aa, inset 0 0 8px #ffe9a860; }
.eq-spot.filled { box-shadow: inset 0 0 10px #ffd54a50; }

/* 주막(고용) */
.pub-box { padding: 14px; }
.pub-hero { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }

/* 출전 폼 */
.war-form .sec-title { background: rgba(20, 12, 4, .25); }
.troop-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12.5px; flex-wrap: wrap; }
.troop-row .spinner { margin-top: 0; }

/* + 단축 아이템 버튼 (손삼 promotebutton) — 아트 btn_plus.png 2026-06-12 (+가 그림에 양각돼 있어 글자는 숨김) */
.promo-btn {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: none; color: transparent; font-size: 0; line-height: 1;
  background: url('../assets/ui/btn_plus_v2.png') center / contain no-repeat;
  vertical-align: middle; padding: 0;
}
.promo-btn.sm { width: 18px; height: 18px; }
.promo-btn:active { transform: scale(0.9); }
.promo-box { min-width: 330px; max-height: 80%; overflow-y: auto; }
.promo-box .srow { background: rgba(0, 0, 0, .35); }

/* 옵션 동전 아이콘 */
.opt-coin { background-size: 60% !important; background-repeat: no-repeat; background-position: center; background-color: rgba(0,0,0,.35); }

/* ===== 세로 화면 안내 ===== */
/* (회전 안내 폐기 — 2026-06-08 세로 전환: 세로가 기본이므로 안내 불필요) */
#rotate-hint { display: none !important; }

.hidden { display: none !important; }

/* 가방 (2026-06-07) — 선택판매 모드(행 터치 선택) + 장착중 뱃지 */
.bag-equip { color: #8fd18f; font-size: 11px; margin-left: 6px; }
.srow.bag-pick { cursor: pointer; }
.srow.bag-pick.bag-eq { opacity: .55; }
.srow.bag-sel { box-shadow: inset 0 0 0 2px #ffd24a; background: rgba(255, 210, 74, .12); }

/* 소비품 아이콘 (아트 수급 전 임시 — 이름 첫 자) */
.goods-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid #c9a35b; border-radius: 6px; background: rgba(60, 40, 20, .55); color: #f3e9d2; font-weight: bold; margin-right: 6px; }

/* 좌상단 진행 중 작업 위젯 + 상단바 토지 (2026-06-07) */
/* 손삼 divCityBuildCountdown 회수 (시간색 #FFFC17 = .tooltip b). 세로 전환으로 배치 변경 (2026-06-08 사용자):
   화면 중간(26%)이 건물을 가림 → 최상단(상단바 바로 아래) + 글씨 작게 + 배경/글자 연하게 */
#job-ticker { position: absolute; left: 1.5%; top: calc(var(--top-h) + var(--sat) + 4px); z-index: 50; font-size: 13px; color: rgba(255, 255, 255, .78); max-width: 320px; transition: top .25s ease; }
#game.top-hidden #job-ticker { top: calc(var(--sat) + 4px); }   /* 상단바 접으면 같이 따라 올라감 */
#game.in-building #job-ticker { display: none; }   /* 마을(성 화면)에서만 표시 — 손삼 동일 */
#job-ticker .job-row { background: rgba(0, 0, 0, .16); border: 1px solid rgba(201, 163, 91, .15); border-radius: 5px; padding: 2px 8px; margin: 2px 0; white-space: nowrap; text-shadow: 0 1px 2px #000; display: flex; align-items: center; gap: 5px; }
#job-ticker .job-plus { cursor: pointer; }
#job-ticker .job-row b { color: rgba(255, 252, 23, .82); }
#job-ticker .job-plus { width: 18px; height: 18px; flex: none;   /* 아트 btn_plus_v2 — promo-btn과 통일 2026-06-12 */
  background: url('../assets/ui/btn_plus_v2.png') center / contain no-repeat;
  color: transparent; font-size: 0; opacity: .92; }
.res-label { font-size: 11px; color: #c9a35b; margin-right: 3px; }

/* 임무 상태 색 (손삼 문구: 새로운 임무/임무 수락/임무 완료/완료) */
.q-new { color: #ffd24a; } .q-doing { color: #9fc7ff; } .q-ready { color: #6fe87a; } .q-done { color: #9a8a70; } .q-locked { color: #7a6f60; }

/* ===== 지도 (손삼 f_map — 7×7 그리드 + 우측 패널) ===== */
/* ★세로 기본: 지도 위 / 정보·버튼 아래 (2026-06-08 사용자 확정). 넓은 화면(폴드 펼침)은 아래 미디어쿼리에서 좌우 배치
   (column-reverse 금지 — 스크롤이 바닥에서 시작하는 부작용. order로 순서만 바꿈) */
.map-wrap { display: flex; flex-direction: column; gap: 10px; align-items: stretch; flex: 1; min-height: 0; }
.map-wrap .map-grid { order: -1; }
.map-side { overflow-y: auto; min-height: 0; }   /* 정보·찾기 결과가 길면 이 안에서만 스크롤 — 지도는 항상 보임 */
.map-grid {
  display: grid; grid-template-columns: repeat(11, 1fr); position: relative;
  flex: none; aspect-ratio: 1; width: 100%; height: auto;
  max-height: min(44vh, 500px); max-width: min(44vh, 500px); margin: 0 auto;   /* 정보·버튼까지 스크롤 없이 (2026-06-08) */
  touch-action: none;   /* ★브라우저 스크롤 가로채기 차단 — 드래그·핀치가 지도 전용으로 (찔끔 끊김 해결) */
  border: 2px solid #6b4f2e; border-radius: 8px; overflow: hidden;
  /* 임시: 양피지 톤 워시 (손삼 map.jpg = 차분한 고지도풍 — 새 아트 수급 전 보정) */
  background:
    linear-gradient(rgba(214, 192, 148, .50), rgba(206, 184, 140, .50)),
    url('../assets/map/bg.jpg') center/cover;
}
.map-cell { position: relative; cursor: pointer; }   /* 격자선 제거 — 자연스러운 지면 */
.map-cell:hover { background: rgba(255, 233, 168, .15); }
.map-cell.sel { box-shadow: inset 0 0 0 2px #ffe14d; background: rgba(255, 225, 77, .12); }
.map-cell img { width: 94%; height: 94%; object-fit: contain; position: absolute; inset: 0; margin: auto; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }   /* 지면 그림자 — 붕 뜬 느낌 완화 */
.map-star {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 8px; font-weight: 700; color: #ffe14d;
  text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none;
}
.map-side { flex: 1; min-width: 0; font-size: 13px; }
.map-btns { display: flex; gap: 6px; margin: 6px 0; }
.map-btns .fac-btn { padding: 8px 18px; }   /* 정찰/공격 = 주 행동이라 크게 */
.map-nav { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.map-nav > div { display: flex; gap: 2px; }
.map-nav .fac-btn { padding: 3px 9px; font-size: 12px; }   /* 화살표 = 보조라 작게 */
.map-side .s-input.num { width: 46px; padding: 3px 4px; font-size: 12px; }
.map-side .sec-title { font-size: 12.5px; }

/* 부대 이동 마커 (척후=매/군대=깃발) — 1초 틱 보간 이동 */
.map-troops { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.map-troop { position: absolute; width: 5.5%;   /* 더 작게 — 느낌만 */
  transition: left .15s linear, top .15s linear;   /* 0.15초 틱과 동기 */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }

.map-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-path line { stroke-width: .22; stroke-dasharray: .45 .8; }   /* 아주 작은 점선 */
.map-path line.go { stroke: rgba(120, 230, 140, .8); }     /* 진군 = 초록 */
.map-path line.back { stroke: rgba(255, 110, 90, .8); }    /* 귀환 = 붉은색 */

/* 보고 줄 펼침 작전 버튼 (손삼 [+] 5버튼) */
.wl-ops td { background: rgba(0, 0, 0, .25); }
.wl-ops .fac-btn { margin-left: 4px; }
.wl-ops.hidden { display: none; }

/* 부드러운 드래그: 안쪽 확장 그리드 (사방 1칸 여유 + transform 픽셀 추적) */
.map-gridin { position: absolute; display: grid; will-change: transform; }