/* ===== T66 토큰 — 화면 규칙 B "먹선" (정본: 설계/설계_화면규칙_B_먹선.md §2) =====
   ★값을 여기서만 적는다. 조각 파일(public/client/*.js)에 색 리터럴을 적으면 소스 검사가 잡는다.
   ★모서리 0 · 그림자 0 · 테 1px · 판은 92% 검정(게임이 8% 비친다) · 강조는 하나(호박색).
   ★색 리터럴이 이 블록 밖에 있으면 그건 사본이다 — `e2e-ui` 의 소스 검사가 그것을 지킨다. */
:root {
  --bg: #0b0b0b;            --bg-rgb: 11,11,11;
  --pane: rgba(11,11,11,.92);
  --pane-solid: #111111;    --pane-rgb: 17,17,17;
  --head: #171717;
  --inset: #0f0f0f;
  --line: #333333;          --line-rgb: 51,51,51;
  --line-2: #4a4a4a;
  --fg: #e6e6e6;            --fg-rgb: 230,230,230;
  --fg-strong: #f2f2f2;
  --dim: #8a8a8a;           --dim-rgb: 138,138,138;
  --dim-2: #5a5a5a;
  --accent: #e6b450;        --accent-rgb: 230,180,80;
  --accent-hi: #f2c96a;
  --hp: #c9453a;            --hp-rgb: 201,69,58;
  --thirst: #4a90c2;        --thirst-rgb: 74,144,194;
  --stam: #7fa650;          --stam-rgb: 127,166,80;
  /* 글꼴 하나 — 웹폰트는 로드하지 않는다(시스템에 있으면 쓴다). 숫자·시각·무게·핑은 고정폭. */
  --font: 'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --mono: 'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font); background: var(--pane-solid); color: var(--fg); overflow: hidden; }

.hidden { display: none !important; }

/* === Lobby === */
#lobby {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pane-solid);
}
.lobby-card {
  background: var(--inset); padding: 32px 36px; border-radius: 0;
  min-width: 360px;
}
.lobby-card h1 { margin: 0 0 4px; font-size: 26px; }
.lobby-card .sub { margin: 0 0 24px; color: var(--dim-2); font-size: 13px; }
.lobby-card label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
.lobby-card input, .lobby-card select {
  width: 100%; background: var(--head); color: var(--fg); border: 1px solid var(--line);
  padding: 9px 12px; border-radius: 0; font-size: 14px;
}
.lobby-card button {
  margin-top: 18px; width: 100%; padding: 11px; border: 0;
  background: var(--stam);
  color: var(--fg-strong); font-weight: 600; border-radius: 0; cursor: pointer; font-size: 14px;
}
.lobby-card button:hover { filter: brightness(1.1); }
.hint { margin-top: 18px; font-size: 11px; color: var(--dim-2); line-height: 1.7; }
#health { margin-top: 12px; font-size: 11px; color: var(--dim-2); font-family: var(--mono); }
.sublabel { font-size: 10px; color: var(--dim-2); font-weight: normal; }
.auth-error {
  margin-top: 10px; padding: 8px 11px; border-radius: 0;
  background: rgba(var(--hp-rgb), 0.15); border: 1px solid rgba(var(--hp-rgb), 0.4);
  color: var(--hp);
  font-size: 12px;
}

/* === 색상 팔레트 === */
#colorPicker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 0;
  cursor: pointer; border: 2px solid transparent;
  transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected {
  border-color: var(--accent);
}

/* === 채팅 패널 === */
#chatPanel {
  position: fixed; left: 12px; bottom: 12px;
  width: 360px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
  pointer-events: none;
}
#chatLog {
  max-height: 140px; overflow-y: hidden;
  display: flex; flex-direction: column; gap: 2px;
  pointer-events: none;
}
.chat-line {
  background: rgba(var(--pane-rgb), 0.7);
  padding: 3px 8px; border-radius: 0;
  font-size: 12px; color: var(--fg);
  border-left: 3px solid var(--thirst);
}
.chat-line b { color: var(--accent); margin-right: 4px; }
#chatInputWrap { pointer-events: auto; }
#chatInput {
  width: 100%; background: rgba(var(--pane-rgb), 0.9);
  color: var(--fg); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 0; font-size: 13px;
  outline: none;
}
#chatInput:focus { border-color: var(--accent); background: rgba(var(--pane-rgb), 1); }
#chatInput:not(.active) { opacity: 0.5; }

/* === Game (전체화면) === */
#game {
  position: fixed; inset: 0;
  background: var(--bg);
}
#canvas {
  display: block;
  position: absolute; inset: 0;
  width: 100vw; height: 100vh;
  background: var(--inset);
  image-rendering: pixelated;
}

#hud {
  position: fixed; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  z-index: 10;
}
.hud-row { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.hud-actions button {
  background: var(--inset); color: var(--fg); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 0; cursor: pointer; font-size: 12px;
}
.hud-actions button:hover { background: var(--line); }
.badge {
  background: rgba(var(--pane-rgb), 0.85); padding: 5px 11px;
  border-radius: 0; font-size: 12px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}
.badge.ping { font-family: var(--mono); }
.badge.coord { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.inv {
  background: rgba(var(--pane-rgb), 0.85); padding: 5px 11px;
  border-radius: 0; font-size: 13px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}
.inv b { color: var(--accent); margin-left: 4px; }

/* HP bar */
.hp-bar {
  position: relative; width: 220px; height: 18px;
  background: rgba(var(--pane-rgb), 0.85); border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 0; overflow: hidden;
}
.hp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%; background: var(--hp);
  transition: width 200ms;
}
.hp-text {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fg-strong); font-family: var(--mono);
}
/* Hunger / Thirst bars — HP보다 작게, 가로 배치 */
.hunger-bar, .thirst-bar { width: 108px; height: 14px; margin-right: 4px; }
.hunger-fill { background: var(--accent); }
.thirst-fill { background: var(--thirst); }
/* ★[신체 3층 재배선 2026-08-30] 스태미나 — 노랑 계열(허기 갈색·갈증 파랑과 구분). 바닥나 잠기면 붉게. */
.stam-fill { background: var(--accent); }
.stam-fill.locked { background: var(--accent); }
.hunger-bar .hp-text, .thirst-bar .hp-text { font-size: 9px; }
.vp-bar { width: 220px; height: 14px; }
.vp-fill { background: var(--hp); }
.vp-bar.danger .vp-fill { background: var(--hp); }
.vp-bar .hp-text { font-size: 10px; }

