/* ⚙ 자동생성(build_css.mjs) — 편집은 style.css(원본)에. px→rem 배율변환됨 */
/* ============================================================
   삼국지(가제) 2단계 — 가로 성 화면 (placeholder)
   * 가로 고정 + 반응형. 아트는 전부 placeholder(나중 교체).
   * 건물/아이콘은 .building / .res 등 구조만 잡아두고,
     배경이미지만 갈아끼우면 실제 아트로 전환되게 설계.
   ============================================================ */

:root {
  /* ★전체 배율 반응형 (2026-07-02 A안): root 글씨크기 = 화면 짧은변(dvmin) 연동. rem로 짠 것은 화면 크면 다 커지고 작으면 작아짐.
     ★전역 밀도 노브 = 이 값. 사용자 "너무 크다"(2026-07-02) → 하향(라오킹 밀도). S24 가로(dvmin≈393)서 ≈13.7px, 폴드펼침 최대 17, 소형 최소 12. */
  font-size: clamp(13px, 3.8dvmin, 24px);   /* 2026-07-03 가로 여유로 한 단계 상향 (세로 밀도압축 완화) */
  --top-h: clamp(64px, 17dvh, 84px);   /* 상단 캡슐 영역(2줄) 높이 — 성뷰는 뒤로 꽉 차고(top:0), 이 값은 캡슐이 뜨는 영역 + 건물패널/티커/토스트 오프셋 (2026-07-01 A안) */
  --top-h-panel: clamp(34px, 8dvh, 44px);   /* 건물/탭 패널 열 때 상단 = 자원만 얇은 띠(프로필줄 숨김) → 패널이 세로로 더 큼 (2026-07-01) */
  --nav-h: clamp(38px, 9dvh, 48px);   /* 하단 메뉴 높이 — 가로용 축소 (2026-07-01, 구 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));
  /* 가로 전환(2026-07-01): 가로에선 노치·펀치홀이 좌/우로 감 → 좌/우 안전영역 추가 */
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --gold: #f5c542;
  /* ★아트·어두운 반투명 위 글씨 = 흰+노랑 두 색만 (2026-07-03 사용자 확정 — 손삼式. 보통 글=흰, 수치·이름·시간 강조=노랑) */
  --ov-w: #fff;
  --ov-y: #ffe14d;
  --ov-r: #ef3b2d;   /* 부족(lack) = 진한 빨강 — 어두운 표면 + 검은 외곽선 위 (구 호박색 FFD17A가 수치 노랑과 안 구분됨 2026-07-03 사용자) */
  --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; }

/* 제목 서체 = 제주한라산 (★사용자 확정 2026-06-12. 무료·OFL — assets/fonts/OFL_JejuHallasan.txt)
   subset 106KB = 게임 코드에 나오는 글자만(tools 없음 — fonttools로 재생성). 동적 텍스트(닉 등)에 없는 글자는 기본 고딕 폴백 */
@font-face {
  font-family: 'JejuHallasan';
  src: url('../fonts/jejuhallasan_sub.woff2') format('woff2');
  font-display: swap;
}
/* 본문 서체 = Cafe24 써라운드 원판(통통한 맛) + 에어 예비 (2026-07-03 사용자 확정 하이브리드).
   원판은 희귀 한글 8,693자가 "속 빈 글자"였음 → 그 등록을 걷어낸 수리본(190KB). 빠진 글자가 나오면
   2순위인 에어(같은 둥근 가족, 희귀 글자만 담은 472KB — 실제 그 글자가 떠야 내려받음)가 대신 그림 = 증발 0·통일성 유지 */
@font-face {
  font-family: 'Cafe24Ssurround';
  src: url('../fonts/cafe24ssurround.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('../fonts/cafe24ssurroundair.woff2') format('woff2');
  font-display: swap;
}
.login-title, #panel-title, #panel-body h2, .nation-title, .ui2 .sec-title.plaque {
  font-family: 'JejuHallasan', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  background: #0d0b08;
  font-family: 'Cafe24Ssurround', 'Cafe24SsurroundAir', "Noto Sans KR", "Malgun Gothic", sans-serif;   /* 원판 우선, 희귀 글자만 에어 (2026-07-03) */
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-touch-callout: none;   /* 모바일 꾹누름 콜아웃(이미지 저장/글자확대경) 차단 — 롱프레스 시 터치 가로채 게임 굳던 것 (2026-07-02) */
}
/* 모든 아이콘(gimg 등)은 <img> — 꾹누르면 네이티브 드래그·저장 메뉴가 떠 터치를 가로챔. 전역 차단(상속 안 되는 user-drag는 img에 직접). */
img { -webkit-user-drag: none; -khtml-user-drag: none; user-select: none; }
/* 글자 선택 전면 차단 — 꾹 누르면 복사/번역 툴바가 떠서 안 사라지던 것 (2026-07-03 사용자. 입력칸만 예외) */
#game, #game * { -webkit-user-select: none; user-select: none; }
#game input, #game textarea { -webkit-user-select: text; user-select: text; }

/* 넓은 화면(폴드 펼침·태블릿·PC)에서 #game(세로 기둥) 양옆 빈 공간 = 검은 띠 대신 분위기 배경.
   세로폰(S24 등)은 #game이 화면을 꽉 채워 이 배경이 안 보임 → S24·폴드 둘 다 자연스럽게. (2026-06-27) */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: #0d0b08 url('../ui/title/login_bg_v3.jpg') center / cover no-repeat;
  filter: blur(0.625rem) brightness(0.4);
  transform: scale(1.1);   /* blur로 가장자리 비치는 것 방지 */
}

/* ===== 게임 컨테이너 — ★세로 전환 (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 2.5rem rgba(0,0,0,0.6);
  overflow: hidden;
}
/* ===== 가로 강제 (2026-07-01 세로→가로 전환) =====
   실기(APK) = AndroidManifest sensorLandscape로 가로 고정.
   웹 = 창이 세로면 #game을 90° 돌려 가로로 표시(테스트 편의). 창이 가로면 base 규칙대로 그대로 꽉 채움.
   ※ 구 "넓은 화면=세로 기둥 레터박스"(min-aspect-ratio:21/20 pointer:fine)는 폐기 — 그게 가로를 세로에 가두던 지점(설계 §9). */
@media (orientation: portrait) {
  #game {
    /* 정석 회전: 원점=좌상단, left=100vw에서 시작해 시계방향 90° → 화면 정확히 채움(어긋남·짤림 0) */
    width: 100dvh; height: 100vw;      /* 가로/세로 치수 스왑 */
    position: fixed; top: 0; left: 100vw; right: auto; bottom: auto; margin: 0;   /* 기본 inset:0·margin:auto 무력화(안 하면 (vh-vw)/2 만큼 밀림) */
    transform-origin: top left;
    transform: rotate(90deg);
  }
}

/* ===== 상단 자원바 (반투명 오버레이 — 손삼풍) ===== */
/* 상단 = 성 그림 위에 뜨는 반투명 캡슐 (2026-07-01 A안: 통짜 배경 폐기, 라오킹式) */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--top-h) + var(--sat));
  display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(0.1875rem, 0.9dvh, 0.5rem);
  padding: calc(var(--sat) + 0.3125rem) calc(var(--sar) + 2.4%) 0 calc(var(--sal) + 0.25rem);   /* 좌 = 카메라 안전영역(--sal) + 4px — 좌측 UI 전부 카메라 비키기 (2026-07-08 사용자, 구 "끝 고정" 폐기) */
  background: none;                    /* 성 그림이 뒤로 비침 */
  transition: transform .25s ease;
  touch-action: pan-x;
  z-index: 10; pointer-events: none;   /* 캡슐만 터치, 사이 빈 공간은 성 그림으로 통과 */
}
.tb-row { display: flex; align-items: center; gap: clamp(0.3125rem, 1.4vw, 0.75rem); pointer-events: none; }
.tb-row > * { pointer-events: auto; }
.tb-row2 { justify-content: flex-end; }   /* 자원 = 우측 정렬 */
/* 캡슐 공통 = 유리알(반투명 + 블러 + 밝은 테두리 + 그림자). 자원은 .res 낱개마다(구분) */
.profile, .city-select, .mini-res, .res {
  background: linear-gradient(180deg, rgba(20,15,9,.34), rgba(6,4,2,.42));   /* 더 투명 (2026-07-01) */
  border: 1px solid rgba(232,202,142,.26);
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.42), inset 0 1px 0 rgba(255,240,205,.12);
  -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
}
/* 원보 옆 초록 [+] = 원보 구매 바로가기 (아트X, 깔끔한 초록 — 라오킹式, 캡슐 안에 딱) */
.cur-plus {
  display: inline-grid; place-items: center; flex: none;
  width: 1.0625rem; height: 1.0625rem; margin-left: 0.1875rem; padding: 0;
  border: none; border-radius: 0.3125rem; cursor: pointer;
  background: linear-gradient(180deg, #46c14e, #2c9a36);
  color: #fff; font-size: 0.8125rem; font-weight: 900; line-height: 1;
  box-shadow: 0 1px 0.125rem rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.cur-plus:active { transform: scale(.9); }
.tb-top { display: flex; align-items: center; gap: 0.5rem; height: 2.875rem; flex: none; }   /* (구 2층 래퍼 — 현 마크업 미사용, 잔존 무해) */
.profile { display: flex; align-items: center; gap: 0.4375rem; flex-shrink: 0; padding: 0.1875rem 0.6875rem 0.1875rem 0.1875rem; border-radius: 0.5625rem; }
.avatar {   /* 나라 메달 아트 (avatar_wei·shu·wu.png — 이미지는 main.js가 GAME.nation 따라 지정) 2026-06-12. 가로전환: 금테 액자 */
  width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(232,202,142,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 0.25rem rgba(0,0,0,.5);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.profile-info { font-size: 0.6875rem; line-height: 1.3; color: var(--ov-w); }
.profile-info .lv { font-weight: 700; color: var(--ov-y); }
/* 주군 경험치 = 무장 상세와 같은 아트 게이지 공용 (.xp-gauge — 2026-06-13 사용자. 구 초록 CSS바·% 글자 폐기) */
.profile-info .profile-xp { display: block; flex: none; width: 4.125rem; height: 0.8125rem; }
/* 레벨 = 아바타 우하단 뱃지 — 나무 원형 명패 아트 (2026-07-09 1차 세트) */
.avatar-wrap { position: relative; flex: none; }
.lv-badge {
  position: absolute; right: -0.3125rem; bottom: -0.1875rem; width: 1.1875rem; height: 1.1875rem;
  background: url('../ui/frame/badge_round_wood.png') center / 100% 100% no-repeat; border: none;
  display: grid; place-items: center;
  font-size: 0.5938rem; font-weight: 700; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; line-height: 1;
}

/* 부성(성 이름) 선택 캡슐 — 배경/테두리는 캡슐 공통 규칙, 여기선 모양·글자만 */
.city-select {
  display: flex; align-items: center; gap: 0.3125rem;
  flex-shrink: 1; min-width: 0; max-width: 40%;
  padding: 0.3125rem 0.6875rem; border-radius: 0.5625rem; cursor: pointer;
  color: var(--ov-w); font-size: 0.75rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.city-select .cs-name { overflow: hidden; text-overflow: ellipsis; }
.city-select .coord { color: var(--ov-w); opacity: .75; font-weight: 400; font-size: 0.6875rem; }
.city-select .cs-caret { flex: none; width: 0.8125rem; height: 0.8125rem; margin-left: 0.125rem; font-size: 0;
  background: url('../ui/btn/btn_down_v2.png') center / contain no-repeat; }   /* ▾ 글리프 → 청동 단추 아트 (2026-07-09 1차) */
/* 부성 드롭다운 리스트 */
#city-menu {
  position: absolute; top: calc(var(--sat) + 2.75rem); left: calc(var(--sal) + 2.4%);
  z-index: 20; pointer-events: auto;
  display: flex; flex-direction: column; gap: 0.1875rem; min-width: 9.75rem; max-height: 50dvh; overflow-y: auto;
  padding: 0.375rem; border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(24,18,10,.97), rgba(12,9,5,.98));
  border: 1px solid rgba(232,202,142,.35); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem);
}
#city-menu.hidden { display: none; }
.cm-item { display: flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--ov-w); font-size: 0.8125rem; cursor: pointer; text-align: left; }
.cm-item.cur { border-color: rgba(232,202,142,.5); background: rgba(232,202,142,.12); }
.cm-item .coord { color: var(--ov-w); opacity: .75; font-size: 0.6875rem; font-weight: 400; }
.cm-item .cm-here { margin-left: auto; font-size: 0.625rem; color: var(--ov-y);
  background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; padding: 0.125rem 0.5625rem; }   /* '현재' = 먹빛 알약 칩 아트 (2026-07-09 1차) */

/* 윗줄 우측: 무훈·원보·홈 */
.tb-top-right { display: flex; align-items: center; gap: 0.5625rem; margin-left: auto; padding-right: 0.25rem; flex-shrink: 0; }   /* 주공의성 제거로 생긴 여유 — 간격 넉넉히 (2026-06-08) */
.mini-res {
  display: flex; align-items: center; gap: 0.25rem; font-size: 0.7188rem; color: var(--ov-w); font-weight: 700;
  padding: 0.1875rem 0.5625rem 0.1875rem 0.3125rem; border-radius: 0.5625rem; text-shadow: 0 1px 0.125rem rgba(0,0,0,.85);   /* 유리알 캡슐 (2026-07-01 A안) */
}
.mini-res .mr-icon { font-size: 0.8125rem; }
.mini-res .gem-icon { width: 1.3125rem; height: 1.3125rem; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* 자원바 = 3칩 × 2줄 (2026-06-08 사용자 확정 — 정확한 수치 표시, 스크롤·잘림 없음) */
/* 자원바 — 칩 박스 제거. 살짝 패인 다크 트레이(깊이) + 아이콘·흰숫자 (2026-06-23) */
/* 자원 = 낱개 캡슐(2026-07-01: 뭉치지 말고 자원별 구분 + 우측). 컨테이너는 투명, .res 각각이 유리알 */
.resources { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; max-width: 100%; gap: clamp(0.25rem, 1vw, 0.625rem); padding: 0; margin: 0; background: none; border: none; box-shadow: none; overflow-x: auto; scrollbar-width: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.resources::-webkit-scrollbar { display: none; }
.res {
  display: flex; align-items: center; gap: 0.25rem;
  min-width: 0; padding: 0.1875rem 0.625rem 0.1875rem 0.3125rem; border-radius: 0.5625rem;
  font-size: 0.75rem; white-space: nowrap; flex: none;
}
.res .res-icon {
  flex: none;
  font-size: 1rem; width: 1.4375rem; height: 1.4375rem;
  display: grid; place-items: center;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.res .res-val { font-variant-numeric: tabular-nums; color: var(--ov-w); font-weight: 700; text-shadow: 0 1px 0.125rem rgba(0,0,0,.85); overflow: hidden; text-overflow: ellipsis; }
/* 자원 숫자 = 전부 흰색, 원보만 노랑 강조 — 구 자원별 전용색(인구 연녹·토지 탄) 폐지, 흰+노랑 통일 (2026-07-03 사용자) */
#gem-val { color: var(--ov-y); }

.icon-btn {
  width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid var(--accent);
  background: #00000050; color: var(--text); font-size: 0.9375rem; cursor: pointer;
}
.icon-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('../ui/btn/btn_home.png') center / contain no-repeat;
  margin-left: 0.75rem;   /* 원보 ＋와 간격 — 오터치 방지 (2026-07-03 사용자) */
}
.icon-btn.home-btn:active { transform: scale(.9); }

/* ===== 중앙 성 뷰 — 상·하단 바 "사이"에 배치 (2026-06-08: 바가 불투명 아트가 되어
   뒤에 깔 이유 없어짐 + 무대가 바에 가려지던 문제(관아 가림) 근본 해결) ===== */
#cityview {
  position: absolute; left: 0; right: 0;
  top: 0;   /* 2026-07-01 A안: 성 그림이 상단 캡슐 뒤로 꽉 참(full-bleed). 캡슐(#topbar)이 위에 뜸 */
  bottom: var(--sab);   /* 하단바 폐기(2026-07-03 플로팅 ≡) → 성뷰가 바닥까지 */
  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);
}
/* (구 nav-hidden 스와이프 접기 효과 폐기 2026-07-03 — 하단바 → 플로팅 ≡로 대체) */
/* E (2026-07-02): 패널 열면 하단메뉴 숨김(.in-building #bottomnav) + #cityview 바닥 확장은 main.js가 인라인으로(renderPanel/closePanel) — 스타일시트 규칙이 프리뷰서 안 먹는 퀴크 회피 */
/* ★성 = 고정 비율 "무대" (2026-06-08 잘림 근본 해결)
   cover(화면에 맞춰 자르기)는 기기마다 다르게 잘리고 이름표가 어긋남
   → 아트 비율(863:1822) 그대로, 화면 안에 통째로 들어가게(contain) 중앙 배치.
   건물 이름표 좌표(%)는 이 무대 기준이라 어느 기기서든 그림과 일치.
   ★아트 교체 시 파일명 버전업 (그림 하루 캐시) + 비율 다르면 aspect-ratio 갱신 */
#cityview { background: #14100a; }
/* ★가로 꽉 채움 모드 (2026-06-08 — v5 아트 전제):
   그림 구도 자체가 "성 = 가운데 절반 / 위아래 = 잘려도 되는 성 밖 풍경"이라
   가로를 어느 폰이든 꽉 채우고, 기기 비율에 따라 위아래 풍경만 더/덜 보임.
   검은 띠·흐림 띠 없음. ★아트 교체 시 파일명 버전업 + 같은 구도 유지할 것 */
#city-ground {
  /* 가로 성 (2026-07-01 city_land_v1, 1672×941=16:9): cover로 꽉 채우고 중앙정렬(넘치면 가장자리 잘림).
     건물 이름표는 이 그림 박스 % 좌표라 어느 기기서든 그림과 함께 움직임. ★아트 교체 시 파일명 버전업 + 비율 갱신 */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  /* ★cover = 어느 기기(S24 2.16:1 · 폴드펼침 1.2:1 · 폴드접힘 2.56:1)든 빈공간 없이 꽉 채움. 가장자리는 잘림 →
     ⚠아트는 "안전지대(가운데 65%)에 건물, 사방 여백" 구성이어야 잘려도 건물 안 짤림 (2026-07-02 제대로 재설계) */
  width: auto; height: auto; min-width: 100%; min-height: 100%;
  aspect-ratio: 1408 / 793;
  background-image: url('../bg/city_land_v3.png');   /* 안전지대 아트 (성 가운데 + 사방 여백) 2026-07-02 */
  background-size: 100% 100%;
}

/* 그림 위 건물 이름표(주 터치) — BUILDINGS x/y(%)로 배치 (2026-06-19) */
#city-labels { position: absolute; inset: 0; pointer-events: none; }
/* 버튼 = 투명 터치존(건물 크기, --scale로 큰 건물은 더 넓게) / 안의 span = 보이는 이름표 알약 */
.city-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  width: calc(12% * var(--scale, 1)); height: calc(3.25rem * var(--scale, 1));   /* 터치범위 축소(34%는 옆건물 눌림) + rem 배율화(2026-07-02 A) */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
}
/* 캡슐 폐기 → 노란 글씨만 (2026-07-02 사용자). 배경 대신 진한 그림자로 성 그림 위 가독성 */
.city-label > span {
  white-space: nowrap; background: none; border: none; box-shadow: none; border-radius: 0; padding: 0;
  color: var(--ov-y); font-size: 0.875rem; font-weight: 800;   /* 14px → rem 배율화 (2026-07-02 A) */
  text-shadow: 0 0 0.1875rem #000, 0 1px 0.125rem #000, 0 0 0.4375rem rgba(0,0,0,.9);
  transition: transform .1s;
}
.city-label:active > span { transform: scale(.9); }
.city-label:hover > span { text-shadow: 0 0 0.3125rem #ffe9a8, 0 1px 0.125rem #000; }

/* 성 건물 퀵 보조 버튼 = 화면 하단 작은 1줄 6개 (주 터치는 그림 이름표, 이건 빠른 보조) */
#buildings {
  position: absolute; left: 0; right: 0; bottom: 0.25rem; z-index: 4;
  display: none;   /* 2026-07-01 사용자 — 퀵 건물버튼 제거(건물은 성그림 이름표로 접근), 자리엔 채팅 미리보기 */
  grid-template-columns: repeat(6, 1fr); gap: 0.1875rem; padding: 0 0.375rem;
}
/* 하단 채팅 미리보기 (반투명 3줄, 탭=대화) — 2026-07-01 */
#chat-peek {
  position: absolute; left: calc(var(--sal) + 0.25rem); right: auto; bottom: 0.3125rem; z-index: 110;   /* 좌 = 카메라 안전영역 비키기 (2026-07-08 사용자) */
  width: calc(100% - 36.125rem - var(--sal)); min-width: 30%; max-width: 92%;   /* 폭 = 펼친 ≡ 서랍 직전까지 고정 (서랍 504 + ≡ 44 + 여백 30 — 2026-07-03 사용자). 좌측이 --sal만큼 밀린 만큼 폭도 줄여 우측 간격 유지 */
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  padding: 0.3125rem 0.625rem; background: rgba(0, 0, 0, .45); border-radius: 0.5rem;   /* 검은 반투명 깔개 (2026-07-03 사용자 — 블러 없이 판만) */
  pointer-events: auto; cursor: pointer;   /* 탭 = 대화 열기 (2026-07-03) */
}
.in-building #chat-peek { display: none; }   /* 건물·창 안에서는 숨김 (2026-07-03 사용자) */
#chat-peek .cp-line { font-size: 0.7188rem; line-height: 1.55; color: var(--ov-w);
  text-shadow: 0 1px 0.125rem rgba(0,0,0,.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat-peek .cp-line b { color: var(--ov-y); font-weight: 700; margin: 0 0.1875rem 0 0.125rem; }
#chat-peek .cp-empty { color: var(--ov-w); opacity: .7; font-style: italic; }
#chat-peek .cp-tag { font-weight: 700; font-size: 0.625rem; color: var(--ov-y);
  background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; padding: 1px 0.4375rem 0.125rem; margin-right: 0.1875rem; }   /* 채널표 = 먹빛 알약 칩 아트 (2026-07-09 1차 — 대괄호 폐기) */