/* 음식/extra 인벤토리 */
#invFoodRow .inv { font-size: 12px; padding: 2px 6px; cursor: pointer; }
#invFoodRow .inv:hover { background: rgba(var(--accent-rgb), 0.18); }
#invFoodRow .inv.disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bg-rgb), 0.5);
}
.modal-card {
  background: var(--head); border: 1px solid var(--line);
  border-radius: 0; padding: 16px;
  min-width: 360px; max-width: 520px;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: bold; color: var(--accent);
  border-bottom: 1px solid var(--inset); padding-bottom: 8px; margin-bottom: 12px;
}
.modal-head button { background: var(--inset); color: var(--dim); border: 1px solid var(--line); padding: 4px 10px; border-radius: 0; cursor: pointer; font-size: 11px; }
.modal-body { font-size: 12px; color: var(--fg); }

/* Phase 14.41: 사망 / 부활 패널 */
#downPanel .down-card {
  background: var(--pane-solid); border-color: var(--hp); min-width: 420px;
}
#downPanel .modal-head { color: var(--hp); border-bottom-color: var(--hp); }
.down-status { font-size: 14px; color: var(--hp); margin-bottom: 12px; }
.down-rescue-hint {
  font-size: 12px; color: var(--accent-hi); background: rgba(var(--accent-rgb), 0.4);
  padding: 8px 10px; border-radius: 0; margin-bottom: 10px;
}
.down-rescue-hint.expired { color: var(--dim-2); background: rgba(var(--bg-rgb), 0.4); }
.down-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.down-options .down-opt {
  background: var(--inset); color: var(--fg); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: 0; cursor: pointer; text-align: left;
  font-size: 13px; transition: background 0.1s;
}
.down-options .down-opt:hover { background: var(--line); border-color: var(--thirst); }
.down-options .down-opt .kind-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 0;
  margin-right: 8px; vertical-align: middle;
}
.down-options .down-opt.personal .kind-badge { background: var(--thirst); color: var(--fg-strong); }
.down-options .down-opt.temporary .kind-badge { background: var(--accent); color: var(--fg-strong); }
.down-options .down-opt.guild .kind-badge { background: var(--accent); color: var(--fg-strong); }
.down-options .down-opt.home .kind-badge { background: var(--stam); color: var(--fg-strong); }
.down-options .down-opt-none {
  background: rgba(var(--bg-rgb), 0.3); border: 1px dashed var(--line);
  padding: 12px; border-radius: 0; color: var(--hp); text-align: center;
}
.down-foot { font-size: 11px; color: var(--dim-2); text-align: center; margin-top: 6px; }

/* 거래소 */
.market-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--head); padding: 8px; border-radius: 0; margin-bottom: 8px;
}
.market-form label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); }
.market-form input, .market-form select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--line);
  padding: 4px 6px; border-radius: 0; font-size: 12px; width: 60px;
}
.market-form select { width: 80px; }
.market-form button.buy { background: var(--stam); color: var(--fg-strong); border: 0; padding: 5px 12px; border-radius: 0; cursor: pointer; }
.market-form button.sell { background: var(--hp); color: var(--fg-strong); border: 0; padding: 5px 12px; border-radius: 0; cursor: pointer; }
.market-hint { font-size: 10px; color: var(--dim-2); margin-bottom: 8px; }
#marketOrders { max-height: 260px; overflow-y: auto; }
.market-order {
  display: flex; gap: 8px; align-items: center;
  background: rgba(var(--bg-rgb), 0.5); padding: 4px 8px; margin-bottom: 3px;
  border-radius: 0; font-size: 11px;
}
.market-order .sell { color: var(--hp); font-weight: bold; }
.market-order .buy { color: var(--stam); font-weight: bold; }
.market-order .who { color: var(--dim-2); margin-left: auto; font-size: 10px; }
.market-order button { background: var(--line); color: var(--fg-strong); border: 0; padding: 2px 8px; border-radius: 0; cursor: pointer; font-size: 10px; }

/* 상자 */
.chest-card { min-width: 280px; }
.chest-content { display: flex; gap: 16px; font-size: 14px; margin-bottom: 12px; }
.chest-content b { color: var(--accent); }
.chest-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chest-actions button { background: var(--inset); color: var(--dim); border: 1px solid var(--line); padding: 6px 10px; border-radius: 0; cursor: pointer; font-size: 11px; }
.chest-actions button:hover { background: var(--line); }

/* Craft */
.craft-card { min-width: 360px; }
.craft-equipped-row { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
.craft-equipped-row b { color: var(--accent); }
.craft-equipped-row .hint { color: var(--dim-2); margin-left: 6px; font-size: 10px; }
.craft-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(var(--bg-rgb), 0.5); padding: 8px 10px; margin-bottom: 6px;
  border-radius: 0; border: 1px solid transparent;
}
.craft-row.eq { border-color: var(--accent); background: rgba(var(--bg-rgb), 0.5); }
.craft-icon { font-size: 22px; }
.craft-info { flex: 1; }
.craft-name { font-size: 13px; color: var(--fg); }
.craft-name .craft-have { color: var(--stam); font-size: 11px; margin-left: 6px; }
.craft-cost { font-size: 11px; color: var(--dim-2); margin-top: 2px; }
.craft-btn, .equip-btn {
  background: var(--inset); color: var(--dim); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 0; cursor: pointer; font-size: 11px;
}
.craft-btn:hover:not(:disabled), .equip-btn:hover:not(:disabled) { background: var(--line); }
.craft-btn:disabled, .equip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.equip-btn { background: var(--inset); border-color: var(--line); }

#notice {
  /* ★★[T118 2026-09-05 재민 확정] **자리는 캔버스가 정본이다.**
     종전엔 `#hud`(좌상) 흐름 안에 있어서 **왼쪽 레일이 첫 글자를 덮었다**(T113 대조 스크린샷 —
     "마을에" 의 "마" 가 잘렸다. 스택 이전부터 그랬고 세 줄이 되니 세 줄 다 잘렸다).
     캔버스(`산그림/디자인B/디자인B_HUD.jpg` · 1440×900)를 화소로 재면 알림 판은
     **x 536~1093(폭 558) · y 17~66** — 상태 줄 오른쪽, 지도 판 왼쪽의 **위 띠**다(설계 §4
     "촌장 한 줄은 상단(레일 오른쪽)에"). ⇒ `position: fixed` 로 그 띠에 세운다.
     ⚠`#hud` 의 자식으로 **그대로 둔다** — 노드를 안 옮기면 `pointer-events: none` 상속이 살아 있고
       (알림은 클릭을 먹으면 안 된다) `index.html` 도 안 건드린다. `fixed` 라 흐름에서 빠지므로
       HUD 세로줄이 알림 줄 수에 따라 **더는 밀리지 않는다**(스택 셋이면 47px 밀던 것이 0 이 된다).
     ⚠가로는 **화면 중심**이다(§3 판정). 캔버스 판 중심은 814 로 화면 중심(720)에서 94px 오른쪽인데,
       그건 캔버스 왼쪽에 상태 줄이 있어서 생긴 자리다 — 해상도가 달라지면 고정 좌표는 뜻을 잃는다.
       띠 안 가운데라는 **뜻**을 지키는 값이 `left:50%` 다. */
  position: fixed;
  top: 12px;                       /* `#hud`·`#minimap` 과 같은 위 띠(캔버스는 17 — 그 그림의 자체 여백이다) */
  left: 50%; transform: translateX(-50%);
  z-index: 10;                     /* `#hud`·`#minimap` 과 같은 층 */
  background: rgba(var(--pane-rgb), 0.9);
  padding: 11px; border-radius: 0; /* 세로 패딩 11 — 캔버스 값(종전 6) */
  font-size: 12px; max-width: 560px; min-height: 18px;   /* 폭은 캔버스 558 → 눈금 16 에 맞춰 560 */
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  color: var(--dim);
  text-align: center;              /* 가운데 판이니 글도 가운데 — 한 줄짜리가 왼쪽에 붙어 뜨지 않는다 */
  /* ★[2026-08-25 사건 레이어] 게시판 목록은 여러 줄이다 — 새 패널을 만들지 않고 이 한 줄로 늘린다. */
  white-space: pre-line;
  /* ★[T113] 줄 피치는 **캔버스 값**이다 — `산그림/디자인B/디자인B_HUD.jpg` 의 알림 자리를 화소로
     재면 글줄 사이가 17px 이다(높이 50 = 패딩 11 + 두 줄). 스택이 그 결로 쌓이게 그 수를 그대로 쓴다.
     새 패널도 새 노드도 아니고, 여기 한 줄이 그 자리의 리듬을 정한다. */
  line-height: 17px;
}
/* ★[T118] 비어 있으면 **아예 없다.** 좌상 HUD 흐름 안에 있을 땐 빈 칸이 눈에 안 띄었지만,
   화면 위 가운데로 나오면 빈 먹판이 늘 떠 있게 된다(`min-height` + 배경 때문에). 자리를 옮기면
   따라오는 결함이라 같은 카드에서 닫는다 — 규칙 한 줄이고 JS 는 안 건드린다. */
#notice:empty { display: none; }
/* ★[T90] 알림 앞의 종류 아이콘 — 글자 줄에 얹히지 않게 살짝 내려 앉힌다(색은 글자를 따라간다). */
#notice .nt-ico { vertical-align: -2px; margin-right: 5px; }

#minimap {
  position: fixed; top: 12px; right: 12px;
  background: rgba(var(--pane-rgb), 0.85); padding: 8px 10px;
  border-radius: 0; border: 1px solid rgba(var(--fg-rgb), 0.08);
  z-index: 10;
}
/* 14.46-a: 2D 월드 지도 — 각 zone을 worldOffsetX/Y 기준 절대 위치로 배치 */
.mini-row { position: relative; width: 320px; height: 200px; background: rgba(var(--bg-rgb), 0.6); border-radius: 0; overflow: hidden; }
.mini-cell {
  position: absolute; border: 1px solid rgba(var(--bg-rgb), 0.4); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: rgba(var(--fg-rgb), 0.9); text-align: center; line-height: 1.0;
}
.mini-cell small { font-size: 7px; opacity: 0.75; display: block; }
.mini-cell.active { border-color: var(--accent); z-index: 4; }
.mini-cell span { z-index: 2; padding: 1px 2px; pointer-events: none; }
.mini-dot {
  position: absolute; width: 6px; height: 6px;
  background: var(--accent); border: 1.5px solid var(--pane-solid);
  border-radius: 0;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.mini-label { font-size: 10px; color: var(--dim-2); margin-top: 6px; text-align: center; }


/* === Phase 14.17: 좀보이드식 UI — 좌측 사이드바 + 상단 인벤 드롭다운 === */

/* 좌측 수직 아이콘 바 — 화면 가운데 (HUD가 위쪽 차지) */
#sidebar {
  position: fixed; left: 8px;
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 30;
}
.sb-icon {
  width: 44px; height: 44px;
  background: var(--head);
  border: 1px solid var(--line);
  border-radius: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
  user-select: none;
}
.sb-icon:hover { background: var(--inset); }
.sb-icon.active {
  background: var(--stam);
  border-color: var(--stam);
}
.sb-icon .sb-emo { font-size: 20px; line-height: 1; }
.sb-icon .sb-hint {
  position: absolute; right: -38px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--dim-2);
  background: rgba(var(--pane-rgb), 0.8); padding: 2px 5px;
  border-radius: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.sb-icon:hover .sb-hint { opacity: 1; }