.bld-btn {
  position: relative; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0;
  transition: transform .1s;
}
.bld-btn:active { transform: scale(.93); }
.bld-ico {
  width: 100%; height: 2.125rem;
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  filter: drop-shadow(0 0.125rem 0.1875rem rgba(0,0,0,.5));
  transition: filter .1s;
}
.bld-btn:hover .bld-ico { filter: drop-shadow(0 0 0.375rem #ffe9a8) drop-shadow(0 0.125rem 0.1875rem rgba(0,0,0,.5)); }
.bld-name {
  font-size: 0.5625rem; font-weight: 700; color: #f6e8c6; white-space: nowrap;
  background: rgba(36,24,12,.62); border: 1px solid rgba(0,0,0,.35);
  border-radius: 0.4375rem; padding: 0 0.3125rem; line-height: 1.4; text-shadow: 0 1px 1px #000;
}
.bld-lv {
  position: absolute; top: -0.1875rem; right: calc(50% - 1.25rem);
  background: linear-gradient(#c53a2a, #8a1d12); color: #ffe6b0;
  font-size: 0.5625rem; font-weight: 700; border: 1px solid #5a160e;
  border-radius: 0.5rem; padding: 0 0.3125rem; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.4);
}
/* ===== 카테고리 탭 (심플: 반투명 띠 + 흰글씨, 활성만 파랑) ===== */
.ptab-bar {
  display: flex; gap: 0.125rem; margin: 0.5rem 0.125rem 0.5rem; flex: none;
  background: rgba(20,12,4,.3); border-radius: 0.5rem; padding: 0.1875rem;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;   /* 탭 많아도 1줄 고정 + 넘치면 가로 스와이프 (2026-07-01 사용자 — 줄바꿈 방지) */
}
.ptab-bar::-webkit-scrollbar { display: none; }
.ptab {
  flex: 1 0 auto; text-align: center; min-width: 3.25rem; white-space: nowrap;   /* 라벨 글자 줄바꿈 금지(인기 품목 등 4자가 2줄로 감기던 것) */
  padding: 0.4375rem 0.5rem; border: none; border-radius: 0.375rem; cursor: pointer;
  background: transparent; color: #e8dcc2;
  font-size: 0.8125rem; 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 0.1875rem #00000050;
}
.ptab-content { min-height: 7.5rem; }
/* 페이지 분할(스크롤0) — 가변목록을 가용높이에 맞춰 페이지로 나눔. .paged면 탭내용이 남은 높이를 꽉 채우고 안쪽 스크롤 없이 현재 페이지만 표시 */
/* 등급 구분헤더 (끼리끼리 묶기) */
.rank-div { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.75rem; font-weight: 800; letter-spacing: .5px; margin: 0.4375rem 0.125rem 0.125rem; padding-bottom: 0.125rem; border-bottom: 1px solid; }
.rank-div .rd-dot { width: 0.5rem; height: 0.5rem; border-radius: 0.125rem; flex: none; }
.tab-placeholder {
  display: grid; place-items: center; min-height: 10rem;
  text-align: center; color: #b09a78; font-size: 0.875rem; line-height: 1.8;
}
.tab-placeholder small { color: #8a7659; font-size: 0.6875rem; }

/* ===== 시설 리스트 (손삼 1.PNG 구조) ===== */
/* ★폰 밀도 압축 (2026-06-08 세로 전환 — "생산소 4시설이 스크롤 없이" 사용자 지적)
   좁은 화면에선 아이콘·여백·글자를 줄여 줄 높이를 낮춤 */
@media (max-width: 599px) {
  .srow { gap: 0.4375rem; padding: 0.375rem 0.5rem; }
    .fac-art { width: 2.75rem; height: 2.75rem; }
  .srow-title { font-size: 0.875rem; }
  .srow-prod, .srow-prod b { font-size: 0.75rem; margin-top: 1px; }
  .srow-desc { font-size: 0.8125rem; margin-top: 0.125rem; line-height: 1.45; }
  ul.cost { gap: 0.4375rem; }
  ul.cost li, ul.cost li.time, .time { font-size: 0.7188rem; }
  .srow-act { min-width: 4rem; gap: 0.1875rem; }
  .fac-btn { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }
  .ptab { font-size: 0.75rem; padding: 0.375rem 0.25rem; min-width: 2.75rem; }
  #panel-body h2 { font-size: 0.9375rem; }
}

/* ★넓은 화면(폴드 펼침·태블릿) = "남는 공간엔 더 보여주기" (2026-06-08 확정 원칙) */
@media (min-width: 600px) {
  }
.facility {
  display: flex; align-items: center; gap: 0.625rem;
  background: linear-gradient(180deg, #3a2c1d, #2a2014);
  border: 1px solid #6b4f2e; border-radius: 0.625rem; padding: 0.5rem;
}
/* 건물/병종 아이콘 — 손삼처럼 프레임 없이 배경에 바로 (일러스트 투명배경) */
.fac-art {
  position: relative; flex-shrink: 0;
  width: 3.625rem; height: 3.625rem; border-radius: 0.375rem;
  background-size: contain; background-position: center bottom; background-repeat: no-repeat;
  border: none;
  filter: drop-shadow(0 0.125rem 0.1875rem rgba(0,0,0,.45));
}
/* 기술 아이콘 — 투명 PNG, 줄 위에 바로 (손삼 techicon 방식) */
.fac-art.tech-icon {
  width: 3.125rem; height: 3.125rem;
  border: 0.125rem solid #b8964e; border-radius: 0.5rem;        /* 금/놋쇠 액자 (병사 타일과 같은 격) */
  background-color: #2a2018;                             /* 기본 — 카테고리색이 인라인으로 덮음 */
  background-size: cover; background-position: center;   /* 아트가 칸을 꽉 채우고 가장자리로 번짐 (병사 타일과 동일) — 색은 빈 귀퉁이만 */
  box-shadow: 0 1px 0.1875rem rgba(0,0,0,.5);
  filter: none;                                          /* 액자라 기존 drop-shadow 제거 */
}

/* 병사 타일 — 손삼 병사 썸네일 방식: 밝은 바탕이 통째로 들어간 정사각 썸네일 + 테두리 */
.fac-art.sol-tile {
  border: 0.125rem solid #4a3a22;
  box-shadow: 0 1px 0.1875rem #00000080;
  border-radius: 0.3125rem;
  filter: none;
  background-size: cover;
  background-position: center;
}
/* 잠금 오버레이 — 잠긴 것(선행 미충족·등급 부족) 공통 표시. 잠긴 .fac-art 안에 <span class="icon-lock"></span> 자식만 넣으면 됨 (연구·모병·이후 확장). 2026-06-30 */
.icon-lock { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; background: rgba(0,0,0,.5); border-radius: inherit; }
.icon-lock::before { content: ''; width: 58%; height: 58%; background: url('../ui/btn/btn_lock.png') center / contain no-repeat; filter: drop-shadow(0 1px 0.125rem rgba(0,0,0,.8)); }
.fac-art.no-art {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, #4a3a26, #4a3a26 0.375rem, #413222 0.375rem, #413222 0.75rem);
  font-size: 0.5625rem; color: #b09a78;
}
/* ★버튼 = 단일 아트 btn_base_v1 (2026-07-03 사용자 확정 — "버튼은 전부 이거 하나"): 진한 적갈+가는 금선, 노란 글씨.
   구 4겹 스킨(기본 빨강CSS·팝업 btn_red·ui2 btn_red·도화지 blue2/red2/gold2) 전부 폐기 — 여기 한 곳이 전 버튼의 진실 */
.fac-btn {
  flex-shrink: 0; padding: 1px 0.5rem;   /* 글씨만큼만 — 옆도 슬림 (2026-07-03 사용자 "괜히 칸이 커") */
  border: 0.3125rem solid transparent; border-width: 0.3125rem 0.5625rem; border-radius: 0; background: none;
  border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.3125rem 0.5625rem / 0 stretch;
  color: var(--ov-y); font-weight: 700; font-size: 0.8125rem; cursor: pointer;
  text-shadow: 0 1px 0.125rem #000000b0;
  box-shadow: 0 0.125rem 0.25rem rgba(20, 10, 5, .35);
}
.fac-btn:active { transform: scale(0.95); }
.fac-btn:disabled { filter: grayscale(.9); opacity: .7; }

/* 건물 라벨 (배경 위, 레벨뱃지 포함) */
/* ===== 하단 메뉴 네비 (반투명 오버레이 — 손삼 아이콘 10개) ===== */
/* 하단 = 플로팅 ≡ 더보기 버튼 + 접히는 서랍 (2026-07-03 라오킹式 개편 — 구 통짜 메뉴바 폐기) */
#bottomnav {
  position: absolute; bottom: calc(var(--sab) + 0.75rem); right: calc(var(--sar) + 0.75rem); left: auto;
  width: auto; height: auto;
  display: flex; flex-direction: row; align-items: center; gap: 0.625rem;   /* 가로: 서랍(왼) + ≡(오른) */
  padding: 0; background: none; z-index: 12;
}
#nav-toggle {
  width: 2.625rem; height: 2.625rem; flex: none;   /* ≡ = 청동 원형 단추 아트 (2026-07-09 1차 — 구 btn_max틀+CSS 작대기 폐기) */
  border: none; background: url('../ui/btn/btn_menu_v2.png') center / contain no-repeat;
  cursor: pointer; filter: drop-shadow(0 0.1875rem 0.5625rem rgba(0,0,0,.4));
}
#nav-toggle span { display: none; }
#game.nav-open #nav-toggle { background-image: url('../ui/btn/btn_x_v2.png'); }   /* 열림 = 닫기 단추로 교대 */
/* 서랍 = 명패 바(뒤 레이어 ::before) + 아이콘(앞, 관통). 왼쪽으로 펼쳐짐 */
#nav-drawer {
  display: none; flex-direction: row; align-items: center; gap: 0.3125rem;
  height: 2.875rem; padding: 0 2.125rem; overflow: visible; position: relative;   /* 위아래 슬림 (2026-07-03 사용자) */
  filter: drop-shadow(0 0.25rem 0.625rem rgba(0,0,0,.5));
}
#nav-drawer::before {   /* 명패 = 낮은 바, 세로 가운데. 아이콘 뒤(z-index 0) — 호두나무 명패 v2 (구 plaque 폐기 2026-07-09) */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 1.625rem; z-index: 0; box-sizing: border-box;
  border: 0.4375rem solid transparent; border-width: 0.4375rem 0.8125rem;
  border-image: url('../ui/frame/plaque_v2.png') 34 64 fill / 0.4375rem 0.8125rem stretch;
}
#game.nav-open #nav-drawer { display: flex; animation: nav-pop .18s ease-out; }
@keyframes nav-pop { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
.nav-item {
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; position: relative; z-index: 1;   /* 축소 (2026-07-03 사용자) */
  border: none; background: none; cursor: pointer; padding: 0;
}
.nav-item:active { transform: scale(0.93); }
.nav-item .nav-ic {
  display: block;   /* ★span 기본 inline이면 width/height 무시돼 아이콘 크기 0 = 안 보임 (2026-07-03 버그) */
  width: 2.75rem; height: 2.75rem; position: relative;   /* 바(26px)보다 커서 위아래로 관통 */
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,.6));
}
/* 이름표 = 아이콘 밑(바 아래)에 */
.nav-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: -0.1875rem;
  font-size: 0.6563rem; font-weight: 700; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000, 0 0 0.1875rem #000; white-space: nowrap;
}
/* 좌측 임무 위젯 (라오킹式 한 덩어리 패널 — 2026-07-08 재디자인: 아트·화살표·줄이 따로 놀던 허접함 수리).
   아트 = 패널 좌상단 앵커 / 접기 탭 = 패널 모서리 / 줄 = 노랑 제목 + 흰 목표문 2줄 + 가는 구분선.
   탭 = 바로가기, 달성 줄 = 즉시 수령 (구 .nav-item.pending 흐림표식 폐지) */
#quest-widget { position: absolute; left: var(--sal); top: calc(var(--top-h) + var(--sat) + 0.5rem); z-index: 5; transition: top .25s ease;
  max-height: calc(100% - var(--top-h) - var(--sat) - 0.5rem - 10.5rem);
  display: flex; flex-direction: column; align-items: flex-start; }   /* 좌 = 카메라 안전영역 / 아래 상한 = 지도 버튼 위 16px — ★flex 강제 수축(min-height:0 사슬)이라 상한이 실제로 먹음 (2026-07-08 지도 겹침 재수리: 자동높이 부모에 % max-height 무효 함정) */
#game.top-hidden #quest-widget { top: calc(var(--sat) + 0.5rem); }
#game.in-building #quest-widget { display: none; }   /* 성 화면 전용 — 진행 위젯과 동일 */
#quest-widget .qw-panel { width: 11.625rem; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 0.75rem; overflow: hidden;   /* 고정폭 — 내용 길이 따라 좌우로 널뛰던 것 수리 (2026-07-09 사용자) */
  background: linear-gradient(180deg, rgba(10,13,18,.78), rgba(10,13,18,.55));
  box-shadow: inset 0 0 0 1px rgba(255,235,190,.22), 0 0.1875rem 0.625rem rgba(0,0,0,.4);
  interpolate-size: allow-keywords; transition: height .25s ease; }   /* 수령으로 줄 사라질 때 높이 부드럽게 (지원 브라우저) — 툭 줄어드는 널뜀 완화 (2026-07-09 사용자) */
#quest-widget .qw-head { flex: none; }
#quest-widget .qw-panel.qw-folded { width: auto; background: none; box-shadow: none; }   /* 접힘 = 아트+화살표만이라 고정폭 해제 */
#quest-widget .qw-head { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.25rem 0.125rem 0.375rem; }
#quest-widget #qw-art { width: 2.75rem; height: 2.75rem; border: none; cursor: pointer;
  background: url('../ui/nav/nav_0.png') center / contain no-repeat; background-color: transparent;
  filter: drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,.6)); }
#quest-widget .qw-fold { border: none; width: 1.625rem; height: 1.875rem; font-size: 0; cursor: pointer; border-radius: 0.4375rem;
  background: rgba(255,255,255,.1) url('../ui/btn/btn_prev_v2.png') center / 1.0625rem 1.0625rem no-repeat; }   /* ◀▶ 글리프 → 청동 화살 단추 (2026-07-09 1차) */
#quest-widget .qw-panel.qw-folded .qw-fold { background: rgba(0,0,0,.5) url('../ui/btn/btn_next_v2.png') center / 1.0625rem 1.0625rem no-repeat; }
#quest-widget .qw-list { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: 10.5rem; overflow-y: auto; scrollbar-width: none; }   /* 최대 3줄쯤 + 위젯 전체 상한(지도 위 멈춤)과 이중 안전 — 넘치면 위젯 안 스크롤 (2026-07-08 사용자) */
#quest-widget .qw-list::-webkit-scrollbar { display: none; }
#quest-widget .qw-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; border: none; text-align: left;
  background: none; border-top: 1px solid rgba(255,255,255,.09); padding: 0.4375rem 0.6875rem 0.5rem 0.625rem; cursor: pointer; }
#quest-widget .qw-name { font-size: 0.6875rem; font-weight: 700; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; }   /* 글씨 축소 (2026-07-08 사용자) */
#quest-widget .qw-desc { font-size: 0.625rem; font-weight: 600; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; line-height: 1.35; word-break: keep-all; }
#quest-widget .qw-desc b { color: var(--ov-y); }
#quest-widget .qw-row.qw-ready { background: rgba(255,225,77,.08); animation: qw-glow 1.2s ease-in-out infinite; }
#quest-widget .qw-row.qw-ready .qw-desc { color: var(--ov-y); font-weight: 700; }
@keyframes qw-glow { 0%,100% { box-shadow: inset 0 0 0.1875rem rgba(255,225,77,.25); } 50% { box-shadow: inset 0 0 0.75rem rgba(255,225,77,.55); } }

/* 전광판 (2026-07-08 라오킹式) — 서버 전체 알림이 오른쪽→왼쪽으로 흐르는 자막 띠 */
#marquee { position: absolute; left: 0; right: 0; top: calc(var(--top-h) + var(--sat) + 2.875rem); z-index: 199;
  overflow: hidden; pointer-events: none; padding: 0.3125rem 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.55) 10%, rgba(0,0,0,.55) 90%, transparent); }
#marquee .mq-txt { display: inline-block; white-space: nowrap; padding-left: 100%;
  color: var(--ov-y); font-size: 0.875rem; font-weight: 700; text-shadow: 0 1px 0.125rem #000; will-change: transform; }
@keyframes mqScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* 알림 배지 — 빨간 느낌표 아트 (2026-06-14). 평소 숨김, .badge-on일 때만 (main.js navBadgeOn) */
.nav-badge {
  display: none; position: absolute; top: -4%; right: -8%;
  width: 46%; max-width: 1.125rem; aspect-ratio: 1;
  background: url('../ui/icon/badge_alert.png') center/contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 1px 0.125rem rgba(0,0,0,.6));
}
.nav-item.badge-on .nav-badge { display: block; }

/* 지도 입구 — 좌하단, 채팅 미리보기 바로 위 (2026-07-03 사용자: 채팅 = 왼쪽 끝부터, 지도 = 그 위) */
#map-entry {
  position: absolute; left: calc(var(--sal) + 0.25rem); bottom: 5.25rem;   /* 채팅 바로 위 — 좌 = 카메라 안전영역 비키기 (2026-07-08 사용자) */
  width: 3.375rem; height: 4.25rem; border: none; padding: 0;
  background: url('../ui/nav/nav_4.png') center / contain no-repeat; background-color: transparent;
  filter: drop-shadow(0 0.1875rem 0.5rem rgba(0,0,0,.5)); cursor: pointer; z-index: 5;
}
#map-entry:active { transform: scale(.93); }

/* 튜토리얼 손가락 포인터 (A안 — 2026-06-14). 타깃 행 액션 자리를 좌하향으로 콕 집어 까딱까딱 */
#tutor-hand {
  position: absolute; width: 1.625rem; height: 1.625rem; z-index: 220; pointer-events: none;
  background: url('../ui/tutor/tutor_hand.png') center / contain no-repeat;
  filter: drop-shadow(0 0.125rem 0.3125rem rgba(0, 0, 0, .55));
  animation: tutor-bob .9s ease-in-out infinite;
}
@keyframes tutor-bob {
  0%, 100% { transform: translate(0.1875rem, -0.1875rem); }
  50%      { transform: translate(-0.1875rem, 0.25rem); }   /* 좌하(타깃 쪽)로 콕 찍는 모션 */
}

/* (구 튜토리얼 강제 장치 CSS — 스포트라이트 가림막·링·네비 껌뻑·모병 손가락/캡션 — 2026-07-06 부드러운 안내 재구축으로 폐기) */

/* 보상 받을 때 자원/원보 칩 위로 떠오르는 "+N" (2026-06-14 — main.js floatResGain) */
.res-float {
  position: absolute; transform: translateX(-50%);
  color: var(--ov-y); font-weight: 800; font-size: 0.8125rem;   /* +N 획득 = 노랑 (구 초록 폐지 — 흰+노랑 통일 2026-07-03) */
  text-shadow: 0 1px 0.1875rem #000, 0 0 0.3125rem #000; pointer-events: none; z-index: 250;
  animation: resfloat 1.3s ease-out forwards;
}
@keyframes resfloat {
  0%   { opacity: 0; transform: translate(-50%, 0.375rem); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -1.75rem); }
}

/* 편지 목록 — 풀폭 줄 (2026-06-14 — 표 칸 좁아 세로로 쪼개지던 것 교체. 양피지 먹 톤) */
/* (구 편지 목록 CSS 삭제 2026-07-09 편지 개편 — .mail-bar/.mail-row/.mail-title/체크박스 등 표 마크업 폐기, 새 배치 = Mail.svelte 자체 스타일) */

/* 관저 [현재 상태] 보유/건물 표 헤더 — 칸과 자동 정렬(구 .sec-cols 떠다니던 것 폐기, 2026-06-14) */
.stat-table thead th, .fac-table thead th {
  font-size: 0.6875rem; font-weight: 600; color: rgba(255,255,255,.7); text-align: left;
  padding: 0.125rem 0.5rem 0.25rem; border-bottom: 1px solid rgba(255, 225, 170, .25); white-space: nowrap;
}
/* 보유 현황: 항목이 남는 폭을 먹어 [현재양 ─간격─ 최대]를 우측으로, 최대는 오른쪽 끝 (2026-06-14 사용자) */
.stat-table { width: 100%; }
.stat-table th:first-child, .stat-table td:first-child { width: 100%; }
.stat-table th:nth-child(2), .stat-table td:nth-child(2) { text-align: right; white-space: nowrap; padding-right: 1.5rem; }
.stat-table th:last-child, .stat-table td:last-child { text-align: right; white-space: nowrap; }

/* 관저 축복 = 좌상단 진행위젯과 같은 아트 게이지 줄, 단 역방향(가득→빔) + 초록(위젯 파랑과 구분), 실시간 (2026-06-14 사용자) */
.canvas-box.bless-box { padding: 0; background: transparent; border: none; box-shadow: none; }
.bless-row { position: relative; overflow: hidden; z-index: 0; display: flex; align-items: center; gap: 0.375rem;
  background: url('../ui/gauge/gauge_frame.png') center / 100% 100% no-repeat; border: none; border-radius: 0.5625rem;
  padding: 0.25rem 0.75rem; margin: 0.25rem 0; white-space: nowrap; text-shadow: 0 1px 0.125rem #000; }   /* 게이지 틀 아트 = 진행 위젯 줄과 통일 (2026-07-09 2차) */
.bless-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; border-radius: 0.5rem; transition: width 1s linear;
  background: linear-gradient(180deg, rgba(120, 210, 120, .55), rgba(70, 160, 80, .55)); }   /* 축복 채움 = 초록 CSS */
.bless-name { color: var(--ov-y); font-size: 0.8125rem; font-weight: 700; }
.bless-row .buff-left { margin-left: auto; color: var(--ov-w); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== 건물 진입 시 = 상단은 불투명 바(성 그림 안 비치게), 패널은 그 아래 (2026-07-01 A안: 메인은 캡슐 투명, 건물 안은 솔리드) ===== */
.in-building #topbar {
  height: calc(var(--top-h-panel) + var(--sat));   /* 패널 열면 상단 슬림 → 패널 세로 확보 (2026-07-01) */
  justify-content: center;
  background: linear-gradient(180deg, rgba(20,15,9,.97), rgba(12,9,5,.98));
  border-bottom: 1px solid rgba(196,156,88,.4);
}
/* 패널 상단 = 얇은 띠에 자원+명예+원보+성(홈)버튼만 (2026-07-02 사용자: 성으로 버튼·제목 없애고 넓게).
   나가기 = 우측상단 성모양 홈버튼(#home-btn, 이미 closePanel). tb-row1 보이되 프로필·부성은 숨김, 아래 자원줄(tb-row2)도 숨겨 한 줄로. */
.in-building .tb-row1 { display: flex; }
.in-building .profile, .in-building .city-select, .in-building .tb-row2 { display: none; }
.in-building #panel-head { display: none; }   /* 성으로·제목 제거 (홈버튼으로 나감) */
/* E (2026-07-02 사용자): 패널(가방 등) 열면 하단메뉴 숨김 → 패널이 그 높이까지 화면 전체 사용 (라오킹式). 닫으면 자동 복귀 */
.in-building #bottomnav { display: none; }