/* === 상단 인벤토리 드롭다운 (좀보이드 정통 — 인벤만 위에서 슬라이드) === */
#invDropdown {
  position: fixed;
  top: -50vh;
  left: 50%; transform: translateX(-50%);
  width: 880px; max-width: 96vw; height: 42vh; min-height: 320px;
  background: rgba(var(--pane-rgb), 0.97);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0;
  z-index: 28;
  transition: top 0.18s ease-out;
  display: flex; flex-direction: column; overflow: hidden;
}
#invDropdown.open { top: 0; }
.id-head {
  background: var(--inset); padding: 6px 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.id-title { color: var(--accent); font-weight: 600; }
.id-body { flex: 1; overflow-y: auto; padding: 10px; }
.id-toggle {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 64px; height: 22px;
  background: rgba(var(--bg-rgb), 0.95);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 27;
  font-size: 14px; line-height: 1;
  user-select: none;
}
.id-toggle:hover { background: var(--line); }

/* === 좌측 패널 (사이드 아이콘 클릭 시 옆에 펼쳐짐) === */
#sidePanel {
  position: fixed;
  left: -480px;
  top: 80px;
  width: 460px; max-height: 80vh;
  background: rgba(var(--pane-rgb), 0.97);
  border: 1px solid var(--line);
  border-radius: 0;
  z-index: 29;
  transition: left 0.18s ease-out;
  display: flex; flex-direction: column; overflow: hidden;
}
#sidePanel.open { left: 60px; }
.sp-head {
  background: var(--inset);
  padding: 8px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--line);
}
.sp-title { font-weight: 600; font-size: 14px; color: var(--accent); }
.sp-close {
  background: none; border: 0; color: var(--dim-2);
  cursor: pointer; font-size: 16px;
}
.sp-close:hover { color: var(--hp); }
.sp-body { flex: 1; overflow-y: auto; padding: 12px; }

/* === 인벤토리 그리드 (좀보이드 양분) === */
.inv-two-col { display: flex; gap: 12px; height: 100%; }
.inv-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inv-col-head { font-size: 12px; color: var(--dim-2); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; }
.inv-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  background: var(--bg);
  padding: 6px; border-radius: 0;
  overflow-y: auto;
  flex: 1;
}
.inv-slot {
  aspect-ratio: 1;
  background: var(--head);
  border: 1px solid var(--inset);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; position: relative;
  cursor: pointer; transition: background 0.1s;
}
.inv-slot:hover { background: var(--inset); border-color: var(--thirst); }
.inv-slot.empty { opacity: 0.3; }
.inv-slot .slot-count {
  position: absolute; bottom: 1px; right: 3px;
  font-size: 10px; font-weight: 700;
  color: var(--fg-strong);
}

/* === 제작창 (카테고리 + 레시피) === */
.craft-layout { display: flex; gap: 8px; height: 100%; }
.craft-cats {
  width: 110px; background: var(--head); border-radius: 0;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.craft-cat {
  padding: 7px 9px; border-radius: 0; cursor: pointer; font-size: 12px;
  color: var(--fg);
}
.craft-cat:hover { background: var(--inset); }
.craft-cat.active { background: var(--stam); border-left: 3px solid var(--stam); }
.craft-items {
  flex: 1; background: var(--bg); border-radius: 0; padding: 8px;
  overflow-y: auto; max-height: 100%;
}
.craft-recipe {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 0;
  background: var(--head); margin-bottom: 4px;
  border: 1px solid transparent;
}
.craft-recipe.can-make { border-color: var(--stam); }
.craft-recipe.cant-make { opacity: 0.55; }
.craft-recipe .cr-icon { font-size: 22px; width: 32px; text-align: center; }
.craft-recipe .cr-info { flex: 1; }
.craft-recipe .cr-name { font-size: 13px; font-weight: 600; }
.craft-recipe .cr-cost { font-size: 11px; color: var(--dim-2); }
.craft-recipe button {
  background: var(--stam); color: var(--fg-strong); border: 0; padding: 5px 12px;
  border-radius: 0; cursor: pointer; font-size: 12px;
}
.craft-recipe button:disabled { background: var(--line); cursor: not-allowed; }

/* === 건축 메뉴 === */
.build-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.build-card {
  background: var(--head); border: 1px solid var(--inset); border-radius: 0;
  padding: 10px 6px; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: all 0.1s;
}
.build-card:hover { background: var(--inset); border-color: var(--thirst); transform: translateY(-1px); }
.build-card .bc-icon { font-size: 26px; margin-bottom: 4px; }
.build-card .bc-name { font-size: 12px; font-weight: 600; color: var(--fg); }
.build-card .bc-cost { font-size: 10px; color: var(--dim-2); margin-top: 3px; }
.build-card .bc-key { font-size: 9px; color: var(--accent); margin-top: 3px; opacity: 0.7; }

.sp-list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--inset); font-size: 12px;
}

/* HUD: 좌측 끝 (사이드바는 가운데로 옮겼으니 충돌 X) */
#hud { top: 12px; left: 12px; }
.hud-actions { display: none; }
/* sidePanel도 좌측 사이드바 옆에서 슬라이드 */
#sidePanel.open { left: 60px; }

/* === Phase 14.19: 좀보이드식 인벤토리 테이블 === */
.inv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.inv-table thead th {
  background: var(--inset); color: var(--dim-2);
  font-weight: 600; padding: 5px 8px;
  text-align: left; position: sticky; top: 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase;
}
.inv-table tbody tr {
  border-bottom: 1px solid var(--head);
  cursor: pointer; transition: background 0.08s;
}
.inv-table tbody tr:nth-child(even) { background: rgba(var(--fg-rgb), 0.02); }
.inv-table tbody tr:hover { background: rgba(var(--thirst-rgb), 0.18); }
.inv-table td { padding: 5px 8px; vertical-align: middle; }
.inv-table .it-icon { width: 28px; text-align: center; font-size: 16px; }
.inv-table .it-name { color: var(--fg); }
.inv-table .it-name .it-count { color: var(--dim-2); margin-left: 4px; font-size: 11px; }
.inv-table .it-cat { color: var(--dim-2); font-size: 11px; width: 90px; }
.inv-table .it-action { width: 60px; text-align: right; }
.inv-table .it-action button {
  background: var(--line); border: 0; color: var(--fg);
  padding: 2px 6px; border-radius: 0; cursor: pointer; font-size: 11px;
}
.inv-table .it-action button:hover { background: var(--stam); color: var(--fg-strong); }
.inv-col-head {
  font-size: 11px; color: var(--accent); margin-bottom: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 4px;
}
.inv-col-head .col-count { color: var(--dim-2); font-weight: 400; margin-left: 6px; }
.id-empty {
  color: var(--dim-2); padding: 30px; text-align: center;
  background: var(--bg); border-radius: 0; flex: 1;
  display: flex; align-items: center; justify-content: center;
}

/* === Phase 14.21: 3-column 좀보이드 인벤 + 우측 컨테이너 탭 === */
.inv-three-col { display: flex; gap: 8px; height: 100%; }
.inv-three-col .inv-col:first-child { flex: 1; min-width: 0; }
.inv-three-col .inv-col:nth-child(2) { flex: 1; min-width: 0; }
.cont-tabs {
  width: 56px; flex-shrink: 0;
  background: var(--bg); border-radius: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px; overflow-y: auto;
}
.cont-tab {
  background: var(--inset); border: 1px solid var(--line);
  border-radius: 0; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: all 0.1s;
  position: relative;
}
.cont-tab:hover { background: var(--line); border-color: var(--thirst); }
.cont-tab.active {
  background: var(--stam);
  border-color: var(--stam);
}
.cont-tab .ct-icon { font-size: 18px; line-height: 1; }
.cont-tab .ct-count {
  font-size: 10px; color: var(--fg); margin-top: 2px; font-weight: 600;
}

/* === Phase 14.24: 드래그 UX 폴리시 === */
.inv-table tbody tr[draggable] { user-select: none; }
.inv-table tbody tr.dragging { opacity: 0.35; background: var(--stam) !important; }
.inv-col.drag-over { background: rgba(var(--accent-rgb), 0.06); }
.cont-tab.drag-over {
  border-color: var(--accent) !important;
  transform: scale(1.05);
}
/* 캔버스 drag hover (빈 화면=바닥에 떨어뜨림) */
#canvas.drag-over-ground { }
/* ghost 미리보기 — 작은 아이콘만 (HTML5 setDragImage로 동적 생성) */
.drag-ghost {
  position: absolute; top: -1000px; left: -1000px;
  background: rgba(var(--pane-rgb), 0.95); border: 1px solid var(--accent);
  border-radius: 0; padding: 4px 8px; font-size: 16px;
  color: var(--fg-strong); white-space: nowrap;
  pointer-events: none;
}

/* ★★[신체 상태 §8.3 · 2026-08-26] 무들 · 비네트 · 상태 패널 ────────────────────
   "속은 연속, 겉은 계단." 여기 있는 건 **겉**이다 — 단계와 색만 온다.
   ⚠아이콘은 이모지 **발판**이다(새 아트 제작 금지가 이번 배치 규약). 교체 예정. */
#moodles{position:fixed;right:12px;top:96px;display:flex;flex-direction:column;gap:6px;z-index:40;pointer-events:none}
.moodle{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius: 0;
  background:rgba(var(--pane-rgb), .72);border:1px solid rgba(var(--fg-rgb), .10);
  font: 600 12px/1.1 var(--font);color:var(--fg);}
.moodle .mo-emo{font-size:15px;line-height:1}
.moodle.s1{border-color:rgba(var(--accent-rgb), .45);color:var(--accent-hi)}
.moodle.s2{border-color:rgba(var(--accent-rgb), .55);color:var(--accent)}
.moodle.s3{border-color:rgba(var(--hp-rgb), .70);color:var(--hp);background:rgba(var(--bg-rgb), .78)}
/* 아날로그 채널은 **최소만**(§8.3) — 심각 단계에서 가장자리 하나.
   ★[정비 배치 2026-08-30] 색조를 **원인 축 계열**로 뺀다(`--vg-rgb` — 클라가 축에 따라 심는다).
   기본값은 옛 색 그대로라, 색조를 끄면(`VIGNETTE_AXIS_TINT=0`) 종전과 같은 화면이 된다. */
#bodyVignette{--vg-rgb:120,20,14;position:fixed;inset:0;pointer-events:none;z-index:35;opacity:0;
  transition:opacity .8s ease;}
#bodyVignette.on{opacity:1}
/* ★[정비 배치] 원인 축 — 가장자리에 **크게**. 무들(우상단 작은 칩)과 겹치지 않게 좌하단에 둔다. */
#vgAxes{position:fixed;left:16px;bottom:80px;z-index:41;display:flex;flex-direction:column;gap:10px;
  pointer-events:none;opacity:0;transition:opacity .5s ease}
#vgAxes.on{opacity:1}
.vg-axis{--vg-rgb:120,20,14;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius: 0;
  background:rgba(var(--bg-rgb), .72);border:2px solid rgba(var(--vg-rgb),.85);animation:vgPulse 2.2s ease-in-out infinite}
.vg-axis .vg-emo{font-size:30px;line-height:1}
.vg-axis .vg-ko{font: 700 16px/1.1 var(--font);color:rgb(var(--vg-rgb));letter-spacing:.02em;}
@keyframes vgPulse{0%,100%{opacity:.78}50%{opacity:1}}
/* ★★[접속 진단 배치 2026-08-30] 접속 상태 배너 — **색이 곧 판정**이다.
     노랑(data-hard=0) = 기다리는 중 · 빨강(data-hard=1) = 오류(기다려도 안 된다).
     실기 실측: 종전엔 아무 표시도 없어 "기다리면 되는 건지 에러인지" 구분할 방법이 없었다. */
#netLost{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:60;display:none;
  align-items:center;gap:10px;padding:9px 14px 9px 16px;border-radius: 0;max-width:min(680px,92vw);
  background:rgba(var(--bg-rgb), .94);border:1px solid rgba(var(--accent-rgb), .75);color:var(--accent-hi);
  font: 700 13px/1.35 var(--font);}