/* ===== 건물 화면 (1열 아래 ~ 하단메뉴 위) ===== */
#panel-overlay {
  position: absolute; inset: 0;
  top: calc(var(--top-h-panel) + var(--sat));   /* 2026-07-01: 패널은 슬림 상단(자원 띠) 아래에서 시작 → 세로 최대 확보 */
  z-index: 100;
  /* 다크 패널 (2026-07-02 사용자 — 양피지 폐기). 밋밋X: 상단 금빛 광 + 은은한 결 + 깊이 + 1px 금테 링 (CSS 임시, 진짜 질감은 아트 대기) */
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(150,110,55,.16), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,225,160,.018) 0 0.125rem, transparent 0.125rem 0.4375rem),
    linear-gradient(158deg, rgba(32,27,19,.955), rgba(12,9,5,.975));
  backdrop-filter: blur(0.1875rem); -webkit-backdrop-filter: blur(0.1875rem);
  display: flex; flex-direction: column;
  animation: panel-in .18s ease-out;
  box-shadow: inset 0 0 0 1px rgba(201,162,90,.30), inset 0 1px 0 rgba(255,231,180,.14), inset 0 0 1.75rem rgba(0,0,0,.5);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
#panel-overlay.hidden { display: none; }
#panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0.375rem 0.875rem 0.625rem; position: relative; overflow: hidden;
  margin: 0; border: none;
  background: transparent;
}
/* 모든 건물 창 공통 닫기 ✕ — 종이 판 안 우상단 (2026-07-09 폰검수: 판 밖 여백에 떠 있던 것 이동) */
#panel-x { position: absolute; top: 0.375rem; right: 0.4375rem; width: 2rem; height: 2rem; z-index: 20; border: none; padding: 0; cursor: pointer;
  background: url('../ui/btn/btn_x_v2.png') center / contain no-repeat; background-color: transparent; filter: drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,.55)); }
#panel-x:active { transform: scale(.9); }
.panel-map #panel-x { display: none; }   /* 지도 = ✕ 없음(찾기판과 겹침) — 우측 상단 성 버튼으로 나감 (2026-07-09 사용자) */
/* 헤더 = [← 성으로][제목] 한 줄 (2026-06-08 공간 절약) */
#panel-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.125rem; flex: none; }
#panel-close {
  flex: none;
  padding: 0.3125rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--accent);
  background: linear-gradient(180deg, #4a3622, #33260f); color: var(--text);
  cursor: pointer; font-size: 0.75rem; font-weight: 600;
}
#panel-close:active { transform: scale(0.96); }
/* 제목 = 양피지 위에 직접 떠서 금색은 묻힘 → 진한 갈색 음각 느낌(밝은 하이라이트)로 대비 확보 */
#panel-title { color: #2a1808; font-size: 1.0625rem; 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; overscroll-behavior: none; }   /* 고무줄 튕김 차단 — 내용이 짧을 때 드래그하면 튕겨 복귀하던 것 (2026-07-09 사용자) */
#panel-body h2 { color: #2a1808; margin-bottom: 0.25rem; font-size: 1.0625rem; font-weight: 800; text-shadow: 0 1px 0 rgba(255,246,222,.5); }
   /* 제목 옆 'Lv N' — 양피지에서 읽히게 진갈색 */
#panel-body .desc { font-size: 0.75rem; opacity: .85; margin-bottom: 0.75rem; line-height: 1.5; }
#panel-body .row { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 0.25rem 0; border-bottom: 1px solid #ffffff15; }
/* (구 #panel-body .btn 금 그라데이션 삭제 2026-07-09 2차 — 마크업 어디서도 class="btn" 미사용, 죽은 코드) */

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