#netLost.on{display:flex}
#netLost[data-hard="1"]{background:rgba(var(--pane-rgb), .95);border-color:rgba(var(--hp-rgb), .85);color:var(--hp)}
#netLost .nl-dot{flex:0 0 auto;width:9px;height:9px;border-radius: 0;background:var(--accent);animation:vgPulse 1.1s ease-in-out infinite}
#netLost[data-hard="1"] .nl-dot{background:var(--hp)}
#netLost .nl-body{display:flex;flex-direction:column;gap:2px;min-width:0}
#netLost .nl-txt{white-space:normal}
#netLost .nl-why{font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);white-space:normal}
#netLost[data-hard="1"] .nl-why{color:var(--hp)}
#netLost .nl-reload{flex:0 0 auto;margin-left:4px;padding:5px 12px;border-radius: 0;cursor:pointer;
  background:rgba(var(--fg-rgb), .10);border:1px solid rgba(var(--fg-rgb), .28);color:inherit;
  font: 700 12px/1 var(--font)}
#netLost .nl-reload:hover{background:rgba(var(--fg-rgb), .18)}
/* ★[정비 배치] 통일 목록(좀보이드 문법) — 바닥·인벤·상자가 **같은 구조**를 쓴다. */
.ul-caret{display:inline-block;width:14px;text-align:center;cursor:pointer;color:var(--thirst);user-select:none;font-size:10px}
.ul-caret:hover{color:var(--fg)}
.ul-caret.ul-none{cursor:default;opacity:0}
.ul-sub{background:rgba(var(--fg-rgb), .025)}
.ul-sub .ul-subname{padding-left:18px;color:var(--dim);font-size:11px}
.ul-age{color:var(--dim-2);font-size:10px}
.inv-table tr.ul-row.dragging,.inv-table tr.ul-sub.dragging{opacity:.45}
/* 상태 패널 */
.bd-sec{margin:10px 0 4px;font: 600 12px/1.2 var(--font);color:var(--dim);letter-spacing:.02em}
.bd-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.bd-emo{width:18px;text-align:center}
.bd-name{width:52px;font: 600 12px/1.2 var(--font);color:var(--fg)}
.bd-bar{flex:1;height:8px;border-radius: 0;background:rgba(var(--fg-rgb), .08);overflow:hidden}
.bd-fill{height:100%;border-radius: 0;background:var(--stam)}
.bd-fill.warn{background:var(--hp)}
.bd-fill.bad{background:var(--hp)}
.bd-num{width:38px;text-align:right;font:500 11px/1.2 ui-monospace,monospace;color:var(--dim)}
.bd-why{margin:3px 0 0 26px;font: 500 11px/1.35 var(--font);color:var(--dim)}
.bd-why b{color:var(--accent);font-weight:600}
.bd-none{color:var(--dim-2);font: 500 12px/1.4 var(--font);padding:4px 0}
.bd-floor{margin-top:8px;padding:6px 8px;border-radius: 0;background:rgba(var(--accent-rgb), .35);
  border:1px solid rgba(var(--accent-rgb), .35);color:var(--accent);font: 500 11px/1.4 var(--font)}

/* ★★[거래소 2026-08-27] 시세표 + 교환 — 패널 프레임의 **두 번째 칸**(새 프레임 금지) ────── */
.tr-head{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 8px;
  font: 500 11px/1.3 var(--font);color:var(--dim)}
.tr-head b{color:var(--fg)}
.tr-row{display:grid;grid-template-columns:20px 1fr 62px 52px 52px;gap:6px;align-items:center;
  padding:4px 6px;border-radius: 0;cursor:pointer;font: 500 12px/1.2 var(--font);color:var(--fg)}
.tr-row:hover{background:rgba(var(--fg-rgb), .05)}
.tr-row.give{background:rgba(var(--accent-rgb), .16);}
.tr-row.take{background:rgba(var(--thirst-rgb), .16);}
.tr-row.off{opacity:.38;cursor:default}
.tr-num{text-align:right;font:500 11px/1.2 ui-monospace,monospace;color:var(--dim)}
.tr-hdr{display:grid;grid-template-columns:20px 1fr 62px 52px 52px;gap:6px;padding:0 6px 4px;
  font: 600 10px/1.2 var(--font);color:var(--dim-2);border-bottom:1px solid rgba(var(--fg-rgb), .08)}
.tr-deal{margin-top:10px;padding:8px;border-radius: 0;background:rgba(var(--fg-rgb), .05);
  border:1px solid rgba(var(--fg-rgb), .10)}
.tr-deal .tr-line{font: 500 12px/1.5 var(--font);color:var(--fg)}
.tr-deal .tr-line b{color:var(--stam)}
.tr-warn{color:var(--accent);font: 500 11px/1.4 var(--font);margin-top:4px}
.tr-qty{display:flex;gap:6px;align-items:center;margin-top:6px}
.tr-qty input{width:70px;background:rgba(var(--bg-rgb), .35);border:1px solid rgba(var(--fg-rgb), .15);
  border-radius: 0;color:var(--fg);padding:3px 6px;font:500 12px ui-monospace,monospace}
.tr-btn{padding:5px 12px;border-radius: 0;border:1px solid rgba(var(--stam-rgb), .45);
  background:rgba(var(--stam-rgb), .30);color:var(--fg);font: 600 12px var(--font);cursor:pointer}
.tr-btn[disabled]{opacity:.4;cursor:default}
.tr-hint{color:var(--dim-2);font: 500 11px/1.45 var(--font);margin-top:6px}

/* ★[무게 배치 2026-08-27] 소지 무게 · 과적 · 넘침 딱지 */
#carryHud.over b { color: var(--hp); }
#carryHud.over { }
.it-kg { color: var(--dim-2); font-size: 11px; margin-left: 4px; }
.bd-dim { color: var(--dim-2); font-size: 11px; }
.tr-row.glut { opacity: .82; }
.tr-glut { font-style: normal; font-size: 10px; color: var(--accent); border: 1px solid var(--accent);
           border-radius: 0; padding: 0 3px; margin-left: 4px; vertical-align: middle; }
.moodle[data-axis="carry"] { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   T66 — 화면 규칙 B "먹선" · 위 토큰 위에 얹는 규칙들
   ★여기부터는 **새 문법**이다: 판 머리 하나 · 선 아이콘 · 아이템 그림 하나 · 막대 10px.
   ★새 색을 적지 않는다 — 전부 위 `:root` 토큰이다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 판 — 게임이 8% 비친다 ────────────────────────────────────────────────── */
#sidePanel, #invDropdown, .modal-card, #hud, #minimap, #chatPanel, #moodles > .moodle,
#netLost, .lobby-card, #vmpPanel, #villageMarketPanel {
  background: var(--pane); border-color: var(--line);
}

/* ── 판 머리 **한 문법** — 정본은 `panelHead()`(50-i-panel.js) ─────────────
   ★모든 패널 머리에 `.pane-head` 가 붙는다. 기존 class(`sp-head`·`id-head`·`modal-head`)는
     그대로 두었다 — 그것들을 지우면 기존 CSS·JS 선택자가 끊긴다(행동 변경 0 규약).
     그래서 **더한다**: 문법은 하나가 되고, 붙어 있던 것은 안 끊긴다. */
.pane-head {
  display: flex; align-items: center; gap: 8px;
  background: var(--head); color: var(--fg-strong);
  font-size: 14px; font-weight: 700;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.pane-head .ph-key { margin-left: auto; }
.pane-head .ph-sub { font-weight: 400; font-size: 12px; color: var(--dim); }
.pane-head button { background: none; border: 1px solid var(--line-2); color: var(--fg); }

/* ── 단축키 표기 ─────────────────────────────────────────────────────────── */
.key {
  font-family: var(--mono); font-size: 10px; line-height: 1;
  border: 1px solid var(--line-2); color: var(--dim);
  padding: 2px 5px; display: inline-block;
}

/* ── 선 아이콘 ───────────────────────────────────────────────────────────── */
.uic { display: inline-block; vertical-align: -0.15em; color: inherit; }
.sb-icon .uic { color: var(--dim); }
.sb-icon.active .uic, .sb-icon:hover .uic { color: var(--accent); }

/* ── 아이템 그림 하나 — 없으면 **점선 빈 칸**(이모지 아님) ────────────────── */
.item-pic { display: inline-block; vertical-align: middle; image-rendering: auto; }
.item-pic-none {
  display: inline-block; vertical-align: middle;
  border: 1px dashed var(--line-2); background: transparent;
}

/* ── 수치 막대 10px ──────────────────────────────────────────────────────── */
/*  ⚠자리는 안 옮긴다(§1 "HUD 자리 재배치 0") — 막대 **안**의 숫자 그대로다. 높이·색·글꼴만 바꾼다. */
.hp-bar { height: 14px; background: var(--inset); border: 1px solid var(--line); }
.hp-bar .hp-text { font-family: var(--mono); font-size: 10px; color: var(--fg-strong); }
.hp-fill { background: var(--hp); }
.hunger-fill { background: var(--accent); }
.thirst-fill { background: var(--thirst); }
.stam-fill { background: var(--stam); }

/* ── 무들 — 판 + 축 색 테 + 아이콘 + 한 단어 + 3단계 점 ───────────────────── */
.moodle { background: var(--pane); border: 1px solid var(--line); color: var(--fg); }
.moodle .mo-dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.moodle .mo-dot { width: 5px; height: 5px; background: var(--line-2); display: block; }
.moodle .mo-dot.on { background: currentColor; }
.moodle[data-axis="hp"], .moodle[data-axis="injury"] { color: var(--hp); }
.moodle[data-axis="thirst"], .moodle[data-axis="cold"] { color: var(--thirst); }
.moodle[data-axis="stam"], .moodle[data-axis="fatigue"] { color: var(--stam); }
.moodle[data-axis="hunger"], .moodle[data-axis="carry"], .moodle[data-axis="aftermath"] { color: var(--accent); }

/* ── 로그인 두 열 ────────────────────────────────────────────────────────── */
.lobby-card { min-width: 880px; max-width: 920px; padding: 0; border: 1px solid var(--line); }
.lobby-grid { display: grid; grid-template-columns: 340px 1fr; }
.lobby-left { padding: 28px 28px 20px; border-right: 1px solid var(--line); }
.lobby-right { padding: 28px 28px 20px; }
.lobby-card h1 { font-size: 30px; letter-spacing: -0.5px; }
.lobby-card button#enter {
  background: var(--fg); color: var(--bg); font-weight: 700; border: 0; padding: 14px;
}
.lobby-card button#enter:hover { background: var(--fg-strong); filter: none; }
.vil-card { border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.vil-card.sel { border-color: var(--accent); }
.vil-card .vc-name { font-weight: 700; color: var(--fg-strong); }
.vil-card .vc-kind, .vil-card .vc-busy { color: var(--dim); font-size: 11px; font-weight: 400; }
.vil-card .vc-news { color: var(--fg); font-size: 12px; margin-top: 4px; }
.vil-card .vc-badge { color: var(--accent); font-size: 11px; margin-top: 4px; display: block; }
.lobby-fold > summary { cursor: pointer; color: var(--dim); font-size: 12px; list-style: none; }
.lobby-fold > summary::-webkit-details-marker { display: none; }

/* ── 개발용 좌표·속도 줄 — 기본 숨김(값은 계속 갱신된다) ──────────────────── */
#hud .hud-row.dev-row { display: none; }
#hud .hud-row.dev-row.on { display: flex; }

/* ── 짐 판 · 게시판 — 표 문법 ────────────────────────────────────────────── */
.inv-col-head, .tr-head, .skill-section-head { background: var(--head); color: var(--fg-strong); }
.ul-row td, .ul-sub td { border-bottom: 1px solid var(--line); }
.it-kg, .ul-age { font-family: var(--mono); color: var(--dim); }

/* ── 로비 — 시작 화면(마을 카드 · 지도 · 추천) ────────────────────────────── */
.onb-cards { margin-bottom: 10px; }
.onb-map { width: 100%; height: 120px; display: block; cursor: pointer;
  background: var(--inset); border: 1px solid var(--line); }
.onb-detail { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--fg); min-height: 42px; }
.onb-any { margin-top: 10px; width: 100%; padding: 9px;
  background: none; border: 1px solid var(--line-2); color: var(--fg); cursor: pointer; }