/* 손삼 tooltip2 풍 줄 — 거의 불투명한 진갈색 판 (원본 가독성 1:1) */
.srow {
  display: flex; align-items: flex-start; gap: 0.625rem;
  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: 0.375rem; padding: 0.5rem 0.625rem; margin-bottom: 0.375rem;
}
.srow.dim { opacity: .62; }
.srow-body { flex: 1; min-width: 0; }
/* 이름 = 흰색(눈에 띄게), 수치만 노랑 강조 */
.srow-title { font-size: 0.9375rem; color: #fff; font-weight: 700; text-shadow: 0 1px 0.125rem #000; }
.srow-title b { color: #ffe14d; }
.srow-title b:first-of-type { color: #fff; }
.srow-prod { font-size: 0.8125rem; margin-top: 0.1875rem; color: #fff; text-shadow: 0 1px 0.125rem #000; }
.srow-prod b { color: #ffe14d; font-size: 0.8438rem; }
/* 설명 = 줄 수 제한 없이 전부 자동 줄바꿈 (자르기 전면 폐기 — 2026-06-08 사용자 확정) */
.srow-desc { font-size: 0.8438rem; font-weight: 600; margin-top: 0.1875rem; color: #fff; opacity: 1; line-height: 1.45; white-space: pre-line; word-break: break-word; text-shadow: 0 1px 0.125rem #000; }
.srow-desc.lack, .lack b, .lack { color: var(--ov-r); }

/* ═══ 가로 사이드탭 킷 (2026-07-02) — 라오킹式. "위탭+페이지 아래스크롤" 대신 "왼쪽 세로 탭레일 | 오른쪽 내부스크롤".
   카테고리형 화면(연무장·연구소·문파 등)에 씀. 화면 = .scr-side로 감싸고 .ptab-bar에 .rail, 내용을 .scr-body로.
   핵심 = 페이지(#panel-body)는 안 내려가고 .scr-body 칸만 내부 스크롤 (min-height:0 사슬). ═══ */
.scr-side { flex: 1 1 auto; min-height: 0; display: flex; gap: 0.625rem; }
.ptab-bar.rail {
  flex: none; flex-direction: column; flex-wrap: nowrap;
  width: clamp(5.25rem, 23%, 9.375rem); align-self: stretch; margin: 0.375rem 0; padding: 0.125rem;
  overflow-y: auto; overflow-x: hidden; background: transparent;
}
.ptab-bar.rail .ptab { flex: none; width: 100%; text-align: center; padding: 0.6875rem 0.5rem; margin-bottom: 0.375rem; white-space: normal; line-height: 1.25; }
/* 내용칸 = 양피지 보드 (2026-07-03 사용자 — 레일 옆에서 내용이 맨바닥에 바로 시작돼 허전 → 판을 깔고 가장자리 살짝 띄움) */
.scr-body {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: none;   /* 고무줄 튕김 차단 (2026-07-09 사용자) */
  background: #5f3f1c url('../ui/frame/parch_dark_v1.jpg') center / cover;   /* 안쪽 보드 = 짙은 양피지 (사용자 아트, panel_bg_v 교체 2026-07-03) */
  border-radius: 0.75rem; margin: 0.125rem 0.625rem 0.625rem 0.125rem; padding: 0.75rem 1.125rem 0.875rem;
  box-shadow: 0 0.1875rem 0.75rem rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(60, 35, 12, .5);
}
/* 긴 목록을 넓은 화면서 여러 열로 흘려 세로 스크롤 줄임 (라오킹式 폭 활용). 좁으면 1열 자동. */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.25rem 0.875rem; align-content: start; }
/* 줄 목록 = 가로 2열 자동 (2026-07-03 세로잔재 개편 — 시설·연구·모병·무장 공용. 별로면 이 클래스만 걷으면 원복) */
.rows-grid { display: block; }   /* 2열 실험 기각(2026-07-03 사용자 '짧아서 별로') — 1열 + 줄 내부 가로 활용(.tech-foot)으로 */
/* 양피지(ui2) 레일 탭 = 라오킹 왼쪽탭 느낌(비활성=은은한 각인, 활성=진한 명패 돌출) */
.ui2 .ptab-bar.rail .ptab { font-weight: 700; }   /* 나머지 레일 스킨 = 뒤쪽 링 아트 규칙(#panel-overlay.ui2 .ptab-bar.rail — 대청소로 단일화) */

/* ===== 마스터-디테일 = 가로 탭 화면 표준 (라오킹式: 왼쪽 큰 아이콘 그리드 | 오른쪽 상세 카드) 2026-07-01 ===== */
.md-wrap { display: flex; gap: 0.75rem; flex: 1 1 auto; min-height: 0; }
/* 왼쪽: 큰 아이콘 그리드 (여백 넉넉 = 시원함) */
.md-gridwrap { flex: 1 1 56%; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; min-height: 0; }
/* 아이콘 격자 = 좌→오른쪽 채우고 넘치면 세로 스크롤 (라오킹式 재정립 2026-07-02). 셀 = 슬롯 아이콘 + 이름 라벨(눌러보기 전 식별). */
.md-grid { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: repeat(auto-fill, 5.25rem); justify-content: start; align-content: start; gap: 0.625rem 0.375rem; padding: 0.25rem 0.5rem 0.75rem 0.25rem; }
/* 등급구분·상점그룹 구분 = 한 줄 전체(가로 구분선) */
.md-grid .rank-div, .md-grid .shop-grp-sep { grid-column: 1 / -1; }
.md-empty2 { grid-column: 1 / -1; text-align: center; opacity: .6; padding: 1.125rem; font-size: 0.8125rem; }
/* 셀 = 세로(슬롯 + 이름). 슬롯 = 어두운 프레임(양피지 배경과 구분). 이름 = 아래 라벨(양피지에 읽히게 어두운색 / 장비는 irk-등급색). */
.bag-cell { position: relative; width: 5.25rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; transition: transform .08s; }
.bag-cell:active { transform: scale(.94); }
.bag-slot { position: relative; width: 3.875rem; height: 3.875rem; border-radius: 0.75rem; display: grid; place-items: center; background: rgba(14,10,4,.42); border: 1px solid rgba(232,202,142,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.bag-cell.sel .bag-slot { border-color: var(--gold); box-shadow: 0 0 0.625rem 0.125rem rgba(245,197,66,.55); }
.bag-cell.lk, .bag-cell.dimcell { opacity: .5; }
.bag-label { font-size: 0.6875rem; line-height: 1.15; text-align: center; max-width: 100%; color: #efe6d2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
   /* 양피지 위 = 어두운 먹색 (goods 이름 등 irk색 없는 것) */
.bag-cell.sel .bag-label, #panel-overlay.ui2 .bag-cell.sel .bag-label { font-weight: 800; }
.bag-n { position: absolute; right: 0.125rem; bottom: 0; font-size: 0.75rem; font-weight: 800; color: #fff; text-shadow: 0 1px 0.125rem #000, 0 0 0.1875rem #000; pointer-events: none; }
.bag-up { position: absolute; left: 0.125rem; top: 0; font-size: 0.75rem; font-weight: 900; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000, 0 0 0.1875rem #000; pointer-events: none; }
.bag-eqmark { position: absolute; right: 0.1875rem; top: 1px; font-size: 0.625rem; font-weight: 800; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000, 0 0 0.1875rem #000; pointer-events: none; }   /* 장착중 = 노란 글씨 (구슬 아트 기각 — 2026-07-09 폰 검수. 좌상단은 +강화수치 자리라 우상단) */
/* 상세 = 설명(prose desc) 줄 — 스탯보다 흐린 본문 */
.md-desc { font-size: 0.7813rem; line-height: 1.6; color: #cbbfa4; white-space: normal; word-break: break-word; }

/* 오른쪽: 상세 카드 */
.md-detail { flex: 1 1 44%; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem 0.75rem 0.75rem 0.875rem; border-left: 1px solid rgba(232,202,142,.22); }
.md-info { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.625rem; }   /* 정보만 내부 스크롤 (2026-07-09 사용자 — 버튼은 항상 보이게) */
.md-detail .md-acts { margin-top: auto; flex: none; }   /* 팔기/잠금 = 카드 하단 상시 고정 */
.md-empty { margin: auto; text-align: center; opacity: .55; font-size: 0.8125rem; padding: 0.75rem; }
.md-hd { display: flex; align-items: center; gap: 0.875rem; }
.md-hd-txt { min-width: 0; }
.md-name { font-size: 1.0625rem; font-weight: 800; color: #fff; line-height: 1.35; }
.md-stat { font-size: 0.8438rem; line-height: 1.6; color: #fff; white-space: pre-line; word-break: break-word; }
.md-price { font-size: 0.8438rem; color: #ffe14d; display: flex; align-items: center; gap: 0.25rem; }
.md-price b { color: #ffe14d; }
.md-acts { display: flex; gap: 0.625rem; margin-top: auto; padding-top: 0.625rem; justify-content: center; }
/* 상점 상세 = 가격+구매를 한 줄에 가운데 묶음 (양끝 분리 = 어색 — 2026-07-03 사용자 재교정) */
.md-buyrow { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin-top: 0.375rem; }
.md-buyrow .md-price { margin: 0; }
.md-acts .fac-btn { flex: 0 1 auto; padding: 1px 1.125rem; }   /* 표준 버튼 크기와 통일 — 구 "꽉 채운 대형" 폐기 (2026-07-03 사용자 "일관성") */
/* 다중선택 액션바 = 4버튼(팔기·잠금·해제·취소)이라 좁으면 2줄로 (2026-07-02) */
.md-acts.sel-acts { flex-wrap: wrap; }
.md-acts.sel-acts .fac-btn { flex: 0 1 auto; min-width: 0; }

/* 정보 팝업 — 짙은 양피지: 라벨 흰 / 수치 노랑 (2026-07-03) + 이름/스탯/설명 구분선 */
.info-pop .srow-title, .info-pop .srow-prod, .info-pop .srow-desc { color: var(--ov-w); text-shadow: 0 1px 0.125rem rgba(0,0,0,.55); }
.info-pop .srow-prod b { color: var(--ov-y); }
.info-pop .srow-desc { font-weight: 500; }
.info-pop .ip-sep { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,228,180,.38) 15%, rgba(255,228,180,.38) 85%, transparent); margin: 0.375rem 0 0.3125rem; }
/* 임의 설계 수치 표식 — 회수 원본이 아니라 임시값(추후 밸런싱)임을 인게임에 명시 (2026-06-08 사용자) */
.tmp-tag { font-size: 0.625rem; color: #e7b24a; background: rgba(231,178,74,.12); border: 1px solid rgba(231,178,74,.45);
  border-radius: 0.25rem; padding: 0 0.25rem; margin-left: 0.1875rem; white-space: nowrap; vertical-align: middle; font-weight: 400; }
.todo-tag { font-size: 0.625rem; color: #c98a8a; background: rgba(201,138,138,.12); border: 1px solid rgba(201,138,138,.45);
  border-radius: 0.25rem; padding: 0 0.25rem; margin-left: 0.1875rem; white-space: nowrap; vertical-align: middle; font-weight: 400; }
.srow-act {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3125rem;
  min-width: 4.75rem;
}
/* 상점 줄 = 가격·구매 가로 배치 + 가격 고정폭(자릿수 변해도 동전 위치 고정, 세로 칸낭비 제거) (2026-06-23) */
.srow[data-shop] .srow-act, .srow[data-gshop] .srow-act { flex-direction: row; align-items: center; gap: 0.5rem; min-width: 0; }
.srow[data-shop] .srow-act ul.cost, .srow[data-gshop] .srow-act ul.cost { display: flex; width: 4.875rem; justify-content: flex-start; margin: 0; }
.srow[data-shop] .srow-act ul.cost li, .srow[data-gshop] .srow-act ul.cost li { white-space: nowrap; }
/* 연구 row 전용 = 윗줄(아트+이름+진급) / 아랫줄(설명·비용 풀폭) — 아트 옆 좁은 칸 대신 전체폭 사용·가독성 (2026-06-29) */
.srow.tech-row { display: block; }
.srow.tech-row .tech-head { display: flex; align-items: center; gap: 0.625rem; }
.srow.tech-row .tech-head .srow-title { flex: 1; min-width: 0; margin: 0; font-size: 1.0938rem; }   /* 이름 = 아트 높이에 맞춰 큼직하게, 세로 중앙 (2026-07-04 사용자 — 확 말고 적당히) */
.srow.tech-row .tech-head .srow-title b { font-size: 1.125rem; }
/* 모병 줄: 스피너·[모병]을 윗줄 우측에 (2026-07-03 사용자 — 버튼 혼자 아랫줄 처짐) */
.srow.tech-row .tech-head .spinner { margin: 0 0 0 auto; flex: none; }
.srow.tech-row .tech-head .srow-act { flex: none; flex-direction: row; align-items: center; gap: 0.375rem; min-width: 0; }
.srow.tech-row .tech-foot { margin-top: 0.3125rem; }
.srow.tech-row .tech-foot > :first-child { margin-top: 0; }

/* 자원 인라인 아이콘 (아트) */
.ri {
  display: inline-block; width: 1.5625rem; height: 1.5625rem; vertical-align: -0.4375rem; margin-right: 0.1875rem;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ri-clock { width: 1.125rem; height: 1.125rem; margin-right: 0.25rem; vertical-align: -0.25rem; }

/* ── 잔 기호·단추 아트 공용 (2026-07-09 1차 세트 — 글리프 ◀▶→✓ 아이콘 전멸용) ── */
.ico-inline { display: inline-block; width: 0.8125rem; height: 0.8125rem; background: center / contain no-repeat; vertical-align: -0.125rem; margin-right: 0.1875rem; }
.ico-back { background-image: url('../ui/btn/btn_prev_v2.png'); }
.ico-up { background-image: url('../ui/btn/btn_up_v2.png'); }
.ico-down { background-image: url('../ui/btn/btn_down_v2.png'); }
.ico-go2 { background-image: url('../ui/icon/ico_go.png'); width: 0.9375rem; }
.ico-check { background-image: url('../ui/icon/ico_check.png'); width: 0.875rem; height: 0.875rem; }
.ico-alert { background-image: url('../ui/icon/badge_alert.png'); width: 0.9375rem; height: 0.9375rem; vertical-align: -0.1875rem; }
/* MAX 버튼 = 청동 명패 아트 (2026-07-09 2차 — 글자 버튼 폐기. 글자는 아트에 구움) */
.mx-btn { width: 2.875rem; height: 1.5625rem; border: none; padding: 0; cursor: pointer; vertical-align: middle;
  color: var(--ov-y); font-size: 0.6875rem; font-weight: 800; line-height: 1.5625rem; text-shadow: 0 1px 0.125rem #000000b0;   /* MAX 글씨 노랑 — 아트가 빈 명패 (spin-max와 동일 처리, 2026-07-10 누락 수리) */
  background: url('../ui/btn/btn_max.png') center / 100% 100% no-repeat; background-color: transparent; filter: drop-shadow(0 1px 0.125rem rgba(0,0,0,.4)); }
.mx-btn:active { transform: scale(.93); }
/* 페이지 넘김 = 청동 화살 단추 (순위 등) */
.pg-btn { width: 1.875rem; height: 1.875rem; border: none; padding: 0; cursor: pointer; vertical-align: middle;
  background: center / contain no-repeat; background-color: transparent; filter: drop-shadow(0 1px 0.1875rem rgba(0,0,0,.5)); }
.pg-btn:active { transform: scale(.92); }
.pg-btn.pg-prev { background-image: url('../ui/btn/btn_prev_v2.png'); }
.pg-btn.pg-next { background-image: url('../ui/btn/btn_next_v2.png'); }
.pg-btn.btn-dim { filter: grayscale(.9) opacity(.55); }
/* 부본 노드 마커 = 구슬 아트 3종 (구 CSS 색깔 원 폐기) */
.fbn { margin: 0 auto; background: center / contain no-repeat; }
.fbn-taken { background-image: url('../ui/icon/node_taken.png'); }
.fbn-open { background-image: url('../ui/icon/node_open.png'); filter: drop-shadow(0 0 0.3125rem rgba(255,240,190,.75)); }
.fbn-lock { background-image: url('../ui/icon/node_locked.png'); }
/* 부본 난이도 리본 (하드=진홍 / 노멀=감청) */
.fb-diff { display: inline-block; background: center / 100% 100% no-repeat; color: var(--ov-y); font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.8125rem 0.375rem; text-shadow: 0 1px 0.125rem #000; vertical-align: 1px; }
.fb-diff.hard { background-image: url('../ui/frame/ribbon_red.png'); }
.fb-diff.norm { background-image: url('../ui/frame/ribbon_blue.png'); }
/* 전투보고 대결 엠블럼(무기 교차) + 승/패 도장 */
.vs-emblem { width: 3.5rem; height: 3.5rem; background: url('../ui/icon/emblem_duel.png') center / contain no-repeat; filter: drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,.5)); }
.stamp { display: inline-grid; place-items: center; width: 2.875rem; height: 2.875rem; background: center / contain no-repeat;
  font-size: 0.8125rem; font-weight: 900; color: #fff; text-shadow: 0 1px 0.1875rem rgba(0,0,0,.8); transform: rotate(-8deg); }
.stamp-w { background-image: url('../ui/icon/stamp_win.png'); }
.stamp-l { background-image: url('../ui/icon/stamp_lose.png'); }
/* 축하 폭죽 (대박 등 팝업 삽화) */
.gain-fx { display: block; width: 5.25rem; margin: 0 auto 0.25rem; }
.gain-fx-sm { display: inline-block; width: 2.5rem; vertical-align: -0.8125rem; margin-right: 0.25rem; }
/* 부본 부대 깃발 (⚑ 글리프 폐기 — 군별 깃발 아트) */
.fb-flag { display: inline-block; width: 0.75rem; height: 0.875rem; object-fit: contain; vertical-align: -0.125rem; margin-right: 0.125rem; filter: drop-shadow(0 1px 1px #000); }

/* 비용 줄: 식량·목재·철·동전 + 시간 (부족 = var(--ov-r) 진빨강) */
ul.cost { list-style: none; display: flex; flex-wrap: wrap; gap: 0.1875rem 0.8125rem; margin-top: 0.375rem; font-size: 0.8125rem; align-items: center; }   /* 가로 = 자원 4종+시간 한 줄 (2026-07-03 사용자 — 구 세로용 2×2 격자 폐기. 축약표기라 안 길어짐, 좁으면 wrap) */
ul.cost li { white-space: nowrap; }
.prod-arrow { display: inline-block; width: 0.9375rem; height: 0.8125rem; margin: 0 0.25rem; font-size: 0; vertical-align: middle;
  background: url('../ui/icon/ico_go.png') center / contain no-repeat; }   /* middle = 글자 크기 변해도 숫자 가운데 (2026-07-10 사용자 재지적) */   /* → 아트 — 숫자와 세로 정렬 (2026-07-09 폰 검수: 낮게 깔림 수리) */
ul.cost li { display: flex; align-items: center; }
ul.cost li .r-name { margin: 0 0.3125rem 0 0.125rem; }   /* 보상 자원 이름 — flex가 공백을 먹어 "식량50"으로 붙는 것 방지 (2026-06-12) */
/* 내 무장 정렬·★핀 (2026-06-12 — 구 ▲▼ 폐기. 핀 = 표시 순서 전용) */
.hero-sort { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.375rem; }
.hero-sort .fac-btn { font-size: 0.7813rem; padding: 0.125rem 0.5625rem; }   /* 가로 = 축소 해제 (2026-07-03) */
/* ⚠ .hero-row > span 균등분할(flex:1)보다 우선해야 함 — 안 그러면 핀 칸이 절반까지 늘어나 그림이 중간부터 시작 (2026-06-12 사고) */
/* 핀 = star.png 아트 (글자★ 폐기 2026-06-12) — 꺼짐 = 흑백 흐림 / 켜짐 = 원색+광 */
.hero-row > .hero-pin { width: 1.125rem; height: 1.125rem; flex: none; cursor: pointer; user-select: none; align-self: center;
  filter: grayscale(1) opacity(.4); }
.hero-row > .hero-pin.on { filter: none; }
/* 내 무장 2줄 카드 (2026-06-12 — 헤더 표 폐기, 풀네임 스탯. 3칸 그리드 = 최대 2줄 보장) */
.hero-row > .hero-card { flex: none; }   /* .hero-row > span 균등분할 규칙에서 초상 제외 */
.hero-row .hr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.hero-row .hr-top { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7813rem; }
.hr-status { margin-left: auto; font-size: 0.6875rem; flex: none;
  background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; padding: 0.125rem 0.5625rem 0.1875rem; text-shadow: 0 1px 0.125rem #000; }   /* 목록 상태 = 먹빛 알약 칩 아트 (2026-07-09 1차) */
.hs-idle { color: #9a8a70; } .hs-out { color: #ff9f6f; } .hs-role { color: var(--ov-y); }
#panel-overlay.ui2.theme-light .hr-status { color: var(--ov-w); }   /* 목록 상태(출전 대기 등) = 흰색 (2026-07-03 사용자) */
#panel-overlay.ui2.theme-light .hr-top .dim-text { color: var(--ov-w); }   /* 목록 "등급 N"도 완전 흰색 (흐림 회색 기각 2026-07-03) */
.hr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.125rem 0.5rem; font-size: 0.7813rem; color: #cfc3a8; white-space: nowrap; }   /* 가로 = 글씨 상향 (2026-07-03) */
.hr-stats b { color: var(--ov-y); }
ul.cost li b { color: #fff; text-shadow: 0 1px 0.125rem #000; }
ul.cost li.lack b { color: var(--ov-r); }
ul.cost li.time, .time { color: #6fc8ff; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.8125rem; text-shadow: 0 1px 0.125rem #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: 0.375rem; padding: 0.25rem 0.5625rem; font-size: 0.8125rem; font-weight: 700; color: var(--ov-y);
  font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 1px 0.125rem #000;
}
.cd-text, #enh-cd { font-size: 0.75rem; color: var(--ov-y); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 작은 버튼/보조 버튼 */
.fac-btn.btn-dim { filter: grayscale(.5) brightness(.85); color: #f0e6d0; }   /* 흐림(불가) = 같은 아트를 탈색만 */

/* 섹션 제목 (손삼 iphonetitle 풍 띠) */
.sec-title {
  font-size: 0.8125rem; color: #fff; font-weight: 700; text-shadow: 0 1px 0.125rem #000;
  background: rgba(28, 16, 6, .85); border-radius: 0.375rem;
  padding: 0.4375rem 0.625rem; margin: 0.625rem 0 0.375rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.sec-title b { color: var(--ov-y); }
.canvas-box {
  background: rgba(35, 20, 8, .9); border: none;
  border-radius: 0.5rem; padding: 0.625rem; margin-bottom: 0.5rem;
}
.center { text-align: center; }
.center-btn { text-align: center; margin: 0.625rem 0 0.25rem; }
.dim-text { color: #fff; opacity: .8; font-size: 0.7188rem; font-style: normal; text-shadow: 0 1px 0.125rem #000; }
.ex-row, .troop-row, .hero-row, .enh-item { color: #fff; text-shadow: 0 1px 0.125rem #000; }

/* 표 (생산계획·현황·정보) */
.s-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: #fff; text-shadow: 0 1px 0.125rem #000; background: rgba(35,20,8,.9); border-radius: 0.375rem; }
.s-table th { font-size: 0.75rem; color: #fff; font-weight: 700; padding: 0.375rem; text-align: left; background: rgba(20,11,4,.9); }
.s-table td > b:first-child { color: #fff; }
.s-table td { padding: 0.4375rem 0.375rem; border-bottom: 1px solid rgba(255, 235, 190, .1); vertical-align: middle; }
.s-table b { color: #ffd54a; }
.s-table input { width: 2.75rem; }
.s-table td, .s-table th { white-space: nowrap; }   /* 시설명(벌목장(2))·노동력%·생산량 줄바꿈 방지 (2026-06-23) */
.s-table .th-sub { font-size: 0.5625rem; opacity: .7; font-weight: 400; margin-left: 0.125rem; }
.info-table td { border-bottom: none; padding: 0.1875rem 0.5rem; }
.fac-table .fac-ops { text-align: right; white-space: nowrap; }
/* 건물 현황 줄 펼침 +/− = 스피너 아트 재사용 (2026-06-14 — 구 CSS 네모+글자. 다른 +들과 통일) */
.more-btn {
  width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%; cursor: pointer; margin-left: 0.375rem; padding: 0;
  background: url('../ui/btn/btn_spin_plus.png') center / contain no-repeat; background-color: transparent;
  color: transparent; font-size: 0; box-shadow: none;
}
.more-btn.open { background-image: url('../ui/btn/btn_spin_minus.png'); }
.ops { display: inline-flex; gap: 0.3125rem; }

/* 입력/select 공통 */
.s-input, .spinner input, .plan-per, .s-select {
  background: rgba(0, 0, 0, .5); border: 1px solid #7a5c30; border-radius: 0.3125rem;
  color: #ffe9b8; font-size: 0.7813rem; padding: 0.25rem 0.375rem; width: 6.875rem;
}
.s-input.num { width: 3.25rem; text-align: center; }
.plan-per { width: 2.625rem; text-align: center; }
.s-select { width: auto; max-width: 14.375rem; }

/* 스피너 [-][입력][+][MAX] — 청동 원형/금 알약 아트 (2026-06-12. 글자·기호는 아트에 구움 → font-size 0) */
.spinner { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.3125rem; }
.spinner input { width: 4rem; text-align: center; }
.spin-btn {
  width: 1.5625rem; height: 1.5625rem; border: none; border-radius: 50%; cursor: pointer;
  background: url('../ui/btn/btn_spin_plus.png') center / contain no-repeat;
  color: transparent; font-size: 0; line-height: 1; padding: 0;
}
.spin-btn.spin-minus { background-image: url('../ui/btn/btn_spin_minus.png'); }
.spin-btn.spin-max { width: 3.375rem; height: 1.4375rem; border-radius: 0;
  color: var(--ov-y); font-size: 0.6875rem; font-weight: 800; line-height: 1.4375rem; text-shadow: 0 1px 0.125rem #000000b0;   /* MAX 글씨 노랑 (2026-07-03 사용자 — 아트가 빈 명패라 글씨 살림) */
  background-image: url('../ui/btn/btn_max.png'); background-size: 100% 100%; }
.spin-btn:active { transform: scale(.9); background-color: transparent; color: transparent; }

/* 교환 줄 */
.s-head4, .s-headN {
  display: flex; gap: 0.625rem; font-size: 0.75rem; color: #fff; font-weight: 700; text-shadow: 0 1px 0.125rem #000;
  background: rgba(28, 16, 6, .85); border-radius: 0.375rem; padding: 0.375rem 0.625rem; margin: 0.5rem 0 0.375rem;
}
.s-head4 span { flex: 1; }
.s-headN span { flex: 1; text-align: center; }
.ex-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.3125rem; font-size: 0.7813rem; flex-wrap: wrap; position: relative;
  background: rgba(0,0,0,.42); border-radius: 0.5rem; margin-bottom: 0.25rem; }   /* 교환 줄 = 검은 깔개 + 압축(6줄+버튼 한 화면, 2026-07-03 사용자) */
/* 교환 머리글(품목/양) = 아래 줄 열과 정렬 (2026-07-03 사용자 "위치 안 맞아") */
.s-head4.ex-head { gap: 0.5rem; padding: 0.3125rem 0.5rem; margin: 0.25rem 0; }
.s-head4.ex-head span { flex: none; }
.s-head4.ex-head span:nth-child(1) { width: 4.5rem; }     /* = .ex-give(내놓는 자원) 위 */
.s-head4.ex-head span:nth-child(2) { flex: 1 1 auto; }  /* = 스피너+보유 위 */
.s-head4.ex-head span:nth-child(3) { width: 1.5rem; }     /* = 화살표 위 → 다음 '품목'은 받는 자원 위로 */
.s-head4.ex-head span:nth-child(4) { flex: none; }
.ex-row .spinner { margin-top: 0; }
.ex-give { display: inline-flex; align-items: center; width: 4.5rem; flex: none; }   /* 고정폭 = 머리글 '품목'과 정렬 (2026-07-03) */
.ex-get { display: inline-flex; align-items: center; min-width: 4rem; }
.ex-have { color: #a8987a; font-size: 0.7188rem; }
.ex-arrow { display: inline-block; width: 1.25rem; height: 1.125rem; font-size: 0; vertical-align: -0.25rem;
  background: url('../ui/icon/ico_exchange.png') center / contain no-repeat; }   /* → 글리프 → 청옥 교환 화살표 아트 (2026-07-09 1차) */
.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('../ui/title/login_bg_v3.jpg') center / cover no-repeat;   /* 타이틀 = 전장·군세 키아트 (구 v2 제갈량 → v3 교체, 2026-06-25) */
}
.login-box {
  display: flex; flex-direction: column; gap: 0.625rem; align-items: center;
  background: linear-gradient(180deg, rgba(42, 31, 18, .88), rgba(26, 18, 9, .92));
  border: 1px solid #8a6a3a; border-radius: 0.75rem; box-shadow: 0 0.5rem 1.875rem #000c;
  padding: 1.5rem 1.875rem; width: 16.875rem;
  backdrop-filter: blur(0.125rem);
}
.login-title { font-size: 1.375rem; font-weight: 700; color: var(--gold); letter-spacing: 0.125rem; }
.login-title small { font-size: 0.75rem; color: #b89b6a; font-weight: 400; }
.login-box .s-input { width: 100%; box-sizing: border-box; text-align: left; }
.login-msg { font-size: 0.75rem; color: #ffd17a; min-height: 1rem; text-align: center; }

/* 타이틀 화면 (로고 위 + 버튼 아래) — 2026-06-25. 배경 = #login-overlay의 login_bg (새 키아트로 교체 예정) */
#login-overlay.title-screen { flex-direction: column; justify-content: space-between; align-items: center; padding: calc(5vh + var(--sat)) 0 calc(10vh + var(--sab)); }   /* 단축 padding에 안전영역(--sat 노치·--sab 홈바) 합쳐 씀. 하단 10vh = 버튼 위치 */
/* 상단 상태바(시계·배터리) 가림막 — 메인화면 #game::after와 완전 동일: 상태바 높이(--sat)만큼 불투명(.98) 솔리드, 경계는 칼같이(페이드 없음 = 흐릿한 흔적 제거). 타이틀 오버레이가 z350이라 #game::after를 덮으므로 자체로 다시 깖 */
#login-overlay.title-screen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--sat); background: rgba(6, 4, 2, .98); pointer-events: none; z-index: 0; }
.title-logo, .title-actions { position: relative; z-index: 1; }   /* 스크림 위로 */
.title-logo { text-align: center; margin-top: 6%; }
.title-logo-img { width: 80%; max-width: 22.5rem; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0.1875rem 0.625rem #000a); }
.title-actions { width: 17rem; display: flex; flex-direction: column; gap: 0.6875rem; align-items: center; }
.btn-google, .btn-guest { width: 100%; box-sizing: border-box; border-radius: 0.5625rem; font-weight: 700; font-size: 0.875rem; padding: 0.6875rem 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5625rem; }
.btn-google { background: #fff; color: #3c4043; border: none; box-shadow: 0 0.125rem 0.375rem #0006; }
.btn-guest { background: rgba(0, 0, 0, .32); color: #e8d8b0; border: 1px solid #a8873f; }
.btn-google:active, .btn-guest:active { transform: scale(0.97); }
.title-hint { font-size: 0.6875rem; color: #c7b48d; text-align: center; margin-top: 0.125rem; }

/* 약관 동의 하단 시트 */
/* 약관 동의 시트 — 모던·깔끔(웹폼 티 제거): 커스텀 금색 체크박스 + 정돈된 간격 (2026-06-26) */
#consent-sheet { position: absolute; inset: 0; z-index: 360; }
#consent-sheet .cs-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#consent-sheet .cs-panel { position: absolute; left: 0; right: 0; bottom: 0; background: #1b1610; border-top: 1px solid rgba(190, 158, 96, .22); border-radius: 1.25rem 1.25rem 0 0; padding: 0.75rem 1.25rem calc(1.25rem + var(--sab)); display: flex; flex-direction: column; gap: 0.375rem; box-shadow: 0 -0.625rem 1.875rem rgba(0, 0, 0, .45); }
.cs-handle { width: 2.375rem; height: 0.25rem; background: rgba(255, 255, 255, .16); border-radius: 0.125rem; align-self: center; margin-bottom: 0.5rem; }
.cs-title { font-size: 1.0625rem; font-weight: 600; color: #f2e9d6; margin-bottom: 0.25rem; }
/* 커스텀 체크박스 — 네이티브 숨기고 금색 박스로 */
#consent-sheet input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-check { width: 1.375rem; height: 1.375rem; border-radius: 0.375rem; border: 1.5px solid #6f5d3c; background: rgba(255, 255, 255, .03); flex-shrink: 0; position: relative; transition: background .12s, border-color .12s; }
#consent-sheet input:checked + .cs-check { background: #dcab44; border-color: #dcab44; }
#consent-sheet input:checked + .cs-check::after { content: ''; position: absolute; left: 0.4375rem; top: 0.1875rem; width: 0.3125rem; height: 0.625rem; border: solid #1a120a; border-width: 0 0.1563rem 0.1563rem 0; transform: rotate(45deg); }
.cs-all { display: flex; align-items: center; gap: 0.6875rem; font-size: 0.9375rem; color: #f2e9d6; padding: 0.5rem 0.125rem; cursor: pointer; }
.cs-all-txt { font-weight: 600; }
.cs-div { height: 1px; background: rgba(190, 158, 96, .14); margin: 0.125rem 0 0.25rem; }
.cs-row { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8438rem; color: #c9bda4; padding: 0.4375rem 0.125rem; cursor: pointer; }
.cs-txt { flex: 1; line-height: 1.35; }
.cs-row a { color: #c2a161; font-size: 0.75rem; text-decoration: underline; flex-shrink: 0; }
.cs-tag { font-size: 0.625rem; font-weight: 600; padding: 0.125rem 0.4375rem; border-radius: 0.3125rem; flex-shrink: 0; letter-spacing: .3px; }
.cs-tag.req { background: rgba(214, 92, 64, .16); color: #e9a48f; }
.cs-tag.opt { background: rgba(255, 255, 255, .06); color: #a99a7c; }
.cs-go { width: 100%; margin-top: 0.75rem; padding: 0.625rem 0; border: 0.5rem solid transparent; border-width: 0.5rem 0.875rem; border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.5rem 0.875rem / 0 stretch; border-radius: 0; font-size: 0.9688rem; font-weight: 700; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000b; background: none; box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, .3); cursor: pointer; transition: filter .12s; }   /* 공용 버튼 아트 통일 (2026-07-09 2차 — "버튼은 전부 btn_base_v1" 07-03 확정) */
.cs-go:active { filter: brightness(.94); }
.cs-go:disabled { filter: grayscale(.9) opacity(.7); cursor: default; }

/* 튜토리얼 A 대화모드 — 가로 재구축 (2026-07-06): 책사 왼쪽 아래 크게 + 오른쪽 유리 캡슐 대화창(상단바 문법). 탭=다음, [건너뛰기] 상시 */
#tutor-ov {
  position: absolute; inset: 0; z-index: 340; background: rgba(8, 6, 3, .32); cursor: pointer;   /* 어둡기 살짝만 — 부드러운 안내 */
  display: flex; align-items: flex-end; gap: 0.875rem;
  padding: 0 max(4%, var(--sar)) 0 max(2%, var(--sal));
}
#tutor-ov .tutor-npc { flex: none; height: min(66dvh, 28.75rem); width: auto; margin-bottom: 0; pointer-events: none; filter: drop-shadow(0 0.3125rem 1rem #000a); }   /* 상반신 아트 = 화면 바닥에 붙임 */
#tutor-ov .tutor-box {
  flex: 1; min-width: 0; max-width: 33.75rem; position: relative;
  margin-bottom: clamp(1rem, 6dvh, 2.75rem);
  background: rgba(22, 16, 9, .8); border: 1px solid rgba(255, 235, 190, .3); border-radius: 0.875rem;
  backdrop-filter: blur(0.375rem); box-shadow: 0 0.375rem 1.375rem rgba(0, 0, 0, .45);
  padding: 0.8125rem 1rem 1.375rem;
}
#tutor-ov .tutor-text { min-height: 2.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--ov-w); line-height: 1.55; word-break: keep-all; display: flex; align-items: center; }
/* 인사 중 주군 이름 입력줄 */
#tutor-ov .tutor-form { position: relative; display: flex; gap: 0.375rem; align-items: center; margin-top: 0.5625rem; }
#tutor-ov .tutor-name-in { flex: 1; min-width: 0; font: inherit; font-size: 0.9375rem; padding: 0.375rem 0.625rem; border: 1px solid #8a6a3a; border-radius: 0.5rem; background: #fffdf3; color: #2a1d0c; }
#tutor-ov .tutor-name-ok { font: inherit; font-size: 0.875rem; font-weight: 700; padding: 0.1875rem 0.625rem; border: 0.4375rem solid transparent; border-width: 0.4375rem 0.75rem; border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.4375rem 0.75rem / 0 stretch; border-radius: 0; background: none; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000b; white-space: nowrap; }   /* 공용 버튼 아트 통일 (2026-07-09 2차) */
#tutor-ov .tutor-name-err { position: absolute; left: 0.125rem; bottom: -1.0625rem; font-size: 0.6875rem; color: #9a9a9a; }
/* 이름 확인 비트 [좋아요/다시 정할래요] — 확정은 [좋아요]에서만 (2026-07-06) */
#tutor-ov .tutor-choice { display: flex; gap: 0.5rem; margin-top: 0.625rem; }
#tutor-ov .tutor-yes { flex: 1; font: inherit; font-size: 0.875rem; font-weight: 700; padding: 0.25rem 0; border: 0.4375rem solid transparent; border-width: 0.4375rem 0.75rem; border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.4375rem 0.75rem / 0 stretch; border-radius: 0; background: none; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000b; }   /* 공용 버튼 아트 통일 (2026-07-09 2차) */
#tutor-ov .tutor-no { flex: 1; font: inherit; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 0; border: 1px solid rgba(255, 235, 190, .35); border-radius: 0.5rem; background: rgba(255, 255, 255, .07); color: var(--ov-w); }
#tutor-ov .tutor-tap { position: absolute; right: 0.8125rem; bottom: 0.375rem; font-size: 0.6875rem; color: rgba(255, 235, 190, .75); opacity: 0; transition: opacity .15s; }   /* 타이핑 중엔 숨김 */
#tutor-ov .tutor-tap.ready { opacity: 1; animation: tap-blink 1.1s ease-in-out infinite; }   /* 글 다 나오면 ▼ 깜빡 = "눌러도 됨" */
@keyframes tap-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
#tutor-ov .tutor-box { transition: transform .1s ease; }                 /* 탭 눌림 피드백 */
#tutor-ov.tap-press .tutor-box { transform: scale(.975); }
/* 튜토리얼 B 힌트모드 — 얼굴 초상 + 말풍선 한 줄, 구석에. 탭 한 번이면 사라짐 (첫 사용 안내용) */
#tutor-hint {
  position: absolute; left: max(0.625rem, var(--sal)); bottom: calc(var(--nav-h) + var(--sab) + 0.75rem);
  z-index: 330; display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
}
#tutor-hint .th-face {
  flex: none; width: 2.875rem; height: 2.875rem; border-radius: 50%; border: 0.125rem solid rgba(255, 235, 190, .5);
  background: rgba(22, 16, 9, .85) url('../ui/tutor/tutor_greet.png') no-repeat 50% 8% / 210% auto;   /* 시트에서 얼굴만 크게 */
  box-shadow: 0 0.1875rem 0.625rem #0008;
}
#tutor-hint .th-bubble {
  background: rgba(22, 16, 9, .86); border: 1px solid rgba(255, 235, 190, .3); border-radius: 0.75rem;
  padding: 0.5rem 0.75rem; font-size: 0.7813rem; font-weight: 600; color: var(--ov-w); line-height: 1.45;
  max-width: min(21.25rem, 58vw); word-break: keep-all; box-shadow: 0 0.1875rem 0.75rem #0008;
}

/* 나라 선택 (첫 로그인 — 위/촉/오 1택) */
#nation-overlay {
  position: absolute; inset: 0; z-index: 360;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.375rem, 1.6dvh, 0.875rem); padding: clamp(0.5rem, 3dvh, 1.75rem) 4%;
  overflow-y: auto;   /* 짧은 화면서 넘쳐도 시작 버튼까지 볼 수 있게 (가로 전환 안전장치) */
  background: radial-gradient(120% 90% at 50% 30%, #2a1f12 0%, #160d05 70%, #0b0703 100%);
}
.nation-head { text-align: center; }
.nation-title { font-size: 1.3125rem; font-weight: 700; color: var(--gold); letter-spacing: 0.125rem; }
.nation-sub { font-size: 0.7188rem; color: #c9b487; margin-top: 0.25rem; }
.nation-cards { display: flex; gap: 0.625rem; width: 100%; max-width: 28.75rem; justify-content: center; align-items: center; }
.nation-card {
  /* 가로 화면 높이에 맞춰 카드 높이 제한(세로용 aspect 341/1000이 짧은 가로에서 넘쳐 시작버튼 짤리던 것 해결) — 높이 기준, 폭은 비율로 파생 */
  position: relative; flex: 0 0 auto; height: min(22.5rem, 58dvh); width: auto; max-width: 8.25rem; aspect-ratio: 341 / 1000;
  border: 1.5px solid #6b4f2e; border-radius: 0.625rem; 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: 0.875rem 0.25rem 0.5rem;
  font-size: 0.8125rem; 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: 1rem; color: #fff; text-shadow: 0 1px 0.1875rem #000; }   /* 한글 나라명 = 헤드라인 (위/촉/오 한자 못 읽는 사용자 기준) */
.nation-cap small { font-size: 0.6875rem; color: #c9b487; margin-left: 0.1875rem; }
.nation-lord { font-size: 0.6875rem; color: #ffd9a0; }
.nation-card.sel { border-color: var(--gold); box-shadow: 0 0 0 0.125rem var(--gold), 0 0.375rem 1.25rem #000a; transform: translateY(-0.1875rem); }
.nation-pick-desc { font-size: 0.7813rem; color: #ffd17a; min-height: 1.125rem; text-align: center; }
#nation-overlay .fac-btn { padding: 0.5625rem 1.625rem; font-size: 0.875rem; }

/* 대화 (채팅) */
/* 공지 띠 (운영자 공지 — 자원바 아래 상시 표시, 팝업들보다는 아래) */
/* 연결 끊김 띠 (자동 재연결 중 — 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: 0.75rem; color: var(--ov-w); padding: 0.25rem 0.75rem;
  background: linear-gradient(90deg, transparent, rgba(90, 22, 14, .9) 15%, rgba(90, 22, 14, .9) 85%, transparent);
  text-shadow: 0 1px 0.125rem #000; pointer-events: none;
}
#notice-bar {
  position: absolute; top: var(--top-h); left: 0; right: 0; z-index: 290;
  text-align: center; font-size: 0.75rem; color: var(--ov-y); padding: 0.25rem 0.75rem;
  background: linear-gradient(90deg, transparent, rgba(40, 24, 8, .85) 15%, rgba(40, 24, 8, .85) 85%, transparent);
  text-shadow: 0 1px 0.125rem #000;
  pointer-events: none;
}

/* 확인창·경고창·팝업·즉완상점 = 양피지 + 프레임 + 아트 버튼 (6단계 2026-06-12 — 패널과 한 세트. 구 어두운 박스 폐기) */
.confirm-box {
  background: #5f3f1c url('../ui/frame/parch_dark_v1.jpg') center / 100% 100% no-repeat;   /* ★짙은 양피지 (2026-07-03 — 구 밝은 종이 폐기) */
  border: 1px solid rgba(255, 220, 150, .35); border-radius: 0.75rem;
  box-shadow: 0 0.625rem 2.125rem #000c;
  padding: 0.875rem 1rem; max-width: min(80%, 40rem); font-size: 0.8125rem; line-height: 1.6;
  color: var(--ov-w); text-shadow: 0 1px 0.125rem rgba(0, 0, 0, .6);
}
.confirm-box b { color: var(--ov-y); }
.confirm-box .dim-text { color: var(--ov-w); opacity: .75; }
.confirm-box .lack, .confirm-box .lack b { color: var(--ov-r); }
/* 경고창(warn) = 부족 안내 — 글씨 크게·굵게 강조 (2026-06-23 사용자) */
#warn-overlay .confirm-box p { font-size: 0.9688rem; font-weight: 700; line-height: 1.65; color: #FFD17A; }
.confirm-box .srow-title, .confirm-box .srow-desc { color: var(--ov-w); }
.confirm-box .srow-title b:first-of-type { color: var(--ov-y); }
.confirm-box .sec-title { background: transparent; color: var(--ov-w); }
.confirm-box .sec-title b { color: var(--ov-y); }
.confirm-box ul.cost li b { color: var(--ov-w); }
.confirm-box ul.cost li.time, .confirm-box .time { color: #9fc7ff; }
.confirm-box .s-input, .confirm-box .s-select, .confirm-box textarea { background: rgba(0, 0, 0, .35); border-color: rgba(255, 220, 150, .3); color: #ffe9b8; }
.confirm-box .s-table { background: transparent; color: var(--ov-w); }
.confirm-box .s-table td { border-bottom: 1px solid rgba(255, 225, 170, .22); }
.confirm-box .s-table th { background: rgba(0, 0, 0, .25); color: var(--ov-w); }
.confirm-box .s-table b { color: var(--ov-y); }   /* 표 값 = 노랑 (구 "첫 b = 흰색" 유물 규칙 삭제 2026-07-10 — 기본→적용후 문법 폐기로 소비자 0. 이 유물이 노랑을 덮어 빈 흰 숫자로 보이던 원흉) */
.confirm-box .srow { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid rgba(255, 225, 170, .2); margin-bottom: 0; }
.confirm-box .gain-title { color: var(--ov-y); }
.confirm-box .cd-text { color: var(--ov-y); }
/* 등급·상태색 = 기본 밝은 톤 그대로 (짙은 양피지 — 구 먹 톤 전용색 폐기 2026-07-03) */
/* (팝업 버튼 전용 스킨 폐기 2026-07-03 — 기본 .fac-btn 단일 아트를 그대로 씀) */
.confirm-btns { display: flex; gap: 0.75rem; justify-content: center; margin-top: 0.875rem; flex-wrap: wrap; }   /* 좁은 폭 = 줄바꿈 (아트 버튼이 구 버튼보다 넓음 — 2026-06-12) */

/* 강화/합성 */
.sub-bar { margin: 0 0 0.5rem; }
/* 상점 보물칸 묶음 구분선 (방어 보물 / 지력 보물 사이 — 라벨 없이 선만). 2026-06-30 */
.shop-grp-sep { height: 0; border-top: 1px dashed rgba(220,190,120,.30); margin: 0.75rem 0.75rem; }
.ptab.sub { font-size: 0.75rem; padding: 0.3125rem 0.25rem; min-width: 2.5rem; }
.enh-wrap { display: flex; gap: 0.625rem; align-items: flex-start; }
.enh-list { flex: 1; min-width: 0; }
.enh-detail { flex: 1.2; position: sticky; top: 0; align-self: flex-start; }   /* 우측 상세 고정 — 좌측 목록만 스크롤 (2026-06-12 사용자: 합성 화면) */
/* ⓘ 안내 버튼 — 카드 우측 상단 (아트 btn_info_v1, 2026-07-03 사용자 제작) */
.info-btn { position: absolute; right: 0.4375rem; top: 0.4375rem; width: 1.625rem; height: 1.625rem; border: none; padding: 0; cursor: pointer;
  background: url('../ui/btn/btn_info_v1.png') center / contain no-repeat; filter: drop-shadow(0 1px 0.1875rem rgba(0,0,0,.5)); z-index: 2; }
.info-btn:active { transform: scale(.9); }
.enh-item {
  display: flex; align-items: center; gap: 0.375rem; font-size: 0.7813rem;
  padding: 0.375rem 0.5rem; border-radius: 0.375rem; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 0.1875rem; 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: 0.6875rem; color: #c9b98e; white-space: nowrap; }
.item-icon { border-radius: 0.375rem; flex-shrink: 0; display: block; }
/* 등급 액자 — 투명 아이템 img 뒤에 프레임 아트가 비침 (1초록·2파랑·3금). 2026-06-30 아이템 대개편 */
/* border-radius 0 = 사각 프레임 모서리(테두리) 안 깎이게. background 100% = 박스 꽉 채워 테두리 안 짤림 */
.item-icon.ifr-1, .item-icon.ifr-2, .item-icon.ifr-3 { border-radius: 0; }
.item-icon.ifr-1 { background: #241a10 url('../ui/frame/frame_item_1.png') center / 100% 100% no-repeat; }
.item-icon.ifr-2 { background: #241a10 url('../ui/frame/frame_item_2.png') center / 100% 100% no-repeat; }
.item-icon.ifr-3 { background: #241a10 url('../ui/frame/frame_item_3.png') center / 100% 100% no-repeat; }
.enh-head { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
.enh-btns { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem; flex-wrap: wrap; }
@keyframes enhPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fuse-boxes { display: flex; gap: 0.625rem; justify-content: center; margin: 1.875rem 0 0.75rem; }   /* 위 간격 확대 — ⓘ 버튼과 안 붙게 (2026-07-03 사용자) */
.fuse-box {
  width: 4rem; height: 4rem; border-radius: 0.5rem; display: grid; place-items: center;
  background: url('../ui/icon/ico_question.png') center / 34% no-repeat, rgba(0, 0, 0, .5); border: 1px dashed #7a5c30;
  font-size: 0; color: #7a6a4a; text-align: center; padding: 0.125rem;   /* 빈칸 ? = 상아 물음표 아트 (2026-07-09 1차 — 글자 숨김) */
}
.fuse-box.filled { font-size: 0.75rem; font-weight: 700; border: none; padding: 0; overflow: visible; cursor: pointer; position: relative; background: rgba(0, 0, 0, .5); border-radius: 0; }
.fuse-box.filled .item-icon { width: 100%; height: 100%; border-radius: 0; }   /* 등급 액자 모서리가 칸 라운드에 깎이던 것 수리 — 액자 아트가 칸 그 자체 (2026-07-09 폰 검수) */
.fuse-x {
  position: absolute; top: 0.125rem; right: 0.125rem; width: 1.125rem; height: 1.125rem; font-size: 0;
  background: url('../ui/btn/btn_x_v2.png') center / contain no-repeat;
  opacity: 0; transition: opacity .15s;   /* ✕ 글리프 → 청동 닫기 단추 (2026-07-09 1차) */
}
.fuse-box.filled:hover .fuse-x { opacity: 1; }
.fuse-box.filled:hover { box-shadow: 0 0 0.5rem #ff8a7a99; }

/* 아이템 획득 결과 팝업 (합성 성공 등) */
.gain-title { text-align: center; font-size: 1.125rem; font-weight: 900; color: var(--ov-y); text-shadow: 0 0.125rem 0.25rem #000; margin-bottom: 0.5rem; }
.gain-art { display: block; width: 11.875rem; max-width: 70%; margin: 0 auto; border-radius: 0.625rem; box-shadow: 0 0.1875rem 0.625rem #000a; animation: enhPop .28s ease-out; }
.gain-item { text-align: center; margin-top: -2.125rem; position: relative; }
.gain-item.no-art { margin-top: 0.375rem; }
.gain-item .item-icon { margin: 0 auto 0.375rem; border: 0.125rem solid #ffd24a; box-shadow: 0 0.125rem 0.5rem #000; }
.gain-item p { margin: 0.125rem 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: 0.125rem solid #fff; border-radius: 0.5rem; 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 0.125rem #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 0.125rem #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: 0.125rem 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: 3.5rem; height: 3.5rem; font-size: 0; border-color: #7a6a4a;
  background: url('../ui/icon/ico_question.png') center / 40% no-repeat, radial-gradient(circle at 38% 32%, #5a4a32, #2c2014); }   /* ?? 글자 → 상아 물음표 아트 (2026-07-09 1차) */
.hero-row { align-items: center; font-size: 0.8125rem; }
.hero-row > span { flex: 1; text-align: center; }
.hero-row b { color: var(--ov-y); }
.hero-pick-row { cursor: pointer; align-items: center; }
.hero-pick-row:hover { border-color: var(--gold); }
/* ═══ 내무장 상세 = 손삼 구도 (2026-07-03 사용자 확정): 열전 풀폭 / 왼쪽 초상·상태·전적 / 가운데 스탯 세로 / 오른쪽 장비창↔주사위 토글.
   내용 덩어리마다 검은 반투명 깔개(그 부분만) + 라벨 흰 / 수치 노랑 ═══ */
.hd-lore { background: rgba(0,0,0,.42); border-radius: 0.5rem; padding: 0.375rem 0.6875rem; margin: 0.3125rem 0; font-size: 0.8125rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* 열전 = 최대 2줄 말줄임 — 긴 열전이 화면 스크롤 유발 (2026-07-03 사용자 "스크롤 싫다") */
.hero-detail { display: flex; gap: 0.625rem; align-items: stretch; margin-top: 0.125rem; }
/* ⚠각 열 min-width:0 — 버튼 줄(min-content)이 열을 강제 확장해 옆 열 짓눌림 방지 (2026-06-12 사용자 버그 제보) */
.hd-port, .hd-mid, .hd-right { min-width: 0; }
.hd-right { display: flex; flex-direction: column; }   /* 장비판·주사위판이 행 높이를 꽉 채우게 — 행 높이 = 스탯칸 기준 = 두 판 높이 자동 통일 (2026-07-03 사용자) */
.hd-port { flex: none; width: 6rem; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; text-align: center; }
.hd-status-tag { font-size: 0.7813rem; font-weight: 700; background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; padding: 0.25rem 0.75rem 0.3125rem; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; }   /* 상태 태그 = 먹빛 알약 칩 아트 (2026-07-09 1차) */
.hd-record { width: 100%; background: rgba(0,0,0,.42); border-radius: 0.4375rem; padding: 0.3125rem 0.375rem; font-size: 0.75rem; line-height: 1.55; }
.hd-record b { color: var(--ov-y); }
.hd-mid { flex: 0 0 13.5rem; background: rgba(0,0,0,.42); border-radius: 0.5625rem; padding: 0.5625rem 0.75rem; display: flex; flex-direction: column; }   /* 스탯 칸 고정폭 — 더 좁게(경험치바도 같이 짧아짐), 남는 폭 = 장비·주사위 (2026-07-03 사용자) */
.hd-name { font-size: 0.9375rem; font-weight: 800; margin-bottom: 0.25rem; }
.hd-name .hd-grade { color: var(--ov-y); }
/* 스탯 세로 리스트 (손삼式: 라벨 왼쪽 흰 / 값 오른쪽 노랑) — 상세·주사위·고용 공용 */
/* 값 = 라벨 바로 뒤에 붙임 (2026-07-03 사용자 확정 — "공격력: 19". 구 오른쪽 끝 정렬 폐기) */
.statlist p { display: flex; justify-content: flex-start; align-items: center; gap: 0.4375rem; margin: 0.1563rem 0; font-size: 0.875rem; font-weight: 700; }
.statlist p b { color: var(--ov-y); font-variant-numeric: tabular-nums; }
/* 무장 스탯 아이콘 (공격=stat_p·지력=stat_i·방어=stat_c1·통솔=stat_c2, 유니티 아트 2026-06-23) */
/* 토스트·경고 아이콘 (유니티 아트 2026-06-23) */
/* ── 토스트 (라오킹式 — 2026-07-08 사용자: 구 청록 그라데이션 줄 폐지) — 어두운 반투명 알약, 흰 글씨 + <b> 노랑, 떴다 스르륵 ── */
#toast.game-banner { position: absolute; left: 50%; top: calc(var(--top-h) + var(--sat) + 0.5rem); transform: translateX(-50%);
  display: inline-flex; justify-content: center; align-items: center; padding: 0.5rem 1.25rem; border-radius: 0.6875rem;
  background: rgba(10, 12, 16, .84); box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,.5);
  z-index: 200; pointer-events: none; opacity: 0; transition: opacity .35s; max-width: 90%; }
#toast.game-banner .gb-inner { display: inline-flex; align-items: center; gap: 0.5625rem; }
#toast.game-banner .gb-txt { color: var(--ov-w); font-size: 0.9688rem; font-weight: 700;
  text-shadow: 0 1px 0.125rem rgba(0,0,0,.7); line-height: 1.4; word-break: keep-all; text-align: center; }
#toast.game-banner .gb-txt b { color: var(--ov-y); }
#toast.game-banner .gb-txt .ri { width: 1.125rem; height: 1.125rem; vertical-align: -0.1875rem; }
#toast.game-banner.show .gb-inner { animation: gbIn .3s cubic-bezier(.2,.9,.3,1.2); }
@keyframes gbIn { from { opacity: 0; transform: translateY(0.625rem) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* 경험 = 숫자 줄 + 아랫줄 전체 폭 게이지 */
.xp-block { font-size: 0.7188rem; margin: 0.25rem 0 0.125rem; }
.xp-block .xp-gauge { display: block; width: 100%; max-width: none; height: 1rem; margin-top: 0.1875rem; }
.hd-btns { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.5rem; }
.hd-right { flex: 1 1 auto; display: flex; flex-direction: column; }
/* 장비창 = 검은 판 + 슬롯 손삼 배치(보물 좌상·갑주 중앙·무기 좌중·반지 우중·탈것 하중) + 우상단 주사위 버튼.
   (실루엣 배경 아트 대기 — 오면 .equip-board background에 추가) */
.equip-board { position: relative; flex: 1; min-height: 0; background: rgba(0,0,0,.42); border-radius: 0.625rem; }   /* 높이 = 행(스탯칸) 따라감 — 고정 240 폐기, 주사위판과 자동 동일 (2026-07-03 사용자) */
.equip-board .eq-spot { position: absolute; width: 28%; }   /* 칸 확대 — 오른쪽 폭 넓어진 만큼 (2026-07-03 사용자) */
.equip-board .eq-spot[data-slot="4"] { left: 5%; top: 4%; }
.equip-board .eq-spot[data-slot="2"] { left: 38%; top: 26%; }   /* 갑주 ↓ — 주사위 버튼 밑 시계와 겹침 해소 (2026-07-03) */
.equip-board .eq-spot[data-slot="1"] { left: 5%; top: 50%; }
.equip-board .eq-spot[data-slot="5"] { left: 71%; top: 36%; }
.equip-board .eq-spot[data-slot="3"] { left: 38%; top: 64%; }
.eq-dicebtn { position: absolute; right: 0.375rem; top: 0.375rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1875rem; }
.eq-dicebtn .cd-mini { font-size: 0.7188rem; color: var(--ov-y); font-weight: 700; text-shadow: 0 1px 0.125rem #000; }
/* 주사위 판 = 장비창 자리 토글 (팝업 폐기 2026-07-03 손삼式): 현재 스탯 → (쿨·＋) → 새 스탯 */
.dice-pane { flex: 1; background: rgba(0,0,0,.42); border-radius: 0.625rem; padding: 0.375rem 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; }   /* 여백 압축 — 수락/다시/거절 줄까지 나와도 스크롤 0 (2026-07-03 사용자) */
.dp-box { background: rgba(0,0,0,.38); border-radius: 0.5rem; padding: 0.3125rem 0.625rem; }   /* 검은 깔개 소칸 — 주사위 스탯칸·고용 무장칸 공용 */
.dp-cols { display: flex; gap: 0.375rem; }   /* 현재│새 자질 = 좌우 2열 — 한 화면·스크롤0 (2026-07-03 사용자) */
.dp-cols .dp-box { flex: 1; min-width: 0; }
.dice-pane .dp-box .statlist p { margin: 1.5px 0; font-size: 0.8438rem; }
.dice-pane .dp-head { display: flex; justify-content: space-between; align-items: center; }
.dice-pane .dp-title { font-size: 0.75rem; font-weight: 800; color: var(--ov-w); margin-bottom: 0.125rem; }
.dice-pane .dp-mid { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.125rem 0; }
.enl-opt {
  display: block; text-align: center; margin-top: 0.375rem;
  font-size: 0.75rem; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; cursor: pointer;
}
.enl-opt input { accent-color: #e0b961; vertical-align: -0.125rem; }
/* 시트 (장비·연무장 = 아래서 올라오는 패널, 2026-06-25 인라인 폐기. #game portal·z200=대전결과 팝업(300)이 위에) */
.sheet-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 14, 6, .5); }
.confirm-box.sheet-box { width: 100%; max-width: 35rem; max-height: 80%; border: none; border-image: none; border-top: 0.1875rem solid #9c7320; border-radius: 1rem 1rem 0 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 -0.375rem 1.5rem #000a; animation: sheetUp .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 0.6875rem 0.875rem 0.5625rem; border-bottom: 1px solid rgba(255, 225, 170, .25); flex: none; }
.sheet-head b { color: var(--ov-y); font-size: 0.9375rem; }
.sheet-x { width: 1.75rem; height: 1.75rem; border: none; font-size: 0; cursor: pointer; padding: 0;
  background: url('../ui/btn/btn_x_v2.png') center / contain no-repeat; filter: drop-shadow(0 1px 0.1875rem rgba(0,0,0,.5)); }   /* ✕ 글리프 → 청동 닫기 단추 (2026-07-09 1차) */
.sheet-body { overflow-y: auto; padding: 0.5rem 0.875rem calc(1.125rem + var(--sab, 0px)); }
.sheet-body .tab-placeholder { color: rgba(255,255,255,.6); text-align: center; padding: 1.5rem 0; }
/* 장비 칸 — 금테 슬롯 틀에 아이콘이 꽉 차게, 이름은 칸 아래 (2026-06-12 사용자: "그 부분을 다 자연스럽게 덮어지게") */
.eq-spot { cursor: pointer; text-align: center; min-width: 0; }
.eq2-frame { display: block; position: relative; width: 100%; aspect-ratio: 1;
  background: url('../ui/frame/slot2.png') center / 100% 100% no-repeat, radial-gradient(circle at 50% 42%, rgba(14,22,18,.5), rgba(8,14,10,.32));
  border: none; border-radius: 0.5625rem; }   /* 금테 슬롯 아트 5칸 공통 (2026-07-03 사용자 — 가방 슬롯과 동일) */
.eq2-frame .item-icon { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 0.375rem; object-fit: cover; }
.eq2-frame .eq2-ghost { opacity: .3; filter: grayscale(.85); }   /* 빈 칸 = 부위 대표 장비 흐릿하게 */
.eq2-label { display: block; margin-top: 0.1875rem; font-size: 0.6875rem; line-height: 1.25; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; }   /* 어두운 배경 기본 — ui2(양피지)는 위에서 먹색 덮음 */
.eq-spot:hover .eq2-frame { filter: drop-shadow(0 0 0.375rem #ffe9a8aa); }

/* 주막(고용) = 손삼 구도 v2 (2026-07-03 재교정 — 사진 회전 오독 수정): 한 검은 판, 위 = 무장(초상·이름·스탯·열전) / 아래 = 행동 줄(시계 · 가격 · 고용 · ＋) */
.pub-box { padding: 1rem 0.875rem; margin-top: 1.625rem; }   /* 틀을 상단에서 조금 내림 (2026-07-04 사용자) */
.pub-box .srow-desc.center { margin-bottom: 0.875rem; }   /* 설명글 ↔ ?? 동그라미 여유 (2026-07-04 사용자 "너무 가까워") */
.pub-box > .center { margin: 0.75rem 0; }
.pub-box ul.cost.center { margin: 0.875rem 0 0.25rem; }
.pub-box .center-btn { margin-top: 0.75rem; }
/* 고용 탭 = 주막 그림 배경 (사용자 아트 2026-07-03) — 검은 판(.pub-panel)이 위에 떠서 글씨 가독 */
.scr-body.pub-bg { background: url('../ui/frame/pub_bg_v1.jpg') center / cover; }
.pub-panel { width: min(30rem, 100%); margin: auto auto 0.25rem; background: rgba(0,0,0,.55); border-radius: 0.625rem; padding: 0.75rem 1rem;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }   /* 폭 고정(타이머 폭 변해도 판 안 흔들림) + 하단 배치 (2026-07-03 사용자) */
/* 타이머 숫자 = 등폭 고딕 (써라운드는 숫자 폭이 제각각 → 초마다 흔들림. 2026-07-03) */
.pub-cd, .cd-box, .cd-text, #enh-cd, ul.cost li.time, .time, .eq-dicebtn .cd-mini { font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
.pub-hero-head { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; margin-bottom: 0.3125rem; }
.pub-actions { display: flex; align-items: center; justify-content: center; gap: 1.375rem; margin-top: 0.625rem; flex-wrap: wrap; }
.pub-cd { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 700; color: var(--ov-y); font-variant-numeric: tabular-nums; }
.pub-price { display: flex; align-items: center; gap: 0.1875rem; font-size: 0.875rem; color: var(--ov-w); }
.pub-price b { color: var(--ov-y); }
.pub-plus { cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 0.125rem; }

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

/* + 단축 아이템 버튼 (손삼 promotebutton) — 금 십자 btn_plus_v4 (2026-07-03 통일) */
.promo-btn {
  width: 1.375rem; height: 1.375rem; border-radius: 50%; cursor: pointer;
  border: none; color: transparent; font-size: 0; line-height: 1;
  background: url('../ui/btn/btn_plus_v4.png') center / contain no-repeat;   /* ＋ = 금 십자 아트 (2026-07-03 사용자 제작 — v2·v3 폐기, 이 한 장) */
  vertical-align: middle; padding: 0;
}
.promo-btn.sm { width: 1.125rem; height: 1.125rem; }
.promo-btn:active { transform: scale(0.9); }
.promo-box { min-width: 20.625rem; max-height: 80%; overflow-y: auto; }

/* 옵션 동전 아이콘 */
.hidden { display: none !important; }

/* 가방 (2026-06-07) — 선택판매 모드(행 터치 선택) + 장착중 뱃지 */
.bag-equip { color: #8fd18f; font-size: 0.6875rem; margin-left: 0.375rem; }
/* 소비품 아이콘 (아트 수급 전 임시 — 이름 첫 자) */
.goods-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid #c9a35b; border-radius: 0.375rem; background: rgba(60, 40, 20, .55); color: #f3e9d2; font-weight: bold; margin-right: 0.375rem; }
.goods-icon.gicon-fr { border: none; border-radius: 0; background-color: transparent; }   /* 액자 아트(frame_item) 쓸 땐 기본 금테 제거 (2026-07-01) */
   /* 상점 아트·소모품 이름 = 탭하면 상세 팝업 (2026-07-01) */
/* ── 원보 구입(충전) 카드형 (2026-07-01) ── */
/* 원보 충전 카드 = 파란 카드 아트 위에 [원석·기본원보·₩가격] + 첫구매 빨간 배지 (2026-07-02 로드모바일式).
   5개 한 줄 = 한 화면에 다 보이게(스크롤은 누적충전만). 원석·숫자 크게 = 빈 공간 채움. */
/* 카드 줄을 위에 붙이지 말고 남은 세로공간 가운데로 (2026-07-02 사용자 — 1→2 위치 이동) */
.charge-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5625rem; margin: auto 0; align-items: start; }
.charge-card { position: relative; aspect-ratio: 440 / 660; background: url('../ui/shop/charge_card.png') center / 100% 100% no-repeat; cursor: pointer; filter: drop-shadow(0 0.1875rem 0.4375rem rgba(20,60,90,.28)); }
.charge-card:active { transform: translateY(1px); filter: brightness(.97); }
/* 원석 그림 = 위에 딱 붙지 않게 위 여백 두고 중앙쪽으로 (2026-07-02 사용자) */
.charge-art { position: absolute; left: 8%; right: 8%; top: 14%; height: 50%; background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 0.1875rem 0.3125rem rgba(30,40,70,.3)); }
.charge-gem { position: absolute; left: 0; right: 0; top: 68%; display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 1.3125rem; font-weight: 900; color: #4e2ea0; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.7); white-space: nowrap; padding: 0 5%; }   /* 새 서체 폭 반영 축소 (2026-07-03 사용자 — 칸 벗어남) */
.charge-gem .ri { width: 1.5rem; height: 1.5rem; flex: none; }   /* 원보 아이콘 = 고정 크기 (숫자 길어도 안 쪼그라듦 — 2026-07-03 사용자) */
/* ₩금액 = 아래 시안 바 정중앙 (bottom 5%~17% 밴드 = 바 위쪽으로 살짝 올림) */
.charge-price { position: absolute; left: 0; right: 0; bottom: 5%; height: 12%; display: flex; align-items: center; justify-content: center; font-size: 1.1875rem; font-weight: 900; color: #fff; text-shadow: 0 1px 0.1875rem rgba(0,70,105,.85); letter-spacing: .3px; white-space: nowrap; }   /* 새 서체 폭 반영 축소 (2026-07-03) */
/* 충전 헤더 = 제목 + 우측 누적보상 버튼 */
.charge-head { display: flex; align-items: center; gap: 0.625rem; }
.charge-head .sec-title { flex: 1 1 auto; margin: 0; }
/* 누적충전 보상 버튼 = 표준 버튼 아트 (btn_gold2 폐기 — 2026-07-03) */
.cumul-btn { flex: none; padding: 1px 0.625rem; border-style: solid; border-width: 0.375rem 0.8125rem; border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.375rem 0.8125rem / 0 stretch; background: none; color: var(--ov-y); font-weight: 700; font-size: 0.8125rem; cursor: pointer; text-shadow: 0 1px 0.125rem #000000b0; }
.cumul-btn:active { filter: brightness(1.08); }
/* 누적충전 보상 팝업 */
.cumul-ov { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(18,12,5,.45); backdrop-filter: blur(0.125rem); }
.cumul-box { width: min(35rem, 86%); max-height: 84%; overflow-y: auto; padding: 1rem 1.125rem 1.125rem; border-radius: 0.9375rem; border: 1px solid rgba(255,220,150,.35); background: #5f3f1c url('../ui/frame/parch_dark_v1.jpg') center / 100% 100% no-repeat; box-shadow: 0 0.875rem 2.125rem rgba(0,0,0,.45); color: var(--ov-w); }   /* 짙은 양피지 (2026-07-03) */
.cumul-hd { display: flex; align-items: center; gap: 0.5rem; color: var(--ov-w); margin-bottom: 0.75rem; text-shadow: 0 1px 0.125rem rgba(0,0,0,.55); }
.cumul-hd b { font-size: 1.125rem; color: var(--ov-y); }
.cumul-x { margin-left: auto; width: 1.75rem; height: 1.75rem; flex: none; border: none; font-size: 0; cursor: pointer;
  background: url('../ui/btn/btn_x_v2.png') center / contain no-repeat; }   /* ✕ 글리프 → 청동 닫기 단추 (2026-07-09 1차) */
.cumul-x:active { filter: brightness(.95); }
.cumul-list { display: flex; flex-direction: column; gap: 0.3125rem; }
.charge-badge { position: absolute; top: -6%; right: -6%; width: 62%; aspect-ratio: 400 / 240; background: url('../ui/shop/charge_badge.png') center / 100% 100% no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.7813rem; font-weight: 800; color: #fff; text-shadow: 0 1px 0.125rem rgba(110,10,10,.9); line-height: 1; z-index: 3; padding-bottom: 4%; white-space: nowrap; }
.charge-badge .cb-plus { display: flex; align-items: center; gap: 0.125rem; font-size: 0.9375rem; font-weight: 900; color: #ffe14d; text-shadow: 0 1px 0.125rem rgba(120,40,0,.9); margin-top: 1px; white-space: nowrap; }   /* 새 서체 폭 반영 축소 — 배지 칸 넘침 (2026-07-03 사용자) */
.charge-badge .ri { width: 0.9375rem; height: 0.9375rem; flex: none; }
.charge-prog { margin-bottom: 0.5rem; }
.charge-prog-bar { position: relative; height: 0.8125rem; border-radius: 0.3125rem; background: url('../ui/gauge/gauge_frame.png') center / 100% 100% no-repeat; border: none; }   /* 게이지 틀 아트 통일 (2026-07-09 2차) */
.charge-prog-bar span { display: block; position: absolute; left: 3.6%; top: 26%; height: 48%; max-width: 92.8%; background: linear-gradient(90deg, #d4af37, #ffe9a8); border-radius: 0.1875rem; transition: width .3s; }
.charge-prog-txt { font-size: 0.75rem; color: rgba(255,255,255,.8); margin-top: 0.3125rem; text-align: center; }
.charge-prog-txt b { color: var(--ov-y); }
.charge-ms.done { opacity: .55; }

/* 좌상단 진행 중 작업 위젯 + 상단바 토지 (2026-06-07) */
/* 손삼 divCityBuildCountdown 회수 (시간색 #FFFC17 = .tooltip b). 세로 전환으로 배치 변경 (2026-06-08 사용자):
   화면 중간(26%)이 건물을 가림 → 최상단(상단바 바로 아래) + 글씨 작게 + 배경/글자 연하게 */
#job-ticker { position: absolute; right: calc(var(--sar) + 1.5%); left: auto; top: calc(var(--top-h) + var(--sat) + 1.125rem); z-index: 50; font-size: 0.8125rem; color: var(--ov-w); max-width: 20rem; transition: top .25s ease;   /* +18px = 상단 토지 칩과 간격 (2026-07-08 사용자 "너무 가까워") */
  display: flex; flex-direction: column; align-items: flex-end; }   /* 우측 끝 + 카메라 안전영역(폰 뒤집으면 구멍이 오른쪽) — 2026-07-08 사용자 */
#game.top-hidden #job-ticker { top: calc(var(--sat) + 0.25rem); }   /* 상단바 접으면 같이 따라 올라감 */
#game.in-building #job-ticker { display: none; }   /* 마을(성 화면)에서만 표시 — 손삼 동일 */
#job-ticker .job-row { background: url('../ui/gauge/gauge_frame.png') center / 100% 100% no-repeat; border: none; border-radius: 0.5625rem; padding: 0.25rem 0.75rem; margin: 0.1875rem 0; white-space: nowrap; text-shadow: 0 1px 0.125rem #000; display: flex; align-items: center; gap: 0.3125rem;   /* 게이지 틀 통일 (2026-07-03 사용자) */
  position: relative; overflow: hidden; z-index: 0; }   /* 줄 자체가 진행 게이지 (로드모바일식 — 2026-06-12) */
#job-ticker .job-fill { position: absolute; left: 0; top: 0; bottom: 0; z-index: -1; border-radius: 0.5rem;
  background: linear-gradient(180deg, rgba(120, 176, 255, .65), rgba(70, 120, 210, .65)); }   /* 진행 채움 = 파랑 CSS */
#job-ticker .job-plus { cursor: pointer; }
#job-ticker .job-row b { color: var(--ov-y); }
#job-ticker .job-plus { width: 1.125rem; height: 1.125rem; flex: none;   /* ＋ = 금 십자 아트 v4 (promo-btn과 동일 — 2026-07-03 통일) */
  background: url('../ui/btn/btn_plus_v4.png') center / contain no-repeat;
  color: transparent; font-size: 0; opacity: .92; }
/* 임무 상태 색 (손삼 문구: 새로운 임무/임무 수락/임무 완료/완료) */
  .q-ready { color: #6fe87a; }  /* ===== 지도 (2026-07-03 가로 풀스크린 개편 — 라오킹式 플로팅) =====
   지도 = 패널 전체(.mapfs) 꽉 채움, 부가 UI = 전부 플로팅(좌표캡슐·찾기판·＋－⌂·미니맵·출정배지·정보카드).
   구 "정사각 지도 + 옆 정보기둥"(.map-wrap/.map-side/.map-nav) 폐기 — 스크롤 0 */
.mapfs { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.map-grid {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none;   /* ★브라우저 스크롤 가로채기 차단 — 드래그·핀치가 지도 전용으로 (찔끔 끊김 해결) */
  background: #85815f;   /* 지형 평균 흙색 — 평소엔 셀이 다 덮고, 축소 핀치 중 드러나는 바깥이 "아직 안 그려진 땅"으로 보이게 (검은 띠 제거 2026-07-09) */
}
.map-cell { position: relative; cursor: pointer; background-size: cover; background-position: center; background-color: #85815f; }   /* 격자선 제거 — 지형 타일 지면. 바탕색 = 지형 평균 흙색(질감을 그리기 전 순간에 검은 판 대신 비침 — 줌 깜빡임 안전망 2026-07-09) */
/* 지형 타일 (2026-06-12 — B안 수묵담채 심리스 텍스처. terr 1평원 2풍족한땅 3산림 4산맥 5산비탈 6물.
   ★terr3/ = 새 폴더(교훈 6: 같은 파일명 = 폰 하루 캐시). 구 terr/(1차)·terr2/(A안)는 삭제됨(2026-06-12 미사용 정리 — 원본은 이미지파일/·git에) */
.map-cell:hover { box-shadow: inset 0 0 0 6.1875rem rgba(255, 233, 168, .15); }
.map-cell.sel { box-shadow: inset 0 0 0 0.125rem #ffe14d, inset 0 0 0 6.1875rem 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 0.1875rem 0.1875rem rgba(0, 0, 0, .45)); }   /* 지면 그림자 — 붕 뜬 느낌 완화 */
/* 성 강조 (2026-06-12 ⑤, 2차 보강 — "티가 안 난다") : 권역 빛무리 + 강한 광택. 내 성 = 금빛 / 다른 주군 = 푸른빛 */
.map-cell.mycity::before, .map-cell.ucity::before {
  content: ''; position: absolute; inset: -12%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 60, .26) 0%, rgba(255, 200, 60, .12) 42%, transparent 62%);   /* 은은하게 — 진한 빛무리가 지형을 덮어 '흰 깨짐'으로 보였음 (2026-06-12 사용자) */
}
.map-cell.ucity::before { background: radial-gradient(circle, rgba(140, 195, 255, .5) 0%, rgba(140, 195, 255, .18) 42%, transparent 70%); }
.map-cell.mycity img { filter: drop-shadow(0 0 0.25rem rgba(255, 190, 40, .55)) drop-shadow(0 0.1875rem 0.1875rem rgba(0, 0, 0, .5)); }   /* 흰 광 제거 — 금테만 살짝 (2026-06-12) */
.map-cell.ucity img { filter: drop-shadow(0 0 0.1875rem rgba(220, 238, 255, .9)) drop-shadow(0 0 0.375rem rgba(90, 160, 255, .9)) drop-shadow(0 0.1875rem 0.1875rem rgba(0, 0, 0, .5)); }
.map-cell.mycity::after {
  content: ''; position: absolute; inset: -2%; border: 0.125rem solid rgba(255, 210, 74, .7); border-radius: 50%;
  pointer-events: none; animation: mycity-pulse 2.2s ease-out infinite;
}
@keyframes mycity-pulse { 0% { transform: scale(.78); opacity: .9; } 75% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }
/* 톤 통일 워시 — 타일 간 색감 편차를 한 꺼풀로 눌러줌 (셀 위·마커 아래) */
.map-gridin::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(rgba(216, 196, 156, .08), rgba(186, 160, 120, .14));
}
/* 내 성 길잡이 표찰 (2026-06-12 ③) — 화면 밖일 때 가장자리에 방향+거리 */
#map-home-arrow {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: 0.1875rem; transform: translate(-50%, -50%);
  background: rgba(22, 15, 8, .78); border: 1px solid rgba(255, 210, 74, .55); border-radius: 0.875rem;
  padding: 0.125rem 0.5rem 0.125rem 0.1875rem; color: var(--ov-y); font-size: 0.6875rem; font-weight: 700; cursor: pointer; user-select: none;
  text-shadow: 0 1px 0.125rem #000;
}
#map-home-arrow img { width: 1.25rem; height: 1.25rem; }
#map-home-arrow svg { display: block; }
/* 미니맵 (2026-06-12 ②) — 천하 전도 + 시야 네모. 풀스크린 개편 = 좌하단 플로팅 (2026-07-03) */
.minimap-box {
  position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 10;
  width: 7.375rem; height: 7.375rem; overflow: hidden;
  border: 1px solid rgba(255, 220, 150, .4); border-radius: 0.375rem; background: #171008; cursor: pointer;
  box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, .45);
}
.minimap-box canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#minimap-vp { position: absolute; border: 1px solid #ffe14d; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); pointer-events: none; }
.ms-star { width: 0.8125rem; height: 0.8125rem; vertical-align: -0.1875rem; margin-left: 0.125rem; }   /* 오랑캐 별 = 아트 (지도 라벨·찾기 목록 공용. 9px는 숫자와 겹치고 작아서 식별 불가 — 2026-06-12 사용자) */
.map-star .ms-star { width: 0.75rem; height: 0.75rem; vertical-align: -0.1875rem; }
.map-star { letter-spacing: .5px; display: inline-flex; align-items: center; gap: 1px; }   /* 숫자·별 겹침 해소 — flex 정렬 */
.map-star.star-user { color: var(--ov-w); }   /* 다른 주군 성 이름 = 흰색 (내 성 노랑과 구분 — 흰+노랑 통일 2026-07-03) */
.map-star.star-my { color: var(--ov-y); font-size: 0.5625rem; text-shadow: 0 1px 0.125rem #000, 0 0 0.25rem #000, 0 0 0.375rem rgba(255,180,0,.6); }   /* 내 성 이름 = 노랑 강조 */
.map-star {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; font-size: 0.5rem; font-weight: 700; color: var(--ov-y);
  text-shadow: 0 1px 0.125rem #000, 0 0 0.1875rem #000; pointer-events: none;
}
/* ── 풀스크린 플로팅 부품 (2026-07-03) — 유리알 캡슐 = 상단바 캡슐과 같은 계열 (진짜 질감은 아트 대기)
   상시 좌표 캡슐 = 사용자 지시로 제거 (2026-07-03) — 좌표 입력·이동은 찾기판 첫 줄 ── */
.map-pop {
  background: rgba(22, 16, 9, .78); border: 1px solid rgba(255, 220, 150, .35); border-radius: 0.625rem;
  color: var(--ov-w); box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, .45); backdrop-filter: blur(0.1875rem);
}
.map-pop.hidden { display: none; }
.mapfs .dim-text { color: var(--ov-w); opacity: .75; }   /* 어두운 캡슐 위 보조글 = 흰 (흰+노랑 통일 2026-07-03) */
.map-search-pop .s-input.num { width: 2.875rem; padding: 0.1875rem 0.25rem; font-size: 0.75rem; }
#game.in-map #chat-peek { display: none; }   /* 지도에선 채팅 미리보기 숨김 — 미니맵·정보카드와 겹침 (2026-07-03 사용자) */
/* 상단 가로 1렬 = ⌂·＋·－ (2026-07-04 사용자 — 우측은 정보카드 자리) / 우상단 = 찾기만 */
.map-fabs-top { position: absolute; left: 50%; transform: translateX(-50%); top: 0.5rem; z-index: 11; display: flex; flex-direction: row; gap: 0.375rem; }
.map-fabs-top .fac-btn { min-width: 2.875rem; padding: 0.125rem 0.625rem; font-size: 0.875rem; }
.map-fabs { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 11; display: flex; flex-direction: column; gap: 0.375rem; }
.map-fabs .fac-btn { min-width: 2.875rem; padding: 0.125rem 0.625rem; font-size: 0.875rem; }   /* 표준 높이 근접 (터치 여유는 min-width로) */
/* 좌상단 행군 위젯 (2026-07-04 사용자) — 검은 반투명 칩 줄 */
.map-march { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 11; display: flex; flex-direction: column; gap: 0.1875rem; max-width: 46%; pointer-events: none; }
.map-march .mm-row { background: rgba(0, 0, 0, .5); border-radius: 0.4375rem; padding: 0.1875rem 0.5625rem; font-size: 0.7188rem; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-march .mm-row b { color: var(--ov-y); }
.map-march .mm-t { color: var(--ov-y); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 찾기판 (돋보기 대체 — 오랑캐/자원지/주군 검색 통합) */
.map-search-pop { position: absolute; right: 3.875rem; top: 0.5rem; z-index: 12; padding: 0.5rem 0.625rem; width: 13.5rem; max-width: 60%; max-height: calc(100dvh - 1rem); display: flex; flex-direction: column; }
.map-search-pop .sec-title { color: var(--ov-w); font-size: 0.7813rem; margin: 0.125rem 0; }
#find-res { flex: 1; min-height: 0; overflow-y: auto; }   /* 찾기 결과만 판 안에서 내부 스크롤 — 판은 화면 높이에 갇힘 (잘림 수리 2026-07-09) */
#find-res .find-row { margin: 0.125rem 0; font-size: 0.75rem; color: var(--ov-w); }
#find-res .find-row.find-sel { color: var(--ov-y); font-weight: 800; }
/* 좌하단 = 출정 배지(미니맵 위) + 부대 판 */
/* 우측 세로 정보카드 (★2026-07-04 사용자 — 구 하단 중앙 바 폐기, 손삼式 왼쪽패널 구도를 우리 점유물에 맞춰 오른쪽으로.
   좌상 위젯·좌하 미니맵·상단 ⌂＋－·우하 ≡와 안 겹침. 찾기판과 상호 배타(.hidden 토글) */
.map-sidecard {
  position: absolute; right: 0.5rem; top: 3.125rem; z-index: 11; width: min(28%, 15.625rem);
  max-height: calc(100% - 9.375rem);   /* 내용만큼만 — 아래로 쭉 뻗던 판 폐기 (2026-07-04 사용자 "기능 대비 반투명이 너무 크다") */
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.25rem; padding: 0.625rem 0.75rem; text-align: center;
  background: rgba(22, 16, 9, .82); border: 1px solid rgba(255, 220, 150, .35); border-radius: 0.75rem;
  box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, .45); backdrop-filter: blur(0.1875rem); overflow-y: auto;
}
.map-sidecard.hidden { display: none; }
.map-sidecard .mi-title { font-size: 0.8438rem; font-weight: 700; color: var(--ov-w); margin: 0 0 0.125rem; text-shadow: 0 1px 0.125rem #000; }
.mi-tabs { display: flex; gap: 0.4375rem; justify-content: flex-end; margin: -0.1875rem -0.1875rem 1px 0; }   /* 즐겨찾기·공유 = 카드 우상단 아이콘 탭 (라오킹式 2026-07-09) */
.mi-tab { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 1px solid rgba(201, 163, 91, .5); background: rgba(40, 30, 16, .9); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, .4); }
.mi-tab img { width: 1.0625rem; height: 1.0625rem; display: block; }
.mi-tab:not(.on) img[alt="즐겨찾기"] { filter: grayscale(1) brightness(1.15); }   /* 미등록 = 회색 별, 등록 = 노란 별 */
.mi-tab.on { border-color: rgba(255, 210, 74, .85); }
.map-sidecard .mi-line { font-size: 0.7813rem; line-height: 1.55; color: var(--ov-w); margin: 0.125rem 0; white-space: normal; }
.map-sidecard .mi-y { color: var(--ov-y); font-weight: 800; }   /* 공격 횟수·시급 = 노랑 (손삼式) */
.map-sidecard .mi-stars { margin: 0.1875rem 0 1px; }
.map-sidecard .mi-star { width: 1.25rem; height: 1.25rem; margin: 0 1px; vertical-align: middle; }   /* 성급 = 별 아트 */
.map-btns { display: flex; gap: 0.375rem; margin: 0.4375rem 0 0; justify-content: center; flex-wrap: wrap; }
.map-btns:empty { display: none; }
.map-btns .fac-btn { padding: 1px 1rem; }   /* 표준 높이 통일 (2026-07-03 사용자 "일관성") */
/* 패널 껍데기 = 지도가 가장자리까지 (헤더는 .in-building이 원래 숨김 — 나가기 = 상단 홈버튼).
   도화지 카드 틀(.ui2.theme-light #panel = 88%폭·둥근모서리·종이배경)을 지도만 풀블리드 검정으로 뒤집음 */
.panel-map #panel, #panel-overlay.ui2.theme-light.panel-map #panel {
  width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; background: #171008;
}
.panel-map#panel-overlay, #panel-overlay.panel-map { padding: 0; }
.panel-map #panel-body { overflow: hidden; }
#panel-overlay.ui2.theme-light.panel-map #panel-body > .ptab-content { padding: 0; }   /* 탭내용 좌우 여백 제거 — 도화지 공통(1rem 패딩)보다 구체적으로 이겨야 함 */

/* 부대 이동 마커 (척후=매/군대=깃발) — 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 0.125rem 0.1875rem 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); }    /* 귀환 = 붉은색 */
.map-path line.other { stroke: rgba(200, 200, 200, .55); }  /* 남의 부대 = 옅은 회색 (부대 이동 공개 2026-07-09) */
.map-troop.mt-other { filter: drop-shadow(0 0 0.1875rem rgba(255, 70, 50, .85)); }  /* 남의 부대 마커 = 붉은 기운 */

/* 보고 줄 펼침 작전 버튼 (손삼 [+] 5버튼) */
/* (구 .wl-ops 삭제 2026-07-09 편지 개편 — 보고 줄 ＋펼침 폐기, 액션은 상세로 이동) */

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


/* ============================================================
   ★UI 2차 개편 — "박스 걷어내기" (2026-06-12 사용자 확정, ROK·로드모바일 참고)
   범위 = #panel-overlay.ui2 (시범 = 연무장 — main.js UI2_PANELS. 합격 후 건물별 확대)
   원칙: 양피지 위 먹글씨 + 먹선 구분선(항목별 진갈색 박스 폐기) / 버튼·탭·게이지 = 1차 아트 세트

   (2차 세트 대기: 패널 프레임·제목 명패·토글 칩·원형 버튼 — 이미지파일/아트요청_프롬프트.md)
   ============================================================ */
/* 등급색 — 기본(어두운 배경) = RANK_COLOR와 동일 / ui2(양피지) = 먹 톤. id 스코프 = 인라인 못 쓰는 자리의 우선순위 확보 */
/* 등급색 — 기본(어두운 배경) = RANK_COLOR와 동일 / ui2(양피지) = 먹 톤 (먹유리 한때 폐기했다 복원 2026-06-12) */
/* 영입 등급 = 숫자 tier(rk-1..5 = RANK_COLOR/RARITY와 동일) — 구 rk-S/A/B/C(카드끗수)는 2026-06-15 숫자화로 폐기, 2026-07-10 잔재 삭제 */
.rk-5 { color: #ffd24a; } .rk-4 { color: #c08aff; } .rk-3 { color: #6fb6ff; } .rk-2 { color: #7fd06a; } .rk-1 { color: #fff; }   /* 1성 = 흰색 (회색 기각 2026-07-03 사용자) */
/* (구 ui2 먹 톤 등급색 층 삭제 2026-07-03 — 짙은 양피지 전환으로 뒤의 밝은 재정의 블록이 항상 이겨 죽은 코드였음) */
.irk-1 { color: #9fdb6f; } .irk-2 { color: #6fb6ff; } .irk-3 { color: #ffd24a; }   /* 아이템 등급 1초록·2파랑·3금 */
.ok-t { color: #9be89b; } .bad-t { color: #ff8a6a; }    /* 상태색 (좋음/나쁨) */
.tr-gather { color: #8fd14f; } .tr-back { color: #9fc7ff; } .tr-go { color: #ffd24a; }   /* 부대 단계 (군정실) */
.tr-gather, .tr-back, .tr-go { display: inline-block; background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; padding: 1px 0.5625rem 0.125rem; font-size: 0.7188rem; font-weight: 700; text-shadow: 0 1px 0.125rem #000; }   /* 상태 = 먹빛 알약 칩 아트 (2026-07-09 1차) */
     /* 완료 체크 아트 */
.gift-t { color: #d8a0ff; }   /* 지정 거래 (시장) */
.find-sel { color: var(--ov-y); }   /* 지도 찾기 결과 — 선택 좌표 강조 */
/* 대화 — 양피지 위 말풍선 보조색 (말풍선 자체는 어두운 채로 대비 유지) */


.ui2 .chat-day span { background: rgba(0, 0, 0, .3); color: rgba(255,255,255,.75); }

/* 패널 기본 글색 = 먹 */


/* 줄(.srow) = 박스 제거 + 먹선 구분선 */
.ui2 .srow {  box-shadow: none;    position: relative; }
.ui2 .srow::after { content: ''; position: absolute; left: 3%; right: 3%; bottom: 0.125rem; 
   opacity: .6; pointer-events: none; }
.ui2 .srow.dim { opacity: .55; }

/* 먹글씨 — 흰 글자+검은 그림자 전면 제거 (양피지) */

   /* 설명 = 더 진한 먹 + 두껍게(.srow-desc font-weight 600)로 가독성 (2026-06-30) */
.ui2 .srow b, .ui2 .srow-title b, .ui2 .srow-prod b, .ui2 .hero-row b { text-shadow: none; }

.ui2 .dim-text { opacity: 1; text-shadow: none; }

.ui2 ul.cost li b { text-shadow: none; }
.ui2 ul.cost li.time, .ui2 .time { text-shadow: none; }

.ui2 .hs-out { color: #ff9f6f; }
.ui2 .hero-pin { filter: grayscale(1) opacity(.45); }
.ui2 .eq2-label { text-shadow: 0 1px 0.125rem rgba(0,0,0,.55); }
.ui2 .cd-box { text-shadow: none; }
.ui2 .fac-art.no-art { background: repeating-linear-gradient(45deg, rgba(90, 60, 20, .15), rgba(90, 60, 20, .15) 0.375rem, rgba(90, 60, 20, .08) 0.375rem, rgba(90, 60, 20, .08) 0.75rem); }

/* 섹션 제목 = 호두나무 명패 v2 (2026-07-09 — 가운데 균일·장식 양끝만이라 9-슬라이스로 늘어나도 안 깨짐. 구 plaque는 장식 겹침으로 기각·폐기) */
.ui2 .sec-title { background: none; border: 0.5625rem solid transparent; border-width: 0.5625rem 1.0625rem;
  border-image: url('../ui/frame/plaque_v2.png') 34 64 fill / 0.5625rem 1.0625rem stretch;
  border-radius: 0; padding: 0.125rem 0.25rem 0.1875rem; position: relative; }
.ui2 .war-form .sec-title { border: none; border-image: none; background: rgba(20, 12, 4, .25); border-radius: 0.375rem; padding: 0.375rem 0.625rem; }   /* 출정 폼 = 제목이 아니라 입력줄(선택·수량·MAX)이라 명패 제외 */

.ui2 .s-head4, .ui2 .s-headN { background: transparent; border-radius: 0; }

.ui2 .more-btn { background-color: transparent; color: transparent; border: none; box-shadow: none; }   /* 아트(btn_spin_plus/minus) 그대로 — 구 갈색 네모 폐기 (2026-06-14) */

/* 탭 = 아트 (활성 양피지 카드 / 비활성 어두운 나무 — ROK식) */
.ui2 .ptab-bar { background: transparent; padding: 0 0.125rem; gap: 0.25rem; }
.ui2 .ptab:hover { background-color: transparent; }

/* (ui2 버튼 전용 스킨 폐기 2026-07-03 — 기본 .fac-btn 단일 아트) */
.fac-btn.btn-sm { border-width: 0.25rem 0.4375rem; border-image-width: 0.25rem 0.4375rem; padding: 0 0.3125rem; font-size: 0.7188rem; }

/* 옵션 속성별 서브탭 = 토글 칩 아트 재사용 (2026-06-13) */
.ui2 .opt-subtabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.ui2 .opt-subtabs .fac-btn { border: none; border-image: none; border-radius: 0; box-shadow: none; filter: none;
  background: rgba(0, 0, 0, .28);  
  color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.ui2 .opt-subtabs .fac-btn:not(.btn-dim) { background: #4a3a20; color: #ffe9b8; font-weight: 800; }

/* 내 무장 정렬 = 민무늬 토글 (칩 아트 보관이동 2026-07-03 — 새 아트 대기) */
.ui2 .hero-sort .fac-btn { border: none; border-image: none; border-radius: 0; box-shadow: none; filter: none;
  background: rgba(0, 0, 0, .28);  
  color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; padding: 0.3125rem 0.5rem; }
.ui2 .hero-sort .fac-btn:not(.btn-dim) { background: #4a3a20; color: #ffe9b8; font-weight: 800; }


/* 제목 명패 (2차 세트) — 짧은 진짜 "제목"에만 .plaque 클래스로 (설명문 sec-title은 먹선 유지 — 여러 줄이면 명패가 늘어나 흉함) */
.ui2 .sec-title.plaque { flex-wrap: nowrap; white-space: nowrap; }
   /* 등급 메달 = 제목 옆 한 줄 (margin-auto가 다음 줄로 밀던 것 — 2026-06-12) */
.ui2 .sec-title.plaque::after { display: none; }
.ui2 .sec-title.plaque b { color: #ffd24a; }

/* 페이지 화살표 = 원형 청동 버튼 아트 (2차 세트) */
/* ═══════════════ 패널 공통 재정의 (구 "다크 글래스" 층 — 2026-07-09 대청소: 짙은 양피지 테마에 진 선언 전부 삭제, 산 것만 남김) ═══════════════ */
#panel-overlay.ui2 { border: none; border-image: none; box-shadow: inset 0 0 3.75rem rgba(0,0,0,.35); }
#panel-title, #panel-body h2 { color: #f3e7cc; text-shadow: 0 1px 0.125rem #000a; }
#panel-body h2 small { color: #c9a86a !important; }
.ui2 .s-head4, .ui2 .s-headN { border-bottom: 1px solid rgba(220,190,120,.25); }
.ui2 .s-table th { background: rgba(255,240,200,.06); color: #ece2cc; }
.ui2 .s-table td { border-bottom: 1px solid rgba(220,190,120,.16); }
.ui2 .s-table td > b:first-child { color: #e0d5bd; }
.ui2 .tab-placeholder small { color: #8f8067; }
.ui2 .enl-opt, .ui2 .eq2-label, .ui2 .hero-row td { color: #c3b596; }
.ui2 .enh-item { background: rgba(255,245,220,.05); }
.ui2 .enh-item.sel { background: rgba(255,210,74,.34); border: 0.125rem solid var(--ov-y); box-shadow: 0 0 0.5rem 0.125rem rgba(255,213,79,.55); }   /* 선택 하이라이트 강화 (2026-07-03 사용자 "너무 약해") */
.ui2 .ex-row { border-bottom: 1px solid rgba(220,190,120,.18); }
/* 등급·상태색 = 밝은 base톤 복귀 (양피지 먹톤 무효화) */
#panel-overlay.ui2 .rk-5, #panel-overlay.ui2 .irk-3, #panel-overlay.ui2 .find-sel, #panel-overlay.ui2 .tr-go { color: #ffd24a; }
#panel-overlay.ui2 .rk-4, #panel-overlay.ui2 .gift-t { color: #c98bff; }
#panel-overlay.ui2 .rk-3, #panel-overlay.ui2 .irk-2, #panel-overlay.ui2 .tr-back { color: #6fb6ff; }
#panel-overlay.ui2 .rk-2, #panel-overlay.ui2 .irk-1, #panel-overlay.ui2 .ok-t, #panel-overlay.ui2 .tr-gather, #panel-overlay.ui2 .q-ready { color: #9be89b; }
#panel-overlay.ui2 .ex-get b { color: #9be89b; }
#panel-overlay.ui2 .rk-1 { color: #fff; }   /* 1성 이름 = 흰색 (2026-07-03 사용자) */
#panel-overlay.ui2 .bad-t { color: #ff8a6a; }
.ui2 .srow-desc.lack, .ui2 .lack b, .ui2 .lack { color: var(--ov-r); }
.bag-cell.sel .bag-label, #panel-overlay.ui2 .bag-cell.sel .bag-label { color: #ffe9a8; }
.ui2 .chat-name { color: var(--ov-y); } .ui2 .chat-time { color: #8f8067; }   /* 이름 = 노랑 (흰+노랑 통일 2026-07-03) */
.ui2 .ptab.active { text-shadow: none; }
/* (.plaque 노랑 특례 삭제 2026-07-09 — 전 제목이 명패 v2 아트가 되면서 통일. .plaque = nowrap 표시만 남음) */
/* 놓치기 쉬운 나머지 먹색들 */
.ui2 .fuse-box { background: url('../ui/icon/ico_question.png') center / 34% no-repeat, url('../ui/frame/slot2.png') center / 100% 100% no-repeat, rgba(255,245,220,.05); border: none; }   /* 빈칸 = 금테 슬롯 아트 + ? (2026-07-09 2차 — 구 점선 테두리 폐기. ?는 폰검수 수리분) */
.ui2 .fuse-box.filled { background: rgba(255,245,220,.05); }
.ui2 .fac-art.no-art { color: #8f8067; }
.ui2 .hero-face.unknown { border-color: #6e5b40; color: #b7ab93; }
.ui2 .hs-idle { color: #b7ab93; } .ui2 .hs-role { color: #e0c060; }
/* ── 깊이·트림 (밋밋함 제거, 성의있게 2026-07-02) ── */
#panel-head { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(201,162,90,.55), transparent) 1; padding-bottom: 0.3125rem; }
.ui2 .canvas-box { box-shadow: inset 0 1px 0 rgba(255,231,180,.06); }

/* ═══════════════ 짙은 양피지 테마 (2026-07-03 사용자 — 구 밝은 도화지 폐기. 손삼式: 검은 글 0, 라벨=흰 / 수치·이름=노랑) ═══════════════ */
#panel-overlay.ui2.theme-light #panel-body,
#panel-overlay.ui2.theme-light .srow-title, #panel-overlay.ui2.theme-light .srow-prod, #panel-overlay.ui2.theme-light .ex-row, #panel-overlay.ui2.theme-light .troop-row, #panel-overlay.ui2.theme-light .hero-row, #panel-overlay.ui2.theme-light .enh-item, #panel-overlay.ui2.theme-light .s-table { color: var(--ov-w); text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; font-weight: 600; }   /* 검은 외곽선 + 굵게 = 손삼 글씨 처리 (2026-07-03 사용자) */
#panel-overlay.ui2.theme-light .srow-desc, #panel-overlay.ui2.theme-light .md-desc, #panel-overlay.ui2.theme-light .bag-label, #panel-overlay.ui2.theme-light .ex-have { color: var(--ov-w); text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
#panel-overlay.ui2.theme-light .srow b, #panel-overlay.ui2.theme-light .srow-title b, #panel-overlay.ui2.theme-light .srow-prod b, #panel-overlay.ui2.theme-light .hero-row b, #panel-overlay.ui2.theme-light .sec-title b, #panel-overlay.ui2.theme-light .s-table b, #panel-overlay.ui2.theme-light ul.cost li b { color: var(--ov-y); }
/* ★부족(lack) 빨강 = 테마 노랑보다 항상 우선 — 위 노랑 규칙이 id 주소라 공용 .lack(클래스 주소)을 덮던 것 수리 (2026-07-07 사용자: "부족한데 노랑으로 뜸") */
#panel-overlay.ui2.theme-light .lack, #panel-overlay.ui2.theme-light .lack b, #panel-overlay.ui2.theme-light ul.cost li.lack b, #panel-overlay.ui2.theme-light .srow-desc.lack { color: var(--ov-r); }
#panel-overlay.ui2.theme-light b.prod-next { color: #7fd06a; }   /* 다음 등급 수치 = 초록 유지, 어두운 양피지용 밝은 초록 (구 진녹 2f7a2f — 2026-07-03) */
#panel-overlay.ui2.theme-light .srow-title b:first-of-type { color: var(--ov-y); }   /* 이름도 노랑 (손삼式) */
#panel-overlay.ui2.theme-light .dim-text, #panel-overlay.ui2.theme-light .tab-placeholder { color: rgba(255,255,255,.65); }
#panel-overlay.ui2.theme-light .sec-title, #panel-overlay.ui2.theme-light .s-head4, #panel-overlay.ui2.theme-light .s-headN, #panel-overlay.ui2.theme-light #panel-title, #panel-overlay.ui2.theme-light #panel-body h2 { color: var(--ov-w); text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
/* 어두운 깔개/보드 컨테이너 = 외곽선 상속 (statlist·hd-lore 등 개별 지정 없는 글씨까지) */
#panel-overlay.ui2.theme-light .scr-body, #panel-overlay.ui2.theme-light .srow, #panel-overlay.ui2.theme-light .canvas-box, #panel-overlay.ui2.theme-light .md-gridwrap, #panel-overlay.ui2.theme-light .q-list, .confirm-box, .dp-box, .hd-lore, .statlist { text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
#panel-overlay.ui2.theme-light .md-detail, #panel-overlay.ui2.theme-light .md-detail * { text-shadow: none; }   /* 하늘색판(밝은 판)은 외곽선 제외 */
#panel-overlay.ui2.theme-light .md-detail { border-color: rgba(150,110,50,.3); border-left-color: rgba(150,110,50,.3); }
/* ★깔개 시스템 (2026-07-03 사용자 — 손삼式): 내용 덩어리마다 "검은 반투명 판"을 그 부분만 맞춰 깔고 그 위 흰/노랑 글씨. 한 장으로 통째 깔지 않음 */
#panel-overlay.ui2.theme-light .canvas-box { background: rgba(0,0,0,.42); border: none; border-radius: 0.5625rem; }
#panel-overlay.ui2.theme-light .srow { background: rgba(0,0,0,.42); border-radius: 0.5625rem; margin-bottom: 0.375rem; padding: 0.5rem 0.625rem; }
#panel-overlay.ui2.theme-light .s-table { background: rgba(0,0,0,.42); border-radius: 0.5625rem; overflow: hidden; }
/* (구 .q-list 통깔개 삭제 2026-07-09 — 임무 줄이 각자 깔개를 가져 이중 깔개였고, 수령으로 줄이 사라질 때 통깔개가 널뛰어 어색했음) */
#panel-overlay.ui2.theme-light .bag-slot { border-color: rgba(255,225,170,.3); }
#panel-overlay.ui2.theme-light .ptab { background: rgba(0,0,0,.3); border-color: rgba(255,220,150,.22); color: var(--ov-w); box-shadow: none; text-shadow: 0 1px 0.125rem #000; }
#panel-overlay.ui2.theme-light .ptab.active { background: linear-gradient(180deg, #a02818, #6b150a); border-color: #d4553a; color: var(--ov-y); }   /* 활성 탭 = 빨강 바탕 + 노랑 글 (손삼式) */
#panel-overlay.ui2.theme-light .s-input, #panel-overlay.ui2.theme-light .spinner input, #panel-overlay.ui2.theme-light .plan-per, #panel-overlay.ui2.theme-light .s-select, #panel-overlay.ui2.theme-light #mw-body, #panel-overlay.ui2.theme-light #clan-gmail-t { background: rgba(0,0,0,.35); border-color: rgba(255,220,150,.3); color: #ffe9b8; }
#panel-overlay.ui2.theme-light .cd-box { background: rgba(0,0,0,.45); border-color: rgba(255,220,150,.3); color: var(--ov-y); }
#panel-overlay.ui2.theme-light .cd-text, #panel-overlay.ui2.theme-light #enh-cd { color: var(--ov-y); }
#panel-overlay.ui2.theme-light .srow::after { background: none; height: 0; }   /* 구분선 폐지 — 줄마다 검은 깔개 판이라 판 자체로 구분됨 (2026-07-03) */
#panel-overlay.ui2.theme-light ul.cost li.time, #panel-overlay.ui2.theme-light .time { color: #9fc7ff; }
/* 등급·상태색 = 기본 밝은 톤 그대로 (구 먹 톤 블록 삭제 — 2026-07-03 짙은 양피지) */
#panel-overlay.ui2.theme-light .lack, #panel-overlay.ui2.theme-light .lack b, #panel-overlay.ui2.theme-light .srow-desc.lack { color: var(--ov-r); }
/* 선택된 아이템 이름 = 더 크게 (선택 카드가 밝은 금색이라 여기만 진한 글씨 유지 — 2026-07-02) */
#panel-overlay.ui2.theme-light .bag-cell.sel .bag-label { color: #140d04; font-size: 0.8125rem; font-weight: 800; text-shadow: none; }

/* ═══ 상세(하늘색 판) 안 잔색 — 대청소 2026-07-09: 남색 시리즈 중 특이도에서 진 것(md-name·md-stat·md-price·dim-text·irk·lack) 삭제, 산 것만 ═══ */
.ui2 .md-detail .md-empty { color: #6a5638; }
.ui2 .md-detail .bag-equip { color: #1f5fa8; }
/* (구 .ui2 .ptab 납작 스킨 삭제 2026-07-09 대청소 — 모든 탭이 rail(링 아트) 또는 not(.rail)(짙은양피지 탭)에 잡혀 전부 졌음) */
/* ★사이드탭(왼쪽 레일) = 은색 링 아트 프레임 (2026-07-03 사용자 원보베이스 링 — 마젠타 키잉 → tab_frame_v1.png 9-슬라이스)
   링 = 아트 고정 / 속색 = background(자유 — 화면·상태별로 바꾸면 됨) / 글씨 = HTML 텍스트 그대로.
   ⚠ 반드시 이 자리(파일 뒤쪽)에 — 위쪽 구 레일 규칙들과 같은 특이도라 순서로 이김 */
#panel-overlay.ui2 .ptab-bar.rail .ptab {
  border: 0.5rem solid transparent;
  border-image: url('../ui/frame/tab_frame_v1.png') 34 / 0.5rem stretch;
  border-radius: 0.625rem; background-clip: padding-box;   /* 속색이 링 모서리 밖으로 안 삐지게 */
  background: rgba(38, 28, 15, .72);   /* [임시색] 평소 = 어두운 갈색 반투명 — 사용자 색 지정 대기 */
  color: var(--ov-w); box-shadow: none; text-shadow: 0 1px 0.125rem #000;
  filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, .35));
  padding: 0.375rem 0.25rem;
}
#panel-overlay.ui2 .ptab-bar.rail .ptab:hover { filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, .35)) brightness(1.08); background: rgba(58, 44, 24, .78); }
#panel-overlay.ui2 .ptab-bar.rail .ptab.active {
  border-image: url('../ui/frame/tab_frame_v1.png') 34 / 0.5rem stretch;   /* background 단축이 border까지 안 건드리게 재명시 */
  background: linear-gradient(180deg, #a02818, #6b150a) padding-box;   /* 선택 = 빨강 바탕 + 노랑 글 (손삼式 2026-07-03 — 구 금색 임시 폐기) */
  color: var(--ov-y); box-shadow: none;
}
/* 가방 = 진한 양피지 한 장만 (2026-07-03 사용자 — 밝은 종이가 테두리로 비쳐 두 겹으로 보이던 것 제거) */
#panel-overlay.ui2.theme-light.panel-bag #panel { background: #5f3f1c url('../ui/frame/parch_dark_v1.jpg') center / 100% 100% no-repeat; }
.panel-bag .scr-body { background: rgba(0, 0, 0, .14); margin: 0.125rem 0.5rem 0.5rem; box-shadow: inset 0 0 0 1px rgba(255, 225, 170, .12); }

/* ═══════════════ 팝업 + 도화지 최종 (2026-07-02 사용자) : 좌우 여백 팝업 · 밝은 종이 · 버튼식 탭 · 좁은 상세 ═══════════════ */
/* 오버레이 = 어둑한 backdrop(뒤 성 어둑하게) + 팝업 가로 중앙 */
#panel-overlay.ui2.theme-light { background: rgba(8,10,16,.42); backdrop-filter: blur(0.125rem); -webkit-backdrop-filter: blur(0.125rem); border: none; box-shadow: none; align-items: center; padding: 0.3125rem 0 0; }
/* 팝업 카드 = 도화지(밝은 종이). 좌우 ~6%씩 여백 */
#panel-overlay.ui2.theme-light #panel { width: 88%; max-width: 85rem; flex: 1 1 auto; min-height: 0; margin: 0 auto 0.5rem; padding: 0; border-radius: 1rem; overflow: hidden; background: #e7ddc4 url('../ui/frame/pnl_bg_paper.png') center / cover no-repeat; box-shadow: 0 0.625rem 2.125rem rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,90,50,.3); }   /* 바깥판 = 밝은 종이(사용자 2겹 설계 원복 2026-07-03). 짙은 양피지 = 안쪽 보드(.scr-body)·팝업만 */
/* 패널 좌우 패딩 0 → 탭바는 도화지 끝까지(풀블리드), 내용물 wrapper에만 여백 (탭바 제외한 #panel-body 직속 자식) */
#panel-overlay.ui2.theme-light #panel-body > *:not(.ptab-bar) { padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.75rem; }
/* 레일형 화면(상점·연무장 등 왼쪽 세로탭)은 위 여백을 줘서 탭이 패널 최상단에 박히지 않게 (2026-07-02 사용자) */
#panel-overlay.ui2.theme-light .scr-side { padding-top: 0.8125rem; }
/* 탭 = 버튼식: 글씨에 맞춰 작게, 눌림 입체감. 사이드탭(rail)은 제외 */

/* 가로 서브탭 = 레일과 같은 은색 링 아트 통일 (2026-07-09 2차 — 구 CSS 네모 박스 폐기). 속색: 평소 어두움 / 활성 빨강+노랑(손삼式) */
#panel-overlay.ui2.theme-light .ptab-bar:not(.rail) .ptab { flex: 0 0 auto; width: auto; min-width: 0; padding: 0.3125rem 0.9375rem;
  border: 0.5rem solid transparent; border-image: url('../ui/frame/tab_frame_v1.png') 34 / 0.5rem stretch; border-radius: 0.625rem; background-clip: padding-box;
  background: rgba(0,0,0,.32); box-shadow: none; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; font-weight: 700;
  filter: drop-shadow(0 0.125rem 0.25rem rgba(0,0,0,.35)); }
#panel-overlay.ui2.theme-light .ptab-bar:not(.rail) .ptab:hover { filter: drop-shadow(0 0.125rem 0.25rem rgba(0,0,0,.35)) brightness(1.12); }
#panel-overlay.ui2.theme-light .ptab-bar:not(.rail) .ptab.active { border-image: url('../ui/frame/tab_frame_v1.png') 34 / 0.5rem stretch; background: linear-gradient(180deg, #a02818, #6b150a) padding-box; box-shadow: none; color: var(--ov-y); }
/* 상세 = 좁게(세로 길어 보이게) + 종이 위 구분선(별도 카드 없앰) */
#panel-overlay.ui2.theme-light .md-wrap { gap: 0.5rem; }
#panel-overlay.ui2.theme-light .md-gridwrap { flex: 1 1 60%; }
#panel-overlay.ui2.theme-light .md-detail { border-left: 1px solid rgba(120,86,44,.32); }
/* 슬롯 = 금 빼고 종이 톤 오목홈 (사용자 금 최소) */
#panel-overlay.ui2.theme-light .bag-slot { background: rgba(0,0,0,.22); border: 1px solid rgba(255,225,170,.3); box-shadow: inset 0 1px 0.1875rem rgba(0,0,0,.3); }
/* 선택 = 칸 전체를 감싸는 밝은 카드(아이콘보다 크게). 아이콘·이름 뒤에 깔림 */
#panel-overlay.ui2.theme-light .bag-cell { z-index: 0; }
#panel-overlay.ui2.theme-light .bag-cell.sel::before { content: ''; position: absolute; left: -0.25rem; right: -0.25rem; top: -0.4375rem; bottom: -0.3125rem; border-radius: 0.875rem; background: linear-gradient(158deg, #ffedc2, #f6d78f); border: 0.125rem solid #d09a2f; box-shadow: 0 0.3125rem 0.9375rem rgba(150,100,20,.42), inset 0 1px 0 rgba(255,252,235,.85); z-index: -1; }
#panel-overlay.ui2.theme-light .bag-cell.sel .bag-slot { background: transparent; border-color: rgba(150,105,25,.55); box-shadow: none; transform: none; filter: none; }
/* ═══ 3구역 (2026-07-02 사용자 재확인): ①상단 탭막대 하나 ②아이템=배경에 녹임 ③상세=떠있는 반투명 판 ═══ */
/* 3톤 (2026-07-02 사용자 확정): ①탄색 탭바 띠(폴더탭식) ②밝은 도화지 ③하늘색 판 */
/* ① 상단 탭바 = 도화지와 다른 색(따뜻한 무광 탄) 띠. 아래로 은은한 그림자 */
#panel-overlay.ui2.theme-light .ptab-bar:not(.rail) { margin: 0 0 0.75rem; padding: 0.6875rem 1rem 0.4375rem; gap: 1.5625rem; align-items: flex-end; background: rgba(18,10,4,.42); border-bottom: 1px solid rgba(255,220,150,.22); box-shadow: none; border-radius: 1rem 1rem 0 0; }   /* 탭 띠 = 어두운 띠 (구 탄색 — 짙은 양피지 2026-07-03) */
/* ② 아이템 목록 = 밝은 도화지 그대로 (틀 없음) */
#panel-overlay.ui2.theme-light .md-gridwrap { border: none; background: rgba(0,0,0,.42); border-radius: 0.625rem; box-shadow: none; padding: 0.375rem 0.375rem 0.5rem; }   /* 아이템 격자 = 검은 깔개 판 (밝은 바깥판 위 흰 글씨 살림 — 2026-07-03) */
/* ③ 상세 = 하늘색 판이 한 장 더 떠있는 느낌 (도화지와 색 대비로 확 뜸) */
#panel-overlay.ui2.theme-light .md-detail { flex: 1 1 40%; border: 1px solid rgba(108,150,186,.6); border-radius: 0.75rem; background: linear-gradient(158deg, rgba(202,227,245,.96), rgba(176,208,234,.94)); box-shadow: 0 0.4375rem 1.25rem rgba(28,52,84,.3), inset 0 1px 0 rgba(255,255,255,.55); margin-left: 0; padding: 0.875rem; color: #223a52; }
/* ③ 안 = 이름·설명·가격 하늘색 위에서 읽히게(짙은 남색) + 설명은 살짝 더 눌린 칸 */
#panel-overlay.ui2.theme-light .md-detail .md-name, #panel-overlay.ui2.theme-light .md-detail .md-name b { color: #1a3350; }
#panel-overlay.ui2.theme-light .md-detail .md-desc { color: #2c445c; }
#panel-overlay.ui2.theme-light .md-detail .md-price, #panel-overlay.ui2.theme-light .md-detail .md-price b { color: #235a86; }
#panel-overlay.ui2.theme-light .md-detail .dim-text { color: #4a6580; }
#panel-overlay.ui2.theme-light .md-detail .md-stat, #panel-overlay.ui2.theme-light .md-detail .md-desc { background: rgba(40,95,145,.1); border-radius: 0.5rem; padding: 0.5rem 0.625rem; }

/* 경험 게이지 (무장 상세 [관리] 화면 — 아트 틀+채움. 채움 폭 = JS가 0~92.8% 지정) */
.xp-gauge { position: relative; flex: 1; max-width: 15rem; height: 1.125rem;
  background: url('../ui/gauge/gauge_frame.png') center / 100% 100% no-repeat; }
.xp-fill { position: absolute; left: 3.6%; top: 26%; height: 48%;
  background: linear-gradient(180deg, #ffd968, #dfa73c); border-radius: 0.1875rem; }   /* 경험 채움 = 금노랑 CSS (fill 아트 보관이동 2026-07-03) */

/* 임무 풀폭 줄 (2026-06-14 임무 개편 v2 — 줄에서 바로 보상/가기, 달성건 금테, 탭=펼침) */
.q-list { display: flex; flex-direction: column; }
.q-rew { font-size: 0.7813rem; margin-top: 0.1875rem; opacity: .9; }
.q-rew img { width: 0.9375rem; vertical-align: -0.1875rem; margin-right: 1px; }
/* ===== 대화 말풍선 (A안 — ★확정 2026-06-12. 아바타 없음, 이름만) ===== */
.chat-day { text-align: center; margin: 0.625rem 0 0.375rem; }
.chat-day span { background: rgba(0, 0, 0, .35); color: var(--ov-w); opacity: .8; font-size: 0.6563rem; padding: 0.125rem 0.625rem; border-radius: 0.625rem; }
.chat-name { color: var(--ov-y); font-size: 0.7188rem; margin: 0.5rem 0 0.125rem 0.25rem; cursor: pointer; font-weight: 700; }   /* 발신자 이름 = 노랑 (흰+노랑 통일 2026-07-03) */
.chat-row { display: flex; align-items: flex-end; gap: 0.3125rem; margin: 0.125rem 0; }
.chat-row.me { flex-direction: row-reverse; }
.chat-bubble { max-width: 72%; background: rgba(28, 22, 14, .82); border: 1px solid rgba(201, 163, 91, .35); color: var(--ov-w);
  padding: 0.375rem 0.625rem; border-radius: 0.75rem; border-top-left-radius: 0.25rem; font-size: 0.8125rem; line-height: 1.45; word-break: break-all; white-space: pre-wrap; }
.chat-row.me .chat-bubble { background: rgba(122, 92, 30, .55); border-color: rgba(255, 210, 74, .5); border-radius: 0.75rem; border-top-right-radius: 0.25rem; }
.chat-bubble.wh { background: rgba(70, 40, 95, .6); border-color: rgba(216, 160, 255, .5); }
.chat-coord { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--ov-y); text-decoration: underline; cursor: pointer; }   /* 좌표 링크 — 탭 = 지도 점프 (좌표 공유 2026-07-09) */
.chat-wtag { display: block; color: var(--ov-y); font-size: 0.625rem; margin-bottom: 0.125rem; }   /* 귓속말표 = 노랑 (말풍선 배경색이 귓속말 구분 담당) */
.chat-sys { text-align: center; margin: 0.375rem 0; font-size: 0.75rem; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; }   /* 시스템 알림(황금상자 개봉 등) = 가운데 노란 한 줄 (2026-07-04) */
#chat-peek .cp-tag.cp-sys { color: var(--ov-y); }   /* 미리보기 [알림] 태그 */
.chat-time { color: #8d8066; font-size: 0.5938rem; flex: none; margin-bottom: 0.125rem; }

/* ═══ 밝은 종이(도화지·양피지) 위 글씨 = 진한 색 (2026-07-03 사용자 — 노랑·흰 글씨는 누런 배경에 안 읽힘.
   어두운 바탕(버튼·명패·상단바)의 노랑 글씨는 그대로) ═══ */
#panel-overlay.ui2.theme-light .hr-stats { color: rgba(255,255,255,.85); }
#panel-overlay.ui2.theme-light .hr-stats b { color: var(--ov-y); }   /* 스탯 수치 = 노랑 (2026-07-03 사용자) */
#panel-overlay.ui2.theme-light .md-name { color: #241505; }
#panel-overlay.ui2.theme-light .md-stat { color: #33250f; }
#panel-overlay.ui2.theme-light .md-price, #panel-overlay.ui2.theme-light .md-price b { color: #6e4a00; }


/* 줄 내부 = 가로 흘리기 (2026-07-03 사용자 — 1열 유지하되 아랫부분(필요·비용·수량·버튼)을 한 줄로) */
.tech-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1875rem 1.125rem; }
.tech-foot > .srow-desc { flex: 0 0 100%; margin: 0.125rem 0 0; }   /* 설명문·필요 = 각자 제 줄 (비용·시간·수량·버튼만 한 줄에) */
.tech-foot > .srow-prod { flex: 0 0 100%; margin: 0.125rem 0 0; }
.tech-foot ul.cost { margin: 0; }
.tech-foot .srow-act { margin-left: auto; }   /* 버튼류 = 오른쪽 끝 */

/* ═══════════ 문파 개편 v2 (2026-07-04) — 기존 문법(짙은 양피지 + 깔개 + 흰 라벨/노랑 수치)로 재정합.
   v1 밝은 흰 카드 문법 폐기(전역 팔레트와 충돌·흰on흰·과대 크기 — 폰 검수 지적). 컴팩트 = 탭마다 한 화면. ═══════════ */
.cl2-y { color: var(--ov-y) !important; }
.cl2-w { color: var(--ov-w); }
.cl2-body { padding: 0.625rem 0.875rem 0.75rem; }
.scr-side .ptab { position: relative; }
.cl2-badge { position: absolute; top: 0.25rem; right: 0.375rem; min-width: 1rem; height: 1rem; border-radius: 0.5rem; background: #c0392b; color: var(--ov-y); font-size: 0.6563rem; font-weight: 700; line-height: 1rem; padding: 0 0.25rem; }
.cl2-flagpick { cursor: pointer; padding: 0.125rem; border-radius: 50%; border: 0.125rem solid transparent; display: inline-block; }
.cl2-flagpick.on { border-color: var(--ov-y); }
.cl2-gauge { position: relative; height: 0.8125rem; background: url('../ui/gauge/gauge_frame.png') center / 100% 100% no-repeat; border: none; border-radius: 0.25rem; margin: 0.3125rem 0 0.125rem; }   /* 게이지 틀 아트 통일 (2026-07-09 2차) */
.cl2-gauge i { display: block; position: absolute; left: 3.6%; top: 26%; height: 48%; max-width: 92.8%; background: #d8a23a; border-radius: 0.1875rem; }
.cl2-hint { font-size: 0.6875rem; color: var(--ov-w); opacity: .8; text-shadow: 0 1px 0.125rem #000; margin-top: 0.125rem; line-height: 1.4; }
.cl2-cb { margin-bottom: 0.4375rem; padding: 0.5rem 0.75rem; }
/* 정보 탭 — 좌 간판 | 우 3깔개, 한 화면 */
.cl2-info { display: flex; gap: 0.5rem; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.cl2-sign { flex: 0 0 12.5rem; text-align: center; margin-bottom: 0; padding: 0.75rem 0.75rem; }
.cl2-sign-name { font-size: 1.0625rem; font-weight: 800; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; margin: 0.3125rem 0 1px; }
.cl2-sign-rows { border-top: 1px solid rgba(255, 220, 150, .2); margin-top: 0.5rem; padding-top: 0.375rem; }
.cl2-sign-rows p { display: flex; justify-content: space-between; margin: 0.25rem 0; font-size: 0.7813rem; }
.cl2-sign-rows span { color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; }
.cl2-sign-rows b { color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; }
.cl2-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4375rem; }
.cl2-col .canvas-box { margin-bottom: 0; }
.cl2-mystats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.7813rem; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; margin-top: 0.25rem; }
.cl2-mystats b { color: var(--ov-y); }
/* 단원 탭 */
.cl2-appbar { border: 1.5px solid rgba(255, 220, 150, .35); }
.cl2-appbar-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.cl2-approw { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; border-top: 1px dashed rgba(255, 220, 150, .2); }
.cl2-approw input[type=checkbox] { width: 1rem; height: 1rem; }
.cl2-appname { flex: 1; min-width: 0; font-size: 0.8125rem; }
.srow.cl2-m { align-items: center; padding: 0.375rem 0.625rem; margin-bottom: 0.3125rem; }
.srow.cl2-m .srow-title { font-size: 0.875rem; }
.srow.cl2-m .srow-desc { font-size: 0.75rem; margin-top: 1px; }
.srow.cl2-leader { box-shadow: inset 0 0 0 1.5px rgba(255, 214, 90, .45); }
.cl2-on { display: inline-block; background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; color: var(--ov-y); font-size: 0.6563rem; font-weight: 700; padding: 0.125rem 0.5625rem; margin-left: 0.5rem; white-space: nowrap; vertical-align: 1px; }   /* 접속중 = 먹빛 알약 칩 아트 (2026-07-09 1차) */
.cl2-mbtns { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.cl2-manage { display: flex; gap: 0.3125rem; flex-wrap: wrap; padding: 0.125rem 0.5rem 0.4375rem; margin-top: -0.125rem; }
/* 기술 탭 — 회관 깔개 + 가로 트리 (높이 = 보드 실측, 세로 스크롤 0) */
.cl2-techwrap { display: flex; gap: 0.5rem; flex: 1 1 auto; min-height: 0; }
.cl2-hall { flex: 0 0 9.375rem; margin-bottom: 0; padding: 0.625rem 0.625rem; align-self: stretch; }
.cl2-hall-lv { text-align: center; font-size: 1.0625rem; font-weight: 800; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; margin: 0.1875rem 0; }
.cl2-donbtn { display: block; width: 100%; margin: 0.375rem 0 0.125rem; padding: 0.25rem; background: none; border: 0.375rem solid transparent; border-width: 0.375rem 0.625rem; border-image: url('../ui/btn/btn_base_v1.png') 26 fill / 0.375rem 0.625rem / 0 stretch; border-radius: 0; font-weight: 700; font-size: 0.8125rem; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; }   /* 기부 = 공용 버튼 아트 통일 (2026-07-09 1차 — "버튼은 전부 btn_base_v1" 07-03 확정) */
.cl2-donbtn:active { filter: brightness(1.15); }
.cl2-treescroll { flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; }
.cl2-tree { position: relative; }
.cl2-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.cl2-colhead { position: absolute; top: 0; text-align: center; font-weight: 700; font-size: 0.75rem; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; margin: 0; }
.cl2-colhead.locked { color: var(--ov-w); opacity: .45; }
.cl2-cell { position: absolute; border: none; padding: 0.3125rem; border-radius: 0.75rem; cursor: pointer; background: url('../ui/frame/slot2.png') center / 100% 100% no-repeat, rgba(14, 10, 4, .42); }
.cl2-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl2-cell.locked { background: url('../ui/frame/slot2.png') center / 100% 100% no-repeat, rgba(0, 0, 0, .55); }
.cl2-cell.locked img { filter: grayscale(1) brightness(.8); opacity: .55; }
.cl2-cell.sel { outline: 0.1563rem solid var(--ov-y); outline-offset: 1px; }
.cl2-lvb { position: absolute; right: -0.375rem; bottom: -0.375rem; min-width: 1.25rem; height: 1.25rem; background: url('../ui/frame/badge_round_wood.png') center / 100% 100% no-repeat; color: var(--ov-y); border: none; font-size: 0.6875rem; font-weight: 700; line-height: 1.25rem; padding: 0 0.1875rem; text-shadow: 0 1px 0.125rem #000; }   /* 레벨 = 나무 원형 명패 아트 (2026-07-09 1차) */
.cl2-lvb.max { font-size: 0.5313rem; }
.cl2-focus-chip { position: absolute; left: -0.3125rem; top: -0.5rem; background: url('../ui/frame/chip_pill_dark.png') center / 100% 100% no-repeat; color: var(--ov-y); font-size: 0.5938rem; font-weight: 700; padding: 0.125rem 0.5rem; text-shadow: 0 1px 0.125rem #000; }   /* 진행 칩 = 먹빛 알약 아트 (2026-07-09 1차) */
/* (기술 이름 라벨 폐지 — 3열부터 아이콘과 겹침, 이름은 상세창에서. 2026-07-04 사용자) */
/* 기술 상세 모달 — 짙은 양피지 팝업 문법 */
.cl2-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; }
.cl2-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 37.5rem; max-width: 92vw; max-height: 90vh; overflow: auto; background: #4a3115 url('../ui/frame/parch_dark_v1.jpg') center / cover; border: 0.125rem solid rgba(232, 202, 142, .55); border-radius: 0.875rem; padding: 0.875rem 1rem; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .55); z-index: 41; display: flex; gap: 0.875rem; }
.cl2-modal-l { flex: 0 0 11.25rem; text-align: center; background: rgba(0, 0, 0, .38); border-radius: 0.625rem; padding: 0.75rem 0.625rem 0.625rem; position: relative; }
.cl2-modal-l img { width: 5.75rem; height: 5.75rem; object-fit: contain; }
.cl2-modal-name { font-size: 1.0625rem; font-weight: 800; color: var(--ov-y); text-shadow: 0 1px 0.125rem #000; margin: 0.1875rem 0 1px; }
.cl2-ribbon { position: absolute; left: 50%; transform: translateX(-50%); top: -0.75rem; background: url('../ui/frame/ribbon_red.png') center / 100% 100% no-repeat; color: var(--ov-y); font-size: 0.6563rem; font-weight: 700; padding: 0.1875rem 1rem 0.4375rem; white-space: nowrap; text-shadow: 0 1px 0.125rem #000; }   /* 진행 지정 = 진홍 리본 아트 (2026-07-09 1차) */
.cl2-modal-r { flex: 1; min-width: 0; padding-top: 0.125rem; }
.cl2-nextlv { font-size: 0.9688rem; font-weight: 800; color: var(--ov-w); text-shadow: 0 1px 0.125rem #000; margin-bottom: 0.4375rem; }
.cl2-effrow { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, .4); border-radius: 0.5rem; padding: 0.4375rem 0.625rem; font-size: 0.8438rem; text-shadow: 0 1px 0.125rem #000; }
.cl2-delta { display: inline-block; background: rgba(0, 0, 0, .6); color: var(--ov-y); font-weight: 700; font-size: 0.75rem; border-radius: 0.4375rem; padding: 1px 0.4375rem; margin-left: 0.4375rem; border: 1px solid rgba(255, 220, 150, .3); }
.cl2-pop-x { position: absolute; right: 0.5rem; top: 0.375rem; width: 1.625rem; height: 1.625rem; border: none; font-size: 0; cursor: pointer; z-index: 2;
  background: url('../ui/btn/btn_x_v2.png') center / contain no-repeat; }   /* ✕ 글리프 → 청동 닫기 단추 (2026-07-09 1차) */
/* 관리 탭 */
.cl2-ops { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
.cl2-logbox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cl2-log { flex: 1; min-height: 0; overflow-y: auto; }
.cl2-log .srow-desc { margin-top: 0.125rem; font-size: 0.75rem; }