.onb-any:hover { border-color: var(--accent); color: var(--accent); filter: none; background: none; }
.lobby-right-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.dim { color: var(--dim); }
.accent { color: var(--accent); }
.quote { color: var(--fg); }
.warn { color: var(--hp); }
.linkish { width: auto; margin: 0; padding: 2px 6px; background: none; border: 1px solid var(--line-2);
  color: var(--dim); font-size: 11px; cursor: pointer; }
.onb-hud-line { font-size: 12px; color: var(--dim); }
.onb-fx { color: var(--accent); }
/* ── ★[T1064 2026-11-02] 「지금 할 일」 — 지도 판 바로 밑 고정 칸 하나(70-lobby `onbNextRender`) ─────────────
   ★먹선 그대로: 판 · 판 머리(`.pane-head`) · 테 1px · 모서리 0 · 그림자 0 · 강조는 화살 하나(호박색) · 단축키는 `.key`.
   ★자리 — 지도 판(`#minimap` · 오른쪽 위) 바로 밑. 위 간격은 눈금 8, 폭은 지도 판의 폭(조각이 지도 판의 상자에서 읽어 맞춘다).
     지도 판이 없으면 이 줄의 오른쪽 위 자리다. 눌림을 먹지 않는다(세계를 누르는 손을 막지 않는다). */
#onbNext { position: fixed; top: 12px; right: 12px; width: 320px; margin-top: 8px; z-index: 10;
  background: var(--pane); border: 1px solid var(--line); color: var(--fg); pointer-events: none; }
#onbNext .pane-head { font-size: 13px; padding: 6px 10px; }
.onb-next-body { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px 10px; }
.onb-next-arrow { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; transform-origin: 50% 50%; }
.onb-next-text { flex: 1 1 auto; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }   /* 낱말 가운데서 줄을 안 끊는다("들 / 어가면") */
.onb-next-item { font-size: 14px; font-weight: 700; color: var(--fg-strong); line-height: 1.4; }
.onb-next-guide { margin-top: 4px; font-size: 12px; color: var(--dim); line-height: 1.6; }
.onb-next-guide .key { margin: 0 1px; }
/* ★[T1086 2026-11-02] 「지금 할 일」의 단추 하나 — 마을 가입(채팅 `/소속` 그 줄) · 터 잡기(C 키 그 메시지). 칸은 눌림을 안 먹고 단추만 먹는다.
   ★먹선 그대로: 테 1px(--line-2) · 바탕 없음 · 모서리 0 · 그림자 0 · 손을 올리면 강조 호박색 하나(--accent). 이름은 명사형. */
.onb-next-btn { pointer-events: auto; margin-top: 8px; padding: 5px 12px; background: none; border: 1px solid var(--line-2);
  color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.onb-next-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── ★[T80 2026-09-03] 게시판 판 — 토스트가 아니라 벽에 붙은 판 ──────────────
   ★새 색 0 · 모서리 0 · 이모지 0. 값은 전부 위 `:root` 토큰이다.
   ★열은 거래소 표(`tr-row`)와 같은 문법이다 — 그림 · 이름 · 수 · 수 · 갚을 것 · 버튼. */
/* ★자리 — **오른쪽 선반**이다. 회관 판(`villageInvPanel`)과 같은 선반을 일부러 쓴다:
   둘 다 "마을 앞에 서서 보는 판"이라 한 번에 하나만 읽는다.
   ⚠가운데에 두면 `#sidePanel.open`(x 60~520)을 덮어 **그 판의 버튼이 안 눌린다**
     — `e2e-membership` 이 실측으로 그걸 잡았다(§8.2 논모달의 두 번째 얼굴). */
#boardPane{position:fixed;right:16px;top:64px;z-index:900;
  width:520px;max-width:44vw;max-height:74vh;overflow:auto;
  background:var(--pane);border:1px solid var(--line);color:var(--fg)}
.bp-body{padding:10px 12px;font-size:12px;color:var(--fg)}
.bp-hdr,.bp-row{display:grid;grid-template-columns:24px 1fr 44px 56px 1fr 56px;gap:6px;align-items:center}
.bp-hdr{padding:0 6px 4px;font:600 10px/1.2 var(--font);color:var(--dim-2);
  border-bottom:1px solid var(--line)}
.bp-row{padding:5px 6px;font:500 12px/1.3 var(--font);color:var(--fg);
  border-bottom:1px solid var(--line)}
.bp-row:hover{background:var(--inset)}
.bp-num,.bp-prog{text-align:right;font:500 11px/1.2 var(--mono);color:var(--dim)}
.bp-rew{color:var(--dim)}
.bp-give{padding:3px 10px;border-radius: 0;border:1px solid var(--line-2);
  background:var(--inset);color:var(--fg);font:600 11px var(--font);cursor:pointer}
.bp-give[disabled]{opacity:.4;cursor:default}
.bp-hint{margin-top:8px;color:var(--dim-2);font:500 11px/1.45 var(--font)}
.bp-news{padding:3px 6px;font:500 12px/1.45 var(--font);color:var(--fg)}
.bp-from{color:var(--dim-2);font-size:11px}
/* ★[T1085] 촌장 명부(게시판 판 안 · 구성원 칸) — 판의 줄 문법 그대로(줄 · 버튼 토큰 공유 · 새 색 0) */
.bm-hdr,.bm-row{display:grid;grid-template-columns:1fr 44px 1fr 1fr 72px;gap:6px;align-items:center}
.bm-row select{font:500 11px var(--font);background:var(--inset);color:var(--fg);border:1px solid var(--line-2);border-radius:0}